/* =====================================================================
   TEMPLATE base inspirado en Shrine Pro (Shopify)
   Tokens extraídos del demo: fondo blanco, texto #2E2A39, acento #DD1D1D,
   botones pill (4rem), tarjetas 1.2rem, headings bold uppercase.
   ===================================================================== */

:root {
  --color-bg: 252, 248, 243;        /* Blanco cálido #FCF8F3 */
  --color-bg-2: 244, 240, 233;      /* Tinte entre blanco cálido y gris nube */
  --color-line: 232, 229, 223;      /* Gris nube #E8E5DF */
  --color-fg: 37, 37, 37;           /* Negro suave #252525 */
  --color-accent: 255, 107, 0;      /* Naranja principal #FF6B00 */
  --color-accent-2: 255, 179, 107;  /* Durazno #FFB36B */
  --color-wpp: 45, 166, 92;       /* verde WhatsApp atenuado: se reconoce, pero el naranja manda */
  --color-star: 255, 184, 0;

  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-weight: 800;
  --heading-spacing: 0.02rem;

  --radius-btn: 4rem;
  --radius-card: 1.6rem;
  --radius-media: 1.6rem;
  --radius-input: 4rem;

  --page-width: 130rem;
  --page-pad: 2rem;
  --section-pad: 5.2rem;

  --shadow-card: 0 1rem 3rem rgba(37, 37, 37, .07);
  --header-h: 7.2rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.6;
  color: rgb(var(--color-fg));
  background: rgb(var(--color-bg));
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-spacing);
  line-height: 1.15;
  margin: 0 0 1.6rem;
  text-transform: uppercase;
}
h1 { font-size: clamp(3.2rem, 6vw, 6rem); }
h2 { font-size: clamp(2.6rem, 4vw, 4.2rem); }
h3 { font-size: 2rem; }
h4 { font-size: 1.6rem; }
p { margin: 0 0 1.2rem; }
.accent { color: rgb(var(--color-accent)); }
.highlight { color: rgb(var(--color-accent)); }
.muted { opacity: .7; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page-width { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-pad); }
.section { padding: var(--section-pad) 0; }
.section--bg-2 { background: rgb(var(--color-bg-2)); }
.section--accent { background: rgb(var(--color-accent)); color: #fff; }
.section__header { max-width: 72rem; margin: 0 auto 3.6rem; text-align: center; }
.section__header p { font-size: 1.7rem; opacity: .8; }

/* ---------- Placeholders (sin imágenes por ahora) ---------- */
.ph {
  position: relative;
  background:
    linear-gradient(135deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.04) 75%, transparent 75%),
    rgb(var(--color-bg-2));
  background-size: 2.4rem 2.4rem;
  border-radius: var(--radius-media);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(var(--color-fg), .45);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ph--square { aspect-ratio: 1; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--landscape { aspect-ratio: 16 / 9; }
.ph--avatar { width: 4.4rem; height: 4.4rem; border-radius: 50%; font-size: 1.4rem; flex-shrink: 0; }
.ph--logo { height: 3.2rem; padding: 0 2rem; border-radius: .6rem; font-size: 1.4rem; }
.ph--icon { width: 5.6rem; height: 5.6rem; border-radius: 50%; margin: 0 auto 1.6rem; font-size: 2.4rem; }

/* ---------- Botones ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 4.8rem; padding: 1.2rem 2.8rem;
  border-radius: var(--radius-btn);
  background: rgb(var(--color-accent)); color: #fff;
  font-weight: 700; font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase;
  border: .2rem solid rgb(var(--color-accent));
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.button:hover { transform: translateY(-.2rem); box-shadow: 0 .8rem 2rem rgba(var(--color-accent), .3); }
.button--secondary { background: transparent; color: rgb(var(--color-fg)); border-color: rgb(var(--color-fg)); }
.button--secondary:hover { background: rgb(var(--color-fg)); color: #fff; box-shadow: none; }
.button--inverse { background: #fff; color: rgb(var(--color-fg)); border-color: #fff; }
.button--wpp { background: rgb(var(--color-wpp)); border-color: rgb(var(--color-wpp)); color: #fff; }
.button--wpp:hover { box-shadow: 0 .8rem 2rem rgba(var(--color-wpp), .35); }
.button--dark { background: rgb(var(--color-fg)); color: #fff; border-color: rgb(var(--color-fg)); }
.button--dark:hover { box-shadow: 0 .8rem 2rem rgba(var(--color-fg), .25); }
.button--full { width: 100%; }
.button--lg { min-height: 5.6rem; font-size: 1.5rem; }
.button svg { width: 2rem; height: 2rem; }
.link { text-decoration: underline; text-underline-offset: .3rem; font-size: 1.4rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: .3rem 1rem; border-radius: 4rem;
  font-size: 1.1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgb(var(--color-accent)); color: #fff; line-height: 1.6;
}
.badge--dark { background: rgb(var(--color-fg)); }
.badge--peach { background: rgb(var(--color-accent-2)); color: rgb(var(--color-fg)); }
.badge--outline { background: transparent; border: .15rem solid currentColor; color: rgb(var(--color-fg)); }

/* ---------- Ticker horizontal ---------- */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker--dark { background: rgb(var(--color-fg)); color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .9rem 0; }
/* La de arriba corre hacia la derecha: el recorrido es el mismo, al revés */
.ticker--dark .ticker__track { animation-direction: reverse; gap: 9rem; padding-left: 9rem; }
.ticker--logos { padding: 3rem 0; border-top: 1px solid rgb(var(--color-line)); border-bottom: 1px solid rgb(var(--color-line)); }
.ticker__track { display: inline-flex; gap: 4rem; padding-left: 4rem; animation: ticker 28s linear infinite; }
.ticker__track > * { display: inline-flex; align-items: center; gap: 1.2rem; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Announcement bar + countdown ---------- */
.announcement {
  background: rgb(var(--color-accent)); color: #fff;
  text-align: center; padding: .8rem var(--page-pad);
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.countdown { display: inline-flex; align-items: center; gap: .4rem; }
.countdown__block { display: inline-flex; flex-direction: column; align-items: center; background: rgba(0,0,0,.2); border-radius: .6rem; padding: .2rem .8rem; min-width: 4.4rem; }
.countdown__number { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.countdown__label { font-size: .9rem; opacity: .8; letter-spacing: .1em; }
.countdown__colon { font-size: 1.6rem; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--color-bg)); border-bottom: 1px solid rgb(var(--color-line));
}
.header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: var(--header-h); gap: 2rem; }
.header__nav { display: flex; justify-content: center; gap: 2.8rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.header__nav a { position: relative; padding: .4rem 0; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .2rem; background: rgb(var(--color-accent)); transform: scaleX(0); transition: transform .2s; }
.header__nav a:hover::after, .header__nav a.is-active::after { transform: scaleX(1); }
.header__logo { justify-self: center; flex-shrink: 0; font-size: 2.2rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.header__logo img { height: 4.6rem; width: auto; max-width: none; object-fit: contain; }
.header__icons { display: flex; align-items: center; gap: .4rem; }
.header__icon { width: 4.4rem; height: 4.4rem; display: grid; place-items: center; border-radius: 50%; position: relative; }
.header__icon:hover { background: rgb(var(--color-bg-2)); }
.header__icon svg { width: 2.2rem; height: 2.2rem; }
.header__cart-count { position: absolute; top: .4rem; right: .2rem; min-width: 1.8rem; height: 1.8rem; padding: 0 .4rem; border-radius: 1rem; background: rgb(var(--color-accent)); color: #fff; font-size: 1.1rem; font-weight: 700; display: grid; place-items: center; }
.header__burger { display: none; }
.mobile-nav { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-slide { position: relative; min-height: min(82vh, 74rem); display: grid; align-items: center; }
.hero-slide__bg { position: absolute; inset: 0; border-radius: 0; display: block; }
.hero-slide__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right 88%; }
.hero-slide__bg--brand { background:
    radial-gradient(120% 90% at 85% 50%, rgba(255,179,107,.55), transparent 60%),
    linear-gradient(120deg, rgb(var(--color-bg)) 40%, rgba(255,107,0,.18)); }
.hero-slide__bg.ph { border-radius: 0; font-size: 1.2rem; place-items: end; padding: 1.6rem; }
.hero-slide__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(37,37,37,.55), rgba(37,37,37,.1)); }
.hero-slide > .page-width { width: 100%; }
.hero-slide__content { position: relative; z-index: 1; max-width: 60rem; color: #fff; padding: 6rem 0; }
.hero-slide__content h1 { margin-bottom: 2rem; }
.hero-slide__content p { font-size: 1.7rem; opacity: .95; margin-bottom: 2.8rem; max-width: 48rem; }
.hero__buttons { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Hero variante split (estilo demo CHUG) */
.hero-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.hero-split__props { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2.4rem 0; }
.hero-split__props h4 { margin-bottom: .4rem; }
.hero-split__props p { font-size: 1.4rem; opacity: .75; }

/* ---------- Rich text ---------- */
.rich-text { text-align: center; max-width: 80rem; margin: 0 auto; }
.rich-text p { font-size: 1.8rem; opacity: .8; }

/* ---------- Product slider / grid ---------- */
.product-slider { display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
.product-slider::-webkit-scrollbar { display: none; }
.product-slider > * { flex: 0 0 26rem; scroll-snap-align: start; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }

/* Fila de productos chicos (la de arriba de todo) */
.product-row { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .6rem; scrollbar-width: none; -ms-overflow-style: none; }
.product-row::-webkit-scrollbar { display: none; }
.product-row > * { flex: 0 0 19rem; scroll-snap-align: start; }
.card--mini { display: block; }
.card--mini .card__media { display: block; border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.card--mini .card__title { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.35; text-transform: none; letter-spacing: 0; margin: 1rem 0 .3rem; min-height: 3.7rem; }
.card--mini .card__price { display: block; font-size: 1.6rem; font-weight: 800; color: rgb(var(--color-accent)); }
.card--mini:hover .card__media { box-shadow: var(--shadow-card-hover, 0 1rem 2.4rem rgba(0,0,0,.12)); }
@media (max-width: 749px) {
  .product-row { gap: 1.2rem; }
  .product-row > * { flex: 0 0 15rem; }
}

.card { position: relative; display: flex; flex-direction: column; gap: 1.2rem; }
.card__media { position: relative; }
.card__badges { position: absolute; top: 1.2rem; left: 1.2rem; display: flex; gap: .6rem; z-index: 1; }
.card__title { font-size: 1.6rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0; }
.card__subtitle { font-size: 1.3rem; opacity: .7; margin: 0; }
.card__rating { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; }
.card__price { display: flex; align-items: baseline; gap: .8rem; font-weight: 700; }
.card__compare { text-decoration: line-through; opacity: .5; font-weight: 400; }
.card__actions { display: flex; gap: .8rem; margin-top: auto; }
.card__actions .button { flex: 1; padding-left: 1.2rem; padding-right: 1.2rem; }
.card--tile .card__media .ph { border-radius: var(--radius-card); }
.card--tile .card__info { position: absolute; left: 1.6rem; bottom: 1.6rem; right: 1.6rem; background: #fff; border-radius: 1rem; padding: 1rem 1.4rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-card); }

.stars { display: inline-flex; gap: .1rem; color: rgb(var(--color-star)); }
.stars svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Columns / iconos ---------- */
.columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.columns--3 { grid-template-columns: repeat(3, 1fr); }
.column { background: rgb(var(--color-bg)); border-radius: var(--radius-card); padding: 2rem; box-shadow: var(--shadow-card); }
.column .ph { margin-bottom: 1.6rem; }
.column h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.column p { font-size: 1.4rem; opacity: .75; margin: 0; }

.icons-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; text-align: center; }

/* ---------- Nosotros / equipo ---------- */
.about { display: grid; grid-template-columns: 1.15fr .85fr; gap: 5.6rem; align-items: center; }
.about__media { margin: 0; }
.about__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.about__media figcaption { font-size: 1.2rem; opacity: .55; margin-top: .9rem; }
.about__eyebrow {
  color: rgb(var(--color-accent)); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.2rem;
}
.about__title { font-size: clamp(2.4rem, 3.2vw, 3.4rem); margin: 0 0 1.6rem; }
.about__text { font-size: 1.7rem; opacity: .8; margin: 0 0 2.8rem; max-width: 46rem; }

@media (max-width: 989px) {
  .about { grid-template-columns: 1fr; gap: 3.2rem; }
  .about__text { max-width: none; }
}

/* ---------- Destacados de portada (video o foto + texto) ---------- */
.spots { display: grid; gap: 7.2rem; }
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: 5.6rem; align-items: center; }
/* La imagen cambia de lado en cada fila al bajar */
.spot:nth-child(even) .spot__media { order: 2; }
.spot__media { display: flex; justify-content: center; min-width: 0; }
/* El marco envuelve al video o la foto para poder apoyarle el cartelito
   encima: es quien lleva el tope de ancho, no el medio */
.spot__marco { position: relative; display: block; width: 100%; }
.spot__marco--img { max-width: 46rem; }
/* Los videos vienen en formato reel (vertical): se acotan para que la fila no se estire */
.spot__marco--video { max-width: 32rem; }
.spot__img, .spot__video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  background: rgb(var(--color-bg-2));
}
.spot__img { aspect-ratio: 1 / 1; object-fit: cover; }
.spot__video { aspect-ratio: 9 / 16; object-fit: cover; }
.spot__title { font-size: clamp(2.4rem, 3.4vw, 3.6rem); margin: 0 0 1.6rem; }
.spot__text { font-size: 1.7rem; opacity: .8; margin: 0 0 2.8rem; max-width: 46rem; }

@media (max-width: 989px) {
  .spots { gap: 5.6rem; }
  .spot { grid-template-columns: 1fr; gap: 3.2rem; }
  .spot:nth-child(even) .spot__media { order: 0; }
  .spot__text { max-width: none; }
}
@media (max-width: 749px) {
  .spots { gap: 4.8rem; }
  .spot { gap: 2.4rem; }
  .spot__marco--video { max-width: 26rem; }
  .spot__text { font-size: 1.5rem; margin-bottom: 2.4rem; }
}

@media (max-width: 749px) {
  .about { gap: 2.4rem; }
  .about__media img { aspect-ratio: 3 / 2; }
  .about__text { font-size: 1.5rem; margin-bottom: 2.4rem; }
}
.icons-content h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.icons-content p { font-size: 1.4rem; opacity: .75; }

/* ---------- Divisor de sección ---------- */
.section-divider { line-height: 0; }
.section-divider svg { width: 100%; height: 6rem; }
.section-divider--flip svg { transform: scaleY(-1); }

/* ---------- Reseñas ticker ---------- */
.reviews { padding: var(--section-pad) 0; overflow: hidden; }
.reviews__row { margin-bottom: 1.6rem; }
.reviews__row:nth-child(even) .ticker__track { animation-direction: reverse; animation-duration: 34s; }
.review-item { display: flex; gap: 1.2rem; align-items: center; background: rgb(var(--color-bg)); border: 1px solid rgb(var(--color-line)); border-radius: var(--radius-card); padding: 1.4rem 1.8rem; width: 34rem; white-space: normal; box-shadow: var(--shadow-card); }
.review-item__text { font-size: 1.4rem; margin: 0 0 .3rem; }
.review-item__author { font-size: 1.2rem; font-weight: 700; opacity: .7; }

/* ---------- Tabla comparativa ---------- */
.comparison { max-width: 80rem; margin: 0 auto; }
.comparison table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; }
.comparison th, .comparison td { padding: 1.6rem 2rem; text-align: center; border-bottom: 1px solid rgb(var(--color-line)); }
.comparison th:first-child, .comparison td:first-child { text-align: left; font-weight: 700; }
.comparison thead th { background: rgb(var(--color-bg-2)); font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; }
.comparison thead th.is-us { background: rgb(var(--color-accent)); color: #fff; }
.comparison td.is-us { background: rgba(var(--color-accent), .06); }
.comparison .icon-yes { color: rgb(var(--color-accent)); }
.comparison .icon-no { opacity: .35; }
.comparison svg { width: 2.2rem; height: 2.2rem; margin: 0 auto; }

/* ---------- Resultados (anillos) ---------- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: center; }
.results__ring { width: 14rem; height: 14rem; margin: 0 auto 1.6rem; position: relative; }
.results__ring svg { transform: rotate(-90deg); }
.results__ring circle { fill: none; stroke-width: 10; }
.results__ring .track { stroke: rgb(var(--color-line)); }
.results__ring .bar { stroke: rgb(var(--color-accent)); stroke-linecap: round; stroke-dasharray: 377; stroke-dashoffset: 377; transition: stroke-dashoffset 1.4s ease-out; }
.results__percentage { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; font-weight: 800; }
.results__text { font-size: 1.5rem; max-width: 30rem; margin: 0 auto; }
.results__caption { text-align: center; margin-top: 2.4rem; font-size: 1.3rem; opacity: .6; }

/* ---------- Shoppable image ---------- */
.shoppable { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.shoppable__hotspot { position: absolute; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .6rem rgba(255,255,255,.4); display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: rgb(var(--color-accent)); }
.shoppable__list { display: grid; gap: 1.6rem; }
.shoppable__item { display: flex; align-items: center; gap: 1.6rem; padding: 1.4rem; border-radius: var(--radius-card); border: 1px solid rgb(var(--color-line)); }
.shoppable__item .ph { width: 7rem; height: 7rem; border-radius: 1rem; }
.shoppable__item .card__title { flex: 1; }

/* ---------- CTA banner ---------- */
.cta-banner { border-radius: var(--radius-card); background: rgb(var(--color-fg)); color: #fff; padding: 5rem 3rem; text-align: center; }
.cta-banner p { font-size: 1.7rem; opacity: .85; max-width: 60rem; margin: 0 auto 2.4rem; }

/* ---------- FAQ (acordeón) ---------- */
.accordion { max-width: 80rem; margin: 0 auto; }
.accordion details { border-bottom: 1px solid rgb(var(--color-line)); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1.8rem 0; font-weight: 700; font-size: 1.6rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 2.2rem; font-weight: 400; transition: transform .2s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__content { padding: 0 0 1.8rem; font-size: 1.5rem; opacity: .85; }
.accordion__content table { width: 100%; border-collapse: collapse; font-size: 1.4rem; }
.accordion__content td { padding: .8rem 0; border-bottom: 1px dashed rgb(var(--color-line)); }
.accordion__content td:first-child { font-weight: 700; width: 40%; }

/* ---------- Footer ---------- */
.footer { background: rgb(var(--color-bg-2)); padding: 5rem 0 2rem; margin-top: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.6fr; gap: 4rem; }
.footer h4 { font-size: 1.3rem; letter-spacing: .14em; margin-bottom: 1.6rem; }
.footer li { margin-bottom: .8rem; font-size: 1.4rem; }
.footer li a:hover { text-decoration: underline; }
.footer__brand p { font-size: 1.4rem; opacity: .75; }
.footer__logo { height: 5.2rem; width: auto; margin-bottom: 1.2rem; }
.footer__wpp { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1rem; font-weight: 700; font-size: 1.4rem; }
.newsletter { display: flex; gap: .8rem; margin-top: 1.2rem; }
.newsletter input { flex: 1; min-width: 0; padding: 1.2rem 1.8rem; border: .15rem solid rgba(var(--color-fg), .2); border-radius: var(--radius-input); background: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.6rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgb(var(--color-line)); font-size: 1.3rem; opacity: .75; }
.payment-icons { display: flex; gap: .6rem; }
.payment-icons span { width: 4rem; height: 2.6rem; border-radius: .4rem; background: #fff; border: 1px solid rgba(var(--color-fg), .15); display: grid; place-items: center; font-size: .9rem; font-weight: 800; letter-spacing: 0; }

/* ---------- Cart drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 90; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(46rem, 100%); background: #fff; z-index: 100; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.cart-drawer.is-open { transform: none; }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.8rem 2.4rem; border-bottom: 1px solid rgb(var(--color-line)); }
.cart-drawer__head h3 { margin: 0; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 2rem 2.4rem; }
.cart-drawer__foot { padding: 2rem 2.4rem; border-top: 1px solid rgb(var(--color-line)); background: rgb(var(--color-bg)); }
.cart-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.6rem; }
.cart-badges span { font-size: 1.1rem; font-weight: 700; text-align: center; padding: .8rem .4rem; border-radius: .8rem; background: rgb(var(--color-bg-2)); letter-spacing: .04em; text-transform: uppercase; }
.shipping-bar { font-size: 1.3rem; margin-bottom: 1.6rem; }
.shipping-bar__track { height: .8rem; border-radius: 1rem; background: rgb(var(--color-bg-2)); overflow: hidden; margin-top: .6rem; }
.shipping-bar__fill { height: 100%; background: rgb(var(--color-accent)); width: 0; transition: width .4s; }
.cart-empty { text-align: center; padding: 4rem 0; }
.cart-item { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.4rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid rgb(var(--color-line)); }
.cart-item .ph { width: 7rem; height: 7rem; border-radius: 1rem; font-size: 1rem; }
.cart-item__title { font-weight: 700; font-size: 1.4rem; }
.cart-item__meta { font-size: 1.2rem; opacity: .7; }
.cart-item__qty { display: inline-flex; align-items: center; border: 1px solid rgba(var(--color-fg), .2); border-radius: 4rem; margin-top: .6rem; }
.cart-item__qty button { width: 3rem; height: 3rem; font-size: 1.6rem; }
.cart-item__qty span { min-width: 2.4rem; text-align: center; font-size: 1.3rem; }
.cart-item__price { font-weight: 700; font-size: 1.4rem; text-align: right; }
.cart-item__remove { font-size: 1.1rem; text-decoration: underline; opacity: .6; display: block; margin-top: .4rem; }
.cart-upsell { margin-top: 2rem; padding: 1.4rem; border-radius: var(--radius-card); background: rgb(var(--color-bg-2)); display: flex; gap: 1.2rem; align-items: center; }
.cart-upsell .ph { width: 6rem; height: 6rem; border-radius: 1rem; font-size: .9rem; }
.cart-upsell__text { flex: 1; font-size: 1.3rem; }
.cart-upsell__text strong { display: block; }
.cart-discount { display: flex; gap: .8rem; margin-bottom: 1.2rem; }
.cart-discount input { flex: 1; min-width: 0; padding: 1rem 1.6rem; border-radius: var(--radius-input); border: .15rem solid rgba(var(--color-fg), .2); }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 1.6rem; font-weight: 700; margin-bottom: 1.2rem; }
.cart-note { font-size: 1.2rem; text-align: center; opacity: .6; margin-top: 1rem; }

/* ---------- Popup promo ---------- */
.popup { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 2rem; }
.popup.is-open { display: grid; }
/* El velo va DETRÁS del cuadro. Hereda z-index 90 de .drawer-backdrop, así que
   sin esto se dibuja encima del modal: lo apaga y además se come los clicks del
   formulario, porque el velo cierra el popup al tocarlo. */
.popup .drawer-backdrop { z-index: 0; }
.popup__box { position: relative; z-index: 1; background: #fff; border-radius: var(--radius-card); max-width: 44rem; width: 100%; padding: 4rem 3rem 3rem; text-align: center; box-shadow: 0 2rem 6rem rgba(0,0,0,.25); }
.popup__close { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; }
.popup__box input { width: 100%; padding: 1.2rem 1.8rem; border-radius: var(--radius-input); border: .15rem solid rgba(var(--color-fg), .2); margin-bottom: 1rem; }

/* ---------- Scroll to top + WhatsApp flotante ---------- */
.scroll-top { position: fixed; right: 2rem; bottom: 9.6rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgb(var(--color-fg)); color: #fff; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 60; }
.scroll-top.is-visible { opacity: 1; pointer-events: auto; }
.scroll-top svg { width: 1.8rem; height: 1.8rem; }
.wpp-fab { position: fixed; right: 2rem; bottom: 2.4rem; height: 5.6rem; padding: 0 2rem 0 1.6rem; border-radius: 4rem; background: rgb(var(--color-wpp)); color: #fff; display: inline-flex; align-items: center; gap: 1rem; font-weight: 700; font-size: 1.4rem; box-shadow: 0 1rem 3rem rgba(var(--color-wpp), .45); z-index: 60; }
.wpp-fab svg { width: 2.6rem; height: 2.6rem; }

/* ---------- Progreso de scroll ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: .3rem; background: rgb(var(--color-accent)); width: 0; z-index: 200; }

/* =====================================================================
   PÁGINA DE PRODUCTO — distribución de la ficha de voltra.com.ar
   En celular: carrusel de fotos y debajo la compra. En escritorio: la
   primera foto grande, el resto en dos columnas y la compra fija a la
   derecha. Después, bloques de foto o video + texto.
   ===================================================================== */
.pdp { padding-top: 2.4rem; }
.pdp__grid { display: grid; gap: 2.4rem; }
.pdp__media { position: relative; min-width: 0; }
.pdp__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-media); }
.pdp__gallery::-webkit-scrollbar { display: none; }
.pdp__slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.pdp__slide img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-media); background: rgb(var(--color-bg-2)); }
.pdp__arrow { position: absolute; top: calc(50% - 1.6rem); transform: translateY(-50%); width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: rgb(var(--color-fg)); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.pdp__arrow[hidden] { display: none; }
.pdp__arrow svg { width: 2rem; height: 2rem; }
.pdp__arrow--prev { left: 1rem; }
.pdp__arrow--next { right: 1rem; }
.pdp__counter { display: block; margin-top: .8rem; text-align: center; font-size: 1.3rem; font-weight: 700; opacity: .6; }

.pdp__info > * + * { margin-top: 1.6rem; }
.pdp__stock { display: inline-flex; align-items: center; gap: .8rem; margin: 0; font-size: 1.4rem; font-weight: 600; }
.pdp__dot { width: .9rem; height: .9rem; border-radius: 50%; background: rgb(var(--color-wpp)); box-shadow: 0 0 0 .4rem rgba(var(--color-wpp), .15); }
.pdp__stock.is-out .pdp__dot { background: rgba(var(--color-fg), .35); box-shadow: none; }
.pdp__title { font-size: clamp(2.6rem, 3.2vw, 3.6rem); line-height: 1.15; margin: 0; text-transform: none; }
.pdp__stock + .pdp__title { margin-top: .8rem; }
.pdp__lead { font-size: 1.6rem; line-height: 1.5; opacity: .8; margin: 0; }
.pdp__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.pdp__trust span { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border-radius: .8rem; background: rgb(var(--color-bg-2)); font-size: 1.25rem; font-weight: 700; }
.pdp__trust svg { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }

@media (min-width: 990px) {
  .pdp__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 4.8rem; align-items: start; }
  .pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; overflow: visible; border-radius: 0; }
  .pdp__slide:first-child { grid-column: 1 / -1; }
  /* La última que queda sola en su fila ocupa todo el ancho */
  .pdp__slide:last-child:nth-child(even) { grid-column: 1 / -1; }
  .pdp__arrow, .pdp__counter { display: none !important; }
  .pdp__info { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Bloques de abajo: foto o video + texto, en una tarjeta */
.pdp-block { padding: 3.2rem 0; }
.pdp-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.pdp-story--video { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); }
.pdp-story--solo { grid-template-columns: minmax(0, 1fr); max-width: 80rem; margin: 0 auto; }
.pdp-story__media { position: relative; background: rgb(var(--color-bg-2)); }
.pdp-story__img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.pdp-story__video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.pdp-story__body { align-self: center; padding: 4.8rem; }
.pdp-story__title { font-size: clamp(2.4rem, 2.8vw, 3.2rem); line-height: 1.2; margin: 0 0 2rem; text-transform: none; }
.pdp-story__text { font-size: 1.6rem; line-height: 1.65; opacity: .85; }
.pdp-story__text p { margin: 0 0 1.4rem; }
.pdp-story__text p:last-child { margin-bottom: 0; }
.pdp-specs { width: 100%; border-collapse: collapse; font-size: 1.5rem; }
.pdp-specs td { padding: 1.1rem 0; border-bottom: 1px dashed rgb(var(--color-line)); vertical-align: top; }
.pdp-specs td:first-child { width: 40%; padding-right: 1.6rem; font-weight: 700; }

/* Cinta con los beneficios del producto */
.pdp-ticker { background: rgb(var(--color-fg)); color: #fff; padding: 1.3rem 0; font-size: 1.6rem; font-weight: 800; }
.pdp-ticker .ticker__track { gap: 2.4rem; padding-left: 2.4rem; }
.pdp-ticker .ticker__track > span::after { content: "✦"; margin-left: 1.2rem; font-size: 1.3rem; color: rgb(var(--color-accent)); }

.section__header .pdp-eyebrow { margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* Somos Compra Fácil: foto y una tarjeta oscura encima */
.pdp-about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.pdp-about__media { position: relative; margin: 0; }
.pdp-about__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-media); }
.pdp-about__card { position: relative; z-index: 1; margin-left: -4rem; padding: 4.8rem; border-radius: var(--radius-card); background: rgb(var(--color-fg)); color: #fff; text-align: center; box-shadow: var(--shadow-card); }
.pdp-about__card h2 { font-size: clamp(2.4rem, 2.8vw, 3.2rem); margin: 0 0 1.4rem; text-transform: none; }
.pdp-about__card p { margin: 0; font-size: 1.6rem; opacity: .85; }

@media (max-width: 989px) {
  .pdp-story, .pdp-story--video { grid-template-columns: minmax(0, 1fr); }
  .pdp-story__body { padding: 2.8rem 2.4rem 3.2rem; }
  .pdp-about { grid-template-columns: minmax(0, 1fr); }
  .pdp-about__card { margin: -4rem 1.6rem 0; padding: 3.2rem 2.4rem; }
}

.product__rating { display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; }
.product__rating a { text-decoration: underline; opacity: .7; }
.social-proof { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 1.3rem; font-weight: 700; }
.social-proof span { display: inline-flex; align-items: center; gap: .6rem; }
.social-proof .dot { width: .8rem; height: .8rem; border-radius: 50%; background: rgb(var(--color-wpp)); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.review-avatars { display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; }
.review-avatars__stack { display: flex; }
.review-avatars__stack .ph { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: .2rem solid #fff; margin-left: -1rem; font-size: 1rem; }
.review-avatars__stack .ph:first-child { margin-left: 0; }

.product__price { display: flex; align-items: center; gap: 1.2rem; }
.product__price .price { font-size: 2.6rem; font-weight: 800; }
.product__price .compare { font-size: 1.8rem; text-decoration: line-through; opacity: .5; }

.quantity-breaks__title { text-align: center; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; display: flex; align-items: center; gap: 1.2rem; }
.quantity-breaks__title::before, .quantity-breaks__title::after { content: ""; flex: 1; height: 1px; background: rgba(var(--color-fg), .15); }
.quantity-breaks { display: grid; gap: 1rem; margin-top: 1.2rem; }
.quantity-break { position: relative; display: block; border: .2rem solid rgba(var(--color-fg), .15); border-radius: var(--radius-card); padding: 1.6rem; cursor: pointer; transition: border-color .15s, background .15s; }
.quantity-break:hover { border-color: rgba(var(--color-fg), .4); }
.quantity-break.is-selected { border-color: rgb(var(--color-accent)); background: rgba(var(--color-accent), .04); }
.quantity-break__badge { position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); }
.quantity-break__wrapper { display: flex; align-items: center; gap: 1.4rem; }
.quantity-break__radio { width: 2rem; height: 2rem; border-radius: 50%; border: .2rem solid rgba(var(--color-fg), .3); flex-shrink: 0; display: grid; place-items: center; }
.quantity-break.is-selected .quantity-break__radio { border-color: rgb(var(--color-accent)); }
.quantity-break.is-selected .quantity-break__radio::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: rgb(var(--color-accent)); }
.quantity-break__image { width: 5.6rem; height: 5.6rem; border-radius: .8rem; font-size: .9rem; }
.quantity-break__content { flex: 1; }
.quantity-break__label { font-weight: 800; font-size: 1.5rem; }
.quantity-break__caption { font-size: 1.3rem; opacity: .7; }
.quantity-break__right { text-align: right; }
.quantity-break__price { font-weight: 800; font-size: 1.6rem; }
.quantity-break__compare { font-size: 1.3rem; text-decoration: line-through; opacity: .5; }
.quantity-break__unit { font-size: 1.1rem; opacity: .6; }
.quantity-break__benefit { margin-top: 1rem; padding: .6rem 1rem; border-radius: .8rem; background: rgb(var(--color-accent)); color: #fff; font-size: 1.1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; }

.product__benefits { display: grid; gap: .6rem; font-size: 1.4rem; }
.product__benefits li { display: flex; align-items: center; gap: .8rem; }
.product__benefits svg { width: 1.8rem; height: 1.8rem; color: rgb(var(--color-accent)); flex-shrink: 0; }

.product-form__buttons { display: grid; gap: 1rem; }

.payment-badges { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.payment-badges span { width: 4.6rem; height: 2.8rem; border-radius: .4rem; border: 1px solid rgba(var(--color-fg), .15); display: grid; place-items: center; font-size: .9rem; font-weight: 800; }

.delivery-timeline { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; text-align: center; padding: 1.6rem 0 .4rem; }
.delivery-timeline::before { content: ""; position: absolute; top: 2.4rem; left: 16%; right: 16%; height: .2rem; background: rgba(var(--color-fg), .15); }
.delivery-timeline__step { position: relative; }
.delivery-timeline__icon { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgb(var(--color-accent)); margin: 0 auto 1rem; position: relative; border: .4rem solid #fff; box-shadow: 0 0 0 .2rem rgb(var(--color-accent)); }
.delivery-timeline__label { font-size: 1.3rem; font-weight: 700; }
.delivery-timeline__date { font-size: 1.2rem; opacity: .65; }

.guarantee { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: var(--radius-card); border: .15rem dashed rgba(var(--color-accent), .5); font-size: 1.3rem; }
.guarantee strong { display: block; font-size: 1.4rem; }
.guarantee svg { width: 3.2rem; height: 3.2rem; color: rgb(var(--color-accent)); flex-shrink: 0; }

/* Barra de compra fija: un solo botón con el precio, como en Voltra */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid rgb(var(--color-line)); box-shadow: 0 -1rem 3rem rgba(0,0,0,.08); transform: translateY(110%); transition: transform .3s; }
.sticky-atc.is-visible { transform: none; }
.sticky-atc__inner { display: flex; padding: 1rem var(--page-pad); }
.sticky-atc__btn { width: 100%; gap: 1rem; }
/* Mientras se ve la barra, el botón flotante de WhatsApp no la tapa */
.has-sticky-atc .wpp-fab { transform: translateY(140%); opacity: 0; pointer-events: none; }

.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 90rem; margin: 0 auto; }
.feature-list li { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); font-weight: 700; font-size: 1.4rem; }
.feature-list svg { width: 2rem; height: 2rem; color: rgb(var(--color-accent)); flex-shrink: 0; }

/* Ticker vertical de "compras recientes" */
.recent-buys { max-width: 52rem; margin: 0 auto; height: 18rem; overflow: hidden; position: relative; }
.recent-buys::before, .recent-buys::after { content: ""; position: absolute; left: 0; right: 0; height: 4rem; z-index: 1; pointer-events: none; }
.recent-buys::before { top: 0; background: linear-gradient(rgb(var(--color-bg-2)), transparent); }
.recent-buys::after { bottom: 0; background: linear-gradient(transparent, rgb(var(--color-bg-2))); }
.recent-buys ul { animation: vticker 14s linear infinite; }
.recent-buys li { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.4rem; margin-bottom: .8rem; border-radius: 1rem; background: #fff; font-size: 1.3rem; box-shadow: var(--shadow-card); }
.recent-buys li .ph { width: 3.6rem; height: 3.6rem; border-radius: .6rem; font-size: .8rem; }
.recent-buys time { margin-left: auto; opacity: .55; font-size: 1.1rem; }
@keyframes vticker { to { transform: translateY(-50%); } }

/* =====================================================================
   PÁGINA CATÁLOGO
   ===================================================================== */
.collection-head { text-align: center; margin-bottom: 3.2rem; }
.collection-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.4rem; font-size: 1.3rem; }
.collection-toolbar select { padding: .8rem 1.4rem; border-radius: 4rem; border: .15rem solid rgba(var(--color-fg), .2); background: #fff; font: inherit; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 989px) {
  .product-grid, .columns, .icons-content { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero-split, .shoppable { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; gap: 3rem; }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 749px) {
  :root { --section-pad: 3.6rem; --header-h: 6rem; }
  /* El logo se comprimía: alto fijo + ancho limitado por max-width.
     Se le da espacio achicando íconos y gap, y se le prohíbe deformarse. */
  .header__logo img { height: 3.4rem; max-width: none; }
  .header__inner { gap: 1rem; }
  .header__icon { width: 4rem; height: 4rem; }
  .header__icon svg { width: 2rem; height: 2rem; }
  .header__icons > a[aria-label="Cuenta"] { display: none; }
  .header__nav { display: none; }
  .header__burger { display: grid; }
  .mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid rgb(var(--color-line)); padding: 1.6rem var(--page-pad); }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a { display: block; padding: 1.2rem 0; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 1.4rem; border-bottom: 1px solid rgba(var(--color-fg), .06); }
  .hero-slide { min-height: 64vh; }
  .hero-slide__content { padding: 4rem 0; }
  .product-grid, .columns, .icons-content, .feature-list { grid-template-columns: 1fr; }
  .product-slider > * { flex-basis: 22rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .review-item { width: 28rem; }
  .cart-badges span { font-size: 1rem; }
  .wpp-fab span { display: none; }
  .wpp-fab { padding: 0; width: 5.6rem; justify-content: center; }
  .comparison th, .comparison td { padding: 1.2rem .8rem; font-size: 1.3rem; }
}

/* ---------- Marca ---------- */
.popup__icon { width: 11rem; margin: 0 auto 1.6rem; }
.hero-slide__logo { width: min(34rem, 64%); margin-bottom: 2.4rem; }
.brand-tagline { font-weight: 700; }
.brand-tagline .accent { color: rgb(var(--color-accent)); }
.card--tile .card__info { background: rgb(var(--color-bg)); }
.column, .review-item, .comparison table, .feature-list li, .recent-buys li, .popup__box, .cart-drawer, .sticky-atc { background: rgb(var(--color-bg)); }
.column { border: 1px solid rgb(var(--color-line)); }

/* Hero claro (identidad Compra Fácil) */
.hero-slide--light .hero-slide__overlay { background: linear-gradient(90deg, rgba(252,248,243,.82) 0%, rgba(252,248,243,.45) 38%, rgba(252,248,243,0) 60%); }
.hero-slide--light .hero-slide__content { color: rgb(var(--color-fg)); }
.hero-slide--light .hero-slide__content p { opacity: .8; }
.hero-slide--light .button--inverse { background: rgb(var(--color-fg)); color: #fff; border-color: rgb(var(--color-fg)); }

/* ---------- Imágenes reales (reemplazan placeholders) ---------- */
.media-img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-media); background: rgb(var(--color-bg-2)); }
.media-img.ph--square { aspect-ratio: 1; }
.media-img.ph--portrait { aspect-ratio: 4 / 5; }
.media-img.cart-item__img { width: 7rem; height: 7rem; border-radius: 1rem; }

/* ---------- Hero: ajustes finales (referencia de marca) ---------- */
.hero-slide--light .hero-slide__content h1 { text-shadow: 0 .1rem 0 rgba(252,248,243,.6); }
@media (min-width: 990px) { .hero-slide__content { max-width: 70rem; } }
.hero-slide--brand .hero-slide__content { max-width: 66rem; }

@media (max-width: 989px) {
  /* Tablet: el celular se corre para no chocar con el texto */
  .hero-slide__bg img { object-position: 82% 88%; }
  .hero-slide--light .hero-slide__overlay { background: linear-gradient(90deg, rgba(252,248,243,.9) 0%, rgba(252,248,243,.6) 45%, rgba(252,248,243,.05) 72%); }
}
@media (max-width: 749px) {
  /* Mobile: imagen anclada abajo a la derecha, texto arriba con velo cálido */
  /* En celular el texto NO va encima de la foto: quedaban los botones
     flotando sobre el celular de la imagen y se leía amontonado.
     Se apila: contenido arriba sobre fondo limpio, foto abajo. */
  .hero-slide { display: flex; flex-direction: column; min-height: 0; background: rgb(var(--color-bg)); }
  .hero-slide > .page-width { order: 1; }
  .hero-slide__bg { position: relative; order: 2; height: 32vh; min-height: 21rem; }
  .hero-slide__bg img { height: 100%; object-position: center bottom; }
  .hero-slide__overlay { display: none; }
  /* El hero no lleva foto de fondo: la franja quedaba como un hueco vacío */
  .hero-slide--brand .hero-slide__bg { display: none; }
  .hero-slide--brand { background:
      radial-gradient(120% 60% at 90% 100%, rgba(255,179,107,.5), transparent 60%),
      linear-gradient(160deg, rgb(var(--color-bg)) 45%, rgba(255,107,0,.16)); }
  .hero-slide--brand .hero-slide__content { padding-bottom: 4.4rem; }
  .hero-slide__content { padding: 3.2rem 0 0; max-width: 100%; }
  .hero-slide__content h1 { font-size: 2.9rem; line-height: 1.12; }
  .hero-slide__logo { width: min(26rem, 62%); margin-bottom: 1.6rem; }
  .hero-slide__content p { font-size: 1.5rem; margin-bottom: 2rem; }
  .hero__buttons .button { flex: 1 1 100%; }
}

/* Sin logo en el hero: el titular ocupa ese aire */
.hero-slide--light .hero-slide__content h1 { font-size: clamp(3.4rem, 5.6vw, 6.4rem); letter-spacing: -.02rem; }
@media (max-width: 749px) { .hero-slide--light .hero-slide__content h1 { font-size: 2.7rem; line-height: 1.15; } }


/* =====================================================================
   OPTIMIZACIÓN MOBILE
   Objetivo: menos altura desperdiciada arriba y menos scroll total.
   La home pasaba de 11.000px de alto en un celular.
   ===================================================================== */
@media (max-width: 749px) {

  /* ---- Barra superior compacta: antes comía el 28% de la pantalla ---- */
  .ticker--dark { font-size: 1.05rem; letter-spacing: .06em; padding: .5rem 0; }
  .ticker--dark .ticker__track { gap: 5.4rem; padding-left: 5.4rem; }

  .announcement { padding: .6rem 1.2rem; gap: .8rem; font-size: 1.1rem; flex-wrap: nowrap; }
  .announcement > span:first-child { white-space: nowrap; }
  .countdown { gap: .3rem; }
  .countdown__block { padding: .1rem .5rem; min-width: 3.2rem; }
  .countdown__number { font-size: 1.3rem; }
  .countdown__label { font-size: .75rem; letter-spacing: .06em; }
  .countdown__colon { font-size: 1.2rem; }

  /* ---- Tipografía de sección: los títulos ocupaban demasiado ---- */
  h1 { font-size: 3rem; }
  h2 { font-size: 2.4rem; }
  .section__header { margin-bottom: 2.4rem; }
  .section__header p { font-size: 1.45rem; }
  .rich-text p { font-size: 1.5rem; }
  :root { --section-pad: 3.2rem; }

  /* ---- Productos en 2 columnas: era 1 y obligaba a un scroll enorme ---- */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem; }
  .card { gap: .8rem; }
  .card__rating { font-size: 1.15rem; gap: .3rem; }
  .card__rating .stars svg { width: 1.2rem; height: 1.2rem; }
  .card__title { font-size: 1.35rem; line-height: 1.3; }
  .card__subtitle { display: none; }          /* el detalle vive en la ficha */
  .card__price { font-size: 1.4rem; gap: .5rem; flex-wrap: wrap; }
  .card__compare { font-size: 1.2rem; }
  .card__badges { top: .8rem; left: .8rem; gap: .4rem; }
  .badge { font-size: .95rem; padding: .25rem .7rem; }
  .card__actions { flex-direction: column; gap: .6rem; }
  .card__actions .button { width: 100%; min-height: 4rem; font-size: 1.2rem; padding: .8rem 1rem; }
  .collection-head { margin-bottom: 2rem; }
  .collection-toolbar { font-size: 1.2rem; margin-bottom: 1.6rem; }
  .collection-toolbar select { font-size: 1.2rem; padding: .6rem 1rem; }

  /* ---- Beneficios y pasos en 2 columnas ---- */
  .columns { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .column { padding: 1.2rem; border-radius: 1.2rem; }
  .column .ph { margin-bottom: 1rem; }
  .column h3 { font-size: 1.3rem; margin-bottom: .4rem; }
  .column p { font-size: 1.2rem; line-height: 1.45; }

  .icons-content { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
  .icons-content .ph--icon { width: 4.4rem; height: 4.4rem; font-size: 2rem; margin-bottom: 1rem; }
  .icons-content h3 { font-size: 1.3rem; }
  .icons-content p { font-size: 1.2rem; line-height: 1.45; }

  /* ---- Logos "visto en": los placeholders se veían como un error ---- */
  .ticker--logos { padding: 1.8rem 0; }
  .ph--logo { height: 2.6rem; font-size: 1.1rem; padding: 0 1.4rem; }

  /* ---- Slider de productos destacados ---- */
  .product-slider { gap: 1.2rem; }
  .product-slider > * { flex-basis: 15rem; }
  .card--tile .card__info { left: .8rem; right: .8rem; bottom: .8rem; padding: .7rem 1rem; font-size: 1.2rem; }

  /* ---- Shoppable ---- */
  .shoppable { gap: 2rem; }
  .shoppable__item { padding: 1rem; gap: 1.2rem; }
  .shoppable__item .ph { width: 5.4rem; height: 5.4rem; }
  .shoppable__item .card__title { font-size: 1.3rem; }

  /* ---- Reseñas ---- */
  .review-item { width: 24rem; padding: 1.1rem 1.4rem; gap: 1rem; }
  .review-item__text { font-size: 1.25rem; }
  .review-item__author { font-size: 1.1rem; }
  .ph--avatar { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; }

  /* ---- Resultados ---- */
  .results { gap: 2.4rem; }
  .results__ring { width: 11rem; height: 11rem; margin-bottom: 1.2rem; }
  .results__percentage { font-size: 2.4rem; }
  .results__text { font-size: 1.35rem; }

  /* ---- FAQ y CTA ---- */
  .accordion summary { font-size: 1.4rem; padding: 1.4rem 0; }
  .accordion__content { font-size: 1.35rem; }
  .cta-banner { padding: 3.2rem 1.6rem; }
  .cta-banner p { font-size: 1.45rem; }

  /* ---- Botón flotante: tapaba las tarjetas ---- */
  .wpp-fab { width: 4.8rem; height: 4.8rem; right: 1.4rem; bottom: 1.8rem; }
  .wpp-fab svg { width: 2.3rem; height: 2.3rem; }
  .scroll-top { width: 3.8rem; height: 3.8rem; right: 1.4rem; bottom: 7.8rem; }

  /* ---- Footer ---- */
  .footer { padding: 3.2rem 0 1.6rem; }
  .footer__bottom { font-size: 1.15rem; }
}

/* Celulares angostos (iPhone SE y similares) */
@media (max-width: 400px) {
  .announcement > span:first-child { font-size: 1rem; }
  .card__actions .button { font-size: 1.15rem; letter-spacing: .04em; }
}

/* Alternancia de textos segun pantalla */
.only-mobile { display: none; }
@media (max-width: 749px) {
  .only-desktop { display: none; }
  .only-mobile { display: inline; }
}


/* ---------- Arreglos finos ---------- */
/* El ícono del footer no tenía tamaño y se estiraba enorme */
.footer__wpp svg { width: 2.2rem; height: 2.2rem; flex-shrink: 0; }
.cart-empty .button svg { width: 2rem; height: 2rem; }

/* El botón flotante tapaba los "Comprar" de las tarjetas:
   se esconde mientras se baja y vuelve al frenar o subir */
.wpp-fab { transition: transform .25s ease, opacity .25s ease, box-shadow .15s; }
.wpp-fab.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }

@media (max-width: 749px) {
  .collection-head h1 { font-size: 2.6rem; }
  .collection-head p { font-size: 1.35rem; }
  /* aire al final para que el flotante no tape lo ultimo */
  .footer { padding-bottom: 6rem; }
}


/* ---------- Hero en celular ---------- */
@media (max-width: 749px) {
  .hero-slide__content { padding: 3.2rem 0 2.8rem; max-width: 100%; }
  .hero-slide__content h1 { margin-bottom: 1.6rem; }
  .hero-slide__content p { font-size: 1.45rem; line-height: 1.55; margin-bottom: 2.4rem; max-width: 100%; }
  .hero__buttons { gap: 1rem; }
  .hero__buttons .button { min-height: 4.8rem; font-size: 1.3rem; }
  /* El flotante verde se superponía al botón verde del hero */
  .wpp-fab.is-over-hero { transform: translateY(140%); opacity: 0; pointer-events: none; }
  /* Sin foto de fondo no necesita tanto alto */
  .hero-slide--brand { min-height: 62vh; }
}


/* =====================================================================
   CATÁLOGO REAL: categorías, variantes y estados vacíos
   ===================================================================== */
/* Un elemento con [hidden] se oculta aunque su clase le dé display */
[hidden] { display: none !important; }

/* ---------- Filtro por categoría ---------- */
.collection-filters { margin-bottom: 2rem; }
.chips { display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.chips::-webkit-scrollbar { display: none; }
.chips + .chips { margin-top: 1rem; }
.chip { flex-shrink: 0; padding: .8rem 1.8rem; border-radius: 4rem; border: .15rem solid rgba(var(--color-fg), .15); background: #fff; font-size: 1.4rem; font-weight: 700; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.chip:hover { border-color: rgb(var(--color-fg)); }
.chip.is-active { background: rgb(var(--color-fg)); border-color: rgb(var(--color-fg)); color: #fff; }
.chips--sub .chip { padding: .5rem 1.4rem; font-size: 1.3rem; }
.chips--sub .chip.is-active { background: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); }

/* ---------- Tarjeta: segunda foto al pasar el mouse ---------- */
.card__media { display: block; overflow: hidden; border-radius: var(--radius-media); }
.card__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) {
  .card__media--swap:hover .card__alt { opacity: 1; }
  /* En las tarjetas chicas la segunda foto se baja al pasar por encima:
     no se muestra hasta que llegó, para no dejar la tarjeta en blanco */
  .card--mini .card__alt:not(.is-ready) { opacity: 0; }
}
.card__variants { font-size: 1.25rem; font-weight: 700; color: rgb(var(--color-accent)); margin: 0; }

/* ---------- Estado vacío ---------- */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; border: .15rem dashed rgb(var(--color-line)); border-radius: var(--radius-card); background: rgb(var(--color-bg)); }
.empty-state h3 { margin: 0 0 .8rem; }
.empty-state .button { margin-top: 1.6rem; }
.empty-state .button svg { width: 2rem; height: 2rem; }
.product-slider.is-empty { display: none; }

/* ---------- Mosaico de categorías (home) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 2rem; }
.cat-tile { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.cat-tile .media-img, .cat-tile .ph { aspect-ratio: 4 / 3; border-radius: 0; transition: transform .5s ease; }
.cat-tile:hover .media-img { transform: scale(1.04); }
.cat-tile__info { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-radius: 1rem; background: rgb(var(--color-bg)); box-shadow: var(--shadow-card); }
.cat-tile__n { font-size: 1.25rem; font-weight: 700; color: rgb(var(--color-accent)); white-space: nowrap; }

/* ---------- Selector de variante: pastillas de texto, como Voltra ---------- */
.variant-picker__label { font-size: 1.4rem; font-weight: 700; margin-bottom: .8rem; }
.variant-picker__options { display: flex; flex-wrap: wrap; gap: .8rem; }
.variant { display: inline-flex; align-items: center; gap: .8rem; min-height: 4.4rem; padding: .8rem 1.8rem; border-radius: .8rem; border: .15rem solid rgba(var(--color-fg), .22); background: #fff; font: inherit; font-size: 1.4rem; font-weight: 700; color: rgb(var(--color-fg)); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.variant:hover { border-color: rgb(var(--color-fg)); }
.variant.is-selected { background: rgb(var(--color-fg)); border-color: rgb(var(--color-fg)); color: #fff; }
.variant__swatch { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.variant.is-soldout { opacity: .5; }
.variant.is-soldout .variant__name { text-decoration: line-through; }
.product__soldout { font-size: 1.35rem; font-weight: 700; color: rgb(var(--color-accent)); margin: 0; }
button[data-p-add]:disabled { opacity: .45; pointer-events: none; }

/* ---------- Leyenda de foto (escenas generadas) ---------- */
.media-caption { position: absolute; left: 1.2rem; bottom: 1.2rem; padding: .3rem .9rem; border-radius: 2rem; background: rgba(37,37,37,.62); color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; pointer-events: none; }

/* ---------- Ficha ---------- */
.preview-bar { margin-bottom: 2rem; padding: 1.2rem 1.6rem; border-radius: 1rem; background: rgba(var(--color-accent), .1); border: 1px solid rgba(var(--color-accent), .35); font-size: 1.4rem; }
.review-item__photo { width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mobile-nav__sub { padding-left: 1.6rem !important; font-size: 1.3rem !important; opacity: .8; }

@media (max-width: 749px) {
  .chip { padding: .7rem 1.4rem; font-size: 1.3rem; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .cat-tile .media-img, .cat-tile .ph { aspect-ratio: 1; }
  .cat-tile__info { left: .6rem; right: .6rem; bottom: .6rem; padding: .7rem .9rem; flex-direction: column; align-items: flex-start; gap: .2rem; }
  .cat-tile__info .card__title { font-size: 1.3rem; }
  .cat-tile__n { font-size: 1.1rem; }
  .variant { font-size: 1.3rem; padding: .7rem 1.4rem; }
  .card__variants { font-size: 1.1rem; }
  .media-caption { font-size: 1rem; left: .8rem; bottom: .8rem; }
}


/* =====================================================================
   HERO "DECO": tres productos sobre pedestales, en carrusel
   La selección se edita en el panel; acá solo vive la puesta en escena.
   ===================================================================== */
.hero-slide--deco .hero-deco {
  display: grid;
  grid-template-columns: minmax(30rem, 48%) 1fr;
  gap: 2rem;
  align-items: center;
}
/* Fondo cálido detrás de los productos, como la referencia */
.hero-slide--deco .hero-slide__bg--brand {
  background:
    radial-gradient(60% 70% at 72% 48%, rgba(255, 179, 107, .45), transparent 62%),
    radial-gradient(45% 55% at 92% 28%, rgba(255, 107, 0, .18), transparent 70%),
    linear-gradient(120deg, rgb(var(--color-bg)) 38%, rgba(255, 179, 107, .3));
}
.hero-slide--deco .hero-slide__content { padding: 5rem 0; }
/* En dos columnas el titular tiene la mitad del ancho: si crece con la
   pantalla como cuando ocupaba todo, se parte en cuatro líneas */
@media (min-width: 990px) {
  .hero-slide--deco .hero-slide__content h1 { font-size: clamp(3.4rem, 4.4vw, 5.8rem); }
}

.hero3d {
  position: relative;
  margin: 0 2rem 0 1rem;
  aspect-ratio: 5 / 4;
  max-height: 60rem;
  z-index: 1;
}
.hero3d__stage { position: absolute; inset: 0; }

/* Aros dorados de fondo */
.hero3d__rings { position: absolute; inset: 6% 4% 10%; pointer-events: none; }
.hero3d__rings::before, .hero3d__rings::after {
  content: ""; position: absolute; border-radius: 50%;
  border: .3rem solid rgba(255, 176, 80, .34);
  filter: blur(.2rem);
}
.hero3d__rings::before { inset: 28% 10% 14% 12%; transform: rotate(-8deg); }
.hero3d__rings::after  { inset: 10% 26% 36% 24%; transform: rotate(6deg); border-color: rgba(255, 200, 130, .26); }

/* ---- Cada producto: caja de tamaño fijo para que las tres posiciones
   se muevan igual sin importar el ancho de la foto ---- */
.hero3d__item {
  position: absolute;
  left: 50%; top: 50%;
  width: 52%; height: 74%;
  display: block;
  transform-origin: 50% 88%;
  transition: transform .75s cubic-bezier(.22,.72,.24,1), filter .75s ease, opacity .4s ease;
  will-change: transform;
}
.hero3d__img {
  position: absolute; left: 50%; bottom: 11%;
  max-width: 100%; max-height: 89%; width: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2.4rem 2.2rem rgba(120, 70, 20, .28));
}
/* Pedestal: base dorada abajo y tapa clara encima, así el canto asoma */
.hero3d__pedestal {
  position: absolute; left: 50%; bottom: 4%;
  width: 84%; aspect-ratio: 9 / 4;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #f0c98a 0%, #d8a457 55%, #b07f33 100%);
  box-shadow: 0 1.6rem 3rem rgba(120, 70, 20, .28);
}
.hero3d__pedestal::before {
  content: ""; position: absolute; inset: 0 0 13% 0;
  border-radius: 50%;
  background: radial-gradient(58% 78% at 50% 26%, #fffdf9 0%, #f6ead9 55%, #e8d6be 100%);
}
/* Sombra de contacto: apoya el producto sobre la tapa */
.hero3d__pedestal::after {
  content: ""; position: absolute; left: 50%; top: 24%;
  width: 52%; height: 42%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(120, 70, 20, .30), rgba(120, 70, 20, 0) 70%);
}

/* ---- Etiqueta flotante: nombre a la izquierda, precio en naranja ---- */
.hero3d__tag {
  position: absolute; left: 50%; bottom: -1%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .7rem 1.4rem;
  border-radius: 3rem;
  background: #fff;
  box-shadow: 0 .8rem 2.4rem rgba(37, 37, 37, .16);
  white-space: nowrap;
  transition: transform .75s cubic-bezier(.22,.72,.24,1), box-shadow .3s;
}
.hero3d__name { font-size: 1.3rem; font-weight: 700; color: rgb(var(--color-fg)); }
.hero3d__price {
  font-size: 1.5rem; font-weight: 800; color: rgb(var(--color-accent));
  padding-left: .9rem; border-left: .15rem solid rgba(var(--color-fg), .15);
}

/* ---- Las tres posiciones ---- */
.hero3d__item.is-front { transform: translate(-50%, -38%) scale(.92);  z-index: 3; }
.hero3d__item.is-left  { transform: translate(-126%, -78%) scale(.5);  z-index: 1; filter: saturate(.94) brightness(.99); }
.hero3d__item.is-right { transform: translate(28%, -80%) scale(.54);   z-index: 2; filter: saturate(.96); }
/* La etiqueta del de adelante manda; las de atrás se achican para no competir */
.hero3d__item.is-front .hero3d__tag { padding: .9rem 1.8rem; }
.hero3d__item.is-front .hero3d__name { font-size: 1.5rem; }
.hero3d__item.is-front .hero3d__price { font-size: 2rem; }
.hero3d__item:not(.is-front) { cursor: pointer; }
.hero3d__item:not(.is-front) .hero3d__tag { box-shadow: 0 .5rem 1.4rem rgba(37, 37, 37, .12); }
.hero3d__item:not(.is-front):hover { filter: none; }
.hero3d__item:focus-visible { outline: .3rem solid rgb(var(--color-accent)); outline-offset: .6rem; border-radius: 1.2rem; }

/* ---- Puntos para elegir producto ---- */
/* Van al borde de la escena: centrados chocaban con la etiqueta del de adelante */
.hero3d__dots { position: absolute; left: 0; right: 1.5rem; bottom: 1.2rem; display: flex; justify-content: flex-end; gap: .7rem; z-index: 4;
  pointer-events: none; }   /* la franja no tapa lo que hay debajo */
.hero3d__dot { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(37, 37, 37, .22); transition: background .2s, width .2s;
  pointer-events: auto; }
.hero3d__dot.is-active { background: rgb(var(--color-accent)); width: 2.2rem; border-radius: 1rem; }

/* Con uno o dos productos la escena se acomoda sola */
.hero3d[data-n="1"] .hero3d__item.is-front { transform: translate(-50%, -44%) scale(1.05); }
.hero3d[data-n="2"] .hero3d__item.is-front { transform: translate(-64%, -44%) scale(1); }
.hero3d[data-n="2"] .hero3d__item.is-left  { transform: translate(14%, -74%) scale(.6); }

@media (prefers-reduced-motion: reduce) {
  .hero3d__item, .hero3d__tag { transition: none; }
}

/* ---- Tablet ---- */
@media (max-width: 989px) {
  .hero-slide--deco .hero-deco { grid-template-columns: 1fr; gap: 0; }
  .hero-slide--deco .hero-slide__content { padding: 4rem 0 1rem; }
  .hero3d { margin: 0 4rem 2rem; aspect-ratio: 4 / 3; }
}

/* ---- Celular: la escena va abajo del texto y más compacta ---- */
@media (max-width: 749px) {
  .hero-slide--deco { min-height: 0; }
  .hero-slide--deco .hero-slide__content { padding: 2.8rem 0 .8rem; }
  .hero3d { margin: .4rem 1rem 3.4rem; aspect-ratio: 1 / 1; max-height: 34rem; }
  .hero3d__item { width: 62%; height: 78%; }
  .hero3d__name { font-size: 1.1rem; }
  .hero3d__price { font-size: 1.25rem; padding-left: .7rem; }
  .hero3d__item.is-front .hero3d__name { font-size: 1.2rem; }
  .hero3d__item.is-front .hero3d__price { font-size: 1.5rem; }
  .hero3d__tag { padding: .5rem 1rem; gap: .6rem; }
  .hero3d__item.is-front .hero3d__tag { padding: .6rem 1.2rem; }
  .hero3d__item.is-front { transform: translate(-50%, -40%) scale(.94); }
  .hero3d__item.is-left  { transform: translate(-96%, -76%) scale(.48); }
  .hero3d__item.is-right { transform: translate(2%, -80%) scale(.52); }
  .hero3d__rings { display: none; }
  .hero3d__dots { bottom: -1.6rem; right: 0; justify-content: center; }
  /* Solo la etiqueta del de adelante: las de atrás no entran sin amontonarse */
  .hero3d__item:not(.is-front) .hero3d__tag { display: none; }
}