/* ------------------------------------------------------------------
   Ajustes responsive sobre el build original de Figma Make.
   El original no trae ni una media query y sus estilos son inline,
   por eso estas reglas van con !important.
   Nada de esto cambia cómo se ve en escritorio.
   ------------------------------------------------------------------ */

/* 1. El titular del hero venía con font-size: 70px fijo y se recortaba
      contra el borde. Sobre ~540px el clamp devuelve 70px otra vez,
      así que el escritorio queda idéntico. */
h1[style*="font-size: 70px"] {
  font-size: clamp(2.25rem, 13vw, 70px) !important;
}

@media (max-width: 900px) {
  /* 2. LA CAUSA DEL TEXTO MONTADO: al colapsar a una columna, el bloque
        del título seguía pegado con position:sticky y el formulario le
        pasaba por debajo. */
  [style*="top: 80px"] {
    position: static !important;
  }
}

@media (max-width: 560px) {
  /* 3. Nombre y Apellido, uno debajo del otro. */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 4. Siete tallas no caben en una fila de teléfono: dos filas de cuatro. */
  [style*="repeat(7, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* 5. Menos aire: en móvil 6rem de padding es media pantalla perdida. */
  section[style*="padding: 6rem 1.5rem"] {
    padding: 3.5rem 1.25rem !important;
  }
  [style*="gap: 4rem"] {
    gap: 2.5rem !important;
  }
}

/* Red de seguridad: que nada provoque scroll horizontal. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}