/* ============================================
   OLYMPUS BUNS — Design tokens
   Paleta calcada de la web real (WEB OLYMPUS/styles.css):
   negro puro, amarillo vivo, blancos y degradados.
   El negro vive en header, hero de Inicio, cinta de
   marcas y footer; el resto del sitio es cream +
   tarjetas blancas. Radios grandes, bordes traslúcidos
   y sombras suaves, igual que la referencia.
   Bebas Neue / Inter / IBM Plex Mono, autoalojadas
   en /fonts (sin bloquear render con Google Fonts).
   ============================================ */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500.woff2') format('woff2');
}

:root {
  /* superficies claras (el sitio, por defecto) — calcado de WEB OLYMPUS */
  --bg: #f6f0e7;
  --bg-alt: #fff6e7;
  --bg-card: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --border-soft: rgba(0, 0, 0, 0.06);

  /* superficies oscuras (header, hero de Inicio, cinta de marcas, footer, menú mobile) */
  --bg-dark: #050505;
  --bg-dark-alt: #111111;
  --border-dark: rgba(255, 255, 255, 0.13);

  /* texto sobre superficies claras */
  --ink: #111111;
  --text-muted: #737373;

  /* texto sobre superficies oscuras */
  --cream: #fff6e7;
  --cream-dim: rgba(255, 246, 231, 0.72);

  /* acento ámbar: brillante para rellenos y texto sobre negro;
     "ink" (más oscuro) para texto/bordes sobre superficies claras */
  --amber: #f8bd25;
  --amber-dim: #d99b08;
  --amber-ink: #8a5d0f;

  /* rojo — uso exclusivo para estados de error, no decorativo */
  --ember: #b8321f;
  --ember-dim: #8f2617;

  --paper: #fdfcfa;
  --paper-ink: #241f16;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --radius: 14px;
  --radius-lg: 24px;
  --max-w: 1180px;
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.24);
  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--amber-ink);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--amber-ink);
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- Header / nav (siempre oscuro) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-dark);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img { height: 24px; width: auto; }

.nav-links {
  display: flex;
  gap: clamp(14px, 1.8vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nav-links a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cream-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--amber);
  border-color: var(--amber);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- Profile chip (aparece en el header cuando hay perfil) ---------- */

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: rgba(248, 189, 37, 0.12);
  border: 1px solid rgba(248, 189, 37, 0.35);
  border-radius: 100px;
  padding: 5px 14px 5px 5px;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.profile-chip:hover { border-color: var(--amber); background: rgba(248, 189, 37, 0.2); }

.profile-chip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  flex-shrink: 0;
}

.mobile-nav .profile-chip {
  margin: 4px 0 14px;
  padding: 10px 14px;
  background: var(--bg-dark-alt);
  border: 1px solid var(--border-dark);
}

.mobile-nav .profile-chip .profile-chip-avatar { width: 34px; height: 34px; font-size: 15px; }
.mobile-nav .profile-chip .profile-chip-name { font-family: var(--font-body); font-weight: 600; font-size: 14px; }

@media (max-width: 860px) {
  .site-header .profile-chip { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .site-header .profile-chip .profile-chip-name { display: none; }
}

/* ---------- Link "Iniciar sesión" (aparece cuando NO hay perfil) ---------- */

.login-link {
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.login-link:hover { border-color: var(--amber); color: var(--amber); }

.mobile-nav .login-link {
  display: block;
  width: 100%;
  text-align: center;
  margin: 4px 0 14px;
  padding: 13px;
  font-size: 14px;
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .site-header .login-link { display: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--cream);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-dark);
  z-index: 39;
  padding: 8px 24px 32px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  display: none;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-nav-links {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  border-top: 1px solid var(--border-dark);
}

.mobile-nav-links li { border-bottom: 1px solid var(--border-dark); }

.mobile-nav-links a {
  display: block;
  padding: 18px 4px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--cream);
}

.mobile-nav-links a[aria-current="page"] { color: var(--amber); }

.mobile-nav-cta { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, #fbcf5c, var(--amber));
  color: var(--ink);
  font-weight: 600;
}
.btn-primary:hover { background: linear-gradient(180deg, #ffd977, #f5b813); box-shadow: 0 10px 24px -10px rgba(248, 189, 37, 0.65); }

/* fuera de header/hero/menú mobile: superficie clara → texto/borde oscuros */
.btn-outline { border-color: var(--border); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--amber-ink); color: var(--amber-ink); }

/* dentro de header/hero/menú mobile/final-cta: superficie oscura → texto/borde claros */
.site-header .btn-outline,
.hero-section .btn-outline,
.mobile-nav-cta .btn-outline,
.final-cta .btn-outline {
  color: var(--cream);
  border-color: rgba(246, 239, 224, 0.3);
}
.site-header .btn-outline:hover,
.hero-section .btn-outline:hover,
.mobile-nav-cta .btn-outline:hover,
.final-cta .btn-outline:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.btn-ember { background: var(--ember); color: var(--cream); font-weight: 600; }
.btn-ember:hover { background: #a63d29; }

.btn-block { width: 100%; }

/* ---------- Incentive banner (perfil / 30% off) ----------
   A propósito muy llamativa: amarillo pleno + botón que pulsa,
   para que se note que hay un beneficio real esperando. */

.incentive-banner {
  background: var(--amber);
  color: var(--ink);
}

.incentive-banner .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  flex-wrap: wrap;
}

.incentive-banner strong { font-family: var(--font-body); font-weight: 800; }

.incentive-highlight {
  display: inline-block;
  background: var(--bg-dark);
  color: var(--amber);
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.incentive-banner button {
  background: var(--bg-dark);
  color: var(--amber);
  border: none;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  animation: incentive-pulse 1.7s ease-in-out infinite;
}

@keyframes incentive-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 5, 5, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(5, 5, 5, 0); transform: scale(1.05); }
}

.incentive-banner.is-done { background: var(--bg-dark); border-bottom: 1px solid var(--border-dark); }
.incentive-banner.is-done .wrap { color: var(--cream); }
.incentive-banner.is-done .eyebrow { color: var(--amber); }

/* ---------- Stamp (signature element, vive sobre el hero oscuro) ---------- */

.stamp {
  position: absolute;
  top: -18px;
  right: -14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  border: 3px solid var(--amber);
  border-radius: 50%;
  transform: rotate(-9deg);
  color: var(--amber);
  font-family: var(--font-mono);
  text-align: center;
  flex-shrink: 0;
  background: var(--bg-dark);
  z-index: 2;
}

.stamp::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--amber);
  border-radius: 50%;
}

.stamp b { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.02em; color: var(--amber); line-height: 1; }
.stamp small { font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 2px; max-width: 78px; }

/* ---------- Hero de Inicio (único bloque de contenido oscuro) ---------- */

.hero-section {
  padding: 64px 0 48px;
  background:
    radial-gradient(circle at 88% 18%, rgba(248, 189, 37, 0.24), transparent 40%),
    linear-gradient(135deg, #050505 0%, #14110d 100%);
}

.hero-section h1,
.hero-section .display { color: var(--cream); }
.hero-section p { color: var(--cream-dim); }
.hero-section .eyebrow,
.hero-section .eyebrow::before { color: var(--amber); background: var(--amber); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy p.lead { font-size: 18px; max-width: 460px; margin-top: 20px; }

.hero-visual { position: relative; }

.hero-photo {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  aspect-ratio: 1 / 1;
}

.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Rotador de fotos (usado hoy en Muestras) — varias imágenes apiladas,
   una activa a la vez, con crossfade suave entre ellas. */
.photo-rotator img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.photo-rotator img.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .photo-rotator img { transition: none; }
}

/* Aviso ámbar sobre superficie clara — usado en Mostrador para el corte
   de horario de retiro en el día. Antes vivía en el hero (fondo oscuro,
   texto cream-dim); esta es la variante para el resto del sitio. */

.notice-amber {
  border: 1px solid rgba(248, 189, 37, 0.4);
  background: rgba(248, 189, 37, 0.12);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 18px;
  max-width: 520px;
}

.notice-amber strong { color: var(--amber-ink); font-weight: 600; }

/* ---------- Sections ---------- */

section { padding: 72px 0; }

.section-tight { padding: 48px 0; }

.section-title { max-width: 640px; }

.divider {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 0;
}

/* ---------- Cards / grid (superficies claras: tarjeta blanca sobre cream) ---------- */

.grid { display: grid; gap: 20px; }

/* Pista de "hay que deslizar" — solo se ve en mobile, donde .carousel-mobile
   convierte el grid en carrusel horizontal (ver media query 860px). */
.swipe-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin: 6px 0 16px;
  animation: swipe-nudge 1.6s ease-in-out infinite;
}

@keyframes swipe-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.75; }
  50% { transform: translateX(4px); opacity: 1; }
}

.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

a.card:hover, .card.is-interactive:hover {
  transform: translateY(-3px);
  border-color: var(--border);
  box-shadow: var(--shadow-pop);
}

.value-card { text-align: left; }
.value-card h3 { font-size: 1.05rem; margin: 10px 0 6px; }
.value-card p { font-size: 14px; margin: 0; }

/* ---------- Elegí cómo empezar (fork de 2 caminos) ----------
   Reemplaza las 3 cards con emoji — sin ícono, sin card redondeada,
   solo tipografía y una línea divisoria, en línea con el resto del sitio. */

.decision-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
}

.fork-block {
  padding: 40px;
  border-left: 1px solid var(--border);
}

.fork-block:first-child { border-left: none; }

.fork-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fork-block h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.fork-block p { margin-bottom: 22px; }

@media (max-width: 700px) {
  .decision-fork { grid-template-columns: 1fr; }
  .fork-block { border-left: none; border-top: 1px solid var(--border); padding: 28px 4px; }
  .fork-block:first-child { border-top: none; }
}

/* Chips de color detrás de los íconos — para que estas grillas no queden
   todas iguales en blanco y negro. Colores de acento variados a
   propósito, además del ámbar de marca. */

.icon-chip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 6px;
}

.icon-chip.c-amber { background: rgba(248, 189, 37, 0.18); }
.icon-chip.c-blue { background: rgba(56, 142, 235, 0.14); }
.icon-chip.c-green { background: rgba(52, 168, 105, 0.14); }
.icon-chip.c-pink { background: rgba(219, 68, 133, 0.14); }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 9px;
  margin: 0 6px 6px 0;
}

.tag.tag-amber { color: var(--amber-ink); border-color: rgba(248, 189, 37, 0.5); background: rgba(248, 189, 37, 0.12); }

/* ---------- Size badge (distingue 10cm / 12cm a simple vista) ---------- */

.size-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--amber-ink);
  border-radius: 50%;
  color: var(--amber-ink);
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1;
}

.size-badge[data-size="10"] { width: 28px; height: 28px; font-size: 10px; }
.size-badge[data-size="12"] { width: 34px; height: 34px; font-size: 11px; }

.card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.card-meta .tag { margin: 0; }

/* ---------- Product cards (catálogo) ---------- */

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.product-card .photo {
  background: var(--paper);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.product-card:hover .photo img { transform: scale(1.04); }

.product-card .info { padding: 18px 20px 20px; }

.product-card .ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.product-card h3 { margin: 6px 0 8px; font-size: 1.2rem; }

.product-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 6px;
}

.product-card .price {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--amber-ink);
}

.product-card .price small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.product-card .wholesale-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.product-card .wholesale-note strong { color: var(--ink); font-weight: 600; }

.category-block { margin-bottom: 44px; }
.category-block:last-child { margin-bottom: 0; }

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.filter-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--ink);
  background: var(--bg-card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.filter-chip:hover, .filter-chip.is-active {
  border-color: var(--amber-ink);
  background: var(--amber);
  color: var(--paper-ink);
}

/* ---------- Testimonials ---------- */

.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}

.review-stars { color: var(--amber-ink); letter-spacing: 2px; font-size: 14px; margin-bottom: 10px; }

.review-text { font-size: 15px; color: var(--ink); margin-bottom: 18px; }

.review-author { display: flex; align-items: center; gap: 12px; }

.reviewer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(248, 189, 37, 0.16);
  color: var(--amber-ink);
  font-family: var(--font-display);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-author strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.review-author span { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.reviews-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 93, 15, 0.4);
  padding-bottom: 2px;
}

/* ---------- Stats strip (prueba social numérica, pegada al hero) ----------
   Extensión del hero oscuro: entra sin divider entre medio para que hero +
   stats + marquee de clientes se lean como un único bloque de apertura. */

.stats-strip {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  border-top: 1px solid rgba(248, 189, 37, 0.16);
  padding: 88px 0 96px;
}

.stats-head { position: relative; text-align: center; max-width: 640px; margin: 0 auto 48px; }
.stats-head .eyebrow, .stats-head .eyebrow::before { color: var(--amber); background: var(--amber); margin-left: auto; margin-right: auto; }
.stats-head h2 { color: var(--cream); font-size: clamp(1.5rem, 3.2vw, 2.2rem); }

/* Línea que "se dibuja" de izquierda a derecha cuando la sección entra en
   pantalla — hace de transición visual antes de los números, sin ícono
   ni glow, solo tipografía y una regla. */
.stats-rule {
  position: relative;
  height: 1px;
  max-width: 1040px;
  margin: 0 auto 0;
  background: rgba(255, 246, 231, 0.12);
}

.stats-rule-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--amber);
  transition: width 1.1s var(--ease);
}

.stats-strip.is-visible .stats-rule-fill { width: 100%; }

.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  will-change: transform;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  padding: 40px 32px;
  border-left: 1px solid rgba(255, 246, 231, 0.12);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--stat-delay, 0s);
}

.stat-item:first-child { border-left: none; }

.stat-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--amber);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

@media (max-width: 860px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item {
    border-left: none;
    border-top: 1px solid rgba(255, 246, 231, 0.12);
    padding: 28px 4px;
  }
  .stat-item:first-child { border-top: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-rule-fill { transition: none; }
  .stat-item { transition: none; opacity: 1; transform: none; }
  .stats-grid { transform: none !important; }
}

/* ---------- CTA final (cierre real de la página) ----------
   Se movió acá a pedido de David: antes quedaba pegado al marquee de
   clientes, compitiendo con "Elegí cómo empezar" un poco más abajo. Ahora
   es el último paso de la página, justo antes del footer — un cierre en
   negro que responde al negro de apertura (hero+stats+marcas), con la
   info práctica (catálogo, valores, reseñas) en el medio, en claro. */

.final-cta {
  background: var(--bg-dark);
  padding: 88px 0 96px;
  text-align: center;
  border-top: 1px solid rgba(248, 189, 37, 0.16);
}

.final-cta .eyebrow,
.final-cta .eyebrow::before { color: var(--amber); background: var(--amber); margin-left: auto; margin-right: auto; }

.final-cta-headline {
  color: var(--cream);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.02;
  margin: 14px 0 36px;
}

.final-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.final-cta .field-hint { color: var(--cream-dim); }
.final-cta .field-hint a { color: var(--amber); }

/* ---------- Client logo marquee (loop continuo, sin cortes) ----------
   Sección oscura a propósito, igual que "brands-footer" en la
   referencia — el negro no vive solo en el header y el hero. */

.clients-section {
  overflow: hidden;
  background: var(--bg-dark);
  border-top: 1px solid rgba(248, 189, 37, 0.28);
  padding: 64px 0 56px;
}

.clients-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.clients-section .eyebrow,
.clients-section .eyebrow::before { color: var(--amber); background: var(--amber); }
.clients-section h2 { color: var(--cream); }

.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);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.client-logo {
  width: 92px;
  height: 92px;
  margin-right: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  flex-shrink: 0;
}

.client-logo img { width: 100%; height: 100%; object-fit: cover; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* En mobile no hay hover para pausar el auto-scroll, así que apretar un
   logo en movimiento (los que tienen video) era casi imposible. Ahí se
   desactiva la animación y el carrousel pasa a ser 100% táctil. */
@media (max-width: 860px) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .marquee-track { animation: none; }
  .client-logo { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- Logos del marquee con testimonio en video ----------
   En vez de una sección aparte (quedaba redundante con el marquee de
   arriba), los logos que tienen video quedan clickeables ahí mismo y
   abren el testimonio en un modal — una sola sección, no dos. */

button.client-logo {
  border: none;
  padding: 0;
  font: inherit;
  cursor: default;
}

.client-logo.has-video {
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--amber);
}

.client-logo.has-video:hover,
.client-logo.has-video:focus-visible {
  box-shadow: 0 0 0 3px var(--amber);
}

/* leve oscurecido de fondo para que el círculo ámbar resalte siempre,
   no solo al pasar el mouse — el problema reportado fue justo ese. */
.client-logo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 5, 0.22);
}

.client-logo-play-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: client-logo-pulse 2.2s ease-in-out infinite;
}

.client-logo.has-video:hover .client-logo-play-circle,
.client-logo.has-video:focus-visible .client-logo-play-circle {
  animation-play-state: paused;
  transform: scale(1.12);
}

.client-logo-play-circle::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--bg-dark);
}

@keyframes client-logo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .client-logo-play-circle { animation: none; }
}

/* ---------- Modal de testimonio en video ---------- */

.video-modal-inner { max-width: 560px; }

.video-modal-player {
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

.video-modal-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Order picker (mostrador) ---------- */

.order-table {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.order-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}

.order-row:last-child { border-bottom: none; }

.order-row .thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  flex-shrink: 0;
}

.order-row .thumb img { width: 100%; height: 100%; object-fit: cover; }

.order-row .name { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 10px; }
.order-row .name h4 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink); }
.order-row .name span { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.order-row .unit-price { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); width: 110px; text-align: right; }
.order-row .unit-price small { display: block; color: var(--text-muted); font-size: 10px; }

.stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.step-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}

.step-btn:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.step-btn:active { transform: translateY(1px); }

.qty-input {
  width: 56px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 8px 4px;
  text-align: center;
  -moz-appearance: textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.qty-input:focus { outline: 2px solid var(--amber-ink); border-color: var(--amber-ink); }

/* El "recibo": fondo negro a propósito, como .totals en la referencia —
   tiene que notarse de un vistazo cuánto se está por pagar. */

.order-summary {
  padding: 18px 20px 20px;
  background: var(--bg-dark);
  color: var(--cream);
  font-family: var(--font-mono);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--cream-dim);
  padding: 6px 0;
}

.order-summary-row.total-row {
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--border-dark);
  font-size: 17px;
  font-weight: 600;
  color: var(--cream);
}

.order-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-dark);
}

.order-mode-row .tag {
  color: var(--cream-dim);
  border-color: var(--border-dark);
}

.order-mode-row .tag.tag-amber {
  color: var(--amber);
  border-color: rgba(248, 189, 37, 0.45);
  background: rgba(248, 189, 37, 0.14);
}

.order-mode-row .units-count { color: var(--cream-dim); font-size: 12px; }

.order-summary .total { color: var(--amber); font-size: 26px; font-weight: 700; }

.wholesale-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 20px 0;
}

.perfil-summary-box {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.perfil-summary-box.is-visible { display: flex; flex-wrap: wrap; }

.perfil-summary-box .edit-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Forms (siempre sobre tarjeta blanca) ---------- */

.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

/* ---------- Vista de perfil (solo lectura) ---------- */

.profile-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}

.profile-field-row:last-of-type { border-bottom: none; }

.profile-field-row span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.profile-field-row strong { font-weight: 600; color: var(--ink); text-align: right; }

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
}

.field input[readonly] { color: var(--text-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--amber-ink);
  outline-offset: 1px;
  border-color: var(--amber-ink);
}

.field textarea { resize: vertical; min-height: 90px; }

.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.field-hint.is-ok { color: #2e8a4f; }

/* Botón "Mostrar/Ocultar" agregado por JS a todos los campos de
   contraseña del sitio — envuelve el input existente, sin tocar el HTML. */
.password-field-wrapper { position: relative; }
.password-field-wrapper input { padding-right: 76px; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.password-toggle:hover { color: var(--amber-ink); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }

.radio-pill {
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-muted);
}

.radio-pill input { display: none; }

.radio-pill:has(input:checked) {
  border-color: var(--amber-ink);
  color: var(--amber-ink);
  background: rgba(248, 189, 37, 0.1);
}

.field-error {
  color: var(--ember);
  font-size: 12px;
  margin-top: 6px;
  display: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--ember); }

.field.has-error .field-error { display: block; }

.autofill-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
  background: rgba(248, 189, 37, 0.1);
  border: 1px solid rgba(248, 189, 37, 0.35);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 20px;
  display: none;
  align-items: center;
  gap: 8px;
}

.autofill-note.is-visible { display: flex; }

/* ---------- Modal (crear perfil) — tarjeta blanca ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-overlay.is-open { display: flex; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: 100%;
  padding: 30px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* ---------- Footer (siempre oscuro) ---------- */

.site-footer {
  background: var(--bg-dark);
  color: var(--cream);
  padding: 48px 0 32px;
}

.site-footer p { color: var(--cream-dim); }

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-dark);
}

.footer-brand { display: flex; align-items: flex-start; gap: 12px; max-width: 320px; }
.footer-brand img { height: 20px; width: auto; margin-top: 3px; }
.footer-brand p { font-size: 13px; margin: 6px 0 0; }

.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin: 0 0 12px;
  font-weight: 500;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { text-decoration: none; color: var(--cream-dim); font-size: 14px; }
.footer-col a:hover { color: var(--amber); }

.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cream-dim);
}

/* ---------- Toast (confirmación de envío simulada) ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
  box-shadow: var(--shadow-pop);
}

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

/* ---------- Ubicación (mapa + fotos de la fábrica) ---------- */

.location-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.location-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 420px;
}

.location-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

.location-photos {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
}

.location-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.location-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .location-grid { grid-template-columns: 1fr; }
  .location-map, .location-map iframe { min-height: 280px; }
  .location-photos { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .location-photo { aspect-ratio: 1 / 1; }
}

/* ---------- Placeholder shell (para secciones sin contenido final aún) ---------- */

.placeholder-block {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed var(--border);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* ---------- Nuestra historia (relato en capítulos alternados) ---------- */

.story-lead { max-width: 640px; margin-bottom: 8px; }

.story-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px dashed var(--border);
}

.story-chapter:last-of-type { border-bottom: none; padding-bottom: 8px; }

.story-chapter .story-photo { order: 1; }
.story-chapter .story-text { order: 2; }
.story-chapter.is-reverse .story-photo { order: 2; }
.story-chapter.is-reverse .story-text { order: 1; }

.story-stat {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.08;
  color: var(--ink);
  border-left: 3px solid var(--amber-ink);
  padding-left: 16px;
  margin-bottom: 14px;
  text-wrap: balance;
}

.story-text p { font-size: 15px; margin-bottom: 0; }

.story-photo {
  aspect-ratio: 3 / 4;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
}

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

.story-photo.is-key { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--amber), var(--shadow-pop); }

/* Testimonio sin video real todavía — mostramos el logo del cliente bien
   contenido (no recortado como el poster de un video) sobre un fondo
   prolijo, con una etiqueta discreta en vez de controles de un video que
   todavía no existe. Sacar la clase story-photo-soon cuando se suba el
   video real (ver comentario en clientes.html). */
.story-photo-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
}

.story-photo-soon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-soon-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--bg-dark);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}

.story-close {
  text-align: center;
  max-width: 420px;
  margin: 12px auto 0;
  padding-top: 40px;
}

.story-close .story-photo {
  aspect-ratio: 4 / 3;
  margin: 0 auto 24px;
  max-width: 380px;
}

/* La foto de la fábrica vieja es apaisada, no vertical como el resto —
   un recorte 3/4 le comería los costados. 4/3 la respeta mejor. */
.story-photo.is-wide { aspect-ratio: 4 / 3; }

.story-close .story-stat {
  border-left: none;
  padding-left: 0;
  display: inline-block;
}

.story-signoff {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--amber-ink);
  margin-top: 10px;
}

@media (max-width: 860px) {
  .story-chapter { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .story-chapter .story-photo,
  .story-chapter.is-reverse .story-photo { order: 1; }
  .story-chapter .story-text,
  .story-chapter.is-reverse .story-text { order: 2; }
}

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.gap-16 { gap: 16px; }
.items-center { align-items: center; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 420px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .btn-outline,
  .nav-actions .btn-primary { display: none; }
  .nav-toggle { display: flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
  .site-header .wrap { height: 60px; }
  .stamp { width: 92px; height: 92px; top: -10px; right: -8px; }
  .stamp b { font-size: 22px; }
  .footer-top { flex-direction: column; }
  .footer-cols { gap: 32px; }

  /* Carrusel horizontal con swipe — Elegí cómo empezar, Por qué Olympus,
     Reseñas. El bleed a los bordes (margin negativo + padding) deja el
     borde de la próxima card asomando, para que se note que hay que
     deslizar sin necesitar sólo el texto de ayuda. */
  .carousel-mobile {
    display: flex !important;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -24px;
    padding: 4px 24px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .carousel-mobile::-webkit-scrollbar { display: none; }
  .carousel-mobile > * {
    scroll-snap-align: start;
    flex: 0 0 84%;
    max-width: 360px;
  }

  .swipe-hint { display: flex; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .order-row { flex-wrap: wrap; }
  .order-row .unit-price { width: auto; margin-left: auto; text-align: right; }
  .stats-grid { grid-template-columns: 1fr; gap: 14px; }
  .carousel-mobile > * { flex-basis: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; animation-duration: 0.001ms !important; }
}

/* ================================================================
   CLIENTES — muro de marcas + testimonios
   Rediseño: la página abre comunicando ESCALA (un muro de logos en
   movimiento) y recién después muestra la PRUEBA (los testimonios).
   Antes eran 3 bloques gigantes de scroll para 3 clientes, que
   transmitía lo contrario de lo que se quiere transmitir.
   ================================================================ */

/* ---------- 01 · Impacto ---------- */

.wall-hero {
  background: var(--bg-dark);
  padding: clamp(56px, 9vw, 96px) 0 clamp(32px, 5vw, 48px);
}

.wall-hero .eyebrow,
.wall-hero .eyebrow::before { color: var(--amber); background: var(--amber); }

.wall-hero-title {
  color: var(--cream);
  margin-top: 14px;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.95;
}

.wall-hero-title em { font-style: normal; color: var(--amber); }

.wall-hero-lead {
  margin-top: 22px;
  max-width: 520px;
  color: var(--cream-dim);
  font-size: clamp(15px, 2vw, 18px);
}

/* ---------- 02 · Muro de logos ---------- */

.wall-section {
  background: var(--bg-dark);
  padding: clamp(8px, 2vw, 20px) 0 clamp(48px, 7vw, 80px);
  overflow: hidden;
}

.wall-rows { display: flex; flex-direction: column; gap: 14px; }

.wall-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wall-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: wall-scroll 46s linear infinite;
}

/* Filas alternadas en sentido contrario — le da profundidad al muro
   sin que ningún logo se pierda de vista demasiado rápido. */
.wall-row.is-reverse .wall-track { animation-direction: reverse; }

.wall-row:hover .wall-track,
.wall-row:focus-within .wall-track { animation-play-state: paused; }

@keyframes wall-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.wall-logo {
  position: relative;
  width: clamp(104px, 13vw, 148px);
  height: clamp(104px, 13vw, 148px);
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid transparent;
  padding: 0;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.wall-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

/* Etiqueta con el nombre — aparece al pasar por encima, así el muro
   se lee limpio de lejos y da información de cerca. */
.wall-logo-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 7px 8px;
  background: linear-gradient(transparent, rgba(5, 5, 5, 0.92) 42%);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.wall-logo:hover,
.wall-logo:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(248, 189, 37, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.wall-logo:hover .wall-logo-label,
.wall-logo:focus-visible .wall-logo-label { opacity: 1; transform: translateY(0); }

/* Con testimonio cargado: cursor, play visible y borde ámbar fijo */
button.wall-logo { cursor: pointer; font: inherit; }
.wall-logo.has-video { border-color: rgba(248, 189, 37, 0.45); }
.wall-logo.has-video .wall-logo-label { color: var(--amber); font-weight: 700; }

.wall-logo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}

.wall-logo-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 12px solid var(--bg-dark);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.wall-logo.has-video:hover .wall-logo-play,
.wall-logo.has-video:focus-visible .wall-logo-play { transform: translate(-50%, -50%) scale(1.12); }

.wall-more {
  text-align: center;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wall-more span {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid rgba(248, 189, 37, 0.4);
  border-radius: 999px;
  color: var(--amber);
}

/* ---------- 03 · Testimonios ---------- */

.testimonios-section { background: var(--bg); }
.testimonios-title { margin-top: 10px; font-size: clamp(1.9rem, 4.4vw, 2.8rem); }

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.testimonio-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  text-align: left;
  font: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

button.testimonio-card { cursor: pointer; }

.testimonio-card.has-video:hover,
.testimonio-card.has-video:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(248, 189, 37, 0.6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.testimonio-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-dark);
  overflow: hidden;
}

.testimonio-media img { width: 100%; height: 100%; object-fit: cover; }

.testimonio-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease;
}

.testimonio-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-left: 18px solid var(--bg-dark);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.testimonio-card.has-video:hover .testimonio-play { transform: translate(-50%, -50%) scale(1.1); }

.testimonio-nombre {
  display: block;
  padding: 16px 18px 2px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.testimonio-cta {
  display: block;
  padding: 0 18px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
  font-weight: 600;
}

.testimonio-cta.is-muted { color: var(--text-muted); font-weight: 400; }

/* ---------- Mobile / accesibilidad ---------- */

@media (max-width: 860px) {
  /* Sin hover para pausar, el muro pasa a ser táctil como el del Home. */
  .wall-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .wall-track { animation: none; }
  .wall-logo { scroll-snap-align: start; }
  /* En táctil no hay hover: el nombre se muestra siempre. */
  .wall-logo-label { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; flex-wrap: wrap; width: auto; }
  .wall-logo-label { opacity: 1; transform: none; }
}

/* ================================================================
   RETIRO POR FÁBRICA — continuidad del flujo de pedido
   Antes, al terminar de elegir productos no había ninguna acción
   visible: había que adivinar que el formulario seguía más abajo.
   Ahora el resumen cierra con un botón, y una barra fija acompaña
   el scroll mostrando total + cómo seguir.
   ================================================================ */

.btn-continuar { margin-top: 18px; }

.order-summary-hint {
  margin-top: 10px;
  text-align: center;
  color: var(--cream-dim);
}

/* El resumen vive sobre fondo oscuro — el hint hereda ese contraste. */
.order-summary .order-summary-hint { color: var(--cream-dim); }

/* ---------- Barra fija de pedido ---------- */

.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bg-dark);
  border-top: 1px solid rgba(248, 189, 37, 0.35);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.32);
  transform: translateY(110%);
  transition: transform 0.28s ease;
}

.order-bar.is-visible { transform: translateY(0); }

.order-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
}

.order-bar-info { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

.order-bar-units {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}

.order-bar-total {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  color: var(--amber);
  line-height: 1;
}

.order-bar .btn { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 600px) {
  .order-bar-inner { padding: 10px 16px; gap: 10px; }
  .order-bar .btn { padding: 11px 16px; font-size: 12px; }
}

/* ---------- Bloque de cuenta en el paso 2 ---------- */

.cuenta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.cuenta-box-main { display: flex; flex-direction: column; gap: 2px; }
.cuenta-box-main strong { font-size: 15px; }
.cuenta-box-main span { font-size: 13.5px; color: var(--text-muted); }
.cuenta-box .btn { flex-shrink: 0; }

.crear-perfil-hint { margin-top: 14px; text-align: center; }
.crear-perfil-hint a { color: var(--amber-ink); font-weight: 600; }

/* ================================================================
   MUESTRAS — rediseño editorial
   El objetivo de esta página no es "completar un formulario", es que
   el potencial cliente quiera probar el producto. Por eso la foto
   abre la página con protagonismo real y el formulario viene después,
   ya con la intención formada.
   ================================================================ */

/* ---------- 01 · Producto + propuesta ---------- */

.muestras-hero {
  background: var(--bg-dark);
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}

.muestras-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.muestras-visual { position: relative; }

/* Fotos grandes, sin marco redondeado de "card": un rectángulo casi
   editorial con un filo ámbar que ancla la marca. */
.muestras-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.muestras-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(248, 189, 37, 0.35);
  pointer-events: none;
}

/* Todas las fotos quedan opacas y apiladas; la activa sube de capa y
   entra con un fade POR ENCIMA de la anterior. Si en cambio se hiciera
   cross-fade bajando una y subiendo otra, en el medio de la transición
   ambas quedan a media opacidad y se ve el fondo claro del contenedor
   (la foto "parpadea en blanco"). */
.muestras-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 1;
}

.muestras-photo img.is-active {
  z-index: 2;
  animation: muestras-foto-in 1.1s ease;
}

@keyframes muestras-foto-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .muestras-photo img.is-active { animation: none; }
}

.muestras-intro .eyebrow,
.muestras-intro .eyebrow::before { color: var(--amber); background: var(--amber); }

.muestras-title {
  margin-top: 16px;
  color: var(--cream);
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 0.94;
}

.muestras-lead {
  margin-top: 22px;
  max-width: 440px;
  color: var(--cream);
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.5;
}

/* Dato operativo (envío vs. retiro) — barra ámbar a la izquierda en vez
   de una caja completa, para no romper el aire de la composición. */
.muestras-envio {
  margin-top: 28px;
  max-width: 460px;
  padding-left: 16px;
  border-left: 3px solid var(--amber);
  color: var(--cream-dim);
  font-size: 14.5px;
  line-height: 1.55;
}

.muestras-envio strong { color: var(--amber); font-weight: 700; }

/* ---------- 02 · Formulario ---------- */

.muestras-form-section {
  background: var(--bg);
  padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 100px);
}

.muestras-form-wrap { max-width: 780px; }

.muestras-form-head { margin-bottom: 34px; }

.muestras-form-title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.05;
}

.muestras-form-lead {
  margin-top: 12px;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 16px;
}

/* Dos columnas para los campos cortos — el formulario entra casi
   completo en pantalla en vez de ser una tira infinita. */
.muestras-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.label-opcional { color: var(--text-muted); font-weight: 400; }

/* ---------- Chips "¿qué querés mejorar?" ---------- */

.mejorar-field { margin-top: 10px; }

.mejorar-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mejorar-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.mejorar-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.mejorar-chip:hover { border-color: var(--amber-dim); transform: translateY(-1px); }

/* El checkbox real queda accesible (foco, teclado, lectores) pero no se
   dibuja: el estado se comunica con el fondo ámbar del chip. */
.mejorar-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}

.mejorar-chip:has(input:checked) {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--paper-ink);
  font-weight: 700;
}

.mejorar-chip:has(input:focus-visible) { outline: 2px solid var(--amber-ink); outline-offset: 2px; }

/* ---------- CTA ---------- */

.muestras-cta { margin-top: 30px; }

.muestras-cta-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- Mobile ----------
   Orden pedido: título → foto → explicación → envío/retiro → formulario. */

@media (max-width: 860px) {
  .muestras-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .muestras-visual { order: 2; }
  .muestras-intro { order: 1; display: contents; }
  .muestras-intro .eyebrow { order: 1; }
  .muestras-title { order: 1; }
  .muestras-lead { order: 3; max-width: none; }
  .muestras-envio { order: 4; max-width: none; }
  .muestras-grid-2 { grid-template-columns: 1fr; gap: 0; }
}

/* `display: contents` en el contenedor rompe el layout si el navegador no
   lo soporta — en ese caso volvemos al orden natural (que sigue siendo
   legible, solo cambia que la foto queda arriba del texto). */
@supports not (display: contents) {
  @media (max-width: 860px) {
    .muestras-intro { display: block; }
    .muestras-visual { order: 0; }
  }
}