/* ===========================================================
   Corporación Valledupar 365
   Paleta muestreada del video del auditorio y del logo oficial.
   =========================================================== */

:root{
  /* superficie */
  --canvas:#EEF1F7;
  --canvas-deep:#E3E8F1;
  --panel:#FFFFFF;
  --panel-line:#D3DBE8;

  /* tinta */
  --ink:#10203D;
  --ink-2:#4A5B78;
  --ink-3:#7686A1;

  /* marca */
  --navy:#1B3A6B;
  --navy-deep:#0E2244;
  --accent:#C8202F;
  --accent-hover:#A81826;
  --accent-muted:rgba(200,32,47,.14);

  /* el velo del hero, en canal RGB para componer alfa */
  --veil:238,241,247;

  /* tipos */
  --display:"Piazzolla",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-suave:cubic-bezier(.4,0,.2,1);

  /* sombra de texto sobre video: clara, porque la tinta es oscura */
  --tshadow:0 1px 2px rgba(var(--veil),.95),0 3px 14px rgba(var(--veil),.85),0 10px 46px rgba(var(--veil),.9);

  --nav-h:68px;
  --envoltura:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,.55vw + 14.4px,18px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
/* picture es en línea por defecto, y sobre un elemento en línea no aplican
   transform ni ancho: los logos perderían su entrada si se deja así */
picture{display:block}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,dt,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

.solo-lectores{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.saltar{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
  font-weight:600;text-decoration:none;transition:top .25s var(--ease);
}
.saltar:focus-visible{top:0}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* Al saltar desde el menú, el bloque quedaba pegado al borde y el menú fijo le
   tapaba la primera línea. Este margen de scroll lo baja lo justo. */
main > section[id],
#quienes{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* El atributo hidden esconde poniendo display:none, pero cualquier regla de
   autor con display le gana. Pasó de verdad: al enviar el formulario el JS lo
   marcaba hidden y seguía viéndose, porque .forma tiene display:grid. */
[hidden]{display:none !important}

.envoltura{
  width:min(100% - 40px,var(--envoltura));
  margin-inline:auto;
}
.envoltura--angosta{width:min(100% - 40px,760px)}

/* ====================== ambiente ====================== */

.ambiente{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--canvas);
}
.ambiente__brillo{
  position:absolute;inset:-20%;
  background:
    radial-gradient(45% 40% at 22% 18%,rgba(27,58,107,.10),transparent 70%),
    radial-gradient(40% 38% at 82% 72%,rgba(200,32,47,.07),transparent 70%),
    radial-gradient(55% 45% at 55% 105%,rgba(27,58,107,.09),transparent 70%);
  animation:deriva 84s var(--ease-suave) -22s infinite alternate;
}
@keyframes deriva{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.08)}
}
.ambiente__polvo{position:absolute;inset:0;width:100%;height:100%;opacity:.5}

/* ====================== nav ====================== */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
  padding-inline:clamp(16px,3vw,32px);
  background:rgba(238,241,247,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.nav.pegado{
  background:rgba(238,241,247,.88);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--panel-line);
}
.nav__marca{
  display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
}
.nav__marca picture{display:flex;align-items:center;width:auto;flex-shrink:0}
.nav__marca img{width:auto;height:34px}
.nav__nombre{
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;
  color:var(--navy);white-space:nowrap;
}
.nav__enlaces{display:flex;gap:26px;margin-left:auto}
.nav__enlaces a{
  font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-2);
  position:relative;padding:6px 0;transition:color .25s var(--ease);
}
.nav__enlaces a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__enlaces a:hover{color:var(--ink)}
.nav__enlaces a:hover::after{transform:scaleX(1)}
.nav__cta{flex-shrink:0}

@media (max-width:900px){
  .nav__enlaces{display:none}
  .nav__cta{margin-left:auto}
}
@media (max-width:420px){
  .nav__nombre{display:none}
}

/* ====================== botones ====================== */

.btn{
  display:inline-block;
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  transition:background .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
  text-shadow:none;
}
.btn--rojo{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(200,32,47,.26);
}
.btn--rojo:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,32,47,.32)}
.btn--rojo:active{transform:translateY(0)}
.btn--grande{font-size:17px;padding:17px 34px}
.btn--ancho{width:100%;text-align:center}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn--ancho{display:flex}
}

.flotante{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  padding:15px 26px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 30px rgba(14,34,68,.28);
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .28s var(--ease);
}
.flotante.visible{opacity:1;transform:none;pointer-events:auto}
.flotante:hover{background:var(--accent-hover)}
@media (pointer:coarse){.flotante{min-height:44px;display:inline-flex;align-items:center}}

/* WhatsApp: al lado izquierdo, para no pelear con el botón de inscripción */
.flotante--wa{
  right:auto;left:clamp(16px,3vw,28px);
  display:inline-flex;align-items:center;gap:9px;
  background:#1FA855;
  box-shadow:0 10px 30px rgba(14,60,34,.3);
}
.flotante--wa:hover{background:#178A45}
.flotante--wa svg{
  width:21px;height:21px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
}
@media (max-width:520px){
  .flotante--wa span{
    position:absolute;width:1px;height:1px;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .flotante--wa{padding:15px;border-radius:999px}
}

/* ====================== tipografía de sección ====================== */

.rotulo{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.rotulo::before{
  content:"";width:26px;height:2px;background:var(--accent);flex-shrink:0;
}

.titulo-seccion{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.08;letter-spacing:-.022em;color:var(--navy);
  max-width:20ch;
  text-wrap:balance;
}

.entrada{
  font-size:clamp(17px,1.5vw,21px);color:var(--ink-2);
  max-width:58ch;margin-top:20px;
}

/* ====================== HERO ====================== */

.hero{position:relative;z-index:1}
/* 200vh, no 600: los 600 existían para darle su tramo de scroll a cada uno de
   los cuatro mensajes. Con un solo mensaje, eso serían cinco pantallas de
   scroll vacío. Los 100vh de más dejan que la marca crezca y el plano respire
   antes de que la página siga. */
.hero__pista{height:200vh;position:relative}
.hero__escena{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--navy-deep);
}

.hero__poster,
#video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.hero__poster{
  background-size:cover;background-position:50% 42%;background-repeat:no-repeat;
  transform:scale(var(--zoom,1.1));
  transition:opacity .6s var(--ease);
}
#video{
  opacity:0;
  transform:scale(var(--zoom,1.1)) translateZ(0);
  will-change:transform,opacity;
  transition:opacity .7s var(--ease);
}
.hero__escena.video-listo #video{opacity:1}

.hero__velo{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 118% 92% at 38% 44%,
    rgba(var(--veil),0) 30%,
    rgba(var(--veil),.30) 72%,
    rgba(var(--veil),.58) 100%);
}

.anillo{
  position:absolute;right:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,44px);
  width:42px;height:42px;color:var(--navy);opacity:.85;
  transform:rotate(-90deg);
  transition:opacity .5s var(--ease);
}
.anillo circle{transition:stroke-dashoffset .18s linear}
.hero__escena.video-listo .anillo{opacity:0}

/* --- bandas --- */

/* La marca acompaña todo el hero, no solo el reposo. Vive arriba y al centro,
   que es la zona más limpia del plano: a la izquierda está la pantalla del
   auditorio y a la derecha el público. El scroll la acerca un poco, para que
   el final se sienta llegada. */
/* Marca, mensaje y botón se apilan en una columna centrada de verdad, en vez
   de ir cada uno clavado a un porcentaje. Así se leen como un bloque y el
   conjunto queda centrado a cualquier alto de ventana. El relleno de abajo le
   deja aire a la señal de "baja para ver". */
.hero__centro{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(2px,.6vh,10px);
  padding:calc(var(--nav-h) + 12px) 20px 86px;
}
.hero__marca{
  position:relative;flex-shrink:0;
  width:min(50vw,336px);
  transform:scale(var(--marca-esc,.88));
  transform-origin:50% 62%;
}
@media (max-height:760px){
  .hero__marca{width:min(40vw,250px)}
  .hero__centro{padding-bottom:64px}
}

.bandas{position:relative;width:100%;pointer-events:none}

.banda{
  position:relative;
  width:min(88vw,660px);
  margin-inline:auto;
  text-align:center;
  opacity:0;
  text-shadow:var(--tshadow);
  color:var(--navy-deep);
}
/* El velo de cada banda.
   La geometría importa: la caja se estira bastante más allá del texto y el
   degradado mantiene alfa plena hasta el 64% del radio, que es donde caen las
   esquinas del bloque de texto. Medido: con la meseta más corta, las esquinas
   quedaban sin velo y el contraste se desplomaba a 1,77 contra un piso de 3,5. */
.banda::before{
  content:"";position:absolute;inset:-90% -60%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--veil),var(--alfa,.70)) 0%,
    rgba(var(--veil),var(--alfa,.70)) 64%,
    rgba(var(--veil),calc(var(--alfa,.70) * .52)) 80%,
    rgba(var(--veil),0) 100%);
}

/* banda 4: la llegada. La marca ya está arriba desde el principio, así que
   aquí solo aterrizan la frase y el botón, escalonados desde una sola --k */
.banda--4{
  --ks:clamp(0,var(--k,0) * 2,1);
  --kb:clamp(0,(var(--k,0) - .38) * 2.6,1);
}


.banda__bajada{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.9vw,54px);line-height:1.06;letter-spacing:-.025em;
  color:var(--navy-deep);max-width:17ch;margin-inline:auto;text-wrap:balance;
  margin-top:clamp(2px,1vh,12px);
  opacity:var(--ks,0);
  transform:translateY(calc((1 - var(--ks,0)) * 18px));
}
.banda__acciones{
  margin-top:clamp(16px,2.4vh,26px);pointer-events:auto;
  opacity:var(--kb,0);
  transform:translateY(calc((1 - var(--kb,0)) * 14px));
}

/* entradas */
/* --- la señal de bajar --- */
.pista-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:var(--cue,1);transition:opacity .5s var(--ease);pointer-events:none;
}
.pista-cue__linea{
  width:1px;height:34px;background:linear-gradient(var(--navy),transparent);
  animation:caer 2.6s var(--ease-suave) -.4s infinite;
}
@keyframes caer{
  0%{transform:scaleY(0);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);transform-origin:top;opacity:1}
  60%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-deep);
  background:rgba(var(--veil),.72);border:1px solid rgba(27,58,107,.18);
  border-radius:999px;padding:6px 13px;backdrop-filter:blur(10px);
}

/* --- hero estático --- */
.estatico{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 24px) 22px 44px;
  overflow:hidden;
  /* La imagen queda de respaldo: se ve mientras el video carga, y se queda si el
     teléfono no lo deja reproducir (modo de ahorro de batería, por ejemplo). */
  background:
    var(--fondo-estatico,none) center/cover no-repeat,
    var(--canvas);
}
/* El video va detrás de todo; el velo, encima de él y debajo del texto. */
.estatico__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  opacity:0;transition:opacity .8s var(--ease);
}
.estatico__video.andando{opacity:1}
.estatico__velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 50% 46%,
    rgba(var(--veil),.46) 0%,rgba(var(--veil),.80) 62%,rgba(var(--veil),.93) 100%);
}
.estatico__caja{position:relative;z-index:2;text-align:center;max-width:620px}
.estatico__logo{width:min(76%,300px);margin:0 auto 14px}
.estatico__titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,7.4vw,42px);line-height:1.06;letter-spacing:-.025em;
  color:var(--navy-deep);text-wrap:balance;
  text-shadow:var(--tshadow);
  margin-bottom:clamp(20px,3.4vh,30px);
}


/* ============ LAS CINCO COMPUERTAS DEL HERO ESTÁTICO ============
   Estas cinco consultas son idénticas carácter por carácter a las
   del arreglo GATES en assets/js/hero.js. Si una cambia aquí,
   cambia allá.                                                     */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero__pista{height:auto}
  .hero__escena{position:static;height:auto;min-height:100svh;background:var(--canvas)}
  .hero__poster,#video,.hero__velo,.hero__centro,.anillo,.pista-cue{display:none}
  .estatico{position:relative;display:flex;min-height:100svh}
}

/* ventanas bajitas de escritorio: se queda el scrub, se van los adornos */
@media (max-height:560px){
  .pista-cue{display:none}
}

/* ====================== S1 · HAZAÑAS ====================== */

.hazanas{position:relative;z-index:1;padding:clamp(80px,11vw,150px) 0 0}
/* Con el collage al 86% el titular y la bajada quedaban encima de una foto
   llena de detalle. Este velo local les devuelve el papel debajo y se
   desvanece antes de llegar a los bordes, así la foto sigue viva alrededor. */
.hazanas__cabecera{position:relative}
/* Sin el recuadro de antes, el texto cae directo sobre la foto y donde cruza el
   monumento oscuro se queda en 1.34:1. En vez de devolver el recuadro, cada
   letra lleva su propio halo claro: no se ve como caja, pero el texto se lee
   sobre cualquier parte de la imagen. */
.hazanas__fondo{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:url("../img/collage-valledupar.jpg") center/cover no-repeat;
  background-image:image-set(url("../img/collage-valledupar.webp") type("image/webp"),
                             url("../img/collage-valledupar.jpg") type("image/jpeg"));
  opacity:.86;
  /* La sección es casi cuadrada y la foto es un panorama muy ancho, así que
     `cover` la estiraba 2.3x y se veía blanda. Anclada a la ventana, el
     navegador la dibuja del tamaño de la pantalla y no de la sección: queda
     casi 1:1 con el archivo, y de paso la foto se queda quieta mientras las
     fichas pasan por encima. */
  background-attachment:fixed;
  /* Detrás del titular la foto se deja ver, pero muy tenue (un cuarto de su
     fuerza), y toma cuerpo entero donde empiezan las fichas. No hay recuadro:
     lo que cambia es cuánta imagen pasa. Medido: el título queda en 6.31:1 y la
     bajada en 8.28:1, por encima de los mínimos de 3.0 y 4.5. */
  mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.25) 34%,#000 52%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.25) 34%,#000 52%,#000 82%,transparent 100%);
}
/* En el teléfono la foto sigue cubriendo la sección entera: `fixed` es poco
   fiable en iOS, y ponerle techo de alto dejaba media sección en blanco. Lo
   que sí cambia es que el archivo del móvil ahora tiene la resolución completa
   del original (1600 de ancho, no 1200), así que se estira menos. */
@media (max-width:820px){
  .hazanas__fondo{
    background-attachment:scroll;
    background-image:url("../img/collage-movil.jpg");
    background-image:image-set(url("../img/collage-movil.webp") type("image/webp"),
                               url("../img/collage-movil.jpg") type("image/jpeg"));
  }
}
/* un velo del color del papel para que las fichas blancas sigan legibles
   encima del collage ahora que se ve mucho más */
.hazanas__fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(var(--veil),.42) 0%,
    rgba(var(--veil),.14) 32%,
    rgba(var(--veil),.14) 68%,
    rgba(var(--veil),.42) 100%);
}

/* el texto que antes iba en su propia sección, ahora como bajada del bloque */
.hazanas__bajada{
  margin-top:18px;max-width:56ch;
  font-size:clamp(15px,1.35vw,17.5px);line-height:1.55;
  /* tinta principal, no la secundaria: sobre el collage la secundaria medía
     3,46 a 1 y el texto de cuerpo necesita 4,5 */
  color:var(--ink);
}
.hazanas__bajada em{font-style:normal;font-weight:600;color:var(--accent)}

.fichas{
  width:min(100% - 36px,720px);margin:clamp(26px,3.4vw,40px) auto 0;
}
/* Esta franja vacía es la pista por la que el montón ya armado se queda quieto
   un momento antes de irse. Tiene que ser CONTENIDO y no padding: el rectángulo
   que limita a una ficha pegada es la caja de contenido del contenedor, así que
   un padding-bottom no da ni un píxel de recorrido. Con padding, la cuarta
   ficha llegaba justo cuando el contenedor se acababa y las cuatro se iban
   juntas sin verse apiladas nunca. */
.fichas::after{content:"";display:block;height:clamp(210px,30vh,330px)}
/* El apilado exige que la que se pegue sea la FICHA, no una caja adentro: si
   se pega la caja, cada ficha se despega apenas termina su propio tramo y al
   final solo quedan dos a la vista. Pegando la ficha dentro del contenedor
   alto, todas se quedan hasta el final y el montón se ve de verdad.
   El tramo de scroll entre una y otra lo da el margen de abajo. */
.ficha{
  position:sticky;
  top:calc(var(--nav-h) + 14px + var(--i) * 13px);
  margin-bottom:6.5vh;
}
.ficha:last-child{margin-bottom:0}
/* El apilado se ve porque cada ficha que queda debajo se encoge y se apaga un
   poco. El valor --apilado lo escribe el JS desde la posición de la siguiente
   ficha, así que el efecto funciona igual bajando que subiendo. */
.ficha__caja{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:14px;
  padding:clamp(15px,1.8vw,20px) clamp(18px,2.2vw,24px);
  box-shadow:0 12px 32px -16px rgba(14,34,68,.3);
  position:relative;
  transform-origin:50% 0;
  transform:scale(calc(1 - .04 * var(--apilado,0)));
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease);
}
/* La ficha que queda debajo se apaga con un velo ENCIMA, no bajando su
   opacidad: bajarla la vuelve translúcida y se leen los títulos de las de
   atrás a través de la de adelante. */
.ficha__caja::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgb(var(--veil));
  opacity:calc(.5 * var(--apilado,0));
}
.ficha__caja:hover{box-shadow:0 18px 44px -16px rgba(14,34,68,.36);border-color:#BCC8DC}

.ficha__fila{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px,1.2vw,16px);
}
.ficha__izq{display:flex;align-items:baseline;gap:10px;min-width:0}
.ficha__num{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--accent);
  flex-shrink:0;
}
.ficha__titulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.25;letter-spacing:-.012em;
  white-space:nowrap;
  color:var(--navy);
}
.ficha__btn{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--ink-2);
  padding:6px 11px 6px 13px;border-radius:999px;
  border:1px solid var(--panel-line);white-space:nowrap;
  transition:color .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}

/* En pantallas angostas el botón se acomoda debajo del título */
@media (max-width:640px){
  .ficha__fila{flex-direction:column;align-items:flex-start;gap:12px}
  .ficha__izq{align-items:baseline}
  /* en el teléfono no cabe en un renglón: ahí sí se deja envolver */
  .ficha__titulo{font-size:16px;white-space:normal}
  .ficha{margin-bottom:5.5vh}
}
.ficha__btn:hover{color:var(--accent);border-color:var(--accent-muted);background:rgba(200,32,47,.05)}
.ficha__btn-cruz{position:relative;width:10px;height:10px;flex-shrink:0}
.ficha__btn-cruz::before,.ficha__btn-cruz::after{
  content:"";position:absolute;inset:0;margin:auto;background:currentColor;border-radius:2px;
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.ficha__btn-cruz::before{width:10px;height:1.5px}
.ficha__btn-cruz::after{width:1.5px;height:10px}
.ficha__btn[aria-expanded="true"] .ficha__btn-cruz::after{transform:scaleY(0);opacity:0}
.ficha__panel{
  overflow:hidden;
  display:grid;grid-template-rows:0fr;
  opacity:0;margin-top:0;visibility:hidden;
  transition:grid-template-rows .45s var(--ease),margin-top .45s var(--ease),
             opacity .35s var(--ease),visibility 0s linear .45s;
}
.ficha__panel > p{overflow:hidden;min-height:0}
.ficha__panel.abierto{
  grid-template-rows:1fr;opacity:1;margin-top:16px;visibility:visible;
  transition:grid-template-rows .45s var(--ease),margin-top .45s var(--ease),
             opacity .35s var(--ease),visibility 0s linear 0s;
}
.ficha__panel p{color:var(--ink-2);font-size:clamp(15px,1.4vw,17px);max-width:56ch}

@media (pointer:coarse){.ficha__btn{min-height:44px}}

/* ====================== S2 · POR QUÉ ====================== */

.sierra{width:100%;height:clamp(56px,7vw,96px);margin-top:clamp(30px,4vw,54px);display:block}
.sierra__linea{
  fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  opacity:.5;
  stroke-dasharray:var(--largo,1600);
  stroke-dashoffset:var(--largo,1600);
  transition:stroke-dashoffset 2.1s var(--ease-suave);
}
.sierra__linea.dibujada{stroke-dashoffset:0}

/* ====================== S4 · QUÉ GANA ====================== */

.gana{position:relative;z-index:1;padding:clamp(70px,10vw,130px) 0;background:var(--navy)}
/* Sobre el azul, la cabecera de la sección va en claro. Las tarjetas se quedan
   blancas: el contraste contra el azul las hace resaltar más que antes. */
.gana .titulo-seccion{color:#fff}
.gana .rotulo{color:#F2B8BE}
.gana .rotulo::before{background:#F2B8BE}

.tarjetas{
  display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(38px,5vw,58px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
/* Cinco tarjetas nunca caen parejas en una rejilla automática: queda una
   huérfana abajo y se lee como un error. Tres arriba y dos anchas abajo. */
@media (min-width:900px){
  .tarjetas{grid-template-columns:repeat(6,1fr)}
  .tarjeta:nth-child(-n+3){grid-column:span 2}
  .tarjeta:nth-child(n+4){grid-column:span 3}
}
.tarjeta{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  padding:clamp(22px,2.6vw,30px);
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.tarjetas.dentro .tarjeta{opacity:1;transform:none}
.tarjetas.dentro .tarjeta:nth-child(1){transition-delay:0s}
.tarjetas.dentro .tarjeta:nth-child(2){transition-delay:.09s}
.tarjetas.dentro .tarjeta:nth-child(3){transition-delay:.18s}
.tarjetas.dentro .tarjeta:nth-child(4){transition-delay:.27s}
.tarjetas.dentro .tarjeta:nth-child(5){transition-delay:.36s}
/* retirar los retrasos apenas termina la entrada, o los hovers quedan lentos para siempre */
.tarjetas.asentada .tarjeta:nth-child(1),
.tarjetas.asentada .tarjeta:nth-child(2),
.tarjetas.asentada .tarjeta:nth-child(3),
.tarjetas.asentada .tarjeta:nth-child(4),
.tarjetas.asentada .tarjeta:nth-child(5){transition-delay:0s}
.tarjeta:hover{box-shadow:0 18px 44px -20px rgba(14,34,68,.34);border-color:#BCC8DC}
.tarjeta__icono{display:block;width:40px;height:40px;margin-bottom:16px;color:var(--accent)}
.tarjeta__icono svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tarjeta h3{
  font-family:var(--display);font-weight:700;font-size:clamp(18px,1.9vw,22px);
  color:var(--navy);letter-spacing:-.015em;line-height:1.18;
}
.tarjeta p{margin-top:9px;font-size:15px;color:var(--ink-2)}

/* ====================== S5 · GALERÍA ====================== */

.galeria{
  position:relative;z-index:1;
  padding:clamp(70px,10vw,130px) 0;
  background:var(--canvas-deep);
}

.carrusel{
  position:relative;margin-top:clamp(38px,5vw,58px);
  width:min(100% - 40px,760px);margin-inline:auto;
}
.carrusel__ventana{
  overflow:hidden;border-radius:18px;
  box-shadow:0 22px 60px -30px rgba(14,34,68,.5);
  background:var(--navy-deep);
}
.carrusel__pista{
  display:flex;
  transition:transform .78s var(--ease);
}
.diapo{position:relative;min-width:100%;flex:0 0 100%}
.diapo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.diapo__pie{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px clamp(16px,2.4vw,26px) clamp(14px,2vw,20px);
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.6vw,19px);
  color:#fff;letter-spacing:-.015em;
  background:linear-gradient(transparent,rgba(14,34,68,.82));
}
.carrusel__flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--navy);
  border:1px solid var(--panel-line);
  box-shadow:0 8px 22px -8px rgba(14,34,68,.4);
  transition:background .28s var(--ease),transform .28s var(--ease);
}
.carrusel__flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.carrusel__flecha:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.carrusel__flecha--izq{left:clamp(-8px,1vw,16px)}
.carrusel__flecha--der{right:clamp(-8px,1vw,16px)}
@media (max-width:640px){
  .carrusel__flecha{width:42px;height:42px}
  .carrusel__flecha--izq{left:8px}
  .carrusel__flecha--der{right:8px}
}

.carrusel__puntos{display:flex;gap:9px;justify-content:center;margin-top:20px}
/* Sobre la banda gris el punto gris claro de antes se perdía por completo
   (1.13:1). Un control tiene que verse a 3:1 como mínimo. */
.carrusel__punto{
  width:28px;height:4px;border-radius:999px;background:var(--ink-3);
  transition:background .3s var(--ease),width .3s var(--ease);
  padding:0;
}
.carrusel__punto[aria-selected="true"]{background:var(--accent);width:44px}
@media (pointer:coarse){
  .carrusel__punto{height:4px;position:relative}
  .carrusel__punto::after{content:"";position:absolute;inset:-20px -8px}
  /* las flechas se quedaban en 42, dos píxeles por debajo del mínimo cómodo */
  .carrusel__flecha{width:44px;height:44px}
}

/* ====================== S6 · INSCRIPCIÓN ====================== */

/* Dos bandas seguidas: la gris de la galería y esta roja. Ninguna es tarjeta,
   las dos van de borde a borde. */
.inscripcion{
  position:relative;z-index:1;
  padding:clamp(70px,10vw,130px) 0;
  background:var(--accent);
}
.inscripcion__reja{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:940px){
  .inscripcion__reja{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
}


/* ---- el logo vivo: el giro 3D de la marca ----
   WebM con canal alfa de verdad (VP9 yuva420p), 296 KB. Se descartó el camino
   del MP4 sobre blanco con mezcla multiply: encima del video del auditorio
   siempre dejaba un rectángulo, porque la mezcla no ve el fondo de la página
   cuando el elemento está dentro de un contexto aislado, y cualquier máscara
   que lo tapara terminaba mordiendo las esquinas del logo.

   Si un navegador no respeta la transparencia, el JS lo detecta dibujando un
   cuadro en un lienzo y mirando el alfa de la esquina; en ese caso se queda el
   logo fijo y no se nota nada. */
.logo-vivo{position:relative;aspect-ratio:360/326}

.logo-vivo__video,
.logo-vivo__fijo{
  position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .7s var(--ease);
}
.logo-vivo__video{object-fit:contain;opacity:0}
.logo-vivo__fijo{display:grid;place-items:center;opacity:1}
.logo-vivo__fijo img{width:100%;height:auto}
.logo-vivo.andando .logo-vivo__video{opacity:1}
.logo-vivo.andando .logo-vivo__fijo{opacity:0}

/* Quiénes somos y el formulario van juntos DENTRO de un mismo cuadro rojo,
   separado de la galería. Cada color de texto sobre ese rojo está calculado
   para pasar el contraste mínimo; no son tonos elegidos a ojo. */
.quienes .rotulo{color:#FFE3E5}            /* 4.69:1 */
.quienes .rotulo::before{background:#FFE3E5}
.quienes .titulo-seccion{color:#fff}       /* 5.67:1 */
.quienes .entrada{color:#FFF0F1}           /* 5.13:1 */

/* ====================== el fundador ======================
   Va dentro de la tarjeta roja, así que todo el texto es claro. Los tonos son
   los ya medidos sobre #C8202F: blanco 5.67:1, #FFF0F1 5.13:1, #FFE3E5 4.69:1.
   Dentro del recuadro con velo del 10% el fondo se aclara, y ahí el blanco
   queda en 4.96:1, que sigue pasando. */
.fundador{
  margin-top:clamp(34px,4vw,50px);
  padding:clamp(20px,2.6vw,30px);
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
  background:rgba(255,255,255,.10);
}
.fundador__rotulo{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#FFE3E5;margin-bottom:16px;
}
.fundador__reja{
  display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:620px){
  /* Es un plano de cuerpo entero en tarima, no un retrato de cara: necesita
     más ancho para que se le reconozca. */
  .fundador__reja{grid-template-columns:clamp(200px,34%,270px) minmax(0,1fr)}
}
.fundador__foto{display:block}
.fundador__foto img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;
  border-radius:14px;display:block;
  background:rgba(255,255,255,.14);
  box-shadow:0 16px 40px -22px rgba(90,10,18,.7);
}
.fundador__nombre{
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:-.02em;color:#fff;
}
.fundador__lema{
  margin-top:8px;font-size:clamp(15px,1.5vw,17px);line-height:1.45;
  color:#FFF0F1;font-weight:600;
}
.fundador__parrafo{margin-top:10px;font-size:15px;line-height:1.55;color:#fff}
.fundador__sub{
  margin-top:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#FFE3E5;
}
.fundador__valores{margin-top:10px;display:grid;gap:6px}
.fundador__valores li{
  position:relative;padding-left:18px;font-size:15px;line-height:1.5;color:#fff;
}
.fundador__valores li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:2px;border-radius:2px;background:#FFE3E5;
}
.fundador__cierre{
  margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.28);
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.7vw,19px);line-height:1.35;color:#fff;
}

.forma-caja{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;
  padding:clamp(24px,3vw,36px);
  box-shadow:0 24px 60px -32px rgba(14,34,68,.42);
}

.forma__titulo{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.3vw,27px);
  color:var(--navy);letter-spacing:-.02em;line-height:1.15;
}
.forma__intro{margin-top:10px;font-size:15px;color:var(--ink-2)}
.forma{margin-top:24px;display:grid;gap:17px}
.campo{display:grid;gap:6px}
.campo--par{grid-template-columns:1fr 1fr;gap:14px}
.campo--par > div{display:grid;gap:6px}
@media (max-width:460px){.campo--par{grid-template-columns:1fr}}

.campo label,.campo--par label{
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.campo input,.campo--par input{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border-radius:11px;
  border:1.5px solid #C2CDDF;background:#FBFCFE;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.campo input:hover,.campo--par input:hover{border-color:#A9B8D0}
.campo input:focus,.campo--par input:focus{
  outline:none;border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 4px rgba(27,58,107,.13);
}
.campo input:focus-visible,.campo--par input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.campo input[aria-invalid="true"],.campo--par input[aria-invalid="true"]{border-color:var(--accent)}
.campo__ayuda{font-size:12.5px;color:var(--ink-3)}
.campo__error{font-size:13px;color:var(--accent);font-weight:600;min-height:0}
.campo__error:empty{display:none}

.casilla{display:flex;gap:11px;align-items:flex-start}
.casilla input{
  width:20px;height:20px;margin:2px 0 0;flex-shrink:0;
  accent-color:var(--accent);cursor:pointer;
}
.casilla label{font-size:13.5px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.casilla a{color:var(--navy);font-weight:600;text-underline-offset:3px}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.forma__aviso{font-size:14px;font-weight:600;color:var(--accent);text-align:center}
.forma__aviso:empty{display:none}

#enviar[disabled]{opacity:.6;cursor:progress}

.forma-gracias{text-align:center;padding:clamp(26px,4vw,44px) 8px}
.forma-gracias__marca{display:block;width:62px;height:62px;margin:0 auto 20px;color:var(--accent)}
.forma-gracias__marca svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.forma-gracias__texto{
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,24px);
  color:var(--navy);letter-spacing:-.015em;text-wrap:balance;
}

/* ====================== PIE ====================== */

.pie{position:relative;z-index:1;background:var(--navy-deep);color:#C8D4E8;padding-bottom:44px}
/* En el teléfono el botón de WhatsApp flota sobre la esquina de abajo: el pie
   necesita ese margen extra para que nunca tape la letra pequeña. */
@media (max-width:640px){.pie{padding-bottom:108px}}
.pie__tira{width:100%;height:22px;display:block}
/* El color va DENTRO del patrón, no como atributo fill en el marcado: una regla
   de CSS le gana siempre a un atributo de presentación. Sin esta regla los
   cuadritos se pintan negros. */
.pie__tira .cel--pie{fill:rgba(200,214,238,.34)}
.pie__reja{padding-top:clamp(40px,5vw,62px);display:grid;gap:34px}
@media (min-width:860px){
  .pie__reja{grid-template-columns:1.1fr 1fr auto;align-items:start}
  .pie__fuentes{grid-column:1 / -1}
}
.pie__marca img{width:min(60%,190px);height:auto;filter:brightness(0) invert(1);opacity:.95}
.pie__legal{margin-top:16px;font-family:var(--display);font-weight:700;font-size:17px;color:#fff;line-height:1.4}
.pie__legal span{font-family:var(--body);font-weight:400;font-size:14px;color:#93A6C6}
.pie__enlaces{display:grid;gap:11px}
.pie__enlaces a{
  font-size:15px;text-decoration:none;color:#C8D4E8;width:fit-content;
  transition:color .25s var(--ease);
}
/* Con el dedo, un enlace de 24 px de alto se falla. El relleno vertical sube
   el área de toque sin separar visualmente la lista. */
@media (pointer:coarse){
  .pie__enlaces{gap:0}
  .pie__enlaces a{padding:10px 0}
  .nav__marca{min-height:44px;display:flex;align-items:center}
}
.pie__enlaces a:hover{color:#fff}
.pie__redes-nota{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7E92B4;margin-bottom:12px}
.pie__redes ul{display:flex;gap:11px}
.red{
  display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  border:1px solid rgba(200,214,238,.24);color:#93A6C6;
  text-decoration:none;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
a.red:hover,a.red:focus-visible{color:#fff;border-color:rgba(200,214,238,.55);background:rgba(200,214,238,.08)}
.red svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pie__fuentes{font-size:12.5px;color:#7E92B4;border-top:1px solid rgba(200,214,238,.14);padding-top:22px;max-width:74ch}

/* ====================== entradas al hacer scroll ====================== */

.revelar{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.revelar.dentro{opacity:1;transform:none}

/* ====================== movimiento reducido ====================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
  }
  .revelar{opacity:1;transform:none}
  .tarjeta{opacity:1;transform:none}
  .sierra__linea{stroke-dashoffset:0}
  .ambiente__polvo{display:none}
  /* el logo gira solo: con movimiento reducido se queda quieto */
  .logo-vivo__video{display:none}
  .logo-vivo.andando .logo-vivo__fijo{opacity:1}
  .flotante{opacity:1;transform:none;pointer-events:auto}
  /* volver a poner los transformes de posición que no son animación */
  .banda--4{transform:translate(-50%,-50%)}
  .carrusel__flecha{transform:translateY(-50%)}
  .pista-cue{transform:translateX(-50%)}
}

/* pausar todo lo que se anima cuando la pestaña está oculta */
body.pausada *,
body.pausada *::before,
body.pausada *::after{animation-play-state:paused!important}