/* /sobre: página inicial. Reaproveita .fone, .tela, .pin e .marca do eyye.css. */
body.sobre { height: auto; }
html:has(body.sobre) { scroll-behavior: smooth; scroll-padding-top: var(--s-96); } /* "Como funciona" do rodapé não para embaixo do topo preso */
@media (prefers-reduced-motion: reduce) { html:has(body.sobre) { scroll-behavior: auto; } }
.sobre-pagina { max-width: var(--w-sobre); margin: 0 auto; padding: var(--s-48) var(--s-24) var(--s-96); display: flex; flex-direction: column; gap: var(--s-96); }
.sobre main { display: flex; flex-direction: column; gap: var(--s-96); }

/* topo preso: vidro de ponta a ponta, a página passa por baixo embaçada (como a barra do app) */
.sobre-topo { position: sticky; top: 0; z-index: 5; background: var(--chrome-vidro); -webkit-backdrop-filter: blur(var(--blur-vidro)); backdrop-filter: blur(var(--blur-vidro)); }
.sobre-faixa { max-width: var(--w-sobre); margin: 0 auto; padding: var(--s-16) var(--s-24); display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); }

/* rodapé: folha branca que sobe do pé, como a folha do celular no app (fundo + sombra, sem contorno) */
.sobre-pe { background: var(--chrome-surface); border-radius: var(--r-16) var(--r-16) 0 0; box-shadow: var(--shadow-sheet); padding: var(--s-64) 0 var(--s-32); }
.sobre-pe-dentro { max-width: var(--w-sobre); margin: 0 auto; padding: 0 var(--s-24); display: flex; flex-direction: column; gap: var(--s-64); }
.sobre-pe-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-48); }
.sobre-pe-sobre { flex: 1 1 var(--w-sobre-texto); max-width: var(--w-sobre-texto); display: flex; flex-direction: column; gap: var(--s-16); }
.sobre-pe-sobre .marca { font-size: var(--fs-24); line-height: var(--lh-24); }
.sobre-pe-sobre p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); color: var(--chrome-muted); }
.sobre-pe-sobre p a { color: var(--chrome-text); text-underline-offset: var(--s-4); }
.sobre-pe-links { display: flex; flex-wrap: wrap; gap: var(--s-64); }
.sobre-pe-col h2 { margin: 0 0 var(--s-16); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; color: var(--chrome-muted); }
.sobre-pe-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.sobre-pe-col a { color: var(--chrome-text); font-size: var(--fs-16); line-height: var(--lh-16); text-decoration: none; }
.sobre-pe a:hover { color: var(--chrome-accent); }
.sobre-pe-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8) var(--s-48); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chrome-muted); }
.sobre-link { color: var(--chrome-text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; text-decoration: none; }
.sobre-link:hover { color: var(--chrome-accent); }

.sobre-cta { align-self: flex-start; display: inline-flex; align-items: center; height: var(--h-pilula); padding: 0 var(--s-24); border-radius: var(--r-12); background: var(--chrome-accent); color: var(--chrome-on-accent); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 600; text-decoration: none; transition: box-shadow var(--dur-curta) var(--curva-move); }
.sobre-cta:hover { box-shadow: inset 0 0 0 999px var(--chrome-sobre); }
.sobre-cta:active { box-shadow: inset 0 0 0 999px var(--chrome-aperto); }

.sobre-btn { height: var(--s-48); padding: 0 var(--s-16); border: 0; border-radius: var(--r-12); background: var(--chrome-surface); color: var(--chrome-text); font: inherit; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; cursor: pointer; }
.sobre-btn:hover { box-shadow: inset 0 0 0 999px var(--chrome-sobre); }
.sobre-btn:active { box-shadow: inset 0 0 0 999px var(--chrome-aperto); }

/* ── topo: texto + celular (vira dois no Comparar) ── */
.heroi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-48); }
.heroi-texto { flex: 1 1 var(--w-sobre-texto); max-width: calc(var(--w-sobre-texto) * 1.5); display: flex; flex-direction: column; gap: var(--s-24); }
.heroi[data-comparando="sim"] .heroi-texto { max-width: var(--w-sobre-texto); }
.heroi h1 { margin: 0; font-size: var(--fs-48); line-height: var(--lh-48); font-weight: 600; letter-spacing: -0.02em; }
.heroi-texto p { margin: 0 0 var(--s-24); font-size: var(--fs-16); line-height: var(--lh-16); color: var(--chrome-muted); }

.heroi-fig { flex: 0 1 auto; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-24); min-width: 0; max-width: 100%; }
.fones { display: flex; gap: var(--s-16); max-width: 100%; } /* + o anel de 8 de cada celular = 32 entre os aparelhos */
.fone-slot { display: flex; flex-direction: column; gap: var(--s-16); min-width: 0; max-width: 100%; }
.fone-slot[hidden] { display: none; }
.fone-cab { margin: 0; display: flex; align-items: center; gap: var(--s-12); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; }
.fone-letra { width: var(--s-24); height: var(--s-24); border-radius: var(--r-4); background: var(--chrome-ink); color: var(--chrome-on-ink); font-size: var(--fs-12); line-height: var(--s-24); font-weight: 700; text-align: center; }
.fone-veredito[data-ok="sim"] { color: var(--pin-pass); }
.fone-veredito[data-ok="nao"] { color: var(--pin-fail); }
.sobre .fone { --fone-h: var(--h-fone-sobre); margin: var(--s-8); max-width: calc(100% - var(--s-16)); } /* o anel de 8 cabe na coluna */

.heroi-legenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-16); }
.paletas { display: flex; gap: var(--s-4); }
.heroi[data-comparando="sim"] .paletas { display: none; }
.paleta { display: flex; gap: var(--s-4); padding: var(--s-12); border: 0; border-radius: var(--r-12); background: transparent; cursor: pointer; }
.paleta:hover { box-shadow: inset 0 0 0 999px var(--chrome-sobre); }
.paleta[aria-pressed="true"] { background: var(--chrome-surface); }
.paleta i { width: var(--s-16); height: var(--s-16); border-radius: var(--r-8); }

/* ── como funciona ── */
.passos { display: flex; flex-direction: column; gap: var(--s-32); }
.passos h2 { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--chrome-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.passos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-24); }
.passos li { background: var(--chrome-surface); border-radius: var(--r-16); padding: var(--s-32); display: flex; flex-direction: column; gap: var(--s-8); }
.passo-num { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--chrome-accent); }
.passo-tit { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 600; }
.passo-txt { font-size: var(--fs-16); line-height: var(--lh-16); color: var(--chrome-muted); }

.fecho { display: flex; flex-direction: column; align-items: center; gap: var(--s-24); text-align: center; }
.fecho p { margin: 0; font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 600; }
.fecho .sobre-cta { align-self: center; }

@media (max-width: 600px) {
  .heroi h1 { font-size: var(--fs-40); line-height: var(--lh-40); }
  .fones { flex-direction: column; align-items: stretch; width: 100%; }
  .heroi-fig { width: 100%; }
}