/* Esparta Engenharia, rascunho do site */

/* Poppins hospedada no proprio site, subconjunto latin, sem chamada a terceiros */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fontes/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fontes/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fontes/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fontes/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(fontes/poppins-700.woff2) format("woff2")}

:root{
  --indigo:#1C1565;
  --indigo-2:#140F4D;
  --laranja:#FD5100;
  --laranja-2:#E04800;
  --branco:#FFFFFF;
  --preto:#000000;
  --texto:#16132F;
  --suave:#585670;
  --linha:#E3E2EC;
  --cinza:#F5F5F8;
  --cab:72px;
  --gut:20px;
  --sec:clamp(72px, 10vw, 136px);
  --ch:14px;
  /* movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --d1:300ms;
  --d2:500ms;
  --d3:700ms;
}
@media (min-width:701px){:root{--gut:40px}}
@media (max-width:700px){:root{--cab:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cab) + 24px)}
body{margin:0;background:var(--branco);color:var(--texto);font-family:Poppins,system-ui,sans-serif;font-size:1rem;line-height:1.7;font-weight:400;padding-top:var(--cab);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,dl,dd{margin:0}
p+p{margin-top:1em}

.cx{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:1281px){.cx{max-width:calc(1200px + 2 * var(--gut))}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--branco);color:var(--indigo);padding:12px 16px}
.pular:focus{left:16px;top:8px}

/* tipografia */
.h1{font-size:clamp(2rem, 1.2rem + 3.6vw, 3.75rem);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--indigo);max-width:18ch}
.h2{font-size:clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);line-height:1.15;font-weight:600;letter-spacing:-.015em;color:var(--indigo);max-width:24ch}
.h3{font-size:1.125rem;line-height:1.35;font-weight:600;color:var(--indigo)}
.h3-g{font-size:clamp(1.25rem, 1rem + .8vw, 1.5rem)}
.lead{font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);line-height:1.65;color:var(--suave);max-width:46ch;margin-top:20px}
.sobre{font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:20px}
.sobre-cl{color:rgba(255,255,255,.72)}
.falta{color:var(--laranja);font-weight:500}

/* chanfro, igual ao E da marca */
.chanfro{clip-path:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,var(--ch) 100%,0 calc(100% - var(--ch)))}

/* foco: aparece na hora, sem animar */
a:focus-visible,button:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.cab a:focus-visible,.cab button:focus-visible,.faixa a:focus-visible,.rod a:focus-visible,.hero a:focus-visible{outline-color:var(--laranja)}

/* botoes: texto grande em negrito para o branco sobre o laranja passar no AA.
   O chanfro fica num pseudo elemento, assim o contorno de foco nao e cortado. */
.btn{--c:10px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;font-weight:700;font-size:1.1875rem;line-height:1.2;text-decoration:none;text-align:center;color:var(--branco);background:none;transition:transform var(--d1) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--laranja);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:background-color var(--d1) var(--ease)}
.btn:hover::before{background:var(--laranja-2)}
.btn:active{transform:translateY(1px)}
.btn:active::before{background:var(--laranja-2)}
.btn:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;color:var(--branco);text-decoration:none}
.hero .btn:focus-visible,.faixa .btn:focus-visible,.cab .btn:focus-visible{outline-color:var(--branco)}

/* link com seta */
.lnk{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9375rem;color:var(--indigo);text-decoration:none;padding:6px 0;border-bottom:2px solid currentColor;transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.lnk::after{content:"\2192";font-weight:400;transition:transform var(--d1) var(--ease)}
.lnk:hover::after,.lnk:focus-visible::after{transform:translateX(4px)}
.lnk:hover{color:var(--laranja)}
.lnk-cl{color:var(--branco)}
.lnk-cl:hover{color:var(--branco);border-color:var(--laranja)}

/* cabecalho */
.cab{position:fixed;inset:0 0 auto 0;height:var(--cab);background:var(--indigo);z-index:50}
.cab-in{height:100%;max-width:calc(1200px + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:32px}
.cab-marca{flex:none;display:block}
.cab-marca img{height:26px;width:auto}
.cab-nav{margin-left:auto}
.cab-nav ul{display:flex;gap:clamp(20px, 2.2vw, 32px)}
.cab-nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.9375rem;font-weight:500;padding:8px 0;border-bottom:2px solid transparent}
.cab-nav a:hover{color:var(--branco)}
.cab-nav a[aria-current="page"]{color:var(--branco);border-color:var(--laranja)}
.cab-nav-btn{display:none}
.cab-btn{flex:none;min-height:44px;padding:8px 20px;font-size:1.1875rem}
.cab-btn .curto{display:none}
.cab-abre{display:none}

@media (min-width:1001px){
  /* sublinhado que cresce da esquerda */
  .cab-nav a{border-bottom:0;padding:8px 0 10px;background:linear-gradient(var(--laranja),var(--laranja)) 0 100%/0 2px no-repeat;transition:background-size var(--d1) var(--ease),color var(--d1) var(--ease)}
  .cab-nav a:hover,.cab-nav a[aria-current="page"]{background-size:100% 2px}
}

@media (max-width:1000px){
  .cab-in{gap:12px}
  .cab-marca img{height:22px}
  .cab-btn{margin-left:auto;min-height:44px;padding:8px 16px}
  .cab-btn .longo{display:none}
  .cab-btn .curto{display:inline}
  .cab-abre{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;color:var(--branco)}
  .linhas,.linhas::before,.linhas::after{display:block;width:22px;height:2px;background:currentColor;transition:transform var(--d1) var(--ease),background-color var(--d1) var(--ease)}
  .linhas{position:relative}
  .linhas::before,.linhas::after{content:"";position:absolute;left:0}
  .linhas::before{top:-7px}
  .linhas::after{top:7px}
  .cab-abre[aria-expanded="true"] .linhas{background:transparent}
  .cab-abre[aria-expanded="true"] .linhas::before{transform:translateY(7px) rotate(45deg)}
  .cab-abre[aria-expanded="true"] .linhas::after{transform:translateY(-7px) rotate(-45deg)}
  /* menu suave: visibility tira do Tab quando fechado */
  .cab-nav{position:fixed;left:0;right:0;top:var(--cab);bottom:0;margin:0;background:var(--indigo);padding:24px var(--gut) 40px;display:flex;flex-direction:column;overflow-y:auto;border-top:1px solid rgba(255,255,255,.12);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease),visibility 0s linear var(--d1)}
  .cab-nav.aberto{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .cab-nav ul{flex-direction:column;gap:0}
  .cab-nav li{border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(8px);transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease)}
  .cab-nav.aberto li{opacity:1;transform:none}
  .cab-nav.aberto li:nth-child(2){transition-delay:40ms}
  .cab-nav.aberto li:nth-child(3){transition-delay:80ms}
  .cab-nav.aberto li:nth-child(4){transition-delay:120ms}
  .cab-nav.aberto li:nth-child(5){transition-delay:160ms}
  .cab-nav a{display:block;padding:18px 0;font-size:1.25rem;border:0;color:var(--branco)}
  .cab-nav a[aria-current="page"]{color:var(--laranja)}
  /* .cab-nav a tirava o negrito do botao e o branco sobre laranja caia abaixo do AA */
  .cab-nav .cab-nav-btn{display:flex;margin-top:32px;padding:14px 28px;font-weight:700;font-size:1.1875rem;color:var(--branco)}
  body.menu-aberto{overflow:hidden}
}
@media (max-width:360px){.cab-btn{padding:8px 12px}}

/* secoes */
.sec{padding-block:var(--sec)}
.sec-0{padding-top:0}
.sec-cinza{background:var(--cinza)}
.sec-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(40px, 5vw, 64px)}
.sec-intro{margin-bottom:clamp(40px, 5vw, 72px)}
.faixa{background:var(--indigo);color:var(--branco)}
.faixa .h2,.faixa .h3{color:var(--branco)}
.faixa .lead,.faixa p{color:rgba(255,255,255,.76)}

/* hero */
.hero{--sobra:clamp(140px, 22vw, 280px);background:linear-gradient(var(--indigo) 0, var(--indigo) calc(100% - var(--sobra)), var(--branco) calc(100% - var(--sobra)));padding-top:clamp(40px, 5vw, 72px);color:var(--branco)}
.hero .h1{color:var(--branco);max-width:20ch}
.hero-pe{display:grid;gap:32px;margin-top:clamp(24px, 3vw, 40px)}
.hero .lead{color:rgba(255,255,255,.78);margin:0;max-width:52ch}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.hero-foto{display:block;overflow:hidden;margin-top:clamp(32px, 4vw, 56px);--ch:22px}
.hero-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:1001px){
  .hero-pe{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px 80px}
}
@media (max-width:700px){
  .hero{--sobra:150px}
  .hero-foto img{aspect-ratio:16/9}
}

/* grades e cartoes */
.grade{display:grid;gap:56px 32px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 40px}
@media (max-width:1000px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.g3,.g2{grid-template-columns:minmax(0,1fr);gap:48px}}
.card a{display:block;text-decoration:none;color:inherit}
.card-foto{margin-bottom:24px;overflow:hidden;background:var(--cinza)}
.card-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--d3) var(--ease)}
.card a:hover img,.card a:focus-visible img{transform:scale(1.035)}
.card .h3{transition:color var(--d1) var(--ease)}
.card a:hover .h3,.card a:focus-visible .h3{color:var(--laranja)}
.card p{color:var(--suave);margin-top:8px}
.cliente{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.card .cliente{margin-top:0}

/* servicos do inicio no celular: lista compacta, foto quadrada a esquerda */
@media (max-width:700px){
  .g3{gap:0;border-top:1px solid var(--linha)}
  .g3 .card a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linha)}
  .g3 .card-foto{grid-row:1/span 2;margin:0;--ch:8px}
  .g3 .card-foto img{aspect-ratio:1}
  .g3 .card .h3{align-self:end}
  .g3 .card p{align-self:start;margin:0;font-size:.9375rem;line-height:1.5}
}

/* clientes */
.clientes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px, 5vw, 72px);border-top:1px solid rgba(255,255,255,.16)}
.clientes li{padding:24px 16px 24px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:clamp(1rem, .9rem + .4vw, 1.25rem);font-weight:500;color:var(--branco);line-height:1.35}
@media (max-width:1000px){.clientes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.clientes{grid-template-columns:repeat(2,minmax(0,1fr))}.clientes li{padding:18px 12px 18px 0}}

/* etapas */
.etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px}
.etapas li{border-top:1px solid var(--linha);padding-top:28px}
.etapas .num{display:block;font-size:clamp(2.5rem, 2rem + 2vw, 3.5rem);font-weight:300;line-height:1;color:var(--laranja);margin-bottom:24px;letter-spacing:-.02em}
.etapas p{color:var(--suave);margin-top:10px}
@media (max-width:1000px){.etapas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.etapas{grid-template-columns:minmax(0,1fr);gap:40px}}

/* chamada final */
.chamada{padding-block:var(--sec) clamp(48px, 6vw, 80px);background:var(--cinza)}
.sec-cinza+.chamada{background:var(--branco)}
.chamada-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 80px;align-items:end}
.chamada .h2{max-width:20ch}
.chamada .lead{margin:0 0 32px}
.ass{grid-column:1/-1;margin-top:clamp(16px, 3vw, 40px);padding-top:24px;border-top:1px solid var(--linha);font-size:.875rem;font-weight:500;color:var(--indigo)}
@media (max-width:900px){.chamada-in{grid-template-columns:minmax(0,1fr);gap:24px}}

/* topo das paginas internas */
.pg-topo{padding-block:clamp(64px, 9vw, 128px) clamp(56px, 7vw, 104px)}
.pg-topo .lead{max-width:52ch}
.indice{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:32px}
.indice a{display:inline-block;padding-block:10px;font-size:.9375rem;font-weight:500;color:var(--indigo);text-decoration:none;border-bottom:1px solid var(--linha);transition:border-color var(--d1) var(--ease)}
.indice a:hover{border-color:var(--laranja)}
/* 3 colunas so com folga. Em 768 a terceira coluna estourava a tela */
@media (min-width:701px){.indice{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 40px}.indice li{justify-self:start}}
@media (min-width:1001px){.indice{grid-template-columns:repeat(3,max-content)}}

/* duas colunas */
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}
.duas-txt p{color:var(--suave)}
.duas-txt .h2{margin-bottom:28px}
.duas-txt .h3-g{margin-bottom:16px}
.duas-txt .lnk{margin-top:28px}
.duas-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duas.inv .duas-foto{order:-1}
.duas-topo{align-items:start;margin-top:clamp(40px, 5vw, 72px)}
.foto-larga{--ch:22px;overflow:hidden}
.foto-larga img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feicon{margin-top:clamp(72px, 9vw, 120px)}
.feicon figcaption{font-size:.8125rem;color:var(--suave);margin-top:12px}
@media (max-width:900px){
  .duas{grid-template-columns:minmax(0,1fr);gap:32px}
  .duas.inv .duas-foto{order:0}
  .contato-topo .duas-foto{order:2}
}

/* pilares */
.pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:clamp(48px, 6vw, 80px)}
.pilares li{border-top:2px solid var(--laranja);padding-top:24px}
.pilares p{margin-top:12px}
@media (max-width:900px){.pilares{grid-template-columns:minmax(0,1fr)}}

/* servicos */
.servs{display:grid;gap:clamp(80px, 10vw, 144px)}
.serv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:start}
.serv.inv .serv-foto{order:2}
.serv-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:901px){.serv-foto{position:sticky;top:calc(var(--cab) + 40px)}}
.serv-txt .h2{margin-bottom:20px}
.serv-txt>p{color:var(--suave)}
.itens{margin-top:32px;border-top:1px solid var(--linha)}
.itens li{padding:14px 0 14px 20px;border-bottom:1px solid var(--linha);position:relative;font-size:.9375rem;line-height:1.5}
.itens li::before{content:"";position:absolute;left:0;top:calc(14px + .75em - 3px);width:6px;height:6px;background:var(--indigo)}
.rel{margin-top:32px}
.rel-tit{font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin-bottom:12px}
.rel li+li{margin-top:14px}
.rel a{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;font-weight:500;color:var(--indigo);border-bottom:1px solid var(--linha);padding-bottom:2px;transition:border-color var(--d1) var(--ease)}
.rel a:hover{border-color:var(--laranja)}
.rel .cliente{margin:0;font-size:.75rem;color:var(--suave)}
@media (max-width:900px){
  .serv{grid-template-columns:minmax(0,1fr);gap:32px}
  .serv.inv .serv-foto{order:0}
}

/* obras */
.caso{display:flex;flex-direction:column}
.caso .card-foto{margin-bottom:24px}
.caso-txt{display:flex;flex-direction:column;flex:1}
.caso-txt>p:not(.cliente){color:var(--suave);margin-top:12px;margin-bottom:20px}
.caso .lnk{margin-top:auto;align-self:flex-start}
.meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px;font-size:.875rem;color:var(--suave)}
.meta li+li{position:relative}
.meta li+li::before{content:"";position:absolute;left:-12px;top:50%;width:4px;height:4px;background:var(--linha);transform:translateY(-50%)}
/* primeiro caso em destaque largo so quando o total e impar, assim a grade sempre fecha sem sobra */
@media (min-width:901px){
  .casos-dest>.caso:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 56px;align-items:center}
  .casos-dest>.caso:first-child .card-foto{margin:0}
  .casos-dest>.caso:first-child .card-foto img{aspect-ratio:16/10}
  .casos-dest>.caso:first-child .lnk{margin-top:8px}
}

/* contato */
.contato-topo .h1{max-width:16ch}
.contato-topo .lead{margin-bottom:36px}
.canais{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px}
.canal{padding:24px 0;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 24px;align-items:baseline}
.canal dt{font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.canal dd{font-size:1.0625rem;font-weight:500;color:var(--indigo);overflow-wrap:anywhere}
/* link com cara de link: sublinhado firme e seta de saida */
.canal dd a{text-decoration:none;border-bottom:2px solid var(--indigo);transition:border-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.canal dd a::after{content:"\00a0\2197";font-weight:400}
.canal dd a:hover{border-color:var(--laranja)}
@media (max-width:900px){.canais{grid-template-columns:minmax(0,1fr)}.canal{grid-template-columns:minmax(0,1fr)}}

/* rodape */
.rod{background:var(--indigo);color:rgba(255,255,255,.76);padding-top:clamp(64px, 8vw, 104px);font-size:.9375rem}
.rod-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr);gap:48px 64px}
.rod-marca img{height:28px;width:auto}
.rod-ass{margin-top:24px;color:var(--branco);font-weight:600;font-size:1.125rem}
.rod-txt{margin-top:12px;max-width:40ch}
.rod-tit{font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--branco);margin-bottom:20px}
.rod-lista li+li{margin-top:4px}
.rod-lista a{display:inline-block;padding-block:6px;text-decoration:none;color:rgba(255,255,255,.86)}
.rod-lista a:hover{color:var(--branco);text-decoration:underline}
.rod-contato .rot{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rod-contato a{padding-block:4px}
.rod-contato li+li{margin-top:12px}
.rod-base{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;margin-top:clamp(56px, 7vw, 88px);padding-top:24px;padding-bottom:32px;font-size:.8125rem;color:rgba(255,255,255,.56)}
.rod-base::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);border-top:1px solid rgba(255,255,255,.14)}
.rod-dados{display:flex;flex-wrap:wrap;gap:4px 28px}
@media (max-width:900px){.rod-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rod-marca{grid-column:1/-1}}
@media (max-width:520px){.rod-in{grid-template-columns:minmax(0,1fr)}}

.contato-topo .duas-foto img,.feicon .duas-foto img{aspect-ratio:16/9}

/* revelar ao rolar: so vale quando o site.js marca o html com .mov e o item com data-rev.
   Sem JS nada fica escondido. */
.mov [data-rev]{opacity:0;transform:translateY(16px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease);transition-delay:calc(var(--i, 0) * 70ms)}
.mov [data-rev].vis{opacity:1;transform:none}
/* linha de projeto que se desenha nas etapas e nos pilares */
.mov .etapas li,.mov .pilares li{border-top-color:transparent;position:relative}
.mov .etapas li::before,.mov .pilares li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--linha);transform:scaleX(0);transform-origin:left;transition:transform var(--d3) var(--ease);transition-delay:calc(var(--i, 0) * 90ms + 150ms)}
.mov .pilares li::before{height:2px;top:-2px;background:var(--laranja)}
.mov .etapas li.vis::before,.mov .pilares li.vis::before{transform:scaleX(1)}

/* parallax leve so com CSS, sem JS. Firefox fica parado, sem erro. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hero-foto img{transform:scale(1.08);animation:hero-par linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .foto-larga img{transform:scale(1.04);animation:larga-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes hero-par{to{transform:scale(1.08) translateY(6%)}}
    @keyframes larga-par{from{transform:scale(1.04) translateY(-1.5%)}to{transform:scale(1.04) translateY(1.5%)}}
  }
}

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

/* sem JS o botao de menu nao faz nada: some, e a navegacao fica no rodape */
@media (scripting:none){.cab-abre{display:none}}

/* impressao: nada escondido pelo revelar, cabecalho fixo vira normal */
@media print{
  body{padding-top:0}
  .cab{position:static}
  .cab-abre,.cab-nav,.pular{display:none}
  .mov [data-rev],.mov .etapas li::before,.mov .pilares li::before{opacity:1!important;transform:none!important}
  .hero-foto img,.foto-larga img{animation:none!important;transform:none!important}
}
/* SEO: o servico de cada obra e link interno para o bloco dele em Servicos */
.meta a{text-underline-offset:.2em;text-decoration-thickness:1px}
.meta a:hover{color:var(--indigo)}

/* botao flutuante do WhatsApp, em todas as paginas */
.wa-flutua{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;border-radius:999px;padding:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);text-decoration:none;font-weight:600;line-height:1;transition:transform .15s ease,box-shadow .15s ease}
.wa-flutua:hover,.wa-flutua:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.3);color:#fff}
.wa-flutua:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.wa-flutua .wa-txt{display:none}
@media (min-width:900px){.wa-flutua{padding:13px 20px 13px 15px}.wa-flutua .wa-txt{display:inline}}
@media print{.wa-flutua{display:none}}