/* Reduto360 Apuração 2026 · Design system · 4/4 · SEÇÕES
   Mobile primeiro: tudo nasce em uma coluna e ganha composição de 900px (tablet largo) e 1024px (notebook) em diante. */

/* ====================== CABEÇALHO ====================== */
.topo { position: fixed; inset: 0 0 auto 0; z-index: var(--z-topo); padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent; transition: background-color var(--d-3) ease, border-color var(--d-3) ease, box-shadow var(--d-3) ease, -webkit-backdrop-filter var(--d-3) ease, backdrop-filter var(--d-3) ease; }
.topo.rolou { background: var(--c-vidro); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--c-linha-2); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .9); }
.topo__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-4); min-height: var(--topo-h); }
.marca { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; min-height: var(--toque); }
.marca img { height: 2.375rem; width: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); }
.topo__nav { display: none; grid-column: 2; gap: var(--e-8); }
.topo__nav a { position: relative; padding: .5rem .125rem; font-size: var(--t-pequeno); font-weight: var(--p-medio); color: var(--c-tx-2); transition: color var(--d-2) ease; }
.topo__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; border-radius: 2px; background: var(--c-acento-400); transform: scaleX(0); transform-origin: left; transition: transform var(--d-3) var(--ease-saida); }
.topo__acoes { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--e-3); }
.topo__cta { display: none; }
@media (hover: hover) and (pointer: fine) { .topo__nav a:hover { color: var(--c-tx-1); } .topo__nav a:hover::after { transform: scaleX(1); } }
@media (max-width: 959px) { .topo__in { grid-template-columns: 1fr auto; } .topo__acoes { grid-column: 2; } }
@media (min-width: 960px) {
  .topo__nav { display: flex; }
  .topo__cta { display: inline-flex; }
  .topo__menu { display: none; }
  .marca img { height: 2.75rem; }
}

/* ====================== HERO ====================== */
.hero { position: relative; padding: calc(var(--topo-h) + env(safe-area-inset-top) + clamp(1.25rem, .6rem + 2.4vw, 2.75rem)) 0 clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; overflow: clip; }
.hero__fluxo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__grade { position: relative; display: grid; gap: var(--e-8); grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "contagem" "painel"; align-items: start; }
.hero__texto { grid-area: texto; min-width: 0; }
.hero__painel { grid-area: painel; min-width: 0; }
.hero__contagem { grid-area: contagem; min-width: 0; }
@media (min-width: 1024px) {
  .hero__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "texto painel" "contagem painel"; column-gap: var(--e-16); row-gap: var(--e-6); align-items: center; }
}

.selo-live { max-width: 100%; display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .95rem .45rem .8rem; border-radius: var(--r-pilula); border: 1px solid var(--c-linha-3); background: rgba(255, 255, 255, .045); color: var(--c-tx-2); font-size: var(--t-micro); font-weight: var(--p-semi); letter-spacing: .09em; text-transform: uppercase; animation: entra var(--d-4) var(--ease-saida) both; }
.hero__h1 { display: grid; gap: .22em; margin-top: var(--e-5); animation: entra var(--d-4) var(--ease-saida) 60ms both; }
.hero__h1a { font-size: .55em; font-weight: var(--p-semi); letter-spacing: -.02em; color: var(--c-tx-2); line-height: 1.15; }
.hero__h1b { color: var(--c-tx-1); }
.hero__h1 em { font-style: normal; color: var(--c-acento-400); }
.hero__lide { margin-top: var(--e-4); animation: entra var(--d-4) var(--ease-saida) 130ms both; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); min-height: 3.25rem; animation: entra var(--d-4) var(--ease-saida) 200ms both; }
.hero__fechado { margin-top: var(--e-4); max-width: 30rem; }
@media (max-width: 599px) { .hero__acoes .btn { width: 100%; } }
@media (max-width: 359px) { .selo-live { font-size: .6875rem; letter-spacing: .06em; gap: .5rem; padding-inline: .75rem; } }

/* contagem */
.contagem { display: grid; gap: var(--e-3); animation: entra var(--d-4) var(--ease-saida) 320ms both; }
.contagem__rotulo { font-size: var(--t-micro); font-weight: var(--p-semi); letter-spacing: .09em; text-transform: uppercase; color: var(--c-tx-3); }
.contagem__rel { display: inline-flex; align-items: flex-start; gap: var(--e-2); }
.un { display: grid; gap: .3rem; justify-items: center; min-width: clamp(3.4rem, 2.6rem + 3vw, 4.5rem); padding: .6rem .4rem .5rem; border-radius: var(--r-2); border: 1px solid var(--c-linha-2); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), var(--c-surf-1); box-shadow: var(--s-1); }
.un__n { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); font-weight: var(--p-semi); line-height: 1; letter-spacing: -.03em; min-width: 2ch; text-align: center; }
.un__u { font-size: var(--t-micro); font-weight: var(--p-medio); letter-spacing: .08em; text-transform: uppercase; color: var(--c-tx-3); }
.un__sep { align-self: center; padding-bottom: 1.1rem; font-size: 1.5rem; font-weight: var(--p-medio); color: var(--c-tx-3); }
.contagem__vivo { display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-radius: var(--r-2); border: 1px solid rgba(255, 99, 105, .4); background: rgba(255, 99, 105, .08); font-weight: var(--p-semi); }
.contagem[data-fase="vivo"] .contagem__rel, .contagem[data-fase="fim"] .contagem__rel { display: none; }
.contagem[data-fase="vivo"] .contagem__vivo, .contagem[data-fase="fim"] .contagem__vivo { display: inline-flex; }
.contagem[data-fase="fim"] .contagem__vivo { border-color: var(--c-linha-3); background: rgba(255, 255, 255, .04); }
.contagem[data-estado="fechado"] .contagem__rel .un__n { color: var(--c-tx-3); }

/* ====================== PAINEL (produto) ====================== */
.hero__painel { animation: entra 900ms var(--ease-saida) 160ms both; }
.painel { position: relative; isolation: isolate; padding: var(--e-4); border-radius: var(--r-4); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 34%), var(--c-surf-1); border: 1px solid var(--c-linha-2); box-shadow: var(--s-3); transition: box-shadow var(--d-4) var(--ease-saida), border-color var(--d-4) ease; }
.painel::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(86, 222, 146, .5), rgba(150, 182, 235, .07) 38%, rgba(150, 182, 235, .03) 66%, rgba(74, 139, 242, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.painel::after { content: ""; position: absolute; z-index: -2; inset: 8% -6% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 200, 117, .17), transparent); filter: blur(46px); pointer-events: none; }
.painel.recebeu { border-color: rgba(86, 222, 146, .5); box-shadow: var(--s-3), 0 0 0 4px rgba(86, 222, 146, .08); }
@media (min-width: 600px) { .painel { padding: var(--e-5); } }
@media (max-width: 379px) { .stat__rot { justify-items: start; text-align: left; padding-bottom: 0; } .painel { padding: var(--e-3); } }

.painel__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.painel__titulo { order: 3; flex-basis: 100%; font-size: var(--t-micro); font-weight: var(--p-semi); letter-spacing: .09em; text-transform: uppercase; color: var(--c-tx-3); }
.painel__live .ponto-live { --_cor: var(--c-live); }
@media (min-width: 420px) { .painel__titulo { order: 0; flex: 1; flex-basis: auto; text-align: center; } }
.painel__abas-caixa { position: relative; margin-top: var(--e-4); }
.abas__mais { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; background: var(--c-surf-2); }
@media (pointer: coarse) { .abas__mais { width: var(--toque); height: var(--toque); } }
.painel__corpo { display: grid; gap: var(--e-5); margin-top: var(--e-5); }
.painel__corpo > * { min-width: 0; }
.painel__stat { display: grid; gap: var(--e-3); }
.stat__linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); }
.stat__num { display: flex; align-items: baseline; font-size: var(--t-numero); font-weight: var(--p-forte); line-height: .95; letter-spacing: -.04em; color: var(--c-tx-1); min-width: min(5.5ch, 100%); }
.stat__un { margin-left: .06em; font-size: .46em; font-weight: var(--p-semi); letter-spacing: -.02em; color: var(--c-tx-3); }
.stat__rot { display: grid; justify-items: end; gap: .4rem; padding-bottom: .35rem; font-size: var(--t-legenda); color: var(--c-tx-3); text-align: right; }
.stat__sub { font-size: var(--t-legenda); color: var(--c-tx-3); }
.cands { display: grid; gap: var(--e-4); }
.cand { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem var(--e-3); }
.cand__nome { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--t-corpo); font-weight: var(--p-semi); }
.cand__val { font-size: 1.125rem; font-weight: var(--p-semi); letter-spacing: -.02em; }
.cand__barra { grid-column: 1 / -1; height: .5rem; }
.cand__tag { padding: .12rem .5rem; border-radius: var(--r-pilula); border: 1px solid rgba(86, 222, 146, .45); background: rgba(86, 222, 146, .1); color: var(--c-final); font-size: var(--t-micro); font-weight: var(--p-semi); letter-spacing: .05em; text-transform: uppercase; }
.painel__aviso { min-height: 2.9em; font-size: var(--t-legenda); line-height: 1.45; color: var(--c-tx-2); }
.painel__rodape { display: grid; gap: var(--e-4); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--c-linha-1); }
.estados { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.estados__rot { font-size: var(--t-legenda); color: var(--c-tx-3); margin-right: .25rem; }
.estado-bt { min-height: 2.25rem; padding: 0 var(--e-3); border-radius: var(--r-pilula); border: 1px solid var(--c-linha-2); background: transparent; color: var(--c-tx-3); font-size: var(--t-legenda); font-weight: var(--p-medio); transition: color var(--d-2) ease, background-color var(--d-2) ease, border-color var(--d-2) ease, transform var(--d-1) var(--ease-saida); -webkit-tap-highlight-color: transparent; }
.estado-bt:active { transform: scale(.97); }
.estado-bt[aria-pressed="true"] { color: var(--c-tx-1); background: var(--c-surf-3); border-color: var(--c-linha-3); }
.estado-bt[data-estado="2"][aria-pressed="true"] { color: var(--c-final); border-color: rgba(86, 222, 146, .45); background: rgba(86, 222, 146, .1); }
.estado-bt[data-estado="1"][aria-pressed="true"] { color: var(--c-parcial); border-color: rgba(125, 176, 255, .45); background: rgba(125, 176, 255, .1); }
@media (pointer: coarse) { .estado-bt { min-height: var(--toque); } }
@media (hover: hover) and (pointer: fine) { .estado-bt[aria-pressed="false"]:hover { color: var(--c-tx-2); border-color: var(--c-linha-3); } }
.estados__pausa { margin-left: auto; width: 2.25rem; height: 2.25rem; }
@media (pointer: coarse) { .estados__pausa { width: var(--toque); height: var(--toque); } }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--e-4); font-size: var(--t-micro); color: var(--c-tx-3); }
.meta__item--forte { font-size: var(--t-legenda); color: var(--c-tx-2); }
.meta__item--forte b { color: var(--c-tx-1); }
.painel[data-etapa="3"] .ponto-mini { background: var(--c-parcial); }
.meta__item { display: inline-flex; align-items: center; gap: .45rem; }
.meta b { color: var(--c-tx-2); font-weight: var(--p-medio); }
.ponto-mini { width: .375rem; height: .375rem; border-radius: 50%; background: var(--c-acento-400); box-shadow: 0 0 0 0 rgba(86, 222, 146, .5); }
.painel.recebeu .ponto-mini, .ponto-mini.pisca { animation: pisca 900ms var(--ease-saida); }
@keyframes pisca { from { box-shadow: 0 0 0 0 rgba(86, 222, 146, .7); } to { box-shadow: 0 0 0 .6rem rgba(86, 222, 146, 0); } }
.painel__corpo.carregando .stat__num, .painel__corpo.carregando .cand__val { color: transparent; border-radius: var(--r-1); background: var(--c-surf-2); animation: respira 1.2s ease-in-out infinite; }
.painel__corpo.carregando .barra > i { --v: 0 !important; }

/* ====================== CONFIANÇA ====================== */
.confianca { border-block: 1px solid var(--c-linha-1); background: rgba(255, 255, 255, .018); }
.confianca__lista { display: grid; gap: 0; }
.confianca__lista li { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-5) 0; }
.confianca__lista li + li { border-top: 1px solid var(--c-linha-1); }
.confianca__lista .ic { width: 1.75rem; height: 1.75rem; color: var(--c-acento-400); }
.confianca__lista b { display: block; font-size: 1.0625rem; font-weight: var(--p-semi); letter-spacing: -.01em; }
.confianca__lista span { font-size: var(--t-legenda); color: var(--c-tx-3); }
@media (min-width: 800px) {
  .confianca__lista { grid-template-columns: repeat(3, 1fr); }
  .confianca__lista li { padding: var(--e-6) var(--e-6); justify-content: center; }
  .confianca__lista li + li { border-top: 0; border-left: 1px solid var(--c-linha-1); }
}

/* ====================== MAPA ====================== */
.mapa { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.mapa__tela { padding: var(--e-4); display: grid; gap: var(--e-4); align-content: start; }
.mapa__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); }
.legenda-estados { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-legenda); color: var(--c-tx-2); }
.legenda-estados li { display: inline-flex; align-items: center; gap: .45rem; }
.leg { display: inline-block; width: .875rem; height: .875rem; border-radius: .25rem; }
.leg--vazio { border: 1px solid var(--c-vazio); background: repeating-linear-gradient(135deg, rgba(141, 162, 194, .55) 0 2px, transparent 2px 5px); }
.leg--parcial { background: linear-gradient(90deg, #1f3a60, var(--c-azul-500)); }
.leg--final { background: var(--c-final); }
.mapa__svg { width: 100%; height: auto; max-height: 36rem; margin-inline: auto; overflow: visible; touch-action: manipulation; }
.mapa__svg:focus-visible { outline: 2px solid var(--c-acento-400); outline-offset: 6px; border-radius: var(--r-2); }
.mapa__svg .uf { fill: var(--_f, var(--c-surf-3)); stroke: #050b17; stroke-width: 26; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill var(--d-3) ease, filter var(--d-2) ease, stroke var(--d-2) ease, opacity 700ms var(--ease-saida) calc(var(--k, 0) * 24ms); -webkit-tap-highlight-color: transparent; }
.mapa__svg.entrando .uf { opacity: 0; }
.mapa__svg .uf[data-st="vazio"] { fill: url(#hachura-vazio); }
.mapa__svg .uf[data-st="parcial"] { --_f: #2f5a93; }   /* valor fixo para motores sem color-mix (iOS <= 16.1, Chrome <= 110) */
@supports (color: color-mix(in oklab, red, blue)) { .mapa__svg .uf[data-st="parcial"] { --_f: color-mix(in oklab, #1c3558 calc((1 - var(--ap)) * 100%), #4a8bf2 calc(var(--ap) * 100%)); } }
.mapa__svg .uf[data-st="final"] { --_f: var(--c-acento-500); }
.mapa__svg .uf.sel { stroke: #fff; stroke-width: 44; filter: brightness(1.15); }
.mapa__svg .uf:focus-visible { stroke: #fff; stroke-width: 44; filter: brightness(1.15); }
.mapa__svg .uf.ping { animation: ping-uf 1100ms var(--ease-saida); }
@keyframes ping-uf { 0% { filter: brightness(2.1); } 100% { filter: brightness(1); } }
.mapa__svg .uf-hit { fill: transparent; stroke: none; cursor: pointer; }
/* animação do mapa: pacotes que caem do alto até o estado, anéis que se abrem onde o dado chegou, anel lento no estado escolhido */
.mapa__svg .pacote { will-change: transform; }
.mapa__svg .pacote__ponto { fill: var(--c-acento-300); }
.mapa__svg .pacote__rastro { stroke: url(#rastro-pacote); stroke-width: 34; stroke-linecap: round; }
.mapa__svg .anel { fill: none; stroke: var(--c-azul-400); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.mapa__svg .anel--final { stroke: var(--c-acento-400); }
.mapa__svg .anel--sel { stroke: #fff; animation: anel-sel 2.6s var(--ease-saida) infinite; }
@keyframes anel-sel { from { transform: scale(120); opacity: .55; } to { transform: scale(620); opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .mapa__svg .uf:hover { filter: brightness(1.22); stroke: rgba(255, 255, 255, .85); stroke-width: 36; } }
.mapa__info { padding: var(--e-5); display: grid; gap: var(--e-5); align-content: start; }
.uf__vazio { display: flex; align-items: center; gap: var(--e-3); min-height: 12rem; color: var(--c-tx-3); font-size: var(--t-pequeno); }
.uf__vazio .ic { width: 1.75rem; height: 1.75rem; flex: none; color: var(--c-acento-400); }
.uf__dados { display: grid; gap: var(--e-3); }
.uf__nome { font-size: 1.75rem; font-weight: var(--p-forte); letter-spacing: -.03em; line-height: 1.1; }
.uf__pct { display: flex; align-items: baseline; gap: .25rem; margin-top: var(--e-2); }
.uf__num { font-size: 3rem; font-weight: var(--p-forte); letter-spacing: -.04em; line-height: 1; min-width: 4.5ch; }
.uf__un { font-size: 1.25rem; font-weight: var(--p-semi); color: var(--c-tx-3); }
.uf__rot { margin-left: .4rem; font-size: var(--t-pequeno); color: var(--c-tx-3); }
.uf__chip { justify-self: start; }
.uf__cargos { display: grid; gap: var(--e-2); margin-top: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--c-linha-1); }
.uf__cargos li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); font-size: var(--t-pequeno); color: var(--c-tx-2); }
.uf__cargos li span { font-size: var(--t-legenda); color: var(--c-tx-3); }
.uf__cargo-dir { display: flex; align-items: baseline; gap: .6rem; }
.mapa__nota { align-self: end; }
@media (min-width: 900px) {
  .mapa { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--e-5); }
  .mapa__tela { padding: var(--e-6); }
}
.promessa { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--e-4); margin-top: var(--e-8); max-width: 46rem; color: var(--c-tx-2); line-height: 1.55; text-wrap: pretty; }
.promessa__chip { font-family: var(--f-dado); font-size: 1.25rem; padding: .35rem .8rem; margin-top: .1rem; }
.promessa span:not(.chip) { color: var(--c-tx-1); font-weight: var(--p-semi); }

/* ====================== NÍVEIS ====================== */
.niveis { display: grid; gap: var(--e-8); grid-template-columns: minmax(0, 1fr); counter-reset: nivel; }
.nivel { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-5); align-items: center; }
.nivel h3 { grid-column: 2; }
.nivel p { grid-column: 2; color: var(--c-tx-2); font-size: var(--t-pequeno); margin-top: calc(var(--e-1) * -1); }
.nivel__vis { grid-row: 1 / span 2; width: 6.5rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-3); border: 1px solid var(--c-linha-2); background: var(--c-surf-1); box-shadow: var(--s-1); overflow: hidden; transition: border-color var(--d-4) ease, box-shadow var(--d-4) ease, background-color var(--d-4) ease; }
.nivel__vis svg { width: 82%; height: 82%; overflow: hidden; }
.nivel:not(:last-child)::after { content: ""; position: absolute; left: 3.25rem; top: 6.5rem; height: calc(100% - 6.5rem + var(--e-8)); width: 2px; background: linear-gradient(180deg, var(--c-acento-400), var(--c-linha-2)); transform: scaleY(0); transform-origin: top; transition: transform 800ms var(--ease-vai-volta) 200ms; opacity: .8; }
.nivel.ativo:not(:last-child)::after { transform: scaleY(1); }
.nivel.ativo .nivel__vis { border-color: rgba(86, 222, 146, .45); background: linear-gradient(180deg, rgba(86, 222, 146, .08), transparent), var(--c-surf-1); box-shadow: var(--s-2); }
.nivel__vis .n-base { fill: var(--c-surf-3); stroke: #050b17; stroke-width: 18; stroke-linejoin: round; transition: fill var(--d-4) ease; }
.nivel.ativo .n-base { fill: #24476f; }
.nivel__vis .n-alvo { fill: var(--c-acento-500); stroke: #050b17; stroke-width: 18; stroke-linejoin: round; }
.nivel__vis .n-ponto { fill: var(--c-azul-400); opacity: .75; }
.nivel__vis .n-seu { fill: var(--c-acento-300); }
.nivel__vis .n-anel { fill: none; stroke: var(--c-acento-300); stroke-width: 22; opacity: .9; }
@media (min-width: 900px) {
  .niveis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
  .nivel { grid-template-columns: 1fr; justify-items: start; gap: var(--e-3); }
  .nivel h3, .nivel p { grid-column: 1; }
  .nivel p { margin-top: 0; }
  .nivel__vis { grid-row: auto; width: 100%; max-width: 12rem; }
  .nivel:not(:last-child)::after { left: calc(min(100%, 12rem) + var(--e-3)); top: 6rem; width: calc(100% - min(100%, 12rem) + var(--e-6) - var(--e-3) * 2); height: 2px; background: linear-gradient(90deg, var(--c-acento-400), var(--c-linha-2)); transform: scaleX(0); transform-origin: left; }
  .nivel.ativo:not(:last-child)::after { transform: scaleX(1); }
}

/* ====================== COMO FUNCIONA ====================== */
.passos { display: grid; gap: var(--e-8); grid-template-columns: minmax(0, 1fr); }
.passo { position: relative; display: grid; gap: var(--e-3); padding-top: var(--e-6); border-top: 1px solid var(--c-linha-2); }
.passo::before { content: ""; position: absolute; top: -1px; left: 0; width: 3.5rem; height: 2px; background: var(--c-acento-400); }
.passo__n { position: absolute; top: var(--e-4); right: 0; font-size: 3.5rem; font-weight: var(--p-forte); line-height: 1; letter-spacing: -.04em; color: rgba(150, 182, 235, .22); }
.passo__icone { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-2); background: var(--c-acento-suave); border: 1px solid rgba(86, 222, 146, .28); color: var(--c-acento-400); }
.passo__icone .ic { width: 1.5rem; height: 1.5rem; }
.passo h3 { margin-top: var(--e-2); max-width: 18ch; }
.passo p { color: var(--c-tx-2); max-width: 30ch; }
@media (min-width: 800px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-10); } }

/* ====================== RECURSOS (bento) ====================== */
.bento { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.recurso { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6); border-radius: var(--r-3); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%), var(--c-surf-1); border: 1px solid var(--c-linha-2); box-shadow: var(--s-1); overflow: hidden; transition: border-color var(--d-3) ease, transform var(--d-3) var(--ease-saida); }
.recurso__ic { width: 1.75rem; height: 1.75rem; color: var(--c-acento-400); }
.recurso p { color: var(--c-tx-2); font-size: var(--t-pequeno); max-width: 34ch; }
.recurso__vis { margin-top: auto; padding-top: var(--e-4); }
@media (hover: hover) and (pointer: fine) { .recurso:hover { border-color: var(--c-linha-3); } }
.recurso--dados { background: radial-gradient(70% 90% at 100% 0%, rgba(47, 200, 117, .14), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--c-surf-1); }
.recurso--auto { background: radial-gradient(70% 90% at 0% 0%, rgba(74, 139, 242, .15), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--c-surf-1); }
.recurso__vis--fonte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); font-size: var(--t-legenda); color: var(--c-tx-3); }
.recurso__vis--tick { display: flex; align-items: center; gap: .55rem; font-size: var(--t-legenda); color: var(--c-tx-3); }
.recurso__vis--tick b { color: var(--c-tx-1); font-weight: var(--p-semi); }
.recurso__vis--mapa { max-width: 9rem; }
.recurso__vis--mapa svg { width: 100%; height: auto; }
.recurso__vis--mapa .n-base { fill: var(--c-surf-3); stroke: var(--c-surf-1); stroke-width: 24; stroke-linejoin: round; }
.recurso__vis--mapa .n-base:nth-child(3n) { fill: #24476f; } .recurso__vis--mapa .n-base:nth-child(5n) { fill: #1c6b49; }
.recurso__vis--telas { display: flex; align-items: flex-end; gap: var(--e-3); }
.tela { position: relative; display: block; border: 2px solid var(--c-linha-3); border-radius: .5rem; background: linear-gradient(180deg, var(--c-surf-3), var(--c-surf-2)); }
.tela::after { content: ""; position: absolute; inset: 22% 14% auto; height: 24%; border-radius: .25rem; background: var(--c-acento-400); opacity: .75; }
.tela--cel { width: 2.125rem; height: 3.875rem; border-radius: .6rem; }
.tela--tab { width: 3.5rem; height: 4.625rem; border-radius: .65rem; }
.tela--pc { width: 6rem; height: 3.875rem; }
.tela--pc::before { content: ""; position: absolute; left: -.6rem; right: -.6rem; bottom: -.7rem; height: .35rem; border-radius: 0 0 .5rem .5rem; background: var(--c-linha-3); }
.recurso__vis--simples { display: grid; gap: var(--e-3); }
.recurso__vis--simples b { font-size: 2.5rem; font-weight: var(--p-forte); line-height: 1; letter-spacing: -.04em; }
.recurso--gratis { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-5); background: radial-gradient(60% 140% at 0% 50%, rgba(47, 200, 117, .16), transparent 70%), var(--c-surf-1); }
.recurso__gratis-txt { display: flex; align-items: center; gap: var(--e-4); }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recurso--dados, .recurso--gratis { grid-column: span 2; }
}
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .recurso--dados { grid-column: span 7; } .recurso--auto { grid-column: span 5; }
  .recurso--brasil, .recurso--multi, .recurso--simples { grid-column: span 4; }
  .recurso--gratis { grid-column: span 12; }
}

/* ====================== BRINDE ====================== */
.secao--brinde { overflow: hidden; overflow: clip; }
.brinde { display: grid; gap: var(--e-10); align-items: center; grid-template-columns: minmax(0, 1fr); }
.brinde__texto { display: grid; gap: var(--e-5); justify-items: start; }
.brinde__texto .h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.brinde__opcoes { display: grid; gap: var(--e-3); }
.brinde__opcoes li { display: flex; align-items: flex-start; gap: var(--e-3); color: var(--c-tx-2); font-size: var(--t-pequeno); line-height: 1.5; }
.brinde__opcoes .ic { margin-top: .12rem; color: var(--c-acento-400); }
.brinde__palco { position: relative; display: grid; place-items: center; }
.brinde__palco::before { content: ""; position: absolute; inset: 10% 6%; border-radius: 40px; background: radial-gradient(60% 60% at 50% 45%, rgba(47, 200, 117, .14), transparent 70%); filter: blur(16px); }
.colinha { position: relative; width: min(100%, 25rem); padding: var(--e-5) var(--e-4) var(--e-4); border-radius: var(--r-4); background: #060c18; border: 1px solid var(--c-linha-3); box-shadow: var(--s-3); transform: rotate(.8deg); }
.colinha__selo { position: absolute; top: -.7rem; right: 1.1rem; padding: .35rem .7rem; border-radius: var(--r-pilula); background: var(--c-acento-400); color: var(--c-sobre-acento); font-size: var(--t-micro); font-weight: var(--p-forte); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6); }
.colinha__topo { display: grid; gap: .25rem; margin-bottom: var(--e-4); }
.colinha__topo b { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); font-weight: var(--p-black); letter-spacing: -.04em; line-height: 1; }
.colinha__topo span { font-size: var(--t-micro); font-weight: var(--p-medio); letter-spacing: .09em; text-transform: uppercase; color: var(--c-tx-3); }
.colinha__grade { display: grid; grid-template-columns: 1fr; gap: var(--e-2); }
.cel { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--e-3); align-items: center; padding: .5rem .75rem .5rem .5rem; border-radius: var(--r-2); background: #fff; color: #0a1020; min-width: 0; }
.cel__foto { position: relative; overflow: hidden; display: grid; place-items: center; width: 3.5rem; height: 4.75rem; border-radius: .5rem; background: linear-gradient(160deg, #5b6f8f, #2c3b57); color: #fff; font-weight: var(--p-black); font-size: 1.25rem; }
.cel__foto::after { content: ""; position: absolute; left: 50%; bottom: -.9rem; width: 3rem; height: 2.4rem; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, .28); }
.cel:nth-child(2n) .cel__foto { background: linear-gradient(160deg, #6b7f9f, #3a4a66); }
.cel:nth-child(3n) .cel__foto { background: linear-gradient(160deg, #50627f, #24304a); }
.cel__dados { display: grid; gap: 1px; min-width: 0; }
.cel__dados small { font-size: .6875rem; font-weight: var(--p-semi); letter-spacing: .06em; text-transform: uppercase; color: #4a5b78; line-height: 1.2; }
.cel__dados strong { font-family: var(--f-dado); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: var(--p-medio); letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cel__dados span { font-size: .75rem; font-weight: var(--p-forte); color: #1f2c44; overflow-wrap: anywhere; line-height: 1.2; }
.colinha__rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--c-linha-2); font-size: var(--t-micro); line-height: 1.4; color: var(--c-tx-3); }
.colinha__rodape b { color: var(--c-acento-400); font-weight: var(--p-medio); }
.colinha.espera .cel { opacity: 0; transform: translateY(.5rem) scale(.96); }
.colinha .cel { transition: opacity 500ms var(--ease-saida) calc(var(--k, 0) * 70ms), transform 500ms var(--ease-saida) calc(var(--k, 0) * 70ms); }
@media (min-width: 480px) { .colinha__grade { grid-template-columns: 1fr 1fr; } .colinha { padding-inline: var(--e-5); } }
@media (min-width: 900px) { .brinde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-16); } }
@media (prefers-reduced-motion: reduce) { .colinha { transform: none; } .colinha.espera .cel { transform: none; } }

/* ====================== CADASTRO ====================== */
.secao--cadastro { background: radial-gradient(80% 60% at 50% 0%, rgba(47, 200, 117, .08), transparent 70%); }
.cadastro { display: grid; gap: var(--e-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
.cadastro__texto { display: grid; gap: var(--e-5); justify-items: start; }
.cadastro__lista { display: grid; gap: var(--e-3); margin-top: var(--e-2); }
.cadastro__lista li { display: flex; align-items: center; gap: var(--e-3); color: var(--c-tx-2); }
.cadastro__lista .ic { color: var(--c-acento-400); width: 1.375rem; height: 1.375rem; }
.cadastro__caixa { padding: var(--e-5); border-radius: var(--r-4); box-shadow: var(--s-3); }
.cadastro__encaminhar, .cadastro__fechado { display: grid; gap: var(--e-4); justify-items: start; }
.cadastro__encaminhar > .ic, .cadastro__fechado > .ic { width: 2rem; height: 2rem; color: var(--c-acento-400); }
.cadastro__encaminhar p, .cadastro__fechado p { color: var(--c-tx-2); }
.cadastro__slot:empty { display: none; }
@media (min-width: 600px) { .cadastro__caixa { padding: var(--e-8); } }
@media (min-width: 900px) { .cadastro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--e-16); } .cadastro__texto { position: sticky; top: calc(var(--topo-h) + var(--e-8)); } }

/* formulário (mesmo componente na seção e na folha) */
.cform { display: grid; gap: var(--e-5); }
.cform__etapas { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-legenda); color: var(--c-tx-3); }
.cform__etapas li { display: inline-flex; align-items: center; gap: .5rem; }
.cform__etapas li span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--c-linha-3); font-size: var(--t-micro); font-weight: var(--p-semi); transition: background-color var(--d-3) ease, color var(--d-3) ease, border-color var(--d-3) ease; }
.cform__etapas li + li::before { content: ""; width: 1.25rem; height: 1px; background: var(--c-linha-3); margin-right: .25rem; }
.cform__etapas em { font-style: normal; }
.cform__etapas li[aria-current="step"] { color: var(--c-tx-1); }
.cform__etapas li[aria-current="step"] span { background: var(--c-acento-400); border-color: var(--c-acento-400); color: var(--c-sobre-acento); }
.cform__etapas li[data-feito] span { background: var(--c-acento-suave); border-color: rgba(86, 222, 146, .5); color: var(--c-acento-400); }
.cform__alternar { font-size: var(--t-pequeno); color: var(--c-tx-3); text-align: center; }
.cform__alternar button { min-height: var(--toque); padding: 0 .25rem; font-weight: var(--p-medio); }
.cform__passo { display: grid; gap: var(--e-4); }
.cform__duas { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .cform__duas { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
@media (max-width: 379px) { .cform__etapas li:not([aria-current="step"]) em { display: none; } .cform__etapas li + li::before { width: .75rem; } .folha__corpo, .folha__topo { padding-inline: var(--e-4); } }
.cform__legais { display: grid; gap: var(--e-1); margin-top: var(--e-1); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); border: 1px solid var(--c-linha-1); background: rgba(255, 255, 255, .02); }
.cform__aviso summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--toque); font-size: var(--t-pequeno); font-weight: var(--p-medio); color: var(--c-azul-400); list-style: none; }
.cform__aviso summary::-webkit-details-marker { display: none; }
.cform__aviso summary .ic { transition: transform var(--d-3) var(--ease-saida); }
.cform__aviso[open] summary .ic { transform: rotate(180deg); }
.cform__aviso p { max-height: 11rem; overflow: auto; padding: var(--e-3); margin-bottom: var(--e-2); border-radius: var(--r-1); background: var(--c-surf-2); font-size: var(--t-legenda); line-height: 1.55; color: var(--c-tx-2); white-space: pre-line; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__nota { display: flex; align-items: flex-start; gap: .5rem; }
.cform__nota .ic { margin-top: .1rem; flex: none; width: 1.1em; height: 1.1em; }
.cform__msg { color: var(--c-tx-2); }
.cform__linhas { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.cform__pronto { justify-items: center; text-align: center; padding-block: var(--e-4); }
.cform__ok { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--c-acento-suave); border: 1px solid rgba(86, 222, 146, .5); color: var(--c-acento-400); animation: ok-entra 700ms var(--ease-saida) both; }
.cform__ok .ic { width: 2.5rem; height: 2.5rem; }
@keyframes ok-entra { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } }
.cform__passo:not([hidden]) { animation: entra var(--d-3) var(--ease-saida) both; }

/* ====================== FAQ ====================== */
.faq { display: grid; gap: var(--e-8); grid-template-columns: minmax(0, 1fr); }
.faq .secao__cab { margin-bottom: 0; }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--e-16); } .faq .secao__cab { position: sticky; top: calc(var(--topo-h) + var(--e-8)); align-self: start; } }

/* ====================== RODAPÉ ====================== */
.rodape { position: relative; margin-top: var(--e-12); padding: var(--e-12) 0 calc(var(--barra-h) + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-linha-2); background: linear-gradient(180deg, transparent, rgba(4, 8, 16, .9)); }
.rodape__in { display: grid; gap: var(--e-10); }
.rodape__marca { display: grid; gap: var(--e-5); max-width: 34rem; justify-items: start; }
.rodape__marca img { width: 11rem; height: auto; }
.rodape__marca p { color: var(--c-tx-3); font-size: var(--t-pequeno); line-height: 1.6; }
.rodape__bsc { display: flex; align-items: center; gap: var(--e-4); }
.rodape__bsc span { font-size: var(--t-micro); font-weight: var(--p-medio); letter-spacing: .09em; text-transform: uppercase; color: var(--c-tx-3); }
.rodape__bsc img { width: 7.5rem; height: auto; opacity: .92; }
.rodape__links ul { display: grid; gap: var(--e-1); }
.rodape__links a { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--toque); color: var(--c-tx-2); font-size: var(--t-pequeno); transition: color var(--d-2) ease; }
.rodape__links .ic { width: 1em; height: 1em; }
.rodape__fim { margin-top: var(--e-10); padding-top: var(--e-5); border-top: 1px solid var(--c-linha-1); }
@media (hover: hover) and (pointer: fine) { .rodape__links a:hover { color: var(--c-tx-1); } }
@media (min-width: 700px) { .rodape__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } .rodape__links ul { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .rodape { padding-bottom: var(--e-12); } }

/* ====================== MOVIMENTO REDUZIDO (por último: vence as regras das seções) ====================== */
@media (prefers-reduced-motion: reduce) {
  .selo-live, .hero__h1, .hero__lide, .hero__acoes, .hero__fatos, .contagem, .hero__painel, .cform__passo:not([hidden]) { animation: entra-suave var(--d-3) ease both; }
  .cform__ok, .mapa__svg .uf.ping, .ponto-mini, .painel.recebeu .ponto-mini { animation: none; }
  .nivel::after, .abas__ind { transition-duration: 0s; }
}