/* ============================================================
   desCifrando — motor.css
   ------------------------------------------------------------
   La MECÁNICA de movimiento de la portada. Se carga después de
   lab.css y solo en index.html; futbol.html no la necesita.

   De dónde sale: de newformcap.com (el enlace de refero que
   trajo Ángel). De ahí se copian los OCHO MECANISMOS, no la
   piel: aquel sitio es negro con verde neón de fondo de cripto;
   este es papel de cuaderno con tinta azul y lo van a leer
   profesores. Misma coreografía, otro cuerpo.

     1  precargador con contador
     2  escenario clavado (sticky) con carrete de fotos
     3  marca de resaltador que se traza bajo cada línea
     4  huecos de foto con trama de puntos
     5  olas entre secciones
     6  marquesinas gigantes en sentidos opuestos
     7  botón con resplandor y flecha que se desliza
     8  riel izquierdo fijo

   Y se respeta la regla de la casa: ?static y
   prefers-reduced-motion apagan TODO.
   ============================================================ */

:root{
  /* el azul de tinta no se ve sobre fondo oscuro: sobre la banda
     de tinta el acento sube de tono. Mismo color, otra luz. */
  --azul-vivo:#5aa9e6;
}

/* ---------- 1. PRECARGADOR ----------
   Cuenta hasta 100 y se va con un barrido. La marquesina del
   fondo es la misma palabra repetida, en serif y casi apagada. */
#carga{
  position:fixed;inset:0;z-index:200;
  background:var(--tinta);color:var(--papel);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:transform 1s cubic-bezier(.7,0,.2,1);
}
#carga.listo{transform:translateY(-101%);}
#carga .cuenta{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(64px,13vw,190px);line-height:1;letter-spacing:-.035em;
  position:relative;z-index:2;
}
/* la barrita que crece: el gesto del resaltador, ya desde el segundo cero */
#carga .barra{
  display:inline-block;vertical-align:baseline;
  width:clamp(30px,5vw,74px);height:clamp(6px,.8vw,11px);
  margin-left:.06em;background:var(--azul-vivo);
  transform:scaleX(var(--p,0));transform-origin:left;
}
#carga .fondo{
  position:absolute;bottom:4vh;left:0;width:100%;z-index:1;
  font-family:var(--serif);font-size:clamp(48px,9vw,130px);
  color:rgba(244,241,232,.055);white-space:nowrap;
  display:flex;gap:.5em;width:max-content;
  animation:correr 22s linear infinite;
}
html.static #carga,html.sin-motor #carga{display:none;}

/* ---------- 6. MARQUESINAS ----------
   Dos filas idénticas dentro de cada cinta: cuando la primera
   termina de salir, la segunda ya está en su lugar. Por eso el
   recorrido es exactamente -50%: no hay salto que disimular. */
@keyframes correr{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes correr-al-reves{from{transform:translateX(-50%);}to{transform:translateX(0);}}

.banda{
  padding:clamp(30px,5vw,60px) 0;overflow:hidden;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:var(--papel);
}
.cinta{display:flex;white-space:nowrap;width:max-content;}
.cinta>span{
  display:block;padding-right:.42em;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(56px,11vw,150px);line-height:1.02;letter-spacing:-.02em;
  color:rgba(25,26,24,.09);
  animation:correr 34s linear infinite;
}
/* la segunda fila corre al revés y en mono: la misma frase dicha
   por la máquina en vez de por la imprenta */
.cinta.maquina{margin-top:clamp(6px,1.2vw,16px);}
.cinta.maquina>span{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(30px,5.5vw,74px);letter-spacing:-.01em;
  color:rgba(27,58,92,.13);
  animation:correr-al-reves 26s linear infinite;
}

/* ---------- 5. OLAS ----------
   El borde entre el papel y la tinta no es una raya: ondula. El
   SVG mide el doble de ancho y se desplaza medio ancho, así el
   ciclo cierra en sí mismo. */
.ola{display:block;line-height:0;overflow:hidden;}
.ola svg{display:block;width:200%;height:clamp(48px,7vw,104px);animation:correr 17s linear infinite;}
.ola.lenta svg{animation-duration:25s;animation-name:correr-al-reves;}

/* ---------- 2 y 8. EL ESCENARIO CLAVADO ----------
   La sección mide varias pantallas de alto; dentro, la escena se
   queda pegada arriba y NO se mueve. Lo que se mueve es el
   carrete y el titular, empujados por la rueda. Es el único
   momento oscuro del sitio: por eso entra y sale con ola. */
.escenario{
  background:var(--tinta);color:var(--papel);
  padding:0;border:none;
  /* una pantalla por proyecto, más una de holgura al final */
  height:calc((var(--n,6) + 1) * 100vh);
  position:relative;
}
.escena{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:210px minmax(0,.95fr) minmax(0,1.3fr);
  gap:clamp(20px,4vw,56px);align-items:center;
  padding:0 clamp(20px,4vw,64px);
}

/* 8 · el riel: no se mueve nunca, es el ancla del ojo */
.riel{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vh,64px);}
.riel .pista-scroll{
  writing-mode:vertical-rl;font-family:var(--sans);font-weight:600;font-size:14px;
  display:flex;align-items:center;gap:14px;color:var(--papel);
}
.riel .pista-scroll::after{
  /* sin esto la flecha hereda el modo vertical del riel y apunta
     a la izquierda en vez de hacia abajo */
  content:'↓';writing-mode:horizontal-tb;
  font-size:13px;color:var(--azul-vivo);
  animation:bajar 1.9s ease-in-out infinite;
}
@keyframes bajar{0%,100%{transform:translateY(0);opacity:1;}50%{transform:translateY(7px);opacity:.45;}}
.riel h4{font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:9px;}
.riel p{font-family:var(--sans);font-size:14px;line-height:1.5;color:rgba(244,241,232,.62);margin-bottom:20px;}
/* el folio: en qué proyecto vas, numerado como publicación */
.riel .folio{font-family:var(--mono);font-size:12px;letter-spacing:.13em;color:rgba(244,241,232,.4);}
.riel .folio b{color:var(--azul-vivo);font-weight:500;}

/* 7 · botón con resplandor: la sombra es del mismo color que el
   relleno, por eso parece que el botón alumbra el papel */
.boton{
  display:inline-flex;align-items:center;gap:14px;align-self:flex-start;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  background:var(--azul-vivo);color:var(--tinta);
  padding:15px 22px;border-radius:3px;
  box-shadow:0 10px 30px -6px rgba(90,169,230,.45);
  transition:box-shadow .3s ease,transform .3s ease;
}
.boton:hover{box-shadow:0 14px 38px -6px rgba(90,169,230,.7);transform:translateY(-2px);}
.boton .flecha{display:block;transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.boton:hover .flecha{transform:translateX(6px);}

/* 2 · el carrete: una columna de fotos que se desliza un hueco
   entero por proyecto. La ventana recorta; la pista viaja. */
.carrete{height:min(74vh,660px);overflow:hidden;position:relative;}
.carrete .pista{
  counter-reset:hueco;
  display:flex;flex-direction:column;height:100%;
  transform:translateY(calc(var(--activo,0) * -100%));
  transition:transform .95s cubic-bezier(.62,.02,.2,1);
}
.hueco{flex:0 0 100%;height:100%;position:relative;}

/* 4 · el hueco de foto. Hoy dice dónde va la foto; el día que
   Ángel meta la suya, se cambia el <div> por un <img> y la
   trama de puntos sigue encima sin tocar nada más. */
.marco{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:5px;
  background:var(--papel-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:26px;
  border:1px dashed rgba(244,241,232,.28);
}
.marco img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  filter:grayscale(1) contrast(1.06) brightness(.98);
}
/* la trama: puntos de medio tono, como foto de periódico viejo
   ampliada. Va SIEMPRE encima, haya foto o no. */
.marco::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(25,26,24,.42) 1px,transparent 1.15px);
  background-size:4px 4px;mix-blend-mode:multiply;opacity:.55;
}
.marco::before{
  counter-increment:hueco;content:counter(hueco,decimal-leading-zero);
  display:none;position:absolute;top:14px;left:16px;z-index:2;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--azul);
}
.marco .aqui{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul);position:relative;z-index:2;
}
.marco .nombre{
  font-family:var(--serif);font-size:clamp(20px,2.4vw,29px);font-weight:600;
  line-height:1.15;color:var(--tinta);position:relative;z-index:2;max-width:16ch;
}
.marco .ruta{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--gris);position:relative;z-index:2;text-transform:none;
  border-top:1px solid var(--linea-fuerte);padding-top:10px;margin-top:4px;
  overflow-wrap:break-word;max-width:34ch;line-height:1.55;
}

/* ---------- 3. TITULARES CON RESALTADOR ----------
   Cada línea vive dentro de una ventana que recorta: el texto
   sube desde abajo como un tipo móvil que se acomoda. Cuando ya
   está puesto, y SOLO entonces, se traza la marca del
   resaltador. Es el mismo orden de todo el departamento:
   primero el dato, después la relación. */
.titulares{position:relative;align-self:center;}
.titular{
  position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);
  opacity:0;pointer-events:none;
  /* el que sale se va RAPIDO y el que entra espera un pelo. Con
     los dos a la misma velocidad se cruzaban a media opacidad y
     quedaban dos titulares grandes encimados, ilegibles. */
  transition:opacity .18s ease;
}
.titular.activo{
  opacity:1;pointer-events:auto;
  transition:opacity .32s ease .14s;
}

.titular .etiqueta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-vivo);margin-bottom:18px;display:block;
}
.linea-t{overflow:hidden;display:block;}
.linea-t>span{
  display:inline-block;position:relative;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(27px,4.1vw,58px);line-height:1.16;letter-spacing:-.025em;
  transform:translateY(108%);
  transition:transform .8s cubic-bezier(.2,.85,.25,1);
}
.titular.activo .linea-t>span{transform:translateY(0);transition-delay:calc(var(--l,0)*.09s);}
/* la marca: una barrita que crece de izquierda a derecha al
   final de la línea, como quien subraya con marcatextos */
.linea-t>span::after{
  content:'';position:absolute;left:calc(100% + .12em);bottom:.16em;
  width:clamp(26px,3.4vw,50px);height:clamp(6px,.62vw,10px);
  background:var(--azul-vivo);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.titular.activo .linea-t>span::after{transform:scaleX(1);transition-delay:calc(.55s + var(--l,0)*.09s);}
.linea-t.sin-marca>span::after{display:none;}

.titular .pie-t{
  font-family:var(--sans);font-size:15.5px;line-height:1.6;
  color:rgba(244,241,232,.66);max-width:46ch;margin-top:24px;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease .5s,transform .6s ease .5s;
}
.titular.activo .pie-t{opacity:1;transform:none;}
.titular .pie-t .estado-t{
  display:block;margin-top:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(244,241,232,.42);
}

/* en pantalla angosta el escenario clavado no cabe: se desarma
   en una lista normal y se acabó el truco. Vale más leerlo. */
@media(max-width:900px){
  .escenario{height:auto;}
  .escena{
    position:static;height:auto;grid-template-columns:1fr;
    padding:clamp(46px,9vw,80px) 22px;gap:34px;
  }
  .riel{flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px;}
  .riel .pista-scroll,.riel .folio{display:none;}
  /* min-width:0 es obligatorio: sin el, el carrete es un item de rejilla
     con min-width:auto y no se encoge por debajo de su contenido (756px:
     tres huecos de 240 y dos separaciones). La columna se estiraba a 756
     y el telefono recortaba la tercera foto y su titular. */
  .carrete{height:auto;overflow:visible;min-width:0;}
  /* rejilla, no columna: un hueco a todo el ancho queda apaisado y
     la figura, que es 3:4, se pierde en el centro con aire a los
     lados. En rejilla cada hueco conserva su proporcion vertical. */
  .carrete .pista{transform:none!important;display:grid;gap:18px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    max-width:920px;}   /* tope a 3 columnas: dos filas de tres */
  .hueco{flex:none;height:auto;aspect-ratio:3/4;}
  /* el escenario se desarma: los titulares dejan de estar al lado de
     su foto, así que se apilan debajo y los huecos se numeran para
     que se pueda emparejar cada texto con su foto */
  .titulares{position:static;display:grid;gap:34px;}
  .titular{position:static;transform:none;opacity:1;pointer-events:auto;}
  .linea-t>span{transform:none;font-size:clamp(25px,7vw,38px);}
  .linea-t>span::after{transform:scaleX(1);}
  .titular .pie-t{opacity:1;transform:none;}
  .marco::before{display:block;}
  .cinta>span{font-size:clamp(42px,13vw,80px);}
}

/* ---------- apagones (regla de la casa) ---------- */
@media(prefers-reduced-motion:reduce){
  .escenario{height:auto;}
  .escena{position:static;height:auto;grid-template-columns:1fr;}
  /* min-width:0 es obligatorio: sin el, el carrete es un item de rejilla
     con min-width:auto y no se encoge por debajo de su contenido (756px:
     tres huecos de 240 y dos separaciones). La columna se estiraba a 756
     y el telefono recortaba la tercera foto y su titular. */
  .carrete{height:auto;overflow:visible;min-width:0;}
  /* rejilla, no columna: un hueco a todo el ancho queda apaisado y
     la figura, que es 3:4, se pierde en el centro con aire a los
     lados. En rejilla cada hueco conserva su proporcion vertical. */
  .carrete .pista{transform:none!important;display:grid;gap:18px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    max-width:920px;}   /* tope a 3 columnas: dos filas de tres */
  .hueco{flex:none;height:auto;aspect-ratio:3/4;}
  /* el escenario se desarma: los titulares dejan de estar al lado de
     su foto, así que se apilan debajo y los huecos se numeran para
     que se pueda emparejar cada texto con su foto */
  .titulares{position:static;display:grid;gap:34px;}
  .titular{position:static;transform:none;opacity:1;pointer-events:auto;}
  .linea-t>span{transform:none;font-size:clamp(25px,7vw,38px);}
  .linea-t>span::after{transform:scaleX(1);}
  .titular .pie-t{opacity:1;transform:none;}
  .marco::before{display:block;}
  .cinta>span,.ola svg,#carga .fondo{animation:none!important;}
  .linea-t>span{transform:none!important;}
}
html.static .escenario{height:auto;}
html.static .escena{position:static;height:auto;grid-template-columns:1fr;}
html.static .carrete{height:auto;overflow:visible;}
html.static .carrete .pista{transform:none!important;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:920px;}
html.static .hueco{flex:none;height:auto;aspect-ratio:3/4;}
html.static .riel .folio,html.static .avance{display:none;}
html.static .titulares{position:static;display:grid;gap:34px;}
html.static .titular{position:static;transform:none;opacity:1;}
html.static .titular .pie-t{opacity:1;transform:none;}
html.static .marco::before{display:block;}
html.static .linea-t>span{transform:none!important;}
html.static .linea-t>span::after{transform:scaleX(1)!important;}

/* ============================================================
   SEGUNDA VUELTA — lo que le faltaba personalidad
   ============================================================ */

/* ---------- 9. LA FIGURA DE CADA PROYECTO ----------
   Un hueco vacío es una caja gris y no dice nada. Cada uno lleva
   ahora su propio objeto de estudio dibujado en vértices y
   aristas, que es el ancla de todo el departamento:

     01 la formación 4-3-3 y los pases entre líneas
     02 las capas de una red y todas sus conexiones
     03 el grafo de Petersen, sin más
     04 dos comunidades y el único puente entre ellas
     05 la red de agua ramificándose
     06 la silueta reducida a puntos, dentro de su caja

   Y se mueven con EL MISMO GESTO del grafo del hero: los vértices
   llegan dispersos y se asientan, y solo después se trazan las
   aristas. Primero los datos, después la estructura. Seis veces,
   con seis objetos distintos.

   El truco para que arranque cuando toca y no al cargar: las
   animaciones nacen en pausa y el proyecto activo las suelta. */
.figura{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;
}
.figura .a{
  stroke:var(--azul);stroke-width:1.15;fill:none;opacity:.34;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:trazar 1s cubic-bezier(.5,0,.2,1) forwards paused;
  animation-delay:calc(.42s + var(--i,0)*.028s);
}
.figura .v{
  fill:var(--papel-2);stroke:var(--tinta);stroke-width:1.25;opacity:0;
  transform:translate(var(--dx,0px),var(--dy,0px));
  animation:asentar .8s cubic-bezier(.3,1.1,.35,1) forwards paused;
  animation-delay:calc(var(--i,0)*.038s);
}
/* la caja de detección del 06: punteada, porque la dibuja la máquina */
.figura .caja{
  fill:none;stroke:var(--azul);stroke-width:1;opacity:.3;
  stroke-dasharray:5 5;
}
.hueco.activo .figura .a,.hueco.activo .figura .v{animation-play-state:running;}

/* El texto va encima de la figura. Se probo con un halo de papel
   detras de cada linea y quedaba un recorte rectangular que
   partia las aristas en seco: peor que el problema. La figura
   baja de tono y el texto le gana por peso, no por tapar. */
.marco .nombre{text-shadow:0 0 12px var(--papel-2),0 0 5px var(--papel-2);}
.marco .aqui,.marco .ruta{text-shadow:0 0 8px var(--papel-2);}
/* y la figura se abre para que el centro respire */
.figura{padding:0;}
.figura .a{opacity:.26;}

/* ---------- 10. AVANCE ----------
   Seis marcas; la del proyecto en pantalla se llena y crece. */
.avance{
  /* por debajo de la nav, que mide ~55px y es sticky */
  position:absolute;top:clamp(74px,10vh,96px);right:clamp(20px,4vw,64px);
  display:flex;align-items:flex-end;gap:6px;height:26px;z-index:4;
}
.avance i{
  display:block;width:3px;height:12px;background:rgba(244,241,232,.22);
  transition:height .45s cubic-bezier(.2,.8,.3,1),background .45s ease;
}
.avance i.puesta{height:26px;background:var(--azul-vivo);}
.avance i.pasada{height:18px;background:rgba(244,241,232,.45);}

/* ---------- 11. LA ETIQUETA QUE SÍ LLEVA A ALGÚN LADO ----------
   Solo el 01 tiene nota. Los otros cinco no enlazan a nada porque
   no hay nada: no se inventa un destino. */
a.etiqueta.con-nota{text-decoration:none;display:inline-flex;align-items:baseline;gap:12px;}
a.etiqueta .ir{
  color:rgba(244,241,232,.45);
  border-bottom:1px solid rgba(244,241,232,.25);
  transition:color .22s ease,border-color .22s ease;
}
a.etiqueta:hover .ir{color:var(--azul-vivo);border-bottom-color:var(--azul-vivo);}

/* ---------- 12. LA NAV SOBRE LA BANDA OSCURA ----------
   La nav de papel encima de la tinta se veía como un tajo blanco.
   Mientras la escena manda, la nav se pasa al otro lado. */
nav{transition:background .45s ease,border-color .45s ease;}
nav.oscura{
  /* solida y sin desenfoque: con alfa + backdrop-filter el
     compositor la dejaba en un gris a medias, ni papel ni tinta */
  background:var(--tinta);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:rgba(244,241,232,.14);
}
nav.oscura .marca,nav.oscura .nav-links a{color:var(--papel);}
nav.oscura .wordmark .des{color:rgba(244,241,232,.55);}
nav.oscura .nav-links a:hover{color:var(--azul-vivo);border-bottom-color:var(--azul-vivo);}
nav.oscura .marca svg circle[fill="#f4f1e8"]{fill:#191a18;}

/* ---------- 13. PARALAJE DEL CARRETE ----------
   La foto no viaja a la misma velocidad que el titular: dentro de
   cada tramo se desplaza un poco más. Es lo que hace que la
   columna se sienta viva y no un pase de diapositivas. */
.carrete .pista{
  transform:translateY(calc(var(--activo,0) * -100% + var(--deriva,0px)));
}

@media(prefers-reduced-motion:reduce){
  .figura .a{stroke-dashoffset:0;animation:none!important;}
  .figura .v{opacity:1;transform:none;animation:none!important;}
  .carrete .pista{--deriva:0px;}
  nav.oscura{background:rgba(244,241,232,.9);}
  nav.oscura .marca,nav.oscura .nav-links a{color:var(--tinta-2);}
}
html.static .figura .a{stroke-dashoffset:0;animation:none!important;}
html.static .figura .v{opacity:1;transform:none;animation:none!important;}
html.static .carrete .pista{--deriva:0px;}

/* ---------- telefono (<=560px) ----------
   Solo area tactil. 44px es el minimo con el que un pulgar acierta, y
   se gana con relleno para no tocar el cuerpo de la letra ni el ritmo
   de la pagina. Va en motor.css porque es la ultima hoja que carga:
   asi le gana en orden a lab.css sin necesidad de subir especificidad
   a la fuerza. Los enlaces dentro de un parrafo se quedan como estan. */
@media(max-width:560px){
  a.marca{padding-top:10px;padding-bottom:10px;}
  .hero-acciones a.pill,.hero-acciones a.pill.solid{padding-top:13px;padding-bottom:13px;}
  .titular a.etiqueta{padding-top:12px;padding-bottom:12px;}
}