/* SA Projetos e Engenharia — sistema visual do site
   Paleta alinhada à identidade existente do Instagram @sa.projetoeengenharia (24-jul):
   branco + azul-petróleo (o "A" do logo / cards) + cobre (o "S" do logo).
   Os nomes das variáveis foram mantidos para não tocar nos HTMLs. */
:root{
  --grafite:#264653; --grafite-2:#1D3844; --branco:#FFFFFF; --cobre:#BC6428; --cobre-escuro:#9A4F1D;
  --frio:#2A7A9B; --quente:#BC6428; --conduite:#7E8C94; --linha:#DFE5E8; --texto-2:#3C5560;
  --termo:linear-gradient(90deg,#264653 0%,#2A7A9B 45%,#BC6428 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none!important}}
body{font-family:'Public Sans',system-ui,sans-serif;background:var(--branco);color:var(--grafite);line-height:1.6;font-size:17px}
/* font-stretch removido: o alargamento sintetizado cortava glifos no Chrome mobile */
h1,h2,h3,h4{font-family:'Archivo',sans-serif;line-height:1.18;overflow:visible}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
a{color:var(--cobre)}
a:focus-visible,button:focus-visible{outline:3px solid var(--frio);outline-offset:2px}
.termo-bar{height:3px;background:var(--termo);border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--grafite);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* ---------- header ---------- */
header.site{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--linha);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 0}
.logo{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.25rem;letter-spacing:.02em;color:var(--grafite);text-decoration:none}
.logo small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.6rem;letter-spacing:.14em;color:var(--conduite);text-transform:uppercase}
.menu{display:flex;align-items:center;gap:1.4rem;list-style:none}
.menu a{color:var(--grafite);text-decoration:none;font-weight:600;font-size:.95rem}
.menu a:hover,.menu a[aria-current="page"]{color:var(--cobre)}
.menu .cta{color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--linha);border-radius:6px;padding:.45rem .7rem;font:inherit;font-weight:600;cursor:pointer;color:var(--grafite)}
@media(max-width:820px){
  .menu-btn{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--branco);border-bottom:1px solid var(--linha);flex-direction:column;align-items:flex-start;padding:1rem 24px 1.2rem;gap:1rem}
  .menu.open{display:flex}
}
.cta{display:inline-block;background:var(--cobre);color:#fff;text-decoration:none;font-weight:600;padding:.7rem 1.25rem;border-radius:6px;border:0;cursor:pointer;font-size:1rem}
.cta:hover{background:var(--cobre-escuro)}
.cta-sec{display:inline-block;color:var(--grafite);text-decoration:none;font-weight:600;padding:.7rem 1.25rem;border-radius:6px;border:1.5px solid var(--grafite)}
.cta-sec:hover{border-color:var(--cobre);color:var(--cobre)}

/* ---------- blocos comuns ---------- */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--conduite)}
.hero{padding:72px 0 56px}
.hero h1{font-weight:900;font-size:clamp(2.1rem,5.6vw,3.6rem);margin:.55rem 0 0;max-width:17ch}
.hero .sub{margin:1.3rem 0 1.8rem;max-width:54ch;font-size:1.08rem;color:var(--texto-2)}
.hero .termo-under{width:180px;margin-top:1rem}
.hero .acoes{display:flex;flex-wrap:wrap;gap:.8rem}
.trust{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--conduite)}
.page-hero{padding:56px 0 40px}
.page-hero h1{font-weight:900;font-size:clamp(1.9rem,4.6vw,2.9rem);margin:.55rem 0 0;max-width:22ch}
.page-hero .sub{margin:1.1rem 0 0;max-width:58ch;font-size:1.05rem;color:var(--texto-2)}
.crumbs{padding:18px 0 0;font-size:.82rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";color:var(--conduite);margin-right:.4rem}
.crumbs a{color:var(--conduite);text-decoration:none}
.crumbs a:hover{color:var(--cobre)}
.crumbs [aria-current]{color:var(--grafite);font-weight:600}

section.sec{padding:64px 0}
section.sec-dark{background:var(--grafite);color:var(--branco);padding:60px 0}
section.sec-branca{background:#fff;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:60px 0}
.sec h2,.sec-dark h2,.sec-branca h2{font-size:1.7rem;max-width:30ch}
.sec .lead,.sec-dark .lead,.sec-branca .lead{margin-top:.9rem;max-width:62ch;color:inherit}
.sec-dark .lead{color:#C5D2D8}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem;margin-top:1.8rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;margin-top:1.8rem}
.card{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:1.4rem;display:flex;flex-direction:column}
.card .tag{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--conduite)}
.card h3{font-size:1.15rem;margin:.4rem 0 .6rem}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--cobre)}
.card p{font-size:.95rem;flex:1;color:var(--texto-2)}
.card .preco{margin:1rem 0 .2rem;font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--grafite)}
.card .preco small{display:block;font-weight:400;color:var(--conduite);font-size:.75rem}
.card .mais{font-weight:600;text-decoration:none;margin-top:.6rem}
.destaque{border-top:4px solid;border-image:var(--termo) 1 0 0 0}

.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;margin-top:1.6rem;counter-reset:passo}
.passo{counter-increment:passo}
.passo::before{content:counter(passo,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;color:var(--cobre);font-weight:600;font-size:.85rem}
.passo h3{font-size:1.05rem;margin:.3rem 0 .4rem}
.passo p{font-size:.93rem;color:var(--texto-2)}
.sec-dark .passo p{color:#C5D2D8}

ul.riscos{list-style:none;margin-top:1.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
ul.riscos li{border-left:3px solid;border-image:var(--termo) 1;padding:.35rem 0 .35rem .9rem;font-size:.97rem}
.sec-dark .note{margin-top:1.4rem;color:#C5D2D8;font-size:.92rem;max-width:60ch}

ul.checks{list-style:none;margin-top:1.2rem;display:grid;gap:.55rem;max-width:62ch}
ul.checks li{padding-left:1.5rem;position:relative;font-size:.98rem}
ul.checks li::before{content:"";position:absolute;left:0;top:.5em;width:.72em;height:.72em;border-radius:2px;background:var(--termo)}

/* entregável / caixa de evidência */
.evid{background:#fff;border:1px solid var(--linha);border-left:4px solid;border-image:var(--termo) 1;border-radius:0 10px 10px 0;padding:1.2rem 1.4rem;margin-top:1.6rem;max-width:640px}
.evid h3{font-size:1rem}
.evid ul{margin:.6rem 0 0 1.1rem;font-size:.93rem;color:var(--texto-2)}
.sec-dark .evid{background:var(--grafite-2);border-color:transparent;color:var(--branco)}
.sec-dark .evid ul{color:#C5D2D8}

/* FAQ */
.faq{margin-top:1.6rem;max-width:760px}
.faq details{border-bottom:1px solid var(--linha);padding:.9rem 0}
.faq summary{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--cobre);font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.6rem;font-size:.95rem;color:var(--texto-2);max-width:64ch}

/* quem assina */
.eng-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:820px){.eng-grid{grid-template-columns:5fr 4fr}}
.foto-ph{background:var(--grafite);border-radius:10px;min-height:260px;display:flex;align-items:center;justify-content:center;color:var(--conduite);font-family:'IBM Plex Mono',monospace;font-size:.8rem;text-align:center;padding:1rem}
blockquote.fala{margin-top:1.2rem;border-left:3px solid var(--cobre);padding-left:1rem;font-style:italic;color:var(--texto-2)}
.sec-dark blockquote.fala{color:#DCE6EA}

/* CTA final */
.cta-final{background:var(--grafite);color:var(--branco);padding:64px 0}
.cta-final h2{font-size:1.8rem;max-width:24ch}
.cta-final p{margin-top:.9rem;max-width:56ch;color:#C5D2D8}
.cta-final .acoes{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem}
.cta-final .cta-sec{color:var(--branco);border-color:var(--conduite)}
.cta-final .cta-sec:hover{border-color:#fff;color:#fff}

/* form */
form.lead-form{display:grid;gap:.9rem;max-width:520px;margin-top:1.5rem}
label{font-weight:600;font-size:.92rem}
input,select,textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--conduite);border-radius:6px;font:inherit;background:#fff;color:var(--grafite)}
textarea{min-height:96px;resize:vertical}
.alt{font-size:.9rem;color:var(--conduite);margin-top:.7rem}

/* tabela sóbria (áreas atendidas etc.) */
table.tec{border-collapse:collapse;width:100%;margin-top:1.4rem;font-size:.95rem}
table.tec th,table.tec td{border:1px solid var(--linha);padding:.6rem .8rem;text-align:left;vertical-align:top}
table.tec th{background:#fff;font-family:'Archivo',sans-serif;font-size:.9rem}

/* footer */
footer.site{background:var(--grafite);color:#C5D2D8;padding:44px 0 30px;font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem}
footer.site h4{color:#fff;font-size:.95rem;margin-bottom:.6rem}
footer.site ul{list-style:none;display:grid;gap:.35rem}
footer.site a{color:#C5D2D8;text-decoration:none}
footer.site a:hover{color:#fff}
.foot-base{border-top:1px solid #3A5A6A;margin-top:1.8rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.8rem}

/* animação de entrada */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.reveal.on{opacity:1;transform:none}

/* ---------- blindagem mobile (padrão validado nos sites Luminus) ---------- */
html,body{overflow-x:hidden;max-width:100%}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,p,li,blockquote{overflow-wrap:break-word}
@media(max-width:640px){
  /* hyphens:auto removido — hifenização no meio do título lia como "letra cortada" */
  h1{hyphens:manual}
  .hero{padding:52px 0 44px}
  section.sec,section.sec-dark,section.sec-branca,.cta-final{padding:48px 0}
  .acoes .cta,.acoes .cta-sec{flex:1 1 auto;text-align:center}
  .hero .acoes,.cta-final .acoes{display:flex;flex-wrap:wrap;gap:.8rem}
  table.tec{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .foot-base{flex-direction:column;gap:.5rem}
  .crumbs{font-size:.78rem}
}