/* Velox. Páginas por função (Onda 2 de SEO, prévia de 29/10/2026). Usa as cores, as fontes, a barra, a moldura, os
   cartões escuros, o final e o rodapé do estilo.css; aqui só o que é das páginas de função. */
.so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pag-fn .barra { background: rgba(251, 250, 248, .96); }

/* ---------- topo ---------- */
.fn-topo { position: relative; padding: 40px 0 8px; isolation: isolate; }
/* o brilho fica dentro da tela (a caixa termina na borda; o centro do círculo continua 220px para dentro), sem criar rolagem de lado */
.fn-topo::before { content: ""; position: absolute; inset: -320px 0 auto auto; width: 720px; height: 720px; z-index: -1; background: radial-gradient(circle 360px at 500px 50%, rgba(255, 181, 71, .30), rgba(255, 107, 26, .09) 55%, transparent 72%); pointer-events: none; }
.fn-migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinta-3-txt); }
.fn-migalha a { color: var(--tinta-3-txt); text-decoration: none; }
.fn-migalha a:hover { color: var(--marca-texto); }
.fn-migalha svg { width: 14px; height: 14px; }
.fn-selo { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--branco); box-shadow: var(--sh-cartao); font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.fn-selo i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); color: #fff; }
.fn-selo svg { width: 13px; height: 13px; }
.fn-topo h1 { margin: 18px 0 16px; max-width: 21ch; font: 700 clamp(36px, 3.6vw + 8px, 62px)/1.03 var(--f-titulo); letter-spacing: -.036em; color: var(--tinta); text-wrap: balance; }
.fn-topo__lead { margin: 0; max-width: 62ch; font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.fn-topo__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fn-topo__acoes .btn { height: 54px; padding: 0 26px; font-size: 16px; }
.fn-confia { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--tinta-2); }
.fn-confia li { display: inline-flex; align-items: center; gap: 7px; }
.fn-confia svg { width: 15px; height: 15px; color: #16A34A; }

/* ---------- palco: a tela real grande, com cartão escuro por cima ---------- */
.fn-palco { position: relative; margin-top: 44px; padding: 44px 56px 0; border-radius: 28px; background: radial-gradient(60% 50% at 50% 100%, rgba(255, 150, 70, .22), rgba(255, 150, 70, 0) 72%), var(--branco); box-shadow: var(--sh-cartao), 0 30px 60px -40px rgba(60, 25, 0, .18); }
.fn-palco__tela { position: relative; max-width: 1000px; margin-inline: auto; }
.fn-palco--estreito .fn-palco__tela { max-width: 720px; }
.fn-palco .moldura--app { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -30px rgba(60, 25, 0, .35); }
.fn-palco .moldura__img { display: block; }
.fn-palco .flutua-cartao { right: -64px; bottom: 36px; }
.fn-palco .flutua-cartao--esq { right: auto; left: -64px; }
.fn-palco .fn-cartao--estreito { width: 238px; }
/* tela estreita: a tela e o cartão lado a lado, o cartão entrando 40 px na tela */
.fn-palco--lado .fn-palco__tela { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 680px) 320px; justify-content: center; align-items: center; }
.fn-palco--lado .flutua-cartao { position: relative; right: auto; bottom: auto; width: auto; margin-left: -12px; }
/* cartão em faixa na base da tela (as linhas de cima são as que importam) */
.fn-palco .fn-cartao-faixa { right: -48px; bottom: 22px; width: 800px; padding: 10px 10px 10px 18px; }
.fn-cartao-faixa .fila__topo { padding-bottom: 8px; }
.fn-cartao-faixa .fn-conta { display: flex; align-items: stretch; margin: 8px 0 0; }
.fn-cartao-faixa .fn-conta div { flex-direction: column; justify-content: flex-end; gap: 4px; padding: 0 14px; border: 0; border-left: 1px solid rgba(255, 255, 255, .07); }
.fn-cartao-faixa .fn-conta div:first-child { padding-left: 0; border-left: 0; }
.fn-cartao-faixa .fn-conta dt { font-size: 12px; white-space: nowrap; }
.fn-cartao-faixa .fn-conta dd { font: 600 16px/1 var(--f-titulo); }
.fn-cartao-faixa .fn-conta .fn-conta__fim { margin: 0 0 0 auto; padding: 10px 14px; border-left: 0; }
.fn-palco__nota { margin: 0; padding: 16px 0 18px; text-align: center; font-size: 13px; color: var(--tinta-3-txt); }

/* cartão escuro: "o que nunca sai sozinho", "títulos diferentes", "frete subiu" */
.fn-cartao-lista { width: 312px; }
.fn-cartao-lista ul { margin: 0; padding: 4px 0 2px; list-style: none; }
.fn-cartao-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; font-size: 13.5px; line-height: 1.4; color: #D8D3CC; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.fn-cartao-lista li:last-child { border-bottom: 0; }
.fn-cartao-lista li b { color: #F5F2EF; font-weight: 600; }
.fn-cartao-lista small { display: block; margin-top: 2px; font-size: 12px; color: #9A958D; }
.fn-cartao-lista .fn-ic { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: rgba(255, 138, 61, .14); color: #FF8A3D; font: 700 11px/1 var(--f-texto); }
.fn-cartao-lista .fn-ic--ok { background: rgba(111, 211, 155, .14); color: #6FD39B; }
.fn-cartao-lista .fn-ic svg { width: 12px; height: 12px; }
.fn-cartao-pe { margin: 6px 0 2px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: #9A958D; }
.fn-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #FF8A3D; box-shadow: 0 0 0 3px rgba(255, 138, 61, .18); }
.fn-ponto--verde { background: #6FD39B; box-shadow: 0 0 0 3px rgba(111, 211, 155, .16); }
.fn-ponto--verm { background: #FF5A5A; box-shadow: 0 0 0 3px rgba(255, 90, 90, .18); }
.fn-conta { margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.fn-conta div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.fn-conta dt { color: #A39E97; }
.fn-conta dd { margin: 0; font-weight: 600; color: #EDEBE7; white-space: nowrap; }
.fn-conta .fn-conta__fim { margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 10px; background: rgba(255, 70, 70, .12); box-shadow: inset 0 0 0 1px rgba(255, 98, 98, .38); }
.fn-conta .fn-conta__fim dt { color: #FFB0A8; font-weight: 500; }
.fn-conta .fn-conta__fim dd { font: 600 20px/1 var(--f-titulo); letter-spacing: -.02em; color: #FF6B6B; }
.fn-destaque { grid-template-columns: 280px minmax(0, 1fr); margin-top: 48px; background: linear-gradient(180deg, #FFF4EA, #FFFBF7); box-shadow: inset 0 0 0 1px rgba(255, 107, 26, .22); }
.fn-destaque p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--tinta-2); }
.fn-destaque p:last-child { margin-bottom: 0; }

/* janela recriada (exemplo ilustrativo): Levar para outra loja */
.fn-janela { --c1: #F5F4F2; --c2: #C9C5BF; --c3: #A29D96; --c4: #8F8A83; --cl: rgba(255, 255, 255, .07); --ok: #6FD39B;
  border-radius: 10px 10px 0 0; background: #121214; color: var(--c1); font: 400 14px/1.45 var(--f-texto); overflow: hidden; }
.fn-janela__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--cl); }
.fn-janela__tit { font: 600 17px/1.2 var(--f-titulo); letter-spacing: -.01em; }
.fn-janela__chip { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 12px; color: var(--c2); }
.fn-janela__ex { margin-left: auto; font-size: 12px; color: var(--c4); }
.fn-janela__corpo { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.fn-janela__lado { padding: 18px 22px; border-right: 1px solid var(--cl); }
.fn-janela__rot { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c4); }
.fn-janela__opc { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font-size: 13.5px; color: var(--c2); }
.fn-janela__opc i { flex: none; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #3A3A40; }
.fn-janela__opc--sim { color: var(--c1); }
.fn-janela__opc--sim i { background: var(--marca); box-shadow: none; }
.fn-janela__opc--radio i { border-radius: 50%; }
.fn-janela__opc--radio.fn-janela__opc--sim i { background: #121214; box-shadow: inset 0 0 0 4px var(--marca); }
.fn-janela__lista { padding: 8px 22px 14px; }
.fn-janela__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 12px 0; border-bottom: 1px solid var(--cl); }
.fn-janela__item:last-child { border-bottom: 0; }
.fn-janela__loja { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--c4); }
.fn-janela__titulo { grid-column: 1; font-weight: 600; color: var(--c1); }
.fn-janela__det { grid-column: 1; font-size: 12.5px; color: var(--c3); }
.fn-janela__preco { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; font: 600 16px/1.2 var(--f-titulo); color: var(--c1); font-variant-numeric: tabular-nums; }
.fn-janela__preco small { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--f-texto); color: var(--ok); }
.fn-janela__pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px 16px; border-top: 1px solid var(--cl); font-size: 13px; color: var(--c3); }
.fn-janela__btn { padding: 8px 14px; border-radius: 8px; background: linear-gradient(180deg, #FF7A2B, #F05A0E); color: #fff; font-weight: 600; font-size: 13px; }

/* ---------- seções ---------- */
.fn-sec { padding-block: clamp(72px, 7vw, 112px) 0; }
.fn-sec__cab { max-width: 760px; }
.fn-sec__cab .h2 { margin: 0; }
.fn-sec__cab p { margin: 18px 0 0; font-size: var(--t-lead); line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.fn-olho { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 12.5px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--marca-texto); }
.fn-olho::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--marca); }

/* texto corrido (as palavras que o Google lê) */
.fn-texto { max-width: 760px; margin-top: 22px; }
.fn-texto p, .fn-texto li { font-size: 17px; line-height: 1.7; color: var(--tinta-2); }
.fn-texto p { margin: 0 0 16px; }
.fn-texto b { color: var(--tinta); }
.fn-texto ul { margin: 0 0 16px; padding-left: 20px; }
.fn-texto li + li { margin-top: 6px; }
.fn-texto a, .fn-faq a, .fn-nao a { color: var(--marca-texto); text-underline-offset: 3px; }

/* o problema: texto e o número que dói, lado a lado */
.fn-dor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px 64px; align-items: start; }
.fn-dor .fn-texto { margin-top: 0; }
.fn-dor__cartao { padding: 26px 26px 24px; border-radius: 22px; background: var(--branco); box-shadow: var(--sh-claro); }
.fn-dor__rot { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3-txt); }
.fn-dor__num { margin: 10px 0 0; font: 700 clamp(34px, 2vw + 20px, 44px)/1 var(--f-titulo); letter-spacing: -.035em; color: #C2281A; }
.fn-dor__num--ok { color: #137A3E; }
.fn-dor__txt { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.fn-dor__fonte { margin: 14px 0 0; font-size: 12.5px; color: var(--tinta-3-txt); }

/* os 3 passos */
.fn-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.fn-passos li { position: relative; padding: 26px 24px 24px; border-radius: 22px; background: var(--branco); box-shadow: var(--sh-claro); counter-increment: passo; }
.fn-passos li::before { content: counter(passo); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(180deg, #FF8A3D, var(--marca)); color: #fff; font: 700 15px/1 var(--f-titulo); box-shadow: 0 6px 14px -6px rgba(255, 107, 26, .7); }
.fn-passos h3 { margin: 18px 0 8px; font: 600 20px/1.2 var(--f-titulo); letter-spacing: -.015em; color: var(--tinta); text-wrap: balance; }
.fn-passos p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tinta-2); }

/* tela + texto lado a lado */
.fn-par { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; margin-top: 44px; }
.fn-par--inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.fn-par--inv .fn-par__tela { order: 2; }
.fn-par__tela { position: relative; margin: 0; }
.fn-par__tela .moldura { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), var(--sh-moldura); }
.fn-par__tela .moldura__img { display: block; }
.fn-par__tela figcaption { margin-top: 12px; font-size: 13px; color: var(--tinta-3-txt); }
.fn-par__texto h3 { margin: 0 0 12px; font: 600 clamp(24px, 1vw + 16px, 30px)/1.15 var(--f-titulo); letter-spacing: -.02em; color: var(--tinta); text-wrap: balance; }
.fn-par__texto p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; color: var(--tinta-2); }
.fn-par__texto ul { margin: 0; padding: 0; list-style: none; }
.fn-par__texto li { position: relative; padding: 0 0 10px 28px; font-size: 16px; line-height: 1.55; color: var(--tinta-2); }
.fn-par__texto li b { color: var(--tinta); }
.fn-par__texto li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 107, 26, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D94B0B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E") no-repeat center / 11px; }

/* os 3 modos */
.fn-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.fn-modo { position: relative; padding: 22px 22px 20px; border-radius: 20px; background: var(--branco); box-shadow: var(--sh-cartao); }
.fn-modo--padrao { box-shadow: inset 0 0 0 2px var(--marca), var(--sh-cartao); }
.fn-modo__tag { position: absolute; top: 18px; right: 18px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 107, 26, .12); font-size: 11.5px; font-weight: 700; color: var(--marca-texto); }
.fn-modo h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 18px/1.2 var(--f-titulo); color: var(--tinta); }
.fn-modo h3 i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--papel-2); color: var(--tinta-2); }
.fn-modo h3 svg { width: 17px; height: 17px; }
.fn-modo--auto h3 i { background: rgba(22, 163, 74, .1); color: #15803D; }
.fn-modo p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }

/* o que fica de fora (sinceridade) */
.fn-nao { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px 48px; margin-top: 56px; padding: 30px 32px; border-radius: 22px; background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--linha); }
.fn-nao h3 { margin: 0; font: 600 22px/1.2 var(--f-titulo); letter-spacing: -.015em; color: var(--tinta); }
.fn-nao h3 + p { margin: 10px 0 0; font-size: 14.5px; color: var(--tinta-3-txt); }
.fn-nao ul { margin: 0; padding: 0; list-style: none; }
.fn-nao li { padding: 0 0 12px 0; font-size: 15.5px; line-height: 1.6; color: var(--tinta-2); }
.fn-nao li:last-child { padding-bottom: 0; }
.fn-nao li b { color: var(--tinta); }

/* perguntas frequentes */
.fn-faq { max-width: 860px; margin-top: 28px; }
.fn-faq details { border-bottom: 1px solid var(--linha-2); }
.fn-faq summary { position: relative; padding: 20px 40px 20px 0; font: 600 18px/1.35 var(--f-titulo); color: var(--tinta); cursor: pointer; list-style: none; }
.fn-faq summary::-webkit-details-marker { display: none; }
.fn-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font: 400 26px/1 var(--f-texto); color: var(--marca-texto); transition: rotate .25s var(--curva-ui); }
.fn-faq details[open] summary::after { rotate: 45deg; }
.fn-faq details p { margin: -4px 0 20px; max-width: 74ch; font-size: 16.5px; line-height: 1.65; color: var(--tinta-2); }

/* outras funções: os cartões (.fn-outras, .fn-outra) moram no estilo.css, porque a home usa os mesmos */

.fn-fim-espaco { height: clamp(80px, 8vw, 120px); }

/* ---------- celular ---------- */
@media (max-width: 960px) {
  .fn-palco { padding: 28px 20px 0; }
  .fn-palco .flutua-cartao, .fn-palco .flutua-cartao--esq, .fn-palco .fn-cartao--estreito, .fn-palco .fn-cartao-faixa { position: relative; right: auto; left: auto; bottom: auto; width: 100%; margin: 14px 0 0; }
  .fn-palco--lado .fn-palco__tela { grid-template-columns: minmax(0, 1fr); }
  .fn-cartao-faixa .fn-conta { display: block; }
  .fn-cartao-faixa .fn-conta div { flex-direction: row; justify-content: space-between; padding: 7px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  .fn-cartao-faixa .fn-conta .fn-conta__fim { margin: 6px 0 0; padding: 10px 12px; }
  .fn-dor, .fn-par, .fn-par--inv, .fn-nao { grid-template-columns: minmax(0, 1fr); }
  .fn-par--inv .fn-par__tela { order: 0; }
  .fn-passos, .fn-modos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pag-fn .barra__nav { display: none; }
  .fn-topo { padding-top: 26px; }
  .fn-topo__acoes .btn { width: 100%; }
  .fn-palco { margin-top: 32px; border-radius: 22px; padding: 18px 12px 0; }
  .fn-palco .moldura { margin-inline: auto; }
  .fn-janela__corpo { grid-template-columns: minmax(0, 1fr); }
  .fn-janela__lado { border-right: 0; border-bottom: 1px solid var(--cl); display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .fn-janela__lado .fn-janela__rot { grid-column: 1 / -1; }
  .fn-janela__ex { margin-left: 0; width: 100%; }
  .fn-nao { padding: 24px 20px; }
}