/* ── CAPA DE TELÉFONO · 18-ago-2026 ─────────────────────────────────────────
   Capa ADITIVA para las 6 varas del holding en pantallas de mano (<640px).
   No rediseña: solo tamaño de letra (piso 12px), separación entre blancos
   tocables (54px de centro a centro), tamaño mínimo tocable (44px) y contraste
   (WCAG 4.5:1) con variantes de token POR FONDO — el color de marca se conserva,
   solo se ajusta su luminosidad donde el fondo lo exige.
   Lleva !important porque el Tailwind de CDN inyecta su hoja después de esta.
   La versión anterior de cada archivo vive en _respaldo-movil-18ago/.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {

  /* ── VARA 4 · LETRA: piso duro de 12px ─────────────────────────────────── */
  .text-\[7\.5px\],
  .text-\[10px\],
  .text-\[10\.5px\],
  .text-\[11px\],
  .text-\[11\.5px\]   { font-size: 12px !important; }
  .eyebrow            { font-size: 12px !important; }

  /* el mono con tracking abierto crece de ancho al subir de tamaño:
     se afloja el tracking justo en los renglones más largos y apretados */
  .text-\[7\.5px\].tracking-\[\.3em\] { letter-spacing: .08em !important; }
  .text-\[10px\].tracking-\[\.24em\]  { letter-spacing: .14em !important; }
  .uppercase.tracking-\[\.3em\].text-\[11px\] { letter-spacing: .18em !important; }

  /* inmersivo.html (hoja propia, sin Tailwind) */
  .marca s,
  .pie .lg s          { font-size: 12px !important; letter-spacing: .08em !important; }
  .a2-ficha .ficha .n,
  .a3-card .num,
  .obra-txt .anio,
  .obra-hueco span,
  .part .cli,
  .part .rol,
  .campo label,
  .dato .k,
  .a2-ficha .tag,
  .cue,
  .part .sello,
  .nav-links,
  .hero-chips small,
  .maplibregl-ctrl-attrib,
  .maplibregl-ctrl-attrib a { font-size: 12px !important; }
  .obra-hueco span,
  .a2-ficha .tag      { letter-spacing: .1em !important; }
  #riel span          { font-size: 12px !important; }

  /* ── VARA 2 · TOCABLES: nada por debajo de 44×44 ───────────────────────── */
  footer nav a.inline-flex,          /* index.html: "Obras" medía 36px de ancho */
  .pie nav a          { min-width: 44px !important; justify-content: center; }
  header a.flex.items-center { min-height: 44px !important; }

  /* ── VARA 3 · VECINDAD: 54px de centro a centro ────────────────────────── */
  /* el menú de hamburguesa cerrado seguía "existiendo" debajo del contenido:
     recortado por max-height pero contando como blanco tocable pegado */
  header:has(#hamb[aria-expanded="false"]) #mobmenu { visibility: hidden !important; }

  /* avatar del dueño + hamburguesa: estaban a 52px */
  #nav .flex.items-center.gap-2 { gap: 14px !important; }
  .nav-act                      { gap: 14px !important; }

  /* filas del pie: dos renglones de enlaces a 44px de distancia */
  footer nav.flex-wrap { row-gap: 14px !important; }
  .pie nav             { gap: 14px 20px !important; }

  /* ── VARA 5 · CONTRASTE: una variante por fondo, mismo tono de marca ───── */

  /* cobre #B4703A como TEXTO sobre claro (blanco, neutro, arena): 3.95 → 4.6 */
  .bg-white .text-cobre,
  .bg-neutro .text-cobre,
  .bg-arena .text-cobre,
  main.bg-neutro .text-cobre { color: #8D582E !important; }

  /* cobre como FONDO con texto blanco: 3.95 → 4.6 (se hunde al cobre oscuro de marca) */
  .bg-cobre           { background-color: #A56735 !important; }
  .btn-p              { background: #A56735 !important; }

  /* grises de marca sobre fondo claro */
  .bg-white .text-acero2,
  .bg-neutro .text-acero2,
  .bg-arena .text-acero2,
  main.bg-neutro .text-acero2 { color: #736F68 !important; }
  .bg-arena .text-acero       { color: #69635B !important; }

  /* panel Hostess (perfil.html · sistema.html): fondos claros canvas/paper/white */
  .text-mute          { color: #636B78 !important; }
  .text-mute\/70      { color: #636B78 !important; }
  .text-accent        { color: #8D6137 !important; }
  .bg-accent          { background-color: #9B6B3D !important; }
  .bg-accent.text-white,
  .btn.btn-p          { background-color: #9B6B3D !important; }
  .chip-esp           { color: #7E5329 !important; }
  .tab                { color: #636B78 !important; }
  .tab.on             { color: #fff !important; }

  /* letra chica que solo asoma al abrir una pestaña del sistema */
  table.t th,
  .ef tr.gr td,
  .chip               { font-size: 12px !important; }
}