/* =====================================================================
   home.css — a home do Gobarito: telas que passam com a roda do mouse.
   ---------------------------------------------------------------------
   Sem barra de rolagem: cada tela cabe na janela. Com JavaScript
   (js/paginas-publicas.js) o <body> ganha .home-deslize: a roda do mouse
   (para baixo avança, para cima volta), as setas do teclado e o toque
   passam de uma tela para a outra, deslizando para a esquerda ou para a
   direita. Sem JavaScript, as telas seguem uma embaixo da outra.
   Os componentes de base (botões, selos, painel de contato, rodapé) estão
   em landing.css, que também atende os artigos do blog.
   ===================================================================== */

/* Âncoras antigas: levam à tela certa, sem ocupar espaço. */
#conteudo .ancora-secao {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* ── Conteúdo das telas ─────────────────────────────────────────────── */
#conteudo > .slide {
    position: relative;
    padding: clamp(48px, 8vh, 88px) clamp(20px, 4vw, 56px);
    background: var(--papel);
}

#conteudo > .slide + .slide {
    border-top: 1px solid var(--line);
}

#conteudo .slide h1 {
    margin: 0;
    font-size: clamp(2.2rem, min(4.4vw, 7.4vh), 3.7rem);
    line-height: 1.04;
    text-wrap: balance;
}

#conteudo .slide h2 {
    margin: 0;
    font-size: clamp(1.75rem, min(3.2vw, 5.6vh), 2.9rem);
    line-height: 1.08;
    text-wrap: balance;
}

#conteudo .slide h3 {
    margin: 0;
    font-size: clamp(1.05rem, min(1.6vw, 2.8vh), 1.3rem);
}

#conteudo .slide-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(22px, 3.4vw, 60px);
    align-items: center;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

#conteudo .slide-grade--uma {
    grid-template-columns: minmax(0, 1fr);
}

#conteudo .slide-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 2.2vh, 18px);
    min-width: 0;
}

#conteudo .slide-texto > p {
    max-width: 46ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.96rem, min(1.3vw, 2.2vh), 1.12rem);
    line-height: 1.6;
}

#conteudo .slide-texto > .slide-nota {
    font-size: clamp(0.84rem, 1.5vh, 0.94rem);
    max-width: 52ch;
}

#conteudo .slide-cabeca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 1.8vh, 14px);
    max-width: 820px;
}

#conteudo .slide-cabeca > p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.96rem, min(1.3vw, 2.2vh), 1.12rem);
    line-height: 1.6;
}

#conteudo .slide-centro,
#conteudo .slide-centro .slide-cabeca {
    align-items: center;
    text-align: center;
}

#conteudo .slide-centro .slide-cabeca {
    max-width: none;
}

#conteudo .slide-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#conteudo .check-list {
    display: grid;
    gap: clamp(6px, 1.2vh, 9px);
    margin: 0;
    padding: 0;
    list-style: none;
}

#conteudo .check-list li {
    position: relative;
    padding-left: 26px;
    color: var(--ink);
    font-size: clamp(0.96rem, min(1.3vw, 2.2vh), 1.08rem);
    line-height: 1.5;
}

#conteudo .check-list li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 3px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--azul-gobarito);
    border-bottom: 2px solid var(--azul-gobarito);
    transform: rotate(-45deg);
}

#conteudo .feature-note {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--azul-gobarito);
    border-radius: 0 10px 10px 0;
    background: var(--papel-alt);
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ── Imagens: cada uma ocupa o espaço que a tela deixa ───────────────── */
#conteudo .slide-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
    min-height: 0;
}

#conteudo .slide-visual .foto-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

#conteudo .slide-visual img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 26px 48px -30px rgba(15, 23, 42, 0.42);
}

#conteudo .slide-visual figcaption {
    max-width: 62ch;
    color: var(--muted);
    font-size: clamp(0.78rem, 1.5vh, 0.9rem);
    line-height: 1.45;
    text-align: center;
}

#conteudo .slide-visual figcaption strong {
    color: var(--ink);
}

/* ── Início ──────────────────────────────────────────────────────────── */
#conteudo .slide-inicio .slide-texto {
    gap: clamp(12px, 2.4vh, 20px);
}

#conteudo .slide-inicio .slide-lead {
    max-width: 50ch;
}

/* ── Criar: três caminhos ────────────────────────────────────────────── */
#conteudo .caminhos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#conteudo .caminhos li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 10px);
    padding: clamp(16px, 2.6vh, 26px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

#conteudo .caminhos i {
    color: var(--azul-gobarito);
    font-size: clamp(1.4rem, 3.2vh, 2rem);
}

#conteudo .caminhos strong {
    font-size: clamp(1.02rem, 2.2vh, 1.25rem);
}

#conteudo .caminhos p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.92rem, 1.8vh, 1rem);
    line-height: 1.5;
}

#conteudo .caminho-tag {
    margin-top: auto;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--papel-alt);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 700;
}

/* ── Tipos de questão: uma ficha por tipo, com a foto na largura da coluna ── */
#conteudo .tipos-cartoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 2.2vh, 20px) clamp(14px, 2vw, 24px);
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

#conteudo .tipos-cartoes.tipos-duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

/* A associação é larga: ocupa a tela sozinha, com a foto na largura quase toda. */
#conteudo .tipos-cartoes.tipos-uma .tipo-cartao {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

#conteudo .tipo-cartao {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.6vh, 12px);
    min-width: 0;
    margin: 0;
    padding: clamp(12px, 2vh, 18px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--papel-alt);
}

#conteudo .tipo-cartao-nome {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.05rem, 2.3vh, 1.3rem);
    font-weight: 700;
    line-height: 1.2;
}

#conteudo .tipo-cartao-nome i {
    color: var(--azul-gobarito);
    font-size: 1.3em;
}

#conteudo .tipo-cartao .slide-visual {
    align-items: stretch;
    width: 100%;
}

#conteudo .tipo-cartao .foto-link {
    flex: 0 0 auto;
    width: 100%;
}

#conteudo .tipo-cartao .slide-visual img {
    width: 100%;
    height: auto;
    max-height: none;
}

/* As configurações que o app oferece para este tipo, em pílulas. */
#conteudo .tipo-config {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#conteudo .tipo-config li {
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: clamp(0.8rem, 1.6vh, 0.9rem);
    line-height: 1.35;
}

/* ── IA: três passos curtos ─────────────────────────────────────────── */
#conteudo .ia-passos {
    display: grid;
    gap: clamp(8px, 1.6vh, 12px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#conteudo .ia-passos li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: clamp(10px, 1.8vh, 14px) 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    font-size: clamp(0.92rem, 1.7vh, 1rem);
    line-height: 1.5;
}

#conteudo .ia-passo-etapa {
    color: var(--azul-gobarito);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Escolas: três cartões ──────────────────────────────────────────── */
#conteudo .cartoes-escola {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

#conteudo .cartoes-escola li {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 9px);
    padding: clamp(16px, 2.6vh, 24px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

#conteudo .cartoes-escola i {
    color: var(--azul-gobarito);
    font-size: clamp(1.4rem, 3.2vh, 1.9rem);
}

#conteudo .cartoes-escola strong {
    font-size: clamp(1.02rem, 2.2vh, 1.2rem);
}

#conteudo .cartoes-escola p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.92rem, 1.8vh, 1rem);
    line-height: 1.5;
}

/* ── Dúvidas: uma lista que se abre ─────────────────────────────────── */
#conteudo .faq-list {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 900px;
    margin: 0;
}

#conteudo .faq-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

#conteudo .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(9px, 1.6vh, 14px) 18px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

#conteudo .faq-item summary::-webkit-details-marker {
    display: none;
}

#conteudo .faq-item summary::after {
    content: "+";
    color: var(--azul-gobarito);
    font-size: 1.25rem;
    line-height: 1;
}

#conteudo .faq-item[open] summary::after {
    content: "−";
}

#conteudo .faq-item summary:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

#conteudo .faq-item p {
    margin: 0;
    padding: 0 18px 14px;
    color: var(--muted);
    line-height: 1.6;
}

/* ── Contato: o painel, a confiança e o rodapé ──────────────────────── */
#conteudo .slide-compacto {
    gap: clamp(10px, 2vh, 16px);
}

#conteudo .slide-compacto > * {
    margin: 0;
}

/* ── Com JavaScript: telas que cabem na janela, sem barra de rolagem ─ */
html.home-deslize-root,
body.home-deslize {
    height: 100%;
    overflow: hidden;
}

body.home-deslize {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

body.home-deslize #nav-publica {
    flex: 0 0 auto;
}

body.home-deslize #conteudo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Só o zoom por pinça: a página nunca rola; o toque troca de tela. */
    touch-action: pinch-zoom;
}

body.home-deslize #conteudo > .slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: clamp(16px, 3.4vh, 44px) clamp(18px, 4vw, 64px) clamp(80px, 11.5vh, 100px);
    overflow: hidden;
    border-top: 0;
    scrollbar-width: none;
}

body.home-deslize #conteudo > .slide::-webkit-scrollbar {
    display: none;
}

body.home-deslize #conteudo > .slide[hidden] {
    display: none;
}

body.home-deslize #conteudo > .slide > .slide-grade {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

body.home-deslize #conteudo > .slide > .slide-grade.slide-grade--uma {
    grid-template-rows: auto;
    align-content: center;
    align-items: center;
}

body.home-deslize #conteudo .slide-texto {
    justify-content: center;
}

body.home-deslize .secoes-barra {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(14px, 3vw, 28px) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--papel) 94%, transparent);
    backdrop-filter: blur(8px);
}

body.home-deslize .secoes-seta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: 600 0.9rem var(--font-principal);
    cursor: pointer;
    box-shadow: none;
}

body.home-deslize .secoes-seta:hover:not(:disabled) {
    border-color: var(--azul-gobarito);
    color: var(--azul-gobarito);
    transform: none;
}

body.home-deslize .secoes-seta:disabled {
    opacity: 0.4;
    cursor: default;
}

body.home-deslize .secoes-seta:focus-visible,
body.home-deslize .secoes-ponto:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

body.home-deslize .secoes-seta[data-direcao="1"] {
    justify-self: end;
}

body.home-deslize .secoes-meio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

body.home-deslize .secoes-nome {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
}

body.home-deslize .secoes-nome-texto {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.home-deslize .secoes-contador {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

body.home-deslize .secoes-pontos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

body.home-deslize .secoes-ponto {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

body.home-deslize .secoes-ponto:hover {
    border-color: var(--azul-gobarito);
}

body.home-deslize .secoes-ponto[aria-current="true"] {
    border-color: var(--azul-gobarito);
    background: var(--azul-gobarito);
}

body.home-deslize .secoes-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Telas baixas: o que é secundário sai, e a imagem fica maior. */
@media (max-height: 720px) {
    body.home-deslize .slide-secundario {
        display: none;
    }
}

/* ── Celular: uma coluna; o texto em cima e a imagem ocupa o resto ──── */
@media (max-width: 820px) {
    #conteudo .caminhos,
    #conteudo .cartoes-escola {
        grid-template-columns: minmax(0, 1fr);
    }

    #conteudo .tipos-cartoes.tipos-duas {
        grid-template-columns: minmax(0, 1fr);
    }

    body.home-deslize #conteudo > .slide > .slide-grade:not(.slide-grade--uma) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    body.home-deslize #conteudo .slide-texto {
        justify-content: flex-start;
    }

    body.home-deslize .slide-secundario {
        display: none;
    }

}

@media (max-width: 600px) {
    body.home-deslize .secoes-seta {
        width: 44px;
        min-width: 44px;
        justify-content: center;
        padding: 0;
    }

    body.home-deslize .secoes-seta span {
        display: none;
    }

    body.home-deslize .secoes-nome-texto {
        max-width: 46vw;
    }
}

/* ── Impressão: todas as telas, uma depois da outra ─────────────────── */
/* Dúvidas: a resposta aberta rola dentro da tela, com a barra escondida. */
body.home-deslize #conteudo > .slide.slide-faq > .slide-grade.slide-grade--uma {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
}

body.home-deslize #conteudo .faq-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
    padding: 2px 4px 14px 0;
}

/* Cada dúvida mantém a própria altura: a lista rola, em vez de espremer as respostas. */
body.home-deslize #conteudo .faq-item {
    flex: none;
}

body.home-deslize #conteudo .faq-list::-webkit-scrollbar {
    display: none;
}

@media print {
    #conteudo .faq-list {
        height: auto;
        overflow: visible;
    }
}

/* Celulares estreitos: cartões mais compactos para a tela inteira caber. */
@media (max-width: 400px) {
    body.home-deslize #conteudo .caminhos li,
    body.home-deslize #conteudo .cartoes-escola li {
        padding: 12px 14px;
        gap: 4px;
    }

    body.home-deslize #conteudo .caminhos p,
    body.home-deslize #conteudo .cartoes-escola p {
        font-size: 0.88rem;
    }
}

@media print {
    html.home-deslize-root,
    body.home-deslize {
        height: auto;
        overflow: visible;
        display: block;
    }

    body.home-deslize #conteudo {
        height: auto;
        overflow: visible;
    }

    body.home-deslize #conteudo > .slide,
    body.home-deslize #conteudo > .slide[hidden] {
        position: relative;
        inset: auto;
        display: block;
        overflow: visible;
        padding: 24px 0;
        transform: none !important;
        break-after: page;
    }

    body.home-deslize .secoes-barra,
    body.home-deslize #nav-publica {
        display: none !important;
    }
}