/* El encabezado lo dibuja js/vista/crearEncabezado.js. La altura queda reservada desde
   antes (min-height = lo que mide dibujado), así la página no "salta" cuando aparece.
   Celular: marca y bolsa arriba, el menú abajo y, si la página lo pide, el buscador. */
.encabezado {
  /* sticky: baja con la página y se queda pegado arriba, así el buscador, el carrito y los
     contactos están siempre a mano. z-index lo pone por encima de lo que pasa por abajo
     (el texto y las remeras del hero tienen z-index 1). */
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "marca acciones"
    "menu menu";
  align-items: center;
  column-gap: var(--espacio);
  min-height: 107px;
  padding: 8px var(--espacio);
  border-bottom: 3px solid var(--color-acento);
  background: var(--color-superficie);
}

.encabezado--con-buscador {
  grid-template-areas:
    "marca acciones"
    "menu menu"
    "buscador buscador";
  min-height: var(--alto-encabezado-celular);
}

.encabezado__menu {
  grid-area: menu;
  display: flex;
  gap: 24px;
}

/* 44 px de alto: el mínimo para tocarlos cómodos con el dedo. */
.encabezado__enlace {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-texto);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.encabezado__enlace:hover,
.encabezado__enlace[aria-current="page"] {
  text-decoration: underline 2px var(--color-acento);
  text-underline-offset: 6px;
}

.encabezado__buscador {
  grid-area: buscador;
  display: flex;
  margin-bottom: 4px;
}

.encabezado__buscador input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-borde);
  border-right: 0;
  border-radius: var(--radio) 0 0 var(--radio);
  background: var(--color-fondo);
  color: var(--color-texto);
  font: inherit;
}

.encabezado__buscar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: 1px solid var(--color-borde);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  cursor: pointer;
}

/* Desde 1024 px, todo en una fila: marca, menú, buscador, contactos y bolsa. Antes no
   entra sin amontonarse, así que en la tablet se queda como en el celular. */
@media (min-width: 1024px) {
  .encabezado {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marca menu acciones";
    column-gap: 40px;
    min-height: 63px;
  }

  .encabezado--con-buscador {
    grid-template-columns: auto 1fr minmax(200px, 320px) auto;
    grid-template-areas: "marca menu buscador acciones";
    min-height: 63px;
  }

  .encabezado__buscador {
    margin-bottom: 0;
  }
}

.encabezado__marca {
  grid-area: marca;
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.encabezado__marca span {
  color: var(--color-acento);
}

/* Arriba a la derecha: WhatsApp, Instagram y la bolsa del carrito, juntos. */
.encabezado__acciones {
  grid-area: acciones;
  display: flex;
  align-items: center;
}

/* Los íconos de WhatsApp e Instagram: 44 px para tocarlos fácil con el dedo. */
.encabezado__red {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-texto);
}

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

/* La bolsa del carrito. 44 px para tocarla fácil con el dedo. */
.encabezado__carrito {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-texto);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.encabezado__icono {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.encabezado__numero {
  display: inline-block;
}

/* Un salto corto cuando el número sube. */
.encabezado__numero--salto {
  animation: salto-numero 0.4s ease-out;
}

@keyframes salto-numero {
  40% {
    transform: translateY(-6px) scale(1.25);
  }
}

/* Quien pidió "reducir movimiento" en su teléfono no ve el salto. */
@media (prefers-reduced-motion: reduce) {
  .encabezado__numero--salto {
    animation: none;
  }
}