/* Mobile fixes for Claude Design runtime pages. Inline styles need !important. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 760px) {
  [data-screen-label="WhatsApp flutuante"] {
    display: none !important;
  }

  header[data-screen-label="Navegação"] > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 72px !important;
    padding: 0 22px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  header[data-screen-label="Navegação"] nav {
    gap: 0 !important;
    margin-left: auto !important;
  }

  header[data-screen-label="Navegação"] nav a:not(:last-child) {
    display: none !important;
  }

  header[data-screen-label="Navegação"] nav a:last-child {
    padding: 10px 14px !important;
    font-size: 14px !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }

  header[data-screen-label="Navegação"] img {
    height: 26px !important;
    max-width: 168px !important;
  }

  [data-screen-label] {
    overflow-x: clip !important;
  }

  [style*="max-width: 1280px"],
  [style*="max-width: 1080px"],
  [style*="max-width: 880px"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  [style*="padding: 0 32px"],
  [style*="padding: 150px 32px"],
  [style*="padding: 160px 32px"],
  [style*="padding: 0 32px;"],
  [style*="padding: 150px 32px 100px"],
  [style*="padding: 160px 32px 110px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  section > [style*="padding: 150px 32px"],
  section > [style*="padding: 160px 32px"] {
    padding-top: 118px !important;
    padding-bottom: 76px !important;
  }

  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  [style*="display: grid"][style*="repeat(3"],
  [style*="display: grid"][style*="repeat(4"],
  [style*="display: grid"][style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  h1[style*="Barlow Condensed"] {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: .96 !important;
  }

  h2[style*="Barlow Condensed"] {
    font-size: clamp(36px, 11vw, 54px) !important;
    line-height: .98 !important;
  }

  p[style*="font-size: 28px"] {
    font-size: 23px !important;
    line-height: 1.18 !important;
  }

  [style*="display: flex"][style*="gap: 16px"] > a,
  [style*="display: flex"][style*="gap: 14px"] > a,
  a[style*="padding: 19px 36px"],
  a[style*="padding: 18px 36px"],
  a[style*="padding: 18px 34px"] {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  [style*="width: 320px"] {
    width: min(320px, 100%) !important;
  }

  [style*="right: -28px"],
  [style*="left: -28px"],
  [style*="left: -20px"],
  [style*="right: -20px"] {
    left: 12px !important;
    right: 12px !important;
  }

  [style*="position: absolute"][style*="bottom: 32px"],
  [style*="position: absolute"][style*="bottom: 24px"] {
    position: static !important;
    margin-top: 16px !important;
    display: inline-block !important;
  }

  [style*="width: 140px"][style*="linear-gradient"] {
    width: 64px !important;
  }

  [id="lc-marquee"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  [id="lc-marquee"] span {
    min-width: 0 !important;
    width: 100% !important;
  }

  .reveal-init[data-reveal="left"],
  .reveal-init[data-reveal="right"] {
    transform: translateY(32px) !important;
  }
}


/* =========================================================
   FIX (2026-06-15): nas páginas DC o runtime (support.js) renderiza dentro de um
   container próprio, então o scroll da janela nunca dispara e a animação de reveal
   deixa ~90% das seções presas em opacity:0 (seções aparecem em branco).
   Forçamos visibilidade — sobrepõe o inline opacity:0 setado pelo JS de reveal.
   ========================================================= */
[data-reveal] { opacity: 1 !important; transform: none !important; }