/* La portada que deja elegir animación. Sin dependencias y SIN JAVASCRIPT: la
   CSP de esta página es `script-src 'none'`.

   ⚠️ LAS MINIATURAS SE MUEVEN CON `@keyframes`, no con una librería. Es la
   primera pantalla que ve alguien a quien le estás enseñando esto: tiene que
   aparecer entera y al instante, no después de cargar 90 KB de GSAP para animar
   cuatro dibujos de 300 px.

   ⚠️ Y todo lo visual vive AQUI, en clases. La CSP es `style-src 'self'`, así
   que un `style="..."` en el marcado se descarta con el único aviso en la
   consola — ya dejó los puntos de un calendario sin color una vez. */

:root {
  --fondo:    #0d1117;
  --papel:    #161b22;
  --linea:    #283040;
  --texto:    #e6edf3;
  --tenue:    #8b98a9;
  --acento:   #58a6ff;
  --bien:     #3fb950;
  --aviso:    #d29922;

  --chapa:    #c9d4e2;
  --chapa-b:  #97a6ba;
  --cristal:  #0e1723;
  --piel:     #e0a479;
  --pelo:     #33261f;
  --canasto:  #b07a4a;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f6f8fa; --papel: #fff; --linea: #d6dde6;
    --texto: #1f2933; --tenue: #5b6672; --acento: #0b62d0;
    --chapa: #f2f6fa; --chapa-b: #b6c2d1; --cristal: #dde6f0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 20px 60px;
}

.cabeza, main, .pie { max-width: 1060px; margin: 0 auto; }

.cabeza { padding: 48px 0 30px; }
.migas {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tenue);
}
h1 { margin: 0 0 14px; font-size: clamp(30px, 5vw, 50px); line-height: 1.08;
     letter-spacing: -.02em; }
.entrada { margin: 0; max-width: 58ch; color: var(--tenue); font-size: 18px; }
.entrada strong { color: var(--texto); }

/* --- las fichas ---------------------------------------------------------- */

.ficha {
  display: grid;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  /* La transición va en la ficha y no en cada hijo: así el hover entero se
     mueve como una sola pieza. */
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.ficha:hover, .ficha:focus-visible {
  border-color: var(--acento);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.ficha:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* La destacada: miniatura a la izquierda y texto a la derecha, al ancho completo. */
.ficha.grande {
  grid-template-columns: minmax(280px, 1.05fr) 1fr;
  gap: 26px;
  align-items: center;
  padding: 22px;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.rejilla .ficha { grid-template-rows: auto 1fr; gap: 14px; }

.separador {
  margin: 38px 0 16px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tenue);
  display: flex; align-items: center; gap: 14px;
}
.separador::after {
  content: ""; flex: 1; height: 1px; background: var(--linea);
}

.mini {
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 11px;
  overflow: hidden;
}
.mini svg { display: block; width: 100%; height: auto; }

.texto h2 {
  margin: 0 0 8px; font-size: 21px; line-height: 1.22; letter-spacing: -.01em;
}
.ficha.grande .texto h2 { font-size: clamp(23px, 2.5vw, 30px); }

.etiqueta {
  margin: 0 0 10px;
  font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue);
}
.etiqueta.destacada {
  color: var(--bien);
}
.desc { margin: 0 0 12px; color: var(--tenue); font-size: 14.5px; }
.ficha.grande .desc { font-size: 16px; max-width: 46ch; }
.desc strong { color: var(--texto); font-weight: 600; }

.meta {
  margin: 0 0 14px; font: 12px/1.5 var(--mono); color: var(--tenue);
}
.meta .sep { opacity: .5; margin: 0 4px; }
.meta .tenue { opacity: .72; }

.ir {
  margin: 0; font-size: 14.5px; font-weight: 600; color: var(--acento);
}
.ficha:hover .ir { text-decoration: underline; }

/* --- las miniaturas ------------------------------------------------------ */

.m-fondo  { fill: transparent; }
.m-suelo  { stroke: var(--linea); stroke-width: 1.5; }
.m-sombra { fill: rgba(0,0,0,.24); }

.m-miembro { stroke: var(--texto); stroke-width: 5; stroke-linecap: round; }
.m-ropa    { fill: var(--acento); }
.m-piel    { fill: var(--piel); }
.m-pelo    { fill: var(--pelo); }
.m-canasto { fill: none; stroke: var(--canasto); stroke-width: 2.5; }

.m-maquina     { fill: var(--chapa); stroke: var(--chapa-b); stroke-width: 1.2; }
.m-maquina-top { fill: var(--chapa-b); opacity: .45; }
.m-perilla     { fill: var(--cristal); }
.m-vidrio      { fill: var(--cristal); stroke: var(--chapa-b); stroke-width: 1.5; }
/* Con hueco se ve girar; un círculo liso gira y parece quieto. */
.m-tambor {
  fill: none; stroke: var(--acento); stroke-width: 3;
  stroke-dasharray: 12 7; stroke-linecap: round;
  transform-origin: 171px 116px;
  animation: girar 3.4s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.m-cel    { fill: var(--linea); stroke: var(--chapa-b); stroke-width: 1.2; }
.m-cel-p  { fill: var(--papel); }
.m-barra  { fill: var(--linea); }
.m-saldo  { fill: var(--texto); font: 700 13px/1 var(--mono); text-anchor: middle; }
.m-boton  { fill: var(--acento); }
.m-linea  { fill: var(--linea); }

.m-caja  { fill: rgba(127,150,190,.08); stroke: var(--linea); stroke-width: 1.2; }
.m-ficha { fill: rgba(88,166,255,.12); stroke: var(--acento); stroke-width: 1.2; }
.m-cap   { font-size: 20px; text-anchor: middle; }
.m-cap.chico { font-size: 16px; }
.m-pie   { fill: var(--tenue); font: 10px/1 system-ui, sans-serif;
           text-anchor: middle; }

/* El paquete que cruza las tres cajas, en bucle. */
.m-paquete rect { fill: var(--acento); }
.m-paq-t { fill: #06101f; font: 600 9px/1 var(--mono); text-anchor: middle; }
.m-paquete { animation: cruzar 4.2s ease-in-out infinite; }
/* ⚠️ Cruza POR ENCIMA de las cajas (y=28), no por debajo. A la altura que
   tenia antes quedaba pegado al borde inferior del recuadro, que recorta con
   `overflow:hidden`: se veia un rectangulo azul cortado y descolgado en vez de
   un paquete yendo de una caja a la siguiente. */
@keyframes cruzar {
   0%   { transform: translate(56px, 28px);  opacity: 0; }
   8%   { transform: translate(56px, 28px);  opacity: 1; }
  38%   { transform: translate(150px, 28px); opacity: 1; }
  52%   { transform: translate(150px, 28px); opacity: 1; }
  88%   { transform: translate(244px, 28px); opacity: 1; }
 100%   { transform: translate(244px, 28px); opacity: 0; }
}

.m-muro   { stroke: var(--aviso); stroke-width: 1.5; stroke-dasharray: 5 5;
            opacity: .6; }
.m-muro-t { fill: var(--aviso); font: 9px/1 var(--mono); text-anchor: middle;
            opacity: .8; }

/* Las cuatro puertas se encienden en cascada: es lo que cuenta esa animación. */
.m-puerta { fill: rgba(127,150,190,.10); stroke: var(--linea); stroke-width: 1.2;
            animation: pasar 3.6s ease-in-out infinite; }
.m-puerta.p1 { animation-delay: 0s; }
.m-puerta.p2 { animation-delay: .3s; }
.m-puerta.p3 { animation-delay: .6s; }
.m-puerta.p4 { animation-delay: .9s; }
@keyframes pasar {
   0%, 40%, 100% { fill: rgba(127,150,190,.10); stroke: var(--linea); }
  14%, 26%       { fill: rgba(63,185,80,.30);   stroke: var(--bien); }
}

/* Los vínculos se dibujan solos: la forma dice lo que es mejor que un rótulo. */
.m-vinculo {
  fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: trazar 4s ease-in-out infinite;
}
.m-vinculo.v1 { animation-delay: 0s; }
.m-vinculo.v2 { animation-delay: .45s; }
@keyframes trazar {
   0%       { stroke-dashoffset: 120; }
  30%, 78%  { stroke-dashoffset: 0; }
 100%       { stroke-dashoffset: 0; opacity: .35; }
}

/* La curva de la detección se traza sola, y después caen los dos cortes: es el
   orden en que lo cuenta la animación —primero el dato, luego la decisión. */
.m-curva {
  fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round;
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: trazar-curva 5s ease-in-out infinite;
}
@keyframes trazar-curva {
   0%       { stroke-dashoffset: 640; }
  45%, 100% { stroke-dashoffset: 0; }
}
.m-corte {
  stroke: var(--bien); stroke-width: 2; stroke-dasharray: 3 3; opacity: 0;
  animation: caer-corte 5s ease-in-out infinite;
}
.m-corte.c1 { animation-delay: 2.1s; }
.m-corte.c2 { animation-delay: 2.5s; }
@keyframes caer-corte {
   0%, 8%   { opacity: 0; }
  20%, 88%  { opacity: 1; }
 100%       { opacity: 0; }
}

/* --- pie ----------------------------------------------------------------- */

.pie {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linea);
  color: var(--tenue); font-size: 14px;
}
.pie strong { color: var(--texto); }
.pie em { color: var(--aviso); font-style: normal; font-weight: 600; }
.pie .tenue { font-size: 12.5px; opacity: .8; }

@media (max-width: 720px) {
  /* La destacada pasa a columna: a este ancho, media ficha de miniatura deja el
     titular en dos palabras por línea. */
  .ficha.grande { grid-template-columns: 1fr; gap: 18px; }
}

/* Quien pide menos movimiento no debería recibir cuatro dibujos moviéndose. */
@media (prefers-reduced-motion: reduce) {
  .m-tambor, .m-paquete, .m-puerta, .m-vinculo { animation: none; }
  /* Y los que dependen de la animación para verse, se dejan en su estado final:
     un vínculo sin dibujar es un vínculo invisible. */
  .m-vinculo { stroke-dashoffset: 0; }
  .ficha:hover { transform: none; }
}