/* ══ A FACE (Vitor, 10/ago: "mesma face em tudo") ══════════════════════════════
   Bodoni Moda self-hospedada. Antes, TODA pagina caia no fallback local
   (Bodoni MT no Windows, Didot no Mac, Georgia no Android) — ou seja, a marca
   tinha uma cara por sistema operacional. Agora tem uma so.
   Variavel: um arquivo cobre 400-700 e opsz 6-96, entao nao ha 4 requests de peso.
   `font-display:swap` de proposito — texto legivel na hora, troca quando chegar;
   numa pagina de venda, bloquear o texto por causa de fonte e pior que o FOUT. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/bodoni-moda-latin-normal.woff2") format("woff2");
  /* subset latin: todo diacritico do portugues (ã õ ç é â) cabe em Latin-1 */
  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: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/bodoni-moda-latin-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;
}
/* ============================================================================
   vd-swiss.css — LINGUAGEM VISUAL ÚNICA do Vodulce (primavera/verão 2026)
   Branco · grotesca · flat · bloco vivo com LETRA PRETA.
   Carregado por: /planos/, /colegio/, /receitas, /r/*, /livros/ e home.
   Estratégia: REPINTA OS TOKENS legados em vez de reescrever o HTML de cada
   página — o markup existente herda a linguagem nova sozinho.
   🔒 REGRA FIXA: cor viva NUNCA leva texto branco (todas reprovam: verde fluor
      dá 1,32:1 no branco). Bloco vivo = letra #111. Medido, não achado.
   ============================================================================ */
:root{
  /* --- repinte dos tokens legados (é o que propaga p/ o markup antigo) --- */
  --creme:#FFFFFF; --creme2:#FCFCFA; --branco:#FFFFFF;
  --linho:#E4E4DF; --cinza:#77776F;
  --ink:#111111; --preto:#111111;
  --espresso:#111111; --espresso2:#1C1C1A;

  /* --- paleta viva (contraste medido com texto #111) --- */
  --verde:#C7F03F;      /* 14,35:1 */
  --verde-esc:#B4E82E;
  --laranja:#FF6A13;    /*  6,58:1 */
  --tanja:#FF8A2B;      /*  8,02:1 */
  --manga:#FFB020;      /* 10,33:1 */
  --melancia:#FF3B5C;   /*  5,42:1 */

  /* acao primaria da landing = verde fluor (no app segue #6FA04A) */
  --primary:#C7F03F; --primary-ink:#111111; --primary-hover:#B4E82E;

  --swiss-line:#E4E4DF;
  --swiss-sans:-apple-system,"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --swiss-disp:"Bodoni Moda", "Playfair Display", "Bodoni MT", Didot, "Hoefler Text", Garamond, "Times New Roman", serif;
}

/* --- base --- */
html{background:#fff}
body{
  background:#fff !important;
  color:#111 !important;
  font-family:var(--swiss-sans) !important;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto}   /* canonico: evita a imagem esticada */

/* ══ VOGUE DA VODULCE (Vitor, 10/ago) ══════════════════════════════════════
   O display sai do grotesco e vai pro serifado de alto contraste — a mesma
   pilha da revista, caractere por caractere, pra landing e revista deixarem de
   ser dois produtos. Trocado AQUI e não em 22 páginas: foi copiar token à mão
   que criou a divergência (index em Fredoka, blog em Inter, revista em Playfair).

   ⚠️ Serifa é do TÍTULO, nunca do corpo. O que faz parecer editorial é o
   CONTRASTE entre display serifado e corpo neutro; serifa no corpo em tela
   cansa e faz "revista" virar "convite de casamento". O corpo segue --swiss-sans.
   ⚠️ Peso e tracking MUDAM junto com a família: 800/-.035em é ajuste de
   grotesco. Playfair em 800 fica borrado e o tracking negativo fecha as
   serifas. Serifa de display quer ~700 e tracking quase neutro.
   ⚠️ Sem webfont de propósito — a revista usa esta mesma pilha com fallback
   (Bodoni/Didot/Hoefler/Garamond).    RESOLVIDO em 10/ago: o woff2 esta self-hospedado aqui em cima
   (Bodoni Moda, 98 KB, OFL). Nunca Google Fonts: a CSP nao libera terceiro. */
h1,h2,h3,.display{
  font-family:var(--swiss-disp) !important;
  font-weight:700 !important;
  letter-spacing:-.012em;
  line-height:1.06;
  text-wrap:balance;
  color:#111;
}
h1{font-size:clamp(38px,6.4vw,76px);line-height:1.02}
h2{font-size:clamp(26px,3.4vw,44px);line-height:1.1}
h3{font-size:clamp(18px,1.7vw,22px);line-height:1.28;letter-spacing:0}

/* ── componentes editoriais da revista, disponíveis pra qualquer página ────── */
.vg-kicker{font:700 12.5px/1.4 var(--swiss-sans);letter-spacing:.2em;
  text-transform:uppercase;color:#6E6E63}
.vg-rail{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0 12px;border-bottom:1px solid #14140F;
  font:700 10.5px/1.4 var(--swiss-sans);letter-spacing:.2em;text-transform:uppercase;color:#14140F}
.vg-rail .mk{font:400 17px/1 var(--swiss-disp);letter-spacing:.06em;text-transform:none}
.vg-rail .mid{color:#6E6E63;text-align:center;flex:1 1 auto}
/* fio de tinta sob a seção: o divisor que dá o ar de revista, de graça */
.vg-fio{padding-bottom:9px;border-bottom:2px solid #14140F}
/* número em círculo — a ÚNICA vez que o flúor é texto, e pode porque o fundo
   é tinta (~13:1). Sobre claro ele daria 1,32 e sumiria. */
.vg-num{width:38px;height:38px;border-radius:50%;flex:none;background:#14140F;
  color:var(--verde);display:inline-flex;align-items:center;justify-content:center;
  font:800 17px/1 var(--swiss-sans)}
/* etiqueta com contorno de tinta — pesa sem tingir o fundo */
.vg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.vg-chips span{background:#fff;border:1.5px solid #14140F;padding:7px 13px;border-radius:999px;
  font:700 14px/1 var(--swiss-sans);white-space:nowrap;color:#14140F}
/* a barra da Vó — o elemento mais forte da página */
.vg-vo{background:#14140F;color:#F4F4EE;padding:18px 22px;display:flex;gap:14px;
  align-items:flex-start}
.vg-vo .h{flex:none;color:var(--verde);font-size:20px;line-height:1.3}
.vg-vo p{margin:0;font:italic 400 17px/1.55 var(--swiss-disp);color:#F4F4EE;max-width:62ch}
/* medida de leitura: linha longa cansa tanto quanto linha curta */
.vg-corpo p{max-width:68ch;text-align:left}
a{color:#111}
a:hover{color:var(--laranja)}

/* --- header claro --- */
.vd-hd{background:#fff !important;border-bottom:1px solid var(--swiss-line) !important}
.vd-wordmark svg{color:#111 !important}
.vd-wordmark .vd-ink{fill:currentColor}
.vd-hd-links a{color:#111 !important}
.vd-hd-links a:hover{color:var(--laranja) !important}
.vd-hd-cta{background:var(--verde) !important;color:#111 !important;border-radius:0 !important;font-weight:800}

/* --- secoes: achata os gradientes --- */
.chap,.chap-creme{background:#fff !important}
.chap-dark{background:#111 !important;color:#fff !important}
.chap-dark h1,.chap-dark h2,.chap-dark h3{color:#fff !important}

/* --- closer: era gradiente terracota c/ texto creme -> bloco vivo c/ letra preta --- */
.closer{
  background:var(--laranja) !important;
  color:#111 !important;
  padding:clamp(44px,6vw,78px) 0 !important;
}
.closer h1,.closer h2,.closer h3,.closer p,.closer li,.closer .closer-bul{color:#111 !important}

/* --- botoes: flat, sem gradiente nem sombra pesada ---
   O .btn BASE precisa de fundo proprio: sem isso o CTA sem modificador
   (ex.: "Matricular por 1 ano") mantem o gradiente dourado antigo. */
.btn{border-radius:0 !important;font-weight:800 !important;box-shadow:none !important;
  font-family:var(--swiss-sans) !important;transition:transform .12s ease;
  background:var(--verde) !important;background-image:none !important;color:#111 !important;
  text-shadow:none !important;border:0}
.btn--ouro{background:var(--verde) !important;color:#111 !important;text-shadow:none !important}
.btn--creme{background:#111 !important;color:#fff !important}
.btn--ghost{background:transparent !important;color:#111 !important;border:2px solid #111 !important}
.btn:active{transform:translateY(1px);
  box-shadow:inset 0 2px 10px rgba(255,255,255,.55),0 0 0 3px rgba(199,240,63,.45) !important}
/* dentro de bloco laranja o verde some — inverte p/ preto */
.closer .btn--ouro{background:#111 !important;color:#fff !important}

/* --- cartoes de plano: hairline, sem sombra --- */
.plan,.plans>*,.card,.faq{border-radius:0 !important;box-shadow:none !important}
.plan{border:1px solid var(--swiss-line) !important;background:#fff !important}
.plan-feat{border:2px solid #111 !important}
.pr,.preco{color:#111 !important;font-family:var(--swiss-sans) !important;
  font-weight:800 !important;letter-spacing:-.04em}
.bienal-selo,.pl-pix{background:var(--manga) !important;color:#111 !important;border-radius:0 !important}
.reassure{color:#3A3A38 !important}

/* --- rotulos micro em caixa-alta (assinatura swiss) --- */
.chap-sub{color:#77776F !important;letter-spacing:.02em}

/* ── normaliza cores LEGADAS de baixo contraste (todas vinham em style inline) ──
   Medidas no vivo com composicao de alpha; os substitutos passam AA no branco.
   Seletor de atributo = mira exata no elemento, sem regra generica que estrague
   texto claro dentro de secao escura. */
[style*="#009ee3"],[style*="#009EE3"]{color:#0B6E9E !important}          /* MP: 3,00 -> 5,62 (segue azul MP) */
[style*="#9b8268"],[style*="#9B8268"]{color:#5C5044 !important}          /* 3,63 -> 7,82 */
[style*="#3a708c"],[style*="#3A708C"]{color:#2A4E63 !important}          /* 1,89 -> 8,87 */
[style*="#2f8f5f"],[style*="#2F8F5F"]{color:#1B7A3D !important}          /* 4,03 -> 5,39 */
[style*="opacity:.85"]{opacity:1 !important}                             /* opacidade derrubava o contraste */
.big{color:#3A3A38 !important}
.chap-sub{color:#6E6E66 !important}                                      /* 4,18 -> 5,14 */

/* ── CONTEXTO MANDA: dentro de bloco vivo ou escuro, a cor do texto e ditada
   pelo FUNDO, nao pelo style inline legado. Especificidade maior que os
   seletores de atributo acima de proposito (senao o inline vence e some).
   Botao fica de fora — ele tem fundo proprio. */
.closer *:not(.btn):not(.btn *){color:#111 !important}      /* laranja -> letra preta (6,58) */
.chap-dark *:not(.btn):not(.btn *){color:#fff !important}   /* #111 -> letra branca (18,88) */

/* ── 🪐 GALÁXIA PRESERVADA (ordem explícita do Vitro: "preserve a sessão da
   galáxia e do planeta com fundo no universo"). A .cfband é a faixa do cosmos
   (gradiente #0b0908) com .cf-stars/.cf-galaxia/.planet dentro. As regras
   genéricas acima (h1/h2/h3 e `a` -> #111) pintariam texto PRETO em cima do
   fundo preto e sumiriam. Aqui o contexto manda: dentro do cosmos, letra clara. */
.cfband{background:linear-gradient(180deg,#0b0908,#161210 60%,#0b0908) !important}
.cfband h1,.cfband h2,.cfband h3,.cfband p,.cfband span,.cfband li{color:#F6EDDD !important}
.cfband a:not([class*="btn"]){color:#F6EDDD !important}
.cfband .cf-hint{color:#F0E4D2 !important;opacity:.9}
/* o planeta e as camadas de atmosfera/nuvem NAO podem ser tocados */
.cfband .planet,.cfband .planet *,.cfband .cf-cosmos,.cfband .cf-cosmos *,
.cfband .vo-system,.cfband .vo-system *{background-image:revert;background-color:revert}

/* ⚠️ efeito colateral de repintar --creme para #FFF: quem usava creme como TEXTO
   sobre fundo claro virou branco-no-branco. Medido: so 1 caso na home. */
.lt-more{color:#111 !important;opacity:.55 !important}

/* ── elementos que RECEBERAM o fundo vivo no codemod e ficaram com rotulo branco.
   O codemod trocou `background:var(--terra2)` -> `var(--primary)` mas nao inverteu
   a cor do texto: fluor + branco = 1,32:1 (invisivel). Regra da casa aplicada. */
.td-tab.is-active,[class*="tab"].is-active,[class*="pill"].is-active{color:#111 !important}
.brevinho{color:#7A5210 !important}                    /* dourado 2,35 -> 6,90 */
[style*="#8a7364"],[style*="#8A7364"],.td-foot,.td-foot a{color:#5C5044 !important}  /* 4,45 -> 7,82 */

/* ── /presente/ e paginas antigas: usam `var(--terracota)` em REGRAS DE CLASSE
   (nao em style inline), por isso escaparam dos codemods. Repontar o token seria
   perigoso — ele tambem pinta FUNDO aqui. Miro so os usos de TEXTO. */
header.topbar .brand span,.hero h1 em,section h2 em,.hero em{color:#111 !important}
.price-card .price small,.vo-voice cite{color:#5C5C5C !important}   /* #888 3,54 -> 7,0 */
.price-card .savings{color:#1B7A3D !important}                      /* "economize" = ganho -> verde 5,39 */

/* ⛔ NÃO reintroduzir `body a{color:#111}` com especificidade alta.
   Testado em 18/jul e REVERTIDO: pintou de preto os links de RODAPÉ ESCURO
   (/presente/) -> contraste 1.0, invisíveis. Blindar .cfband/.chap-dark/.closer
   não basta: cada página antiga tem seu próprio bloco escuro. O `a{color:var(--text)}`
   fraco lá de cima é PROPOSITAL — perde pras regras da página, que sabem o contexto.
   Preço aceito: 1 link terracota a 3,55 em /presente/ (cosmético) em vez de
   rodapé inteiro invisível. */

/* ── BLOG (18 páginas, ex-tema noturno) ── */
.recipe-link{color:#9D4A2E !important}          /* link de artigo: 3,55 -> 6,08 (mantem cara de link) */
.cta-box{background:#C7F03F !important;border-color:#C7F03F !important}
.cta-box,.cta-box *{color:#111 !important}      /* era branco sobre terracota = 3,55 -> 14,35 */

/* /r/* — pill de categoria: verde-folha na tag clara dava 4,45 (faltava 0,05) */
.tag{color:#4E6539 !important}   /* 4,45 -> 5,61 */

@media (prefers-reduced-motion:reduce){ .btn{transition:none} }