/* ==========================================================
   Avolve Engenharia Eletrica — LP engenharia-eletrica
   Base: sistema de componentes de uma LP anterior; paleta trocada no :root.
   ========================================================== */
/* Paleta Avolve — tres cores de marca informadas no briefing (#000733, #37BCEA,
   #FFFFFF); o resto e apoio derivado e esta registrado como derivado no META.
   O #37BCEA NAO vira fundo de secao inteira: so CTA, icone, numero e a palavra
   grifada do H1. Sobre branco ele nao passa em 4.5:1 para texto pequeno, entao
   texto de apoio em azul usa o tom escuro. */
:root{
  --marinho:#000733;        /* primaria: H1, titulos, texto, blocos de contraste */
  --marinho-esc:#000520;    /* derivado, so para profundidade de gradiente */
  --azul:#37BCEA;           /* destaque e conversao */
  --azul-esc:#1F9FCC;       /* hover, sugerido no briefing */
  --azul-claro:#8FDCF5;     /* derivado, para texto de apoio sobre fundo escuro */
  --gelo:#F4FAFD;           /* faixa alternada, informado no briefing */
  --branco:#FFFFFF;
  --tinta:#000733;
  --tinta-2:#5A6473;        /* derivado: cinza de texto secundario */
  --linha:#DCE7EF;          /* derivado: borda de card clara */
  --zap:#128C4B;
  --fonte:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --raio:16px;
  --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --topo:82px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);font-size:16px;line-height:1.65;color:var(--tinta);
  background:var(--branco);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.022em}
em{font-style:normal}
.container{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.container--estreito{max-width:880px}
.section{position:relative;padding:clamp(64px,8vw,110px) 0}
.progresso{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--marinho),var(--azul));transition:width .1s linear}

/* ===== reveal ===== */
[data-reveal],[data-reveal-stagger]>*{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].vis,[data-reveal-stagger].vis>*{opacity:1;transform:none}
[data-reveal-stagger].vis>*{transition-delay:calc(var(--i,0)*70ms)}
[data-reveal-stagger]>*:nth-child(1){--i:0}
[data-reveal-stagger]>*:nth-child(2){--i:1}
[data-reveal-stagger]>*:nth-child(3){--i:2}
[data-reveal-stagger]>*:nth-child(4){--i:3}
[data-reveal-stagger]>*:nth-child(5){--i:4}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger]>*{opacity:1;transform:none;transition:none}}

/* ===== botoes ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15px;border-radius:12px;padding:13px 22px;white-space:nowrap;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,color .25s}
.btn--cta{background:var(--azul);color:#fff;border:1px solid var(--azul);
  box-shadow:0 8px 22px rgba(55,188,234,.28)}
.btn--cta:hover{background:var(--azul-esc);border-color:var(--azul-esc);
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(55,188,234,.38)}
.btn--grande{padding:16px 28px;font-size:16px}
.btn--bloco{width:100%}
.btn--zap{background:var(--zap);color:#fff;border:1px solid var(--zap);
  box-shadow:0 8px 22px rgba(18,140,75,.24)}
.btn--zap:hover{background:#0f7a41;border-color:#0f7a41;transform:translateY(-2px)}
.btn--zap svg{width:19px;height:19px;flex:none}
.btn--fantasma{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn--fantasma:hover{background:rgba(255,255,255,.22);border-color:#fff}

/* ===== 01 · header, pilula flutuante ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;justify-content:center;
  padding:14px 20px;transition:padding .4s var(--ease)}
.header.rolou{padding-top:9px;padding-bottom:9px}
.header__bar{width:100%;max-width:1240px;display:flex;align-items:center;gap:18px;
  padding:10px 12px 10px 20px;border-radius:var(--pill);
  background:rgba(255,255,255,.93);border:1px solid var(--linha);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 8px 30px rgba(0,7,51,.1);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.header.rolou .header__bar{background:rgba(0,7,51,.96);border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 34px rgba(0,5,32,.3)}
.header__logo{display:inline-flex;align-items:center;flex:none}
.header__logo .logo{height:34px;width:auto;transition:height .3s var(--ease)}
.header.rolou .header__logo .logo{height:30px}
.logo--clara{display:none}
.header.rolou .logo--escura{display:none}
.header.rolou .logo--clara{display:block}
.header__drawer{display:contents}
.header__nav{display:flex;gap:4px;margin-left:auto}
.header__nav a{position:relative;font-size:14.5px;font-weight:600;color:var(--marinho);
  padding:9px 13px;border-radius:10px;transition:color .25s,background .25s}
.header__nav a::after{content:'';position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:var(--azul);border-radius:2px;transform:scaleX(0);transition:transform .3s var(--ease)}
.header__nav a:hover{background:rgba(0,7,51,.07)}
.header__nav a:hover::after,.header__nav a.atual::after{transform:scaleX(1)}
.header__nav a.atual{background:rgba(0,7,51,.09)}
.header.rolou .header__nav a{color:rgba(255,255,255,.88)}
.header.rolou .header__nav a:hover,.header.rolou .header__nav a.atual{color:#fff;background:rgba(255,255,255,.12)}
.header__tel{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;
  background:rgba(0,7,51,.06);border:1px solid var(--linha);color:var(--marinho);
  font-size:14.5px;font-weight:700;transition:background .25s,border-color .25s}
.header__tel:hover{background:rgba(0,7,51,.12);border-color:rgba(0,7,51,.3)}
.header__tel svg{width:16px;height:16px;flex:none;color:var(--azul)}
.header.rolou .header__tel{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.header.rolou .header__tel svg{color:var(--azul-claro)}
.header__cta{flex:none}
.header__burger{display:none;width:42px;height:42px;border-radius:11px;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(0,7,51,.07);border:1px solid var(--linha)}
.header__burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--marinho);
  transition:transform .3s var(--ease),opacity .25s}
.header.rolou .header__burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.header.rolou .header__burger span{background:#fff}
.header.aberto .header__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header.aberto .header__burger span:nth-child(2){opacity:0}
.header.aberto .header__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===== 02 · hero branco ===== */
.hero{position:relative;overflow:hidden;background:var(--branco);
  padding:calc(var(--topo) + clamp(40px,6vw,78px)) 0 clamp(56px,7vw,96px)}
.hero__orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(64px);
  mix-blend-mode:multiply}
.hero__orb--marinho{width:min(620px,54vw);height:min(620px,54vw);left:-14%;top:-20%;
  background:radial-gradient(circle,rgba(0,7,51,.2),rgba(0,7,51,0) 70%);
  animation:orbA 20s ease-in-out infinite alternate}
.hero__orb--azul{width:min(520px,46vw);height:min(520px,46vw);right:-6%;bottom:-24%;
  background:radial-gradient(circle,rgba(55,188,234,.22),rgba(55,188,234,0) 70%);
  animation:orbB 24s ease-in-out infinite alternate}
@keyframes orbA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12%,14%,0) scale(1.16)}}
@keyframes orbB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-14%,-12%,0) scale(1.2)}}
.hero__rede{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.45}
.hero__inner{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,3.4vw,52px);align-items:center}
.hero__copy{position:relative;z-index:3}
.rotulo{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--marinho);padding:9px 17px;border-radius:var(--pill);margin-bottom:22px;
  line-height:1.35;box-shadow:0 8px 20px rgba(0,7,51,.22)}
.hero__titulo{font-size:clamp(30px,3.7vw,50px);font-weight:900;line-height:1.06;
  color:var(--marinho);letter-spacing:-.032em;margin-bottom:22px}
.hero__titulo em{color:var(--azul)}
.hero__sub{font-size:clamp(15px,1.15vw,17.5px);color:var(--tinta-2);max-width:56ch;margin-bottom:28px}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.hero__checks{display:grid;grid-template-columns:1fr;gap:12px}
.hero__checks li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--tinta-2)}
.hero__checks li::before{content:'';flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--azul);position:relative}
.hero__checks li::after{content:'';position:absolute;width:7px;height:4px;margin-left:6px;
  border:2px solid var(--azul);border-top:none;border-right:none;transform:rotate(-45deg)}
.hero__media{display:flex;justify-content:center;min-width:0;position:relative;z-index:3}

/* placeholder de foto */
.ph{width:100%;min-height:200px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;border-radius:14px;
  background:linear-gradient(150deg,#F5F9FD,#E2ECF7);border:1px dashed rgba(0,7,51,.28)}
.ph__ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:rgba(55,188,234,.12);color:var(--azul)}
.ph__ic svg{width:26px;height:26px}
.ph__t{font-size:15px;font-weight:700;color:var(--marinho);line-height:1.35}
.ph__n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azul)}
.ph--hero{min-height:clamp(300px,36vw,440px)}

/* ===== cabecalhos ===== */
.cabeca{margin-bottom:clamp(30px,3.6vw,52px)}
.cabeca--centro{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.kicker{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul);margin-bottom:14px}
.kicker--claro{color:var(--azul-claro)}
.kicker--alerta{display:inline-block;color:#fff;background:var(--azul);
  padding:6px 14px;border-radius:var(--pill);letter-spacing:.14em}
.cabeca__titulo{font-size:clamp(27px,3.1vw,44px);font-weight:800;color:var(--marinho);margin-bottom:16px}
.cabeca__titulo em{color:var(--azul)}
.cabeca__sub{font-size:clamp(15px,1.1vw,17px);color:var(--tinta-2);max-width:66ch;
  margin-left:auto;margin-right:auto}
.secao__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(26px,3vw,42px);font-size:15.5px;color:var(--tinta-2);font-weight:600}
.secao-alt{background:var(--gelo)}

/* ===== 03 · credenciais ===== */
.secao-cred{position:relative;overflow:hidden;isolation:isolate}
.secao-cred::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(0,7,51,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,7,51,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(72% 74% at 50% 46%,#000 22%,transparent 86%);
  mask-image:radial-gradient(72% 74% at 50% 46%,#000 22%,transparent 86%);
  animation:tecDeriva 34s linear infinite}
@keyframes tecDeriva{from{background-position:0 0,0 0}to{background-position:40px 40px,40px 40px}}
.secao-cred .container{position:relative;z-index:2}
.cred__grade{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cred{position:relative;display:flex;flex-direction:column;padding:26px 22px 28px;
  border-radius:var(--raio);background:#fff;border:1px solid var(--linha);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.cred__n{position:absolute;top:14px;right:16px;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;color:rgba(0,7,51,.26);transition:color .35s var(--ease)}
.cred strong{font-size:16.5px;font-weight:800;color:var(--marinho);line-height:1.25;
  padding-right:30px;margin-bottom:8px}
.cred span{font-size:14px;color:var(--tinta-2);line-height:1.55}
.cred::after{content:'';display:block;width:32px;height:3px;border-radius:2px;margin-top:14px;
  background:var(--azul);transition:width .35s var(--ease)}
.cred:hover{transform:translateY(-6px);border-color:var(--azul);
  box-shadow:0 20px 42px rgba(0,7,51,.14)}
.cred:hover::after{width:66px}
.cred:hover .cred__n{color:var(--azul)}

/* ===== 05 · risco — MARINHO ===== */
.secao-marinho{background:linear-gradient(168deg,#0A2E6B 0%,var(--marinho) 55%,var(--marinho-esc) 100%);color:#fff}
.secao-marinho .cabeca__titulo{color:#fff}
.secao-marinho .cabeca__titulo em{color:var(--azul-claro)}
.secao-marinho .cabeca__sub{color:rgba(255,255,255,.9)}
.carrossel--risco{position:relative;overflow:hidden;padding:6px 0 4px}
.risco__trilho{display:flex;gap:18px;width:max-content;will-change:transform;
  padding:0 clamp(20px,5vw,64px)}
.risco-card{flex:0 0 clamp(268px,25vw,330px);padding:26px 24px;border-radius:var(--raio);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.risco-card:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-5px)}
.risco-card h3{font-size:18.5px;color:#fff;margin-bottom:9px}
.risco-card p{font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.6}
.risco-card--ponte{background:rgba(55,188,234,.28);border-color:var(--azul-claro)}

/* ===== 06 · solucoes ===== */
.sol__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sol-card{position:relative;display:flex;flex-direction:column;padding:30px 26px 28px;
  border-radius:var(--raio);background:linear-gradient(180deg,#fff,#F6FAFD);
  border:1px solid var(--linha);border-top:4px solid var(--azul);
  box-shadow:0 14px 34px rgba(0,7,51,.08);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.sol-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,7,51,.16)}
.sol-card--principal{border-top-width:6px}
.sol-card__num{align-self:flex-start;font-size:13px;font-weight:800;letter-spacing:.14em;
  color:#fff;background:var(--azul);padding:5px 12px;border-radius:var(--pill);margin-bottom:15px}
.sol-card h3{font-size:clamp(20px,1.8vw,25px);color:var(--marinho);margin-bottom:11px}
.sol-card>p{font-size:15px;color:var(--tinta-2);line-height:1.6;margin-bottom:17px}
.sol-card ul{border-top:1px solid var(--linha);padding-top:15px;margin-bottom:19px}
.sol-card ul li{position:relative;padding-left:25px;margin-bottom:9px;font-size:14.5px;
  font-weight:600;color:var(--tinta)}
.sol-card ul li::before{content:'';position:absolute;left:0;top:.52em;width:11px;height:11px;
  border-radius:50%;background:rgba(0,7,51,.12);box-shadow:inset 0 0 0 3px var(--azul)}
.sol-card__link{margin-top:auto;align-self:flex-start;font-size:15px;font-weight:700;
  color:var(--azul);display:inline-flex;align-items:center;gap:7px;
  border-bottom:2px solid rgba(55,188,234,.3);padding-bottom:3px;
  transition:border-color .25s,gap .25s}
.sol-card__link:hover{border-bottom-color:var(--azul);gap:12px}

/* ===== 07 · paineis, cards que se empilham no scroll ===== */
.paineis{padding:clamp(50px,6vw,84px) 0 clamp(60px,7vw,100px);background:var(--branco)}
.paineis__pilha{position:relative;counter-reset:pilha}
.painel-card{position:sticky;top:var(--topo);z-index:1;display:block;
  border-radius:24px;overflow:hidden;isolation:isolate;
  margin-bottom:24px;padding:clamp(24px,2.6vw,40px);
  max-height:calc(100dvh - var(--topo) - 18px);
  border:1px solid rgba(143,220,245,.3);box-shadow:0 24px 60px rgba(0,5,32,.3)}
.painel-card:last-child{margin-bottom:0}
.painel-card--1{background:linear-gradient(150deg,#0A2E6B 0%,var(--marinho) 56%,#001240 100%)}
.painel-card--2{background:linear-gradient(150deg,#37BCEA 0%,#14719F 56%,#0D4B6C 100%)}
.painel-card--3{background:linear-gradient(150deg,#000733 0%,#001240 56%,var(--marinho-esc) 100%)}
.painel-card::before{content:'0' counter(pilha);counter-increment:pilha;
  position:absolute;top:2px;right:22px;z-index:1;pointer-events:none;
  font-size:clamp(60px,8vw,112px);font-weight:900;line-height:1;
  color:rgba(255,255,255,.08);letter-spacing:-.05em}
.painel__tec{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(74% 76% at 50% 46%,#000 22%,transparent 88%);
  mask-image:radial-gradient(74% 76% at 50% 46%,#000 22%,transparent 88%);
  animation:tecDeriva 34s linear infinite}
.painel__scan{position:absolute;top:0;left:0;z-index:1;height:2px;width:26%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 42%,var(--azul-claro) 72%,transparent);
  animation:tecScan 8s linear infinite}
@keyframes tecScan{from{transform:translateX(-110%)}to{transform:translateX(400%)}}
.painel-card--2 .painel__scan{animation-duration:11s;animation-direction:reverse}
.painel{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(22px,3vw,46px);align-items:center;position:relative;z-index:2}
.painel--inv .painel__copy{order:2}
.painel--inv .painel__media{order:1}
.painel .kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#fff;
  letter-spacing:.13em;margin-bottom:12px;font-size:11px}
.painel .kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.painel__titulo{font-size:clamp(22px,2.2vw,32px);color:#fff;margin-bottom:12px}
.painel__titulo em{color:var(--azul-claro)}
.painel-card--2 .painel__titulo em{color:#D6F0FF}
.painel__copy>p{font-size:15px;color:rgba(255,255,255,.94);line-height:1.55}
.pilulas{margin:16px 0 18px;border-top:1px solid rgba(255,255,255,.26)}
.pilulas li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid rgba(255,255,255,.26);
  font-size:14px;color:rgba(255,255,255,.94);line-height:1.45}
.pilulas li::before{content:'';position:absolute;left:0;top:16px;width:9px;height:9px;
  border-radius:3px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.pilulas b{display:block;margin-bottom:2px;font-size:12.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:#fff}
.painel__ctas{display:flex;flex-wrap:wrap;gap:12px}
.painel-card .btn--cta{background:#fff!important;border-color:#fff!important;color:var(--marinho)!important;
  box-shadow:0 12px 28px rgba(0,5,32,.3)!important}
.painel-card .btn--cta:hover{background:var(--gelo)!important;border-color:var(--gelo)!important;
  color:var(--marinho-esc)!important}
.painel__media{position:relative;isolation:isolate;min-height:250px;display:flex}
.painel__media .ph{min-height:250px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42)}
.painel__media .ph__t{color:#fff}
.painel__media .ph__n{color:var(--azul-claro)}
.painel-card--2 .painel__media .ph__n{color:#D6F0FF}
.painel__media::after{content:'';position:absolute;inset:9px;z-index:3;pointer-events:none;
  color:rgba(255,255,255,.46);
  background:
    linear-gradient(currentColor,currentColor) 0 0/14px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1px 14px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/14px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/1px 14px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/14px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/1px 14px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/14px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/1px 14px no-repeat}

/* ===== 08 · catalogo ===== */
.cat__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  padding:24px 22px 26px;border-radius:18px;
  background:linear-gradient(165deg,#0A2E6B 0%,var(--marinho) 56%,#001240 100%);
  border:1px solid rgba(143,220,245,.3);
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.cat-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(143,220,245,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,220,245,.1) 1px,transparent 1px);
  background-size:22px 22px}
.cat-card::after{content:'';position:absolute;inset:9px;z-index:4;pointer-events:none;
  color:rgba(143,220,245,.44);transition:color .4s var(--ease);
  background:
    linear-gradient(currentColor,currentColor) 0 0/13px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/13px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/1px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/13px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/1px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/13px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/1px 13px no-repeat}
.cat-card:hover{transform:translateY(-6px);border-color:var(--azul)}
.cat-card:hover::after{color:var(--azul)}
.cat-card__tag{position:absolute;top:16px;right:16px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;color:#fff;background:var(--azul);
  padding:6px 11px;border-radius:6px;border:1px solid rgba(255,255,255,.3)}
.cat-card__tag::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.cat-card__media{margin-bottom:17px}
.cat-card__media .ph{height:180px;min-height:180px;border-radius:12px;
  background:rgba(143,220,245,.1);border:1px dashed rgba(143,220,245,.44)}
.cat-card__media .ph__t{color:rgba(255,255,255,.9)}
.cat-card h3{font-size:20px;color:#fff;margin-bottom:9px;line-height:1.22}
.cat-card>p{font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.55;margin-bottom:13px}
.cat-card__apps{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;
  color:var(--azul-claro);padding-top:12px;margin-bottom:17px;border-top:1px dashed rgba(143,220,245,.32)}
.cat-card .btn{margin-top:auto;position:relative;z-index:5;
  background:#fff!important;border-color:#fff!important;color:var(--marinho)!important;box-shadow:none!important}
.cat-card .btn:hover{background:var(--gelo)!important;border-color:var(--gelo)!important}

/* ===== 09 · por que ===== */
.secao-porque{overflow:hidden;isolation:isolate}
.porque__grade-tec{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(143,220,245,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,220,245,.1) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(76% 70% at 50% 46%,#000 22%,transparent 86%);
  mask-image:radial-gradient(76% 70% at 50% 46%,#000 22%,transparent 86%);
  animation:tecDeriva 30s linear infinite}
.porque__scan{position:absolute;top:0;left:0;z-index:1;height:2px;width:30%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--azul-claro) 40%,#fff 70%,transparent);
  animation:tecScan 7s linear infinite}
.porque__grade{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,60px);align-items:center}
.porque__marca{position:relative;display:inline-flex;align-items:center;margin-bottom:20px}
.porque__marca img{height:52px;width:auto;position:relative;z-index:2;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.34))}
.porque__palco{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(320px,130%);height:130px;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(143,220,245,.34),rgba(143,220,245,0) 72%)}
.difs{margin:24px 0 30px;display:grid;gap:11px}
.difs li{position:relative;padding-left:29px;font-size:15.5px;color:rgba(255,255,255,.94);line-height:1.5}
.difs li::before{content:'';position:absolute;left:0;top:.32em;width:18px;height:18px;
  border-radius:5px;background:rgba(143,220,245,.18)}
.difs li::after{content:'';position:absolute;left:5px;top:.62em;width:8px;height:4px;
  border:2px solid var(--azul-claro);border-top:none;border-right:none;transform:rotate(-45deg)}
.porque__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;min-height:168px;padding:28px 20px;
  border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(143,220,245,.3);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.stat::after{content:'';position:absolute;inset:8px;z-index:3;pointer-events:none;
  color:rgba(143,220,245,.42);transition:color .35s var(--ease);
  background:
    linear-gradient(currentColor,currentColor) 0 0/12px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1px 12px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/12px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/1px 12px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/12px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/1px 12px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/12px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/1px 12px no-repeat}
.stat:hover{background:rgba(255,255,255,.14);border-color:var(--azul);transform:translateY(-5px)}
.stat:hover::after{color:var(--azul)}
.stat__num{display:flex;align-items:baseline;justify-content:center;gap:4px;
  font-size:clamp(42px,4.6vw,64px);font-weight:900;line-height:1;color:var(--azul-claro);
  letter-spacing:-.035em;text-shadow:0 0 26px rgba(143,220,245,.4)}
.stat__num span{font-size:inherit;font-variant-numeric:tabular-nums}
.stat__pre{font-style:normal;font-size:.62em;font-weight:800}
.stat__rot{font-size:14px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.35;
  text-align:center;max-width:22ch}

/* ===== 10 · depoimentos ===== */
.dep__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.dep{position:relative;padding:30px 26px 26px;border-radius:var(--raio);background:#fff;
  border:1px solid var(--linha);box-shadow:0 12px 30px rgba(0,7,51,.07);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.dep::before{content:'\201C';position:absolute;top:6px;left:22px;font-size:64px;line-height:1;
  font-weight:900;color:rgba(55,188,234,.22)}
.dep:hover{transform:translateY(-5px);border-color:var(--azul);box-shadow:0 20px 44px rgba(0,7,51,.14)}
.dep__txt{position:relative;font-size:15.5px;color:var(--tinta);line-height:1.65;
  margin:22px 0 18px;font-style:italic}
.dep__nome{font-size:14.5px;font-weight:800;color:var(--marinho);
  padding-top:14px;border-top:1px solid var(--linha)}
.dep--destaque{background:linear-gradient(168deg,#fff,#EAF6FD);border-color:var(--azul);
  box-shadow:0 20px 44px rgba(55,188,234,.16)}
.dep--destaque .dep__txt{font-size:16.5px;font-weight:500}

/* ===== FAQ ===== */
.faq{display:grid;gap:12px}
.faq__item{background:#fff;border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.faq__item[open]{border-color:var(--azul);box-shadow:0 14px 32px rgba(0,7,51,.1)}
.faq__item summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;position:relative;
  font-size:16.5px;font-weight:700;color:var(--marinho);line-height:1.35}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'';position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--azul);border-bottom:2.5px solid var(--azul);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq__item p{padding:0 22px 22px;font-size:15px;color:var(--tinta-2);line-height:1.65}

/* ===== 11 · contato + formulario ===== */
.contato__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,58px);align-items:stretch}
.contato__copy{display:flex;flex-direction:column}
.contato__copy .cabeca__titulo{margin-bottom:14px;max-width:18ch}
.contato__copy .cabeca__sub{margin-left:0;max-width:46ch}
.contato__lista{margin-top:26px;display:grid;gap:12px;flex:0 0 auto}
.contato__lista li{display:flex;align-items:center;gap:15px;padding:15px 19px;border-radius:13px;
  background:linear-gradient(180deg,#fff,#F5F9FD);border:1px solid var(--linha);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.contato__lista li:hover{border-color:var(--azul);transform:translateX(4px)}
.contato__lista svg{width:21px;height:21px;flex:0 0 21px;color:var(--azul)}
.item{display:flex;flex-direction:column;gap:3px;min-width:0}
.item__rot{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8A96AA}
.item a,.item>span{font-size:15.5px;font-weight:700;color:var(--tinta);line-height:1.35;word-break:break-word}
.item a:hover{color:var(--azul)}
.contato__mapa{flex:1 1 auto;margin-top:16px;min-height:230px;border-radius:16px;overflow:hidden;
  background:var(--gelo);border:1px solid var(--linha);box-shadow:0 14px 34px rgba(0,7,51,.1)}
.contato__mapa iframe{display:block;width:100%;height:100%;min-height:230px;border:0;filter:saturate(.92)}
.contato__form{display:flex;width:100%}
.form{flex:1 1 auto;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#0A2E6B 0%,var(--marinho) 55%,var(--marinho-esc) 100%);
  border:1px solid rgba(143,220,245,.24);border-radius:20px;padding:26px 24px 24px;
  box-shadow:0 26px 60px rgba(0,5,32,.24)}
.form__cabeca{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.18)}
.form__kicker{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;background:var(--azul);padding:5px 12px;border-radius:var(--pill)}
.form__titulo{font-size:clamp(20px,1.8vw,25px);font-weight:800;color:#fff;line-height:1.2}
.form__titulo em{color:var(--azul-claro)}
.form__apoio{font-size:12.5px;color:rgba(255,255,255,.84);line-height:1.5}
.form__ok{display:none;align-items:flex-start;gap:11px;margin-bottom:16px;padding:15px 17px;
  border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  color:#fff;font-size:14.5px;line-height:1.5}
.form.enviado .form__ok{display:flex}
.form__ok-ic{font-weight:800;color:#8CFFB0}
.campo{margin-bottom:11px}
.campo-linha{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form label{display:block;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.9);margin-bottom:5px}
.form label span[aria-hidden]{color:var(--azul-claro)}
.form input,.form select,.form textarea{width:100%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:10px 13px;
  font-family:inherit;font-size:13.5px;color:#fff;
  transition:border-color .22s,background .22s,box-shadow .22s}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.45)}
.form select option{background:#001240;color:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;background:rgba(255,255,255,.14);
  border-color:var(--azul);box-shadow:0 0 0 3px rgba(55,188,234,.34)}
.form textarea{min-height:66px;resize:vertical}
.campo--check label{display:flex;align-items:flex-start;gap:9px;font-size:12px;font-weight:400;
  color:rgba(255,255,255,.84);line-height:1.5;cursor:pointer}
.campo--check input{width:auto;flex:none;margin-top:3px;accent-color:var(--azul)}
.btn--enviar{margin-top:4px;padding:14px 20px;font-size:15px;
  background:#fff!important;border-color:#fff!important;color:var(--marinho)!important}
.btn--enviar:hover{background:var(--gelo)!important;border-color:var(--gelo)!important}
.form__legal{margin-top:auto;padding-top:12px;font-size:11px;color:rgba(255,255,255,.66);
  line-height:1.5;text-align:center}
.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:#FF8A8A;background:rgba(255,138,138,.1)}

/* ===== 12 · rodape ===== */
.rodape{background:linear-gradient(168deg,var(--marinho) 0%,#001240 60%,var(--marinho-esc) 100%);
  color:#fff;padding:clamp(50px,6vw,78px) 0 26px}
.rodape__grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(26px,3vw,48px)}
.rodape__logo{height:44px;width:auto;margin-bottom:18px}
.rodape__marca p{font-size:14.5px;color:rgba(255,255,255,.84);line-height:1.65;max-width:42ch}
.rodape__social{display:flex;gap:10px;margin-top:18px}
.rodape__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.rodape__social a:hover{background:var(--azul);border-color:var(--azul);transform:translateY(-3px)}
.rodape__social svg{width:20px;height:20px}
.rodape__col h4{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-claro);margin-bottom:15px}
.rodape__col a{display:block;font-size:14.5px;color:rgba(255,255,255,.86);margin-bottom:10px;
  transition:color .25s}
.rodape__col a:hover{color:#fff}
.rodape__end{display:block;font-size:13.5px;color:rgba(255,255,255,.68);line-height:1.6;margin-top:12px}
.rodape__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px;color:rgba(255,255,255,.68)}
.rodape__pe a{color:rgba(255,255,255,.9);text-decoration:underline}
.rodape__credito{display:inline-flex;align-items:center;gap:10px}
.rodape__credito a{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.rodape__28k{height:26px;width:auto;opacity:.9;transition:opacity .25s var(--ease)}
.rodape__credito a:hover .rodape__28k{opacity:1}

/* ===== WhatsApp flutuante ===== */
.zap{position:fixed;right:20px;bottom:20px;z-index:110;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--zap);color:#fff;
  box-shadow:0 12px 30px rgba(18,140,75,.42);transition:transform .25s var(--ease)}
.zap:hover{transform:scale(1.08)}
.zap svg{width:29px;height:29px}

/* ===== responsivo ===== */
@media(max-width:1080px){
  .cred__grade{grid-template-columns:repeat(3,1fr)}
  .sol__grade,.cat__grade,.dep__grade{grid-template-columns:1fr 1fr}
  .rodape__grade{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  :root{--topo:74px}
  .header__nav{margin-left:0}
  .header__burger{display:flex;margin-left:auto}
  .header__drawer{display:block;position:absolute;left:0;right:0;top:100%;margin-top:10px;
    background:linear-gradient(180deg,var(--marinho),var(--marinho-esc));
    border:1px solid rgba(255,255,255,.16);border-radius:20px;
    box-shadow:0 26px 50px rgba(0,5,32,.42);padding:0 20px;
    max-height:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
    transition:max-height .4s var(--ease),opacity .3s,visibility .4s,padding .4s var(--ease)}
  .header.aberto .header__drawer{max-height:520px;opacity:1;visibility:visible;pointer-events:auto;
    padding:12px 20px 20px;overflow-y:auto}
  .header__nav{flex-direction:column;gap:0}
  .header__nav a,.header.rolou .header__nav a{color:#fff;font-size:16px;padding:15px 4px;
    border-radius:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .header__nav a::after{display:none}
  .header__tel,.header.rolou .header__tel{display:flex;justify-content:center;margin-top:16px;
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
  .header__tel svg,.header.rolou .header__tel svg{color:var(--azul-claro)}
  .header__cta{display:flex;width:100%;margin-top:10px;justify-content:center}
  .hero__inner,.painel,.porque__grade,.contato__grade{grid-template-columns:1fr}
  .painel--inv .painel__copy,.painel--inv .painel__media{order:0}
  .hero__copy{order:1}
  .hero__media{order:2}
  .painel-card{position:static;max-height:none;overflow:visible;padding:24px 18px;margin-bottom:16px}
  .painel__media,.painel__media .ph{min-height:210px}
  .contato__grade{align-items:start}
  .form{display:block}
  .contato__mapa{min-height:250px}
}
@media(max-width:640px){
  .cred__grade,.sol__grade,.cat__grade,.dep__grade,.porque__stats,.campo-linha,
  .rodape__grade{grid-template-columns:1fr}
  .hero__titulo{font-size:clamp(28px,7.6vw,38px)}
  .hero__acoes{flex-direction:column;align-items:stretch}
  .hero__acoes .btn{justify-content:center}
  .secao__pe{flex-direction:column;align-items:stretch;text-align:center}
  .secao__pe .btn{justify-content:center}
  .painel__ctas{flex-direction:column;align-items:stretch}
  .painel__ctas .btn{justify-content:center}
  .risco-card{flex:0 0 80vw}
  .risco__trilho{gap:14px;padding:0 16px}
  .rodape__pe{flex-direction:column;align-items:flex-start}
  .zap{width:50px;height:50px;right:14px;bottom:14px}
  .zap svg{width:26px;height:26px}
}

/* ==========================================================
   DEGRADE DE MARCA — marinho #000733 -> azul #37BCEA
   O gradiente vira a assinatura visual da pagina, e nao so cor chapada.
   ========================================================== */
:root{
  --grad:linear-gradient(135deg,var(--marinho) 0%,#0A2E6B 45%,var(--azul) 100%);
  --grad-inv:linear-gradient(135deg,var(--azul) 0%,#0A2E6B 55%,var(--marinho) 100%);
  --grad-suave:linear-gradient(135deg,rgba(0,7,51,.06) 0%,rgba(55,188,234,.12) 100%);
}

/* CTA em degrade, com brilho no hover */
.btn--cta{background:var(--grad)!important;border-color:transparent!important;
  position:relative;overflow:hidden;
  box-shadow:0 10px 26px rgba(55,188,234,.3)}
.btn--cta:hover{background:var(--grad-inv)!important;
  box-shadow:0 16px 34px rgba(55,188,234,.42)}
.btn--cta::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn--cta:hover::before{left:130%}
.btn--cta>*{position:relative;z-index:2}
/* nos cards escuros o CTA continua branco solido, que e o contraste maximo */
.painel-card .btn--cta,.cat-card .btn,.btn--enviar{background:#fff!important}
.painel-card .btn--cta:hover,.cat-card .btn:hover,.btn--enviar:hover{background:var(--gelo)!important}
.painel-card .btn--cta::before,.cat-card .btn::before,.btn--enviar::before{display:none}

/* CTA secundario do hero, sobre o branco */
.btn--fantasma-claro{background:transparent;color:var(--marinho);
  border:1px solid rgba(0,7,51,.28);position:relative}
.btn--fantasma-claro:hover{background:var(--grad-suave);border-color:var(--azul);
  color:var(--marinho);transform:translateY(-2px)}

/* rotulo e kickers no degrade */
.rotulo{background:var(--grad)!important}
.kicker--alerta{background:var(--grad-inv)!important}
.form__kicker{background:var(--grad-inv)!important}
.sol-card__num{background:var(--grad)!important}

/* barra de progresso e fio da marca */
.progresso{background:var(--grad-inv)}
.header__bar::after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:2px;
  border-radius:2px;background:var(--grad);opacity:0;transition:opacity .4s var(--ease)}
.header__bar{position:relative}
.header.rolou .header__bar::after{opacity:.9}

/* secoes escuras: gradiente na diagonal, do marinho ao azul */
/* o briefing proibe o #37BCEA como fundo de secao inteira: ele e so acento.
   Os tres blocos escuros (problema, CTA final e rodape) ficam no #000733. */
.secao-marinho{background:linear-gradient(168deg,#0A2E6B 0%,var(--marinho) 55%,var(--marinho-esc) 100%)}
.secao-porque{background:linear-gradient(135deg,var(--azul) 0%,#0A2E6B 34%,var(--marinho) 70%,var(--marinho-esc) 100%)}
.rodape{background:linear-gradient(135deg,var(--marinho) 0%,#1B3A73 40%,var(--marinho-esc) 100%)}
.rodape::before{content:'';display:block;height:3px;margin-bottom:clamp(46px,5.6vw,74px);
  background:var(--grad-inv)}
.rodape{padding-top:0}

/* cards escuros com o degrade da marca */
.painel-card--1{background:linear-gradient(150deg,var(--marinho) 0%,#0A2E6B 58%,#06225A 100%)}
.painel-card--2{background:linear-gradient(150deg,var(--azul) 0%,#1F9FCC 52%,#16558C 100%)}
.painel-card--3{background:linear-gradient(150deg,#0A2E6B 0%,var(--marinho) 56%,var(--marinho-esc) 100%)}
.cat-card{background:linear-gradient(160deg,var(--marinho) 0%,#0A2E6B 55%,#06225A 100%)}
.cat-card:hover{background:linear-gradient(160deg,#0A2E6B 0%,#2A6DB4 55%,var(--azul) 100%)}
.form{background:linear-gradient(150deg,var(--marinho) 0%,#0A2E6B 52%,#06225A 100%)}

/* secoes claras ganham um veu de degrade em vez de cinza chapado */
/* o briefing fixa a faixa alternada em #F4FAFD chapado, nao em degrade */
.secao-alt{background:var(--gelo)}
.sol-card{background:linear-gradient(160deg,#fff 0%,#F4F9FD 60%,#F4FAFD 100%)}
.sol-card{border-top:4px solid transparent;
  border-image:var(--grad-inv);border-image-slice:1}
.sol-card--principal{border-top-width:6px}
.cred{background:linear-gradient(160deg,#fff 0%,#FAFCFE 100%)}
.cred::after{background:var(--grad-inv)}
.cred:hover{border-color:transparent;
  box-shadow:0 20px 42px rgba(0,7,51,.14),0 0 0 1.5px rgba(55,188,234,.5)}
.contato__lista li{background:linear-gradient(150deg,#fff 0%,#F5FAFD 100%)}
.dep{background:linear-gradient(160deg,#fff 0%,#FAFCFE 100%)}
.dep--destaque{background:linear-gradient(160deg,#fff 0%,#E7F4FC 100%)}
.dep::before{background:linear-gradient(135deg,var(--marinho),var(--azul));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.3}
.faq__item[open]{border-color:transparent;
  box-shadow:0 14px 32px rgba(0,7,51,.1),0 0 0 1.5px rgba(55,188,234,.55)}

/* titulos: o grifo vira degrade */
.hero__titulo em,.cabeca__titulo em,.painel__titulo em{
  background:var(--grad-inv);-webkit-background-clip:text;background-clip:text;color:transparent}
.secao-marinho .cabeca__titulo em,.painel__titulo em,.form__titulo em{
  background:linear-gradient(135deg,#BFE4F7,#8FDCF5);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat__num{background:linear-gradient(135deg,#DFF1FB,var(--azul-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}

/* ==========================================================
   Manrope: a Inter tinha 900, a Manrope vai ate 800. Os pesos e o
   espacamento otico sao reajustados para o titulo nao perder impacto.
   ========================================================== */
h1,h2,h3,h4{font-weight:800}
.hero__titulo{font-weight:800;letter-spacing:-.036em;line-height:1.05}
.cabeca__titulo{font-weight:800;letter-spacing:-.026em}
.painel__titulo{font-weight:800;letter-spacing:-.024em}
.stat__num{font-weight:800;letter-spacing:-.04em}
.rodape__col h4,.kicker,.item__rot,.cat-card__apps{letter-spacing:.14em}
body{letter-spacing:-.003em}
.hero__sub,.cabeca__sub,.painel__copy>p,.dep__txt{letter-spacing:0}

/* ==========================================================
   01 · Header mais baixo — a barra estava em 75px, o conjunto em 103px
   ========================================================== */
:root{--topo:66px}
.header{padding:10px 18px}
.header.rolou{padding-top:7px;padding-bottom:7px}
.header__bar{padding:6px 8px 6px 16px;gap:12px}
.header__logo .logo{height:26px}
.header.rolou .header__logo .logo{height:23px}
.header__nav{gap:2px}
.header__nav a{font-size:13.5px;padding:7px 11px;border-radius:9px}
.header__nav a::after{left:11px;right:11px;bottom:4px}
.header__tel{padding:7px 12px;font-size:13.5px;gap:7px;border-radius:10px}
.header__tel svg{width:15px;height:15px}
.header__cta{padding:9px 16px;font-size:13.5px;border-radius:10px;gap:7px}
.header__burger{width:36px;height:36px;border-radius:9px;gap:3.5px}
.header__burger span{width:16px}
.header.aberto .header__burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.header.aberto .header__burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.header__bar::after{left:18px;right:18px}
@media(max-width:900px){
  :root{--topo:62px}
  .header{padding:9px 14px}
  .header__bar{padding:6px 8px 6px 14px}
  .header__cta{padding:13px 18px;font-size:15px}
}

/* ==========================================================
   06 · O que fazemos — cards no degrade azul, cantos mais generosos
   ========================================================== */
.sol-card{
  background:linear-gradient(155deg,var(--marinho) 0%,#0A2E6B 52%,#1E6FA8 100%)!important;
  border:1px solid rgba(143,220,245,.3)!important;border-top:1px solid rgba(143,220,245,.3)!important;
  border-image:none!important;
  border-radius:26px;padding:32px 28px 30px;
  box-shadow:0 18px 42px rgba(0,5,32,.24);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
/* o card do meio puxa mais o azul, para o degrade ler como conjunto */
.sol-card:nth-child(2){background:linear-gradient(155deg,#0A2E6B 0%,#1F9FCC 52%,var(--azul) 100%)!important}
.sol-card:nth-child(3){background:linear-gradient(155deg,#1A3F79 0%,var(--marinho) 52%,#0A2E6B 100%)!important}
/* malha fina, coerente com os demais blocos escuros */
.sol-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(143,220,245,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,220,245,.1) 1px,transparent 1px);
  background-size:24px 24px}
.sol-card:hover{transform:translateY(-8px);border-color:var(--azul-claro)!important;
  box-shadow:0 30px 60px rgba(0,5,32,.34)}

.sol-card__num{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.34);
  color:#fff!important;border-radius:999px;padding:6px 14px}
.sol-card h3{color:#fff}
.sol-card>p{color:rgba(255,255,255,.92)}
.sol-card ul{border-top-color:rgba(255,255,255,.26)}
.sol-card ul li{color:#fff}
.sol-card ul li::before{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 3px var(--azul-claro)}
.sol-card__link{color:#fff;border-bottom-color:rgba(255,255,255,.44)}
.sol-card__link:hover{color:#fff;border-bottom-color:#fff}
.sol-card--principal{border-top-width:1px!important}
@media(max-width:640px){.sol-card{border-radius:22px;padding:26px 22px 24px}}

/* ==========================================================
   01 · Header mais estreito e centralizado — pilula compacta, nao faixa
   ========================================================== */
.header__bar{width:auto;max-width:min(980px,calc(100% - 24px));margin:0 auto}
.header__nav{margin-left:0}
.header__bar{gap:10px}
.header__logo{margin-right:6px}
@media(max-width:1080px){
  .header__bar{max-width:min(880px,calc(100% - 20px))}
}
@media(max-width:900px){
  .header__bar{width:100%;max-width:100%;margin:0}
}

/* ==========================================================
   01 · Header: altura de volta ao original, largura continua estreita
   ========================================================== */
:root{--topo:82px}
.header{padding:14px 20px}
.header.rolou{padding-top:9px;padding-bottom:9px}
.header__bar{padding:10px 12px 10px 20px;gap:16px}
.header__logo .logo{height:34px}
.header.rolou .header__logo .logo{height:30px}
.header__nav{gap:3px}
.header__nav a{font-size:14.5px;padding:9px 13px;border-radius:10px}
.header__nav a::after{left:13px;right:13px;bottom:5px}
.header__tel{padding:9px 14px;font-size:14px;gap:8px;border-radius:11px}
.header__tel svg{width:16px;height:16px}
.header__burger{width:42px;height:42px;border-radius:11px;gap:4px}
.header__burger span{width:18px}
.header.aberto .header__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header.aberto .header__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.header__bar::after{left:22px;right:22px}

/* CTA do header: proporcional a barra, com o degrade legivel e sem apertar o texto */
.header__cta{padding:12px 22px!important;font-size:14.5px!important;font-weight:700;
  border-radius:var(--pill);gap:9px;line-height:1;
  box-shadow:0 8px 20px rgba(55,188,234,.32)}
.header__cta:hover{box-shadow:0 12px 26px rgba(55,188,234,.44)}

@media(max-width:1080px){
  .header__bar{max-width:min(940px,calc(100% - 20px))}
  .header__nav a{padding:9px 11px;font-size:14px}
}
@media(max-width:900px){
  :root{--topo:74px}
  .header{padding:12px 16px}
  .header__bar{padding:9px 10px 9px 16px}
  .header__cta{width:100%;justify-content:center;padding:14px 20px!important;font-size:15px!important}
}

/* ==========================================================
   01 · No scroll a barra fica marinho: o CTA em degrade azul perde
   contraste contra ela. Passa a branco solido com texto marinho.
   ========================================================== */
.header.rolou .header__cta{
  background:#FFFFFF!important;background-image:none!important;
  border-color:#FFFFFF!important;color:var(--marinho)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22)!important}
.header.rolou .header__cta:hover{
  background:var(--gelo)!important;border-color:var(--gelo)!important;
  color:var(--marinho-esc)!important;
  box-shadow:0 12px 26px rgba(0,0,0,.3)!important}
/* o brilho que passa no CTA some no estado branco, senao vira um borrao */
.header.rolou .header__cta::before{display:none}

/* ==========================================================
   02 · Os checks saem da coluna de texto e viram uma FAIXA DE RETANGULOS
   na borda inferior do hero, funcionando como credencial de transicao.
   ========================================================== */
.hero{padding-bottom:0}
.hero__faixa{position:relative;z-index:3;
  margin-top:clamp(38px,5vw,66px);
  padding-bottom:clamp(30px,4vw,48px)}
.hero__checks{display:grid!important;grid-template-columns:repeat(4,1fr);gap:14px}
.hero__checks li{position:relative;display:flex;align-items:center;gap:13px;
  padding:20px 20px;border-radius:16px;
  background:linear-gradient(150deg,#fff 0%,#F4F9FD 100%);
  border:1px solid var(--linha);
  box-shadow:0 12px 30px rgba(0,7,51,.08);
  font-size:15px;font-weight:700;color:var(--marinho);line-height:1.3;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.hero__checks li:hover{transform:translateY(-5px);border-color:transparent;
  box-shadow:0 20px 42px rgba(0,7,51,.15),0 0 0 1.5px rgba(55,188,234,.55)}
/* o marcador vira um selo com o degrade da marca */
.hero__checks li::before{content:'';flex:0 0 30px;width:30px;height:30px;border-radius:10px;
  border:0;background:var(--grad-inv);box-shadow:0 6px 14px rgba(55,188,234,.3)}
.hero__checks li::after{content:'';position:absolute;left:29px;width:9px;height:5px;margin-left:0;
  border:2.5px solid #fff;border-top:none;border-right:none;transform:rotate(-45deg);
  border-radius:1px}
@media(max-width:1080px){.hero__checks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .hero__checks{grid-template-columns:1fr;gap:10px}
  .hero__checks li{padding:16px 16px;font-size:14.5px}
  .hero__checks li::before{flex:0 0 26px;width:26px;height:26px;border-radius:9px}
  .hero__checks li::after{left:25px}
}

/* ==========================================================
   03 · Credenciais como CARTAS EMPILHADAS
   Em repouso as cinco ficam sobrepostas, como um baralho fechado.
   Ao passar o mouse na faixa, elas se abrem; ao passar numa carta,
   ela vem para a frente. Sem hover (toque), abrem por padrao.
   ========================================================== */
@media (hover:hover) and (min-width:901px){
  .cred__grade{display:flex;grid-template-columns:none;gap:0;
    justify-content:center;align-items:stretch;
    padding:14px 0 22px;perspective:1200px}
  .cred{flex:0 0 clamp(210px,19vw,248px);
    /* sobreposicao: cada carta entra por baixo da anterior */
    margin-left:clamp(-118px,-9vw,-96px);
    transform-origin:bottom center;
    transition:margin .5s var(--ease),transform .5s var(--ease),
               box-shadow .5s var(--ease),border-color .35s var(--ease),z-index 0s}
  .cred:first-child{margin-left:0}
  /* leve leque, para ler como baralho e nao como coluna */
  .cred:nth-child(1){transform:rotate(-3.2deg) translateY(4px);z-index:1}
  .cred:nth-child(2){transform:rotate(-1.6deg) translateY(1px);z-index:2}
  .cred:nth-child(3){transform:rotate(0deg);z-index:3}
  .cred:nth-child(4){transform:rotate(1.6deg) translateY(1px);z-index:4}
  .cred:nth-child(5){transform:rotate(3.2deg) translateY(4px);z-index:5}
  .cred{box-shadow:0 14px 34px rgba(0,7,51,.14)}

  /* baralho aberto quando o mouse entra na faixa */
  .cred__grade:hover .cred{margin-left:12px;transform:rotate(0deg) translateY(0)}
  .cred__grade:hover .cred:first-child{margin-left:0}

  /* a carta sob o cursor sobe e vem para a frente */
  .cred__grade:hover .cred:hover{transform:translateY(-12px) scale(1.05);z-index:20;
    border-color:transparent;
    box-shadow:0 30px 60px rgba(0,7,51,.2),0 0 0 1.5px rgba(55,188,234,.6)}

  /* em repouso a descricao fica escondida: a carta fechada mostra so o titulo */
  .cred span{max-height:0;opacity:0;overflow:hidden;
    transition:max-height .45s var(--ease),opacity .3s var(--ease),margin .45s var(--ease)}
  .cred__grade:hover .cred span{max-height:140px;opacity:1;margin-top:2px}
}
/* sem hover (toque) e no mobile: grade normal, tudo visivel */
@media (hover:none),(max-width:900px){
  .cred span{max-height:none;opacity:1}
}

/* ==========================================================
   07 · Paineis em largura total da tela
   A pilha escapa do container central; o conteudo de cada card mantem
   a largura de leitura por dentro, senao o texto atravessaria a tela.
   ========================================================== */
.paineis{overflow-x:clip}
.paineis__pilha{max-width:100%;width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0}
.painel-card{border-radius:0;border-left:0;border-right:0;margin-bottom:0;
  padding:clamp(30px,4vw,64px) clamp(20px,5vw,64px)}
.painel-card:last-child{margin-bottom:0}
/* o miolo volta a largura de leitura */
.painel-card .painel{max-width:1240px;margin:0 auto}
.painel-card::before{right:clamp(20px,5vw,64px)}
@media(max-width:900px){
  .painel-card{padding:26px 18px}
}

/* ==========================================================
   05 · Carrossel em ANEL 3D
   As cartas ficam distribuidas num cilindro: a da frente encara o leitor,
   as laterais giram para o fundo. O JS so troca o indice ativo.
   ========================================================== */
.anel{position:relative;width:100%;
  height:clamp(330px,34vw,400px);
  perspective:1400px;perspective-origin:50% 45%;
  margin-top:clamp(10px,2vw,26px)}
.anel__palco{position:absolute;inset:0;transform-style:preserve-3d}
.anel .risco-card{position:absolute;top:50%;left:50%;
  width:clamp(268px,26vw,340px);
  margin:0;padding:28px 26px;border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform-style:preserve-3d;will-change:transform,opacity;
  transition:transform .7s var(--ease),opacity .7s var(--ease),
             box-shadow .7s var(--ease),border-color .5s var(--ease)}
.anel .risco-card h3{font-size:19px;color:#fff;margin-bottom:10px;line-height:1.24}
.anel .risco-card p{font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.6}
/* a carta da frente ganha corpo e contorno */
.anel .risco-card.frente{
  background:linear-gradient(155deg,rgba(255,255,255,.24),rgba(255,255,255,.1));
  border-color:rgba(255,255,255,.6);
  box-shadow:0 40px 80px rgba(6,20,44,.5)}
.anel .risco-card--ponte{background:linear-gradient(155deg,rgba(55,188,234,.4),rgba(55,188,234,.18))}
.anel .risco-card--ponte.frente{background:linear-gradient(155deg,rgba(55,188,234,.55),rgba(55,188,234,.3));
  border-color:var(--azul-claro)}
/* piso refletindo o anel, para dar chao ao 3d */
.anel::after{content:'';position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:min(620px,80%);height:36px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0) 72%);filter:blur(6px)}

.anel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:30;
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s var(--ease),transform .25s var(--ease)}
.anel__nav:hover{background:#fff;color:var(--marinho);transform:translateY(-50%) scale(1.08)}
.anel__nav svg{width:20px;height:20px}
.anel__nav--prev{left:clamp(8px,3vw,44px)}
.anel__nav--next{right:clamp(8px,3vw,44px)}
.anel__pontos{position:absolute;left:0;right:0;bottom:-2px;z-index:30;
  display:flex;justify-content:center;gap:8px}
.anel__pontos button{width:8px;height:8px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.34);transition:background .3s var(--ease),width .3s var(--ease)}
.anel__pontos button.ativo{background:#fff;width:26px;border-radius:999px}
@media (prefers-reduced-motion:reduce){
  .anel .risco-card{transition:none}}
@media(max-width:640px){
  .anel{height:clamp(310px,74vw,360px);perspective:900px}
  .anel .risco-card{width:min(80vw,300px);padding:24px 20px}
  .anel__nav{width:42px;height:42px}
}

/* as cartas passando de 90 graus mostravam o verso, com o texto espelhado */
.anel .risco-card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* a carta do fundo nao deve capturar clique nem aparecer por cima do texto */
.anel .risco-card[aria-hidden="true"]{filter:saturate(.9)}

/* ==========================================================
   05 · Anel 3D — correcao do achatamento
   backdrop-filter e filter criam contexto proprio e ACHATAM o elemento no
   plano: as cartas laterais colapsavam no centro em vez de girar no cilindro.
   Os dois saem; o vidro e refeito so com gradiente e borda.
   ========================================================== */
.anel .risco-card{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  filter:none!important;
  background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  transform-style:flat}
.anel .risco-card[aria-hidden="true"]{filter:none!important}
.anel .risco-card.frente{
  background:linear-gradient(155deg,rgba(255,255,255,.28),rgba(255,255,255,.12))}
.anel .risco-card--ponte{background:linear-gradient(155deg,rgba(55,188,234,.42),rgba(55,188,234,.2))}
.anel .risco-card--ponte.frente{background:linear-gradient(155deg,rgba(55,188,234,.58),rgba(55,188,234,.32))}
/* o palco precisa mesmo do preserve-3d; a sombra do chao fica fora dele */
.anel__palco{transform-style:preserve-3d!important}

.porque__lado{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.mapa-ms{position:relative;display:flex;align-items:center;justify-content:center;
  height:clamp(200px,20vw,268px);isolation:isolate}
/* o SVG e monocromatico: o filtro pinta o estado sem precisar de outro arquivo */
.mapa-ms__estado{height:100%;width:auto;
  filter:brightness(0) invert(1) opacity(.16)
         drop-shadow(0 0 1px rgba(255,255,255,.5));
  transition:filter .5s var(--ease),transform .6s var(--ease)}
.mapa-ms:hover .mapa-ms__estado{filter:brightness(0) invert(1) opacity(.26)
  drop-shadow(0 0 2px rgba(255,255,255,.7));transform:scale(1.02)}

.mapa-ms__logo{position:absolute;z-index:2;
  height:clamp(34px,3.4vw,46px);width:auto;
  top:47%;left:52%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 6px 18px rgba(6,20,44,.6))}
/* pino marcando a capital, logo abaixo da marca */
.mapa-ms__pino{position:absolute;z-index:3;top:47%;left:52%;
  width:11px;height:11px;border-radius:50%;background:var(--azul-claro);
  transform:translate(-50%,42px);
  box-shadow:0 0 0 4px rgba(143,220,245,.28),0 0 18px rgba(143,220,245,.9)}
.mapa-ms__pino::after{content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(143,220,245,.6);animation:pulsoPino 2.6s ease-out infinite}
@keyframes pulsoPino{
  0%{transform:scale(.6);opacity:.9}
  100%{transform:scale(1.9);opacity:0}}
.mapa-ms__rot{position:absolute;z-index:3;top:47%;left:52%;
  transform:translate(-50%,62px);white-space:nowrap;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--azul-claro)}
@media (prefers-reduced-motion:reduce){.mapa-ms__pino::after{animation:none}}
@media(max-width:900px){
  .mapa-ms{height:clamp(180px,42vw,230px)}
}

/* ==========================================================
   09 · Silhueta em BRANCO solido, marca em AZUL por dentro
   ========================================================== */
.mapa-ms__estado{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
  transition:transform .6s var(--ease),filter .5s var(--ease)}
.mapa-ms:hover .mapa-ms__estado{filter:brightness(0) invert(1)!important;transform:scale(1.02)}
/* a marca marinho precisa de contraste contra o branco do estado */
.mapa-ms__logo{filter:drop-shadow(0 3px 8px rgba(0,7,51,.28))}
/* pino e rotulo passam a ler sobre o branco */
.mapa-ms__pino{background:var(--azul);
  box-shadow:0 0 0 4px rgba(55,188,234,.24),0 0 14px rgba(55,188,234,.6)}
.mapa-ms__pino::after{border-color:rgba(55,188,234,.7)}
.mapa-ms__rot{color:var(--marinho);
  background:rgba(255,255,255,.9);padding:4px 10px;border-radius:999px;
  transform:translate(-50%,60px)}

/* ==========================================================
   02 · Video de rede no fundo do hero, espelhado
   O original tem a malha densa a esquerda, onde fica o texto. Espelhado,
   ela vai para a direita e a coluna de leitura fica limpa.
   ========================================================== */
.hero__video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__video video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* degrade branco puxado das bordas, para o quadro do video nao cortar seco */
.hero__veu{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 14%,rgba(255,255,255,.35) 34%,rgba(255,255,255,0) 54%),
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.3) 12%,rgba(255,255,255,0) 30%),
    linear-gradient(0deg,#fff 0%,rgba(255,255,255,.4) 10%,rgba(255,255,255,0) 28%)}
/* as orbes saem: a rede ja carrega o azul do fundo */
.hero__orb{display:none}
.hero__copy{position:relative;z-index:3}
.hero__media{position:relative;z-index:3}
@media(max-width:900px){
  .hero__veu{background:
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.55) 12%,rgba(255,255,255,.1) 36%,rgba(255,255,255,.7) 84%,#fff 100%),
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.5) 10%,rgba(255,255,255,0) 32%)}
}
@media (prefers-reduced-motion:reduce){.hero__video video{display:none}}

/* ==========================================================
   05 · Seção do risco mais curta
   ========================================================== */
.secao-risco{padding:clamp(48px,5.4vw,72px) 0 clamp(40px,4.6vw,60px)}
.secao-risco .cabeca{margin-bottom:clamp(14px,1.8vw,24px)}
.secao-risco .cabeca__titulo{font-size:clamp(25px,2.7vw,38px);margin-bottom:0}
.anel{height:clamp(250px,24vw,290px);margin-top:clamp(4px,1vw,14px)}
.anel .risco-card{padding:22px 22px}
.anel .risco-card h3{font-size:17.5px;margin-bottom:8px}
.anel .risco-card p{font-size:14px;line-height:1.55}
.anel__pontos{bottom:-14px}
.anel::after{bottom:-2%;height:28px}
@media(max-width:640px){
  .secao-risco{padding:40px 0 34px}
  .anel{height:clamp(240px,64vw,280px)}
}

/* as cartas do anel ficam mais estreitas, para as tres caberem lado a lado */
.anel .risco-card{width:clamp(240px,21vw,290px)}
@media(max-width:900px){.anel .risco-card{width:min(74vw,280px)}}

/* ==========================================================
   05 · A carta da frente fica com fundo OPACO; as vizinhas seguem
   translucidas. Na troca do loop, o destaque passa de uma para a outra.
   ========================================================== */
.anel .risco-card{
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.26);
  transition:transform .7s var(--ease),opacity .7s var(--ease),
             background .5s var(--ease),border-color .5s var(--ease),
             box-shadow .5s var(--ease)}
.anel .risco-card.frente{
  background:linear-gradient(150deg,#0A2E6B 0%,var(--marinho) 55%,#001240 100%);
  border-color:rgba(143,220,245,.55);
  box-shadow:0 26px 60px rgba(6,20,44,.5)}
.anel .risco-card--ponte{background:linear-gradient(155deg,rgba(55,188,234,.26),rgba(55,188,234,.1))}
.anel .risco-card--ponte.frente{
  background:linear-gradient(150deg,var(--azul) 0%,#1A7BB2 55%,#125A85 100%);
  border-color:var(--azul-claro)}
/* malha fina so na carta em destaque, para ela ter mais corpo */
.anel .risco-card.frente::before{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;opacity:.4;border-radius:inherit;
  background-image:linear-gradient(rgba(143,220,245,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,220,245,.12) 1px,transparent 1px);
  background-size:22px 22px}
.anel .risco-card{position:absolute;isolation:isolate}

/* catalogo com 4 itens */
.cat__grade{grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{padding:22px 20px 24px}
.cat-card h3{font-size:18.5px}
.cat-card>p{font-size:14px}
.cat-card__media .ph{height:150px;min-height:150px}
@media(max-width:1080px){.cat__grade{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cat__grade{grid-template-columns:1fr}}

/* ==========================================================
   02 · Foto real no hero, no lugar do placeholder
   ========================================================== */
.hero__media{align-items:center;justify-content:center}
.hero__foto{width:auto;max-width:100%;height:auto;
  max-height:clamp(340px,44vw,540px);object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,5,32,.28))}
@media(max-width:900px){.hero__foto{max-height:360px;margin:0 auto}}
@media(max-width:640px){.hero__foto{max-height:300px}}

.hero__inner{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(20px,2.6vw,42px)}
.hero__foto{max-height:clamp(400px,52vw,680px)}
.hero__titulo{font-size:clamp(29px,3.4vw,46px)}
@media(max-width:1200px){
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero__foto{max-height:clamp(360px,44vw,540px)}
}
@media(max-width:900px){.hero__foto{max-height:400px!important}}
@media(max-width:640px){.hero__foto{max-height:330px!important}}

/* ==========================================================
   08 · Fotos de produto sobre visor branco
   ========================================================== */
.cat-card__media--foto{position:relative;height:170px;padding:14px;border-radius:12px;
  background:#FFFFFF;border:1px solid rgba(143,220,245,.4);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-card__media--foto img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  transition:transform .5s var(--ease)}
.cat-card:hover .cat-card__media--foto img{transform:scale(1.06)}
@media(max-width:640px){.cat-card__media--foto{height:160px}}

/* ==========================================================
   07 · Fotos reais nos paineis
   ========================================================== */
.painel__media{border-radius:16px;overflow:hidden}
.painel__foto{width:100%;height:100%;min-height:250px;display:block;border-radius:16px;
  transition:transform .7s var(--ease)}
.painel__foto--cover{object-fit:cover;object-position:center}
.painel-card:hover .painel__foto--cover{transform:scale(1.04)}
/* a do painel 3 e recorte em fundo transparente: nao pode ser cover */
.painel__foto--contain{object-fit:contain;padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
@media(max-width:900px){.painel__foto{min-height:200px}}

/* ==========================================================
   02 · Hero um pouco mais alto na tela
   ========================================================== */
.hero{padding-top:calc(var(--topo) + clamp(18px,3vw,40px))}
.hero__faixa{margin-top:clamp(26px,3.4vw,48px)}
@media(max-width:900px){.hero{padding-top:calc(var(--topo) + 22px)}}

/* ==========================================================
   02 · A coluna de texto era centralizada contra a foto (680px de altura),
   o que a empurrava ~140px para baixo. Vai para o topo; a foto segue centrada.
   ========================================================== */
.hero__inner{align-items:center}
.hero__copy{align-self:start;padding-top:clamp(0px,1.4vw,20px)}
.hero{padding-top:calc(var(--topo) + clamp(12px,2vw,28px))}
@media(max-width:900px){
  .hero__copy{align-self:auto;padding-top:0}
}

/* ==========================================================
   02 · Textos do hero maiores, para a coluna preencher a altura da foto
   ========================================================== */
.rotulo{font-size:13.5px;padding:11px 20px;margin-bottom:26px}
.hero__titulo{font-size:clamp(32px,4.2vw,58px);line-height:1.04;
  letter-spacing:-.038em;margin-bottom:26px}
.hero__sub{font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  max-width:52ch;margin-bottom:34px}
.hero__acoes{gap:14px}
.hero__acoes .btn{padding:16px 28px;font-size:16px;border-radius:13px}
.hero__acoes .btn--grande{padding:18px 32px;font-size:16.5px}
@media(max-width:1200px){
  .hero__titulo{font-size:clamp(30px,3.7vw,48px)}
  .hero__sub{font-size:clamp(15.5px,1.2vw,18px)}
}
@media(max-width:640px){
  .rotulo{font-size:12px;padding:9px 16px}
  .hero__titulo{font-size:clamp(29px,7.8vw,40px)}
  .hero__sub{font-size:16px}
  .hero__acoes .btn,.hero__acoes .btn--grande{padding:15px 22px;font-size:15.5px}
}

/* ==========================================================
   02 · Equilibrio final do hero
   Com o texto maior a coluna ficou estreita demais: o H1 quebrava em 5 linhas
   e o rotulo em 2. A coluna de leitura recupera largura e o corpo ajusta.
   ========================================================== */
.hero__inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(22px,2.8vw,44px)}
.hero__titulo{font-size:clamp(31px,3.8vw,52px);letter-spacing:-.034em}
.rotulo{font-size:12.5px;padding:10px 18px;line-height:1.3}
.hero__sub{font-size:clamp(15.5px,1.25vw,18.5px);max-width:48ch}
.hero__foto{max-height:clamp(380px,48vw,620px)}

/* ==========================================================
   MOBILE — hero
   ========================================================== */
@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr!important;gap:24px}
  .hero__copy{order:1;align-self:auto;padding-top:0}
  .hero__media{order:2}
  .hero__titulo{font-size:clamp(30px,7.4vw,42px)!important;letter-spacing:-.03em;
    margin-bottom:18px}
  .rotulo{font-size:11.5px!important;padding:9px 15px!important;margin-bottom:18px}
  .hero__sub{font-size:16px!important;max-width:none;margin-bottom:24px}
  .hero__acoes{flex-direction:column;align-items:stretch;gap:10px}
  .hero__acoes .btn,.hero__acoes .btn--grande{width:100%;justify-content:center;
    padding:15px 20px!important;font-size:15.5px!important}
  .hero__foto{max-height:360px!important}
  .hero__faixa{margin-top:26px;padding-bottom:26px}
}
@media(max-width:640px){
  .hero__titulo{font-size:clamp(28px,8vw,36px)!important}
  .hero__sub{font-size:15.5px!important}
  .hero__foto{max-height:300px!important}
  .hero__checks li{padding:14px 15px;font-size:14px}
  .hero__checks li::before{flex:0 0 26px;width:26px;height:26px;border-radius:9px}
  .hero__checks li::after{left:25px}
}

/* rotulo em uma linha so e respiro maior entre os blocos, para a coluna
   de texto acompanhar a altura da foto sem apertar o H1 */
.rotulo{font-size:12px;padding:10px 17px;letter-spacing:-.005em;white-space:nowrap;
  margin-bottom:28px}
.hero__titulo{margin-bottom:28px}
.hero__sub{max-width:52ch;margin-bottom:36px;line-height:1.66}
.hero__acoes{margin-bottom:0}
@media(max-width:1080px){.rotulo{white-space:normal;font-size:11.5px}}

/* ==========================================================
   02 · H1 em cinco linhas fixas e subtitulo menor
   Com o titulo mais alto, a coluna de texto acompanha a foto e o vao some.
   ========================================================== */
.hero__titulo{font-size:clamp(32px,4vw,56px);line-height:1.02;letter-spacing:-.038em;
  margin-bottom:24px}
.hero__titulo br{display:block}
.hero__sub{font-size:clamp(14.5px,1.05vw,16px);line-height:1.62;
  max-width:44ch;margin-bottom:30px;color:var(--tinta-2)}
@media(max-width:900px){
  .hero__titulo{font-size:clamp(30px,7.6vw,42px)!important;line-height:1.04}
  .hero__sub{font-size:15px!important;max-width:none}
}
@media(max-width:640px){
  .hero__titulo{font-size:clamp(28px,8.2vw,38px)!important}
  .hero__sub{font-size:14.5px!important}
}

/* ==========================================================
   02 · Titulo do hero no celular
   As cinco quebras fixas ocupavam a tela inteira numa coluna estreita.
   No mobile os <br> saem e o titulo quebra sozinho, no tamanho da coluna.
   ========================================================== */
@media(max-width:900px){
  .hero__titulo br{display:none}
  .hero__titulo{font-size:clamp(30px,7.8vw,40px)!important;line-height:1.08;
    letter-spacing:-.03em;margin-bottom:18px;text-wrap:balance}
}
@media(max-width:640px){
  .hero__titulo{font-size:clamp(27px,8.4vw,35px)!important;line-height:1.1}
}

/* ==========================================================
   08 · Imagens de produto maiores, sem sair do visor
   O quadro cresce e a imagem preenche mais dele, mas segue em `contain`:
   nunca corta nem vaza a borda.
   ========================================================== */
.cat-card__media--foto{height:210px;padding:10px}
.cat-card__media--foto img{max-height:100%;max-width:100%;width:auto;height:auto;
  object-fit:contain}
@media(max-width:1080px){.cat-card__media--foto{height:220px}}
@media(max-width:640px){.cat-card__media--foto{height:200px}}

/* o horario ganha destaque na parte que interessa */
.item span b{font-weight:800;color:var(--azul)}

/* ==========================================================
   14 · Formulario do RD Station dentro do cartao escuro
   ----------------------------------------------------------
   O script do RD injeta o CSS dele no fim do <head>, DEPOIS deste arquivo.
   Regra de mesma especificidade perderia, por isso tudo aqui esta ancorado no
   id #rdFormSlot e as cores levam !important: o formulario chega claro, de
   fabrica, e o cartao daqui e marinho.
   ========================================================== */
.form--rd{display:flex;flex-direction:column}
/* [hidden] e display:none do navegador, especificidade zero: qualquer regra de
   autor com display ganha dele. Como .form e .form--rd declaram display:flex,
   sem isto o atributo hidden nao esconde nada — foi o que colocou os dois
   cartoes de orcamento lado a lado. Vale para o nativo tambem. */
.form[hidden],
.form--rd[hidden]{display:none!important}
.form__rd-slot{flex:1 1 auto}
.form__rd-slot:empty{min-height:320px}

#rdFormSlot,
#rdFormSlot *{font-family:var(--fonte)!important;box-sizing:border-box}
#rdFormSlot .bricks-form,
#rdFormSlot form{background:transparent!important;padding:0!important;margin:0!important;
  max-width:none!important;width:100%!important;box-shadow:none!important}

#rdFormSlot label,
#rdFormSlot .bricks-form__label{display:block;margin-bottom:5px;
  font-size:12px!important;font-weight:600!important;letter-spacing:.02em;
  color:rgba(255,255,255,.88)!important;text-transform:none!important}

#rdFormSlot input[type=text],
#rdFormSlot input[type=email],
#rdFormSlot input[type=tel],
#rdFormSlot input[type=number],
#rdFormSlot select,
#rdFormSlot textarea{width:100%!important;height:auto!important;
  padding:11px 13px!important;border-radius:10px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  color:#fff!important;font-size:14px!important;line-height:1.4!important;
  box-shadow:none!important;transition:border-color .2s,background .2s}
#rdFormSlot textarea{min-height:92px!important;resize:vertical}
#rdFormSlot input::placeholder,
#rdFormSlot textarea::placeholder{color:rgba(255,255,255,.5)!important}
#rdFormSlot input:focus,
#rdFormSlot select:focus,
#rdFormSlot textarea:focus{outline:none!important;
  border-color:var(--azul)!important;background:rgba(255,255,255,.16)!important}
/* a lista do select nasce branca do navegador; sem isto some o texto */
#rdFormSlot select option{color:#000520!important;background:#fff!important}

#rdFormSlot .bricks-form__field{margin-bottom:11px!important}
#rdFormSlot .bricks-form__field--checkbox label,
#rdFormSlot .bricks-form__field--radio label{display:flex;align-items:flex-start;gap:9px;
  font-weight:500!important;font-size:12.5px!important;line-height:1.45}
#rdFormSlot input[type=checkbox],
#rdFormSlot input[type=radio]{width:auto!important;margin:2px 0 0!important;
  accent-color:var(--azul)}

#rdFormSlot input[type=submit],
#rdFormSlot button[type=submit],
#rdFormSlot .bricks-form__submit{width:100%!important;margin-top:6px!important;
  padding:14px 20px!important;border:none!important;border-radius:12px!important;
  background:var(--grad-inv,linear-gradient(120deg,#37BCEA,#0A2E6B))!important;
  color:#fff!important;font-size:14.5px!important;font-weight:800!important;
  letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 26px rgba(55,188,234,.34)!important;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
#rdFormSlot input[type=submit]:hover,
#rdFormSlot button[type=submit]:hover,
#rdFormSlot .bricks-form__submit:hover{transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(55,188,234,.44)!important}

/* validacao e mensagens do proprio RD */
#rdFormSlot label.error,
#rdFormSlot .bricks-form__error,
#rdFormSlot .error{color:#FFC2C7!important;font-size:11.5px!important;font-weight:600!important}
#rdFormSlot input.error,
#rdFormSlot select.error,
#rdFormSlot textarea.error{border-color:#FF8A93!important}
#rdFormSlot .bricks-form__message,
#rdFormSlot .conversion-message{color:#fff!important;font-size:13.5px!important}
#rdFormSlot a{color:var(--azul-claro,#9FDDFF)!important;text-decoration:underline}
.form__rd-espera{padding:26px 4px;font-size:13px;color:rgba(255,255,255,.7)}

/* ==========================================================
   15 · Formulario com 5 campos: respiro, para nao ficar oco
   ----------------------------------------------------------
   O cartao estica para acompanhar a coluna da esquerda (lista + mapa, 876px).
   Com 9 campos ele preenchia sozinho; com 5 sobravam 258px de vazio entre o
   botao e a linha da LGPD. Em vez de deixar o buraco no fim, a folga foi
   distribuida: campo mais alto, mais espaco entre eles e mais ar no cartao.
   ========================================================== */
.form{padding:34px 30px 28px}
.form__cabeca{margin-bottom:30px;padding-bottom:24px}
.form__apoio{font-size:13px}
.campo{margin-bottom:24px}
.campo-linha{gap:16px;margin-bottom:24px}
.campo-linha .campo{margin-bottom:0}
.form label{font-size:12px;margin-bottom:7px}
.form input,.form select,.form textarea{padding:16px 16px;font-size:14px;border-radius:12px}
.campo--check{margin-top:4px}
.campo--check label{font-size:12.5px}
.btn--enviar{margin-top:16px;padding:18px 20px;font-size:15.5px}
.form__legal{padding-top:18px}

@media(max-width:900px){
  /* no empilhado o cartao ja tem a altura do conteudo: volta ao compacto */
  .form{padding:26px 22px 22px}
  .form__cabeca{margin-bottom:18px;padding-bottom:16px}
  .campo,.campo-linha{margin-bottom:13px}
  .form input,.form select,.form textarea{padding:12px 14px}
  .btn--enviar{margin-top:6px;padding:15px 20px}
}

/* ==========================================================
   AVOLVE · classes proprias desta LP
   O que a base nao tinha: formulario dentro do hero, grade de dores,
   cards de escopo, passos numerados e a versao clara do formulario.
   ========================================================== */

/* --- 02 hero sem formulario, coluna unica -------------------------------
   O briefing pedia o formulario a direita, visivel sem rolagem; o operador
   optou por tirar (11/09 -> 15/09). O caminho de conversao passa a ser a
   ancora para o formulario do CTA final. Registrado no META. */
.hero--solo .hero__inner{grid-template-columns:minmax(0,1fr)}
.hero--solo .hero__copy{max-width:920px}
.hero--solo .hero__titulo{font-size:clamp(32px,4.4vw,58px);line-height:1.08;letter-spacing:-.03em}
.hero--solo .hero__sub{font-size:17px;max-width:62ch}
.hero__garantia{margin-top:22px;font-size:15px;font-weight:700;color:var(--marinho)}
.hero__garantia::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--azul);margin-right:10px;vertical-align:middle}
.hero--solo .hero__checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 14px;max-width:none;margin-top:28px}
.hero--solo .hero__checks li{font-size:14.5px;line-height:1.4;padding:12px 15px;text-align:left;
  display:flex;align-items:center;gap:10px;min-height:0}
.hero--solo .hero__acoes{margin-top:26px}
@media(max-width:1000px){
  .hero--solo .hero__checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .hero--solo .hero__checks{grid-template-columns:1fr}
}

/* --- 04 dores, sobre o azul escuro --------------------------------------- */
.dores__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(28px,3.4vw,44px)}
.dor{padding:26px 24px;border-radius:var(--raio);
  background:rgba(255,255,255,.06);border:1px solid rgba(143,220,245,.22)}
.dor h3{font-size:17px;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.3}
.dor h3::before{content:'';display:block;width:26px;height:3px;border-radius:2px;
  background:var(--azul);margin-bottom:14px}
.dor p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.6}
@media(max-width:1000px){.dores__grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dores__grade{grid-template-columns:1fr}}

/* --- 05 escopo ----------------------------------------------------------- */
.escopo__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:clamp(28px,3.4vw,44px)}
.escopo-card{padding:28px 26px;border-radius:var(--raio);background:#fff;
  border:1px solid var(--linha);box-shadow:0 10px 30px rgba(0,7,51,.05);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.escopo-card:hover{border-color:var(--azul);transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,7,51,.1)}
.escopo-card h3{font-size:19px;font-weight:800;color:var(--marinho);margin-bottom:12px}
.escopo-card p{font-size:14.8px;color:var(--tinta-2);line-height:1.65}
.escopo-card__entrega{margin-top:14px;padding-top:14px;border-top:1px dashed var(--linha);
  font-size:14px;color:var(--marinho)}
.escopo-card__entrega strong{color:var(--marinho);font-weight:800}
@media(max-width:1000px){.escopo__grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.escopo__grade{grid-template-columns:1fr}}

/* --- 06 quatro passos ---------------------------------------------------- */
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:clamp(28px,3.4vw,44px);counter-reset:passo}
.passo{position:relative;padding:28px 24px 26px;border-radius:var(--raio);background:#fff;
  border:1px solid var(--linha)}
.passo__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:16px;
  margin-bottom:16px}
.passo h3{font-size:16.5px;font-weight:800;color:var(--marinho);margin-bottom:9px;line-height:1.35}
.passo p{font-size:14.5px;color:var(--tinta-2);line-height:1.6}
@media(max-width:1000px){.passos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.passos{grid-template-columns:1fr}}

/* --- botao no fim da secao ----------------------------------------------- */
.secao__acao{display:flex;justify-content:center;margin-top:clamp(26px,3vw,40px)}

/* --- 08 FAQ em fundo branco (na base a faixa era alternada) --------------- */
.secao-faq{background:var(--branco)}

/* --- 09 formulario claro sobre o azul escuro ----------------------------- */
.form--claro{background:#fff!important;border:1px solid var(--linha)!important;
  box-shadow:0 30px 70px rgba(0,7,51,.28)!important}
.form--claro .form__titulo,.form--claro .form__cabeca{color:var(--marinho)}
.form--claro .form__titulo em{color:var(--azul-esc)}
.form--claro .form__apoio{color:var(--tinta-2)}
.form--claro .form__cabeca{border-bottom-color:var(--linha)}
.form--claro label{color:var(--marinho)}
.form--claro input,.form--claro select,.form--claro textarea{background:#fff;
  border-color:var(--linha);color:var(--marinho)}
.form--claro input::placeholder{color:#9AA4B4}
.form--claro select option{background:#fff;color:var(--marinho)}
.form--claro input:focus,.form--claro select:focus{background:#fff;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(55,188,234,.28)}
.form--claro .campo--check label{color:var(--tinta-2)}
.form--claro .form__legal{color:var(--tinta-2)}
.form--claro .btn--enviar{background:var(--grad)!important;border-color:transparent!important;
  color:#fff!important}
.form--claro .form__ok{background:rgba(55,188,234,.12);border-color:var(--azul);color:var(--marinho)}
.form--claro .form__ok-ic{color:#0E8A4B}

/* --- rotulo de campo opcional ------------------------------------------- */
.campo__opc{font-weight:500;color:var(--tinta-2);text-transform:none;letter-spacing:0}

/* --- 10 rodape: linha final --------------------------------------------- */
.rodape__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(143,220,245,.2);
  font-size:13px;color:rgba(255,255,255,.7)}
.rodape__pe a{color:rgba(255,255,255,.85);text-decoration:underline}
.rodape__credito strong{color:#fff}

/* --- hero: proporcoes proprias desta LP ---------------------------------
   O H1 da base era curto e com quebras manuais; o desta LP e uma frase longa,
   porque precisa conter a palavra do anuncio. Entao: coluna de texto mais
   larga, H1 menor e faixa de confianca em duas colunas em vez de quatro. */
.hero--form .hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,430px)}
.hero--form .hero__titulo{font-size:clamp(30px,3.3vw,46px);line-height:1.1;letter-spacing:-.03em}
.hero--form .hero__sub{font-size:16px;max-width:52ch}
.hero--form .hero__checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;max-width:560px}
.hero--form .hero__checks li{font-size:14.5px;line-height:1.4;padding:11px 14px;text-align:left;
  display:flex;align-items:center;gap:10px;min-height:0}
@media(max-width:1180px){
  .hero--form .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .hero--form .hero__titulo{font-size:clamp(28px,3.6vw,38px)}
}
@media(max-width:960px){
  .hero--form .hero__inner{grid-template-columns:1fr}
  .hero--form .hero__checks{grid-template-columns:1fr;max-width:none}
}


/* --- 4b quem e a Avolve -------------------------------------------------- */

.sobre__copy .cabeca__titulo{text-align:left}
.sobre__copy .cabeca__sub{text-align:left;margin-left:0;max-width:56ch}
.sobre__numeros{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.sobre__num{flex:1 1 180px;display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:#fff;border:1px solid var(--linha);border-radius:14px}
.sobre__num strong{font-size:clamp(30px,3.2vw,40px);font-weight:900;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sobre__num span{font-size:13.5px;color:var(--tinta-2);line-height:1.4}
.sobre__pilares{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pilar{padding:24px 22px;border-radius:var(--raio);background:#fff;border:1px solid var(--linha);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pilar:hover{border-color:var(--azul);transform:translateY(-3px)}
.pilar h3{font-size:16px;font-weight:800;color:var(--marinho);margin-bottom:9px;line-height:1.3}
.pilar h3::before{content:'';display:block;width:24px;height:3px;border-radius:2px;
  background:var(--azul);margin-bottom:12px}
.pilar p{font-size:14.3px;color:var(--tinta-2);line-height:1.6}
@media(max-width:960px){
  .sobre__grade{grid-template-columns:1fr}
}
@media(max-width:560px){
  .sobre__pilares{grid-template-columns:1fr}
}

/* ==========================================================
   AVOLVE · cores de marca chapadas, degrade so com azuis de apoio
   ----------------------------------------------------------
   Decisao do operador (15/09/2026): as duas cores da marca aparecem
   SEPARADAS e CHAPADAS; o degrade existe, mas construido com azuis
   intermediarios que nao sao cor de marca.

   Contraste medido, que decidiu o texto dos botoes:
     branco sobre #37BCEA ....... 2,20:1  REPROVA (o briefing ja alertava)
     #000733 sobre #37BCEA ...... 8,85:1  passa folgado
     branco sobre #000733 ....... 19,48:1 passa folgado
   Por isso o CTA e #37BCEA chapado com texto #000733, e nao branco.
   ========================================================== */
:root{
  /* azuis de apoio: so para degrade e profundidade, nunca como "a cor da marca" */
  --apoio-1:#0A2E6B;
  --apoio-2:#14538F;
  --apoio-3:#1F7FC0;
  --grad-apoio:linear-gradient(135deg,var(--apoio-1) 0%,var(--apoio-2) 55%,var(--apoio-3) 100%);
  --grad-apoio-inv:linear-gradient(135deg,var(--apoio-3) 0%,var(--apoio-2) 50%,var(--apoio-1) 100%);
}

/* --- 1. cor de marca CHAPADA ------------------------------------------- */
.btn--cta{background:var(--azul)!important;border-color:var(--azul)!important;
  color:var(--marinho)!important;box-shadow:0 12px 28px rgba(55,188,234,.32)!important}
.btn--cta:hover{background:var(--azul-esc)!important;border-color:var(--azul-esc)!important;
  color:#fff!important;box-shadow:0 16px 34px rgba(31,159,204,.38)!important}
.btn--cta span[aria-hidden]{color:inherit}
.form--claro .btn--enviar,.btn--enviar{background:var(--azul)!important;
  border-color:var(--azul)!important;color:var(--marinho)!important}
.form--claro .btn--enviar:hover,.btn--enviar:hover{background:var(--azul-esc)!important;
  border-color:var(--azul-esc)!important;color:#fff!important}

.rotulo{background:var(--marinho)!important;color:#fff}
.form__kicker{background:var(--azul)!important;color:var(--marinho)!important}

/* as tres secoes escuras sao #000733 chapado, como o briefing especifica */
.secao-marinho{background:var(--marinho)}
.rodape{background:var(--marinho)}

/* --- 2. degrade: so com os azuis de apoio ------------------------------ */
.progresso{background:var(--grad-apoio-inv)}
.passo__n{background:var(--grad-apoio);color:#fff}
.sobre__num strong{background:var(--grad-apoio);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cred::after{background:var(--grad-apoio-inv)}
.hero__orb--marinho{background:var(--apoio-1)}
.hero__orb--azul{background:var(--apoio-3)}

/* --- 3. o acento em texto: chapado, no tom que passa no branco ---------- */
.hero__titulo em,.cabeca__titulo em{background:none;-webkit-text-fill-color:currentColor;
  color:var(--azul-esc)}
.secao-marinho .cabeca__titulo em{color:var(--azul)}
.form__titulo em{color:var(--azul)}
.escopo-card__entrega strong,.dor h3::before,.pilar h3::before{color:var(--azul)}
.dor h3::before,.pilar h3::before{background:var(--azul)}

/* --- 4b · logo na secao e big numbers com mais presenca ------------------ */
.sobre__logo{height:clamp(40px,3.6vw,52px);width:auto;margin-bottom:20px}
.sobre__numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.sobre__num{display:block;padding:24px 24px 22px;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:0 10px 28px rgba(0,7,51,.06);position:relative;overflow:hidden}
.sobre__num::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grad-apoio)}
.sobre__num strong{display:block;font-size:clamp(46px,5.4vw,68px);font-weight:900;line-height:.92;
  letter-spacing:-.04em;margin-bottom:10px;
  background:var(--grad-apoio);-webkit-background-clip:text;background-clip:text;color:transparent}
.sobre__num-rot{display:block;font-size:14.5px;font-weight:800;color:var(--marinho);
  line-height:1.3}
.sobre__num-sub{display:block;margin-top:6px;font-size:12.5px;color:var(--tinta-2);line-height:1.45}
@media(max-width:560px){
  .sobre__numeros{grid-template-columns:1fr}
}

/* --- 4b · mapa do Parana com as pracas atendidas -------------------------
   A malha e a do IBGE e as quatro cidades sao projetadas com a mesma
   transformacao do contorno, entao os pontos caem na posicao real. */

.sobre__mapa{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px 20px;box-shadow:0 12px 32px rgba(0,7,51,.06)}
.sobre__mapa img{width:100%;height:auto;display:block}
.sobre__mapa-texto h3{font-size:clamp(20px,2vw,26px);font-weight:800;color:var(--marinho);
  margin:6px 0 12px;line-height:1.2}
.sobre__mapa-texto p{font-size:15px;color:var(--tinta-2);line-height:1.65}
.sobre__pracas{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.sobre__pracas li{font-size:13.5px;font-weight:700;color:var(--marinho);background:#fff;
  border:1px solid var(--linha);border-radius:var(--pill);padding:8px 15px}
.sobre__pracas li::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--azul);margin-right:9px;vertical-align:middle}
@media(max-width:860px){
  .sobre__mapa-bloco{grid-template-columns:1fr}
}

/* cores do SVG do mapa */
.mapa-pr__estado{fill:#E8F2FA;stroke:var(--apoio-2);stroke-width:3;stroke-linejoin:round}
.mapa-pr__halo{fill:var(--azul);opacity:.16}
.mapa-pr__pino{fill:var(--azul);stroke:#fff;stroke-width:3}
.mapa-pr__rot{font-family:var(--fonte);font-size:30px;font-weight:800;fill:var(--marinho)}

/* ==========================================================
   AVOLVE · onde o degrade aparece de fato
   ----------------------------------------------------------
   Regra: o degrade NUNCA mistura as duas cores de marca (#000733 com
   #37BCEA). Ele e construido com o navy e os azuis de apoio
   (#06225A, #0A2E6B, #14538F, #1F7FC0), que nao sao cor de marca.
   O #37BCEA continua chapado, so como acento.
   ========================================================== */

/* fundos escuros: profundidade com o navy indo para os azuis de apoio */
.secao-marinho{background:linear-gradient(158deg,var(--marinho) 0%,#06225A 52%,var(--apoio-1) 100%)}
.rodape{background:linear-gradient(158deg,#06225A 0%,var(--marinho) 46%,#00051F 100%)}

/* hero: lavada de azul bem clara descendo para o branco */
.hero{background:linear-gradient(180deg,#F5FAFE 0%,var(--branco) 46%)}

/* faixa alternada: dois tons de azul claro, ainda dentro do #F4FAFD do briefing */
.secao-alt{background:linear-gradient(160deg,var(--gelo) 0%,#E9F3FB 100%)}

/* cards sobre o fundo escuro ganham volume com os azuis de apoio */
.dor{background:linear-gradient(150deg,rgba(31,127,192,.20) 0%,rgba(10,46,107,.10) 100%);
  border-color:rgba(31,127,192,.34)}
.dor:hover{background:linear-gradient(150deg,rgba(31,127,192,.30) 0%,rgba(10,46,107,.14) 100%)}

/* cartoes claros: brilho sutil no topo, sem cor de marca */
.escopo-card,.pilar,.passo{background:linear-gradient(170deg,#FFFFFF 0%,#FAFDFF 100%)}
.sobre__num{background:linear-gradient(150deg,#FFFFFF 0%,#F7FBFE 100%)}
.sobre__mapa{background:linear-gradient(150deg,#FFFFFF 0%,#F7FBFE 100%)}

/* a linha de topo dos cards de credencial e o numero dos passos ja usam o
   degrade de apoio; o visor do mapa ganha a mesma familia na borda lateral */
.sobre__mapa-bloco{border-top-color:var(--linha)}

/* ==========================================================
   4b · arranjo final: texto + pilares a esquerda, mapa + numeros a direita
   ========================================================== */
.sobre__grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,56px);align-items:start}
.sobre__esq .cabeca__titulo,.sobre__esq .cabeca__sub{text-align:left;margin-left:0}
.sobre__esq .cabeca__sub{max-width:54ch}
.sobre__pilares{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin-top:clamp(26px,3vw,36px)}
.sobre__dir{display:flex;flex-direction:column;gap:18px}
.sobre__mapa{padding:20px 22px 22px;border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:0 12px 32px rgba(0,7,51,.06)}
.sobre__mapa img{width:100%;height:auto;display:block}
.sobre__mapa-rot{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-esc);margin-bottom:12px}
.sobre__mapa-legenda{margin-top:14px;font-size:13.5px;color:var(--tinta-2);line-height:1.6}
.sobre__numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:0}
@media(max-width:960px){
  .sobre__grade{grid-template-columns:1fr}
}
@media(max-width:560px){
  .sobre__pilares{grid-template-columns:1fr}
  .sobre__numeros{grid-template-columns:1fr}
}

/* ==========================================================
   02 · hero com foto do engenheiro sobre faixa diagonal
   ----------------------------------------------------------
   A faixa e um retangulo girado com a foto da subestacao ao fundo, coberta por
   um veu nos azuis de apoio para o engenheiro destacar e a marca dominar.
   A foto entra por background-image: se o arquivo faltar, fica so o degrade.
   ========================================================== */
.hero--foto .hero__inner{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}
.hero--foto .hero__copy{max-width:none}
.hero--foto .hero__titulo{font-size:clamp(30px,3.5vw,50px);line-height:1.08}
.hero--foto .hero__sub{font-size:16.5px;max-width:52ch}
.hero--foto .hero__checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;max-width:none;margin-top:26px}
.hero--foto .hero__checks li{font-size:14px;line-height:1.35;padding:11px 14px;text-align:left;
  display:flex;align-items:center;gap:9px;min-height:0}

.hero__media{position:relative;display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(420px,42vw,580px)}
.hero__faixa{position:absolute;z-index:0;left:-4%;right:-4%;top:8%;bottom:6%;
  border-radius:26px;overflow:hidden;transform:rotate(-8deg);
  background-image:linear-gradient(152deg,rgba(0,7,51,.90) 0%,rgba(10,46,107,.74) 48%,rgba(31,127,192,.62) 100%),
                   url('assets/avolve-subestacao.webp');
  background-size:cover,cover;background-position:center,center;
  box-shadow:0 28px 64px rgba(0,7,51,.24)}
.hero__faixa::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(0,7,51,0) 0%,rgba(0,7,51,.55) 100%)}
.hero__foto{position:relative;z-index:2;max-height:clamp(400px,40vw,560px);width:auto;
  filter:drop-shadow(0 22px 40px rgba(0,7,51,.34))}

/* sem a foto do engenheiro o main.js marca a hero e ela volta a coluna unica */
.hero--sem-foto .hero__inner{grid-template-columns:minmax(0,1fr)}
.hero--sem-foto .hero__media{display:none}
.hero--sem-foto .hero__checks{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:1000px){
  .hero--foto .hero__inner{grid-template-columns:1fr}
  .hero__media{min-height:360px;margin-top:26px}
  .hero--foto .hero__checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .hero--foto .hero__checks,.hero--sem-foto .hero__checks{grid-template-columns:1fr}
  .hero__faixa{left:-8%;right:-8%}
}

/* ==========================================================
   CARDS DA LP · fundo azul escuro com degrade para o azul claro
   ----------------------------------------------------------
   Pedido do operador. O degrade vai do #000733 para os azuis de apoio, que
   terminam num azul claro — sem misturar as duas cores de marca. O #37BCEA
   segue chapado, nos detalhes (regra do titulo, numero, icone).
   ========================================================== */
.cred,
.escopo-card,
.pilar,
.passo,
.sobre__num{
  background:linear-gradient(152deg,var(--marinho) 0%,#0A2E6B 52%,#2E93CF 100%)!important;
  border-color:rgba(143,220,245,.24)!important;
  box-shadow:0 14px 34px rgba(0,7,51,.22)!important}
.cred:hover,.escopo-card:hover,.pilar:hover,.passo:hover{
  border-color:var(--azul)!important;
  box-shadow:0 20px 44px rgba(0,7,51,.3)!important}

/* texto dentro dos cards escuros */
.cred strong,.cred span,
.escopo-card h3,.escopo-card p,
.pilar h3,.pilar p,
.passo h3,.passo p,
.sobre__num-rot,.sobre__num-sub{color:#fff}
.cred span,
.escopo-card p,
.pilar p,
.passo p{color:rgba(255,255,255,.84)}
.escopo-card__entrega{border-top-color:rgba(143,220,245,.3);color:rgba(255,255,255,.92)}
.escopo-card__entrega strong{color:var(--azul)}
.cred__n{color:var(--azul)}
.sobre__num-sub{color:rgba(255,255,255,.78)}

/* o numero grande volta a ser chapado no azul claro: sobre o card escuro,
   o degrade de apoio sumia no fundo */
.sobre__num strong{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--azul);-webkit-text-fill-color:var(--azul)}
.sobre__num::before{background:var(--azul)}
.passo__n{background:var(--azul);color:var(--marinho)}

/* --- cards de pilar mais compactos --------------------------------------- */
.sobre__pilares{gap:13px;margin-top:clamp(22px,2.4vw,30px)}
.pilar{padding:17px 17px 16px}
.pilar h3{font-size:14.5px;margin-bottom:6px}
.pilar h3::before{width:20px;height:2.5px;margin-bottom:9px}
.pilar p{font-size:13px;line-height:1.5}

/* ==========================================================
   02 · hero: a imagem de tras vira FAIXA e o engenheiro cresce
   ----------------------------------------------------------
   A faixa e uma tira diagonal atravessando a coluna, nao um cartao: sobra
   espaco para entrar outro segmento ao lado depois. O engenheiro passa por
   cima dela, maior, sobrando para cima e para baixo.
   ========================================================== */
.hero--foto .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.hero__media{min-height:clamp(460px,46vw,640px);align-items:flex-end;overflow:visible}

.hero__faixa{left:-26%;right:-14%;top:auto;bottom:16%;height:clamp(150px,17vw,224px);
  border-radius:18px;transform:rotate(-8deg);
  background-image:linear-gradient(120deg,rgba(0,7,51,.92) 0%,rgba(10,46,107,.76) 52%,rgba(31,127,192,.60) 100%),
                   url('assets/avolve-subestacao.webp');
  background-size:cover,cover;background-position:center,center 42%;
  box-shadow:0 26px 58px rgba(0,7,51,.26)}
.hero__faixa::after{display:none}

.hero__foto{max-height:clamp(440px,48vw,660px);width:auto;
  filter:drop-shadow(0 26px 44px rgba(0,7,51,.32))}

@media(max-width:1000px){
  .hero__media{min-height:380px}
  .hero__faixa{left:-14%;right:-14%;height:clamp(130px,26vw,180px)}
  .hero__foto{max-height:380px}
}

/* --- credenciais: o card escuro precisa de largura, senao corta o texto --- */
.cred__grade{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cred{width:auto!important;flex:none!important;padding:22px 20px;display:flex;
  flex-direction:column;gap:6px;min-height:0}
.cred strong{font-size:15px;line-height:1.3}
.cred span{font-size:13px;line-height:1.5}
.cred__n{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--azul)}
@media(max-width:1000px){.cred__grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cred__grade{grid-template-columns:1fr}}

/* --- rotulo dos big numbers: estava no cinza de fundo claro --------------- */
.sobre__num .sobre__num-rot{color:#fff!important;font-size:14px}
.sobre__num .sobre__num-sub{color:rgba(255,255,255,.8)!important}

/* ==========================================================
   02 · hero cabe na primeira tela
   ----------------------------------------------------------
   Tudo que vende — H1, subtitulo, faixa de confianca, linha de garantia e os
   dois CTAs — tem de estar visivel sem rolar. Alturas e espacos comprimidos
   para fechar dentro de 100vh, descontado o cabecalho.
   ========================================================== */
.hero--foto{padding-top:calc(var(--topo) + 18px);padding-bottom:26px;
  min-height:100svh;display:flex;align-items:center}
.hero--foto .hero__inner{width:100%}
.hero--foto .hero__titulo{font-size:clamp(27px,2.9vw,42px);line-height:1.06;margin-bottom:14px}
.hero--foto .hero__sub{font-size:15.5px;line-height:1.55;max-width:50ch;margin-bottom:0}
.hero--foto .hero__checks{margin-top:18px;gap:9px 12px}
.hero--foto .hero__checks li{font-size:13.5px;padding:9px 12px}
.hero--foto .hero__garantia{margin-top:16px;font-size:14.5px}
.hero--foto .hero__acoes{margin-top:18px;gap:12px}
.hero--foto .hero__acoes .btn{padding:14px 22px;font-size:15px}
.hero--foto .hero__media{min-height:0;height:100%}

@media(max-height:820px){
  .hero--foto .hero__titulo{font-size:clamp(25px,2.5vw,34px)}
  .hero--foto .hero__checks li{padding:8px 11px;font-size:13px}
  .hero--foto .hero__sub{font-size:15px}
}
@media(max-width:1000px){
  .hero--foto{min-height:0;padding-bottom:40px;display:block}
}

/* a faixa passava por cima dos cards da coluna de texto: fica contida na
   coluna da imagem, com um sangramento pequeno so na borda direita */
.hero__faixa{left:-4%;right:-12%}
@media(max-width:1000px){.hero__faixa{left:-10%;right:-10%}}

/* faixa: menor, mais inclinada e sempre a direita da coluna de texto */
.hero__faixa{left:3%;right:-10%;bottom:18%;height:clamp(104px,11.5vw,158px);
  transform:rotate(-14deg);border-radius:14px}
@media(max-width:1000px){
  .hero__faixa{left:-6%;right:-6%;height:clamp(92px,20vw,130px);transform:rotate(-11deg)}
}

/* ==========================================================
   02 · H1 maior com quebras fixas, cards uniformes, engenheiro maior
   ========================================================== */
.hero--foto .hero__titulo{font-size:clamp(31px,3.5vw,50px);line-height:1.04;
  letter-spacing:-.035em;margin-bottom:16px}
/* no empilhado as quebras manuais atrapalham: o texto flui sozinho */
@media(max-width:900px){
  .hero--foto .hero__titulo br{display:none}
}

/* faixa de confianca: quatro cards do mesmo tamanho, texto centrado
   verticalmente — antes um quebrava em duas linhas e desalinhava a fileira */
.hero--foto .hero__checks{gap:10px;align-items:stretch}
.hero--foto .hero__checks li{min-height:52px;padding:10px 14px;font-size:13.5px;
  line-height:1.32;align-items:center;border-radius:12px}

/* engenheiro maior */
.hero__foto{max-height:clamp(480px,53vw,740px)}
@media(max-width:1000px){.hero__foto{max-height:420px}}

/* o engenheiro estava preso na largura da coluna (img{max-width:100%} global):
   liberado para ultrapassar, que e o que deixa ele realmente grande. A hero
   tem overflow:hidden, entao nao cria barra de rolagem */
.hero__foto{max-width:none;width:auto;max-height:clamp(500px,56vw,780px)}
@media(max-width:1000px){.hero__foto{max-width:100%;max-height:420px}}

/* linha de divisao entre a hero e a proxima secao */
.hero{position:relative}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;z-index:5;
  background:linear-gradient(90deg,var(--marinho) 0%,#0A2E6B 38%,#1F7FC0 72%,var(--azul) 100%)}

/* com o engenheiro maior a faixa sumiu atras dele: sobe um pouco e alonga
   para a direita, para aparecer dos dois lados sem tocar a coluna de texto */
.hero__faixa{left:6%;right:-18%;bottom:30%;height:clamp(96px,10vw,140px);
  transform:rotate(-15deg)}
@media(max-width:1000px){
  .hero__faixa{left:-4%;right:-10%;bottom:22%;height:clamp(88px,18vw,120px)}
}

/* engenheiro um pouco menor */
.hero__foto{max-height:clamp(430px,46vw,640px)}
@media(max-width:1000px){.hero__foto{max-height:390px}}

/* ==========================================================
   02 · o engenheiro nunca passa da primeira tela
   ----------------------------------------------------------
   Antes o tamanho vinha de vw (largura da janela): em tela larga e baixa ele
   estourava e era cortado embaixo. Agora vem da ALTURA visivel, descontando o
   cabecalho e os respiros da hero — ou seja, o limite e a propria dobra.
   ========================================================== */
.hero__foto{max-height:min(calc(100svh - 150px),720px)}
@media(max-width:1000px){.hero__foto{max-height:min(calc(100svh - 190px),400px)}}

/* volta ao tamanho anterior do engenheiro (o "diminui um pouco"), mas
   mantendo o teto da dobra: nunca passa da primeira tela nem corta */
.hero__foto{max-height:min(640px,calc(100svh - 150px))}
@media(max-width:1000px){.hero__foto{max-height:min(390px,calc(100svh - 190px))}}

/* ==========================================================
   02 · o engenheiro encosta na linha e ela passa por cima dele
   ----------------------------------------------------------
   O corte deixa de ser acidente e vira acabamento: a foto desce um pouco alem
   do fim da hero, o overflow:hidden corta, e a linha de degrade fica POR CIMA
   dessa emenda. A hero continua fechando dentro da primeira tela.
   ========================================================== */
.hero{overflow:hidden}
.hero__media{align-items:flex-end}
.hero__foto{max-height:min(700px,calc(100svh - 104px));margin-bottom:-38px}
.hero::after{height:6px;z-index:8;
  box-shadow:0 -10px 24px rgba(0,7,51,.16)}
@media(max-width:1000px){
  .hero__foto{max-height:min(420px,calc(100svh - 170px));margin-bottom:-24px}
}

/* ==========================================================
   02 · faixa de segmento: maior, com nome na ponta e abre no hover
   ----------------------------------------------------------
   Em repouso a faixa aparece so pela ponta, ao lado do engenheiro, com o nome
   do segmento. No hover ela cresce e desliza POR TRAS dele, revelando a foto.
   O padrao serve para os outros segmentos que vao entrar depois.
   ========================================================== */
.hero__faixa{left:14%;right:-16%;bottom:28%;height:clamp(118px,12.5vw,172px);
  transform:rotate(-15deg);pointer-events:auto;cursor:default;
  display:flex;align-items:center;justify-content:flex-end;
  transition:left .55s var(--ease),right .55s var(--ease),height .55s var(--ease),
             box-shadow .55s var(--ease)}

/* o nome fica na ponta direita, que e a parte que sobra do engenheiro */
.hero__faixa-rot{position:relative;z-index:2;padding:0 20px 0 0;
  font-size:clamp(11px,1vw,13px);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,7,51,.6)}
.hero__faixa-rot::before{content:'';display:inline-block;width:18px;height:2px;
  background:var(--azul);margin-right:10px;vertical-align:middle}

/* abre: cresce para os dois lados e passa por tras do engenheiro */
.hero__faixa:hover{left:-16%;right:-24%;height:clamp(150px,16vw,220px);
  box-shadow:0 34px 70px rgba(0,7,51,.34)}

@media(max-width:1000px){
  .hero__faixa{left:2%;right:-10%;height:clamp(98px,19vw,132px)}
  .hero__faixa:hover{left:-10%;right:-14%}
}
@media(prefers-reduced-motion:reduce){
  .hero__faixa{transition:none}
}

/* ==========================================================
   4b · big numbers soltos, fora do card
   ----------------------------------------------------------
   Sem caixa: o numero e o rotulo ficam direto sobre a faixa clara da secao.
   Como o fundo voltou a ser claro, o texto volta para o navy.
   ========================================================== */
.sobre__numeros{gap:clamp(24px,3vw,44px);margin-top:26px}
.sobre__num{background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0}
.sobre__num::before{display:none}
.sobre__num strong{font-size:clamp(52px,6vw,76px);line-height:.9;margin-bottom:6px;
  color:var(--azul-esc);-webkit-text-fill-color:var(--azul-esc)}
.sobre__num .sobre__num-rot{color:var(--marinho)!important;font-size:14.5px;font-weight:800}
.sobre__num .sobre__num-sub{color:var(--tinta-2)!important}

/* aberta, a faixa nao pode alcancar os cards da coluna de texto */
.hero__faixa:hover{left:2%;right:-26%}
@media(max-width:1000px){
  .hero__faixa:hover{left:-6%;right:-14%}
}

/* ==========================================================
   02 · no hover a faixa abre E revela a foto em cor original
   ----------------------------------------------------------
   O veu azul sai de cena no hover: a subestacao aparece como e, e o engenheiro
   passa a parecer que esta dentro daquele ambiente. O veu virou pseudo-elemento
   proprio justamente para poder ser animado (nao da para transicionar
   background-image).
   ========================================================== */
.hero__faixa{background-size:cover;background-position:center 42%}
.hero__faixa::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:1;
  background:linear-gradient(120deg,rgba(0,7,51,.92) 0%,rgba(10,46,107,.76) 52%,rgba(31,127,192,.60) 100%);
  transition:opacity .55s var(--ease)}
.hero__faixa:hover::before{opacity:0}

/* sem o veu, o nome precisa de mais apoio para continuar legivel sobre a foto */
.hero__faixa-rot{text-shadow:0 1px 3px rgba(0,7,51,.9),0 4px 18px rgba(0,7,51,.8)}
@media(prefers-reduced-motion:reduce){
  .hero__faixa::before{transition:none}
}

/* ==========================================================
   4b · big numbers com mais presenca (sem voltar para dentro de card)
   ----------------------------------------------------------
   Numeral grande com o degrade dos azuis de apoio, barra de acento em cima e
   rotulo em caixa alta. O brilho e um drop-shadow no proprio numero, que e o
   que da volume sem precisar de caixa.
   ========================================================== */
.sobre__numeros{gap:clamp(30px,3.6vw,56px);margin-top:30px}
.sobre__num{position:relative;padding-top:20px!important}
.sobre__num::after{content:'';position:absolute;left:0;top:0;width:48px;height:4px;
  border-radius:2px;background:var(--grad-apoio)}
.sobre__num strong{font-size:clamp(62px,7.2vw,96px);line-height:.86;letter-spacing:-.05em;
  margin-bottom:10px;
  background:linear-gradient(140deg,var(--marinho) 0%,var(--apoio-2) 45%,var(--azul) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 22px rgba(31,127,192,.26))}
.sobre__num .sobre__num-rot{text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;
  font-weight:800;color:var(--marinho)!important}
.sobre__num .sobre__num-sub{margin-top:8px;font-size:13px}

/* ==========================================================
   05 · escopo em paineis que se empilham no scroll
   ----------------------------------------------------------
   Tecnica: position:sticky com um top ligeiramente maior a cada painel, mais
   margin-bottom para dar o curso da rolagem. Cada painel para sob o cabecalho
   e o proximo sobe por cima, deixando a borda do anterior aparecendo. Puro CSS,
   sem biblioteca — o mesmo padrao ja usado em outra LP da fabrica.
   ========================================================== */
.escopo__grade{display:block!important;max-width:1000px;margin-left:auto;margin-right:auto}
.escopo-card{position:sticky;margin-bottom:clamp(22px,3.2vw,40px);
  min-height:clamp(230px,26vw,290px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.2vw,44px);
  transform:none;transition:box-shadow .3s var(--ease)}
.escopo-card:hover{transform:none}
.escopo-card:nth-child(1){top:calc(var(--topo) + 14px);z-index:1}
.escopo-card:nth-child(2){top:calc(var(--topo) + 26px);z-index:2}
.escopo-card:nth-child(3){top:calc(var(--topo) + 38px);z-index:3}
.escopo-card:nth-child(4){top:calc(var(--topo) + 50px);z-index:4}
.escopo-card:nth-child(5){top:calc(var(--topo) + 62px);z-index:5}
.escopo-card:last-child{margin-bottom:0}
.escopo-card h3{font-size:clamp(21px,2.2vw,28px);margin-bottom:14px}
.escopo-card p{font-size:clamp(14.5px,1.3vw,16.5px);max-width:62ch}
.escopo-card__entrega{margin-top:18px;padding-top:16px;font-size:15px}

@media(max-width:760px){
  /* no celular a sobreposicao atrapalha a leitura: vira lista comum */
  .escopo-card{position:static;min-height:0;padding:24px 22px;margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .escopo-card{position:static}
}

/* faixa um pouco maior nos dois estados; a borda esquerda em repouso e no
   hover fica onde estava, para continuar longe dos cards da coluna de texto */
.hero__faixa{left:10%;right:-22%;height:clamp(140px,14.5vw,200px)}
.hero__faixa:hover{left:2%;right:-30%;
  height:clamp(178px,18.5vw,250px)}
@media(max-width:1000px){
  .hero__faixa{left:0;right:-12%;height:clamp(112px,21vw,150px)}
  .hero__faixa:hover{left:-8%;right:-16%}
}

/* ==========================================================
   02 · faixa de confianca: quatro cards que leem igual
   ----------------------------------------------------------
   O icone de 30px comia largura e dois rotulos quebravam em duas linhas com
   sobra feia ("em toda / obra"). Icone menor, texto um ponto menor e
   text-wrap:balance — quando quebrar, quebra em partes parecidas.
   ========================================================== */
.hero--foto .hero__checks li{gap:11px;padding:12px 14px;font-size:13.5px;line-height:1.3;
  min-height:56px;align-items:center;text-wrap:balance}
.hero--foto .hero__checks li::before{flex:0 0 24px;width:24px;height:24px;border-radius:8px}
.hero--foto .hero__checks li::after{left:26px;width:8px;height:4.5px}
@media(max-width:1180px){
  .hero--foto .hero__checks li{font-size:13px;padding:11px 12px}
}

/* ==========================================================
   02 · seis faixas de segmento atras do engenheiro
   ----------------------------------------------------------
   Uma faixa por frente da Avolve. Altura e posicao em % da propria hero (nao
   em vw) para o espacamento entre elas nao mudar quando a tela muda de
   proporcao. Cada faixa desce um degrau e avanca um pouco mais para a direita:
   como a silhueta do engenheiro alarga para baixo, so assim o nome de cada
   frente fica fora do corpo dele. O hover e individual — a faixa apontada
   cresce em torno do proprio centro, sobe de z-index e perde o veu azul.
   ========================================================== */
.hero__faixa{--b:29%;--r:-22%;bottom:var(--b);right:var(--r);height:8.6%;min-height:44px;
  border-radius:16px;
  transition:left .5s var(--ease),right .5s var(--ease),height .5s var(--ease),
             bottom .5s var(--ease),box-shadow .5s var(--ease)}
.hero__faixa--projeto   {--b:70.5%;--r:-20%}
.hero__faixa--instalacao{--b:59.5%;--r:-24%}
.hero__faixa--subestacao{--b:48.5%;--r:-28%}
.hero__faixa--cftv     {--b:37.5%;--r:-33%}
.hero__faixa--laudo     {--b:26.5%;--r:-38%}
.hero__faixa--manutencao{--b:15.5%;--r:-44%}

.hero__faixa:hover{height:14%;bottom:calc(var(--b) - 2.7%);right:calc(var(--r) - 4%);z-index:1}

/* cada faixa com a foto da propria frente */
.hero__faixa--projeto{background-position:center 46%}
.hero__faixa--instalacao{background-position:center 50%}
.hero__faixa--subestacao{background-position:center 42%}
.hero__faixa--laudo{background-position:center 40%}
.hero__faixa--manutencao{background-position:center 46%}

/* a foto de projeto e clara e a de laudo tem area clara: sem apoio, o nome
   branco sumiria quando o veu sai. Este degrade so na ponta direita segura a
   legenda em qualquer uma das fotos. */
.hero__faixa::after{content:'';display:block;position:absolute;right:0;top:0;bottom:0;left:auto;
  width:clamp(130px,34%,290px);height:auto;border-radius:inherit;z-index:1;opacity:0;
  background:linear-gradient(270deg,rgba(0,7,51,.9) 0%,rgba(0,7,51,.62) 45%,rgba(0,7,51,0) 100%);
  transition:opacity .5s var(--ease)}
.hero__faixa:hover::after{opacity:1}

.hero__faixa-rot{font-size:clamp(10px,.72vw,12px);letter-spacing:.13em;padding-right:16px}
.hero__faixa-rot::before{width:14px;margin-right:8px}

@media(max-width:1000px){
  /* empilhado o engenheiro fica menor: as faixas viram tarjas curtas e o
     leque some, senao elas passariam da borda da tela */
  .hero__faixa{height:10.5%;min-height:36px;--r:-10%}
  .hero__faixa--projeto{--b:74%}
  .hero__faixa--instalacao{--b:61%}
  .hero__faixa--subestacao{--b:48%}
  .hero__faixa--cftv{--b:35%}
  .hero__faixa--laudo{--b:22%}
  .hero__faixa--manutencao{--b:9%}
  .hero__faixa:hover{height:15%}
  .hero__faixa-rot{font-size:9.5px;letter-spacing:.1em;padding-right:12px}
  .hero__faixa-rot::before{width:10px;margin-right:6px}
}
@media(prefers-reduced-motion:reduce){
  .hero__faixa,.hero__faixa::after{transition:none}
}

/* ==========================================================
   05 · painel de escopo com foto da frente e CTA proprio
   ----------------------------------------------------------
   O painel era metade texto e metade vazio. A foto entra do lado direito com
   mascara em degrade, entao ela nasce do proprio fundo do card em vez de virar
   um retangulo colado. No hover o veu azul sai e a foto aparece em cor
   original — mesmo gesto das faixas da hero. Cada painel ganhou o botao de
   orcamento, que leva para o formulario.
   ========================================================== */
.escopo-card{overflow:hidden;isolation:isolate}
.escopo-card__txt{position:relative;z-index:2;max-width:min(560px,56%)}
.escopo-card--sem-foto .escopo-card__txt{max-width:min(720px,88%)}

.escopo-card__foto{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1;
  overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 68%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 68%)}
.escopo-card__foto img{width:100%;height:100%;object-fit:cover;display:block}
.escopo-card__foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(0,7,51,.62) 0%,rgba(10,46,107,.34) 60%,rgba(31,127,192,.18) 100%);
  transition:opacity .45s var(--ease)}
.escopo-card:hover .escopo-card__foto::after{opacity:0}

.escopo-card__cta{display:inline-flex;margin-top:clamp(18px,2.2vw,26px);
  font-size:14.5px;padding:12px 20px}
.escopo-card p{max-width:none}

@media(max-width:1180px){
  .escopo-card__foto{width:42%}
  .escopo-card__txt{max-width:min(520px,60%)}
}
@media(max-width:760px){
  /* empilhado, a foto vira uma tarja no topo do painel */
  .escopo-card{flex-direction:column;overflow:hidden}
  .escopo-card__foto{position:relative;width:auto;margin:-24px -22px 18px;height:132px;
    -webkit-mask-image:none;mask-image:none}
  .escopo-card__txt,.escopo-card--sem-foto .escopo-card__txt{max-width:100%}
  .escopo-card__cta{width:100%;justify-content:center;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
  .escopo-card__foto::after{transition:none}
}

/* endereco da sede no rodape */
.rodape__endereco{font-style:normal;margin-top:12px;font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.78)}

/* ==========================================================
   02 · faixas de segmento retas, alinhadas pela direita
   ----------------------------------------------------------
   Pedido do operador: sem rotacao e com o nome de cada frente inteiro.
   A ponta direita agora para 24px antes da borda da tela — calc(580px - 50vw)
   e a distancia entre a borda do container (max 1240 + padding 64) e a janela
   — entao o nome nunca sai da tela, em nenhuma largura. Com a faixa chegando
   ate la, o nome tambem cai fora da silhueta do engenheiro em qualquer altura.
   As seis ficam do mesmo tamanho; o mouse continua abrindo cada uma.
   ========================================================== */
.hero__faixa{transform:none;--r:0px;
  left:9%;right:max(calc(580px - 50vw),-46%);
  height:12%;min-height:52px;border-radius:14px;
  align-items:center;justify-content:flex-end}
.hero__faixa--projeto   {--b:75%}
.hero__faixa--instalacao{--b:61%}
.hero__faixa--subestacao{--b:47%}
.hero__faixa--cftv     {--b:33%}
.hero__faixa--laudo     {--b:19%}
.hero__faixa--manutencao{--b:5%}

/* o mouse ainda faz a faixa crescer: ela abre em torno do proprio centro e
   avanca para a esquerda, passando por tras do engenheiro */
.hero__faixa:hover{height:19.5%;bottom:calc(var(--b) - 3.75%);left:1%;
  right:max(calc(572px - 50vw),-48%);z-index:1;
  box-shadow:0 30px 64px rgba(0,7,51,.34)}

.hero__faixa-rot{font-size:clamp(10.5px,.74vw,12.5px);letter-spacing:.12em;padding-right:18px}

@media(max-width:1000px){
  .hero__faixa{left:2%;right:-2%;height:12.5%;min-height:40px}
  .hero__faixa:hover{left:-2%;right:-4%;height:17%}
  .hero__faixa--projeto{--b:75%}
  .hero__faixa--instalacao{--b:61%}
  .hero__faixa--subestacao{--b:47%}
  .hero__faixa--cftv{--b:33%}
  .hero__faixa--laudo{--b:19%}
  .hero__faixa--manutencao{--b:5%}
}

/* ==========================================================
   06 · como trabalhamos vira linha do tempo
   ----------------------------------------------------------
   O numero sai de dentro do card e sobe para cima da linha: assim os quatro
   passos leem como uma sequencia, nao como quatro cards soltos. A linha para
   exatamente no centro do primeiro e do ultimo circulo — dai o calculo com a
   propria gap da grade. No celular a linha fica em pe, do lado esquerdo.
   ========================================================== */
.passos{--gap:clamp(18px,2.2vw,30px);gap:var(--gap);position:relative;
  padding-top:clamp(58px,6vw,76px);align-items:stretch}
.passos::before{content:'';position:absolute;top:clamp(25px,2.6vw,32px);
  left:calc((100% - 3 * var(--gap)) / 8);right:calc((100% - 3 * var(--gap)) / 8);
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--apoio-1) 0%,var(--apoio-3) 55%,var(--azul) 100%)}
.passo{padding-top:clamp(26px,2.8vw,34px)}
.passo__n{position:absolute;top:calc(-1 * clamp(58px,6vw,76px));left:50%;
  transform:translateX(-50%);width:clamp(46px,4.4vw,56px);height:clamp(46px,4.4vw,56px);
  font-size:clamp(17px,1.7vw,21px);font-weight:800;border-radius:50%;z-index:2;
  background:var(--azul);color:var(--marinho);
  box-shadow:0 0 0 7px #EDF5FB,0 10px 24px rgba(0,7,51,.24)}
.passo:hover .passo__n{box-shadow:0 0 0 7px #EDF5FB,0 14px 30px rgba(31,127,192,.4)}

@media(max-width:860px){
  .passos{grid-template-columns:1fr;padding-top:0;padding-left:clamp(56px,14vw,68px);gap:16px}
  .passos::before{top:22px;bottom:22px;left:clamp(22px,6.4vw,27px);right:auto;width:3px;height:auto;
    background:linear-gradient(180deg,var(--apoio-1) 0%,var(--apoio-3) 55%,var(--azul) 100%)}
  .passo{padding-top:22px}
  .passo__n{top:20px;left:calc(-1 * clamp(56px,14vw,68px));transform:none;
    width:clamp(40px,10vw,48px);height:clamp(40px,10vw,48px);box-shadow:0 0 0 6px #EDF5FB}
}

/* ==========================================================
   07 · FAQ em azul escuro
   ----------------------------------------------------------
   Pedido do operador: os cards da FAQ passam para o mesmo degrade escuro dos
   outros cards da pagina. O fundo da secao continua claro, entao o contraste
   do texto branco sobre o card vem do proprio degrade.
   ========================================================== */
.faq__item{background:linear-gradient(152deg,var(--marinho) 0%,#0A2E6B 52%,#2E93CF 100%);
  border-color:rgba(143,220,245,.22);box-shadow:0 14px 34px rgba(0,7,51,.2)}
.faq__item summary{color:#fff}
.faq__item summary:hover{color:var(--azul-claro)}
.faq__item summary::after{border-right-color:var(--azul);border-bottom-color:var(--azul)}
.faq__item p{color:rgba(255,255,255,.86)}
.faq__item[open]{border-color:transparent;
  box-shadow:0 18px 40px rgba(0,7,51,.28),0 0 0 1.5px rgba(55,188,234,.6)}
.faq__item[open] summary{color:var(--azul-claro)}

/* ==========================================================
   02 · video de fundo da hero (espelhado)
   ----------------------------------------------------------
   O traçado do video se concentra num lado so. Espelhado no eixo X, esse lado
   cai atras do engenheiro e das faixas e o lado do texto fica limpo — por isso
   o scaleX(-1). O veu branco por cima e mais forte na coluna do texto e quase
   transparente do lado da imagem, para o contraste do H1 nao depender do
   quadro que estiver passando.
   ========================================================== */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1);z-index:0;pointer-events:none;opacity:.92}
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 34%,
             rgba(255,255,255,.44) 58%,rgba(255,255,255,.14) 100%)}
.hero__orb{z-index:1}
@media(max-width:900px){
  /* empilhado, o texto passa por cima do lado denso: o veu fica parelho */
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,
    rgba(255,255,255,.8) 46%,rgba(255,255,255,.5) 100%)}
}

/* video um pouco menor: o traçado fica mais fino e para de disputar com o H1.
   O fundo do proprio video e branco como o da hero, entao encolher nao deixa
   emenda visivel nas bordas. */
.hero__video{transform:scaleX(-1) scale(.82);opacity:.88}
@media(max-width:900px){.hero__video{transform:scaleX(-1) scale(.9)}}

/* ==========================================================
   02 · ajuste do video da hero
   ----------------------------------------------------------
   O video novo tem o fundo levemente mais quente que o da hero: encolhido,
   aparecia a emenda do retangulo. Ele volta a cobrir a secao inteira e quem
   segura o contraste agora e a mascara — que some do lado do texto. Como o
   elemento esta espelhado, a mascara e escrita ao contrario: opaca a esquerda
   no espaco local vira opaca a direita na tela.
   ========================================================== */
.hero__video{transform:scaleX(-1) scale(1.04);opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.5) 72%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.5) 72%,transparent 96%)}
.hero::before{background:linear-gradient(100deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 38%,
  rgba(255,255,255,.3) 64%,rgba(255,255,255,.08) 100%)}
@media(max-width:900px){
  .hero__video{transform:scaleX(-1) scale(1.04);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%)}
}

/* ==========================================================
   02 · faixas da hero com as fotos reais da Avolve
   ----------------------------------------------------------
   As fotos de banco sairam: cada faixa passa a mostrar a propria equipe em
   campo. A faixa de CFTV (que entrou no lugar da de energia fotovoltaica em
   08/10/2026) usa a foto de banco enviada pelo operador.
   ========================================================== */
.hero__faixa--projeto{background-image:url('assets/avolve-projeto.webp');
  background-position:center 58%}
.hero__faixa--instalacao{background-image:url('assets/avolve-instalacao.webp');
  background-position:center 44%}
.hero__faixa--subestacao{background-image:url('assets/avolve-subestacao.webp');
  background-position:center 48%}
.hero__faixa--laudo{background-image:url('assets/avolve-laudo.webp');
  background-position:center 42%}
.hero__faixa--manutencao{background-image:url('assets/avolve-equipe.webp');
  background-position:center 40%}
.hero__faixa--cftv{background-image:url('assets/avolve-cftv.webp');
  background-position:center 30%}

/* ==========================================================
   02 · faixas na altura em que a silhueta e estreita
   ----------------------------------------------------------
   Em 1440 o corredor da direita e menor que em 1680 e o engenheiro alarga da
   cintura para baixo: as duas ultimas faixas ficavam com o nome atras dele.
   As seis sobem para a metade de cima da hera, que e onde a silhueta e
   estreita, e a ordem passa a ser por comprimento do nome — o mais curto na
   faixa mais baixa, que e a de corredor mais apertado. Medido no engenheiro
   real (canal alfa), nao no olho.
   ========================================================== */
.hero__faixa{height:8%;min-height:44px}
.hero__faixa--projeto   {--b:88%}
.hero__faixa--instalacao{--b:78.8%}
.hero__faixa--laudo     {--b:69.6%}
.hero__faixa--cftv     {--b:60.4%}
.hero__faixa--manutencao{--b:51.2%}
.hero__faixa--subestacao{--b:42%}
.hero__faixa:hover{height:13%;bottom:calc(var(--b) - 2.5%)}

@media(max-width:1000px){
  .hero__faixa{height:9%;min-height:34px}
  .hero__faixa--projeto{--b:86%}
  .hero__faixa--instalacao{--b:75.5%}
  .hero__faixa--laudo{--b:65%}
  .hero__faixa--cftv{--b:54.5%}
  .hero__faixa--manutencao{--b:44%}
  .hero__faixa--subestacao{--b:33.5%}
  .hero__faixa:hover{height:13%;bottom:calc(var(--b) - 2%)}
}

/* ==========================================================
   02 · faixas de volta ao corpo que tinham
   ----------------------------------------------------------
   Com nome curto (o mesmo titulo que o card do escopo usa) o corredor da
   direita deixa de ser o limite, e as faixas voltam a ter altura de card em
   vez de fita. A ponta direita tambem para de esticar em tela larga: sem o
   teto de 170px ela ia ate a borda da janela em 2560 e as faixas viravam
   riscos compridos. A ordem e por comprimento do nome — o mais curto embaixo,
   que e onde o engenheiro e mais largo.
   ========================================================== */
.hero__faixa{height:10.5%;min-height:56px;
  right:max(calc(580px - 50vw),-170px)}
.hero__faixa--subestacao{--b:88%}
.hero__faixa--manutencao{--b:76.4%}
.hero__faixa--laudo     {--b:64.8%}
.hero__faixa--cftv     {--b:53.2%}
.hero__faixa--instalacao{--b:41.6%}
.hero__faixa--projeto   {--b:30%}
.hero__faixa:hover{height:16%;bottom:calc(var(--b) - 2.75%);
  right:max(calc(572px - 50vw),-178px)}

@media(max-width:1000px){
  .hero__faixa{height:11%;min-height:40px;right:-2%}
  .hero__faixa:hover{right:-4%;height:15%}
  .hero__faixa--subestacao{--b:86%}
  .hero__faixa--manutencao{--b:73.6%}
  .hero__faixa--laudo{--b:61.2%}
  .hero__faixa--cftv{--b:48.8%}
  .hero__faixa--instalacao{--b:36.4%}
  .hero__faixa--projeto{--b:24%}
}

/* ==========================================================
   08 · mapa da sede na coluna do contato
   ----------------------------------------------------------
   O espaco embaixo dos cards estava vazio. O mapa entra como card, no mesmo
   raio dos outros, com o endereco e o atalho de rota no rodape do proprio
   card. O iframe e lazy: em tela cheia de formulario, ninguem paga o Google
   antes de rolar ate aqui.
   ========================================================== */
.contato__mapa{margin:clamp(18px,2.4vw,26px) 0 0;border-radius:var(--raio);overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(143,220,245,.26);
  box-shadow:0 18px 44px rgba(0,7,51,.3)}
.contato__mapa iframe{display:block;width:100%;height:clamp(200px,22vw,260px);border:0;
  filter:saturate(.92)}
.contato__mapa figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;padding:14px 18px;background:rgba(0,7,51,.55)}
.contato__mapa-end{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.86)}
.contato__mapa-rota{font-size:13.5px;font-weight:800;color:var(--azul);white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.contato__mapa-rota:hover{color:var(--azul-claro)}
@media(max-width:640px){
  .contato__mapa figcaption{flex-direction:column;align-items:flex-start}
}

/* ==========================================================
   09 · MOBILE — hero: as faixas viram grade de frentes
   ----------------------------------------------------------
   Em 375px o engenheiro ocupa a largura inteira: nao sobra corredor dos lados,
   entao as faixas passavam por cima do rosto dele e o nome ficava atras do
   ombro. Aqui elas deixam de ser camada de fundo e viram uma grade de duas
   colunas embaixo da foto — mesma foto, mesmo nome, so que legivel. Sem hover
   no celular, o veu azul fica mais leve para a foto aparecer de cara.
   ========================================================== */
@media(max-width:900px){
  .hero__media{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;justify-content:center;
    min-height:0;overflow:visible;position:relative}
  .hero__foto{order:-1;flex:0 0 100%;width:auto;margin:0 auto -4px!important;
    max-height:min(278px,calc(100svh - 300px))!important}

  .hero__faixa{position:static;flex:1 1 calc(50% - 5px);min-width:0;
    height:auto;min-height:64px;left:auto;right:auto;bottom:auto;
    border-radius:14px;display:flex;align-items:flex-end;justify-content:flex-start;
    padding:10px 12px;box-shadow:0 10px 24px rgba(0,7,51,.2)}
  .hero__faixa:hover{height:auto;min-height:64px;left:auto;right:auto;bottom:auto}
  .hero__faixa::before{opacity:1;
    background:linear-gradient(160deg,rgba(0,7,51,.86) 0%,rgba(10,46,107,.6) 55%,rgba(31,127,192,.34) 100%)}
  .hero__faixa::after{display:none}
  .hero__faixa-rot{padding:0;font-size:11px;letter-spacing:.09em;white-space:normal;line-height:1.25}
  .hero__faixa-rot::before{width:12px;margin-right:7px}
}

/* a linha do tempo no celular terminava com um rabo abaixo do ultimo numero */
@media(max-width:860px){
  .passos::before{background:linear-gradient(180deg,var(--apoio-1) 0%,var(--apoio-3) 52%,
    var(--azul) 78%,rgba(55,188,234,0) 100%)}
}

/* ==========================================================
   02 · nome da faixa com respiro
   ----------------------------------------------------------
   O nome estava colado na ponta direita e pequeno demais para a altura que a
   faixa tem hoje. Corpo maior, traco mais longo e folga real ate a borda.
   ========================================================== */
.hero__faixa-rot{font-size:clamp(11.5px,.8vw,13.5px);letter-spacing:.1em;
  padding:0 clamp(20px,1.8vw,30px) 0 0}
.hero__faixa-rot::before{width:22px;height:2px;margin-right:12px}
@media(max-width:1000px){
  .hero__faixa-rot{font-size:11px;padding-right:14px}
  .hero__faixa-rot::before{width:14px;margin-right:8px}
}

/* ==========================================================
   04b · tira de foto da equipe em campo
   ----------------------------------------------------------
   Entre a secao escura do problema e a secao clara do sobre. A foto e a unica
   prova visual de equipe propria com EPI; o degrade navy segura a leitura do
   texto e costura a tira com a secao escura que vem antes.
   ========================================================== */
.tira-foto{position:relative;overflow:hidden;background:var(--marinho);
  min-height:clamp(240px,30vw,420px);display:flex;align-items:flex-end}
.tira-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%}
.tira-foto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,7,51,.92) 0%,rgba(0,7,51,.7) 38%,
             rgba(0,7,51,.18) 74%,rgba(0,7,51,.04) 100%)}
.tira-foto__texto{position:relative;z-index:2;width:100%;
  padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(26px,3.6vw,44px)}
.tira-foto .kicker{color:var(--azul-claro);margin-bottom:10px}
.tira-foto__linha{font-size:clamp(19px,2.2vw,30px);font-weight:800;color:#fff;
  max-width:22ch;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
@media(max-width:760px){
  .tira-foto{min-height:290px}
  .tira-foto img{object-position:center 34%}
  .tira-foto::after{background:linear-gradient(180deg,rgba(0,7,51,.34) 0%,
    rgba(0,7,51,.62) 52%,rgba(0,7,51,.92) 100%)}
  .tira-foto__linha{max-width:100%}
}

/* ==========================================================
   09 · MOBILE — correcoes da grade da hero e dos numeros
   ----------------------------------------------------------
   1. O veu de cada faixa e um ::before absoluto. Com a faixa em position:static
      o bloco de referencia virava a .hero__media inteira: os seis veus se
      empilhavam e pintavam um retangulo navy por cima de tudo. Voltando a
      position:relative, cada veu fica dentro da propria faixa.
   2. A foto do engenheiro estava presa a uma max-height menor que a altura
      natural na largura da coluna, e sobrava caixa vazia dos lados.
   3. Os dois big numbers ficam lado a lado — em coluna sobrava meia tela vazia.
   ========================================================== */
@media(max-width:900px){
  .hero__faixa{position:relative}
  .hero__foto{height:auto;max-height:none!important;margin:0 auto 2px!important}
}
@media(max-width:760px){
  .sobre__numeros{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .sobre__num strong{font-size:clamp(46px,13vw,64px)}
}

/* checks da hero com o conteudo centralizado no card */
.hero--foto .hero__checks li{justify-content:center}
@media(max-width:1080px){.hero--foto .hero__checks li{justify-content:flex-start}}

/* a tira de foto sobe mais: o corte passa a mostrar o uniforme com a marca,
   que e a parte que prova equipe propria */
.tira-foto img{object-position:65% 90%}
@media(max-width:760px){.tira-foto img{object-position:58% 74%}}

/* ==========================================================
   02 · o hover das faixas volta a pegar
   ----------------------------------------------------------
   A foto do engenheiro e um PNG com fundo transparente, mas a CAIXA dela
   cobre quase toda a area das faixas — e caixa transparente tambem recebe
   mouse. Depois que a ponta direita das faixas passou a ter teto, sobrou so
   uma tira fina fora da caixa dele, e o hover quase nunca acontecia. Como a
   foto nao e clicavel, ela deixa o mouse passar direto.
   ========================================================== */
.hero__foto{pointer-events:none}

/* ==========================================================
   09 · MOBILE — a grade de frentes entra por tras do engenheiro
   ----------------------------------------------------------
   Mesmo gesto do desktop: os retangulos passam atras dele. A foto sobe uma
   camada e puxa a grade para cima com margem negativa. O avanco para em 36px
   porque o nome de cada frente fica na base do card — mais que isso e o ombro
   dele comeria a legenda.
   ========================================================== */
@media(max-width:900px){
  .hero__media{position:relative}
  .hero__foto{position:relative;z-index:3;margin-bottom:-46px!important}
  .hero__faixa{z-index:1}
}

/* a tira de foto fica mais baixa: ela e respiro entre duas secoes, nao secao */
.tira-foto{min-height:clamp(180px,20vw,290px)}
.tira-foto__texto{padding-top:clamp(30px,3.6vw,48px);padding-bottom:clamp(20px,2.4vw,30px)}
.tira-foto__linha{font-size:clamp(17px,1.8vw,25px)}
@media(max-width:760px){.tira-foto{min-height:220px}}

/* a linha da tira volta a ter corpo: a secao ficou mais baixa, o texto nao */
.tira-foto__linha{font-size:clamp(21px,2.5vw,34px);line-height:1.2;max-width:24ch}
.tira-foto .kicker{font-size:13px;letter-spacing:.18em}
@media(max-width:760px){
  .tira-foto__linha{font-size:clamp(19px,5.4vw,24px)}
}

/* video de fundo mais discreto atras do conteudo da hero */
.hero__video{opacity:.68}

/* ==========================================================
   02 · o "check" volta para dentro do icone
   ----------------------------------------------------------
   O quadrado era o ::before e o tique era o ::after, ancorado num left fixo.
   Assim que os cards passaram a centralizar o conteudo, o quadrado andou e o
   tique ficou para tras — dois cards apareciam sem o tique. Agora o tique e
   um SVG dentro do proprio quadrado: onde o quadrado for, ele vai junto.
   ========================================================== */
.hero--foto .hero__checks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"),
    linear-gradient(145deg,var(--marinho) 0%,var(--apoio-2) 60%,var(--apoio-3) 100%);
  background-size:58% 58%,100% 100%;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat}
.hero--foto .hero__checks li::after{display:none}

/* entre 1000 e 1160px o calculo da ponta direita ficava POSITIVO e puxava a
   faixa para dentro do container — o nome sumia atras do engenheiro. O clamp
   impede que ela encurte: no minimo 10px alem da borda do container. */
.hero__faixa{right:clamp(-170px,calc(580px - 50vw),-10px)}
.hero__faixa:hover{right:clamp(-178px,calc(572px - 50vw),-18px)}

/* ==========================================================
   02 · 901–1180px: a hero usa o mesmo desenho do celular
   ----------------------------------------------------------
   Nessa faixa o container ja bateu no maximo mas a janela ainda e estreita: o
   corredor a direita do engenheiro some e os nomes das duas ultimas faixas
   ficavam atras dele (medido: -160px de folga em 1024). Em vez de espremer o
   nome, a hero passa a uma coluna so e as frentes viram grade de tres colunas
   embaixo da foto — mesmo gesto do celular, com a foto na frente delas.
   ========================================================== */
@media(min-width:901px) and (max-width:1180px){
  .hero--foto .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero--foto .hero__media{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
    align-items:stretch;min-height:0;overflow:visible;position:relative;margin-top:24px}
  .hero--foto .hero__foto{order:-1;flex:0 0 100%;width:auto;height:auto;
    max-height:min(360px,calc(100svh - 420px))!important;
    margin:0 auto -48px!important;position:relative;z-index:3}
  .hero--foto .hero__faixa{position:relative;z-index:1;flex:1 1 calc(33.333% - 8px);min-width:0;
    height:auto;min-height:66px;left:auto;right:auto;bottom:auto;transform:none;
    border-radius:14px;display:flex;align-items:flex-end;justify-content:flex-start;
    padding:10px 13px;box-shadow:0 10px 24px rgba(0,7,51,.2)}
  .hero--foto .hero__faixa:hover{height:auto;min-height:66px;left:auto;right:auto;bottom:auto}
  .hero--foto .hero__faixa::before{opacity:1;
    background:linear-gradient(160deg,rgba(0,7,51,.86) 0%,rgba(10,46,107,.6) 55%,rgba(31,127,192,.34) 100%)}
  .hero--foto .hero__faixa::after{display:none}
  .hero--foto .hero__faixa-rot{padding:0;font-size:11px;letter-spacing:.09em;
    white-space:normal;line-height:1.25}
  .hero--foto .hero__faixa-rot::before{width:12px;margin-right:7px}
  .hero--foto .hero__checks{max-width:760px}
}

/* os quatro checks voltam a alinhar pela esquerda: centralizado, cada icone
   parava num x diferente e a coluna ficava desalinhada */
.hero--foto .hero__checks li{justify-content:flex-start}

/* ==========================================================
   09 · MOBILE — a base da foto dissolve em vez de ser cortada
   ----------------------------------------------------------
   A foto e um recorte que termina na cintura. Com a grade entrando por tras,
   a borda reta do recorte batia na primeira fila e parecia que os cards
   cortavam o engenheiro ao meio. Agora a base dele desvanece e o avanco caiu
   para 22px: os cards continuam atras, mas a emenda some.
   ========================================================== */
@media(max-width:900px){
  .hero__foto{margin-bottom:-22px!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,rgba(0,0,0,.4) 93%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 82%,rgba(0,0,0,.4) 93%,transparent 100%)}
}
@media(min-width:901px) and (max-width:1180px){
  .hero--foto .hero__foto{margin-bottom:-26px!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,rgba(0,0,0,.4) 94%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 84%,rgba(0,0,0,.4) 94%,transparent 100%)}
}

/* ==========================================================
   10 · assinatura da 28K no rodape
   ----------------------------------------------------------
   O credito vira logo clicavel para o site da agencia. O laranja da marca e a
   unica cor fora da paleta da LP — por isso ele entra em opacidade reduzida e
   so fecha no hover, sem brigar com o azul do rodape.
   ========================================================== */
.rodape__credito{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:13px;color:rgba(255,255,255,.66);transition:color .25s var(--ease)}
.rodape__credito img{height:22px;width:auto;opacity:.72;transition:opacity .25s var(--ease)}
.rodape__credito:hover{color:#fff}
.rodape__credito:hover img{opacity:1}
@media(max-width:600px){
  .rodape__credito{font-size:12.5px}
  .rodape__credito img{height:20px}
}

/* ==========================================================
   11 · cursor de ponto
   ----------------------------------------------------------
   O ponteiro do sistema so sai de cena quando o main.js confirma mouse fino
   (a classe .tem-cursor) — se o script nao rodar, ninguem fica sem cursor.
   O ponto vai colado no ponteiro. A mira de cantos que andava em volta dele
   saiu a pedido do operador (08/10/2026).
   ========================================================== */
.cursor{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
  transition:opacity .25s var(--ease)}
.cursor--on{opacity:1}

.cursor__ponto{position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--marinho);box-shadow:0 0 0 1.5px rgba(255,255,255,.55);will-change:transform;
  transition:width .2s var(--ease),height .2s var(--ease),border-radius .2s var(--ease),
             background .2s var(--ease)}

/* sobre coisa clicavel o ponto cresce e muda de cor */
.cursor--link .cursor__ponto{width:9px;height:9px;background:var(--azul-esc)}

/* sobre campo de texto vira cursor de digitacao */
.cursor--texto .cursor__ponto{width:2px;height:22px;border-radius:1px;background:var(--marinho);
  box-shadow:0 0 0 1px rgba(255,255,255,.5)}

/* clique: o ponto cresce */
.cursor--press .cursor__ponto{width:12px;height:12px}

/* o ponteiro do sistema sai so quando o ponto esta no ar */
@media (hover:hover) and (pointer:fine){
  /* varios componentes ja declaram o proprio cursor (pointer, default). Sem o
     !important eles reapareciam por especificidade e o ponteiro do sistema
     voltava em cima do ponto. */
  .tem-cursor,.tem-cursor *{cursor:none!important}
}
@media (pointer:coarse),(hover:none){
  .cursor{display:none}
}

/* ==========================================================
   11b · barra de rolagem com a cara da marca
   ----------------------------------------------------------
   Trilho gelo, polegar no degrade navy -> azul da marca, com folga de 3px
   feita com borda transparente e background-clip (e o unico jeito de dar
   respiro ao polegar no WebKit). O Firefox usa scrollbar-color, que so aceita
   cor chapada — vai o azul.
   ========================================================== */
/* o Chrome hoje entende scrollbar-width — e quando entende, ele IGNORA os
   pseudo-elementos ::-webkit-scrollbar e o degrade some. Por isso a versao
   padrao fica so para quem NAO tem os pseudo-elementos (Firefox). */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:var(--azul-esc) #E7F1F8}
}

::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,#F1F8FC 0%,#E3EFF7 100%)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--marinho) 0%,var(--apoio-2) 52%,var(--azul) 100%);
  border-radius:20px;border:3px solid transparent;background-clip:padding-box;
  min-height:56px}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--apoio-1) 0%,var(--apoio-3) 50%,var(--azul-claro) 100%);
  background-clip:padding-box}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,var(--azul-esc),var(--azul));background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* dentro das secoes escuras (formulario, rodape) o trilho acompanha */
.secao-marinho ::-webkit-scrollbar-track,
.rodape ::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}

/* ==========================================================
   12 · clientes: os 16 logos da LP atual da Avolve em faixa corrida
   ----------------------------------------------------------
   Os arquivos vem em cinza (e assim que a LP validada mostra). Faixa infinita
   com a lista duplicada; pausa no hover e para quem pediu menos movimento.
   ========================================================== */
.clientes{background:#fff;padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.clientes__titulo{text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-esc);margin-bottom:24px}
.clientes__faixa{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clientes__trilho{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;
  animation:clientesCorre 48s linear infinite}
.clientes__trilho img{height:clamp(46px,4.6vw,62px);width:auto;max-width:170px;object-fit:contain;opacity:.8;
  transition:opacity .25s var(--ease)}
.clientes__trilho img:hover{opacity:1}
.clientes__faixa:hover .clientes__trilho{animation-play-state:paused}
@keyframes clientesCorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.clientes__trilho{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* ==========================================================
   13 · depoimentos da LP atual: carrossel de cards
   ========================================================== */
.secao-depo{background:linear-gradient(180deg,#F4FAFD 0%,#EAF3FA 100%)}
.depo__carrossel{display:flex;align-items:center;gap:14px;margin-top:10px}
.depo__trilho{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 22px) / 3);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 24px;scrollbar-width:none}
.depo__trilho::-webkit-scrollbar{display:none}
.depo{scroll-snap-align:start;position:relative;margin:0;display:flex;flex-direction:column;gap:18px;
  padding:30px 26px 26px;border-radius:var(--raio);background:#fff;border:1px solid var(--linha);
  box-shadow:0 16px 38px rgba(0,7,51,.08)}
.depo__aspas{font-family:Georgia,serif;font-size:64px;line-height:.6;color:var(--azul);height:26px}
.depo__texto{margin:0;font-size:15px;line-height:1.65;color:var(--tinta-2);flex:1}
.depo__autor{display:flex;flex-direction:column;gap:3px;padding-top:16px;border-top:1px solid var(--linha)}
.depo__autor strong{font-size:15px;color:var(--marinho)}
.depo__autor span{font-size:13px;color:var(--azul-esc);font-weight:600}
.depo__seta{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--linha);box-shadow:0 8px 22px rgba(0,7,51,.1);color:var(--marinho);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease)}
.depo__seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.depo__seta:hover{background:var(--marinho);color:#fff}
.depo__seta[disabled]{opacity:.35;pointer-events:none}
@media(max-width:1080px){.depo__trilho{grid-auto-columns:calc((100% - 22px) / 2)}}
@media(max-width:680px){.depo__trilho{grid-auto-columns:88%}.depo__seta{display:none}}

/* sobre: tres numeros */
.sobre__numeros--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.sobre__numeros--3 .sobre__num strong{font-size:clamp(40px,4.6vw,64px)!important;white-space:nowrap}
@media(max-width:760px){.sobre__numeros--3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}
  .sobre__numeros--3 .sobre__num strong{font-size:clamp(30px,8.4vw,40px)!important}}

/* ==========================================================
   03 · credenciais em grade de 4, com o texto sempre visivel
   ----------------------------------------------------------
   Sobrava do "baralho" (cartas empilhadas) a margem negativa, a rotacao e a
   descricao escondida ate o hover. Com a grade de 4 por cima, as cartas se
   sobrepunham e o texto novo — o da LP validada — so aparecia passando o
   mouse. Agora e grade limpa, texto aberto.
   ========================================================== */
@media (hover:hover) and (min-width:901px){
  .cred,.cred:first-child,.cred__grade:hover .cred,.cred__grade:hover .cred:first-child{margin-left:0!important;transform:none!important}
  .cred__grade:hover .cred:hover{transform:translateY(-6px)!important}
  .cred span,.cred__grade:hover .cred span{max-height:none!important;opacity:1!important;margin-top:6px}
}
.cred{justify-content:flex-start}
.cred strong{font-size:16px}
.cred span{font-size:13.5px;line-height:1.55}

/* numeros do sobre: a unidade (min, h) vira sobrescrito menor, para "5 min"
   caber na coluna — antes o texto passava da caixa e o degrade (que so pinta
   dentro da caixa) cortava o "n". O drop-shadow tambem sai: com o texto em
   degrade ele desenhava o retangulo da caixa atras do numero. */
.sobre__numeros--3 .sobre__num strong{display:inline-block;white-space:nowrap;filter:none!important;
  font-size:clamp(46px,5.2vw,78px)!important;padding-right:.04em}
.sobre__num-un{font-size:.4em;font-weight:800;letter-spacing:0;margin-left:.1em}
@media(max-width:760px){.sobre__numeros--3 .sobre__num strong{font-size:clamp(34px,10vw,46px)!important}}

/* ==========================================================
   WhatsApp com captura de dados (08/10/2026)
   ----------------------------------------------------------
   O documento de tags dispensa o RD Station e pede o botao de WhatsApp feito
   na propria pagina, gravando os dados em planilha. O botao flutuante (.zap)
   abre uma janela curta (nome, empresa, telefone); ao confirmar, os dados vao
   para a planilha e a conversa abre no WhatsApp da Avolve.
   ========================================================== */
button.zap{border:0;cursor:pointer;padding:0}
.zap{z-index:118}
.zap::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(18,140,75,.55);
  opacity:0;animation:zapPulso 2.8s ease-out infinite;pointer-events:none}
@keyframes zapPulso{0%{transform:scale(.86);opacity:.9}70%,100%{transform:scale(1.28);opacity:0}}
@media(prefers-reduced-motion:reduce){.zap::after{animation:none}}
.zapj[hidden]{display:none}
.zapj{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:20px}
/* aberta por um botao de chamada da pagina: no centro. No celular continua subindo de baixo. */
.zapj--centro{align-items:center;justify-content:center}
.zapj__fundo{position:absolute;inset:0;background:rgba(0,7,51,.55);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);animation:zapFundo .25s ease both}
.zapj__caixa{position:relative;z-index:1;width:min(400px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  background:#fff;border:1px solid var(--linha);border-radius:20px;padding:26px 24px 22px;
  box-shadow:0 30px 80px rgba(0,7,51,.42);animation:zapSobe .34s var(--ease) both}
@keyframes zapFundo{from{opacity:0}to{opacity:1}}
@keyframes zapSobe{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.zapj__fundo,.zapj__caixa{animation:none}}
.zapj__x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);
  background:#fff;color:var(--marinho);font-size:20px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.zapj__x:hover{background:var(--gelo);border-color:var(--azul)}
.zapj__kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zap);margin-bottom:8px}
.zapj__kicker svg{width:18px;height:18px;flex:none}
.zapj__titulo{font-size:22px;font-weight:800;line-height:1.2;color:var(--marinho);letter-spacing:-.02em;
  margin-bottom:6px;padding-right:34px}
.zapj__apoio{font-size:14.5px;line-height:1.55;color:var(--tinta-2);margin-bottom:18px}
.zapj .campo{margin-bottom:14px}
.zapj label{display:block;font-size:12.5px;font-weight:700;color:var(--marinho);margin-bottom:6px}
.zapj label span[aria-hidden]{color:var(--azul-esc)}
.zapj input[type="text"],.zapj input[type="tel"]{width:100%;background:#fff;border:1px solid var(--linha);
  border-radius:10px;padding:12px 14px;font-family:inherit;font-size:16px;color:var(--marinho);
  transition:border-color .22s,box-shadow .22s}
.zapj input::placeholder{color:#9AA4B4}
.zapj input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(55,188,234,.28)}
.zapj .campo.erro input{border-color:#D64545;background:#FFF6F6}
.zapj__aviso{display:none;font-size:12.5px;color:#B3261E;margin-top:5px}
.zapj .campo.erro .zapj__aviso{display:block}
.zapj__isca{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.zapj__ir{width:100%;margin-top:4px;padding:15px 18px;border:0;border-radius:12px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;
  font-size:16px;font-weight:800;color:#fff;background:var(--zap);
  box-shadow:0 12px 28px rgba(18,140,75,.34);transition:background .22s,transform .22s var(--ease)}
.zapj__ir:hover{background:#0f7a41;transform:translateY(-2px)}
.zapj__ir svg{width:20px;height:20px;flex:none}
.zapj__legal{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--tinta-2);text-align:center}
@media(max-width:600px){
  .zapj{padding:0;align-items:flex-end;justify-content:center}
  .zapj__caixa{width:100%;border-radius:20px 20px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));
    max-height:92dvh}
}
/* botao de WhatsApp dentro da secao de contato */
.contato__zap{margin-top:clamp(16px,2vw,22px);display:inline-flex}
.contato__zap.btn--zap{box-shadow:0 12px 28px rgba(18,140,75,.30)}
/* aviso do formulario quando o envio depende do WhatsApp */
.form__aviso{display:none;margin:14px 0 0;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5;
  background:rgba(18,140,75,.10);border:1px solid rgba(18,140,75,.45);color:var(--marinho)}
.form__aviso.on{display:block}
.form__aviso a{color:#0B6B3A;font-weight:800;text-decoration:underline;text-underline-offset:2px}