@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{--petroleo:#0F4C5C;--petroleo-esc:#062F3A;--petroleo-med:#083B4A;--laranja:#F28C28;--tinta:#172126;--papel:#F7F8F6;--linha:#D9DFDC;--suave:#52625F;--erro:#B3261E}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--tinta);background:var(--papel)}
img{max-width:100%;height:auto;display:block}
a{color:var(--petroleo)}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.pular{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:20}
.pular:focus{left:0}

.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem clamp(1rem,4vw,3rem);background:var(--petroleo-esc);color:#fff}
.marca{font-size:1.4rem;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.01em}
.marca span{color:var(--laranja)}
.topo nav{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.topo nav a{color:#fff;text-decoration:none;font-weight:500}
.topo nav a:hover{text-decoration:underline}
.topo nav .botao{color:var(--tinta)}

.botao,.botao-claro{display:inline-block;padding:.6rem 1.1rem;border-radius:.6rem;font-weight:700;text-decoration:none;border:2px solid var(--laranja);background:var(--laranja);color:var(--tinta);cursor:pointer;font:inherit;font-weight:700;line-height:1.3}
.botao:hover{background:#ffa24a}
.botao-claro{background:transparent;color:inherit;border-color:currentColor}
.heroi .botao-claro{color:#fff}
.contato .botao-claro{color:#fff}
.grande{padding:.85rem 1.4rem;font-size:1.05rem}

.heroi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.5rem,7vw,5.5rem) clamp(1rem,4vw,3rem);background:linear-gradient(160deg,var(--petroleo-esc),var(--petroleo));color:#fff;overflow:hidden}
.heroi h1{font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 1.25rem;font-weight:800;max-width:14ch}
.heroi p{max-width:46ch;color:#dfeaed;font-size:1.15rem;margin:0 0 1.75rem}
.acoes{display:flex;gap:.75rem;flex-wrap:wrap}
.heroi-visual{position:relative;padding:0 0 3.5rem}
.janela{border-radius:.75rem;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);background:#fff}
.janela.escura{background:#0b1f27}
.celular{position:absolute;right:-.5rem;bottom:0;width:34%;border-radius:1.4rem;overflow:hidden;border:5px solid #0a1a20;box-shadow:0 18px 40px rgba(0,0,0,.45);background:#fff}
.plaquinha{position:absolute;left:-1.5rem;bottom:-1rem;display:grid;justify-items:center;gap:.1rem;padding:.9rem 1.1rem;background:#fff;color:var(--petroleo-esc);border-radius:1rem;border-bottom:6px solid var(--laranja);box-shadow:0 12px 30px rgba(0,0,0,.35);transform:rotate(-5deg)}
.plaquinha strong{font-size:1.5rem;line-height:1.1}
.plaquinha span{font-size:.78rem;color:var(--suave)}

.bloco{max-width:68rem;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2rem)}
.bloco h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 2rem;max-width:24ch}
.caminho{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:passo}
.caminho li{position:relative;padding-top:1.1rem;border-top:4px solid var(--linha)}
.caminho li:nth-child(1){border-color:var(--laranja)}
.caminho li:nth-child(2){border-color:var(--petroleo)}
.caminho li:nth-child(3){border-color:var(--petroleo-esc)}
.caminho h3{margin:0 0 .4rem;font-size:1.25rem}
.caminho p{margin:0;color:var(--suave)}

.recurso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.recurso.invertido .recurso-texto{order:2}
.recurso h3{font-size:1.6rem;line-height:1.2;margin:0 0 .75rem;letter-spacing:-.01em}
.recurso p{margin:0 0 .75rem;max-width:52ch}
.recurso .janela{border-color:var(--linha);box-shadow:0 10px 30px rgba(6,47,58,.15)}
.celular-solo{display:flex;justify-content:center}
.celular-solo img{width:min(260px,70%);border-radius:1.5rem;border:5px solid #0a1a20;box-shadow:0 14px 34px rgba(6,47,58,.25)}
.nota{font-size:.95rem;color:var(--suave);border-left:3px solid var(--laranja);padding-left:.75rem}
.demo-aviso{text-align:center;color:var(--suave);font-size:.95rem}
.lista-extra{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.lista-extra li{padding-top:1rem;border-top:1px solid var(--linha);color:var(--suave)}
.lista-extra strong{color:var(--tinta)}

.perguntas{max-width:50rem}
.perguntas details{border-bottom:1px solid var(--linha);padding:.9rem 0}
.perguntas summary{cursor:pointer;font-weight:700;font-size:1.1rem}
.perguntas details p{margin:.6rem 0 0;color:var(--suave);max-width:60ch}

.contato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem);background:var(--petroleo-esc);color:#fff}
.contato h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.1;margin:0 0 1rem;letter-spacing:-.02em}
.contato-texto p{color:#dfeaed;max-width:40ch}
.contato a{color:var(--laranja)}
.contato a.botao-claro{color:#fff}
.formulario,.enviado{background:#fff;color:var(--tinta);border-radius:1rem;padding:clamp(1.25rem,3vw,2rem);max-width:40rem}
.enviado h3{margin:0 0 .5rem;font-size:1.5rem}
.campo{margin-bottom:.9rem}
.campo label{display:block;font-weight:600;margin-bottom:.25rem;font-size:.98rem}
.campo input[type=text],.campo input:not([type]),.campo select,.campo textarea{width:100%;padding:.65rem .75rem;font:inherit;border:1.5px solid #8A9895;border-radius:.5rem;background:#fff;color:var(--tinta)}
.campo textarea{min-height:5.5rem;resize:vertical}
.campo input[aria-invalid=true],.campo textarea[aria-invalid=true]{border-color:var(--erro)}
.erro{color:var(--erro);font-size:.9rem;min-height:1.1rem}
.erro-geral{color:var(--erro);font-weight:600;margin:0 0 1rem}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.dica{margin:-.4rem 0 .9rem;font-size:.9rem;color:var(--suave)}
.contato .aceite a{color:var(--petroleo)}
.aceite label{font-weight:400;display:flex;gap:.5rem;align-items:flex-start}
.aceite input{margin-top:.35rem;width:1.1rem;height:1.1rem;flex:none}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario .botao{width:100%}

.rodape{padding:2rem clamp(1rem,4vw,3rem);background:#04222B;color:#b9cbd0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rodape p{margin:0}.rodape a{color:#fff}
.texto-legal{max-width:44rem;margin:0 auto;padding:3rem 1rem}
.texto-legal h1{letter-spacing:-.02em}

@media (max-width:860px){
  .heroi,.contato,.recurso{grid-template-columns:1fr}
  .recurso.invertido .recurso-texto{order:0}
  .caminho,.lista-extra{grid-template-columns:1fr}
  .heroi h1{max-width:none}
  .topo nav a:not(.botao):not(.entrar){display:none}
  .linha{grid-template-columns:1fr}
  .plaquinha{left:0;padding:.5rem .7rem}
  .plaquinha svg{width:36px;height:36px}
  .plaquinha strong{font-size:1.1rem}
  .topo{padding:.6rem 1rem}
  .topo nav{flex-wrap:nowrap;gap:.75rem}
  .marca{font-size:1.2rem}
  .botao{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}