/* ==========================================================================
   CrediListo — responsive.css (v2)
   Ajustes finos encontrados en QA para el rediseño.
   ========================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }

/* Pantallas muy pequeñas: hero-stats a 2 columnas, tercera ocupa el ancho */
@media (max-width: 380px) {
  .container { padding-inline: var(--space-3); }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .hero-stat:last-child { grid-column: span 2; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* La sticky-media de Nosotros no debe quedar "pegada" en mobile (poco espacio) */
@media (max-width: 979px) {
  .about-media { position: static; margin-bottom: var(--space-4); }
}

/* El wordmark decorativo del footer es demasiado grande/pesado en mobile */
@media (max-width: 620px) {
  .footer-wordmark { display: none; }
}

/* Evitar que el blob decorativo del hero provoque overflow horizontal */
@media (max-width: 720px) {
  .hero-blob { right: -30%; opacity: 0.6; }
}

/* Pantallas grandes: limitar longitud de línea del lead del hero */
@media (min-width: 1280px) {
  .hero-copy .lead { max-width: 50ch; }
}