/* ==========================================================================
   Ajustes responsive adicionales (mobile-first; la mayoría de componentes
   ya definen sus propios breakpoints junto a la regla base)
   ========================================================================== */

/* Móvil pequeño: evitar que el botón flotante de WhatsApp tape el CTA final */
@media (max-width: 480px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .hero__title { max-width: 100%; }

  .price-card__badge {
    left: 50%;
    transform: translateX(-50%);
  }

  .founder-card__media { max-width: 220px; margin-inline: auto; }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 420px; margin-inline: auto; }
}

/* Pantallas grandes: limitar longitud de línea del contenido narrativo */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* Asegurar que ningún elemento provoque scroll horizontal */
img, table, pre, .container { max-width: 100%; }

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}