/* ===== Territórium ZPE — design sóbrio institucional (SITE_SPEC v1.0) ===== */
:root{
  --tinta:#1e2a30;          /* texto principal */
  --petroleo:#134e5e;       /* cor institucional */
  --petroleo-esc:#0d3843;
  --areia:#f7f6f2;          /* fundo claro */
  --branco:#ffffff;
  --cinza:#5c6a70;
  --acento:#b98c3a;         /* dourado discreto — só detalhes */
  --borda:#e3e1da;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--tinta);background:var(--branco);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;color:var(--petroleo-esc);line-height:1.25;font-weight:600}
h1{font-size:2.35rem}
h2{font-size:1.6rem;margin-bottom:.6em}
h3{font-size:1.15rem;margin-bottom:.4em}
p{margin-bottom:1em}
a{color:var(--petroleo)}
img{max-width:100%}

/* ---- topo ---- */
header{background:var(--branco);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:50}
.topo{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.marca{font-family:Georgia,serif;font-size:1.25rem;color:var(--petroleo-esc);text-decoration:none;font-weight:700}
.marca span{color:var(--acento)}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--cinza);font-size:.95rem;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a.ativo{color:var(--petroleo);border-bottom-color:var(--acento)}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,var(--areia) 0%,var(--branco) 100%);padding:72px 24px 56px;text-align:center}
.hero-inner{max-width:760px;margin:0 auto}
.hero h1{margin-bottom:.5em}
.hero .sub{font-size:1.15rem;color:var(--cinza);margin-bottom:1.6em}
.hero-pagina{background:var(--areia);padding:56px 24px 40px}
.hero-pagina .hero-inner{text-align:left;max-width:820px}

/* ---- botões ---- */
.btn{display:inline-block;background:var(--petroleo);color:#fff;text-decoration:none;padding:14px 34px;border-radius:4px;font-weight:600;font-size:1rem;border:none;cursor:pointer}
.btn:hover{background:var(--petroleo-esc)}
.btn-claro{background:transparent;color:var(--petroleo);border:1.5px solid var(--petroleo)}
.btn-claro:hover{background:var(--areia)}

/* ---- seções ---- */
section{padding:56px 24px}
.faixa-areia{background:var(--areia)}
.faixa-petroleo{background:var(--petroleo-esc);color:#eef2f3}
.faixa-petroleo h2{color:#fff}
.inner{max-width:1080px;margin:0 auto}
.inner-texto{max-width:820px;margin:0 auto}
.centro{text-align:center}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:28px}
.card{background:var(--branco);border:1px solid var(--borda);border-radius:6px;padding:28px;border-top:3px solid var(--acento)}
.card h3{color:var(--petroleo)}
.card p{margin:0;color:var(--cinza);font-size:.97rem}

/* ---- passos ---- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:28px;counter-reset:passo}
.passo{padding:24px;background:var(--areia);border-radius:6px;counter-increment:passo;position:relative}
.passo::before{content:counter(passo);font-family:Georgia,serif;font-size:2.4rem;color:var(--acento);display:block;line-height:1;margin-bottom:10px;font-weight:700}
.passo p{margin:0;font-size:.97rem;color:var(--cinza)}

/* ---- números ---- */
.numeros{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;text-align:center}
.numero .big{font-family:Georgia,serif;font-size:2.6rem;color:var(--acento);font-weight:700;display:block;line-height:1.1}
.numero .rot{font-size:.9rem;color:#c6d4d8;max-width:170px;display:block}

/* ---- listas de produto ---- */
.itens{list-style:none;margin:18px 0}
.itens li{padding:10px 0 10px 34px;position:relative;border-bottom:1px solid var(--borda)}
.itens li::before{content:"—";color:var(--acento);position:absolute;left:6px;font-weight:700}
.itens li:last-child{border-bottom:none}

/* ---- destaque/quote ---- */
.destaque{border-left:4px solid var(--acento);background:var(--areia);padding:20px 26px;margin:26px 0;border-radius:0 6px 6px 0}
.destaque p{margin:0}

/* ---- FAQ ---- */
details{border:1px solid var(--borda);border-radius:6px;margin-bottom:12px;background:var(--branco)}
summary{padding:16px 20px;cursor:pointer;font-weight:600;color:var(--petroleo-esc);list-style-position:inside}
summary:hover{background:var(--areia)}
details p{padding:0 20px 16px;color:var(--cinza);margin:0}

/* ---- formulário ---- */
form{max-width:560px;margin:0 auto;text-align:left}
label{display:block;font-size:.9rem;font-weight:600;margin:14px 0 4px;color:var(--petroleo-esc)}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--borda);border-radius:4px;font-size:1rem;font-family:inherit;background:var(--branco)}
input:focus,select:focus{outline:2px solid var(--petroleo);border-color:var(--petroleo)}
form .btn{margin-top:22px;width:100%}
.form-nota{font-size:.85rem;color:var(--cinza);margin-top:10px;text-align:center}

/* ---- faixa de registro documental (D3) ---- */
.registro{background:var(--branco);border-top:1px solid var(--borda);padding:10px 24px;text-align:center;font-family:'Consolas','Courier New',monospace;font-size:.72rem;letter-spacing:.5px;color:var(--cinza)}

/* ---- manchete de jornal (D1) ---- */
.hero h1{font-size:2.7rem;letter-spacing:-.5px}
.fonte-dado{display:block;font-size:.78rem;color:var(--cinza);margin-top:14px}

/* ---- rodapé ---- */
footer{background:var(--petroleo-esc);color:#c6d4d8;padding:40px 24px;font-size:.9rem}
footer .inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:#e8eef0}
footer .marca{color:#fff}
footer .marca span{color:var(--acento)}

@media(max-width:640px){
  h1{font-size:1.7rem}
  .hero{padding:48px 18px 40px}
  section{padding:40px 18px}
  .numeros{gap:28px}
}