/* ==========================================================================
   SOBRE: CSS PROPRIO DA ROTA
   Criado em 25/08/2026; reescrito na fatia SOBRE-1 (29-30/08/2026).

   PADRAO SEGUIDO (COLCHA, medido na rota irma): cada rota do site tem CSS
   PROPRIO e classes PREFIXADAS; so `shell.css` e `components.css` sao
   compartilhados. O `swinotas-page.css` faz exatamente isso, com 119 regras
   `.section-swinotas-*` / `.swinotas-*`. A 1a versao desta pagina reusou 13
   classes de `home.css`, que esta rota NAO carrega, e os blocos abriam sem
   estilo; ha o predicado C4 da regua cobrando isso agora.

   RITMO POR CONTRASTE DE DENSIDADE (emenda E5, direcao do operador em
   30/08/2026): a versao anterior era uma pilha de secoes com o MESMO desenho
   (badge, titulo, texto em coluna 9/12) e altura aparente parecida, o que faz
   a copy parecer repetida mesmo depois de cortada. Cada bloco daqui tem uma
   forma DIFERENTE de proposito:
     hero          aberto e raso, so posiciona
     origem        coluna estreita, longa, tipografia de LEITURA
     numeros       faixa escura e curta, dois volumes + legenda
     app           duas colunas (texto | fatos)
     diferenciais  quatro cards BAIXOS
     cta           bloco estreito, centrado, a unica secao que e' botao
   ========================================================================== */

/* `.section-page` (components.css:295) carrega `min-height: calc(100vh - 200px)`, correta
   para pagina de UM bloco (a rota 404) e buraco de altura de TELA numa pagina de varios.
   Esta rota nao a usa mais, mas o zerador fica: e' a rede que impede o problema de voltar
   se algum bloco novo herdar a classe. Vigiado pelo predicado C3, que mede a SOBRA
   vertical de cada bloco, nao esta propriedade. */
section.sobre-bloco {
    min-height: 0;
}

/* ========== 1. HERO ========== */
/* Aberto e raso: o H1 e' o unico peso da tela e precisa de silencio em volta. Nada de
   coluna estreita aqui, senao o hero se parece com o bloco de texto seguinte. */

.sobre-hero {
    padding: 48px 0 88px;
    background: var(--app-white);
}

.sobre-hero-titulo {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--app-text-primary);
    margin: 24px 0 28px;
    max-width: 16ch;
}

.sobre-hero-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--app-text-secondary);
    max-width: 62ch;
    margin: 0;
}

/* ========== 2. ORIGEM (tipografia de LEITURA) ========== */
/* O unico bloco longo da pagina. Contraste aqui e' TIPOGRAFICO, nao de cor: sem card, sem
   icone, sem grid. A faixa escura fica reservada aos numeros. */

.sobre-origem {
    background: var(--app-light);
    padding: 72px 0 80px;
}

/* Medida de linha: ~62 caracteres. Texto longo em coluna larga cansa e faz o leitor perder
   a linha ao quebrar; a coluna e' col-lg-8, e aqui o limite e' do PARAGRAFO. */
.origem-texto {
    max-width: 62ch;
}

.origem-texto p {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--app-text-secondary);
    margin-bottom: 18px;
}

/* As tres perguntas do dia a dia: o trecho mais concreto do texto (so quem viveu escreve
   nessa ordem). Saem do fluxo, uma por linha e com peso maior, para nao virarem um
   paragrafo cinza no meio da leitura. */
.origem-perguntas {
    border-left: 3px solid var(--app-blue);
    padding: 6px 0 6px 20px;
    margin: 26px 0 !important;
    color: var(--app-text-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 600;
    line-height: 1.75;
}

/* ========== 3. NUMEROS ========== */
/* Faixa curta e contrastante: e' a unica PROVA visivel da pagina. Dois VOLUMES em destaque
   e a data como LEGENDA: tres itens iguais com o mesmo check nivelavam marco e volume. */

.sobre-numeros-faixa {
    background: var(--app-dark);
    padding: 64px 0 56px;
}

.sobre-numeros-faixa .section-title {
    color: var(--app-white);
}

.sobre-numeros-faixa .section-badge {
    background: rgba(51, 219, 200, 0.1);
    color: var(--app-green);
    border: 1px solid rgba(51, 219, 200, 0.2);
}

.sobre-numeros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
}

.sobre-numero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    max-width: 340px;
    padding: 0 20px;
}

.sobre-numero-valor {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--app-white);
    letter-spacing: -1px;
}

.sobre-numero-rotulo {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* A data e' MARCO, nao metrica: legenda unica, discreta, fechando a faixa. */
.sobre-numeros-legenda {
    margin: 36px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ========== 4 e 5. SECOES COMUNS (app, diferenciais) ========== */

.sobre-secao {
    padding: 80px 0;
    background: var(--app-white);
}

.sobre-secao--claro {
    background: var(--app-light);
}

.sobre-lead {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--app-blue);
    margin: 18px 0 16px;
    line-height: 1.6;
}

.sobre-texto {
    font-size: 0.95rem;
    color: var(--app-text-secondary);
    line-height: 1.75;
    margin-bottom: 0;
}

/* ========== 4. APP: os tres fatos, ao lado do texto ========== */
/* Sem mockup de dispositivo no repo, a 2a coluna carrega FATOS curtos, nao mais paragrafo:
   e' o que impede o bloco de parecer "mais um texto institucional". */

.sobre-app-fatos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sobre-app-fato {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--app-light);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: 18px 20px;
}

.sobre-app-fato i {
    color: var(--app-blue);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.sobre-app-fato span {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--app-text-secondary);
}

/* ========== 5. DIFERENCIAIS: cards BAIXOS ========== */
/* Uma afirmacao e uma prova por card. Icone pequeno, sem quadro: com dois paragrafos e
   selo grande o conjunto vira mural de texto, que e' o layout mais generico de SaaS. */

.sobre-dif-card {
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl);
    padding: 26px 24px;
    height: 100%;
    transition: var(--app-transition);
}

.sobre-dif-card:hover {
    border-color: var(--app-blue);
    box-shadow: 0 8px 24px rgba(33, 115, 197, 0.08);
    transform: translateY(-3px);
}

.sobre-dif-icon {
    display: block;
    font-size: 20px;
    color: var(--app-blue);
    margin-bottom: 14px;
}

.sobre-dif-card h5 {
    font-weight: 700;
    color: var(--app-text-primary);
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.sobre-dif-card p {
    color: var(--app-text-secondary);
    font-size: 0.93rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* PROVA (regra 2 da skill: prova proxima da afirmacao). Rodape do card, em tipografia
   MENOR: prova nao pode competir com o corpo nem parecer disclaimer. */
.dif-prova {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
    font-size: 0.82rem !important;
    color: var(--app-text-muted) !important;
    line-height: 1.5 !important;
}

/* ========== 6. CTA FINAL ========== */
/* Bloco mais ESTREITO que os diferenciais, para o fechamento parecer ponto final e nao
   mais uma faixa de conteudo. */

.sobre-cta {
    padding: 88px 0;
    background: linear-gradient(160deg, #0f172a 0%, var(--app-dark) 40%,
                var(--app-dark-secondary) 100%);
}

.sobre-cta-bloco {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.sobre-cta-titulo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--app-white);
    margin-bottom: 14px;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.sobre-cta-sub {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin-bottom: 28px;
}

.sobre-cta-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ========== ACESSIBILIDADE: FOCO E MOVIMENTO (LAYOUT-1, 31/08/2026) ========== */

/* FOCO DO CTA. Medido em CDP nesta rota, com o foco chegando por TECLADO (`:focus-visible`
   depende da modalidade; medir por script daria um estado que o teclado nao recebe): a
   regra `.btn:focus-visible` do Bootstrap 5.3 (CDN) aplica `outline: 0` e troca o anel do
   navegador por `box-shadow: var(--bs-btn-focus-box-shadow)`, junto de
   `background-color: var(--bs-btn-hover-bg)` e `color: var(--bs-btn-hover-color)`. Este
   botao e' `.btn` SEM variante do Bootstrap, entao as tres variaveis nao existem: o anel
   sai, a sombra nunca aparece e o botao PERDE o fundo azul, ficando com texto escuro sobre
   o gradiente escuro. Contraste do rotulo, MEDIDO: 4,86:1 em repouso e 1,22:1 com foco.
   O unico CTA da pagina sumia justamente para quem navega por teclado.
   Aqui o estado visual volta e o anel passa a ser declarado pela casa. */
.sobre-cta .btn-hero-primary:focus-visible {
    background: var(--app-blue);
    color: var(--app-white);
    outline: 3px solid var(--app-white);
    outline-offset: 3px;
    box-shadow: none;
}

/* MOVIMENTO REDUZIDO: o bloco que a LAYOUT-1 escreveu AQUI saiu na LAYOUT-2 (01/09/2026),
   e nao por estar errado. Ele cobria os tres interativos desta rota; a medicao da fatia
   seguinte mostrou que, mesmo com ele, 22 elementos desta pagina seguiam animando sob
   `reduce` (navegacao, rodape e o que vem da biblioteca de terceiro), porque o motion
   nao mora so na folha da rota. A cobertura passou a ser CENTRAL, em components.css, que
   toda rota carrega. Deixar as duas seria a segunda copia que diverge. O predicado S5 da
   regua desta rota foi RE-BASELINADO no mesmo passo. */

/* ========== RESPONSIVO ========== */

@media (max-width: 991px) {
    .sobre-hero {
        padding: 36px 0 64px;
    }

    .sobre-hero-titulo {
        font-size: 2.1rem;
        max-width: none;
    }

    .sobre-secao,
    .sobre-cta {
        padding: 60px 0;
    }

    .sobre-origem {
        padding: 56px 0 60px;
    }
}

@media (max-width: 576px) {
    .sobre-hero-titulo {
        font-size: 1.8rem;
    }

    .sobre-numero-valor {
        font-size: 2.1rem;
    }

    .sobre-cta-titulo {
        font-size: 1.5rem;
    }

    .origem-perguntas {
        font-size: 1.02rem !important;
    }
}