/* ============================================================
   SantaMati — Landing de conversión (front-page)
   Lifted 1:1 del mockup aprobado "SantaMati Landing" (Claude Design)
   Solo se encola en is_front_page() — ver functions.php
   ============================================================ */

.sm-top-banner { position: relative; z-index: 50; background: #1a1612; border-bottom: 1px solid rgba(201,169,110,0.18); padding: 16px 20px; text-align: center; }
.sm-top-banner__inner { position: relative; height: 20px; }
.sm-top-banner__item { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 700; color: #c9a96e; letter-spacing: 0.16em; text-transform: uppercase; position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-top-banner__item.is-active { opacity: 1; transform: translateY(0); }
@media (max-width: 480px) {
  .sm-top-banner { padding: 14px 12px; }
  .sm-top-banner__item { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; }
}

/* Hero en celular: menos espacio arriba para que el bloque (frasco + textos)
   quede más alto. El padding-top va con !important porque el inline style del
   propio <section> (en front-page.php) tiene prioridad sobre el CSS externo. */
@media (max-width: 480px) {
  #sm-hero { min-height: auto !important; padding-top: 16px !important; padding-bottom: 56px !important; }
  .sm-hero-bottle { margin-bottom: 14px !important; }
  .sm-hero-bottle img { max-height: 190px !important; }
  .sm-hero-bottle svg { width: 110px; height: 183px; }
  .sm-hero-text p[data-reveal] { margin-bottom: 12px !important; }
  .sm-hero-text h1 { margin-bottom: 12px !important; }
}

/* Animaciones del texto del banner — el efecto va en un <span> interno (no en el
   <p>.sm-top-banner__item) para no chocar con su propio transform de aparición,
   y solo corre mientras el texto está activo/visible (ahorra CPU en los ocultos). */
.sm-top-banner__inner { --sm-anim-speed: 1; --sm-anim-intensity: 1; }
.sm-top-banner__item span[class^="sm-anim-"] { display: inline-block; }
.sm-top-banner__item.is-active .sm-anim-pulse { animation: smBannerPulse calc(1.1s / var(--sm-anim-speed)) ease-in-out infinite; }
.sm-top-banner__item.is-active .sm-anim-shake { animation: smBannerShake calc(0.45s / var(--sm-anim-speed)) ease-in-out infinite; }
.sm-top-banner__item.is-active .sm-anim-bounce { animation: smBannerBounce calc(0.9s / var(--sm-anim-speed)) ease-in-out infinite; }
.sm-top-banner__item.is-active .sm-anim-blink { animation: smBannerBlink calc(1.3s / var(--sm-anim-speed)) ease-in-out infinite; }

/* La magnitud de cada movimiento escala con --sm-anim-intensity (1 = normal) */
@keyframes smBannerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + 0.08 * var(--sm-anim-intensity))); } }
@keyframes smBannerShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(calc(-2px * var(--sm-anim-intensity))); } 75% { transform: translateX(calc(2px * var(--sm-anim-intensity))); } }
@keyframes smBannerBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-4px * var(--sm-anim-intensity))); } }
@keyframes smBannerBlink { 0%, 100% { opacity: 1; } 50% { opacity: calc(1 - 0.65 * var(--sm-anim-intensity)); } }

/* Barra de progreso de envío gratis: umbral viene de WooCommerce (zonas de envío) */
.sm-shipping-bar { background: linear-gradient(90deg,#2a2117,#1f1a14,#2a2117); border-bottom: 1px solid rgba(201,169,110,0.3); padding: 14px 20px; }
.sm-shipping-bar__inner { max-width: 560px; margin: 0 auto; }
.sm-shipping-bar__text { text-align: center; font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 700; color: #e8d4a0; letter-spacing: 0.02em; margin-bottom: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.sm-shipping-bar__text .woocommerce-Price-amount { font-weight: 800; color: #fff; }
.sm-shipping-bar__icon { font-size: 17px; line-height: 1; }
.sm-shipping-bar__track { height: 9px; background: rgba(255,255,255,0.16); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
.sm-shipping-bar__fill {
  height: 100%; background: linear-gradient(90deg,#c9a96e,#e8d4a0); border-radius: 5px; transition: width 0.5s ease;
  box-shadow: 0 0 14px rgba(232,212,160,0.9), 0 0 4px rgba(255,255,255,0.4); position: relative; overflow: hidden;
}
/* Brillo que recorre la barra en bucle, igual que en el carrito */
.sm-shipping-bar__fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: smShipShineHeader 2.2s ease-in-out infinite;
}
@keyframes smShipShineHeader {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@media (max-width: 480px) {
  .sm-shipping-bar { padding: 12px 14px; }
  .sm-shipping-bar__text { font-size: 13px; }
}

.sm-price-callout-text strong { color: #c9a96e; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-d="1"] { transition-delay: 0.1s; }
[data-d="2"] { transition-delay: 0.2s; }
[data-d="3"] { transition-delay: 0.3s; }
[data-d="4"] { transition-delay: 0.4s; }
[data-d="5"] { transition-delay: 0.5s; }
[data-d="6"] { transition-delay: 0.6s; }

#sm-comp-slider[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; margin: 0; padding: 0; }
#sm-comp-slider[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%; background: #c9a96e; border: 2px solid #faf6ee; box-shadow: 0 0 20px rgba(201,169,110,0.6); cursor: ew-resize; margin-top: -22px; }
#sm-comp-slider[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(201,169,110,0.3); border-radius: 2px; }
#sm-comp-slider[type=range]::-moz-range-thumb { width: 44px; height: 44px; border-radius: 50%; background: #c9a96e; border: 2px solid #faf6ee; cursor: ew-resize; }

.sm-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 700px) { .sm-pgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 900px) { .sm-pgrid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ── Bestsellers — carrusel ────────────────────────────────────────────── */
.sm-bs-wrap { width: 100%; padding: 10px clamp(20px, 4vw, 48px); }
@media (max-width: 768px) { .sm-bs-wrap { padding: 0 24px; } }
.sm-bs-stage { position: relative; max-width: 1040px; margin: 0 auto; }
.sm-bs-viewport { overflow: hidden; container-type: inline-size; }
.sm-bs-track { display: flex; width: max-content; }
.sm-bs-card { flex: 0 0 auto; width: calc(25cqw - 22px); margin-right: 22px; display: flex; }
.sm-bs-card .sm-card { flex: 1; }
@media (max-width: 768px) { .sm-bs-card { width: calc(50cqw - 12px); margin-right: 12px; } }

.sm-bs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,22,18,0.55); color: #faf6ee;
  box-shadow: 0 4px 16px rgba(26,22,18,0.25);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sm-bs-arrow:hover { background: #c9a96e; color: #1a1612; transform: translateY(-50%) scale(1.08); }
.sm-bs-arrow--prev { left: -10px; }
.sm-bs-arrow--next { right: -10px; }
@media (max-width: 768px) { .sm-bs-arrow { display: none; } }

/* ── Quiz olfativo — pregunta 2: cuadrícula 3x3 de familias olfativas
   (ícono + nombre + notas), sincronizada con etiquetas de producto. ── */
.sm-quiz-fam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sm-quiz-fam-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 6px; border: 1px solid rgba(26,22,18,0.14); border-radius: 8px;
  background: transparent; cursor: pointer; text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.sm-quiz-fam-card:hover { border-color: #c9a96e; background: rgba(201,169,110,0.08); transform: translateY(-1px); }
.sm-quiz-fam-card.is-selected { border-color: #c9a96e; background: rgba(201,169,110,0.16); }
.sm-quiz-answer.is-selected { border-color: #c9a96e !important; background: rgba(201,169,110,0.1) !important; }
#sm-quiz-nav .is-hidden { display: none; }
#sm-quiz-next:disabled { opacity: 0.4; cursor: not-allowed; }
#sm-quiz-back:hover { border-color: rgba(26,22,18,0.32); }
.sm-quiz-fam-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.sm-quiz-fam-name { font-family: 'Inter Tight', sans-serif; font-size: 12.5px; font-weight: 700; color: #1a1612; }
.sm-quiz-fam-notes { font-family: 'Cormorant Garamond', serif; font-size: 11.5px; color: rgba(26,22,18,0.5); line-height: 1.25; }
@media (max-width: 480px) {
  .sm-quiz-fam-card { padding: 10px 4px; }
  .sm-quiz-fam-icon { font-size: 19px; }
  .sm-quiz-fam-name { font-size: 11.5px; }
  .sm-quiz-fam-notes { font-size: 10.5px; }
}

/* ── Quiz olfativo — carrusel del resultado (3+ tarjetas compactas,
   scroll horizontal con snap + flechas) — misma tarjeta .sm-card del
   catálogo, solo que más chica para que quepan varias a la vez. ── */
.sm-quiz-carousel { position: relative; }
.sm-quiz-carousel__viewport {
  overflow-x: auto; overflow-y: hidden; border-radius: 10px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.sm-quiz-carousel__viewport::-webkit-scrollbar { display: none; }
.sm-quiz-carousel__track { display: flex; gap: 10px; }
.sm-quiz-carousel__track .sm-card { flex: 0 0 46%; width: 46%; cursor: pointer; scroll-snap-align: start; }
/* Tarjeta chica: mismos elementos que la del catálogo, solo con menos
   padding/tamaño de fuente para que 2+ quepan en el ancho del modal. */
.sm-quiz-carousel .sm-body { padding: 10px 10px 12px; }
.sm-quiz-carousel .sm-name { font-size: 13.5px; line-height: 1.2; }
.sm-quiz-carousel .sm-notes { font-size: 10px; margin-top: 3px; }
.sm-quiz-carousel .sm-stars { margin-top: 5px; gap: 3px; }
.sm-quiz-carousel .sm-stars svg { width: 52px; height: 9px; }
.sm-quiz-carousel .sm-stars-label { font-size: 9px; }
.sm-quiz-carousel .sm-price-row { padding-top: 8px; margin-bottom: 7px; }
.sm-quiz-carousel .sm-price { font-size: 15px; }
.sm-quiz-carousel .sm-price-anchor { font-size: 10px; }
.sm-quiz-carousel .sm-savings { font-size: 9px; padding: 2px 7px 2px 6px; margin-top: 4px; }
.sm-quiz-carousel .sm-cta { font-size: 10px; padding: 8px; letter-spacing: 0.06em; }
.sm-quiz-carousel .sm-trust { font-size: 9px; }
.sm-quiz-carousel .sm-insp { font-size: 8px; padding: 2px 7px; }
.sm-quiz-carousel .sm-acc-sizes { gap: 4px; margin-bottom: 7px; }
.sm-quiz-carousel .sm-acc-size-btn { font-size: 9.5px; padding: 4px 9px; }
@media (max-width: 420px) {
  .sm-quiz-carousel__track .sm-card { flex-basis: 62%; width: 62%; }
}
/* Las flechas del carrusel (.sm-acc-carousel-arrow) son las mismas de
   Mi cuenta → Recomendado — viven en santamati-account.css, cargado junto
   con el quiz (ver wp_enqueue_scripts en functions.php), sin reglas propias
   aquí para que se vean y se comporten idénticas (incluye ocultarse en
   celular y en los extremos del scroll). */

.sm-card {
  background: #ffffff; border-radius: 10px; overflow: hidden;
  border: 1.5px solid transparent; box-shadow: 0 2px 16px rgba(26,22,18,0.07);
  display: flex; flex-direction: column; cursor: pointer;
  transition: box-shadow 0.36s ease, border-color 0.36s ease, transform 0.36s cubic-bezier(0.16,1,0.3,1);
}
/* Los efectos de :hover de .sm-card viven agrupados más abajo, dentro de
   @media (hover: hover) — así los celulares/tablets (sin mouse real) van
   directo al toque en vez de necesitar un primer toque "de más" para activar
   el hover antes de que el segundo toque navegue (comportamiento típico de
   iOS Safari cuando hay estilos :hover con cambios visibles). */
@media (hover: hover) and (pointer: fine) {
  .sm-card:hover { transform: translateY(-5px); box-shadow: 0 22px 68px rgba(26,22,18,0.18); border-color: #c9a96e; }
  .sm-card:hover .sm-v1 { opacity: 0; }
  .sm-card:hover .sm-v2 { opacity: 1; }
  .sm-card:hover .sm-insp { animation: none; background: rgba(201,169,110,0.18); border-color: rgba(201,169,110,0.55); box-shadow: 0 0 10px rgba(201,169,110,0.2); }
  .sm-card:hover .sm-notes { animation: none; border-color: rgba(201,169,110,0.6); color: rgba(26,22,18,0.72); }
  .sm-card:hover .sm-stars { transform: scale(1.07); }
  .sm-card:hover .sm-stars svg { filter: drop-shadow(0 0 4px rgba(201,169,110,0.6)); }
  .sm-card:hover .sm-stars svg polygon { animation: none; fill: #f5e0a0; }
  .sm-card:hover .sm-stars-label { color: #c9a96e; }
}

.sm-imgzone {
  display: block; text-decoration: none;
  position: relative; aspect-ratio: 1; overflow: hidden;
}
.sm-v1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.42s ease; }
.sm-v2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.42s ease; }
.sm-prodimg { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes smBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204,34,0,0); }
  50%       { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(204,34,0,0.18); }
}
.sm-badge {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  border-radius: 100px; padding: 3px 9px;
  font-family: 'Inter Tight', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  animation: smBadgePulse 2.2s ease-in-out infinite;
}
.sm-line-badge {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  background: rgba(201,169,110,0.18); border: 1px solid rgba(201,169,110,0.4);
  border-radius: 100px; padding: 3px 8px;
  font-family: 'Inter Tight', sans-serif; font-size: 9px; color: #e8d4a0; letter-spacing: 0.1em; text-transform: uppercase;
}

/* filter con la función opacity() (no la propiedad "opacity") para no pisar el
   0/1 que ya usan .sm-v1/.sm-v2 en el cruce de imagen al hacer hover */
.sm-soldout .sm-v1, .sm-soldout .sm-v2 { filter: grayscale(0.35) opacity(0.52); }
.sm-soldout:hover { border-color: rgba(26,22,18,0.14) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(26,22,18,0.09) !important; }
/* Cinta diagonal de "Agotado" cruzando la esquina de la imagen (más notoria que una etiqueta) */
.sm-ribbon-soldout {
  position: absolute; top: 16px; left: -42px; z-index: 3;
  width: 165px;
  transform: rotate(-45deg); transform-origin: center;
  background: #cc2200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  pointer-events: none;
}
.sm-ribbon-soldout span {
  display: block; text-align: center; padding: 7px 0;
  font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.sm-soldout .sm-price-anchor,
.sm-soldout .sm-price { color: rgba(26,22,18,0.4); }
.sm-soldout .sm-price-anchor::after { background: rgba(26,22,18,0.3); }

/* ── Captura "avísame" en tarjeta agotada ── */
.sm-capture { margin-top: auto; }
.sm-capture-scarcity { font-family: 'Inter Tight', sans-serif; font-size: 10px; color: rgba(26,22,18,0.42); letter-spacing: 0.03em; text-align: center; margin-bottom: 8px; }
.sm-notify-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(26,22,18,0.07); color: #1a1612; border: 1.5px solid rgba(26,22,18,0.18);
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px 8px; border-radius: 3px; cursor: pointer; transition: background 0.2s ease;
}
.sm-notify-btn:hover { background: rgba(26,22,18,0.12); }
.sm-capture.is-open .sm-notify-btn,
.sm-capture.is-confirmed .sm-notify-btn { display: none; }
.sm-capture-form {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.sm-capture.is-open .sm-capture-form { max-height: 220px; opacity: 1; }
.sm-capture-input {
  width: 100%; padding: 11px 12px; border: 1px solid rgba(26,22,18,0.16); border-radius: 3px;
  font-family: 'Inter Tight', sans-serif; font-size: 13px; color: #1a1612; background: #fff; outline: none;
  letter-spacing: 0.02em; margin-bottom: 8px;
}
.sm-capture-confirm {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #1a1612; color: #faf6ee; border: none;
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 8px; border-radius: 3px; cursor: pointer;
}
.sm-capture-confirm svg { color: #c9a96e; }
.sm-capture-cancel {
  background: none; border: none; cursor: pointer; width: 100%; text-align: center; padding: 9px 4px 0;
  font-family: 'Inter Tight', sans-serif; font-size: 10px; color: rgba(26,22,18,0.36); letter-spacing: 0.05em;
}
.sm-capture-confirmed {
  display: none; background: rgba(201,169,110,0.07); border: 1px solid rgba(201,169,110,0.22);
  border-radius: 6px; padding: 14px 16px; text-align: center;
}
.sm-capture.is-confirmed .sm-capture-confirmed { display: block; }
.sm-capture-confirmed-title { font-family: 'Italiana', serif; font-size: 17px; color: #1a1612; margin-bottom: 4px; }
.sm-capture-confirmed-text { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: rgba(26,22,18,0.5); font-style: italic; line-height: 1.35; }
.sm-capture.is-confirmed .sm-notify-btn,
.sm-capture.is-confirmed .sm-capture-scarcity { display: none; }

.sm-body { padding: 14px 14px 18px; flex: 1; display: flex; flex-direction: column; }
@keyframes smInspGlow {
  0%, 100% { background: rgba(201,169,110,0.08); border-color: rgba(201,169,110,0.25); box-shadow: none; }
  50%       { background: rgba(201,169,110,0.18); border-color: rgba(201,169,110,0.55); box-shadow: 0 0 10px rgba(201,169,110,0.2); }
}
.sm-insp {
  display: inline-flex; align-items: center;
  font-family: 'Inter Tight', sans-serif; font-size: 9px; color: #c9a96e;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(201,169,110,0.08); border: 1px solid rgba(201,169,110,0.25);
  padding: 3px 9px; border-radius: 100px; margin-bottom: 6px;
  animation: smInspGlow 3.5s ease-in-out infinite;
}
.sm-insp::before { content: '✦'; font-size: 7px; margin-right: 5px; display: inline-block; animation: smTwinkle 1.8s ease-in-out infinite; }
.sm-insp-name { font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; margin-left: 3px; }

.sm-name { font-family: 'Italiana', serif; font-size: 18px; color: #1a1612; margin-bottom: 3px; }
@keyframes smNotesBorder {
  0%, 100% { border-color: rgba(201,169,110,0.25); }
  50%       { border-color: rgba(201,169,110,0.6); }
}
.sm-notes {
  display: flex; flex-direction: column; gap: 1px;
  font-family: 'Cormorant Garamond', serif; font-size: 13px; color: rgba(26,22,18,0.58); font-style: italic;
  border-left: 2px solid rgba(201,169,110,0.25); padding-left: 8px; margin-top: 4px;
  animation: smNotesBorder 3.5s ease-in-out infinite;
}
.sm-note-line { display: block; line-height: 1.3; }
.sm-notes .sm-check { color: #c9a96e; font-style: normal; font-weight: 600; }

.sm-stars { display: flex; align-items: center; gap: 5px; margin-top: 8px; transition: transform 0.36s cubic-bezier(0.16,1,0.3,1); }
.sm-stars svg { transition: filter 0.36s ease; }
.sm-stars-label { font-family: 'Inter Tight', sans-serif; font-size: 11px; color: rgba(26,22,18,0.55); transition: color 0.36s ease; }
/* Antes cada estrella animaba su `fill` en bucle infinito (smStarWave). En la
   portada hay ~16 tarjetas × 5 estrellas = 80 elementos repintándose sin parar;
   `fill` no se puede componer en GPU, así que era el mayor costo de repintado del
   móvil (PageSpeed: "Evita las animaciones no compuestas", 152 elementos). Las
   estrellas ya llevan fill="#c9a96e" inline en el SVG, así que al quitar la
   animación quedan doradas fijas — se pierde solo el brillo sutil, nada más. */
.sm-price-row { margin-top: auto; padding-top: 12px; margin-bottom: 11px; border-top: 1px solid rgba(26,22,18,0.08); }
/* Precio tachado: pseudo-línea que se dibuja de izq. a der. al entrar al viewport */
.sm-price-anchor { font-family: 'Inter Tight', sans-serif; font-size: 12px; color: rgba(26,22,18,0.38); display: inline-block; margin-bottom: 2px; position: relative; }
.sm-price-anchor::after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: rgba(26,22,18,0.5); transition: width 0.45s ease 0.05s; }
.sm-price-row.is-visible .sm-price-anchor::after { width: 100%; }

/* Precio principal: cae suavemente desde arriba */
@keyframes smPriceDrop { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:translateY(0); } }
.sm-price { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; letter-spacing: 0.01em; color: #1a1612; display: block; white-space: nowrap; opacity: 0; }
.sm-price-row.is-visible .sm-price { animation: smPriceDrop 0.45s ease 0.28s both; }

/* Pastilla de ahorro: salta con bounce */
@keyframes smSavingsPop { 0% { opacity:0; transform:scale(0.6); } 60% { opacity:1; transform:scale(1.12); } 80% { transform:scale(0.96); } 100% { opacity:1; transform:scale(1); } }
.sm-savings { display: inline-flex; align-items: center; gap: 4px; background: rgba(42,122,59,0.1); color: #1a6228; border: 1px solid rgba(42,122,59,0.22); border-radius: 20px; padding: 3px 9px 3px 7px; font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; margin-top: 6px; opacity: 0; transform: scale(0.6); }
.sm-price-row.is-visible .sm-savings { animation: smSavingsPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.55s both; }
.sm-savings svg { color: #1a6228; }

.sm-sizes { font-family: 'Inter Tight', sans-serif; font-size: 10px; color: rgba(26,22,18,0.38); margin-top: 3px; }
/* Botón CTA: flash dorado doble que se repite, escalonado por JS */
/* translateX en % es relativo al propio ancho del elemento (55% del botón);
   490.9% equivale al mismo recorrido que antes hacía "left" de -120% a 150%
   (270% del ancho del botón), pero vía transform → composición en GPU. */
@keyframes smCtaShimmer { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(490.9%) skewX(-18deg); } }
@keyframes smCtaAttention {
  0%, 55%, 100% { background: #1a1612; color: #faf6ee; box-shadow: none; transform: translateY(0); }
  59%  { transform: translateY(-4px); background: #1a1612; color: #faf6ee; box-shadow: none; }
  63%  { background: #c9a96e; color: #1a1612; box-shadow: 0 7px 22px rgba(201,169,110,0.52); transform: translateY(-3px); }
  67%  { background: #1a1612; color: #faf6ee; box-shadow: none; transform: translateY(0); }
  70%  { transform: translateY(-2px); }
  74%  { background: #c9a96e; color: #1a1612; box-shadow: 0 5px 14px rgba(201,169,110,0.32); transform: translateY(-2px); }
  79%  { background: #1a1612; color: #faf6ee; box-shadow: none; transform: translateY(0); }
}

.sm-cta {
  display: block; background: #1a1612; color: #faf6ee;
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px; border-radius: 3px; text-decoration: none; text-align: center;
  position: relative; overflow: hidden;
  transition: transform 0.18s ease;
  animation: smCtaAttention 7s ease-in-out infinite;
}
.sm-cta::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.sm-cta:hover {
  animation-play-state: paused;
  background: #c9a96e !important; color: #1a1612 !important;
  box-shadow: 0 6px 22px rgba(201,169,110,0.38) !important;
  transform: translateY(-2px) !important;
}
.sm-cta:hover::before { animation: smCtaShimmer 0.55s ease forwards; }
.sm-cta:active { transform: translateY(0) scale(0.97); }

/* Badge "Paga al recibir" — siempre visible */
/* Texto informativo, no interactivo — sin fondo/borde/píldora para que no se confunda con un botón */
.sm-trust { display: flex; align-items: center; justify-content: center; gap: 5px; font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; font-style: italic; color: rgba(26,22,18,0.65); margin-top: 8px; pointer-events: none; }
.sm-trust svg { width: 11px; height: 11px; opacity: 0.8; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skel { background: linear-gradient(90deg, #e8e2d8 25%, #f4efe6 50%, #e8e2d8 75%); background-size: 200% 100%; animation: shimmer 1.7s ease-in-out infinite; border-radius: 4px; }

/* Videos de redes: carrusel (igual que Bestsellers). 4 visibles en escritorio,
   2 en celular; flechas en escritorio y deslizamiento táctil en celular. */
.sm-social-wrap { width: 100%; padding: 0 clamp(20px, 4vw, 48px); }
@media (max-width: 768px) { .sm-social-wrap { padding: 0 24px; } }
.sm-social-stage { position: relative; max-width: 1200px; margin: 0 auto; }
.sm-social-viewport { overflow: hidden; container-type: inline-size; }
.sm-social-track { display: flex; width: max-content; }
.sm-social-card {
  flex: 0 0 auto; width: calc(25cqw - 18px); margin-right: 18px;
  position: relative; display: block; height: 560px; border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 20px rgba(26,22,18,0.18);
}
@media (max-width: 768px) { .sm-social-card { width: calc(50cqw - 12px); margin-right: 12px; height: 480px; } }
.sm-social-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sm-social-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-social-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(201,169,110,0.94);
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.sm-social-card__title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 14px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: #faf6ee; font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.35;
}
/* Flechas (solo escritorio) */
.sm-social-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,22,18,0.55); color: #faf6ee;
  box-shadow: 0 4px 16px rgba(26,22,18,0.25);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sm-social-arrow:hover { background: #c9a96e; color: #1a1612; transform: translateY(-50%) scale(1.08); }
.sm-social-arrow--prev { left: -10px; }
.sm-social-arrow--next { right: -10px; }
@media (max-width: 768px) { .sm-social-arrow { width: 40px; height: 40px; } }

@keyframes smFloatBottle { 0%,100% { transform: translateY(0) rotate(-1.8deg) scale(1); } 50% { transform: translateY(-20px) rotate(1.8deg) scale(1.03); } }
@keyframes smGlowPulse { 0%,100% { opacity: 0.07; transform: scale(1); } 50% { opacity: 0.15; transform: scale(1.08); } }
@keyframes smFloatDot { 0%,100% { transform: translate(0,0); opacity: 0.5; } 40% { transform: translate(7px,-18px); opacity: 0.9; } 70% { transform: translate(-6px,-7px); opacity: 0.3; } }
@keyframes smShimmerGold { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes smPulseBtn { 0%,100% { box-shadow: 0 4px 24px rgba(201,169,110,0.35); } 50% { box-shadow: 0 4px 44px rgba(201,169,110,0.65); } }
@keyframes smScrollDot { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.3; } }
@keyframes smStarRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes smFinalBtnGlow { 0%,100% { box-shadow: 0 6px 24px rgba(201,169,110,0.3); } 50% { box-shadow: 0 6px 44px rgba(201,169,110,0.55), 0 0 0 6px rgba(201,169,110,0.1); } }
/* mismo recorrido que "left" -70%→120% (190% del ancho del botón), expresado
   en translateX relativo al propio elemento (45% del botón): 190/0.45 ≈ 422.2% */
@keyframes smFinalShimmer { 0% { transform: translateX(0); } 45%,100% { transform: translateX(422.2%); } }
@keyframes smLiveDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }

/* ── Final CTA section ─────────────────────────── */
.sm-final-cta-section {
  background: #1a1612;
  padding: 88px 24px;
  position: relative;
  overflow: hidden;
}
.sm-final-cta-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(201,169,110,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.sm-final-star {
  display: inline-flex;
  animation: smStarRotate 12s linear infinite;
  margin-bottom: 4px;
}
/* Trust strip: 3 columnas con separadores verticales */
.sm-final-trust-strip {
  display: flex;
  align-items: stretch;
  justify-content: center;
  border: 1px solid rgba(201,169,110,0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 28px;
}
.sm-final-trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(250,246,238,0.65);
  letter-spacing: 0.04em;
  position: relative;
}
.sm-final-trust-item + .sm-final-trust-item::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; height: 64%;
  width: 1px;
  background: rgba(201,169,110,0.18);
}
/* Botón principal dorado full-width */
.sm-final-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #c9a96e;
  color: #1a1612;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 20px 28px;
  border-radius: 4px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  animation: smFinalBtnGlow 2.8s ease-in-out infinite;
  transition: background 0.2s ease, transform 0.18s ease;
}
.sm-final-btn:hover {
  background: #d4b57d;
  transform: translateY(-2px);
  animation-play-state: paused;
  box-shadow: 0 12px 44px rgba(201,169,110,0.45) !important;
}
.sm-final-btn:active { transform: translateY(0) scale(0.98); }
.sm-final-btn-shine {
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%);
  animation: smFinalShimmer 3.2s ease-in-out infinite;
}
/* Prueba social en vivo */
.sm-final-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(250,246,238,0.75);
  letter-spacing: 0.02em;
  background: rgba(250,246,238,0.07);
  border: 1px solid rgba(250,246,238,0.12);
  border-radius: 100px;
  padding: 7px 16px;
}
.sm-final-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(76,175,80,0.5);
  animation: smLiveDotPulse 1.8s ease-out infinite;
}
@keyframes smLiveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,80,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(76,175,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
@keyframes smTwinkle { 0%,100% { transform: scale(0.7) rotate(0deg); opacity: 0.4; } 50% { transform: scale(1.2) rotate(180deg); opacity: 1; } }
@keyframes smSlideUpModal { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes smFadeInUp { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes smStarsGlow { 0%,100% { filter: drop-shadow(0 0 3px rgba(201,169,110,0.4)); } 50% { filter: drop-shadow(0 0 8px rgba(201,169,110,0.9)); } }

/* Botón sticky inferior "Ver fragancias": más bajo y llamativo (degradado,
   brillo pulsante, destello que lo recorre y flecha que se mueve). */
.sm-sticky-cta-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #e8d4a0 0%, #c9a96e 45%, #b8945a 100%);
  background-size: 200% 100%;
  color: #1a1612; text-decoration: none; text-align: center;
  font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 16px; border-radius: 6px;
  box-shadow: 0 4px 24px rgba(201,169,110,0.4);
  animation: smPulseBtn 2.2s ease-in-out infinite, smShimmerGold 6s linear infinite;
  transition: transform 0.18s ease;
}
.sm-sticky-cta-btn:hover { transform: translateY(-2px); }
.sm-sticky-cta-btn:active { transform: translateY(0); }
.sm-sticky-cta-arrow { animation: smCtaNudge 1.3s ease-in-out infinite; }
.sm-sticky-cta-shine {
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: smCtaShine 3.2s ease-in-out infinite;
}
@keyframes smCtaNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* mismo recorrido que "left" -60%→130% (190% del ancho del botón), expresado
   en translateX relativo al propio elemento (40% del botón): 190/0.40 = 475% */
@keyframes smCtaShine { 0% { transform: translateX(0) skewX(-20deg); } 55%, 100% { transform: translateX(475%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) {
  .sm-sticky-cta-btn, .sm-sticky-cta-arrow, .sm-sticky-cta-shine { animation: none; }
}

/* ── Modal de reseñas ────────────────────────────────────────────────────── */
.sm-review-open-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; }
.sm-review-open-btn::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.7) 50%, transparent 60%);
  background-size: 250% 100%; background-position: -140% 0;
  animation: smReviewShine 2.4s ease-in-out infinite;
}
@keyframes smReviewShine {
  0%, 55% { background-position: -140% 0; }
  100%    { background-position: 140% 0; }
}
.sm-review-open-btn svg,
.sm-review-open-btn { z-index: 1; }
.sm-review-open-btn svg { position: relative; z-index: 1; animation: smReviewIconWiggle 1.8s ease-in-out infinite; }
.sm-review-open-btn:hover {
  background: #d4b57d !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 28px rgba(201,169,110,0.5);
  animation-play-state: paused;
}
.sm-review-open-btn:active { transform: translateY(-1px) scale(0.98); }
@keyframes smReviewIconWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-12deg) scale(1.1); }
  50%      { transform: rotate(0deg) scale(1); }
  75%      { transform: rotate(12deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-review-open-btn::before, .sm-review-open-btn svg { animation: none; }
}
#sm-review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,22,18,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#sm-review-modal-overlay.sm-open {
  opacity: 1;
  pointer-events: all;
}
.sm-review-modal {
  background: #faf6ee;
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 480px;
  position: relative;
  transform: translateY(24px);
  transition: transform .3s ease;
  max-height: 90vh;
  overflow-y: auto;
}
#sm-review-modal-overlay.sm-open .sm-review-modal {
  transform: translateY(0);
}
.sm-review-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: rgba(26,22,18,0.3);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.sm-review-modal-close:hover { color: #1a1612; }
.sm-review-field { margin-bottom: 14px; }
.sm-review-field label {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(26,22,18,0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sm-review-field input,
.sm-review-field textarea {
  width: 100%;
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: #1a1612;
  background: white;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.sm-review-field input:focus,
.sm-review-field textarea:focus { border-color: #c9a96e; }
.sm-review-field textarea { resize: vertical; min-height: 96px; }
.sm-review-submit {
  width: 100%;
  background: #c9a96e;
  color: #1a1612;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  margin-top: 6px;
  transition: background .2s;
}
.sm-review-submit:hover { background: #b8955a; }
.sm-review-submit:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 480px) {
  .sm-review-modal { padding: 28px 20px; border-radius: 12px; }
}

/* ── Timeline de entrega (paso a paso, entre Bestsellers y COD) ─────────── */
.sm-tline       { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; width: 100%; }
.sm-tline-track { position: absolute; top: 19px; left: 11%; right: 11%; height: 2px; background: rgba(26,22,18,0.1); z-index: 0; border-radius: 2px; }
.sm-tline-fill  { height: 100%; width: 0%; background: #c9a96e; border-radius: 2px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.sm-tline-step  { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; gap: 6px; }
.sm-tline-dot   { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(26,22,18,0.14); background: #faf6ee; display: flex; align-items: center; justify-content: center; color: rgba(26,22,18,0.32); transition: .35s; flex-shrink: 0; }
.sm-tline-step.is-active .sm-tline-dot { border-color: #c9a96e; background: #c9a96e; color: #1a1612; box-shadow: 0 0 0 5px rgba(201,169,110,0.18); animation: smTlinePulse 2s ease infinite; }
.sm-tline-label { font-family: 'Inter Tight', sans-serif; font-size: 11px; letter-spacing: 0.02em; color: rgba(26,22,18,0.4); line-height: 1.35; }
.sm-tline-step.is-active .sm-tline-label { color: #1a1612; font-weight: 600; }
.sm-tline-date  { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600; color: rgba(26,22,18,0.55); text-transform: capitalize; }
.sm-tline-step.is-active .sm-tline-date { color: #a3803f; }
@keyframes smTlinePulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(201,169,110,0.18); } 50% { box-shadow: 0 0 0 8px rgba(201,169,110,0.08); } }
/* Flechas de dirección: solo existen para la cuadrícula 2×2 de celular (marcan
   el recorrido en zigzag 1→2, 2↓3, 3→4). En escritorio quedan ocultas porque
   ahí la línea horizontal ya deja claro el orden. */
.sm-tline-arrow { display: none; color: rgba(201,169,110,0.7); font-size: 15px; line-height: 1; pointer-events: none; }
@media (max-width: 640px) {
  /* En fila también en celular (no 2×2), para no robar tanto espacio vertical. */
  .sm-tline       { grid-template-columns: repeat(4,1fr); row-gap: 0; column-gap: 4px; }
  .sm-tline-track { top: 15px; left: 12%; right: 12%; }
  .sm-tline-arrow { display: none; }
  .sm-tline-dot   { width: 30px; height: 30px; }
  .sm-tline-dot svg { width: 13px; height: 13px; }
  .sm-tline-label { font-size: 8.5px; }
  .sm-tline-date  { font-size: 10px; }
}
@media (max-width: 380px) {
  .sm-tline-label { display: none; }
}