/* =========================================================================
   REVOLOINA FOOTBALL — "ESTADIO ELÉCTRICO"
   Design tokens + reusable visual language for all pages.
   ========================================================================= */

:root {
  /* --- Tierras de fondo: ultramarino profundo, no negro puro --- */
  --ink: #07081C;
  --ink-2: #0F1232;
  --ink-3: #1A1E4A;
  --ink-hi: #262C6C;

  /* --- Paleta eléctrica --- */
  --shock: #FF2E93;           /* magenta eléctrica — acento dominante */
  --shock-2: #FF64B4;          /* magenta claro */
  --acid: #D4FF00;             /* lima acid — acento secundario */
  --acid-2: #E9FF61;           /* lima claro */
  --ice: #4DE5FF;              /* cyan eléctrico */
  --flame: #FF6B1C;            /* naranja flame — urgencia */
  --ember: #FF9500;            /* naranja cálido */

  /* --- Neutros --- */
  --cream: #F5EEDD;            /* crema cálido */
  --cream-2: #E8DFC8;
  --paper: #FFF9EC;
  --bone: rgba(245,238,221,.92);

  /* --- Gradientes principales --- */
  --grad-stadium: linear-gradient(135deg, var(--shock) 0%, #C126E8 45%, var(--ice) 100%);
  --grad-fire: linear-gradient(135deg, var(--flame) 0%, var(--shock) 100%);
  --grad-acid: linear-gradient(135deg, var(--acid) 0%, var(--ice) 100%);
  --grad-pitch: radial-gradient(ellipse at top, #1A1E4A 0%, var(--ink) 70%);

  /* --- Sombras --- */
  --shadow-shock: 0 20px 60px -20px rgba(255, 46, 147, .5);
  --shadow-acid: 0 20px 60px -20px rgba(212, 255, 0, .35);
  --shadow-deep: 0 30px 80px -20px rgba(0, 0, 0, .6);

  /* --- Tipografía (Manrope como voz principal) --- */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-stencil: "Anton", Impact, sans-serif;
  --font-accent: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

/* ========================================================================= */
/* BASE                                                                      */
/* ========================================================================= */

html, body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(255, 46, 147, .18), transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, rgba(77, 229, 255, .12), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(212, 255, 0, .08), transparent 60%),
    var(--ink);
  min-height: 100vh;
}

/* Grano animado sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection { background: var(--shock); color: var(--ink); }

/* ========================================================================= */
/* TIPOGRAFÍA                                                                */
/* ========================================================================= */

.font-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; }
.font-stencil { font-family: var(--font-stencil); letter-spacing: 0; }
.font-accent  { font-family: var(--font-accent); font-weight: 700; letter-spacing: -.015em; }
.font-mono    { font-family: var(--font-mono); }

/* Texto con relleno degradado */
.text-grad-stadium {
  background: var(--grad-stadium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-fire {
  background: var(--grad-fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-acid {
  background: var(--grad-acid);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Colores de texto rápidos */
.shock { color: var(--shock); }
.acid { color: var(--acid); }
.ice { color: var(--ice); }
.flame { color: var(--flame); }
.cream { color: var(--cream); }

/* Backgrounds */
.bg-shock { background: var(--shock); color: var(--ink); }
.bg-acid  { background: var(--acid); color: var(--ink); }
.bg-ice   { background: var(--ice); color: var(--ink); }
.bg-flame { background: var(--flame); color: var(--ink); }
.bg-ink-2 { background: var(--ink-2); }
.bg-ink-3 { background: var(--ink-3); }
.bg-cream { background: var(--cream); color: var(--ink); }
.bg-paper { background: var(--paper); color: var(--ink); }

/* ========================================================================= */
/* UI — BOTONES                                                              */
/* ========================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 0; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
  position: relative;
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: translate(4px, 4px);
  transition: transform .2s ease;
  pointer-events: none;
  opacity: 0;
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:hover::after { opacity: 1; transform: translate(6px, 6px); }

.btn-shock { background: var(--shock); color: #fff; }
.btn-shock:hover { background: var(--shock-2); color: var(--ink); box-shadow: var(--shadow-shock); }

.btn-acid  { background: var(--acid); color: var(--ink); }
.btn-acid:hover { box-shadow: var(--shadow-acid); }

.btn-ice { background: var(--ice); color: var(--ink); }

.btn-ghost {
  background: transparent; color: var(--cream);
  border: 2px solid var(--cream);
  padding: 12px 24px;
}
.btn-ghost:hover { background: var(--cream); color: var(--ink); }

.btn-outline-shock {
  background: transparent; color: var(--shock);
  border: 2px solid var(--shock);
  padding: 12px 24px;
}
.btn-outline-shock:hover { background: var(--shock); color: #fff; }

/* ========================================================================= */
/* UI — INPUTS                                                               */
/* ========================================================================= */

input, select, textarea {
  background: rgba(255,255,255,.04);
  color: var(--cream);
  border: 1px solid rgba(245,238,221,.14);
  padding: 12px 14px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .15s, background .15s;
  /* Force dark-theme color scheme so native <option> dropdowns follow */
  color-scheme: dark;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--shock);
  background: rgba(255, 46, 147, .06);
}

/* Explicitly style <option> — most browsers honour this now */
option {
  background: var(--ink-2);
  color: var(--cream);
  padding: 10px;
}
option:checked, option:hover {
  background: var(--shock);
  color: #fff;
}
optgroup {
  background: var(--ink);
  color: var(--acid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ========================================================================= */
/* TARJETAS / SUPERFICIES                                                    */
/* ========================================================================= */

.card {
  background: linear-gradient(180deg, rgba(26,30,74,.6), rgba(15,18,50,.6));
  border: 1px solid rgba(245,238,221,.08);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  transition: all .25s cubic-bezier(.3,.8,.3,1);
  position: relative;
  overflow: hidden;
}
.card-overflow { overflow: visible; } /* For cards that need to show popups/autocomplete */
.card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(130deg, transparent 40%, rgba(255,46,147,.08) 50%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card:hover {
  border-color: var(--shock);
  transform: translateY(-4px);
  box-shadow: var(--shadow-shock);
}
.card:hover::before { opacity: 1; }

.card-flat {
  background: rgba(15,18,50,.55);
  border: 1px solid rgba(245,238,221,.08);
  border-radius: 4px;
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 4px 10px;
  border: 1px solid rgba(245,238,221,.18);
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.chip-shock { border-color: var(--shock); color: var(--shock); background: rgba(255,46,147,.08); }
.chip-acid  { border-color: var(--acid);  color: var(--acid);  background: rgba(212,255,0,.08); }
.chip-ice   { border-color: var(--ice);   color: var(--ice);   background: rgba(77,229,255,.08); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  background: var(--acid);
  color: var(--ink);
}
.badge-shock { background: var(--shock); color: #fff; }
.badge-flame { background: var(--flame); color: #fff; }

/* ========================================================================= */
/* FIGURAS DECORATIVAS                                                       */
/* ========================================================================= */

/* Stripe diagonal inspirada en bufanda de equipo */
.scarf-stripe {
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    var(--shock) 0 24px,
    var(--acid) 24px 48px,
    var(--ice) 48px 72px,
    transparent 72px 96px
  );
}
.scarf-stripe-thin {
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--shock) 0 12px, transparent 12px 24px);
}

/* Número gigante decorativo (tipo dorsal) */
.ghost-number {
  font-family: var(--font-stencil);
  font-size: clamp(240px, 40vw, 720px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(245,238,221,.06);
  pointer-events: none;
  user-select: none;
  position: absolute;
  z-index: 0;
}

/* Dotted/grid overlay tipo blueprint */
.bp-grid {
  background-image:
    linear-gradient(rgba(245,238,221,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,238,221,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ========================================================================= */
/* MARQUEE                                                                   */
/* ========================================================================= */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 2px solid var(--ink);
}
.marquee-track {
  display: inline-flex;
  gap: 3rem;
  animation: marquee 40s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: 10px;
}
.marquee-track > * { display: inline-flex; align-items: center; gap: 1rem; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ========================================================================= */
/* ANIMACIONES                                                               */
/* ========================================================================= */

@keyframes rise-in {
  0% { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
.rise-in { animation: rise-in .7s cubic-bezier(.3,.9,.3,1) both; }
.delay-1 { animation-delay: .1s }
.delay-2 { animation-delay: .22s }
.delay-3 { animation-delay: .34s }
.delay-4 { animation-delay: .48s }
.delay-5 { animation-delay: .62s }

@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,46,147,.6); }
  50% { box-shadow: 0 0 0 18px rgba(255,46,147,0); }
}
.pulse-glow { animation: pulse-glow 2s infinite; }

@keyframes float-y {
  0%,100% { transform: translateY(0) }
  50% { transform: translateY(-12px) }
}
.float-y { animation: float-y 6s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,46,147,.12), rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ========================================================================= */
/* UTILIDADES                                                                */
/* ========================================================================= */

.divider-zig {
  height: 12px;
  background:
    linear-gradient(45deg, var(--shock) 33%, transparent 33%),
    linear-gradient(-45deg, var(--shock) 33%, transparent 33%);
  background-size: 24px 100%;
  background-position: 0 0, 12px 0;
}

.glass {
  background: rgba(15,18,50,.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(245,238,221,.08);
}

/* Navegación */
.nav-link {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 13px;
  color: var(--cream);
  transition: color .15s;
}
.nav-link::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--shock);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.nav-link:hover { color: var(--shock); }
.nav-link:hover::after { transform: scaleX(1); }

/* Iconos del header */
.icon-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,238,221,.06);
  color: var(--cream);
  transition: all .2s;
  position: relative;
}
.icon-btn:hover { background: var(--shock); color: #fff; transform: scale(1.05); }

/* Product price typography */
.price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--acid);
  letter-spacing: -.035em;
}
.price-strike {
  text-decoration: line-through;
  color: rgba(245,238,221,.4);
  font-size: 1rem;
}

/* Tab-style segmented control */
.segment {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(245,238,221,.12);
  border-radius: 2px;
  background: rgba(15,18,50,.6);
}
.segment > button {
  background: transparent;
  color: var(--cream);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  border-radius: 2px;
  cursor: pointer;
  border: 0;
}
.segment > button.active { background: var(--shock); color: #fff; }

/* Opciones de talla / versión */
.opt {
  min-width: 52px;
  padding: 12px 18px;
  border: 2px solid rgba(245,238,221,.14);
  background: rgba(15,18,50,.4);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
}
.opt:hover { border-color: var(--shock); color: var(--shock); }
.opt.active {
  background: var(--shock); color: #fff; border-color: var(--shock);
  box-shadow: 4px 4px 0 var(--acid);
}
.opt-price {
  font-size: 10px;
  color: var(--acid);
  font-family: var(--font-mono);
}
.opt.active .opt-price { color: var(--ink); background: var(--acid); padding: 1px 5px; }

.size-opt {
  min-width: 56px;
  padding: 12px 14px;
  border: 2px solid rgba(245,238,221,.18);
  background: rgba(15,18,50,.4);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s;
  text-align: center;
}
.size-opt:hover { border-color: var(--acid); color: var(--acid); }
.size-opt.active {
  background: var(--acid); color: var(--ink); border-color: var(--acid);
  box-shadow: 4px 4px 0 var(--shock);
}

/* Filter chips */
.filter-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 7px 14px;
  border: 1px solid rgba(245,238,221,.15);
  background: rgba(15,18,50,.5);
  border-radius: 999px;
  font-size: 12px;
  color: var(--cream);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.filter-chip:hover { border-color: var(--shock); color: var(--shock); }
.filter-chip.active {
  background: var(--shock);
  color: #fff;
  border-color: var(--shock);
  box-shadow: 3px 3px 0 var(--acid);
}

/* Focus visible */
*:focus-visible { outline: 2px solid var(--shock); outline-offset: 2px; }