/* Tecnologia RNB. Motivo: o corte diagonal do N do monograma.
   Ele vira a máscara das fotos, o fundo dos botões e as faixas da página. */
:root{
  --bg:#eef0f3;--surface:#e2e5ea;--ink:#0b1220;--muted:#4d5563;
  --accent:#1859e6;--navy:#0a2a6e;--navy-2:#071d4d;--on-accent:#fff;
  --m:clamp(16px,3.2vw,44px);
  --gap-sec:clamp(72px,9vw,132px);
  --fonte:"General Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --corte:14%;
  --skew:-12deg;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fonte);font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2{font-weight:700;letter-spacing:-.02em;line-height:.98}
h2{font-size:clamp(2.1rem,1.2rem + 3.6vw,4.25rem)}
h3{font-weight:600;line-height:1.2}
.pular{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.pular:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* botão: um formato só, com o corte do monograma */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 40px;background:var(--accent);color:var(--on-accent);text-decoration:none;font:600 1.0625rem/1 var(--fonte);border:0;cursor:pointer;transform:skewX(var(--skew));transition:background .2s}
.btn>span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.btn:hover{background:var(--navy)}
.btn-sm{min-height:46px;padding:0 30px;font-size:1rem}
.btn-escuro{background:var(--navy-2)}
.btn-escuro:hover{background:#000}
.btn-claro{background:#fff;color:var(--navy-2)}
.btn-claro:hover{background:var(--surface)}

/* topo */
.topo{position:sticky;top:0;z-index:50;background:var(--bg)}
.topo-in{display:flex;align-items:center;gap:clamp(20px,3vw,44px);min-height:76px;padding-inline:var(--m)}
.logo img{height:40px;width:auto}
.menu{display:flex;gap:clamp(20px,2.6vw,40px);margin-left:auto}
.menu a{text-decoration:none;font-weight:500;padding:8px 0;white-space:nowrap}
.menu a:hover{color:var(--accent)}
.burger{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;position:relative;margin-left:auto}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .2s,top .2s}
.burger span:first-child{top:19px}.burger span:last-child{top:27px}
.burger[aria-expanded=true] span:first-child{top:23px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:23px;transform:rotate(-45deg)}

/* abertura */
.hero{display:grid;grid-template-columns:11fr 9fr;min-height:calc(100svh - 76px);max-height:900px;overflow:hidden}
.hero-txt{align-self:center;padding:var(--m) clamp(16px,2vw,32px) var(--m) var(--m);display:grid;gap:28px;justify-items:start}
h1{font-size:clamp(2.5rem,4.9vw + .2rem,5.4rem)}
.lead{font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);max-width:30em;line-height:1.4}
.hero-foto{position:relative;min-height:420px;overflow:hidden}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%)}
.faixa{position:absolute;inset:0;background:var(--accent);clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%);transform:translateX(-7%)}
/* até o script assumir, a abertura fica escondida (sem piscar a faixa azul); se o script falhar, aparece depois de 3s */
.pre .hero-foto,.pre h1,.pre .lead,.pre .hero-txt .btn{visibility:hidden;animation:mostra 0s 4s forwards}
@keyframes mostra{to{visibility:visible}}
.js h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.js h1 .w>span{display:inline-block}

/* a empresa: faixa de cor com o corte em cima */
.sobre{background:var(--navy);color:#fff;display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center;padding:calc(4vw + clamp(48px,6vw,96px)) var(--m) clamp(64px,8vw,120px);clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
.sobre-txt{display:grid;gap:28px;justify-items:start}
.sobre h2{color:#fff}
.manifesto{font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);line-height:1.4;max-width:26em}
.sobre-fotos{position:relative;height:clamp(420px,46vw,680px)}
.sobre-fotos figure{position:absolute;overflow:hidden;background:#0f3a94}
.sobre-fotos img{width:100%;height:112%;object-fit:cover}
.f1{left:0;top:0;width:56%;height:86%;clip-path:polygon(0 0,100% 0,calc(100% - var(--corte)) 100%,0 100%)}
.f2{right:0;bottom:0;width:46%;height:72%;clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%)}

/* obras: mosaico; as fotos deslizam dentro da moldura com a rolagem */
.obras{padding:var(--gap-sec) var(--m);display:grid;gap:clamp(28px,4vw,56px)}
.obras-cab{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,80px);align-items:end}
.obras-cab p{font-size:clamp(1.25rem,1.05rem + .4vw,1.5rem);max-width:26em;color:var(--muted)}
.trilho{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);padding-bottom:clamp(24px,6vw,96px)}
.trilho figure{overflow:hidden;contain:paint;isolation:isolate;aspect-ratio:3/4;clip-path:polygon(0 0,100% 0,calc(100% - var(--corte)) 100%,0 100%);background:var(--surface)}
.trilho figure:nth-child(even){clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%)}
.trilho img{width:100%;height:100%;object-fit:cover}
.trilho figure:nth-child(3n+2){margin-top:clamp(24px,6vw,96px);margin-bottom:calc(clamp(24px,6vw,96px) * -1)}
.trilho figure img{height:120%;margin-top:-10%;will-change:transform;backface-visibility:hidden}
.sobre-fotos img{will-change:transform;backface-visibility:hidden}

/* processo: faixa de cor inteira, borda superior com o corte */
.processo{background:var(--navy);color:#fff;padding:calc(4vw + clamp(36px,5vw,72px)) var(--m) var(--gap-sec);margin-top:calc(var(--gap-sec) * -.15);clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);display:grid;gap:clamp(36px,5vw,64px)}
.proc-cab{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,80px);align-items:end}
.proc-cab p{font-size:clamp(1.25rem,1.05rem + .4vw,1.5rem);max-width:30em}
.etapas{--c:clamp(20px,2.6vw,40px);display:grid;grid-template-columns:repeat(4,1fr)}
.painel{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:clamp(300px,34vw,420px);padding:clamp(22px,2.4vw,34px);background:var(--tom);color:var(--tom-ink)}
@media (min-width:1001px){
  .painel{clip-path:polygon(var(--c) 0,100% 0,calc(100% - var(--c)) 100%,0 100%);padding-inline:calc(var(--c) + clamp(16px,1.6vw,26px));margin-left:calc(var(--c) * -1)}
  .painel:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--c)) 100%,0 100%);padding-left:clamp(22px,2.4vw,34px)}
  .painel:last-child{clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%)}
}
.painel[data-tom="1"]{--tom:#0f3a94;--tom-ink:#fff}
.painel[data-tom="2"]{--tom:#2e5fc4;--tom-ink:#fff}
.painel[data-tom="3"]{--tom:#8eaeea;--tom-ink:#071d4d}
.painel[data-tom="4"]{--tom:#d3e0f9;--tom-ink:#071d4d}
.painel h3{font-size:clamp(1.5rem,1rem + 1.2vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.painel p{font-size:1.25rem;line-height:1.4}

/* contato */
.contato{padding:var(--gap-sec) var(--m)}
.cupom{--sl:clamp(18px,4vw,64px);background:var(--accent);color:#fff;display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,80px);padding:clamp(36px,5vw,72px) calc(var(--sl) + clamp(20px,3vw,48px));clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%)}
.cupom h2{margin-bottom:20px}
.cupom-txt p{font-size:1.25rem;max-width:26em}
.infos{margin-top:28px;display:grid;gap:14px}
.infos li{font-weight:600;font-size:1.25rem}
.infos small{display:block;font-weight:400;font-size:1rem;opacity:.9}
.infos a{text-underline-offset:4px}
.form{display:grid;gap:12px;align-content:start}
.campo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form input[type=text],.form textarea{font:inherit;font-size:1.0625rem;color:#fff;background:#0f3a94;border:0;padding:16px 18px;width:100%;border-radius:0}
.form textarea{resize:vertical;min-height:150px}
.form ::placeholder{color:rgba(255,255,255,.82);opacity:1}
.form input[type=text]:focus-visible,.form textarea:focus-visible{outline:3px solid #fff;outline-offset:2px}
.form .btn{justify-self:start;margin-top:6px}
.erro{background:#fff;color:#8c1d18;padding:10px 14px;font-weight:500}

/* rodapé */
.rodape{background:var(--navy-2);color:#d5def2}
.marca-grande{display:block;width:100%;height:clamp(96px,18vw,240px);overflow:hidden}
.rodape-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px clamp(24px,5vw,80px);padding:clamp(64px,8vw,120px) var(--m) clamp(40px,5vw,72px);align-items:start}
.rodape-in img{height:44px;width:auto}
.rodape-links,.rodape-infos{display:grid;gap:10px}
.rodape a{text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.rodape-infos small{display:block;opacity:.85;font-size:1rem}
.copy{grid-column:1/3;font-size:1rem}
.rodape .btn{justify-self:end}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;max-height:none;min-height:0}
  .hero-foto{order:-1;min-height:260px;height:44svh}
  .hero-foto img,.faixa{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 6vw))}
  .faixa{transform:translateY(-6%)}
  .hero-txt{padding:36px var(--m) 56px}
  .sobre{grid-template-columns:1fr}
  .sobre-fotos{height:clamp(360px,70vw,520px)}
  .trilho{grid-template-columns:repeat(2,1fr);padding-bottom:clamp(20px,6vw,48px)}
  /* em 2 colunas o desnível de 3 colunas empurrava fotos para cima das outras */
  .trilho figure:nth-child(3n+2){margin-top:0;margin-bottom:0}
  .trilho figure:nth-child(even){margin-top:clamp(20px,6vw,48px)}
  .proc-cab,.obras-cab{grid-template-columns:1fr}
  .etapas{grid-template-columns:repeat(2,1fr)}
  .cupom{grid-template-columns:1fr}
  .rodape-in{grid-template-columns:1fr 1fr}
  .rodape-in img{grid-column:1/-1}
  .copy{grid-column:1/-1}
  .rodape .btn{justify-self:start}
}
@media (max-width:900px){
  .burger{display:block}
  .topo .btn-sm{display:none}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);padding:4px var(--m) 20px;margin:0}
  .menu.aberto{display:flex}
  .menu a{padding:15px 0;font-size:1.25rem}
}
@media (max-width:720px){
  .etapas{grid-template-columns:1fr}
  .painel{min-height:0;gap:28px}
  .cupom{padding-inline:calc(var(--sl) + 12px)}
  .form .btn{justify-self:stretch}
  .rodape-in{grid-template-columns:1fr}
  .hero-txt .btn{width:100%}
  .manifesto{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before{transition:none!important}
}