/* =====================================================================
   RESPONSIVE — adapta a reconstrução (estilos inline) a qualquer tela.
   Técnica: seletor de atributo + !important vence o inline do protótipo,
   sem reeditar cada seção. Tablet <=900px, telefone <=600px.
   Preserva 100% da estética validada — só reflui.
   ===================================================================== */

/* ---- TABLET e abaixo: grids de coluna fixa viram UMA coluna ---- */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="minmax(0,1fr) minmax(0,1fr)"],
  [style*="minmax(0,1fr) minmax(0,1.05fr)"],
  [style*="minmax(0,1fr) minmax(0,1.08fr)"],
  [style*="minmax(0,1fr) minmax(0,1.02fr)"],
  [style*="minmax(0,1fr) minmax(0,1.1fr)"],
  [style*="minmax(0,1.05fr) minmax(0,.95fr)"],
  [style*="minmax(0,.8fr) minmax(0,1.2fr)"],
  [style*="minmax(0,.85fr) minmax(0,1.15fr)"],
  [style*="minmax(0,.9fr) minmax(0,1.1fr)"],
  [style*="minmax(0,5fr) minmax(0,7fr)"],
  [style*="minmax(280px,360px) minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Cases "O que foi talhado" (cgrid): grid por CLASSE (à prova de reformatação
     do atributo style por cache/otimização) — 1 coluna no tablet/celular. */
  .cgrid { grid-template-columns: 1fr !important; }

  /* gaps grandes de duas colunas encolhem quando empilham */
  [style*="display:grid"][style*="gap:clamp(2.4rem"],
  [style*="display:grid"][style*="gap:clamp(2.2rem"] {
    gap: clamp(1.8rem, 5vw, 2.6rem) !important;
  }

  /* Seções full-height: nunca cortam conteúdo — crescem se precisar */
  .home-section,
  section[style*="height:100svh"],
  main[style*="height:100svh"] {
    height: auto !important;
    min-height: 100svh;
  }
}

/* ---- TELEFONE: respiro lateral menor, tipografia e alvos de toque ---- */
@media (max-width: 600px) {
  /* padding lateral das seções (o clamp já ajuda; reforço o mínimo) */
  section[style*="padding:clamp"],
  main[style*="padding:clamp"],
  .site-footer__inner {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  /* títulos gigantes: teto menor pra não estourar a largura */
  h1[style*="clamp"], h2[style*="clamp"] { letter-spacing: -.03em; }

  /* grids decorativos de pontos: caem pra menos colunas (legível no toque) */
  .dor-grid { grid-template-columns: repeat(25, 1fr) !important; }
  .field[style*="repeat(14"] { grid-template-columns: repeat(10, 1fr) !important; }

  /* cartões e listas que ainda usem 2 colunas no miolo */
  [style*="grid-template-columns:repeat(auto-fit,minmax(248px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(250px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(320px"] {
    grid-template-columns: 1fr !important;
  }

  /* Cases "E ainda" (agrid): 1 coluna no celular e nenhum card pode ocupar
     2 trilhas (o Vitão tinha grid-column:span 2 e estourava pra lateral).
     Por CLASSE pra não depender de casar o atributo style. */
  .agrid { grid-template-columns: 1fr !important; }
  .agrid > * { grid-column: auto !important; }

  /* mesma proteção, agora via atributo, pra qualquer outra seção */
  [style*="grid-column:span 2"] { grid-column: auto !important; }

  /* Sobre · "O conceito": o ciclo (4 passos + setas) empilha um sobre o outro
     e as setas apontam pra baixo (giram 90°). Sem isto fica espremido. */
  .flow { flex-direction: column !important; align-items: stretch !important; }
  .flow .flowarrow { transform: rotate(90deg); align-self: center; height: 1.4rem; }

  /* qualificador do formulário (2 col) -> 1 col, alvo de toque maior */
  .yep-lead form [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .qbtn { padding: .85rem .6rem !important; }

  /* alvos de toque: botões e chips com altura confortável */
  .btn, .cl-cta, .submitbtn, .readybtn { width: auto; }
  .submitbtn { padding: 1rem !important; }

  /* gráfico da calculadora: mais alto no retrato pra caber rótulos */
  [style*="aspect-ratio:16/11"] { aspect-ratio: 4/3 !important; max-height: 52svh !important; }

  /* o vídeo-telefone centraliza e respeita a largura */
  figure[style*="aspect-ratio:404/720"] { max-width: 260px !important; }

  /* tabela de chips do menu mobile já tratada na base; reforço de z-index do header */
  .site-header { padding: .85rem 1.15rem !important; }
}

/* ---- evitar overflow horizontal em qualquer tela ---- */
@media (max-width: 900px) {
  /* clip (não hidden): corta o estouro horizontal sem criar container de scroll,
     preservando o position:sticky dos filhos (rail do catálogo). */
  html, body { max-width: 100%; overflow-x: clip; }
  img, svg, video, figure { max-width: 100%; }
}