/* ================================================================
   SAVON — HERO "palco central, dois perfumes em órbita".
   Um único palco: o frasco que está na frente assume TODO o
   universo visual (fundo, atmosfera, copy, tinta de interface).
   Nunca meia tela para cada um, nunca os dois universos juntos.

   REPOUSO (sem JS / reduced-motion) = ESTADO A completo:
   Mademoiselle na frente, Butterfly atrás, fundo e atmosfera
   dela ligados. O JS só assume a partir daí.
   Movimento: js/sv-hero.js
   ================================================================ */
.sv-hero {
    /* geometria do par — fonte única de verdade.
       Os dois frascos têm EXATAMENTE a mesma proporção (2:3), então
       a largura derivada da altura trava escala óptica idêntica. */
    --sv-bottle-h: clamp(360px, 63vh, 640px);
    --sv-bottle-w: calc(var(--sv-bottle-h) * 0.6667);
    /* ÓRBITA (múltiplos da largura do frasco — o JS lê estes tokens):
       ·a = amplitude lateral no cruzamento
       ·s = desvio que SOBRA nos polos. Sem ele sin(0)=0 põe os dois
            frascos concêntricos e o de trás desaparece; com ele a
            elipse é vista de um ângulo e o de trás fica sempre
            deslocado e legível, como pede a composição. */
    --sv-orbit-a: 0.42;
    --sv-orbit-s: 0.22;
    /* deslocamento do palco para a direita — em px, aplicado por
       igual ao fundo, à atmosfera e aos frascos, para que todas as
       camadas compartilhem UMA origem */
    --sv-shift: clamp(60px, 12.5vw, 210px);
    --sv-stage-cx: calc(50% + var(--sv-shift));

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    display: flex; align-items: center;
    background: var(--sv-m-black);
}

/* ================================================================
   CAMADA 0 — FUNDOS. Dois stacks independentes; o de baixo
   (Butterfly) fica sempre em opacity 1 e o de cima (Mademoiselle)
   é que atravessa — assim o crossfade nunca passa por "nada".
   background-image NUNCA é trocado em runtime (evita flicker).
   ================================================================ */
.sv-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sv-bg { position: absolute; inset: 0; }
.sv-bg__photo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.sv-bg--b .sv-bg__photo { background-image: url('../assets/butterfly/hero-background.webp'); }
.sv-bg--m .sv-bg__photo { background-image: url('../assets/mademoiselle-hero-onca.webp'); }

/* coluna de luz âmbar da /mademoiselle: profundidade quente atrás
   do frasco, em screen para virar LUZ e não uma segunda foto */
.sv-bg__amber {
    position: absolute; left: var(--sv-stage-cx); top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 1500px); height: auto;
    mix-blend-mode: screen; opacity: 0.5;
}

/* scrims: garantem contraste da copy à esquerda em cada universo */
.sv-bg--m .sv-bg__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 4, 3, 0.88) 0%, rgba(5, 4, 3, 0.62) 34%, rgba(5, 4, 3, 0) 62%),
        linear-gradient(180deg, rgba(5, 4, 3, 0.7) 0%, rgba(5, 4, 3, 0) 26%);
}
.sv-bg--b .sv-bg__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 249, 250, 0.9) 0%, rgba(255, 249, 250, 0.6) 34%, rgba(255, 249, 250, 0) 64%),
        linear-gradient(180deg, rgba(255, 249, 250, 0.72) 0%, rgba(255, 249, 250, 0) 24%);
}

/* ================================================================
   CAMADA DE PASSAGEM Hero → S02 (match cut).
   `fixed` acima das duas seções, então NENHUM overflow de seção a
   corta. Abaixo do header (z 50) para não cobrir a navegação.
   Fora da passagem: invisível e sem custo de composição.
   ================================================================ */
.sv-handoff {
    position: fixed; inset: 0; z-index: 40;
    pointer-events: none; visibility: hidden;
}
.sv-handoff.is-on { visibility: visible; }
.sv-handoff__b {
    position: absolute; left: 0; top: 0;
    height: auto; opacity: 0;
    transform-origin: 50% 50%;
    user-select: none; -webkit-user-drag: none;
}
.sv-handoff.is-on .sv-handoff__b { will-change: transform, opacity; }
.sv-handoff__b--m { filter: drop-shadow(0 12px 24px rgba(70, 44, 18, 0.32)); }
.sv-handoff__b--b { filter: drop-shadow(0 12px 24px rgba(110, 56, 82, 0.26)); }

/* PRAIA IVORY — a base do Hero SEMPRE termina no território da S02.
   Sem isto a emenda dependeria do instante da órbita: preta se a
   Mademoiselle estiver na frente, perolada se for a Butterfly. */
/* A COR DA MARGEM SEGUE O UNIVERSO: no Mademoiselle (preto/âmbar) a
   base do Hero afunda no preto; no Butterfly (perolado) ela clareia
   para o marfim. A margem marfim sobre o cenário escuro lia como uma
   faixa branca estranha. Duas camadas com crossfade de opacidade
   (gradiente não interpola) — a troca acontece junto com body.is-b,
   no cruzamento da órbita, onde o flash perolado a mascara. Com a
   cortina, a S02 marfim sobe POR CIMA desta margem, então a cor dela
   não afeta mais a emenda entre as seções. */
.sv-hero__shore {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
    height: clamp(90px, 14vh, 190px); pointer-events: none;
    height: clamp(90px, 14svh, 190px); pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(5, 4, 3, 0) 0%, rgba(5, 4, 3, 0.5) 52%, #050403 100%);
}
.sv-hero__shore::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(251, 247, 240, 0) 0%, rgba(251, 247, 240, 0.55) 52%, #FBF7F0 100%);
    opacity: 0;
    transition: opacity 0.9s var(--sv-ease);
}
body.savon.is-b .sv-hero__shore::after { opacity: 1; }

/* FLASH PEROLADO — o estado intermediário neutro. É ele que
   transforma um crossfade em "a luz do palco mudou". Pico no
   cruzamento da órbita; repouso invisível. */
.sv-bg__flash {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(58% 52% at var(--sv-stage-cx) 50%,
        rgba(255, 248, 240, 0.92) 0%, rgba(255, 240, 232, 0.42) 42%, rgba(255, 240, 232, 0) 72%);
}

/* ================================================================
   ATMOSFERA — assets REAIS das páginas individuais.
   `--back` fica atrás dos frascos, `--front` na frente deles.
   Cada elemento declara seu universo em data-uni; o JS acende e
   apaga por universo e desloca os marcados com data-travel.
   ================================================================ */
.sv-atmo { position: absolute; inset: 0; pointer-events: none; }
.sv-atmo--back  { z-index: 1; }
.sv-atmo--front { z-index: 5; }
.sv-fx {
    --fx-o: 1;                  /* opacidade de PROJETO de cada overlay */
    position: absolute; height: auto; user-select: none;
    opacity: 0;                 /* o JS acende o universo ativo */
}
/* repouso sem JS: o universo Mademoiselle já está aceso, cada
   elemento na sua opacidade de projeto */
.sv-fx[data-uni="m"] { opacity: var(--fx-o); }

/* --- Mademoiselle: véus de seda âmbar + bokeh dourado --- */
.sv-fx--veil1 {
    left: -6%; top: -12%; width: min(46vw, 620px);
    --fx-o: 0.5; mix-blend-mode: screen;
}
.sv-fx--veil2 {
    right: -10%; bottom: 2%; width: min(56vw, 780px);
    --fx-o: 0.42; mix-blend-mode: screen;
}
.sv-fx--bokeh {
    left: var(--sv-stage-cx); bottom: 14%;
    width: min(60vw, 820px); transform: translateX(-50%);
    --fx-o: 0.6; mix-blend-mode: screen;
}
.sv-fx--drop {          /* partícula âmbar que viaja com o frasco */
    left: calc(var(--sv-stage-cx) + 11%); top: 62%;
    width: clamp(26px, 2.2vw, 40px); --fx-o: 0.8;
}

/* --- Butterfly: explosão de luz, nuvens, borboletas, pétalas --- */
.sv-fx--burst {
    left: var(--sv-stage-cx); top: 46%;
    width: min(74vw, 1020px); transform: translate(-50%, -50%);
    --fx-o: 0.85; mix-blend-mode: screen;
}
.sv-fx--clouds {
    left: 50%; bottom: -6%; width: max(100%, 1700px);
    transform: translateX(-50%); --fx-o: 0.9;
}
.sv-fx--bfly1 { left: calc(var(--sv-stage-cx) + 13%); top: 21%; width: clamp(84px, 8.4vw, 152px); }
.sv-fx--bfly2 { left: calc(var(--sv-stage-cx) - 22%); top: 55%; width: clamp(58px, 5.4vw, 96px); --fx-o: 0.9; }
.sv-fx--petal1{ left: calc(var(--sv-stage-cx) - 15%); top: 34%; width: clamp(34px, 3.1vw, 56px); }
.sv-fx--petal2{ left: calc(var(--sv-stage-cx) + 20%); bottom: 21%; width: clamp(30px, 2.6vw, 48px); --fx-o: 0.9; }
.sv-fx--spark { left: calc(var(--sv-stage-cx) + 7%); top: 63%; width: clamp(60px, 5.6vw, 104px); --fx-o: 0.8; mix-blend-mode: screen; }

/* respiro dos elementos leves — canal CSS exclusivo (os que o JS
   desloca com data-travel NÃO entram aqui: nada disputa transform) */
@keyframes svFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -11px, 0) rotate(2.5deg); }
}
.sv-fx--bfly1  { animation: svFloat 9s ease-in-out infinite; }
.sv-fx--bfly2  { animation: svFloat 11s ease-in-out infinite reverse; }
.sv-fx--petal2 { animation: svFloat 13s ease-in-out infinite; }

/* ================================================================
   COMPOSIÇÃO — desktop: copy à esquerda, palco centro/direita.
   O palco cruza AS DUAS colunas e é apenas empurrado para a
   direita: os frascos seguem sendo o centro visual, e o momento
   em que eles abrem mais para a esquerda é exatamente o momento
   em que as duas copies estão apagadas.
   ================================================================ */
.sv-hero__inner {
    position: relative; z-index: 8;
    width: 100%; max-width: min(1760px, 100%); margin: 0 auto;
    padding: clamp(96px, 12vh, 150px) clamp(24px, 4vw, 64px) clamp(56px, 8vh, 96px);
    padding-left:  max(clamp(24px, 4vw, 64px), env(safe-area-inset-left));
    padding-right: max(clamp(24px, 4vw, 64px), env(safe-area-inset-right));
    display: grid;
    /* 50% aqui é o centro do conteúdo — que é exatamente o centro do
       palco. 0.92·w é o ponto MAIS À ESQUERDA que um frasco alcança
       na volta inteira (raio da órbita + meia largura na profundidade
       daquele instante) — com a órbita contínua a calha tem de ser
       medida pelo trajeto, não pela posição de repouso. */
    grid-template-columns:
        minmax(0, calc(50% + var(--sv-shift) - var(--sv-bottle-w) * 0.92 - 28px))
        minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(20px, 3vw, 48px);
}
.sv-copy    { grid-area: 1 / 1 / 2 / 2; align-self: end;   position: relative; z-index: 2;
              container-type: inline-size; }
.sv-actions { grid-area: 2 / 1 / 3 / 2; align-self: start; position: relative; z-index: 2; margin-top: clamp(22px, 3.4vh, 38px); }
/* o palco ocupa as duas colunas e é deslocado: fica centrado em
   --sv-stage-cx sem espremer a copy */
.sv-stage   { grid-area: 1 / 1 / 3 / 3; position: relative; z-index: 1; pointer-events: none; }
/* a zona é a única parte do palco que recebe ponteiro */
.sv-stage__zone {
    position: absolute; left: var(--sv-stage-cx); top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--sv-bottle-w) * 2.1);
    height: calc(var(--sv-bottle-h) * 1.15);
    pointer-events: auto;
}

/* ---------- copy: um slot, dois blocos empilhados ---------- */
.sv-copy__slot { display: grid; }
.sv-copy__block {
    grid-area: 1 / 1;
    color: var(--sv-m-cream);
}
.sv-copy__block--b { color: var(--sv-b-ink); opacity: 0; }  /* repouso: estado A */

.sv-copy__eyebrow {
    display: block; font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10.5px, 0.82vw, 12.5px);
    letter-spacing: 0.3em; text-transform: uppercase;
    margin-bottom: clamp(14px, 2vh, 20px);
}
.sv-copy__block--m .sv-copy__eyebrow { color: var(--sv-m-gold); }
.sv-copy__block--b .sv-copy__eyebrow { color: var(--sv-b-pink); }

.sv-copy__title {
    font-family: var(--sv-serif); font-weight: 500;
    /* 13cqw: "MADEMOISELLE" mede ~7.4x o corpo, então 1/7.4 da
       coluna garante que a palavra mais longa SEMPRE caiba */
    font-size: clamp(34px, 13cqw, 86px);
    line-height: 0.98; letter-spacing: 0.02em; text-transform: uppercase;
    margin: 0 0 clamp(12px, 1.8vh, 20px);
}
.sv-copy__block--m .sv-copy__title { color: var(--sv-m-gold-light); }
.sv-copy__block--b .sv-copy__title { color: var(--sv-b-ink); }

.sv-copy__headline {
    font-family: var(--sv-serif); font-style: italic; font-weight: 400;
    font-size: clamp(21px, 2.1vw, 32px); line-height: 1.24;
    margin: 0 0 clamp(12px, 1.8vh, 18px);
}
.sv-copy__support {
    font-family: var(--sv-sans); font-weight: 500;
    font-size: clamp(13.5px, 1.02vw, 16px); line-height: 1.6;
    margin: 0; max-width: 34ch;
}
.sv-copy__block--m .sv-copy__support { color: rgba(243, 233, 213, 0.76); }
.sv-copy__block--b .sv-copy__support { color: var(--sv-b-text); }

/* ---------- ações: CTA fixo + link secundário que troca ---------- */
.sv-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: clamp(52px, 4vw, 60px); padding: 0 clamp(28px, 2.6vw, 44px);
    border-radius: 999px;
    font-family: var(--sv-sans); font-weight: 700;
    font-size: clamp(12px, 0.95vw, 14px);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sv-cta-ink); text-decoration: none; white-space: nowrap;
    background: linear-gradient(135deg, var(--sv-cta-hi) 0%, var(--sv-cta) 55%, var(--sv-cta-lo) 100%);
    box-shadow: 0 8px 26px rgba(139, 101, 32, 0.34);
    transition: transform 0.3s var(--sv-ease), box-shadow 0.3s var(--sv-ease);
}
.sv-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(139, 101, 32, 0.42); }
.sv-cta:focus-visible { outline: 2px solid var(--sv-ui-accent); outline-offset: 4px; }

.sv-actions__more { display: grid; margin-top: clamp(14px, 2vh, 20px); }
.sv-more {
    grid-area: 1 / 1; justify-self: start;
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(11.5px, 0.88vw, 13.5px);
    letter-spacing: 0.1em;
    color: var(--sv-ui-soft); text-decoration: none;
    border-bottom: 1px solid var(--sv-ui-line); padding-bottom: 3px;
    transition: color 0.3s var(--sv-ease), border-color 0.3s var(--sv-ease);
}
.sv-more:hover { color: var(--sv-ui-accent); border-color: var(--sv-ui-accent); }
.sv-more:focus-visible { outline: 2px solid var(--sv-ui-accent); outline-offset: 3px; }
.sv-more--b { opacity: 0; }   /* repouso: estado A */

/* ================================================================
   PALCO — os dois frascos. Cada um é UM wrapper transformado pelo
   JS (uma escrita de transform por frame por frasco); a sombra de
   contato é filha, então acompanha escala e profundidade de graça.
   ================================================================ */
.sv-stage__pit {
    position: absolute; left: var(--sv-stage-cx); top: 50%;
    width: 1px; height: 1px;   /* origem geométrica da órbita */
}
.sv-bottle {
    position: absolute; left: var(--sv-stage-cx); top: 50%;
    width: var(--sv-bottle-w);
    transform: translate(-50%, -50%);
}
/* AS CAMADAS DE COMPOSIÇÃO SÓ EXISTEM ENQUANTO O HERO ESTÁ NA TELA.
   `will-change` permanente segura memória de GPU e piora o scroll —
   a classe é ligada/desligada por ScrollTrigger. */
.sv-hero.is-active .sv-bottle { will-change: transform, filter; }
.sv-hero.is-active .sv-bg__photo { will-change: transform; }
.sv-hero.is-active .sv-bg__flash { will-change: opacity; }
.sv-hero.is-active .sv-fx[data-travel] { will-change: transform, opacity; }
.sv-hero.is-active .sv-copy__block { will-change: transform, opacity; }
.sv-bottle__img {
    display: block; width: 100%; height: auto;
    user-select: none; -webkit-user-drag: none;
}
/* sombra de contato: elipse curta e deslocada, nunca um halo */
.sv-bottle__contact {
    position: absolute; left: 50%; bottom: -2.5%;
    width: 78%; height: 4.2%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side ellipse at 50% 50%,
        rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0) 78%);
    filter: blur(5px);
}
.sv-bottle--m .sv-bottle__img { filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45)); }
.sv-bottle--b .sv-bottle__img { filter: drop-shadow(0 10px 26px rgba(90, 45, 65, 0.28)); }
/* REPOUSO (sem JS) = exatamente o estado A que o JS calcula em θ=0:
   a frente deslocada +s, o fundo −s, 4,5% mais alto e a 0.82.
   Sem este deslocamento os dois ficariam concêntricos e o frasco
   de trás sumiria para quem abre a página sem JavaScript. */
.sv-bottle--m {
    z-index: 4;
    transform: translate(-50%, -50%)
               translateX(calc(var(--sv-bottle-w) * var(--sv-orbit-s)));
}
.sv-bottle--b {
    z-index: 2;
    transform: translate(-50%, -50%)
               translate(calc(var(--sv-bottle-w) * var(--sv-orbit-s) * -1),
                         calc(var(--sv-bottle-h) * -0.105))
               scale(0.82);
}

/* ================================================================
   CONTROLES — indicadores discretos, um por fragrância.
   ================================================================ */
.sv-dots {
    position: absolute; z-index: 10;
    left: var(--sv-stage-cx); bottom: clamp(22px, 4vh, 44px);
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 18px;
}
.sv-dot {
    appearance: none; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 2px;
    font-family: var(--sv-sans); font-weight: 600;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sv-ui); opacity: 0.55;
    text-shadow: 0 1px 10px var(--sv-ui-halo), 0 0 3px var(--sv-ui-halo);
    transition: opacity 0.35s var(--sv-ease), color 0.45s var(--sv-ease),
                text-shadow 0.45s var(--sv-ease);
}
.sv-dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; transform: scale(0.6);
    transition: transform 0.4s var(--sv-ease);
}
.sv-dot[aria-pressed="true"] { opacity: 1; color: var(--sv-ui-accent); }
.sv-dot[aria-pressed="true"]::before { transform: scale(1); }
.sv-dot:hover { opacity: 0.9; }
.sv-dot:focus-visible { outline: 2px solid var(--sv-ui-accent); outline-offset: 4px; opacity: 1; }

/* âncora do Kit — a seção real vem depois e substitui isto */
.sv-anchor { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

/* ================================================================
   ≤1024px — a copy encolhe antes de virar coluna única
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .sv-hero { --sv-bottle-h: clamp(330px, 54vh, 500px);
             --sv-orbit-a: 0.42; --sv-orbit-s: 0.20;
             --sv-shift: clamp(30px, 8vw, 90px); }
    @supports (height: 1svh) {
        .sv-hero { --sv-bottle-h: clamp(330px, 54svh, 500px); }
    }
}

/* ================================================================
   ≤768px — COMPOSIÇÃO PRÓPRIA, não o desktop espremido.
   Ordem: header → copy curta → palco → CTA → link individual.
   Órbita com amplitude bem menor (o JS lê --sv-orbit-a) e metade
   dos overlays: performance acima de decoração.
   ================================================================ */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    .sv-hero {
        /* 43svh (e não 47) deixa folga para a copy mais longa dos dois
           universos — a da Butterfly quebra em 3 linhas */
        --sv-bottle-h: clamp(260px, 43vh, 390px);
        /* amplitude bem menor que no desktop: o palco é estreito e
           NADA pode ser cortado pela borda */
        --sv-orbit-a: 0.20;
        --sv-orbit-s: 0.12;
        --sv-shift: 0px;
        min-height: 100vh;
        min-height: 100svh;
        align-items: stretch;
    }
    .sv-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        align-items: center; justify-items: center;
        text-align: center;
        /* o padding-bottom reserva a faixa dos indicadores, que são
           absolutos — assim eles nunca encostam no link individual */
        padding: clamp(72px, 11vh, 98px) 24px clamp(56px, 8vh, 78px);
        padding: clamp(72px, 11svh, 98px) 24px clamp(56px, 8svh, 78px);
        padding-left:  max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        row-gap: clamp(16px, 3vh, 30px);
        row-gap: clamp(16px, 3svh, 30px);
    }
    /* container-type: inline-size faz a largura colapsar quando o
       item do grid não é esticado (justify-items: center). No
       empilhado a copy precisa de largura explícita, senão o texto
       inteiro vaza pela direita. */
    .sv-copy    { grid-area: 1 / 1; align-self: start; width: 100%; }
    .sv-stage   { grid-area: 2 / 1; align-self: center; width: 100%; }
    .sv-actions { grid-area: 3 / 1; align-self: end; margin-top: 0; width: 100%; }

    /* ~80% da largura útil: o título respira em vez de ir de
       borda a borda */
    .sv-copy__title    { font-size: clamp(30px, 9.6vw, 46px); }
    .sv-copy__headline { font-size: clamp(17px, 4.9vw, 22px); }
    .sv-copy__support  { font-size: 13.5px; max-width: 27ch; margin-inline: auto; }
    /* o eyebrow da Butterfly é longo: corpo e tracking menores para
       ele não correr de borda a borda em telas estreitas */
    .sv-copy__eyebrow  { font-size: clamp(9.5px, 2.7vw, 11.5px); letter-spacing: 0.2em; }

    .sv-cta { width: 100%; max-width: 380px; height: 56px; }
    .sv-actions__more { justify-items: center; margin-top: 14px; }
    .sv-more { justify-self: center; }

    /* no mobile o nav do header some, então os indicadores são o
       único controle de fragrância — ficam, apenas mais compactos */
    .sv-dots { bottom: clamp(14px, 2.4vh, 24px); gap: 12px; }
    .sv-dots { bottom: clamp(14px, 2.4svh, 24px); gap: 12px; }
    .sv-dot { font-size: 9.5px; letter-spacing: 0.18em; padding: 10px 2px; }

    /* overlays enxutos — o que sobra é o essencial de cada universo */
    .sv-fx--veil2, .sv-fx--bfly2, .sv-fx--spark { display: none; }
    .sv-fx--veil1 { width: 78vw; left: -18%; top: -6%; --fx-o: 0.42; }
    .sv-fx--bokeh { width: 128vw; bottom: 18%; --fx-o: 0.5; }
    .sv-fx--burst { width: 148vw; top: 48%; }
    .sv-fx--clouds{ width: 190vw; bottom: -4%; }
    .sv-fx--bfly1 { left: 76%; top: 43%; width: 68px; }   /* voa junto ao produto, nunca sobre o título */
    .sv-fx--petal1{ left: 20%; top: 27%; width: 34px; }
    .sv-fx--petal2{ left: 78%; bottom: 26%; width: 30px; }
    .sv-fx--drop  { left: 16%; top: 63%; width: 30px; }   /* longe da copy */

    .sv-bg--m .sv-bg__scrim {
        background:
            linear-gradient(180deg, rgba(5, 4, 3, 0.9) 0%, rgba(5, 4, 3, 0.42) 34%, rgba(5, 4, 3, 0.2) 58%, rgba(5, 4, 3, 0.78) 100%);
    }
    .sv-bg--b .sv-bg__scrim {
        background:
            linear-gradient(180deg, rgba(255, 249, 250, 0.92) 0%, rgba(255, 249, 250, 0.4) 34%, rgba(255, 249, 250, 0.18) 58%, rgba(255, 249, 250, 0.8) 100%);
    }
    .sv-bg__amber { width: 200%; opacity: 0.42; }
}

/* tablet em retrato: a tela é alta, o produto pode crescer */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .sv-hero { --sv-bottle-h: clamp(360px, 40vh, 560px); }
    @supports (height: 1svh) {
        .sv-hero { --sv-bottle-h: clamp(360px, 40svh, 560px); }
    }
    .sv-copy__title { font-size: clamp(44px, 7vw, 72px); }
}

@media (max-width: 380px) {
    .sv-copy__support { display: none; }   /* espaço para o produto respirar */
}

/* ================================================================
   REDUCED MOTION — o JS retorna antes de criar a órbita contínua.
   O repouso do CSS já é o estado A completo; aqui só cortamos
   transições locais.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .sv-cta, .sv-more, .sv-dot, .sv-dot::before { transition: none; }
    .sv-fx { animation: none !important; }
}

/* FALLBACK svh (gerado): em navegadores sem svh — Safari < 15.4,
   Chrome/WebView < 108, Samsung Internet < 21 — uma declaração com
   svh é INVÁLIDA e cai fora inteira; numa custom property o estrago é
   pior: o var() falha no uso e a propriedade vira unset. Por isso
   toda declaração com svh ganha uma irmã em vh logo acima (a versão
   svh vence onde é entendida) e as custom properties nascem em vh e
   são promovidas a svh só dentro de @supports. */
@supports (height: 1svh) {
    .sv-hero { --sv-bottle-h: clamp(360px, 63svh, 640px); }
    @media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) { .sv-hero { --sv-bottle-h: clamp(260px, 43svh, 390px); } }
}