/* 01-base.css */
/* Tokens. Cor de marca PROVISÓRIA (âmbar de giroflex) até o logo chegar; a paleta troca toda por aqui. */
@font-face { font-family: 'Big Shoulders Display'; src: url('/fontes/big-shoulders-display-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fontes/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --bg: #f3f4f1;          /* concreto claro */
  --chapa: #e1e3de;       /* cartão: chapa de aço pintada */
  --chapa-2: #d5d8d2;
  --tinta: #16181b;
  --tinta-2: #3f444a;     /* 7:1 sobre a chapa */
  --linha: #c4c8c1;
  /* paleta: laranja de sinalização (refs 01, 02, 08, 11) + preto asfalto. Medido:
     preto sobre --laranja 7,3:1; --laranja-texto sobre claro 5,5:1 e sobre a chapa 4,7:1; --laranja sobre --asfalto 6,6:1 */
  --laranja: #ff6a13;
  --laranja-texto: #b03c00;
  --laranja-claro: #ffd9c2;
  --asfalto: #0f1012;
  --asfalto-2: #1b1c1f;
  --nevoa: #a9abb0;       /* texto secundário no escuro: 8:1 sobre o asfalto */
  --sinal: var(--laranja);
  --sinal-claro: var(--laranja-claro);
  --whats: #25d366;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --texto: 'Schibsted Grotesk', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --c: 22px;              /* chanfro dos cantos (chapa dobrada a 45°) */
  --aba-l: clamp(200px, 19vw, 290px);  /* base da aba do logo */
  --aba-d: 64px;          /* profundidade da aba */
  --rampa-h: 56px;        /* altura final da rampa (a JS anima --rampa de 0 até aqui) */
  --rampa-l: 263px;       /* 56 / tan(12°) */
  --pat: 200px;           /* patamar: a ponta da plataforma no chão */
  --pad: clamp(16px, 2.4vw, 40px);
  --gutter: calc(12px + var(--pad));  /* margem única: alinha com o texto dentro do cartão do hero */
}
@media (max-width: 699px) {
  :root { --c: 14px; --aba-l: 92px; --aba-d: 46px; --rampa-h: 28px; --rampa-l: 132px; --pat: 96px; --pad: 14px; --gutter: calc(8px + var(--pad)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--tinta); font: 400 17px/1.5 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--bg); padding: 10px 14px; text-decoration: none; }
.pular:focus { top: 12px; }

/* Marca provisória (o logo do cliente entra aqui) */
.marca { font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.marca span { font: 600 11px/1 var(--texto); letter-spacing: .28em; }
.marca--peq { font-size: 19px; }
@media (max-width: 699px) { .marca { font-size: 17px; } .marca span { font-size: 8.5px; letter-spacing: .22em; } }

/* 02-botao.css */
/* Botões: laranja de sinalização com texto preto. Hover (padrão do JM): o preto enche de baixo para cima
   e o texto vira branco. A caixa não se mexe. */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; background: var(--laranja); color: #000; text-decoration: none; font: 700 15px/1 var(--texto); white-space: nowrap; overflow: hidden; isolation: isolate;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.botao::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--asfalto); clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--ease); }
.botao__miolo { display: inline-flex; align-items: center; gap: 9px; transition: color .35s; }
.botao svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.botao__numero { font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .botao:hover::before { clip-path: inset(0 0 0 0); }
  .botao:hover .botao__miolo { color: #fff; }
}
.botao:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--asfalto); }
.escuro .botao::before { background: #fff; }
@media (hover: hover) and (pointer: fine) { .escuro .botao:hover .botao__miolo { color: #000; } }

/* Botão redondo da ref 08: círculo laranja com a seta + rótulo */
.botao--redondo { background: transparent; color: #fff; padding: 0; height: 56px; gap: 14px; clip-path: none; overflow: visible; }
.botao--redondo::before { display: none; }
.botao__circulo { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--laranja); color: #000; overflow: hidden; isolation: isolate; }
.botao__circulo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--ease); }
.botao__circulo svg { width: 22px; height: 22px; }
.botao--redondo .botao__miolo { font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .botao--redondo:hover .botao__circulo::after { clip-path: inset(0 0 0 0); } .botao--redondo:hover .botao__miolo { color: var(--laranja); } }

/* Âncoras do menu: o fundo laranja-claro enche de baixo para cima (sem sublinhado, regra do JM) */
.ancoras { display: flex; gap: 6px; }
.ancoras a { padding: 8px 10px; text-decoration: none; font: 500 15px/1 var(--texto);
  background: linear-gradient(var(--laranja), var(--laranja)) no-repeat left bottom / 100% 0; transition: background-size .45s var(--ease); }
@media (hover: hover) and (pointer: fine) { .ancoras a:hover { background-size: 100% 100%; } }

/* 10-hero.css */
/* Hero: cartão de chapa (ref 10) com a aba do logo recortada no topo e a rampa da plataforma no pé (ref 08).
   Dentro: IMPACTO gigante atrás do guincho (ref 04), título e apoio embaixo. */
.hero { position: relative; padding: 12px 12px 0; }
.hero__cartao { --rampa: var(--rampa-h); position: relative; container-type: inline-size; isolation: isolate; min-height: calc(100svh - 12px); max-height: 980px;
  display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--pad) calc(var(--rampa-h) + 28px); }
.hero__cartao::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--chapa);
  clip-path: polygon(
    0 var(--c), var(--c) 0,
    calc(50% - var(--aba-l) / 2 - var(--aba-d)) 0, calc(50% - var(--aba-l) / 2) var(--aba-d),
    calc(50% + var(--aba-l) / 2) var(--aba-d), calc(50% + var(--aba-l) / 2 + var(--aba-d)) 0,
    calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    calc(100% - var(--pat)) 100%, calc(100% - var(--pat) - var(--rampa-l)) calc(100% - var(--rampa)),
    var(--c) calc(100% - var(--rampa)), 0 calc(100% - var(--rampa) - var(--c))); }

/* topo: âncoras à esquerda, Ligar e WhatsApp à direita, aba do logo no centro */
.hero__topo { height: calc(var(--aba-d) + 4px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero__acoes { display: flex; gap: 8px; }
.botao--topo-cel { display: none; }
.hero__aba { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--aba-l); height: var(--aba-d); display: grid; place-items: center; }

/* palco: a palavra da marca e o guincho na frente */
.hero__palco { --fs: min(calc(100cqi * .84 / 3.3), 33svh); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; margin: 0 calc(var(--pad) * -1); overflow: hidden; }
.hero__palavra { position: relative; z-index: 1; display: flex; justify-content: center; overflow: hidden; padding-top: .04em;
  font: 900 var(--fs)/.78 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: var(--laranja); user-select: none; }
.hero__palavra span { display: block; }
.hero__guincho { position: relative; z-index: 2; width: calc(var(--fs) * 3.25); max-width: none; height: auto; margin-top: calc(var(--fs) * -.36); margin-left: calc(var(--fs) * .12); pointer-events: none; }

/* texto: título à esquerda, apoio à direita */
.hero__texto { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; padding-top: 18px; }
.hero__titulo { font: 800 clamp(38px, 4.3vw, 66px)/1.07 var(--display); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.hero__apoio { display: grid; gap: 10px; max-width: 46ch; font-size: 17px; color: var(--tinta-2); text-wrap: pretty; }
.hero__apoio strong { color: var(--tinta); font-weight: 700; }
.hero__fino { font-size: 14px; }
/* ref 01: texto vertical, solto e grande, integrado à imagem */
.hero__vertical { position: absolute; z-index: 3; left: calc(var(--pad) + 6px); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font: 800 clamp(16px, 1.5vw, 22px)/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
.hero__titulo .destaque { color: var(--laranja-texto); }
.hero__prova { font: 700 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--tinta); }
.hero__prova strong { font-size: 1.5em; font-weight: 900; margin-right: .2em; }

@media (max-width: 1100px) {
  .hero__texto { grid-template-columns: 1fr; gap: 12px; }
  .ancoras a { padding: 8px 7px; font-size: 14px; }
  .botao__numero { display: none; }
}

/* celular: Ligar | aba do logo | WhatsApp; palavra na largura toda; guincho vazando pela esquerda */
@media (max-width: 699px) {
  .hero { padding: 8px 8px 0; }
  .hero__cartao { min-height: auto; padding-bottom: calc(var(--rampa-h) + 22px); grid-template-rows: auto auto auto; }
  .hero__topo { height: calc(var(--aba-d) + 10px); padding-top: 4px; }
  .hero__topo .ancoras, .hero__acoes .botao--largo { display: none; }
  .botao--topo-cel { display: inline-flex; }
  .hero__topo .botao { height: 44px; padding: 0 12px; font-size: 14px; }
  .hero__palco { padding-top: 14px; }
  .hero__palco { --fs: calc(100cqi * .92 / 3.3); }
  .hero__guincho { width: 108cqi; margin-top: calc(var(--fs) * -.3); margin-left: -6cqi; }
  .hero__texto { padding-top: 10px; }
  .hero__titulo { font-size: clamp(34px, 10vw, 44px); }
  .hero__apoio { font-size: 16px; }
  .hero__fino { font-size: 13.5px; }
  .hero__vertical { display: none; }
}
@media (max-width: 379px) {
  .hero__topo .botao { padding: 0 10px; }
  .hero__topo .botao__rotulo { font-size: 13px; }
}

/* 20-barra.css */
/* Barra fixa: entra quando o hero sai. Chapa com a aba do logo pendurada no centro (o espelho da aba do hero). */
.barra { --h: 64px; --d: 16px; position: fixed; inset: 0 0 auto; z-index: 60; height: calc(var(--h) + var(--d)); padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  transform: translateY(-110%); transition: transform .55s var(--ease); pointer-events: none; }
.barra::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--chapa);
  clip-path: polygon(0 0, 100% 0, 100% var(--h),
    calc(50% + var(--aba-l) / 2 + var(--d)) var(--h), calc(50% + var(--aba-l) / 2) 100%,
    calc(50% - var(--aba-l) / 2) 100%, calc(50% - var(--aba-l) / 2 - var(--d)) var(--h), 0 var(--h)); }
.barra.barra--ativa { transform: none; pointer-events: auto; }
.barra__lado { height: var(--h); display: flex; align-items: center; gap: 8px; }
.barra__lado--dir { justify-content: flex-end; }
.barra__aba { width: var(--aba-l); height: calc(var(--h) + var(--d)); display: grid; place-items: center; }
.barra .botao { height: 44px; }
.botao--barra { display: none; }
@media (max-width: 699px) {
  .barra { --h: 56px; --d: 10px; padding: 0 8px; }
  .barra .ancoras, .barra .botao--largo { display: none; }
  .botao--barra { display: inline-flex; }
  .barra .botao { height: 42px; padding: 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }

/* 30-secoes.css */
/* Seções. Cada uma nasce de uma ref do JM (PROMPT-MESTRE.md). Linguagem: chapa chanfrada, rampa entre seções,
   laranja de sinalização + preto asfalto, preenchimento de baixo para cima em tudo que é clicável. */
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.miolo { width: 100%; margin: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
p { text-wrap: pretty; }
section { padding-block: clamp(84px, 10vw, 150px); }
.secao-titulo { font: 800 clamp(44px, 6.2vw, 96px)/1.04 var(--display); text-transform: uppercase; text-wrap: balance; }
.destaque { color: #000; background: var(--laranja); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.escuro { background: var(--asfalto); color: #fff; }
.escuro .destaque { color: var(--laranja); background: none; padding: 0; }
.escuro p { color: var(--nevoa); }
.nb { white-space: nowrap; }
/* revelação por palavra (JS envolve cada palavra numa máscara) */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.palavra > span { display: inline-block; }

/* rótulo com a barrinha laranja (ref 02: "| Services") */
.rotulo-barra { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 800 clamp(24px, 2.4vw, 34px)/1 var(--display); text-transform: uppercase; }
.rotulo-barra::before { content: ''; width: 5px; height: 1.1em; background: var(--laranja); }

/* ================= Serviços (ref 05 no título, ref 02 na faixa) ================= */
.servicos { overflow-x: clip; padding-top: clamp(70px, 8vw, 110px); padding-bottom: clamp(60px, 7vw, 100px); }
.servicos__titulo { font: 800 clamp(42px, 6.6vw, 108px)/1.02 var(--display); text-transform: uppercase; max-width: 22ch; }
.embutido { display: inline-block; height: .9em; width: auto; vertical-align: -.14em; margin: 0 .04em; }
.servicos__cab { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(30px, 3.4vw, 48px); }
.setas { display: flex; gap: 10px; }
.seta { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--chapa-2); color: var(--tinta); cursor: pointer; overflow: hidden; isolation: isolate; }
.seta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--asfalto); clip-path: inset(100% 0 0 0); transition: clip-path .45s var(--ease); }
.seta svg { width: 20px; height: 20px; }
.seta--cheia { background: var(--laranja); color: #000; }
@media (hover: hover) and (pointer: fine) { .seta:hover::after { clip-path: inset(0 0 0 0); } .seta:hover { color: #fff; } }
.seta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* a faixa: cartões de foto lado a lado, com a borda de cima e a de baixo em arco (ref 02) */
.faixa { position: relative; margin-top: 22px; }
.faixa__arco { position: absolute; left: 0; right: 0; z-index: 2; width: 100%; height: clamp(18px, 3vw, 44px); pointer-events: none; fill: var(--bg); }
.faixa__arco--cima { top: -1px; }
.faixa__arco--baixo { bottom: -1px; }
.faixa__lista { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.faixa__lista::-webkit-scrollbar { display: none; }
.faixa__lista:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.cartao-sv { flex: 0 0 calc((100% - 3 * 12px) / 4.15); scroll-snap-align: start; }
.cartao-sv a { position: relative; display: block; aspect-ratio: 3 / 4.2; overflow: hidden; color: #fff; text-decoration: none; background: var(--asfalto); }
.cartao-sv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cartao-sv a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .82) 100%); }
.cartao-sv__texto { position: absolute; z-index: 2; left: 20px; right: 72px; bottom: clamp(30px, 3.6vw, 56px); display: grid; gap: 4px; }
.cartao-sv__titulo { font: 800 clamp(26px, 2.2vw, 34px)/1.05 var(--display); text-transform: uppercase; }
.cartao-sv__sub { font-size: 14px; line-height: 1.35; color: #e6e6e6; }
.cartao-sv__seta { position: absolute; z-index: 2; right: 18px; bottom: clamp(30px, 3.6vw, 56px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .7); color: #fff; overflow: hidden; isolation: isolate; }
.cartao-sv__seta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--laranja); clip-path: inset(100% 0 0 0); transition: clip-path .45s var(--ease); }
.cartao-sv__seta svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .cartao-sv a:hover img[data-hover-interno] { transform: scale(1.07); }
  .cartao-sv a:hover .cartao-sv__seta::before { clip-path: inset(0 0 0 0); }
  .cartao-sv a:hover .cartao-sv__seta { color: #000; border-color: var(--laranja); }
}
.cartao-sv a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.servicos__tambem { margin-top: 28px; font-size: 15px; color: var(--tinta-2); }
@media (max-width: 1099px) { .cartao-sv { flex-basis: calc((100% - 2 * 12px) / 2.6); } }
@media (max-width: 699px) {
  .embutido--2 { display: none; }
  .cartao-sv { flex-basis: 76%; }
  .cartao-sv__texto { left: 16px; }
}

/* ================= Informações rápidas (ref 12, com o degrau da ref 05) ================= */
.fatos { padding-top: clamp(40px, 5vw, 70px); }
.fatos__lista { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fato { position: relative; isolation: isolate; min-height: clamp(260px, 22vw, 320px); padding: clamp(26px, 2.6vw, 40px); display: flex; overflow: hidden; }
.fato::before { content: ''; position: absolute; inset: 0; z-index: -2; background: #fff;
  clip-path: polygon(0 0, 52% 0, calc(52% + 30px) 30px, 100% 30px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.fato--escuro::before { background: var(--asfalto); }
.fato__texto { position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; max-width: 58%; }
.fato__grande { font: 800 clamp(40px, 4.4vw, 68px)/.98 var(--display); text-transform: uppercase; color: var(--tinta); }
.fato--escuro .fato__grande { color: var(--laranja); }
.fato__sub { font-size: 16px; color: var(--tinta-2); }
.fato--escuro .fato__sub { color: var(--nevoa); }
.fato__obj { position: absolute; z-index: 0; right: 5%; bottom: 8%; height: 78%; width: auto; max-width: 42%; object-fit: contain; object-position: right bottom; }
@media (max-width: 899px) {
  .fatos__lista { grid-template-columns: 1fr; }
  .fato { min-height: 230px; }
}
@media (max-width: 499px) {
  .fato__texto { max-width: 64%; }
  .fato__grande { font-size: 36px; }
  .fato__obj { height: 62%; max-width: 38%; bottom: 8%; right: 4%; }
}

/* ================= Rampa entre seções (cunha na cor da seção, sobreposta à de cima) ================= */
.com-rampa { --rampa: var(--rampa-h); position: relative; }
.com-rampa::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--rampa-h); background: inherit; pointer-events: none;
  clip-path: polygon(0 100%, calc(100% - var(--pat) - var(--rampa-l)) 100%, calc(100% - var(--pat)) calc(100% - var(--rampa)), 100% calc(100% - var(--rampa)), 100% 100%); }

/* ================= Leva para onde quiser (ref 02 "Fast Shipping" + 360° da ref 11) ================= */
.leva { background: var(--chapa); padding: 0; height: 230vh; }
.leva__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 90px var(--gutter) 50px; }
.leva__visual { position: relative; display: grid; place-items: center; }
.leva__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leva__linhas rect { fill: none; stroke: var(--laranja); stroke-width: 7; }
.leva__guincho { position: relative; z-index: 2; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) { .leva__guincho { cursor: grab; } .leva__guincho:active { cursor: grabbing; } }
.leva__texto { display: grid; gap: 22px; max-width: 520px; }
.leva__texto p { font-size: 18px; color: var(--tinta-2); }
.leva__lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.leva__lista li { display: grid; gap: 7px; font: 700 15px/1 var(--texto); text-transform: uppercase; letter-spacing: .08em; }
.leva__lista i { display: block; height: 8px; background: var(--laranja); transform-origin: left; }
@media (max-width: 899px) {
  .leva { height: auto; }
  .leva__palco { position: relative; height: auto; grid-template-columns: 1fr; padding: 84px var(--gutter) 64px; }
}

/* ================= Quem chama (ref 08: seção escura, cartões de foto de frente) ================= */
.quem__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.quem__lado { display: grid; gap: 22px; align-content: end; }
.quem__lado > p { font-size: 18px; max-width: 34ch; }
.quem__botao { justify-self: start; }
.quem__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1400px; }
.cartao-quem a { position: relative; display: block; aspect-ratio: 3 / 4.4; overflow: hidden; color: #fff; text-decoration: none; background: var(--asfalto-2);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.cartao-quem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .7s var(--ease); }
.cartao-quem a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / 0) 42%, rgb(0 0 0 / .75) 100%); }
.cartao-quem__titulo { position: absolute; z-index: 2; left: 20px; right: 20px; top: 20px; font: 800 clamp(24px, 2vw, 32px)/1.05 var(--display); text-transform: uppercase; }
.cartao-quem__sub { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 82px; font-size: 14px; line-height: 1.4; color: #e8e8e8; }
.cartao-quem__seta { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--laranja); color: #000; }
.cartao-quem__seta svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .cartao-quem a:hover img { filter: grayscale(0) contrast(1) brightness(.95); } }
.cartao-quem a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
@media (max-width: 999px) { .quem__grade { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .quem__lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .cartao-quem { scroll-snap-align: start; }
  .cartao-quem img { filter: grayscale(.2) brightness(.85); }
}

/* ================= Galeria imersiva (ref 03) + tira com moldura (ref 06) ================= */
.galeria { padding: 0; height: 400vh; }
.galeria__palco { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: 96px var(--gutter) 48px; }
.galeria__fotos { position: relative; order: 2; height: min(78svh, 760px); overflow: hidden; --mx: 50%; --my: 50%;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.galeria__foto { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); }
.galeria__foto.ativa { clip-path: inset(0 0 0 0); }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
/* a luz do mouse: o escuro tem um furo que segue o ponteiro (ref 03, "o mouse passando e clareando a imagem") */
.galeria__vertical { position: absolute; z-index: 4; left: 18px; bottom: 22px; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 900 clamp(90px, 9vw, 150px)/.86 var(--display); text-transform: uppercase; color: #fff !important; opacity: .92; mix-blend-mode: overlay; pointer-events: none; }
.galeria__luz { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle 240px at var(--mx) var(--my), rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 35%, rgb(10 10 12 / .62) 100%); transition: background .2s; }
.galeria__texto { order: 1; display: grid; gap: 26px; align-content: center; }
.galeria__titulo { font: 800 clamp(48px, 6.4vw, 104px)/1.02 var(--display); text-transform: uppercase; }
.galeria__legendas { position: relative; height: 1.25em; overflow: hidden; font: 700 clamp(24px, 2.4vw, 36px)/1.2 var(--display); text-transform: uppercase; color: #fff; }
.galeria__legenda { position: absolute; inset: 0; color: #fff !important; transform: translateY(110%); transition: transform .7s var(--ease); }
.galeria__legenda.ativa { transform: none; }
.galeria__legenda.saiu { transform: translateY(-110%); }
.galeria__tira { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 76px); gap: 12px; }
.galeria__tira li { aspect-ratio: 4 / 5; padding: 4px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: transparent; transition: background-color .5s; }
.galeria__tira li.ativa { background: var(--laranja); }
.galeria__tira img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.7); transition: filter .5s; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.galeria__tira li.ativa img { filter: none; }
@media (max-width: 899px) {
  .galeria { height: 340vh; }
  .galeria__palco { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 18px; padding: 80px var(--gutter) 28px; }
  .galeria__fotos { order: 2; height: auto; min-height: 0; }
  .galeria__texto { gap: 14px; }
  .galeria__titulo { font-size: 44px; }
  .galeria__tira { display: none; }
  .galeria__luz { display: none; }
  .galeria__vertical { font-size: 64px; left: 10px; bottom: 12px; }
}

/* ================= Onde atende (refs 07 e 11) ================= */
.onde { background: var(--chapa); }
.onde__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.onde__texto { display: grid; gap: 20px; }
.onde__texto > p { font-size: 18px; color: var(--tinta-2); }
.onde__texto strong { color: var(--tinta); }
.onde__cidades { list-style: none; margin: 0 0 0 -6px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; }
.onde__cidades button { font: 500 16px/1.2 var(--texto); color: var(--tinta); background: linear-gradient(var(--laranja), var(--laranja)) no-repeat left bottom / 100% 0; border: 0; padding: 8px 6px; min-height: 40px; cursor: pointer; transition: background-size .45s var(--ease); }
.onde__cidades button[aria-pressed='true'] { background-size: 100% 100%; }
@media (hover: hover) and (pointer: fine) { .onde__cidades button:hover { background-size: 100% 100%; } }
.onde__rodovias { font-size: 14px; color: var(--tinta-2); }
.mapa { margin: 0; }
.mapa svg { width: 100%; height: auto; overflow: hidden; }
.mapa__terra { fill: url(#pontos); }
#pontos circle { fill: var(--linha); }
.mapa__vias path { fill: none; stroke: var(--tinta-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, stroke-width .3s; }
.mapa__placas rect { fill: var(--asfalto); }
.mapa__placas text { fill: #fff; font: 700 15px var(--display); letter-spacing: .04em; text-anchor: middle; dominant-baseline: central; }
.mapa__cidades rect { fill: var(--laranja); stroke: var(--asfalto); stroke-width: 2; }
.mapa__cidades text { fill: var(--tinta); font: 500 15px var(--texto); paint-order: stroke; stroke: var(--chapa); stroke-width: 7px; stroke-linejoin: round; }
.mapa__cidades g, .mapa__base { cursor: pointer; }
.mapa__base path { fill: var(--laranja); }
.mapa__base text { fill: #000; font: 800 17px var(--display); letter-spacing: .06em; text-anchor: middle; dominant-baseline: central; }
.mapa__saidas text { fill: var(--tinta-2); font: 600 12px var(--texto); letter-spacing: .1em; text-transform: uppercase; }
.mapa[data-ativa] .mapa__vias path { stroke: var(--linha); }
.mapa .so-cel { display: none; }
.mapa figcaption { margin-top: 10px; font-size: 13px; color: var(--tinta-2); }
@media (max-width: 899px) {
  .onde__grade { grid-template-columns: 1fr; gap: 28px; }
  .mapa__cidades text { font-size: 21px; }
  .mapa__placas text { font-size: 19px; }
  .mapa__saidas, .mapa .fora-cel, .mapa .so-desktop { display: none; }
  .mapa .so-cel { display: inline; }
}

/* ================= Perguntas ================= */
.perguntas__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.perguntas .secao-titulo { position: sticky; top: 120px; }
.perguntas__lista { border-bottom: 1px solid var(--linha); }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 12px; min-height: 48px; font: 600 19px/1.3 var(--texto);
  background: linear-gradient(var(--laranja), var(--laranja)) no-repeat left bottom / 100% 0; transition: background-size .45s var(--ease); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ''; flex: none; width: 16px; height: 16px;
  background: linear-gradient(var(--tinta), var(--tinta)) center / 100% 2.5px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2.5px 100% no-repeat;
  transition: background-size .45s cubic-bezier(.34, 1.56, .64, 1); }
.perguntas details[open] summary::after { background-size: 100% 2.5px, 2.5px 0; }
@media (hover: hover) and (pointer: fine) { .perguntas summary:hover { background-size: 100% 100%; } }
.acordeao__corpo { overflow: hidden; }
.acordeao__miolo { padding: 0 12px 24px; color: var(--tinta-2); max-width: 60ch; }
@media (max-width: 899px) { .perguntas__grade { grid-template-columns: 1fr; gap: 24px; } .perguntas .secao-titulo { position: static; } .perguntas summary { font-size: 17px; } }

/* ================= Chamada final (ref 01, 3ª seção) ================= */
.final { overflow: clip; padding-block: clamp(120px, 13vw, 190px) clamp(56px, 5vw, 80px); }
.final__fotos { position: absolute; inset: 0; pointer-events: none; }
.final__foto { position: absolute; margin: 0; width: clamp(200px, 22vw, 340px); aspect-ratio: 3 / 4; overflow: hidden; }
.final__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.5) contrast(1.1); }
.final__foto:nth-child(1) { left: 4%; top: 14%; transform: rotate(-8deg); }
.final__foto:nth-child(2) { left: 50%; top: 4%; margin-left: -9vw; transform: rotate(3deg); width: clamp(180px, 18vw, 280px); }
.final__foto:nth-child(3) { right: 4%; top: 22%; transform: rotate(9deg); }
.final__miolo { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 120px var(--pad) 0; text-align: center; display: grid; gap: 24px; justify-items: center; }
.final__pre { font: 700 15px/1.45 var(--texto); letter-spacing: .08em; text-wrap: balance; text-transform: uppercase; color: var(--laranja) !important; }
.final__titulo { font: 800 clamp(52px, 8.6vw, 140px)/1.02 var(--display); text-transform: uppercase; text-wrap: balance; text-shadow: 0 6px 40px rgb(0 0 0 / .6); }
.final__linha { display: block; }
.final__circulo { position: relative; display: inline-block; margin-left: .22em; color: var(--laranja); }
.final__circulo svg { position: absolute; left: -16%; top: -30%; width: 136%; height: 160%; max-width: none; overflow: visible; pointer-events: none; }
.final__circulo path { fill: none; stroke: var(--laranja); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.final__sub { font-size: 18px; }
.final__acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.botao--grande { height: 62px; padding: 0 28px; font-size: 17px; }
@media (max-width: 699px) {
  .final__foto { width: 150px; }
  .final__foto:nth-child(1) { left: -36px; top: 140px; }
  .final__foto:nth-child(2) { left: 50%; top: 60px; margin-left: -70px; width: 140px; }
  .final__foto:nth-child(3) { right: -40px; top: 250px; }
  .final__circulo { display: table; margin: .08em auto 0; }
  .final__circulo svg { left: -14%; top: -30%; width: 128%; height: 160%; }
  .final__miolo { padding-top: 120px; }
  .final__acoes { flex-direction: column; width: 100%; }
  .final__acoes .botao { width: 100%; }
}

/* ================= Rodapé ================= */
.rodape { display: block; padding: 0; font-size: 15px; color: var(--tinta-2); }
.rodape__grade { padding: 48px var(--gutter) 28px; display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 32px; }
.rodape__marca { display: grid; gap: 14px; align-content: start; justify-items: start; }
.rodape__marca .marca { align-items: flex-start; color: var(--tinta); }
.rodape__titulo { margin: 0 0 10px; font: 800 18px/1 var(--display); text-transform: uppercase; color: var(--tinta); letter-spacing: .04em; }
.rodape p { margin: 0 0 4px; }
.rodape a { text-decoration: none; color: var(--tinta); }
.rodape__rede { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.rodape__rede svg { width: 18px; height: 18px; fill: currentColor; }
.rodape__base { padding: 18px max(var(--gutter), calc(92px + env(safe-area-inset-right, 0px))) 22px var(--gutter); border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; font-size: 14px; }
.rodape__mxc { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; color: var(--tinta-2); transition: color .26s; }
@media (hover: hover) and (pointer: fine) { .rodape__mxc:hover { color: var(--tinta); } }
@media (max-width: 899px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) {
  .rodape__grade { grid-template-columns: 1fr; padding-top: 48px; }
  .rodape__base { padding-right: var(--gutter); padding-bottom: calc(24px + 56px + 20px + env(safe-area-inset-bottom, 0px)); }
}

/* estados de entrada (só com JS e sem reduced-motion: evita o flick do primeiro quadro) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.js-pronto) [data-cartao-sv], html.js:not(.js-pronto) [data-fato], html.js:not(.js-pronto) [data-quem] { opacity: 0; }
}

/* 90-resto.css */
/* Bolinha do WhatsApp: padrão MXC */
.bolinha-wa { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 56px; height: 56px; }
.bolinha-wa__anel { position: absolute; inset: 0; border-radius: 50%; background: var(--whats); animation: bolinha-anel 2.56s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes bolinha-anel { from { transform: scale(1); opacity: .45; } to { transform: scale(1.9); opacity: 0; } }
.bolinha-wa__link { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--whats); color: #fff; box-shadow: 0 8px 24px rgb(3 7 18 / .35); overflow: hidden; isolation: isolate; }
.bolinha-wa__link svg { width: 28px; height: 28px; fill: #fff; }
.bolinha-wa__link::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #128c4a; clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); transition: clip-path .4s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) and (pointer: fine) { .bolinha-wa__link:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); } }
.bolinha-wa__link:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bolinha-wa__anel { animation: none; opacity: 0; } }

/* Estados de entrada: escondidos só com JS e sem reduced-motion (evita o flick do 1º quadro) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.js-pronto) [data-letra] { transform: translateY(105%); }
  html.js:not(.js-pronto) [data-guincho] { opacity: 0; }
  html.js:not(.js-pronto) [data-sobe] { opacity: 0; }
}