/* =====================================================================
   HABLEMOS · Tokens de diseño (base del sistema)
   Tokens tipo Tailwind en variables CSS (colores, radios, sombras).
   Los temas solo cambian las variables de marca, así que todas las
   pantallas se adaptan solas. En Flutter se traducen a un ThemeData.
   ===================================================================== */
:root,[data-theme="oceano"]{--p:#1E6BFF;--p2:#0B4FD9;--acc:#7CC4FF;--tint:#DDEFFF;--bg-a:#CFE6FF;--bg-b:#F2F8FF}
[data-theme="cielo"]{--p:#2A9DF4;--p2:#1679C9;--acc:#9AD8FF;--tint:#E0F3FF;--bg-a:#D2EDFF;--bg-b:#F5FBFF}
[data-theme="marino"]{--p:#1C3F95;--p2:#0B2A5B;--acc:#5C9BFF;--tint:#E3EBFA;--bg-a:#D6E2F7;--bg-b:#F4F7FD}
[data-theme="celeste"]{--p:#4A90E2;--p2:#2F6FC0;--acc:#B5DCFF;--tint:#E6F3FF;--bg-a:#DCEFFF;--bg-b:#F7FBFF}
[data-theme="indigo"]{--p:#3F5BD9;--p2:#2A3FB0;--acc:#A3B4FF;--tint:#E6EAFF;--bg-a:#DAE1FF;--bg-b:#F6F7FF}
[data-theme="aguamarina"]{--p:#1597B8;--p2:#0E7591;--acc:#8EDCEB;--tint:#DDF4F8;--bg-a:#CDEEF5;--bg-b:#F3FBFD}
[data-size="grande"] body{zoom:1.12}
:root{
  --navy:#0B2A5B;--navy-2:#23457E;--text:#0B2A5B;--muted:#5B6F93;
  --white:#FFFFFF;--line:rgba(11,42,91,.10);--mint:#18B98A;--amber:#F2A93B;--rose:#EF5B7A;--gold:#FFB800;
  --r-sm:12px;--r-md:18px;--r-lg:26px;--r-full:999px;
  --sh-1:0 2px 10px rgba(11,42,91,.06),0 1px 2px rgba(11,42,91,.05);
  --sh-2:0 14px 32px -12px color-mix(in srgb,var(--p) 60%,transparent);
  --ease:cubic-bezier(.22,1,.36,1);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 560px at 0% -10%,var(--bg-a) 0%,transparent 60%),
             radial-gradient(800px 480px at 110% 8%,var(--tint) 0%,transparent 55%),var(--bg-b);
  background-attachment:fixed;transition:background .4s}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Layout ---------- */
#app{max-width:480px;margin:0 auto;min-height:100dvh;padding:calc(var(--safe-t) + 14px) 18px calc(var(--safe-b) + 100px)}
.screen{display:none}
.screen.active{display:block;animation:in .45s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.center{text-align:center}
.mt{margin-top:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Tipografía ---------- */
.brand{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--navy)}
.brand b{color:var(--p)}
h1{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
h2{font-size:21px;font-weight:800;letter-spacing:-.02em}
h3{font-size:15px;font-weight:700}
.muted{color:var(--muted);font-size:14px;line-height:1.5}
.small{font-size:12.5px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--p)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}