/* web.css — la identidad comun de las paginas publicas (/app/, /pro/,
   /p/, /a/). El panel NO la usa: el panel es una herramienta y esto es
   el escaparate; que compartan tokens pero no destino.

   LA IDEA: editorial atletica. Una banda de tinta azul noche (--noche)
   que es LA MISMA en claro y en oscuro — es superficie de marca, no de
   tema — con Archivo en pesos altos y numeros tabulares. El oro (--oro)
   existe solo para las marcas del pasaporte: es la medalla, y una
   medalla en cada esquina dejaria de serlo. */

:root{
  --bg:#F4F5F8; --sup:#FFFFFF; --sup2:#EDEFF4; --linea:#DFE2E9;
  --txt:#14161C; --txt2:#4C5361; --txt3:#7C8494;
  --acc:#334FB4; --ok:#136B45; --mal:#A81F26; --mal-suave:#FBE9EA;
  --sombra:0 1px 2px rgba(16,18,26,.05), 0 14px 34px -22px rgba(16,18,26,.3);
  /* Superficie de marca: constante entre temas. Texto encima: --sobre-noche. */
  --noche:#0F1424; --noche-2:#171E33; --noche-linea:#252D47;
  --sobre-noche:#F2F4FA; --sobre-noche-2:#9AA5C4;
  --acc-noche:#8EA0F0;           /* el azul que se lee SOBRE la noche */
  --oro:#E0B354;                  /* solo para marcas y sellos de records */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0C0E13; --sup:#161922; --sup2:#1E222C; --linea:#272C37;
    --txt:#ECEEF3; --txt2:#A6ADBC; --txt3:#737B8B;
    --acc:#8093E8; --ok:#4FBF8B; --mal:#F0736F; --mal-suave:#2B1618;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 16px 38px -24px rgba(0,0,0,.85);
    /* En oscuro la noche sube un punto para despegarse del fondo. */
    --noche:#131A2E; --noche-2:#1B2340; --noche-linea:#2A3352;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--txt); min-height:100vh;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",sans-serif; margin:0}

/* La medida comun de todas las paginas publicas. */
.env{max-width:1020px; margin:0 auto; padding:0 20px}

/* ── El eyebrow: la voz pequeña de la casa ── */
.voz{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt3);
}

/* ── Cabecera comun ───────────────────────────────────────────────────
   Logo en placa (la marca es blanca: necesita su noche debajo), wordmark
   en Archivo y los enlaces a la derecha. En movil, los enlaces caben
   porque son tres palabras. */
.cab-web{border-bottom:1px solid var(--linea); background:var(--bg)}
.cab-web .dentro{
  max-width:1020px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:14px; position:relative; min-height:64px;
}
.marca-web{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--txt); flex:none}
.marca-web .placa{
  width:38px; height:38px; border-radius:11px; background:var(--noche);
  display:grid; place-items:center; flex:none;
  box-shadow:inset 0 0 0 1px var(--noche-linea);
}
.marca-web .placa img{width:24px; height:24px; display:block}
/* El lockup: la marca arriba y su oficio debajo, en la voz pequeña. */
.marca-web .lockup{display:flex; flex-direction:column; line-height:1.15}
.marca-web b{
  font-family:Archivo,sans-serif; font-weight:800; font-size:14.5px;
  letter-spacing:.03em; white-space:nowrap;
}
.marca-web small{
  font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--txt3); white-space:nowrap;
}

/* La capsula central: las secciones dentro de una pastilla, y la activa
   levantada sobre ella. Centrada de verdad, no donde caiga. */
.cab-centro{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:3px; padding:4px; border-radius:999px;
  background:var(--sup2); border:1px solid var(--linea);
}
.cab-centro a{
  color:var(--txt2); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:7px 15px; border-radius:999px; white-space:nowrap;
}
.cab-centro a:hover{color:var(--txt)}
.cab-centro a.aqui{color:var(--txt); background:var(--sup); box-shadow:var(--sombra)}

/* Las acciones: lo gratuito en fantasma, la herramienta en solido. */
.cab-acc{margin-left:auto; display:flex; align-items:center; gap:6px}
.cab-fantasma{
  color:var(--txt2); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:9px 12px; border-radius:999px;
}
.cab-fantasma:hover{color:var(--txt); background:var(--sup2)}
.cab-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:#334FB4; color:#fff; text-decoration:none;
  font-family:Archivo,sans-serif; font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:999px;
}
.cab-btn svg{flex:none}
@media (prefers-reduced-motion: no-preference){
  .cab-btn{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
  .cab-btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(51,79,180,.6); background:#2A419A}
  .cab-btn svg{transition:transform .18s ease}
  .cab-btn:hover svg{transform:translateX(2px)}
}
@media (max-width:760px){
  .cab-centro{position:static; transform:none; margin-left:auto}
  .cab-acc{margin-left:0}
  .cab-fantasma{display:none}
  .marca-web .lockup{display:none}   /* queda la placa: la marca sigue ahi */
}
@media (max-width:460px){
  .cab-web .dentro{padding:10px 14px; gap:8px}
  .cab-centro a{padding:7px 11px; font-size:13px}
  .cab-btn{padding:8px 13px}
}

/* ── La banda de noche: el escenario de cada portada ── */
.banda{
  background:var(--noche); color:var(--sobre-noche);
  border-bottom:1px solid var(--noche-linea);
}
.banda .voz{color:var(--sobre-noche-2)}

/* ── Botones comunes ── */
.btn{
  display:inline-block; padding:13px 24px; border-radius:999px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:15.5px;
  letter-spacing:-.01em; text-decoration:none; border:1px solid transparent;
  cursor:pointer; text-align:center;
}
/* Azul de marca FIJO: sobre la noche o sobre blanco funciona igual,
   y en oscuro var(--acc) es un azul claro que pide texto oscuro. */
.btn-pri{background:#334FB4; color:#fff}
.btn-pri:hover{background:#2A419A}
.btn-claro{background:var(--sobre-noche); color:var(--noche)}
.btn-borde{background:transparent; color:inherit; border-color:var(--linea)}
.banda .btn-borde{border-color:var(--noche-linea); color:var(--sobre-noche)}
.btn:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* ── Numeros grandes: siempre tabulares ── */
.cifra{
  font-family:Archivo,sans-serif; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ── Pie comun ────────────────────────────────────────────────────────
   Tres columnas con TITULO cada una: dos listas anonimas eran un cajon
   de enlaces, y con su rotulo pasan a ser secciones. La marca lleva su
   lockup, su frase y la accion que importa; abajo, una linea aparte con
   lo legal y el aviso sanitario, que no compite con la navegacion.

   El filo de arriba es un degradado, no una raya: cerrar la pagina con
   una linea dura es el mismo corte que quitamos entre las bandas. */
.pie-web{margin-top:88px; position:relative}
.pie-web::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--linea) 18%, var(--linea) 82%, transparent)}
.pie-web .dentro{
  max-width:1020px; margin:0 auto; padding:46px 20px 34px;
  display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3, minmax(0,1fr));
  gap:34px 40px; align-items:start;
}
.pie-web .quienes{max-width:330px}
.pie-web .quienes .marca-web{margin-bottom:14px}
.pie-web .quienes p{margin:0; font-size:13.5px; color:var(--txt2); line-height:1.7}
.pie-web .quienes .btn{margin-top:18px; padding:11px 20px; font-size:14px}

.pie-col h3{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--txt3);
  margin:0 0 14px;
}
.pie-web ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pie-web ul a{
  color:var(--txt2); text-decoration:none; font-size:13.5px;
  display:inline-block;
}
.pie-web ul a:hover{color:var(--txt)}
@media (prefers-reduced-motion: no-preference){
  .pie-web ul a{transition:color .18s ease, transform .18s ease}
  .pie-web ul a:hover{transform:translateX(3px)}
}

/* La linea de abajo: lo legal y el aviso, separados de los enlaces. */
.pie-fin{border-top:1px solid var(--linea)}
.pie-fin .dentro-fin{
  max-width:1020px; margin:0 auto; padding:20px 20px 40px;
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline;
  font-size:12.5px; color:var(--txt3);
}
.pie-fin .legal{display:flex; flex-wrap:wrap; gap:6px 18px; margin-left:auto}
.pie-fin a{color:var(--txt3); text-decoration:none}
.pie-fin a:hover{color:var(--txt2)}
.pie-fin .medico{flex-basis:100%; margin:0; line-height:1.7; color:var(--txt3); opacity:.85}

@media (max-width:860px){
  .pie-web .dentro{grid-template-columns:1fr 1fr; gap:30px}
  .pie-web .quienes{grid-column:1 / -1; max-width:none}
}
@media (max-width:520px){
  .pie-web .dentro{grid-template-columns:1fr; gap:26px; padding-top:38px}
  .pie-fin .legal{margin-left:0}
}

/* ── La vida (pareja de web.js) ─────────────────────────────────────── */

/* La cabecera acompaña: pegada arriba, con el fondo velado. */
.cab-web{position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}

/* La aurora vive DETRAS del contenido de su banda. */
[data-aurora]{position:relative; overflow:hidden}
[data-aurora] > *{position:relative; z-index:1}
/* El desenfoque, BARATO. Estaba en 52px sobre un lienzo del tamaño de
   la banda, y ademas la cabecera pegada lleva backdrop-filter encima:
   entre las dos obligaban a recomponer media pantalla en cada cuadro y
   en maquinas modestas se notaba. Las nubes ya son degradados radiales
   —suaves por definicion—, asi que el desenfoque solo tiene que limar
   las bandas de color: 24px hace el mismo efecto por una fraccion. */
canvas.aurora{position:absolute; inset:0; z-index:0; width:100%; height:100%;
  filter:blur(24px) saturate(1.15); opacity:.85; pointer-events:none}

/* Revelados: quieto y abajo hasta que asoma. Sin web.js no pasa nada:
   el estado inicial solo se aplica si el navegador puede animar. */
@media (prefers-reduced-motion: no-preference){
  [data-rev]{opacity:0; transform:translateY(18px);
    transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1)}
  [data-rev].rev-in{opacity:1; transform:none}
  @supports not (aspect-ratio: 1){ [data-rev]{opacity:1; transform:none} }
}

/* El ticker de decisiones: voz de la app, cursor de oro latiendo. */
.tecleo{
  font-family:"IBM Plex Mono",monospace; font-size:14px; line-height:1.5;
  color:var(--sobre-noche-2); min-height:22px;
}
.tecleo::after{content:""; display:inline-block; width:8px; height:15px;
  margin-left:3px; vertical-align:-2px; background:var(--oro);
  animation:latir 1.05s steps(2) infinite}
@keyframes latir{to{opacity:0}}
@media (prefers-reduced-motion:reduce){ .tecleo::after{animation:none} }

/* ── El volumen alto (segunda tanda de vida) ────────────────────────── */

/* El fondo deja de ser plano: dos lavados de color muy tenues, uno
   arriba a la derecha y otro a media altura a la izquierda. */
:root{--tinte1:#E3E8F8; --tinte2:#ECEFF9}
@media (prefers-color-scheme: dark){
  :root{--tinte1:#121A33; --tinte2:#10172B}
}
body{background:
  radial-gradient(1100px 540px at 88% -100px, var(--tinte1), transparent 62%),
  radial-gradient(950px 560px at -160px 42%, var(--tinte2), transparent 58%),
  var(--bg)}

/* LA BANDA SE FUNDE, NO CORTA. Fuera el borde: los ultimos 170px se
   deshacen en el fondo de la pagina. El velo pinta ENCIMA de la aurora
   (orden de pintado) y DEBAJO del contenido (que lleva z-index:1). */
.banda{border-bottom:0}
.banda::after{content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:170px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg))}

/* La marquesina: una cinta de palabras de la casa que no para.
   SIN mask-image: la mascara obligaba a componer la capa ENTERA del
   texto (miles de px) fuera de pantalla y colgaba el compositor. Los
   desvanecidos laterales son dos overlays de gradiente — mismo aspecto,
   coste minimo — y contain acota el repintado a la propia cinta. */
.cinta{overflow:hidden; white-space:nowrap; padding:16px 0;
  position:relative; contain:layout paint}
.cinta::before,.cinta::after{content:""; position:absolute; top:0; bottom:0;
  width:14%; z-index:1; pointer-events:none}
.cinta::before{left:0; background:linear-gradient(90deg, var(--bg), color-mix(in srgb, var(--bg) 0%, transparent))}
.cinta::after{right:0; background:linear-gradient(270deg, var(--bg), color-mix(in srgb, var(--bg) 0%, transparent))}
.cinta > span{display:inline-block;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--txt3);
  animation:cinta 30s linear infinite}
@keyframes cinta{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .cinta > span{animation:none} }

/* El titular respira: un barrido de luz cada pocos segundos. */
@media (prefers-reduced-motion: no-preference){
  .brillo-txt{
    background:linear-gradient(105deg, var(--sobre-noche) 42%, #B9C8FF 50%, var(--sobre-noche) 58%);
    background-size:240% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:brillar 7s ease-in-out infinite;
  }
  @keyframes brillar{0%,64%{background-position:130% 0} 92%,100%{background-position:-50% 0}}
}

/* El foco: una luz que sigue al puntero dentro de la pieza (las
   coordenadas --fx/--fy las escribe web.js). */
@media (hover:hover){
  .foco{position:relative}
  .foco::before{content:""; position:absolute; inset:0; border-radius:inherit;
    z-index:0; opacity:0; transition:opacity .35s; pointer-events:none;
    background:radial-gradient(340px circle at var(--fx,50%) var(--fy,50%),
      color-mix(in srgb, var(--acc) 13%, transparent), transparent 68%)}
  .foco:hover::before{opacity:1}
  .foco > *{position:relative; z-index:1}
}

/* Revelados con direccion: desde un lado, no solo desde abajo. */
@media (prefers-reduced-motion: no-preference){
  [data-rev="izq"]{transform:translateX(-28px)}
  [data-rev="der"]{transform:translateX(28px)}
}

/* Los botones responden. */
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn-pri:hover{box-shadow:0 12px 26px -10px rgba(51,79,180,.6)}
  .btn-claro:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
}

/* ── La tanda espectacular ──────────────────────────────────────────── */

/* Grano sobre la noche: la textura mata el degradado plano. */
.banda{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-size:160px 160px}

/* La cabecera coge sombra cuando la pagina baja. */
.cab-web{transition:box-shadow .25s ease}
.cab-web.baja{box-shadow:0 10px 32px -18px rgba(10,14,26,.35)}

/* Palabra a palabra: cada una sube con su retraso. */
@media (prefers-reduced-motion: no-preference){
  [data-palabras] .palabra{display:inline-block; opacity:0;
    transform:translateY(.55em) rotate(1.2deg);
    transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1)}
  [data-palabras].pal-in .palabra{opacity:1; transform:none}
}

/* La marquesina grande: Archivo perfilada, sin relleno. */
.cinta-g > span{
  font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,4.4vw,44px); letter-spacing:.02em; line-height:1.1;
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--txt3) 50%, transparent);
  animation-duration:38s;
}
.cinta-g{padding:24px 0 8px}

/* El grupo que flota: cada hijo lleva su deriva (--flx/--fly de web.js)
   ademas de su alzado. */
[data-flota] > figure{
  transform:translate(var(--flx,0px), calc(var(--fly,0px) + var(--alzado,0px)));
  transition:transform .3s ease-out;
}

/* ── El interruptor de idioma ────────────────────────────────────────
   Dos letras, no una bandera: una bandera dice país y aquí se elige
   idioma, que no es lo mismo (ni el inglés es de un país, ni todo el que
   lee español está en España). */
.idiomas{display:flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--sup2); border:1px solid var(--linea); flex:none}
.idiomas .idi{
  border:0; background:none; cursor:pointer; padding:5px 9px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  color:var(--txt3);
}
.idiomas .idi:hover{color:var(--txt)}
.idiomas .idi.aqui{background:var(--sup); color:var(--txt); font-weight:600;
  box-shadow:var(--sombra)}
.idiomas .idi:focus-visible{outline:2px solid var(--acc); outline-offset:1px}
@media (max-width:760px){ .idiomas{display:none} }