/* =============================================================
   ANDONI ARRIAGA — styles.css
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #0a0c0d;
  --bg-1: #101315;
  --bg-2: #171b1d;
  --bg-3: #1e2225;
  --line: rgba(243, 239, 230, .1);
  --line-strong: rgba(243, 239, 230, .18);
  --cream: #f3efe6;
  --muted: #a9a49c;
  --muted-2: #7b7671;
  --accent: #ff4b1f;
  --accent-2: #ffb238;
  --accent-rgb: 255, 75, 31;

  --display: "Anton", "Arial Narrow", sans-serif;
  --sans: "Manrope", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 76px;

  --mx: 50%;
  --my: 40%;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--cream); }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.center { text-align: center; margin-inline: auto; }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--cream); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.kicker {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.kicker.center { text-align: center; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cream); opacity: .92; }
.lead-center { max-width: 46ch; margin-inline: auto; opacity: .78; margin-top: -.5rem; margin-bottom: 2.5rem; }

section > .container > h2,
section .hero-copy h1 { margin-bottom: 1rem; }

section h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  margin-bottom: 2.6rem;
}
section h2.reveal.center,
h2.reveal.center { margin-bottom: 2.6rem; }

/* =============================================================
   4. Typography
   ============================================================= */
.hero-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7.4vw, 6.2rem);
  line-height: .94;
  letter-spacing: .002em;
  max-width: 14ch;
}
.hero-title br { display: block; }

.manifesto-quote {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  color: var(--accent);
  text-align: center;
  max-width: 20ch;
  margin: 2.6rem auto 0;
}

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
  white-space: nowrap;
}
.btn-accent {
  background: var(--accent);
  color: #100600;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .55);
}
.btn-accent:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(var(--accent-rgb), .7); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--cream);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

.chip, .sector-pill, .platform-chip {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: .85rem;
  font-family: var(--mono);
  color: var(--muted);
}

.platform-chip { transition: border-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out); }
a.platform-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.platform-chip.is-static { opacity: .7; }

/* =============================================================
   6. Sections — shared
   ============================================================= */
main { position: relative; z-index: 1; }
section { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }

/* -------- Splash -------- */
.splash {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  background: var(--bg);
  animation: splashSafety .01s 4.5s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-out); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; } }
.splash-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawPath 1.1s var(--ease-out) forwards .15s; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }

/* -------- Fondo vivo (reactivo al ratón) -------- */
.road-field {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.road-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(640px 640px at var(--mx) var(--my), rgba(var(--accent-rgb), .16), transparent 62%);
  transition: background .25s linear;
}
.road-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.rl { fill: none; stroke-width: 1.4; }
.rl-1 { stroke: rgba(var(--accent-rgb), .35); }
.rl-2 { stroke: rgba(243, 239, 230, .09); }
.rl-3 { stroke: rgba(255, 178, 56, .16); }
.grain {
  position: absolute; inset: -10%;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.elev-divider { width: 100%; height: 60px; color: var(--line-strong); }
.elev-divider polyline { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* -------- Nav -------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  background: linear-gradient(to bottom, rgba(10,12,13,.92), rgba(10,12,13,0));
  transition: background .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.nav.is-solid { background: rgba(10, 12, 13, .86); }
@supports (backdrop-filter: blur(10px)) { .nav.is-solid { backdrop-filter: blur(14px) saturate(140%); } }
.nav-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0%; background: var(--accent); transform-origin: left; }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-brand { font-family: var(--display); font-size: 1.15rem; letter-spacing: .01em; text-transform: uppercase; display: flex; gap: .35em; }
.nav-brand span { color: var(--accent); }
.nav-links { display: flex; gap: 1.6rem; font-size: .9rem; }
.nav-links a { color: var(--muted); transition: color .3s var(--ease-out); position: relative; }
.nav-links a:hover { color: var(--cream); }
.nav-cta { padding: .65rem 1.3rem; font-size: .85rem; }
.nav-burger { display: none; flex-direction: column; gap: 5px; width: 28px; }
.nav-burger span { height: 2px; background: var(--cream); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }

/* -------- Hero -------- */
.hero { padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem)); overflow: visible; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-sub { max-width: 46ch; margin-top: 1.3rem; color: var(--muted); font-size: 1.08rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }
.hero-figure { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/5; transform-style: preserve-3d; will-change: transform; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); border: 1px solid var(--line); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  padding: .8rem 1rem; border-radius: 12px;
  background: rgba(10,12,13,.62);
  backdrop-filter: blur(8px);
  font-size: .82rem; color: var(--cream);
  border: 1px solid rgba(255,255,255,.12);
}

/* -------- Stats -------- */
.stats { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; }
.stat-card { text-align: center; }
.stat-card-live { padding: .5rem 0; }
.bignum {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.stat-card-live .bignum { font-size: clamp(3.4rem, 9vw, 5.6rem); }
.stat-label { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .6rem; font-size: .82rem; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); animation: pulseDot 2s infinite; flex: none; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 70% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
.stats-note { max-width: 48ch; color: var(--muted-2); font-size: .92rem; }
.stats-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .4rem; }
.stats-social-card { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.4rem; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-1); font-size: .88rem; color: var(--cream); transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), background .3s var(--ease-out); }
.stats-social-card:hover { border-color: var(--accent); transform: translateY(-3px); background: var(--bg-2); }
.stats-social-card .icon { color: var(--accent); }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.btn .icon, .platform-chip .icon { width: 1.1em; height: 1.1em; }

/* odometer digit mechanism */
.od { display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; justify-content: center; }
.od-col { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; vertical-align: top; }
.od-strip { display: block; transform: translateY(0); transition: transform .6s var(--ease-out); will-change: transform; }
.od-instant .od-strip { transition: none; }
.od-strip > span { display: block; height: 1em; line-height: 1em; text-align: center; }
.od-sep { display: inline-block; height: 1em; line-height: 1em; vertical-align: top; }

/* -------- About -------- */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-figure { border-radius: 22px; aspect-ratio: 3/4; border: 1px solid var(--line); transform-style: preserve-3d; position: relative; }
.about-figure > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* Foto de la infancia asomando por la esquina, estilo polaroid — desde
   siempre encima de una bici. Se recorta con overflow:hidden solo en el
   marco pequeño, nunca en .about-figure, para que pueda sobresalir del
   retrato principal en vez de quedar cortada por su borde. */
.about-throwback {
  position: absolute; left: -1.4rem; bottom: -1.6rem; z-index: 2;
  width: 38%; aspect-ratio: 1/1;
  border-radius: 12px; overflow: hidden;
  border: 5px solid var(--bg); background: var(--bg-1);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.65);
  transform: rotate(-7deg);
}
.about-throwback img { width: 100%; height: 100%; object-fit: cover; }
.about-copy p { margin-top: 1.05rem; color: var(--muted); }
.about-copy p.lead { color: var(--cream); }
.about-copy a { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), .4); }

/* -------- Pillars -------- */
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.pillar-card { padding: 1.8rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--bg-1), transparent); transition: border-color .35s var(--ease-out), transform .35s var(--ease-out); }
.pillar-card:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-4px); }
.pillar-n { font-family: var(--mono); color: var(--accent); font-size: .85rem; }
.pillar-card h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; margin-top: .6rem; margin-bottom: .6rem; font-weight: 400; }
.pillar-card p { color: var(--muted); font-size: .93rem; }
.pillar-card p a { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), .4); }

/* -------- YouTube (aviso mínimo — el contador en directo vive en Ecosistema) -------- */
.youtube-mini-inner { max-width: 640px; margin-inline: auto; text-align: center; }
.youtube-mini-inner .lead { margin-bottom: 2rem; }
.youtube-mini-inner .btn { margin-inline: auto; }

/* -------- EGURRE / Chollos shared visuals -------- */
.egurre, .chollos { border-top: 1px solid var(--line); }
.egurre { background: radial-gradient(1200px 500px at 15% 0%, rgba(var(--accent-rgb), .07), transparent 60%); }
.road-motif { position: absolute; inset: 0; overflow: hidden; opacity: .25; pointer-events: none; }
.road-motif svg { position: absolute; right: -10%; top: 10%; width: 60%; color: var(--accent); }
.road-motif path { fill: none; stroke: currentColor; stroke-width: 2; }

.egurre-grid, .chollos-grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.chollos-grid { grid-template-columns: .8fr 1fr; }
.egurre-copy p, .chollos-copy p { margin-top: 1rem; color: var(--muted); }
.egurre-copy p.lead, .chollos-copy p.lead { color: var(--accent-2); font-family: var(--mono); font-size: 1rem; }
.egurre-products { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.egurre-club { margin-top: 1.8rem; padding: 1.4rem 1.6rem; border-left: 2px solid var(--accent); background: var(--bg-1); border-radius: 0 14px 14px 0; }
.egurre-club-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.egurre-club-mark { width: 2.75rem; height: 2.75rem; border-radius: 10px; border: 1px solid var(--line-strong); object-fit: cover; flex-shrink: 0; }
.egurre-club h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; letter-spacing: .03em; margin-bottom: 0; }
.egurre-club p { margin-top: 0; font-size: .92rem; }
/* El logo hace de h2 visualmente — envuelto en un <h2> real para que la
   sección conserve un encabezado accesible, sin repetir "EGURRE" en texto
   visible ahora que el logo ya lo dice. */
.brand-mark-heading { margin-bottom: 1.1rem; line-height: 0; }
.brand-mark { display: block; height: 2.4rem; width: auto; }
.chollos-channels { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.platform-chip { gap: .4em; }

.crate-card, .deal-card {
  aspect-ratio: 1/1; border-radius: 26px; border: 1px solid var(--line-strong);
  display: grid; place-items: center; text-align: center; gap: .8rem;
  background: linear-gradient(155deg, var(--bg-2), var(--bg-1));
  position: relative; overflow: hidden;
}
.crate-card::before, .deal-card::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb), .18), transparent 30%, transparent 70%, rgba(255,178,56,.16));
  animation: spinSlow 16s linear infinite;
}
/* La foto real del producto llena la tarjeta de lado a lado. */
.crate-card { padding: 0; }
.crate-card img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* El logo (con transparencia) flota centrado dentro del marco, con el
   degradado y el brillo giratorio de fondo asomando alrededor. */
.deal-card { padding: 3rem; }
.deal-card img { position: relative; width: 100%; height: 100%; object-fit: contain; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* -------- Brands marquee -------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); margin-top: 1rem; }
.marquee-track { display: flex; gap: clamp(2rem, 6vw, 5rem); width: max-content; animation: marqueeMove 32s linear infinite; padding: 1rem 0; }
.marquee-track span { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.2rem); text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------- Para las marcas -------- */
.for-brands { background: radial-gradient(1100px 480px at 85% -5%, rgba(var(--accent-rgb), .09), transparent 60%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fb-lead { max-width: 56ch; margin: -1.4rem auto 2.6rem; color: var(--muted); font-size: 1.02rem; }
.fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1rem; }
.fb-card { padding: 2rem 1.7rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px; background: linear-gradient(180deg, var(--bg-1), transparent); transition: transform .35s var(--ease-out), border-color .35s var(--ease-out); }
.fb-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .5); }
.fb-card h3 { font-size: 1.1rem; margin-bottom: .6rem; color: var(--cream); }
.fb-card p { color: var(--muted); font-size: .92rem; }

/* -------- Formats -------- */
.formats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1rem; }
.format-card { padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1); transition: border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.format-card:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-4px); }
.format-n { font-family: var(--mono); color: var(--accent); font-size: .8rem; }
.format-card h3 { font-size: .98rem; margin-top: .6rem; margin-bottom: .5rem; }
.format-card p { color: var(--muted); font-size: .85rem; }
.formats-grid + p { margin-top: 2.6rem; }

/* -------- Sectors -------- */
.sectors-list { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: .5rem; }
.sector-pill { font-family: var(--sans); font-size: .92rem; color: var(--cream); padding: .7rem 1.3rem; }

/* -------- Manifesto -------- */
.manifesto { text-align: center; background: linear-gradient(180deg, var(--bg-1), var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto-text { max-width: 54ch; margin: 0 auto 1.2rem; color: var(--muted); font-size: 1.05rem; }

/* -------- Contact -------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1rem; }
.contact-card { display: block; padding: 1.7rem; border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), background .3s var(--ease-out); }
.contact-card:hover { border-color: var(--accent); transform: translateY(-4px); background: var(--bg-1); }
.contact-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.contact-card p { color: var(--muted); font-size: .88rem; margin-bottom: 1rem; }
.contact-link { font-family: var(--mono); font-size: .82rem; color: var(--accent); }
.contact-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.6rem; }
.contact-socials a { display: inline-flex; align-items: center; gap: .45em; padding: .7rem 1.3rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .88rem; transition: border-color .3s var(--ease-out), color .3s var(--ease-out); }
.contact-socials a:hover { border-color: var(--accent); color: var(--accent); }

/* -------- Footer -------- */
.footer { border-top: 1px solid var(--line); padding: 2.6rem 0; position: relative; z-index: 1; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .84rem; color: var(--muted-2); }
.footer-back { color: var(--muted); }
.footer-back:hover { color: var(--accent); }
.footer-socials { display: flex; gap: 1.1rem; }
.footer-socials a { display: inline-flex; align-items: center; gap: .4em; }
.footer-socials a:hover { color: var(--accent); }

/* =============================================================
   7. Effects — reveal on scroll
   ============================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

[data-tilt] { transition: transform .5s var(--ease-out); }

/* =============================================================
   8. Responsive (mobile-first overrides via max-width fallback,
      base styles above already skew desktop; narrow below)
   ============================================================= */
@media (max-width: 1279px) {
  .formats-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 959px) {
  /* Causa real del "fondo colándose" en el menú móvil: .nav-links es
     "position: fixed", pero vive anidado dentro de <header class="nav">.
     Al bajar la página, .nav gana la clase is-solid y aplica
     backdrop-filter — y backdrop-filter (igual que transform, filter o
     perspective) crea un nuevo contenedor de posicionamiento para
     cualquier descendiente "fixed". En cuanto eso pasa, .nav-links deja
     de posicionarse contra la ventana y pasa a hacerlo contra .nav (que
     solo mide los ~64px de la cabecera): el panel se queda con altura
     ~0 y el texto del menú queda flotando sin fondo sobre la página, que
     se ve perfectamente detrás. Por eso solo fallaba después de hacer
     scroll (is-solid) y nunca en las pruebas hechas arriba del todo.
     Se desactiva el desenfoque en móvil para que .nav nunca establezca
     ese contenedor y .nav-links vuelva a fijarse contra la ventana real. */
  .nav.is-solid { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-links {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 400;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    background: var(--bg);
    font-size: 1.4rem;
    transform: translateY(-8px);
    visibility: hidden; pointer-events: none;
    transition: transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  /* El fondo nunca se anima en opacidad — solo se desliza. Así no hay
     ningún fotograma a medio abrir en el que se transparente y se vea
     el contenido de detrás (visto en algunos móviles reales). */
  .nav-links.is-open {
    visibility: visible; pointer-events: auto; transform: none;
    transition: transform .35s var(--ease-out), visibility 0s linear 0s;
  }
  .nav-cta { display: none; }
  .nav-burger { display: flex; z-index: 410; }
  .nav-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-active span:nth-child(2) { opacity: 0; }
  .nav-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero-grid, .about-grid, .egurre-grid, .chollos-grid { grid-template-columns: 1fr; }
  .about-figure { order: -1; max-width: 380px; margin-inline: auto; }
  .hero-figure { max-width: 460px; margin-inline: auto; }
  .egurre-visual, .chollos-visual { max-width: 320px; margin-inline: auto; order: -1; }
  .chollos-grid .chollos-copy { order: 1; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 719px) {
  :root { --nav-h: 64px; }
  .formats-grid, .fb-grid, .pillars-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-title { max-width: 100%; }
  section { padding: clamp(3rem, 12vw, 4.5rem) 0; }
}

@media (max-width: 539px) {
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* =============================================================
   9. Reduced-motion (only intrusive effects)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 60s; }
  .grain { display: none; }
  .crate-card::before, .deal-card::before { animation: none; }
  .dot { animation: none; }
}