/* ───────── barra de promociones ───────── */
.mp-promos{
  background:var(--mp-tinta);
  color:var(--mp-papel);
  overflow:hidden;
  padding-block:.5rem;
}
.mp-promos__riel{
  display:flex;
  width:max-content;
  animation:mp-desfile 42s linear infinite;
}
.mp-promos__grupo{ display:flex; align-items:center; flex:0 0 auto }
.mp-promos__item{ padding-inline:1.15rem; white-space:nowrap; font-size:.6875rem; letter-spacing:.18em }
.mp-promos__item a:hover{ color:var(--mp-papel); text-decoration:underline; text-underline-offset:3px }
.mp-promos__sep{ font-size:.4rem; opacity:.5 }

@keyframes mp-desfile{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.mp-promos__riel:hover{ animation-play-state:paused }
@media (prefers-reduced-motion: reduce){
  .mp-promos__riel{ animation:none; width:100% }
  .mp-promos__grupo:nth-child(2){ display:none }
  .mp-promos__grupo{ justify-content:center; flex-wrap:wrap; width:100% }
}

/* ───────── fila de servicio ───────── */
.mp-cab__servicio{
  background:var(--mp-lino);
  border-bottom:1px solid var(--mp-hilo);
  display:none;
}
@media (min-width:900px){ .mp-cab__servicio{ display:block } }
.mp-cab__servicio-int{
  display:flex; justify-content:flex-end; gap:1.75rem;
  padding-block:.45rem;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mp-tinta-2);
}
.mp-cab__servicio-int a{ transition:color var(--mp-rapido) var(--mp-easing) }

/* ───────── barra principal ───────── */
.mp-cab{
  position:sticky; top:0; z-index:60;
  background:var(--mp-papel);
  border-bottom:1px solid var(--mp-hilo);
}
/* En el teléfono las dos orillas tienen que pesar lo mismo o el logotipo no queda
   centrado: a la izquierda hay UN ícono (el menú) y a la derecha DOS (buscar y carrito),
   así que con `auto 1fr auto` la columna del medio nacía corrida y la marca quedaba
   23 px a la izquierda del centro real de la pantalla. Con dos `1fr` iguales, el centro
   de la columna del medio ES el centro de la pantalla. */
.mp-cab__barra{
  display:grid;
  /* Las dos orillas con el MISMO ancho fijo, no con `1fr`: a la izquierda hay un ícono
     y a la derecha tres, y un `1fr` crece hasta el tamaño de su contenido, así que la
     columna derecha se hacía más ancha y volvía a descentrar el logotipo. */
  grid-template-columns:var(--mp-cab-lado) 1fr var(--mp-cab-lado);
  align-items:center;
  gap:0;
  padding-block:.9rem;
}
@media (min-width:900px){
  .mp-cab__barra{ grid-template-columns:auto 1fr auto; gap:var(--mp-e2); padding-block:1.15rem }
}

.mp-cab__menu-btn{
  display:flex; align-items:center; justify-content:flex-start;
  flex:0 0 auto; width:32px; height:40px; padding:0;
}
.mp-cab__menu-btn svg{ width:22px; height:16px }
@media (min-width:900px){ .mp-cab__menu-btn{ display:none } }

.mp-cab__marca{ justify-self:center }
@media (min-width:900px){ .mp-cab__marca{ justify-self:start } }
.mp-cab__logotipo{
  font-family:var(--mp-sans);
  font-size:.9375rem; font-weight:500;
  /* el espaciado cede en pantallas angostas: es lo único flexible de la fila, porque
     los íconos ya no se achican y el nombre no se puede cortar en dos líneas */
  letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
}
@media (min-width:480px){ .mp-cab__logotipo{ letter-spacing:.22em } }
@media (min-width:900px){ .mp-cab__logotipo{ font-size:1.0625rem; letter-spacing:.3em } }
.mp-cab__marca .custom-logo{ max-height:34px; width:auto }

/* navegación */
.mp-cab__nav{ display:none }
@media (min-width:900px){ .mp-cab__nav{ display:block; justify-self:center } }
/*
 * El aire entre secciones va DENTRO de cada enlace, no en un `gap` de la lista.
 *
 * Con `gap:1.75rem` quedaban 28 px de tierra de nadie entre un ítem y el siguiente: al
 * cruzarlos ningún `li` estaba en hover, el panel abierto arrancaba su desvanecido y el
 * de la sección nueva volvía a entrar. Medido sobre una grabación real del menú: 12
 * apagones en 13 segundos, la mayoría de 16 a 100 ms. En el home era peor, porque con
 * el panel abierto la cabecera entera cambia de color y también parpadeaba.
 *
 * Ahora las zonas sensibles se tocan y no hay por dónde caerse. El espaciado visual es
 * el mismo: los 28 px se reparten en 14 a cada lado del enlace.
 */
.mp-nav-lista{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0;
}
.mp-nav-lista a{
  display:block; padding-block:.25rem;
  position:relative;
  transition:color var(--mp-rapido) var(--mp-easing);
}
@media (min-width:900px){
  .mp-cab__nav .mp-nav-lista > li > a{
    padding-inline:.875rem;
    /* y además crece hacia arriba y abajo para cubrir el alto de la barra, sin mover
       la fila: el margen negativo devuelve exactamente lo que suma el relleno nuevo */
    padding-block:1.15rem;
    margin-block:-.9rem;
  }
}
/* el subrayado crece desde la izquierda: único gesto de movimiento del menú */
.mp-nav-lista > li > a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--mp-medio) var(--mp-easing);
}
/* sigue pegado al texto, no al borde del relleno nuevo */
@media (min-width:900px){
  .mp-cab__nav .mp-nav-lista > li > a::after{
    left:.875rem; right:.875rem; width:auto; bottom:.9rem;
  }
}
.mp-nav-lista > li > a:hover::after,
.mp-nav-lista > li.current-menu-item > a::after{ transform:scaleX(1) }

/*
 * Entre 900 y 1199 px no caben siete secciones con 28 px de aire cada una más el
 * logotipo y los íconos: el navegador partía las palabras por la mitad («NUEV/O»,
 * «TAPAD/OS») en todo el sitio. Se prohíbe cortar y, sólo en ese tramo, el aire baja
 * a 16 px por sección y el logotipo aprieta su espaciado. Sobre 1200 px, nada cambia.
 */
.mp-cab__nav .mp-nav-lista > li > a{ white-space:nowrap }
@media (min-width:900px) and (max-width:1199px){
  .mp-cab__nav .mp-nav-lista > li > a{ padding-inline:.4rem; letter-spacing:.1em }
  .mp-cab__nav .mp-nav-lista > li > a::after{ left:.4rem; right:.4rem }
  .mp-cab__logotipo{ letter-spacing:.14em }
}
/* con la octava sección (Noticias) tampoco bastaba entre 900 y 959: sobraban 55 px
   medidos. Ahí la letra baja a 11 px y el espaciado se aprieta un poco más. */
@media (min-width:900px) and (max-width:959px){
  .mp-cab__nav .mp-nav-lista > li > a{ padding-inline:.3rem; letter-spacing:.06em; font-size:.6875rem }
  .mp-cab__nav .mp-nav-lista > li > a::after{ left:.3rem; right:.3rem }
  .mp-cab__logotipo{ letter-spacing:.1em }
}

/* utilidades */
/*
 * Los íconos NO se encogen. Con `1fr auto 1fr` las columnas laterales quedan en ~70 px
 * y, como los `svg` traen `max-width:100%`, los tres íconos se achicaban para caber:
 * declaraban 19 px y se dibujaban a 11. Se fija el tamaño y se prohíbe encoger; el que
 * cede es el logotipo, que abajo suelta letra en pantallas chicas.
 */
.mp-cab__util{ display:flex; align-items:center; gap:.15rem; justify-self:end; flex:0 0 auto }
.mp-cab__icono{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:32px; height:40px; padding:0;
}
.mp-cab__icono svg, .mp-cab__menu-btn svg{ flex:0 0 auto }
/*
 * Los tres íconos están dibujados en la MISMA caja de 24 y con la tinta medida: 17
 * unidades de ancho y centro exacto en (12,12) los tres, trazo 1,5 los tres. Antes la
 * caja de cada uno medía lo mismo pero el dibujo de adentro no: la lupa ocupaba 19 px
 * en pantalla, la bolsa 16,2 y el corazón 13,8. Igualar la caja no sirve de nada si lo
 * que se ve es la tinta. Si algún día se cambia uno de los tres, medir con `getBBox()`
 * y volver a dejarlo en 17 de ancho centrado en (12,12) — no compensar con el trazo.
 */
.mp-cab__icono svg{ width:24px; height:24px }
.mp-cab__cuenta{
  position:absolute; top:-2px; right:-4px;
  min-width:15px; height:15px; padding:0 3px;
  background:var(--mp-vino); color:#fff;
  font-size:.5625rem; font-weight:600; line-height:15px; text-align:center;
  border-radius:8px; font-variant-numeric:tabular-nums;
}

/* ═══════════ MEGA MENÚ ═══════════ */
/* El panel es ancho completo: se posiciona contra la cabecera, no contra el <li>,
   por eso los <li> del primer nivel quedan `static`. */
.mp-nav-lista > li{ position:static }

.mp-mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--mp-papel);
  border-top:1px solid var(--mp-hilo);
  border-bottom:1px solid var(--mp-hilo);
  box-shadow:0 18px 40px -24px rgba(30,27,25,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  /*
   * Abre al instante; para cerrarse, espera. Ese respiro es lo que permite bajar del
   * enlace al panel —que están a 19 px, porque el enlace termina antes que la barra—
   * y cambiar de sección sin que se apague en el camino. Al entrar en hover la espera
   * pasa a 0, así que abrir nunca se siente lento.
   */
  --mp-mega-espera:.16s;
  transition:
    opacity var(--mp-rapido) var(--mp-easing) var(--mp-mega-espera),
    transform var(--mp-rapido) var(--mp-easing) var(--mp-mega-espera),
    visibility var(--mp-rapido) var(--mp-mega-espera);
  z-index:70;
}
@media (max-width:899px){ .mp-cab__nav .mp-mega{ display:none } }
@media (min-width:900px){
  .mp-nav-lista > li:hover > .mp-mega,
  .mp-nav-lista > li:focus-within > .mp-mega{ opacity:1; visibility:visible; transform:none; --mp-mega-espera:0s }
}

.mp-mega__int{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--mp-e6);
  align-items:start; padding-block:var(--mp-e4) var(--mp-e5);
}
/*
 * Todos los paneles miden lo mismo.
 *
 * El alto lo fija la tira de fotos: 337 px. Pero una columna con más enlaces que eso
 * empuja su panel, y entonces el borde de abajo salta al cambiar de sección: pasaba con
 * Accesorios, 394 px contra 337 de los demás, 56 px de un fotograma al siguiente. Ese
 * caso se resolvió partiendo la columna de aros en dos dentro del menú; este piso es el
 * seguro de que no vuelva a aparecer si mañana crece otra columna.
 *
 * Incluye el relleno, porque todo el tema es `border-box`.
 */
@media (min-width:1101px){
  .mp-mega__int{ min-height:21rem }
}
.mp-mega__cols{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap:var(--mp-e4);
}
/* título de cada columna: es un enlace muerto («#»), se muestra como rótulo */
.mp-mega__cols > li > a{
  display:block; margin-bottom:.9rem;
  font-size:var(--mp-t-nav); font-weight:600; letter-spacing:var(--mp-track-etq);
  text-transform:uppercase; color:var(--mp-tinta-3);
  pointer-events:none; cursor:default;
}
.mp-mega__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem }
.mp-mega__lista a{
  font-size:.875rem; letter-spacing:0; text-transform:none; color:var(--mp-tinta-2);
  transition:color var(--mp-rapido) var(--mp-easing);
}
.mp-mega__lista a:hover{ color:var(--mp-vino) }

.mp-mega__fotos{ display:flex; gap:.9rem }
.mp-mega__foto{ display:block; width:168px }
.mp-mega__foto img{
  width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--mp-lino);
  transition:opacity var(--mp-rapido) var(--mp-easing);
}
.mp-mega__foto:hover img{ opacity:.85 }
.mp-mega__foto-pie{ display:block; margin-top:.55rem; color:var(--mp-tinta-2); font-size:.625rem }
.mp-mega__foto:hover .mp-mega__foto-pie{ color:var(--mp-vino) }
/* en el panel del diario, bajo la etiqueta del tema va el título de la nota */
.mp-mega__foto-tit{
  display:block; margin-top:.3rem; font-size:.8125rem; line-height:1.35; color:var(--mp-tinta);
  text-transform:none; letter-spacing:0;
}
.mp-mega__foto--nota:hover .mp-mega__foto-tit{ text-decoration:underline; text-underline-offset:3px }
@media (max-width:1280px){ .mp-mega__foto:nth-child(3){ display:none } }
@media (max-width:1100px){ .mp-mega__fotos{ display:none } .mp-mega__int{ grid-template-columns:1fr } }

/* ═══════════ CABECERA SOBRE LA FOTO (solo el home) ═══════════ */
:root{ --mp-cab-alto:62px; --mp-cab-lado:96px }
/* En un teléfono chico (bajo 400 px) la fila no da: se recorta la CAJA de los íconos,
   no el ícono, y el logotipo suelta cuerpo y letra. Antes se desbordaba. */
@media (max-width:399px){
  :root{ --mp-cab-lado:90px }
  .mp-cab__icono, .mp-cab__menu-btn{ width:30px }
  .mp-cab__logotipo{ font-size:.875rem; letter-spacing:.1em }
}
/* Bajo 360 px ya no hay forma de centrar un nombre de catorce letras entre un ícono a
   la izquierda y tres a la derecha sin que se pisen. Ahí el logotipo deja de ir al
   centro y se apoya en el botón del menú, como en el escritorio: se prefiere eso a que
   la cabecera se salga de la pantalla. */
@media (max-width:359px){
  .mp-cab__barra{ grid-template-columns:auto 1fr auto; gap:.5rem }
  .mp-cab__marca{ justify-self:start }
}
@media (min-width:900px){ :root{ --mp-cab-alto:105px } }

body.home .mp-cab{
  background:transparent; border-bottom-color:transparent; color:var(--mp-papel);
  height:var(--mp-cab-alto);
  transition:background-color var(--mp-medio) var(--mp-easing), color var(--mp-medio) var(--mp-easing), border-color var(--mp-medio) var(--mp-easing);
  /* la misma espera que el panel: si no, al cambiar de sección la cabecera se destiñe
     y vuelve a pintarse, que es el salto grande que se ve en el home */
  transition-delay:.16s;
}
body.home .mp-cab__servicio{ background:transparent; border-bottom-color:transparent; color:inherit }
body.home .mp-cab__barra{ padding-block:0; height:auto }
@media (min-width:900px){ body.home .mp-cab__barra{ min-height:calc(var(--mp-cab-alto) - 29px) } }
@media (max-width:899px){ body.home .mp-cab__barra{ height:var(--mp-cab-alto) } }

/* el contenido sube y queda debajo de la cabecera transparente */
body.home .mp-principal{ margin-top:calc(-1 * var(--mp-cab-alto)) }

/* al bajar, la cabecera recupera su fondo y su tinta */
html.mp-desplazado body.home .mp-cab{
  background:var(--mp-papel); color:var(--mp-tinta); border-bottom-color:var(--mp-hilo);
}
html.mp-desplazado body.home .mp-cab__servicio{ background:var(--mp-lino); border-bottom-color:var(--mp-hilo) }

/* sobre la foto, los enlaces de servicio van en papel translúcido o no se leen */
body.home .mp-cab__servicio-int{ color:rgba(251,250,247,.82) }
body.home .mp-cab__servicio-int a:hover{ color:var(--mp-papel) }
html.mp-desplazado body.home .mp-cab__servicio-int{ color:var(--mp-tinta-2) }
html.mp-desplazado body.home .mp-cab__servicio-int a:hover{ color:var(--mp-vino) }

/* con el mega menú abierto la cabecera se vuelve sólida: si no, su franja deja ver
   la foto del hero por detrás del panel blanco y se ve sucio */
body.home .mp-cab:has(.mp-nav-lista > li:hover > .mp-mega),
body.home .mp-cab:has(.mp-nav-lista > li:focus-within > .mp-mega){
  background:var(--mp-papel); color:var(--mp-tinta); border-bottom-color:var(--mp-hilo);
  transition-delay:0s;
}
body.home .mp-cab:has(.mp-nav-lista > li:hover > .mp-mega) .mp-cab__servicio,
body.home .mp-cab:has(.mp-nav-lista > li:focus-within > .mp-mega) .mp-cab__servicio{
  background:var(--mp-lino); border-bottom-color:var(--mp-hilo);
}
body.home .mp-cab:has(.mp-nav-lista > li:hover > .mp-mega) .mp-cab__servicio-int,
body.home .mp-cab:has(.mp-nav-lista > li:focus-within > .mp-mega) .mp-cab__servicio-int{
  color:var(--mp-tinta-2);
}