/* Páginas de apresentação do Qualo. A grade, o cabeçalho e os botões vêm do kit (public/assets/system.css);
   aqui fica o desenho da página: seções na altura do conteúdo, hierarquia forte, telas do produto em HTML. */

/* ── base ── */
body { background: var(--p-bg); color: var(--p-ink); font-family: var(--font-text); }
/* Google Sans Flex no arredondado máximo, em tudo (inclusive botões, campos e telas de exemplo) */
html, body, button, input, select, textarea, .ui { font-variation-settings: "ROND" 100; }
* { font-variation-settings: inherit; }
.fl-logo { height: 30px; width: auto; display: block; color: var(--ink); }
.ui { --fx-bg: var(--fl-ui); --fx-surface: var(--fl-ui-2); --fx-ink: var(--p-ink); --fx-muted: var(--p-muted); --fx-accent: var(--p-accent); --fx-accent-ink: var(--p-accent-ink); --ui-font: var(--font-text); }

main > section.fl-sec, main > section.fl-hero, main > section.fl-fecho, section.fl-fecho { height: auto !important; min-height: 0 !important; padding: 104px 0; }
main > section.fl-sec > .wrap, main > section.fl-hero > .wrap { height: auto; display: block; }
@media (max-width: 639px) { main > section.fl-sec, section.fl-fecho { padding: 64px 0; } }

h1, h2, h3 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(30px, 2.4vw + 12px, 46px); line-height: 1.08; margin: 0; }
h3 { font-size: 20px; line-height: 1.25; margin: 0; }

.fl-cab { max-width: 760px; margin-bottom: 48px; display: grid; gap: 16px; }
.fl-cab--centro { margin-inline: auto; text-align: center; justify-items: center; }
.fl-cab__txt { margin: 0; font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.fl-selo { margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: color-mix(in oklab, var(--p-accent) 12%, var(--p-bg)); color: color-mix(in oklab, var(--p-accent) 80%, var(--p-ink)); font: 600 14px/1.2 var(--font-text); }

/* botões: sólidos, com peso, uma altura */
.btn { font-weight: 600; border-radius: 12px; height: 48px; padding: 0 22px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; border-radius: 14px; }
.btn--primary { background: var(--p-action); color: var(--p-action-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--p-action) 86%, #000); }
.btn--secondary { background: var(--fl-ui); color: var(--p-ink); border: 1px solid var(--fl-borda); }
.btn--secondary:hover { background: var(--fl-ui-2); }
.btn--zap { background: #1fa855; color: #fff; }
.btn--zap:hover { background: #188f47; }
.fl-ico-zap { width: 20px; height: 20px; }
.fl-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fl-botoes--centro { justify-content: center; margin-top: 48px; }
@media (max-width: 639px) { .fl-botoes .btn { width: 100%; } }

/* ── hero ── */
main > section.fl-hero { padding: calc(var(--nav) + 72px) 0 96px; overflow: hidden; }
.fl-hero > .wrap { display: grid !important; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 48px; align-items: center; }
.fl-hero__texto { display: grid; gap: 22px; }
.fl-hero h1 { margin: 0; font-size: clamp(38px, 2.6vw + 18px, 58px); line-height: 1.02; letter-spacing: -0.035em; }
.fl-hero__lead { margin: 0; font-size: clamp(17px, .5vw + 15px, 21px); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.fl-hero .fl-botoes { margin-top: 10px; }
.fl-hero__vis, .fl-marca__vis { position: relative; padding: 0 64px 96px 0; }
.fl-hero__vis .fl-cel, .fl-marca__vis .fl-cel { position: absolute; right: 0; bottom: 0; width: 190px; aspect-ratio: auto; }
.fl-toast { position: absolute; left: -28px; bottom: 36px; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 20px 44px -18px rgb(0 0 0 / .35); font: 400 14px/1.3 var(--font-text); }
.fl-toast b { display: block; font-weight: 600; } .fl-toast small { color: var(--muted); }
.fl-toast__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1fa855; color: #fff; font-weight: 700; }
@media (max-width: 1023px) {
  .fl-hero > .wrap { grid-template-columns: minmax(0, 1fr); }
  .fl-hero__vis .fl-cel { right: 0; width: 180px; }
  .fl-toast { left: 0; }
}
@media (max-width: 639px) {
  main > section.fl-hero { padding: calc(var(--nav) + 40px) 0 56px; }
  .fl-hero__vis .fl-cel, .fl-toast { display: none; }
  .fl-hero__vis { padding: 0; }
}

/* ── a tela inicial (janela) e o celular, em HTML ── */
.fl-win { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: var(--fl-ui); color: var(--p-ink); border: 1px solid var(--fl-borda); border-radius: 18px; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .45); font: 400 14px/1.4 var(--font-text); text-align: left; }
.fl-win__topo { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--fl-borda); }
.fl-win__topo > b { font: 600 15px/1 var(--font-display); white-space: nowrap; }
.fl-win__sim { width: 32px; height: 32px; flex: none; display: grid; border-radius: 9px; overflow: hidden; }
.fl-win__sim img, .fl-win__sim svg { width: 100%; height: 100%; display: block; }
.fl-win__busca { margin-left: auto; margin-right: auto; width: min(320px, 34%); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--fl-borda); color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; }
.fl-win__sino { position: relative; width: 18px; height: 18px; border: 2px solid var(--muted); border-radius: 7px 7px 4px 4px; }
.fl-win__sino i { position: absolute; right: -9px; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--m); color: #fff; font: 700 10px/16px var(--font-text); text-align: center; font-style: normal; }
.fl-win__av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--m) 18%, var(--fl-ui)); color: color-mix(in oklab, var(--m) 75%, var(--p-ink)); font: 700 11px/1 var(--font-text); }
.fl-win__corpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 20px; padding: 22px; }
.fl-win__ola { grid-column: 1; }
.fl-win__curso { margin: 0; color: var(--m); font: 700 12px/1.2 var(--font-text); }
.fl-win__nome { margin: 4px 0 2px; font: 600 26px/1.1 var(--font-display); letter-spacing: -0.02em; }
.fl-win__sub { margin: 0; color: var(--muted); }
.fl-win__cont { grid-column: 1; display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px; border-radius: 14px; background: var(--fl-ui-2); align-items: center; }
.fl-win__thumb { aspect-ratio: 16/10; border-radius: 10px; background: var(--m); display: grid; place-items: center; }
.fl-win__thumb i { width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / .95); position: relative; }
.fl-win__thumb i::after { content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%; border: 8px solid transparent; border-left: 12px solid var(--m); border-right: 0; }
.fl-win__cont-txt { display: grid; gap: 6px; }
.fl-win__cont-txt small { color: var(--muted); }
.fl-win__cont-txt b { font: 600 16px/1.3 var(--font-display); }
.fl-win__barra { display: block; height: 6px; border-radius: 9px; background: color-mix(in oklab, var(--p-ink) 10%, transparent); overflow: hidden; }
.fl-win__barra i { display: block; height: 100%; background: var(--m); border-radius: inherit; }
.fl-win__btn { justify-self: start; display: inline-block; margin-top: 4px; padding: 8px 14px; border-radius: 9px; background: var(--m); color: #fff; font-weight: 700; font-size: 13px; }
.fl-win__fazer { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--fl-borda); }
.fl-win__fazer > b { margin-bottom: 6px; }
.fl-win__fazer > span { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--fl-borda); }
.fl-win__fazer i { width: 8px; height: 8px; border-radius: 50%; background: var(--m); }
.fl-win__fazer small { color: var(--muted); white-space: nowrap; }
.fl-win__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fl-win__stats span { padding: 12px 14px; border-radius: 12px; background: var(--fl-ui-2); display: grid; gap: 2px; }
.fl-win__stats b { font: 600 20px/1.1 var(--font-display); color: color-mix(in oklab, var(--m) 70%, var(--p-ink)); }
.fl-win__stats small { color: var(--muted); }
@media (max-width: 639px) {
  .fl-win__busca, .fl-win__sino { display: none; } .fl-win__av { margin-left: auto; }
  .fl-win__corpo { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .fl-win__fazer { grid-column: 1; grid-row: auto; }
  .fl-win__cont { grid-template-columns: 1fr; } .fl-win__thumb { display: none; }
  .fl-win__stats small { font-size: 12px; }
}

.fl-cel { display: grid; gap: 10px; align-content: start; padding: 14px 12px 16px; background: var(--fl-ui); color: var(--p-ink); border: 6px solid #1c1a24; border-radius: 30px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .5); font: 400 12px/1.35 var(--font-text); aspect-ratio: 9 / 18; }
.fl-cel__topo { display: flex; align-items: center; gap: 8px; } .fl-cel__topo b { font: 600 13px/1.1 var(--font-display); }
.fl-cel .fl-win__sim { width: 24px; height: 24px; border-radius: 7px; }
.fl-cel__aviso { display: grid; gap: 2px; padding: 9px 10px; border-radius: 12px; background: color-mix(in oklab, var(--m) 14%, var(--fl-ui)); }
.fl-cel__aviso small { color: var(--muted); }
.fl-cel .fl-win__nome { font-size: 18px; margin: 4px 0 0; }
.fl-cel__aula { display: grid; gap: 6px; padding: 9px; border-radius: 12px; background: var(--fl-ui-2); }
.fl-cel__aula .fl-win__thumb i { width: 26px; height: 26px; } .fl-cel__aula .fl-win__thumb i::after { border-width: 6px; border-left-width: 9px; }

/* ── a marca: 5 empresas de exemplo ── */
.fl-sec--marca { background: var(--p-surface); }
.fl-marca-grade { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.fl-marca__texto { display: grid; gap: 18px; }
.fl-marcas { display: grid; gap: 8px; margin-top: 8px; }
.fl-marca { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid transparent; background: var(--fl-ui); color: var(--p-ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.fl-marca:hover { transform: translateX(3px); }
.fl-marca[aria-checked="true"] { border-color: var(--p-accent); }
.fl-marca:focus-visible { outline: 2px solid var(--p-action); outline-offset: 2px; }
.fl-marca__sim { width: 40px; height: 40px; flex: none; border-radius: 11px; overflow: hidden; display: grid; }
.fl-marca__sim img, .fl-marca__sim svg { width: 100%; height: 100%; }
.fl-marca b { display: block; font-weight: 600; font-size: 16px; } .fl-marca small { color: var(--muted); font-size: 14px; }
.fl-marca__texto .fl-botoes { margin-top: 12px; }
.fl-win, .fl-cel { transition: --m .3s; }
@media (max-width: 1023px) { .fl-marca-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .fl-marca__vis .fl-cel { display: none; } .fl-marca__vis { padding: 0; } }
@media (min-width: 640px) { .fl-win__stats span:nth-child(3) { visibility: visible; } }

/* ── recursos: quatro cartões ── */
.fl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fl-card { display: grid; gap: 10px; align-content: start; padding: 20px 20px 28px; border-radius: 22px; background: var(--fl-ui); border: 1px solid var(--fl-borda); }
.fl-card h3 { margin-top: 14px; }
.fl-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.fl-card__vis { height: 270px; border-radius: 16px; background: var(--p-surface); display: grid; place-items: center; overflow: hidden; padding: 20px; }
@media (max-width: 1023px) { .fl-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .fl-card__vis { height: auto; min-height: 220px; padding: 14px; } }

.fl-avisos { width: min(380px, 100%); display: grid; gap: 10px; }
.fl-aviso { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 10px 24px -16px rgb(0 0 0 / .4); font: 400 13px/1.35 var(--font-text); }
.fl-aviso b { display: block; font-size: 14px; } .fl-aviso small, .fl-aviso time { color: var(--muted); font-size: 12px; }
.fl-aviso__ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--p-accent) 14%, var(--fl-ui)); color: var(--p-accent); font: 700 13px/1 var(--font-text); }
.fl-aviso__ico.is-alerta { background: #fff1e6; color: #c2410c; } .fl-aviso__ico.is-ok { background: #e7f7ee; color: #157f45; }

.fl-player { width: min(400px, 100%); overflow: hidden; border-radius: 14px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); }
.fl-player__tela { position: relative; aspect-ratio: 16/8.5; background: #241a4a; display: grid; place-items: center; }
.fl-player__titulo { position: absolute; left: 14px; top: 12px; color: #fff; font: 600 13px/1.3 var(--font-text); }
.fl-player__play { width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .95); position: relative; }
.fl-player__play::after { content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%; border: 9px solid transparent; border-left: 14px solid #241a4a; border-right: 0; }
.fl-player__menu { position: absolute; right: 10px; bottom: 10px; display: grid; padding: 5px; border-radius: 10px; background: rgb(10 8 20 / .9); color: #ece9f8; font: 400 12px/1 var(--font-text); }
.fl-player__menu span { padding: 6px 26px 6px 9px; border-radius: 6px; } .fl-player__menu .is-on { background: rgb(255 255 255 / .14); font-weight: 700; }
.fl-player__barra { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; font: 400 12px/1 var(--font-text); color: var(--muted); }
.fl-player__trilho { height: 5px; border-radius: 9px; background: var(--fl-ui-2); overflow: hidden; } .fl-player__trilho i { display: block; height: 100%; background: var(--p-accent); }
.fl-player__q { padding: 3px 7px; border-radius: 6px; background: var(--fl-ui-2); color: var(--p-ink); font-weight: 700; }

.fl-prova { width: min(380px, 100%); padding: 16px; display: grid; gap: 9px; border-radius: 14px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); font: 400 13px/1.35 var(--font-text); }
.fl-prova__topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.fl-chip { padding: 4px 10px; border-radius: 99px; background: #e7f7ee; color: #157f45; font: 700 12px/1.2 var(--font-text); white-space: nowrap; }
.fl-prova__q { margin: 2px 0 0; font-weight: 700; }
.fl-prova__alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fl-prova__alts li { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--fl-borda); }
.fl-prova__alts .is-certa { border-color: #1fa855; background: color-mix(in oklab, #1fa855 10%, var(--fl-ui)); font-weight: 600; }

.fl-cert { width: min(400px, 100%); padding: 22px 24px; display: grid; gap: 6px; border-radius: 14px; background: var(--fl-ui); border: 1px solid var(--fl-borda); border-top: 6px solid var(--p-accent); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); font: 400 13px/1.4 var(--font-text); }
.fl-cert__tit { margin: 0; color: var(--muted); }
.fl-cert__nome { margin: 0; font: 600 24px/1.1 var(--font-display); letter-spacing: -0.02em; }
.fl-cert__txt { margin: 0; }
.fl-cert__pe { display: flex; justify-content: space-between; align-items: end; margin-top: 6px; color: var(--muted); font-size: 12px; }
.fl-qr { width: 64px; height: 64px; fill: var(--p-ink); shape-rendering: crispEdges; }

/* ── produção de vídeos ── */
.fl-videos { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px; border-radius: 28px; background: color-mix(in oklab, var(--p-accent) 9%, var(--p-bg)); border: 1px solid color-mix(in oklab, var(--p-accent) 22%, transparent); }
.fl-videos__texto { display: grid; gap: 18px; }
.fl-videos__texto .fl-botoes { margin-top: 8px; }
.fl-videos__capa { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: #000; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .5); }
.fl-videos__capa img { display: block; width: 100%; height: auto; transition: transform .4s var(--ease); }
.fl-videos__capa:hover img { transform: scale(1.03); }
.fl-videos__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.fl-videos__play::after { content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%; border: 15px solid transparent; border-left: 24px solid var(--p-accent); border-right: 0; }
.fl-videos__rot { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 99px; background: rgb(0 0 0 / .65); color: #fff; font: 600 14px/1 var(--font-text); }
.fl-videos__capa:focus-visible { outline: 3px solid var(--p-action); outline-offset: 3px; }
@media (max-width: 1023px) { .fl-videos { grid-template-columns: minmax(0, 1fr); padding: 32px; } }
@media (max-width: 639px) { .fl-videos { padding: 22px; border-radius: 22px; } }
.fl-dialogo { width: min(1100px, 94vw); padding: 0; border: 0; border-radius: 18px; background: #000; overflow: visible; }
.fl-dialogo::backdrop { background: rgb(5 4 12 / .8); }
.fl-dialogo video { display: block; width: 100%; border-radius: 18px; }
.fl-dialogo__fechar { position: absolute; right: -12px; top: -12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #111; font: 600 26px/1 var(--font-text); cursor: pointer; z-index: 1; }

/* listas com marcador */
.fl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 17px; }
.fl-lista li { display: flex; gap: 12px; align-items: flex-start; }
.fl-lista li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--p-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.8 10.3 2.8 2.8 5.6-5.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.fl-lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .fl-lista--2 { grid-template-columns: minmax(0, 1fr); } }

/* ── gestão: faixa escura ── */
.fl-sec--escura { background: var(--p-inv-bg); color: var(--p-inv-ink); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); }
.fl-sec--escura h2 { color: var(--p-inv-ink); }
.fl-sec--escura .btn--secondary { background: transparent; color: var(--p-inv-ink); border-color: color-mix(in oklab, var(--p-inv-ink) 30%, transparent); }
.fl-sec--escura .btn--secondary:hover { background: color-mix(in oklab, var(--p-inv-ink) 8%, transparent); }
.fl-split { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.fl-split__texto { display: grid; gap: 22px; }
.fl-split__texto .fl-botoes { margin-top: 6px; }
.fl-rel { padding: 22px; display: grid; gap: 14px; border-radius: 18px; background: var(--fl-ui); color: var(--p-ink); border: 1px solid var(--fl-borda); font: 400 14px/1.35 var(--font-text); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6); --muted: var(--p-muted); }
.fl-rel__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fl-rel__topo b { font: 600 17px/1 var(--font-display); }
.fl-abas { display: flex; gap: 4px; } .fl-abas span { padding: 7px 12px; border-radius: 99px; color: var(--p-muted); font-size: 13px; } .fl-abas .is-on { background: var(--p-accent); color: #fff; font-weight: 700; }
.fl-rel__tab { width: 100%; border-collapse: collapse; }
.fl-rel__tab th { text-align: left; font-weight: 600; color: var(--p-muted); padding: 0 8px 10px 0; font-size: 13px; }
.fl-rel__tab td { padding: 12px 8px 12px 0; border-top: 1px solid var(--fl-borda); white-space: nowrap; }
.fl-barra { display: inline-block; vertical-align: middle; width: 80px; height: 7px; margin-right: 10px; border-radius: 9px; background: var(--fl-ui-2); overflow: hidden; }
.fl-barra i { display: block; height: 100%; background: var(--p-accent); }
.fl-rel__sub { margin: 4px 0 0; font-weight: 700; }
.fl-rel__perg { list-style: none; margin: 0; padding: 0; display: grid; }
.fl-rel__perg li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--fl-borda); }
.fl-rel__perg b { color: #c2410c; white-space: nowrap; }
@media (max-width: 1023px) { .fl-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .fl-rel__tab th:nth-child(4), .fl-rel__tab td:nth-child(4), .fl-abas span:not(.is-on) { display: none; } .fl-barra { width: 48px; } }

/* ── planos ── */
.fl-periodo { display: inline-flex; padding: 5px; gap: 4px; border-radius: 99px; background: var(--fl-ui); border: 1px solid var(--fl-borda); margin-top: 8px; }
.fl-periodo button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 99px; background: transparent; color: var(--p-ink); font: 600 15px/1 var(--font-text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fl-periodo button em { font-style: normal; font-size: 12px; padding: 3px 8px; border-radius: 99px; background: #e7f7ee; color: #157f45; }
.fl-periodo button[aria-checked="true"] { background: var(--p-ink); color: var(--p-bg); }
.fl-periodo button:focus-visible { outline: 2px solid var(--p-action); outline-offset: 2px; }
.fl-planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.fl-plano { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; border-radius: 22px; background: var(--fl-ui); border: 1px solid var(--fl-borda); }
.fl-plano.is-destaque { border: 2px solid var(--p-accent); box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--p-accent) 70%, transparent); }
.fl-plano__selo { position: absolute; top: -14px; left: 24px; padding: 6px 12px; border-radius: 99px; background: var(--p-accent); color: #fff; font: 700 13px/1 var(--font-text); }
.fl-plano h3 { font-size: 24px; }
.fl-plano__resumo { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; min-height: 4.5em; }
.fl-preco { margin: 4px 0 0; display: flex; align-items: baseline; gap: 4px; }
.fl-preco__v { font: 700 40px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fl-preco__v--txt { font-size: 32px; }
.fl-preco__p { font-weight: 600; color: var(--muted); }
.fl-preco__nota { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.4em; }
.fl-plano .btn { width: 100%; margin-top: 6px; }
.fl-plano__lim { list-style: none; margin: 8px 0 0; padding: 18px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--fl-borda); font-size: 15px; font-weight: 600; }
.fl-plano__lim li { display: flex; gap: 10px; align-items: center; }
.fl-check { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.fl-check circle { fill: var(--p-accent); } .fl-check path { stroke: #fff; }
@media (max-width: 1100px) { .fl-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 639px) { .fl-planos { grid-template-columns: minmax(0, 1fr); } .fl-plano__resumo { min-height: 0; } }

.fl-comparar { margin-top: 80px; }
.fl-comparar h3 { font-size: 26px; margin-bottom: 20px; }
.fl-tabela-rolagem { overflow-x: auto; border-radius: 20px; border: 1px solid var(--fl-borda); background: var(--fl-ui); }
.fl-tabela { width: 100%; min-width: 720px; border-collapse: collapse; font: 400 15px/1.4 var(--font-text); }
.fl-tabela th, .fl-tabela td { padding: 12px 18px; border-bottom: 1px solid var(--fl-borda); }
.fl-tabela thead th { position: sticky; top: 0; background: var(--fl-ui); font: 700 16px/1.2 var(--font-display); text-align: center; padding-block: 18px; }
.fl-tabela thead th.is-destaque { color: var(--p-accent); }
.fl-tabela tbody th { text-align: left; font-weight: 600; width: 40%; }
.fl-tabela tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--muted); }
.fl-tabela td { text-align: center; vertical-align: middle; width: 15%; }
.fl-tabela td .fl-check { width: 22px; height: 22px; }
.fl-tabela td b { font-weight: 700; }
.fl-tabela tr:last-child > * { border-bottom: 0; }
.fl-tabela__grupo th { background: var(--fl-ui-2); font: 700 13px/1 var(--font-text); letter-spacing: .02em; color: var(--muted); padding-block: 12px; }
.fl-nao { color: color-mix(in oklab, var(--p-ink) 30%, transparent); font-weight: 600; }
.fl-breve { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (max-width: 639px) {
  .fl-tabela { min-width: 0; font-size: 14px; }
  .fl-tabela th, .fl-tabela td { padding: 10px 8px; }
  .fl-tabela tbody th small { display: none; }
  .fl-tabela thead th { font-size: 12px; padding: 12px 4px; }
  .fl-tabela td { width: auto; } .fl-tabela td .fl-check { width: 18px; height: 18px; }
  .fl-breve { font-size: 11px; }
}

/* ── perguntas ── */
.fl-faq { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.fl-faq__esq { display: grid; gap: 18px; position: sticky; top: calc(var(--nav) + 24px); }
.fl-faq__esq .fl-botoes { margin-top: 6px; }
.fl-faq__lista { display: grid; gap: 12px; }
.fl-q { border-radius: 16px; background: var(--fl-ui); border: 1px solid var(--fl-borda); }
.fl-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 22px; font: 600 18px/1.3 var(--font-display); }
.fl-q summary::-webkit-details-marker { display: none; }
.fl-q summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fl-ui-2); font: 500 22px/1 var(--font-text); transition: transform .2s var(--ease); }
.fl-q[open] summary::after { transform: rotate(45deg); }
.fl-q summary:focus-visible { outline: 2px solid var(--p-action); outline-offset: -2px; border-radius: 16px; }
.fl-q p { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.6; color: var(--muted); }
@media (max-width: 1023px) { .fl-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; } .fl-faq__esq { position: static; } }

/* ── fecho e rodapé ── */
.fl-fecho__caixa { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding: 56px; border-radius: 28px; background: var(--p-accent); color: #fff; }
.fl-fecho__caixa h2 { color: #fff; }
.fl-fecho__caixa p { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: rgb(255 255 255 / .88); max-width: 52ch; }
.fl-fecho__caixa .fl-botoes { margin-top: 0; }
.fl-fecho__caixa .btn--primary { background: #fff; color: #2b1a7a; }
.fl-fecho__caixa .btn--primary:hover { background: #efeaff; }
section.fl-fecho { padding-top: 0; }
@media (max-width: 639px) { .fl-fecho__caixa { padding: 28px 22px; border-radius: 22px; } }

.fl-rodape { padding: 72px 0 32px; border-top: 1px solid var(--fl-borda); }
.fl-rodape__grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.fl-rodape__marca p { margin: 16px 0 0; color: var(--muted); max-width: 30ch; line-height: 1.5; }
.fl-rodape h3 { font: 700 14px/1.2 var(--font-text); letter-spacing: 0; color: var(--ink); margin-bottom: 14px; }
.fl-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fl-rodape a, .fl-link-btn { color: var(--muted); text-decoration: none; font: 400 15px/1.4 var(--font-text); }
.fl-rodape a:hover, .fl-link-btn:hover { color: var(--ink); }
.fl-link-btn { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.fl-rodape__nome { margin-top: 64px; color: color-mix(in oklab, var(--p-ink) 9%, var(--p-bg)); }
.fl-nome-grande { display: block; width: 100%; height: auto; max-height: 300px; }
.fl-rodape__legal { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; }
.fl-tema { display: inline-flex; padding: 4px; gap: 4px; border-radius: 99px; background: var(--p-surface); }
.fl-tema button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; color: var(--ink); font: 600 14px/1 var(--font-text); cursor: pointer; }
.fl-tema button[aria-checked="true"] { background: var(--ink); color: var(--p-bg); }
@media (max-width: 1023px) { .fl-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-rodape__marca { grid-column: 1 / -1; } }

/* ── aviso de cookies ── */
.fl-cookies { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; max-width: 520px; margin-left: auto; display: grid; gap: 16px; padding: 20px; border-radius: 18px; background: var(--fl-ui); color: var(--p-ink); border: 1px solid var(--fl-borda); box-shadow: 0 24px 48px -16px rgb(0 0 0 / .35); font-size: 15px; }
.fl-cookies p { margin: 0; }
.fl-cookies .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 400px) { .nav__actions .btn { display: none; } }

/* a janela se ajusta ao próprio tamanho: estreita, vira uma coluna sem a lista "Para fazer" */
.fl-win { container-type: inline-size; }
@container (max-width: 700px) {
  .fl-win__corpo { grid-template-columns: minmax(0, 1fr); }
  .fl-win__fazer { display: none; }
  .fl-win__cont { grid-template-columns: 170px 1fr; }
  .fl-win__busca { width: 34%; }
}
@container (max-width: 460px) {
  .fl-win__cont { grid-template-columns: 1fr; } .fl-win__thumb { display: none; }
  .fl-win__busca, .fl-win__sino { display: none; } .fl-win__av { margin-left: auto; }
}
@media (max-width: 639px) {
  .fl-tabela-rolagem { max-width: 100%; }
  .fl-tabela { table-layout: fixed; width: 100%; }
  .fl-tabela thead th:not(:first-child) { width: 56px; }
  .fl-tabela tbody th { width: auto; word-break: break-word; }
  .fl-tabela td { padding-inline: 2px; }
  .fl-tabela td b { font-size: 12px; }
}

/* anual: preço cheio riscado, selo de economia e o equivalente por mês */
.fl-preco__de { margin: 0 0 -6px; min-height: 1.3em; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 2px; }
.fl-preco { flex-wrap: wrap; row-gap: 6px; }
.fl-preco__selo:empty { display: none; }
.fl-preco__selo { align-self: center; margin-left: 6px; padding: 4px 10px; border-radius: 99px; background: #e7f7ee; color: #157f45; font: 700 13px/1.2 var(--font-text); white-space: nowrap; }
.fl-periodo button em { background: #1fa855; color: #fff; }
:root[data-tema="escuro"] .fl-preco__selo { background: #163a26; color: #7ee2a8; }
@media (prefers-color-scheme: dark) { :root[data-tema="sistema"] .fl-preco__selo { background: #163a26; color: #7ee2a8; } }

/* preço da produção de vídeos */
.fl-videos__preco { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fl-videos__preco b { font: 700 36px/1 var(--font-display); letter-spacing: -0.03em; color: var(--p-ink); }
.fl-videos__preco span { color: var(--muted); font-size: 15px; }
/* implantação: faixa discreta abaixo dos planos */
.fl-implantacao { margin-top: 28px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; border: 1px dashed var(--fl-borda); background: transparent; }
.fl-implantacao p { margin: 0; flex: 1; color: var(--muted); font-size: 15px; line-height: 1.5; }
.fl-implantacao p b { color: var(--p-ink); font-weight: 600; }
.fl-implantacao__ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--p-accent) 12%, var(--p-bg)); color: var(--p-accent); }
.fl-implantacao__ico svg { width: 18px; height: 18px; }
.fl-implantacao__link { flex: none; font-weight: 600; font-size: 15px; color: var(--p-accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 639px) { .fl-implantacao { flex-direction: column; align-items: flex-start; } .fl-implantacao__link { white-space: normal; } }
.fl-videos__anual { margin: -8px 0 0; color: var(--muted); font-size: 15px; } .fl-videos__anual b { color: var(--p-ink); }

/* ════════════════ movimento e brilho ════════════════
   Tudo para sob prefers-reduced-motion (bloco no fim). Sem script, nada fica escondido (.fl-js só existe com script). */
@property --fl-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* hero: brilho que respira atrás da tela */
.fl-hero__vis { isolation: isolate; }
.fl-brilho { position: absolute; inset: -12% -8% 0 -6%; z-index: -1; pointer-events: none; filter: blur(64px); opacity: .85; }
.fl-brilho i { position: absolute; border-radius: 50%; }
.fl-brilho i:nth-child(1) { width: 58%; height: 62%; left: 6%; top: 4%; background: var(--p-accent); animation: fl-deriva1 14s ease-in-out infinite alternate; }
.fl-brilho i:nth-child(2) { width: 46%; height: 52%; right: 0; top: 30%; background: #22c3e6; opacity: .7; animation: fl-deriva2 17s ease-in-out infinite alternate; }
.fl-brilho i:nth-child(3) { width: 40%; height: 44%; left: 26%; bottom: 0; background: #ff6fb1; opacity: .45; animation: fl-deriva3 12s ease-in-out infinite alternate; }
:root[data-tema="escuro"] .fl-brilho { opacity: .5; }
@media (prefers-color-scheme: dark) { :root[data-tema="sistema"] .fl-brilho { opacity: .5; } }
@keyframes fl-deriva1 { to { transform: translate(12%, 10%) scale(1.12); } }
@keyframes fl-deriva2 { to { transform: translate(-16%, -12%) scale(.9); } }
@keyframes fl-deriva3 { to { transform: translate(14%, -16%) scale(1.15); } }
.fl-hero__vis .fl-win { animation: fl-flutua 7s ease-in-out infinite; }
.fl-hero__vis .fl-cel { animation: fl-flutua 6s ease-in-out -2s infinite; }
@keyframes fl-flutua { 50% { transform: translateY(-8px); } }
/* o aviso "concluiu" entra, fica e sai, em ciclo */
.fl-hero__vis .fl-toast { animation: fl-toast 6s cubic-bezier(.22,1,.36,1) 1.4s infinite both; }
@keyframes fl-toast { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 10%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
/* a barra de progresso da aula enche */
.fl-win__barra i { animation: fl-enche 1.4s cubic-bezier(.22,1,.36,1) .6s both; transform-origin: left; }
@keyframes fl-enche { from { transform: scaleX(0); } }

/* revelar ao rolar: títulos, cartões e blocos sobem uma vez */
.fl-js [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--rv, 0) * 90ms); }
.fl-js [data-rv="zoom"] { transform: translateY(32px) scale(.96); }
.fl-js [data-rv].is-in { opacity: 1; transform: none; }

/* a tela do hero sobe ao sair; a da marca e o relatório chegam com a rolagem (onde o navegador permite) */
@supports (animation-timeline: view()) {
  .fl-hero__vis > .fl-win { animation: fl-flutua 7s ease-in-out infinite, fl-sai linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
  @keyframes fl-sai { to { translate: 0 -60px; scale: .96; } }
  .fl-marca__vis > .fl-win { animation: fl-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .fl-rel { animation: fl-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes fl-entra { from { translate: 0 60px; scale: .94; } }
}

/* frase que acende com a rolagem */
main > section.fl-frase { padding: 112px 0 16px; }
.fl-frase .mo-wh__text { margin: 0 auto; max-width: 1040px; text-align: center; font-family: var(--font-display); font-weight: 650; font-size: clamp(30px, 2.8vw + 12px, 56px); line-height: 1.14; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
@media (max-width: 639px) { main > section.fl-frase { padding: 64px 0 8px; } .fl-frase .mo-wh__text { text-align: left; } }

/* luz que segue o ponteiro nos cartões */
.fl-card, .fl-plano { --mx: 50%; --my: 0%; position: relative; isolation: isolate; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), opacity .7s cubic-bezier(.22,1,.36,1); }
.fl-card::before, .fl-plano::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in oklab, var(--p-accent) 16%, transparent), transparent 60%); }
@media (hover: hover) and (pointer: fine) {
  .fl-card:hover::before, .fl-plano:hover::before { opacity: 1; }
  .fl-card.is-in:hover, .fl-plano.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }
  .fl-card:hover { border-color: color-mix(in oklab, var(--p-accent) 40%, var(--fl-borda)); box-shadow: 0 30px 60px -34px color-mix(in oklab, var(--p-accent) 60%, transparent); }
}

/* plano recomendado: borda com brilho que gira */
.fl-plano.is-destaque { border-color: transparent; background: linear-gradient(var(--fl-ui), var(--fl-ui)) padding-box, conic-gradient(from var(--fl-ang), var(--p-accent), #22c3e6, #ff6fb1, var(--p-accent)) border-box; animation: fl-gira 5s linear infinite; box-shadow: 0 30px 70px -28px color-mix(in oklab, var(--p-accent) 80%, transparent); }
@keyframes fl-gira { to { --fl-ang: 360deg; } }
.fl-plano__selo { box-shadow: 0 6px 20px -4px color-mix(in oklab, var(--p-accent) 80%, transparent); }

/* botões: um reflexo passa ao apontar; o do hero brilha de tempos em tempos */
.btn--primary, .btn--zap { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--zap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover::after, .btn--zap:hover::after { transform: translateX(120%); transition: transform .7s cubic-bezier(.22,1,.36,1); } }
.fl-hero .btn--primary { box-shadow: 0 12px 32px -10px color-mix(in oklab, var(--p-action) 75%, transparent); }
.fl-hero .btn--primary::after { animation: fl-reflexo 4.5s cubic-bezier(.22,1,.36,1) 2s infinite; }
@keyframes fl-reflexo { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

/* cartões de recursos: cada tela tem a sua vida */
.fl-avisos .fl-aviso { animation: fl-aviso 4s cubic-bezier(.22,1,.36,1) infinite both; }
.fl-avisos .fl-aviso:nth-child(2) { animation-delay: .15s; }
.fl-avisos .fl-aviso:nth-child(3) { animation-delay: .3s; }
@keyframes fl-aviso { 0% { opacity: 0; transform: translateY(-14px) scale(.97); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
.fl-aviso__ico.is-alerta { animation: fl-sino 4s ease-in-out infinite; }
@keyframes fl-sino { 18% { transform: rotate(0); } 21% { transform: rotate(-12deg); } 24% { transform: rotate(10deg); } 27% { transform: rotate(-6deg); } 30% { transform: rotate(0); } }
.fl-player__trilho i { width: 100% !important; animation: fl-toca 6s linear infinite; transform-origin: left; }
@keyframes fl-toca { from { transform: scaleX(.3); } to { transform: scaleX(.75); } }
.fl-player__play { animation: fl-pulso 2.4s ease-out infinite; }
@keyframes fl-pulso { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .55); } 80%, 100% { box-shadow: 0 0 0 18px rgb(255 255 255 / 0); } }
.fl-prova__alts .is-certa { animation: fl-certa 3.6s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes fl-certa { 0%, 20% { border-color: var(--fl-borda); background: transparent; } 32%, 100% { border-color: #1fa855; background: color-mix(in oklab, #1fa855 10%, var(--fl-ui)); } }
.fl-prova .fl-chip { animation: fl-chip 3.6s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes fl-chip { 0%, 30% { opacity: 0; transform: scale(.8); } 42%, 100% { opacity: 1; transform: none; } }
.fl-cert { position: relative; overflow: hidden; }
.fl-cert::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, color-mix(in oklab, var(--p-accent) 18%, transparent) 50%, transparent 65%); transform: translateX(-120%); animation: fl-reflexo 3.6s cubic-bezier(.22,1,.36,1) 1s infinite; }

/* vídeo: o play pulsa e a moldura tem luz */
.fl-videos { position: relative; overflow: hidden; isolation: isolate; }
.fl-videos::before { content: ""; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; right: -10%; top: -30%; border-radius: 50%; background: var(--p-accent); filter: blur(90px); opacity: .22; pointer-events: none; animation: fl-deriva2 14s ease-in-out infinite alternate; }
.fl-videos__play { animation: fl-pulso-v 2.4s ease-out infinite; }
@keyframes fl-pulso-v { 0% { box-shadow: 0 10px 30px rgb(0 0 0 / .35), 0 0 0 0 rgb(255 255 255 / .6); } 80%, 100% { box-shadow: 0 10px 30px rgb(0 0 0 / .35), 0 0 0 26px rgb(255 255 255 / 0); } }

/* gestão: luz ao fundo e as barras do relatório enchem quando aparecem */
.fl-barra i { animation: fl-enche 1.6s cubic-bezier(.22,1,.36,1) .2s both; transform-origin: left; animation-play-state: paused; }
.fl-rel.is-in .fl-barra i, html:not(.fl-js) .fl-barra i { animation-play-state: running; }
.fl-sec--escura { position: relative; overflow: hidden; isolation: isolate; }
.fl-sec--escura::before { content: ""; position: absolute; z-index: -1; width: 50vw; aspect-ratio: 1; right: -12vw; top: 10%; border-radius: 50%; background: var(--p-accent); filter: blur(120px); opacity: .28; pointer-events: none; animation: fl-deriva1 16s ease-in-out infinite alternate; }

/* fecho: luz que corre pela caixa */
.fl-fecho__caixa { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--p-accent) 90%, transparent); }
.fl-fecho__caixa::before, .fl-fecho__caixa::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.fl-fecho__caixa::before { width: 46%; aspect-ratio: 1; left: -10%; top: -60%; background: #22c3e6; opacity: .3; animation: fl-deriva1 12s ease-in-out infinite alternate; }
.fl-fecho__caixa::after { width: 40%; aspect-ratio: 1; right: -8%; bottom: -70%; background: #ff6fb1; opacity: .4; animation: fl-deriva3 10s ease-in-out infinite alternate; }

/* marca escolhida: a tela pisca de leve ao trocar */
.fl-win.is-troca, .fl-cel.is-troca { animation: fl-troca .6s cubic-bezier(.22,1,.36,1); }
@keyframes fl-troca { from { opacity: .4; transform: scale(.985); } }
.fl-marca[aria-checked="true"] { box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--p-accent) 70%, transparent); }

/* menos movimento: tudo parado, nada escondido */
@media (prefers-reduced-motion: reduce) {
  .fl-brilho i, .fl-hero__vis .fl-win, .fl-hero__vis .fl-cel, .fl-hero__vis .fl-toast, .fl-win__barra i, .fl-avisos .fl-aviso, .fl-aviso__ico, .fl-player__trilho i, .fl-player__play, .fl-prova__alts .is-certa, .fl-prova .fl-chip, .fl-cert::after, .fl-videos::before, .fl-videos__play, .fl-barra i, .fl-sec--escura::before, .fl-fecho__caixa::before, .fl-fecho__caixa::after, .fl-plano.is-destaque, .fl-hero .btn--primary::after, .fl-marca__vis > .fl-win, .fl-rel { animation: none !important; }
  .fl-player__trilho i { width: 45% !important; transform: none; }
  .fl-js [data-rv] { opacity: 1; transform: none; transition: none; }
}

/* ════════════════ /lp/videos: a produção de videoaulas ════════════════ */
/* hero: o vídeo de exemplo, com o texto entrando e a linha do tempo da edição por cima */
.fl-prod { padding: 56px 0 72px 48px; }
.fl-prod__capa { position: relative; z-index: 1; }
.fl-doc { position: absolute; z-index: 2; left: 0; top: 0; width: 230px; padding: 14px 16px 16px; display: grid; gap: 8px; border-radius: 16px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .45); font: 400 13px/1.3 var(--font-text); color: var(--p-ink); animation: fl-flutua 6s ease-in-out -1s infinite; }
.fl-doc__arq { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--p-muted); font-size: 12px; }
.fl-doc__arq b { font-weight: 600; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-doc__ico { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; background: #2563eb; color: #fff; font: 700 11px/1 var(--font-text); }
.fl-doc__tit { margin: 2px 0 2px; font: 600 15px/1.25 var(--font-display); }
.fl-doc__l { display: block; height: 7px; width: var(--l); border-radius: 9px; background: var(--fl-ui-2); transform-origin: left; animation: fl-escreve 4s cubic-bezier(.22,1,.36,1) infinite both; }
.fl-doc__l:nth-of-type(2) { animation-delay: .25s; } .fl-doc__l:nth-of-type(3) { animation-delay: .5s; } .fl-doc__l:nth-of-type(4) { animation-delay: .75s; }
@keyframes fl-escreve { 0% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
.fl-linha { position: absolute; z-index: 2; right: -12px; bottom: 0; width: min(440px, 80%); padding: 14px 16px 16px; border-radius: 16px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .5); font: 400 12px/1.2 var(--font-text); color: var(--p-ink); animation: fl-flutua 7s ease-in-out -3s infinite; }
.fl-linha__topo { display: flex; justify-content: space-between; margin-bottom: 10px; }
.fl-linha__topo b { font: 600 13px/1 var(--font-display); } .fl-linha__tc { color: var(--p-muted); font-variant-numeric: tabular-nums; }
.fl-linha__trilhas { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 7px 10px; align-items: center; }
.fl-linha__rot { color: var(--p-muted); font-size: 11px; }
.fl-linha__trilha { position: relative; height: 16px; border-radius: 5px; background: var(--fl-ui-2); overflow: hidden; }
.fl-linha__trilha i { position: absolute; top: 2px; bottom: 2px; left: var(--a); width: var(--b); border-radius: 4px; }
.fl-linha__trilha--anim i { background: var(--p-accent); }
.fl-linha__trilha--leg i { background: color-mix(in oklab, #22c3e6 70%, var(--fl-ui)); }
.fl-linha__trilha--voz i { inset: 3px 4px; background: repeating-linear-gradient(90deg, #1fa855 0 2px, transparent 2px 4px); opacity: .9; }
.fl-linha__cabeca { position: absolute; top: -4px; bottom: -4px; left: 74px; width: 2px; background: #ff4d6d; border-radius: 2px; box-shadow: 0 0 10px #ff4d6d; animation: fl-cabeca 6s linear infinite; }
.fl-linha__cabeca::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 3px; background: #ff4d6d; }
@keyframes fl-cabeca { from { left: 74px; } to { left: calc(100% - 2px); } }
@media (max-width: 1023px) { .fl-prod { padding: 48px 0 64px 24px; } }
@media (max-width: 639px) { .fl-prod { padding: 0; } .fl-doc, .fl-linha { display: none; } }

/* passos */
.fl-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fl-passo .fl-card__vis { height: 240px; }
.fl-passo__n { margin: 14px 0 -4px; font: 700 14px/1 var(--font-text); color: var(--p-accent); }
.fl-passo h3 { margin-top: 0; }
@media (max-width: 1023px) { .fl-passos { grid-template-columns: minmax(0, 1fr); } }
.fl-envio { width: 100%; max-width: 360px; display: grid; gap: 8px; }
.fl-envio__arq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--fl-ui); border: 1px solid var(--fl-borda); font: 400 12px/1.3 var(--font-text); box-shadow: 0 10px 24px -18px rgb(0 0 0 / .4); }
.fl-envio__arq b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-envio__arq small { color: var(--p-muted); }
.fl-envio__ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 700 10px/1 var(--font-text); }
.fl-envio__ico.is-pdf { background: #dc2626; } .fl-envio__ico.is-mp4 { background: var(--p-accent); } .fl-envio__ico.is-txt { background: #2563eb; }
.fl-envio__ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1fa855; color: #fff; font-size: 12px; font-weight: 700; }
.fl-envio__prog { width: 46px; height: 6px; border-radius: 9px; background: var(--fl-ui-2); overflow: hidden; }
.fl-envio__prog i { display: block; height: 100%; background: var(--p-accent); transform-origin: left; animation: fl-sobe 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes fl-sobe { from { transform: scaleX(.05); } 85%, to { transform: scaleX(1); } }
.fl-etapas { width: 100%; max-width: 320px; display: grid; gap: 8px; }
.fl-etapa { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--fl-ui); border: 1px solid var(--fl-borda); font: 600 13px/1.2 var(--font-text); }
.fl-etapa i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--fl-borda); font-style: normal; font-size: 12px; color: #fff; }
.fl-etapa.is-ok i { background: #1fa855; border-color: #1fa855; }
.fl-etapa.is-ag i { border-color: var(--p-accent); border-right-color: transparent; animation: fl-roda 1s linear infinite; }
.fl-etapa.is-ag { border-color: color-mix(in oklab, var(--p-accent) 45%, var(--fl-borda)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--p-accent) 12%, transparent); }
@keyframes fl-roda { to { transform: rotate(360deg); } }
.fl-aprova { width: 100%; max-width: 340px; padding: 12px; display: grid; gap: 10px; border-radius: 14px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); font: 400 12px/1.3 var(--font-text); }
.fl-aprova__tela { position: relative; aspect-ratio: 16 / 7.5; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #0f9d8a, #2563eb); }
.fl-aprova__tela .fl-player__play { width: 38px; height: 38px; } .fl-aprova__tela .fl-player__play::after { border-width: 7px; border-left-width: 11px; border-left-color: #0f9d8a; }
.fl-aprova__dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 6px; background: rgb(0 0 0 / .6); color: #fff; font-weight: 700; font-size: 11px; }
.fl-aprova__tit { margin: 0; display: flex; justify-content: space-between; gap: 8px; align-items: center; } .fl-aprova__tit b { font-size: 13px; }
.fl-aprova__tit .fl-chip { background: #fff4e0; color: #b45309; }
.fl-aprova__acoes { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.fl-aprova__btn { padding: 9px 10px; border-radius: 9px; background: var(--p-accent); color: #fff; font-weight: 700; text-align: center; white-space: nowrap; }
.fl-aprova__btn.is-sec { background: var(--fl-ui-2); color: var(--p-ink); }
.fl-aprova__btn:not(.is-sec) { animation: fl-aperta 3.6s ease-in-out infinite; }
@keyframes fl-aperta { 0%, 60%, 100% { transform: none; box-shadow: none; } 66% { transform: scale(.95); } 72% { transform: none; box-shadow: 0 0 0 6px color-mix(in oklab, var(--p-accent) 25%, transparent); } }

/* dois caminhos */
.fl-caminhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fl-caminho { display: grid; gap: 14px; align-content: start; padding: 32px; border-radius: 22px; background: var(--fl-ui); border: 1px solid var(--fl-borda); }
.fl-caminho h3 { font-size: 24px; } .fl-caminho > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.fl-caminho .fl-lista { margin-top: 6px; font-size: 16px; }
.fl-caminho__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklab, var(--p-accent) 14%, var(--fl-ui)); color: var(--p-accent); }
.fl-caminho__ico svg { width: 26px; height: 26px; }
.fl-aviso-captacao { margin: 24px 0 0; padding: 16px 20px; border-radius: 16px; border: 1px dashed var(--fl-borda); color: var(--muted); font-size: 15px; line-height: 1.55; }
.fl-aviso-captacao b { color: var(--p-ink); }
@media (max-width: 1023px) { .fl-caminhos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .fl-caminho { padding: 22px; } }

/* o que vem em cada aula */
.fl-inclui { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fl-inclui li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 18px; background: color-mix(in oklab, var(--p-inv-ink) 6%, transparent); border: 1px solid color-mix(in oklab, var(--p-inv-ink) 12%, transparent); }
.fl-inclui b { font: 600 18px/1.25 var(--font-display); color: var(--p-inv-ink); } .fl-inclui small { font-size: 15px; line-height: 1.5; color: var(--p-inv-muted); }
.fl-inclui__ico { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--p-accent) 30%, transparent); color: #fff; box-shadow: 0 0 24px -4px color-mix(in oklab, var(--p-accent) 80%, transparent); }
.fl-inclui__ico svg { width: 22px; height: 22px; }
@media (max-width: 1023px) { .fl-inclui { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .fl-inclui { grid-template-columns: minmax(0, 1fr); } }

/* comparativo de custo */
.fl-custo { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.fl-custo__texto { display: grid; gap: 20px; }
.fl-custo__economia { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fl-custo__economia b { font: 700 44px/1 var(--font-display); letter-spacing: -0.03em; color: #157f45; }
:root[data-tema="escuro"] .fl-custo__economia b { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root[data-tema="sistema"] .fl-custo__economia b { color: #4ade80; } }
.fl-custo__economia span { color: var(--muted); font-size: 16px; }
.fl-custo__texto .fl-botoes { margin-top: 4px; }
.fl-custo__painel { padding: 28px; display: grid; gap: 14px; border-radius: 22px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 30px 70px -36px rgb(0 0 0 / .45); color: var(--p-ink); font: 400 15px/1.35 var(--font-text); }
.fl-custo__cab { margin: 0; display: flex; justify-content: space-between; align-items: baseline; } .fl-custo__cab b { font: 600 18px/1 var(--font-display); } .fl-custo__cab small { color: var(--p-muted); }
.fl-custo__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.fl-custo__lista li, .fl-custo__qualo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--fl-borda); }
.fl-custo__lista li b, .fl-custo__qualo b { display: block; font-weight: 600; } .fl-custo__lista small, .fl-custo__qualo small { color: var(--p-muted); font-size: 13px; }
.fl-custo__barra { height: 10px; border-radius: 9px; background: var(--fl-ui-2); overflow: hidden; }
.fl-custo__barra i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #e0565b; transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.fl-custo__barra.is-qualo i { background: linear-gradient(90deg, var(--p-accent), #22c3e6); box-shadow: 0 0 14px color-mix(in oklab, var(--p-accent) 70%, transparent); }
.fl-custo__painel.is-in .fl-custo__barra i, html:not(.fl-js) .fl-custo__barra i { transform: scaleX(1); }
.fl-custo__lista li:nth-child(2) .fl-custo__barra i { transition-delay: .1s; } .fl-custo__lista li:nth-child(3) .fl-custo__barra i { transition-delay: .2s; }
.fl-custo__lista li:nth-child(4) .fl-custo__barra i { transition-delay: .3s; } .fl-custo__lista li:nth-child(5) .fl-custo__barra i { transition-delay: .4s; }
.fl-custo__qualo .fl-custo__barra i { transition-delay: .8s; }
.fl-custo__v { text-align: right; font-variant-numeric: tabular-nums; }
.fl-custo__total { margin: 0; display: flex; justify-content: space-between; padding: 14px 0; border-top: 2px solid var(--p-ink); font-weight: 600; }
.fl-custo__total b { font: 700 22px/1 var(--font-display); color: #e0565b; text-decoration: line-through; text-decoration-thickness: 2px; }
.fl-custo__qualo { margin: 0; padding: 14px 16px; border: 2px solid var(--p-accent); border-radius: 14px; background: color-mix(in oklab, var(--p-accent) 8%, var(--fl-ui)); }
.fl-custo__qualo .fl-custo__v { font: 700 20px/1 var(--font-display); color: var(--p-accent); }
.fl-custo__nota { margin: 0; color: var(--p-muted); font-size: 13px; }
@media (max-width: 1023px) { .fl-custo { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 639px) {
  .fl-custo__painel { padding: 18px; }
  .fl-custo__lista li, .fl-custo__qualo { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .fl-custo__lista .fl-custo__barra, .fl-custo__qualo .fl-custo__barra { grid-column: 1 / -1; grid-row: 2; }
  .fl-custo__economia b { font-size: 36px; }
}

/* preço: dois cartões */
.fl-planos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
@media (max-width: 1100px) { .fl-planos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .fl-planos--2 { grid-template-columns: minmax(0, 1fr); } }
.fl-pv .fl-planos--2 .fl-plano__resumo { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .fl-doc, .fl-doc__l, .fl-linha, .fl-linha__cabeca, .fl-envio__prog i, .fl-etapa.is-ag i, .fl-aprova__btn { animation: none !important; }
  .fl-custo__barra i { transform: none; transition: none; }
}
.fl-prod .fl-videos__rot { left: auto; right: 16px; top: 16px; bottom: auto; }
.fl-passo .fl-card__vis { height: 290px; }
@media (max-width: 639px) { .fl-passo .fl-card__vis { height: auto; } }

/* centavos do preço anual por mês: menores, para o valor caber no card */
.fl-preco__cent { font-size: .55em; letter-spacing: 0; }

/* links para outra parte da página deslizam até lá (o kit deixa a rolagem seca) */
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

/* ─── Vertigo: a produtora dos vídeos (logo, parceria com o Qualo e a página /lp/videos) ─── */
.fl-logo-vt { height: 22px; width: auto; display: block; color: var(--ink, currentColor); }
.fl-logo-vt--mini { height: 15px; display: inline-block; vertical-align: -2px; }
.fl-logo--mini { height: 22px; display: inline-block; vertical-align: middle; }
.fl-parceria { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.fl-parceria .fl-logo-vt { height: 20px; }
.fl-parceria__x { font: 400 18px/1 var(--font-text); color: var(--muted); }
.nav__logo .fl-parceria .fl-logo--mini { height: 24px; }
@media (max-width: 639px) { .fl-parceria { gap: 8px; } .fl-parceria .fl-logo-vt { height: 15px; } .nav__logo .fl-parceria .fl-logo--mini { height: 19px; } }
.fl-selo--parceria { gap: 10px; color: var(--p-ink); background: color-mix(in oklab, var(--p-accent) 10%, var(--p-bg)); }
.fl-selo--parceria > span:first-child { color: var(--muted); font-weight: 500; }
.fl-selo--parceria .fl-logo--mini { height: 18px; }
.fl-videos__parceria { margin: -4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
.fl-videos__parceria .fl-logo-vt { color: var(--p-ink); opacity: .85; }

/* o vermelho no lugar do ciano e do rosa dos brilhos do Qualo */
.fl-pv .fl-brilho i:nth-child(2) { background: var(--vt-quente); opacity: .45; }
.fl-pv .fl-brilho i:nth-child(3) { background: var(--vt-fundo); opacity: .55; }
.fl-pv .fl-plano.is-destaque { background: linear-gradient(var(--fl-ui), var(--fl-ui)) padding-box, conic-gradient(from var(--fl-ang), var(--p-accent), var(--vt-quente), var(--vt-fundo), var(--p-accent)) border-box; }
.fl-pv .fl-fecho__caixa::before { background: var(--vt-quente); }
.fl-pv .fl-fecho__caixa::after { background: var(--vt-fundo); opacity: .6; }
.fl-pv .fl-custo__barra.is-qualo i { background: linear-gradient(90deg, var(--p-accent), var(--vt-quente)); }
.fl-pv .fl-linha__trilha--leg i { background: color-mix(in oklab, var(--vt-quente) 70%, var(--fl-ui)); }

/* produtora comum x Vertigo: duas colunas, a da Vertigo com a faixa vermelha no topo */
.vt-tabela { max-width: 820px; margin: 48px auto 0; border-radius: 20px; overflow: hidden; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 30px 70px -40px rgb(0 0 0 / .35); }
.vt-tabela__lin { display: grid; grid-template-columns: 1fr 1fr; }
.vt-tabela__lin > span { padding: 18px 24px; text-align: center; font-size: 16px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--fl-borda); }
.vt-tabela__lin > span.is-vt { color: var(--p-ink); font-weight: 600; border-left: 1px solid var(--fl-borda); background: color-mix(in oklab, var(--p-accent) 5%, var(--fl-ui)); }
.vt-tabela__cab > span { border-top: 0; padding: 20px 24px; font: 600 17px/1.2 var(--font-display); color: #f4f4f5; background: #111214; }
.vt-tabela__cab > span.is-vt { display: flex; align-items: center; justify-content: center; background: var(--p-accent); border-left: 0; }
.vt-tabela__cab .fl-logo-vt { height: 18px; color: #fff; }
@media (max-width: 639px) { .vt-tabela__lin > span { padding: 14px 12px; font-size: 14px; } .vt-tabela__cab .fl-logo-vt { height: 12px; } }
.fl-pv .fl-fecho__caixa .btn--primary { color: #111214; } .fl-pv .fl-fecho__caixa .btn--primary:hover { background: #f1f1f1; }
.vt-tabela__cab .fl-logo-vt path:first-child { fill: #fff; }
/* fecho: texto e botões centralizados num bloco só (antes o texto ficava à esquerda quando os botões desciam) */
.fl-fecho__caixa { flex-direction: column; justify-content: center; text-align: center; gap: 28px; }
.fl-fecho__caixa p { margin-inline: auto; }
.fl-fecho__caixa .fl-botoes { justify-content: center; }
.fl-videos__parceria { gap: 0; } .fl-videos__parceria .fl-logo-vt { margin: 0 1px 0 6px; }

/* ─── /lp/afiliados: programa de parceiros ─── */
.fl-af-vis { position: relative; min-height: 470px; }
.fl-af-cupom { position: absolute; left: 0; top: 18px; width: 300px; padding: 22px 24px; border-radius: 18px; background: var(--fl-ui); border: 1px dashed color-mix(in oklab, var(--p-accent) 55%, var(--fl-borda)); box-shadow: 0 30px 70px -36px color-mix(in oklab, var(--p-accent) 70%, transparent); z-index: 2; }
.fl-af-cupom__rot { margin: 0; font-size: 13px; color: var(--muted); }
.fl-af-cupom__cod { margin: 6px 0 8px; font: 700 34px/1 var(--font-display); letter-spacing: 0.04em; color: var(--p-accent); }
.fl-af-cupom__info { margin: 0; font-size: 14px; line-height: 1.4; color: var(--p-ink); }
.fl-af-extrato { position: absolute; right: 0; top: 178px; width: min(440px, 88%); padding: 20px 22px 16px; border-radius: 18px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 30px 80px -40px rgb(0 0 0 / .45); }
.fl-af-extrato__topo { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.fl-af-extrato__topo span { font-size: 13px; color: var(--muted); }
.fl-af-extrato ul { list-style: none; margin: 0; padding: 0; display: grid; }
.fl-af-extrato li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--fl-borda); }
.fl-af-extrato li b { font-size: 14px; } .fl-af-extrato li small { display: block; font-size: 12.5px; color: var(--muted); }
.fl-af-valor { white-space: nowrap; font-family: var(--font-display); color: #16a34a; }
.fl-af-extrato__nota { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.fl-js .fl-af-extrato li { animation: fl-af-entra .6s both; } .fl-js .fl-af-extrato li:nth-child(2) { animation-delay: .25s; } .fl-js .fl-af-extrato li:nth-child(3) { animation-delay: .5s; }
@keyframes fl-af-entra { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 899px) { .fl-af-vis { min-height: 0; display: grid; gap: 14px; } .fl-af-cupom, .fl-af-extrato { position: relative; inset: auto; width: 100%; } }

.fl-af-passos .fl-passo { padding-top: 26px; }

.fl-af-sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; }
@media (max-width: 899px) { .fl-af-sim { grid-template-columns: 1fr; gap: 28px; } }
.fl-af-sim__texto { display: grid; gap: 22px; }
.fl-af-sim__texto h2 { margin: 0; }
.fl-af-campo { display: grid; gap: 10px; }
.fl-af-campo label, .fl-af-campo__rot { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; color: var(--ink); }
.fl-af-campo output { font: 700 22px/1 var(--font-display); color: var(--p-accent); }
.fl-af-campo input[type="range"] { width: 100%; accent-color: var(--p-accent); height: 28px; cursor: pointer; }
.fl-af-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-af-planos button { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--fl-borda); background: var(--fl-ui); color: var(--p-ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.fl-af-planos button:hover { border-color: color-mix(in oklab, var(--p-accent) 50%, var(--fl-borda)); }
.fl-af-planos button[aria-checked="true"] { border-color: var(--p-accent); background: color-mix(in oklab, var(--p-accent) 10%, var(--fl-ui)); }
.fl-af-planos b { font-size: 15px; } .fl-af-planos small { font-size: 12.5px; color: var(--muted); }
@media (max-width: 479px) { .fl-af-planos { grid-template-columns: 1fr; } }
.fl-af-resultado { padding: 28px; border-radius: 20px; background: var(--fl-ui); border: 1px solid var(--fl-borda); box-shadow: 0 30px 80px -40px color-mix(in oklab, var(--p-accent) 60%, transparent); display: grid; gap: 12px; }
.fl-af-resultado__rot { margin: 0; font-size: 14px; color: var(--muted); }
.fl-af-resultado__mes { margin: 0 0 6px; font: 700 clamp(40px, 4vw, 54px)/1 var(--font-display); letter-spacing: -0.03em; color: var(--p-ink); }
.fl-af-resultado__linha { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--fl-borda); font-size: 15px; color: var(--muted); }
.fl-af-resultado__linha b { color: var(--p-ink); font-family: var(--font-display); }
.fl-af-resultado__nota { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.fl-af-quem li { display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .fl-js .fl-af-extrato li { animation: none !important; } }