/* Layout: faixas horizontais alternando areia, papel e petróleo; coluna de 1120px alinhada à esquerda; fotos reais como âncora visual de cada página */
:root{
  --petroleo:#1F4E5A; --petroleo-escuro:#173C45; --petroleo-linha:#3B6874;
  --terracota:#C2603F; --terracota-escura:#A84F31; --terracota-clara:#F2B9A4;
  --salvia:#6F8E7E; --salvia-clara:#E4EBE6; --salvia-texto:#2F4A3E;
  --areia:#F5EFE6; --areia-funda:#ECE3D6; --papel:#FBF8F3;
  --grafite:#26302E; --grafite-suave:#55615D; --linha:#DDD3C4;
  --sobre-escuro:#D8E4E2; --sobre-escuro-suave:#A9C3BB;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texto:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px)); --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --raio:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px}
body{margin:0; background:var(--areia); color:var(--grafite); font-family:var(--f-texto); font-size:1.0625rem; line-height:1.65}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); color:var(--petroleo); line-height:1.12; text-wrap:balance; margin:0}
h1{font-size:clamp(2.2rem, 5vw, 3.7rem); font-weight:650; letter-spacing:-0.02em}
h2{font-size:clamp(1.7rem, 3.3vw, 2.45rem); font-weight:650; letter-spacing:-0.015em}
h3{font-size:1.22rem; font-weight:650}
p{margin:0}
abbr[title]{text-decoration:none}
.faixa{padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.miolo{max-width:1120px; margin:0 auto; padding-block:clamp(56px, 8vw, 100px)}
.rotulo{font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--salvia)}
.lead{font-size:1.18rem; color:var(--grafite-suave); max-width:60ch}
.cabeca-secao{display:grid; gap:14px; max-width:740px; margin-bottom:40px}
.papel{background:var(--papel); border-block:1px solid var(--linha)}
.escuro{background:var(--petroleo); color:var(--sobre-escuro)}
.escuro h2,.escuro h3{color:#fff}
.escuro .rotulo{color:var(--sobre-escuro-suave)}
.escuro .lead{color:var(--sobre-escuro)}
:focus-visible{outline:3px solid var(--terracota); outline-offset:3px; border-radius:4px}

/* Botões e links de ação */
.botoes{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; gap:10px; font:600 1rem/1.2 var(--f-texto); padding:15px 22px; border-radius:var(--raio); text-decoration:none; transition:background .15s, transform .15s, color .15s; border:1.5px solid transparent}
.btn svg{width:20px; height:20px; flex:none}
.btn-acao{background:var(--terracota); color:#fff}
.btn-acao:hover{background:var(--terracota-escura)}
.btn-linha{border-color:var(--petroleo); color:var(--petroleo)}
.btn-linha:hover{background:var(--petroleo); color:#fff}
.escuro .btn-linha{border-color:#fff; color:#fff}
.escuro .btn-linha:hover{background:#fff; color:var(--petroleo)}
.btn:active{transform:translateY(1px)}
.link-seta{font-weight:600; color:var(--terracota); text-decoration:none}
.link-seta:hover{text-decoration:underline}
.escuro .link-seta{color:var(--terracota-clara)}

/* Cabeçalho */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:30; background:var(--areia)}
.topo{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--areia); border-bottom:1px solid var(--linha)}
.topo .interno{max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px}
.marca{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.marca img{width:44px; height:44px}
.marca b{display:block; font-family:var(--f-display); font-weight:650; color:var(--petroleo); letter-spacing:.08em; font-size:1rem; line-height:1.1}
.marca small{display:block; font-size:.78rem; color:var(--grafite-suave)}
.topo .interno{flex-wrap:wrap; column-gap:28px; row-gap:0}
.agendar-topo{order:3; padding:11px 18px; font-size:.92rem}
.abas-site{order:2; flex:1; display:flex; justify-content:flex-end; gap:4px; align-self:stretch; min-width:0}
.abas-site a{display:flex; align-items:center; padding:0 14px; text-decoration:none; font-weight:500; font-size:.94rem; color:var(--petroleo); border-bottom:3px solid transparent; white-space:nowrap; margin-bottom:-11px; padding-bottom:3px}
.abas-site a:hover{color:var(--terracota)}
.abas-site a[aria-current="page"]{border-bottom-color:var(--terracota); color:var(--terracota); font-weight:600}
@media (max-width:1000px){
  .abas-site{order:4; flex:0 0 100%; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin-top:8px; border-top:1px solid var(--linha)}
  .abas-site::-webkit-scrollbar{display:none}
  .abas-site a{padding:12px 12px 9px; margin-bottom:-10px}
  .abas-site a:first-child{padding-left:0}
}

/* Abertura da página inicial */
.abertura .miolo{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,72px); align-items:center; padding-block:clamp(36px,6vw,80px)}
.abertura .texto{display:grid; gap:22px; min-width:0}
.abertura h1 em{font-style:normal; color:var(--terracota)}
.selos{display:flex; flex-wrap:wrap; gap:8px}
.selo{font-size:.85rem; font-weight:500; color:var(--salvia-texto); background:var(--salvia-clara); padding:6px 12px; border-radius:6px}
.retrato{position:relative; max-width:440px; width:100%; justify-self:end; margin:0}
.retrato img{border-radius:18px; aspect-ratio:4/5; object-fit:cover; width:100%}
.retrato figcaption{position:absolute; left:-18px; bottom:24px; background:var(--petroleo); color:#fff; padding:12px 16px; border-radius:var(--raio); font-size:.88rem; line-height:1.35; max-width:230px}
.retrato figcaption b{display:block; font-family:var(--f-display); font-size:1rem}
@media (max-width:820px){ .abertura .miolo{grid-template-columns:1fr} .retrato{justify-self:start; max-width:380px} .retrato figcaption{left:12px} }

/* Abas (para quem é) */
.abas-lista{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.aba{font:600 .98rem/1.2 var(--f-texto); padding:12px 18px; border-radius:999px; border:1.5px solid var(--petroleo); background:transparent; color:var(--petroleo); cursor:pointer}
.aba[aria-selected="true"]{background:var(--petroleo); color:#fff}
.painel-aba{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,64px); align-items:start}
.painel-aba .resumo{display:grid; gap:14px; align-content:start}
.painel-aba .resumo p{color:var(--grafite-suave)}
.idade{display:inline-block; justify-self:start; font-weight:600; font-size:.9rem; color:var(--salvia-texto); background:var(--salvia-clara); padding:6px 12px; border-radius:6px}
.lista-id{list-style:none; margin:0; padding:0; display:grid}
.lista-id li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding-block:16px; border-top:1px solid var(--linha)}
.lista-id li:last-child{border-bottom:1px solid var(--linha)}
.lista-id li::before{content:""; width:12px; height:12px; margin-top:8px; border-radius:50%; border:2.5px solid var(--terracota)}
@media (max-width:820px){ .painel-aba{grid-template-columns:1fr} }

/* Serviços */
.servicos-grade{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px}
.servico{background:var(--papel); border:1px solid var(--linha); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:12px; grid-column:span 2; min-width:0}
.servico.destaque{grid-column:span 3; background:var(--petroleo); border-color:var(--petroleo); color:var(--sobre-escuro)}
.servico.destaque h3{color:#fff}
.servico.destaque .para{color:var(--salvia-clara); background:var(--petroleo-linha)}
.servico.destaque .link-seta{color:var(--terracota-clara)}
.servico .para{align-self:flex-start; font-size:.8rem; font-weight:600; color:var(--salvia-texto); background:var(--salvia-clara); padding:5px 10px; border-radius:6px}
.servico .desc{flex:1}
.servico ul{margin:0; padding-left:18px; color:var(--grafite-suave); font-size:.96rem}
@media (max-width:980px){ .servicos-grade{grid-template-columns:repeat(2, minmax(0,1fr))} .servico, .servico.destaque{grid-column:span 1} }
@media (max-width:620px){ .servicos-grade{grid-template-columns:1fr} }

/* Fases da avaliação */
.fases{list-style:none; margin:0; padding:0; display:grid; counter-reset:fase}
.fases > li{counter-increment:fase; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,auto); gap:8px 24px; padding-block:24px; border-top:1px solid var(--petroleo-linha); align-items:baseline}
.fases > li:last-child{border-bottom:1px solid var(--petroleo-linha)}
.fases > li::before{content:counter(fase); font-family:var(--f-display); font-weight:650; font-size:2.6rem; line-height:1; color:var(--terracota-clara)}
.fases h3{font-size:1.15rem}
.fases p{color:var(--sobre-escuro); margin-top:6px; max-width:62ch}
.fases .tempo{font-size:.88rem; font-weight:600; color:var(--salvia-clara); background:var(--petroleo-linha); padding:5px 10px; border-radius:6px; white-space:nowrap}
.fases .diferencial{color:#fff}
.fases .diferencial b{color:var(--terracota-clara)}
.papel .fases > li, .claro .fases > li{border-color:var(--linha)}
@media (max-width:700px){ .fases > li{grid-template-columns:48px minmax(0,1fr)} .fases > li::before{font-size:2rem} .fases .tempo{grid-column:2; justify-self:start} }

/* Sanfonas (abordagens e dúvidas) */
.sanfona details{border-top:1px solid var(--linha)}
.sanfona details:last-of-type{border-bottom:1px solid var(--linha)}
.sanfona summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:20px; font-weight:600; color:var(--petroleo); font-size:1.06rem}
.sanfona summary::-webkit-details-marker{display:none}
.sanfona summary::after{content:"+"; font-family:var(--f-display); font-size:1.6rem; line-height:1; color:var(--terracota); transition:transform .2s; flex:none}
.sanfona details[open] summary::after{transform:rotate(45deg)}
.sanfona .conteudo{padding-bottom:24px; display:grid; gap:12px; color:var(--grafite-suave); max-width:66ch}
.sanfona .conteudo h4{margin:6px 0 0; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia)}
.sanfona .conteudo ul{margin:0; padding-left:20px; display:grid; gap:4px}
.sanfona summary small{display:block; font-weight:400; color:var(--grafite-suave); font-size:.92rem; margin-top:2px}

/* Duas colunas genéricas */
.duas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:start}
.duas.foto-esq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center}
.duas .texto{display:grid; gap:18px; min-width:0}
.duas .texto > p{color:var(--grafite-suave); max-width:62ch}
.escuro .duas .texto > p{color:var(--sobre-escuro)}
.foto-bloco img{border-radius:18px; width:100%; aspect-ratio:4/5; object-fit:cover}
.foto-bloco.larga img{aspect-ratio:1/1}
@media (max-width:820px){ .duas, .duas.foto-esq{grid-template-columns:1fr} .foto-bloco{max-width:420px} }

.pilares{display:grid}
.pilar{padding-block:18px; border-top:1px solid var(--linha); display:grid; gap:4px}
.pilar:last-child{border-bottom:1px solid var(--linha)}
.pilar h3{font-size:1.08rem}
.pilar p{color:var(--grafite-suave); font-size:.98rem}

.formacao{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:10px}
.formacao li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:baseline}
.formacao li span{font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--salvia)}

/* Locais */
.locais{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.local{border:1px solid var(--linha); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:10px; background:var(--papel)}
.local p{color:var(--grafite-suave); font-size:.98rem}
.local address{font-style:normal; font-weight:500; color:var(--grafite)}
.local .dia{align-self:flex-start; font-size:.8rem; font-weight:600; color:var(--salvia-texto); background:var(--salvia-clara); padding:5px 10px; border-radius:6px}
.local ul{margin:0; padding-left:18px; color:var(--grafite-suave); font-size:.96rem; display:grid; gap:4px}
@media (max-width:960px){ .locais{grid-template-columns:1fr} }

/* Dúvidas */
.duvidas-grade{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(32px,6vw,80px)}
.duvidas-grade .cabeca-secao{margin:0; align-content:start}
@media (max-width:820px){ .duvidas-grade{grid-template-columns:1fr} }

/* Topo das páginas internas */
.capa .miolo{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,72px); align-items:center; padding-block:clamp(40px,6vw,80px)}
.capa .texto{display:grid; gap:20px; min-width:0}
.capa img{border-radius:18px; aspect-ratio:4/5; object-fit:cover; width:100%; max-width:420px; justify-self:end}
.trilha{font-size:.9rem; color:var(--grafite-suave)} .trilha a{color:var(--petroleo)}
@media (max-width:820px){ .capa .miolo{grid-template-columns:1fr} .capa img{justify-self:start; max-width:360px} }

/* Aviso de conteúdo a preencher */
.a-preencher{border:2px dashed var(--terracota); background:#FBEDE6; color:var(--terracota-escura); border-radius:12px; padding:18px 20px; font-size:.95rem}

/* Chamada final */
.final{background:var(--terracota); color:#fff}
.final .miolo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; padding-block:clamp(48px,7vw,80px)}
.final h2{color:#fff; max-width:20ch}
.final p{color:#FBE3D9; margin-top:10px; max-width:48ch}
.final .btn-acao{background:#fff; color:var(--terracota-escura)}
.final .btn-acao:hover{background:var(--areia)}
.final .btn-linha{border-color:#fff; color:#fff}
.final .btn-linha:hover{background:#fff; color:var(--terracota-escura)}

/* Rodapé */
.rodape{background:var(--petroleo-escuro); color:var(--sobre-escuro); font-size:.94rem}
.rodape .miolo{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; padding-block:56px 28px}
.rodape img{width:160px}
.rodape h3{color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-texto); font-weight:600; margin-bottom:12px}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rodape a{text-decoration:none} .rodape a:hover{color:#fff; text-decoration:underline}
.aviso{grid-column:1/-1; border-top:1px solid #33606B; padding-top:22px; display:grid; gap:8px; font-size:.86rem; color:var(--sobre-escuro-suave)}
.aviso b{color:#fff}
@media (max-width:900px){ .rodape .miolo{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .rodape .miolo{grid-template-columns:1fr} }

/* Texto longo (política) */
.texto-longo{max-width:70ch; display:grid; gap:14px}
.texto-longo h2{font-size:1.35rem; margin-top:22px}
.texto-longo p,.texto-longo li{color:var(--grafite-suave)}
.texto-longo ul{margin:0; padding-left:22px; display:grid; gap:6px}

/* WhatsApp flutuante */
.zap{position:fixed; right:calc(18px + env(safe-area-inset-right, 0px)); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:25; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 6px 18px rgba(23,60,69,.28); transition:transform .15s}
.zap:hover{transform:scale(1.06)}
.zap svg{width:30px; height:30px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }

/* Conexão Comportamental */
.painel-valores{background:var(--petroleo); color:var(--sobre-escuro); border-radius:18px; padding:clamp(26px,4vw,40px); display:grid; gap:16px; align-self:center}
.painel-valores h2{color:#fff; font-size:1.5rem}
.painel-valores ul{list-style:none; margin:0; padding:0; display:grid}
.painel-valores li{padding-block:11px; border-top:1px solid var(--petroleo-linha)}
.painel-valores li:first-child{border-top:0; padding-top:0}
.atividades{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px}
.atividades .pilar:nth-last-child(2){border-bottom:1px solid var(--linha)}
@media (max-width:700px){ .atividades{grid-template-columns:1fr} .atividades .pilar:nth-last-child(2){border-bottom:0} }

/* Pré-contato */
.form-contato{background:var(--areia); border:1px solid var(--linha); border-radius:16px; padding:clamp(20px,3vw,32px); display:grid; gap:16px; min-width:0}
.campo{display:grid; gap:6px; min-width:0}
.campo label{font-weight:600; font-size:.95rem; color:var(--petroleo)}
.campo label span{font-weight:400; color:var(--grafite-suave)}
.campo input,.campo select,.campo textarea{width:100%; font:400 1rem/1.4 var(--f-texto); color:var(--grafite); background:var(--papel); border:1.5px solid var(--linha); border-radius:var(--raio); padding:12px 14px}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--petroleo); box-shadow:0 0 0 3px var(--salvia-clara)}
.campo [aria-invalid="true"]{border-color:var(--terracota)}
.campos-duplos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.aviso-idade{font-size:.92rem; color:var(--salvia-texto); background:var(--salvia-clara); padding:10px 14px; border-radius:var(--raio)}
.erro-form{font-size:.92rem; color:var(--terracota-escura); font-weight:600}
.form-contato .btn{justify-self:start; cursor:pointer}
@media (max-width:560px){ .campos-duplos{grid-template-columns:1fr} }

/* Aviso de conteúdo informativo e funções avaliadas */
.nota-informativa{font-size:.9rem; color:var(--grafite-suave); border-left:3px solid var(--salvia); padding-left:14px; max-width:70ch; border-radius:0}
.funcoes{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.funcao{background:var(--papel); border:1px solid var(--linha); border-radius:14px; padding:24px; display:grid; gap:10px; align-content:start}
.funcao h3{font-size:1.08rem}
.funcao ul{margin:0; padding-left:18px; color:var(--grafite-suave); display:grid; gap:4px; font-size:.97rem}
@media (max-width:900px){ .funcoes{grid-template-columns:1fr} }

/* Abas da página de avaliação */
.barra-abas{border-bottom:1px solid var(--linha)}
.barra-abas .miolo{padding-block:28px}
.barra-abas .abas-lista{margin:0}
.papel .fases > li::before, .barra-abas ~ [role="tabpanel"] .papel .fases > li::before{color:var(--terracota)}
.papel .fases p{color:var(--grafite-suave)}