/* ============================================================================
   mobile.css — layout mobile do adson.ia.br
   ----------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   index.html é 100% inline style (gerado no Claude Design) e é regerado de
   tempos em tempos. CSS autoral dentro dele se perde no próximo re-sync; aqui
   não. O <link> no <head> estático é uma edição manual, como os dois <script>
   que já moram lá — reaplicar após cada re-sync.

   REGRAS DA CASA
   1. Toda declaração leva !important: o alvo são inline styles, que só perdem
      para !important.
   2. NUNCA escrever [style*="prop:valor"] sem espaço. O runtime DC converte o
      atributo style em objeto React, e o browser re-serializa normalizado:
        style="font-size:9.5px"   ->  style="font-size: 9.5px"
        style="minmax(0,1fr)"     ->  style="minmax(0px, 1fr)"
      Quatro regras do <style> antigo estavam mortas exatamente por isso — entre
      elas a que devia colapsar o Comparativo (que nunca colapsou em mobile).
      Prefira sempre seletor estrutural ou data-*, que sobrevivem intactos.
   3. Nada aqui depende de JS. Estado que vem de JS mora em classe do <body>.
   ============================================================================ */

:root {
  --m-pad: clamp(14px, 4.2vw, 24px);   /* gutter horizontal */
  --m-sec: clamp(46px, 9vw, 74px);     /* respiro vertical de seção */
  --m-gap: clamp(10px, 3vw, 16px);
  --m-h2: clamp(26px, 7.4vw, 44px);
  --m-h3: clamp(20px, 5.4vw, 30px);
  --m-header: 64px;
}

/* ==========================================================================
   1. ATÉ 1024px — tablet e abaixo: nav vira drawer
   O iPad Pro retrato tem 1024 e o header (logo + 6 itens de nav + 2 CTAs) já
   está apertado lá. O corte antigo era 980 e deixava esse aparelho de fora.
   ========================================================================== */
@media (max-width: 1024px) {
  header > div { padding: 10px var(--m-pad) !important; gap: 10px !important; }
  header nav { display: none !important; }

  /* O seletor antigo procurava a[href="#precos"], que não existe no header —
     por isso o "Entrar" nunca sumia e o hambúrguer saía da tela. */
  header .adson-header-cta > a:not([data-signup-cta]) { display: none !important; }
  header .adson-header-cta { margin-left: auto !important; gap: 8px !important; min-width: 0 !important; }
  header .adson-header-cta > a[data-signup-cta] {
    height: 44px !important; padding: 0 15px !important;
    font-size: 13.5px !important; white-space: nowrap !important;
  }
  .adson-hamburger { display: flex !important; width: 44px !important; height: 44px !important; }
  .adson-drawer-close { width: 44px !important; height: 44px !important; }
  /* o link do logo tinha só a altura da imagem (24px) */
  header > div > a[href="#topo"] { min-height: 44px !important; padding-right: 4px !important; }

  /* Âncora não pode aterrissar debaixo do header fixed */
  section[id] { scroll-margin-top: calc(var(--m-header) + 12px) !important; }
}

/* ==========================================================================
   2. ATÉ 700px — o layout de telefone
   700 fica acima do telefone mais largo (430) e abaixo do iPad mini retrato
   (768): o tablet mantém o layout rico, o telefone ganha layout próprio.
   ========================================================================== */
@media (max-width: 700px) {

  /* --- 2.1 Ritmo: um gutter só, para todas as seções --------------------- */
  section[data-screen-label] {
    padding-top: var(--m-sec) !important; padding-bottom: var(--m-sec) !important;
    padding-left: var(--m-pad) !important; padding-right: var(--m-pad) !important;
  }
  /* Faixas full-bleed: o gutter vai no filho, não na seção */
  #ia, #seguranca { padding-left: 0 !important; padding-right: 0 !important; }
  #ia > div, #seguranca > div {
    padding-left: var(--m-pad) !important; padding-right: var(--m-pad) !important;
  }

  /* --- 2.2 Tipografia de título ----------------------------------------- */
  section h2 {
    font-size: var(--m-h2) !important; line-height: 1.07 !important;
    letter-spacing: -.028em !important;
  }
  section h3 { font-size: var(--m-h3) !important; }
  #topo h1 { font-size: clamp(30px, 8.6vw, 46px) !important; line-height: 1.08 !important; }
  #criar h2 { line-height: 1.08 !important; }   /* o line-height:1 colava as linhas */

  /* --- 2.3 Hero ---------------------------------------------------------- */
  #topo { padding-top: calc(var(--m-header) + 34px) !important; padding-bottom: 24px !important; }
  #topo .adson-hero-player { margin-top: 26px !important; }
  #topo .adson-hero-disc { width: 64px !important; height: 64px !important; }

  /* --- 2.4 Grids largos que só cabiam por 10px de folga ------------------ */
  #criativos > div,
  #ia > div,
  #equipe > div:last-child { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }

  /* --- 2.6 Funcionalidades ----------------------------------------------- */
  /* A faixa heroi ja cai em 1 coluna por media query no proprio index.html; os
     clipes sao 16:10 e escalam sozinhos, entao so o respiro encolhe. */
  .adson-feat-band, .adson-feat-zone { padding: 18px !important; border-radius: 20px !important; margin-top: 12px !important; }
  .adson-feat-media { border-radius: 16px !important; }
  .adson-feat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }

  /* --- 2.7 Passo a passo: carrossel horizontal --------------------------- */
  /* Antes: 5 painéis pinados com ~9.300px de espaçador = ~17 telas de rolagem.
     Agora: 5 slides com snap, o próprio dedo controla o avanço.
     O JS precisa parar de pinar (this.demoStatic), senão sobrescreve isto. */
  [data-demo-track] {
    /* o inline position:relative existe só para o trilho e o preenchimento, que
       ficam escondidos aqui — neutralizar deixa o CTA se ancorar na seção */
    position: static !important;
    display: flex !important; gap: 12px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    align-items: flex-start !important;   /* senão o slide mais alto estica os 5 */
    margin-top: 30px !important;
    margin-left: calc(var(--m-pad) * -1) !important;
    margin-right: calc(var(--m-pad) * -1) !important;
    padding: 2px var(--m-pad) 10px !important;
  }
  [data-demo-track]::-webkit-scrollbar { display: none !important; }
  /* os dois primeiros filhos são o trilho vertical e o preenchimento */
  [data-demo-track] > div:nth-child(1),
  [data-demo-track] > div:nth-child(2) { display: none !important; }
  [data-demo-track] > div:nth-child(n+3) {
    flex: 0 0 88% !important; scroll-snap-align: center !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 12px !important; padding-bottom: 0 !important;
    align-content: start !important;
  }
  [data-demo-dot] {
    width: 26px !important; height: 26px !important; font-size: 11px !important;
  }
  /* O mock é um dashboard de 1600px. Em 330px ele não se lê — vale como prova
     visual, não como painel. Fica uma janela de altura fixa com esmaecimento no
     pé; quem quer ver de verdade tem o vídeo do hero. Sem isto, o slide mais
     alto (o passo 2, com 10 atos) esticava os cinco para 2.588px cada. */
  [data-demo-step] {
    margin-top: 16px !important; height: 340px !important; overflow: hidden !important;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 74%, transparent 100%) !important;
  }
  [data-demo-scroll] { transform: none !important; }
  #demo > div:first-child { max-width: none !important; }
  /* O reveal por IntersectionObserver nunca dispara para o que está fora da
     tela na horizontal: dentro do carrossel os elementos ficariam em opacity 0
     para sempre. O CTA do último slide sumia por causa disso. */
  [data-demo-track] [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* O CTA de fecho mora dentro do 5º slide. Como item do flex ele esticava só
     aquele slide (694px contra 460px dos outros), abrindo um buraco de ~270px
     depois do carrossel — e ficava escondido até a quinta arrastada.
     Tirando do fluxo, ele se ancora na seção (que é position:relative) e fica
     logo abaixo do carrossel, em largura cheia. O overflow do track não o
     recorta porque o bloco container dele é um ancestral do track. */
  #demo { padding-bottom: calc(var(--m-sec) + 168px) !important; }
  [data-demo-track] > div:last-child > div:last-child > div[data-reveal]:last-child {
    position: absolute !important;
    left: var(--m-pad) !important; right: var(--m-pad) !important;
    bottom: var(--m-sec) !important;
    margin: 0 !important; padding: 16px !important; gap: 12px !important;
  }

  /* --- 2.8 Comparativo: cada linha vira um bloco rotulado ---------------- */
  /* O seletor antigo ([style*="grid-template-columns:1.1fr 1fr 1fr"]) estava
     morto: em 390px a tabela seguia com 3 colunas de ~120px. */
  /* o cabeçalho "Tarefa | Painel do Meta | Adson" não serve mais: cada linha
     passa a carregar o próprio rótulo */
  [data-screen-label="Comparativo"] > div:last-child > div:first-child {
    display: none !important;
  }
  [data-screen-label="Comparativo"] [data-cmp-row] {
    display: block !important; padding: 0 0 10px !important;
  }
  [data-screen-label="Comparativo"] [data-cmp-row]:first-child > div:first-child {
    border-top: 0 !important;
  }
  [data-screen-label="Comparativo"] [data-cmp-row] > div {
    border-left: 0 !important; padding: 10px 16px !important;
  }
  [data-screen-label="Comparativo"] [data-cmp-row] > div:first-child {
    font-size: 15.5px !important; font-weight: 600 !important;
    color: #f4f7fa !important; background: #0b1017 !important;
    padding: 14px 16px !important; border-top: 1px solid #1e2734 !important;
  }
  /* devolve o cabeçalho de coluna que o empilhamento tirava */
  [data-screen-label="Comparativo"] [data-cmp-row] > div:nth-child(2)::before,
  [data-screen-label="Comparativo"] [data-cmp-row] > div:nth-child(3)::before {
    display: block; margin-bottom: 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
  }
  [data-screen-label="Comparativo"] [data-cmp-row] > div:nth-child(2)::before {
    content: "Painel do Meta"; color: #627284;
  }
  [data-screen-label="Comparativo"] [data-cmp-row] > div:nth-child(3)::before {
    content: "Adson"; color: #f99bc4;
  }

  /* --- 2.10 Preços: 1 coluna, cards compactos --------------------------- */
  /* O override antigo mirava section#precos > div:last-child, que é o <p> de
     status — nunca o grid. */
  #pricing-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .adson-plan { padding: 20px !important; }
  /* os min-height alinhavam colunas de uma tabela de 4; em 1 coluna só furam */
  .adson-plan-price, .adson-plan-desc { min-height: 0 !important; }
  .adson-plan-amount b { font-size: 32px !important; }
  .adson-plan-row { grid-template-columns: 48px 1fr !important; }
  .adson-plan-cta { height: 50px !important; }

  /* --- 2.11 Rodapé: 2 colunas com alvos de 44px ------------------------- */
  footer > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important; padding: 32px var(--m-pad) 20px !important;
  }
  footer > div > div:first-child { grid-column: 1 / -1 !important; }
  footer > div > div:last-child { grid-column: 1 / -1 !important; }
  footer ul { gap: 0 !important; }
  footer ul a {
    display: flex !important; align-items: center !important; min-height: 44px !important;
  }
  footer a[data-signup-cta] {
    display: flex !important; justify-content: center !important;
    height: 50px !important; width: 100% !important;
  }
  /* o FAB do WhatsApp fica fixo sobre este canto */
  footer > div:last-child { padding-bottom: 84px !important; }

  /* --- 2.12 FAB do WhatsApp: círculo de 56px ---------------------------- */
  .adson-whatsapp {
    right: 12px !important; bottom: 12px !important;
    width: 56px !important; height: 56px !important; padding: 0 !important;
    clip-path: none !important; border-radius: 9999px !important;
    align-items: center !important; justify-content: center !important;
  }
  .adson-whatsapp-label { display: none !important; }

}

/* Drawer aberto: nada por cima dele */
body.adson-drawer-open .adson-whatsapp { display: none !important; }

/* ==========================================================================
   3. ATÉ 700px — escala tipográfica
   423 das 619 declarações de font-size do index estão abaixo de 14px, ~200
   delas em 10,5px ou menos. São poucos valores distintos, então 3 regras
   cobrem o conjunto. Escritas na forma que o React serializa (com espaço);
   a forma sem espaço vai junto só por segurança.
   ========================================================================== */
@media (max-width: 700px) {
  /* micro-rótulos mono uppercase — piso de 12px, com tracking menor para
     compensar a largura extra e não quebrar em duas linhas */
  [style*="font-size: 8.5px"], [style*="font-size:8.5px"],
  [style*="font-size: 9px"],   [style*="font-size:9px"],
  [style*="font-size: 9.5px"], [style*="font-size:9.5px"],
  [style*="font-size: 10px"],  [style*="font-size:10px"],
  [style*="font-size: 10.5px"],[style*="font-size:10.5px"] {
    font-size: 12px !important; letter-spacing: .07em !important;
  }
  /* rótulos secundários */
  [style*="font-size: 11px"],  [style*="font-size:11px"],
  [style*="font-size: 11.5px"],[style*="font-size:11.5px"],
  [style*="font-size: 12px"],  [style*="font-size:12px"],
  [style*="font-size: 12.5px"],[style*="font-size:12.5px"] {
    font-size: 13px !important;
  }
  /* corpo pequeno */
  [style*="font-size: 13px"],  [style*="font-size:13px"],
  [style*="font-size: 13.5px"],[style*="font-size:13.5px"] {
    font-size: 14.5px !important; line-height: 1.55 !important;
  }

  /* Exceções: onde o número é dimensão, não leitura */
  .adson-plan-val { font-size: 13px !important; }
  [data-demo-dot] { letter-spacing: 0 !important; }
}

/* ==========================================================================
   4. ATÉ 400px — telas estreitas (320/360/375/390/393)
   ========================================================================== */
@media (max-width: 400px) {
  /* A 320px o CTA não cabe junto do logo e do hambúrguer. O cadastro segue
     alcançável pelo drawer, pelo hero e pelo rodapé. */
  header .adson-header-cta { display: none !important; }
  header > div { justify-content: space-between !important; }

  footer > div { grid-template-columns: 1fr !important; }
  .adson-plan { padding: 18px !important; }
  .adson-plan-amount b { font-size: 29px !important; }
  [data-demo-track] > div:nth-child(n+3) { flex-basis: 92% !important; }
}

/* ==========================================================================
   5. PAISAGEM BAIXA — telefone deitado
   Tudo que assume altura de tela quebra aqui: o painel do demo ficava maior
   que a área útil e era cortado permanentemente.
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  #topo { padding-top: calc(var(--m-header) + 20px) !important; }
  [data-demo-viewport] { max-height: 220px !important; }
  .adson-drawer { padding-top: 58px !important; }
  .adson-drawer a { padding: 11px 14px !important; font-size: 15px !important; }
}

/* ==========================================================================
   6. TOQUE — independe de largura
   ========================================================================== */
@media (pointer: coarse) {
  /* Alvos de toque */
  footer a, header a, .adson-drawer a { -webkit-tap-highlight-color: rgb(247 91 158 / .18); }
  footer a[aria-label*="Instagram" i] { width: 44px !important; height: 44px !important; }
}