/* ==========================================================================
   Veritas Social Marketing — site institucional (v2)
   Sistema: vsm-site/design-system (tipografia, grade e espaçamentos da W1;
   cores em papéis VSM; profundidade por véus e fotografia, sem box-shadow).
   ========================================================================== */

/* ---------- 0. Base rem ESTÁVEL ----------
   1rem = 10px em todas as larguras (sem os saltos 55%/62.5% da W1).
   A escala muda de forma contínua por clamp(): mínimo em 390px, máximo em 1440px. */
html { font-size: 62.5%; }

:root {
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* tipo */
  --fs-h1: clamp(3.2rem, 2.2rem + 2.2vw, 5.4rem); --fw-h1: 200; --lh-h1: 1.1;
  --fs-h2: clamp(3rem, 2.629rem + 0.952vw, 4rem); --fw-h2: 200; --lh-h2: 1.3; --lh-h2-tight: 1.1;
  --fs-h3: 2rem; --fw-h3: 300; --lh-h3: 1.3;
  --fs-lead: 1.8rem; --fs-body: 1.6rem; --fs-small: 1.4rem; --fs-legal: 1.3rem; --fs-micro: 1.2rem;
  --ls-body: -0.32px; --ls-micro: 1.56px;
  --fs-stat-card: clamp(4rem, 3.703rem + 0.762vw, 4.8rem); --fs-stat-list: clamp(3.2rem, 2.903rem + 0.762vw, 4rem);

  /* grade */
  --container: 1246px; --gutter: clamp(1.5rem, 2.734rem - 0.857vw, 2.4rem);
  /* header: altura-alvo contínua; --header-h é a altura REAL medida pelo JS (ResizeObserver) */
  --hdr-size: clamp(7.2rem, 5.974rem + 3.143vw, 10.5rem);
  --header-h: var(--hdr-size);
  --nav-gap: clamp(2.4rem, 1.509rem + 2.286vw, 4.8rem);
  --btn-px: clamp(2.8rem, 2.057rem + 1.905vw, 4.8rem);

  /* cores (papéis) */
  --bg-dark: #001729; --bg-deep: #001323; --panel: #002F55;
  --surface: #F8F4F0; --bg-alt: #EDEBE9; --white: #FFFFFF;
  --line: #D4D7DA; --border: #B5BFC6; --line-faq: #ADB8C1;
  --line-dark: rgba(248, 244, 240, .063); --rule-dark: #7E9DBE; --shape-line: #325774;
  --title: #001323; --body: #315674; --secondary: #325774;
  --on-dark: #FFFFFF; --on-dark-2: #F8F4F0; --footer-text: #BAC3C9;
  --hl-dark: #7E9DBE; --hl-light: #6F879C;
  --hl-hero: #AFC0D2; /* destaque do H1 SOBRE VÍDEO: #7E9DBE + 40% off-white; ≥3:1 no pior pixel medido (#7E9DBE dava 2,4:1) */
  --action-dark: #F8F4F0; --action-dark-text: #002F55;
  --action-light: #002F55; --action-light-text: #F8F4F0;
  --glass: rgba(0, 19, 35, .5); --ctrl: rgba(61, 95, 123, .314); --ctrl-strong: rgba(61, 95, 123, .5);

  /* véus */
  --veil-hero-top: linear-gradient(180deg, #001729 0%, rgba(0, 23, 41, 0) 100%);
  /* véu lateral só do lado do texto: para em ~53% e deixa a luz do vídeo livre à direita */
  --veil-hero-side: linear-gradient(90deg, #001729 0%, #001729 16%, rgba(0, 23, 41, .82) 30%, rgba(0, 23, 41, .45) 42%, rgba(0, 23, 41, 0) 53%);
  --veil-hero-bottom: linear-gradient(0deg, rgba(0, 23, 41, .6) 0%, rgba(0, 23, 41, 0) 100%);
  --veil-hero-tint: linear-gradient(0deg, #002F55 24.59%, rgba(0, 47, 85, 0) 100%);
  --veil-photo-x: linear-gradient(-90deg, rgba(0, 23, 41, 0) 50%, rgba(0, 23, 41, .72) 80%, rgba(0, 23, 41, .66) 99.93%);
  --veil-photo-y: linear-gradient(180deg, rgba(0, 23, 41, 0) 50%, rgba(0, 23, 41, .5) 80%, rgba(0, 23, 41, .66) 99.93%);
  --veil-photo-flat: rgba(0, 19, 35, .125);
  --veil-photo-mobile: linear-gradient(180deg, rgba(0, 23, 41, 0) 0%, rgba(0, 23, 41, .72) 50%, rgba(0, 23, 41, .66) 100%);
  --veil-banner: linear-gradient(-90deg, rgba(0, 19, 35, 0) 10%, #001323 100%);
  --veil-cta: linear-gradient(-90deg, rgba(0, 23, 41, 0) 30%, #001729 100%);
  --veil-cta-mobile: linear-gradient(320deg, rgba(0, 23, 41, 0) 30%, #001729 100%);

  /* movimento (receita Novo Carrossel) */
  --ease-soft: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.7, .15, .8, .8);
  --ease-hero: cubic-bezier(.16, 1, .3, 1);
  --dur-reveal: 600ms; --dur-exit: 200ms; --dur-ui: .5s; --dur-micro: .4s;
  --rise: 16px; --rise-lg: 24px;
}

/* ---------- 1. Reset e base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.5;
  letter-spacing: var(--ls-body); color: var(--body); background: var(--white);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
/* reflow: palavra longa quebra em vez de vazar (zoom 200%, telas muito estreitas) */
h1, h2, h3, p, li, a, dt, dd, address, label { overflow-wrap: break-word; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
section[id] { scroll-margin-top: var(--header-h); }

:focus-visible { outline: 2px solid var(--panel); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-header :focus-visible, .menu :focus-visible, .site-footer :focus-visible, .photo-card :focus-visible { outline-color: var(--on-dark-2); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1.6rem; top: -10rem; z-index: 3000; padding: 1.2rem 2rem; border-radius: .8rem; background: var(--action-dark); color: var(--action-dark-text); font-weight: 600; }
.skip-link:focus { top: 1.6rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 2. Tipografia ---------- */
h1 { font-size: var(--fs-h1); font-weight: 200; line-height: 1.1; color: var(--on-dark); }
h1 strong, h2 strong { font-weight: 500; }
h1 strong { color: var(--hl-dark); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); color: var(--title); text-wrap: balance; }
h2 strong { color: var(--hl-light); }
.on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark h2 strong { color: var(--hl-dark); }
h3 { font-size: var(--fs-h3); font-weight: 300; line-height: 1.3; color: var(--title); }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; letter-spacing: 0; }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); font-weight: 600; line-height: 1.2; letter-spacing: var(--ls-micro); text-transform: uppercase; }

/* Cabeçalho sem tag: risco 37×1 → 1.6rem → H2 → apoio */
.rule { display: block; width: 37px; height: 1px; margin: 0 0 1.6rem; background: var(--line); transform-origin: left center; }
.on-dark .rule, .photo-card .rule, .banner .rule { background: var(--rule-dark); }
.rule--2 { height: 2px; }
.head h2 + p { margin-top: 1.6rem; }
.on-dark .head h2 + p { margin-top: 1.2rem; }
.on-dark p { color: var(--on-dark-2); }

/* ---------- 3. Botões e links de ação ---------- */
.btn {
  --btn-bg: var(--action-light); --btn-fg: var(--action-light-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem;
  width: max-content; max-width: 100%;
  padding: 1.8rem var(--btn-px); border: 0; border-radius: .8rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 1.6rem; font-weight: 600; line-height: 1.5; letter-spacing: var(--ls-body);
  cursor: pointer; transition: filter .32s ease, background-color .32s ease;
}
.btn--dark { --btn-bg: var(--action-dark); --btn-fg: var(--action-dark-text); }
.btn .arrow { flex: none; width: 2.4rem; height: 1rem; overflow: visible; }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.1); }
  .btn--dark:hover { filter: none; background: #FFFFFF; }
  .btn:hover .arrow, .ghost:hover .arrow { animation: nudge .6s ease-in-out; }
}
@keyframes nudge { 0% { transform: translateX(0); opacity: 1; } 25% { transform: translateX(10px); opacity: 0; } 50% { transform: translateX(-10px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

.ghost {
  position: relative; display: inline-flex; align-items: center; gap: 1.2rem;
  padding: .8rem 0; font-size: 1.6rem; font-weight: 600; line-height: 1.5;
  color: var(--action-light);
}
.on-dark .ghost, .site-header .ghost, .menu .ghost, .photo-card .ghost, .banner .ghost { color: var(--action-dark); }
.ghost::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; opacity: 0; background: currentColor; transition: width .4s ease-in-out, opacity .4s ease-in-out; }
.ghost { white-space: normal; text-align: left; }
.ghost .arrow { flex: none; width: 2.4rem; height: 1rem; overflow: visible; }
.ghost .ext { flex: none; width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { .ghost:hover::after { width: 100%; opacity: 1; } }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 3.2rem; }

/* Setas de carrossel (39px) */
.arrows { display: flex; gap: 1.2rem; }
.arrow-btn {
  display: inline-grid; place-items: center; width: 39px; height: 39px; padding: 0;
  border: 3px solid transparent; border-radius: 50%; background: var(--ctrl); color: var(--on-dark);
  cursor: pointer; transition: border-color var(--dur-ui) ease, opacity var(--dur-ui) ease;
}
.arrow-btn svg { width: 18px; height: 18px; }
.arrow-btn:disabled { opacity: .5; cursor: no-drop; }
.on-light .arrow-btn { background: rgba(0, 47, 85, .12); color: var(--panel); }
@media (hover: hover) {
  .arrow-btn:not(:disabled):hover { border-color: var(--hl-dark); }
  .on-light .arrow-btn:not(:disabled):hover { border-color: var(--hl-light); }
}
.bullets { display: flex; gap: 8px; }
.bullets button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--title); opacity: .2; cursor: pointer; transition: opacity .3s ease; }
.bullets button[aria-current="true"] { opacity: 1; }

/* ---------- 4. Header de vidro ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 2024; background: var(--glass); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: var(--on-dark); transition: background-color .5s ease, transform .4s var(--ease-out); }
.site-header.is-scrolled { background-color: rgba(0, 19, 35, .72); }
.site-header.is-hidden { transform: translateY(-100%); transition: transform var(--dur-exit) var(--ease-in), background-color .5s ease; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; height: var(--hdr-size); }
.brand { display: inline-flex; align-items: center; color: var(--on-dark); transition: opacity .4s ease; }
.brand svg { height: clamp(2.8rem, 2.577rem + 0.571vw, 3.4rem); width: auto; aspect-ratio: 212.3 / 51.3; }
@media (hover: hover) { .brand:hover { opacity: .7; } }
.nav { display: flex; align-items: center; align-self: stretch; }
.nav-list { display: flex; align-self: stretch; gap: var(--nav-gap); margin: 0; padding: 0; list-style: none; }
.nav-list li { display: flex; }
.nav-list a { display: flex; align-items: center; border-bottom: 1px solid transparent; font-size: 1.6rem; line-height: 2rem; color: var(--on-dark); white-space: nowrap; transition: border-color .2s ease; }
.nav-list a[aria-current="page"] { border-bottom-color: var(--on-dark); }
@media (hover: hover) { .nav-list a:hover { border-bottom-color: var(--on-dark); } }
.nav-divider { width: 1px; height: 23px; margin: 0 var(--nav-gap); background: var(--panel); }
.nav-cta { display: flex; align-items: center; gap: 3.2rem; }
.menu-toggle { display: none; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; transition: opacity .4s ease; }
.menu-toggle span { position: absolute; left: 4px; right: 4px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out); }
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
@media (hover: hover) { .menu-toggle:hover { opacity: .6; } }
@media (max-width: 990px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
}

/* Menu tela cheia */
.menu {
  position: fixed; inset: 0; z-index: 2000;
  padding: calc(var(--header-h) + 2.4rem) 0 4rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--on-dark);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .5s var(--ease-soft), visibility 0s; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { border-bottom: 1px solid rgba(248, 244, 240, .12); }
.menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 7.2rem; font-size: 2rem; font-weight: 300; }
.menu-list svg { width: 1.6rem; height: 1.6rem; color: var(--hl-dark); }
.menu-actions { display: grid; gap: 1.6rem; margin-top: 4.8rem; }
.menu-actions .btn { width: 100%; }
.menu .menu-list li, .menu .menu-actions { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in); }
.menu.is-open .menu-list li, .menu.is-open .menu-actions { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }

/* ---------- 5. Mídia (slots) ---------- */
.slot { overflow: hidden; }
.slot > img, .slot > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease-soft); }
.slot > img.is-loaded, .slot > video.is-loaded { opacity: 1; }

/* ---------- 6. Hero — GEOMETRIA ÚNICA em todas as larguras e proporções ----------
   Invariantes: mídia = retângulo inteiro do hero (inclusive atrás do header);
   texto em fluxo, abaixo do header medido; altura ≥ 1 tela e cresce com o conteúdo;
   a 2ª seção começa exatamente onde o hero termina. Sem 23rem / left:15% / 130vh / 110vh / 80.1rem. */
.hero {
  --hero-space: clamp(2.4rem, 6vh, 8rem);
  --hero-space-b: clamp(3.2rem, 7vh, 8rem);
  --hero-focus: 70% 50%;
  /* borda direita da coluna de texto (para o véu lateral acompanhar o texto, não a %) */
  --hero-text-x: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --hero-text-edge: calc(var(--hero-text-x) + min(56rem, 100vw - 2 * var(--gutter)));
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 100vh;
  padding: calc(var(--header-h) + var(--hero-space)) 0 var(--hero-space-b);
  background: var(--bg-dark); color: var(--on-dark-2);
}
@supports (height: 100svh) {
  .hero { --hero-space: clamp(2.4rem, 6svh, 8rem); --hero-space-b: clamp(3.2rem, 7svh, 8rem); min-height: 100svh; }
}
.hero > .container { width: 100%; }
/* ancoragem vertical contínua: o bloco de texto fica a 1/3 do espaço livre (não no meio) —
   em telas baixas encosta abaixo do header; em retrato alto não flutua no centro da tela */
.hero:not(.hero--short)::before, .hero:not(.hero--short)::after { content: ""; flex: 1 1 0; }
.hero:not(.hero--short)::after { flex-grow: 2; }
@media (max-aspect-ratio: 1/1) { .hero { --hero-focus: 60% 50%; } }

/* camada de mídia: cobre o hero inteiro; o poster é o fundo (aparece sem JS ou se o vídeo falhar);
   os véus ficam DENTRO da camada, então acompanham a mídia na cortina */
.hero-media {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--bg-dark); background-position: var(--hero-focus); background-size: cover; background-repeat: no-repeat;
}
.hero-media > img, .hero-media > video { z-index: 0; object-position: var(--hero-focus); filter: saturate(.9); }
/* vídeo pausado (pelo botão ou por movimento reduzido): some e fica o poster de fundo da camada */
.hero-media.is-paused > video { opacity: 0; }

/* botão pausar/retomar o vídeo de fundo — discreto, no canto inferior direito do hero */
.bg-ctrl {
  position: absolute; z-index: 1; right: var(--hero-text-x); bottom: clamp(1.6rem, 3vh, 3.2rem);
  display: inline-grid; place-items: center; width: 39px; height: 39px; padding: 0;
  border: 3px solid transparent; border-radius: 50%; background: var(--ctrl-strong); color: var(--on-dark);
  cursor: pointer; transition: border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.bg-ctrl svg { width: 14px; height: 14px; }
.bg-ctrl .i-play { display: none; }
.bg-ctrl[aria-pressed="true"] .i-play { display: block; }
.bg-ctrl[aria-pressed="true"] .i-pause { display: none; }
.bg-ctrl:focus-visible { outline: 2px solid var(--on-dark-2); outline-offset: 3px; }
@media (hover: hover) { .bg-ctrl:hover { border-color: var(--hl-dark); } }
.hero-veils { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-veils i { position: absolute; inset: 0; }
/* topo: só atrás do header (o vidro precisa de fundo para o logo e os links) */
.hero-veils .v-top { bottom: auto; height: calc(var(--header-h) + 6rem); background: linear-gradient(180deg, rgba(0, 23, 41, .85) 0%, rgba(0, 23, 41, 0) 100%); }
/* lateral (paisagem): só do lado do texto; termina pouco depois da coluna de texto e deixa a luz livre */
.hero-veils .v-side { background: linear-gradient(90deg, rgba(0, 23, 41, .92) 0, rgba(0, 23, 41, .86) calc(var(--hero-text-edge) * .55), rgba(0, 23, 41, .5) var(--hero-text-edge), rgba(0, 23, 41, 0) calc(var(--hero-text-edge) + 12vw)); }
/* base: ancorada ao HERO (fora da camada da mídia) — a passagem para a 2ª dobra fica suave também durante a cortina */
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(0, 23, 41, .6) 0%, rgba(0, 23, 41, 0) 100%); }
.hero-veils .v-tint { background: var(--veil-hero-tint); opacity: .22; mix-blend-mode: color; }
.hero-veils .v-mobile { display: none; }
/* retrato: o texto ocupa a largura toda → véu vertical em vez do lateral */
@media (max-aspect-ratio: 1/1) {
  .hero-veils .v-side { display: none; }
  .hero-veils .v-mobile { display: block; background: linear-gradient(180deg, rgba(0, 23, 41, .72) 0%, rgba(0, 23, 41, .6) 55%, rgba(0, 23, 41, .25) 100%); }
}

.hero-content { position: relative; width: min(56rem, 100%); }
.hero h1 strong { color: var(--hl-hero); }
.hero h1 { font-size: clamp(3.2rem, min(2.2rem + 2.2vw, 1.2rem + 4.6vh), 5.4rem); text-wrap: balance; overflow-wrap: break-word; }
@supports (height: 1svh) { .hero h1 { font-size: clamp(3.2rem, min(2.2rem + 2.2vw, 1.2rem + 4.6svh), 5.4rem); } }
.hero h1 + p { margin-top: clamp(1.6rem, 2vh, 2.4rem); max-width: 46.9rem; font-size: clamp(1.6rem, 1.526rem + 0.19vw, 1.8rem); font-weight: 300; line-height: 1.5; letter-spacing: 0; color: var(--on-dark-2); }
.hero .actions { margin-top: clamp(2.4rem, 4.4vh, 4.4rem); }
.cue { display: inline-flex; align-items: center; gap: 1.2rem; margin-top: clamp(2.4rem, 3.5vh, 5.3rem); color: var(--rule-dark); }
.cue svg { width: 14px; height: 22px; transition: color .5s ease; }
.cue .dot { animation: cue 2.4s var(--ease-soft) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(4px); opacity: .2; } }
@media (hover: hover) { .cue:hover svg { color: var(--on-dark); } }
/* o cue é sinal de rolagem com mouse: some no toque e em telas baixas (não depende da largura) */
@media (hover: none), (max-height: 560px) { .cue { display: none; } }

/* heroes curtos das páginas legais: sem mídia, sem altura de tela */
.hero.hero--short { min-height: 0; justify-content: flex-start; padding: calc(var(--header-h) + clamp(4rem, 1.920rem + 5.333vw, 9.6rem)) 0 clamp(4.8rem, 3.611rem + 3.048vw, 8rem); }
.hero--page .hero-content { width: min(70rem, 100%); }

/* ---------- 7. 2ª dobra escura (luz por contraste) ---------- */
.fold { position: relative; background: var(--bg-dark); color: var(--on-dark-2); overflow: hidden; }
.fold-inner { position: relative; display: flex; align-items: center; min-height: 576px; }
.fold-text { position: relative; z-index: 2; max-width: min(50.7rem, 45vw); padding: 6.4rem 0; }
.fold h2 { line-height: var(--lh-h2-tight); }
.fold p { font-weight: 300; }
.fold .actions { margin-top: 3.2rem; }
.fold-list { margin-top: 3.2rem; padding: 0; list-style: none; }
.fold-list li { padding: 1.2rem 0 1.2rem 2.8rem; position: relative; border-top: 1px solid var(--line-dark); color: var(--on-dark); font-weight: 300; }
.fold-list li:last-child { border-bottom: 1px solid var(--line-dark); }
.fold-list li::before { content: ""; position: absolute; left: 0; top: 2.4rem; width: 1.6rem; height: 1px; background: var(--hl-dark); }
.fold-visual { position: absolute; top: 0; bottom: 0; left: 50.5%; right: 0; }
.fold-portrait { position: absolute; top: 0; left: 0; width: 441px; height: 100%; background: #2B4A6B; }
.fold-shape { position: absolute; top: 0; bottom: 0; left: 441px; width: 910px; height: 100%; }
@media (max-width: 990px) {
  .fold-inner { display: block; min-height: 0; }
  .fold-text { max-width: none; padding: 6.4rem 0 0; }
  .fold-visual { position: relative; left: auto; right: auto; height: 31.1rem; margin-top: 4.8rem; }
  .fold-portrait { left: auto; right: var(--gutter); width: 16.6rem; height: 31.1rem; }
  .fold-shape { left: 0; width: 100%; }
}
@media (max-width: 600px) { .fold-visual { height: 31.1rem; } }

/* ---------- 8. Números ---------- */
.s-numbers { padding: clamp(6.4rem, 4.691rem + 4.381vw, 11rem) 0 clamp(5rem, 17.343rem - 8.571vw, 14rem); }
.numbers-top { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; }
.numbers-top .head { max-width: 49.2rem; margin-bottom: clamp(2.4rem, 1.806rem + 1.524vw, 4rem); }
.stat-card { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2.4rem; padding: clamp(2.1rem, 1.543rem + 1.429vw, 3.6rem) clamp(2.4rem, 1.249rem + 2.952vw, 5.5rem); border-radius: 1.6rem; background: var(--surface); }
.stat-card__num { font-size: var(--fs-stat-card); font-weight: 200; line-height: 1.1; color: var(--hl-light); white-space: nowrap; }
.stat-card__label { color: var(--title); max-width: 22rem; }
.stat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin: 0; padding: 0; list-style: none; }
.stat-list li { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.stat-list__num { font-size: var(--fs-stat-list); font-weight: 200; line-height: 1.1; color: var(--hl-light); margin-bottom: .8rem; }
.stat-list p:last-child { font-weight: 500; color: var(--body); }
@media (max-width: 990px) {
  .numbers-top { flex-direction: column; align-items: stretch; }
  .stat-card { margin-bottom: 4rem; }
}
@media (max-width: 600px) { .stat-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } }

/* ---------- 9. Card de foto (W1 ecossistema) ---------- */
.photo-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(54.7rem, 51.246rem + 8.857vw, 64rem); padding: clamp(2rem, 0.329rem + 4.286vw, 6.5rem) clamp(2.4rem, -0.571rem + 7.619vw, 10.4rem) clamp(9.5rem, 7.754rem + 4.476vw, 14.2rem); gap: 4rem;
  border-radius: 1.6rem; background: var(--bg-deep); color: var(--on-dark-2);
}
.photo-card .slot { position: absolute; inset: 0; z-index: -3; }
.photo-card .slot img, .banner .slot img, .about-media img, .fold-portrait img { filter: saturate(.85); }
.photo-card .slot img, .banner .slot img { filter: brightness(.74) saturate(.8); }
/* fotos já low-key: sem escurecer (a luz da própria foto é o que dá presença) */
.photo-card [data-slot="bastidores-3"] img, .photo-card[data-dark] .slot img { filter: brightness(1.05) saturate(.85); }
.photo-card .slot img { transform: scale(1.06); transition: opacity .45s var(--ease-soft), transform 1.6s var(--ease-out); }
.photo-card.in .slot img, .carousel.in .photo-card .slot img, html:not(.js-motion) .photo-card .slot img { transform: none; }
.photo-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--veil-photo-mobile); }
.photo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veil-photo-flat); }
.photo-card__title { font-size: 2.4rem; font-weight: 200; line-height: 1.2; color: var(--on-dark); max-width: 37.7rem; }
.photo-card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.4rem; }
.photo-card__text { max-width: 37.7rem; color: var(--on-dark); }
.photo-card__text p + p { margin-top: 1.2rem; }
.photo-card__text b { font-weight: 500; }
@media (min-width: 1050px) {
  .photo-card::before { background: var(--veil-photo-x), var(--veil-photo-y); }
}

/* ---------- 10. Carrossel leve (scroll-snap + setas + bullets) ---------- */
.carousel { position: relative; }
.track { display: flex; gap: 3rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track > li { flex: 0 0 100%; scroll-snap-align: start; }
.carousel--cards .carousel-arrows { position: absolute; z-index: 2; bottom: clamp(3.2rem, 2.420rem + 2.000vw, 6.5rem); left: clamp(2.4rem, -0.571rem + 7.619vw, 10.4rem); }
.carousel-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4rem; }

/* ---------- 11. Seções claras ---------- */
.s-cards { padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0 clamp(6.4rem, 6.289rem + 0.286vw, 6.7rem); }
.s-cards .head { max-width: 57rem; margin-bottom: clamp(2.4rem, 1.954rem + 1.143vw, 3.6rem); }

.s-audience { background: var(--bg-alt); padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0; }
.s-audience .head { max-width: 57rem; margin-bottom: 3.6rem; }
.audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.audience .photo-card { min-height: 56rem; padding: 4.8rem 4.8rem 5.6rem; justify-content: flex-end; }
.audience .photo-card::before { background: linear-gradient(180deg, rgba(0, 23, 41, 0) 35%, rgba(0, 23, 41, .72) 75%, rgba(0, 23, 41, .8) 100%); }
.audience h3 { color: var(--on-dark); font-size: 2.4rem; font-weight: 200; line-height: 1.2; margin-bottom: 1.2rem; }
.segments { margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid var(--line); color: var(--body); }
.segments b { font-weight: 500; color: var(--title); }
@media (max-width: 769px) { .audience { grid-template-columns: 1fr; gap: 1.6rem; } .audience .photo-card { min-height: 48rem; padding: 2.4rem 2.4rem 3.2rem; } }

/* Passos */
.s-steps { padding: 6.7rem 0 clamp(6.4rem, 5.657rem + 1.905vw, 8.4rem); }
.steps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3.2rem; margin-bottom: clamp(4.9rem, 3.860rem + 2.667vw, 7.7rem); }
.steps-head .head { max-width: 57rem; }
/* largura do passo contínua: ~1,3 por vez no celular → 3,2 por vez no desktop, sem degraus */
.steps .track > li { flex: 0 0 clamp(26rem, 2rem + 28vw, 38.4rem); }
.step-title { display: flex; align-items: center; gap: .8rem; }
.step-title svg { width: 32px; height: 32px; flex: none; color: var(--secondary); }
.step-meta { display: flex; align-items: center; gap: .9rem; margin: 2.4rem 0; font-size: 1.4rem; font-weight: 300; color: var(--secondary); }
.step-meta::before { content: ""; flex: 1; height: 1px; background: var(--line); }
.step p:last-child { font-size: 1.4rem; color: var(--body); }
.steps-btn-mobile { display: none; }
@media (max-width: 769px) { .steps-head .btn { display: none; } .steps-btn-mobile { display: flex; width: 100%; margin-top: 3.2rem; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 6.4rem; }
.facts p { padding-top: 2.4rem; border-top: 1px solid var(--line); }
.facts b { font-weight: 500; color: var(--title); }
@media (max-width: 769px) { .facts { grid-template-columns: 1fr; gap: 0; margin-top: 4.8rem; } .facts p + p { margin-top: 2.4rem; } }

/* ---------- 12. Seção escura 2 (luz própria) ---------- */
.s-deep { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-deep); color: var(--on-dark-2); }
.deep-inner { display: flex; align-items: center; min-height: 60rem; }
.deep-text { position: relative; z-index: 2; max-width: min(54.2rem, 38vw); padding: 6.4rem 0; }
.deep-text h2 { margin-bottom: 1.7rem; }
.deep-text .head h2 { margin-bottom: 0; }
.checks { margin: 2.4rem 0 3.2rem; padding: 0; list-style: none; display: grid; gap: .8rem; }
.checks li { display: flex; gap: .8rem; align-items: flex-start; color: var(--on-dark); }
.checks svg { width: 16px; height: 16px; flex: none; margin-top: .4rem; color: var(--hl-dark); }
.on-light .checks li { color: var(--title); }
.on-light .checks svg { color: var(--secondary); }
.deep-visual { position: absolute; top: 0; bottom: 0; left: 40.3%; right: 0; display: flex; align-items: center; justify-content: center; }
.deep-visual--photo .slot { position: absolute; inset: 0; }
.deep-visual--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #001323 0%, rgba(0, 19, 35, .55) 35%, rgba(0, 19, 35, 0) 70%), linear-gradient(0deg, rgba(0, 19, 35, .6), rgba(0, 19, 35, 0) 40%); }
.glow { position: absolute; inset: 0; background: radial-gradient(42% 52% at 55% 55%, rgba(126, 157, 190, .26) 0%, rgba(0, 47, 85, .22) 45%, rgba(0, 19, 35, 0) 75%); }
@media (max-width: 1049px) {
  .deep-inner { display: block; min-height: 0; }
  .deep-text { max-width: none; padding: 6.4rem 0 4.8rem; }
  .panel-mock { width: min(56rem, 100%); }
  .deep-visual { position: relative; left: auto; height: auto; padding: 2.4rem 0 6.4rem; }
  .deep-visual--photo { height: 42rem; padding: 0; margin: 0 calc(var(--gutter) * -1); }
  .deep-visual--photo::after { background: linear-gradient(180deg, #001323 0%, rgba(0, 19, 35, 0) 40%), linear-gradient(0deg, #001323 0%, rgba(0, 19, 35, 0) 30%); }
}

/* Mockup da Área do Cliente (dados fictícios, sem números) */
.panel-mock { position: relative; width: min(56rem, 52vw, 100%); padding: 3.2rem; border: 1px solid rgba(126, 157, 190, .35); border-radius: 1.6rem; background: linear-gradient(160deg, #0A3A64 0%, #002F55 55%, #00284A 100%); }
.pm-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(248, 244, 240, .1); }
.pm-title { font-size: 1.4rem; color: var(--on-dark); }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hl-dark); }
.pm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.4rem; }
.pm-tile { padding: 1.6rem; border: 1px solid rgba(248, 244, 240, .1); border-radius: .8rem; background: rgba(0, 19, 35, .35); }
.pm-tile span { display: block; font-size: 1.2rem; color: var(--footer-text); }
.pm-tile i { display: block; margin-top: 1.2rem; height: 1.6rem; width: 62%; border-radius: .4rem; background: rgba(248, 244, 240, .28); }
.pm-tile:nth-child(2) i { width: 46%; } .pm-tile:nth-child(3) i { width: 38%; } .pm-tile:nth-child(4) i { width: 54%; }
.pm-chart { display: flex; align-items: flex-end; gap: 1rem; height: 12rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(248, 244, 240, .1); }
.pm-chart i { flex: 1; border-radius: .3rem .3rem 0 0; background: linear-gradient(180deg, #A9C1DA, #7E9DBE); opacity: .85; transform-origin: bottom; }
.pm-chart i:nth-child(odd) { opacity: .55; }
.js-motion .panel-mock .pm-chart i { transform: scaleY(.2); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 60ms + 200ms); }
.js-motion .panel-mock.in .pm-chart i { transform: none; }
.pm-note { margin-top: 1.6rem; font-size: 1.2rem; color: var(--footer-text); }
@media (max-width: 600px) { .panel-mock { padding: 2rem; } .pm-chart { height: 9rem; gap: .6rem; } }

/* ---------- 13. Banner (Pulse) e CTA final ---------- */
.s-banner { padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0 clamp(6.4rem, 4.766rem + 4.190vw, 10.8rem); }
.banner {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 1.6rem;
  background: var(--bg-deep); color: var(--on-dark-2);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 63.4rem; padding: clamp(3.2rem, -1.777rem + 12.762vw, 16.6rem) clamp(1.6rem, -1.669rem + 8.381vw, 10.4rem) clamp(1.6rem, -3.934rem + 14.190vw, 16.5rem);
}
.banner .slot { position: absolute; inset: 0; z-index: -2; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veil-banner); }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veil-photo-flat); }
.banner h2 { color: var(--on-dark); }
.banner h2 strong { color: var(--hl-dark); }
.banner .rule { margin-bottom: 1.6rem; }
.banner__text { max-width: 44rem; }
.banner__text p { color: var(--on-dark); margin-top: 1.6rem; }
.banner__text p.strongline { font-weight: 500; margin-top: 1.2rem; }
.banner .actions { margin-top: 4.4rem; }
.banner--cta::before { background: var(--veil-cta-mobile); }
@media (max-width: 990px) {
  .banner { min-height: 63.4rem; }
  .banner .actions { margin-top: 3.2rem; }
  .banner .actions .btn { width: 100%; }
  .banner::before { background: linear-gradient(180deg, rgba(0, 19, 35, .92) 0%, rgba(0, 19, 35, .55) 45%, rgba(0, 19, 35, .2) 65%, rgba(0, 19, 35, .7) 100%); }
  .banner--cta::before { background: linear-gradient(180deg, rgba(0, 23, 41, .92) 0%, rgba(0, 23, 41, .5) 45%, rgba(0, 23, 41, .15) 65%, rgba(0, 23, 41, .75) 100%); }
}
@media (min-width: 991px) {
  .banner { display: block; min-height: 58rem; }
  .banner--cta { min-height: 63.6rem; padding: clamp(3.2rem, -1.071rem + 10.952vw, 14.7rem) clamp(1.6rem, -1.631rem + 8.286vw, 10.3rem) clamp(1.6rem, -3.563rem + 13.238vw, 15.5rem); }
  .banner--cta::before { background: var(--veil-cta); }
  .banner--cta .actions { margin-top: 6rem; }
}
.s-cta { padding: 0 0 clamp(6.4rem, 4.914rem + 3.810vw, 10.4rem); }
.pulse-legal { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; margin-top: 3.2rem; padding: 0; list-style: none; }
.pulse-legal a { font-size: 1.4rem; color: var(--on-dark-2); text-decoration: underline; text-decoration-color: rgba(248, 244, 240, .4); text-underline-offset: 3px; }

/* ---------- 14. Sobre + valores (fundo alternado) ---------- */
.s-about { background: var(--bg-alt); padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0; }
.about { display: flex; align-items: center; justify-content: space-between; gap: 8.8rem; }
.about .head { max-width: 54.7rem; }
.about .head p { color: var(--secondary); }
.about-media { position: relative; flex: none; width: 49rem; height: 26rem; border-radius: .8rem; background: #C9CED3; }
.about-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .125); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.4rem; margin: 6.4rem 0 0; padding: 0; list-style: none; }
.values li { padding: 3.2rem 0; border-bottom: 1px solid var(--border); }
.value-title { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.6rem; }
.value-title svg { width: 40px; height: 40px; flex: none; color: var(--hl-light); }
.values p { font-size: 1.4rem; color: var(--secondary); }
@media (max-width: 1049px) {
  .about { flex-direction: column; align-items: stretch; gap: 3.2rem; }
  .about-media { width: 100%; height: 35.2rem; }
  .values { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 6.4rem; }
  .values li { padding: 2.4rem; border: 0; border-radius: 1.6rem; background: var(--surface); }
}
@media (max-width: 600px) { .about-media { height: 19rem; } }

/* ---------- 15. Marcas (faixa contínua) ---------- */
.s-brands { padding: clamp(3.2rem, 0.154rem + 7.810vw, 11.4rem) 0 clamp(3.2rem, 0.080rem + 8.000vw, 11.6rem); }
.s-brands .head { max-width: 65rem; }
.marquee { position: relative; margin-top: 5.7rem; padding: 2.8rem 0; border-top: 1px solid var(--bg-alt); border-bottom: 1px solid var(--bg-alt); overflow: hidden; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.marquee::after { right: 0; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }
.marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee-group { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.marquee-group li { margin-right: 13rem; font-size: 2rem; font-weight: 300; line-height: 4rem; color: var(--title); white-space: nowrap; }
@media (max-width: 769px) { .marquee-group li { margin-right: 4rem; } }
@keyframes marquee { to { transform: translateX(calc(-100% / 3)); } }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }

/* ---------- 16. FAQ ---------- */
.s-faq { background: var(--surface); padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0 clamp(6.4rem, 4.914rem + 3.810vw, 10.4rem); }
.faq { display: flex; justify-content: space-between; gap: 2.6rem; }
.faq .head { max-width: 30rem; }
.faq .head h2 { max-width: 23rem; }
.accordion { display: flex; flex-direction: column; gap: .8rem; width: 100%; max-width: 70.4rem; }
.acc-item { position: relative; border-bottom: 1px solid var(--line-faq); }
.acc-item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--secondary); transition: width .3s ease; }
.acc-item.is-open::after { width: 100%; }
.acc-item h3 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; width: 100%; padding: 2.4rem 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: 1.6rem; font-weight: 300; line-height: 1.5; color: var(--body); }
.acc-icon { position: relative; flex: none; width: 16px; height: 16px; color: var(--secondary); }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: currentColor; transition: transform .5s ease, opacity .5s ease; }
.acc-icon::before { left: 0; right: 0; top: 7.5px; height: 1px; }
.acc-icon::after { top: 0; bottom: 0; left: 7.5px; width: 1px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding-bottom: 2.4rem; font-size: 1.4rem; color: var(--body); }
.js .acc-item:not(.is-open) .acc-panel { grid-template-rows: 0fr; }
.js .acc-item:not(.is-open) .acc-panel > div { visibility: hidden; transition: visibility 0s linear .3s; }
.js .acc-item.is-open .acc-panel p { animation: accIn .3s ease both; }
@keyframes accIn { from { opacity: 0; transform: translateY(20px); } }
@media (max-width: 800px) { .faq { flex-direction: column; } .faq .head { max-width: none; } }

/* ---------- 17. Rodapé ---------- */
.site-footer { background: var(--bg-deep); color: var(--footer-text); padding: clamp(3.2rem, 2.086rem + 2.857vw, 6.2rem) 0; font-size: 1.4rem; }
.footer-row1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.4rem; padding: 3.2rem 0 6.4rem; }
.site-footer .brand svg { height: auto; width: min(100%, 19.4rem); aspect-ratio: 212.3 / 69.9; }
.footer-social { min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .8rem; color: var(--on-dark); font-size: 1.4rem; transition: opacity .4s ease; }
.footer-social svg { width: 20px; height: 20px; }
@media (hover: hover) { .footer-social:hover { opacity: .6; } }
.footer-claim { padding: 4rem 0 4.9rem; border-top: 1px solid var(--line-dark); }
.footer-claim p:first-child { font-size: 2.4rem; font-weight: 200; line-height: 1.3; color: var(--on-dark); }
.footer-claim p + p { margin-top: .8rem; }
.footer-cols { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 4.8rem; padding: 4rem 0 4.9rem; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.footer-col h2 { position: relative; padding-bottom: 1.2rem; margin-bottom: 2.2rem; font-size: 1.6rem; font-weight: 700; line-height: normal; color: var(--on-dark); }
.footer-col h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--hl-dark); }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 3.2rem; }
.footer-col a { color: var(--footer-text); transition: opacity .4s ease; overflow-wrap: anywhere; }
@media (hover: hover) { .footer-col a:hover { opacity: .6; } }
.contact dt { font-size: 1.4rem; font-weight: 600; color: var(--on-dark); margin-bottom: .4rem; }
.contact dd { margin: 0 0 1.6rem; font-size: 1.3rem; }
.footer-col address { font-style: normal; font-size: 1.3rem; line-height: 1.7; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.4rem; padding-top: 4.1rem; font-size: 1.3rem; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin: 0; padding: 0; list-style: none; }
.footer-legal a { color: var(--footer-text); }
@media (hover: hover) { .footer-legal a:hover { color: var(--on-dark); } }
@media (max-width: 990px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 769px) { .footer-legal { flex-direction: column; gap: 4.8rem; } }
@media (max-width: 600px) { .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 4rem; } .site-footer .brand svg { width: min(100%, 15.8rem); } }

/* ---------- 18. Modal do formulário ---------- */
.modal { width: min(64rem, calc(100% - 3.2rem)); max-width: none; max-height: calc(100% - 3.2rem); margin: auto; padding: 0; border: 0; border-radius: 1.6rem; background: var(--white); color: var(--body); overflow: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in); }
.modal[open].is-visible { opacity: 1; transform: none; transition: opacity .28s var(--ease-soft), transform .45s var(--ease-out); }
.modal::backdrop { background: rgba(0, 19, 35, 0); transition: background-color var(--dur-exit) var(--ease-in); }
.modal.is-visible::backdrop { background: rgba(0, 19, 35, .72); transition: background-color .28s var(--ease-soft); }
.modal-inner { position: relative; padding: 4.8rem 4.8rem 4rem; }
.modal-close { position: absolute; top: 1.6rem; right: 1.6rem; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--panel); cursor: pointer; }
.modal-close svg { width: 1.8rem; height: 1.8rem; }
@media (hover: hover) { .modal-close:hover { background: var(--surface); } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; margin-top: 2.4rem; }
.field { display: grid; gap: .8rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 1.4rem; font-weight: 500; color: var(--title); }
.field .opt { font-weight: 400; color: var(--secondary); }
.field input, .field textarea { width: 100%; min-height: 4.8rem; padding: 1.2rem 1.4rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--white); color: var(--title); font: inherit; font-size: 1.6rem; letter-spacing: var(--ls-body); transition: border-color .18s ease, box-shadow .18s ease; }
.field textarea { min-height: 9.6rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #5A7390; opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--panel); box-shadow: 0 0 0 3px rgba(0, 47, 85, .16); }
.field input:user-invalid { border-color: #A5402D; }
.form-note { grid-column: 1 / -1; font-size: 1.4rem; }
.form-note a { color: var(--panel); text-decoration: underline; text-underline-offset: 2px; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 3.2rem; margin-top: .8rem; }
.form-success p { font-size: 2.8rem; font-weight: 200; line-height: 1.3; color: var(--title); max-width: 44rem; }
.form-success p:focus { outline: none; }
.form-success .actions { margin-top: 3.2rem; }
@media (max-width: 600px) { .modal { width: calc(100% - 2rem); max-height: calc(100% - 2rem); } .modal-inner { padding: 4.8rem 2rem 3.2rem; } .form { grid-template-columns: 1fr; } .form-actions .btn { width: 100%; } }
html.is-locked { overflow: hidden; }

/* ---------- 19. Pulse: blocos próprios ---------- */
.s-duo { background: var(--bg-alt); padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8.8rem; }
@media (max-width: 1049px) { .duo { grid-template-columns: minmax(0, 1fr); gap: 4.8rem; } }
.s-split { padding: clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem) 0 clamp(6.4rem, 4.914rem + 3.810vw, 10.4rem); }
.split { display: flex; justify-content: space-between; gap: 8.8rem; align-items: flex-start; }
.split .head { max-width: 49.2rem; }
.split .checks { margin: 0; max-width: 54rem; gap: 1.6rem; }
.split .checks li { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
@media (max-width: 1049px) { .split { flex-direction: column; gap: 3.2rem; } }

/* ---------- 20. Páginas legais ---------- */
.legal { padding: clamp(4.8rem, 3.311rem + 3.810vw, 8.8rem) 0 clamp(6.4rem, 5.211rem + 3.048vw, 9.6rem); }
.prose { max-width: 76rem; }
.prose > * + * { margin-top: 1.6rem; }
.prose h2 { margin-top: 5.6rem; font-size: 2.8rem; font-weight: 200; }
.prose h2 + * { margin-top: 1.6rem; }
.prose ul { padding-left: 2rem; }
.prose li + li { margin-top: .8rem; }
.prose strong { font-weight: 500; color: var(--title); }
.prose a { color: var(--panel); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.prose .meta { color: var(--secondary); font-size: 1.4rem; }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: .8rem 2.4rem; }
.prose dt { font-weight: 500; color: var(--title); }
@media (max-width: 600px) { .prose dl { grid-template-columns: 1fr; gap: .2rem; } .prose dd { margin-bottom: 1.2rem; } }

/* ---------- 21. Movimento (reveal uma vez; tudo visível sem JS) ---------- */
.js-motion .rv, .js-motion .rv-l { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease-soft); transition-delay: var(--d, 0ms); }
.js-motion .rv { transform: translateY(var(--rise)); }
.js-motion .rv-l { transform: translateX(calc(var(--rise) * -1)); }
.js-motion .rv.in, .js-motion .rv-l.in { opacity: 1; transform: none; }
.js-motion .rv-l .rule, .js-motion .rv .rule { transform: scaleX(0); transition: transform .9s cubic-bezier(.65, 0, .35, 1) .15s; }
.js-motion .in .rule { transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise-lg)); } }
.js-motion .hero-in { animation: rise 1.2s var(--ease-hero) both; animation-delay: var(--d, 120ms); }
@keyframes fadeIn { from { opacity: 0; } }
.js-motion .site-header { animation: dropIn .8s var(--ease-out) backwards; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  .photo-card .slot img { transform: none; }
  .marquee-track { width: auto; }
  .marquee-group { flex-wrap: wrap; row-gap: .8rem; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee::before, .marquee::after { display: none; }
  .modal, .modal[open].is-visible { transform: none; }
}

@media print {
  .site-header, .menu, .hero-media, .hero-veils, .cue, .modal { display: none !important; }
  .hero, .on-dark, .fold, .s-deep { background: none !important; color: #000 !important; }
  h1, h2, h3 { color: #000 !important; }
}