/* ==========================================================================
   Horizonte Engenharia Estrutural
   Paleta e tipografia derivadas da marca real (ver design-system/tokens.md)
   Forma de assinatura: FILETE DUPLO (.fd) — sempre elemento real, nunca ::before
   ========================================================================== */

:root{
  /* superfícies */
  --papel:#F4F6F8;
  --branco:#FFFFFF;
  --linha:#DCE2E9;
  --linha-forte:#C2CEDC;

  /* marca */
  --navy:#0B2D52;
  --navy-fundo:#071E37;

  /* tinta */
  --tinta:#1E2934;
  --tinta-media:#5A6673;

  /* tom vivo (mesma família de matiz, sem segundo hue no site) */
  --aco:#0F5089;
  --aco-claro:#8FC0EA;
  --sobre-navy:#FFFFFF;
  --sobre-navy-medio:#B9C6D6;

  /* tipografia */
  --f-display:'Jost', system-ui, -apple-system, sans-serif;
  --f-corpo:'Manrope', system-ui, -apple-system, sans-serif;

  /* espaço */
  --s1:.5rem; --s2:1rem; --s3:1.75rem; --s4:3rem; --s5:5rem;
  --sec:clamp(4.5rem, 9vw, 8rem);
  --container:1200px;
  --pad:24px;
  --header-h:76px;

  /* medidas de leitura */
  --m-h1:17ch; --m-h2:20ch; --m-texto:64ch; --m-curto:46ch;

  /* movimento */
  --e:cubic-bezier(.16,.84,.28,1);
  --e2:cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:auto;          /* arquitetura A: as âncoras ficam com o motor */
  scroll-padding-top:var(--header-h);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 1rem/1.68 var(--f-corpo);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--aco);text-decoration-thickness:1px;text-underline-offset:.18em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--aco);outline-offset:3px;border-radius:2px}
.bg-navy :focus-visible,.hero :focus-visible,footer :focus-visible{outline-color:var(--aco-claro)}

h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:300;text-wrap:balance}
h1{font-size:clamp(2.25rem,5.4vw,4.35rem);line-height:1.05;letter-spacing:-.017em;max-width:var(--m-h1)}
h2{font-size:clamp(1.8rem,3.4vw,2.85rem);line-height:1.12;letter-spacing:-.012em;max-width:var(--m-h2)}
h3{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.32;font-weight:500;letter-spacing:-.005em}
p{margin:0 0 1.05em;max-width:var(--m-texto)}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--tinta)}
.bg-navy strong,.hero strong,footer strong{color:var(--sobre-navy)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--branco);color:var(--navy);padding:14px 20px;font-weight:700}
.pular:focus{left:12px;top:12px}

/* ---------- container (nunca acumular max-width na mesma tag) ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* ==========================================================================
   FILETE DUPLO — a forma de assinatura, lida da base do símbolo
   Duas barras: a de cima mais curta e mais grossa, a de baixo mais longa e fina.
   Sempre <span class="fd"><i></i><i></i></span>. Nunca ::before.
   ========================================================================== */
.fd{display:inline-block;flex:0 0 auto;line-height:0}
.fd i{display:block;background:currentColor}
.fd i:first-child{width:26px;height:3px}
.fd i:last-child{width:38px;height:1px;margin-top:3px}
.fd--g i:first-child{width:44px;height:4px}
.fd--g i:last-child{width:64px;height:2px;margin-top:4px}

/* variante que atravessa a largura do bloco */
.fd-larga{display:block;line-height:0;color:var(--linha-forte)}
.fd-larga i{display:block;background:currentColor}
.fd-larga i:first-child{width:100%;height:2px}
.fd-larga i:last-child{width:100%;height:1px;margin-top:3px;opacity:.55}

/* ---------- rótulo de seção (eyebrow) ---------- */
.rotulo{
  display:flex;align-items:center;gap:14px;
  font:500 .74rem/1 var(--f-display);
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--aco);margin:0 0 var(--s3);
}
.bg-navy .rotulo,.hero .rotulo,footer .rotulo{color:var(--aco-claro)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;border-radius:2px;
  font:500 .93rem/1 var(--f-display);letter-spacing:.05em;
  text-decoration:none;transition:background .28s var(--e2),color .28s var(--e2),transform .12s var(--e2);
}
.btn svg{transition:transform .3s var(--e2)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.978)}
.btn--claro{background:var(--branco);color:var(--navy)}
.btn--claro:hover{background:var(--aco-claro)}
.btn--navy{background:var(--navy);color:var(--branco)}
.btn--navy:hover{background:var(--aco)}
.btn--linha{border:1px solid rgba(255,255,255,.42);color:var(--sobre-navy)}
.btn--linha:hover{background:rgba(255,255,255,.1);border-color:var(--branco)}

/* ---------- seções ---------- */
section{position:relative}
.sec{padding-block:var(--sec)}
.bg-navy{background:var(--navy);color:var(--sobre-navy-medio)}
.bg-navy h2,.bg-navy h3{color:var(--sobre-navy)}
.bg-branco{background:var(--branco)}
.lede{font-size:clamp(1.02rem,1.35vw,1.14rem);color:var(--tinta-media);max-width:var(--m-texto)}
.bg-navy .lede{color:var(--sobre-navy-medio)}
.sec-topo{margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.sec-topo h2{margin-bottom:var(--s2)}

/* ==========================================================================
   HEADER — a base do header É o filete duplo, e a barra de baixo é o progresso
   ========================================================================== */
.topo{
  position:fixed;inset:0 0 auto;z-index:90;
  background:var(--navy);
  transition:padding .4s var(--e2),background .4s var(--e2);
}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:var(--header-h);transition:height .4s var(--e2)}
.topo[data-solid="true"] .topo-in{height:62px}
.marca{display:flex;align-items:center;flex:0 0 auto}
.marca img{height:38px;width:auto;transition:height .4s var(--e2)}
.topo[data-solid="true"] .marca img{height:32px}

.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{
  position:relative;display:flex;align-items:center;gap:9px;
  font:400 .87rem/1 var(--f-display);letter-spacing:.055em;
  color:var(--sobre-navy-medio);text-decoration:none;
  padding:8px 0;transition:color .26s var(--e2);
}
.nav a:hover{color:var(--branco)}
.nav a .fd{color:var(--aco-claro);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--e2),transform .3s var(--e2)}
.nav a .fd i:first-child{width:14px;height:2px}
.nav a .fd i:last-child{width:20px;height:1px;margin-top:2px}
.nav a[aria-current="true"]{color:var(--branco)}
.nav a[aria-current="true"] .fd{opacity:1;transform:none}
.topo-cta{flex:0 0 auto}
.nav .nav-cta{display:none}          /* só existe dentro do menu off-canvas */
.nav a.btn{color:var(--navy)}        /* .nav a nao pode vencer a cor do botao */
.nav a.btn:hover{color:var(--navy)}
.topo .btn{padding:13px 22px;font-size:.85rem}

/* base do header: filete duplo + progresso de leitura */
.topo-base{position:absolute;left:0;right:0;bottom:0;line-height:0;pointer-events:none}
.topo-base i{display:block}
.topo-base .hb1{height:2px;background:rgba(255,255,255,.16)}
.topo-base .hb2{height:1px;margin-top:2px;background:var(--aco-claro);transform:scaleX(0);transform-origin:0 50%}

/* hambúrguer */
.burger{display:none;width:44px;height:44px;position:relative;flex:0 0 auto}
.burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--branco);transition:transform .34s var(--e),opacity .2s linear}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
body.menu-on .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-on .burger span:nth-child(2){opacity:0}
body.menu-on .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   HERO — fotografia real full-bleed no fundo, texto sobre ela.
   O veu e navy da MARCA, nao preto, e assimetrico: denso a esquerda (onde
   fica o texto) e leve a direita, para a foto continuar visivel.
   ========================================================================== */
.hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(94vh,880px);
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem));
  background:var(--navy-fundo);
  color:var(--sobre-navy-medio);
  overflow:hidden;
  isolation:isolate;
}
.hero-fundo{position:absolute;inset:0;z-index:0;margin:0}
.hero-fundo img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero-veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,30,55,.74) 0%, rgba(7,30,55,.20) 26%, rgba(7,30,55,0) 46%),
    linear-gradient(100deg, rgba(7,30,55,.97) 0%, rgba(7,30,55,.95) 40%, rgba(7,30,55,.88) 58%, rgba(7,30,55,.52) 78%, rgba(7,30,55,.34) 100%),
    linear-gradient(0deg, rgba(7,30,55,.84) 0%, rgba(7,30,55,.34) 24%, rgba(7,30,55,0) 48%);
}
/* Abaixo de 900px o texto ocupa quase toda a largura, entao o degrade lateral
   nao protege nada: entra um veu vertical firme no lugar. */
@media (max-width:900px){
  .hero-veu{
    background:
      linear-gradient(180deg, rgba(7,30,55,.88) 0%, rgba(7,30,55,.80) 26%, rgba(7,30,55,.84) 58%, rgba(7,30,55,.96) 100%);
  }
}
.hero-corpo{position:relative;z-index:2;width:100%;padding-bottom:clamp(2rem,4vw,3.2rem)}
.hero-inner{position:relative}
.hero h1{color:var(--sobre-navy);margin-bottom:var(--s3)}
.hero .lede{color:var(--sobre-navy-medio);max-width:54ch;margin-bottom:clamp(2rem,3.4vw,2.6rem)}
.hero-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.hero-tel{display:inline-flex;align-items:center;gap:10px;padding:16px 4px;color:var(--sobre-navy-medio);text-decoration:none;font:400 .93rem/1 var(--f-display);letter-spacing:.05em;transition:color .26s var(--e2)}
.hero-tel:hover{color:var(--branco)}

/* credenciais assentadas no filete duplo, que fecha o hero como a base do simbolo */
.hero-cred{margin-top:clamp(2.6rem,6vw,4.4rem)}
.hero-costura{display:block;line-height:0;margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.hero-costura i{display:block;background:var(--aco-claro);transform-origin:0 50%}
.hero-costura i:first-child{height:3px}
.hero-costura i:last-child{height:1px;margin-top:3px;opacity:.45}
.hero-cred ul{display:flex;flex-wrap:wrap;gap:10px clamp(22px,4vw,54px);list-style:none;margin:0;padding:0}
.hero-cred li{display:flex;align-items:center;gap:12px;font:400 .82rem/1.4 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-navy)}
.hero-cred .fd{color:var(--aco-claro)}
.hero-cred .fd i:first-child{width:16px;height:2px}
.hero-cred .fd i:last-child{width:24px;height:1px;margin-top:2px}

/* ---------- faixa de credenciais em nome (sem logotipo de terceiro) ---------- */
.credenciais{background:var(--branco);border-bottom:1px solid var(--linha)}
.credenciais .container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) clamp(20px,3.5vw,44px);padding-block:clamp(1.5rem,3vw,2.1rem)}
.credenciais .cr-txt{font:400 .78rem/1.5 var(--f-display);text-transform:uppercase;letter-spacing:.17em;color:var(--tinta-media);margin:0;max-width:34ch}
.credenciais ul{display:flex;flex-wrap:wrap;gap:10px clamp(18px,3vw,40px);list-style:none;margin:0;padding:0}
.credenciais li{font:500 clamp(.95rem,1.5vw,1.15rem)/1 var(--f-display);letter-spacing:.06em;color:var(--navy)}

/* ==========================================================================
   SPLIT (sobre / para quem)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr .82fr;gap:clamp(2.4rem,5vw,5rem);align-items:center}
.split--inv{grid-template-columns:.82fr 1fr}
.split--inv .split-txt{order:2}
.split--inv .split-fig{order:1}
.split-fig{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--linha)}
.split-fig img{width:100%;height:100%;object-fit:cover}
.split-txt p+p{margin-top:0}

.assina{margin-top:clamp(2rem,3.5vw,2.8rem);padding-top:var(--s3);border-top:1px solid var(--linha)}
.assina .nome{font:500 1.12rem/1.3 var(--f-display);color:var(--navy);margin:0 0 6px}
.assina .qual{font-size:.9rem;color:var(--tinta-media);margin:0 0 6px;max-width:52ch}
.assina .form{font-size:.9rem;color:var(--tinta-media);margin:0}

.ferramentas{margin-top:var(--s3)}
.ferramentas .rot{font:500 .72rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.2em;color:var(--tinta-media);margin:0 0 12px}
.ferramentas ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ferramentas li{font:400 .82rem/1 var(--f-display);letter-spacing:.06em;color:var(--navy);border:1px solid var(--linha-forte);border-radius:2px;padding:8px 12px}

.lista-publico{list-style:none;margin:0 0 var(--s3);padding:0}
.lista-publico li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--linha);font-size:1.02rem}
.lista-publico li:last-child{border-bottom:1px solid var(--linha)}
.lista-publico .fd{color:var(--aco);margin-top:9px}

/* ==========================================================================
   NÚMEROS — banda navy, contadores assentados no filete duplo
   ========================================================================== */
.numeros .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.8rem,4vw,3rem)}
.num .fd-larga{color:rgba(143,192,234,.42);margin-bottom:var(--s2)}
.num .fd-larga i:first-child{transform-origin:0 50%}
.num .v{display:block;font:300 clamp(2.5rem,5vw,3.9rem)/1 var(--f-display);color:var(--branco);letter-spacing:-.02em;margin-bottom:10px}
.num .k{display:block;font-size:.92rem;line-height:1.5;color:var(--sobre-navy-medio);max-width:22ch}

/* ==========================================================================
   FAIXA FULL-BLEED com parallax
   ========================================================================== */
.faixa{position:relative;overflow:hidden;height:clamp(280px,52vh,560px);background:var(--navy-fundo)}
.faixa img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform}
.faixa figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.4rem,3vw,2.4rem) 0;
  background:linear-gradient(to top,rgba(7,30,55,.86),rgba(7,30,55,0));
}
.faixa figcaption .container{display:flex;align-items:center;gap:16px}
.faixa figcaption p{margin:0;font:400 .82rem/1.4 var(--f-display);text-transform:uppercase;letter-spacing:.16em;color:#fff;max-width:none}
.faixa figcaption .fd{color:var(--aco-claro);flex:0 0 auto}

/* ==========================================================================
   FRENTES — lista editorial numerada, sem card (anti grid de 3-4 cards iguais)
   ========================================================================== */
.frentes-lista{margin-top:clamp(1rem,2vw,1.5rem)}
.frente{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3.5rem);
  padding-block:clamp(1.8rem,3.4vw,2.6rem);
  border-top:1px solid var(--linha);
}
.frente:last-child{border-bottom:1px solid var(--linha)}
.frente .n{font:300 clamp(1.9rem,3.6vw,2.9rem)/1 var(--f-display);color:var(--aco);letter-spacing:-.02em;min-width:2.2ch}
.frente h3{margin-bottom:10px;color:var(--navy)}
.frente p{color:var(--tinta-media);max-width:62ch}
.frente-corpo{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(.6rem,3vw,3rem);align-items:start}

/* ==========================================================================
   LINHA DE CTA — bloco recorrente ao longo da pagina. Filete duplo da marca,
   uma frase de contexto e o botao que abre o WhatsApp com texto pre-preenchido
   conforme a secao. Nunca formulario.
   ========================================================================== */
.cta-linha{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) clamp(20px,3vw,40px);
  margin-top:clamp(2.4rem,4.5vw,3.6rem);
  padding-top:clamp(1.6rem,2.6vw,2.2rem);
  border-top:1px solid var(--linha);
}
.cta-linha .fd{color:var(--aco);flex:0 0 auto}
.cta-linha p{
  flex:1 1 22rem;margin:0;max-width:52ch;
  font-size:clamp(1rem,1.4vw,1.1rem);color:var(--tinta-media);
}
.cta-linha .btn{flex:0 0 auto}
.bg-navy .cta-linha{border-top-color:rgba(255,255,255,.18)}
/* a lista de frentes ja fecha com um filete: evita duas linhas paralelas */
.frentes-lista + .cta-linha{border-top:0;padding-top:0}
.bg-navy .cta-linha .fd{color:var(--aco-claro)}
.bg-navy .cta-linha p{color:var(--sobre-navy-medio)}
@media (max-width:560px){
  .cta-linha{gap:var(--s2)}
  .cta-linha p{flex-basis:100%}
  .cta-linha .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   PORTFÓLIO — grade 3/2/1, capa 16:9 panorâmica, lightbox de galeria
   ========================================================================== */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.4vw,2rem)}
.pf-card{
  display:block;width:100%;text-align:left;padding:0;
  background:none;border:0;color:inherit;cursor:pointer;
  font-family:var(--f-corpo);
}
.pf-fig{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--linha)}
.pf-fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e);
  will-change:transform;
}
/* zoom suave no hover. O deslize horizontal anterior descobria uma faixa
   vazia na direita do recorte, entao saiu. Escala dentro do teto da casa (1.085). */
.pf-card:hover .pf-fig img,.pf-card:focus-visible .pf-fig img{transform:scale(1.06)}
.pf-lupa{
  position:absolute;right:12px;bottom:12px;width:38px;height:38px;
  display:grid;place-items:center;background:rgba(11,45,82,.9);color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--e2),transform .3s var(--e2);
}
.pf-card:hover .pf-lupa,.pf-card:focus-visible .pf-lupa{opacity:1;transform:none}
.pf-meta{display:block;padding-top:16px}
.pf-meta .fd{display:block;color:var(--linha-forte);margin-bottom:14px;transition:color .3s var(--e2)}
.pf-meta .fd i:first-child{width:26px;transition:width .45s var(--e)}
.pf-meta .fd i:last-child{width:38px;transition:width .45s var(--e)}
.pf-card:hover .pf-meta .fd,.pf-card:focus-visible .pf-meta .fd{color:var(--aco)}
.pf-card:hover .pf-meta .fd i:first-child{width:44px}
.pf-card:hover .pf-meta .fd i:last-child{width:66px}
.pf-tipo{display:block;font:500 .7rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.19em;color:var(--tinta-media);margin-bottom:9px}
.pf-nome{display:block;font:500 clamp(1.02rem,1.4vw,1.18rem)/1.32 var(--f-display);letter-spacing:-.005em;color:var(--navy);margin-bottom:7px}
.pf-qtd{display:block;font-size:.85rem;color:var(--tinta-media)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;display:none;background:rgba(7,30,55,.965)}
.lb.on{display:block}
.lb[hidden]{display:none!important}
.lb-in{position:absolute;inset:0;display:flex;flex-direction:column}
.lb-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:16px 20px;color:#fff;flex:0 0 auto}
.lb-tit{font:500 .95rem/1.3 var(--f-display);letter-spacing:.05em}
.lb-cont{font:400 .85rem/1 var(--f-display);letter-spacing:.12em;color:var(--sobre-navy-medio)}
.lb-x{width:44px;height:44px;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:2px;transition:background .25s var(--e2)}
.lb-x:hover{background:rgba(255,255,255,.14)}
.lb-palco{flex:1 1 auto;position:relative;display:grid;place-items:center;padding:0 clamp(12px,7vw,84px) 22px;min-height:0}
.lb-palco img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;border-radius:2px;
  transition:background .25s var(--e2);
}
.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-ant{left:clamp(8px,2.4vw,26px)}
.lb-prox{right:clamp(8px,2.4vw,26px)}

/* ==========================================================================
   CLIENTES — carrossel infinito com os nomes como wordmarks.
   Nenhum logotipo de terceiro: das 24 empresas, so 3 tem arquivo utilizavel
   publicado, e misturar resolucoes e estilos ficaria pior que a tipografia
   propria do site. Aqui todos tem a MESMA altura optica e o mesmo alinhamento
   por construcao.
   ========================================================================== */
.marquee{
  position:relative;overflow:hidden;
  padding-block:clamp(2rem,3.6vw,3rem);
  border-block:1px solid var(--linha);
  /* esmaece nas pontas para o nome nao ser cortado a seco */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.mq-pista{display:flex;width:max-content;animation:mqAnda var(--mq-dur,115s) linear infinite}
/* --mq-dur e calculada em app.js a partir da largura real da pista, para a
   velocidade ficar constante em qualquer viewport (a pista escala com clamp). */
.marquee:hover .mq-pista,
.marquee:focus-within .mq-pista{animation-play-state:paused}
.marquee[data-parado="true"] .mq-pista{animation-play-state:paused}
@keyframes mqAnda{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.mq-grupo{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.mq-grupo li{
  display:flex;align-items:center;gap:20px;
  padding-inline:clamp(22px,3vw,44px);
  white-space:nowrap;
  font:400 clamp(1.25rem,2.1vw,1.72rem)/1 var(--f-display);
  letter-spacing:.02em;color:var(--navy);
}
.mq-grupo .fd{color:var(--linha-forte)}
.mq-grupo .fd i:first-child{width:18px;height:2px}
.mq-grupo .fd i:last-child{width:26px;height:1px;margin-top:3px}

/* O controle de pausa nao aparece para quem usa mouse: ali o hover ja pausa.
   Ele existe, fora da tela, e surge ao receber foco por teclado, mesmo padrao
   do link "Pular para o conteudo". Sem ele, quem navega por teclado ou toque
   ficaria sem nenhum jeito de parar a rolagem (WCAG 2.2.2). */
.mq-ctrl{position:relative;height:0;margin:0}
.mq-botao{
  position:absolute;right:0;top:8px;
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 14px;border-radius:2px;
  background:var(--navy);color:var(--branco);
  font:500 .74rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.16em;
  clip-path:inset(50%);pointer-events:none;
}
.mq-botao:focus-visible{clip-path:none;pointer-events:auto;z-index:5}
.mq-botao .mq-play{display:none}
.mq-botao[aria-pressed="true"] .mq-p1,
.mq-botao[aria-pressed="true"] .mq-p2{display:none}
.mq-botao[aria-pressed="true"] .mq-play{display:block}

/* Sem movimento: a pista para e vira uma faixa rolavel na mao, para o
   conteudo continuar alcancavel. */
@media (prefers-reduced-motion:reduce){
  .mq-pista{animation:none}
  .marquee{overflow-x:auto}
  .mq-ctrl{display:none}
}

/* ==========================================================================
   PROCESSO — linha do horizonte que desenha + 4 etapas
   ========================================================================== */
.proc{margin-top:clamp(2rem,4vw,3.2rem)}
.proc-linha{display:block;line-height:0;margin-bottom:0;color:rgba(143,192,234,.4)}
.proc-linha i{display:block;background:currentColor;transform-origin:0 50%}
.proc-linha i:first-child{height:2px}
.proc-linha i:last-child{height:1px;margin-top:3px;opacity:.6}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,2.6rem)}
.proc-item{padding-top:var(--s3);position:relative}
.proc-marca{display:block;width:9px;height:9px;background:var(--aco-claro);position:absolute;top:-6px;left:0;transition:transform .5s var(--e)}
.proc-n{display:block;font:400 .74rem/1 var(--f-display);letter-spacing:.2em;color:var(--aco-claro);margin-bottom:14px}
.proc-item h3{margin-bottom:9px}
.proc-item p{font-size:.94rem;color:var(--sobre-navy-medio);max-width:34ch}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  /* Decisão explícita de alinhamento (armadilha 2): a lista segue o FLUXO do
     container, igual ao cabeçalho da seção e a todas as outras seções.
     Centralizar aqui deixaria cabeçalho e lista desalinhados entre si. */
  max-width:860px;margin-inline:0;
}
.faq details{border-top:1px solid var(--linha)}
.faq details:last-of-type{border-bottom:1px solid var(--linha)}
.faq summary{
  display:flex;align-items:flex-start;gap:clamp(14px,2.5vw,26px);
  padding:22px 0;cursor:pointer;list-style:none;
  font:500 clamp(1rem,1.5vw,1.14rem)/1.4 var(--f-display);color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fq-n{font:400 .74rem/1 var(--f-display);letter-spacing:.16em;color:var(--aco);flex:0 0 auto;margin-top:.5em}
.faq summary .fq-t{flex:1 1 auto}
.faq .fq-s{flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:5px}
.faq .fq-s i{position:absolute;background:var(--aco);transition:transform .34s var(--e),opacity .24s linear}
.faq .fq-s i:first-child{left:0;top:9px;width:20px;height:2px}
.faq .fq-s i:last-child{left:9px;top:0;width:2px;height:20px}
.faq details[open] .fq-s i:last-child{transform:scaleY(0);opacity:0}
.faq .fq-r{padding:0 0 24px clamp(34px,5vw,54px)}
.faq .fq-r p{color:var(--tinta-media);max-width:64ch}

/* ==========================================================================
   CTA — SKYLINE: três hastes de altura crescente que sobem da linha de base
   (reproduz a silhueta do símbolo da marca)
   ========================================================================== */
.cta-topo{max-width:var(--m-texto)}

/* SKYLINE — cada passo e um DEGRAU inteiro: numeral, haste, filete de base,
   titulo e texto sobem juntos. A fundacao e escalonada, como em terreno com
   desnivel, em vez de tres barras de alturas diferentes sobre uma base plana
   com o conteudo alinhado embaixo (o que nao tinha coerencia de layout). */
.skyline{
  --degrau:clamp(22px,3.2vw,48px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start;
  list-style:none;padding:0;
  margin:clamp(2.6rem,5vw,4rem) 0 0;
}
.sk-passo{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-top:calc((2 - var(--n)) * var(--degrau));
}
.sk-num{font:400 .74rem/1 var(--f-display);letter-spacing:.2em;color:var(--aco-claro);margin-bottom:12px}
.sk-haste{
  display:block;width:clamp(48px,9vw,86px);height:clamp(44px,6vw,72px);
  background:var(--aco-claro);opacity:.9;
  transform-origin:50% 100%;transition:transform .95s var(--e);
}
.sk-base{display:block;line-height:0;width:100%;margin-bottom:clamp(1rem,1.8vw,1.5rem)}
.sk-base i{display:block;background:var(--branco);transform-origin:0 50%}
.sk-base i:first-child{height:3px}
.sk-base i:last-child{height:1px;margin-top:3px;opacity:.5}
.sk-passo h3{margin-bottom:8px}
.sk-passo p{font-size:.94rem;color:var(--sobre-navy-medio);max-width:34ch}

.cta-acao{margin-top:clamp(2.4rem,4.5vw,3.4rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.cta-obs{font-size:.9rem;color:var(--sobre-navy-medio);margin:0;max-width:40ch}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape{background:var(--navy-fundo);color:var(--sobre-navy-medio);padding-block:clamp(3.4rem,6vw,5rem) var(--s4)}
.rd-topo{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(2rem,4vw,3.4rem);padding-bottom:clamp(2.4rem,4vw,3.2rem)}
.rd-marca img{height:44px;width:auto;margin-bottom:var(--s3)}
.rd-desc{font-size:.94rem;max-width:40ch;margin:0}
.rd-tit{font:500 .72rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.2em;color:#93A2B2;margin:0 0 var(--s2)}  /* cor explicita: 6.44:1 sobre --navy-fundo. opacity em texto esconde o contraste real da auditoria */
.rd-lista{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rd-lista a{
  /* padding vertical leva o alvo de 21px para ~41px: SC 2.5.8 pede 24px minimo
     e estes links estao em lista, nao inline numa frase (a excecao nao vale) */
  display:inline-block;padding-block:10px;
  color:var(--sobre-navy-medio);text-decoration:none;font-size:.95rem;transition:color .24s var(--e2);
}
.rd-lista a:hover{color:var(--branco);text-decoration:underline}
.rd-base{border-top:1px solid rgba(255,255,255,.13);padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;align-items:center}
.rd-base p{margin:0;font-size:.85rem;color:#93A2B2}   /* idem: 6.44:1 */
.rd-base a{color:inherit}



/* ==========================================================================
   LOADER — o símbolo da marca sobre o navy e o filete duplo que desenha.
   Dispensa JS: a própria animação CSS o remove. Sem o gate (JS fora do ar)
   ou com prefers-reduced-motion, ele nunca aparece.
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--navy);
  animation:ldSai .62s var(--e) .78s forwards;
}
.ld-in{display:grid;justify-items:center;gap:20px;animation:ldEntra .7s var(--e) both}
.ld-in img{width:clamp(52px,8vw,72px);height:auto}
.ld-fd{display:block;line-height:0}
.ld-fd i{display:block;background:var(--aco-claro);transform:scaleX(0);transform-origin:0 50%}
.ld-fd i:first-child{width:74px;height:3px;animation:ldRisco .62s var(--e) .18s forwards}
.ld-fd i:last-child{width:104px;height:1px;margin-top:4px;opacity:.5;animation:ldRisco .62s var(--e) .3s forwards}
@keyframes ldSai{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes ldEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ldRisco{to{transform:scaleX(1)}}

/* JS desligado: o gate nunca é aplicado, então o loader não existe */
html:not([data-motion]) .loader{display:none}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ==========================================================================
   BANNER DE COOKIES (LGPD) — aceitar e recusar com o mesmo peso visual
   ========================================================================== */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--navy-fundo);color:var(--sobre-navy-medio);
  border-top:2px solid var(--aco-claro);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.ck.on{opacity:1;transform:none}
.ck-in{
  width:100%;max-width:var(--container);margin:0 auto;padding:20px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);
}
.ck-txt{display:flex;align-items:flex-start;gap:14px;flex:1 1 380px}
.ck-txt .fd{color:var(--aco-claro);margin-top:8px}
.ck-txt p{margin:0;font-size:.9rem;line-height:1.55;max-width:70ch}
.ck-txt a{color:var(--aco-claro)}
.ck-btns{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
.ck-btns .btn{padding:13px 26px;font-size:.88rem}
@media (max-width:560px){
  .ck-btns{width:100%}
  .ck-btns .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- página de documento legal ---------- */
.doc{max-width:76ch;margin-inline:0}   /* alinhado ao fluxo do container, não centralizado */
.doc h1{max-width:none;margin-bottom:0}
.doc h2{
  font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;color:var(--navy);
  max-width:none;margin:clamp(2.2rem,4vw,3rem) 0 .75rem;
}
.doc-data{font-size:.85rem;color:var(--tinta-media);margin-top:1.25rem}
.doc-lista{margin:0 0 1.05em;padding-left:1.15em}
.doc-lista li{margin-bottom:.5em;max-width:70ch}
.doc p{color:var(--tinta-media)}
.doc p strong{color:var(--tinta)}

/* ==========================================================================
   RESPONSIVO — zero overflow horizontal de 320px a desktop
   ========================================================================== */
@media (max-width:1080px){
  .nav{gap:16px}
  .nav a{font-size:.82rem}
}

@media (max-width:900px){
  :root{--pad:20px}
  .burger{display:block}
  .topo-cta{display:none}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:var(--s2);padding:var(--s5) var(--s4);
    background:var(--navy-fundo);
    box-shadow:-24px 0 60px rgba(0,0,0,.4);
    transform:translateX(100%);transition:transform .46s var(--e);
    overflow-y:auto;
  }
  body.menu-on .nav{transform:translateX(0)}
  .nav a{font-size:1.12rem;padding:12px 0;width:100%}
  .nav .nav-cta{display:block;margin-top:var(--s3)}
  .nav .nav-cta .btn{width:100%;justify-content:center}

  .hero{min-height:0;padding-bottom:0}
  .hero h1{max-width:none}
  .split,.split--inv{grid-template-columns:1fr;gap:var(--s4)}
  .split--inv .split-txt,.split--inv .split-fig{order:initial}
  .split-fig{aspect-ratio:16/10}
  .frente-corpo{grid-template-columns:1fr;gap:12px}
  .numeros .grid{grid-template-columns:repeat(2,1fr)}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  /* 9 obras em 2 colunas deixariam 1 card orfao na ultima linha:
     o ultimo vira faixa larga, virando destaque em vez de sobra */
  .pf-card:last-child{grid-column:1 / -1}
  .pf-card:last-child .pf-fig{aspect-ratio:21/9}
  
  .proc-grid{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
  .rd-topo{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .rd-marca{grid-column:1/-1}
}

@media (max-width:700px){
  .skyline{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.4rem)}
  .sk-passo{margin-top:0}               /* empilhado, a escada nao faz sentido */
  .sk-passo p{max-width:none}
  .sk-haste{height:38px}
  
}

@media (max-width:560px){
  :root{--pad:18px;--header-h:64px}
  .marca img{height:28px}
  h1{font-size:clamp(1.95rem,8.4vw,2.5rem)}
  .numeros .grid{grid-template-columns:1fr;gap:var(--s3)}
  .num .v{font-size:2.7rem}
  .num .k{max-width:none}
  .pf-grid{grid-template-columns:1fr}
  
  .proc-grid{grid-template-columns:1fr}
  .proc-item p{max-width:none}
  .rd-topo{grid-template-columns:1fr}
    .faixa{height:250px}
  .frente{grid-template-columns:1fr;gap:10px}
  .frente .n{font-size:1.6rem}
  .hero-acoes .btn{width:100%;justify-content:center}
  .lb-topo{padding:12px 14px}
  .lb-nav{width:40px;height:40px}
  .sk-haste{width:clamp(38px,17vw,64px);height:32px}
}

@media (max-width:380px){
  
  .ferramentas li{font-size:.76rem;padding:7px 10px}
}

/* ==========================================================================
   MOVIMENTO — estado inicial atrás do gate; sem o gate a página é 100% legível
   ========================================================================== */
/* Estados iniciais de cena: só existem com o motor ligado.
   Sem o gate (JS fora do ar), tudo já nasce na posição final. */
html[data-motion] .hero-costura i{transform:scaleX(0)}
html[data-motion] .num .fd-larga i:first-child{transform:scaleX(0)}
html[data-motion] .proc-linha i{transform:scaleX(0)}
html[data-motion] .proc-item .proc-marca{transform:scale(0)}
html[data-motion] .proc-item[data-on] .proc-marca{transform:scale(1)}
html[data-motion] .sk-base i{transform:scaleX(0)}
html[data-motion] .sk-haste{transform:scaleY(0)}
html[data-motion] .sk-passo[data-on] .sk-haste{transform:scaleY(1)}

html[data-motion] [data-reveal]{opacity:0}
html[data-motion] [data-reveal="up"],
html[data-motion] [data-reveal=""]{transform:translateY(24px);filter:blur(5px)}
html[data-motion] [data-reveal="fig"]{transform:scale(.968);filter:blur(4px)}
html[data-motion] [data-rv="left"]{transform:translateX(-26px);filter:blur(5px)}
html[data-motion] [data-rv="right"]{transform:translateX(26px);filter:blur(5px)}

[data-reveal]{transition:opacity .9s var(--e),transform .9s var(--e),filter .9s var(--e)}
[data-reveal="soft"]{transition-duration:1s}

/* ESTADO FINAL. Precisa carregar o mesmo `html[data-motion]` dos estados
   iniciais acima, senao perde por especificidade: `html[data-motion]
   [data-reveal="up"]` e (0,2,1) e venceria um `[data-reveal].on` (0,2,0),
   deixando `transform` e `filter` presos no valor inicial. Sintoma: o bloco
   aparece (opacity empata e a ordem resolve) mas fica borrado e 24px baixo
   para sempre. */
html[data-motion] [data-reveal].on{opacity:1;transform:none;filter:none}

/* título dividido palavra por palavra */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w i{display:inline-block;font-style:inherit;transform:translateY(108%);transition:transform .9s var(--e)}
.on .w i,.w.on i{transform:none}
html:not([data-motion]) .w i{transform:none}

@media (prefers-reduced-motion:reduce){
  html[data-motion] [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  html[data-motion] .hero-costura i,
  html[data-motion] .num .fd-larga i:first-child,
  html[data-motion] .proc-linha i,
  html[data-motion] .sk-base i{transform:scaleX(1)!important}
  html[data-motion] .sk-haste{transform:scaleY(1)!important}
  html[data-motion] .proc-item .proc-marca{transform:scale(1)!important}
  .w i{transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* impressão */
@media print{
  .topo,.lb,.faixa,  body{background:#fff;color:#000}
}