/*
 * Ajustes da pgv de Agentes de IA que NAO passam pelo SASS.
 *
 * 🔴 Por que este arquivo existe. A fonte da pagina e
 * `sass/sass/pages/_pg-vendas-agentes-ia.scss` e o bundle servido e
 * `sass/css/pg-vendas-agentes-ia/style.css`. O `package.json` do SASS NAO tem um
 * `build:pg-vendas-agentes-ia`, 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-agentes-ia .footer,
body.pgv-agentes-ia .footer__container,
body.pgv-agentes-ia .footer * {
    text-align: left;
}

body.pgv-agentes-ia .header__botoes > .botao,
body.pgv-agentes-ia .header__botoes > .botao:link,
body.pgv-agentes-ia .header__botoes > .botao:visited,
body.pgv-agentes-ia .header__botoes > .botao:hover,
body.pgv-agentes-ia .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.
 *
 * 🔴 O VIDEO fica com a SOBRA da tela, sempre em 16:9. Ate 25/09/2026 ele
 * ganhava `max-height` (21vh ate 800px de altura, 17vh ate 660) e o `max-height`
 * vencia o `aspect-ratio`: a caixa virava uma faixa de 800x161px com a capa
 * cortada no meio. E acima de 800px nada encolhia, entao o CTA terminava abaixo
 * da dobra de 801 a 1050px de altura (250px fora em 801). Agora a altura dele e
 * `100vh - resto`: o resto e o hero sem o video (do topo da tela ao fim do CTA)
 * mais 24px de folga, medido em cada degrau a 1440px. O teto de cada degrau e o
 * que o degrau de cima dava na borda, para o video nunca crescer quando a janela
 * encolhe; o piso de 26vh so age onde sem ele o video sumiria. Mesmo desenho das
 * pgv do Excel e do Power BI.
 *
 * O corte segue a ordem de sempre: vaos e padding primeiro, depois logo,
 * tipografia e botao, e o video com o que sobra. Muda a ESCALA, nunca a ordem.
 *
 * Mudou o hero? O gate mede e imprime o resto de cada degrau, e com `--hero` reprova
 * o que cresce nele ao encolher a janela. As larguras cobrem cada faixa, porque a
 * varredura de altura so roda nelas, e o celular vai num segundo comando:
 *   node scripts/venda/valida-dobra-continua.mjs --caminho /curso-agentes-ia
 *     --video .hero__wrapper-video --cta ".hero .botao" --hero .hero --fora .botao
 *     --substituir pg-vendas-lp/pg-vendas-agentes-ia.css
 *     --larguras 1920,1718,1440,1366,1280,1024,992,991,960,900,800 --varrer-largura 769:1440:4
 *   (celular: --larguras 768,600,555,480,478,430,420,419,418,412,390,380,360 --de 560
 *     --ate 1000 --piso 620 --varrer-largura 361:767:4
 *     --alturas-largura 620,650,700,720,721,760,800,860,861,900,950,1000)
 * ========================================================================== */

@media (min-width: 769px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 625px;
        --pgvag-dobra-teto: 100vh;
        max-width: min(80rem, calc(max(26vh, min(var(--pgvag-dobra-teto), 100vh - var(--pgvag-dobra-resto))) * 16 / 9));
    }
}

/*
 * Em duas faixas de largura o texto do bundle ganha uma linha e o hero sem o video
 * passa dos 601px medidos a 1440: 617px de 769 a 851 e 635px de 992 a 1007 (em 992 o
 * bundle sobe o subtitulo para 2.3rem). Acima de 1075px de altura o video bate no teto
 * de 800px de largura e nao encolhia, e o CTA terminava 9px abaixo da dobra em 1007x1076.
 * Cada faixa leva o resto dela mais a folga, e vai 24px alem da quebra medida, que muda
 * de navegador para navegador (25/09/2026). Ficam antes do degrau de 1075px, que as
 * substitui embaixo; o teto dele nas duas faixas vem logo depois dele.
 */
@media (min-width: 769px) and (max-width: 875px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 641px;
    }
}

@media (min-width: 992px) and (max-width: 1031px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 659px;
    }
}

@media (min-width: 769px) and (max-height: 1075px) {
    body.pgv-agentes-ia .hero {
        padding-top: 3.2rem;
    }

    body.pgv-agentes-ia .hero > .container {
        gap: 2.4rem;
    }

    body.pgv-agentes-ia .hero .wrapper-textos {
        gap: 1.6rem;
    }

    /*
     * A letra do texto do hero acompanha a LARGURA nos degraus (`min(<rem>, <vw>)`):
     * com ela fixa, abaixo de ~1130px de largura o titulo e o subtitulo ganhavam uma
     * linha e o CTA saia ate 46px da dobra (884x800, medido em 25/09/2026). Assim o
     * resto de cada degrau medido a 1440 serve de 769 a 1920px: de 1 em 1px de largura,
     * na borda de baixo de cada degrau, o maior resto e o de 1440. A 1440 o `min`
     * escolhe sempre o rem: nada muda ali.
     */
    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(2.3rem, 2.1vw);
    }

    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 583px;
        --pgvag-dobra-teto: calc(1075px - 625px);
    }
}

@media (min-width: 769px) and (max-width: 875px) and (max-height: 1075px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-teto: calc(1075px - 641px);
    }
}

@media (min-width: 992px) and (max-width: 1031px) and (max-height: 1075px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-teto: calc(1075px - 659px);
    }
}

@media (min-width: 769px) and (max-height: 900px) {
    body.pgv-agentes-ia .hero {
        padding-top: 2.4rem;
    }

    body.pgv-agentes-ia .hero > .container {
        gap: 2rem;
    }

    body.pgv-agentes-ia .hero .wrapper-textos {
        gap: 1.2rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__img {
        max-width: 5rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__texto {
        font-size: 1.6rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__span--2 {
        font-size: 2rem;
    }

    /*
     * 🔴 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-agentes-ia .hero .hero__h1 {
        font-size: min(3.4rem, 2.8vw);
    }

    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(2rem, 2.1vw);
    }

    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 484px;
        --pgvag-dobra-teto: calc(900px - 583px);
    }
}

/*
 * Ate 991px de largura o bundle serve o subtitulo a 1.92rem (2.3rem acima), e o
 * `min(2.3rem, 2.1vw)` do degrau de 1075px e o `min(2rem, 2.1vw)` do de 900 passavam
 * dele: de 932 a 991px o subtitulo crescia de 19.2 para ate 20.8px ao entrar no degrau
 * (medido em 25/09/2026). Fica antes do degrau de 780px, que continua valendo embaixo.
 */
@media (min-width: 769px) and (max-width: 991px) and (max-height: 1075px) {
    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(1.92rem, 2.1vw);
    }
}

@media (min-width: 769px) and (max-height: 780px) {
    body.pgv-agentes-ia .hero {
        padding-top: 1.6rem;
    }

    body.pgv-agentes-ia .hero > .container {
        gap: 1.6rem;
    }

    body.pgv-agentes-ia .hero .wrapper-textos {
        gap: 1rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__img {
        max-width: 4.4rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__texto {
        font-size: 1.4rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__span--2 {
        font-size: 1.8rem;
    }

    body.pgv-agentes-ia .hero .hero__h1 {
        font-size: min(3rem, 2.8vw);
    }

    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(1.8rem, 2.1vw);
    }

    body.pgv-agentes-ia .hero .botao .botao__interno {
        padding: 2rem 5.2rem;
    }

    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 433px;
        --pgvag-dobra-teto: calc(780px - 484px);
    }
}

@media (min-width: 769px) and (max-height: 680px) {
    body.pgv-agentes-ia .hero {
        padding-top: 1.2rem;
    }

    body.pgv-agentes-ia .hero > .container {
        gap: 1.2rem;
    }

    body.pgv-agentes-ia .hero .wrapper-textos {
        gap: .8rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__img {
        max-width: 4rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__texto {
        font-size: 1.28rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__span--2 {
        font-size: 1.6rem;
    }

    body.pgv-agentes-ia .hero .hero__h1 {
        font-size: min(2.6rem, 2.8vw);
    }

    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(1.6rem, 2.1vw);
    }

    body.pgv-agentes-ia .hero .botao .botao__interno {
        padding: 1.6rem 4.4rem;
    }

    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 390px;
        --pgvag-dobra-teto: calc(680px - 433px);
    }
}

/*
 * No celular o video ja nasce menor (a largura da coluna), e o que nao cabia era
 * o hero MAIS o header nas telas curtas: em 390x664 o CTA terminava 45px abaixo
 * da dobra, e em 360x640, 89px, com o video espremido em faixa pelo mesmo
 * `max-height` do desktop. Mesma conta da sobra, com o video limitado a 100% da
 * coluna.
 *
 * Aqui o resto muda com a LARGURA tambem. O bundle muda o hero em 419px (titulo
 * de 27.6 para 31.2px, subtitulo de 16 para 19.2px) e em 479px (titulo, logo e
 * botao), e o texto quebra diferente de largura para largura: de 376 a 386px o
 * hero tem 26px a mais que em 375 e em 390. Por isso o resto e o teto vem por
 * faixa de largura, ate 419px aqui e as outras duas no fim, cada uma com o maior
 * resto medido nela de 2 em 2px (25/09/2026). Um resto so, o do pior caso,
 * encolhia o video de todas as faixas.
 *
 * O teto de um degrau e o que o de cima da na borda: o MENOR entre o teto de cima
 * e a borda menos o resto de cima. A subtracao sozinha so vale enquanto o degrau
 * de cima ainda cresce ali; parado no proprio teto, ele da menos que ela, e o
 * video ganhava 12px de largura ao descer de 721 para 720px (medido).
 *
 * A altura vem de `svh`, com `vh` na linha de cima para navegador antigo: no
 * celular `100vh` passa da tela visivel enquanto as barras do navegador estao
 * abertas ("100vh on mobile is too tall on load", web.dev/blog/viewport-units,
 * lido em 25/09/2026), e a conta com ele poria o CTA atras da barra de baixo;
 * `svh` e a tela com as barras. O gate roda em Chrome sem barra, onde os dois
 * dao o mesmo (664 e 664px em 390x664, medido): ele nao ve essa diferenca.
 *
 * O piso de 15svh so age abaixo dos 620px de altura, onde sem ele o video sumiria.
 * Com 18, de 480 a 768px de largura ele passava da sobra no pe de dois degraus
 * (721 a 739px e 861 a 876px de altura) e empurrava o CTA: a folga descia a 9px
 * em 555x721 (medido em 25/09/2026).
 */
@media (max-width: 768px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 654px;
        --pgvag-dobra-teto: 100vh;
        max-width: min(100%, calc(max(15vh, min(var(--pgvag-dobra-teto), 100vh - var(--pgvag-dobra-resto))) * 16 / 9));
        max-width: min(100%, calc(max(15svh, min(var(--pgvag-dobra-teto), 100svh - var(--pgvag-dobra-resto))) * 16 / 9));
    }
}

@media (max-width: 768px) and (max-height: 860px) {
    body.pgv-agentes-ia .hero {
        padding-top: 2rem;
    }

    body.pgv-agentes-ia .hero > .container {
        gap: 1.6rem;
    }

    body.pgv-agentes-ia .hero .wrapper-textos {
        gap: 1.2rem;
    }

    /*
     * A letra acompanha a largura aqui tambem: o bundle sobe o titulo de 2.76rem para
     * 3.12rem acima de 419px, e com a letra fixa o resto do hero ia de 522px (412 de
     * largura) a 586px (430) e 547px (375), medido em 25/09/2026.
     */
    body.pgv-agentes-ia .hero .hero__h1 {
        font-size: min(3.12rem, 6.6vw);
    }

    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(1.92rem, 3.9vw);
    }

    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 548px;
        --pgvag-dobra-teto: calc(860px - 654px);
    }
}

/*
 * Ate 419px o bundle serve o titulo a 2.76rem e o subtitulo a 1.6rem, e o `vw` de
 * cima passava deles na ponta da faixa: o subtitulo crescia de 16 para 16.3px ao
 * entrar no degrau, de 411 a 419px de largura (medido em 25/09/2026).
 */
@media (max-width: 419px) and (max-height: 860px) {
    body.pgv-agentes-ia .hero .hero__h1 {
        font-size: min(2.76rem, 6.6vw);
    }

    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(1.6rem, 3.9vw);
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    body.pgv-agentes-ia .hero {
        padding-top: 1.2rem;
    }

    body.pgv-agentes-ia .hero > .container {
        gap: 1.2rem;
    }

    body.pgv-agentes-ia .hero .wrapper-textos {
        gap: .8rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__img {
        max-width: 4.4rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__texto {
        font-size: 1.4rem;
    }

    body.pgv-agentes-ia .hero .logo-curso__span--2 {
        font-size: 1.6rem;
    }

    body.pgv-agentes-ia .hero .hero__h1 {
        font-size: min(2.4rem, 5.8vw);
    }

    body.pgv-agentes-ia .hero .hero__subtitulo {
        font-size: min(1.5rem, 3.6vw);
    }

    body.pgv-agentes-ia .hero .botao .botao__interno {
        padding: 1.6rem 3.2rem;
    }

    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 484px;
        --pgvag-dobra-teto: calc(720px - 548px);
    }
}

/* As outras duas faixas de largura: so o resto e o teto mudam. */
@media (min-width: 420px) and (max-width: 479px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 693px;
    }
}

@media (min-width: 420px) and (max-width: 479px) and (max-height: 860px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 576px;
        --pgvag-dobra-teto: calc(860px - 693px);
    }
}

@media (min-width: 420px) and (max-width: 479px) and (max-height: 720px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 456px;
        --pgvag-dobra-teto: calc(720px - 576px);
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 719px;
    }
}

@media (min-width: 480px) and (max-width: 768px) and (max-height: 860px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 606px;
        --pgvag-dobra-teto: calc(860px - 719px);
    }
}

@media (min-width: 480px) and (max-width: 768px) and (max-height: 720px) {
    body.pgv-agentes-ia .hero .hero__wrapper-video {
        --pgvag-dobra-resto: 460px;
        --pgvag-dobra-teto: calc(720px - 606px);
    }
}

/* ==========================================================================
 * 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-agentes-ia .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-agentes-ia .secao.faq .accordeon-item {
    background-color: rgba(255, 255, 255, 0.03);
}

body.pgv-agentes-ia .secao.faq .accordeon-title {
    color: inherit;
}

/* ==========================================================================
 * A seta do acordeao de agentes, no celular
 *
 * O titulo e um flex `space-between` e a seta e um `::after` estatico, sem
 * folga nenhuma entre os dois. Em 412px a linha mais longa chegava a 6px da
 * borda e o `▼` (~11px) entrava por cima da ultima palavra — "Agente de
 * Preenchimento de CRM▼". Medido em Chrome real nos oito titulos da lista: a
 * folga ia de 6px a 13px.
 *
 * `column-gap` e nao `padding-right`: o padding sobraria como buraco a direita
 * da seta, e o que falta e distancia ENTRE os dois itens do flex.
 * ========================================================================== */

body.pgv-agentes-ia .acordeao-html .accordeon-title {
    column-gap: 1.2rem;
}