/* LA HOJA DE LAS PAGINAS DE CAJON.

   La comparten /presentaciones/ (la lista de las tres versiones, para
   ellas) y /materiales/ (lo que ellas le mandan a un cliente). Son la
   misma familia de pagina: campo azul con el agua viva detras, el
   isotipo arriba y una lista de piezas grandes.

   Nacio dentro de /presentaciones/ y se saco aqui en cuanto hubo una
   segunda que se veia igual, antes de que las dos empezaran a separarse. */

@font-face{font-family:"Sentient";src:url("/fonts/Sentient-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:"Public Sans";src:url("/fonts/PublicSans-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}

:root{
  /* los colores de la marca, los mismos de /lab/tokens.css */
  --tinta:#06004f;          /* el campo */
  --papel:#fbfbfa;
  --luz:#2dbc94;            /* verde luz */
  --teal:#008aa1;
  --medio:#202d85;
  --serif:"Sentient",Georgia,serif;
  --sans:"Public Sans",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --suave:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--tinta);color:var(--papel);
  font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}

/* ── EL CAMPO. El agua se pinta de verdad con el mismo motor de los
   decks, no es una imagen. Va detras de todo y con techo bajo, porque
   encima vive texto blanco. ─────────────────────────────────────── */
#campo{position:fixed;inset:0;z-index:0;pointer-events:none}
#campo canvas{width:100%;height:100%;display:block;opacity:.85}
/* el campo se apaga hacia abajo para que las tarjetas no compitan */
#campo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,0,79,0) 0%,rgba(6,0,79,.55) 52%,var(--tinta) 88%)}

.hoja{position:relative;z-index:1;max-width:1080px;margin:0 auto;
  padding:clamp(40px,7vh,86px) 16px clamp(64px,12vh,132px)}

.signo{width:clamp(44px,5vw,58px);margin:0 0 clamp(26px,4vh,40px)}
.signo svg{display:block;width:100%;height:auto;color:var(--luz)}

.rotulo{font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(251,251,250,.6);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(40px,6.8vw,74px);line-height:1.02;margin:0 0 22px;
  text-wrap:balance}
.entrada{font-size:clamp(17px,2.1vw,20px);line-height:1.55;
  color:rgba(251,251,250,.74);max-width:44ch;
  margin:0 0 clamp(52px,9vh,96px);text-wrap:pretty}

/* ── las tres entradas ─────────────────────────────────────────── */
.pieza{display:block;text-decoration:none;color:inherit;
  padding-top:clamp(26px,4vh,38px);
  border-top:1px solid rgba(251,251,250,.16)}
.pieza + .pieza{margin-top:clamp(38px,6vh,62px)}

/* El verde se reserva para lo que se puede tocar: el «Abrir» y el
   enlace del pie. Como color de etiqueta hacia ruido.  */

/* ── LA PORTADA ───────────────────────────────────────────────────
   No es la captura de una lámina: se compone aquí. El agua la pinta en
   vivo el mismo motor de los decks y el texto es texto de verdad, así
   que se lee a cualquier tamaño, se puede seleccionar y no hay un JPG
   que mantener al día cuando cambie un titular.

   La medida está escrita sobre un lienzo de 1280x720 y se escala con la
   caja: por eso los tamaños van en `cqw` (porcentaje del ancho del
   contenedor) y no en px. Con px, la portada se veía bien a 1080 y en un
   teléfono salía un titular gigante dentro de una caja chica. */
.marco{position:relative;display:block;border-radius:10px;overflow:hidden;
  aspect-ratio:16/9;background:var(--tinta);
  container-type:inline-size;
  box-shadow:0 18px 50px rgba(0,0,0,.36);
  transition:box-shadow 340ms var(--suave)}
.pieza:hover .marco{box-shadow:0 26px 70px rgba(0,0,0,.5)}
.marco canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* el campo se apaga un poco hacia abajo, que es donde vive el texto */
.marco::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(6,0,79,.1) 0%,rgba(6,0,79,.62) 78%)}

.portada{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:7cqw;gap:2.4cqw}
.portada .l{font-family:var(--serif);font-weight:300;line-height:1.06;
  letter-spacing:-.015em;color:var(--papel);margin:0;
  font-size:7.6cqw;text-wrap:balance}
.portada .s{font-family:var(--sans);font-weight:300;line-height:1.45;
  font-size:2.5cqw;color:rgba(251,251,250,.78);margin:0;max-width:46cqw}
.portada .et{font-family:var(--mono);font-size:1.9cqw;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(251,251,250,.66);margin:0 0 auto}

/* LA PORTADA DICE QUÉ CLASE DE COSA ES, sin explicarlo.
   La hablada lleva tres palabras enormes y nada más; la completa, un
   titular con su párrafo al lado; la documento, lo mismo más una nota
   bajo un filete. Es la diferencia entre las tres versiones, dibujada. */
.portada.hablada .l{font-size:13cqw;line-height:1.0}
.portada.doc .nota-p{font-family:var(--sans);font-weight:300;
  font-size:2.2cqw;line-height:1.5;color:rgba(251,251,250,.6);
  margin:1.6cqw 0 0;padding-top:1.4cqw;max-width:52cqw;
  border-top:1px solid rgba(251,251,250,.28)}

.bajo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:22px}
.pieza h2{font-family:var(--serif);font-weight:300;letter-spacing:-.012em;
  font-size:clamp(27px,3.5vw,38px);line-height:1.08;margin:0}
.dato{font-family:var(--mono);font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(251,251,250,.52);white-space:nowrap}
.pieza p{margin:12px 0 0;font-size:clamp(16px,1.9vw,18px);line-height:1.55;
  color:rgba(251,251,250,.72);max-width:52ch;text-wrap:pretty}

.abrir{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:15px;font-weight:600;color:var(--luz)}
/* la flecha se adelanta un pelo. Nada de inflar el bloque al pasar el
   cursor: eso ya se probo en los botones del sitio y se ve de juguete. */
.abrir span{transition:transform 260ms var(--suave)}
.pieza:hover .abrir span{transform:translateX(5px)}
.pieza:focus-visible{outline:2px solid var(--luz);outline-offset:8px;border-radius:4px}

.nota{margin-top:clamp(52px,9vh,90px);padding-top:26px;
  border-top:1px solid rgba(251,251,250,.16);
  font-size:15px;line-height:1.65;color:rgba(251,251,250,.62);max-width:56ch}
.nota b{font-weight:600;color:var(--papel)}
kbd{font-family:var(--mono);font-size:12px;border:1px solid rgba(251,251,250,.3);
  border-radius:4px;padding:2px 6px;color:var(--papel)}

@media (prefers-reduced-motion:reduce){ .marco,.abrir span{transition:none} }

/* el enlace del pie: verde de marca y subrayado, que en una linea de
   texto el color solo no basta para decir que es un enlace */
.nota a{color:var(--luz);text-underline-offset:3px;
  /* blanco de toque: en linea el enlace medía 17px de alto y el mínimo
     accesible son 24. El relleno vertical lo sube sin moverlo de sitio. */
  display:inline-block;padding:5px 2px;margin:-5px -2px}
.nota a:focus-visible{outline:2px solid var(--luz);outline-offset:3px;border-radius:3px}