/* ================================================================
   SAVON — S03 "A ESCOLHA". Os três caminhos de compra.

   A regra de composição é a mesma da página inteira: fio, respiro e
   tipografia no lugar de caixa. Um card de e-commerce genérico
   resolveria a função e destruiria a campanha — aqui a moldura é uma
   hairline dourada sobre a própria luz do ambiente, e o que separa
   as três ofertas é espaço, não borda.

   O Duo tem peso superior por TRÊS meios somados, nenhum agressivo:
   é o único com moldura fechada, é o único com selo, e é o único
   cuja luz de fundo aparece em repouso.

   Sem JS a seção fica inteira, legível e clicável — o JS só revela
   com escalonamento e resolve o destino dos botões.
   Prefixo --of- / .sv-offer / .sv-card.
   ================================================================ */
.sv-offer {
    --of-card-w: 340px;
    --of-bottle-h: clamp(190px, 24vh, 268px);

    position: relative; isolation: isolate;
    /* SEM fundo próprio: o ambiente da página atravessa por baixo */
    background: transparent;
    color: var(--sv-ink);
    scroll-margin-top: 72px;
    padding: clamp(84px, 12vh, 150px) clamp(20px, 4vw, 56px) clamp(72px, 10vh, 128px);
    padding-left:  max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right));
}

/* ---------- cabeçalho ---------- */
.sv-offer__head {
    max-width: 720px; margin: 0 auto clamp(46px, 7vh, 84px);
    text-align: center;
}
.sv-offer__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-bottom: clamp(12px, 1.8vh, 18px);
}
.sv-offer__title {
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(28px, 3.1vw, 50px);
    line-height: 1.08; letter-spacing: 0.01em;
    color: var(--sv-ink); margin: 0;
}
.sv-offer__lead {
    font-family: var(--sv-sans); font-weight: 500;
    font-size: clamp(13px, 1vw, 15.5px); line-height: 1.6;
    color: var(--sv-body); margin: clamp(12px, 1.8vh, 18px) 0 0;
}

/* ---------- a fileira ----------
   O Duo fica NO MEIO e um pouco maior: a posição central já é meia
   hierarquia, e evita que o destaque dependa só de decoração. */
.sv-offer__row {
    display: grid; grid-template-columns: 1fr 1.16fr 1fr;
    gap: clamp(18px, 2.6vw, 44px);
    align-items: stretch;
    max-width: 1240px; margin: 0 auto;
}

/* ---------- o card: superfície premium ----------
   A versão anterior era coluna aberta com um fio no topo — elegante,
   mas no momento da DECISÃO faltava presença. Agora cada oferta é uma
   peça: moldura de hairline completa, superfície de porcelana sobre o
   ambiente, elevação no hover. O que continua proibido é cara de
   e-commerce: nada de cinza, nada de borda dura. */
.sv-card {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: clamp(28px, 3.8vh, 44px) clamp(18px, 1.8vw, 30px) clamp(28px, 3.6vh, 40px);
    border-radius: 14px;
    border: 1px solid rgba(150, 112, 42, 0.16);
    background: linear-gradient(180deg,
        rgba(255, 253, 249, 0.72) 0%, rgba(252, 247, 238, 0.5) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 12px 34px rgba(112, 82, 34, 0.07);
    transition: transform 0.45s var(--sv-ease), box-shadow 0.45s var(--sv-ease),
                border-color 0.45s var(--sv-ease);
}
.sv-card__glow {
    position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    opacity: 0; transition: opacity 0.45s var(--sv-ease);
}
.sv-card--m .sv-card__glow {
    background: radial-gradient(78% 52% at 50% 24%,
        rgba(226, 176, 82, 0.17) 0%, rgba(240, 227, 196, 0) 74%);
}
.sv-card--b .sv-card__glow {
    background: radial-gradient(78% 52% at 50% 24%,
        rgba(243, 139, 173, 0.15) 0%, rgba(255, 249, 250, 0) 74%);
}
.sv-card:hover {
    transform: translateY(-6px);
    border-color: rgba(150, 112, 42, 0.34);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 26px 54px rgba(112, 82, 34, 0.13);
}
.sv-card:hover .sv-card__glow { opacity: 1; }

/* --- o Duo domina: ~5% maior, moldura dourada dupla, luz própria.
   O `scale` compõe com o translateY do hover (uma transform só). --- */
.sv-card--kit {
    border: 1px solid rgba(150, 112, 42, 0.44);
    padding-top: clamp(36px, 4.8vh, 56px);
    background: linear-gradient(180deg,
        rgba(255, 252, 245, 0.92) 0%, rgba(252, 245, 231, 0.78) 100%);
    box-shadow:
        0 0 0 1px rgba(244, 222, 158, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 26px 60px rgba(112, 82, 34, 0.15);
    transform: scale(1.05);
}
.sv-card--kit:hover {
    transform: scale(1.05) translateY(-6px);
    border-color: rgba(150, 112, 42, 0.55);
    box-shadow:
        0 0 0 1px rgba(244, 222, 158, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 34px 72px rgba(112, 82, 34, 0.2);
}
.sv-card--kit .sv-card__glow {
    opacity: 1;
    background: radial-gradient(82% 56% at 50% 22%,
        rgba(240, 214, 150, 0.3) 0%, rgba(244, 222, 158, 0) 76%);
}
.sv-card__flag {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    padding: 6px 18px; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(135deg, var(--sv-cta-hi) 0%, var(--sv-cta) 55%, var(--sv-cta-lo) 100%);
    font-family: var(--sv-sans); font-weight: 700;
    font-size: clamp(9.5px, 0.72vw, 11px);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sv-cta-ink);
    box-shadow: 0 6px 16px rgba(139, 101, 32, 0.26);
}

/* ---------- o produto ---------- */
.sv-card__scene {
    position: relative; margin: 0 0 clamp(16px, 2.4vh, 24px);
    display: flex; align-items: flex-end; justify-content: center;
    height: var(--of-bottle-h);
}
.sv-card__bottle {
    height: 100%; width: auto;
    filter: drop-shadow(0 6px 10px rgba(58, 40, 18, 0.2))
            drop-shadow(0 18px 30px rgba(58, 40, 18, 0.12));
    user-select: none; -webkit-user-drag: none;
}
/* o par se sobrepõe de leve: dois produtos, uma composição */
.sv-card__scene--pair .sv-card__bottle { height: 100%; }
.sv-card__scene--pair .sv-card__bottle + .sv-card__bottle {
    margin-left: calc(var(--of-bottle-h) * -0.10);
}

/* ---------- texto ---------- */
.sv-card__name {
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(23px, 2.1vw, 33px);
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--sv-ink); margin: 0;
}
.sv-card__kind {
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10.5px, 0.8vw, 12px);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sv-body); opacity: 0.85;
    margin: clamp(7px, 1vh, 10px) 0 0;
}

/* tags: fios verticais entre palavras, o mesmo sinal editorial da S02 */
.sv-card__tags {
    list-style: none; margin: clamp(13px, 1.9vh, 19px) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: baseline; row-gap: 6px;
}
.sv-card__tags li {
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10px, 0.76vw, 11.5px);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sv-body); padding: 0 clamp(9px, 0.9vw, 13px);
}
.sv-card__tags li + li { border-left: 1px solid var(--sv-hair); }
.sv-card--m .sv-card__tags li:nth-child(2) { color: var(--sv-gold-ink); }
.sv-card--b .sv-card__tags li:nth-child(2) { color: var(--sv-rose-ink); }
.sv-card--kit .sv-card__tags li { color: var(--sv-gold-ink); }

.sv-card__content {
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10px, 0.76vw, 11.5px);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sv-gold-ink); margin: clamp(8px, 1.2vh, 12px) 0 0;
}

/* CTA secundário: hairline, nunca competindo com o botão de compra */
.sv-card__more {
    display: inline-block; margin-top: clamp(11px, 1.6vh, 16px);
    position: relative;
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(11px, 0.84vw, 13px); letter-spacing: 0.08em;
    color: var(--sv-body); text-decoration: none;
    border-bottom: 1px solid var(--sv-hair); padding-bottom: 3px;
    transition: color 0.3s var(--sv-ease), border-color 0.3s var(--sv-ease);
}
/* ALVO DE TOQUE — o link tem ~18px de caixa visual; este pseudo
   invisível estica a área clicável para ~34px de altura sem mover o
   sublinhado nem o texto (padding faria o traço descer). */
.sv-card__more::after {
    content: ""; position: absolute;
    left: -8px; right: -8px; top: -8px; bottom: -8px;
}
.sv-card--m .sv-card__more:hover { color: var(--sv-gold-ink); border-color: var(--sv-gold-ink); }
.sv-card--b .sv-card__more:hover { color: var(--sv-rose-ink); border-color: var(--sv-rose-ink); }
.sv-card__more:focus-visible { outline: 2px solid var(--sv-gold-ink); outline-offset: 3px; }

.sv-card__desc {
    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(13px, 1.9vh, 18px) auto 0; max-width: 30ch;
}

/* ---------- preço e ação ----------
   `margin-top: auto` alinha os três CTAs na mesma linha de base
   mesmo com textos de alturas diferentes. */
.sv-card__foot {
    margin-top: auto; padding-top: clamp(18px, 2.6vh, 28px);
    width: 100%; display: flex; flex-direction: column; align-items: center;
}
.sv-card__anchor {
    font-family: var(--sv-sans); font-weight: 500;
    font-size: clamp(11px, 0.82vw, 12.5px); letter-spacing: 0.06em;
    color: var(--sv-body); opacity: 0.75; margin: 0 0 2px;
}
.sv-card__anchor s { text-decoration-thickness: 1px; }
.sv-card__price {
    font-family: var(--sv-serif); font-weight: 500;
    font-size: clamp(34px, 3.2vw, 50px); line-height: 1;
    color: var(--sv-gold-ink); margin: 0;
}
.sv-card__price--kit { font-size: clamp(40px, 3.9vw, 60px); }
.sv-card__cur   { font-size: 0.44em; margin-right: 5px; vertical-align: 0.42em; }
.sv-card__cents { font-size: 0.52em; vertical-align: 0.28em; }
.sv-card__save {
    font-family: var(--sv-sans); font-weight: 700;
    font-size: clamp(10.5px, 0.8vw, 12px);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sv-rose-ink); margin: 8px 0 0;
}
.sv-card__cta {
    width: 100%; max-width: 300px;
    margin-top: clamp(16px, 2.4vh, 24px);
    height: clamp(50px, 3.9vw, 58px);
    font-size: clamp(11px, 0.86vw, 13px);
}
.sv-card--kit .sv-card__cta { max-width: 320px; height: clamp(54px, 4.3vw, 64px); }

/* ================================================================
   EFEITO DOS BOTÕES — uma lâmina de luz atravessa o CTA no hover
   (transform/opacity, custo zero de layout). O CTA do Kit ganha,
   além disso, um brilho periódico LENTO — só enquanto a seção está
   na tela e nunca com reduced-motion.
   ================================================================ */
.sv-card__cta { position: relative; overflow: hidden; }
.sv-card__cta::after {
    content: ""; position: absolute; top: -20%; bottom: -20%;
    left: -46%; width: 34%;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg) translateX(0);
    opacity: 0; pointer-events: none;
}
.sv-card__cta:hover::after {
    opacity: 1;
    transition: transform 0.65s var(--sv-ease);
    transform: skewX(-18deg) translateX(460%);
}
/* o brilho periódico do Kit: 1 varredura a cada ~4,5s */
@keyframes svCtaShine {
    0%, 78% { transform: skewX(-18deg) translateX(0); opacity: 0; }
    80%     { opacity: 0.9; }
    97%, 100% { transform: skewX(-18deg) translateX(460%); opacity: 0; }
}
/* nunca no estado "em breve": botão indisponível não pisca */
.sv-offer.is-active .sv-card--kit .sv-card__cta:not(.sv-cta--soon)::after {
    opacity: 1; animation: svCtaShine 4.6s var(--sv-ease) infinite;
}
.sv-offer.is-active .sv-card--kit .sv-card__cta:hover::after { animation: none; }
.sv-cta--soon::after { display: none; }

/* CTA sem destino ainda: rótulo honesto, sem âncora que não leva a
   lugar nenhum. Quem escreve isto é js/sv-offer.js. */
.sv-cta--soon {
    background: none; color: var(--sv-body);
    border: 1px solid var(--sv-hair); box-shadow: none;
    cursor: default; font-weight: 600;
}
.sv-cta--soon:hover { transform: none; box-shadow: none; }

/* ================================================================
   MICROFAIXA DE CONFIANÇA — três fatos, hairlines, ícones de traço.
   Compacta de propósito: segurança no último passo, não uma seção.
   ================================================================ */
.sv-offer__trust {
    list-style: none; padding: clamp(16px, 2.4vh, 24px) 0; margin: clamp(40px, 6vh, 72px) auto 0;
    max-width: 980px;
    display: flex; justify-content: center; align-items: center;
    gap: clamp(22px, 4vw, 64px); flex-wrap: wrap;
    border-top: 1px solid var(--sv-hair-soft);
    border-bottom: 1px solid var(--sv-hair-soft);
}
.sv-offer__trust-item {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10.5px, 0.8vw, 12.5px);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sv-body);
}
.sv-offer__trust-item svg {
    width: 17px; height: 17px; flex: none;
    fill: none; stroke: var(--sv-gold-ink);
    stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.85;
}

/* (a assinatura com a logo mudou para o fecho da página — styles/sv-blocks.css) */

/* ================================================================
   TABLET — o Duo sobe para a linha de cima, sozinho e inteiro; as
   duas fragrâncias dividem a linha de baixo. É a hierarquia que a
   grade de três colunas dá, sem espremer o card mais importante.
   ================================================================ */
@media (max-width: 1024px) {
    .sv-offer__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px; gap: clamp(20px, 3vw, 34px);
    }
    /* `order` e não só `grid-column`: sem ele o Duo cai na SEGUNDA
       linha (a Mademoiselle já ocupou a primeira) e as duas
       fragrâncias terminam em linhas diferentes, com alturas
       diferentes. Com order:-1 ele abre a grade e elas se emparelham. */
    .sv-card--kit { grid-column: 1 / -1; order: -1; transform: none; }
    .sv-card--kit:hover { transform: translateY(-6px); }
    .sv-card--kit .sv-card__scene { --of-bottle-h: clamp(210px, 26vh, 280px); }
    @supports (height: 1svh) {
        .sv-card--kit .sv-card__scene { --of-bottle-h: clamp(210px, 26svh, 280px); }
    }
}

/* ================================================================
   MOBILE — empilhado, Duo PRIMEIRO. Quem chega aqui já leu a
   virada "você não precisa escolher": a oferta que responde a ela
   tem de ser a primeira à vista, não a do meio da rolagem.
   ================================================================ */
@media (max-width: 700px) {
    .sv-offer {
        --of-bottle-h: clamp(170px, 22vh, 220px);
        padding-top: clamp(72px, 10vh, 110px);
    }
    .sv-offer__row {
        grid-template-columns: minmax(0, 1fr);
        max-width: min(430px, 100%);
        gap: clamp(34px, 5vh, 52px);
    }
    .sv-card { padding-left: clamp(16px, 5vw, 26px); padding-right: clamp(16px, 5vw, 26px); }
    .sv-card--kit { grid-column: auto; order: -1; transform: none; }
    .sv-card--kit:hover { transform: none; }
    .sv-offer__trust { flex-direction: column; gap: 14px; align-items: center; }
    .sv-card--kit .sv-card__scene { --of-bottle-h: clamp(180px, 23vh, 230px); }
    @supports (height: 1svh) {
        .sv-card--kit .sv-card__scene { --of-bottle-h: clamp(180px, 23svh, 230px); }
    }
    .sv-card__cta { max-width: none; height: 56px; }
    .sv-card--kit .sv-card__cta { max-width: none; height: 62px; }
    .sv-card__content {
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(10px, 0.76vw, 11.5px);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sv-gold-ink); margin: clamp(8px, 1.2vh, 12px) 0 0;
}

/* CTA secundário: hairline, nunca competindo com o botão de compra */
.sv-card__more {
    display: inline-block; margin-top: clamp(11px, 1.6vh, 16px);
    font-family: var(--sv-sans); font-weight: 600;
    font-size: clamp(11px, 0.84vw, 13px); letter-spacing: 0.08em;
    color: var(--sv-body); text-decoration: none;
    border-bottom: 1px solid var(--sv-hair); padding-bottom: 3px;
    transition: color 0.3s var(--sv-ease), border-color 0.3s var(--sv-ease);
}
.sv-card--m .sv-card__more:hover { color: var(--sv-gold-ink); border-color: var(--sv-gold-ink); }
.sv-card--b .sv-card__more:hover { color: var(--sv-rose-ink); border-color: var(--sv-rose-ink); }
.sv-card__more:focus-visible { outline: 2px solid var(--sv-gold-ink); outline-offset: 3px; }

.sv-card__desc { max-width: 32ch; }
    .sv-offer__title { font-size: clamp(26px, 7.6vw, 38px); }
}

/* ================================================================
   REPOUSO / REVELAÇÃO. O CSS entrega a seção PRONTA; `.is-live` é o
   que abre mão disso em troca do escalonamento. Sem JS, nada some.
   ================================================================ */
.sv-offer.is-live .sv-offer__head > *,
.sv-offer.is-live .sv-card { opacity: 0; }
.sv-offer.is-active .sv-card,
.sv-offer.is-active .sv-offer__head > * { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
    .sv-offer.is-live .sv-offer__head > *,
    .sv-offer.is-live .sv-card { opacity: 1; }
    .sv-card, .sv-card__glow, .sv-cta { transition: none; }
    .sv-card--kit, .sv-card--kit:hover { transform: none; }
    .sv-card__cta::after { display: none; }
}

/* 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-offer { --of-bottle-h: clamp(190px, 24svh, 268px); }
    @media (max-width: 700px) { .sv-offer { --of-bottle-h: clamp(170px, 22svh, 220px); } }
}