/* ============================================================
   RIOPERFORM — LP ATENDIMENTO CONVERSACIONAL
   Metade superior em base escura. Off-white a partir de
   "Como começa", conforme a direção visual do documento.
   ============================================================ */

/* ---------- TOKENS ---------- */

:root {
  /* Escuro */
  --surface-0: #0A0A0A;
  --surface-1: #131313;
  --surface-2: #1B1B1B;
  --border-subtle: #232323;
  --border-strong: #343434;

  /* Claro */
  --claro-0: #F9F9F7;
  --claro-1: #F1F1EE;
  --claro-2: #E8E8E4;
  --claro-borda: #DFDFD9;
  --claro-borda-forte: #C9C9C1;

  /* Marca */
  --coral: #D94F30;
  --coral-hover: #C4432A;
  --preto: #0A0A0A;
  --grafite: #2A2A2A;
  --areia: #E8E8E4;
  --offwhite: #F9F9F7;
  --pedra: #8C8C88;
  --pedra-dim: #6A6A66;
  --pedra-claro: #6E6E68;
  --whatsapp: #25D366;

  /* Papéis — reatribuídos por seção */
  --bg: var(--surface-0);
  --bg-elev: var(--surface-1);
  --bg-elev-2: var(--surface-2);
  --borda: var(--border-subtle);
  --borda-forte: var(--border-strong);
  --texto-forte: var(--offwhite);
  --texto: var(--pedra);
  --texto-medio: var(--areia);
  --texto-fraco: var(--pedra-dim);

  /* Tipografia */
  --f-display: 'Manrope', system-ui, sans-serif;
  --f-corpo: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --t-display: clamp(1.875rem, 1.3rem + 2.1vw, 2.75rem);
  --t-h2:      clamp(1.375rem, 1.12rem + 0.95vw, 1.875rem);
  --t-h3:      1rem;
  --t-lead:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-body:    0.9375rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px;

  --raio: 4px;
  --raio-md: 8px;
  --maxw: 1080px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Blocos claros: os mesmos papéis, valores diferentes */
.tema-claro {
  --bg: var(--claro-0);
  --bg-elev: var(--claro-1);
  --bg-elev-2: var(--claro-2);
  --borda: var(--claro-borda);
  --borda-forte: var(--claro-borda-forte);
  --texto-forte: var(--preto);
  --texto: var(--grafite);
  --texto-medio: var(--grafite);
  --texto-fraco: var(--pedra-claro);
}

/* ---------- RESET ---------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
ul, ol { list-style: none; }

body {
  font-family: var(--f-corpo);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--pedra);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grão: profundidade sem sombra, que o brandbook proíbe em fundo escuro */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 2; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TIPOGRAFIA ---------- */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--texto-forte);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.042em; }
h2 { font-size: var(--t-h2);      line-height: 1.14; }
h3 { font-size: var(--t-h3);      line-height: 1.35; font-weight: 700; letter-spacing: -0.015em; }
p  { text-wrap: pretty; color: var(--texto); }

.etiqueta {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--coral);
}
.tema-claro .etiqueta { color: var(--pedra-claro); }

.chamada { font-size: var(--t-lead); line-height: 1.6; color: var(--texto-medio); max-width: 56ch; }
.micro   { font-size: var(--t-small); color: var(--texto-fraco); }
.apoio {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.fecho {
  font-size: var(--t-lead);
  color: var(--texto-forte);
  font-weight: 500;
  padding-left: var(--s-4);
  border-left: 2px solid var(--coral);
}

a { color: var(--coral); text-decoration: none; transition: color .2s var(--ease); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px;
}

/* ---------- LAYOUT ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }

.bloco {
  position: relative;
  background: var(--bg);
  padding-block: var(--s-9);
  color: var(--texto);
}
.bloco::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borda) 12%, var(--borda-forte) 50%, var(--borda) 88%, transparent);
}
.bloco-elev { background: var(--bg-elev); }

/* Grade editorial: título à esquerda, texto à direita */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(var(--s-6), 5vw, 72px);
  align-items: start;
}
.editorial > * { grid-column: 1 / -1; }
.editorial > .etiqueta { grid-column: 1; grid-row: 1; margin-bottom: var(--s-3); }
.editorial > h2 { grid-column: 1; max-width: 24ch; }
.editorial > p  { grid-column: 2; max-width: 58ch; }
.editorial > p + p { margin-top: var(--s-4); }
.editorial:has(> .etiqueta) > h2 { grid-row: 2; }
.editorial:has(> .etiqueta) > p:first-of-type { grid-row: 1 / span 2; }

/* ---------- CABEÇALHO ---------- */

.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.topo-wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s-3) var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
/* A marca é imagem. A altura manda; a largura acompanha, para
   servir a qualquer proporção de logo sem recorte. */
.marca {
  display: block;
  height: 42px;
  width: auto;
  flex-shrink: 0;
}
.topo.compacto .marca { height: 21px; transition: height .25s var(--ease); }

@media (max-width: 620px) {
  .marca { height: 21px; }
}

/* ---------- BOTÕES ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-small);
  letter-spacing: -0.01em;
  padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--raio);
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), transform .15s var(--ease);
}
.btn-coral { background: var(--coral); color: #0A0A0A; }
.btn-coral:hover { background: var(--coral-hover); color: #0A0A0A; }
.btn-coral:active { transform: translateY(1px); }
.btn-g { padding: 14px 26px; font-size: var(--t-body); }

/* ---------- ABERTURA ---------- */

.abertura { position: relative; overflow: hidden; padding-block: clamp(var(--s-8), 8vw, 108px) var(--s-9); }
.abertura::before {
  content: '';
  position: absolute; top: -46%; left: 50%;
  width: min(1100px, 130%); aspect-ratio: 3 / 2;
  transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(217,79,48,.07), transparent 58%),
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.035), transparent 62%);
}
.abertura .wrap { position: relative; }

.abertura-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(var(--s-6), 5vw, 68px);
  align-items: center;
}
.abertura-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.abertura-texto .etiqueta { margin-bottom: calc(var(--s-2) * -1); }
.abertura-texto .micro { margin-top: calc(var(--s-3) * -1); }

/* ---------- FIGURA ---------- */

.figura {
  position: relative;
  padding: var(--s-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: radial-gradient(120% 100% at 70% 0%, rgba(255,255,255,.028), transparent 60%), var(--surface-1);
  overflow: hidden;
}
.figura::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .32;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
}
.fig { position: relative; width: 100%; height: auto; display: block; }
.fig text { font-family: var(--f-mono); font-size: 17px; letter-spacing: .02em; text-anchor: middle; fill: var(--areia); }
.fig .fig-cap { font-size: 13px; fill: var(--pedra-dim); letter-spacing: .12em; text-transform: uppercase; }
.fig .fig-node rect  { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }

/* Conversa da abertura */
.fig .fig-hora { font-size: 13px; fill: var(--pedra-dim); letter-spacing: .14em; text-anchor: start; }
.fig .fig-recebida rect { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.fig .fig-recebida text { fill: var(--areia); text-anchor: start; font-size: 16px; }
.fig .fig-enviada rect  { fill: var(--areia); }
.fig .fig-enviada text  { fill: #0A0A0A; text-anchor: end; font-size: 16px; }
.fig .fig-selo rect { fill: none; stroke: var(--coral); stroke-width: 1; }
.fig .fig-selo text { fill: var(--coral); font-size: 12px; letter-spacing: .08em; }
.fig .fig-marco circle { fill: var(--coral); }
.fig .fig-ativo rect { fill: var(--coral); stroke: none; }
.fig .fig-ativo text { fill: #0A0A0A; font-weight: 500; }
.fig-dash { stroke-dasharray: 4 6; }
@media (prefers-reduced-motion: no-preference) {
  .fig-dash { animation: correr 3.2s linear infinite; }
  @keyframes correr { to { stroke-dashoffset: -40; } }
}

/* ---------- LISTA DE RECONHECIMENTO ---------- */

.lista-sinais { grid-column: 1 / -1; margin-top: var(--s-6); border-top: 1px solid var(--borda); }
.lista-sinais li {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) 30px;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-body);
  color: var(--texto-medio);
}
.lista-sinais li::before {
  content: '—'; position: absolute; left: 0; top: var(--s-4);
  font-family: var(--f-mono); color: var(--coral);
}
.editorial > .fecho { grid-column: 2; margin-top: var(--s-6); }
.lista-sinais + .fecho { grid-column: 1 / -1; max-width: 62ch; }

/* ---------- CARDS ---------- */

.grade-cards {
  grid-column: 1 / -1;
  counter-reset: card;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--s-7);
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}
.card {
  position: relative;
  counter-increment: card;
  background: var(--bg);
  padding: var(--s-6) var(--s-5) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: background-color .3s var(--ease);
}
.card::before {
  content: '0' counter(card);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; color: var(--texto-fraco);
  transition: color .3s var(--ease);
}
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(90% 70% at 50% 0%, rgba(217,79,48,.10), transparent 70%);
  transition: opacity .3s var(--ease);
}
.card:hover::after { opacity: 1; }
.card:hover::before { color: var(--coral); }
.card p { font-size: var(--t-small); }

/* ---------- CHATBOT OU AGENTE ---------- */

.editorial > .nota-tecnica {
  grid-column: 2;
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--texto-fraco);
}

.editorial > .indicadores-titulo {
  grid-column: 1 / -1;
  margin-top: var(--s-7);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--texto-fraco);
}

.fluxo-quatro { grid-template-columns: repeat(4, 1fr); }


.escolha {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: var(--s-7);
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}
.escolha-opcao {
  position: relative;
  background: var(--bg);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.escolha-rotulo {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--coral);
}
.escolha-opcao h3 { font-size: var(--t-lead); }
.escolha-opcao ul { display: flex; flex-direction: column; }
.escolha-opcao li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 22px;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-small);
  color: var(--texto-medio);
}
.escolha-opcao li::before {
  content: '·'; position: absolute; left: 4px; top: var(--s-3);
  font-family: var(--f-mono); color: var(--texto-fraco);
}
.escolha-opcao li:last-child { border-bottom: 0; }
.escolha-quando {
  margin-top: auto;
  padding: var(--s-4);
  background: var(--bg-elev-2);
  border-radius: var(--raio);
  font-size: var(--t-small);
  color: var(--texto-medio);
}
.escolha-quando strong {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-fraco);
}

/* ---------- FLUXO DE CINCO ETAPAS ---------- */

.fluxo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.fluxo-etapa { position: relative; padding-top: var(--s-5); }
.fluxo-etapa::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--borda-forte);
}
.fluxo-etapa::after {
  content: ''; position: absolute; top: -3.5px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--borda-forte);
}
.fluxo-etapa:first-child::before { background: var(--coral); }
.fluxo-etapa:first-child::after  { background: var(--coral); border-color: var(--coral); }
.fluxo-num {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; color: var(--texto-fraco);
}
.fluxo-etapa:first-child .fluxo-num { color: var(--coral); }
.fluxo-etapa p { font-size: var(--t-small); color: var(--texto-medio); }

/* ---------- INDICADORES ---------- */

.lista-indicadores { grid-column: 1 / -1; margin-top: var(--s-6); }
.lista-indicadores li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-small);
  color: var(--texto-medio);
}
.lista-indicadores li::before {
  content: counter(ind, decimal-leading-zero);
  counter-increment: ind;
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: .1em; color: var(--coral);
}
.lista-indicadores { counter-reset: ind; }

/* ---------- PASSOS ---------- */

.passos { grid-column: 1 / -1; margin-top: var(--s-7); border-top: 1px solid var(--borda); }
.passo {
  display: grid;
  grid-template-columns: 56px minmax(0, 5fr) minmax(0, 4fr);
  column-gap: var(--s-6);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--borda);
}
.passo-num {
  font-family: var(--f-mono); font-size: var(--t-small); font-weight: 500;
  color: var(--coral); padding-top: 2px;
}
.passo h3 { grid-column: 2; grid-row: 1; margin-bottom: var(--s-3); }
.passo p  { grid-column: 2; grid-row: 2; font-size: var(--t-small); }
.passo-nota {
  grid-column: 3; grid-row: 1 / span 2; align-self: start;
  padding: var(--s-4);
  background: var(--bg-elev-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: var(--t-small);
  color: var(--texto-medio);
}
.passo-nota strong {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--coral);
}

/* ---------- PREÇO ---------- */

.preco {
  grid-column: 1 / -1;
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: var(--bg-elev-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
}
.preco h3 { margin-bottom: var(--s-3); font-size: var(--t-lead); }
.preco p { max-width: 68ch; font-size: var(--t-small); }

/* ---------- LISTAS DE CRITÉRIO ---------- */

.duas-colunas {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); margin-top: var(--s-7);
}
.coluna-titulo {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--texto-fraco);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--borda);
  margin-bottom: var(--s-3);
}
.lista-criterio li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 26px;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-small);
  color: var(--texto-medio);
}
.lista-criterio li::before {
  position: absolute; left: 0; top: var(--s-3);
  font-family: var(--f-mono); font-size: var(--t-small);
}
.lista-sim li::before { content: '+'; color: var(--coral); }
.lista-nao li::before { content: '−'; color: var(--texto-fraco); }
.lista-nao li { color: var(--texto); }

.lista-fora { grid-column: 2; margin-top: var(--s-5); }
.lista-fora li {
  position: relative; padding: var(--s-3) 0 var(--s-3) 26px;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-small); color: var(--texto-medio);
}
.lista-fora li::before {
  content: '×'; position: absolute; left: 0; top: var(--s-3);
  font-family: var(--f-mono); color: var(--texto-fraco);
}

/* ---------- PERGUNTAS ---------- */

.perguntas { grid-column: 1 / -1; margin-top: var(--s-6); border-top: 1px solid var(--borda); }
.pergunta { border-bottom: 1px solid var(--borda); }
.pergunta summary {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.015em; color: var(--texto-forte);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: '+'; margin-left: auto;
  font-family: var(--f-mono); font-weight: 400; font-size: 1.1rem;
  color: var(--coral); transition: transform .25s var(--ease);
}
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta-corpo { padding: 0 0 var(--s-5); }
.pergunta-corpo p { max-width: 64ch; font-size: var(--t-small); }
.pergunta-corpo p + p { margin-top: var(--s-3); }

/* ---------- FECHAMENTO ---------- */

.encerra { text-align: center; }
.encerra h2 { max-width: 24ch; margin-inline: auto; }
.encerra p  { max-width: 56ch; margin: var(--s-4) auto 0; }
.encerra .btn { margin-top: var(--s-6); }
.encerra .micro { margin-top: var(--s-4); }

/* ---------- RODAPÉ ---------- */

.rodape {
  background: var(--surface-0);
  padding: var(--s-7) var(--s-5);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.rodape strong {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: 1rem; letter-spacing: -0.03em; color: var(--offwhite);
  margin-bottom: var(--s-2);
}
.rodape p { font-size: var(--t-small); color: var(--pedra-dim); }
.rodape-legal {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: .04em; color: var(--pedra-dim);
}

/* ---------- WHATSAPP ---------- */

.zap {
  position: fixed; bottom: var(--s-5); right: var(--s-5);
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--whatsapp); color: #FFFFFF;
  border-radius: 50%; z-index: 90;
  transition: transform .2s var(--ease);
}
.zap:hover { transform: translateY(-2px); color: #FFFFFF; }
.zap svg { width: 26px; height: 26px; }

/* Barra fixa no celular: a conversão não pode depender de rolar até o fim */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none;
  padding: var(--s-3) var(--s-4);
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.barra-fixa.visivel { transform: translateY(0); }
.barra-fixa .btn { width: 100%; }

/* ---------- RESPONSIVO ---------- */

@media (max-width: 940px) {
  .abertura-grid { grid-template-columns: 1fr; }
  .grade-cards { grid-template-columns: repeat(2, 1fr); }
  .escolha { grid-template-columns: 1fr; }
  .fluxo, .fluxo-quatro { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .passo { grid-template-columns: 48px minmax(0, 1fr); }
  .passo-nota { grid-column: 2; grid-row: 3; margin-top: var(--s-4); }
  .editorial { display: block; }
  .editorial > h2 { max-width: 22ch; }
  .editorial > p { margin-top: var(--s-4); }
  .editorial > .etiqueta { margin-bottom: var(--s-3); }
  .lista-fora, .editorial > .fecho, .nota-tecnica { margin-top: var(--s-5); }
}

@media (max-width: 620px) {
  :root { --s-9: 64px; }
  .wrap, .topo-wrap { padding-inline: var(--s-4); }
  .grade-cards, .fluxo, .fluxo-quatro, .duas-colunas { grid-template-columns: 1fr; }
  .duas-colunas { gap: var(--s-6); }
  .passo { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .passo-num { grid-column: 1; grid-row: 1; }
  .passo h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .passo p  { grid-column: 1; grid-row: 3; }
  .passo-nota { grid-column: 1; grid-row: 4; }
  .topo .btn { display: none; }
  .barra-fixa { display: block; }
  .zap { bottom: 78px; right: var(--s-4); width: 46px; height: 46px; }
}

/* ---------- ACESSIBILIDADE ---------- */

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

@media print {
  .topo, .zap, .barra-fixa { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   MOVIMENTO
   Tudo aqui depende da classe .js-anim, posta pelo bootstrap no
   <head>. Sem JS, nenhuma regra abaixo se aplica e a página
   aparece completa.
   ============================================================ */

/* ---------- Revelação em cascata ---------- */

.js-anim .revelar {
  opacity: 0;
  transform: translateY(14px);
}
.js-anim .revelar.dentro {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

/* ---------- A conversa da abertura ---------- */

.js-anim .fig [data-msg] {
  opacity: 0;
  transform: translateY(6px);
}
.js-anim .fig [data-msg].dentro {
  opacity: 1;
  transform: none;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
/* Mensagens recebidas entram pela esquerda, enviadas pela direita:
   é a direção que a conversa tem na tela. */
.js-anim .fig .fig-recebida[data-msg] { transform: translate(-10px, 4px); }
.js-anim .fig .fig-enviada[data-msg]  { transform: translate(10px, 4px); }
.js-anim .fig .fig-recebida[data-msg].dentro,
.js-anim .fig .fig-enviada[data-msg].dentro { transform: none; }

/* ---------- Linhas de fluxo ---------- */

.js-anim .fluxo-etapa::before {
  transform: scaleX(0);
  transform-origin: left center;
}
.js-anim .fluxo-etapa::after { opacity: 0; }

.js-anim .fluxo.correndo .fluxo-etapa::before {
  transform: scaleX(1);
  transition: transform .55s var(--ease) var(--atraso-linha, 0ms);
}
.js-anim .fluxo.correndo .fluxo-etapa::after {
  opacity: 1;
  transition: opacity .3s ease calc(var(--atraso-linha, 0ms) + 300ms);
}

/* ---------- Barra de progresso de leitura ---------- */

.progresso-trilho {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 110;
  pointer-events: none;
  background: transparent;
}
.progresso-barra {
  display: block;
  height: 100%;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---------- Cabeçalho compacto ---------- */

.topo {
  transition: padding .25s var(--ease), background-color .25s var(--ease);
}
.topo-wrap { transition: padding .25s var(--ease); }
.topo.compacto .topo-wrap { padding-block: var(--s-2); }
.topo.compacto { background: rgba(10, 10, 10, .92); }

/* ---------- Botão flutuante ---------- */

.js-anim .zap {
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.js-anim .zap.visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.js-anim .zap.visivel:hover { transform: translateY(-2px); }

/* ---------- Perguntas: altura animada ---------- */

.pergunta-corpo { will-change: height; }
.pergunta summary::after { transition: transform .25s var(--ease), color .2s var(--ease); }

/* ---------- Botões: resposta ao toque ---------- */

.btn-coral { transition: background-color .2s var(--ease), transform .12s var(--ease); }
.btn-coral:active { transform: translateY(1px) scale(.99); }

/* ---------- Cartões: a luz acompanha a entrada ---------- */

.card, .escolha-opcao { transition: background-color .3s var(--ease); }

/* ============================================================
   Movimento reduzido: nada se move, tudo aparece.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js-anim .revelar,
  .js-anim .fig [data-msg],
  .js-anim .zap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-anim .fluxo-etapa::before { transform: scaleX(1) !important; }
  .js-anim .fluxo-etapa::after  { opacity: 1 !important; }
  .progresso-barra { transition: none !important; }
}

/* ============================================================
   MOVIMENTO — segunda camada
   ============================================================ */

/* ---------- Carimbo de hora e indicador de digitação ---------- */

.fig .fig-carimbo {
  font-size: 12px;
  letter-spacing: .1em;
  fill: var(--pedra-dim);
  text-anchor: start;
}
.fig .fig-carimbo-dir { text-anchor: end; }

.fig .fig-digitando rect {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1;
}
.fig .fig-digitando circle { fill: var(--pedra); }

.js-anim .fig [data-dig] {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.js-anim .fig [data-dig].dentro { opacity: 1; transform: none; }

/* Os três pontos pulsam em sequência, como em qualquer mensageiro */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .fig [data-dig].dentro circle { animation: pontinho 1.1s ease-in-out infinite; }
  .js-anim .fig [data-dig].dentro circle:nth-child(3) { animation-delay: .16s; }
  .js-anim .fig [data-dig].dentro circle:nth-child(4) { animation-delay: .32s; }
  @keyframes pontinho {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
  }
}

/* Como o roteiro é conduzido por JS, o atraso do CSS sai de cena */
.js-anim .fig [data-msg] { transition-delay: 0ms !important; }

/* ---------- Passo ativo em "Como começa" ---------- */

.passo {
  position: relative;
  transition: opacity .35s var(--ease);
}
.js-anim .passos .passo { opacity: .55; }
.js-anim .passos .passo.ativo { opacity: 1; }

.passo::after {
  content: '';
  position: absolute;
  left: -16px; top: var(--s-6); bottom: var(--s-6);
  width: 2px;
  background: var(--coral);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .4s var(--ease);
}
.js-anim .passo.ativo::after { transform: scaleY(1); }

/* ---------- Luz que segue o cursor ---------- */

.card::after,
.escolha-opcao::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
  background: radial-gradient(220px circle at var(--luz-x, 50%) var(--luz-y, 0%),
              rgba(217, 79, 48, .13), transparent 62%);
}
.card:hover::after,
.escolha-opcao:hover::after { opacity: 1; }

.escolha-opcao { position: relative; }

/* A figura da abertura acompanha o ponteiro com um brilho mais frio */
.figura::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(280px circle at var(--luz-x, 50%) var(--luz-y, 40%),
              rgba(255, 255, 255, .05), transparent 60%);
}
.figura:hover::after { opacity: 1; }

/* ---------- A escolha entre as duas opções ----------
   Passar o cursor em uma esmaece a outra: o bloco existe para
   comparar, e comparar é olhar uma de cada vez. */

.escolha:hover .escolha-opcao { opacity: .58; transition: opacity .3s var(--ease); }
.escolha:hover .escolha-opcao:hover { opacity: 1; }

/* ---------- Chamada no meio da página ----------
   Aparece depois dos dois momentos de decisão: quando a pessoa
   escolheu entre chatbot e agente, e quando entendeu o processo.
   O texto é contextual, não repete o botão do topo. */

.chamada-meio {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: 1px solid var(--borda);
}
.chamada-meio p {
  max-width: 46ch;
  font-size: var(--t-lead);
  color: var(--texto-medio);
}
.chamada-meio .btn { flex-shrink: 0; }

@media (max-width: 620px) {
  .chamada-meio {
    margin-top: var(--s-8);
    padding-top: var(--s-7);
  }
  .chamada-meio .btn { width: 100%; }
}

/* ---------- Brilho da abertura ---------- */

.abertura::before {
  transform: translateX(-50%) translateY(var(--deslize-brilho, 0px));
  transition: transform .1s linear;
}

/* ---------- Divisores que desenham ---------- */

.js-anim .bloco::before {
  transform: scaleX(.25);
  transform-origin: center;
  opacity: 0;
}
.js-anim .bloco.linha-dentro::before {
  transform: scaleX(1);
  opacity: 1;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
}

/* ---------- Números do fluxo acendem junto com a régua ---------- */

.js-anim .fluxo.correndo .fluxo-num {
  animation: acender .9s var(--ease) var(--atraso-linha, 0ms) both;
}
@keyframes acender {
  0%   { color: var(--texto-fraco); }
  35%  { color: var(--coral); }
  100% { color: var(--texto-fraco); }
}
.js-anim .fluxo.correndo .fluxo-etapa:first-child .fluxo-num { animation: none; }

/* ---------- Movimento reduzido ---------- */

@media (max-width: 620px) {
  .passo::after { left: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .fig [data-dig] { opacity: 0 !important; }
  .js-anim .passos .passo { opacity: 1 !important; }
  .js-anim .passo::after { transform: scaleY(1) !important; }
  .js-anim .bloco::before { transform: scaleX(1) !important; opacity: 1 !important; }
  .js-anim .fluxo.correndo .fluxo-num { animation: none !important; }
  .escolha:hover .escolha-opcao { opacity: 1 !important; }
  .abertura::before { transform: translateX(-50%) !important; }
}

/* ============================================================
   RIOPERFORM — PREMIUM PASS 2026
   Refinamento visual sem reescrever a copy.
   ============================================================ */

:root {
  --surface-1: #141414;
  --surface-2: #1F1F1F;
  --border-subtle: #2A2A2A;
  --border-strong: #3D3D3D;
  --t-display: clamp(2.7rem, 1.35rem + 4.2vw, 4.85rem);
  --t-h2: clamp(1.75rem, 1.15rem + 1.6vw, 2.65rem);
  --t-h3: 1.06rem;
  --maxw: 1180px;
}

body { overflow-x: hidden; }
::selection { background: var(--coral); color: var(--preto); }

/* Cabeçalho mais leve, com logo estável e CTA mais preciso */
.topo { border-bottom-color: rgba(61,61,61,.72); }
.topo-wrap { min-height: 70px; transition: min-height .25s var(--ease), padding .25s var(--ease); }
.topo.compacto .topo-wrap { min-height: 54px; }
.topo.compacto .marca { height: 30px; }
.marca { height: 38px; transition: height .25s var(--ease), opacity .2s var(--ease); }

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.16) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .65s var(--ease);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }
.btn-coral { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

/* HERO */
.abertura {
  min-height: calc(100svh - 70px);
  display: grid;
  align-items: center;
  padding-block: clamp(72px, 9vw, 132px) clamp(76px, 9vw, 124px);
}
.abertura::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.018) 8% 8.08%, transparent 8.08% 92%, rgba(255,255,255,.018) 92% 92.08%, transparent 92.08%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: auto, 100% 96px;
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
}
.abertura-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: clamp(44px, 6vw, 96px);
}
.abertura-texto { gap: 26px; position: relative; z-index: 2; }
.abertura-texto h1 { max-width: 12.4ch; text-wrap: pretty; }
.abertura-texto .chamada { max-width: 58ch; font-size: clamp(1rem, .93rem + .28vw, 1.18rem); }
.abertura-texto .micro { max-width: 60ch; line-height: 1.55; }
.abertura-texto .btn-g { margin-top: 4px; }

.figura-shell { position: relative; z-index: 2; }
.figura-toolbar, .figura-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pedra-dim);
}
.figura-toolbar {
  padding: 0 2px 12px;
}
.figura-toolbar span { display: inline-flex; align-items: center; gap: 8px; }
.figura-toolbar span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.figura-toolbar span:first-child::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(217,79,48,.08); }
.figura-foot { padding: 12px 2px 0; gap: 14px; }
.figura-foot span { flex: 1; text-align: center; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.figura {
  padding: clamp(18px, 2.1vw, 28px);
  border-color: rgba(61,61,61,.9);
  background:
    radial-gradient(80% 65% at 78% 5%, rgba(217,79,48,.06), transparent 68%),
    radial-gradient(120% 100% at 70% 0%, rgba(255,255,255,.035), transparent 60%), var(--surface-1);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}
.figura::before { opacity: .45; background-size: 32px 32px; }
.fig { filter: drop-shadow(0 14px 32px rgba(0,0,0,.15)); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 20px; height: 34px; border: 1px solid var(--border-strong); border-radius: 12px;
  opacity: .48;
}
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px; background: var(--coral); transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span { animation: cue 1.7s var(--ease) infinite; }
  @keyframes cue { 0% { transform: translate(-50%,0); opacity: 0; } 25% { opacity: 1; } 75% { opacity: .8; } 100% { transform: translate(-50%,10px); opacity: 0; } }
}

/* Seções: mais ritmo, menos sensação de template */
.bloco { padding-block: clamp(82px, 9vw, 132px); }
.editorial { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); column-gap: clamp(48px, 7vw, 104px); }
.editorial > h2 { max-width: 17ch; }
.editorial > p { font-size: clamp(.95rem, .92rem + .12vw, 1.03rem); line-height: 1.72; }

/* Sinais: uma lista editorial que parece diagnóstico, não checklist */
.sec-sinais .lista-sinais {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 48px; counter-reset: sinal; border-top: 0;
  margin-top: var(--s-7);
}
.sec-sinais .lista-sinais li {
  counter-increment: sinal;
  min-height: 118px;
  padding: 24px 0 24px 50px;
  display: flex; align-items: flex-start;
  border-top: 1px solid var(--borda);
  border-bottom: 0;
  font-size: clamp(.92rem, .88rem + .14vw, 1rem);
  line-height: 1.55;
}
.sec-sinais .lista-sinais li::before {
  content: counter(sinal, decimal-leading-zero);
  top: 27px; left: 0;
  color: var(--texto-fraco);
  font-size: 11px; letter-spacing: .14em;
}
.sec-sinais .lista-sinais li:hover { color: var(--texto-forte); }
.sec-sinais .lista-sinais li:hover::before { color: var(--coral); }
.sec-sinais .fecho { margin-top: 46px; }

/* Capacidade em bento editorial */
.sec-capacidades .grade-cards {
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 1px; background: var(--borda);
}
.sec-capacidades .card { min-height: 250px; justify-content: flex-start; padding: 30px 28px 34px; }
.sec-capacidades .card:nth-child(1) { grid-column: span 5; }
.sec-capacidades .card:nth-child(2) { grid-column: span 7; }
.sec-capacidades .card:nth-child(3) { grid-column: span 4; }
.sec-capacidades .card:nth-child(4) { grid-column: span 8; }
.sec-capacidades .card:nth-child(5) { grid-column: span 7; }
.sec-capacidades .card:nth-child(6) { grid-column: span 5; }
.sec-capacidades .card h3 { font-size: clamp(1.05rem, .96rem + .42vw, 1.3rem); max-width: 22ch; }
.sec-capacidades .card p { max-width: 54ch; line-height: 1.65; }
.sec-capacidades .card::before { margin-bottom: auto; }

/* Chatbot x agente: decisão central da página */
.sec-escolha { overflow: hidden; }
.sec-escolha::after {
  content: '';
  position: absolute; width: 760px; height: 760px; border-radius: 50%;
  right: -360px; top: 8%; pointer-events: none;
  border: 1px solid rgba(217,79,48,.06);
  box-shadow: 0 0 0 80px rgba(217,79,48,.018), 0 0 0 160px rgba(217,79,48,.012);
}
.sec-escolha .escolha { position: relative; z-index: 1; border-color: var(--border-strong); }
.sec-escolha .escolha::after {
  content: 'MESMA INFRAESTRUTURA';
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  font: 500 9px/1 var(--f-mono); letter-spacing: .14em; color: var(--pedra-dim);
  background: var(--surface-1); padding: 6px 10px; border: 1px solid var(--border-subtle); z-index: 3;
}
.sec-escolha .escolha-opcao { padding: clamp(30px, 3.5vw, 50px); min-height: 470px; }
.sec-escolha .escolha-opcao:first-child { border-right: 1px solid var(--borda); }
.sec-escolha .escolha-opcao h3 { font-size: clamp(1.25rem, 1.06rem + .5vw, 1.6rem); max-width: 24ch; }
.sec-escolha .escolha-opcao li { padding-block: 15px; }
.sec-escolha .escolha-quando { margin-top: auto; border: 1px solid var(--borda); }

/* Fluxos: trilho mais visual */
.sec-fluxo .editorial > h2 { max-width: 19ch; }
.sec-fluxo .fluxo { gap: 0; border: 1px solid var(--borda); border-radius: var(--raio-md); overflow: hidden; background: var(--borda); }
.sec-fluxo .fluxo-etapa {
  background: var(--bg); padding: 28px 22px 30px; min-height: 180px;
  border-right: 1px solid var(--borda);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.sec-fluxo .fluxo-etapa:last-child { border-right: 0; }
.sec-fluxo .fluxo-etapa::before { top: 0; height: 2px; background: var(--border-strong); }
.sec-fluxo .fluxo-etapa::after { top: 19px; left: 21px; width: 5px; height: 5px; }
.sec-fluxo .fluxo-num { margin-left: 14px; margin-bottom: 24px; }
.sec-fluxo .fluxo-etapa p { line-height: 1.55; }
.sec-fluxo .fluxo-etapa:hover { background: var(--bg-elev-2); }

/* Virada clara: um marco, não só troca de cor */
.sec-metodo { border-top: 8px solid var(--offwhite); }
.sec-metodo::after {
  content: '';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: min(320px, 60vw); height: 8px;
  background: var(--coral);
}
.sec-metodo .passos { position: relative; }
.sec-metodo .passos::before {
  content: ''; position: absolute; left: 27px; top: 32px; bottom: 32px; width: 1px; background: var(--borda-forte);
}
.sec-metodo .passo { grid-template-columns: 64px minmax(0, 4.7fr) minmax(0, 4.3fr); padding-block: 38px; }
.sec-metodo .passo-num {
  position: relative; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--claro-0); border: 1px solid var(--claro-borda-forte); border-radius: 50%;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.js-anim .sec-metodo .passo.ativo .passo-num { background: var(--coral); color: var(--preto); border-color: var(--coral); }
.sec-metodo .passo::after { left: 26px; top: 38px; bottom: 0; width: 3px; }
.sec-metodo .passo:last-child::after { bottom: 38px; }

/* Indicadores: cara de painel, sem inventar números */
.sec-metodo .indicadores-titulo { margin-top: 84px; }
.sec-metodo .lista-indicadores {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px;
  border-top: 1px solid var(--borda-forte);
}
.sec-metodo .lista-indicadores li {
  position: relative; min-height: 88px; padding: 22px 18px 22px 44px;
  border-bottom: 1px solid var(--borda); grid-template-columns: 1fr;
  align-items: center; font-size: .95rem;
}
.sec-metodo .lista-indicadores li::before { position: absolute; left: 0; top: 26px; }
.sec-metodo .lista-indicadores li::after {
  content: ''; position: absolute; left: 44px; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--coral) 0 var(--metric, 42%), transparent var(--metric, 42%)); opacity: .45;
}
.sec-metodo .lista-indicadores li:nth-child(2) { --metric: 58%; }
.sec-metodo .lista-indicadores li:nth-child(3) { --metric: 72%; }
.sec-metodo .lista-indicadores li:nth-child(4) { --metric: 48%; }
.sec-metodo .lista-indicadores li:nth-child(5) { --metric: 64%; }
.sec-metodo .lista-indicadores li:nth-child(6) { --metric: 80%; }

.preco { margin-top: 72px; padding: clamp(28px, 4vw, 48px); border-radius: var(--raio-md); }
.preco h3 { font-size: clamp(1.25rem, 1.05rem + .5vw, 1.55rem); }

/* Fit */
.sec-fit .duas-colunas { gap: 1px; border: 1px solid var(--borda); background: var(--borda); border-radius: var(--raio-md); overflow: hidden; }
.sec-fit .duas-colunas > div { background: var(--bg); padding: clamp(26px, 3vw, 42px); }
.sec-fit .coluna-titulo { border-bottom-color: var(--borda-forte); }

/* FAQ */
.sec-faq .perguntas { margin-top: var(--s-7); }
.sec-faq .pergunta summary { padding-block: 28px; font-size: clamp(1rem, .96rem + .18vw, 1.12rem); }
.sec-faq .pergunta-corpo p { font-size: .95rem; line-height: 1.7; }
.sec-faq .pergunta summary::after { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: 50%; }
.sec-faq .pergunta[open] summary::after { background: var(--coral); color: var(--preto); border-color: var(--coral); }

/* CTA final */
.sec-encerra { padding-block: clamp(96px, 12vw, 170px); overflow: hidden; }
.sec-encerra::after {
  content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border: 1px solid rgba(10,10,10,.07); box-shadow: 0 0 0 90px rgba(10,10,10,.018), 0 0 0 180px rgba(10,10,10,.012); pointer-events:none;
}
.sec-encerra .wrap { position: relative; z-index: 1; }
.sec-encerra h2 { font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.8rem); max-width: 17ch; }
.sec-encerra p { font-size: clamp(1rem, .95rem + .2vw, 1.1rem); }

/* WhatsApp: exceção solicitada — ícone permanece branco */
.zap svg path { fill: #FFFFFF !important; }

/* Motion polish */
@media (prefers-reduced-motion: no-preference) {
  .abertura-texto h1.revelar.dentro { animation: premiumTitle .9s var(--ease) both; }
  @keyframes premiumTitle { from { opacity:0; transform: translateY(18px); clip-path: inset(100% 0 -12% 0); } to { opacity:1; transform:none; clip-path: inset(0 0 -12% 0); } }
  .figura-shell.revelar.dentro { animation: premiumPanel .8s var(--ease) both; }
  @keyframes premiumPanel { from { opacity:0; transform: translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
}

@media (max-width: 940px) {
  :root { --t-display: clamp(2.55rem, 1.55rem + 4.3vw, 4rem); }
  .abertura { min-height: auto; }
  .abertura-grid { grid-template-columns: 1fr; }
  .abertura-texto h1 { max-width: 14ch; }
  .figura-shell { max-width: 650px; width: 100%; margin-inline: auto; }
  .sec-sinais .lista-sinais { grid-template-columns: 1fr; gap: 0; }
  .sec-capacidades .grade-cards { grid-template-columns: repeat(2,1fr); }
  .sec-capacidades .card:nth-child(n) { grid-column: auto; }
  .sec-capacidades .card { min-height: 230px; }
  .sec-escolha .escolha::after { display: none; }
  .sec-escolha .escolha-opcao:first-child { border-right: 0; border-bottom: 1px solid var(--borda); }
  .sec-fluxo .fluxo, .sec-fluxo .fluxo-quatro { grid-template-columns: repeat(2,1fr); }
  .sec-fluxo .fluxo-etapa { border-bottom: 1px solid var(--borda); }
  .sec-metodo .lista-indicadores { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --t-display: clamp(2.35rem, 1.6rem + 6vw, 3.35rem); --t-h2: clamp(1.65rem, 1.35rem + 2vw, 2rem); }
  .topo-wrap { min-height: 58px; }
  .marca { height: 30px; }
  .abertura { padding-top: 64px; padding-bottom: 84px; }
  .abertura-texto { gap: 22px; }
  .abertura-texto h1 { max-width: 13.5ch; }
  .figura-toolbar { font-size: 8px; letter-spacing: .1em; }
  .figura-foot { font-size: 8px; gap: 6px; }
  .scroll-cue { display: none; }
  .bloco { padding-block: 72px; }
  .sec-sinais .lista-sinais li { min-height: auto; padding: 20px 0 20px 42px; }
  .sec-capacidades .grade-cards { grid-template-columns: 1fr; }
  .sec-capacidades .card { min-height: 0; }
  .sec-escolha .escolha-opcao { min-height: 0; padding: 28px 22px; }
  .sec-fluxo .fluxo, .sec-fluxo .fluxo-quatro { grid-template-columns: 1fr; }
  .sec-fluxo .fluxo-etapa { min-height: 0; padding: 24px 20px 26px; border-right: 0; }
  .sec-metodo .passos::before { left: 18px; }
  .sec-metodo .passo { grid-template-columns: 48px 1fr; padding-block: 30px; }
  .sec-metodo .passo-num { width: 36px; height: 36px; }
  .sec-metodo .passo h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .sec-metodo .passo p { grid-column: 2; grid-row: 2; }
  .sec-metodo .passo::after { left: 17px; }
  .sec-metodo .indicadores-titulo { margin-top: 66px; }
  .sec-fit .duas-colunas { display: block; }
  .sec-fit .duas-colunas > div + div { border-top: 1px solid var(--borda); }
  .sec-faq .pergunta summary { gap: 10px; }
  .sec-faq .pergunta summary::after { flex: 0 0 28px; width: 28px; height: 28px; }
  .sec-encerra { padding-block: 92px; }
}

@media (prefers-reduced-motion: no-preference) {
  .figura-shell { transition: transform .45s var(--ease); transform-style: preserve-3d; }
  .figura-shell .figura { transform: translateZ(12px); }
  .sec-sinais .lista-sinais li { transition: color .35s var(--ease), opacity .45s var(--ease); }
  .sec-sinais .lista-sinais li.sinal-lido { opacity: 1; }
  .sec-fluxo .fluxo-etapa.etapa-em-foco { background: var(--bg-elev-2); }
  .sec-fluxo .fluxo-etapa.etapa-em-foco::before { background: var(--coral); }
}


/* ============================================================
   LP 10/10 — refinamentos de ritmo e densidade
   ============================================================ */
.grade-cards-compacta .card p { max-width: 34ch; }
.sec-mecanica .fluxo { margin-top: var(--s-8); }
.sec-mecanica .fecho { margin-top: var(--s-7); }
.sec-metodo {
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(217,79,48,.055), transparent 72%),
    var(--bg);
}
.sec-faq .perguntas { max-width: 860px; }
.sec-faq .pergunta summary { font-size: clamp(1rem, .96rem + .18vw, 1.08rem); }
@media (min-width: 941px) {
  .sec-sinais .lista-sinais { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s-7); }
  .sec-sinais .lista-sinais li:nth-child(5) { grid-column:1 / -1; }
  .sec-faq .perguntas { grid-column:1 / -1; margin-inline:auto; width:100%; }
}


/* ============================================================
   CORREÇÃO — bloco de indicadores do método
   Mantém o rótulo abaixo da timeline, sem disputar a grade do título.
   ============================================================ */
.sec-metodo .indicadores-bloco {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  margin-top: clamp(64px, 8vw, 96px);
  position: relative;
  clear: both;
}
.sec-metodo .indicadores-bloco .indicadores-titulo {
  display: block;
  margin: 0 0 var(--s-5);
  padding: 0;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--texto-fraco);
}
.sec-metodo .indicadores-bloco .lista-indicadores {
  margin-top: 0;
}
/* Neutraliza a regra antiga aplicada ao p direto da grade editorial. */
.sec-metodo > .editorial > .indicadores-titulo {
  grid-column: auto;
  margin-top: 0;
}
@media (max-width: 620px) {
  .sec-metodo .indicadores-bloco { margin-top: 58px; }
  .sec-metodo .indicadores-bloco .indicadores-titulo { margin-bottom: var(--s-4); }
}

/* ============================================================
   MÉTODO — estrutura independente da grade editorial
   Cabeçalho, timeline e indicadores não compartilham linhas de grid.
   ============================================================ */
.sec-metodo .metodo-wrap {
  display: block;
}
.sec-metodo .metodo-cabecalho {
  display: block;
  max-width: 560px;
  margin: 0;
}
.sec-metodo .metodo-cabecalho .etiqueta {
  display: block;
  margin: 0 0 var(--s-3);
}
.sec-metodo .metodo-cabecalho h2 {
  max-width: 17ch;
  margin: 0;
}
.sec-metodo .metodo-wrap > .passos {
  margin-top: clamp(52px, 6vw, 76px);
}
.sec-metodo .metodo-wrap > .indicadores-bloco {
  display: block;
  width: 100%;
  margin-top: clamp(72px, 8vw, 104px);
}
.sec-metodo .metodo-wrap > .indicadores-bloco .indicadores-titulo {
  display: block;
  position: static;
  width: auto;
  margin: 0 0 var(--s-5);
  padding: 0;
  transform: none;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--texto-fraco);
}
.sec-metodo .metodo-wrap > .indicadores-bloco .lista-indicadores {
  margin-top: 0;
}
.sec-metodo .metodo-wrap > .chamada-meio {
  margin-top: clamp(72px, 8vw, 104px);
}

@media (max-width: 620px) {
  .sec-metodo .metodo-cabecalho { max-width: none; }
  .sec-metodo .metodo-cabecalho h2 { max-width: 19ch; }
  .sec-metodo .metodo-wrap > .passos { margin-top: 44px; }
  .sec-metodo .metodo-wrap > .indicadores-bloco { margin-top: 58px; }
  .sec-metodo .metodo-wrap > .chamada-meio { margin-top: 58px; }
}