/* ═══════════════════════════════════════════════════════════════
   MARCA JONATAN CORREA · sistema Altitud · ajuste Profundidad (oct 2026)
   Hoja base: tokens, tipografía, componentes y movimiento.
   Va junto a movimiento.js. Sin dependencias.

   Fuentes (pegar en <head>, antes de esta hoja):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,wght@75..125,400..900&family=Spline+Sans+Mono:wght@400;500&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens · modo claro ──
   Cinco colores: Tinta (titulares y texto), Papel (fondos), Azul noche (marca),
   Profundidad (el degradado, solo en piezas contenidas) y Verde (solo acciones). */
:root{
  /* Superficies y texto */
  --tinta:#0f1424;         /* Tinta: negro con una gota de azul noche */
  --papel:#f5f4f0;         /* Papel: blanco roto cálido, nunca blanco puro */
  --bg:#f5f4f0;            /* fondo de página (Papel) */
  --surface:#fcfbf8;       /* tarjetas y hojas */
  --ink:#0f1424;           /* titulares y texto fuerte (Tinta) */
  --ink-2:#474c5c;         /* texto corrido */
  --ink-3:#6b6f7c;         /* etiquetas grises y pies */
  --line:rgba(15,20,36,.12);
  --line-2:rgba(15,20,36,.26);

  /* Marca */
  --brand:#1c2a6b;         /* Azul noche: logo, superficies de marca, gráficos */
  --brand-ink:#2c4199;     /* azul para etiquetas y enlaces sobre claro */
  --jade:#00b27e;          /* Verde: solo acciones (letra azul noche encima) */
  --jade-ink:#007a56;      /* verde para texto sobre claro */
  --jade-soft:rgba(0,178,126,.12);
  --verde-claro:#4fd1a5;   /* verde para texto sobre el degradado */

  /* Fijos (no cambian con el tema) */
  --abismo:#1c2a6b;        /* superficie oscura de marca = azul noche */
  --hielo:#b4c3f2;
  --horizonte:#d6def7;
  --blanco:#ffffff;
  --on-sky:#f1f3fa;        /* texto sobre el degradado */
  --on-sky-2:#cdd5ee;

  /* Botón principal (oscuro) y botón de acción (.btn-club, verde) */
  --btn:#1c2a6b; --btn-ink:#ffffff; --btn-sweep:#2c4199; --btn-sweep-ink:#ffffff;

  /* Profundidad: único degradado del sistema, con grano fino */
  --cielo:linear-gradient(140deg,#0d1540 0%,#1c2a6b 50%,#3049a6 100%);
  --cielo-h:var(--cielo);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fondo-pieza:var(--grano),radial-gradient(60% 55% at var(--mx,82%) var(--my,8%),rgba(74,104,214,.38) 0%,rgba(74,104,214,0) 70%),var(--cielo);

  /* Sombra: solo para la pieza elevada de cada pantalla (foto, tarjeta flotante) */
  --sombra:0 1px 2px rgba(15,20,36,.08),0 18px 36px -18px rgba(28,42,107,.45),0 40px 80px -32px rgba(15,20,36,.45);
  --sombra-flotante:0 1px 2px rgba(15,20,36,.08),0 16px 32px -12px rgba(15,20,36,.28),0 32px 64px -28px rgba(28,42,107,.35);

  /* Tipografía */
  --f-sans:'Mona Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Espacio (base 4) y radios */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:44px;--s-8:52px;--s-9:72px;--s-10:96px;--s-11:128px;
  --r-tag:4px; --r:6px; --r-icon:14px;

  /* Movimiento */
  --ease-out:cubic-bezier(.16,1,.3,1);    /* la curva de la marca: arranque decidido, llegada suave */
  --ease-io:cubic-bezier(.65,0,.35,1);    /* solo para trazos que se dibujan */
  --t-micro:160ms; --t-short:280ms; --t-med:640ms; --t-long:1000ms; --t-cine:1400ms;
  --stagger:60ms;

  color-scheme:light;
}

/* ── 2. Tokens · modo oscuro (sigue al sistema y respeta la elección manual) ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1233; --surface:#111a45; --ink:#eef1fa; --ink-2:#c3c9de; --ink-3:#8f98b9;
    --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.26);
    --brand-ink:#9fb2f0; --jade-ink:#34d49e;
    --btn:#eef1fa; --btn-ink:#0d1540; --btn-sweep:#d6def7; --btn-sweep-ink:#0d1540;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1233; --surface:#111a45; --ink:#eef1fa; --ink-2:#c3c9de; --ink-3:#8f98b9;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.26);
  --brand-ink:#9fb2f0; --jade-ink:#34d49e;
  --btn:#eef1fa; --btn-ink:#0d1540; --btn-sweep:#d6def7; --btn-sweep-ink:#0d1540;
  color-scheme:dark;
}

/* ── 3. Base ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;transition:background-color var(--t-short),color var(--t-short)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px}
::selection{background:var(--jade);color:var(--abismo)}

/* ── 4. Tipografía: Mona Sans se estira; el contraste es de ancho, nunca de un trazo fino ── */
.t-display{font-weight:900;font-stretch:125%;font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.012em;text-wrap:balance;margin:0}
.destacado{font-stretch:75%;font-weight:600;letter-spacing:0}
.t-gigante{display:block;font-weight:900;font-stretch:125%;font-size:10.6cqw;line-height:.8;letter-spacing:-.02em;
  text-transform:uppercase;white-space:nowrap;color:var(--abismo)}
.t-seccion{font-weight:900;font-stretch:125%;font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin:0}
.t-elemento{font-weight:800;font-stretch:110%;font-size:22px;line-height:1.2;margin:0}
.t-cifra{font-weight:800;font-stretch:125%;font-size:44px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.t-entrada{font-size:19px;line-height:1.65;color:var(--ink-2);max-width:52ch;margin:0}
.t-cuerpo{font-size:16px;line-height:1.7;max-width:64ch;margin:0}
.t-apoyo{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
.t-etiqueta{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);margin:0}
.t-micro{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.marca-palabra{font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:.02em}

/* ── 5. Componentes ── */
/* Botones: radio 6px, nunca píldora. El hover es un barrido de color de izquierda a derecha. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font:600 14.5px/1 var(--f-sans);padding:15px 24px;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:color var(--t-short) var(--ease-out),border-color var(--t-short) var(--ease-out),transform 450ms var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep,transparent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-med) var(--ease-out)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn .flecha{display:inline-block;transition:transform var(--t-short) var(--ease-out)}
.btn:hover .flecha{transform:translateX(4px)}
.btn-primario{background:var(--btn);color:var(--btn-ink);--sweep:var(--btn-sweep)}
.btn-primario:hover{color:var(--btn-sweep-ink)}
.btn-secundario{border-color:var(--line-2);color:var(--ink);--sweep:var(--ink)}
.btn-secundario:hover{color:var(--bg);border-color:var(--ink)}
.btn-club{background:var(--jade);color:var(--abismo);--sweep:#5ee8ae}
.btn-chico{padding:11px 18px;font-size:13.5px}
/* Sobre el cielo */
.sobre-cielo .btn-primario{background:var(--blanco);color:var(--abismo);--sweep:var(--horizonte)}
.sobre-cielo .btn-primario:hover{color:var(--abismo)}
.sobre-cielo .btn-secundario{border-color:rgba(255,255,255,.45);color:var(--blanco);--sweep:var(--blanco)}
.sobre-cielo .btn-secundario:hover{color:var(--abismo);border-color:var(--blanco)}

/* Enlace: el subrayado se dibuja al entrar y se retira hacia la derecha al salir */
.enlace{color:var(--brand-ink);font-weight:600;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;padding-bottom:2px;
  transition:background-size var(--t-short) var(--ease-out)}
.enlace:hover{background-position:0 100%;background-size:100% 1px}

/* Etiqueta de estado vivo: única cosa que late */
.vivo{display:inline-flex;align-items:center;gap:var(--s-2);font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--jade-ink);background:var(--jade-soft);padding:7px 10px;border-radius:var(--r-tag)}
.vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jade)}
.sobre-cielo .vivo,.sobre-abismo .vivo{color:#3fe3a2;background:rgba(34,214,140,.14)}

/* Navegación con indicador que se desliza */
.nav{display:flex;align-items:center;gap:var(--s-6);padding:var(--s-4) var(--s-6)}
.nav-links{position:relative;display:flex;gap:var(--s-5);margin-left:auto;font-size:14px;font-weight:500}
.nav-links a{color:inherit;text-decoration:none;opacity:.78;transition:opacity var(--t-micro)}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-ind{position:absolute;bottom:-6px;left:var(--x,0);width:var(--w,0);height:1px;background:currentColor;
  transition:left 420ms var(--ease-out),width 420ms var(--ease-out),opacity var(--t-short);opacity:var(--o,0)}

/* Filas (reemplazan al mosaico de tarjetas): la línea superior se tiñe y el título avanza */
.fila{position:relative;display:grid;grid-template-columns:140px 1fr auto;gap:var(--s-5);align-items:baseline;padding:var(--s-5) 0;
  border-top:1px solid var(--line);color:inherit;text-decoration:none}
.fila::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease-out)}
.fila:hover::before{transform:scaleX(1)}
.fila .t-elemento{transition:transform var(--t-short) var(--ease-out)}
.fila:hover .t-elemento{transform:translateX(6px)}
.fila .flecha{opacity:0;transform:translateX(-8px);transition:opacity var(--t-short),transform var(--t-short) var(--ease-out);color:var(--brand-ink)}
.fila:hover .flecha{opacity:1;transform:none}

/* Datos: rejilla con líneas verticales, nunca tarjetas. Cada cifra con su línea de contexto. */
.datos{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.datos>div{padding:var(--s-5) var(--s-5) var(--s-5) 0}
.datos>div+div{padding-left:var(--s-5);border-left:1px solid var(--line)}

/* El cielo: banda a sangre, oscuro arriba y claro abajo. Sigue al cursor (--mx/--my desde movimiento.js) */
.cielo{position:relative;overflow:hidden;color:var(--on-sky);container-type:inline-size;
  background:radial-gradient(70% 55% at var(--mx,25%) var(--my,30%),rgba(0,51,204,.5) 0%,rgba(0,51,204,0) 70%),var(--cielo);
  background-size:100% 100%,100% 110%;background-position:0 0,0 0}

/* Cinta de temas */
.cinta{overflow:hidden;background:var(--abismo);color:var(--on-sky);padding:var(--s-5) 0}
.cinta-pista{display:flex;width:max-content;align-items:center;white-space:nowrap;font-weight:800;font-stretch:125%;font-size:36px;line-height:1;text-transform:uppercase}
.cinta-pista>*{margin-right:var(--s-6)}
.cinta-pista .sep{color:var(--jade);font-size:16px}
.cinta-pista .fina{font-stretch:75%;font-weight:600}

/* ── 6. Movimiento ──
   Todo lo que se mueve vive aquí abajo. Reglas:
   · html.mov la pone movimiento.js solo si la persona NO pidió reducir movimiento.
     Sin JS, o con movimiento reducido, todo queda quieto y visible.
   · Solo se animan transform, opacity, clip-path, el ancho de la letra y trazos SVG. */

/* Aparición al hacer scroll */
html.mov [data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
html.mov [data-rv].in{opacity:1;transform:none}

/* Titular palabra por palabra (máscara) + el destacado se ajusta de ancho a estrecho */
html.mov [data-titular] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em 0 .1em;margin:-.16em 0 -.1em}
html.mov [data-titular] .w>span{display:inline-block;transform:translateY(110%);
  transition:transform var(--t-long) var(--ease-out);transition-delay:calc(var(--i,0) * 45ms)}
html.mov [data-titular].in .w>span{transform:none}
html.mov [data-titular].in .destacado{animation:ajuste var(--t-cine) var(--ease-out) both;animation-delay:calc(var(--n,6) * 45ms + 250ms)}
@keyframes ajuste{from{font-stretch:125%;font-weight:900}to{font-stretch:75%;font-weight:600}}

/* Línea que se dibuja */
html.mov [data-linea]{transform:scaleX(0);transform-origin:left;transition:transform var(--t-long) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
html.mov [data-linea].in{transform:none}

/* Isotipo que se dibuja: los trazos llevan class="trazo" pathLength="1"; el punto, class="senal" */
html.mov [data-dibujo] .trazo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-cine) var(--ease-io)}
html.mov [data-dibujo] .trazo+.trazo{transition-delay:.35s}
html.mov [data-dibujo] .senal{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform 700ms var(--ease-out) 1.15s}
html.mov [data-dibujo].in .trazo{stroke-dashoffset:0}
html.mov [data-dibujo].in .senal{transform:scale(1)}

/* Imagen que se revela con máscara (de abajo hacia arriba) y se asienta.
   La máscara va en los hijos: si recortara al propio elemento, el navegador
   no detectaría que entró en pantalla y nunca se revelaría. */
html.mov [data-mascara]>*{clip-path:inset(100% 0 0 0);transform:scale(1.08);
  transition:clip-path 1200ms var(--ease-out),transform 1600ms var(--ease-out)}
html.mov [data-mascara].in>*{clip-path:inset(0 0 0 0);transform:none}

/* Palabra gigante: letras que suben; lente de ancho cerca del cursor; deslizamiento con el scroll */
.t-gigante{transform:translateX(var(--gx,0px))}
.t-gigante .l{display:inline-block;transition:font-stretch 450ms var(--ease-out)}
html.mov .t-gigante[data-rv]{opacity:1;transform:translateX(var(--gx,0px))}
html.mov .t-gigante .l{transform:translateY(60%);opacity:0;
  transition:transform var(--t-long) var(--ease-out),opacity 800ms var(--ease-out),font-stretch 450ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms),calc(var(--i,0) * 55ms),0s}
html.mov .t-gigante.in .l{transform:none;opacity:1}

/* Ambiente: máximo dos cosas en movimiento continuo por pantalla */
@media (prefers-reduced-motion:no-preference){
  .cielo{animation:horizonte 14s ease-in-out infinite alternate}
  .cinta-pista{animation:cinta 42s linear infinite}
  .cinta:hover .cinta-pista{animation-play-state:paused}
  .vivo::before{animation:latido 2.6s ease-in-out infinite}
  .pausa,.pausa *{animation-play-state:paused !important}
  /* Transición entre páginas (sitios de varias páginas; navegadores que la soportan) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-sale 220ms var(--ease-io) both}
  ::view-transition-new(root){animation:vt-entra 520ms var(--ease-out) both}
}
@keyframes horizonte{to{background-position:0 0,0 100%}}
@keyframes cinta{to{transform:translateX(-50%)}}
@keyframes latido{50%{opacity:.35}}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(12px)}}

/* Con movimiento reducido: nada se desplaza, nada late */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}

/* ── 7. Responsive ── */
@media (max-width:760px){
  .cielo{background-size:100% 100%,100% 140%}   /* el horizonte baja para que los botones queden sobre azul */
  .datos{grid-template-columns:1fr}
  .datos>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .fila{grid-template-columns:1fr;gap:var(--s-1)}
  .nav{padding:var(--s-4) 20px}
  .nav-links{display:none}
  .cinta-pista{font-size:28px}
}

/* ── 8. Ajuste Profundidad (oct 2026): uso de la letra, botones y piezas ──
   La letra ancha (125%) queda para el titular principal y los nombres (MODO FUTURO, El Club, LYTH).
   Los títulos de sección van en ancho normal. Las etiquetas usan la letra principal. */
.t-seccion{font-weight:800;font-stretch:100%;letter-spacing:-.025em;font-size:clamp(32px,3.6vw,50px);line-height:1.08}
.t-elemento{font-stretch:100%;letter-spacing:-.01em}
.t-etiqueta{font-family:var(--f-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brand-ink)}
.vivo{font:600 13.5px/1 var(--f-sans);letter-spacing:0;text-transform:none;padding:8px 12px}
.sobre-cielo .vivo,.sobre-abismo .vivo{color:var(--verde-claro);background:rgba(0,178,126,.16)}
/* El destacado del titular: estrecho, en azul noche y a la misma altura óptica */
.t-display .destacado{color:var(--brand);font-weight:700;font-size:1.1em;line-height:.9}
[data-theme="dark"] .t-display .destacado{color:#9fb2f0}
@keyframes ajuste{from{font-stretch:125%;font-weight:900}to{font-stretch:75%;font-weight:700}}
/* Botones: un solo verde por pantalla, con letra azul noche */
.btn{font-size:15.5px;padding:17px 26px}
.btn-chico{font-size:14px;padding:12px 18px}
.btn-club{background:var(--jade);color:#1c2a6b;--sweep:var(--verde-claro)}
.btn-club:hover{color:#1c2a6b}
.sobre-cielo .btn-secundario:hover,.sobre-abismo .btn-secundario:hover{color:#1c2a6b}
::selection{background:var(--jade);color:#1c2a6b}
:focus-visible{outline-color:var(--jade)}
/* Profundidad: el degradado vive en piezas contenidas (tarjetas), nunca en bandas a sangre */
.cielo{background:var(--fondo-pieza);background-size:180px 180px,100% 100%,100% 118%;background-position:0 0,0 0,0 0;
  color:var(--on-sky);border:0;border-radius:var(--r)}
@media (prefers-reduced-motion:no-preference){ .cielo{animation:profundidad 18s ease-in-out infinite alternate} }
@keyframes profundidad{to{background-position:0 0,0 0,0 100%}}
.elevada{box-shadow:var(--sombra)}
/* En los títulos de sección no hay letra estrecha: el destacado solo vive en el titular principal */
.t-seccion .destacado{font-stretch:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;color:inherit;animation:none!important}