/* ============================================================
   Mobile responsive overrides — Core 7 Capital
   Aplicado em telas <= 768px. Sobrescreve estilos inline do JSX.
   ============================================================ */

@media (max-width: 768px) {

  /* Reduz padding lateral global das sections */
  section, footer, nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Reduz padding vertical exagerado das sections */
  section[id="s0"],
  section[id="processo"],
  section[id="faq"],
  section[id="contact"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* Hero: tira altura mínima exagerada */
  section[style*="minHeight: 680px"],
  section[style*="min-height: 680px"] {
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* === GRIDS: empilha tudo em coluna única === */
  div[style*="grid-template-columns"],
  div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* === Larguras fixas viram fluidas === */
  div[style*="width: 1400px"],
  div[style*="width:1400px"],
  div[style*="width: 1280px"],
  div[style*="width: 1200px"],
  div[style*="width: 960px"],
  div[style*="width: 900px"],
  div[style*="width: 800px"],
  div[style*="width: 760px"],
  div[style*="width: 720px"],
  div[style*="width: 420px"],
  div[style*="width: 420"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* maxWidth fixos - deixa fluido */
  div[style*="max-width: 1400"],
  div[style*="max-width: 1280"],
  div[style*="max-width: 1200"],
  div[style*="max-width: 1100"],
  div[style*="max-width: 1000"],
  div[style*="max-width: 960"],
  div[style*="max-width: 900"],
  div[style*="max-width: 800"],
  div[style*="max-width: 760"],
  div[style*="max-width: 720"] {
    max-width: 100% !important;
  }

  /* Calculator sticky vira normal no mobile */
  div[style*="position: sticky"][style*="width: 420"] {
    position: static !important;
    width: 100% !important;
  }

  /* === NAV (Header) === */
  nav {
    padding: 8px 16px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Esconde links de navegação centrais — mantém só logo + botão */
  nav > div:nth-of-type(1) {
    display: none !important;
  }

  /* Esconde ticker USDT/BRL no header (gargalo de espaço) */
  nav > div:last-of-type > div:first-of-type {
    display: none !important;
  }

  /* === Tipografia mais contida === */
  h1, h2 {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
  }

  /* "Eyebrows" (labels mono "INSTITUCIONAL", "COMO OPERAMOS", etc.):
     no desktop ficam absolutos no canto; no mobile vão pro fluxo do
     documento (position:static) e precisam de espaço até o título seguinte */
  .c7-eyebrow {
    position: static !important;
    margin-bottom: 32px !important;
    display: block !important;
  }

  /* === Cards de processo / numeração === */
  /* Os steps "01 02 03 04" empilham em coluna no mobile */

  /* Esconde a animação SVG das linhas que conectam os steps 01→02→03→04
     (em coluna única, as linhas horizontais ficam absurdas) */
  section[id="processo"] svg[style*="position: absolute"] {
    display: none !important;
  }

  /* === FAQ: aumenta o "+" para ficar bem visível em mobile === */
  section[id="faq"] h4 + span,
  section[id="faq"] div > span[style*="rotate"] {
    font-size: 28px !important;
    width: 32px !important;
    text-align: center !important;
  }

  /* === Métricas (100%, ≤5min, 24/7, R$500): mostra "+" em mobile === */
  /* No desktop os textos abrem com hover; em mobile viram cards expansíveis */
  .c7-metric-toggle {
    display: block !important;
  }

  /* === Live panel: gráfico (Sparkline) escala dentro da caixa === */
  /* O Sparkline tem width fixo via atributo SVG width=500 — força a se
     adaptar à caixa. Já tem viewBox para escalar corretamente. */
  section svg[width="500"],
  section svg[width="120"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Preço grande "R$ X,XXXX" tem width:300px inline — libera */
  div[style*="width: 300px"] {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(36px, 10vw, 56px) !important;
  }

  /* === Tabela de pillars / metrics: vira lista === */

  /* === Footer === */
  footer {
    padding: 48px 20px 32px !important;
  }

  /* === Botão Back-to-Top: menor === */
  button[aria-label="Voltar ao topo"] {
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* === Botão PT/EN: menor e canto === */
  body > div + button[style*="position: fixed"] {
    bottom: 16px !important;
    left: 16px !important;
    padding: 8px 14px !important;
  }

  /* Inputs do form: largura total */
  input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* SVGs grandes (charts/illustrations) — cap na largura */
  svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Permite scroll horizontal interno onde realmente precisar (tabelas/charts) */
  div[style*="overflow: auto"],
  div[style*="overflowX: auto"] {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Tablet pequeno — ajustes mais leves */
@media (min-width: 769px) and (max-width: 1024px) {
  section, footer, nav {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  div[style*="grid-template-columns: repeat(4"],
  div[style*="gridTemplateColumns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}