/* One — navegação, compra e pagamento pensados para o celular. */
html { scroll-padding-top: 90px; }
.pular { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--ink); color: white; padding: 12px 20px; }
.pular:focus { top: 10px; }
.sobretitulo { color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .13em; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.hero h1 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1.08; }
.hero h1 span { color: var(--blue); }
.hero .lead { max-width: 30em; font-size: 18px; }
.hero .wrap { gap: 48px; padding-block: 60px; }
.rede-visual { position: relative; padding: 28px 26px 20px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #f4f6fa; }
.rede-titulo { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 650; letter-spacing: .12em; color: var(--muted); }
.rede-visual > p { font-size: 32px; line-height: 1.1; letter-spacing: -.03em; margin-top: 20px; }
.rede-visual > p strong { color: var(--blue); }
.rede-visual .painel-rede { margin-top: 4px; max-height: 245px; object-fit: contain; }
.rede-base { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 12px; }
.cabeca .sobretitulo { margin-bottom: 12px; }
#planos .cabeca { margin-bottom: 28px; }
#planos.secao { padding-block: 64px; }
#servicos { padding-top: 64px; }
.plano.plus { border-color: #f0b58a; }
.plano h3 { padding-right: 95px; }
.etiqueta-plus { font-size: 11px; }
.menu-botao, .barra-mobile { display: none; }
.escolha-plano { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-top: 28px; }
.escolha-plano > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.escolha-plano > summary::-webkit-details-marker { display: none; }
.escolha-plano > summary > span { display: grid; gap: 3px; }
.escolha-plano small { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.escolha-plano strong { font-size: 21px; }
.escolha-plano #periodo-selecionado { font-size: 14px; color: var(--muted); }
.escolha-plano summary > b { font-size: 13px; color: var(--blue); white-space: nowrap; }
.escolha-plano .etapa { margin-top: 24px; }
.escolha-plano legend { font-size: 16px; }
.escolha-plano legend > span { display: none; }
.escolha-plano .opcoes.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcao { min-width: 0; }
.opcao .nome { padding-right: 18px; }
.opcao.metodo { padding: 18px; }
.icone-metodo { font-size: 27px; line-height: 1; color: var(--blue); padding-bottom: 7px; }
.opcao.indisponivel { opacity: .55; cursor: default; }
.campo > small { font-size: 12px; color: var(--muted); }
.metodo-ajuda { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.checkout { gap: 48px; }
.checkout > form { min-width: 0; }
.checkout h1 { font-size: 32px; max-width: 17em; }
.checkout .sobretitulo { margin-bottom: 12px; }
.checkout-acao { display: flex; flex-direction: column; margin-top: 22px; }
.checkout-acao .enviar { margin: 0; width: 100%; }
.acao-total { display: none; }
.checkout .nota-segura { font-size: 12px; }
.voltar-pagamento { display: inline-block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 24px; }
.pg-cabeca .sobretitulo { margin-bottom: 12px; }
.pagamento-metodos { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); gap: 8px; margin: 24px 0; }
.pagamento-metodo { font: 650 15px 'Archivo', system-ui, sans-serif; min-height: 54px; padding: 12px; border: none; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.pagamento-metodo[aria-pressed="true"] { border-bottom-color: var(--blue); color: var(--blue); background: var(--blue-wash); }
.pg-corpo { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.pg-corpo .pg-info { min-width: 0; }
.pg-corpo h2 { font-size: 20px; }
.passo-pequeno { display: block; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .1em; margin-bottom: 9px; }
.texto-pix { color: var(--muted); font-size: 14px; margin-top: 9px; }
.copia { margin-top: 16px; }
.copia input { min-width: 0; }
.copia button { min-height: 52px; }
#expira { font-size: 13px; font-weight: 600; color: var(--amber); }
#qr { padding: 16px; color: var(--muted); text-align: center; font-size: 14px; }
.cartao-painel { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 36px; max-width: 650px; margin-inline: auto; }
.cartao-desenho { display: grid; place-items: center; height: 64px; width: 88px; font-size: 44px; color: var(--blue); border-radius: 12px; background: var(--blue-wash); margin-bottom: 24px; }
.cartao-painel h2 { font-size: 26px; margin-bottom: 14px; }
.cartao-painel > p { color: var(--muted); font-size: 15px; }
.cartao-painel .btn { width: 100%; margin-top: 28px; white-space: normal; line-height: 1.4; }
.demo-acoes { padding: 24px 0; font-size: 12px; color: var(--muted); }
.demo-acoes p { margin-top: 10px; }
.pg-final > .btn { margin-top: 24px; }
.selo-ok { font-size: 36px; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
  .hero h1 { font-size: 42px; }
  .hero .garantias { gap: 10px; font-size: 13px; }
  .rede-visual { padding: 22px 18px 18px; }
  .rede-visual > p { font-size: 26px; }
  .rede-base { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 760px) {
  .menu-botao { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; margin-left: auto; }
  .menu-botao span { display: block; width: 18px; height: 2px; background: var(--ink); }
  #menu-principal { display: none; position: absolute; top: 61px; left: 0; right: 0; margin: 0; background: white; border-bottom: 1px solid var(--line); padding: 14px 18px 20px; box-shadow: 0 12px 20px #0f1e3610; }
  .menu-botao[aria-expanded="true"] + #menu-principal { display: grid; gap: 0; }
  #menu-principal a:not(.btn) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); }
  #menu-principal .btn { margin-top: 14px; }
  .hero .wrap { grid-template-columns: 1fr; padding-block: 32px; gap: 24px; }
  .hero h1 { font-size: clamp(34px, 8.7vw, 49px); max-width: 14em; }
  .hero .lead { font-size: 16px; margin-block: 18px 22px; line-height: 1.65; }
  .hero .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .acoes .btn { padding-inline: 12px; font-size: 14px; min-height: 50px; }
  .hero .garantias { display: flex; gap: 8px 16px; margin-top: 20px; }
  .rede-visual { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 16px; border-radius: 12px; gap: 8px; }
  .rede-titulo { grid-column: 1 / -1; font-size: 9px; }
  .rede-visual > p { margin: 0; font-size: 20px; }
  .rede-visual .painel-rede { display: none; }
  .rede-base { flex-direction: column; align-items: flex-end; padding: 0; border: 0; font-size: 11px; gap: 1px; }
  #planos.secao { padding-block: 40px; }
  #planos .cabeca h2 { font-size: 29px; }
  #planos .cabeca p:not(.sobretitulo) { font-size: 15px; }
  .planos { gap: 18px; }
  .plano { padding: 24px 20px 4px; }
  .plano .preco strong { font-size: 38px; }
  .plano .preco { margin-block: 16px 4px; }
  .plano .equivale { min-height: 0; font-size: 13px; }
  .plano .btn { margin-block: 20px 18px; }
  .plano .resumo-plano { font-size: 14px; }
  #servicos { padding-block: 44px; }
  .seletor button { min-height: 44px; }
  .pagina-inicio { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .barra-mobile { display: flex; position: fixed; bottom: 0; left: 0; right: 0; align-items: center; justify-content: space-between; gap: 12px; background: #fffffffa; border-top: 1px solid var(--line); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); z-index: 25; }
  .barra-mobile > div { display: grid; gap: 3px; }
  .barra-mobile strong { font-size: 11px; }
  .barra-mobile > div > span { font-size: 10px; color: var(--muted); }
  .barra-mobile .btn { padding-inline: 14px; font-size: 13px; }
  .checkout { padding-top: 28px; }
  .checkout h1 { font-size: 29px; }
  .checkout .intro { font-size: 15px; }
  .checkout .etapa { margin-top: 26px; }
  .checkout .etapa legend { font-size: 17px; }
  .checkout .campos { gap: 16px; }
  .checkout input { font-size: 16px; }
  .opcoes.duas { grid-template-columns: 1fr 1fr; }
  .opcao { padding: 13px; }
  .opcao .nome { font-size: 14px; }
  .opcao .detalhe { font-size: 12px; }
  .opcao.metodo { padding: 16px 12px; }
  .opcao .valor { font-size: 17px; }
  .escolha-plano { margin-top: 24px; padding: 16px; }
  .escolha-plano strong { font-size: 18px; }
  .checkout .total-cel { margin-top: 24px; gap: 8px; }
  .total-cel strong { font-size: 20px; white-space: nowrap; }
  .total-cel span { font-size: 13px; }
  .checkout .aceite { font-size: 13px; }
  .checkout { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
  .checkout-acao { position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; background: #fffffffa; border-top: 1px solid var(--line); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); flex-direction: row; gap: 12px; align-items: center; }
  .acao-total { display: grid; gap: 2px; white-space: nowrap; }
  .acao-total span { font-size: 10px; color: var(--muted); }
  .acao-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
  .checkout-acao .enviar { flex: 1; width: auto; padding-inline: 12px; font-size: 14px; min-height: 52px; }
  .pagamento { padding-top: 24px; }
  .pg-cabeca { display: grid; gap: 22px; }
  .pg-cabeca h1 { font-size: 30px; }
  .pg-cabeca > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .pg-cabeca .situacao { margin: 0; font-size: 11px; padding-inline: 8px; }
  .pg-cabeca .pg-valor { font-size: 32px; }
  .pg-corpo { display: flex; flex-direction: column; gap: 28px; padding: 22px 18px; }
  .pg-qr { order: 2; border-top: 1px solid var(--line); padding-top: 22px; }
  .pg-qr .qr { width: 180px; height: 180px; margin-inline: auto; }
  .pg-info { width: 100%; }
  .pg-info .copia { display: grid; }
  .pg-info .copia .btn { width: 100%; }
  .cartao-painel { padding: 24px 20px; }
  .cartao-painel h2 { font-size: 24px; }
  .demo-acoes .btn { width: 100%; font-size: 13px; white-space: normal; line-height: 1.4; }
}
@media (min-width: 761px) and (max-width: 900px) {
  #menu-principal { gap: 14px; }
  #menu-principal a:not(.btn) { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lead { animation: aparecer .45s ease-out both; }
  .hero .lead { animation-delay: .08s; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 380px) {
  .hero .acoes { grid-template-columns: 1fr; }
}
.hero .wrap > div { min-width: 0; }