/* EL TIO - base compartida.

   Lo minimo que necesitan las landings verticales: reset, tipografia, cabecera,
   pie y accesibilidad. Sin nada de la portada (el hero con scrub, el marquee,
   los pilares) y sin un solo color de marca: los colores llegan por tokens
   desde vertical.css y desde el bloque que cada pagina inyecta en su head.

   La portada sigue usando styles.css, que es su hoja completa. Los dos archivos
   comparten la tipografia y el ritmo, que es lo que hace que se reconozcan. */

:root{
  --max:1200px;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- tipografia ----------
   Identica a la de la portada. Es el primer motivo por el que las ocho paginas
   se leen como la misma marca. */
.display{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 125;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.display.giant{font-size:clamp(36px,6.4vw,88px)}
h2.display{font-size:clamp(26px,4.2vw,54px)}
.lead{
  font-size:clamp(15px,1.5vw,19px);
  max-width:58ch;
  margin-top:18px;
}

/* ---------- accesibilidad ---------- */
.skip{
  position:fixed;top:-60px;left:12px;z-index:100;
  background:var(--acento,#7FC9F2);
  color:var(--sobre-acento,#04070B);
  padding:10px 18px;
  display:inline-flex;align-items:center;min-height:44px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--acento,#7FC9F2);outline-offset:3px}

/* ---------- cabecera ---------- */
header.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--pad);
  pointer-events:none;
}
.wordmark{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 125;
  font-weight:900;font-size:17px;letter-spacing:.06em;
  /* Es un enlace a la portada, asi que necesita area tactil de 44px. El margen
     negativo la devuelve para que la cabecera no crezca. */
  display:inline-flex;align-items:center;min-height:44px;margin-block:-14px;
}
.status{
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.3em;
  display:flex;align-items:center;gap:9px;
}
.status .pulse{
  width:7px;height:7px;border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- pie ---------- */
footer .inner{max-width:var(--max);margin:0 auto}
footer p{font-size:12.5px}
.foot-link{transition:color .3s var(--ease);display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .status .pulse{animation:none}
}
@media(max-width:640px){
  :root{--pad:20px}
  .display.giant{font-size:clamp(28px,8.4vw,40px)}
  h2.display{font-size:clamp(20px,6.2vw,34px)}
  header.top .status{display:none}
}