/* mobile.css - 2026-10-20 - camada de celular (ver MOBILE-CONTRATO_20261020.md)
   Vale so ate 767px. style.css e v2-glass.css ficam intocados: o desktop nao muda.
   Escala de titulo medida na Porto (2026-10-20): titulo grande -17% a -35%,
   corpo inalterado. Familia, peso e cor seguem a trava (regra 65). */

@media (max-width: 767px) {

  /* M1 - largura: dois elementos empurravam a pagina para 1120px (medido).
     a) a abertura deriva a LARGURA da altura minima (aspect-ratio 3,148 x 330px = 1039px);
     b) a faixa de logos tem 1100px de largura natural. */
  .v2 .secao.abertura-foto { aspect-ratio: auto; min-height: 0; }
  .v2 .secao.paper-esc.pequena img { width: 100%; height: auto; }

  /* M2 - HERO DA HOME (decisao 1, caminho A): um cartao por vez, sem vizinhos.
     Foto no alto, texto embaixo. Os tres cartoes ocupam a MESMA celula da grade,
     entao o palco toma a altura do mais alto e a pagina nao pula na troca.
     Navegacao: arrastar (ja existe no v2-carrossel.js) + pontos; setas saem,
     como na Porto. Quando vier a arte 9:16, entra por <picture> sem mexer aqui. */
  .v2 .hero:has(.v2-carrossel) { padding: 16px 0 8px; }
  .v2 .v2-palco { height: auto; display: grid; }
  .v2 .v2-slide,
  .v2 .v2-slide.esta-ativo,
  .v2 .v2-slide.esta-antes,
  .v2 .v2-slide.esta-depois,
  .v2 .v2-slide.esta-fora {
    position: relative; left: auto; top: auto; grid-area: 1 / 1;
    width: 100%; height: auto; transform: none; filter: none;
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  }
  /* escopo no palco: o hero em card das paginas internas tambem e' .v2-slide, mas
     nao tem .esta-ativo - sem o escopo ele sumiria (achado 2026-10-20, Consultoria) */
  .v2 .v2-palco .v2-slide:not(.esta-ativo) { opacity: 0; visibility: hidden; pointer-events: none; }
  .v2 .v2-slide { transition: opacity .4s ease, visibility .4s; }
  /* FOTO DO CARTAO - teste 2 (2026-10-20, apontamentos de Renato no celular).
     m9 usava caixa de 260px + `contain`: no celular dele a foto saiu ~13% menor que
     a caixa e centralizada ("flutua", "nao encosta no canto direito").
     Agora: altura NATURAL, largura em % do cartao, ancorada embaixo e a direita -
     a tecnica da doutrina em que o corte e' impossivel. Medido nos arquivos (alfa>200):
     - Consultoria: a cena vai ate x=1599 de 1600 -> 100% da largura, encosta na borda;
     - Academia: a cena termina em x=1050 de 1100 -> 74% ancorado a direita deixa
       ~11px ate a borda ("bem proxima", como no desktop), ~262px de altura;
     - Sistemas: o DEC comeca em y=3 (encostava no topo) -> desce 18px, centrado.
     Esfumado na base (decisao de Renato, receita "cartao imerso" do Sobre Nos):
     num cartao de vidro transparente a tinta do Sobre Nos viraria faixa de cor;
     aqui a propria foto se dissolve no vidro por mascara. Sistemas: sutil. */
  .v2 .v2-slide-foto {
    order: -1; height: auto; display: flex; justify-content: flex-end; align-items: flex-end;
  }
  .v2 .v2-slide-foto img {
    width: 100%; height: auto; max-width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }
  /* ACADEMIA - teste 3. Renato: "da forma centralizada ficou melhor... precisa ficar
     maior... preenchendo toda a tag. Pode ser cortada na parte de baixo mas nao pode
     apagar o simbolo atras; o corte no simbolo atual ja esta de bom tamanho."
     Excecao a "foto nunca e' cortada", autorizada por ele, so' na BASE desta foto.
     - foto na largura toda (335px -> 354px de altura, 1,35x o teste 2), centrada;
     - topo da foto preso ao topo do cartao: a asa (que nasce em y=0 do arquivo)
       mantem o mesmo corte de antes, so' cresce junto;
     - a JANELA tem a proporcao da foto da Consultoria (1600/1254): os dois cartoes
       ficam com a mesma altura de foto e o excesso (~26%, pernas) sai por baixo;
     - o esfumado passa da imagem para a janela, senao ficaria na parte cortada. */
  .v2 .v2-slide[data-slide="2"] .v2-slide-foto {
    aspect-ratio: 1600 / 1254; overflow: hidden; align-items: flex-start; justify-content: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }
  .v2 .v2-slide[data-slide="2"] .v2-slide-foto img {
    width: 100%; flex: none; -webkit-mask-image: none; mask-image: none;
  }
  .v2 .v2-slide[data-slide="1"] .v2-slide-foto { justify-content: center; padding-top: 18px; }
  .v2 .v2-slide[data-slide="1"] .v2-slide-foto img {
    width: 94%;
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  }
  .v2 .v2-slide-texto { padding: 22px 22px 26px; gap: 14px; justify-content: flex-start; }
  .v2 .v2-slide .h1 { font-size: 27px; }            /* 33 -> 27: -18% */
  .v2 .v2-slide-texto .corpo { font-size: 16px; }   /* corpo nao muda */
  .v2 .hero-botoes { flex-wrap: wrap; gap: 12px; }
  .v2 .v2-seta { display: none; }
  .v2 .v2-pontos { position: static; transform: none; width: fit-content; margin: 14px auto 0; }

  /* M3 - ABERTURA: a arte ja' traz a marca no canto direito; com `cover` ancorado
     a direita ela fica inteira atras do texto, como marca d'agua (medido: a marca
     ocupa 68% a 97% da largura do arquivo). So' o texto muda de tamanho.
     O tamanho esta' em style="" no HTML, por isso o !important. */
  .v2 .secao.abertura-foto { padding: 48px 0; }
  .v2 .secao.abertura-foto .corpo:first-child { font-size: 21px !important; }  /* 26 -> 21: -19% */
  .v2 .secao.abertura-foto .corpo + .corpo   { font-size: 16px !important; }  /* 19 -> 16 */

  /* M4 - TITULOS DE SECAO: 42 -> 30px (-29%, dentro da faixa da Porto). */
  .v2 .secao .secao-cabecalho .h2 { font-size: 30px; }

  /* M5 - COMO TRABALHAMOS: sanfona (decisao 3). O texto continua inteiro no HTML;
     o mobile.js recolhe em 3 linhas e poe "Ler mais". */
  .v2 .sanfona-recolhida {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .v2 .ler-mais {
    background: none; border: 0; padding: 6px 0 0; margin: 0; cursor: pointer;
    font: 600 14px/1.4 'Inter', sans-serif; color: var(--teal-claro);
  }

  /* M6 - NOSSA METODOLOGIA (decisao 2.3): DEC/LAD/TAG sao comparaveis -> carrossel
     com espiada, a logica do cartao 302x400 da Porto. Cartao = area util - 46px
     304px + 14px de vao -> o proximo aparece 52px na borda e diz "arraste". */
  .v2 .metodologia-selos {
    display: flex; align-items: stretch; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 6px 20px 18px; scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .v2 .metodologia-selos::-webkit-scrollbar { display: none; }
  .v2 .metodologia-selos .metodologia-item { flex: 0 0 calc(100% - 46px); scroll-snap-align: start; }

  /* M7 - RODAPE: as duas listas tem 3 links cada; sanfona (Porto) nao se paga.
     Ficam lado a lado, a identidade em cima. */
  .v2 .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .v2 .footer-identidade { grid-column: 1 / -1; }


  /* M10 - HERO EM CARD das paginas internas (Consultoria primeiro, 2026-10-20).
     Medido em 390px: a grade `1fr auto` do desktop + largura da foto derivada do palco
     (calc(palco x 0,9859)) punham a foto com 592px e o TEXTO fora da tela (L612).
     Mesma receita aprovada no carrossel da Home: uma coluna, foto em cima na altura
     natural (regra 202), esfumado na base (regra 203), texto embaixo. */
  .v2 .hero.hero-card > .container { height: auto; padding-top: 16px; padding-bottom: 24px; }
  .v2 .v2-slide.v2-slide-fixo,
  .v2 .v2-slide.v2-slide-fixo:has(.foto-cheia) {
    min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto;
  }
  .v2 .v2-slide-foto.foto-cheia { width: 100%; height: auto; }
  .v2 .v2-slide-foto.foto-cheia img { width: 100%; height: auto; object-fit: initial; }

  /* M11 - CONSULTORIA. (a) titulos de secao fora de .secao-cabecalho tambem em 30px;
     (b) "chao de fabrica": a foto era FUNDO com `cover` e no celular cortava de 1,78
     para 0,91 (metade da largura some). Vira foto inteira no alto (390x219) que se
     dissolve no azul da secao, e o texto vem embaixo, sobre o azul. */
  .v2 .como-aplicamos-intro .h2,
  .v2 .chao-fabrica-topo .h2 { font-size: 30px; }
  .v2 .secao.chao-fabrica-secao { display: block; min-height: 0; padding: 0 0 48px; background: var(--ink); }
  .v2 .chao-fabrica-secao::after { display: none; }
  .v2 .chao-fabrica-secao .chao-fabrica-bg {
    position: static; width: 100%; height: auto; object-fit: initial;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }
  .v2 .chao-fabrica-secao .container { padding-left: 20px; padding-right: 20px; margin-top: -8px; }

  /* M12 - AS 7 PAGINAS INTERNAS (2026-10-20, Consultoria aprovada como modelo).
     Medido em 390px antes de escrever: o que no desktop e' foto "sangria" ancorada ao
     lado do texto (wrapper absolute com largura em %) ficava minusculo ou com
     largura ZERO no celular. Regra unica: wrapper volta ao fluxo, foto em altura
     natural (regra 202); vertical (0,56-0,70) com largura reduzida, ancorada a direita
     (decisao 2); horizontal na largura toda. */

  /* (a) titulos de secao: 30px tambem fora de .secao-cabecalho; secao pequena e CTA ficam */
  .v2 .secao:not(.pequena) .container:not(.cta-final) .h2 { font-size: 30px; }

  /* (b) HERO EM CARD com recorte (selo, simbolo, marca): centrado, 70%, desce 22px do
     topo, esfumado sutil - a receita aprovada para os Sistemas no carrossel da Home */
  .v2.pagina-dec .hero-card .v2-slide-foto,
  .v2.pagina-lad .hero-card .v2-slide-foto,
  .v2.pagina-tag .hero-card .v2-slide-foto,
  .v2.pagina-sobre .hero-card .v2-slide-foto,
  .v2.pagina-contato .hero-card .v2-slide-foto {
    height: auto; justify-content: center; align-items: flex-end; padding-top: 22px;
  }
  .v2.pagina-dec .hero-card .v2-slide-foto img,
  .v2.pagina-lad .hero-card .v2-slide-foto img,
  .v2.pagina-tag .hero-card .v2-slide-foto img,
  .v2.pagina-sobre .hero-card .v2-slide-foto img,
  .v2.pagina-contato .hero-card .v2-slide-foto img {
    width: 70%; height: auto; max-width: none; max-height: none; object-fit: initial;
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  }
  /* Contato: a marca e' vertical (0,61) - a 70% teria 384px de altura */
  .v2.pagina-contato .hero-card .v2-slide-foto img { width: 52%; }
  /* Academia: o mesmo arquivo do carrossel da Home -> a mesma receita aprovada (regra 204) */
  .v2.pagina-academia .hero-card .v2-slide-foto {
    height: auto; aspect-ratio: 1600 / 1254; overflow: hidden; align-items: flex-start; justify-content: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }
  .v2.pagina-academia .hero-card .v2-slide-foto img { width: 100%; height: auto; flex: none; -webkit-mask-image: none; mask-image: none; }

  /* (c) fotos de conteudo: wrapper de volta ao fluxo */
  .v2 .dec-logica-foto-wrap, .v2 .dec-nucleo-foto-wrap, .v2 .dec-omq-foto-wrap,
  .v2 .lad-omq-foto-wrap, .v2 .tag-omq-foto-wrap, .v2 .problema-sangria-foto-wrap,
  .v2 .academia-foto-wrap, .v2 .duas-portas-foto-wrap, .v2 .pv-foto-wrap {
    position: static; inset: auto; width: 100%; max-width: none; height: auto; transform: none;
    display: flex; justify-content: flex-end; margin: 24px 0 0;
  }
  .v2 .dec-logica-foto, .v2 .dec-nucleo-foto, .v2 .dec-omq-foto, .v2 .lad-omq-foto,
  .v2 .tag-omq-foto, .v2 .problema-sangria-foto, .v2 .academia-foto, .v2 .pv-foto,
  .v2 .foto-coluna-cheia.lad-problema-foto {
    position: static; width: 100%; height: auto; max-width: none; max-height: none;
    object-fit: initial; transform: none; margin: 0;
  }
  /* verticais (0,65-0,70): 70%, ancoradas a direita como no desktop */
  .v2 .dec-logica-foto, .v2 .dec-nucleo-foto, .v2 .foto-coluna-cheia.lad-problema-foto { width: 70%; }
  .v2 .foto-coluna-cheia.lad-problema-foto { display: block; margin: 24px 0 0 auto; }
  /* recortes quase quadrados do TAG (1,0) e estudantes da Academia (0,81) */
  .v2 .problema-sangria-foto { width: 80%; }
  .v2.pagina-pv .pv-foto { width: 72%; }
  .v2 .pv-foto-wrap { justify-content: center; }

  /* (d) DUAS PORTAS: no desktop as tres fotos foram igualadas pela ALTURA (645px, 2026-09-23).
     No celular a mesma logica: altura 360px, largura derivada de cada arquivo
     (DEC 0,56 -> 202 · LAD 0,67 -> 241 · TAG 0,83 -> 297), ancoradas a direita. */
  .v2 .duas-portas-foto { position: static; width: auto; height: 360px; max-width: 100%; object-fit: initial; transform: none; }

  /* (e) CONTATO: o botao do formulario estourava a tela em 86px */
  .v2 .form-contato { min-width: 0; }
  .v2 .form-contato .btn { align-self: stretch !important; width: 100%; text-align: center; }

  /* (f) segunda passada, medida: quatro regras do desktop venciam por especificidade.
     - grades de 2 colunas que NAO empilhavam: Primeiro Voo (texto do regulamento
       espremido em 164px!) e "O Problema" do LAD (foto 91x320 por min-height:320px);
     - Duas portas DEC/TAG: largura min(28,8%|42,3%, 100% - 644px) -> negativa -> 0;
     - estudantes da Academia: min(32,5%, 463px, 100% - 700px) -> 0. */
  /* grade de 2 colunas no container da secao: no celular, sempre uma coluna. Medido
     em 4 paginas (DEC, LAD, Contato, Primeiro Voo: colunas de 124 a 164px); regras
     de pagina com mais especificidade venciam, por isso o !important, so' aqui. */
  .v2 section > .container { grid-template-columns: 1fr !important; }
  .v2 .foto-coluna-cheia.lad-problema-foto { min-height: 0; justify-self: end; }
  .v2 .duas-portas-tag, .v2 .duas-portas-dec, .v2 .academia-primeiro-voo { min-height: 0; }
  .v2 .duas-portas-secao .duas-portas-foto-wrap { width: 100%; max-width: none; }
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap {
    width: 72%; max-width: none; transform: none; margin: 24px 0 0 auto;
  }
  .v2 .pv-foto-wrap { align-self: auto; }
  .v2 .pv-foto { height: auto; max-height: none; }

  /* (g) PLANOS DA ACADEMIA: o carrossel com espiada (2026-10-20, p5) foi REVERTIDO por
     Renato - "deixar a caixa azul e colocar as tags uma em cima da outra". A ordem do HTML
     ja' e' a pedida: DEC, LAD, TAG, Os tres cursos e, fora da grade, a oferta de estudante. */

  /* M13 - RODADA DE APONTAMENTOS DE RENATO NO CELULAR (2026-10-20, 22 itens).
     Medido antes: as fotos de secao nao tem margem transparente; o vao acima delas
     era 72px de padding + 24px de margem, e o titulo encostava na base da foto (0px). */

  /* G2 - PADRAO DE FOTO DE SECAO: foto no alto (so' um filete de 8px), centralizada,
     esfumada na base como no hero; o texto vem 28px abaixo. */
  .v2 section.secao:has(> .academia-foto-wrap),
  .v2 section.secao:has(> .dec-logica-foto-wrap),
  .v2 section.secao:has(> .dec-omq-foto-wrap),
  .v2 section.secao:has(> .lad-omq-foto-wrap),
  .v2 section.secao:has(> .tag-omq-foto-wrap),
  .v2 section.secao:has(> .problema-sangria-foto-wrap),
  .v2 .secao-problema:has(.lad-problema-foto) { padding-top: 8px; }
  .v2 .academia-foto-wrap, .v2 .dec-logica-foto-wrap, .v2 .dec-omq-foto-wrap,
  .v2 .lad-omq-foto-wrap, .v2 .tag-omq-foto-wrap, .v2 .problema-sangria-foto-wrap {
    justify-content: center; margin: 0 0 28px;
  }
  .v2 .academia-foto, .v2 .dec-logica-foto, .v2 .dec-omq-foto, .v2 .lad-omq-foto,
  .v2 .tag-omq-foto, .v2 .problema-sangria-foto, .v2 .foto-coluna-cheia.lad-problema-foto {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  /* TAG "O Problema" e "A rotina": a foto vinha DEPOIS do texto -> sobe para o alto */
  .v2 section.secao:has(> .problema-sangria-foto-wrap) { display: flex; flex-direction: column; }
  .v2 .problema-sangria-foto-wrap { order: -1; }
  /* LAD "O Problema": a foto e' item da grade do container -> sobe com order */
  .v2 .foto-coluna-cheia.lad-problema-foto { order: -1; justify-self: center; margin: 0 auto; }
  .v2 .secao-problema:has(.lad-problema-foto) > .container { row-gap: 28px; }
  .v2 .secao-problema:has(.lad-problema-foto) { padding-bottom: 56px; }

  /* Academia 3 - estudantes do Primeiro Voo: centralizada, maior, esfumada (base pode sumir) */
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap { width: 86%; margin: 0 auto 28px; }
  .v2.pagina-academia .academia-primeiro-voo .academia-foto {
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
  }
  /* Academia 2 - "Cada curso separado" sobe: 72 -> 40px */
  .v2 .secao.secao-precos { padding-top: 40px; }

  /* DEC 10 - fim da "Logica da transformacao": vao pela metade (72 -> 36px) */
  .v2 section.secao:has(> .dec-logica-foto-wrap) { padding-bottom: 36px; }
  /* DEC 11 - cartoes do "O que muda": numero mais distante do titulo, texto descolado */
  .v2 .dec-omq .linha-topo { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
  /* DEC 12 e G3 - sem foto no celular (o desktop nao muda) */
  .v2 .dec-nucleo-foto-wrap,
  .v2 .duas-portas-secao .duas-portas-foto-wrap { display: none; }
  /* DEC 14 - "Pare de tomar decisoes": centralizado na altura (0 -> 56px no topo) */
  .v2 .secao.dec-cta-final { padding-top: 56px; padding-bottom: 56px; }

  /* Consultoria 7 - "O que muda": o numero vira detalhe no canto, o texto ganha a largura */
  .v2 .lista-numeros-grandes .linha-num { display: block; }
  .v2 .lista-numeros-grandes .num-grande { display: block; font-size: 30px; line-height: 1; min-width: 0; margin: 0 0 10px; }

  /* Contato 8 - a logo cortada encosta na borda direita do cartao */
  .v2.pagina-contato .hero-card .v2-slide-foto { justify-content: flex-end; padding-right: 0; }
  /* Sobre Nos 21 - logo do hero um pouco maior (70 -> 82%) */
  .v2.pagina-sobre .hero-card .v2-slide-foto img { width: 82%; }

  /* Primeiro Voo 1 - o simbolo ficava por cima das caixas: fica preso atras da foto */
  /* causa medida: o M12 pos o wrapper em `position: static`, e o simbolo (o ::before dele)
     passou a se posicionar pela SECAO - topo calculado em 1.156px. Volta a `relative`
     aqui e na Academia (mesmo ::before, 128% do wrap). */
  .v2 .pv-foto-wrap,
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap { position: relative; isolation: isolate; }
  .v2 .pv-foto-wrap { margin-top: 40px; }
  /* Academia: o simbolo (128% do wrap no desktop) subia 254px para a secao de cima -> centrado atras das pessoas */
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap::before { top: 50%; width: 100%; }
  .v2.pagina-pv .pv-foto-wrap::before { top: 52%; width: 86%; }
  .v2 .pv-grade > :not(.pv-foto-wrap) { position: relative; z-index: 2; }

  /* M14 - 2a RODADA DE RENATO NO CELULAR (2026-10-20). Causas medidas:
     - fim de secao grande (DEC logica, LAD/TAG problema, TAG rotina): `.secao-problema-texto`
       carrega padding-bottom: 88px do desktop (style.css:679), somado ao da secao;
     - Duas portas do LAD: min-height 745px do desktop -> 242px vazios no fim;
     - "Pare de tomar decisoes": padding-top 0 vencia a regra do M13 por especificidade. */
  .v2 .secao-problema-texto { padding-bottom: 0; }
  .v2 section.secao:has(> .problema-sangria-foto-wrap),
  .v2 .secao-problema:has(.lad-problema-foto) { padding-bottom: 48px; min-height: 0; }
  .v2 section.secao.duas-portas-secao { min-height: 0; padding-bottom: 56px; }
  /* a causa real: `style="padding-top:0;"` no proprio <section> do dec.html (o desktop
     encosta a secao na de cima de proposito). So' !important vence estilo inline. */
  .v2 section.secao.dec-cta-final { padding-top: 56px !important; padding-bottom: 56px; }

  /* foto de secao ESCURA: o filete de 8px lia como "colada no topo" -> 40px.
     A distancia foto -> titulo (28px) ficou aprovada e nao muda. */
  .v2 section.secao:has(> .lad-omq-foto-wrap),
  .v2 section.secao:has(> .tag-omq-foto-wrap),
  .v2 section.secao.academia-primeiro-voo:has(> .academia-foto-wrap) { padding-top: 40px; }

  /* Academia, Ensino medio: a foto perdeu o z-index do desktop (style.css:1522) quando o
     M12 a pos em `static`, e o simbolo passou para a FRENTE. Foto volta acima do simbolo,
     e o simbolo centrado atras das pessoas. */
  .v2.pagina-academia .academia-primeiro-voo .academia-foto { position: relative; z-index: 1; }
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap::before { z-index: 0; top: 46%; width: 104%; }

  /* M15 - CONSISTENCIA ENTRE PAGINAS (2026-10-20, 3a rodada de Renato). Cada componente
     repetido passa a seguir a peca JA APROVADA, medida (regra 219):
     - numero -> titulo: Home "Do diagnostico" (aprovada) = 8px com numero de 30px de altura;
       com selo de 44px o respiro proporcional e' 14px; cartoes a 24px um do outro.
     - numero ao lado do titulo (LAD/TAG "O que muda"): alinhado a 1a linha, nunca ao centro.
     - citacao/frase em destaque: a do LAD ("O LAD nao funciona sozinho") = 17px, peso 700,
       entrelinha 1,65 - aprovada por Renato como a melhor divisao de linhas. */
  .v2 .dec-omq .card-item .linha-topo { display: block; }
  .v2 .dec-omq .card-item .h3 { margin-top: 14px; }
  .v2 .dec-omq .card-item .corpo-item { margin-top: 10px; }
  .v2 .dec-omq .card-item + .card-item { margin-top: 24px; }
  .v2 .lad-o-que-muda .linha-topo,
  .v2 .tag-o-que-muda .linha-topo { align-items: flex-start; }
  .v2 .citacao blockquote { font-size: 17px; line-height: 1.65; }
  /* CTA com pergunta + frase (ex.: Sobre Nos): o mobile.js quebra a linha depois do "?"
     e marca .cta-partida; a fonte desce 26 -> 22px para cada parte caber melhor. */
  .v2 .h2.cta-partida { font-size: 22px; }
  /* comparacao entre paginas (compara-padroes-mobile.js) achou mais tres divergencias:
     - caixas de citacao: DEC 19px, TAG 18px, LAD 17px -> todas na regua do LAD, 17px;
     - titulo de CTA: DEC "Pare de tomar decisoes" em 30px, os demais em 26px (Home aprovada);
     - LAD "O Problema": foto -> titulo 48px (gap da grade do desktop) contra 28px nas outras;
     - Consultoria: numero -> titulo 10px contra 8px da Home. */
  .v2 .frase-destaque { font-size: 17px; }
  /* nos dois casos abaixo o valor do desktop esta em style="" no HTML (font-size:30px no
     h2 do DEC; gap:48px no container do LAD) - so' !important vence estilo inline */
  .v2 .secao .cta-final .h2:not(.cta-partida) { font-size: 26px !important; }
  .v2.pagina-lad section.secao.secao-problema:has(.lad-problema-foto) > .container { row-gap: 28px !important; }
  .v2 .lista-numeros-grandes .num-grande { margin-bottom: 8px; }

  /* ACADEMIA, Ensino medio = a receita do Primeiro Voo, aprovada como "perfeita":
     foto 72% centralizada SEM esfumado (o degrade deixava as pernas transparentes e a
     logo aparecia atraves delas - parecia estar na frente), simbolo 86% do wrap a 52%. */
  /* comparacao lado a lado com o Primeiro Voo (medida, nao a olho): o wrap da Academia tinha
     390px (fora do container) contra 350px, e o simbolo usava translate(-50%, 0) - so' X -
     herdado do desktop, entao o TOPO dele ficava a 52% e o simbolo pendia sobre os pes e o
     texto. Agora: wrap 350px e translate(-50%, -50%), exatamente como no Primeiro Voo. */
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap {
    width: calc(100% - 40px); margin: 0 auto 28px; justify-content: center; align-items: flex-end;
  }
  .v2.pagina-academia .academia-primeiro-voo .academia-foto {
    width: 72%; -webkit-mask-image: none; mask-image: none; position: relative; z-index: 1;
  }
  .v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap::before {
    z-index: 0; top: 52%; left: 50%; width: 86%; transform: translate(-50%, -50%);
  }

  /* M16 - 4a RODADA DE RENATO (2026-10-20). Medido:
     - aspas de abertura na MESMA linha do texto: na Consultoria terminam exatamente onde o
       "T" comeca; no LAD e no Sobre Nos sobrepoem a 1a letra. Regra para o site todo:
       a aspa de abertura vai para CIMA do texto, numa linha propria;
     - "No chao de fabrica": o eyebrow comecava 8px ACIMA do fim da foto (dentro do esfumado);
     - tag de estudantes da Academia: cartao com raio 16px e a tarja de dentro com 28px - a
       curva nao acompanhava. Os planos (borda branca) tem 28px; o de estudantes passa a 28px. */
  /* (aspas: a versao "linha propria acima do texto" da s1 foi REPROVADA por Renato -
     "voce errou todas as aspas". O pedido era a aspa no TOPO da 1a letra, na mesma linha.
     Ver M17.) */
  .v2 .chao-fabrica-secao .container { margin-top: 20px; }
  .v2 .card-oferta-estudante { border-radius: 28px; }

  /* M17 - ASPAS (2026-10-20). Causa medida pela TINTA do glifo (canvas, actualBoundingBox):
     `.citacao-aspas` usa `vertical-align: -8px` FIXO, calculado para o texto de 23px do
     desktop. O M15 desceu a citacao para 17px; a aspa encolheu junto (1,45em) mas os -8px
     ficaram, e o centro dela caiu de 31% para 50% da altura da letra - "no meio do T".
     Correcao: o mesmo deslocamento em proporcao, -8/33,35 = -0,24em. A aspa volta ao topo
     da 1a letra, na mesma linha, exatamente como no desktop aprovado. */
  /* seletor com a mesma especificidade da regra do style.css:1742 + .v2, para vencer */
  .v2 .citacao blockquote .citacao-aspas { vertical-align: -0.24em; }

  /* M9 - MENU ABERTO: os links tinham ~17px de altura de toque (medido: 9 itens em 382px,
     com os botoes). Alvo de toque de 44px, texto 17px, botoes na largura toda.
     DEC/LAD/TAG seguem abertos (um toque a menos), sem a caixa escura. */
  .v2 nav.nav-principal.aberto > ul {
    gap: 0; padding: 4px 20px 24px; max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .v2 nav.nav-principal.aberto > ul > li { width: 100%; }
  .v2 nav.nav-principal.aberto .link { display: block; padding: 12px 0; font-size: 17px; }
  .v2 nav.nav-principal.aberto .dropdown {
    background: transparent; box-shadow: none; padding: 0 0 4px 16px; margin: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .v2 nav.nav-principal.aberto .dropdown a { display: block; padding: 10px 0; font-size: 16px; }
  .v2 nav.nav-principal.aberto .menu-botoes {
    flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px;
  }
  .v2 nav.nav-principal.aberto .btn.btn-menu { text-align: center; padding: 14px 20px; font-size: 15px; }

}

/* M8 - QUEBRAS MANUAIS (br.qm): o v2-glass as esconde ate 860px com display:none,
   e no HTML nao ha espaco em volta delas -> "rapido,ou", "passapela", "sairmos,sua"
   (achado 2026-10-20). Correcao no mobile.js: um espaco entra antes de cada br.qm.
   `display:inline-block` no <br> foi testado e NAO serve: o navegador segue quebrando a linha. */