/* ========================================================================== Páginas comerciais de SEO (/organizar-pelada · /lista-de-presenca-pelada · /sorteador-de-times-equilibrados · /precos) ESCOPO E HERANÇA. Estas páginas põem `fp-home` no e carregam o `static/css/home.css` ANTES desta folha: daí vêm o reset, a tipografia, a paleta (navy + laranja + dourado) e as classes que já existem e NÃO se duplicam aqui — `.wrap` `.eyebrow` `.btn` `.btn-primary` `.btn-lg` `.btn-ghost` `.nav` `.logo` `.crest` `.lang` `section.block` `.soft` `.head` `.steps` `.final` `.foot`. Tudo o que nasce aqui leva prefixo **`c-`**, para não colidir com aquele conjunto (que é genérico de propósito: `.head`, `.card`, `.links`). O TEXTO SOBRE FAIXA ESCURA usa os tokens `--on-dark*`; sobre faixa clara, `--ink`/`--muted`. É a mesma regra escrita no topo do home.css, e o motivo de o laranja de TEXTO ser `--orange-txt` em fundo claro: o laranja da marca não passa nos 4,5:1 do AA em texto pequeno. `[hidden]{display:none}` está aqui de propósito: o home.css NÃO o tem, e `display:` de qualquer regra VENCE o atributo `hidden` — armadilha que este projeto já pagou duas vezes no mesmo dia (o `.qnav` da Central de Ajuda e o badge do sino). `test_ajuda_integridade` varre a pasta INTEIRA de templates atrás disto. ========================================================================== */ .fp-home [hidden] { display: none !important } /* ------------------------------------------------------------------ hero */ .fp-home .c-hero { background: linear-gradient(160deg, var(--navy2), var(--navy3) 70%, var(--navy)); color: var(--on-dark); padding: 72px 0 78px; position: relative; overflow: hidden; } .fp-home .c-hero::after { content: ""; position: absolute; right: -140px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 180, 41, 0.16), transparent 68%); pointer-events: none; } .fp-home .c-hero .eyebrow { color: var(--gold) } .fp-home .c-hero h1 { font-family: var(--ff-display, inherit); font-size: clamp(32px, 6vw, 54px); line-height: 1.05; margin-top: 14px; max-width: 15ch; } .fp-home .c-hero .c-lede { color: var(--on-dark-mut); font-size: 18px; line-height: 1.55; margin-top: 18px; max-width: 58ch; } .fp-home .c-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px } .fp-home .c-acoes .c-alt { color: var(--on-dark-soft); font-size: 15px; text-decoration: underline } .fp-home .c-nota { color: var(--on-dark-dim); font-size: 13.5px; margin-top: 14px } .fp-home .c-crumb { color: var(--on-dark-dim); font-size: 13px; margin-bottom: 4px } .fp-home .c-crumb a { color: var(--on-dark-mut); text-decoration: underline } /* ------------------------------------------------------------------ dores */ .fp-home .c-grade { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .fp-home .c-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px; } .fp-home .c-card h3 { font-size: 18px; color: var(--ink); line-height: 1.25 } .fp-home .c-card p { color: var(--muted); font-size: 15px; margin-top: 8px; line-height: 1.55 } .fp-home .c-card .c-ico { font-size: 24px; display: block; margin-bottom: 10px } .fp-home .c-card .c-saiba { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--orange-txt); } .fp-home .c-card .c-saiba:hover { text-decoration: underline } .fp-home .c-dor .c-card { background: var(--soft2); border-color: transparent } /* ------------------------------- faixas alternadas de texto + screenshot */ .fp-home .c-faixa { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); padding: 46px 0; border-top: 1px solid var(--line); } .fp-home .c-faixa:first-of-type { border-top: 0; padding-top: 8px } .fp-home .c-faixa.c-inverte { grid-template-columns: minmax(0, 420px) minmax(0, 1fr) } .fp-home .c-faixa.c-inverte .c-txt { order: 2 } .fp-home .c-faixa.c-inverte .c-fig { order: 1 } .fp-home .c-faixa h3 { font-size: 26px; color: var(--ink); line-height: 1.2 } .fp-home .c-faixa p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 14px } .fp-home .c-fig { margin: 0 } .fp-home .c-fig img { width: 100%; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(13, 27, 50, 0.14); display: block; } .fp-home .c-fig figcaption { color: var(--dim); font-size: 13px; margin-top: 10px; text-align: center; } /* O screenshot é um celular em pé (440×960), então em coluna larga a faixa passava dos 900px de altura para três parágrafos de texto — o olho perde o par. No desktop a imagem é aparada pelo TOPO (`object-position: top`), que é onde mora o conteúdo que a legenda descreve; no celular ela vai inteira, porque ali a faixa empilha e não há par a equilibrar. */ @media (min-width: 861px) { .fp-home .c-fig img { max-height: 560px; object-fit: cover; object-position: top center; } } @media (max-width: 860px) { .fp-home .c-faixa, .fp-home .c-faixa.c-inverte { grid-template-columns: 1fr } .fp-home .c-faixa.c-inverte .c-txt, .fp-home .c-faixa.c-inverte .c-fig { order: 0 } } /* ------------------------------------------------- prova (faixa escura) */ .fp-home .c-prova { background: var(--navy); color: var(--on-dark); padding: 68px 0 } .fp-home .c-prova .head h2 { color: var(--on-dark) } .fp-home .c-prova .head p { color: var(--on-dark-mut) } .fp-home .c-prova .c-card { background: var(--dark-fill); border-color: var(--dark-line); } .fp-home .c-prova .c-card h3 { color: var(--on-dark) } .fp-home .c-prova .c-card p { color: var(--on-dark-mut) } /* ------------------------------------------------------------------ faq */ .fp-home .c-faq { max-width: 760px; margin: 0 auto } .fp-home .c-faq details { border-bottom: 1px solid var(--line) } .fp-home .c-faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 17px; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; } .fp-home .c-faq summary::-webkit-details-marker { display: none } .fp-home .c-faq summary::after { content: "+"; color: var(--orange-txt); font-weight: 900 } .fp-home .c-faq details[open] summary::after { content: "–" } .fp-home .c-faq details p { color: var(--muted); font-size: 15.5px; line-height: 1.6; padding-bottom: 20px } /* ------------------------------------------------------- planos (/precos) */ .fp-home .c-planos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 860px; margin: 0 auto } .fp-home .c-plano { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 26px } .fp-home .c-plano.c-destaque { border-color: var(--accent); box-shadow: 0 18px 40px rgba(13, 27, 50, 0.1) } .fp-home .c-plano .c-nome { font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; font-size: 12px; color: var(--dim) } .fp-home .c-plano .c-preco { font-size: 40px; font-weight: 900; color: var(--ink); margin-top: 8px; line-height: 1 } .fp-home .c-plano .c-por { font-size: 15px; font-weight: 600; color: var(--muted) } .fp-home .c-plano .c-ciclo { color: var(--muted); font-size: 14.5px; margin-top: 8px } .fp-home .c-plano ul { list-style: none; margin-top: 18px; display: grid; gap: 9px } .fp-home .c-plano li { font-size: 15px; color: var(--ink); padding-left: 24px; position: relative; line-height: 1.45 } .fp-home .c-plano li::before { content: "✓"; position: absolute; left: 0; color: #1a7f4b; font-weight: 800 } .fp-home .c-plano .c-nao li::before { content: "–"; color: var(--dim) } .fp-home .c-plano .c-nao li { color: var(--muted) } .fp-home .c-semp { color: var(--muted); font-size: 16px; line-height: 1.5 } .fp-home .c-avisos { max-width: 760px; margin: 34px auto 0; display: grid; gap: 12px } .fp-home .c-aviso { background: var(--soft); border-left: 4px solid var(--accent); border-radius: 12px; padding: 15px 18px; color: var(--muted); font-size: 15px; line-height: 1.55; } .fp-home .c-aviso b { color: var(--ink) } .fp-home .c-aviso a { color: var(--orange-txt); font-weight: 700; text-decoration: underline } /* --------------------------------------------------------- relacionadas */ .fp-home .c-rel { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) } .fp-home .c-rel a { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .fp-home .c-rel a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 27, 50, 0.1) } .fp-home .c-rel h3 { font-size: 17px; color: var(--ink) } .fp-home .c-rel p { color: var(--muted); font-size: 14.5px; margin-top: 6px; line-height: 1.5 } /* --------------------------------------------------------------- passos */ .fp-home .c-passo { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px } .fp-home .c-passo .c-n { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; margin-bottom: 12px; } .fp-home .c-passo h3 { font-size: 18px; color: var(--ink) } .fp-home .c-passo p { color: var(--muted); font-size: 15px; margin-top: 8px; line-height: 1.55 } @media (prefers-reduced-motion: reduce) { .fp-home .c-rel a { transition: none } }