/* ===========================================================================
   Virtù — fontes e cores do Sistema de Design v2.0 sobre o site atual (PRÉVIA)
   Pedido do Felipe (01/10/2026): no site, mudar SÓ fontes e cores; o formato fica como está
   (capa com a foto visível, portfólio com o nome sobre a foto, logos dos clientes em cartões,
   formulário, "A empresa", "O que nos guia", faixa "Vamos construir…" e rodapé).
   Valores copiados de Desktop/Claude/virtu-marca/tokens.css (única fonte da marca).
   Carregado DEPOIS do <style> de cada página.
   =========================================================================== */

:root {
  /* tokens da marca (virtu-marca/tokens.css) */
  --v-creme: #F6F4F3; --v-branco: #FFFFFF; --v-tinta: #0E1011; --v-tinta-2: #16181A;
  --v-borda: #E7E4DD; --v-borda-escura: #2A2C2D;
  --v-verde: #75C340; --v-verde-hover: #8FD45A; --v-verde-texto: #4D8A28;
  --v-pedra-escura: #55534E; --v-pedra: #6B6963; --v-pedra-clara: #84827C; --v-sobre-tinta: #B5B2AA;
  --v-editorial: 'Newsreader', Georgia, serif;
  --v-estrutural: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* CORES: os nomes antigos do site passam a valer as cores da marca */
  --lime: var(--v-verde); --lime-bright: var(--v-verde-hover); --lime-on-dark: var(--v-verde); --lime-text: var(--v-verde-texto);
  --ink: var(--v-tinta); --ink-2: var(--v-tinta-2); --ink-3: var(--v-tinta-2);
  --bone: var(--v-creme); --bone-2: var(--v-branco); --gray: var(--v-pedra);
  --line: var(--v-borda); --line-dark: var(--v-borda-escura);

  /* FONTES: tudo em Hanken Grotesk; a editorial (Newsreader itálico) entra só nos papéis abaixo */
  --display: var(--v-estrutural); --body: var(--v-estrutural);
}

/* ── Capa: Newsreader itálico leve ── */
.hero h1, .page-head .sec-title {
  font-family: var(--v-editorial); font-style: italic; font-weight: 300; text-transform: none;
  letter-spacing: -.012em; line-height: 1.04; text-wrap: balance;
}
.hero h1 { font-size: clamp(46px, 6.4vw, 92px); }
.page-head .sec-title { font-size: clamp(44px, 6vw, 84px); max-width: 16ch; }
.hero h1 .word-lime, .page-head .sec-title em { color: inherit; font-weight: inherit; }   /* verde é funcional, não enfeite de título */
.hero .line, .anim-line { padding: 0 .08em .08em 0; }   /* o corte da animação não come o itálico */

/* ── Títulos de seção: Hanken 600 + UMA palavra em Newsreader itálico ── */
.sec-title, .contact-title, .cta-section h2, .founder-name, .dir-name {
  font-weight: 600; text-transform: none; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance;
}
.sec-title { max-width: 22ch; }
.sec-title em, .contact-title em, .services .sec-title em {
  font-family: var(--v-editorial); font-style: italic; font-weight: 400; color: inherit; letter-spacing: -.01em;
}

/* ── Títulos de cartão: Hanken 600, sem caixa alta ── */
.svc h3, .pf-meta h4, .virtue h4, .proc-step h4, .drawer a, .lb-title, .cred b, .client b {
  font-weight: 600; text-transform: none; letter-spacing: -.005em;
}

/* ── Citações: Newsreader itálico leve (a caixa fica como está) ── */
.about-quote p, .dir-quote {
  font-family: var(--v-editorial); font-style: italic; font-weight: 300; font-size: 23px; line-height: 1.4;
}

/* ── Números: algarismo em tinta, só o sinal em verde ── */
.stat-num { font-weight: 700; }
.stat-num .count { color: var(--v-tinta); }

/* ── Rótulos em caixa alta ── */
.sec-eyebrow, .stat-label, .virtue-tag { font-weight: 600; }

/* ── Botões: verde da marca com rótulo em tinta ── */
.btn-primary, .hero .btn-primary, .arch-cta, .nav-links a.nav-cta, .drawer .drawer-cta, .btn-wa {
  background: var(--v-verde); color: var(--v-tinta) !important; font-weight: 600;
}
.btn-primary:hover, .hero .btn-primary:hover, .arch-cta:hover, .nav-links a.nav-cta:hover, .drawer .drawer-cta:hover, .btn-wa:hover {
  background: var(--v-verde-hover); color: var(--v-tinta) !important; box-shadow: none;
}
/* ── Portal do Cliente no topo (06/10/2026): contorno em tinta, ao lado do "Fale conosco"; no celular fica ao lado do menu ── */
#nav { gap: 14px; }
#nav .nav-links { margin-left: auto; }
#nav a.nav-portal {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0;
  padding: 11px 16px; min-height: 46px; border: 1.5px solid var(--v-tinta); border-radius: 2px;
  font-family: var(--v-estrutural), sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--v-tinta) !important;
  transition: background .18s ease, color .18s ease;
}
#nav a.nav-portal:hover { background: var(--v-tinta); color: var(--v-creme) !important; }
#nav a.nav-portal svg { flex-shrink: 0; }
#nav a.nav-portal .nav-portal-s { display: none; }
.drawer a.drawer-portal { font-weight: 600; }
/* troca de idioma (PT/EN) */
.nav-links a.nav-lang { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; padding: 6px 9px; border: 1px solid rgba(14,16,17,.22); border-radius: 2px; min-height: 0; line-height: 1; }
.nav-links a.nav-lang::after { display: none; }
#nav.on-dark:not(.scrolled) .nav-links a.nav-lang { border-color: rgba(246,245,243,.4); }
@media (max-width: 980px) {
  #nav a.nav-portal { margin-left: auto; }
}
@media (max-width: 480px) {
  #nav a.nav-portal { padding: 9px 12px; min-height: 42px; font-size: 12.5px; }
  #nav a.nav-portal .nav-portal-l { display: none; } #nav a.nav-portal .nav-portal-s { display: inline; }   /* no celular: "Portal" com o cadeado */
}

/* na faixa verde o botão verde sumiria: ali ele continua em tinta */
.cta-section .btn-primary, .cta-section .btn-primary:hover { background: var(--v-tinta); color: var(--v-creme) !important; }

/* ── WhatsApp flutuante e detalhes que tinham cor fora da paleta ── */
.wa-float { background: var(--v-verde); box-shadow: 0 4px 24px rgba(117,195,64,.45); }
.wa-float:hover { box-shadow: 0 6px 32px rgba(117,195,64,.6); }
.wa-float svg { fill: var(--v-tinta); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(117,195,64,.45); }
  50% { box-shadow: 0 4px 36px rgba(117,195,64,.7), 0 0 0 10px rgba(117,195,64,.08); }
}
.qf-note svg { color: var(--v-verde-texto); }
.qf-field label .req { color: inherit; }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus { box-shadow: 0 0 0 3px rgba(117,195,64,.18); }
footer a[style*="4ade80"] { color: var(--v-verde-hover) !important; }

/* ── Texto de apoio sobre claro: pedra escura da marca ── */
.about-text p, .page-head .lead, .architects .wrap p.reveal, .portfolio-head p { color: var(--v-pedra-escura) !important; }

@media (max-width: 600px) {
  .hero h1 { font-weight: 400; }   /* no celular a foto fica mais clara atrás do título: um peso acima */
  .about-quote p, .dir-quote { font-size: 20px; }
}

/* correção de defeito antigo (não é da marca): em telas de 320 px "TRANSPARENTE" não cabia na coluna dos números
   e a página inteira encolhia, tirando o menu e o WhatsApp da tela */
@media (max-width: 360px) {
  .stat { padding-left: 18px; padding-right: 18px; }
  .stat-label { font-size: 12px; letter-spacing: .04em; }
}