/* ============ TOKENS — mundo oscuro comprometido (deck de proyección) ============ */
:root{
  --ink:#0D0609; --ink-2:#150B0F; --panel:#1C1015; --panel-2:#241419;
  --line:rgba(244,237,234,.16); --line-fuerte:rgba(244,237,234,.34);
  --vino:#79242F; --vino-hi:#C24352; --vino-deep:#4A131C;
  --naranja:#F18A00; --ambar:#FFC24B; --marina:#1A1E40;
  --niebla:#F7F1EF; --gris:#CDBCC0; --gris-2:#A08A8F;
  --max:1220px;
  --f-display:"Chakra Petch","Trebuchet MS",system-ui,sans-serif;
  --f-cifra:"Orbitron","Chakra Petch",system-ui,sans-serif;
  --f-body:"Lato",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --e:cubic-bezier(.16,.84,.34,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--niebla);
  font-family:var(--f-body); font-weight:400; font-size:clamp(17px,1.2vw,20px);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow:hidden;
}
img{max-width:100%; display:block}
::selection{background:var(--naranja); color:#1a0d05}
:focus-visible{outline:2px solid var(--ambar); outline-offset:3px; border-radius:3px}

/* ============ CAPA 0 — rejilla técnica ============ */
/* Retícula de ingeniería en rojo oscurecido. Deriva un módulo completo por
   ciclo, así que el bucle es invisible: nunca se ve "saltar". */
.rejilla{
  position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  background-image:
    linear-gradient(rgba(194,67,82,.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,67,82,.105) 1px, transparent 1px),
    linear-gradient(rgba(194,67,82,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,67,82,.055) 1px, transparent 1px);
  background-size:132px 132px, 132px 132px, 33px 33px, 33px 33px;
  /* se apaga en el centro: donde vive el texto, el fondo no compite */
  -webkit-mask-image:radial-gradient(112% 86% at 50% 46%, transparent 16%, #000 90%);
  mask-image:radial-gradient(112% 86% at 50% 46%, transparent 16%, #000 90%);
  animation:deriva 42s linear infinite;
}
@keyframes deriva{
  from{background-position:0 0, 0 0, 0 0, 0 0}
  to{background-position:0 132px, 132px 0, 0 33px, 33px 0}
}
/* Barrido de escáner: pasa una vez cada 28 s y el resto del ciclo espera fuera
   de cuadro. Es un acento, no un latido constante. */
.rejilla::after{
  content:""; position:absolute; left:0; right:0; height:34vh;
  background:linear-gradient(180deg,
    transparent,
    rgba(121,36,47,.30) 42%,
    rgba(194,67,82,.42) 51%,
    rgba(121,36,47,.30) 60%,
    transparent);
  filter:blur(3px); opacity:0;
  animation:barrido 28s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes barrido{
  0%,56%{transform:translateY(-40vh); opacity:0}
  63%{opacity:.85}
  93%{opacity:.85}
  100%{transform:translateY(140vh); opacity:0}
}

/* ============ CAPA 1 — campo de nodos ============ */
#campo{position:fixed; inset:0; z-index:0; pointer-events:none}
.velo{
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(121,36,47,.26), transparent 60%),
    radial-gradient(90% 60% at 88% 108%, rgba(74,19,28,.40), transparent 58%),
    linear-gradient(180deg, rgba(13,6,9,.42), rgba(13,6,9,.80));
}
/* Rescoldo que respira muy despacio: rompe el negro plano sin llamar la atención. */
.velo::before{
  content:""; position:absolute; inset:-10%;
  background:radial-gradient(52% 40% at 24% 76%, rgba(121,36,47,.24), transparent 70%);
  animation:rescoldo 24s ease-in-out infinite;
}
@keyframes rescoldo{
  0%,100%{opacity:.3; transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.8; transform:translate3d(4%,-3%,0) scale(1.14)}
}
.grano{
  position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:granular 6s steps(5) infinite;
}
@keyframes granular{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}
}

/* ============ ESTRUCTURA DEL DECK ============ */
#deck{
  position:relative; z-index:4; height:100dvh; overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
#deck::-webkit-scrollbar{display:none}
.escena{
  position:relative; min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; padding:clamp(72px,9vh,120px) clamp(22px,5vw,64px) clamp(64px,8vh,96px);
}
.wrap{width:100%; max-width:var(--max); margin:0 auto}

/* ============ COREOGRAFÍA DE ENTRADA ============ */
[data-r]{opacity:0; transform:translateY(30px); filter:blur(6px)}
.dentro [data-r]{
  opacity:1; transform:none; filter:none;
  transition:opacity .85s var(--e), transform .95s var(--e), filter .85s var(--e);
  transition-delay:calc(var(--i,0) * 95ms);
}
[data-r="izq"]{transform:translateX(-34px)}
[data-r="der"]{transform:translateX(34px)}
[data-r="escala"]{transform:scale(.94)}

/* ============ TIPOGRAFÍA ============ */
.eyebrow{
  font-family:var(--f-mono); font-size:.8rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--naranja); display:flex; align-items:center; gap:.7em; margin:0 0 1.1rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--naranja); flex:none}
.eyebrow .num{font-family:var(--f-cifra); color:var(--gris-2); letter-spacing:.1em}
h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.02; text-wrap:balance; margin:0}
h1{font-size:clamp(3.4rem,11vw,8.6rem); letter-spacing:-.02em; line-height:.94; text-transform:uppercase}
h2{font-size:clamp(2.4rem,5.8vw,4.5rem); letter-spacing:-.015em; margin-bottom:.5em; text-transform:uppercase}
h3{font-size:clamp(1.3rem,1.95vw,1.7rem); font-weight:700; letter-spacing:0; line-height:1.18}
.lead{font-size:clamp(1.16rem,1.6vw,1.5rem); color:var(--gris); max-width:60ch; line-height:1.6}
.lead strong{color:var(--niebla); font-weight:700}

/* marcador de dato por confirmar */

/* ============ PORTADA ============ */
.portada{align-items:center}
.portada .wrap{text-align:center; position:relative}
.escudo-fila{display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,34px); margin-bottom:clamp(26px,4vh,48px)}
.placa{
  background:var(--niebla); border-radius:4px; padding:12px 18px; display:grid; place-items:center;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.06);
}
.placa img{height:clamp(30px,3.6vw,46px); width:auto}
.placa.uag img{height:clamp(22px,2.8vw,35px)}
.divisor-v{width:1px; height:38px; background:var(--line-fuerte)}
h1 .linea{display:block; overflow:hidden}
h1 .linea span{display:inline-block; transform:translateY(105%); transition:transform 1.05s var(--e); transition-delay:calc(var(--i) * 90ms + 250ms)}
.dentro h1 .linea span{transform:none}
h1 .fuego{
  background:linear-gradient(96deg,var(--naranja) 8%,var(--ambar) 46%,var(--vino-hi) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subportada{
  margin:clamp(22px,3.2vh,38px) auto 0; max-width:56ch; font-size:clamp(1.2rem,1.75vw,1.65rem);
  color:var(--gris); line-height:1.5;
}
.tira{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:clamp(24px,3.4vh,38px);
}
.chip{
  font-family:var(--f-display); font-size:.86rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.6em 1.15em; border:1px solid var(--line-fuerte); border-radius:100px; color:var(--niebla);
  background:rgba(28,16,21,.55); backdrop-filter:blur(6px);
}
.chip.viva{border-color:rgba(241,138,0,.6); color:var(--ambar)}
.cue{
  position:absolute; left:50%; bottom:clamp(-70px,-7vh,-48px); transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gris-2);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.cue .riel{width:1px; height:44px; background:linear-gradient(var(--naranja),transparent); animation:baja 2.2s var(--e) infinite}
@keyframes baja{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}
  55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ============ RIEL DE PISTA (navegación) ============ */
.pista{
  position:fixed; left:clamp(12px,2.2vw,30px); top:50%; transform:translateY(-50%); z-index:20;
  display:flex; flex-direction:column; gap:0; align-items:center;
}
.pista .via{
  width:26px; height:26px; display:grid; place-items:center; border:0; background:none; cursor:pointer; padding:0;
  position:relative;
}
.pista .via::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--gris-2); transition:.4s var(--e)}
.pista .via:hover::after{background:var(--niebla); transform:scale(1.25)}
.pista .via[aria-current="true"]::after{
  background:var(--naranja); transform:scale(1.5); box-shadow:0 0 0 4px rgba(241,138,0,.18), 0 0 16px rgba(241,138,0,.75);
}
.pista .tramo{width:1px; height:16px; background:var(--line-fuerte)}
.pista .rot{
  position:absolute; left:26px; white-space:nowrap; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--niebla); background:var(--panel);
  border:1px solid var(--line); padding:.35em .7em; border-radius:3px; opacity:0; pointer-events:none;
  transform:translateX(-6px); transition:.3s var(--e);
}
.pista .via:hover .rot,.pista .via:focus-visible .rot{opacity:1; transform:none}
.barra{position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--vino-hi),var(--naranja),var(--ambar)); z-index:30; width:0; box-shadow:0 0 12px rgba(241,138,0,.6)}

/* marca fija */
.firma{
  position:fixed; right:clamp(14px,2.4vw,30px); top:clamp(14px,2.4vh,26px); z-index:20;
  display:flex; align-items:center; gap:12px; opacity:.92;
}
.firma .placa{padding:7px 11px; border-radius:3px}
.firma .placa img{height:20px}
.firma .placa.uag img{height:15px}
@media (max-width:760px){.firma{display:none}}

/* ============ MALLAS Y TARJETAS ============ */
.malla{display:grid; gap:clamp(14px,1.6vw,22px)}
.m4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center}
@media (max-width:900px){.m3,.m4{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr; gap:30px}}
@media (max-width:560px){.m2,.m3,.m4{grid-template-columns:1fr}}

.carta{
  background:linear-gradient(168deg,var(--panel) 0%,var(--ink-2) 100%);
  border:1px solid var(--line); border-radius:2px; padding:clamp(20px,2.1vw,30px);
  position:relative; overflow:hidden; transition:border-color .45s var(--e), transform .45s var(--e);
}
.carta::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--vino-hi),var(--naranja)); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e);
}
.carta:hover{border-color:var(--line-fuerte); transform:translateY(-4px)}
.carta:hover::before{transform:scaleX(1)}
.carta .icono{width:34px; height:34px; margin-bottom:14px; color:var(--naranja)}
.carta h3{margin-bottom:.5em}
.carta p{margin:0; color:var(--gris); font-size:1.02rem; line-height:1.5}
.carta .clave{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gris-2); display:block; margin-bottom:.95em;
}

/* ============ CIFRAS ============ */
.cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); margin-top:clamp(28px,4vh,46px)}
@media (max-width:640px){.cifras{grid-template-columns:1fr}}
.cifra{border-top:1px solid var(--line-fuerte); padding-top:16px}
.cifra .v{
  font-family:var(--f-cifra); font-weight:900; font-size:clamp(2.8rem,5.6vw,4.6rem); line-height:1;
  letter-spacing:-.02em; color:var(--niebla); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.06em;
}
.cifra .v .u{font-size:.34em; color:var(--naranja); font-family:var(--f-display); letter-spacing:.04em}
.cifra .k{font-family:var(--f-display); font-size:.92rem; font-weight:600; letter-spacing:.07em; color:var(--gris); margin-top:.55em; text-transform:uppercase}

/* ============ SÍ / NO ============ */
.balanza{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,30px)}
@media (max-width:760px){.balanza{grid-template-columns:1fr}}
.col-si,.col-no{border:1px solid var(--line); border-radius:2px; padding:clamp(20px,2.4vw,32px); background:rgba(28,16,21,.5)}
.col-si{border-top:3px solid var(--naranja)}
.col-no{border-top:3px solid var(--vino); opacity:.92}
.col-si h3,.col-no h3{display:flex; align-items:center; gap:.55em; margin-bottom:1em; font-size:1.35rem}
.col-si h3 b,.col-no h3 b{
  font-family:var(--f-mono); font-size:.78rem; font-weight:700; letter-spacing:.12em; padding:.3em .6em; border-radius:2px;
}
.col-si h3 b{background:rgba(241,138,0,.16); color:var(--ambar)}
.col-no h3 b{background:rgba(194,67,82,.2); color:#F09AA3}
.lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85em}
.lista li{display:flex; gap:.8em; align-items:flex-start; font-size:1.08rem; line-height:1.5; color:var(--gris)}
.lista li strong{color:var(--niebla); font-weight:700}
.lista li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:.55em; border-radius:1px;
  background:var(--naranja); transform:rotate(45deg);
}
.col-no .lista li::before{background:none; border:1px solid var(--vino-hi)}

/* ============ RUTA / TRIMESTRES ============ */
.ruta{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:2px; overflow:hidden}
@media (max-width:820px){.ruta{grid-template-columns:1fr}}
.etapa{padding:clamp(22px,2.4vw,34px); border-right:1px solid var(--line); position:relative; background:rgba(21,11,15,.6)}
.etapa:last-child{border-right:0}
@media (max-width:820px){.etapa{border-right:0; border-bottom:1px solid var(--line)}}
.etapa .fase{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2);
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2em;
}
.etapa .fase i{font-style:normal; color:var(--naranja)}
.etapa .via-linea{height:2px; background:var(--line-fuerte); margin:0 0 1.4em; position:relative; overflow:hidden}
.etapa .via-linea::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--vino-hi),var(--naranja));
  transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--e); transition-delay:calc(var(--i) * 220ms + 300ms);
}
.dentro .etapa .via-linea::after{transform:scaleX(1)}
.etapa ul{list-style:none; margin:1.1em 0 0; padding:0; display:flex; flex-direction:column; gap:.55em}
.etapa ul li{font-size:1.04rem; color:var(--gris); padding-left:1.15em; position:relative; line-height:1.5}
.etapa ul li::before{content:"—"; position:absolute; left:0; color:var(--vino-hi)}

/* ============ EXPLORADOR DE PROYECTOS ============ */
.explorador{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(20px,3vw,42px); align-items:center}
@media (max-width:900px){.explorador{grid-template-columns:1fr}}
.visor{
  position:relative; aspect-ratio:16/10; border:1px solid var(--line-fuerte); border-radius:2px;
  overflow:hidden; background:var(--ink-2);
}
.visor img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.07); transition:opacity .7s var(--e), transform 1.4s var(--e); filter:saturate(.92) contrast(1.05);
}
.visor img.activa{opacity:1; transform:scale(1)}
.visor::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(13,6,9,.78) 100%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
}
.visor .marca{
  position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ambar);
}
.det .clave{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--naranja); display:block; margin-bottom:.8em}
.det h3{font-size:clamp(1.7rem,2.9vw,2.4rem); margin-bottom:.5em; text-transform:uppercase}
.det p{color:var(--gris); font-size:1.1rem; line-height:1.55; margin:0 0 1.3em; min-height:5em}
.tags{display:flex; flex-wrap:wrap; gap:7px}
.tags span{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; padding:.42em .75em;
  border:1px solid var(--line-fuerte); border-radius:2px; color:var(--gris);
}
.miniaturas{display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(22px,3vh,34px)}
.miniaturas button{
  width:84px; height:56px; padding:0; border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:none; cursor:pointer; opacity:.42; transition:.4s var(--e); position:relative;
}
.miniaturas button img{width:100%; height:100%; object-fit:cover}
.miniaturas button:hover{opacity:.85}
.miniaturas button[aria-pressed="true"]{opacity:1; border-color:var(--naranja); box-shadow:0 0 0 1px var(--naranja)}
@media (max-width:600px){.miniaturas button{width:60px; height:42px}}

/* ============ BANCO DE PRUEBAS (demo interactivo) ============ */
.banco{
  border:1px solid var(--line-fuerte); border-radius:2px; background:linear-gradient(160deg,var(--panel-2),var(--ink-2));
  padding:clamp(20px,2.4vw,30px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,32px); align-items:center;
}
@media (max-width:820px){.banco{grid-template-columns:1fr}}
.codigo{
  font-family:var(--f-mono); font-size:.95rem; line-height:1.85; background:rgba(0,0,0,.42);
  border:1px solid var(--line); border-radius:2px; padding:18px 20px; overflow-x:auto; color:var(--gris);
}
.codigo .kw{color:var(--naranja)} .codigo .fn{color:var(--niebla)} .codigo .nm{color:var(--ambar)}
.codigo .cm{color:var(--gris-2); font-style:italic}
.codigo .fila{display:block; border-left:2px solid transparent; padding-left:10px; margin-left:-12px; transition:.2s}
.codigo .fila.viva{border-left-color:var(--naranja); background:rgba(241,138,0,.07)}
.tablero{display:flex; flex-direction:column; gap:18px}
.led-caja{display:flex; align-items:center; gap:18px; padding:16px; border:1px solid var(--line); border-radius:2px; background:rgba(0,0,0,.3)}
.led{
  width:48px; height:48px; border-radius:50%; flex:none; background:#3a1b12; position:relative;
  box-shadow:inset 0 0 10px rgba(0,0,0,.8); transition:background .07s linear, box-shadow .07s linear;
}
.led.on{background:var(--ambar); box-shadow:0 0 26px 6px rgba(255,194,75,.55), inset 0 0 8px rgba(255,255,255,.7)}
.led-caja .txt{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2)}
.led-caja .txt b{display:block; font-family:var(--f-display); color:var(--niebla); font-size:1.15rem; letter-spacing:.02em; text-transform:none; margin-top:2px}
.control{display:flex; flex-direction:column; gap:9px}
.control label{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2); display:flex; justify-content:space-between}
.control label b{color:var(--ambar)}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line-fuerte); border-radius:2px; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--naranja);
  box-shadow:0 0 0 4px rgba(241,138,0,.18); cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border:0; border-radius:50%; background:var(--naranja); cursor:pointer}
.btn{
  font-family:var(--f-display); font-weight:700; font-size:.92rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.95em 1.6em; border:1px solid var(--naranja); background:transparent; color:var(--ambar);
  border-radius:2px; cursor:pointer; transition:.35s var(--e); position:relative; overflow:hidden;
}
.btn:hover{background:var(--naranja); color:#180c04}
.btn.solido{background:var(--naranja); color:#180c04; border-color:var(--naranja)}
.btn.solido:hover{background:var(--ambar); border-color:var(--ambar)}

/* ============ FLUJO IA ============ */
.flujo{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(22px,3vh,36px)}
@media (max-width:760px){.flujo{grid-template-columns:1fr 1fr}}
.nodo{
  border:1px solid var(--line); border-right:0; padding:clamp(16px,1.8vw,24px); background:rgba(21,11,15,.55); position:relative;
}
.nodo:last-child{border-right:1px solid var(--line)}
@media (max-width:760px){.nodo{border-right:1px solid var(--line); border-bottom:0} .nodo:nth-child(n+3){border-bottom:1px solid var(--line)}}
.nodo .p{font-family:var(--f-cifra); font-size:.72rem; letter-spacing:.16em; color:var(--gris-2); display:block; margin-bottom:.9em}
.nodo h3{font-size:1.18rem; margin-bottom:.45em}
.nodo p{margin:0; font-size:.98rem; color:var(--gris); line-height:1.5}
.nodo .pulso{
  position:absolute; right:-5px; top:50%; width:9px; height:9px; border-radius:50%; background:var(--naranja);
  transform:translateY(-50%); opacity:0;
}
.dentro .nodo .pulso{animation:salta 3.4s var(--e) infinite; animation-delay:calc(var(--i) * .34s)}
@keyframes salta{0%,70%{opacity:0; transform:translateY(-50%) scale(.4)}
  12%{opacity:1; transform:translateY(-50%) scale(1)} 40%{opacity:0; transform:translateY(-50%) scale(1.9)}}
.nodo:last-child .pulso{display:none}

/* ============ MARQUESINA DE COMPONENTES ============ */
.marquesina{
  position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0; margin-top:clamp(30px,4vh,48px); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquesina .rueda{display:flex; gap:0; width:max-content; animation:corre 42s linear infinite}
.marquesina span{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gris-2);
  padding:0 24px; white-space:nowrap; display:flex; align-items:center; gap:22px;
}
.marquesina span::after{content:""; width:4px; height:4px; background:var(--vino-hi); border-radius:50%}
@keyframes corre{to{transform:translateX(-50%)}}

/* ============ CIERRE / INSCRIPCIÓN ============ */
.inscripcion{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,52px); align-items:start}
@media (max-width:820px){.inscripcion{grid-template-columns:1fr}}
.datos{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line)}
.datos .fila{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline}
.datos .fila dt{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-2); min-width:118px}
.datos .fila dd{margin:0; font-size:1.22rem; color:var(--niebla); font-family:var(--f-display); font-weight:600; letter-spacing:.01em}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,2.6vh,28px)}

/* --- placa del código QR --- */
.qr-placa{
  flex:none; width:clamp(126px,13.5vw,166px); background:#fff; border-radius:3px; padding:7px;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.95);
}
.qr-placa svg,.qr-placa img{display:block; width:100%; height:auto}

/* --- QR de informes (cierre) --- */
.qr-cierre{display:flex; align-items:center; gap:clamp(16px,1.9vw,24px); margin-top:clamp(26px,3.6vh,40px)}
@media (max-width:560px){.qr-cierre{flex-direction:column; align-items:flex-start}}
.qr-cierre .et{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--naranja); display:block; margin-bottom:.45em}
.qr-cierre .nom{font-family:var(--f-display); font-weight:700; font-size:clamp(1.45rem,2.2vw,1.9rem); color:var(--niebla); display:block; letter-spacing:.01em}
.qr-cierre .correo{
  display:inline-block; margin-top:.3em; font-family:var(--f-mono); font-weight:400;
  font-size:clamp(.95rem,1.35vw,1.15rem); color:var(--ambar); text-decoration:none;
  letter-spacing:.01em; word-break:break-all;
  border-bottom:1px solid rgba(255,194,75,.4); padding-bottom:1px;
  transition:color .18s var(--e), border-color .18s var(--e);
}
.qr-cierre .correo:hover,.qr-cierre .correo:focus-visible{color:var(--niebla); border-bottom-color:var(--niebla)}
.qr-cierre small{display:block; margin-top:.5em; font-size:.92rem; color:var(--gris-2); line-height:1.45; max-width:34ch}
.cita{
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.22;
  letter-spacing:-.01em; color:var(--niebla); border-left:2px solid var(--naranja); padding-left:clamp(18px,2.2vw,28px);
}
.cita cite{display:block; font-family:var(--f-mono); font-style:normal; font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris-2); margin-top:1.3em}
.pie{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:clamp(40px,6vh,72px); padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2);
}
.pie .escudos{display:flex; align-items:center; gap:14px}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #deck{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-r]{opacity:1 !important; transform:none !important; filter:none !important}
  h1 .linea span{transform:none !important}
  .grano{animation:none}
  .rejilla{animation:none}
  .rejilla::after{display:none}
  .velo::before{animation:none; opacity:.6}
}