/* ============================================================
   Beniparrell C.F. — Tacto y legibilidad en móvil
   ------------------------------------------------------------
   Una auditoría con medidas reales (no a ojo) encontró el mismo
   patrón en TODAS las páginas: enlaces de texto de 14–29 px de
   alto —imposibles de acertar con el dedo— y etiquetas por
   debajo de 11 px, ilegibles.

   La referencia del oficio son 44×44 px de zona de toque (guía
   de interfaz de Apple, y WCAG 2.5.8 exige 24 como mínimo) y
   ~11 px de letra. Aquí se sube el área SIN cambiar el diseño:
   los enlaces sueltos crecen por dentro con padding, así que
   el texto se ve igual y el dedo tiene dónde caer.

   Solo en pantallas de dedo: en escritorio, con ratón, no hace
   falta y se dejan los tamaños originales.
   ============================================================ */

@media (max-width: 760px), (pointer: coarse) {

  /* --- 1) enlaces de navegación y acciones sueltas --- */
  a.nav-back, a.back, a.act-all, a.nav-account, a.legal-link,
  a[href^="tel:"], a[href^="mailto:"] {
    /* inline-flex mantiene el enlace en su línea pero le da caja */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Enlaces de texto allá donde vivan: dentro de un párrafo no se pueden
     inflar sin romper el renglón, así que se les da holgura vertical. El
     padding SÍ agranda la zona de toque aunque el enlace siga siendo inline,
     y funciona incluso cuando el elemento trae un min-height en su atributo
     style (que ganaría a cualquier regla de aquí). */
  p a, li a, small a, .prose a, .toc a, .footer a, .ft-legal a,
  .ct-val a, td a, nav a, .auth-hint a, .legal a,
  footer a, .wrap > a, .breadcrumb a {
    padding-block: 8px;
  }

  /* Enlaces SUELTOS del pie (no van dentro de una frase): estos sí pueden
     crecer de verdad sin descolocar nada. El !important es para ganar a los
     `min-height:auto` que algunos traen en su atributo style. */
  footer a, .ft-legal a, .ft-links a {
    min-height: 34px !important;
    display: inline-flex;
    align-items: center;
  }
  /* los que ya son bloque no necesitan más que el mínimo de altura */
  .toc a { min-height: 40px; display: flex; align-items: center; padding-block: 4px; }

  /* --- 2) botones que se quedaban cortos --- */
  a.btn-r, a.btn-w, a.btn-ghost, a.sticky-cta-btn,
  button.btn-r, button.btn-w {
    min-height: 44px;
  }

  /* --- 3) letra legible: nada por debajo de 11 px --- */
  .nav-sub, .adn-label, .sp-main-badge, .sp-card-name,
  .ft-brand-sub, .sb-l, .cat-age, .auth-hint small, .login-sub small,
  .auth-pick small, .auth-pick-btn small {
    font-size: 11px !important;
    letter-spacing: .08em;   /* a este tamaño, el espaciado es lo que salva la lectura */
  }
}

/* En pantallas muy estrechas el texto largo debe poder partirse:
   un correo o una URL sin espacios empujaba la caja y descuadraba. */
@media (max-width: 400px) {
  a[href^="mailto:"], .ft-brand-sub, .sp-card-name { overflow-wrap: anywhere; }
}