/* ============================================================
   IGNIT — HOME EXPERIENCIAL
   Estética: industrial · deportiva · tecnológica · premium.
   Todo sale de tokens.css. Prefijos: hm (global) hh (hero)
   hf (manifiesto) ha (armería) ht (team) he (enciende).
   ============================================================ */

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

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body.hm {
  margin: 0; background: var(--hm-bg); color: var(--text-primary);
  font-family: var(--font-display); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ignit-red); color: #fff; padding: 10px 16px; z-index: 100000; }
.skip-link:focus { left: 8px; top: 8px; }

#navbar-container { position: relative; z-index: var(--z-nav); }

:root {
  --gut: clamp(20px, 4vw, 64px); --line: rgba(255,255,255,.12);
  --hm-bg: #f4f2ed;      /* hueso: fondo claro premium */
  --hm-bg-hi: #fbfaf7;
  --hm-bg-lo: #ebe8e2;
}

/* ---------- Utilidades ---------- */
.hm-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-5);
  font-size: 11px; letter-spacing: 5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
}
.hm-eyebrow i { width: 28px; height: 1px; background: var(--ignit-red); }

.hm-h2 {
  margin: 0; font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.03em;
  font-size: clamp(2rem, 5.6vw, 4.8rem);
}

.hm-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 30px; border-radius: var(--radius-full); border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
  transition: box-shadow var(--t-base), border-color var(--t-base), background var(--t-fast);
  will-change: transform;
}
.hm-btn > * { position: relative; z-index: 2; pointer-events: none; }
.hm-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.3), transparent 55%);
  transition: opacity var(--t-base);
}
.hm-btn:hover::before { opacity: 1; }
.hm-btn--red { background: var(--ignit-red); box-shadow: var(--shadow-btn); }
.hm-btn--red:hover { box-shadow: var(--shadow-btn-hov); }
.hm-btn--ghost { background: rgba(255,255,255,.04); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hm-btn--ghost:hover { border-color: var(--ignit-red); }
.hm-btn--xl { padding: 24px 52px; font-size: var(--text-sm); }
.hm-btn svg { transition: transform var(--t-base); }
.hm-btn:hover svg { transform: translateX(5px); }
.hm-btn:focus-visible, .ha-arrow:focus-visible, .ha-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hm-grain {
  position: fixed; inset: -50%; z-index: 99980; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes hm-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

/* ---------- Cursor / progreso / raíl ---------- */
.hm-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 100001; display: none; }
@media (hover: hover) and (pointer: fine) {
  .hm-cursor { display: block; }
  body.hm, body.hm a, body.hm button { cursor: none; }
}
.hm-cursor-dot, .hm-cursor-ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.hm-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.hm-cursor-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center;
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1), margin .35s cubic-bezier(.22,1,.36,1), background .3s, border-color .3s;
}
.hm-cursor-ring em { font-style: normal; font-size: 9px; letter-spacing: 2px; font-weight: 700; opacity: 0; transition: opacity .25s; }
.hm-cursor.is-link .hm-cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--ignit-red-25); border-color: var(--ignit-red); }
.hm-cursor.is-drag .hm-cursor-ring, .hm-cursor.is-view .hm-cursor-ring, .hm-cursor.is-zoom .hm-cursor-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(5,5,5,.5); border-color: #fff; }
.hm-cursor.is-drag .hm-cursor-ring em, .hm-cursor.is-view .hm-cursor-ring em, .hm-cursor.is-zoom .hm-cursor-ring em { opacity: 1; }
.hm-cursor.is-drag em::after { content: "ARRASTRA"; }
.hm-cursor.is-view em::after { content: "VER"; }
.hm-cursor.is-zoom em::after { content: "ZOOM"; }
.hm-cursor.is-down .hm-cursor-ring { scale: .86; }

.hm-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 100000; pointer-events: none; }
.hm-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--ignit-red); }

.hm-rail { position: fixed; z-index: 900; left: clamp(10px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 14px; }
@media (min-width: 1100px) { .hm-rail { display: flex; } }
.hm-rail a { display: flex; align-items: center; gap: 12px; color: var(--text-ghost); text-decoration: none; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.hm-rail i { display: block; width: 14px; height: 1px; background: currentColor; transition: width var(--t-base), background var(--t-base); }
.hm-rail span { opacity: 0; transform: translateX(-6px); transition: opacity var(--t-base), transform var(--t-base); white-space: nowrap; }
.hm-rail a:hover span { opacity: 1; transform: none; }
.hm-rail a.is-active { color: #fff; }
.hm-rail a.is-active i { width: 30px; background: var(--ignit-red); }

/* ============================================================
   01 · IGNICIÓN (hero)
   ============================================================ */
.hh {
  position: relative; min-height: 100vh; min-height: calc(100svh - var(--ck, 0px)); overflow: hidden; isolation: isolate;
  display: grid; align-items: end; align-content: end; padding: 110px var(--gut) 0;
  background: radial-gradient(ellipse 70% 60% at 65% 55%, #1a0407 0%, #050505 70%);
}
.hh-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, #000 10%, transparent 75%);
}

/* La chispa: una línea roja que se abre y enciende la escena */
.hh-spark {
  position: absolute; left: 0; top: 50%; width: 100%; height: 2px; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ignit-red) 20%, #fff 50%, var(--ignit-red) 80%, transparent);
  box-shadow: 0 0 40px 6px var(--ignit-red-60); transform: scaleX(0); opacity: 0;
}
.hm-ready .hh-spark { display: none; }

.hh-title {
  position: relative; z-index: 3; margin: 0; margin-top: -6vh; align-self: center; justify-self: start;
  display: grid; line-height: .8; font-weight: 900; letter-spacing: -.055em; text-transform: uppercase;
  font-size: clamp(3.4rem, min(16vw, 20vh), 16rem);   /* respaldo para navegadores sin svh */
  font-size: clamp(3.4rem, min(16vw, calc((100svh - var(--ck, 0px)) * .2)), 16rem); user-select: none; pointer-events: none;
}
.hh-line { display: block; overflow: hidden; padding: .02em .06em .06em 0; }
.hh-split { display: inline-block; will-change: transform; }
.hh-char { display: inline-block; will-change: transform; }
.hh-line--outline .hh-split { letter-spacing: -.03em; }
.hh-line--outline .hh-char { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
.hh-line--red { color: var(--ignit-red); }

.hh-stage { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
#hh-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.hh-gl-on #hh-gl { opacity: 1; }
.hh-fallback { display: none; position: absolute; inset: 0; }
.hh-fallback img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; opacity: .8; }
.hh-fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.7), transparent 60%), linear-gradient(0deg, rgba(5,5,5,.85), transparent 45%); }
.no-gl .hh-fallback { display: block; }

.hh-foot {
  position: relative; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding-bottom: clamp(24px, 4.5vh, 48px);
}
.hh-sub { margin: 0; max-width: 36ch; color: var(--text-secondary); font-size: clamp(.85rem, 1.15vw, 1rem); line-height: 1.65; font-weight: 500; }
.hh-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hh-meta { position: absolute; z-index: 5; right: var(--gut); top: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 10px; letter-spacing: 4px; color: var(--text-ghost); font-weight: 700; }
.hh-scroll { position: absolute; z-index: 5; left: 50%; bottom: 10px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font-size: 9px; letter-spacing: 5px; color: var(--text-ghost); }
.hh-scroll i { width: 1px; height: 30px; background: linear-gradient(var(--ignit-red), transparent); transform-origin: top; animation: hh-scroll 2.2s ease-in-out infinite; }
@keyframes hh-scroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Divisor ---------- */
.hm-marquee { overflow: hidden; padding: clamp(28px, 5vw, 64px) 0; border-block: 0; background: #050505; }
.hm-marquee-track { display: flex; width: max-content; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); will-change: transform; }
.hm-marquee-track span { font-weight: 900; font-size: clamp(2.2rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.hm-marquee-track span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
.hm-marquee-track b { width: 12px; height: 12px; background: var(--ignit-red); transform: rotate(45deg); flex: none; }

/* ============================================================
   02 · MANIFIESTO
   ============================================================ */
.hf { padding: clamp(60px, 9vw, 130px) var(--gut) clamp(90px, 15vw, 210px); max-width: 1500px; margin: 0 auto; }
.hf-text { margin: 0; font-weight: 900; font-size: clamp(1.7rem, 4.5vw, 4rem); line-height: 1.14; letter-spacing: -.025em; max-width: 26ch; }
.hf-text .w { display: inline-block; opacity: .13; }
.hf-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.hf-sign { margin: 0; color: var(--text-muted); letter-spacing: 3px; font-size: var(--text-sm); }
.hf-specs { display: flex; gap: clamp(24px, 5vw, 72px); margin: 0; }
.hf-specs dt { font-size: 10px; letter-spacing: 4px; color: var(--text-ghost); text-transform: uppercase; margin-bottom: 6px; }
.hf-specs dd { margin: 0; font-size: var(--text-xl); font-weight: 900; }

/* ============================================================
   03 · ARMERÍA (ring pseudo-3D)
   ============================================================ */
.ha { position: relative; }
.ha-pin { position: relative; height: 100vh; height: calc(100svh - var(--ck, 0px)); overflow: hidden; background: radial-gradient(ellipse 75% 60% at 55% 50%, #ffffff 0%, var(--hm-bg-hi) 45%, var(--hm-bg-lo) 100%); }
.ha-stage { position: absolute; inset: 0; touch-action: pan-y; }
#ha-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ha-head { position: absolute; z-index: 3; top: clamp(26px, 5vh, 56px); left: var(--gut); pointer-events: none; transition: opacity .5s; }
.ha-head .hm-h2 { font-size: clamp(1.5rem, 3.6vw, 3rem); }
.is-focus .ha-head { opacity: 0; }

.ha-card {
  position: absolute; z-index: 4; left: var(--gut); bottom: clamp(74px, 11vh, 110px); width: min(410px, calc(100vw - 2 * var(--gut)));
  padding: 26px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.ha-idx { margin: 0; font-size: 11px; letter-spacing: 4px; color: var(--text-muted); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.ha-idx span { color: #fff; }
.ha-idx em { font-style: normal; margin-left: auto; color: var(--ignit-red); letter-spacing: 4px; }
.ha-name { margin: 14px 0 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.9rem, 4vw, 3.2rem); min-height: 1.05em; }
.ha-desc { margin: 12px 0 16px; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; min-height: 3.2em; }
.ha-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ha-price { font-size: var(--text-2xl); font-weight: 900; }
.ha-badge { font-size: 10px; letter-spacing: 2px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-red); background: var(--ignit-red-20); }
.ha-badge:empty { display: none; }
.ha-badge.is-out { background: rgba(255,255,255,.08); border-color: var(--border-strong); color: var(--text-muted); }
.ha-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ha-btns .hm-btn { padding: 15px 22px; letter-spacing: 3px; }
/* En modo inspección la ficha baja a un lado y el producto ocupa el centro */
.is-focus .ha-card { transform: translateX(0); }

.ha-nav { position: absolute; z-index: 4; right: var(--gut); bottom: clamp(74px, 11vh, 110px); display: flex; align-items: center; gap: 16px; }
.ha-arrow { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.ha-arrow:hover { background: var(--ignit-red); border-color: var(--ignit-red); transform: scale(1.07); }
.ha-dots { display: flex; gap: 8px; }
.ha-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.25); cursor: pointer; transition: all var(--t-base); }
.ha-dots button.is-active { width: 28px; background: var(--ignit-red); }
.ha-hint { position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; font-size: 10px; letter-spacing: 4px; color: var(--text-ghost); text-transform: uppercase; white-space: nowrap; transition: opacity .4s; }

.ha-list[hidden] { display: none; }
.ha-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: var(--gut); }
.ha-list a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
.ha-list img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; }
.ha-list div { padding: 16px; display: flex; justify-content: space-between; font-weight: 700; }
.no-gl .ha-pin { display: none; }
.no-gl .ha-list { display: grid; }

/* ============================================================
   04 · TEAM
   ============================================================ */
.ht { padding: clamp(56px, 7vw, 110px) var(--gut) clamp(80px, 12vw, 180px); max-width: 1600px; margin: 0 auto; }
.ht-head { margin-bottom: clamp(32px, 6vw, 80px); }
.ht-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.5vw, 22px); perspective: 1400px; }
.ht-card {
  color: #fff; text-decoration: none;
  position: relative; display: block; aspect-ratio: 3 / 4.3; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); transform-style: preserve-3d; will-change: transform;
  transition: border-color var(--t-base);
}
.ht-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.7); transform: scale(1.06); transition: filter .6s, transform .8s cubic-bezier(.22,1,.36,1); }
.ht-card:hover, .ht-card.is-playing { border-color: var(--ignit-red); }
.ht-card:hover video, .ht-card.is-playing video { filter: none; transform: scale(1); }
.ht-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.92)); }
.ht-info { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 4px; transform: translateZ(40px); }
.ht-info span { font-size: 11px; color: var(--text-secondary); }
.ht-info b { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 900; letter-spacing: -.02em; }

/* ============================================================
   05 · ENCIENDE
   ============================================================ */
.he { padding: clamp(40px, 6vw, 80px) var(--gut) clamp(90px, 14vw, 200px); max-width: 1600px; margin: 0 auto; }
.he-specs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 clamp(80px, 12vw, 180px); border-block: 1px solid var(--line); }
.he-specs > div { padding: clamp(20px, 3vw, 40px) clamp(14px, 2vw, 32px); border-right: 1px solid var(--line); }
.he-specs > div:last-child { border-right: 0; }
.he-specs dt { font-size: clamp(2.6rem, 5.4vw, 5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.he-specs dt small { font-size: .38em; color: var(--ignit-red); margin-left: 3px; }
.he-specs dd { margin: 14px 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; }
.he-cta { text-align: center; }
.he-cta .hm-eyebrow { justify-content: center; }
.he-title { margin: 0 0 clamp(32px, 5vw, 60px); display: grid; justify-items: center; font-size: clamp(3.2rem, 13vw, 12rem); font-weight: 900; letter-spacing: -.05em; line-height: .84; text-transform: uppercase; }
.he-line { display: block; overflow: hidden; padding: .02em .05em .06em; }
.he-line--red { color: var(--ignit-red); }

/* ---------- Footer ---------- */
.hm-footer { display: grid; justify-items: center; gap: 22px; padding: 52px 20px 40px; border-top: 1px solid var(--border); }
.hm-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.hm-footer-links a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); transition: color var(--t-fast); }
.hm-footer-links a:hover { color: #fff; }
.hm-footer-social { display: flex; gap: 18px; }
.hm-footer-social img { opacity: .7; transition: opacity var(--t-fast), transform var(--t-fast); }
.hm-footer-social a:hover img { opacity: 1; transform: translateY(-3px); }
.hm-footer-copy { margin: 0; font-size: 11px; letter-spacing: 3px; color: var(--text-ghost); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .ht-grid { grid-template-columns: repeat(2, 1fr); }
  .he-specs { grid-template-columns: repeat(2, 1fr); }
  .he-specs > div:nth-child(2) { border-right: 0; }
  .he-specs > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .hh { padding-top: 96px; }
  .hh { align-content: end; }
  .hh-title { align-self: end; margin: 0 0 14px; font-size: clamp(3.6rem, 19vw, 7rem); }
  .hh-title .hh-char { text-shadow: 0 2px 22px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.35); }
  .hh-meta, .hh-scroll, .hh-sub { display: none; }
  .hh-foot { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 72px; }
  .hm-ck .hh-tag { display: none; }
  .hm-ck .hh-title { font-size: clamp(3rem, 15.5vw, 6rem); }
  .hh-actions { width: 100%; flex-wrap: nowrap; gap: 10px; }
  .hh-actions .hm-btn { flex: 1; padding: 14px 8px; letter-spacing: 2px; font-size: 10px; white-space: nowrap; }
  .hh-actions .hm-btn svg { display: none; }
  .hh-fallback img { object-position: 30% 10%; }
  .ha-head { top: 22px; max-width: calc(100% - 140px); }
  .ha-head .hm-h2 { font-size: 1.25rem; }
  .ha-card { padding: 16px; bottom: 74px; }
  .ha-desc { display: none; }
  .ha-idx { font-size: 10px; }
  .ha-name { font-size: 1.7rem; margin-top: 8px; }
  .ha-row { margin-bottom: 12px; }
  .ha-btns { flex-wrap: nowrap; }
  .ha-btns .hm-btn { flex: 1; }
  .ha-nav { right: auto; left: 50%; transform: translateX(-50%); bottom: 22px; }
  .ha-arrow { width: 42px; height: 42px; }
  .ha-hint { display: none; }
  .ha-btns .hm-btn { padding: 13px 8px; letter-spacing: 2px; font-size: 10px; white-space: nowrap; }
  .ha-btns .hm-btn svg { display: none; }
}
@media (max-width: 480px) {
  .ht-grid { grid-template-columns: 1fr 1fr; }
  .hf-specs { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-scroll i { animation: none; }
}

/* Con WebGL el título se dibuja como cristal dentro del canvas; las letras del DOM solo reservan su sitio */
html.gl-hero.hh-chrome:not(.no-gl) .hh-title .hh-char { opacity: 0; }
html.gl-hero.hh-outline:not(.no-gl) .hh-line--outline .hh-char { opacity: 0; }

/* ---------- Tema claro: todo lo que va tras el rótulo negro ---------- */
.hm-light {
  --text-primary: #0c0c0f; --text-secondary: #2b2d33; --text-muted: #5c5f67; --text-ghost: rgba(12,12,15,.42);
  --line: rgba(12,12,15,.14); --border: rgba(12,12,15,.10); --border-strong: rgba(12,12,15,.2); --bg-card: #ffffff;
  color: var(--text-primary);
}
.hf, .ht, .he { position: relative; }
.hm-light .hm-btn--ghost { background: rgba(12,12,15,.04); border-color: rgba(12,12,15,.22); color: #0c0c0f; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hm-light .hm-btn--ghost:hover { border-color: var(--ignit-red); }
.ha-card { background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.6)); box-shadow: 0 24px 60px rgba(40,30,20,.14), inset 0 1px 0 #fff; }
.ha-idx span { color: #0c0c0f; }
.ha-badge { color: #7a0b14; }
.ha-badge.is-out { background: rgba(12,12,15,.06); color: var(--text-muted); }
.ha-arrow { color: #0c0c0f; background: rgba(255,255,255,.7); }
.ha-arrow:hover { color: #fff; }
.ha-dots button { background: rgba(12,12,15,.2); }
.ha-dots button.is-active { background: var(--ignit-red); }
.he-specs dt small { color: var(--ignit-red); }
.he-line--red { color: var(--ignit-red); }
.hm-footer { background: #050505; border-top: 0; }
/* raíl y cursor se adaptan al fondo (oscuro en el hero, claro después) */
.hm-rail { mix-blend-mode: difference; }
.hm-cursor { mix-blend-mode: difference; }

/* ---------- Armería premium ---------- */
.ha-pin { background: radial-gradient(ellipse 80% 65% at 56% 46%, #ffffff 0%, #f8f7f3 38%, #efede7 72%, #e7e4dd 100%); }
.ha-head .hm-h2 { font-size: clamp(1.3rem, 2.8vw, 2.4rem); letter-spacing: -.01em; }
.ha-card { border: 1px solid rgba(12,12,15,.07); border-radius: 22px; background: linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.68)); box-shadow: 0 30px 70px -20px rgba(28,24,18,.22), 0 2px 0 rgba(255,255,255,.9) inset; padding: 30px; }
.ha-idx { letter-spacing: 5px; }
.ha-idx em { color: var(--text-muted); }
.ha-name { letter-spacing: -.04em; }
.ha-desc { color: var(--text-muted); }
.ha-badge { border-color: rgba(12,12,15,.14); background: rgba(12,12,15,.05); color: #0c0c0f; }
.ha-badge.is-out { color: var(--text-muted); }
.ha-btns .hm-btn--red { background: #0c0c0f; box-shadow: 0 14px 30px -8px rgba(12,12,15,.4); }
.ha-btns .hm-btn--red:hover { background: var(--ignit-red); box-shadow: 0 14px 34px -8px rgba(193,18,31,.5); }
.ha-arrow { border-color: rgba(12,12,15,.12); box-shadow: 0 10px 24px -10px rgba(28,24,18,.3); }
.ha-arrow:hover { background: #0c0c0f; border-color: #0c0c0f; }
.ha-dots button.is-active { background: #0c0c0f; }

/* ---------- Barra superior: oculta por ahora (solo logo centrado). Banner de cookies, región y carrito siguen en su sitio ---------- */
.announcement-bar, .navbar { display: none !important; }
.hm-logo { position: fixed; top: clamp(22px, 4vh, 40px); left: 50%; z-index: 1001; display: block; line-height: 0; mix-blend-mode: difference; will-change: transform; }
.hm-logo img { height: clamp(34px, 4.8vh, 48px); width: auto; display: block; }

/* ---------- Inspección: fichas técnicas con flechas ---------- */
.ha-specs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ha-specs-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
.ha-specs-lines path { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 600; stroke-dashoffset: 600; transition: opacity .4s, stroke-dashoffset .7s cubic-bezier(.22,1,.36,1); }
.ha-specs.is-open .ha-specs-lines path { opacity: .9; stroke-dashoffset: 0; }
.ha-specs-chips { position: absolute; inset: 0; }
.ha-spec { position: absolute; left: 0; top: 0; max-width: 240px; padding: 9px 13px 10px; border-radius: 14px; background: rgba(255,255,255,.82); border: 1px solid rgba(12,12,15,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 34px -14px rgba(28,24,18,.35); opacity: 0; transition: opacity .45s, filter .45s; filter: blur(4px); will-change: transform; }
.ha-specs.is-open .ha-spec { opacity: 1; filter: none; }
.ha-spec b { display: block; font-size: 9px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.ha-spec span { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; color: #0c0c0f; }
.ha-spec-dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(12,12,15,.55), 0 0 0 5px rgba(255,255,255,.35); opacity: 0; transition: opacity .4s; mix-blend-mode: normal; }
.ha-specs.is-open .ha-spec-dot { opacity: 1; }
@media (max-width: 720px) {
  .ha-spec { max-width: 132px; padding: 6px 9px 7px; border-radius: 11px; }
  .ha-spec b { font-size: 7.5px; letter-spacing: 1.8px; margin-bottom: 2px; }
  .ha-spec span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .ha-spec, .ha-specs-lines path { transition: none; } }

.ha-spec b em { display: none; font-style: normal; }
.ha-spec-dot { font-size: 0; }
@media (max-width: 720px) {
  .ha-spec b em { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; background: #0c0c0f; color: #fff; font-size: 8px; letter-spacing: 0; vertical-align: 1px; }
  .ha-spec-dot { width: 20px; height: 20px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #0c0c0f; box-shadow: 0 0 0 1px rgba(12,12,15,.55), 0 0 0 4px rgba(255,255,255,.4); }
  /* inspeccionando en móvil: la ficha se compacta (nombre + botones) para dejar sitio a las fichas técnicas */
  .is-focus .ha-card { padding: 14px 16px; }
  .is-focus .ha-idx, .is-focus .ha-row { display: none; }
  .is-focus .ha-name { font-size: 1.1rem; margin-top: 0; margin-bottom: 8px; min-height: 0; }
  .is-focus .ha-btns .hm-btn { padding: 11px 8px; }
}

/* ---------- Armería: refinamiento final ---------- */
/* Fondo: hueso / gris cálido muy claro (sin blanco de showroom) */
.ha-pin { background: radial-gradient(ellipse 80% 65% at 56% 46%, #f0ede6 0%, #e9e5dd 42%, #e0dbd1 76%, #d8d3c8 100%); }

/* Ficha de producto integrada en la escena: sin tarjeta, como una interfaz tipográfica con filetes */
.ha-card { background: none; border: 0; border-left: 1px solid rgba(12,12,15,.24); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 2px 0 2px 24px; width: min(390px, calc(100vw - 2 * var(--gut))); }
.ha-idx { margin-bottom: 2px; }
.ha-name { font-size: clamp(1.9rem, 3.3vw, 3rem); }
.ha-desc { max-width: 36ch; margin: 10px 0 14px; }
.ha-row { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid rgba(12,12,15,.16); }
.ha-price { font-size: 1.55rem; }
.ha-badge { background: none; border: 1px solid rgba(12,12,15,.3); }
.ha-btns { gap: 18px; align-items: center; }
.ha-btns .hm-btn--red { padding: 14px 22px; box-shadow: none; }
.ha-btns .hm-btn--red:hover { box-shadow: none; }
.ha-btns .hm-btn--ghost { background: none; border: 0; border-bottom: 1px solid rgba(12,12,15,.55); border-radius: 0; padding: 12px 2px; color: #0c0c0f; }
.ha-btns .hm-btn--ghost:hover { border-bottom-color: var(--ignit-red); }
@media (max-width: 720px) {
  /* en móvil la información se apoya en la escena con un degradado cálido, no con una tarjeta */
  .ha-card { left: 0; right: 0; width: auto; padding: 26px var(--gut) 14px; border-left: 0; background: linear-gradient(180deg, rgba(232,228,220,0) 0%, rgba(232,228,220,.93) 34%, rgba(232,228,220,.96) 100%); bottom: 64px; }
  .ha-row { margin-bottom: 14px; padding-top: 10px; }
  .ha-btns { gap: 14px; }
  .ha-btns .hm-btn--red { padding: 13px 18px; }
  .is-focus .ha-card { padding: 22px var(--gut) 12px; }
}

/* ---------- Armería: la ficha, las flechas y la ayuda caen sobre el suelo de caucho negro → texto claro ---------- */
.ha-card { border-left-color: rgba(255,255,255,.3); color: #fff; --text-primary: #fff; --text-secondary: rgba(255,255,255,.72); --text-muted: rgba(255,255,255,.58); --text-ghost: rgba(255,255,255,.4); }
.ha-row { border-top-color: rgba(255,255,255,.18); }
.ha-idx span, .ha-name, .ha-price { color: #fff; }
.ha-idx em, .ha-desc { color: rgba(255,255,255,.6); }
.ha-badge { background: none; border-color: rgba(255,255,255,.36); color: #fff; }
.ha-badge.is-out { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.22); }
.ha-btns .hm-btn--red { background: #fff; color: #0c0c0f; box-shadow: none; }
.ha-btns .hm-btn--red:hover { background: var(--ignit-red); color: #fff; }
.ha-btns .hm-btn--ghost { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.ha-btns .hm-btn--ghost:hover { border-bottom-color: var(--ignit-red); }
.ha-arrow { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); box-shadow: none; }
.ha-arrow:hover { background: #fff; color: #0c0c0f; border-color: #fff; }
.ha-dots button { background: rgba(255,255,255,.3); }
.ha-dots button.is-active { background: #fff; }
.ha-hint { color: rgba(255,255,255,.45); }
@media (max-width: 720px) {
  .ha-card { background: linear-gradient(180deg, rgba(6,6,7,0) 0%, rgba(6,6,7,.88) 34%, rgba(6,6,7,.94) 100%); }
}

/* ---------- Armería: fondo blanco ---------- */
.ha-pin { background: radial-gradient(ellipse 80% 65% at 56% 46%, #ffffff 0%, #fcfcfb 46%, #f4f4f2 100%); }

/* ---------- Armería: fondo rojo ---------- */
.ha-pin { background: radial-gradient(ellipse 82% 68% at 56% 44%, #d11626 0%, #b8111d 46%, #8f0c17 100%); border-top: 0; }
.ha-head .hm-h2, .ha-head .hm-eyebrow { color: #fff; }
.ha-head .hm-eyebrow i { background: #fff; }
.ha .hm-eyebrow { color: rgba(255,255,255,.8); }
/* mientras se está sobre el rojo, el logo, el raíl y el cursor van en blanco normal (la inversión los volvería cian) */
.hm-on-red .hm-logo, .hm-on-red .hm-rail, .hm-on-red .hm-cursor { mix-blend-mode: normal; }
.ha-hint { color: rgba(255,255,255,.62); }
.ha-arrow { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.28); }
.ha-dots button { background: rgba(255,255,255,.4); }

/* ---------- Armería: sin resplandor; el fondo es un rojo sombreado ---------- */
.ha-pin { background:
  radial-gradient(ellipse 95% 85% at 50% 48%, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 100%),
  linear-gradient(180deg, #3d060b 0%, #55080f 48%, #2f0509 100%); }

/* ---------- Armería: sala oscura con focos ---------- */
.ha-pin { background: radial-gradient(ellipse 90% 80% at 50% 50%, #121214 0%, #0a0a0c 70%, #060607 100%); }

/* ---------- Armería: barra mínima inferior (sin tarjeta) ---------- */
.ha-card { left: var(--gut); right: calc(var(--gut) + 290px); bottom: clamp(52px, 8vh, 72px); width: auto; padding: 0; border: 0; border-left: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; }
.ha-name, .ha-desc { display: none; }
.is-focus .ha-name { display: block; order: -1; margin: 0; min-height: 0; font-family: 'Big Shoulders Display', 'Anton', sans-serif; font-weight: 900; font-size: 1.6rem; letter-spacing: 4px; }
.ha-idx { margin: 0; font-size: 11px; letter-spacing: 4px; white-space: nowrap; }
.ha-idx em { margin-left: 8px; color: rgba(255,255,255,.55); }
.ha-idx em::before { content: '·'; margin-right: 8px; }
.ha-row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; }
.ha-price { font-size: 1.7rem; letter-spacing: -.02em; }
.ha-badge { padding: 0; border: 0; background: none; font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,.6); }
.ha-btns { margin-left: auto; gap: 22px; flex-wrap: nowrap; align-items: center; }
.ha-btns .hm-btn--red { padding: 14px 26px; }
.ha-btns .hm-btn--ghost { background: none; border: 0; padding: 14px 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.35); letter-spacing: 3px; }
.ha-nav { bottom: clamp(52px, 8vh, 72px); }
@media (max-width: 960px) { .ha-card { right: var(--gut); bottom: 96px; flex-wrap: wrap; gap: 14px 18px; } .ha-btns { margin-left: 0; } }
@media (max-width: 720px) {
  .ha-card { left: 0; right: 0; bottom: 84px; padding: 0 var(--gut); background: none; display: grid; grid-template-columns: 1fr auto; gap: 12px 12px; align-items: center; }
  .ha-idx { grid-column: 1; font-size: 10px; letter-spacing: 3px; }
  .ha-row { grid-column: 2; justify-self: end; gap: 10px; }
  .ha-price { font-size: 1.35rem; }
  .ha-badge { white-space: nowrap; letter-spacing: 2px; font-size: 9px; }
  .ha-idx em { display: none; }
  .ha-row { border: 0; }
  .ha-nav { bottom: 20px; right: auto; left: 50%; transform: translateX(-50%); }
  .ha-btns { grid-column: 1 / -1; margin: 0; gap: 14px; }
  .ha-btns .hm-btn--red { flex: 1; justify-content: center; padding: 14px 10px; }
  .ha-btns .hm-btn--ghost { flex: 0 0 auto; }
  .is-focus .ha-card { padding: 0 var(--gut); }
  .is-focus .ha-idx, .is-focus .ha-row { display: none; }
  .is-focus .ha-name { grid-column: 1 / -1; font-size: 1.3rem; }
}

/* Armería: precio y botón principal en rojo de marca */
.ha .ha-price { color: #e11d2b; }
.ha .ha-btns .hm-btn--red { background: #c1121f; color: #fff; box-shadow: 0 10px 30px -10px rgba(225,29,43,.55); }
.ha .ha-btns .hm-btn--red:hover { background: #e11d2b; box-shadow: 0 12px 34px -8px rgba(225,29,43,.75); }

/* Inspeccionar: enlace limpio, sin vidrio ni fondo al pasar el cursor */
.ha .ha-btns .hm-btn--ghost, .ha .ha-btns .hm-btn--ghost:hover, .ha .ha-btns .hm-btn--ghost:focus-visible { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transform: none; }
.ha .ha-btns .hm-btn--ghost::before, .ha .ha-btns .hm-btn--ghost::after { display: none; }
.ha .ha-btns .hm-btn--ghost:hover { border-bottom-color: #e11d2b; color: #fff; }

/* ============================================================
   PULIDO PREMIUM — Hero · Manifiesto · Athletes · Cierre · Sistema
   (la Armería no se toca: todo va acotado a sus propias secciones)
   Sistema: Montserrat 900 para titulares · Big Shoulders 900 para atletas/cifras
   Rojo IGNIT solo como acento: una línea, una palabra, un CTA.
   ============================================================ */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.35,1); --f-ath: 'Big Shoulders Display', 'Anton', 'Impact', sans-serif; }

/* ---------- Eyebrow: una sola voz en todas las secciones ---------- */
.hh .hm-eyebrow, .hf .hm-eyebrow, .ht .hm-eyebrow, .he .hm-eyebrow { font-size: 11px; letter-spacing: 6px; }
.hh .hm-eyebrow i, .hf .hm-eyebrow i, .ht .hm-eyebrow i, .he .hm-eyebrow i { width: 36px; transform-origin: left; }

/* ---------- Sistema: cursor / progreso / raíl ---------- */
.hm-cursor.is-link .hm-cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255,255,255,.14); border-color: #fff; }
.hm-cursor-ring { border-color: rgba(255,255,255,.7); }
.hm-progress { height: 1px; }
.hm-progress span { background: #fff; }
.hm-rail a.is-active i { width: 34px; }
/* la Armería conserva exactamente su cursor y su barra de progreso */
.hm-on-red .hm-cursor.is-link .hm-cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--ignit-red-25); border-color: var(--ignit-red); }
.hm-on-red .hm-cursor-ring { border-color: rgba(255,255,255,.5); }
.hm-on-red .hm-progress { height: 2px; }
.hm-on-red .hm-progress span { background: var(--ignit-red); }
.hm-rail a { transition: color .5s var(--ease-out); }
.hm-rail i { transition: width .6s var(--ease-out), background .4s; }

/* ---------- Botones: sin vidrio, sin brillo radial. Relleno que barre ---------- */
.hh .hm-btn::before, .he .hm-btn::before { background: #fff; opacity: 1; transform: translateY(101%); transition: transform .55s var(--ease-out); border-radius: inherit; }
.hh .hm-btn--red:hover::before, .he .hm-btn--red:hover::before { transform: translateY(0); }
.hh .hm-btn--red, .he .hm-btn--red { transition: color .45s var(--ease-out), box-shadow .5s; box-shadow: none; }
.hh .hm-btn--red:hover, .he .hm-btn--red:hover { color: #0c0c0f; box-shadow: none; }
.hh .hm-btn:active, .he .hm-btn:active { scale: .97; }
.hh .hm-btn--ghost { background: none; border: 0; border-radius: 0; padding: 17px 2px; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.hh .hm-btn--ghost::before { display: none; }
.hh .hm-btn--ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: rgba(255,255,255,.4); transform-origin: right; transition: transform .6s var(--ease-out); }
.hh .hm-btn--ghost:hover::after { background: #fff; animation: hm-underline .7s var(--ease-out); }
@keyframes hm-underline { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ---------- 01 · HERO: chispa fina y controlada ---------- */
.hh-spark { height: 1px; background: linear-gradient(90deg, transparent, rgba(193,18,31,.9) 18%, #fff 50%, rgba(193,18,31,.9) 82%, transparent); box-shadow: 0 0 14px 1px rgba(193,18,31,.45); }
.hh-line { padding-bottom: .09em; }
.hh-meta { letter-spacing: 5px; }
.hh-scroll i { background: linear-gradient(#fff, transparent); }
.hh-foot .hm-eyebrow { margin-bottom: 18px; }

/* ---------- Divisor: rótulo de capítulo ---------- */
.hm-marquee { padding: clamp(22px, 3.6vw, 48px) 0; }
.hm-marquee-track span { font-size: clamp(2rem, 5.4vw, 4.6rem); }

/* ---------- 02 · MANIFIESTO ---------- */
.hf {
  --fg: #f4f2ed; --fg2: rgba(244,242,237,.55); --fg3: rgba(244,242,237,.2);
  --text-primary: var(--fg); --text-muted: var(--fg2); --text-ghost: var(--fg3); --line: var(--fg3);
  position: relative; max-width: none; margin: 0; isolation: isolate; color: var(--fg); overflow: hidden;
  padding: clamp(110px, 16vw, 240px) max(var(--gut), calc((100vw - 1500px) / 2 + var(--gut))) clamp(120px, 16vw, 240px);
}
.hf-bg { position: absolute; inset: 0; z-index: -1; background: #050505; will-change: opacity; }
.hf-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--ignit-red); transform: scaleX(0); transform-origin: left; }
.hf-in { max-width: 1500px; margin: 0 auto; }
.hf .w { display: inline-block; opacity: .16; will-change: opacity; }
.hf-a { margin: 0; font-weight: 900; font-size: clamp(2.1rem, 5.8vw, 5.8rem); line-height: 1.03; letter-spacing: -.04em; max-width: 17ch; }
.hf-b { margin: clamp(170px, 24vw, 380px) 0 0; font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 9.6vw, 9.8rem); line-height: .9; letter-spacing: -.05em; }
.hf-bl { display: block; overflow: hidden; padding: .03em 0 .1em; }
.hf-bl > span { display: inline-block; will-change: transform; }
.hf-bl.o > span { color: var(--fg3); }   /* la frase tranquila: tono bajo (sin contorno: la fuente variable deja trazos internos) */
.hf-b em { position: relative; font-style: normal; }
.hf-b em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .055em; background: var(--ignit-red); transform: scaleX(var(--u, 0)); transform-origin: left; }
.hf-c { margin: clamp(100px, 13vw, 210px) 0 0 min(42%, 560px); max-width: 30ch; font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.85rem); line-height: 1.5; letter-spacing: -.01em; }
.hf-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-top: clamp(100px, 12vw, 180px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--fg3); }
.hf-specs { display: flex; gap: clamp(28px, 6vw, 100px); margin: 0; }
.hf-specs > div { display: flex; flex-direction: column-reverse; gap: 12px; }
.hf .hf-specs dd { margin: 0; font-family: var(--f-ath); font-weight: 900; font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: .86; letter-spacing: .01em; text-transform: uppercase; }
.hf .hf-specs dt { margin: 0; font-size: 10px; letter-spacing: 5px; color: var(--fg2); text-transform: uppercase; font-weight: 700; }
.hf-sign { margin: 0; font-size: 11px; letter-spacing: 4px; color: var(--fg2); text-transform: uppercase; font-weight: 700; }

/* ---------- 04 · ATHLETES ---------- */
.ht { padding-top: clamp(90px, 11vw, 170px); padding-bottom: clamp(130px, 16vw, 240px); }
.ht-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(48px, 7vw, 100px); }
.ht-head .hm-h2 { font-size: clamp(2.6rem, 8vw, 7.6rem); line-height: .88; letter-spacing: -.05em; }
.ht-lede { margin: 0; max-width: 26ch; font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--text-muted); font-weight: 500; padding-bottom: .4em; }
.ht-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 20px); transition: grid-template-columns .9s var(--ease-out); }
@media (min-width: 961px) and (hover: hover) {
  .ht-grid:has(.ht-card:nth-child(1):hover) { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
  .ht-grid:has(.ht-card:nth-child(2):hover) { grid-template-columns: 1fr 1.7fr 1fr 1fr; }
  .ht-grid:has(.ht-card:nth-child(3):hover) { grid-template-columns: 1fr 1fr 1.7fr 1fr; }
  .ht-grid:has(.ht-card:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr 1.7fr; }
  .ht-grid:hover .ht-card:not(:hover) { opacity: .55; }
}
.ht-card { aspect-ratio: auto; height: clamp(440px, 62vw, 760px); border: 0; background: #111; transition: opacity .6s var(--ease-out); }
.ht-card:hover, .ht-card.is-playing { border-color: transparent; }
.ht-card video { filter: grayscale(1) contrast(1.08) brightness(.62); transition: filter .8s var(--ease-out), transform 1.2s var(--ease-out); }
.ht-card::after { background: linear-gradient(180deg, transparent 45%, rgba(5,5,5,.95)); }
.ht-info { left: clamp(16px, 1.8vw, 28px); right: clamp(16px, 1.8vw, 28px); bottom: clamp(18px, 2vw, 30px); gap: 6px; transform: none; }
.ht-info em { font-style: normal; font-size: 11px; letter-spacing: 5px; font-weight: 700; color: rgba(255,255,255,.6); }
.ht-info b { font-family: var(--f-ath); font-weight: 900; font-size: clamp(2.6rem, 5vw, 5rem); line-height: .86; letter-spacing: .01em; position: relative; width: fit-content; }
.ht-info b::after { content: ""; position: absolute; left: 0; bottom: -8px; height: 2px; width: 100%; background: var(--ignit-red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.ht-card:hover .ht-info b::after, .ht-card.is-playing .ht-info b::after { transform: scaleX(1); }
.ht-info span { font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.72); transform: translateY(6px); opacity: 0; transition: transform .7s var(--ease-out), opacity .7s; }
.ht-card:hover .ht-info span, .ht-card.is-playing .ht-info span { transform: none; opacity: 1; }

/* ---------- 05 · CIERRE: el gran final (negro, continúa en el footer) ---------- */
.he {
  --fg: #f4f2ed; --fg2: rgba(244,242,237,.56); --fg3: rgba(244,242,237,.18);
  --text-primary: var(--fg); --text-muted: var(--fg2); --text-ghost: var(--fg3); --line: var(--fg3);
  position: relative; z-index: 2; max-width: none; margin: calc(-1 * clamp(28px, 4vw, 60px)) 0 0; background: #050505; color: var(--fg);
  border-radius: clamp(28px, 4vw, 60px) clamp(28px, 4vw, 60px) 0 0;
  padding: clamp(110px, 14vw, 210px) max(var(--gut), calc((100vw - 1600px) / 2 + var(--gut))) clamp(120px, 15vw, 230px);
}
.he-in { max-width: 1600px; margin: 0 auto; }
.he-rows { margin: 0 0 clamp(150px, 20vw, 320px); border-top: 1px solid var(--fg3); }
.he-rows > div { display: grid; grid-template-columns: minmax(140px, 26%) 1fr; align-items: center; gap: 24px; padding: clamp(22px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--fg3); transition: padding-left .7s var(--ease-out); }
@media (hover: hover) { .he-rows > div:hover { padding-left: clamp(10px, 1.4vw, 24px); } }
.he-rows dt { font-family: var(--f-ath); font-weight: 900; font-size: clamp(3.4rem, 8vw, 8rem); line-height: .82; letter-spacing: .005em; white-space: nowrap; }
.he-rows dt small { font-size: .42em; color: var(--ignit-red); margin-left: 4px; letter-spacing: 0; }
.he-rows dd { margin: 0; display: grid; gap: 6px; }
.he-rows dd b { font-size: clamp(.95rem, 1.5vw, 1.35rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.he-rows dd span { color: var(--fg2); font-size: clamp(.85rem, 1.1vw, 1rem); }
.he-cta { text-align: center; }
.he-title { font-size: clamp(3.2rem, 14.4vw, 14rem); line-height: .82; letter-spacing: -.055em; margin: 0; }
.he-line--red { color: var(--ignit-red); }
.he-fire { display: block; width: min(100%, 1100px); height: 1px; margin: clamp(40px, 6vw, 84px) auto clamp(40px, 5vw, 70px); background: linear-gradient(90deg, transparent, var(--ignit-red) 18%, #fff 50%, var(--ignit-red) 82%, transparent); transform: scaleX(0); opacity: .9; }
.he .hm-btn--xl { padding: 26px clamp(36px, 5vw, 64px); }
.hm-footer { border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- MÓVIL: composición propia ---------- */
@media (max-width: 720px) {
  .hh .hm-eyebrow, .hf .hm-eyebrow, .ht .hm-eyebrow, .he .hm-eyebrow { font-size: 10px; letter-spacing: 4px; white-space: nowrap; }
  .hh-foot .hm-eyebrow { margin-bottom: 4px; }
  .hf { padding-top: 96px; padding-bottom: 110px; }
  .hf-a { font-size: clamp(2rem, 9.4vw, 3rem); max-width: none; }
  .hf-b { margin-top: 96px; font-size: clamp(2rem, 10.4vw, 3.6rem); letter-spacing: -.045em; }
  .hf-c { margin-left: 0; max-width: 26ch; margin-top: 84px; font-size: 1.15rem; }
  .hf-foot { grid-template-columns: 1fr; gap: 36px; margin-top: 84px; }
  .hf-specs { justify-content: space-between; gap: 12px; }
  .hf .hf-specs dd { font-size: clamp(2rem, 9.6vw, 3rem); }
  .hf-sign { order: 2; }

  .ht { padding-left: 0; padding-right: 0; padding-top: 96px; padding-bottom: 110px; }
  .ht-head { padding: 0 var(--gut); margin-bottom: 40px; }
  .ht-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 8px; scroll-padding-inline: var(--gut); -webkit-overflow-scrolling: touch; scrollbar-width: none; transition: none; perspective: none; }
  .ht-grid::-webkit-scrollbar { display: none; }
  .ht-card { flex: 0 0 78vw; height: min(118vw, 66svh); scroll-snap-align: start; }
  .ht-card video { filter: grayscale(1) contrast(1.08) brightness(.66); }
  .ht-card.is-playing video { filter: none; }
  .ht-info span { opacity: 1; transform: none; }
  .ht-info b { font-size: 3.4rem; }

  .he { padding-top: 96px; padding-bottom: 110px; }
  .he-rows { margin-bottom: 130px; }
  .he-rows > div { grid-template-columns: minmax(118px, 36%) 1fr; gap: 14px; padding: 20px 0; }
  .he-rows dt { font-size: clamp(3rem, 15vw, 4.6rem); }
  .he-title { font-size: clamp(2.4rem, 13.4vw, 7rem); }
  .he-line { white-space: nowrap; }
  .he .hm-btn--xl { width: 100%; padding: 22px 16px; font-size: 11px; letter-spacing: 3px; }
  .he .hm-btn--xl svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hh .hm-btn::before, .he .hm-btn::before, .ht-grid, .ht-card, .ht-info span, .ht-info b::after { transition: none; }
  .hf .w { opacity: 1; }
}

/* ---------- Ronda 2: raíl rojo · vídeo del manifiesto · athletes sin póster ---------- */
.hm-rail { mix-blend-mode: normal; }
.hm-on-red .hm-rail { mix-blend-mode: normal; }
.hm-rail i { background: var(--ignit-red); opacity: .5; transition: width .6s var(--ease-out), opacity .4s; }
.hm-rail a.is-active i { background: var(--ignit-red); opacity: 1; }
.hm-rail a, .hm-rail a.is-active { color: #fff; }
.hm-on-light .hm-rail a, .hm-on-light .hm-rail a.is-active { color: #0c0c0f; }

.hf-video { position: relative; left: 50%; width: 100vw; margin: clamp(110px, 14vw, 220px) 0 0 -50vw; height: clamp(340px, 70vh, 760px); overflow: hidden; background: #050505; }
.hf-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hf-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.25), transparent 30%, transparent 65%, rgba(5,5,5,.45)); pointer-events: none; }
.hf-c { font-family: var(--f-ath); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 6.6vw, 6.6rem); line-height: .9; letter-spacing: .01em; max-width: 14ch; margin: clamp(90px, 11vw, 170px) 0 0 min(42%, 560px); }
.ht-card video { background: #111; }
@media (max-width: 720px) {
  .hf-video { height: min(124vw, 74svh); margin-top: 84px; }
  .hf-c { font-size: clamp(2.6rem, 14vw, 4.4rem); margin-left: 0; max-width: 12ch; margin-top: 72px; }
}

/* ---------- Manifiesto: el vídeo a su tamaño real, con el lema como título ---------- */
.hf-video { position: relative; left: auto; width: min(100vw, 1920px); height: auto; aspect-ratio: 16 / 9; margin: clamp(90px, 12vw, 190px) 0 0 calc(50% - min(100vw, 1920px) / 2); overflow: hidden; background: #050505; }
.hf-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: auto; transform: none; }
.hf-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.25) 34%, transparent 60%); pointer-events: none; }
.hf-title { position: absolute; z-index: 2; left: clamp(20px, 4vw, 72px); right: clamp(20px, 4vw, 72px); bottom: clamp(22px, 4.4vw, 72px); margin: 0; color: #f4f2ed; font-family: var(--f-ath); font-weight: 900; text-transform: uppercase; font-size: clamp(2.3rem, 6.4vw, 7rem); line-height: .9; letter-spacing: .01em; }
.hf-title .hf-bl { padding: .03em 0 .08em; }
@media (max-width: 768px) {
  .hf-video { width: min(100vw, 720px); aspect-ratio: 9 / 16; margin-top: 84px; margin-left: calc(50% - min(100vw, 720px) / 2); height: auto; }
  .hf-title { font-size: clamp(2.6rem, 14.6vw, 4.6rem); left: 20px; right: 20px; bottom: 28px; }
}

/* Athletes: más aire entre la barra roja del nombre y el Instagram */
.ht-info b { margin-bottom: 16px; }
.ht-info b::after { bottom: -9px; }

/* Athletes: vídeos algo más luminosos */
.ht-card video { filter: grayscale(1) contrast(1.08) brightness(.78); }
@media (max-width: 720px) { .ht-card video { filter: grayscale(1) contrast(1.08) brightness(.8); } }


/* ============================================================
   ÚLTIMA PASADA — dirección artística
   ============================================================ */

/* ---------- Hero: más autoridad tipográfica, un solo acento rojo ---------- */
.hh-grid { display: none; }
.hh-title { font-size: clamp(3.4rem, min(17vw, 22vh), 18rem); font-size: clamp(3.4rem, min(17vw, calc((100svh - var(--ck, 0px)) * .225)), 18rem); }
.hh-foot { padding-right: 68px; }
.hh .hm-btn--red { background: #f4f2ed; color: #0c0c0f; }
.hh .hm-btn--red::before { background: var(--ignit-red); }
.hh .hm-btn--red:hover { color: #fff; }
.hh-meta { opacity: .8; }

/* ---------- Cambio de capítulo (sustituye al ticker) ---------- */
.hm-chapter { position: relative; overflow: hidden; background: #050505; padding: clamp(70px, 10vw, 160px) 0 clamp(60px, 9vw, 140px); }
.hm-chapter-l { white-space: nowrap; line-height: .8; font-weight: 900; letter-spacing: -.06em; text-transform: uppercase; font-size: clamp(4.4rem, 17vw, 18rem); color: #f4f2ed; }
.hm-chapter-l + .hm-chapter-l { margin-top: clamp(10px, 1.6vw, 26px); color: rgba(244,242,237,.2); }
.hm-chapter-l > span { display: inline-block; will-change: transform; }

/* ---------- Manifiesto: vídeo con tratamiento de campaña · datos como archivo ---------- */
.hf-video video { filter: contrast(1.07) saturate(.86); }
.hf-specs { display: grid; grid-template-columns: repeat(3, auto); gap: 0; }
.hf-specs > div { padding: 0 clamp(20px, 4vw, 64px); border-left: 1px solid var(--fg3); }
.hf-specs > div:first-child { padding-left: 0; border-left: 0; }
.hf .hf-specs dt { letter-spacing: 6px; }
@media (max-width: 720px) {
  .hm-chapter-l { font-size: clamp(3.6rem, 23vw, 7rem); }
  .hf-specs > div { padding: 0 12px; }
}

/* ---------- Armería (sin tocar su concepto): rótulos editoriales en vez de pastillas ---------- */
@media (min-width: 721px) {
  .ha-spec { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; max-width: 220px; }
  .ha-spec b { color: rgba(244,242,237,.55); letter-spacing: 4px; }
  .ha-spec span { color: #f4f2ed; font-size: 14px; }
  .ha-spec-dot { width: 7px; height: 7px; box-shadow: none; background: #f4f2ed; }
}
@media (max-width: 720px) {
  .ha-spec { background: rgba(5,5,5,.78); border: 1px solid rgba(244,242,237,.22); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .ha-spec b { color: rgba(244,242,237,.6); }
  .ha-spec span { color: #f4f2ed; }
  .ha-spec b em { background: #f4f2ed; color: #0c0c0f; }
  .ha-spec-dot { background: #f4f2ed; color: #0c0c0f; box-shadow: 0 0 0 1px rgba(5,5,5,.6), 0 0 0 4px rgba(244,242,237,.3); }
  .ha-hint { display: block; top: 110px; bottom: auto; left: var(--gut); transform: none; letter-spacing: 3px; font-size: 9px; color: rgba(244,242,237,.55); }
  .is-focus .ha-hint { display: none; }
}

/* ---------- Athletes: una declaración, no una rejilla ---------- */
.ht-head .hm-h2 { font-size: clamp(2.8rem, 9.4vw, 9.6rem); letter-spacing: -.055em; }
.ht-grid { align-items: start; }
@media (min-width: 961px) { .ht-card { height: clamp(440px, 40vw, 640px); } }
.ht-info span { opacity: .8; transform: none; }

/* ---------- Cierre: el gran final ocupa toda la pantalla ---------- */
.he-cta { min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.he-fire { margin: 0 auto clamp(34px, 5vw, 64px); }
@media (max-width: 720px) { .he-cta { min-height: 78svh; } }
.ht-lede { margin-left: auto; }
@media (max-width: 720px) { .ht-lede { margin-left: 0; } }
@media (max-width: 720px) { .hh-title { font-size: clamp(3.6rem, 23vw, 8rem); } .hm-ck .hh-title { font-size: clamp(3rem, 17vw, 6rem); } }
.he-title { margin: 0 0 clamp(44px, 5.5vw, 80px); }
@media (max-width: 720px) { .he-title { margin-bottom: 52px; font-size: clamp(2.6rem, 15.4vw, 7rem); } }

/* Manifiesto: el vídeo se ve tal cual (sin filtro); solo un velo suave tras el título para que se lea */
.hf-video video { filter: none; }
.hf-video::after { background: linear-gradient(0deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,0) 38%); }


/* ---------- Armería: salida del recorrido · producto agotado ---------- */
.ha-skip { position: absolute; z-index: 4; top: clamp(78px, 11vh, 104px); right: var(--gut); display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; background: none; border: 0; border-bottom: 1px solid rgba(244,242,237,.3); color: rgba(244,242,237,.62); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; transition: color .4s var(--ease-out), border-color .4s var(--ease-out), opacity .4s; }
.ha-skip:hover { color: #f4f2ed; border-bottom-color: #f4f2ed; }
.ha-skip svg { transition: transform .4s var(--ease-out); }
.ha-skip:hover svg { transform: translateY(3px); }
.is-focus .ha-skip { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .ha-skip { top: 108px; right: var(--gut); letter-spacing: 3px; font-size: 9px; } }
.ha .ha-btns .hm-btn--red.is-out { background: transparent; color: #f4f2ed; box-shadow: inset 0 0 0 1px rgba(244,242,237,.38); }
.ha .ha-btns .hm-btn--red.is-out:hover { background: #f4f2ed; color: #0c0c0f; box-shadow: none; }
@media (min-width: 721px) { .ha-skip { right: auto; left: var(--gut); top: clamp(104px, 14vh, 136px); } }


/* ============================================================
   FICHA (talla y tejido) · lista de avisos · pie de página
   ============================================================ */
.hk { padding: clamp(90px, 11vw, 170px) var(--gut) clamp(120px, 15vw, 220px); max-width: 1600px; margin: 0 auto; position: relative; }
.hk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(44px, 6vw, 84px); }
.hk-head .hm-h2 { font-size: clamp(2.4rem, 7vw, 7rem); line-height: .9; letter-spacing: -.05em; }
.hk-all { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--text-primary); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; border-bottom: 1px solid var(--text-primary); transition: gap .5s var(--ease-out), color .4s, border-color .4s; }
.hk-all:hover { gap: 20px; color: var(--ignit-red); border-color: var(--ignit-red); }
.hk-table { border-top: 1px solid var(--line); }
.hk-row { display: grid; grid-template-columns: 56px minmax(150px, 1.3fr) 1.5fr 110px 2.1fr 120px; align-items: baseline; gap: 20px; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line); color: var(--text-primary); text-decoration: none; transition: padding-left .7s var(--ease-out), color .4s; }
@media (hover: hover) { .hk-row:hover { padding-left: clamp(10px, 1.4vw, 22px); } .hk-row:hover .hk-name { color: var(--ignit-red); } }
.hk-n { font-size: 11px; font-weight: 700; letter-spacing: 4px; color: var(--text-ghost); }
.hk-name { font-family: var(--f-ath); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: .95; letter-spacing: .02em; transition: color .4s; }
.hk-fit, .hk-m { font-size: clamp(.82rem, 1vw, .95rem); line-height: 1.45; color: var(--text-muted); font-weight: 500; }
.hk-w { font-family: var(--f-ath); font-weight: 900; font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: .95; }
.hk-w small { margin-left: 4px; font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; color: var(--text-muted); font-weight: 700; }
.hk-p { text-align: right; font-weight: 900; font-size: 1rem; }
.hk-p em { display: block; margin-top: 4px; font-style: normal; font-size: 9px; letter-spacing: 3px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.hk-note { margin: clamp(28px, 3vw, 44px) 0 0; max-width: 70ch; font-size: clamp(.85rem, 1vw, .95rem); line-height: 1.6; color: var(--text-muted); }

.he-news { max-width: 560px; margin: clamp(60px, 8vw, 120px) auto 0; text-align: center; }
.he-news-t { margin: 0 0 22px; font-size: 11px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--fg2); line-height: 1.7; }
.he-news-f { display: flex; gap: 10px; }
.he-news-f input[type=email] { flex: 1; min-width: 0; padding: 18px 20px; background: transparent; border: 1px solid var(--fg3); border-radius: 999px; color: var(--fg); font: 500 14px var(--font-display); outline: none; transition: border-color .4s; }
.he-news-f input[type=email]::placeholder { color: var(--fg2); }
.he-news-f input[type=email]:focus { border-color: var(--fg); }
.he-news-f .hm-btn { padding: 16px 28px; }
.he-news-c { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--fg2); cursor: pointer; }
.he-news-c input { accent-color: var(--ignit-red); width: 16px; height: 16px; }
.he-news-s { min-height: 1.4em; margin: 14px 0 0; font-size: 12px; letter-spacing: 1px; color: var(--fg); }
.he-news-s.is-bad { color: #ff7d86; }
.ha-badge.is-out { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244,242,237,.4); }

.hm-footer { display: block; padding: clamp(56px, 6vw, 90px) var(--gut) 36px; }
.hm-footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,.1); }
.hm-footer-brand { max-width: 320px; }
.hm-footer-brand p { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.55); }
.hm-footer-cols { display: flex; gap: clamp(36px, 7vw, 110px); flex-wrap: wrap; }
.hm-footer-cols div { display: grid; align-content: start; gap: 12px; }
.hm-footer-cols h3 { margin: 0 0 6px; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.4); }
.hm-footer-cols a { font-size: 14px; color: rgba(255,255,255,.78); text-decoration: none; transition: color .3s; }
.hm-footer-cols a:hover { color: #fff; }
.hm-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; padding-top: 28px; }
.hm-footer-bottom .hm-footer-copy { text-align: right; }

@media (max-width: 960px) {
  .hk-row { grid-template-columns: 40px 1fr auto; row-gap: 6px; }
  .hk-fit { grid-column: 2 / 3; grid-row: 2; }
  .hk-w { grid-column: 3; grid-row: 1; text-align: right; }
  .hk-m { grid-column: 2 / 4; grid-row: 3; }
  .hk-p { grid-column: 3; grid-row: 2; }
}
@media (max-width: 720px) {
  .hk { padding-top: 96px; padding-bottom: 110px; }
  .hk-head { margin-bottom: 40px; }
  .hk-name { font-size: 1.9rem; }
  .he-news-f { flex-direction: column; }
  .he-news-f .hm-btn { width: 100%; }
  .hm-footer-top { flex-direction: column; gap: 36px; }
  .hm-footer-cols { gap: 28px 40px; }
  .hm-footer-bottom { flex-direction: column; align-items: flex-start; }
  .hm-footer-bottom .hm-footer-copy { text-align: left; }
}
.hk-row { grid-template-columns: 56px minmax(270px, 1.5fr) 1.5fr 110px 2.1fr 120px; }
.hk-name { font-size: clamp(1.5rem, 2.3vw, 2.4rem); white-space: nowrap; }
@media (max-width: 960px) { .hk-row { grid-template-columns: 40px 1fr auto; } .hk-name { white-space: normal; } }


/* ============================================================
   NAVEGACIÓN — barra completa
   ============================================================ */
.hm-logo { transition: opacity .5s var(--ease-out) .15s; }
html.hn-on .hm-logo { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease-out), visibility 0s .35s; }

.hn { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; color: #f4f2ed; background: transparent; border-bottom: 1px solid transparent; transition: transform .55s var(--ease-out), background .4s, border-color .4s; }
.hn.is-solid { background: #0a0a0b; border-bottom-color: rgba(244,242,237,.1); }
.hn.is-away:not(.is-menu):not(.is-mega) { transform: translateY(-101%); }
.hn-strip { max-height: 0; overflow: hidden; background: #f4f2ed; color: #0c0c0f; text-align: center; transition: max-height .45s var(--ease-out); }
.hn-strip p { margin: 0; padding: 9px 12px; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.hn.is-solid .hn-strip { max-height: 34px; }
.hn-row { display: flex; align-items: center; height: 64px; padding: 0 var(--gut); }
.hn-burger { display: none; }
.hn-logo { display: block; flex: none; overflow: hidden; max-width: 0; opacity: 0; transition: max-width .55s var(--ease-out), opacity .4s .1s, margin .55s var(--ease-out); }
.hn-logo img { display: block; height: 24px; width: auto; }
.hn.is-solid .hn-logo { max-width: 110px; opacity: 1; margin-right: clamp(20px, 3vw, 44px); }
.hn-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.hn-links a { position: relative; padding: 8px 0; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; color: rgba(244,242,237,.78); transition: color .4s var(--ease-out); }
.hn-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: #f4f2ed; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.hn-links a:hover, .hn-links a[aria-expanded="true"] { color: #f4f2ed; }
.hn-links a:hover::after, .hn-links a[aria-expanded="true"]::after { transform: scaleX(1); }
.hn-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hn-tools > * { position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 50%; color: #f4f2ed; cursor: pointer; transition: background .35s; }
.hn-tools > *:hover { background: rgba(244,242,237,.1); }
.hn-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.hn-count { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ignit-red); color: #fff; font: 700 9px/16px var(--font-display); text-align: center; display: none; }
.hn-links a:focus-visible, .hn-tools > *:focus-visible, .hn-burger:focus-visible, .hn-piece:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 3px; }

/* panel de colección */
.hn-mega { position: absolute; left: 0; right: 0; top: 100%; background: #0a0a0b; border-bottom: 1px solid rgba(244,242,237,.1); }
.hn-mega[hidden] { display: none; }
.hn-mega-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 2vw, 30px); max-width: 1600px; margin: 0 auto; padding: 26px var(--gut) 34px; }
.hn-piece { display: grid; grid-template-rows: auto auto auto; justify-items: start; gap: 6px; color: #f4f2ed; text-decoration: none; }
.hn-thumb { display: grid; place-items: center; width: 100%; height: clamp(120px, 11vw, 168px); margin-bottom: 8px; }
.hn-thumb img { height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .7s var(--ease-out); }
.hn-piece:hover .hn-thumb img { transform: translateY(-5px) scale(1.03); }
.hn-piece b { font-family: var(--f-ath); font-weight: 900; font-size: clamp(1.2rem, 1.7vw, 1.7rem); line-height: .95; letter-spacing: .02em; }
.hn-pr { font-size: 12px; font-weight: 700; color: rgba(244,242,237,.7); }
.hn-pr em { margin-left: 10px; font-style: normal; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(244,242,237,.45); }

/* menú móvil a pantalla completa */
.hn-menu { position: fixed; inset: 0; z-index: 1090; background: #050505; color: #f4f2ed; padding: 92px var(--gut) 36px; overflow-y: auto; }
.hn-menu[hidden] { display: none; }
.hn-menu-links a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(244,242,237,.12); font-size: clamp(2rem, 10.4vw, 3.2rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; text-decoration: none; color: #f4f2ed; }
.hn-menu-t { margin: 36px 0 16px; font-size: 10px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(244,242,237,.5); }
.hn-menu-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.hn-menu .hn-thumb { height: 130px; }
.hn-menu-tools { display: flex; gap: 28px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(244,242,237,.12); }
.hn-menu-tools > * { padding: 0; background: none; border: 0; font: 700 11px var(--font-display); letter-spacing: 4px; text-transform: uppercase; color: #f4f2ed; text-decoration: none; cursor: pointer; }

@media (max-width: 1199px) { .hn-xl { display: none; } }
@media (max-width: 720px) {
  .hn-row { height: 56px; position: relative; }
  .hn-burger { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; padding: 0; background: none; border: 0; color: #f4f2ed; cursor: pointer; }
  .hn-i-close { display: none; }
  .hn.is-menu .hn-i-menu { display: none; }
  .hn.is-menu .hn-i-close { display: block; }
  .hn-links, .hn-search, .hn-account { display: none; }
  .hn-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; max-width: none; }
  .hn.is-solid .hn-logo { max-width: none; }
  .hn-mega { display: none !important; }
  .hn.is-menu { background: #050505; border-bottom-color: transparent; }
  .hn.is-menu .hn-strip { max-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .hn, .hn-strip, .hn-logo, .hn-links a::after, .hn-tools > *, .hn-thumb img { transition: none; } }
.hn-thumb { display: flex; align-items: center; justify-content: center; }
.hn-thumb img { height: auto; width: auto; max-height: 100%; max-width: 100%; }
.hn-menu .hn-thumb { height: 150px; }


/* ============================================================
   COMPRA RÁPIDA
   ============================================================ */
.ha-quick { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; height: 48px; background: none; border: 1px solid rgba(244,242,237,.4); border-radius: 999px; color: #f4f2ed; font: 700 11px var(--font-display); letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s; }
.ha-quick:hover:not(:disabled) { background: #f4f2ed; color: #0c0c0f; border-color: #f4f2ed; }
.ha-quick:disabled { opacity: .3; cursor: not-allowed; }
.ha-quick:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 3px; }
@media (max-width: 720px) { .ha-quick { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; } .ha-quick span { display: none; } }

.qa { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.qa[hidden] { display: none; }
.qa-bg { position: absolute; inset: 0; background: rgba(5,5,5,.78); }
.qa-card { position: relative; width: min(720px, 100%); display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3vw, 36px); background: #0a0a0b; color: #f4f2ed; border: 1px solid rgba(244,242,237,.16); border-radius: 20px; }
.qa-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: #f4f2ed; cursor: pointer; transition: background .3s; }
.qa-x:hover { background: rgba(244,242,237,.1); }
.qa-thumb { display: grid; place-items: center; background: #111113; border-radius: 14px; padding: 14px; }
.qa-thumb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 300px; object-fit: contain; }
.qa-info { display: flex; flex-direction: column; min-width: 0; }
.qa-cat { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(244,242,237,.55); }
.qa-name { margin: 0; font-family: var(--f-ath); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .88; letter-spacing: .02em; }
.qa-price { margin: 12px 0 0; font-size: 1.3rem; font-weight: 900; color: #e11d2b; }
.qa-label { margin: 22px 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(244,242,237,.55); }
.qa-sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.qa-size { height: 46px; background: none; border: 1px solid rgba(244,242,237,.28); border-radius: 10px; color: #f4f2ed; font: 700 12px var(--font-display); letter-spacing: 1px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.qa-size:hover:not(:disabled) { border-color: #f4f2ed; }
.qa-size.is-on { background: #f4f2ed; color: #0c0c0f; border-color: #f4f2ed; }
.qa-size.is-out { opacity: .32; text-decoration: line-through; cursor: not-allowed; }
.qa-size:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 2px; }
.qa-hint { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: rgba(244,242,237,.6); min-height: 2.6em; }
.qa-add { margin-top: 16px; width: 100%; padding: 18px 20px; }
.qa .hm-btn::before { display: none; }
.qa .hm-btn--red { transition: background .35s; box-shadow: none; }
.qa .hm-btn--red:hover { background: #e11d2b; box-shadow: none; }
.qa-more { align-self: flex-start; margin-top: 16px; padding: 4px 0; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(244,242,237,.78); text-decoration: none; border-bottom: 1px solid rgba(244,242,237,.35); transition: color .3s, border-color .3s; }
.qa-more:hover { color: #f4f2ed; border-color: #f4f2ed; }
.qa-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 12px; color: #f4f2ed; }
.qa-msg.is-bad { color: #ff7d86; }
@media (max-width: 720px) {
  .qa { align-items: end; padding: 0; }
  .qa-card { grid-template-columns: 92px 1fr; gap: 16px; border-radius: 20px 20px 0 0; padding: 20px 18px 26px; width: 100%; max-height: 92svh; overflow-y: auto; }
  .qa-thumb { padding: 8px; align-self: start; } .qa-thumb img { max-height: 120px; }
  .qa-name { font-size: 2.2rem; }
  .qa-sizes, .qa-label, .qa-hint, .qa-add, .qa-more, .qa-msg { grid-column: 1 / -1; }
  .qa-info { display: contents; }
  .qa-cat, .qa-name, .qa-price { grid-column: 2; }
}
@media (max-width: 720px) { .qa-thumb { grid-row: 1 / span 3; } }


/* ---------- Rendimiento / accesibilidad ---------- */
.ha-dots button { position: relative; }
.ha-dots button::after { content: ""; position: absolute; inset: -9px -5px; }   /* zona táctil de ≥ 24 px sin cambiar el aspecto */
.hm-chapter-l + .hm-chapter-l { color: rgba(244,242,237,.4); }                    /* contraste suficiente (3:1) en el texto grande */
.hm-logo img, .hn-logo img { width: auto; }

/* contraste AA en las secciones claras */
.hm-light { --text-ghost: rgba(12,12,15,.62); }
.hm-footer-cols h3 { color: rgba(255,255,255,.62); }
.hm-footer-copy { color: rgba(255,255,255,.62); }


/* ---------- Armería: acceso propio al carrito (la cabecera se retira mientras dura la colección) ---------- */
.ha-cart { position: absolute; z-index: 4; top: clamp(18px, 3vh, 28px); right: var(--gut); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 1px solid rgba(244,242,237,.4); border-radius: 50%; color: #f4f2ed; cursor: pointer; transition: background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s, opacity .4s; }
.ha-cart:hover { background: #f4f2ed; color: #0c0c0f; border-color: #f4f2ed; }
.ha-cart:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 3px; }
.ha-cart-n { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ignit-red); color: #fff; font: 700 9px/17px var(--font-display); text-align: center; display: none; }
.is-focus .ha-cart { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .ha-skip-l { display: none; } }

/* el botón de región sube por encima del banner de cookies mientras este se muestra (antes lo tapaba / se montaba sobre "Aceptar") */
html.hm-ck #region-fab { bottom: calc(var(--ck, 0px) + 14px) !important; transition: bottom .4s var(--ease-out); }
.hm-footer-brand img { width: 88px; height: auto; display: block; }
@media (max-width: 720px) { .hm-footer { padding-bottom: 104px; } }


/* El único logo es el de la barra de navegación: visible también sobre el hero */
.hn-logo { max-width: 120px; opacity: 1; margin-right: clamp(20px, 3vw, 44px); }
@media (max-width: 720px) { .hn-logo { max-width: none; margin: 0 !important; } }


/* ============================================================
   UX · Fase 1-3: claridad, reseñas, vídeo pausable
   ============================================================ */
@media (max-width: 720px) { .hh-tag-x { display: none; } }

/* barra de la Colección: Añadir (principal, rojo) · Inspeccionar · Ver ficha (texto) */
.ha-quick { background: var(--ignit-red); border: 0; color: #fff; padding: 0 28px; height: 48px; letter-spacing: 4px; box-shadow: none; }
.ha-quick:hover:not(:disabled) { background: #e11d2b; color: #fff; }
.ha-quick.is-wait { background: none; box-shadow: inset 0 0 0 1px rgba(244,242,237,.5); color: #f4f2ed; }
.ha-quick.is-wait:hover { background: #f4f2ed !important; color: #0c0c0f !important; }
.ha-more { display: inline-flex; align-items: center; padding: 14px 2px; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(244,242,237,.66); text-decoration: none; border-bottom: 1px solid transparent; transition: color .4s var(--ease-out), border-color .4s; }
.ha-more:hover { color: #f4f2ed; border-bottom-color: rgba(244,242,237,.5); }
@media (max-width: 720px) {
  .ha-quick { flex: 1; width: auto; height: 46px; padding: 0 16px; justify-content: center; border-radius: 999px; }
  .ha-quick span { display: inline; }
  .ha-more { display: none; }
}

/* barra lateral: la sección actual siempre con su etiqueta */
.hm-rail a.is-active span { opacity: 1; transform: none; }

/* manifiesto: las palabras sin leer se siguen viendo */
.hf .w { opacity: .42; }

/* vídeo del manifiesto: control de pausa */
.hf-pause { position: absolute; z-index: 3; top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px); width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: rgba(5,5,5,.55); border: 1px solid rgba(244,242,237,.35); border-radius: 50%; color: #f4f2ed; cursor: pointer; transition: background .3s, color .3s; }
.hf-pause:hover { background: #f4f2ed; color: #0c0c0f; }
.hf-pause:focus-visible { outline: 2px solid #f4f2ed; outline-offset: 3px; }
.hf-i-play { display: none; }
.hf-video.is-paused .hf-i-pause { display: none; }
.hf-video.is-paused .hf-i-play { display: block; }

/* aviso de precio y estrellas en la compra rápida */
.qa-rating { margin: 8px 0 0; font-size: 12px; letter-spacing: 1px; color: rgba(244,242,237,.8); }
.qa-region { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: rgba(244,242,237,.55); }
.hn-rt { margin-left: 10px; font-style: normal; font-size: 11px; letter-spacing: 1px; color: rgba(244,242,237,.8); }
.hk-rt { display: block; margin-top: 4px; font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }

/* reseñas reales dentro de Athletes */
.ht-reviews { margin-top: clamp(90px, 11vw, 170px); }
.ht-reviews[hidden] { display: none; }
.ht-rev-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 56px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.ht-rev-head .hm-eyebrow { margin: 0; }
.ht-rev-score { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.ht-rev-score b { font-family: var(--f-ath); font-weight: 900; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .8; }
.ht-rev-stars { font-size: 1.1rem; letter-spacing: 3px; color: var(--text-primary); }
.ht-rev-count { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--text-muted); }
.ht-rev-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.ht-rev { margin: 0; display: grid; align-content: start; gap: 14px; }
.ht-rev-st { font-size: 1rem; letter-spacing: 3px; }
.ht-rev blockquote { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ht-rev figcaption { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 960px) { .ht-rev-list { grid-template-columns: 1fr; } .ht-rev:nth-child(n+3) { display: none; } }
@media (max-width: 720px) { .ht-reviews { padding: 0 var(--gut); margin-top: 80px; } }

.ht-rev figcaption { display: block; margin-top: 14px; }


/* ============================================================
   BOTONES — sistema único: «metal» rojo (acción principal) + «cristal» oscuro (secundarios y circulares)
   Mismo lenguaje en toda la Home: bisel, reflejo superior, hundimiento al pulsar. Sin desenfoque ni neón.
   ============================================================ */
:root { --bt-ease: cubic-bezier(.1, .4, .2, 1); }

/* METAL ROJO */
html .hm-btn--red, html .ha-quick, html .ha-btns .hm-btn--red, html .qa-add, html .cart-checkout {
  position: relative; border: 0 !important; border-radius: 7px !important; color: #fff !important;
  background: linear-gradient(180deg, rgba(228,51,63,.78) 0%, rgba(193,18,31,.62) 46%, rgba(143,11,22,.55) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(193,18,31,.55), 0 12px 26px -12px rgba(193,18,31,.65) !important;
  text-shadow: 0 -1px 0 rgba(60,0,6,.75); font-weight: 800;
  transition: transform .28s var(--bt-ease), box-shadow .28s var(--bt-ease), filter .28s var(--bt-ease) !important;
  will-change: transform;
}
html .hm-btn--red::before { display: none !important; }
html .hm-btn--red:hover, html .ha-quick:hover:not(:disabled), html .ha-btns .hm-btn--red:hover, html .qa-add:hover, html .cart-checkout:hover {
  transform: translateY(-1px) scale(1.04); filter: brightness(1.07);
  background: linear-gradient(180deg, rgba(228,51,63,.78) 0%, rgba(193,18,31,.62) 46%, rgba(143,11,22,.55) 100%) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(193,18,31,.55), 0 16px 30px -12px rgba(193,18,31,.8) !important;
}
html .hm-btn--red:active, html .ha-quick:active:not(:disabled), html .qa-add:active, html .cart-checkout:active {
  transform: translateY(2px) scale(.98); filter: brightness(.96);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(193,18,31,.55), 0 2px 6px -2px rgba(193,18,31,.5) !important;
}
html .ha-quick:disabled { filter: grayscale(.6); opacity: .45; }

/* CRISTAL OSCURO */
html .hm-btn--ghost, html #ha-inspect, html .ha-arrow, html .ha-cart, html .hf-pause, html .qa-x {
  border: 0 !important; border-radius: 7px !important; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -10px 16px -12px rgba(255,255,255,.16), 0 10px 22px -12px rgba(0,0,0,.7) !important;
  transition: transform .28s var(--bt-ease), box-shadow .28s var(--bt-ease), background .28s var(--bt-ease), color .28s !important;
}
html .hm-btn--ghost:hover, html #ha-inspect:hover, html .ha-arrow:hover, html .ha-cart:hover, html .hf-pause:hover, html .qa-x:hover {
  transform: scale(1.06); color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.07) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(193,18,31,.7), inset 0 -10px 16px -12px rgba(255,255,255,.2), 0 12px 24px -12px rgba(0,0,0,.75) !important;
}
html .hm-btn--ghost:active, html #ha-inspect:active, html .ha-arrow:active, html .ha-cart:active, html .hf-pause:active, html .qa-x:active { transform: translateY(2px) scale(.97); }
html #ha-inspect { padding: 14px 22px; border-bottom: 0; }
html .ha-btns .hm-btn--ghost { padding: 14px 22px; border-radius: 7px !important; color: #fff; }

/* sobre fondo hueso (secciones claras) el cristal se vuelve tinta */
html .hm-light .hm-btn--ghost {
  color: #0c0c0f; background: linear-gradient(180deg, rgba(12,12,15,.07) 0%, rgba(12,12,15,.02) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(12,12,15,.16), inset 0 -10px 16px -12px rgba(12,12,15,.14), 0 10px 22px -14px rgba(12,12,15,.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  html .hm-btn, html .ha-quick, html .ha-arrow, html .ha-cart, html .hf-pause, html .qa-x, html .qa-add { transition: none !important; }
  html .hm-btn:hover, html .hm-btn:active, html .ha-quick:hover, html .ha-arrow:hover { transform: none; }
}

/* sin subrayado en los botones de cristal */
html .hm-btn--ghost::after, html .hm-btn--ghost::before, html #ha-inspect::after, html #ha-inspect::before { display: none !important; }
/* botones circulares → cuadrados con esquinas suaves, mismo lenguaje */
html .ha-arrow, html .ha-cart, html .hf-pause, html .qa-x { border-radius: 9px !important; }


/* ============================================================
   BOTONES v3 — «ignición»: rojo de marca plano, esquinas cortadas en diagonal (corte deportivo)
   y, al pasar el ratón, el fuego sube desde abajo llenando el botón. Sin degradados ni brillos de plástico.
   ============================================================ */
:root { --cut: 11px; --cut-s: 7px; }
html .hm-btn--red, html .ha-quick, html .ha-btns .hm-btn--red, html .qa-add, html .cart-checkout,
html .hm-btn--ghost, html #ha-inspect, html .ha-btns .hm-btn--ghost {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  text-shadow: none; filter: none;
}
html .hm-btn--red, html .ha-quick, html .ha-btns .hm-btn--red, html .qa-add, html .cart-checkout {
  background: #c1121f !important; box-shadow: none !important; color: #fff !important;
}
html .hm-btn--ghost, html #ha-inspect, html .ha-btns .hm-btn--ghost {
  background: rgba(255,255,255,.05) !important; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important;
}
html .hm-light .hm-btn--ghost { background: rgba(12,12,15,.04) !important; color: #0c0c0f; box-shadow: inset 0 0 0 1px rgba(12,12,15,.3) !important; }

/* el fuego que sube */
html .hm-btn--red::before, html .ha-quick::before, html .qa-add::before, html .cart-checkout::before,
html .hm-btn--ghost::before, html #ha-inspect::before {
  content: ""; display: block !important; position: absolute; inset: 0; z-index: -1; opacity: 1; border-radius: 0;
  background: linear-gradient(0deg, #ff4a2a 0%, #e0261f 55%, #c1121f 100%);
  transform: translateY(102%); transition: transform .5s var(--bt-ease);
}
html .hm-btn--ghost::before, html #ha-inspect::before { background: linear-gradient(0deg, rgba(225,38,31,.9), rgba(193,18,31,.85)); }
html .hm-btn--red:hover::before, html .ha-quick:hover:not(:disabled)::before, html .qa-add:hover::before, html .cart-checkout:hover::before,
html .hm-btn--ghost:hover::before, html #ha-inspect:hover::before { transform: translateY(0); }
html .hm-btn--red:hover, html .ha-quick:hover:not(:disabled), html .ha-btns .hm-btn--red:hover, html .qa-add:hover, html .cart-checkout:hover,
html .hm-btn--ghost:hover, html #ha-inspect:hover, html .ha-btns .hm-btn--ghost:hover {
  transform: none; filter: none; color: #fff !important; box-shadow: none !important;
  background: #c1121f !important;
}
html .hm-btn--ghost:hover, html #ha-inspect:hover { background: rgba(255,255,255,.05) !important; box-shadow: inset 0 0 0 1px #e0261f !important; }
html .hm-light .hm-btn--ghost:hover { background: rgba(12,12,15,.04) !important; color: #fff !important; }
html .hm-btn--red:active, html .ha-quick:active:not(:disabled), html .qa-add:active, html .cart-checkout:active,
html .hm-btn--ghost:active, html #ha-inspect:active { transform: scale(.975); filter: none; box-shadow: none !important; }
html .ha-quick:disabled { opacity: .4; filter: grayscale(.5); }
html .hm-btn > *, html .ha-quick > * { position: relative; z-index: 1; }

/* botones cuadrados de icono: mismo corte, más pequeño */
html .ha-arrow, html .ha-cart, html .hf-pause, html .qa-x {
  border-radius: 0 !important; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
  background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26) !important;
}
html .ha-arrow:hover, html .ha-cart:hover, html .hf-pause:hover, html .qa-x:hover {
  transform: none; background: #c1121f !important; box-shadow: none !important; color: #fff;
}

/* el botón magnético lo mueve GSAP: la transición CSS de transform pelearía con él y lo dejaba descolocado */
html .hm-btn--red[data-magnetic] { transition: box-shadow .28s var(--bt-ease), filter .28s var(--bt-ease) !important; }
/* sobre un botón el propio botón reacciona: el aro del cursor (mezcla «difference») lo teñía de blanco y quitaba contraste */
html .hm-cursor.is-link .hm-cursor-ring { opacity: 0; transition: opacity .2s; }
/* y si algún relleno llega a ser claro, el texto pasa a negro */
html .hm-btn--red:hover, html .hm-btn--ghost:hover { -webkit-text-fill-color: currentColor; }


/* ============================================================
   BOTONES v4 — UN SOLO SISTEMA (Home + barra de navegación)
   · ROJO:         fondo rojo, texto blanco  →  hover: se llena de BLANCO, texto NEGRO
   · TRANSPARENTE: borde fino, texto blanco  →  hover: se llena de NEGRO, texto blanco
   Mismo tamaño, mismo corte en diagonal, misma animación (el relleno sube desde abajo).
   ============================================================ */
:root { --bh: 50px; --bi: 46px; }

/* geometría común de los botones con texto */
html body .hm-btn, html body .ha-quick, html body #ha-inspect, html body .qa-add, html body .cart-checkout, html body .hn-m-search {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); min-height: var(--bh); padding: 0 28px !important; margin: 0;
  font: 800 11px/1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 0 !important; border-radius: 0 !important; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  text-shadow: none; filter: none; box-shadow: none;
  transition: color .35s var(--bt-ease), box-shadow .35s var(--bt-ease), scale .2s var(--bt-ease) !important;
}
html body .hm-btn--xl { height: var(--bh); padding: 0 28px !important; font-size: 11px; }
html body .hh-actions { align-items: center; }

/* geometría común de los botones de icono (cuadrados con corte) */
html body .ha-arrow, html body .ha-cart, html body .hf-pause, html body .qa-x, html body .hn-tools > *, html body .hn-burger {
  box-sizing: border-box; position: relative; overflow: hidden; isolation: isolate; place-items: center;
  width: var(--bi); height: var(--bi); padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0 !important; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
  transition: color .35s var(--bt-ease), box-shadow .35s var(--bt-ease), scale .2s var(--bt-ease) !important;
}
html body .hn-tools { gap: 6px; }
html body .hn-tools > * { clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s))); }
html body .hn-count { top: 6px; right: 8px; }

/* ROJO */
html body .hm-btn--red, html body .ha-quick, html body .ha-btns .hm-btn--red, html body .qa-add, html body .cart-checkout {
  background: #c1121f !important; color: #fff !important; -webkit-text-fill-color: #fff;
}
/* TRANSPARENTE */
html body .hm-btn--ghost, html body #ha-inspect, html body .ha-btns .hm-btn--ghost, html body .hn-m-search,
html body .ha-arrow, html body .ha-cart, html body .hf-pause, html body .qa-x, html body .hn-tools > *, html body .hn-burger {
  background: rgba(255,255,255,.04) !important; color: #fff !important; -webkit-text-fill-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34) !important;
}
html body .hm-light .hm-btn--ghost { background: rgba(12,12,15,.03) !important; color: #0c0c0f !important; box-shadow: inset 0 0 0 1px rgba(12,12,15,.4) !important; }

/* relleno que sube */
html body .hm-btn::before, html body .ha-quick::before, html body #ha-inspect::before, html body .qa-add::before, html body .cart-checkout::before, html body .hn-m-search::before,
html body .ha-arrow::before, html body .ha-cart::before, html body .hf-pause::before, html body .qa-x::before, html body .hn-tools > *::before, html body .hn-burger::before {
  content: ""; display: block !important; position: absolute; inset: 0; z-index: -1; border-radius: 0; opacity: 1; pointer-events: none;
  transform: translateY(102%); transition: transform .5s var(--bt-ease); background: #000;
}
html body .hm-btn--red::before, html body .ha-quick::before, html body .qa-add::before, html body .cart-checkout::before { background: #fff; }
html body .hm-btn::after, html body .ha-quick::after, html body #ha-inspect::after { display: none !important; }
html body .hm-btn > *, html body .ha-quick > *, html body .ha-arrow > *, html body .ha-cart > *, html body .hn-tools > * > * { position: relative; z-index: 1; }

/* HOVER */
html body .hm-btn:hover::before, html body .ha-quick:hover:not(:disabled)::before, html body #ha-inspect:hover::before, html body .qa-add:hover::before, html body .cart-checkout:hover::before, html body .hn-m-search:hover::before,
html body .ha-arrow:hover::before, html body .ha-cart:hover::before, html body .hf-pause:hover::before, html body .qa-x:hover::before, html body .hn-tools > *:hover::before, html body .hn-burger:hover::before { transform: translateY(0); }
html body .hm-btn--red:hover, html body .ha-quick:hover:not(:disabled), html body .ha-btns .hm-btn--red:hover, html body .qa-add:hover, html body .cart-checkout:hover {
  background: #c1121f !important; color: #0c0c0f !important; -webkit-text-fill-color: #0c0c0f; box-shadow: none !important; filter: none; transform: none;
}
html body .hm-btn--ghost:hover, html body #ha-inspect:hover, html body .ha-btns .hm-btn--ghost:hover, html body .hn-m-search:hover,
html body .ha-arrow:hover, html body .ha-cart:hover, html body .hf-pause:hover, html body .qa-x:hover, html body .hn-tools > *:hover, html body .hn-burger:hover, html body .hm-light .hm-btn--ghost:hover {
  background: rgba(255,255,255,.04) !important; color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34) !important; transform: none; filter: none;
}
html body .hm-btn:active, html body .ha-quick:active:not(:disabled), html body #ha-inspect:active, html body .qa-add:active, html body .cart-checkout:active,
html body .ha-arrow:active, html body .ha-cart:active, html body .hn-tools > *:active { scale: .97; }
html body .ha-quick:disabled { opacity: .4; filter: grayscale(.5); }
@media (max-width: 720px) {
  html body .hh-actions .hm-btn { flex: 1; padding: 0 8px !important; letter-spacing: 2px; font-size: 10px; }
}
html body .hn-tools > *, html body .ha-arrow, html body .ha-cart, html body .hf-pause, html body .qa-x { display: grid; place-items: center; }
html body .hn-burger { display: none; }
@media (max-width: 720px) { html body .hn-burger { display: grid; place-items: center; margin-left: -4px; } html body .hn-search, html body .hn-account { display: none; } }
html body .hm-btn::before, html body .ha-quick::before, html body #ha-inspect::before, html body .qa-add::before, html body .cart-checkout::before, html body .hn-m-search::before,
html body .ha-arrow::before, html body .ha-cart::before, html body .hf-pause::before, html body .qa-x::before, html body .hn-tools > *::before, html body .hn-burger::before { background: #000 !important; }
html body .hm-btn--red::before, html body .ha-quick::before, html body .qa-add::before, html body .cart-checkout::before { background: #fff !important; }

/* la firma va justo bajo la frase del manifiesto («…tierra firme.») */
.hf-sign { margin: clamp(22px, 2.6vw, 38px) 0 0; }
.hf-foot { grid-template-columns: 1fr; }

/* menos hueco entre «Cambios y devoluciones» y «Enciende tu fuego» */
.he-rows { margin-bottom: clamp(48px, 6vw, 96px); }
.he-cta { min-height: 0; padding-block: clamp(20px, 3vw, 48px) 0; }
@media (max-width: 720px) { .he-rows { margin-bottom: 40px; } .he-cta { min-height: 0; } }

/* apartado 6: sin divisores grises entre filas */
.he-rows { border-top: 0; }
.he-rows > div { border-bottom: 0; }


/* ---------- Cierre claro + bloque negro que empieza en «Entérate antes que nadie» y sigue en el footer ---------- */
.hf-foot { border-top: 0; }                                   /* sin divisor sobre Origen · Fundada · Piezas */
.he {
  --fg: #0c0c0f; --fg2: rgba(12,12,15,.62); --fg3: rgba(12,12,15,.18);
  --text-primary: var(--fg); --text-muted: var(--fg2); --text-ghost: var(--fg3); --line: var(--fg3);
  background: #f4f2ed; color: #0c0c0f; margin: 0; border-radius: 0;
  padding-bottom: clamp(70px, 9vw, 130px);
}
.he-fire { background: linear-gradient(90deg, transparent, var(--ignit-red) 18%, #0c0c0f 50%, var(--ignit-red) 82%, transparent); }
.hs {
  --fg: #f4f2ed; --fg2: rgba(244,242,237,.62); --fg3: rgba(244,242,237,.22);
  position: relative; z-index: 2; background: #050505; color: var(--fg);
  padding: clamp(80px, 10vw, 140px) var(--gut) clamp(50px, 6vw, 90px);
}
.hs-in { max-width: 1600px; margin: 0 auto; }
.hs .he-news { margin-top: 0; }
.hm-footer { border-top: 0; }

/* aviso de drops: bloque negro liso, sin imagen de fondo y con su tamaño original */
html body .hs { background: #050505 !important; min-height: 0; display: block; overflow: visible; }
html body .hs::before { display: none !important; }


/* ---------- Botones de vista (espalda · frente · modelo) ---------- */
.ha-views { position: absolute; z-index: 4; right: var(--gut); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.ha-views[hidden] { display: none; }
.ha-view {
  position: relative; box-sizing: border-box; height: 34px; padding: 0 16px; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  font: 800 10px/1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.7); background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: color .3s var(--bt-ease), box-shadow .3s var(--bt-ease), background .3s;
}
.ha-view:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.ha-view.is-on { color: #fff; background: #c1121f; box-shadow: none; }
.ha-view:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) { .ha-views { top: 44%; gap: 6px; } .ha-view { height: 30px; padding: 0 11px; letter-spacing: 2px; font-size: 9px; } }

/* corrección: estos botones van posicionados en absoluto (la regla unificada de botones los había pasado a relativo) */
html body .ha-cart { position: absolute; top: clamp(18px, 3vh, 28px); right: var(--gut); }
html body .hf-pause { position: absolute; top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px); }
html body .qa-x { position: absolute; top: 14px; right: 14px; }
html body .ha-cart-n { top: 3px; right: 5px; }   /* el contador queda dentro del botón (el corte en diagonal lo recortaría fuera) */
/* móvil: los botones de vista van en fila bajo el nombre, sin tapar la prenda */
@media (max-width: 720px) {
  .ha-views { top: auto; bottom: 27%; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 6px; }
}


/* ---------- Pestañas de colección (Essentials · Performance) y puntos agrupados ---------- */
.ha-tabs { position: absolute; z-index: 4; top: clamp(18px, 3vh, 28px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.ha-tabs:empty { display: none; }
.ha-tab {
  position: relative; box-sizing: border-box; height: 40px; padding: 0 20px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  font: 800 11px/1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.72); background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: color .3s var(--bt-ease), box-shadow .3s var(--bt-ease), background .3s;
}
.ha-tab em { font-style: normal; font-size: 9px; letter-spacing: 1px; opacity: .6; }
.ha-tab:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.ha-tab.is-on { color: #fff; background: #c1121f; box-shadow: none; }
.ha-tab.is-on em { opacity: .85; }
.ha-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ha-dots button.is-group { margin-left: 16px; }
@media (max-width: 720px) {
  .ha-tabs { top: 128px; left: var(--gut); transform: none; gap: 6px; }
  .ha-tab { height: 32px; padding: 0 12px; gap: 8px; letter-spacing: 2px; font-size: 10px; }
}

/* navbar: los iconos (buscar, cuenta, carrito, menú) sin caja de botón: solo el icono */
html body .hn-tools > *, html body .hn-burger {
  background: none !important; box-shadow: none !important; clip-path: none; overflow: visible;
  width: 40px; height: 40px; border-radius: 50% !important;
}
html body .hn-tools > *::before, html body .hn-burger::before { display: none !important; }
html body .hn-tools { gap: 2px; }
html body .hn-tools > *:hover, html body .hn-burger:hover { background: rgba(244,242,237,.1) !important; box-shadow: none !important; }
html body .hn-count { top: 3px; right: 1px; }


/* Armería: las pestañas de colección ocupan el sitio del antiguo botón de carrito (arriba a la derecha) */
.ha-tabs { left: auto; right: var(--gut); transform: none; }
@media (max-width: 720px) { .ha-tabs { left: var(--gut); right: auto; } }
/* en inspección no se ven ni las pestañas ni los botones de vista en medio de la escena */
.is-focus .ha-tabs, .is-focus .ha-views { opacity: 0; pointer-events: none; visibility: hidden; }
.ha-tabs, .ha-views { transition: opacity .3s, visibility .3s; }

/* también en móvil y ancho medio: el icono de cuenta va junto al carrito (solo se oculta la lupa; la búsqueda sigue en el menú) */
@media (max-width: 720px) {
  html body .hn-account { display: grid !important; }
  html body .hn-search { display: none; }
}

/* ancho medio/móvil: pestañas arriba a la derecha (hasta 481 px) y botones de vista justo sobre la barra de precio, sin pisar el nombre ni las estrellas */
@media (min-width: 481px) and (max-width: 720px) { .ha-tabs { top: clamp(18px, 3vh, 28px); left: auto; right: var(--gut); } }
@media (max-width: 720px) { .ha-views { bottom: 22%; } }


/* ---------- Móvil: selector de colección como desplegable, arriba a la derecha (donde estaba el carrito) ---------- */
@media (max-width: 720px) {
  .ha-tabs { top: clamp(18px, 3vh, 28px); left: auto; right: var(--gut); transform: none; flex-direction: column; align-items: stretch; gap: 6px; min-width: 172px; }
  .ha-tab { height: 40px; padding: 0 16px; justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: 2.5px; }
  .ha-tabs .ha-tab:not(.is-on) { display: none; }
  .ha-tabs.is-open .ha-tab:not(.is-on) { display: inline-flex; }
  .ha-tabs .ha-tab.is-on { order: -1; }
  .ha-tabs .ha-tab.is-on::after {          /* chevrón del desplegable */
    content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--bt-ease);
  }
  .ha-tabs.is-open .ha-tab.is-on::after { transform: translateY(1px) rotate(-135deg); }
  .ha-tabs.is-open .ha-tab:not(.is-on) { background: rgba(8,8,10,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
}
@media (max-width: 720px) {
  .ha-tabs { min-width: 128px; }
  .ha-tab { height: 38px; padding: 0 12px; letter-spacing: 1.6px; font-size: 10px; }
  .ha-tab em { display: none; }
}

/* panel de colección del navbar (escritorio): fondo claro para que las prendas, sobre todo las negras, se recorten con contraste, y sombra bajo cada una */
.hn-mega { background: radial-gradient(ellipse 70% 120% at 50% 0%, #f3f1ec 0%, #e4e1da 100%); border-bottom: 1px solid rgba(12,12,15,.12); box-shadow: 0 30px 50px -24px rgba(0,0,0,.55); }
.hn-mega .hn-piece { color: #0c0c0f; }
.hn-mega .hn-pr { color: rgba(12,12,15,.7); }
.hn-mega .hn-pr em { color: rgba(12,12,15,.5); }
.hn-mega .hn-piece:focus-visible { outline-color: #0c0c0f; }
.hn-mega .hn-thumb { position: relative; }
.hn-mega .hn-thumb::after {          /* sombra de contacto en el suelo, bajo la prenda */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -2px; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(12,12,15,.34) 0%, rgba(12,12,15,0) 70%); filter: blur(3px); z-index: 0;
}
.hn-mega .hn-thumb img { position: relative; z-index: 1; filter: drop-shadow(0 14px 14px rgba(12,12,15,.30)) drop-shadow(0 2px 3px rgba(12,12,15,.22)); }
.hn-mega .hn-piece:hover .hn-thumb img { filter: drop-shadow(0 20px 18px rgba(12,12,15,.34)) drop-shadow(0 2px 3px rgba(12,12,15,.24)); }

/* menú móvil: «Buscar» como texto, igual que «Mi cuenta» */
html body .hn-m-search { background: none !important; box-shadow: none !important; clip-path: none; height: auto; min-height: 0; padding: 0 !important; overflow: visible; font: 700 11px var(--font-display); letter-spacing: 4px; justify-content: flex-start; }
html body .hn-m-search::before { display: none !important; }

/* menú móvil / medio: sin la línea separadora sobre «Buscar» y «Mi cuenta» */
.hn-menu-tools { border-top: 0; padding-top: 0; margin-top: 32px; }

/* logo del navbar un poco más grande y nítido (imagen más cercana al tamaño real) */
.hn-logo img { height: 28px; }
.hn.is-solid .hn-logo { max-width: 128px; }


/* ============================================================
   SECCIONES RECUPERADAS DEL INDEX ANTERIOR (tienda, vídeos, comunidad, preguntas) + saludo + avisos
   ============================================================ */
:root { --chamf: 9px; }

/* saludo personalizado del hero (solo con sesión iniciada) */
.hh-greet { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font: 700 11px var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .7s var(--ease-out); }
.hh-greet[hidden] { display: none; }
.hh-greet.is-on { opacity: .92; }
.hh-greet img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* aviso (favoritos, errores) */
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 100002; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 15px 24px; max-width: calc(100vw - 32px); text-align: center; background: #0c0c0f; color: #fff; font: 700 11px/1.4 var(--font-display); letter-spacing: 2px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: opacity .3s, transform .3s var(--ease-out); }
.toast.toast--show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast--error { background: #c1121f; box-shadow: none; }

/* ---------- TIENDA ---------- */
.hp { position: relative; z-index: 2; background: #f4f2ed; color: #0c0c0f; padding: clamp(90px, 11vw, 170px) max(var(--gut), calc((100vw - 1600px) / 2 + var(--gut))) clamp(90px, 11vw, 160px); }
.hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 80px); }
.hp-head .hm-h2 { font-size: clamp(2.6rem, 8vw, 7.6rem); line-height: .88; letter-spacing: -.05em; }
.hp-lede { margin: 0; max-width: 34ch; font-size: clamp(.95rem, 1.3vw, 1.15rem); line-height: 1.55; color: rgba(12,12,15,.62); font-weight: 500; }
.hp-cat + .hp-cat { margin-top: clamp(56px, 7vw, 100px); }
.hp-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 16px; margin-bottom: clamp(20px, 3vw, 36px); border-bottom: 1px solid rgba(12,12,15,.16); }
.hp-cat-h h3 { margin: 0; font: 900 clamp(1.6rem, 3vw, 2.6rem)/1 var(--font-display); letter-spacing: -.03em; }
.hp-cat-h span { font: 700 10px var(--font-display); letter-spacing: 4px; text-transform: uppercase; color: rgba(12,12,15,.55); }
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.hp-card { position: relative; display: block; color: inherit; text-decoration: none; }
.hp-img { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 40%, #ffffff 0%, #e6e3dc 100%); }
.hp-img img { width: 92%; height: auto; transition: transform .7s var(--ease-out); filter: drop-shadow(0 18px 16px rgba(12,12,15,.28)) drop-shadow(0 2px 3px rgba(12,12,15,.2)); }
@media (hover: hover) { .hp-card:hover .hp-img img { transform: translateY(-6px) scale(1.03); } }
.hp-card.sold-out .hp-img img { opacity: .5; }
.hp-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 8px 12px; background: #0c0c0f; color: #fff; font: 800 9px/1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.hp-card.sold-out .hp-badge { background: #c1121f; }
.hp-info { display: grid; gap: 8px; padding: 16px 2px 0; }
.hp-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hp-meta b { font: 900 clamp(1.2rem, 1.8vw, 1.7rem)/1 var(--f-ath); letter-spacing: .02em; text-transform: uppercase; }
.hp-meta i { font-style: normal; font-weight: 900; color: var(--ignit-red); }
.hp .product-card-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ignit-red); }
.hp .product-card-rating[hidden] { display: none; }
.hp .product-card-rating-count { color: rgba(12,12,15,.55); font-weight: 700; font-size: 12px; }
.hp-desc { font-size: .9rem; line-height: 1.5; color: rgba(12,12,15,.62); }
.product-card-wishlist { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #0c0c0f; background: rgba(244,242,237,.92); box-shadow: inset 0 0 0 1px rgba(12,12,15,.2); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); transition: background .3s var(--ease-out), color .3s; }
.product-card-wishlist:hover { background: #0c0c0f; color: #fff; }
.product-card-wishlist.active { background: #c1121f; color: #fff; box-shadow: none; }
.product-card-wishlist.active svg { fill: currentColor; }
.product-card-wishlist:disabled { opacity: .55; cursor: wait; }
.product-card-wishlist:focus-visible { outline: 2px solid #0c0c0f; outline-offset: 2px; }
.hp-dots { display: none; }
@media (max-width: 720px) {
  .hp-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hp-grid::-webkit-scrollbar { display: none; }
  .hp-card { flex: 0 0 76%; scroll-snap-align: start; }
  .hp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .hp-dots .dot { width: 18px; height: 3px; background: rgba(12,12,15,.22); cursor: pointer; transition: background .3s, width .3s; }
  .hp-dots .dot.active { background: #c1121f; width: 30px; }
}

/* ---------- COMUNIDAD ---------- */
.hc { position: relative; z-index: 2; background: #050505; color: #f4f2ed; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-top: 1px solid rgba(244,242,237,.1); }
.hc-img { min-height: min(80vh, 760px); overflow: hidden; background: #111; }
.hc-img picture, .hc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-txt { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(40px, 6vw, 110px); }
.hc-txt .hm-h2 { font-size: clamp(2.4rem, 6vw, 6rem); line-height: .9; letter-spacing: -.05em; color: #f4f2ed; margin: 0; }
.hc-txt p { margin: 0; max-width: 42ch; color: rgba(244,242,237,.68); line-height: 1.6; }
.hc-txt .hm-btn { align-self: flex-start; }
@media (max-width: 800px) { .hc { grid-template-columns: 1fr; } .hc-img { min-height: 62vh; } .hc-txt { padding: 36px var(--gut) 64px; } }

/* ---------- PREGUNTAS FRECUENTES ---------- */
.hq { position: relative; z-index: 2; background: #f4f2ed; color: #0c0c0f; padding: clamp(90px, 11vw, 170px) max(var(--gut), calc((100vw - 1600px) / 2 + var(--gut))); }
.hq-in { max-width: 980px; margin: 0 auto; }
.hq .hm-h2 { font-size: clamp(2.6rem, 8vw, 7rem); line-height: .88; letter-spacing: -.05em; margin-bottom: clamp(32px, 5vw, 64px); }
.hq-list { border-top: 1px solid rgba(12,12,15,.16); }
.faq-item { border-bottom: 1px solid rgba(12,12,15,.16); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 0; border: 0; background: none; cursor: pointer; text-align: left; color: #0c0c0f; font: 800 clamp(1rem, 1.5vw, 1.25rem)/1.3 var(--font-display); letter-spacing: -.01em; }
.faq-q i { position: relative; flex: none; width: 16px; height: 16px; }
.faq-q i::before, .faq-q i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; transition: transform .35s var(--ease-out), background .3s; }
.faq-q i::after { transform: rotate(90deg); }
.faq-item.is-open .faq-q i::after { transform: rotate(0); }
.faq-q:hover i::before, .faq-q:hover i::after, .faq-item.is-open .faq-q i::before, .faq-item.is-open .faq-q i::after { background: #c1121f; }
.faq-q:focus-visible { outline: 2px solid #0c0c0f; outline-offset: 4px; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { margin: 0 0 26px; max-width: 68ch; line-height: 1.7; color: rgba(12,12,15,.68); }

/* «Conviértete en atleta»: la foto del atleta sentado se centra en el modelo */
.hc-img img { object-position: 52% 30%; }
@media (max-width: 800px) { .hc-img img { object-position: 50% 40%; } }


/* «Enciende tu fuego»: los mockups de Compresión y Basalto flotan entre las letras (por detrás del texto: oscuras sobre la blanca, roja sobre la negra) */
.he-stage { position: relative; width: 100%; display: grid; justify-items: center; }
.he-stage .he-title { position: relative; z-index: 2; }
.he-float { position: absolute; z-index: 1; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 28px 26px rgba(12,12,15,.34)) drop-shadow(0 4px 5px rgba(12,12,15,.22)); will-change: translate; }
.he-float--w { width: clamp(150px, 24vw, 400px); left: 57%; top: -14%; rotate: 9deg; animation: he-bob-a 7s ease-in-out infinite; }
.he-float--b { width: clamp(140px, 22vw, 370px); left: 15%; top: 26%; rotate: -10deg; animation: he-bob-b 8.5s ease-in-out infinite; }
@keyframes he-bob-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes he-bob-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 14px; } }
@media (max-width: 720px) {
  .he-float--w { width: 40vw; left: 52%; top: -22%; }
  .he-float--b { width: 38vw; left: 6%; top: 34%; }
}
@media (prefers-reduced-motion: reduce) { .he-float { animation: none; } }

.he-cta .hm-btn { position: relative; z-index: 3; }
@media (max-width: 720px) {
  .he-stage { margin-bottom: 64px; }
  .he-float--b { width: 33vw; left: 3%; top: 24%; }
  .he-float--w { width: 36vw; left: 56%; top: -20%; }
}


/* orden cruzado de las camisetas respecto al título (ver capas en index.html) */
.he-stage { isolation: isolate; z-index: 1; }
.he-lyr { position: absolute; inset: 0; pointer-events: none; }
.he-stage .he-title { z-index: 3; }
.he-lyr--1 { z-index: 1; } .he-lyr--2 { z-index: 2; } .he-lyr--4 { z-index: 4; } .he-lyr--5 { z-index: 5; }
.he-lyr--1, .he-lyr--4 { clip-path: inset(-80% -40% 50% -40%); }     /* banda de «ENCIENDE» */
.he-lyr--2, .he-lyr--5 { clip-path: inset(50% -40% -80% -40%); }     /* banda de «TU FUEGO» */
.he-lyr .he-float { z-index: auto; }

@media (max-width: 720px) {
  .he-float--w { width: 29vw; left: 69%; top: -30%; }
  .he-float--b { width: 27vw; left: 0%; top: 44%; }
}

/* el margen del título pasa al contenedor: así el 50 % del contenedor cae justo entre las dos líneas y el corte de las capas no atraviesa las letras */
.he-stage .he-title { margin: 0 !important; }
.he-stage { margin-bottom: clamp(44px, 5.5vw, 80px); }
.he-lyr--1, .he-lyr--4 { clip-path: inset(-80% -40% calc(50% - .5vw) -40%); }
.he-lyr--2, .he-lyr--5 { clip-path: inset(calc(50% + .5vw) -40% -80% -40%); }

@media (min-width: 721px) {
  .he-float--w { width: clamp(120px, 15.5vw, 270px); left: 68%; top: -24%; }
  .he-float--b { width: clamp(110px, 14.5vw, 250px); left: 11%; top: 31%; }
}

/* corte exacto (--cut lo calcula home-extra.js): ambas mitades comparten el mismo píxel de frontera, sin solape ni hueco */
.he-lyr--1, .he-lyr--4 { clip-path: inset(-80% -40% calc(100% - var(--cut, 50%)) -40%); }
.he-lyr--2, .he-lyr--5 { clip-path: inset(var(--cut, 50%) -40% -80% -40%); }

/* las dos mitades se solapan 2 px en la franja vacía entre líneas: sin hueco ni línea clara/oscura en la unión */
.he-lyr--1, .he-lyr--4 { clip-path: inset(-80% -40% calc(100% - var(--cut, 50%) - 1px) -40%); }
.he-lyr--2, .he-lyr--5 { clip-path: inset(calc(var(--cut, 50%) - 1px) -40% -80% -40%); }

/* sombra única y sin cortes; las mitades de cada camiseta van sin sombra */
.he-lyr .he-float { filter: none; }
.he-stage > .he-shadow { z-index: 0; filter: brightness(0) blur(16px); opacity: .30; margin-top: 30px; }

/* la camiseta negra va por delante de las dos líneas: una sola copia, sin recorte */
.he-lyr--5 { clip-path: none; }


/* panel «Colección» agrupado en Essentials y Performance */
.hn-mega-in--g { display: grid; grid-template-columns: var(--g, 1fr 1fr); gap: clamp(28px, 4vw, 64px); }
.hn-grp { min-width: 0; }
.hn-grp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(12,12,15,.18); color: #0c0c0f; text-decoration: none; }
.hn-grp-h b { font: 900 clamp(1.1rem, 1.6vw, 1.5rem)/1 var(--font-display); letter-spacing: -.02em; }
.hn-grp-h span { font: 700 9px var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: rgba(12,12,15,.55); transition: color .3s, transform .3s var(--ease-out); }
.hn-grp-h:hover span { color: #c1121f; transform: translateX(3px); }
.hn-grp-h:focus-visible { outline: 2px solid #0c0c0f; outline-offset: 4px; }
.hn-grp-p { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); }
/* menú móvil: subenlaces de Colección */
.hn-menu-links a.hn-sub { padding: 10px 0 10px 18px; font-size: clamp(1.1rem, 5vw, 1.5rem); letter-spacing: -.02em; color: rgba(244,242,237,.6); border-bottom: 0; }
.hn-menu-links a.hn-sub::before { content: "— "; color: #c1121f; }

/* barra de progreso de la página: roja y visible en todos los bloques (antes solo lo era en la Armería) */
html .hm-progress { height: 2px; }
html .hm-progress span { background: var(--ignit-red); }

/* carrito (estilo definido en css/cart.css): el botón Pagar conserva su tamaño y márgenes frente a la regla unificada de botones */
html body .cart-checkout { width: calc(100% - 56px); height: 54px; margin: 0 28px 28px; padding: 0 !important; }
@media (max-width: 520px) { html body .cart-checkout { width: calc(100% - 40px); margin: 0 20px 20px; } }

/* tallas mientras se comprueba el stock real */
.qa-size.is-wait { opacity: .4; cursor: progress; }
.qa-size.is-out { opacity: .3; text-decoration: line-through; cursor: not-allowed; }

/* contador del carrito: flota sobre la esquina del icono y no ocupa sitio (no mueve el icono) */
html body .hn-tools > * > .hn-count { position: absolute; top: 2px; right: 0; z-index: 2; margin: 0; pointer-events: none; }


/* ---------- Armería · SOLO ancho medio (721–1100 px): cabecera en pila arriba, sin flechas/vistas/avisos, y la escena empieza bajo ella ---------- */
@media (min-width: 721px) and (max-width: 1100px) {
  .ha-head { top: 20px; max-width: calc(100% - 340px); }
  .ha-head .hm-eyebrow { margin-bottom: 8px; }
  .ha-head .hm-h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
  .ha .ha-skip { top: 98px; left: var(--gut); }
  .ha-stage { top: 140px; }                                  /* la escena (y las prendas) quedan debajo del título y del botón */
  .ha .ha-arrow { display: none; }
  .ha .ha-badge:not(.is-out) { display: none; }
  .ha .ha-views { display: none !important; }
  .ha .ha-card { bottom: 56px; }                              /* la tarjeta baja para no pisar el nombre grabado en el suelo */
  .ha .ha-nav { bottom: 62px; }
  .ha .ha-hint { display: none; }                             /* hablaba de flechas, que aquí ya no hay, y chocaba con el nombre del suelo */
}


/* ---------- Armería · MÓVIL (≤720 px): misma limpieza que en ancho medio; los botones de vista se quedan, en una fila propia sobre la tarjeta ---------- */
@media (max-width: 720px) {
  .ha-head { top: 20px; }
  .ha .ha-skip { top: 92px; left: var(--gut); right: auto; }
  .ha-stage { top: 124px; }                                  /* la escena empieza bajo el título y SALTAR */
  .ha .ha-arrow { display: none; }                           /* solo los puntos */
  .ha .ha-badge:not(.is-out) { display: none; }              /* sin «ÚLTIMAS UNIDADES» ni «NEW» */
  .ha .ha-hint { display: none; }
  .ha .ha-card { bottom: 68px; }                             /* sube lo justo para que la bandera de región no tape «Inspeccionar» */
  .ha .ha-nav { bottom: 22px; }
  .ha .ha-views { bottom: 162px; }                           /* fila propia justo sobre «01 / 05 · precio», sin pisarlos */
}

/* estrellas de reseñas del menú «Colección»: en rojo de marca */
html body .hn-mega .hn-rt, html body .hn-rt { color: #c1121f; font-weight: 800; }


/* Armería: en modo inspección la escena vuelve a ocupar todo el alto (sin la banda gris de arriba); el lienzo se redimensiona solo */
.ha-pin.is-focus .ha-stage { top: 0; }

/* icono de WhatsApp del pie: es negro, se pasa a blanco como los otros */
.hm-footer-social img[src$="whatsapp.svg"] { filter: invert(1); }


/* contraste (AA): texto pequeño sobre hueso */
.hp-cat-h span, .hp-info .product-card-rating-count { color: rgba(12, 12, 15, .7); }

/* la bola de región ahora vive en la cabecera: ya no se sube por encima del aviso de cookies */
html.hm-ck .hn-region #region-fab { bottom: auto !important; }

/* Hero: la bola de región ya no flota sobre la pantalla, así que el contenido baja y no tapa la camiseta del atleta */
.hh-foot { padding-right: 0; }
@media (max-width: 720px) { .hh-foot { padding-bottom: 28px; } }
@media (min-width: 721px) and (max-width: 1100px) { .hh-title { margin-top: 4vh; } }
@media (min-width: 721px) and (max-width: 1100px) { .hh-scroll { display: none; } }   /* en ancho medio la pista «scroll» chocaba con los botones */


/* Hero en ancho medio: el titular era demasiado grande (se acercaba al borde y tapaba al atleta) */
@media (min-width: 721px) and (max-width: 1100px) {
  .hh-title { font-size: clamp(3.2rem, min(12vw, calc((100svh - var(--ck, 0px)) * .17)), 12rem); max-width: 100%; }
}

/* Safari (iPhone): la barra flotante de abajo se tiñe del color de la página y tapaba el pie de la Armería.
   Mientras se está en la Armería hay una banda oscura pegada al borde (Safari la usa para teñir la barra)
   y el pie de la escena sube lo que ocupa la barra. */
@media (max-width: 720px) {
  html.in-armeria body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: #050505; z-index: 5; pointer-events: none; }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    /* La parte baja de la Armería se desplaza lo que la barra de Safari esté tapando en cada momento
       (--ha-gap lo calcula home.js al vuelo: sube al expandirse la barra y baja al plegarse). */
    .ha-pin { height: calc(100svh - var(--ck, 0px)); }
    .ha .ha-card { bottom: calc(104px + var(--ha-gap, 0px)); }
    .ha .ha-nav { bottom: calc(58px + var(--ha-gap, 0px)); }
    .ha .ha-views { bottom: calc(198px + var(--ha-gap, 0px)); }
    html.in-armeria body { background: #050505; }
  }
}


/* Accesibilidad (Lighthouse): puntos de la Armería con zona táctil de 24px (el punto visible sigue midiendo 8px) */
.ha-dots { gap: 0; }
.ha-dots button { box-sizing: border-box; width: 24px; height: 24px; padding: 8px; background-clip: content-box; border-radius: 12px; }
.ha-dots button.is-active { width: 44px; background-clip: content-box; }

/* Armería: sin botones de vista (Prenda / Modelo / Espalda / Frente); la escena sigue alternando las vistas sola */
.ha .ha-views { display: none !important; }

/* Armería (≤1100 px): pista de deslizar — chevrones a ambos lados de los puntos que "empujan" hacia fuera 3 veces; no ocupan sitio extra ni tapan nada */
@media (max-width: 1100px) {
  .ha .ha-nav { gap: 12px; }
  .ha .ha-nav::before, .ha .ha-nav::after {
    content: ''; width: 12px; height: 12px; flex: none; pointer-events: none; opacity: .5; mix-blend-mode: difference;
    border-top: 3px solid #fff; border-left: 3px solid #fff; border-radius: 1px;
  }
  .ha .ha-nav::before { transform: rotate(-45deg); animation: haNudgeL 1.4s ease-in-out .9s 3; }
  .ha .ha-nav::after { transform: rotate(135deg); animation: haNudgeR 1.4s ease-in-out .9s 3; }
}
@keyframes haNudgeL { 0%, 100% { translate: 0 0; opacity: .5; } 50% { translate: -9px 0; opacity: 1; } }
@keyframes haNudgeR { 0%, 100% { translate: 0 0; opacity: .5; } 50% { translate: 9px 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ha .ha-nav::before, .ha .ha-nav::after { animation: none; } }
.is-focus .ha-nav::before, .is-focus .ha-nav::after { opacity: 0 !important; }

/* Armería · ancho medio: los puntos (con la pista de deslizar) pasan a una fila propia, centrada bajo la tarjeta, para no pisar «Ver ficha» */
@media (min-width: 721px) and (max-width: 1100px) {
  .ha .ha-nav { right: auto; left: 50%; transform: translateX(-50%); bottom: 20px; }
}

/* Legal: botones de las páginas legales y avisos de privacidad bajo los formularios */
.legal-btn { display: inline-block; margin-top: 6px; padding: 13px 22px; background: #C1121F; color: #f4f2ed !important; font: 700 12px/1 'Montserrat', sans-serif; letter-spacing: 2px; text-transform: uppercase; border: 0; cursor: pointer; text-decoration: none !important; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.legal-btn:hover { background: #d8202d; }
.form-legal { font-size: 11px; line-height: 1.5; opacity: .72; margin: 10px 0 0; }
.form-legal a { color: inherit; text-decoration: underline; }

/* Atletas: fondo blanco fijo (hueso). Antes dependía del fondo de la página, que en el móvil seguía negro un instante al salir de la Armería. */
.ht { background: #f4f2ed; }
html.in-armeria body, html body.hm { background-color: #f4f2ed; }
.ha-pin { background-color: #050505; }

/* ---------- Armería: jerarquía clara (nombre nítido + precio + acciones) ---------- */
.ha .ha-name { display: block; order: -1; flex: 0 0 100%; margin: 0 0 4px; min-height: 0; font-family: 'Big Shoulders Display', 'Anton', sans-serif; font-weight: 900; font-size: clamp(2.4rem, 4.2vw, 3.8rem); letter-spacing: .03em; line-height: .95; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.ha .ha-card { flex-wrap: wrap; align-items: center; gap: 12px 26px; bottom: clamp(44px, 7vh, 64px); }
.ha .ha-card::before { content: ""; position: absolute; z-index: -1; left: -200px; right: -700px; bottom: -64px; top: -40px; background: linear-gradient(0deg, rgba(5,5,5,.88), rgba(5,5,5,0)); pointer-events: none; }
.ha .ha-idx { order: 0; }
.ha .ha-hint { display: none; }
.ha .ha-price { font-size: 1.9rem; }
@media (max-width: 720px) {
  .ha .ha-card { bottom: 78px; gap: 10px 12px; }
  .ha .ha-card::before { left: 0; right: 0; bottom: -80px; top: -70px; }
  .ha .ha-name { grid-column: 1 / -1; font-size: 2.3rem; margin-bottom: 0; }
  .is-focus .ha .ha-name, .ha.is-focus .ha-name { font-size: 1.3rem; }
}

/* Armería: puntos más visibles y borde superior de la escena difuminado en móvil */
.ha .ha-dots button { padding: 7px; background-color: rgba(255,255,255,.42); }
.ha .ha-dots button.is-active { background-color: #fff; }
@media (max-width: 720px) {
  .ha:not(.is-focus) #ha-gl { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
  .ha-pin.is-focus #ha-gl { -webkit-mask-image: none; mask-image: none; }
}

/* Estrellas de reseñas bajo el nombre (Armería) */
.ha .ha-stars { order: -1; flex: 0 0 100%; margin: -2px 0 4px; font-size: 15px; line-height: 1; letter-spacing: 3px; color: #e11d2e; }
.ha .ha-stars[hidden] { display: none; }
.ha .ha-stars.is-empty { color: rgba(255,255,255,.35); }
.ha .ha-stars small { margin-left: 10px; font: 700 11px/1 'Montserrat', sans-serif; letter-spacing: 2px; color: rgba(255,255,255,.75); text-transform: uppercase; vertical-align: 1px; }
@media (max-width: 720px) { .ha .ha-stars { grid-column: 1 / -1; margin-bottom: 0; } }
.ha.is-focus .ha-stars, .ha-pin.is-focus .ha-stars { display: none; }

/* Armería: fondo negro (no gris) y, en móvil, la cueva ocupa toda la pantalla (sin franja gris arriba) */
.ha-pin { background: #030304; }
@media (max-width: 720px) {
  .ha .ha-stage { top: 0 !important; }
  .ha:not(.is-focus) #ha-gl, .ha-pin.is-focus #ha-gl { -webkit-mask-image: none !important; mask-image: none !important; }
}
@media (max-width: 720px) {
  .ha-pin::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 230px; background: linear-gradient(180deg, rgba(3,3,4,.82), rgba(3,3,4,0)); pointer-events: none; }
  .ha-pin.is-focus::before { opacity: 0; }
}

/* Móvil: puntos del carrusel dentro de la ficha, bajo los botones (fijos respecto a ellos) */
@media (max-width: 720px) {
  .ha .ha-card { bottom: 22px; }
  .ha .ha-card .ha-nav { position: static; transform: none; left: auto; right: auto; bottom: auto; grid-column: 1 / -1; justify-self: center; margin-top: 2px; }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .ha .ha-card { bottom: calc(60px + var(--ha-gap, 0px)); }
    .ha .ha-card .ha-nav { bottom: auto; }
  }
}