/*
 * Masviral · hoja principal
 *
 * Los valores de esta hoja no son inventados: salen de medir la portada y la
 * ficha de la flota (contenedor 1170, columna de texto 780, barra lateral 340,
 * cuerpo 18 px con interlineado 1.8, titular 30/600, tarjeta 19/600). Si algún
 * número hay que tocar, se toca aquí y en ningún otro sitio: todo lo demás usa
 * las variables.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  --mv-azul: #003399;
  --mv-azul-oscuro: #002a7d;
  /* Comentario: color de acento del medio (bordes de las cabeceras de bloque,
     categorías y botones). En la flota es el azul corporativo. */
  --mv-accent: var(--mv-azul);
  --mv-rojo: #b30037;
  --mv-rojo-oscuro: #8f002c;
  --mv-ink: #313131;
  --mv-ink-soft: #4a4a4a;
  /* Comentario: 12 px sobre blanco exigen 4.5:1; #6b6b6b lo cumple (5.1:1) y
     sigue leyéndose como secundario frente al color del texto. */
  --mv-muted: #6b6b6b;
  --mv-muted-strong: #6b6b6b;
  --mv-line: #e5e5e5;
  --mv-line-soft: #f0f0f0;
  --mv-bg: #ffffff;
  --mv-bg-soft: #f6f7f9;
  --mv-bg-dark: #1b1d21;

  --mv-font-body: "Artnoova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mv-font-ui: "Aleo", Georgia, "Times New Roman", serif;
  --mv-font-alt: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --mv-container: 1170px;
  --mv-single-main: 780px;
  --mv-sidebar: 340px;
  --mv-gap: 50px;
  --mv-radius: 3px;

  --mv-text: 18px;
  --mv-leading: 1.8;
  --mv-h1: 30px;
  --mv-h2: 24px;
  --mv-h3: 20px;
  --mv-card-title: 19px;
  --mv-small: 12px;

  /* Alto real de la cabecera: una sola fila de 84 px con el logo y el menú (81 px
     en móvil). Antes eran dos bandas de 90 + 58 = 148 px. */
  --mv-header-height: 84px;
  --mv-stickybar-height: 70px;
  --mv-transition: 160ms ease;
}

/* ---------------------------------------------------------------- reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Comentario: el panel lateral y los buscadores viven fuera del lienzo hasta que
     se abren; con `clip` no generan scroll horizontal (a diferencia de `hidden`, no
     rompe el `scroll-behavior` suave). */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--mv-bg);
  color: var(--mv-ink);
  font-family: var(--mv-font-body);
  font-size: var(--mv-text);
  font-weight: 400;
  line-height: var(--mv-leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Comentario: las imágenes se entregan envueltas en `<picture>` (WebP con el JPEG
   de respaldo). Sin esto, el `<picture>` mete una caja intermedia en el árbol y las
   miniaturas que se estiran con `height: 100%` —las de las listas— se quedan sin
   altura de referencia y encogen. `display: contents` hace que el elemento no
   genere caja: la imagen sigue colgando del contenedor de siempre. */
picture {
  display: contents;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--mv-azul);
  text-decoration: none;
  transition: color var(--mv-transition);
}

a:hover,
a:focus-visible {
  color: var(--mv-rojo);
}

p {
  margin: 0 0 17px;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mv-ink);
}

h1 {
  font-size: var(--mv-h1);
  line-height: 1.35;
}

h2 {
  font-size: var(--mv-h2);
}

h3 {
  font-size: var(--mv-h3);
}

ul,
ol {
  margin: 0 0 17px;
  padding-left: 22px;
}

blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mv-rojo);
  font-style: italic;
  color: var(--mv-ink-soft);
}

figure {
  margin: 24px 0;
}

figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--mv-muted-strong);
  line-height: 1.5;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 16px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mv-line);
  text-align: left;
}

th {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--mv-line);
  margin: 30px 0;
}

:focus-visible {
  outline: 2px solid var(--mv-azul);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  background: var(--mv-azul);
  color: #fff;
  font-family: var(--mv-font-alt);
  font-size: 14px;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ----------------------------------------------------------- estructura --- */

.mv-container {
  width: 100%;
  /* Comentario: el ancho útil de la flota es 1170; los 16 px de respiración van
     fuera de esa medida, de ahí la suma en el `max-width`. */
  max-width: calc(var(--mv-container) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.mv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 32px 0 48px;
}

.mv-layout--single {
  max-width: var(--mv-container);
}

@media (min-width: 1024px) {
  .mv-layout {
    grid-template-columns: minmax(0, var(--mv-single-main)) var(--mv-sidebar);
    gap: var(--mv-gap);
  }

  .mv-layout--full {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mv-main {
  min-width: 0;
}

.mv-sidebar {
  min-width: 0;
  display: grid;
  gap: 30px;
  align-content: start;
}

@media (min-width: 1024px) {
  .mv-sidebar--sticky {
    position: sticky;
    top: calc(var(--mv-stickybar-height) + 16px);
    align-self: start;
  }
}

/* --------------------------------------------------------------- cabecera -- */

/* Comentario: la cabecera es UNA sola fila de 84 px: logo a la izquierda y menú
   pegado a la derecha. Antes eran dos bandas (90 px de logo y 58 de menú, 148 en
   total) y el menú colgaba centrado de una fila vacía.

   El filo de 3 px de arriba es la firma de marca: da color sin meter una caja. La
   línea fina y la sombra de abajo son las MISMAS de la barra pegajosa
   (`0 2px 12px rgba(0, 0, 0, .1)`), de modo que al hacer scroll la cabecera no
   cambia de acabado: se encoge, nada más. */
.mv-header {
  position: relative;
  z-index: 900;
  /* Comentario: `min-height` y no `height` porque debajo de la fila puede colgar el
     hueco de publicidad de cabecera: con una altura cerrada, el anuncio se salía de
     la caja y la sombra quedaba en mitad de la nada. */
  min-height: var(--mv-header-height);
  background: var(--mv-bg);
  /* Comentario: los dos filos van como sombra interior para no sumar altura: así
     `--mv-header-height` es el alto REAL de la pieza y el umbral de la barra
     pegajosa no se descoloca. El de arriba es la firma de marca (3 px de azul); el
     de abajo, el hairline. La tercera sombra es la MISMA de la barra fija, para que
     al hacer scroll la cabecera no cambie de acabado: se encoge y ya. */
  box-shadow:
    inset 0 3px 0 var(--mv-azul),
    inset 0 -1px 0 var(--mv-line),
    0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Comentario: la fila mide exactamente `--mv-header-height`, sin relleno vertical:
   así el subrayado de la sección activa puede ir pegado al borde inferior de la
   cabecera y leerse como una pestaña. `position: relative` sirve de ancla al panel
   del megamenú, que ocupa el ancho de la maqueta. */
.mv-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--mv-header-height);
}

/* Comentario: el bloque de marca no se encoge nunca. Sin esto, cuando la fila va
   justa de ancho (logo largo + nueve secciones), el `flex-shrink` repartía la falta
   de sitio entre el logo y el menú y el logo acababa con 0 px de ancho. */
.mv-brand {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mv-logo,
.mv-brand img {
  display: block;
  width: auto;
  max-width: 220px;
  /* Comentario: 48 px de logo en una fila de 84 deja 18 px de aire arriba y abajo.
     La barra fija usa la MISMA medida: al hacer scroll el logo no cambia de tamaño,
     solo se le quita el aire. */
  max-height: 48px;
  object-fit: contain;
}

.mv-brand-name {
  font-family: var(--mv-font-ui);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mv-azul);
  letter-spacing: -0.01em;
}

.mv-brand-tagline {
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-muted-strong);
  letter-spacing: 0.03em;
}

/* Comentario: la fecha y las redes de la fila superior se fueron con la fila. El
   bloque `.mv-topbar-social` sigue vivo porque el pie lo reutiliza. */
.mv-topbar-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mv-topbar-social a {
  color: var(--mv-muted-strong);
}

.mv-topbar-social a:hover {
  color: var(--mv-azul);
}

.mv-search-toggle,
.mv-drawer-toggle,
.mv-stickybar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: transparent;
  color: var(--mv-ink);
  cursor: pointer;
  transition: border-color var(--mv-transition), color var(--mv-transition);
}

.mv-search-toggle:hover,
.mv-drawer-toggle:hover,
.mv-stickybar-toggle:hover {
  border-color: var(--mv-azul);
  color: var(--mv-azul);
}

/* En escritorio el buscador está a la vista y el menú en la barra, así que los
   botones de móvil no se pintan. */
.mv-search-toggle,
.mv-drawer-toggle,
.mv-stickybar-toggle {
  display: none;
}

/*
 * Comentario: la hamburguesa es la de Ideal.
 *
 * Su sprite público (`#icon-hamburger-menu`) traza cuatro líneas de distinta
 * longitud sobre un lienzo de 24×24. Se dibuja como máscara CSS de 26×24 para que
 * herede el color del botón, y el carácter ☰ del marcado se oculta con
 * `font-size: 0` en vez de borrarlo: sigue siendo el respaldo si el CSS no carga.
 *
 * Vale para los dos botones del menú, el de la cabecera y el de la barra pegajosa:
 * son el mismo gesto y tienen que verse igual.
 */
.mv-drawer-toggle>span,
.mv-stickybar-toggle>span {
  position: relative;
  display: block;
  width: 26px;
  height: 24px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.mv-drawer-toggle>span::before,
.mv-stickybar-toggle>span::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.375 17.75a.625.625 0 1 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h14.75Zm-4.571-4.25a.625.625 0 0 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h10.179Zm4.571-4.25a.625.625 0 1 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h14.75Zm0-4.25a.625.625 0 1 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h14.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.375 17.75a.625.625 0 1 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h14.75Zm-4.571-4.25a.625.625 0 0 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h10.179Zm4.571-4.25a.625.625 0 1 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h14.75Zm0-4.25a.625.625 0 1 1 0 1.25H4.625a.625.625 0 1 1 0-1.25h14.75Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/*
 * Comentario: orden de la fila.
 *
 * Marca, menú y botón; el menú se pega a la derecha con `margin-left: auto`, que
 * es lo que deja el hueco del logo a la izquierda. El cajón y la barra pegajosa
 * reutilizan la misma marca de orden: no hay dos maquetas que mantener.
 */
.mv-header-inner .mv-brand {
  order: 1;
  margin-right: 0;
}

/* Comentario: el menú cierra la fila a la derecha; la marca se queda pegada a la
   izquierda sin márgenes de más. */
.mv-header-inner .mv-nav {
  order: 2;
  margin-left: auto;
}

.mv-header-inner .mv-drawer-toggle {
  order: 3;
  margin-left: auto;
}

@media (min-width: 1024px) {

  /*
   * Comentario: modo «hamburguesa también en escritorio» (`.mv-nav-drawer`).
   *
   * AÑADE un camino, no quita el que había: la barra de secciones sigue entera y, a
   * su derecha, aparece la hamburguesa que abre el panel lateral. Los dos caminos
   * conviven.
   *
   * La primera versión de esta regla escondía `.mv-nav` para hacerle sitio al botón.
   * Fue un error: el sitio se quedaba sin la navegación principal de escritorio.
   * Aquí no se oculta nada; el sitio se gana apretando el menú (ver `--mv-menu-pad`).
   */
  .mv-nav-drawer .mv-header-inner .mv-drawer-toggle {
    position: static;
    display: inline-flex;
    /* Comentario: `flex: 0 0 auto` no es adorno. Con la barra llena, el `shrink`
       repartía la falta de ancho entre los enlaces y el botón, y el botón bajaba de
       44 a 31 px. El botón no se encoge: si no cabe todo, se aprieta el menú. */
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0 0 0 4px;
    order: 3;
    z-index: 40;
  }

  /*
   * Comentario: el aire que necesita la hamburguesa.
   *
   * Medido en producción con las 17 secciones del menú y el contenedor de 1202 px:
   * el menú ocupa 903 y al contenedor le quedan 2 px libres a 1366. Con 14 px de
   * relleno por enlace no cabe un botón de 44, así que se aprieta el relleno a 11 px
   * (17 enlaces × 2 lados × 3 px = 102 px recuperados) y el botón entra sin tocar el
   * tamaño del texto ni quitar ninguna sección.
   *
   * Al anularse el margen derecho negativo, el último rótulo ya no llega al borde de
   * la columna: acaba donde empieza el botón, que es lo correcto.
   */
  .mv-nav-drawer .mv-nav {
    --mv-menu-pad: 11px;
    margin-right: 0;
  }

  /*
   * Comentario: las secciones con hijos no se pintan en la barra horizontal.
   *
   * Su contenido ya está en el panel lateral —el único sitio donde hay altura para
   * listarlo—, así que repetirlas arriba es un segundo camino a lo mismo y, además,
   * ocupa el ancho que necesita la hamburguesa. Se ocultan, no se borran: el `li` sigue
   * en el marcado y el desplegable clásico se lo salta por sí solo, así que el panel las
   * sigue pintando enteras.
   *
   * Vale para las dos barras de escritorio porque las dos usan `.mv-menu`; el cajón
   * cuelga de `.mv-drawer` y queda fuera.
   */
  .mv-nav-drawer .mv-nav .mv-menu>li.menu-item-has-children,
  .mv-nav-drawer .mv-stickybar-nav .mv-menu>li.menu-item-has-children {
    display: none;
  }

  /* Comentario: la barra fija hace lo mismo: conserva su menú y suma la
     hamburguesa, para que los dos caminos estén también al hacer scroll. */
  .mv-nav-drawer .mv-stickybar-nav {
    --mv-menu-pad: 11px;
    margin-right: 0;
  }

  .mv-nav-drawer .mv-stickybar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    order: 3;
    margin-left: 4px;
  }
}

@media (max-width: 1023px) {
  .mv-header {
    min-height: 0;
  }

  .mv-header-inner {
    height: auto;
    min-height: 81px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
  }

  .mv-logo,
  .mv-brand img {
    max-width: 180px;
    /* Comentario: la misma medida que en escritorio. En una fila de 81 px deja 16 px
       de aire arriba y abajo, y al hacer scroll solo cambia el aire, no el logo. */
    max-height: 48px;
  }

  /*
   * Comentario: el logo arranca en el borde izquierdo.
   *
   * Con `align-items: center` la imagen quedaba centrada dentro de su contenedor
   * (x=111 con el contenedor en x=16), mientras el logo de la barra pegajosa
   * arrancaba en x=16. Al hacer scroll el logo saltaba 95 px a la izquierda.
   */
  .mv-brand {
    flex: 1 1 auto;
    align-items: flex-start;
  }

  .mv-drawer-toggle {
    display: inline-flex;
  }
}

/* Comentario: el panel del buscador se abre pegado arriba y por encima de la
   cabecera, para que siga siendo usable con la barra pegajosa a la vista. */
@media (max-width: 1023px) {
  .mv-search.is-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  }
}

/* ---------------------------------------------------- barra pegajosa (sticky) -- */

/* Comentario: la cabecera se va con el scroll y entra esta barra compacta, igual
   que la cabecera pegajosa del original (70 px en escritorio, 81 px en móvil). */
.mv-stickybar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /*
   * Comentario: por debajo del velo del cajón (1000) y del panel (1001).
   *
   * Con 9998, al abrir el menú con la página desplazada la barra se quedaba
   * nítida y por encima del desenfoque.
   */
  z-index: 990;
  height: 70px;
  background: var(--mv-bg);
  /* Comentario: el mismo acabado que la cabecera —filo de marca arriba, hairline
     abajo y la misma sombra—, para que al hacer scroll la pieza no cambie de
     carácter: solo se encoge. Con la sombra sola, el filo azul desaparecía de golpe
     y la barra parecía otra cosa. */
  box-shadow:
    inset 0 3px 0 var(--mv-azul),
    inset 0 -1px 0 var(--mv-line),
    0 2px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  transition: transform 280ms ease;
}

.mv-stickybar.is-visible {
  transform: translateY(0);
}

.mv-stickybar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 70px;
}

.mv-stickybar-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Comentario: el logo de la barra compacta mide lo mismo que en la cabecera, así
   que entra y sale sin dar un salto: la pieza solo pierde el aire de arriba y abajo. */
.mv-stickybar-brand .custom-logo-link,
.mv-stickybar-brand .mv-logo,
.mv-stickybar-brand img {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 48px;
  object-fit: contain;
}

/* Comentario: el menú de la barra compacta es el mismo de la cabecera y también va
   a la derecha, pegado a ella: así, cuando la pieza se encoge al hacer scroll, el
   menú no salta de sitio, solo se acerca al logo. */
.mv-stickybar-nav {
  display: none;
}

.mv-stickybar-toggle,
.mv-stickybar-search {
  display: none;
}

@media (max-width: 1023px) {

  .mv-stickybar,
  .mv-stickybar-inner {
    height: 81px;
  }

  .mv-stickybar-inner {
    gap: 10px;
  }

  /*
   * Comentario: el logo va a la izquierda y más pequeño.
   *
   * Antes se centraba con `position: absolute; left: 50%` y `translateX(-50%)`,
   * y con `max-height: 60px` daba 54 px de logo en una barra de 81: pesaba más
   * que el contenido, dejaba los dos bordes vacíos y el botón del menú se
   * quedaba solo en la otra punta.
   */
  .mv-stickybar-brand {
    position: static;
    left: auto;
    order: 1;
    margin-right: auto;
    transform: none;
    justify-content: flex-start;
  }

  .mv-stickybar-brand .custom-logo-link,
  .mv-stickybar-brand .mv-logo,
  .mv-stickybar-brand img {
    max-height: 36px;
  }

  /*
   * Comentario: el botón, a la derecha.
   *
   * Va PRIMERO en el marcado, así que hay que forzar el orden: si no, el logo
   * queda a su derecha por muchos márgenes que se pongan. Y solo él lleva
   * `margin-left: auto`: con `auto` en los dos, se reparten el hueco libre y el
   * logo acaba en el centro, que es justo lo que se quiere evitar.
   */
  .mv-stickybar-toggle {
    position: static;
    order: 2;
    margin: 0 0 0 auto;
    display: inline-flex;
  }

  .mv-stickybar-search {
    margin-left: 0;
    order: -1;
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .mv-stickybar-nav {
    position: static;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    height: 70px;
    margin-left: auto;
    /* Comentario: misma compensación que en la cabecera: el último rótulo acaba en
       el borde de la columna, no 14 px dentro. */
    margin-right: calc(-1 * var(--mv-menu-pad));
  }

  /* Comentario: la barra fija reutiliza `.mv-menu` y sus enlaces miden el alto del
     contenedor; sin este 100 % el alto se resolvería contra un `auto` y el
     subrayado de la sección caería bajo el texto en vez de al pie de la barra. */
  .mv-stickybar-nav .mv-menu {
    height: 100%;
  }

  /*
   * Comentario: si una web de la flota pinta la hamburguesa en la barra compacta de
   * escritorio, va a la derecha, igual que la de la cabecera.
   *
   * El botón va PRIMERO en el marcado para que en móvil el logo quede delante y el
   * `flex` se comporte igual en las dos barras; en escritorio, sin `order` ni
   * `margin-left: auto`, se quedaba pegado al logo (a la izquierda) mientras el de la
   * cabecera cierra la fila por la derecha, así que el gesto saltaba de lado al hacer
   * scroll. El menú va anclado en absoluto al centro, de modo que el hueco libre se lo
   * queda el botón y acaba en el mismo sitio que el de arriba.
   *
   * No se le da `display`: el tema lo deja oculto en escritorio a propósito y es la
   * web la que decide si lo enseña.
   */
  .mv-stickybar-toggle {
    order: 3;
    margin-left: auto;
  }
}

/* --------------------------------------------------------------- navegación */

/* Comentario: el menú ya no es una banda aparte: es el último tramo de la fila del
   logo. Se estira al alto completo de la cabecera para que el subrayado de la
   sección activa pueda caer sobre el borde inferior y leerse como una pestaña.
   Sin `position`: el panel del megamenú tiene que anclarse a la fila entera
   (`.mv-header-inner`), no al ancho del propio menú.

   `--mv-menu-pad` es el aire lateral de cada enlace, y el margen derecho negativo
   compensa el del último: así el TEXTO de la última sección acaba justo en el borde
   de la columna, alineado con el logo y con el contenido de abajo. Sin esa
   compensación el menú parece sangrado 14 px hacia dentro. */
.mv-nav {
  display: none;
  align-self: stretch;
  align-items: stretch;
  margin-right: calc(-1 * var(--mv-menu-pad, 0px));
}

@media (min-width: 1024px) {
  .mv-nav {
    display: flex;
  }
}

/* Comentario: aire lateral de los enlaces, en un solo sitio. Lo leen las dos barras
   horizontales (el cajón móvil tiene su propio ritmo) y de él cuelgan tanto el
   relleno de cada enlace como la compensación del borde derecho. */
.mv-nav,
.mv-stickybar-nav {
  --mv-menu-pad: 14px;
}

.mv-menu {
  display: none;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .mv-menu {
    display: flex;
  }

  /*
   * Comentario: una sección se puede apartar de la barra horizontal sin borrarla.
   *
   * La clase `mv-hide-desktop` se pone desde Apariencia → Menús (hay que activar
   * «Clases CSS» en Opciones de pantalla) y solo la respetan las barras de escritorio:
   * el panel lateral la sigue pintando, así que la sección queda a un toque desde la
   * hamburguesa. Volver a ponerla es quitar la clase, no reconstruir el menú ni
   * reasignar la entrada.
   *
   * Vale para las dos barras de escritorio (la principal y la pegajosa) porque las dos
   * usan `.mv-menu`; el cajón móvil cuelga de `.mv-drawer` y queda fuera.
   */
  .mv-nav .mv-menu>li.mv-hide-desktop,
  .mv-stickybar-nav .mv-menu>li.mv-hide-desktop {
    display: none;
  }
}

.mv-menu>li {
  position: relative;
  margin: 0;
}

/*
 * Comentario: separadores de sección.
 *
 * Un pelo de 1 px y 14 px de alto en el centro del hueco entre dos enlaces. No
 * separan bloques de navegación distintos: marcan el ritmo de la fila para que el
 * menú no sea una tira de palabras sueltas, y a 1 px no compiten con el texto.
 * Van en el `::before` del `li` porque el `::after` es el subrayado, y solo existen
 * en las barras horizontales: el cajón apila las filas y una raya vertical ahí no
 * pinta nada.
 */
@media (min-width: 1024px) {

  .mv-nav .mv-menu>li+li::before,
  .mv-stickybar-nav .mv-menu>li+li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--mv-line);
    transition: opacity var(--mv-transition);
  }

  /*
   * Comentario: el pelo desaparece junto al enlace que está en uso.
   *
   * Si no, el velo del hover y la pestaña activa llevan una raya vertical pegada al
   * borde, dentro del propio bloque de color: parece un resto, no un separador. Se
   * quitan los dos pelos que flanquean la sección (el suyo y el del siguiente).
   */
  .mv-nav .mv-menu>li:hover::before,
  .mv-nav .mv-menu>li:hover+li::before,
  .mv-nav .mv-menu>li.is-open::before,
  .mv-nav .mv-menu>li.is-open+li::before,
  .mv-nav .mv-menu>li.current-menu-item::before,
  .mv-nav .mv-menu>li.current-menu-item+li::before,
  .mv-nav .mv-menu>li.current-menu-parent::before,
  .mv-nav .mv-menu>li.current-menu-parent+li::before,
  .mv-nav .mv-menu>li.current-menu-ancestor::before,
  .mv-nav .mv-menu>li.current-menu-ancestor+li::before,
  .mv-stickybar-nav .mv-menu>li:hover::before,
  .mv-stickybar-nav .mv-menu>li:hover+li::before,
  .mv-stickybar-nav .mv-menu>li.is-open::before,
  .mv-stickybar-nav .mv-menu>li.is-open+li::before,
  .mv-stickybar-nav .mv-menu>li.current-menu-item::before,
  .mv-stickybar-nav .mv-menu>li.current-menu-item+li::before,
  .mv-stickybar-nav .mv-menu>li.current-menu-parent::before,
  .mv-stickybar-nav .mv-menu>li.current-menu-parent+li::before,
  .mv-stickybar-nav .mv-menu>li.current-menu-ancestor::before,
  .mv-stickybar-nav .mv-menu>li.current-menu-ancestor+li::before {
    opacity: 0;
  }
}

/* Comentario: 13 px en negrita con un poco de tracking y el aire del relleno
   lateral en vez de márgenes: el relleno es lo que hace la fila entera pulsable, y
   es lo que deja el separador justo en medio del hueco entre dos palabras. */
.mv-menu>li>a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  /* Comentario: `0px` de respaldo por si alguna plantilla pinta `.mv-menu` fuera de
     las dos barras horizontales, que son las que definen la variable. */
  padding: 0 var(--mv-menu-pad, 0px);
  white-space: nowrap;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mv-ink);
}

/* Comentario: en 1024–1199 el logo y las nueve secciones no caben con el relleno de
   14 px; se aprieta un poco —y el margen negativo se recalcula solo— antes que
   dejar que el menú se salga de la maqueta. Vale para las dos barras: son el mismo
   menú en el mismo ancho. */
@media (min-width: 1024px) and (max-width: 1199px) {

  .mv-nav,
  .mv-stickybar-nav {
    --mv-menu-pad: 10px;
  }

  .mv-menu>li>a {
    font-size: 12px;
  }
}

.mv-menu>li>a:hover {
  color: var(--mv-azul);
}

/*
 * Comentario: hover con tinte de marca, no con gris.
 *
 * El fondo es el azul del logo rebajado casi al blanco (`color-mix` al 6 %). No se
 * percibe como un botón, pero sí como que la fila es tuya: es el escalón que faltaba
 * entre «palabra suelta» y «menú». Un gris neutro no habría dado color a la pieza.
 * `background-image` en vez de `background` para no pisar el color de la pestaña.
 *
 * `color-mix` con respaldo: sin soporte, el valor anterior de `background-image`
 * (ninguno) deja la fila tal como estaba, no rota.
 */
@media (hover: hover) and (min-width: 1024px) {
  .mv-menu>li>a:hover {
    background-image: linear-gradient(0deg,
        color-mix(in srgb, var(--mv-azul) 6%, transparent),
        color-mix(in srgb, var(--mv-azul) 6%, transparent));
  }
}

/*
 * Comentario: la sección activa se marca con tres cosas a la vez —azul, pestaña de
 * 3 px y un tinte tenue del mismo azul—, porque el subrayado solo no se distingue
 * bien cuando el texto ya es oscuro sobre blanco. El tinte es más fuerte que el del
 * hover para que se lea «estás aquí» y no «tienes el ratón encima».
 *
 * Va acotado a las barras horizontales: el cajón móvil ya distingue la sección
 * activa con el color y tiene su propio ritmo de filas.
 */
@media (min-width: 1024px) {

  .mv-nav .mv-menu>li.current-menu-item>a,
  .mv-nav .mv-menu>li.current-menu-parent>a,
  .mv-nav .mv-menu>li.current-menu-ancestor>a,
  .mv-stickybar-nav .mv-menu>li.current-menu-item>a,
  .mv-stickybar-nav .mv-menu>li.current-menu-parent>a,
  .mv-stickybar-nav .mv-menu>li.current-menu-ancestor>a {
    background-image: linear-gradient(0deg,
        color-mix(in srgb, var(--mv-azul) 10%, transparent),
        color-mix(in srgb, var(--mv-azul) 10%, transparent));
  }
}

/*
 * Comentario: el subrayado es la pestaña de la sección.
 *
 * Va pegado al borde inferior de la cabecera (no al texto) y mide el ancho del
 * enlace completo, incluido su relleno: así el activo se lee como la pestaña abierta
 * del periódico y el ratón tiene un blanco cómodo. En el estado normal mide 0 y
 * crece desde el centro.
 *
 * Va acotado a las dos barras horizontales a propósito: el cajón móvil usa el mismo
 * `.mv-menu` y su `::after` es la flecha de Ideal. Sin el acote, en escritorio la
 * flecha heredaba de aquí la posición absoluta y el alto de 3 px.
 */
@media (min-width: 1024px) {

  .mv-nav .mv-menu>li>a::after,
  .mv-stickybar-nav .mv-menu>li>a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--mv-azul);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--mv-transition);
  }

  .mv-nav .mv-menu>li>a:hover::after,
  .mv-nav .mv-menu>li>a:focus-visible::after,
  .mv-nav .mv-menu>li.is-open>a::after,
  .mv-nav .mv-menu>li.current-menu-item>a::after,
  .mv-nav .mv-menu>li.current-menu-parent>a::after,
  .mv-nav .mv-menu>li.current-menu-ancestor>a::after,
  .mv-stickybar-nav .mv-menu>li>a:hover::after,
  .mv-stickybar-nav .mv-menu>li>a:focus-visible::after,
  .mv-stickybar-nav .mv-menu>li.is-open>a::after,
  .mv-stickybar-nav .mv-menu>li.current-menu-item>a::after,
  .mv-stickybar-nav .mv-menu>li.current-menu-parent>a::after,
  .mv-stickybar-nav .mv-menu>li.current-menu-ancestor>a::after {
    transform: scaleX(1);
  }
}

.mv-menu>li.is-open>a {
  color: var(--mv-azul);
}

/* Comentario: el tinte del elemento abierto, en las mismas barras que el activo. */
@media (min-width: 1024px) {

  .mv-nav .mv-menu>li.is-open>a,
  .mv-stickybar-nav .mv-menu>li.is-open>a {
    background-image: linear-gradient(0deg,
        color-mix(in srgb, var(--mv-azul) 10%, transparent),
        color-mix(in srgb, var(--mv-azul) 10%, transparent));
  }
}

/* Comentario: en la maqueta de referencia el elemento activo del menú va en azul
 * corporativo, no en el rojo de los acentos de portada. */
.mv-menu>li.current-menu-item>a,
.mv-menu>li.current-menu-parent>a,
.mv-menu>li.current-menu-ancestor>a {
  color: var(--mv-azul);
}

.mv-menu .sub-menu {
  position: absolute;
  z-index: 40;
  /* Comentario: cuelga del pie de la cabecera, sin hueco: el puntero no pierde el
     `li` al bajar y el desplegable queda pegado a la fila. */
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--mv-bg);
  border: 1px solid var(--mv-line);
  border-top: 2px solid var(--mv-rojo);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--mv-transition), transform var(--mv-transition), visibility var(--mv-transition);
}

.mv-menu>li:hover>.sub-menu,
.mv-menu>li:focus-within>.sub-menu,
.mv-menu>li.is-open>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mv-menu .sub-menu a {
  display: block;
  padding: 8px 18px;
  font-family: var(--mv-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--mv-ink);
  text-transform: none;
  letter-spacing: 0;
}

.mv-menu .sub-menu a:hover {
  background: var(--mv-bg-soft);
  color: var(--mv-rojo);
}

/* Megamenú de sección */

/* Comentario: el elemento con panel se ancla al contenedor de la cabecera (no a sí
   mismo) para que el panel ocupe el ancho de la maqueta, como en el original. La
   fila `.mv-header-inner` es la que lleva `position: relative` (ver cabecera). */
.mv-menu>li.mv-menu-mega {
  position: static;
}

.mv-mega {
  position: absolute;
  z-index: 40;
  /* Comentario: 16 px a los lados porque el bloque contenedor es la caja de relleno
     de `.mv-header-inner`: el panel tiene que cuadrar con la columna de contenido
     (1170), no con el ancho del contenedor con su relleno (1202). */
  top: 100%;
  left: 16px;
  right: 16px;
  /* Comentario: 20 px arriba y abajo y 10 px a los lados son las medidas del panel
     del original; las tarjetas suman otros 10 px de relleno lateral. */
  padding: 20px 10px;
  background: var(--mv-bg);
  border-top: 2px solid var(--mv-rojo);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--mv-transition), transform var(--mv-transition), visibility var(--mv-transition);
}

.mv-menu>li.mv-menu-mega:hover>.mv-mega,
.mv-menu>li.mv-menu-mega:focus-within>.mv-mega,
.mv-menu>li.mv-menu-mega.is-open>.mv-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Comentario: en la barra fija el menú va centrado en su propio hueco (más
   estrecho que la maqueta), así que el panel no puede colgar de él: se ancla a la
   ventana y se centra con `translate`, que es una propiedad distinta de
   `transform` y por eso no pisa la animación de entrada. */
.mv-stickybar .mv-mega {
  position: fixed;
  top: var(--mv-stickybar-height);
  right: auto;
  left: 50%;
  width: min(calc(var(--mv-container) + 32px), 100vw);
  translate: -50% 0;
}

/* Comentario: cinco columnas iguales, la misma rejilla de una fila del original. */
.mv-mega-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mv-mega-card {
  display: block;
  padding: 0 10px;
  margin-bottom: 15px;
}

.mv-mega-media {
  position: relative;
  display: block;
}

.mv-mega-thumb {
  display: block;
  margin-bottom: 17px;
  aspect-ratio: 3 / 2;
  background-color: #f5f5f5;
  background-position: center;
  background-size: cover;
  transition: opacity var(--mv-transition);
}

/* Comentario: la etiqueta de sección va sobre la esquina superior izquierda de la
   imagen, con el rojo de acento y 18 px de alto, como el original. Es un enlace a
   la sección (no al artículo), de ahí que se pinte aparte de la foto. */
.mv-mega-cat {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0 6px;
  background: var(--mv-rojo);
  font-family: var(--mv-font-alt);
  font-size: 10px;
  line-height: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

.mv-mega-cat:hover {
  color: #fff;
  background: var(--mv-rojo-oscuro);
}

.mv-mega-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  color: #000;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Comentario: el original atenúa la foto al pasar el ratón (opacidad 0.8) para
   confirmar que la tarjeta entera es un enlace; el titular se tiñe de acento. */
.mv-mega-card:hover .mv-mega-thumb {
  opacity: 0.8;
}

.mv-mega-card:hover .mv-mega-title {
  color: var(--mv-rojo);
}

.mv-mega-date {
  display: block;
  margin-top: 6px;
  font-family: var(--mv-font-alt);
  font-size: 12px;
  line-height: 1;
  color: var(--mv-muted);
}

.mv-submenu-toggle {
  display: none;
}

/* Cajón móvil */

/*
 * Comentario: el panel sigue el patrón de Ideal.
 *
 * Más ancho que el original (538 px frente a 330) porque en un móvil de 390 el de
 * 330 se queda en 88 vw y las secciones van apretadas; entrada de 0,8 s con curva
 * de salida en lugar de los 220 ms `ease`, que se sienten a resorte. Va en columna
 * para poder ordenar cierre, buscador y secciones, y por encima de la cabecera, que
 * lleva `z-index: 900`.
 */
.mv-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1001;
  width: 75.666vw;
  max-width: 538px;
  padding: 0 20px 32px;
  background: var(--mv-bg);
  box-shadow: -8px 0 32px rgb(0 0 0 / 18%);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.mv-drawer::-webkit-scrollbar {
  display: none;
}

.mv-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

/*
 * Comentario: el velo tapa toda la ventana, con desenfoque.
 *
 * Un `position: fixed` deja de serlo si un antepasado lleva `transform`, `filter`
 * o `will-change`: pasa a ser relativo a ese contenedor. Las portadas de Elementor
 * los usan, así que el velo tapaba solo el `main`. Las propiedades que lo encierran
 * van forzadas y el tamaño en `dvh`, que es el que tiene en cuenta la barra del
 * navegador en móvil.
 *
 * `backdrop-filter` necesita que el elemento exista siempre: se controla con
 * `opacity` y `visibility` juntas, porque con `visibility: hidden` el filtro no se
 * aplica y el cambio sería de golpe.
 */
.mv-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1000;
  background: rgb(0 0 0 / 45%);
  -webkit-backdrop-filter: blur(3px) saturate(0.85);
  backdrop-filter: blur(3px) saturate(0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mv-drawer-backdrop[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

/* Sin `backdrop-filter`, el velo se oscurece más para no perder contraste. */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .mv-drawer-backdrop {
    background: rgb(0 0 0 / 62%);
  }
}

/*
 * Comentario: el cierre es solo el aspa, pegada al borde izquierdo del panel.
 *
 * Con `justify-content: space-between`, el rótulo «Cerrar» quedaba a un lado y el
 * aspa al otro. Se oculta con `font-size: 0` en el botón y se restaura en el
 * `span`: el texto sigue en el marcado porque es el nombre accesible del botón.
 *
 * `display: flex` no es adorno: el botón heredaba `display: block` con
 * `text-align: center` del reset del navegador, así que el `justify-content:
 * flex-start` no se aplicaba —solo existe en un contenedor flex— y el aspa salía
 * centrada en el panel, a 242 px del borde. Con flex, el `flex-start` manda y el
 * aspa queda alineada con el relleno de 20 px, como el buscador y las secciones.
 */
.mv-drawer>.mv-drawer-close {
  position: sticky;
  top: 0;
  z-index: 3;
  order: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0 -20px 8px;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-bg);
  gap: 0;
  font-family: var(--mv-font-ui);
  font-size: 0;
  text-align: left;
  cursor: pointer;
  color: var(--mv-ink);
}

.mv-drawer>.mv-drawer-close span {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
}

/*
 * Comentario: el buscador abre el panel, antes de las secciones.
 *
 * Se entra al menú a buscar algo o a ir a una sección, y el campo es lo primero
 * que se ve. El panel es `flex` en columna, así que basta el `order`.
 */
.mv-drawer>.mv-drawer-search {
  order: 1;
  flex: 0 0 auto;
  padding: 16px 0;
  border-bottom: 1px solid var(--mv-line);
}

.mv-drawer>.mv-menu {
  order: 2;
  flex: 0 0 auto;
}

.mv-drawer .mv-menu {
  display: block;
}

/*
 * Comentario: secciones en mayúsculas con flecha al pasar el ratón.
 *
 * Valores medidos en el panel de Ideal: `1rem/1.5rem` semibold, `gap` de 4 px,
 * separador de 1 px en #e9e9e9, texto a #767676 en hover y una flecha de 16×16
 * que entra deslizándose 4 px desde la izquierda. La sección activa se queda igual
 * que en hover.
 */
.mv-drawer .mv-menu>li>a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: auto;
  padding: 16px 0;
  border-bottom: 1px solid var(--mv-line);
  margin-bottom: 0;
  border-left: 0;
  font-family: var(--mv-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* La flecha, al extremo derecho de la fila. Nace oculta y se desliza al aparecer. */
.mv-drawer .mv-menu>li>a::after {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-left: auto;
  transform: translateY(1px) translateX(-4px);
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.0743 8.50022H3.5a.5.5 0 0 1 0-1h7.5743L8.8795 5.30538a.5.5 0 1 1 .71283-.71283l2.98587 2.98583a.6007.6007 0 0 1 .132 0 .5.5 0 0 1 .038.42205.5.5 0 0 1-.038.42205.6007.6007 0 0 1-.132 0l-2.98587 2.98583a.5.5 0 1 1-.71283-.71283l2.6948-2.69484Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.0743 8.50022H3.5a.5.5 0 0 1 0-1h7.5743L8.8795 5.30538a.5.5 0 1 1 .71283-.71283l2.98587 2.98583a.6007.6007 0 0 1 .132 0 .5.5 0 0 1 .038.42205.5.5 0 0 1-.038.42205.6007.6007 0 0 1-.132 0l-2.98587 2.98583a.5.5 0 1 1-.71283-.71283l2.6948-2.69484Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.mv-drawer .mv-menu>li>a:hover,
.mv-drawer .mv-menu>li>a:focus-visible {
  color: var(--mv-muted);
}

.mv-drawer .mv-menu>li>a:hover::after,
.mv-drawer .mv-menu>li>a:focus-visible::after {
  opacity: 1;
  transform: translateY(1px) translateX(0);
}

.mv-drawer .mv-menu>li.current-menu-item>a,
.mv-drawer .mv-menu>li.current-menu-parent>a,
.mv-drawer .mv-menu>li.current-menu-ancestor>a {
  color: var(--mv-muted);
}

.mv-drawer .mv-menu>li.current-menu-item>a::after,
.mv-drawer .mv-menu>li.current-menu-parent>a::after,
.mv-drawer .mv-menu>li.current-menu-ancestor>a::after {
  opacity: 1;
  transform: translateY(1px) translateX(0);
}

/* Los desplegables se aplanan en el panel (ver main.js): «Secciones» y sus hijos
   quedan al mismo nivel. El botón «+» sobra. */
.mv-drawer .mv-submenu-toggle {
  display: none !important;
}

.mv-drawer .mv-menu>li.menu-item-has-children>a {
  padding-right: 0;
}

/* Las que eran subsecciones se distinguen por tamaño y color, no por sangría: al
   aplanarlas perdieron el contenedor que las agrupaba. */
.mv-drawer .mv-menu>li.mv-nav-subitem>a {
  padding: 10px 0 10px 16px;
  color: var(--mv-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
}

.mv-drawer .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  border-left: 2px solid var(--mv-line);
  margin-left: 4px;
  padding: 4px 0;
  display: none;
}

.mv-drawer .sub-menu.is-open {
  display: block;
}

.mv-drawer .sub-menu a {
  padding: 8px 14px;
}

/* Comentario: la caja de búsqueda del panel, con el trazo fino de Ideal. */
.mv-drawer .mv-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--mv-ink);
  background: transparent;
}

.mv-drawer .mv-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mv-ink);
  font-family: var(--mv-font-body);
  font-size: 0.9375rem;
}

.mv-drawer .mv-search-form input[type="search"]::placeholder {
  color: var(--mv-muted);
}

.mv-drawer .mv-search-form button {
  flex: 0 0 auto;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--mv-ink);
  cursor: pointer;
}

/* Comentario: el buscador vive solo en el panel. Un único camino al mismo sitio:
   el formulario, el botón y el de la barra pegajosa se retiran. Se ocultan, no se
   borran, para que el marcado del tema y sus scripts sigan encontrándolos. */
.mv-stickybar-search {
  display: none !important;
}

/* ------------------------------------------------------------- buscador --- */

.mv-search {
  display: none;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-bg-soft);
}

.mv-search.is-open {
  display: block;
}

.mv-search .mv-container {
  padding-top: 14px;
  padding-bottom: 14px;
}

.mv-search-form {
  display: flex;
  gap: 8px;
}

.mv-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-bg);
  font-family: var(--mv-font-body);
  font-size: 15px;
  color: var(--mv-ink);
}

.mv-search-form button {
  padding: 11px 20px;
  border: 0;
  border-radius: var(--mv-radius);
  background: var(--mv-azul);
  color: #fff;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--mv-transition);
}

.mv-search-form button:hover {
  background: var(--mv-azul-oscuro);
}

/* -------------------------------------------------------------- cabecera -- */

.mv-page-header {
  padding: 26px 0 22px;
}

.mv-page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}

/* Comentario: en los archivos (secciones, etiquetas, fechas) el original titula con
   Aleo 24 px en rojo dentro de una barra de 46 px y 30 px de aire hasta el listado. */
.mv-page-header--archive {
  padding-bottom: 0;
  margin-bottom: 30px;
}

.mv-page-header--archive .mv-page-title {
  padding: 8px 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--mv-rojo);
}

.mv-page-description {
  margin: 8px 0 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mv-muted-strong);
}

.mv-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-muted);
}

.mv-breadcrumbs a {
  color: var(--mv-muted-strong);
}

.mv-breadcrumbs a:hover {
  color: var(--mv-rojo);
}

.mv-crumb-sep {
  color: var(--mv-line);
}

/* ---------------------------------------------------------------- rejilla -- */

/* Comentario: rejilla de tarjetas. La columna se decide por la clase `--N` que
   emite el widget, no por el ancho del contenedor: un bloque de una sola columna
   dentro de una columna estrecha (portada de Elementor) debe seguir siendo de una
   columna. El hueco es el del original: 30 px entre columnas y 41 px entre filas. */
.mv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mv-grid-row, 41px) 30px;
}

/* Listado de sección (categorías y archivos) */

/* Comentario: es la maqueta del listado del original: una noticia por fila, con la
   miniatura 3:2 a la izquierda (361x240 dentro de la columna de 780) y el texto a
   la derecha. La separación entre noticias es de 81 px, la misma del original. */
.mv-archive-list {
  display: grid;
  gap: 81px;
}

.mv-card-list {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

/* Comentario: la miniatura ocupa el 46,3 % de la columna (361 de 780 en la maqueta
   de escritorio) y el texto el resto, así la proporción se mantiene cuando la
   columna se estrecha por la barra lateral. */
.mv-card-list>.mv-thumb {
  flex: 0 0 46.3%;
  width: 46.3%;
}

.mv-card-list-body {
  flex: 1 1 auto;
  min-width: 0;
}

.mv-card-list-title {
  margin: 0;
  font-family: var(--mv-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mv-ink);
}

.mv-card-list-title a {
  color: inherit;
}

.mv-card-list-title a:hover {
  color: var(--mv-rojo);
}

.mv-card-list .mv-card-meta {
  margin: 5px 0 20px;
  font-size: 12px;
}

.mv-card-list-excerpt {
  margin: 18px 0 0;
  font-family: var(--mv-font-alt);
  font-size: 15px;
  line-height: 1.8;
  color: var(--mv-ink);
}

/* Comentario: por debajo del ancho de escritorio la miniatura pasa a ocupar todo el
   ancho y el texto baja debajo, como en el original en móvil. */
@media (max-width: 767px) {
  .mv-card-list {
    flex-direction: column;
    gap: 30px;
  }

  .mv-card-list>.mv-thumb {
    flex: none;
    width: 100%;
  }
}

/* ==========================================================================
   Mosaico de cabecera de los archivos («big grid»)
   Comentario: una noticia grande (2/3) y dos pequeñas apiladas (1/3) sobre el
   listado, medidas del original: 776x500 + 390x248 con 4 px de separación y el
   texto en blanco montado sobre un degradado, a 20 px del borde y 41 px del pie.
   ========================================================================== */
.mv-biggrid {
  display: grid;
  grid-template-columns: minmax(0, 776fr) minmax(0, 390fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  /* Comentario: la separación real hasta el listado son 35 px; el contenedor de
     dos columnas ya aporta 32, así que aquí solo faltan 3. */
  margin-bottom: 3px;
}

.mv-bgitem {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mv-bgitem--big {
  grid-row: 1 / span 2;
  aspect-ratio: 776 / 500;
}

/* Comentario: el degradado solo ocupa la mitad inferior; el titular blanco
   necesita fondo oscuro para leerse sobre fotos claras. */
.mv-bgitem::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
}

.mv-bgitem-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0 20px 41px;
  color: #fff;
}

.mv-bgitem-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  line-height: 1.2;
}

.mv-bgitem-cats a {
  color: #fff;
  text-decoration: none;
}

.mv-bgitem-title {
  margin: 0 0 4px;
  font-family: var(--mv-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.05;
}

.mv-bgitem--big .mv-bgitem-title {
  font-size: 24px;
}

.mv-bgitem-title a {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.mv-bgitem--big .mv-bgitem-title a {
  -webkit-line-clamp: 3;
}

.mv-bgitem-title a:hover {
  color: #fff;
  text-decoration: underline;
}

.mv-bgitem-date {
  font-family: var(--mv-font-alt);
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
}

/* Comentario: en tablet el mosaico se parte: la grande ocupa todo el ancho y las
   dos pequeñas se colocan lado a lado debajo (708x460 + 352x228 en el original). */
@media (max-width: 959px) {
  .mv-biggrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    margin-bottom: 3px;
  }

  .mv-bgitem--big {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 708 / 460;
  }

  .mv-bgitem--small {
    aspect-ratio: 352 / 228;
  }

  .mv-bgitem-content {
    padding: 0 16px 25px;
  }
}

@media (max-width: 480px) {
  .mv-bgitem--big {
    aspect-ratio: 350 / 320;
  }

  .mv-bgitem--small {
    aspect-ratio: 173 / 158;
  }

  .mv-bgitem--small .mv-bgitem-title {
    font-size: 14px;
  }

  .mv-bgitem--small .mv-bgitem-cats {
    font-size: 11px;
  }
}


@media (min-width: 600px) {

  .mv-grid--2,
  .mv-grid--3,
  .mv-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mv-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .mv-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Comentario: cabecera de bloque. Es la barra del original: caja blanca con borde
   de acento (6 px a la izquierda), 14 px en versalitas y una línea vertical fina
   desplazada a la izquierda del bloque. */
.mv-block-head {
  position: relative;
  margin: 0 0 30px;
}

.mv-block-head::after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  height: 100%;
  width: 0;
  border-left: 1px solid var(--mv-ink);
  border-right: 1px solid var(--mv-ink);
}

.mv-block-head .mv-block-title {
  margin: 0;
  padding: 8px 12px 7px;
  background: var(--mv-bg);
  border: 1px solid var(--mv-accent);
  border-left-width: 6px;
  font-family: var(--mv-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--mv-accent);
}

.mv-block-title span {
  display: inline;
}

/* Comentario: los widgets de portada heredan la tipografía de su propio bloque
   mediante variables CSS; el contenedor no necesita más caja que eso. */
.mv-widget-body {
  min-width: 0;
}

.mv-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mv-widget-posts,
.mv-widget-big-grid,
.mv-widget-featured-cat {
  margin-bottom: 40px;
}

.mv-widget-posts .mv-grid,
.mv-widget-big-grid .mv-grid {
  margin-bottom: 20px;
}

.mv-hero {
  margin-bottom: 34px;
}

/* ---------------------------------------------------------------- tarjeta -- */

/* Comentario: la tarjeta reproduce la del original, medida sobre la portada de la
   flota: foto 3:2 sin radio, titular en la tipografía de titulares, meta a 12 px
   con autor y fecha, y entradilla solo en la destacada. */

.mv-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mv-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mv-bg-soft);
}

/* Comentario: la imagen rellena el hueco 3:2 aunque el fichero sea 16:9; con
   margen 0 y `display:block` se evita la línea de 8 px que metía el contenido y que
   descuadraba las listas. El selector NO se limita a `.mv-card`: en el listado de
   sección (`.mv-card-list`) la miniatura también tiene que llenar el marco, o cada
   entrada mide distinto y la lista sale descuadrada.
   Va con dos clases (`.mv-thumb .mv-thumb-img`) y no con `.mv-card .mv-thumb img`
   porque las portadas llevan Elementor, que carga después y trae
   `.elementor img { height: auto }`: con la misma especificidad ganaba Elementor y
   la foto recuperaba su proporción original.
   Las miniaturas que salen por `wp_get_attachment_image` llegan envueltas en
   `<picture>` (WebP), así que el `img` ya no es hijo directo de `.mv-thumb`: de ahí
   las dos variantes con la misma especificidad. */
.mv-thumb .mv-thumb-img,
.mv-thumb>img,
.mv-thumb>picture>img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 320ms ease;
}

.mv-card:hover .mv-thumb img {
  transform: scale(1.03);
}

.mv-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mv-azul) 0%, var(--mv-azul-oscuro) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mv-font-ui);
  font-size: 34px;
  font-weight: 700;
}

/* Comentario: la categoría es texto plano en versalitas con el color de acento, no
   una etiqueta con fondo. */
.mv-card-cat {
  /* Comentario: el enlace es una etiqueta de texto, pero sigue siendo un objetivo
     táctil: 24 px de alto mínimo (WCAG 2.5.8) sin cambiar el aspecto visual. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 15px 2px 0;
  padding: 0;
  font-family: var(--mv-font-alt);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mv-accent);
}

.mv-card-cat:hover {
  color: var(--mv-rojo);
}

.mv-card-title {
  margin: 0;
  font-family: var(--mv-font-ui);
  font-size: var(--mv-title-size, 19px);
  font-weight: var(--mv-title-weight, 600);
  line-height: var(--mv-title-lh, 1.35);
  text-transform: var(--mv-title-transform, none);
  color: var(--mv-ink);
}

.mv-card-title a {
  color: inherit;
  /* Comentario: un titular con una palabra muy larga no debe ensanchar la columna
     ni sacar scroll horizontal en anchos intermedios. */
  overflow-wrap: anywhere;
}

.mv-card-title a:hover {
  color: var(--mv-rojo);
}

.mv-card-excerpt {
  margin: 0;
  font-size: 18px;
  line-height: var(--mv-excerpt-lh, 1.8);
  color: var(--mv-ink);
}

/* Comentario: meta del original: autor y fecha en 12 px, fecha en gris y autor en
   el color del texto. Sin separadores ni tiempo de lectura. */
.mv-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  margin: 7px 0 20px;
  font-family: var(--mv-font-alt);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mv-muted);
}

.mv-card-meta a {
  color: var(--mv-ink);
}

.mv-card-meta a:hover {
  color: var(--mv-rojo);
}

.mv-card-date {
  white-space: nowrap;
}

.mv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--mv-font-alt);
  font-size: var(--mv-small);
  color: var(--mv-muted);
}

.mv-meta a {
  color: var(--mv-muted-strong);
}

.mv-meta a:hover {
  color: var(--mv-rojo);
}

.mv-meta-sep {
  color: var(--mv-line);
}

.mv-date {
  white-space: nowrap;
}

/* Destacada de portada (columna izquierda): foto grande, titular de 31 px
   (el ajuste del widget por 1,55), fecha con autor y entradilla. */

.mv-card--hero {
  margin-bottom: 30px;
}

.mv-card--hero .mv-thumb {
  margin-bottom: 24px;
}

.mv-card--hero .mv-card-title {
  margin: 0 0 19px;
  font-weight: 600;
  line-height: 1.1;
}

.mv-card--hero .mv-card-title a {
  font-size: 1.55em;
  font-weight: var(--mv-title-weight, 900);
  line-height: 1.1;
  /* Comentario: el titular de la destacada ocupa 5 líneas como máximo; a partir de
     ahí se recorta para que la entradilla quepa en la columna. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.mv-card--hero .mv-card-meta {
  margin: 7px 0 20px;
}

.mv-card--hero .mv-card-excerpt {
  margin: 0;
}

/* Comentario: el contenido general separa sus titulares (34/14 px). Dentro de una
   tarjeta el ritmo lo marca la propia tarjeta, así que solo se anula el margen
   superior: el inferior lo decide cada variante. */
.mv-content .mv-card .mv-card-title {
  margin-top: 0;
}

/* Resumen destacado de columna (296 px): foto 3:2, 10 px de aire y titular de
   19 px, sin categoría y con la fecha debajo. */

.mv-card--featured .mv-card-body {
  margin-top: 10px;
}

.mv-card--featured .mv-card-title {
  margin: 0;
  font-size: var(--mv-title-size, 19px);
  line-height: 1.35;
}

.mv-card--featured .mv-card-meta {
  margin: 5px 0 0;
}

/* Rejilla de últimas noticias: categoría, titular de 22 px y fecha. */

.mv-card--default .mv-card-body {
  margin-top: 14px;
}

.mv-card--default .mv-card-title {
  margin: 0;
  font-size: var(--mv-title-size, 22px);
  line-height: 1.35;
}

.mv-card--default .mv-card-meta {
  margin: 5px 0 0;
}

/* Entrada de portada de los bloques de categoría partidos en dos columnas
   (`style-1`): 18 px, meta con fecha y entradilla de 18 px sobre 1,8. */

.mv-card--lead .mv-thumb {
  margin-bottom: 24px;
}

.mv-card--lead .mv-card-title {
  margin: 0 0 19px;
  font-size: var(--mv-title-size, 18px);
  line-height: 1.4;
}

.mv-card--lead .mv-card-meta {
  margin: 7px 0 20px;
}

.mv-card--lead .mv-card-excerpt {
  font-size: 18px;
  line-height: var(--mv-excerpt-lh, 1.8);
}

/* Filas de la columna derecha de `style-1`: miniatura 120×80 y titular de 14 px. */

.mv-card--side {
  flex-direction: row;
  align-items: flex-start;
}

.mv-card--side .mv-thumb {
  flex: 0 0 120px;
  width: 120px;
  margin: 0 20px 0 0;
}

.mv-card--side .mv-card-body {
  flex: 1;
  min-width: 0;
}

.mv-card--side .mv-card-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.mv-card--side .mv-card-meta {
  margin: 7px 0 0;
}

/* Diapositiva del carrusel de categoría (`style-5`). */

.mv-card--carousel .mv-thumb {
  margin-bottom: 24px;
}

.mv-card--carousel .mv-card-title {
  margin: 0;
  font-size: var(--mv-title-size, 18px);
  line-height: 1.4;
}

.mv-card--carousel .mv-card-meta {
  margin: 7px 0 0;
}

/* Tarjeta superpuesta de los bloques de portada: la foto ocupa la tarjeta 3:2 y el
   texto va encima, anclado abajo, sobre un degradado. */

.mv-card--overlay {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f5f5f5;
}

.mv-card--overlay .mv-thumb {
  height: 100%;
  aspect-ratio: auto;
}

.mv-card--overlay .mv-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.85) 100%);
}

.mv-card--overlay .mv-card-cat {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.87);
}

.mv-card--overlay .mv-card-title {
  margin: 0;
  font-size: var(--mv-title-size, 18px);
  line-height: 1;
  max-height: 5em;
  overflow: hidden;
}

.mv-card--overlay .mv-card-title a,
.mv-card--overlay .mv-card-title a:hover {
  color: #fff;
}

.mv-card--overlay .mv-card-meta {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

.mv-card--overlay .mv-card-meta a,
.mv-card--overlay .mv-card-meta a:hover {
  color: #fff;
}

/* Lista compacta (columna derecha de la portada): miniatura 160×107, categoría en
   versalitas y titular de 15 px. */

.mv-card--compact {
  flex-direction: row;
  align-items: flex-start;
}

.mv-card--compact .mv-thumb {
  flex: 0 0 160px;
  width: 160px;
  margin: 0 16px 0 0;
}

.mv-card--compact .mv-card-body {
  flex: 1;
  min-width: 0;
}

.mv-card--compact .mv-card-title {
  margin: 0;
  font-size: var(--mv-title-size, 15px);
  line-height: 1.35;
}

.mv-card--compact .mv-card-meta {
  margin: 5px 0 0;
}

/* Comentario: en tablet Elementor mantiene las tres columnas y la de la derecha se
   queda en ~235 px; la miniatura se adapta al hueco en vez de comerse el titular. */
@media (max-width: 1023px) {
  .mv-card--compact .mv-thumb {
    flex: 0 0 clamp(96px, 40%, 160px);
    width: auto;
  }
}

@media (max-width: 599px) {
  .mv-card--compact .mv-thumb {
    flex: 0 0 110px;
    width: 110px;
  }
}

/* --------------------------------------------------- bloques de portada -- */

/* Comentario: bloque de categoría partido en dos columnas iguales (`style-1`):
   entrada destacada a la izquierda y filas de miniatura 120×80 a la derecha. Con
   el contenedor de 740 px del original las dos columnas quedan en 355 px. */
.mv-fcat-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 30px;
}

@media (min-width: 768px) {
  .mv-fcat-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mv-fcat-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Comentario: rejilla de tarjetas superpuestas de los bloques de portada.
   `bg_columns` decide cuántas columnas; el hueco es el del original (20 px). */
.mv-bgrid.mv-grid {
  gap: 20px;
}

/* Comentario: mosaico de `style-3`: la primera entrada ocupa dos filas de la
   izquierda y el resto se apila a la derecha en cuadrados, con 4 px de junta. */
.mv-bgrid--masonry {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
}

/* Comentario: las tarjetas de la derecha son cuadradas y son las que fijan la
   altura de las filas; la primera ocupa las dos filas. Así el mosaico queda como el
   original: 490×500 a la izquierda y dos cuadrados de 245 a la derecha. */
.mv-bgrid--masonry>.mv-card {
  aspect-ratio: 1;
}

.mv-bgrid--masonry>.mv-card:nth-child(3n + 1) {
  grid-row: span 2;
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 599px) {
  .mv-bgrid--masonry {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .mv-bgrid--masonry>.mv-card:nth-child(3n + 1) {
    grid-row: auto;
  }

  .mv-bgrid--masonry .mv-card--overlay {
    aspect-ratio: 3 / 2;
  }
}

/* Botón «Ver más noticias» de los bloques paginados. El original lo pega a la
   rejilla en los bloques de tarjetas y lo separa 20px en los mosaicos. */
.mv-paging {
  margin: 0;
  text-align: center;
}

.mv-paging--masonry {
  margin: 20px 0 0;
}

.mv-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(400px, 100%);
  padding: 11px 10px;
  border: 1px solid #dedede;
  background: var(--mv-bg);
  font-family: var(--mv-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--mv-muted);
}

.mv-more:hover {
  border-color: var(--mv-accent);
  color: var(--mv-accent);
}

.mv-more-icon {
  flex: 0 0 auto;
}

/* Estados de «cargar más»: el icono gira mientras pide la tanda y el botón queda
   apagado cuando ya no quedan entradas (el original cambia el texto por «No hay más
   noticias»). El archivo lleva el mismo borde que el botón de los bloques. */
.mv-paging--arch {
  margin: 0 0 40px;
}

.mv-more.is-loading .mv-more-icon {
  animation: mv-spin 1s linear infinite;
}

.mv-more.is-disabled,
.mv-more.is-disabled:hover {
  border-color: #ececec;
  color: #bbbbbb;
  cursor: default;
}

@keyframes mv-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Carrusel de categoría (`style-5`): dos diapositivas por vista en escritorio, una
   en móvil, con las flechas de 34×34 del original. */
.mv-carousel {
  position: relative;
}

.mv-carousel-viewport {
  overflow: hidden;
}

.mv-carousel-track {
  display: flex;
  transition: transform 320ms ease;
  will-change: transform;
}

.mv-carousel-item {
  flex: 0 0 50%;
  min-width: 0;
  box-sizing: border-box;
  padding-right: 30px;
}

@media (max-width: 599px) {
  .mv-carousel-item {
    flex-basis: 100%;
    padding-right: 0;
  }
}

.mv-carousel-nav {
  position: absolute;
  top: 118px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--mv-line);
  background: var(--mv-bg);
  font-size: 20px;
  line-height: 1;
  color: var(--mv-ink);
  cursor: pointer;
}

.mv-carousel-nav:hover {
  border-color: var(--mv-accent);
  color: var(--mv-accent);
}

.mv-carousel-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.mv-carousel-prev {
  left: 0;
}

.mv-carousel-next {
  right: 0;
}

/* -------------------------------------------------------------- noticia --- */

.mv-single {
  min-width: 0;
}

.mv-single-header {
  margin-bottom: 22px;
}

.mv-single-cat {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--mv-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-rojo);
}

.mv-single-title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.35;
}

.mv-single-subtitle {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--mv-muted-strong);
}

.mv-single-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--mv-line);
  border-bottom: 1px solid var(--mv-line);
  margin-bottom: 24px;
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-muted-strong);
}

.mv-single-byline .mv-author {
  font-weight: 600;
  color: var(--mv-ink);
}

.mv-single-byline .mv-reading {
  margin-left: auto;
}

.mv-single-figure {
  margin: 0 0 8px;
}

.mv-single-figure img {
  width: 100%;
  border-radius: var(--mv-radius);
}

.mv-featured-caption {
  margin: 0 0 24px;
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-muted);
}

.mv-content {
  font-size: var(--mv-text);
  line-height: var(--mv-leading);
  color: var(--mv-ink);
  overflow-wrap: break-word;
}

.mv-content>*:first-child {
  margin-top: 0;
}

.mv-content h2,
.mv-content h3,
.mv-content h4 {
  margin: 34px 0 14px;
}

.mv-content ul,
.mv-content ol {
  margin-bottom: 20px;
  padding-left: 26px;
}

.mv-content li {
  margin-bottom: 8px;
}

.mv-content img {
  border-radius: var(--mv-radius);
  margin: 8px 0;
}

.mv-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mv-content .wp-caption-text,
.mv-content .wp-element-caption {
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-muted);
}

.mv-content iframe {
  width: 100%;
  border: 0;
}

/* Fichas de enlaces internos
   Comentario: solo el titular, con aspecto de cita (filete a la izquierda y fondo
   suave) para que no compita con el cuerpo de la noticia. La colocación una a una
   la hace `inc/related-cards.php`. */

.mv-ilink {
  margin: 20px 0 22px;
  padding: 10px 14px 10px 15px;
  border-left: 3px solid var(--mv-rojo);
  background: var(--mv-bg-soft);
}

.mv-content .mv-ilink a.mini-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mv-content .mv-ilink .mini-card-title {
  display: block;
  margin: 0;
  font-family: var(--mv-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 19px;
  color: var(--mv-ink);
  transition: color var(--mv-transition);
}

.mv-content .mv-ilink a.mini-card-link:hover .mini-card-title,
.mv-content .mv-ilink a.mini-card-link:focus-visible .mini-card-title {
  color: var(--mv-rojo);
}

@media (max-width: 600px) {
  .mv-ilink {
    margin: 18px 0 20px;
    padding: 9px 12px 9px 13px;
  }

  .mv-content .mv-ilink .mini-card-title {
    font-size: 13px;
    line-height: 18px;
  }
}

/* Compartir */

.mv-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 30px 0;
  padding: 14px 0;
  border-top: 1px solid var(--mv-line);
  border-bottom: 1px solid var(--mv-line);
}

.mv-share-label {
  margin-right: 4px;
  font-family: var(--mv-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-muted-strong);
}

.mv-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-bg);
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-ink);
  cursor: pointer;
  transition: background var(--mv-transition), color var(--mv-transition), border-color var(--mv-transition);
}

.mv-share-btn:hover {
  background: var(--mv-azul);
  border-color: var(--mv-azul);
  color: #fff;
}

.mv-share-btn--whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
}

.mv-share-btn--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.mv-share-btn--x:hover {
  background: #111;
  border-color: #111;
}

.mv-share-btn--telegram:hover {
  background: #229ed9;
  border-color: #229ed9;
}

.mv-share-btn--linkedin:hover {
  background: #0a66c2;
  border-color: #0a66c2;
}

/* Etiquetas y autor */

.mv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.mv-tags a {
  padding: 4px 10px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-muted-strong);
}

.mv-tags a:hover {
  border-color: var(--mv-rojo);
  color: var(--mv-rojo);
}

.mv-author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  margin-bottom: 34px;
  background: var(--mv-bg-soft);
  border-radius: var(--mv-radius);
}

.mv-author-box img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.mv-author-box h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.mv-author-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mv-muted-strong);
}

/* Relacionados */

.mv-related {
  margin-top: 30px;
  padding: 36px 0 16px;
  border-top: 1px solid var(--mv-line);
}

/* Bloque «Te puede interesar»: medidas tomadas de la ficha de la flota. Título
   centrado en mayúsculas (16 px en móvil, 18 px en escritorio, sin subrayado) y
   rejilla de seis tarjetas de 267 px (imagen 3:2, titular serif a dos líneas y
   fecha larga de 13 px). */

.mv-related-title {
  margin: 0 0 30px;
  font-family: var(--mv-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--mv-ink);
}

.mv-related-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.mv-related-item {
  padding: 0 10px;
  margin-bottom: 20px;
}

.mv-related-thumb {
  display: block;
  margin-bottom: 17px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mv-bg-soft);
}

.mv-related-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-related-item-title {
  margin: 0;
  font-family: var(--mv-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.mv-related-item-title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--mv-ink);
}

.mv-related-item-title a:hover {
  color: var(--mv-accent);
}

.mv-related-date {
  display: block;
  margin-top: 8px;
  font-family: var(--mv-font-alt);
  font-size: 13px;
  color: var(--mv-muted);
}

/* Comentario: los cortes son los de la referencia: dos columnas desde 480 px y
   tres a partir de 1200 px. */
@media (min-width: 480px) {
  .mv-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 782px) {
  .mv-related-title {
    font-size: 18px;
  }

  .mv-related-item-title {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .mv-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mv-section-title {
  margin: 0 0 22px;
  font-family: var(--mv-font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.mv-section-title span {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--mv-rojo);
}

/* ---------------------------------------------------------------- widget -- */

.mv-widget {
  margin: 0 0 30px;
}

.mv-widget-title {
  margin: 0 0 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mv-line);
  font-family: var(--mv-font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
}

.mv-widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 52px;
  height: 3px;
  background: var(--mv-rojo);
}

/* Hemeroteca: el título va en barra con borde de acento (8/12/7 de relleno, borde
   de 1 px y 6 px a la izquierda) y debajo el desplegable de meses del núcleo, con
   la flecha del original (`appearance: none` + icono de fondo). Medidas tomadas del
   bloque de archivos del sitio de referencia. */

.mv-widget.widget_mv_hemeroteca .mv-widget-title {
  margin: 0 0 16px;
  padding: 8px 12px 7px;
  border: 1px solid var(--mv-accent);
  border-left-width: 6px;
  background: var(--mv-bg);
  color: var(--mv-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.mv-widget.widget_mv_hemeroteca .mv-widget-title::after {
  content: none;
}

.mv-archive-dropdown {
  margin: 0;
}

.mv-archive-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 3px 30px 3px 12px;
  border: 1px solid #dedede;
  border-radius: 0;
  background-color: var(--mv-bg);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==");
  background-position: calc(100% - 9px) 50%;
  background-repeat: no-repeat;
  background-size: auto 18px;
  font-family: var(--mv-font-alt);
  font-size: 14px;
  line-height: 32px;
  color: var(--mv-ink);
  cursor: default;
}

.mv-archive-select:hover,
.mv-archive-select:focus {
  border-color: var(--mv-accent);
  outline: none;
}

.mv-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-widget ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--mv-line-soft);
  font-size: 15px;
  line-height: 1.5;
}

.mv-widget ul li:last-child {
  border-bottom: 0;
}

.mv-widget ul li a {
  color: var(--mv-ink);
}

.mv-widget ul li a:hover {
  color: var(--mv-rojo);
}

/* Lista de populares con pestañas */

.mv-popular-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--mv-line);
}

.mv-popular-tab {
  flex: 1 1 auto;
  padding: 9px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--mv-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mv-muted-strong);
  cursor: pointer;
  transition: color var(--mv-transition), border-color var(--mv-transition);
}

.mv-popular-tab[aria-selected="true"] {
  color: var(--mv-rojo);
  border-bottom-color: var(--mv-rojo);
}

.mv-popular-list {
  display: grid;
  gap: 14px;
}

.mv-popular-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mv-popular-rank {
  flex: 0 0 24px;
  font-family: var(--mv-font-ui);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mv-line);
}

.mv-popular-item:hover .mv-popular-rank {
  color: var(--mv-rojo);
}

.mv-popular-item a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mv-ink);
}

.mv-popular-item a:hover {
  color: var(--mv-rojo);
}

/* ------------------------------------------------------------ publicidad -- */

.mv-ad {
  display: flex;
  justify-content: center;
  margin: 24px 0;
  overflow: hidden;
}

/* Comentario: `.mv-ad` es `display:flex`, así que el atributo `hidden` del hueco
 * sin relleno (lo pone `assets/js/main.js`) necesita esta regla para no dejar la
 * caja blanca ocupando altura. */
.mv-ad[hidden],
.mv-ad.is-unfilled {
  display: none !important;
}

.mv-ad--header {
  margin: 18px 0 0;
}

.mv-ad--header-bottom {
  margin: 24px 0 0;
}

.mv-ad ins,
.mv-ad iframe {
  max-width: 100%;
}

.mv-ad-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mv-font-alt);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mv-muted);
  text-align: center;
}

/* ------------------------------------------------------------- paginación -- */

.mv-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 40px 0 0;
  font-family: var(--mv-font-alt);
  font-size: 14px;
}

.mv-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  color: var(--mv-ink);
}

.mv-pagination .page-numbers:hover {
  border-color: var(--mv-azul);
  color: var(--mv-azul);
}

.mv-pagination .page-numbers.current {
  background: var(--mv-azul);
  border-color: var(--mv-azul);
  color: #fff;
}

.mv-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--mv-muted);
}

/* Navegación entrada anterior / siguiente */

.mv-post-nav {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

@media (min-width: 600px) {
  .mv-post-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.mv-post-nav a {
  display: block;
  padding: 16px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mv-ink);
}

.mv-post-nav a:hover {
  border-color: var(--mv-rojo);
  color: var(--mv-rojo);
}

.mv-post-nav span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mv-font-alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-muted);
}

.mv-post-nav .mv-nav-next {
  text-align: right;
}

/* ---------------------------------------------------------------- comentarios */

.mv-comments {
  margin-top: 34px;
}

.mv-comments ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-comments .comment-body {
  padding: 16px 0;
  border-bottom: 1px solid var(--mv-line-soft);
}

.mv-comments .comment-author img {
  border-radius: 50%;
  margin-right: 8px;
}

.mv-comments .children {
  padding-left: 24px;
  border-left: 2px solid var(--mv-line-soft);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  font-family: var(--mv-font-body);
  font-size: 15px;
}

.comment-form .submit {
  padding: 11px 22px;
  border: 0;
  border-radius: var(--mv-radius);
  background: var(--mv-azul);
  color: #fff;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ----------------------------------------------------------------- 404 --- */

.mv-404 {
  padding: 60px 0 80px;
  text-align: center;
}

.mv-404-code {
  font-family: var(--mv-font-ui);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--mv-line);
}

.mv-404 h1 {
  margin: 10px 0 14px;
  font-size: 26px;
}

.mv-404 p {
  max-width: 520px;
  margin: 0 auto 26px;
  color: var(--mv-muted-strong);
}

.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--mv-radius);
  background: var(--mv-azul);
  color: #fff;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mv-btn:hover {
  background: var(--mv-azul-oscuro);
  color: #fff;
}

/* -------------------------------------------------------------- sin datos -- */

.mv-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--mv-muted-strong);
}

.mv-empty h2 {
  font-size: 22px;
}

/* ------------------------------------------------------------ contacto -- */

/* Comentario: bloque reutilizable de datos de contacto (página de contacto y pie).
 * Se pinta como lista de líneas; la variante de página lleva tarjeta y la del pie
 * hereda la paleta oscura. */
.mv-contact {
  display: grid;
  gap: 5px;
  margin-bottom: 22px;
  font-family: var(--mv-font-alt);
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
  color: var(--mv-muted-strong);
}

.mv-contact-company {
  color: var(--mv-ink);
  font-weight: 600;
}

.mv-contact a {
  color: var(--mv-azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mv-contact--page {
  padding: 18px 20px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-bg-soft);
}

/* Comentario: formulario de Contact Form 7 tal y como lo envuelve la página de
 * contacto (`.mv-contact-form`). Sin ese contenedor el plugin se queda con su
 * estilo por defecto. */
.mv-contact-form {
  margin-top: 26px;
}

.mv-form p {
  margin-bottom: 18px;
}

.mv-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mv-font-alt);
  font-size: 13px;
  font-weight: 600;
  color: var(--mv-ink);
}

.mv-form .mv-required {
  margin-left: 2px;
  color: var(--mv-rojo);
}

.mv-form input[type="text"],
.mv-form input[type="email"],
.mv-form input[type="tel"],
.mv-form select,
.mv-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: #fff;
  font-family: var(--mv-font-alt);
  font-size: 15px;
  color: var(--mv-ink);
}

.mv-form textarea {
  min-height: 150px;
  resize: vertical;
}

.mv-form input:focus,
.mv-form select:focus,
.mv-form textarea:focus {
  border-color: var(--mv-azul);
  outline: 2px solid rgba(0, 51, 153, 0.18);
  outline-offset: 1px;
}

/* Comentario: filas de dos campos en escritorio y una columna en móvil. */
.mv-form .mv-form-row {
  display: grid;
  gap: 0 18px;
}

@media (min-width: 620px) {
  .mv-form .mv-form-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mv-form .mv-form-consent {
  font-family: var(--mv-font-alt);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mv-muted-strong);
}

.mv-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.mv-form .wpcf7-acceptance input {
  margin-right: 8px;
}

.mv-form .wpcf7-acceptance a {
  color: var(--mv-azul);
  text-decoration: underline;
}

.mv-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--mv-radius);
  background: var(--mv-azul);
  color: #fff;
  font-family: var(--mv-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.mv-form .wpcf7-submit:hover {
  background: var(--mv-azul-oscuro);
}

.mv-form .wpcf7-turnstile.cf-turnstile {
  margin-bottom: 18px;
}

.mv-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-family: var(--mv-font-alt);
  font-size: 12px;
  color: var(--mv-rojo);
}

/* Comentario: CF7 pinta el resultado en un div con estilos en línea; hay que
 * ganarle con !important para que encaje con el diseño. */
.mv-form .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--mv-line) !important;
  border-radius: var(--mv-radius);
  font-family: var(--mv-font-alt);
  font-size: 14px;
}

.mv-form.sent .wpcf7-response-output {
  border-color: #1f7a4d !important;
  background: #f1f9f4;
  color: #135c38;
}

.mv-form.invalid .wpcf7-response-output,
.mv-form.spam .wpcf7-response-output,
.mv-form.failed .wpcf7-response-output {
  border-color: var(--mv-rojo) !important;
  background: #fdf2f5;
  color: #7a0026;
}

/* ------------------------------------------------------------------- pie -- */

.mv-footer {
  margin-top: 50px;
  background: var(--mv-bg-dark);
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.mv-footer a {
  color: rgba(255, 255, 255, 0.78);
}

.mv-footer a:hover {
  color: #fff;
}

.mv-footer h3,
.mv-footer .mv-widget-title {
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
}

.mv-footer .mv-widget-title::after {
  background: var(--mv-rojo);
}

.mv-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-footer li {
  padding: 6px 0;
}

.mv-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  padding: 44px 0 36px;
}

/* Comentario: logo+contacto, «últimas noticias» y «lo + visto» son fijas; cada
 * hueco de widgets que rellene el sitio añade una columna más. El brand ocupa algo
 * más de ancho. */
@media (min-width: 782px) {
  .mv-footer-top--cols2 {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .mv-footer-top--cols3 {
    grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
  }

  .mv-footer-top--cols4 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .mv-footer-top--cols5 {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

.mv-footer-about p {
  margin-bottom: 14px;
}

/* Comentario: datos de contacto bajo el logo, en la paleta del pie. */
.mv-footer-info {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  font-family: var(--mv-font-alt);
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.mv-footer-info .mv-contact-company {
  color: #fff;
  font-family: var(--mv-font-ui);
  font-size: 14px;
  font-weight: 600;
}

.mv-footer-info a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.mv-footer-info a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Comentario: el logo del pie es la versión blanca del logotipo. Si no se ha
 * elegido una, se tiñe el logo del sitio (misma silueta) con un filtro: el fichero
 * original no se toca. */
.mv-footer-logo {
  display: inline-block;
  margin-bottom: 14px;
}

.mv-footer-logo img,
.mv-footer-logo .custom-logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 260px;
}

.mv-footer-logo--tinted img,
.mv-footer-logo--tinted .custom-logo {
  filter: brightness(0) invert(1);
}

/* Comentario: el periodo va como etiqueta pequeña al lado del título del bloque,
 * para que se lea «Lo más leído · 24 h» sin alargar el titular. */
.mv-footer-window {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--mv-rojo);
  color: #fff;
  font-family: var(--mv-font-alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.mv-footer-popular,
.mv-footer-latest {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-footer-popular-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.mv-footer-latest-item {
  display: block;
}

.mv-footer-rank {
  flex: 0 0 20px;
  font-family: var(--mv-font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mv-rojo);
}

.mv-footer-popular-item a,
.mv-footer-latest-item a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.mv-footer-popular-item a:hover,
.mv-footer-latest-item a:hover {
  color: #fff;
}

/* Comentario: la fecha va bajo el titular, como en los listados del tema anterior. */
.mv-footer-date {
  display: block;
  margin-top: 3px;
  font-family: var(--mv-font-alt);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.mv-footer-brand {
  font-family: var(--mv-font-ui);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.mv-footer-bottom {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--mv-font-alt);
  font-size: 12px;
}

.mv-footer-bottom .mv-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
}

.mv-legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------ volver arriba */

.mv-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--mv-azul);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mv-transition), transform var(--mv-transition), visibility var(--mv-transition);
}

.mv-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --------------------------------------------------------------- utilidades */

.mv-no-scroll {
  overflow: hidden;
}

.mv-hidden {
  display: none !important;
}

/* ------------------------------------------------- Elementor y editor ---- */

.mv-elementor-canvas .mv-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  padding: 0;
  gap: 0;
}

.elementor-page .mv-content>.elementor {
  margin: 0 -16px;
}

@media (min-width: 1024px) {
  .elementor-page .mv-content>.elementor {
    margin: 0;
  }
}

.alignleft {
  float: left;
  margin: 0 20px 14px 0;
}

.alignright {
  float: right;
  margin: 0 0 14px 20px;
}

.aligncenter {
  display: block;
  margin: 0 auto 14px;
}

.wp-block-image {
  margin-bottom: 17px;
}

/* ------------------------------------------------------------ utilidades -- */

.mv-front-more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.mv-drawer-search {
  margin-top: 20px;
}

.mv-404-search {
  max-width: 460px;
  margin: 0 auto;
}

/* ------------------------------------------ piezas según el dispositivo -- */

/* Comentario: los widgets de la portada guardan «ocultar en móvil/tablet» por pieza
 * (herencia de la maqueta anterior). Se aplican por atributo en los puntos de
 * ruptura de la flota: tablet hasta 1024 px y móvil hasta 767 px, de forma que la
 * misma tarjeta muestra más o menos información según la pantalla. */
@media (max-width: 1024px) {

  [data-hide-tablet~="desc"] .mv-card-excerpt,
  [data-hide-tablet~="cat"] .mv-card-cat,
  [data-hide-tablet~="meta"] .mv-meta,
  [data-hide-tablet~="meta"] .mv-card-meta,
  [data-hide-tablet~="thumb"] .mv-thumb,
  [data-hide-tablet~="title"] .mv-card-title {
    display: none;
  }
}

@media (max-width: 767px) {

  [data-hide-mobile~="desc"] .mv-card-excerpt,
  [data-hide-mobile~="cat"] .mv-card-cat,
  [data-hide-mobile~="meta"] .mv-meta,
  [data-hide-mobile~="meta"] .mv-card-meta,
  [data-hide-mobile~="thumb"] .mv-thumb,
  [data-hide-mobile~="title"] .mv-card-title {
    display: none;
  }
}

@media (min-width: 1025px) {

  [data-hide-desktop~="desc"] .mv-card-excerpt,
  [data-hide-desktop~="cat"] .mv-card-cat,
  [data-hide-desktop~="meta"] .mv-meta,
  [data-hide-desktop~="meta"] .mv-card-meta,
  [data-hide-desktop~="thumb"] .mv-thumb,
  [data-hide-desktop~="title"] .mv-card-title {
    display: none;
  }
}

/* Comentario: bloques publicitarios del gestor que AdSense no rellena: se colapsan
 * para que no dejen un hueco blanco en medio de la maqueta. */
.sf-ads-single.is-unfilled,
.sf-ads-group.is-unfilled {
  display: none !important;
}

/* Comentario: el gestor pinta la X del intersticial con Font Awesome, que la
   plantilla ya no carga en páginas sin iconos. Se dibuja con texto para que el
   botón de cerrar siga siendo visible sin depender de la fuente. */
.sf-ads-interstitial-close .fa-times::before {
  content: "\00d7";
  font-family: var(--mv-font-ui);
  font-size: 20px;
  line-height: 1;
}

/* --------------------------------------------------------- redes sociales -- */

/* Comentario: los iconos son SVG en línea (Bootstrap Icons) para no descargar
   FontAwesome solo por ocho logotipos. Heredan el color del enlace con
   `currentColor` y se ajustan al tamaño del botón. */
.mv-social__icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 767px) {
  .mv-social__icon {
    width: 15px;
    height: 15px;
  }
}

/* ------------------------------------------------- embeds de redes sociales -- */

/* Comentario: una publicación de X, Instagram o Facebook se pinta como tarjeta
   propia, sin nada del proveedor: cero peticiones y cero JavaScript de terceros
   hasta que el lector pulsa «Mostrar publicación». El embed oficial se pide
   entonces y solo de esa red. */
.mv-embed {
  margin: 28px 0;
  padding: 16px 18px;
  border: 1px solid var(--mv-line);
  border-radius: 10px;
  background: var(--mv-bg-soft);
  font-family: var(--mv-font-alt);
}

.mv-embed__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--mv-muted-strong);
}

.mv-embed__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 7px;
  background: var(--mv-bg-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.mv-embed__service {
  font-weight: 700;
  color: var(--mv-ink);
}

.mv-embed__account {
  color: var(--mv-muted-strong);
}

.mv-embed__title {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mv-ink-soft);
}

.mv-embed__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.mv-embed__load {
  padding: 9px 16px;
  border: 0;
  border-radius: 7px;
  background: var(--mv-accent);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mv-embed__load:hover,
.mv-embed__load:focus-visible {
  background: var(--mv-azul-oscuro);
}

.mv-embed__load[disabled] {
  opacity: .65;
  cursor: default;
}

.mv-embed__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-accent);
  text-decoration: none;
}

.mv-embed__link:hover {
  text-decoration: underline;
}

/* Comentario: el blockquote del oEmbed de X se lee sin JavaScript; los estilos
   de aquí son los de la tarjeta, no los del widget. */
.mv-embed--quote .mv-embed__slot blockquote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-style: normal;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mv-ink);
}

.mv-embed--quote .mv-embed__slot blockquote a {
  color: var(--mv-muted-strong);
  font-size: 14px;
  text-decoration: none;
}

/* Comentario: ya cargado el embed oficial, fuera la tarjeta: manda el widget. */
.mv-embed.is-loaded {
  padding: 0;
  border: 0;
  background: transparent;
}

.mv-embed.is-loaded .mv-embed__head,
.mv-embed.is-loaded .mv-embed__title,
.mv-embed.is-loaded .mv-embed__actions {
  display: none;
}

.mv-embed.is-loaded .mv-embed__slot {
  margin: 0;
}

.mv-embed__slot iframe {
  display: block;
  width: 100%;
  max-width: 540px;
  border: 0;
}

.mv-embed__error {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--mv-muted-strong);
}