/* ==========================================================
   BASE.CSS — variables, reset, tipografía, botones, envoltura
   ========================================================== */

:root{
  --rojo:#E5131E;
  --rojo-osc:#B70F17;
  --rojo-claro:#FF3B45;
  --negro:#0B0B0C;
  --carbon:#151517;
  --carbon-2:#1E1E22;
  --borde:#2C2C31;
  --gris:#9A9AA2;
  --gris-claro:#D6D6DB;
  --blanco:#FFFFFF;
  --radio:14px;
  --ancho:1180px;
  --sombra:0 18px 44px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--negro);
  color:var(--gris-claro);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
   overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* Contenedor centrado que usa TODO el sitio */
.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* Títulos */
h1,h2,h3{color:var(--blanco);line-height:1.15;margin:0;letter-spacing:-.02em;font-family:"Barlow Condensed",system-ui,sans-serif}
h1{font-size:clamp(2rem,5.4vw,3.5rem);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:800;text-transform:uppercase}
h3{font-size:1.06rem;font-weight:700}

/* Botones — usados por header Y páginas */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:10px;border:2px solid transparent;
  font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:transform .16s ease,background .2s ease,border-color .2s ease;
  font-family:inherit;text-align:center;white-space:nowrap;
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-osc);transform:translateY(-2px)}
.btn-linea{border-color:var(--borde);color:var(--blanco);background:transparent}
.btn-linea:hover{border-color:var(--rojo);transform:translateY(-2px)}
.btn-verde{background:#1FAF54;color:#fff}
.btn-verde:hover{background:#178C42;transform:translateY(-2px)}
.btn-bloque{width:100%}

.btn-rojo,.btn-verde{position:relative;overflow:hidden}
.btn-rojo::before,.btn-verde::before{
  content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.btn-rojo:hover::before,.btn-verde:hover::before{left:130%}

@media (prefers-reduced-motion:reduce){
  .btn-rojo::before,.btn-verde::before{display:none}
}