/* ==========================================================================
   Más DTF — Cabecera
   --------------------------------------------------------------------------
   Estilo de la cabecera «MÁS DTF – Cabecera» (CPT haru_header), montada en
   Elementor sobre la Header 2 de Haru PrintSpace.

   Todo lo de aquí cuelga de .md-header. Los widgets, los textos y los enlaces
   se editan en Elementor; esto solo resuelve lo que el editor no expone:
   la rejilla de la barra, la cinta de colores, el color del botón de Haru y
   el comportamiento en móvil.

   Clases que pone Elementor (Avanzado → Clases CSS):
     .md-utilidad     barra superior            .md-u-corte    aviso de corte
     .md-contacto     bloque de WhatsApp        .md-u-frase    «contacta...»
     .md-u-wa         icono + teléfono          .md-u-horario  horario
     .md-u-subir      «sube tu diseño»
     .md-header       fila principal            .md-logo       logo
     .md-nav          menú                      .md-acciones   grupo derecho
     .md-boton-pedido botón de Haru
     .md-marquesina   franja en movimiento      .md-marquesina__pista / __texto
   ========================================================================== */

/* El degradado «Skyline» que pidió José para la barra superior y el botón.
   Ojo con el contraste: blanco sobre #1488CC da 3,87:1 (AA solo para texto
   grande); sobre #2B32B2, 9,5:1. El texto va en 500–600 para compensar. */
:root {
  --md-degradado-azul: linear-gradient(90deg, #1488CC 0%, #2B32B2 100%);
  --md-degradado-azul-hover: linear-gradient(90deg, #1179BF 0%, #232A9A 100%);
}

/* --- 0. Barra superior de utilidad ----------------------------------------
   Cuatro bloques en una línea sobre grafito. El texto del corte es el largo:
   es el único que puede partirse en dos líneas si falta sitio, porque los
   otros tres son cortos y romperlos se lee peor. */
.md-utilidad { position: relative; z-index: 1001; }

.md-utilidad > .e-con-inner {
  flex-wrap: nowrap;
  align-items: center;
  column-gap: var(--sp-8);
}

/* Solo el aviso de corte puede encoger (y partirse en dos líneas); el resto
   mantiene su ancho. Elementor pone flex-shrink: 1 por elemento con más
   especificidad, y sin el !important el bloque del WhatsApp se encogía por
   debajo de su contenido y el número se montaba sobre el horario. */
.md-utilidad .elementor-element,
.md-utilidad .e-con { flex: 0 0 auto !important; }
.md-utilidad .md-u-corte { flex: 0 1 auto !important; min-width: 0; }

.md-utilidad .elementor-heading-title {
  margin: 0;
  font-family: var(--ff-texto);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--md-blanco);
}

/* Sobre el azul de marca, el gris claro se queda en 2,8:1. Todo el texto de
   esta barra va en blanco (5,47:1) y lo que jerarquiza es el peso. */
/* «Sube tu diseño»: botón perfilado en blanco que abre Smash en otra pestaña.
   Mismo radio (8 px) que «Haz tu pedido rápido». La cadena lleva tres clases
   porque `.elementor-button.elementor-size-xs` (radio 2 px, relleno 10/20) se
   carga después y pesa lo mismo que dos. */
.md-utilidad .md-u-subir .elementor-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--r-boton);
  background: transparent;
  color: var(--md-blanco);
  font-family: var(--ff-texto);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.md-utilidad .md-u-subir .elementor-button:hover,
.md-utilidad .md-u-subir .elementor-button:focus-visible {
  background: var(--md-blanco);
  color: var(--md-azul);
  border-color: var(--md-blanco);
}

/* Horario: icono y texto en línea, sin caja. */
.md-u-horario .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.md-u-horario .elementor-icon-box-icon {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-u-horario .elementor-icon { line-height: 0; display: flex; }
.md-u-horario .elementor-icon svg { width: 15px; height: 15px; display: block; }
.md-u-horario .elementor-icon-box-description { display: none; }

.md-u-horario .elementor-icon-box-title {
  margin: 0;
  font-family: var(--ff-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Contacto por WhatsApp: icono y número en la misma línea, ambos enlazados.
   El glifo de WhatsApp es macizo y a 16 px se veía mayor que el reloj (que es
   de trazo fino): a 14 px pesan igual a la vista. El número va al mismo cuerpo
   que el horario (13 px) para que las dos líneas queden a ras; lo que lo
   destaca es el peso. */
.md-u-wa .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.md-u-wa .elementor-icon-box-icon { margin: 0; display: flex; }
.md-u-wa .elementor-icon { color: var(--md-blanco); line-height: 1; font-size: 14px; display: flex; }
.md-u-wa .elementor-icon svg { width: 14px; height: 14px; display: block; }
.md-u-wa .elementor-icon-box-description { display: none; }

.md-u-wa .elementor-icon-box-title {
  margin: 0;
  font-family: var(--ff-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.md-u-wa .elementor-icon-box-title,
.md-u-wa .elementor-icon-box-title a { color: var(--md-blanco); }
.md-u-wa a:hover .elementor-icon-box-title,
.md-u-wa .elementor-icon-box-title a:hover { color: var(--md-azul-claro); }

/* --- 1. La barra ---------------------------------------------------------- */
.md-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--md-blanco);
  box-shadow: 0 2px 10px -4px rgba(20, 24, 28, 0.28);
}

.md-header > .e-con-inner {
  flex-wrap: nowrap;
  align-items: center;
}

/* Reparto del ancho: el logo y el grupo de la derecha ocupan lo suyo y no se
   encogen; el menú se queda con el hueco que sobra. Sin esto, Elementor deja
   que todo encoja a la vez y los bloques se solapan en cuanto falta sitio. */
.md-header .md-logo,
.md-header .md-acciones { flex: 0 0 auto; }
.md-header .md-nav { flex: 1 1 auto; min-width: 0; }
.md-header .md-acciones > .elementor-element { flex: 0 0 auto; }

/* La cinta de cuatro colores del logo. Cuatro tramos iguales en un gradiente:
   ni imagen, ni divs, ni un byte de más. 5 px: a 3 José la veía fina. */
.md-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(
    to right,
    var(--md-amarillo) 0 25%,
    var(--md-azul)     25% 50%,
    var(--md-rojo)     50% 75%,
    var(--md-verde)    75% 100%
  );
}

/* --- 2. Logo --------------------------------------------------------------
   El logo es un SVG. Un SVG sin ancho intrínseco se encoge hasta desaparecer
   dentro de un contenedor flex, y `max-width: 100%` recorta la altura por el
   lado del ancho. Por eso aquí van las tres a la vez: altura fija, ancho
   automático y sin tope de ancho. La cadena `.md-header .md-logo img` es
   necesaria para ganar a `.elementor img { height: auto }`, que se carga
   después. Ojo: aquí NO se toca `display`. Haru mete cuatro variantes del logo
   (normal, retina, oscura y oscura retina) y las esconde con `display: none`;
   poniendo `display: block` con esta especificidad salen las cuatro a la vez. */
.md-logo { flex: none; }

.md-header .md-logo img {
  height: 34px;
  width: auto;
  max-width: none;
}

/* --- 3. Navegación -------------------------------------------------------- */
/* El menú va centrado en el hueco entre el logo y la lupa. */
.md-header .md-nav { justify-content: center !important; }

.md-nav .haru-nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}

.md-nav .haru-nav-menu > li { margin: 0; }

/* La separación la da el gap del flex, no el relleno de cada enlace: con el
   relleno de Haru puesto, cinco entradas se comen 150 px de más. */
.md-header .md-nav .haru-nav-menu > li > .haru-item--main {
  padding-left: 0;
  padding-right: 0;
}

/* Mismo cuerpo y peso que el menú de la plantilla PrintSpace (Theme Options →
   Menu: Manrope 16 px / 700), en mayúsculas como pidió José. La familia no se
   toca: la hereda del tema. */
.md-nav .haru-item--main {
  position: relative;
  display: flex;
  align-items: center;
  height: 84px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-grafito);
  white-space: nowrap;
}

/* Subrayado azul: acción, no decoración. Aparece en hover y en la entrada
   activa, y es lo único que marca dónde está el visitante. Va 24 px por encima
   del borde inferior, justo bajo el texto: pegado al borde quedaba tapado por
   la cinta de colores. */
.md-nav .haru-item--main::after {
  content: "";
  position: absolute;
  inset: auto 0 24px 0;
  height: 2px;
  background: var(--md-azul);
  opacity: 0;
  transition: opacity 0.12s;
}

.md-nav .haru-item--main:hover::after,
.md-nav .current-menu-item > .haru-item--main::after,
.md-nav .current-menu-ancestor > .haru-item--main::after { opacity: 1; }

/* --- 4. Grupo de la derecha ----------------------------------------------- */
.md-acciones {
  flex: none;
  flex-wrap: nowrap;
}

/* --- 7. Botón principal ---------------------------------------------------
   Haru pinta sus botones por «pre_style»; el azul de acción entra desde aquí
   con una cadena más específica que la suya, sin !important. */
.md-header .md-boton-pedido .haru-button,
.md-header .md-boton-pedido .haru-button.haru-button--bg-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 17px;
  border: 0;
  border-radius: var(--r-boton);
  background: var(--md-degradado-azul);
  color: var(--md-blanco);
  font-family: var(--ff-texto);
  font-size: 0.906rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.md-header .md-boton-pedido .haru-button:hover,
.md-header .md-boton-pedido .haru-button.haru-button--bg-black:hover {
  background: var(--md-degradado-azul-hover);
  color: var(--md-blanco);
}

/* --- 8. Buscador, cuenta y carrito ---------------------------------------- */
.md-acciones .elementor-widget-haru-woo-search,
.md-acciones .elementor-widget-haru-woo-account,
.md-acciones .elementor-widget-haru-woo-cart { flex: none; }

.md-acciones .haru-cart-number {
  background: var(--md-azul);
  color: var(--md-blanco);
}

/* --- 9. Tablet (768–1024 px) ------------------------------------------------
   Haru convierte el menú en un botón de hamburguesa por debajo de 1025 px
   (ajuste «Breakpoint» del widget). La fila queda: hamburguesa · logo · hueco ·
   buscador · cuenta · carrito · botón. Cabe en una línea.

   Elementor emite por elemento `--flex-grow` y `--width` con especificidad
   (0,3,0) y sin distinguir punto de ruptura, y por debajo de 768 px además
   fuerza `--width: 100%` a todos los contenedores. Para que la fila no se
   aplaste hay que ganarle, y la forma honesta de hacerlo es `!important` en
   estas pocas propiedades de reparto. Queda dicho aquí para que nadie lo
   «limpie» sin saber por qué está. */
@media (max-width: 1024px) {
  .md-header .md-logo img { height: 30px; }

  .md-header .md-logo,
  .md-header .md-nav,
  .md-header .md-acciones {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .md-header .md-nav { order: -1; }
  .md-header .md-acciones { margin-left: auto; }
}

/* --- 10. Móvil (≤ 767 px) ---------------------------------------------------
   Dos líneas, las dos centradas: arriba el logo con la hamburguesa al lado;
   abajo lupa · cuenta · carrito · botón. Es como lo pidió José al verlo en su
   móvil. El grupo de la derecha ocupa el 100 % (que es lo que Elementor le da
   por defecto por debajo de 768 px) y centra su contenido. */
@media (max-width: 767px) {
  /* El relleno va en el .e-con-inner y no en el contenedor: Elementor pone el
     suyo por variables con más especificidad. Arriba poco (el logo ya respira
     con la barra azul) y abajo más, para que el botón no toque la cinta. */
  .e-con.e-flex.md-header > .e-con-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 14px;
    column-gap: var(--sp-4);
    padding-block: 8px 16px;
  }
  .md-header .md-logo img { height: 28px; }
  .md-header .md-nav { order: 0; }

  .md-header .md-acciones {
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0;
    column-gap: var(--sp-4) !important;
  }
  .md-header .md-boton-pedido { margin-left: var(--sp-1); }
  .md-header .md-boton-pedido .haru-button {
    height: 40px;
    padding-inline: 14px;
    font-size: 0.8125rem;
  }
}

/* --- 11. Menú desplegable en tablet y móvil (≤ 1024 px) ---------------------
   Haru abre el menú con jQuery: al tocar la hamburguesa le pone .haru-active,
   hace slideToggle() del <nav class="haru-nav-menu--dropdown"> (lo deja con
   display:block en línea) y, como el widget es «stretch», le escribe también
   top, left, width y max-height en línea. Para convertirlo en una capa a
   pantalla completa con el degradado hay que ganar a esos estilos en línea, y
   contra un estilo en línea solo vale !important. Queda dicho.

   La capa empieza justo debajo de la fila blanca, no en el borde de la
   pantalla: así el logo y la X siguen a la vista y no hay que pelear con la
   barra azul de arriba. El borde inferior de la fila lo mide marquesina.js
   al tocar la hamburguesa y lo deja en --md-menu-top. */
@media (max-width: 1024px) {
  .md-nav .haru-menu-toggle {
    position: relative;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    color: var(--md-grafito);
    font-size: 26px;
  }
  .md-nav .haru-menu-toggle:hover,
  .md-nav .haru-menu-toggle.haru-active { background: rgba(52, 58, 64, 0.08); }

  /* Seis clases, a propósito: el CSS por elemento de Elementor pone al
     desplegable un margin-top con !important (15 px en tablet, 10 en móvil,
     ajuste «Distance» del widget) con cinco clases y se carga después. */
  .md-header .md-nav .elementor-element.elementor-widget-haru-nav-menu .haru-nav-menu__container.haru-nav-menu--dropdown {
    position: fixed !important;
    top: var(--md-menu-top, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    background: var(--md-degradado-azul);
    box-shadow: none;
    font-size: 100%;
    animation: md-menu-aparece 0.22s ease-out;
  }

  /* La lista ocupa toda la capa y centra las entradas en vertical y en
     horizontal, como en la referencia que mandó José. */
  .md-nav .haru-nav-menu--dropdown .haru-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 100%;
    margin: 0;
    padding: var(--sp-8) var(--sp-6) var(--sp-12);
  }

  .md-nav .haru-nav-menu--dropdown li {
    position: relative;
    width: 100%;
    max-width: 420px;
    text-align: center;
  }

  .md-header .md-nav .haru-nav-menu--dropdown .haru-item {
    display: block;
    padding: 14px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--md-blanco);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
  }
  .md-header .md-nav .haru-nav-menu--dropdown .haru-item:hover,
  .md-header .md-nav .haru-nav-menu--dropdown .haru-item:focus,
  .md-header .md-nav .haru-nav-menu--dropdown .haru-item.highlighted,
  .md-header .md-nav .haru-nav-menu--dropdown .haru-item.haru-item-active,
  .md-header .md-nav .haru-nav-menu--dropdown .current-menu-item > .haru-item {
    background: rgba(255, 255, 255, 0.14);
    color: var(--md-blanco);
  }

  /* Submenús (cuando «Información» tenga entradas): más pequeños, sin sangría
     lateral y en el mismo blanco. La flecha de Haru se queda a la derecha. */
  .md-header .md-nav .haru-nav-menu--dropdown .sub-menu { padding: 0 0 var(--sp-2); }
  .md-header .md-nav .haru-nav-menu--dropdown ul ul .haru-item {
    padding: 10px 16px;
    border-left: 0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.92;
  }
  .md-header .md-nav .haru-nav-menu--dropdown span.sub-arrow {
    right: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--md-blanco);
  }
  .md-header .md-nav .haru-nav-menu--dropdown .haru-item img { filter: brightness(0) invert(1); }
}

/* Con el menú abierto, el botón «volver arriba» de Haru (z-index 999, como la
   cabecera, pero va después en el HTML) se colaría por encima de la capa. */
body:has(.md-header .haru-menu-toggle.haru-active) .back-to-top { display: none; }

@keyframes md-menu-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .md-header .md-nav .haru-nav-menu--dropdown { animation: none; }
}

/* --- 14. Franja en movimiento ---------------------------------------------
   El texto se escribe una sola vez en Elementor; assets/js/marquesina.js lo
   clona en número par y ajusta la duración para que la velocidad sea siempre
   la misma. La animación desplaza el 50 % de la pista: con las copias justas,
   al reiniciarse el fotograma es idéntico y no se ve el salto.

   Sin JavaScript, o con movimiento reducido, la pista se queda quieta: el
   texto sigue siendo legible, que es lo que importa. */
.e-con.md-marquesina,
.md-marquesina {
  overflow: hidden;
  position: relative;
}

.md-marquesina > .e-con-inner {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* La pista la crea el JS: es un div normal, no un contenedor de Elementor.
   Así no hay que pelear con los anchos que Elementor le pone a los suyos. */
.md-marquesina__pista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
}

.md-marquesina__pista--activa {
  will-change: transform;
  animation: md-desplaza 40s linear infinite;
}

.md-marquesina:hover .md-marquesina__pista--activa,
.md-marquesina:focus-within .md-marquesina__pista--activa {
  animation-play-state: paused;
}

.md-marquesina .md-marquesina__texto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.md-marquesina__texto .elementor-heading-title {
  margin: 0;
  padding: 0;
  font-family: var(--ff-texto);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--md-blanco);
}

/* En Elementor el texto se escribe seguido, con « · » entre mensajes. El JS
   parte por los puntos y envuelve cada mensaje en un span que empieza por su
   propio «·»: así el punto va pegado a su frase y la separación (48 px) queda
   entre un mensaje y el siguiente, también entre la última copia y la primera. */
.md-marquesina__item {
  display: inline-block;
  padding-inline-end: var(--sp-12);
}

@keyframes md-desplaza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .md-marquesina__pista,
  .md-marquesina__pista--activa {
    animation: none;
    transform: none;
  }
  .md-marquesina { overflow-x: auto; }
}

/* --- 15. Barra superior en escritorio estrecho (1025–1499 px) --------------
   Con los textos largos de José (aviso de corte + «Contacta con nosotros de
   manera rápida» + horario + botón) la barra no cabe en una línea por debajo
   de 1500 px y el aviso se partía en dos. El horario es lo que se retira: está
   en el pie y en las páginas de producto. */
@media (min-width: 1025px) and (max-width: 1499px) {
  .md-u-horario { display: none; }
}

/* --- 16. Barra superior y franja en tablet y móvil ------------------------- */
@media (max-width: 1024px) {
  /* El hueco entre bloques (32 px) lo pone Elementor también entre filas, y el
     contenedor del WhatsApp hereda el 100 % de ancho: sin estas dos correcciones
     la barra se va a tres filas separadas por 32 px. Mismo motivo que en la
     fila principal para el !important. */
  .md-utilidad > .e-con-inner {
    flex-wrap: wrap;
    justify-content: center !important;
    row-gap: 6px !important;
    column-gap: var(--sp-5) !important;
  }
  .md-utilidad .md-u-corte { flex: 1 1 100%; text-align: center; }
  .md-utilidad .elementor-heading-title { font-size: 0.78rem; }

  /* Por debajo de 1025 px la barra se queda con el corte y el horario. El
     WhatsApp se retira en tablet y móvil (José pondrá un botón flotante de
     WhatsApp abajo a la derecha) y el aviso de subida no cabe: los dos vuelven
     a partir de 1025 px. */
  .md-utilidad .md-contacto,
  .md-u-subir { display: none; }
}

/* En un móvil de 360 px la barra superior se queda solo con el aviso de corte,
   que es el que sirve para decidir. El horario está en la franja de abajo y en
   Información; el WhatsApp irá en el botón flotante. */
@media (max-width: 767px) {
  .md-utilidad > .e-con-inner { row-gap: 8px !important; }

  .md-utilidad .elementor-heading-title {
    text-align: center;
    font-size: 0.78rem;
  }

  .md-u-horario,
  .md-u-subir { display: none; }

  .md-marquesina__texto .elementor-heading-title { font-size: 0.75rem; }
  .md-marquesina__item { padding-inline-end: var(--sp-8); }
}