/* =====================================================================
   TEMPORAL — Roc Grotesk Condensed Light (versión DEMO, licencia "Personal Use Only")
   Solo para revisión de diseño en el entorno de pruebas. NO publicar en producción
   con este archivo. Reemplazar por el embed de Adobe Fonts (kit de use.typekit.net):
     font-family: "roc-grotesk-variable", sans-serif;
     font-variation-settings: 'wdth' 75, 'wght' 300;
   y eliminar este @font-face + el archivo assets/fonts/RocGrotesk-...-PERSONAL-USE-ONLY.otf
   ===================================================================== */
@font-face {
  font-family: 'Roc Grotesk Cond DEMO';
  src: url('../assets/fonts/RocGrotesk-CondLight-DEMO-PERSONAL-USE-ONLY.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dune Rise';
  src: url('../assets/fonts/Dune_Rise.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-light:    #EAE8DC;
  --color-touch:    #E0D5C3;
  --color-balance:  #B0B2A6;
  --color-warmth:   #8F7A54;
  --color-depth:    #5C5644;
  --color-presence: #151515;
  --color-paper:    #F4F2EC;
  --color-ink:      #1A1816;
  --color-ink-soft: #3A3631;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --gutter: clamp(20px, 5vw, 80px);
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; }
body, h1, h2, h3, p, figure { margin: 0; }
body {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== BACK LINK (fijo sobre la imagen, mismo color que el menú) ===== */
.pdp-back-fixed {
  position: fixed;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  z-index: 1001;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-touch);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: color 0.2s ease;
}
.pdp-back-fixed:hover { color: var(--color-light); }

@media (max-width: 640px) {
  .pdp-back-fixed { font-size: 0.68rem; top: 18px; right: 18px; }
}

/* ===== HERO ===== */
.pdp-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 11;
  overflow: hidden;
  background: var(--color-presence);
}
.pdp-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pdp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
}
.pdp-hero-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vw, 64px);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  width: 90%;
}
.pdp-hero-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: var(--color-light);
  letter-spacing: 0.02em;
  line-height: 1;
}
.pdp-hero-tagline {
  margin-top: 10px;
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(234,232,220,0.85);
}

/* ===== STORY ===== */
.pdp-story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 100px) var(--gutter);
}
.pdp-story-media {
  overflow: hidden;
}
.pdp-story-media img { width: 100%; height: auto; }
.pdp-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-touch);
  color: var(--color-depth);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.pdp-story h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  color: var(--color-ink);
  margin-bottom: 18px;
  line-height: 1.1;
}
.pdp-story p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 480px;
}
.pdp-meta {
  display: flex;
  gap: 28px;
  margin: 20px 0 30px;
  font-size: 0.82rem;
  color: var(--color-balance);
  letter-spacing: 0.04em;
}
.pdp-meta strong { color: var(--color-ink-soft); font-weight: 600; }

/* ===== NOTES PYRAMID ===== */
.pdp-notes {
  background: var(--color-touch);
  padding: clamp(56px, 7vw, 90px) var(--gutter);
}
.pdp-notes-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.pdp-notes-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--color-ink);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.pdp-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.pdp-note-col {
  border-top: 1px solid rgba(92, 86, 68, 0.35);
  padding-top: 18px;
}
.pdp-note-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-warmth);
  margin-bottom: 10px;
  font-weight: 600;
}
.pdp-note-items {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--color-ink);
  line-height: 1.5;
}

/* ===== HERO V2 (mockup) ===== */
.pdp-hero-v2 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-presence);
}
.pdp-hero-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* El sujeto (rostro/frasco) está del lado derecho de la foto en ambas fragancias */
.pdp-hero-v2 img[src*="imperium-hero-alt"] { object-position: 82% 30%; }
.pdp-hero-v2 img[src*="lumen-hero-alt"] { object-position: 80% 32%; }
.pdp-hero-v2 img[src*="ascent-hero-alt"] { object-position: 74% 28%; }
.pdp-hero-v2 img[src*="bliss-hero-alt"] { object-position: 70% 26%; }
.pdp-hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.04) 44%, rgba(0,0,0,0) 70%);
}
.pdp2-hero-overlay {
  position: absolute;
  left: clamp(28px, 9.2vw, 132px);
  right: clamp(20px, 4vw, 60px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: min(720px, 88vw);
}
/* El bloque de texto arranca en la mitad de la sección y crece hacia abajo (en vez de quedar centrado) */
.pdp2-hero-overlay--bottom {
  top: 50%;
  transform: none;
}
.pdp2-hero-overlay--imperium {
  left: clamp(24px, 6.8vw, 98px);
}
.pdp2-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.25vw, 1.15rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-touch);
  margin-bottom: 2px;
}
.pdp2-eyebrow--after { margin-bottom: 0; margin-top: -4px; }
.pdp2-hero-name {
  font-weight: 500;
  font-size: clamp(2.4rem, 12vw, 9.2rem);
  color: var(--color-light);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  text-transform: uppercase;
}
/* Imperium: reducido 25% respecto al tamaño doblado anterior */
.pdp2-hero-name--cinzel {
  font-family: 'Cinzel', var(--font-display);
  letter-spacing: 0.04em;
  font-size: clamp(2.6rem, 7vw, 5rem);
}
/* Lumen: un poco más grande que el doble original */
.pdp2-hero-name--display {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7.3vw, 6.6rem);
}
/* Ascent: Dune Rise (fuente de marca, provista por el cliente) */
.pdp2-hero-name--dunerise {
  font-family: 'Dune Rise', var(--font-body);
  letter-spacing: 0.02em;
  font-size: clamp(2.1rem, 5.8vw, 4.2rem);
}
/* Bliss: Roc Grotesk Condensed Light (DEMO temporal; respaldo: Big Shoulders Condensed) */
.pdp2-hero-name--rocgrotesk {
  font-family: 'Roc Grotesk Cond DEMO', 'Big Shoulders Condensed', var(--font-body);
  font-weight: 300;
  letter-spacing: 0.01em;
  font-size: clamp(4.2rem, 11.8vw, 10.6rem);
}
.pdp2-hero-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.85rem, 2.5vw, 1.95rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(234,232,220,0.9);
  margin-top: clamp(14px, 2vw, 20px);
}

/* ===== ACCORDS (imagen provista por Marketing) ===== */
.pdp-accords {
  display: flex;
  justify-content: center;
  /* Márgenes físicos: ~2cm arriba/abajo, ~4cm a los lados */
  padding: 2cm 4cm;
  background-size: cover;
  background-position: center;
}
.pdp-accords img {
  width: 100%;
  max-width: none;
  height: auto;
}
/* Imperium: fondo essence en tonalidad negra (provisto por Marketing) */
.pdp-accords--dark {
  background-image: url('../assets/essence-090909.png');
}
/* Lumen: fondo essence en tonalidad crema/durazno #F8D8A4 (provisto por Marketing) */
.pdp-accords--cream {
  background-image: url('../assets/essence-F8D8A4.png');
}
/* Ascent: fondo essence en tonalidad gris #B7B7B7 (provisto por Marketing) */
.pdp-accords--ascent {
  background-image: url('../assets/essence-B7B7B7.png');
}
/* Bliss: fondo essence en tonalidad rosa #DFADA9 (provisto por Marketing) */
.pdp-accords--bliss {
  background-image: url('../assets/essence-DFADA9.png');
}
.pdp-accords--light { background: var(--color-touch); }

/* ===== PRODUCT SHOT + PRECIO ===== */
.pdp-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 650;
  overflow: hidden;
  background: var(--color-presence);
}
.pdp-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* El frasco está del lado derecho/centro de la foto en ambas fragancias */
.pdp-shot img[src*="imperium-shot"] { object-position: 66% 55%; }
.pdp-shot img[src*="lumen-shot"] { object-position: 62% 50%; }
.pdp-shot img[src*="ascent-shot"] { object-position: 68% 55%; }
.pdp-shot img[src*="bliss-shot"] { object-position: 68% 45%; }
.pdp-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0) 66%);
}
.pdp-shot-overlay {
  position: absolute;
  left: clamp(24px, 6vw, 90px);
  right: clamp(20px, 4vw, 60px);
  top: 46%;
  transform: translateY(-50%);
  z-index: 2;
}
/* Lumen: margen izquierdo +50% respecto al valor compartido */
.pdp-shot-overlay--lumen {
  left: clamp(42px, 11.6vw, 166px);
}
.pdp-shot-overlay--imperium {
  left: clamp(36px, 9vw, 130px);
}
.pdp-shot-name {
  font-weight: 500;
  font-size: clamp(1.6rem, 5.2vw, 4.2rem);
  color: var(--color-light);
  line-height: 1;
  margin-bottom: 0;
  text-transform: uppercase;
}
/* Imperium: nombre más grande */
.pdp-shot-name--cinzel {
  font-family: 'Cinzel', var(--font-display);
  letter-spacing: 0.03em;
  font-size: clamp(2.1rem, 7.2vw, 6rem);
}
/* Lumen: nombre un poco más del doble de tamaño original */
.pdp-shot-name--display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9.4vw, 8.6rem);
}
/* Ascent: Dune Rise (fuente de marca, provista por el cliente) */
.pdp-shot-name--dunerise {
  font-family: 'Dune Rise', var(--font-body);
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 5vw, 3.6rem);
}
/* Bliss: Roc Grotesk Condensed Light (DEMO temporal; respaldo: Big Shoulders Condensed) */
.pdp-shot-name--rocgrotesk {
  font-family: 'Roc Grotesk Cond DEMO', 'Big Shoulders Condensed', var(--font-body);
  font-weight: 300;
  letter-spacing: 0.01em;
  font-size: clamp(2.9rem, 9.5vw, 8.7rem);
}

/* Bloque de precio: recuadro de color (marrón/durazno) con un recuadro blanco "Precio Oficial" (2 líneas) + monto al lado.
   Ubicado un poco más abajo de la mitad de la imagen, naciendo del borde izquierdo. */
.pdp-price-bar {
  position: absolute;
  left: 0;
  top: 58%;
  z-index: 2;
  display: flex;
  align-items: center;
  column-gap: clamp(30px, 3.4vw, 49px);
  width: clamp(412px, 38.2vw, 550px);
  height: clamp(94px, 8.7vw, 124px);
  padding-left: clamp(48px, 4.45vw, 64px);
}
.pdp-price-bar--imperium { background: #0F0707; }
.pdp-price-bar--lumen { background: #9A471A; }
/* Ascent y Bliss usan colores claros de barra: el texto pasa a oscuro para mantener contraste legible
   (el color de la barra en sí respeta exactamente el hex indicado en el spec sheet) */
.pdp-price-bar--ascent { background: #B7B7B7; }
.pdp-price-bar--bliss { background: #DFADA9; }
.pdp-price-bar--ascent .pdp-price-amount {
  color: var(--color-presence);
}
.pdp-price-bar--bliss .pdp-price-amount {
  color: #FFFFFF;
}
.pdp-price-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-light);
  color: var(--color-presence);
  font-family: var(--font-body);
  flex: 0 0 clamp(108px, 10vw, 144px);
  height: clamp(38px, 3.55vw, 51px);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.85vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 0;
}
.pdp-price-amount {
  display: flex;
  align-items: baseline;
  color: var(--color-light);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 0.9;
  white-space: nowrap;
}
.pdp-price-currency {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  margin-right: 0.16em;
}
.pdp-price-main {
  font-size: clamp(3rem, 6.1vw, 5.25rem);
  letter-spacing: -0.045em;
}
.pdp-price-decimals {
  align-self: flex-start;
  margin-top: 0.08em;
  margin-left: 0.08em;
  font-size: clamp(1.25rem, 2.5vw, 2.1rem);
  line-height: 1;
}
.pdp-ml-tag {
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  bottom: clamp(18px, 3vw, 30px);
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.4rem, 3.25vw, 2.25rem);
  letter-spacing: 0.02em;
  color: var(--color-light);
}

/* ===== CTA ===== */
.pdp-cta {
  text-align: center;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
}
.pdp-cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--color-ink);
  margin-bottom: 14px;
}
.pdp-cta-sub {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: 30px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.3vw, 20px) clamp(30px, 2.8vw, 44px);
  background: var(--color-touch);
  color: var(--color-presence);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.85vw, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.25s ease, transform 0.25s ease;
}
.btn-cta:hover { background: var(--color-balance); transform: translateY(-2px); }

/* ===== FOOTER (igual al del home) ===== */
.site-footer {
  background: var(--color-presence);
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
}
.footer-row {
  flex: 0 0 clamp(140px, 10.4vw, 200px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  gap: 16px 24px;
}
.footer-logo-wrap { grid-column: 2; display: flex; justify-content: center; align-items: center; height: 100%; }
.footer-logo-img { width: clamp(220px, 19.8vw, 390px); height: auto; }
.footer-social {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: clamp(18px, 1.45vw, 28px);
  font-size: clamp(0.82rem, 0.62vw, 1.19rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-social a { color: rgba(176, 178, 166, 0.7); }
.footer-social a:hover { color: var(--color-light); }
.footer-divider { width: 100%; height: 1px; background: rgba(176, 178, 166, 0.4); flex-shrink: 0; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 1.6vw, 32px);
  padding: clamp(18px, 2.2vw, 28px) var(--gutter) 0;
  font-size: clamp(0.68rem, 0.55vw, 0.86rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-legal a { color: rgba(176, 178, 166, 0.55); }
.footer-legal a:hover { color: var(--color-light); }
.footer-bottom {
  flex: 0 0 clamp(84px, 6.2vw, 119px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  font-size: clamp(0.76rem, 0.57vw, 1.09rem);
  color: rgba(176, 178, 166, 0.7);
  letter-spacing: 0.03em;
  text-align: center;
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float {
  position: fixed;
  bottom: clamp(20px, 4vw, 32px);
  right: clamp(20px, 4vw, 32px);
  z-index: 999;
  width: clamp(52px, 6vw, 64px);
  height: clamp(52px, 6vw, 64px);
  border-radius: 50%;
  background: var(--color-depth);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  background: var(--color-warmth);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.whatsapp-icon { width: 52%; height: 52%; color: var(--color-light); }

@media (max-width: 900px) {
  .pdp-story { grid-template-columns: 1fr; }
  .pdp-story p { max-width: 100%; }
  .pdp-notes-grid { grid-template-columns: 1fr; gap: 28px; }
  .pdp-hero { aspect-ratio: 4 / 5; }  .footer-row {
    flex-basis: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 36px var(--gutter) 30px;
    gap: 22px;
  }
  .footer-logo-wrap { grid-column: 1; height: auto; }
  .footer-logo-img { width: clamp(220px, 42vw, 340px); }
  .footer-social { grid-column: 1; justify-content: center; height: auto; gap: 22px; }
}

@media (max-width: 820px) {
  /* Bloque 2: carrusel con scroll horizontal + indicador de swipe (opción elegida) */
  .pdp-accords--carousel {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 24px 0;
    scroll-snap-type: x proximity;
  }
  .pdp-accords--carousel img {
    flex: 0 0 720px;
    width: 720px;
    max-width: none;
    padding: 0 24px;
    scroll-snap-align: start;
  }
}

/* Indicador de swipe (Opción 3), solo visible en mobile */
.pdp-accords--hint { position: relative; }
.accords-swipe-hint {
  display: none;
}
@media (max-width: 820px) {
  .accords-swipe-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-touch);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    pointer-events: none;
  }
  .accords-swipe-hint .hint-arrow {
    display: inline-block;
    animation: swipeHintMove 1.3s ease-in-out infinite;
  }
}
@keyframes swipeHintMove {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}

@media (max-width: 560px) {
  .pdp-hero { aspect-ratio: 3 / 4; }
  .pdp-notes-grid { grid-template-columns: 1fr; }
  .pdp-hero-v2, .pdp-shot { aspect-ratio: 4 / 5; }
  .pdp-hero-v2::after, .pdp-shot::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 78%, rgba(0,0,0,0.75) 100%);
  }
  .pdp2-hero-overlay, .pdp-shot-overlay {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 24px;
    transform: none;
    max-width: 100%;
  }
  /* En mobile el tamaño doblado no entra en el ancho disponible; se reduce proporcionalmente */
  .pdp2-hero-name--display { font-size: clamp(3rem, 16vw, 4rem); }
  .pdp2-hero-name--cinzel { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .pdp2-eyebrow { font-size: clamp(0.85rem, 3.4vw, 1.05rem); letter-spacing: 0.28em; }
  .pdp2-hero-tagline { font-size: clamp(0.9rem, 3.4vw, 1.05rem); }
  .pdp-shot-overlay, .pdp-shot-overlay--lumen { bottom: 108px; }
  .pdp-shot-name { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  /* Bliss (Roc Grotesk Condensed es muy angosta): necesita más tamaño para igualar presencia visual */
  .pdp2-hero-name--rocgrotesk { font-size: clamp(4.6rem, 28vw, 7rem); }
  .pdp-shot-name--rocgrotesk { font-size: clamp(3.4rem, 20vw, 4.8rem); }
  .pdp-price-bar {
    top: auto;
    bottom: 20px;
    column-gap: 12px;
    width: 276px;
    height: 64px;
    padding-left: 12px;
  }
  .pdp-price-badge {
    flex-basis: 80px;
    height: 40px;
    padding: 0;
    font-size: 0.58rem;
  }
  .pdp-price-currency { font-size: 0.92rem; }
  .pdp-price-main { font-size: 2.35rem; }
  .pdp-price-decimals { font-size: 1rem; }
  .pdp-ml-tag { right: 16px; bottom: 20px; font-size: clamp(1.45rem, 7vw, 1.8rem); }
}