/* =============================================================================
   ACCESS NETWORK INTEGRATIONS · Sistema visual «Sala de Mando»
   Rev 6.0 · MMXXVI
   Capa 1 primitivas → capa 2 semántica → capa 3 componentes.
   Reglas duras: radio 0 (filetes, no tarjetas blandas) · oro para el filete y el
   kicker · cian solo para dato vivo · una sola sombra real (modal / placa).
   ========================================================================== */

/* ---------------------------------------------------------------- capa 1 --- */
:root{
  /* tinta y suelo */
  --abismo:#070F1C;
  --naval-900:#0A1628;
  --naval-800:#101E33;
  --naval-700:#152238;
  --naval-600:#1B2B45;
  --linea:rgba(138,172,206,.16);
  --linea-fuerte:rgba(138,172,206,.30);

  /* metal */
  --oro:#C9A96A;
  --oro-hondo:#C79A3B;
  --oro-claro:#E3CE9C;

  /* señal */
  --cian:#2AA9C9;
  --cian-alto:#5FD0D6;
  --cian-hondo:#1B7A92;

  /* papel y texto */
  --crema:#F4F1E9;
  --tinta:#E9EEF5;
  --tinta-2:#A6B7CA;
  --tinta-3:#7B8FA6;   /* 4.8:1 incluso sobre la superficie en hover */

  /* tipografía */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --texto:'Archivo','Segoe UI',system-ui,sans-serif;
  --dato:'JetBrains Mono','Consolas',monospace;

  /* rampa de texto: cinco escalones con nombre, ni uno mas */
  --t1:.72rem;   /* 11.5px  etiqueta mono, cabecera de tabla, cajetin   */
  --t2:.8rem;    /* 12.8px  apoyo: subitem, pie de figura, ayuda        */
  --t3:.88rem;   /* 14.1px  cuerpo secundario y UI                      */
  --t4:.96rem;   /* 15.4px  cuerpo                                      */
  --t5:1.06rem;  /* 17px    entradilla                                  */
  --d1:1.15rem;  /* 18.4px  titulo de celda, seccion de documento        */
  --d2:1.45rem;  /* 23.2px  glifo, metrica de expediente                 */
  --d3:1.85rem;  /* 29.6px  titulo de bloque (geo, rotulo de papel)      */

  /* escala espacial */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:132px;

  /* medidas */
  --ancho:1280px;
  --canal:clamp(20px,4vw,48px);
  --alto-cinta:38px;
  --alto-nav:70px;

  /* movimiento */
  --sal:cubic-bezier(.22,.61,.36,1);
  --entra:cubic-bezier(.16,.84,.44,1);
  /* Rev 11 · la curva de todo lo demas. Sesenta y dos transiciones del sitio
     iban en `linear`: color, borde, opacidad y hasta alguna transformacion. Una
     transicion lineal arranca y frena a la misma velocidad, que es como no se
     mueve nada en el mundo fisico — y es exactamente la sensacion de barato que
     deja un sitio que por lo demas esta bien dibujado. Esta curva sale rapido y
     se posa; es una sola linea y se nota en cada pasada de raton de la casa.
     Las DOS animaciones que siguen siendo lineales lo son con razon: la cinta
     de logotipos y el folio que viaja por la via son bucles de velocidad
     constante, y ahi cualquier curva se lee como un tiron.

     Los TIEMPOS casi no se tocan, y es una decision, no un olvido. La orden era
     ir mas lento; pero «mas lento» vale para la coreografia —el heroe, las
     entradas, el despliegue del dossier, que ahora respiran— y NO para el acuse
     de un raton encima de un boton. Un hover es una respuesta, y una respuesta
     tardia se siente rota, no elegante; anti-vibecode lo fija en 150 ms y tiene
     razon. Lo que hacia barata a la rev 10 no era la duracion: era la recta. */
  --suave:cubic-bezier(.33,.71,.32,1);
  --rapido:150ms;
  --medio:280ms;
}

/* ---------------------------------------------------------------- capa 2 --- */
:root{
  --fondo:var(--naval-900);
  --superficie:var(--naval-800);
  --superficie-alta:var(--naval-700);
  --borde:var(--linea);
  --borde-vivo:rgba(201,169,106,.45);
  --acento:var(--oro);
  --dato-color:var(--cian);
  --foco:var(--cian-alto);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--abismo);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--oro);color:var(--naval-900)}

:focus-visible{
  outline:2px solid var(--foco);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------------------------------------------------------------- fondo ---- */
/* Malla de nodos: no es decoración, es la marca — red que se conecta al cursor. */
/* Rev 12 · AQUI ESTABA EL SITIO ENTERO A 40 FPS. Esta regla llevaba un
   mask-image de un degradado vertical para apagar la malla donde empieza el
   cuerpo de texto. El dibujo era correcto y el precio, ruinoso: una mascara
   CSS sobre un elemento fijo a pantalla completa obliga al compositor a
   recomponer la capa enmascarada CADA CUADRO EN QUE EL LIENZO CAMBIA, y el
   lienzo cambia sesenta veces por segundo. Medido con el lienzo tal cual y con
   la mascara quitada, en servicios.html: 42.2 fps -> 60.0 fps. Dieciocho
   milisegundos por cuadro, en las diez paginas, por una linea de CSS.
   El degollado ahora lo hace el propio lienzo con un relleno en
   destination-out (un rectangulo, una vez por cuadro): mismo dibujo, coste
   inapreciable. Si alguien vuelve a poner aqui una mascara, que mida antes. */
#malla{
  position:fixed;inset:0;z-index:1;pointer-events:none;
}
.suelo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--naval-900) 0%,#08121F 46%,var(--abismo) 100%);
}
header,main,footer,.velo{position:relative;z-index:2}

/* ---------------------------------------------------------- primitivas ----- */
.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal)}
.wrap-estrecho{max-width:880px}

/* rev 8 bajo el aire; la rev 13 lo devuelve CON CRITERIO: los editoriales de
   arquitectura que Alex fijo como vara respiran entre idea e idea. No es media
   pantalla vacia: es sitio para que cada bloque pese. */
.franja{padding-block:clamp(54px,6.5vw,104px);position:relative}
/* dos franjas seguidas no suman su aire: el ritmo lo marca la primera */
.franja + .franja{padding-top:clamp(32px,3.8vw,60px)}
.franja--corta{padding-block:clamp(32px,3.8vw,56px)}
.franja--linea{border-top:1px solid var(--linea)}
.franja--alza{background:linear-gradient(180deg,rgba(10,22,40,0),rgba(21,34,56,.62) 45%,rgba(10,22,40,0))}
/* haz de luz: iluminación direccional, no mancha radial */
.franja--haz::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(201,169,106,.055) 50%,transparent 66%);
}

.kicker{
  display:inline-flex;align-items:center;gap:var(--e3);
  font-family:var(--dato);font-size:var(--t1);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--cian);
}
.kicker::before{content:"";width:32px;height:1px;background:var(--oro);flex:none}
.kicker--oro{color:var(--oro)}

.titulo{
  font-family:var(--display);
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;
  font-weight:300;
  font-size:clamp(2.25rem,1.15rem + 3.6vw,4.1rem);
  line-height:1.04;
  letter-spacing:-.022em;
  color:#fff;
  margin-top:var(--e5);
  text-wrap:balance;
}
.titulo em{font-style:italic;font-weight:400;color:var(--oro)}

.lede{
  margin-top:var(--e5);
  max-width:62ch;
  font-size:var(--t5);
  line-height:1.72;
  color:var(--tinta-2);
}

.encabezado{max-width:66ch;margin-bottom:clamp(32px,4.2vw,60px)}
.encabezado--ancho{max-width:none}

/* dos columnas de contenido con pesos distintos */
.doble{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,72px);align-items:start}
.doble--igual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
@media(max-width:900px){.doble,.doble--igual{grid-template-columns:1fr;gap:var(--e7)}}

.regla{height:1px;background:var(--linea);border:0}

.dato{font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3)}
/* la caja alta rinde hasta ~24 caracteres; mas alla es una frase */
.dato--frase{letter-spacing:.05em;text-transform:none;color:var(--tinta-2);font-size:var(--t2)}

/* botones ------------------------------------------------------------------ */
.boton{
  display:inline-flex;align-items:center;gap:var(--e3);
  min-height:48px;padding:14px 26px;
  font-family:var(--texto);font-size:var(--t3);font-weight:600;letter-spacing:.02em;
  text-decoration:none;border:1px solid transparent;
  transition:background var(--rapido) var(--suave),color var(--rapido) var(--suave),
             border-color var(--rapido) var(--suave),transform 120ms var(--sal);
}
.boton--oro{background:var(--oro);color:var(--naval-900)}
.boton--oro:hover{background:var(--oro-claro)}
.boton--linea{border-color:var(--linea-fuerte);color:var(--tinta)}
.boton--linea:hover{border-color:var(--oro);color:var(--oro-claro)}

/* ------------------------------------------------------------ EL PULSADO ---
   Rev 12. El sitio entero tenia CERO reglas :active. Ni una. Se podia pulsar
   cualquier boton de las diez paginas y el boton no se enteraba: el unico
   acuse llegaba cuando cambiaba la pagina, doscientos milisegundos despues, y
   en ese hueco el usuario no sabe si le ha hecho caso. El acuse de pulsacion
   es la microinteraccion mas fisica que hay —es la unica que responde a una
   fuerza real— y es la mas barata: hundir el elemento un pelo mientras el dedo
   esta encima. 60 ms de ida, sin curva de salida, porque soltar tiene que
   devolverlo al sitio de inmediato; un rebote al soltar es un juguete.
   La flecha del boton no se mueve con el: se queda, y por eso parece clavada
   al mundo mientras la caja cede. */
.boton:active,.area:active,.muro__pieza:active,.cliente:active,
.indice__fila:active{
  transform:scale(.978);
  transition-duration:60ms;
}
/* este ya viaja 11 px al pasar el raton: el hundido se COMPONE con el viaje,
   no lo sustituye — si se sustituye, al pulsar el elemento pega un salto atras */
.plaza-lista button:active{transform:translateX(11px) scale(.978);transition-duration:60ms}
.boton:active .flecha{transform:translateX(1px)}
/* La flecha sale con inercia: acelera y se pasa un pelo antes de posarse. Es
   la unica curva del sitio con sobrepaso y esta donde se nota. Va en 150 ms
   —el techo de la casa para un hover— y no en los 190 que pedia el gesto: un
   acuse tardio se siente roto por elegante que sea la curva, y con sobrepaso
   150 ms ya se leen como algo que tiene peso. */
.boton--wa{background:#1F7A4D;color:#fff}
.boton--wa:hover{background:#25995f}
.boton .flecha{
  font-family:var(--dato);font-size:.8em;
  transition:transform var(--rapido) cubic-bezier(.34,1.42,.64,1);
}
.boton:hover .flecha{transform:translateX(5px)}

/* ------------------------------------------------------------ cinta ops ---- */
.ops{
  position:relative;z-index:60;
  height:var(--alto-cinta);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  padding-inline:var(--canal);
  background:var(--abismo);
  border-bottom:1px solid rgba(201,169,106,.18);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);overflow:hidden;white-space:nowrap;
}
.ops__relojes{display:flex;gap:var(--e5)}
.ops__relojes b{color:var(--oro);font-weight:500;margin-right:6px}
.ops__relojes span{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.ops__linea{display:flex;align-items:center;gap:var(--e2);height:100%;padding-inline:4px;text-decoration:none;color:var(--tinta-2)}
.ops__linea:hover{color:var(--oro-claro)}
.ops__led{width:7px;height:1px;background:var(--oro);flex:none}
.ops__num{color:var(--tinta-2);font-variant-numeric:tabular-nums}
@media(max-width:620px){.ops__rotulo{display:none}}

/* ------------------------------------------------------------- cabecera ---- */
#hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(10,22,40,.82);
  border-bottom:1px solid transparent;
  transition:background var(--medio) var(--suave),border-color var(--medio) var(--suave);
}
#hdr.pegado{
  background:rgba(7,15,28,.94);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--linea);
}
.nav-inner{
  max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal);
  min-height:var(--alto-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e5);
}

.marca{display:flex;align-items:center;gap:var(--e3);text-decoration:none;flex:none}
.marca__hex{width:34px;height:38px;flex:none}
.marca__hex .borde{fill:none;stroke:var(--oro);stroke-width:1.1}
.marca__hex .tri{fill:none;stroke:var(--cian);stroke-width:1.1;stroke-linejoin:round}
.marca__hex .nodo{fill:var(--oro)}
.marca__txt b{
  display:block;font-family:var(--texto);font-size:var(--t2);font-weight:600;
  letter-spacing:.13em;color:#fff;line-height:1.1;
}
.marca__txt span{
  display:block;font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;
  text-transform:uppercase;color:var(--tinta-3);margin-top:3px;
}

#nav ul{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);list-style:none}
#nav a{
  position:relative;display:inline-block;padding-block:6px;
  font-size:var(--t2);letter-spacing:.03em;color:var(--tinta-2);text-decoration:none;
  white-space:nowrap;transition:color var(--rapido) var(--suave);
}
#nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--oro);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--medio) var(--sal);
}
#nav a:hover{color:#fff}
#nav a:hover::after,#nav a.activo::after{transform:scaleX(1)}
#nav a.activo{color:#fff}
#nav a.nav-cta{
  border:1px solid var(--linea-fuerte);padding:9px 16px;color:var(--oro-claro);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
}
#nav a.nav-cta::after{display:none}
#nav a.nav-cta:hover{background:var(--oro);color:var(--naval-900);border-color:var(--oro)}

.idioma{
  display:flex;align-items:center;gap:5px;flex:none;
  border:1px solid var(--linea);padding:8px 11px;min-height:36px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;
}
.idioma:hover{border-color:var(--cian)}
.idioma .es{color:#fff}.idioma .sep{color:var(--tinta-3)}.idioma .en{color:var(--tinta-3)}
body.lang-en .idioma .es{color:var(--tinta-3)}
body.lang-en .idioma .en{color:#fff}

.hamb{display:none;flex-direction:column;gap:5px;padding:10px;flex:none}
.hamb span{display:block;width:22px;height:1.5px;background:var(--tinta);transition:transform var(--medio) var(--sal),opacity var(--rapido) var(--suave)}
#nav.abierto ~ .hamb span:nth-child(1),.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.saltar{
  position:absolute;left:var(--canal);top:-100px;z-index:99;
  background:var(--oro);color:var(--naval-900);padding:12px 20px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;transition:top var(--rapido) var(--suave);
}
.saltar:focus{top:10px}

/* ----------------------------------------------------------- camara PTZ ---- */
/* Domo colgado de la esquina de la sala. El visitante es lo que la camara
   vigila: por eso lo sigue con la mirada y por eso, al tocarla, abre la
   pagina para agendar la visita. Discreta, pero presente en las diez. */
.ptz{
  position:fixed;z-index:40;
  top:calc(var(--alto-nav) + 20px);right:clamp(12px,2.2vw,34px);
  width:clamp(50px,4.6vw,70px);
  display:block;text-decoration:none;
  filter:drop-shadow(0 10px 18px rgba(2,6,12,.65));
  transition:filter var(--medio) var(--suave);
}
.ptz__cuerpo{width:100%;height:auto;overflow:visible}
.ptz__brazo{stroke:rgba(150,178,208,.55);stroke-width:1.4;fill:none;stroke-linecap:square}
.ptz__collar{fill:#152238;stroke:rgba(150,178,208,.42);stroke-width:.8}
.ptz__domo{fill:rgba(8,17,30,.9);stroke:rgba(150,178,208,.45);stroke-width:.9}
.ptz__haz{fill:url(#ptzHaz);opacity:.16;transition:opacity var(--medio) var(--suave)}
.ptz__barril{fill:#04090F}
.ptz__lente{fill:#0B1A2A;stroke:rgba(201,169,106,.55);stroke-width:.6}
.ptz__pupila{fill:#0F2233;stroke:rgba(201,169,106,.75);stroke-width:.5}
.ptz__brillo{fill:rgba(226,238,248,.72)}
.ptz__aro{fill:none;stroke:rgba(150,178,208,.35);stroke-width:.7}
.ptz__ir{fill:rgba(216,115,79,.5)}
.ptz__vidrio{stroke:rgba(200,224,240,.30);stroke-width:1.1;fill:none;stroke-linecap:round}
.ptz__led{fill:var(--cian-alto);animation:ptzLed 3.4s ease-in-out infinite}
.ptz[data-mueve="si"] .ptz__led{fill:var(--oro-claro);animation-duration:1.1s}
@keyframes ptzLed{0%,100%{opacity:.30}50%{opacity:1}}
.ptz:hover,.ptz:focus-visible{filter:drop-shadow(0 12px 22px rgba(201,169,106,.35))}
.ptz:hover .ptz__domo,.ptz:focus-visible .ptz__domo{stroke:var(--oro);fill:rgba(12,24,40,.92)}
.ptz:hover .ptz__haz,.ptz:focus-visible .ptz__haz{opacity:.42}
.ptz__rotulo{
  position:absolute;right:calc(100% + 12px);top:26%;white-space:nowrap;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;
  color:var(--oro-claro);background:rgba(7,15,28,.92);
  padding:6px 10px;border:1px solid rgba(201,169,106,.35);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--medio) var(--suave),transform var(--medio) var(--sal);
}
.ptz:hover .ptz__rotulo,.ptz:focus-visible .ptz__rotulo{opacity:1;transform:none}
@media(max-width:760px){
  .ptz{top:calc(var(--alto-nav) + 12px);right:10px;width:46px}
  .ptz__rotulo{display:none}
}

/* ----------------------------------------------------------------- héroe --- */
.heroe{
  position:relative;
  min-height:calc(100svh - var(--alto-nav) - var(--alto-cinta));
  display:grid;align-content:center;
  padding-block:clamp(68px,10vh,136px) clamp(48px,7vh,84px);
  overflow:hidden;
}
/* --- rev 9: el fondo del héroe es la marca en volumen, dibujada partícula a
   partícula en el lienzo. Sale la fotografía de sala; el velo deja de tener que
   apagar una foto y sólo hace dos cosas: darle suelo limpio a la tipografía por
   el flanco izquierdo y coser el borde inferior con el navy de la página. --- */
/* --- rev 14 «cine»: capa fotografica REAL bajo el emblema. La floracion de
   fibra optica (video corto en equipo con musculo; su fotograma calificado en
   el resto) da profundidad de pelicula sin quitarle el papel protagonista a
   las particulas: vive detras del lienzo, sesgada al flanco del emblema, y
   los velos existentes la cosen al navy. Dos haces de luz volumetrica en los
   colores de la casa respiran encima, a baja opacidad y con una sola fuente
   implicita — atmosfera, no lens flare de plantilla. --- */
/* la escena de particulas hornea su propio fondo OPACO (vineta y grano en el
   lienzo): una capa debajo no existiria. La fotografia va ENCIMA del lienzo
   en mezcla screen —la luz suma, el negro desaparece— y una mascara la
   aparta del flanco del titular y del borde inferior. */
.heroe__fondo{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;
  /* vignette radial anclada al flanco del emblema: la floracion abraza a las
     particulas y se apaga hacia el titular y hacia el pie — el emblema sigue
     siendo el protagonista y el texto conserva su suelo */
  /* rev 16 - el CLARO. La mascara anterior ponia el maximo de la floracion
     EXACTAMENTE bajo el emblema (72% 44% es su centro): el bokeh de oro se
     comia a las particulas de cian y la figura formada no se leia, que fue la
     queja textual de Alex. Mismo encuadre, pero el nucleo cede (.30) y el
     maximo pasa a ser un ANILLO alrededor: la fibra abraza al emblema en vez
     de taparlo, y el hexagono se posa sobre navy casi limpio. */
  -webkit-mask-image:radial-gradient(92% 118% at 72% 40%,rgba(0,0,0,.30) 0%,rgba(0,0,0,.62) 16%,#000 34%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.10) 68%,transparent 80%);
  mask-image:radial-gradient(92% 118% at 72% 40%,rgba(0,0,0,.30) 0%,rgba(0,0,0,.62) 16%,#000 34%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.10) 68%,transparent 80%);
}
.heroe__fondo img,.heroe__fondo video{
  position:absolute;left:52%;top:50%;width:max(100%,1100px);height:118%;
  transform:translate(-46%,-51%);object-fit:cover;object-position:64% 46%;
  opacity:.36;
}
.heroe__video{opacity:0;transition:opacity 2.2s ease}
.heroe__video.va{opacity:.38}
.heroe__haz{
  position:absolute;top:-14%;left:26%;width:36%;height:132%;
  background:linear-gradient(80deg,transparent 6%,rgba(95,208,214,.045) 40%,rgba(227,206,156,.08) 55%,transparent 82%);
  transform:skewX(-13deg);mix-blend-mode:screen;opacity:.55;
}
.heroe__haz--b{
  left:50%;width:26%;
  background:linear-gradient(80deg,transparent 10%,rgba(227,206,156,.05) 46%,rgba(95,208,214,.05) 62%,transparent 88%);
}
/* los haces NO respiran por CSS: animarlos obligaba a recomponer la mezcla
   screen del heroe entero cada cuadro (4 fps medidos). Luz fija; el
   movimiento del video ya los hace vivir. */
/* modo sobrio: la guardia de app.js lo enciende cuando la maquina no
   sostiene la mezcla. Sin blend, sin mascara, sin haces: una sola capa
   translucida barata. Cine donde se puede; el heroe de la rev 13 donde no. */
.heroe__fondo--sobrio{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.heroe__fondo--sobrio img{opacity:.20}
.heroe__fondo--sobrio video,.heroe__fondo--sobrio .heroe__haz{display:none}
@media(max-width:760px){.heroe__haz{display:none}.heroe__fondo img,.heroe__fondo video{opacity:.30}}
.heroe__escena{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.heroe__escena canvas{width:100%;height:100%;display:block}
.heroe__escena::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(72% 108% at 2% 52%,rgba(6,13,24,.86) 0%,rgba(7,15,27,.58) 34%,rgba(8,17,30,.18) 62%,rgba(8,17,30,0) 82%),
    linear-gradient(180deg,rgba(10,22,40,.46) 0%,rgba(10,22,40,0) 16%,rgba(10,22,40,0) 62%,rgba(9,19,34,.58) 88%,var(--naval-900) 100%);
}
.heroe__hex{
  position:absolute;top:50%;right:-2%;translate:0 -52%;
  width:min(52vw,560px);height:auto;pointer-events:none;z-index:0;
}
.heroe__hex .borde,.portada__hex .borde{fill:none;stroke:var(--oro);stroke-width:.8;opacity:.20}
.heroe__hex .borde-int,.portada__hex .borde-int{fill:none;stroke:var(--oro);stroke-width:.5;opacity:.11}
.heroe__hex .tri,.portada__hex .tri{fill:none;stroke:var(--cian);stroke-width:.7;opacity:.34;stroke-linejoin:round}
.heroe__hex .nodo,.portada__hex .nodo{fill:var(--cian-alto);opacity:.8}
.heroe__hex .nodo:nth-of-type(1),.portada__hex .nodo:nth-of-type(1){animation:pulsoNodo 4.2s ease-in-out infinite}
.heroe__hex .nodo:nth-of-type(2),.portada__hex .nodo:nth-of-type(2){animation:pulsoNodo 4.2s ease-in-out .9s infinite}
.heroe__hex .nodo:nth-of-type(3),.portada__hex .nodo:nth-of-type(3){animation:pulsoNodo 4.2s ease-in-out 1.8s infinite}
@keyframes pulsoNodo{0%,100%{opacity:.28;r:2.2}45%{opacity:1;r:3.4}}

.heroe .wrap{position:relative;z-index:2}

.heroe__marca{
  font-family:var(--dato);font-size:clamp(.58rem,1.1vw,.7rem);
  letter-spacing:.5em;text-transform:uppercase;color:var(--oro);
  display:flex;align-items:center;gap:var(--e4);
}
.heroe__marca::after{content:"";height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,var(--oro),transparent)}

/* rev 13 «editorial»: el titular ES la pieza. Sube de 7.6 a 9.4 rem de techo
   —la escala de los editoriales de arquitectura que marcan la vara— y gana
   interlinea negativa real. Todo lo demas del heroe se aparta para dejarle
   sitio: la calma es el lujo. */
.heroe h1{
  margin-top:clamp(24px,3.6vh,42px);
  font-family:var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  font-weight:300;
  font-size:clamp(3.2rem,.9rem + 9.8vw,9.4rem);
  line-height:.9;
  letter-spacing:-.035em;
  color:#fff;
  /* la sala es una foto: el titular necesita su propio suelo para no depender
     del pixel que le toque detras */
  text-shadow:0 2px 30px rgba(3,8,16,.72),0 1px 3px rgba(3,8,16,.42);
}
.heroe h1 em{
  display:block;font-style:italic;font-weight:400;color:var(--oro);
  letter-spacing:-.03em;
}
.heroe__sub{
  margin-top:clamp(26px,3.6vh,44px);
  max-width:52ch;font-size:clamp(.98rem,.9rem + .3vw,1.14rem);
  line-height:1.72;color:var(--tinta-2);
  text-shadow:0 1px 18px rgba(3,8,16,.66);
}
.heroe__acciones{margin-top:clamp(30px,4.6vh,52px);display:flex;gap:var(--e4);flex-wrap:wrap}

/* cifras duras del héroe */
.cifras{
  margin-top:clamp(48px,7vh,92px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--linea);
}
.cifra{padding:var(--e5) var(--e4) 0 0;position:relative}
.cifra + .cifra{padding-left:var(--e5);border-left:1px solid var(--linea)}
.cifra::before{
  content:"";position:absolute;top:-1px;left:0;width:72%;height:1px;background:var(--oro);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--sal);transition-delay:calc(var(--i,0) * 110ms);
}
.cifras.viva .cifra::before{transform:scaleX(1)}
.cifra__n{
  font-family:var(--display);font-variation-settings:'opsz' 144;
  font-weight:300;font-size:clamp(2.1rem,1rem + 3.2vw,3.6rem);line-height:1;
  color:#fff;display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums;
}
.cifra__n sup{font-size:.42em;color:var(--cian-alto);top:-.4em;position:relative}
.cifra__n .u{font-family:var(--dato);font-size:.34em;color:var(--cian-alto);letter-spacing:.02em;margin-left:2px}
.cifras__nota{
  grid-column:1/-1;margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid var(--linea);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.06em;color:var(--tinta-3);
}
.cifra__t{
  margin-top:var(--e4);font-family:var(--dato);font-size:var(--t1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);line-height:1.5;
}

/* --------------------------------------------------- cabecera de página ---- */
/* rev 8: la portada es un plano, no un titular flotando en negro. La foto
   ocupa el ancho completo y el texto se apoya en la parte baja, donde el velo
   direccional garantiza el contraste. Cero viewport vacio.
   rev 14 «cine»: la portada crece a plano de pelicula —el viewport entero,
   como las referencias que marco Alex— y la fotografia respira con paralaje
   de scroll que pinta app.js: solo cuesta cuando el lector se mueve. El Ken
   Burns por CSS se probo y se retiro — 14 fps de peaje CONTINUO en esta
   misma maquina (60 -> 40 medido con A/B intercalado) por mantener dos capas
   grandes recomponiendose 24 segundos. El contenedor lleva sobrescan del 6%
   para que el paralaje nunca enseñe el borde. */
.portada{
  position:relative;overflow:hidden;
  min-height:min(92vh,880px);
  min-height:min(100svh,1020px);
  display:flex;align-items:flex-end;
  padding-block:calc(var(--alto-nav) + var(--alto-cinta) + clamp(40px,7vh,86px)) 0;
  border-bottom:1px solid var(--linea);
}
.portada .wrap{position:relative;z-index:3;width:100%;padding-bottom:clamp(24px,3.4vh,46px)}
.portada__foto{position:absolute;inset:-6% 0;z-index:0;overflow:hidden}
.portada__foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 46%)}
/* dos velos: uno lateral que abre sitio al texto, otro al pie que asienta la
   linea de datos. Juntos dan >8:1 sobre el titular sin apagar la fotografia. */
.portada__foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(5,10,19,.95) 0%,rgba(5,10,19,.80) 30%,rgba(6,12,22,.30) 62%,rgba(6,12,22,.58) 100%),
    linear-gradient(0deg,rgba(4,9,17,.94) 0%,rgba(4,9,17,.34) 34%,rgba(4,9,17,0) 62%);
}
.portada__folio{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta-2);display:flex;gap:var(--e4);flex-wrap:wrap;align-items:center;
}
.portada__folio b{color:var(--oro);font-weight:500}
.portada__folio::after{content:"";height:1px;width:clamp(30px,7vw,110px);background:linear-gradient(90deg,var(--oro),transparent)}
.portada h1{
  margin-top:var(--e4);
  font-family:var(--display);font-variation-settings:'opsz' 144;
  /* .96, no menos: a 1280 la italica de Fraunces ya invadia la linea de
     arriba con .93 — lo cazo solapes.py en tickets */
  font-weight:300;font-size:clamp(2.6rem,1rem + 5.8vw,6.1rem);
  line-height:.96;letter-spacing:-.032em;color:#fff;max-width:17ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(4,9,17,.85);
}
.portada h1 em{font-style:italic;font-weight:400;color:var(--oro-claro)}
.portada .lede{margin-top:var(--e4);max-width:52ch;color:var(--tinta);text-shadow:0 1px 18px rgba(4,9,17,.9)}
.portada__hex{
  position:absolute;right:-4%;top:44%;translate:0 -50%;z-index:2;
  width:min(34vw,340px);pointer-events:none;opacity:.34;
}
/* anotacion de expediente: folio vertical y coordenadas, como en un plano */
.portada__hud{
  position:absolute;z-index:3;right:var(--canal);bottom:clamp(24px,3.4vh,46px);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;
  color:var(--tinta-3);text-align:right;pointer-events:none;
}
.portada__hud b{color:var(--oro);font-weight:500;letter-spacing:.2em}
.portada__hud .lin{width:52px;height:1px;background:rgba(201,169,106,.5)}
/* las dos páginas legales no piden un plano completo: media portada basta */
.portada--breve{min-height:min(48vh,400px)}
@media(max-width:900px){.portada__hud{display:none}
  .portada{min-height:min(90vh,720px);min-height:min(94svh,760px)}
  .portada--breve{min-height:min(42vh,340px)}}
/* mira de encuadre: cuatro escuadras finas sobre la foto */
.portada__mira{position:absolute;inset:clamp(14px,2vw,28px);z-index:2;pointer-events:none;opacity:.5}
.portada__mira span{position:absolute;width:20px;height:20px;border:0 solid rgba(201,169,106,.75)}
.portada__mira span:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.portada__mira span:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.portada__mira span:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.portada__mira span:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

/* --- rev 15 · portada «cine»: VIDEO REAL + HUD DE SISTEMAS ----------------
   La calificacion al color de la casa va HORNEADA en el webm y en su
   fotograma (ffmpeg: saturacion recortada, medio paso menos, sombras al navy
   y rebote oro en altas — receta en foto-fuente/CREDITOS-VIDEO.md), no en un
   filter de CSS. Se probo el filter primero: 23 fps contra los 60 de la
   version archivada, medidos A/B en la misma sesion — un filtro de color
   sobre un video a pantalla completa se paga POR CUADRO, pariente directo de
   la leccion del mask-image. Aqui solo queda el velo extra del ::after, que
   tumba las altas y deja caer el rebote oro: gradientes estaticos, costo de
   compositor ordinario. El video arranca invisible y funde en 2.2 s cuando
   de verdad reproduce (clase .va, la pone app.js): nadie ve el salto
   fotograma->video. El lienzo del HUD pinta ENCIMA del velo (z-index:1
   contra el ::after) porque las anotaciones de un sistema van nitidas; lo
   que se ahoga en sombra es la fotografia, no la tinta. */
.portada__video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--foco,50% 46%);
  opacity:0;transition:opacity 2.2s ease;
}
.portada__video.va{opacity:1}
.portada--cine .portada__foto::after{
  background:
    linear-gradient(115deg,rgba(11,21,38,.48) 0%,rgba(11,21,38,.16) 52%,rgba(160,118,48,.14) 100%),
    linear-gradient(100deg,rgba(5,10,19,.95) 0%,rgba(5,10,19,.80) 30%,rgba(6,12,22,.30) 62%,rgba(6,12,22,.58) 100%),
    linear-gradient(0deg,rgba(4,9,17,.94) 0%,rgba(4,9,17,.34) 34%,rgba(4,9,17,0) 62%);
}
/* el lienzo del HUD NO cubre el plano entero: cada pixel de una capa sobre
   video se paga en el compositor por cuadro de video (medido: la capa vacia a
   viewport completo tumbaba 60 -> 34 fps en raster por software). El lienzo
   abraza solo la zona de anotaciones — el muro y el nodo colector — y el JS
   dibuja con el mismo mapa (OFF/TAM en app.js, bloque MDS): si esto cambia,
   cambia alla tambien. */
.portada__vhud{position:absolute;left:24%;top:18%;width:70%;height:60%;z-index:1;pointer-events:none}

/* ---------------------------------------------------------------- placa ---- */
.placa{
  position:relative;background:var(--superficie);border:1px solid var(--linea);
  transition:border-color var(--medio) var(--suave),background var(--medio) var(--suave);
  transform-style:preserve-3d;
}
.placa::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(201,169,106,.075),transparent 70%);
  transition:opacity var(--medio) var(--suave);
}
.placa:hover{border-color:var(--borde-vivo);background:var(--superficie-alta)}
.placa:hover::after{opacity:1}

/* esquinas de plano */
.esquinas{position:relative}
.esquinas::before{
  content:"";position:absolute;inset:9px;pointer-events:none;opacity:.6;
  background:
    linear-gradient(var(--oro),var(--oro)) top left/13px 1px,
    linear-gradient(var(--oro),var(--oro)) top left/1px 13px,
    linear-gradient(var(--oro),var(--oro)) top right/13px 1px,
    linear-gradient(var(--oro),var(--oro)) top right/1px 13px,
    linear-gradient(var(--oro),var(--oro)) bottom left/13px 1px,
    linear-gradient(var(--oro),var(--oro)) bottom left/1px 13px,
    linear-gradient(var(--oro),var(--oro)) bottom right/13px 1px,
    linear-gradient(var(--oro),var(--oro)) bottom right/1px 13px;
  background-repeat:no-repeat;
}

/* --------------------------------------------------------------- índice ---- */
.indice{border-top:1px solid var(--linea)}
.indice__fila{
  display:grid;grid-template-columns:64px minmax(0,.82fr) minmax(0,1.3fr) auto;
  gap:clamp(14px,1.8vw,30px);align-items:baseline;
  padding-block:clamp(22px,2.6vw,34px);
  border-bottom:1px solid var(--linea);
  text-decoration:none;position:relative;
  transition:transform 120ms var(--sal);
}
.indice__fila::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--oro);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 420ms var(--sal);
}
.indice__fila:hover::before{transform:scaleX(1)}
.indice__n,.indice__t{transition:transform var(--medio) var(--sal),color var(--rapido) var(--suave)}
.indice__fila:hover .indice__n,
.indice__fila:hover .indice__t{transform:translateX(10px)}
.indice__n{font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;color:var(--oro);transition:color var(--rapido) var(--suave)}
.indice__fila:hover .indice__n{color:var(--cian-alto)}
.indice__t{
  font-family:var(--display);font-variation-settings:'opsz' 72;
  font-weight:400;font-size:clamp(1.15rem,1rem + .7vw,1.6rem);color:#fff;line-height:1.15;
}
.indice__d{color:var(--tinta-2);font-size:var(--t3);line-height:1.6}
.indice__ir{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);white-space:nowrap;transition:color var(--rapido) var(--suave),transform var(--medio) var(--sal);
}
.indice__fila:hover .indice__ir{color:var(--oro-claro);transform:translateX(5px)}

/* ---------------------------------------------------------------- cinta ---- */
.cinta{
  position:relative;
  border-block:1px solid var(--linea);
  padding-block:var(--e5) var(--e6);
  --dur:58s;
}
.cinta__cabeza{
  max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal);
  display:flex;justify-content:space-between;align-items:center;gap:var(--e4);
  margin-bottom:var(--e5);
}
.cinta__rotulo{font-family:var(--dato);font-size:var(--t1);letter-spacing:.06em;color:var(--tinta-3)}
.cinta__marco{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.cinta__pista{display:flex;align-items:center;gap:clamp(30px,3.4vw,52px);width:max-content;animation:desliza var(--dur) linear infinite}
@keyframes desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cinta:hover .cinta__pista,
.cinta:focus-within .cinta__pista,
.cinta[data-pausa="si"] .cinta__pista{animation-play-state:paused}
/* caja óptica fija: los logotipos reales tienen proporciones muy distintas */
.cinta__logo{flex:none;width:150px;height:44px;display:flex;align-items:center;justify-content:center}
.cinta__logo img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:.5;
  filter:grayscale(1) brightness(1.5) contrast(.92);
  transition:opacity var(--medio) var(--suave),filter var(--medio) var(--suave);
}
.cinta__logo img[alt="Volvo"]{max-width:76%}
.cinta__logo img[alt="Hikvision"]{max-width:80%}
.cinta__logo img[alt="Metrobús"]{max-height:74%}
.cinta__logo:hover img{opacity:.95;filter:none}
.cinta__txt{
  flex:none;font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3);
}
.cinta__pausa{
  flex:none;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);border:1px solid var(--linea);padding:8px 12px;min-height:34px;
}
.cinta__pausa:hover{color:var(--oro-claro);border-color:var(--oro)}

/* ----------------------------------------------------------- expediente ---- */
.expediente{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,64px);
  padding-block:clamp(44px,5.5vw,84px);
  border-top:1px solid var(--linea);
}
.expediente:first-of-type{border-top:0}
.expediente__pnum{font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--cian)}
.expediente h2{
  margin-top:var(--e4);
  font-family:var(--display);font-variation-settings:'opsz' 96;
  font-weight:300;font-size:clamp(1.6rem,1.1rem + 1.5vw,2.4rem);
  line-height:1.08;letter-spacing:-.02em;color:#fff;
}
.expediente p{margin-top:var(--e5);color:var(--tinta-2);font-size:var(--t4);line-height:1.72}
.expediente .cita{
  margin-top:var(--e5);padding-left:var(--e5);
  border-left:1px solid var(--oro);
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t5);line-height:1.55;color:var(--crema);
}

/* partidas: lista de alcance, sin recuadro. La numeracion se queda porque es
   lenguaje de cotizacion; lo que se va es la caja que la encerraba. */
.partidas{display:grid;gap:0;background:none;border:0;border-top:1px solid var(--linea)}
.partida{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--e4);
  padding:var(--e5) 0;border-bottom:1px solid var(--linea);
  transition:border-color var(--rapido) var(--suave);
}
.partida:hover{border-bottom-color:rgba(201,169,106,.55)}
.partida__n{font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;color:var(--oro);line-height:1.6}
.partida b{display:block;color:#fff;font-weight:600;font-size:var(--t4);line-height:1.3}
.partida p{margin:6px 0 0;color:var(--tinta-3);font-size:var(--t2);line-height:1.58;max-width:46ch}

/* figura de obra */
.figura{position:relative;overflow:hidden;border:1px solid var(--linea);background:var(--abismo)}
.figura img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.05)}
.figura::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,.1),rgba(7,15,28,.72));
}
.figura__pie{
  position:absolute;left:var(--e4);bottom:var(--e4);z-index:2;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.05em;
  color:var(--oro-claro);background:rgba(7,15,28,.82);padding:6px 10px;border:1px solid rgba(201,169,106,.3);
}
.figura--alta{min-height:280px}

/* banda de obra a sangre */
.banda{
  position:relative;overflow:hidden;
  padding-block:clamp(56px,7vw,96px);
  border-block:1px solid var(--linea);
}
.banda__fondo{
  position:absolute;inset:-60px;background-size:cover;background-position:center;
  filter:blur(44px) brightness(.42) saturate(1.2);transform:scale(1.2);
  will-change:transform;pointer-events:none;
}
.banda::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--naval-900),rgba(10,22,40,.15) 30%,rgba(10,22,40,.15) 70%,var(--naval-900));
}
.banda__marco{
  position:relative;z-index:2;max-width:980px;margin-inline:auto;
  border:1px solid rgba(201,169,106,.38);
  transform:translateY(var(--pz,0px));
  transform-style:preserve-3d;
}
.banda__marco img{width:100%;height:clamp(220px,42vw,430px);object-fit:cover;display:block}
.banda__marco canvas{display:block;width:100%;height:auto;background:#060D18}
.banda__pie{
  position:relative;z-index:2;max-width:980px;margin:var(--e4) auto 0;
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.05em;
}
.banda__pie .f{color:var(--oro)}
.banda__pie .n{color:var(--tinta-3)}

/* ------------------------------------------------------------- columnas ---- */
.rejilla{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
/* Rev 12 · LA CELDA YA NO ACUSA EL RATON, y esto es una correccion, no un
   olvido. Esta pasada le habia puesto un filete de oro que se dibujaba al
   pasar por encima; quedaba bien y estaba mal. `.celda` es un <div> de
   contenido: no es un enlace, no es un boton, no contiene ninguno —se
   comprobo en las cuatro paginas que la usan—. Un bloque que se enciende al
   pasar el raton PROMETE una accion, y cuando el usuario pulsa y no ocurre
   nada, esa promesa rota es exactamente la sensacion de maqueta. La regla de
   la casa es que el hover va donde hay accion; aqui no la hay, asi que se cae
   tambien el cambio de fondo que arrastraba la rev 11. La celda se lee por su
   tipografia y su filete, que es como se lee una ficha impresa. */
.celda{background:var(--naval-800);padding:clamp(24px,2.6vw,36px)}
.celda__n{font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;font-size:2.1rem;color:rgba(201,169,106,.4);line-height:1}
.celda h3{
  margin:var(--e4) 0 var(--e3);
  font-family:var(--display);font-variation-settings:'opsz' 72;font-weight:400;
  font-size:var(--d1);color:#fff;line-height:1.25;
}
.celda p{color:var(--tinta-2);font-size:var(--t3);line-height:1.66}
.celda .glifo{
  width:42px;height:42px;border:1px solid rgba(201,169,106,.32);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--e4);
  font-family:var(--display);font-size:var(--d2);color:var(--oro);
}
.celda b{display:block;color:#fff;font-weight:600;font-size:var(--t4);line-height:1.3}
.celda small{display:block;margin-top:6px;color:var(--tinta-3);font-size:var(--t2);line-height:1.55}

/* --------------------------------------------- composicion editorial ------ */
/* Nada de celdas: el orden lo marcan el filete, el numeral y el aire. Es la
   misma disciplina de un plano — cajetin fuera, contenido dentro del papel. */
.razones{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(38px,4.4vw,66px) clamp(32px,4vw,58px);
}
.razon{
  padding-top:var(--e5);border-top:1px solid var(--linea);
  transition:border-color var(--medio) var(--suave);
}
.razon:hover{border-top-color:var(--oro)}
.razon__n{
  display:block;font-family:var(--display);font-variation-settings:'opsz' 96;
  font-weight:300;font-size:2.3rem;line-height:1;color:rgba(201,169,106,.42);
  transition:color var(--medio) var(--suave);
}
.razon:hover .razon__n{color:var(--oro)}
.razon h3{
  margin:var(--e4) 0 var(--e3);
  font-family:var(--display);font-variation-settings:'opsz' 72;font-weight:400;
  font-size:var(--d1);color:#fff;line-height:1.25;
}
.razon p{color:var(--tinta-2);font-size:var(--t3);line-height:1.68;max-width:40ch}

.verticales{border-top:1px solid var(--linea)}
.vertical{
  display:grid;grid-template-columns:56px minmax(0,24ch) minmax(0,1fr);
  gap:var(--e3) clamp(18px,2.6vw,44px);align-items:baseline;
  padding:var(--e5) 0;border-bottom:1px solid var(--linea);
  transition:border-color var(--rapido) var(--suave);
}
.vertical:hover{border-bottom-color:rgba(201,169,106,.55)}
.vertical__g{
  font-family:var(--display);font-style:italic;font-weight:300;font-size:var(--d2);
  color:var(--oro);line-height:1;transition:transform var(--medio) var(--sal);
}
.vertical:hover .vertical__g{transform:translateX(5px)}
.vertical b{color:#fff;font-weight:600;font-size:var(--t4);line-height:1.34}
.vertical small{color:var(--tinta-3);font-size:var(--t2);line-height:1.62}

/* -------------------------------------------------------------- fases ------ */
/* Las cinco fases cuelgan del conector como marcas de una linea de tiempo:
   ni una caja, solo la barra de la que nacen. */
.fases{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(20px,2.6vw,44px);background:none;border:0;
}
.fase{background:none;padding:0 clamp(8px,1vw,16px) 0 0;position:relative}
.fase::before{
  content:"";position:absolute;left:0;top:calc(-1 * var(--e6));width:1px;height:var(--e6);
  background:linear-gradient(180deg,var(--oro),rgba(201,169,106,0));
  transition:background var(--medio) var(--suave);
}
.fase:hover::before{background:linear-gradient(180deg,var(--oro-claro),rgba(201,169,106,.25))}
.fase__rn{font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;font-size:2.4rem;line-height:1;color:rgba(42,169,201,.55)}
.fase__et{margin:var(--e4) 0 var(--e2);font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--cian)}
.fase b{display:block;font-family:var(--display);font-variation-settings:'opsz' 72;font-weight:400;font-size:var(--t5);color:#fff;line-height:1.2}
.fase small{display:block;margin-top:var(--e3);color:var(--tinta-3);font-size:var(--t2);line-height:1.6}
/* conector con pulso viajero */
.conector{position:relative;height:1px;background:var(--linea);margin-bottom:var(--e6);overflow:hidden}
.conector::after{
  content:"";position:absolute;top:0;left:0;height:1px;width:120px;
  background:linear-gradient(90deg,transparent,var(--cian-alto),transparent);
  animation:viaja 5.2s linear infinite;
}
@keyframes viaja{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}}

/* --------------------------------------------------------------- papel ----- */
/* documento real sobre papel: una vez por página, justificado (dossier / aviso) */
.papel{
  background:var(--crema);color:#1B2233;
  border:1px solid rgba(201,169,106,.5);
  padding:clamp(28px,4vw,56px);
}
.papel .papel__rotulo,.papel h2,.papel h3{font-family:var(--display);font-weight:400;color:#0A1628}
.papel .papel__rotulo{font-size:var(--d3);font-style:italic;color:#7A5E1E;margin-bottom:var(--e6);line-height:1.15}
.papel h3{font-size:var(--d1);line-height:1.25;margin-bottom:var(--e3);letter-spacing:.005em}
.papel h3.papel__sig{margin-top:var(--e7)}
.papel li,.papel p{color:#39435A}
.papel p{font-size:var(--t4);line-height:1.72;max-width:78ch}
.papel .papel__nota{
  margin-top:var(--e7);padding-top:var(--e5);
  border-top:1px solid rgba(178,145,63,.45);
  font-size:var(--t3);line-height:1.6;max-width:70ch;
}
.papel .lista{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3) var(--e6)}
.papel .lista li{position:relative;padding-left:24px;font-size:var(--t3);line-height:1.55}
.papel .lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:#B2913F;
}
.papel .sello{position:absolute;top:auto;bottom:26px;right:32px;width:104px;height:104px;opacity:.8}

/* ------------------------------------------- el dossier de entrega -------- */
/* Rev 10 · tercer replanteo, y el primero que no dibuja un rectángulo sobre la
   noche. Rev 7 lo puso en papel crema: un salto de exposición de tres pasos.
   Rev 9 lo pasó a pliego azul con retícula milimétrica: seguía siendo un
   recuadro, y la retícula acababa pareciendo papel de imprenta. Aquí no hay
   recuadro ni retícula. Hay una carpeta isométrica de la que se abanican nueve
   hojas al desplazar —cada una con su folio de oro y su lomo rotulado— y, al
   costado, la lista editorial de los nueve documentos. El objeto es uno; los
   documentos, nueve. Por eso el pie sigue siendo verdad. */
.dossier{position:relative}
.dossier__folio{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;
  color:rgba(201,169,106,.62);
}
.dossier__rotulo{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:var(--d3);line-height:1.15;color:var(--oro-claro);
  margin-top:var(--e3);
}
.dossier__cab{padding-bottom:var(--e5);border-bottom:1px solid rgba(201,169,106,.26)}
.dossier__reja{
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;margin-top:clamp(20px,2.6vw,36px);
}
/* Vista y despliegue comparten celda: el documento no se abre EN OTRO SITIO,
   se abre DONDE ESTABA LA CARPETA. Es la diferencia entre consultar un
   expediente y que te manden a otra ventanilla. */
.dossier__vista,.dossier__doc{grid-area:1/1;position:relative;min-width:0}
.dossier__d{width:100%;height:auto;display:block;overflow:visible}
/* el sello se posa sobre la carpeta, no sobre el texto: es el timbre del acta */
.dossier__vista .sello{
  position:absolute;top:auto;left:auto;right:1%;bottom:0;width:clamp(74px,8vw,104px);height:auto;opacity:.42;
}
/* la lista: numeral de oro, filete corto y nada más. Un renglón sin folio no se
   puede reclamar, así que el folio va primero y en metal. */
.dossier__lista{
  list-style:none;counter-reset:dss;display:grid;gap:var(--e4);min-width:0;
}
.dossier__lista li{
  counter-increment:dss;position:relative;padding-left:42px;padding-top:11px;
  font-size:var(--t3);line-height:1.6;color:var(--tinta);
  opacity:clamp(.28,(var(--p,1) - var(--k,0) + .18) / .3,1);
}
.dossier__lista li::before{
  content:counter(dss,decimal-leading-zero);position:absolute;left:0;top:10px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.08em;color:var(--oro);
}
.dossier__lista li::after{
  content:"";position:absolute;left:0;top:0;width:30px;height:1px;
  background:linear-gradient(90deg,var(--oro),transparent);
}
/* ---- rev 11 · la hoja del abanico es un mando -------------------------- */
.dossier__d .golpe{fill:transparent;stroke:none}
@media(hover:hover){
  .dossier__d g.hoja{cursor:pointer}
  /* La hoja se adelanta del abanico. El desplazamiento del apunte NO reescribe
     la transformación —esa la manda el motor de scroll, más abajo— sino que le
     suma dos variables propias. Dos reglas peleándose por `transform` es el
     error clásico; dos variables sumando dentro de una sola, no. */
  .dossier__d g.hoja.hoja--cerca{--sx:-13px;--sy:-9px}
  .dossier__d g.hoja.hoja--cerca .pl{fill:rgba(30,58,88,.98);stroke:rgba(95,208,214,.92)}
  .dossier__d g.hoja.hoja--cerca .num{fill:#E2CE9C}
  .dossier__d g.hoja.hoja--cerca .lomo{fill:var(--tinta)}
}
/* padding-block y no line-height: un renglón de una sola línea medía 23 px de
   alto y el mínimo táctil son 24. Se paga con seis píxeles arriba y abajo, que
   además le dan al blanco el margen que un dedo necesita de verdad. */
.dossier__b{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:7px 0;margin:0;
  font:inherit;color:inherit;cursor:pointer;position:relative;
}
.dossier__bn{
  position:absolute;left:-42px;top:6px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.08em;color:var(--oro);
}
.dossier__lista li{list-style:none}
/* el numeral pasa al botón: el ::before del li duplicaba el folio */
.dossier__lista li::before{content:none}
.dossier__b::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;
  background:var(--oro);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s cubic-bezier(.22,.72,.24,1);
}
.dossier__b:hover::after,.dossier__b:focus-visible::after,
.dossier__b[aria-expanded="true"]::after{transform:scaleX(1)}
.dossier__b[aria-expanded="true"] .dossier__bn{color:#E2CE9C}
.dossier__lista li:has(.dossier__b[aria-expanded="true"]){opacity:1}

/* ---- rev 11 · el despliegue: una hoja del dossier, a tamaño de lectura -- */
.dossier__doc{
  display:grid;place-items:center;padding:clamp(6px,1vw,14px);
  border:1px solid rgba(201,169,106,.30);background:rgba(6,14,26,.62);
}
/* `display:grid` le gana al `[hidden]{display:none}` del navegador, que es una
   regla de agente de usuario y pierde contra cualquier clase. Sin esta linea el
   panel cerrado seguia ocupando su celda —un recuadro vacio con filete encima
   de la carpeta— y el atributo hidden era decorativo. Lo cazo la suite. */
.dossier__doc[hidden]{display:none}
/* En ancho, el documento OCUPA el sitio de la carpeta: comparten celda y la
   carpeta se aparta mientras dura la consulta. */
@media(min-width:901px){
  .dossier--abierto .dossier__vista{visibility:hidden}
}
/* En estrecho no hay dos columnas que intercambiar. La carpeta se queda donde
   esta —abanicada, que ahi es una ilustracion— y el documento se abre DEBAJO
   de la lista, pegado al renglon que se acaba de tocar. Con la disposicion de
   escritorio el panel caia arriba del todo, fuera de pantalla: se tocaba un
   renglon y no pasaba nada visible. */
@media(max-width:900px){
  .dossier__vista,.dossier__doc{grid-area:auto}
  .dossier__doc{order:1;margin-top:var(--e4)}
}
.dossier__x{
  position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;
  display:grid;place-items:center;background:rgba(6,14,26,.86);
  border:1px solid rgba(201,169,106,.42);color:var(--oro);
  font-family:var(--dato);font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .24s ease,color .24s ease;
}
.dossier__x:hover,.dossier__x:focus-visible{border-color:var(--oro);color:#E2CE9C}
.docm{margin:0;display:grid;gap:clamp(8px,1vw,14px);justify-items:center;width:100%}
.docm[hidden]{display:none}
.docm__d{
  width:auto;max-width:100%;max-height:min(74vh,592px);height:auto;display:block;
  animation:docentra .46s cubic-bezier(.16,.84,.32,1) both;
}
@keyframes docentra{
  from{opacity:0;transform:translateY(14px) scale(.972)}
  to{opacity:1;transform:none}
}
.docm__pie{
  display:grid;gap:4px;text-align:center;max-width:46ch;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.05em;line-height:1.55;
}
.docm__pie .f{color:var(--oro);letter-spacing:.16em}
/* el nombre del documento va en mono —es un folio—, pero su descripcion es
   prosa: en mono, tres renglones de texto corrido se leen como un volcado de
   consola. Vuelve a la tipografia del cuerpo. */
.docm__pie .n{
  color:var(--tinta-2);font-family:var(--texto,inherit);font-size:var(--t2);
  letter-spacing:normal;text-transform:none;line-height:1.6;
}

/* la tinta de las nueve miniaturas: la misma paleta del sitio, a escala de hoja */
.docm__d{--dt3:rgba(138,172,206,.78)}
.docm__d .dhoja{fill:rgba(11,23,40,.96);stroke:rgba(95,208,214,.34);stroke-width:1}
.docm__d .dmarca{fill:none;stroke:var(--oro);stroke-width:1.1}
.docm__d .dpunto{fill:var(--oro)}
.docm__d .df{fill:none;stroke:rgba(95,208,214,.32);stroke-width:.9}
.docm__d .dfino{fill:none;stroke:rgba(138,172,206,.20);stroke-width:.6}
.docm__d .doro{fill:none;stroke:rgba(201,169,106,.62);stroke-width:.9}
.docm__d .dmuro{fill:none;stroke:rgba(95,208,214,.62);stroke-width:1.5;stroke-linejoin:miter}
.docm__d .dvano{fill:none;stroke:rgba(11,23,40,1);stroke-width:2.6}
.docm__d .dnodo{fill:rgba(95,208,214,.30);stroke:rgba(95,208,214,.85);stroke-width:1}
.docm__d .dtron{fill:none;stroke:rgba(201,169,106,.72);stroke-width:1.2;stroke-linejoin:round}
.docm__d .dcotal{fill:none;stroke:rgba(138,172,206,.46);stroke-width:.7}
.docm__d .dnorte{fill:var(--oro);stroke:none}
.docm__d .dcaj{fill:rgba(6,14,26,.72);stroke:rgba(201,169,106,.44);stroke-width:.9}
.docm__d .dcuadro{fill:rgba(6,14,26,.6);stroke:rgba(95,208,214,.28);stroke-width:.8}
.docm__d .dcasilla{fill:rgba(6,14,26,.7);stroke:rgba(95,208,214,.48);stroke-width:.9}
.docm__d .dpalomita{fill:none;stroke:var(--oro);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.docm__d .dcelda{fill:none;stroke:rgba(138,172,206,.22);stroke-width:.6}
.docm__d .dmarca2{fill:rgba(201,169,106,.52);stroke:none}
/* el canal vacio de la barra se levanta con el azul de la casa, no con blanco
   al 5 %: el blanco puro no existe en esta paleta ni siquiera diluido */
.docm__d .dbarra{fill:rgba(138,172,206,.07);stroke:rgba(138,172,206,.22);stroke-width:.6}
.docm__d .dbarrall{fill:rgba(95,208,214,.52);stroke:none}
.docm__d .dbarrao{fill:rgba(201,169,106,.55);stroke:none}
.docm__d .dsello{fill:none;stroke:rgba(201,169,106,.55);stroke-width:1.2}
.docm__d .dsello--2{stroke:rgba(201,169,106,.28);stroke-dasharray:3 3}
.docm__d .dveredicto{fill:rgba(95,208,214,.10);stroke:rgba(95,208,214,.48);stroke-width:.9}
.docm__d .dconf{fill:rgba(201,169,106,.10);stroke:rgba(201,169,106,.52);stroke-width:.9}
.docm__d .dapa{fill:rgba(16,32,54,.9);stroke:rgba(95,208,214,.62);stroke-width:1.2}
.docm__d .dapa2{fill:rgba(6,14,26,.8);stroke:rgba(95,208,214,.34);stroke-width:.8}
.docm__d .dled{fill:rgba(95,208,214,.75);stroke:none}
.docm__d .dllam{fill:none;stroke:rgba(201,169,106,.48);stroke-width:.7}
.docm__d .dllamc{fill:rgba(6,14,26,.9);stroke:rgba(201,169,106,.68);stroke-width:.9}
.docm__d .dpunteo{fill:none;stroke:rgba(138,172,206,.30);stroke-width:.7;stroke-dasharray:1 3}
.docm__d .drub{fill:none;stroke:rgba(138,172,206,.42);stroke-width:.8;stroke-linecap:round}
.docm__d text{font-family:var(--dato)}
.docm__d .dcab{fill:var(--tinta);font-size:6.6px;letter-spacing:.19em}
.docm__d .dcab--2{fill:var(--tinta-3);font-size:5.2px;letter-spacing:.24em}
.docm__d .dfolio{fill:var(--oro);font-size:6.4px;letter-spacing:.13em}
.docm__d .dtit{fill:var(--cian);font-size:11px;letter-spacing:.03em}
.docm__d .dsec{fill:var(--oro);font-size:6.4px;letter-spacing:.17em}
.docm__d .dcel{fill:var(--dt3);font-size:6.6px;letter-spacing:.02em}
.docm__d .dcelc{fill:var(--tinta);font-size:6.4px;letter-spacing:.11em}
.docm__d .dcota{fill:rgba(138,172,206,.72);font-size:5.4px;letter-spacing:.06em}
.docm__d .dnota{fill:rgba(138,172,206,.56);font-size:5.8px;letter-spacing:.02em}
.docm__d .dform{fill:var(--cian);font-size:7.4px;letter-spacing:.02em}
.docm__d .dmes{fill:rgba(138,172,206,.66);font-size:5.6px;letter-spacing:.04em}
.docm__d .dok{fill:var(--oro);font-size:5.8px;letter-spacing:.14em}
.docm__d .dokt{fill:var(--cian);font-size:6.4px;letter-spacing:.06em}
.docm__d .dnum{fill:var(--oro);font-size:6.6px;letter-spacing:.06em}
.docm__d .dllamt{fill:var(--oro);font-size:6.4px}
.docm__d .dvertx{fill:var(--cian);font-size:7.4px;letter-spacing:.14em}
.docm__d .dconft{fill:var(--oro);font-size:6.4px;letter-spacing:.15em}
.docm__d .dpie{fill:rgba(138,172,206,.48);font-size:5.4px;letter-spacing:.18em}

@media(prefers-reduced-motion:reduce){
  /* panel estático: el documento está o no está, sin entrada */
  .docm__d{animation:none}
  .dossier__d g.hoja{transition:none}
  .dossier__b::after{transition:none}
}

.dossier__nota{
  margin-top:clamp(22px,2.8vw,38px);padding-top:var(--e5);
  border-top:1px solid rgba(201,169,106,.26);
  font-size:var(--t3);line-height:1.66;color:var(--tinta-2);max-width:70ch;
}
.dossier__pie{
  margin-top:var(--e5);display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.05em;
}
.dossier__pie .f{color:var(--oro)}
.dossier__pie .n{color:var(--tinta-3)}
@media(max-width:900px){
  .dossier__reja{grid-template-columns:1fr;gap:clamp(20px,5vw,34px)}
  .dossier__lista li{opacity:1}
}

/* -------------------------------------------------------------- tabla ------ */
/* en pantalla estrecha la tabla se desplaza en su marco, no se rompe */
.tabla-marco{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-marco:focus-visible{outline:2px solid var(--foco);outline-offset:4px}
.tabla{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--t3)}
/* el pie de tabla es una frase, no una etiqueta: caja normal */
.tabla caption{
  text-align:left;font-family:var(--dato);font-size:var(--t1);letter-spacing:.04em;
  color:var(--tinta-3);padding-bottom:var(--e4);
}
.tabla th,.tabla td{text-align:left;padding:var(--e4) var(--e4) var(--e4) 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cian);font-weight:500;white-space:nowrap;
}
.tabla td{color:var(--tinta-2)}
.tabla td b{color:#fff;font-weight:600}
.tabla td .mono{font-family:var(--dato);font-size:var(--t2);color:var(--oro-claro);letter-spacing:.05em}
.tabla tbody tr{transition:background var(--rapido) var(--suave)}
.tabla tbody tr:hover{background:rgba(21,34,56,.7)}

/* -------------------------------------------------------------- geo -------- */
.geo{background:var(--naval-800);padding:clamp(26px,3vw,40px);border:1px solid var(--linea);position:relative;transition:border-color var(--medio) var(--suave)}
.geo:hover{border-color:var(--borde-vivo)}
.geo__cod{
  font-family:var(--dato);font-size:var(--d2);letter-spacing:.1em;color:var(--oro);
  display:block;line-height:1;
}
.geo__reg{margin-top:var(--e4);font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--cian)}
.geo h2,.geo h3{margin-top:var(--e2);font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;font-size:var(--d3);color:#fff}
.geo__sub{font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;color:var(--tinta-3);text-transform:uppercase;margin-top:4px}
.geo p{margin-top:var(--e4);color:var(--tinta-2);font-size:var(--t3);line-height:1.65}
.geo__tier{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--linea)}
.geo__tier .tl{font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.geo__tier .tc{margin-top:6px;color:var(--tinta-2);font-size:var(--t3);line-height:1.55}
/* la región principal pesa más: dos columnas y ancho completo */
.geo--principal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
/* las dos regiones secundarias van a la par: con el filete a la vista, dos
   cajas de alto distinto se leen como un descuadre, no como jerarquia */
.geo__par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px);align-items:stretch}
@media(max-width:840px){.geo--principal,.geo__par{grid-template-columns:1fr}}

/* ------------------------------------------------------------ contacto ----- */
.ficha{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,64px);
  background:var(--naval-800);border:1px solid rgba(201,169,106,.28);
  padding:clamp(30px,4vw,60px);position:relative;overflow:hidden;
}
.ficha__rol{font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--oro)}
.ficha h2{margin-top:var(--e2);font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;font-size:2rem;color:#fff}
.ficha__filas{margin-top:var(--e6)}
.ficha__filas a,.ficha__filas div{
  display:flex;gap:var(--e5);align-items:baseline;padding:14px 0;
  border-top:1px solid var(--linea);text-decoration:none;
}
.ficha__filas .k{font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--cian);min-width:78px;flex:none}
.ficha__filas .v{color:var(--tinta);font-size:var(--t4);transition:color var(--rapido) var(--suave)}
.ficha__filas a:hover .v{color:var(--oro-claro)}
.ficha__nota{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t5);line-height:1.65;color:var(--crema);
}
.ficha__acciones{margin-top:var(--e6);display:flex;flex-direction:column;gap:var(--e3);align-items:flex-start}
.sello{position:absolute;top:26px;right:28px;width:108px;height:108px;opacity:.85;pointer-events:none}
@media(min-width:1025px){.ficha__nota{padding-right:128px}}
@media(max-width:1024px){.ficha .sello{top:auto;bottom:26px;opacity:.5}}

/* ------------------------------------------------------------- pasos ------- */
.pasos{counter-reset:paso;display:grid;gap:0;border-top:1px solid var(--linea)}
.paso{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--e5);
  padding-block:var(--e5);border-bottom:1px solid var(--linea);align-items:baseline;
}
.paso__n{font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;color:var(--oro)}
.paso b{display:block;color:#fff;font-weight:600;font-size:var(--t4)}
.paso p{margin-top:6px;color:var(--tinta-2);font-size:var(--t3);line-height:1.62}

/* ------------------------------------------------------------ formulario --- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.form__full{grid-column:1/-1}
.campo label,.leyenda{
  display:block;font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro);margin-bottom:var(--e2);
}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:48px;background:var(--abismo);
  border:1px solid var(--linea);color:var(--tinta);
  padding:13px 14px;font-family:var(--texto);font-size:var(--t4);
  transition:border-color var(--rapido) var(--suave);
}
.campo textarea{min-height:132px;resize:vertical;line-height:1.6}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--linea-fuerte)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{border-color:var(--cian);outline:2px solid var(--foco);outline-offset:2px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--cian)}
.campo input:user-invalid,.campo select:user-invalid,.campo textarea:user-invalid{border-color:#D8734F}
/* Prefijo telefonico: el pais elegido se planta a la izquierda del campo, en
   la letra de dato, para que nadie escriba un +52 que no le toca. */
.campo__tel{display:flex;align-items:stretch}
.campo__pref{
  display:flex;align-items:center;flex:none;padding:0 14px;
  font-family:var(--dato);font-size:var(--t4);letter-spacing:.05em;color:var(--oro);
  background:var(--naval-700);border:1px solid var(--linea);border-right:0;
  min-width:62px;justify-content:center;
}
.campo__tel input{border-left-color:transparent}
.campo__ayuda{margin-top:6px;font-size:var(--t2);color:var(--tinta-3);line-height:1.5}
.campo__error{margin-top:6px;font-family:var(--dato);font-size:var(--t1);letter-spacing:.06em;color:#E8895F;min-height:1em}

.sev{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3)}
.sev input{position:absolute;opacity:0;width:1px;height:1px}
.sev label{
  display:block;border:1px solid var(--linea);padding:15px 16px;cursor:pointer;
  text-transform:none;letter-spacing:0;color:inherit;font-family:var(--texto);margin:0;
  transition:border-color var(--rapido) var(--suave),background var(--rapido) var(--suave);
}
.sev label b{display:block;color:#fff;font-size:var(--t3);font-weight:600}
.sev label span{display:block;margin-top:4px;color:var(--tinta-3);font-size:var(--t2);line-height:1.45}
.sev label:hover{border-color:var(--linea-fuerte)}
.sev input:checked + label{border-color:var(--cian);background:var(--naval-700)}
.sev input:focus-visible + label{outline:2px solid var(--foco);outline-offset:3px}

.acuse{
  margin-top:var(--e5);border:1px solid var(--cian);background:rgba(27,122,146,.14);
  padding:var(--e5);display:none;
}
.acuse[data-abierto="si"]{display:block}
.acuse__folio{font-family:var(--dato);font-size:var(--t5);letter-spacing:.08em;color:var(--cian-alto)}
.acuse p{margin-top:var(--e3);font-size:var(--t3);color:var(--tinta-2);line-height:1.6}
.acuse pre{
  margin-top:var(--e4);padding:var(--e4);background:var(--abismo);border:1px solid var(--linea);
  font-family:var(--dato);font-size:var(--t1);line-height:1.7;color:var(--tinta-2);
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;
}

.aviso-legal{
  margin-top:var(--e5);border-left:1px solid var(--oro);padding-left:var(--e4);
  color:var(--tinta-3);font-size:var(--t2);line-height:1.65;max-width:70ch;
}
.urgente{
  margin-top:var(--e6);border:1px solid rgba(42,169,201,.4);background:var(--naval-700);
  padding:var(--e5);font-size:var(--t3);color:var(--tinta);line-height:1.6;
}
.urgente a{color:var(--cian-alto);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(95,208,214,.4)}
.urgente a:hover{color:#fff}

/* --------------------------------------------------------------- modal ----- */
.velo{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:var(--e5);background:rgba(5,11,22,.82);
  opacity:0;pointer-events:none;transition:opacity var(--medio) var(--suave);
}
.velo.abierto{opacity:1;pointer-events:auto}
.modal{
  position:relative;width:100%;max-width:700px;max-height:88vh;overflow-y:auto;
  background:var(--naval-800);border:0;
  box-shadow:0 30px 80px rgba(0,0,0,.62);
  transform:translateY(22px);transition:transform 320ms var(--sal);
}
.velo.abierto .modal{transform:none}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cian),var(--oro))}
.modal__cerrar{
  position:absolute;top:16px;right:16px;width:40px;height:40px;z-index:3;
  border:1px solid var(--linea);color:var(--tinta-2);font-size:var(--d1);line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--rapido) var(--suave),color var(--rapido) var(--suave);
}
.modal__cerrar:hover{border-color:var(--oro);color:var(--oro)}
.modal__cuerpo{padding:clamp(28px,4vw,48px)}
.modal .m-eyebrow{
  display:inline-flex;align-items:center;gap:var(--e3);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.185em;text-transform:uppercase;color:var(--cian);
}
.modal .m-eyebrow::before{content:"";width:26px;height:1px;background:var(--cian)}
.modal .m-client{
  margin:var(--e4) 0 4px;font-family:var(--display);font-variation-settings:'opsz' 96;
  font-weight:300;font-size:clamp(1.7rem,1.2rem + 1.4vw,2.2rem);color:#fff;line-height:1.05;
}
.modal .m-sector{font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.modal .m-tags{display:flex;gap:var(--e2);flex-wrap:wrap;margin:var(--e5) 0}
.etiqueta,.modal .m-tags span{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cian);border:1px solid rgba(42,169,201,.34);padding:5px 9px;
}
.modal .m-desc{color:var(--tinta-2);font-size:var(--t4);line-height:1.75;margin-bottom:var(--e6)}
.modal .m-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-bottom:var(--e5)}
.modal .m-metrics div{background:var(--abismo);padding:var(--e5) var(--e3);text-align:center}
.modal .m-metrics b{display:block;font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;font-size:var(--d2);color:var(--oro-claro);line-height:1}
.modal .m-metrics small{display:block;margin-top:var(--e3);font-family:var(--dato);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.modal .m-nda{
  border-left:1px solid var(--oro);padding:var(--e3) 0 var(--e3) var(--e4);
  color:var(--tinta-3);font-size:var(--t2);line-height:1.62;
  font-family:var(--display);font-style:italic;font-weight:300;
}
.modal .m-actions{margin-top:var(--e5);display:flex;gap:var(--e3);flex-wrap:wrap}
.modal .m-cta{
  display:inline-flex;align-items:center;gap:var(--e2);min-height:46px;padding:12px 22px;
  font-size:var(--t3);font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:background var(--rapido) var(--suave),color var(--rapido) var(--suave),border-color var(--rapido) var(--suave);
}
.m-wa{background:#1F7A4D;color:#fff}.m-wa:hover{background:#25995f}
.m-mail{border-color:var(--oro);color:var(--oro-claro)}.m-mail:hover{background:var(--oro);color:var(--naval-900)}
.m-web{background:var(--cian);color:var(--naval-900)}.m-web:hover{background:var(--cian-alto)}
.m-cta.fantasma{border-color:var(--linea-fuerte);color:var(--tinta-2);cursor:pointer}
.m-cta.fantasma:hover{border-color:var(--cian);color:var(--cian-alto)}
body.modal-abierto{overflow:hidden}

/* elementos que abren modal */
[data-client],[data-partner]{cursor:pointer}

/* ------------------------------------------------------------- muro logos -- */
/* Los partners no viven en celdas: se apoyan sobre un filete comun y el resto
   del muro se atenua cuando uno se toca. Menos reja, mas sala de exposicion. */
.muro{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(20px,2.4vw,34px) clamp(26px,3.2vw,54px);
  background:none;border:0;border-top:1px solid var(--linea);
  padding-top:clamp(28px,3vw,44px);
}
.muro__pieza{
  flex:0 0 auto;min-width:118px;min-height:48px;
  display:flex;align-items:center;justify-content:center;
  padding:0 0 var(--e3);background:none;border:0;border-bottom:1px solid transparent;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.12em;color:var(--tinta-2);
  transition:color var(--rapido) var(--suave),border-color var(--rapido) var(--suave),
             transform var(--medio) var(--sal),opacity var(--medio) var(--suave);
}
/* mismo criterio que en .cliente: el filete se pone en oro y el logotipo
   recupera color; la pieza no despega del muro porque los muros no despegan */
.muro__pieza:hover,.muro__pieza:focus-visible{color:var(--oro-claro);border-bottom-color:var(--oro)}
.muro:hover .muro__pieza:not(:hover){opacity:.42}
/* sin celdas hay que normalizar opticamente: un wordmark ancho no puede pesar
   cuatro veces mas que un isotipo compacto */
.muro__pieza img{max-height:24px;max-width:116px;width:auto;object-fit:contain;opacity:.72;filter:grayscale(1) brightness(1.4);transition:opacity var(--rapido) var(--suave),filter var(--rapido) var(--suave)}
.muro__pieza img[alt="Grandstream"]{filter:grayscale(1) brightness(3.4) contrast(.85);max-height:27px}
.muro__pieza img[alt="Ubiquiti Networks"]{max-height:21px}
.muro__pieza img[alt="Axis Communications"]{max-height:26px}
.muro__pieza:hover img{opacity:1;filter:none}

/* clientes: logo + acción */
/* Portafolio sin reja: cada marca se apoya en su filete y, al tocarla, baja su
   ficha con el sector. El sector se lee sin abrir el expediente. */
.clientes{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(30px,3.6vw,50px) clamp(30px,4vw,64px);
  margin-top:clamp(34px,4vw,54px);
  background:none;border:0;
}
.cliente{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--e4);
  flex:0 0 auto;min-width:150px;max-width:230px;
  padding:0;background:none;border:0;
  text-align:left;cursor:pointer;
  font-family:var(--dato);font-size:var(--t2);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);
  transition:transform var(--medio) var(--sal),opacity var(--medio) var(--suave);
}
/* la marca se apoya en su propio filete y la ficha cuelga debajo: logotipo,
   filete, pie. Es la estructura de una lamina, no de una celda. */
.cliente__marca{
  display:flex;align-items:flex-end;min-height:38px;width:100%;
  padding-bottom:var(--e3);border-bottom:1px solid var(--linea);
  transition:border-color var(--rapido) var(--suave);
}
.cliente:hover .cliente__marca,.cliente:focus-visible .cliente__marca{border-bottom-color:var(--oro)}
.cliente__ficha{display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(5px);
  transition:opacity var(--medio) var(--suave),transform var(--medio) var(--sal)}
.cliente__sec{font-family:var(--texto);font-size:var(--t2);letter-spacing:.01em;text-transform:none;color:var(--tinta-2)}
.cliente__ir{font-family:var(--dato);font-size:var(--t1);letter-spacing:.18em;color:var(--oro)}
/* Rev 12 · fuera el translateY(-4px). Levantar la tarjeta cuatro pixeles al
   pasar el raton es el gesto mas repetido de la web generada por maquina, y
   ademas no significa nada: un logotipo de cliente no flota. Lo que hace un
   catalogo de verdad es DESTACAR la pieza —el logo recupera su color y su
   filete se pone en oro— mientras las demas se retiran. El movimiento que
   queda es el de la ficha, que si viene de algun sitio: cuelga del filete. */
.cliente:hover .cliente__ficha,.cliente:focus-visible .cliente__ficha{opacity:1;transform:none}
.cliente:hover img,.cliente:focus-visible img{opacity:1;filter:grayscale(0) brightness(1.05)}
.clientes:hover .cliente:not(:hover){opacity:.55}
.clientes img{max-height:30px;max-width:150px;width:auto;object-fit:contain;opacity:.8;filter:grayscale(1) brightness(1.35);transition:opacity var(--rapido) var(--suave),filter var(--rapido) var(--suave)}
.clientes img[alt="Metrobús"]{filter:grayscale(1) brightness(2.4);max-height:34px}
.clientes img[alt="Teletón"]{max-height:36px;filter:grayscale(1) brightness(2.9)}
.clientes img[alt="Audi"]{max-height:22px}
.cliente:hover img,.cliente:focus-visible img{opacity:1;filter:none}

/* --------------------------------------------------------------- TBS ------- */
.tbs{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:start}
.tbs h3{
  margin-top:var(--e4);font-family:var(--display);font-variation-settings:'opsz' 96;
  font-weight:300;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);color:#fff;line-height:1.1;
}
.tbs h3 em{font-style:italic;color:var(--oro)}
.tbs p{margin-top:var(--e5);color:var(--tinta-2);font-size:var(--t4);line-height:1.72}
.tbs__swiss{
  display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e5);
  border:1px solid var(--linea);padding:8px 12px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);
}
.tbs__lista{list-style:none;margin-top:var(--e5);border-top:1px solid var(--linea)}
.tbs__lista li{display:grid;grid-template-columns:44px 1fr;gap:var(--e4);padding:var(--e4) 0;border-bottom:1px solid var(--linea)}
.tbs__lista .n{font-family:var(--dato);font-size:var(--t1);color:var(--oro);letter-spacing:.12em}
.tbs__lista b{display:block;color:#fff;font-weight:600;font-size:var(--t4);line-height:1.35}
.tbs__lista small{display:block;margin-top:4px;color:var(--tinta-3);font-size:var(--t2);line-height:1.5}
.tbs__acciones{margin-top:var(--e6);display:flex;gap:var(--e3);flex-wrap:wrap}
.tbs__fotos{display:grid;gap:var(--e4)}
.tbs__fotos .figura img{height:clamp(180px,24vw,260px)}

/* --------------------------------------------------------------- pie ------- */
footer{border-top:1px solid var(--linea);background:var(--abismo);padding-block:var(--e8) var(--e6)}
.pie{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.pie__nav{list-style:none;display:grid;gap:var(--e2)}
.pie__nav a{display:inline-block;padding-block:5px;font-size:var(--t3);color:var(--tinta-2);text-decoration:none;transition:color var(--rapido) var(--suave)}
.pie__nav a:hover{color:var(--oro-claro)}
.pie__intro{margin-top:var(--e5);max-width:34ch;color:var(--tinta-3);font-size:var(--t3);line-height:1.66}
.pie__tit{font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--cian);margin-bottom:var(--e4)}
.cajetin{display:flex;flex-wrap:wrap;border:1px solid var(--linea);margin-top:var(--e6)}
.cajetin > div{padding:9px 16px;border-right:1px solid var(--linea);flex:1 1 auto}
.cajetin > div:last-child{border-right:0}
.cajetin span{display:block;font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3)}
.cajetin b{display:block;margin-top:3px;font-family:var(--dato);font-size:var(--t1);letter-spacing:.1em;color:var(--tinta-2);font-weight:500}
.cajetin b.oro{color:var(--oro)}
.pie__legal{
  margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.05em;color:var(--tinta-3);
}
.pie__legal a{display:inline-block;padding-block:5px;color:var(--tinta-3);text-decoration:none}
.pie__legal a:hover{color:var(--oro-claro)}



/* ---------------------------------------------- lamina de obra (duotono) --- */
/* duotono real: la foto aporta luminosidad, el fondo aporta el color de marca */
.figura--lamina{background:linear-gradient(152deg,#16465C 0%,#0C1E33 46%,#0A1628 68%,#4B3B1B 100%)}
.figura--lamina img{
  filter:grayscale(1) contrast(1.22) brightness(.96);
  mix-blend-mode:luminosity;
}
.figura--lamina::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%,rgba(95,208,214,.14),transparent 62%);
}
.figura--lamina::after{
  background:linear-gradient(180deg,rgba(7,15,28,.12) 0%,rgba(7,15,28,.30) 55%,rgba(7,15,28,.85) 100%);
}
/* marcas de medicion: la lamina se lee como plano, no como foto de banco */
.figura__marcas{position:absolute;inset:0;z-index:2;pointer-events:none}
.figura__marcas span{position:absolute;background:rgba(201,169,106,.55)}
.figura__marcas span:nth-child(1){left:14px;top:14px;width:16px;height:1px}
.figura__marcas span:nth-child(2){left:14px;top:14px;width:1px;height:16px}
.figura__marcas span:nth-child(3){right:14px;bottom:14px;width:16px;height:1px}
.figura__marcas span:nth-child(4){right:14px;bottom:14px;width:1px;height:16px}
.figura__ref{
  position:absolute;right:14px;top:12px;z-index:3;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;color:rgba(201,169,106,.8);
}

/* -------------------------------------------------------- lamina viva ----- */
/* La foto de obra no se queda quieta: el encuadre avanza muy despacio, la
   lamina se desplaza con el scroll y cada pocos segundos la cruza el barrido
   del escaner. Movimiento con motivo — es material bajo inspeccion, no un
   carrusel de efectos. */
.figura--viva{position:relative}
.figura--viva img{
  translate:0 var(--py,0px);
  animation:encuadre 30s ease-in-out infinite alternate;
  will-change:translate,scale;
}
@keyframes encuadre{
  from{scale:1.045;object-position:47% 42%}
  to  {scale:1.13; object-position:57% 52%}
}
.figura--viva::before{
  content:"";position:absolute;left:0;right:0;top:0;height:22%;z-index:2;
  pointer-events:none;opacity:0;
  background:linear-gradient(180deg,
    rgba(95,208,214,0) 0%,rgba(95,208,214,.10) 40%,
    rgba(227,206,156,.34) 52%,rgba(95,208,214,.08) 64%,rgba(95,208,214,0) 100%);
  animation:barrido 8.5s cubic-bezier(.45,.02,.5,1) infinite;
}
@keyframes barrido{
  0%,58%  {transform:translateY(-24%);opacity:0}
  61%     {opacity:.95}
  93%     {transform:translateY(430%);opacity:.85}
  100%    {transform:translateY(470%);opacity:0}
}
/* mira de encuadre: cuatro escuadras que se cierran al acercarse */
.figura__mira{position:absolute;inset:0;z-index:3;pointer-events:none}
.figura__mira span{position:absolute;width:15px;height:15px;opacity:.55;
  border:0 solid rgba(201,169,106,.85);transition:inset var(--medio) var(--sal),opacity var(--medio) var(--suave)}
.figura__mira span:nth-child(1){left:12px;top:12px;border-left-width:1px;border-top-width:1px}
.figura__mira span:nth-child(2){right:12px;top:12px;border-right-width:1px;border-top-width:1px}
.figura__mira span:nth-child(3){left:12px;bottom:12px;border-left-width:1px;border-bottom-width:1px}
.figura__mira span:nth-child(4){right:12px;bottom:12px;border-right-width:1px;border-bottom-width:1px}
.figura--viva:hover .figura__mira span{opacity:1}

/* ------------------------------------------------- cobertura sobre mapa --- */
/* El mapa es la pagina: sale del ancho de texto y se lee desde la puerta.
   El selector y la ficha van debajo, subordinados. */
/* --- rev 8.1: el mapa es la portada -------------------------------------
   Antes habia una fotografia de fachada nocturna arriba y el mapa despues, en
   una banda con filete. Dos veces lo mismo y ninguna de las dos grande. Ahora
   la pagina abre con el mapa a sangre, apoyado al pie del cuadro, y el titular
   se monta sobre su borde de arriba. El borde no se corta: se disuelve en la
   noche de la pagina con un velo de tres capas, que es lo que garantiza que el
   titular tenga contraste de titular sin que haya que apagar el mapa. */
.portada--mapa{
  /* la portada empieza bajo la cinta y la barra, no detrás de ellas: la altura
     se descuenta para que el planisferio entero quepa en la primera pantalla.
     Un mapa de cobertura cortado por el borde inferior es una cobertura que se
     duda. */
  min-height:min(calc(100vh - var(--alto-nav) - var(--alto-cinta) - 4px),880px);
  align-items:flex-start;                    /* el texto arriba, el mapa al pie */
  padding-block:clamp(26px,6vh,74px) clamp(14px,2vh,28px);
}
.cob__lienzo{
  position:absolute;left:-4%;right:-4%;bottom:0;z-index:0;
  /* 108% de ancho: cuatro puntos de sobreexploracion por flanco. Los Angeles
     entra al 10.6% del mapa y Barcelona al 85.7%, asi que no se pierde ni una
     plaza; lo unico que se recorta es oceano. */
}
.cob__lienzo canvas{display:block;width:100%;height:auto}
.cob__velo{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--fondo) 0%,rgba(10,22,40,.86) 16%,rgba(10,22,40,.30) 38%,transparent 58%),
    linear-gradient(96deg,rgba(5,10,19,.80) 0%,rgba(5,10,19,.42) 26%,transparent 54%),
    linear-gradient(0deg,rgba(4,9,17,.72) 0%,transparent 22%);
}
/* el texto no se interpone entre el puntero y las plazas: el mapa se toca */
.portada--mapa .wrap{pointer-events:none;padding-bottom:0}
.portada--mapa .wrap a,.portada--mapa .wrap button{pointer-events:auto}
.portada--mapa .cob__pie{margin-top:clamp(18px,2.6vh,30px);display:inline-block}
@media(max-width:900px){
  /* sin ancho no hay mapa: a 390 px el planisferio mide 131 px de alto y una
     portada de 560 px con una tira de 131 al pie es una portada vacia. Aqui el
     mapa vuelve a ser una banda bajo el titular, a sangre y sin filete. */
  .portada--mapa{min-height:auto;padding-bottom:0;display:flex;flex-direction:column;align-items:stretch}
  /* el planisferio va en el DOM antes que el titular porque en escritorio es el
     fondo. En una columna eso lo pondria arriba, y una portada no empieza por
     el pie de foto: el orden visual se corrige aqui, no duplicando marcado */
  .portada--mapa .wrap{order:1}
  .cob__lienzo{order:2;position:static;left:0;right:0;margin-top:clamp(24px,5vw,40px)}
  .cob__velo{display:none}
  .portada--mapa .wrap{pointer-events:auto}
}
.cob__abajo{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4.4vw,72px);align-items:start;
  margin-top:clamp(34px,4vw,58px);
}
.plaza-selector .kicker{margin-bottom:var(--e4)}
.cob__pie{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.05em;color:var(--oro);
}
.cob__nota{
  margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--linea);
  max-width:74ch;color:var(--tinta-3);font-size:var(--t3);line-height:1.66;
}

.plaza-lista{
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,44px);
  background:none;border:0;border-top:1px solid var(--linea);
}
.plaza-lista button{
  display:flex;align-items:center;gap:11px;min-height:46px;padding:12px 2px;width:100%;
  background:none;text-align:left;border-bottom:1px solid var(--linea);
  font-family:var(--dato);font-size:var(--t2);letter-spacing:.05em;color:var(--tinta-2);
  /* el desplazamiento al pasar va por transform: animar padding obliga al
     navegador a recalcular la caja de las once plazas en cada cuadro */
  transition:color var(--rapido) var(--suave),border-color var(--rapido) var(--suave),transform var(--medio) var(--sal);
}
.plaza-lista button:hover{color:#fff;transform:translateX(11px)}
.plaza-lista button.activa{color:var(--oro-claro);border-bottom-color:var(--oro)}
.plaza__punto{width:6px;height:6px;background:var(--cian);flex:none}
.plaza__punto[data-sede="si"]{background:var(--oro);width:8px;height:8px}
.plaza-lista button.activa .plaza__punto{background:var(--oro-claro)}

.plaza-ficha{
  padding:0 0 0 clamp(20px,2.4vw,34px);
  border-left:1px solid rgba(201,169,106,.55);align-self:start;
}
.plaza__reg{font-family:var(--dato);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;color:var(--cian)}
.plaza__n{
  margin-top:var(--e2);font-family:var(--display);font-variation-settings:'opsz' 96;
  font-weight:300;font-size:var(--d3);line-height:1.05;color:#fff;
}
.plaza__tier{margin-top:6px;font-family:var(--dato);font-size:var(--t1);letter-spacing:.06em;color:var(--oro)}
.plaza__cap{margin-top:var(--e4);color:var(--tinta-2);font-size:var(--t3);line-height:1.66}
.plaza__datos{margin-top:var(--e5);border-top:1px solid var(--linea)}
.plaza__datos > div{display:flex;justify-content:space-between;gap:var(--e4);padding:10px 0;border-bottom:1px solid var(--linea)}
.plaza__datos dt{font-family:var(--dato);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.plaza__datos dd{font-family:var(--dato);font-size:var(--t2);color:var(--tinta);font-variant-numeric:tabular-nums}
.plaza__datos .plaza__hora{color:var(--cian-alto)}

@media(max-width:900px){
  .cob__abajo{grid-template-columns:1fr;gap:var(--e7)}
  .plaza-ficha{padding:0 0 0 var(--e5)}
}
@media(max-width:680px){
  .plaza-lista{grid-template-columns:1fr}
}

/* ------------------------------------------------------------- reveals ----- */
/* Rev 12 · TODO NO PESA LO MISMO.
   La rev 11 movia cuatrocientos elementos con la misma instruccion: 18 px hacia
   arriba, 620 ms, una curva. Un titular de sesenta puntos, una fila de tabla,
   un logotipo de cliente y una celda de servicio entraban EXACTAMENTE IGUAL. Y
   ahi esta media sensacion de barato: en el mundo fisico el recorrido y el
   tiempo los dicta la masa, y cuando no los dicta nada, el ojo lee «plantilla».
   Ahora hay tres pesos declarados —ligero, medio y pesado— y cada cosa entra
   con el suyo: lo pequeno llega antes y de mas cerca, lo grande tarda mas y
   viene de mas lejos. Es la misma idea que el escalonado, aplicada al elemento
   en vez de al orden. */
/* rev 13: los tres pesos se quedan, el reloj se estira. Las referencias que
   fijo Alex revelan en 700-900 ms y ahi esta la mitad del aplomo: nada llega
   con prisa. Ligero 480, medio 680, pesado 860. */
.reveal{
  --dist:16px;      /* de donde viene */
  --dur:640ms;      /* cuanto tarda   */
  --vel:1;          /* lo estrecha la velocidad del scroll (lo pone el JS) */
  opacity:0;
  transform:translate3d(0,var(--dist),0);
  transition:opacity calc(var(--dur) * var(--vel)) var(--entra),
             transform calc(var(--dur) * var(--vel)) var(--entra);
  transition-delay:calc(var(--i,0) * 62ms * var(--vel));
}
/* el sentido del scroll manda: si el lector SUBE, lo nuevo viene de arriba */
.reveal[data-de="arriba"]{transform:translate3d(0,calc(var(--dist) * -1),0)}
.reveal.dentro{opacity:1;transform:none}

/* --- peso ligero: dato suelto, fila, logotipo. Cerca y rapido -------------- */
.tabla tbody tr.reveal,.muro__pieza.reveal,.clientes > div.reveal,
.tbs__lista li.reveal,.indice__fila.reveal,.etiqueta.reveal{
  --dist:10px; --dur:480ms;
}
/* --- peso medio: la celda, la fase, la partida (el grueso del sitio) ------- */
.celda.reveal,.fase.reveal,.partida.reveal,.geo.reveal,.paso.reveal{
  --dist:20px; --dur:680ms;
}
/* --- peso pesado: el titular y la portada. Lejos y con tiempo ------------- */
.titulo.reveal,.portada h1.reveal,.expediente.reveal figure{
  --dist:30px; --dur:860ms;
}
/* la entradilla sigue al titular de cerca, no a la vez */
.lede.reveal{--dist:14px; --dur:700ms}

/* el filete de oro del kicker se dibuja al entrar — sale despues del bloque,
   porque un subrayado que se dibuja antes que su texto no subraya nada */
.reveal .kicker::before,.kicker.reveal::before{
  transform:scaleX(0);transform-origin:left center;
  transition:transform calc(560ms * var(--vel,1)) var(--sal);
  transition-delay:calc(var(--i,0) * 62ms * var(--vel,1) + 150ms);
}
.reveal.dentro .kicker::before,.kicker.reveal.dentro::before{transform:scaleX(1)}

/* ------------------------------------------------------- lista tecnica ----- */
/* rev 13 · la spec como en un plano de obra: mono pequeno, filete, mayusculas.
   El gesto de los editoriales de arquitectura («CONCRETE SHELL / GLASS EDGE»)
   con partidas REALES de ANI. Sin caja: filete y aire. */
.specs{
  margin:clamp(22px,2.6vw,34px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--linea);
}
.specs li{
  display:flex;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--linea);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2);line-height:1.5;
}
.specs li::before{content:"—";color:var(--oro);flex:none}
/* la variante que vive SOBRE la banda fotografica del pilar: una sola linea,
   separadores de barra, sin filetes (la foto ya da el suelo) */
.pilar__specs{
  margin-top:12px;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-2);
  text-shadow:0 1px 12px rgba(4,9,17,.85);
}
.pilar__specs b{color:var(--oro);font-weight:500;padding:0 .55em}
.pilar__specs b:first-child{padding-left:0}

/* ------------------------------------------------- la obra, por scroll ----- */
/* rev 13 · Patron 5 de la casa: la obra avanza con el scroll del lector.
   Cinco fotografias reales de obra —energia, red, deteccion, acceso y
   operacion— se recorren como fases de una misma entrega. El motor vive en
   app.js (§14): el scroll solo apunta un objetivo y un rAF fija el progreso.
   El dia que exista video de obra, se suelta un
   <video muted playsinline preload="auto" data-obra-video src="..."> dentro
   de .oscrub__lienzo y el mismo motor mueve currentTime: fuente intercambiable,
   cero cambios de maquinaria. */
.oscrub{position:relative;height:340svh;background:var(--abismo)}
.oscrub__lienzo{
  position:sticky;top:0;height:100svh;overflow:hidden;
}
.oscrub__capa{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.oscrub__capa:first-child{opacity:1}
.oscrub__capa img{width:100%;height:100%;object-fit:cover;display:block}
/* velo unico: suelo para el rotulo a la izquierda y pie cosido, como portada */
.oscrub__lienzo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(100deg,rgba(5,10,19,.88) 0%,rgba(5,10,19,.55) 34%,rgba(6,12,22,.12) 64%,rgba(6,12,22,.42) 100%),
    linear-gradient(0deg,rgba(4,9,17,.9) 0%,rgba(4,9,17,.3) 30%,rgba(4,9,17,0) 58%);
}
.oscrub__rotulos{position:absolute;inset:0;z-index:3;pointer-events:none}
.oscrub__kicker{
  /* es el h2 de la seccion (la jerarquia h1->h3 saltaba, lo cazo a11y.py):
     margen a cero y tipografia de dato, no de titular */
  position:absolute;left:var(--canal);top:clamp(76px,11vh,120px);margin:0;
  font-family:var(--dato);font-size:var(--t1);font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--oro);
  display:flex;align-items:center;gap:var(--e4);
}
.oscrub__kicker::after{content:"";height:1px;width:clamp(40px,6vw,110px);background:linear-gradient(90deg,var(--oro),transparent)}
/* contador de fase: instrumento, no adorno — cuelga del carril de progreso
   (arriba a la derecha lo pisaba la camara PTZ) */
.oscrub__conteo{
  position:absolute;right:var(--canal);
  top:calc(50% - min(19vh,150px) - 44px);
  font-family:var(--dato);font-size:var(--t2);letter-spacing:.22em;color:var(--tinta-2);
}
.oscrub__conteo b{color:var(--oro);font-weight:500}
/* cada fase: titular serif enorme abajo-izquierda + specs mono debajo */
.oscrub__fase{
  /* el pie sube a 16vh: por debajo vive El Inge (fijo, ajeno) y un titular
     de seis rem no se comparte con nadie */
  position:absolute;left:var(--canal);bottom:clamp(120px,16vh,190px);
  max-width:min(72vw,860px);
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity 640ms var(--entra),transform 640ms var(--entra);
}
.oscrub__fase.activa{opacity:1;transform:none}
.oscrub__fase .n{
  display:block;font-family:var(--dato);font-size:var(--t1);
  letter-spacing:.24em;text-transform:uppercase;color:var(--cian-alto);
}
.oscrub__fase h3{
  margin-top:10px;
  font-family:var(--display);font-variation-settings:'opsz' 144;
  font-weight:300;font-style:italic;
  font-size:clamp(2.6rem,1rem + 6.4vw,6.6rem);
  line-height:.92;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 30px rgba(4,9,17,.85);
}
.oscrub__fase .esp{
  margin-top:clamp(14px,2vh,22px);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-2);line-height:2;
  text-shadow:0 1px 12px rgba(4,9,17,.9);
}
.oscrub__fase .esp b{color:var(--oro);font-weight:500;padding:0 .55em}
/* carril de progreso: un hilo vertical a la derecha, lleno en oro por el motor */
.oscrub__carril{
  position:absolute;right:var(--canal);top:50%;translate:0 -50%;
  height:min(38vh,300px);width:1px;background:rgba(201,169,106,.22);
}
.oscrub__carril i{
  position:absolute;inset:0;background:var(--oro);
  transform:scaleY(0);transform-origin:top center;will-change:transform;
}
/* rev 16 - saltos de fase: cinco numeros mono junto al carril, botones de
   verdad (afinacion pedida por Alex: la fase se toca y la obra viaja sola —
   el scroll suave de la hoja hace el travelling por las fases intermedias).
   pointer-events:auto porque el contenedor de rotulos los tiene apagados. */
.oscrub__saltos{
  position:absolute;right:calc(var(--canal) + 14px);top:50%;translate:0 -50%;
  height:min(38vh,300px);display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-end;pointer-events:auto;
}
.oscrub__salto{
  background:none;border:0;padding:2px 4px;cursor:pointer;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.18em;
  color:var(--tinta-3);transition:color 320ms var(--suave);
}
.oscrub__salto:hover{color:var(--cian-alto)}
.oscrub__salto.activo{color:var(--oro)}
.oscrub__salto:focus-visible{outline:1px solid var(--oro);outline-offset:2px}
/* la invitacion, abajo a la derecha; el motor la apaga pasada la primera fase */
.oscrub__hint{
  position:absolute;right:var(--canal);bottom:clamp(120px,16vh,190px);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.24em;
  text-transform:uppercase;color:var(--tinta-2);
  transition:opacity 640ms var(--suave);
}
.oscrub--lejos .oscrub__hint{opacity:0}
@media(max-width:900px){
  .oscrub{height:300svh}
  .oscrub__conteo{display:none}
  .oscrub__fase{max-width:86vw}
  /* dos specs bastan en mano: se apagan la tercera y su separador */
  .oscrub__fase .esp span:nth-of-type(n+3){display:none}
  .oscrub__fase .esp b:nth-of-type(n+2){display:none}
  .oscrub__hint{display:none} /* compartiria renglon con las specs de fase */
  .oscrub__saltos{display:none} /* en mano el pulgar ya es el salto */
}
/* sin movimiento: la obra se muestra terminada — cuadro final, cero teatro */
@media(prefers-reduced-motion:reduce){
  .oscrub{height:auto}
  .oscrub__lienzo{position:relative;height:min(78vh,660px)}
  .oscrub__capa{display:none}
  .oscrub__capa--final{display:block;opacity:1}
  .oscrub__fase{display:none}
  .oscrub__fase--final{display:block;opacity:1;transform:none}
  .oscrub__hint,.oscrub__carril,.oscrub__saltos{display:none}
}

/* --------------------------------------------------- llegada de pagina ----- */
/* rev 13 · transicion de estado con la calma de las referencias: la pagina
   entra en un fundido de 700 ms, solo opacidad —un transform aqui romperia el
   sticky del scrub y el posicionamiento fijo—. Con reduced-motion el bloque
   general ya la apaga. */
@keyframes paginaLlega{from{opacity:0}to{opacity:1}}
main{animation:paginaLlega 700ms var(--suave) both}

/* --------------------------------------------------------- responsivo ------ */
/* Entre 1120 y 1200 px la fila de la cabecera no cabia y empujaba el documento
   23 px a la derecha: el plegado sube a 1200. */
@media(max-width:1200px){
  #nav ul{display:none}
  .hamb{display:flex}
  #nav.abierto ul{
    display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(7,15,28,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:var(--e3) var(--canal) var(--e5);border-bottom:1px solid var(--linea);
  }
  #nav.abierto ul li{border-bottom:1px solid var(--linea)}
  #nav.abierto ul a{display:block;padding:16px 0;font-size:var(--t4)}
  #nav.abierto a.nav-cta{display:inline-block;margin-top:var(--e4);text-align:center}
}
@media(max-width:1024px){
  .expediente,.tbs,.ficha{grid-template-columns:1fr}
  .rejilla--3,.rejilla--4{grid-template-columns:repeat(2,1fr)}
  .razones{grid-template-columns:repeat(2,1fr)}
  .fases{grid-template-columns:repeat(3,1fr);row-gap:clamp(30px,4vw,48px)}
  .papel .lista{grid-template-columns:repeat(2,1fr)}
  .vertical{grid-template-columns:46px minmax(0,1fr)}
  .vertical small{grid-column:2}
  .heroe__hex{opacity:.7;right:-18%}
  .indice__fila{grid-template-columns:56px minmax(0,1fr) auto}
  .indice__d{display:none}
  .pie{grid-template-columns:1fr 1fr}
}
.marca__txt .marca__corto{display:none}
@media(max-width:760px){
  .nav-inner{gap:var(--e3)}
  .marca{gap:9px;min-width:0}
  .marca__hex{width:28px;height:32px}
  .marca__txt b{font-size:var(--t1);letter-spacing:.06em}
  .marca__txt span{display:none}
  .idioma{padding:8px 9px;font-size:var(--t1)}
  .hamb{padding:8px}
}
/* En pantalla estrecha la firma larga no cabe sin bajar del piso de 11 px:
   se usa la sigla real de la marca, no una version encogida ilegible. */
@media(max-width:560px){
  .marca__txt .marca__largo{display:none}
  .marca__txt .marca__corto{display:block;font-family:var(--dato);font-size:var(--t4);letter-spacing:.24em;color:#fff}
}
@media(max-width:768px){
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra + .cifra{border-left:0;padding-left:0}
  .cifra:nth-child(2),.cifra:nth-child(4){padding-left:var(--e5);border-left:1px solid var(--linea)}
  .cifra:nth-child(3),.cifra:nth-child(4){margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--linea)}
  .rejilla--2,.rejilla--3,.rejilla--4,.razones,.fases,.form,.sev{grid-template-columns:1fr}
  .papel .lista{grid-template-columns:1fr}
  .heroe__hex,.portada__hex{display:none}
  .ops__relojes span:not(:first-child){display:none}
  .sello,.papel .sello{display:none}
  .pie{grid-template-columns:1fr}
  .cinta__pausa{display:none}
  .ficha__filas .k{min-width:64px}
}

/* ------------------------------------------------- movimiento reducido ----- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* No se apaga la retroalimentación, se apaga el desplazamiento: el color y el
     filete siguen respondiendo en 120 ms; nada se mueve, escala ni viaja. */
  *,*::before,*::after{
    animation:none!important;
    transition-property:color,background-color,border-color,outline-color,opacity,box-shadow!important;
    transition-duration:120ms!important;
  }
  .reveal{opacity:1;transform:none}
  .cinta__pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:var(--e5)}
  .cinta__marco{-webkit-mask-image:none;mask-image:none}
  .conector::after{display:none}
  .banda__marco{transform:none}
  .figura--viva img{scale:1.05;translate:none}
  .figura--viva::before{display:none}
}

/* ======================================================= REV 8 · COMPÁS ====
   Seis dispositivos de ritmo. La regla: ninguna página usa el mismo dos veces
   seguidas, y ninguna sección se ve igual a la anterior al hacer scroll.
   1 · sangre        — cualquier bloque sale del ancho de página
   2 · capitulo      — numeral gigante a contorno junto al titular
   3 · cita-ancha    — pull-quote a toda columna, entre filetes
   4 · tira          — franja de datos a sangre
   5 · conmargen     — anotación marginal de expediente (folio, coordenadas)
   6 · spread        — reparto asimétrico con la foto escapando del wrap
   ========================================================================= */

/* 1 · a sangre ------------------------------------------------------------ */
.sangre{width:100vw;margin-left:calc(50% - 50vw)}

/* 2 · capítulo con numeral gigante --------------------------------------- */
.capitulo{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.6vw,48px);align-items:start;
}
.capitulo__n{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:300;
  font-size:clamp(3.6rem,2rem + 6.4vw,9rem);line-height:.76;
  color:transparent;-webkit-text-stroke:1px rgba(201,169,106,.45);
  letter-spacing:-.04em;user-select:none;
}
@supports not (-webkit-text-stroke:1px red){.capitulo__n{color:rgba(201,169,106,.28)}}
@media(max-width:760px){
  .capitulo{grid-template-columns:1fr;gap:var(--e3)}
  .capitulo__n{font-size:clamp(3rem,2rem + 5vw,4.4rem)}
}

/* 3 · pull-quote a toda columna ------------------------------------------ */
.cita-ancha{
  position:relative;border-top:1px solid var(--oro);border-bottom:1px solid var(--linea);
  padding:clamp(26px,3.4vw,52px) 0 clamp(20px,2.6vw,36px);
  margin-block:clamp(26px,3.4vw,52px);
}
.cita-ancha blockquote{
  font-family:var(--display);font-variation-settings:'opsz' 120;
  /* el piso del clamp sube a 1.62rem (26 px) para que la cita sea siempre
     tamaño de display: por debajo de eso un interlineado de 1.16 aprieta */
  font-weight:300;font-style:italic;font-size:clamp(1.62rem,1rem + 1.9vw,2.6rem);
  line-height:1.18;letter-spacing:-.015em;color:#fff;max-width:30ch;text-wrap:balance;
}
.cita-ancha__pie{
  margin-top:clamp(16px,2vw,26px);display:flex;gap:var(--e4);flex-wrap:wrap;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);
}
.cita-ancha__pie b{color:var(--oro);font-weight:500}

/* 4 · tira de datos a sangre --------------------------------------------- */
.tira{
  position:relative;border-block:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(8,16,29,.0),rgba(13,25,43,.68),rgba(8,16,29,.0));
}
.tira__pista{
  max-width:var(--ancho);margin-inline:auto;padding:clamp(20px,2.4vw,34px) var(--canal);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
}
.tira--3 .tira__pista{grid-template-columns:repeat(3,minmax(0,1fr))}
.tira__d{position:relative;padding-right:var(--e5)}
.tira__d + .tira__d{padding-left:clamp(14px,2vw,30px);border-left:1px solid var(--linea)}
.tira__n{
  font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;
  font-size:clamp(1.6rem,1rem + 1.9vw,2.9rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.tira__n .u{font-family:var(--dato);font-size:.34em;color:var(--cian-alto);margin-left:3px;letter-spacing:.02em}
.tira__t{
  margin-top:8px;font-family:var(--dato);font-size:var(--t1);letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-3);line-height:1.5;
}
.tira__nota{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--canal) clamp(14px,1.8vw,22px);
}
@media(max-width:820px){
  .tira__pista,.tira--3 .tira__pista{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4) 0}
  .tira__d:nth-child(odd){padding-left:0;border-left:0}
}

/* 5 · anotación marginal de expediente ----------------------------------- */
.conmargen{
  display:grid;grid-template-columns:clamp(104px,12vw,176px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:start;
}
.marginal{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.12em;line-height:1.9;
  color:var(--tinta-3);text-align:right;border-right:1px solid var(--linea);
  padding-right:clamp(12px,1.6vw,24px);padding-top:6px;
}
.marginal b{display:block;color:var(--oro);font-weight:500;letter-spacing:.2em}
.marginal span{display:block}
.marginal .sello{width:64px;height:64px;margin:var(--e4) 0 0 auto;opacity:.55;position:static}
@media(max-width:820px){
  .conmargen{grid-template-columns:1fr;gap:var(--e4)}
  .marginal{
    text-align:left;border-right:0;border-left:1px solid var(--linea);
    padding:0 0 0 var(--e4);display:flex;gap:var(--e5);flex-wrap:wrap;line-height:1.6;
  }
  .marginal .sello{display:none}
}

/* 6 · spread asimétrico con foto que escapa ------------------------------ */
.spread{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:clamp(24px,3.4vw,64px);align-items:center;
}
.spread--invertido{grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr)}
.spread__foto{position:relative;overflow:hidden;background:var(--abismo);border:1px solid rgba(201,169,106,.26)}
.spread__foto img{width:100%;height:clamp(260px,34vw,470px);object-fit:cover;display:block}
.spread__foto figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  padding:10px 14px;background:linear-gradient(0deg,rgba(4,9,17,.9),rgba(4,9,17,0));
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.06em;
}
.spread__foto figcaption .f{color:var(--oro-claro)}
.spread__foto figcaption .n{color:var(--tinta-3)}
@media(min-width:1101px){
  .spread--fuga .spread__foto{margin-right:calc((var(--ancho) - 100vw)/2 - var(--canal))}
  .spread--fuga.spread--invertido .spread__foto{
    margin-right:0;margin-left:calc((var(--ancho) - 100vw)/2 - var(--canal));
  }
}
@media(max-width:1000px){
  .spread,.spread--invertido{grid-template-columns:1fr;gap:var(--e5)}
  .spread__foto{order:-1}
}

/* banda de pilar: la fotografía manda y el título se monta encima -------- */
.pilar{position:relative;margin-top:clamp(30px,4vw,64px)}
.pilar:first-of-type{margin-top:0}
.pilar__banda{
  position:relative;overflow:hidden;background:var(--abismo);
  /* rev 14: de banda a plano — un tercio mas de altura y sobrescan del 12%
     en la imagen para que el paralaje de app.js nunca ense&ntilde;e el borde */
  height:clamp(270px,34vw,500px);border-block:1px solid rgba(201,169,106,.22);
}
.pilar__banda img{
  position:relative;top:-6%;width:100%;height:112%;object-fit:cover;display:block;
  will-change:transform;
}
.pilar__banda::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(5,10,19,.92) 0%,rgba(5,10,19,.62) 34%,rgba(6,12,22,.22) 68%,rgba(6,12,22,.5) 100%),
    linear-gradient(0deg,rgba(4,9,17,.86),rgba(4,9,17,0) 52%);
}
.pilar__rotulo{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  max-width:var(--ancho);margin-inline:auto;padding:0 var(--canal) clamp(18px,2.4vw,34px);
}
.pilar__rotulo .expediente__pnum{color:var(--oro)}
.pilar__rotulo h2{
  margin-top:var(--e3);
  font-family:var(--display);font-variation-settings:'opsz' 120;font-weight:300;
  font-size:clamp(1.7rem,1.1rem + 2.2vw,3.3rem);line-height:1.02;letter-spacing:-.025em;
  color:#fff;max-width:20ch;text-wrap:balance;text-shadow:0 2px 26px rgba(4,9,17,.9);
}
/* barrido: una línea de exploración recorre la banda, como en un monitor */
.pilar__barrido{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
.pilar__barrido::before{
  content:"";position:absolute;left:0;right:0;height:2px;top:-2px;
  background:linear-gradient(90deg,transparent,rgba(95,208,214,.5),transparent);
  animation:barrido 7.5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes barrido{0%{top:-2px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.pilar__mira{position:absolute;inset:clamp(12px,1.6vw,22px);z-index:3;pointer-events:none;opacity:.45}
.pilar__mira span{position:absolute;width:16px;height:16px;border:0 solid rgba(201,169,106,.8)}
.pilar__mira span:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.pilar__mira span:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.pilar__mira span:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.pilar__mira span:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.pilar__cuerpo{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.2vw,58px);align-items:start;
  padding-top:clamp(24px,3vw,44px);
}
@media(max-width:960px){.pilar__cuerpo{grid-template-columns:1fr;gap:var(--e6)}}
.pilar__cuerpo > div > p{margin-top:var(--e4);color:var(--tinta-2);font-size:var(--t4);line-height:1.72}

/* partidas: capítulos de un dossier, no renglones de cotización ---------- */
.partidas--dossier{border-top:1px solid var(--linea)}
.partidas--dossier .partida{
  display:grid;grid-template-columns:clamp(52px,5vw,78px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,26px);align-items:baseline;
  padding:clamp(15px,1.7vw,24px) 0;border-bottom:1px solid var(--linea);
  transition:border-bottom-color var(--rapido) var(--suave);
}
.partidas--dossier .partida__n{
  font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:300;
  font-size:clamp(1.5rem,1rem + 1.3vw,2.35rem);line-height:.9;letter-spacing:-.02em;
  color:var(--oro);opacity:.78;transition:opacity var(--rapido) var(--suave);
  font-variant-numeric:tabular-nums;
}
.partidas--dossier .partida:hover .partida__n{opacity:1}
.partidas--dossier .partida b{
  font-family:var(--texto);font-weight:600;font-size:var(--t4);color:#fff;line-height:1.3;
}
.partidas--dossier .partida p{max-width:52ch}

/* ------------------------------------------- plancha de espécimen ------- */
/* La lámina del aparato del que habla el pilar, junto a su columna de
   partidas. No es una tarjeta: no hay caja, no hay radio, no hay sombra
   difusa. Hay un filete de 1 px, cuatro marcas de encuadre, una regla de
   escala y un pie mono con folio. El aparato de una lámina de dossier.
   La asimetría sale del reparto, no de un margen negativo: la plancha se
   pega al flanco derecho de su columna y el filete del pie corre el ancho
   completo, así que el folio queda solo a la izquierda, colgado del mismo
   margen que el texto de arriba. */
.especimen{margin-top:clamp(28px,3.4vw,46px);display:block}
/* Rev 11 · la plancha del expediente cuelga del flanco CONTRARIO al diagrama.
   En servicios la placa se pega a la derecha porque su texto queda a la
   izquierda; aquí la lámina isométrica ya ocupa toda la columna derecha, así
   que la placa se ancla a la izquierda y se ensancha un tercio. El eje de la
   página queda con peso a los dos lados y a alturas distintas, que es lo que
   hace que la composición respire en vez de formar dos columnas gemelas. */
.especimen--caso{margin-top:clamp(34px,4vw,58px)}
.especimen--caso .especimen__placa{
  margin-left:0;margin-right:auto;
  width:min(100%,clamp(210px,26vw,330px));
}
.especimen--caso .especimen__pie{text-align:left}
.especimen__placa{
  position:relative;margin-left:auto;
  width:min(100%,clamp(196px,22vw,268px));
  border:1px solid rgba(201,169,106,.30);
  background:var(--abismo);
}
.especimen__placa img{
  display:block;width:100%;height:auto;aspect-ratio:1.043;object-fit:cover;
}
/* la placa se aclara medio punto al pasar: la lámina no es un botón, pero
   tampoco es un adorno muerto */
.especimen__placa::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,rgba(9,18,32,0) 58%,rgba(6,13,24,.38) 100%);
}
.especimen__mira{position:absolute;inset:9px;z-index:2;pointer-events:none;opacity:.5;
  transition:opacity var(--medio) var(--suave)}
.especimen__mira span{position:absolute;width:11px;height:11px;border:0 solid var(--oro)}
.especimen__mira span:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.especimen__mira span:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.especimen__mira span:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.especimen__mira span:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.especimen:hover .especimen__mira{opacity:.92}
/* regla de escala: tres marcas al pie de la placa, como en una lámina */
.especimen__regla{
  position:absolute;left:10px;bottom:10px;z-index:2;display:flex;align-items:flex-end;gap:5px;
  pointer-events:none;
}
.especimen__regla i{display:block;width:1px;height:7px;background:rgba(226,238,248,.5)}
.especimen__regla i:nth-child(2){height:11px;background:rgba(201,169,106,.85)}
.especimen__pie{
  margin-top:12px;padding-top:10px;border-top:1px solid rgba(201,169,106,.28);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--e4);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;
}
.especimen__pie .f{color:var(--oro);white-space:nowrap}
.especimen__pie .n{color:var(--tinta-3);text-align:right}
@media(max-width:960px){
  /* en una columna la plancha vuelve al margen: sin dos columnas no hay
     asimetría que sostener, y una foto pequeña arrinconada parece un error */
  .especimen__placa{margin-left:0}
  .especimen__pie .n{text-align:left}
}

/* franja de obra a sangre: reemplaza al marco chico con blur detrás ------ */
.obrada{
  position:relative;overflow:hidden;background:var(--abismo);
  height:clamp(300px,42vw,620px);
}
.obrada img{
  position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;display:block;
  will-change:transform;
}
.obrada::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,22,40,.55) 0%,rgba(10,22,40,0) 26%,rgba(4,9,17,.34) 74%,rgba(4,9,17,.86) 100%);
}
.obrada__pie{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  max-width:var(--ancho);margin-inline:auto;padding:0 var(--canal) clamp(14px,1.8vw,24px);
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.06em;
}
.obrada__pie .f{color:var(--oro)}
.obrada__pie .n{color:var(--tinta-3)}
/* --- rev 16 - banda "cine": METRAJE REAL + HUD como seccion interior -------
   Hermana menor de la portada de la mesa (rev 15) y con sus MISMAS lecciones
   pagadas: color horneado en el webm (cero filter de CSS por cuadro), lienzo
   del HUD encogido a la zona de anotaciones (una capa a viewport completo
   sobre video se paga en el compositor POR CUADRO de video), y fotograma
   calificado de respaldo para quieto/debil/angosto. Dos anadidos propios de
   una banda que la portada no necesitaba: el video solo CARGA al acercarse al
   viewport (una banda vive a media pagina, no en el primer scroll) y se PAUSA
   al salir, porque un webm fuera de pantalla sigue decodificando. El motor es
   app.js (bloque 16); las cajas viajan en data-hud y el lienzo mide su propio
   recorte con offsetLeft/Top: UN solo mapa, sin espejo CSS/JS que mantener. */
.vbanda{position:relative;overflow:hidden;background:var(--abismo);height:clamp(320px,44vw,620px)}
.vbanda__caja{position:absolute;inset:0}
.vbanda__caja img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%);display:block}
.vbanda__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--foco,50% 50%);
  opacity:0;transition:opacity 2.2s ease;
}
.vbanda__video.va{opacity:1}
.vbanda__caja::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(11,21,38,.44) 0%,rgba(11,21,38,.14) 52%,rgba(160,118,48,.12) 100%),
    linear-gradient(0deg,rgba(4,9,17,.88) 0%,rgba(4,9,17,.26) 26%,rgba(4,9,17,0) 52%,rgba(10,22,40,.42) 100%);
}
/* el lienzo NO cubre el plano: su recorte lo fija el generador por banda
   (style inline) y el JS lo lee del propio elemento */
.vbanda__hud{position:absolute;z-index:1;pointer-events:none}
.vbanda .obrada__pie{z-index:2}
.vbanda .obrada__mira{z-index:2}
@media(max-width:900px){.vbanda{height:clamp(260px,56vw,480px)}}

.obrada__mira{position:absolute;inset:clamp(12px,1.6vw,22px);z-index:2;pointer-events:none;opacity:.42}
.obrada__mira span{position:absolute;width:16px;height:16px;border:0 solid rgba(201,169,106,.8)}
.obrada__mira span:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.obrada__mira span:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.obrada__mira span:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.obrada__mira span:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

/* ------------------------------------------------- proyección de datos ----
   rev 14 «cine»: donde hay cifras duras (métricas de casos, ficha de plaza)
   los números entran como proyección de luz: una retícula tenue se enciende,
   un barrido único recorre el bloque y la cifra se asienta desde un destello
   cian. Una vez, al revelarse — cine, no dashboard con lucecitas. */
.proyeccion{position:relative}
.proyeccion::before{
  content:"";position:absolute;inset:-12px -16px;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(90deg,rgba(95,208,214,.055) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(95,208,214,.045) 0 1px,transparent 1px 26px);
  opacity:0;transition:opacity 1.6s ease .35s;
}
/* el barrido vive en background-position, no en transform: una caja
   transformada fuera de su sitio ENSANCHA el area de scroll de la pagina
   (medido: 540 px de canal muerto a la derecha en cobertura) */
.proyeccion::after{
  content:"";position:absolute;inset:-12px -16px;pointer-events:none;z-index:0;
  background-image:linear-gradient(104deg,transparent 38%,rgba(95,208,214,.14) 50%,transparent 62%);
  background-size:340% 100%;background-repeat:no-repeat;background-position:230% 0;
  opacity:0;
}
.dentro .proyeccion::before,.proyeccion.dentro::before{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .dentro .proyeccion::after,.proyeccion.dentro::after{animation:proyBarrido 1.3s cubic-bezier(.4,0,.2,1) .5s both}
  .dentro .proyeccion .cifra__n,.proyeccion.dentro .mono{animation:proyCifra 1.5s ease .35s both}
}
@keyframes proyBarrido{
  0%{opacity:0;background-position:230% 0}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;background-position:-130% 0}
}
@keyframes proyCifra{
  0%{opacity:0;text-shadow:0 0 18px rgba(95,208,214,.9),0 0 2px rgba(95,208,214,.9)}
  45%{opacity:1;text-shadow:0 0 12px rgba(95,208,214,.55)}
  100%{opacity:1;text-shadow:none}
}

/* cierre comercial: apertura a la izquierda, mesa de datos a la derecha --- */
.cierre__reja{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(26px,3.4vw,66px);align-items:start;
}
.cierre__mesa{position:relative;border-top:1px solid var(--oro);padding-top:2px}
.cierre__fila{
  display:grid;grid-template-columns:minmax(96px,.5fr) minmax(0,1fr);
  gap:var(--e4);align-items:baseline;
  padding:clamp(9px,1.1vw,15px) 0;border-bottom:1px solid var(--linea);
}
.cierre__fila .k{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-3);
}
.cierre__fila .v{color:#fff;font-size:var(--t3);line-height:1.45;text-decoration:none;font-variant-numeric:tabular-nums}
/* el teléfono, el WhatsApp y el correo son blancos táctiles reales: 24 px de
   alto mínimo aunque el renglón de texto mida 20 (WCAG 2.2, 2.5.8) */
.cierre__fila a.v{display:inline-flex;align-items:center;min-height:26px}
.cierre__fila a.v:hover{color:var(--oro-claro)}
.cierre__mesa .sello{
  position:absolute;right:0;bottom:clamp(-72px,-5vw,-40px);
  width:clamp(74px,7vw,104px);height:auto;opacity:.42;pointer-events:none;
}
@media(max-width:960px){
  .cierre__reja{grid-template-columns:1fr;gap:var(--e7)}
  .cierre__mesa .sello{display:none}
}

/* el muro de partners se aprieta: era una constelación de logos en el vacío */
.muro{gap:clamp(14px,1.8vw,26px) clamp(18px,2.2vw,34px);padding-top:clamp(18px,2vw,28px)}

/* la retícula de razones se aprieta y gana filete de capítulo ------------ */
.razones{gap:clamp(20px,2.4vw,40px) clamp(22px,2.6vw,44px)}
.razon{padding-top:clamp(14px,1.8vw,24px)}

@media(prefers-reduced-motion:reduce){
  .pilar__barrido::before{animation:none;opacity:0}
}

/* ============================ REV 9 · PATRÓN 3 · DESPIECE EXPLOSIONADO ===== */
/* Las cinco capas del sistema integrado, apiladas como una sola losa y
   separadas por el scroll. Cada capa es una lámina isométrica dibujada en SVG
   por el generador (build_sitio, bloque PATRONES DE SCROLL) y movida por
   translate3d: la separación la compone la GPU, el JS sólo escribe una
   transformación por capa y por cuadro. En pantalla estrecha no hay pila ni
   sticky: las cinco láminas se leen en columna, que es lo que un móvil puede
   sostener sin que el rótulo pise el dibujo. */
/* La sección entera baja al abismo: las cinco láminas necesitan un campo
   limpio y la malla de nodos del sitio pasa por detrás de todo el documento.
   Un fondo sólido un escalón por debajo del navy de la página resuelve las dos
   cosas y deja un canto horizontal franco, que es como esta casa separa
   bloques. (La primera versión usaba un velo radial: un halo de fondo, aunque
   fuera para oscurecer, es el tell del §1 y además se notaba el borde de la
   mancha al desplazar.) */
.despiece{padding-bottom:0;background:var(--abismo)}
.despiece__pista{position:relative;height:232vh;margin-top:clamp(18px,3vw,40px)}
.despiece__vista{
  position:sticky;top:calc(var(--alto-nav) + 12px);
  height:calc(100svh - var(--alto-nav) - 34px);
  display:grid;place-items:center;overflow:hidden;
}
.despiece__regla{
  position:absolute;left:var(--canal);top:14%;bottom:14%;width:1px;
  background:var(--linea);
}
.despiece__regla i{display:block;width:1px;background:var(--oro);height:0}
.despiece__regla::after{
  content:"DESPIECE";position:absolute;left:10px;top:0;
  font-family:var(--dato);font-size:.6rem;letter-spacing:.34em;color:var(--tinta-3);
  writing-mode:vertical-rl;
}
.despiece__pila{position:relative;width:min(1120px,86vw);height:min(600px,64svh);will-change:transform}
.capa{
  position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);
  will-change:transform;
}
.capa__lamina{flex:0 0 62%}
.capa__lamina svg{width:100%;height:auto;display:block;overflow:visible}
.capa__lamina .losa{fill:rgba(17,32,54,.80);stroke:rgba(95,208,214,.44);stroke-width:1.5}
.capa__lamina .canto{fill:rgba(7,16,29,.94);stroke:rgba(95,208,214,.24);stroke-width:1}
.capa__lamina .rej path{stroke:rgba(138,172,206,.13);stroke-width:.8;fill:none}
.capa__lamina .som{fill:url(#somD)}
/* rev 14 · materia: caras con sombreado plano de maqueta (luz unica del NO),
   sombra arrojada difuminada y brillo rasante en las aristas iluminadas */
.capa__lamina .somp{fill:rgba(2,5,10,.34);filter:url(#fSomP)}
.capa__lamina .cara-t{fill:rgba(95,208,214,.10)}
.capa__lamina .cara-a{fill:rgba(138,172,206,.10)}
.capa__lamina .cara-b{fill:rgba(4,9,17,.52)}
.capa__lamina .cara-t.m-oro{fill:rgba(201,169,106,.20)}
.capa__lamina .cara-a.m-oro{fill:rgba(201,169,106,.12)}
.capa__lamina .cara-b.m-oro{fill:rgba(58,44,16,.55)}
.capa__lamina .brillo{fill:rgba(207,228,239,.05);stroke:none}
.capa__lamina .l{fill:none;stroke:rgba(95,208,214,.66);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.capa__lamina .l.o{stroke:rgba(95,208,214,.28)}
.capa__lamina .oro{stroke:var(--oro)}
.capa__lamina .cono{fill:rgba(95,208,214,.07);stroke:rgba(95,208,214,.32);stroke-width:1}
.capa__lamina .lz{stroke-dasharray:8 6;stroke:rgba(216,150,60,.72)}
.capa__lamina .pun{stroke-dasharray:3 6;stroke:rgba(201,169,106,.46);fill:none;stroke-width:1}
.capa__lamina .bus{stroke:var(--oro);stroke-width:2.8}
.capa__lamina .gr{stroke-width:2.4}
.capa__lamina .arco{fill:none;stroke:rgba(138,172,206,.34);stroke-width:1;stroke-dasharray:5 5}
.capa__lamina .zona{fill:rgba(201,169,106,.06);stroke:rgba(201,169,106,.46);stroke-width:1.2;stroke-dasharray:9 6}
.capa__lamina .per{stroke:rgba(95,208,214,.58);stroke-width:2.4;fill:none;stroke-linecap:round}
.capa__rotulo{flex:1 1 auto;position:relative;opacity:0;padding-left:clamp(16px,2vw,30px)}
.capa__rotulo::before{
  content:"";position:absolute;left:calc(-1 * clamp(14px,2.4vw,36px) - 6px);top:.9em;
  width:clamp(28px,4vw,58px);height:1px;
  background:linear-gradient(90deg,transparent,var(--oro));
}
.capa__n{
  display:block;font-family:var(--dato);font-size:var(--t1);letter-spacing:.24em;
  color:var(--oro);margin-bottom:8px;
}
.capa__rotulo b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.02rem,.86rem + .5vw,1.4rem);line-height:1.16;color:#fff;
}
.capa__rotulo small{
  display:block;margin-top:8px;max-width:30ch;
  font-size:var(--t3);line-height:1.55;color:var(--tinta-2);
}

@media (max-width:900px){
  .despiece__pista{height:auto;margin-top:18px}
  .despiece__vista{position:static;height:auto;display:block;overflow:visible}
  .despiece__regla{display:none}
  .despiece__pila{width:auto;height:auto;display:grid;gap:clamp(26px,7vw,44px);padding-inline:var(--canal)}
  .capa{position:relative;top:auto;translate:none;transform:none!important;display:block}
  .capa__lamina{width:100%}
  .capa__rotulo{opacity:1!important;padding-left:0;margin-top:12px}
  .capa__rotulo::before{display:none}
  .capa__rotulo small{max-width:none}
}

/* ================================ REV 9 · PATRÓN 2 · FOTO → PLANO ========= */
/* La fotografía de la fase 04 se convierte en el plano de lo que muestra. El
   trazo está calcado sobre esa misma toma, así que al llegar arriba el dibujo
   coincide con lo instalado — que es, literalmente, lo que la fase promete.
   El avance viaja en una sola variable: el JS escribe --p en el SVG y el CSS
   reparte el trazo entre cinco etapas con stroke-dashoffset. Un cálculo por
   elemento y ninguna escritura de estilo por trazo. */
.plano{position:relative;background:var(--abismo);overflow:hidden}
.plano__marco{position:relative;height:clamp(300px,44vw,620px);overflow:hidden}
.plano__foto{width:100%;height:100%;object-fit:cover;display:block}
.plano__papel{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:
    radial-gradient(130% 150% at 50% 42%,rgba(9,20,36,.42) 0%,rgba(6,13,24,.90) 78%),
    linear-gradient(180deg,rgba(6,13,24,.55),rgba(6,13,24,.20) 40%,rgba(6,13,24,.72));
}
.plano__trazo{
  --p:0;
  position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
}
.plano__trazo .t{
  fill:none;stroke:var(--cian-alto);stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--k,0)) / .30,1));
}
.plano__trazo .gab{stroke:var(--oro);stroke-width:2}
.plano__trazo .fino{stroke:rgba(95,208,214,.44);stroke-width:1}
.plano__trazo .on{stroke:var(--oro);stroke-width:2}
.plano__trazo .fl{fill:var(--cian-alto);stroke:none;stroke-dasharray:none;stroke-dashoffset:0;
  opacity:clamp(0,(var(--p) - var(--k,0) - .10) / .12,1)}
.plano__trazo .ex{stroke:rgba(95,208,214,.40)}
.plano__trazo .pu{fill:var(--oro);stroke:none;stroke-dasharray:none;stroke-dashoffset:0;
  opacity:clamp(0,(var(--p) - var(--k,0) - .08) / .12,1)}
.plano__trazo .esc{stroke:var(--oro);stroke-width:1.4}
.plano__trazo .rot{
  fill:var(--cian-alto);font-family:var(--dato);font-size:16px;letter-spacing:.10em;
  opacity:clamp(0,(var(--p) - var(--k,0) - .12) / .16,1);
}
.plano__trazo .rot.on{fill:var(--oro);font-size:22px;stroke:none}
.plano__trazo .rot.num{fill:var(--oro);font-size:19px;letter-spacing:0}
.plano__trazo .cajetin .t{stroke:var(--oro)}

@media (max-width:700px){
  /* a 390 px el recorte se come los flancos: sobreviven el trazo y los dos
     interruptores, que es lo que cuenta la fase. Cajetin y referencias se
     retiran antes de volverse ilegibles. */
  .plano__trazo .rot{font-size:24px}
  .plano__trazo .cajetin,.plano__trazo .guia,.plano__trazo .cota{display:none}
}

/* ======================== REV 10 · ISOMETRÍA POR SCROLL =================== */
/* Cuatro piezas nuevas en la misma lengua que el despiece de la rev 9: torre de
   verticales (nosotros), casa por plantas (pilar V), abanico del dossier
   (metodología) y vía del ticket (mesa). Todas comparten el mismo contrato de
   rendimiento: el guion escribe UNA variable (--p) por pieza y por cuadro, y
   todo el reparto —qué se traslada, qué se dibuja, qué se enciende y en qué
   orden— lo resuelve calc() aquí. Ni un filtro, ni una sombra por cuadro, ni
   una escritura de estilo por trazo. Es más barato que la rev 9, no más caro. */

/* ------------------------------------------------- A · torre de verticales - */
.torre{
  --p:0;
  display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  gap:clamp(18px,2.6vw,44px);align-items:center;margin-top:clamp(22px,3vw,42px);
}
.torre__vista{min-width:0}
.torre__d{width:100%;height:auto;display:block;overflow:visible}
.torre__d .losa{fill:rgba(17,32,54,.88);stroke:rgba(95,208,214,.42);stroke-width:1.4}
.torre__d .canto{fill:rgba(7,16,29,.94);stroke:rgba(95,208,214,.22);stroke-width:1}
.torre__d .t{fill:none;stroke:rgba(95,208,214,.60);stroke-width:1.4;stroke-linejoin:round}
.torre__d .fino{fill:none;stroke:rgba(138,172,206,.28);stroke-width:.9}
.torre__d .junta{fill:none;stroke:rgba(138,172,206,.15);stroke-width:.8}
.torre__d .oro{stroke:var(--oro)}
.torre__d .pu{fill:var(--oro)}
.torre__d .tron{fill:none;stroke:var(--oro);stroke-width:3;stroke-linecap:round}
.torre__d .num{fill:var(--oro);font-family:var(--dato);font-size:19px;letter-spacing:.04em}
.torre__d .gl{fill:var(--cian-alto);font-family:var(--display);font-style:italic;font-size:23px}
.torre__d .pie{fill:var(--tinta-3);font-family:var(--dato);font-size:13px;letter-spacing:.22em}
/* cada planta baja a su cota; el orden lo da --k y nada más */
.torre__d .tp{
  --o:clamp(0,(var(--p) - var(--k,0)) / .20,1);
  opacity:var(--o);
  transform:translate3d(0,calc((1 - var(--o)) * -128px),0);
  will-change:transform,opacity;
}
/* la troncal es lo último: atraviesa los ocho niveles ya montados, que es el
   titular de la sección dicho en dibujo — ocho verticales, un mismo estándar */
.torre__d .tt .tron{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--k,0)) / .24,1));
}
.torre__d .tt .pu{opacity:clamp(0,(var(--p) - var(--k,0) - .10) / .16,1)}
.torre__lista{list-style:none;display:grid;gap:clamp(9px,1.2vw,17px);min-width:0}
.torre__lista li{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:0 var(--e3);
  align-items:baseline;padding-top:9px;border-top:1px solid var(--linea);
  opacity:clamp(.26,(var(--p) - var(--k,0) + .10) / .18,1);
}
.torre__n{font-family:var(--dato);font-size:var(--t1);letter-spacing:.14em;color:var(--oro)}
.torre__g{font-family:var(--display);font-style:italic;font-size:var(--d2);
  line-height:1;color:var(--cian-alto)}
.torre__t b{display:block;font-family:var(--texto);font-weight:500;font-size:var(--t4);color:var(--tinta)}
.torre__t small{display:block;margin-top:3px;font-size:var(--t2);line-height:1.5;color:var(--tinta-3)}
@media(max-width:900px){
  .torre{grid-template-columns:1fr;gap:clamp(18px,4vw,30px);--p:1}
  .torre__lista li{opacity:1}
  .torre__d .tp{transform:none;opacity:1}
}
@media(max-width:700px){
  /* a 390 px la llamada de sección cae por debajo del piso de 11 px: se retira
     antes de volverse ilegible. La lista de al lado ya dice lo mismo. */
  .torre__d .lla,.torre__d .pie{display:none}
}

/* -------------------------------------------- B · casa por plantas (pilar V) */
/* La banda del pilar V. Tres niveles que se separan al desplazar, la troncal de
   oro subiendo por el hueco de instalaciones y las derivaciones de cian
   dibujándose hasta cada nodo rotulado. Sustituye a la fotografía de ático de
   la rev 8.1: aquello era una escena de revista; esto es la instalación. */
.casa{--p:0;position:relative;background:var(--abismo);
  padding-block:clamp(26px,3.4vw,52px);overflow:hidden}
.casa__rotulo{width:min(100%,1180px);margin-inline:auto;padding-inline:var(--canal)}
.casa__rotulo .expediente__pnum{color:var(--oro)}
.casa__rotulo h2{
  font-family:var(--display);font-weight:300;line-height:1.03;color:#fff;
  font-size:clamp(1.65rem,1.05rem + 2.1vw,3.05rem);margin-top:var(--e3);
}
.casa__lede{
  margin-top:var(--e4);max-width:62ch;color:var(--tinta-2);
  font-size:var(--t4);line-height:1.7;
}
.casa__campo{width:min(100%,1180px);margin-inline:auto;
  padding-inline:var(--canal);margin-top:clamp(12px,1.8vw,24px)}
.casa__d{width:100%;height:auto;display:block;overflow:visible}
.casa__d .losa{fill:rgba(15,29,49,.90);stroke:rgba(95,208,214,.40);stroke-width:1.3}
.casa__d .canto{fill:rgba(6,14,26,.96);stroke:rgba(95,208,214,.20);stroke-width:1}
.casa__d .t{fill:none;stroke:rgba(95,208,214,.62);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round}
.casa__d .fino{fill:none;stroke:rgba(138,172,206,.40);stroke-width:1}
.casa__d .oro{stroke:var(--oro)}
.casa__d .pu{fill:var(--oro)}
.casa__d .pu2{fill:var(--cian-alto)}
.casa__d .per{fill:none;stroke:rgba(95,208,214,.58);stroke-width:2.2;stroke-linecap:round}
.casa__d .cono2{fill:rgba(95,208,214,.07);stroke:rgba(95,208,214,.30);stroke-width:1}
.casa__d .gui{fill:none;stroke:rgba(201,169,106,.52);stroke-width:1}
.casa__d .rot{fill:var(--oro-claro);font-family:var(--dato);font-size:13px;letter-spacing:.16em}
.casa__d .sala{fill:rgba(150,183,214,.74);font-family:var(--dato);font-size:13px;letter-spacing:.20em}
.casa__d .niv{fill:var(--oro);font-family:var(--dato);font-size:15px;letter-spacing:.16em}
.casa__d .nivt{fill:#fff;font-family:var(--display);font-style:italic;font-size:22px}
.casa__d .nivs{fill:var(--tinta-3);font-family:var(--texto);font-size:14px}
/* troncal y derivaciones: se trazan, no aparecen. El cableado es el argumento
   del pilar, así que es lo único de la casa que el ojo ve dibujarse. */
.casa__d .tron,.casa__d .tron2{fill:none;stroke:var(--oro);stroke-width:2.4;stroke-linecap:round}
.casa__d .ram{fill:none;stroke:rgba(95,208,214,.80);stroke-width:1.7;stroke-linecap:round}
.casa__d .ram,.casa__d .tron2{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--k,0) - .06) / .30,1));
}
.casa__d .cn{
  --o:clamp(0,(var(--p) - var(--k,0)) / .32,1);
  opacity:clamp(0,(var(--p) - var(--k,0) + .05) / .18,1);
  transform:translate3d(0,calc(var(--i) * 126px * (1 - var(--o))),0);
  will-change:transform,opacity;
}
/* el hueco de instalaciones queda a la vista sólo con la casa abierta: es la
   continuidad de la troncal entre losa y losa, dibujada a trazos */
.casa__d .paso{fill:none;stroke:var(--oro);stroke-width:1.4}
.casa__d .cv .tron{stroke-dasharray:10 9;stroke-width:1.8;opacity:clamp(0,(var(--p) - .58) / .28,1)}
.casa__niveles{display:none}
.pilar--casa{padding-top:0}
@media(max-width:900px){
  .casa{--p:1}
  .casa__d .cn{transform:none;opacity:1}
  .casa__d .ram,.casa__d .tron2{stroke-dashoffset:0}
}
@media(max-width:900px){
  /* a 390 px los tres rótulos de nivel se pisaban entre sí y con el pie de
     figura: son texto de 15 px dentro de un lienzo que se reduce a un tercio.
     Salen del dibujo y pasan a ser una lista de verdad, debajo. El guion
     recorta además el viewBox al cuerpo de la casa (data-vb-angosto), que es
     el espacio que dejan libre los rótulos al marcharse. */
  .casa__d .rot,.casa__d .sala,.casa__d .gui,
  .casa__d .niv,.casa__d .nivt,.casa__d .nivs{display:none}
  .casa__niveles{
    display:grid;gap:var(--e4);list-style:none;
    width:min(100%,1180px);margin:clamp(16px,4vw,26px) auto 0;padding-inline:var(--canal);
  }
  .casa__niveles li{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--e3);
    align-items:baseline;padding-top:9px;border-top:1px solid var(--linea);
  }
  .casa__cod{font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;color:var(--oro)}
  .casa__niveles b{
    display:block;font-family:var(--display);font-style:italic;font-weight:400;
    font-size:var(--d1);color:#fff;
  }
  .casa__niveles small{display:block;margin-top:3px;font-size:var(--t2);
    line-height:1.5;color:var(--tinta-3)}
  .casa__niveles li > span + b{grid-column:2}
  .casa__niveles li small{grid-column:2}
  /* Rev 10.1 · el pie de figura de la casa está anclado al fondo de la sección
     porque en pantalla ancha cae sobre el dibujo a sangre. En estrecha la
     lista de niveles baja al mismo sitio y los dos se pisaban letra sobre
     letra. Aquí el pie vuelve al flujo, detrás de la lista, con su filete. */
  .casa .obrada__pie{
    position:static;display:grid;gap:4px;
    width:min(100%,var(--ancho));margin:var(--e5) auto 0;
    padding:var(--e3) var(--canal) 0;
    border-top:1px solid rgba(201,169,106,.24);
  }
}

/* ------------------------------------- C · abanico del dossier (metodología) */
.dossier__d .losa{fill:rgba(15,29,49,.92);stroke:rgba(201,169,106,.42);stroke-width:1.3}
.dossier__d .canto{fill:rgba(6,14,26,.96);stroke:rgba(201,169,106,.26);stroke-width:1}
.dossier__d .fino{fill:none;stroke:rgba(138,172,206,.26);stroke-width:.9}
.dossier__d .t{fill:none;stroke:rgba(95,208,214,.55);stroke-width:1.3}
.dossier__d .oro{stroke:var(--oro)}
.dossier__d .pl{fill:rgba(20,38,62,.95);stroke:rgba(95,208,214,.52);stroke-width:1.2}
.dossier__d .pl.o{fill:rgba(8,18,32,.96);stroke:rgba(95,208,214,.22)}
.dossier__d .reng{fill:none;stroke:rgba(138,172,206,.30);stroke-width:1}
.dossier__d .num{fill:var(--oro);font-family:var(--dato);font-size:16px;letter-spacing:.06em}
.dossier__d .lomo{fill:var(--tinta-2);font-family:var(--dato);font-size:12px;letter-spacing:.15em}
.dossier__d .pie{fill:var(--tinta-3);font-family:var(--dato);font-size:11px;letter-spacing:.22em}
/* el abanico: nueve hojas girando sobre la bisagra de la carpeta. El origen de
   giro viene del generador (--ox/--oy), que es el único que sabe dónde cae esa
   esquina en las coordenadas del dibujo. */
.dossier__d g.hoja{
  --o:clamp(0,(var(--p) - var(--k,0)) / .36,1);
  transform-box:view-box;transform-origin:var(--ox) var(--oy);
  /* --sx/--sy los escribe el apuntador (rev 11) para adelantar la hoja
     señalada; el abanico manda el resto. Una sola transformación, dos dueños
     que no se pisan. */
  transform:rotate(calc(var(--i) * -3.4deg * var(--o)))
            translate(calc(var(--i) * 3px * var(--o) + var(--sx,0px)),
                      calc(var(--i) * -2px * var(--o) + var(--sy,0px)));
  opacity:clamp(0,(var(--p) - var(--k,0) + .06) / .18,1);
  transition:transform .34s cubic-bezier(.22,.72,.24,1);
  will-change:transform,opacity;
}
.dossier__d g.cv{opacity:clamp(0,var(--p) / .14,1)}
@media(max-width:900px){
  .dossier{--p:1}
  .dossier__d g.hoja,.dossier__d g.cv{opacity:1}
}
@media(max-width:700px){
  .dossier__d .lomo,.dossier__d .pie{display:none}
  .dossier__d .num{font-size:26px}
}

/* --------------------------------------------- D · vía del ticket (mesa) --- */
.ciclo{--p:0;margin:clamp(16px,2.2vw,32px) 0 clamp(8px,1.4vw,20px)}
.ciclo__d{width:100%;max-width:820px;height:auto;display:block;overflow:visible;margin-inline:auto}
.ciclo__d .vol{fill:rgba(19,36,60,.94);stroke:rgba(95,208,214,.60);stroke-width:1.3;stroke-linejoin:round}
.ciclo__d .gui{fill:none;stroke:rgba(201,169,106,.34);stroke-width:1}
.ciclo__d .losa{fill:rgba(15,29,49,.88);stroke:rgba(95,208,214,.36);stroke-width:1.3}
.ciclo__d .canto{fill:rgba(6,14,26,.96);stroke:rgba(95,208,214,.20);stroke-width:1}
.ciclo__d .junta{fill:none;stroke:rgba(138,172,206,.18);stroke-width:.9}
.ciclo__d .t{fill:none;stroke:rgba(95,208,214,.60);stroke-width:1.4;stroke-linejoin:round}
.ciclo__d .fino{fill:none;stroke:rgba(138,172,206,.32);stroke-width:.9}
.ciclo__d .oro{stroke:var(--oro)}
.ciclo__d .tron{fill:none;stroke:var(--oro);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--p) / .5,1))}
.ciclo__d .num{fill:var(--oro);font-family:var(--dato);font-size:17px;letter-spacing:.12em}
.ciclo__d .est{fill:var(--tinta);font-family:var(--display);font-style:italic;font-size:20px}
/* una estación se enciende cuando el folio la alcanza, ni un cuadro antes */
.ciclo__d .ve{opacity:clamp(.24,(var(--p) - var(--k,0) + .10) / .14,1)}
.ciclo__d .fol{fill:var(--oro);stroke:none}
.ciclo__d .folt{fill:var(--oro);font-family:var(--dato);font-size:11px;letter-spacing:.18em}
.ciclo__folio{opacity:0}
@supports (offset-path:path("M0 0 L1 1")){
  .ciclo__folio{
    offset-path:var(--via);offset-distance:calc(var(--p) * 100%);offset-rotate:0deg;
    opacity:clamp(0,var(--p) / .05,1);will-change:offset-distance;
  }
}
@media(max-width:700px){
  /* a 390 px la vía es una línea de 4 mm con cuatro cajas: no cuenta nada que
     los cuatro párrafos de abajo no cuenten mejor. Se retira entera. */
  .ciclo{display:none}
}

/* ==================== REV 10.1 · LA LENGUA SE EXTIENDE ==================== */
/* Cuatro frentes nuevos con el MISMO contrato de rendimiento de la rev 10: una
   variable (--p) por pieza y por cuadro, y todo el reparto resuelto aquí con
   calc(). Ni un filtro, ni una sombra por cuadro.

   E · la plancha del pilar V pasa de fotografía a dibujo, y NO se mueve
   F · los tres diagramas de expediente SE DIBUJAN al entrar
   G · la visita técnica: la camioneta LLEGA y los pasos SE ENCIENDEN
   H · los seis vértices del héroe son botones con vista previa y despliegue */

/* ------------------------------ E · plancha dibujada (espécimen del pilar V) */
/* Sin animación a propósito: sus cuatro hermanas son fotografías quietas y
   ésta es una plancha de archivo, no una pieza de scroll. Mover la única que
   se dibuja, tres centímetros debajo de la casa que ya se abre, sería el tic
   que esta revisión existe para evitar. */
.especimen__placa--traza{background:linear-gradient(163deg,#143047 0%,#0A1628 54%,#070F1C 100%)}
.especimen__d{display:block;width:100%;height:auto;aspect-ratio:1.043}
/* la caja de registro es la pieza del fondo: se dibuja con menos tinta que el
   módulo para que la profundidad se lea sin recurrir a una sombra */
.especimen__d .caja{fill:rgba(11,23,40,.94);stroke:rgba(138,172,206,.52);stroke-width:1.3}
.especimen__d .caja.o{fill:rgba(6,13,24,.98);stroke:rgba(138,172,206,.30)}
.especimen__d .hueco{fill:rgba(5,11,21,.96);stroke:rgba(138,172,206,.42);stroke-width:1.1}
.especimen__d .marco{fill:rgba(15,29,49,.94);stroke:rgba(95,208,214,.55);stroke-width:1.4}
.especimen__d .t{fill:rgba(20,38,62,.96);stroke:rgba(95,208,214,.86);stroke-width:1.7;
  stroke-linejoin:round}
.especimen__d .t.o{fill:rgba(10,20,36,.96);stroke:rgba(95,208,214,.44)}
.especimen__d .tecla{fill:rgba(12,25,43,.96);stroke:rgba(95,208,214,.62);stroke-width:1.3}
.especimen__d .bisel{fill:none;stroke:rgba(163,206,238,.34);stroke-width:1.1}
.especimen__d .grab{fill:none;stroke:rgba(190,222,246,.62);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.especimen__d .fino{fill:none;stroke:rgba(138,172,206,.58);stroke-width:1.1}
/* el eje de montaje: la línea de puntos que ata las tres piezas. Es el único
   trazo de la plancha que no existe en el objeto — existe en el plano */
.especimen__d .eje{fill:none;stroke:rgba(201,169,106,.34);stroke-width:1;
  stroke-dasharray:3 6}
.especimen__d .tron{fill:none;stroke:var(--oro);stroke-width:3;stroke-linecap:round}
.especimen__d .pu{fill:var(--oro)}

/* ------------------------------- F · diagramas de expediente (casos) ------- */
/* El verbo de esta pieza es DIBUJARSE: la lámina sale como sale un plano del
   plóter, por etapas, y cada etapa es una capa real del expediente —el piso,
   la línea, la red, la vigilancia—. El orden no es decorativo: es el orden en
   que ANI llega a un sitio que ya estaba funcionando. */
.figura--traza{--p:0;min-height:clamp(300px,34vw,420px);display:grid;place-items:stretch}
/* el velo de la lámina fotográfica aquí sobra: hundía el tercio inferior del
   dibujo, que es justo donde caen la unidad de transporte y el filtro de
   acceso. Queda lo justo para que el pie se lea sobre el trazo. */
.figura--traza::after{
  background:linear-gradient(180deg,rgba(7,15,28,0) 0%,rgba(7,15,28,.04) 68%,rgba(7,15,28,.34) 100%);
}
.lam__d{display:block;width:100%;height:100%;position:relative;z-index:1}
.lam__d .losa{fill:rgba(11,24,42,.60);stroke:rgba(95,208,214,.46);stroke-width:1.3}
.lam__d .junta{fill:none;stroke:rgba(138,172,206,.20);stroke-width:.9}
/* las tres caras de un sólido. Sin tres valores distintos un cubo isométrico
   es un hexágono; con ellos, un cuerpo. La cara-a mira a la derecha y recibe
   más luz, la cara-b mira al frente-izquierda y es la sombra propia. */
.lam__d .tapa{fill:rgba(30,55,86,.97);stroke:rgba(95,208,214,.84);stroke-width:1.5;
  stroke-linejoin:round}
.lam__d .cara-a{fill:rgba(20,39,64,.97);stroke:rgba(95,208,214,.70);stroke-width:1.4;
  stroke-linejoin:round}
.lam__d .cara-b{fill:rgba(12,25,43,.97);stroke:rgba(95,208,214,.56);stroke-width:1.4;
  stroke-linejoin:round}
.lam__d .oro-tapa{fill:rgba(58,45,24,.97);stroke:var(--oro);stroke-width:1.6;
  stroke-linejoin:round}
.lam__d .oro-cara-a{fill:rgba(41,32,17,.97);stroke:rgba(201,169,106,.82);stroke-width:1.4;
  stroke-linejoin:round}
.lam__d .oro-cara-b{fill:rgba(26,20,11,.97);stroke:rgba(201,169,106,.62);stroke-width:1.4;
  stroke-linejoin:round}
.lam__d .t{fill:rgba(19,36,60,.94);stroke:rgba(95,208,214,.84);stroke-width:1.6;
  stroke-linejoin:round}
.lam__d .fino{fill:none;stroke:rgba(138,172,206,.62);stroke-width:1.2}
.lam__d .poste{fill:none;stroke:rgba(138,172,206,.72);stroke-width:1.6;stroke-linecap:round}
.lam__d .hueco{fill:none;stroke:rgba(163,206,238,.46);stroke-width:1.2}
.lam__d .brazo{fill:none;stroke:rgba(95,208,214,.62);stroke-width:1.8;stroke-linecap:round}
.lam__d .hoja{fill:none;stroke:rgba(95,208,214,.44);stroke-width:1.2}
.lam__d .vidrio{fill:none;stroke:rgba(163,206,238,.52);stroke-width:1.2}
.lam__d .tacto{fill:none;stroke:rgba(201,169,106,.44);stroke-width:2.2;stroke-linecap:round}
.lam__d .eco{fill:none;stroke:rgba(138,172,206,.34);stroke-width:1.1}
.lam__d .ecog{opacity:.5}
.lam__d .riel{fill:none;stroke:rgba(163,206,238,.58);stroke-width:2}
.lam__d .lente{fill:none;stroke:rgba(190,222,246,.72);stroke-width:2.4;stroke-linecap:round}
/* el haz de la cámara va a trazos y NO se dibuja: aparece. Es lo único de la
   lámina que no es materia, así que tampoco se traza como si lo fuera. La
   regla necesita ganarle en especificidad a la del trazo general. */
.lam__d .tz path.cono{fill:none;stroke:rgba(95,208,214,.44);stroke-width:1.1;
  stroke-dasharray:5 6;stroke-dashoffset:0}
.lam__d .arco{fill:none;stroke:rgba(201,169,106,.70);stroke-width:1.4}
.lam__d .oro{stroke:var(--oro)}
.lam__d .pu{fill:var(--oro)}
.lam__d .tron{fill:none;stroke:var(--oro);stroke-width:2.8;stroke-linecap:round}
.lam__d .ram{fill:none;stroke:rgba(95,208,214,.86);stroke-width:1.8;stroke-linecap:round}
/* una etapa: aparece y se traza. La opacidad va cuatro veces más rápido que el
   trazo para que la línea nazca ya con su tinta y no como un fantasma gris. */
.lam__d .tz{opacity:clamp(0,(var(--p) - var(--k,0) + .02) / .06,1);will-change:opacity}
.lam__d .tz path,.lam__d .tz ellipse,.lam__d .tz circle,.lam__d .tz rect{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--k,0)) / .22,1));
}
.lam__d .tz path{fill-opacity:clamp(0,(var(--p) - var(--k,0) - .06) / .18,1)}
@media(max-width:900px){
  /* el motor de progreso suelta la variable en pantalla estrecha; la pieza se
     planta en su cuadro final, que es el dibujo completo */
  .figura--traza,.visita{--p:1}
  .visita__van{transform:translate3d(var(--dx),var(--dy),0);opacity:1}
  .visita__d .tz,.visita__d .vh{opacity:1}
  .visita__d .tz path,.visita__d .tz rect,.visita__d .tz circle{stroke-dashoffset:0}
  .lam__d .tz{opacity:1}
  .lam__d .tz path,.lam__d .tz ellipse,.lam__d .tz circle,.lam__d .tz rect{stroke-dashoffset:0}
  .lam__d .tz path{fill-opacity:1}
}

/* ---------------------------------- G · la visita técnica (contacto) ------- */
/* Verbo propio: la camioneta LLEGA. No recorre una vía como el folio del
   ticket —ese viaje ES la pieza—; aquí el viaje ocupa el primer tercio y lo
   que cuenta la historia es el encendido de los cuatro hitos a su paso, que
   son los cuatro pasos que la página explica con palabras justo debajo. */
.visita{--p:0;margin:clamp(20px,3vw,40px) 0 clamp(24px,3.4vw,44px);
  border-top:1px solid var(--linea);padding-top:clamp(16px,2.2vw,28px)}
.visita__d{width:100%;height:auto;display:block;overflow:visible}
.visita__d .losa{fill:rgba(11,22,38,.90);stroke:rgba(138,172,206,.22);stroke-width:1.1}
.visita__d .acera{fill:rgba(16,30,51,.86);stroke:rgba(138,172,206,.20);stroke-width:1.1}
.visita__d .eje{fill:none;stroke:rgba(201,169,106,.28);stroke-width:1.4}
.visita__d .tapa{fill:rgba(30,55,86,.97);stroke:rgba(95,208,214,.82);stroke-width:1.5;
  stroke-linejoin:round}
.visita__d .cara-a{fill:rgba(20,39,64,.97);stroke:rgba(95,208,214,.68);stroke-width:1.4;
  stroke-linejoin:round}
.visita__d .cara-b{fill:rgba(12,25,43,.97);stroke:rgba(95,208,214,.54);stroke-width:1.4;
  stroke-linejoin:round}
.visita__d .vidrio{fill:none;stroke:rgba(163,206,238,.52);stroke-width:1.2}
.visita__d .bordillo{fill:none;stroke:rgba(163,206,238,.34);stroke-width:1.6}
.visita__d .t{fill:none;stroke:rgba(95,208,214,.62);stroke-width:1.4;stroke-linejoin:round}
.visita__d .fino{fill:none;stroke:rgba(138,172,206,.36);stroke-width:1}
.visita__d .gui{fill:none;stroke:rgba(201,169,106,.34);stroke-width:1}
.visita__d .oro{stroke:var(--oro)}
.visita__d .pu{fill:var(--oro)}
.visita__d .rueda{fill:rgba(6,13,24,.98);stroke:rgba(138,172,206,.55);stroke-width:1.2}
.visita__d .num{fill:var(--oro);font-family:var(--dato);font-size:15px;letter-spacing:.12em}
.visita__d .tz{opacity:clamp(0,(var(--p) - var(--k,0) + .02) / .08,1)}
.visita__d .tz path,.visita__d .tz rect,.visita__d .tz circle{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--k,0)) / .20,1));
}
/* un hito no se dibuja: SE ENCIENDE cuando la camioneta lo alcanza. Por eso
   arranca visible a un cuarto de tinta y sube, en vez de nacer de la nada. */
.visita__d .vh{opacity:clamp(.22,(var(--p) - var(--k,0) + .06) / .10,1)}
.visita__van{
  --o:clamp(0,var(--p) / .42,1);
  transform:translate3d(calc(var(--o) * var(--dx)),calc(var(--o) * var(--dy)),0);
  opacity:clamp(0,var(--p) / .05,1);will-change:transform;
}
.visita__pie{
  margin-top:var(--e4);display:flex;justify-content:space-between;gap:var(--e4);
  flex-wrap:wrap;font-family:var(--dato);font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.6;
}
.visita__pie .f{color:var(--oro)}
.visita__pie .n{color:var(--tinta-3)}
@media(max-width:760px){
  /* a 390 px la calle mide cuatro centímetros y los cuatro glifos caben en un
     dedo. La escena se retira: los cuatro pasos de abajo ya los cuentan. */
  .visita{display:none}
}

/* -------------------- H · los seis vértices del héroe, como botones -------- */
/* Los rótulos dejaron de pintarse en el lienzo y son botones de verdad: foco
   de teclado, nombre accesible y traducción por el mismo data-en que el resto
   del sitio. El lienzo conserva la marca de vértice y la línea de cota —dos
   trazos— y el guion sólo escribe la posición de seis elementos compuestos. */
.heroe__areas{
  /* z-index 3, no 2: el .wrap del héroe también declara 2 y va DESPUÉS en el
     documento — con empate, el texto tapaba los seis botones y el clic moría
     en un párrafo. La lista sigue sin capturar puntero; solo sus botones. */
  position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none;
  pointer-events:none;
}
.heroe__areas li{position:absolute;top:0;left:0;will-change:transform}
/* El rótulo pintado de la rev 10 medía 9,2 px porque era una cota: nadie lo
   iba a pulsar. Ahora es un control, y un control de 9,2 px con un blanco de
   17 px no es un detalle de estilo, es un fallo — lo cazó a11y.py en cuanto el
   texto pasó del lienzo al DOM. Sube a 11 px y el blanco a 27, que es lo
   mínimo honesto. Sigue siendo una placa mono sobre la escena; sólo que ahora
   se lee de verdad y se puede tocar. */
.area{
  display:flex;align-items:center;gap:8px;pointer-events:auto;cursor:pointer;
  background:rgba(6,13,24,.88);border:0;padding:8px 10px;
  font-family:var(--dato);font-size:11px;font-weight:600;letter-spacing:.05em;
  line-height:1;white-space:nowrap;color:var(--tinta);
  transition:background var(--rapido) var(--suave),color var(--rapido) var(--suave),
             transform 120ms var(--sal);
}
.area__n{color:var(--oro-claro)}
.area:hover,.area:focus-visible,.area--cerca{background:rgba(9,22,40,.96);color:#fff}
.area:hover .area__n,.area:focus-visible .area__n,.area--cerca .area__n{color:var(--oro)}
.area--cerca{box-shadow:inset 0 0 0 1px rgba(201,169,106,.55)}
/* El pulso de la escena llega al rotulo: no es un parpadeo decorativo, es el
   frente de onda alcanzandolo. Entra en dos cuadros (la senal llega, no se
   desvanece hacia dentro) y se va despacio, que es como se apaga algo que se
   ha encendido de verdad. Solo la cifra y el filete: el fondo no se toca para
   que no compita con el rotulo que el cursor tenga encima. */
@keyframes areaSenal{
  0%   {box-shadow:inset 0 0 0 0 rgba(90,208,214,0)}
  9%   {box-shadow:inset 0 0 0 1px rgba(90,208,214,.85)}
  100% {box-shadow:inset 0 0 0 1px rgba(90,208,214,0)}
}
@keyframes areaSenalN{
  0%   {color:var(--oro-claro)}
  9%   {color:#EAF7FA}
  100% {color:var(--oro-claro)}
}
.area--senal{animation:areaSenal 880ms cubic-bezier(.16,.84,.44,1) both}
.area--senal .area__n{animation:areaSenalN 880ms cubic-bezier(.16,.84,.44,1) both}
/* con la vista previa abierta los otros cinco rótulos se retiran a media
   tinta: la miniatura mide 270 px y acaba tapando a alguno, y un rótulo
   asomando por detrás de un panel se lee como un defecto, no como una capa */
.heroe__areas[data-vista="1"] .area:not(.area--cerca){opacity:.30}
.heroe__areas .area{transition:background var(--rapido) var(--suave),color var(--rapido) var(--suave),
  opacity var(--rapido) var(--suave)}
.area[aria-expanded="true"]{background:var(--oro);color:#0A1628}
.area[aria-expanded="true"] .area__n{color:rgba(10,22,40,.7)}
.heroe__areas li[hidden]{display:none}
/* el ancla que publica el lienzo es el punto donde arrancaba el rótulo pintado
   y su medio alto: el botón se cuelga de ahí con la propiedad translate, que
   es independiente del transform que lleva la posición. Cuando la cota sale
   hacia la izquierda, el bloque se cuelga por su flanco derecho. */
.heroe__areas .area{translate:0 -50%}
.heroe__areas li[data-der="1"] .area{translate:-100% -50%}

/* la vista previa: al acercarse a un vértice, la lámina de esa disciplina se
   traza en miniatura junto al rótulo. Es el anzuelo; el clic es el despliegue.
   Un solo elemento para las seis: el contenido se clona del panel una vez. */
.area__vista{
  --p:0;
  position:absolute;left:0;top:0;z-index:4;width:clamp(210px,18vw,272px);
  pointer-events:none;
  background:rgba(6,13,24,.92);border:1px solid rgba(201,169,106,.34);
  padding:9px 10px 7px;opacity:0;
  transition:opacity var(--rapido) var(--suave);
}
.area__vista[data-viva="1"]{opacity:1}
.area__vista svg{width:100%;height:auto;display:block}
.area__vista .area__pie{
  display:block;margin-top:6px;font-family:var(--dato);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);
}
.area__vista .area__pie b{color:var(--oro);font-weight:500}

/* el despliegue en sitio: la escena no navega, se superpone */
.disc{
  position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  padding:var(--canal);background:rgba(4,10,20,.93);
}
.disc[hidden]{display:none}
.disc__caja{
  position:relative;width:min(100%,880px);max-height:100%;overflow:auto;
  background:var(--naval-900);border:1px solid rgba(201,169,106,.34);
  padding:clamp(20px,2.6vw,36px);
  box-shadow:0 32px 90px rgba(2,7,16,.62);
}
.disc__x{
  position:absolute;top:8px;right:10px;z-index:2;background:none;border:0;
  cursor:pointer;color:var(--tinta-3);font-size:1.5rem;line-height:1;
  padding:6px 10px;transition:color var(--rapido) var(--suave);
}
.disc__x:hover,.disc__x:focus-visible{color:var(--oro)}
.disc__ficha[hidden]{display:none}
.disc__n{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro);
}
.disc__t{
  margin-top:var(--e3);font-family:var(--display);font-weight:300;line-height:1.06;
  color:#fff;font-size:clamp(1.4rem,.95rem + 1.5vw,2.3rem);
}
.disc__lamina,.disc__via{margin-top:var(--e4);border-top:1px solid var(--linea);
  padding-top:var(--e4)}
.disc__lamina svg,.disc__via svg{width:100%;height:auto;display:block;overflow:visible}
.disc__puntos{margin-top:var(--e5);list-style:none;display:grid;gap:var(--e3)}
.disc__puntos li{
  position:relative;padding-left:22px;color:var(--tinta-2);
  font-size:var(--t4);line-height:1.62;
}
.disc__puntos li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;
  background:var(--oro);
}
.disc__ir{margin-top:var(--e5)}
/* las marcas del pilar: chips de texto sobre filete, sin tarjetas. Las que
   tienen perfil de partner son botón de verdad y abren su ficha. */
.disc__mlabel{
  margin-top:var(--e5);font-family:var(--dato);font-size:var(--t1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
}
.disc__marcas{margin-top:var(--e2);display:flex;flex-wrap:wrap;gap:8px 10px}
.disc__marca{
  font-family:var(--dato);font-size:var(--t2);letter-spacing:.06em;
  color:var(--tinta-2);background:none;border:1px solid var(--linea);
  padding:5px 11px;line-height:1.3;
  transition:color var(--rapido) var(--suave),border-color var(--rapido) var(--suave);
}
button.disc__marca{cursor:pointer}
button.disc__marca:hover,button.disc__marca:focus-visible{
  color:var(--oro-claro);border-color:rgba(201,169,106,.55);
}
.disc__marca--dato{color:var(--tinta-3)}
.disc__acciones{margin-top:var(--e5);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.disc__acciones .disc__ir{margin-top:0}
/* la capa viva de la lámina: solo existe cuando el trazado terminó */
.disc__lamina .vivo{opacity:clamp(0,(var(--p) - .90) / .10,1)}

/* la lámina del despliegue: los mismos trazos del despiece de servicios, esta
   vez trazándose. El reparto por familias —losa, retícula, esquema, oro— es lo
   que la hace legible: primero el terreno, después lo que ANI pone encima. */
.disc__lamina{--p:0}
.disc__lamina .losa{fill:rgba(15,29,49,.90);stroke:rgba(95,208,214,.42);stroke-width:1.3;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--p) / .24,1));
  fill-opacity:clamp(0,(var(--p) - .10) / .20,1)}
.disc__lamina .canto{fill:rgba(6,14,26,.94);stroke:rgba(95,208,214,.22);stroke-width:1;
  opacity:clamp(0,(var(--p) - .12) / .16,1)}
.disc__lamina .rej{fill:none;stroke:rgba(138,172,206,.16);stroke-width:.8;
  opacity:clamp(0,(var(--p) - .22) / .20,1)}
.disc__lamina .som{fill:url(#somD)}
.disc__lamina .esq{opacity:clamp(0,(var(--p) - .34) / .10,1)}
.disc__lamina .esq path,.disc__lamina .esq ellipse,.disc__lamina .esq rect{
  fill:none;stroke:rgba(95,208,214,.62);stroke-width:1.3;stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - .36) / .34,1));
}
.disc__lamina .esq .o{stroke:rgba(95,208,214,.26)}
.disc__lamina .esq .gr{stroke:rgba(138,172,206,.42)}
.disc__lamina .esq .rej{stroke:rgba(138,172,206,.16)}
.disc__lamina .esq .pun{stroke:rgba(138,172,206,.34);stroke-dasharray:1}
.disc__lamina .esq .zona{fill:rgba(95,208,214,.05);stroke:rgba(95,208,214,.26)}
.disc__lamina .esq .cono{fill:rgba(95,208,214,.06);stroke:rgba(95,208,214,.30)}
.disc__lamina .esq .per{stroke:rgba(95,208,214,.55);stroke-width:2}
.disc__lamina .esq .bus{stroke:rgba(138,172,206,.50);stroke-width:1.6}
.disc__lamina .esq .lz{stroke:rgba(95,208,214,.42)}
.disc__lamina .esq .arco{stroke:rgba(201,169,106,.50)}
/* la pieza de oro es la última en encenderse: es la que ANI firma */
.disc__lamina .esq .oro{stroke:var(--oro);
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - .74) / .24,1))}
.disc__via{--p:0}

@media(max-width:900px){
  /* sin puntero no hay vértice al que acercarse: los seis rótulos bajan a ser
     una lista de verdad debajo del titular, con los mismos botones. */
  /* La lista sale del lienzo y entra en el flujo, pero en el HTML vive ANTES
     del titular —tiene que hacerlo: en pantalla ancha se posiciona sobre la
     escena y necesita existir junto a ella—. Sin reordenar, en el móvil lo
     primero que se ve bajo la cabecera son seis rótulos técnicos y el titular
     queda enterrado. El orden de rejilla lo arregla sin tocar el marcado. */
  .heroe .wrap{order:1}
  .heroe__areas{
    order:2;
    position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;margin-top:clamp(28px,6vw,44px);background:var(--linea);
    border:1px solid var(--linea);pointer-events:auto;
    width:min(100%,var(--ancho));margin-inline:auto;
  }
  .heroe__areas li{position:static;transform:none!important}
  .heroe__areas li[hidden]{display:block}
  .area{
    width:100%;justify-content:flex-start;background:var(--naval-900);
    padding:13px 12px;font-size:var(--t1);white-space:normal;text-align:left;
    min-height:48px;
  }
  .heroe__areas li[data-der="1"] .area{flex-direction:row}
  .area__vista{display:none}
  .disc{position:fixed;z-index:70}
  .disc__caja{max-height:88vh}
}
@media(max-width:520px){
  .heroe__areas{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  /* cuadro final completo, que es como se apagan todas las piezas de la casa */
  .torre,.casa,.dossier,.ciclo,.figura--traza,.visita{--p:1}
  .lam__d .tz,.visita__d .tz,.visita__d .vh{opacity:1}
  .lam__d .tz path,.lam__d .tz ellipse,.lam__d .tz circle,.lam__d .tz rect,
  .visita__d .tz path,.visita__d .tz rect,.visita__d .tz circle{stroke-dashoffset:0}
  .lam__d .tz path{fill-opacity:1}
  .visita__van{transform:translate3d(var(--dx),var(--dy),0);opacity:1}
  .disc__lamina,.disc__via{--p:1}
  /* sin movimiento: la lámina completa es el cuadro final digno; el pulso
     de operación no se muestra (el JS además pausa el reloj SMIL del SVG) */
  .disc__lamina .vivo{display:none}
  .torre__d .tp,.casa__d .cn{transform:none;opacity:1}
  .dossier__d g.hoja{transform:rotate(calc(var(--i) * -3.4deg))
    translate(calc(var(--i) * 3px),calc(var(--i) * -2px));opacity:1}
}

/* ------------------------------------------------------------- impresión --- */
@media print{
  #malla,.suelo,.ops,.cinta__pausa,.hamb,.idioma,#nav,.ptz{display:none}
  body{background:#fff;color:#111}
  .titulo,.heroe h1,.portada h1{color:#111}
  .portada__foto,.portada__hud,.portada__mira,.pilar__barrido{display:none}
  .portada{min-height:0;padding-block:24px}
  .capitulo__n{-webkit-text-stroke:0;color:#8A6A24}
  .cita-ancha blockquote{color:#111}
  .tira__n{color:#111}
}

/* ---------------------------------------------- rev 16 · scrub de video ---- */
/* La transformacion vive en el CLIP (fotorrealista, generado aparte); el
   scroll la recorre: el motor §13-bis de app.js mueve video.currentTime con
   el mismo muelle del obra-scrub. Encima SOLO rotulos mono en su propia caja,
   conmutados por clase al cruzar su umbral — sobre el video no se pinta nada
   por cuadro (leccion de fps del 30-ago). La fuente es un parametro del
   generador: clip definitivo nuevo = mismo motor, cero JS. El poster de cada
   video es su CUADRO FINAL: no-JS, reduced-motion y el onefile (que excluye
   los scrub-*.webm por peso) quedan plantados en el remate, no en un hueco. */
.vscrub{position:relative;height:300svh;background:var(--abismo)}
.vscrub--breve{height:260svh}
.vscrub__lienzo{position:sticky;top:0;height:100svh;overflow:hidden}
.vscrub__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* acento opcional dormido (calcado SVG): sin CSS de fases hasta que despierte */
.vscrub__plano{position:absolute;inset:0;width:100%;height:100%;display:none}
/* velo fijo, mismo oficio que el del obra-scrub: suelo para titular y pie.
   Es UNA capa estatica compuesta una vez — no se repinta con el progreso. */
.vscrub__grad{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(5,10,19,.82) 0%,rgba(5,10,19,.42) 32%,rgba(6,12,22,.10) 62%,rgba(6,12,22,.38) 100%),
    linear-gradient(0deg,rgba(4,9,17,.88) 0%,rgba(4,9,17,.26) 30%,rgba(4,9,17,0) 56%),
    linear-gradient(180deg,rgba(7,15,28,.72) 0%,rgba(7,15,28,0) 22%);
}
.vscrub__cab{
  position:absolute;left:var(--canal);top:clamp(76px,11vh,132px);
  max-width:min(78vw,820px);pointer-events:none;
  display:grid;grid-template-columns:1fr;
}
.vscrub__cab .kicker{grid-row:1}
.vscrub__cab .titulo{grid-row:2;text-shadow:0 2px 30px rgba(4,9,17,.85)}
/* lede y remate comparten celda: la invitacion se retira al arrancar el
   recorrido y la tesis llega al MISMO sitio cuando el clip remata — nunca
   pelean con los rotulos de la derecha ni con la esquina de El Inge */
.vscrub__cab .lede,.vscrub__final{grid-row:3;grid-column:1}
.vscrub__cab .lede{
  max-width:34em;text-shadow:0 1px 12px rgba(4,9,17,.9);
  transition:opacity 640ms var(--suave);
}
.vscrub--lejos .vscrub__cab .lede{opacity:0}
/* rotulos por tramo: pila mono abajo-derecha, cada uno en su caja */
.vscrub__marcas{
  position:absolute;right:var(--canal);bottom:clamp(120px,16vh,190px);
  margin:0;list-style:none;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none;
}
.vscrub__marcas li{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-2);
  border:1px solid rgba(138,172,206,.26);background:rgba(7,15,28,.66);
  padding:.42rem .8rem;opacity:0;transform:translate3d(10px,0,0);
  transition:opacity 450ms var(--suave),transform 450ms var(--suave),
             color 450ms var(--suave),border-color 450ms var(--suave);
}
.vscrub__marcas li.viva{opacity:1;transform:none}
/* el tramo vigente habla en oro; los ya recorridos se quedan de testigos */
.vscrub__marcas li.actual{color:var(--oro-claro);border-color:rgba(201,169,106,.55)}
/* remate: la tesis de la seccion, en serif, cuando el clip llega a su final */
.vscrub__final{
  margin-top:var(--e4);max-width:22em;
  font-family:var(--display);font-variation-settings:'opsz' 144;
  font-weight:300;font-style:italic;
  font-size:clamp(1.3rem,1rem + 1.5vw,2.1rem);line-height:1.16;color:var(--crema);
  text-shadow:0 2px 30px rgba(4,9,17,.85);
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity 640ms var(--entra),transform 640ms var(--entra);
}
.vscrub--fin .vscrub__final{opacity:1;transform:none}
/* carril e invitacion: mismos instrumentos que el obra-scrub */
.vscrub__carril{
  position:absolute;right:var(--canal);top:50%;translate:0 -50%;
  height:min(38vh,300px);width:1px;background:rgba(201,169,106,.22);
}
.vscrub__carril i{
  position:absolute;inset:0;background:var(--oro);
  transform:scaleY(0);transform-origin:top center;will-change:transform;
}
.vscrub__hint{
  position:absolute;right:var(--canal);top:calc(50% + min(19vh,150px) + 18px);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.24em;
  text-transform:uppercase;color:var(--tinta-2);
  transition:opacity 640ms var(--suave);
}
.vscrub--lejos .vscrub__hint{opacity:0}
/* clip inalcanzable (onefile, red caida): el poster —cuadro final— sostiene
   la escena y los rotulos se plantan encendidos */
.vscrub--fijo .vscrub__marcas li{opacity:1;transform:none}
.vscrub--fijo .vscrub__final{opacity:1;transform:none}
.vscrub--fijo .vscrub__cab .lede{opacity:0}
.vscrub--fijo .vscrub__hint,.vscrub--fijo .vscrub__carril{display:none}
@media(max-width:900px){
  .vscrub{height:260svh}
  .vscrub--breve{height:230svh}
  .vscrub__cab{max-width:80vw}
  .vscrub__marcas{bottom:clamp(96px,13vh,150px);gap:6px}
  .vscrub__marcas li{font-size:.62rem;letter-spacing:.14em;padding:.34rem .6rem}
  .vscrub__final{max-width:84vw}
  .vscrub__hint{display:none}
}
/* sin movimiento: cuadro final del poster, rotulos encendidos, cero teatro */
@media(prefers-reduced-motion:reduce){
  .vscrub,.vscrub--breve{height:auto}
  .vscrub__lienzo{position:relative;height:min(78vh,660px)}
  .vscrub__marcas li{opacity:1;transform:none}
  .vscrub__final{opacity:1;transform:none}
  .vscrub__cab .lede{opacity:0}
  .vscrub__hint,.vscrub__carril{display:none}
}
@media print{
  .vscrub,.vscrub--breve{height:auto}
  .vscrub__lienzo{position:relative;height:420px}
  .vscrub__carril,.vscrub__hint{display:none}
}

/* ==== retro 30-ago (b) · lo isométrico cede su sitio al material REAL ==== */

/* -- 1 · la lámina del despliegue del héroe: fotografía/metraje a sangre.
   La escena toma el ancho COMPLETO de la caja (rompe el padding del marco:
   nada de miniaturas en caja) y la hoja técnica vive encima del encuadre:
   esquinas de registro + rótulo mono, como en las bandas de metraje. El --p
   que ya escribe el guion del despliegue gobierna el revelado: primero
   asienta el encuadre, después las esquinas, al final el rótulo. */
.disc__lamina--real{
  position:relative;overflow:hidden;border-top:0;padding-top:0;
  margin:var(--e4) calc(-1 * clamp(20px,2.6vw,36px)) 0;
  height:clamp(240px,36vh,340px);background:var(--abismo);
}
.disc__lamina--real img{
  width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%);
  display:block;
  opacity:clamp(0,var(--p) / .40,1);
  transform:scale(calc(1.05 - .05 * clamp(0,var(--p) / .85,1)));
}
.disc__lamina--real::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,15,28,.30) 0%,rgba(7,15,28,0) 30%,
             rgba(7,15,28,0) 62%,rgba(7,15,28,.62) 100%);
}
.disc__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--foco,50% 50%);opacity:0;
  transition:opacity 700ms var(--suave);
}
.disc__video.va{opacity:1}
.disc__mira{opacity:calc(.42 * clamp(0,(var(--p) - .45) / .30,1))}
/* la esquina inferior-izquierda cede su sitio al rótulo de la hoja técnica */
.disc__mira span:nth-child(3){display:none}
.disc__hudrot{
  position:absolute;z-index:2;left:clamp(14px,1.8vw,24px);bottom:clamp(12px,1.6vw,20px);
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.1em;
  background:rgba(7,15,28,.78);padding:6px 10px;
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  opacity:clamp(0,(var(--p) - .62) / .30,1);
  transform:translateY(calc(6px * (1 - clamp(0,(var(--p) - .62) / .30,1))));
}
.disc__hudrot .c{color:var(--tinta-2)}
.disc__hudrot b{color:var(--oro);font-weight:600;letter-spacing:.14em}
@media(max-width:640px){.disc__lamina--real{height:clamp(180px,30vh,240px)}}

/* -- 2 · lámina de caso: el diagrama isométrico cede a la evidencia.
   Fotografía (o metraje en ping-pong) a sangre de la figura, con UNA caja
   de anotación y su rótulo mono: HUD quieto, cero canvas, cero costo. */
.figura--real{
  min-height:0;display:block;align-self:start;
  position:sticky;top:calc(var(--alto-nav,70px) + 32px);
  height:clamp(380px,54vh,560px);
}
.figura--real img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--foco,50% 50%);
}
.figura--real .lamr__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--foco,50% 50%);
  opacity:0;transition:opacity 700ms var(--suave);
}
@media(max-width:900px){
  /* la lámina deja de ser pegajosa, pero NO deja de ser el marco: con 'static'
     salía de la cadena de posicionamiento y su foto, la caja del HUD, el rótulo,
     las marcas de esquina y el pie resolvían contra un ancestro lejano. Relative
     mata el sticky y conserva el marco; top:auto anula el desplazamiento. */
  .figura--real{position:relative;top:auto;height:clamp(260px,56vw,420px)}
}
.figura--real .lamr__video.va{opacity:1}
.figura--real::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,15,28,.18) 0%,rgba(7,15,28,0) 30%,
             rgba(7,15,28,0) 60%,rgba(7,15,28,.55) 100%);
}
.lamr__caja{
  position:absolute;z-index:2;border:1px solid rgba(201,169,106,.85);
  box-shadow:0 0 0 1px rgba(7,15,28,.35);
}
.lamr__rot{
  position:absolute;z-index:2;margin:0;
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.1em;
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  text-shadow:0 1px 6px rgba(4,9,17,.8);
}
.lamr__rot span{color:var(--tinta-2)}
.lamr__rot b{color:var(--oro);font-weight:600;letter-spacing:.14em}
/* En teléfono el marco cae a 260px de alto y el pie de figura se queda con su
   cuarto inferior: el rótulo, anclado a un porcentaje pensado para un marco de
   420-560px, ya no cabe bajo su caja (lam1 aterriza sobre el pie a 520px y por
   debajo; lam0 envuelve a tres líneas a 430px y por debajo). Encogerlo lo vuelve
   ilegible y mudarlo a una esquina lo deja flotando lejos de la caja que
   explica, que es lo único que lo justifica. Se retira: la caja sigue marcando
   la zona y el pie dice lo mismo en prosa —filtro biométrico, CCTV embarcado,
   videovigilancia—. Reaparece intacto en cuanto el marco tiene alto para
   sostenerlo: a 700px el rótulo despeja el pie por 30px. */
@media(max-width:640px){
  .figura--real .lamr__rot{display:none}
}
.figura--real .figura__ref,.figura--real .figura__marcas{z-index:3}

/* -- 3 · rótulos del HUD clicables (banda domótica): la zona es un botón
   invisible sobre la caja dibujada; la mini-ficha es UNA tarjeta sobria
   —filete oro, kicker mono, una línea— que se abre donde está el dato. */
.vbanda__zona{
  position:absolute;z-index:3;background:none;border:0;padding:0;cursor:pointer;
}
.vbanda__zona:focus-visible{outline:1px solid var(--oro);outline-offset:3px}
.vbanda__ficha{
  position:absolute;z-index:4;width:min(340px,42%);
  background:rgba(10,22,40,.94);border:1px solid rgba(201,169,106,.45);
  border-left:2px solid var(--oro);
  padding:14px 16px;
  box-shadow:0 18px 44px rgba(2,7,16,.55);
}
.vbanda__ficha[hidden]{display:none}
.vbanda__ficha .k{
  font-family:var(--dato);font-size:var(--t1);letter-spacing:.16em;color:var(--oro);
  text-transform:uppercase;display:block;
}
.vbanda__ficha p{margin-top:6px;color:var(--tinta-2);font-size:var(--t3);line-height:1.55}
@media(max-width:760px){.vbanda__zona,.vbanda__ficha{display:none}}

/* -- 4 · demo TBS: la terminal responde. Cursor propio (índice dibujado en
   la geometría de la casa), anillo que concede en verde y hoja de puerta
   girando en perspectiva fingida. Reversa sola a los 3 s (app.js). */
.tbsdemo{background:linear-gradient(152deg,#122A44 0%,#0C1E33 52%,#0A1628 100%);padding:0}
.tbsdemo__d{
  display:block;width:100%;height:auto;
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path d="M11 2.5 h3 v11 h9 a2.5 2.5 0 0 1 2.5 2.5 l-1.5 7.5 a3 3 0 0 1 -3 2.5 h-9 a4 4 0 0 1 -3.4 -1.9 l-4.6 -7.1 2.4 -2.4 4.6 3.4 z" fill="%23F4F1E9" stroke="%230A1628" stroke-width="1.6" stroke-linejoin="round"/></svg>') 12 2,pointer;
}
.tbsdemo__d .td-piso{stroke:rgba(138,172,206,.5);stroke-width:1.4;fill:none}
.tbsdemo__d .td-piso--eco{stroke:rgba(138,172,206,.2);stroke-width:1}
.tbsdemo__d .td-marco{stroke:rgba(95,208,214,.8);stroke-width:1.6;fill:none}
.tbsdemo__d .td-marco--int{stroke:rgba(95,208,214,.4);stroke-width:1}
.tbsdemo__d .td-luz{
  fill:rgba(227,206,156,.0);
  transition:fill 900ms var(--suave) 260ms;
}
.tbsdemo__d .td-hoja{
  transform-box:fill-box;transform-origin:0% 50%;
  transition:transform 950ms cubic-bezier(.24,.85,.25,1) 220ms;
}
.tbsdemo__d .td-hoja__cara{fill:rgba(13,28,48,.97)}
.tbsdemo__d .td-hoja__linea{stroke:rgba(95,208,214,.65);stroke-width:1.3;fill:none}
.tbsdemo__d .td-hoja__pomo{fill:rgba(201,169,106,.9)}
.tbsdemo__d .td-poste{stroke:rgba(138,172,206,.75);stroke-width:2;fill:none}
.tbsdemo__d .td-base{stroke:rgba(138,172,206,.75);stroke-width:3;fill:none}
.tbsdemo__d .td-cuerpo{fill:rgba(16,33,55,.97);stroke:rgba(95,208,214,.85);stroke-width:1.5}
.tbsdemo__d .td-anillo{
  fill:none;stroke:rgba(95,208,214,.55);stroke-width:2;
  transition:stroke 420ms var(--suave);
}
.tbsdemo__d .td-led{
  fill:rgba(95,208,214,.35);
  transition:fill 420ms var(--suave);
}
.tbsdemo__d .td-ranura{stroke:rgba(138,172,206,.55);stroke-width:1.4}
.tbsdemo__d .td-onda{
  stroke:rgba(95,208,214,.4);stroke-width:1.3;fill:none;
  transition:stroke 420ms var(--suave);
}
.tbsdemo__d .td-onda--b{stroke:rgba(95,208,214,.22)}
.tbsdemo__d .td-eco{
  font-family:var(--dato);font-size:15px;letter-spacing:.14em;fill:#58BE8B;
}
.tbsdemo__d .td-pie{
  font-family:var(--dato);font-size:11px;letter-spacing:.2em;fill:rgba(138,172,206,.65);
}
.tbsdemo__d:focus-visible{outline:1px solid var(--oro);outline-offset:4px}
/* el pie de la demo va DEBAJO del dibujo, no encima: la línea-guía del svg
   («toque la terminal») es parte de la escena y no se tapa */
.tbsdemo .figura__pie{
  position:static;display:flex;gap:12px;align-items:baseline;
  background:none;border:0;border-top:1px solid var(--linea);
  padding:10px 14px 12px;
}
.tbsdemo .figura__pie .f{color:var(--oro)}
.tbsdemo .figura__pie .n{color:var(--tinta-3)}
/* estado concedido */
.tbsdemo--abierto .td-anillo{stroke:#58BE8B}
.tbsdemo--abierto .td-led{fill:#58BE8B}
.tbsdemo--abierto .td-onda{stroke:rgba(88,190,139,.7)}
.tbsdemo--abierto .td-onda--b{stroke:rgba(88,190,139,.4)}
.tbsdemo--abierto .td-hoja{transform:scaleX(.22) skewY(-9deg)}
.tbsdemo--abierto .td-luz{fill:rgba(227,206,156,.16)}
@media(prefers-reduced-motion:reduce){
  .tbsdemo__d .td-hoja,.tbsdemo__d .td-luz{transition:none}
}