/* ============================================================================
   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;
}

/* --- 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 */

h1,h2,h3,.display{
  font-family:var(--swiss-sans) !important;
  font-weight:800 !important;
  letter-spacing:-.035em;
  line-height:1.02;
  text-wrap:balance;
  color:#111;
}
h1{font-size:clamp(38px,6.4vw,80px)}
h2{font-size:clamp(26px,3.6vw,46px)}
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} }