/* Site Cinematográfico · © 2026 Labrego IA · LBG-SC-2026-v1 */

/* ── Tokens: ajuste pela identidade visual do cliente ───────────────────── */
:root {
  --fundo: #0D0D0D;          /* MESMA cor usada nos prompts das imagens */
  --fundo-2: #151418;
  --texto: #FFFFFF;
  --texto-suave: #A9A7B4;
  --acento: #7F00FF;         /* roxo Znexo */
  --acento-claro: #A35CFF;   /* roxo legível sobre preto (rótulos, números) */
  --acento-texto: #FFFFFF;   /* texto sobre o acento */
  --sinal: #39FF14;          /* verde neon: só no momento da venda (WhatsApp) */
  --linha: rgb(255 255 255 / 0.10);
  --painel: rgb(17 16 22 / 0.64);
  --mistura: lighten;        /* tema escuro: lighten | tema claro: multiply */

  --fonte-titulo: "Archivo", "Arial Black", system-ui, sans-serif;
  --fonte-texto: "Geist", system-ui, sans-serif;

  --raio: 14px;
  --gutter: clamp(16px, 4vw, 56px);
  --largura: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
/* Tema claro (marcas de luz, saúde, casamento etc.): troque os tokens assim
:root {
  --fundo: #f4efe7; --fundo-2: #ebe4d8; --texto: #1d1a16; --texto-suave: #5d564c;
  --linha: rgb(29 26 22 / .12); --painel: rgb(244 239 231 / .7); --mistura: multiply;
}
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 clamp(16px, 1.05vw, 18px)/1.65 var(--fonte-texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Grão de filme: tira o aspecto "liso de IA" */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao 1s steps(4) infinite;
}
@keyframes grao { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; font-stretch: 118%; line-height: 1.04; margin: 0 0 .5em; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(32px, 4.8vw, 74px); }
h2 { font-size: clamp(27px, 3.1vw, 48px); }
h3 { font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; font-stretch: 100%; letter-spacing: 0; line-height: 1.25; }
p { margin: 0 0 1em; color: var(--texto-suave); text-wrap: pretty; }

/* ── Topo ──────────────────────────────────────────────────────────────── */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), backdrop-filter .4s;
}
.topo.rolou { background: rgb(13 13 13 / .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marca { text-decoration: none; display: flex; align-items: center; }
.marca-logo { height: 30px; width: auto; }
.marca-texto { font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: .02em; }
.menu { display: flex; gap: 28px; align-items: center; font-size: 14px; letter-spacing: .04em; }
.menu a { text-decoration: none; opacity: .8; transition: opacity .3s; }
.menu a:hover { opacity: 1; }
.menu-cta { background: var(--acento); border: 1px solid var(--acento); padding: 9px 16px; border-radius: 999px; opacity: 1 !important; font-weight: 500; }
@media (max-width: 760px) { .menu a:not(.menu-cta) { display: none; } }

/* ── Abertura cinematográfica ──────────────────────────────────────────── */
.cine { position: relative; height: var(--altura, 400vh); }
.cine-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-vinheta {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .45) 100%),
    linear-gradient(to bottom, transparent 70%, var(--fundo) 100%);
}
.momento {
  position: absolute; inset: auto var(--gutter) 12vh; max-width: 640px;
  opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  pointer-events: none;
}
.momento.ativo { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.momento--direita { left: auto; right: var(--gutter); }
.momento--centro { left: 50%; right: auto; transform: translate(-50%, 24px); text-align: center; width: min(640px, calc(100% - 2 * var(--gutter))); }
.momento--centro.ativo { transform: translate(-50%, 0); }
.titulo-abertura { margin-bottom: .3em; }
.apoio { font-size: clamp(16px, 1.3vw, 20px); margin: 0; }
.destaque { font-family: var(--fonte-titulo); font-weight: 600; font-stretch: 115%; letter-spacing: -.02em; font-size: clamp(23px, 2.5vw, 38px); line-height: 1.15; color: var(--texto); margin: 0 0 .6em; }
.destaque:last-child { margin: 0; }
.cine-dica {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .6;
  transition: opacity .5s;
}
.cine-dica span { width: 1px; height: 38px; background: linear-gradient(var(--texto), transparent); animation: dica 2s var(--ease) infinite; }
@keyframes dica { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.cine.andou .cine-dica { opacity: 0; }

/* ── Painéis (todo texto mora num painel) ──────────────────────────────── */
.painel {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(24px, 3.2vw, 48px);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.painel--vidro { background: rgb(13 13 13 / .46); }
.painel > :last-child { margin-bottom: 0; }
.rotulo { display: block; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--acento-claro); margin-bottom: 18px; }

/* ── Seções ────────────────────────────────────────────────────────────── */
.secao {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; padding: 18vh var(--gutter);
  display: grid; align-content: center;
}
.secao-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 560px) 1fr; }
.secao-grade--direita { grid-template-columns: 1fr minmax(0, 560px); }
.secao-grade--direita > .painel { grid-column: 2; }
.secao--larga { gap: 28px; justify-items: center; }
.painel--cabecalho { width: 100%; max-width: var(--largura); }
.cartoes { width: 100%; max-width: var(--largura); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cartao h3 { margin-bottom: .4em; }
.cartao { transition: transform .5s var(--ease), border-color .5s; }
.cartao:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.passos { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: p; display: grid; gap: 22px; }
.passos li { counter-increment: p; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; }
.passos li::before { content: counter(p, decimal-leading-zero); grid-row: span 2; font-family: var(--fonte-titulo); color: var(--acento-claro); font-size: 20px; font-weight: 600; }
.passos strong { font-weight: 600; }
.passos span { color: var(--texto-suave); }

/* ── Arte: imagens fundidas ao fundo (nunca retângulo com borda) ───────── */
.arte {
  position: absolute; z-index: -1; pointer-events: none;
  object-fit: cover; mix-blend-mode: var(--mistura);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.arte--direita, .arte--esquerda { top: 0; bottom: 0; width: 64vw; height: 100%; }
.arte--direita {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 9%, #000 27%, #000 66%, transparent 88%);
          mask-image: linear-gradient(to left, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 9%, #000 27%, #000 66%, transparent 88%);
}
.arte--esquerda {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 9%, #000 27%, #000 66%, transparent 88%);
          mask-image: linear-gradient(to right, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 9%, #000 27%, #000 66%, transparent 88%);
}
.arte--fundo {
  inset: 0; width: 100%; height: 100%; opacity: .5;
  /* closest-side: a elipse zera exatamente na borda, então nunca sobra linha reta */
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: radial-gradient(closest-side, #000 35%, transparent 100%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.arte--suave { opacity: .32; }
/* Parallax leve aplicado pelo app.js */
.arte[data-parallax] { will-change: transform; }

/* ── Contato ───────────────────────────────────────────────────────────── */
.secao--contato { justify-items: center; }
.painel--form { width: 100%; max-width: 760px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.campo { display: grid; gap: 6px; }
.campo--inteiro { grid-column: 1 / -1; }
.campo label { font-size: 13px; letter-spacing: .04em; color: var(--texto-suave); }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: rgb(255 255 255 / .04); border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px 16px; transition: border-color .3s, background .3s; resize: vertical;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acento); background: rgb(255 255 255 / .07); }
.campo.erro input { border-color: #d9776b; }
.pote { position: absolute; left: -9999px; }
.form-status { min-height: 1.4em; margin: 0; font-size: 14px; }
.form-status.ok { color: var(--sinal); }
.form-status.falha { color: #e39a90; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ── Botões ────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--fonte-texto); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--acento-texto); background: var(--acento); border: 0; border-radius: 999px;
  padding: 17px 30px; transition: transform .4s var(--ease), filter .3s;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ── WhatsApp flutuante ────────────────────────────────────────────────── */
.whats {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sinal); color: #0D0D0D; box-shadow: 0 10px 30px rgb(57 255 20 / .18);
  transform: scale(0); transition: transform .5s var(--ease);
}
.whats.visivel { transform: scale(1); }
.whats:hover { transform: scale(1.07); }
.whats svg { width: 30px; height: 30px; }
.whats::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sinal); animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.rodape { padding: 0 var(--gutter) 40px; }
.rodape-painel { max-width: var(--largura); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--texto-suave); padding: 24px 32px; }
.credito { font-size: 12px; opacity: .6; text-decoration: none; letter-spacing: .04em; }
.credito:hover { opacity: 1; }

/* ── Revelar ao rolar ──────────────────────────────────────────────────── */
.revelar { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.revelar.visto { opacity: 1; transform: none; }

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .secao { padding: 14vh var(--gutter); min-height: auto; }
  .secao-grade, .secao-grade--direita { grid-template-columns: 1fr; }
  .secao-grade--direita > .painel { grid-column: 1; }
  .arte--direita, .arte--esquerda { left: 0; right: 0; width: 100%; height: 70%; opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent); }
  .momento, .momento--direita { left: var(--gutter); right: var(--gutter); bottom: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar, .momento:first-of-type { opacity: 1; transform: none; filter: none; }
  .cine { height: 100svh; }
  .momento:not(:first-of-type), .cine-dica { display: none; }
}

/* ── Znexo: componentes próprios ───────────────────────────────────────── */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.acoes--centro { justify-content: center; }
.botao:not(.botao--linha):hover { box-shadow: 0 8px 34px rgb(127 0 255 / .38); }
/* Verde: o pedido de diagnóstico no conteúdo e o WhatsApp. O topo fica no roxo da marca. */
.botao--sinal { background: var(--sinal); color: #0D0D0D; }
.botao--sinal:hover { box-shadow: 0 8px 34px rgb(57 255 20 / .22); }
.botao--linha { background: transparent; color: var(--texto); border: 1px solid rgb(255 255 255 / .22); }
.botao--linha:hover { border-color: var(--acento-claro); }
.momento .rotulo { margin-bottom: 14px; }
.momento .apoio + .acoes, .momento .destaque + .apoio { margin-top: 0; }

/* Problema */
.dores { list-style: none; margin: 8px 0 22px; padding: 0; display: grid; gap: 14px; }
.dores li { position: relative; padding-left: 26px; color: var(--texto-suave); }
.dores li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--acento-claro); }
.fecho { color: var(--texto); font-weight: 500; }

/* Soluções: portfólio em abas */
.painel--cabecalho h2 { max-width: 22ch; }
.portfolio-intro { max-width: 60ch; }
.portfolio { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 28px; min-width: 0; }
.portfolio-abas { display: none; }
.portfolio.com-abas { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.portfolio.com-abas .portfolio-abas { display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.portfolio-abas button {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--linha); margin: 0;
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline; text-align: left; cursor: pointer;
  padding: 13px 10px 13px 0; color: var(--texto-suave); font: 500 15px/1.35 var(--fonte-texto);
  transition: color .3s, padding .4s var(--ease), box-shadow .4s var(--ease);
}
.portfolio-abas button:hover { color: var(--texto); }
.portfolio-abas button[aria-selected="true"] { color: var(--texto); padding-left: 14px; box-shadow: inset 2px 0 0 var(--acento); }
.portfolio-abas button:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.area-num { color: var(--acento-claro); font: 600 12px/1 var(--fonte-texto); letter-spacing: .1em; }
.portfolio-paineis { min-width: 0; display: grid; gap: 48px; }
.portfolio.com-abas .portfolio-paineis { gap: 0; min-height: 380px; }
.area-painel .area-num {
  display: block; font: 600 clamp(56px, 6vw, 88px)/1 var(--fonte-titulo); font-stretch: 120%; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgb(163 92 255 / .55); margin-bottom: 18px;
}
.area-painel h3 { font-size: clamp(22px, 2.1vw, 32px); font-stretch: 112%; letter-spacing: -.02em; margin-bottom: 6px; }
.area-sub { color: var(--acento-claro); margin-bottom: 22px; }
.area-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.area-itens li { position: relative; padding: 13px 0 13px 22px; border-top: 1px solid var(--linha); color: var(--texto-suave); }
.area-itens li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 10px; height: 1px; background: var(--acento-claro); }
.area-painel.entrando { animation: area-entra .6s var(--ease); }
@keyframes area-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .portfolio.com-abas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .portfolio.com-abas .portfolio-abas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border: 0; }
  .portfolio-abas button {
    grid-template-columns: 1fr; justify-items: center; padding: 12px 0; border: 1px solid var(--linha); border-radius: 12px;
  }
  .portfolio-abas button .area-num { font-size: 14px; }
  .portfolio-abas button .area-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .portfolio-abas button[aria-selected="true"] { padding-left: 0; box-shadow: none; border-color: var(--acento); background: rgb(127 0 255 / .22); }
  .portfolio-abas button[aria-selected="true"] .area-num { color: var(--texto); }
  .portfolio.com-abas .portfolio-paineis { min-height: 0; }
  .area-itens { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .area-painel.entrando { animation: none; } }

/* Aplicações */
.cenas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; }
.cenas li { color: var(--texto-suave); padding-left: 18px; border-left: 2px solid rgb(127 0 255 / .55); }
.cenas strong { color: var(--texto); font-weight: 600; display: block; margin-bottom: 2px; }

/* Diferenciais */
.diferenciais { margin: 8px 0 0; display: grid; gap: 4px; }
.diferenciais dt { font-weight: 600; color: var(--texto); margin-top: 14px; }
.diferenciais dt::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sinal); margin-right: 12px; vertical-align: middle; box-shadow: 0 0 10px rgb(57 255 20 / .6); }
.diferenciais dd { margin: 0 0 0 19px; color: var(--texto-suave); }

/* Sobre */
.painel--sobre { width: 100%; max-width: 980px; display: grid; grid-template-columns: 180px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.brasao { width: 100%; height: auto; margin-top: 6px; }
@media (max-width: 760px) { .painel--sobre { grid-template-columns: 1fr; } .brasao { width: 110px; } }

/* FAQ */
.secao--faq { min-height: auto; }
.painel--faq { width: 100%; max-width: 900px; }
.faq { margin-top: 18px; }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 500; color: var(--texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--acento-claro); font-size: 22px; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 20px; max-width: 70ch; }
.faq summary:focus-visible, .botao:focus-visible, .menu a:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }

/* Contato */
.ou { margin: 22px 0 0; font-size: 14px; }

/* Rodapé */
.rodape-logo { height: 22px; width: auto; }

/* Celular: o momento central ocupa a largura útil sem o deslocamento de centralização do desktop */
@media (max-width: 860px) {
  .momento--centro { left: var(--gutter); right: var(--gutter); width: auto; transform: translateY(24px); }
  .momento--centro.ativo { transform: none; }
  .acoes--centro .botao { flex: 1 1 100%; }
}

/* Abertura sem painel: o texto fica direto sobre o vídeo (pedido do cliente).
   A leitura vem da vinheta escura na base e de uma sombra suave no texto. */
.momento .painel--vidro {
  background: none; border: 0; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.momento .titulo-abertura, .momento .destaque { text-shadow: 0 2px 30px rgb(0 0 0 / .75), 0 1px 3px rgb(0 0 0 / .5); }
.momento .apoio { color: rgb(255 255 255 / .82); text-shadow: 0 1px 18px rgb(0 0 0 / .85); max-width: 52ch; }
.momento--centro .apoio { margin-inline: auto; }
.momento .rotulo { text-shadow: 0 1px 12px rgb(0 0 0 / .8); }
.cine-vinheta {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 50%, rgb(0 0 0 / .5) 100%),
    linear-gradient(to top, rgb(13 13 13 / .82) 0%, rgb(13 13 13 / .45) 30%, transparent 58%),
    linear-gradient(to bottom, transparent 75%, var(--fundo) 100%);
}
.momento .botao--linha { background: rgb(13 13 13 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.momento .rotulo { color: rgb(255 255 255 / .88); }
@media (max-width: 860px) {
  .cine-vinheta {
    background:
      radial-gradient(120% 90% at 50% 45%, transparent 50%, rgb(0 0 0 / .5) 100%),
      linear-gradient(to top, rgb(13 13 13 / .9) 0%, rgb(13 13 13 / .6) 38%, transparent 68%),
      linear-gradient(to bottom, transparent 75%, var(--fundo) 100%);
  }
}

/* Oferta: degraus, garantia e turma fundadora */
.painel--oferta { width: 100%; max-width: var(--largura); }
.oferta-promessa { max-width: 62ch; font-size: 1.05em; }
.degraus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 30px; align-items: stretch; }
.degrau { position: relative; display: flex; flex-direction: column; padding: 30px 24px 26px; border: 1px solid var(--linha); border-radius: var(--raio); background: rgb(255 255 255 / .025); }
.degrau h3 { font-size: clamp(20px, 1.6vw, 24px); font-stretch: 112%; letter-spacing: -.015em; margin-bottom: 12px; }
.degrau-preco { margin: 0 0 4px; color: var(--texto-suave); font-size: 15px; }
.degrau-preco strong { color: var(--texto); font: 600 clamp(30px, 2.6vw, 40px)/1 var(--fonte-titulo); font-stretch: 115%; letter-spacing: -.02em; margin-right: 4px; }
.degrau-para { font-size: 14px; margin-bottom: 18px; }
.degrau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.degrau li { position: relative; padding-left: 20px; color: var(--texto-suave); font-size: 15px; line-height: 1.5; }
.degrau li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--acento-claro); }
.degrau-nota { margin: auto 0 0; padding-top: 18px; font-size: 13px; }
.degrau--destaque { border-color: var(--acento); background: rgb(127 0 255 / .09); }
.degrau-selo { position: absolute; top: -11px; left: 22px; padding: 6px 10px; border-radius: 999px; background: var(--acento); color: #fff; font: 600 11px/1 var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; }
.garantia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 48px; padding-top: 28px; border-top: 1px solid var(--linha); }
.garantia h3 { grid-column: 1 / -1; margin: 0; }
.garantia > p { margin: 0; color: var(--texto); font-size: 1.05em; }
.garantia-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.garantia-itens li { position: relative; padding-left: 20px; color: var(--texto-suave); }
.garantia-itens li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sinal); box-shadow: 0 0 10px rgb(57 255 20 / .55); }
.turma { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 30px; padding: 22px 24px; border: 1px dashed rgb(57 255 20 / .38); border-radius: var(--raio); }
.turma p { margin: 0; max-width: 72ch; }
.turma strong { color: var(--texto); }
@media (max-width: 860px) {
  .degraus { grid-template-columns: 1fr; gap: 22px; }
  .garantia { grid-template-columns: 1fr; }
  .turma .botao { width: 100%; }
}

/* Lema da abertura */
.momento .lema { margin: 0 0 .7em; font: 600 clamp(20px, 2vw, 30px)/1.1 var(--fonte-titulo); font-stretch: 115%; letter-spacing: -.01em; color: var(--acento-claro); text-shadow: 0 1px 18px rgb(0 0 0 / .8); }
.momento .titulo-abertura { font-size: clamp(30px, 4.2vw, 64px); }
.titulo-linha { display: block; }
.momento--abertura { max-width: 800px; }
.momento .titulo-abertura { text-wrap: pretty; }

/* Zenni: fluxo do cliente ao número */
.fluxo { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: f; display: grid; gap: 20px; }
.fluxo li { counter-increment: f; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; }
.fluxo li::before { content: counter(f, decimal-leading-zero); grid-row: span 2; font: 600 20px/1.3 var(--fonte-titulo); color: var(--acento-claro); }
.fluxo strong { color: var(--texto); font-weight: 600; }
.fluxo span { color: var(--texto-suave); }
.fluxo-nota { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); color: var(--texto); }

/* Frentes: lista tipográfica, sem cartões */
.frentes { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: fr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 72px); }
.frentes li { counter-increment: fr; display: grid; grid-template-columns: 44px 1fr; align-content: start; padding: 24px 0; border-top: 1px solid var(--linha); }
.frentes li::before { content: counter(fr, decimal-leading-zero); grid-row: span 2; color: var(--acento-claro); font: 600 13px/2 var(--fonte-texto); letter-spacing: .1em; }
.frentes h3 { margin: 0 0 6px; font-size: clamp(19px, 1.6vw, 24px); font-stretch: 112%; letter-spacing: -.015em; }
.frentes p { margin: 0; }
@media (max-width: 760px) { .frentes { grid-template-columns: 1fr; } }
.painel--sobre .diferenciais { margin-top: 18px; }

/* ── Seções com a linguagem da abertura: texto direto sobre a imagem ───── */
.secao { padding: 11vh var(--gutter); }
.secao .painel:not(.painel--faq):not(.painel--form) {
  background: none; border: 0; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.secao .painel:not(.painel--faq):not(.painel--form) h2 { text-shadow: 0 2px 30px rgb(0 0 0 / .7); }
.secao .painel:not(.painel--faq):not(.painel--form) p,
.secao .painel:not(.painel--faq):not(.painel--form) li,
.secao .painel:not(.painel--faq):not(.painel--form) dd { text-shadow: 0 1px 14px rgb(0 0 0 / .85); }
.secao h2 { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.02; }
.secao-grade { grid-template-columns: minmax(0, 620px) 1fr; }
.secao-grade--direita { grid-template-columns: 1fr minmax(0, 620px); }
.arte--direita, .arte--esquerda { width: 70vw; }
.arte--fundo { opacity: .7; }
.arte--suave { opacity: .45; }

/* Título entra como corte de cena; itens entram em sequência */
.revelar h2 { clip-path: inset(-12% -4% 100% -4%); transform: translateY(28px); transition: clip-path 1.1s var(--ease), transform 1.2s var(--ease); }
.revelar.visto h2 { clip-path: inset(-12% -4% -12% -4%); transform: none; }
.revelar li, .revelar dt, .revelar dd, .revelar .fluxo-nota { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.revelar.visto li, .revelar.visto dt, .revelar.visto dd, .revelar.visto .fluxo-nota { opacity: 1; transform: none; }

/* Fechamento cinematográfico */
.cine--fim .momento--centro { bottom: 16vh; }
.cine--fim .titulo-abertura { font-size: clamp(32px, 4.6vw, 70px); }
.cine--fim .rotulo { color: rgb(255 255 255 / .88); }

/* No celular a imagem fica atrás do texto: um véu leve garante a leitura */
@media (max-width: 860px) {
  .secao { padding: 9vh var(--gutter); }
  .secao .painel:not(.painel--faq):not(.painel--form) { background: rgb(13 13 13 / .55); padding: 22px 18px; border-radius: var(--raio); }
  .arte--direita, .arte--esquerda { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .revelar h2, .revelar li, .revelar dt, .revelar dd, .revelar .fluxo-nota { clip-path: none; opacity: 1; transform: none; }
}

/* Cenas 3D: o canvas ocupa o lugar da imagem, que vira reserva sem WebGL */
canvas.arte3d { display: block; }
.secao:not(.tem-3d) canvas.arte3d { visibility: hidden; }
.tem-3d img.arte { visibility: hidden; }
canvas.arte3d.arte--fundo { opacity: .9; }
/* O 3D tem fundo transparente: a cena de fundo dispensa a máscara de borda */
canvas.arte3d.arte--fundo { -webkit-mask-image: none; mask-image: none; }
/* Celular: uma coluna só (corrige a regra de largura das colunas acima) */
@media (max-width: 860px) { .secao-grade, .secao-grade--direita { grid-template-columns: 1fr; } .secao-grade--direita > .painel { grid-column: 1; } }

/* ── Seções presas na tela: mesma imersão de rolagem da abertura ─────────── */
.pin-palco { width: 100%; }
.pin-palco > .painel { margin-inline: auto; }
@media (min-width: 861px) and (min-height: 700px) {
  .pin { height: var(--altura-pin, 220vh); min-height: 0; padding: 0; display: block; overflow: visible; }
  .pin-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-content: center; padding: 0 var(--gutter); }
  .pin .arte:not(.arte3d) { transform: scale(calc(1.02 + var(--p, 0) * .14)) translate3d(calc(var(--p, 0) * -2%), 0, 0); }
  .pin .painel [data-seq] > * { opacity: .14; transform: translateY(16px); transition: opacity .45s var(--ease), transform .55s var(--ease); transition-delay: 0ms !important; }
  .pin .painel [data-seq] > .visivel { opacity: .6; transform: none; }
  .pin .painel [data-seq] > .atual { opacity: 1; }
  .pin .painel [data-seq] > .atual::before { color: var(--sinal); }
  .pin .painel .fluxo-nota { transition-delay: 0ms !important; }
}

/* O Chrome centraliza conteúdo de bloco com align-content: o palco precisa ficar no topo */
@media (min-width: 861px) and (min-height: 700px) { .pin { align-content: normal; } }

/* A rolagem é controlada pelos passos: sem ancoragem automática do navegador */
html { overflow-anchor: none; }

/* Página única por seção: itens já vistos ficam inteiros, o atual ganha o número verde */
@media (min-width: 861px) and (min-height: 700px) {
  .pin .painel [data-seq] > .visivel { opacity: 1; }
}

/* ── Causas e respostas ──────────────────────────────────────────────────── */
.causas { list-style: none; margin: 10px 0 22px; padding: 0; display: grid; gap: 16px; }
.causas li { display: grid; gap: 4px; padding-left: 22px; border-left: 2px solid rgb(127 0 255 / .6); }
.causas strong { color: var(--texto); font-weight: 600; }
.causas span { color: var(--texto-suave); }

/* ── Conversa ilustrada da Zenni ─────────────────────────────────────────── */
.secao .painel .conversa { display: grid; gap: 10px; margin: 6px 0 0; max-width: 540px; }
.msg { margin: 0; padding: 11px 15px; border-radius: 16px; max-width: 86%; font-size: 15px; line-height: 1.45; }
.msg-autor { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.msg--cliente { justify-self: start; background: rgb(255 255 255 / .08); border: 1px solid var(--linha); color: var(--texto); border-bottom-left-radius: 4px; }
.msg--zenni { justify-self: end; background: rgb(127 0 255 / .3); border: 1px solid rgb(163 92 255 / .5); color: #fff; border-bottom-right-radius: 4px; }
.crm-card { margin: 4px 0 0; padding: 11px 15px; border: 1px dashed rgb(57 255 20 / .45); border-radius: 12px; background: rgb(57 255 20 / .06); color: var(--texto); font-size: 14px; }
.crm-card strong { color: var(--sinal); }
.conversa-nota { margin: 8px 0 0; font-size: 12px; color: var(--texto-suave); opacity: .7; }
.secao .painel .conversa-nota + .fluxo-nota { margin-top: 14px; }

/* ── Para quem é ─────────────────────────────────────────────────────────── */
.para-quem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(28px, 5vw, 80px); margin: 26px 0 8px; }
.para-quem h3 { margin-bottom: 14px; }
.lista-sim, .lista-nao { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-sim li, .lista-nao li { position: relative; padding-left: 28px; color: var(--texto-suave); }
.lista-sim li::before { content: "✓"; position: absolute; left: 0; color: var(--sinal); font-weight: 700; }
.lista-nao li::before { content: "✕"; position: absolute; left: 0; color: #9a96a8; font-weight: 700; }
@media (max-width: 760px) { .para-quem { grid-template-columns: 1fr; } }

/* ── Como começar ────────────────────────────────────────────────────────── */
.comecar { list-style: none; margin: 18px 0 28px; padding: 0; counter-reset: c; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comecar li { counter-increment: c; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--texto-suave); font-size: 14px; }
.comecar li::before { content: counter(c, decimal-leading-zero); display: block; margin-bottom: 6px; color: var(--acento-claro); font: 600 12px/1 var(--fonte-texto); letter-spacing: .1em; }
.comecar strong { display: block; color: var(--texto); }
@media (max-width: 640px) { .comecar { grid-template-columns: 1fr; } }

/* ── Funil do diagnóstico ────────────────────────────────────────────────── */
.funil { display: block; margin-top: 0; }
.funil-topo { display: flex; justify-content: space-between; align-items: center; min-height: 22px; font-size: 13px; color: var(--texto-suave); }
.funil-voltar { background: none; border: 0; color: var(--texto-suave); font: inherit; cursor: pointer; padding: 0; }
.funil-voltar:hover { color: var(--texto); }
.funil-etapa { margin-left: auto; }
.funil-barra { height: 3px; margin: 10px 0 22px; border-radius: 3px; background: rgb(255 255 255 / .1); overflow: hidden; }
.funil-barra span { display: block; height: 100%; width: 25%; background: var(--acento); transition: width .5s var(--ease); }
.funil-passo { border: 0; margin: 0; padding: 0; min-width: 0; }
.funil-passo legend { padding: 0; margin-bottom: 6px; font: 600 clamp(20px, 1.8vw, 26px)/1.2 var(--fonte-titulo); font-stretch: 110%; color: var(--texto); }
.funil-ajuda { margin: 0 0 14px; font-size: 14px; }
.opcoes { display: grid; gap: 10px; margin-top: 12px; }
.opcao { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--linha); border-radius: 12px; background: rgb(255 255 255 / .03); cursor: pointer; transition: border-color .25s, background .25s; }
.opcao:hover { border-color: rgb(163 92 255 / .5); }
.opcao input { accent-color: var(--acento); width: 18px; height: 18px; flex: none; }
.opcao:has(input:checked) { border-color: var(--acento); background: rgb(127 0 255 / .16); }
.opcao span { color: var(--texto); }
.funil-sub { margin: 26px 0 4px; font-size: 18px; }
.funil .campo { margin-top: 14px; }
.funil .campo small { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.funil-consentimento { margin: 16px 0 0; font-size: 12px; color: var(--texto-suave); }
.funil-acoes { margin-top: 22px; }
.funil-acoes .botao { width: 100%; }
.funil-ok h3 { color: var(--sinal); }
/* O atributo hidden precisa vencer o display dos botões do funil */
.funil [hidden] { display: none !important; }
/* O palco das seções presas desconta a barra fixa do topo */
@media (min-width: 861px) and (min-height: 700px) { .pin-palco { padding-top: 76px; padding-bottom: 20px; } }

/* ── Modelagem: método em 7 etapas, 7 soluções, páginas internas ────────── */
.rotulo--produto { color: var(--sinal); }
.passos--sete { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 14px; }
.passos--sete li { grid-template-columns: 34px 1fr; }
.passos--sete li::before { font-size: 17px; }
.passos--sete span { font-size: 14px; }
.nota-metodo { margin-top: 18px; font-size: 14px; }
.intro-solucoes { max-width: 70ch; }
.frentes--sete li { padding: 16px 0; }
.frentes--sete h3 { font-size: clamp(17px, 1.35vw, 20px); }
.frentes--sete p { font-size: 14px; }
.link-seta { display: inline-block; margin-top: 8px; color: var(--acento-claro); font-weight: 500; text-decoration: none; }
.link-seta:hover { color: var(--texto); }
.pagina-interna .secao--interna { min-height: auto; padding: 9vh var(--gutter); }
.secao--hero-interna { min-height: 86vh; padding-top: 20vh; }
.secao--hero-interna h1 { font-size: clamp(34px, 5vw, 76px); max-width: 18ch; }
.lead { font-size: clamp(17px, 1.4vw, 21px); max-width: 60ch; color: var(--texto); }
.secao--interna .painel--cabecalho { max-width: 980px; }
.secao--interna .faq { margin-top: 10px; }
.secao--cta-interna h2 { font-size: clamp(30px, 3.6vw, 54px); }
@media (max-width: 760px) { .passos--sete { grid-template-columns: 1fr; } }
/* Link da frente na coluna do texto, numa linha só; blocos 3D só ao lado do título */
.frentes li > .link-seta { grid-column: 2; white-space: nowrap; margin-top: 6px; }
#solucoes .frentes { position: relative; z-index: 1; }
#solucoes .frentes li { background: rgb(13 13 13 / .55); }

/* ── UX: diagnóstico e dúvidas em uma tela ───────────────────────────────── */
.secao--contato, .secao--faq { min-height: 100vh; padding: 96px var(--gutter) 48px; }
.painel--form { max-width: 1180px; }
.contato-texto h2 { font-size: clamp(30px, 3.4vw, 52px); }
.contato-texto .comecar { grid-template-columns: 1fr; gap: 14px; margin: 22px 0 0; }
.funil-passo legend { font-size: clamp(18px, 1.5vw, 22px); }
.opcoes { gap: 8px; }
.opcao { padding: 10px 14px; }
.funil-barra { margin: 8px 0 16px; }
.funil .campo { margin-top: 10px; }
.funil .campo input { padding: 11px 14px; }
.funil-sub { margin-top: 16px; }
.funil-acoes { margin-top: 16px; }
.painel--faq { max-width: 1180px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
.faq details:last-child { border-bottom: 0; }
.faq summary { padding: 16px 36px 16px 0; }
.faq details p { margin-bottom: 16px; font-size: 15px; }
.faq-mais { margin-top: 22px; }
@media (min-width: 861px) {
  .painel--form { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0 56px; align-items: start; }
  .funil-passo:first-of-type .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .secao--contato, .secao--faq { min-height: auto; padding: 9vh var(--gutter); }
}

@media (min-width: 861px) {
  .funil-passo:last-of-type .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* ── Telas baixas: textos menores para caber; o que não couber rola solto ── */
@media (min-width: 861px) and (max-height: 900px) {
  .secao h2 { font-size: clamp(28px, min(3.6vw, 5.4vh), 56px); }
  .momento .titulo-abertura { font-size: clamp(30px, min(4.2vw, 6.4vh), 64px); }
  .causas, .passos, .fluxo { gap: 10px; }
  .msg { padding: 8px 13px; font-size: 14px; }
  .secao .painel .conversa { gap: 7px; }
  .frentes--sete li { padding: 11px 0; }
  .secao--contato, .secao--faq { padding-top: 84px; }
}
@media (min-width: 861px) and (min-height: 700px) {
  .pin.pin--solto { height: auto; }
  .pin.pin--solto .pin-palco { position: relative; height: auto; overflow: visible; padding-top: 96px; padding-bottom: 48px; }
  .pin.pin--solto .painel [data-seq] > * { opacity: 1; transform: none; }
}

/* ══ Celular magnético: imagem como capa de cada seção, ritmo enxuto ══════ */
@media (max-width: 860px) {
  .secao, .secao--larga, .pagina-interna .secao--interna { padding: 44px 18px 52px; min-height: 0 !important; align-content: start; }
  .secao .painel:not(.painel--faq):not(.painel--form) { background: none; padding: 0; border-radius: 0; }
  /* A arte sai de trás do texto e vira a capa da seção */
  .secao .arte--direita, .secao .arte--esquerda, #solucoes img.arte, #sobre img.arte, .secao--hero-interna img.arte {
    position: relative; inset: auto; display: block; z-index: 0;
    width: calc(100% + 36px); max-width: none; height: 46vw; min-height: 190px; max-height: 300px;
    margin: -8px -18px 22px; opacity: 1; transform: none !important; object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%);
  }
  .secao canvas.arte3d { height: 64vw; max-height: 340px; }
  .tem-3d img.arte { display: none; }
  .secao:not(.tem-3d) canvas.arte3d { display: none; }
  #para-quem .arte, #contato .arte, #final .arte { display: none; }
  .pin-palco { display: block; }
  .secao h2 { font-size: clamp(28px, 8.2vw, 38px); line-height: 1.05; margin-bottom: 14px; }
  .secao p, .secao li, .secao dd { font-size: 15.5px; }
  .rotulo { margin-bottom: 10px; }
  /* Vídeos mais curtos: menos rolagem vazia */
  #inicio.cine { height: 250vh !important; }
  #final.cine { height: 130vh !important; }
  /* WhatsApp menor, sem cobrir o texto */
  .whats { width: 50px; height: 50px; right: 12px; bottom: 14px; }
  .whats svg { width: 26px; height: 26px; }
  .whats::after { display: none; }
  /* Diagnóstico: passos numa linha só, funil logo em seguida */
  .contato-texto .comecar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 22px; }
  .contato-texto .comecar li { font-size: 0; padding-top: 8px; }
  .contato-texto .comecar li::before { font-size: 11px; }
  .contato-texto .comecar strong { font-size: 13px; line-height: 1.3; }
  .painel--form { padding: 22px 16px; }
  .opcao { padding: 11px 13px; }
  .rodape-painel { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Hero no celular: bloco centralizado na tela, espaçamento uniforme ───── */
@media (max-width: 860px) {
  .momento--abertura { top: 76px; bottom: 9vh; left: 20px; right: 20px; max-width: none; text-align: center; }
  .momento--abertura .painel { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .momento--abertura .rotulo { margin-bottom: 18px; }
  .momento--abertura .titulo-abertura { font-size: clamp(34px, 10vw, 48px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 22px; }
  .momento--abertura .titulo-linha { margin-top: .2em; }
  .momento--abertura .lema { margin: 0 0 14px; font-size: 22px; }
  .momento--abertura .apoio { font-size: 16px; max-width: 32ch; margin: 0 auto; }
  #inicio .cine-vinheta { background:
      radial-gradient(120% 62% at 50% 50%, rgb(13 13 13 / .78) 0%, rgb(13 13 13 / .55) 55%, rgb(13 13 13 / .25) 100%),
      linear-gradient(to bottom, transparent 82%, var(--fundo) 100%); }
}

/* ── Soluções: a Zenni em destaque, as outras frentes em segundo plano ───── */
#solucoes .frentes .frente--principal {
  grid-column: 1 / -1; margin-bottom: 6px; padding: 22px 26px;
  border: 1px solid rgb(163 92 255 / .55); border-radius: var(--raio);
  background: linear-gradient(115deg, rgb(127 0 255 / .24), rgb(13 13 13 / .72) 72%);
}
.frente--principal > * { grid-column: 2; }
.frente-selo { margin-bottom: 8px; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--acento-claro); }
.frentes--sete .frente--principal h3 { font-size: clamp(22px, 2vw, 30px); }
.frentes--sete .frente--principal p { max-width: 62ch; font-size: 15px; color: rgb(255 255 255 / .82); }
.frente--principal .botao { justify-self: start; margin-top: 16px; padding: 13px 22px; font-size: 14px; }
@media (max-width: 760px) {
  #solucoes .frentes .frente--principal { grid-template-columns: 30px 1fr; padding: 18px 16px; }
}
@media (min-width: 861px) and (max-height: 900px) {
  #solucoes .frentes .frente--principal { padding: 16px 22px; }
  .frente--principal .botao { margin-top: 12px; padding: 11px 20px; }
}

/* ── Sobre: foto do fundador (config.js); sem foto, fica o brasão ────────── */
.sobre-imagem { margin: 0; }
.painel--sobre.com-foto { grid-template-columns: 240px 1fr; }
.fundador-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); border: 1px solid var(--linha); }
.fundador-legenda { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.fundador-legenda strong { display: block; color: var(--texto); font-weight: 600; }
@media (max-width: 760px) {
  .painel--sobre.com-foto { grid-template-columns: 1fr; }
  .sobre-imagem--foto { max-width: 220px; }
}

/* ── Prova social: só aparece com dados reais preenchidos em config.js ───── */
#prova[hidden] { display: none; }
.prova-google { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 4px 0 0; color: var(--texto); text-decoration: none; }
.prova-google strong { font: 600 clamp(30px, 2.8vw, 44px)/1 var(--fonte-titulo); font-stretch: 115%; letter-spacing: -.02em; }
.prova-google .estrelas { color: var(--acento-claro); letter-spacing: .12em; }
a.prova-google:hover { color: var(--acento-claro); }
.prova-lista { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.prova-lista:empty { display: none; }
.prova-item { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: rgb(13 13 13 / .6); }
.prova-resultado { margin: 0; font: 600 clamp(20px, 1.7vw, 26px)/1.15 var(--fonte-titulo); font-stretch: 112%; color: var(--acento-claro); }
.prova-frase { margin: 0; font-size: 16px; line-height: 1.55; color: var(--texto); }
.prova-autor { margin: auto 0 0; font-size: 13px; letter-spacing: .04em; }
.prova-autor strong { color: var(--texto); font-weight: 600; }

/* ── Abertura no padrão da zenni-ia: título, apoio em branco e botões já na primeira tela ── */
.momento--abertura { max-width: 720px; }
.momento--abertura .rotulo { color: var(--sinal); }
.momento--abertura .apoio { color: var(--texto); font-size: clamp(17px, 1.4vw, 21px); max-width: 54ch; margin: 0 0 26px; }
@media (min-width: 861px) {
  /* Escurece o lado do texto, como na zenni-ia; a base continua escura para as frases seguintes */
  #inicio .cine-vinheta {
    background:
      linear-gradient(to right, rgb(13 13 13 / .9) 0%, rgb(13 13 13 / .66) 34%, rgb(13 13 13 / .12) 62%, transparent 75%),
      linear-gradient(to top, rgb(13 13 13 / .7) 0%, transparent 40%),
      linear-gradient(to bottom, transparent 75%, var(--fundo) 100%);
  }
  /* Computador: bloco maior, centralizado na altura da tela (abaixo da barra do topo) */
  #inicio .momento--abertura { top: 76px; bottom: 7vh; right: auto; max-width: 940px; display: flex; align-items: center; }
  #inicio .momento--abertura .titulo-abertura { font-size: clamp(44px, min(5.4vw, 8.6vh), 96px); line-height: 1.02; margin-bottom: .32em; }
  #inicio .momento--abertura .lema { font-size: clamp(22px, min(2.2vw, 3.6vh), 36px); }
  #inicio .momento--abertura .apoio { font-size: clamp(18px, min(1.5vw, 2.5vh), 23px); margin-bottom: 30px; }
  #inicio .momento--abertura .botao { padding: 19px 34px; font-size: 16px; }
  /* As frases seguintes ocupam o mesmo lugar e a mesma escala da primeira */
  #inicio .momento--direita, #inicio .momento--centro, #inicio .momento--problema {
    top: 76px; bottom: 7vh; left: var(--gutter); right: auto; width: auto; max-width: 860px;
    display: flex; align-items: center; text-align: left; transform: translateY(24px);
  }
  #inicio .momento--direita.ativo, #inicio .momento--centro.ativo, #inicio .momento--problema.ativo { transform: none; }
  #inicio .momento .destaque { font-size: clamp(40px, min(4.9vw, 7.8vh), 88px); line-height: 1.04; margin-bottom: .4em; }
  /* Problema tem lista: título menor para o bloco caber inteiro na tela */
  #inicio .momento--problema { max-width: 920px; }
  #inicio .momento--problema .destaque { font-size: clamp(30px, min(3vw, 4.8vh), 56px); margin-bottom: .35em; }
  #inicio .momento--problema .apoio { color: var(--texto); font-size: clamp(16px, min(1.25vw, 2.1vh), 20px); margin: 0 0 16px; }
  #inicio .momento--problema .causas { gap: 10px; }
  #inicio .momento--problema .causas span { font-size: 15px; }
  #inicio .momento--direita .apoio { color: var(--texto); font-size: clamp(18px, min(1.5vw, 2.5vh), 23px); max-width: 44ch; margin: 0; }
  #inicio .momento--centro .acoes--centro { justify-content: flex-start; margin-top: 14px; }
  #inicio .momento--centro .botao { padding: 19px 34px; font-size: 16px; }
}
/* Problema dentro do vídeo: as causas leem sobre a imagem */
.momento--problema .causas { margin: 0 0 18px; gap: 12px; }
.momento--problema .causas li { border-left-color: rgb(163 92 255 / .8); }
.momento--problema .causas strong { text-shadow: 0 1px 14px rgb(0 0 0 / .85); }
.momento--problema .causas span { color: rgb(255 255 255 / .78); text-shadow: 0 1px 14px rgb(0 0 0 / .85); }
.momento--problema .fecho { margin: 0; text-shadow: 0 1px 14px rgb(0 0 0 / .85); }
@media (max-width: 860px) {
  .momento--problema { top: 76px; bottom: 6vh; display: flex; align-items: center; }
  .momento--problema .destaque { font-size: clamp(24px, 7vw, 32px); }
  .momento--problema .apoio { color: var(--texto); font-size: 15px; margin: 0 0 14px; }
  .momento--problema .causas { gap: 8px; margin-bottom: 14px; }
  .momento--problema .causas span { display: none; }
  .momento--problema .causas strong { font-size: 15px; }
  .momento--problema .fecho { font-size: 15px; }
}
@media (max-width: 860px) {
  .momento--abertura .apoio { margin: 0 auto 22px; }
  .momento--abertura .acoes { justify-content: center; width: 100%; }
  .momento--abertura .botao { flex: 1 1 100%; }
}

/* ── Ritmo da home mais próximo das páginas internas: sem telas vazias ───── */
@media (min-width: 861px) {
  #para-quem, #sobre, #prova, .secao--faq { min-height: auto; padding: 9vh var(--gutter); }
  .secao--contato { min-height: auto; padding: 96px var(--gutter) 9vh; }
}

/* ── Escala de texto: corpo a partir de 15px, rótulos legíveis, botões iguais ── */
.rotulo { font-size: 13px; }
.momento--abertura .rotulo { font-size: clamp(13px, 1vw, 15px); }
.frente-selo { font-size: 12px; }
.passos--sete span, .frentes--sete p, .nota-metodo, .comecar li, .funil-ajuda, .crm-card, .msg { font-size: 15px; }
.frente--principal .botao { font-size: 15px; }

/* Celular: as frases 2 e 3 da abertura seguem a 1ª, centralizadas e no mesmo porte */
@media (max-width: 860px) {
  #inicio .momento--direita, #inicio .momento--centro { top: 76px; bottom: 9vh; display: flex; align-items: center; text-align: center; }
  #inicio .momento--direita .painel, #inicio .momento--centro .painel { width: 100%; }
  #inicio .momento--direita .destaque, #inicio .momento--centro .destaque { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.08; margin-bottom: .5em; }
  #inicio .momento--direita .apoio { color: var(--texto); font-size: 17px; max-width: 32ch; margin: 0 auto; }
}

/* Vale para as 6 páginas (2026-11-12). O :root na frente dos seletores só dá peso para vencer as regras antigas de botão acima. */
/* ══ Botões ═══════════════════════════════════════════════════════════
   Feitos do mesmo material das esculturas: gel de luz verde (o núcleo, a venda),
   gel roxo (a marca) e vidro com luz roxa por dentro (as fibras).
   Camadas: corpo em degradê, luz que se acumula na base e segue o ponteiro,
   reflexo no topo, aresta que afunda no clique e halo colorido embaixo. */
:root .botao, :root .menu-cta {
  --g1: #BC8FFF; --g2: #7F00FF; --g3: #5A00C2; --aresta: #3C008C; --halo: rgb(127 0 255 / .55);
  --tinta: #fff; --relevo: 0 1px 0 rgb(30 0 70 / .6); --prof: 3px;
  position: relative; isolation: isolate; overflow: hidden; border: 0;
  color: var(--tinta); text-shadow: var(--relevo);
  background:
    radial-gradient(90% 75% at var(--mx, 50%) 118%, rgb(255 255 255 / .46), transparent 62%),
    linear-gradient(180deg, var(--g1) 0%, var(--g2) 48%, var(--g3) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .72),
    inset 0 -2px 5px rgb(0 0 0 / .22),
    0 var(--prof) 0 var(--aresta),
    0 calc(var(--prof) + 2px) 4px rgb(0 0 0 / .5),
    0 16px 36px -10px var(--halo);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s;
  -webkit-tap-highlight-color: transparent;
}
:root .botao { padding: 18px 30px; min-height: 58px; font-size: 15.5px; }
:root .menu-cta { --prof: 2px; padding: 10px 18px; font-weight: 600; }
:root .botao::before, :root .menu-cta::before {
  content: ""; position: absolute; z-index: -1; left: 7px; right: 7px; top: 3px; height: 46%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .62), rgb(255 255 255 / .02));
}
:root .botao::after, :root .menu-cta::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .5) 50%, transparent 62%);
  transform: translateX(-130%);
}
:root .botao:hover::after, :root .menu-cta:hover::after { transform: translateX(130%); transition: transform .85s var(--ease); }
:root .botao:hover, :root .menu-cta:hover {
  transform: translateY(-2px); filter: saturate(1.08) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .82),
    inset 0 -2px 5px rgb(0 0 0 / .2),
    0 calc(var(--prof) + 2px) 0 var(--aresta),
    0 calc(var(--prof) + 5px) 6px rgb(0 0 0 / .45),
    0 24px 46px -10px var(--halo);
}
:root .botao:active, :root .menu-cta:active {
  transform: translateY(var(--prof)); filter: none; transition-duration: .08s;
  box-shadow:
    inset 0 2px 6px rgb(0 0 0 / .4),
    inset 0 1px 0 rgb(255 255 255 / .35),
    0 0 0 var(--aresta),
    0 1px 2px rgb(0 0 0 / .5),
    0 8px 20px -10px var(--halo);
}
:root .botao--sinal { --g1: #CBFFB8; --g2: #39FF14; --g3: #1FDB00; --aresta: #0E8A00; --halo: rgb(57 255 20 / .45); --tinta: #063200; --relevo: 0 1px 0 rgb(255 255 255 / .5); }
:root .botao--linha {
  --tinta: #fff; --relevo: 0 1px 2px rgb(0 0 0 / .55); --aresta: rgb(0 0 0 / .6); --halo: rgb(163 92 255 / .28);
  background:
    radial-gradient(90% 80% at var(--mx, 50%) 122%, rgb(163 92 255 / .58), transparent 64%),
    linear-gradient(180deg, rgb(255 255 255 / .17), rgb(255 255 255 / .05));
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .55),
    inset 0 0 0 1px rgb(255 255 255 / .16),
    inset 0 -2px 6px rgb(0 0 0 / .25),
    0 var(--prof) 0 var(--aresta),
    0 calc(var(--prof) + 2px) 4px rgb(0 0 0 / .45),
    0 16px 34px -12px var(--halo);
}
:root .botao--linha::before { background: linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0)); }
:root .botao--linha:hover {
  --halo: rgb(163 92 255 / .62);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 0 0 1px rgb(200 160 255 / .42),
    inset 0 -2px 6px rgb(0 0 0 / .2),
    0 calc(var(--prof) + 2px) 0 var(--aresta),
    0 calc(var(--prof) + 5px) 6px rgb(0 0 0 / .4),
    0 24px 46px -12px var(--halo);
}
:root .botao--linha:active {
  box-shadow:
    inset 0 2px 6px rgb(0 0 0 / .5),
    inset 0 0 0 1px rgb(255 255 255 / .14),
    0 0 0 var(--aresta),
    0 1px 2px rgb(0 0 0 / .5),
    0 8px 20px -12px var(--halo);
}
:root .botao:focus-visible, :root .menu-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Seta num botão dentro do botão: desliza no hover */
.botao-seta {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -6px -16px -6px 2px; border-radius: 50%;
  background: linear-gradient(180deg, #0B4A00, #052600); color: var(--sinal);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 0 rgb(255 255 255 / .5);
  transition: transform .4s var(--ease);
}
.botao-seta svg { width: 14px; height: 14px; }
:root .botao:hover .botao-seta { transform: translateX(4px); }
:root .frente--principal .botao { min-height: 0; padding: 14px 24px; font-size: 14px; }
/* WhatsApp flutuante: a mesma gota verde */
:root .whats {
  background:
    radial-gradient(110% 90% at 50% 118%, rgb(255 255 255 / .5), transparent 60%),
    linear-gradient(180deg, #A8FF8E 0%, #39FF14 50%, #1BCB00 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -3px 6px rgb(0 70 0 / .3), 0 3px 0 #0E8A00, 0 6px 6px rgb(0 0 0 / .45), 0 14px 32px -6px rgb(57 255 20 / .5);
}
:root .whats::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 42%; border-radius: 50%; background: linear-gradient(180deg, rgb(255 255 255 / .72), rgb(255 255 255 / 0)); pointer-events: none; }
:root .whats svg { position: relative; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .45)); }

/* ── Menu do celular, nas 6 páginas (2026-11-12): botão redondo no topo e gaveta de tela cheia ── */
.menu-botao { display: none; }
.gaveta { position: fixed; inset: 0; z-index: 49; display: grid; align-content: center; gap: 30px; padding: 96px 24px 40px; background: rgb(13 13 13 / .95); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.gaveta[hidden] { display: none; }
.gaveta nav { display: grid; }
.gaveta nav a { padding: 17px 0; border-bottom: 1px solid var(--linha); text-decoration: none; font: 600 clamp(26px, 8vw, 34px)/1.1 var(--fonte-titulo); font-stretch: 116%; letter-spacing: -.02em; }
.gaveta .botao { width: 100%; }
.gaveta nav a[aria-current="page"] { color: var(--acento-claro); }
@media (max-width: 760px) {
  .topo { gap: 10px; }
  .menu { margin-left: auto; }
  .menu-botao {
    display: block; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 0 0 1px rgb(255 255 255 / .14), 0 2px 0 rgb(0 0 0 / .5);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-tap-highlight-color: transparent;
  }
  .menu-botao span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), top .35s var(--ease); }
  .menu-botao span:first-child { top: 17px; }
  .menu-botao span:last-child { top: 25px; }
  .menu-botao[aria-expanded="true"] span { top: 21px; }
  .menu-botao[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .menu-botao[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .menu-botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}