/* ============================================================
   COLORES Y FUENTES  ->  edita aquí y cambia todo el sitio
   ============================================================ */
:root{
  --blue:#2ea3f2;      /* color principal (botones, detalles) */
  --orange:#f5903b;    /* color secundario */
  --black:#000000;
  --ink:#070a12;       /* fondo general oscuro */
  --navy:#0b1426;      /* fondo de secciones oscuras */
  --white:#ffffff;
  --grey:#f0f0f0;      /* fondo de secciones grises */
  --text:#666666;      /* color del texto normal */
  --head:#333333;      /* color de los títulos sobre fondo claro */
  --display:"Audiowide","Arial Black",system-ui,sans-serif;   /* letra de títulos y menú */
  --body:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;  /* letra del texto */
  color-scheme:light;
}

/* ============================================================
   BASE COMÚN (normalmente no hace falta tocar nada de aquí hacia abajo)
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
img{max-width:100%}
[hidden]{display:none!important}
body{margin:0; background:var(--ink); color:var(--text); font:15px/1.8 var(--body)}
a{color:inherit}
.in{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; line-height:1.2}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

.btn{display:inline-block; position:relative; font-family:var(--display); font-size:1rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--white); background:transparent; border:2px solid currentColor; border-radius:3px; padding:.4em 1.1em; cursor:pointer; line-height:1.7; transition:all .25s}
.btn::after{content:"›"; position:absolute; right:.45em; top:50%; transform:translateY(-54%); font-size:1.5em; opacity:0; transition:all .25s}
.btn:hover{padding:.4em 2em .4em .7em; background:rgba(255,255,255,.18); border-color:transparent}
.btn:hover::after{opacity:1}
.btn.dark{color:var(--head)}
.btn.dark:hover{background:rgba(0,0,0,.06)}
.btn.sm{font-size:.82rem}

.sec{padding-block:5rem}
.sec.white{background:var(--white)}
.sec.grey{background:var(--grey)}
.sec.dark{background:linear-gradient(180deg,var(--navy),#060a16); color:rgba(255,255,255,.8)}
.sec h2.t{font-size:clamp(1.8rem,4.4vw,2.8rem); text-align:center; letter-spacing:.08em; text-transform:uppercase; color:var(--head)}
.sec.dark h2.t{color:var(--white)}
.sec h2.t::after{content:""; display:block; width:64px; height:3px; background:var(--blue); margin:1rem auto 3rem}
@media (max-width:820px){ .sec{padding-block:3.5rem} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }