/* ============================================================
   A P SILVA CONSTRUÇÕES
   Estrutura metálica · Maracanaú, CE
   Assinatura: a treliça. Divide as seções e se monta na entrada.
   ============================================================ */

/* ============================================================
   FONTES, SERVIDAS DO PRÓPRIO DOMÍNIO
   Vinham do Google Fonts, o que criava uma fila de espera: o
   navegador tinha que buscar um CSS no googleapis para só então
   descobrir os arquivos no gstatic, em outro domínio. Eram 897 ms
   antes da primeira letra aparecer.
   São as versões variáveis: um arquivo cobre toda a faixa de peso,
   então as três famílias inteiras cabem em 108 KB.
   ============================================================ */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;
  src:url('../fonts/archivo.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/plex-sans.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/mono.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* superfície */
  --paper:#FFFFFF;
  --paper-2:#F1F6F8;
  --deep:#06222D;
  --deep-2:#0B3341;
  --deep-3:#0F4152;

  /* tinta */
  --ink:#0A2730;
  --ink-2:#16404E;
  --muted:#55686F;
  --muted-inv:#9CB6C0;

  /* acento
     Dois verdes por um motivo: o vivo é para brilho, ícone e palavra de
     destaque em título grande. O de botão é mais escuro porque texto
     branco sobre o vivo dá 3,3 de contraste e o mínimo exigido é 4,5.
     O de botão fecha em 4,8. Mesma lógica no ciano: o claro só vive em
     fundo escuro, porque em fundo claro cai para 2,5. */
  --green:#17A34A;
  --green-lit:#2ED06A;
  --green-deep:#0F7C37;
  --green-btn:#0E8339;
  --green-btn-2:#0A6B2E;
  --cyan:#35A8C9;
  --cyan-dark:#12697E;

  /* traço */
  --line:#DDE8EC;
  --line-inv:rgba(53,168,201,.22);

  /* tipo */
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* ritmo */
  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
  --sec-y:clamp(72px,8vw,124px);
  --r:10px;

  /* profundidade */
  --sh-1:0 1px 2px rgba(10,39,48,.05), 0 8px 20px -12px rgba(10,39,48,.14);
  --sh-2:0 2px 4px rgba(10,39,48,.06), 0 22px 44px -20px rgba(10,39,48,.26);
  --sh-inv:0 2px 6px rgba(0,0,0,.28), 0 24px 48px -22px rgba(0,0,0,.6);

  /* tempo */
  --ez:cubic-bezier(.16,1,.3,1);
  --ez-io:cubic-bezier(.5,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(15px,.42vw + 14px,17px)/1.68 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* nada estoura a lateral em tela estreita */
h1,h2,h3,p,b,span,small,a,dt,dd{overflow-wrap:break-word}
li,dd,.stat,.rev,.work,.svc__card,.seals__row li,.hd__in>*{min-width:0}

/* superfícies do navegador: parte do design, não default */
::selection{background:var(--green);color:#fff}
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:4px;
}
html{scrollbar-color:var(--cyan) var(--paper-2);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#9BC4D3;border:3px solid var(--paper-2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;
  font:600 14px var(--body);text-decoration:none;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- ícones ---------- */
.ico{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico--lg{width:30px;height:30px;stroke-width:1.55}
.ico--xl{width:46px;height:46px;stroke-width:1.4}

/* ============================================================
   ASSINATURA: A TRELIÇA
   Banzo superior, banzo inferior e diagonais em W. Divide cada
   seção e se desenha da esquerda pra direita quando aparece.
   ============================================================ */
.truss{
  position:absolute;top:0;left:0;right:0;height:24px;
  background:var(--cyan);
  opacity:.4;
  -webkit-mask-image:var(--truss-src);mask-image:var(--truss-src);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:88px 24px;mask-size:88px 24px;
  --truss-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 1.4h88M0 22.6h88'/%3E%3Cpath d='M0 22.6 22 1.4 44 22.6 66 1.4 88 22.6'/%3E%3C/g%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s var(--ez);
}
.truss.is-built{clip-path:inset(0 0 0 0)}

/* malha de papel de projeto, quase invisível */
.grid-paper{
  background-image:
    linear-gradient(to right,rgba(53,168,201,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(53,168,201,.055) 1px,transparent 1px);
  background-size:34px 34px;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:var(--r);
  font:600 15px/1.2 var(--body);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .28s var(--ez),box-shadow .28s var(--ez),background-color .2s linear,border-color .2s linear,color .2s linear;
}
.btn:active{transform:translateY(1px) scale(.99)}

.btn--go{
  background:linear-gradient(170deg,var(--green-btn),var(--green-btn-2));
  color:#fff;
  box-shadow:0 1px 2px rgba(10,80,40,.45),0 12px 24px -12px rgba(23,163,74,.7);
}
.btn--go:hover{
  background:linear-gradient(170deg,#10933F,var(--green-btn-2) 92%);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(10,80,40,.45),0 20px 34px -14px rgba(23,163,74,.85);
}

.btn--ghost{
  border-color:rgba(10,39,48,.24);color:var(--ink);background:transparent;
}
.btn--ghost:hover{border-color:var(--ink);background:rgba(10,39,48,.045);transform:translateY(-2px)}

.btn--inv{border-color:var(--line-inv);color:#fff}
.btn--inv:hover{border-color:var(--cyan);background:rgba(53,168,201,.12)}

.btn--big{
  padding:16px 30px;font-size:17px;
}
.btn--big small{
  display:block;font:500 13px/1.3 var(--mono);opacity:.86;letter-spacing:-.02em;margin-top:2px;
}

/* link com seta */
.lnk{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  font:600 14px/1 var(--body);color:var(--green-deep);text-decoration:none;
  padding:11px 16px;border:1.5px solid rgba(23,163,74,.28);border-radius:8px;
  transition:background-color .2s linear,border-color .2s linear,color .2s linear;
}
.lnk .ico{width:16px;height:16px;stroke-width:2;transition:transform .34s var(--ez)}
.lnk:hover{background:var(--green-btn);border-color:var(--green-btn);color:#fff}
.lnk:hover .ico{transform:translateX(4px)}

/* ============================================================
   HEADER
   ============================================================ */
.hd{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s linear,box-shadow .3s linear;
}
.hd.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(10,39,48,.5)}

.hd__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);min-height:78px}
/* a logo é um render em fundo preto: entra numa placa escura, e o blend
   apaga o preto contra ela. Em header branco puro ela sujaria. */
.hd__brand{flex:none;display:flex;align-items:center;gap:13px;text-decoration:none}

/* o símbolo é um render em fundo preto: vai numa placa escura, onde o
   blend apaga o preto. Em header branco puro ele sujaria a borda. */
.hd__mark{
  flex:none;line-height:0;isolation:isolate;overflow:hidden;
  display:block;padding:8px 11px;border-radius:11px;
  background:linear-gradient(158deg,#10465A,#04191F 80%);
  box-shadow:0 1px 2px rgba(10,39,48,.18),0 10px 22px -13px rgba(10,39,48,.75);
  transition:transform .35s var(--ez),box-shadow .35s var(--ez);
}
.hd__brand:hover .hd__mark{
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(10,39,48,.2),0 16px 28px -13px rgba(53,168,201,.7);
}
.hd__mark img{width:auto;height:52px;mix-blend-mode:screen;margin:-4px -6px}

/* o nome sai em texto: legível no tamanho do header e lido pelo Google */
.hd__name{
  display:grid;gap:1px;
  font:800 19px/1.05 var(--display);letter-spacing:-.028em;color:var(--ink);
}
.hd__name em{
  font:600 10.5px/1.2 var(--body);font-style:normal;
  /* o ciano claro só passa em fundo escuro: no header branco a linha
     da marca precisa da variante fechada */
  letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-dark);
}

.hd__nav{display:flex;gap:clamp(14px,2vw,30px);margin-inline:auto}
.hd__nav a{
  position:relative;padding:6px 2px;
  font:500 14.5px/1 var(--body);color:var(--ink-2);text-decoration:none;
  transition:color .2s linear;
}
.hd__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ez);
}
.hd__nav a:hover{color:var(--ink)}
.hd__nav a:hover::after,.hd__nav a.is-here::after{transform:scaleX(1)}

.hd__cta{flex:none;padding:12px 20px}
.hd__cta span{font-family:var(--mono);font-weight:700;letter-spacing:-.03em;font-size:14px}

.hd__burger{
  display:none;flex:none;width:44px;height:44px;padding:11px;
  background:transparent;border:1.5px solid var(--line);border-radius:9px;cursor:pointer;
}
.hd__burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .34s var(--ez),opacity .2s linear}
.hd__burger span+span{margin-top:5px}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);
  min-height:clamp(520px,60vh,700px);
  display:flex;align-items:center;
}
.hero__art{position:absolute;inset:0;z-index:-2}
.hero__art img{
  width:100%;height:100%;object-fit:cover;object-position:82% 62%;
  animation:heroIn 1.6s var(--ez) both;
}
@keyframes heroIn{from{transform:scale(1.06);opacity:0}to{transform:scale(1);opacity:1}}

/* garante o texto legível em qualquer corte da foto */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(97deg,#fff 0 34%,rgba(255,255,255,.96) 46%,rgba(255,255,255,.6) 60%,rgba(255,255,255,0) 76%);
}
/* clarão de solda subindo da base */
.hero::after{
  content:'';position:absolute;left:50%;bottom:-42%;width:min(1100px,105%);height:70%;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(46,208,106,.16),transparent 66%);
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,min(600px,52%));
  gap:0;
  padding-block:clamp(48px,7vw,84px);
}

.hero__h1{
  margin:0;
  font:800 clamp(36px,4.9vw,62px)/1.04 var(--display);
  letter-spacing:-.033em;
  color:var(--ink);
  text-wrap:balance;
  animation:riseIn .9s var(--ez) .1s both;
}
.hero__h1 em{font-style:normal;color:var(--green)}

.hero__sub{
  margin:22px 0 0;max-width:50ch;
  font-size:clamp(15.5px,.4vw + 14px,17.5px);color:var(--muted);
  animation:riseIn .9s var(--ez) .22s both;
}
/* o convite que explica por que vale mandar mensagem antes de ter preço.
   Fica entre o subtítulo e os botões: é a ponte entre a promessa e a ação */
.hero__nota{
  margin:20px 0 0;max-width:52ch;padding:14px 18px;
  border-left:3px solid var(--green);border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,rgba(23,163,74,.09),rgba(23,163,74,0) 88%);
  font-size:15px;line-height:1.55;color:var(--ink-2);
  animation:riseIn .9s var(--ez) .28s both;
}
.hero__nota b{font:700 15px/1.4 var(--display);letter-spacing:-.012em;color:var(--ink);display:block;margin-bottom:2px}

.hero__acts{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;
  animation:riseIn .9s var(--ez) .34s both;
}

/* reforços da primeira dobra: regional, visita, certificação, garantia */
.hero__marks{
  display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;
  margin:26px 0 0;padding:0;
  animation:riseIn .9s var(--ez) .44s both;
}
.hero__marks li{
  display:flex;align-items:center;gap:8px;
  font:500 13.5px/1.4 var(--body);color:var(--ink-2);
}
.hero__marks li::before{
  content:'';flex:none;width:15px;height:15px;border-radius:50%;
  background:var(--green);
  -webkit-mask:var(--tick) center/9px 9px no-repeat;mask:var(--tick) center/9px 9px no-repeat;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.3 10.5 2.9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:0 0 0 1.5px rgba(23,163,74,.28);
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(20px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ============================================================
   FAIXA DE SELOS
   ============================================================ */
.seals{position:relative;background:var(--deep);color:#fff}
.seals .truss{opacity:.32}
.seals__row{
  display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding-block:clamp(28px,3.4vw,42px);
}
.seals__row li{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center;padding-inline:clamp(14px,2vw,28px);
}
.seals__row li+li{border-left:1px solid var(--line-inv)}
.seals__row li:first-child{padding-left:0}
.seals__row .ico{grid-row:1/3;color:var(--cyan)}
.seals__row b{font:700 14.5px/1.25 var(--body);letter-spacing:.005em}
.seals__row span{font:500 13.5px/1.3 var(--body);color:var(--muted-inv)}

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{position:relative;padding-block:var(--sec-y)}
.sec--slim{padding-block:clamp(56px,6vw,86px)}
.sec--light{background:var(--paper-2);color:var(--ink)}
.sec--deep{background:var(--deep);color:#fff;overflow:hidden}

/* clarão de solda subindo da base das seções escuras */
.sec--deep::after,.cta::after{
  content:'';position:absolute;left:50%;bottom:-46%;width:min(1300px,120%);height:78%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(46,208,106,.115),rgba(53,168,201,.05) 44%,transparent 70%);
}
.sec--deep>.wrap,.cta>.wrap{position:relative;z-index:1}

.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);
}
.eyebrow i{
  font:700 12px/1 var(--mono);font-style:normal;letter-spacing:-.02em;
  color:var(--green);
}
/* em fundo claro o ciano e o verde vivo caem para 2,5 e 3,2 de contraste.
   Nessas seções o rótulo usa os tons fechados, que passam com folga. */
.sec--light .eyebrow{color:var(--cyan-dark)}
.sec--light .eyebrow i{color:var(--green-deep)}
.eyebrow i::after{content:'';display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-left:10px;opacity:.6}

.sec__h2{
  margin:0;
  font:800 clamp(28px,3.4vw,45px)/1.08 var(--display);
  letter-spacing:-.028em;text-wrap:balance;
}
.sec__h2 em{font-style:normal;color:var(--green)}
.sec--deep .sec__h2{color:#fff}

.sec__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42ch);
  gap:clamp(24px,4vw,64px);align-items:end;
  margin-bottom:clamp(36px,4.4vw,58px);
}
.sec__head>.btn{justify-self:end}
.sec__lead{margin:0;color:var(--muted);font-size:16px}
.sec--deep .sec__lead{color:var(--muted-inv)}

/* ============================================================
   TIRA DE OBRAS
   Corre sozinha, da direita para a esquerda, em laço contínuo. A
   pista tem duas cópias da lista lado a lado e desliza exatamente
   metade da própria largura, então a emenda nunca aparece.
   ============================================================ */
.tira{
  overflow:hidden;background:var(--deep);
  padding:14px 0;border-block:1px solid var(--line-inv);
  /* apaga as pontas, para as fotos entrarem e saírem sem corte seco */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.tira__pista{
  display:flex;width:max-content;
  animation:corre 64s linear infinite;
}
.tira:hover .tira__pista{animation-play-state:paused}
@keyframes corre{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.tira__lote{display:flex;gap:14px;padding:0 7px;margin:0;list-style:none}
.tira__lote li{flex:none}
.tira__lote img{
  height:190px;width:auto;border-radius:9px;
  border:1px solid var(--line-inv);
  object-fit:cover;
  filter:saturate(.94);
  transition:transform .45s var(--ez),filter .35s linear,border-color .3s linear;
}
.tira__lote img:hover{transform:translateY(-4px) scale(1.02);filter:saturate(1.1);border-color:var(--cyan)}

/* ============================================================
   SERVIÇOS
   ============================================================ */
.svc{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px);
  list-style:none;margin:0;padding:0;
}
/* cards claros vivem dentro de seções escuras: a cor do texto é
   declarada aqui, senão herdam o branco da seção e somem */
.svc__card,.prob li,.rev,.work,.form{color:var(--ink)}

.svc__card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:'ico titulo' 'ico texto' 'ico acao';
  grid-template-rows:auto 1fr auto;
  column-gap:clamp(16px,1.6vw,22px);row-gap:10px;
  padding:clamp(24px,2.4vw,32px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ez),box-shadow .38s var(--ez),border-color .3s linear;
}
.svc__card .ico--xl{grid-area:ico}
.svc__card h3{grid-area:titulo}
.svc__card p{grid-area:texto}
.svc__card .lnk{grid-area:acao;justify-self:start;align-self:end}
.svc__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#C3DAE2}
.svc__card .ico--xl{color:var(--ink-2);transition:color .3s linear,transform .5s var(--ez);margin-top:2px}
.svc__card:hover .ico--xl{color:var(--green);transform:translateY(-2px)}
.svc__card h3{
  margin:0;font:700 19px/1.2 var(--display);letter-spacing:-.016em;
}
.svc__card p{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--muted)}

/* OUTROS SERVIÇOS
   Os quatro carros-chefe ficam em card grande. O resto entra aqui, numa
   linha compacta: continua acessível e indexável, sem competir com o que
   o cliente quer vender primeiro. */
.svc__mais{
  margin:clamp(30px,3.4vw,44px) 0 16px;
  font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
  display:flex;align-items:center;gap:14px;
}
.svc__mais::after{content:'';flex:1;height:1px;background:var(--line-inv)}

.svc2{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.2vw,14px);
  list-style:none;margin:0;padding:0;
}
.svc2__card{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 18px 18px 20px;
  background:rgba(255,255,255,.045);border:1px solid var(--line-inv);border-radius:12px;
  transition:background-color .3s linear,border-color .3s linear;
}
.svc2__card:hover{background:rgba(255,255,255,.08);border-color:rgba(53,168,201,.5)}
.svc2__card .ico--lg{color:var(--cyan);flex:none;margin-top:2px}
.svc2__card div{min-width:0;flex:1}
.svc2__card h4{margin:0 0 4px;font:700 15.5px/1.25 var(--display);letter-spacing:-.012em;color:#fff}
.svc2__card p{margin:0;font-size:13.6px;line-height:1.5;color:var(--muted-inv)}

/* só a seta, porque o texto do card já diz do que se trata */
.lnk--min{
  flex:none;margin:0;padding:9px;align-self:center;
  color:var(--green-lit);border-color:rgba(46,208,106,.34);
}
.lnk--min:hover{background:var(--green-btn);border-color:var(--green-btn)}

.svc__cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line-inv);
}
.svc__cta p{margin:0 auto 0 0;max-width:42ch;font-size:15.5px;color:var(--muted-inv)}

/* ============================================================
   SOBRE
   ============================================================ */
.about{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.about__txt p{color:var(--muted-inv);max-width:56ch}
/* a frase de fecho que o cliente escreveu: fica com a cor e o peso do
   título para encerrar o bloco, senão some no meio de quatro parágrafos */
.about__fecho{
  margin-top:22px;padding-left:16px;border-left:3px solid var(--green);
  font:700 17px/1.45 var(--display);letter-spacing:-.014em;
  color:#fff;
}
.about__txt .sec__h2{margin-bottom:22px}

.about__pic{margin:0;position:relative}
.about__pic img{
  width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line-inv);
  box-shadow:var(--sh-inv);
}
.about__pic::before{
  content:'';position:absolute;inset:-14px;border-radius:18px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(53,168,201,.3),transparent 68%);
  z-index:-1;
}
.about__pic figcaption{
  margin-top:12px;font:500 13px/1.4 var(--body);color:var(--muted-inv);
  display:flex;align-items:center;gap:9px;
}
.about__pic figcaption::before{content:'';width:22px;height:1px;background:var(--cyan);flex:none}

/* números com linha de cota de projeto */
.stats{
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
  gap:clamp(18px,2.6vw,38px);margin:38px 0 0;
}
.stat dt{
  font:700 clamp(22px,2.4vw,30px)/1 var(--mono);letter-spacing:-.045em;
  color:var(--cyan);font-variant-numeric:tabular-nums;
}
.stat dd{
  margin:0;padding-top:11px;position:relative;
  font:500 11.5px/1.35 var(--body);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-inv);max-width:15ch;
}
/* a cota: linha com seta nas duas pontas */
.stat dd::before{
  content:'';position:absolute;top:5px;left:0;right:0;height:5px;
  background:var(--cyan);opacity:.6;
  -webkit-mask-image:var(--dim);mask-image:var(--dim);
  -webkit-mask-size:100% 5px;mask-size:100% 5px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  --dim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 5'%3E%3Cpath d='M0 2.5h100' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M0 0v5M100 0v5' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ez);
}
.stats.is-in .stat dd::before{transform:scaleX(1)}
.stats.is-in .stat:nth-child(2) dd::before{transition-delay:.09s}
.stats.is-in .stat:nth-child(3) dd::before{transition-delay:.18s}
.stats.is-in .stat:nth-child(4) dd::before{transition-delay:.27s}

/* ============================================================
   ONDE ATUAMOS
   ============================================================ */
.area{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4vw,56px) clamp(32px,5vw,80px);align-items:center;
}
.area>div{grid-row:1/3}
.area__list{
  display:flex;gap:clamp(24px,3.4vw,54px);list-style:none;margin:0;padding:0;
  align-self:end;
}
.area .sec__lead{align-self:start;padding-top:22px;border-top:1px solid var(--line)}
.area__list li{display:grid;justify-items:center;gap:10px;text-align:center}
.area__list .ico{color:var(--cyan)}
.area__list b{font:700 12.5px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   MOTIVOS
   ============================================================ */
.why{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,4.4vw,64px)}
.why__head{align-self:start}
.why__head .btn{margin-top:26px}
.sec--light .why__list li{border-top-color:var(--line)}
.sec--light .why__list .ico{color:var(--green)}
.sec--light .why__list span{color:var(--muted)}
.why__list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);
  list-style:none;margin:0;padding:0;
}
.why__list li{display:grid;gap:9px;align-content:start;padding-top:20px;border-top:1px solid var(--line-inv)}
.why__list .ico{color:var(--cyan)}
.why__list b{font:700 15.5px/1.3 var(--display);letter-spacing:-.01em}
.why__list span{font-size:14.5px;line-height:1.55;color:var(--muted-inv)}

/* ============================================================
   PROCESSO
   ============================================================ */
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px);
  list-style:none;margin:0;padding:0;position:relative;counter-reset:s;
}
/* trilho que liga os passos, preenchido na entrada */
.steps::before{
  content:'';position:absolute;top:21px;left:10%;right:10%;height:2px;
  background:repeating-linear-gradient(to right,var(--cyan) 0 5px,transparent 5px 11px);
  opacity:.45;transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ez);
}
.steps.is-in::before{transform:scaleX(1)}
.steps li{display:grid;gap:8px;align-content:start;position:relative;z-index:1}
.steps__n{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(170deg,var(--green-btn),var(--green-btn-2));color:#fff;
  font:700 16px/1 var(--mono);letter-spacing:-.04em;
  box-shadow:0 0 0 6px var(--paper-2),0 10px 20px -10px rgba(23,163,74,.8);
}
.steps b{margin-top:6px;font:700 15.5px/1.3 var(--display);letter-spacing:-.01em}
.steps__d{font-size:14.2px;line-height:1.55;color:var(--muted)}

/* o mesmo bloco em seção escura: o anel do número e o cinza do texto
   precisam vir do fundo escuro, senão o passo some */
.sec--deep .steps__n{box-shadow:0 0 0 6px var(--deep),0 10px 20px -10px rgba(23,163,74,.8)}
.sec--deep .steps__d{color:var(--muted-inv)}

/* ============================================================
   OBRAS
   ============================================================ */
.works{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);
  list-style:none;margin:0;padding:0;
}
.work{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .35s var(--ez),box-shadow .35s var(--ez);
}
.work:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.work img{
  flex:none;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-bottom:1px solid var(--line);
}
.work dl{margin-top:auto}
.work b{
  font:700 16px/1.3 var(--display);letter-spacing:-.012em;
  padding:16px 18px 10px;
}
/* ficha técnica da obra, no formato de legenda de projeto */
.work dl{margin:0;padding:0 18px 16px;display:grid;gap:6px}
.work dl>div{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:baseline}
.work dt{
  font:500 10px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
}
.work dd{
  margin:0;font:500 13px/1.4 var(--mono);letter-spacing:-.025em;color:var(--ink-2);
}

.works__cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--line);
}
.works__cta p{margin:0 auto 0 0;font-size:16px;color:var(--muted);max-width:38ch}

/* ============================================================
   VÍDEO DA OBRA
   O vídeo é vertical e de resolução modesta, então o player fica
   estreito de propósito: esticado numa caixa larga ele borraria.
   ============================================================ */
/* Os filhos ficam soltos no grid, sem embrulho de coluna, porque no
   celular a ordem muda: lá é título, vídeo, botão e só então o texto.
   Com os elementos aninhados isso não sairia só trocando a ordem. */
.film{
  display:grid;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);
  grid-template-areas:
    'player cab'
    'player sub'
    'player marcas'
    'player cta';
  align-content:center;align-items:start;
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(30px,4.4vw,68px);
}
.film__cab{grid-area:cab}
.film__sub{grid-area:sub;margin:18px 0 0;color:var(--muted-inv);max-width:52ch}
.film__marks{grid-area:marcas}
.film__cta{grid-area:cta;justify-self:start}

.player{
  grid-area:player;align-self:center;
  position:relative;isolation:isolate;
  aspect-ratio:478/850;border-radius:16px;overflow:hidden;
  background:#04191F;border:1px solid var(--line-inv);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
.player::after{
  content:'';position:absolute;inset:-2px;border-radius:18px;z-index:-1;
  background:radial-gradient(ellipse at 50% 70%,rgba(46,208,106,.34),rgba(53,168,201,.16) 52%,transparent 74%);
}
.player__capa{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ez),filter .45s linear;
}
.player:hover .player__capa{transform:scale(1.035);filter:brightness(.86)}

/* o botão de play: anel que respira, e abre no hover */
.player__go{
  position:absolute;inset:0;margin:auto;z-index:2;
  display:grid;place-items:center;
  width:82px;height:82px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(165deg,var(--green-btn),var(--green-btn-2));
  color:#fff;
  box-shadow:0 10px 26px -8px rgba(23,163,74,.9);
  transition:transform .4s var(--ez),box-shadow .4s var(--ez);
}
.player__go .ico{width:30px;height:30px;margin-left:5px}
.player__go::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(46,208,106,.5);
  animation:pulso 2.8s var(--ez-io) infinite;
}
@keyframes pulso{
  0%{transform:scale(.9);opacity:.85}
  70%{transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}
.player:hover .player__go{transform:scale(1.08);box-shadow:0 16px 38px -10px rgba(23,163,74,1)}
.player__go:active{transform:scale(1.01)}

.player__tempo{
  position:absolute;right:12px;bottom:12px;z-index:2;
  padding:5px 10px;border-radius:6px;
  background:rgba(4,25,31,.78);backdrop-filter:blur(6px);
  font:700 12px/1 var(--mono);letter-spacing:-.02em;color:#fff;
}
.player__go .ico--som,.player__rot{display:none}
.player video{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;object-fit:cover;background:#04191F;
}

/* rodando sozinho e mudo: a capa sai, e o play vira um convite discreto
   para ligar o som, encostado no canto em vez de tampar a cena */
.player.is-live .player__capa{opacity:0}
.player.is-mudo .player__go{
  inset:auto 12px 12px auto;margin:0;
  width:auto;height:38px;padding:0 15px;border-radius:999px;
  gap:8px;display:flex;align-items:center;
  background:rgba(4,25,31,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(53,168,201,.4);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
.player.is-mudo .player__go::before{display:none}
.player.is-mudo .player__go .ico--play{display:none}
.player.is-mudo .player__go .ico--som{display:block;width:19px;height:19px;margin:0}
.player.is-mudo .player__rot{
  display:block;font:600 13px/1 var(--body);color:#fff;
}
.player.is-mudo:hover .player__go{background:var(--green-btn);border-color:var(--green-btn);transform:none}
.player.is-mudo .player__tempo{display:none}

/* com som: o vídeo assume, com os controles do próprio navegador */
.player.is-som .player__go,
.player.is-som .player__tempo{display:none}
.player.is-som video{object-fit:contain}

.film__marks{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:16px}
.film__marks li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px}
.film__marks .ico{grid-row:1/3;color:var(--cyan)}
.film__marks b{font:700 15px/1.3 var(--display);letter-spacing:-.01em}
.film__marks span{font-size:14.2px;line-height:1.5;color:var(--muted-inv)}

/* ============================================================
   PROBLEMAS QUE RESOLVEMOS
   ============================================================ */
.prob{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  list-style:none;margin:0;padding:0;
}
.prob li{
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  padding:clamp(22px,2.2vw,28px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ez),box-shadow .35s var(--ez),border-color .3s linear;
}
.prob li:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#C3DAE2}
.prob .ico--lg{color:var(--green);flex:none}
.prob b{font:700 16.5px/1.32 var(--display);letter-spacing:-.012em}
.prob span{font-size:14.6px;line-height:1.58;color:var(--muted);margin-bottom:4px}
.prob .lnk{margin-top:auto}

/* ============================================================
   GARANTIA
   ============================================================ */
.warranty{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(30px,4vw,64px)}
.warranty__head .sec__lead{margin-top:16px}
.warranty__list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);
  list-style:none;margin:0;padding:0;
}
.warranty__list li{display:grid;gap:9px;align-content:start;padding-top:20px;border-top:1px solid var(--line-inv)}
.warranty__list .ico{color:var(--green-lit)}
.warranty__list b{font:700 16px/1.3 var(--display);letter-spacing:-.01em}
.warranty__list span{font-size:14.6px;line-height:1.58;color:var(--muted-inv)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start}
.faq__head .sec__lead{margin-top:16px}
.faq__head .btn{margin-top:22px}
.faq__list{display:grid;gap:10px}
.faq details{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:border-color .25s linear,box-shadow .3s var(--ez);
}
.faq details[open]{border-color:#BCD6E0;box-shadow:var(--sh-2)}
.faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:18px clamp(18px,2vw,24px);
  font:700 16px/1.4 var(--display);letter-spacing:-.012em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
/* o sinal de mais vira menos ao abrir */
.faq summary::after{
  content:'';flex:none;margin-left:auto;width:16px;height:16px;
  background:
    linear-gradient(var(--green),var(--green)) center/16px 2px no-repeat,
    linear-gradient(var(--green),var(--green)) center/2px 16px no-repeat;
  transition:transform .34s var(--ez);
}
.faq details[open] summary::after{transform:rotate(90deg);background-size:16px 2px,0 0}
.faq summary:hover{color:var(--green-deep)}
.faq details p{
  margin:0;padding:0 clamp(18px,2vw,24px) 20px;
  font-size:15px;line-height:1.65;color:var(--muted);max-width:68ch;
}

/* ============================================================
   ORÇAMENTO E FORMULÁRIO
   ============================================================ */
.quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(32px,4.4vw,72px);align-items:start}
.quote__txt>p{color:var(--muted-inv);max-width:46ch;margin:18px 0 0}
.quote__ways{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:10px}
.quote__ways a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:16px;align-items:center;
  padding:14px 16px;border:1px solid var(--line-inv);border-radius:var(--r);
  text-decoration:none;color:#fff;
  transition:border-color .22s linear,background-color .22s linear,transform .3s var(--ez);
}
.quote__ways a:hover{border-color:var(--green);background:rgba(46,208,106,.07);transform:translateX(3px)}
.quote__ways .ico{grid-row:1/3;color:var(--cyan)}
.quote__ways b{font:700 13.5px/1.3 var(--body);color:#fff}
.quote__ways span{font:500 13.5px/1.35 var(--mono);letter-spacing:-.025em;color:var(--muted-inv);word-break:break-word}

.form{
  background:var(--paper);border-radius:14px;padding:clamp(24px,2.6vw,34px);
  display:grid;gap:14px;box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
}
.form__title{
  margin:0 0 2px;font:800 21px/1.2 var(--display);letter-spacing:-.024em;color:var(--ink);
}
.field{display:grid;gap:6px}
.field>span{
  font:600 11.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  width:100%;font:400 15px/1.45 var(--body);color:var(--ink);
  padding:12px 14px;background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:9px;
  transition:border-color .2s linear,background-color .2s linear,box-shadow .2s linear;
}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:#8FA3AC}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C3DAE2}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--paper);border-color:var(--green);
  box-shadow:0 0 0 3px rgba(23,163,74,.16);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#D14343;background:#FDF3F3}
.btn--full{width:100%;justify-content:center;margin-top:4px}
.form__note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.form__err{
  margin:0;padding:11px 14px;border-radius:9px;
  background:#FDF0F0;border:1px solid #F0C4C4;color:#A32626;
  font:500 13.5px/1.45 var(--body);
}

/* ============================================================
   AVALIAÇÕES
   ============================================================ */
.reviews{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,3.6vw,60px);align-items:start;
}
.reviews__head{padding-top:4px}
.score{display:grid;justify-items:start;gap:3px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.score b{
  font:800 clamp(50px,5.6vw,68px)/.9 var(--display);letter-spacing:-.05em;color:var(--green);
  font-variant-numeric:tabular-nums;
}
.score__stars{display:flex;gap:3px;color:var(--green);margin-top:6px}
.score__stars .ico{width:20px;height:20px}
.score span{margin-top:6px;font:500 11.5px/1.3 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,20px);list-style:none;margin:0;padding:0}
.rev{
  display:grid;gap:12px;align-content:start;
  padding:clamp(20px,2vw,26px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ez),box-shadow .38s var(--ez);
}
.rev:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.rev__stars{display:flex;gap:2px;color:#F0B429}
.rev__stars .ico{width:16px;height:16px}
.rev p{margin:0;font-size:14.6px;line-height:1.62;color:var(--muted)}
.rev b{font:700 14.5px/1.2 var(--display);letter-spacing:-.008em;color:var(--ink)}
.rev cite{
  display:block;margin-top:-6px;font-style:normal;
  font:500 11.5px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

.ft__areas{
  margin:20px 0 0;font-size:13px;line-height:1.55;color:rgba(156,182,192,.8);
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--deep-2),var(--deep) 62%);
  color:#fff;padding-block:clamp(52px,5.6vw,76px);
}
.cta__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(22px,3vw,48px);
}
.cta h2{
  margin:0;font:800 clamp(26px,3.2vw,42px)/1.08 var(--display);letter-spacing:-.028em;
  text-wrap:balance;
}
.cta h2 em{font-style:normal;color:var(--green-lit)}
.cta p{margin:12px 0 0;color:var(--muted-inv);font-size:16px}

/* ============================================================
   RODAPÉ
   ============================================================ */
.ft{background:#04191F;color:var(--muted-inv);padding-top:clamp(48px,5vw,72px)}
.ft__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.8fr)) minmax(0,1.4fr) minmax(0,.9fr);
  gap:clamp(26px,3vw,44px);padding-bottom:clamp(36px,4vw,56px);
}
/* a logo 3D vem com fundo preto: o blend apaga o preto e deixa só o relevo */
.ft__brand img{
  width:auto;max-width:230px;height:auto;margin:-14px 0 6px -12px;
  mix-blend-mode:screen;
}
.ft__brand p{margin:0;font-size:14.4px;line-height:1.6;max-width:34ch}
.ft__social{display:flex;gap:10px;margin-top:20px}
.ft__social a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
  border:1px solid var(--line-inv);color:var(--cyan);
  transition:background-color .2s linear,color .2s linear,transform .3s var(--ez);
}
.ft__social a:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}

.ft__col{display:grid;gap:11px;align-content:start}
.ft__col h3{
  margin:0 0 6px;font:700 12px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:#fff;
}
.ft__col a{
  font-size:14.4px;color:var(--muted-inv);text-decoration:none;
  transition:color .2s linear;
}
.ft__col a:hover{color:var(--cyan);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ft__col--contact a{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;line-height:1.5}
.ft__col--contact .ico{color:var(--cyan);margin-top:2px}

.ft__certs>div{display:flex;gap:12px;flex-wrap:wrap}
.ft__certs span{
  display:grid;place-content:center;justify-items:center;gap:3px;text-align:center;
  width:86px;height:86px;border-radius:50%;border:1px solid var(--line-inv);
  font:500 9px/1.25 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted-inv);
  padding:0 8px;
}
.ft__certs b{font:700 17px/1 var(--mono);letter-spacing:-.04em;color:var(--cyan)}

.ft__base{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-block:22px;border-top:1px solid rgba(53,168,201,.16);
}
.ft__base small{font-size:13px;color:rgba(156,182,192,.72)}

/* botão flutuante */
.float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 22px;border-radius:999px;
  background:linear-gradient(170deg,var(--green-btn),var(--green-btn-2));color:#fff;
  text-decoration:none;
  font:700 15px/1 var(--body);letter-spacing:.005em;
  box-shadow:0 4px 10px rgba(6,34,45,.3),0 16px 32px -12px rgba(23,163,74,.85);
  transform:translateY(90px);opacity:0;pointer-events:none;
  transition:transform .5s var(--ez),opacity .35s linear,box-shadow .3s var(--ez);
}
.float.is-on{transform:none;opacity:1;pointer-events:auto}
.float:hover{box-shadow:0 4px 10px rgba(6,34,45,.3),0 22px 42px -14px rgba(23,163,74,1)}
.float:active{transform:scale(.97)}
.float .ico{width:25px;height:25px;stroke-width:1.5}

/* ============================================================
   REVELAÇÃO NO SCROLL
   ============================================================ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rv.is-in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(20px);transition:opacity .62s var(--ez),transform .62s var(--ez)}
.stg.is-in>*{opacity:1;transform:none}
.stg.is-in>*:nth-child(1){transition-delay:0s}
.stg.is-in>*:nth-child(2){transition-delay:.055s}
.stg.is-in>*:nth-child(3){transition-delay:.11s}
.stg.is-in>*:nth-child(4){transition-delay:.165s}
.stg.is-in>*:nth-child(5){transition-delay:.22s}
.stg.is-in>*:nth-child(6){transition-delay:.275s}
.stg.is-in>*:nth-child(7){transition-delay:.33s}
.stg.is-in>*:nth-child(8){transition-delay:.385s}
.stg.is-in>*:nth-child(9){transition-delay:.44s}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .svc,.why__list,.prob{grid-template-columns:repeat(2,1fr)}
  .svc2{grid-template-columns:1fr}
  .why{grid-template-columns:1fr;gap:32px}
  .works{grid-template-columns:repeat(2,1fr)}
  .warranty,.faq,.quote{grid-template-columns:1fr;gap:30px}
  .film{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:34px}
  .warranty__list{grid-template-columns:repeat(2,1fr)}
  .quote__ways{grid-template-columns:repeat(2,1fr)}
  .form{max-width:560px}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .steps::before{display:none}
  .reviews{grid-template-columns:1fr;gap:34px}
  .score{
    grid-template-columns:auto 1fr;align-items:center;column-gap:16px;
    margin-top:24px;padding-top:22px;
  }
  .score b{grid-row:1/3}
  .score__stars{margin-top:0;align-self:end}
  .score span{margin-top:0;align-self:start}
  .cards{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:repeat(2,1fr)}
  .ft__brand{grid-column:1/-1}
  .area{grid-template-columns:1fr;gap:26px}
  .area>div{grid-row:auto}
  .area .sec__lead{padding-top:0;border-top:0}
  .about{grid-template-columns:1fr;gap:34px}
  .sec__head{grid-template-columns:1fr;align-items:start;gap:16px}
}

@media (max-width:900px){
  .hd__nav{
    position:fixed;inset:78px 0 auto;margin:0;
    display:grid;gap:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .48s var(--ez);
  }
  .hd__nav.is-open{clip-path:inset(0 0 0 0)}
  .hd__nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .hd__nav a::after{display:none}
  .hd__burger{display:block}
  .hd__cta{margin-left:auto;padding:11px 16px}
  .hd__cta span{font-size:0}
  .hd__cta .ico{width:22px;height:22px}
  .hd__brand{gap:10px}
  .hd__mark{padding:6px 9px;border-radius:9px}
  .hd__mark img{height:42px}
  .hd__name{font-size:16px}
  .hd__name em{font-size:9px;letter-spacing:.1em}
  /* faixa compacta: cada selo cabe em duas linhas curtas, para não
     empurrar o vídeo uma tela inteira para baixo */
  .seals__row{grid-template-columns:repeat(2,1fr);gap:16px 10px;padding-block:20px}
  .seals__row li{padding-inline:10px;column-gap:10px;align-items:start}
  .seals__row li:nth-child(odd){padding-left:0;border-left:0}
  .seals__row li:nth-child(3){border-left:0}
  .seals__row .ico--lg{width:22px;height:22px;margin-top:1px}
  .seals__row b{font-size:12.8px;line-height:1.2}
  .seals__row span{font-size:11.8px;line-height:1.25}
}

@media (max-width:820px){
  html{scroll-padding-top:82px}
  .hd__in{min-height:66px}
  .hd__nav{inset-block-start:66px}

  /* ORDEM DO HERO NO MOBILE: título, imagem, subtítulo, botões */
  .hero{min-height:0;display:block}
  .hero::before,.hero::after{display:none}
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:'h' 'art' 'sub' 'nota' 'acts' 'marks';
    gap:0;padding-block:26px 30px;
  }
  .hero__h1{grid-area:h}
  .hero__art{grid-area:art;position:relative;inset:auto;z-index:0;margin:18px 0 2px}
  /* mais larga que alta: a obra continua legível e o vídeo sobe quase
     uma tela inteira, que era o que mais atrasava a rolagem */
  .hero__art img{
    width:100%;height:auto;aspect-ratio:3/2;object-position:center 55%;
    border-radius:var(--r);border:1px solid var(--line);
    animation:none;
  }
  .hero__h1{font-size:clamp(29px,6.4vw,35px);line-height:1.06}
  /* a seção do vídeo encosta na faixa de selos: no celular cada folga
     dessas empurra o vídeo para longe de quem chegou do anúncio */
  #video{padding-block:32px 44px}
  #video .film__cab{margin-bottom:16px}
  .hero__sub{grid-area:sub;margin-top:16px;font-size:15.5px}
  .hero__nota{grid-area:nota;margin-top:16px;padding:12px 14px;font-size:14px}
  .hero__nota b{font-size:14.5px}
  .hero__acts{grid-area:acts;margin-top:22px;gap:10px}
  .hero__acts .btn{flex:1 1 100%;justify-content:center}
  .hero__marks{
    grid-area:marks;display:grid;grid-template-columns:1fr 1fr;
    gap:9px 14px;margin-top:20px;
  }
  .hero__marks li{font-size:12.6px;line-height:1.3;align-items:flex-start}
  .hero__marks li::before{width:14px;height:14px;margin-top:1px}
}

@media (max-width:640px){
  .svc,.steps,.prob{grid-template-columns:1fr}
  .why__list,.warranty__list,.quote__ways{grid-template-columns:1fr}
  .works{grid-template-columns:1fr;gap:16px}
  .work img{aspect-ratio:16/11}
  .works__cta{flex-direction:column;align-items:stretch}
  .works__cta p{margin:0 0 4px;max-width:none}
  .works__cta .btn{justify-content:center}
  .tira{padding:10px 0}
  .tira__lote{gap:10px;padding:0 5px}
  .tira__lote img{height:132px;border-radius:7px}
  .tira__pista{animation-duration:44s}
  /* No celular a ordem é outra: título, vídeo, botão e por último o
     texto. A pessoa vê o que é, vê a obra e já tem o WhatsApp na mão
     sem precisar ler nada antes. */
  .film{
    grid-template-columns:1fr;
    grid-template-areas:'cab' 'player' 'cta' 'sub' 'marcas';
    row-gap:0;justify-items:center;
  }
  .film__cab{width:100%;margin-bottom:20px}
  .player{width:100%;max-width:330px;margin-bottom:22px}
  .film__cta{width:100%;justify-self:stretch;justify-content:center}
  .film__sub{margin:20px 0 0;text-align:center;max-width:44ch}
  .film__marks{
    margin:22px 0 0;grid-template-columns:1fr 1fr;gap:16px 14px;width:100%;
  }
  .film__marks li{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:6px;text-align:center;justify-items:center}
  .film__marks .ico{grid-row:auto;width:24px;height:24px}
  .film__marks b{font-size:13.5px;line-height:1.25}
  .film__marks span{font-size:12.5px;line-height:1.4}
  .player__go{width:70px;height:70px}
  .player__go .ico--play{width:26px;height:26px}
  .faq summary{font-size:15.5px;padding:16px 18px;gap:12px}
  .faq details p{padding:0 18px 18px;font-size:14.5px}
  /* no celular o flutuante é a principal porta de conversão: fica maior,
     mais largo e com folga do rodapé do navegador */
  .float{
    height:58px;padding:0 24px;font-size:15.5px;
    right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    box-shadow:0 4px 12px rgba(6,34,45,.42),0 18px 34px -12px rgba(23,163,74,.95);
  }
  .float .ico{width:26px;height:26px}
  .svc__card{
    padding:22px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'ico' 'titulo' 'texto' 'acao';
    grid-template-rows:auto auto 1fr auto;
    row-gap:11px;
  }
  .svc__card h3{font-size:17.5px}
  .svc__cta{flex-direction:column;align-items:stretch}
  .svc__cta p{margin:0 0 4px;max-width:none}
  .svc__cta .btn{justify-content:center}
  .area__list{gap:20px;justify-content:space-between;width:100%}
  .area__list li{gap:8px}
  .area__list b{font-size:11px}
  .stats{grid-template-columns:repeat(2,1fr);gap:22px}
  .cta__in{flex-direction:column;align-items:stretch}
  .cta__in .btn{justify-content:center}
  .ft__grid{grid-template-columns:1fr;gap:30px}
  .ft__base{flex-direction:column;gap:6px}
  .reviews__head{display:block}
  .score{margin-top:18px}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv,.stg>*{opacity:1;transform:none}
  .truss{clip-path:none}
  .steps::before,.stat dd::before{transform:scaleX(1)}
  .player__go::before{display:none}
  /* a tira para de correr e vira rolagem na mão, senão as fotos do fim
     ficariam inalcançáveis para quem pediu menos movimento */
  .tira{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tira__pista{animation:none;width:auto}
  .tira__lote[aria-hidden="true"]{display:none}
}

@media print{
  .hd,.float,.truss,.hero__art{display:none}
  .sec--deep,.cta,.ft{background:#fff;color:#000}
}