/* ============================================================
   TAMY STORE — Página de Detalle de Producto
   Organic Professionalism Design System
   ============================================================ */

/* ── Header (shared with catalog) ───────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(249,250,244,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--n200);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-mark {
  width: 38px; height: 38px;
  background: var(--g800);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--g800); letter-spacing: -.01em;
}
.logo-slogan { font-size: .68rem; color: var(--n500); font-weight: 500; letter-spacing: .03em; }

.header-actions { display: flex; align-items: center; gap: 8px; }

.btn-cart {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1.5px solid var(--n200);
  color: var(--g800);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  gap: 6px; font-size: .8rem; font-weight: 600;
  font-family: var(--font-body);
}
.btn-cart:hover { background: var(--n50); border-color: var(--g800); }
.btn-cart .badge { position: absolute; top: -5px; right: -5px; }

/* ── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumbs {
  background: #f9faf4;
  border-bottom: 1px solid var(--n200);
}
.breadcrumbs-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  font-size: .8rem;
  color: var(--n500);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--n500);
  text-decoration: none;
  transition: color var(--t-fast);
}
.breadcrumbs a:hover { color: var(--g800); }
.breadcrumb-sep { color: var(--n400); }
.breadcrumb-current { color: var(--n950); font-weight: 600; }

/* ── Product Detail Layout ──────────────────────────────────── */
.product-detail {
  padding: 40px 24px 60px;
  max-width: 1280px;
  margin: 0 auto;
}

.product-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.detail-loader {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  color: var(--n500);
}

/* ── Gallery (Bento Grid) ───────────────────────────────────── */
.detail-gallery { position: sticky; top: 88px; }

.gallery-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gallery-hero {
  position: relative;   /* ancla de las flechas y del contador */
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--n100);
  cursor: zoom-in;
}

.gallery-hero img {
  width: 100%; height: 100%;
  /* `contain`, no `cover`: en una tienda no se le puede cortar el
     tapón a un perfume ni la mitad a un bolso. `cover` rellenaba el
     recuadro recortando lo que sobrara, y como las fotos de producto
     suelen ser cuadradas o verticales, se comía arriba y abajo. Lo
     que sobra ahora es fondo, del mismo gris que ya tiene el
     contenedor, y se lee como parte del marco.
     Las miniaturas sí siguen en `cover`: ahí lo que importa es que
     la rejilla quede pareja, y a ese tamaño no se juzga el producto. */
  object-fit: contain;
  transition: transform .5s ease;
}

/* Sin zoom al pasar el ratón: con `contain`, agrandar un 4% vuelve a
   sacar el producto por los bordes del recuadro, que es justo lo que
   se acaba de arreglar. El `cursor: zoom-in` ya avisa de que la foto
   se puede abrir. Las miniaturas conservan su zoom porque siguen en
   `cover` y ahí el recorte es intencionado. */
.gallery-hero:hover { background: var(--n50); }

/* ── Flechas de la galería ─────────────────────────────────────
   Antes solo se cambiaba de foto pulsando una miniatura, y en el
   móvil esas miniaturas quedan en una tira debajo que mucha gente
   ni ve. Las flechas van sobre la foto grande, que es donde uno
   las busca. Solo se pintan cuando hay más de una foto.

   `position: absolute` sobre el hero, que ya es el ancla porque
   `overflow: hidden` no crea contexto de apilamiento por sí solo:
   se le añade `position: relative` más abajo. */
.gallery-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 44px es el mínimo táctil que se fijó en la auditoría móvil. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--n950, #1a1c19);
  cursor: pointer;
  z-index: 2;
  transition: background var(--t-fast), opacity var(--t-fast);
  /* El hero tiene `cursor: zoom-in`; la flecha no abre el zoom. */
  padding: 0;
}

.gallery-flecha:hover { background: rgba(255, 255, 255, 1); }
.gallery-flecha:focus-visible { outline: 2px solid var(--g800); outline-offset: 2px; }

.gallery-flecha-prev { left: 10px; }
.gallery-flecha-next { right: 10px; }

/* Contador "2 / 5": sin él, con muchas fotos no se sabe cuántas
   quedan ni si uno ya dio la vuelta entera. */
.gallery-contador {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* El envoltorio de las miniaturas no pinta caja en escritorio: con
   `display: contents` los .gallery-thumb siguen siendo hijos directos
   del grid bento, exactamente igual que cuando no existía. Por debajo
   de 480px sí toma caja y se convierte en la tira deslizable (ver el
   bloque responsive del final). */
.gallery-thumbs { display: contents; }

.gallery-thumb {
  position: relative;   /* ancla del contador "+N" */
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n100);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--t-fast), opacity var(--t-fast);
}
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.active { border-color: var(--g800); }
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-thumb:hover img { transform: scale(1.08); }

/* Miniaturas que el bento de escritorio no enseña (las que quedan
   detrás del "+N"). Existen en el DOM para la tira móvil; aquí se
   ocultan para que la rejilla siga teniendo cuatro celdas como antes. */
.gallery-thumb.solo-movil { display: none; }

/* Contador "+N" sobre la cuarta miniatura. Estaba en un `style=`
   inline; movido aquí para que el bloque móvil pueda ocultarlo (una
   regla de hoja de estilos no gana a un atributo style). */
.gallery-thumb-mas {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: var(--font-body);
}

/* ── Product Info ───────────────────────────────────────────── */
.detail-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-limited-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--g800);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-full);
}

.detail-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: #264f2b;
  background: #e6f5e4;
  padding: 4px 12px;
  border-radius: var(--r-full);
}
.detail-stock-badge.sin-stock {
  color: var(--danger);
  background: var(--danger-light);
}

.detail-category {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--n500);
}

.detail-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--n950);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.detail-price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-price-current {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--g800);
}

.detail-price-old {
  font-size: 1rem;
  color: var(--n400);
  text-decoration: line-through;
}

.detail-discount-chip {
  background: var(--danger-light);
  color: var(--danger);
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--danger-border);
}

.detail-desc {
  font-size: .95rem;
  color: var(--n500);
  line-height: 1.7;
}

.detail-savings {
  display: inline-block;
  background: #e6f5e4;
  color: #264f2b;
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-full);
}

/* ── Color Swatches ─────────────────────────────────────────── */
.color-swatches {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-label {
  font-size: .82rem;
  color: var(--n700);
  font-weight: 500;
}
.color-label strong {
  color: var(--n950);
  font-weight: 600;
}

.color-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--n200);
  background: var(--n100);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-swatch:hover {
  border-color: var(--g800);
  transform: scale(1.1);
}
.color-swatch.active {
  border-color: var(--g800);
  box-shadow: 0 0 0 3px rgba(22,63,29,.15);
  transform: scale(1.12);
}
.color-swatch.agotado {
  opacity: .4;
  cursor: not-allowed;
  position: relative;
}
.color-swatch.agotado::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 120%;
  background: var(--danger);
  transform: rotate(45deg);
}
.color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.color-swatch-name {
  font-size: .68rem;
  font-weight: 700;
  color: var(--n700);
  text-transform: uppercase;
}

/* ── Qty Discount Table ─────────────────────────────────────── */
.detail-discount-table {
  background: var(--n50);
  border-radius: var(--r-md);
  padding: 14px;
  border: 1px solid var(--n200);
}
.detail-discount-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--n700);
  margin-bottom: 10px;
}
.detail-discount-rows { display: flex; flex-direction: column; gap: 5px; }

.detail-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--n500);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.detail-qty-row span   { flex: 1; }
.detail-qty-row strong { color: var(--g700); font-weight: 700; }
.detail-qty-row em     { font-style: normal; color: var(--n700); font-weight: 600; }
.detail-qty-row.active {
  background: var(--g800);
  color: rgba(255,255,255,.9);
}
.detail-qty-row.active strong,
.detail-qty-row.active em { color: var(--white); }

/* ── Qty Selector ───────────────────────────────────────────── */
.detail-qty-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--n200);
  border-bottom: 1px solid var(--n200);
}

.detail-qty-ctrl { display: flex; align-items: center; gap: 12px; }

.qty-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--n200);
  background: var(--white);
  font-size: 1.1rem; font-weight: 700;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  display: flex;
  align-items: center; justify-content: center;
  color: var(--n700);
  font-family: var(--font-body);
}
.qty-btn:hover   { border-color: var(--g800); color: var(--g800); }
.qty-btn:disabled{ opacity: .35; cursor: not-allowed; }

.qty-value {
  font-weight: 700;
  font-size: 1rem;
  min-width: 28px; text-align: center;
  color: var(--n950);
}

.detail-qty-total { font-size: .88rem; color: var(--n500); }
.detail-qty-total strong {
  font-family: var(--font-display);
  font-size: 1.2rem; color: var(--g800); margin-left: 6px;
}

/* ── CTA Buttons ────────────────────────────────────────────── */
.detail-actions {
  display: flex;
  gap: 10px;
}

.btn-add-cart-detail {
  flex: 1;
  padding: 14px;
  background: var(--g800);
  color: var(--white);
  font-size: .9rem; font-weight: 600;
  font-family: var(--font-body);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 52px;
}
.btn-add-cart-detail:hover { background: var(--g700); transform: translateY(-1px); }
.btn-add-cart-detail:disabled {
  background: var(--n200); color: var(--n400); cursor: not-allowed;
  transform: none;
}

.btn-whatsapp-detail {
  padding: 14px 20px;
  background: #22c55e;
  color: var(--white);
  font-size: .9rem; font-weight: 600;
  font-family: var(--font-body);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 52px;
}
.btn-whatsapp-detail:hover { background: #16a34a; transform: translateY(-1px); }

/* ── Info / Specs List ──────────────────────────────────────── */
.detail-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--n50);
  border-radius: var(--r-md);
  border: 1px solid var(--n200);
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--n700);
}
.spec-item svg {
  flex-shrink: 0;
  color: var(--g800);
}

/* ── Related Products Section ───────────────────────────────── */
.related-section {
  padding: 48px 24px 80px;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--n200);
}

.related-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.related-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--n950);
  margin-bottom: 4px;
}

.related-sub {
  font-size: .85rem;
  color: var(--n500);
}

.related-view-all {
  font-size: .85rem;
  font-weight: 600;
  color: var(--g800);
  text-decoration: none;
  transition: color var(--t-fast);
}
.related-view-all:hover { color: var(--g700); text-decoration: underline; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.related-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--t-base), transform var(--t-base);
  text-decoration: none;
}
.related-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.related-card-img {
  aspect-ratio: 1;
  background: var(--n100);
  overflow: hidden;
}
.related-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.related-card:hover .related-card-img img { transform: scale(1.06); }

.related-card-info {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.related-card-name {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--n950);
  line-height: 1.3;
}

.related-card-price {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--g800);
}
.related-card-price-old {
  font-size: .72rem;
  color: var(--n400);
  text-decoration: line-through;
  margin-left: 6px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--n900);
  color: rgba(255,255,255,.42);
  text-align: center;
  padding: 24px 20px;
  font-size: .78rem;
}
.site-footer strong { color: rgba(255,255,255,.7); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  background: var(--n900); color: var(--white);
  padding: 13px 18px; border-radius: var(--r-md);
  font-size: .84rem; font-weight: 500;
  font-family: var(--font-body);
  box-shadow: var(--shadow-xl);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .25s ease;
  max-width: 300px; pointer-events: all;
  border-left: 3px solid transparent;
}
.toast.success { border-left-color: #22c55e; }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--g600); }
.toast.removing { animation: toastOut .25s ease forwards; }

@keyframes toastIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; }   to { transform: translateX(110%); opacity: 0; } }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--n200);
  border-top-color: var(--g800);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .related-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
  .product-detail-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .detail-gallery { position: static; }
  .detail-name { font-size: 1.5rem; }
  .detail-price-current { font-size: 1.5rem; }
  .detail-actions { flex-direction: column; }
  .product-detail { padding: 24px 16px 40px; }

  /* ── Ergonomía táctil y legibilidad en móvil ───────────────
     Auditoría móvil: estos objetivos medían menos de 44px de alto y
     estos textos menos de 12px. Se corrige con relleno y con un
     tamaño de fuente mínimo; ni el peso visual ni la maqueta de
     escritorio cambian, porque todo vive dentro de este bloque. */

  .logo-slogan { font-size: .75rem; }   /* .68rem = 10.88px */

  /* La marca sigue midiendo 38px; sólo crece la caja táctil del
     enlace, que cabe en los 68px de la cabecera.

     El eslogan a 12px, en cambio, ensancha el bloque del logo unos
     12px y a 320px eso desbordaba la cabecera: aparecía scroll
     horizontal en toda la página. Se recupera el hueco con menos
     relleno lateral y menos separación, y el logo pasa a poder
     encogerse con recorte por puntos suspensivos como red de
     seguridad por si la fuente midiera más de lo previsto. */
  .header-inner { padding: 0 16px; gap: 10px; }
  .btn-cart { padding: 0 10px; }
  .logo {
    min-height: 44px;
    min-width: 0;
    flex-shrink: 1;
  }
  .logo-text { min-width: 0; overflow: hidden; }
  .logo-name,
  .logo-slogan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Menos relleno en la barra para que los enlaces de 44px no la
     conviertan en una franja enorme. */
  .breadcrumbs-inner { padding: 2px 16px; }
  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .detail-category { font-size: .75rem; }   /* .72rem = 11.52px */

  .related-view-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Segunda oleada de la auditoría móvil ─────────────────────
   Mismo criterio que en catalog.css: corte en 480px y no en 768,
   porque esta tanda exige que por encima de 480px no se mueva nada
   respecto a lo que ya había. */
@media (max-width: 480px) {
  /* El selector de cantidad del detalle es el mismo gesto que el del
     cajón del carrito, y allí «−» y «+» pasan a 44px: se tratan igual
     aquí, aunque partieran de 36 y no de 30. Las muestras de color se
     quedaban en 40.

     A 320px no aprietan nada: .product-detail deja 288px útiles, el
     grupo de cantidad ocupa 44 + 12 + 28 + 12 + 44 = 140 y las
     muestras van en una fila que ya envuelve. */
  .qty-btn      { width: 44px; height: 44px; }
  .color-swatch { width: 44px; height: 44px; }

  .color-swatch-name      { font-size: .75rem; }   /* .68rem = 10.88px */
  .related-card-price-old { font-size: .75rem; }   /* .72rem = 11.52px */

  /* ── Galería en móvil ──────────────────────────────────────
     El bento se apila y las miniaturas pasan a una tira horizontal
     con scroll-snap. Antes aquí ponía `.gallery-thumb { display:none }`
     y con eso desaparecían todas las fotos menos la primera: no hay
     carrusel ni swipe en ningún sitio que las recuperase. La tira no
     necesita JavaScript de gestos — switchGalleryImage() ya cambia el
     hero al tocar una miniatura. */
  .gallery-bento { grid-template-columns: 1fr; }

  /* Cuadrado en el móvil. Con `contain`, un recuadro apaisado de 4:3
     deja franjas grandes arriba y abajo en una foto cuadrada, que es
     la forma más común. En cuadrado esas franjas casi desaparecen y
     además se aprovecha mejor una pantalla vertical. */
  .gallery-hero { aspect-ratio: 1; }
  .gallery-thumbs {
    display: flex;
    gap: 8px;
    /* Sin esto el contenido de la tira ensancha la celda del grid y
       aparece scroll horizontal en toda la página. */
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }

  /* 72px de lado: por encima del mínimo táctil de 44px y con la
     cuarta asomando en 320px, que es la pista de que hay más. */
  .gallery-thumb,
  .gallery-thumb.solo-movil {
    display: block;
    flex: 0 0 72px;
    scroll-snap-align: start;
  }

  /* En la tira están todas, así que no hay nada que resumir. */
  .gallery-thumb-mas { display: none; }

  .related-section { padding: 32px 16px 60px; }
}

/* ── Contenido de venta ──────────────────────────────────── */
/* NOTA: el pliego usaba `--n800`, que no existe en la paleta de
   styles.css (escala: n950, n900, n700, n500, n400, n200, n100, n50).
   Se usa `--n900`, el mismo tono que ya llevan los títulos de esta
   página (.related-title, .detail-name usan --n950; --n900 es el
   próximo escalón, coherente con el resto de encabezados). */
.ficha-extra        { background: var(--n50); padding: 40px 0; margin-top: 8px; }
.ficha-extra[hidden] { display: none; }
.extra-inner        { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.extra-bloque       { margin-bottom: 32px; }
.extra-titulo       { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
                      text-transform: uppercase; color: var(--n900); margin-bottom: 14px; }
.extra-lista        { list-style: none; padding: 0; margin: 0;
                      display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.extra-lista li     { position: relative; padding-left: 20px; line-height: 1.55; color: var(--n700); }
.extra-lista li::before { content: "•"; position: absolute; left: 4px; color: var(--g800); font-weight: 700; }

.extra-tienda       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
                      border-top: 1px solid var(--n200); padding-top: 28px; }
.extra-tienda-titulo { font-size: .95rem; font-weight: 700; color: var(--n900); margin-bottom: 6px; }
.extra-tienda-texto  { color: var(--n700); line-height: 1.55; white-space: pre-line; }

@media (max-width: 720px) {
  .extra-lista  { grid-template-columns: 1fr; }
  .extra-tienda { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Bloque de video ────────────────────────────────────────
   Variables comprobadas contra frontend/css/styles.css antes de
   usarlas: --n200, --white y --g800 existen las tres. Este proyecto
   ya tuvo dos casos de variables inventadas (--n600, --n800) que no
   dan error y dejan el color heredado sin que nadie lo note. */
.extra-video          { border-top: 1px solid var(--n200); padding-top: 28px; }
.extra-video-caja     { max-width: 325px; }
.extra-video-play     { position: relative; display: block; width: 100%; padding: 0;
                        border: 0; background: none; cursor: pointer; border-radius: 12px;
                        overflow: hidden; line-height: 0; }
.extra-video-play img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.extra-video-icono    { position: absolute; inset: 0; display: flex; align-items: center;
                        justify-content: center; font-size: 3rem; color: var(--white);
                        background: rgba(0, 0, 0, .35); }
.extra-video-marco    { width: 100%; max-width: 325px; height: 750px; border: 0; border-radius: 12px; }
.extra-video-link     { display: inline-block; margin-top: 10px; color: var(--g800);
                        font-weight: 600; text-decoration: none; }

@media (max-width: 720px) {
  .extra-video-caja, .extra-video-marco { max-width: 100%; }
}