/*
 * Página pública de download (/Download).
 * Depende dos tokens e da tipografia de institutional.css.
 *
 * Uma estrutura só serve os dois estados da página:
 *   - sem público informado: os dois cartões lado a lado;
 *   - com público informado (?Audience=...): o MESMO cartão, sozinho e
 *     centralizado, via .download-choice-grid--single.
 *
 * Regra de ouro: os dois cartões têm exatamente o mesmo peso visual. Nenhum
 * deles pode parecer "o certo" por acidente.
 *
 * Espaçamentos em passo de 4px.
 */

.download-page {
    /*
     * Altura dos selos oficiais. A razão 1,0588 (54/51) é medida, não chutada:
     * desenhando os dois SVG num canvas, a altura de caixa alta do wordmark dá
     * 0,3100 da caixa no arquivo da Apple e 0,3300 no do Google. Só a variável
     * da Apple muda por breakpoint; a do Google acompanha, para o casamento
     * óptico nunca depender do breakpoint.
     */
    --selo-apple: 54px;
    --selo-google: calc(var(--selo-apple) / 1.0588);
    padding: clamp(20px, 3.4vw, 48px) 0 clamp(32px, 5vw, 64px);
}

/*
 * Grade própria da página: o miolo respeita uma medida de leitura, ao contrário
 * do container compartilhado, que vai a 1520px e deixa o parágrafo largo demais.
 * Calhas: 40px no desktop, 32px no tablet, 20px no celular.
 */
.download-page .institutional-container {
    width: min(1120px, calc(100% - 80px));
}

/* ------------------------------------------------------------- cabeçalho */

.download-head {
    max-width: 48rem;
    margin: 0 auto clamp(16px, 2.2vw, 28px);
    text-align: center;
}

.download-head h1 {
    margin: 0 0 8px;
    font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.6rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.015em;
    /* Evita a última palavra sozinha na segunda linha. */
    text-wrap: balance;
}

.download-head h1 span {
    color: var(--treinify-lime);
    font-weight: 800;
    /* Respiro para o "?" branco não encostar na última letra verde. */
    margin-inline-end: 0.04em;
}

/* Medida larga o bastante para a linha caber inteira: a pilha centralizada
   afunila (manchete > linha de apoio > pílula) em vez de zigue-zaguear. */
.download-head .institutional-lead {
    margin: 0 auto;
    max-width: 62ch;
    text-wrap: balance;
}

.download-head .institutional-lead strong {
    color: var(--treinify-text);
    font-weight: 700;
}

/* ---------------------------------------------------------------- escolha */

.download-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 20px);
    align-items: stretch;
}

/*
 * Um cartão só (público já informado): mesma peça, mesma proporção interna,
 * numa medida que não deixa o cartão espichado nem o desktop com buraco ao lado.
 */
.download-choice-grid--single {
    /* Fecha na medida do conteúdo: a faixa pede 430 e o bullet mais largo
       ~448. A 560 sobravam 139px de vazio à direita contra 28 de padding. */
    grid-template-columns: minmax(0, 470px);
    justify-content: center;
}

.download-choice {
    --pad: clamp(16px, 2.2vw, 28px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--pad);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--treinify-border);
    border-radius: var(--treinify-radius-lg);
    box-shadow: var(--treinify-shadow);
    transition: border-color 0.2s ease;
}

/*
 * Fio de luz no topo. Os dois cartões usam o mesmo verde e a mesma opacidade;
 * só o sentido do degradê muda, para distinguir sem privilegiar nenhum lado.
 */
.download-choice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: var(--treinify-radius-lg) var(--treinify-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--treinify-lime), rgba(204, 252, 32, 0));
    opacity: 0.85;
}

.download-choice[data-audience="personal"]::before {
    background: linear-gradient(270deg, var(--treinify-lime), rgba(204, 252, 32, 0));
}

/* Sozinho não existe gêmeo para espelhar: o fio vira simétrico, senão parece
   que ele apaga sem motivo. */
.download-choice-grid--single .download-choice::before {
    background: linear-gradient(90deg,
        rgba(204, 252, 32, 0),
        var(--treinify-lime) 50%,
        rgba(204, 252, 32, 0));
}

/*
 * Só :focus-within. O corpo do cartão não leva a lugar nenhum, então hover nele
 * seria promessa falsa de clique — e ainda somava com o hover da cápsula.
 */
.download-choice:focus-within {
    border-color: rgba(204, 252, 32, 0.38);
}

/* Topo alinhado: com align-items:center, um título de duas linhas empurra o
   tile do ícone para baixo e os dois cartões desalinham. */
.download-choice-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.download-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    color: var(--treinify-lime);
    border-radius: 16px;
    background: var(--treinify-lime-soft);
    border: 1px solid rgba(204, 252, 32, 0.25);
}

.download-choice-icon svg {
    width: 28px;
    height: 28px;
}

.download-choice h2 {
    margin: 0;
    font-size: clamp(1.15rem, 0.92rem + 0.7vw, 1.45rem);
    font-weight: 800;
    line-height: 1.15;
}

/* Parágrafo curto e de medida controlada: o mesmo ritmo nos dois cartões. */
.download-choice-lede {
    margin: 0;
    max-width: 48ch;
    color: var(--treinify-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    /* Linhas equilibradas: evita "o match." sozinho na segunda linha. */
    text-wrap: balance;
}

/* Lista com passo fixo — não é ela que estica para igualar a altura do cartão. */
.download-page .download-choice .bullet-list {
    display: grid;
    gap: 8px;
    margin: 0;
    flex: 0 0 auto;
}

.download-page .download-choice .bullet-list li {
    padding-left: 28px;
    line-height: 1.4;
    font-size: 0.9rem;
    text-wrap: pretty;
}

/* Check desenhado, no lugar do glifo de texto. */
.download-page .download-choice .bullet-list li::before {
    content: "";
    top: 2px;
    width: 18px;
    height: 18px;
    background-color: rgba(204, 252, 32, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccfc20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

/* ------------------------------------------------------- bloco das lojas */

/*
 * A faixa de download é uma superfície própria, rente às bordas internas do
 * cartão: é ela que faz o alvo ser perceptível em repouso, sem acrescentar uma
 * segunda moldura em volta de cada selo (a arte oficial já tem a dela).
 * margin-top:auto ancora a faixa no rodapé dos dois cartões.
 */
.download-cta-deck {
    margin: auto calc(var(--pad) * -1) calc(var(--pad) * -1);
    padding: 16px var(--pad);
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 calc(var(--treinify-radius-lg) - 1px) calc(var(--treinify-radius-lg) - 1px);
}

/*
 * Mesmo eixo do texto do cartão. A margem negativa desconta o padding lateral
 * da cápsula (12) mais a borda (1): a ARTE do selo passa a começar na mesma
 * coluna do rótulo, sem tirar nada da área de toque.
 */
.download-cta-pair {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    justify-items: start;
    gap: 16px;
    margin-inline-start: -13px;
}

/*
 * Com a loja detectada a cápsula ganha borda e anel: aí quem alinha com o
 * rótulo é a caixa visível, não a arte. Só vale onde o anel existe — na média
 * de mouse ele é neutralizado, e o recuo sem motivo esfarrapava a aresta.
 */
@media (max-width: 1023px), (hover: none) {
    .download-cta-pair:has(.download-cta--primary) {
        margin-inline-start: 0;
    }
}

.download-cta-pair--single {
    grid-template-columns: max-content;
}

/*
 * Cápsula do selo: só área de toque em repouso, sem fundo nem borda, para não
 * existir moldura dentro de moldura. Quem dá contorno ao alvo é a faixa.
 * O verde só aparece na loja detectada e no foco.
 */
.download-cta {
    display: grid;
    place-items: center;
    width: fit-content;
    min-height: 48px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    /* Raio = raio da arte (~9px a 54px de altura) + o afastamento da cápsula. */
    border-radius: 18px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.download-cta img {
    display: block;
    width: auto;
}

.download-cta--apple img {
    height: var(--selo-apple);
}

.download-cta--google img {
    height: var(--selo-google);
}

.download-cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(204, 252, 32, 0.45);
    transform: translateY(-1px);
}

/*
 * Loja do sistema detectado. É o ÚNICO sinal de detecção: os dois selos
 * oficiais aparecem em todos os estados, com o mesmo tamanho e o mesmo alvo.
 */
/*
 * Loja do sistema detectado. É o ÚNICO sinal de detecção. O realce é um anel
 * colado na cápsula: o glow deslocado que existia aqui vazava para o cartão
 * vizinho e sujava a neutralidade entre as duas opções.
 */
.download-cta--primary {
    /* Folga igual nos quatro lados e raio concêntrico com o da arte (~6px a
       36px de altura); o preenchimento fica baixo para não virar oliva turva
       sobre o preto do selo. */
    padding: 9px 11px;
    background: rgba(204, 252, 32, 0.06);
    border-color: rgba(204, 252, 32, 0.6);
    border-radius: 16px;
    box-shadow: 0 0 0 3px rgba(204, 252, 32, 0.1);
}

.download-cta--primary:focus-visible {
    border-radius: 16px;
}

.download-cta--primary:hover {
    background: rgba(204, 252, 32, 0.16);
    border-color: var(--treinify-lime);
}

/*
 * QR: ponte para o celular. Fica escondido por padrão e só aparece na média
 * lá embaixo — tela grande COM mouse. Num iPad em paisagem (1024px, mas dedo)
 * ele não serviria para nada.
 *
 * Os arquivos já trazem zona de silêncio e fundo branco embutidos: nada de
 * fundo por baixo, nada de recorte, nada de cor ou raio por cima — qualquer
 * alteração invalida a verificação de leitura feita na geração.
 */
.download-qr {
    display: none;
}

/* ------------------------------------------------------------------ foco */

.download-notes a:focus-visible,
.download-status-cancel:focus-visible {
    outline: 2px solid var(--treinify-lime);
    outline-offset: 3px;
    border-radius: 12px;
}

.download-cta:focus-visible {
    outline: 2px solid var(--treinify-lime);
    outline-offset: 3px;
    border-radius: 18px;
}

/* ------------------------------------- aviso de abertura automática da loja */

/* O aviso e o botão vivem acima do cartão: em ação automática o aviso precisa
   ser a primeira coisa lida, e no celular ele ficava no fio da dobra. */
.download-autoopen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 16px;
}

.download-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    font-weight: 600;
}

.download-status[hidden] {
    display: none;
}

.download-status:focus-visible {
    outline: 2px solid var(--treinify-lime);
    outline-offset: 4px;
    border-radius: 12px;
}

/* Recado que só o leitor de tela recebe: no visual a duração está no contador
   e a saída está no rótulo do botão. */
.download-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.download-status.is-cancelado .download-status-dot {
    animation: none;
    background: rgba(255, 255, 255, 0.35);
}

.download-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--treinify-lime);
    animation: download-pulse 1.4s ease-in-out infinite;
}

/*
 * O escape do redirecionamento é um botão em forma de link: como botão de
 * contorno ele media 189x44 e ficava 45% mais largo que a cápsula do selo —
 * o desistir com mais peso que o baixar. Em texto sublinhado o critério de
 * contraste passa a ser o do texto (branco sobre preto), e a hierarquia volta.
 */
.download-status-cancel {
    min-height: 36px;
    padding: 0 4px;
    color: var(--treinify-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.download-status-cancel:hover {
    color: var(--treinify-lime);
    text-decoration-color: currentColor;
}

@keyframes download-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* Relógio parado (aba em segundo plano) ou encerrado: ponto fixo, sem pulso. */
.download-status.is-parado .download-status-dot,
.download-status.is-cancelado .download-status-dot {
    animation: none;
}

.download-status.is-parado .download-status-dot {
    opacity: 1;
}

/* Saída de emergência do estado com público informado. */
.download-escape {
    margin: 0 auto clamp(16px, 2.2vw, 24px);
    color: var(--treinify-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: center;
}

.download-escape a {
    color: var(--treinify-lime);
    font-weight: 700;
    white-space: nowrap;
    text-underline-offset: 3px;
}

.download-escape a:hover {
    text-decoration: underline;
}

.download-escape a:focus-visible {
    outline: 2px solid var(--treinify-lime);
    outline-offset: 3px;
    border-radius: 8px;
}

/* --------------------------------------------------------------- rodapé */

.download-notes {
    margin: clamp(16px, 2.2vw, 28px) auto 0;
    max-width: 62ch;
    text-align: center;
}

.download-notes p {
    margin: 0;
    color: var(--treinify-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    text-wrap: balance;
}

.download-notes p + p {
    margin-top: 14px;
}

.download-notes a {
    /* nowrap impede o link de quebrar no meio e deixar órfão na linha. */
    color: var(--treinify-lime);
    font-weight: 700;
    white-space: nowrap;
    text-underline-offset: 3px;
}

.download-notes a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ responsivo */

/*
 * Tela grande com mouse: entra o QR, à direita do par de selos, dentro da
 * própria faixa de download. O par passa a empilhar para os dois caberem lado a
 * lado sem alargar o cartão — é o mesmo empilhamento já usado entre 768 e
 * 1000px, então nenhuma geometria nova entra na página. A ordem de leitura
 * mantém a hierarquia: primeiro as lojas, depois a ponte para o celular.
 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    /* A faixa fica um pouco mais justa para o bloco inteiro continuar cabendo
       acima da dobra de 900px do desktop. */
    .download-cta-deck {
        padding-top: 12px;
        padding-bottom: 16px;
    }


    .download-cta-row {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: start;
        align-items: start;
        gap: 24px;
    }

    .download-cta-pair {
        grid-template-columns: max-content;
        justify-items: stretch;
        gap: 0;
    }

    .download-cta {
        width: auto;
        place-items: center start;
    }

    /*
     * Numa máquina de mesa nenhum dos dois selos instala coisa alguma: o
     * caminho que resolve ali é o QR. Então o realce de loja detectada é
     * neutralizado e a ênfase passa para a figura do QR.
     */
    .download-cta--primary {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .download-cta--primary:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(204, 252, 32, 0.45);
    }

    /*
     * Ponte discreta, não segundo CTA: a caixa fecha em volta do código (nada
     * de largura ditada por legenda de uma linha) e a moldura é neutra. Dois
     * campos brancos com moldura lima roubavam a primeira dobra dos selos.
     */
    .download-qr {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 152px;
        margin: 11px 0 0;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
    }

    .download-qr img {
        width: 126px;
        height: 126px;
    }

    .download-qr figcaption {
        color: var(--treinify-muted);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
    }
}

@media (max-width: 920px) {
    .download-page .institutional-container {
        width: calc(100% - 64px);
    }
}

/*
 * iPad retrato (781-920px): aqui sobra altura, não largura. O bloco cresce para
 * ocupar o primeiro quadro em vez de virar um desktop espremido no topo.
 */
@media (min-width: 781px) and (max-width: 920px) {
    .download-page {
        padding-top: 40px;
    }

    .download-head h1 {
        font-size: 2.35rem;
    }

    .download-head .institutional-lead {
        font-size: 1rem;
    }

    .download-choice {
        gap: 16px;
        padding: 24px;
    }

    .download-choice-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }

    .download-choice-icon svg {
        width: 30px;
        height: 30px;
    }

    /* 1,2rem para "Quero atender alunos" caber em uma linha e os dois cartões
       manterem a mesma altura de cabeçalho. */
    .download-choice h2 {
        font-size: 1.2rem;
    }

    .download-choice-lede {
        font-size: 1rem;
    }

    .download-page .download-choice .bullet-list {
        gap: 12px;
    }

    .download-page .download-choice .bullet-list li {
        font-size: 0.95rem;
    }
}

/*
 * Com dois cartões na linha e a página abaixo de ~1000px, a coluna não comporta
 * os dois selos em tamanho cheio lado a lado. Em vez de encolher a arte (e
 * quebrar o casamento óptico), o par empilha, com as caixas alinhadas à esquerda.
 */
@media (min-width: 768px) and (max-width: 1000px) {

    .download-cta-pair {
        grid-template-columns: max-content;
        justify-items: stretch;
        gap: 0;
    }

    /*
     * Empilhadas, as cápsulas casam a largura pela mais larga (a arte oficial
     * tem 172 contra 161). O conteúdo então alinha à esquerda: centralizado, a
     * arte mais estreita saía 5,5px do eixo da outra.
     */
    .download-cta {
        width: auto;
        place-items: center start;
    }

    /* O realce abraça a própria arte: casando a largura pela do Google, o anel
       ficava 13px à esquerda e 23px à direita da arte da Apple. */
    .download-cta--primary {
        width: fit-content;
        place-items: center;
    }
}

/*
 * Celular. O primeiro quadro real do iPhone é ~659px (não os 844 do aparelho),
 * e os DOIS blocos de loja precisam caber nele: sem isso só o primeiro cartão é
 * acionável sem rolagem e a tela volta a ter viés.
 *
 * O corte vem do topo — a sobrancelha repete o H1 e a linha de apoio não
 * acrescenta nada à pergunta — e dos selos, que caem para 36px.
 */
@media (max-width: 767px) {
    .download-page {
        --selo-apple: 36px;
        padding-top: 8px;
    }

    .download-head h1 {
        font-size: 1.6rem;
    }

    .download-page .institutional-container {
        width: calc(100% - 40px);
    }

    .download-head {
        margin-bottom: 8px;
        text-align: left;
    }

    /* A linha de apoio é quem faz a pergunta ("treinar ou atender alunos?") e
       quem nomeia o público no estado direcionado. No celular ela é ainda mais
       necessária do que no desktop, então não some. */
    .download-head .institutional-lead {
        margin: 0;
    }

    .download-choice-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .download-choice {
        --pad: 12px;
        gap: 8px;
    }

    .download-choice-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .download-choice-icon svg {
        width: 24px;
        height: 24px;
    }

    .download-cta-deck {
        padding: 12px var(--pad);
    }

    .download-cta-pair {
        gap: 12px;
        /* padding lateral da cápsula (10) + borda (1) */
        margin-inline-start: -11px;
    }

    .download-cta {
        min-height: 52px;
        padding: 7px 10px;
        /* raio da arte a 36px (~6px) + o afastamento da cápsula */
        border-radius: 14px;
    }

    .download-cta:focus-visible {
        border-radius: 14px;
    }

    /* Empilhados, os cartões não são espelho um do outro: o fio vira simétrico,
       como no estado de cartão único. */
    .download-choice::before,
    .download-choice[data-audience="personal"]::before {
        background: linear-gradient(90deg,
            rgba(204, 252, 32, 0),
            var(--treinify-lime) 50%,
            rgba(204, 252, 32, 0));
    }

    .download-notes,
    .download-escape {
        text-align: left;
        margin-inline: 0;
    }

    /* Mesmo eixo do H1 e do resto: centralizado, o aviso era o único bloco fora
       da margem, e o botão ficava num terceiro eixo. */
    .download-autoopen {
        justify-content: flex-start;
        margin-inline: 0;
    }

    /*
     * A lista sai de cena no celular, inclusive com um cartão só: ali ela custa
     * 125px e empurrava o único selo de download para baixo da dobra, justo no
     * estado em que a pessoa já decidiu e só precisa baixar.
     */
    .download-page .download-choice .bullet-list {
        display: none;
    }
}

/*
 * Com um cartão só e tela alta (tudo acima do iPhone SE) a lista cabe com
 * folga: escondê-la deixava 155px de preto vazio e trazia o rodapé para o
 * primeiro quadro.
 */
@media (max-width: 767px) and (min-height: 760px) {
    .download-page .download-choice-grid--single .bullet-list {
        display: grid;
    }
}

/*
 * Abaixo de 375 o par continua em duas colunas com folga menor: a 360px (a
 * largura mais comum do Android no Brasil) empilhar custava ~60px por cartão e
 * jogava o segundo bloco de loja para fora do primeiro quadro, devolvendo à
 * página o viés que ela existe para eliminar. Só empilha mesmo abaixo de 360.
 */
@media (max-width: 374px) {
    .download-cta-pair {
        gap: 8px;
    }
}

@media (max-width: 359px) {
    .download-cta-pair {
        grid-template-columns: max-content;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .download-choice,
    .download-cta {
        transition: none;
    }

    .download-cta:hover {
        transform: none;
    }

    .download-status-dot {
        animation: none;
        opacity: 1;
    }
}