/* =========================================================
   CÓNCLAVE
   Laboratorio iberoamericano de proyectos audiovisuales
   de género · Argentina

   Sistema construido sobre el manual de identidad v0.1:
   una sola familia tipográfica, fondo único, tres colores
   de marca y uno por programa.
   ========================================================= */

/* ---------- Tipografía de los nombres propios ----------
   Jim Nightshade (Astigmatic, SIL OFL) — autoalojada.

   Regla del sistema: la caligráfica escribe los NOMBRES (Cónclave, Antesala,
   Cámara, Acta, Fumata Blanca, La Llave, Tutela, Votos Particulares).
   Garamond escribe el DOCUMENTO (títulos de sección, texto, rótulos, datos).
   Así el nombre carga el misterio y la estructura sostiene la seriedad, que
   son los dos registros que el manual le pide a la marca.

   Es una caligráfica: pide tracking corto. Con el tracking amplio del sistema
   pierde cohesión, así que estos elementos llevan el suyo propio. */
@font-face{
  font-family:"Jim Nightshade";
  src:url("../fuentes/jim-nightshade.woff2") format("woff2"),
      url("../fuentes/jim-nightshade.ttf") format("truetype");
  font-weight:400; font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Paleta de marca */
  --sala:      #0A0907;   /* fondo único */
  --papel:     #F6F1E8;   /* texto y fondo inverso */
  --laton:     #C9A06A;   /* acento y detalle — nunca fondo de superficies grandes */

  /* Color por programa: solo filetes, viñetas y titulares de programa */
  --antesala:  #C9873F;
  --camara:    #8A8C55;
  --acta:      #8B82A8;

  /* Derivados */
  --texto:     rgba(246,241,232,.76);
  --tenue:     rgba(246,241,232,.48);
  --filete:    rgba(246,241,232,.13);
  --filete-laton: rgba(201,160,106,.30);
  --superficie:   rgba(246,241,232,.022);
  --superficie-2: rgba(246,241,232,.045);

  --serif: "EB Garamond", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --titulo: "Jim Nightshade", "EB Garamond", Garamond, serif;

  --maxw: 1180px;
  --gut: clamp(22px, 5vw, 68px);
  --nav-h: 74px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--sala);
  color:var(--texto);
  font-family:var(--serif);
  font-size:clamp(17px,1.15vw,20px);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.1; color:var(--papel); }
p{ margin:0 0 1.05em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:rgba(201,160,106,.3); color:var(--papel); }

/* ---------- Escalas del manual ---------- */

/* Volanta · caja alta, 12 px, tracking 0.3em */
.volanta{
  font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--laton); line-height:1.9;
}
.volanta--tenue{ color:var(--tenue); }

/* Titular · caja alta, 400, tracking 0.06em.
   Va en Garamond a propósito: los títulos de sección son estructura del
   documento. La caligráfica queda reservada a los nombres propios. */
.titular{
  font-size:clamp(2.1rem,5.4vw,4rem);
  letter-spacing:.06em; text-transform:uppercase; line-height:1.02;
  color:var(--papel); text-wrap:balance;
}

/* Voz · itálica */
.voz{
  font-style:italic; color:var(--laton);
  font-size:clamp(1.15rem,2.1vw,1.55rem); line-height:1.45;
}

.dato{ color:var(--papel); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding:clamp(78px,10vw,142px) 0; }
.section + .section{ border-top:1px solid var(--filete); }

/* ---------- La luz que sigue al cursor ----------
   Va por encima del fondo pero por debajo del contenido: ilumina la sala
   sin lavar la tipografía. La activa el JS solo en punteros finos. */
.luz{
  position:fixed; top:0; left:0; z-index:1;
  width:560px; height:560px; margin:-280px 0 0 -280px;
  pointer-events:none; opacity:0;
  background:radial-gradient(circle,
    rgba(201,160,106,.115) 0%,
    rgba(201,160,106,.050) 34%,
    rgba(201,160,106,.016) 54%,
    transparent 70%);
  transition:opacity .7s var(--ease);
  will-change:transform;
}
.luz.encendida{ opacity:1; }

/* Viñeta: da profundidad al fondo plano. Gradiente estático, sin coste. */
.vineta{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 32%, transparent 40%, rgba(0,0,0,.45) 100%);
}

/* El contenido en flujo normal se apoya sobre la luz, nunca debajo.
   Los elementos fijos (nav 900, cajón 890, avance 950, subir 880) ya
   están por encima: no hay que tocarles el z-index. */
main, .pie{ position:relative; z-index:2; }

/* Filete-rombo-filete: el ornamento del lockup */
.rombo{ display:flex; align-items:center; gap:12px; color:var(--laton); }
.rombo::before,.rombo::after{ content:""; height:1px; background:currentColor; opacity:.55; }
.rombo::before{ width:44px; }
.rombo::after{ width:44px; }
.rombo i{ width:5px; height:5px; background:currentColor; transform:rotate(45deg); flex:none; }
.rombo--centro{ justify-content:center; }
.rombo--centro::before,.rombo--centro::after{ flex:1; max-width:120px; }

/* ---------- Preloader: la puerta que se traba desde adentro ---------- */
.puerta{
  position:fixed; inset:0; z-index:10000; background:var(--sala);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.puerta.abierta{ opacity:0; visibility:hidden; }
.puerta__marca{
  font-family:var(--titulo);
  font-size:clamp(1.7rem,5vw,2.7rem); text-transform:uppercase;
  color:var(--papel); letter-spacing:.16em; margin-left:.16em;
}
.puerta__filete{
  width:min(200px,44vw); height:1px; margin:20px auto 0;
  background:var(--filete-laton); position:relative; overflow:hidden;
}
.puerta__filete::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,var(--laton),transparent);
  animation:barrido 1.3s var(--ease) infinite;
}
@keyframes barrido{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ---------- Navegación ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:height .4s var(--ease), background .4s var(--ease),
             border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.fija{
  height:58px; background:rgba(10,9,7,.9);
  backdrop-filter:blur(14px); border-bottom-color:var(--filete);
}
.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:26px;
}
.marca{
  font-family:var(--titulo);
  font-size:1.18rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--papel); white-space:nowrap; margin-left:.1em;
  transition:letter-spacing .6s var(--ease);
}
.marca:hover{ letter-spacing:.16em; }

.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); }
.nav__link{
  position:relative; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tenue); padding:6px 0; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--laton); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover,.nav__link.activo{ color:var(--laton); }
.nav__link:hover::after,.nav__link.activo::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--filete-laton); color:var(--laton);
  padding:10px 22px; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__cta:hover{ background:var(--laton); color:var(--sala); border-color:var(--laton); }

.tirador{ display:none; width:38px; height:38px; position:relative; }
.tirador span{
  position:absolute; left:9px; width:20px; height:1px; background:var(--papel);
  transition:transform .4s var(--ease);
}
.tirador span:nth-child(1){ top:15px; }
.tirador span:nth-child(2){ top:22px; }
.tirador.abierto span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.tirador.abierto span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.cajon{
  position:fixed; inset:0; z-index:890; background:rgba(10,9,7,.98);
  backdrop-filter:blur(10px); display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.cajon.abierto{ opacity:1; visibility:visible; }
.cajon ul{ display:grid; gap:4px; text-align:center; }
.cajon a{
  display:block; padding:9px 0; color:var(--papel);
  font-size:clamp(1.4rem,5.4vw,2rem); text-transform:uppercase; letter-spacing:.1em;
  opacity:0; transform:translateY(12px);
}
.cajon.abierto a{ animation:cajonIn .5s var(--ease-out) forwards; }
@keyframes cajonIn{ to{ opacity:1; transform:none; } }
.cajon__num{
  display:block; font-size:.6rem; letter-spacing:.34em; color:var(--laton);
  margin-bottom:2px;
}

/* ---------- I · Portada ---------- */
.portada{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 60px) 0 96px;
}
/* En em, no en ch: el tracking de 0.3em vuelve inservible la medida ch */
.portada__volanta{ max-width:36em; }
.portada__marca{
  font-family:var(--titulo);
  font-size:clamp(3.1rem,13.5vw,9.8rem);
  text-transform:uppercase; letter-spacing:.035em; line-height:1;
  color:var(--papel); margin:clamp(22px,3vw,34px) 0 0;
  display:flex; flex-wrap:nowrap; white-space:nowrap;
}
.portada__marca span{
  display:inline-block; opacity:0; transform:translateY(.34em);
}
.listo .portada__marca span{ animation:letraIn .85s var(--ease-out) forwards; }
@keyframes letraIn{ to{ opacity:1; transform:none; } }

.portada__sello{ margin-top:clamp(20px,2.6vw,30px); }

/* El sello se arma después de la marca: primero el rombo, después los filetes
   salen hacia los lados. */
.js .portada__sello i{
  transform:rotate(45deg) scale(0);
  transition:transform .6s var(--ease-out) 1.25s;
}
.js .portada__sello::before,
.js .portada__sello::after{
  transform:scaleX(0);
  transition:transform .85s var(--ease-out) 1.5s;
}
.js .portada__sello::before{ transform-origin:right; }
.js .portada__sello::after{ transform-origin:left; }
.js.listo .portada__sello i{ transform:rotate(45deg) scale(1); }
.js.listo .portada__sello::before,
.js.listo .portada__sello::after{ transform:scaleX(1); }

/* La sede aparece al final, cuando el sello ya está trazado. */
.js .portada__sede{ opacity:0; transition:opacity .9s var(--ease) 1.85s; }
.js.listo .portada__sede{ opacity:1; }
.portada__sede{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--tenue); margin-left:.34em;
}
.portada__claim{ margin-top:clamp(38px,5vw,58px); max-width:24ch; }
.portada__bajada{
  margin-top:clamp(26px,3vw,34px); font-size:.78rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--tenue);
}
.portada__pie{
  position:absolute; left:var(--gut); bottom:30px;
  display:flex; align-items:center; gap:14px;
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--tenue);
}
.portada__pie i{
  display:block; width:46px; height:1px; background:var(--filete-laton);
  position:relative; overflow:hidden;
}
.portada__pie i::after{
  content:""; position:absolute; inset:0; background:var(--laton);
  animation:barrido 2.2s var(--ease) infinite;
}

/* ---------- Encabezado de sección ---------- */
.rotulo{ margin-bottom:clamp(42px,5.5vw,68px); }
.rotulo__linea{ display:flex; align-items:baseline; gap:clamp(16px,2.4vw,28px); }
.rotulo__num{
  font-size:.72rem; letter-spacing:.3em; color:var(--laton);
  flex:none; padding-top:.4em;
}
.rotulo__filete{ height:1px; background:var(--filete); margin:20px 0 22px; }
.rotulo__bajada{ max-width:62ch; font-size:1.03em; }

/* ---------- Revelado ----------
   El estado oculto se aplica SOLO si el script arrancó (.js en <html>).
   Sin JS, o si main.js no carga, el contenido se ve igual: nunca queda
   una página en blanco por culpa de la animación. */
.js [data-rev]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-rev].vista{ opacity:1; transform:none; }
.js [data-rev="quieto"]{ transform:none; }

/* Los títulos entran barridos, como si se escribieran de una pasada.
   El inset negativo deja respirar los remates de la caligráfica. */
.js [data-rev] .titular{
  clip-path:inset(-.32em 100% -.32em -.32em);
  transition:clip-path 1.15s var(--ease-out) .18s;
}
.js [data-rev].vista .titular{ clip-path:inset(-.32em -.32em -.32em -.32em); }

/* Los filetes se dibujan de izquierda a derecha. */
.js [data-rev] .rotulo__filete,
.js [data-rev] .programa__filete,
.js [data-rev] .premio__filete,
.js [data-rev] .instancia__filete{
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-out) .32s;
}
.js [data-rev].vista .rotulo__filete,
.js [data-rev].vista .programa__filete,
.js [data-rev].vista .premio__filete,
.js [data-rev].vista .instancia__filete{ transform:scaleX(1); }

/* ---------- II · El nombre ---------- */
.nombre{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(34px,6vw,84px); align-items:start; }
.nombre__cuerpo p{ max-width:54ch; }
.nombre__etim{ font-size:1.12em; color:var(--papel); }
.nombre__aparte{ display:grid; gap:clamp(26px,3vw,36px); }
.nombre__bloque{ border-left:1px solid var(--filete-laton); padding-left:clamp(18px,2vw,26px); }
.nombre__bloque .volanta{ display:block; margin-bottom:10px; }
.nombre__bloque p{ margin:0; color:var(--papel); font-size:1.05em; line-height:1.5; }
.nombre__lista{ display:grid; gap:9px; }
.nombre__lista li{ color:var(--papel); font-size:1.02em; line-height:1.45; }

/* ---------- III · Los programas ---------- */
.programas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,26px); }
.programa{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--filete); border-top:2px solid transparent;
  background:var(--superficie);
  padding:clamp(26px,2.6vw,34px) clamp(20px,2.2vw,28px) clamp(24px,2.4vw,30px);
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease-out);
}
/* El filete de color va en un pseudo-elemento para poder dibujarlo. */
.programa::before{
  content:""; position:absolute; top:-2px; left:-1px; right:-1px; height:2px;
  background:var(--c); transform-origin:left;
}
.js .programa::before{
  transform:scaleX(0);
  transition:transform 1.1s var(--ease-out) .22s;
}
.js .programa.vista::before{ transform:scaleX(1); }
.programa:hover{
  background:var(--superficie-2); transform:translateY(-5px);
  border-inline-color:color-mix(in srgb, var(--c) 40%, transparent);
  border-bottom-color:color-mix(in srgb, var(--c) 40%, transparent);
}
.programa__nombre{
  font-family:var(--titulo);
  font-size:clamp(1.75rem,3vw,2.35rem); text-transform:uppercase;
  letter-spacing:.02em; color:var(--c); line-height:1.05;
}
.programa__modo{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--tenue); margin-top:12px;
}
.programa__voz{
  font-style:italic; color:var(--laton); font-size:1.05em;
  margin:20px 0 0; line-height:1.4;
}
.programa__filete{ height:1px; background:var(--filete); margin:22px 0; }
.programa__lista{ display:grid; gap:10px; }
.programa__lista li{ position:relative; padding-left:20px; line-height:1.45; }
.programa__lista li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; background:var(--c); transform:rotate(45deg);
}
.programa__nota{
  margin-top:20px; padding:13px 15px; font-size:.92em; line-height:1.45;
  border:1px solid color-mix(in srgb, var(--c) 26%, transparent);
  color:var(--papel);
}
.programa__monto{
  margin-top:auto; padding-top:26px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px 14px; flex-wrap:wrap;
}
.programa__monto .volanta{ color:var(--tenue); }
.programa__monto b{
  font-weight:400; font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--c); letter-spacing:.02em; white-space:nowrap;
}

/* ---------- IV · Los premios ---------- */
.premios{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--filete); border:1px solid var(--filete); }
.premio{
  background:var(--sala); padding:clamp(28px,3.2vw,44px) clamp(22px,2.6vw,36px);
  transition:background .5s var(--ease);
}
.premio:hover{ background:var(--superficie); }
.premio__nombre{
  font-family:var(--titulo);
  font-size:clamp(2rem,3.9vw,2.9rem); text-transform:uppercase;
  letter-spacing:.015em; color:var(--papel); line-height:1.06;
}
.premio__que{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--laton); margin-top:14px;
}
.premio__voz{ font-style:italic; color:var(--tenue); margin-top:6px; font-size:1.02em; }
.premio__filete{ height:1px; background:var(--filete); margin:22px 0 20px; width:52px; }
.premio p{ font-size:.98em; }
.premio__hi{ color:var(--papel); font-size:1.06em; letter-spacing:.02em; }
.premio__fino{ font-size:.9em; color:var(--tenue); }
.premio__lista{ display:grid; gap:8px; }
.premio__lista li{ position:relative; padding-left:18px; line-height:1.45; font-size:.98em; }
.premio__lista li::before{
  content:""; position:absolute; left:1px; top:.6em;
  width:4px; height:4px; background:var(--laton); transform:rotate(45deg);
}

/* ---------- V · El procedimiento ---------- */
.instancias{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px); }
.instancias__riel{ position:absolute; top:0; left:0; right:0; height:1px; background:var(--filete); }
.instancias__riel i{
  position:absolute; inset:0; background:var(--laton);
  transform-origin:left;
}
.js .instancias__riel i{ transform:scaleX(0); transition:transform 1.5s var(--ease-out); }
.js .instancias.vista .instancias__riel i{ transform:scaleX(1); }
.instancia{ padding-top:clamp(22px,2.6vw,30px); position:relative; }
.instancia::before{
  content:""; position:absolute; top:-3px; left:0;
  width:5px; height:5px; background:var(--c); transform:rotate(45deg);
}
.js .instancia::before{
  transform:rotate(45deg) scale(0);
  transition:transform .55s var(--ease-out) .5s;
}
.js .instancia.vista::before{ transform:rotate(45deg) scale(1); }
.instancia__num{ font-size:.68rem; letter-spacing:.3em; color:var(--tenue); }
.instancia__nombre{
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--c); margin-top:10px; line-height:1.4;
}
.instancia__filete{ height:1px; width:30px; background:var(--filete); margin:16px 0; }
.instancia p{ font-size:.97em; margin-bottom:.4em; }

.constancia{
  margin-top:clamp(44px,5vw,64px); padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,32px);
  border:1px solid var(--filete-laton); max-width:820px;
}
.constancia p{ margin:0; color:var(--papel); }

/* ---------- VI · El equipo ---------- */
.equipo__intro{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(30px,5vw,64px); align-items:start; }
.equipo__intro p{ max-width:54ch; }
.sentencia{
  border-left:1px solid var(--filete-laton); padding-left:clamp(18px,2vw,26px);
  font-style:italic; color:var(--laton); font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.5;
}
.sentencia p{ margin:0; }

.areas{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:clamp(44px,5.5vw,68px); }
.area{ padding:0 clamp(14px,1.7vw,22px); border-left:1px solid var(--filete); }
.area:first-child{ border-left:0; padding-left:0; }
.area__num{ font-size:.66rem; letter-spacing:.3em; color:var(--laton); }
.area h3{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--papel); margin:14px 0 14px; line-height:1.5;
}
.area p{ font-size:.94em; margin:0; }

.red{ margin-top:clamp(44px,5.5vw,68px); border-top:1px solid var(--filete); padding-top:clamp(28px,3vw,38px); }
.red__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,26px); margin-top:24px; }
.red__item{ font-size:.96em; line-height:1.4; padding-left:16px; position:relative; }
.red__item::before{
  content:""; position:absolute; left:0; top:.58em;
  width:4px; height:4px; background:var(--laton); transform:rotate(45deg);
}

/* ---------- VII · Las alianzas ---------- */
.categorias{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.categoria{ padding:0 clamp(14px,1.7vw,22px); border-left:1px solid var(--filete); }
.categoria:first-child{ border-left:0; padding-left:0; }
.categoria h3{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--papel); margin-bottom:14px; line-height:1.5;
}
.categoria p{ font-size:.94em; margin:0; }

/* Tablero: espacio reservado para los nombres que se sumen */
.tablero{ margin-top:clamp(50px,6vw,76px); }
.tablero__cabeza{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--filete);
}
.tablero__nota{ font-style:italic; color:var(--laton); font-size:1.02em; }
.tablero__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px); margin-top:clamp(24px,3vw,34px);
}
.hueco{
  position:relative; min-height:132px;
  border:1px dashed rgba(246,241,232,.16);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(18px,2vw,24px);
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.hueco:hover{ border-color:var(--filete-laton); background:var(--superficie); }
.hueco__rubro{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--papel);
  line-height:1.6;
}
.hueco__pie{
  display:flex; align-items:center; gap:10px;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--tenue);
}
.hueco__pie::before{
  content:""; width:5px; height:5px; border:1px solid var(--laton);
  transform:rotate(45deg); flex:none;
}
/* Late despacio: el casillero queda visiblemente a la espera. */
.js .tablero.vista .hueco__pie::before{ animation:espera 4s ease-in-out infinite; }
@keyframes espera{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.hueco:hover .hueco__pie::before{ animation:none; opacity:1; }

/* ---------- VIII · Cierre ---------- */
.cierre__grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(34px,5vw,68px); align-items:start; }
.formulas{ margin:clamp(40px,5vw,62px) 0 0; border-top:1px solid var(--filete); }
.formula{
  display:flex; align-items:baseline; gap:clamp(18px,2.4vw,30px);
  padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--filete);
}
.formula__num{ font-size:.66rem; letter-spacing:.3em; color:var(--laton); flex:none; }
.formula__texto{
  font-style:italic; color:var(--papel);
  font-size:clamp(1.1rem,2.3vw,1.55rem); line-height:1.35;
}

.ficha{ border:1px solid var(--filete-laton); padding:clamp(26px,3vw,36px); }
.ficha__marca{
  font-family:var(--titulo);
  font-size:clamp(1.45rem,2.7vw,1.8rem); text-transform:uppercase; letter-spacing:.11em;
  color:var(--papel); text-align:center; margin-left:.11em;
}
.ficha__bajada{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tenue); text-align:center; margin-top:12px;
}
.ficha__rombo{ margin:24px 0; }
.contacto li{
  display:flex; align-items:baseline; gap:14px; padding:8px 0;
  font-size:.98em;
}
/* En em: con tracking de 0.2em la unidad ch queda corta y la etiqueta pisa el valor */
.contacto .volanta{ flex:none; width:6.4em; font-size:.62rem; letter-spacing:.2em; }
.contacto a{ transition:color .3s var(--ease); border-bottom:1px solid transparent; }
.contacto a:hover{ color:var(--laton); border-bottom-color:var(--filete-laton); }
.ficha__sede{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--filete);
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--laton); text-align:center;
}

/* ---------- Convocatoria / CTA ---------- */
.convocatoria{ border-top:1px solid var(--filete); padding:clamp(74px,9vw,120px) 0; text-align:center; }
.convocatoria__titular{ font-style:italic; font-size:clamp(1.8rem,4.6vw,3.2rem); color:var(--papel); line-height:1.2; }

/* Entra palabra por palabra, como si se dictara. */
.palabra{ display:inline-block; }
.js [data-rev] .palabra{
  opacity:0; transform:translateY(.34em);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:calc(var(--i) * 110ms + 150ms);
}
.js [data-rev].vista .palabra{ opacity:1; transform:none; }
.convocatoria__datos{
  display:flex; justify-content:center; gap:clamp(20px,4vw,54px);
  flex-wrap:wrap; margin-top:clamp(30px,3.6vw,44px);
}
.convocatoria__dato{ text-align:center; }
.convocatoria__dato .volanta{ display:block; color:var(--tenue); }
.convocatoria__dato b{
  display:block; font-weight:400; color:var(--papel);
  font-size:clamp(1.1rem,2vw,1.35rem); margin-top:6px;
}
.botones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(32px,4vw,46px); }
.boton{
  position:relative; overflow:hidden;
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  padding:16px 34px; border:1px solid var(--filete-laton); color:var(--laton);
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.boton span{ position:relative; z-index:2; }
.boton::before{
  content:""; position:absolute; inset:0; background:var(--laton); z-index:1;
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.boton:hover{ color:var(--sala); border-color:var(--laton); }
.boton:hover::before{ transform:translateY(0); }
.boton--seco{ color:var(--tenue); border-color:var(--filete); }
.boton--seco:hover{ color:var(--papel); border-color:var(--filete-laton); }
.boton--seco::before{ background:rgba(246,241,232,.08); }

/* ---------- Pie ---------- */
.pie{ border-top:1px solid var(--filete); padding:46px 0 38px; }
.pie__inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:26px; flex-wrap:wrap; }
.pie__marca{ font-family:var(--titulo); font-size:1.2rem; text-transform:uppercase; letter-spacing:.1em; color:var(--papel); margin-left:.1em; }
.pie__bajada{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tenue); margin-top:10px; }
.pie__links{ display:flex; gap:22px; flex-wrap:wrap; }
.pie__links a{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue);
  transition:color .3s;
}
.pie__links a:hover{ color:var(--laton); }
.pie__legal{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--filete);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.62rem; letter-spacing:.14em; color:rgba(246,241,232,.32);
  text-transform:uppercase;
}

/* ---------- Auxiliares fijos ---------- */
.avance{
  position:fixed; top:0; left:0; height:2px; z-index:950;
  background:var(--laton); width:0%; transition:width .12s linear;
}
.subir{
  position:fixed; right:22px; bottom:22px; z-index:880;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--filete-laton); background:rgba(10,9,7,.86);
  backdrop-filter:blur(8px); color:var(--laton);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .35s;
}
.subir.visible{ opacity:1; visibility:visible; transform:none; }
.subir:hover{ background:var(--laton); color:var(--sala); }
.subir svg{ width:16px; height:16px; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav__links,.nav__cta{ display:none; }
  .tirador{ display:block; }
}
@media (max-width:1040px){
  .programas{ grid-template-columns:1fr; }
  .premios{ grid-template-columns:1fr; }
  .instancias{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .instancias__riel{ display:none; }
  .instancia::before{ top:-3px; }
  .areas,.categorias{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .area,.categoria{ border-left:0; padding-left:0; padding-right:16px; }
  .red__grid{ grid-template-columns:repeat(2,1fr); }
  .nombre,.equipo__intro,.cierre__grid{ grid-template-columns:1fr; }
  .tablero__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  :root{ --nav-h:62px; }
  .instancias{ grid-template-columns:1fr; }
  .areas,.categorias,.red__grid,.tablero__grid{ grid-template-columns:1fr; }
  .portada__marca{ letter-spacing:.09em; }
  .portada__pie{ display:none; }
  .contacto li{ flex-direction:column; gap:2px; }
  .contacto .volanta{ width:auto; }
}

/* ---------- Accesibilidad ---------- */
:focus-visible{ outline:2px solid var(--laton); outline-offset:3px; }
.saltar{
  position:absolute; left:-9999px; top:0; z-index:10001;
  background:var(--laton); color:var(--sala); padding:12px 18px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.saltar:focus{ left:8px; top:8px; }
.oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-rev]{ opacity:1 !important; transform:none !important; }
  .portada__marca span{ opacity:1; transform:none; }
  /* Ningún elemento puede quedar recortado, encogido ni invisible
     cuando se apagan las transiciones. */
  .js [data-rev] .titular{ clip-path:none !important; }
  .js [data-rev] .rotulo__filete,
  .js [data-rev] .programa__filete,
  .js [data-rev] .premio__filete,
  .js [data-rev] .instancia__filete,
  .js .programa::before,
  .js .portada__sello::before,
  .js .portada__sello::after{ transform:scaleX(1) !important; }
  .js .instancia::before,
  .js .portada__sello i{ transform:rotate(45deg) scale(1) !important; }
  .js .instancias__riel i{ transform:scaleX(1) !important; }
  .js .portada__sede{ opacity:1 !important; }
  .js [data-rev] .palabra{ opacity:1 !important; transform:none !important; }
}