/* ==========================================================================
   componentes.css
   --------------------------------------------------------------------------
   Piezas reutilizables en varias páginas. Nomenclatura BEM en español:
     .bloque / .bloque__elemento / .bloque--modificador
   Índice:
     1. Aviso +18
     2. Cabecera y navegación
     3. Pie de página
     4. Botones
     5. Etiquetas (descuentos)
     6. Tarjeta de producto
     7. Grilla de productos
     8. Filtros del catálogo
     9. Estado vacío
    10. Tarjeta de categoría
    11. Tabla de horarios
    12. Mapa (marcador de posición)
    13. Encabezado de página
    14. Banner promocional
    15. Carrusel
    16. Responsive (tableta y computador)
   ========================================================================== */


/* 1. AVISO +18
   Aviso simple, no bloqueante: se muestra arriba y no impide navegar.
   ========================================================================== */
.aviso-edad {
  padding: var(--espacio-2) var(--espacio-4);
  background-color: var(--color-acento);
  color: var(--color-principal);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-align: center;
}


/* 2. CABECERA Y NAVEGACIÓN
   Dos filas: arriba (negra) logo, buscador y enlaces; abajo (blanca) las
   categorías. Móvil: los enlaces se despliegan con un botón y las categorías
   se deslizan hacia los lados. Computador: todo visible y la cabecera fija.
   ========================================================================== */
.cabecera {
  position: relative;
  z-index: 50;
  background-color: var(--color-principal);
  color: var(--color-texto-invertido);
}

/* --- Fila superior: logo, buscador y enlaces --- */
.cabecera__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  padding-block: var(--espacio-3);
}

.cabecera__logo {
  margin-right: auto;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-acento);
  text-decoration: none;
  text-transform: uppercase;
}

.cabecera__logo-destacado {
  color: var(--color-texto-invertido);
}

.cabecera__boton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding-inline: var(--espacio-3);
  background: transparent;
  border: 2px solid var(--color-acento);
  border-radius: var(--radio-sm);
  color: var(--color-acento);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  cursor: pointer;
}

/* Envoltura del buscador: contiene el formulario y la lista de sugerencias.
   La lista se posiciona respecto a esta caja, así no mueve nada al abrirse. */
.cabecera__buscador-envoltura {
  position: relative;
  flex-basis: 100%;
  min-width: 0;
}

.cabecera__buscador {
  display: flex;
  width: 100%;
  min-width: 0;
}

.cabecera__campo {
  flex: 1;
  min-width: 0;
  min-height: var(--alto-boton);
  padding-inline: var(--espacio-4);
  background-color: var(--color-principal-claro);
  border: 1px solid var(--color-borde-oscuro);
  border-right: 0;
  border-radius: var(--radio-sm) 0 0 var(--radio-sm);
  color: var(--color-texto-invertido);
}

.cabecera__campo::placeholder {
  color: var(--color-borde);
  opacity: 1;
}

.cabecera__boton-buscar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--alto-boton);
  min-height: var(--alto-boton);
  padding: 0;
  background-color: var(--color-acento);
  border: 1px solid var(--color-acento);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  color: var(--color-principal);
  cursor: pointer;
}

.cabecera__boton-buscar:hover {
  background-color: var(--color-acento-oscuro);
  border-color: var(--color-acento-oscuro);
}

/* --- Sugerencias del buscador ---------------------------------------- */
.sugerencias {
  position: absolute;
  top: calc(100% + var(--espacio-1));
  right: 0;
  left: 0;
  z-index: 60;
  max-height: calc(var(--alto-boton) * 7);
  overflow-y: auto;
  padding: var(--espacio-1);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-media);
  color: var(--color-texto);
}

.sugerencias[hidden] {
  display: none;
}

.sugerencias__opcion,
.sugerencias__ver-todos {
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: var(--texto-sm);
}

.sugerencias__opcion {
  font-weight: var(--peso-medio);
}

.sugerencias__opcion:hover,
.sugerencias__ver-todos:hover,
.sugerencias__fila--activa {
  background-color: var(--color-resalte);
}

.sugerencias__ver-todos {
  margin-top: var(--espacio-1);
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--color-borde);
  border-radius: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: center;
}

.cabecera__nav {
  display: none;
  flex-basis: 100%;
}

/* JS agrega esta clase al abrir el menú en móvil */
.cabecera__nav--abierto {
  display: block;
}

.cabecera__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.cabecera__enlace {
  display: block;
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio-sm);
  color: var(--color-texto-invertido);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.cabecera__enlace:hover {
  background-color: var(--color-principal-claro);
}

/* Enlace de la página actual (debe ir después de los demás enlaces) */
.cabecera__enlace[aria-current="page"] {
  color: var(--color-acento);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

/* --- Fila inferior: categorías (fondo blanco) --- */
.cabecera__categorias {
  background-color: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-texto);
}

.cabecera__categorias-lista {
  display: flex;
  gap: var(--espacio-1);
  overflow-x: auto;
  scrollbar-width: none;  /* El deslizamiento táctil sigue funcionando */
}

.cabecera__categorias-lista::-webkit-scrollbar {
  display: none;
}

.cabecera__categoria {
  display: block;
  padding: var(--espacio-3);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Categoría activa: solo se pinta el texto en rojo (#C40000), sin línea debajo.
   Debe ir después de los demás estados. */
.cabecera__categoria[aria-current="page"] {
  color: var(--color-oferta-oscuro);
}


/* 3. PIE DE PÁGINA
   ========================================================================== */
.pie {
  padding-block: var(--espacio-6);
  background-color: var(--color-principal);
  color: var(--color-texto-invertido);
  font-size: var(--texto-sm);
}

.pie__columnas {
  display: grid;
  gap: var(--espacio-5);
}

.pie__titulo {
  margin-bottom: var(--espacio-2);
  font-size: var(--texto-xl);
  color: var(--color-acento);
  text-transform: uppercase;
}

.pie__lista {
  display: grid;
  gap: var(--espacio-1);
}

.pie__enlace {
  text-decoration: none;
}

.pie__enlace:hover {
  text-decoration: underline;
}

.pie__direccion {
  font-style: normal;
}

.pie__legal {
  margin-top: var(--espacio-5);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-principal-claro);
  font-size: var(--texto-xs);
}


/* 4. BOTONES
   Principal: negro, con hover amarillo. Sobre fondos negros se usa
   .boton--acento (amarillo) o .boton--claro (solo borde).
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-boton);
  padding: var(--espacio-2) var(--espacio-5);
  background-color: var(--color-principal);
  border: 2px solid var(--color-principal);
  border-radius: var(--radio-sm);
  color: var(--color-texto-invertido);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.boton:hover {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-principal);
}

/* Amarillo: llamada a la acción sobre fondos negros */
.boton--acento {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-principal);
}

.boton--acento:hover {
  background-color: var(--color-acento-oscuro);
  border-color: var(--color-acento-oscuro);
}

/* Botón con borde, sin relleno */
.boton--secundario {
  background-color: transparent;
  border-color: var(--color-principal);
  color: var(--color-principal);
}

.boton--secundario:hover {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--color-texto-invertido);
}

/* Botón con borde para fondos oscuros */
.boton--claro {
  background-color: transparent;
  border-color: var(--color-texto-invertido);
  color: var(--color-texto-invertido);
}

.boton--claro:hover {
  background-color: var(--color-texto-invertido);
  border-color: var(--color-texto-invertido);
  color: var(--color-principal);
}

/* Botón de WhatsApp */
.boton--whatsapp {
  background-color: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: var(--color-blanco);
}

.boton--whatsapp:hover {
  background-color: var(--color-whatsapp-oscuro);
  border-color: var(--color-whatsapp-oscuro);
  color: var(--color-blanco);
}

.boton--ancho {
  width: 100%;
}


/* 5. ETIQUETAS (DESCUENTOS)
   ========================================================================== */
.etiqueta {
  display: inline-block;
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-sm);
  background-color: var(--color-principal);
  color: var(--color-texto-invertido);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
  line-height: 1.5;
  text-transform: uppercase;
}

/* Etiqueta roja de oferta: texto blanco y negrita */
.etiqueta--oferta {
  background-color: var(--color-oferta);
  color: var(--color-blanco);
}


/* 6. TARJETA DE PRODUCTO
   Diseño plano: foto sobre blanco, nombre en mayúsculas, precio rojo con
   etiqueta de descuento y una barra negra al pie ("Ver producto").
   Una sola tarjeta se usa en inicio, catálogo, ofertas y fichas.
   ========================================================================== */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--color-texto);
}

.tarjeta__imagen-contenedor {
  overflow: hidden;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  transition: border-color var(--transicion);
}

.tarjeta:hover .tarjeta__imagen-contenedor {
  border-color: var(--color-principal);
}

.tarjeta__imagen {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-1);
  padding-top: var(--espacio-3);
}

.tarjeta__categoria {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarjeta__nombre {
  font-size: var(--texto-lg);
  line-height: 1.15;
  text-transform: uppercase;
}

.tarjeta__nombre-enlace {
  text-decoration: none;
}

/* Hace clicable toda la tarjeta */
.tarjeta__nombre-enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* El contorno de foco rodea toda la tarjeta */
.tarjeta__nombre-enlace:focus-visible {
  outline: none;
}

.tarjeta__nombre-enlace:focus-visible::after {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.tarjeta__formato {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

.tarjeta__precios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
  margin-top: auto;
  padding-top: var(--espacio-2);
}

/* Precio anterior en su propia línea, bajo el precio de oferta */
.tarjeta__precios .precio--tachado {
  flex-basis: 100%;
}

/* Barra negra al pie. Es solo visual: el enlace es el nombre del producto */
.tarjeta__boton {
  display: block;
  margin-top: var(--espacio-3);
  padding: var(--espacio-2);
  background-color: var(--color-principal);
  border-radius: var(--radio-sm);
  color: var(--color-texto-invertido);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  white-space: nowrap;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color var(--transicion), color var(--transicion);
}

.tarjeta:hover .tarjeta__boton {
  background-color: var(--color-acento);
  color: var(--color-principal);
}

.precio {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-precio);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}

/* Precio de oferta en rojo */
.precio--oferta {
  color: var(--color-oferta-oscuro);
}

/* Precio normal tachado cuando hay oferta */
.precio--tachado {
  color: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  text-decoration: line-through;
}


/* 7. GRILLA DE PRODUCTOS
   Móvil: 2 columnas. Tableta: 3. Computador: 4.
   ========================================================================== */
.grilla-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-4) var(--espacio-3);
}


/* 8. FILTROS DEL CATÁLOGO
   Ya no hay caja de filtros: el único control ("Ordenar por") vive integrado
   en la página y se estiliza en paginas.css.
   ========================================================================== */


/* 9. ESTADO VACÍO
   Mensaje cuando no hay productos que mostrar.
   ========================================================================== */
.estado-vacio {
  padding: var(--espacio-7) var(--espacio-4);
  background-color: var(--color-superficie);
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio-md);
  color: var(--color-texto-suave);
  text-align: center;
}

/* Dentro de una grilla, el mensaje ocupa todo el ancho */
.grilla-productos > .estado-vacio {
  grid-column: 1 / -1;
}

.estado-vacio__titulo {
  margin-bottom: var(--espacio-2);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
}

.estado-vacio .boton {
  margin-top: var(--espacio-4);
}


/* 10. TARJETA DE CATEGORÍA
   Tarjetas negras; el amarillo aparece al pasar el cursor.
   Móvil: 2 columnas (si queda una sola al final, ocupa todo el ancho).
   ========================================================================== */
.grilla-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-3);
}

.categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-4) var(--espacio-3);
  background-color: var(--color-principal);
  border: 2px solid var(--color-principal);
  border-radius: var(--radio-sm);
  color: var(--color-texto-invertido);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transicion), background-color var(--transicion);
}

.categoria:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.categoria:hover {
  background-color: var(--color-principal-claro);
  border-color: var(--color-acento);
}

.categoria__icono {
  font-size: var(--texto-2xl);
  line-height: 1;
}

.categoria__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
}

.categoria:hover .categoria__nombre {
  color: var(--color-acento);
}

.categoria__cantidad {
  color: var(--color-borde);
  font-size: var(--texto-xs);
}


/* 11. TABLA DE HORARIOS
   ========================================================================== */
.tabla-horarios {
  width: 100%;
  border-collapse: collapse;
}

.tabla-horarios th,
.tabla-horarios td {
  padding: var(--espacio-3) 0;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-horarios th {
  font-weight: var(--peso-medio);
  text-align: left;
}

.tabla-horarios td {
  font-weight: var(--peso-fuerte);
  text-align: right;
}


/* 12. MAPA (MARCADOR DE POSICIÓN)
   Se reemplazará por un mapa real (ej. Google Maps) en la web definitiva.
   ========================================================================== */
.mapa-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: var(--espacio-4);
  background-color: var(--color-borde);
  border: 2px dashed var(--color-texto-suave);
  border-radius: var(--radio-md);
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
  text-align: center;
}


/* 13. ENCABEZADO DE PÁGINA
   Franja negra con el título (h1) de las páginas interiores.
   ========================================================================== */
.encabezado-pagina {
  padding-block: var(--espacio-6);
  background-color: var(--color-principal);
  border-bottom: 0.25rem solid var(--color-acento);
  color: var(--color-texto-invertido);
}

.encabezado-pagina__titulo {
  font-size: var(--texto-2xl);
  text-transform: uppercase;
}

.encabezado-pagina__texto {
  margin-top: var(--espacio-2);
  font-size: var(--texto-lg);
}


/* 14. BANNER PROMOCIONAL
   Imagen con título y enlace encima. Cuando haya banners reales, basta con
   cambiar la imagen en datos.js (el texto sigue siendo HTML, no va en la foto).
   ========================================================================== */
.banner-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--color-principal);
  border-radius: var(--radio-sm);
  color: var(--color-texto-invertido);
  text-decoration: none;
}

/* Versión horizontal (banners de ancho completo) */
.banner-tile--ancho {
  aspect-ratio: 16 / 10;
}

.banner-tile__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.banner-tile:hover .banner-tile__imagen {
  transform: scale(1.04);
}

/* Degradado negro bajo el texto para que siempre se lea */
.banner-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-principal) 0%, transparent 70%);
}

.banner-tile__texto {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espacio-1);
  padding: var(--espacio-5) var(--espacio-4);
}

.banner-tile__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  text-transform: uppercase;
}

.banner-tile__subtitulo {
  font-size: var(--texto-sm);
}

.banner-tile__enlace {
  margin-top: var(--espacio-2);
  color: var(--color-acento);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.banner-tile__enlace::after {
  content: " →";
}

.banner-tile:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}

/* Dos banners lado a lado (entre secciones del inicio) */
.banners-secundarios {
  display: grid;
  gap: var(--espacio-3);
}


/* 15. CARRUSEL
   Fila que se desliza con el dedo, la rueda o las flechas. Cada elemento
   mide lo que indica --visibles (con decimales se asoma el siguiente).
   Si todo cabe, las flechas se ocultan solas (js/componentes.js).
   ========================================================================== */
.carrusel {
  --carrusel-gap: var(--espacio-3);
  --visibles: 2.3;
  --ancho-item: calc((100% - (var(--visibles) - 1) * var(--carrusel-gap)) / var(--visibles));
  --flecha-arriba: 38%;
  position: relative;
}

.carrusel__pista {
  display: flex;
  gap: var(--carrusel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.carrusel__pista > * {
  flex: 0 0 var(--ancho-item);
  scroll-snap-align: start;
}

.carrusel__flecha {
  position: absolute;
  top: var(--flecha-arriba);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: var(--color-principal);
  border: 2px solid var(--color-texto-invertido);
  border-radius: 50%;
  color: var(--color-texto-invertido);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--transicion), color var(--transicion);
}

.carrusel__flecha:hover:not(:disabled) {
  background-color: var(--color-acento);
  color: var(--color-principal);
}

.carrusel__flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

.carrusel__flecha--anterior {
  left: calc(var(--espacio-2) * -1);
}

.carrusel__flecha--siguiente {
  right: calc(var(--espacio-2) * -1);
}

/* Todo cabe: no hace falta deslizar */
.carrusel--sin-desborde .carrusel__flecha {
  display: none;
}

/* Carrusel de banners: elementos más anchos y flechas al centro */
.carrusel--banners {
  --visibles: 1.15;
  --flecha-arriba: 50%;
}

.carrusel--banners .carrusel__pista {
  align-items: flex-start;
}


/* 16. RESPONSIVE (mobile-first: de menor a mayor)
   ========================================================================== */

/* Tableta: 768 px en adelante */
@media (min-width: 48em) {
  .tarjeta__boton {
    font-size: var(--texto-lg);
  }

  .grilla-productos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-5) var(--espacio-4);
  }

  .grilla-categorias {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-4);
  }

  .categoria:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .pie__columnas {
    grid-template-columns: repeat(3, 1fr);
  }

  .filtros {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: end;
  }

  .encabezado-pagina__titulo {
    font-size: var(--texto-3xl);
  }

  .banners-secundarios {
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
  }

  .banner-tile--ancho {
    aspect-ratio: 16 / 8;
  }

  .carrusel {
    --carrusel-gap: var(--espacio-4);
    --visibles: 3.3;
  }

  .carrusel--banners {
    --visibles: 2.15;
  }
}

/* Computador: 1024 px en adelante */
@media (min-width: 64em) {
  /* Cabecera fija: logo, buscador centrado y enlaces en una sola fila */
  .cabecera {
    position: sticky;
    top: 0;
    box-shadow: var(--sombra-media);
  }

  .cabecera__barra {
    flex-wrap: nowrap;
    gap: var(--espacio-5);
  }

  .cabecera__logo {
    margin-right: 0;
  }

  .cabecera__boton-menu {
    display: none;
  }

  .cabecera__buscador-envoltura {
    flex: 1 1 auto;
    max-width: 40rem;
    margin-inline: auto;
  }

  .cabecera__nav {
    display: block;
    flex-basis: auto;
  }

  .cabecera__lista {
    flex-direction: row;
  }

  .cabecera__categorias-lista {
    justify-content: center;
  }

  .grilla-productos {
    grid-template-columns: repeat(4, 1fr);
  }

  .grilla-categorias {
    grid-template-columns: repeat(5, 1fr);
  }

  .tarjeta__nombre {
    font-size: var(--texto-xl);
  }

  .carrusel {
    --visibles: 4.3;
  }

  .carrusel--banners {
    --visibles: 3;
  }

  .carrusel__flecha--anterior {
    left: calc(var(--espacio-4) * -1);
  }

  .carrusel__flecha--siguiente {
    right: calc(var(--espacio-4) * -1);
  }
}


/* ==========================================================================
   Pantallas angostas (hasta 370 px)
   --------------------------------------------------------------------------
   Con "1fr" una columna se ensancha para que quepa su palabra más larga y la
   página se desborda hacia el lado. Aquí las columnas son iguales, sin
   ensancharse, y los textos largos bajan de tamaño para caber en su tarjeta.
   ========================================================================== */

@media (max-width: 23.125em) {
  .grilla-productos,
  .grilla-categorias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoria__nombre {
    font-size: var(--texto-lg);
  }

  .tarjeta__boton {
    font-size: var(--texto-sm);
    letter-spacing: 0.02em;
  }
}

/* 13. ESTADOS DE LA CARGA
   Los marcadores tienen la forma de una tarjeta: al llegar los datos la
   página no se mueve (el CLS de 0,98 que medimos en F2-01 venía de acá).
   ========================================================================== */
.marcador {
  aspect-ratio: 1 / 1;
  background-color: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-md);
  opacity: 0.55;
}

.marcadores .marcador {
  min-height: 12rem;
}

/* Aviso de que se está mostrando el respaldo (la última lista conocida) */
.aviso-respaldo {
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-5);
  background-color: var(--color-superficie);
  border-left: 4px solid var(--color-acento);
  border-radius: var(--radio-md);
  color: var(--color-texto);
}