/* ==========================================================================
   MAVERICK 1997 — header.css
   Barra de promociones + header + megamenú + menú mobile.

   Todos los valores salen del prototipo (líneas 82-178 para la estructura,
   1794-1830 para los estilos calculados, 1964-1990 para carrito y drawer).
   Los tokens y los 26 @keyframes mvk* viven en main.css: acá no se redeclara
   ninguno.

   Prefijo exclusivo de esta área: .mvk-hdr-*
   Únicas clases ajenas que se reusan: .screen-reader-text y .mvk-noscrollbar.

   ⚠️ No meter markup vectorial ni data-URI vectorial en este archivo: la CDN
   de Hostinger bloquearía su guardado para siempre. Los íconos van todos en
   inc/icons.php.
   ========================================================================== */

/* Alto total del bloque fijo, para que el resto del sitio pueda reservarlo. */
:root {
  --mvk-hdr-offset: calc(var(--mvk-promo-h) + var(--mvk-hdr-mob));
}

@media (min-width: 1080px) {
  :root { --mvk-hdr-offset: calc(var(--mvk-promo-h) + var(--mvk-hdr-tall)); }
}

/* 🚨 El mismo alto, pero con .is-scrolled puesto.
   --mvk-hdr-offset describe el header EN REPOSO. De 1080 para arriba, apenas
   se scrollean 30px header.js le pone .is-scrolled al bloque fijo y la fila
   baja de --mvk-hdr-tall a --mvk-hdr-short (ver §4): el alto real pasa a ser
   36 + 74 = 110px. Ese segundo valor no lo publicaba nadie, así que todo lo
   que se PEGA debajo del header (position:sticky) quedaba clavado al alto de
   reposo, que para cuando el sticky entra en juego ya no existe: a 1280px eso
   dejaba una franja de ~20px entre el borde del header y la barra de "Volver"
   de la ficha, con el contenido pasando por adentro.

   Cuál usar:
     · lo que RESERVA espacio al cargar (el padding del body de acá abajo)
       → --mvk-hdr-offset, porque al cargar el header sí está alto;
     · lo que se PEGA con sticky → --mvk-hdr-offset-scrolled, porque para
       despegarse hay que haber scrolleado y ahí el header ya se encogió. */
:root { --mvk-hdr-offset-scrolled: var(--mvk-hdr-offset); }

@media (min-width: 1080px) {
  :root { --mvk-hdr-offset-scrolled: calc(var(--mvk-promo-h) + var(--mvk-hdr-short)); }
}

/* Y acá se CONSUME. El bloque fijo (promos + header) está fuera del flujo, así
   que sin esto tapa el principio del contenido en toda plantilla que no arranque
   con el hero: entradas, páginas, búsqueda, 404, carrito, checkout.

   La portada queda exenta a propósito: front-page.php abre con el hero, que es
   a sangre y pasa por debajo del header por diseño. WordPress marca la portada
   con la clase `home` (get_body_class) y front-page.php es la plantilla de la
   portada incluso cuando la portada es el listado de entradas, así que el
   :not(.home) no deja ningún caso afuera.

   Va en padding del body y no en el <main> para no chocar con el padding-top de
   .mvk-section (misma propiedad, mayor especificidad: le comería el respiro
   superior a la sección en vez de sumarse). */
body:not(.home) {
  padding-block-start: var(--mvk-hdr-offset);
}

/* Anclas: un #destino tiene que frenar por debajo de la barra fija, no detrás.
   Con :where() la especificidad es 0, así que cualquier área puede afinar el
   valor de su propia sección sin pelearse con esta regla. */
:where([id]) {
  scroll-margin-block-start: var(--mvk-hdr-offset);
}

/* ==========================================================================
   1. Contenedor fijo — envuelve la barra de promos y el header
   ========================================================================== */

.mvk-hdr-fixed {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;

  /* 🚨 Ancho explícito, no solo inset-inline.
     Sin esto el bloque fijo se dimensiona por su contenido, y el contenido
     incluye el track del marquee, que mide 3182px porque lleva los mensajes
     DUPLICADOS para que el bucle no tenga costura. Resultado: a 390px el
     header medía 1130px y arrastraba scroll horizontal a todo el sitio.
     El overflow:hidden de la barra clipea el dibujo, pero no impide que el
     ancestro crezca. */
  width: 100%;
  max-width: 100vw;
}

/* ==========================================================================
   2. Barra de promociones — marquee infinito de 68s
   ========================================================================== */

.mvk-hdr-promo {
  height: var(--mvk-promo-h);
  background: var(--mvk-black);
  color: var(--mvk-white);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* El contenido va DUPLICADO exacto y el keyframe corre -50%: por eso el bucle
   no tiene costura. El segundo grupo lleva aria-hidden en el markup. */
.mvk-hdr-promo-track {
  display: flex;
  width: max-content;
  animation: mvkMarquee 68s linear infinite;
  will-change: transform;
}

/* 🚨 min-width: 100vw — MEDIDO EN PRODUCCION, no es defensivo.

   El grupo de los cinco mensajes mide 1591px. En una pantalla de 1920 eso
   significa que el grupo entra ENTERO con 329px de sobra, asi que la copia
   duplicada —la que existe solo para tapar la costura— entra por la derecha
   antes de que la original salga por la izquierda: durante 21 de los 68
   segundos del bucle se leen DOS "Retiro en el local" a la vez, y lo mismo
   con cada uno de los otros cuatro mensajes.

   Con el grupo forzado a un ancho de pantalla, la copia no puede alcanzar a
   la original. El space-between reparte el aire que sobra entre los mensajes
   en vez de dejarlo como un hueco al final, que se veria como un salto.

   En celular no hace nada: ahi el grupo ya es mas ancho que la pantalla. */
.mvk-hdr-promo-group {
  display: flex;
  width: max-content;
  min-width: 100vw;
  align-items: center;
  justify-content: space-between;
  gap: 46px;
  flex: none;
  /* El padding final iguala al gap para que el empalme sea invisible. */
  padding-inline-end: 46px;
  font: 500 10px/1 var(--mvk-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mvk-hdr-promo-sep {
  color: rgba(255, 255, 255, .28);
  font-size: 7px;
}

/* Con movimiento reducido el riel se detiene y queda visible el primer grupo. */
@media (prefers-reduced-motion: reduce) {
  .mvk-hdr-promo-track { animation: none; }
}

/* ==========================================================================
   3. Header — tres capas apiladas
   ========================================================================== */

.mvk-hdr {
  position: relative;
  color: var(--mvk-white);
}

/* 3.1 Capa de fondo: blanco que se opacifica al scrollear. */
.mvk-hdr-bg {
  position: absolute;
  inset: 0;
  background: var(--mvk-white);
  border-bottom: 1px solid var(--mvk-line);
  opacity: 0;
  transition: opacity .4s ease;
}

.mvk-hdr-fixed.is-scrolled .mvk-hdr-bg { opacity: 1; }

/* 3.2 Capa de tinta: todo lo de adentro hereda con color:inherit. */
.mvk-hdr-ink {
  position: relative;
  color: var(--mvk-white);
  transition: color .35s ease;
}

.mvk-hdr-fixed.is-scrolled .mvk-hdr-ink { color: var(--mvk-black); }

/* 3.3 Barra de progreso: el JS le escribe scaleX en cada frame, sin transición. */
.mvk-hdr-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  width: 100%;
  background: var(--mvk-black);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ==========================================================================
   4. Fila del header
   ========================================================================== */

.mvk-hdr-row {
  position: relative;
  max-width: var(--mvk-max-wide);
  margin: 0 auto;
  padding-inline: var(--mvk-pad);
  height: var(--mvk-hdr-mob);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 38px);
  transition: height .4s var(--mvk-ease);
}

@media (min-width: 1080px) {
  .mvk-hdr-row { height: var(--mvk-hdr-tall); }
  .mvk-hdr-fixed.is-scrolled .mvk-hdr-row { height: var(--mvk-hdr-short); }
}

/* --- 4.1 Hamburguesa ------------------------------------------------------ */

.mvk-hdr-burger {
  display: flex;
  width: 40px;
  height: 40px;
  /* El -8px alinea ópticamente las barras con el padding del contenedor. */
  margin-inline-start: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

/* Dos barras desiguales: 24 y 16. El grosor es 1.6px, no 2px. */
.mvk-hdr-burger > span {
  display: block;
  height: 1.6px;
  background: currentColor;
}

.mvk-hdr-burger > span:first-child { width: 24px; }
.mvk-hdr-burger > span:last-child  { width: 16px; }

@media (min-width: 1080px) {
  .mvk-hdr-burger { display: none; }
}

/* --- 4.2 Logo ------------------------------------------------------------- */

.mvk-hdr-logo {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  padding-block: 4px;
}

/*
 * 🚨 La clase va DUPLICADA a propósito. No es un error de tipeo.
 *
 * WooCommerce declara `.woocommerce img, .woocommerce-page img { height: auto }`
 * con especificidad (0,1,1), que le gana a cualquier regla del tema de una sola
 * clase (0,1,0). Resultado: en /tienda/, /carro/ y el checkout —las pantallas
 * que llevan la clase .woocommerce-page en el body— el logo volvía a su tamaño
 * natural de 1600×416 y se salía 1256px de la pantalla.
 *
 * Lo peor era el síntoma: en el resto del sitio se veía perfecto, así que
 * parecía un problema del catálogo y no del header.
 *
 * Repetir la clase sube a (0,2,0) sin inventar un selector ajeno ni tener que
 * repetir los valores. Mismo tratamiento en las otras imágenes cuyo alto lo
 * define el tema: el logo del menú mobile, la foto del megamenú y la del pie.
 */
.mvk-hdr-logo-img.mvk-hdr-logo-img {
  height: 38px;
  width: auto;
  display: block;
  filter: none;
  transition: height .4s var(--mvk-ease), filter .35s ease;
}

.mvk-hdr-fixed.is-scrolled .mvk-hdr-logo-img {
  height: 30px;
  filter: invert(1);
}

@media (min-width: 1080px) {
  .mvk-hdr-logo-img.mvk-hdr-logo-img { height: clamp(38px, 3.4vw, 54px); }
  .mvk-hdr-fixed.is-scrolled .mvk-hdr-logo-img { height: 36px; }
}

/* Barrido de luz: la máscara es el propio PNG del lockup, así que la luz solo
   se ve dentro de las letras. Curva propia (.4,0,.2,1), no la mvk. */
.mvk-hdr-logo-shine {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 4px;
  width: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url(../img/lockup-h-white.png);
          mask-image: url(../img/lockup-h-white.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  animation: mvkLogoSweep 1.9s cubic-bezier(.4, 0, .2, 1) 1.1s both;
}

/* Sobre el header blanco un barrido blanco no tiene sentido. */
.mvk-hdr-fixed.is-scrolled .mvk-hdr-logo-shine { opacity: 0; }

/* --- 4.3 Nav de escritorio ------------------------------------------------ */

.mvk-hdr-nav {
  display: none;
  align-items: center;
  gap: clamp(14px, 1.9vw, 28px);
  font: 500 12px/1 var(--mvk-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-inline-start: 8px;
  white-space: nowrap;
  min-width: 0;
}

@media (min-width: 1080px) {
  .mvk-hdr-nav { display: flex; }
}

.mvk-hdr-navlink {
  color: inherit;
  position: relative;
  padding-block: 8px;
  text-decoration: none;
  transition: opacity .2s ease;
}

.mvk-hdr-navlink:hover,
.mvk-hdr-navlink:focus-visible { color: inherit; }

/* El subrayado crece desde la izquierda. En el prototipo era un box-shadow
   que hacía fade; esta es la traducción mínima que conserva sus tres valores
   exactos: 1.5px de grosor, .28s y la curva mvk. */
.mvk-hdr-navlink::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--mvk-ease);
}

.mvk-hdr-navlink:hover::after,
.mvk-hdr-navlink:focus-visible::after,
.mvk-hdr-navlink[aria-expanded="true"]::after { transform: scaleX(1); }

/* Sale es el único con subrayado permanente y hover por opacidad. */
.mvk-hdr-navlink--sale::after { transform: scaleX(1); }
.mvk-hdr-navlink--sale:hover  { opacity: .6; }

/* --- 4.4 Acciones: lupa y bolsa ------------------------------------------- */

.mvk-hdr-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 12px);
}

.mvk-hdr-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.mvk-hdr-btn:hover { color: inherit; }

.mvk-hdr-btn:focus         { outline: none; }
.mvk-hdr-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.mvk-hdr-btn--search {
  opacity: .78;
  transition: opacity .35s var(--mvk-ease), transform .35s var(--mvk-ease);
}

.mvk-hdr-btn--search:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* El divisor hereda la tinta: se invierte solo con el scroll. */
.mvk-hdr-divider {
  width: 1px;
  height: 18px;
  background: currentColor;
  opacity: .2;
  margin-inline: clamp(6px, .9vw, 12px);
}

.mvk-hdr-btn--cart {
  position: relative;
  opacity: .9;
  /* El prototipo solo declaraba opacity y el scale saltaba; se agrega
     transform con la curva mvk, igual que el header interno del catálogo. */
  transition: opacity .25s ease, transform .3s var(--mvk-ease);
}

.mvk-hdr-btn--cart:hover {
  opacity: 1;
  transform: scale(1.06);
}

.mvk-hdr-cart-icon {
  display: block;
  flex: none;
  width: 17px;
  height: 18px;
}

@media (min-width: 760px) {
  .mvk-hdr-cart-icon { width: 19px; height: 20px; }
}

/* Contador. Se invierte junto con el header y se re-anima con mvkBump cada vez
   que cambia la cantidad (el JS reinicia la animación).

   ⚠️ DESVÍO CONSCIENTE DEL PROTOTIPO: ahí el contador lleva un radio de
   esquina de 8px sobre 15px de alto, o sea una pastilla, y eso contradice la
   regla 1 del handoff (nada redondeado salvo botones circulares). Manda la
   regla: acá va cuadrado. Si el cliente prefiere la pastilla del prototipo,
   es una sola línea de radio 8px justo debajo de `height`. */
.mvk-hdr-badge {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 0;
  min-width: 15px;
  height: 15px;
  padding-inline: 4px;
  background: var(--mvk-white);
  color: var(--mvk-black);
  font: 600 9px/15px var(--mvk-mono);
  letter-spacing: 0;
  text-align: center;
  transition: transform .3s var(--mvk-ease);
  animation: mvkBump .5s var(--mvk-ease) both;
}

.mvk-hdr-fixed.is-scrolled .mvk-hdr-badge {
  background: var(--mvk-black);
  color: var(--mvk-white);
}

@media (prefers-reduced-motion: reduce) {
  .mvk-hdr-badge { animation: none; }
}

/* ==========================================================================
   5. Megamenú — solo por encima de 1080px
   ========================================================================== */

.mvk-hdr-mega {
  display: none;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: rgba(9, 9, 9, .97);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  color: var(--mvk-white);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  overflow: hidden;
}

/* Entra con mvkMega; no tiene animación de salida: se oculta y listo. */
@media (min-width: 1080px) {
  .mvk-hdr-mega {
    display: block;
    animation: mvkMega .45s var(--mvk-ease) both;
  }
}

.mvk-hdr-mega[hidden] { display: none; }

.mvk-hdr-mega-grid {
  max-width: var(--mvk-max-wide);
  margin: 0 auto;
  padding: clamp(30px, 3.6vw, 54px) var(--mvk-pad) clamp(26px, 3vw, 44px);
  display: grid;
  /* Fracciones asimétricas: la tercera más angosta, la de la foto la más ancha. */
  grid-template-columns: 1fr 1fr .9fr 1.15fr;
  gap: clamp(24px, 3.4vw, 56px);
}

.mvk-hdr-mega-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-inline-end: clamp(16px, 2vw, 34px);
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.mvk-hdr-mega-col--help { gap: 13px; }

.mvk-hdr-mega-label {
  font: 500 9.5px/1 var(--mvk-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-block-end: 6px;
}

/* Oswald 500 con letter-spacing POSITIVO: es la excepción a la regla de los
   títulos porque no es un título, es un enlace de navegación. */
.mvk-hdr-mega-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: var(--mvk-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding-block: 3px;
  transition: color .35s ease, transform .45s var(--mvk-ease);
}

.mvk-hdr-mega-link:hover,
.mvk-hdr-mega-link:focus-visible {
  color: var(--mvk-white);
  transform: translateX(7px);
}

.mvk-hdr-mega-rule {
  height: 1px;
  background: rgba(255, 255, 255, .12);
  margin-block: 8px;
  max-width: 120px;
}

.mvk-hdr-mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: fit-content;
  min-width: 190px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-family: var(--mvk-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--mvk-white);
  text-decoration: none;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.mvk-hdr-mega-cta:hover,
.mvk-hdr-mega-cta:focus-visible {
  background: var(--mvk-white);
  color: var(--mvk-black);
  border-color: var(--mvk-white);
}

.mvk-hdr-mega-soft {
  font: 300 13px/1.5 var(--mvk-sans);
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  width: fit-content;
  transition: color .3s ease;
}

.mvk-hdr-mega-soft:hover,
.mvk-hdr-mega-soft:focus-visible { color: var(--mvk-white); }

.mvk-hdr-mega-sizes {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-start: 20px;
}

.mvk-hdr-mega-sizes-label {
  font: 500 9.5px/1 var(--mvk-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.mvk-hdr-mega-sizes-value {
  font: 300 13px/1.5 var(--mvk-sans);
  color: rgba(255, 255, 255, .6);
}

/* --- Tarjeta de foto (columna 4) ------------------------------------------
   Cuadrada a propósito: no es foto de producto (esas son 3:4 sin excepción),
   es la imagen editorial del menú. */
.mvk-hdr-mega-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--mvk-white);
  text-decoration: none;
}

.mvk-hdr-mega-card-box {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
}

.mvk-hdr-mega-card-img.mvk-hdr-mega-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(1.35) saturate(0);
  transition: transform 1.6s var(--mvk-ease);
}

.mvk-hdr-mega-card:hover .mvk-hdr-mega-card-img { transform: scale(1.07); }

.mvk-hdr-mega-card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 9, .1) 0%, rgba(9, 9, 9, .55) 100%);
}

.mvk-hdr-mega-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 10.5px/1 var(--mvk-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  padding-block-end: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  transition: border-color .35s ease;
}

.mvk-hdr-mega-card:hover .mvk-hdr-mega-card-foot,
.mvk-hdr-mega-card:focus-visible .mvk-hdr-mega-card-foot { border-color: var(--mvk-white); }

/* ==========================================================================
   6. Menú mobile — NO es pantalla completa: panel de 430px anclado a la izquierda
   ========================================================================== */

.mvk-hdr-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
}

.mvk-hdr-menu[hidden] { display: none; }

.mvk-hdr-menu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, .66);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  animation: mvkFade .35s ease both;
}

/* rgba(12,11,11,.62) es --mvk-black al 62%: lo que lo hace legible es el
   blur de 30px, no la opacidad. */
.mvk-hdr-menu-panel {
  position: relative;
  width: min(90vw, 430px);
  background: rgba(12, 11, 11, .62);
  -webkit-backdrop-filter: blur(30px) saturate(120%);
          backdrop-filter: blur(30px) saturate(120%);
  color: var(--mvk-white);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 40px 0 100px -20px rgba(0, 0, 0, .7);
  animation: mvkDrawer .5s var(--mvk-ease) both;
}

/* Cierre en dos tiempos: curva propia acelerada (.5,0,.75,0) y desmontaje a
   los 340ms, veinte antes de que termine la animación. Es a propósito. */
.mvk-hdr-menu.is-out .mvk-hdr-menu-scrim { animation: mvkFadeOut .34s ease both; }
.mvk-hdr-menu.is-out .mvk-hdr-menu-panel { animation: mvkDrawerOut .36s cubic-bezier(.5, 0, .75, 0) both; }

/* --- 6.1 Cabecera del panel ----------------------------------------------- */

.mvk-hdr-menu-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
  animation: mvkMenuIn .5s var(--mvk-ease) .05s both;
}

.mvk-hdr-menu-logo {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}

.mvk-hdr-menu-bloom {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 210px;
  height: 150px;
  /* Círculo decorativo: la regla de "ningún border-radius" exceptúa esto. */
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .07) 42%, transparent 72%);
  filter: blur(6px);
  animation: mvkLogoBloom 2.2s var(--mvk-ease) .1s both;
  pointer-events: none;
}

.mvk-hdr-menu-logo-box {
  position: relative;
  display: block;
  overflow: hidden;
}

.mvk-hdr-menu-logo-img.mvk-hdr-menu-logo-img {
  position: relative;
  height: 42px;
  width: auto;
  display: block;
  animation: mvkLogoRise 1.5s cubic-bezier(.22, 1, .28, 1) .08s both;
}

/* Igual que el barrido del header, pero 1.7s con delay .4s y máscara centrada. */
.mvk-hdr-menu-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url(../img/lockup-h-white.png);
          mask-image: url(../img/lockup-h-white.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  animation: mvkLogoSweep 1.7s cubic-bezier(.4, 0, .2, 1) .4s both;
}

.mvk-hdr-menu-close {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: color .3s ease, transform .45s var(--mvk-ease);
}

/* El translateY se repite en el hover: si no, el botón se descentra al rotar. */
.mvk-hdr-menu-close:hover,
.mvk-hdr-menu-close:focus-visible {
  color: var(--mvk-white);
  transform: translateY(-50%) rotate(90deg);
}

/* --- 6.2 Lista de navegación ---------------------------------------------- */

.mvk-hdr-menu-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.mvk-hdr-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255, 255, 255, .88);
  font-family: var(--mvk-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.01em;
  padding-block: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  text-decoration: none;
  overflow: hidden;
  transition: padding-left .45s var(--mvk-ease), color .3s ease;
}

.mvk-hdr-menu-item:hover,
.mvk-hdr-menu-item:focus-visible {
  padding-left: 12px;
  color: var(--mvk-white);
}

.mvk-hdr-menu-arrow {
  font: 400 15px/1 system-ui;
  opacity: .35;
}

/* Escalonado de entrada: paso exacto de 70ms. */
.mvk-hdr-menu-list > *:nth-child(1) { animation: mvkMenuIn .62s var(--mvk-ease) .10s both; }
.mvk-hdr-menu-list > *:nth-child(2) { animation: mvkMenuIn .62s var(--mvk-ease) .17s both; }
.mvk-hdr-menu-list > *:nth-child(3) { animation: mvkMenuIn .62s var(--mvk-ease) .24s both; }
.mvk-hdr-menu-list > *:nth-child(4) { animation: mvkMenuIn .62s var(--mvk-ease) .31s both; }
.mvk-hdr-menu-list > *:nth-child(5) { animation: mvkMenuIn .62s var(--mvk-ease) .38s both; }

.mvk-hdr-menu-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-start: 16px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--mvk-white);
  font-family: var(--mvk-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.mvk-hdr-menu-cta:hover,
.mvk-hdr-menu-cta:focus-visible {
  background: var(--mvk-white);
  color: var(--mvk-black);
  border-color: var(--mvk-white);
}

/* --- 6.3 Pie del panel: locales, horario e Instagram ----------------------- */

.mvk-hdr-menu-foot {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: mvkMenuIn .7s var(--mvk-ease) .46s both;
}

.mvk-hdr-menu-stores {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mvk-hdr-menu-stores-label {
  font: 500 9px/1 var(--mvk-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin-block-end: 10px;
}

.mvk-hdr-menu-store {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, .62);
  font: 400 13px/1.5 var(--mvk-sans);
  text-decoration: none;
  padding-block: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: color .3s ease;
}

.mvk-hdr-menu-store:hover,
.mvk-hdr-menu-store:focus-visible { color: var(--mvk-white); }

.mvk-hdr-menu-store-icon { flex: none; opacity: .6; }

.mvk-hdr-menu-hours {
  font: 300 12px/1.5 var(--mvk-sans);
  color: rgba(255, 255, 255, .42);
  padding-block-start: 12px;
}

.mvk-hdr-menu-ig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding-block-end: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  color: var(--mvk-white);
  font: 500 10.5px/1 var(--mvk-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s ease, gap .35s var(--mvk-ease);
}

/* El gap se anima: al pasar el mouse el ícono se separa del texto. */
.mvk-hdr-menu-ig:hover,
.mvk-hdr-menu-ig:focus-visible {
  border-color: var(--mvk-white);
  gap: 16px;
  color: var(--mvk-white);
}

/* ==========================================================================
   7. Foco visible — los enlaces del área también lo necesitan
   ========================================================================== */

.mvk-hdr-fixed a:focus-visible,
.mvk-hdr-menu a:focus-visible,
.mvk-hdr-menu button:focus-visible,
.mvk-hdr-burger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ==========================================================================
   Header sólido en las pantallas SIN hero

   🚨 En reposo el header es transparente con tinta BLANCA, porque está pensado
   para ir sobre el hero oscuro de la portada. Pero la portada es la única
   pantalla que abre con el hero: el catálogo, la ficha, el carrito, el
   checkout y las seis legales abren con fondo BLANCO.

   Resultado: blanco sobre blanco. El logo, el nav, la lupa y la bolsa
   quedaban invisibles hasta scrollear 30px, que es cuando entra .is-scrolled
   y el header se vuelve sólido. O sea que en media tienda el header no existía
   hasta que la persona scrolleaba — y en una pantalla corta, nunca.

   La condición es la misma que ya usa el padding de más arriba: WordPress
   marca la portada con la clase `home` (get_body_class), y front-page.php es
   la plantilla de la portada incluso cuando la portada es el listado de
   entradas. inc/preview.php agrega esa clase también en la vista previa, así
   que el hero se sigue viendo con el header transparente.
   ========================================================================== */

body:not(.home) .mvk-hdr-bg { opacity: 1; }

body:not(.home) .mvk-hdr-ink { color: var(--mvk-black); }

/* El lockup es blanco: sobre fondo claro hay que invertirlo, igual que hace
   el estado .is-scrolled. Clase duplicada por el .woocommerce img de siempre. */
body:not(.home) .mvk-hdr-logo-img.mvk-hdr-logo-img { filter: invert(1); }

/* El barrido de luz sobre el logo no tiene sentido sobre blanco. */
body:not(.home) .mvk-hdr-logo-shine { opacity: 0; }