/* ACSY Engenharia, versão 6: o caderno do engenheiro.
   Tema único e claro de propósito: o mundo é papel quadriculado, lido de dia no celular. */
:root{
  color-scheme: light;
  --papel:#F4F1EA; --papel-2:#FBFAF6; --branco:#FFFFFF;
  --grade:rgba(31,59,87,.075);
  --marinho:#1F3B57; --marinho-escuro:#13263A; --areia:#E0D8C8; --areia-forte:#D3C7AE;
  --tinta:#16202A; --tinta-2:#4A5560; --linha:#D9D2C3; --cad:#1B1F24;
  --zap:#00875C; --zap-escuro:#006E4B;
  --f-titulo:"Lexend","Segoe UI",system-ui,sans-serif;
  --f-texto:"Calibri","Carlito","Candara","Segoe UI",system-ui,sans-serif;
  --f-mao:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --largura:1180px;
  --sombra-foto:0 14px 30px -12px rgba(22,32,42,.45),0 2px 6px rgba(22,32,42,.12);
  --sai:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;scrollbar-color:var(--marinho) var(--papel)}
body{margin:0;background-color:var(--papel);color:var(--tinta);font:400 1.125rem/1.55 var(--f-texto);
  background-image:linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);
  background-size:24px 24px;background-attachment:local}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--papel);z-index:30}
::selection{background:var(--areia-forte);color:var(--marinho-escuro)}
img{max-width:100%;height:auto;display:block}
a{color:var(--marinho);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--marinho);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-titulo);color:var(--marinho);text-wrap:balance;margin:0}
h1{font-weight:700;font-size:clamp(2.3rem,1.4rem + 3.6vw,4.1rem);line-height:1.04;letter-spacing:-.025em}
h2{font-weight:700;font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem);line-height:1.1;letter-spacing:-.02em}
h3{font-weight:500;font-size:1.25rem;line-height:1.3}
p{margin:0}
mark{background:linear-gradient(transparent 58%,var(--areia-forte) 58%,var(--areia-forte) 92%,transparent 92%);color:inherit;padding:0 .08em}
.lead{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);line-height:1.5;color:var(--tinta-2);max-width:36em}
.miolo{max-width:var(--largura);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.miolo{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

/* Botões */
.botao{display:inline-flex;align-items:center;gap:.55em;font:500 1rem/1 var(--f-titulo);text-decoration:none;
  padding:.85em 1.2em;border-radius:10px;border:2px solid var(--marinho);color:var(--marinho);background:var(--branco);
  transition:background-color .2s,transform .2s var(--sai),box-shadow .2s;cursor:pointer}
.botao svg{width:1.25em;height:1.25em;flex:none}
.botao.zap{background:var(--zap);border-color:var(--zap);color:#fff}
.botao:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(22,32,42,.45)}
.botao.zap:hover{background:var(--zap-escuro);border-color:var(--zap-escuro)}
.botao:active{transform:translateY(0);box-shadow:none}

/* Topo e abas: etiquetas de pasta */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--papel);border-bottom:2px solid var(--marinho)}
.linha-marca{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px 10px}
.marca img{height:54px;width:auto}
@media (min-width:700px){.marca img{height:72px}}
.botao.curto{padding:.65em 1em;font-size:.95rem}
.abas .miolo{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:4px}
.abas .miolo::-webkit-scrollbar{display:none}
.abas a{flex:none;font:500 .98rem/1 var(--f-titulo);color:var(--marinho);text-decoration:none;white-space:nowrap;
  padding:.8em 1.05em .75em;border:2px solid var(--marinho);border-bottom:0;border-radius:9px 9px 0 0;background:var(--papel-2);
  margin-bottom:-2px;transition:background-color .2s,color .2s}
.abas a:hover{background:var(--areia)}
.abas a[aria-current="page"]{background:var(--marinho);color:#fff}
/* Abas */
.js .aba{display:none}
.js .aba.ativa{display:block}
.aba{padding-block:clamp(40px,6vw,80px) clamp(64px,8vw,110px)}
.cab{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,52px)}

/* Início */
.abertura{display:grid;gap:clamp(40px,5vw,64px);align-items:center}
.abertura .texto{display:grid;gap:24px}
.canais{display:grid;gap:12px;max-width:470px}
.canal{display:flex;align-items:center;gap:14px;padding:16px 20px;border:2px solid var(--marinho);border-radius:12px;background:var(--branco);
  color:var(--marinho);text-decoration:none;transition:transform .2s var(--sai),box-shadow .2s,background-color .2s}
.canal svg{width:24px;height:24px;flex:none}
.canal b{font:500 1.1rem/1.2 var(--f-titulo)}
.canal span{margin-left:auto;font-size:1rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.canal.zap{background:var(--zap);border-color:var(--zap);color:#fff}
.canal.zap span{color:#fff}
.canal:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(22,32,42,.5)}
.canal.zap:hover{background:var(--zap-escuro);border-color:var(--zap-escuro)}

.mesa{position:relative;margin:0;padding-top:42px;container-type:inline-size}
.mesa .cad{width:100%;background:var(--branco);border:1px solid var(--linha);padding:10px;box-shadow:0 3px 0 var(--linha)}
.anota{font:600 clamp(1.2rem,4.4cqw,1.7rem)/1 var(--f-mao);color:var(--marinho);position:absolute}
.a-desenho{left:4px;top:6px;transform:rotate(-3deg)}
.a-pronto{left:1cqw;top:calc(42px + 57cqw);transform:rotate(-4deg)}
.mesa .seta{position:absolute;left:5cqw;top:calc(42px + 63cqw);width:26cqw;height:9cqw;color:var(--marinho)}
.colada{width:66%;margin:-18% 0 0 auto;border:10px solid var(--branco);border-bottom-width:30px;box-shadow:var(--sombra-foto);
  transform:rotate(2.5deg);position:relative;animation:assentar 1.1s var(--sai) .25s both}
.mesa figcaption{margin-top:14px;font-size:.98rem;color:var(--tinta-2);text-align:right}
@keyframes assentar{from{transform:translate(40px,-34px) rotate(9deg);box-shadow:0 40px 60px -20px rgba(22,32,42,.35)}to{transform:rotate(2.5deg);box-shadow:var(--sombra-foto)}}
@media (min-width:980px){.abertura{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}

/* Serviços */
.situacoes{display:grid;gap:clamp(28px,4vw,48px)}
.situacao{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:3px solid var(--marinho)}
.situacao h3{font-size:1.45rem;font-weight:700}
.quem{font:600 1.45rem/1.3 var(--f-mao);color:var(--tinta-2)}
.checklist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:34px;line-height:1.45}
.checklist li::before{content:"";position:absolute;left:0;top:.05em;width:24px;height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 13.5c2 1.2 3.6 3 5 5.2C11 12.6 15 7.6 20.8 3.6' fill='none' stroke='%2300875C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.checklist b{font-weight:700;color:var(--marinho)}
@media (min-width:900px){.situacoes{grid-template-columns:repeat(3,minmax(0,1fr))}}

.nota-grande{position:relative;margin:clamp(48px,6vw,80px) auto 0;max-width:820px;background:var(--areia);padding:clamp(28px,4vw,44px);
  display:grid;gap:16px;justify-items:start;box-shadow:var(--sombra-foto);transform:rotate(-.6deg)}
.nota-grande::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;margin-left:-60px;background:rgba(255,255,255,.55);
  transform:rotate(-3deg);box-shadow:0 1px 2px rgba(22,32,42,.1)}
.nota-grande h3{font-size:1.6rem;font-weight:700}
.nota-grande p{font-size:1.2rem;line-height:1.55;max-width:38em}

/* Projetos */
.projeto{display:grid;gap:22px;padding-block:clamp(36px,5vw,56px);border-top:2px dashed var(--areia-forte)}
.projeto:first-of-type{border-top:0;padding-top:0}
.ficha{display:grid;gap:8px;max-width:40em}
.onde{font:600 1.4rem/1.3 var(--f-mao);color:var(--tinta-2)}
.ficha h3{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);font-weight:700}
.dupla,.trio{display:grid;gap:clamp(28px,3vw,40px);align-items:start}
.projeto figure{position:relative;margin:0}
.projeto figcaption{position:absolute;top:-1.55em;left:6px;font:600 1.5rem/1 var(--f-mao);color:var(--marinho);transform:rotate(-2deg)}
.desenho{background:var(--branco);border:1px solid var(--linha);padding:10px;box-shadow:0 2px 0 var(--linha)}
.desenho img{width:100%;height:auto;max-height:clamp(260px,36vw,440px);object-fit:contain}
.desenho.escuro{background:var(--cad);border-color:var(--cad)}
.desenho.largo img{height:auto}
.pronto{background:var(--branco);padding:8px 8px 22px;box-shadow:var(--sombra-foto);transform:rotate(1.2deg)}
.pronto:nth-child(odd){transform:rotate(-1deg)}
.pronto::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(224,216,200,.85);transform:rotate(-4deg);z-index:1}
.pronto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trio .pronto img{aspect-ratio:3/4}
.dupla+.tiras,.desenho.largo+.trio,.pronto.largo+.trio{margin-top:14px}
.desenho.largo+.pronto.largo{margin-top:28px}
.pronto.largo{transform:rotate(-.6deg)}
.pronto.largo img{aspect-ratio:auto}
.tiras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tiras img{aspect-ratio:3/4;object-fit:cover;border:6px solid var(--branco);box-shadow:0 6px 14px -8px rgba(22,32,42,.5)}
.tiras.deitadas{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiras.deitadas img{aspect-ratio:16/10}
@media (min-width:900px){
  .projeto{grid-template-columns:280px minmax(0,1fr);column-gap:48px}
  .projeto>.ficha{grid-row:1/span 4;align-self:start;position:sticky;top:140px}
  .projeto>:not(.ficha){grid-column:2}
  .dupla{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){.projeto .dupla,.projeto .trio{margin-top:28px;row-gap:56px}}
@media (max-width:560px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}.trio .pronto:first-child{grid-column:1/-1}.trio .pronto:first-child img{aspect-ratio:4/3}}

/* Clientes */
.grade-clientes{display:grid;gap:clamp(32px,4vw,48px)}
.cliente{display:grid;gap:12px;align-content:start}
.cliente .logo{background:var(--branco);height:150px;display:grid;place-items:center;padding:24px 32px;box-shadow:var(--sombra-foto);position:relative;margin-bottom:8px}
.cliente .logo::before{content:"";position:absolute;top:-10px;left:50%;width:76px;height:20px;margin-left:-38px;background:rgba(224,216,200,.85);transform:rotate(3deg)}
.cliente .logo img{max-height:70px;width:auto;object-fit:contain}
.cliente h3{font-weight:700}
@media (min-width:900px){.grade-clientes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Engenheiro */
.perfil{display:grid;gap:clamp(36px,5vw,64px);align-items:start}
.cartao{background:var(--branco);padding:30px 28px 28px 44px;display:grid;gap:18px;justify-items:start;box-shadow:var(--sombra-foto);
  background-image:linear-gradient(90deg,transparent 30px,rgba(176,36,24,.35) 30px,rgba(176,36,24,.35) 32px,transparent 32px),
    repeating-linear-gradient(transparent 0 31px,rgba(31,59,87,.14) 31px 32px);transform:rotate(-1deg)}
.retrato{width:100%;aspect-ratio:4/5;object-fit:cover}
.cartao .nome{font:700 clamp(1.7rem,1.3rem + 1.2vw,2.2rem)/1.15 var(--f-titulo);color:var(--marinho);text-wrap:balance}
.cartao dl{margin:0;display:grid;gap:10px;width:100%}
.cartao dt{font:600 1.3rem/1 var(--f-mao);color:var(--tinta-2)}
.cartao dd{margin:2px 0 0;font-weight:700;color:var(--marinho);font-variant-numeric:tabular-nums}
/* faixa marinho: o responsável técnico */
#engenheiro.aba{padding-top:0}
.faixa-rt{background:var(--marinho);color:#E8EDF2;padding-block:clamp(48px,6vw,88px);margin-bottom:clamp(48px,6vw,80px)}
.faixa-rt h2{color:#fff;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem)}
.perfil .texto{display:grid;gap:20px;max-width:40em}
.perfil .texto p{font-size:1.15rem;line-height:1.6;color:#D5DEE7}
.perfil .lead{color:#fff!important;font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem)!important;line-height:1.45!important}
.subtitulo{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);font-weight:700;margin-bottom:24px}
.ver-projetos+.subtitulo{margin-top:clamp(56px,6vw,80px)}
.imprensa{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.imprensa a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:16px 20px;background:var(--branco);
  border:1px solid var(--linha);border-radius:10px;text-decoration:none;color:var(--tinta);transition:transform .2s var(--sai),box-shadow .2s,border-color .2s}
.imprensa .fonte{font:600 1.25rem/1.2 var(--f-mao);color:var(--tinta-2)}
.imprensa .titulo{grid-column:1;font:500 1.05rem/1.35 var(--f-titulo);color:var(--marinho)}
.imprensa .tipo{grid-column:2;grid-row:1/span 2;font:500 .85rem/1 var(--f-titulo);color:var(--marinho);border:1.5px solid var(--marinho);border-radius:999px;padding:.45em .8em}
.imprensa a:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(22,32,42,.5);border-color:var(--marinho)}
@media (min-width:900px){.imprensa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.perfil{grid-template-columns:360px minmax(0,1fr)}}

/* Contato */
.contato{display:grid;gap:clamp(40px,5vw,64px);align-items:start}
.contato>div{display:grid;gap:20px}
.form{background:var(--branco);padding:clamp(24px,3vw,36px);display:grid;gap:18px;box-shadow:var(--sombra-foto)}
.form h3{font-weight:700}
.form label{display:grid;gap:6px;font-weight:700;color:var(--marinho)}
.form select,.form input,.form textarea{font:400 1.05rem/1.4 var(--f-texto);color:var(--tinta);background:var(--papel-2);border:2px solid var(--linha);
  border-radius:8px;padding:.7em .8em;width:100%;accent-color:var(--marinho);caret-color:var(--marinho)}
.form select:focus,.form input:focus,.form textarea:focus{outline:none;border-color:var(--marinho);background:var(--branco)}
.form ::placeholder{color:#6B747D}
.form .botao{justify-self:start}
@media (min-width:900px){.contato{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Rodapé */
.rodape{background:var(--marinho);color:#DCE3EA;padding-block:48px calc(48px + env(safe-area-inset-bottom,0px));font-size:1rem;line-height:1.6}
.rodape .miolo{display:grid;gap:28px}
.rodape img{height:60px;width:auto;filter:brightness(0) invert(1)}
.rodape b{display:block;font:500 .9rem/1.6 var(--f-titulo);color:var(--areia);margin-bottom:4px}
.rodape a{color:#fff}
.rodape .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid rgba(224,216,200,.3);color:#C7D1DB;font-size:.95rem}
@media (min-width:900px){.rodape .miolo{grid-template-columns:1.2fr 1fr 1fr 1fr}.rodape .base{grid-column:1/-1}}

/* WhatsApp sempre à mão */
.zap-flutuante{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:25;
  width:60px;height:60px;border-radius:50%;background:var(--zap);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 24px -8px rgba(0,60,40,.6);transition:transform .2s var(--sai),background-color .2s}
.zap-flutuante svg{width:32px;height:32px}
.zap-flutuante:hover{transform:scale(1.06);background:var(--zap-escuro)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Celular estreito: o número desce para baixo do nome do canal */
@media (max-width:520px){
  .canal{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 18px}
  .canal svg{grid-row:1/span 2}
  .canal span{margin-left:0;font-size:.98rem}
}

/* O engenheiro: trabalhos da ACSY e trajetória recolhida */
.trabalhos{list-style:none;margin:0;padding:0;border-top:2px solid var(--marinho)}
.trabalhos li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 0;border-bottom:1px dashed var(--areia-forte)}
.trabalhos b{font:700 1.1rem/1.3 var(--f-titulo);color:var(--marinho)}
.trabalhos span{font:600 1.3rem/1.2 var(--f-mao);color:var(--tinta-2)}
.trabalhos p{color:var(--tinta-2)}
@media (min-width:900px){.trabalhos li{grid-template-columns:280px 200px minmax(0,1fr);align-items:baseline;gap:20px}}
.ver-projetos{margin-top:22px}
.portfolio{margin-top:clamp(40px,5vw,64px);background:var(--branco);border:2px solid var(--marinho);border-radius:12px}
.portfolio summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;font:700 1.15rem/1.3 var(--f-titulo);color:var(--marinho);border-radius:10px}
.portfolio summary::-webkit-details-marker{display:none}
.portfolio summary:hover{background:var(--papel-2)}
.portfolio .mais{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--marinho)}
.portfolio .mais::before,.portfolio .mais::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;background:var(--branco);border-radius:2px;transition:transform .25s var(--sai)}
.portfolio .mais::after{transform:rotate(90deg)}
.portfolio[open] .mais::after{transform:rotate(0)}
.portfolio-corpo{display:grid;gap:14px;justify-items:start;padding:4px 22px 24px 66px;max-width:52em}
.portfolio-corpo h4{font:700 1.05rem/1.3 var(--f-titulo);color:var(--marinho);margin:6px 0 -4px}
.portfolio-corpo ul{margin:0 !important;padding-left:1.1em;display:grid;gap:6px}
.portfolio-corpo .botao svg{width:20px;height:20px}
@media (max-width:560px){.portfolio-corpo{padding-left:22px}}