/* =====================================================================
   Proposta v4: o mundo da home estendido às outras páginas.
   Carrega por defeito em todas as páginas (eleventy.config.js), depois do
   v3.css (cabeçalho escuro, tokens dos botões) e do v4.css (superfícies do
   browser, curvas). A home e as Clínicas têm folhas próprias e não levam
   esta classe. Estratégia: inverter os tokens de cor do styles.css e
   corrigir à mão os poucos sítios onde o branco está escrito no código.
   ===================================================================== */

body.v4-site{
  --ink:#ECEAE6;            /* a "tinta" passa a ser o texto claro */
  --paper:#1f1f1e;          /* cartões e superfícies elevadas */
  --mist:#1c1c1b;           /* secções alternadas, quase o fundo */
  --line:#2e2d2b;
  --gray:#2a2927;
  --muted:#a9a7a2;
  --muted-2:#8f8d88;
  --gray-type:#7c7a75;
  --muted-dark:#a9a7a2;
  --camel-ink:#c19d86;      /* camel legível sobre carvão */
  --camel-text:var(--camel);
  --fluid-stroke:rgba(193,157,134,.24);
  background:var(--v3-bg);color:var(--ink);
}

/* A regra do nível mínimo: nada de etiquetas por cima dos títulos */
body.v4-site .eyebrow{display:none}

/* Secções: o carvão é contínuo; a alternância faz-se com linhas, não com fundos claros */
body.v4-site .section--mist{background:var(--v3-bg);border-top:1px solid var(--line)}
body.v4-site .section--dark,body.v4-site .section--deep{background:#141413;border-top:1px solid var(--line)}
body.v4-site .section--mist .flow .num{--flow-bg:var(--v3-bg)}

/* Títulos no registo da home: 600 com a palavra atenuada em 300 itálico */
body.v4-site .h1,body.v4-site .h2{font-weight:600;letter-spacing:-.03em}
body.v4-site .h1 em,body.v4-site .h2 em,body.v4-site .post-title em{font-weight:300;color:var(--v3-muted)}
body.v4-site .lead{color:var(--muted)}

/* Cartões: superfície um tom acima, sem sombra de papel */
body.v4-site .card,body.v4-site .svc2__card,body.v4-site .founder,body.v4-site .faq__item{background:var(--paper);border-color:var(--line);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  body.v4-site .svc2__card:hover{box-shadow:0 24px 50px rgba(0,0,0,.45)}
  body.v4-site .card:hover{box-shadow:0 18px 40px rgba(0,0,0,.4)}
}
body.v4-site .svc2__card .more:focus-visible::after{outline-color:var(--camel)}
body.v4-site .founder__photo{box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.45)}

/* Faixas que tinham o carvão como fundo passam a um tom acima */
body.v4-site .banner,body.v4-site .post-cta{background:var(--v3-bg-3,#262624);color:var(--ink)}
body.v4-site .post-cta h3{color:var(--ink)}

/* Blog */
body.v4-site .post-card{background:var(--paper);border-color:var(--line)}
body.v4-site .post-card__cover{background:#262624}
body.v4-site .blog-filter{background:transparent;border-color:var(--line);color:var(--muted)}
body.v4-site .blog-filter:hover,body.v4-site .blog-filter.active{background:var(--ink);color:#181818;border-color:var(--ink)}
body.v4-site .post-share a:hover{background:var(--ink);color:#181818;border-color:var(--ink)}
body.v4-site .prose a{text-decoration-color:var(--camel)}
body.v4-site .prose li::before{background:var(--camel)}

/* Página Trabalho (estilos inline da própria página) */
body.v4-site .tool{background:var(--paper);border-color:var(--line)}
body.v4-site .tool__state.on{background:var(--ink);color:#181818;border-color:var(--ink)}
body.v4-site .tool li{background:#262624}
body.v4-site .work-next{background:var(--paper);border:1px solid var(--line)}
body.v4-site .work-chips span{border-color:var(--line)}

/* Formulário de contacto e passos */
body.v4-site .next-steps li::before{background:var(--camel);color:#181818}

/* Janela de sucesso/erro do formulário */
body.v4-site .tmi-modal__panel{background:var(--paper);color:var(--ink);border:1px solid var(--line)}

/* Cabeçalhos de página interior */
body.v4-site .page-hero,body.v4-site .blog-hero{border-bottom-color:var(--line)}

/* As faixas escuras invertiam os botões para branco com texto na cor da
   "tinta"; com a tinta clara, o texto desaparecia. O texto do botão fica
   sempre carvão. */
body.v4-site .section--dark,body.v4-site .section--deep,body.v4-site .cookie,body.v4-site .post-cta,body.v4-site .banner{
  --btn-bg:#ECEAE6;--btn-fg:#181818;--btn-bg-hover:#fff;
  --btn-ghost-fg:#ECEAE6;--btn-ghost-bd:#4a4845;--btn-ghost-hover-bg:#ECEAE6;--btn-ghost-hover-fg:#181818;
}