/* ================================================================
   SAVON — BLOCOS DA SEGUNDA METADE DA HOME.
   S-DUO (#duo) · S-USO (#uso) · S-FAQ (#faq) · FECHAMENTO (#fim).

   Todos em FLUXO NORMAL: nenhum pin, nenhum scrub. A parte alta da
   página já conta a história com movimento; daqui em diante o que a
   pessoa precisa é ler, comparar e decidir — e nada aqui pode
   custar mais do que uma transição CSS.

   Repouso = seção completa (sem JS, sem reduced-motion). `.is-live`
   é posta pelo js/sv-blocks.js e só então os elementos `.sv-rv`
   nascem recolhidos; `.is-in` os revela com escalonamento por `--i`.
   Prefixos --du- / --us- / --fq- / --fi-.
   ================================================================ */

/* as seções vivem sobre o ambiente da página e ACIMA do palco sticky
   da S02 (z 2) — mesmo andar da S03 */
.sv-block {
    position: relative; isolation: isolate; z-index: 3;
    background: transparent; color: var(--sv-ink);
    scroll-margin-top: 72px;
    padding-left:  max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right));
}

/* ---------- revelação leve (transform/opacity, nada mais) ---------- */
.sv-block.is-live .sv-rv {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.8s var(--sv-ease), transform 0.8s var(--sv-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.sv-block.is-live.is-in .sv-rv { opacity: 1; transform: none; }

/* tipografia de cabeçalho compartilhada pelos quatro blocos — a mesma
   régua da S02/S03 para a página ler como UMA voz */
.sv-duo__eyebrow, .sv-uso__eyebrow, .sv-faq__eyebrow {
    display: block; font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10.5px, 0.82vw, 12.5px);
    letter-spacing: 0.34em; text-transform: uppercase;
    color: var(--sv-gold-ink); margin: 0 0 clamp(12px, 1.8vh, 18px);
}
.sv-duo__title, .sv-uso__title, .sv-faq__title {
    font-family: var(--sv-serif); font-weight: 500;
    line-height: 1.08; letter-spacing: 0.01em;
    color: var(--sv-ink); margin: 0;
}

/* ================================================================
   S-DUO — dupla, união, conclusão.
   Território neutro SAVON: marfim/champagne/perolado com um glow
   dourado e um rosé discretíssimo — nunca preto + rosa divididos.
   ================================================================ */
.sv-duo {
    --du-h: clamp(380px, 58vh, 640px);
    padding-top: clamp(84px, 12vh, 150px);
    padding-bottom: clamp(72px, 10vh, 130px);
    overflow: hidden;
}
@supports (height: 1svh) { .sv-duo { --du-h: clamp(380px, 58svh, 640px); } }

/* luz da coleção: um único halo largo atrás da composição */
.sv-duo__glow {
    position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(42% 46% at 32% 56%, rgba(240, 214, 150, 0.36) 0%, rgba(240, 214, 150, 0) 70%),
        radial-gradient(34% 40% at 60% 40%, rgba(236, 190, 208, 0.16) 0%, rgba(236, 190, 208, 0) 72%);
}

.sv-duo__grid {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 96px); align-items: center;
    max-width: 1240px; margin: 0 auto;
}

/* ---------- a composição ----------
   Mademoiselle à frente e à esquerda, Butterfly um passo atrás e à
   direita, as duas iluminadas pelo MESMO halo e pousadas na MESMA
   sombra: é isso que as lê como coleção, não como dois anúncios. */
.sv-duo__scene {
    position: relative; margin: 0; height: var(--du-h);
}
.sv-duo__halo {
    position: absolute; left: 50%; top: 50%; width: 118%; height: 92%;
    transform: translate(-50%, -48%);
    background: radial-gradient(closest-side ellipse at 50% 52%,
        rgba(255, 250, 238, 0.95) 0%, rgba(247, 232, 200, 0.5) 40%, rgba(247, 232, 200, 0) 76%);
}
.sv-duo__contact {
    position: absolute; left: 50%; bottom: 3%; width: 62%; height: 7%;
    transform: translateX(-48%);
    background: radial-gradient(closest-side ellipse, rgba(92, 64, 26, 0.26) 0%, rgba(92, 64, 26, 0) 100%);
    filter: blur(4px);
}
.sv-duo__bottle {
    position: absolute; bottom: 6%; left: 50%;
    height: 90%; width: auto;
    filter: drop-shadow(0 22px 34px rgba(60, 40, 16, 0.22));
}
.sv-duo__bottle--m { z-index: 2; transform: translateX(-66%); }
.sv-duo__bottle--b {
    z-index: 1; transform: translateX(-22%) translateY(-3%) scale(0.9);
    transform-origin: 50% 100%;
    opacity: 0.97;
    filter: drop-shadow(0 18px 30px rgba(60, 40, 16, 0.16));
}
/* entrada da composição: as duas se aproximam a partir das bordas */
.sv-block.is-live .sv-duo__bottle {
    transition: transform 1.1s var(--sv-ease), opacity 0.9s var(--sv-ease);
}
.sv-block.is-live:not(.is-in) .sv-duo__bottle--m { transform: translateX(-84%); opacity: 0; }
.sv-block.is-live:not(.is-in) .sv-duo__bottle--b { transform: translateX(-4%) translateY(-3%) scale(0.9); opacity: 0; }

/* ---------- a copy ---------- */
.sv-duo__copy { max-width: 520px; }
.sv-duo__title { font-size: clamp(30px, 3.3vw, 52px); }
.sv-duo__line {
    font-family: var(--sv-serif); font-style: italic; font-weight: 400;
    font-size: clamp(17px, 1.45vw, 22px); line-height: 1.4;
    color: var(--sv-body); margin: 0;
}
.sv-duo__line:first-of-type { margin-top: clamp(16px, 2.4vh, 26px); }
.sv-duo__line + .sv-duo__line { margin-top: 4px; }

/* três fatos: hairline em cima, número em serifa, explicação curta */
.sv-duo__facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 26px);
    margin: clamp(26px, 4vh, 40px) 0 0;
}
.sv-duo__fact {
    border-top: 1px solid var(--sv-hair);
    padding-top: clamp(12px, 1.6vh, 16px);
}
.sv-duo__fact dt {
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(17px, 1.32vw, 22px); line-height: 1.1;
    color: var(--sv-gold-ink);
}
.sv-duo__fact--save dt { color: var(--sv-rose-ink); white-space: nowrap; }
.sv-duo__fact dd {
    font-family: var(--sv-sans); font-weight: 500;
    font-size: clamp(11.5px, 0.86vw, 13px); line-height: 1.55;
    color: var(--sv-body); margin: 6px 0 0;
}
.sv-duo__cta { margin-top: clamp(26px, 4vh, 40px); }

/* ================================================================
   S-USO — três pontos editoriais, sem imagem: o produto acabou de
   ocupar a tela inteira; aqui é a régua e a leitura.
   ================================================================ */
.sv-uso {
    padding-top: clamp(64px, 9vh, 110px);
    padding-bottom: clamp(64px, 9vh, 110px);
}
.sv-uso__head { max-width: 720px; margin: 0 auto clamp(36px, 5.5vh, 64px); text-align: center; }
.sv-uso__title { font-size: clamp(26px, 2.8vw, 44px); }

.sv-uso__list {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: 1100px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 48px);
}
.sv-uso__item {
    border-top: 1px solid var(--sv-hair);
    padding-top: clamp(16px, 2.4vh, 24px);
}
.sv-uso__num {
    display: block; font-family: var(--sv-sans); font-weight: 600;
    font-size: 10.5px; letter-spacing: 0.3em;
    color: var(--sv-gold-ink); opacity: 0.85;
}
.sv-uso__name {
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(22px, 1.9vw, 30px); line-height: 1.1;
    color: var(--sv-ink); margin: clamp(8px, 1.2vh, 12px) 0 0;
}
.sv-uso__text {
    font-family: var(--sv-sans); font-weight: 500;
    font-size: clamp(12.5px, 0.95vw, 14.5px); line-height: 1.6;
    color: var(--sv-body); margin: clamp(8px, 1.2vh, 12px) 0 0;
    max-width: 30ch;
}

/* ================================================================
   S-FAQ — accordion fino. <details> nativo; o JS só anima a altura
   (grid-template-rows 0fr → 1fr) e segura o fechamento até o fim
   da transição. Sem JS abre e fecha na hora, inteiro.
   ================================================================ */
.sv-faq {
    padding-top: clamp(64px, 9vh, 110px);
    padding-bottom: clamp(64px, 9vh, 110px);
}
.sv-faq__head { max-width: 720px; margin: 0 auto clamp(30px, 4.5vh, 52px); text-align: center; }
.sv-faq__title { font-size: clamp(26px, 2.8vw, 44px); }

.sv-faq__list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--sv-hair); }
.sv-faq__item { border-bottom: 1px solid var(--sv-hair); }
.sv-faq__q {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: clamp(16px, 2.4vh, 22px) 2px;
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(17px, 1.4vw, 21px); line-height: 1.3;
    color: var(--sv-ink);
    transition: color 0.3s var(--sv-ease);
}
.sv-faq__q::-webkit-details-marker { display: none; }
.sv-faq__q::marker { content: ""; }
.sv-faq__q:hover { color: var(--sv-gold-ink); }
.sv-faq__q:focus-visible { outline: 2px solid var(--sv-gold-ink); outline-offset: 4px; border-radius: 2px; }
/* o sinal: um "+" de hairlines que vira "−" */
.sv-faq__icon {
    position: relative; flex: none; width: 14px; height: 14px;
    transition: transform 0.4s var(--sv-ease);
}
.sv-faq__icon::before, .sv-faq__icon::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 14px; height: 1px; background: var(--sv-gold-ink);
    transform: translateY(-50%);
}
.sv-faq__icon::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.4s var(--sv-ease); }
.sv-faq__item[open] .sv-faq__icon::after { transform: translateY(-50%) rotate(0deg); }
.sv-faq__item[open] .sv-faq__icon { transform: rotate(180deg); }

.sv-faq__body { display: grid; grid-template-rows: 1fr; }
.sv-faq__a { overflow: hidden; min-height: 0; }
.sv-faq__a p {
    font-family: var(--sv-sans); font-weight: 500;
    font-size: clamp(13px, 0.98vw, 15px); line-height: 1.65;
    color: var(--sv-body); max-width: 62ch;
    margin: 0 0 clamp(18px, 2.6vh, 24px);
}
/* animação SÓ quando o JS assume (`.is-anim`); sem ele, nativo */
.sv-faq.is-anim .sv-faq__body {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s var(--sv-ease);
}
.sv-faq.is-anim .sv-faq__item.is-open .sv-faq__body { grid-template-rows: 1fr; }

/* ================================================================
   FECHAMENTO — a assinatura da página.
   ================================================================ */
.sv-fim {
    text-align: center;
    padding-top: clamp(72px, 11vh, 140px);
    padding-bottom: max(clamp(48px, 7vh, 88px), env(safe-area-inset-bottom));
}
.sv-fim__glow {
    position: absolute; left: 50%; top: 40%; width: min(120vw, 1100px); height: 70%;
    transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side ellipse, rgba(240, 214, 150, 0.28) 0%, rgba(240, 214, 150, 0) 72%);
}
.sv-fim__title {
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(30px, 3.8vw, 60px); line-height: 1.08; letter-spacing: 0.01em;
    color: var(--sv-ink); margin: 0;
}
.sv-fim__title span { display: block; }
.sv-fim__l2 { font-style: italic; font-weight: 400; color: var(--sv-gold-ink); }
.sv-fim__line {
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(11px, 0.9vw, 13.5px); letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--sv-body); margin: clamp(18px, 2.8vh, 28px) 0 0;
}
.sv-fim__cta { margin-top: clamp(26px, 4vh, 40px); }
.sv-fim__foot { margin: clamp(56px, 9vh, 110px) auto 0; }
.sv-fim__logo {
    display: block; margin: 0 auto; width: auto;
    height: clamp(30px, 3vw, 44px); opacity: 0.9;
    filter: drop-shadow(0 1px 5px rgba(92, 64, 26, 0.2));
}
.sv-fim__note {
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10.5px, 0.8vw, 12px);
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sv-body); opacity: 0.72;
    margin: clamp(14px, 2vh, 20px) 0 0;
}

/* ================================================================
   TABLET / MOBILE
   ================================================================ */
@media (max-width: 1024px) {
    .sv-duo__grid { gap: clamp(24px, 4vw, 48px); }
    .sv-duo__facts { grid-template-columns: 1fr; gap: 0; }
    .sv-duo__fact { padding: clamp(12px, 1.6vh, 16px) 0; border-top: 1px solid var(--sv-hair); }
    .sv-duo__fact dd { margin-top: 4px; }
}

@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
    .sv-duo { --du-h: clamp(300px, 44vh, 440px); padding-top: clamp(56px, 8vh, 96px); }
    @supports (height: 1svh) { .sv-duo { --du-h: clamp(300px, 44svh, 440px); } }
    .sv-duo__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.5vh, 32px); }
    .sv-duo__scene { max-width: 520px; width: 100%; margin: 0 auto; }
    .sv-duo__copy { max-width: 560px; margin: 0 auto; text-align: center; }
    .sv-duo__title { font-size: clamp(28px, 7.4vw, 40px); }
    .sv-duo__line { font-size: clamp(16px, 4.4vw, 19px); }
    .sv-duo__facts { text-align: left; }
    .sv-duo__fact {
        display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
        align-items: baseline; gap: 14px;
    }
    .sv-duo__fact dd { margin: 0; }
    .sv-duo__cta { width: 100%; max-width: 340px; }

    .sv-uso__list { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; }
    .sv-uso__item {
        display: grid; grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 14px; padding: clamp(18px, 2.6vh, 24px) 0;
    }
    .sv-uso__num { grid-row: 1 / 3; padding-top: 6px; }
    .sv-uso__name { margin: 0; font-size: clamp(21px, 5.8vw, 26px); }
    .sv-uso__text { margin-top: 6px; max-width: none; }
    .sv-uso__title, .sv-faq__title { font-size: clamp(24px, 6.6vw, 34px); }

    .sv-faq__q { font-size: clamp(16px, 4.5vw, 19px); }
    .sv-fim__title { font-size: clamp(28px, 8vw, 44px); }
}

/* ================================================================
   BARRA FIXA INFERIOR — SÓ MOBILE. Superfície de porcelana
   translúcida sobre o conteúdo, hairline em cima, o CTA da página.
   Nasce fora da tela; `.is-show` (JS) a traz. `visibility` entra na
   transição para ela sair da ordem de foco quando escondida.
   ================================================================ */
.sv-bar { display: none; }
@media (max-width: 768px) {
    .sv-bar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
        padding: 10px max(16px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
        background: rgba(251, 247, 240, 0.9);
        border-top: 1px solid var(--sv-hair-soft);
        box-shadow: 0 -10px 30px rgba(60, 40, 16, 0.08);
        transform: translateY(110%); opacity: 0; visibility: hidden;
        transition: transform 0.45s var(--sv-ease), opacity 0.35s var(--sv-ease), visibility 0s linear 0.45s;
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .sv-bar { background: rgba(251, 247, 240, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    }
    .sv-bar.is-show {
        transform: none; opacity: 1; visibility: visible;
        transition: transform 0.45s var(--sv-ease), opacity 0.35s var(--sv-ease), visibility 0s;
    }
    .sv-bar__cta { display: flex; width: 100%; height: 52px; font-size: 12px; }
    /* o sinal "+" não disputa a borda com o fio lateral */
    .sv-faq__list { padding-right: 18px; }
    /* o último item do FAQ não pode ficar atrás da barra */
    .sv-faq { padding-bottom: calc(clamp(64px, 9vh, 110px) + 72px); }
}

/* ================================================================
   REDUCED MOTION — nada se move; o repouso já é a página inteira.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .sv-block.is-live .sv-rv, .sv-block.is-live .sv-duo__bottle,
    .sv-faq__icon, .sv-faq__icon::after, .sv-faq.is-anim .sv-faq__body, .sv-faq__q,
    .sv-bar, .sv-bar.is-show {
        transition: none;
    }
}