/* WCAG 2.2 AA — evitar scroll horizontal involuntário em viewports estreitos */
html {
  overflow-x: clip;
}

main {
  max-width: 100%;
  overflow-x: clip;
}

main img,
main video,
main iframe {
  max-width: 100%;
  height: auto;
}

.hero,
.op-hero,
.op-hero-copy,
.hero-pillars,
.proof,
.product-grid,
.section,
.content-section {
  max-width: 100%;
}

.op-hero {
  overflow-x: clip;
}

/* WCAG 2.5.5 — alvos de toque mínimos 44×44px */
button.menu-toggle,
.icon-btn.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .proof {
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  .hero-copy,
  .op-hero-copy {
    padding-inline: 1rem;
  }

  .op-hero-copy .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .op-hero-copy .actions .button {
    width: 100%;
    text-align: center;
  }

  .hero-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-inline: 0.5rem;
  }

  .proof {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-inline: 0.5rem;
    overflow-x: auto;
    max-width: 100%;
  }

  .op-section,
  .section,
  .content-section {
    padding-inline: 0.75rem;
  }
}

/* WCAG 2.2 AA — indicadores de foco visíveis (2.4.7, 2.4.11) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--vr-blue, #2f6fed);
  outline-offset: 2px;
}

.skip-link:focus-visible {
  outline: 3px solid var(--vr-white, #fff);
  outline-offset: 2px;
}