/* ================================================================
   SAVON — página geral (Mademoiselle · Butterfly · Kit).
   Tokens + reset + header. Escopo body.savon, prefixo --sv- / .sv-.
   NUNCA importar globals.css / hero.css / butterfly-*.css aqui:
   as páginas individuais são intocáveis e este arquivo é isolado.

   As duas paletas abaixo são amostradas dos tokens REAIS das
   páginas /mademoiselle (globals.css) e /butterfly
   (butterfly-tokens.css) — a identidade de cada universo é a
   mesma, não uma reinterpretação.
   ================================================================ */

/* ================================================================
   FONTES AUTO-HOSPEDADAS (assets/fonts/ — woff2 do @fontsource,
   subset latin, que cobre todo o português). Antes vinham do Google
   Fonts: eram DOIS domínios de terceiro no caminho crítico do texto
   e uma dependência externa que podia atrasar ou falhar sozinha.
   `font-display: swap` = o texto aparece na fallback e troca.
   Mesmos nomes de família — nenhum outro arquivo precisou mudar.
   ================================================================ */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic; font-weight: 400; font-display: swap;
    src: url('../assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('../assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('../assets/fonts/montserrat-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('../assets/fonts/montserrat-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* ---- universo Mademoiselle (de styles/globals.css) ---- */
    --sv-m-black:      #050403;
    --sv-m-gold:       #D7A84A;
    --sv-m-gold-light: #E8C86E;
    --sv-m-cream:      #F3E9D5;

    /* ---- universo Butterfly (de styles/butterfly-tokens.css) ---- */
    --sv-b-pearl:  #FFF9FA;
    --sv-b-blush:  #FBE4EC;
    --sv-b-rose:   #F38BAD;
    --sv-b-pink:   #E72E72;
    --sv-b-sky:    #BDE4F5;
    --sv-b-ink:    #292329;
    --sv-b-text:   #50454C;

    /* ---- CTA champanhe: funciona nos DOIS universos, por isso o
            botão do Kit nunca precisa trocar de cor ---- */
    --sv-cta-hi: #F3D27A;
    --sv-cta:    #E7B84F;
    --sv-cta-lo: #C89431;
    --sv-cta-ink:#2D2227;

    /* ---- tinta de interface: o único token que vira com o estado.
            O JS troca body.is-b no cruzamento da órbita, onde o
            flash de luz está no pico e mascara a virada ---- */
    --sv-ui:       var(--sv-m-cream);
    --sv-ui-soft:  rgba(243, 233, 213, 0.68);
    --sv-ui-line:  rgba(243, 233, 213, 0.22);
    --sv-ui-accent:var(--sv-m-gold-light);
    /* HALO DE LEGIBILIDADE — invisível em repouso (a sombra tem a
       cor do próprio fundo do universo). Existe pelos ~0,15s do
       crossfade em que o palco passa por um meio-tom: ali nenhuma
       tinta pura atinge 4.5:1, e o halo devolve a leitura sem
       colocar caixa, borda ou peso no header. */
    --sv-ui-halo:  rgba(5, 4, 3, 0.72);

    --sv-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sv-sans:  'Montserrat', system-ui, -apple-system, sans-serif;
    --sv-ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* `is-light` é posta pela S02: sobre o território ivory a tinta da
   interface precisa ser escura independentemente do estado da órbita */
body.savon.is-b,
body.savon.is-light {
    --sv-ui:       var(--sv-b-ink);
    --sv-ui-soft:  rgba(80, 69, 76, 0.74);
    --sv-ui-line:  rgba(41, 35, 41, 0.16);
    --sv-ui-accent:var(--sv-b-pink);
    --sv-ui-halo:  rgba(255, 249, 250, 0.85);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* trava do eixo X: `clip` não cria contêiner de rolagem, então mata
   o overflow horizontal sem afetar o scroll vertical */
html {
    /* fallback: navegadores sem `clip` (Safari < 16) usam `hidden` —
       no HTML (o rolador da página) hidden não quebra sticky */
    overflow-x: hidden;
    overflow-x: clip;
}

body.savon {
    font-family: var(--sv-sans);
    color: var(--sv-ui);
    background: var(--sv-m-black);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* `clip` e NÃO `hidden`: overflow:hidden no body cria um contêiner
       de rolagem e quebra `position: sticky` de qualquer seção. */
    overflow-x: clip;
}

/* ================================================================
   HEADER — transparente sobre o hero, hairline discreta.
   As cores acompanham --sv-ui, então a virada de universo é uma
   transição de cor de 0.55s, nunca um corte.
   ================================================================ */
.sv-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    isolation: isolate;
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(15px, 2vw, 22px) clamp(20px, 4vw, 56px) clamp(26px, 3.2vw, 40px);
    padding-left:  max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right));
    color: var(--sv-ui);
    text-shadow: 0 1px 12px var(--sv-ui-halo), 0 0 3px var(--sv-ui-halo);
    transition: color 0.45s var(--sv-ease), text-shadow 0.45s var(--sv-ease);
}
/* MARCA — a logo REAL (assets/logo.webp). O dourado metálico do
   asset lê tanto sobre o preto do Hero quanto sobre o marfim da S02,
   então é UM arquivo só, sem variante por fundo; o que muda é a
   sombra, que acompanha --sv-ui-halo e vira junto com a interface.
   O nome fica no alt — a marca continua sendo texto para leitores
   de tela e para o Google. */
/* VÉU DO HEADER — no Hero o cenário escuro já dá contraste e o topo
   fica limpo; sobre o território claro o conteúdo passa POR DENTRO
   da barra e chegava a cruzar a logo (medido no preço do Kit). Um
   degradê estático resolve sem backdrop-filter, que é caro. */
/* BASE DA BARRA — marfim translúcido com presença real. No Hero ela
   fica em zero (o cenário escuro já dá contraste e o topo tem de
   ficar limpo); sobre território claro ela assume, senão o conteúdo
   passa por dentro da barra e chega a cruzar a logo. */
.sv-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none; opacity: 0;
    /* a base DISSOLVE na parte de baixo. Terminando opaca ela criava
       um degrau horizontal atravessando a página logo abaixo da
       barra — o mesmo defeito de emenda, só que no topo. */
    background: linear-gradient(180deg,
        rgba(252, 249, 243, 0.95) 0%,
        rgba(252, 248, 240, 0.92) 46%,
        rgba(251, 246, 236, 0.72) 74%,
        rgba(251, 246, 236, 0) 100%);
    transition: opacity 0.5s var(--sv-ease);
}
body.savon.is-light .sv-header::before { opacity: 1; }

/* o blur só existe onde ele é barato e visível: sobre o claro, e
   apenas quando o navegador o suporta */
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
    body.savon.is-light .sv-header {
        -webkit-backdrop-filter: blur(7px) saturate(1.06);
        backdrop-filter: blur(7px) saturate(1.06);
    }
}

/* FIO DOURADO — assinatura da barra. A curva desce ~10px ao centro,
   o bastante para ler como gesto e não como régua. */
.sv-header__rule {
    /* o fio é a BORDA da barra: fica onde a base já está a ~60% e
       deixa o resto do véu se dissolver por baixo dele */
    position: absolute; left: 0; right: 0; bottom: clamp(6px, 0.9vw, 12px);
    width: 100%; height: 26px;
    pointer-events: none; overflow: visible;
    opacity: 0.55;
    transition: opacity 0.5s var(--sv-ease);
}
body.savon.is-light .sv-header__rule { opacity: 1; }
.sv-header__gem { filter: drop-shadow(0 0 6px rgba(212, 165, 69, 0.55)); }

/* centro ABSOLUTO da tela, não centro do espaço livre */
.sv-header__brand {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: block; line-height: 0;
    color: inherit; text-decoration: none;
    text-shadow: none;
}
.sv-header__logo {
    display: block; width: auto;
    height: clamp(26px, 2.5vw, 38px);
    filter: drop-shadow(0 1px 10px var(--sv-ui-halo));
    transition: filter 0.45s var(--sv-ease);
}
/* sobre território claro (Butterfly e S02/S03) o halo pérola some
   dentro do fundo: ali a logo ganha definição por uma sombra quente */
body.savon.is-b .sv-header__logo,
body.savon.is-light .sv-header__logo {
    filter: drop-shadow(0 1px 5px rgba(92, 64, 26, 0.24));
}
.sv-header__brand:focus-visible {
    outline: 2px solid var(--sv-ui-accent); outline-offset: 6px;
    border-radius: 2px;
}

.sv-header__nav,
.sv-header__right {
    display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px);
    /* as duas laterais reservam a mesma largura mínima: assim nenhuma
       delas encosta na logo antes da outra ao estreitar a janela */
    min-width: 0; flex: 1 1 0;
}
.sv-header__right { justify-content: flex-end; }
.sv-header__link {
    appearance: none; border: 0; background: none; padding: 6px 2px;
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10.5px, 0.82vw, 12.5px);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: inherit; opacity: 0.72; text-decoration: none;
    cursor: pointer; white-space: nowrap;
    position: relative;
    transition: opacity 0.35s var(--sv-ease), color 0.45s var(--sv-ease);
}
/* o sublinhado nasce do centro — hairline, nunca borda cheia */
.sv-header__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform 0.4s var(--sv-ease);
}
.sv-header__link:hover { opacity: 1; }
.sv-header__link:hover::after,
.sv-header__link[aria-pressed="true"]::after { transform: scaleX(1); }
.sv-header__link[aria-pressed="true"] { opacity: 1; color: var(--sv-ui-accent); }
.sv-header__link:focus-visible { outline: 2px solid var(--sv-ui-accent); outline-offset: 4px; opacity: 1; }

.sv-header__buy {
    font-family: var(--sv-sans); font-weight: 700;
    font-size: clamp(10.5px, 0.8vw, 12px);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--sv-cta-ink); text-decoration: none; white-space: nowrap;
    padding: 10px clamp(16px, 1.6vw, 22px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sv-cta-hi) 0%, var(--sv-cta) 55%, var(--sv-cta-lo) 100%);
    box-shadow: 0 4px 16px rgba(139, 101, 32, 0.28);
    transition: transform 0.3s var(--sv-ease), box-shadow 0.3s var(--sv-ease);
}
.sv-header__buy:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(139, 101, 32, 0.36); }
.sv-header__buy:focus-visible { outline: 2px solid var(--sv-ui-accent); outline-offset: 3px; }

/* MOBILE: sem nav no topo — a navegação de fragrância vive nos
   indicadores do hero e o comércio, no CTA. Logo sozinha à esquerda. */
/* MOBILE: topo reduzido à assinatura. Sem nav e sem botão — a ação
   comercial já vive no CTA do hero, e a logo assume o centro sozinha. */
@media (max-width: 768px) {
    .sv-header {
        padding: 13px max(16px, env(safe-area-inset-left)) 22px;
        justify-content: center;
    }
    /* a logo já é o único elemento: volta ao fluxo e centra sozinha */
    .sv-header__brand { position: static; transform: none; }
    .sv-header__rule { bottom: 5px; height: 22px; }
    /* a logo é uma imagem simétrica: o centro geométrico já é o
       centro óptico, então some a compensação de tracking que o
       lettering em texto exigia */
    .sv-header__logo { height: 25px; }
    .sv-header__nav { display: none; }
    .sv-header__right { display: none; }
}

/* texto só para leitores de tela — clip, nunca display:none */
.sv-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ================================================================
   LINHA DE TRAJETO — o fio da jornada, fixo à direita, SETE fases.
   Paleta própria (champagne/bronze claro), não a tinta da interface:
   o fio precisa ler igual sobre o preto do Hero e sobre o marfim
   do resto — e nunca virar cinza nem dourado-amarelo.
   Estados: inativo (ponto vazado, baixa opacidade) · visitado
   (preenchimento intermediário) · ativo (maior, cheio, halo mínimo).
   O preenchimento do fio segue --sv-rail-p (0..1), escrito pelo JS.
   ================================================================ */
:root {
    --sv-rail-base:  rgba(170, 132, 70, 0.22);
    --sv-rail-mid:   #C29B5B;
    --sv-rail-deep:  #B58B49;
    --sv-rail-light: #E2C994;
    --sv-rail-glow:  rgba(194, 155, 91, 0.42);
}
.sv-rail {
    position: fixed; right: clamp(14px, 2vw, 34px); top: 50%;
    transform: translateY(-50%);
    z-index: 45; display: flex; flex-direction: column;
    align-items: center; gap: clamp(22px, 3.4vh, 34px);
    color: var(--sv-rail-mid);
}
/* o fio: base contínua + preenchimento que cresce até a fase ativa */
.sv-rail__line {
    position: absolute; top: 5px; bottom: 5px; left: 50%;
    width: 1px; transform: translateX(-50%);
    background: var(--sv-rail-base);
    overflow: visible;
}
.sv-rail__fill {
    position: absolute; left: -0.5px; top: 0; width: 2px; height: 100%;
    transform-origin: 50% 0;
    transform: scaleY(var(--sv-rail-p, 0));
    background: linear-gradient(180deg, var(--sv-rail-light) 0%, var(--sv-rail-mid) 40%, var(--sv-rail-deep) 100%);
    box-shadow: 0 0 6px var(--sv-rail-glow);
    transition: transform 0.55s var(--sv-ease);
}
.sv-rail__dot {
    /* é um <a>: sem isto o UA pinta o azul de link por cima da tinta */
    color: inherit; text-decoration: none;
    position: relative; display: block;
    width: 7px; height: 7px; border-radius: 50%;
    border: 1px solid var(--sv-rail-mid); background: transparent;
    opacity: 0.55;
    transition: opacity 0.35s var(--sv-ease), transform 0.35s var(--sv-ease),
                background-color 0.35s var(--sv-ease), box-shadow 0.35s var(--sv-ease);
}
/* ALVO DE TOQUE — o ponto continua com 5–7px VISUAIS, mas a área
   clicável é este halo invisível de 30px (WCAG 2.5.8 pede ≥24px). */
.sv-rail__dot::after {
    content: ""; position: absolute;
    left: 50%; top: 50%; width: 30px; height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.sv-rail__dot.is-past {
    opacity: 0.85; border-color: transparent;
    background: var(--sv-rail-mid);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.sv-rail__dot.is-on {
    opacity: 1; border-color: transparent;
    background: radial-gradient(circle at 35% 30%, var(--sv-rail-light) 0%, var(--sv-rail-mid) 55%, var(--sv-rail-deep) 100%);
    transform: scale(1.5);
    box-shadow: 0 0 0 3px rgba(194, 155, 91, 0.14), 0 0 10px var(--sv-rail-glow);
}
.sv-rail__dot:hover { opacity: 1; }
.sv-rail__dot:focus-visible { outline: 2px solid var(--sv-rail-mid); outline-offset: 5px; }
/* o rótulo nasce à esquerda do ponto, só no hover/foco (desktop) */
.sv-rail__label {
    position: absolute; right: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) translateX(6px);
    font-family: var(--sv-sans); font-weight: 600;
    font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sv-rail-deep); white-space: nowrap;
    transform-origin: 100% 50%;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--sv-ease), transform 0.3s var(--sv-ease);
}
/* sobre o Hero escuro o rótulo clareia */
body.savon:not(.is-light) .sv-rail__label { color: var(--sv-rail-light); text-shadow: 0 1px 10px rgba(5, 4, 3, 0.7); }
.sv-rail__dot:hover .sv-rail__label,
.sv-rail__dot:focus-visible .sv-rail__label {
    opacity: 0.95; transform: translateY(-50%) translateX(0);
}
/* o ponto ativo, quando escalado, não deve escalar o rótulo */
.sv-rail__dot.is-on .sv-rail__label { transform: translateY(-50%) translateX(6px) scale(0.6667); }
.sv-rail__dot.is-on:hover .sv-rail__label,
.sv-rail__dot.is-on:focus-visible .sv-rail__label { transform: translateY(-50%) translateX(0) scale(0.6667); }

@media (max-width: 768px) {
    /* presente, mas discreta: linha + pontos, sem rótulos */
    .sv-rail { right: 10px; gap: 16px; }
    .sv-rail__dot { width: 5px; height: 5px; }
    .sv-rail__dot.is-on { transform: scale(1.6); }
    .sv-rail__label { display: none; }
}
/* telas baixas em paisagem: o fio de 7 pontos não pode disputar
   altura com o conteúdo — encolhe */
@media (max-height: 520px) {
    .sv-rail { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .sv-rail__fill, .sv-rail__dot, .sv-rail__label { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sv-header, .sv-header__link, .sv-header__link::after, .sv-header__buy,
    .sv-header::before, .sv-header__rule {
        transition: none;
    }
}