/* ====================================
   FRAGRANCE EXPERIENCE SECTION
   Experiência Olfativa Cinematográfica
   ==================================== */

.fragrance-experience {
    position: relative;
    width: 100%;
    background-color: var(--color-black);
}

.experience-stage {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    background-color: var(--color-black);
}

/* ====================================
   ATMOSPHERIC BACKGROUNDS (Fase por Fase)
   Cada fase é um "mundo" sensorial completo
   ==================================== */

.experience-atmosphere {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    contain: paint;
}

/* FASE 01: CÍTRICO - O Primeiro Impacto
   Cinematográfico background (foto) + assets fx para parallax */
.experience-atmosphere--01 {
    opacity: 1;
    background-image: url('../assets/phase-01-bg.webp');
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
}

/* FASE 02: FLORAL - O Coração
   Cinematográfico background (foto) + assets fx para parallax */
.experience-atmosphere--02 {
    opacity: 0;
    background-image: url('../assets/phase-02-bg.webp');
    background-size: cover;
    background-position: center 28%;
    background-repeat: no-repeat;
}

/* FASE 03: RASTRO - Âmbar Sensual
   Cinematográfico background (foto) + assets fx para parallax */
.experience-atmosphere--03 {
    opacity: 0;
    background-image: url('../assets/phase-03-bg.webp');
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
}

/* MOBILE: backgrounds verticais dedicados por fase (as versões desktop são
   horizontais e cortam mal em tela de celular). */
@media (max-width: 768px) {
    .experience-atmosphere--01 {
        background-image: url('../assets/phase-01-bg-mobile.webp');
        background-position: center;
    }
    .experience-atmosphere--02 {
        background-image: url('../assets/phase-02-bg-mobile.webp');
        background-position: center;
    }
    .experience-atmosphere--03 {
        background-image: url('../assets/phase-03-bg-mobile.webp');
        background-position: center;
    }
}

/* ====================================
   DECORATIVE ELEMENTS / PROFUNDIDADE
   Criar sensação de profundidade e movimento sem canvas
   ==================================== */

.experience-decor {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    contain: paint;
}

/* FASE 01: CÍTRICO - Assets para parallax
   Background cinematográfico faz a maior parte do trabalho */
.experience-decor--01 {
    opacity: 1;
}

/* FASE 02: FLORAL - Assets para parallax
   Background cinematográfico faz a maior parte do trabalho */
.experience-decor--02 {
    opacity: 0;
}

/* FASE 03: ÂMBAR/RASTRO - Assets para parallax
   Background cinematográfico faz a maior parte do trabalho */
.experience-decor--03 {
    opacity: 0;
}

/* ====================================
   ESTRUTURA DE ASSETS (Camadas 3D)
   ==================================== */

.asset-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.asset {
    position: absolute;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 1;
    z-index: 20;
    pointer-events: none;
}

/* ====================================
   FASE 01: CÍTRICO — Assets Reais
   ==================================== */

/* Camada traseira: Bokeh + Raios (screen blend) */
.citrus-bokeh,
.citrus-ray {
    mix-blend-mode: screen;
}

.citrus-bokeh--1 {
    width: clamp(150px, 20vw, 300px);
    top: 20%;
    left: 15%;
    opacity: 0.5;
}

.citrus-ray--1 {
    width: clamp(80px, 12vw, 200px);
    top: 30%;
    right: 20%;
    opacity: 0.35;
}

/* Camada intermediária: Splash + Fatia (blend normal) */
.citrus-splash {
    opacity: 0.7;
}

.citrus-splash--left {
    width: clamp(100px, 15vw, 220px);
    top: 25%;
    left: 12%;
}

.citrus-slice {
    opacity: 0.75;
}

.citrus-slice--right {
    width: clamp(110px, 16vw, 240px);
    top: 35%;
    right: 10%;
}

/* Camada frontal: Casca + Gotas (blur estático, cortadas) */
.citrus-spiral {
    width: clamp(140px, 20vw, 300px);
    top: 30%;
    left: -8%;
    opacity: 0.55;
    filter: blur(2px);
}

.citrus-drop {
    width: clamp(50px, 8vw, 120px);
    opacity: 0.6;
    mix-blend-mode: screen;
}

.citrus-drop--1 {
    top: 20%;
    right: 5%;
}

/* ====================================
   FASE 02: FLORAL — Assets Reais
   ==================================== */

/* Camada traseira: Pétalas pequenas */
.petal--03,
.petal--05,
.petal--07,
.petal--09 {
    opacity: 0.35;
}

.petal-back--1 {
    width: clamp(70px, 10vw, 140px);
    top: 15%;
    left: 20%;
}

.petal-back--2 {
    width: clamp(65px, 9vw, 130px);
    top: 25%;
    right: 22%;
}


/* Camada intermediária: Rosa + Pétalas médias */
.petal-rose {
    opacity: 0.65;
}

.petal-rose--left {
    width: clamp(120px, 18vw, 260px);
    top: 20%;
    left: 8%;
}

.petal--04,
.petal--06 {
    opacity: 0.55;
}

.petal-mid--1 {
    width: clamp(100px, 15vw, 220px);
    top: 40%;
    left: 25%;
}

/* Camada frontal: Pétala grande (blur) + Gota */
.petal-large {
    width: clamp(160px, 24vw, 340px);
    top: 22%;
    left: -10%;
    opacity: 0.45;
    filter: blur(3px);
}

.petal-drop {
    width: clamp(60px, 9vw, 130px);
    bottom: 20%;
    right: 8%;
    opacity: 0.5;
}

/* ====================================
   FASE 03: ÂMBAR/RASTRO — Assets Reais
   ==================================== */

/* Camada traseira: Véus de fumaça grandes (screen blend) */
.amber-veil {
    mix-blend-mode: screen;
    opacity: 0.4;
}

.amber-veil--1 {
    width: clamp(280px, 40vw, 600px);
    top: 10%;
    left: -10%;
}

.amber-veil--2 {
    width: clamp(320px, 45vw, 650px);
    top: 40%;
    right: -8%;
}

/* Camada intermediária: Resina */
.amber-resin,
.amber-wood {
    opacity: 0.5;
}

.amber-resin--1 {
    width: clamp(100px, 14vw, 220px);
    bottom: 25%;
    right: 20%;
}

/* Camada frontal: Poeira + Esferas (minimalista) */
.amber-dust {
    mix-blend-mode: screen;
    width: clamp(200px, 28vw, 420px);
    top: 35%;
    left: 25%;
    opacity: 0.25;
}

.amber-sphere {
    opacity: 0.35;
    mix-blend-mode: screen;
}

.amber-sphere--1 {
    width: clamp(80px, 11vw, 170px);
    top: 25%;
    right: 12%;
}

.amber-sphere--2 {
    width: clamp(70px, 10vw, 150px);
    bottom: 30%;
    right: 8%;
}

/* ====================================
   PRODUTO CENTRALIZADO (Âncora imóvel)
   ==================================== */

.experience-product-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    opacity: 1;
}

/* Glow dinâmico — cor muda por fase via JS */
.experience-product-glow {
    position: absolute;
    inset: -60px;
    background: radial-gradient(circle, rgba(215, 168, 74, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    will-change: background-color;
}

.experience-product {
    position: relative;
    z-index: 1;
    height: clamp(300px, 52svh, 600px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
    display: block;
    transform-origin: center center;
}

@media (max-width: 768px) {
    .experience-product {
        height: clamp(180px, 28svh, 275px);
    }
    /* Frasco centralizado no mobile (não "desce demais" no estado final). */
    .experience-product-wrap {
        top: 50%;
    }
}

/* ====================================
   TEXTOS POR FASE
   ==================================== */

.experience-text {
    position: absolute;
    opacity: 0;
    z-index: 40; /* acima do frasco (z-index 30) para o texto nunca ficar atrás */
}

/* Scrim de legibilidade: gradiente escuro suave atrás do texto, dissolvendo
   na imagem (não é um bloco chapado). Fica só atrás do bloco de texto lateral. */
.experience-text::before {
    content: "";
    position: absolute;
    inset: -40px -58px;
    z-index: -1;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.25) 76%,
        transparent 94%);
    filter: blur(12px);
    pointer-events: none;
}

/* Reforço de contraste no próprio texto (sombra dupla: nitidez + halo escuro) */
.experience-text__index,
.experience-text__title,
.experience-text__notes,
.experience-text__headline,
.experience-text__desc {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 16px rgba(0, 0, 0, 0.7);
}

/* 5. Label de categoria (mais discreto de todos) */
.experience-text__eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-cream);
    opacity: 0.5;
    margin-bottom: 14px;
}

/* Quebra de linha do headline: só no mobile */
.hl-br { display: none; }

/* FASE 01: Lado esquerdo (desktop) / Acima (mobile) */
.experience-text--01 {
    opacity: 1;
    left: clamp(20px, 5%, 60px);
    top: 50%;
    transform: translateY(-50%);
    max-width: clamp(340px, 34vw, 640px);
    text-align: left;
}

/* FASE 02: Lado direito (desktop) / Abaixo (mobile) */
.experience-text--02 {
    right: clamp(20px, 5%, 60px);
    top: 50%;
    transform: translateY(-50%);
    max-width: clamp(340px, 34vw, 640px);
    text-align: right;
}

/* FASE 03: Lado esquerdo (desktop) — evita sobrepor o frasco central */
.experience-text--03 {
    left: clamp(20px, 5%, 60px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: clamp(340px, 34vw, 640px);
    text-align: left;
}

/* 3b. Número da fase — grande mas decorativo (recuado, baixa opacidade) */
.experience-text__index {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 400;
    color: var(--color-gold);
    letter-spacing: 0.05em;
    line-height: 0.9;
    margin-bottom: 4px;
    opacity: 0.6;
}

/* 2. Título da fase — capítulo da narrativa (secundário ao headline) */
.experience-text__title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.8vw, 32px);
    font-weight: 400;
    color: var(--color-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 1.2;
    opacity: 0.9;
}

/* 3. Descritores olfativos */
.experience-text__notes {
    font-family: var(--font-sans);
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 500;
    color: var(--color-cream);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
    opacity: 0.9;
}

/* 1. HEADLINE de venda — o elemento PRINCIPAL de cada fase */
.experience-text__headline {
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 600;
    color: var(--color-gold-light);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.06;
    margin-bottom: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.7);
}

/* 4. Apoio — restrito e discreto */
.experience-text__desc {
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.5vw, 17px);
    font-weight: 400;
    color: var(--color-white);
    letter-spacing: 0.03em;
    line-height: 1.55;
    opacity: 0.9;
    max-width: clamp(280px, 26vw, 400px);
}

/* Fase 02 (texto à direita): o apoio encosta na direita */
.experience-text--02 .experience-text__desc {
    margin-left: auto;
}

/* ====================================
   MENSAGEM FINAL
   ==================================== */

.experience-final {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* COMEÇA LEVE no topo · frasco no meio · TERMINA embaixo */
    padding: clamp(90px, 15svh, 160px) 20px clamp(24px, 5svh, 56px);
    opacity: 0;
    z-index: 45;
    pointer-events: none;
    text-align: center;
}

.experience-final__small {
    display: block;
    position: relative;
    font-family: var(--font-serif);
    font-size: clamp(19px, 2.6vw, 27px);
    font-weight: 600;
    color: var(--color-gold-light);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95),
                 0 4px 26px rgba(0, 0, 0, 0.85);
}

/* Plate de leitura atrás da frase grande. Fundo dourado final é claro, então
   o texto ganha um halo escuro forte e denso para "saltar" da tela. */
.experience-final__big::before {
    content: "";
    position: absolute;
    inset: -36px -20%;
    z-index: -1;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.52) 46%,
        transparent 78%);
    filter: blur(18px);
    pointer-events: none;
}

/* Preenchimento SÓLIDO (sem degradê lavado) + sombra pesada = máximo destaque. */
.experience-final__big {
    display: block;
    position: relative;
    font-family: var(--font-serif);
    font-size: clamp(38px, 6.4vw, 72px);
    font-weight: 500;
    color: var(--color-gold-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    width: max-content;
    max-width: 90vw;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95),
                 0 6px 34px rgba(0, 0, 0, 0.85),
                 0 0 3px rgba(0, 0, 0, 0.7);
}

/* ====================================
   BACKGROUND CINEMATOGRÁFICO DO ESTADO FINAL (imagem)
   ==================================== */

.experience-final-bg {
    position: absolute;
    inset: 0;
    z-index: 5; /* acima das atmosferas de fase, abaixo do frasco (30) */
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    background: var(--color-black); /* backstop: nunca deixa "vazar" nada atrás */
    will-change: transform, opacity;
}

.experience-final-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Glow radial MUITO suave atrás do frasco — integra o produto à luz do fundo.
   SEM coluna vertical, SEM retângulo, SEM bordas visíveis. */
.experience-final-light {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 38% 40% at 50% 52%,
        rgba(226, 190, 120, 0.16) 0%,
        rgba(210, 170, 100, 0.05) 45%,
        transparent 72%);
}

/* ====================================
   MOMENTO COMERCIAL (Final B - conversão)
   ==================================== */

.experience-cta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: clamp(70px, 12svh, 130px) 20px clamp(28px, 6svh, 64px);
    opacity: 0;
    z-index: 46;
    pointer-events: none;
}

.experience-cta__top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.experience-cta__brand {
    font-family: var(--font-serif);
    font-size: clamp(34px, 6vw, 68px);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    line-height: 1;
    margin: 0 0 12px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.experience-cta__meta {
    font-family: var(--font-sans);
    font-size: clamp(12px, 1.4vw, 16px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cream);
    opacity: 0.9;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.experience-cta__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 26px);
    max-width: min(90vw, 560px);
}

.experience-cta__sentence {
    font-family: var(--font-serif);
    font-size: clamp(16px, 2vw, 24px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-cream);
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.experience-cta__button {
    /* pointer-events herdado do .experience-cta (ligado via JS só no Final B) */
    display: inline-block;
    font-family: var(--font-sans);
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-black);
    background: linear-gradient(135deg,
        var(--color-gold) 0%,
        var(--color-gold-light) 50%,
        var(--color-gold) 100%);
    border: 1px solid var(--color-gold-light);
    border-radius: 50px;
    padding: 17px clamp(34px, 4vw, 56px);
    min-width: clamp(260px, 22vw, 340px);
    text-align: center;
    box-shadow: 0 10px 34px rgba(215, 168, 74, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                filter var(--transition-normal);
}

.experience-cta__button:hover,
.experience-cta__button:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 14px 44px rgba(232, 200, 110, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
    outline: none;
}

/* ====================================
   PREÇO EDITORIAL (cena final) — 99 dominante, R$ e ,00 discretos
   ==================================== */
.product-price {
    display: inline-flex;
    align-items: baseline;                 /* R$, 99 e ,00 assentam na MESMA linha */
    justify-content: center;
    gap: 0.04em;
    font-family: var(--font-serif);
    color: var(--color-gold-light);        /* champagne existente */
    line-height: 1;
    font-size: clamp(42px, 5vw, 60px);     /* base = dígitos dominantes (99) */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* R$ e ,00 menores, mas alinhados pela base (sem flutuar como expoente) */
.product-price__currency {
    font-size: 0.4em;
    font-weight: 500;
    letter-spacing: 0.03em;
    opacity: 0.82;
    margin-right: 0.06em;
}

.product-price__integer {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.product-price__cents {
    font-size: 0.5em;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.82;
}

/* ====================================
   BARRA DE COMPRA FIXA (somente mobile)
   Visível durante as fases; entra/sai por transform + opacity.
   ==================================== */
.sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;                 /* abaixo do header (100), acima do conteúdo */
    display: none;               /* desktop: nunca aparece (ver media query) */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px clamp(14px, 4vw, 20px);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 54px;            /* ~15% mais baixa, mantendo área de toque */
    background: linear-gradient(180deg,
        rgba(8, 5, 2, 0.96) 0%,
        rgba(3, 2, 1, 0.99) 100%);
    border-top: 1px solid rgba(214, 166, 62, 0.18);  /* separação quase imperceptível */
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease;
}

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

.sticky-buy__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    min-width: 0;
}

.sticky-buy__brand {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-cream);
    opacity: 0.85;              /* importância secundária: nome < preço < CTA */
    white-space: nowrap;
}

.sticky-buy__price {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;          /* preço um pouco mais notável */
    letter-spacing: 0.02em;
    color: var(--color-gold-light);
}

.sticky-buy__button {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-black);
    background: linear-gradient(120deg,
        var(--color-gold) 0%,
        var(--color-gold-light) 50%,
        var(--color-gold) 100%);
    padding: 12px 20px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(214, 166, 62, 0.22);  /* halo quente sutil, sem neon */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.sticky-buy__button:hover,
.sticky-buy__button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(232, 200, 110, 0.32);
    outline: none;
}

/* Só existe no mobile */
@media (max-width: 768px) {
    .sticky-buy {
        display: flex;
    }
}

/* Telas muito estreitas: reduz tipografia sem esconder o preço */
@media (max-width: 360px) {
    .sticky-buy {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .sticky-buy__brand {
        font-size: 10px;
        letter-spacing: 0.16em;
    }
    .sticky-buy__price {
        font-size: 16px;
    }
    .sticky-buy__button {
        font-size: 11px;
        padding: 12px 16px;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 768px) {
    /* Mensagem editorial: no mobile, afasta "TERMINA INESQUECÍVEL" do chão/reflexo
       (mais respiro embaixo) e "COMEÇA LEVE" do topo, para ambos caírem em zonas
       escuras e legíveis, sem colar nas bordas. */
    .experience-final {
        padding-top: clamp(64px, 13svh, 120px);
        padding-bottom: clamp(76px, 17svh, 140px);
    }

    .experience-cta {
        padding: clamp(58px, 12svh, 110px) 22px clamp(40px, 9svh, 84px);
    }
    .experience-cta__brand {
        font-size: clamp(30px, 8vw, 44px);
    }
    .experience-cta__meta {
        font-size: clamp(11px, 3vw, 13px);
        letter-spacing: 0.14em;
    }
    .experience-cta__bottom {
        position: relative;
    }
    /* Painel de leitura suave atrás da frase + botão no mobile: garante contraste
       mesmo quando o grupo se aproxima da base do frasco. */
    .experience-cta__bottom::before {
        content: "";
        position: absolute;
        inset: -22px -6vw;
        z-index: -1;
        background: radial-gradient(ellipse at center,
            rgba(5, 4, 3, 0.68) 0%,
            rgba(5, 4, 3, 0.34) 56%,
            transparent 82%);
        filter: blur(10px);
        pointer-events: none;
    }
    .experience-cta__sentence {
        font-size: clamp(15px, 4.4vw, 19px);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9),
                     0 4px 18px rgba(0, 0, 0, 0.7);
    }
    .experience-cta__button {
        width: min(88vw, 360px);
        min-width: 0;
    }
}

/* ====================================
   INDICADOR DE PROGRESSO
   ==================================== */

.experience-progress {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 24px);
    opacity: 0.6;
}

.experience-progress span[data-step] {
    font-family: var(--font-sans);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 500;
    color: var(--color-cream);
    letter-spacing: 0.1em;
    transition: color 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0.5;
}

.experience-progress span[data-step].is-active {
    color: var(--color-gold);
    opacity: 1;
}

.experience-progress__track {
    width: clamp(30px, 4vw, 50px);
    height: 1px;
    background-color: rgba(243, 233, 213, 0.3);
    position: relative;
    display: block;
}

.experience-progress__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--color-gold);
    width: 0%;
}

/* ====================================
   MOBILE RESPONSIVIDADE
   ==================================== */

@media (max-width: 768px) {
    /* Mobile: textos um pouco mais baixos (saem de trás do header/menu fixo)
       e mais próximos do frasco, sem colar no topo. */
    .experience-text--01,
    .experience-text--02,
    .experience-text--03 {
        left: 50%;
        right: auto;
        top: 10%;
        bottom: auto;
        transform: translateX(-50%);
        text-align: center;
        max-width: 88vw;
        width: 88vw;
        margin: 0;
    }

    /* Mobile: mostra a quebra de linha editorial do headline */
    .hl-br { display: inline; }

    .experience-text__index {
        font-size: clamp(30px, 6vw, 44px);
        margin-bottom: 6px;
    }

    .experience-text__title {
        font-size: clamp(17px, 2.6vw, 26px);
        margin-bottom: 10px;
    }

    .experience-text__notes {
        margin-bottom: 16px;
    }

    .experience-text__headline {
        font-size: clamp(26px, 7vw, 40px);
        margin-bottom: 14px;
    }

    .experience-text__desc {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .experience-progress {
        /* Sobe acima da barra de compra fixa (mobile), respeitando safe-area. */
        bottom: calc(84px + env(safe-area-inset-bottom));
        gap: clamp(12px, 2vw, 16px);
    }

    /* Reduzir decorações na Fase 01 */
    .phase01-gloss--right,
    .phase01-arc--3,
    .phase01-particle--4 {
        display: none;
    }

    /* Reduzir pétalas na Fase 02 para 3 (remover frente desfocada) */
    .petal-layer--front {
        display: none;
    }

    /* Reduzir névoa na Fase 03 */
    .phase03-mist--2 {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Reduzir assets na Fase 01 */
    .citrus-ray--2,
    .citrus-drop--2 {
        display: none;
    }

    /* Reduzir assets na Fase 02 */
    .petal-back--3,
    .petal-back--4,
    .petal-mid--2 {
        display: none;
    }

    /* Reduzir assets na Fase 03 */
    .amber-veil-mid,
    .amber-wood--1 {
        display: none;
    }
}

@media (max-width: 480px) {
    .experience-text--01,
    .experience-text--02,
    .experience-text--03 {
        top: 9%;
        bottom: auto;
        max-width: 90vw;
        width: 90vw;
    }

    .experience-text__index {
        font-size: clamp(26px, 5vw, 36px);
    }

    .experience-text__title {
        font-size: clamp(15px, 2.4vw, 22px);
    }

    .experience-text__notes {
        font-size: clamp(10px, 1vw, 12px);
    }

    .experience-text__headline {
        font-size: clamp(24px, 7vw, 36px);
    }

    .experience-text__desc {
        font-size: clamp(13px, 1.2vw, 15px);
    }

    .experience-final__small {
        font-size: clamp(19px, 5.5vw, 26px);
        margin-bottom: 12px;
    }

    .experience-final__big {
        font-size: clamp(36px, 9vw, 56px);
    }

    .experience-progress {
        bottom: calc(80px + env(safe-area-inset-bottom));
        gap: 10px;
    }

    .experience-progress span[data-step] {
        font-size: 10px;
    }

    /* Assets muito reduzidos no mobile 480px */
    .citrus-bokeh--2,
    .citrus-ray--1,
    .citrus-splash--left {
        display: none;
    }

    .petal-back--1,
    .petal-back--2,
    .petal-mid--1,
    .petal-drop {
        display: none;
    }

    .amber-sphere--2,
    .amber-dust {
        display: none;
    }
}

/* ====================================
   FALLBACK ESTÁTICO (prefers-reduced-motion)
   ==================================== */

.fragrance-experience--static .experience-atmosphere,
.fragrance-experience--static .experience-decor,
.fragrance-experience--static .experience-text,
.fragrance-experience--static .experience-product-wrap,
.fragrance-experience--static .experience-final {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    height: auto;
    width: 100%;
}

.fragrance-experience--static .experience-stage {
    height: auto;
}

.fragrance-experience--static {
    height: auto;
}

.fragrance-experience--static .experience-text {
    max-width: 100%;
    text-align: center;
    padding: 40px 20px;
    margin: 20px 0;
}

.fragrance-experience--static .experience-product-wrap {
    margin: 40px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.fragrance-experience--static .experience-progress {
    position: static;
    transform: none;
    margin: 40px 0;
    justify-content: center;
}