/* ==========================================================================
   MARTOL ENERGIA SOLAR
   Direção editorial. Campos de cor alternados, escala tipográfica forte,
   fotografia com protagonismo, cantos suaves de 8px.
   Assinatura: filete âmbar + numeração de prancha + malha de módulo.
   ========================================================================== */

/* ------------------------------------------------------- 1. DESIGN SYSTEM */
:root{
  /* papel: branco levemente quente. Cinza frio lê como software, papel lê como documento. */
  --papel:#fbfaf8;
  --papel-puro:#ffffff;
  --papel-2:#f3f1ec;
  --filete:#ddd9d1;
  --filete-esc:rgba(255,255,255,.14);    /* divisória padrão sobre escuro */
  --filete-esc-2:rgba(255,255,255,.24);  /* divisória de ênfase */
  --filete-esc-3:rgba(255,255,255,.46);  /* traço de cota, precisa de presença */

  --filete-forte:#c6c0b4;

  /* tinta institucional */
  --tinta:#111e28;      /* texto e superfícies escuras */
  --tinta-campo:#0e1c26;   /* campo profundo: marcas, simulador, rodapé */
  --tinta-campo-2:#16303f; /* campo institucional: a empresa */
  --tinta-2:#48565f;
  --tinta-3:#626d76;      /* 5.04:1 no papel */
  --azul:#1c4a6b;       /* azul institucional sóbrio, para links e ênfase */

  /* âmbar: marcação estrutural, nunca campo grande */
  --ambar:#f0a91c;        /* preenchimento do botão, com texto em tinta */
  --ambar-vivo:#ffbc2e;   /* estado de foco do botão */
  --ambar-marca:#c98a12;  /* filetes e marcações sobre campo escuro */
  --ambar-forte:#91630d;  /* âmbar quando é TEXTO sobre o papel */
  --fantasma:#89847c;     /* numeração grande de apoio, 3.55:1 */

  --claro:#ffffff;
  --claro-2:#b6c2c9;
  --claro-3:#8b9aa3;

  /* tipografia: Inter em família única. Os papéis se separam por peso e
     tracking, não por família. Uma grotesca bem usada lê como engenharia. */
  --fd:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fc:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;


  /* escala tipográfica pequena. Cinco degraus, não vinte e dois. */
  --t-micro:.74rem;   /* numeração de prancha, rótulos mínimos */
  --t-rot:.8rem;      /* rótulos em caixa alta */
  --t-peq:.87rem;     /* legendas, notas, texto de apoio */
  --t-base:.96rem;    /* navegação, botões, corpo de card */
  --t-lede:clamp(1.03rem,1.38vw,1.18rem);  /* linha de leitura das seções */

  --marg:clamp(20px,5vw,60px);
  --cont:1240px;
  --cont-estreito:860px;
  --resp:clamp(76px,9.5vw,148px);

  --mordida:clamp(24px,4vw,66px);  /* o quanto o bloco de texto avanca sobre a foto da abertura */
  --r:8px;              /* canto suave. Tira a rigidez sem virar pílula. */
  --ease:cubic-bezier(.33,0,.15,1);
  --sombra:0 18px 44px -30px rgba(17,30,40,.36);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none !important}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:var(--fc);background:var(--papel);color:var(--tinta);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--tinta);color:var(--papel)}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

/* -------------------------------------------------------- 2. TIPOGRAFIA
   Inter com tracking fechado nos títulos. Uma única família, com os papéis
   separados por peso e tamanho. */
h1,h2,h3{font-family:var(--fd);color:var(--tinta);font-weight:700;line-height:1.06;letter-spacing:-.03em}
h1{font-size:clamp(2.7rem,6.4vw,5.3rem);line-height:1.02;letter-spacing:-.037em}
h2{font-size:clamp(1.95rem,4vw,3.2rem);letter-spacing:-.032em}
h3{font-size:clamp(1.18rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-.022em;line-height:1.24}
p{text-wrap:pretty}
.oculto{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:200;background:var(--tinta);color:#fff;padding:14px 22px;font-weight:600}
.pular:focus{left:0}

/* --------------------------------------- 3. ASSINATURA: filete e numeração
   Saiu o quadrado colorido antes de cada seção, que é gesto de template.
   Entrou um filete âmbar curto, que é gesto de documento impresso. */
.cel{display:inline-block;width:26px;height:2px;background:var(--ambar-marca);flex:none}
.rotulo--claro .cel,.faixa-marcas__t .cel{background:var(--ambar)}
.rotulo{
  display:flex;align-items:center;gap:14px;font-family:var(--fc);font-weight:600;
  font-size:var(--t-rot);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:26px;
}
.rotulo--claro{color:var(--claro-3)}

/* numeração de prancha no canto, como projeto de engenharia */
.prancha{
  position:absolute;top:clamp(26px,3.4vw,46px);right:var(--marg);
  font-family:var(--fc);font-weight:500;font-size:var(--t-micro);letter-spacing:.24em;
  color:var(--tinta-3);pointer-events:none;
}
.prancha--claro{color:rgba(182,194,201,.32)}

/* ---------------------------------------------------------- 4. ESTRUTURA */
.cont{width:100%;max-width:var(--cont);margin-inline:auto;padding-inline:var(--marg)}
.cont--estreito{max-width:var(--cont-estreito)}
.secao{position:relative;padding-block:var(--resp)}

/* ------------------------------------------------------------ 5. BOTÕES
   Primário em âmbar com texto em tinta, canto suave de 8px. O secundário é
   vazado. O âmbar é a cor de ação da marca e só aparece em botão. */
.bt{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 28px;border-radius:var(--r);
  font-family:var(--fc);font-weight:600;font-size:var(--t-base);letter-spacing:.005em;
  cursor:pointer;border:1.5px solid transparent;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.bt .ico{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.bt:hover .ico{transform:translateX(2px)}
.bt--ambar{background:var(--ambar);color:var(--tinta);border-color:var(--ambar)}
.bt--ambar:hover{background:var(--ambar-vivo);border-color:var(--ambar-vivo)}
.bt--vazado{border-color:var(--filete-forte);color:var(--tinta);background:transparent}
.bt--vazado:hover{border-color:var(--tinta);background:var(--tinta);color:var(--claro)}
.bt--linha{border-color:var(--filete-forte);color:var(--tinta);background:transparent}
.bt--linha:hover{border-color:var(--tinta);background:var(--tinta);color:var(--claro)}
.bt--p{padding:11px 20px;font-size:var(--t-peq)}
.bt--g{padding:19px 34px;font-size:1rem}
.bt--cheio{width:100%}
@media (pointer:coarse){
  .bt{min-height:48px}
  .marca{min-height:46px}
  .menu a,.rodape__nav a,.rodape__contato a{min-height:44px;display:flex;align-items:center}
  .rodape__nav,.rodape__contato{gap:0}
  .sim .sim__range{height:44px}
  .ficha dd a,.fecho__wa a{display:inline-block;padding-block:11px}
  .empresa__maps{padding-block:15px}
  .link-seta{min-height:44px;padding-bottom:10px}
}

/* link com seta */
.link-seta{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--fc);font-weight:600;
  color:var(--tinta);padding-bottom:5px;border-bottom:1.5px solid var(--ambar-marca);
  transition:gap .26s var(--ease);cursor:pointer;
}
.link-seta span{width:16px;height:1.5px;background:currentColor;position:relative;flex:none}
.link-seta span::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.link-seta:hover{gap:16px}

/* ========================================================= 6. CABEÇALHO */
.topo{position:sticky;top:0;z-index:90;background:var(--papel);transition:box-shadow .3s var(--ease)}
.topo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filete);opacity:0;transition:opacity .3s var(--ease)}
.topo.fixo::after{opacity:1}
.topo.fixo{box-shadow:0 1px 20px -8px rgba(6,23,38,.16)}
.topo__in{max-width:var(--cont);margin-inline:auto;padding:15px var(--marg);display:flex;align-items:center;gap:clamp(14px,3vw,40px)}
.marca{display:flex;align-items:center;gap:11px;flex:none}
.marca img{width:42px;height:42px;flex:none}
.marca__nome{display:flex;flex-direction:column;font-family:var(--fd);font-weight:800;font-size:1rem;letter-spacing:.05em;line-height:1.1;color:var(--tinta)}
.marca__nome i{font-style:normal;font-family:var(--fc);font-weight:400;font-size:var(--t-micro);letter-spacing:0;color:var(--tinta-3)}

.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{position:relative;padding:10px 14px;font-size:var(--t-base);color:var(--tinta-2);transition:color .24s var(--ease)}
.menu a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--ambar);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
.menu a:hover{color:var(--tinta)}
.menu a:hover::after,.menu a.ativo::after{transform:scaleX(1)}
.menu a.ativo{color:var(--tinta);font-weight:600}
.topo__acao{display:flex;align-items:center;gap:10px;flex:none}

.hamb{display:none;width:46px;height:46px;border:1px solid var(--filete);align-items:center;justify-content:center;flex:none}
.hamb span,.hamb span::before,.hamb span::after{display:block;width:19px;height:2px;background:var(--tinta);transition:transform .28s var(--ease)}
.hamb span{position:relative}
.hamb span::before,.hamb span::after{content:'';position:absolute;left:0}
.hamb span::before{top:-6px}
.hamb span::after{top:6px}
body.aberto .hamb span{background:transparent}
body.aberto .hamb span::before{transform:translateY(6px) rotate(45deg)}
body.aberto .hamb span::after{transform:translateY(-6px) rotate(-45deg)}

.gaveta{position:fixed;inset:76px 0 0;z-index:89;background:var(--papel);padding:28px var(--marg) 40px;display:flex;flex-direction:column;gap:28px;opacity:0;visibility:hidden;transition:opacity .26s var(--ease),visibility .26s}
body.aberto .gaveta{opacity:1;visibility:visible}
.gaveta nav{display:flex;flex-direction:column}
.gaveta a:not(.bt){font-family:var(--fd);font-weight:600;font-size:1.28rem;letter-spacing:-.02em;padding:17px 0;border-bottom:1px solid var(--filete)}

/* ======================================================== 7. ABERTURA */
.abertura{position:relative;padding-block:clamp(36px,4.6vw,72px) clamp(40px,5vw,72px)}
.abertura__grade{
  display:grid;align-items:center;
  grid-template-columns:
    [borda-i] minmax(var(--marg),1fr)
    [txt-i] minmax(0,calc(var(--cont)*.52))
    [meio] minmax(0,calc(var(--cont)*.48))
    [borda-f] minmax(var(--marg),1fr);
}
/* a chamada tem tres linhas: corpo proprio, menor que o h1 geral */
.abertura h1{font-size:clamp(2.4rem,5vw,4.6rem)}
.abertura__texto{grid-column:txt-i / meio;position:relative;z-index:2;background:var(--papel);padding-right:var(--mordida);margin-right:calc(var(--mordida) * -1)}
.abertura h1 em{font-style:normal;position:relative;white-space:nowrap}
.abertura h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.1em;height:.14em;background:var(--ambar);z-index:-1;transform:scaleX(0);transform-origin:0 50%;animation:tracoEntra .9s var(--ease) .35s forwards}
@keyframes tracoEntra{to{transform:scaleX(1)}}
.abertura__sub{font-size:var(--t-lede);color:var(--tinta-2);max-width:44ch;margin-top:28px;line-height:1.62}
.abertura__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* a fotografia sangra até a borda direita da tela: é ela que dá o protagonismo */
.abertura__foto{grid-column:meio / -1;position:relative}
.abertura__foto img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%}
.abertura__foto figcaption{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  padding-left:calc(var(--mordida) + 2px);
  font-size:var(--t-peq);color:var(--tinta-3);
}

.credenciais{
  list-style:none;max-width:var(--cont);margin:clamp(44px,5.5vw,76px) auto 0;padding-inline:var(--marg);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.credenciais li{padding:24px 30px 0 0;border-top:2px solid var(--tinta)}
.credenciais li + li{padding-left:30px;border-left:1px solid var(--filete)}
.credenciais b{display:block;font-family:var(--fd);font-weight:700;font-size:1.04rem;letter-spacing:-.018em;color:var(--tinta)}
.credenciais span{display:block;font-size:var(--t-base);color:var(--tinta-2);margin-top:7px;line-height:1.5;max-width:30ch}

/* ==================================================== 8. FAIXA DE MARCAS */
.faixa-marcas{position:relative;background:var(--tinta-campo);color:var(--claro);padding-block:52px 58px;overflow:hidden}
.faixa-marcas::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:104px 104px}
.faixa-marcas__t{position:relative;display:flex;align-items:center;gap:11px;font-size:var(--t-rot);letter-spacing:.1em;text-transform:uppercase;color:var(--claro-3);margin-bottom:30px}
.desliza{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.desliza__pista{display:flex;align-items:center;width:max-content;animation:corre 62s linear infinite}
@keyframes corre{to{transform:translateX(-50%)}}
.desliza:hover .desliza__pista{animation-play-state:paused}
.mrc{display:flex;align-items:center;gap:12px;flex:none;padding-inline:clamp(28px,3.6vw,54px);color:var(--claro-2);border-left:1px solid var(--filete-esc);transition:color .3s var(--ease)}
.mrc:hover{color:var(--claro)}
.mrc__logo{height:24px;width:auto;max-width:110px;object-fit:contain;flex:none;filter:brightness(0) invert(1);opacity:.72;transition:opacity .3s var(--ease)}
.mrc:hover .mrc__logo{opacity:1}
.mrc b{font-family:var(--fd);font-weight:700;font-size:1.1rem;letter-spacing:.01em;white-space:nowrap}
.mrc--com-logo b{font-size:var(--t-base);color:var(--claro-3)}
@media (prefers-reduced-motion:reduce){
  .desliza{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .desliza__pista{animation:none;flex-wrap:wrap;width:auto}
}

/* ========================================================== 9. O CUSTO */
.custo__topo{margin-bottom:clamp(48px,6vw,80px)}
.custo__topo h2{max-width:17ch}
.custo__nucleo{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:end;padding-bottom:clamp(44px,5vw,64px);border-bottom:2px solid var(--tinta)}
.cifra{display:flex;align-items:baseline;gap:14px}
.cifra__n{
  font-family:var(--fd);font-weight:800;line-height:.84;letter-spacing:-.042em;color:var(--tinta-campo-2);
  font-size:clamp(3.6rem,12vw,11.5rem);display:block;white-space:nowrap;
}
.cifra__u{font-family:var(--fd);font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);color:var(--tinta-3);letter-spacing:-.01em}
.custo__texto p{font-size:var(--t-lede);color:var(--tinta-2);max-width:46ch;line-height:1.62}
.custo__texto b{color:var(--tinta);font-weight:600}
.custo__nota{margin-top:18px;padding-left:20px;border-left:3px solid var(--ambar);font-size:1rem !important;color:var(--tinta) !important}

.serie{margin-top:clamp(44px,5vw,68px)}
.serie__t{font-family:var(--fd);font-weight:600;font-size:var(--t-base);color:var(--tinta);margin-bottom:26px}
.serie__plot{display:flex;align-items:flex-end;gap:clamp(8px,1.6vw,20px);height:clamp(150px,20vw,230px)}
.serie__b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.serie__b i{display:block;width:100%;background:var(--filete);height:0;transition:height .8s var(--ease)}
.serie__b em{font-style:normal;font-size:var(--t-rot);color:var(--tinta-3);padding-top:12px;border-top:1px solid var(--filete);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serie.vis .serie__b i{height:var(--h)}
.serie.vis .serie__b:nth-child(2) i{transition-delay:.07s}
.serie.vis .serie__b:nth-child(3) i{transition-delay:.14s}
.serie.vis .serie__b:nth-child(4) i{transition-delay:.21s}
.serie.vis .serie__b:nth-child(5) i{transition-delay:.28s}
.serie.vis .serie__b:nth-child(6) i{transition-delay:.42s}
.serie__b--solar i{background:var(--ambar)}
.serie__b--solar em{color:var(--tinta);font-weight:600}
.serie__nota{margin-top:22px;font-size:var(--t-peq);color:var(--tinta-3);max-width:70ch;line-height:1.55}

/* ============================================ 10. CAMPO AZUL: manifesto + simulador */
.campo-azul{position:relative;background:var(--tinta-campo);color:var(--claro);overflow:hidden}
.campo-azul::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:104px 104px}
.campo-azul h2{color:var(--claro)}

.manifesto{position:relative;padding-block:clamp(84px,11vw,170px) clamp(60px,7vw,100px)}
.manifesto__frase{
  font-family:var(--fd);font-weight:700;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(2.1rem,4.8vw,3.9rem);color:var(--claro);max-width:17ch;
}
.manifesto__frase em{font-style:normal;color:var(--ambar)}
.manifesto__pe{margin-top:30px;font-size:var(--t-lede);color:var(--claro-2);max-width:40ch}

/* ------------------------------------------------------------- o instrumento
   O painel é lido como uma prancha: moldura em filete, cantos marcados e
   uma coluna de leitura separada da coluna de controle por um eixo. */
.simulador{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(84px,10vw,150px)}
.sim{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  border:1px solid var(--filete-esc);
}
/* marcas de canto, gesto de prancha técnica */
.sim::before,.sim::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none}
.sim::before{top:-1px;left:-1px;border-top:2px solid var(--ambar);border-left:2px solid var(--ambar)}
.sim::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--ambar);border-right:2px solid var(--ambar)}

.sim__controle{padding:clamp(28px,3.4vw,48px);border-right:1px solid var(--filete-esc)}
.sim__saida{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column}
.sim__controle h2{margin-bottom:38px}
.sim__rot{display:block;font-family:var(--fc);font-weight:600;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--claro-3);margin-bottom:14px}

.sim__campo{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--ambar);padding-bottom:12px}
.sim__campo span{font-family:var(--fd);font-weight:600;font-size:1.2rem;color:var(--claro-3)}
.sim__campo input{width:100%;background:none;border:0;font-family:var(--fd);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.4rem);letter-spacing:-.035em;color:var(--claro);padding:0;font-variant-numeric:tabular-nums}
.sim__campo input::-webkit-outer-spin-button,.sim__campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sim__campo input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sim__range{width:100%;margin-top:30px;-webkit-appearance:none;appearance:none;background:none;height:26px;cursor:pointer}
.sim__range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--ambar) var(--fill,10%),var(--filete-esc-2) var(--fill,10%))}
.sim__range::-moz-range-track{height:2px;background:var(--filete-esc-2)}
.sim__range::-moz-range-progress{height:2px;background:var(--ambar)}
.sim__range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:24px;margin-top:-11px;background:var(--ambar);border:0;border-radius:2px;transition:transform .18s var(--ease)}
.sim__range:active::-webkit-slider-thumb{transform:scaleY(1.16)}
.sim__range::-moz-range-thumb{width:14px;height:24px;border-radius:2px;background:var(--ambar);border:0}
.sim__limites{display:flex;justify-content:space-between;font-size:var(--t-rot);color:var(--claro-3);margin-top:4px;font-variant-numeric:tabular-nums}
.sim__base{margin-top:30px;padding-top:22px;border-top:1px solid var(--filete-esc);font-size:var(--t-peq);color:var(--claro-3);line-height:1.55}

/* leitura principal */
.sim__principal{padding-bottom:26px;border-bottom:1px solid var(--filete-esc)}
.sim__saida .sim__rot{color:var(--claro-3)}
.sim__grande{display:flex;align-items:baseline;gap:10px;font-family:var(--fd);font-weight:700;letter-spacing:-.045em;line-height:.84;color:var(--claro)}
.sim__grande i{font-style:normal;font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:600;color:var(--claro-3);letter-spacing:0}
.sim__grande b{font-size:clamp(3.6rem,9vw,7.4rem);font-variant-numeric:tabular-nums}

/* ------------------------------------------------- a cota: a economia medida
   Três colunas alinhadas em duas linhas de grade: em cima o desenho, embaixo
   as legendas. A coluna do meio é a distância entre a conta de hoje e o que
   sobra, desenhada como linha de cota. A economia deixa de ser um número
   escrito e passa a ser um espaço medido. */
.cota{padding:30px 0;border-bottom:1px solid var(--filete-esc)}
.cota__plot,.cota__legendas{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(10px,1.6vw,22px)}
.cota__plot{height:clamp(140px,16vw,196px);align-items:end}
.cota__col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.cota__col--medida{justify-content:flex-start}

.cota__barra{display:block;width:100%}
.cota__barra--hoje{height:100%;background:var(--filete-esc);border-top:2px solid var(--filete-esc-3)}
.cota__barra--depois{height:var(--h,10%);background:var(--ambar);transition:height .55s var(--ease)}

/* linha de cota: traço nas duas pontas e eixo vertical entre elas */
.cota__medida{position:relative;display:block;width:100%;height:var(--h,90%);transition:height .55s var(--ease)}
.cota__medida::before,.cota__medida::after{content:'';position:absolute;left:calc(var(--ext,11px) * -1);right:calc(var(--ext,11px) * -1);height:1px;background:var(--filete-esc-3)}
.cota__medida::before{top:0}
.cota__medida::after{bottom:0}
.cota__pct{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  background:var(--tinta-campo);padding:5px 10px;
  font-family:var(--fd);font-style:normal;font-weight:700;font-size:clamp(.92rem,1.5vw,1.16rem);
  letter-spacing:-.02em;color:var(--ambar);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cota__col--medida::after{content:'';position:absolute;left:50%;top:0;height:var(--h,90%);width:1px;background:var(--filete-esc-2)}

.cota__legendas{margin-top:16px}
.cota__pe{display:flex;flex-direction:column;gap:3px;text-align:center}
.cota__pe b{font-family:var(--fd);font-weight:700;font-size:clamp(.95rem,1.5vw,1.14rem);letter-spacing:-.02em;color:var(--claro);font-variant-numeric:tabular-nums}
.cota__pe span{font-size:var(--t-rot);color:var(--claro-3);line-height:1.35}
.cota__pe--forte b{color:var(--ambar)}

/* leituras de apoio */
.sim__grade{display:grid;grid-template-columns:repeat(3,1fr);padding-top:6px}
.sim__grade > div{padding:24px 16px 24px 0}
.sim__grade > div + div{padding-left:16px;border-left:1px solid var(--filete-esc)}
.sim__grade dt{display:flex;flex-direction:column;gap:3px;font-size:var(--t-peq);color:var(--claro-2);margin-bottom:10px}
.sim__grade dt em{font-style:normal;font-size:var(--t-micro);color:var(--claro-3)}
.sim__grade dd{display:flex;align-items:baseline;gap:6px;font-family:var(--fd);font-weight:700;font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.03em;color:var(--claro)}
.sim__grade dd i{font-style:normal;font-size:.5em;font-weight:600;color:var(--claro-3)}
.sim__grade dd b{font-variant-numeric:tabular-nums}

.sim__saida .bt{margin-top:auto}
.sim__aviso{font-size:var(--t-peq);color:var(--claro-3);line-height:1.5;margin-top:16px}

/* ======================================================== 11. SOLUÇÕES */
.solucoes{background:var(--papel-2)}
.solucoes__topo{margin-bottom:clamp(40px,5vw,66px)}
.solucoes__topo h2{max-width:20ch}
.solucoes__grade{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:auto auto;gap:clamp(16px,2.2vw,30px)}
.obra-tipo{position:relative;display:flex;flex-direction:column;background:var(--papel)}
.obra-tipo--grande{grid-row:span 2}
.obra-tipo__img{overflow:hidden}
.obra-tipo__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.obra-tipo--grande .obra-tipo__img{flex:1;min-height:0}
.obra-tipo--grande .obra-tipo__img img{aspect-ratio:3/4}
.obra-tipo:not(.obra-tipo--grande) .obra-tipo__img img{aspect-ratio:16/9}
.obra-tipo:hover .obra-tipo__img img{transform:scale(1.035)}
.obra-tipo__txt{padding:clamp(22px,2.4vw,32px)}
.obra-tipo__n{display:block;font-family:var(--fd);font-weight:700;font-size:var(--t-peq);letter-spacing:.16em;color:var(--ambar-forte);margin-bottom:12px}
.obra-tipo__txt h3{margin-bottom:10px}
.obra-tipo__txt p{font-size:var(--t-base);color:var(--tinta-2);line-height:1.58;max-width:42ch}

/* =================================================== 11b. EQUIPAMENTO
   O produto oficial da Huawei entra como imagem principal, porque a foto da
   obra tem 640px de origem e nao aguenta ocupar meia tela. A obra real vira
   prova, em tamanho menor, onde a resolucao dela e suficiente. */
.equipamento{background:var(--papel)}
.equip__abre{margin-bottom:clamp(40px,5vw,64px)}
.equip__abre h2{max-width:16ch}
.equip__fonte{margin-top:20px;font-size:var(--t-peq);color:var(--tinta-3);max-width:62ch;line-height:1.6;padding-left:20px;border-left:2px solid var(--ambar)}

.equip__corpo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);align-items:start}

/* o produto respira sobre um campo de papel, sem moldura de card */
.equip__produto{background:var(--papel-2);padding:clamp(26px,4vw,54px);display:flex;flex-direction:column}
.equip__produto img{width:100%;height:auto;object-fit:contain}
.equip__produto figcaption{margin-top:clamp(18px,2.4vw,26px);padding-top:16px;border-top:1px solid var(--filete);font-size:var(--t-peq);color:var(--tinta-3)}

.equip__logo{height:30px;width:auto;margin-bottom:clamp(26px,3vw,38px)}

.vantagens{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--tinta)}
.vantagem{padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--filete)}
.vantagem:nth-child(2n){padding-left:clamp(20px,2.4vw,28px);padding-right:0;border-left:1px solid var(--filete)}
.vantagem dt{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.vantagem dt b{font-family:var(--fd);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.035em;line-height:1;color:var(--azul);font-variant-numeric:tabular-nums}
.vantagem dt span{font-size:var(--t-peq);color:var(--tinta-3)}
.vantagem dd{font-size:var(--t-base);color:var(--tinta-2);line-height:1.58}

/* a obra real: prova, em tamanho onde os 640px de origem se sustentam */
/* limitada a 480px: a origem tem 553px, entao acima disso ela seria esticada */
.equip__obra{margin-top:clamp(26px,3vw,36px);max-width:480px}
.equip__obra img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 42%}
.equip__obra figcaption{display:flex;align-items:center;gap:11px;margin-top:13px;font-size:var(--t-peq);color:var(--tinta-3)}

.equip__nota{margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--filete);font-size:var(--t-peq);color:var(--tinta-3);max-width:74ch;line-height:1.6}

/* ========================================================== 12. OBRAS */
.obras__topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:clamp(38px,4.6vw,60px)}
.obras__lede{font-size:var(--t-lede);color:var(--tinta-2);max-width:32ch}
.galeria{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);padding-inline:var(--marg)}
.galeria__par,.galeria__trio{display:grid;gap:clamp(10px,1.4vw,18px)}
.galeria__par{grid-template-columns:1fr 1.42fr}
.galeria__par--inv{grid-template-columns:1.42fr 1fr}
.galeria__trio{grid-template-columns:repeat(3,1fr)}
.peca{position:relative;display:block;overflow:hidden;background:var(--filete);cursor:zoom-in;border:0;text-align:left;width:100%}
.peca img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)}
.peca:hover img{transform:scale(1.04)}
.peca--heroi img{aspect-ratio:21/9}
.peca--alta img{aspect-ratio:3/4}
.peca:not(.peca--heroi):not(.peca--alta) img{aspect-ratio:4/3}
.peca__meta{
  position:absolute;left:0;right:0;bottom:0;padding:46px 22px 20px;
  display:flex;flex-direction:column;gap:3px;color:#fff;
  background:linear-gradient(180deg,rgba(6,23,38,0),rgba(6,23,38,.88));
  opacity:0;transform:translateY(8px);transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.peca:hover .peca__meta,.peca:focus-visible .peca__meta{opacity:1;transform:none}
/* no toque não existe hover, então a legenda fica sempre visível: sem isso o
   visitante de celular nunca lê o local nem o tipo da instalação */
@media (hover:none){.peca__meta{opacity:1;transform:none}}
.peca__meta b{font-family:var(--fd);font-weight:600;font-size:1rem}
.peca__meta i{font-style:normal;font-size:var(--t-peq);color:#b9cee0}
.obras__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;margin-top:clamp(38px,4.4vw,58px);padding-top:30px;border-top:2px solid var(--tinta)}
.obras__pe p{font-family:var(--fd);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.32rem);letter-spacing:-.02em;max-width:34ch}

/* ======================================================== 13. PROCESSO
   Tabela de especificação: número, etapa e descrição em colunas irmãs.
   Usa a largura inteira em vez de deixar um terço da tela vazio. */
.processo__topo{margin-bottom:clamp(44px,5vw,72px)}
.processo__topo h2{max-width:18ch}
.etapas{list-style:none;border-top:2px solid var(--tinta)}
.etapa{
  display:grid;grid-template-columns:clamp(84px,9vw,132px) minmax(0,.9fr) minmax(0,1.5fr);
  gap:clamp(18px,3.4vw,52px);align-items:baseline;
  padding-block:clamp(26px,3.2vw,40px);border-bottom:1px solid var(--filete);
  transition:background .3s var(--ease);
}
.etapa:hover{background:var(--papel-2)}
.etapa__n{font-family:var(--fd);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.6rem);letter-spacing:-.04em;line-height:.9;color:var(--fantasma);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.etapa:hover .etapa__n{color:var(--azul)}
.etapa h3{line-height:1.2}
.etapa p{font-size:var(--t-base);color:var(--tinta-2);line-height:1.62;max-width:52ch}
.etapa--fim{border-bottom:2px solid var(--ambar)}
.etapa--fim .etapa__n{color:var(--ambar-forte)}

/* ========================================================= 14. EMPRESA */
.empresa{background:var(--tinta-campo-2);color:var(--claro);overflow:hidden}
.empresa::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:104px 104px}
.empresa .cont{position:relative}
.empresa h2{color:var(--claro);max-width:26ch}
.empresa__abre{margin-bottom:clamp(44px,5.4vw,76px)}
.empresa__corpo{display:grid;grid-template-columns:.82fr 1fr .96fr;gap:clamp(24px,3.4vw,50px);align-items:start}
.empresa__foto img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ficha{display:grid;border-top:2px solid var(--ambar)}
.ficha > div{padding-block:17px;border-bottom:1px solid var(--filete-esc)}
.ficha dt{font-size:var(--t-rot);letter-spacing:.1em;text-transform:uppercase;color:var(--claro-3);margin-bottom:7px}
.ficha dd{font-family:var(--fd);font-weight:600;font-size:1.06rem;letter-spacing:-.015em;color:var(--claro);line-height:1.35}
.ficha a{border-bottom:1.5px solid var(--ambar);cursor:pointer;transition:color .24s var(--ease)}
.ficha a:hover{color:var(--ambar)}
.prova{margin-top:26px;padding:22px 0 0;border-top:1px solid var(--filete-esc)}
.prova__t{display:block;font-family:var(--fd);font-weight:600;font-size:1.02rem;color:var(--claro);margin-bottom:9px}
.prova p{font-size:var(--t-base);color:var(--claro-2);line-height:1.6}
.prova__cit{font-family:var(--fd);font-weight:600;font-size:1.06rem;line-height:1.5;color:var(--claro);letter-spacing:-.015em}
.prova__aut{display:block;margin-top:12px;font-family:var(--fc);font-weight:400;font-size:var(--t-peq);color:var(--claro-3)}
/* o mapa precisa pertencer ao campo escuro, não furá-lo com um retângulo
   branco. A inversão devolve um mapa escuro com as vias em tom claro. */
.empresa__mapa iframe{width:100%;aspect-ratio:3/4;border:0;
  filter:invert(.92) hue-rotate(185deg) saturate(.42) contrast(.92) brightness(1.04)}
.empresa__maps{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--filete-esc);font-family:var(--fd);font-weight:600;font-size:var(--t-base);transition:color .24s var(--ease)}
.empresa__maps::after{content:'';width:14px;height:14px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .28s var(--ease)}
.empresa__maps:hover{color:var(--ambar)}
.empresa__maps:hover::after{transform:rotate(45deg) translate(3px,-3px)}

/* ======================================================= 15. PERGUNTAS */
.perguntas__grade{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,5vw,86px);align-items:start}
.perguntas__lado{position:sticky;top:120px}
.perguntas__lado h2{margin-bottom:26px}
.perguntas__ajuda{font-size:1rem;color:var(--tinta-2);margin-bottom:14px}
.perguntas__lista{border-top:2px solid var(--tinta)}
.qa{border-bottom:1px solid var(--filete)}
.qa summary{display:flex;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-family:var(--fd);font-weight:600;font-size:clamp(1.04rem,1.5vw,1.2rem);letter-spacing:-.02em;color:var(--tinta);transition:color .24s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--azul)}
.qa__sinal{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.qa__sinal::before,.qa__sinal::after{content:'';position:absolute;background:var(--ambar-forte);transition:transform .28s var(--ease),opacity .2s}
.qa__sinal::before{top:6px;left:0;width:14px;height:2px}
.qa__sinal::after{left:6px;top:0;width:2px;height:14px}
.qa[open] .qa__sinal::after{transform:scaleY(0);opacity:0}
.qa__corpo{padding-bottom:26px}
.qa__corpo p{color:var(--tinta-2);max-width:62ch;line-height:1.66}

/* ====================================================== 16. FECHAMENTO
   Campo de tinta, não campo amarelo. O âmbar aparece só no filete e no botão,
   que é onde a ação de fato acontece. */
.fecho{position:relative;background:var(--tinta-campo);color:var(--claro);padding-block:var(--resp);overflow:hidden}
.fecho::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:104px 104px}
.fecho__grade{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(38px,6vw,92px);align-items:start}
.fecho h2{color:var(--claro);font-size:clamp(2.2rem,5vw,4rem)}
.fecho__sub{font-size:var(--t-lede);color:var(--claro-2);max-width:38ch;margin-top:26px;line-height:1.62}
.fecho__wa{margin-top:26px;padding-top:22px;border-top:1px solid var(--filete-esc);font-size:1rem;color:var(--claro-3)}
.fecho__wa a{font-family:var(--fd);font-weight:600;font-size:1.24rem;color:var(--claro);border-bottom:1.5px solid var(--ambar);cursor:pointer;transition:color .24s var(--ease)}
.fecho__wa a:hover{color:var(--ambar-vivo)}

/* o formulário é uma folha branca sobre o campo escuro */
.fecho__form{background:var(--papel-puro);padding:clamp(28px,3.6vw,44px);display:flex;flex-direction:column;gap:18px;color:var(--tinta)}
.campo{display:flex;flex-direction:column;gap:9px}
.campo span{font-family:var(--fc);font-weight:600;font-size:var(--t-rot);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.campo input{background:transparent;border:0;border-bottom:1.5px solid var(--filete);padding:11px 2px;font-size:1.06rem;color:var(--tinta);transition:border-color .24s var(--ease)}
.campo input::placeholder{color:#a7a196}
.campo input:focus{outline:none;border-bottom-color:var(--ambar)}
.fecho__form .bt{margin-top:10px}
.fecho__nota{font-size:var(--t-peq);color:var(--tinta-3);line-height:1.55}

/* ========================================================== 17. RODAPÉ */
.rodape{position:relative;background:var(--tinta-campo);color:var(--claro-2);overflow:hidden}
.rodape::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:104px 104px}
.rodape__topo{position:relative;display:grid;grid-template-columns:1.4fr .9fr 1.1fr;gap:clamp(28px,4vw,64px);padding-block:clamp(52px,6vw,80px) clamp(36px,4vw,54px)}
.rodape__marca img{width:46px;height:46px;margin-bottom:18px}
.rodape__marca p{font-size:var(--t-base);line-height:1.6;max-width:32ch}
.rodape__t{font-family:var(--fd);font-weight:600;font-size:var(--t-rot);letter-spacing:.12em;text-transform:uppercase;color:var(--claro-3);margin-bottom:16px}
.rodape__nav,.rodape__contato{display:flex;flex-direction:column;gap:11px}
.rodape__nav a,.rodape__contato a{font-size:var(--t-base);transition:color .24s var(--ease);cursor:pointer;width:fit-content}
.rodape__nav a:hover,.rodape__contato a:hover{color:var(--ambar)}
.rodape__base{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--filete-esc);padding-block:22px 30px;font-size:var(--t-peq);color:var(--claro-3)}

/* ================================================= 18. WHATSAPP FIXO */
.wa-fixo{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:88;
  display:inline-flex;align-items:center;gap:11px;padding:13px 20px 13px 15px;
  background:var(--papel);border:1px solid var(--filete);
  color:var(--tinta);cursor:pointer;font-family:var(--fd);font-weight:600;font-size:var(--t-base);
  box-shadow:var(--sombra);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,border-color .24s var(--ease);
}
.wa-fixo.vis{opacity:1;visibility:visible;transform:none}
.wa-fixo:hover{border-color:var(--tinta)}
.wa-fixo svg{width:27px;height:27px;flex:none}

/* ========================================================== 19. LENTE */
.lente{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(6,23,38,.96);padding:clamp(16px,4vw,56px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease),visibility .26s}
.lente.vis{opacity:1;visibility:visible;pointer-events:auto}
.lente__f{max-width:min(94vw,1060px);display:flex;flex-direction:column;gap:16px;align-items:center}
.lente__f img{max-height:78vh;width:auto;background:#fff}
.lente__f figcaption{font-size:var(--t-base);color:var(--claro-2);text-align:center}
.lente__x,.lente__nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;background:var(--filete-esc);color:#fff;font-size:1.6rem;line-height:1;transition:background .22s var(--ease)}
.lente__x:hover,.lente__nav:hover{background:var(--filete-esc-2)}
.lente__x{top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px)}
.lente__nav{top:50%;margin-top:-24px}
.lente__nav--ant{left:clamp(10px,2.4vw,30px)}
.lente__nav--prox{right:clamp(10px,2.4vw,30px)}

/* ================================================ 20. ENTRADA NA ROLAGEM */
.rev{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rev.vis{opacity:1;transform:none}
.solucoes__grade .rev.vis:nth-child(2),.galeria__trio .rev.vis:nth-child(2),.galeria__par .rev.vis:nth-child(2){transition-delay:.07s}
.solucoes__grade .rev.vis:nth-child(3),.galeria__trio .rev.vis:nth-child(3){transition-delay:.14s}
.etapas .rev.vis:nth-child(2){transition-delay:.05s}
.etapas .rev.vis:nth-child(3){transition-delay:.1s}
.etapas .rev.vis:nth-child(4){transition-delay:.15s}
.etapas .rev.vis:nth-child(5){transition-delay:.2s}
.qa.vis:nth-child(2){transition-delay:.04s}
.qa.vis:nth-child(3){transition-delay:.08s}
.qa.vis:nth-child(4){transition-delay:.12s}
.qa.vis:nth-child(5){transition-delay:.16s}
.qa.vis:nth-child(6){transition-delay:.2s}
.solucoes__grade .rev.fim:nth-child(n),.galeria__trio .rev.fim:nth-child(n),
.galeria__par .rev.fim:nth-child(n),.etapas .rev.fim:nth-child(n),.qa.fim:nth-child(n){transition-delay:0s}

/* ====================================================== 21. RESPONSIVO */
@media (max-width:1080px){
  .menu{display:none}
  .hamb{display:flex}
  .abertura__grade{grid-template-columns:1fr;gap:0}
  .abertura__texto{grid-column:1;padding:0 var(--marg);margin:0;max-width:var(--cont);margin-inline:auto;width:100%}
  /* em coluna única a foto passa a respeitar a mesma margem do resto.
     A sangria até a borda é gesto de composição em duas colunas, não de
     coluna única, onde ela só desalinha da leitura. */
  .abertura__foto{grid-column:1;width:100%;max-width:var(--cont);margin:36px auto 0;padding-inline:var(--marg)}
  .abertura__foto img{aspect-ratio:16/10;object-position:50% 36%}
  .abertura__foto figcaption{padding-inline:0;max-width:none;margin-inline:0}
  .custo__nucleo{grid-template-columns:1fr;align-items:start;gap:26px}
  .sim{grid-template-columns:1fr}
  .sim__controle{border-right:0;border-bottom:1px solid var(--filete-esc)}
  .equip__corpo{grid-template-columns:1fr;gap:36px}
  .solucoes__grade{grid-template-columns:1fr 1fr}
  .obra-tipo--grande{grid-row:span 1;grid-column:span 2}
  .obra-tipo--grande .obra-tipo__img img{aspect-ratio:16/9}
  .empresa__corpo{grid-template-columns:1fr 1fr}
  .empresa__foto{grid-column:span 2}
  .empresa__foto img{aspect-ratio:21/9}
  .perguntas__grade{grid-template-columns:1fr;gap:36px}
  .perguntas__lado{position:static}
  .fecho__grade{grid-template-columns:1fr;gap:40px}
  .rodape__topo{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:span 2}
}
@media (max-width:700px){
  html{scroll-padding-top:74px}
  body{font-size:16.5px}
  .marca__nome i{display:none}
  .marca img{width:38px;height:38px}
  .topo__in{gap:10px;padding-block:11px}
  .prancha{display:none}
  .abertura{padding-top:26px}
  .abertura h1{font-size:clamp(1.9rem,10vw,3rem)}
  .abertura__acoes{flex-direction:column;align-items:stretch}
  /* no celular o rótulo longo precisa de folga lateral para não quebrar
     em duas linhas e deixar o ícone solto na vertical */
  .abertura__acoes .bt{width:100%}
  .bt--g{padding-inline:18px;font-size:var(--t-base)}
  .abertura__foto img{aspect-ratio:4/3}
  .credenciais{grid-template-columns:1fr;gap:0}
  .credenciais li{padding:20px 0;border-top:1px solid var(--filete)}
  .credenciais li:first-child{border-top:2px solid var(--tinta)}
  .credenciais li + li{padding-left:0;border-left:0}
  .credenciais span{max-width:none}
  .cifra__n{font-size:clamp(3.2rem,16.5vw,5rem)}
  .serie__plot{height:150px;gap:5px}
  .serie__b em{font-size:.6rem;letter-spacing:-.01em}
  .sim__grade{grid-template-columns:1fr}
  .sim__grade > div{padding:18px 0;border-bottom:1px solid var(--filete-esc)}
  .sim__grade > div + div{padding-left:0;border-left:0}
  .sim__grade dt{flex-direction:row;align-items:baseline;gap:8px;margin-bottom:6px}
  .cota__plot{height:132px;--ext:5px}
  .cota__plot,.cota__legendas{gap:8px}
  .cota__pe b{font-size:var(--t-peq)}
  .cota__pe span{font-size:var(--t-micro);line-height:1.3}
  .cota__pct{font-size:var(--t-peq);padding:4px 7px}
  .vantagens{grid-template-columns:1fr}
  .vantagem{padding:20px 0}
  .vantagem:nth-child(2n){padding-left:0;border-left:0}
  .solucoes__grade{grid-template-columns:1fr}
  .obra-tipo--grande{grid-column:span 1}
  .galeria__par,.galeria__par--inv,.galeria__trio{grid-template-columns:1fr}
  .peca--heroi img{aspect-ratio:4/3}
  .peca--alta img{aspect-ratio:4/3}
  .obras__pe{flex-direction:column;align-items:flex-start}
  .obras__pe .bt{width:100%}
  .etapa{grid-template-columns:1fr;gap:8px;padding-block:24px}
  .etapa__n{font-size:2rem;margin-bottom:4px}
  .etapa p{max-width:none}
  .empresa__corpo{grid-template-columns:1fr}
  .empresa__foto{grid-column:1}
  .empresa__foto img{aspect-ratio:4/3}
  .rodape__topo{grid-template-columns:1fr;gap:32px}
  .rodape__marca{grid-column:1}
  .wa-fixo b{display:none}
  .wa-fixo{padding:14px;gap:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;transition-delay:0ms !important}
  .rev{opacity:1;transform:none}
  .serie .serie__b i{height:var(--h)}
  .abertura h1 em::after{transform:scaleX(1)}
  .wa-fixo{opacity:1;visibility:visible;transform:none}
}