/* Tokens do design system (espelho do manual/03-design-system). Nenhuma cor fora daqui. Cores lisas; degradê só nas exceções aprovadas
   (fusão das fotos da Talita ao branco, no topo, e ao vinho, na seção Sobre).
   v0.7.1: topo com a foto da Talita de fundo; etapas em branco e vinho. */
:root{
  color-scheme:light;
  /* Marca (manual da Talita) */
  --wine:#72363D;
  --wine-up:#7F3E46;
  --wine-hover:#5C2A31;
  --wine-deep:#3F1D22;
  --wine-tint:#F0C9C3;
  --coral:#E2716F;
  --coral-up:#D8615F;
  --olive:#A8B55D;
  --olive-up:#9CA951;
  --blue-gray:#67878C;
  --black:#151521;
  --black-2:#22223A;
  /* Fundos claros: branco da marca e tons claros do coral e do oliva */
  --white:#FFFFFF;
  --soft:#FBECEA;
  --band:#EEF0E3;
  /* Texto */
  --ink:#151521;
  --ink-2:#55565F;
  --ink-3:#6B6C75;
  --slate:#151521;
  /* Linhas */
  --line:#EFE2E0;
  --line-2:#DDCDCA;
  /* Cards coloridos do Como funciona */
  --rose-ink:#5A3F3E;
  --rose-line:#DDA9A1;
  /* Sobre fundo escuro */
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.82);
  --on-dark-3:rgba(255,255,255,.62);
  --on-dark-4:rgba(255,255,255,.12);
  --line-dark:rgba(255,255,255,.18);
  --overlay:rgba(21,21,33,.55);
  --header-solid:rgba(63,29,34,.96);
  --wine-deep-75:rgba(63,29,34,.75);
  --wine-deep-0:rgba(63,29,34,0);
  --pulse:rgba(114,54,61,.45);
  --pulse-0:rgba(114,54,61,0);
  --shadow-photo:0 30px 60px -30px rgba(63,29,34,.45);
  --shadow-card:0 14px 34px -12px rgba(21,21,33,.25);
  --white-85:rgba(255,255,255,.85);
  --white-0:rgba(255,255,255,0);
  --spot-off:0 1px 0 #EFE2E0;
  --spot-on:0 0 0 2px #72363D,0 18px 34px -14px rgba(114,54,61,.45);
  /* Foco */
  --note:#D35C2D;
  /* Tipografia */
  --f-sans:"Montserrat Alternates","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  /* Forma e espaço */
  --r:18px; --r-sm:12px; --r-lg:24px; --r-xl:28px;
  --gut:max(clamp(16px,4vw,40px), env(safe-area-inset-left, 0px));
  --gut-r:max(clamp(16px,4vw,40px), env(safe-area-inset-right, 0px));
  --edge:max(var(--gut), calc((100vw - 1180px) / 2 + var(--gut)));
}

/* ---------- Cores por seção (v0.7.1) ----------
   Só cor: nenhuma posição ou tamanho muda aqui. O prefixo "html" faz estas regras valerem sobre o componentes.css.
   Como no manual da marca: fundo branco, blocos chapados em verde-oliva e coral, vinho como cor principal.
   Poucas cores por tela. Sem verde-escuro.
   Sequência: branco (topo) · rosa claro (Sinais) · oliva claro (Como funciona) · rosa claro (Por que acontece) · branco (Tratamentos)
   · vinho-escuro com foto (Sobre) · oliva claro (Resultados) · branco (Espaço) · rosa claro (Dúvidas) · coral (Contato) · vinho-escuro (rodapé).
   Header ao rolar e menu do celular em vinho-escuro. */
/* Header ao rolar e menu do celular em vinho-escuro (o mesmo do rodapé) */
html body::before{background:var(--wine-deep)}

/* Blocos claros (oliva e coral) usam texto escuro: troca as variáveis de "texto sobre escuro" só dentro deles */
html .causas,html .contact{--on-dark:#151521;--on-dark-2:rgba(21,21,33,.82);--on-dark-3:rgba(21,21,33,.66);--on-dark-4:rgba(21,21,33,.16);--line-dark:rgba(21,21,33,.22)}

/* S02 Sinais: cartão de resultado em vinho */
html .sig-card{background:var(--wine)}

/* S03 Por que acontece: rosa claro, cards brancos, destaques em vinho */
html .causas{background:var(--soft)}
html .causas em,html .causas .statement.js em .w.on{color:var(--wine)}
html .cause{background:var(--white)}
html .cause:hover{background:var(--white)}
html .cause-ic{background:var(--soft);color:var(--wine)}
html .cause.note{background:transparent}

/* S04 Como funciona: cards alternando branco e vinho */
html .eval-bar{background:var(--wine)}

/* S08 O espaço: bloco da marca em oliva com monograma vinho */
html .car-slide.brand{background:var(--olive);color:var(--black)}
html .car-slide.brand .brand-ts,html .car-slide.brand em{color:var(--wine)}

/* S10 Contato: coral chapado com texto escuro; mapa em vinho; rodapé em vinho-escuro */
html .contact{background:var(--coral)}
html .contact em{color:var(--wine-deep)}
html .form-card em{color:var(--wine)}
html .form-card .btn{color:var(--white)}
html .contact .btn-light{background:var(--white);color:var(--wine)}
html .contact .map{--on-dark:#FFFFFF;--on-dark-2:rgba(255,255,255,.82);--line-dark:rgba(255,255,255,.18);background:var(--wine);color:var(--on-dark)}
html .site-footer{background:var(--wine-deep)}