/* ==========================================================================
   La Voz de Dios · COMPONENTES
   Piezas reutilizables, independientes de la sección donde caigan.
   ========================================================================== */

/* --- Botones -------------------------------------------------------------
   Tres rellenos en toda la web y ni uno más. Más variedad diluye la
   jerarquía y el visitante deja de saber qué es lo importante.

   .btn          naranja + blanco    4.61:1   acción principal
   .btn--claro   blanco  + tinta    15.9:1   acción secundaria
   .btn--vivo    lima    + tinta    14.2:1   acción sobre fondo oscuro
   ------------------------------------------------------------------------- */
/* Rectángulo plano, como en la referencia: esquina recta, sin borde y sin
   sombra. Boldonse 14px con 0.05em de tracking y relleno 24px 38px, todo
   medido del original. Al pasar el ratón se desplaza en lugar de crecer.
   La excepción es el botón blanco: sobre fondo claro necesita contorno o
   desaparece, así que ese sí lo lleva. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:14px;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.5;
  padding:24px 38px;border-radius:var(--r-boton);
  background:var(--c-accion);color:var(--c-superficie);
  border:0;box-shadow:none;
  transition:transform var(--t-rapida) var(--curva),
             background var(--t-rapida);
}
.btn:hover{transform:translate(4px,-4px);background:var(--c-accion-hover)}
.btn:focus-visible{outline:3px solid var(--c-enlace);outline-offset:3px}
.btn--claro{background:var(--c-superficie);color:var(--c-tinta);border:var(--borde)}
.btn--claro:hover{background:var(--c-fondo);color:var(--c-tinta)}
.btn--vivo{background:var(--c-vivo);color:var(--c-tinta)}
.btn--vivo:hover{background:var(--c-vivo-hover);color:var(--c-tinta)}
.btn svg{width:19px;height:19px;flex:none}
/* La flecha se separa un poco al pasar el ratón */
.btn--flecha svg{transition:transform var(--t-rapida) var(--curva)}
.btn--flecha:hover svg{transform:translateX(5px)}

/* --- Píldora de etiqueta -------------------------------------------------- */
.pildora{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:var(--ls-etiqueta);line-height:1.4;
  padding:10px 18px;border:var(--borde);border-radius:var(--r-pildora);
  background:var(--c-superficie);
}
/* Sobre fondo oscuro: contorno claro en vez de relleno blanco */
.pildora--fantasma{
  background:transparent;
  border-color:var(--c-claro-24);
  color:var(--c-fondo);
}

/* --- Sello de sección -----------------------------------------------------
   Sustituye a la píldora encima de los titulares. En cápsula parecía un
   botón e invitaba a pulsarlo; con forma de estrella se lee como lo que
   es, una etiqueta. La forma sale de reproducir el sello del original
   (un PNG de 13 puntas) con clip-path, para que valga con cualquier texto.
   ------------------------------------------------------------------------- */
.sello{
  display:inline-grid;place-items:center;
  padding:26px 42px;
  background:var(--c-accion);color:var(--c-superficie);
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-mini);text-transform:uppercase;
  letter-spacing:.05em;line-height:1;text-align:center;
  rotate:-6deg;
  clip-path:polygon(50.0% 0.0%,58.5% 15.5%,73.2% 5.7%,73.5% 23.4%,91.1% 21.6%,83.2% 37.4%,99.6% 44.0%,85.2% 54.3%,96.8% 67.7%,79.2% 70.2%,83.2% 87.4%,66.5% 81.4%,62.0% 98.5%,50.0% 85.5%,38.0% 98.5%,33.5% 81.4%,16.8% 87.4%,20.8% 70.2%,3.2% 67.7%,14.8% 54.3%,0.4% 44.0%,16.8% 37.4%,8.9% 21.6%,26.5% 23.4%,26.8% 5.7%,41.5% 15.5%);
}
.sello--cielo{background:var(--c-cielo);color:var(--c-tinta)}
.sello--lima{background:var(--c-lima);color:var(--c-tinta)}
.sello--amarillo{background:var(--c-amarillo);color:var(--c-tinta)}
.sello--fucsia{background:var(--c-fucsia);color:var(--c-tinta)}
.sello--der{rotate:6deg}
@media (max-width:620px){ .sello{padding:22px 30px;font-size:var(--fs-micro)} }

/* --- Dato suelto ----------------------------------------------------------
   Sin caja ni relleno: es información, no una acción. Antes iba en cápsula
   con borde y se confundía con un botón.
   ------------------------------------------------------------------------- */
.dato{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-medio);letter-spacing:0;color:var(--c-tinta);
}
.dato svg{width:18px;height:18px;flex:none;color:var(--c-accion)}
/* Un punto separa los datos entre sí, en lugar de encerrar cada uno */
.datos{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;align-items:center}
.datos .dato+.dato::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--c-tinta-40);margin-right:17px;flex:none;
}

/* --- Tarjetas ------------------------------------------------------------- */
.tarj{
  border:var(--borde);border-radius:var(--r-grande);
  padding:var(--e-3);background:var(--c-superficie);
  display:grid;gap:13px;align-content:start;
  transition:transform var(--t-normal) var(--curva),
             box-shadow var(--t-normal) var(--curva);
}
.tarj:hover{transform:translateY(-8px);box-shadow:var(--sombra-dura-xl)}
.tarj--lima{background:var(--c-lima-t)}
.tarj--cielo{background:var(--c-cielo-t)}
.tarj--amarillo{background:var(--c-amarillo-t)}
.tarj--fucsia{background:var(--c-fucsia-t)}
.tarj p{font-size:var(--fs-medio)}

/* --- Cifras --------------------------------------------------------------- */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2);margin-top:var(--e-4)}
.cifra{
  border:var(--borde);border-radius:var(--r-grande);
  padding:var(--e-3);display:grid;gap:6px;align-content:start;
}
.cifra:nth-child(1){background:var(--c-lima-t)}
.cifra:nth-child(2){background:var(--c-cielo-t)}
.cifra:nth-child(3){background:var(--c-amarillo-t)}
.cifra__n{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h1);line-height:1;letter-spacing:var(--ls-titular);
}
.cifra__l{font-size:var(--fs-chico);color:var(--c-tinta-70);line-height:1.5}

/* --- Pasos numerados ------------------------------------------------------ */
.pasos{display:grid;gap:18px;margin-top:var(--e-3)}
/* Sin caja: el número de color ya separa cada paso por sí solo */
.paso{
  display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start;
  padding:6px 0;
}
.paso__n{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--f-titular);font-weight:var(--peso-titular);font-size:19px;
  border:var(--borde);
}
.paso__n--cielo{background:var(--c-cielo)}
.paso__n--lima{background:var(--c-lima)}
.paso__n--fucsia{background:var(--c-fucsia)}

/* --- Formulario ----------------------------------------------------------- */
.form{
  border:var(--borde);border-radius:var(--r-grande);background:var(--c-superficie);
  padding:var(--e-4);display:grid;gap:16px;box-shadow:var(--sombra-dura-xl);
}
.form__par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:grid;gap:7px;min-width:0}
/* Los campos traen un ancho intrínseco (size=20) que rompe el 1fr de la
   rejilla en móvil: se fuerza a llenar la columna y a poder encoger. */
.campo input,.campo select,.campo textarea{width:100%;min-width:0}
.form__par>*{min-width:0}
.campo label{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--ls-etiqueta);
}
.campo input,.campo select{
  font-family:var(--f-texto);font-size:var(--fs-medio);padding:14px 16px;
  border:var(--borde);border-radius:var(--r-medio);
  background:var(--c-fondo);color:var(--c-tinta);
}
.campo input:focus,.campo select:focus{outline:3px solid var(--c-enlace);outline-offset:2px}
.campo .opc{font-weight:var(--peso-normal);text-transform:none;letter-spacing:0;color:var(--c-tinta-70)}
.form .btn{justify-content:center;margin-top:6px;width:100%}
.nota{font-size:var(--fs-chico);color:var(--c-tinta-70)}


/* --- Acordeón (FAQ opción B: numeración grande) --------------------------- */
.faq{border-top:var(--borde);max-width:1000px;margin-inline:auto}
.faq__it{border-bottom:var(--borde)}
.faq__btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(16px,2.4vw,34px);align-items:center;
  padding:var(--e-3) 0;text-align:left;
}
.faq__n{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h2);line-height:1;letter-spacing:var(--ls-titular);
  color:var(--c-tinta-40);min-width:1.6em;transition:color var(--t-rapida);
}
.faq__it.abierta .faq__n{color:var(--c-accion)}
.faq__q{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h4);line-height:1.45;letter-spacing:var(--ls-titular);
}
.faq__ico{
  width:42px;height:42px;border:var(--borde);border-radius:50%;
  display:grid;place-items:center;flex:none;
  transition:transform var(--t-rapida) var(--curva),background var(--t-rapida);
}
.faq__it.abierta .faq__ico{
  transform:rotate(135deg);background:var(--c-accion);
  color:var(--c-superficie);border-color:var(--c-accion);
}
.faq__ico svg{width:17px;height:17px}
/* 0fr a 1fr: abre a la altura real del contenido sin medirla en JS */
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-rapida) var(--curva)}
.faq__it.abierta .faq__panel{grid-template-rows:1fr}
.faq__panel>div{overflow:hidden}
.faq__panel p{
  padding:0 0 var(--e-3) calc(1.6em + clamp(16px,2.4vw,34px));
  max-width:70ch;color:var(--c-tinta-70);
}

/* --- Cuenta atrás ---------------------------------------------------------
   Banda oscura a todo el ancho: a la izquierda la llamada, en medio una
   ficha blanca por unidad con su franja de color, a la derecha el cuándo.
   ------------------------------------------------------------------------- */
.reloj{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,3vw,44px);
  background:var(--c-tinta);color:var(--c-fondo);
  border-radius:var(--r-medio);padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,34px);
  margin-block:var(--e-3) var(--e-4);
}
.reloj__grito{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h3);line-height:1.15;text-transform:uppercase;
  color:var(--c-lima);margin:0;
}
.reloj__cab{display:flex;align-items:center;gap:9px;margin-top:8px}
.reloj__punto{
  width:9px;height:9px;border-radius:50%;background:var(--c-accion);flex:none;
  animation:latido 1.6s ease-in-out infinite;
}
.reloj__der{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h4);line-height:1.5;text-transform:uppercase;
  text-align:right;margin:0;
}
.reloj__der small{display:block;font-family:var(--f-texto);font-size:var(--fs-chico);
  text-transform:none;color:var(--c-claro-75);margin-top:2px}
.reloj__et{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:var(--ls-etiqueta);color:var(--c-claro-75);margin:0;
}
.reloj__dig{display:flex;gap:12px;flex-wrap:nowrap;justify-content:center}
.reloj__u{
  display:grid;justify-items:center;min-width:clamp(72px,7vw,96px);
  padding:20px 14px 12px;background:var(--c-superficie);color:var(--c-tinta);
  border-radius:var(--r-chico);border-top:6px solid var(--c-cielo);
}
.reloj__u:nth-child(2){border-top-color:var(--c-lima)}
.reloj__u:nth-child(3){border-top-color:var(--c-amarillo)}
.reloj__u:nth-child(4){border-top-color:var(--c-fucsia)}
.reloj__u b{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h1);line-height:1;letter-spacing:var(--ls-titular);
  color:var(--c-tinta);font-variant-numeric:tabular-nums;
}
.reloj__u i{
  font-style:normal;font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:var(--ls-etiqueta);color:var(--c-tinta);opacity:.72;margin-top:6px;
}

/* --- Marquesina ----------------------------------------------------------- */
.marq{
  overflow:hidden;border-block:var(--borde);
  background:var(--c-tinta);color:var(--c-fondo);padding:13px 0;
}
.marq__p{display:flex;width:max-content;animation:desplazar 32s linear infinite}
.marq__p span{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:clamp(12px,1.05vw,14px);line-height:1.6;text-transform:uppercase;
  letter-spacing:var(--ls-titular);padding-inline:22px;
  display:inline-flex;align-items:center;gap:22px;white-space:nowrap;
}
.marq__p span::after{content:"\2726";opacity:.6}
@keyframes desplazar{to{transform:translateX(-50%)}}

/* --- Redes sociales ------------------------------------------------------- */
.social{display:flex;gap:9px}
.social a{
  width:38px;height:38px;border:2px solid var(--c-claro-24);border-radius:50%;
  display:grid;place-items:center;
  transition:background var(--t-rapida),border-color var(--t-rapida),color var(--t-rapida);
}
.social a:hover{background:var(--c-vivo);border-color:var(--c-vivo);color:var(--c-tinta)}
.social svg{width:16px;height:16px}

/* --- Pegatinas flotantes -------------------------------------------------- */
.pegatina{
  position:absolute;z-index:var(--z-flotante);display:grid;place-items:center;
  width:clamp(70px,7.4vw,104px);aspect-ratio:1;border-radius:50%;
  border:var(--borde);font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:clamp(8px,.85vw,10.5px);text-transform:uppercase;text-align:center;
  letter-spacing:.03em;line-height:1.3;padding:8px;
  animation:flotar 7s ease-in-out infinite;
}
.pegatina--1{background:var(--c-amarillo-t);left:1%;top:2%;transform:rotate(-11.66deg)}
.pegatina--2{background:var(--c-accion);color:var(--c-superficie);right:2%;top:13%;
  transform:rotate(9deg);animation-delay:-2.4s}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* --- Tarjeta de persona en cinta -----------------------------------------
   Medida sobre agenflux-clone/about-us.html, no estimada:
     tarjeta 292x398 · relleno 10px 10px 21px · esquinas rectas
     foto 272x272 sobre fondo crema
     nombre 22px en versales · rol 18px

   En el original el recorte venía pintado dentro de cada PNG. Aquí se hace
   con clip-path, para que valga con cualquier foto que se suba después.
   El polígono sale de leer el canal alfa del PNG original:
     esquina superior izquierda cortada en diagonal hasta el 20%
     borde inferior en dos dientes de sierra que suben del 100% al 78%
     esquina inferior derecha cortada del 68,5% al 67,6%
   ------------------------------------------------------------------------- */
.pcard{
  width:292px;flex:none;
  background:var(--c-cielo);color:var(--c-tinta);
  border:var(--borde);
  border-radius:var(--r-medio);
  padding:10px 10px 21px;
  transition:transform var(--t-normal) var(--curva);
}
.pcard:hover{transform:translateY(-8px)}
/* --- Las tres máscaras del clon -------------------------------------------
   En el clon las fotos del equipo NO se recortan por CSS: son PNG con el
   recorte ya horneado en el canal alfa. Leyendo ese alfa de las seis imágenes
   salen exactamente TRES formas distintas, no una:

     m1  dientes de sierra en los dos costados
     m2  solo dos esquinas en diagonal, arriba a la izquierda y abajo a la derecha
     m3  como la m2 pero con dientes en el borde inferior

   Los vértices están medidos sobre el alfa cada 2% de alto, no calcados a
   ojo. Aquí van como clip-path porque nuestras fotos son JPG normales: el
   recorte tiene que ponerlo el CSS.

   La m3 es la que llevaba el sitio en las quince tarjetas; ahora las tres
   rotan, como en el original. */
.pcard__f{
  aspect-ratio:1;
  background:var(--c-crema);
  background-size:cover;background-position:center top;
  filter:grayscale(1) contrast(1.04);
  transition:filter var(--t-normal);
  clip-path:var(--mascara);
}

/* m1 · dientes en los dos costados. El borde derecho es el izquierdo
   reflejado: donde uno entra 16.1%, el otro sale al 83.9%. */
.pcard__f--m1{
  --mascara:polygon(
    0% 0%, 100% 0%,
    83.9% 20%, 98.3% 22%, 84.6% 37%, 100% 50%,
    84.7% 64%, 98.3% 78%, 83.9% 80%, 100% 100%,
    0% 100%,
    16.1% 80%, 1.7% 78%, 15.3% 64%, 0% 50%,
    15.4% 37%, 1.7% 22%, 16.1% 20%
  );
}

/* m2 · las dos esquinas en diagonal, sin dientes. */
.pcard__f--m2{
  --mascara:polygon(
    20% 0%, 100% 0%, 100% 68.5%,
    68.5% 100%, 0% 100%, 0% 20%
  );
}

/* m3 · la m2 con tres dientes en el borde de abajo. */
.pcard__f--m3{
  --mascara:polygon(
    20% 0%, 100% 0%, 100% 68.5%,
    67.6% 100%, 67.6% 78%, 34% 100%, 34% 78%, 0% 100%,
    0% 20%
  );
}
.pcard:hover .pcard__f{filter:grayscale(0)}
.pcard__d{padding-top:16px}
.pcard__n{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:22px;line-height:1.55;letter-spacing:.01em;
  text-transform:uppercase;
}
.pcard__r{font-size:18px;line-height:1.35;margin-top:7px}
/* Rotación de color; la naranja lleva texto blanco */
.pcard--cielo{background:var(--c-cielo)}
.pcard--accion{background:var(--c-accion);color:var(--c-superficie)}
.pcard--fucsia{background:var(--c-fucsia)}
.pcard--lima{background:var(--c-lima)}
.pcard--amarillo{background:var(--c-amarillo)}

/* --- Carrusel automático -------------------------------------------------
   Cinta a ancho completo que se desplaza sola. El movimiento es CSS; el JS
   (carrusel.js) duplica el contenido, deduce la duración de una velocidad
   en px/s y gestiona la pausa.

   Valores medidos en la referencia: 60 px/s, separación 20px, columnas de
   292px que alternan dos tarjetas apiladas con una sola centrada. Ese
   alternar es lo que produce el escalonado.
   ------------------------------------------------------------------------- */
.carr{position:relative;overflow:hidden;width:100%}
.carr__viewport{overflow:hidden}
.carr__fila{display:flex;width:max-content}
.carr__pista{
  display:flex;gap:20px;padding-right:20px;flex:none;align-items:center;
  animation:correr var(--dur,42s) linear infinite;
  will-change:transform;
}
@keyframes correr{to{transform:translateX(-100%)}}
/* Se detiene al pasar el ratón, al tabular dentro y con el botón:
   aquí van nombres de personas y hay que poder leerlos. */
/* La cinta NO se detiene al pasar el ratón. Se probó y molesta: uno mueve el
   cursor por la sección para leer y la cinta se queda clavada, que es justo
   lo contrario de lo que se espera de algo que está en marcha. Queda la
   parada de verdad, la de prefers-reduced-motion, que es la que importa. */
.carr.parado .carr__pista{animation-play-state:paused}
/* Con movimiento reducido: fila normal que se arrastra */
.carr.quieto .carr__viewport{overflow-x:auto}
.carr.quieto .carr__pista{animation:none}
.carr__col{display:flex;flex-direction:column;gap:20px;flex:none}
.carr__col--1{justify-content:center}
/* El botón de pausa se retiró de la cinta de equipo por decisión del usuario.
   Las reglas se quedan porque la clase sigue existiendo en el sistema y
   podría hacer falta en otra cinta donde sí convenga poder pararla. */
.carr__pausa{
  position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
  z-index:var(--z-flotante);width:46px;height:46px;
  border-radius:var(--r-boton);border:var(--borde);
  background:var(--c-superficie);color:var(--c-tinta);
  display:grid;place-items:center;box-shadow:var(--sombra-dura);
  transition:transform var(--t-rapida) var(--curva),box-shadow var(--t-rapida) var(--curva);
}
.carr__pausa:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--c-tinta)}
.carr__pausa:focus-visible{outline:3px solid var(--c-enlace);outline-offset:3px}
.carr__pausa svg{width:16px;height:16px}
.carr__pausa .ico-play{display:none}
.carr.parado .carr__pausa .ico-play{display:block}
.carr.parado .carr__pausa .ico-pausa{display:none}
@media (prefers-reduced-motion:reduce){ .carr__pista{animation:none!important} }

/* --- Bocadillo de diálogo (FAQ) -------------------------------------------
   Medido igual: 573px de ancho, relleno 40px 40px 80px (los 80 de abajo
   dejan sitio a la colita), título 22px en versales, cuerpo 20px/34px.
   La colita es un triángulo con clip-path, no una imagen.
   ------------------------------------------------------------------------- */
.globo{
  position:relative;max-width:573px;
  border:var(--borde);
  border-radius:var(--r-medio);
  padding:40px 40px 44px;
  background:var(--c-superficie);
}
/* La colita son dos triángulos: uno en tinta (el contorno) y encima otro
   del color del bocadillo, 2px más pequeño, que ademas tapa el borde
   inferior en la unión para que no quede línea. Antes se recortaba un
   bloque con bordes y el recorte dejaba filos sueltos. */
.globo::before,.globo::after{
  content:"";position:absolute;top:100%;pointer-events:none;
}
.globo::before{width:50px;height:39px;background:var(--c-tinta)}
.globo::after{width:46px;height:36px;background:inherit}
.globo--izq::before{left:50px;clip-path:polygon(0 0, 100% 0, 0 100%)}
.globo--izq::after{left:52px;clip-path:polygon(0 0, 100% 0, 0 100%)}
.globo--der::before{right:50px;clip-path:polygon(0 0, 100% 0, 100% 100%)}
.globo--der::after{right:52px;clip-path:polygon(0 0, 100% 0, 100% 100%)}
.globo__q{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:.005em;text-transform:uppercase;
}
.globo__a{font-size:20px;line-height:34px;color:var(--c-tinta);margin-top:16px}
.globo--cielo{background:var(--c-cielo-t)}
.globo--lima{background:var(--c-lima-t)}
.globo--amarillo{background:var(--c-amarillo-t)}
.globo--fucsia{background:var(--c-fucsia-t)}
.globo--oscuro{background:var(--c-oscuro);color:var(--c-fondo)}
.globo--oscuro .globo__a{color:var(--c-claro-94)}

/* Anotación a mano: DM Sans 19px semibold, girada 11 grados (en el original
   era Playfair itálica; la cursiva se descartó por legibilidad) */
.anota{
  font-family:var(--f-acento);font-style:normal;font-size:19px;font-weight:600;
  color:var(--c-tinta);display:inline-flex;align-items:center;gap:10px;
  transform:rotate(-11deg);
}
.anota--der{transform:rotate(11deg)}

@media (max-width:620px){
  .globo{padding:26px 24px 30px}
  .globo__a{font-size:17px;line-height:29px}
  .anota{display:none}
}

/* --- Migas de pan --------------------------------------------------------- */
.migas{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--ls-etiqueta);
}
.migas a{color:var(--c-enlace)}
/* Sin subrayado al pasar: en toda la web el hover se marca con color o con
   movimiento, nunca con una raya que aparece y desaparece. */
.migas a:hover{color:var(--c-tinta)}
.migas li{display:flex;align-items:center;gap:9px}
.migas li+li::before{content:"\203A";color:var(--c-tinta-40);font-size:14px}
.migas [aria-current]{color:var(--c-tinta-70)}

/* --- Versículo destacado -------------------------------------------------- */
.versiculo{
  font-family:var(--f-acento);font-style:normal;letter-spacing:0;
  font-size:var(--fs-lead);line-height:1.45;max-width:46ch;
}
.versiculo cite{
  display:block;margin-top:12px;font-family:var(--f-texto);font-style:normal;
  font-weight:var(--peso-fuerte);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:var(--ls-etiqueta);color:var(--c-tinta-70);
}
.versiculo--claro cite{color:var(--c-claro-75)}

/* --- Tarjeta de valor ----------------------------------------------------- */
.valor{
  border:var(--borde);border-radius:var(--r-medio);padding:var(--e-3);
  display:grid;gap:12px;align-content:start;background:var(--c-superficie);
  transition:transform var(--t-normal) var(--curva),box-shadow var(--t-normal) var(--curva);
}
.valor:hover{transform:translateY(-6px);box-shadow:var(--sombra-dura)}
.valor__ico{
  width:52px;height:52px;border:var(--borde);border-radius:50%;
  display:grid;place-items:center;
}
.valor__ico svg{width:23px;height:23px}
.valor h3{font-size:var(--fs-h4)}
.valor p{font-size:var(--fs-medio);color:var(--c-tinta-70)}
/* Los iconos rotan por la paleta; las tarjetas se quedan en blanco para que
   una grilla de seis no se convierta en un mosaico de colores. */
.valor:nth-child(6n+1) .valor__ico{background:var(--c-cielo)}
.valor:nth-child(6n+2) .valor__ico{background:var(--c-lima)}
.valor:nth-child(6n+3) .valor__ico{background:var(--c-amarillo)}
.valor:nth-child(6n+4) .valor__ico{background:var(--c-fucsia)}
.valor:nth-child(6n+5) .valor__ico{background:var(--c-cielo-t)}
.valor:nth-child(6n+6) .valor__ico{background:var(--c-lima-t)}

/* --- Tarjeta de persona --------------------------------------------------- */
.persona{display:grid;gap:0;align-content:start}
.persona__foto{
  border:var(--borde);border-radius:var(--r-medio);overflow:hidden;
  aspect-ratio:1/1.14;background:var(--c-cielo-t);
  display:grid;place-items:center;
}
.persona__foto img{width:100%;height:100%;object-fit:cover}
.persona__n{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h4);line-height:1.45;letter-spacing:var(--ls-titular);margin-top:14px;
}
.persona__r{
  font-family:var(--f-texto);font-size:var(--fs-chico);
  color:var(--c-tinta-70);line-height:1.45;margin-top:4px;
}
.persona:nth-child(4n+2) .persona__foto{background:var(--c-lima-t)}
.persona:nth-child(4n+3) .persona__foto{background:var(--c-amarillo-t)}
.persona:nth-child(4n+4) .persona__foto{background:var(--c-fucsia-t)}

/* --- Línea de tiempo ------------------------------------------------------ */
.hitos{display:grid;gap:0;position:relative}
.hito{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,38px);
  padding-bottom:var(--e-4);position:relative;
}
.hito:last-child{padding-bottom:0}
/* auto para el punto y 1fr para el tramo de línea, que así estira hasta
   el final de la celda sea cual sea el alto del texto de al lado. */
.hito__marca{display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:10px}
.hito__pt{
  width:20px;height:20px;border-radius:50%;border:var(--borde);
  background:var(--c-accion);margin-top:9px;
}
/* La línea baja desde el punto hasta el siguiente hito */
.hito:not(:last-child) .hito__marca::after{
  content:"";width:2px;background:var(--c-tinta-24);border-radius:2px;
}
.hito__a{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h2);line-height:1;letter-spacing:var(--ls-titular);
  color:var(--c-accion);
}
.hito p{color:var(--c-tinta-70);max-width:58ch;margin-top:10px}

/* --- Marcadores de maqueta ------------------------------------------------ */
.hueco{
  font-family:var(--f-acento);font-style:normal;font-size:var(--fs-chico);
  text-align:center;padding:22px;color:var(--c-tinta-70);line-height:1.6;
}
.hueco--claro{color:var(--c-claro-75)}
.pend{
  background:var(--c-pend-fondo);border:1px dashed var(--c-pend-borde);border-radius:var(--r-boton);
  padding:2px 7px;font-size:var(--fs-mini);color:var(--c-pend-texto);white-space:nowrap;
}

/* --- Revelado al hacer scroll --------------------------------------------- */
.anim{
  opacity:0;transform:translateY(60px);
  transition:opacity var(--t-normal) var(--curva),transform var(--t-normal) var(--curva);
}
.anim--suave{transform:translateY(10px)}
.anim--tarj{transform:translateY(40px) scale(.95)}
.anim.visible{opacity:1;transform:none}
.no-js .anim{opacity:1;transform:none}
/* Cuando GSAP toma el mando (html.gsap lo pone revelado.js al arrancar), las
   transiciones de arriba estorban: GSAP escribe estilos en línea y las dos
   cosas peleando dan tirones. Se apagan y el estado inicial lo fija él.
   Si GSAP no cargara, esta clase nunca se pone y todo sigue como antes. */
.gsap .anim{transition:none}

/* --- Palabras de un titular, para el revelado escalonado ------------------
   Las pone revelado.js al partir un titular con data-titulo. Cada palabra va
   en una caja que recorta, y dentro la palabra sube desde abajo. El recorte
   es generoso por arriba porque Boldonse lleva tildes altas y con overflow
   ajustado se le cortaba el acento. */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.14em;margin-top:-.14em}
.pal > span{display:inline-block;will-change:transform}

@media (max-width:860px){
  .cifras{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* Dos columnas también en móvil: aprovecha la primera pantalla */
  .cifras{grid-template-columns:1fr 1fr;gap:10px}
  .cifra{border-radius:var(--r-medio);padding:18px 16px 16px}
  .cifra:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .pegatina{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .anim{opacity:1;transform:none}
  /* El scroll suave lo pone base.css; aquí se desactiva con el resto. */
  html{scroll-behavior:auto}
}

/* Silueta provisional de persona sobre el crema del original. Sale en
   cuanto haya foto: basta con poner background-image en .pcard__f. */
.pcard__f--hueco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23FEFAE7'/%3E%3Ccircle cx='100' cy='78' r='38' fill='%23B9B2A0'/%3E%3Cpath d='M28 200c0-38 32-64 72-64s72 26 72 64z' fill='%23B9B2A0'/%3E%3C/svg%3E")}

/* Redes como botones: mismo peso visual que el resto de acciones */
.redes{display:flex;gap:10px;flex-wrap:wrap}
.redes .btn{padding:13px 20px}
.redes .btn svg{width:16px;height:16px}

/* Botón compacto: en la cabecera y en listas de acciones secundarias el
   relleno de 24/38 resulta enorme. */
.btn--compacto{padding:15px 24px}

/* --- Enlace con flecha ----------------------------------------------------
   El "View all services" de la referencia: Boldonse 14px en versales, flecha
   a la derecha y una línea que subraya el conjunto. Va en un naranja un
   punto más oscuro que el de los botones porque como texto el de relleno se
   queda en 4.33:1; ver --c-accion-texto.
   ------------------------------------------------------------------------- */
.enlace-f{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:14px;text-transform:uppercase;letter-spacing:.05em;line-height:1.5;
  color:var(--c-accion-texto);
  padding-bottom:11px;
  /* La línea solo aparece al pasar por encima, como en la referencia.
     Se dibuja con un degradado en lugar de con border-bottom para poder
     crecer de izquierda a derecha sin mover nada de sitio. */
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:color var(--t-rapida),
             background-size var(--t-rapida) var(--curva);
}
.enlace-f svg{width:19px;height:19px;flex:none;transition:transform var(--t-rapida) var(--curva)}
.enlace-f:hover{color:var(--c-accion-hover);background-size:100% 2px}
.enlace-f:hover svg{transform:translateX(5px)}
/* Con el teclado la línea también aparece: si no, no habría forma de saber
   dónde está el foco más allá del contorno. */
.enlace-f:focus-visible{outline:3px solid var(--c-enlace);outline-offset:4px;background-size:100% 2px}
/* Sobre fondo oscuro el naranja no llega: allí va en lima */
.enlace-f--claro{color:var(--c-lima)}
.enlace-f--claro:hover{color:var(--c-vivo-hover)}
@media (prefers-reduced-motion:reduce){
  .enlace-f{transition:color var(--t-rapida)}
}


/* --- Enlace dentro de un texto -------------------------------------------
   El hermano pequeño de .enlace-f, para los enlaces que van en medio de un
   párrafo. Misma gramática de toda la web: al pasar el ratón cambia el color
   y una línea CRECE de izquierda a derecha. Crece, no aparece: por eso es un
   degradado de fondo y no un subrayado, que se encendería de golpe.

   Se pone a mano en el HTML, y a propósito: así el enlace decide ser enlace
   de lectura, en vez de que una regla de contenedor pinte de azul todo lo
   que cuelgue de ella, botones incluidos (ver «Reglas de oro» en /sistema/).
   ------------------------------------------------------------------------- */
.enlace-t{
  color:var(--c-enlace);
  padding-bottom:2px;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:color var(--t-rapida),
             background-size var(--t-rapida) var(--curva);
}
.enlace-t:hover{color:var(--c-tinta);background-size:100% 2px}
.enlace-t:focus-visible{outline:3px solid var(--c-enlace);outline-offset:3px;background-size:100% 2px}
.enlace-t--claro{color:var(--c-lima)}
.enlace-t--claro:hover{color:var(--c-fondo)}
@media (prefers-reduced-motion:reduce){
  .enlace-t{transition:color var(--t-rapida)}
}

/* Anotación manuscrita junto al titular de sección, como el "Our Project"
   del original, sin la cursiva: DM Sans semibold girada, con una flecha curva. */
.enc__anota{
  position:absolute;left:0;top:38%;
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-acento);font-style:normal;font-size:19px;font-weight:600;
  color:var(--c-tinta-70);rotate:-8deg;pointer-events:none;
}
.enc--conAnota{position:relative}
@media (max-width:1100px){ .enc__anota{display:none} }

/* --- Tarjeta de ministerio (patrón "Our Work") ----------------------------
   Medido del clon: sección con relleno 80px 30px, tarjeta 886x440 sobre
   fondo oscuro, separación de 112px entre tarjetas, pestaña arriba a la
   izquierda con la esquina derecha cortada en diagonal, foto con marco
   blanco grueso.

   El apilado no está en el clon: allí las cuatro van una debajo de otra
   porque lo hace su JavaScript al hidratar. Aquí se consigue con
   position:sticky, que es CSS puro y no necesita script.
   ------------------------------------------------------------------------- */
.mcards{position:relative;margin-bottom:var(--e-5)}
.mcard{
  position:sticky;
  /* Altura. El clon usaba 2:1 sobre el ancho del contenedor, pero a ese alto
     la tarjeta se comía la pantalla entera y el contenido nadaba en hueco.
     Se aplana a 2.4:1: en un contenedor de 1600px baja de 800px a 667px, un
     17% menos, sin que el logo ni el texto se aprieten. Es una desviación
     consciente de la medida del clon, pedida por el usuario.
     El segundo valor sigue siendo el tope duro: nunca más de lo que cabe en
     la ventana descontando cabecera y pestaña. */
  --mcard-h:min(
    calc((min(1680px, 92vw) - 2 * var(--padding-lat)) / 2.4),
    calc(100vh - 210px)
  );
  height:var(--mcard-h);
  border-radius:var(--r-medio);
  /* Se pega centrada en el hueco libre, sin subir nunca por encima de la
     cabecera más la pestaña que cuelga 58px. */
  top:max(calc(clamp(74px,9vh,104px) + 58px), calc((100vh - var(--mcard-h)) / 2));
  margin-top:58px;
  background-color:var(--c-accion);color:var(--c-superficie);
  /* La retícula del fondo, que en el clon era un PNG */
  background-image:
    linear-gradient(to right, var(--c-superficie-07) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-superficie-07) 1px, transparent 1px);
  background-size:38px 38px;
}
/* Este margen es el scroll que separa una tarjeta de la siguiente: cuanto
   mayor, más despacio llega la que viene. */
.mcard+.mcard{margin-top:min(48vh,440px)}

/* La pestaña, con la esquina derecha en diagonal. Cada tarjeta desplaza la
   suya un poco más para que al apilarse se vean todas en fila. */
/* Trapecio con las DOS esquinas superiores en diagonal. Medido del PNG del
   clon leyendo su canal alfa: la diagonal es lineal y avanza 55.6px en
   horizontal por cada 58px de alto, o sea casi 45 grados exactos.
   El corte va en em (no en %), para que el angulo se mantenga aunque cambie
   el ancho o el tamano de letra; el relleno lateral lo compensa. */
/* Copiado del clon: position:absolute; top:-58px. La pestaña cuelga por
   ENCIMA de la tarjeta, y por las esquinas cortadas se ve el fondo oscuro
   de la sección. Dentro de la tarjeta el recorte era invisible: mismo
   color delante y detrás. */
.mcard__pestana{
  --corte:2.7em;
  position:absolute;top:-58px;left:var(--desp,0);
  height:58px;box-sizing:border-box;
  display:inline-flex;align-items:center;
  background:inherit;color:inherit;
  padding:0 calc(var(--corte) + 16px);
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-medio);letter-spacing:.02em;line-height:1;
  clip-path:polygon(
    var(--corte) 0,
    calc(100% - var(--corte)) 0,
    100% 100%,
    0 100%
  );
}
/* La pestaña ya no lleva icono: solo el nombre del ministerio, que es lo que
   de verdad orienta. El «01 · Ministerio» numeraba sin decir nada.

   Cada pestaña se desplaza un paso más que la anterior para que, al apilarse
   las tarjetas, se vean todas en fila. El paso vive en una variable porque
   depende de CUÁNTAS tarjetas hay: con cinco tiene que ser más corto que con
   cuatro o la última se saldría por la derecha. Si se añade una sexta, se
   baja el paso y se añade su nth-child; no hay que tocar nada más. */
/* La pestaña de la primera tarjeta arranca pegada al borde izquierdo, y su
   base se apoya justo en el canto superior de la tarjeta. Si esa esquina se
   redondeara, el fondo oscuro de la sección asomaría por debajo como un
   mordisco. Las demás pestañas van desplazadas y no tocan ninguna esquina. */
.mcard:nth-child(1){border-top-left-radius:0}
.mcards{--paso-pestana:clamp(0px,14vw,190px)}
.mcard:nth-child(2){--desp:calc(1 * var(--paso-pestana))}
.mcard:nth-child(3){--desp:calc(2 * var(--paso-pestana))}
.mcard:nth-child(4){--desp:calc(3 * var(--paso-pestana))}
.mcard:nth-child(5){--desp:calc(4 * var(--paso-pestana))}

.mcard__cuerpo{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(20px,2.8vw,44px);align-items:center;
  height:100%;box-sizing:border-box;
  /* relleno del original: 35px 40px 39px */
  padding:clamp(24px,3vw,35px) clamp(20px,3.4vw,40px) clamp(26px,3.3vw,39px);
}
.mcard--der .mcard__foto{order:-1}
/* Edades y horario. Va DEBAJO del título, no encima. Arriba quedaba huérfano
   contra el borde de la tarjeta y competía con la pestaña que cuelga justo
   encima; además obligaba al ojo a leer un dato suelto antes de saber de qué
   ministerio se hablaba. Debajo se lee como lo que es: la ficha práctica de
   algo que ya tiene nombre.

   El borde y el fondo salen de currentColor, así que esta única regla vale
   para las cuatro tarjetas sin escribir una por color. La línea de borde
   plana va primero como repliegue: un navegador sin color-mix se queda con
   ella y descarta las dos siguientes. */
.mcard__meta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-chico);
  margin-top:16px;
  padding:7px 15px;
  border-radius:var(--r-pildora);
  border:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 34%, transparent);
  background:color-mix(in srgb, currentColor 8%, transparent);
}
.mcard__meta::before{content:"";width:9px;height:9px;background:currentColor;flex:none}
/* El logo de encima ya separa; sin él (Virtuosas) el título abre la caja. */
.mcard h3{margin-top:0;color:inherit}
.mcard__texto{margin-top:14px;max-width:44ch}
.mcard__logo{display:grid;justify-content:start;align-items:center;margin-bottom:10px}
.mcard__logo img{height:clamp(56px,7.2vw,124px);width:auto}
.mcard .enlace-f{margin-top:var(--e-3)}
/* Marco blanco grueso, como en la referencia. El radio lleva sumado el
   grosor del marco: el borde interior de una caja redondeada tiene el radio
   de fuera menos el borde, así que sumándole esos 10px la foto de dentro
   queda con exactamente el mismo redondeo que la tarjeta que la contiene. */
.mcard__foto{
  border:10px solid var(--c-superficie);
  border-radius:calc(var(--r-medio) + 10px);
  align-self:stretch;overflow:hidden;position:relative;
  background:var(--c-crema);display:grid;place-items:center;
}
/* Absoluta por lo mismo que en el hero y en las fotos de Nosotros: un alto en
   porcentaje no siempre resuelve y la foto acaba saliéndose de su caja.
   --foco es el punto vertical del encuadre. Por defecto el centro, que sirve
   para las fotos apaisadas. */
.mcard__foto img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center var(--foco, 50%);
}
/* LVD Kids: su foto es vertical y la caja apaisada, así que se recorta más de
   la mitad del alto. Subiendo el encuadre entra la cara de la maestra, que es
   lo que ancla la escena; centrado se quedaba fuera. */
.mcard--cielo{ --foco:22% }
/* Pegatina con carita que asoma sobre la foto */
.mcard__peg{
  position:absolute;z-index:var(--z-flotante);
  width:clamp(64px,7vw,104px);aspect-ratio:1;
  display:grid;place-items:center;pointer-events:none;
}
.mcard__peg svg{width:100%;height:100%}
.mcard__peg--sup{top:-22px;right:-22px}
.mcard__peg--inf{bottom:-20px;left:-24px}

/* Los cuatro colores. Sobre naranja el texto va blanco; sobre los claros,
   en tinta, porque el blanco sobre lima o amarillo es ilegible. */
.mcard--cielo{background-color:var(--c-cielo);color:var(--c-tinta)}
.mcard--lima{background-color:var(--c-lima);color:var(--c-tinta)}
.mcard--amarilla{background-color:var(--c-amarillo);color:var(--c-tinta)}
.mcard--fucsia{background-color:var(--c-fucsia);color:var(--c-tinta)}
.mcard--cielo,.mcard--lima,.mcard--amarilla,.mcard--fucsia{
  background-image:
    linear-gradient(to right, var(--c-tinta-07) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-tinta-07) 1px, transparent 1px);
}
/* El enlace hereda el color de la tarjeta en vez del naranja de sistema */
.mcard .enlace-f{color:inherit}
.mcard .enlace-f:hover{color:inherit;opacity:.75}

@media (max-width:900px){
  .mcard{position:static;top:auto;height:auto}
  .mcard+.mcard{margin-top:var(--e-4)}
  .mcard__cuerpo{height:auto}
  .mcard__foto{align-self:auto;aspect-ratio:477/366}
  .mcard__pestana{left:0}
  .mcard__cuerpo{grid-template-columns:1fr}
  .mcard--der .mcard__foto{order:0}
  .mcard__peg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mcard{position:static}
  .mcard__pestana{left:0}
}
.mcard:nth-child(1) .mcard__peg{color:var(--c-accion)}
.mcard:nth-child(2) .mcard__peg{color:var(--c-cielo)}
.mcard:nth-child(3) .mcard__peg{color:var(--c-lima)}
.mcard:nth-child(4) .mcard__peg{color:var(--c-amarillo)}
.mcard:nth-child(5) .mcard__peg{color:var(--c-fucsia)}

/* --- Iconos ----------------------------------------------------------------
   Un sprite propio en img/iconos.svg (Simple Icons para marcas, Lucide para
   interfaz). El icono toma el color del texto que lo rodea.
   ------------------------------------------------------------------------- */
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:none;vertical-align:-.18em}
.ico--marca{width:1.05em;height:1.05em}
.btn .ico{width:19px;height:19px}
.enlace-f .ico{width:19px;height:19px;transition:transform var(--t-rapida) var(--curva)}
.enlace-f:hover .ico{transform:translateX(5px)}
.btn--flecha .ico{transition:transform var(--t-rapida) var(--curva)}
.btn--flecha:hover .ico{transform:translateX(5px)}
.dato .ico{width:18px;height:18px;color:var(--c-accion)}

/* Redes en el pie: contorno blanco sobre el fondo oscuro; al pasar el
   ratón se rellenan de blanco. */
.redes .btn{background:transparent;color:var(--c-fondo);border:2px solid var(--c-fondo);padding:13px 20px}
.redes .btn:hover{background:var(--c-superficie);color:var(--c-tinta);border-color:var(--c-superficie);transform:none}
/* Ventana baja: no hay sitio para apilar sin que la tarjeta se corte */
@media (max-height:620px){
  .mcard{position:static;top:auto;height:auto}
  .mcard+.mcard{margin-top:var(--e-4)}
  .mcard__cuerpo{height:auto}
  .mcard__foto{align-self:auto;aspect-ratio:477/366}
  .mcard__pestana{left:0}
}

/* La flecha dibujada del original (49x55, del clon) para las anotaciones a
   mano. Hereda el color del texto; la variante derecha va en espejo. */
/* En el original mide 76x73; a menos de 50px el trazo se pierde. */
.ico--curva{width:58px;height:64px}
.anota{gap:14px}
.anota .ico--curva{margin-top:-26px}
.anota--der .ico--curva{scale:-1 1}
.enc__anota .ico--curva{margin-top:-18px}

/* Segunda marquesina en naranja: dos cintas seguidas del mismo color se
   funden en una; alternándolas cada una se lee por separado, como en la
   referencia (verde oscuro + naranja). Blanco sobre naranja: 4.61:1. */
.marq--accion{background:var(--c-accion);color:var(--c-superficie);border-color:var(--c-accion)}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

/* Cinta que corre hacia la izquierda: la misma animación, al revés */
.carr__fila--izq .carr__pista{animation-direction:reverse}

/* --- Cinta de fotos --------------------------------------------------------
   Fotos en píldora que se desplazan solas, como la referencia. Sin botón de
   pausa: no llevan texto que leer. Mientras no haya fotos, tintes de color.
   ------------------------------------------------------------------------- */
.fotos .carr__pista{gap:18px;padding-right:18px;align-items:center}
/* Las fotos de la cinta son verticales 3:4, las que salen del móvil. El
   hueco tenía 1.9:1 apaisado, herencia del clon, y con object-fit:cover eso
   se quedaba con una franja del centro: cabezas cortadas por arriba y por
   abajo. Ahora el hueco tiene la misma proporción que la foto, así que no
   recorta nada y entra entera.

   Al ponerse de pie, la tarjeta baja de ancho (380 -> 240) para que la fila
   no crezca de más: pasa de unos 200px de alto a unos 320. */
.foto{
  width:clamp(150px,16vw,240px);aspect-ratio:3/4;flex:none;
  border-radius:28px;overflow:hidden;
  background:var(--c-cielo-t);display:grid;place-items:center;
}
.foto img{width:100%;height:100%;object-fit:cover}
.foto:nth-child(4n+2){background:var(--c-lima-t)}
.foto:nth-child(4n+3){background:var(--c-amarillo-t)}
.foto:nth-child(4n+4){background:var(--c-fucsia-t)}
.foto .hueco{padding:14px;font-size:var(--fs-mini)}
@media (max-width:1100px){
  .reloj{grid-template-columns:1fr;text-align:center;justify-items:center}
  .reloj__cab{justify-content:center}
  .reloj__der{text-align:center}
}
@media (max-width:420px){ .reloj__dig{flex-wrap:wrap} .reloj__u{min-width:64px} }

/* --- Móvil: nada puede ser más ancho que la pantalla --------------------- */
/* Los botones llevan nowrap y etiquetas largas en Boldonse («Conoce nuestros
   ministerios» mide 384px): en pantallas chicas se permite el salto de línea
   y se recorta el relleno lateral. */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;max-width:100%;padding:20px 24px;line-height:1.5}
  /* En una fila de acciones el botón no se encoge: salta a la línea siguiente
     y crece para llenarla; solo parte el texto si él solo ya no cabe. */
  .acciones>.btn{flex:1 0 auto}
  /* El formulario cede relleno para que los campos respiren */
  .form{padding:var(--e-3)}
}
/* El marcador de foto pendiente no debe fijar un ancho mínimo */
.hueco{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media (max-width:560px){
  .sello{padding:18px 30px;font-size:12px}
}

/* =========================================================================
   MICROANIMACIONES · lo que da vida sin estorbar
   ========================================================================= */
/* El sello entra con un «pop» y un rebote, como una pegatina que se pega */
.sello.anim{transform:scale(.6);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.sello.anim.visible{transform:none}
.sello{transition:rotate var(--t-rapida) var(--curva)}
.sello:hover{rotate:0deg}
/* Las pegatinas de Ministerios flotan despacio */
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -10px}}
.mcard__peg{animation:flotar 6s ease-in-out infinite}
.mcard__peg--inf{animation-delay:-3s}
/* Cada segundo del contador «salta» al cambiar */
@keyframes tic{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.reloj__u b.tic{animation:tic .35s var(--curva)}
/* Fotos y tarjetas de equipo responden al pasar el ratón */
@media (hover:hover){
  .foto{transition:transform var(--t-normal) var(--curva)}
  .foto:hover{transform:scale(1.03)}
  .pcard{transition:transform var(--t-normal) var(--curva)}
  .pcard:hover{transform:translateY(-6px)}
  .dia,.faq__it,.globo,.hito{transition:transform var(--t-normal) var(--curva)}
  .dia:hover{transform:translateY(-4px)}
}
/* El logo de la cabecera respira un poco al pasar el ratón */
.cab__logo{display:inline-block;transition:transform var(--t-rapida) var(--curva)}
.cab__logo:hover{transform:scale(1.04)}
/* .enlace-t vivía aquí con un subrayado animado que crecía desde la
   izquierda, y otra vez en secciones.css con un subrayado permanente. Como
   secciones.css carga después, mandaba su text-decoration, pero el degradado
   de aquí seguía creciendo encima: al pasar el ratón salían DOS subrayados.

   Se queda el de secciones.css, que es el correcto: un enlace dentro de un
   párrafo necesita subrayado desde el principio para distinguirse del texto
   que lo rodea, no solo color. Ahí el subrayado no es decoración, es lo que
   lo hace reconocible como enlace. */

/* --- Móvil: botones un punto más chicos y datos apilados sin puntos ------- */
@media (max-width:560px){
  .btn{font-size:13px;padding:17px 22px}
  .datos{flex-direction:column;gap:10px}
  .datos .dato+.dato::before{display:none}
}
/* En móvil la pestaña de las tarjetas de Ministerios sobra: se superpone al
   texto anterior y no aporta nada a ese ancho. */
@media (max-width:560px){
  .mcard__pestana{display:none}
  .mcard+.mcard{margin-top:24px}
}

/* --- Móvil: contador, ubicación y preguntas más compactos ----------------- */
@media (max-width:560px){
  /* Contador: las cuatro fichas en una sola fila, cifras más chicas */
  .reloj{padding:22px 16px;gap:16px}
  .reloj__dig{gap:8px;flex-wrap:nowrap;width:100%}
  .reloj__u{flex:1 1 0;min-width:0;padding:12px 6px 9px;border-top-width:5px}
  .reloj__u b{font-size:26px}
  .reloj__u i{font-size:10px;margin-top:4px}
  .reloj__grito{font-size:20px}
  .reloj__der{font-size:16px}
  /* Preguntas: título un punto menor */
  .globo h3{font-size:16px;line-height:1.6}
  .globo__a{font-size:16px;line-height:1.65;margin-top:10px}
}
/* Pasos de «Planifica tu visita»: tres columnas compactas en móvil */
@media (max-width:560px){
  .pasos{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
  .paso{grid-template-columns:1fr;gap:8px;padding:0;align-content:start}
  .paso__n{width:34px;height:34px;font-size:15px}
  .paso h4{font-size:13px;line-height:1.5}
  .paso p{font-size:12px;line-height:1.45;margin-top:2px}
}
/* Formulario en móvil: campos a dos columnas, más chicos, caja sin píldora */
@media (max-width:560px){
  .form{border-radius:var(--r-boton);padding:20px 16px;gap:12px;box-shadow:var(--sombra-dura)}
  .form h3{font-size:17px}
  .form__par{grid-template-columns:1fr 1fr;gap:10px}
  .campo{gap:5px}
  .campo label{font-size:10px}
  .campo input,.campo select{font-size:14px;padding:11px 12px;border-radius:var(--r-boton)}
  .form .btn{margin-top:2px}
  .nota{font-size:13px}
}

/* =========================================================================
   ENTRADA A LA WEB · pantalla de carga
   Al llegar, una pantalla en tinta con el isotipo LVD y una barra que se
   llena; después sube y descubre la página. Solo la PRIMERA vez de la
   sesión: el script de una línea del <head> pone html.cortina-on, y quien ya
   estuvo dando vueltas por la web no vuelve a verla.

   VA EN CSS, NO EN JAVASCRIPT, y es a propósito. Es lo primero que se ve: si
   dependiera de un guion que aún no ha cargado, un fallo o una conexión lenta
   dejarían la pantalla en negro sin manera de quitarla. Así se levanta sola
   pase lo que pase.
   ========================================================================= */
@keyframes entrar-arriba{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes carg-subir{to{transform:translateY(-101%);visibility:hidden}}
@keyframes carg-logo{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes carg-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Fuera de la primera visita ni existe: no ocupa, no tapa, no se ve. */
.cargador{display:none}

html.cortina-on .cargador{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:var(--z-alerta);
  background:var(--c-oscuro);
  pointer-events:none;
  animation:carg-subir .72s cubic-bezier(.77,0,.18,1) .92s forwards;
}
.cargador__in{display:grid;justify-items:center;gap:26px}
/* El isotipo va en blanco con un filtro en vez de con otro fichero: es el
   mismo truco del logo del pie y ahorra un SVG duplicado. */
.cargador__logo{
  width:clamp(78px,10vw,118px);height:auto;
  filter:brightness(0) invert(1);
  animation:carg-logo .62s var(--curva) both;
}
.cargador__barra{
  display:block;width:96px;height:3px;border-radius:2px;
  background:var(--c-claro-24);overflow:hidden;
}
.cargador__barra i{
  display:block;height:100%;width:100%;
  background:var(--c-vivo);transform-origin:left;
  animation:carg-barra .85s var(--curva) .12s both;
}
html.cortina-on .cab{animation:entrar-arriba .6s var(--curva) 1.15s both}
html.cortina-on .vivo{animation:entrar-arriba .6s var(--curva) 1.1s both}

@media (prefers-reduced-motion:reduce){
  html.cortina-on .cargador{display:none}
  html.cortina-on .cab,html.cortina-on .vivo{animation:none}
}