/* ═══════════════════════════════════════════════════════════════════════════
   TRIPLESHOT — main.css
   Variables CSS · Reset · Base · Tipografía · Container
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  /* Colores */
  --c-primary:        #EC1E32;
  --c-primary-bright: #F61505;
  --c-primary-dark:   #6D051C;
  --c-primary-glow:   rgba(236, 30, 50, 0.45);
  --c-primary-glow-sm:rgba(236, 30, 50, 0.20);

  --c-bg:             #080000;
  --c-bg-wine:        #110008;
  --c-bg-wine-md:     #1C000C;
  --c-bg-wine-lt:     #290013;
  --c-bg-card:        #18000A;
  --c-bg-overlay:     rgba(8,0,0,0.92);

  --c-white:          #FFFFFF;
  --c-text:           #F0F0F0;
  --c-text-muted:     #AAAAAA;
  --c-text-dim:       #666666;
  --c-border:         rgba(236,30,50,0.25);
  --c-border-bright:  rgba(236,30,50,0.6);

  /* Tipografía */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Poppins', sans-serif;

  --fs-hero:   clamp(2.8rem, 5.5vw, 4.8rem);
  --fs-h1:     clamp(2.2rem, 4vw,   3.5rem);
  --fs-h2:     clamp(1.7rem, 3vw,   2.5rem);
  --fs-h3:     clamp(1.3rem, 2vw,   1.8rem);
  --fs-body:   clamp(0.95rem,1.1vw, 1.05rem);
  --fs-small:  0.875rem;
  --fs-xs:     0.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* Espaciado */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  6rem;
  --sp-2xl: 9rem;

  /* Bordes */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 100px;

  /* Sombras */
  --shadow-glow:    0 0 60px var(--c-primary-glow);
  --shadow-glow-sm: 0 0 25px var(--c-primary-glow-sm);
  --shadow-card:    0 8px 40px rgba(0,0,0,0.7);
  --shadow-btn:     0 4px 20px var(--c-primary-glow);

  /* Transiciones */
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);
  --ease-in:    cubic-bezier(.55,.055,.675,.19);
  --t-fast:     0.18s;
  --t-mid:      0.35s;
  --t-slow:     0.6s;

  /* Layout */
  --nav-h:      80px;
  --container:  1280px;
  --container-sm: 900px;
}

/* ─── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  background-color: var(--c-bg);
  line-height: var(--lh-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }
svg { display: block; }

/* ─── TIPOGRAFÍA BASE ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { line-height: var(--lh-normal); color: var(--c-text-muted); }

strong { font-weight: var(--fw-bold); color: var(--c-white); }

.text-red   { color: var(--c-primary-bright) !important; }
.text-white { color: var(--c-white) !important; }
.text-muted { color: var(--c-text-muted) !important; }
.text-center{ text-align: center; }
.text-upper { text-transform: uppercase; letter-spacing: 0.12em; }

/* ─── CONTENEDOR ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}

.container--sm {
  max-width: var(--container-sm);
}

/* ─── SECCIONES ─────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--sp-xl);
  position: relative;
}

.section--dark   { background-color: rgba(8,0,0,0.78); }
.section--wine   { background-color: rgba(18,0,0,0.82); }
.section--wine-md{ background-color: rgba(30,0,0,0.82); }

.section__header {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.section__title {
  font-size: var(--fs-h1);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-sm);
}

.section__subtitle {
  font-size: var(--fs-body);
  color: var(--c-text-muted);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--lh-loose);
}

/* ─── NOISE TEXTURE OVERLAY ─────────────────────────────────────────────── */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary-bright); }

/* ─── SELECTION ──────────────────────────────────────────────────────────── */
::selection { background: var(--c-primary); color: var(--c-white); }

/* ─── UTILIDADES ─────────────────────────────────────────────────────────── */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.u-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }

.u-mt-sm { margin-top: var(--sp-sm); }
.u-mt-md { margin-top: var(--sp-md); }
.u-mt-lg { margin-top: var(--sp-lg); }