/* ==========================================================================
   Datum Serviços Hidrográficos · estilos do site
   Linguagem: carta náutica. Isóbatas, graticula (grade de _patterns), escala gráfica,
   sondagens em mono. Paleta e logo do site atual; sóbrio, sem modismos.
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-text); background: var(--c-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: var(--lh-head); letter-spacing: -.012em; color: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 700; color: inherit; }
::selection { background: var(--c-cyan); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-azure); outline-offset: 3px; }
.is-dark :focus-visible, .hero :focus-visible { outline-color: var(--c-cyan-hi); }
.cta-card :focus-visible { outline-color: var(--c-ink); }
/* --cookie-h (altura do aviso, definida em lgpd.js) so afasta o alvo de ancora/foco do
   aviso fixo. Nao somar no padding do .foot: o aviso sobrepoe o rodape, nao o empurra. */
html { scroll-padding-bottom: var(--cookie-h, 0px); }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--c-white); color: var(--c-ink); padding: 12px 18px; font-weight: 600; border-radius: var(--r-1); text-decoration: none; transition: top .2s var(--e-ui); }
.skip:focus { top: 12px; }

/* ---------- rótulo (eyebrow): só texto em mono, caixa alta e tracking. Sem traço, sem linha. ---------- */
.eyebrow { display: block; font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.5; color: var(--c-azure); }
.is-dark .eyebrow { color: var(--c-cyan-hi); }

.sec { position: relative; padding: var(--pad-sec) 0; }
.sec--white { background: var(--c-white); }
.sec--paper { background: var(--c-paper); }
.is-dark { background: var(--c-ink); color: var(--c-on-dark); }
.is-dark p { color: var(--c-on-dark-2); }
.is-dark strong { color: var(--c-on-dark); }
.sec-head { display: grid; gap: 14px; }
.sec-head h2 { font-size: var(--t-h2); max-width: 20ch; }
.sec-head--row { grid-template-columns: 1fr auto; align-items: end; gap: 14px 40px; }
.sec-head--row .sec-head__txt { display: grid; gap: 14px; }

/* ---------- botões ---------- */
.btn { --bh: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--bh); padding: 0 24px; border-radius: var(--r-1); border: 1px solid transparent; font-family: var(--f-display); font-weight: 600; font-size: .875rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--d-1) var(--e-ui), color var(--d-1) var(--e-ui), border-color var(--d-1) var(--e-ui), transform .18s var(--e-ui); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--d-1) var(--e-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.975); }
.btn--primary { background: var(--c-cyan); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-cyan-hi); }
.btn--ink { background: var(--c-ink); color: var(--c-white); }
.btn--ink:hover { background: var(--c-ink-2); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-ink); }
.is-dark .btn--ghost { color: var(--c-white); border-color: rgba(255, 255, 255, .42); }
.is-dark .btn--ghost:hover { border-color: var(--c-white); }
.btn--sm { --bh: 42px; padding: 0 16px; font-size: .78rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--d-1) var(--e-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* termos técnicos não quebram no hífen (S-57, NORMAM-303/DPC) */
.nw { white-space: nowrap; }

/* texto que recolhe no celular ("Continuar lendo") */
.more__btn { display: none; margin-top: 14px; padding: 0; border: 0; background: none; font-family: var(--f-display); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-azure); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.is-dark .more__btn { color: var(--c-cyan-hi); }

/* ==========================================================================
   Abertura (loader): sinal de sonar sobre o símbolo, some sozinho
   ========================================================================== */
.intro { display: none; }
html.is-opening .intro { display: grid; position: fixed; inset: 0; z-index: 300; place-items: center; background: var(--c-ink); animation: intro-out .6s var(--e-ui) 1.05s forwards; }
.intro__mark { position: relative; width: 92px; }
.intro__mark img { width: 100%; height: auto; opacity: 0; animation: intro-in .7s var(--e-out) .08s forwards; }
.intro__ping { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid var(--c-cyan); opacity: 0; transform: scale(.2); animation: ping 1.1s var(--e-out) .25s forwards; }
@keyframes intro-in { to { opacity: 1; } }
@keyframes ping { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
/* varredura multifeixe: o leque nasce no topo, abre até o fundo e completa a tela */
@keyframes varredura {
  0% { clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%); }
  58% { clip-path: polygon(50% 0%, 50% 0%, 125% 100%, -25% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

/* ==========================================================================
   Header: barra branca flutuante, recuada das bordas; some ao descer
   ========================================================================== */
.hdr { position: fixed; top: 12px; left: 0; right: 0; z-index: 60; pointer-events: none; transition: transform .55s var(--e-out), top .45s var(--e-ui); }
.hdr.is-hidden { transform: translateY(calc(-100% - 16px)); }
.hdr__bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 28px; width: calc(100% - 24px); max-width: calc(var(--container) + 48px); height: var(--hdr-h); margin: 0 auto; padding: 0 24px; background: var(--c-white); color: var(--c-ink); border-radius: var(--r-1); box-shadow: 0 18px 40px -26px rgba(10, 18, 26, .55), 0 0 0 1px rgba(22, 34, 47, .06); }
.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img { width: 58px; height: auto; transition: width var(--d-1) var(--e-ui); }
.hdr.is-solid .hdr__logo img { width: 52px; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__list > li { position: relative; }
.nav__a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--hdr-h); padding: 0 14px; border: 0; background: none; font-family: var(--f-display); font-weight: 500; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--c-ink); cursor: pointer; }
.nav__a svg { width: 10px; height: 10px; transition: transform var(--d-1) var(--e-out); }
.nav__a[aria-expanded="true"] svg { transform: rotate(180deg); }
/* página ativa: triângulo invertido (o "V" do símbolo DSH) acima do link */
.nav__a::after { content: ""; position: absolute; left: 50%; top: 11px; width: 8px; height: 6px; margin-left: -4px; background: var(--c-cyan); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateY(-4px); opacity: 0; transition: opacity var(--d-1) var(--e-ui), transform var(--d-1) var(--e-out); }
.nav__a[aria-current="page"]::after, .nav__a.is-current::after, .nav__a:hover::after { opacity: 1; transform: none; }
.nav__a:hover::after { opacity: .5; }
.nav__a[aria-current="page"]:hover::after, .nav__a.is-current:hover::after { opacity: 1; }
.nav__sub { position: absolute; top: calc(100% - 6px); left: -12px; width: 560px; padding: 14px; background: var(--c-white); border-radius: var(--r-1); box-shadow: 0 26px 50px -30px rgba(10, 18, 26, .6), 0 0 0 1px rgba(22, 34, 47, .08); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s var(--e-ui), transform .4s var(--e-out), visibility 0s .3s; }
.nav__has.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--e-ui), transform .4s var(--e-out), visibility 0s; }
.nav__sub a { display: block; padding: 11px 12px; border-radius: var(--r-1); text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: .92rem; line-height: 1.3; color: var(--c-ink); transition: background-color .25s var(--e-ui); }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--c-paper); }
.hdr__mail { font-family: var(--f-mono); font-size: .8rem; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.hdr__mail:hover { color: var(--c-azure); text-decoration: underline; text-underline-offset: 4px; }
.hdr__cta { flex: none; }
.hdr__burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.hdr__burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--c-ink); transition: transform .45s var(--e-out), opacity .3s var(--e-ui); }
.hdr__burger span:nth-child(1) { top: 16px; } .hdr__burger span:nth-child(2) { top: 22px; } .hdr__burger span:nth-child(3) { top: 28px; }
.hdr.is-menu .hdr__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr.is-menu .hdr__burger span:nth-child(2) { opacity: 0; }
.hdr.is-menu .hdr__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* menu do celular (painel abaixo da barra) */
.mnav { display: none; }

/* ==========================================================================
   Hero: foto real + véu + isóbatas que desenham + escala gráfica com os 3 pilares
   Abertura em "varredura multifeixe": a foto revela num leque a partir do topo.
   ========================================================================== */
.hero { position: relative; display: flex; min-height: 100svh; min-height: max(100svh, 580px); background: var(--c-ink-3); color: var(--c-white); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img, .hero__media picture { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 62% 50%; }
.hero__veil { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(12, 21, 30, .92) 0%, rgba(12, 21, 30, .86) 36%, rgba(12, 21, 30, .5) 60%, rgba(12, 21, 30, .12) 84%, rgba(12, 21, 30, .06) 100%),
  linear-gradient(0deg, rgba(12, 21, 30, .82) 0%, rgba(12, 21, 30, 0) 38%); }
.hero__carta { position: absolute; inset: 0; z-index: -1; color: var(--c-cyan-hi); opacity: .34; -webkit-mask-image: linear-gradient(180deg, transparent 26%, #000 66%); mask-image: linear-gradient(180deg, transparent 26%, #000 66%); pointer-events: none; }
.hero__carta svg { width: 100%; height: 100%; }
.hero__carta path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__carta path.k { stroke-width: 1.7; }
.hero__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding-top: calc(var(--hdr-h) + 56px); padding-bottom: clamp(112px, 17vh, 168px); }
.hero__title { font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -.022em; max-width: 15ch; }
.hero__title em { font-style: normal; color: var(--c-cyan-hi); }
.hero .eyebrow { color: var(--c-white); }
.hero__lead { max-width: 48ch; font-size: var(--t-lead); line-height: 1.5; color: var(--c-on-dark-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* escala gráfica de carta: segmentos alternados preenchido/vazado, um por pilar */
.escala { position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 52px); z-index: 2; }
.escala ol { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); }
.escala li { position: relative; padding: 18px 20px 0 0; font-family: var(--f-display); font-weight: 500; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--c-white); }
.escala__seg { position: absolute; left: 0; right: 0; top: 0; height: 6px; border: 1px solid var(--c-cyan); transform-origin: left center; }
.escala li:nth-child(odd) .escala__seg { background: var(--c-cyan); }
.escala__seg::before { content: ""; position: absolute; left: -1px; top: -6px; width: 1px; height: 17px; background: var(--c-cyan); }
.escala li:last-child .escala__seg::after { content: ""; position: absolute; right: -1px; top: -6px; width: 1px; height: 17px; background: var(--c-cyan); }

/* hero de página interna: mais baixo */
.hero--interna { min-height: min(92svh, 900px); min-height: max(min(92svh, 900px), 560px); }
.hero--interna .hero__title { font-size: var(--t-h1); max-width: 18ch; }
.hero--interna .hero__lead { max-width: 54ch; font-size: clamp(1rem, .96rem + .3vw, 1.2rem); }

/* ==========================================================================
   Clientes: graticula de logos (grade de células finas, como a malha de uma carta)
   ========================================================================== */
.clientes__in { display: grid; grid-template-columns: minmax(200px, 3fr) 9fr; gap: 40px 56px; align-items: start; }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.logos li { display: flex; align-items: center; justify-content: center; min-width: 0; height: clamp(84px, 13vh, 132px); padding: 0 12%; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.logos img { width: auto; height: auto; max-width: 100%; max-height: 54%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); opacity: .74; transition: filter .5s var(--e-ui), opacity .5s var(--e-ui); }
.logos li:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   Galeria (portfólio): 3 frentes, cada card abre a galeria completa no lightbox
   ========================================================================== */
.galeria { overflow: hidden; }
.galeria__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 5vh, 48px); align-items: start; }
.gcard { position: relative; display: block; width: 100%; height: clamp(300px, 52vh, 520px); padding: 0; border: 0; background: var(--c-ink-2); overflow: hidden; cursor: zoom-in; text-align: left; color: var(--c-white); }
.gcard:nth-child(2) { margin-top: clamp(20px, 5vh, 56px); }
.gcard img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.3s var(--e-out), filter .6s var(--e-ui); }
.gcard:hover img, .gcard:focus-visible img { transform: scale(1.045); }
.gcard__info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px; background: linear-gradient(0deg, rgba(12, 21, 30, .88) 0%, rgba(12, 21, 30, 0) 100%); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--e-ui), transform .6s var(--e-out); }
.gcard:hover .gcard__info, .gcard:focus-visible .gcard__info { opacity: 1; transform: none; }
.gcard__name { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; line-height: 1.25; max-width: 22ch; }
.gcard__count { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-cyan-hi); }
.gcard__zoom { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(12, 21, 30, .55); border: 1px solid rgba(255, 255, 255, .3); }
.gcard__zoom svg { width: 16px; height: 16px; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 250; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(9, 15, 22, .97); color: var(--c-white); opacity: 0; transition: opacity .35s var(--e-ui); }
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); }
.lb__title { font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.lb__count { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; color: var(--c-cyan-hi); }
.lb__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 76px; }
.lb__stage img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .4s var(--e-ui), transform .6s var(--e-out); }
.lb__stage img.is-in { opacity: 1; transform: none; }
.lb__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04); color: var(--c-white); cursor: pointer; transition: background-color .3s var(--e-ui), border-color .3s var(--e-ui); }
.lb__btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-white); }
.lb__btn svg { width: 18px; height: 18px; }
.lb__prev, .lb__next { position: absolute; top: 50%; margin-top: -24px; }
.lb__prev { left: 16px; } .lb__next { right: 16px; }
.lb__foot { padding: 14px var(--gutter) 22px; text-align: center; font-size: .9rem; color: var(--c-on-dark-2); }

/* ==========================================================================
   Frentes de atuação: acordeão horizontal com rótulos verticais (referência M3)
   ========================================================================== */
.frentes__list { display: flex; gap: 6px; height: clamp(380px, 58vh, 580px); margin-top: clamp(28px, 5vh, 48px); }
.frente { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--c-ink); transition: flex-grow .95s var(--e-out); }
.frente.is-on { flex-grow: 6.2; }
.frente__link { position: absolute; inset: 0; display: block; color: var(--c-white); text-decoration: none; }
.frente__link:focus-visible { outline: 2px solid var(--c-cyan-hi); outline-offset: -4px; }
.frente__media { position: absolute; inset: 0; }
.frente__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--e-out), filter .8s var(--e-ui); filter: saturate(.75) brightness(.9); }
.frente.is-on .frente__media img { transform: scale(1); filter: none; }
.frente__veil { position: absolute; inset: 0; background: rgba(15, 25, 35, .8); transition: background-color .8s var(--e-ui); }
.frente.is-on .frente__veil { background: linear-gradient(0deg, rgba(12, 21, 30, .9) 0%, rgba(12, 21, 30, .2) 50%, rgba(12, 21, 30, .25) 76%, rgba(12, 21, 30, .78) 100%); }
.frente__idx { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--c-cyan-hi); transition: left .8s var(--e-out), transform .8s var(--e-out); }
.frente.is-on .frente__idx { left: 24px; transform: none; color: var(--c-white); text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.frente__v { position: absolute; left: 50%; bottom: 22px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap; font-family: var(--f-display); font-weight: 500; font-size: .86rem; letter-spacing: .07em; text-transform: uppercase; transition: opacity .45s var(--e-ui); }
.frente.is-on .frente__v { opacity: 0; }
.frente__h { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity .35s var(--e-ui), transform .5s var(--e-out); pointer-events: none; }
.frente.is-on .frente__h { opacity: 1; transform: none; transition: opacity .6s var(--e-ui) .32s, transform .9s var(--e-out) .32s; }
.frente__h h3 { font-size: clamp(1.35rem, 1rem + 1vw, 2rem); max-width: 18ch; text-wrap: pretty; }
.frente__h .link-arrow { color: var(--c-cyan-hi); }

/* ==========================================================================
   Navegação eletrônica: texto + tela de bordo com o processamento real
   ========================================================================== */
.enc { overflow: hidden; }
.enc__carta { position: absolute; inset: 0; background: url("../carta/carta-fundo.svg") center / cover no-repeat; opacity: .13; pointer-events: none; }
.enc__grid { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.enc__txt { display: grid; gap: 18px; align-content: start; }
.enc__txt h2 { font-size: var(--t-h2); }
.enc__txt p { font-size: var(--t-small); line-height: 1.58; }
.enc__cols { columns: 2; column-gap: 32px; }
.enc__cols p { break-inside: avoid; margin-bottom: 12px; }
.more__rest p { margin-top: 0; }
.enc__txt .btn { justify-self: start; margin-top: 8px; }
.tela { position: relative; padding: 12px; background: #0B131B; border-radius: var(--r-2); box-shadow: var(--shadow-screen); }
.tela__scr { position: relative; overflow: hidden; border-radius: 3px; background: #000; aspect-ratio: 1351 / 727; }
.tela__scr img { width: 100%; height: 100%; object-fit: cover; }
.tela__scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.tela__marks span { position: absolute; width: 14px; height: 14px; border-color: var(--c-cyan); border-style: solid; border-width: 0; }
.tela__marks span:nth-child(1) { left: -10px; top: -10px; border-left-width: 1px; border-top-width: 1px; }
.tela__marks span:nth-child(2) { right: -10px; top: -10px; border-right-width: 1px; border-top-width: 1px; }
.tela__marks span:nth-child(3) { left: -10px; bottom: -10px; border-left-width: 1px; border-bottom-width: 1px; }
.tela__marks span:nth-child(4) { right: -10px; bottom: -10px; border-right-width: 1px; border-bottom-width: 1px; }

/* ==========================================================================
   Quem somos: faixa panorâmica + 44 anos + texto em duas colunas
   ========================================================================== */
.sobre { padding-top: 0; }
.sobre__band { position: relative; height: clamp(170px, 31vh, 340px); overflow: hidden; background: var(--c-ink); }
.sobre__band img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 50% 62%; }
.sobre__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(36px, 5vw, 80px); padding-top: clamp(36px, 7vh, 80px); align-items: start; }
.anos { position: relative; margin-top: calc(-1 * clamp(36px, 7vh, 80px) - clamp(60px, 9vh, 96px)); padding: 26px 28px 24px; background: var(--c-cyan); color: var(--c-ink); width: max-content; min-width: 210px; }
.anos__n { display: block; font-family: var(--f-display); font-weight: 600; font-size: clamp(4.5rem, 3.4rem + 3.6vw, 7.5rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.anos__l { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.sobre__txt { display: grid; gap: 16px; }
.sobre__lead { display: grid; gap: 26px; align-content: start; }
.sobre__txt h2 { font-size: var(--t-h2); }
.sobre__cols { columns: 2; column-gap: 36px; font-size: var(--t-small); color: var(--c-muted); padding-top: 4px; }
.sobre__cols p { break-inside: avoid; margin-bottom: 14px; }
.sobre__cols p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Para quem: índice dos segmentos + cartão de conversão
   ========================================================================== */
.atuacao { background: var(--c-ink-2); }
.atuacao__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.indice { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: clamp(22px, 4vh, 36px); counter-reset: idx; }
.indice li { display: grid; grid-template-columns: 22px 1fr; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--c-line-dark); font-family: var(--f-display); font-weight: 500; font-size: .98rem; line-height: 1.32; color: var(--c-white); }
.indice li::before { content: ""; width: 8px; height: 6px; margin-bottom: 2px; background: var(--c-cyan); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cta-card { position: relative; display: grid; gap: 18px; padding: clamp(28px, 4vw, 44px); background: var(--c-cyan); color: var(--c-ink); overflow: hidden; }
.cta-card::before { content: ""; position: absolute; inset: 0; background: url("../carta/carta-fundo.svg") 30% 40% / 260% auto no-repeat; opacity: .22; mix-blend-mode: multiply; filter: grayscale(1) brightness(.2); pointer-events: none; }
.cta-card > * { position: relative; }
.cta-card h3 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem); line-height: 1.18; max-width: 18ch; }
.cta-card p, .is-dark .cta-card p { color: var(--c-ink); font-size: 1.02rem; }
.cta-card .btn { justify-self: start; }

/* ==========================================================================
   Certificações: foto sangrando à esquerda + declaração com os certificados
   ========================================================================== */
.cert { padding: 0; overflow: hidden; }
.cert__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: min(86svh, 760px); }
.cert__media { position: relative; overflow: hidden; background: var(--c-ink); }
.cert__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 40%; }
.cert__body { display: grid; align-content: center; gap: 26px; padding: var(--pad-sec) var(--gutter) var(--pad-sec) clamp(36px, 5vw, 80px); max-width: calc(var(--container) / 2 + var(--gutter)); }
.cert__body h2 { font-size: var(--t-h2); }
.cert__decl { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.08rem, .98rem + .5vw, 1.36rem); line-height: 1.5; color: var(--c-ink); max-width: 40ch; }
.cert__decl a { color: var(--c-azure); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cert__decl a:hover { text-decoration-thickness: 2px; }
.cert__decl a svg { display: inline; width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; }
.itens { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.itens li { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.itens h3 { font-size: 1.12rem; line-height: 1.3; margin-bottom: 6px; color: var(--c-ink); }
.itens p { font-size: var(--t-small); color: var(--c-muted); }

/* ==========================================================================
   Vantagens: linhas editoriais sobre foto escura com as ondas de _patterns
   ========================================================================== */
.vantagens { overflow: hidden; background: var(--c-ink-3); }
.vantagens__bg { position: absolute; inset: -12% 0; z-index: 0; }
.vantagens__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vantagens__veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12, 21, 30, .86), rgba(12, 21, 30, .74)); }
.vantagens__ondas { position: absolute; inset: 0; z-index: 0; background: url("../patterns/ondas-ciano.svg") 0 0 / 256px 216px repeat; opacity: .08; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.vantagens .container { position: relative; z-index: 1; }
.linhas { margin-top: clamp(22px, 4vh, 40px); border-bottom: 1px solid var(--c-line-dark); }
.linha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; align-items: baseline; padding: clamp(14px, 2.5vh, 24px) 0; border-top: 1px solid var(--c-line-dark); }
.linha h3 { font-size: clamp(1.1rem, .98rem + .5vw, 1.42rem); line-height: 1.25; }
.linha h3 button { all: unset; display: block; cursor: default; }
.linha p { font-size: var(--t-small); max-width: 62ch; }

/* ==========================================================================
   Contato: chamada direta + foto sangrando à direita
   ========================================================================== */
.contato { padding: 0; overflow: hidden; }
.contato__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: min(78svh, 720px); }
.contato__body { display: grid; align-content: center; gap: 22px; padding: var(--pad-sec) clamp(36px, 5vw, 80px) var(--pad-sec) var(--gutter); margin-left: auto; width: 100%; max-width: calc(var(--container) / 2 + var(--gutter)); }
.contato__body h2 { font-size: clamp(2rem, min(1.2rem + 2.8vw, 6.2vh), 3.6rem); line-height: 1.06; max-width: 13ch; }
.contato__body > p:not(.eyebrow) { font-size: var(--t-lead); max-width: 40ch; color: var(--c-muted); }
.contato__body .btn { justify-self: start; }
.contato__mail { display: grid; gap: 10px; padding-top: 22px; margin-top: 6px; border-top: 1px solid var(--c-line); }
.contato__mail h3 { font-family: var(--f-body); font-weight: 600; font-size: 1rem; color: var(--c-ink); }
.contato__mail a { font-family: var(--f-mono); font-size: 1rem; color: var(--c-azure); text-underline-offset: 5px; }
.contato__media { position: relative; overflow: hidden; background: var(--c-ink); }
/* contato em faixa (páginas de serviço): foto de fundo, chamada à esquerda */
.contato-faixa { display: flex; align-items: center; min-height: min(80svh, 720px); overflow: hidden; background: var(--c-ink-3); }
.contato-faixa__bg { position: absolute; inset: -10% 0; }
.contato-faixa__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.contato-faixa__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 21, 30, .92) 0%, rgba(12, 21, 30, .78) 42%, rgba(12, 21, 30, .25) 78%); }
.contato-faixa__in { position: relative; display: grid; gap: 20px; justify-items: start; }
.contato-faixa__in h2 { font-size: clamp(2rem, min(1.2rem + 2.8vw, 6.2vh), 3.6rem); line-height: 1.06; max-width: 14ch; }
.contato-faixa__p { font-size: var(--t-lead); max-width: 42ch; }
.contato-faixa .contato__mail { border-top-color: var(--c-line-dark); width: min(100%, 420px); }
.contato-faixa .contato__mail h3 { color: var(--c-white); }
.contato-faixa .contato__mail a { color: var(--c-cyan-hi); }
.contato__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* ==========================================================================
   Página de serviço: atuação detalhada + ficha de serviços
   ========================================================================== */
.detalhe__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: clamp(24px, 4.5vh, 44px); }
.detalhe__body { color: var(--c-muted); font-size: var(--t-small); }
.detalhe__body p { max-width: 64ch; margin-bottom: 14px; }
.detalhe__body .aplic { margin-bottom: 16px; }
.detalhe--cols .detalhe__body { columns: 2; column-gap: 36px; }
.detalhe--cols .detalhe__body p, .detalhe--cols .aplic li { break-inside: avoid; }
.detalhe--cols .aplic { grid-template-columns: 1fr; break-inside: avoid; }
.aplic { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--c-line); }
.aplic li { position: relative; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--c-line); font-family: var(--f-display); font-weight: 500; font-size: .92rem; line-height: 1.35; color: var(--c-ink); }
.aplic li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 6px; background: var(--c-cyan); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ficha { position: relative; padding: clamp(26px, 3.4vw, 40px); background: var(--c-paper); overflow: hidden; }
.ficha::before { content: ""; position: absolute; inset: 0; background: url("../patterns/graticula-tinta.svg") -1px -1px / 120px 120px repeat; opacity: .09; pointer-events: none; }
.ficha > * { position: relative; }
.ficha h3 { font-size: 1.2rem; margin-bottom: 14px; color: var(--c-ink); }
.ficha ol { counter-reset: f; border-top: 1px solid var(--c-line-strong); }
.ficha li { display: grid; grid-template-columns: 22px 1fr; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-family: var(--f-display); font-weight: 500; font-size: .98rem; line-height: 1.35; color: var(--c-ink); }
.ficha li::before { content: ""; width: 8px; height: 6px; margin-bottom: 2px; background: var(--c-cyan); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.foot { position: relative; background: var(--c-ink-3); color: var(--c-on-dark); padding: clamp(56px, 9vh, 88px) 0 24px; overflow: hidden; }
.foot__carta { position: absolute; inset: 0; background: url("../carta/carta-fundo.svg") 70% 50% / cover no-repeat; opacity: .07; pointer-events: none; }
.foot .container { position: relative; }
.foot__grid { display: grid; grid-template-columns: 4fr 4fr 3fr; gap: 40px; align-items: start; }
.foot__logo img { width: min(260px, 100%); height: auto; }
.foot__t { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-cyan-hi); margin-bottom: 16px; }
.foot ul { display: grid; gap: 10px; }
.foot li, .foot a { font-size: .96rem; color: var(--c-on-dark-2); line-height: 1.5; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 4px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(40px, 7vh, 72px); padding-top: 20px; border-top: 1px solid var(--c-line-dark); font-size: .84rem; }
.foot__base a, .foot__base button { color: rgba(255, 255, 255, .7); }
.foot__base button { border: 0; background: none; padding: 0; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.foot__base button:hover { color: var(--c-white); }

/* ==========================================================================
   Aviso de cookies (módulo LGPD BuildV)
   ========================================================================== */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 10010; width: min(400px, calc(100% - 32px)); display: grid; gap: 14px; padding: 20px 22px; background: var(--c-ink-3); color: var(--c-on-dark-2); border: 1px solid var(--c-line-dark); border-radius: var(--r-2); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); font-size: .9rem; line-height: 1.55; transform: translateY(calc(100% + 32px)); transition: transform .55s var(--e-out); }
.cookie[hidden] { display: none; }
.cookie.show { transform: none; }
.cookie a { color: var(--c-cyan-hi); }
.cookie__acts { display: flex; gap: 10px; }
.cookie__acts .btn { flex: 1; --bh: 42px; padding: 0 14px; font-size: .74rem; }
.cookie .btn--ghost { color: var(--c-white); border-color: rgba(255, 255, 255, .42); }
.cookie .btn--ghost:hover { border-color: var(--c-white); }

/* ==========================================================================
   Movimento (gate html[data-motion]; sem ele, tudo fica visível)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion] [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(5px); transition: opacity .9s var(--e-out), transform .9s var(--e-out), filter .9s var(--e-out); }
  html[data-motion] [data-reveal="soft"] { transform: none; filter: none; transition: opacity 1s var(--e-out); }
  html[data-motion] [data-reveal="fig"] { transform: scale(.965); filter: blur(4px); }
  html[data-motion] [data-reveal="left"] { transform: translate3d(-26px, 0, 0); }
  html[data-motion] [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  html[data-motion] [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  html[data-motion] [data-split] .w > i { display: inline-block; font-style: normal; transform: translate3d(0, 108%, 0); transition: transform .9s var(--e-out); }
  html[data-motion] [data-split].is-in .w > i { transform: none; }
  html[data-motion] [data-split] em { font-style: normal; }

  /* hero: leque de varredura (multifeixe) + isóbatas que desenham + escala que preenche */
  html[data-motion] .hero__media { clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%); }
  html[data-motion] .hero.is-ready .hero__media { animation: varredura 1.7s var(--e-out) forwards; }
  html[data-motion] .hero.is-swept .hero__media { animation: none; clip-path: none; }
  html[data-motion] .hero__media img { transform: scale(1.08); transition: transform 2.4s var(--e-out); }
  html[data-motion] .hero.is-ready .hero__media img { transform: scale(1); }
  html[data-motion] .hero__carta path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--e-out); }
  html[data-motion] .hero.is-ready .hero__carta path { stroke-dashoffset: 0; }
  html[data-motion] .escala__seg { transform: scaleX(0); transition: transform 1.1s var(--e-out); }
  html[data-motion] .escala li { opacity: 0; transition: opacity .8s var(--e-ui); }
  html[data-motion] .hero.is-ready .escala__seg { transform: none; }
  html[data-motion] .hero.is-ready .escala li { opacity: 1; }
  html[data-motion] .hero.is-ready .escala li:nth-child(1) .escala__seg { transition-delay: .9s; }
  html[data-motion] .hero.is-ready .escala li:nth-child(2) .escala__seg { transition-delay: 1.05s; }
  html[data-motion] .hero.is-ready .escala li:nth-child(3) .escala__seg { transition-delay: 1.2s; }
  html[data-motion] .hero.is-ready .escala li:nth-child(1) { transition-delay: 1.05s; }
  html[data-motion] .hero.is-ready .escala li:nth-child(2) { transition-delay: 1.2s; }
  html[data-motion] .hero.is-ready .escala li:nth-child(3) { transition-delay: 1.35s; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1180px) {
  .hdr__mail { display: none; }
  .nav { gap: 18px; }
  .frente.is-on { flex-grow: 5; }
}

@media (max-width: 900px) {
  :root { --hdr-h: 58px; }
  .hdr { top: 10px; }
  .hdr__bar { width: calc(100% - 20px); padding: 0 8px 0 18px; gap: 12px; }
  .hdr__logo img, .hdr.is-solid .hdr__logo img { width: 50px; }
  .nav { display: none; }
  .hdr__burger { display: block; }
  .mnav { display: block; position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: calc(100svh - var(--hdr-h) - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 22px; background: var(--c-white); border-radius: var(--r-1); box-shadow: 0 30px 60px -30px rgba(10, 18, 26, .7), 0 0 0 1px rgba(22, 34, 47, .08); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--e-ui), transform .45s var(--e-out), visibility 0s .3s; }
  .hdr.is-menu .mnav { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--e-ui), transform .45s var(--e-out), visibility 0s; }
  .mnav__main a { display: block; padding: 12px 2px; border-bottom: 1px solid var(--c-line); font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: var(--c-ink); text-decoration: none; }
  .mnav__t { margin: 16px 0 6px; }
  .mnav__srv a { display: block; padding: 9px 2px; font-family: var(--f-display); font-weight: 500; font-size: .95rem; color: var(--c-ink); text-decoration: none; line-height: 1.3; }
  .mnav__srv a[aria-current="page"] { color: var(--c-azure); }
  .mnav__foot { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }
  .mnav__foot a.mail { font-family: var(--f-mono); font-size: .9rem; color: var(--c-ink); }
  .mnav__foot .btn { width: 100%; }

  .clientes__in { grid-template-columns: 1fr; gap: 24px; }
  .galeria__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gcard { height: clamp(200px, 30vh, 320px); }
  .gcard:nth-child(2) { margin-top: 0; }
  .gcard:nth-child(3) { grid-column: 1 / -1; height: clamp(170px, 24vh, 260px); }
  .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .frentes__list { flex-direction: column; gap: 0; height: auto; border-top: 1px solid var(--c-line); }
  .frente, .frente.is-on { flex: none; height: auto; background: transparent; overflow: visible; }
  .frente__link { position: relative; display: grid; grid-template-columns: 30px 1fr 76px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
  .frente__media { position: relative; inset: auto; grid-column: 3; grid-row: 1; width: 76px; height: 50px; overflow: hidden; }
  .frente__media img, .frente.is-on .frente__media img { transform: none; filter: none; }
  .frente__veil, .frente__v { display: none; }
  .frente__idx, .frente.is-on .frente__idx { position: static; transform: none; grid-column: 1; grid-row: 1; color: var(--c-azure); }
  .frente__h, .frente.is-on .frente__h { position: static; grid-column: 2; grid-row: 1; opacity: 1; transform: none; pointer-events: auto; gap: 2px; transition: none; }
  .frente__h h3 { font-size: 1rem; max-width: none; color: var(--c-ink); }
  .frente__h .link-arrow { display: none; }
  .frente.is-here .frente__h h3 { color: var(--c-azure); }

  .enc__grid, .atuacao__grid { grid-template-columns: minmax(0, 1fr); }
  .enc__cols { columns: 1; }
  .enc__vis { order: -1; max-width: 640px; }
  .sobre__grid { grid-template-columns: 1fr; }
  .anos { margin-top: calc(-1 * clamp(36px, 7vh, 80px) - 44px); padding: 18px 22px 16px; min-width: 0; display: flex; align-items: baseline; gap: 14px; }
  .anos__n { font-size: 3.6rem; }
  .anos__l { margin-top: 0; }
  .cert__grid, .contato__grid { grid-template-columns: 1fr; min-height: 0; }
  .cert__media { height: clamp(180px, 30vh, 320px); }
  .cert__body, .contato__body { padding: clamp(40px, 7vh, 72px) var(--gutter); max-width: none; margin: 0; }
  .contato__media { height: clamp(170px, 26vh, 300px); order: -1; }
  .contato-faixa__veil { background: linear-gradient(180deg, rgba(12, 21, 30, .84) 0%, rgba(12, 21, 30, .93) 100%); }
  .contato-faixa { min-height: 0; }
  .linha { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__logo { grid-column: 1 / -1; }
  .sec-head--row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .escala li { font-size: .75rem; letter-spacing: .05em; padding-right: 10px; }
  .hero__inner { gap: 16px; padding-bottom: clamp(100px, 16vh, 140px); }
  .hero__media img { object-position: 64% 50%; }
  .hero__veil { background: linear-gradient(180deg, rgba(12, 21, 30, .3) 0%, rgba(12, 21, 30, .56) 18%, rgba(12, 21, 30, .86) 34%, rgba(12, 21, 30, .93) 54%, rgba(12, 21, 30, .96) 100%); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos li { height: clamp(64px, 10.5vh, 92px); padding: 0 10%; }
  .gcard { height: clamp(190px, 30vh, 280px); }
  .gcard__info { opacity: 1; transform: none; padding: 12px; }
  .gcard__name { font-size: .86rem; }
  .gcard__zoom { width: 32px; height: 32px; right: 10px; top: 10px; }
  .sobre__cols { columns: 1; }
  .indice { column-gap: 18px; }
  .indice li { grid-template-columns: 18px 1fr; font-size: .86rem; padding: 10px 0; }
  .lb__stage { padding: 0 12px; }
  .lb__prev, .lb__next { top: auto; bottom: -62px; margin: 0; }
  .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); }
  .lb__foot { padding-top: 76px; }
  .aplic { grid-template-columns: 1fr; }

  /* texto longo recolhe para a seção caber na tela */
  .more.is-collapsed .more__rest { display: none; }
  .ficha { padding: 18px; }
  .ficha h3 { margin-bottom: 10px; font-size: 1.05rem; }
  .ficha ol { display: flex; flex-wrap: wrap; gap: 6px; border-top: 0; }
  .ficha li { display: inline-block; padding: 6px 10px; border: 1px solid var(--c-line-strong); background: var(--c-white); font-size: .82rem; line-height: 1.3; }
  .ficha li::before { content: none; }
  .detalhe .sec-head--row .btn { width: 100%; }
  .more__btn { display: inline-block; }
  .more.is-open .more__btn { display: none; }

  /* vantagens viram acordeão */
  .linha { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .linha h3 button { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 16px 0; cursor: pointer; }
  .linha h3 button::after { content: "+"; font-family: var(--f-mono); font-size: 1.1rem; color: var(--c-cyan-hi); }
  .linha h3 button[aria-expanded="true"]::after { content: "\2212"; }
  .linha h3 button:focus-visible { outline: 2px solid var(--c-cyan-hi); outline-offset: 2px; }
  .linha p { padding-bottom: 16px; }
  .linha p[hidden] { display: none; }
}

@media (max-width: 560px) {
  .btn { --bh: 50px; padding: 0 20px; }
  .hero__actions .btn { width: 100%; }
  .galeria__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gcard, .gcard:nth-child(3) { grid-column: auto; height: clamp(128px, 19vh, 190px); }
  .escala ol { grid-template-columns: 1fr; gap: 9px; }
  .escala li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 0; font-size: .75rem; }
  .escala__seg { position: relative; inset: auto; height: 6px; }
  .escala__seg::before { top: -5px; height: 15px; }
  .escala li:last-child .escala__seg::after { content: none; }
  .hero__inner { padding-bottom: 150px; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .cookie__acts { flex-direction: column; }
  .anos__n { font-size: 3rem; }
}

@media (max-width: 380px) {
  .escala li { font-size: .75rem; letter-spacing: .04em; }
  .indice { grid-template-columns: 1fr; }
}

/* telas baixas (notebooks 1366x768, 1280x720) */
@media (min-width: 901px) and (max-height: 820px) {
  .hero__inner { padding-bottom: 118px; gap: 18px; }
  .escala { bottom: 24px; }
  .sobre__band { height: 24vh; }
  .linha { padding: 14px 0; }
  .indice li { padding: 10px 0; }
  .detalhe__grid { margin-top: 20px; }
  .ficha { padding: 24px 28px; }
  .ficha li { padding: 8px 0; }
}

/* celular: cada seção cabe na tela (medido em 360x740 e 390x844) */
@media (max-width: 700px) {
  :root { --pad-sec: clamp(44px, 7vh, 64px); }
  .sec-head { gap: 10px; }
  .sec-head h2, .enc__txt h2, .sobre__txt h2, .cert__body h2, .detalhe__txt h2 { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2rem); }
  .frentes__list { margin-top: 20px; }
  .frente__link { padding: 6px 0; grid-template-columns: 28px 1fr 64px; }
  .frente__media { width: 64px; height: 44px; }
  .frente__h h3 { font-size: .95rem; }
  .enc__grid { gap: 22px; }
  .enc__vis { max-width: 440px; }
  .tela { padding: 7px; }
  .tela__marks { display: none; }
  .enc__txt { gap: 12px; }
  .enc__txt p { font-size: .95rem; }
  .sobre__band { height: clamp(130px, 19vh, 180px); }
  .sobre__grid { padding-top: 28px; gap: 14px; }
  .anos { margin-top: -62px; }
  .sobre__txt { gap: 12px; }
  .atuacao__grid { gap: 22px; }
  .indice { margin-top: 16px; }
  .indice li { font-size: .84rem; padding: 8px 0; line-height: 1.28; }
  .cta-card { padding: 22px 20px; gap: 12px; }
  .cta-card h3 { font-size: 1.2rem; }
  .cta-card p { font-size: .95rem; }
  .cert__media { height: clamp(150px, 21vh, 200px); }
  .cert__body { gap: 16px; padding-top: 32px; padding-bottom: 36px; }
  .cert__decl { font-size: 1rem; }
  .itens li { padding: 12px 0; }
  .itens h3 { font-size: 1rem; margin-bottom: 4px; }
  .itens p { font-size: .9rem; }
  .galeria__grid { margin-top: 20px; }
  .clientes__in { gap: 18px; }
}
@media (max-width: 700px) and (max-height: 780px) {
  :root { --pad-sec: 40px; }
  .detalhe__body.is-collapsed > p:first-child { display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
  .more--solo.is-collapsed .more__btn { display: inline-block; }
  .detalhe__grid { margin-top: 14px; gap: 16px; }
  .detalhe .more__btn { margin-top: 4px; }
  .indice li { padding: 6px 0; font-size: .8rem; }
  .cta-card { padding: 18px; }
  .cta-card h3 { font-size: 1.1rem; }
  .enc__vis { max-width: 330px; }
  .cert__media { height: 140px; }
  .sec-head h2, .enc__txt h2, .sobre__txt h2, .cert__body h2 { font-size: 1.55rem; }
}
@media (max-width: 700px) and (max-height: 690px) {
  :root { --pad-sec: 34px; }
  .enc__vis { max-width: 270px; }
  .enc__grid { gap: 16px; }
  .indice li { padding: 4px 0; }
  .atuacao__grid { gap: 16px; }
  .cta-card { gap: 10px; }
  .cta-card h3 { font-size: 1.05rem; }
  .cta-card p { font-size: .9rem; }
  .cert__media { height: 110px; }
  .cert__body { gap: 12px; }
  .cert__decl { font-size: .95rem; }
  .itens li { padding: 9px 0; }
}
@media (max-width: 700px) and (max-height: 660px) {
  :root { --pad-sec: 30px; }
  .enc__vis { max-width: 220px; }
  .indice { margin-top: 10px; }
  .indice li { padding: 4px 0; font-size: .78rem; }
  .sec-head h2, .enc__txt h2 { font-size: 1.45rem; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .enc__vis { max-width: 520px; }
}
@media (max-width: 900px) {
  .detalhe--cols .detalhe__body { columns: 1; }
  .more--tab.is-collapsed .more__rest { display: none; }
  .more--tab .more__btn { display: inline-block; }
  .more--solo .more__btn { display: none; }
  .more--tab.is-open .more__btn { display: none; }
  .detalhe__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 901px) and (max-height: 740px) {
  :root { --pad-sec: clamp(48px, 9vh, 72px); }
  .linha { padding: 12px 0; }
  .enc__grid { gap: 40px; }
}

@media (min-width: 901px) and (max-height: 680px) {
  :root { --pad-sec: 40px; }
  .linha { padding: 9px 0; }
  .linhas { margin-top: 18px; }
  .sec-head h2 { font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); }
}
@media (max-width: 700px) and (max-height: 700px) {
  .detalhe__body.is-collapsed > p:first-child { -webkit-line-clamp: 5; line-clamp: 5; }
  .hero--interna .hero__title { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.2rem); }
  .hero--interna .hero__lead { font-size: .98rem; }
  .hero--interna .hero__inner { gap: 12px; }
  .ficha { padding: 14px; }
  .ficha h3 { font-size: .98rem; margin-bottom: 8px; }
  .ficha li { padding: 5px 8px; font-size: .78rem; }
  .detalhe .sec-head { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}