/* ============================================================
   ALTUUM · SECCIÓN — capa web
   Sistema de marca de Grupo Altuum aplicado a interfaz web.
   Núcleo 01 · 22 ago 2026 · v1.0

   Orden del archivo:
     0. Tipografía (@font-face)
     1. Reinicio
     2. Tokens — primitivas
     3. Tokens — semánticos (claro)
     4. Tokens — semánticos (oscuro)
     5. Base
     6. Estructura y retícula
     7. Escala tipográfica
     8. Componentes
     9. Utilidades
    10. Movimiento
    11. Impresión

   Prefijo de clase: .alt-   ·   Todo token: --alt-
   ============================================================ */

/* ─── 0 · TIPOGRAFÍA ─────────────────────────────────────────
   Geist y Geist Mono · SIL Open Font License 1.1
   Descarga: vercel.com/font  ·  npm i geist  ·  Google Fonts
   Se recomienda AUTOALOJAR los .woff2 y no depender de un CDN.
   Si se usa Google Fonts, sustituir este bloque por:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap">
   ------------------------------------------------------------ */
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("/fonts/Geist-Variable.woff2") format("woff2-variations"),
      url("/fonts/Geist-Variable.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/fonts/GeistMono-Variable.woff2") format("woff2-variations"),
      url("/fonts/GeistMono-Variable.woff2") format("woff2");
}

/* ─── 1 · REINICIO ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none; margin:0; padding:0}
img,picture,video,canvas,svg{display:block; max-width:100%}
input,button,textarea,select{font:inherit; color:inherit}
button{background:none; border:none; padding:0; cursor:pointer}
table{border-collapse:collapse; width:100%}
:target{scroll-margin-top:calc(var(--alt-nav-h) + var(--alt-s-5))}

/* ─── 2 · TOKENS · PRIMITIVAS ──────────────────────────────── */
:root{
  /* Neutro — sesgo frío hacia el azul */
  --alt-n-50:#F3F5F6;  --alt-n-100:#E7EBED; --alt-n-200:#D5DBDE; --alt-n-300:#B4BEC3;
  --alt-n-400:#8B979D; --alt-n-500:#6B777D; --alt-n-600:#4E585D; --alt-n-700:#384145;
  --alt-n-800:#232A2D; --alt-n-900:#16191B; --alt-n-950:#0E1113;

  /* Azul — profundidad. Solo superficies, nunca tipografía sobre fondo claro */
  --alt-a-50:#EAF0F4;  --alt-a-100:#D2DFE7; --alt-a-200:#A9C0CD; --alt-a-300:#7799AB;
  --alt-a-400:#4E7488; --alt-a-500:#356075; --alt-a-600:#274B5D; --alt-a-700:#1B3A4B;
  --alt-a-800:#16303E; --alt-a-900:#12242F; --alt-a-950:#0C1820;

  /* Verde — sello. Nunca más del 3% de la superficie de una pieza */
  --alt-v-50:#E6F7F3;  --alt-v-100:#C2EDE4; --alt-v-200:#8CDCCB; --alt-v-300:#4FC9B0;
  --alt-v-400:#1DBB9C; --alt-v-500:#00AF8E; --alt-v-600:#009377; --alt-v-700:#00755F;
  --alt-v-800:#005A49; --alt-v-900:#003F33; --alt-v-950:#00261F;

  /* Semánticos de estado — fuera de las tres rampas de marca */
  --alt-error-ink:#A8322A;  --alt-error-bg:#FBEEEC;  --alt-error-line:#EFD2CE;
  --alt-warn-ink:#8A5A0B;   --alt-warn-bg:#FCF2E0;   --alt-warn-line:#EFDDBB;
  --alt-ok-ink:#00755F;     --alt-ok-bg:#E6F7F3;     --alt-ok-line:#C2EDE4;
  --alt-info-ink:#1B3A4B;   --alt-info-bg:#EAF0F4;   --alt-info-line:#D2DFE7;

  /* Tipografía */
  --alt-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --alt-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Escala fluida — el extremo superior es la escala del núcleo */
  --alt-t-hero:clamp(2.75rem,1.35rem + 5.6vw,6rem);        /*  44 → 96 */
  --alt-t-display:clamp(2.25rem,1.45rem + 3.2vw,3.5rem);   /*  36 → 56 */
  --alt-t-h1:clamp(1.875rem,1.35rem + 2.1vw,2.5rem);       /*  30 → 40 */
  --alt-t-h2:clamp(1.5rem,1.2rem + 1.2vw,1.875rem);        /*  24 → 30 */
  --alt-t-h3:clamp(1.25rem,1.1rem + .6vw,1.375rem);        /*  20 → 22 */
  --alt-t-h4:1.125rem;                                     /*  18      */
  --alt-t-lead:clamp(1.0625rem,1rem + .25vw,1.125rem);     /*  17 → 18 */
  --alt-t-body:1rem;                                       /*  16      */
  --alt-t-small:.875rem;                                   /*  14      */
  --alt-t-caption:.75rem;                                  /*  12      */
  --alt-t-label:.6875rem;                                  /*  11      */

  /* Espaciado — base 8. Solo estos valores. */
  --alt-s-0:0;      --alt-s-1:4px;   --alt-s-2:8px;   --alt-s-3:12px;  --alt-s-4:16px;
  --alt-s-5:24px;   --alt-s-6:32px;  --alt-s-7:48px;  --alt-s-8:64px;  --alt-s-9:96px;
  --alt-s-10:128px;

  /* Estructura */
  --alt-container:1280px;
  --alt-container-wide:1440px;
  --alt-measure:66ch;
  --alt-gutter:clamp(24px,5vw,80px);
  --alt-section:clamp(64px,8vw,160px);
  --alt-nav-h:72px;
  --alt-radius:3px;
  --alt-line-1:1px;
  --alt-line-2:2px;

  /* Movimiento */
  --alt-dur-1:120ms;  --alt-dur-2:200ms;  --alt-dur-3:320ms;  --alt-dur-4:600ms;
  --alt-ease:cubic-bezier(.2,.6,.25,1);
  --alt-ease-inout:cubic-bezier(.65,0,.35,1);

  /* Capas */
  --alt-z-nav:100; --alt-z-dropdown:200; --alt-z-scrim:300; --alt-z-modal:400; --alt-z-toast:500;
}

/* ─── 3 · TOKENS · SEMÁNTICOS (CLARO) ──────────────────────── */
:root{
  --alt-canvas:var(--alt-n-50);
  --alt-surface:#FFFFFF;
  --alt-sunken:var(--alt-n-100);
  --alt-plane:var(--alt-a-900);
  --alt-plane-2:var(--alt-a-800);

  --alt-text:var(--alt-n-900);
  --alt-text-2:var(--alt-n-600);
  --alt-text-3:var(--alt-n-500);
  --alt-text-disabled:var(--alt-n-400);
  --alt-on-plane:var(--alt-n-50);
  --alt-on-plane-2:var(--alt-a-200);

  --alt-line:#DCE2E5;
  --alt-line-strong:var(--alt-n-300);
  --alt-line-plane:rgba(169,192,205,.28);

  --alt-seal:var(--alt-v-500);          /* el sello. Superficies y logo, nunca texto sobre claro */
  --alt-seal-ink:var(--alt-v-700);      /* el verde legible sobre papel */
  --alt-ring:var(--alt-v-600);          /* anillo de foco — 3.53:1 sobre papel */

  --alt-link:var(--alt-text);           /* los enlaces van en tinta, subrayados */
  --alt-link-hover:var(--alt-v-700);

  /* Botón primario: plano en claro, papel en oscuro */
  --alt-btn-pri-bg:var(--alt-plane);
  --alt-btn-pri-ink:var(--alt-on-plane);
  --alt-btn-pri-hover:var(--alt-a-800);

  /* Única sombra del sistema. Reservada a capas flotantes. */
  --alt-shadow-flotante:0 1px 2px rgba(12,21,25,.06), 0 12px 32px -12px rgba(12,21,25,.22);
  --alt-scrim:rgba(12,24,32,.55);
  color-scheme:light;
}

/* ─── 4 · TOKENS · SEMÁNTICOS (OSCURO) ─────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-alt-theme="light"]){
    --alt-canvas:#0C1519; --alt-surface:#132027; --alt-sunken:#091013;
    --alt-plane:var(--alt-a-800); --alt-plane-2:var(--alt-a-900);
    --alt-text:#E6ECEE; --alt-text-2:#9FADB4; --alt-text-3:#828F96;
    --alt-text-disabled:#5A666C;
    --alt-on-plane:var(--alt-a-50); --alt-on-plane-2:var(--alt-a-200);
    --alt-line:#223038; --alt-line-strong:#33454E; --alt-line-plane:rgba(169,192,205,.24);
    --alt-seal:var(--alt-v-400); --alt-seal-ink:var(--alt-v-300); --alt-ring:var(--alt-v-300);
    --alt-link:var(--alt-text); --alt-link-hover:var(--alt-v-300);
  --alt-btn-pri-bg:var(--alt-n-50); --alt-btn-pri-ink:var(--alt-n-900); --alt-btn-pri-hover:#FFFFFF;
    --alt-btn-pri-bg:var(--alt-n-50); --alt-btn-pri-ink:var(--alt-n-900); --alt-btn-pri-hover:#FFFFFF;
    --alt-error-ink:#F0A69E; --alt-error-bg:#2A1310; --alt-error-line:#4A241F;
    --alt-warn-ink:#E7BE72;  --alt-warn-bg:#241B0C;  --alt-warn-line:#3F3116;
    --alt-ok-ink:#4FC9B0;    --alt-ok-bg:#0B211C;    --alt-ok-line:#17392F;
    --alt-info-ink:#A9C0CD;  --alt-info-bg:#101E26;  --alt-info-line:#20343F;
    --alt-shadow-flotante:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -16px rgba(0,0,0,.72);
    --alt-scrim:rgba(4,10,13,.66);
    color-scheme:dark;
  }
}
:root[data-alt-theme="dark"]{
  --alt-canvas:#0C1519; --alt-surface:#132027; --alt-sunken:#091013;
  --alt-plane:var(--alt-a-800); --alt-plane-2:var(--alt-a-900);
  --alt-text:#E6ECEE; --alt-text-2:#9FADB4; --alt-text-3:#828F96;
  --alt-text-disabled:#5A666C;
  --alt-on-plane:var(--alt-a-50); --alt-on-plane-2:var(--alt-a-200);
  --alt-line:#223038; --alt-line-strong:#33454E; --alt-line-plane:rgba(169,192,205,.24);
  --alt-seal:var(--alt-v-400); --alt-seal-ink:var(--alt-v-300); --alt-ring:var(--alt-v-300);
  --alt-link:var(--alt-text); --alt-link-hover:var(--alt-v-300);
  --alt-error-ink:#F0A69E; --alt-error-bg:#2A1310; --alt-error-line:#4A241F;
  --alt-warn-ink:#E7BE72;  --alt-warn-bg:#241B0C;  --alt-warn-line:#3F3116;
  --alt-ok-ink:#4FC9B0;    --alt-ok-bg:#0B211C;    --alt-ok-line:#17392F;
  --alt-info-ink:#A9C0CD;  --alt-info-bg:#101E26;  --alt-info-line:#20343F;
  --alt-shadow-flotante:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -16px rgba(0,0,0,.72);
  --alt-scrim:rgba(4,10,13,.66);
  color-scheme:dark;
}

/* ─── 5 · BASE ─────────────────────────────────────────────── */
body{
  background:var(--alt-canvas); color:var(--alt-text);
  font-family:var(--alt-sans); font-size:var(--alt-t-body);
  line-height:1.65; font-weight:400; font-synthesis:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--alt-v-100); color:var(--alt-n-900)}

/* Los enlaces van en tinta, subrayados. El subrayado —no el color— es la señal. */
a{color:var(--alt-link); text-decoration:underline; text-decoration-thickness:var(--alt-line-1);
  text-underline-offset:3px; transition:color var(--alt-dur-1) var(--alt-ease)}
a:hover{color:var(--alt-link-hover)}

/* Foco: siempre visible, nunca suprimido. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--alt-ring); outline-offset:2px; border-radius:var(--alt-radius)}

strong,b{font-weight:600}
small{font-size:var(--alt-t-small)}
code,kbd,samp,pre{font-family:var(--alt-mono); font-size:.9em; font-variant-numeric:tabular-nums}
hr{border:none; border-top:var(--alt-line-1) solid var(--alt-line); margin:var(--alt-s-7) 0}

h1,h2,h3,h4,h5,h6{font-weight:500; line-height:1.15; text-wrap:balance; letter-spacing:-.02em}
h1{font-size:var(--alt-t-h1); letter-spacing:-.025em; line-height:1.08}
h2{font-size:var(--alt-t-h2)}
h3{font-size:var(--alt-t-h3); letter-spacing:-.015em; line-height:1.25}
h4{font-size:var(--alt-t-h4); font-weight:600; letter-spacing:-.008em; line-height:1.35}
p{text-wrap:pretty}

/* ─── 6 · ESTRUCTURA Y RETÍCULA ────────────────────────────── */
/* Puntos de quiebre: 480 · 768 · 1024 · 1280 · 1600 */
.alt-container{width:100%; max-width:calc(var(--alt-container) + var(--alt-gutter)*2);
  margin-inline:auto; padding-inline:var(--alt-gutter)}
.alt-container--ancho{max-width:calc(var(--alt-container-wide) + var(--alt-gutter)*2)}
.alt-container--angosto{max-width:calc(880px + var(--alt-gutter)*2)}

.alt-section{padding-block:var(--alt-section)}
.alt-section--corta{padding-block:calc(var(--alt-section)*.55)}
.alt-section + .alt-section{border-top:var(--alt-line-1) solid var(--alt-line)}
.alt-section.alt-plane + .alt-section,
.alt-section + .alt-section.alt-plane{border-top:none}

.alt-measure{max-width:var(--alt-measure)}
.alt-stack{display:flex; flex-direction:column}
.alt-stack--2{gap:var(--alt-s-2)} .alt-stack--3{gap:var(--alt-s-3)}
.alt-stack--4{gap:var(--alt-s-4)} .alt-stack--5{gap:var(--alt-s-5)}
.alt-stack--6{gap:var(--alt-s-6)} .alt-stack--7{gap:var(--alt-s-7)}
.alt-stack--8{gap:var(--alt-s-8)}

/* Retícula de 12 columnas, canal 24 */
.alt-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--alt-s-5)}
@media (max-width:1023px){.alt-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:767px){.alt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.alt-grid--auto{display:grid; gap:var(--alt-s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* Plano de color: el azul solo aparece así, en superficie completa */
.alt-plane{background:var(--alt-plane); color:var(--alt-on-plane)}
.alt-plane h1,.alt-plane h2,.alt-plane h3,.alt-plane h4{color:var(--alt-on-plane)}
.alt-plane .alt-lead,.alt-plane .alt-text-2{color:var(--alt-on-plane-2)}
.alt-plane a{color:var(--alt-on-plane)}
.alt-plane a:hover{color:var(--alt-v-300)}
.alt-plane hr{border-color:var(--alt-line-plane)}
.alt-plane :focus-visible{outline-color:var(--alt-v-300)}

/* ─── 7 · ESCALA TIPOGRÁFICA ───────────────────────────────── */
.alt-hero-t{font-size:var(--alt-t-hero); font-weight:500; line-height:.98;
  letter-spacing:-.045em; text-wrap:balance}
.alt-display{font-size:var(--alt-t-display); font-weight:500; line-height:1.02;
  letter-spacing:-.03em; text-wrap:balance}
.alt-h1{font-size:var(--alt-t-h1); font-weight:500; line-height:1.08; letter-spacing:-.025em}
.alt-h2{font-size:var(--alt-t-h2); font-weight:500; line-height:1.15; letter-spacing:-.02em}
.alt-h3{font-size:var(--alt-t-h3); font-weight:500; line-height:1.25; letter-spacing:-.015em}
.alt-h4{font-size:var(--alt-t-h4); font-weight:600; line-height:1.35; letter-spacing:-.008em}
.alt-lead{font-size:var(--alt-t-lead); line-height:1.6; color:var(--alt-text-2)}
.alt-body{font-size:var(--alt-t-body); line-height:1.65}
.alt-small{font-size:var(--alt-t-small); line-height:1.6}
.alt-caption{font-size:var(--alt-t-caption); line-height:1.5; color:var(--alt-text-2)}
.alt-label{font-family:var(--alt-mono); font-size:var(--alt-t-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--alt-text-3)}
.alt-data{font-family:var(--alt-mono); font-size:var(--alt-t-small);
  font-variant-numeric:tabular-nums; letter-spacing:.01em}

/* Texto corrido — para bloques provenientes de un CMS */
.alt-prose{max-width:var(--alt-measure)}
.alt-prose > * + *{margin-top:var(--alt-s-4)}
.alt-prose h2{margin-top:var(--alt-s-8)}
.alt-prose h3{margin-top:var(--alt-s-7)}
.alt-prose ul,.alt-prose ol{padding-left:var(--alt-s-5)}
.alt-prose li + li{margin-top:var(--alt-s-2)}
.alt-prose blockquote{border-left:var(--alt-line-2) solid var(--alt-seal);
  padding-left:var(--alt-s-5); color:var(--alt-text-2); font-size:var(--alt-t-lead)}

/* ─── 8 · COMPONENTES ──────────────────────────────────────── */

/* 8.1 · Salto al contenido */
.alt-skip{position:absolute; left:var(--alt-s-4); top:calc(-1*var(--alt-s-10));
  background:var(--alt-plane); color:var(--alt-on-plane); padding:var(--alt-s-3) var(--alt-s-4);
  border-radius:var(--alt-radius); z-index:calc(var(--alt-z-nav) + 1); text-decoration:none}
.alt-skip:focus-visible{top:var(--alt-s-4)}

/* 8.2 · Navegación */
.alt-nav{position:sticky; top:0; z-index:var(--alt-z-nav); height:var(--alt-nav-h);
  display:flex; align-items:center; background:var(--alt-canvas);
  border-bottom:var(--alt-line-1) solid var(--alt-line);
  transition:background var(--alt-dur-2) var(--alt-ease), border-color var(--alt-dur-2) var(--alt-ease)}
.alt-nav__in{display:flex; align-items:center; gap:var(--alt-s-6); width:100%}
.alt-nav__logo{display:block; height:26px; margin-right:auto}
.alt-nav__logo svg,.alt-nav__logo img{height:100%; width:auto}
.alt-nav__links{display:flex; align-items:center; gap:var(--alt-s-6)}
.alt-nav__links a{text-decoration:none; font-size:var(--alt-t-small); color:var(--alt-text-2);
  position:relative; padding-block:var(--alt-s-2)}
.alt-nav__links a:hover,.alt-nav__links a[aria-current]{color:var(--alt-text)}
.alt-nav__links a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:var(--alt-line-2); background:var(--alt-seal)}
/* Sobre el héroe: transparente, y se vuelve sólida al hacer scroll (añadir .is-solid con JS) */
.alt-nav--sobre-hero{position:fixed; background:transparent; border-color:transparent;
  color:var(--alt-on-plane)}
.alt-nav--sobre-hero .alt-nav__links a{color:var(--alt-on-plane-2)}
.alt-nav--sobre-hero .alt-nav__links a:hover{color:var(--alt-on-plane)}
.alt-nav--sobre-hero.is-solid{background:var(--alt-canvas); border-color:var(--alt-line);
  color:var(--alt-text)}
.alt-nav--sobre-hero.is-solid .alt-nav__links a{color:var(--alt-text-2)}
@media (max-width:1023px){
  .alt-nav__links{display:none}
  .alt-nav__toggle{display:inline-flex}
}
.alt-nav__toggle{display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--alt-radius)}

/* 8.3 · Héroe */
.alt-hero{position:relative; display:flex; align-items:flex-end; min-height:min(88svh,900px);
  padding-block:calc(var(--alt-nav-h) + var(--alt-s-9)) var(--alt-s-9);
  background:var(--alt-plane); color:var(--alt-on-plane); overflow:hidden}
.alt-hero__media{position:absolute; inset:0}
.alt-hero__media img,.alt-hero__media video{width:100%; height:100%; object-fit:cover}
/* El texto nunca se apoya en la imagen desnuda: siempre hay velo de por medio. */
.alt-hero__media::after{content:""; position:absolute; inset:0; background:var(--alt-scrim)}
.alt-hero__in{position:relative; z-index:1; width:100%}
.alt-hero__t{max-width:16ch}
.alt-hero__lead{max-width:46ch; margin-top:var(--alt-s-5); color:var(--alt-on-plane-2);
  font-size:var(--alt-t-lead)}
.alt-hero__cta{margin-top:var(--alt-s-7); display:flex; gap:var(--alt-s-3); flex-wrap:wrap}

/* 8.4 · Botones — altura 44 px, objetivo táctil completo */
.alt-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--alt-s-2);
  height:44px; padding-inline:var(--alt-s-5); border-radius:var(--alt-radius);
  font-size:var(--alt-t-small); font-weight:500; line-height:1; text-decoration:none;
  border:var(--alt-line-1) solid transparent; white-space:nowrap;
  transition:background var(--alt-dur-1) var(--alt-ease), border-color var(--alt-dur-1) var(--alt-ease),
             color var(--alt-dur-1) var(--alt-ease)}
.alt-btn--sm{height:36px; padding-inline:var(--alt-s-4); font-size:var(--alt-t-caption)}
.alt-btn--lg{height:52px; padding-inline:var(--alt-s-6); font-size:var(--alt-t-body)}
.alt-btn--bloque{width:100%}

.alt-btn--primario{background:var(--alt-btn-pri-bg); color:var(--alt-btn-pri-ink)}
.alt-btn--primario:hover{background:var(--alt-btn-pri-hover)}
.alt-btn--primario:active{background:var(--alt-a-950)}

.alt-btn--secundario{border-color:var(--alt-line-strong); color:var(--alt-text); background:transparent}
.alt-btn--secundario:hover{background:var(--alt-sunken); border-color:var(--alt-text-3)}

.alt-btn--sello{background:var(--alt-v-500); color:var(--alt-n-900)}   /* uno por página, no más */
.alt-btn--sello:hover{background:var(--alt-v-400)}

.alt-btn--texto{height:auto; padding:0; color:var(--alt-text); text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:var(--alt-line-1)}
.alt-btn--texto:hover{color:var(--alt-link-hover)}

.alt-btn:disabled,.alt-btn[aria-disabled="true"]{background:var(--alt-sunken);
  color:var(--alt-text-disabled); border-color:transparent; cursor:not-allowed}

.alt-plane .alt-btn--primario{background:var(--alt-n-50); color:var(--alt-n-900)}
.alt-plane .alt-btn--primario:hover{background:#FFFFFF}
.alt-plane .alt-btn--secundario{border-color:var(--alt-line-plane); color:var(--alt-on-plane)}
.alt-plane .alt-btn--secundario:hover{background:rgba(243,245,246,.08); border-color:var(--alt-on-plane-2)}

/* 8.5 · Campos de formulario */
.alt-field{display:flex; flex-direction:column; gap:var(--alt-s-2)}
.alt-field__label{font-size:var(--alt-t-small); font-weight:500; color:var(--alt-text)}
.alt-field__hint{font-size:var(--alt-t-caption); color:var(--alt-text-2)}
.alt-input,.alt-select,.alt-textarea{
  width:100%; min-height:44px; padding:var(--alt-s-3) var(--alt-s-4);
  background:var(--alt-surface); color:var(--alt-text);
  border:var(--alt-line-1) solid var(--alt-line-strong); border-radius:var(--alt-radius);
  font-size:var(--alt-t-body); line-height:1.4;
  transition:border-color var(--alt-dur-1) var(--alt-ease)}
.alt-textarea{min-height:132px; resize:vertical; padding-block:var(--alt-s-3)}
.alt-input::placeholder,.alt-textarea::placeholder{color:var(--alt-text-3)}
.alt-input:hover,.alt-select:hover,.alt-textarea:hover{border-color:var(--alt-text-3)}
.alt-input:focus-visible,.alt-select:focus-visible,.alt-textarea:focus-visible{
  border-color:var(--alt-text); outline:2px solid var(--alt-ring); outline-offset:1px}
.alt-input:disabled,.alt-textarea:disabled{background:var(--alt-sunken);
  color:var(--alt-text-disabled); cursor:not-allowed}
.alt-field[data-estado="error"] .alt-input,
.alt-field[data-estado="error"] .alt-textarea{border-color:var(--alt-error-ink)}
.alt-field__error{font-size:var(--alt-t-caption); color:var(--alt-error-ink);
  display:flex; gap:var(--alt-s-2); align-items:flex-start}
.alt-check{display:flex; gap:var(--alt-s-3); align-items:flex-start;
  font-size:var(--alt-t-small); line-height:1.5}
.alt-check input{width:18px; height:18px; margin-top:3px; accent-color:var(--alt-seal-ink); flex:none}

/* 8.6 · Tarjeta */
.alt-card{background:var(--alt-surface); border:var(--alt-line-1) solid var(--alt-line);
  border-radius:var(--alt-radius); padding:var(--alt-s-5); display:flex; flex-direction:column;
  gap:var(--alt-s-3); transition:border-color var(--alt-dur-2) var(--alt-ease)}
.alt-card--enlace:hover{border-color:var(--alt-text-3)}
.alt-card--plano{background:var(--alt-plane); color:var(--alt-on-plane); border-color:transparent}
.alt-card__media{margin:calc(-1*var(--alt-s-5)) calc(-1*var(--alt-s-5)) 0;
  border-radius:var(--alt-radius) var(--alt-radius) 0 0; overflow:hidden}

/* 8.7 · Cifra */
.alt-figura{display:flex; flex-direction:column; gap:var(--alt-s-1)}
.alt-figura__n{font-size:var(--alt-t-display); font-weight:500; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.alt-figura__k{font-size:var(--alt-t-small); color:var(--alt-text-2); max-width:26ch}
.alt-plane .alt-figura__k{color:var(--alt-on-plane-2)}

/* 8.8 · Etiqueta / píldora */
.alt-pill{display:inline-flex; align-items:center; gap:var(--alt-s-2);
  font-family:var(--alt-mono); font-size:var(--alt-t-label); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:var(--alt-s-1) var(--alt-s-3);
  border:var(--alt-line-1) solid var(--alt-line-strong); border-radius:var(--alt-radius);
  color:var(--alt-text-2)}
.alt-pill--sello{border-color:var(--alt-v-500); color:var(--alt-seal-ink)}

/* 8.9 · Aviso */
.alt-aviso{display:flex; gap:var(--alt-s-3); padding:var(--alt-s-4) var(--alt-s-5);
  border:var(--alt-line-1) solid; border-radius:var(--alt-radius); font-size:var(--alt-t-small)}
.alt-aviso--error{background:var(--alt-error-bg); border-color:var(--alt-error-line); color:var(--alt-error-ink)}
.alt-aviso--aviso{background:var(--alt-warn-bg);  border-color:var(--alt-warn-line);  color:var(--alt-warn-ink)}
.alt-aviso--exito{background:var(--alt-ok-bg);    border-color:var(--alt-ok-line);    color:var(--alt-ok-ink)}
.alt-aviso--info{background:var(--alt-info-bg);   border-color:var(--alt-info-line);  color:var(--alt-info-ink)}

/* 8.10 · Acordeón (preguntas frecuentes) */
.alt-acordeon{border-top:var(--alt-line-1) solid var(--alt-line)}
.alt-acordeon__i{border-bottom:var(--alt-line-1) solid var(--alt-line)}
.alt-acordeon__b{display:flex; align-items:center; justify-content:space-between; gap:var(--alt-s-4);
  width:100%; text-align:left; padding-block:var(--alt-s-5); font-size:var(--alt-t-h4);
  font-weight:500; letter-spacing:-.01em; min-height:64px}
.alt-acordeon__b::after{content:""; width:12px; height:12px; flex:none;
  border-right:var(--alt-line-2) solid var(--alt-text-3); border-bottom:var(--alt-line-2) solid var(--alt-text-3);
  transform:rotate(45deg) translateY(-25%); transition:transform var(--alt-dur-2) var(--alt-ease)}
.alt-acordeon__b[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-25%)}
.alt-acordeon__p{padding-bottom:var(--alt-s-5); max-width:var(--alt-measure); color:var(--alt-text-2)}
.alt-acordeon__p[hidden]{display:none}

/* 8.11 · Tabla */
.alt-tabla-wrap{overflow-x:auto; border:var(--alt-line-1) solid var(--alt-line);
  border-radius:var(--alt-radius); background:var(--alt-surface)}
.alt-tabla{min-width:600px; font-size:var(--alt-t-small)}
.alt-tabla th,.alt-tabla td{text-align:left; padding:var(--alt-s-3) var(--alt-s-4);
  border-bottom:var(--alt-line-1) solid var(--alt-line); vertical-align:baseline}
.alt-tabla thead th{font-family:var(--alt-mono); font-size:var(--alt-t-label); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--alt-text-3); white-space:nowrap}
.alt-tabla tbody tr:last-child td{border-bottom:none}
.alt-tabla td[data-num]{font-family:var(--alt-mono); font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap}

/* 8.12 · Medios */
.alt-media{overflow:hidden; border-radius:var(--alt-radius); background:var(--alt-sunken)}
.alt-media > img,.alt-media > video{width:100%; height:100%; object-fit:cover}
.alt-media--32{aspect-ratio:3/2}   /* paisaje, uso general */
.alt-media--45{aspect-ratio:4/5}   /* retrato editorial */
.alt-media--169{aspect-ratio:16/9} /* video */
.alt-media--11{aspect-ratio:1/1}   /* persona */
.alt-media--219{aspect-ratio:21/9} /* banda ancha */
.alt-media__pie{margin-top:var(--alt-s-2); font-size:var(--alt-t-caption); color:var(--alt-text-2)}
/* Texto sobre imagen: siempre con velo. */
.alt-sobre-imagen{position:relative; display:grid; align-items:end; color:var(--alt-on-plane)}
.alt-sobre-imagen > .alt-media{grid-area:1/1; align-self:stretch; justify-self:stretch}
.alt-sobre-imagen::before{content:""; grid-area:1/1; background:var(--alt-scrim);
  border-radius:var(--alt-radius); z-index:1; align-self:stretch; justify-self:stretch}
.alt-sobre-imagen > :not(.alt-media){grid-area:1/1; z-index:2; padding:var(--alt-s-6)}

/* 8.13 · Capas flotantes — única excepción a la regla de cero sombras */
.alt-flotante{background:var(--alt-surface); border:var(--alt-line-1) solid var(--alt-line);
  border-radius:var(--alt-radius); box-shadow:var(--alt-shadow-flotante)}
.alt-velo{position:fixed; inset:0; background:var(--alt-scrim); z-index:var(--alt-z-scrim)}
.alt-modal{position:fixed; z-index:var(--alt-z-modal); inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%); width:min(560px,calc(100vw - var(--alt-s-8)));
  max-height:min(80svh,720px); overflow:auto; padding:var(--alt-s-6)}
.alt-dropdown{position:absolute; z-index:var(--alt-z-dropdown); min-width:200px; padding:var(--alt-s-2)}

/* 8.14 · Pie de página */
.alt-footer{background:var(--alt-plane); color:var(--alt-on-plane);
  padding-block:var(--alt-s-9) var(--alt-s-7)}
.alt-footer a{color:var(--alt-on-plane-2); text-decoration:none; font-size:var(--alt-t-small)}
.alt-footer a:hover{color:var(--alt-on-plane); text-decoration:underline}
.alt-footer__base{margin-top:var(--alt-s-8); padding-top:var(--alt-s-5);
  border-top:var(--alt-line-1) solid var(--alt-line-plane);
  display:flex; flex-wrap:wrap; gap:var(--alt-s-4); justify-content:space-between;
  font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--alt-on-plane-2)}

/* 8.15 · Miga de pan y paginación */
.alt-migas{display:flex; flex-wrap:wrap; gap:var(--alt-s-2); align-items:center;
  font-size:var(--alt-t-caption); color:var(--alt-text-2)}
.alt-migas li + li::before{content:"/"; margin-right:var(--alt-s-2); color:var(--alt-text-3)}
.alt-migas a{text-decoration:none}
.alt-migas a:hover{text-decoration:underline}
.alt-pag{display:flex; gap:var(--alt-s-2); align-items:center}
.alt-pag a,.alt-pag span{display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; border-radius:var(--alt-radius); text-decoration:none;
  font-size:var(--alt-t-small); font-variant-numeric:tabular-nums}
.alt-pag a:hover{background:var(--alt-sunken)}
.alt-pag [aria-current]{background:var(--alt-plane); color:var(--alt-on-plane)}

/* ─── 9 · UTILIDADES ───────────────────────────────────────── */
.alt-sello-punto{width:8px; height:8px; border-radius:50%; background:var(--alt-seal); flex:none}
.alt-regla{border:none; border-top:var(--alt-line-2) solid currentColor; opacity:1; margin:0}
.alt-tabular{font-variant-numeric:tabular-nums}
.alt-text-2{color:var(--alt-text-2)}
.alt-text-3{color:var(--alt-text-3)}
.alt-sunken{background:var(--alt-sunken)}
.alt-solo-lectores{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ─── 10 · MOVIMIENTO ──────────────────────────────────────── */
/* Solo se animan opacidad y transform. Nunca color de planos, nunca layout. */
.alt-revelar{opacity:0; transform:translateY(12px);
  transition:opacity var(--alt-dur-4) var(--alt-ease), transform var(--alt-dur-4) var(--alt-ease)}
.alt-revelar.is-visible{opacity:1; transform:none}
.alt-revelar--d1{transition-delay:60ms}
.alt-revelar--d2{transition-delay:120ms}
.alt-revelar--d3{transition-delay:180ms}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .alt-revelar{opacity:1; transform:none}
}

/* ─── 11 · IMPRESIÓN ───────────────────────────────────────── */
@media print{
  :root{--alt-canvas:#FFFFFF; --alt-text:#000000}
  .alt-nav,.alt-velo,.alt-modal,.alt-dropdown,.alt-hero__media{display:none!important}
  .alt-plane,.alt-footer{background:#FFFFFF!important; color:#000000!important}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.8em; color:#555}
  .alt-section{padding-block:24pt; break-inside:avoid}
}