.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-d34ec0f:#1C1E20;--e-global-color-3a395b1:#75B7E4;--e-global-color-188e7c2:#848688;--e-global-color-1c80bac:#FFFFFF;--e-global-color-7afe730:#ebf3fb;--e-global-color-596dc27:#0098FF;--e-global-color-ee15cd1:#002352;--e-global-typography-primary-font-family:"Sora";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Sora";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Sora";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Sora";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}.site-header{padding-right:0px;padding-left:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ══════════════════════════════════════════════════════════════════════
   AQUAMAGIC — LP FRANQUIA
   Direção: "Painel de controle" · Motivo: o porthole (escotilha)
   Fonte da verdade: docs/03-DESIGN-SYSTEM.md
   ══════════════════════════════════════════════════════════════════════
   ÍNDICE
   00 Tokens
   01 Reset
   02 Tipografia
   03 Layout (container, section, split)
   04 Utilitários de texto
   05 Botões
   06 Ícones
   07 Porthole
   09 Header
   10 Hero
   11 Métricas
   12 Réguas, listas, chips
   13 Placeholders de imagem
   14 Painel (dashboard mock)
   15 Grade de instrumentos
   16 Chat IA
   17 Investimento
   18 Formulários
   19 Footer
   20 Motion / reveals
   21 Responsivo
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 00 · TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Base — navy da marca */
  --navy-900: #00112F;
  --navy-800: #011C51;
  --navy-700: #052A73;
  --navy-600: #0C3C97;

  /* Ação */
  --aqua-500: #0098FF;
  --aqua-600: #007ACC;

  /* Acento */
  --sky-400: #2BA6DA;
  --sky-200: #BAE3F3;

  /* Claros */
  --mist-100: #E1F2F9;
  --mist-050: #F3FAFD;
  --paper: #FFFFFF;

  /* Texto */
  --ink-900: #0A1A33;
  --ink-600: #4A5A75;
  --ice-100: #EAF2FA;
  --ice-400: #8FA6C6;

  /* Sinal */
  --signal: #4FE0B8;

  /* Erro */
  --danger: #FF7A7A;

  /* Tipografia — família única: Sora (variável, 100–800).
     Os três tokens continuam separados de propósito: eles descrevem PAPÉIS,
     não famílias. Trocar a fonte de um papel no futuro é mexer numa linha.
     Sem a Archivo, a largura industrial some; quem sustenta a hierarquia
     agora é peso + tracking. Sem a IBM Plex Mono, os rótulos perdem a textura
     de instrumento; compensado com tracking mais aberto em .eyebrow/.label. */
  --f-display: "Sora", system-ui, sans-serif;
  --f-body: "Sora", system-ui, sans-serif;
  --f-mono: "Sora", system-ui, sans-serif;

  /* Escala tipográfica em duas camadas.

     `--fs-*-base` é o valor de fábrica. `--fs-scale` multiplica a escala
     inteira. Os dois herdam, então dá para ajustar o site todo, uma seção ou
     um widget só — sem tocar em CSS de novo:

       Configurações do site → CSS personalizado
         :root { --fs-scale: 1.1; }        …tudo 10% maior
         :root { --fs-h2-base: 2.5rem; }   …só o H2, no site inteiro

       Seção / Container → Avançado → CSS personalizado (Elementor Pro)
         .elementor-kit-5 { --fs-scale: .9; }      …só aquela seção

     Serve principalmente para o texto que mora dentro dos widgets HTML, que
     não têm painel de Tipografia. Nos widgets nativos (Título, Texto, Botão,
     Contador) use direto Estilo → Tipografia, que vence isto aqui. */
  --fs-scale: 1;

  --fs-display-base: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  --fs-h2-base: clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);
  --fs-h3-base: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-h4-base: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-lead-base: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --fs-body-base: 1.0625rem;
  --fs-small-base: .9375rem;
  --fs-mono-base: .8125rem;
  --fs-metric-base: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);

  /* Espaço */
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 9vw, 9rem);

  /* Raios */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Gradientes */
  --grad-hero: radial-gradient(120% 100% at 78% 12%, #052A73 0%, #011C51 45%, #00112F 100%);
  --grad-glass: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));

  /* Sombra */
  --sh-card: 0 1px 2px rgba(1,28,81,.04), 0 12px 32px rgba(1,28,81,.06);
  --sh-cta: 0 10px 30px rgba(0,152,255,.28);

  /* Transição */
  --ease: cubic-bezier(.2,.7,.3,1);
  --t: 180ms var(--ease);
}

/* Os tokens finais são derivados em CADA elemento, não no `:root`.
   Motivo: `var()` dentro de uma custom property é resolvido no elemento onde
   a propriedade é DECLARADA. Se `--fs-h2` fosse calculado no `:root`, ele
   desceria já resolvido e mudar `--fs-scale` numa seção não teria efeito
   nenhum. Declarando no universal, cada elemento recalcula com o `--fs-scale`
   e o `--fs-*-base` que herdou — e o override passa a funcionar em qualquer
   nível da árvore. */
*, *::before, *::after {
  --fs-display: calc(var(--fs-scale) * var(--fs-display-base));
  --fs-h2: calc(var(--fs-scale) * var(--fs-h2-base));
  --fs-h3: calc(var(--fs-scale) * var(--fs-h3-base));
  --fs-h4: calc(var(--fs-scale) * var(--fs-h4-base));
  --fs-lead: calc(var(--fs-scale) * var(--fs-lead-base));
  --fs-body: calc(var(--fs-scale) * var(--fs-body-base));
  --fs-small: calc(var(--fs-scale) * var(--fs-small-base));
  --fs-mono: calc(var(--fs-scale) * var(--fs-mono-base));
  --fs-metric: calc(var(--fs-scale) * var(--fs-metric-base));
}

/* ─── 01 · RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  overflow-x: clip; /* os porthole XL sangram de propósito — clipa sem criar scroll */
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* NÃO usar overflow-x aqui: body como scroll container quebra o
     position:sticky da seção 04. A contenção fica no <html> com clip. */
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── 02 · TIPOGRAFIA ─────────────────────────────────────────────── */
/* Toda declaração de TIPOGRAFIA (família, tamanho, peso, tracking, leading,
   caixa) mora dentro de `:where()` → especificidade 0,0,0. Quem escreve pelo
   painel do Elementor (Estilo → Tipografia) gera
   `.elementor-{pagina} .elementor-element.elementor-element-{id} …`
   (0,3,0) e vence sempre, sem precisar de `!important`.
   O que NÃO é tipografia (largura de medida, margens, text-wrap) fica fora
   do `:where()`, porque o painel não mexe nisso e o design depende. */
:where(h1, h2) {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
}
h1, h2 { text-wrap: balance; }
:where(h1) { font-size: var(--fs-display); line-height: .98; }
:where(h2) { font-size: var(--fs-h2); letter-spacing: -.025em; line-height: 1.04; }

:where(h3) {
  font-family: var(--f-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

/* Sem trava de medida no parágrafo: o texto ocupa toda a largura do container
   e quem decide o limite é o painel (Container → Layout → Largura, ou
   Avançado → Largura do widget). Havia `max-width: 68ch` aqui e `62ch` no
   `.lead`; no Elementor isso aparecia como texto estreito no meio de uma
   seção larga, sem nenhum controle no painel que explicasse o porquê. */
p + p { margin-top: var(--space-sm); }

:where(.lead) { font-size: var(--fs-lead); line-height: 1.55; }
h2 + .lead, h2 + p { margin-top: var(--space-md); }
.eyebrow + h1, .eyebrow + h2 { margin-top: var(--space-sm); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sky-400);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-600);
}

.footnote {
  margin-top: var(--space-sm);
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--ink-600);
  opacity: .75;
}
.footnote code { font-size: inherit; }

/* ─── 03 · LAYOUT ─────────────────────────────────────────────────── */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container + .container { margin-top: var(--space-2xl); }

.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}
.section--tall { padding-block: calc(var(--section-y) * 1.4); }

.section--paper { background: var(--paper); }
.section--mist { background: var(--mist-050); }
.section--mist-100 { background: var(--mist-100); }
.section--navy { background: var(--navy-900); }
.section--navy-800 { background: var(--navy-800); }

/* texto sobre fundo escuro */
.section--navy, .section--navy-800, .hero { color: var(--ice-100); }
.section--navy .label,
.section--navy-800 .label,
.hero .label { color: var(--ice-400); }
.section--navy p:not(.lead):not(.footnote),
.section--navy-800 p:not(.lead):not(.footnote) { color: var(--ice-400); }
.footnote--light { color: var(--ice-400); }

.split { display: grid; gap: var(--space-xl) var(--space-lg); align-items: center; }
.split--top { align-items: start; }
.split--5-7 { grid-template-columns: 42% 1fr; }
.split--7-5 { grid-template-columns: 1fr 38%; }
.split--6-6 { grid-template-columns: 1fr 1fr; }

.measure { max-width: 46rem; }
.measure-lg { max-width: 58rem; }

/* A coluna estica para ocupar a altura da linha do grid (senão não há curso
   para o sticky percorrer); quem gruda é o filho, não a coluna. */
.sticky-col { align-self: stretch; }
/* especificidade (0,2,0) de propósito: `.ph` também declara position e é
   definida mais abaixo — com (0,1,0) aqui, ela venceria e o sticky morria. */
.sticky-col > .ph { position: sticky; top: 110px; }

.rule { height: 1px; border: 0; background: rgba(1,28,81,.10); margin-block: var(--space-md); }
.rule--light { background: rgba(255,255,255,.14); }

/* ─── 04 · UTILITÁRIOS DE TEXTO ───────────────────────────────────── */
/* Sem dependência da classe da seção: `opacity` produz o mesmo recuo óptico
   sobre claro e sobre escuro. Antes isto era `.section--navy .t-dim {...}`, que
   morria quando o Elementor descartava a classe com hífen duplo do ancestral.
   Agora a cor vem do próprio título (painel do Elementor / `h2` no protótipo)
   e estes utilitários só modulam peso e intensidade. */
.t-dim, .t-strong { display: block; color: inherit; }
.t-dim { font-weight: 400; opacity: .6; }
.t-strong { font-weight: 800; opacity: 1; }

.display-xl { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); }

.rule-block {
  margin-block: var(--space-xl);
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.contrast-line {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: none;
}
.contrast-line--dim { font-weight: 400; color: var(--ice-400); }
.contrast-line--strong { font-weight: 800; color: #fff; }

.lead--signal { color: var(--signal); font-weight: 500; }
.section--navy .lead--signal { color: var(--signal); }

.quote-bar {
  margin-top: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 2px solid var(--signal);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
}
.quote-bar--dark { color: var(--ink-900); }

.closing {
  margin-top: var(--space-lg);
  font-size: var(--fs-lead);
  color: var(--ink-600);
}
.closing strong { display: block; font-weight: 700; color: var(--ink-900); }

.cadence {
  margin-block: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.14);
}
.cadence li {
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ice-100);
}

/* ─── 05 · BOTÕES ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  height: 54px;
  padding-inline: 2rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t), border-color var(--t), color var(--t);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--aqua-500); color: #fff; }
.btn--primary:hover { background: var(--aqua-600); box-shadow: var(--sh-cta); }

.btn--ghost {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--aqua-500);
  font-weight: 600;
}
.btn--ghost:hover { transform: none; color: var(--aqua-600); }
.btn--ghost .icon { transition: transform var(--t); }
.btn--ghost:hover .icon { transform: translateX(4px); }

.btn--sm { height: 44px; padding-inline: 1.25rem; font-size: .9375rem; }
.btn--lg { height: 60px; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

.btn .icon { transition: transform var(--t); }
.btn--primary:hover .icon { transform: translateX(3px); }

/* ─── 06 · ÍCONES ─────────────────────────────────────────────────── */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--28 { width: 28px; height: 28px; }
.icon--32 { width: 32px; height: 32px; }

/* ─── 07 · PORTHOLE ───────────────────────────────────────────────── */
.porthole {
  border-radius: 50%;
  border: 1px solid rgba(43,166,218,.28);
  box-shadow: inset 0 0 0 12px rgba(43,166,218,.05);
}
.porthole--xl {
  position: absolute;
  z-index: -1;
  width: clamp(420px, 52vw, 860px);
  aspect-ratio: 1;
  opacity: .5;
  pointer-events: none;
}
.porthole--bl { left: -14%; bottom: -32%; }
.porthole--center {
  left: 50%; top: 50%;
  translate: -50% -50%;
  opacity: .35;
}
.porthole--m {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--sky-400);
  background: rgba(43,166,218,.06);
}

/* ─── 09 · HEADER ─────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1rem;
  transition: background-color var(--t), padding var(--t), backdrop-filter var(--t);
}
.site-header.is-stuck {
  padding-block: .5rem;
  background: rgba(0,17,47,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.header__logo img { height: 32px; width: auto; }
.header__nav {
  display: flex;
  gap: var(--space-md);
  margin-left: auto;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ice-400);
}
.header__nav a { transition: color var(--t); }
.header__nav a:hover { color: #fff; }

/* ─── 10 · HERO ───────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(8rem, 12vw, 11rem);
  padding-bottom: var(--section-y);
  background: var(--grad-hero);
  overflow: hidden;
}
.hero__porthole { right: -18%; top: -14%; }

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-xl);
  align-items: start;
}
.hero__title { margin-bottom: var(--space-lg); }
.hero__title span { display: block; color: var(--ice-100); }
.hero__title-accent { color: #fff; }

.hero .lead { color: var(--ice-100); opacity: .88; }
.hero .lead + .lead { margin-top: var(--space-sm); }
.hero .btn { margin-top: var(--space-lg); }

.hero__proof {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  flex-wrap: wrap;
}
.proof-list {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.proof-list__item {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .02em;
  color: var(--ice-100);
  opacity: .62;
}

/* ─── 11 · MÉTRICAS ───────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(1,28,81,.10);
  border-bottom: 1px solid rgba(1,28,81,.10);
}
.metric {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
  border-left: 1px solid rgba(1,28,81,.10);
  padding-left: var(--space-md);
}
.metric:first-child { border-left: 0; padding-left: 0; }

.metric__value {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-metric);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--navy-800);
  margin-bottom: var(--space-xs);
}
.metric__value--sm { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.metric__icon { display: block; color: var(--sky-400); margin-bottom: var(--space-sm); }

.metrics--sm { grid-template-columns: repeat(3, 1fr); margin-top: var(--space-2xl); }

/* ─── 12 · RÉGUAS, LISTAS, CHIPS ──────────────────────────────────── */
.ruled-list {
  margin-block: var(--space-lg);
  border-top: 1px solid rgba(1,28,81,.10);
}
.ruled-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid rgba(1,28,81,.10);
  font-size: var(--fs-lead);
  line-height: 1.35;
  transition: padding-left var(--t), color var(--t);
}
.ruled-list__item .icon { color: var(--sky-400); }
.ruled-list__item:hover { padding-left: var(--space-2xs); }
.ruled-list--tight .ruled-list__item { padding-block: var(--space-sm); font-size: var(--fs-body); }

.section--navy .ruled-list,
.section--navy-800 .ruled-list { border-top-color: rgba(255,255,255,.14); }
.section--navy .ruled-list__item,
.section--navy-800 .ruled-list__item { border-bottom-color: rgba(255,255,255,.14); color: #fff; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ice-100);
}
.chip .icon { color: var(--sky-400); }
.chip-list--dark .chip { border-color: rgba(1,28,81,.16); color: var(--ink-900); }

.negatives {
  margin-block: var(--space-lg);
  border-top: 1px solid rgba(1,28,81,.10);
}
.negatives li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgba(1,28,81,.10);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.negatives .icon { color: var(--sky-400); }

.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-xl);
}
.pillar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.125rem;
  border: 1px solid rgba(1,28,81,.14);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-900);
  transition: border-color var(--t), background-color var(--t);
}
.pillar .icon { color: var(--sky-400); }
.pillar:hover { border-color: var(--sky-400); background: var(--mist-050); }

/* ─── 13 · PLACEHOLDERS DE IMAGEM ─────────────────────────────────── */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px dashed rgba(43,166,218,.35);
  border-radius: var(--r-lg);
  background: var(--navy-800);
  color: var(--ice-400);
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 30% 20%, rgba(43,166,218,.16), transparent 70%);
  pointer-events: none;
}
.ph > .icon { color: var(--sky-400); opacity: .6; }
.ph figcaption {
  font-size: var(--fs-small);
  line-height: 1.45;
  position: relative;
  z-index: 1;
}
.ph__id, .ph__spec {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-400);
}
.ph__spec { margin-top: .375rem; opacity: .6; color: var(--ice-400); }
.ph__chip {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  padding: .3rem .625rem;
  border-radius: var(--r-pill);
  background: rgba(0,17,47,.7);
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
}
.ph--2-3 { aspect-ratio: 2/3; }
.ph--3-4 { aspect-ratio: 3/4; }
.ph--4-3 { aspect-ratio: 4/3; }
.ph--4-5 { aspect-ratio: 4/5; }
.ph--1-1 { aspect-ratio: 1/1; }

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.mosaic .ph { transition: transform var(--t); }
.mosaic .ph:hover { transform: translateY(-3px); }

.stagger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}
/* proporções calculadas para as duas colunas fecharem na mesma altura:
   esquerda 2:3  ==  (4:3 + gap + 4:3) da direita.
   O degrau vem do offset da coluna esquerda, não de alturas desiguais. */
.stagger__a { grid-row: span 2; margin-top: var(--space-lg); }

/* ─── 14 · PAINEL (DASHBOARD MOCK) ────────────────────────────────── */
.panel {
  padding: var(--space-lg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  background: var(--grad-glass);
  backdrop-filter: blur(14px);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.panel__live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}
.panel__live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,224,184,.45); }
  50% { opacity: .55; box-shadow: 0 0 0 6px rgba(79,224,184,0); }
}

.panel__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
}
.panel__big {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-top: .375rem;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .625rem;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
}
.delta--up { background: rgba(79,224,184,.12); color: var(--signal); }

.spark { width: 100%; height: 64px; margin-block: var(--space-md); }
.spark__line { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.panel__mid {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-top: .25rem;
}
.panel__block { padding-top: var(--space-md); }
.panel__block--last { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--space-md); }

.bar {
  display: grid;
  grid-template-columns: 96px 1fr 62px;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.bar__label { font-size: .8125rem; color: var(--ice-400); }
.bar__track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.bar__track i { display: block; height: 100%; border-radius: inherit; background: var(--signal); }
.bar--muted .bar__track i { background: var(--sky-400); opacity: .55; }
.bar__val {
  font-family: var(--f-mono);
  font-size: .75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ice-400);
}

.panel__action {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-top: .625rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ice-100);
}
.panel__action .icon { color: var(--signal); margin-top: 2px; }

/* forçar cor clara dentro do painel (sobrescreve regra genérica de seção escura) */
.section--navy .panel p { color: var(--ice-100); }
.section--navy .panel .panel__big,
.section--navy .panel .panel__mid { color: #fff; }

/* ─── 15 · GRADE DE INSTRUMENTOS ──────────────────────────────────── */
/* Sem traçados/bordas automáticos — estilização manual pelo Elementor */
.instrument-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 0 !important;
}
.instrument {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 0 !important;
  transition: background-color var(--t);
}
.instrument h3 { color: var(--ink-900); }
.instrument:hover { background: var(--mist-050); }
.instrument:hover .porthole--m { color: var(--aqua-500); border-color: rgba(0,152,255,.4); }
.instrument .porthole--m { transition: color var(--t), border-color var(--t); }

/* ─── 16 · CHAT IA ────────────────────────────────────────────────── */
.chat {
  border: 1px solid rgba(1,28,81,.10);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid rgba(1,28,81,.10);
}
.chat__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.chat__brand .icon { color: var(--sky-400); }
.badge {
  padding: .25rem .625rem;
  border-radius: var(--r-pill);
  background: rgba(79,224,184,.16);
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: #12876B;
}
.chat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--mist-050);
}
.bubble {
  max-width: 78%;
  padding: .75rem 1rem;
  font-size: var(--fs-small);
  line-height: 1.45;
}
.bubble--user {
  align-self: flex-end;
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  background: var(--mist-100);
  color: var(--ink-900);
}
.bubble--ai {
  align-self: flex-start;
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  background: var(--navy-800);
  color: var(--ice-100);
}
.chat__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid rgba(1,28,81,.10);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  color: var(--ink-600);
}
.chat__foot .icon { color: var(--signal); }

/* ─── 17 · INVESTIMENTO ───────────────────────────────────────────── */
.invest {
  padding: var(--space-lg);
  border: 1px solid rgba(1,28,81,.10);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-card);
}
.invest .rule,
.invest hr.rule,
.invest hr {
  height: 1px;
  border: 0;
  background: rgba(1,28,81,.10);
  margin-block: var(--space-lg);
}
.invest__value {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  margin-top: var(--space-2xs);
}
.invest__list {
  display: grid;
  gap: .75rem;
}
.invest__list li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--fs-body);
}
.invest__list .icon { color: var(--signal); }
.invest__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}
.invest__mid {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  margin-top: .25rem;
}
.invest .btn--ghost { margin-top: var(--space-lg); }

/* ─── 18 · FORMULÁRIOS ────────────────────────────────────────────── */
.form-card {
  position: relative;
  padding: var(--space-lg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  background: var(--grad-glass);
  backdrop-filter: blur(14px);
}
.form-card--lg { padding: clamp(1.5rem, 3vw, 2.5rem); }

.form-card__title {
  font-family: var(--f-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.form-card__sub {
  margin-top: .375rem;
  font-size: var(--fs-small);
  color: var(--ice-400);
}
.form-card__note {
  margin-top: var(--space-sm);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ice-400);
}

.field { margin-top: var(--space-md); }
.field label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ice-400);
}
.field input, .field select {
  width: 100%;
  height: 52px;
  padding-inline: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.5) 50%), linear-gradient(135deg, rgba(255,255,255,.5) 50%, transparent 50%); background-position: right 1.1rem center, right .85rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--navy-800); color: #fff; }
.field input::placeholder { color: rgba(234,242,250,.35); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--aqua-500);
  box-shadow: 0 0 0 3px rgba(0,152,255,.18);
}
.field input:focus-visible, .field select:focus-visible { outline: none; }

.field__error {
  display: none;
  margin-top: .375rem;
  font-size: .8125rem;
  color: var(--danger);
}
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }
.field.is-invalid .field__error { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.field-row .field { margin-top: var(--space-md); }

.form-card .btn { margin-top: var(--space-lg); }

.form-card__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: inherit;
  background: rgba(0,17,47,.94);
  text-align: center;
}
.form-card__success[hidden] { display: none; }
.form-card__success p { max-width: 32ch; }
.success-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(79,224,184,.4);
  background: rgba(79,224,184,.10);
  color: var(--signal);
}

/* ─── 19 · FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  padding-block: 0;
  background: transparent;
  color: var(--ice-400);
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.footer__brand img { height: 32px; width: auto; margin-bottom: var(--space-sm); }
.footer__brand p { font-size: var(--fs-small); }
.seal {
  display: block;
  margin-top: .375rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--ice-100);
}
.footer__social { display: flex; gap: var(--space-sm); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  transition: color var(--t), border-color var(--t);
}
.footer__social a:hover { color: #fff; border-color: var(--sky-400); }

.footer__legal { margin-top: var(--space-lg); }
.footer__legal p {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  max-width: none;
  font-size: .8125rem;
}
.footer__legal a:hover { color: #fff; }

/* ─── 20 · MOTION / REVEALS ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease) var(--d, 0ms), transform 500ms var(--ease) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

.ruled-list .reveal { transition-delay: calc(var(--i, 0) * 60ms); }

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

/* ─── 21 · RESPONSIVO ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hero__inner { grid-template-columns: 1fr 360px; }
}

@media (max-width: 1023px) {

  .split--5-7, .split--7-5, .split--6-6 { grid-template-columns: 1fr; }
  .split { gap: var(--space-xl); }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__form-wrap { max-width: 480px; }

  .sticky-col > .ph { position: relative; }

  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding-left: var(--space-md); border-left: 1px solid rgba(1,28,81,.10); }
  .metric:first-child, .metric:nth-child(3) { border-left: 0; padding-left: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { border-top: 1px solid rgba(1,28,81,.10); }

  .instrument-grid { grid-template-columns: repeat(2, 1fr); border: 0 !important; }
  .instrument-grid > * .instrument,
  .instrument-grid > .instrument {
    border: 0 !important;
  }
  .porthole--xl { opacity: .32; }
}

@media (max-width: 767px) {

  .header__nav { display: none; }
  .header__logo img { height: 26px; }
  .header__inner { justify-content: space-between; gap: var(--space-sm); }
  .btn--sm { padding-inline: 1rem; font-size: .875rem; }

  .hero { padding-top: 7.5rem; }
  .hero__form-wrap { max-width: none; }

  .metrics--sm { grid-template-columns: 1fr; }
  .metrics--sm .metric { border-left: 0; padding-left: 0; border-top: 1px solid rgba(1,28,81,.10); }
  .metrics--sm .metric:first-child { border-top: 0; }

  .stagger { grid-template-columns: 1fr; }
  .stagger__a { grid-row: auto; }
  .stagger__c { margin-top: 0; }

  .mosaic { grid-template-columns: 1fr; }

  .field-row { grid-template-columns: 1fr; gap: 0; }

  .bar { grid-template-columns: 80px 1fr 54px; }
  .panel, .form-card, .invest { padding: var(--space-md); }

  .footer__inner { flex-direction: column; gap: var(--space-md); }
  .footer__legal p { flex-direction: column; gap: .5rem; }
}

/* telas estreitas (360–480): nada pode empurrar a largura da página */
@media (max-width: 480px) {
  h1, h2, h3, p, li, span { overflow-wrap: break-word; }
  .instrument { padding: var(--space-md); border: 0 !important; }
  .instrument-grid { grid-template-columns: 1fr; border: 0 !important; }
  .instrument-grid > * .instrument,
  .instrument-grid > .instrument {
    border: 0 !important;
  }
  .metrics { grid-template-columns: 1fr; }
  .metrics .metric,
  .metrics .metric:first-child,
  .metrics .metric:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(1,28,81,.10);
  }
  .metrics .metric:first-child { border-top: 0; }
  .bar { grid-template-columns: 1fr auto; row-gap: .25rem; }
  .bar__track { grid-column: 1 / -1; }
  .bubble { max-width: 90%; }
  .btn { padding-inline: 1.25rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   PONTE ELEMENTOR
   ══════════════════════════════════════════════════════════════════════
   Tudo acima deste ponto é a folha de estilo da Etapa 1, sem alteração.
   Este bloco faz duas coisas, e só duas:

   1. Devolve ao Elementor o controle de `display` nos containers onde o
      protótipo usava CSS Grid mas o painel usa Flex (senão um cancela o
      outro — a armadilha de especificidade citada em docs/01 §3.2).
   2. Liga as classes do design system à marcação interna dos widgets
      nativos (`.elementor-heading-title`, `.elementor-field`, etc.),
      para que Heading / Text / Button / Counter / Form fiquem idênticos
      ao protótipo continuando editáveis pelo painel.

   Regra: nada de cor ou fonte nova aqui. Só reuso dos tokens do topo.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1 · ESTRUTURA ──────────────────────────────────────────────────── */

/* O Elementor decide o display destes containers, não o protótipo.
   Especificidade (0,2,0) de propósito, para vencer as classes acima. */
.e-con.split,
.e-con.hero__inner,
.e-con.header__inner,
.e-con.metric,
.e-con.sticky-col,
.e-con.form-card,
.e-con.measure,
.e-con.measure-lg {
  display: var(--display);
  grid-template-columns: none;
}

/* container "boxed" do Elementor: o miolo é .e-con-inner, não .container */
.e-con.section > .e-con-inner,
.e-con.site-header > .e-con-inner,
.e-con.site-footer > .e-con-inner {
  width: min(100%, var(--container));
  margin-inline: auto;
}

/* padding vertical das seções vem do design system, não do painel */
.e-con.section { padding-block: var(--section-y); }
.e-con.section--tall { padding-block: calc(var(--section-y) * 1.4); }
.e-con.hero {
  padding-top: clamp(8rem, 12vw, 11rem);
  padding-bottom: var(--section-y);
}
.e-con.site-header { padding-block: 1rem; }
.e-con.site-footer { padding-block: 0; background: transparent; }

/* Remove qualquer fundo azul, padding ou margem residual em footers e fim de página */
.site-footer,
.e-con.site-footer,
footer.site-footer,
#site-footer,
.elementor-location-footer,
#colophon,
.ast-footer-copyright-section,
footer {
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body, html, #page, .site, .site-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* o sprite de ícones e o bloco de scripts não ocupam espaço nem geram barra */
.e-con.u-sprite-holder,
.e-con.u-scripts,
.u-sprite-holder,
.u-scripts,
.elementor-element.u-sprite-holder,
.elementor-element.u-scripts {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
.u-sprite-holder .elementor-widget-container,
.u-scripts .elementor-widget-container {
  display: none !important;
  line-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* cartões da grade 3×3: o widget é o filho do grid, o card precisa esticar */
.instrument-grid > .elementor-widget,
.instrument-grid > .elementor-widget > .elementor-widget-container { height: 100%; }
.instrument { height: 100%; }

/* Remoção total de traçados na grade 3×3 e nos cards para edição manual no Elementor */
.elementor-element.e-con.instrument-grid,
.elementor-element.instrument-grid,
.e-con.instrument-grid,
.instrument-grid,
.instrument-grid *,
.instrument-grid .elementor-widget,
.instrument-grid .elementor-widget-container,
.instrument {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-color: transparent !important;
}

/* ─── 1b · FIOS QUE MORAM NO CONTAINER ───────────────────────────────────
   O `.e-con` do Elementor zera borda de container — `border-*-width: 0` e
   `border-style` vindos das variáveis do painel, tudo com especificidade
   (0,1,0), a mesma das classes do design system. Quem vence passa a depender
   da ordem em que o WordPress enfileira os arquivos, que eu não controlo.

   `.elementor-element.e-con.classe` dá (0,3,0): vence qualquer regra estática
   do Elementor, que não passa de (0,2,0), e continua perdendo para o CSS que
   o painel emite por elemento — então definir borda no painel ainda funciona
   e sobrescreve isto aqui.

   Os fios ficam em `rgba(1,28,81,.10)`, o mesmo do design system. */

/* faixa de métricas da seção 02: fios de cima e de baixo no container,
   divisórias verticais em cada célula, sem fio antes da primeira */
.elementor-element.e-con.metrics {
  border-top: 1px solid rgba(1,28,81,.10);
  border-bottom: 1px solid rgba(1,28,81,.10);
}
.elementor-element.e-con.metric {
  padding: var(--space-lg) var(--space-md);
  border-left: 1px solid rgba(1,28,81,.10);
}
.elementor-element.e-con.metric:first-child {
  padding-left: 0;
  border-left: 0;
}

/* os mesmos cortes do design system, replicados na especificidade nova:
   sem isto o layout base venceria os resets responsivos e as células
   quebradas para a linha de baixo ficariam sem o fio horizontal */
@media (max-width: 1023px) {
  .elementor-element.e-con.metric:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .elementor-element.e-con.metric:nth-child(3),
  .elementor-element.e-con.metric:nth-child(4) {
    border-top: 1px solid rgba(1,28,81,.10);
  }
}
@media (max-width: 480px) {
  .elementor-element.e-con.metric {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(1,28,81,.10);
  }
  .elementor-element.e-con.metric:first-child { border-top: 0; }
}

/* mosaico escalonado da seção 07 — as classes ficam no widget */
.stagger__a { grid-row: span 2; margin-top: var(--space-lg); }
.stagger__a .ph { height: 100%; }
@media (max-width: 767px) {
  .stagger__a { grid-row: auto; margin-top: 0; }
}

/* ─── 2 · TIPOGRAFIA DOS WIDGETS NATIVOS ─────────────────────────────── */
/*
   REGRA DA CASA: nenhuma declaração de tipografia sai daqui com
   especificidade. Família, tamanho, peso, tracking, leading e caixa vão
   dentro de `:where(...)` → 0,0,0. O painel do Elementor emite
   `.elementor-{pagina} .elementor-element.elementor-element-{id} .alvo`
   (0,3,0) e portanto vence qualquer valor abaixo, em qualquer breakpoint,
   sem `!important` e sem depender da ordem de carregamento dos arquivos.

   Consequência prática: os valores abaixo são só o PADRÃO de fábrica. Mexer
   em Estilo → Tipografia de um Heading / Texto / Botão / Contador funciona
   direto, inclusive nos tamanhos por dispositivo (desktop/tablet/mobile).

   Fora do `:where()` ficam layout (display, gap), cor e caixa do widget —
   coisas que ou o painel não toca, ou já são escritas por ele em build.py.
   Para o texto que mora dentro dos widgets HTML (que não têm painel de
   tipografia) o caminho é outro: sobrescrever os tokens `--fs-*` — ver §8. */

.u-eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--sky-400);
}
:where(.u-eyebrow) :where(.elementor-heading-title) {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}
.u-eyebrow .elementor-heading-title::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  flex: none;
}

:where(.u-h1-hero) :where(.elementor-heading-title) {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .98;
}
.u-h1-hero .t-accent { color: #fff; opacity: 1; }

:where(.u-h2) :where(.elementor-heading-title) {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.04;
}
/* vem depois do bloco acima de propósito: mesma especificidade (0), ganha
   pela ordem — e continua perdendo para o painel */
:where(.u-h2.display-xl) :where(.elementor-heading-title) {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
}
/* .t-dim / .t-strong já existem no design system e valem aqui sem ajuste */

/* ── Widget Texto: tipografia vai no WRAPPER, nunca no <p> ──────────────
   O painel do Texto (Estilo → Tipografia) escreve em `{{WRAPPER}}`, ou seja
   na div do widget — não em `{{WRAPPER}} p`. O <p> lá dentro só HERDA esse
   valor. Uma regra nossa mirando o <p> é uma declaração DIRETA no elemento,
   e valor direto sempre vence valor herdado, por mais alta que seja a
   especificidade de quem escreveu no ancestral. Resultado do jeito antigo:
   o tamanho pegava no editor (que troca o DOM no modo de edição inline) e
   voltava ao padrão no site publicado.

   Então: tamanho, peso e leading ficam no wrapper; no <p> só o que o painel
   não escreve (borda, padding, cor).

   Sem `max-width` aqui: o Texto ocupa toda a largura do container e o limite
   fica no painel (Avançado → Largura, ou a largura do próprio container). */

:where(.u-lead) {
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.u-lead-signal .elementor-widget-container > p { color: var(--signal); }
:where(.u-lead-signal) { font-weight: 500; }

.u-quote-bar .elementor-widget-container > p {
  padding-left: var(--space-md);
  border-left: 2px solid var(--signal);
  color: #fff;
}
:where(.u-quote-bar) {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
}

/* Fecha o caminho de volta: nenhum <p> de widget Texto pode carregar
   tipografia própria, senão a herança do wrapper — e o painel junto com ela —
   é ignorada de novo. Aqui a especificidade é de propósito (0,2,0): o alvo
   não é o painel, que escreve no wrapper, é um `p { font-size: … }` de tema,
   que teria (0,0,1) e passaria por cima de um `:where()`. `inherit` devolve
   a decisão para o wrapper em qualquer cenário. */
.elementor-widget-text-editor .elementor-widget-container p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
}
.u-quote-bar-dark .elementor-widget-container > p { color: var(--ink-900); }

/* Cor de texto NÃO mora mais aqui: cada Heading / Text Editor / Counter
   carrega a sua no painel (ver `apply_text_colors()` em build.py). Regra de
   CSS empatava com o tema e com o próprio Elementor, e quem vencia dependia
   da ordem de carregamento dos arquivos. O que sobra abaixo é só forma:
   os utilitários `.t-dim` / `.t-strong` modulam peso e opacidade sobre a cor
   herdada do título, então funcionam igual sobre claro e sobre escuro. */
.u-h1-hero .elementor-heading-title,
.u-h2 .elementor-heading-title { color: inherit; }
.u-h1-hero .elementor-heading-title { color: var(--ice-100); }

/* ─── 2b · LISTA DE ÍCONES SOBRE FUNDO ESCURO ────────────────────────────
   Widget Lista de ícones adicionado direto no painel ou via HTML: cor branca
   sobre as seções navy/dark e no widget de ícones. */
.section--navy .elementor-icon-list-text,
.section--navy .elementor-icon-list-item,
.section--navy .elementor-icon-list-item > a,
.section--navy-800 .elementor-icon-list-text,
.section--navy-800 .elementor-icon-list-item,
.section--navy-800 .elementor-icon-list-item > a,
.is-navy .elementor-icon-list-text,
.is-navy .elementor-icon-list-item,
.is-navy .elementor-icon-list-item > a,
.is-navy800 .elementor-icon-list-text,
.is-navy800 .elementor-icon-list-item,
.is-navy800 .elementor-icon-list-item > a,
#s08-marketing .elementor-icon-list-text,
#s08-marketing .elementor-icon-list-item,
#s08-marketing .elementor-icon-list-item > a,
#s08-marketing .ruled-list__item,
.elementor-element.section--navy .elementor-icon-list-text,
.elementor-element.section--navy-800 .elementor-icon-list-text,
.elementor-element.is-navy .elementor-icon-list-text,
.elementor-element.is-navy800 .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-widget-icon-list .elementor-icon-list-item > a {
  color: #fff !important;
}
/* sobre seções claras, preserva a cor escura */
.section--mist .elementor-icon-list-text,
.section--mist .elementor-icon-list-item,
.section--paper .elementor-icon-list-text,
.section--paper .elementor-icon-list-item,
.is-mist .elementor-icon-list-text,
.is-mist .elementor-icon-list-item,
.is-paper .elementor-icon-list-text,
.is-paper .elementor-icon-list-item {
  color: var(--ink-900) !important;
}
/* o ícone segue no azul de ação, que é o contraste do design sobre navy */
.section--navy .elementor-icon-list-icon svg,
.section--navy-800 .elementor-icon-list-icon svg,
.is-navy .elementor-icon-list-icon svg,
.is-navy800 .elementor-icon-list-icon svg,
#s08-marketing .elementor-icon-list-icon svg {
  fill: var(--sky-400);
}

/* ─── 3 · BOTÕES ─────────────────────────────────────────────────────── */

.u-btn-primary .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  height: 54px;
  padding: 0 2rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--aqua-500);
  color: #fff;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
:where(.u-btn-primary) :where(.elementor-button) {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
}
.u-btn-primary .elementor-button:hover {
  transform: translateY(-2px);
  background: var(--aqua-600);
  box-shadow: var(--sh-cta);
}
.u-btn-primary .elementor-button-icon { transition: transform var(--t); }
.u-btn-primary .elementor-button:hover .elementor-button-icon {
  transform: translateX(3px);
}
.u-btn-sm .elementor-button { height: 44px; padding: 0 1.25rem; }
:where(.u-btn-sm) :where(.elementor-button) { font-size: .9375rem; }

.u-btn-ghost .elementor-button {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--aqua-500);
  gap: .5rem;
}
:where(.u-btn-ghost) :where(.elementor-button) { font-weight: 600; }
.u-btn-ghost .elementor-button:hover { background: none; color: var(--aqua-600); }
.u-btn-ghost .elementor-button:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* ─── 4 · CONTADORES (seção 02) ──────────────────────────────────────── */

.metric .elementor-counter-number-wrapper {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--navy-800);
}
:where(.metric) :where(.elementor-counter-number-wrapper) {
  font-family: var(--f-display);
  font-size: var(--fs-metric);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
}
.metric .elementor-counter-title {
  margin-top: var(--space-xs);
  text-align: left;
  color: var(--ink-600);
}
:where(.metric) :where(.elementor-counter-title) {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ─── 5 · FORMULÁRIOS (Elementor Pro) ────────────────────────────────── */

/* Card de investimento no Elementor */
.invest .rule,
.invest hr.rule,
.invest hr {
  margin-block: var(--space-lg) !important;
  margin-top: var(--space-lg) !important;
  margin-bottom: var(--space-lg) !important;
}
.invest__list {
  gap: .75rem !important;
  margin-bottom: var(--space-xs);
}
.invest__foot {
  margin-top: var(--space-xs);
}

.u-form .elementor-form { display: block; }
.u-form .elementor-field-group { margin-bottom: var(--space-md); padding: 0; }
.u-form .elementor-field-group > .elementor-field-label {
  display: block;
  margin-bottom: .5rem;
  color: var(--ice-400);
}
:where(.u-form) :where(.elementor-field-group) > :where(.elementor-field-label) {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.u-form .elementor-field-textual,
.u-form select.elementor-field-textual {
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding-inline: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  color: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
:where(.u-form) :where(.elementor-field-textual, select.elementor-field-textual) {
  font-family: var(--f-body);
  font-size: 1rem;
}
.u-form .elementor-field-textual::placeholder { color: rgba(234,242,250,.35); }
.u-form .elementor-field-textual:focus {
  outline: none;
  border-color: var(--aqua-500);
  box-shadow: 0 0 0 3px rgba(0,152,255,.18);
}
.u-form select.elementor-field-textual option { background: var(--navy-800); color: #fff; }

.u-form .elementor-field-type-submit { margin-top: var(--space-2xs); }
.u-form .elementor-button[type="submit"] {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--aqua-500);
  color: #fff;
  transition: transform var(--t), background-color var(--t), box-shadow var(--t);
}
:where(.u-form) :where(.elementor-button[type="submit"]) {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
}
.u-form .elementor-button[type="submit"]:hover {
  transform: translateY(-2px);
  background: var(--aqua-600);
  box-shadow: var(--sh-cta);
}
.u-form-lg .elementor-button[type="submit"] { height: 60px; }
:where(.u-form-lg) :where(.elementor-button[type="submit"]) { font-size: 1.0625rem; }

.u-form .elementor-message { margin-top: var(--space-sm); }
:where(.u-form) :where(.elementor-message) {
  font-family: var(--f-body);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.u-form .elementor-message-success { color: var(--signal); }
.u-form .elementor-message-danger { color: var(--danger); }
.u-form .elementor-field-group .elementor-field-subgroup + .elementor-message,
.u-form .elementor-error .elementor-field-textual { border-color: var(--danger); }

/* ─── 6 · FOTOS REAIS NO LUGAR DOS PLACEHOLDERS ─────────────────────── */
/* Widget Imagem com a classe `ph-img` herda o enquadramento do placeholder. */
.ph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}
.stagger .ph-img,
.stagger .ph-img .elementor-widget-container,
.mosaic .ph-img,
.mosaic .ph-img .elementor-widget-container { height: 100%; }

/* ─── 7 · RESPONSIVO DA PONTE ────────────────────────────────────────── */

@media (max-width: 1023px) {
  .e-con.split,
  .e-con.hero__inner { --width: 100%; }
  .e-con.split > .e-con,
  .e-con.hero__inner > .e-con { width: 100%; }
}

@media (max-width: 767px) {
  .u-form .elementor-field-group { margin-bottom: var(--space-sm); }
  .e-con.section > .e-con-inner { padding-inline: var(--gutter); }
}


/* ─── GRADIENTE DO HERO ──────────────────────────────────────────────────
   O fundo do hero agora é cor sólida no painel (para vencer o tema). O brilho
   radial do design volta como camada, atrás do conteúdo e do porthole. */
.e-con.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--grad-hero);
  pointer-events: none;
}

/* ─── APELIDOS SEM HÍFEN DUPLO — GERADO POR build.py ───────────
   O Elementor descarta classes com `--` no campo CSS Classes.
   Cada regra abaixo é a mesma de cima, com a classe apelidada.
   Não editar à mão: rode `python3 elementor/build.py`.
   ──────────────────────────────────────────────────────── */
.is-tall { padding-block: calc(var(--section-y) * 1.4); }
.is-paper { background: var(--paper); }
.is-mist { background: var(--mist-050); }
.is-mist100 { background: var(--mist-100); }
.is-navy { background: var(--navy-900); }
.is-navy800 { background: var(--navy-800); }
/* texto sobre fundo escuro */
.is-navy, .is-navy800, .hero { color: var(--ice-100); }
.is-navy .label,
.is-navy800 .label,
.hero .label { color: var(--ice-400); }
.is-navy p:not(.lead):not(.footnote),
.is-navy800 p:not(.lead):not(.footnote) { color: var(--ice-400); }
/* ─── 04 · UTILITÁRIOS DE TEXTO ───────────────────────────────────── */
/* Sem dependência da classe da seção: `opacity` produz o mesmo recuo óptico
   sobre claro e sobre escuro. Antes isto era `.is-navy .t-dim {...}
.is-navy .lead--signal { color: var(--signal); }
.is-navy .ruled-list,
.is-navy800 .ruled-list { border-top-color: rgba(255,255,255,.14); }
.is-navy .ruled-list__item,
.is-navy800 .ruled-list__item { border-bottom-color: rgba(255,255,255,.14); color: #fff; }
/* forçar cor clara dentro do painel (sobrescreve regra genérica de seção escura) */
.is-navy .panel p { color: var(--ice-100); }
.is-navy .panel .panel__big,
.is-navy .panel .panel__mid { color: #fff; }
.form-card-lg { padding: clamp(1.5rem, 3vw, 2.5rem); }
.e-con.is-tall { padding-block: calc(var(--section-y) * 1.4); }
/* ─── 2b · LISTA DE ÍCONES SOBRE FUNDO ESCURO ────────────────────────────
   Widget Lista de ícones adicionado direto no painel ou via HTML: cor branca
   sobre as seções navy/dark e no widget de ícones. */
.is-navy .elementor-icon-list-text,
.is-navy .elementor-icon-list-item,
.is-navy .elementor-icon-list-item > a,
.is-navy800 .elementor-icon-list-text,
.is-navy800 .elementor-icon-list-item,
.is-navy800 .elementor-icon-list-item > a,
.is-navy .elementor-icon-list-text,
.is-navy .elementor-icon-list-item,
.is-navy .elementor-icon-list-item > a,
.is-navy800 .elementor-icon-list-text,
.is-navy800 .elementor-icon-list-item,
.is-navy800 .elementor-icon-list-item > a,
#s08-marketing .elementor-icon-list-text,
#s08-marketing .elementor-icon-list-item,
#s08-marketing .elementor-icon-list-item > a,
#s08-marketing .ruled-list__item,
.elementor-element.is-navy .elementor-icon-list-text,
.elementor-element.is-navy800 .elementor-icon-list-text,
.elementor-element.is-navy .elementor-icon-list-text,
.elementor-element.is-navy800 .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-widget-icon-list .elementor-icon-list-item > a {
  color: #fff !important;
}
/* sobre seções claras, preserva a cor escura */
.is-mist .elementor-icon-list-text,
.is-mist .elementor-icon-list-item,
.is-paper .elementor-icon-list-text,
.is-paper .elementor-icon-list-item,
.is-mist .elementor-icon-list-text,
.is-mist .elementor-icon-list-item,
.is-paper .elementor-icon-list-text,
.is-paper .elementor-icon-list-item {
  color: var(--ink-900) !important;
}
/* o ícone segue no azul de ação, que é o contraste do design sobre navy */
.is-navy .elementor-icon-list-icon svg,
.is-navy800 .elementor-icon-list-icon svg,
.is-navy .elementor-icon-list-icon svg,
.is-navy800 .elementor-icon-list-icon svg,
#s08-marketing .elementor-icon-list-icon svg {
  fill: var(--sky-400);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Light.eot');
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Light.eot?#iefix') format('embedded-opentype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Light.woff2') format('woff2'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Light.woff') format('woff'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Light.ttf') format('truetype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Light.svg#Sora') format('svg');
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Regular.eot');
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Regular.eot?#iefix') format('embedded-opentype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Regular.woff2') format('woff2'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Regular.woff') format('woff'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Regular.ttf') format('truetype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Regular.svg#Sora') format('svg');
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Medium.eot');
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Medium.eot?#iefix') format('embedded-opentype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Medium.woff2') format('woff2'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Medium.woff') format('woff'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Medium.ttf') format('truetype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-Medium.svg#Sora') format('svg');
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-SemiBold.eot');
	src: url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-SemiBold.eot?#iefix') format('embedded-opentype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-SemiBold.woff2') format('woff2'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-SemiBold.woff') format('woff'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-SemiBold.ttf') format('truetype'),
		url('https://franquiaaquamagic.com.br/wp-content/uploads/2022/11/Sora-SemiBold.svg#Sora') format('svg');
}
/* End Custom Fonts CSS */