/* ============================================================================
   LANDINGS — familia .seo-page  (extraido do CSS isolado em 08/08/2026)
   ============================================================================
   Mesmo motivo da familia .lp: 7 arquivos identicos viravam 7 copias no bundle
   publico. Aqui e um so, carregado SO nas rotas destas 7 paginas.

   ATENCAO — COLISAO: as paginas de SEO programatico (/q, /vestibular, /bncc)
   TAMBEM usam a raiz .seo-page, com o global wwwroot/css/seo-programatico.css,
   e varios seletores batem (.hero, .cta-btn...). Os dois arquivos NUNCA podem
   carregar na mesma pagina. Isso e garantido por construcao no App.razor: este
   entra por lista fechada de rotas (EhLandingSeo), e o seo-programatico.css
   entra pelo HeadContent das paginas /q,/v,/bncc. Rota nova de landing entra na
   lista; rota de SEO programatico, nunca.
   ============================================================================ */
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
   de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
   mexeu aqui, replicar nas outras 5.

   ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
   .seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
   própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
   texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
   declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
   .step-number) declara color:#fff em vez de contar com a herança. */
.seo-page{
    font-family: 'Figtree', sans-serif;
    background: var(--gp-papel);
    color: var(--gp-tinta);
    line-height: 1.6;
    display: block;
    overflow-x: hidden;
}


/* HERO — a capa do fichário */
.seo-page .hero{
    min-height: 82vh; position: relative; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
    color: var(--gp-creme);
    background: linear-gradient(115deg, var(--gp-hero-1) 0%, var(--gp-hero-2) 55%, var(--gp-hero-3) 100%);
    --gp-creme: var(--gp-azul-hero-texto);
    --gp-creme-suave: rgba(15, 53, 87, .82);
    --gp-creme-tenue: rgba(15, 53, 87, .10);
    --gp-creme-linha: rgba(15, 53, 87, .25);
}
.seo-page .hero-background{
    position: absolute; inset: 0;
    background: linear-gradient(115deg, var(--gp-hero-1) 0%, var(--gp-hero-2) 55%, var(--gp-hero-3) 100%);
}
.seo-page .particles-bg{
    position: absolute; inset: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
        radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
        radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
    background-size: 200px 100px;
    animation: particles 20s linear infinite;
}
@keyframes particles { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }

.seo-page .hero-content{
    position: relative; z-index: 2; text-align: center;
    max-width: 960px; padding: 80px 20px 40px;
}
.seo-page .hero-badge{
    display: inline-block; background: var(--gp-creme-tenue);
    backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
    border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
    color: var(--gp-creme);
    font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.seo-page .hero h1{
    font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
    line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
   -webkit-text-fill-color deixar a palavra transparente. */
.seo-page .hero h1 .highlight{ color: var(--gp-latao); }
.seo-page .hero .subtitle{
    font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
    margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.seo-page .hero-actions{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }

.seo-page .btn-primary-glow{
    background: var(--gp-marca-escura); color: #fff;
    border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
    border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(30, 60, 120, .3); letter-spacing: 0.3px; display: inline-block;
}
.seo-page .btn-primary-glow:hover{ color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(31, 111, 214, .58); }
.seo-page .btn-secondary-glass{
    background: #fff;
    border: 1px solid var(--gp-marca-escura); color: var(--gp-marca-escura);
    padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
    border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.seo-page .btn-secondary-glass:hover{ color: #fff; background: var(--gp-marca-escura); transform: translateY(-3px); }

.seo-page .social-proof{ display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.seo-page .proof-item{ text-align: center; }
.seo-page .proof-number{ font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.seo-page .proof-label{ font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* Daqui pra baixo a página é PAPEL: título em tinta, .seo-page apoio em tinta-media. */
.seo-page .section-title{ font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.seo-page .section-subtitle{ color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }

.seo-page .glass-section{
    background: var(--gp-papel-claro);
    border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.seo-page .feature-cards-container{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}
.seo-page .feature-card{
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha); border-radius: 20px;
    padding: 36px; transition: all 0.4s ease;
}
.seo-page .feature-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
   viraria tinta escura sobre o vermelho. */
.seo-page .feature-icon{
    width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(67, 73, 184, .3);
}
.seo-page .feature-card h3{ font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.seo-page .feature-card p{ color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }

.seo-page .how-section{ background: var(--gp-papel); padding: 90px 0; }
.seo-page .steps-container{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.seo-page .step-item{ flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, .seo-page não herdado */
.seo-page .step-number{
    width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
    font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(67, 73, 184, .35);
}
.seo-page .step-item h4{ font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.seo-page .step-item p{ font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.seo-page .step-arrow{ display: none; }
@media (min-width: 769px) {
    .seo-page .step-arrow{ display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}

.seo-page .faq-section{ background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.seo-page .faq-container{ max-width: 720px; margin: 0 auto; }
.seo-page .faq-item{
    background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
    border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.seo-page .faq-item:hover{ border-color: var(--gp-vermelho); }
.seo-page .faq-question{
    padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
    align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
    color: var(--gp-tinta);
}
.seo-page .faq-question::-webkit-details-marker{ display: none; }
.seo-page .faq-question i{ transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.seo-page .faq-item[open] .faq-question i{ transform: rotate(180deg); }
.seo-page .faq-answer{ padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }

.seo-page .seo-text{ max-width: 900px; }
.seo-page .seo-text p{ color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }

/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.seo-page .cta-section{ background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.seo-page .cta-section::before{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.seo-page .cta-content{ position: relative; z-index: 1; }
.seo-page .cta-title{ font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.seo-page .cta-subtitle{ font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }

.seo-page .seo-footer{ background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-page .seo-footer p{ color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }

/* Exclusivos desta landing. O badge de aviso era âmbar; no caderno o aviso é o
   latão — mesma família do dourado, .seo-page e sobre a capa ele lê. */
.seo-page .hero-badge-warn{ background: var(--gp-latao); border-color: var(--gp-latao); color: var(--gp-capa); }
.seo-page .subtitle-tight{ margin-bottom: 14px; }
.seo-page .subtitle-small{ font-size: .95em; opacity: .85; }