* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  /* Los brillos decorativos miden más que un teléfono: sin esto la página se arrastra a los costados. */
  overflow-x: hidden;
  overflow-x: clip;
  background: #150c26;
  font-family: "Outfit", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
a {
  color: #e0b94a;
  text-decoration: none;
}
a:hover {
  color: #f0d68a;
}
::selection {
  background: #e0b94a;
  color: #150c26;
}

/* Responsive: el diseño se trabajó a 1200px. Estas reglas apilan las grillas en pantallas chicas.
   Al pasar a componentes, reemplázalas por clases propias. */
@media (max-width: 960px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  section,
  header,
  footer {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  #origen > div {
    padding: 36px 24px !important;
  }
  h1 {
    font-size: clamp(38px, 9vw, 56px) !important;
  }
  h2 {
    font-size: clamp(30px, 7vw, 42px) !important;
  }
}
@media (max-width: 720px) {
  header nav > a {
    display: none;
  }
  header nav {
    gap: 10px !important;
  }
  /* En el teléfono, el botón de Google Play de arriba va centrado (Nora, 2026-11-07). */
  .hero-cta {
    justify-content: center;
  }
}