/* Ajustes de móvil para la portada. Capa aparte: no altera style.css. */

@media (max-width: 760px) {
  /* Zonas táctiles: los enlaces del pie medían 16px de alto. */
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .hero-scroll, a[class*="scroll"], .hero a { min-height: 44px; }

  /* Legibilidad: rótulos en versalitas al mínimo, conservando el tracking. */
  .eyebrow, .header-note, .footer-note, .card-note { font-size: 13px; }
  .site-footer, .site-footer a { font-size: 13.5px; }
}

/* Rótulos por debajo de 12px en el móvil. «Guías para pacientes» estaba a
   10px y «Dos guías, un mismo propósito» a 11px: en un teléfono se leen mal.
   Se suben al mínimo cómodo sin tocar su estilo. */
@media (max-width: 900px) {
  /* Hay que repetir los selectores compuestos del original: `.hero .eyebrow`
     (10px) y `.section-heading .eyebrow` (11px) ganan por especificidad a un
     `.eyebrow` suelto. */
  .hero .eyebrow,
  .section-heading .eyebrow { font-size: 12px; }
}