/* ═══ Site no tablet e no celular ═══
   A Home foi desenhada em 1280px com estilo inline; aqui ela se reorganiza em duas faixas:
   até 900px (tablet: empilha as colunas) e até 560px (celular: tipografia e telas do produto
   reduzidas). As telas do produto (mocks) têm tamanho fixo por desenho: em vez de refazê-las,
   elas encolhem inteiras com zoom, e continuam idênticas ao produto.
   O !important é necessário porque a marcação traz o estilo inline. */

@media (max-width: 900px) {
  /* ritmo: margens laterais de 24px, seções mais próximas */
  [data-raiz] > section, [data-raiz] > footer { padding-left: 24px !important; padding-right: 24px !important; }
  [data-raiz] > section[style*="padding:96px 70px 0"] { padding-top: 72px !important; }
  .h2 { font-size: 34px !important; letter-spacing: -1px !important; }
  .lead { font-size: 16.5px !important; }

  /* cabeçalho editorial vira pilha: índice, título, texto */
  :is([style*="text-align:center"], [style*="text-align: center"]):has(> .eyebrow + .h2) { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 14px !important; }
  .m-cab-lado { flex-direction: column; align-items: flex-start !important; gap: 14px !important; }
  .m-cab-lado .lead { max-width: none !important; }

  /* topo */
  .nav { padding: 0 20px !important; gap: 16px !important; height: 68px !important; }
  .nav img { height: 28px !important; }
  .nav > a:first-child { margin-right: auto; }
  .nav > nav { display: none !important; }
  .m-nav-links { display: none !important; }
  .m-hero { flex-direction: column; align-items: stretch !important; padding: 28px 24px 0 !important; gap: 28px !important; }
  .m-hero-txt { width: auto !important; gap: 20px !important; }
  .m-hero-txt h1 { font-size: 48px !important; letter-spacing: -1.6px !important; }
  .m-hero-txt h1 > span { height: 54px !important; }
  .seg-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-nav::-webkit-scrollbar { display: none; }
  .seg-nav a { white-space: nowrap; }
  .m-hero-ctas, .m-hero-checks { flex-wrap: wrap; }
  .m-hero-checks { gap: 10px 18px !important; }
  .m-hero-palco { zoom: .82; align-self: center; margin-left: 20px; }
  .m-canais { margin-top: -28px !important; }
  .m-canais > div { flex-wrap: wrap; }

  /* Como funciona: passos em cima, a cena embaixo */
  .m-como { grid-template-columns: 1fr !important; gap: 20px !important; }
  .m-como-passos, .m-como-palco { grid-column: auto !important; }
  .m-como-palco { min-height: 380px !important; padding: 24px !important; }

  /* recursos */
  .m-grid2, .m-grid3 { grid-template-columns: 1fr !important; }
  .mods { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }

  /* claro e escuro: a tela inteira, reduzida */
  .m-tema-mock { zoom: .68; }
  .m-tema-ctrl { width: 100% !important; }

  /* Exi_IA: texto e bolhas empilhados; a figura grande fica para o fim da página */
  #exiia { flex-direction: column; align-items: stretch !important; margin: 72px 24px 0 !important; min-height: 0 !important; }
  .m-exi-txt { padding: 40px 28px 8px !important; }
  .m-exi-txt .h2 { font-size: 36px !important; }
  .m-exi-bolhas { width: auto !important; margin: 0 28px 36px !important; }
  .m-exi-img, .m-exi-esp { display: none !important; }

  /* ligações */
  #ligacoes { padding-top: 72px !important; padding-bottom: 72px !important; margin-top: 72px !important; }
  .m-lig { flex-direction: column; align-items: stretch !important; gap: 36px !important; }
  .m-lig-txt { width: auto !important; }
  .m-lig-mocks { zoom: .7 !important; justify-content: center !important; }

  /* app */
  .fan { zoom: .6 !important; }
  .m-app-rot { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 24px !important; }

  /* chamada final */
  .fim { grid-template-columns: 1fr !important; margin: 72px 24px !important; min-height: 0 !important; }
  .fim-txt { padding: 40px 28px 0 !important; }
  .fim-h { font-size: 36px !important; }
  .fim-acoes { flex-wrap: wrap; }
  .fim-exi { justify-content: center !important; padding-right: 0 !important; height: auto !important; margin-top: 12px; }
  .fim-exi img { height: 320px !important; }
  .fim-balao { left: 24px !important; top: 24px !important; }

  /* rodapé */
  .rod { padding-top: 56px !important; padding-bottom: 24px !important; }
  .rod-topo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px !important; }
  .rod-marca { max-width: none !important; grid-column: 1 / -1; }
  .rod-col:last-child { grid-column: 1 / -1; }
  .rod-base { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .rod-base nav { flex-wrap: wrap; gap: 12px 20px !important; }
}

@media (max-width: 560px) {
  [data-raiz] > section, [data-raiz] > footer { padding-left: 18px !important; padding-right: 18px !important; }
  .h2 { font-size: 29px !important; }
  .nav > a[href^="https://app"] { display: none; }
  .nav .btn { min-height: 40px !important; padding: 0 14px !important; font-size: 13.5px !important; }
  .m-hero { padding: 20px 18px 0 !important; }
  .m-hero-txt h1 { font-size: 38px !important; letter-spacing: -1.2px !important; }
  .m-hero-txt h1 > span { height: 44px !important; }
  .m-hero-txt > p { font-size: 16px !important; }
  .m-hero-ctas .btn { flex: 1 1 100%; }
  .m-hero-palco { zoom: .52; margin-left: 26px; }
  .m-como-palco { min-height: 300px !important; padding: 16px !important; }
  .m-como-palco .panel { zoom: .72; }
  .m-tema-mock { zoom: .31; }
  #exiia { margin: 56px 18px 0 !important; }
  .m-exi-txt { padding: 32px 22px 4px !important; }
  .m-exi-txt .h2, .fim-h { font-size: 30px !important; }
  .m-exi-bolhas { margin: 0 22px 28px !important; }
  .m-lig-mocks { zoom: .52 !important; flex-direction: column; }
  .fan { zoom: .31 !important; }
  .m-app-rot { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fim { margin: 56px 18px !important; }
  .fim-txt { padding: 32px 22px 0 !important; }
  .fim-acoes > * { flex: 1 1 100%; justify-content: center; }
  .fim-balao { display: none; }
  .fim-exi img { height: 260px !important; }
  .rod-topo { grid-template-columns: 1fr 1fr !important; }

  /* balão: só o botão redondo; o formulário ocupa a largura da tela */
  .wab { right: 16px !important; bottom: 16px !important; }
  .wab-card { display: none !important; }
  .wab-painel { position: fixed !important; left: 12px !important; right: 12px !important; bottom: 88px !important; width: auto !important; max-height: calc(100vh - 110px); overflow: auto; }
}

/* ═══ Demais páginas (segmentos e Planos) ═══
   Mesmo gerador do protótipo, mesma estrutura: as regras vão pela estrutura em vez de classes
   por página. Grades fora das telas do produto viram uma coluna; as telas do produto encolhem. */
@media (max-width: 900px) {
  body:not([data-pagina="home"]) [data-raiz] section div[style*="grid-template-columns:repeat("]:not(:is(.mock, .web, .mob, [role="img"]) *),
  body:not([data-pagina="home"]) [data-raiz] > section[style*="grid-template-columns:repeat("] { grid-template-columns: minmax(0, 1fr) !important; }
  body:not([data-pagina="home"]) [data-raiz] [style*="grid-column:span"] { grid-column: auto !important; }

  /* topo dos segmentos: texto em cima, conversa embaixo */
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] { flex-direction: column; align-items: stretch !important; padding: 28px 24px 0 !important; gap: 32px !important; }
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] > div:first-child { width: auto !important; }
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] h1 { font-size: 44px !important; letter-spacing: -1.4px !important; }
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] > div:first-child > div[style*="display:flex;gap:"] { flex-wrap: wrap; }

  /* comparação "hoje × com o ExiZap": uma coluna, o antes em cima do depois */
  .vs { grid-template-columns: minmax(0, 1fr) !important; }
  .vs > div:not(.vs-row) { display: none; }
  .vs-row { grid-template-columns: minmax(0, 1fr) !important; }
  .vs-row .r::before, .vs-row .r::after { display: none; }
  .vs-row > div { padding: 16px 20px !important; }

  /* recursos em livro-razão: número em cima */
  .frow { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px; }
  .frow::before { grid-column: 1 !important; }
  .frow > :has(.ftag), .frow > :not(:has(.ftag)) { grid-column: 1 !important; grid-row: auto !important; }
  .frow .h2, .frow h3 { font-size: 28px !important; }
  .mock { max-width: 100% !important; }

  /* segurança */
  .seg-lista { grid-template-columns: minmax(0, 1fr) !important; }

  /* Story: celular e texto empilhados */
  [data-raiz] div[style*="display:flex;gap:18px;align-items:center"]:has(> div[style*="width:210px;height:370px"]) { flex-direction: column; align-items: flex-start !important; }

  /* cabeçalhos com título à esquerda e etiqueta à direita: empilham */
  [data-raiz] div[style*="justify-content:space-between;align-items:flex-end"] { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .tbd { white-space: normal !important; }

  /* Planos */
  [data-raiz] > section[style*="text-align:center"] h1 { font-size: 36px !important; }
  .pcard { padding: 24px !important; }
  aside.card { position: static !important; }
  .row2 div[style="display:flex;gap:10px"] { flex-wrap: wrap; }
  .row2 .opt { flex: 1 1 calc(50% - 5px) !important; min-width: 0; }
  [data-raiz] section:has(> table), [data-raiz] section:has(> div > table) { overflow-x: auto; }
  [data-raiz] table { min-width: 640px; }
  [data-raiz] > section[style*="margin:96px 70px;padding:56px"] { flex-direction: column; align-items: flex-start !important; margin: 64px 24px !important; padding: 32px 24px !important; }
}
@media (max-width: 560px) {
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] { padding: 20px 18px 0 !important; }
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] h1 { font-size: 36px !important; letter-spacing: -1.1px !important; }
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] > div:first-child > div[style*="display:flex;gap:14px"] > * { flex: 1 1 100%; }
  [data-raiz] div[style*="padding:48px 70px 0;display:flex;gap:48px"] > div:nth-child(2) { zoom: .82; }
  .frow .h2, .frow h3 { font-size: 25px !important; }
  .row2 .opt { flex: 1 1 100% !important; }
  [data-raiz] > section[style*="margin:96px 70px;padding:56px"] { margin: 48px 18px !important; }
  [data-raiz] > section[style*="margin:96px 70px;padding:56px"] .btn { width: 100%; }
}

/* ═══ Tablet deitado e notebook pequeno (901–1180px) ═══
   O desenho é de 1280px e só se reorganiza até 900px; nesta faixa ele apertava (conferido em 1024px):
   a tela do produto do topo da Home e a do tema claro/escuro saíam da tela, o botão do resumo de
   Planos cortava o texto, os pacotes ficavam espremidos e o rodapé quebrava tudo em várias linhas. */
@media (min-width: 901px) and (max-width: 1180px) {
  /* topo da Home: texto em cima, produto embaixo em tamanho cheio (lado a lado não cabe) */
  .m-hero { flex-direction: column; align-items: stretch !important; padding: 44px 48px 0 !important; gap: 36px !important; }
  .m-hero-txt { width: auto !important; max-width: 720px; }
  .m-hero-palco { align-self: center; }
  .seg-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-nav::-webkit-scrollbar { display: none; }
  .seg-nav a { white-space: nowrap; }
  /* ligações: texto em cima, as duas telas embaixo (lado a lado o celular ficava fora da tela) */
  .m-lig { flex-direction: column; align-items: stretch !important; gap: 36px !important; }
  .m-lig-txt { width: auto !important; max-width: 640px; }
  .m-lig-mocks { justify-content: center !important; }
  /* claro e escuro: a tela inteira, um pouco menor */
  .m-tema-mock { zoom: .82; }
  .m-tema-ctrl { width: 100% !important; }
  /* Planos: o montador na largura toda, o resumo embaixo */
  #monte div[style*="grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start"] { grid-template-columns: minmax(0, 1fr) !important; }
  #monte div[style*="grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start"] > * { grid-column: auto !important; }
  #monte aside.card { position: static !important; }
  .pcard > span[style*="font-size:44px"] { font-size: 38px !important; white-space: nowrap; }   /* o "/mês" caía para a linha de baixo */
  /* rodapé: a marca numa linha, as três colunas embaixo */
  .rod-topo { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 36px !important; }
  .rod-marca { max-width: none !important; grid-column: 1 / -1; }
}