/* ==========================================================================
   DECANT ODYSSEY · Sistema de diseño
   --------------------------------------------------------------------------
   Orden del archivo:
     1. Tokens          2. Base           3. Tipografía
     4. Botones         5. Navegación     6. Hero
     7. Secciones       8. Catálogo       9. Kits
    10. Carrito        11. Modales       12. Pie
    13. Animación      14. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* Sistema claro del hero: papel, tinta y un acento pastel lima suave. */
    --primary: #171815;
    --primary-dark: #171815;
    --primary-light: #171815;
    --primary-glow: transparent;
    --oro-metal: #cde3b4;
    --acento: #cde3b4;

    --bg-main: #f4f0e7;
    --bg-elevado: #faf8f3;
    --bg-light: #ece7dc;
    --bg-surface: #faf8f3;
    --bg-card: #faf8f3;

    --text-main: #171815;
    --text-muted: #3a3b36;
    --text-tenue: #5a5b53;

    --border-color: rgba(23, 24, 21, .22);
    --border-subtle: rgba(23, 24, 21, .12);

    --font-heading: 'Instrument Sans', system-ui, sans-serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --font-script: 'Newsreader', Georgia, serif;

    --t-hero: clamp(2.5rem, 1.8rem + 4.2vw, 5.8rem);
    --t-h2: clamp(2.4rem, 1.2rem + 4vw, 4.6rem);
    --t-h3: clamp(1.2rem, 1.05rem + .7vw, 1.7rem);
    --t-body: clamp(.96rem, .92rem + .18vw, 1.06rem);
    --t-small: .86rem;

    --sp-seccion: clamp(4.5rem, 2.8rem + 7vw, 9.5rem);
    --ancho: 1280px;
    --gutter: clamp(1.15rem, .6rem + 2vw, 2.5rem);
    --radio: 6px;
    --radio-sm: 4px;
    --radio-lg: 6px;

    --transition: all .35s cubic-bezier(.16, 1, .3, 1);
    --ease-suave: cubic-bezier(.16, 1, .3, 1);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 20px 50px rgba(23, 24, 21, .12);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background-color: #f4f0e7;
}

/* La barra de navegación es fija: sin este margen, al saltar desde el menú el
   título de la sección queda escondido detrás de ella. */
:target,
section[id],
#dynamic-collections-container {
    scroll-margin-top: 92px;
}

body {
    background-color: #f4f0e7;
    background: #f4f0e7 radial-gradient(circle at 50% 0%, #f4f0e7 0%, #f4f0e7 100%) no-repeat fixed;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body.sin-scroll { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--acento); color: #171815; }

.container {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Enlace de salto para quien navega con teclado */
.saltar-contenido {
    position: absolute;
    left: -9999px;
    z-index: 2000;
    padding: 14px 22px;
    border-radius: 0 0 var(--radio-sm) 0;
    background: var(--primary);
    color: #171815;
    font-weight: 700;
}
.saltar-contenido:focus { left: 0; top: 0; }

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Grano de película: le saca el aspecto de degradado plano al fondo. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.seccion-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.seccion-etiqueta::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--primary);
    opacity: .5;
}

.section-title,
.titulo-seccion {
    font-size: var(--t-h2);
    margin-bottom: 18px;
}

.section-subtitle,
.subtitulo-seccion {
    max-width: 58ch;
    color: var(--text-muted);
    font-size: var(--t-body);
    text-wrap: pretty;
}

.texto-oro {
    background: var(--oro-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cursiva-lujo {
    font-family: var(--font-script);
    font-style: normal;
    font-weight: 600;
    font-size: 1.12em;
    letter-spacing: .02em;
    display: inline-block;
}

.text-muted { color: var(--text-muted); }

/* ==========================================================================
   4. BOTONES
   ========================================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}

.btn-primary {
    background: var(--oro-metal);
    color: #171815;
    box-shadow: 0 8px 26px rgba(23, 24, 21, 0.154);
}

/* Barrido de brillo al pasar el mouse */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .65s var(--ease-suave);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(23, 24, 21, 0.238);
}
.btn-primary:hover::after { left: 115%; }

.btn-outline {
    border: 1px solid var(--border-color);
    background: rgba(221, 218, 212, 0.85);
    color: var(--primary-light);
}

.btn-outline:hover {
    border-color: var(--primary);
    background: rgba(23, 24, 21, 0.126);
    transform: translateY(-2px);
}

.btn-green {
    /* Verde oscuro: el texto blanco necesita contraste 4.5:1 (WCAG AA). */
    background: linear-gradient(135deg, #0F7A3F, #0A5C2F);
    color: #fff;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .25);
}
.btn-green:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0) scale(.985); }

/* ==========================================================================
   5. NAVEGACIÓN
   ========================================================================== */

.navbar-black {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    padding: 20px 0;
    transition: padding .4s var(--ease-suave), background .4s, border-color .4s;
    border-bottom: 1px solid transparent;
}

.navbar-black.compacta {
    padding: 11px 0;
    background: rgba(250, 248, 243, 0.82);
    border-bottom-color: var(--border-subtle);
    backdrop-filter: blur(20px) saturate(160%);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo-container { display: flex; flex-direction: column; line-height: 1; }

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.logo-sub {
    margin-top: 3px;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: .53rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.nav-links-centered { display: flex; gap: 34px; }

.nav-links-centered a {
    position: relative;
    padding: 4px 0;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 600;
    transition: color .3s;
}

.nav-links-centered a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--ease-suave);
}

.nav-links-centered a:hover { color: var(--text-main); }
.nav-links-centered a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-right { display: flex; align-items: center; gap: 18px; }

.nav-icons { display: flex; align-items: center; gap: 16px; }

.nav-icons .material-symbols-outlined {
    color: var(--text-main);
    font-size: 23px;
    cursor: pointer;
    transition: color .25s, transform .25s;
}
.nav-icons .material-symbols-outlined:hover { color: var(--primary); transform: translateY(-2px); }

.nav-cart-wrap { position: relative; }

#cart-badge {
    position: absolute;
    top: -6px; right: -9px;
    display: grid;
    place-items: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--primary);
    color: #171815;
    font-size: .66rem;
    font-weight: 800;
}

/* Hamburguesa */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 26px;
    cursor: pointer;
}

.hamburger span {
    height: 2px;
    border-radius: 2px;
    background: var(--text-main);
    transition: var(--transition);
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 890;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(250, 248, 243, 0.97);
    backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease-suave);
}

#mobile-menu.active { opacity: 1; pointer-events: auto; }

.mobile-link {
    padding: 13px 20px;
    font-family: var(--font-heading);
    font-size: 2rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s var(--ease-suave), transform .5s var(--ease-suave), color .25s;
}

#mobile-menu.active .mobile-link { opacity: 1; transform: none; }
.mobile-link:hover { color: var(--primary); }

#mobile-menu.active .mobile-link:nth-child(1) { transition-delay: .06s; }
#mobile-menu.active .mobile-link:nth-child(2) { transition-delay: .12s; }
#mobile-menu.active .mobile-link:nth-child(3) { transition-delay: .18s; }
#mobile-menu.active .mobile-link:nth-child(4) { transition-delay: .24s; }
#mobile-menu.active .mobile-link:nth-child(5) { transition-delay: .30s; }
#mobile-menu.active .mobile-link:nth-child(6) { transition-delay: .36s; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

/* El alto y el canvas los define .escena, en la sección 15. */

/* Viñeta: oscurece los bordes para que el texto blanco siempre se lea. */
.hero-velo {
    position: absolute;
    inset: 0;
    background: radial-gradient(45% 72% at 76% 48%, rgba(23, 24, 21, 0.084), transparent 70%),
        linear-gradient(96deg, rgba(250, 248, 243, 0.97) 0%, rgba(250, 248, 243, 0.86) 34%, rgba(250, 248, 243, 0.28) 64%, rgba(250, 248, 243, 0.54) 100%),
        linear-gradient(180deg, rgba(250, 248, 243, 0.88) 0%, transparent 21%, transparent 68%, rgba(250, 248, 243, 0.96) 100%);
    transition: opacity .4s linear;
}

/* Capa de partículas aromáticas (tsParticles): entre el canvas de la
   secuencia y el velo, para leerse como si salieran del frasco. */
.hero-particulas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-contenido {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-block: 104px 15vh;   /* deja libre la barra y una pista de la sección siguiente */
    max-width: min(720px, 58vw);
    margin-inline: 0;
}

.hero-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 18px;
    padding: 7px 13px;
    border: 1px solid rgba(23, 24, 21, 0.196);
    border-radius: 6px;
    color: var(--primary-light);
    background: rgba(250, 248, 243, 0.36);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    opacity: 0;
    animation: aparecer .9s var(--ease-suave) .26s forwards;
}

#hero-title {
    font-size: var(--t-hero);
    font-weight: 300;
    letter-spacing: -.01em;
    max-width: min(100%, 14ch);
    text-transform: uppercase;
}

#hero-title .linea { display: block; overflow: hidden; }

#hero-title .palabra {
    display: inline-block;
    transform: translateY(105%);
    animation: subir .95s var(--ease-suave) forwards;
}

#hero-title .palabra:nth-child(2) { animation-delay: .07s; }
#hero-title .palabra:nth-child(3) { animation-delay: .14s; }
#hero-title .palabra:nth-child(4) { animation-delay: .21s; }

@keyframes subir { to { transform: none; } }

#hero-subtitle {
    max-width: 46ch;
    margin: 26px 0 34px;
    color: var(--text-muted);
    font-size: clamp(1rem, .95rem + .35vw, 1.16rem);
    text-wrap: pretty;
    opacity: 0;
    animation: aparecer .9s var(--ease-suave) .45s forwards;
}

.hero-product-card {
    position: absolute;
    right: clamp(1rem, 3vw, 3rem);
    bottom: clamp(1.2rem, 5vh, 4rem);
    z-index: 3;
    width: min(310px, 28vw);
    padding: 18px 20px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio-sm);
    background: rgba(250, 248, 243, 0.46);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px);
    animation: flotar-card 5.5s ease-in-out infinite;
}

.hero-product-card span,
.hero-product-card small {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-product-card strong {
    display: block;
    margin: 4px 0;
    color: var(--primary-light);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
    font-weight: 500;
}

@keyframes flotar-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes aparecer { to { opacity: 1; } }

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    opacity: 0;
    animation: aparecer .9s var(--ease-suave) .62s forwards;
}

/* Los cuatro puntos de valor */
.hero-valor {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid var(--border-subtle);
    opacity: 0;
    animation: aparecer .9s var(--ease-suave) .8s forwards;
}

.hero-valor li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
}

.hero-valor svg { flex: 0 0 auto; color: var(--primary); }

/* ==========================================================================
   7. SECCIONES
   ========================================================================== */

.section,
.seccion {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-seccion);
    background: var(--bg-main);
}

.bg-light { background: var(--bg-light); }

.section-title { text-align: center; }
.section-subtitle { margin-inline: auto; text-align: center; }

.seccion-cabecera { margin-bottom: clamp(2.6rem, 1.5rem + 3vw, 4.4rem); }
.seccion-cabecera.centrada { text-align: center; }
.seccion-cabecera.centrada .seccion-etiqueta { justify-content: center; }
.seccion-cabecera.centrada .subtitulo-seccion { margin-inline: auto; }

/* --- Recorrido editorial --- */

.olfactory-journey {
    position: relative;
    z-index: 2;
    padding-block: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);
    background: linear-gradient(180deg, #dcd9d2 0%, #dddad3 50%, #f4f0e7 100%);
    box-shadow: inset 0 1px 0 rgba(23, 24, 21, 0.105);
}

.journey-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 1rem + 5vw, 5rem);
    align-items: end;
}

.journey-copy {
    position: sticky;
    top: 118px;
    align-self: start;
}

.journey-steps {
    display: grid;
    gap: 16px;
}

.journey-step {
    position: relative;
    min-height: 190px;
    padding: 30px;
    border: 1px solid rgba(23, 24, 21, 0.196);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, #dddad4 0%, #f4f0e7 100%);
    box-shadow: 0 12px 36px rgba(23, 24, 21, 0.072), inset 0 1px 0 rgba(23, 24, 21, 0.084);
    overflow: hidden;
    transition: var(--transition);
}

.journey-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(23, 24, 21, 0.105), transparent);
    transform: translateX(-110%);
    transition: transform .8s var(--ease-suave);
}

.journey-step:hover {
    border-color: var(--primary);
    box-shadow: 0 16px 44px rgba(23, 24, 21, 0.154), inset 0 1px 0 rgba(23, 24, 21, 0.21);
    transform: translateX(8px);
}

.journey-step:hover::before { transform: translateX(110%); }

.journey-step span {
    display: block;
    margin-bottom: 36px;
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 1.5rem + 4vw, 5.2rem);
    line-height: .8;
    opacity: .95;
    text-shadow: 0 0 24px rgba(23, 24, 21, 0.28);
}

.journey-step h3 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem);
    color: var(--text-main);
}

.journey-step p {
    max-width: 44ch;
    color: var(--text-muted);
    font-size: .92rem;
}

/* --- Selección destacada --- */

.featured-fragrances {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-seccion);
    background: radial-gradient(70% 70% at 50% 0%, rgba(23, 24, 21, 0.084), transparent 60%),
        #f4f0e7;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.featured-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(260px, 36vw) auto;
    border: 1px solid rgba(23, 24, 21, 0.175);
    border-radius: var(--radio-sm);
    background: linear-gradient(180deg, #faf8f3 0%, #faf8f3 100%);
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.06);
    overflow: hidden;
    transition: var(--transition);
}

.featured-card:hover {
    border-color: var(--primary);
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(23, 24, 21, 0.084), 0 0 25px rgba(23, 24, 21, 0.126);
}

.featured-media {
    display: grid;
    place-items: center;
    min-height: 0;
    background: radial-gradient(circle at 50% 38%, rgba(23, 24, 21, 0.154), transparent 60%),
        linear-gradient(160deg, #dddad5, #faf8f3);
    cursor: pointer;
    overflow: hidden;
}

.featured-media img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 26px 50px rgba(23, 24, 21, 0.086));
    transition: transform .8s var(--ease-suave);
}

.featured-card:hover .featured-media img { transform: scale(1.08) rotate(-1deg); }

.featured-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.featured-info > span {
    color: var(--primary);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.featured-info h3 {
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0;
}

.featured-info p {
    color: var(--text-muted);
    font-size: .86rem;
}

.featured-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 12px;
}

.featured-notes b {
    padding: 5px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--primary-light);
    font-size: .72rem;
    font-weight: 700;
}

.featured-info .btn {
    width: 100%;
    margin-top: auto;
    padding-inline: 12px;
}

/* --- Marquesina de marcas --- */

.marquesina {
    position: relative;
    z-index: 2;
    padding: 30px 0;
    border-block: 1px solid rgba(23, 24, 21, 0.14);
    background: #f4f0e7;
    overflow: hidden;
    /* Se desvanece en los bordes en vez de cortarse de golpe */
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquesina-pista {
    display: flex;
    gap: 68px;
    width: max-content;
    animation: desplazar 42s linear infinite;
}

.marquesina:hover .marquesina-pista { animation-play-state: paused; }

@keyframes desplazar { to { transform: translateX(-50%); } }

.marquesina-item {
    color: var(--text-tenue);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: .1em;
    white-space: nowrap;
    transition: color .3s;
}

.marquesina-item:hover { color: var(--primary); }

/* --- Anatomía: el decant explicado por capas --- */

.anatomia { background: #f4f0e7; }

.anatomia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: start;
}

.anatomia-visual {
    position: sticky;
    top: 14vh;
    display: grid;
    place-items: center;
    /* Las fotos de producto son verticales; un marco cuadrado las recortaba. */
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border-color);
    border-radius: var(--radio);
    background: #ddd9d2;
    overflow: hidden;
    /* Para que el giro 3D sutil de la foto se sienta real y no un achatado. */
    perspective: 1600px;
}

/* La foto llena el marco por completo: es la "cámara" que se aleja del
   frasco al bajar y vuelve a acercarse al subir (ver @supports más abajo). */
.anatomia-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Punto aproximado del frasco en la foto: el zoom gira alrededor de ahí. */
    transform-origin: 78% 50%;
    transform: scale(1.55);
    filter: drop-shadow(0 30px 60px rgba(23, 24, 21, 0.096));
    transition: transform .6s var(--ease-suave);
}

/* Rótulos sobre la foto: decorativos nada más. La lista completa y accesible
   de notas vive en las tarjetas de al lado (por eso llevan aria-hidden). */
.nota-flotante {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(221, 217, 210, .55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--text-main);
    font-size: clamp(.7rem, .64rem + .28vw, .82rem);
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(.92);
}

.nota-flotante strong {
    font-family: var(--font-heading);
    font-size: .7em;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
}

.nota-flotante.chip-activa { opacity: 1; transform: none; }

/* Posiciones verificadas contra la foto real revelada: cítricos y lavanda
   abajo a la izquierda, flores blancas a la derecha, maderas y vainilla
   abajo a la derecha (ver assets/productos/Lattafa Fakhar Pride.webp). */
.nota-flotante--top   { bottom: 7%; left: 6%; }
.nota-flotante--heart { top: 43%; right: 5%; text-align: right; }
.nota-flotante--heart strong { align-self: flex-end; }
.nota-flotante--base  { bottom: 7%; right: 6%; text-align: right; }
.nota-flotante--base strong { align-self: flex-end; }

.anatomia-fuente {
    margin-top: 22px;
    text-align: center;
    font-size: .82rem;
}

.anatomia-capas { display: flex; flex-direction: column; gap: 14px; }

.capa {
    position: relative;
    padding: 28px 30px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio);
    background: linear-gradient(135deg, #dddad4, #faf8f3);
    box-shadow: 0 8px 24px rgba(23, 24, 21, 0.048);
    cursor: pointer;
    transition: var(--transition);
}

.capa:hover { border-color: var(--border-color); }

.capa.activa {
    border-color: var(--primary);
    background: linear-gradient(135deg, #dddbd5, #f4f0e7);
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.072), 0 0 30px rgba(23, 24, 21, 0.105);
}

.capa-num {
    display: block;
    margin-bottom: 9px;
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .2em;
}

.capa h3 { font-size: var(--t-h3); margin-bottom: 9px; }
.capa p { color: var(--text-muted); font-size: .93rem; }

.capa-notas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease-suave), margin-top .5s var(--ease-suave);
}

.capa.activa .capa-notas { max-height: 160px; margin-top: 16px; }

.capa-nota {
    padding: 5px 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--primary-light);
    font-size: .76rem;
    font-weight: 600;
}

/* --- Promociones --- */

.promos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 20px;
}

.promo-card {
    position: relative;
    padding: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radio);
    background: linear-gradient(150deg, #dddad4, #dcd9d2);
    box-shadow: 0 12px 36px rgba(23, 24, 21, 0.06);
    overflow: hidden;
}

.promo-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.promo-icon { font-size: 1.7rem; }
.promo-card-header h3 { font-size: var(--t-h3); }

.promo-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }

.promo-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: rgba(23, 24, 21, 0.042);
    font-size: .8rem;
    font-weight: 600;
}

.promo-tag span {
    color: var(--primary);
    font-weight: 800;
}

.promo-subtext { color: var(--text-tenue); font-size: .76rem; }

.promo-highlight {
    margin-bottom: 18px;
    color: var(--text-main);
    font-size: 1rem;
}
.promo-highlight strong { color: var(--primary); }

.promo-cuotas { display: flex; flex-direction: column; gap: 9px; }

.cuota-item {
    padding: 11px 15px;
    border-left: 2px solid var(--primary);
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
    background: #faf8f3;
    font-size: .85rem;
}

/* --- Envío gratis: cinta fija --- */

.cinta-envio {
    position: relative;
    z-index: 2;
    padding: 15px 0;
    background: var(--oro-metal);
    color: #171815;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
}

/* --- Proceso / showcase --- */

.showcase-dark {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-seccion);
    background: #f4f0e7;
    overflow: hidden;
}

.showcase-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.showcase-tag {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.showcase-text h2 { font-size: var(--t-h2); margin-bottom: 20px; }
.showcase-text > p { max-width: 54ch; color: var(--text-muted); }

.showcase-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 34px 0;
}

.showcase-feat-item { display: flex; gap: 15px; }
.showcase-feat-item .feat-icon { flex: 0 0 auto; font-size: 1.5rem; }
.showcase-feat-item strong { display: block; margin-bottom: 4px; }
.showcase-feat-item p { color: var(--text-muted); font-size: .88rem; }

.showcase-spec-card {
    position: relative;
    padding: 42px 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radio);
    background: linear-gradient(165deg, #dddad4, #faf8f3);
    box-shadow: 0 16px 40px rgba(23, 24, 21, 0.072);
    overflow: hidden;
}

.spec-card-glow {
    position: absolute;
    top: -40%; right: -25%;
    width: 300px; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-glow), transparent 68%);
    filter: blur(50px);
}

.spec-header { position: relative; margin-bottom: 30px; }

.card-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--primary);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
}

.spec-header h3 { font-size: 1.9rem; }
.spec-tagline { color: var(--text-muted); font-size: .88rem; }

.spec-list { position: relative; display: flex; flex-direction: column; gap: 22px; }
.spec-item { display: flex; gap: 17px; }

.spec-num {
    flex: 0 0 auto;
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    opacity: .55;
}

.spec-item h4 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.spec-item p { color: var(--text-muted); font-size: .85rem; }

/* --- Beneficios --- */

.benefits-section {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-seccion);
    background: #f4f0e7;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px;
    margin-top: 52px;
}

.benefit-card {
    padding: 38px 30px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
    box-shadow: 0 8px 24px rgba(23, 24, 21, 0.048);
    text-align: center;
    transition: var(--transition);
}

.benefit-card:hover {
    border-color: var(--border-color);
    background: linear-gradient(135deg, #dddbd5, #f4f0e7);
    box-shadow: 0 12px 32px rgba(23, 24, 21, 0.072), 0 0 24px rgba(23, 24, 21, 0.084);
    transform: translateY(-5px);
}

.benefit-icon { display: block; margin-bottom: 18px; font-size: 2.2rem; }
.benefit-title { font-size: 1.2rem; margin-bottom: 10px; }
.benefit-desc { color: var(--text-muted); font-size: .9rem; }

/* --- Reseñas --- */

.community-reviews {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-seccion);
    background: #f4f0e7;
    text-align: center;
}

.reviews-estrellas {
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 1.5rem;
    letter-spacing: .35em;
}

.reviews-grid {
    display: flex;
    gap: 18px;
    margin-top: 46px;
    padding-bottom: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-dark) transparent;
}

.reviews-grid::-webkit-scrollbar { height: 5px; }
.reviews-grid::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 3px; }

.review-card {
    flex: 0 0 275px;
    padding: 30px 26px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
    box-shadow: 0 8px 24px rgba(23, 24, 21, 0.048);
    scroll-snap-align: center;
    text-align: left;
    transition: var(--transition);
}

.review-card:hover {
    border-color: var(--border-color);
    box-shadow: 0 12px 30px rgba(23, 24, 21, 0.072), 0 0 20px rgba(23, 24, 21, 0.084);
    transform: translateY(-4px);
}
.review-card .estrellas { color: var(--primary); font-size: .95rem; letter-spacing: .12em; }
.review-card h4 { font-family: var(--font-body); font-size: .98rem; font-weight: 700; margin: 12px 0 8px; }
.review-card p { color: var(--text-muted); font-size: .87rem; margin-bottom: 16px; }

.review-autor {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
    font-weight: 700;
}

.review-inicial {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--oro-metal);
    color: #171815;
    font-size: .8rem;
}

/* --- FAQ --- */

.faq-section {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-seccion);
    background: #f4f0e7;
}

.faq-accordion {
    max-width: 800px;
    margin: 52px auto 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.faq-item {
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
    box-shadow: 0 6px 20px rgba(23, 24, 21, 0.042);
    overflow: hidden;
    transition: border-color .3s, background .3s;
}

.faq-item.active { border-color: var(--border-color); background: rgba(23, 24, 21, 0.028); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 21px 26px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s;
}

.faq-question:hover { color: var(--primary); }

.faq-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--primary);
    font-size: 1.05rem;
    transition: transform .35s var(--ease-suave);
}

.faq-item.active .faq-icon { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    padding-inline: 26px;
    overflow: hidden;
    transition: max-height .45s var(--ease-suave), padding-bottom .45s var(--ease-suave);
}

.faq-item.active .faq-answer { max-height: 420px; padding-bottom: 24px; }
.faq-answer p { color: var(--text-muted); font-size: .92rem; }

.faq-contact { margin-top: 48px; text-align: center; }
.faq-contact p { margin-bottom: 16px; color: var(--text-muted); }

/* ==========================================================================
   8. CATÁLOGO
   ========================================================================== */

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}

#category-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 230px;
    padding: 44px 26px;
    border: 1px solid rgba(23, 24, 21, 0.175);
    border-radius: var(--radio);
    background: linear-gradient(160deg, #faf8f3 0%, #faf8f3 100%);
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.06);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}

/* Brillo que barre la tarjeta al pasar el mouse */
.category-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -70%;
    width: 55%;
    background: linear-gradient(90deg, transparent, rgba(23, 24, 21, 0.084), transparent);
    transform: skewX(-18deg);
    transition: left .8s var(--ease-suave);
}

.category-card:hover {
    border-color: var(--primary);
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(23, 24, 21, 0.066), 0 0 40px rgba(23, 24, 21, 0.07);
}
.category-card:hover::after { left: 120%; }

.category-card .cat-icono { font-size: 2.6rem; }
.category-card h3 { font-size: 1.45rem; }

.category-card .cat-cantidad {
    color: var(--primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#category-title {
    margin-bottom: 30px;
    font-size: var(--t-h2);
    text-align: center;
}

.categoria-volver { margin-bottom: 30px; text-align: center; }
.categoria-volver-pie { margin-top: 44px; text-align: center; }

/* --- Tarjeta de producto --- */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio);
    background: linear-gradient(180deg, #dddad4 0%, #faf8f3 100%);
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.06);
    overflow: hidden;
    transition: var(--transition);
}

.product-card:hover {
    border-color: var(--primary);
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(23, 24, 21, 0.084), 0 0 24px rgba(23, 24, 21, 0.105);
}

.product-image {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 38%, rgba(23, 24, 21, 0.112), transparent 65%), linear-gradient(180deg, #dddad5, #f4f0e7);
    cursor: pointer;
    overflow: hidden;
}

.perfume-img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 12%;
    transition: transform .7s var(--ease-suave);
}

.product-card:hover .perfume-img { transform: scale(1.09); }

.product-image-placeholder { font-size: 2.6rem; opacity: .35; }

.product-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 18px 20px;
}

.product-info h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.product-marca {
    color: var(--text-muted);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-precio {
    margin: 9px 0 15px;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.product-precio small {
    color: var(--text-tenue);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
}

.product-info .btn { width: 100%; padding: 12px; font-size: .82rem; }

/* Insignias sobre la foto */
.product-badge-slot {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
}

.scarcity-badge {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

/* Cada estado de stock tiene su color. Antes venían escritos dentro de app.js
   con fondos claros heredados de un tema blanco y se veían como parches. */
/* Los fondos van casi opacos: la insignia se apoya sobre la foto del producto,
   que puede ser clara, y con transparencia alta perdia contraste. */
.scarcity-badge.es-agotado   { border-color: rgba(23, 24, 21, .25); background: rgba(250, 248, 243, .95); color: #171815; }
.scarcity-badge.es-urgente   { border-color: #eedcd2; background: rgba(250, 248, 243, .95); color: #171815; }
.scarcity-badge.es-pocas     { border-color: #9a4a00; background: rgba(250, 248, 243, .95); color: #9a4a00; }
.scarcity-badge.es-tendencia { border-color: #dee0e6; background: rgba(250, 248, 243, .95); color: #171815; }
.scarcity-badge.es-nuevo     { border-color: #171815; background: var(--acento); color: #171815; }
.scarcity-badge.es-favorito  { border-color: #171815; background: rgba(250, 248, 243, .95); color: #171815; }

/* En el modal la insignia va suelta, no encima de la foto. */
.modal-info .scarcity-badge { margin: 14px 0 4px; }

/* Rellenos cuando el perfume no tiene foto */
.gradient-silver { background: linear-gradient(140deg, #dddad4, #dedcd8); }
.gradient-gold   { background: linear-gradient(140deg, #e1ddd2, #7d6528); }
.gradient-black  { background: linear-gradient(140deg, #dcd9d1, #dddad4); }
.gradient-red    { background: linear-gradient(140deg, #e1dad2, #e8dcd4); }
.placeholder-img { width: 100%; aspect-ratio: 1; border-radius: var(--radio-sm); }

/* ==========================================================================
   9. KITS
   ========================================================================== */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
}

/* app.js lo restaura con display:flex, por eso no se usa grid aca. */
#package-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

#package-categories > .package-card { flex: 1 1 290px; }

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 34px;
    border: 1px solid rgba(23, 24, 21, 0.175);
    border-radius: var(--radio);
    background: linear-gradient(165deg, #faf8f3, #faf8f3);
    box-shadow: 0 12px 36px rgba(23, 24, 21, 0.06);
    overflow: hidden;
    transition: var(--transition);
}

.package-card:hover { border-color: var(--border-color); transform: translateY(-6px); }

/* Los kits tienen que destacarse siempre: borde de oro que respira */
.package-card.highlight-pack,
.package-card.popular {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(23, 24, 21, 0.07), 0 22px 60px rgba(23, 24, 21, 0.066);
}

.package-card.highlight-pack::before,
.package-card.popular::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--oro-metal);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    animation: respirar 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes respirar {
    0%, 100% { opacity: .35; }
    50%      { opacity: .9; }
}

.package-card h3 { font-size: 1.65rem; }

.package-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 18px 0;
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 2.3rem;
    font-weight: 600;
}

.package-precio-viejo {
    color: var(--text-tenue);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 400;
    text-decoration: line-through;
}

.package-nota-envio {
    color: #1e6b34;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
}

.package-card > p { margin-bottom: 26px; color: var(--text-muted); font-size: .9rem; }
.package-card .btn { margin-top: auto; width: 100%; }

.popular-badge {
    position: absolute;
    top: 18px; right: 18px;
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--oro-metal);
    color: #171815;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.packages-volver { margin-bottom: 30px; text-align: center; }

/* ==========================================================================
   10. CARRITO
   ========================================================================== */

#cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 980;
    background: rgba(23, 24, 21, 0.084);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

#cart-overlay.active { opacity: 1; pointer-events: auto; }

#cart-sidebar {
    position: fixed;
    top: 0; right: 0;
    z-index: 990;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    height: 100dvh;
    border-left: 1px solid var(--border-color);
    background: var(--bg-elevado);
    box-shadow: -20px 0 60px rgba(23, 24, 21, 0.072);
    transform: translateX(100%);
    transition: transform .45s var(--ease-suave);
}

#cart-sidebar.active { transform: none; }

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 26px;
    border-bottom: 1px solid var(--border-subtle);
}

.cart-header h3 { font-size: 1.5rem; }

.close-cart {
    color: var(--text-muted);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: color .25s;
}
.close-cart:hover { color: var(--primary); }

#cart-items-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 22px 26px;
    overflow-y: auto;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
}

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info strong { display: block; font-size: .92rem; }
.cart-item-info small { color: var(--text-muted); font-size: .76rem; }
.cart-item-price { color: var(--primary); font-weight: 700; font-size: .92rem; }

.remove-item {
    color: var(--text-tenue);
    font-size: 1.15rem;
    cursor: pointer;
    transition: color .25s;
}
.remove-item:hover { color: #f87171; }

.cart-vacio { margin: auto; color: var(--text-muted); text-align: center; }
.cart-vacio span { display: block; margin-bottom: 12px; font-size: 2.6rem; opacity: .35; }

.cart-footer {
    padding: 22px 26px calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
    background: rgba(23, 24, 21, 0.036);
}

.cart-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: .88rem;
}

.cart-linea.envio { color: #1e6b34; font-weight: 700; }

#cart-footer-discount { color: var(--primary); font-weight: 700; }

/* --- Modalidad de Entrega en Carrito (Envío vs Pick Up Groot) --- */
.delivery-selector-wrap {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(23, 24, 21, 0.16);
}
.delivery-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 8px;
}
.delivery-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 440px) {
    .delivery-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.delivery-option-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1.5px solid rgba(23, 24, 21, 0.18);
    border-radius: var(--radio-sm);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.delivery-option-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.delivery-option-btn:hover {
    border-color: var(--primary);
    background: rgba(23, 24, 21, 0.02);
}
.delivery-option-btn.active {
    border-color: var(--primary);
    background: rgba(23, 24, 21, 0.05);
    box-shadow: 0 2px 8px rgba(23, 24, 21, 0.08);
}
.delivery-opt-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}
.delivery-opt-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.delivery-opt-text strong {
    font-size: 0.74rem;
    color: var(--text-color);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.delivery-opt-text small {
    font-size: 0.64rem;
    color: var(--text-muted);
    line-height: 1.1;
}
.delivery-discount-badge {
    position: absolute;
    top: -8px;
    right: 4px;
    background: #1e6b34;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(30, 107, 52, 0.25);
}
.pickup-info-card {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fdfcf9;
    border: 1px solid rgba(23, 24, 21, 0.14);
    border-left: 3px solid #1e6b34;
    border-radius: 6px;
    animation: fadeInSlide 0.25s ease-out;
}
.pickup-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.pickup-card-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #1e6b34;
    letter-spacing: 0.06em;
}
.pickup-card-title {
    font-size: 0.85rem;
    color: var(--text-color);
}
.pickup-card-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: #4a4b44;
    line-height: 1.35;
}
.pickup-card-details p {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.pickup-savings-pill {
    margin-top: 8px;
    padding: 5px 8px;
    background: rgba(30, 107, 52, 0.09);
    color: #165629;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    text-align: center;
}
.footer-btn-arrepentimiento {
    display: inline-block;
    padding: 4px 10px;
    margin-top: 4px;
    background: #171815;
    color: var(--acento) !important;
    border-radius: 4px;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}
.footer-btn-arrepentimiento:hover {
    background: #000;
    transform: translateY(-1px);
    text-decoration: none;
}

.cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 16px 0 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.cart-total span { font-size: .88rem; color: var(--text-muted); }

#cart-total-price {
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
}

#checkout-btn { width: 100%; }

.cart-cierre {
    margin-top: 14px;
    color: var(--primary);
    font-family: 'Newsreader', serif; font-style: italic;
    font-size: 1.35rem;
    text-align: center;
}

/* Botón flotante del carrito */
#floating-cart-btn {
    position: fixed;
    right: 20px; bottom: 22px;
    z-index: 940;
    display: none;            /* app.js lo pasa a flex al agregar el primer producto */
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--oro-metal);
    color: #171815;
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.06), 0 0 26px var(--primary-glow);
    cursor: pointer;
    transition: transform .25s;
}

#floating-cart-btn:hover { transform: scale(1.07); }

#floating-cart-badge {
    position: absolute;
    top: -3px; right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 21px; height: 21px;
    border: 2px solid var(--bg-main);
    border-radius: 6px;
    background: #DC2626;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.pulse-animation { animation: pulso 1.1s ease-out 3; }

@keyframes pulso {
    0%   { box-shadow: 0 0 0 0 var(--primary-glow); }
    70%  { box-shadow: 0 0 0 18px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   11. MODALES
   ========================================================================== */

/* app.js los muestra con style.display = "block", asi que el centrado no
   puede depender de grid: se resuelve con margen automatico en el contenido. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 970;
    display: none;
    padding: var(--gutter);
    background: rgba(23, 24, 21, 0.094);
    backdrop-filter: blur(9px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-content {
    margin: clamp(1rem, 6vh, 5rem) auto;
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 90dvh;
    padding: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radio);
    background: var(--bg-elevado);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    animation: modal-entra .4s var(--ease-suave);
}

@keyframes modal-entra {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
}

.close-modal {
    position: absolute;
    top: 16px; right: 20px;
    z-index: 3;
    color: var(--text-muted);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color .25s, transform .25s;
}
.close-modal:hover { color: var(--primary); transform: rotate(90deg); }

.modal-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.modal-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radio);
    background: radial-gradient(circle at 50% 40%, rgba(23, 24, 21, 0.084), transparent 65%);
    overflow: hidden;
}

.modal-image .perfume-img { padding: 9%; }

.modal-brand {
    color: var(--primary);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.modal-info h2 { font-size: 2.1rem; margin: 8px 0 14px; }
.modal-info > p { color: var(--text-muted); font-size: .94rem; }

.pyramid-block {
    margin: 26px 0;
    padding: 22px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
}

.pyramid-block h4 {
    margin-bottom: 15px;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.pyramid-levels { display: flex; flex-direction: column; gap: 13px; }

.pyramid-nivel { display: flex; gap: 14px; align-items: baseline; }

.pyramid-nivel dt {
    flex: 0 0 76px;
    color: var(--text-tenue);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pyramid-nivel dd { font-size: .9rem; }

.info-block {
    margin-bottom: 22px;
    padding: 15px 18px;
    border-left: 2px solid var(--primary);
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
    background: rgba(23, 24, 21, 0.042);
    font-size: .88rem;
}

/* --- Píldora de Inspiración en Tarjetas de Catálogo --- */
.product-inspiracion-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 3px;
    padding: 3px 8px;
    background: rgba(125, 101, 40, 0.09);
    border: 1px solid rgba(125, 101, 40, 0.25);
    border-radius: 4px;
    color: #5c4710;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Caja de Inspiración y Por Qué es Mejor en Modal --- */
.inspiration-box {
    margin: 18px 0 22px;
    padding: 16px 18px;
    border: 1px solid rgba(125, 101, 40, 0.35);
    border-left: 4px solid var(--primary);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, rgba(245, 240, 230, 0.95), rgba(250, 248, 243, 0.98));
    box-shadow: 0 4px 15px rgba(23, 24, 21, 0.04);
}

.inspiration-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.inspiration-icon {
    font-size: 1.05rem;
}

.inspiration-text {
    margin: 0;
    color: #383933;
    font-size: 0.88rem;
    line-height: 1.5;
}

.size-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 24px 0 18px; }

.size-selector label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
    cursor: pointer;
    transition: var(--transition);
}

.size-selector label:hover { border-color: var(--border-color); }

.size-selector input { position: absolute; opacity: 0; pointer-events: none; }

.size-selector label:has(input:checked) {
    border-color: var(--primary);
    background: rgba(23, 24, 21, 0.07);
}

.size-selector .medida { font-size: .76rem; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }
.size-selector .valor { color: var(--primary); font-size: 1.15rem; font-weight: 700; }

.modal-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px 22px;
    border: 1px solid rgba(23, 24, 21, 0.14);
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, #faf8f3, #faf8f3);
}

.modal-price-box .etiqueta { color: var(--text-muted); font-size: .8rem; }

.modal-price-box .monto {
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
}

#add-to-cart-btn { width: 100%; }

/* Buscador y contacto */

#search-input {
    width: 100%;
    padding: 17px 20px;
    border: 1px solid rgba(23, 24, 21, 0.154);
    border-radius: var(--radio-sm);
    background: #dddad3;
    color: var(--text-main);
    font-size: 1.05rem;
    outline: none;
    transition: border-color .25s;
}
#search-input:focus { border-color: var(--primary); }

#search-results {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 46dvh;
    margin-top: 18px;
    overflow-y: auto;
}

.search-result-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: var(--transition);
}

.search-result-info:hover { border-color: var(--border-color); background: rgba(23, 24, 21, 0.035); }
.search-result-info img { width: 46px; height: 46px; border-radius: 6px; object-fit: contain; }
.search-result-info strong { display: block; font-size: .92rem; }
.search-result-info small { color: var(--text-muted); font-size: .78rem; }

/* Popup de bienvenida */

#welcome-popup {
    position: fixed;
    inset: 0;
    z-index: 975;
    display: none;
    padding: var(--gutter);
    background: rgba(23, 24, 21, 0.096);
    backdrop-filter: blur(9px);
    overflow-y: auto;
}

.welcome-card {
    position: relative;
    max-width: 430px;
    margin: clamp(1rem, 12vh, 8rem) auto;
    padding: 46px 38px;
    border: 1px solid var(--primary);
    border-radius: var(--radio);
    background: linear-gradient(165deg, rgba(23, 24, 21, 0.07), var(--bg-elevado));
    text-align: center;
    animation: modal-entra .45s var(--ease-suave);
}

.welcome-card h3 { font-size: 2rem; margin-bottom: 12px; }
.welcome-card p { margin-bottom: 26px; color: var(--text-muted); font-size: .94rem; }

.close-popup {
    position: absolute;
    top: 14px; right: 18px;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.close-popup:hover { color: var(--primary); }

/* ==========================================================================
   12. PIE
   ========================================================================== */

.footer {
    position: relative;
    z-index: 2;
    padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2.5rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elevado);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.footer-logo { display: flex; flex-direction: column; margin-bottom: 18px; }

.logo-serif { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; }

.logo-subtitle {
    margin-top: 4px;
    color: var(--primary);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .3em;
}

.footer-bio { max-width: 42ch; color: var(--text-muted); font-size: .88rem; }

.footer-social-row { display: flex; gap: 11px; margin-top: 24px; }

.social-icon-btn {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-muted);
    transition: var(--transition);
}

.social-icon-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
}

.footer-heading {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--primary);
}

.footer-links, .footer-contact-list { display: flex; flex-direction: column; gap: 11px; }

.footer-links a { color: var(--text-muted); font-size: .88rem; transition: color .25s, padding-left .25s; }
.footer-links a:hover { color: var(--primary); padding-left: 5px; }

.footer-contact-list li { display: flex; gap: 11px; color: var(--text-muted); font-size: .88rem; }
.footer-contact-list a:hover { color: var(--primary); }
.contact-icon { flex: 0 0 auto; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-top: 26px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-tenue);
    font-size: .78rem;
}

/* ==========================================================================
   13. ANIMACIÓN
   ========================================================================== */

.loader {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--bg-main);
}

.loader h1 { overflow: hidden; font-size: clamp(2rem, 1rem + 4vw, 3.4rem); font-weight: 400; }
.loader-text-inner { display: inline-block; }

.loader-sub {
    color: var(--primary);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .4em;
    text-transform: uppercase;
}

.loader-barra {
    width: 170px; height: 1px;
    margin-top: 18px;
    background: rgba(23, 24, 21, 0.1);
    overflow: hidden;
}

.loader-barra::after {
    content: "";
    display: block;
    width: 40%; height: 100%;
    background: var(--primary);
    animation: cargar 1.15s var(--ease-suave) infinite;
}

@keyframes cargar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Revelado al entrar en pantalla (lo activa app.js con IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease-suave), transform .8s var(--ease-suave);
}

.reveal.active { opacity: 1; transform: none; }

.fade-up { animation: subir-suave .9s var(--ease-suave) both; }

@keyframes subir-suave {
    from { opacity: 0; transform: translateY(22px); }
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .anatomia-grid,
    .showcase-container,
    .journey-grid { grid-template-columns: 1fr; }
    .anatomia-visual { position: relative; top: 0; max-width: 460px; margin-inline: auto; }
    .journey-copy { position: static; }
    .featured-grid { grid-template-columns: 1fr; }
    .featured-card {
        grid-template-columns: minmax(220px, .86fr) 1fr;
        grid-template-rows: auto;
        min-height: 320px;
    }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .nav-links-centered { display: none; }
    .hamburger { display: flex; }
    .hero-section { min-height: 100svh; height: auto; }
    .hero-contenido {
        max-width: 100%;
        padding-block: 96px 40px;
    }
    .hero-velo {
        background: radial-gradient(60% 80% at 50% 50%, rgba(250, 248, 243, 0.72), rgba(250, 248, 243, 0.96)),
            linear-gradient(180deg, rgba(250, 248, 243, 0.92) 0%, rgba(250, 248, 243, 0.6) 35%, rgba(250, 248, 243, 0.96) 100%);
    }
    .hero-product-card {
        display: none; /* En pantallas táctiles priorizamos los llamados a la acción y la propuesta de valor */
    }
    .modal-body-grid { grid-template-columns: 1fr; }
    .modal-content { padding: 30px 24px; }
}

@media (max-width: 560px) {
    .hero-scroll { display: none; }
    .hero-contenido { padding-block: 88px 24px; }
    .hero-kicker {
        max-width: 100%;
        font-size: .65rem;
        letter-spacing: .12em;
        margin-bottom: 12px;
    }
    #hero-title {
        max-width: 100%;
        font-size: clamp(2.2rem, 1.8rem + 3.8vw, 3.0rem);
        line-height: 1.05;
    }
    #hero-subtitle {
        margin-block: 16px 22px;
        font-size: .95rem;
        line-height: 1.5;
    }
    .hero-acciones {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    .hero-acciones .btn { width: 100%; padding-inline: 18px; }
    .hero-valor {
        margin-top: 24px;
        padding-top: 18px;
        gap: 8px 14px;
    }
    .hero-valor li { font-size: .78rem; }
    .journey-step {
        min-height: auto;
        padding: 24px;
    }
    .journey-step span { margin-bottom: 16px; }
    .featured-card {
        grid-template-columns: 1fr;
        grid-template-rows: 260px auto;
        min-height: 0;
    }
    .featured-media { min-height: 260px; }
    .footer-grid { grid-template-columns: 1fr; }
    .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .product-info { padding: 14px; }
    .product-info h3 { font-size: .9rem; }
    .package-card { padding: 28px 20px; }
    #cart-sidebar { width: 100vw; }
    .footer-bottom { justify-content: center; text-align: center; }
    /* El asesor ocupa la esquina inferior derecha, el carrito sube */
    #floating-cart-btn { bottom: 84px; }
}

/* ==========================================================================
   Accesibilidad: respetar a quien pidió menos movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .reveal { opacity: 1; transform: none; }
    #hero-title .palabra { transform: none; }
    #hero-subtitle, .hero-acciones, .hero-valor { opacity: 1; }
}

/* ==========================================================================
   15. ESCENAS CUADRO POR CUADRO
   --------------------------------------------------------------------------
   Una escena es una sección más alta que la pantalla con su contenido fijo
   dentro. Ese alto de más es el recorrido que secuencias.js traduce en
   fotogramas: la imagen avanza exactamente al ritmo del dedo.
   ========================================================================== */

.escena {
    position: relative;
    z-index: 2;
    height: auto;
}

.escena-fija {
    position: relative;
    height: auto;
    overflow: hidden;
}

/* Hero Fluido: se adapta naturalmente al viewport sin atrapar el scroll */
.hero-section {
    position: relative;
    z-index: 5;
    min-height: 100svh;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.hero-stage {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #f4f0e7;
}

.hero-static-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 1.2s ease-out;
}

.hero-stage .hero-velo {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-stage .hero-content-wrapper {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Si la secuencia no cargó, el fondo evita que quede un hueco negro. */
.escena.sin-secuencia .escena-fija {
    background: linear-gradient(160deg, #dedad2, #f4f0e7);
}

.escena-velo {
    position: absolute;
    inset: 0;
    background: radial-gradient(85% 70% at 50% 50%, rgba(250, 248, 243, 0.55) 0%, rgba(250, 248, 243, 0.9) 100%),
        linear-gradient(180deg, rgba(250, 248, 243, 0.9) 0%, transparent 25%, transparent 60%, rgba(250, 248, 243, 0.96) 100%);
}

.escena-contenido {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-block: 96px;
    text-align: center;
}

.escena-contenido .titulo-seccion { max-width: 16ch; }
.escena-contenido .subtitulo-seccion { margin-inline: auto; }

.escena-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 34px;
}

/* ==========================================================================
   16. ANIMACIÓN LIGADA AL SCROLL
   --------------------------------------------------------------------------
   `animation-timeline` cambia el reloj de una animación: en lugar del tiempo,
   avanza con la posición de la página. El navegador lo resuelve en el
   compositor, así que se mantiene fluido aunque el hilo principal esté ocupado.

   Todo va dentro de @supports: donde no exista, siguen valiendo las reglas
   `.reveal` de arriba, que activa el IntersectionObserver de animations.js.
   ========================================================================== */

/* Avance de lectura: una línea de oro que cruza el borde superior. */
.progreso-lectura {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: 2px;
    background: var(--oro-metal);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {

    .progreso-lectura {
        animation: avanzar linear;
        animation-timeline: scroll(root block);
    }

    @keyframes avanzar {
        to { transform: scaleX(1); }
    }

    /* --- Entrada de bloques -------------------------------------------- */

    /* El elemento entra mientras sube por la pantalla, no de un golpe al
       cruzar un umbral: el movimiento queda atado al dedo. */
    .reveal,
    .seccion-cabecera,
    .promo-card,
    .review-card,
    .faq-item,
    .benefit-card,
    .showcase-feat-item {
        opacity: 0;
        animation: entrar-bloque linear both;
        animation-timeline: view();
        /* Termina apenas el bloque asoma: si se estira hasta el centro de la
           pantalla, el texto queda a medio aparecer mientras ya se lee. */
        animation-range: entry 0% entry 85%;
    }

    @keyframes entrar-bloque {
        from { opacity: 0; transform: translateY(34px); }
        to   { opacity: 1; transform: none; }
    }

    /* --- Tarjetas del catálogo ------------------------------------------ */

    .category-card,
    .product-card,
    .package-card {
        opacity: 0;
        animation: entrar-tarjeta linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
    }

    @keyframes entrar-tarjeta {
        from { opacity: 0; transform: translateY(44px) scale(.972); }
        to   { opacity: 1; transform: none; }
    }

    /* --- Anatomía: la cámara se aleja del frasco y revela sus notas ------ */

    /* .anatomia-visual es sticky: mientras está pegada, ella misma no se
       mueve en la pantalla, así que un view() sobre la imagen (hija suya)
       no tiene recorrido que medir y queda congelado. La franja que sí
       recorre toda la sección es .anatomia-grid: de ahí sale el reloj, y
       la imagen y los rótulos lo escuchan por nombre. */
    .anatomia-grid {
        view-timeline-name: --anatomia-recorrido;
        view-timeline-axis: block;
    }

    /* Ligado al scroll en los dos sentidos: el mismo recorrido que aleja la
       cámara al bajar la vuelve a acercar al subir, sin lógica extra. */
    .anatomia-visual img {
        animation: revelar-frasco linear both;
        animation-timeline: --anatomia-recorrido;
        /* Un solo tipo de límite ("cover"): mezclar "entry" y "cover" puede
           invertirse según la relación alto de la grilla / alto de pantalla
           y el recorrido deja de ser parejo. "cover" solo es siempre
           monótono, en cualquier tamaño de pantalla. */
        animation-range: cover 15% cover 75%;
    }

    @keyframes revelar-frasco {
        from { transform: scale(1.55) rotateY(-4deg) rotateX(1.5deg); }
        to   { transform: scale(1)    rotateY(0deg)   rotateX(0deg); }
    }

    /* Los rótulos se encienden de a uno, salida → corazón → fondo, en el
       mismo recorrido y en el mismo orden que las tarjetas de al lado. */
    .nota-flotante {
        animation: aparecer-nota linear both;
        animation-timeline: --anatomia-recorrido;
    }

    .nota-flotante--top   { animation-range: cover 17% cover 32%; }
    .nota-flotante--heart { animation-range: cover 38% cover 53%; }
    .nota-flotante--base  { animation-range: cover 59% cover 74%; }

    @keyframes aparecer-nota {
        from { opacity: 0; transform: translateY(10px) scale(.92); }
        to   { opacity: 1; transform: none; }
    }

    .showcase-spec-card {
        animation: subir-lento linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }

    @keyframes subir-lento {
        from { transform: translateY(5%); }
        to   { transform: translateY(-5%); }
    }

    /* --- Títulos --------------------------------------------------------- */

    /* El titular se agranda apenas mientras entra: el ojo lo lee como que la
       sección se acerca, en sintonía con la cámara de las escenas. */
    .titulo-seccion {
        animation: acercar-titulo linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 20%;
    }

    @keyframes acercar-titulo {
        from { transform: scale(.955); }
        to   { transform: none; }
    }

    /* La cinta de envío se despliega desde el centro. */
    .cinta-envio {
        animation: desplegar linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
    }

    @keyframes desplegar {
        from { clip-path: inset(0 42% 0 42%); opacity: .4; }
        to   { clip-path: inset(0); opacity: 1; }
    }

    /* Las capas de la anatomía se encienden a medida que pasan por el centro
       de la pantalla, sin necesidad de tocarlas. */
    .capa {
        animation: encender-capa linear both;
        animation-timeline: view();
        /* Franja angosta: la capa se enciende solo cuando pasa por el centro de
           la pantalla, así se van prendiendo de a una y no las tres juntas. */
        animation-range: cover 28% cover 72%;
    }

    @keyframes encender-capa {
        0%, 100% {
            border-color: rgba(23, 24, 21, 0.154);
            background: linear-gradient(135deg, #dddad4, #faf8f3);
        }
        44%, 56% {
            border-color: var(--primary);
            background: linear-gradient(135deg, #dddbd5, #f4f0e7);
            box-shadow: 0 10px 30px rgba(23, 24, 21, 0.072), 0 0 30px rgba(23, 24, 21, 0.105);
        }
    }
}

/* ==========================================================================
   Accesibilidad de las escenas
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Sin recorrido extra: cada escena pasa a ser una pantalla común. */
    .escena { height: auto; }
    .escena-fija { position: relative; height: auto; min-height: 100svh; }
    .progreso-lectura { display: none; }
    .hero-progreso, .hero-particulas { display: none; }

    /* El frasco queda en un solo encuadre fijo y las tres notas ya están
       a la vista: nada depende de mover la página para verlas. */
    .anatomia-visual img { animation: none; transform: scale(1); }
    .nota-flotante { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 860px) {
    .escena { height: auto; }
}

@media (max-width: 560px) {
    .escena-contenido { padding-block: 84px 56px; }
}

/* ==========================================================================
   16. EMBAJADORES DECANT ODYSSEY
   ========================================================================== */

.ambassadors-section {
    padding-block: var(--sp-seccion);
    position: relative;
    z-index: 10;
    background: #f4f0e7;
}

.ambassadors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 36px;
    margin-top: 48px;
}

.ambassador-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #faf8f3 0%, #faf8f3 100%);
    border: 1px solid rgba(23, 24, 21, 0.196);
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(23, 24, 21, 0.072);
    transition: transform 0.4s var(--ease-suave), border-color 0.4s, box-shadow 0.4s;
}

.ambassador-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 22px 50px rgba(23, 24, 21, 0.154);
}

.ambassador-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 420px;
    overflow: hidden;
}

.ambassador-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s var(--ease-suave);
}

.ambassador-card:hover .ambassador-img {
    transform: scale(1.04);
}

.ambassador-badge-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 16px;
    border-radius: 6px;
    background: #f4f0e7;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(23, 24, 21, 0.06);
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ambassador-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    gap: 20px;
}

.ambassador-meta h3 {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    color: var(--text-main);
    margin: 0 0 6px 0;
    letter-spacing: 0.01em;
}

.ambassador-role {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary);
    display: inline-block;
}

.ambassador-quote {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    position: relative;
    padding-left: 18px;
    border-left: 2px solid var(--primary);
}

.ambassador-picks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.picks-title {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tenue);
}

.picks-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pick-tag {
    padding: 6px 14px;
    background: rgba(23, 24, 21, 0.056);
    border: 1px solid rgba(23, 24, 21, 0.175);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pick-tag:hover {
    background: rgba(23, 24, 21, 0.175);
    border-color: var(--primary);
    transform: translateY(-2px);
    color: var(--primary-light);
}

.ambassador-action {
    margin-top: 4px;
}

.ambassador-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .ambassadors-grid {
        grid-template-columns: 1fr;
    }
    .ambassador-content {
        padding: 22px;
    }
}

/* ==========================================================================
   16. SUITE DE 30 ANIMACIONES WEB MÓVILES (Android & iOS High Performance)
   ========================================================================== */

/* --- 1. Feedback Táctil y Microinteracciones --- */

/* 1. Active Scale (Tap Bounce) - Haptic Touch Visual */
button:active,
.btn:active,
.cat-pill:active,
.category-card:active,
.pick-tag:active,
.fab-main-btn:active,
.fab-action-btn:active,
#floating-cart-btn:active,
.close-modal:active,
.close-cart:active,
.mobile-link:active,
.size-selector label:active,
.product-card .btn:active,
.qp-actions .btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Material Ripple Confinado */
.ripple-target {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 24, 21, 0.3) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
    pointer-events: none;
    transform: scale(0);
    animation: rippleAnimation 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes rippleAnimation {
    to {
        transform: scale(3.2);
        opacity: 0;
    }
}

/* 3. Toggle Switch Morfológico */
.morph-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 58px;
    height: 32px;
    padding: 3px;
    background: rgba(250, 248, 243, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.morph-switch.active {
    background: rgba(23, 24, 21, 0.14);
    border-color: var(--primary);
}
.morph-switch-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(23, 24, 21, 0.048);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease;
}
.morph-switch:active .morph-switch-thumb {
    transform: scaleX(1.32);
}
.morph-switch.active .morph-switch-thumb {
    transform: translateX(26px);
}
.morph-switch.active:active .morph-switch-thumb {
    transform: translateX(26px) scaleX(1.32);
}

/* 4. Heart / Like Pop */
.card-fav-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(250, 248, 243, 0.72);
    border: 1px solid rgba(23, 24, 21, 0.21);
    backdrop-filter: blur(8px);
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.25s, color 0.25s, border-color 0.25s;
    user-select: none;
}
.card-fav-btn.is-fav {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.6);
}
.card-fav-btn.popping {
    animation: heartPop 0.45s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
@keyframes heartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); }
    75% { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.spark-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    pointer-events: none;
    animation: sparkFly 0.5s ease-out forwards;
}
@keyframes sparkFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* 5. Add to Cart Particle Drop */
.cart-particle-flyer {
    position: fixed;
    z-index: 9999;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--oro-metal);
    box-shadow: 0 0 16px var(--primary-glow);
    display: grid;
    place-items: center;
    color: #171815;
    pointer-events: none;
    transition: transform 0.68s cubic-bezier(0.2, 0.85, 0.4, 1.15), opacity 0.68s ease, scale 0.68s ease;
}

/* --- 2. Navegación y Vistas de Pantalla Completa --- */

/* 6. View Transition API (Native Push/Pop) */
::view-transition-old(root) {
    animation: 0.28s cubic-bezier(0.4, 0, 0.2, 1) both slideOutLeft;
}
::view-transition-new(root) {
    animation: 0.28s cubic-bezier(0.4, 0, 0.2, 1) both slideInRight;
}
@keyframes slideOutLeft {
    to { transform: translateX(-15%); opacity: 0; }
}
@keyframes slideInRight {
    from { transform: translateX(15%); opacity: 0; }
}

/* 7. Shared Element Transition (Hero Image Expansion) */
.shared-elem-cloner {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: var(--radio-sm);
    object-fit: contain;
}

/* 8. Swipe-to-Go-Back Gestual */
.swipe-edge-indicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    width: 32px;
    height: 80px;
    border-radius: 0 6px 6px 0;
    background: rgba(23, 24, 21, 0.21);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    color: var(--primary);
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.15s ease-out;
}

/* 9. Skeleton Shimmer Gradient */
.skeleton-shimmer {
    background: linear-gradient(90deg, rgba(23, 24, 21, 0.03) 0%, rgba(23, 24, 21, 0.098) 50%, rgba(23, 24, 21, 0.03) 100%);
    background-size: 200% 100%;
    animation: shimmerSlide 1.5s infinite linear;
    border-radius: 6px;
}
@keyframes shimmerSlide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 10. Pull-to-Refresh Dinámico */
#pull-to-refresh-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(250, 248, 243, 0.95);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.072), 0 0 16px rgba(23, 24, 21, 0.14);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.ptr-circle {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
}
.ptr-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ptr-arrow {
    font-size: 18px;
    color: var(--primary);
    transition: transform 0.25s ease;
}
#pull-to-refresh-indicator.refreshing .ptr-svg {
    animation: ptrRotate 0.8s linear infinite;
}
#pull-to-refresh-indicator.refreshing .ptr-arrow {
    display: none;
}
@keyframes ptrRotate {
    to { transform: rotate(270deg); }
}

/* --- 3. Bottom Sheets y Diálogos Táctiles --- */

/* 11 & 12. Bottom Sheets y Diálogos Táctiles (Mobile) */
.sheet-handle {
    display: none;
    width: 44px;
    height: 4px;
    border-radius: 4px;
    background: rgba(23, 24, 21, 0.3);
    margin: 8px auto 14px;
    cursor: grab;
    touch-action: none;
}

@media (max-width: 768px) {
    .sheet-handle { display: block; }

    /* Solo cuando el script la abre (style="display: block"): antes el display:flex
       fijo la dejaba visible y vacía al cargar la página en el celular. */
    #perfume-modal.modal[style*="block"] {
        display: flex !important;
    }
    #perfume-modal.modal {
        flex-direction: column;
        justify-content: flex-end;
        background: rgba(250, 248, 243, 0.65);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 0;
        transition: opacity 0.3s ease;
    }

    #perfume-modal .modal-content.bottom-sheet {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 90svh;
        border-radius: 6px 6px 0 0;
        border-bottom: none;
        box-shadow: 0 -10px 40px rgba(23, 24, 21, 0.096), 0 0 24px rgba(23, 24, 21, 0.07);
        overflow-y: auto;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        touch-action: pan-y;
    }

    #cart-sidebar.bottom-sheet {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 88svh;
        border-radius: 6px 6px 0 0;
        border-left: none;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -10px 40px rgba(23, 24, 21, 0.096), 0 0 24px rgba(23, 24, 21, 0.07);
        transform: translateY(105%);
        transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #cart-sidebar.bottom-sheet.active {
        transform: translateY(0);
    }
}

/* 13. Swipe-to-Dismiss Card */
.cart-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    transition: transform 0.2s ease, opacity 0.2s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}
.cart-item.swiped-delete {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

/* 14. Action Sheet Stagger */
.stagger-in {
    opacity: 0;
    transform: translateY(16px);
    animation: staggerUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes staggerUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 15. Contextual Long-Press Preview (Peek & Pop) */
.quick-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 9980;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(250, 248, 243, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.quick-preview-overlay.active {
    display: grid;
    opacity: 1;
}
.quick-preview-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: var(--bg-elevado);
    border: 1px solid var(--border-color);
    border-radius: var(--radio-lg);
    box-shadow: 0 20px 50px rgba(23, 24, 21, 0.096), 0 0 30px rgba(23, 24, 21, 0.105);
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-preview-overlay.active .quick-preview-card {
    transform: scale(1);
}
.quick-preview-header {
    position: relative;
    height: 180px;
    background: radial-gradient(circle at center, rgba(23, 24, 21, 0.105), rgba(250, 248, 243, 0.8));
    display: grid;
    place-items: center;
}
.quick-preview-header img {
    height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(23, 24, 21, 0.06));
}
.qp-tags {
    position: absolute;
    bottom: 12px;
    left: 14px;
    display: flex;
    gap: 8px;
}
.qp-badge {
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(23, 24, 21, 0.14);
    border: 1px solid var(--primary);
    color: var(--primary-light);
    font-size: 0.65rem;
    font-weight: 700;
}
.qp-brand {
    color: var(--text-muted);
    font-size: 0.72rem;
    align-self: center;
}
.qp-close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
}
.quick-preview-body {
    padding: 20px 22px;
}
.quick-preview-body h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 6px;
}
.quick-preview-body p {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 14px;
}
.qp-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.qp-note-tag {
    padding: 3px 9px;
    background: rgba(23, 24, 21, 0.056);
    border: 1px solid rgba(23, 24, 21, 0.14);
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--text-main);
}
.qp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* --- 4. Navegación Inferior, Headers y Floating UI --- */

/* 16. Floating Bottom Bar Hide/Show on Scroll */
#floating-cart-btn,
.fab-container {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.floating-hidden {
    transform: translateY(130%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 17. Dynamic Island / Capsule Pill */
.dynamic-island-pill {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 9995;
    display: flex;
    align-items: center;
    min-width: 220px;
    max-width: 90vw;
    padding: 10px 18px;
    background: rgba(250, 248, 243, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 10px 35px rgba(23, 24, 21, 0.096), 0 0 24px rgba(23, 24, 21, 0.14);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.dynamic-island-pill.visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.island-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.island-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(23, 24, 21, 0.105);
    border: 1px solid var(--primary);
    flex-shrink: 0;
}
.island-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.island-text strong {
    font-size: 0.86rem;
    color: var(--primary-light);
    white-space: nowrap;
}
.island-text span {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 18 & 24. Gooey Tab Indicator & Sticky Category Bar */
.category-pills-bar {
    position: sticky;
    top: 60px;
    z-index: 850;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--gutter);
    background: rgba(250, 248, 243, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.category-pills-bar::-webkit-scrollbar { display: none; }
.cat-pill {
    position: relative;
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid rgba(23, 24, 21, 0.14);
    background: rgba(250, 248, 243, 0.6);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-pill.active {
    background: var(--oro-metal);
    border-color: var(--primary);
    color: #171815;
    box-shadow: 0 4px 18px rgba(23, 24, 21, 0.21);
    font-weight: 700;
}

/* 19. Collapsible Header (Parallax Shrink) */
.navbar-black {
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-bottom 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar-black.compacta {
    padding-block: 10px;
    background: rgba(250, 248, 243, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(23, 24, 21, 0.126);
}

/* 20. Floating Action Button (FAB) Speed Dial */
.fab-container {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 890;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
}
.fab-main-btn {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--oro-metal);
    border: none;
    box-shadow: 0 8px 24px rgba(23, 24, 21, 0.072), 0 0 20px rgba(23, 24, 21, 0.21);
    color: #171815;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-icon-normal,
.fab-icon-active {
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.fab-icon-normal { opacity: 1; transform: scale(1); }
.fab-icon-active { opacity: 0; transform: scale(0.5) rotate(-90deg); }

.fab-container.active .fab-main-btn {
    transform: rotate(45deg);
    background: #faf8f3;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.fab-container.active .fab-icon-normal { opacity: 0; transform: scale(0.5) rotate(90deg); }
.fab-container.active .fab-icon-active { opacity: 1; transform: scale(1) rotate(0deg); }

.fab-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.fab-container.active .fab-actions { pointer-events: auto; }

.fab-action-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px rgba(23, 24, 21, 0.06);
    color: var(--text-main);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(16px) scale(0.7);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}
.fab-container.active .fab-action-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.fab-container.active .fab-action-btn:nth-child(1) { transition-delay: 0.04s; }
.fab-container.active .fab-action-btn:nth-child(2) { transition-delay: 0.08s; }
.fab-container.active .fab-action-btn:nth-child(3) { transition-delay: 0.12s; }
.fab-container.active .fab-action-btn:nth-child(4) { transition-delay: 0.16s; }

.fab-action-btn:hover {
    background: var(--primary);
    color: #171815;
    transform: scale(1.1) !important;
}
.fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--primary);
    color: #171815;
    font-size: 0.62rem;
    font-weight: 800;
    display: none;
}

/* --- 5. Scroll & Experiencias Inmersivas Mobile --- */

/* 21. CSS Scroll-Driven Animations */
@supports (animation-timeline: scroll()) {
    .progreso-lectura {
        animation: barraLectura auto linear;
        animation-timeline: scroll(root);
        transform-origin: left;
    }
    @keyframes barraLectura {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
}

/* 22. Snap Carousel Cards con Scale Effect */
.snap-carousel {
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
}
.snap-carousel > * {
    scroll-snap-align: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.snap-carousel-active {
    transform: scale(1.04) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 14px 40px rgba(23, 24, 21, 0.084), 0 0 28px rgba(23, 24, 21, 0.126) !important;
}

/* 23. Infinite Marquee Táctil */
.marquesina {
    touch-action: pan-y;
}
.marquesina:active .marquesina-pista,
.marquesina.paused .marquesina-pista {
    animation-play-state: paused !important;
}

/* 25. Accordion Spring Reveal */
.faq-accordion {
    gap: 12px;
}
.faq-item {
    transition: border-color 0.3s ease, background 0.3s ease;
}
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.35s ease;
    overflow: hidden;
    padding-inline: 26px;
    padding-bottom: 0;
}
.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    padding-bottom: 24px;
}
.faq-answer > div,
.faq-answer > p {
    overflow: hidden;
}

/* --- 6. Formularios, Validación y Notificaciones --- */

/* 26. Float Label Transitions */
.float-label-group {
    position: relative;
    margin-top: 14px;
}
.float-label-group input {
    width: 100%;
    padding: 18px 16px 8px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--border-color);
    background: #dddad3;
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.float-label-group label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.92rem;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.25s ease, color 0.25s ease;
}
.float-label-group input:focus + label,
.float-label-group input:not(:placeholder-shown) + label {
    transform: translateY(-115%) scale(0.82);
    transform-origin: left top;
    color: var(--primary);
}

/* 27. Error Shake Feedback */
.error-shake {
    animation: errorShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes errorShake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* 28. Input Glow Focus Ring */
input:focus,
.input-glow-pulse:focus {
    box-shadow: 0 0 0 3px rgba(23, 24, 21, 0.196), 0 0 18px rgba(23, 24, 21, 0.14) !important;
    border-color: var(--primary) !important;
}

/* 29. Toast Swipe-Away */
.toast-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9996;
    padding: 12px 22px;
    background: var(--bg-elevado);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(23, 24, 21, 0.084);
    color: var(--text-main);
    font-size: 0.88rem;
    touch-action: pan-y;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 30. Lottie / SVG Micro-Checkmark */
.animated-checkmark {
    width: 22px;
    height: 22px;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.animated-checkmark path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawCheck 0.45s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}


/* Aceptación de términos antes de enviar el pedido */
.cart-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 10px;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.45;
    cursor: pointer;
}
.cart-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--primary); }
.cart-consent a { color: var(--primary); text-decoration: underline; }
.cart-consent-error { color: #FFB4A8; font-size: .8rem; margin: 0 0 10px; }
.footer-bottom p { overflow-wrap: anywhere; }

/* ==========================================================================
   HERO AUDIOVISUAL (SIGNAL): minimalista, luminoso y arquitectónico
   ========================================================================== */
.lh-hero {
    --lh-papel: #f4f0e7;
    --lh-tinta: #171815;
    --lh-acento: var(--acento);
    --lh-linea: rgba(23, 24, 21, 0.22);
    position: relative;
    min-height: 100svh;
    height: auto;
    overflow: hidden;
    isolation: isolate;
    background: var(--lh-papel);
    color: var(--lh-tinta);
    font-family: 'Instrument Sans', sans-serif;
}
.lh-hero .hero-stage {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    background: transparent;
}
.lh-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
/* Foto apaisada: el texto cae sobre la pared vacía; en vertical se prioriza el jarrón y los frascos. */
/* Anclada abajo: si la pantalla recorta, se pierde pared y nunca el estante con los frascos. */
.lh-foto { object-position: 50% 100%; }
.lh-poster { display: none; }
/* En escritorio la foto termina sobre la línea del pie, así el estante y los frascos quedan a la vista. */
@media (min-width: 761px) {
    .lh-foto { height: calc(100% - 64px); }
}
/* En celular la foto ocupa la mitad superior y termina en el estante; el texto va debajo, sobre papel. */
@media (max-width: 760px) {
    .lh-foto {
        height: 52svh;
        object-position: 100% 100%;
        border-bottom: 1px solid var(--lh-linea);
    }
    .lh-hero .hero-stage::before { display: none; }
    /* El texto arranca siempre debajo de la foto (52svh menos la barra de 81 px). */
    .lh-hero .lh-texto {
        align-self: start;
        margin-top: calc(52svh - 81px + 30px);
    }
}
/* Fundido solo detrás del texto. */
.lh-hero .hero-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(244, 240, 231, 0.96), rgba(244, 240, 231, 0.66) 38%, transparent 68%);
    pointer-events: none;
}
.lh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px clamp(22px, 4.4vw, 72px);
    border-bottom: 1px solid var(--lh-linea);
}
.lh-brand {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--lh-tinta);
    text-decoration: none;
}
.lh-nav ul {
    display: flex;
    gap: clamp(22px, 3vw, 44px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.lh-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--lh-tinta);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
}
.lh-nav a:hover { border-bottom-color: var(--lh-tinta); }
.lh-texto {
    align-self: center;
    width: min(610px, 46vw);
    margin-left: clamp(22px, 4.4vw, 72px);
    padding: 48px 0;
}
.lh-titulo {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(58px, 7.4vw, 118px);
    font-weight: 520;
    line-height: 0.91;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lh-tinta);
}
.lh-titulo span { display: block; }
.lh-titulo em {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-weight: 400;
}
.lh-copy {
    max-width: 400px;
    margin: 34px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--lh-tinta);
}
.lh-accion {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
    padding: 17px 24px;
    border: 1px solid var(--lh-tinta);
    border-radius: 6px;
    background: var(--lh-acento);
    color: var(--lh-tinta);
    font: 600 15px/1 'Instrument Sans', sans-serif;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}
.lh-accion:hover { background: var(--lh-tinta); color: var(--lh-papel); }
.lh-accion svg { width: 16px; height: 16px; }
.lh-hero :focus-visible {
    outline: 2px solid var(--lh-tinta);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--lh-acento);
}
.lh-pie {
    display: flex;
    gap: 28px;
    padding: 22px clamp(22px, 4.4vw, 72px);
    border-top: 1px solid var(--lh-linea);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}
.lh-pie span + span {
    padding-left: 28px;
    border-left: 1px solid var(--lh-linea);
}
.lh-revelar {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s ease, transform .75s ease;
}
.lh-revelar.visible { opacity: 1; transform: none; }
.lh-copy.lh-revelar { transition-delay: .08s; }
.lh-accion.lh-revelar { transition-delay: .16s; }

/* Mientras se ve la barra del hero, el menú de la tienda se esconde. */
body.lh-barra-visible #navbar {
    transform: translateY(-100%);
    visibility: hidden;
}

@media (max-width: 760px) {
    .lh-nav { display: none; }
    .lh-texto {
        align-self: end;
        width: auto;
        margin: 0 22px 86px;
        padding: 0;
    }
    .lh-titulo { font-size: clamp(48px, 14vw, 68px); }
    .lh-copy { font-size: 16px; margin-top: 24px; }
    .lh-hero .hero-stage::before {
        background: linear-gradient(0deg, rgba(244, 240, 231, 0.96), rgba(244, 240, 231, 0.66) 38%, transparent 68%);
    }
    .lh-pie { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lh-revelar { opacity: 1; transform: none; transition: none; }
}

/* Paneles cerrados: sin sombra ni borde asomando sobre el hero claro. */
#cart-sidebar:not(.active) { box-shadow: none; }
.dynamic-island-pill:not(.visible) { visibility: hidden; }
#pull-to-refresh-indicator:not([style]),
#pull-to-refresh-indicator[style*="-100%"] { visibility: hidden; }

/* Los botones flotantes no tapan el texto ni los frascos del hero; vuelven al bajar. */
body.lh-barra-visible #fab-speed-dial,
body.lh-barra-visible .asesor-lanzador,
body.lh-barra-visible #floating-cart-btn { visibility: hidden; }

/* ==========================================================================
   ADAPTACIÓN AL SISTEMA DEL HERO
   Papel #f4f0e7, tinta #171815, acento #cde3b4. Divisores de 1 px, radios de
   6 px como máximo, sin sombras ni brillos. Títulos en Instrument Sans 520 con
   el énfasis en Newsreader cursiva.
   ========================================================================== */
body { background: var(--bg-main); }
html { background-color: var(--bg-main); }

/* Títulos */
.titulo-seccion,
.section-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(48px, 6.3vw, 102px);
    font-weight: 520;
    line-height: .91;
    letter-spacing: 0;
}
.showcase-dark h2,
.anatomia h2 { font-weight: 520; letter-spacing: 0; line-height: .95; }
.texto-oro {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--text-main);
}
.cursiva-lujo {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: 0;
}
.seccion-etiqueta { letter-spacing: .12em; }
.subtitulo-seccion, .section-subtitle { color: var(--text-muted); }

/* Botones: rectángulos de 6 px con borde de tinta, sin sombra ni brillo. */
.btn {
    border-radius: 6px;
    border: 1px solid var(--text-main);
    box-shadow: none;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.btn-primary { background: var(--acento); color: var(--text-main); box-shadow: none; }
.btn-primary::after { display: none; }
.btn-primary:hover { background: var(--text-main); color: var(--bg-main); box-shadow: none; transform: none; }
.btn-outline { background: transparent; color: var(--text-main); }
.btn-outline:hover { background: var(--text-main); color: var(--bg-main); }
.btn-green { background: var(--text-main); color: var(--bg-main); box-shadow: none; }
.btn-green:hover { background: var(--acento); color: var(--text-main); transform: none; }

/* Tarjetas y paneles: planos, con divisor de 1 px. */
.ambassador-card, .perfume-card, .product-card, .category-card, .package-card, .highlight-pack, .kit-card,
.benefit-card, .faq-item, .promo-box, .promo-card, .capa, .journey-step,
.showcase-spec-card, .review-card, .featured-card, .cantidad-card {
    background: var(--bg-elevado);
    border: 1px solid var(--border-color);
    box-shadow: none;
    backdrop-filter: none;
}
.ambassador-card:hover, .perfume-card:hover, .category-card:hover, .package-card:hover,
.benefit-card:hover, .featured-card:hover { box-shadow: none; border-color: var(--text-main); }
.spec-card-glow { display: none; }

/* Secciones sin bandas grises: todo sobre papel. */
.bg-light, .olfactory-journey, .showcase-dark, .anatomia, .faq-section,
.community-reviews, .ambassadors-section, .featured-fragrances { background: var(--bg-main); }
section + section { border-top: 1px solid var(--border-subtle); }

/* Chips */
.pick-tag, .nota-chip, .tag, .cantidad-chip { border-radius: 4px; }
.lh-accion { text-decoration: none; }
.logo-text { white-space: nowrap; font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 0; }
@media (max-width: 420px) { .logo-text { font-size: 1.05rem; } }



/* ==========================================================================
   VIDEO REEL - INTEGRACIÓN MINIMALISTA Y ELEGANTE CON ALTO CONTRASTE
   ========================================================================== */

.modal-media-container {
    width: 100%;
    position: relative;
}

.modal-photo-wrap {
    width: 100%;
    text-align: center;
}

.minimal-video-trigger-wrap {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

/* Botón principal de video con contraste perfecto sobre fondo claro */
.btn-minimal-video {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #171815;
    border: 1px solid #171815;
    border-radius: 999px;
    color: #ffffff !important;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(23, 24, 21, 0.22);
}

.btn-minimal-video .material-symbols-outlined {
    font-size: 1.25rem;
    color: #cde3b4 !important;
    transition: transform 0.2s ease;
}

.btn-minimal-video:hover {
    background: #2a2c26;
    border-color: #2a2c26;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(23, 24, 21, 0.32);
}

.btn-minimal-video:hover .material-symbols-outlined {
    transform: scale(1.15);
}

/* Enlace/píldora contextual debajo del título con texto oscuro legible */
.video-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(23, 24, 21, 0.06);
    border: 1px solid rgba(23, 24, 21, 0.16);
    border-radius: 6px;
    padding: 6px 12px;
    margin: 6px 0 14px 0;
    color: #171815 !important;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.video-inline-link .material-symbols-outlined {
    font-size: 1.15rem;
    color: #171815 !important;
}

.video-inline-link:hover {
    background: #171815;
    border-color: #171815;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.video-inline-link:hover .material-symbols-outlined {
    color: #cde3b4 !important;
}

.modal-video-wrap {
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(23, 24, 21, 0.15);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.video-top-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    background: #171815;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-back-to-photo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #e5e5e5;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 5px 10px;
    border-radius: 6px;
}

.btn-back-to-photo:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.btn-back-to-photo .material-symbols-outlined {
    font-size: 1.05rem;
    color: #cde3b4;
}

.perfume-reel-video {
    width: 100%;
    max-height: 480px;
    display: block;
    background: #000;
    outline: none;
    object-fit: contain;
}

.footer-ai-disclaimer {
    font-size: 0.76rem;
    color: var(--text-muted, #3a3b36);
    line-height: 1.4;
    display: block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(23, 24, 21, 0.15);
}

/* Los reels ocupan el lugar de la imagen de producto. */
.catalog-video-media { position: relative; width: 100%; height: 100%; background: #080808; overflow: hidden; }
.catalog-perfume-video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; }
.product-image:has(.catalog-video-media), .featured-media:has(.catalog-video-media) { aspect-ratio: 9 / 16; }
.modal-media-container .catalog-video-media { max-height: 78vh; aspect-ratio: 9 / 16; margin-inline: auto; }
.modal-media-container .catalog-perfume-video { max-height: 78vh; object-fit: contain; }
.catalog-sound { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff80; border-radius: 50%; background: #111d; color: #fff; cursor: pointer; z-index: 2; }
.catalog-sound:hover { background: #333; }
.catalog-sound:focus-visible { outline: 3px solid var(--primary, #c79b5b); outline-offset: 3px; }

/* Corrección de visibilidad para Tarjetas Destacadas (.featured-card) */
.featured-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevado, #faf8f3);
    position: relative;
    border-radius: var(--radio-sm, 6px);
    border: 1px solid var(--border-color, rgba(23, 24, 21, 0.22));
    overflow: hidden;
}

.featured-media {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: #0d0f12;
    overflow: hidden;
}

.featured-info {
    position: relative;
    z-index: 2;
    background: var(--bg-elevado, #faf8f3);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--border-subtle, rgba(23, 24, 21, 0.12));
}

.featured-info h3 {
    color: var(--text-main, #171815);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.featured-info p {
    color: var(--text-muted, #3a3b36);
    margin: 0;
}

.featured-info .btn-outline {
    background: var(--bg-main, #f4f0e7);
    color: var(--text-main, #171815);
    border: 1.5px solid var(--text-main, #171815);
    font-weight: 700;
    padding: 13px 20px;
    border-radius: 6px;
    margin-top: 8px;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.featured-info .btn-outline:hover {
    background: var(--text-main, #171815);
    color: var(--bg-main, #f4f0e7);
}