/* ══════════════════════════════════════════════════════════════════════════
   LP QUEM A IA INDICA — BRIIN Marketing
   Engine base (cópia de lp-douglas/assets/lp.css): tokens + motion + componentes.
   Folha de estilo completa — dark-first, editorial, nível Apple/Stripe/Linear.
   Fidelidade visual: wp-content/themes/briin-theme/src/css/main.css
   CSS puro (sem diretivas Tailwind). Tailwind Play CDN cuida das utilities;
   este arquivo cobre tokens, atmosfera, motion e componentes custom.
   NÃO EDITAR fora da fundação — cada seção usa assets/css/NN-nome.css.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. TOKENS — :root
   Cores, gradientes, sombras, easings e escala de z-index da marca BRIIN.
   Espelha 1:1 os valores de main.css para garantir paridade com o site real.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* — Cores primárias — */
  --deep-black: #1A1A1A;
  --dark-teal: #033A40;
  --dark-teal-deep: #02262A;
  --strategy: #035959;
  --brand: #027368;
  --accent: #018A80;
  --turquoise: #40E8D0;
  --gold: #B8956A;
  --gold-light: #D4B896;
  --off-white: #F2F4F3;

  /* — Neutros — */
  --charcoal: #2C2C2C;
  --gray-600: #4A4A4A;
  --gray-400: #8A8A8A;
  --gray-200: #E2E4E3;
  --gray-100: #F0F2F1;
  --white: #FFFFFF;
  --teal-pale: #E0F4F2;
  --teal-border: #A8D8D2;

  /* — Semânticas — */
  --error: #C44040;
  --warning: #B8956A;
  --success: #018A80;

  /* — Gradientes padrão da marca — */
  --gradient-spectrum: linear-gradient(90deg, #1A1A1A, #033A40, #035959, #027368, #018A80, #40E8D0);
  --gradient-teal-flow: linear-gradient(145deg, #033A40, #018A80);
  --gradient-turquoise-glow: linear-gradient(145deg, #027368, #40E8D0);
  --gradient-gold: linear-gradient(145deg, #B8956A, #D4B896);
  --gradient-dark-depth: linear-gradient(145deg, #1A1A1A, #033A40);

  /* — Sombras — */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.07);
  --shadow-card-hover: 0 8px 30px rgba(1, 138, 128, 0.08);
  --shadow-hero: 0 16px 50px rgba(3, 58, 64, 0.14);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-glow-turquoise: 0 0 80px rgba(64, 232, 208, 0.12);

  /* — Tipografia — */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-script: 'JadynMaria', cursive;

  /* — Easings — */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* — Escala de z-index (contrato §4) — */
  --z-content: 10;
  --z-sticky-cta: 20;
  --z-nav: 30;
  --z-mobile-menu: 50;
  --z-progress: 60;
  --z-cursor-outline: 9998;
  --z-cursor-dot: 9999;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. @FONT-FACE — JadynMaria
   Fonte script usada nas taglines e assinaturas ("Eu construo a narrativa...").
   Caminho relativo: assets/ está 3 níveis abaixo da raiz do projeto.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'JadynMaria';
  src: url('../wp-content/themes/briin-theme/assets/fonts/JadynMaria.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ══════════════════════════════════════════════════════════════════════════
   2b. PATCH — glifo "ê" minúsculo da Cormorant Garamond
   O circunflexo minúsculo da Cormorant é desenhado alto e destacado da letra
   (é traço da fonte, igual no OTF original e na versão do Google Fonts), e
   lido como "acento solto" em títulos grandes. Trocamos só o code point
   U+00EA pela EB Garamond (mesma família tipográfica, peso e contraste
   próximos), vendorizada em assets/fonts/. Georgia ficou de fora: mais
   pesada e larga, destoava do resto da palavra. */
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-600-normal.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/eb-garamond-latin-500-italic.woff2') format('woff2'); unicode-range: U+00EA; font-weight: 600; font-style: italic; font-display: swap; }


/* ══════════════════════════════════════════════════════════════════════════
   3. BASE — reset leve, tipografia base, seleção, scrollbar
   ══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* fallback p/ browsers sem suporte a clip */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--deep-black);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden; /* fallback p/ browsers sem suporte a clip */
  overflow-x: clip;
  cursor: default;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Reforço geral anti-overflow horizontal (orbs, mockups, mídia solta) */
img,
svg,
video {
  max-width: 100%;
}

/* O hero tem orbs blur(130px) que estouram a largura da viewport (raiz dos
   16px de overflow horizontal em 375px) — precisa cortar de fato, não só
   confiar no overflow-x do body. */
[data-hero] {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Utilitários de tipografia (espelham a config Tailwind inline do index.html,
   mantidos aqui como fallback caso alguma classe não resolva via CDN) */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-script { font-family: var(--font-script); }

/* Oculta visualmente mantendo acessível a leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* [hidden] sempre vence exibição inline — usado pelo lp.js em vez de display */
[hidden] {
  display: none !important;
}

/* — Seleção de texto — */
::selection {
  background: var(--turquoise);
  color: var(--dark-teal);
}

/* — Scrollbar custom (Webkit) — */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--deep-black);
}
::-webkit-scrollbar-thumb {
  background: var(--strategy);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* — Scrollbar custom (Firefox) — */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--strategy) var(--deep-black);
}

/* — Lenis smooth scroll (compatibilidade) — */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. ATMOSFERA — texturas, orbs, glows e divisores
   ══════════════════════════════════════════════════════════════════════════ */

/* — Ruído sutil sobre fundos escuros (dá profundidade sem pesar) — */
.noise-overlay {
  position: relative;
}
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}

/* — Grid de fundo sutil (linhas turquoise a 3% de opacidade) — */
.grid-bg {
  background-image:
    linear-gradient(rgba(64, 232, 208, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 232, 208, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* — Orbs ambiente desfocados (hero e seções escuras) —
   `opacity` fica livre para o inline style de cada orb (controla a intensidade
   individual no HTML); aqui só escurecemos a atmosfera via `filter`
   (brightness/saturate), que o inline style não usa — sem conflito. */
.hero-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(130px) saturate(0.85) brightness(0.8);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
  transform: scale(1);
  transition: transform 600ms var(--ease-out-expo);
}

/* — Halo radial turquoise, usado atrás de retratos e cards de destaque —
   Intensidade reduzida (opacidade pico 0.25) + blur maior p/ dissolver bem
   antes da borda: evita o efeito "verde-claro lavado" sobre o dark-teal. */
.glow-teal {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(64, 232, 208, 0.25) 0%, rgba(64, 232, 208, 0) 65%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* — Vinheta escura de atmosfera do hero — funde .hero-orb/.glow-teal com o
   dark-teal real da marca. Aplicar como camada absolute inset-0 por cima dos
   orbs e abaixo do conteúdo (z-index baixo, mas acima dos glows). O HTML
   controla a opacidade final via classe utilitária de opacity se necessário. */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(3, 58, 64, 0) 0%, rgba(3, 58, 64, 0.55) 60%, rgba(3, 58, 64, 0.85) 100%);
}

/* — Vinheta: funde a foto do hero com o fundo dark-teal/deep-black — */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to top, var(--dark-teal) 0%, rgba(3, 58, 64, 0.55) 16%, rgba(3, 58, 64, 0) 42%),
    linear-gradient(to left, var(--dark-teal) 0%, rgba(3, 58, 64, 0.4) 10%, rgba(3, 58, 64, 0) 30%),
    linear-gradient(to right, rgba(26, 26, 26, 0.25) 0%, rgba(26, 26, 26, 0) 20%);
}

/* — Overline (rótulo pequeno, todo caps, tracking largo) —
   !important necessário: o Tailwind Play CDN gera a utilitária .overline
   (text-decoration-line: overline) que colide com nosso componente e
   desenha uma linha acima do texto em toda a página. */
.overline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  text-decoration-line: none !important;
  text-decoration: none !important;
}
/* No mobile o tracking largo quebra o overline em duas linhas */
@media (max-width: 640px) {
  .overline {
    font-size: 0.62rem;
    letter-spacing: 0.26em;
  }
}

/* — Barra gradiente com shimmer (usada como separador de destaque) — */
.gradient-bar {
  height: 4px;
  width: 100%;
  background: var(--gradient-spectrum);
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
  border-radius: 9999px;
}

/* — Divisor de seção: linha 1px que se dissolve nas pontas — */
.section-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(64, 232, 208, 0.25), transparent);
  border: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. BOTÕES, LINKS E CURSOR CUSTOM
   ══════════════════════════════════════════════════════════════════════════ */

/* — Estrutura base do botão magnético (o JS aplica x/y no mousemove) — */
.btn-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  will-change: transform;
  transition: transform 400ms var(--ease-out-expo);
}
.btn-magnetic .btn-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 400ms var(--ease-out-expo);
}
.btn-magnetic .btn-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scale(0);
  transition: transform 500ms var(--ease-out-expo);
  z-index: 0;
}
.btn-magnetic:hover .btn-fill {
  transform: scale(1);
}

/* — CTA primário: turquoise sólido, texto dark-teal — */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  background: var(--turquoise);
  color: var(--dark-teal);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 350ms var(--ease-out-expo), box-shadow 350ms var(--ease-out-expo);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(64, 232, 208, 0.25);
}
.btn-primary:active {
  transform: translateY(0);
}

/* — CTA secundário/ghost: contorno translúcido — */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
  transition: border-color 350ms var(--ease-out-expo), color 350ms var(--ease-out-expo);
}
.btn-ghost:hover {
  border-color: rgba(64, 232, 208, 0.5);
  color: var(--turquoise);
}

/* — Link com sublinhado animado (esquerda → direita no hover) — */
.link-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out-expo);
}
.link-underline:hover::after {
  transform: scaleX(1);
}

/* — Cursor custom (ponto + anel) — ativado via body.cursor-visible pelo JS — */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--turquoise);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor-dot);
  opacity: 0;
  transition: opacity 300ms ease;
}
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--turquoise);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor-outline);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms var(--ease-out-expo), background-color 300ms ease;
}
body.cursor-visible .cursor-dot {
  opacity: 1;
}
body.cursor-visible .cursor-outline {
  opacity: 0.4;
}
.cursor-outline.hovering {
  background: var(--turquoise);
  transform: scale(1.4);
}

/* Em telas touch o cursor custom não faz sentido — ocultar sempre */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot,
  .cursor-outline {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. MOTION — estados iniciais (o lp.js anima a partir daqui)
   ══════════════════════════════════════════════════════════════════════════ */

/* — Reveal genérico controlado por GSAP/ScrollTrigger — */
[data-gsap] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-gsap="fade-up"] { transform: translateY(60px); }
[data-gsap="fade-up-slow"] { transform: translateY(80px); }
[data-gsap="fade-left"] { transform: translateX(-60px); }
[data-gsap="fade-right"] { transform: translateX(60px); }
[data-gsap="scale-in"] { transform: scale(0.88); }
[data-gsap="blur-in"] { filter: blur(12px); transform: translateY(30px); }

/* — Headline do hero: cada linha revela de baixo pra cima com leve rotateX — */
[data-hero-headline] .line {
  overflow: hidden;
  display: block;
}
[data-hero-headline] .line > .inline-block {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: bottom;
}

/* — Reveal por palavra/linha (usado em [data-split="words"] e blocos de texto) —
   white-space:pre preserva o espaço entre palavras (o JS as separa em spans
   individuais) e vertical-align:top + line-height herdado evitam que cada
   .split-word fique com tamanho/alinhamento diferente do texto ao redor. */
[data-split] {
  line-height: inherit;
  display: block;
}
.split-line {
  overflow: hidden;
  display: block;
  line-height: inherit;
}
.split-word {
  display: inline-block;
  white-space: pre;
  vertical-align: top;
  line-height: inherit;
  will-change: transform, opacity;
}

/* — Indicador de scroll do hero — */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: var(--z-content);
}
.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--turquoise), rgba(64, 232, 208, 0));
}
.scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
  animation: scroll-dot-fall 2s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. COMPONENTES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 Cards ─────────────────────────────────────────────────────────── */

/* Card de vidro — usado sobre fundos escuros (dor, método, habilidades) */
.card-glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  transition: border-color 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo);
}
.card-glass:hover {
  border-color: rgba(64, 232, 208, 0.35);
  transform: translateY(-4px);
}

/* Card claro — usado sobre fundos off-white/white */
.card-light {
  background: var(--white);
  box-shadow: var(--shadow-card);
  border-radius: 14px;
  transition: box-shadow 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo);
}
.card-light:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Card com tilt 3D (data-tilt no JS altera rotateX/rotateY via inline style) */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out-expo), box-shadow 500ms var(--ease-out-expo);
  will-change: transform;
}
.card-3d:hover {
  box-shadow: var(--shadow-card-hover);
}
.card-3d .card-content {
  transform: translateZ(30px);
  transition: transform 500ms var(--ease-out-expo);
}

/* ── 7.2 Marquee infinito ──────────────────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
  will-change: transform;
}
.marquee-track--reverse {
  animation-direction: reverse;
}
/* Pausa suave no hover — não altera layout, só congela a animação */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ── 7.3 Pílulas de habilidade ─────────────────────────────────────────── */
.skill-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  cursor: default;
  transition: border-color 250ms var(--ease-out-expo), color 250ms var(--ease-out-expo);
}
.skill-pill:hover {
  border-color: rgba(64, 232, 208, 0.5);
  color: var(--turquoise);
}

/* ── 7.4 Método BRIIN — letras gigantes + linhas numeradas ───────────────── */

/* Letra de contorno (B · R · I · I · N) — preenche ao ficar ativa no scroll.
   font-size fixo em clamp (em vez de escalar com vw) evita que a letra fique
   minúscula/desalinhada em viewports intermediários; stroke mais forte
   (.45 de opacidade) garante contraste visível mesmo sem hover/active. */
.method-letter {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--turquoise);
  -webkit-text-stroke: 1px var(--turquoise);
}

/* Linha numerada do método — número + título + descrição, com hover sutil.
   Grid (em vez de flex) compacta a altura da seção: a letra ocupa só o
   espaço que precisa (auto) e o conteúdo preenche o resto (minmax(0,1fr)
   evita que texto longo estoure a coluna). Padding vertical reduzido e
   deslocamento de hover mais discreto (6px) tiram o excesso de altura da
   seção inteira. */
.method-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 1.5rem;
  margin: 0 -1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 300ms var(--ease-out-expo);
}
.method-row > * {
  position: relative;
  z-index: 1;
}
/* Barra sólida turquoise que varre da esquerda para a direita no hover,
   tipo loading bar — scaleX (em vez de width) evita reflow/jank. */
.method-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark-teal-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms var(--ease-out-expo);
  pointer-events: none;
  z-index: 0;
}
.method-row:hover::before {
  transform: scaleX(1);
}
.method-row:hover {
  border-color: rgba(64, 232, 208, 0.3);
}
.method-row:hover .method-letter {
  color: #fff;
  -webkit-text-stroke-color: #fff;
}
.method-row:hover .method-num {
  color: rgba(255, 255, 255, 0.75);
}
.method-row-title {
  transition: color 300ms var(--ease-out-expo);
}

/* ── 7.5 Retrato (hero + "Quem sou eu") ───────────────────────────────────── */
.portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(64, 232, 208, 0.28);
  box-shadow: var(--shadow-glow-turquoise), 0 20px 50px rgba(0, 0, 0, 0.35);
  background: var(--dark-teal);
}
.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(64, 232, 208, 0.1) 0%, rgba(64, 232, 208, 0) 55%),
    linear-gradient(145deg, var(--dark-teal), var(--deep-black));
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 14rem);
  font-weight: 300;
  color: rgba(242, 244, 243, 0.09);
  line-height: 1;
  transition: opacity 500ms var(--ease-out-expo);
  z-index: 1;
}
/* Variante sem markup interno (ex.: seção "Quem sou eu") — gera a letra "P"
   e a legenda via CSS para não depender de spans no HTML. `:empty` garante
   que isto nunca duplique texto onde o HTML já tem os spans manuais (hero),
   pois ali o elemento tem filhos e a regra abaixo não casa. */
.portrait-placeholder:empty::before {
  content: 'P';
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 14rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(242, 244, 243, 0.09);
}
.portrait-placeholder:empty::after {
  content: 'foto em breve';
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: -2rem;
}
/* Quando a foto carrega, lp.js oculta o placeholder (hidden ou is-loaded) */
.portrait-frame.is-loaded .portrait-placeholder {
  opacity: 0;
  pointer-events: none;
}
.portrait-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 2;
}

/* Retrato recortado (PNG sem fundo) — funde na base com o dark-teal do hero
   via máscara, dispensando moldura e overlay de vinheta. */
.portrait-cutout {
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.82) 66%, rgba(0, 0, 0, 0.48) 80%, rgba(0, 0, 0, 0.16) 92%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.82) 66%, rgba(0, 0, 0, 0.48) 80%, rgba(0, 0, 0, 0.16) 92%, rgba(0, 0, 0, 0) 100%);
}

/* ── 7.6 Estatísticas ──────────────────────────────────────────────────── */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--turquoise);
}

/* ── 7.7 Formulário ────────────────────────────────────────────────────── */

/* Wrapper de campo com floating label */
.field {
  position: relative;
  width: 100%;
}
.field-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.1rem 0 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  transition: border-color 300ms var(--ease-out-expo);
}
.field-input::placeholder {
  color: transparent;
}
.field-input:focus {
  outline: none;
  border-color: var(--turquoise);
}
.field-input:focus-visible {
  outline: none;
}
.field-input.has-error {
  border-color: var(--error);
}

/* Label flutuante: repousa sobre o valor até o campo ganhar foco/conteúdo */
.field-label {
  position: absolute;
  left: 0;
  top: 1.1rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 250ms var(--ease-out-expo), color 250ms var(--ease-out-expo);
}
.field-input:focus + .field-label,
.field-input:not(:placeholder-shown) + .field-label {
  transform: translateY(-1.5rem) scale(0.78);
  color: var(--turquoise);
}
.field-input.has-error + .field-label {
  color: var(--error);
}

/* Mensagem de erro inline */
.field-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--error);
  min-height: 1rem;
}

/* Pílula de seleção (checkbox custom) — usada no grupo "Preciso de marketing…" */
.chip-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-check span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  transition: background-color 250ms var(--ease-out-expo), border-color 250ms var(--ease-out-expo), color 250ms var(--ease-out-expo);
}
.chip-check input:checked + span {
  background: rgba(64, 232, 208, 0.1);
  border-color: var(--turquoise);
  color: var(--turquoise);
}
.chip-check input:focus-visible + span {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
}

/* ── 7.8 CTA fixo (mobile) ─────────────────────────────────────────────── */
.sticky-cta {
  display: none;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-sticky-cta);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 350ms var(--ease-out-expo), transform 350ms var(--ease-out-expo);
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 7.9 Barra de progresso de leitura ─────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--turquoise);
  transform: scaleX(0);
  transform-origin: left;
  z-index: var(--z-progress);
  will-change: transform;
}

/* ── 7.10 Badge (selo pequeno com ponto pulsante) ─────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
  animation: pulse-glow 2s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* O JS duplica o conteúdo do track (data-marquee) para o loop fechar em -50% */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(10px); }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(64, 232, 208, 0.5);
  }
  50% {
    opacity: 0.65;
    box-shadow: 0 0 0 6px rgba(64, 232, 208, 0);
  }
}

@keyframes scroll-dot-fall {
  0% { transform: translateY(0); opacity: 1; }
  70% { opacity: 0.4; }
  100% { transform: translateY(28px); opacity: 0; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. ACESSIBILIDADE
   ══════════════════════════════════════════════════════════════════════════ */

/* Foco visível consistente em toda a página — nunca depender só do outline
   nativo do navegador, que varia entre Chrome/Safari/Firefox. */
:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
}

/* Usuários que pedem menos movimento recebem o estado final direto,
   sem qualquer transição, reveal ou loop. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  [data-gsap] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  [data-hero-headline] .line > .inline-block,
  .split-word {
    opacity: 1;
    transform: none;
  }

  .cursor-dot,
  .cursor-outline {
    display: none;
  }

  .marquee-track {
    animation-play-state: paused;
  }

  .scroll-dot {
    animation: none;
    opacity: 1;
  }

  .hero-orb {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   10. REFINO RESPONSIVO — até 768px
   As classes utilitárias do Tailwind já cobrem a maior parte do reflow;
   aqui ajustamos apenas os componentes custom deste arquivo.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero em coluna — reduz respiro superior e o tamanho dos orbs ambiente */
  [data-hero-content] {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }
  .hero-orb {
    transform: scale(0.55);
  }
  .glow-teal {
    transform: scale(0.6);
  }

  /* Tipografia reduzida nos componentes de escala fluida.
     .method-letter fica de fora: o tamanho agora é fixo (clamp 3.5rem–5rem)
     por design (contrato §7.4) para manter contraste/alinhamento em toda
     a largura — não reduzir mais no mobile. */
  .stat-value {
    font-size: clamp(2.5rem, 12vw, 3.25rem);
  }
  .portrait-placeholder,
  .portrait-placeholder:empty::before {
    font-size: clamp(5rem, 30vw, 7rem);
  }

  /* Linha do método empilha em coluna para não espremer o texto */
  .method-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.5rem 1.5rem;
    margin: 0 -1.5rem;
  }

  /* Estatísticas com respiro menor entre itens */
  .stat-row {
    gap: 2rem 1.5rem;
    padding: 2rem 0;
  }

  /* Marquee um pouco mais rápido para não parecer arrastado em telas pequenas */
  .marquee-track {
    animation-duration: 22s;
  }

  /* CTA fixo é exclusivo do mobile — nunca aparece em telas ≥769px */
  .sticky-cta {
    display: flex;
  }
}

@media (min-width: 769px) {
  .sticky-cta {
    display: none;
  }
}

/* — .method-row em telas lg+: um pouco mais de respiro vertical agora que
   a base já está compacta (grid + padding 1.75rem) — */
@media (min-width: 1024px) {
  .method-row {
    padding: 2.25rem 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LP DOUGLAS — classes exclusivas desta página
   ═══════════════════════════════════════════════════════════════════════ */

/* Faixa-âncora (seção 09): full-bleed, quadriculado de pontos, sem card.
   Só a frase ocupando a tela. */
.anchor-band {
  position: relative;
  background-color: var(--dark-teal);
  overflow: hidden;
}
.anchor-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #40E8D0 1px, transparent 0);
  background-size: 60px 60px;
  opacity: 0.06;
  pointer-events: none;
}

/* Duotone teal — unifica as fotos de fundo quente com a paleta da marca.
   Aplicar em douglas-relogio e douglas-perola. */
.duotone-teal {
  filter: grayscale(1) sepia(1) hue-rotate(140deg) saturate(1.6) brightness(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .anchor-band::before { opacity: 0.04; }
}


/* ═════════════════════════════════════════════════════════════════════════
   ═ QIA: utilitários compartilhados ═
   Específicos da LP "Quem a IA Indica". Usados por todas as seções (parts/).
   Cada agente de seção pode complementar com CSS prefixado (.sNN-*) no seu
   próprio assets/css/NN-nome.css — nunca editar este arquivo depois desta
   fundação.
   ═════════════════════════════════════════════════════════════════════════ */

/* — Painel translúcido (cards, mocks, paineis de teste) — */
.glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
}

/* — Rótulo pequeno acima de título de seção (badge textual, não o .badge com ponto) —
   Redeclarada aqui de propósito: a QIA usa um overline mais discreto (12px,
   tracking .18em, cor turquoise) que o overline "largo" herdado da LP Douglas
   (seção 4 deste arquivo). Como esta regra vem depois, no mesmo nível de
   especificidade, ela vence para toda a LP Quem a IA Indica. */
.overline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turquoise);
  text-decoration-line: none !important;
  text-decoration: none !important;
}

/* — Título de seção (H2 padrão) — */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* — Parágrafo de apoio abaixo do título de seção — */
.lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 60ch;
}

/* — Texto em gradiente (usar em uma palavra/linha por título, nunca no bloco inteiro) — */
.text-gradient {
  background: linear-gradient(90deg, #027368, #40E8D0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* — Input de URL em pílula (herói e CTA final) — */
.input-url {
  width: 100%;
  height: 56px;
  padding: 0 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  transition: border-color 300ms var(--ease-out-expo), box-shadow 300ms var(--ease-out-expo), background-color 300ms var(--ease-out-expo);
}
.input-url::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.input-url:focus {
  outline: none;
  border-color: var(--turquoise);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(64, 232, 208, 0.18);
}
.input-url.has-error {
  border-color: var(--error);
}

/* — Oculta visualmente mantendo acessível a leitores de tela —
   Já existe equivalente na seção 3 (BASE) deste arquivo; redeclarada aqui
   por completude do bloco QIA (idempotente, mesma definição). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* — Check SVG que "desenha" via stroke-dasharray (feed de análise, gate, lista de itens) —
   Markup esperado: <svg class="qia-check" viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg>
   O path deve ter comprimento aproximado de 24 (ajustar stroke-dasharray se o
   traçado mudar). Ative com a classe `.is-checked` (JS) ou `data-checked`. */
.qia-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
}
.qia-check path {
  fill: none;
  stroke: var(--turquoise);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 450ms var(--ease-out-expo);
}
.qia-check.is-checked path,
.qia-check[data-checked] path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .qia-check path {
    transition: none;
    stroke-dashoffset: 0;
  }
}


/* ═══ 00-essencial.css ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   LP BRIIN ESSENCIAL — Fundação do Essencial (v2 · identidade BRIIN)
   Utilitários .ess-* compartilhados por todas as seções, 100% na paleta
   BRIIN (dark-teal / deep-black / turquoise / gold), sem cor de conversão
   própria. Reaproveita variáveis, easings e radius já definidos em
   assets/base.css (tokens de marca, --ease-out-expo, --shadow-elevated,
   --gradient-turquoise-glow, radius 14px).
   NÃO EDITAR fora da fundação — cada seção usa assets/css/NN-nome.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --turquoise-glow: rgba(64, 232, 208, 0.25);
}

/* ── Fundos de seção ───────────────────────────────────────────────────── */
.ess-light {
  background: var(--off-white);
  color: var(--deep-black);
}
.ess-dark {
  background: var(--deep-black);
  color: #fff;
}
.ess-teal {
  background: var(--dark-teal);
  color: #fff;
}

/* Componentes do engine (base.css) precisam de leitura diferente sobre claro */
.ess-light .overline {
  color: var(--brand);
}
.ess-light .lead {
  color: #4A4A4A;
}
.ess-light .section-title {
  color: var(--deep-black);
}
.ess-light .btn-ghost {
  border-color: rgba(26, 26, 26, 0.25);
  color: var(--deep-black);
}
/* Sem isto o hover do .btn-ghost herdado (borda/texto turquoise) nunca
   aparece: a regra acima tem a mesma especificidade e vem depois no cascade. */
.ess-light .btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.ess-light .glass {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(26, 26, 26, 0.1);
}

/* ── Check de lista ────────────────────────────────────────────────────── */
.ess-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.2em;
  color: var(--turquoise);
}
.ess-light .ess-check {
  color: var(--brand);
}

/* ── Numeral gigante de fundo (cards/passos numerados) ────────────────────
   Uso: "01 02 03" atrás de título de card, posicionado pelo CSS da seção. */
.ess-eyebrow-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  user-select: none;
}
.ess-light .ess-eyebrow-num {
  color: rgba(26, 26, 26, 0.06);
}

/* ── Orb ambiente turquoise (combinar com .hero-orb: <div class="hero-orb ess-orb-teal">) ── */
.ess-orb-teal {
  background: radial-gradient(circle, var(--turquoise-glow), transparent 70%);
}

/* ══════════════════════════════════════════════════════════════════════════
   Primitivos de mockup — só o esqueleto. Cada seção preenche a tela/capa
   com o próprio prefixo (.sNN-*) e define largura via CSS ou style inline.
   ══════════════════════════════════════════════════════════════════════════ */

/* — Celular — */
.ess-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0E0E0E;
  padding: 10px;
  box-shadow: var(--shadow-elevated);
}
.ess-phone-screen {
  position: relative;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--dark-teal);
}
.ess-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  border-radius: 9999px;
  background: #000;
  z-index: 5;
}

/* — Documento/manual — */
.ess-doc {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #fff;
  color: var(--deep-black);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}
.ess-doc-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.ess-doc-cover::before {
  content: '';
  display: block;
  height: 32%;
  background: var(--gradient-turquoise-glow);
}

/* — Avatar de perfil Instagram — o miolo branco vem do filho direto
   (imagem real ou skeleton) para funcionar com qualquer conteúdo. */
.ess-ig-avatar {
  display: inline-flex;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 3px;
  background: var(--gradient-turquoise-glow);
}
.ess-ig-avatar > * {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

/* — Linha skeleton (texto genérico em mockups) — */
.ess-skel {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: currentColor;
  opacity: 0.18;
}
.ess-skel--w40 { width: 40%; }
.ess-skel--w60 { width: 60%; }
.ess-skel--w80 { width: 80%; }

/* ══════════════════════════════════════════════════════════════════════════
   Motion reduzida — o reset global de base.css (bloco 9) já zera toda
   transition-duration via `*`; isto documenta explicitamente as transições
   próprias desta fundação (contrato §3).
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ess-light .btn-ghost {
    transition: none;
  }
}


/* ── Marca d'água lateral ("Entregável 0N") ─────────────────────────────
   Texto vertical na margem esquerda da seção, lendo de baixo para cima.
   Fica atrás do conteúdo (z 0; o conteúdo das seções está em z-10). */
.ess-watermark {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	z-index: 0;
	display: none;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(6.5rem, 9.75vw, 11rem);
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.06);
	pointer-events: none;
	user-select: none;
}
@media (min-width: 1024px) {
	.ess-watermark { display: block; }
}


/* ═══ 01-nav.css ═══ */
/* ── 01 · Nav ──────────────────────────────────────────────────────────────
   Estado transparente no topo, blur + fundo escuro após 40px de scroll.
   O JS do engine (base.js → initNavbar) alterna .is-scrolled / .is-hidden em
   [data-navbar]; aqui só definimos a aparência. .is-on-light é alternada por
   assets/js/01-nav.js (IntersectionObserver sobre as seções .ess-light) e
   tem prioridade sobre .is-scrolled: uma vez sobre fundo claro a nav sempre
   usa o vidro claro, mesmo já rolada. */

[data-navbar] {
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 250ms var(--ease-out-expo), border-color 250ms var(--ease-out-expo),
		transform 350ms var(--ease-out-expo);
}

[data-navbar].is-scrolled {
	background-color: rgba(26, 26, 26, 0.72);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Scroll rápido para baixo esconde a barra; volta ao rolar para cima (classe
   já adicionada pelo initNavbar do engine, aqui só o efeito visual). Os 2px
   extras evitam um fio de 1px do blur/borda sobrando no topo em telas de
   alta densidade. */
[data-navbar].is-hidden {
	transform: translateY(calc(-100% - 2px));
}

/* Sobre seções claras (04, 06, 08, 10): vidro claro, texto e monograma escuros.
   Regra depois de .is-scrolled no cascade para vencer quando as duas coexistem. */
[data-navbar].is-on-light {
	background-color: rgba(242, 244, 243, 0.75);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border-bottom-color: rgba(26, 26, 26, 0.08);
}

/* — Logo: dois monogramas empilhados, só um visível por vez — */
.s01-logo-mark {
	display: inline-flex;
}

.s01-mark {
	object-fit: contain;
	transition: opacity 200ms linear;
}

.s01-mark--light {
	opacity: 0;
}

[data-navbar].is-on-light .s01-mark--dark {
	opacity: 0;
}

[data-navbar].is-on-light .s01-mark--light {
	opacity: 1;
}

.s01-divider {
	background-color: rgba(255, 255, 255, 0.15);
	transition: background-color 250ms var(--ease-out-expo);
}

[data-navbar].is-on-light .s01-divider {
	background-color: rgba(26, 26, 26, 0.12);
}

.s01-wordmark {
	color: #fff;
	transition: color 250ms var(--ease-out-expo);
}

[data-navbar].is-on-light .s01-wordmark {
	color: var(--deep-black);
}

/* — Links de navegação — */
.s01-link {
	color: rgba(255, 255, 255, 0.75);
	transition: color 250ms var(--ease-out-expo);
}

.s01-link:hover {
	color: #fff;
}

[data-navbar].is-on-light .s01-link {
	color: rgba(26, 26, 26, 0.7);
}

[data-navbar].is-on-light .s01-link:hover {
	color: var(--deep-black);
}

/* — Botão CTA da nav: 44px de altura (o padrão do .btn-primary é 52px); a
   cor turquoise não muda em nenhum dos dois estados (contrato §4). — */
[data-navbar] .btn-primary {
	min-height: 44px;
}

/* — Botão do menu mobile (hambúrguer / fechar) — */
.s01-toggle {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.15);
	transition: color 250ms var(--ease-out-expo), border-color 250ms var(--ease-out-expo);
}

.s01-toggle:hover {
	color: var(--turquoise);
	border-color: var(--turquoise);
}

[data-navbar].is-on-light .s01-toggle {
	color: var(--deep-black);
	border-color: rgba(26, 26, 26, 0.15);
}

/* Alterna ícone: só um dos dois visível, conforme aria-expanded (o engine
   já mantém esse atributo atualizado em initNavbar). */
.s01-icon-close {
	display: none;
}

[data-menu-toggle][aria-expanded="true"] .s01-icon-open {
	display: none;
}

[data-menu-toggle][aria-expanded="true"] .s01-icon-close {
	display: block;
}


/* ═══ 02-hero.css ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   02 · HERÓI — LP BRIIN Essencial
   Badge, pergunta itálica, H1 gigante, statement + rotator, CTAs, microcopy,
   tagline script e a composição dos três mockups (celular / perfil Instagram
   / capa do MIAN). Tudo prefixado .s02- (ou #inicio) para nunca colidir com
   outras seções. Primitivos de mockup (.ess-phone, .ess-doc, .ess-ig-avatar,
   .ess-skel) vêm de assets/css/00-essencial.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pergunta de abertura (duas linhas, Cormorant itálico) ───────────────── */
.s02-question {
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
	font-weight: 400;
	line-height: 1.35;
}
@media (min-width: 1024px) {
	.s02-question {
		white-space: nowrap;
	}
}

/* ── H1 gigante ────────────────────────────────────────────────────────── */
.s02-h1 {
	font-size: clamp(2.6rem, 7vw, 6.25rem);
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: #FFFFFF;
}

/* ── Statement em caixa alta ───────────────────────────────────────────── */
.s02-statement {
	font-size: 13px;
	letter-spacing: 0.18em;
	line-height: 1.6;
	max-width: 44ch;
}
@media (min-width: 640px) {
	.s02-statement { font-size: 14px; }
}

/* ── Tagline script: encosta na largura do texto, sem quebrar ───────────── */
.s02-script {
	display: inline-block;
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1.15;
}

/* ══════════════════════════════════════════════════════════════════════════
   Rotator — pílula glass com item que troca a cada 2,4s
   ══════════════════════════════════════════════════════════════════════════ */
.s02-rotator {
	--s02-rotator-h: 1.6rem;
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 22ch;
	padding: 0.7rem 1.1rem;
	overflow: hidden;
}
.s02-rotator-mask {
	display: block;
	height: var(--s02-rotator-h);
	overflow: hidden;
}
.s02-rotator-track {
	display: flex;
	flex-direction: column;
	transform: translateY(calc(var(--s02-i, 0) * var(--s02-rotator-h) * -1));
	transition: transform 500ms var(--ease-out-expo);
}
.s02-rotator-item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	height: var(--s02-rotator-h);
	line-height: var(--s02-rotator-h);
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}
.s02-rotator-item i {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--turquoise);
}
/* Barra de progresso de 2px na base da pílula, refeita a cada ciclo pelo JS
   (transition width 2.4s linear, reset via transition:none + reflow) */
.s02-rotator-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.08);
}
.s02-rotator-bar-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--turquoise);
}

/* Reduced motion: vira lista de chips estáticos, sem máscara nem barra — a
   verificação de aceite exige os 5 itens visíveis de uma vez, sem rotação. */
@media (prefers-reduced-motion: reduce) {
	.s02-rotator {
		min-width: 0;
		flex-wrap: wrap;
		padding: 0.6rem 0.9rem;
	}
	.s02-rotator-mask {
		height: auto;
		overflow: visible;
	}
	.s02-rotator-track {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem 0.9rem;
		transform: none;
		transition: none;
	}
	.s02-rotator-item {
		height: auto;
		line-height: 1.4;
	}
	.s02-rotator-bar {
		display: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Spotlight que segue o mouse (atualizado via --mx/--my em 02-hero.js)
   ══════════════════════════════════════════════════════════════════════════ */
.s02-spotlight {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(600px circle at var(--mx, 62%) var(--my, 45%), rgba(64, 232, 208, 0.07), transparent 70%);
	transition: opacity 700ms var(--ease-out-expo);
}
.s02-spotlight.is-active {
	opacity: 1;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
	.s02-spotlight {
		display: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Composição dos três mockups
   ══════════════════════════════════════════════════════════════════════════ */
.s02-device {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	aspect-ratio: 4 / 5;
	perspective: 1200px;
	--s02-px: 0px;
	--s02-py: 0px;
	/* Parallax: move a composição inteira como um bloco rígido — evita ter
	   que recompor cada mockup individualmente com o próprio rotate/scale. */
	transform: translate(var(--s02-px, 0px), var(--s02-py, 0px));
	transition: transform 120ms linear;
}
.s02-orb {
	position: absolute;
	width: 60%;
	height: 60%;
	opacity: 0.7;
}
.s02-orb--turquoise {
	top: 2%;
	left: 8%;
	background: radial-gradient(circle, rgba(64, 232, 208, 0.32), transparent 70%);
}
.s02-orb--teal {
	bottom: -6%;
	left: -10%;
	width: 44%;
	height: 44%;
	background: radial-gradient(circle, rgba(64, 232, 208, 0.28), transparent 70%);
}

/* Cada mockup é ancorado por top/left/right (% relativo ao .s02-device, sem
   ambiguidade) e só usa translate(-50%) para o autocentro no próprio eixo —
   rotate/scale entram por último, sem disputar espaço com o mockup vizinho. */
.s02-mock {
	position: absolute;
}
.s02-mock--phone {
	top: 50%;
	left: 50%;
	width: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.s02-mock--ig {
	top: 40%;
	left: 0;
	width: 42%;
	transform: translate(0, -50%) rotate(-6deg) scale(0.82);
	z-index: 1;
}
.s02-mock--doc {
	top: 26%;
	right: -9%;
	width: 38%;
	transform: translate(0, -50%) rotate(7deg) scale(0.8);
	z-index: 2;
}

/* Camada de flutuação: só translateY, isolada da posição/rotação/escala acima */
.s02-float {
	animation: s02-float var(--s02-float-dur, 7s) ease-in-out infinite;
}
@keyframes s02-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4%); }
}

/* Legendas flutuantes */
.s02-tag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.8rem;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(26, 26, 26, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	z-index: 4;
}
/* Posicionadas em % relativas a .s02-device (não ao mockup individual —
   ver comentário no HTML sobre o stacking context do transform/rotate). */
.s02-tag--phone {
	bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
}
.s02-tag--ig {
	top: 19%;
	left: 0%;
}
.s02-tag--doc {
	bottom: 46%;
	right: -1%;
}

/* ── Celular: tela com landing page em miniatura ─────────────────────────── */
.s02-phone-screen {
	position: relative;
}
.s02-phone-scroll {
	position: absolute;
	inset: 0;
	top: 34px;
	animation: s02-phone-scroll 14s linear infinite;
}
.ess-phone:hover .s02-phone-scroll {
	animation-play-state: paused;
}
@keyframes s02-phone-scroll {
	0% { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}
.s02-phone-page {
	padding: 0.85rem 0.7rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.s02-phone-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.s02-phone-logo {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.9;
}
.s02-phone-header .ess-skel {
	color: #FFFFFF;
}
.s02-phone-hero {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.3rem;
	color: #FFFFFF;
}
.s02-phone-btn {
	display: block;
	width: 42%;
	height: 12px;
	margin-top: 0.2rem;
	border-radius: 9999px;
	background: var(--turquoise);
}
.s02-phone-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.35rem;
	margin-top: 0.3rem;
}
.s02-phone-card {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background: linear-gradient(160deg, rgba(2, 115, 104, 0.35), rgba(64, 232, 208, 0.35));
}
.s02-phone-quote {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: 0.4rem;
	padding: 0.5rem 0.55rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}
.s02-phone-quote i {
	width: 12px;
	height: 12px;
	color: var(--turquoise);
}
.s02-phone-wa {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #25D366;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	z-index: 6;
}
.s02-phone-wa i {
	width: 15px;
	height: 15px;
	color: #FFFFFF;
}

/* ── Card de perfil Instagram ─────────────────────────────────────────────── */
.s02-ig {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 1.1rem;
	color: rgba(255, 255, 255, 0.9);
}
.s02-ig-avatar {
	width: 44px;
	height: 44px;
	margin-bottom: 0.2rem;
}
.s02-ig-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 0.3rem;
	padding: 0.3rem 0.8rem;
	border-radius: 9999px;
	background: var(--turquoise);
	color: var(--dark-teal);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
}

/* ── Capa do MIAN ──────────────────────────────────────────────────────── */
.s02-doc-cover {
	position: relative;
}
.s02-doc-logo {
	position: absolute;
	top: 12%;
	left: 12%;
	width: 20px;
	height: 20px;
}
.s02-doc-body {
	margin-top: auto;
	padding: 0.9rem 0.9rem 1.1rem;
}
.s02-doc-title {
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1;
	color: var(--deep-black);
}
.s02-doc-caption {
	margin-top: 0.4rem;
	font-family: var(--font-body);
	font-size: 9px;
	line-height: 1.4;
	color: #6B6B6B;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsivo
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
	.s02-device {
		max-width: 340px;
		aspect-ratio: 4 / 5;
	}
	.s02-mock--phone {
		width: 48%;
	}
	.s02-mock--ig {
		width: 38%;
		left: 2%;
	}
	.s02-mock--doc {
		width: 34%;
		right: -4%;
		top: 28%;
	}
}

@media (max-height: 699px) {
	#inicio [data-scroll-indicator] {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s02-float,
	.s02-phone-scroll {
		animation: none;
	}
	.s02-mock {
		transition: none;
	}
	.s02-rotator-bar-fill {
		transition: none;
	}
}


/* ═══ 03-marquee.css ═══ */
/* ── 03 · Faixa (marquee) ──────────────────────────────────────────────────
   Sem CSS próprio necessário: fundo #02262A, borda e espaçamento vêm de
   utilities Tailwind no próprio parts/03-marquee.html (igual à base,
   lp-quem-a-ia-indica/parts/03-marquee.html). Overflow/mask e animação vêm
   de .marquee / .marquee-track (engine, base.css); JS de duplicação vem de
   initMarquee() (base.js, [data-marquee]). Arquivo mantido por convenção
   (1 CSS por seção numerada). */


/* ═══ 04-o-que-e.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   04 · O que é (v2 · identidade BRIIN)
   Prefixo .s04-*: bloco central sobre .ess-dark (deep-black) + índice do
   pacote em cards escuros. Tailwind cuida de layout/spacing/grid/max-w/
   cores do config; aqui só a tipografia fina (tamanhos clamp, itálico,
   line-height) e o que não é token de cor (borda translúcida, hover).
   ═══════════════════════════════════════════════════════════════════════ */

#o-que-e .s04-overline {
  display: block;
  margin-bottom: 1.5rem;
}

/* Texto grande com data-split="words": herda branco de .ess-dark via
   color:inherit. O split-word também recebe color:inherit de forma
   explícita, defensivo caso o engine algum dia estilize .split-word
   diretamente (hoje não estiliza; ver assets/base.css bloco 6). */
#o-que-e .s04-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: inherit;
}
#o-que-e .s04-headline .split-word {
  color: inherit;
}

/* Statement: "especialmente para você." quebra para linha própria só no
   desktop (>=1024px); no mobile flui junto com a primeira frase. Branco
   sólido (.text-gradient no <span> cuida da segunda linha). */
#o-que-e .s04-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: #fff;
  margin-top: 2.5rem;
}
#o-que-e .s04-statement-line2 {
  font-style: normal;
}
#o-que-e .s04-statement-line2 {
  display: block;
}

#o-que-e .s04-lead {
  max-width: 62ch;
  margin-top: 2rem;
}

#o-que-e .s04-closing {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2.5rem;
}

#o-que-e .s04-index-label {
  margin-bottom: 2rem;
}

/* Cards do índice: escuros sobre .ess-dark (bg-white/[0.04] no HTML),
   borda translúcida branca, hover eleva pra turquoise/40. */
#o-que-e .s04-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: border-color 250ms var(--ease-out-expo);
}
#o-que-e .s04-card:hover,
#o-que-e .s04-card:focus-visible {
  border-color: rgba(64, 232, 208, 0.4);
}
#o-que-e .s04-card-arrow {
  transition: transform 250ms var(--ease-out-expo);
}
#o-que-e .s04-card:hover .s04-card-arrow,
#o-que-e .s04-card:focus-visible .s04-card-arrow {
  transform: translate(4px, -4px);
}
#o-que-e .s04-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  #o-que-e .s04-card,
  #o-que-e .s04-card-arrow {
    transition: none;
  }
}

/* Numeral do índice: menor que o padrão .ess-eyebrow-num para não encostar no título */
#o-que-e .s04-num {
	font-size: clamp(3rem, 4.5vw, 4.2rem);
	top: auto;
	bottom: 0.6rem;
	right: 1.1rem;
	line-height: 1;
}
#o-que-e .s04-card-title {
	padding-right: 3.5rem;
}

/* Cards empilhados na coluna direita: mais baixos, numeral ancorado no canto */
#o-que-e .s04-card {
  padding: 1.5rem 1.75rem;
  gap: 1.1rem;
}
#o-que-e .s04-num {
  font-size: clamp(2.6rem, 3.2vw, 3.4rem);
  bottom: 0.4rem;
  right: 1rem;
}


/* ═══ 05-landing-page.css ═══ */
/* ═══ 05 · Landing Page Profissional ════════════════════════════════════════
   Coluna esquerda com mockup .ess-phone; coluna direita com texto, bento de
   7 entregáveis e lista de diferenciais. Layout por grid-template-areas para
   reordenar (texto > mockup > bento > lista) sem duplicar HTML por breakpoint.
   Sticky + scrub do celular só em >=1024px e com motion habilitada; caso
   contrário a área "visual" cai na mesma coluna única, no topo estático.
   ────────────────────────────────────────────────────────────────────────── */

.s05-title { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: none; }

.s05-eyebrow-apoio { opacity: 0.6; }

/* ── Grid de reordenação ──────────────────────────────────────────────────
   Mobile-first: uma coluna, ordem texto > visual > bento > h3 > lista > fechamento.
   Em desktop com motion habilitada, "visual" vira uma célula que atravessa as
   5 linhas da coluna direita (ver bloco @media abaixo). */
.s05-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "text" "visual" "bento" "h3" "list" "closing";
	row-gap: 3rem;
}
.s05-text { grid-area: text; }
.s05-visual { grid-area: visual; }
.s05-bento { grid-area: bento; }
.s05-h3 { grid-area: h3; }
.s05-list { grid-area: list; }
.s05-closing { grid-area: closing; }

.s05-lead-gap { margin-top: 1.25rem; }

/* ── Mockup: esqueleto do celular ──────────────────────────────────────── */
.s05-phone-wrap {
	width: 100%;
	max-width: 280px;
	margin-inline: auto;
}
.s05-phone { width: 100%; }
.s05-screen { position: relative; }
.s05-track {
	position: relative;
	padding: 22px 16px 32px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	will-change: transform;
}

.s05-block { display: flex; flex-direction: column; gap: 8px; }
.s05-lp-label {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	transition: color 250ms var(--ease-out-expo);
}
.s05-block.is-active .s05-lp-label { color: var(--turquoise); }
.s05-block.is-active {
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px var(--turquoise);
	background: rgba(64, 232, 208, 0.08);
	padding: 10px 8px;
	margin: -10px -8px;
	transition: box-shadow 250ms var(--ease-out-expo), background-color 250ms var(--ease-out-expo);
}

/* — Header genérico da LP dentro da tela — */
.s05-block--head {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.s05-lp-logo {
	width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
	background: var(--gradient-turquoise-glow);
}
.s05-lp-navdots { display: flex; gap: 5px; margin-left: 6px; }
.s05-lp-navdots i { display: block; width: 14px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.s05-lp-navcta { margin-left: auto; width: 30px; height: 10px; border-radius: 9999px; background: var(--turquoise); }

/* — Apresentação — */
.s05-lp-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--gradient-turquoise-glow);
}
.s05-lp-line { color: #fff; }
.s05-lp-cta { width: 64px; height: 12px; border-radius: 9999px; background: var(--turquoise); margin-top: 2px; }

/* — Soluções: 3 cards — */
.s05-lp-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.s05-lp-cards3 span {
	aspect-ratio: 1 / 1; border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* — Produtos: 2 colunas — */
.s05-lp-cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.s05-lp-cols2 span {
	aspect-ratio: 4 / 3; border-radius: 8px;
	background: linear-gradient(135deg, rgba(2, 115, 104, 0.45), rgba(64, 232, 208, 0.3));
}

/* — Depoimento — */
.s05-lp-quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.6rem;
	line-height: 0.6;
	color: var(--turquoise);
}

/* — Galeria: grid 3x2 — */
.s05-lp-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.s05-lp-grid6 span { aspect-ratio: 1 / 1; border-radius: 6px; }
.s05-lp-grid6 span:nth-child(odd) { background: linear-gradient(135deg, var(--dark-teal-deep, #02262A), var(--turquoise)); }
.s05-lp-grid6 span:nth-child(even) { background: linear-gradient(135deg, var(--brand), var(--turquoise)); }

/* — Contato: formulário — */
.s05-lp-field {
	height: 14px; border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.s05-lp-field--area { height: 26px; }
.s05-lp-submit { width: 70px; height: 14px; border-radius: 9999px; background: var(--turquoise); margin-top: 2px; }

/* — Botão flutuante do WhatsApp — */
.s05-lp-wa {
	position: absolute;
	right: 12px;
	bottom: 16px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	z-index: 6;
	transition: box-shadow 250ms var(--ease-out-expo);
}
.s05-lp-wa i, .s05-lp-wa svg { width: 16px; height: 16px; color: #fff; }
.s05-lp-wa.is-active { box-shadow: 0 0 0 4px rgba(64, 232, 208, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35); }

/* ── Bento de 7 entregáveis ───────────────────────────────────────────── */
.s05-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
}
.s05-bento-card {
	padding: 1.35rem 1.4rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	gap: 0.9rem;
	transition: border-color 250ms var(--ease-out-expo), background-color 250ms var(--ease-out-expo);
}
.s05-bento-card:hover,
.s05-bento-card.is-active {
	border-color: rgba(64, 232, 208, 0.5);
	background: rgba(64, 232, 208, 0.06);
}
.s05-bento-icon { width: 22px; height: 22px; color: var(--turquoise); flex-shrink: 0; }
.s05-bento-title {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: #fff;
}

/* ── H3, lista de diferenciais e fechamento ──────────────────────────── */
.s05-h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
}
.s05-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 2rem;
}
@media (min-width: 640px) {
	.s05-list { grid-template-columns: 1fr 1fr; }
}
.s05-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}
.s05-closing {
	margin: 0;
	max-width: 40ch;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
}

/* ── Desktop com motion: 2 colunas, mockup sticky com scrub ──────────────
   Só ativa quando a largura permite (>=1024px) E o visitante não pediu
   motion reduzida — nas outras condições a regra base acima já entrega o
   layout de coluna única com o celular estático no topo, como pede o
   contrato (§ pontos de atenção da seção 05). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.s05-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 4.5rem;
		row-gap: 0;
		grid-template-areas:
			"visual text"
			"visual bento"
			"h3 h3"
			"list list"
			"closing closing";
	}
	.s05-text { margin-bottom: 3.5rem; }
	.s05-bento { margin-bottom: 0; }
	.s05-h3 { margin-top: 5rem; margin-bottom: 2rem; }
	.s05-list { margin-bottom: 2.5rem; }
	.s05-closing { max-width: none; }

	/* O sticky fica no filho: assim o celular é contido pela célula (linhas
	   text + bento) e não escorrega sobre o h3/lista, que agora ocupam a
	   largura toda. */
	.s05-visual {
		align-self: stretch;
		position: relative;
	}
	.s05-phone-wrap {
		position: sticky;
		top: 5.5rem;
		max-width: 320px;
		margin-inline: 0;
	}
	.s05-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.s05-bento-card--wide { grid-column: span 2; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	.s05-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.s05-bento-card--wide { grid-column: span 2; }
}

/* ── Motion reduzida: estados finais visíveis, sem transições de destaque ── */
@media (prefers-reduced-motion: reduce) {
	.s05-lp-wa,
	.s05-block,
	.s05-lp-label,
	.s05-bento-card {
		transition: none;
	}
}

/* ── Tema claro dentro do mockup (pedido do Douglas): tela branca, texto
   escuro, acentos em brand/turquoise. Sobrescreve as regras escuras acima. ── */
.s05-screen.ess-phone-screen { background: #F7F8F8; }
.s05-lp-label { color: #7A7A7A; }
.s05-block.is-active .s05-lp-label { color: var(--brand); }
.s05-block.is-active {
	box-shadow: inset 0 0 0 1px var(--brand);
	background: rgba(2, 115, 104, 0.06);
}
.s05-block--head { border-bottom-color: rgba(26, 26, 26, 0.08); }
.s05-lp-navdots i { background: rgba(26, 26, 26, 0.18); }
.s05-lp-navcta,
.s05-lp-cta,
.s05-lp-submit { background: var(--brand); }
.s05-lp-line { color: var(--deep-black); }
.s05-screen .ess-skel { opacity: 0.14; }
.s05-lp-cards3 span {
	background: #FFFFFF;
	border: 1px solid rgba(26, 26, 26, 0.08);
	box-shadow: 0 2px 6px rgba(26, 26, 26, 0.05);
}
.s05-lp-cols2 span { background: linear-gradient(135deg, rgba(2, 115, 104, 0.35), rgba(64, 232, 208, 0.45)); }
.s05-lp-quote { color: var(--brand); }
.s05-lp-field {
	background: #FFFFFF;
	border: 1px solid rgba(26, 26, 26, 0.12);
}
.s05-lp-wa { box-shadow: 0 6px 16px rgba(26, 26, 26, 0.18); }
.s05-lp-wa.is-active { box-shadow: 0 0 0 4px rgba(2, 115, 104, 0.25), 0 6px 16px rgba(26, 26, 26, 0.18); }


/* ═══ 06-bio.css ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   06 · Personalização da BIO: fundo deep-black (.ess-dark, v2 identidade BRIIN).
   Texto à esquerda + mockup de perfil Instagram à direita, com estados
   Antes/Depois sobrepostos (cross-fade) controlados por scroll e toggle.
   O mockup de perfil é um dispositivo e continua com card branco sobre o
   fundo escuro (mesmo raciocínio do card de chat no hero da base).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sub abaixo do H2 ──────────────────────────────────────────────────── */
.s06-sub {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
}

/* ── Três cards escuros com ícone (mesma receita de .glass do engine) ──── */
.s06-list {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.s06-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1.1rem 1.25rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	transition: border-color 250ms var(--ease-out-expo);
}
.s06-item:hover {
	border-color: rgba(64, 232, 208, 0.35);
}
.s06-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: rgba(64, 232, 208, 0.12);
	color: var(--turquoise);
}
.s06-item-icon i {
	width: 20px;
	height: 20px;
}
.s06-item p {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
	padding-top: 0.35rem;
}

/* ── Fechamento em itálico ─────────────────────────────────────────────── */
.s06-closing {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.9);
	max-width: 42ch;
	text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════════
   Mockup de perfil Instagram
   ══════════════════════════════════════════════════════════════════════════ */
.s06-mockup-col {
	width: 100%;
}
.s06-profile-wrap {
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.s06-profile {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid rgba(26, 26, 26, 0.08);
	box-shadow: var(--shadow-elevated);
}

.s06-profile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Avatar: duas camadas sobrepostas na mesma célula de grid, sem mover layout */
.s06-avatar-slot {
	position: relative;
	display: grid;
	width: 88px;
	height: 88px;
	flex-shrink: 0;
}
.s06-avatar {
	grid-area: 1 / 1;
	width: 88px;
	height: 88px;
	transition: opacity 600ms var(--ease-out-expo);
}
.s06-avatar-circle {
	width: 88px;
	height: 88px;
}
.s06-avatar-face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(26, 26, 26, 0.3);
}
.s06-avatar-face i {
	width: 38px;
	height: 38px;
}
.s06-avatar--before {
	opacity: 1;
}
.s06-avatar--before .s06-avatar-circle {
	filter: blur(3px) grayscale(1);
}
.s06-avatar--after {
	position: relative;
	opacity: 0;
	border-radius: 50%;
}
.s06-avatar-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.s06-avatar-ring-track {
	fill: none;
	stroke: rgba(26, 26, 26, 0.08);
	stroke-width: 4;
}
.s06-avatar-ring-draw {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 289;
	stroke-dashoffset: 289;
	transition: stroke-dashoffset 900ms var(--ease-out-expo);
}
.s06-avatar--after .s06-avatar-face {
	/* width/height:auto obrigatório: sem isto, o width/height:100% herdado da
	   regra base vence sobre o inset e a caixa "estoura" para 88x88 na posição
	   (6,6), cobrindo com o fundo branco boa parte do anel atrás dela. */
	position: absolute;
	inset: 6px;
	width: auto;
	height: auto;
	border-radius: 50%;
	background: #fff;
}

/* Estado ativo: JS alterna esta classe no card inteiro */
.s06-profile.s06-is-depois .s06-avatar--before {
	opacity: 0;
}
.s06-profile.s06-is-depois .s06-avatar--after {
	opacity: 1;
}
.s06-profile.s06-is-depois .s06-avatar-ring-draw {
	stroke-dashoffset: 0;
}

/* Publicações · seguidores · seguindo (sempre skeleton, nenhum dado real):
   Largura fixa em vez de .ess-skel--wNN: percentuais de largura resolvem
   como flex-basis num flex row e estourariam a linha. */
.s06-stats {
	display: flex;
	gap: 0.9rem;
	flex: 1;
	justify-content: flex-end;
}
.s06-stat {
	flex: 0 0 32px;
	width: 32px;
}

/* Nome */
.s06-name {
	height: 12px;
}

/* Bio: duas camadas sobrepostas */
.s06-bio-stage {
	position: relative;
	display: grid;
}
.s06-bio-lines {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: opacity 600ms var(--ease-out-expo);
}
.s06-bio-lines--before {
	opacity: 1;
}
.s06-bio-lines--after {
	opacity: 0;
}
.s06-bio-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--deep-black);
}
.s06-profile.s06-is-depois .s06-bio-lines--before {
	opacity: 0;
}
.s06-profile.s06-is-depois .s06-bio-lines--after {
	opacity: 1;
}

/* Botão de link: duas camadas sobrepostas, mesmo espaço */
.s06-link-stage {
	position: relative;
	display: grid;
}
.s06-link-btn {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	height: 40px;
	border-radius: 9999px;
	font-family: var(--font-body);
	font-size: 13px;
	transition: opacity 600ms var(--ease-out-expo), background-color 250ms var(--ease-out-expo);
}
.s06-link-btn i {
	width: 14px;
	height: 14px;
}
.s06-link-btn--before {
	opacity: 1;
	background: rgba(26, 26, 26, 0.05);
	border: 1px solid rgba(26, 26, 26, 0.12);
	color: #8A8A8A;
	font-style: italic;
	font-weight: 400;
}
.s06-link-btn--after {
	opacity: 0;
	background: var(--turquoise);
	color: var(--dark-teal);
	font-weight: 600;
}
.s06-profile.s06-is-depois .s06-link-btn--before {
	opacity: 0;
}
.s06-profile.s06-is-depois .s06-link-btn--after {
	opacity: 1;
}

/* ── Toggle manual Antes | Depois (estilo do engine sobre escuro) ───────── */
.s06-toggle {
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.3rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 9999px;
}
.s06-toggle-btn {
	min-width: 88px;
	min-height: 44px;
	padding: 0 1.25rem;
	border-radius: 9999px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	transition: background-color 250ms var(--ease-out-expo), color 250ms var(--ease-out-expo);
}
.s06-toggle-btn[aria-pressed="true"] {
	background: var(--turquoise);
	color: var(--dark-teal);
}
.s06-toggle-btn:hover {
	color: var(--turquoise);
}
.s06-toggle-btn[aria-pressed="true"]:hover {
	color: var(--dark-teal);
}

/* ── Legenda ───────────────────────────────────────────────────────────── */
.s06-caption {
	font-family: var(--font-body);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

@media (max-width: 640px) {
	.s06-item {
		padding: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s06-avatar,
	.s06-avatar-ring-draw,
	.s06-bio-lines,
	.s06-link-btn,
	.s06-item,
	.s06-toggle-btn {
		transition: none;
	}
}


/* ═══ 07-mian.css ═══ */
/* ── 07 · MIAN (Manual de Inteligência Artificial para Negócios) ─────────
   Fundo .ess-teal. Título full-width centralizado; abaixo, grid com o
   mockup do manual + órbita de logos de IA (esquerda) e quatro cards
   (direita). Prefixo s07- em tudo que é próprio desta seção. */

/* H2 no tamanho de seção do contrato (maior que o .section-title padrão do
   engine, que é clamp(2rem,4.2vw,3.6rem)). */
.s07-title {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
}

/* Statement "Mas ele não é um manual pronto." */
.s07-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.2;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   Cards
   ══════════════════════════════════════════════════════════════════════ */
.s07-card {
  padding: 1.75rem 1.5rem;
  transition: border-color 250ms var(--ease-out-expo);
}
.s07-card:hover {
  border-color: rgba(64, 232, 208, 0.5);
}
.s07-card-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--turquoise);
  margin-bottom: 1rem;
}
.s07-card-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
/* Card 4: número "30" em contador, acima do texto (que não repete o número). */
.s07-card-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--turquoise);
  margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Mockup do manual (.ess-doc) + órbita de logos de IA
   ══════════════════════════════════════════════════════════════════════ */

/* Área quadrada que hospeda a órbita (fluida, cresce até 480px) e o
   manual (centralizados um sobre o outro). O raio da órbita nunca é um
   valor fixo em px: é sempre 48% da largura desta área (ver .s07-orbit-item),
   então acompanha o tamanho da coluna em qualquer breakpoint sem nunca
   estourar a largura disponível (ex.: coluna mais estreita perto de 1024px).
   O manual (.s07-doc-base) é dimensionado para o raio efetivo nunca ficar
   menor que a metade da diagonal da capa: garante que os 6 logos completem
   a volta sem passar atrás do manual (ver comentário em .s07-doc-base). */
.s07-doc-area {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
}
@media (max-width: 767px) {
  .s07-doc-area {
    max-width: 300px;
  }
}

/* Órbita: gira 360° em 40s linear. Os filhos ficam posicionados via
   percentual da própria órbita (técnica do "ponteiro de relógio"), então
   o raio escala automaticamente com o tamanho de .s07-doc-area. */
.s07-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: s07-orbit-spin 40s linear infinite;
}
@keyframes s07-orbit-spin {
  to { transform: rotate(360deg); }
}

/* Spoke: linha de 48% da largura da órbita partindo do centro; a rotação
   (estática, um ângulo fixo por logo) só define a direção do spoke. */
.s07-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  height: 0;
  transform-origin: 0 0;
  transform: rotate(var(--s07-angle));
}
/* Posicionador: 48px fixos na ponta do spoke, com rotação estática que
   cancela o ângulo do item acima (o círculo nasce "em pé"). */
.s07-orbit-pos {
  position: absolute;
  top: 0;
  left: 100%;
  width: 48px;
  height: 48px;
  transform: translate(-24px, -24px) rotate(calc(-1 * var(--s07-angle)));
}
/* Círculo glass com o logo: anima cancelando a rotação contínua de
   .s07-orbit (mesma duração, sentido contrário) para o logo nunca girar
   de cabeça para baixo enquanto orbita. */
.s07-orbit-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  animation: s07-orbit-counter 40s linear infinite;
}
@keyframes s07-orbit-counter {
  to { transform: rotate(-360deg); }
}
.s07-orbit-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Manual: centralizado dentro de .s07-doc-area, com leve 3D fixo
   (rotateY/rotateX) na "pilha" de páginas. O data-tilt (engine) fica só
   no .ess-doc filho, que nasce sem rotação própria (0,0): assim o hover
   soma um tilt sutil por cima da inclinação estática e, ao sair do hover,
   o engine zera o filho de volta para rotateX:0/rotateY:0, retornando
   exatamente à inclinação estática herdada da pilha (nunca "achata" o
   manual).
   Largura fixada em 230px (desktop) em vez dos 300px do esqueleto de
   referência do contrato: com o raio real da órbita a 480px de container
   (~230px), uma capa 3:4 de 300px teria meia diagonal de 250px, maior que
   o raio, e os 6 logos passariam atrás dela em vez de contorná-la. 230px
   deixa meia diagonal ~192px, com folga para os círculos de 48px da
   órbita completarem a volta sempre visíveis à frente/ao redor da capa. */
.s07-doc-base {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 230px;
  height: fit-content;
  perspective: 1200px;
}
@media (max-width: 767px) {
  .s07-doc-base {
    width: 140px;
  }
}
.s07-doc-stack {
  position: relative;
  transform: rotateY(-10deg) rotateX(4deg);
  transform-style: preserve-3d;
}
/* Duas páginas deslocadas atrás da capa */
.s07-doc-stack::before,
.s07-doc-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  border-radius: 14px;
}
.s07-doc-stack::before {
  transform: translate(8px, 8px);
  opacity: 0.5;
}
.s07-doc-stack::after {
  transform: translate(16px, 16px);
  opacity: 0.25;
}
.ess-doc.s07-doc-card {
  position: relative;
  z-index: 1;
}

/* Capa: monograma sobre a faixa turquoise (::before do .ess-doc-cover). */
.s07-doc-mono {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: 2;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
}
.s07-doc-body {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}
.s07-doc-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
}
.s07-doc-caption {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  color: #6B6B6B;
}
.s07-doc-personalized {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: #6B6B6B;
}
/* Card menor no mobile (140px, ver .s07-doc-base) para a órbita conseguir
   contornar a capa sem passar por cima do título: reduz o tamanho de
   "MIAN" (não estoura a largura) e aperta o respiro vertical do miolo
   (senão a linha "Personalizado para o seu negócio" vaza pelo rodapé,
   que o overflow:hidden do .ess-doc corta ao meio da letra). */
@media (max-width: 767px) {
  .s07-doc-title {
    font-size: 2rem;
    margin-bottom: 0.3rem;
  }
  .s07-doc-body {
    padding: 1.1rem 1rem 1rem;
  }
  .s07-doc-caption {
    margin-bottom: 0.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Motion reduzida. O reset global (`*`, base.css bloco 9) já derruba a
   duração das animations/transitions para 0.01ms; isto documenta a
   intenção explícita para a órbita desta seção (contrato §6).
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .s07-orbit,
  .s07-orbit-face,
  .s07-card {
    animation: none;
    transition: none;
  }
}


/* ═══ 08-solucao.css ═══ */
/* ═══ 08 · Solução completa ═══════════════════════════════════════════════
   Foto dupla (Douglas + Pérola) na moldura padrão do engine (turquoise,
   fundo escuro), texto ao lado, e dois cards de pessoa escuros (fotos com
   duotone teal que sai no hover). Seção .ess-dark. Prefixo .s08-.
   ────────────────────────────────────────────────────────────────────────── */

/* .section-title (base.css) é menor que o H2 de seção do contrato (§3):
   redeclaramos só o tamanho aqui, mesma família/peso do engine. */
.s08-solucao .section-title {
	font-size: clamp(2.2rem, 4.8vw, 4.2rem);
}

/* Lead de abertura em destaque: Inter 500, branco (as duas leads
   seguintes usam a .lead padrão do engine, cor white/70). */
.s08-lead-strong {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #fff;
	max-width: 60ch;
}

/* ── Foto dupla ────────────────────────────────────────────────────────────
   .portrait-frame (base.css) já é feito para fundo escuro (borda turquoise
   sólida, fundo dark-teal, sombra-glow): não redeclaramos borda/fundo aqui,
   só o encaixe da imagem e o aspect-ratio no mobile. */
.s08-portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
@media (max-width: 1023px) {
	.s08-solucao .portrait-frame.s08-portrait {
		aspect-ratio: 4 / 5;
		max-width: 520px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   Chips-botão sobre a foto dupla (um por pessoa)
   ══════════════════════════════════════════════════════════════════════ */
.s08-photo { position: relative; }
@media (max-width: 1023px) { .s08-photo { max-width: 520px; margin-inline: auto; } }
.s08-chip {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(3, 58, 64, 0.62);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #fff;
	text-decoration: none;
	transition: border-color 250ms var(--ease-out-expo), background-color 250ms var(--ease-out-expo), transform 250ms var(--ease-out-expo);
}
/* Posições marcadas pelo Douglas: o dele sai pela borda esquerda a ~70% da
   altura; o da Pérola sai pela borda direita a ~32%. */
.s08-chip--douglas { left: -3rem; top: 70%; }
.s08-chip--perola { right: -4rem; top: 32%; }
@media (max-width: 1023px) {
	.s08-chip--douglas { left: -0.75rem; }
	.s08-chip--perola { right: -0.75rem; }
}
.s08-chip:hover,
.s08-chip:focus-visible {
	border-color: rgba(64, 232, 208, 0.6);
	background: rgba(3, 58, 64, 0.85);
	transform: translateY(-2px);
}
.s08-chip:focus-visible {
	outline: 2px solid var(--turquoise);
	outline-offset: 3px;
}
.s08-chip-name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.1;
}
.s08-chip-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--turquoise);
}
.s08-chip-cta svg { width: 14px; height: 14px; transition: transform 250ms var(--ease-out-expo); }
.s08-chip:hover .s08-chip-cta svg { transform: translate(2px, -2px); }
/* Legenda dentro da foto, colada na base, com degradê para leitura */
.s08-portrait { position: relative; }
.s08-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3; /* .portrait-img do engine está em z 2 */
	margin: 0;
	padding: 3.5rem 1.25rem 1.1rem;
	text-align: center;
	color: var(--turquoise);
	background: linear-gradient(180deg, rgba(3, 58, 64, 0) 0%, rgba(2, 20, 22, 0.78) 100%);
	pointer-events: none;
}

@media (max-width: 639px) {
	.s08-chip {
		left: 0.75rem;
		right: 0.75rem;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0.7rem 0.9rem;
	}
	.s08-chip--douglas { left: 0.75rem; right: 0.75rem; top: auto; bottom: 3.6rem; }
	.s08-chip--perola { left: 0.75rem; right: 0.75rem; top: auto; bottom: 7rem; }
	.s08-caption { padding: 2.5rem 1rem 0.9rem; font-size: 0.65rem; }
	.s08-chip-name { font-size: 1.05rem; }
	.s08-chip-cta { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
	.s08-chip, .s08-chip-cta svg { transition: none; }
}


/* ═══ 09-semanas.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   09 · Sua estrutura pronta em 4 semanas
   Prefixo .s09-*: título com numeral animado (data-counter, engine cobre)
   + timeline de 4 passos. Desktop (>=1024px): trilho horizontal (grid de
   4 colunas) com linha de progresso que enche em turquoise via scrub (ver
   assets/js/09-semanas.js). Mobile (<1024px, mobile-first abaixo): trilho
   vertical à esquerda com pontos, sem scroll horizontal. Tailwind cuida do
   container/spacing/grid; aqui só a geometria da timeline, tipografia fina
   e os estados is-active.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Título ────────────────────────────────────────────────────────────── */
#como-funciona .s09-big {
  white-space: nowrap;
}
/* Largura fixa em ch (não depende de o font-feature tabular-nums existir
   na Cormorant Garamond) — o numeral 0→4 nunca empurra "semanas" ao lado. */
#como-funciona .s09-counter {
  display: inline-block;
  min-width: 1.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Timeline: contêiner + trilho de progresso ────────────────────────────
   Mobile-first: trilho vertical à esquerda (2px, pontos de 12px por passo).
   .s09-track é o rastro apagado; .s09-track-fill enche em turquoise via a
   custom property --s09-p (0 a 1), escrita pelo JS num único tween com
   scrub (assets/js/09-semanas.js). Sob prefers-reduced-motion, --s09-p é
   fixado em 1 direto no CSS (ver bloco no fim deste arquivo). */
#como-funciona .s09-timeline {
  position: relative;
  padding-left: 2.75rem;
}
#como-funciona .s09-track {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0.4375rem;
  width: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  overflow: hidden;
}
#como-funciona .s09-track-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--turquoise);
  transform-origin: top center;
  transform: scaleY(var(--s09-p, 0));
}

#como-funciona .s09-steps {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Card do passo: só moldura + posicionamento. O conteúdo visível vive em
   .s09-step-body (position:relative + z-index acima do numeral de fundo,
   que é absoluto e, sem isso, pintaria por cima do texto normal do fluxo:
   mesmo padrão de .ess-eyebrow-num usado em 04-o-que-e.html). */
#como-funciona .s09-step {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 300ms var(--ease-out-expo);
}
#como-funciona .s09-step.is-active {
  border-color: var(--turquoise);
}

#como-funciona .s09-dot {
  position: absolute;
  top: 1.9rem;
  left: -2.3125rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid var(--deep-black);
  transition: background-color 300ms var(--ease-out-expo);
}
#como-funciona .s09-step.is-active .s09-dot {
  background: var(--turquoise);
}

#como-funciona .s09-num {
  position: absolute;
  top: -0.75rem;
  right: 0.75rem;
  z-index: 0;
  transition: color 300ms var(--ease-out-expo);
}
#como-funciona .s09-step.is-active .s09-num {
  color: rgba(64, 232, 208, 0.35);
}

#como-funciona .s09-step-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#como-funciona .s09-step-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
#como-funciona .s09-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 300ms var(--ease-out-expo);
}
#como-funciona .s09-icon i,
#como-funciona .s09-icon svg {
  width: 20px;
  height: 20px;
}
#como-funciona .s09-step.is-active .s09-icon {
  color: var(--turquoise);
}

#como-funciona .s09-week {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 300ms var(--ease-out-expo);
}
#como-funciona .s09-step.is-active .s09-week {
  color: var(--turquoise);
}

#como-funciona .s09-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  transition: color 300ms var(--ease-out-expo);
}
#como-funciona .s09-step.is-active .s09-text {
  color: rgba(255, 255, 255, 0.9);
}

/* ── Nota ──────────────────────────────────────────────────────────────── */
#como-funciona .s09-note {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
/* Ícone neutro de propósito: turquoise é reservado a CTA/preço/check/badge/
   linha de progresso (contrato §3) — a nota não entra nessa lista. */
#como-funciona .s09-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.5);
}
#como-funciona .s09-note-icon i,
#como-funciona .s09-note-icon svg {
  width: 18px;
  height: 18px;
}

/* ── Desktop (>=1024px): trilho horizontal, grid de 4 colunas ─────────────── */
@media (min-width: 1024px) {
  #como-funciona .s09-timeline {
    padding-left: 0;
    padding-top: 2.75rem;
  }
  #como-funciona .s09-track {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
  }
  #como-funciona .s09-track-fill {
    transform-origin: left center;
    transform: scaleX(var(--s09-p, 0));
  }
  #como-funciona .s09-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    align-items: stretch;
  }
  #como-funciona .s09-step {
    padding: 2rem 1.75rem;
  }
  #como-funciona .s09-dot {
    display: none;
  }
  #como-funciona .s09-num {
    top: -1.35rem;
    right: 1.25rem;
  }
}

/* ── Motion reduzida: linha cheia, todos os passos já ativos, sem transição ──
   Funciona mesmo se o JS não rodar (ex.: CDN do GSAP fora do ar): o estado
   final correto vem só do CSS, sem depender de is-active via JS. */
@media (prefers-reduced-motion: reduce) {
  #como-funciona .s09-timeline {
    --s09-p: 1;
  }
  #como-funciona .s09-track-fill,
  #como-funciona .s09-step,
  #como-funciona .s09-dot,
  #como-funciona .s09-num,
  #como-funciona .s09-icon,
  #como-funciona .s09-week,
  #como-funciona .s09-text {
    transition: none;
  }
  #como-funciona .s09-step {
    border-color: var(--turquoise);
  }
  #como-funciona .s09-dot {
    background: var(--turquoise);
  }
  #como-funciona .s09-num {
    color: rgba(64, 232, 208, 0.35);
  }
  #como-funciona .s09-icon {
    color: var(--turquoise);
  }
  #como-funciona .s09-week {
    color: var(--turquoise);
  }
  #como-funciona .s09-text {
    color: rgba(255, 255, 255, 0.9);
  }
}


/* ═══ 10-investimento.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   10 · Investimento — fundo .ess-light (off-white), único bloco claro da
   página. Esquerda: overline + H2 e, abaixo, o pitch de apoio. Direita:
   um painel branco único com o que está incluso (lista), o seletor de
   forma de pagamento (rádio segmentado, cartão como padrão), o valor
   correspondente e o CTA. Preço em gold (Cormorant), padrão .s09-price.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Grid: mobile head > panel > pitch; desktop head/pitch à esquerda ──── */
.s10-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "head" "panel" "pitch";
	row-gap: 3rem;
	align-items: start;
}
.s10-head { grid-area: head; }
.s10-pitch { grid-area: pitch; }
.s10-panel-wrap { grid-area: panel; min-width: 0; }

@media (min-width: 1024px) {
	.s10-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "head panel" "pitch panel";
		grid-template-rows: auto 1fr;
		column-gap: 5rem;
		row-gap: 2.5rem;
	}
}

/* ── Pitch de apoio ──────────────────────────────────────────────────────── */
.s10-pitch-lead {
	margin: 0;
	max-width: 46ch;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--deep-black);
}
.s10-pitch-text {
	margin: 1.25rem 0 0;
	max-width: 48ch;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #4A4A4A;
}
.s10-pitch-quote {
	margin: 2rem 0 0;
	max-width: 30ch;
	padding-left: 1.25rem;
	border-left: 2px solid var(--turquoise);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	line-height: 1.3;
	color: var(--deep-black);
}

/* ── Painel ─────────────────────────────────────────────────────────────── */
.s10-panel {
	background: var(--white);
	border: 1px solid rgba(26, 26, 26, 0.1);
	border-radius: 16px;
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
}
@media (min-width: 640px) {
	.s10-panel { padding: 2.25rem; }
}
.s10-panel-overline {
	margin: 0 0 1rem;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand);
}
.s10-divider {
	height: 1px;
	margin: 1.75rem 0;
	background: rgba(26, 26, 26, 0.1);
}

/* ── Lista do que está incluso + monograma como marca d'água ───────────── */
.s10-included { position: relative; }
.s10-mark {
	position: absolute;
	right: 0;
	top: 50%;
	width: clamp(120px, 34%, 190px);
	height: auto;
	transform: translateY(-46%) rotate(-6deg);
	opacity: 0.09;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 479px) {
	.s10-mark { display: none; }
}
.s10-list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.7rem 1.5rem;
}
.s10-list li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--deep-black);
}
.s10-list-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	padding: 4px;
	border-radius: 50%;
	background: rgba(64, 232, 208, 0.18);
	color: var(--brand);
}

/* ── Seletor de forma de pagamento (rádio segmentado) ──────────────────── */
.s10-pay-overline { margin-bottom: 0.75rem; }
.s10-pay {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: 12px;
	background: rgba(26, 26, 26, 0.05);
	border: 1px solid rgba(26, 26, 26, 0.08);
}
/* Indicador que desliza sob o botão ativo (posição/largura via JS) */
.s10-pay-thumb {
	position: absolute;
	top: 0.25rem;
	left: 0;
	height: calc(100% - 0.5rem);
	width: 0;
	border-radius: 9px;
	background: var(--white);
	border: 1.5px solid var(--turquoise);
	box-shadow: 0 4px 14px rgba(3, 58, 64, 0.1);
	transform: translateX(0);
	transition: transform 380ms var(--ease-out-expo), width 380ms var(--ease-out-expo);
	pointer-events: none;
	z-index: 0;
}
.s10-pay-thumb.is-ready { opacity: 1; }
.s10-pay-btn {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.6rem 0.5rem;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: #5A5A5A;
	cursor: pointer;
	transition: color 250ms var(--ease-out-expo);
	-webkit-tap-highlight-color: transparent;
}
.s10-pay-btn:hover { color: var(--deep-black); }
.s10-pay-btn.is-active { color: var(--deep-black); font-weight: 600; }
.s10-pay-btn:focus-visible {
	outline: 2px solid var(--turquoise);
	outline-offset: 2px;
}
.s10-pay-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #7A7A7A;
	transition: color 250ms var(--ease-out-expo);
}
.s10-pay-btn:hover .s10-pay-icon,
.s10-pay-btn.is-active .s10-pay-icon { color: var(--brand); }
.s10-pay-label { white-space: nowrap; }
@media (max-width: 479px) {
	.s10-pay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.s10-pay-ext { display: none; }
	.s10-pay-btn { gap: 0.4rem; padding-inline: 0.35rem; font-size: 0.875rem; }
}

/* Tag de desconto presa ao canto do botão PIX */
.s10-pay-tag {
	position: absolute;
	top: -0.6rem;
	right: -0.3rem;
	padding: 0.2rem 0.5rem;
	border-radius: 9999px;
	background: var(--gradient-gold);
	color: var(--deep-black);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(184, 149, 106, 0.35);
	pointer-events: none;
}

/* ── Valor ──────────────────────────────────────────────────────────────── */
.s10-value {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 1.75rem;
	will-change: transform, opacity;
}
.s10-value-top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 1.75rem;
}
.s10-value-ribbon,
.s10-value-discount { display: none; }
.s10-value.is-featured .s10-value-ribbon { display: inline-block; }
.s10-value.is-discount .s10-value-discount { display: inline-block; }

.s10-ribbon {
	white-space: nowrap;
	background: var(--turquoise);
	color: var(--dark-teal);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
}
.s10-ribbon--discount {
	background: var(--gradient-gold);
	color: var(--deep-black);
	box-shadow: 0 6px 16px rgba(184, 149, 106, 0.3);
}

.s10-price-prefix {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	color: #8A8A8A;
}
.s10-price-prefix:empty { display: none; }
.s10-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.6rem;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--gold);
}
.s10-price-suffix {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: 0;
	color: #6B6B6B;
}
.s10-price-suffix:empty { display: none; }
.s10-condition {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: #4A4A4A;
	margin-top: 0.4rem;
	min-height: 2.9em; /* reserva 2 linhas: a condição do PIX é mais longa */
}

/* ── CTA único ──────────────────────────────────────────────────────────── */
.s10-cta {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 1.5rem;
}

/* ── Nota do desconto ───────────────────────────────────────────────────── */
.s10-footnote {
	margin: 0.9rem 0.25rem 0;
	font-family: var(--font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: #6B6B6B;
}

@media (prefers-reduced-motion: reduce) {
	.s10-pay-thumb, .s10-pay-btn, .s10-pay-icon { transition: none; }
}


/* ═══ 11-cta-final.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   11 · CTA final (v2 · identidade BRIIN)
   Prefixo .s11-*: H2 gigante (data-split="words") numa coluna estreita
   (~14ch) para quebrar em linhas curtas, botão de conversão grande,
   assinatura script e dois orbs turquoise em parallax atrás do texto
   (posição/blur/parallax vêm de .hero-orb + [data-parallax] em
   assets/base.css/.js; aqui só tamanho, offset e o gradiente do glow).

   Desvio do briefing (ver BRIEFING §6, "Seção 11: ... script fade-in
   1,4s"): o preset [data-gsap="fade-in"] citado ali não existe em
   GSAP_PRESETS (assets/base.js só tem fade-up, fade-up-slow, fade-left,
   fade-right, scale-in, blur-in). Usar esse valor deixaria a assinatura
   presa em opacity:0 pra sempre, a regra [data-gsap] do engine zera a
   opacidade de QUALQUER valor, e só os presets cadastrados revertem isso.
   O fade-in da assinatura foi feito em assets/js/11-cta-final.js com
   IntersectionObserver (não ScrollTrigger, ver comentário lá), com a
   mesma defensividade do engine: sem gsap ou com reduced motion, sem
   animação.
   ═══════════════════════════════════════════════════════════════════════ */

#cta-final .s11-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  #cta-final .s11-headline {
    white-space: nowrap;
  }
}
#cta-final .s11-line2 {
  font-style: italic;
}
/* .text-gradient (base.css) usa background-clip:text para o gradiente;
   isso só funciona no texto próprio do elemento. O initSplitText (base.js)
   move o texto pra dentro de spans .split-word (display:inline-block), que
   viram caixas atômicas e não herdam background/background-clip do pai,
   deixando as palavras com -webkit-text-fill-color:transparent sem nenhum
   fundo pra mostrar atrás, ou seja, invisíveis. Redeclarar o mesmo gradiente
   turquoise (#027368 → #40E8D0, igual .text-gradient) em cada .split-word
   resolve. */
#cta-final .s11-line2 .split-word {
  background: linear-gradient(90deg, #027368, #40E8D0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#cta-final .s11-btn {
  min-height: 60px;
  padding: 0 2.75rem;
  font-size: 0.95rem;
}

#cta-final .s11-microcopy {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

#cta-final .s11-script {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

/* Halo turquoise dos dois orbs (equivalente ao utilitário de orb da v1 em
   00-essencial.css, redeclarado aqui com nome de classe próprio da seção:
   --turquoise-glow já existe em :root via aquele arquivo). */
#cta-final .s11-orb {
  background: radial-gradient(circle, var(--turquoise-glow), transparent 70%);
}
#cta-final .s11-orb-a {
  width: 560px;
  height: 560px;
  top: -20%;
  left: -14%;
}
#cta-final .s11-orb-b {
  width: 420px;
  height: 420px;
  bottom: -18%;
  right: -10%;
}

/* Sticky CTA mobile (<1024px, ver _foot.html) fica fixo na base da tela:
   folga extra abaixo do conteúdo pra botão/assinatura não ficarem
   escondidos atrás dele. */
@media (max-width: 1023px) {
  #cta-final {
    padding-bottom: 11rem;
  }
}


/* ═══ 12-footer.css ═══ */
/* ── 12 · Rodapé ───────────────────────────────────────────────────────────
   Sem CSS próprio necessário: layout, cores e hover vêm de utilities
   Tailwind + .link-underline / .gradient-bar do engine (base.css). Arquivo
   mantido por convenção (1 CSS por seção numerada). */