/* movil.css — Lo que el teléfono necesita y el escritorio no.
 *
 * Va al final de la cascada a propósito: el sitio se diseñó primero para
 * escritorio, y reescribirlo entero mobile-first ahora sería arriesgar todo lo
 * que ya funciona. Esto corrige lo que de verdad estorba en un teléfono, que es
 * medible y no opinable.
 */

@media (max-width: 767px) {

  /* ── 1. El fallo grande: iOS hace ZOOM al tocar un campo con letra < 16 px ──
     Y al hacer zoom se queda ahí: la persona tiene que pellizcar para volver a
     ver la página. Había 27 campos así. 16 px no es un capricho de diseño, es
     el umbral exacto a partir del cual Safari deja de hacerlo. */
  input, select, textarea,
  .vcard-form input, .vcard-form textarea, .vcard-form select,
  .reja-perfil input, .reja-perfil textarea,
  .slug-caja input, .contacto-form input, .contacto-form textarea, .contacto-form select,
  .modal-caja input, .modal-caja textarea, .fila-destino input {
    font-size: 16px !important;
  }
  .slug-caja > span { font-size: 16px; }

  /* ── 2. Nada por debajo de 44 px de alto ──────────────────────────────────
     Es la medida del pulgar, no un número redondo: por debajo, la gente falla
     y vuelve a intentarlo. */
  .btn, button, .nav a, .tipos button, .vistas button {
    min-height: 44px;
  }
  .btn, .vistas button { padding-inline: 1rem; }
  .nav a { display: inline-flex; align-items: center; }

  /* ── 3. El pulgar llega abajo, no arriba ─────────────────────────────────
     Los botones que importan van anchos y al alcance, no alineados a la derecha
     como en escritorio. */
  .modal-pie, .paso-pie, .vcard-cierre { flex-direction: column-reverse; }
  .modal-pie .btn, .paso-pie .btn, .vcard-cierre .btn,
  .descargas .botones .btn { width: 100%; justify-content: center; }
  .descargas .botones { flex-direction: column; }

  /* ── 4. Menos ceremonia, más contenido ───────────────────────────────────
     En 375 px el aire de escritorio se come la pantalla. */
  .vcard-form, .tarjeta-panel, .modal-caja { padding: 1.1rem; border-radius: 16px; }
  .vcard-taller { gap: 1.25rem; }
  .section-head p { max-width: none; }

  /* El teléfono de la previa deja de ser una maqueta dentro de otro teléfono:
     se enseña la tarjeta a pantalla casi completa, que es como se va a ver. */
  .tel-marco { max-width: 100%; border-width: 0; border-radius: 18px; }
  .tel-barra { display: none; }
  .tel-pantalla { height: auto; max-height: none; overflow: visible; }
  .vcard-telefono { position: static; }

  /* ── 5. Tipografía: el titular pierde tracking al crecer ─────────────────── */
  h1 { letter-spacing: -0.02em; line-height: 1.1; }
  h2 { letter-spacing: -0.015em; }

  /* ── 6. La reja de tipos: dos por fila se leen, tres no ──────────────────── */
  .tipos { grid-template-columns: repeat(2, 1fr); }
  .reja-redes { grid-template-columns: 1fr 1fr; }

  /* ── 7. Tablas anchas: que rueden ellas, no la página ────────────────────── */
  .tabla-envoltorio, .comparativa-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── 8. El área segura de los iPhone con muesca ──────────────────────────── */
  .chrome { padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right)); }
  .pie { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}

/* Pantallas muy chicas (iPhone SE) */
@media (max-width: 380px) {
  .tipos { grid-template-columns: 1fr; }
  .reja-redes { grid-template-columns: 1fr; }
}