/* ==================================================================
   COLD2HORSE — ajustes de móvil compartidos
   Lo que hay que corregir en pantalla estrecha y no cabe en la hoja de
   una sola página: pie, índice de las legales, migas, formularios y las
   tablas anchas. Va después de todas las demás —igual que nav.css— para
   poder pisar lo que declaran base.css, home-04.css y tecnologia.css.

   El menú de móvil está aparte, en nav.css.
   ================================================================== */

@media (max-width: 860px) {

  /* ---------- pie ----------
     Los enlaces medían 14px de alto: imposibles de acertar con el dedo.
     La lista pierde el hueco entre filas y lo recupera cada enlace como
     relleno, que sí es superficie pulsable. */
  .foot ul { gap: 0; }

  .foot ul a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .foot__legal { gap: 1.25rem; }

  .foot__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* ---------- migas de las fichas ---------- */
  .crumbs { flex-wrap: wrap; row-gap: 0.35rem; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 2.5rem; }

  /* ---------- índice de las páginas legales ---------- */
  .idx a { min-height: 2.75rem; align-content: center; padding-block: 0.6rem; }

  /* ---------- cantidad, en la ficha de producto ----------
     El alto lo marcaba el <input>: 28px, la mitad de lo que pide un
     dedo en los dos botones de al lado. */
  .qty button, .qty input { min-height: 2.9rem; }

  /* ---------- datos de contacto de las legales ----------
     Correo y teléfono de las fichas <dl> se pulsan: no son prosa.
     Los enlaces dentro de un párrafo sí se quedan como están, que
     engordarlos rompería el interlineado del texto. */
  .dl dd a { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* Listas cuyo punto entero es un enlace (los navegadores, en la
     política de cookies): ahí el enlace es el objetivo, no la línea. */
  .ticks > li > a:only-child { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* ---------- formularios ----------
     16px de tamaño base ya evita el zoom automático de iOS al enfocar;
     lo que faltaba era alto de dedo. */
  .form__row input { padding-block: 0.7rem; }
}

/* ---------- tablas que ruedan a lo ancho ----------
   Ruedan dentro de su caja desde el principio, pero en el móvil nada lo
   decía. El aviso va dentro del propio contenedor con position:sticky,
   así que se queda a la vista mientras la tabla se desplaza debajo. */

.cmp::after,
.doc__table::after {
  content: 'Desliza en horizontal →';
  position: sticky;
  left: 0;
  display: block;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--hair);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* Sólo donde la tabla no cabe de verdad: la comparativa pide 54rem y la
   de cookies 34rem. Por encima de esos anchos sobra el aviso. */
@media (min-width: 901px) { .cmp::after { content: none; } }
@media (min-width: 601px) { .doc__table::after { content: none; } }