:root {
  --color-bg: #faf7f2;
  --color-bg-alt: #f0f0f0;
  --color-text: #2b2620;
  /* Color de marca, por pedido explícito ("todo el color de marca pase a
     amarillo") — reemplaza el púrpura #7c3aed que era el acento del sitio
     desde el arranque del proyecto. Mismo valor en los dos temas, como ya
     pasaba con el púrpura (nunca tuvo override propio en modo oscuro). */
  --color-accent: #F8CC4D;
  --color-card-bg: #ffffff;
  --color-border: #e0e0e0;
  --color-placeholder-bg: #d4d4d4;
  --max-width: 1100px;
  --glass-bg: rgba(255, 255, 255, 0.35);
  --glass-border: rgba(255, 255, 255, 0.5);
  color-scheme: light;
}

/* Tema oscuro: automático según preferencia del sistema si el usuario no eligió
   explícitamente, y siempre gana la elección manual del toggle (persistida via
   localStorage, ver initThemeToggle() en cart.js) sobre la preferencia del SO. */
/* Update (2026-09-22, por pedido explícito, "buscá una mejor combinación de grises
   y negros... dejá el amarillo"): paleta re-hecha con más escalones y más separación
   real entre cada uno (antes bg #1a1c1f y card-bg #262626 apenas se distinguían —
   una diferencia de luminancia casi imperceptible, por eso se sentía "plano"). Sigue
   siendo escala de grises pura, cero tinte de color (mismo criterio que la versión
   anterior), y --color-accent no se tocó. También se sacó el override que forzaba
   .product-card/.category-card a blanco puro (#ffffff) en modo oscuro — quedaba como
   un recorte blanco flotando sobre un fondo casi negro, exactamente lo opuesto a "una
   buena combinación de grises y negros"; ahora heredan --color-card-bg como cualquier
   otra card del sitio (ya leían la variable, no hacía falta tocar su propio CSS).
   Follow-up (mismo día, por pedido explícito, "no me gusta el color de las cards en
   si mismo, dejalas un poco mas claras a la del contenedor"): --color-card-bg subió de
   #202020 a #484848. El caso real era el home: sus secciones (#productos, Instagram,
   etc.) tienen su propio contenedor a #3B3B3B (ver más abajo, "Contenedores de sección
   más claros en modo oscuro"), y con el card-bg anterior (#202020) las cards de producto
   quedaban MÁS OSCURAS que ese contenedor — al revés de una card elevada, se leía como
   un hueco. #484848 queda claramente por encima de #3B3B3B. --color-border y
   --color-placeholder-bg se corrieron para acompañar el nuevo card-bg más claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #101010;
    --color-bg-alt: #161616;
    --color-text: #e8e8e8;
    --color-card-bg: #484848;
    --color-border: #5c5c5c;
    --color-placeholder-bg: #383838;
    /* columna izquierda del desplegable "Fragancias": gris oscuro en vez del púrpura
       de marca (por pedido explícito) */
    --menu-panel-bg: #2b2b2b;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #101010;
  --color-bg-alt: #161616;
  --color-text: #e8e8e8;
  --color-card-bg: #484848;
  --color-border: #5c5c5c;
  --color-placeholder-bg: #383838;
  --menu-panel-bg: #2b2b2b;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Color de selección de texto del navegador, por pedido explícito ("color
   de resalta/selección... como los botones") — mismo par fondo
   amarillo/texto oscuro que usan los botones. */
::selection {
  background: var(--color-accent);
  color: #482f1c;
}

/* Auditoría, por pedido explícito ("coloca los iconos y enlaces amarillos
   en la version oscura" + reporte de textos ilegibles): el pase de "texto
   var(--color-accent) -> #482f1c" hecho al cambiar el acento a amarillo
   asumía que todo ese texto estaba sobre un fondo amarillo (como en los
   botones), pero estos casos son texto/ícono de acento suelto sobre una
   card/panel con var(--color-card-bg) — que en modo oscuro es gris oscuro,
   no blanco, así que el marrón oscuro quedaba casi invisible. Corregidos a
   amarillo (var(--color-accent)) solo en modo oscuro; en modo claro siguen
   igual (marrón sobre blanco, ya legible). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .combo-pick-price,
  :root:not([data-theme="light"]) .newsletter-popup-plan-price,
  :root:not([data-theme="light"]) .pdp-review-entry-label,
  :root:not([data-theme="light"]) .pdp-performance-label span:last-child,
  :root:not([data-theme="light"]) .option-card-icon,
  :root:not([data-theme="light"]) .checkout-review-edit,
  :root:not([data-theme="light"]) .auth-link a,
  :root:not([data-theme="light"]) .compare-bar-count,
  :root:not([data-theme="light"]) .compare-remove:hover,
  :root:not([data-theme="light"]) .account-tab.is-active,
  :root:not([data-theme="light"]) .drop-plan-price {
    color: var(--color-accent);
  }
}

:root[data-theme="dark"] .combo-pick-price,
:root[data-theme="dark"] .newsletter-popup-plan-price,
:root[data-theme="dark"] .pdp-review-entry-label,
:root[data-theme="dark"] .pdp-performance-label span:last-child,
:root[data-theme="dark"] .option-card-icon,
:root[data-theme="dark"] .checkout-review-edit,
:root[data-theme="dark"] .auth-link a,
:root[data-theme="dark"] .compare-bar-count,
:root[data-theme="dark"] .compare-remove:hover,
:root[data-theme="dark"] .account-tab.is-active,
:root[data-theme="dark"] .drop-plan-price {
  color: var(--color-accent);
}

/* las marquesinas infinitas (ofertas/marcas/testimonios) arman su pista
   duplicando contenido varias veces — son mucho más anchas que la pantalla
   por diseño, y aunque cada una tiene su propio overflow:hidden, en mobile
   igual empujaban el ancho total de la página (el fondo se podía arrastrar
   a los costados). overflow-x:hidden acá corta eso de raíz sin tocar el
   scroll horizontal interno de ningún carrusel, que sigue viviendo en su
   propio contenedor. */
/* Antes esto era "html, body { overflow-x: hidden; }" — pero fijar
   overflow-x en los dos fuerza overflow-y:auto en los dos también (regla
   CSS: si un eje no es visible, el otro pasa a auto, y esto no se puede
   contrarrestar escribiendo overflow-y:visible a mano en el mismo elemento,
   el spec lo vuelve a forzar a auto igual). Con html Y body como
   contenedores de scroll anidados, el header/marquesina sticky (ver
   .site-header/.offers-marquee) se ataban al scrollport de body, que nunca
   se mueve por sí solo, así que nunca quedaban pegados. Dejar el
   overflow-x:hidden solo en html (alcanza para cortar el desborde
   horizontal de las marquesinas) resuelve esto — por pedido explícito
   ("deja el header y la marquesina todo el tiempo visible, que no haga
   scroll"). */
html {
  overflow-x: hidden;
  /* Evita el "rebote" de goma elástica al tocar y mantener el dedo cerca de los
     bordes de la página en mobile/tablet (iOS Safari/Android Chrome) — por pedido
     explícito ("que la página no se mueva cuando uno deja el dedo puesto"). */
  overscroll-behavior-y: none;
  /* Compensa el header+marquesina sticky al saltar a un ancla (#productos,
     filtros de marca/tag, etc.) — sin esto el navegador alinea el tope de
     la sección con el borde de la ventana, que la barra sticky tapa, y el
     contenido queda cortado arriba. --sticky-offset se mide en vivo en
     syncStickyHeaderHeight() (cart.js), ya que la altura del header varía
     por breakpoint; el fallback es para el primer frame antes de que ese
     JS corra. Por pedido explícito ("quedan cortados elementos... que
     termine siempre en el inicio de la seccion"). */
  scroll-padding-top: var(--sticky-offset, 227px);
}

/* El fallback (227px) es el peor caso real: barra fija de 211px en mobile
   (header 168 + marquesina 43) + 16px de aire. Antes era 182px, MENOS que la
   barra real en cualquier ancho (183px en escritorio), así que hasta que el JS
   medía la barra, el ancla dejaba el borde superior del contenedor tapado. */

/* Al saltar a #productos en el home queremos ver también la marquesina de
   marcas que ahora va justo arriba de "Todos los productos" — por pedido
   explícito ("deberia llegar a donde te marco en la segunda captura"):
   92px = alto de esa marquesina (68px) + su margen inferior (24px), igual en
   todos los anchos (medido en 1440/1024/375). */
.home-page #productos {
  scroll-margin-top: 92px;
}

/* Scroll suave sitewide para cualquier salto a ancla (#productos, etc.) —
   cubre tanto los <a href="#..."> nativos (ej. "Ver catálogo") como
   scrollIntoView()/scrollTo() sin opciones explícitas. Respeta
   prefers-reduced-motion, mismo criterio que los autoplays de los sliders. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* garantiza que el atributo hidden gane siempre, incluso sobre reglas que fijan display:flex/grid */
[hidden] {
  display: none !important;
}

/* Al mantener el dedo sobre una imagen, iOS Safari la "levanta" para arrastrarla
   (ícono + de drag) y puede mostrar el menú nativo de guardar/copiar — comportamiento
   del navegador, no algo que pusimos, y confuso en un sitio de compras donde tocar
   una foto solo debería llevar al producto. Desactivado sitewide, por pedido explícito
   ("con qué sentido, no lo conozco" al ver el + al tocar una imagen). */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Modo preview (admin > Productos, iframe de "Página del producto", ?preview=1
   en la URL): recorta la página a solo el contenido de la PDP, sin chrome. */
.is-preview-mode .site-header,
.is-preview-mode .site-footer,
.is-preview-mode .floating-actions,
.is-preview-mode .pdp-related {
  display: none !important;
}
.is-preview-mode .page-main {
  padding-top: 1rem;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  /* mismo motivo que en html — algunos navegadores solo lo respetan en un elemento u otro */
  overscroll-behavior-y: none;
  /* footer "pegado abajo": si el contenido de la página no llega a llenar el
     alto de la pantalla (común en tablets, con más alto de viewport), el
     fondo del body quedaba visible como una franja debajo del footer negro —
     esto hace que <main> crezca para ocupar el espacio libre y el footer
     siempre termine exactamente al final, sin importar cuánto contenido haya. */
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  transition: background-color 0.2s ease, color 0.2s ease;
  /* textura granulada gris/blanco nativa (SVG feTurbulence), sin archivo de imagen */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Modo oscuro: sin granulado, negro/gris liso — por pedido explícito. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image: none;
  }
}

:root[data-theme="dark"] body {
  background-image: none;
}

/* Home: fondo gris claro con granulado (25% opacidad), degradado de blanco a gris
   en el primer 20% justo debajo del banner + cada sección de servicios en su propio
   rectángulo blanco con outline gris claro (excepto las marcadas .no-section-box) */
body.home-page {
  background-color: var(--color-bg-alt);
}

body.home-page main {
  background-color: var(--color-bg-alt);
  background-image:
    linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-bg-alt) 20%, var(--color-bg-alt) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
}

/* Modo oscuro: sin el degradado (gris claro -> gris) ni el granulado de la
   versión clara — negro pleno liso, por pedido explícito. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home-page main {
    background-image: none;
  }
}

:root[data-theme="dark"] body.home-page main {
  background-image: none;
}

body.home-page main > section:not(.no-section-box) {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Contenedores de sección más claros en modo oscuro, por pedido explícito
   — ajustado en varias vueltas (85% → 70% → #3B3B3B, el valor final pedido
   explícitamente). #3B3B3B sigue siendo un gris oscuro (más claro que el
   var(--color-card-bg) original, #262626, pero no tan claro como los
   intentos anteriores), así que el título de sección vuelve a heredar
   var(--color-text) normal (gris claro) sin necesitar override propio —
   ya lee bien sobre este fondo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home-page main > section:not(.no-section-box) {
    background: #3B3B3B;
  }
}

:root[data-theme="dark"] body.home-page main > section:not(.no-section-box) {
  background: #3B3B3B;
}

body.home-page main > section.no-section-box {
  margin-bottom: 1.5rem;
}

body.home-page .overlap-banner {
  margin-top: -125px;
  position: relative;
  z-index: 3;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==================== HEADER ==================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #5b2d8f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Versión oscura: header en negro (en vez del púrpura de siempre), por pedido explícito. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header,
  :root:not([data-theme="light"]) .header-nav {
    background: #000000;
  }
}

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .header-nav {
  background: #000000;
}

/* Versión oscura: iconos y enlaces del header en amarillo (color de marca),
   en vez del blanco fijo que usan en modo claro sobre el header púrpura —
   por pedido explícito ("coloca los iconos y enlaces amarillos en la
   version oscura"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-nav-links > a,
  :root:not([data-theme="light"]) .header-nav-dropdown-trigger,
  :root:not([data-theme="light"]) .header-account-link,
  :root:not([data-theme="light"]) .header-icon-link,
  :root:not([data-theme="light"]) .mobile-menu-toggle,
  :root:not([data-theme="light"]) .theme-toggle {
    color: var(--color-accent);
  }
}

:root[data-theme="dark"] .header-nav-links > a,
:root[data-theme="dark"] .header-nav-dropdown-trigger,
:root[data-theme="dark"] .header-account-link,
:root[data-theme="dark"] .header-icon-link,
:root[data-theme="dark"] .mobile-menu-toggle,
:root[data-theme="dark"] .theme-toggle {
  color: var(--color-accent);
}

/* ==================== HEADER TOP ==================== */
/* Sin separador entre header-top y header-nav, por pedido explícito ("elimina
   el separado ente los elementos de arriba y el menú") — las dos filas leen
   como una sola barra continua. El padding vertical de las dos se ajustó en
   consecuencia para que la barra combinada no quede ni apretada ni con
   demasiado aire (ver .header-nav más abajo). */
.header-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.85rem 0 0.6rem;
}

.header-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: block;
  line-height: 1;
}

/* SVG con fill fijo #fff — el header siempre es oscuro (púrpura o negro en modo
   oscuro), así que el mismo archivo lee bien en ambos temas sin necesitar una
   versión alternativa. */
.logo-img {
  height: 58px;
  width: auto;
  display: block;
  animation: logo-enter 0.7s ease-out both;
}

/* Logos en dorado en modo oscuro, por pedido explícito ("deja los logos en
   amarillo"). El logo es un <img> de un SVG con fill fijo #fff — no se puede
   recolorear con color/fill desde afuera, así que se usa un filtro CSS
   calibrado con un swatch blanco puro sintético (canvas + muestreo de píxel,
   no un pixel del SVG real — un primer intento calibrado contra un pixel
   antialiaseado casi-blanco del logo daba bien ahí pero mal en blanco puro
   real) hasta calzar con --color-accent (#F8CC4D): rgb(247,204,77) contra el
   objetivo rgb(248,204,77), a 1 unidad de distancia — verificado contra un
   pixel blanco puro real de los dos archivos (logotipo.svg y logotipo_2.svg,
   este último sí tiene un pixel 255,255,255 real), mismo resultado en los
   dos. Mismo filtro para .footer-logo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img,
  :root:not([data-theme="light"]) .footer-logo {
    filter: brightness(0) saturate(100%) invert(73%) sepia(93%) saturate(310%) hue-rotate(-7deg) brightness(97%);
  }
}

:root[data-theme="dark"] .logo-img,
:root[data-theme="dark"] .footer-logo {
  filter: brightness(0) saturate(100%) invert(73%) sepia(93%) saturate(310%) hue-rotate(-7deg) brightness(97%);
}

@keyframes logo-enter {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}




/* Postal code + shipping CTA, grouped on the right */
.header-right {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Search */
.header-search {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 100%;
  width: 100%;
  justify-self: center;
}

.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.7rem 1.2rem;
  font-size: 0.95rem;
  outline: none;
  color: var(--color-text);
  /* si el placeholder (o lo escrito) no entra, se corta con "…" en vez de a la mitad de una letra */
  text-overflow: ellipsis;
}

.header-search input::placeholder {
  color: #999;
  opacity: 0.8;
}

.search-divider {
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
  height: 24px;
  margin: 0 0.5rem;
}

.header-search button {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0 1rem;
  cursor: pointer;
  color: var(--color-text);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.header-search button:hover {
  opacity: 0.9;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.header-search svg {
  width: 18px;
  height: 18px;
}

/* Shipping CTA */
.header-shipping-cta {
  display: flex;
  /* stretch, no center: cuando "Compra mayor a $85.000" envuelve a más líneas
     que "Envío gratis", con align-items:center el segmento violeta quedaba
     más bajo que el ámbar y se veía el fondo del header (negro) arriba/abajo
     del violeta — con stretch ambos siempre igualan la altura del más alto. */
  align-items: stretch;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  min-width: auto;
  box-sizing: border-box;
}

.header-shipping-cta .icon {
  display: none;
}

.header-shipping-cta strong {
  background: #7c3aed;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  animation: header-pill-enter 0.6s ease-out both;
}

.header-shipping-cta span {
  position: relative;
  overflow: hidden;
  background: #F8CC4D;
  color: #5b2d8f;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  animation: header-pill-enter 0.6s ease-out 0.15s both;
}

/* brillo — mismo patrón que .pdp-badge-shine, solo en la pill 2 (amarilla) */
.header-shipping-cta span::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: skewX(-20deg);
  animation: header-pill-shine 2.8s ease-in-out infinite;
}

@keyframes header-pill-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes header-pill-shine {
  0% {
    left: -60%;
  }
  35% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

/* Hover desactivado, por pedido explícito — la pill "Envío gratis" ya no
   cambia de color al pasar el mouse. */

/* ==================== HEADER NAV ==================== */
.header-nav {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 0.4rem 0 0.7rem;
  background: #5b2d8f;
}

.header-nav-links {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

.header-nav-links > a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.9;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.header-nav-links > a:hover,
.header-nav-links > a.is-active {
  opacity: 1;
  border-bottom-color: #F8CC4D;
}

/* Link "¡Suscribite al drop!" (antes "Drop"), con glow parpadeando suave,
   por pedido explícito. Mismo patrón de box-shadow pulsante que
   .drop-plan-card--featured, adaptado a texto en vez de a un card entero:
   en vez de un box-shadow (no hay una caja visible alrededor del link) usa
   text-shadow, que da el mismo efecto de "resplandor" sobre el texto/ícono. */
.nav-drop-link {
  animation: nav-drop-glow 2.4s ease-in-out infinite;
}

@keyframes nav-drop-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(248, 204, 77, 0.5); }
  50% { text-shadow: 0 0 12px rgba(248, 204, 77, 1), 0 0 20px rgba(248, 204, 77, 0.6); }
}

/* Menú "Fragancias", estilo Mercado Libre (ver initFragranciasMenu() en
   cart.js): columna de categorías morada (gris oscuro en modo oscuro, ver
   --menu-panel-bg) a la izquierda y, pegado a su
   derecha, un panel blanco grande con columnas (una por marca o por grupo de
   filtro). La categoría activa se resalta en amarillo de marca con texto
   oscuro. En mobile (<=768px) el panel deja de flotar y pasa a ser un
   acordeón dentro del menú colapsado. */
.fragancias-menu-wrap {
  position: relative;
  display: inline-flex;
}

.header-nav-dropdown-trigger {
  background: none;
  border: none;
  font: inherit;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.9;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.header-nav-dropdown-trigger:hover,
.header-nav-dropdown-trigger[aria-expanded="true"] {
  opacity: 1;
  border-bottom-color: #F8CC4D;
}

.fragancias-trigger-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.header-nav-dropdown-trigger[aria-expanded="true"] .fragancias-trigger-caret {
  transform: rotate(180deg);
}

/* Contenedor = solo la columna izquierda; los paneles (.mega-flyout) salen a
   su derecha con position:absolute, así que acá no puede haber overflow. */
.fragancias-panel {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 0;
  width: 250px;
  background: var(--menu-panel-bg, #5b2d8f);
  /* sin esquinas redondeadas ni margen arriba/abajo, por pedido explícito: con
     los dos, la barra amarilla del ítem activo/hover quedaba flotando 8px adentro
     de un recuadro redondeado, con una franja del color del panel arriba y abajo
     y la esquina cuadrada de la barra asomando por la curva. Ahora la barra llega
     de borde a borde. Igual en modo claro y oscuro (el radio no depende del tema). */
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 0;
  z-index: 20;
}

.fragancias-panel-loading {
  font-size: 0.8rem;
  color: #ffffff;
  opacity: 0.8;
  padding: 0.75rem 1.25rem;
  margin: 0;
}

.mega-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: none;
  border: none;
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mega-item.is-active > .mega-item-btn {
  background: #F8CC4D;
  color: #482f1c;
  font-weight: 600;
}

.mega-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Panel de la derecha: arranca a la altura del tope de la columna y nunca es
   más bajo que ella (min-height:100% del contenedor posicionado). */
.mega-flyout {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-height: 100%;
  width: clamp(520px, 62vw, 900px);
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.5rem 2rem 1.5rem;
  background: var(--color-card-bg);
  color: var(--color-text);
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mega-item.is-active > .mega-flyout {
  display: block;
}

.mega-flyout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.mega-flyout-title {
  font-size: 1.2rem;
  font-weight: 400;
}

.mega-flyout-all {
  font-size: 0.8rem;
  color: inherit;
  opacity: 0.7;
  white-space: nowrap;
}

.mega-flyout-all:hover {
  opacity: 1;
}

.mega-cols {
  column-width: 150px;
  column-gap: 1rem;
}

.mega-col {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: 1.1rem;
}

.mega-col-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  margin-bottom: 0.3rem;
}

a.mega-col-title:hover {
  text-decoration: underline;
}

.mega-col a:not(.mega-col-title) {
  font-size: 0.78rem;
  line-height: 1.3;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
  padding: 0.18rem 0;
}

.mega-col a:not(.mega-col-title):hover {
  opacity: 1;
  text-decoration: underline;
}

.mega-count {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-left: 0.2rem;
}

@media (max-width: 768px) {
  .fragancias-menu-wrap {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  /* dentro del menú colapsado (ya morado): sin tarjeta flotante */
  .fragancias-panel {
    position: static;
    width: 100%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0.4rem;
    padding: 0;
  }

  .mega-item-btn {
    padding: 0.65rem 0.25rem;
  }

  .mega-item.is-active > .mega-item-btn {
    background: transparent;
    color: #F8CC4D;
  }

  .mega-item.is-active > .mega-item-btn .mega-chevron {
    transform: rotate(90deg);
  }

  .mega-flyout {
    position: static;
    width: auto;
    min-height: 0;
    max-height: 60vh;
    padding: 0.85rem 1rem;
    margin: 0.15rem 0 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 8px;
    box-shadow: none;
  }

  .mega-flyout-head {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    margin-bottom: 0.9rem;
  }

  .mega-flyout-title {
    font-size: 1rem;
  }

  .mega-cols {
    column-width: auto;
    column-count: 1;
  }
}

.header-account-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.header-account-link {
  font-size: 0.75rem;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  transition: all 0.2s ease;
  cursor: pointer;
  background: none;
  padding: 0.3rem 0.4rem;
  margin: -0.3rem -0.4rem;
  font-family: inherit;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
}

.header-account-link:hover {
  opacity: 1;
  border-bottom-color: #F8CC4D;
}

.header-icon-link {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  opacity: 0.9;
  transition: all 0.2s ease;
  animation: cart-icon-enter 0.7s ease-out both;
}

@keyframes cart-icon-enter {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 0.9;
    transform: translateX(0);
  }
}

.header-icon-link:hover {
  opacity: 1;
  color: #F8CC4D;
}

.header-icon-link svg {
  width: 24px;
  height: 24px;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #F8CC4D;
  color: #5b2d8f;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== TOGGLE DE TEMA CLARO/OSCURO (header, todas las páginas) ==================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  margin: -0.3rem -0.4rem;
  border-radius: 4px;
  color: #ffffff;
  opacity: 0.9;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  opacity: 1;
}

.theme-toggle-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.theme-toggle-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-track {
  background: #F8CC4D;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-knob {
  transform: translateX(16px);
}

/* ==================== HEADER RESPONSIVE ==================== */
/* tablet — incluye iPads en modo "sitio de escritorio" de Safari, que reportan
   un ancho mayor a 1024px (medido en un iPad Air 11" real: el layout de 3
   columnas de desktop entraba tal cual, sin activar el breakpoint de 1024px
   original, todo pegado al borde sin margen). Se achica el pill de envío para
   que los elementos (logo, buscador, pill) entren en una sola fila. El margen
   a los costados usa % (no un ancho fijo en px) para que quede visible en
   todo el rango tablet, no solo arriba de cierto ancho — un ancho fijo dejaba
   de generar margen en los anchos más chicos de este mismo rango.
   El buscador ocupa todo el espacio que dejan el logo y el pill (su ancho base
   es 100% de la columna del medio). Antes tenía un tope de 280px de 769 a
   1024px, y de 769px a ~850px quedaba más angosto todavía: a 769px medía 164px,
   de los cuales solo ~56px eran para escribir (se leía "Busca"); de 1025 a
   1180px ya ocupaba todo (pedido 2026-10-11: "la barra no se ve tan pequeña"
   y, después, "ajustá el buscador del header en tablet"). */
@media (max-width: 1180px) {
  .header-top,
  .header-nav {
    max-width: 92%;
    margin: 0 auto;
  }

  .header-shipping-cta strong,
  .header-shipping-cta span {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

}

/* Tablet angosta (769-899px): el pill de envío en una sola línea mide ~299px y, junto al logo
   (183px), deja el buscador en 164px a 769px. Con "Compra mayor a $85.000" en dos líneas el pill
   mide ~240px (45px de alto, entra en los 58px del logo) y el buscador gana ~60px: 223px a
   769px, 270px a 820px, 343px a 899px. Desde 900px el pill vuelve a una línea y el buscador
   sigue siendo de 284px o más. */
@media (min-width: 769px) and (max-width: 899px) {
  .header-shipping-cta span {
    max-width: 8rem;
    text-wrap: balance;
  }
}

@media (max-width: 1024px) {
  .header-nav {
    gap: 1.5rem;
  }

  .header-nav-links {
    gap: 1.2rem;
  }
}

/* Tablet (769-1180px): la barra de navegación necesita unos 850px en una sola fila (452px de links
   + 372px de acciones de cuenta + el espacio entre los dos) y recién entra entera desde los
   ~938px de ventana (92% del ancho, con barra de scroll). Más abajo, el texto de las acciones se
   partía en 2-3 líneas ("Creá / tu / cuenta") y, por debajo de ~860px, el carrito quedaba fuera
   de la pantalla y la página scrolleaba para el costado (pedido 2026-10-11, tablet). Ahora, si no entran juntos, las acciones de cuenta pasan
   a una segunda fila, alineadas a la derecha; si entran, queda igual que antes (links a la
   izquierda, acciones a la derecha). El menú de cuenta (.account-dropdown-menu) cuelga de
   .header-account-actions, así que se abre debajo de esa fila. */
@media (min-width: 769px) and (max-width: 1180px) {
  .header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 0.4rem;
  }

  .header-account-actions {
    margin-left: auto;
  }
}

/* Escritorio y tablet (desde 769px): menos aire entre la fila de arriba (logo, buscador y pill de envío)
   y la del menú (pedido 2026-10-14: "reducí el gap entre los elementos de arriba… y el texto del menú,
   hay mucho espacio entre los dos", primero para escritorio y después "igualá también tablet").
   Medido a 1899px: del borde de abajo del pill al texto del menú había 43,2px, y 16px de eso eran una
   fila de grilla vacía: .header-top declara dos filas (auto auto) con gap de 1rem, pero fuera de
   mobile todo vive en la primera, y el gap entre pistas se paga igual aunque la segunda no tenga
   nada. Con una sola fila y 0.3rem abajo la separación queda en 22,4px, igual que el aire que hay
   arriba del pill; el header pasa de 139,8px a 119px. Mobile (hasta 768px) queda como estaba (mobile
   sí usa la 2ª y la 3ª fila). */
@media (min-width: 769px) {
  .header-top {
    grid-template-rows: auto;
    padding-bottom: 0.3rem;
  }
}

/* mobile: header compacto — hamburguesa a la izquierda, logo centrado, carrito
   a la derecha, todo en una sola fila liviana; el buscador y el pill de envío
   van debajo; los links de navegación y las acciones de cuenta (antes una
   fila fija más) quedan colapsados detrás de la hamburguesa (ver
   initMobileMenu() en cart.js), no ocupan espacio hasta que se abren. */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
}

.header-cart-mobile {
  display: none;
}


@media (max-width: 768px) {
  .header-top {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0.6rem;
    padding: 0.5rem 0;
  }

  .mobile-menu-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }

  .header-left {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
  }

  .logo-img {
    height: 44px;
  }

  .header-cart-mobile {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
  }

  .header-right {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .header-shipping-cta {
    flex: 1;
    min-width: 0;
  }

  .header-shipping-cta strong,
  .header-shipping-cta span {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-size: 0.7rem;
  }




  /* nav colapsado: oculto hasta que se abre la hamburguesa */
  .header-nav {
    display: none;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.75rem 0 1rem;
  }

  .header-nav.is-open {
    display: flex;
    flex-direction: column;
  }

  .header-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    font-size: 0.9rem;
    width: 100%;
  }

  .header-account-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
  }

  .header-account-actions .cart-link {
    display: none;
  }

  .header-account-link {
    font-size: 0.85rem;
  }
}

.banner-slider {
  position: relative;
  width: 100%;
  height: 500px;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .banner-slider {
    height: 720px;
  }
}

@media (min-width: 3000px) {
  .banner-slider {
    height: 900px;
  }
}

/* Notebooks/tablets de 768px de alto real (1024x768, 1366x768 — muy comunes)
   quedaban con el banner de 720px + header/marquesina (~183px) pasándose del
   viewport por >100px: los puntos del slider y las cards de categorías caían
   totalmente fuera de la vista inicial sin hacer scroll. max-height en vez de
   un ancho fijo para que agarre cualquier pantalla corta, no solo 1024px. */
@media (min-width: 768px) and (max-height: 800px) {
  .banner-slider {
    height: 560px;
  }
}

.banner-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

.banner-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.banner-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(91, 45, 143, 0) 0%,
    rgba(91, 45, 143, 0) 75%,
    rgba(91, 45, 143, 0.55) 100%
  );
  pointer-events: none;
}

/* Oscurece los 2 slides con foto real del banner del Drop, por pedido
   explícito: capa negra al 35% con degradado a 90° (izquierda a derecha),
   en vez del overlay morado compartido con el resto del sitio. */
#drop-banner-slider .banner-overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Versión oscura del overlay del banner, por pedido explícito: paleta
   dorado/marrón (#482F1C oscuro, #845A24 más claro) en vez de morado→negro.
   Transparente hasta 3/4 de alto, oscurece solo el último cuarto, igual que
   antes. Solo el overlay es dark-mode-only — el botón CTA de abajo ya es
   amarillo en los dos temas (ver regla sin scope de tema, por pedido
   explícito posterior: "los botones amarillos" con texto oscuro en reposo
   y fondo oscuro/texto blanco en hover, en las dos versiones). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banner-overlay {
    background: linear-gradient(
      to bottom,
      rgba(132, 90, 36, 0) 0%,
      rgba(132, 90, 36, 0) 60%,
      rgba(132, 90, 36, 0.6) 80%,
      #482f1c 100%
    );
  }
}

:root[data-theme="dark"] .banner-overlay {
  background: linear-gradient(
    to bottom,
    rgba(132, 90, 36, 0) 0%,
    rgba(132, 90, 36, 0) 60%,
    rgba(132, 90, 36, 0.6) 80%,
    #482f1c 100%
  );
}

.banner-content .cta-button {
  background: #f8cc4d;
  color: #482f1c;
}

.banner-content .cta-button:hover {
  background: #482f1c;
  color: #fff;
}

/* Funde el borde inferior del banner con el fondo REAL de la página, como el hero
   de mercadolibre.com.ar. Update (2026-09-22, bug encontrado por explícito "no se
   nota el corte de la imagen" en drop.html): el degradado apuntaba fijo a
   --color-card-bg/--color-bg-alt, el color de fondo especial que solo tiene
   body.home-page main (ver esa regla más abajo) — en cualquier otra página con
   .banner-slider (hoy solo drop.html) el fondo real es --color-bg/--color-bg-alt
   normal, así que el degradado terminaba en un color distinto al fondo real de
   verdad, dejando una costura visible en vez de fundirse. Ahora la regla base
   funde a --color-bg (el fondo real por defecto en cualquier página) y solo el
   home page, que sí tiene el fondo especial, pisa esto con su propio color. */
.banner-slider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Fondo especial de body.home-page main (ver esa regla más abajo): en claro
   arranca en --color-card-bg (blanco puro), en oscuro es --color-bg-alt sólido
   (sin el degradado ni el granulado propios). Solo aplica en el home; en cualquier otra
   página el fondo real es --color-bg, ya cubierto por la regla base de arriba. */
body.home-page .banner-slider::after {
  background: linear-gradient(to bottom, transparent 0%, var(--color-card-bg) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home-page .banner-slider::after {
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-alt) 100%);
  }
}

:root[data-theme="dark"] body.home-page .banner-slider::after {
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg-alt) 100%);
}

.banner-content {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.banner-slide--promo,
.banner-slide--original {
  justify-content: center;
}

/* Slide promocional de Aromapuro Drop, por pedido explícito — no hay foto real
   para este slide (es un plug a otra sección del sitio, no un producto), así
   que usa un degradado en el color de marca en vez de una <img>, mismo
   criterio "sin fotografía real todavía" que los promo-banners del home. */
.banner-slide--drop {
  background-image: linear-gradient(135deg, #5b2d8f 0%, #7c3aed 55%, #4c1d75 100%);
  overflow: hidden;
}

/* Niebla animada sobre el degradado, por pedido explícito, en vez del
   degradado plano solo — 3 manchas radiales blancas bien difuminadas
   (filter:blur) que van a la deriva lentamente. inset:-20% + blur evita
   ver el borde recto de las manchas; anima solo transform (GPU), no
   repite el blur en cada frame. */
.banner-slide--drop::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 45% 88%, rgba(255, 255, 255, 0.2) 0%, transparent 55%);
  filter: blur(45px);
  animation: drop-fog-drift 22s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

@keyframes drop-fog-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(3%, -3%) scale(1.08);
  }
  100% {
    transform: translate(-4%, 2%) scale(1);
  }
}

.banner-content h1,
.banner-content h2 {
  margin: 0 0 0.75rem;
  font-size: 1.9rem;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
  .banner-content h1,
  .banner-content h2 {
    font-size: 2.75rem;
  }
}

.banner-content p {
  margin: 0 auto 1.25rem;
  font-size: 1rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  max-width: 46ch;
}

.cta-button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  background: var(--color-accent);
  color: #482f1c;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.cta-button:hover {
  background: #482f1c;
  color: #fff;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.cta-button--danger {
  background: #f8cc4d;
  color: #482f1c;
}

.cta-button--danger:hover {
  background: #482f1c;
  color: #fff;
}

/* Solo la flecha, sin el círculo de fondo — por pedido explícito ("a los
   manejadores de los banners slider solo deja la flecha y oculta los
   círculos"). text-shadow en vez del círculo semitransparente para que
   siga leyéndose contra partes claras de la foto de fondo. */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.banner-arrow:hover {
  background: transparent;
  color: #F8CC4D;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.banner-arrow--prev {
  left: 1rem;
}

.banner-arrow--next {
  right: 1rem;
}

.banner-dots {
  position: absolute;
  bottom: calc(1.25rem + 110px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.banner-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}

.banner-dot.is-active {
  background: #fff;
}

/* ==================== HERO CON BANNERS DE ARTE (home) ====================
   Pedido 2026-10-11: banners nuevos de 8000x2083 (3,84:1) sin texto dibujado. En DESKTOP (>=1025px)
   el alto sigue al ancho para que el arte se vea casi entero y el texto va a la izquierda en el 1 y
   el 2 y a la derecha en el 3, alineado con el contenedor del sitio. En tablet y celular (<=1024px)
   queda el arte anterior (-tablet/-mobile) con el texto centrado, hasta que lleguen las versiones
   nuevas. Todo escopado a .banner-slider--art / .banner-slide--art: el hero de drop.html comparte
   .banner-slider y no se toca. */
@media (min-width: 1025px) {
  .banner-slider.banner-slider--art {
    /* 26,04vw = 2083/8000 (el arte entero); el mínimo deja lugar al texto y el máximo
       frena las pantallas ultra anchas */
    height: clamp(460px, 26.04vw, 900px);
  }

  .banner-slide--art {
    /* las cards de categorías tapan los últimos 125px del hero: el texto se centra en lo que queda */
    padding-bottom: 125px;
    box-sizing: border-box;
  }

  /* el arte ya trae su color: sin el degradado morado/marrón del overlay (queda el fundido del ::after) */
  .banner-slide--art .banner-overlay {
    display: none;
  }

  .banner-slide--art .banner-content {
    max-width: calc(min(560px, 38vw) + 3rem);
  }

  /* margen mínimo de 4rem: en pantallas angostas (p. ej. 1080px) el texto quedaba a 24px del borde y las
     flechas (52px de ancho) lo tapaban al pasar el mouse */
  .banner-slide--text-left .banner-content {
    margin: 0 auto 0 max(4rem, calc((100% - var(--max-width)) / 2));
    text-align: left;
  }

  .banner-slide--text-right .banner-content {
    margin: 0 max(4rem, calc((100% - var(--max-width)) / 2)) 0 auto;
    text-align: right;
  }

  .banner-slide--text-left .banner-content p {
    margin-left: 0;
    margin-right: auto;
  }

  .banner-slide--text-right .banner-content p {
    margin-left: auto;
    margin-right: 0;
  }

  .banner-slide--art .banner-content h1,
  .banner-slide--art .banner-content h2 {
    font-size: clamp(1.7rem, 2.35vw, 2.75rem);
    text-wrap: balance;
  }

  .banner-slide--art .banner-content p {
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  }

  /* Slide 3: sus productos están a la izquierda (22%-43% del arte). Con el recorte centrado de las
     pantallas angostas (a 1080px solo se ve el 60% del arte) quedaban a ~40px del borde, tapados
     por la flecha; se corre el encuadre un poco hacia la izquierda para que los productos queden
     centrados en el espacio libre (el texto va a la derecha). Sin efecto desde 1767px, donde el arte
     se ve entero. */
  .banner-slide--text-right img {
    object-position: 41% 50%;
  }
}

/* Flechas del hero: lengüetas blancas pegadas a los bordes. Solo con mouse y pantalla ancha (>1024px):
   aparecen al pasar el mouse por el banner. En tablet y celular no hay flechas (se desliza con el dedo,
   ver initBannerSlider en main.js) y quedan los puntos. */
.banner-slider.banner-slider--art .banner-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 96px;
  border: 0;
  background: #fff;
  color: #5b2d8f;
  text-shadow: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.banner-slider.banner-slider--art .banner-arrow svg {
  width: 22px;
  height: 22px;
}

.banner-slider.banner-slider--art .banner-arrow--prev {
  left: 0;
  padding-right: 8px;
  border-radius: 0 48px 48px 0;
}

.banner-slider.banner-slider--art .banner-arrow--next {
  right: 0;
  padding-left: 8px;
  border-radius: 48px 0 0 48px;
}

.banner-slider.banner-slider--art .banner-arrow:hover {
  background: #fff;
  color: #482f1c;
  text-shadow: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) {
  .banner-slider.banner-slider--art:hover .banner-arrow {
    opacity: 1;
    pointer-events: auto;
  }
}

.banner-slider.banner-slider--art .banner-arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* tablet y celular (ancho <= 1024px o sin hover): sin flechas */
@media (max-width: 1024px), (hover: none) {
  .banner-slider.banner-slider--art .banner-arrow {
    display: none;
  }
}

/* Slide 4 (Aromapuro Drop · 100% originales): insignia dorada arriba del título y acentos dorados
   (pedido 2026-10-11: "bien destacado"). Mismo dorado/marrón que los botones del sitio. */
.banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: #f8cc4d;
  color: #482f1c;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.banner-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.banner-accent,
.banner-content p strong {
  color: #f8cc4d;
}

/* Slide del Día de la Madre (arte rosa claro): el texto va oscuro en vez de blanco, "10% OFF" en una pastilla
   dorada y el aviso legal chico debajo del botón. */
.banner-slide--light .banner-content {
  color: #3b1228;
}

.banner-slide--light .banner-content h2,
.banner-slide--light .banner-content p {
  text-shadow: none;
}

.banner-slide--light .banner-badge {
  box-shadow: 0 2px 8px rgba(120, 40, 70, 0.28);
}

.banner-pill {
  display: inline-block;
  padding: 0 0.35em;
  border-radius: 0.3em;
  background: #f8cc4d;
  color: #482f1c;
  white-space: nowrap;
}

/* con 3 clases para ganarle a ".banner-slide--art .banner-content p" (tamaño y márgenes del párrafo) */
.banner-slide--art .banner-content .banner-legal {
  margin-top: 0.9rem;
  margin-bottom: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* los puntos del hero se ven también sobre un arte claro */
.banner-slider--art .banner-dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1025px) {
  /* los frascos de este arte terminan al 77% del ancho: con el recorte centrado de 1080px quedaban a ~55px
     del borde derecho, justo donde aparece la flecha */
  .banner-slide--art-4 img {
    object-position: 56% 50%;
  }

  /* este slide lleva insignia + título + 3 líneas de texto: con el título al tamaño de los otros (44px a 1920px)
     el bloque casi tocaba el borde de arriba */
  .banner-slide--art-4 .banner-content h2,
  .banner-slide--light .banner-content h2 {
    font-size: clamp(1.6rem, 2.1vw, 2.3rem);
  }
}

/* ==================== HERO: TABLET Y CELULAR (<=1024px) ====================
   El arte de tablet (1,42:1) y el de celular (0,86:1) viene armado con los productos arriba y el piso liso
   abajo, así que ahí el texto va ABAJO, centrado, y el alto del hero crece con el ancho para dejarle lugar
   debajo de los frascos. La imagen va pegada arriba a todo el ancho (sin recorte a los costados) y lo que
   sobra abajo se rellena con el color del borde inferior del arte (--art-bg, uno por slide) con un fundido,
   para que no se note la costura. De 900px a 1024px (tablet horizontal, ventana baja) el texto vuelve al
   costado, como en desktop. Medido (ya sin la animación de entrada): la primera card empieza 68px arriba
   del borde inferior del hero hasta 768px y 93px de ahí en adelante; los puntos del slider van justo
   encima de ese borde y el texto justo encima de los puntos. Las alturas están calculadas para el bloque de
   texto más alto (el del Día de la Madre: insignia + título + párrafo + botón + aviso legal), con unos 12px
   de aire bajo los frascos. */
@media (max-width: 1024px) {
  .banner-slider.banner-slider--art {
    height: calc(37.3vw + 399px);
  }

  .banner-slide--art {
    align-items: flex-end;
    padding-bottom: 118px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--art-bg, #1a1030);
  }

  .banner-slide--art img {
    inset: 0 auto auto 0;
    height: auto;
    object-fit: initial;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }

  /* velo oscuro abajo para que el texto se lea sobre los reflejos (pisa también el overlay del modo oscuro) */
  .banner-slider.banner-slider--art .banner-slide--art .banner-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 68%);
  }

  /* slide claro (Día de la Madre): velo rosado claro en vez del oscuro, porque el texto va oscuro */
  .banner-slider.banner-slider--art .banner-slide--light .banner-overlay {
    background: linear-gradient(to top, rgba(255, 236, 241, 0.88) 0%, rgba(255, 236, 241, 0.62) 42%, rgba(255, 236, 241, 0) 72%);
  }

  /* el fundido blanco hacia la página baja de 30% a 56px (lo que tapan las cards): con el 30% blanqueaba el texto */
  .banner-slider.banner-slider--art::after {
    height: 56px;
  }

  .banner-slider.banner-slider--art .banner-dots {
    bottom: 102px;
  }

  .banner-slide--art .banner-content {
    z-index: 2;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }

  .banner-slide--art .banner-content h1,
  .banner-slide--art .banner-content h2 {
    font-size: 1.9rem;
  }

  .banner-slide--art .banner-content p {
    margin: 0 auto 1.1rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .banner-slider.banner-slider--art {
    height: calc(37.3vw + 384px);
  }

  .banner-slide--art {
    padding-bottom: 92px;
  }

  .banner-slider.banner-slider--art .banner-dots {
    bottom: 76px;
  }
}

@media (max-width: 520px) {
  .banner-slider.banner-slider--art {
    height: calc(55.8vw + 316px);
  }

  /* el arte de celular puede terminar en otro color que el de tablet (--art-bg-mob) */
  .banner-slide--art {
    background-color: var(--art-bg-mob, var(--art-bg, #1a1030));
  }

  .banner-slide--art .banner-content h1,
  .banner-slide--art .banner-content h2 {
    margin-bottom: 0.6rem;
    font-size: 1.45rem;
  }

  .banner-slide--art .banner-content p {
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
  }

  .banner-slide--art .banner-content .cta-button {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }

  .banner-badge {
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
  }
}

/* a 320px el título del slide de mamá pasa a 3 líneas: un poco más de alto */
@media (max-width: 340px) {
  .banner-slider.banner-slider--art {
    height: calc(55.8vw + 340px);
  }
}

@media (min-width: 900px) and (max-width: 1024px) {
  .banner-slider.banner-slider--art {
    height: 560px;
  }

  .banner-slide--art {
    align-items: center;
    padding-bottom: 93px;
  }

  .banner-slide--tab-left .banner-content {
    max-width: calc(41vw - 28px);
    margin: 0 auto 0 28px;
    text-align: left;
  }

  .banner-slide--tab-right .banner-content {
    max-width: calc(45vw - 28px);
    margin: 0 28px 0 auto;
    text-align: right;
  }

  .banner-slide--tab-left .banner-content p {
    margin-left: 0;
    margin-right: auto;
  }

  .banner-slide--tab-right .banner-content p {
    margin-left: auto;
    margin-right: 0;
  }

  .banner-slide--art .banner-content h1,
  .banner-slide--art .banner-content h2 {
    font-size: 1.55rem;
  }

  .banner-slide--art .banner-content p {
    font-size: 0.85rem;
  }
}

section {
  padding: 1.5rem;
}

.panel {
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.panel h2 {
  margin-top: 1.5rem;
}

.panel h2:first-child {
  margin-top: 0;
}

#productos h2 {
  margin-bottom: 0.5rem;
}

.section-intro {
  margin: 0 0 1.5rem;
  text-align: center;
  color: #482f1c;
  font-weight: 600;
}

/* Blanco en modo oscuro, por pedido explícito (queda ilegible el púrpura contra
   el fondo oscuro de la sección). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-intro {
    color: #ffffff;
  }
}

:root[data-theme="dark"] .section-intro {
  color: #ffffff;
}

/* ==================== HOME: SECTION TITLES & PRODUCT SECTIONS ==================== */
.section-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.products-section {
  padding: 2rem 1.5rem;
}

/* "Lo querés" / "Visto recientemente" / "Porque te interesa" / "Todos los productos":
   mismo ancho que .container, dejado explícito acá (no reutiliza .container) para no
   heredar cambios futuros de esa clase por accidente. */
.products-section--wide {
  max-width: 1190px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}

.empty-message {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.6;
  padding: 2rem;
}

/* ==================== HOME: CATEGORÍAS / BENEFICIOS ==================== */
.categories-section {
  max-width: 1150px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}

/* mismo problema que el header: estos contenedores (incluida la caja blanca de
   cada sección del home, que es el propio <section>) tienen max-width en px
   apenas por debajo del ancho de un iPad en modo escritorio (vertical/portrait),
   así que quedaban pegados borde a borde con 0 margen visible — % en vez de px
   para que el margen se mantenga en todo el rango, tablet y mobile por igual. */
@media (max-width: 1180px) {
  .container,
  .products-section--wide,
  .categories-section {
    max-width: 92%;
  }
}

.categories-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  /* centrado: entre 769px y 1180px el grupo flecha+cards+flecha (842px) es más angosto que la
     caja de la sección y quedaba pegado a la izquierda (pedido 2026-10-11, pantalla 1080x1920) */
  justify-content: center;
  gap: 0.75rem;
}

.categories-slider {
  display: flex;
  gap: 1.5rem;
  width: 992px;
  max-width: 100%;
  flex-shrink: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categories-slider::-webkit-scrollbar {
  display: none;
}

.categories-arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--color-accent);
  color: #482f1c;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.categories-arrow:hover {
  background: #482f1c;
  color: #fff;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.categories-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.categories-arrow:disabled:hover {
  background: var(--color-accent);
  box-shadow: none;
}

.category-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 230px;
  height: 390px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  scroll-snap-align: start;
}

.category-card-body {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* @media (hover:hover): solo dispositivos con mouse real activan el hover con
   transform — en touch, :hover queda "pegado" mientras el dedo sigue apoyado
   (no se libera hasta soltar), lo que se sentía como que la card "se movía
   sola" al mantener el dedo quieto. Por pedido explícito. El box-shadow sin
   transform en las demás cards no se tocó (no genera movimiento real). */
@media (hover: hover) {
  .category-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

.category-icon {
  color: #482f1c;
  line-height: 1;
}

.category-icon svg {
  width: 44px;
  height: 44px;
}

/* Versión oscura: mismo ícono marrón fijo (pensado para fondo claro) que
   casi no se ve sobre la card oscura — mismo fix ya aplicado a .benefits-icon,
   que reusa estos mismos SVGs (package/credit-card/shield/etc). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .category-icon {
    color: var(--color-accent);
  }
}

:root[data-theme="dark"] .category-icon {
  color: var(--color-accent);
}

.category-card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}

.category-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 0.75;
  line-height: 1.4;
}

.category-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-accent);
  color: #482f1c;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.category-link:hover {
  background: #482f1c;
  color: #fff;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

/* tablet: exactamente 3 cards (en vez de 4 fijas desbordando o una 4ta a medias) —
   misma fórmula que la versión desktop (N×230px + (N-1)×24px de gap). Rango
   ampliado a 1180px por la misma razón que el header (iPads en modo escritorio). */
@media (max-width: 1180px) {
  .categories-slider {
    width: 738px;
  }
}

/* tablet angosta (769-889px): flecha + 3 cards + flecha miden 842px y no entran en la pantalla
   (la flecha derecha quedaba cortada y la página scrolleaba para el costado) — con 2 cards
   (2×230px + 24px = 484px) sí, siempre enteras y centradas. Pedido 2026-10-11: revisar los breakpoints. */
@media (min-width: 769px) and (max-width: 889px) {
  .categories-slider {
    width: 484px;
  }
}

@media (max-width: 768px) {
  .categories-slider {
    gap: 0.75rem;
  }
}

/* ==================== HOME: FEATURED CARD (envío gratis / login) ==================== */
.featured-card-section {
  padding: 1rem 1.5rem;
}

.featured-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.2s ease;
}

.featured-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.featured-card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.featured-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.featured-card p {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

.featured-card-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-accent);
  color: #482f1c;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.featured-card-btn:hover {
  background: #482f1c;
  color: #fff;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

@media (max-width: 768px) {
  .featured-card {
    padding: 1.5rem 1rem;
  }

  .featured-card-icon {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 1.2rem;
  }
}

main {
  flex: 1 0 auto;
}

.page-main {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Página de producto: todo el contenido (breadcrumb + PDP + relacionados)
   dentro de una tarjeta blanca sobre fondo gris — mismo lenguaje visual que
   el home. Solo agrega fondo/borde y separación vertical, no toca
   width/max-width (eso ya lo resuelve .container, que .page-main ya usa). */
body.product-page {
  background: var(--color-bg-alt);
}

body.product-page .page-main {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page-main h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.contact-list li {
  padding: 0.35rem 0;
}

.faq-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 0.75rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

.faq-item p {
  margin: 0.75rem 0 0;
}

.product-grid-wrap {
  position: relative;
  display: flex;
  align-items: center;
  /* centrado, mismo motivo que .categories-slider-wrap */
  justify-content: center;
  gap: 0.75rem;
}

.product-grid {
  display: flex;
  gap: 1.5rem;
  width: 1032px;
  max-width: 100%;
  flex-shrink: 0;
  overflow-x: auto;
  padding: 20px;
  margin-bottom: 1rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-grid::-webkit-scrollbar {
  display: none;
}

.product-arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #8a8a8a;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  margin-bottom: 2rem;
}

.product-arrow:hover {
  background: #6b6b6b;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.2s ease;
  cursor: pointer;
  width: 230px;
  /* 426px = thumb 209 + resto de la card medido en vivo con las 4 pastillas de
     tamaño (que ocupan 3 líneas, no 2, desde que existe la de 30ml) + padding y
     gaps. Si cambia una pastilla, el nombre o un gap, volver a medir. */
  height: 426px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
}

/* mismo motivo que .category-card:hover más arriba — solo mouse real */
@media (hover: hover) {
  .product-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  }
}

/* Sin stock: card en escala de grises y apagada, más una etiqueta ("Agotado"/
   "Ingresa pronto", calculada en el backend). Ver renderCard() en main.js. */
.product-card.is-unavailable {
  filter: grayscale(1);
  opacity: 0.6;
}

/* Misma fila que .product-season-badge/.product-favorite-btn (top:18px),
   centrada para no competir por las dos esquinas que ya ocupan esos íconos. */
.product-availability-badge {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1;
}

.product-season-badge {
  position: absolute;
  /* 18px, no 8px — por pedido explícito ("dejalas mas dentro, que no corten el
     contenedor de la imagen"): a 8px el ícono quedaba casi pegado al borde de
     .product-card (padding 0.6rem = 9.6px antes de que empiece la imagen), así
     que se montaba sobre la esquina redondeada (10px) de .product-thumb en vez
     de quedar claramente adentro de la foto. 18px deja el ícono ~8.4px adentro
     del borde real de la imagen, ya pasada la curva de la esquina. */
  top: 18px;
  left: 18px;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: #482f1c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.product-season-badge svg {
  width: 14px;
  height: 14px;
}

/* Filtro de marcas ("Todos los productos") — <select> de selección única,
   reemplaza los chips de marca; el texto de las opciones se centra tanto en
   el valor cerrado (text-align-last) como en la lista desplegada (option). */
.products-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.products-section-header .section-title {
  margin: 0;
  font-size: 1.95rem;
}

.brand-filter-select {
  display: block;
  width: auto;
  min-width: 160px;
  max-width: 200px;
  flex-shrink: 0;
  margin: 0;
  padding: 0.6rem 2rem 0.6rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 16px;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-align-last: left;
  appearance: none;
  cursor: pointer;
}

.brand-filter-select option {
  text-align: left;
}

/* "Todos los productos": grilla que envuelve en filas, no carrusel — a diferencia
   de las demás secciones que reusan .product-grid (Lo querés, Visto recientemente, etc.) */
#productos {
  padding-left: calc(1.5rem + 20px);
  padding-right: calc(1.5rem + 20px);
}

#product-grid {
  display: grid;
  grid-template-columns: repeat(4, 230px);
  row-gap: 1.5rem;
  column-gap: 1.5rem;
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: visible;
  justify-content: center;
}

/* tablet: mismo criterio que .categories-slider — 3 cards en vez de 4 fijas
   desbordando el ancho disponible en este rango (1180px, ver nota del header). */
@media (max-width: 1180px) {
  .product-grid {
    width: 738px;
  }

  #product-grid {
    grid-template-columns: repeat(3, 230px);
  }
}

/* Lo que va arriba de la grilla de productos —en el home el título y el filtro de marca; en
   busqueda.html el título, los chips de tipo y el "Ordenar por"— alineado con la primera y
   la última card (pedidos 2026-10-11, pantalla 1080x1920). La grilla centra columnas de ancho
   fijo dentro de una caja más ancha y esos bloques ocupaban toda la caja, así que
   sobresalían de las cards (76px a 1080px, 54px a 1440px). --grid-span es el ancho de ese
   grupo de columnas: 4 × 230 + 3 × 24 = 992px; 3 × 230 + 2 × 24 = 738px hasta 1180px;
   2 × 230 + 24 = 484px de 769px a 899px; en mobile, el ancho de la caja (las 2 cards de 160px
   ya calzan). Los márgenes laterales son (100% − --grid-span) / 2 y no "auto" con un ancho
   fijo: si la caja queda apenas más angosta que el grupo (la grilla desborda parejo a los dos
   lados) el margen da negativo y el bloque sigue a las cards. Si cambian las columnas o el
   ancho de las cards, cambiar estos números. */
:root {
  --grid-span: 992px;
}

@media (max-width: 1180px) {
  :root {
    --grid-span: 738px;
  }
}

/* Tablet angosta (769-899px): las 3 columnas (738px) no entran en la caja de la sección (en el
   home son el 92% del ancho menos 90px de padding y borde: 604px a 769px, 738px recién a 900px)
   y las cards se salían de la caja blanca; con 2 columnas (2 × 230 + 24 = 484px) entran
   siempre, igual que el carrusel de categorías (769-889px). main.js: PRODUCT_GRID_TIERS usa
   el mismo corte (899px). Pedido 2026-10-11. */
@media (min-width: 769px) and (max-width: 899px) {
  :root {
    --grid-span: 484px;
  }

  #product-grid {
    grid-template-columns: repeat(2, 230px);
  }
}

@media (max-width: 768px) {
  :root {
    --grid-span: 100%;
  }
}

#productos .products-section-header,
#search-results-title,
.type-filter,
.search-results-toolbar {
  margin-left: calc((100% - var(--grid-span)) / 2);
  margin-right: calc((100% - var(--grid-span)) / 2);
}

.product-thumb {
  width: 209px;
  height: 209px;
  flex-shrink: 0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  /* fondo blanco fijo (no var(--color-card-bg)) en los dos temas — por pedido
     explícito, para que combine con el fondo de estudio claro de las fotos de
     producto reales, en vez de mostrar un recuadro oscuro detrás en modo oscuro. */
  background: #ffffff;
}

/* Corazón de favorito, arriba a la derecha de la card, a la misma altura y
   con el mismo tamaño (24px) que .product-season-badge (arriba a la
   izquierda) — por pedido explícito, para que los dos íconos queden
   alineados. Es hijo de .product-card (no de .product-thumb), igual que la
   insignia de temporada, así comparten el mismo origen de coordenadas. */
.product-favorite-btn {
  position: absolute;
  /* mismo motivo/valor que .product-season-badge de arriba */
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: #8a8a8a;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.product-favorite-btn svg {
  width: 14px;
  height: 14px;
}

/* mismo motivo que .category-card:hover más arriba — solo mouse real */
@media (hover: hover) {
  .product-favorite-btn:hover {
    color: #e0245e;
    transform: scale(1.1);
  }
}

.product-favorite-btn.is-active {
  color: #e0245e;
}

.product-favorite-btn.is-active svg {
  fill: currentColor;
}

/* Toast "se marcó/quitó de favoritos" — uno solo, compartido por todas las
   cards y la PDP (ver showFavoriteToast() en main.js), por pedido
   explícito ("un mensaje abajo que se marco como favorito on/off"). */
.favorite-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  background: #5b2d8f;
  color: #ffffff;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300;
}

.favorite-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.product-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

/* Rectángulo gris con la acotación de píxeles del hueco de imagen — reemplaza el
   shimmer mientras no exista una foto real cargada para ese producto. */
.product-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-placeholder-bg);
  box-sizing: border-box;
  padding: 0.4rem;
}

.product-thumb-dims {
  color: #8a8a8a;
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.product-name {
  font-size: 0.85rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  flex-shrink: 0;
  min-height: 2.6em;
}

.product-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.3rem;
  flex-shrink: 0;
}

.product-name-row .product-name {
  flex: 1;
  min-width: 0;
}

.compare-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-card-bg);
  color: var(--color-text);
  opacity: 0.6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.compare-btn svg {
  width: 13px;
  height: 13px;
}

.compare-btn:hover {
  opacity: 1;
  border-color: var(--color-accent);
}

.compare-btn.is-active {
  opacity: 1;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #482f1c;
}

.product-brand {
  font-size: 0.68rem;
  opacity: 0.6;
  flex-shrink: 0;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
  margin-top: -0.3rem;
}

.product-star {
  width: 13px;
  height: 13px;
}

.product-star--filled {
  fill: #F8CC4D;
}

.product-star--empty {
  fill: #d9c5f5;
}

/* la estrella del decimal del promedio: la vacía de fondo y la dorada encima, recortada por su ancho */
.product-star-partial {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.product-star-partial > .product-star,
.product-star-partial-fill > .product-star {
  display: block;
}

.product-star-partial-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}

/* perfume sin valoraciones suficientes: no se dibuja nada, pero la fila conserva su alto para no correr el resto de la card */
.product-rating--none {
  height: 13px;
}

.product-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex-shrink: 0;
}

.size-label {
  background: #e8d9ff;
  color: #4c1d75;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.product-shipping {
  font-size: 0.68rem;
  font-weight: 600;
  color: #1a7a3c;
  flex-shrink: 0;
}

/* Versión oscura: el verde de envío pierde contraste sobre las cards oscuras,
   pasa a fucsia por pedido explícito. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product-shipping {
    color: #e879f9;
  }
}

:root[data-theme="dark"] .product-shipping {
  color: #e879f9;
}

.product-price {
  font-size: 0.8rem;
  opacity: 0.8;
  flex-shrink: 0;
  margin-bottom: 0.2rem;
}

/* "(ARS)" chico y discreto al final de cualquier precio — em para escalar
   proporcional al tamaño del texto que lo rodea (card chica, PDP grande, etc.),
   sin necesitar una regla por contexto. */
.price-currency-tag {
  font-size: 0.55em;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 0.3em;
}

.product-grid-error {
  grid-column: 1 / -1;
  text-align: center;
}

/* ==================== ARMAR COMBO (combo-ocasiones.html) ==================== */
.combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.combo-pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text);
  transition: all 0.2s ease;
}

.combo-pick-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.combo-pick-card.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.combo-pick-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-placeholder-bg);
}

.combo-pick-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.combo-pick-name {
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
}

.combo-pick-brand {
  font-size: 0.76rem;
  opacity: 0.7;
}

.combo-pick-price {
  font-weight: 700;
  color: #482f1c;
}

.combo-pick-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #482f1c;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.combo-pick-card.is-selected .combo-pick-check {
  opacity: 1;
}

/* sin precio/stock en el tamaño elegido: se ve en la lista pero no se puede tocar */
.combo-pick-card.is-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}

.combo-pick-card.is-unavailable:hover {
  box-shadow: none;
}

.combo-pick-card.is-unavailable .combo-pick-price {
  font-size: 0.78rem;
  font-weight: 500;
}

/* Aviso del 5% de primera compra (combo-ocasiones.html): amarillo de marca,
   sólido cuando a la cuenta le corresponde. */
.combo-promo {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid #F8CC4D;
  background: rgba(248, 204, 77, 0.18);
  font-size: 0.9rem;
}

.combo-promo.is-eligible {
  background: #F8CC4D;
  color: #482f1c;
  font-weight: 600;
}

.combo-promo-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.combo-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

.combo-toolbar + .combo-grid {
  margin-top: 1rem;
}

.combo-size-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.combo-size-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.combo-size-toggle .pdp-size-btn small {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.8;
}

.combo-notice {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.combo-notice:empty {
  display: none;
}

.combo-bar {
  position: sticky;
  bottom: 1rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  flex-wrap: wrap;
}

.combo-bar-totals {
  font-size: 0.9rem;
}

.combo-bar-totals .order-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-width: 220px;
}

.combo-bar-totals .order-summary-line.total {
  font-weight: 700;
  font-size: 1.05rem;
}

/* Paginación de "Todos los productos" — 15 por página, mismo estilo/tamaño
   en mobile, tablet y desktop (por pedido explícito, no es un ajuste de
   breakpoint). */
.product-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pagination-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-card-bg);
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.pagination-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #482f1c;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==================== BÚSQUEDA (busqueda.html) ==================== */
.search-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Filtro "Tipo de perfume" (busqueda.html) — chips sumables con contador.
   El activo usa el amarillo de marca con texto oscuro, igual que los CTA. */
.type-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.type-filter-label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-right: 0.25rem;
}

.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.type-chip:hover {
  border-color: var(--color-accent);
}

.type-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #482f1c;
  font-weight: 600;
}

.type-chip-count {
  font-size: 0.72rem;
  opacity: 0.65;
}

.type-chip--clear {
  background: transparent;
  text-decoration: underline;
  border-color: transparent;
}

#search-results-count {
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 0;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.sort-control select {
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.sort-control select:focus {
  border-color: var(--color-accent);
  outline: none;
}

.search-suggestions {
  margin-top: 3rem;
}

/* ==================== HOME: BANNERS PROMO (PRIMAVERA / VERANO) ==================== */
.promo-banners {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

.promo-banner {
  display: flex;
  width: 650px;
  max-width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #F8CC4D;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.promo-banner-text {
  width: 50%;
  box-sizing: border-box;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #000;
  color: #fff;
}

.promo-banner-text h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.promo-banner-text p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0.85;
}

.promo-banner-text .cta-button {
  margin-top: auto;
  align-self: flex-end;
}

/* Texto centrado, solo en los banners de Aromapuro Drop, por pedido
   explícito — el resto de los .promo-banner (Ocasiones, 4x3, Primavera/
   Verano) quedan como estaban, alineados a la izquierda. */
.promo-banner--drop-pro .promo-banner-text,
.promo-banner--drop-premium .promo-banner-text {
  align-items: center;
  text-align: center;
}

.promo-banner--drop-pro .promo-banner-text .cta-button,
.promo-banner--drop-premium .promo-banner-text .cta-button {
  align-self: center;
}

/* Mismo criterio que .banner-content .cta-button (el hero), por pedido
   explícito — amarillo con texto oscuro en reposo, fondo oscuro y texto
   blanco en hover. */
.promo-cta {
  background: #f8cc4d;
  color: #482f1c;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.promo-cta:hover {
  background: #482f1c;
  color: #fff;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.promo-banner-image {
  width: 50%;
  background-size: cover;
  background-position: center;
}

.promo-banner--spring .promo-banner-image {
  background-image: url('../assets/index/promo-spring.jpg');
}

.promo-banner--summer .promo-banner-image {
  background-image: url('../assets/index/promo-summer.jpg');
}

/* Fila de 3 banners de promociones (mismo componente .promo-banner, tamaño distinto) */
.promo-banners--triple {
  flex-wrap: nowrap;
}

.promo-banners--triple .promo-banner {
  width: 400px;
  height: 250px;
}

.promo-banner--occasions .promo-banner-image {
  background-image: url('../assets/index/promo-occasions.jpg');
}

.promo-banner--drop-pro .promo-banner-image {
  background-image: url('../assets/index/promo-niche.jpg');
}

.promo-banner--drop-premium .promo-banner-image {
  background-image: url('../assets/index/promo-4x3.jpg');
}

/* 768px, no 900px — con 900px cualquier ancho de tablet horizontal entre
   ~769-900px (muy común en tablets reales) alcanzaba a meter solo 2 de los 3
   banners de 400px en la fila y el tercero quedaba solo, abajo (wrap roto a
   la mitad). Bajando el corte a 768px (mismo límite tablet-vertical/mobile
   que el resto del sitio), toda la franja horizontal de tablet se queda en
   una sola fila — los 400px se achican parejo (flex-shrink) en vez de
   envolver mal. */
@media (max-width: 768px) {
  .promo-banners--triple {
    flex-wrap: wrap;
  }
}

/* En ese mismo rango de tablet horizontal (769-1024px) los 400px fijos se
   achican parejo a ~220-300px de ancho — a esa altura fija de 250px el texto
   ya no entra (se corta el botón CTA, tapado por overflow:hidden). Altura
   automática + texto un toque más chico solo en este rango, para que el
   banner crezca con el contenido en vez de recortarlo; el desktop (400px de
   ancho real, 250px ya le sobra) queda intacto. */
@media (min-width: 769px) and (max-width: 1024px) {
  .promo-banners--triple .promo-banner {
    height: auto;
    min-height: 200px;
  }

  .promo-banners--triple .promo-banner-text h3 {
    font-size: 1rem;
  }

  .promo-banners--triple .promo-banner-text p {
    font-size: 0.78rem;
  }

  /* El botón CTA (align-self:flex-end, ancho natural ~130px) no entraba en la
     columna de texto ya angosta en este rango — se recortaba contra el borde
     izquierdo del banner (overflow:hidden). Con max-width:100% pasa a envolver
     en 2 líneas en vez de desbordarse, y el padding/tamaño más chico reduce
     las chances de que haga falta. */
  .promo-banners--triple .promo-banner-text .cta-button {
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
  }
}

/* 1025-1296px (p. ej. el monitor vertical de 1080x1920): los 3 banners de 400px se achican a ~305-395px
   y con 250px de alto fijo el texto se montaba sobre el botón, que además se partía en 3 líneas
   (pedido 2026-10-11). Alto automático (mínimo 250px) y los tres iguales (stretch), columna de texto
   más ancha (58%), letra un poco más chica y el botón ocupando todo el ancho de su columna. */
@media (min-width: 1025px) and (max-width: 1296px) {
  .promo-banners--triple {
    align-items: stretch;
  }

  .promo-banners--triple .promo-banner {
    height: auto;
    min-height: 250px;
  }

  .promo-banners--triple .promo-banner-text {
    width: 58%;
    padding: 1rem;
  }

  .promo-banners--triple .promo-banner-image {
    width: 42%;
  }

  .promo-banners--triple .promo-banner-text h3 {
    font-size: 1.05rem;
  }

  .promo-banners--triple .promo-banner-text p {
    font-size: 0.8rem;
  }

  .promo-banners--triple .promo-banner-text .cta-button {
    align-self: stretch;
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .promo-banner {
    height: auto;
    /* column-reverse (no column): la imagen queda arriba y el bloque negro
       con el texto abajo, por pedido explícito — el orden en el HTML sigue
       siendo texto-luego-imagen (así el <h3> es el primer texto del banner,
       mejor para lectores de pantalla / SEO), solo el orden visual cambia. */
    flex-direction: column-reverse;
  }

  .promo-banner-text,
  .promo-banner-image {
    width: 100%;
  }

  .promo-banner-text {
    min-height: 140px;
  }

  .promo-banner-image {
    height: 110px;
  }
}

/* Los 3 banners del home (3 Decants / Drop Exclusivo / Drop Premium) en celular, más chicos
   (pedido 2026-10-13: "reducí los tamaños de los 3 banners"). Antes 342x250px cada uno: foto de
   ~105px + bloque negro de 140px mínimo, y el alto fijo de 250px de la regla de
   .promo-banners--triple pisaba al "alto automático" de arriba (por eso achicar el contenido no
   alcanzaba). Ahora alto automático: foto de 64px, bloque de texto sin alto mínimo y con menos
   padding, título y texto un poco más chicos, botón de 0.55rem de padding (~37px, sigue cómodo de
   tocar) y 12px entre banners (eran 24px): ~175px cada uno, un tercio menos. Se mantiene la foto
   arriba y el texto abajo (column-reverse, pedido explícito anterior). De 601px para arriba no se
   toca. Los de Primavera/Verano (más abajo en la página) tampoco. */
@media (max-width: 600px) {
  .promo-banners--triple {
    gap: 0.75rem;
  }

  .promo-banners--triple .promo-banner {
    height: auto;
  }

  .promo-banners--triple .promo-banner-image {
    height: 64px;
  }

  .promo-banners--triple .promo-banner-text {
    min-height: 0;
    padding: 0.65rem 0.9rem 0.75rem;
  }

  .promo-banners--triple .promo-banner-text h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
  }

  .promo-banners--triple .promo-banner-text p {
    font-size: 0.78rem;
  }

  .promo-banners--triple .promo-banner-text .cta-button {
    margin-top: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ==================== HOME: VIDEOS (educativos / reviews) ==================== */
.video-section {
  padding: 2rem 1.5rem;
}

.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* PDP: cada video (Review/Unboxing) lleva su propio título arriba — el wrapper
   pasa a ser el ítem flex de .video-grid, el placeholder solo llena el resto. */
.pdp-video-item {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pdp-video-item h3 {
  margin: 0;
  font-size: 1.05rem;
}

.pdp-video-item .video-placeholder {
  flex: 1 1 auto;
}

.pdp-videos-section {
  margin-top: 3rem;
}

.video-placeholder {
  flex: 1 1 300px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #2b2620;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.video-placeholder-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.video-placeholder p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.video-placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* ==================== HOME: EMBED DE INSTAGRAM ==================== */
/* Historial: embed en vivo (iframe oficial, siempre blanco, no se podía retocar) → card
   compacta de ícono+texto (rechazada) → 4 fotos estáticas bajadas a mano (no se actualizaban
   solas) → de vuelta al embed en vivo, por pedido explícito ("que se actualice en la web cada
   vez que se postee"): ninguna alternativa sin token de API real logra auto-actualizarse sola,
   así que se vuelve a aceptar la limitación ya conocida (fondo del iframe siempre blanco,
   ignora el tema oscuro) a cambio de datos genuinamente en vivo. `.instagram-frame-wrap` es la
   card blanca que lo enmarca — el iframe no puede heredar var(--color-card-bg). El grid propio
   del embed público de Instagram es fijo a 3 columnas (no configurable vía URL): 4 posts no
   entra en filas completas, así que initInstagramFeed() en main.js muestra 2 filas = 6 posts,
   la aproximación más cercana a "los últimos" sin cortar una fila a la mitad. */
.instagram-section {
  text-align: center;
}

.instagram-handle {
  margin: -0.5rem 0 1.25rem;
  font-weight: 600;
}

.instagram-handle a {
  color: var(--color-accent);
  text-decoration: none;
}

.instagram-frame-wrap {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.instagram-frame-wrap iframe {
  display: block;
  width: 100%;
  border: none;
}

/* ==================== HOME: MARQUESINA DE OFERTAS (debajo del header) ==================== */
/* Degradado dorado, igual en claro y oscuro — por pedido explícito, ya no
   cambia de color por tema (antes era violeta en modo oscuro). El texto
   sigue en var(--color-accent) en los dos temas, sin override propio. */
/* Sticky justo debajo del header (que ya era sticky, ver .site-header) y
   con una sombra gris oscura paralela debajo, por pedido explícito ("deja
   el header y la marquesina todo el tiempo visible, que no haga scroll, de
   bajo de la marquesina deja una sombra paralela gris oscura"). El offset
   `top` viene de --header-height, medido en vivo por syncStickyHeaderHeight()
   en cart.js (la altura del header varía por breakpoint) — 123px es el
   fallback por si el CSS pinta antes de que ese JS corra. */
.offers-marquee {
  background: #F8CC4D;
  overflow: hidden;
  padding: 0.6rem 0;
  position: sticky;
  top: var(--header-height, 123px);
  z-index: 9;
  box-shadow: 0 6px 10px -4px rgba(40, 40, 40, 0.45);
}

/* Destello barrido, por pedido explícito — mismo patrón que
   .pdp-badge-shine/.drop-plan-card--featured::after, independiente del
   scroll del texto (.offers-marquee-track). */
.offers-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: offers-marquee-shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes offers-marquee-shine {
  0% { left: -30%; }
  50% { left: 130%; }
  100% { left: 130%; }
}

.offers-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 1rem;
  animation: offers-marquee-scroll 55s linear infinite;
}

/* Popup de newsletter / Drop Package, aparece a mitad de scroll en la home
   (ver initNewsletterPopup() en main.js), fijo abajo, alterna variante por
   visita. No hay backend de newsletter ni suscripción recurrente real: el
   form de newsletter solo muestra un estado "gracias" client-side, y el CTA
   del Drop Package linkea a contacto.html en vez de un checkout inventado. */
.newsletter-popup {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(150%);
  width: min(420px, calc(100vw - 2.5rem));
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  z-index: 500;
  transition: transform 0.4s ease;
}

.newsletter-popup.is-open {
  transform: translateX(-50%) translateY(0);
}

.newsletter-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.newsletter-popup-content {
  display: none;
}

.newsletter-popup-content.is-active {
  display: block;
}

.newsletter-popup-content h3 {
  margin: 0 0 0.5rem;
  padding-right: 1.5rem;
}

.newsletter-popup-content p {
  margin: 0 0 1rem;
  color: var(--color-text);
  opacity: 0.85;
}

.newsletter-popup-content .cta-button {
  display: inline-block;
}

/* Variante Drop, por pedido explícito ("dando detalle de las 3 opciones") —
   el popup se ensancha solo mientras esta variante está activa, para poder
   mostrar las 3 tarjetas de plan sin apretarlas (ver renderNewsletterPopupPlans
   en main.js, misma data real de GET /api/plans que usa drop.html). */
.newsletter-popup--drop {
  width: min(720px, calc(100vw - 2.5rem));
}

.newsletter-popup-plans {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.newsletter-popup-plan {
  /* 150px y no 180px: con 180px las 3 tarjetas pasaban a 2+1 (la tercera sola a todo el ancho) en el
     popup de 565-650px de ancho (ventanas de 601 a ~670px); con 150px entran las 3 en una fila */
  flex: 1 1 150px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem;
  text-align: center;
  position: relative;
}

.newsletter-popup-plan--featured {
  border-color: var(--color-accent);
}

.newsletter-popup-plan-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #482f1c;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.newsletter-popup-plan h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.newsletter-popup-plan-price {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: #482f1c;
}

.newsletter-popup-plan-price span {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: 0.7;
}

.newsletter-popup-plan p.newsletter-popup-plan-desc {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.8;
}

.newsletter-popup-plans-loading,
.newsletter-popup-plans-error {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Mismo criterio que el resto de los CTA promocionales (hero/promo-cta/
   review-action-btn) — amarillo con texto oscuro en reposo,
   fondo oscuro y texto blanco en hover. */
.newsletter-popup-plans-cta {
  width: 100%;
  text-align: center;
  background: #f8cc4d;
  color: #482f1c;
}

.newsletter-popup-plans-cta:hover {
  background: #482f1c;
  color: #fff;
}

@media (max-width: 480px) {
  .newsletter-popup--drop {
    width: 100%;
  }

  .newsletter-popup-plans {
    flex-direction: column;
  }
}

/* Popup grande de Drop (1400x750, split imagen/info), por pedido explícito
   — fondo oscurecido y desenfocado (backdrop-filter: blur), tamaño fijo
   pero clamp()eado con vw/vh para no desbordar en pantallas chicas. Reusa
   .newsletter-popup-form/-input/-plans/-plan* tal cual, no hay que
   redefinir esos estilos acá. */
.drop-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.drop-popup-overlay.is-open {
  opacity: 1;
}

.drop-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(700px, 94vw);
  height: auto;
  max-height: 90vh;
  /* dvh = la parte realmente visible en celular (con la barra del navegador a la vista, 90vh se
     pasa de la pantalla); los navegadores sin dvh se quedan con la línea de arriba */
  max-height: 90dvh;
  background: var(--color-card-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: scale(0.94);
  transition: transform 0.35s ease;
}

.drop-popup-overlay.is-open .drop-popup {
  transform: scale(1);
}

.drop-popup-image {
  width: 100%;
  height: 180px;
  flex-shrink: 0;
  background-image: url('../assets/index/promo-4x3.jpg');
  background-size: cover;
  background-position: center;
}

.drop-popup-info {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem;
  overflow-y: auto;
}

.drop-popup-info h3 {
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
}

.drop-popup-info > p {
  color: var(--color-text);
  opacity: 0.85;
  margin: 0 0 1.1rem;
}

.drop-popup-info .newsletter-popup-form {
  margin-bottom: 1.25rem;
}

.drop-popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

/* Logo de Aromapuro sobre la imagen del popup (pedido 2026-10-13): el wordmark blanco de una
   línea (logotipo_linea.svg = el de logotipo.svg con el viewBox ajustado al dibujo, sin el aire de
   arriba y abajo que tiene el del header) arriba a la izquierda, alineado con el texto de abajo y
   centrado con la × de cerrar. Va sobre un degradado marrón (de la paleta #482f1c del sitio) que lo
   hace legible contra la foto clara; la mano con los viales queda sin tapar. Es decoración: el
   contenedor ya es aria-hidden y el título de abajo dice "Aromapuro Drop". */
.drop-popup-image {
  position: relative;
}

.drop-popup-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 38, 18, 0.62) 0%, rgba(60, 38, 18, 0.3) 40%, rgba(60, 38, 18, 0) 75%);
}

.drop-popup-image::after {
  content: '';
  position: absolute;
  top: 1.1rem;
  left: 2rem;
  width: 170px;
  height: 28px;
  background: url('../assets/index/SVG/logotipo_linea.svg?v=1') no-repeat left center / contain;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

/* Celular (<=600px): el popup ocupaba ~760px de los 844px de la pantalla y todavía había que
   scrollear adentro (el contenido medía ~1170px). Causa principal: las 3 tarjetas de plan,
   apiladas, medían 180px de alto cada una (~80px de contenido), porque la regla de <=480px de
   .newsletter-popup-plans (columna, pensada para el popup chico de abajo) convertía el
   "flex: 1 1 180px" de cada tarjeta (hoy 150px) en un alto base. Ahora las 3 van en una fila
   compacta y el resto se achica (imagen, título, textos, márgenes): 535px de alto en 390x844,
   sin scroll interno. */
@media (max-width: 600px) {
  .drop-popup-image {
    height: 132px;
  }

  .drop-popup-image::after {
    top: 1.3rem;
    left: 1.1rem;
    width: 138px;
    height: 23px;
  }

  .drop-popup-info {
    padding: 1.1rem 1.1rem 1.2rem;
  }

  .drop-popup-info h3 {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
  }

  .drop-popup-info > p {
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.8rem;
  }

  .drop-popup-info .newsletter-popup-form {
    margin-bottom: 0.9rem;
  }

  /* el botón del email a todo el ancho, en vez de media fila suelta debajo del campo */
  .drop-popup-info .newsletter-popup-form .cta-button {
    flex: 1 1 100%;
  }

  .drop-popup .newsletter-popup-plans {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
  }

  .drop-popup .newsletter-popup-plan {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.6rem 0.3rem;
  }

  .drop-popup .newsletter-popup-plan h4 {
    font-size: 0.8rem;
  }

  .drop-popup .newsletter-popup-plan-price {
    font-size: 0.85rem;
  }

  .drop-popup .newsletter-popup-plan-price span {
    font-size: 0.65rem;
  }

  .drop-popup .newsletter-popup-plan p.newsletter-popup-plan-desc {
    font-size: 0.68rem;
  }
}

.newsletter-popup-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.newsletter-popup-input {
  flex: 1 1 180px;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

@media (max-width: 480px) {
  .newsletter-popup {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(150%);
    border-radius: 10px 10px 0 0;
  }

  .newsletter-popup.is-open {
    transform: translateY(0);
  }
}

.offers-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes offers-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}

.offers-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  color: #482f1c;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.offers-marquee-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.offers-marquee-sep {
  flex-shrink: 0;
  color: #482f1c;
  opacity: 0.45;
  font-weight: 700;
}

/* ==================== HOME: MARCAS (banner con scroll automático) ==================== */
.brands-marquee-section {
  /* Alto fijo desde el primer render (100px = 30px de padding + 70px para el logo más alto, que mide
     69px: el tope de 60px de BRAND_LOGO_MAX_H × 1.15 de Lattafa/Afnan/Maison Alhambra, ver BRAND_LOGOS
     en main.js): el contenido se llena recién cuando llega /api/products, y si la sección crecía
     después, empujaba "Todos los productos" hacia abajo y desalineaba el ancla #productos (ver
     scroll-margin-top de .home-page #productos). */
  min-height: 100px;
  max-height: 100px;
  overflow: hidden;
  padding: 15px 0;
  box-sizing: border-box;
}

.brands-marquee-viewport {
  overflow: hidden;
  width: 100%;
}

.brands-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.5rem;
  animation: brands-marquee-scroll 30s linear infinite;
}

.brands-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes brands-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.3333%);
  }
}

.brand-marquee-item {
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  opacity: 0.5;
  white-space: nowrap;
}

/* Logos de marca (SVG negro #1d1d1b): en claro, el mismo tono apagado que los nombres en texto; en modo
   oscuro, blancos y sin el apagado, y los nombres en texto también blancos (pedidos: "en la versión
   oscura que los logos sean blancos", "pasá los nombres a blanco también"). brightness(0) deja los
   logos negros e invert(1) blancos puros, sea cual sea el color original del SVG. El tamaño
   (width/height) lo pone main.js. */
.brand-marquee-logo {
  display: block;
  flex-shrink: 0;
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-marquee-logo {
    filter: brightness(0) invert(1);
    opacity: 1;
  }

  :root:not([data-theme="light"]) .brand-marquee-item {
    color: #fff;
    opacity: 1;
  }
}

:root[data-theme="dark"] .brand-marquee-logo {
  filter: brightness(0) invert(1);
  opacity: 1;
}

:root[data-theme="dark"] .brand-marquee-item {
  color: #fff;
  opacity: 1;
}

/* Botones bajo "Reviews de perfumes": compartir video + ir al canal de YouTube.
   Mismo flex-basis/gap que .video-grid para que cada botón quede alineado
   debajo de su frame de video correspondiente, en vez de centrados como par. */
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Mismo criterio que .banner-content .cta-button/.promo-cta,
   por pedido explícito — amarillo con texto oscuro en reposo, fondo oscuro
   y texto blanco en hover. */
.review-action-btn {
  flex: 1 1 300px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f8cc4d;
  color: #482f1c;
}

.review-action-btn:hover {
  background: #482f1c;
  color: #fff;
}

.review-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==================== HOME: BARRA DE BENEFICIOS (pago / envío / seguridad) ==================== */
.benefits-bar-section {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.benefits-bar {
  display: flex;
  width: 900px;
  max-width: 100%;
  height: 300px;
  box-sizing: border-box;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
}

.benefits-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.benefits-item:not(:last-child) {
  border-right: 1px solid #d9d9d9;
}

.benefits-icon {
  color: #482f1c;
  margin-bottom: 0.75rem;
}

.benefits-icon svg {
  width: 48px;
  height: 48px;
}

.benefits-item h3 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

.benefits-item p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.75;
}

.benefits-item a {
  color: #482f1c;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
}

/* Versión oscura: ícono y link de cada beneficio en amarillo, en vez del
   marrón oscuro fijo (pensado para fondo claro) que casi no se ve sobre la
   card oscura — mismo pedido que los íconos/enlaces del header. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .benefits-icon,
  :root:not([data-theme="light"]) .benefits-item a {
    color: var(--color-accent);
  }
}

:root[data-theme="dark"] .benefits-icon,
:root[data-theme="dark"] .benefits-item a {
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .benefits-bar {
    flex-direction: column;
    height: auto;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .benefits-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 1.5rem;
  }
}

/* Modo claro: violeta muy oscuro (#220729) con texto/links en amarillo
   (color de marca), por pedido explícito — el logo (.footer-logo) queda
   igual, no fue parte de este pedido. */
.site-footer {
  background: #220729;
  color: var(--color-accent);
  padding: 2.5rem 1.5rem 1.5rem;
}

/* Versión oscura: footer negro con textos/links/íconos en amarillo, en vez
   del gris-púrpura + tostado de siempre — por pedido explícito. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer {
    background: #000000;
    color: var(--color-accent);
  }
  :root:not([data-theme="light"]) .footer-contact a,
  :root:not([data-theme="light"]) .footer-menu a,
  :root:not([data-theme="light"]) .footer-social a {
    color: var(--color-accent);
  }
}

:root[data-theme="dark"] .site-footer {
  background: #000000;
  color: var(--color-accent);
}
:root[data-theme="dark"] .footer-contact a,
:root[data-theme="dark"] .footer-menu a,
:root[data-theme="dark"] .footer-social a {
  color: var(--color-accent);
}

.footer-grid {
  display: grid;
  gap: 2rem;
  text-align: center;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-accent);
  text-decoration: none;
  opacity: 0.85;
}

.footer-contact a:hover {
  opacity: 1;
}

.footer-contact a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer-logo {
  height: 104px;
  width: auto;
  display: inline-block;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-menu a {
  color: var(--color-accent);
  text-decoration: none;
  opacity: 0.85;
}

.footer-menu a:hover {
  opacity: 1;
}

.footer-social {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .footer-social {
    justify-content: flex-start;
  }
}

.footer-social a {
  color: var(--color-accent);
  display: inline-flex;
}

.footer-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.footer-copy {
  margin: 2rem 0 0;
  text-align: center;
  opacity: 0.7;
  font-size: 0.85rem;
}

.footer-legal {
  margin: 0.35rem 0 0;
  text-align: center;
  opacity: 0.5;
  font-size: 0.78rem;
}

/* botón fijo "Llamar ahora" (.call-cta-mobile) sacado por pedido explícito —
   --mobile-bar-height queda en 0 para .floating-actions de abajo. */
:root {
  --mobile-bar-height: 0px;
}

.floating-actions {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + var(--mobile-bar-height));
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fab {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease;
}

.fab:hover {
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fab svg {
  width: 24px;
  height: 24px;
}

.whatsapp-wrap {
  position: relative;
}

.whatsapp-bubble {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-card-bg);
  color: var(--color-text);
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.whatsapp-bubble::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #fff;
}

.whatsapp-bubble.is-visible {
  opacity: 1;
}

@media (max-width: 768px) {
  .whatsapp-bubble {
    display: none;
  }
}

.fab--whatsapp {
  background: #25d366;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
}

.fab--share {
  background: var(--color-card-bg);
  color: var(--color-text);
}

/* Botón "volver arriba" — oculto hasta que se scrollea, ver
   initBackToTopButton() en main.js. */
.fab--top {
  background: var(--color-card-bg);
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fab--top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.breadcrumb {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 1.5rem;
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb .sep {
  margin: 0 0.4rem;
}

.pdp {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pdp {
    grid-template-columns: minmax(0, 420px) 1fr;
  }
}

/* Producto sin ninguna foto ni video: renderPdpGallery() oculta la galería y la ficha queda en UNA columna centrada
   (con la galería oculta, las dos columnas de arriba harían saltar cada bloque a la columna que no es). */
.pdp.pdp--no-gallery {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* .pdp-gallery-main/.pdp-info-main/.pdp-profile-card/.pdp-info-extra son los 4
   hijos directos de .pdp (ver más abajo) — sin wrapper .pdp-gallery/.pdp-info
   de por medio, por pedido explícito ("acomodá el orden en mobile"): en mobile
   (.pdp a 1 columna) quedan apilados en ese mismo orden de fuente — imagen,
   caja de compra, perfil/notas, specs — en vez del orden anterior (todo lo de
   la columna izquierda de desktop primero, precio y botón de compra recién
   después del gráfico radar). En desktop (.pdp a 2 columnas) el auto-placement
   por default de grid (fila por fila, sin grid-column/row explícito) ya los
   acomoda exactamente como antes: fila 1 = imagen | caja de compra, fila 2 =
   perfil | specs — no hace falta placement manual.
   min-width:0 en cada uno — sin esto, si algo adentro (ej. la fila de
   miniaturas o una tabla ancha) pide más ancho que su columna, esta se niega
   a encogerse y termina más ancha que su propio contenedor .pdp (desborde
   horizontal real, medido en vivo). */
.pdp-gallery-main {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  min-width: 0;
}

.pdp-info-main,
.pdp-profile-card,
.pdp-info-extra {
  min-width: 0;
}

.pdp-profile-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 0.5rem;
  box-sizing: border-box;
}

.pdp-profile-card .pdp-extra-block {
  margin-top: 1.5rem;
}

.pdp-profile-card .pdp-extra-block:first-child {
  margin-top: 0;
}

.pdp-radar-block h2 {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

.pdp-radar {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.pdp-radar svg {
  width: 100%;
  height: auto;
  display: block;
}

.pdp-radar-grid {
  fill: none;
  stroke: #9e9e9e;
  stroke-width: 1;
  opacity: 0;
  animation: pdp-radar-fade 0.5s ease-out forwards;
}

.pdp-radar-axis {
  stroke: #9e9e9e;
  stroke-width: 1;
  opacity: 0;
  animation: pdp-radar-fade 0.5s ease-out forwards;
}

.pdp-radar-label {
  fill: #6b6b6b;
  opacity: 0;
  animation: pdp-radar-fade 0.5s ease-out 0.3s forwards;
  /* el lienzo del radar es de 320 unidades de ancho (12 ejes), no 220 como antes */
  font-size: 9.5px;
  font-weight: 600;
}

.pdp-radar-caption {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text);
  opacity: 0.65;
}

.pdp-radar-shape {
  fill: #d9c5f5;
  fill-opacity: 0.3;
  stroke: #7c3aed;
  stroke-width: 2;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: pdp-radar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.pdp-radar-node {
  fill: #7c3aed;
  transform-box: fill-box;
  transform-origin: center;
  animation: pdp-radar-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Eje sin dato real para este producto (estructura estándar de 8 ejes en
   todos los productos) — hueco/gris en vez de relleno violeta, para no leerse
   como "valor real bajo" sino como "no investigado". */
.pdp-radar-node--empty {
  fill: var(--color-card-bg);
  stroke: #9e9e9e;
  stroke-width: 1.5;
}

/* Versión oscura: grilla/ejes/etiquetas en gris #9e9e9e/#6b6b6b (pensados para
   fondo claro) casi no se leían sobre la card oscura, y el polígono lila/violeta
   tampoco contrastaba bien — por pedido explícito, base y texto pasan a gris
   claro y el gráfico de datos pasa a dorado (var(--color-accent), igual que el
   resto de la marca en oscuro). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pdp-radar-grid,
  :root:not([data-theme="light"]) .pdp-radar-axis,
  :root:not([data-theme="light"]) .pdp-radar-node--empty {
    stroke: #d0d0d0;
  }
  :root:not([data-theme="light"]) .pdp-radar-label {
    fill: #d0d0d0;
  }
  :root:not([data-theme="light"]) .pdp-radar-shape {
    fill: var(--color-accent);
    stroke: var(--color-accent);
  }
  :root:not([data-theme="light"]) .pdp-radar-node {
    fill: var(--color-accent);
  }
}

:root[data-theme="dark"] .pdp-radar-grid,
:root[data-theme="dark"] .pdp-radar-axis,
:root[data-theme="dark"] .pdp-radar-node--empty {
  stroke: #d0d0d0;
}
:root[data-theme="dark"] .pdp-radar-label {
  fill: #d0d0d0;
}
:root[data-theme="dark"] .pdp-radar-shape {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
:root[data-theme="dark"] .pdp-radar-node {
  fill: var(--color-accent);
}

@keyframes pdp-radar-fade {
  to {
    opacity: 1;
  }
}

@keyframes pdp-radar-grow {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.pdp-image {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  flex: 1;
  min-width: 0;
}

.pdp-image img,
.pdp-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
}

.pdp-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}

.pdp-thumb.is-active {
  border-color: var(--color-accent);
}

.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-thumb--video {
  background: #2b2620;
  color: #fff;
}

.pdp-thumb-play {
  width: 18px;
  height: 18px;
}

/* Bug de mobile encontrado al revisar el sitio en un viewport chico: por debajo de
   los 768px de .pdp (una sola columna), la galería seguía poniendo la fila de 6
   miniaturas como columna vertical AL LADO de la imagen principal (flex-direction:row
   sin excepción arriba), achicándola mucho — el diseño original ya pedía un
   "carrusel de preview inferior", así que en mobile las miniaturas pasan a una fila
   horizontal scrolleable debajo de la imagen en vez de al costado. Va después de las
   reglas base de .pdp-thumbs/.pdp-gallery-main (misma especificidad, gana por orden). */
@media (max-width: 767px) {
  .pdp-gallery-main {
    flex-direction: column-reverse;
  }
  .pdp-thumbs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Todo un poco más chico en mobile, por pedido explícito ("que no dé la
     sensación de apretado con tanta información") — no es que sobre espacio,
     es que los tamaños pensados para desktop (columna de 420px) se sienten
     grandes/pesados apilados uno abajo del otro en una pantalla angosta. */
  .pdp {
    gap: 1.25rem;
  }

  .pdp-info-main h1 {
    font-size: 1.4rem;
  }

  .pdp-brand {
    margin: 0.5rem 0 1rem;
    font-size: 1.1rem;
  }

  .pdp-badges {
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .pdp-badge {
    width: 40px;
    height: 40px;
  }

  .pdp-badge-icon {
    width: 20px;
    height: 20px;
  }

  .pdp-price {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .pdp-profile-card {
    padding: 1rem;
  }

  /* 12 ejes con etiquetas largas necesitan más ancho que los 8 de antes (230px) */
  .pdp-radar {
    max-width: 300px;
  }

  /* el lienzo se achica ~8% en el celu: se compensa para que las etiquetas no queden en 8-9px */
  .pdp-radar-label {
    font-size: 10.3px;
  }

  .pdp-extra-block,
  .pdp-profile-card .pdp-extra-block {
    margin-top: 1.25rem;
  }

  .pdp-extra-block h2,
  .pdp-specs h2 {
    font-size: 1rem;
  }
}

.pdp-category {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0 0 0.4rem;
}

.pdp-info-main h1 {
  margin: 0 0 0.4rem;
  font-size: 1.9rem;
}

/* Favorito de la ficha: solo el corazón, en la fila de "ORIGINAL" y pegado al
   borde derecho de la fila de tamaños (el botón "100ml") — por pedido explícito,
   para que todo quede alineado. --pdp-fav-inset lo calcula alignPdpFavorite()
   en main.js (distancia entre el borde derecho de la columna y el del último
   botón de tamaño); sin ese valor el corazón queda en el borde de la columna. */
.pdp-category-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
  padding-right: var(--pdp-fav-inset, 0px);
}

.pdp-category-row .pdp-category {
  margin: 0;
}

.pdp-favorite-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  /* 3px hacia abajo: la parte de arriba del corazón queda a la altura de las
     mayúsculas de "ORIGINAL" (medido: 313.0 vs 313.3); -5px abajo para que el
     corazón, más alto que la línea de texto, no agrande la fila ni empuje el título */
  margin: 3px 0 -5px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* área de toque más grande que el ícono, sin ocupar lugar en el diseño */
.pdp-favorite-btn::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.pdp-favorite-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pdp-favorite-btn:hover {
  color: #e0245e;
}

.pdp-favorite-btn.is-active {
  color: #e0245e;
}

.pdp-favorite-btn.is-active svg {
  fill: currentColor;
}

.pdp-brand {
  margin: 0.75rem 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 1;
}

.pdp-badges {
  display: flex;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.pdp-badge {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(155deg, #f8dd7f 0%, #f0c443 30%, #c99a2e 65%, #8a5a1e 100%);
  border: 2px solid #6b4a15;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.3),
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: default;
}

.pdp-badge-icon {
  width: 28px;
  height: 28px;
  color: #6b4a00;
  position: relative;
  z-index: 1;
}

.pdp-badge-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: skewX(-20deg);
  animation: pdp-badge-shine 2.8s ease-in-out infinite;
}

.pdp-badge:nth-child(2) .pdp-badge-shine {
  animation-delay: 0.5s;
}

.pdp-badge:nth-child(3) .pdp-badge-shine {
  animation-delay: 1s;
}

@keyframes pdp-badge-shine {
  0% {
    left: -60%;
  }
  35% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

.pdp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.pdp-size-btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-weight: 600;
  transition: box-shadow 0.2s ease;
}

.pdp-size-btn:hover {
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.pdp-size-btn.is-active {
  background: var(--color-accent);
  border-color: rgba(255, 255, 255, 0.3);
  color: #482f1c;
}

.pdp-price {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.pdp-qty-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.pdp-qty-label {
  font-weight: 600;
  color: var(--color-text);
}

.pdp-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.pdp-qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.pdp-qty-btn:hover {
  background: var(--color-accent);
  color: #482f1c;
}

.pdp-qty-input {
  width: 44px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  -moz-appearance: textfield;
}

.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.pdp-cta {
  background: var(--color-accent);
  color: #482f1c;
  cursor: pointer;
  font: inherit;
}

/* Sin stock: mismo criterio que las cards del catálogo (ver .product-card.is-unavailable) —
   el botón "Agregar al carrito" queda deshabilitado (ya lo hace renderProductDetail() en
   main.js cuando el producto no tiene ningún tamaño disponible) y en gris. */
.pdp-cta:disabled {
  filter: grayscale(1);
  opacity: 0.6;
  cursor: not-allowed;
}

.pdp-cart-msg {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: #1a7a3c;
}

/* sin margin-top propio: .pdp-info-extra (su padre, ahora un ítem directo de
   .pdp) ya trae ese espacio via el gap:2rem de .pdp — tenerlo acá también
   duplicaría el espacio contra .pdp-profile-card/.pdp-info-main de arriba. */
.pdp-specs h2 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.5rem;
}

.pdp-specs h2:first-child {
  margin-top: 0;
}

.pdp-table {
  width: 100%;
  border-collapse: collapse;
}

.pdp-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.pdp-table td:first-child {
  opacity: 0.65;
  width: 40%;
}

/* ==================== PDP: notas / rendimiento / pros-contras (investigado en Fragrantica) ==================== */
.pdp-extra-block {
  margin-top: 2rem;
}

.pdp-extra-block h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.pdp-notes-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pdp-notes-row:last-child {
  margin-bottom: 0;
}

.pdp-notes-label {
  flex-shrink: 0;
  width: 80px;
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0.7;
  padding-top: 0.3rem;
}

.pdp-notes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pdp-note-chip {
  background: #e8d9ff;
  color: #4c1d75;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

/* Estructura de secciones estandarizada en las 100 páginas de producto — el
   campo puntual que falta muestra esto en vez de ocultar la sección entera. */
.pdp-note-chip--na,
.pdp-na {
  background: transparent;
  color: #9a9a9a;
  font-style: italic;
  padding: 0.3rem 0;
}

.pdp-na-placeholder {
  color: #9a9a9a;
  font-style: italic;
  font-size: 0.9rem;
  margin: 0;
  padding: 1.5rem 0;
  text-align: center;
}

.pdp-review-entry {
  padding: 0.85rem 0;
  border-top: 1px solid #e5e5e5;
}

.pdp-review-entry:first-child {
  border-top: none;
  padding-top: 0;
}

.pdp-review-entry:last-child {
  padding-bottom: 0;
}

.pdp-review-entry-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #482f1c;
  margin-bottom: 0.3rem;
}

.pdp-review-entry p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.pdp-performance-row {
  margin-bottom: 1rem;
}

.pdp-performance-row:last-child {
  margin-bottom: 0;
}

.pdp-performance-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.pdp-performance-label span:last-child {
  font-weight: 600;
  color: #482f1c;
}

.pdp-performance-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.pdp-performance-fill {
  height: 100%;
  width: 0;
  background: #7c3aed;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pdp-accords-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  box-sizing: border-box;
}

.pdp-accords {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pdp-accord-bar {
  width: 100%;
  height: 24px;
  border-radius: 12px;
  background: var(--color-border);
  overflow: hidden;
  box-sizing: border-box;
}

.pdp-accord-fill {
  height: 100%;
  width: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: visible;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* acordes de color casi blanco (lactónico, nardo, vainilla...): texto oscuro y un filete para que se vea la barra */
.pdp-accord-fill--light {
  color: #2b2b2b;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.pdp-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pdp-pros,
.pdp-cons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdp-pros li,
.pdp-cons li {
  font-size: 0.9rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.4;
}

.pdp-pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #1a7a3c;
  font-weight: 700;
}

.pdp-cons li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #c0392b;
  font-weight: 700;
}

.pdp-source {
  margin-top: 2rem;
  font-size: 0.75rem;
  opacity: 0.55;
}

.pdp-source a {
  color: inherit;
}

@media (max-width: 600px) {
  .pdp-pros-cons {
    grid-template-columns: 1fr;
  }
}

.pdp-related {
  margin-top: 3rem;
}

.pdp-related h2 {
  margin-bottom: 1rem;
}

.pdp-error {
  text-align: center;
  padding: 2rem 0;
}

/* Bug de mobile encontrado revisando el sitio: la tabla tiene 6 columnas de ancho
   fijo (incluida "Subtotal" y el botón de quitar) que nunca entran en un viewport
   chico — y como html{overflow-x:hidden} recorta cualquier desborde de la página,
   esas dos últimas columnas quedaban directamente inaccesibles en mobile (no se
   podía ver el subtotal ni tocar "Quitar"). El wrapper la deja scrollear horizontal
   sin afectar el resto de la página — mismo patrón que .table-scroll en el admin. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.cart-table th,
.cart-table td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.cart-qty-input {
  width: 4rem;
  padding: 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
}

.cart-remove-btn {
  background: none;
  border: none;
  color: #b33;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
}

.cart-remove-btn:hover {
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

.cart-summary {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* flex-basis:100% para que ocupe su propia fila arriba de total/botón, en vez
   de competir por espacio con ellos en la misma fila (ver .cart-summary/
   .cart-drawer-footer, ambos flex). Reusada también en el drawer del carrito. */
.cart-shipping-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

.cart-shipping-note.is-eligible {
  color: #1a7a3c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cart-shipping-note.is-eligible {
    color: #e879f9;
  }
}

:root[data-theme="dark"] .cart-shipping-note.is-eligible {
  color: #e879f9;
}

.cart-total {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.cta-button.is-disabled {
  opacity: 0.5;
}

/* formularios de checkout — diseño tomado de referencia del checkout de SEA (paso indicador con círculos, cards de método de pago con ícono, resumen sticky en 2 columnas), adaptado a los tokens de color de Aromapuro */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.checkout-step.is-active {
  opacity: 1;
}

.checkout-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.checkout-step.is-active .checkout-step-num {
  background: var(--color-accent);
  color: #482f1c;
}

.checkout-step-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.checkout-step-line {
  flex: 0 0 48px;
  height: 2px;
  background: var(--color-border);
}

.checkout-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.5rem;
}

.checkout-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.checkout-form label:not(.option-card) {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.checkout-form label.full-width,
.checkout-form .full-width,
.checkout-form > h3,
.checkout-form > p {
  grid-column: 1 / -1;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 400;
  transition: border-color 0.2s;
}

.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.checkout-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .checkout-form {
    grid-template-columns: 1fr;
  }
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  #order-summary {
    order: -1;
  }
}

.shipping-options,
.payment-options {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.option-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.2s, background 0.2s;
}

.option-card input {
  width: auto;
  accent-color: var(--color-accent);
}

.option-card:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(124, 58, 237, 0.06);
}

.option-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: #482f1c;
}

.option-card-icon svg {
  width: 22px;
  height: 22px;
}

.option-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.option-card-text strong {
  font-size: 0.92rem;
}

.option-card-text small {
  opacity: 0.65;
  font-weight: 400;
}

.order-summary {
  position: sticky;
  top: 130px;
}

.order-summary h2 {
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.order-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}

.order-summary-line.total {
  font-weight: 700;
  font-size: 1.15rem;
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.discount-code-row {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0.25rem;
}

.discount-code-row input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-card-bg);
  color: var(--color-text);
  text-transform: uppercase;
}

.discount-code-row button {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}

.discount-code-msg {
  font-size: 0.82rem;
  margin: 0 0 0.5rem;
  min-height: 1.1em;
}

.discount-code-msg.is-success { color: #1a7a3c; }
.discount-code-msg.is-error { color: #d61f26; }

.transfer-details {
  grid-column: 1 / -1;
  background: rgba(124, 58, 237, 0.06);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.transfer-details p {
  margin: 0.2rem 0;
}

.checkout-error {
  grid-column: 1 / -1;
  color: #d32f2f;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.checkout-confirm {
  text-align: center;
  padding: 3rem 2rem;
}

.checkout-confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #482f1c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.checkout-confirm-icon svg {
  width: 32px;
  height: 32px;
}

.checkout-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.checkout-confirm-actions .fab--whatsapp-inline {
  background: #25d366;
  color: #fff;
}

.checkout-confirm-actions .cta-button--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.checkout-confirm-actions .cta-button--outline:hover {
  box-shadow: none;
  border-color: var(--color-accent);
}

/* Opción de pago que no está disponible con el envío elegido (efectivo contra entrega: solo retiro en Villa Crespo o moto) */
.option-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* CAPTCHA invisible (Cloudflare Turnstile): solo se ve si Cloudflare necesita que la persona haga algo */
#turnstile-box {
  display: flex;
  justify-content: center;
}

#turnstile-box:not(:empty) {
  margin: 0.75rem 0;
}

/* Invitación a crear la cuenta después de comprar como invitado (checkout.html y checkout-resultado.html) */
.account-invite {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.account-invite h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.account-invite p {
  margin: 0 auto 1rem;
  max-width: 46ch;
  font-size: 0.9rem;
  opacity: 0.85;
}

.account-invite .cta-button--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.account-invite .cta-button--outline:hover {
  box-shadow: none;
  border-color: var(--color-accent);
}

.checkout-review-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.checkout-review-block {
  margin-bottom: 0;
}

.checkout-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.checkout-review-header h2 {
  font-size: 1.05rem;
  margin: 0;
}

.checkout-review-edit {
  background: none;
  border: none;
  color: #482f1c;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.checkout-review-block p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

#confirm-order-btn {
  width: 100%;
  margin-top: 1rem;
}

/* modal de login / cuenta */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay .modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-card-bg);
  border-radius: 8px;
  padding: 2rem 1.75rem;
}

/* Popup "Medios de pago" (categories-section, index.html) — reutiliza .option-card
   (checkout.html) y .payment-methods/.payment-icon (pie de página) tal cual, ninguna
   clase nueva para esas dos partes. */
.payment-methods-modal {
  max-width: 440px !important;
}

.payment-methods-modal .payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.payment-methods-modal .payment-methods {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.payment-methods-modal-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1.5rem;
}

/* Modal de login/registro dividido en dos, por pedido explícito — bodegón
   de perfumes a la izquierda, formulario a la derecha. overflow-y:auto se
   pisa a hidden acá porque ahora vive en .auth-modal-content, no en el
   .modal general (si no, la foto también scrollearía con el form). En
   mobile se oculta la foto entera y vuelve a ser el modal angosto de
   siempre — un panel de foto al lado del form no entra en una pantalla
   chica sin apretar demasiado los inputs. */
.auth-modal {
  max-width: 720px !important;
  padding: 0 !important;
  display: flex;
  overflow: hidden;
}

.auth-modal-photo {
  position: relative;
  flex: 0 0 42%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../assets/index/auth-modal-photo.webp');
  background-size: cover;
  background-position: center;
}

.auth-modal-photo-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 30px;
  filter: brightness(0) invert(1);
  transform: scale(0.4);
  transform-origin: top center;
}

.auth-modal-content {
  flex: 1;
  min-width: 0;
  padding: 2rem 1.75rem;
  overflow-y: auto;
  max-height: 90vh;
}

@media (max-width: 640px) {
  .auth-modal-photo {
    display: none;
  }
}

/* Modal de alta de suscripción sin cuenta (drop.html) — más ancho que el
   modal genérico de 380px porque suma los campos de contacto/entrega a la
   lista de puntos clave + checkbox que ya usa el modal de Mi Cuenta. */
.guest-sub-modal {
  max-width: 560px !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Formulario a dos columnas, por pedido explícito — nombre/email y teléfono/
   entrega emparejados, dirección y las dos notas de más abajo van una sola
   fila cada una porque necesitan más ancho, y todo lo que no es un campo
   propiamente dicho (lista de puntos, checkbox, botón, error) ocupa las dos
   columnas para no partirse a la mitad. */
#guest-sub-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

#guest-sub-form label {
  gap: 0.5rem;
}

#guest-sub-form input,
#guest-sub-form select {
  line-height: 1.5;
}

#guest-sub-form #guest-sub-city-other-label,
#guest-sub-form label:has(#guest-sub-delivery-notes),
#guest-sub-form .sub-terms-list,
#guest-sub-form .sub-terms-checkbox,
#guest-sub-form .cta-button,
#guest-sub-form .checkout-error {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  #guest-sub-form {
    grid-template-columns: 1fr;
  }
}

/* Banner con foto real + logo arriba del formulario, por pedido explícito
   ("agrega el logo... con un banner con imagen de 200px de alto"). El
   .modal-close queda flotando sobre la foto (mismo <button>, sin mover del
   DOM) — se fuerza a blanco acá porque la foto es oscura y el color por
   default (var(--color-text)) es casi negro en modo claro, invisible ahí. */
.guest-sub-banner {
  position: relative;
  height: 200px;
  background-image: url('../assets/index/account-banner-combo4x3.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* funde el borde inferior de la foto con el fondo blanco del contenido del
   modal (.guest-sub-content, sin color propio, hereda var(--color-card-bg)
   de .modal) — mismo criterio que .banner-slider::after en el home. */
.guest-sub-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent 0%, var(--color-card-bg) 100%);
  pointer-events: none;
}

.guest-sub-banner-logo {
  height: 52px;
  width: auto;
}

.guest-sub-modal .modal-close {
  color: #fff;
  opacity: 0.85;
}

.guest-sub-content {
  padding: 1.5rem 1.75rem 2rem;
}

.modal-overlay h2 {
  margin: 0 0 1.25rem;
  font-size: 1.3rem;
}

/* Modal de confirmación antes de crear una suscripción Drop, por pedido
   explícito — más ancho que el modal genérico de 380px porque tiene una
   lista de 5 puntos + checkbox + dos botones, no un formulario chico. */
.sub-terms-modal {
  max-width: 480px !important;
}

.sub-terms-list {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.sub-terms-checkbox {
  display: flex;
  /* !important: .auth-form label (más específico, 0,1,1 contra 0,1,0 de esta
     sola clase) fuerza flex-direction:column — sin esto el checkbox queda
     arriba del texto en vez de al lado, en cualquier formulario con class="auth-form". */
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.sub-terms-checkbox input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.sub-terms-modal .form-actions {
  display: flex;
  gap: 0.75rem;
}

.sub-terms-modal .form-actions .cta-button {
  flex: 1;
}

#sub-terms-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  opacity: 0.6;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.modal-close:hover {
  opacity: 1;
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

/* ==================== CARRITO DESPLEGABLE (drawer, todas las páginas) ==================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.cart-drawer-overlay.is-open {
  background: rgba(0, 0, 0, 0.5);
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--color-card-bg);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.cart-drawer-overlay.is-open .cart-drawer {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-drawer-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.cart-drawer-header .modal-close {
  position: static;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.cart-drawer-empty {
  text-align: center;
  opacity: 0.7;
  margin-top: 2rem;
}

.cart-drawer-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cart-drawer-item:first-child {
  padding-top: 0;
}

.cart-drawer-item-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-placeholder-bg);
  overflow: hidden;
}

.cart-drawer-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-drawer-item-info {
  flex: 1;
  min-width: 0;
}

.cart-drawer-item-name {
  margin: 0 0 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-drawer-item-size {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

.cart-drawer-item-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cart-drawer-item-qty-row .cart-qty-input {
  width: 3rem;
}

.cart-drawer-item-price {
  font-size: 0.85rem;
  font-weight: 600;
}

.cart-drawer-item-remove {
  flex-shrink: 0;
  align-self: flex-start;
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.5;
  cursor: pointer;
  padding: 0.2rem;
}

.cart-drawer-item-remove:hover {
  opacity: 1;
}

.cart-drawer-footer {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cart-drawer-checkout {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .cart-drawer {
    max-width: 100%;
  }
}






.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.auth-form input {
  padding: 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  font: inherit;
}

/* El <select> no tenía ninguna regla propia — caía en el estilo nativo del
   navegador, que no combinaba con los inputs de al lado (pedido explícito
   de "dejarlo más lindo"). appearance:none + la flecha dibujada a mano en
   el background reemplazan la flechita nativa, que desaparece junto con el
   resto del estilo por defecto. */
.auth-form select {
  padding: 0.6rem 2rem 0.6rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23482f1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 16px;
  color: var(--color-text);
  font: inherit;
  appearance: none;
  cursor: pointer;
}

.auth-form .cta-button {
  cursor: pointer;
  margin-top: 0.25rem;
}

/* Envuelve el input de contraseña para poder anclar el botón de mostrar/
   ocultar (ojo) dentro del mismo campo, sin tocar el ancho del input. */
.password-field {
  position: relative;
  display: block;
}

.password-field input {
  width: 100%;
  padding-right: 2.25rem;
  box-sizing: border-box;
}

.password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.5;
  padding: 0.2rem;
}

.password-toggle.is-active {
  opacity: 1;
}

/* Checkboxes de +18/Términos — fila horizontal en vez de la columna que
   usa .auth-form label por default (name/email/etc.), porque acá el
   checkbox va antes del texto, no arriba de un input. */
.auth-checkbox-label {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.5rem !important;
  font-size: 0.8rem !important;
  line-height: 1.4;
}

.auth-checkbox-label input {
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.auth-link {
  font-size: 0.85rem;
  text-align: center;
  margin: 0.75rem 0 0;
}

.auth-link a {
  color: #482f1c;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.auth-social {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.auth-social-btn {
  padding: 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-social-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 14px rgba(248, 204, 77, 0.6);
}

/* ==================== MOBILE: CARDS A 190px ====================
   Al final del archivo a propósito: tiene que pisar .product-thumb,
   .product-name, .size-label, etc., que están definidas más arriba sin media
   query — un media query definido ANTES en el archivo pierde contra una
   regla sin media query de igual especificidad definida DESPUÉS (ya pasó
   este mismo bug con el header y con las cajas blancas de tablet).
   Por pedido explícito ("deja el ancho de las cards en 190"): las cards
   pasan del ancho base de 230px (tablet/desktop) a 190px fijo en mobile,
   en las 3 secciones carrusel y en "Todos los productos" por igual. El
   thumb (209x209 en la base) se reescala a 100% del contenido de la card
   (190px - 2×0.6rem de padding ≈ 171px) para que no desborde. */
@media (max-width: 768px) {
  /* 10px de margen real a los costados en todos los contenedores que se ven
     arriba del fondo (header, secciones blancas/con borde, "todos los
     productos") — antes tocaban el borde de la pantalla con solo el padding
     interno, sin ningún margen visible contra el fondo. */
  .container,
  .products-section--wide,
  .categories-section {
    max-width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #productos {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* 25px de aire a los costados de las cards — por pedido explícito, tanto
     entre una card y la otra como contra el borde del carrusel/grilla. */
  .product-grid,
  .categories-slider {
    gap: 25px;
    padding: 25px 25px 10px;
  }

  /* Categorías/Beneficios (las cards justo después del hero): gap reducido
     a 15px, por pedido explícito — distinto del resto de los carruseles,
     que se quedan en 25px. Update 2026-10-13 (pedido: "se ven grandes aún...
     que no se corte la segunda card, mínimo 2 completas" + "achica el alto"):
     gap de 10px y sin aire a los costados (las cards arrancan alineadas con
     el buscador del header); el aire de ARRIBA (25px) NO se toca: con la
     sección y su margen de -125px, el primer renglón de cards queda 68px por
     encima del borde inferior del hero, que es lo que el alto del hero de
     mobile deja libre para el texto. El de abajo sí bajó (pedido "achicá ese
     espacio de abajo"): de 90px entre las cards y el primer banner a 24px
     (padding de la sección 32 -> 8px, margen de 24 -> 0, padding del slider
     10 -> 4px, y el padding de arriba de los 3 banners 24 -> 12px). */
  .categories-slider {
    gap: 10px;
    padding: 25px 0 4px;
  }

  body.home-page main > section.categories-section {
    padding-bottom: 0.5rem;
    margin-bottom: 0;
  }

  .promo-banners--triple {
    padding-top: 0.75rem;
  }

  /* "Visto recientemente": gap a 15px, por pedido explícito (8 cards ahora
     en vez de 4 — ver initVistoRecientementeSection en main.js). "Lo querés"
     fue removida del home por pedido explícito. "Porque te interesa" no se
     tocó, se queda en 25px con sus 4 de siempre. */
  #visto-recientemente-grid {
    gap: 15px;
  }

  /* altura automática, no un número fijo: el texto (pills de tamaño, nombre
     en 2 líneas) varía más de lo que un alto fijo puede prever sin recortar
     contenido — ya pasó (el precio quedaba tapado por overflow:hidden). */
  .product-card,
  .category-card {
    height: auto;
  }

  /* Carruseles de productos (Visto recientemente/Porque te interesa) a 190px
     fijo, scrolleables horizontal. */
  .product-grid:not(#product-grid) .product-card {
    width: 190px;
  }

  /* Cards de Categorías/Beneficios compactas (2026-10-13): antes 190x340px, y
     en un celular de 390px entraba la primera y la segunda quedaba cortada a
     la mitad. Ahora el ancho sale del espacio disponible — (ancho de la pista
     − 2 gaps de 10px − 18px de la tercera asomándose) / 2, entre 124px y
     160px — así en cualquier celular se ven 2 cards COMPLETAS y un borde de
     la 3ra que avisa que se desliza (154px a 390px, 139px a 360px; a 320px el
     mínimo de 124px deja asomar solo 8px); el alto baja de 340px a ~190-230px
     según el ancho (textos y botón más chicos, ícono de 28px; el alto sigue
     siendo el de la card más larga, "Medios de pago" / "Decants de 5ml…").
     Segunda vuelta, mismo día (pedido: "un poquito más de altura a las cards
     que quedaron algo apretadas"): padding vertical 0.6 -> 0.85rem, aire entre
     bloques 0.4 -> 0.75rem (card) y 0.3 -> 0.45rem (cuerpo), ícono 26 -> 28px,
     interlineado del texto 1.28 -> 1.35 y botón 0.45 -> 0.6rem de padding
     (+~25px de alto: 182 -> 207px a 390px). */
  .categories-slider .category-card {
    width: clamp(124px, calc((100% - 38px) / 2), 160px);
    padding: 0.85rem 0.55rem;
    gap: 0.75rem;
  }

  .categories-slider .category-card-body {
    gap: 0.45rem;
  }

  .categories-slider .category-icon svg {
    width: 28px;
    height: 28px;
  }

  .categories-slider .category-card h3 {
    font-size: 0.86rem;
    line-height: 1.2;
  }

  .categories-slider .category-card p {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .categories-slider .category-link {
    padding: 0.6rem 0.35rem;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  /* "Todos los productos": 160px por card, gap de 18px (por pedido
     explícito). 160×2+18gap=338px > ~329px de contenedor — desborda 9px
     (4.5px por lado), invisible en la práctica porque queda contenido
     dentro del padding blanco de la sección, no llega al fondo gris. */
  #product-grid {
    grid-template-columns: repeat(2, 160px);
    justify-content: center;
    gap: 18px;
    width: 100%;
  }

  #product-grid .product-card {
    width: 160px;
  }

  /* thumb cuadrado vía aspect-ratio (no una altura fija en px) para que se
     adapte solo tanto al ancho fijo de 190px de los carruseles como al
     ancho variable de las 2 columnas de #product-grid. */
  .product-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Paginación en una sola línea sin wrap — a 14/página con 100 productos
     son 10 botones (‹ + 8 páginas + ›); achicados para que entren todos
     sin pasar a una segunda fila. */
  .product-pagination {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .pagination-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 0.3rem;
    font-size: 0.75rem;
  }

  /* banner hero: texto 10% más chico en mobile, por pedido explícito */
  .banner-content h1,
  .banner-content h2 {
    font-size: 1.71rem;
  }

  .banner-content p {
    font-size: 0.9rem;
  }

  /* puntos del slider más chicos y más abajo — medido en vivo: se superponían
     con el botón "Ver catálogo de decants" (-12px de solape), no con las
     cards de abajo (esas tenían 47px de aire de sobra). Bajados otros 15px
     más por pedido explícito. */
  .banner-dot {
    width: 0.4rem;
    height: 0.4rem;
  }

  .banner-dots {
    bottom: calc(1.25rem + 70px);
  }

  /* flechas prev/next del hero ocultas en mobile — por pedido explícito, se
     superponían con el texto centrado (quedan a 1rem del borde, y en un
     viewport angosto el bloque de texto llega casi hasta ahí). Escopado solo
     al hero (.banner-slider) — el carrusel publicitario usa .banner-arrow
     para sus zonas de click invisibles, que sí deben seguir funcionando en
     mobile. */
  .banner-slider .banner-arrow {
    display: none;
  }
}

/* ==================== COMPARAR PERFUMES ==================== */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  max-width: calc(100% - 2rem);
}

.compare-bar-count {
  font-weight: 700;
  color: #482f1c;
  flex-shrink: 0;
}

.compare-bar-label {
  font-size: 0.85rem;
  opacity: 0.8;
  white-space: nowrap;
}

.compare-bar .cta-button {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.compare-bar-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.modal-overlay .compare-modal {
  max-width: 700px;
  text-align: left;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table td {
  vertical-align: top;
  padding: 0.75rem;
  text-align: center;
  border: 1px solid var(--color-border);
  width: 33.33%;
}

.compare-col {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.compare-img {
  width: 100%;
  max-width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 0.5rem;
  display: block;
}

.compare-brand {
  opacity: 0.7;
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

.compare-price {
  font-weight: 700;
  margin: 0.25rem 0;
}

.compare-remove {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.compare-remove:hover {
  border-color: var(--color-accent);
  color: #482f1c;
}

@media (max-width: 600px) {
  .compare-bar-label {
    display: none;
  }
}

/* mobile: se saca la flecha prev/next de los carruseles (categorías y los 3
   de productos) — en un celular se navegan deslizando con el dedo, la flecha
   era redundante — y las cards quedan centradas en el espacio que la flecha
   dejaba libre. */
@media (max-width: 768px) {
  .categories-arrow,
  .product-arrow {
    display: none;
  }

  .categories-slider-wrap,
  .product-grid-wrap {
    justify-content: center;
  }
}

/* ==================== Drop (suscripción mensual) ==================== */
/* Landing (drop.html) + tab "Mi Suscripción" en mi-cuenta.html — mismo tema
   morado/tarjetas del resto del sitio, sin paleta ni tipografía nuevas. */

.drop-hero {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
}

.drop-hero h1 {
  margin-bottom: 0.75rem;
}

.drop-hero-sub {
  max-width: 46ch;
  margin: 0 auto 1.5rem;
  color: var(--color-text);
  opacity: 0.85;
}

.drop-benefits-section,
.drop-pricing-section {
  padding: 1.5rem;
}

.drop-benefits-section h2,
.drop-pricing-section h2,
.drop-faq-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Rectángulo blanco fijo (no theme-aware, mismo criterio que
   .pdp-profile-card/.pdp-accords-card) por pedido explícito — por eso el
   texto de adentro necesita su propio color en modo oscuro en vez de
   heredar var(--color-text) (que ahí adentro sería gris claro sobre blanco,
   casi ilegible; ver el override más abajo). */
.drop-benefits-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
}

.drop-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.drop-benefit {
  text-align: center;
  padding: 1rem;
}

.drop-benefit svg {
  width: 32px;
  height: 32px;
  color: #482f1c;
  margin-bottom: 0.5rem;
}

.drop-benefit h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: #2b2620;
}

.drop-benefit p {
  font-size: 0.85rem;
  color: #2b2620;
  opacity: 0.8;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drop-benefit h3,
  :root:not([data-theme="light"]) .drop-benefit p {
    color: #482f1c;
  }
}

:root[data-theme="dark"] .drop-benefit h3,
:root[data-theme="dark"] .drop-benefit p {
  color: #482f1c;
}

.drop-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.drop-plan-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* Glow pulsante + destello barrido, por pedido explícito ("linea purpura
   destacada con glow y destellos") — mismo patrón de franja diagonal que
   .pdp-badge-shine, adaptado a un card entero en vez de un badge de 35px.
   El glow ahora es amarillo/dorado (--color-accent) y más grande, por pedido
   explícito ("el resplandor de la card que sea amarillo y sea mas grande") —
   mismo valor en claro y oscuro, ya no necesita override por tema. El
   destello (::after) lleva skewX(-20deg), igual que .pdp-badge-shine/
   .header-shipping-cta span::after — antes solo el ángulo del gradiente lo
   hacía "diagonal" puertas adentro de la franja, pero la franja en sí barría
   recta; con el skew la franja entera queda inclinada. */
.drop-plan-card--featured {
  --drop-glow-rgb: 248, 204, 77;
  border: 2px solid var(--color-accent);
  position: relative;
  overflow: hidden;
  animation: drop-plan-glow 2.4s ease-in-out infinite;
}

@keyframes drop-plan-glow {
  0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--drop-glow-rgb), 0.4); }
  50% { box-shadow: 0 0 44px 10px rgba(var(--drop-glow-rgb), 0.85); }
}

.drop-plan-card--featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: drop-plan-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes drop-plan-shine {
  0% { left: -60%; }
  45% { left: 130%; }
  100% { left: 130%; }
}

.drop-plan-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #482f1c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin: 0 auto 0.75rem;
}

.drop-plan-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.drop-plan-price {
  font-size: 1.9rem;
  font-weight: 700;
  color: #482f1c;
  margin: 0.25rem 0;
}

.drop-plan-price span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  opacity: 0.7;
}

.drop-plan-desc {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0.5rem 0 1.25rem;
}

/* flex-grow acá (no en .drop-plan-desc) para que sea la lista de beneficios
   la que absorbe el espacio libre y empuja el CTA al fondo de la card,
   alineado entre las 3 tarjetas aunque tengan distinta cantidad de texto. */
.drop-plan-benefits {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.4;
  flex-grow: 1;
}

.drop-plan-benefits li {
  padding-left: 1.35rem;
  position: relative;
}

.drop-plan-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.drop-note {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 1.5rem;
}

/* Medios de pago aceptados, por pedido explícito — texto plano en vez de
   logos de las marcas (mismo criterio que la marquesina de marcas: son
   marcas de terceros, no hay assets propios ni licencia para reproducir
   sus isotipos, así que se listan por nombre, no con su logo). */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.payment-methods-label {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-right: 0.25rem;
}

/* Logos reales de las tarjetas — por pedido explícito, sin el texto "Mercado
   Pago" al lado (el ícono ya lo representa). Fondo blanco fijo: son
   isotipos a color pensados para fondo claro, ilegibles sobre una card
   oscura en modo oscuro sin este parche. */
.payment-icon {
  height: 36px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  box-sizing: border-box;
}

.drop-cta-final {
  text-align: center;
  padding: 2rem 1.5rem;
}

.drop-cta-final p {
  margin-top: 1rem;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .drop-benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .drop-pricing {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Tab "Mi Suscripción" (mi-cuenta.html) */

.sub-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sub-summary-item {
  background: var(--color-bg-alt, var(--color-card-bg));
  border-radius: 8px;
  padding: 1rem;
}

.sub-summary-item strong {
  display: block;
  margin-bottom: 0.35rem;
}

.sub-status-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.4rem;
}

.sub-status-badge--active { background: #d4edda; color: #155724; }
.sub-status-badge--paused { background: #fff3cd; color: #856404; }
.sub-status-badge--pending { background: #d9c5f5; color: #4c1d75; }
.sub-status-badge--cancelled { background: #f8d7da; color: #721c24; }

.sub-plan-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}

.sub-plan-option {
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem;
  text-align: center;
  cursor: pointer;
  background: none;
  color: var(--color-text);
  font-family: inherit;
}

.sub-plan-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-bg-alt, transparent);
}

.sub-plan-option strong {
  display: block;
  font-size: 0.9rem;
}

.sub-plan-option span {
  font-size: 0.8rem;
  opacity: 0.75;
}

.sub-boxes-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sub-box-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .sub-summary,
  .sub-plan-picker {
    grid-template-columns: 1fr;
  }
}

/* Toggle on/off de la suscripción (activa/pausada) + botón cancelar al lado
   — por pedido explícito, reemplaza los dos bloques separados que había
   antes (pausar con selector de meses / reanudar). Mismo lenguaje visual
   que .theme-toggle del header (track + knob), pero en tamaño más grande y
   con colores propios del tema en vez de blanco fijo, ya que este vive
   sobre una card clara/oscura según el tema, no sobre la barra violeta. */
.sub-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.sub-toggle-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sub-toggle-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.sub-toggle {
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sub-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sub-toggle-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.sub-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.sub-toggle[aria-checked="true"] .sub-toggle-track {
  background: #2fae5c;
}

.sub-toggle[aria-checked="true"] .sub-toggle-knob {
  transform: translateX(20px);
}

/* Dropdown de "Mi cuenta" en el header, solo cuando hay sesión (ver
   updateHeaderAccountUI en auth.js) — inyectado por JS, mismo criterio que el
   modal de login/el cart drawer: un único punto de inyección, no duplicar
   markup en las 13 páginas que llevan el header. */

.header-account-actions {
  position: relative;
}

#my-account-link.has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

#my-account-link.has-dropdown svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

#my-account-link.has-dropdown[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.account-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 200px;
  overflow: hidden;
  z-index: 200;
}

.account-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.account-dropdown-item:hover {
  background: var(--color-bg-alt, rgba(124, 58, 237, 0.08));
}

.account-dropdown-item--danger {
  color: #d33;
  border-top: 1px solid var(--color-border);
}

/* Animaciones de entrada al hacer scroll, por pedido explícito ("anima las
   entradas de los elementos de toda la página, y más elementos en
   movimiento"). initScrollReveal() en main.js observa cada .reveal/
   .reveal-group vía IntersectionObserver y agrega .is-revealed la primera
   vez que entra en viewport (una sola vez — no se re-oculta al scrollear
   hacia arriba, es una entrada, no un toggle). .reveal-group es para
   contenedores cuyos hijos (.reveal-item) tienen que entrar en cascada, no
   todos juntos — el stagger se logra con transition-delay por nth-child,
   pura CSS, sin JS por elemento. */
.reveal,
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* La marquesina de marcas y "Todos los productos" entran solo con fundido, sin
   el desplazamiento de 28px: son el destino del ancla #productos, y el
   navegador alinea el ancla según la posición de la sección EN ESE INSTANTE de
   la animación, así que según cuándo se disparaba el observador el contenedor
   quedaba 28px más arriba o más abajo (bug reportado: contenedor cortado). */
.brands-marquee-section.reveal,
.home-page #productos.reveal {
  transform: none;
}

.reveal-group .reveal-item {
  transition-delay: 0s;
}

.reveal-group.is-revealed .reveal-item {
  opacity: 1;
  transform: none;
}

.reveal-group.is-revealed .reveal-item:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-revealed .reveal-item:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-revealed .reveal-item:nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-revealed .reveal-item:nth-child(5) { transition-delay: 0.32s; }
.reveal-group.is-revealed .reveal-item:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Pestañas de Mi Cuenta — reemplaza el reuso indebido de .checkout-steps
   (esa clase es para el indicador numerado del checkout, no traía ningún
   estilo real acá porque nunca llevaba la clase .checkout-step por hijo).
   Subrayado en el activo, mismo lenguaje que .header-nav-links. */
.account-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

.account-tab {
  padding: 0.75rem 0.25rem;
  margin-right: 1.25rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  opacity: 0.55;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
}

.account-tab:hover {
  opacity: 0.85;
}

.account-tab.is-active {
  opacity: 1;
  color: #482f1c;
  border-bottom-color: var(--color-accent);
}

/* Sub-bloques dentro de "Mi Suscripción" (cambiar plan / pausar) — un poco
   de aire y una línea divisoria para que no se lean pegados al bloque de
   arriba. */
.account-subsection {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Carrusel de banners de campaña arriba de Mi Cuenta, por pedido explícito
   ("los banners eran como carrusel, que estén centrados y que pase uno a
   uno") — antes era una fila de 3 cards fijas; ahora es un slide-a-la-vez
   (reusa initBannerSlider() de main.js, ya cargado en esta página, mismo
   motor que el hero) a 1000x100px, centrado con
   margin:0 auto. Reusan las promos reales que ya existen (combo armado,
   4x3, 10% efectivo) — no se inventa ninguna oferta que no exista de
   verdad. **Dividido en dos mitades, por corrección explícita** ("tiene que
   estar dividido, fondo negro textos blanco y botón, en la otra mitad una
   imagen") — mismo criterio que .promo-banner (texto+CTA de un lado, foto
   del otro), solo que las dos mitades usan flex:1 1 50% (no flex-shrink:0)
   para poder achicarse juntas sin que el contenido del texto (que no
   puede shrinkear más allá de su ancho) empuje el slide entero más ancho
   que el 100% que le pide .account-banner-track — eso rompía el carrusel
   en mobile (dos slides se veían pisados a la vez, ver .account-banner-slide
   min-width:0 abajo, mismo motivo). */
.account-banner-slider {
  position: relative;
  width: 1000px;
  max-width: 100%;
  height: 100px;
  margin: 0 auto 1.5rem;
  /* pisa el "section { padding: 1.5rem; }" genérico del sitio — mismo
     problema que tuvo el slider publicitario de la home (ya eliminado), sin esto el borde queda 24px
     corrido para adentro en cada lado y el track no llena la caja. */
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #F8CC4D;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.account-banner-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

.account-banner-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  background: #000;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Texto y botón uno al lado del otro (fila), no apilados — por corrección
   explícita. .account-banner-text agrupa h3+p así puede seguir shrinkeando
   como bloque (min-width:0) mientras el botón, al lado, no se achica
   (flex-shrink:0, mismo criterio que .account-banner-image). */
.account-banner-content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  box-sizing: border-box;
}

.account-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  /* 25px a la derecha, por pedido explícito */
  margin-left: 25px;
}

.account-banner-content h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-banner-content p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.3;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-banner-cta {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.account-banner-image {
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Fotos propias para este carrusel (no las que ya usa el home), por pedido
   explícito ("busca en el stock... imágenes que encajen en las medidas de
   los banner") — las del home (promo-occasions/4x3/niche.jpg) quedaban
   recortadas de forma rara al tener que cubrir una franja de 1000x100 tan
   corta, pensadas para otro aspecto. Stock libre (Magnific/Freepik, sin
   costo de licencia), similar estética luxury/perfume a lo que ya había. */
.account-banner-slide--occasions .account-banner-image {
  background-image: url('../assets/index/account-banner-occasions.jpg');
}

.account-banner-slide--cash .account-banner-image {
  background-image: url('../assets/index/account-banner-cash.jpg');
}

.account-banner-slider .banner-arrow {
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
}

.account-banner-slider .banner-arrow--prev {
  left: 0.5rem;
}

.account-banner-slider .banner-arrow--next {
  right: 0.5rem;
}

/* Puntos fuera de la caja del banner (abajo, no superpuestos a la imagen) y
   en gris oscuro — por corrección explícita. .account-banner-slider tiene
   overflow:hidden (recorta la imagen de fondo), así que iban movidos fuera
   del <section> en el HTML en vez de solo cambiar bottom/top, que hubiera
   quedado recortado igual. El id pisa la posición absoluta que trae
   .banner-dots por default (pensada para ir flotando sobre una imagen). */
#account-banner-dots {
  position: static;
  transform: none;
  justify-content: center;
  margin: 0.6rem 0 0;
}

#account-banner-dots .banner-dot {
  background: rgba(74, 67, 86, 0.3);
}

#account-banner-dots .banner-dot.is-active {
  background: #4a4356;
}

@media (max-width: 480px) {
  /* A este ancho la mitad de texto mide ~170px — texto+botón en fila (como
     en desktop/tablet) no entra sin superponerse a la flecha izquierda, así
     que acá se apilan (columna) en vez de ir uno al lado del otro; ver
     .account-banner-content más arriba para la versión en fila por
     default. padding-left deja lugar a la flecha (ya sin círculo, pero
     sigue ocupando esa franja como zona de click). */
  .account-banner-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem 0.4rem 2.25rem;
  }

  .account-banner-content h3 {
    font-size: 0.85rem;
  }

  .account-banner-text {
    margin-left: 0;
  }

  .account-banner-content p {
    display: none;
  }

  .account-banner-cta {
    padding: 0.32rem 0.6rem;
    font-size: 0.68rem;
  }
}