/* AERUS · landing en RITMO × Darkstar (22-OCT-2026). Misma ley que la app: cada color tiene una función.
   Papel = el espacio · tinta = la persona · cielo = un dato · señal (ámbar) = lo que está por pasar ·
   suelo (verde) = lo confirmado · el acento del gimnasio rellena sólo el botón de la acción. Borde y guía, en tinta.
   Dos mundos, día y noche: cambia la luz, no las funciones. Sigue al teléfono; el botón Día/Noche fija uno. */
/* letras: TeX Gyre Heros (GUST Font License, ver /fuentes/GUST-FONT-LICENSE.txt), 22-OCT; antes Nimbus (AGPL) */
@font-face{font-family:Ritmo;src:url(/fuentes/ritmo-display.otf) format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:Atleta;src:url(/fuentes/atleta.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Atleta;src:url(/fuentes/atleta-bold.otf) format('opentype');font-weight:700;font-display:swap}

/* ── mundo de día ── */
:root{
  --paper:#f4f3ed;
  --surface:#fffefa;
  --ink:#172a27;
  --muted:#3f4a46;
  --line:#c9cec5;
  --field-line:#76807a;
  --cielo:#1a5fd0;
  --cielo-fondo:#e8f1ff;
  --tenant:#ddfa64;
  --sello-fondo:#172a27;
  --sello-raya:#f4f3ed;
  --on-tenant:#172a27;
  /* la banda oscura es oscura en los dos mundos: sus tiras usan los valores de noche */
  --banda:#172a27;
  --sobre-banda:#f4f3ed;
  --sobre-banda-2:#c3cbc4;
  --banda-linea:#3d524d;
  --tira-verdad:#a4e2b8;
  --tira-futuro:#ffb000;
  --tira-realidad:#5aa9ff;
  --sobre-tira:#172a27;
  --sombra:0 1px 0 #c9cec5,0 24px 48px -28px rgba(23,42,39,.45);
  --r:6px;
  --display:Ritmo,'Arial Narrow','Roboto Condensed',sans-serif;
  --font:Atleta,'Helvetica Neue',Arial,sans-serif;
  --ancho:1180px;
  --gutter:16px;
  color-scheme:light;
}
/* ── mundo de noche: sólo cambian los valores ── */
@media (prefers-color-scheme:dark){
  :root:not([data-mundo="dia"]){
    --sello-borde:#51675f;
    --paper:#101e1c;--surface:#172a27;--ink:#f4f3ed;--muted:#cad3cc;--line:#51675f;--field-line:#8da398;
    --cielo:#5aa9ff;--cielo-fondo:#0e1f3a;--banda:#0a1412;--banda-linea:#2c3f3a;
    --sombra:0 1px 0 #51675f,0 24px 48px -26px rgba(0,0,0,.8);color-scheme:dark;
  }
}
:root[data-mundo="noche"]{
  --sello-borde:#51675f;
  --paper:#101e1c;--surface:#172a27;--ink:#f4f3ed;--muted:#cad3cc;--line:#51675f;--field-line:#8da398;
  --cielo:#5aa9ff;--cielo-fondo:#0e1f3a;--banda:#0a1412;--banda-linea:#2c3f3a;
  --sombra:0 1px 0 #51675f,0 24px 48px -26px rgba(0,0,0,.8);color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;text-wrap:balance}
h3{font-weight:700;line-height:1.25;text-wrap:balance}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.seccion-tinta :focus-visible{outline-color:var(--sobre-banda)}

.saltar{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r);z-index:20}
.saltar:focus{left:8px}

.marco{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.rotulo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* marca «//» */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 26px/1 var(--display);letter-spacing:.01em}
/* el sello: cuadrado en tinta con una raya del color del gimnasio y una de papel; fijo en los dos mundos */
.marca-sello{width:34px;height:34px;flex:none}
.marca-pie .marca-sello{width:28px;height:28px}
.sello-fondo{fill:var(--sello-fondo);stroke:var(--sello-borde,transparent);stroke-width:2}
.sello-raya-color{fill:var(--tenant)}
.sello-raya{fill:var(--sello-raya)}

/* botones: el acento es SÓLO el relleno de la acción; el borde siempre en tinta */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:var(--r);border:1.5px solid var(--ink);font:700 16px/1.2 var(--font);text-decoration:none;text-align:center;transition:transform 160ms cubic-bezier(.2,.8,.2,1),background 160ms}
.boton:hover{transform:translateY(-1px)}
.boton-acento{background:var(--tenant);color:var(--on-tenant)}
.boton-tinta{background:var(--ink);color:var(--paper)}
.boton-linea{background:transparent;color:var(--ink)}
.boton-linea:hover{background:var(--surface)}
.boton-chico{min-height:44px;padding:8px 14px;font-size:14px}
.boton-grande{min-height:56px;padding:16px 28px;font-size:18px}

/* cabecera */
.cabecera{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.cabecera-acciones{display:flex;align-items:center;gap:8px}
.mundo{min-height:44px;min-width:64px;padding:8px 12px;border:1px solid var(--field-line);border-radius:var(--r);background:transparent;color:var(--ink);font:700 14px/1 var(--font);cursor:pointer}
.mundo:hover{border-color:var(--ink)}
.nav{display:none}
.nav a{text-decoration:none;font-size:15px;font-weight:700;padding:8px 2px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}

/* portada */
.portada{padding:40px 0 56px;border-bottom:1px solid var(--line)}
.portada-grilla{display:grid;gap:40px}
.portada h1{margin-top:14px;font-size:clamp(46px,13vw,104px)}
.bajada{margin-top:22px;max-width:34em;font-size:19px;color:var(--muted)}
.guia{display:block;width:120px;height:3px;background:var(--ink);margin-top:28px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.acciones .boton{flex:1 1 220px}
.portada-nota{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px;font-size:14px;color:var(--muted)}
/* cielo = un dato */
.dato{display:inline-block;padding:4px 10px;border-left:3px solid var(--cielo);background:var(--cielo-fondo);color:var(--cielo);font:700 15px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;border-radius:0 var(--r) var(--r) 0}

/* teléfonos con capturas reales */
.telefono{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:6px;box-shadow:var(--sombra);overflow:hidden}
.telefono img{width:100%;height:auto;aspect-ratio:390/780;object-fit:cover;object-position:top;border-radius:16px;background:var(--surface)}
.portada-telefonos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;margin:0 auto;width:100%}
.portada-telefonos .telefono-atras{margin-top:48px}

/* secciones */
.seccion{padding:64px 0}
.seccion h2{margin-top:12px;font-size:clamp(40px,10vw,76px)}

/* selector de tipo de gimnasio: el elegido, en tinta llena */
.selector{display:grid;gap:10px;margin-top:28px}
.selector button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:16px 18px;min-height:64px;border:1.5px solid var(--field-line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color 160ms,background 160ms}
.selector button strong{font:700 24px/1 var(--display);text-transform:uppercase}
.selector button span{font-size:14px;color:var(--muted)}
.selector button:hover{border-color:var(--ink)}
.selector button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.selector button[aria-selected="true"] span{color:var(--paper)}

.panel{margin-top:32px}
.panel[hidden]{display:none}
.panel-grilla{display:grid;gap:36px}
.panel h3{font:700 clamp(28px,6.5vw,40px)/1 var(--display);text-transform:uppercase}
.lado{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.lado-titulo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.lado ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:12px}
.lado li{position:relative;padding-left:22px}
.lado li::before{content:'';position:absolute;left:0;top:.6em;width:12px;height:3px;background:var(--ink)}
.panel-telefonos{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;width:100%;margin:0 auto}
.panel-telefonos .telefono-bajo{margin-top:40px}

/* lo de todos: banda oscura en los dos mundos */
.seccion-tinta{background:var(--banda);color:var(--sobre-banda)}
.seccion-tinta .rotulo{color:var(--sobre-banda-2)}
.seccion-tinta h2{color:var(--sobre-banda)}
.bloques{display:grid;gap:1px;margin-top:32px;background:var(--banda-linea);border:1px solid var(--banda-linea);border-radius:var(--r);overflow:hidden}
.bloque{background:var(--banda);padding:22px 20px}
.bloque h3{font-size:19px;color:var(--sobre-banda)}
.bloque p{margin-top:8px;color:var(--sobre-banda-2);font-size:16px}
/* tiras con función: verde = confirmado, ámbar = por pasar (esquina cortada), cielo = dato */
.tira{display:inline-block;margin-bottom:12px;padding:4px 10px;color:var(--sobre-tira);font:700 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase}
.tira-verdad{background:var(--tira-verdad)}
.tira-futuro{background:var(--tira-futuro);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);padding-right:14px}
.tira-realidad{background:var(--tira-realidad)}
.tira-capturas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;margin-top:40px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.tira-capturas .telefono{scroll-snap-align:start;border-color:var(--banda-linea);box-shadow:none}

/* pasos: el orden es real; el número, en tinta */
.pasos{list-style:none;padding:0;margin-top:32px;display:grid;gap:14px;counter-reset:paso}
.pasos li{counter-increment:paso;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.pasos li::before{content:counter(paso);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 22px/1 var(--display);margin-bottom:14px}
.pasos h3{font-size:20px}
.pasos p{margin-top:6px;color:var(--muted)}

/* cierre: la tarjeta de la acción, borde y guía en tinta, el botón con el acento */
.hablemos{display:grid;gap:28px;padding:32px 22px;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:var(--r);background:var(--surface)}
.hablemos h2{margin-top:0}
.hablemos p{margin-top:14px;font-size:19px;max-width:30em;color:var(--muted)}
.hablemos-acciones{display:grid;gap:16px;align-content:center}
.hablemos-socio{font-size:15px;font-weight:700;text-underline-offset:3px}

.pie{padding:28px 0;border-top:1px solid var(--line)}
.pie-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.marca-pie{font-size:22px}
.pie p{font-size:14px;color:var(--muted)}

@media (min-width:720px){
  :root{--gutter:28px}
  .selector{grid-template-columns:repeat(3,1fr)}
  .bloques{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .tira-capturas{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}
  .hablemos{padding:48px 44px}
}

@media (min-width:980px){
  .nav{display:flex;gap:26px;align-items:center}
  .nav-socio{color:var(--muted)}
  .portada{padding:72px 0 88px}
  .portada-grilla{grid-template-columns:1.15fr .85fr;align-items:center;gap:56px}
  .portada-telefonos{max-width:none}
  .seccion{padding:96px 0}
  .panel-grilla{grid-template-columns:1.1fr .9fr;align-items:start;gap:56px}
  .panel-telefonos{max-width:none}
  .bloques{grid-template-columns:repeat(3,1fr)}
  .hablemos{grid-template-columns:1.2fr .8fr;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .boton,.selector button{transition:none}
  .boton:hover{transform:none}
}