/* =====================================================================
   Arranca tus Sueños 2026 · base.css
   Variables de marca (colores, tipografías, radios), modo oscuro, reset, tipografía y botones.
   Para cambiar colores o fuentes de TODO el sitio, edita solo :root.
   ===================================================================== */
/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --pink:#FF0A6C;          /* rosa del logotipo */
  --pink-600:#E6007E;      /* rosa de fondos / botones */
  --pink-700:#C2006A;      /* rosa para texto sobre claro (AA) */
  --navy:#141F36;          /* azul marino del brief */
  --navy-2:#1D2A47;
  --on-pink:#FFFFFF;

  --bg:#FFFFFF;
  --bg-soft:#FFF3F8;
  --surface:#FFFFFF;
  --ink:#141F36;
  --muted:#535B70;
  --line:#F2D2E2;
  --accent-text:var(--pink-700);
  --tbd-bg:#FFF1B8; --tbd-ink:#5A4500;

  --font-display:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;

  --radius-s:10px; --radius:18px; --radius-l:28px;
  --shadow:0 18px 40px -18px rgba(20,31,54,.35);
  --shadow-pink:0 20px 50px -20px rgba(194,0,106,.55);
  --ease:cubic-bezier(.22,.8,.24,1);
  --wrap:1200px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1424; --bg-soft:#111A2E; --surface:#16213A; --ink:#F3F5FA; --muted:#AAB2C7;
    --line:#26324D; --accent-text:#FF6FAE; --tbd-bg:#4A3A00; --tbd-ink:#FFE9A3;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1424; --bg-soft:#111A2E; --surface:#16213A; --ink:#F3F5FA; --muted:#AAB2C7;
  --line:#26324D; --accent-text:#FF6FAE; --tbd-bg:#4A3A00; --tbd-ink:#FFE9A3;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #FFD400;outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.tbd{background:var(--tbd-bg);color:var(--tbd-ink);padding:0 .3em;border-radius:4px;font-weight:600;white-space:nowrap}

/* Typography */
.eyebrow{font-family:var(--font-display);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;color:var(--accent-text);margin:0 0 14px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:currentColor}
.h2{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--muted);max-width:60ch;margin:0}
.on-pink .eyebrow,.on-dark .eyebrow{color:#fff}
.on-pink .lead,.on-dark .lead{color:rgba(255,255,255,.9)}

/* Buttons */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 14px 30px -12px rgba(20,31,54,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(20,31,54,.8)}
.btn-pink{background:var(--pink-600);color:#fff;box-shadow:var(--shadow-pink)}
.btn-pink:hover{transform:translateY(-2px);background:var(--pink-700)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:2px solid rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.26)}
.btn-sm{--h:44px;padding:0 18px;font-size:.88rem}

/* Movimiento reducido (accesibilidad) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .load,.hero-car.load,.reveal{opacity:1!important;transform:none!important}
  .ticker-track{animation:none!important}
}