.footer {
  /* La barra de navegación va POR ENCIMA del contenido. Con z-index 3 quedaba
     por debajo de casi todo el home —los títulos de carrusel (.title z-index 5,
     .title-link 10), los separadores (10) y las flechas del slider (101)— y sus
     tres botones (inicio, buscador, perfil) resultaban inalcanzables cuando uno
     de esos elementos caía sobre la barra: el clic se lo llevaba el título.
     500 la sitúa sobre todo el contenido y por debajo del header (1000), los
     menús y los avisos flotantes. */
  z-index: 500;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 0.1em;
  /* Con 0.288 de opacidad las fotos de las tarjetas se veían a través de la
     barra y los iconos blancos desaparecían sobre las zonas claras. El
     degradado mantiene el borde superior algo translúcido —para que no corte
     en seco sobre el contenido— y opaca del todo la franja de los iconos. */
  background: linear-gradient(to top, rgba(10, 10, 10, 0.97) 60%, rgba(10, 10, 10, 0.86) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.07);

  /* Área segura del indicador de inicio (iPhone sin botón). La barra sigue
     pegada al borde inferior —el degradado tiene que llegar hasta abajo—, así
     que lo que se aparta es su CONTENIDO, no la barra. */
  padding-bottom: var(--safe-bottom, 0px);
}
.list-icons {
  display: grid;
  grid-auto-flow: column;
  list-style: none;
}

/* Los tres destinos de la navegación principal en móvil. El enlace medía
   100x20: el alto lo daba el svg de 24px y nada más, así que dos tercios de la
   franja visible no respondían al toque. Se lleva a 44px de alto sin cambiar
   el icono ni la posición — solo crece la zona sensible. */
.list-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min, 44px);
  -webkit-tap-highlight-color: transparent;
}
.list-icons svg {
  fill: rgba(255, 255, 255, 0.7);
}
.list-icons svg:hover {
  fill: rgb(255, 255, 255);
}
.icon-user img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
}
.list-item {
  text-align: center;
}
.list-item svg {
  display: block;
  margin: auto;
}

@media screen and (min-width: 300px) {
  .footer {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .footer {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .footer {
    display: none;
  }
}

/* --- Sitio para la barra al final del scroll ---
   La barra flota sobre el contenido y nada reservaba su altura, así que al
   llegar al fondo tapaba la última fila de tarjetas: medido en el home a
   390x844, el pie de `.food-card` (nombre, edad y valoración) quedaba debajo
   —tarjeta hasta 823px, barra desde 809—. Lo mismo en el buscador.

   Va con `:has()` porque `footer.css` lo cargan 7 páginas pero solo 5 pintan
   la barra: reservar sitio en las otras dejaría un hueco muerto al final.
   Un navegador sin `:has()` se queda en el comportamiento de antes.

   La reserva solo existe donde la barra se ve; a partir de 768px está en
   `display:none` y el `@media` de arriba ya la retira. */
@media screen and (max-width: 767.98px) {
  body:has(> .footer) {
    padding-bottom: calc(var(--tap-min, 44px) + var(--safe-bottom, 0px) + 8px);
  }
}