/* =========================================================
   BASE — variables, reset, tipografía global, utilidades compartidas
========================================================= */
:root{
  --color-black:#0a0d13;
  --color-black-2:#11151e;
  --color-black-3:#161b26;
  --color-overlay-deep: rgba(0,0,0,0.78);

  --color-gold:#f4b400;
  --color-gold-premium:#ffcc55;
  --color-gold-dim:#8a6a12;
  --color-gold-glow: rgba(244,180,0,0.45);

  --color-white:#f5f5f0;
  --color-gray:#9a9fa8;
  --color-border-soft: rgba(255,255,255,0.08);
  --color-line: rgba(244,180,0,0.18);
  --color-whatsapp:#25d366;

  --font-heading:'Oswald',sans-serif;
  --font-label:'Rajdhani',sans-serif;
  --font-body:'Inter',sans-serif;

  --container-max:1240px;
  --header-height:88px;

  /* Escala de espaciado/radio declarada para uso futuro y en los puntos
     donde ya existía una correspondencia exacta 1:1 con el valor original.
     No se retroactivó en declaraciones compuestas para no alterar el
     resultado calculado (ver README, sección "Variables"). */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:56px;
  --space-section:120px;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:28px;

  --ease-premium: cubic-bezier(.2,.8,.2,1);

  /* Alias heredados: mismos valores, para blindar cualquier referencia
     que pudiera haber quedado con el nombre corto original. */
  --black: var(--color-black);
  --black-2: var(--color-black-2);
  --black-3: var(--color-black-3);
  --overlay-deep: var(--color-overlay-deep);
  --gold: var(--color-gold);
  --gold-premium: var(--color-gold-premium);
  --gold-dim: var(--color-gold-dim);
  --gold-glow: var(--color-gold-glow);
  --white: var(--color-white);
  --gray: var(--color-gray);
  --border-soft: var(--color-border-soft);
  --line: var(--color-line);
  --ease: var(--ease-premium);
  --header-h: var(--header-height);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--color-black);
  color:var(--color-white);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
body.menu-open{overflow:hidden;}
img{max-width:100%;display:block;}
::selection{background:var(--color-gold);color:#0a0a0a;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--color-black);}
::-webkit-scrollbar-thumb{background:var(--color-gold-dim);}
::-webkit-scrollbar-thumb:hover{background:var(--color-gold);}

h1,h2,h3,h4{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:0.02em;font-weight:700;}

header, main, footer{position:relative;z-index:1;}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 24px;}
section{position:relative;padding:var(--space-section) 0;scroll-margin-top:var(--header-height);}

.eyebrow{
  font-family:var(--font-label);font-weight:700;color:var(--color-gold);
  letter-spacing:0.35em;font-size:0.78rem;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;margin-bottom:16px;
}
.eyebrow::before, .eyebrow.center::after{content:'';height:1px;width:34px;background:linear-gradient(90deg, transparent, var(--color-gold));}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{background:linear-gradient(90deg, var(--color-gold), transparent);}

.section-head{max-width:640px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--color-white);margin-bottom:16px;}
.section-head p{color:var(--color-gray);font-size:1rem;}

/* Marco de esquinas técnicas tipo HUD, reutilizable en paneles principales */
.hud-corners{position:relative;}
.hud-corners::before, .hud-corners::after{
  content:'';position:absolute;width:22px;height:22px;pointer-events:none;
  border:1.5px solid var(--color-gold);opacity:0.6;
}
.hud-corners::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.hud-corners::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* Utilidades extraídas de estilos inline del HTML original (mismos valores) */
.section-title-sm{font-size:clamp(1.6rem,3.2vw,2.4rem);}
.section-title-sm--tight{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:22px;}
.text-gold-inline{color:var(--color-gold);font-style:normal;}
.text-gray-inline{color:var(--color-gray);}
.inline-contact-link{color:inherit;text-decoration:none;}
.honeypot-field{position:absolute;left:-9999px;}
.social-row{display:flex;gap:14px;margin-top:22px;}
.social-row-center{display:flex;gap:14px;justify-content:center;margin-bottom:18px;}
.footer-brand-centered{justify-content:center;}

/* =========================================================
   ACCESIBILIDAD / MOVIMIENTO REDUCIDO (base)
========================================================= */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--color-gold);outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* =========================================================
   BLINDAJE ANTI DESBORDAMIENTO HORIZONTAL (móvil)
========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
svg,
iframe{
  max-width:100%;
  height:auto;
}