/* ==========================================================================
   BORIU — PDP · ESTÉTICA ÚNICA
   Derivada de boriu.com.ar (theme Recife) + ad de lanzamiento.
   Monocromática: blanco + negro puro. Sin color de acento (el acento ES negro).
   Tipografía: Sofia Sans Extra Condensed (display) + Inter (body).

   Este archivo NO cambia entre versiones. Las versiones v1/v2/v3 varían
   SÓLO en estructura (orden de secciones). La estética es una sola.
   ========================================================================== */

/* --------- Design tokens ----------------------------------------------- */
/* Scopeado a .boriu-pack: las variables viven en el wrapper del pack, no en
   :root, para no filtrar tokens al resto del theme Recife. */
.boriu-pack {
  /* Color — monocromo (theme Boriu). impeccable: OKLCH, sin #000/#fff
     puros. Neutros entibiados hacia el hue de marca (croma 0.004-0.008):
     el monocromo se mantiene, pero sin la dureza del negro/blanco de pantalla. */
  --ink: oklch(0.17 0.008 32);
  --ink-soft: oklch(0.28 0.008 32);
  --muted: oklch(0.55 0.007 32);
  --muted-soft: oklch(0.71 0.006 32);
  --bg: oklch(0.993 0.002 70);
  --surface: oklch(0.965 0.004 50);
  --surface-2: oklch(0.93 0.005 45);
  --dark: oklch(0.17 0.008 32);
  --dark-2: oklch(0.24 0.008 32);
  --border: oklch(0.91 0.004 45);
  --border-strong: oklch(0.82 0.006 40);
  --border-dark: oklch(0.30 0.008 32);

  /* Color secundario — RESERVADO sólo a elementos de promo/descuento.
     Regla: rojo = promo (temporal). Negro = marca (permanente). */
  --promo: oklch(0.585 0.214 29);
  --promo-ink: oklch(0.50 0.190 29);

  /* Swatches placeholder (se sobrescriben con variantes reales) */
  --swatch-1: #1A1A1A;
  --swatch-2: #6E5B3A;
  --swatch-3: #4A3F2E;
  --swatch-4: #8B6B7A;

  /* Tipografía */
  --font-display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  /* Escala tipográfica */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;
  --fs-4xl: 5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container: 1240px;
  --container-pad: 1.25rem;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Motion — emil: curvas custom (las nativas son débiles), sin bounce.
     ease-out para entradas e interacción; ease-in-out para movimiento en pantalla. */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);        /* ease-out fuerte (emil) */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);   /* ease-out-cubic, reveals */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movimiento en pantalla */
  --dur-press: 130ms;   /* feedback de presión 100-160ms */
  --dur-fast: 150ms;
  --dur-med: 230ms;
  --dur-slow: 440ms;
}

/* --------- Base reset (scopeado a .boriu-pack: NO pisa el theme Recife) -- */
.boriu-pack, .boriu-pack *, .boriu-pack *::before, .boriu-pack *::after { box-sizing: border-box; }
.boriu-pack {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.boriu-pack h1, .boriu-pack h2, .boriu-pack h3, .boriu-pack h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}
.boriu-pack p { margin: 0; }
.boriu-pack ul { list-style: none; padding: 0; margin: 0; }
.boriu-pack img { display: block; max-width: 100%; height: auto; }
.boriu-pack button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
.boriu-pack a { color: inherit; text-decoration: none; }

/* --------- Utilities --------------------------------------------------- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.section-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--ink);
}
.boriu-pack .section-title {
  font-size: clamp(var(--fs-2xl), 5.5vw, var(--fs-3xl));
  text-wrap: balance;
}
.section-title-sm {
  font-size: var(--fs-2xl);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.section-head { margin-bottom: var(--space-7); }

/* --------- PDP wrapper ------------------------------------------------- */
.pdp {
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
@media (min-width: 900px) {
  /* Desktop: usa todo el ancho de la pantalla, padding lateral generoso.
     Sobrescribimos --container-pad en el scope local para que los bloques
     full-bleed (marquee, picker, etc.) sigan calzando con margin-inline. */
  .pdp {
    padding: 0 var(--space-7);
    --container-pad: var(--space-7);
  }
}
.pdp > section { padding-block: var(--space-8); }
.pdp > section + section { border-top: 1px solid var(--border); }

/* ==========================================================================
   1. ABOVE THE FOLD
   ========================================================================== */
.pdp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-top: var(--space-6) !important;
}
@media (min-width: 900px) {
  /* D-pack3 desktop:
     - col izquierda: banner + slots + progress (apilados)
     - col derecha: purchase como flex column compacta (sin estiramientos
       de filas, todos los elementos quedan juntos). */
  .pdp-hero {
    grid-template-columns: 1.4fr 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-4);
    grid-template-areas:
      "banner   purchase"
      "slots    purchase"
      "progress purchase";
  }
  .pack-builder  { grid-area: banner; }
  .pack-slots    { grid-area: slots; }
  .pack-progress { grid-area: progress; align-self: start; }
  .pdp-purchase  {
    grid-area: purchase;
    align-self: start;
    gap: var(--space-3);
  }
  /* Banner responsive: altura escala con viewport entre 440 y 620px */
  .pack-hero-banner {
    aspect-ratio: auto !important;
    min-height: clamp(440px, 45vw, 620px) !important;
    width: 100%;
  }
}

.pdp-gallery { display: grid; gap: var(--space-3); }
.gallery-main {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  /* redesign: profundidad con sombra tintada al hue de marca, no negro plano */
  box-shadow:
    0 1px 2px oklch(0.17 0.008 32 / 0.04),
    0 12px 28px -12px oklch(0.17 0.008 32 / 0.16);
}
.gallery-main-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .gallery-main:hover .gallery-main-img { transform: scale(1.02); }
}

/* Flag de descuento sobre la foto principal — color promo */
.gallery-flag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  background: var(--promo);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  /* entra al cargar para que el ojo aterrice en la promo */
  animation: flag-in 0.5s var(--ease) 0.25s both;
}
@keyframes flag-in {
  from { opacity: 0; transform: scale(0.82) translateY(-5px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-flag, .promo-countdown { animation: none; }
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.gallery-thumb {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-press) var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .gallery-thumb:hover { border-color: var(--border-strong); }
}
.gallery-thumb:active { transform: scale(0.95); }

.pdp-purchase {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  position: sticky;
  top: var(--space-5);
}

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-3);
  background: var(--promo);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.promo-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bg);
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.product-name {
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl));
  letter-spacing: -0.01em;
  text-wrap: balance;
  line-height: 0.92;
}

/* D-pack3: el slogan domina, el nombre del producto queda como subtitle */
.pack-slogan {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl));
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-wrap: balance;
  margin: 0;
}
.product-name--sub {
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  margin-top: calc(-1 * var(--space-2));
}
@media (max-width: 480px) {
  .pack-slogan { font-size: 3rem; }
  .product-name--sub { font-size: var(--fs-sm); }
}

.price-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
}
.price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Chip de descuento — protagonista, color promo */
.discount-chip {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-xl);
  background: var(--promo);
  color: var(--bg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.price-current {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  line-height: 1;
}
.price-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.price-old {
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  font-weight: var(--weight-semibold);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
/* Ahorro — refuerza el descuento; color promo, sin competir con el chip */
.price-savings {
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  color: var(--promo-ink);
}
.price-savings::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  background: var(--promo);
  transform: translateY(-1px);
}
.price-installments {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.variants-label {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  color: var(--muted);
  margin-bottom: var(--space-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.color-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* impeccable: hit area mínima 44x44px aunque el chip mida 36px */
.swatch {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-chip {
  display: block;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  box-shadow: inset 0 0 0 2px var(--bg);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
/* emil: hover sólo en dispositivos con puntero fino (evita falso hover en touch) */
@media (hover: hover) and (pointer: fine) {
  .swatch:hover .swatch-chip { transform: scale(1.08); }
}
.swatch:active .swatch-chip { transform: scale(0.94); }
.swatch input:checked + .swatch-chip { border-color: var(--ink); }
.swatch input:focus-visible + .swatch-chip { outline: 2px solid var(--ink); outline-offset: 3px; }

.boriu-pack .btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) !important;
  background: oklch(0.17 0.008 32) !important;
  color: oklch(0.993 0.002 70) !important;
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  width: 100%;
  margin-top: var(--space-2);
  transition: transform var(--dur-press) var(--ease), opacity var(--dur-fast) var(--ease);
}
/* emil: hover gateado a puntero fino */
@media (hover: hover) and (pointer: fine) {
  .boriu-pack .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
}
/* emil: feedback de presión — la interfaz "escucha" el click */
.boriu-pack .btn-primary:active { transform: scale(0.97); }
/* impeccable: estados que faltaban — disabled y loading */
.boriu-pack .btn-primary:disabled,
.boriu-pack .btn-primary[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}
.boriu-pack .btn-primary[aria-busy="true"] {
  cursor: progress;
  color: transparent;
  position: relative;
}
.boriu-pack .btn-primary[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--bg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* .btn-secondary prefijado con .boriu-pack: Recife ya usa .btn-secondary
   (6 sitios). El prefijo evita pisar esos y gana por especificidad adentro del pack. */
.boriu-pack .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-press) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .boriu-pack .btn-secondary:hover { background: var(--ink); color: var(--bg); }
}
.boriu-pack .btn-secondary:active { transform: scale(0.97); }

.micro-trust {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.micro-trust li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.micro-trust svg { flex-shrink: 0; color: var(--ink); }

/* --------- Hero objeción-killer (sólo v3) ------------------------------ */
.objection-killers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.objection-killers li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.objection-killers strong {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.objection-killers span { font-size: var(--fs-xs); color: var(--muted); }

/* ==========================================================================
   2. TRUST STRIP — bloque negro de puntuación
   ========================================================================== */
.trust-strip {
  background: var(--dark);
  color: var(--bg);
  margin-inline: calc(-1 * var(--container-pad));
  padding-block: var(--space-4) !important;
  border-top: none !important;
}
.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-7);
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
}
.trust-strip li { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust-strip li strong { font-weight: var(--weight-bold); }
.trust-strip a {
  color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.trust-strip a:hover { border-color: var(--bg); }

/* ==========================================================================
   MARQUEE DE PROMO — banda roja en movimiento (recurso para destacar la promo)
   Ticker streetwear: anuncia la promo sin urgencia de reloj.
   ========================================================================== */
.promo-marquee {
  background: var(--promo);
  color: var(--bg);
  margin-inline: calc(-1 * var(--container-pad));
  padding-block: var(--space-4) !important;
  border-top: none !important;
  overflow: hidden;
}
/* Balance: la sección que sigue al marquee no necesita el padding-top
   completo de sección; el marquee ya da separación. */
.promo-marquee + section { padding-top: var(--space-6) !important; }
.promo-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.promo-marquee:hover .promo-marquee-track { animation-play-state: paused; }
.promo-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.promo-marquee-group > span {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-inline: var(--space-5);
}
.promo-marquee-sep {
  color: var(--bg);
  opacity: 0.55;
  font-size: var(--fs-md) !important;
}
@media (prefers-reduced-motion: reduce) {
  /* sin movimiento: queda como banda estática, sólo se ve el primer grupo */
  .promo-marquee-track { animation: none; }
  .promo-marquee-group:nth-child(2) { display: none; }
  .promo-marquee { text-align: center; }
}

/* ==========================================================================
   3. EL SELLO BORIU
   impeccable: des-cardificado. En vez de 4 cards idénticas (anti-patrón),
   filas editoriales numeradas con regla superior. El número es el ancla.
   ========================================================================== */
.sello-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sello;
}
@media (min-width: 760px) { .sello-list { grid-template-columns: 1fr 1fr; } }

.sello-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 2px solid var(--ink);
}
.sello-num {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-xl);
  line-height: 0.9;
  color: var(--ink);
}
.sello-body { display: flex; flex-direction: column; gap: var(--space-2); }
.sello-body h3 {
  font-size: var(--fs-xl);
  font-weight: var(--weight-extra);
  font-family: var(--font-display);
}
.sello-body p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 38ch;
}

/* ==========================================================================
   4. CALCE / FIT
   ========================================================================== */
.fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) { .fit { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: stretch; } }

.fit-lead {
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  margin-bottom: var(--space-6);
  max-width: 50ch;
  line-height: 1.5;
}
.fit-list { display: grid; gap: 0; }
.fit-list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-5);
  font-size: var(--fs-lg);
  line-height: 1.45;
}
.fit-list strong {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 1;
}
.fit-list span { color: var(--muted); }

.fit-visual {
  background: var(--surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Mobile: mantengo aspect-ratio cuadrado (la columna queda apilada) */
@media (max-width: 899px) {
  .fit-visual { aspect-ratio: 1; }
}
/* Desktop: el visual estira a la altura del contenido de la izquierda
   para evitar espacio muerto debajo de la lista */
@media (min-width: 900px) {
  .fit-visual { aspect-ratio: auto; align-self: stretch; min-height: 100%; }
}
.fit-visual-inner { position: relative; text-align: center; padding: var(--space-6); }
.fit-visual-label {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-4xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  line-height: 0.9;
}
.fit-visual-bar {
  height: 6px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.fit-visual-bar span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  width: 100%;
  transform-origin: left;
  transform: scaleX(0.32);
  /* emil: el loop infinito es ruido visual. Se llena UNA vez, al revelarse
     la sección, e ilustra el rango de ajuste; después descansa. */
  transition: transform 1.1s var(--ease-in-out);
}
.fit-visual.is-in .fit-visual-bar span { transform: scaleX(1); }
.fit-visual-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   STATEMENT — ANTI GENÉRICO / IDENTIDAD (dolor DG05)
   Banda negra de puntuación. Claim que arma el 1-2 con la sección Origen.
   ========================================================================== */
.statement {
  background: var(--dark);
  color: var(--bg);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad) !important;
  padding-block: var(--space-9) !important;
  border-top: none !important;
  text-align: center;
}
.statement-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: var(--space-4);
}
.statement-line {
  font-size: clamp(var(--fs-3xl), 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.statement-line s {
  text-decoration: line-through;
  text-decoration-thickness: 0.07em;
  color: var(--muted);
}
.statement-sub {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==========================================================================
   5. ORIGIN — HECHO EN LA PLATA
   ========================================================================== */
.origin {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--surface);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad) !important;
  border-top: none !important;
  border-bottom: none !important;
}
@media (min-width: 900px) {
  .origin { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
}
.origin-image {
  aspect-ratio: 4 / 3;
  background: var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.origin-image img { width: 100%; height: 100%; object-fit: cover; }
.origin-image::after {
  content: 'BORIU';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: clamp(5rem, 16vw, 11rem);
  color: var(--bg);
  letter-spacing: -0.02em;
  pointer-events: none;
  z-index: -1;
}
.origin-content p {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: var(--space-4);
}
.origin-stat {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-4);
  font-size: var(--fs-sm) !important;
  color: var(--muted) !important;
}
.origin-stat strong { color: var(--ink); }

/* ==========================================================================
   6. DESCRIPCIÓN + FICHA TÉCNICA
   ========================================================================== */
.description {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) { .description { grid-template-columns: 1.4fr 1fr; gap: var(--space-7); } }

.description-content {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 68ch;          /* impeccable: largo de línea legible 65-75ch */
}
.description-content p + p { margin-top: var(--space-4); }

.specs {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.specs-title {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}
.specs dl { display: grid; gap: 0; margin: 0; }
.specs div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.specs div:last-child { border-bottom: none; }
.specs dt {
  color: var(--muted);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  align-self: center;
}
.specs dd { margin: 0; font-weight: var(--weight-medium); }

/* ==========================================================================
   7. SOCIAL / REVIEWS
   ========================================================================== */
/* redesign: des-cardificado. Las reviews dejan de ser cards con borde;
   son citas editoriales con regla superior, alturas variables. */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-7);
}
@media (min-width: 700px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}
.review-stars { color: var(--ink); font-size: var(--fs-base); letter-spacing: 0.12em; }
.review-text {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-lg);
  line-height: 1.18;
  color: var(--ink);
  text-wrap: pretty;
}
.review-author {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ig-link {
  display: inline-block;
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  border-bottom: 3px solid var(--ink);
  padding-bottom: var(--space-1);
  transition: padding-bottom var(--dur-fast) var(--ease);
}
.ig-link:hover { padding-bottom: var(--space-2); }

/* ==========================================================================
   8. FAQ
   ========================================================================== */
.faq-list { display: grid; gap: 0; max-width: 820px; }
@media (min-width: 900px) {
  .faq-list {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
}
.faq-list details {
  border-top: 1px solid var(--border);
  padding-block: var(--space-4);
}
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-2xl);
  color: var(--ink);
  transition: transform var(--dur-med) var(--ease);
  line-height: 1;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 65ch;
}

/* ==========================================================================
   9. CROSS-SELL — GORRAS RELACIONADAS
   ========================================================================== */
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   10. COMPLETÁ EL LOOK — bloque negro de puntuación (cierre)
   ========================================================================== */
.completa-look {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--dark);
  color: var(--bg);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad) !important;
  border-top: none !important;
  border-radius: var(--radius-md);
  margin-block: var(--space-7);
}
@media (min-width: 900px) {
  .completa-look { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
}
.completa-look .section-eyebrow { color: var(--muted-soft); }
.completa-look .section-eyebrow::before { background: var(--bg); }
.completa-look .boriu-pack .section-title { color: var(--bg); }
.completa-look p {
  color: rgba(255,255,255,0.78);
  max-width: 42ch;
  margin-bottom: var(--space-5);
}
.completa-look strong { color: var(--bg); }
.completa-look .btn-secondary { border-color: var(--bg); color: var(--bg); }
.completa-look .btn-secondary:hover { background: var(--bg); color: var(--ink); }
.completa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ==========================================================================
   STICKY DE COMPRA — barra inferior fija
   Barra negra (marca) con: imagen + nombre + precio/descuento + promo + CTA.
   El rojo queda sólo en el chip y el dot (regla: rojo = promo).
   Aparece apenas el CTA principal sale por el tope del viewport.
   ========================================================================== */
.pdp { padding-bottom: var(--space-7); }   /* aire para que el sticky no tape el cierre */

/* ==========================================================================
   STICKY DE COMPRA — rediseñado con principios de impeccable + redesign + emil
   - Frosted glass (backdrop-blur) con borde de refracción
   - Dock flotante (no edge-to-edge): márgenes laterales + radius generoso
   - Sombra tintada al hue de marca (no negro puro)
   - Curva de easing custom (Emil): cubic-bezier(0.23, 1, 0.32, 1)
   - Press feedback scale(0.97); hover gateado a puntero fino
   - Jerarquía: imagen | nombre + slogan chip / precio grande | CTA
   ========================================================================== */
.promo-sticky {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 9500;
  /* Frosted glass: dark transparente + backdrop blur */
  background: oklch(0.18 0.008 32 / 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  color: var(--bg);
  border-radius: var(--radius-lg);
  /* Edge de vidrio: 1px outer + inner highlight de refracción */
  border: 1px solid oklch(1 0 0 / 0.08);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    0 20px 50px -22px oklch(0.17 0.008 32 / 0.55),
    0 4px 12px -6px oklch(0.17 0.008 32 / 0.35);
  transform: translateY(calc(100% + var(--space-4)));
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.promo-sticky.is-visible { transform: translateY(0); }

.promo-sticky-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.promo-sticky-img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface);
  /* Borde interno 1px para definición refinada */
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12);
}

.promo-sticky-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.promo-sticky-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.promo-sticky-name {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
}
.promo-sticky-chip {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--promo);
  color: var(--bg);
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1;
  /* Sombra propia tintada del rojo para dar peso */
  box-shadow: 0 4px 10px -4px oklch(0.5 0.19 29 / 0.55);
}
/* Default (desktop): muestra texto completo, oculta el corto */
.promo-sticky-chip .chip-short { display: none; }
.promo-sticky-chip .chip-full { display: inline; }
.promo-sticky-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.promo-sticky-now {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: -0.005em;
}

.promo-sticky-cta {
  flex-shrink: 0;
  margin-left: auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  /* Sombra interna sutil + sombra externa tintada */
  box-shadow:
    inset 0 -1px 0 oklch(0 0 0 / 0.06),
    0 2px 6px -2px oklch(0.17 0.008 32 / 0.4);
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    background 140ms ease-out,
    box-shadow 140ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .promo-sticky-cta:hover {
    background: oklch(0.95 0.003 60);
    box-shadow:
      inset 0 -1px 0 oklch(0 0 0 / 0.08),
      0 4px 12px -3px oklch(0.17 0.008 32 / 0.5);
  }
}
.promo-sticky-cta:active { transform: scale(0.97); }
.promo-sticky :focus-visible { outline-color: var(--bg); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Fallback navegadores sin backdrop-filter: fondo más opaco */
  .promo-sticky { background: oklch(0.18 0.008 32 / 0.95); }
}

@media (max-width: 560px) {
  /* Mobile: dock más compacto, mismo glass treatment */
  .promo-sticky { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
  .promo-sticky-inner { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
  .promo-sticky-img { width: 48px; height: 48px; }
  .promo-sticky-name { font-size: var(--fs-md); }
  .promo-sticky-now { font-size: var(--fs-lg); }
  .promo-sticky-chip { font-size: 0.6875rem; padding: 4px 6px; }
  .promo-sticky-chip .chip-full { display: none; }
  .promo-sticky-chip .chip-short { display: inline; }
  .promo-sticky-cta { font-size: var(--fs-sm); padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-sticky { transition: none; }
}

/* ==========================================================================
   Responsive — tablet / mobile
   ========================================================================== */
@media (max-width: 700px) {
  .pdp > section { padding-block: var(--space-7); }
  .pdp-hero { padding-top: var(--space-5) !important; }
  .pdp-purchase { position: static; }
  .fit-list li { grid-template-columns: 90px 1fr; gap: var(--space-3); }
  .specs div { grid-template-columns: 90px 1fr; }
  .section-head { margin-bottom: var(--space-6); }
}

/* --------- Telefono (<=480px) — ajustes finos ------------------------- */
@media (max-width: 480px) {
  /* Hero: nombre y precio escalan para no comerse la pantalla */
  .product-name { font-size: 3rem; }
  .price-block { gap: var(--space-2); padding-block: var(--space-2); }
  .price-current { font-size: var(--fs-2xl); }
  .price-old { font-size: var(--fs-base); }
  .discount-chip { font-size: var(--fs-md); }
  .gallery-flag { font-size: var(--fs-base); }

  /* Badge de promo: wrap limpio — punto alineado arriba, menos tracking */
  .promo-badge {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
    align-items: flex-start;
    padding: var(--space-2);
  }
  .promo-dot { margin-top: 3px; flex-shrink: 0; }

  /* CTA: texto un punto menor para no apretar en pantallas chicas */
  .boriu-pack .btn-primary { font-size: var(--fs-md); padding: var(--space-4) var(--space-5); }

  /* Objection-killers: aseguran legibilidad en 2 columnas estrechas */
  .objection-killers strong { font-size: var(--fs-sm); }

  /* Visual de calce: el "55-62cm" gigante respira mejor */
  .fit-visual-label { font-size: var(--fs-3xl); }
  .fit-visual-inner { padding: var(--space-5); }

  /* Titulos de seccion: bajan un escalon para no saturar */
  .boriu-pack .section-title { font-size: var(--fs-xl); }

  /* Link de IG: evita que el subrayado parta feo entre 2 lineas */
  .ig-link { font-size: var(--fs-md); border-bottom-width: 2px; }

  /* Sello: en una columna, el numero se achica un punto */
  .sello-item { padding-block: var(--space-4); }
  .sello-num { font-size: var(--fs-lg); }
}

/* ==========================================================================
   Accessibility + reduce motion
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* impeccable: foco visible también sobre superficies oscuras */
.trust-strip :focus-visible,
.statement :focus-visible,
.completa-look :focus-visible { outline-color: var(--bg); }
.boriu-pack .btn-primary:focus-visible,
.gallery-flag:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  /* emil: reducir, no eliminar. Se va el movimiento y los loops infinitos;
     quedan las transiciones de opacidad/color que ayudan a comprender. */
  .promo-dot,
  .fit-visual-bar span,
  .boriu-pack .btn-primary[aria-busy="true"]::after { animation: none !important; }
  .boriu-pack *, .boriu-pack *::before, .boriu-pack *::after {
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
  }
}

/* ==========================================================================
   redesign — TEXTURA: grano sutil fijo
   Rompe la planitud digital del monocromo sin ensuciar la lectura.
   ========================================================================== */
.boriu-pack::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   redesign — MOTION: revelado escalonado al scroll
   Las secciones e ítems entran con fade-up. JS scopeado agrega .is-in.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  /* emil: el blur enmascara la transición — el ojo lee una sola entrada,
     no dos estados superpuestos. Se disuelve al asentarse. */
  filter: blur(7px);
  transition:
    opacity 0.62s var(--ease-soft),
    transform 0.62s var(--ease-soft),
    filter 0.45s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ==========================================================================
   D-pack3 — ARMADOR DE PACK
   Hero: 3 slots que se llenan con las gorras elegidas en el picker.
   ========================================================================== */
.pack-builder {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Banner grande de pack — foto + slogan dominante */
.pack-hero-banner {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 16px 36px -14px rgba(0,0,0,0.22);
}
.pack-hero-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) saturate(0.95);
}
.pack-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.42) 35%,
      rgba(0,0,0,0) 65%);
  pointer-events: none;
}
.pack-hero-slogan {
  position: absolute;
  left: 0; bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-5);
  margin: 0;
  z-index: 1;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: clamp(2.8rem, 7.5vw, 5.5rem);
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 0.88;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* Énfasis en rojo de promo: el precio del pack ("por $48.450"). */
.pack-hero-slogan-accent { color: var(--promo); }
.pack-hero-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  background: var(--promo);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
  .pack-hero-slogan { padding: var(--space-4); font-size: 2.1rem; }
}

.pack-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pack-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pack-slot.is-empty {
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  color: var(--muted);
  border-radius: var(--radius-md);
}
.pack-slot.is-filled {
  background: transparent;
  border: none;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pack-slot-num {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--muted-soft);
}
.pack-slot-label {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-2);
}
.pack-slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pack-slot.is-filled .pack-slot-img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid var(--ink);
  display: block;
}
.pack-slot-name {
  position: static;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
}
.pack-slot-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3);
  transition: transform var(--dur-press) var(--ease);
}
.pack-slot-remove:active { transform: scale(0.92); }

.pack-progress {
  font-size: var(--fs-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.pack-progress strong {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pack-progress-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

/* CTA disabled state — pack incompleto */
.boriu-pack .btn-primary[aria-disabled="true"]:not(:disabled) {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.promo-sticky-cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   D-pack3 — PICKER: elegí tus 3 gorras
   ========================================================================== */
.pack-picker {
  background: var(--surface);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad) !important;
  border-top: none !important;
}
.pack-picker-lead {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 55ch;
  margin-top: var(--space-3);
}
.pack-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 700px)  { .pack-picker-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .pack-picker-grid { grid-template-columns: repeat(4, 1fr); } }
.pack-picker-grid li { list-style: none; }

.pack-cap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pack-cap.is-in-pack { border-color: var(--promo); }
.pack-cap-img {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pack-cap-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pack-cap-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.pack-cap-add {
  margin-top: auto;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-press) var(--ease), background var(--dur-fast) var(--ease);
}
.pack-cap.is-in-pack .pack-cap-add {
  background: transparent;
  color: oklch(0.42 0.005 32);
  border: 1px solid oklch(0.82 0.005 32);
  padding-block: calc(var(--space-3) - 1px);
}
.pack-cap.is-in-pack .pack-cap-add:hover {
  background: oklch(0.95 0.005 32);
  color: oklch(0.17 0.008 32);
  opacity: 1;
}
.pack-cap-add:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .pack-cap-add:hover { opacity: 0.9; }
}

/* ==========================================================================
   UPSELL MODAL — Pack 3 → Pack 5
   Aplica la técnica de frosted glass de references/surfaces.md
   ========================================================================== */
.upsell-modal {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.28s;
}
.upsell-modal[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.28s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
}
.upsell-modal-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.17 0.008 32 / 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.upsell-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - var(--space-7));
  overflow-y: auto;
  background: oklch(0.99 0.002 70 / 0.96);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid oklch(1 0 0 / 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.6),
    0 30px 80px -28px oklch(0.17 0.008 32 / 0.5),
    0 8px 24px -10px oklch(0.17 0.008 32 / 0.3);
  transform: scale(0.94) translateY(8px);
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
  color: var(--ink);
  text-align: center;
}
.upsell-modal[aria-hidden="false"] .upsell-modal-panel {
  transform: scale(1) translateY(0);
}
.upsell-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  transition: background 140ms ease-out, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .upsell-modal-close:hover { background: var(--surface); color: var(--ink); }
}
.upsell-modal-close:active { transform: scale(0.92); }

.upsell-modal-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--promo);
  margin-bottom: var(--space-3);
  text-align: center;
}
.upsell-modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 0.98;
  text-wrap: balance;
  margin-bottom: var(--space-3);
  text-align: center;
}
.upsell-modal-accent {
  color: var(--promo);
  display: inline-block;
  padding: 0 6px;
}
.upsell-modal-sub {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
  text-align: center;
}
.upsell-modal-sub strong { color: var(--ink); font-weight: var(--weight-bold); }
.upsell-modal-per-cap { font-weight: var(--weight-bold); color: var(--ink); }

.upsell-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.upsell-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  min-width: 140px;
}
.upsell-tier--from {
  background: var(--surface);
  color: var(--muted);
}
.upsell-tier--to {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 12px 28px -10px oklch(0.17 0.008 32 / 0.4);
}
.upsell-tier-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--promo);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.upsell-tier-count {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-3xl);
  line-height: 0.9;
}
.upsell-tier-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.upsell-tier-price {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-lg);
  margin-top: var(--space-2);
}
.upsell-arrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-xl);
  color: var(--muted-soft);
}

.upsell-modal-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.boriu-pack .upsell-accept {
  background: oklch(0.17 0.008 32) !important;
  color: oklch(0.993 0.002 70) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-extra) !important;
  font-size: var(--fs-2xl) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  padding: var(--space-6) var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  box-shadow:
    inset 0 -1px 0 oklch(0 0 0 / 0.18),
    0 6px 18px -8px oklch(0.17 0.008 32 / 0.5);
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 140ms ease-out,
    background 140ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .upsell-accept:hover {
    background: oklch(0.12 0.008 32);
    box-shadow:
      inset 0 -1px 0 oklch(0 0 0 / 0.2),
      0 10px 24px -8px oklch(0.17 0.008 32 / 0.6);
  }
}
.upsell-accept:active { transform: scale(0.97); }

/* Ghost button — misma altura que el accept, borde + transparente.
   Se lee como "otra opción" en lugar de link al pie.
   Prefijado .boriu-pack + !important porque Recife usa botones globales
   con reset (button { border: none }) que pisan estilos sin prefijar. */
.boriu-pack .upsell-decline {
  background: transparent !important;
  color: oklch(0.17 0.008 32) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-extra) !important;
  font-size: var(--fs-lg) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  padding: var(--space-4) var(--space-5) !important;
  border: 2px solid oklch(0.17 0.008 32) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: background 140ms ease-out, color 140ms ease-out, transform 140ms ease-out;
}
.boriu-pack .upsell-decline:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .boriu-pack .upsell-decline:hover { background: oklch(0 0 0 / 0.05) !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .upsell-modal-backdrop { background: oklch(0.17 0.008 32 / 0.7); }
  .upsell-modal-panel { background: oklch(0.99 0.002 70); }
}
@media (prefers-reduced-motion: reduce) {
  .upsell-modal,
  .upsell-modal-panel { transition: opacity 0.01s, visibility 0.01s; transform: none; }
}
@media (max-width: 480px) {
  .upsell-modal-panel { padding: var(--space-5) var(--space-4) var(--space-4); }
  .upsell-tier { min-width: 110px; padding: var(--space-3) var(--space-4); }
  .upsell-tier-count { font-size: var(--fs-2xl); }
  .upsell-modal-title { font-size: var(--fs-xl); }
}

/* ==========================================================================
   UPSELL — slots de gorras extra + picker compacto dentro del modal
   ========================================================================== */
.upsell-slots {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.upsell-slot {
  position: relative;
  width: 160px;
  height: 110px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.upsell-slot.is-empty {
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  color: var(--muted);
}
.upsell-slot.is-filled {
  background: var(--surface);
  border: 2px solid var(--promo);
}
.upsell-slot-num {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--muted-soft);
}
.upsell-slot-label {
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.upsell-slot-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.upsell-slot-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px;
  background: rgba(0,0,0,0.7);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.upsell-slot-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-weight: var(--weight-bold);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.3);
  transition: transform var(--dur-press) var(--ease);
}
.upsell-slot-remove:active { transform: scale(0.92); }

.upsell-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
@media (max-width: 480px) {
  .upsell-picker-grid { grid-template-columns: repeat(3, 1fr); }
}
.upsell-picker-grid li { list-style: none; }
.upsell-cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.upsell-cap.is-in-pack { border-color: var(--promo); }
.upsell-cap-img {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.upsell-cap-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.upsell-cap-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-align: center;
}
.upsell-cap-add {
  position: static;
  width: 100%;
  height: auto;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  padding: 8px 4px;
  display: block;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.12s ease, background var(--dur-fast) var(--ease);
}
.upsell-cap.is-in-pack .upsell-cap-add {
  background: transparent;
  color: oklch(0.42 0.005 32);
  border: 1px solid oklch(0.82 0.005 32);
}
.upsell-cap.is-in-pack .upsell-cap-add:hover {
  background: oklch(0.95 0.005 32);
  color: oklch(0.17 0.008 32);
}
.upsell-cap-add:hover { opacity: 0.88; }
.upsell-cap-add:active { transform: scale(0.97); }

/* Accept disabled state cuando faltan elegir */
.upsell-accept[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   AGRUPACIÓN POR MODELO — badge + variant modal
   ============================================================ */

.boriu-pack .cap-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  background: oklch(1 0 0 / 0.92);
  color: oklch(0.17 0.008 32);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.boriu-pack .pack-cap.has-variants,
.boriu-pack .upsell-cap.has-variants {
  position: relative;
}

/* Pack lleno: atenúa SOLO las cards del grid principal no elegidas */
.boriu-pack.is-pack-full .pack-picker-grid .pack-cap:not(.is-in-pack) {
  opacity: 0.42;
  filter: grayscale(0.65);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.boriu-pack.is-pack-full .pack-picker-grid .pack-cap:not(.is-in-pack):hover {
  opacity: 0.85;
  filter: grayscale(0);
}

.boriu-pack .pack-cap.has-variants .pack-cap-add {
  background: oklch(0.17 0.008 32);
  color: oklch(0.993 0.002 70);
}

/* Variant modal */
.variant-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.variant-modal[aria-hidden="false"],
.variant-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.variant-modal-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.55);
  cursor: pointer;
}
.variant-modal-panel {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: calc(100% - var(--space-6));
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--space-7) var(--space-6) var(--space-6);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.3);
}
.variant-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.variant-modal-close:hover { background: oklch(0 0 0 / 0.06); }
.variant-modal-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
  text-align: center;
  font-weight: var(--weight-bold);
}
.variant-modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--space-5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.variant-grid li { list-style: none; }
.variant-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: oklch(0.97 0.005 60);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.variant-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px oklch(0 0 0 / 0.12); }
.variant-card.is-in-pack { outline: 2px solid var(--ink); }
.variant-card-img {
  aspect-ratio: 1;
  background: oklch(0.95 0.005 60);
  overflow: hidden;
}
.variant-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.variant-card-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-sm);
  text-align: center;
  margin: 0;
  padding: 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.2;
  min-height: 2.4em;
}
.variant-card-add {
  background: oklch(0.17 0.008 32);
  color: oklch(0.993 0.002 70);
  border: none;
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 0.12s ease;
}
.variant-card-add:hover { opacity: 0.85; }
.variant-card.is-in-pack .variant-card-add {
  background: transparent;
  color: oklch(0.42 0.005 32);
  border: 1px solid oklch(0.82 0.005 32);
}
.variant-card.is-in-pack .variant-card-add:hover {
  background: oklch(0.95 0.005 32);
  color: oklch(0.17 0.008 32);
  opacity: 1;
}

@media (max-width: 640px) {
  .variant-modal-panel { padding: var(--space-6) var(--space-4) var(--space-4); }
  .variant-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-3); }
  .variant-modal-title { font-size: var(--fs-xl); }
}