/* ================================================================
   BASE.CSS — Variables globales, reset, scrollbar, texturas
   Compartido por todas las páginas.
   Para cambiar colores globales: edita solo :root
   ================================================================ */

/* ── TOKENS ────────────────────────────────────────────────────── */
:root {
  --bg-deep:    #050810;
  --bg-card:    #0A0F1E;
  --bg-surface: #0E1525;
  --border:     rgba(200,155,60,.18);
  --gold:       #C89B3C;
  --gold-light: #E8C06A;
  --gold-dark:  #8B6A1F;
  --electric:   #4FC3F7;
  --purple:     #9146FF;
  --red:        #dc2626;
  --muted:      #4A5878;
  --text:       #D4C4A0;
  --text-dim:   #7a8aaa;
  --font-display: 'Cinzel', serif;
  --font-body:    'Rajdhani', sans-serif;
  --font-accent:  'Bebas Neue', sans-serif;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  /* ── Capa 1: fondo base negro azulado ── */
  background: #0a0e1a;
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: clip; /* clip instead of hidden — preserves sticky positioning */
  -webkit-font-smoothing: antialiased;
}

/* ── Capa 2: cadenas Sylas — screen blend elimina el negro ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: url('../assets/CADENAS.png') center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.18;
  filter: blur(3px) saturate(0.9) brightness(0.8);
  pointer-events: none;
  will-change: opacity;
}

/* ── Capa 3: vignette radial — oscurece bordes, foco en el centro ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 85% at 50% 45%,
      rgba(8,10,18,.45) 0%,
      rgba(6,8,16,.72) 55%,
      rgba(4,6,12,.93) 100%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(200,155,60,.03) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 15% 15%, rgba(79,195,247,.02) 0%, transparent 50%);
  pointer-events: none;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(200,155,60,.3); border-radius: 2px; }

/* ── HEXTECH COMPONENT SYSTEM ───────────────────────────────────
   Técnica: clip-path bevel + inset box-shadow (respeta clip) +
            filter drop-shadow (se aplica DESPUÉS del clip) +
            background metallic gradient
   ────────────────────────────────────────────────────────────── */

/* Trapezoid pill — cortes 45° en esquinas laterales */
.hx-pill {
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
/* Panel bevel — cortes 45° en las 4 esquinas */
.hx-panel {
  clip-path: polygon(
    10px 0%, calc(100% - 10px) 0%,
    100% 10px, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 10px 100%,
    0% calc(100% - 10px), 0% 10px
  );
}
/* Card bevel — cortes 8px solo en esquinas TL + BR */
.hx-card {
  clip-path: polygon(
    8px 0%, 100% 0%,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    0% 100%, 0% 8px
  );
}

.grid-tex {
  background-image:
    linear-gradient(rgba(200,155,60,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,155,60,.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ambient {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(72,161,255,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(200,155,60,.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 10% 60%, rgba(145,70,255,.04) 0%, transparent 50%);
}

/* ── GLOBAL MOBILE ─────────────────────────────────────────────── */
/* Prevent double-tap zoom on buttons/links */
a, button { touch-action: manipulation; }

/* Smooth scrolling on iOS */
* { -webkit-tap-highlight-color: transparent; }

/* Prevent horizontal overflow globally */
html { overflow-x: clip; } /* clip preserves sticky — hidden breaks it */

/* Better text rendering on mobile */
@media(max-width:700px) {
  body { -webkit-text-size-adjust: 100%; }
  
  /* Page titles smaller on mobile */
  .page-title, .mu-title, .cp-title, .calc-page-title,
  .builds-title, .ab-page-title {
    font-size: clamp(36px, 10vw, 64px) !important;
  }
  
  /* Hero section padding */
  .page-hero, .mu-hero, .cp-hero, .calc-page-header,
  .builds-hero, .ab-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}