/* Ajustes de produção — Rainha do Like (carregado depois de premium-home.css) */

/* 1) Mobile: texto do hero antes do foguete */
@media (max-width: 1023.98px) {
  #hero .grid > div:first-child { order: 1 !important; }
  #hero .grid > div:nth-child(2) { order: 2 !important; }
  #hero .grid { row-gap: 1.75rem; }
}

/* 2) Nunca deixar a página rolar na horizontal */
html, body { max-width: 100%; overflow-x: hidden; }

/* 3) Botões e links com área de toque confortável no celular */
@media (max-width: 640px) {
  a, button, [role="button"] { min-height: 44px; }
  .container { padding-left: 1rem; padding-right: 1rem; }
}

/* 4) Acessibilidade: foco visível e respeito a "reduzir movimento" */
:focus-visible {
  outline: 2px solid #d946ef;
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5) Imagens sempre sem estouro de largura */
img, video { max-width: 100%; height: auto; }

/* 6) Legibilidade do texto de apoio no mobile */
@media (max-width: 640px) {
  #hero p { font-size: 1rem; line-height: 1.6; }
}