/* =====================================================================
   Visual claro e delicado da pagina /vsl
   Creme + verde-floresta + dourado, titulos serifados (Playfair Display).
   Blocos de enfase em marrom-cacau com cantoneiras e palavra em itálico laranja.
   Carregado depois do style.min.css, so nesta pagina: a pagina antiga nao muda.
   ===================================================================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-var.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-italic-600.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ---------- paleta ---------- */
html.vsl {
  --bg: #F7EEE3; --bg-2: #F4EADD;
  --fg: #2F3A33; --muted: #5E675F; --muted-2: #6F776F;
  --surface: #FFFCF7; --surface-2: #FFFFFF;
  --accent: #B78443; --accent-2: #9A6B2F; --accent-text: #9A6B30; --accent-ink: #FFFAF1;
  --accent-soft: rgba(183,132,67,.10); --accent-line: rgba(183,132,67,.40); --accent-glow: rgba(183,132,67,.12);
  --hairline: rgba(183,132,67,.28); --hairline-2: rgba(183,132,67,.45);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'Poppins', system-ui, sans-serif;
  --verde: #173327; --verde-2: #1F4033; --dourado: #B78443; --dourado-claro: #D9B26B;
  --laranja: #B8662E; --laranja-claro: #E0824A; --creme-texto: #F3EADB;
}
html.vsl body { background: var(--bg); color: var(--fg); }
/* numeros alinhados na linha de base (a Playfair, por padrao, desenha numeros "de texto": o zero parece a letra o) */
html.vsl, html.vsl * { font-variant-numeric: lining-nums; }

/* ---------- topo ---------- */
html.vsl .nav:not(.is-scrolled) .nav__links a { color: var(--creme-texto); }
html.vsl .nav:not(.is-scrolled) .nav__links a:hover { color: var(--creme-texto); background: rgba(255,255,255,.14); }
html.vsl .nav:not(.is-scrolled) .nav__toggle span { background: var(--creme-texto); }
html.vsl .nav.is-scrolled .nav__toggle span { background: var(--verde); }
html.vsl .nav.is-scrolled .nav__inner { background: rgba(251,246,238,.88); border-color: var(--hairline); box-shadow: 0 16px 36px -28px rgba(70,48,18,.4); }
html.vsl .nav__links a { color: var(--verde); }
html.vsl .nav__links a:hover { color: var(--verde); background: rgba(183,132,67,.14); }
html.vsl #nav .nav-logo { color: var(--creme-texto); }
html.vsl .nav.is-scrolled .nav-logo { color: var(--verde); }
html.vsl .nav__mobile { background: rgba(251,246,238,.98); border-color: var(--hairline); }
html.vsl .nav__mobile a:not(.btn) { color: var(--verde); }
html.vsl .brand--whatsapp { background: var(--verde); color: #F7EEE3; box-shadow: 0 10px 22px -14px rgba(23,51,39,.7); }
html.vsl .brand--whatsapp:hover { box-shadow: 0 14px 26px -14px rgba(23,51,39,.8); }

/* ---------- botoes de compra: verde limao, sem brilho correndo ---------- */
html.vsl .btn { font-weight: 600; letter-spacing: .02em; }
html.vsl .btn--primary {
  background: linear-gradient(180deg, #D6FF72 0%, #B4F53A 52%, #92D820 100%);
  color: #12261A; border: 1px solid #78B514; border-radius: 14px;
  box-shadow: 0 12px 24px -14px rgba(90,150,10,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
html.vsl .btn--primary:hover {
  background: linear-gradient(180deg, #E2FF93 0%, #C0FA52 52%, #9DE22B 100%);
  box-shadow: 0 16px 28px -14px rgba(90,150,10,.75), inset 0 1px 0 rgba(255,255,255,.6);
}
html.vsl .btn--primary::after { display: none; }
html.vsl .sticky-cta {
  background: linear-gradient(180deg, #D6FF72 0%, #B4F53A 52%, #92D820 100%); color: #12261A; border: 1px solid #78B514;
  box-shadow: 0 14px 28px -12px rgba(90,150,10,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
html.vsl .sticky-cta::after { display: none; }
@keyframes vsl-bate {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(180,245,58,.5); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(180,245,58,0); }
}

/* ---------- abertura (aba 2): marrom-escuro com clarao central, textos claros, moldura dourada no video ---------- */
html.vsl .hero-n--vsl { background: radial-gradient(ellipse 90% 65% at 50% 42%, #3B241B 0%, #2A1810 55%, #1B100C 100%); }
/* headline: palavras de ligacao em branco, as que carregam a mensagem em dourado metalico (marrom + dourado, como o selo) */
html.vsl .hero-n__titulo--frase { font-weight: 600; color: #FFF8EC; }
/* titulo em tres linhas: "Milhares" sozinha em cima, encostada na esquerda; a linha do meio centralizada com o video (e ela que define a largura do bloco);
   a de baixo encostada na direita. "Milhares" sozinha em cima (dourado, maior), "de pessoas sofrem todos os dias" em branco,
   e "por falta de informacao." (branco, so "informacao" em dourado).
   A linha 2 e a mais larga (~14,2 x o tamanho da fonte): no celular o tamanho acompanha a largura da tela para ela caber inteira. */
html.vsl .hero-n__titulo--frase { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.12; text-align: center; align-self: center; width: fit-content; max-width: 100%; margin: 0 auto; }
html.vsl .hero-n__titulo--frase .l1, html.vsl .hero-n__titulo--frase .l2, html.vsl .hero-n__titulo--frase .l3 { display: block; white-space: nowrap; }
html.vsl .hero-n__titulo--frase .l1 { text-align: left; font-size: 1.3em; line-height: 1.05; }
html.vsl .hero-n__titulo--frase .l2 { text-align: center; }
html.vsl .hero-n__titulo--frase .l3 { text-align: right; font-size: .85em; margin-top: .12em; }
@media (max-width: 800px) {
  html.vsl .hero-n__titulo--frase { font-size: min(clamp(1.35rem, 6vw, 2.1rem), calc((100vw - 2.6rem) / 15.4)); }
}
/* o titulo de tres linhas e ~80px mais alto no computador: o video cede essa altura para a faixa de doencas continuar fechando a primeira tela */
@media (min-width: 801px) {
  html.vsl .hero-n__player { width: clamp(250px, min(92vw, (93.4svh - 453px) * 9 / 16 + 6px), 526px); }
}
html.vsl .hero-n__titulo--frase .itl { font-style: italic; font-weight: 600; }
html.vsl .hero-n__titulo--frase .ouro,
html.vsl .hero-n__titulo--frase .text-accent {
  color: #EBC775;
  background: linear-gradient(180deg, #FBE7B0 0%, #EBC775 42%, #C8963E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.vsl .hero-n__titulo--frase .text-accent {
  font-style: italic; font-weight: 600; color: #F3D58C;
  background: linear-gradient(180deg, #FFF0C4 0%, #F4D486 45%, #DCA94B 100%);
  -webkit-background-clip: text; background-clip: text;
}
html.vsl .hero-n__frase2 { color: #F7EEE3; font-weight: 600; }
html.vsl .hero-n__txt > *, html.vsl .hero-n__buy > *, html.vsl .hero-n__resp,
html.vsl .hero-n--vsl .hero-n__resp { text-shadow: none; }
html.vsl .hero-n__resp,
html.vsl .hero-n--vsl .hero-n__resp { color: rgba(247,238,227,.82); }
html.vsl .hero-n__micro,
html.vsl .hero-n__txt .hero-n__micro { color: rgba(247,238,227,.82); }
html.vsl .hero-n__player {
  background: linear-gradient(135deg, #E3C285, #B88746);
  box-shadow: 0 26px 48px -24px rgba(0,0,0,.65);
}
html.vsl .hero-n__player::before { background: transparent; }
html.vsl .hero-n__player::after { background: none; animation: none; }
html.vsl .hero-n__player > div { background: #1B100C; }
/* botao da abertura: mesmo verde limao dos demais, com sombra mais funda para destacar sobre o marrom */
html.vsl .hero-n--vsl .btn--primary { box-shadow: 0 14px 26px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.5); }
html.vsl .fita { background: #1F130D; border: 0; }
html.vsl .hero-n .fita { border-top: 1px solid rgba(227,194,133,.55); box-shadow: none; }
html.vsl .fita__item { color: var(--creme-texto); }
html.vsl .fita__item svg { color: var(--dourado-claro); }

/* ---------- secoes: fios dourados finos com um ponto no meio ---------- */
html.vsl .section { border-top: 1px solid rgba(183,132,67,.45); }
html.vsl #sumario { border-top: 0; }
html.vsl .section:not(#sumario)::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--dourado); z-index: 1;
}
html.vsl #sumario { background: #F4EADD; }
html.vsl #depoimentos { background: #FBF6EE; }
html.vsl #guia { background: #F4EADD; }
html.vsl #motivos { background: #FBF6EE; }
html.vsl #planos { background: #F4EADD; }
html.vsl #sobre { background: #FBF6EE; }
html.vsl #duvidas { background: #F4EADD; }

html.vsl #sumario .section__title,
html.vsl #depoimentos .section__title,
html.vsl #guia .section__title,
html.vsl #motivos .section__title,
html.vsl #planos .section__title,
html.vsl #sobre .section__title,
html.vsl #duvidas .section__title { color: var(--verde); font-weight: 600; }
html.vsl #sumario .section__title .text-accent,
html.vsl #depoimentos .section__title .text-accent,
html.vsl #guia .section__title .text-accent,
html.vsl #motivos .section__title .text-accent,
html.vsl #planos .section__title .text-accent,
html.vsl #sobre .section__title .text-accent,
html.vsl #duvidas .section__title .text-accent { color: var(--laranja); font-style: italic; font-weight: 600; }
html.vsl #sumario .section__sub,
html.vsl #depoimentos .section__sub,
html.vsl #guia .section__sub,
html.vsl #motivos .section__sub,
html.vsl #planos .section__sub,
html.vsl #sobre .section__sub,
html.vsl #duvidas .section__sub { color: var(--muted); }
html.vsl #sumario .kicker,
html.vsl #sumario .kicker .text-accent,
html.vsl #depoimentos .kicker,
html.vsl #depoimentos .kicker .text-accent,
html.vsl #guia .kicker,
html.vsl #guia .kicker .text-accent,
html.vsl #motivos .kicker,
html.vsl #motivos .kicker .text-accent,
html.vsl #planos .kicker,
html.vsl #planos .kicker .text-accent,
html.vsl #sobre .kicker,
html.vsl #sobre .kicker .text-accent,
html.vsl #duvidas .kicker,
html.vsl #duvidas .kicker .text-accent { color: var(--accent-text); }

/* ---------- cartoes ---------- */
html.vsl .glass {
  background: #FFFCF7; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(183,132,67,.30); box-shadow: 0 22px 44px -34px rgba(70,48,18,.38);
  --accent-text: #9A6B30; --fg: #2F3A33; --muted: #5E675F; --muted-2: #6F776F;
}
html.vsl #sumario .bento__card,
html.vsl #sumario .bento .glass,
html.vsl #depoimentos .bento__card,
html.vsl #depoimentos .bento .glass,
html.vsl #guia .bento__card,
html.vsl #guia .bento .glass,
html.vsl #motivos .bento__card,
html.vsl #motivos .bento .glass,
html.vsl #planos .bento__card,
html.vsl #planos .bento .glass,
html.vsl #sobre .bento__card,
html.vsl #sobre .bento .glass,
html.vsl #duvidas .bento__card,
html.vsl #duvidas .bento .glass { background: #FFFCF7; border: 1px solid rgba(183,132,67,.30); }
html.vsl .bento__card h3 { color: var(--verde); }
html.vsl .bento__card p { color: var(--muted); }
html.vsl .bento__icon { background: var(--dourado); color: #FFFAF1; border-color: rgba(255,255,255,.3); }
html.vsl .checklist li { color: var(--fg); }
html.vsl .checklist__ico { background: var(--dourado); color: #FFFAF1; }
html.vsl .guia-shot__frame { background: linear-gradient(135deg, #D9B26B, #A97A38); box-shadow: 0 22px 44px -28px rgba(60,40,15,.55); }
html.vsl .guia-shot__frame::before { background: transparent; }
html.vsl .guia-shot__frame::after { background: none; animation: none; }
html.vsl .guia-photo { border: 0; }

/* sumario */
html.vsl .sumario li, html.vsl .sumario li.cor-p, html.vsl .sumario li.cor-v { color: var(--verde); border-bottom-color: rgba(183,132,67,.28); }
html.vsl .sumario li::before, html.vsl .sumario li.cor-p::before, html.vsl .sumario li.cor-v::before { color: var(--dourado); }
html.vsl #sumario .sumario__btn {
  background: transparent; color: var(--verde); border: 1px solid var(--dourado); box-shadow: none;
}
html.vsl #sumario .sumario__btn:hover { background: rgba(183,132,67,.12); box-shadow: none; }

/* depoimentos em video */
html.vsl .vtesti video { border: 1px solid rgba(183,132,67,.4); box-shadow: 0 18px 36px -28px rgba(60,40,15,.5); }
html.vsl .vtesti:hover video { border-color: var(--dourado); }
html.vsl .vtesti .vtesti__cap { color: #5E675F; }
html.vsl .vtesti .vtesti__cap b { color: #8A5A22; }

/* checkout: o cartao da oferta em verde-floresta, o foco da pagina */
html.vsl #planos #plano-digital {
  background: linear-gradient(180deg, #1F4033, #173327);
  border: 1px solid rgba(217,178,107,.55);
  box-shadow: 0 28px 52px -32px rgba(23,51,39,.75);
  --fg: #F3EADB; --muted: #D8CDBB; --muted-2: #BDB09C; --accent-text: #E3BE7A;
}
html.vsl .plan__ribbon, html.vsl #planos .plan__ribbon {
  background: linear-gradient(180deg, #D9B26B, #B78443); color: #2A1A0A; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45);
}

/* autora: cartao verde, texto claro */
html.vsl .author-card {
  background: linear-gradient(180deg, #3B241B, #2A1810);
  border-color: rgba(217,178,107,.45); color: #F3EADB;
  --fg: #F3EADB; --muted: #D8CDBB; --muted-2: #BDB09C; --accent-text: #E3BE7A;
}

/* duvidas */
html.vsl .faq__item { background: #FFFCF7; border: 1px solid rgba(183,132,67,.30); }
html.vsl .faq__item[open] { border-color: var(--dourado); }
html.vsl .faq__item summary { color: var(--verde); }
html.vsl .faq__plus::before, html.vsl .faq__plus::after { background: var(--dourado); }

/* ---------- blocos de enfase: marrom-cacau com clarao central e cantoneiras ---------- */
html.vsl #garantia, html.vsl #cta-final {
  background: radial-gradient(ellipse 75% 65% at 50% 50%, #3B241B 0%, #26160F 62%, #1B100C 100%);
  border-top: 1px solid rgba(217,178,107,.4);
}
html.vsl #garantia::after, html.vsl #cta-final::after {
  content: ""; position: absolute; inset: 16px; pointer-events: none; z-index: 1;
  --c: rgba(196,106,66,.85); --t: 1.5px; --l: 26px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat;
}
html.vsl #garantia .section__title,
html.vsl #garantia .final__title,
html.vsl #cta-final .section__title,
html.vsl #cta-final .final__title { color: var(--creme-texto); font-weight: 600; }
html.vsl #garantia .section__title .text-accent,
html.vsl #garantia .final__title .text-accent,
html.vsl #cta-final .section__title .text-accent,
html.vsl #cta-final .final__title .text-accent { color: var(--laranja-claro); font-style: italic; font-weight: 600; }
html.vsl #garantia .glass,
html.vsl #cta-final .glass { --fg: #F3EADB; --muted: #CDBFAE; --muted-2: #A99A88; --accent-text: #E0824A; }
html.vsl #garantia .guarantee,
html.vsl #cta-final .guarantee { background: transparent; border: 1px solid rgba(217,178,107,.35); box-shadow: none; }
html.vsl #garantia .guarantee__body p,
html.vsl #garantia .final p,
html.vsl #cta-final .guarantee__body p,
html.vsl #cta-final .final p { color: #CDBFAE; }
html.vsl #garantia .final,
html.vsl #cta-final .final { background: transparent; border: 0; box-shadow: none; }
html.vsl #garantia .final__glow,
html.vsl #cta-final .final__glow { display: none; }
/* botao do ultimo bloco: verde limao cheio como os demais, com letras espacadas em caixa alta */
html.vsl #cta-final .btn--primary {
  text-transform: uppercase; letter-spacing: .12em; font-size: .84rem; font-weight: 700;
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- rodape ---------- */
html.vsl .rodape { background: var(--verde); color: #F3EADB; border-top: 1px solid rgba(217,178,107,.45); }
html.vsl .rodape a { color: #E3BE7A; }

/* palavras de destaque da headline no laranja de "seguranca" (mesmo tom do ultimo bloco), cor lisa, sem degrade */
html.vsl .hero-n__titulo--frase .ouro {
  color: var(--laranja-claro); background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--laranja-claro);
}

/* "80 orientacoes" da headline de baixo no mesmo laranja da headline de cima */
html.vsl .hero-n__frase2 .laranja { color: var(--laranja-claro); }

/* TESTE: titulos que eram verde-floresta passam para o marrom do fundo da abertura (#3B241B) */
html.vsl #sumario .section__title,
html.vsl #depoimentos .section__title,
html.vsl #guia .section__title,
html.vsl #motivos .section__title,
html.vsl #planos .section__title,
html.vsl #sobre .section__title,
html.vsl #duvidas .section__title,
html.vsl .bento__card h3 { color: #3B241B; }

/* mais respiro entre os blocos: secoes mais altas e folga entre a frase de baixo e a faixa da abertura;
   o video cede essa folga (~18px) para a faixa continuar fechando a primeira tela */
html.vsl .section { padding-block: clamp(3.5rem, 8vw, 6rem); }
html.vsl .hero-n__frase2 { margin-bottom: 1.1rem; }
@media (min-width: 801px) {
  html.vsl .hero-n__player { width: clamp(200px, min(92vw, (93.4svh - 430px) * 9 / 16 + 6px), 526px); }
}
@media (max-width: 800px) {
  html.vsl .hero-n__player { width: clamp(150px, min(86vw, (100svh - 203px - 28.4vw) * 9 / 16 + 6px), 340px); }
}