/* ============================================================
   HOME.CSS — Estilos exclusivos de la portada (index.php)
   ============================================================
   Depende de las variables definidas en css/style.css
   (debe cargarse DESPUÉS de ese archivo).
   
   Incluye todos los estilos del rediseño:
   - Banner de confianza (con contraste mejorado)
   - Hero mejorado (con nombre completo de la Iglesia)
   - Bloque "Primera vez"
   - Identidad / Nuestra Iglesia (logo + texto en 2 columnas)
   - Noticias
   - Publicaciones
   - Comunidades (texto blanco forzado)
   - Estadísticas
   - Obispo
   - Vocación
   - Vida de la Iglesia
   - Agenda
   - Reflexión (CORREGIDO: texto visible)
   - Galería
   - Cita
   - CTA Final (con contraste mejorado)
   ============================================================ */

/* ============================================================
   BANNER DE CONFIANZA - CON CONTRASTE MEJORADO
   ============================================================ */
.banner-confianza {
  background: linear-gradient(135deg, #2a4a3a 0%, #1a3a2a 100%);
  padding: 16px 0;
  border-top: 2px solid var(--oro, #b8962e);
  border-bottom: 2px solid var(--oro, #b8962e);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 20px rgba(0,0,0,0.3);
}

.banner-confianza::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(184, 150, 46, 0.08), transparent);
  animation: shimmer 8s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

.banner-confianza-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.banner-confianza-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
}

.banner-confianza-item .icono {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--oro, #b8962e);
}

.banner-confianza-item strong {
  color: var(--blanco, #ffffff);
  font-weight: 700;
}

.banner-confianza-item .separador {
  color: rgba(184, 150, 46, 0.4);
  font-size: 1.2rem;
  margin: 0 4px;
}

.banner-confianza-enlace {
  color: var(--oro-claro, #d4b84a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transicion, all 0.3s ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.banner-confianza-enlace:hover {
  color: var(--blanco, #ffffff);
  text-decoration: none;
}

.banner-confianza-enlace svg {
  width: 16px;
  height: 16px;
  transition: var(--transicion, all 0.3s ease);
}

.banner-confianza-enlace:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   HERO MEJORADO - CON NOMBRE COMPLETO DE LA IGLESIA
   ============================================================ */
.hero-nuevo {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--verde-oscuro, #1a3a2a);
}

.hero-fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transform: scale(1.05);
  transition: transform 8s ease;
}

.hero-nuevo:hover .hero-fondo {
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 58, 42, 0.85) 0%, rgba(26, 58, 42, 0.4) 50%, rgba(26, 58, 42, 0.7) 100%);
  z-index: 1;
}

.hero-contenido {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 850px;
  padding: 40px 20px;
  animation: heroFadeIn 1.2s ease-out;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  display: inline-block;
  background: rgba(184, 150, 46, 0.2);
  border: 1px solid rgba(184, 150, 46, 0.4);
  color: var(--oro-claro, #d4b84a);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 30px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ============================================================
   HERO - NOMBRE COMPLETO DE LA IGLESIA
   ============================================================ */
.hero-nombre-iglesia {
  display: block;
  font-family: 'IM Fell English', serif;
  font-size: 2.2rem;
  color: var(--blanco, #ffffff);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-lema {
  display: block;
  font-family: 'IM Fell English', serif;
  font-size: 3.5rem;
  color: var(--blanco, #ffffff);
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-lema .texto-destacado {
  color: var(--oro-claro, #d4b84a);
  position: relative;
}

.hero-lema .texto-destacado::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--oro, #b8962e);
  border-radius: 2px;
}

/* ============================================================ */
.hero-descripcion {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.hero-descripcion strong {
  color: var(--blanco, #ffffff);
}

.hero-botones {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Botones base (ya están en style.css, pero los reforzamos aquí) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transicion, all 0.3s ease);
  cursor: pointer;
  border: 2px solid transparent;
  letter-spacing: 0.02em;
}

.btn-primario {
  background: var(--oro, #b8962e);
  color: var(--blanco, #ffffff);
  box-shadow: 0 8px 25px rgba(184, 150, 46, 0.4);
}

.btn-primario:hover {
  background: var(--oro-claro, #d4b84a);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(184, 150, 46, 0.5);
}

.btn-secundario {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco, #ffffff);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

.btn-secundario:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  border-color: var(--oro, #b8962e);
}

.btn-oro {
  background: var(--oro, #b8962e);
  color: var(--blanco, #ffffff);
  box-shadow: 0 4px 15px rgba(184, 150, 46, 0.3);
}

.btn-oro:hover {
  background: var(--oro-claro, #d4b84a);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(184, 150, 46, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--texto, #2c2c2c);
  border-color: var(--oro, #b8962e);
}

.btn-outline:hover {
  background: var(--oro, #b8962e);
  color: var(--blanco, #ffffff);
  transform: translateY(-2px);
}

.btn-outline-claro {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco, #ffffff);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-claro:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--oro, #b8962e);
  transform: translateY(-2px);
}

.btn-pequeno {
  padding: 10px 20px;
  font-size: 0.85rem;
}

.hero-bajar {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transicion, all 0.3s ease);
  animation: bounceArrow 2s ease-in-out infinite;
}

.hero-bajar:hover {
  color: var(--blanco, #ffffff);
  border-color: var(--oro, #b8962e);
  transform: translateX(-50%) translateY(-4px);
}

.hero-bajar svg {
  width: 24px;
  height: 24px;
}

@keyframes bounceArrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* ============================================================
   BLOQUE "PRIMERA VEZ"
   ============================================================ */
.primera-vez-bloque {
  background: linear-gradient(135deg, var(--crema, #f5f0e8) 0%, var(--blanco, #ffffff) 100%);
  padding: 40px 0;
  border-bottom: 3px solid var(--oro, #b8962e);
}

.primera-vez-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.primera-vez-titulo {
  font-family: 'IM Fell English', serif;
  font-size: 2.2rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0;
}

.primera-vez-titulo .emoji {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 8px;
}

.primera-vez-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.primera-vez-item {
  padding: 16px;
  background: var(--blanco, #ffffff);
  border-radius: var(--border-radius, 16px);
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
  transition: var(--transicion, all 0.3s ease);
  border-left: 4px solid var(--oro, #b8962e);
}

.primera-vez-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
}

.primera-vez-item .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--oro, #b8962e);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.primera-vez-item p {
  font-size: 0.9rem;
  color: var(--texto-suave, #5a5a5a);
  line-height: 1.6;
  margin: 0;
}

.primera-vez-item p strong {
  color: var(--verde-oscuro, #1a3a2a);
}

.primera-vez-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ============================================================
   SECCIÓN IDENTIDAD / NUESTRA IGLESIA
   ============================================================ */
.seccion-identidad {
  padding: 80px 0;
  background: var(--blanco, #ffffff);
}

.identidad-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

.etiqueta-seccion {
  display: inline-block;
  background: rgba(184, 150, 46, 0.1);
  color: var(--oro-oscuro, #8a6e1e);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 16px;
}

.seccion-titulo {
  font-family: 'IM Fell English', serif;
  font-size: 2.8rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0 0 16px;
  line-height: 1.2;
}

.seccion-titulo .texto-destacado {
  color: var(--oro, #b8962e);
}

.seccion-subtitulo {
  font-size: 1.15rem;
  color: var(--texto-suave, #5a5a5a);
  line-height: 1.7;
}

/* ============================================================
   LOGO + TEXTO EN 2 COLUMNAS
   ============================================================ */
.identidad-logo-texto {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
  padding: 20px;
  background: var(--crema, #f5f0e8);
  border-radius: var(--border-radius, 16px);
  border: 1px solid var(--crema-osc, #e8e0d4);
}

.identidad-logo-texto .logo-wrap {
  text-align: center;
}

.identidad-logo-texto .logo-wrap img {
  max-width: 160px;
  height: auto;
}

.identidad-logo-texto .texto-wrap p {
  color: var(--texto-suave, #5a5a5a);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0 0 12px;
  text-align: left;
}

.identidad-logo-texto .texto-wrap p:last-child {
  margin-bottom: 0;
}

.identidad-logo-texto .texto-wrap p strong {
  color: var(--verde-oscuro, #1a3a2a);
}

/* ============================================================
   TARJETAS DE IDENTIDAD - CORREGIDO
   (Iconos y títulos centrados, texto a la izquierda)
   ============================================================ */
.identidad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.identidad-card {
  padding: 36px 28px;
  background: var(--crema, #f5f0e8);
  border-radius: var(--border-radius, 16px);
  text-align: center;
  transition: var(--transicion, all 0.3s ease);
  border: 1px solid transparent;
}

.identidad-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
  border-color: var(--oro, #b8962e);
}

.identidad-icono {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
  text-align: center;
}

.identidad-card h3 {
  font-family: 'IM Fell English', serif;
  font-size: 1.5rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0 0 12px;
  text-align: center;
}

.identidad-card p {
  color: var(--texto-suave, #5a5a5a);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
  text-align: left;
}

.identidad-card p strong {
  color: var(--verde-oscuro, #1a3a2a);
}

.identidad-timeline {
  display: flex;
  justify-content: space-around;
  padding: 40px 0;
  border-top: 2px solid var(--crema-osc, #e8e0d4);
  border-bottom: 2px solid var(--crema-osc, #e8e0d4);
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.timeline-item {
  text-align: center;
  flex: 1;
  min-width: 150px;
}

.timeline-fecha {
  display: block;
  font-family: 'IM Fell English', serif;
  font-size: 2rem;
  color: var(--oro, #b8962e);
  font-weight: 700;
}

.timeline-item p {
  margin: 8px 0 0;
  color: var(--texto-suave, #5a5a5a);
  font-size: 0.9rem;
}

.identidad-cta {
  text-align: center;
}

/* ============================================================
   NOTICIAS
   ============================================================ */
.noticias-mejoradas {
  padding: 80px 0;
  background: var(--crema, #f5f0e8);
}

.noticias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.noticia-card {
  background: var(--blanco, #ffffff);
  border-radius: var(--border-radius, 16px);
  overflow: hidden;
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
  transition: var(--transicion, all 0.3s ease);
  text-decoration: none;
  color: inherit;
}

.noticia-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
}

.noticia-card-img {
  height: 220px;
  overflow: hidden;
  background: var(--crema, #f5f0e8);
  position: relative;
}

.noticia-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transicion, all 0.3s ease);
}

.noticia-card:hover .noticia-card-img img {
  transform: scale(1.05);
}

.noticia-card-categoria {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--oro, #b8962e);
  color: var(--blanco, #ffffff);
  font-size: 0.7rem;
  padding: 4px 14px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.noticia-card-body {
  padding: 24px;
}

.noticia-card-fecha {
  font-size: 0.8rem;
  color: var(--texto-suave, #5a5a5a);
  margin-bottom: 8px;
}

.noticia-card-titulo {
  font-family: 'IM Fell English', serif;
  font-size: 1.2rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0 0 12px;
  line-height: 1.4;
}

.noticia-card-resumen {
  color: var(--texto-suave, #5a5a5a);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.noticia-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--oro, #b8962e);
  font-weight: 600;
  margin-top: 16px;
  font-size: 0.9rem;
}

.noticia-card-link svg {
  width: 16px;
  height: 16px;
  transition: var(--transicion, all 0.3s ease);
}

.noticia-card:hover .noticia-card-link svg {
  transform: translateX(4px);
}

/* ============================================================
   PUBLICACIONES
   ============================================================ */
.publicaciones-mejoradas {
  padding: 80px 0;
  background: var(--blanco, #ffffff);
}

.publicaciones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.publicacion-card {
  background: var(--crema, #f5f0e8);
  border-radius: var(--border-radius, 16px);
  overflow: hidden;
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
  transition: var(--transicion, all 0.3s ease);
  display: flex;
  flex-direction: column;
}

.publicacion-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
}

.publicacion-card-portada {
  height: 280px;
  overflow: hidden;
  background: var(--crema-osc, #e8e0d4);
  position: relative;
}

.publicacion-card-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transicion, all 0.3s ease);
}

.publicacion-card:hover .publicacion-card-portada img {
  transform: scale(1.05);
}

.publicacion-card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.publicacion-card-etiqueta {
  display: inline-block;
  background: var(--verde-oscuro, #1a3a2a);
  color: var(--blanco, #ffffff);
  font-size: 0.7rem;
  padding: 4px 16px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
  margin-bottom: 12px;
}

.publicacion-card-titulo {
  font-family: 'IM Fell English', serif;
  font-size: 1.4rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0 0 8px;
}

.publicacion-card-fecha {
  color: var(--texto-suave, #5a5a5a);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.publicacion-card-botones {
  display: flex;
  gap: 12px;
  margin-top: auto;
  flex-wrap: wrap;
}

/* ============================================================
   COMUNIDADES - TEXTO BLANCO FORZADO
   ============================================================ */
.comunidades-mejoradas {
  padding: 80px 0;
  background: var(--verde-oscuro, #1a3a2a);
  color: var(--blanco, #ffffff);
}

.comunidades-mejoradas .seccion-titulo {
  color: var(--blanco, #ffffff);
}

.comunidades-mejoradas .seccion-subtitulo {
  color: rgba(255, 255, 255, 0.7);
}

.comunidades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.comunidad-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius, 16px);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transicion, all 0.3s ease);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  color: var(--blanco, #ffffff) !important;
  backdrop-filter: blur(8px);
}

.comunidad-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-8px);
  border-color: var(--oro, #b8962e);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.comunidad-card-escudo {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  margin: 0 auto 16px;
}

.comunidad-card h3 {
  font-family: 'IM Fell English', serif;
  font-size: 1.2rem;
  margin: 0 0 8px;
  color: var(--blanco, #ffffff) !important;
}

.comunidad-card-ciudad {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 16px;
}

.comunidad-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--oro-claro, #d4b84a) !important;
  font-weight: 600;
  font-size: 0.9rem;
}

.comunidad-card-link svg {
  width: 16px;
  height: 16px;
  transition: var(--transicion, all 0.3s ease);
}

.comunidad-card:hover .comunidad-card-link svg {
  transform: translateX(4px);
}

/* ============================================================
   ESTADÍSTICAS
   ============================================================ */
.estadisticas-seccion {
  background: var(--crema, #f5f0e8);
  padding: 56px 0;
}

.estadisticas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  text-align: center;
  margin-top: 8px;
}

.estadistica-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.estadistica-numero {
  font-family: 'IM Fell English', serif;
  font-size: 2.6rem;
  color: var(--oro, #b8962e);
  line-height: 1;
  margin-bottom: 8px;
}

.estadistica-etiqueta {
  font-size: 0.9rem;
  color: var(--texto-suave, #5a5a5a);
  max-width: 180px;
}

/* ============================================================
   OBISPO
   ============================================================ */
.obispo-mejorado {
  padding: 80px 0;
  background: var(--crema, #f5f0e8);
}

.obispo-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  align-items: start;
}

.obispo-perfil {
  text-align: center;
}

.obispo-foto-circular {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--oro, #b8962e);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
  margin: 0 auto 16px;
}

.obispo-nombre {
  font-family: 'IM Fell English', serif;
  font-size: 1.4rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0;
}

.obispo-titulo-cargo {
  font-size: 0.9rem;
  color: var(--oro, #b8962e);
  font-weight: 600;
}

.obispo-mensaje-box {
  background: var(--blanco, #ffffff);
  padding: 40px;
  border-radius: var(--border-radius, 16px);
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
  border-left: 6px solid var(--oro, #b8962e);
  position: relative;
}

.obispo-mensaje-box::before {
  content: '"';
  font-family: 'IM Fell English', serif;
  font-size: 4rem;
  color: var(--oro, #b8962e);
  position: absolute;
  top: -10px;
  left: 16px;
  opacity: 0.3;
}

.obispo-mensaje-texto {
  font-family: 'IM Fell English', serif;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0 0 16px;
  padding-left: 20px;
}

.obispo-firma {
  color: var(--texto-suave, #5a5a5a);
  font-size: 0.95rem;
  margin: 0 0 20px;
  padding-left: 20px;
}

.obispo-botones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-left: 20px;
}

/* ============================================================
   VOCACIÓN Y SERVICIO
   ============================================================ */
.vocacion-bloque {
  padding: 60px 0;
  background: var(--verde-oscuro, #1a3a2a);
  color: var(--blanco, #ffffff);
}

.vocacion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.vocacion-imagen img {
  width: 100%;
  border-radius: var(--border-radius, 16px);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
}

.vocacion-texto h3 {
  font-family: 'IM Fell English', serif;
  font-size: 2rem;
  color: var(--oro-claro, #d4b84a);
  margin: 0 0 16px;
}

.vocacion-texto p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 24px;
}

.vocacion-texto .btn-primario {
  display: inline-block;
}

.vocacion-texto .btn-primario:hover {
  background: var(--oro-claro, #d4b84a);
}

/* ============================================================
   VIDA DE LA IGLESIA (Tarjetas)
   ============================================================ */
.tarjetas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.tarjeta-simple {
  background: var(--crema, #f5f0e8);
  padding: 36px 28px;
  border-radius: var(--border-radius, 16px);
  transition: var(--transicion, all 0.3s ease);
}

.tarjeta-simple:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
}

.tarjeta-titulo {
  font-family: 'IM Fell English', serif;
  color: var(--verde-oscuro, #1a3a2a);
  font-size: 1.3rem;
  margin: 0 0 12px;
}

.tarjeta-texto {
  color: var(--texto-suave, #5a5a5a);
  line-height: 1.7;
  margin: 0 0 16px;
}

.enlace-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--oro, #b8962e);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transicion, all 0.3s ease);
}

.enlace-texto:hover {
  color: var(--oro-oscuro, #8a6e1e);
}

.enlace-texto svg {
  width: 16px;
  height: 16px;
  transition: var(--transicion, all 0.3s ease);
}

.enlace-texto:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   AGENDA / PRÓXIMAS CELEBRACIONES
   ============================================================ */
.agenda-grid {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.agenda-item {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--blanco, #ffffff);
  padding: 20px 24px;
  border-radius: var(--border-radius, 16px);
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
  transition: var(--transicion, all 0.3s ease);
}

.agenda-item:hover {
  transform: translateX(4px);
  box-shadow: var(--sombra-fuerte, 0 15px 50px rgba(0,0,0,0.2));
}

.agenda-fecha {
  text-align: center;
  min-width: 80px;
}

.agenda-fecha-dia {
  display: block;
  font-family: 'IM Fell English', serif;
  font-size: 1.8rem;
  color: var(--oro, #b8962e);
  font-weight: 700;
}

.agenda-fecha-hora {
  font-size: 0.8rem;
  color: var(--texto-suave, #5a5a5a);
}

.agenda-titulo-evento {
  font-family: 'IM Fell English', serif;
  font-size: 1.1rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0;
}

.agenda-lugar {
  color: var(--texto-suave, #5a5a5a);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* ============================================================
   REFLEXIÓN + PRINCIPIOS - CORREGIDO (texto visible)
   ============================================================ */
.reflexion-mejorada {
  padding: 60px 0;
  background: var(--crema, #f5f0e8);
}

.reflexion-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.reflexion-card {
  background: var(--blanco, #ffffff);
  padding: 40px;
  border-radius: var(--border-radius, 16px);
  box-shadow: var(--sombra, 0 8px 30px rgba(0,0,0,0.12));
  border-left: 6px solid var(--oro, #b8962e);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reflexion-card h3 {
  font-family: 'IM Fell English', serif;
  font-size: 1.6rem;
  color: var(--verde-oscuro, #1a3a2a);
  margin: 0 0 16px;
}

.reflexion-card p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2c2c2c !important;
  font-style: italic;
  margin: 0 0 12px;
}

.reflexion-card footer {
  color: var(--texto-suave, #5a5a5a);
  font-size: 0.9rem;
}

.principios-destacado {
  background: var(--verde-oscuro, #1a3a2a);
  padding: 40px;
  border-radius: var(--border-radius, 16px);
  color: var(--blanco, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.principios-destacado p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 0 0 16px;
  color: var(--blanco, #ffffff) !important;
}

.principios-destacado a {
  color: var(--oro-claro, #d4b84a);
  text-decoration: underline;
  font-weight: 600;
}

.principios-destacado a:hover {
  color: var(--blanco, #ffffff);
}

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria-mejorada {
  padding: 80px 0;
  background: var(--blanco, #ffffff);
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.galeria-item {
  position: relative;
  border-radius: var(--border-radius, 16px);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  text-decoration: none;
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transicion, all 0.3s ease);
}

.galeria-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 58, 42, 0.8) 0%, transparent 60%);
  opacity: 0;
  transition: var(--transicion, all 0.3s ease);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.galeria-item:hover img {
  transform: scale(1.08);
}

.galeria-item:hover .galeria-item-overlay {
  opacity: 1;
}

.galeria-item-overlay span {
  color: var(--blanco, #ffffff);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ============================================================
   CITA DE SAN CARLOS
   ============================================================ */
.cita-seccion {
  padding: 60px 0;
  background: var(--verde-oscuro, #1a3a2a);
  color: var(--blanco, #ffffff);
  text-align: center;
}

.cita-ornamento {
  font-family: 'IM Fell English', serif;
  font-size: 5rem;
  color: var(--oro, #b8962e);
  opacity: 0.3;
  margin: 0;
  line-height: 1;
}

.cita {
  font-family: 'IM Fell English', serif;
  font-size: 1.8rem;
  line-height: 1.6;
  max-width: 800px;
  margin: -20px auto 0;
  font-style: italic;
}

.cita cite {
  display: block;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 16px;
  font-style: normal;
}

/* ============================================================
   CTA FINAL - CONTRASTE MEJORADO
   ============================================================ */
.cta-final-mejorado {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--verde-oscuro, #1a3a2a) 0%, var(--verde-medio, #2a5a3a) 100%);
  color: var(--blanco, #ffffff);
  text-align: center;
}

.cta-final-mejorado h2 {
  font-family: 'IM Fell English', serif;
  font-size: 2.8rem;
  margin: 0 0 16px;
  color: var(--blanco, #ffffff);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  font-weight: 400;
}

.cta-final-mejorado h2 span {
  color: var(--oro-claro, #d4b84a);
  text-shadow: 0 2px 20px rgba(184, 150, 46, 0.3);
}

.cta-final-mejorado p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.7;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.cta-final-botones {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE - TODOS LOS BREAKPOINTS
   ============================================================ */

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
  .identidad-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .noticias-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .comunidades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .galeria-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Móviles y tablets pequeñas */
@media (max-width: 768px) {
  /* Hero */
  .hero-nombre-iglesia {
    font-size: 1.5rem;
  }
  
  .hero-lema {
    font-size: 2.2rem;
  }
  
  .hero-descripcion {
    font-size: 1rem;
  }
  
  /* Primera vez */
  .primera-vez-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .primera-vez-items {
    grid-template-columns: 1fr;
  }
  
  /* Identidad - Logo + Texto (CORREGIDO) */
  .identidad-logo-texto {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  
  .identidad-logo-texto .logo-wrap {
    text-align: center;
  }
  
  .identidad-logo-texto .logo-wrap img {
    max-width: 120px;
    margin: 0 auto;
  }
  
  .identidad-logo-texto .texto-wrap p {
    text-align: left;
  }
  
  .identidad-grid {
    grid-template-columns: 1fr;
  }
  
  .identidad-timeline {
    flex-direction: column;
    align-items: center;
  }
  
  .seccion-titulo {
    font-size: 2rem;
  }
  
  /* Noticias */
  .noticias-grid {
    grid-template-columns: 1fr;
  }
  
  /* Publicaciones */
  .publicaciones-grid {
    grid-template-columns: 1fr;
  }
  
  /* Comunidades */
  .comunidades-grid {
    grid-template-columns: 1fr;
  }
  
  /* Obispo */
  .obispo-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .obispo-mensaje-texto {
    font-size: 1.1rem;
  }
  
  /* Vocación */
  .vocacion-grid {
    grid-template-columns: 1fr;
  }
  
  /* Tarjetas */
  .tarjetas-grid {
    grid-template-columns: 1fr;
  }
  
  /* Galería */
  .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Agenda */
  .agenda-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .agenda-fecha {
    text-align: left;
    min-width: auto;
    width: 100%;
    border-bottom: 1px solid var(--crema-osc, #e8e0d4);
    padding-bottom: 8px;
  }
  
  .agenda-fecha-dia {
    font-size: 1.2rem;
  }
  
  /* Cita */
  .cita {
    font-size: 1.3rem;
  }
  
  /* CTA Final */
  .cta-final-mejorado h2 {
    font-size: 2rem;
  }
  
  /* Banners */
  .banner-confianza-inner {
    gap: 10px 16px;
    flex-direction: column;
    align-items: center;
  }
  
  .banner-confianza-item {
    font-size: 0.75rem;
  }
  
  .banner-confianza-item .separador {
    display: none;
  }
  
  /* Reflexión */
  .reflexion-inner {
    grid-template-columns: 1fr;
  }
}

/* Móviles muy pequeños */
@media (max-width: 480px) {
  .hero-nombre-iglesia {
    font-size: 1.2rem;
  }
  
  .hero-lema {
    font-size: 1.8rem;
  }
  
  .hero-badge {
    font-size: 0.65rem;
    padding: 6px 14px;
  }
  
  .hero-botones {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 0.9rem;
  }
  
  .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .seccion-titulo {
    font-size: 1.6rem;
  }
  
  .primera-vez-titulo {
    font-size: 1.6rem;
  }
  
  .primera-vez-item {
    padding: 12px;
  }
  
  .obispo-foto-circular {
    width: 150px;
    height: 150px;
  }
  
  .obispo-mensaje-box {
    padding: 24px;
  }
  
  .obispo-mensaje-texto {
    font-size: 1rem;
    padding-left: 10px;
  }
  
  .obispo-botones {
    padding-left: 0;
  }
  
  .cta-final-botones {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-final-botones .btn {
    width: 100%;
  }
}

/* ============================================================
   MIGRACIÓN DE ESTILOS INLINE (index.php)
   ============================================================ */

/* Variantes de fondo para .seccion, usadas donde el bloque
   necesita blanco o crema explícito en vez del default */
.seccion-blanco {
  background: var(--blanco, #ffffff);
}

.seccion-alt-crema {
  background: var(--crema, #f5f0e8);
}

/* Icono emoji dentro de .tarjeta-simple (Vida de la Iglesia) */
.tarjeta-icono {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 12px;
}

/* Nota de contacto bajo el CTA de vocación */
.vocacion-nota {
  margin-top: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.vocacion-nota a {
  color: var(--oro-claro, #d4b84a);
  font-weight: 600;
  text-decoration: underline;
}

/* Enlace dorado subrayado dentro de texto corrido (ej. "primera vez") */
.enlace-dorado {
  color: var(--oro, #b8962e);
  font-weight: 600;
  text-decoration: underline;
}

/* Placeholder de ícono cuando falta imagen (noticias/publicaciones) */
.placeholder-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--crema, #f5f0e8);
  color: var(--texto-suave, #5a5a5a);
  font-size: 3rem;
}

.placeholder-icono--oscuro {
  background: var(--crema-osc, #e8e0d4);
}

/* Variante clara de la etiqueta de sección, para fondos oscuros
   (ej. sección "Comunidades") */
.etiqueta-seccion--clara {
  background: rgba(184, 150, 46, 0.2);
  color: var(--oro-claro, #d4b84a);
}

/* Título de sección centrado (ej. "La ICAC en números") */
.seccion-titulo--centro {
  text-align: center;
}

/* Bloque de CTA centrado bajo una grilla (noticias, comunidades, galería) */
.cta-bloque-centro {
  text-align: center;
  margin-top: 40px;
}

.cta-bloque-centro--32 {
  margin-top: 32px;
}

/* Badge de Personería Jurídica dentro de "Nuestra Iglesia" */
.identidad-badge-legal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--crema, #f5f0e8);
  border-left: 4px solid var(--oro, #b8962e);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 20px;
}

.identidad-badge-legal svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.identidad-badge-legal span {
  font-size: 0.92rem;
  color: var(--texto-suave, #5a5a5a);
  line-height: 1.6;
}