/* ================================================================
   NOVAS SEÇÕES — "Conheça Mademoiselle" (respiro) + Oferta realocada
   Isolado do resto para evitar regressões. Reutiliza os tokens de cor
   e a tipografia já existentes. Revelação por IntersectionObserver
   (classe .is-revealed) — sem novos ScrollTriggers.
   ================================================================ */

/* ============================================================
   CONHEÇA MADEMOISELLE (respiro visual / argumentos de compra)
   ============================================================ */
.product-knowledge {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    /* Preto profundo com um leve âmbar central (menos cenário, mais produto) */
    background:
        radial-gradient(ellipse 60% 55% at 50% 44%, rgba(48, 28, 10, 0.5) 0%, rgba(6, 4, 2, 0) 62%),
        var(--color-black);
    padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 84px);
    color: var(--color-cream);
}

/* Halo dourado suave atrás do frasco (pulsação quase imperceptível) */
.pk__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(72vw, 760px);
    height: min(72vw, 760px);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(215, 168, 74, 0.14) 0%,
        rgba(215, 168, 74, 0.05) 42%,
        transparent 68%);
    animation: pkGlowBreath 9s ease-in-out infinite;
}

@keyframes pkGlowBreath {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* --- Cabeçalho editorial --- */
.pk__head {
    position: relative;
    z-index: 3;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease, transform 0.8s ease;
}
.product-knowledge.is-revealed .pk__head {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
}
.pk__eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0.75;
    margin-bottom: 14px;
}
.pk__title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--color-cream);
    margin: 0;
}

/* --- Palco: frasco central + 4 argumentos ao redor (desktop) --- */
.pk__stage {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: clamp(28px, 5vh, 56px) auto 0;
    min-height: clamp(360px, 50vh, 560px);
}

.pk__product {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    height: clamp(300px, 46vh, 520px);
    width: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
    opacity: 0;
    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-knowledge.is-revealed .pk__product {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.pk__facts {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pk__fact {
    position: absolute;
    max-width: 250px;
    z-index: 3;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-knowledge.is-revealed .pk__fact { opacity: 1; transform: none; }

.pk__fact--tl { top: 4%;  left: 0;  text-align: left; }
.pk__fact--bl { bottom: 4%; left: 0;  text-align: left; }
.pk__fact--tr { top: 4%;  right: 0; text-align: right; }
.pk__fact--br { bottom: 4%; right: 0; text-align: right; }

.product-knowledge.is-revealed .pk__fact--tl { transition-delay: 0.35s; }
.product-knowledge.is-revealed .pk__fact--tr { transition-delay: 0.45s; }
.product-knowledge.is-revealed .pk__fact--bl { transition-delay: 0.55s; }
.product-knowledge.is-revealed .pk__fact--br { transition-delay: 0.65s; }

.pk__fact-title {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}
.pk__fact-rule {
    display: block;
    width: 34px;
    height: 1px;
    margin: 11px 0;
    background: linear-gradient(90deg, var(--color-gold), transparent);
}
.pk__fact--tr .pk__fact-rule,
.pk__fact--br .pk__fact-rule {
    margin-left: auto;
    background: linear-gradient(270deg, var(--color-gold), transparent);
}
.pk__fact-desc {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--color-cream);
    opacity: 0.8;
}

/* --- Como usar (secundário) + disclaimer --- */
.pk__usage {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 540px;
    margin: clamp(30px, 5vh, 58px) auto 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.product-knowledge.is-revealed .pk__usage { opacity: 1; transition-delay: 0.7s; }
.pk__usage-title {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0.8;
    margin-bottom: 10px;
}
.pk__usage-text {
    font-family: var(--font-sans);
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.6;
    color: var(--color-cream);
    opacity: 0.72;
    margin: 0;
}
.pk__disclaimer {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 540px;
    margin: 20px auto 0;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-cream);
    opacity: 0.4;
}

/* ============================================================
   OFERTA FINAL (realocada) — reutiliza .experience-cta/.product-price
   ============================================================ */
.final-offer {
    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    background: var(--color-black);
    isolation: isolate;
}
.final-offer__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--color-black);
}
.final-offer__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.final-offer__glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 42% at 50% 50%,
        rgba(226, 190, 120, 0.16) 0%,
        rgba(210, 170, 100, 0.05) 45%,
        transparent 72%);
}
.final-offer__product {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%) scale(0.98);
    z-index: 5;
    height: clamp(300px, 44svh, 500px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.final-offer.is-revealed .final-offer__product {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Conteúdo comercial reutilizado (.experience-cta) — revelado com stagger */
.final-offer .experience-cta {
    opacity: 1;              /* container visível; revelamos os filhos */
    pointer-events: none;
}
.final-offer.is-revealed .experience-cta { pointer-events: auto; }

.final-offer .experience-cta__top,
.final-offer .product-price,
.final-offer .experience-cta__sentence,
.final-offer .experience-cta__button {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.final-offer.is-revealed .experience-cta__top      { transition-delay: 0.15s; }
.final-offer.is-revealed .product-price            { transition-delay: 0.35s; }
.final-offer.is-revealed .experience-cta__sentence { transition-delay: 0.5s; }
.final-offer.is-revealed .experience-cta__button   { transition-delay: 0.65s; }
.final-offer.is-revealed .experience-cta__top,
.final-offer.is-revealed .product-price,
.final-offer.is-revealed .experience-cta__sentence,
.final-offer.is-revealed .experience-cta__button {
    opacity: 1;
    transform: none;
}

/* ============================================================
   TABLET (769–1024): aproxima os argumentos, reduz o frasco
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    .pk__fact { max-width: 200px; }
    .pk__product { height: clamp(280px, 40vh, 430px); }
    .pk__stage { max-width: 900px; }
}

/* ============================================================
   MOBILE (≤768): frasco no topo, argumentos em grade 2x2
   ============================================================ */
@media (max-width: 768px) {
    .product-knowledge {
        min-height: auto;
        justify-content: flex-start;
        /* padding-bottom deixa espaço para a barra fixa de compra + safe-area */
        padding: clamp(58px, 9vh, 96px) 22px
                 calc(clamp(40px, 7vh, 72px) + 66px + env(safe-area-inset-bottom));
    }
    .pk__stage {
        min-height: 0;
        margin-top: 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pk__product {
        position: static;
        transform: translateY(12px) scale(0.98);
        height: clamp(220px, 34svh, 320px);
        margin-bottom: 30px;
    }
    .product-knowledge.is-revealed .pk__product { transform: none; }

    .pk__facts {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 20px;
        width: 100%;
        max-width: 440px;
    }
    .pk__fact {
        position: static;
        max-width: none;
        text-align: left;
    }
    .pk__fact--tl, .pk__fact--bl, .pk__fact--tr, .pk__fact--br {
        top: auto; bottom: auto; left: auto; right: auto;
        text-align: left;
    }
    .pk__fact--tr .pk__fact-rule,
    .pk__fact--br .pk__fact-rule {
        margin-left: 0;
        background: linear-gradient(90deg, var(--color-gold), transparent);
    }
    /* stagger em ordem de leitura */
    .product-knowledge.is-revealed .pk__fact--tl { transition-delay: 0.30s; }
    .product-knowledge.is-revealed .pk__fact--tr { transition-delay: 0.40s; }
    .product-knowledge.is-revealed .pk__fact--bl { transition-delay: 0.50s; }
    .product-knowledge.is-revealed .pk__fact--br { transition-delay: 0.60s; }

    .final-offer__product {
        height: clamp(220px, 30svh, 300px);
    }
}

/* Telas muito estreitas: 1 coluna se 2x2 apertar a leitura */
@media (max-width: 360px) {
    .pk__facts { grid-template-columns: 1fr; max-width: 300px; gap: 20px; }
}

/* ============================================================
   Acessibilidade: sem movimento — conteúdo estático e visível
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pk__glow { animation: none; }
    .pk__head, .pk__product, .pk__fact, .pk__usage,
    .final-offer__product,
    .final-offer .experience-cta__top,
    .final-offer .product-price,
    .final-offer .experience-cta__sentence,
    .final-offer .experience-cta__button {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .pk__product { transform: translate(-50%, -50%) !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    .pk__product { transform: none !important; }
}