/* Una sola pantalla: escena al fondo; logo y controles arriba; frase + puerta al centro; pie abajo. Noche por defecto.
   Identidad del home actual: Geist / Inter / JetBrains Mono, cian #22D3EE, "AI" coral #F97316. */
:root{
  --bg:#0A0F14; --texto:#FFFFFF; --suave:rgba(255,255,255,.62); --linea:rgba(255,255,255,.12);
  --accion:#22D3EE; --coral:#F97316;
  --puerta:rgba(255,255,255,.09); --puerta-borde:rgba(255,255,255,.28);
  --pastilla:rgba(10,15,20,.55); --pastilla-borde:rgba(255,255,255,.18);
  --on-bg:#22D3EE; --on-tx:#06323b; --off-tx:rgba(255,255,255,.6);
  --velo:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(6,12,20,.55), transparent 76%);
  --sombra:0 2px 22px rgba(0,0,0,.6);
  --display:'Geist',-apple-system,'Segoe UI',sans-serif; --cuerpo:'Inter',-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',Consolas,Menlo,'Courier New',Courier;
  color-scheme:dark;
}
body.dia{
  --bg:#FFFFFF; --texto:#1A1F26; --suave:#5A6470; --linea:#E2E8EE; --accion:#0E7490;
  --puerta:rgba(255,255,255,.55); --puerta-borde:rgba(26,31,38,.28);
  --pastilla:rgba(255,255,255,.9); --pastilla-borde:#E2E8EE;
  --on-bg:#1A1F26; --on-tx:#FFFFFF; --off-tx:#5A6470;
  /* Además del velo central, una bruma clara abajo: el pie queda siempre sobre fondo claro (contraste AA). */
  --velo:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255,255,255,.55), transparent 76%),
    linear-gradient(to top, rgba(255,255,255,.75) 0, rgba(255,255,255,.75) 100px, rgba(255,255,255,0) 170px);
  --sombra:none;
  color-scheme:light;
}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--cuerpo);overflow:hidden;position:relative;transition:background-color .6s ease}
.escena{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.velo{position:fixed;inset:0;pointer-events:none;background:var(--velo)}
.barra{position:fixed;top:0;left:0;right:0;height:5px;background:#22D3EE;z-index:5}
.arriba{position:fixed;top:5px;left:0;right:0;z-index:5;display:flex;justify-content:flex-start;align-items:center;
  padding-block:16px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.3px;color:var(--texto);text-decoration:none}
.logo .ai{color:var(--coral)}
.idioma{margin-left:auto;display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--off-tx)}
.idioma button{background:none;border:none;cursor:pointer;padding:6px 4px;font:inherit;letter-spacing:2px;color:var(--off-tx)}
.idioma button[aria-pressed="true"]{color:var(--texto);font-weight:600}
.idioma .sep{opacity:.3}
.modo{position:fixed;top:58px;right:max(28px,env(safe-area-inset-right,0px));z-index:5;display:inline-flex;padding:3px;border-radius:999px;background:var(--pastilla);border:1px solid var(--pastilla-borde);backdrop-filter:blur(8px)}
.modo button{border:none;cursor:pointer;padding:6px 13px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.5px;background:transparent;color:var(--off-tx)}
.modo button[aria-pressed="true"]{background:var(--on-bg);color:var(--on-tx)}
.centro{position:relative;z-index:2;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(150px,26vh,260px);padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
h1{margin:0;max-width:760px;text-wrap:balance;font-family:var(--display);font-weight:600;font-size:clamp(36px,4.4vw,60px);line-height:1.1;letter-spacing:-.02em;color:var(--texto);text-shadow:var(--sombra)}
.puerta{margin-top:36px;display:block;width:min(372px,100%);box-sizing:border-box;padding:24px 26px;border-radius:14px;text-align:left;text-decoration:none;
  background:var(--puerta);border:1px solid var(--puerta-borde);color:var(--texto);backdrop-filter:blur(6px);transition:transform .25s ease}
.puerta:hover{transform:translateY(-4px)}
.puerta .t{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em}
.puerta .arr{margin-left:auto;color:var(--accion);font-family:var(--cuerpo);font-weight:300;font-size:22px;transition:transform .25s ease}
.puerta:hover .arr{transform:translateX(5px)}
.puerta .d{display:block;margin-top:6px;font-size:14px;color:var(--suave)}
.pie{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;width:min(640px,calc(100% - 44px));
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center;padding-top:14px;border-top:1px solid var(--linea);font-size:12px;color:var(--suave);text-shadow:0 1px 8px rgba(0,0,0,.6)}
body.dia .pie{text-shadow:none}
.pie a{color:var(--suave);text-decoration:none}
.pie a:hover{color:var(--texto)}
.pie .q{color:#22D3EE}
/* De día, cian oscuro: 6,8:1 sobre blanco y 6,3:1 sobre #F5F6F8 (WCAG AA pide 4,5:1). */
body.dia .pie .q{color:#155E75}
.pie .sep{opacity:.4}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.entra{animation:entra 1.1s ease both}
.entra2{animation:entra 1.1s ease 1s both}
a:focus-visible,button:focus-visible{outline:2px solid #22D3EE;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.entra,.entra2{animation:none}.puerta,.puerta .arr{transition:none}}
@media (max-width:520px){.modo{top:56px}.logo{font-size:16px}}
@media (max-height:560px){.centro{padding-top:110px}.puerta{margin-top:22px}}