@font-face {
  font-family: 'IgnitFont';
  src: url('../assets/fonts/ignitfont.ttf') format('truetype');
  font-display: swap;
}

/* ============================================================
   RESET
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

html,
body {
  position: relative;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-brand);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   FOCUS — accesibilidad y coherencia de marca
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--ignit-red);
  outline-offset: 3px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ignit-red);
  outline-offset: 3px;
}


/* ============================================================
   CAPAS Y VISIBILIDAD
   ============================================================ */

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  z-index: 0;
  will-change: transform;
  /* Fondo sólido (no imagen) mientras el vídeo carga su primer frame —
     en móvil ya no hay poster fotográfico, así que esto evita cualquier
     destello blanco y se funde con el tema oscuro de la web. */
  background: var(--bg-primary);
}

.desktop-media { display: block; }
.mobile-media  { display: none; }

/* FALLBACK ANIMADO DEL HERO MÓVIL — si el navegador bloquea el autoplay
   del <video> (p.ej. iOS en modo de bajo consumo), se sustituye por una
   versión animada en WebP corta. Oculto por defecto siempre (regla base
   sin condición de media query, para no competir en especificidad con
   [hidden]); solo se permite mostrar dentro del breakpoint móvil y
   cuando el JS le quita el atributo hidden. */
.hero-loop-fallback {
  display: none;
}

/* Botón discreto para pasar al vídeo real mientras se ve el fallback
   animado — solo en móvil, esquina inferior derecha, oculto por defecto.
   La regla global button{margin-top;padding;width:100%} se sobreescribe
   explícitamente para no romper este botón circular pequeño. */
.hero-video-play-btn {
  display: none;
  position: absolute;
  bottom: var(--sp-6);
  right: var(--sp-5);
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-top: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-red);
  color: var(--text-primary);
  cursor: pointer;
}

.hero-video-play-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--ignit-red);
}

.hero,
.intro,
.products {
  position: relative;
  z-index: var(--z-base);
}


/* ============================================================
   INTRO LOADER — Brand curtain
   ============================================================ */

.intro-loader {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Antes había aquí un fondo con grietas fijas (un simple background-image,
     nunca se movía) — se quita porque las grietas de verdad ahora las
     dibujan los elementos .mc animados más abajo, y las dos capas juntas
     confundían (una se movía, la otra no). */
  background: rgba(6, 6, 6, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: var(--z-loader);
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: opacity;
  /* Es puramente decorativa (aria-hidden) y su z-index está por encima de
     TODO el sitio (navbar, buscador, etc.). Sin esto, aunque el fondo ya
     sea transparente, el elemento sigue en el DOM ~3.3s capturando todos
     los clics de la página — cualquier clic durante o justo después de la
     intro (típico al probar con recarga en caliente) se perdía en el
     vacío en vez de llegar al botón real que hay debajo. */
  pointer-events: none;
}

/* Sin cortina: al llegar la salida, el fondo de la intro se disuelve para
   que el home quede visible justo detrás, mientras el logo (fuera de
   este bloque, ver introLogoBurst) sigue expandiéndose por encima hasta
   desvanecerse él solo.
   El backdrop-filter (blur) se quita de golpe, sin transición: animar un
   blur de fondo a pantalla completa es muy costoso y era la causa
   principal del lag — el color de fondo sí se desvanece suave porque
   eso es barato. */
.intro-loader.is-exiting {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.4s ease;
}

.intro-loader.is-exiting .intro-obsidian,
.intro-loader.is-exiting .intro-flash,
.intro-loader.is-exiting .intro-embers {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* La superficie del fondo se "solidifica" en obsidiana: cristal volcánico
   negro con un brillo especular que la recorre, como luz reflejándose en
   roca vítrea recién enfriada. Sustituye la idea de un fondo plano por
   una superficie que parece estar formándose en tiempo real. */
.intro-obsidian {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(46, 9, 14, 0.55) 0%, rgba(6, 6, 6, 0) 55%),
    linear-gradient(135deg, rgba(22, 20, 24, 0.92) 0%, rgba(6, 6, 6, 0.96) 45%, rgba(26, 10, 13, 0.92) 100%);
  opacity: 0;
  animation: obsidianForm 1.6s ease-out 0.1s forwards;
}

.intro-obsidian::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 52%, transparent 58%);
  transform: translateX(-60%);
  animation: obsidianSheen 1.9s ease-in-out 0.55s forwards;
}

@keyframes obsidianForm {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes obsidianSheen {
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(65%); }
}

/* Destello que inunda toda la pantalla al encenderse la chispa, no solo
   alrededor del logo — da sensación de flash real, no de icono animado. */
.intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(193, 18, 31, 0.4) 0%, transparent 62%);
  opacity: 0;
  animation: introFlashPulse 0.7s ease-out 0.05s forwards;
  pointer-events: none;
}

@keyframes introFlashPulse {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Brasas subiendo — refuerzan la sensación de fuego real durante toda
   la intro, no solo en el instante del destello. */
.intro-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-embers span {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ignit-red);
  box-shadow: 0 0 6px 1px rgba(193, 18, 31, 0.8);
  opacity: 0;
  animation: emberRise ease-in forwards;
}

@keyframes emberRise {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-340px) translateX(var(--drift, 12px)); }
}

/* infinite: la intro ahora dura más, así que las brasas siguen subiendo
   en bucle todo el tiempo en vez de agotarse a mitad de la espera. */
.intro-embers span { animation-iteration-count: infinite; }

.intro-embers span:nth-child(1) { left: 8%;  --drift: 8px;   width: 3px; height: 3px; animation-duration: 1.8s;  animation-delay: 0s; }
.intro-embers span:nth-child(2) { left: 20%; --drift: -10px; width: 4px; height: 4px; animation-duration: 2s;    animation-delay: .15s; }
.intro-embers span:nth-child(3) { left: 33%; --drift: 12px;  width: 3px; height: 3px; animation-duration: 1.7s;  animation-delay: .05s; }
.intro-embers span:nth-child(4) { left: 46%; --drift: -8px;  width: 4px; height: 4px; animation-duration: 2.1s;  animation-delay: .25s; }
.intro-embers span:nth-child(5) { left: 60%; --drift: 10px;  width: 3px; height: 3px; animation-duration: 1.9s;  animation-delay: .1s; }
.intro-embers span:nth-child(6) { left: 73%; --drift: -12px; width: 4px; height: 4px; animation-duration: 1.75s; animation-delay: .3s; }
.intro-embers span:nth-child(7) { left: 85%; --drift: 9px;   width: 3px; height: 3px; animation-duration: 2.05s; animation-delay: .2s; }
.intro-embers span:nth-child(8) { left: 93%; --drift: -9px;  width: 4px; height: 4px; animation-duration: 1.85s; animation-delay: .35s; }

/* Resplandor que respira detrás del logo — mantiene la sensación de fuego
   vivo durante todo el tiempo que la intro se queda en pantalla. */
.intro-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 18, 31, 0.28) 0%, transparent 70%);
  z-index: 0;
  animation: introGlowPulse 1.8s ease-in-out 0.35s infinite;
}

@keyframes introGlowPulse {
  0%   { opacity: 0.15; transform: scale(0.85); }
  25%  { opacity: 0.9;  transform: scale(1.1); }
  55%  { opacity: 0.6;  transform: scale(0.95); }
  100% { opacity: 0.15; transform: scale(0.85); }
}

.intro-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Envuelve la chispa, las grietas de luz y el logo en el mismo punto
   central, para que el logo parezca "revelado" por el destello. */
.intro-flash-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ignit-red);
  opacity: 0;
  transform: scale(0);
  animation: introSparkIgnite 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes introSparkIgnite {
  0%   { opacity: 0; transform: scale(0);   box-shadow: 0 0 0 rgba(193, 18, 31, 0); }
  35%  { opacity: 1; transform: scale(5.5); box-shadow: 0 0 70px 26px rgba(193, 18, 31, 0.65); }
  100% { opacity: 0; transform: scale(1.6); box-shadow: 0 0 16px 5px rgba(193, 18, 31, 0); }
}

/* Ondas de choque — dos anillos concéntricos que se expanden y se
   desvanecen, para que el encendido se sienta como un impacto real. */
.intro-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1px solid var(--ignit-red);
  opacity: 0;
  animation: introRingOut 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-ring.ring-2 {
  animation-delay: 0.12s;
  border-color: rgba(193, 18, 31, 0.6);
}

@keyframes introRingOut {
  0%   { opacity: 0;   transform: scale(1); }
  18%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(9); }
}

/* Grietas de luz que salen disparadas del centro — mismo motivo de las
   grietas de lava del resto del sitio, aquí como destello puntual. */
.intro-cracks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-cracks span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 0;
  margin-left: -0.5px;
  background: linear-gradient(to top, var(--ignit-red), transparent);
  opacity: 0;
  transform-origin: bottom center;
  animation: introCrackOut 0.5s ease-out forwards;
}

.intro-cracks span:nth-child(1) { transform: rotate(20deg);  animation-delay: 0.05s; }
.intro-cracks span:nth-child(2) { transform: rotate(115deg); animation-delay: 0.08s; }
.intro-cracks span:nth-child(3) { transform: rotate(200deg); animation-delay: 0.03s; }
.intro-cracks span:nth-child(4) { transform: rotate(280deg); animation-delay: 0.1s; }

@keyframes introCrackOut {
  0%   { opacity: 0; height: 0; }
  40%  { opacity: 0.8; height: 26px; }
  100% { opacity: 0; height: 34px; }
}

.intro-logo {
  position: relative;
  z-index: 2;
  width: 92px;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  /* Entrada (0.22s→0.77s) y luego, justo cuando el script dispara la
     cortina (2.5s, ver script.js), el logo se dispara a máxima escala y
     se sale de la pantalla — el propio logo "empuja" la transición al
     home en vez de ser un elemento pasivo que la cortina se lleva. */
  animation: introLogoIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards,
             introLogoBurst 0.8s cubic-bezier(0.55, 0, 0.85, 0.2) 2.5s forwards;
  will-change: transform, opacity;
}

@keyframes introLogoBurst {
  0%   { transform: scale(1); }
  55%  { transform: scale(9); }
  100% { transform: scale(24); opacity: 0; }
}

.intro-accent {
  width: 0;
  height: 1px;
  background: var(--ignit-red);
  animation: introLineIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.52s forwards,
             introExitFade 0.25s ease-in 2.32s forwards;
}

@keyframes introExitFade {
  to { opacity: 0; }
}

.intro-tag {
  font-size: 9px;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-brand);
  opacity: 0;
  animation: introTagIn 0.35s ease 0.78s forwards,
             introExitFade 0.25s ease-in 2.32s forwards;
}

@keyframes introLogoIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes introLineIn {
  to { width: 36px; }
}

@keyframes introTagIn {
  to { opacity: 1; }
}


/* ============================================================
   GLOBAL TYPOGRAPHIC HELPERS
   ============================================================ */

p {
  margin-top: var(--sp-3);
  opacity: 0.85;
}

button {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  width: 100%;
  background: var(--ignit-red);
  box-shadow: var(--shadow-btn);
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  border-radius: var(--radius-md);
  font-family: var(--font-brand);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hov);
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  height: calc(100dvh - 36px);
  min-height: 600px;
  margin-top: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  padding: 0 0 var(--sp-12) var(--sp-8);
  position: relative;
  overflow: hidden;
  z-index: var(--z-base);
  opacity: 0;
  transition: opacity 0.8s ease;
}

body.loaded .hero {
  opacity: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Viñeta de oscurecimiento sobre el vídeo (las grietas de lava rojas se
     han quitado del hero de portada a petición del usuario; el hero de
     producto conserva su propia regla, .hero-product::after, intacta). */
  background:
    radial-gradient(140% 140% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,0.55) 75%,
      #050505 100%);
  z-index: var(--z-base);
  pointer-events: none;
}

.hero-text {
  text-align: left;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SALUDO PERSONALIZADO — solo visible con sesión iniciada */
.hero-greeting {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-greeting::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--ignit-red);
  flex-shrink: 0;
}

.hero-greeting[hidden] {
  display: none;
}

.hero-greeting-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ignit-red);
  flex-shrink: 0;
}

.hero-greeting-avatar[hidden] {
  display: none;
}

.hero-greeting.hero-greeting-visible {
  opacity: 1;
  transform: translateY(0);
}

/* EYEBROW */
.hero-eyebrow {
  opacity: 0;
  transform: translateY(16px);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--text-xs);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  will-change: transform, opacity;
}

.hero-eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--ignit-red);
}

body.loaded .hero-eyebrow {
  animation: revealWord 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* TÍTULO */
.impact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-hero);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text-primary);
  position: relative;
  z-index: 2;
  line-height: 0.95;
}

.impact-text .line {
  display: block;
  overflow: hidden;
}

.impact-text .word {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

body.loaded .impact-text .word {
  animation: wipeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.loaded .impact-text .line:nth-child(1) .word { animation-delay: 0.45s; }
body.loaded .impact-text .line:nth-child(2) .word { animation-delay: 0.58s; }
body.loaded .impact-text .line:nth-child(3) .word { animation-delay: 0.71s; }

/* SUBTEXTO — línea que conecta la marca con el origen volcánico de Canarias */
.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  max-width: 420px;
  margin-top: var(--sp-4);
  font-family: sans-serif;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}

body.loaded .hero-sub {
  animation: revealWord 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

/* CTA HERO */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.hero-cta {
  opacity: 0;
  transform: translateY(24px);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-full);
  background: var(--ignit-red);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-xs);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: var(--shadow-btn);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  will-change: transform, opacity;
}

body.loaded .hero-cta {
  animation: revealWord 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

.hero-cta:hover {
  background: var(--ignit-red-hov);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hov);
}

.hero-cta:active {
  transform: scale(0.97);
}

.hero-cta-ghost {
  opacity: 0;
  transform: translateY(24px);
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  will-change: transform, opacity;
}

body.loaded .hero-cta-ghost {
  animation: revealWord 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

.hero-cta-ghost:hover {
  background: var(--bg-glass-hov);
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.hero-cta-ghost:active {
  transform: scale(0.97);
}

/* SCROLL INDICATOR */
.scroll-indicator {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  color: var(--text-primary);
  transition: opacity var(--t-fast);
  will-change: opacity;
}

body.loaded .scroll-indicator {
  animation: fadeInUp 0.6s ease 1.3s forwards;
}

.scroll-indicator svg {
  animation: bounceDown 2.4s ease infinite;
  opacity: 0.35;
  display: block;
}

.scroll-indicator:hover svg {
  opacity: 0.75;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes revealWord {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wipeUp {
  to { transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bump {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.35); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50%  { box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-10deg); }
  75%       { transform: rotate(10deg); }
}


/* ============================================================
   INTRO — Manifesto
   ============================================================ */

.intro {
  background: var(--bg-primary);
  padding: var(--sp-9) var(--sp-5);
  position: relative;
  z-index: var(--z-base);
  border-bottom: 1px solid var(--border-subtle);
}

.intro-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  z-index: 2;
}

.intro-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 5px;
  color: var(--ignit-red);
  text-transform: uppercase;
  font-weight: 600;
  opacity: 1;
  margin-top: 0;
}

.intro-line-1 {
  font-size: var(--text-2xl);
  letter-spacing: 6px;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}

.intro-line-2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 4px;
  color: var(--text-primary);
  font-weight: 900;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
}


/* ============================================================
   BRAND STORY — Homepage section
   ============================================================ */

.brand-story {
  background: var(--bg-primary);
  padding: var(--sp-10) var(--sp-5);
  position: relative;
  z-index: var(--z-base);
  border-bottom: 1px solid var(--border-subtle);
}

.brand-story-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--sp-9);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.brand-story-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.brand-story-media img,
.brand-story-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-story-content {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.brand-story-layout .brand-story-content {
  text-align: left;
  align-items: flex-start;
  max-width: none;
  margin: 0;
}

@media (max-width: 760px) {
  .brand-story-layout {
    grid-template-columns: 1fr;
  }

  .brand-story-media {
    max-width: 280px;
    margin: 0 auto;
  }

  .brand-story-layout .brand-story-content {
    text-align: center;
    align-items: center;
  }
}

.brand-story-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 5px;
  color: var(--ignit-red);
  text-transform: uppercase;
  font-weight: 600;
}

.brand-story-text {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
}

.brand-story-text em {
  font-style: italic;
  color: var(--text-primary);
}

.brand-story-signature {
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-2);
}


/* ============================================================
   NEWSLETTER — Homepage section
   ============================================================ */

.newsletter {
  background:
    linear-gradient(rgba(5, 5, 5, 0.78), rgba(5, 5, 5, 0.82)),
    url("../assets/img/index.webp") center 20% / cover no-repeat;
  padding: var(--sp-10) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}

.newsletter-content {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.newsletter-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 5px;
  color: var(--ignit-red);
  text-transform: uppercase;
  font-weight: 600;
}

.newsletter-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  line-height: 1.4;
}

.newsletter-form {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  max-width: 420px;
  margin-top: var(--sp-2);
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
}

.newsletter-input::placeholder {
  color: var(--text-muted);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--ignit-red);
}

.newsletter-btn {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-md);
  border: none;
  background: var(--ignit-red);
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-btn);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hov);
}

.newsletter-optin {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  cursor: pointer;
  text-align: left;
  max-width: 420px;
}

.newsletter-optin input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.newsletter-optin input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--t-fast), background var(--t-fast);
}

.newsletter-optin input[type="checkbox"]:checked {
  background: var(--ignit-red-25);
  border-color: var(--ignit-red);
}

.newsletter-optin input[type="checkbox"]:checked::before {
  transform: translateX(16px);
  background: var(--ignit-red);
}

.newsletter-optin span {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 500px) {
  .newsletter-form {
    flex-direction: column;
  }
}


/* ============================================================
   ATHLETE PROOF — Homepage section
   Reutiliza el mismo patrón visual que ambassador.html
   (.proof-grid / .proof-card / .video-control), copiado aquí en vez
   de cargar ambassadorstyle.css entero porque ese archivo redefine
   .hero-cta / .hero-bg-img / .hero-content para SU propio hero y
   chocaría con el hero real de la home.
   ============================================================ */

.athlete-proof {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-8);
}

.proof-title {
  font-size: var(--text-xs);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.proof-title::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ignit-red);
  flex-shrink: 0;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.proof-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 9 / 16;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition:
    transform 0.45s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
    border-color var(--t-fast);
}

.proof-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  border-color: var(--border-strong);
}

.proof-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity var(--t-base);
  background: var(--bg-secondary);
}

.proof-card.playing video,
.proof-card:hover video {
  opacity: 1;
}

.proof-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 2;
  transition: opacity var(--t-fast);
}

.proof-overlay p {
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: lowercase;
  margin: 0;
}

.video-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  z-index: 3;
  transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0;
  box-shadow: none;
  margin-top: 0;
}

.video-control:hover {
  background: rgba(255,255,255,0.15);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: none;
}

.proof-card.playing .video-control {
  opacity: 0;
}

.proof-card.playing:hover .video-control {
  opacity: 1;
}

@media (max-width: 768px) {
  .athlete-proof {
    padding: var(--sp-8) var(--sp-4);
  }

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


/* ============================================================
   AMBASSADOR — Homepage section
   ============================================================ */

.ambassador {
  position: relative;
  overflow: hidden;
  height: 480px;
  background: var(--bg-secondary);
  z-index: 0;
}

.ambassador-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ambassador-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: brightness(0.7);
  transition: transform var(--t-slow);
}

.ambassador:hover .ambassador-img img {
  transform: scale(1.03);
}

/* Gradiente de abajo hacia arriba — integra el texto con la imagen */
.ambassador-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 5, 5, 0.96) 0%,
    rgba(5, 5, 5, 0.6) 40%,
    rgba(5, 5, 5, 0.15) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.ambassador-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-11) var(--sp-8) var(--sp-9);
  max-width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ambassador-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 5px;
  color: var(--ignit-red);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  opacity: 1;
  margin-top: 0;
}

.ambassador-content h2 {
  font-size: clamp(1.8rem, 3.5vw, var(--text-3xl));
  letter-spacing: 2px;
  line-height: 1.1;
  font-weight: 700;
  max-width: 520px;
}

.ambassador-content p {
  margin-top: var(--sp-3);
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  font-size: var(--text-sm);
  opacity: 1;
  max-width: 420px;
}

.ambassador-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-7);
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--text-primary);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.ambassador-btn:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.ambassador-btn:active {
  transform: scale(0.97);
}

.section-divider {
  display: none;
}


/* ============================================================
   PRODUTOS — Sección
   ============================================================ */

.products {
  padding: var(--sp-10) var(--sp-3) var(--sp-13);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-9);
  background: var(--bg-primary);
  position: relative;
}

.products::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}


/* ============================================================
   CATEGORY LABEL — Editorial
   ============================================================ */

.category {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  position: relative;
}

.category h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--text-xs);
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--sp-7);
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.category h2::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ignit-red);
  flex-shrink: 0;
}

/* Mobile-first: carousel por defecto */
.product-grid {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: var(--sp-2);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.product-grid::-webkit-scrollbar {
  display: none;
}

.product-card {
  min-width: 78%;
  max-width: none;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Desktop: grid 2 columnas */
@media (min-width: 769px) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
    overflow-x: visible;
    padding-bottom: 0;
    max-width: 560px;
  }

  .product-card {
    min-width: 0;
    max-width: none;
    scroll-snap-align: none;
    flex-shrink: 1;
  }
}

/* Desktop grande: grid 4 columnas */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
  }
}


/* ============================================================
   PRODUCT CARD — Editorial full-image
   La fotografía ES la tarjeta. Texto superpuesto con gradiente.
   ============================================================ */

.product-card {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  scroll-snap-align: center;
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--t-fast);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Badge de producto agotado */
.product-card-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 3;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.product-card.sold-out .product-card-img img {
  filter: grayscale(0.6);
  opacity: 0.7;
}

/* FAVORITOS EN LA TARJETA — corazón, esquina superior derecha. La tarjeta
   entera es un <a>, así que el click se detiene por JS (preventDefault +
   stopPropagation) para no navegar al producto al marcar/desmarcar.
   Overrides explícitos de margin-top/padding/width porque la regla global
   button{margin-top;padding;width:100%} rompería este botón circular. */
.product-card-wishlist {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 4;
  width: 34px;
  height: 34px;
  margin-top: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.product-card-wishlist:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
}

.product-card-wishlist.active {
  border-color: var(--ignit-red);
  color: var(--ignit-red);
}

.product-card-wishlist.active .product-card-wishlist-icon {
  fill: var(--ignit-red);
}

.product-card-wishlist:disabled {
  opacity: 0.6;
  cursor: default;
}

/* IMAGE WRAPPER — ocupa todo el card */
.product-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-secondary);
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  display: block;
}

.product-card:hover .product-card-img img {
  transform: scale(1.05);
}

/* INFO OVERLAY — superpuesto sobre la imagen */
.product-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-11) var(--sp-5) var(--sp-5);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Nombre + Precio en misma fila */
.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
}

.product-name {
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: 0;
  opacity: 1;
  line-height: 1;
}

.product-desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--sp-1);
  opacity: 1;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

/* Rating (estrellas + nº de reseñas) en las tarjetas del index */
.product-card-rating {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  font-size: var(--text-xs);
}

.product-card-rating-stars {
  color: var(--ignit-red);
  letter-spacing: 1px;
}

.product-card-rating-count {
  color: rgba(255, 255, 255, 0.5);
}

/* PRECIO */
.price {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.price .price-old {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
}

.price .price-sale {
  color: var(--ignit-red);
}

/* BADGE */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ignit-red);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: var(--sp-2);
  opacity: 1;
}

.badge::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ignit-red);
  animation: pulse-dot 2s ease infinite;
}

/* PRODUCT BOTTOM */
.product-bottom {
  display: none;
}

/* BOTÓN VER — usado en related cards */
.add-btn {
  margin-top: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  letter-spacing: 3px;
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-family: var(--font-brand);
  font-weight: 600;
  box-shadow: none;
}

.add-btn:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.add-btn:active {
  transform: scale(0.97);
}

.add-btn.loading {
  pointer-events: none;
  opacity: 0.45;
}

.add-btn.added {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  animation: glowPulse 0.5s ease;
}

/* Dots carrusel — estilo Nike pill */
.carousel-arrows,
.carousel-dots {
  display: flex;
}

.carousel-dots {
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
}

.dot {
  height: 2px;
  width: 20px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  cursor: pointer;
  transition:
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease;
  flex-shrink: 0;
}

.dot.active {
  width: 44px;
  background: var(--text-primary);
}

/* Desktop: ocultar dots (grid, no carousel) */
@media (min-width: 769px) {
  .carousel-dots {
    display: none;
  }
}


/* ============================================================
   TRUST — Grid con iconos
   ============================================================ */

.trust-social-wrap {
  padding: var(--sp-7) var(--sp-5);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.trust {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  z-index: var(--z-base);
  box-sizing: border-box;
}

.trust-item {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-4) var(--sp-6);
  text-align: center;
  transition: background var(--t-fast);
  min-width: 0;
  overflow: hidden;
}

.trust-item:hover {
  background: var(--bg-secondary);
}

.trust-icon {
  color: var(--ignit-red);
  margin-bottom: var(--sp-1);
  flex-shrink: 0;
}

.trust-item:hover .trust-icon {
  color: var(--ignit-red);
}

.trust-item strong {
  color: var(--text-primary);
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 700;
}

.trust-item p {
  margin-top: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  opacity: 1;
  line-height: 1.5;
}


/* ============================================================
   SOCIAL PROOF
   ============================================================ */

.social-proof {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5);
  text-align: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  position: relative;
  z-index: 2;
}

.social-proof p {
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 1;
  margin: 0;
}

.social-proof p strong {
  color: var(--text-primary);
  font-weight: 700;
}

#athlete-count {
  color: var(--ignit-red);
}


/* ============================================================
   REVEAL — scroll animation
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  position: relative;
  z-index: var(--z-base);
  border-top: 1px solid var(--border-subtle);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: var(--sp-6);
}

.footer-logo img {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.footer-logo img:hover {
  opacity: 1;
  transform: scale(1.04);
}

.footer-brand h2 {
  font-size: var(--text-xs);
  letter-spacing: 8px;
  opacity: 0.25;
  font-weight: 400;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.footer-links a:hover {
  opacity: 1;
  color: var(--text-primary);
}

.footer-social {
  display: flex;
  gap: var(--sp-5);
}

.footer-social a img {
  width: 20px;
  height: 20px;
  opacity: 0.4;
  transition: opacity var(--t-fast), transform var(--t-fast);
  filter: brightness(0) invert(1);
}

.footer-social a img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  opacity: 0.25;
  letter-spacing: 1.5px;
}

.footer-rights {
  margin: 0;
  font-size: 10px;
  letter-spacing: 1px;
}

.footer-legal {
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
  opacity: 0.25;
  text-align: center;
  margin-top: var(--sp-2);
}


/* ============================================================
   EMAIL POPUP
   ============================================================ */

.email-popup {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-popup);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
  backdrop-filter: blur(4px);
}

.email-popup.active {
  opacity: 1;
  pointer-events: all;
}

.popup-box {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: var(--sp-9) var(--sp-6) var(--sp-7);
  border-radius: var(--radius-xl);
  text-align: center;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
}

.popup-logo {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  width: 80px;
  opacity: 0.8;
}

.popup-box h2 {
  font-size: 2.4rem;
  letter-spacing: 4px;
  margin-top: var(--sp-6);
}

.popup-box p {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  opacity: 0.5;
  letter-spacing: 1px;
}

.popup-box input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--font-brand);
}

.popup-box input:focus {
  border-color: var(--border-red-focus);
  box-shadow: 0 0 0 3px var(--ignit-red-12);
}

.popup-box input::placeholder {
  color: var(--text-ghost);
}

.popup-box button {
  margin-top: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  background: var(--ignit-red);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  box-shadow: none;
}

.popup-box button:hover {
  background: var(--ignit-red-hov);
  transform: translateY(-1px);
  box-shadow: none;
}

.popup-box button.loading {
  opacity: 0.55;
  pointer-events: none;
}

.popup-box button.success {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.close-popup {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity var(--t-fast);
  border-radius: 50%;
}

.close-popup:hover {
  opacity: 0.9;
}

.discount-code {
  display: none;
  margin-top: var(--sp-4);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 2px;
  font-size: var(--text-sm);
}

.discount-code.show {
  display: block;
}

.discount-code span {
  color: var(--ignit-red);
  font-weight: 800;
}

#emailForm.hidden {
  display: none;
}

.copied-btn {
  margin-top: var(--sp-3);
  display: block;
  width: 100%;
  padding: var(--sp-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg-primary);
  font-weight: 700;
  letter-spacing: 1px;
  cursor: default;
  font-family: var(--font-brand);
}


/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: var(--sp-7);
  left: 50%;
  transform: translateX(-50%) translateY(var(--sp-3));
  background: var(--bg-card);
  color: var(--text-primary);
  padding: var(--sp-3) var(--sp-7);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  letter-spacing: 1px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: var(--z-loader);
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-brand);
}

.toast.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.toast--error {
  border-color: var(--border-red);
}


/* ============================================================
   MOBILE — max-width: 768px
   ============================================================ */

@media (max-width: 768px) {

  .desktop-media { display: none; }
  .mobile-media  { display: block; }

  .hero-loop-fallback:not([hidden]) {
    display: block;
  }

  .hero-video-play-btn:not([hidden]) {
    display: flex;
  }

  /* HERO */
  .hero {
    padding: 0 0 var(--sp-10) var(--sp-5);
  }

  /* INTRO */
  .intro {
    padding: var(--sp-8) var(--sp-5);
  }

  .intro-line-1 {
    font-size: var(--text-xl);
    letter-spacing: 4px;
  }

  .intro-line-2 {
    font-size: var(--text-3xl);
    letter-spacing: 2px;
  }

  /* AMBASSADOR — imagen más corta en móvil, texto en la parte inferior */
  .ambassador {
    height: 380px;
  }

  .ambassador-content {
    padding: var(--sp-8) var(--sp-5) var(--sp-7);
  }

  .ambassador-content h2 {
    font-size: var(--text-2xl);
  }

  .ambassador-content p {
    display: none;
  }

  /* PRODUCTS */
  .products {
    padding: var(--sp-7) var(--sp-4) var(--sp-7);
    gap: var(--sp-9);
  }

  /* CATEGORY */
  .category h2 {
    font-size: var(--text-xs);
    letter-spacing: 5px;
  }

  /* PRODUCT GRID — mobile overrides */
  .product-card:hover {
    transform: none;
  }

  /* Solo nombre y precio — ocultar todo lo demás */

}
/* end @media 768px */


/* ============================================================
   PÁGINAS LEGALES — Privacy, Términos, Devoluciones, Envíos, Cookies
   ============================================================ */

.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 176px var(--sp-8) var(--sp-13);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: var(--sp-9);
  transition: color var(--t-fast);
}

.legal-back:hover {
  color: var(--text-primary);
}

.legal-title {
  font-size: var(--text-3xl);
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: var(--sp-10);
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.legal-block {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-block h2 {
  font-size: var(--text-xs);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ignit-red);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}

.legal-block p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: var(--sp-3);
}

.legal-block p:last-child {
  margin-bottom: 0;
}

.legal-block ul,
.legal-block ol {
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.legal-block li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-block a {
  color: var(--ignit-red);
  text-decoration: none;
  transition: opacity var(--t-fast);
}

.legal-block a:hover {
  opacity: 0.75;
}

@media (max-width: 768px) {
  .legal-container {
    padding: calc(var(--sp-11) + 36px) var(--sp-5) var(--sp-11);
  }

  .legal-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-8);
  }

  .legal-content {
    gap: var(--sp-6);
  }

  .legal-block {
    padding-bottom: var(--sp-6);
  }
}

/* ============================================================
   CONTACTO
   ============================================================ */

.legal-container.contact-page {
  max-width: 960px;
  padding-bottom: var(--sp-10);
}

.contact-intro {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--sp-10);
}

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

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6);
}

.contact-card h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.contact-card p {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
}

.contact-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.contact-card-btn:hover {
  background: var(--bg-glass-hov);
  border-color: var(--ignit-red);
  color: var(--ignit-red);
  transform: translateY(-2px);
}

.contact-social {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-subtle);
}

.contact-social p {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-social-icons {
  display: flex;
  gap: var(--sp-4);
}

.contact-social-icons img {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  transition: opacity var(--t-fast);
}

.contact-social-icons a:hover img {
  opacity: 1;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ACCESIBILIDAD — Skip link + screen-reader only
   ============================================================ */
.skip-link {
  position: fixed;
  top: -9999px;
  left: var(--sp-4);
  background: var(--ignit-red);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--radius-base) var(--radius-base);
}
.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Legal pages — hide cart icon */
.legal-page .cart-icon {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}