/* Oculta el cursor normal */
* {
  cursor: none !important;
  cursor: none;
  transition: all 0.25s ease-out;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #236bb8;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, border 0.15s ease;
  z-index: 10000;
}

.cursor.hover {
  transform: translate(-50%, -50%) scale(2.4);
  border-color: #fff;
}

/* Neue - Regular */
@font-face {
  font-family: 'Neue';
  src: url('./fuentes/NeueHaasDisplayRoman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Neue - Medium (mapear a 600) */
@font-face {
  font-family: 'Neue';
  src: url('./fuentes/NeueHaasDisplayMedium.ttf') format('truetype'); /* corrige el nombre real del archivo */
  font-weight: 600; /* si el archivo es Medium, 600 tiene más sentido; usa 700 si es Bold real */
  font-style: normal;
  font-display: swap;
}

/* Neue - Bold (si tienes un Bold real, usa 700) */
/* Si el archivo "Medium" es tu único peso "fuerte", puedes quitar este bloque */
@font-face {
  font-family: 'Neue';
  src: url('./fuentes/NeueHaasDisplayBold.ttf') format('truetype'); /* solo si existe */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue';
  src: url('./fuentes/NeueHaasDisplayBoldItalic.ttf') format('truetype'); /* solo si existe */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Neue - Italic */
@font-face {
  font-family: 'Neue';
  src: url('./fuentes/NeueHaasDisplayRomanItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Scholar (usa opentype para .otf) */
@font-face {
  font-family: 'Scholar';
  src: url('./fuentes/scholar-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Scholar';
  src: url('./fuentes/scholar-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- ESTILOS GENERALES --- */
* {
  box-sizing: border-box;
  font-family: 'Neue', 700;
}
html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fb;
  color: #333;
  text-align: center;
}


/* --- ENCABEZADO PRINCIPAL --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 999;
  display: flex;
  align-items: center;
  min-height: 70px; /* 🔥 Mantiene estable tu layout */
}

.header-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-section { display: flex; align-items: center; }
.logo {
  height: 45px;
  width: auto;
}


/* --- NAV --- */
nav a {
  color: #236bb8;
  text-decoration: none;
  margin-left: 20px;
  font-weight: 600;
  transition: 0.3s;
}
nav a:hover { color: #0073ff; }

/* SUBMENÚ DENTRO DE DROPDOWN */
.dropdown-sub {
  position: relative;
}

nav a,
nav .dropdown-btn {
  color: #236bb8;
}

nav a:hover,
nav .dropdown-btn:hover {
  color: #0073ff;
}

.dropdown-sub-btn {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  cursor: pointer;
}

.dropdown-sub-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: white;
  min-width: 180px;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-radius: 6px;
  z-index: 10;
}

.dropdown-sub:hover .dropdown-sub-menu {
  display: block;
}

.dropdown-sub-menu a {
  display: block;
  padding: 10px 15px;
}

.dropdown-sub-menu a:hover {
  background: #f2f2f2;
}

/* --- BANNER PRINCIPAL — CORREGIDO --- */
.banner {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  margin-top: calc(var(--topbar-h) + var(--header-h));
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 10px 20px;
  z-index: 10;
  user-select: none;
  transition: 0.3s;
}

.slider-arrow:hover {
  opacity: 0.7;
}

.slider-arrow.left {
  left: 20px;
}

.slider-arrow.right {
  right: 20px;
}

/* --- SECCIÓN MANTENTE CONECTADO --- */
.mantente-conectado {
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
  color: #000;
}

.mantente-conectado .titulo {
  margin-bottom: 60px;
}

.mantente-conectado h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  
}

.mantente-conectado p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 25px;
}

.btn-negro {
  display: inline-block;
  background-color: #4e84bf;
  color: #fff;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;}

.btn-negro:hover {
  background-color: #4e84bf;
}

/* --- GRID DE EVENTOS --- */
.eventos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
  max-width: 1100px;
  margin: 0 auto;
}

.evento-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #f8f9fb;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: 0.3s;
}

.evento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.evento-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* FOOTER MODERNO */
.footer {
  background: var(--azul-dark);
  font-family: 'Neue';
  color: white;
  text-align: center;
  padding: 10px;
}

:root {
  --clm-blue: white;
  --clm-dark: #165497;
  --max-width: 1200px;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  text-align: center;

}

/* LOGO */
.footer-logo {
  width: 20px;
}

.footer-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 50px;
  opacity: 0.8;
}

/* SOCIAL ICONS */

/* SOLO columna 1 centrada */
.footer-col:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Las otras columnas vuelven a su alineación normal */
.footer-col:not(:first-child) {
  display: block;
  text-align: left;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px; /* separación entre iconos */
  justify-content: center;

}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social i {
  color: white !important;
  font-size: 1.4rem;
  transition: 0.3s ease;
}

.footer-social i:hover {
  color: var(--clm-blue) !important;
}

/* COLUMNAS */
.footer-col h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #ffffff;
}

.footer-col a {
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
  color: #dddddd;
  font-size: 0.95rem;
  transition: 0.3s;
}

.footer-col a:hover {
  color: var(--clm-blue);
  transform: translateX(4px);
}

/* CONTACTO */
.footer-col p {
  margin-bottom: 5px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.footer-col i {
  margin-right: 8px;
  color: var(--clm-blue);
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 15px;
  margin-top: 40px;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
}


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .eventos-grid {
    grid-template-columns: 1fr;
  }
}


/* Botones de navegación */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  transition: 0.3s;
  z-index: 10;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev { left: 20px; }
.next { right: 20px; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .banner-slider {
    height: 35vh;
  }
}

/* --- SECCIÓN VOLUNTARIO --- */
.voluntario {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url("https://scontent-lim1-1.xx.fbcdn.net/v/t39.30808-6/540059047_787317550477705_3920219197829272681_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=127cfc&_nc_ohc=AWB1osxq_rUQ7kNvwELW06x&_nc_oc=AdlGBLsAqmP5TBcHlCIDJEOPK51Ca-mxvugy77MxTVnbOURacezWZS4ffKG6O1T2VAQ&_nc_zt=23&_nc_ht=scontent-lim1-1.xx&_nc_gid=AeJJZmlxigvj_YmSR99Nmg&oh=00_AfhFtQPBr4-FdczDDzqApLNYdwvBsAaHRPOyhy6eYHQtZw&oe=69218D2C");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.voluntario::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.45);
}

.voluntario .overlay {
  position: relative;
  z-index: 2;
  text-align: center;
}

.voluntario h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-blanco {
  background-color: #4e84bf;
  color: #000;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn-blanco:hover {
  background-color: #4e84bf;
}

/* --- SECCIÓN MINISTERIOS --- */
.ministerios {
  text-align: center;
  padding: 20px 20px 100px;
  background-color: #fff;
  color: #000;
}

.ministerios h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.ministerios .subtitulo {
  font-family: 'Neue';
  font-weight: 700;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.ministerios .descripcion {
  font-family: 'Neue';
  font-weight: 400;
  font-size: 1rem;
  color: #333;
  margin-bottom: 50px;
}

.ministerios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.ministerio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fb;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: 0.3s;
}

.ministerio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.ministerio-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.ministerio-card p {
  font-family: 'Neue';
  font-size: 1rem;
  color: #333;
  margin-bottom: 15px;
}

/* Botones azules principales*/
.btn-negro {
  font-family: 'Neue';
  font-weight: 700;
  display: inline-block;
  background-color: #4e84bf;
  color: #fff;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  transition: 0.3s;
}

.btn-negro:hover {
  background-color: #236bb8;
  color: #fff;

}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .ministerios-grid {
    grid-template-columns: 1fr;
  }

  .ministerio-card img {
    height: 200px;
  }
}

/* --- SECCIÓN CRECER --- */
.crecer {
  position: relative;
  width: 100%;
  height: 70vh;
  background-image: url('img/fondoesencia.jpg'); /* <-- cambia por tu ruta real */
  background-size: cover;       /* Que cubra todo */
  background-position: center;  /* Centrado */
  background-repeat: no-repeat; /* No repetir */
  background-attachment: fixed; /* (Opcional) efecto parallax suave */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.crecer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.35);
}

.crecer .overlay {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 20px;
}

.crecer-logo {
  width: 300px;
  margin-bottom: 15px;
}

.crecer h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 10px;
}

.crecer p {
  font-family: 'Neue';
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 25px;
  color: #f1f1f1;
}

/*Botones esencia*/
.crecer .btn-blanco {
  font-family: 'Neue';
  font-weight: 700;
  background-color: #f0f0f0;
  color: #4e84bf;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}

.crecer .btn-blanco:hover {
  background-color: #4e84bf;
  color: #f0f0f0;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .crecer {
    height: 55vh;
  }
  .crecer h2 {
    font-size: 1.6rem;
    letter-spacing: 6px;
  }
  .crecer p {
    font-size: 0.95rem;
  }
}

/* --- SECCIÓN SUSCRÍBETE A AGENDA --- */
.suscripcion {
  background-color: #fff;
  padding: 50px 20px;
}

.suscripcion-container {
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* Texto y formulario */
.suscripcion-texto {
  text-align: center;
}

.suscripcion-texto h2 {
  color: #236bb8;
  font-family: 'Neue';
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.2;
}

.suscripcion-texto p {
  font-family: 'Neue';
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 25px;
  max-width: 480px;
}

/* Formulario */
.form-suscripcion {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
}

.form-suscripcion input {
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 15px;
  transition: 0.3s;
}

.form-suscripcion input:focus {
  outline: none;
  border-color: #000;
}

.form-suscripcion button {
  background-color: #4e84bf;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.form-suscripcion button:hover {
  background-color: #236bb8;
}

/* Imagen */
.suscripcion-imagen img {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 900px) {
  .suscripcion-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .suscripcion-texto {
    text-align: center;
  }

  .form-suscripcion {
    margin: 0 auto;
  }
}

/* --- SECCIÓN EN LO QUE CREEmos --- */
.creemos-section {
  padding: 100px 60px;
  background-color: #ffffff;
}

.creemos-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
}

/* TEXTO (ACORDEÓN) A LA IZQUIERDA */
.creemos-texto {
  flex: 1;
  text-align: left;
}

/* TÍTULO */
.creemos-texto h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 2.4rem;
  margin-bottom: 20px;
}

/* CONTENEDOR DE IMAGENES */
  
/* Ajuste del acordeón dentro */
.acordeon {
  width: 100%;
}

/* DERECHA */
.creemos-img {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hover individual por imagen */
.creemos-img img:hover {
  transform: scale(1.06);
  animation: bounce 0.4s ease;
}

.creemos-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}


/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .creemos-container {
    flex-direction: column;
  }

  .creemos-img {
    width: 100%;
  }
}

/* --- ACORDEÓN --- */
.acordeon {
  width: 100%;
  margin-top: 20px;
}

.acordeon-item {
  border-bottom: 1px solid #dcdcdc;
}

.acordeon-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'NeueBold';
  font-size: 1.1rem;
  cursor: pointer;
  color: #236bb8;
}

.acordeon-header .icon {
  font-size: 1.5rem;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.acordeon-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.acordeon-content p {
  padding: 10px 0 20px 0;
  font-family: 'Neue';
  font-size: 1rem;
  color: #333;
}

/* --- SECCIÓN LIDERAZGO --- */
.liderazgo-section {
  padding: 20px 20px 120px;
  background-color: #fff;
}

.liderazgo-titulo {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.liderazgo-sub {
  font-size: 1.1rem;
  font-style: italic;
  color: #333;
  margin-bottom: 40px;
}

.liderazgo-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.lider-card {
  text-align: center;
  max-width: 250px;
}

.lider-card img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  margin-bottom: 15px;
  transition: transform 0.3s ease-in-out;
}

.lider-card:hover img {
  transform: scale(1.06);
  animation: bounce 0.4s ease;
}

/* Pequeño rebote */
@keyframes bounce {
  0% { transform: scale(1); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1.06); }
}

.cargo {
  font-size: 1rem;
  font-style: italic;
  color: #236bb8;
  margin-bottom: 5px;
}

.nombre {
  font-size: 1.5rem;
  font-weight: 600;
  color: #236bb8;
  line-height: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
  .liderazgo-grid {
    gap: 40px;
  }
  .lider-card img {
    width: 150px;
    height: 150px;
  }
}

/* --- VISIÓN & MISIÓN --- */
.vision-mision {
  padding: 50px 20px;
  background: #ffffff;
  text-align: center;

  /* 🔹 Imagen de fondo */
  background-image: url('img/acercadeclm/FONDOAZUL.jpg'); /* <-- cambia por tu ruta real */
  background-size: cover;       /* Que cubra todo */
  background-position: center;  /* Centrado */
  background-repeat: no-repeat; /* No repetir */
  background-attachment: fixed; /* (Opcional) efecto parallax suave */
}

.vision-mision h2 {
  color: white;
  font-family: 'Neue';
  font-style: italic;
  font-size: 2.4rem;
  margin-bottom: 30px;
}

.vm-container {
  max-width: 900px;
  margin: 0 auto;
}

.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.vm-card {
  background: #f8f9fb;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.vm-card h3 {
  color: #236bb8;
  font-family: 'Neue';
  font-style: italic;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.vm-card p {
  color: #444;
  font-family: 'Neue';
  font-size: 1.05rem;
  line-height: 1.2;
}

/* --- TESTIMONIOS --- */
.testimonios {
  text-align: center;
  padding: 80px;
  background-color: #ffffff;
}

.testimonios h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 2.4rem;
  margin-bottom: 100px;
}

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.testimonio-card {
  position: relative;
  background: #f8f9fb;
  padding: 50px 30px 30px; /* más espacio arriba */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
  text-align: center;
}

/* Imagen circular encima del card */
.testimonio-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;

  /* Flotante */
  position: absolute;
  top: -45px;   /* La mitad del tamaño negativo */
  left: 50%;
  transform: translateX(-50%);

  border: 4px solid white;   /* bordecito bonito */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


.testimonio-text {
  font-size: 1.05rem;
  font-family: 'Neue';
  color: #444;
  line-height: 1.2;
  margin-bottom: 18px;
}

.testimonio-autor {
  font-family: 'Neue';
  font-size: 1.1rem;
  font-weight: 700;
  color: #236bb8;
}


/* --- FRASE INSPIRADORA --- */
.frase-inspiradora {
  position: relative;
  background-image: url('img/acercadeclm/iglesiaparati.jpg'); /* <<< CAMBIA TU IMAGEN */
  background-size: cover;
  background-position: center;
  padding: 30%;
}

/* ===== MENÚ DESPLEGABLE ===== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  color: #003c99;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: 0.2s;
}

.dropdown-btn:hover {
  color: #007bff;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  min-width: 180px;
  z-index: 9999;
  padding: 10px 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 15px;
  color: #003c99;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s;
}

.dropdown-menu a:hover {
  background-color: #e6f0ff;
  color: #0056d2;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* --- BANNER SOY NUEVO --- */
/* 🔵 Banner Soy Nuevo PRO */
.banner-soy-nuevo {
  width: 100%;
  height: 420px;
  background-image: url("img/bienvenidos/ventalcomores.png"); /* <- aquí debes poner la imagen REAL del banner soy-nuevo */
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Móvil */
@media (max-width: 768px) {
  .banner-soy-nuevo {
    height: 260px;
    background-position: top center;
  }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  .banner-soy-nuevo {
    height: 220px;
  }
}

/* --- EXPECTATIVAS --- */
.expectativas {
  padding: 70px 20px;
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  max-width: 1000px;
  margin: 0 auto;
}

.expect-card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.expect-card h3 {
  color: #003c99;
}

/* --- HORARIOS --- */
.horarios {
  padding: 70px 20px;
  background: #f8f9fb;
}

.horarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.horario-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.horario-card h3 {
  color: #003c99;
}

/* --- PLAN DE BIENVENIDA --- */
.bienvenida {
  padding: 70px 20px;
  text-align: center;
}

.bienvenida-pasos {
  max-width: 900px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.paso .num {
  font-size: 2.5rem;
  color: #0056d2;
  font-weight: bold;
}

/* --- SECCIÓN VEN TAL COMO ERES --- */
.bienvenida-section {
  background-color: #ffffff;
  padding: 80px 20px;
}

.bienvenida-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.bienvenida-texto {
  text-align: center;
}

.bienvenida-texto h2 {
  color: #236bb8;
  font-family: 'Neue';
  font-style: italic;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.bienvenida-texto h3 {
  color: #236bb8;
  font-family: 'Neue';
  font-style: italic;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.bienvenida-texto p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  line-height: 1.3;
  margin-bottom: 20px;
  text-align: center;
}

.bienvenida-video iframe {
  width: 100%;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .bienvenida-container {
    grid-template-columns: 1fr;
  }

  .bienvenida-texto {
    text-align: center;
  }

  .bienvenida-texto h3 {
    margin-top: 20px;
  }
}

/* --- SECCIÓN NUESTROS PASTORES --- */
.nuestros-pastores {
  padding: 50px 20px;
  color: white;
  background-image: url('img/bienvenidos/fondoceleste.png');
  background-size: cover;
  background-position: center;
  display: flex;
  
}

.pastores-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}

.pastores-texto h2 {
  color: white;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.pastores-texto p {
  font-family: 'Neue';
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 18px;
  color: #ddd;
}

.pastores-img img {
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
  transition: 0.35s ease;
}

.pastores-img img:hover {
  transform: translateY(-10px) rotate(-1deg);
}

/* Responsive */
@media (max-width: 900px) {
  .pastores-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pastores-img img {
    margin-top: 20px;
  }
}


/* --- DESCRIPCIÓN ESENCIA --- */
.esencia-descripcion {
  text-align: center;
  padding: 80px 20px 40px;
  max-width: 900px;
  margin: 0 auto;
}

.esencia-descripcion h2 {
  color: #236bb8;
  font-family: 'Neue';
  font-weight: 400;
  font-size: 2.4rem;
  margin-bottom: 50px;
}

.esencia-descripcion p {
  font-size: 1.1rem;
  font-family: 'Neue';
  line-height: 1.2;
  color: #333;
  margin-bottom: 20px;
}

/* --- HORARIOS MODERNOS --- */
.horarios-modernos {
  padding: 80px 20px;
  text-align: center;
  background-color: #ffffff;
}

.horarios-modernos h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.horarios-modernos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.horario-card-moderno {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  padding: 20px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.horario-card-moderno img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.horario-card-moderno:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.horario-texto {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 25px;
}

.horario-btn {
  width: 140px;
}

/* --- SECCIÓN ORACIÓN - BANNER PRINCIPAL --- */
.oracion-bloque {
  width: 100%;
  height: 80vh;
  margin-top: calc(var(--topbar-h) + var(--header-h));
  padding: 150px 20px;

  background-image: url('img/oracion/banneroracion.jpg');
  background-size: cover;
  background-position: center;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.oracion-bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
}

.oracion-contenido {
  position: relative;
  text-align: center;
  max-width: 900px;
  z-index: 2;
}

/* ========== SECCIÓN PETICIONES ========== */

.peticiones-section {
  padding: 80px 80px;
  background-color: #ffffff;
}

.peticiones-container {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr;  /* <-- UNA SOLA COLUMNA */
  gap: 20px;
  align-items: flex-start;
}


/* Texto izquierda */
.peticiones-texto {
  text-align: center;
  max-width: 700px;  /* ancho correcto para el bloque completo */
  margin: 0 auto;    /* centrado real */
}

.peticiones-texto h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;

  width: 100%;
  text-align: center;
  margin: 0 auto 10px;
  line-height: 1.1;
}

.peticiones-texto p {
  font-family: 'Neue';
  font-size: 1.1rem;
  line-height: 1.3;
  color: #333;
  max-width: 100%; /* antes 90%, esto desalineaba */
}

/* FORMULARIO */
.peticiones-formulario {
  max-width: 600px;  /* ancho ideal */
  width: 100%;
  margin: 0 auto;     /* centra el formulario */
}

.peticiones-formulario form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
}

.peticiones-formulario label {
  font-weight: 600;
  color: #333;
}

.peticiones-formulario input,
.peticiones-formulario textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.peticiones-formulario textarea {
  height: 160px;
  resize: vertical;
}

.peticiones-formulario button {
  width: 120px;
  background-color: #236bb8;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.peticiones-formulario button:hover {
  background-color: #185495;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .peticiones-container {
    grid-template-columns: 1fr;
  }

  .peticiones-formulario button {
    margin: 0 auto;
  }
}

.galeria-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 40px;
}

.galeria-container img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  background: white;
  padding: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.galeria-container img:hover {
  transform: rotate(-2deg) scale(1.03);
}


/* ============================================================
   🔵 SECCIÓN BANNER PODCAST / PRÉDICAS
   ============================================================ */
.banner-podcast {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 100px 10%;
  /* 🔹 Imagen de fondo */
  background-image: url('img/predicas/bannerfondopredicas.jpg'); /* <-- cambia por tu ruta real */
  background-size: cover;       /* Que cubra todo */
  background-position: center;  /* Centrado */
  background-repeat: no-repeat; /* No repetir */
  background-attachment: fixed; /* (Opcional) efecto parallax suave */
  margin-top: calc(var(--topbar-h) + var(--header-h));
}

.podcast-content {
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- TEXTO IZQUIERDA --- */
.podcast-text {
  flex: 1;
  color: white;
  text-align: left;
}

.podcast-text h1 {
  font-family: 'Scholar';
  font-style: italic;
  font-size: 5rem;
  font-weight: 400;
  margin-bottom: 10px;
}

.podcast-text p {
  font-family: 'Neue';
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 30px;
}

/* --- ICONOS --- */
.podcast-icons img {
  width: 40px;
  margin-right: 20px;
  filter: brightness(0) invert(1);
  transition: 0.3s;
}

.podcast-icons img:hover {
  transform: scale(1.15);
}

/* --- IMAGEN MOCKUP DERECHA --- */
.podcast-phone img {
  width: 550px;
  display: block;
  transition: 0.3s;

}

.podcast-phone img:hover {
  transform: scale(1.05);

}


/* ============================================================
   🔵 SECCIÓN DE PRÉDICAS (CARDS)
   ============================================================ */
   .predicas-section {
    width: 100%;
    padding: 80px 10%;
    text-align: center;
    background-color: #ffffff;
  }
  
  .predicas-section h2 {
    font-family: 'Scholar';
    font-size: 3rem;
    font-weight: 400;
    color: #236bb8;
    margin-bottom: 50px;
  }
  
  /* --- GRID --- */
  .predicas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columnas */
    gap: 40px;
  }
  
  /* --- CARD INDIVIDUAL --- */
  .predica-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: 0.3s;
  }
  
  .predica-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.15);
  }
  
  /* --- MINIATURA (VISTA PREVIA) --- */
  .video-thumbnail {
    position: relative;
  }
  
  .video-thumbnail .thumb {
    width: 100%;
    height: 220px;         /* Mantiene proporción horizontal */
    object-fit: cover;     /* Recorte elegante sin deformar */
    object-position: center;
    border-radius: 12px 12px 0 0;
    display: block;
  }
  
  /* --- BOTÓN PLAY --- */
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 15px 20px;
    border-radius: 50%;
    font-size: 32px;
    pointer-events: none;
  }
  
  /* --- TITULO Y TEXTO --- */
  .predica-card h3 {
    font-family: 'Neue';
    margin-top: 15px;
    color: #236bb8;
    font-weight: 700;
    font-size: 1.3rem;
  }
  
  .predica-card p {
    font-family: 'Neue';
    margin-top: 8px;
    color: #555;
    font-size: 0.95rem;
    padding: 0 15px;
    line-height: 1.5;
  }
  
  /* --- SI QUEDAN IFRAMES ANTIGUOS (SEGURIDAD) --- */
  .predica-card iframe {
    width: 100%;
    height: 230px;
    border-radius: 12px 12px 0 0;
  }
  

/* ============================================================
   🔵 RESPONSIVE — CELULAR Y TABLET
   ============================================================ */
@media (max-width: 900px) {
  .podcast-content {
    flex-direction: column;
    text-align: center;
  }

  .podcast-text {
    text-align: center;
  }

  .podcast-phone img {
    width: 260px;
    margin-top: 20px;
  }

  .predicas-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .podcast-text h1 {
    font-size: 2.4rem;
  }

  .podcast-icons img {
    width: 50px;
  }

  .predica-card iframe {
    height: 200px;
  }
}

/* === BANNER ESPECIAL PARA ACERCA === */
.banner-acerca {
  width: 100%;
  margin-top: calc(var(--topbar-h) + var(--header-h));
}

.banner-acerca img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ============================================================
   🔵 SECCIÓN BAUTISMO
   ============================================================ */

/* Banner principal bautismo */
.banner-bautismo {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: calc(var(--topbar-h) + var(--header-h));
  background-image: url("img/bautismo/bautismosbanner.jpg"); /* 🔁 Cámbiala por una foto de CLM si quieres */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Intro */
.bautismo-intro {
  padding: 80px 20px 50px;
  background-color: #ffffff;
}

.bautismo-intro-container {
  max-width: 900px;
  margin: 0 auto;
}

.bautismo-intro h2 {
  color: #236bb8;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.bautismo-intro p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 60px;
}

/* Pasos */
.bautismo-pasos {
  padding: 50px 20px 80px;
  background-color: #f8f9fb;
  text-align: center;

    /* 🔹 Imagen de fondo */
    background-image: url('img/bautismo/bautismosbanner2.jpg'); /* <-- cambia por tu ruta real */
    background-size: cover;       /* Que cubra todo */
    background-position: center;  /* Centrado */
    background-repeat: no-repeat; /* No repetir */
    background-attachment: fixed; /* (Opcional) efecto parallax suave */
}

.bautismo-pasos h2 {
  color: white;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.bautismo-pasos-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.bautismo-paso {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 30px 22px;
  text-align: center;

}

.bautismo-num {
  font-family: 'Scholar';
  font-size: 2.2rem;
  font-weight: 800;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.bautismo-paso h3 {
  font-family: 'Neue';
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #236bb8;
}

.bautismo-paso p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 10px;
}

/* Info práctica */
.bautismo-info {
  padding: 80px;
  background-color: #ffffff;
}

.bautismo-info-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1.5fr;

  align-items: flex-start;
}

.bautismo-info-texto h2 {
  font-family: 'Neue';
  font-style: italic;
  font-size: 2.2rem;
  font-weight: 600;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.bautismo-info-texto p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 10px;
}

.bautismo-info-detalles {
  background: #f8f9fb;
  border-radius: 12px;
  padding: 25px 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.bautismo-info-detalles h3 {
  font-family: 'Scholar';
  font-size: 2.2rem;
  font-weight: 800;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.bautismo-info-detalles ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bautismo-info-detalles li {
  font-size: 0.98rem;
  margin-bottom: 8px;
  color: #333;
}

.bautismo-flyer {
  width: 80%;
  border-radius: 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* FAQ */
.bautismo-faq {
  padding: 80px 20px;
  background-color: #f8f9fb;
  text-align: center;
  /* 🔹 Imagen de fondo */
  background-image: url('img/bautismo/bautismosbanner3.jpg'); /* <-- cambia por tu ruta real */
  background-size: cover;       /* Que cubra todo */
  background-position: center;  /* Centrado */
  background-repeat: no-repeat; /* No repetir */
  background-attachment: fixed; /* (Opcional) efecto parallax suave */
}

.bautismo-faq h2 {
  color: white;
  font-family: 'Scholar';
  font-style: italic;
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 30px;
}

.bautismo-faq-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.bautismo-faq-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 35px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.bautismo-faq-card h3 {
  font-family: 'Neue';
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.bautismo-faq-card p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 20px;
}

/* CTA + formulario */
.bautismo-cta {
  padding: 90px 20px;
  color: #333;
  text-align: center;
}

.bautismo-cta-container {
  max-width: 800px;
  margin: 0 auto;
}

.bautismo-cta h2 {
  font-family: 'Neue';
  font-size: 2rem;
  font-weight: 800;
  font-style: italic;
  color: #236bb8;
  display: block;
  margin-bottom: 30px;
}

.bautismo-cta p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 50px;
}

.bautismo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bautismo-form input,
.bautismo-form textarea {
  padding: 12px 14px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-family: inherit;
}

.bautismo-form textarea {
  min-height: 140px;
  resize: vertical;
}

.bautismo-form button {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background-color: #236bb8;
  color: white;
  transition: 0.3s;
}

.bautismo-form button:hover {
  background-color: #222;
}

/* Responsive bautismo */
@media (max-width: 900px) {
  .bautismo-info-grid {
    grid-template-columns: 1fr;
  }

  .bautismo-overlay h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 600px) {
  .banner-bautismo {
    height: 65vh;
  }

  .bautismo-overlay {
    padding: 35px 20px;
  }
}

/* ============================================================
   🔵 KIDS CLM — ESTILOS
   ============================================================ */

/* --- BANNER PRINCIPAL --- */
.banner-kids {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: calc(var(--topbar-h) + var(--header-h));
  background-image: url("img/ministerios/clmkids/bannerprincipalkids.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- BOTONES KIDS --- */
.btn-azul {
  background-color: #236bb8;
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn-azul:hover {
  background-color: #236bb8;
}



/* ============================================================
   🔵 RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .kids-overlay h1 {
    font-size: 2.2rem;
  }

  .kids-overlay p {
    font-size: 1rem;
  }

  .banner-kids {
    height: 60vh;
  }
}

/* ============================================================
   🔵 KIDS PRESENCIAL
   ============================================================ */

.kids-presencial {
  padding: 50px 20px;
  text-align: center;
  background-color: #ffffff;
  margin-bottom: 50px;
}

.kids-presencial h2 {
  font-family: 'Neue';
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.kids-presencial-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  text-align: left;
}

/* Imagen */
.kids-presencial-img img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* Texto */
.kids-presencial-texto p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 30px;
}

/* Botón */
.btn-kids-registro {
  display: inline-block;
  background-color: #236bb8;
  color: white;
  padding: 14px 30px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 15px;
  transition: 0.3s;
}

.btn-kids-registro:hover {
  background-color: #185da7;
}

/* Responsive */
@media (max-width: 900px) {
  .kids-presencial-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kids-presencial-texto {
    text-align: center;
  }
}

/* ============================================================
   🔵 FACEBOOK KIDS BLOCK
   ============================================================ */

.kids-facebook {
  background-image: url('img/ministerios/clmkids/bannerfacebook.jpg'); /* <-- cambia por tu ruta real */
  background-size: cover;       /* Que cubra todo */
  background-position: center;  /* Centrado */
  background-repeat: no-repeat; /* No repetir */
  background-attachment: fixed; /* (Opcional) efecto parallax suave */  padding: 100px 20px;
  text-align: center;
  color: white;
}

.kids-facebook h2 {
  font-family: 'Neue';
  font-size: 2.5rem;
  font-weight: 800;
  font-style: italic;
  color: white;
  margin-bottom: 10px;
}

.kids-facebook p {
  font-family: 'Neue';
  font-size: 1.1rem;
  color: white;
  margin-bottom: 30px;
}

.btn-facebook {
  background: #fff;
  color: #1877f2;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s ease;
}

.btn-facebook i {
  margin-left: 8px;
}

.btn-facebook:hover {
  background: #f0f0f0;
}

/* --- GALERÍA CLM KIDS --- */
.kids-gallery {
  padding: 40px 20px;
  background-color: #f8f9fb;
  text-align: center;
}

.kids-gallery h2 {
  font-family: 'Neue';
  font-size: 2rem;
  font-weight: 800;
  font-style: italic;
  color: #236bb8;
  display: block;
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

/*CLM TEENS*/
:root {
  --azul: #236bb8;
  --azul-dark: #236bb8;
  --fb: #1877f2;
  --insta: #e1306c;
  --max-width: 1200px;
}

/* GENERALES */
body {
  margin: 0;
  font-family: 'Neue', sans-serif;
  background: #f3f5ff;
  color: #236bb8;
}

h2 {
  font-family: 'Neue';
  font-size: 1.5rem;
  text-align: center;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 20px;
  color: var(--azul-dark);
}

/*      BANNER TEENS    */
/* ==================== */

.banner-teens {
  width: 100%;
  height: 100vh; /* Full pantalla */
  background-image: url("img/ministerios/clmteens/clmteensbanner.jpg"); 
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Oscurece un poco la imagen para que el texto destaque */
.banner-teens-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  top: 0;
  left: 0;
}

.banner-teens-content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 2;
}

.banner-teens-content h1 {
  font-family: 'Neue';
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.banner-teens-content p {
  font-size: 1.3rem;
  font-weight: 300;
}

/*     HORARIOS TEENS       */
/* ========================= */

.teens-horarios {
  text-align: center;
  padding: 60px 20px;
  background: #f5f7ff;
}

.teens-horarios h2 {
  font-family: 'Neue';
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  color: #236bb8;
  display: block;
  margin-bottom: 10px;
}

.horarios-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.horario-card {
  background: white;
  padding: 25px 40px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  width: 260px;
}

.horario-card h3 {
  font-family: 'Neue';
  font-weight: 400;
  font-style: italic;
  color: #236bb8;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.horario-card p {
  font-size: 1rem;
  color: #236bb8;
}

/* 🔗 REDES */
.redes {
  padding: 40px 20px;
}

.redes-flex {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.red {
  padding: 14px 26px;
  border-radius: 14px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.insta { background: var(--insta); }
.face { background: var(--fb); }

/* ⭐ ACTIVIDADES */
.actividades {
  padding: 40px 20px;
}

.actividades-grid {
  max-width: var(--max-width);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.actividad {
  background: white;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 4px 12px #0001;
  text-align: center;
}

.actividad img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

/* 🖼️ GALERÍA */
.galeria {
  padding: 40px 20px;
}

.galeria-grid {
  max-width: var(--max-width);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.galeria-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

/* 🔵 BANNER */
.banner-jovenes {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('img/ministerios/clmgc/gcbanner.png');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
}

.banner-text {
  position: relative;
  text-align: center;
  color: white;
}

.banner-text h1 {
  font-size: 3.8rem;
  margin: 0;
}

.banner-text p {
  font-size: 1.3rem;
}

/* 🕒 HORARIOS */
.meet-section {
  text-align: center;
  padding: 60px 20px;
}

.meet-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.meet-card {
  background: white;
  padding: 25px 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  width: 230px;
}

/* 📱 REDES */
.social-section {
  padding: 60px 20px;
  text-align: center;
}

.social-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.social-card {
  width: 180px;
  padding: 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.social-card img {
  width: 40px;
  margin-bottom: 8px;
}

.instagram { background: #d62976; }
.facebook { background: #1877f2; }

/* ⭐ LO QUE HACEMOS */
.about-section {
  text-align: center;
  padding: 60px 20px;
  max-width: 900px;
  margin: auto;
}

.about-text {
  font-size: 1.1rem;
  margin-top: 15px;
}

/* 🖼️ GALERÍA */
.gallery-section {
  padding: 60px 20px;
  text-align: center;
}

.gallery-grid {
  max-width: var(--max-width);
  margin: 30px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-grid img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

/* 🔚 FOOTER */
.footer {
  background: var(--clm-dark);
  color: white;
  text-align: center;
  padding: 25px;
  margin-top: 40px;
}

/* ---------------------
    🔹 BANNER DEVOCIONALES
----------------------*/

.banner-devocionales {
  width: 100%;
  height: 80vh;
  background-image: url('img/devocionales/devocionalbanner.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
  margin-bottom: 80px;
}

.banner-devocionales::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
}

.banner-devocionales .banner-text {
  position: relative;
  z-index: 2;
}

.banner-devocionales h1 {
  font-family: 'Scholar';
  font-style: italic;
  font-weight: 400;
  font-size: 60px;
  margin-bottom: 10px;
}

.tiktok-section h3 {
  font-family: 'Neue';
  font-weight: 400;
  font-size: 30px;
  line-height: 1; /* o 1.1 para más aire */
  margin-bottom: -55px;
}

.tiktok-section h2 {
  font-family: 'Scholar';
  font-style: italic;
  font-weight: 400;
  font-size: 60px;
  margin-bottom: 30px;
  
}

.banner-devocionales p {
  font-family: 'Neue';
  font-weight: 400;
  font-size: 20px;
}

/* ---------------------
    🔹 LISTA DE DEVOCIONALES
----------------------*/

/* GRID DE TIKTOK */
.tiktok-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 20px;
}

/* Videos responsivos */
.tiktok-embed {
  width: 100% !important;
  max-width: 100% !important;
}

/* 📱 RESPONSIVE para celular */
@media (max-width: 900px) {
  .tiktok-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .tiktok-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   📱 RESPONSIVE MÓVIL (max-width: 600px)
   ============================================================ */
   @media (max-width: 600px) {

    /* 🔵 Cursor personalizado — NO en móvil */
    .cursor {
      display: none !important;
    }
  
    /* 🔵 HEADER */
    header {
      padding: 0 15px;
    }
  
    nav {
      display: none; /* lo ocultamos por ahora */
    }
  
    /* Luego agregaremos el menú hamburguesa */
    .menu-btn {
      display: block;
      font-size: 28px;
      color: #236bb8;
      cursor: pointer;
    }
  
    /* 🔵 BANNER PRINCIPAL */
    .banner {
      height: 50vh;
    }
  
    .slider-arrow {
      font-size: 26px;
      padding: 5px 10px;
    }
  
    /* 🔵 TITULOS */
    h2 {
      font-size: 1.8rem !important;
    }
  
    /* 🔵 MANTENTE CONECTADO */
    .eventos-grid {
      grid-template-columns: 1fr !important;
      padding: 0 10px;
    }
  
    .evento-card img {
      height: 180px;
    }
  
    /* 🔵 MINISTERIOS */
    .ministerios-grid {
      grid-template-columns: 1fr !important;
    }
  
    .ministerio-card img {
      height: 180px;
    }
  
    /* 🔵 CRECER */
    .crecer {
      height: 45vh;
    }
  
    .crecer-logo {
      width: 180px;
    }
  
    /* 🔵 SUSCRIPCIÓN */
    .suscripcion-container {
      grid-template-columns: 1fr !important;
      text-align: center;
    }
  
    .suscripcion-imagen img {
      max-width: 300px;
      margin: 20px auto 0;
    }
  
    /* 🔵 FOOTER */
    .footer-container {
      grid-template-columns: 1fr !important;
      text-align: center !important;
    }
  }

/* ============================================================
   📱 MENÚ HAMBURGUESA
   ============================================================ */

/* Botón hamburguesa */
.menu-btn {
  display: none;
  cursor: pointer;
  font-size: 28px;
  color: #236bb8;
}

/* Menú móvil oculto */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 75%;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 12px rgba(0,0,0,.15);
  z-index: 99999;
  padding: 40px 25px;
  transition: 0.35s ease;
  overflow-y: auto;
}

/* Enlaces */
.mobile-links a {
  display: block;
  padding: 14px 0;
  font-size: 1.1rem;
  color: #236bb8;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
  text-decoration: none;
}

/* Dropdown móvil */
.mobile-dropdown-btn,
.mobile-sub-btn {
  font-size: 1.1rem;
  padding: 14px 0;
  color: #236bb8;
  border-bottom: 1px solid #eaeaea;
  cursor: pointer;
}

.mobile-dropdown-menu,
.mobile-sub-menu {
  display: none;
  padding-left: 15px;
}

/* Mostrar menú activo */
.mobile-menu.active {
  right: 0;
}

/* Responsive: activar hamburguesa y ocultar nav */
@media (max-width: 900px) {
  nav { display: none !important; }
  .menu-btn { display: block; }
}

/* ============================================================
   📱 MENÚ HAMBURGUESA — VERSIÓN PRO
   ============================================================ */

/* Overlay oscuro detrás del menú */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease;
  z-index: 9990;
}

/* Cuando el menú se abre */
.mobile-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Animación entrada del menú */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 78%;
  max-width: 380px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.20);
  padding: 50px 25px;
  transition: 0.45s cubic-bezier(.25,.8,.25,1);
  z-index: 9999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Slide in */
.mobile-menu.active {
  right: 0;
}

/* Animación de cada link: fade + slide */
.mobile-links a,
.mobile-dropdown-btn,
.mobile-sub-btn {
  opacity: 0;
  transform: translateX(20px);
  transition: 0.35s ease;
}

/* Cuando el menú abre */
.mobile-menu.active .mobile-links a,
.mobile-menu.active .mobile-dropdown-btn,
.mobile-menu.active .mobile-sub-btn {
  opacity: 1;
  transform: translateX(0);
}

/* Estilo más limpio de categorías */
.mobile-dropdown-btn,
.mobile-sub-btn {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 12px 0;
  color: #236bb8;
}

/* Submenú */
.mobile-dropdown-menu,
.mobile-sub-menu {
  padding-left: 15px;
}

/* Icono hamburguesa → X */
.menu-btn i {
  transition: 0.35s ease;
}

.menu-btn.active i {
  transform: rotate(90deg);
  opacity: 0;
}

.menu-btn.active::after {
  content: "✕";
  position: absolute;
  font-size: 30px;
  top: -4px;
  right: 0;
  color: #236bb8;
}

/* No mostrar cursor personalizado en móvil */
@media (max-width: 800px) {
  .cursor {
    display: none !important;
  }
}

/* ============================================================
   📱 FOOTER RESPONSIVE PRO
   ============================================================ */

   @media (max-width: 900px) {

    .footer {
      padding: 50px 20px;
      text-align: center;
    }
  
    .footer-container {
      grid-template-columns: 1fr !important;
      gap: 40px;
    }
  
    /* LOGO */
    .footer-logo {
      width: 80px;  /* más vistoso en móvil */
      margin-bottom: 15px;
    }
  
    .footer-col {
      text-align: center !important;
    }
  
    .footer-col h4 {
      font-size: 1.3rem;
      margin-bottom: 10px;
    }
  
    .footer-col a {
      font-size: 1.05rem;
      margin: 6px 0;
    }
  
    /* Redes más grandes */
    .footer-social {
      justify-content: center;
      gap: 15px;
    }
  
    .footer-social i {
      font-size: 1.6rem;
    }
  
    /* Contacto */
    .footer-col p {
      font-size: 1rem;
      margin-bottom: 6px;
    }
  
    /* Línea final */
    .footer-bottom {
      margin-top: 40px;
      font-size: 0.95rem;
    }
  }
  
  @media (max-width: 500px) {
    .footer {
      padding: 40px 15px;
    }
  
    .footer-logo {
      width: 70px;
    }
  
    .footer-social i {
      font-size: 1.5rem;
    }
  
    .footer-col h4 {
      font-size: 1.2rem;
    }
  }

/* ============================================================
   💎 HEADER PRO PREMIUM (Blur + Transparencia + Shadow)
   ============================================================ */

   header {
    position: fixed;
    top: 0;
    width: 100%;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    z-index: 99999;
    transition: 0.3s ease;
  }
  
  /* Espaciado más profesional */
  .header-container {
    padding: 12px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Logo ligeramente más pequeño */
  .logo {
    height: 52px;
    transition: 0.3s ease;
  }
  
  /* Cuando se hace scroll */
  header.scrolled {
    background: rgba(255,255,255,0.60);
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  }
  
  header.scrolled .logo {
    height: 45px;
  }
  
  /* NAV desktop más elegante */
  nav a {
    padding: 10px 14px;
    border-radius: 6px;
    transition: 0.3s ease;
  }
  
  nav a:hover {
    background: rgba(0,0,0,0.06);
    transform: translateY(-2px);
  }
  
  /* Para tablets y móviles (no afecta tu menú hamburguesa) */
  @media (max-width: 900px) {
    .header-container {
      padding: 12px 20px;
    }
  }

/* 🔥 Cards PRO */
.evento-card,
.ministerio-card,
.predica-card,
.card,
.servicio-card {
  transform: translateY(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.evento-card:hover,
.ministerio-card:hover,
.predica-card:hover,
.card:hover,
.servicio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.15);
}

/* 📸 Zoom leve en imágenes */
.evento-card img,
.ministerio-card img,
.predica-card img,
.card img {
  transform: scale(1);
  transition: transform 0.35s ease;
}

.evento-card:hover img,
.ministerio-card:hover img,
.predica-card:hover img,
.card:hover img {
  transform: scale(1.04);
}

/* 🔘 Botón PRO */
.btn-negro,
.btn-blanco,
button,
a.btn {
  transition: background 0.3s ease, transform 0.25s ease;
}

.btn-negro:hover,
.btn-blanco:hover,
button:hover,
a.btn:hover {
  transform: translateY(-3px);
}

/* ======================================
   ACORDEÓN PREMIUM — CLM
   ====================================== */

   .acordeon {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .acordeon-item {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 6px;
  }
  
  .acordeon-header {
    width: 100%;
    background: #fff;
    border: 1px solid #2c71c3;
    border-radius: 6px;
    color: #2c71c3;
    font-size: 1rem;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .25s ease;
  }
  
  .acordeon-header:hover {
    background: #e8f0ff;
  }
  
  .acordeon-header.active {
    background: #2c71c3;
    color: #fff;
  }
  
  .acordeon-header .flecha {
    transition: transform .25s ease;
  }
  
  .acordeon-header.active .flecha {
    transform: rotate(180deg);
  }
  
  .acordeon-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 8px;
  }
  
  .acordeon-content.open {
    padding: 12px 8px;
  }
  
  .acordeon-content p {
    margin: 0 0 10px;
    line-height: 1.6;
    color: #444;
  }
  
  
  /* ======================================
     DISEÑO PRO DE LA SECCIÓN CREENOS
     ====================================== */
  
  .creemos-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    margin-top: 40px;
  }
  
  .creemos-texto {
    flex: 1;
  }
  
  .creemos-img {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .creemos-img img {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }
  
  /* RESPONSIVE */
  @media (max-width: 992px) {
    .creemos-container {
      flex-direction: column;
    }
  
    .creemos-img {
      flex-direction: row;
      flex-wrap: wrap;
    }
  
    .creemos-img img {
      width: calc(50% - 10px);
    }
  }
  
  @media (max-width: 600px) {
    .creemos-img img {
      width: 100%;
    }
  }
  

/* Texto más angosto y elegante (PRO) */
.texto-centrado {
  max-width: 760px;  /* ancho ideal */
  margin: 0 auto;    /* centra todo */
}

/* 🔵 Banner Esencia PRO (funcional) */
.banner-esencia {
  width: 100%;
  height: 420px;
  background-image: url("img/esenciabanner.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 80px; /* evita que el header tape la parte de arriba */
}

/* Tablets y móviles */
@media (max-width: 768px) {
  .banner-esencia {
    height: 260px;
    padding-top: 60px;
    background-position: top center;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .banner-esencia {
    height: 220px;
  }
}

/* 🔵 FIX GLOBAL: agrega espacio debajo del header en móvil */
@media (max-width: 768px) {
  body {
    padding-top: 90px; /* AJUSTA a la altura real del header móvil */
  }
}

/* =======================================================
   🔵 BANNERS DE PÁGINAS INTERNAS (INDEX NO INCLUIDO)
   ======================================================= */

   .banner-esencia,
   .banner-soy-nuevo,
   .banner-bautismo,
   .banner-kids,
   .banner-teens,
   .banner-jovenes
   .banner-oracion
   .banner-podcast
   .banner-devocionales{
     height: 600px;
     background-size: cover;
     background-position: center;
   }
   
   /* Tablets */
   @media (max-width: 992px) {
     .banner-esencia,
     .banner-soy-nuevo,
     .banner-bautismo,
     .banner-kids,
     .banner-teens,
     .banner-jovenes
     .banner-oracion
     .banner-podcast
     .banner-devocionales{
       height: 420px;
     }
   }
   
   /* Móvil */
   @media (max-width: 768px) {
     .banner-esencia,
     .banner-soy-nuevo,
     .banner-bautismo,
     .banner-kids,
     .banner-teens,
     .banner-jovenes
     .banner-oracion
     .banner-podcast
     .banner-devocionales{
       height: 260px;
       background-position: top center;
     }
   }
   
   @media (max-width: 480px) {
     .banner-esencia,
     .banner-soy-nuevo,
     .banner-bautismo,
     .banner-kids,
     .banner-teens,
     .banner-jovenes
     .banner-oracion
     .banner-podcast
     .banner-devocionales{
       height: 220px;
     }
   }


/* 🔵 Banner Oración PRO (versión correcta) */
.banner-oracion {
  width: 100%;
  height: 600px; /* ← altura recomendada para desktop */
  background-image: url("img/oracion/banneroracion.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tablets */
@media (max-width: 992px) {
  .banner-oracion {
    height: 360px;
  }
}

/* Móvil */
@media (max-width: 768px) {
  .banner-oracion {
    height: 260px;
    background-position: top center;
  }
}

/* Móvil chico */
@media (max-width: 480px) {
  .banner-oracion {
    height: 220px;
  }
}

/* 🔵 Galería Oración Responsive */
.galeria-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.galeria-container img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 🔵 MÓVIL: 1 sola imagen por fila */
@media (max-width: 768px) {
  .galeria-container {
    grid-template-columns: 1fr;
  }
}

.texto-centrado {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
}

.texto-centrado h3 {
  font-size: 26px;
  color: #236bb8;
  font-family: 'Scholar', serif;
  margin: 0;
}

.texto-centrado h2 {
  font-size: 38px;
  color: #236bb8;
  font-family: 'Scholar', serif;
  margin: 5px 0 0 0;
}

@media (max-width: 480px) {
  .texto-centrado h3 {
    font-size: 22px;
  }

  .texto-centrado h2 {
    font-size: 30px;
  }
}

/* 🔵 Ajuste del tamaño de los TikTok embeds */
.tiktok-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 40px 10%;
}

.tiktok-grid blockquote.tiktok-embed {
  transform: scale(0.75); /* tamaño más pequeño */
  transform-origin: top center;
}

/* Tablets */
@media (max-width: 992px) {
  .tiktok-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tiktok-grid blockquote.tiktok-embed {
    transform: scale(0.85);
  }
}

/* Móvil */
@media (max-width: 768px) {
  .tiktok-grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .tiktok-grid blockquote.tiktok-embed {
    transform: scale(1); /* tamaño normal */
  }
}