/* ═══════════════════════════════════════════════════════════════
   Grupo Cerrado — camada responsiva.

   O site é escrito com estilo inline no React, então a única forma
   de sobrescrever é com !important. Os seletores casam com o texto
   que o React grava no atributo style — que é a serialização do
   CSSOM, estável e definida em spec (ex.: 'repeat(4,1fr)' sempre
   vira 'repeat(4, 1fr)').

   Vantagem: corrige as 8 páginas de uma vez, sem editar JSX.
   Ao criar seção nova, use um dos padrões de grid já listados aqui.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET  ≤ 1024px ───────────────────── */
@media (max-width: 1024px) {

  /* respiro lateral: só os lados, preserva o vertical do shorthand */
  [style*="max-width: 1180px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* grids de cards */
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* divisões em duas colunas viram uma só */
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.35fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* rodapés */
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1.5fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr"]     { grid-template-columns: 1fr 1fr !important; }

  /* títulos */
  h1[style] { font-size: 48px !important; }
  h2[style] { font-size: 36px !important; }

  /* imagens de largura fixa */
  image-slot {
    width: 100% !important;
    max-width: 100% !important;
    height: 280px !important;
  }
}

/* ───────────────────────── CELULAR  ≤ 640px ───────────────────── */
@media (max-width: 640px) {

  [style*="max-width: 1180px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* tudo em coluna única */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="display: grid"] { gap: 16px !important; }

  /* tipografia: o display condensado aguenta ficar grande, mas não tanto */
  h1[style] { font-size: 34px !important; line-height: 1.04 !important; }
  h2[style] { font-size: 25px !important; line-height: 1.12 !important; }
  h3[style] { font-size: 18px !important; }

  /* números grandes (stats, etapas) — são divs, não headings */
  [style*="font-size: 72px"], [style*="font-size: 66px"],
  [style*="font-size: 64px"], [style*="font-size: 62px"],
  [style*="font-size: 58px"]  { font-size: 34px !important; }
  [style*="font-size: 54px"], [style*="font-size: 52px"],
  [style*="font-size: 50px"], [style*="font-size: 48px"],
  [style*="font-size: 46px"], [style*="font-size: 44px"],
  [style*="font-size: 42px"]  { font-size: 28px !important; }

  /* corpo de texto: encolhe o suficiente para não virar parede */
  [style*="font-size: 19px"], [style*="font-size: 18px"] { font-size: 16px !important; }
  [style*="font-size: 17px"] { font-size: 15.5px !important; }

  /* respiro vertical: 92px vira exagero em tela pequena */
  [style*="padding: 92px 40px"]      { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 88px 40px"]      { padding-top: 54px !important; padding-bottom: 54px !important; }
  [style*="padding: 84px 40px 96px"] { padding-top: 48px !important; padding-bottom: 56px !important; }
  [style*="padding: 88px 40px 0px"]  { padding-top: 48px !important; }
  [style*="padding: 76px 40px 92px"] { padding-top: 44px !important; padding-bottom: 54px !important; }

  /* botões grandes cabem melhor menores, e podem quebrar linha */
  [style*="padding: 18px 34px"] {
    padding: 15px 22px !important;
    font-size: 15px !important;
    white-space: normal !important;
  }
  [style*="padding: 14px 26px"] { padding: 13px 20px !important; }

  /* botões lado a lado ocupam a linha inteira */
  [style*="display: flex"][style*="gap: 14px"] > a,
  [style*="display: flex"][style*="gap: 14px"] > button { flex: 1 1 100% !important; }

  image-slot { height: 210px !important; }

  /* cards mais justos */
  [style*="padding: 36px"] { padding: 22px !important; }
  [style*="padding: 30px"] { padding: 20px !important; }
  [style*="padding: 28px"] { padding: 20px !important; }

  /* rodapé: o bloco final de copyright empilha */
  [style*="border-top: 1px solid"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ──────────────────── Menu mobile (hambúrguer) ────────────────── */
.ce-burger { display: none; }

@media (max-width: 860px) {
  .ce-nav-desk { display: none !important; }
  .ce-burger   { display: inline-flex !important; }
  .ce-cta-desk { display: none !important; }
}

/* o painel só existe no mobile */
@media (min-width: 861px) {
  .ce-nav-mob { display: none !important; }
}

/* ───────── Barra institucional no mobile ──────────────────────
   As divisoes ja estao no menu hamburguer com os submenus. Aqui
   sobra so o '<- Grupo Cerrado', que e a funcao critica da barra. */
@media (max-width: 860px) {
  .ce-gb-nav { display: none !important; }
}

/* ───────────────── Painel de tweaks atrapalha no mobile ───────── */
@media (max-width: 860px) {
  [data-tweaks] { display: none !important; }
}