/* ============================================================
   Dattu LPs · sistema visual único, MOBILE FIRST (05/10/2026)
   FONTE ÚNICA: lps/_shared/ui.css → copiada por sync-shared.ps1
   para public/css/ui.css. NÃO editar a cópia dentro de uma LP.
   Estudo: lps/ESTUDO-UX-2026-10-05.md

   REGRA DE DESENVOLVIMENTO: o estilo base é o do celular de 360px.
   Telas maiores só ACRESCENTAM com @media (min-width: 48rem | 56rem).
   Nunca escrever max-width para "consertar" o desktop.
   Testar sempre em 360px (celular Android comum), não em 390px.
   Princípios: uma ideia por tela, cantos macios, alvo de toque >= 48px,
   campo >= 16px de fonte, estado sempre escrito (nada só por cor),
   ação principal sempre óbvia e a um toque.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--halo-1), var(--halo-2); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, select { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 1.1rem; }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Cabeçalho ---------- */
.u-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .4rem; }
.u-hd img { height: 26px; width: auto; }
.u-hd > a:first-child { display: inline-flex; align-items: center; min-height: 48px; }

/* ---------- Botões: pílula, 60px ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 60px; padding: .9rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow-cta); white-space: nowrap;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, .tab:focus-visible, summary:focus-visible, .row__main:focus-visible, .row__info:focus-visible, .step__b:focus-visible, .chip:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.btn--wide { width: 100%; }
.btn--sm { min-height: 44px; padding: .55rem 1.2rem; font-size: .92rem; box-shadow: none; }
.btn--out, .btn--soft { background: rgba(255,255,255,.08); box-shadow: none; color: var(--text); }
.btn--out:hover, .btn--soft:hover { background: rgba(255,255,255,.13); }
.btn__ico { width: 19px; height: 19px; flex: none; }
.u-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-mid); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; }
.u-link:hover { color: var(--text); text-decoration: underline; }

/* ---------- Hero ---------- */
.u-hero { display: grid; gap: 1.25rem; align-items: start; padding-block: .25rem 2rem; }
.u-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .85rem; border-radius: 999px; background: rgba(139,92,246,.16); color: var(--brand-soft); font-size: .8rem; font-weight: 700; }
.u-h1 { font-size: clamp(1.9rem, 1.2rem + 5vw, 2.5rem); margin-top: .8rem; letter-spacing: -.038em; }
.u-hero > div > .u-h1:first-child { margin-top: 0; }
.u-h1 em { font-style: normal; color: var(--brand-soft); }
.u-lead { margin-top: .7rem; font-size: 1rem; color: var(--text-mid); max-width: 32rem; }
.u-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: 1.5rem; }
.facts { display: none; }
.facts div { min-width: 0; }
.facts strong { display: block; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.1; }
.facts span { color: var(--text-soft); font-size: .85rem; }
.u-hero:not(.u-hero--split) .facts { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; margin-top: 1.75rem; }

/* ---------- Cartão (a ferramenta) ---------- */
.u-card {
  border-radius: 1.5rem; padding: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 30px 80px -26px rgba(0,0,0,.85), 0 0 0 1.5px rgba(167,139,250,.38), 0 0 60px -10px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.1);
}

/* ---------- Seções ---------- */
.u-sec { padding-block: 2.5rem; }
.u-sec h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); max-width: 22ch; }
.u-sec__sub { margin-top: .75rem; color: var(--text-mid); max-width: 34rem; }
.u-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.u-grid.snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: .9rem 1.1rem .6rem; margin-inline: -1.1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.u-grid.snap::-webkit-scrollbar { display: none; }
.u-grid.snap > * { flex: 0 0 80%; max-width: 21rem; scroll-snap-align: center; }
.feat { padding: 1.4rem; border-radius: 1.5rem; background: rgba(255,255,255,.05); min-width: 0; }
.feat__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--brand-wash); color: var(--brand-soft); margin-bottom: 1rem; }
.feat__ico svg { width: 24px; height: 24px; }
.feat h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.feat p { margin-top: .4rem; color: var(--text-mid); font-size: .95rem; }
.proof { margin-top: 1.5rem; color: var(--text-soft); font-size: .92rem; }
.proof strong { color: var(--text-mid); }

/* ---------- Planos e comparativo ---------- */
.plan { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; border-radius: 1.5rem; background: rgba(255,255,255,.05); min-width: 0; }
.plan--hot { background: linear-gradient(180deg, rgba(124,58,237,.22), rgba(124,58,237,.07)); box-shadow: 0 0 0 1.5px var(--brand-soft), 0 24px 60px -24px rgba(124,58,237,.55); }
.plan__badge { position: absolute; top: -.55rem; left: 1.4rem; padding: .25rem .75rem; border-radius: 999px; background: var(--grad-brand); font-size: .72rem; font-weight: 800; }
.plan__name { font-weight: 800; }
.plan__price { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.plan__price span { font-size: .9rem; font-weight: 600; color: var(--text-soft); letter-spacing: 0; }
.plan__for { color: var(--text-mid); font-size: .92rem; }
.plan ul { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; font-size: .92rem; color: var(--text-mid); }
.plan li::before { content: "✓"; color: var(--brand-soft); font-weight: 800; margin-right: .5rem; }
.vs .plan ul { margin-top: .9rem; gap: .6rem; }
.vs .plan li::before { content: "·"; }
.vs .plan--hot li::before { content: "✓"; }

/* ---------- Perguntas frequentes ---------- */
.faq { display: grid; gap: .7rem; margin-top: 1.75rem; max-width: 46rem; }
.faq details { border-radius: 1rem; background: rgba(255,255,255,.05); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem; font-weight: 700; position: relative; letter-spacing: -.01em; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--brand-soft); }
.faq details[open] summary::after { content: "−"; }
.faq__a { padding: 0 1.25rem 1.2rem; color: var(--text-mid); font-size: .97rem; }

/* ---------- Fecho e rodapé ---------- */
.u-cta { margin-block: 1.5rem; padding: 2rem 1.25rem; border-radius: 2rem; text-align: center; background: radial-gradient(70% 90% at 50% 0%, rgba(124,58,237,.38), transparent 70%), var(--brand-wash); }
.u-cta h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); margin-inline: auto; }
.u-cta p { margin: .8rem auto 0; color: var(--text-mid); max-width: 28rem; }
.u-cta .btn { margin-top: 1.5rem; }
.u-cta small { display: block; margin-top: 1rem; color: var(--text-soft); }
.u-ft { padding-block: 2rem 6.5rem; font-size: .85rem; color: var(--text-soft); }
.u-ft a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: .2rem; color: var(--text-mid); text-decoration: none; }
.u-ft a:hover { text-decoration: underline; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, var(--bg) 55%, transparent); transition: transform 220ms var(--ease); }
.dock .btn { width: 100%; }
.sem-dock .dock { transform: translateY(115%); pointer-events: none; }

/* ---------- Abas das ferramentas (LP 05) ---------- */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.5rem; }
.tab { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .15rem; min-height: 52px; min-width: 0; padding: .6rem .4rem; border: 0; border-radius: 1rem; background: rgba(255,255,255,.07); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.28); }
.tab strong { font-size: .88rem; line-height: 1.2; }
.tab small { display: none; font-size: .72rem; color: var(--text-soft); }
.t-l { display: none; }
.t-s { display: inline; }
.tab:hover { box-shadow: inset 0 0 0 1.5px var(--brand-soft); }
.tab[aria-selected="true"] { background: var(--brand-wash); box-shadow: inset 0 0 0 2px var(--brand-soft); }
.tab[aria-selected="true"] small { color: var(--brand-soft); }
.panel h2 { font-size: clamp(1.4rem, 1.2rem + 1.2vw, 1.9rem); letter-spacing: -.03em; }
.panel__sub { margin-top: .5rem; color: var(--text-mid); font-size: 1rem; }

/* ============ FERRAMENTAS: campos grandes, passos claros, toque fácil ============ */
.calc__form { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
.cf { display: grid; gap: .6rem; }
.cf label, .cf__lbl { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1rem; color: #fff; }
.cf input[type="text"], .cf input[type="tel"], .cf select {
  width: 100%; min-height: 60px; padding: .75rem 1rem; font-size: 1.1rem; color: var(--text);
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(167,139,250,.42); border-radius: 1rem;
}
.cf select { appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.cf select option { background: var(--base-200); color: var(--text); }
.cf input::placeholder { color: #A59DBD; }
.cf input:focus, .cf select:focus { outline: none; border-color: var(--brand-soft); background: rgba(124,58,237,.18); box-shadow: 0 0 0 4px rgba(139,92,246,.28); }
.cf input[aria-invalid="true"], .cf select[aria-invalid="true"] { border-color: var(--error); }
.cf--ok input, .cf--ok select { border-color: rgba(52,211,153,.7); }
.cf--ok > label::after { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #07130e; font-size: .72rem; font-weight: 800; }
.cf__err { color: var(--error); font-size: .9rem; font-weight: 600; }
.cf__err:empty { display: none; }
.calc__form .btn[type="submit"]::after, .stepnav .btn::after { content: "→"; font-size: 1.2em; margin-left: .2rem; }

/* opções de toque (chips): responder sem digitar */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { min-height: 52px; padding: .6rem 1.1rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.4); color: var(--text); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chip:hover { background: rgba(124,58,237,.25); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--grad-brand); box-shadow: none; color: #fff; }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.chips--grid { display: grid; grid-template-columns: 1fr; }
.chips--grid .chip { text-align: left; border-radius: 1rem; }
.cf--chips > input, .cf--chips > select.is-hidden { margin-top: 0; }
.cf--chips > select.is-hidden { display: none; }
.chips__ou { font-size: .85rem; color: var(--text-soft); }

/* progresso: já começa preenchido (progresso dado) */
.fprog { display: grid; gap: .5rem; }
.fprog__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.fprog__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7C3AED, #A78BFA); transition: width 320ms var(--ease); }
.is-ready .fprog__bar i { background: linear-gradient(90deg, #34D399, #6EE7B7); }
.fprog__t { font-size: .9rem; font-weight: 700; color: var(--brand-soft); }
.is-ready .fprog__t { color: var(--success); }

/* uma pergunta por tela no celular */
.is-stepped .cf:not(.is-active) { display: none; }
.is-stepped .cf > label { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.is-stepped:not(.is-last) .teaser, .is-stepped:not(.is-last) .btn[type="submit"] { display: none; }
.stepnav { display: flex; align-items: center; gap: .75rem; }
.stepnav .btn { flex: 1; }
.is-stepped.is-last .stepnav .btn { display: none; }
.is-stepped.is-last .stepnav { order: -1; }

/* prévia do resultado: borrada e bloqueada até completar */
.teaser { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: 1rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.3); }
.teaser__c, .teaser__a { width: 26px; height: 26px; color: var(--brand-soft); grid-row: 1; grid-column: 1; }
.teaser__a { display: none; }
.teaser__t { min-width: 0; }
.teaser__t small { display: block; color: var(--text-mid); font-size: .8rem; }
.teaser__t strong { display: block; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; filter: blur(7px); user-select: none; transition: filter 400ms var(--ease); white-space: nowrap; }
.teaser__s { font-style: normal; font-size: .72rem; font-weight: 800; padding: .3rem .65rem; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--text-mid); white-space: nowrap; }
.teaser--ready { background: linear-gradient(135deg, rgba(52,211,153,.2), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1.5px rgba(52,211,153,.55); }
.teaser--ready .teaser__c { display: none; }
.teaser--ready .teaser__a { display: block; color: var(--success); }
.teaser--ready .teaser__t strong { filter: blur(3px); }
.teaser--ready .teaser__s { background: rgba(52,211,153,.2); color: var(--success); }

/* estados da ferramenta */
.calc__pronto { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--brand-wash); color: var(--text-mid); font-size: .95rem; }
.calc__pronto strong { color: var(--text); }
.calc__gate { margin-top: 1rem; display: grid; gap: 1.25rem; padding: 1.15rem; border-radius: 1.5rem; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.35); }
.calc__gate h3 { font-size: 1.2rem; }
.calc__gate > p { color: var(--text-mid); font-size: .95rem; margin-top: -.7rem; }
.calc__consent { display: flex; gap: .7rem; align-items: flex-start; }
.calc__consent input { width: 26px; height: 26px; flex: none; margin-top: .05rem; accent-color: var(--accent); }
.calc__consent label { font-size: .85rem; color: var(--text-mid); line-height: 1.45; font-weight: 400; }
.calc__consent a { color: var(--text); }
.calc__preview { text-align: center; color: var(--text-soft); font-size: .82rem; }
.calc__res { margin-top: 1.25rem; display: grid; gap: .9rem; }
.calc__res h3 { font-size: 1.15rem; }
.calc__linha span { display: block; color: var(--text-mid); font-size: .9rem; }
.calc__linha strong { display: block; margin-top: .15rem; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); letter-spacing: -.035em; line-height: 1.1; }
.calc__linha small { display: block; margin-top: .3rem; color: var(--text-soft); font-size: .8rem; }
.calc__linha--risco strong { color: var(--brand-soft); font-size: clamp(1.3rem, 1.05rem + 1.4vw, 2rem); }
.calc__nota { color: var(--text-soft); font-size: .82rem; }
.calc__ok { color: var(--success); font-weight: 700; font-size: .92rem; }
.calc__aviso { padding: .7rem 1rem; border-radius: 1rem; background: rgba(251,191,36,.1); color: var(--warning); font-size: .84rem; }
.calc__quebra { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.calc__quebra li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .93rem; }
.calc__quebra span { color: var(--text-mid); }
.calc__quebra b { font-variant-numeric: tabular-nums; }
.calc__ck { padding: 1.1rem 1.25rem; border-radius: 1rem; background: rgba(255,255,255,.05); }
.calc__ck h3 { font-size: 1rem; }
.calc__ck ol { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--text-mid); font-size: .9rem; }
.calc__ck li strong { color: var(--text); }
.calc__refazer { justify-self: center; background: none; border: 0; color: var(--text-mid); text-decoration: underline; cursor: pointer; min-height: 48px; font-size: .92rem; }

/* módulos da calculadora da LP 05 (lista simples; a LP 03 usa a calculadora ao vivo) */
.mods { display: grid; gap: .6rem; }
.cf .mod { display: grid; grid-template-columns: auto 40px minmax(0, 1fr); gap: .75rem; align-items: center; padding: .85rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.28); cursor: pointer; font-weight: 400; font-size: 1rem; }
.cf .mod--on { background: rgba(124,58,237,.3); box-shadow: inset 0 0 0 2px var(--brand-soft); }
.cf .mod input { width: 24px; height: 24px; min-height: 0; padding: 0; accent-color: var(--accent); }
.mod__ico { width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: rgba(255,255,255,.07); color: var(--brand-soft); }
.mod__txt strong { display: block; font-size: .95rem; line-height: 1.25; }
.mod__txt span { display: block; color: var(--text-mid); font-size: .82rem; line-height: 1.35; margin-top: .1rem; }
.mod__req { display: block; color: var(--text-soft); font-size: .75rem; margin-top: .15rem; }
.mod__preco { grid-column: 3; font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.mod__preco small { color: var(--text-soft); font-weight: 400; font-size: .72rem; }
.mod__kit { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-radius: 1rem; background: rgba(124,58,237,.12); font-size: .88rem; }
.mod__kit--on { background: rgba(52,211,153,.1); }
.mod__kit .btn { min-height: 44px; padding: .4rem 1rem; font-size: .85rem; }

/* ============ CALCULADORA AO VIVO (LP 03) ============ */
.builder { display: grid; gap: 1rem; margin-top: 1.75rem; align-items: start; }
.mv__opts { display: grid; gap: 1rem; min-width: 0; }
.mv__bloco { padding: 1.25rem 1rem; border-radius: 1.5rem; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(167,139,250,.18); }
.mv__bloco h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.2rem; margin-bottom: 1rem; }
.mv__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-brand); font-size: .9rem; font-weight: 800; flex: none; }
.step { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .8rem; }
.step + .step { border-top: 1px solid rgba(255,255,255,.07); }
.step__t { min-width: 0; }
.step__t strong { display: block; font-size: 1rem; }
.step__t small { color: var(--text-soft); font-size: .8rem; }
.step__c { display: flex; align-items: center; gap: .25rem; flex: none; }
.step__b { width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(167,139,250,.22); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.5); transition: background-color var(--dur) var(--ease); }
.step__b:hover { background: var(--brand-wash); }
.step__n { min-width: 2.8rem; text-align: center; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mv__dica { margin: -.4rem 0 1rem; color: var(--text-mid); font-size: .92rem; }

/* módulos como linhas com chave liga/desliga */
.rows { display: grid; gap: .6rem; }
.row { border-radius: 1rem; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.28); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.row--on { background: rgba(124,58,237,.28); box-shadow: inset 0 0 0 2px var(--brand-soft); }
.row--fixed { background: rgba(255,255,255,.04); box-shadow: none; }
.row__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; width: 100%; padding: .8rem .9rem; min-height: 72px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.row--fixed .row__main { cursor: default; }
.row__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.09); color: var(--brand-soft); }
.row__ico svg { width: 22px; height: 22px; }
.row__txt { min-width: 0; }
.row__txt strong { display: block; font-size: 1rem; line-height: 1.2; }
.row__txt small { display: block; margin-top: .15rem; font-size: .9rem; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.row--on .row__txt small { color: var(--success); font-weight: 700; }
.row__sw { position: relative; width: 58px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.2); transition: background-color var(--dur) var(--ease); flex: none; }
.row__sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform 200ms var(--ease); }
.row--on .row__sw { background: var(--success); }
.row--on .row__sw::after { transform: translateX(24px); }
.row__ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: #07130e; font-weight: 800; font-size: .85rem; }
.row__info { display: inline-flex; align-items: center; min-height: 44px; margin: -.5rem 0 .1rem 4.3rem; padding: 0 .3rem; background: none; border: 0; color: var(--brand-soft); font-size: .88rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.row__desc { padding: 0 1rem 1rem 4.3rem; margin-top: -.3rem; color: var(--text-mid); font-size: .9rem; line-height: 1.4; }
.mv-kit { padding: .8rem .95rem; border-radius: 1rem; background: rgba(124,58,237,.14); font-size: .9rem; color: var(--text-mid); }
.mv-kit--on { background: rgba(52,211,153,.14); color: var(--success); font-weight: 700; }
.mv__ok { padding: 1.25rem; border-radius: 1.5rem; background: rgba(52,211,153,.1); display: grid; gap: .6rem; justify-items: start; }
.mv__ok p { color: var(--text-mid); font-size: .95rem; }

/* barra de preço: fixa no rodapé do celular, feita para 360px */
.sum { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: 0; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px)); border-radius: 1.5rem 1.5rem 0 0; background: #1B0F36; box-shadow: 0 -10px 40px rgba(0,0,0,.5), 0 0 0 1.5px rgba(167,139,250,.5); transform: translateY(115%); transition: transform 260ms var(--ease); }
.mv-ativo .sum { transform: none; }
.mv-ativo .dock { display: none; }
.mv-ativo .u-ft { padding-bottom: 7rem; }
.sum__top { grid-column: 1; grid-row: 1; }
.sum__rot { display: block; font-size: .8rem; font-weight: 700; color: var(--brand-soft); white-space: nowrap; }
.sum__val { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.sum__val strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum__val span { color: var(--text-mid); font-weight: 600; font-size: .9rem; }
.sum__ano, .sum__det, .sum__av { display: none; }
.sum .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 54px; padding: .6rem 1.1rem; font-size: .95rem; }
.sum .b-l { display: none; }
.sum__delta { position: absolute; top: -2.6rem; left: .9rem; padding: .35rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 800; opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); font-variant-numeric: tabular-nums; box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: none; }
.sum__delta--on { opacity: 1; transform: none; }
.sum__delta--up { background: #6D28D9; color: #fff; }
.sum__delta--down { background: #059669; color: #fff; }
.sum__det summary { cursor: pointer; font-size: .85rem; color: var(--text-mid); min-height: 44px; display: flex; align-items: center; list-style: none; }
.sum__det summary::-webkit-details-marker { display: none; }
.sum__det summary::before { content: "▸"; margin-right: .4rem; color: var(--brand-soft); }
.sum__det[open] summary::before { content: "▾"; }
.sum__det ul { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .1rem; max-height: 14rem; overflow: auto; }
.sum__det li { display: flex; justify-content: space-between; gap: .75rem; padding-block: .4rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
.sum__det li span { color: var(--text-mid); min-width: 0; overflow-wrap: anywhere; }
.sum__det li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum__av { font-size: .78rem; color: var(--warning); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes u-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes u-pulso { 0% { box-shadow: 0 8px 28px rgba(109,40,217,.42), 0 0 0 0 rgba(167,139,250,.55); } 70% { box-shadow: 0 8px 28px rgba(109,40,217,.42), 0 0 0 16px rgba(167,139,250,0); } 100% { box-shadow: 0 8px 28px rgba(109,40,217,.42), 0 0 0 0 rgba(167,139,250,0); } }
  .u-hero > * { animation: u-in .5s var(--ease) both; }
  .u-hero > *:nth-child(2) { animation-delay: .08s; }
  .panel:not([hidden]) { animation: u-in .3s var(--ease) both; }
  .is-stepped .cf.is-active { animation: u-in .25s var(--ease) both; }
  .is-ready .btn[type="submit"] { animation: u-pulso 1.9s ease-out infinite; }
}

/* ============ Telas maiores: só acrescentam ============ */
@media (min-width: 48rem) {
  .wrap { padding-inline: 2rem; }
  .u-hd { padding-block: 1.1rem; }
  .u-hero { gap: 2.5rem; padding-block: 1.5rem 3.5rem; }
  .u-h1 { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4rem); margin-top: 1rem; }
  .u-lead { font-size: 1.2rem; margin-top: 1.1rem; }
  .u-card { padding: 2.25rem; border-radius: var(--r-lg); }
  .u-sec { padding-block: 4.5rem; }
  .u-sec h2 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.6rem); }
  .u-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
  .u-grid.snap { display: grid; overflow: visible; padding: 0; margin-inline: 0; }
  .u-grid.snap > * { flex: initial; max-width: none; }
  .feat, .plan { padding: 1.75rem; }
  .plan__badge { top: -.7rem; }
  .u-cta { padding: 4rem 3rem; border-radius: 2.25rem; margin-block: 3rem; }
  .u-ft { padding-bottom: 2rem; }
  .dock { display: none; }
  .tab { align-items: flex-start; text-align: left; min-height: 68px; padding: .8rem .9rem; }
  .tab small { display: block; }
  .t-l { display: inline; }
  .t-s { display: none; }
  .chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv__bloco { padding: 1.75rem; }
  .cf .mod { grid-template-columns: auto 40px minmax(0, 1fr) auto; }
  .mod__preco { grid-column: auto; text-align: right; }
}

@media (min-width: 56rem) {
  .u-hero--split { grid-template-columns: 1fr minmax(0, 28rem); align-items: center; }
  .u-hero--split .facts { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; margin-top: 2rem; }
  .builder { grid-template-columns: minmax(0, 1fr) 21rem; }
  .sum { position: sticky; top: 1rem; left: auto; right: auto; bottom: auto; transform: none; display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1.4rem; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(124,58,237,.3), rgba(46,15,82,.6)); box-shadow: 0 0 0 1.5px rgba(167,139,250,.5), 0 28px 70px -24px rgba(124,58,237,.5); }
  .sum__top, .sum__val { grid-column: auto; grid-row: auto; }
  .sum__rot { font-size: .85rem; }
  .sum__val strong { font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); }
  .sum__val span { font-size: 1rem; }
  .sum__ano { display: block; color: var(--text-mid); font-size: .85rem; font-variant-numeric: tabular-nums; }
  .sum__det, .sum__av { display: block; }
  .sum .btn { grid-column: auto; grid-row: auto; width: 100%; min-height: 60px; padding-inline: 1.5rem; font-size: 1.05rem; }
  .sum .b-l { display: inline; }
  .sum .b-s { display: none; }
  .sum__delta { position: static; box-shadow: none; opacity: 0; transform: translateY(4px); }
  .sum__delta--on { opacity: 1; transform: none; }
  .sum__top { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; }
  .mv-ativo .u-ft { padding-bottom: 2rem; }
}

/* ============ EXPECTATIVA E RECOMPENSA (referências no estudo) ============ */
/* prévia do resultado: o desfoque diminui a cada resposta (gradiente de meta) */
.teaser__t strong { filter: blur(var(--desfoque, 7px)); }
.teaser--ready .teaser__t strong { filter: blur(2px); }
.is-stepped .teaser { order: -1; padding: .75rem 1rem; }
.is-stepped .fprog { order: -2; }
.is-stepped:not(.is-last) .btn[type="submit"] { display: none; }
.is-stepped.is-last .stepnav { order: 99; }
.is-stepped.is-last .stepnav .btn { display: none; }

/* "calculando": mostra o trabalho sendo feito (efeito de ilusão de trabalho) */
.calcando { display: grid; justify-items: center; gap: 1.25rem; padding: 1.5rem .5rem; text-align: center; }
.calcando__ring { width: 56px; height: 56px; border-radius: 50%; border: 5px solid rgba(167,139,250,.25); border-top-color: var(--brand-soft); }
.calcando__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; justify-items: start; }
.calcando__l li { display: flex; align-items: center; gap: .6rem; color: var(--text-soft); font-size: .98rem; opacity: .35; }
.calcando__l li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(167,139,250,.4); flex: none; }
.calcando__l li.on { opacity: 1; color: var(--text); }
.calcando__l li.ok { opacity: 1; color: var(--text-mid); }
.calcando__l li.ok::before { content: "✓"; display: grid; place-items: center; background: var(--success); color: #07130e; font-size: .72rem; font-weight: 800; box-shadow: none; }

/* revelação do resultado */
.calc__res--reveal > * { animation: none; }
.reveal-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--success); color: #07130e; font-size: 1.5rem; font-weight: 800; justify-self: start; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes u-gira { to { transform: rotate(360deg); } }
  @keyframes u-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes u-revela { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes u-sacode { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
  .calcando__ring { animation: u-gira .9s linear infinite; }
  .calcando__l li { transition: opacity 200ms var(--ease), color 200ms var(--ease); }
  .calcando__l li.ok::before { animation: u-pop .3s var(--ease); }
  .calc__res--reveal > * { animation: u-revela .4s var(--ease) both; }
  .calc__res--reveal > *:nth-child(2) { animation-delay: .08s; }
  .calc__res--reveal > *:nth-child(3) { animation-delay: .16s; }
  .calc__res--reveal > *:nth-child(4) { animation-delay: .24s; }
  .reveal-ico { animation: u-pop .45s var(--ease) both; }
  .chip[aria-pressed="true"] { animation: u-pop .2s var(--ease); }
  .cf--erro { animation: u-sacode .3s var(--ease); }
  .cf--ok > label::after { animation: u-pop .25s var(--ease); }
}

/* ===== calculadora compacta (10/2026): equipe, módulos em 2 colunas, ajuste recolhido ===== */
.builder--c .mv__bloco { padding: 1rem .9rem; }
.builder--c .mv__bloco h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.mv__eq { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ct { display: grid; gap: .3rem; padding: .55rem .6rem; border-radius: 1rem; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.28); min-width: 0; }
.ct__r { font-size: .8rem; color: var(--text-mid); font-weight: 700; }
.ct__c { display: flex; align-items: center; justify-content: space-between; gap: .2rem; }
.ct__b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(167,139,250,.22); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.5); flex: none; }
.ct__b:hover { background: var(--brand-wash); }
.ct__n { min-width: 2rem; text-align: center; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ct--p { padding: .4rem .5rem; }
.ct--p .ct__n { font-size: 1.15rem; }
.mcs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mc { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 48px; padding: .45rem .75rem; border: 0; border-radius: 1rem; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.28); color: inherit; font: inherit; font-size: .92rem; font-weight: 700; text-align: left; cursor: pointer; line-height: 1.15; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mc--on { background: rgba(124,58,237,.3); box-shadow: inset 0 0 0 2px var(--brand-soft); }
.mc__s { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.15); font-size: .85rem; }
.mc--on .mc__s { background: var(--success); color: #07130e; }
.mc__n { position: absolute; left: .75rem; bottom: .1rem; font-size: .66rem; font-weight: 600; color: var(--text-soft); }
.builder--c .mv__dica { margin: .6rem 0 0; min-height: 2.6em; font-size: .85rem; }
.mv__aj { margin-top: .4rem; }
.mv__aj summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--brand-soft); font-size: .88rem; font-weight: 700; list-style: none; }
.mv__aj summary::-webkit-details-marker { display: none; }
.mv__aj summary::before { content: "▸"; margin-right: .4rem; }
.mv__aj[open] summary::before { content: "▾"; }
.aj { padding-block: .6rem; border-top: 1px solid rgba(255,255,255,.1); }
.aj > strong { display: block; font-size: .9rem; margin-bottom: .4rem; }
.aj__r { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 40rem) {
  .builder--c .mv__bloco { padding: 1.25rem; }
  .mcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== LP única (10/2026): lead no topo, modal da calculadora, dock duplo ===== */
.u-card__alt { margin-top: .6rem; text-align: center; color: var(--text-mid); font-size: .92rem; }
.u-link--in { display: inline; min-height: 0; padding: .6rem .15rem; color: var(--brand-soft); font-weight: 700; text-decoration: underline; }
.u-link--in:hover { color: #fff; }
.u-fatos { margin: 0; padding: 0 0 1.25rem; color: var(--text-soft); font-size: .88rem; text-align: center; }
.u-hero .u-card .calc__gate { margin-top: 0; padding: 0; background: none; box-shadow: none; gap: 1rem; }
.u-hero .u-card .calc__gate h3 { font-size: 1.3rem; }
.u-preco { text-align: left; }
.u-preco .btn { margin-top: 1.5rem; }
.u-cta__acoes { display: grid; gap: .6rem; margin-top: 1.5rem; }
.u-cta__acoes .btn { margin-top: 0; }
.u-cta .u-link { margin-top: .75rem; gap: .5rem; justify-content: center; }
.dock--duplo { display: grid; grid-template-columns: 1fr 1.15fr; gap: .5rem; }
.dock--duplo .btn { width: 100%; padding-inline: .8rem; }
.vs .plan .btn { margin-top: 1rem; }

/* modal: tela cheia no celular (folha que sobe), caixa centralizada no desktop */
.modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; }
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(5,4,8,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal__box { position: absolute; inset: 1.25rem 0 0 0; display: flex; flex-direction: column; border-radius: 1.75rem 1.75rem 0 0; background: #0E0B1A; box-shadow: 0 -20px 80px rgba(0,0,0,.7), 0 0 0 1.5px rgba(167,139,250,.35); overflow: hidden; }
.modal__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .75rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.modal__hd h2 { font-size: 1.25rem; letter-spacing: -.03em; }
.modal__hd p { margin-top: .15rem; color: var(--text-mid); font-size: .88rem; }
.modal__x { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin: -.2rem -.2rem 0 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.modal__x svg { width: 22px; height: 22px; }
.modal__x:hover { background: rgba(255,255,255,.18); }
.modal__x:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.modal__corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .9rem .9rem 0; }
.modal .builder { margin-top: 0; padding-bottom: 0; }
.modal-aberto { overflow: hidden; }
.modal-aberto .dock { display: none; }
/* no modal o resumo é a barra de baixo da própria folha, não do navegador */
.modal .sum { position: sticky; left: auto; right: auto; bottom: 0; transform: none; margin-inline: -.9rem; border-radius: 1.25rem 1.25rem 0 0; }
.modal .sum__delta { top: -2.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] .modal__box { animation: modal-sobe 260ms var(--ease); }
  .modal[open]::backdrop { animation: modal-fundo 200ms ease-out; }
}
@keyframes modal-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes modal-fundo { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 56rem) {
  .u-fatos { display: none; }
  .modal__box { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(58rem, calc(100% - 3rem)); max-height: calc(100% - 3rem); border-radius: 2rem; }
  .modal__corpo { padding: 1.25rem 1.5rem 1.5rem; }
  .modal .sum { position: sticky; top: 0; bottom: auto; margin-inline: 0; border-radius: var(--r-lg); }
  .u-cta__acoes { grid-template-columns: auto auto; justify-content: center; }
}
@media (min-width: 56rem) and (prefers-reduced-motion: no-preference) { .modal[open] .modal__box { animation: modal-centro 240ms var(--ease); } }
@keyframes modal-centro { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }

/* LP única: menos rolagem e menos ruído (10/2026) */
.u-grid--c { gap: .6rem; margin-top: 1.25rem; }
.u-grid--c .feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: 1.25rem; }
.u-grid--c .feat__ico { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; border-radius: 14px; }
.u-grid--c .feat h3 { font-size: 1rem; }
.u-grid--c .feat p { margin-top: .1rem; font-size: .9rem; }
.u-destaque { padding-block: 1.75rem; }
.u-destaque .u-sec__sub { max-width: 38rem; }
@media (min-width: 48rem) { .u-grid--c { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-grid--c .feat { grid-template-columns: 1fr; row-gap: .5rem; padding: 1.4rem; } .u-grid--c .feat__ico { grid-row: auto; margin-bottom: .4rem; } }
/* Etapa do contato: o formulário de perguntas some e o aviso "resultado pronto" não repete o título do contato */
.calc__form[hidden] { display: none; }
.u-card #p-carteira { display: none; }
.u-card .panel:has(#g-carteira:not([hidden]), #r-carteira:not([hidden])) > h2 { display: none; }
.u-hero > * { min-width: 0; }
.u-card .calc__res strong { overflow-wrap: anywhere; }
.calc__res { grid-template-columns: minmax(0, 1fr); }
.calc__res > * { min-width: 0; }
.u-card .calc__linha--risco strong { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); }
.u-card .calc__linha strong { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.8rem); }
@media (min-width: 56rem) { .u-hero--split .facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1rem 1.75rem; } .u-hero--split .facts span { font-size: .8rem; max-width: 9rem; display: block; } }
.stepnav .u-link[hidden] { display: none; }
