/* ==========================================================================
   responsive.css — camada responsiva compartilhada do site Aristo (novo)
   Carregada por ÚLTIMO nas 8 páginas, depois do CSS gerado pelo Anima.
   Estratégia: retrofit sobre um export desktop de largura fixa (1440px,
   layout majoritariamente flex). As sobrescritas mobile ficam confinadas
   em media queries; o desktop permanece intacto.
   Os poucos !important existem para vencer regras .wrapper .classe (0,2,0)
   do CSS gerado, sem reescrever cada seletor por página.
   ========================================================================== */

:root {
  --aristo-blue: #0473e3;
  --aristo-ink: #041633;
}

/* Raízes de página, para escopo das sobrescritas */
.desktop-home, .desktop-cursos, .desktop-editais, .desktop-revalida,
.desktop-sobre, .desktop-contato, .desktop-artigos, .desktop-artigo {
  box-sizing: border-box;
}

/* ---------- Bloco de contato (Contato, todas as larguras) ---------- */
.aristo-contato-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}
.aristo-contato-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #eef4fc;
  border: 1px solid #dceaf9;
  text-decoration: none;
}
a.aristo-contato-item {
  transition: background .15s ease, border-color .15s ease;
}
a.aristo-contato-item:hover {
  background: #e4eefb;
  border-color: #c9def5;
}
.aristo-contato-rotulo {
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--aristo-blue);
}
.aristo-contato-valor {
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  color: var(--aristo-ink);
}

/* ---------- Estados de formulário (todas as larguras) ---------- */
.form-success {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 28px;
  border-radius: 12px;
  background: #eaf3ff;
  border: 1px solid #bcd9ff;
  color: var(--aristo-ink);
  max-width: 520px;
}
.form-success strong { font-weight: 500; font-size: 18px; }
.form-success span { font-weight: 300; font-size: 15px; line-height: 1.5; }
.form-success-wa {
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 8px;
  background: #25d366;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.field-invalid {
  outline: 2px solid #e5484d !important;
  outline-offset: 1px;
  border-radius: 6px;
}

/* ---------- Botão hambúrguer (injetado por site.js) ---------- */
.js-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1002;
}
.js-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--aristo-ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-open .js-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .js-nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .js-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   <= 1440px : elimina o scroll horizontal e torna a barra de nav fluida
   ========================================================================== */
@media (max-width: 1440px) {
  .desktop-home, .desktop-cursos, .desktop-editais, .desktop-revalida,
  .desktop-sobre, .desktop-contato, .desktop-artigos, .desktop-artigo {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* barra de nav (header fixo) deixa de ter 1140px centralizados */
  header[class*="navbar-menu"] {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 16px !important;
  }

  img { max-width: 100%; }
}

/* ==========================================================================
   <= 1024px : nav vira hambúrguer + REFLUXO do canvas de largura fixa

   O export do Anima posiciona as SEÇÕES em coordenadas absolutas sobre um
   canvas de altura fixa (ex.: .desktop-home tem height:5621px). Isso NÃO
   reflui: em telas estreitas o conteúdo fica sobreposto e cortado. Aqui o
   canvas é liberado (altura automática) e o container principal de cada
   página volta ao fluxo normal, empilhando as seções em uma coluna na ordem
   do DOM (que, no export, corresponde à ordem visual). O desktop (>1024px)
   permanece intacto.
   ========================================================================== */
@media (max-width: 1024px) {
  .js-nav-toggle { display: flex; }

  /* esconde a lista de links inline por padrão.
     O container dos links é um <div class="navbar-N"> (não um <nav>), então o
     seletor casa qualquer filho do header cuja classe contenha "navbar". */
  header[class*="navbar-menu"] > [class*="navbar"] {
    display: none !important;
  }
  /* painel aberto: dropdown empilhado abaixo da barra */
  header[class*="navbar-menu"].nav-open > [class*="navbar"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 10px !important;
    background: #eaf1fb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(4, 22, 51, .18);
  }
  /* cada link/botão ocupa a linha inteira e empilha */
  header[class*="navbar-menu"].nav-open > [class*="navbar"] > * {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }
  header[class*="navbar-menu"].nav-open > [class*="navbar"] > * > * {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  header[class*="navbar-menu"] { position: fixed !important; }
  /* o header do export tem overflow:hidden (altura travada 70px), o que recorta
     o dropdown absoluto; liberado quando aberto para o painel aparecer inteiro */
  header[class*="navbar-menu"].nav-open { overflow: visible !important; }

  /* 1) Libera o canvas de altura fixa e o scroller interno do body */
  html, body {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .desktop-home, .desktop-cursos, .desktop-editais, .desktop-revalida,
  .desktop-sobre, .desktop-contato, .desktop-artigos, .desktop-artigo {
    height: auto !important;
    min-height: 0 !important;
    /* overflow-x:clip (não 'hidden') apara sobras horizontais residuais sem
       transformar o eixo vertical em scroller — o conteúdo cresce em altura */
    overflow-x: clip !important;
    overflow-y: visible !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 2) Camadas decorativas de fundo (posicionadas em coordenadas desktop) saem */
  .desktop-home > .rectangle, .desktop-home > .rectangle-2, .desktop-home > .div,
  .desktop-cursos > .frame-155, .desktop-cursos > .union-2, .desktop-cursos > .rectangle-5,
  .desktop-revalida > .OBJECTS, .desktop-contato > .vector-9 {
    display: none !important;
  }

  /* 3) Container principal de cada página volta ao fluxo e empilha em coluna */
  .desktop-home > .frame,
  .desktop-cursos > .frame-156,
  .desktop-editais > .frame-209,
  .desktop-revalida > .frame-129,
  .desktop-sobre > .frame-71,
  .desktop-contato > .frame-56,
  .desktop-artigos > main,
  .desktop-artigo > .o-INSTITUTO-wrapper,
  .desktop-artigo > .frame-115 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* espaço para a barra de nav fixa no primeiro bloco de cada página */
  .desktop-home > .frame,
  .desktop-cursos > .frame-156,
  .desktop-editais > .frame-209,
  .desktop-revalida > .frame-129,
  .desktop-sobre > .frame-71,
  .desktop-contato > .frame-56,
  .desktop-artigos > main,
  .desktop-artigo > .o-INSTITUTO-wrapper {
    padding-top: 104px !important;
  }

  /* 4) Nenhum descendente do conteúdo permanece em posição absoluta */
  .desktop-home > .frame *,
  .desktop-cursos > .frame-156 *,
  .desktop-editais > .frame-209 *,
  .desktop-revalida > .frame-129 *,
  .desktop-sobre > .frame-71 *,
  .desktop-contato > .frame-56 *,
  .desktop-artigos > main *,
  .desktop-artigo > .o-INSTITUTO-wrapper *,
  .desktop-artigo > .frame-115 * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    /* linhas flex internas quebram em vez de estourar a largura;
       min-width:0 escapa da armadilha flex (min-width:auto) */
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  /* 4b) Legibilidade: textos que no desktop eram brancos sobre uma faixa
     escura (retângulo decorativo agora oculto) passariam a branco-no-claro.
     Recolorir para tinta apenas no mobile, por página. */
  .desktop-home > .frame .heading-3,
  .desktop-home > .frame .text-wrapper-6,
  .desktop-home > .frame .text-wrapper-7,
  .desktop-home > .frame p.p {
    color: var(--aristo-ink) !important;
  }
  /* Faixa de estatísticas (número azul + rótulo branco): no desktop assenta
     sobre uma faixa navy (retângulo agora oculto). Recompõe o fundo navy. */
  .desktop-home > .frame .frame-25 {
    background: var(--aristo-ink) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    justify-content: space-around !important;
  }
  /* Cursos é uma página de fundo navy; a seção de mentorias tinha texto
     escuro sobre uma faixa clara (retângulo agora oculto). Clareia o texto. */
  .desktop-cursos > .frame-156 .heading-57,
  .desktop-cursos > .frame-156 .heading-58,
  .desktop-cursos > .frame-156 .text-wrapper-62 {
    color: #f3f7fc !important;
  }
  /* Eyebrow do hero da Revalida e tag de categoria dos artigos eram claros
     sobre uma faixa/foto colorida (agora fluída no claro). Viram azul-marca. */
  .desktop-revalida > .frame-129 .text-wrapper-49,
  .desktop-artigos > main .text-wrapper-75 {
    color: var(--aristo-blue) !important;
    font-weight: 500 !important;
  }

  /* 4c) Cursos - planos: no desktop essas secoes sao flex-direction:column
     com ALTURA FIXA (resumo-2 907px, frame-157 1507px, frame-160/161 473px).
     O reset mobile forca flex-wrap:wrap mas nao mexe na altura; coluna travada
     + wrap faz os filhos "quebrarem" para novas COLUNAS a direita (x414, x812)
     e sumirem fora da tela, deixando vaos pretos. Zera a altura imposta e
     impede a quebra em coluna. A fileira .cards-4 (row) mantem o wrap para os
     dois cards empilharem verticalmente. */
  .desktop-cursos > .frame-156 .resumo-2,
  .desktop-cursos > .frame-156 .frame-157,
  .desktop-cursos > .frame-156 .frame-160,
  .desktop-cursos > .frame-156 .frame-161 {
    height: auto !important;
    flex-wrap: nowrap !important;
  }
  .desktop-cursos > .frame-156 .cards-4 {
    height: auto !important;
  }

  /* 5) Exceção: carrossel de professores mantém rolagem horizontal (scrollLeft).
     min-width:0 + width:100% escapam da armadilha flex (min-width:auto), senão o
     trilho cresceria até o conteúdo e estouraria a página em vez de rolar. */
  .desktop-home .frame-32 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
    -webkit-overflow-scrolling: touch;
  }
  .desktop-home .frame-32 > * {
    flex: 0 0 auto !important;
    max-width: 86% !important;
  }

  /* 6) Hero ENAMED: do card absoluto (desktop) para uma coluna fluida (texto -> foto) */
  .desktop-home .frame-2 {
    height: auto !important;
    justify-content: flex-start !important;
  }
  .desktop-home .hero-enamed {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    padding: 28px 22px !important;
    gap: 22px !important;
    border-radius: 20px !important;
  }
  .desktop-home .hero-copy {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .desktop-home .hero-sub {
    margin: 0 !important;
  }
  .desktop-home .hero-cta-card {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .desktop-home .hero-cta {
    display: flex !important;
  }
  .desktop-home .hero-cta .lbl {
    white-space: normal !important;
  }
  .desktop-home .hero-photo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .desktop-home .hero-photo img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ==========================================================================
   <= 768px : uma coluna; imagens e blocos fluidos; tipografia do hero menor
   ========================================================================== */
@media (max-width: 768px) {
  main, section, article, form,
  [class*="frame-"], [class*="cards"], [class*="content-"],
  [class*="txt"], [class*="info"], [class*="resumo"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Fluidez geral: nenhum descendente de conteúdo ultrapassa a largura do pai.
     Neutraliza as larguras fixas (NNNpx) do export desktop. */
  main *, footer *, form *,
  [aria-label="Redes sociais"] * {
    max-width: 100% !important;
  }
  /* containers flex em linha passam a empilhar no mobile */
  main [class*="frame-"], main [class*="cards"],
  main [class*="content-"], main [class*="info"],
  footer [class*="content-"], footer .links {
    flex-wrap: wrap !important;
  }
  img { height: auto !important; }

  /* títulos gigantes do hero: escala fluida legível */
  h1 { font-size: clamp(30px, 8vw, 46px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 6.5vw, 36px) !important; line-height: 1.2 !important; }

  /* hero ENAMED: tipografia proporcional ao card fluido */
  .desktop-home .hero-title {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
  }
  .desktop-home .hero-sub {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.32 !important;
  }

  /* blocos de texto de largura fixa: deixam de estourar e quebram linha */
  h1, h2, h3, h4, p,
  [class*="heading-"], [class*="text-wrapper-"], [class*="lorem"] {
    max-width: 100% !important;
    white-space: normal !important;
    /* quebra palavra inteira p/ a linha seguinte; so parte palavra que sozinha estoura */
    overflow-wrap: break-word;
  }

  /* padding lateral de respiro nos blocos principais */
  main { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---------- Rodapé compartilhado empilha ---------- */
  .footer { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; height: auto !important; min-height: 0 !important; padding: 32px 16px !important; }
  /* content-2 empilha (logo sobre nav): em linha a 358px o bloco de nav
     estoura a caixa e colide com os creditos abaixo */
  .footer .content-2 { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; height: auto !important; }
  .footer .content-2, .footer .links, .footer .column,
  .footer .footer-links, .footer .frame-54 {
    width: 100% !important; flex-wrap: wrap !important;
  }
  /* zera o padding lateral de 150px do desktop: sem ele o conteudo fica
     espremido num filete e o credito quebra letra a letra */
  .footer .content-2, .footer .row {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .footer .footer-links, .footer .frame-54 {
    flex-direction: row !important; row-gap: 8px !important; column-gap: 20px !important;
  }
  .footer .credits, .credits .row {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 10px !important; width: 100% !important; height: auto !important;
  }
  .footer-links-2 { flex-wrap: wrap !important; row-gap: 6px !important; }

  /* barra de redes sociais lateral não fica flutuando fora da tela */
  [aria-label="Redes sociais"] {
    position: static !important;
    flex-direction: row !important;
    gap: 18px !important;
    justify-content: center !important;
    padding: 16px !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   <= 480px : ajustes finos de tipografia e botões full-width
   ========================================================================== */
@media (max-width: 480px) {
  h1 { font-size: clamp(26px, 8.5vw, 34px) !important; }
  [class*="button-"] { max-width: 100% !important; }
}

/* ==========================================================================
   Ajustes finos mobile (<=1024px) para seções que o reflow genérico não cobre:
   linhas de cartões em flex/altura fixa (min-width:0 impede o wrap) e a
   composição absoluta do depoimento (margens negativas + padding do Anima).
   ========================================================================== */
@media (max-width: 1024px) {
  /* Cursos: 3 cartões lado a lado -> empilham em coluna */
  .desktop-home .frame-18 { flex-direction: column !important; }
  .desktop-home .aristo-DX { width: 100% !important; }

  /* Metodologia (Estudo Inteligente / Pareto / Revisão): solta a altura
     travada (373px) que cortava o conteúdo e reduz o respiro lateral */
  .desktop-home .frame-11 {
    width: 100% !important;
    height: auto !important;
    padding: 24px 16px !important;
  }
  .desktop-home .element-metodologia-pareto { width: 100% !important; }

  /* ---- Depoimentos mobile (ref Figma #11): balão cinza no topo com rabinho
     apontando para baixo, card azul da Luana embaixo. Inverte a ordem do DOM
     via flex order, recompõe o cartão absoluto do Anima em coluna fluida e
     contida na viewport. ---- */
  .desktop-home .frame-39 { margin-top: 0 !important; }
  .desktop-home .group-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Balão cinza — vem primeiro (order -1) */
  .desktop-home .group-6 {
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 30px !important;
    padding: 24px 22px !important;
    background: #dae6f2 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .desktop-home .group-6::after {
    content: "" !important;
    position: absolute !important;
    left: 38px !important;
    bottom: -11px !important;
    width: 24px !important;
    height: 24px !important;
    background: #dae6f2 !important;
    border-radius: 5px !important;
    transform: rotate(45deg) !important;
  }
  .desktop-home .union { display: none !important; }
  .desktop-home .frame-44 { width: 100% !important; gap: 6px !important; }
  .desktop-home .heading-33 {
    width: 100% !important;
    font-size: 25px !important;
    line-height: 1.16 !important;
  }
  .desktop-home .heading-34 { width: 100% !important; font-size: 15px !important; }

  /* Card azul — vem embaixo (order 0) */
  .desktop-home .frame-40 {
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 26px 20px 30px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    background: #0473e3 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    clip-path: none !important;
    box-sizing: border-box !important;
  }
  .desktop-home .group-5 {
    width: auto !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 !important;
  }
  .desktop-home .frame-41 {
    width: 100% !important;
    max-width: 330px !important;
    margin: -22px 0 0 !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .desktop-home .heading-wrapper {
    width: 100% !important;
    padding: 18px 20px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  .desktop-home .heading-31 {
    width: 100% !important;
    font-size: 18px !important;
    line-height: 1.32 !important;
    text-align: center !important;
  }
  .desktop-home .heading-31 .text-wrapper-19,
  .desktop-home .heading-31 .text-wrapper-20 {
    font-size: 18px !important;
    line-height: 1.32 !important;
  }
  .desktop-home .vector-7 { display: none !important; }
  .desktop-home .frame-42 {
    width: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }
  .desktop-home .heading-32 { width: auto !important; text-align: center !important; }

  /* Card "Metodologia baseada em especificidade": no desktop a imagem do corpo
     docente (group-2) usa margens negativas (-130px topo / -105px base) para
     ficar à direita do texto, e o título tem transform de -30px. No mobile isso
     empilha a imagem e as estatísticas sobre o texto. Esconde a imagem
     (redundante com o carrossel de professores logo abaixo) e distribui os
     números em coluna limpa. */
  .desktop-home .frame-6 { transform: none !important; }
  /* Cadeia de wrappers da metodologia tinha larguras fixas desktop (1140/1440/
     1206) + frame-17 inline-flex, que faziam o box navy estourar à direita.
     Força fluidez para o box caber na viewport. */
  .desktop-home .frame-16,
  .desktop-home .frame-17,
  .desktop-home .frame-24,
  .desktop-home > .frame .frame-25 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .desktop-home .frame-17 { display: flex !important; align-self: stretch !important; }
  /* Título tinha white-space:nowrap + fit-content -> esticava o box além da
     viewport. Deixa quebrar e o box travar na largura da tela. */
  .desktop-home .heading-10 { white-space: normal !important; width: 100% !important; }
  .desktop-home .frame-6 { display: flex !important; width: 100% !important; }
  .desktop-home > .frame .frame-25 { max-width: calc(100vw - 32px) !important; }
  /* Imagem do corpo docente (group-2) ancorada na BASE do box navy, sangrando
     até as bordas; a faixa de estatísticas fica sobreposta embaixo (ref. Figma
     mobile). O box (.frame-25) recebe position/overflow para conter a imagem. */
  .desktop-home > .frame .frame-25 {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  .desktop-home .group-2 {
    display: block !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    height: 300px !important;
    margin: 20px -16px 0 !important;
    object-fit: cover !important;
    object-position: center 18% !important;
  }
  .desktop-home .frame-stats {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    z-index: 2 !important;
    margin: 0 !important;
  }
  .desktop-home .frame-26,
  .desktop-home .frame-27,
  .desktop-home .frame-28 {
    margin: 0 !important;
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .desktop-home .frame-27 { order: 1 !important; }
  .desktop-home .frame-26 { order: 2 !important; }
  .desktop-home .frame-28 { order: 3 !important; }
  .desktop-home .frame-stats .heading-16 { font-size: 18px !important; line-height: 1.15 !important; }
  .desktop-home .frame-stats .heading-17 { font-size: 12px !important; line-height: 1.15 !important; }

  /* "Um método que transforma esforço em resultado!": o Anima usa padding
     lateral de 513px para centralizar no desktop; no mobile isso colapsa o
     título (largura 0 -> texto empilhado) e o overflow de 1026px empurra a
     linha "Nosso time de professores" para fora da tela. Zera o padding e
     devolve largura fluida — corrige o título e, em cascata, os professores. */
  .desktop-home .frame-33 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
  }
  .desktop-home .frame-34,
  .desktop-home .heading-23 { width: 100% !important; }
}

/* ==========================================================================
   Formulário "Vamos construir sua aprovação juntos?" — mobile
   No Figma mobile os campos ficam em COLUNA ÚNICA, largura total (Nome ->
   E-mail -> Telefone -> Objetivo, um por linha). No desktop o Anima usa linhas
   de dois campos (.frame-52 no shared-form; .frame-64 no contato) com dois
   filhos flex:1 que, mesmo com o reset genérico, dividem a linha ao meio. Basta
   virar essas linhas em coluna para os campos ocuparem 100% cada.
   ========================================================================== */
@media (max-width: 1024px) {
  /* .div-5 é a LINHA de dois campos no shared-form; .frame-64 no contato.
     Vira coluna para os campos ocuparem 100% cada. */
  .shared-form .div-5,
  .desktop-contato .frame-64 {
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    align-self: stretch !important;
  }
  .shared-form .div-5 > .frame-52,
  .shared-form .div-5 > .frame-53,
  .desktop-contato .frame-64 > .frame-65,
  .desktop-contato .frame-64 > .frame-66 {
    width: 100% !important;
    align-self: stretch !important;
    flex: 1 1 auto !important;
  }
  /* CTA: rótulo pode quebrar em duas linhas em telas estreitas */
  .shared-form .button-4 .div-2,
  .shared-form .button-4 p,
  .desktop-contato .button-5 .saber-mais {
    white-space: normal !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Revalida — mobile: os cards de curso (SPRINT 80/20, INTENSIVO, EXTENSIVO,
   PROGRAMADO, CURSO PRÁTICO) sumiam. Causa: o hero (.frame-130) tem
   height:950px fixo e a seção de cards (.resumo, height:1369px) fica DENTRO
   dele; o reset genérico não zera essas alturas, então a .resumo transbordava
   o hero e o formulário (irmão seguinte) a cobria. Solta as alturas fixas,
   reduz o padding lateral (era 150px -> sobrava ~90px de conteúdo a 390px) e
   empilha os cards em coluna única full-width. O watermark "Revalida" (99px)
   estourava a linha e quebrava em duas -> encolhe no mobile.
   ========================================================================== */
@media (max-width: 1024px) {
  .desktop-revalida .frame-130 { height: auto !important; gap: 40px !important; }
  .desktop-revalida .resumo {
    height: auto !important;
    padding: 40px 16px !important;
  }
  .desktop-revalida .frame-135,
  .desktop-revalida .cards-wrapper { width: 100% !important; }
  .desktop-revalida .cards { flex-direction: column !important; }
  .desktop-revalida .card-curso-EAD-2,
  .desktop-revalida .card-curso-EAD-3 {
    width: 100% !important;
    height: auto !important;
  }
  /* watermark "Revalida": cabe em uma linha */
  .desktop-revalida .text-wrapper-49 {
    font-size: clamp(44px, 14vw, 64px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Artigos — mobile: o título "Categorias & Artigos:" renderizava NA VERTICAL
   (uma letra por linha). Causa: .o-INSTITUTO-2 tem padding lateral de 170px;
   a 390px sobrava ~0 de largura de conteúdo, espremendo o texto até uma letra
   por linha. O reset genérico só corrige padding no > main, não em descendentes.
   Também: o hero .group-8 (absoluto, height:290px) e o .frame-180 (margin-top
   181px) deixavam um vão enorme no topo depois do reset. E as fileiras de
   cards de categoria (.frame-182) e de artigos populares (.frame-190) são flex
   row com filhos flex:N -> não quebram sozinhas (armadilha do flex), precisam
   virar coluna.
   ========================================================================== */
@media (max-width: 1024px) {
  .desktop-artigos .o-INSTITUTO-2 {
    padding: 32px 16px !important;
    gap: 24px !important;
  }
  .desktop-artigos .frame-181 { gap: 40px !important; }
  /* hero azul: sem altura fixa nem margens de canvas */
  .desktop-artigos .group-8 { height: auto !important; }
  .desktop-artigos .frame-180 {
    margin-top: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  /* fileiras de cards -> coluna única */
  .desktop-artigos .frame-182,
  .desktop-artigos .frame-190 {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   Artigo (post interno) — mobile: o título e TODO o corpo do texto
   renderizavam na vertical (uma letra por linha). Mesma causa dos Artigos:
   .o-INSTITUTO (filho do wrapper já resetado) mantém width:1440px e
   padding:0 170px. O reset genérico limita o width a 100% mas não zera o
   padding lateral, então a 390px sobravam ~50px de conteúdo. Solta a largura
   e reduz o padding.
   ========================================================================== */
@media (max-width: 1024px) {
  .desktop-artigo .o-INSTITUTO {
    width: 100% !important;
    padding: 0 16px !important;
    gap: 40px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   Home — "A plataforma Aristo": os 6 selos (element-metodologia-pareto-2..7)
   sao pilulas absolutas espalhadas sobre o mockup de dispositivos no desktop.
   Sem coordenada valida no mobile, empilhavam-se sobrepostas. Aqui viram uma
   checklist vertical limpa logo abaixo do CTA. Desktop intacto (>1024px).
   ========================================================================== */
@media (max-width: 1024px) {
  .desktop-home .frame-35 { width: 100% !important; max-width: 100% !important; }

  .desktop-home .element-metodologia-pareto-2,
  .desktop-home .element-metodologia-pareto-3,
  .desktop-home .element-metodologia-pareto-4,
  .desktop-home .element-metodologia-pareto-5,
  .desktop-home .element-metodologia-pareto-6,
  .desktop-home .element-metodologia-pareto-7 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    margin: 10px auto 0 !important;
    box-sizing: border-box !important;
  }
  .desktop-home .element-metodologia-pareto-2 { margin-top: 22px !important; }

  .desktop-home .heading-26,
  .desktop-home .heading-27,
  .desktop-home .heading-28,
  .desktop-home .heading-29,
  .desktop-home .heading-30 { white-space: normal !important; }
}

/* ==========================================================================
   Interna (Aprovados/Metodologia/etc.) — hero: no mobile o grid colapsava para
   "1fr" (== minmax(auto,1fr)), que nao encolhe abaixo do min-content. Como o
   CTA e nowrap, a coluna estourava a largura do card (overflow:hidden) e cortava
   titulo, texto e botao a direita. minmax(0,1fr) libera o encolhimento; o CTA
   passa a quebrar. So mobile; desktop intacto.
   ========================================================================== */
@media (max-width: 900px) {
  .pg-hero-card { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 600px) {
  .pg-hero-copy { padding: 36px 22px 30px !important; }
  /* h1 fluido: a frase destacada tem &nbsp; travado ("Aprovacoes construidas.")
     que nao quebra; tamanho fixo estourava a largura em telas estreitas.
     clamp garante caber de 320px a 600px sem cortar. */
  .pg-hero-copy h1 { font-size: clamp(21px, 6vw, 28px) !important; line-height: 1.25 !important; max-width: none !important; overflow-wrap: break-word !important; }
  .pg-hero-copy .pg-lead { font-size: 17px !important; line-height: 26px !important; max-width: none !important; }
  .pg-cta { white-space: normal !important; line-height: 1.25 !important; }
  .pg-cta-card { margin-left: 0 !important; display: block !important; }
}

/* ==========================================================================
   Sobre — bloco de estatisticas (group-7): no desktop tres selos absolutos
   assentam sobre um SVG de fundo (frame-82), dentro de um box de altura fixa
   (285px). O reset generico torna os filhos estaticos, mas a altura travada +
   o SVG faziam os numeros vazarem sobre a secao "Nossos valores". Aqui: some o
   SVG, solta a altura e cada estatistica vira um card azul solido, texto claro.
   Tambem empilha a linha missao+stats (frame-79). So mobile; desktop intacto.
   ========================================================================== */
@media (max-width: 1024px) {
  .desktop-sobre .frame-79 {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 20px !important;
  }
  .desktop-sobre .frame-80 { width: 100% !important; }

  .desktop-sobre .group-7 {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 4px auto 0 !important;
  }
  .desktop-sobre .frame-82 { display: none !important; }
  .desktop-sobre .frame-83,
  .desktop-sobre .frame-84,
  .desktop-sobre .frame-85 {
    width: 100% !important;
    height: auto !important;
    padding: 18px 16px !important;
    background: var(--aristo-blue) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .desktop-sobre .heading-43,
  .desktop-sobre .heading-45 { color: #f3f7fc !important; }
}

/* ==========================================================================
   Cursos — botao "BAIXAR TABELA COMPARATIVA DE CURSOS": .saber-mais-8 e
   white-space:nowrap a 18px e .button-17 e inline-flex; no mobile o texto
   estourava a direita e o chevron caia para baixo. Aqui o texto quebra,
   fonte menor e o botao centraliza. So mobile; desktop intacto.
   ========================================================================== */
@media (max-width: 600px) {
  .desktop-cursos .button-17 {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }
  .desktop-cursos .saber-mais-8 {
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Metodologia/interna — selos de estatistica (.pg-badges no painel navy):
   no desktop sao grid 2 colunas com escalonamento proposital
   (nth-child(2) +44px, nth-child(3) -22px). No mobile o escalonamento
   permanecia e os 3 selos ficavam desalinhados/espalhados, com numero
   cortado pela borda do painel. Aqui: coluna unica, sem escalonamento.
   So mobile; desktop intacto.
   ========================================================================== */
@media (max-width: 600px) {
  .pg-badges {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }
  .pg-badge,
  .pg-badge:nth-child(2),
  .pg-badge:nth-child(3) { margin-top: 0 !important; }
}

/* ==========================================================================
   Home — carrossel "Nosso time de professores": cards de largura fixa (300px)
   com .container-2 travado em max-height:73px + overflow:hidden. No mobile o
   preview colapsado cortava os bullets no meio da palavra, parecendo quebra.
   Aqui: card mais largo, conteudo revelado por completo, texto quebra certo e
   o "Ver mais" (redundante quando tudo aparece) some so nos cards.
   So mobile; desktop intacto.
   ========================================================================== */
@media (max-width: 600px) {
  .desktop-home .dr-andr-luigi,
  .desktop-home .div-6 { width: 80vw !important; max-width: 320px !important; }
  .desktop-home .container-2 {
    max-height: none !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  .desktop-home .heading-19 { white-space: normal !important; }
  .desktop-home .heading-21 { overflow-wrap: anywhere !important; }
  .desktop-home .dr-andr-luigi > .div-5,
  .desktop-home .div-6 > .div-5 { display: none !important; }
}

/* ==========================================================================
   Contato — formulario proprio (.label-text-5 serve input E select): e
   inline-flex com flex:0 0 auto e sem largura, entao encolhia ao tamanho
   padrao (~20 caracteres) e cortava os placeholders; o select ainda mostrava
   a seta nativa junto do chevron custom (chevron duplo). O appearance:none no
   select vale em qualquer viewport (bug real cross-viewport); o preenchimento
   de largura vale em qualquer viewport: o campo (caixa branca) ja e full-width,
   entao preencher o input dentro dela so revela o placeholder, sem mover caixa.
   ========================================================================== */
.desktop-contato select.label-text-5 {
  -webkit-appearance: none !important;
  appearance: none !important;
}
.desktop-contato .label-text-5 {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}