/*
 * Ajustes da pgv de No Code que NAO passam pelo SASS.
 *
 * 🔴 Por que este arquivo existe. A fonte da pagina e
 * `sass/sass/pages/_pg-vendas-nocode.scss` e o bundle servido e
 * `sass/css/pg-vendas-nocode/style.css`. O `package.json` do SASS NAO tem um
 * `build:pg-vendas-nocode`, e reconstruir com o `sass` puro nao reproduz o commitado —
 * medido em 21/08/2026 na pgv do Claude, o rebuild sai menor e perde
 * `-moz-appearance`, `-webkit-text-decoration` e o `background-color:
 * transparent`. O CSS em producao passou por um autoprefixer que nao esta no
 * comando do repositorio, entao um rebuild tiraria prefixo de navegador do
 * arquivo inteiro para corrigir tres regras.
 *
 * Enquanto o pipeline nao for reproduzivel, correcao pontual entra por aqui — o
 * mesmo desenho que as pgv do Excel, do Python e do Claude ja usam.
 *
 * ⚠️ Ao mexer no SASS desta pagina, mexa aqui tambem, ou o efeito nao chega ao ar.
 */

/* ==========================================================================
 * O que o bundle desta pagina VAZA para componentes que nao sao dela
 *
 * A pagina nasceu como landing solta, e o bundle dela tem `body` e `.botao`
 * GLOBAIS. Quando ela ganhou o header e o rodape do site, os dois passaram a
 * atingir componentes compartilhados:
 *
 *   body{text-align:center}   centraliza o rodape do site inteiro
 *   .botao{font-size:1.92rem;padding:1.28rem 2.5rem}
 *                            deixa o "Matricule-se" do header 4px mais alto que
 *                            o do resto do site
 *
 * Os valores abaixo sao os da /comunidade-impressionadora, que e o gabarito que
 * o gate compara — MEDIDOS nela (18px de fonte, 11,5px/21px de padding, raio de
 * pilula), nao inventados.
 * ========================================================================== */

body.pgv-no-code .footer,
body.pgv-no-code .footer__container,
body.pgv-no-code .footer * {
    text-align: left;
}

body.pgv-no-code .header__botoes > .botao,
body.pgv-no-code .header__botoes > .botao:link,
body.pgv-no-code .header__botoes > .botao:visited,
body.pgv-no-code .header__botoes > .botao:hover,
body.pgv-no-code .header__botoes > .botao:active {
    border-radius: 100vw;
    line-height: 1;
    font-size: 1.8rem;
    padding: 1.15rem 2.1rem;
}

/* ==========================================================================
 * A primeira dobra
 *
 * O CTA do hero tem de caber na primeira tela: e o botao que a pagina existe
 * para oferecer, e quem nao o ve rola por milhares de pixels sem saber que ha um.
 *
 * Medido em 1440x765 antes de mexer: o CTA terminava 135px FORA. A conta,
 * de cima para baixo:
 *
 *   header ............ 106px
 *   padding do hero .... 24px
 *   logo do curso ...... 62px
 *   textos ............ 189px
 *   FOTO DOS PROFESSORES 291px  <-- o elastico
 *   CTA ................ 85px
 *   VAOS .............. 94px   (3 x 31,2px de `gap` do flex do container)
 *
 * 🔴 O maior item que nao e conteudo sao os VAOS, nao a midia — e por isso
 * o corte comeca por eles. Depois vem a altura da foto, que e o elastico:
 * ela e prova social, nao informacao: cortar altura nao tira nada que a pessoa precise LER antes de clicar, e ela volta inteira assim que a pagina rola. Texto e CTA nao encolhem.
 *
 * Acima de 800px de altura nada muda: a pagina segue como foi aprovada.
 * ========================================================================== */

@media (max-height: 800px) and (min-width: 769px) {
    body.pgv-no-code .hero > .container {
        gap: 1.4rem;
        padding-top: 1.2rem;
    }

    body.pgv-no-code .hero .hero__professores {
        max-height: 21vh;
        width: auto;
        object-fit: contain;
    }
}

@media (max-height: 660px) and (min-width: 769px) {
    body.pgv-no-code .hero > .container {
        gap: 1rem;
        padding-top: 0.8rem;
    }

    body.pgv-no-code .hero .hero__professores {
        max-height: 17vh;
    }

    /*
     * `clamp` em vez de valor fixo: a faixa de altura e continua, e um degrau
     * seco aparece como salto de tipografia ao redimensionar.
     *
     * 🔴 O seletor mira a CLASSE do titulo do hero, e nunca `h1` por elemento.
     * Escrito como `.hero h1`, ele casava "o que por acaso for h1 aqui dentro" —
     * e no dia em que o `<h1>` passou a ser o NOME DO CURSO (para a pagina se
     * anunciar pelo produto, e nao pela headline), a regra sumiu do titulo e foi
     * encolher o nome do curso. O CTA saiu 73px para fora da primeira dobra em
     * 1366x768, e nada no HTML mudou de tamanho: o `curl` nao ve, o `php -l`
     * passa, e so o gate que mede geometria acusa.
     */
    body.pgv-no-code .hero .hero__h1 {
        font-size: clamp(2.8rem, 5.2vh, 3.98rem);
    }
}

/* No mobile o vao pesa igual, e a midia ja e menor. */
@media (max-width: 768px) and (max-height: 860px) {
    body.pgv-no-code .hero > .container {
        gap: 1.4rem;
        padding-top: 1rem;
    }

    body.pgv-no-code .hero .hero__professores {
        max-height: 22vh;
        width: auto;
        object-fit: contain;
    }
}

/* ==========================================================================
 * O CTA do fim do FAQ
 *
 * O partial do FAQ e do TRONCO e serve nove pgv, entao ele carimba
 * `font-weight:700` no `.botao` — numero que veio das paginas de referencia.
 * Aqui todo CTA e 600, e o de baixo saia mais gordo que os outros seis da
 * mesma pagina. O peso desce no FILHO, que e quem escreve o texto: mexer no
 * `.botao` competiria com o fallback do partial em vez de so vencer nele.
 * ========================================================================== */

body.pgv-no-code .secao.faq .botao .botao__interno {
    font-weight: 600;
}

/* ==========================================================================
 * O cartao do FAQ
 *
 * O FAQ saia como um bloco CLARO no meio de uma pagina preta: o bundle desta
 * pagina ainda carrega `.accordeon-item{background:#e1e7f4}` e
 * `.accordeon-title{color:#000}` do acordeao antigo, que tinha cartao claro.
 * Duas provas de que o claro e sobra, e nao escolha: o partial do FAQ desenha a
 * borda do item em `rgba(255,255,255,.12)` — branco translucido so faz sentido
 * sobre fundo escuro, e sobre o #e1e7f4 ela e invisivel —, e o acordeao da
 * PROPRIA pagina (a lista de agentes, e a ementa) e transparente com texto
 * branco.
 *
 * O tom vem do gabarito do tronco (`.vc-bloco--superficie`), que e a superficie
 * escura padrao das pgv; nao e numero novo. O `color` volta a `inherit` porque
 * quem manda cor no partial vem em `:where()` e perde de qualquer
 * `.accordeon-title`.
 * ========================================================================== */

body.pgv-no-code .secao.faq .accordeon-item {
    background-color: rgba(255, 255, 255, 0.03);
}

body.pgv-no-code .secao.faq .accordeon-title {
    color: inherit;
}

/* ==========================================================================
 * O link para a pgv da ferramenta, nos cards de tecnologia
 *
 * Duas das ferramentas desta secao tem pagina propria (`/curso-n8n` e
 * `/curso-lovable`) e nao recebiam link interno nenhum. O card ja existia; o
 * link e novo, e por isso o estilo mora aqui: o bundle desta pagina sai de um
 * SASS que nao reproduz no rebuild (ver o topo deste arquivo).
 *
 * O `margin-top: auto` empurra o link para o rodape do card, para que cards de
 * altura diferente alinhem os links entre si; o `#14d0fe` e o mesmo ciano que a
 * pagina ja usa em link de cartao (`.blog-ia__card-link`), nao uma cor nova.
 * ========================================================================== */

body.pgv-no-code .tecnologias__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1.2rem;
    color: #14d0fe;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}

body.pgv-no-code .tecnologias__link::after {
    content: "\2192";
    transition: transform 0.2s ease;
}

body.pgv-no-code .tecnologias__link:hover::after,
body.pgv-no-code .tecnologias__link:focus-visible::after {
    transform: translateX(0.3rem);
}

/* O card precisa ser coluna para o `margin-top: auto` ter o que empurrar. */
body.pgv-no-code .tecnologias__card {
    display: flex;
    flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
    body.pgv-no-code .tecnologias__link::after {
        transition: none;
    }
}