/* Soromenho Engenharia — estilo do blog */
:root{
  --petroleo:#1A3848; --petroleo-esc:#122934; --verde:#2D8044; --verde-vivo:#11A339;
  --cinza-texto:#666666; --bg:#FFFFFF; --bg-alt:#F4F6F6; --borda:#DDE3E4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--bg); color:#2B3437;
  font-family:"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Raleway,-apple-system,Arial,sans-serif; line-height:1.25; margin:0; color:var(--petroleo-esc)}
p{margin:0 0 17px}
a{color:var(--verde); text-underline-offset:2px}
img{max-width:100%; height:auto}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* cabeçalho — igual ao da home */
header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--borda);
       box-shadow:0 1px 12px rgba(18,41,52,.05)}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px}
header img{height:38px; width:auto; display:block}
nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
nav a{font-family:Raleway; font-weight:700; font-size:14px; color:var(--petroleo); text-decoration:none}
nav a:hover, nav a[aria-current]{color:var(--verde)}
.btn{display:inline-block; font-family:Raleway; font-weight:800; font-size:14.5px; background:var(--verde-vivo);
     color:#fff; text-decoration:none; padding:12px 22px; border-radius:6px; white-space:nowrap}
.btn:hover{background:#0D8B30}
#abre-menu{position:absolute; opacity:0; pointer-events:none}
.hamburguer{display:none; cursor:pointer; padding:8px; margin-left:auto}
.hamburguer span{display:block; width:24px; height:2px; background:var(--petroleo); margin:5px 0; border-radius:2px}
@media (max-width:900px){
  header .wrap{flex-wrap:wrap; height:auto; padding-top:14px; padding-bottom:14px}
  header .wrap > .btn{display:none}
  .hamburguer{display:block}
  nav{order:3; flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .25s ease}
  #abre-menu:checked ~ nav{max-height:420px}
  nav ul{flex-direction:column; gap:0; padding-top:8px; border-top:1px solid var(--borda); margin-top:12px}
  nav li a{display:block; padding:13px 2px; font-size:16px; border-bottom:1px solid var(--borda)}
  nav .btn-menu{display:block; margin:14px 0 4px; text-align:center}
}
@media (min-width:901px){ nav .btn-menu{display:none} }

/* capa */
.capa{background:var(--petroleo); color:#fff; padding:54px 0 46px}
.capa .trilha{font-size:13.5px; color:#8FB0BE; margin:0 0 14px}
.capa .trilha a{color:#B4CBD5}
.capa .trilha span{color:#5D8395; padding:0 6px}
.capa h1{color:#fff; font-size:clamp(28px,4.8vw,42px); font-weight:800; letter-spacing:-.012em; max-width:24ch}
.capa .meta{color:#8FB0BE; font-size:14px; margin:18px 0 0; letter-spacing:.02em}
.capa .resumo{color:#B4CBD5; font-size:18.5px; margin:16px 0 0; max-width:60ch}

/* artigo */
article.post{max-width:720px; margin:0 auto; padding:50px 0 20px}
article.post h2{font-size:24px; font-weight:700; margin:38px 0 12px}
article.post h3{font-size:19px; font-weight:700; margin:30px 0 10px}
article.post ul{margin:0 0 18px; padding-left:22px}
article.post li{margin-bottom:8px}
article.post li::marker{color:var(--verde)}
article.post strong{color:var(--petroleo-esc)}
.fonte{font-size:14.5px; color:var(--cinza-texto); border-top:1px solid var(--borda); padding-top:18px; margin-top:34px}

.aviso{
  background:var(--bg-alt); border-left:4px solid var(--verde); border-radius:8px;
  padding:18px 22px; margin:0 0 34px; font-size:15.5px; color:var(--cinza-texto);
}
.aviso strong{color:var(--petroleo-esc)}
.aviso p:last-child{margin-bottom:0}

/* chamada final do artigo */
.cta{background:var(--bg-alt); border-radius:12px; padding:30px 32px; margin:44px 0 0; text-align:center}
.cta h3{font-size:21px; margin-bottom:8px}
.cta p{color:var(--cinza-texto); margin-bottom:20px}

/* índice do blog */
.lista{padding:56px 0 80px}
.lista .item{border-top:1px solid var(--borda); padding:30px 0}
.lista .item:last-child{border-bottom:1px solid var(--borda)}
.lista .data{font-family:Raleway; font-weight:700; font-size:11.5px; letter-spacing:.08em;
             text-transform:uppercase; color:var(--verde); margin-bottom:7px}
.lista h2{font-size:23px; font-weight:700; margin-bottom:9px}
.lista h2 a{color:var(--petroleo-esc); text-decoration:none}
.lista h2 a:hover{color:var(--verde)}
.lista p{color:var(--cinza-texto); margin-bottom:12px; max-width:70ch}
.lista .leia{font-family:Raleway; font-weight:800; font-size:13.5px; color:var(--verde-vivo); text-decoration:none}
.lista .leia:hover{text-decoration:underline}

/* rodapé */
footer{background:var(--petroleo-esc); color:#8FA9B5; padding:44px 0 40px; font-size:14.5px}
.logo-rodape{height:42px; width:auto; display:block; margin-bottom:24px; opacity:.95}
footer p{margin:0 0 8px}
footer a{color:#B9CED7}
.legal{margin-top:22px; padding-top:20px; border-top:1px solid #24404E; font-size:13.5px; color:#6E8C99}

/* whatsapp flutuante */
.zap{position:fixed; right:18px; bottom:18px; z-index:60; background:var(--verde-vivo); color:#fff;
     text-decoration:none; font-family:Raleway; font-weight:800; font-size:15px; padding:14px 20px;
     border-radius:40px; box-shadow:0 6px 22px rgba(17,163,57,.4); display:flex; align-items:center; gap:9px}
.zap:hover{background:#0D8B30}
.zap svg{width:20px; height:20px; fill:#fff; flex-shrink:0}
@media (max-width:520px){ .zap span{display:none} .zap{padding:15px; border-radius:50%} }
@media (max-width:560px){ body{font-size:16px} }