/* ============================================================================
   E78 (07/10/2026) — o SITE PÚBLICO DO PLANEJADOR.

   ⚠️⚠️ ESTE ARQUIVO É O CSS DO `Site_Planejador_powered_by_SuperRico.html` QUE O IGOR
   MANDOU, PORTADO SEM REDESENHO. Ele não pertence ao workspace e não conversa com o
   `site.css`: o site do planejador é um documento próprio, com fontes próprias e um
   `:root` próprio, servido em `/planejador/{endereco}` e dentro do iframe da prévia.

   ⚠️ NÃO CARREGUE ISTO NO LAYOUT DO WORKSPACE. As regras são globais (`*`, `body`,
   `.btn`, `.wrap`) e atropelariam o Bootstrap em toda tela do produto. Quem o inclui é
   o `_LayoutSitePlanejador`, e só ele.

   ⚠️ AS QUATRO VARIÁVEIS DE COR SÃO SOBRESCRITAS INLINE pelo tema que o planejador
   escolheu (`TemasDoSite`). Os valores abaixo são o tema Petróleo, que é o padrão — e
   também a rede de segurança para um tema que não exista mais.
   ============================================================================ */


:root{
  --ink:#0F2B2A;--brand:#0E7C7B;--accent:#1CAF9C;--tint:#E6F2F0;
  --paper:#FFFFFF;--mist:#F4F7F7;--text:#1C2928;--muted:#596867;--line:#E1E9E8;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.sec{padding:96px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.sec-h h2{font:500 clamp(30px,3.4vw,42px)/1.1 var(--serif);color:var(--ink);letter-spacing:-.01em}
.sec-h p{color:var(--muted);max-width:52ch}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 22px;font:600 15px var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-p{background:var(--ink);color:#fff}.btn-p:hover{background:var(--brand)}
.btn-s{border-color:var(--line);color:var(--ink);background:var(--paper)}.btn-s:hover{border-color:var(--ink)}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.nav-id{display:flex;flex-direction:column;line-height:1.15;text-decoration:none}
.nav-id b{font:600 20px var(--serif);color:var(--ink)}
.nav-id small{font-size:12px;color:var(--muted)}
.nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--muted)}.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:10px 18px;font-size:14px;white-space:nowrap}.nav .curta{display:none}

/* hero */
.hero{padding:76px 0 64px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:64px;align-items:center}
.role{font-weight:600;font-size:14.5px;color:var(--brand)}
.role span{color:var(--muted);font-weight:500}
.nome{font:500 clamp(46px,6.4vw,82px)/.98 var(--serif);color:var(--ink);letter-spacing:-.025em;margin:14px 0 22px}
.headline{font:400 clamp(21px,2.2vw,27px)/1.38 var(--serif);color:var(--text);max-width:32ch}
.minibio{color:var(--muted);max-width:56ch;margin-top:18px;font-size:16.5px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 9px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--paper)}
.pill i{width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;display:inline-grid;place-items:center;font-style:normal;font-size:11px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.retrato{position:relative;margin:0 18px 18px 0}
.retrato::before{content:"";position:absolute;inset:28px -18px -18px 28px;background:var(--tint);border-radius:6px}
/* ⚠️ E87 (Igor, 10/10/2026): "incluir uma borda na imagem, na mesma cor da sombra. borda de
   2px". A "sombra" é o retângulo deslocado do `.retrato::before`, que é pintado de `--tint` —
   então a borda é `--tint`, e não uma cor nova. Com `border-box` os 2px entram no tamanho que
   o `aspect-ratio` já reservou, e a coluna do hero não se mexe. */
.retrato .foto{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--tint);border:2px solid var(--tint);box-sizing:border-box}
.retrato .foto img{width:100%;height:100%;object-fit:cover}
.iniciais{position:absolute;inset:0;display:grid;place-items:center;font:500 96px var(--serif);color:var(--brand)}
.verif{position:absolute;left:-22px;bottom:30px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px;box-shadow:0 12px 30px rgba(15,43,42,.12);max-width:250px}
.verif b{display:block;font-size:14px;color:var(--ink)}
.verif small{display:block;color:var(--muted);font-size:12.5px}
.verif a{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--brand);text-decoration:none}
.verif a:hover{text-decoration:underline}

/* provas */
.provas{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.provas .wrap{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.prova{padding:30px 26px;border-left:1px solid var(--line)}
.prova:first-child{border-left:0;padding-left:0}
.prova b{display:block;font:500 46px/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums}
.prova span{display:block;margin-top:8px;color:var(--muted);font-size:14.5px}

/* sobre */
.sobre-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px}
.sobre-g h2{font:500 clamp(30px,3.4vw,42px)/1.1 var(--serif);color:var(--ink)}
.citacao{margin-top:28px;font:400 italic 25px/1.4 var(--serif);color:var(--ink);position:relative;padding-top:30px}
.citacao::before{content:"\201C";position:absolute;top:-18px;left:-4px;font:500 82px/1 var(--serif);color:var(--accent)}
.citacao small{display:block;margin-top:12px;font:500 normal 14px var(--sans);color:var(--muted)}
.historia p{font:400 19px/1.72 var(--serif);color:var(--text);max-width:62ch}
.historia p+p{margin-top:18px}
.atuacao{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.atuacao h3{font:600 14px var(--sans);color:var(--ink);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--tint);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500}
.publico{margin-top:18px;color:var(--muted)}

/* credenciais */
.creds{background:var(--mist)}
.cred-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cred{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px 24px 22px;display:flex;flex-direction:column}
.cred .sig{font:500 36px/1 var(--serif);color:var(--brand)}
.cred .nm{margin-top:12px;font-weight:600;color:var(--ink);line-height:1.35}
.cred .meta{margin:6px 0 18px;color:var(--muted);font-size:14px}
.cred .reg{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);margin-top:auto}
.cred .reg a{font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.cred .reg a:hover{text-decoration:underline}

/* trajetória */
.traj-g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:72px}
.traj-g h3{font:600 14px var(--sans);color:var(--ink);margin-bottom:6px}
.linha{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.linha .per{color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums;padding-top:3px}
.linha .cg{font:500 22px/1.25 var(--serif);color:var(--ink)}
.linha .org{color:var(--brand);font-weight:600;font-size:14.5px;margin-top:3px}
.linha p{color:var(--muted);margin-top:8px;max-width:58ch}
.form{padding:20px 0;border-top:1px solid var(--line)}
.form b{display:block;font:500 19px/1.3 var(--serif);color:var(--ink)}
.form span{display:block;color:var(--muted);font-size:14.5px;margin-top:3px}

/* publicações */
.pubs{background:var(--mist)}
.pub{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.pub:last-child{border-bottom:1px solid var(--line)}
.pub .tp{font-size:13px;font-weight:600;color:var(--brand)}
.pub .tt{font:500 21px/1.3 var(--serif);color:var(--ink);text-decoration:none}
a.tt:hover{text-decoration:underline;text-underline-offset:4px}
.pub .vc{color:var(--muted);font-size:14.5px;margin-top:4px}
.pub .an{color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums}

/* como trabalho */
.princ-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.princ h3{font:500 24px/1.25 var(--serif);color:var(--ink);padding-top:18px;border-top:2px solid var(--ink)}
.princ p{color:var(--muted);margin-top:10px}

/* contato */
/* ===== E94 — "Cadastre-se e conecte comigo" =====
   A única seção do site que ESCREVE. Ela usa o `--tint` de fundo, e não o `--ink` do contato
   logo abaixo: duas faixas escuras seguidas fariam o fim da página virar um bloco só, e a
   seção de contato perderia o peso que o desenho original lhe dá. */
/* ===== E96 — o logo na barra do topo =====
   ⚠️ A ALTURA MANDA, e a largura é livre: logo é de proporção imprevisível, e fixar a largura
   achataria os horizontais e estouraria os verticais. `max-inline-size` só existe como teto
   para um logo muito deitado não empurrar a navegação para fora da barra. */
.nav-logo{display:block;block-size:40px;inline-size:auto;max-inline-size:220px;object-fit:contain}

@media (max-width:900px){.nav-logo{block-size:32px;max-inline-size:160px}}

.cadastro{background:var(--tint)}
.cadastro h2{font:500 clamp(28px,3.2vw,40px)/1.12 var(--serif);color:var(--ink);letter-spacing:-.01em;max-width:18ch}
.cadastro-convite p{color:var(--text);max-width:50ch;margin-top:18px;font-size:16.5px}

/* ⚠️ E95 — CONVITE À ESQUERDA, AÇÃO À DIREITA, na mesma régua do `.contato` logo abaixo.
   `align-items:start` e não `center`: com o convite centrado verticalmente, o título descia e
   deixava de alinhar com o primeiro campo — e é esse alinhamento que faz as duas colunas
   parecerem uma seção, e não duas. */
.cadastro-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}

/* ⚠️ O NOME DO PRODUTO, DENTRO DA FRASE. `--brand` e não `--ink`: ele precisa saltar do título
   sem virar outro tamanho de letra, que quebraria a linha do serif. */
.cadastro-marca{color:var(--brand);font-weight:600}

/* O formulário é estreito de propósito: campo de texto largo demais em página de leitura
   parece área de busca, e o olho não acha onde começa a resposta. */
.form-cadastro{max-width:420px;display:grid;gap:6px}
.form-cadastro label{font:600 13.5px var(--sans);color:var(--ink);margin-top:10px}
.form-cadastro input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:400 15px var(--sans);color:var(--ink)}
.form-cadastro input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-cadastro input:disabled{opacity:.55;cursor:not-allowed}
.form-cadastro button{margin-top:18px;justify-content:center}
.form-cadastro button:disabled{opacity:.55;cursor:not-allowed}

/* ⚠️ O aviso NÃO se distingue só pela cor (WCAG 1.4.1): o erro tem barra à esquerda e o
   sucesso não, e os dois trazem a frase escrita por extenso — nenhum depende de ler o tom. */
.cadastro .aviso{margin-top:20px;padding:12px 16px;border-radius:10px;background:var(--paper);font-size:15px;color:var(--ink);max-width:520px}
.cadastro .aviso.erro{border-left:3px solid var(--brand)}
.cadastro .aviso.ok{border-left:3px solid var(--accent)}
.cadastro .aviso a{margin-left:8px;font-weight:600;color:var(--brand)}
.cadastro .mini{margin-top:16px;color:var(--muted);font-size:13px;max-width:52ch}

.contato{background:var(--ink);color:#fff}
.contato .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
.contato h2{font:500 clamp(34px,4vw,52px)/1.08 var(--serif);letter-spacing:-.015em}
.contato p{color:rgba(255,255,255,.78);margin-top:16px;max-width:46ch;font-size:17px}
.contato .acts{display:flex;flex-direction:column;gap:10px}
.contato .btn{justify-content:space-between;width:100%;padding:16px 22px;font-size:15.5px}
.contato .btn-p{background:#fff;color:var(--ink)}.contato .btn-p:hover{background:var(--tint)}
.contato .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}.contato .btn-s:hover{border-color:#fff}

/* rodapé */
.rodape{padding:44px 0 36px;font-size:13.5px;color:var(--muted)}
.rodape .top{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}
.rodape .top b{display:block;font:600 18px var(--serif);color:var(--ink)}
.rodape .powered{display:flex;align-items:center;gap:10px;text-decoration:none}
.rodape .powered img{height:26px;width:auto}
.rodape .leg{padding-top:20px;max-width:90ch;line-height:1.6}
.rodape .leg p+p{margin-top:8px}

@media (max-width:900px){
  .wrap{padding:0 20px}.sec{padding:68px 0}
  .nav-links{display:none}
  .nav .btn{padding:9px 15px;font-size:13.5px}.nav .longa{display:none}.nav .curta{display:inline}.nav-id small{display:none}
  .hero{padding:40px 0 48px}.hero-g{grid-template-columns:1fr;gap:36px}
  .retrato{order:-1;max-width:340px;margin:0 18px 18px 0}
  .verif{left:auto;right:-6px;bottom:-14px}
  .provas .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prova{padding:22px 16px;border-left:0;border-top:1px solid var(--line)}
  .prova:nth-child(-n+2){border-top:0}.prova:nth-child(odd){padding-left:0}.prova:nth-child(even){border-left:1px solid var(--line)}
  .prova b{font-size:38px}
  .sobre-g,.traj-g,.contato .wrap,.cadastro-g{grid-template-columns:1fr;gap:40px}

  /* ⚠️ E95 — no celular as duas colunas empilham na ordem natural: convite e depois
     formulário, que é a ordem em que se lê e se decide. A marca não precisa de regra: ela é
     parte do título e acompanha. */
  .cadastro h2{max-width:none}
  .princ-g{grid-template-columns:1fr;gap:28px}
  .linha{grid-template-columns:1fr;gap:4px}
  .pub{grid-template-columns:1fr;gap:4px}
  .historia p{font-size:18px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.nav,.ed,.ed-toggle,.ed-aviso{display:none!important}.sec{padding:40px 0}}