/* responsive-mobile.css — solo móvil (<1024px), PC (lg: 1024px+) queda intacto tal cual HEAD */
@media (max-width: 1023px) {
  /* Tipografía: bajar 30px→20px, 36px→24px sin tocar lg: */
  .text-3xl { font-size: 1.25rem !important; line-height: 1.35 !important; }
  .text-4xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .text-5xl { font-size: 1.875rem !important; line-height: 1 !important; }
  /* Hero 4 líneas que eran text-3xl en móvil se ven enanas si quedan 16px */
  .hero-seq-2 { font-size: 1.25rem !important; line-height: 1.35 !important; }

  /* Ancho: evitar scroll por w-screen en móvil */
  .w-screen { width: 100% !important; margin-left: 0 !important; max-width: 100% !important; left: auto !important; }

  /* Nowrap: en móvil envolver */
  .whitespace-nowrap { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; }

  /* Espaciado: py-10/15 es 40-60px en móvil → 24px */
  section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-15, .py-10, .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .pt-10, .pt-12 { padding-top: 1.5rem !important; }
  .pb-10, .pb-12 { padding-bottom: 1.5rem !important; }
  .mb-12, .mb-10, .mb-8, .mb-6 { margin-bottom: 1rem !important; }
  .mt-12, .mt-10, .mt-8 { margin-top: 1rem !important; }
  .gap-6, .gap-8 { gap: 1rem !important; }
  .space-y-6 { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))) !important; }

  /* FAQ y cards: padding grande en móvil */
  .faq-toggle { padding: 1rem !important; }
  .p-8 { padding: 1rem !important; }

  /* Variantes sm: que ganan al override base entre 640-1023px */
  .sm\:text-3xl { font-size: 1.25rem !important; line-height: 1.35 !important; }
  .sm\:text-4xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .sm\:text-5xl { font-size: 1.875rem !important; line-height: 1.1 !important; }
  .sm\:px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .sm\:py-12 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  /* Cuerpo text-2xl fijo (24px) → legible en móvil/tablet */
  .text-2xl { font-size: 1.125rem !important; line-height: 1.4 !important; }

  /* Respuestas FAQ y bloques con px-8 (32px/lado) */
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Tabs Día/Noche: permitir wrap como seguridad anti-desborde */
  #ingredientes div:has(> .formula-tab) { flex-wrap: wrap !important; }

  /* Hero H1: styles.css lo sube a 3rem/3.5rem en ≥640px → tope tablet */
  .hero-headline { font-size: 2.25rem !important; line-height: 1 !important; }
}
@media (max-width: 640px) {
  /* Extra pequeño 375px: aún más compacto */
  .text-3xl { font-size: 1.125rem !important; }
  .text-4xl { font-size: 1.35rem !important; }
  .text-5xl { font-size: 1.5rem !important; line-height: 1.15 !important; }
  .text-2xl { font-size: 1rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* CTA final: px-12 (96px) desborda en 375px */
  .px-12 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  /* Hero: interlineado 2.5 crea huecos de medio viewport */
  .leading-\[2\.5\] { line-height: 1.6 !important; letter-spacing: normal !important; }
  /* Foto médica: tope 500px → 300px */
  .max-h-\[500px\] { max-height: 300px !important; }
  /* Hero H1: 36px → 28px */
  .hero-headline { font-size: 1.75rem !important; line-height: 1.05 !important; }
}