/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL · legibilidad y dedo · 4-sep-2026

   Los suelos del teléfono viven AQUÍ y en ningún otro sitio.

   Antes estaban repartidos entre joy.css (corta en 768, 680, 480 y 400),
   tienda.css (680, 900, 899, 768, 560 y 520) y mundo.css. Diez cortes en
   seis hojas, pisándose. El resultado medido el 4-sep en un teléfono de
   390 px: 52 textos de cuerpo por debajo de 15 px, algunos a 10,24 px, y
   14 botones por debajo de 44 px de alto.

   La regla que ordena esta hoja: **un solo corte, 768 px**, y solo dos
   cosas dentro, las que se pueden medir sin opinar:

     · nada que se lea baja de 15 px
     · nada que se pulse baja de 44 px de alto

   Va después de joy/mundo/tienda/viaje/dual y antes de movimiento.css,
   que sigue siendo la última porque es la puerta de salida del movimiento.

   `scripts/verify-movil.mjs` comprueba las dos reglas en 360, 390 y 412 y
   revienta el build si alguien las rompe. Si vas a bajar un número de
   aquí, vas a tener que bajarlo también allí, y eso se ve en el diff.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px){

  /* ── 1 · Lo que se lee, a 15 px o más ─────────────────────────────────
     No es cosmética. CLAUDE.md pide 17 px de cuerpo en móvil; 15 es el
     suelo duro por debajo del cual directamente no se lee al sol. Las
     etiquetas cortas (referencias, badges, índices de ruta) se quedan
     pequeñas a propósito: son señales, no lectura, y están exentas
     también en el verificador. */

  /* Las viñetas de las tarjetas son el bloque más leído del catálogo y
     estaban a 13,12. Son 27 de los 52 fallos.

     Y hay que soltarles el recorte. tienda.css:204 las corta a DOS líneas
     con -webkit-line-clamp. Con 13,12 px cabían justas; a 15 px la frase se
     pasa y el navegador la parte a media palabra: «si va en CLAUDE.md, en
     una skill,…». Una viñeta de venta cortada en seco vende menos que una
     tarjeta tres centímetros más alta, así que en el teléfono se quita el
     recorte. En escritorio sigue igual: allí caben las dos líneas. */
  .gcard__puntos li{
    font-size: 15px; line-height: 1.55;
    display: block;
    -webkit-line-clamp: none; line-clamp: none;
    overflow: visible;
  }

  /* Misma historia con la promesa: cuatro líneas de recorte que a 15,5 px
     se quedan cortas. */
  .gcard__promesa,
  .gcard--ancla .gcard__promesa{
    display: block;
    -webkit-line-clamp: none; line-clamp: none;
    overflow: visible;
  }

  /* Ficha técnica de cada tarjeta: estaban a 10,24 y 10,88. Diez píxeles
     es tamaño de letra pequeña de contrato, y aquí dice lo que compras. */
  /* A 15 px, en versalitas y con el interletraje de escritorio, estas tres
     líneas ocupaban cuatro renglones y le gritaban a la promesa. Se les
     quita el espaciado extra: el tamaño es innegociable, el aire no. */
  .gcard__spec,
  .gcard__ext,
  .gcard__entrega{
    font-size: 15px; line-height: 1.5;
    letter-spacing: .01em;
  }

  /* La promesa es la frase que vende la tarjeta. Va un punto por encima
     del suelo para que gane al resto del bloque. */
  .gcard__promesa{ font-size: 15.5px; line-height: 1.55; }

  /* La lista de lo que llevas dentro del pack. Es la letra que se lee
     justo antes de pagar, así que no puede ir a 14,72. */
  .bundle-lista li{ font-size: 15px; line-height: 1.55; }

  /* Entradilla y notas del hero, prueba, pack, regalo y pie. */
  .hero-eyebrow,
  .hero-note,
  .bundle-note,
  .bundle-note-exclusivo,
  .gift-ps,
  .footer-contact-info{ font-size: 15px; line-height: 1.55; }

  /* Los últimos cuatro párrafos sin clase: la frase de confianza justo
     antes de pagar y las tres líneas del pie. Estaban entre 12,8 y 14,4. */
  .bundle-trust > p,
  .footer-brand > p,
  .footer-bottom > p{ font-size: 15px; line-height: 1.55; }

  /* .prueba__pie se define en el <style> en línea de index.html (línea 935),
     que va DESPUÉS de todos los <link> y por tanto gana a esta hoja. Se sube
     la especificidad con el contenedor en vez de recurrir a !important:
     0,2,0 contra 0,1,0 basta y deja el origen del valor donde estaba. */
  .prueba .prueba__pie{ font-size: 15px; line-height: 1.55; }

  /* ── 2 · Lo que se pulsa, 44 px de alto ───────────────────────────────
     44 es el mínimo con el que un pulgar acierta. Se consigue con
     min-height y centrado, nunca inflando la tipografía: el texto se
     queda como está y crece la zona de acierto.

     Los enlaces EN LÍNEA dentro de un párrafo quedan fuera a propósito
     (WCAG 2.5.8 los exime): estirarlos rompería el interlineado. */

  .topbar-logo,
  .btn-ghost,
  .filtro,
  .gcard__ficha,
  .enlace-regalo,
  .footer-links a,
  .footer-links button{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Los filtros del catálogo van en fila y necesitan además aire lateral
     para no quedar pegados unos a otros. */
  .filtro{ justify-content: center; padding-inline: .9rem; }

  /* El pie los apila: que ocupen su línea entera y sean fáciles de dar. */
  .footer-links a,
  .footer-links button{ width: fit-content; }
}