/* PomoRats — site estático. Paleta Musgo, só Montserrat. */
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(fonts/montserrat-latin-700-normal.woff2) format('woff2'); }

:root {
  --papel: #F6F4EA; --cartao: #FFFDF6; --tinta: #22261A; --fg2: #4E5440; --fg3: #626752;
  --sage: #55663A; --prof: #3A4526; --mint: #D3DDA4; --creme: #F6EBCB; --ambar: #B3822E; --ambar-txt: #8A6418;
  --linha: #E3E0D0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; font-weight: 500; background: var(--papel); color: var(--tinta); line-height: 1.6; }
a { color: var(--prof); }
a:focus-visible, .bt:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.caixa { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* topo */
.topo { display: flex; align-items: center; gap: 8px; padding-top: 18px; padding-bottom: 18px; }
.topo .logo { margin-right: auto; }
.topo .logo img { height: 40px; width: auto; display: block; }
.topo-link { font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 999px; color: var(--prof); white-space: nowrap; }
.topo-link:hover { background: var(--creme); }
.topo nav { display: flex; gap: 6px; align-items: center; }
.topo nav a { font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 999px; color: var(--fg2); }
.topo nav a:hover { background: var(--creme); color: var(--tinta); }
.l-pt .topo nav a[hreflang=pt], .l-es .topo nav a[hreflang=es], .l-en .topo nav a[hreflang=en] { background: var(--mint); color: var(--prof); }
.topo nav .curto { display: none; }

/* três idiomas na mesma página: só o bloco do idioma ativo aparece (classe posta por idioma.js) */
html:not(.l-pt) [data-l=pt], html:not(.l-es) [data-l=es], html:not(.l-en) [data-l=en] { display: none !important; }

/* botões compactos */
.bt { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
  font: 700 14px/1 Montserrat, sans-serif; text-decoration: none; cursor: pointer; background: var(--prof); color: var(--mint); }
.bt.claro { background: var(--cartao); color: var(--prof); box-shadow: inset 0 0 0 1.5px var(--mint); }
.bt[aria-disabled="true"], .bt:disabled { cursor: default; background: var(--cartao); color: var(--fg3); box-shadow: inset 0 0 0 1.5px var(--linha); }
.bt small { font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ambar-txt); }
.bt svg { width: 18px; height: 18px; flex: none; }
.bts { display: flex; flex-wrap: wrap; gap: 10px; }

/* início */
.heroi { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; padding-top: 24px; padding-bottom: 40px; }
.heroi h1 { font-size: 48px; line-height: 1.08; letter-spacing: -1.4px; margin: 0 0 16px; }
.heroi p.lead { font-size: 18px; color: var(--fg2); margin: 0 0 24px; max-width: 34em; }
.heroi .arte { background: radial-gradient(circle closest-side, var(--creme) 0 97%, transparent 98%); display: grid; place-items: center; }
.heroi .arte img { width: 100%; max-width: 380px; }
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin: 0 0 10px; }

.recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: 48px; }
.card { background: var(--cartao); border-radius: 22px; padding: 18px 18px 20px; box-shadow: 0 1px 0 var(--linha); }
.card img { width: 96px; height: 96px; object-fit: contain; display: block; margin-bottom: 8px; }
.card h2 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.3px; }
.card p { margin: 0; font-size: 14px; color: var(--fg2); }

/* rodapé */
.rodape { background: var(--prof); color: var(--creme); padding: 28px 0 20px; font-size: 14px; }
.rodape .caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.rodape a { color: var(--mint); font-weight: 600; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape-logo { height: 40px; width: auto; display: block; order: 3; margin-left: auto; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rodape-fim { order: 4; flex-basis: 100%; margin: 6px 0 0; font-size: 12px; color: var(--creme); opacity: .9; }

/* botões das lojas: mesma largura e altura; nome em cima, «em breve» embaixo */
.lojas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 440px; }
.bt.loja { height: auto; min-height: 56px; padding: 8px 14px; border-radius: 16px; gap: 10px; justify-content: flex-start; }
.bt.loja svg { width: 22px; height: 22px; }
.loja-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; min-width: 0; }
.loja-txt b { font-size: 14px; color: var(--tinta); white-space: nowrap; }

/* Como funciona */
.tu { padding-bottom: 48px; }
.tu-topo { display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: center; padding: 8px 0 20px; }
.tu-topo h1 { font-size: 44px; line-height: 1.08; letter-spacing: -1.2px; margin: 0 0 12px; }
.tu-topo h1 em { font-style: normal; color: var(--sage); }
.tu-topo p { font-size: 17px; color: var(--fg2); margin: 0; max-width: 34em; }
.tu-topo img { width: 200px; height: auto; }
.tu-ciclo { background: var(--cartao); border-radius: 24px; padding: 18px 20px; box-shadow: 0 1px 0 var(--linha); margin-bottom: 16px; }
.tu-fluxo { display: grid; grid-template-columns: 1fr auto 150px auto 1fr; gap: 14px; align-items: center; }
.tu-fontes, .tu-usos { display: grid; gap: 8px; }
.tu-fontes div { background: var(--papel); border-radius: 14px; padding: 8px 12px; border-left: 4px solid var(--sage); }
.tu-fontes div:nth-child(2) { border-color: #B5563C; } .tu-fontes div:nth-child(3) { border-color: var(--ambar); }
.tu-fontes b, .tu-fontes span { display: block; } .tu-fontes b { font-size: 14px; } .tu-fontes span { font-size: 13px; color: var(--fg2); }
.tu-seta { width: 26px; height: 2px; background: var(--fg3); position: relative; }
.tu-seta::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--fg3); border-right: 0; }
.tu-semente { text-align: center; } .tu-semente img { width: 120px; height: auto; display: block; margin: 0 auto 2px; } .tu-semente b { font-size: 15px; }
.tu-usos { grid-template-columns: 1fr 1fr; }
.tu-usos span { background: var(--mint); color: var(--prof); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 10px; text-align: center; }
.tu-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.tu-indice a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--cartao); box-shadow: inset 0 0 0 1.5px var(--linha); color: var(--prof); font-size: 13px; font-weight: 700; text-decoration: none; }
.tu-secoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tu-sec { background: var(--cartao); border-radius: 22px; padding: 18px 20px; box-shadow: 0 1px 0 var(--linha); overflow: hidden; scroll-margin-top: 12px; }
.tu-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tu-cab h2, .tu-cab-h { font-size: 20px; letter-spacing: -.3px; margin: 0; }
.tu-cab img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.tu-sec ul { margin: 6px 0 0; padding-left: 18px; }
.tu-sec li { font-size: 14.5px; color: var(--fg2); margin: 6px 0; }
.tu-sec li::marker { color: var(--sage); }
/* grupo-estudando: a arte tem cortes nas laterais e embaixo — encosta na borda de baixo e nas laterais do cartão */
.tu-sec.encosta { padding-bottom: 0; display: flex; flex-direction: column; }
.tu-sec.encosta .arte-borda { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: auto -20px 0; padding-top: 10px; }

/* texto legal */
.legal { max-width: 760px; margin: 0 auto; padding: 16px 20px 64px; }
.legal h1 { font-size: 36px; letter-spacing: -1px; line-height: 1.15; margin: 8px 0 16px; }
.legal .intro { font-size: 16px; color: var(--fg2); }
.legal section { padding: 22px 0; border-top: 1px solid var(--linha); }
.legal h2 { font-size: 18px; margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; }
.legal h2 span { font-size: 12px; color: var(--ambar-txt); letter-spacing: .1em; flex: none; }
.legal p, .legal li { font-size: 15px; color: var(--fg2); margin: 8px 0; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal b { color: var(--tinta); }
.legal .cruzado { margin-top: 28px; font-weight: 700; }

/* convite */
.convite { max-width: 520px; margin: 0 auto; padding: 8px 20px 56px; text-align: center; }
.convite .cartao { background: var(--cartao); border-radius: 28px; padding: 24px 22px 26px; box-shadow: 0 1px 0 var(--linha); }
.convite img.masc { width: 170px; height: auto; display: block; margin: 0 auto 6px; }
.convite h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 8px; }
.convite .cod { display: inline-block; font-size: 13px; font-weight: 700; color: var(--prof); background: var(--mint); padding: 3px 12px; border-radius: 999px; margin: 0 0 14px; letter-spacing: .04em; word-break: break-all; }
.convite p { color: var(--fg2); margin: 0 0 18px; font-size: 15px; }
.convite .bts { justify-content: center; }
.convite ol { text-align: left; color: var(--fg2); font-size: 14.5px; padding-left: 22px; margin: 16px 0 0; }
.convite ol li { margin: 6px 0; }
.convite h2 { font-size: 15px; margin: 24px 0 0; text-align: left; }

@media (max-width: 1023px) {
  .rodape-logo { order: 0; margin: 0 auto 0 0; }
  .rodape-links { justify-content: flex-end; }
  .tu-secoes { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .lojas { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 600px) {
  .rodape .caixa { flex-direction: column; align-items: stretch; text-align: center; gap: 4px; }
  .rodape-logo { margin: 0 auto 10px; }
  .rodape-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .rodape-links a, .rodape-mail { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .rodape-fim { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(246, 235, 203, .2); }
  .tu-topo { grid-template-columns: 1fr 110px; }
  .tu-topo img { width: 110px; }
  .tu-topo h1 { font-size: 32px; letter-spacing: -.8px; }
  .tu-topo p { font-size: 15.5px; }
  .tu-fluxo { grid-template-columns: 1fr; justify-items: stretch; }
  .tu-seta { width: 2px; height: 20px; justify-self: center; }
  .tu-seta::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--fg3); border-bottom: 0; }
  .tu-usos { grid-template-columns: repeat(3, 1fr); }
  .tu-sec { padding: 16px; }
  .tu-sec.encosta .arte-borda { width: calc(100% + 32px); margin: auto -16px 0; }
}
@media (max-width: 860px) {
  .heroi { grid-template-columns: 1fr; gap: 8px; padding-top: 4px; }
  .heroi .arte { order: -1; }
  .heroi .arte img { max-width: 220px; }
  .heroi h1 { font-size: 34px; letter-spacing: -1px; }
  .heroi p.lead { font-size: 16px; }
  .recursos { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 520px) {
  .topo .logo img { height: 30px; }
  .topo nav a, .topo-link { padding: 6px 8px; }
  .topo { gap: 2px; }
  .topo nav .longo { display: none; }
  .topo nav .curto { display: inline; }
  .recursos { grid-template-columns: 1fr; }
  .card { display: grid; grid-template-columns: 72px 1fr; gap: 0 14px; align-items: center; padding: 14px; }
  .card img { width: 72px; height: 72px; margin: 0; grid-row: span 2; }
  .legal h1 { font-size: 28px; }
}

/* páginas dos links dos e-mails (verify-email, reset-password, unsubscribe) — 15/10 */
.conta-pg form { text-align: left; margin: 0 0 6px; }
.conta-pg label { display: block; font-size: 13px; font-weight: 700; color: var(--fg2); margin: 0 0 6px; }
.conta-pg input { width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--linha); background: #fff;
  font: 500 16px Montserrat, sans-serif; color: var(--tinta); margin: 0 0 12px; }
.conta-pg input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; border-color: var(--linha); }
.conta-pg .regras { font-size: 12.5px; color: var(--fg3); margin: -4px 0 14px; }
.conta-pg .erro { color: #9A3B1E; font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.conta-pg .bt { width: 100%; justify-content: center; height: 46px; }

/* ===== site v2 (PROPOSTA 15/10): seções no estilo das páginas de app — telas reais, planos, perguntas ===== */
.topo-link.extra { display: inline-flex; }
.bloco { padding-top: 28px; padding-bottom: 28px; }
.sec-h { font-size: 32px; line-height: 1.12; letter-spacing: -.8px; margin: 0 0 10px; }
.sec-p { font-size: 16.5px; color: var(--fg2); margin: 0 0 20px; max-width: 40em; }
.sec-link { margin: 18px 0 0; }
.bt.claro { height: 44px; }
h3 { letter-spacing: -.3px; }

/* moldura de celular só em CSS */
.fone { background: #22261A; border-radius: 34px; padding: 7px; box-shadow: 0 18px 40px -18px rgba(34,38,26,.45); width: 100%; max-width: 250px; margin: 0 auto; }
.fone img { display: block; width: 100%; border-radius: 28px; aspect-ratio: 540 / 1174; object-fit: cover; object-position: top; }
.fone.grande { max-width: 290px; }

.heroi.v2 { grid-template-columns: 1.1fr .9fr; }
.heroi-fone { position: relative; display: grid; place-items: center; padding: 10px 0; background: radial-gradient(circle closest-side, var(--creme) 0 97%, transparent 98%); }
.heroi-masc { position: absolute; left: -6px; bottom: 0; width: 150px; }

/* problema × solução */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-card { border-radius: 24px; padding: 18px 20px; display: grid; grid-template-columns: 88px 1fr; gap: 0 14px; align-items: start; }
.vs-card img { width: 88px; height: 88px; object-fit: contain; grid-row: span 2; }
.vs-card h3 { font-size: 19px; margin: 6px 0 4px; }
.vs-card ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--fg2); }
.vs-card li { margin: 4px 0; }
.vs-card.ruim { background: #EFE9DF; } .vs-card.ruim li::marker { color: #9A3B1E; }
.vs-card.bom { background: var(--mint); } .vs-card.bom h3 { color: var(--prof); } .vs-card.bom ul { color: var(--prof); } .vs-card.bom li::marker { color: var(--prof); }

/* 3 passos com tela */
.passos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passos li { background: var(--cartao); border-radius: 24px; padding: 18px 18px 0; box-shadow: 0 1px 0 var(--linha); overflow: hidden; display: flex; flex-direction: column; }
.passo-n { width: 32px; height: 32px; border-radius: 50%; background: var(--prof); color: var(--mint); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.passos h3 { font-size: 19px; margin: 10px 0 4px; } .passos p { font-size: 14.5px; color: var(--fg2); margin: 0 0 14px; }
.passos .fone { margin: auto auto -70px; max-width: 220px; } /* o celular encosta e passa da borda de baixo do cartão */

.para { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.para .card h3 { font-size: 17px; margin: 0 0 6px; } .para .card p { margin: 0; font-size: 14px; color: var(--fg2); }

/* faixas: texto + tela */
.faixa { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: center; background: var(--cartao); border-radius: 28px; padding: 28px; box-shadow: 0 1px 0 var(--linha); }
.faixa .fone { max-width: 240px; }
.faixa.inversa { grid-template-columns: 1fr 1fr; background: var(--creme); }
.faixa .recorte { width: 100%; border-radius: 22px; display: block; }
.faixa .sec-p { margin-bottom: 0; }

.rec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rec-i { background: var(--cartao); border-radius: 20px; padding: 16px; box-shadow: 0 1px 0 var(--linha); }
.rec-i i { width: 40px; height: 40px; border-radius: 12px; background: var(--mint); color: var(--prof); display: grid; place-items: center; margin-bottom: 8px; }
.rec-i i svg { width: 22px; height: 22px; }
.rec-i h3 { font-size: 15.5px; margin: 0 0 4px; } .rec-i p { font-size: 13.5px; color: var(--fg2); margin: 0; line-height: 1.5; }

.dif { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.dif-i { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; background: var(--cartao); border-radius: 20px; padding: 14px 16px; box-shadow: 0 1px 0 var(--linha); }
.dif-i img { width: 72px; height: 72px; object-fit: contain; }
.dif-i h3 { font-size: 16px; margin: 0 0 2px; } .dif-i p { font-size: 14px; color: var(--fg2); margin: 0; line-height: 1.5; }

/* planos */
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.plano.gratis { display: flex; flex-direction: column; overflow: hidden; }
.plano-masc { margin: auto -22px -20px auto; padding-top: 12px; width: min(330px, 80%); height: auto; display: block; } /* encosta embaixo e à direita: o corte some na borda */
.plano { position: relative; background: var(--cartao); border-radius: 24px; padding: 20px 22px; box-shadow: 0 1px 0 var(--linha); }
.plano h3 { font-size: 24px; margin: 0; } .plano-sub { margin: 2px 0 12px; font-size: 14px; color: var(--fg2); }
.plano.pro { background: var(--creme); } .plano.pro h3, .plano.pro .plano-sub { color: var(--ambar-txt); }
.plano.pro > img { position: absolute; right: 14px; top: 10px; width: 84px; height: 84px; object-fit: contain; }
.plano-preco { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--ambar-txt); }
.ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ok li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14.5px; }
.ok svg { width: 20px; height: 20px; color: var(--sage); margin-top: 1px; }
.plano.pro .ok svg { color: var(--ambar-txt); }

.tabela-caixa { background: var(--cartao); border-radius: 24px; box-shadow: 0 1px 0 var(--linha); padding: 6px 18px; margin: 18px 0 28px; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th, .tabela td { padding: 12px 8px; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela thead th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.tabela thead th.pro { color: var(--ambar-txt); }
.tabela td { width: 26%; color: var(--fg2); font-weight: 600; }
.tabela tbody th { font-weight: 600; }
.tabela tr.grupo th { padding-top: 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); font-weight: 700; }
.tabela td.sim svg { width: 20px; height: 20px; color: var(--sage); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* perguntas */
.pgs { display: grid; gap: 10px; }
.pg { background: var(--cartao); border-radius: 18px; box-shadow: 0 1px 0 var(--linha); }
.pg summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; font-weight: 700; font-size: 15.5px; }
.pg summary::-webkit-details-marker { display: none; }
.pg summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(45deg); flex: none; margin-top: -4px; transition: transform .2s; }
.pg[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pg p { margin: 0; padding: 0 18px 16px; font-size: 14.5px; color: var(--fg2); }
.fq-cat { margin-bottom: 22px; } .fq-cat h2 { font-size: 20px; margin: 0 0 10px; }
.fq, .pl { padding-bottom: 40px; }

/* chamada final */
.fim { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; background: var(--prof); border-radius: 28px; padding: 26px 28px; margin: 0 0 20px; color: var(--creme); }
.fim .sec-h { color: #fff; } .fim .sec-p { color: #DCE3C2; margin-bottom: 14px; }
.fim img { width: 160px; height: auto; }
.fim .bt.loja { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(211,221,164,.35); color: var(--mint); }
.fim .loja-txt b { color: #fff; } .fim .bt small { color: #F3C46B; }
.pl .fim { margin-top: 28px; }

.rodape-redes { display: flex; gap: 16px; order: 2; }

@media (max-width: 860px) {
  .heroi.v2 { grid-template-columns: 1fr; }
  .heroi-fone { order: -1; }
  .fone.grande { max-width: 230px; }
  .heroi-masc { width: 110px; left: 4%; }
  .vs, .para, .planos { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }
  .passos li { display: grid; grid-template-columns: 1fr 150px; gap: 0 14px; padding-bottom: 0; }
  .passos li .fone { grid-column: 2; grid-row: 1 / span 4; margin: 0 0 -50px; max-width: 150px; border-radius: 26px; padding: 5px; }
  .passos li .fone img { border-radius: 22px; }
  .rec { grid-template-columns: 1fr 1fr; }
  .faixa, .faixa.inversa { grid-template-columns: 1fr; padding: 22px; }
  .faixa .fone { max-width: 210px; }
  .sec-h { font-size: 26px; letter-spacing: -.5px; }
  .fim { grid-template-columns: 1fr; text-align: left; padding: 22px; }
  .fim img { width: 110px; }
}
@media (max-width: 600px) {
  .topo-link.extra { display: none; }
  .rodape-redes { justify-content: center; order: 0; margin: 4px 0; }
  .rodape-redes a { min-height: 44px; display: inline-flex; align-items: center; }
  .rec { grid-template-columns: 1fr; }
  .rec-i { display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; }
  .rec-i i { grid-row: span 2; margin: 0; }
  .vs-card { grid-template-columns: 64px 1fr; padding: 16px; }
  .vs-card img { width: 64px; height: 64px; }
  .tabela th, .tabela td { padding: 10px 4px; font-size: 13.5px; }
  .tabela td { width: 30%; }
}
/* progresso + estudar junto lado a lado; a tela encosta e passa da borda de baixo (sem vão) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.duo-c { background: var(--cartao); border-radius: 28px; padding: 26px 26px 0; box-shadow: 0 1px 0 var(--linha); overflow: hidden; display: flex; flex-direction: column; }
.duo-c.creme { background: var(--creme); padding-bottom: 26px; }
.duo-c .fone { margin: auto auto -120px; max-width: 250px; }
.duo-c .recorte { width: 100%; border-radius: 22px; display: block; margin-top: auto; }
.dif { grid-template-columns: repeat(6, 1fr); }
.dif-i { grid-column: span 2; } .dif-i:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo-c { padding: 22px 22px 0; } .duo-c.creme { padding-bottom: 22px; }
  .duo-c .fone { max-width: 210px; margin-bottom: -90px; }
  .dif { grid-template-columns: 1fr; } .dif-i, .dif-i:nth-child(n+4) { grid-column: auto; }
}

/* site v2 · «Chegando ao Pro» (em breve) e galeria «Mais do app» (15/10) */
.breve-t { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ambar-txt); }
.ok.breve li { grid-template-columns: 1fr auto; font-size: 14px; color: var(--fg2); }
.ok.breve em { font-style: normal; font-size: 12px; font-weight: 700; color: #6B4C10; background: rgba(201,140,50,.14); border-radius: 999px; padding: 2px 9px; white-space: nowrap; align-self: center; }
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.galeria figure { margin: 0; text-align: center; }
.galeria .fone { max-width: 230px; }
.galeria figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--fg2); }
@media (max-width: 860px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .galeria { gap: 12px; } .galeria .fone { border-radius: 26px; padding: 5px; } .galeria figcaption { font-size: 13px; } }