/* Ferramentas de leitura do blog levadas para as outras páginas (Quem somos
   e calculadoras): o conteúdo num card branco arredondado sobre o fundo
   creme (o "contorno" do artigo), a linha de compartilhar e a faixa amarela
   com tipo de letra, tamanho do texto e modo escuro.
   Mesma aparência de eleventy/blog.css; valores próprios (--pt-*) para não
   depender das variáveis de cada página. Comportamento: /assets/page-tools.js
   (as preferências são as mesmas do blog e valem no site inteiro). */

/* ---------- o card (contorno) ---------- */
/* Espaçamento padrão do site (o da home): a página tem um respiro de
   0,5rem (0,75rem a partir de 640px) em volta; o primeiro card começa nele e
   a barra flutuante passa por cima do card. O conteúdo do card desce o
   suficiente para não ficar sob a barra (mesmo respiro do artigo do blog). */
.page-card{
  background:var(--background, #fff); border-radius:2rem;
  margin:0;
}
/* A faixa amarela vai de ponta a ponta da tela (100vw), como no blog. */
body:has(.page-card){ overflow-x:clip; }
/* Calculadoras: não há <main> com o respiro da home; o corpo faz esse papel
   (e deixa de reservar espaço fixo para a barra, que agora flutua sobre o
   card). O rodapé fica 0,75rem abaixo do card, como nas outras páginas. */
body[data-site-menu="standalone"]:has(.page-card){ padding:0.5rem; }
@media (min-width:640px){ body[data-site-menu="standalone"]:has(.page-card){ padding:0.75rem; } }
body[data-site-menu="standalone"]:has(.page-card) .site-footer-wrap{ padding:0; }
body[data-site-menu="standalone"] .page-card{ padding-top:5.25rem !important; }
@media (min-width:640px){ body[data-site-menu="standalone"] .page-card{ padding-top:6.5rem !important; } }
/* Humano vs VGV X: o card envolve a .wrap, que já tinha respiro no topo. */
body[data-site-menu="standalone"] .page-card > .wrap{ padding-top:0; }

/* Tipo de letra e tamanho valem para o conteúdo do card. */
.page-card.pt-serif .page-card-conteudo, .page-card.pt-serif .page-card-conteudo *{ font-family:Georgia, "Times New Roman", serif !important; }
.page-card-conteudo{ zoom:var(--pt-escala, 1); }

/* ---------- linha de compartilhar ---------- */
.share-toolbar{
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  max-width:64rem; margin:0 auto 1rem;
}
.share-toolbar .share-btn{
  position:relative; display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border:none; background:none; cursor:pointer;
  border-radius:62.5rem; color:var(--ink-soft, #71695a); transition:background 0.2s, color 0.2s;
}
.share-toolbar .share-btn:hover{ background:var(--ghost, #e8dfc7); color:var(--ink, #0a0a0a); }
.share-toolbar .share-btn svg{ width:1rem; height:1rem; }
.reading-toolbar-copy-feedback{
  position:absolute; bottom:120%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink, #0a0a0a); color:var(--surface, #faf6ea); font-size:0.68rem; font-weight:500;
  padding:0.3rem 0.6rem; border-radius:0.4rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s;
}
[data-copy-link].is-copied .reading-toolbar-copy-feedback{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- faixa amarela: tipo de letra, tamanho, modo escuro ---------- */
.reading-toolbar-bleed{
  width:100vw; position:relative; left:50%; right:50%;
  margin:0 -50vw 2rem; background:#ffc200;
}
.reading-toolbar{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.75rem 1rem;
  max-width:64rem; margin:0 auto; padding:0.85rem 1.5rem;
}
.reading-toolbar-group{ display:flex; align-items:center; gap:0.35rem; }
.reading-toolbar-divider{ width:1px; height:1.5rem; background:rgba(10,10,10,0.18); flex:none; }
.reading-toolbar-btn{
  position:relative; display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border:none; background:none; cursor:pointer; font-family:"Onest", system-ui, sans-serif !important;
  border-radius:62.5rem; color:#3a2c00; font-size:0.78rem; font-weight:600;
  transition:background 0.2s, color 0.2s;
}
.reading-toolbar-btn:hover{ background:rgba(10,10,10,0.1); color:#1a1400; }
.font-btn[aria-pressed="true"]{ background:#1a1400; color:#ffc200; }
.font-btn.font-serif-sample{ font-family:Georgia, "Times New Roman", serif !important; }
.reading-toolbar-theme{
  display:flex; align-items:center; gap:0.4rem; color:#3a2c00; border-radius:62.5rem; padding:0.3rem 0.5rem;
  border:none; background:none; cursor:pointer; transition:color 0.2s;
}
.reading-toolbar-theme:hover{ color:#1a1400; }
.reading-toolbar-theme svg{ width:0.95rem; height:0.95rem; flex:none; }
.reading-toolbar-theme .icon-sun{ color:#1a1400; }
.reading-toolbar-theme-track{
  position:relative; width:2.4rem; height:1.4rem; border-radius:62.5rem;
  background:rgba(10,10,10,0.18); flex:none; transition:background 0.2s;
}
.reading-toolbar-theme-dot{
  position:absolute; top:0.2rem; left:0.2rem; width:1rem; height:1rem; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.reading-toolbar-theme[aria-pressed="true"] .reading-toolbar-theme-track{ background:#1a1400; }
.reading-toolbar-theme[aria-pressed="true"] .reading-toolbar-theme-dot{ transform:translateX(1rem); }

/* ---------- modo escuro (mesmos valores do blog) ---------- */
html[data-theme="dark"]{
  --background:#141210;   --foreground:#f3ede1;
  --surface:#1c1a17;      --surface-card:#221f1b;
  --ink:#f3ede1;          --ink-soft:#a89e8c;
  --ghost:#3a352c;        --hairline:#332f28;
  --on-brand:#141210;
}
html[data-theme="dark"] body{ background:var(--background); color:var(--foreground); }
html[data-theme="dark"] .page-card{ background:var(--surface); }

/* Blocos que usam a cor do texto como fundo escuro (ficariam claros e com
   texto branco ilegível): no modo escuro mantêm o preto. */
html[data-theme="dark"] .calc-kpi.accent,
html[data-theme="dark"] .calc-bonus,
html[data-theme="dark"] .plan.combo,
html[data-theme="dark"] .plan-cta{ background:#0a0a0a !important; border-color:#2a2620 !important; }
html[data-theme="dark"] .plan.combo .plan-cta{ background:#ffb200 !important; color:#0a0a0a !important; }
html[data-theme="dark"] .team-photo{ background:#0a0a0a; }

/* A proposta (tela e PDF) é sempre clara: é o documento que vai ao cliente. */
html[data-theme="dark"] .proposal-overlay{
  --background:#ffffff;  --foreground:#0a0a0a;
  --surface:#faf6ea;     --surface-card:#ffffff;
  --ink:#0a0a0a;         --ink-soft:#71695a;
  --ghost:#e8dfc7;       --hairline:#ece4d0;
  --on-brand:#ffffff;
  color:#0a0a0a;
}

/* ---------- calculadoras: liberação pela equipe ----------
   Até liberar, a área da calculadora é uma imagem estática desfocada (a
   prévia, já desfocada no próprio arquivo) com a box do consultor por cima.
   A calculadora de verdade só entra na página depois (/assets/consultor.js).
   É identificação da equipe, não senha. */
.consultor-area{
  position:relative; overflow:hidden; border-radius:1.5rem;
  min-height:clamp(34rem, 72vh, 50rem); margin-bottom:1rem;
  background:var(--surface, #faf6ea); border:1px solid var(--hairline, #ece4d0);
}
.consultor-area[hidden]{ display:none; }
.consultor-previa{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:blur(2px); transform:scale(1.03); opacity:0.92;
  user-select:none; pointer-events:none;
}
.consultor-sobre{
  position:relative; z-index:1; min-height:inherit;
  display:grid; place-items:center; padding:2rem 1rem;
  background:linear-gradient(180deg, rgba(250,246,234,0.25), rgba(250,246,234,0.6));
}
html[data-theme="dark"] .consultor-sobre{ background:linear-gradient(180deg, rgba(20,18,16,0.35), rgba(20,18,16,0.7)); }
.consultor-box{
  width:min(100%, 46rem); padding:1.5rem 1.5rem 0.75rem;
  background:var(--background, #fff); border:1px solid var(--hairline, #ece4d0);
  border-radius:1.5rem; box-shadow:0 1.5rem 3rem rgba(10,10,10,0.14);
  font-family:"Onest", system-ui, sans-serif;
}
.consultor-head{ display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem; }
.consultor-tag{
  font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:#0a0a0a; background:#ffb200; border-radius:62.5rem; padding:0.35rem 0.8rem;
}
.consultor-head p{ font-size:0.9rem; color:var(--ink-soft, #71695a); margin:0; line-height:1.5; }
.consultor-campos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.5rem 0.75rem; margin-top:1.1rem; }
.consultor-campo:first-child{ grid-column:1 / -1; }
@media (max-width:640px){ .consultor-campos{ grid-template-columns:minmax(0,1fr); } }
.consultor-campo{ display:flex; flex-direction:column; gap:0.35rem; min-width:0; }
.consultor-campo span{ font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft, #71695a); }
.consultor-campo input{
  width:100%; font:inherit; font-size:0.95rem; color:var(--ink, #0a0a0a);
  background:var(--surface, #faf6ea); border:1px solid var(--hairline, #ece4d0); border-radius:0.75rem;
  padding:0.75rem 0.9rem;
}
.consultor-campo input:focus{ outline:none; border-color:#facc15; }
.consultor-campo input[aria-invalid="true"]{ border-color:#c0392b; }
.consultor-campo small{ min-height:1.1em; font-size:0.72rem; color:#a8271f; }
.consultor-btn{
  grid-column:1 / -1; justify-self:end;
  font:inherit; font-size:0.9rem; font-weight:600; color:#0a0a0a; background:#ffb200;
  border:1px solid #ffc200; border-radius:62.5rem; padding:0.8rem 1.6rem; cursor:pointer;
  margin:0.25rem 0 0.75rem;
}
@media (max-width:640px){ .consultor-btn{ justify-self:stretch; } }
.consultor-btn:hover{ filter:brightness(0.96); }
.consultor-ok{
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
  max-width:64rem; margin:0 auto 1.25rem; font-size:0.85rem; color:var(--ink, #0a0a0a);
}
.consultor-ok[hidden]{ display:none; }
.consultor-ok::before{ content:""; width:0.5rem; height:0.5rem; border-radius:50%; background:#3a7d2c; flex:none; }
.consultor-trocar{ font:inherit; font-size:0.8rem; color:var(--ink-soft, #71695a); background:none; border:none; text-decoration:underline; cursor:pointer; padding:0; }
.calculadora-montagem[hidden]{ display:none; }