/* =========================================================================
   Mi Vínculo — Componentes
   Documentación: docs/sistema-diseno.md §3

   Nomenclatura BEM en español: .mv-bloque, .mv-bloque__elemento,
   .mv-bloque--variante.

   Todo color, espacio, radio, sombra y capa sale de un token SEMÁNTICO.
   Si aquí aparece un hexadecimal, es un error.
   ========================================================================= */

/* =========================================================================
   1. Sección y tonos                                        (§3.1)
   ========================================================================= */

.mv-seccion {
  padding-block: var(--mv-e-16);
  background-color: var(--mv-fondo);
  color: var(--mv-texto);
}

@media (min-width: 64em) {
  .mv-seccion {
    padding-block: var(--mv-e-24);
  }
}

.mv-seccion--compacta {
  padding-block: var(--mv-e-10);
}

.mv-seccion--clara {
  --mv-fondo: var(--mv-blanco);
  --mv-fondo-alterno: var(--mv-arena-050);
}

.mv-seccion--alterna {
  --mv-fondo: var(--mv-arena-100);
  --mv-fondo-elevado: var(--mv-blanco);
}

/* El tono institucional NO duplica componentes: solo reasigna la capa
   semántica, y todo lo que hay dentro se adapta. */
.mv-seccion--institucional {
  --mv-fondo: var(--mv-navy-900);
  --mv-fondo-alterno: var(--mv-navy-800);
  --mv-fondo-elevado: var(--mv-navy-800);

  --mv-texto: var(--mv-blanco);
  --mv-texto-suave: var(--mv-navy-200);
  --mv-texto-tenue: var(--mv-navy-200);

  --mv-borde: var(--mv-linea-clara);
  --mv-borde-fuerte: var(--mv-linea-clara-fuerte);

  --mv-accion-hover: var(--mv-verde-500);
  --mv-accion-suave: var(--mv-verde-tenue);

  --mv-acento: var(--mv-ambar-500);
  --mv-acento-texto: var(--mv-ambar-500);
  --mv-acento-suave: var(--mv-ambar-tenue);

  --mv-foco: var(--mv-ambar-500);

  /* Tono sobrio: los títulos abandonan la serif. */
  --mv-fuente-titulo-activa: var(--mv-fuente-ui);
}

.mv-seccion__encabezado {
  max-width: 46rem;
  margin-bottom: var(--mv-e-12);
}

.mv-seccion__encabezado--centrado {
  margin-inline: auto;
  text-align: center;
}

.mv-seccion__encabezado--centrado .mv-seccion__texto {
  margin-inline: auto;
}

.mv-seccion__sobretitulo {
  margin-bottom: var(--mv-e-2);
  color: var(--mv-acento-texto);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-fuerte);
  letter-spacing: var(--mv-espaciado-etiqueta);
  text-transform: uppercase;
}

.mv-seccion__titulo {
  color: var(--mv-texto);
}

.mv-seccion__texto {
  margin-top: var(--mv-e-4);
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-lg);
}

/* =========================================================================
   2. Botón                                                  (§3.2)
   ========================================================================= */

.mv-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-e-2);
  min-height: 44px;
  padding: var(--mv-e-3) var(--mv-e-6);
  border: 1px solid transparent;
  border-radius: var(--mv-radio-sm);
  font-family: var(--mv-fuente-ui);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mv-transicion),
    border-color var(--mv-transicion), color var(--mv-transicion),
    box-shadow var(--mv-transicion), transform var(--mv-transicion);
}

.mv-boton:disabled,
.mv-boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.mv-boton--primario {
  background-color: var(--mv-accion);
  color: var(--mv-accion-texto);
  box-shadow: var(--mv-sombra-1);
}

.mv-boton--primario:hover:not(:disabled) {
  background-color: var(--mv-accion-hover);
  box-shadow: var(--mv-sombra-2);
}

.mv-boton--primario:active:not(:disabled) {
  background-color: var(--mv-accion-activa);
  box-shadow: none;
}

.mv-boton--secundario {
  background-color: transparent;
  border-color: var(--mv-borde-fuerte);
  color: var(--mv-texto);
}

.mv-boton--secundario:hover:not(:disabled) {
  border-color: var(--mv-accion);
  color: var(--mv-accion);
  background-color: var(--mv-accion-suave);
}

/* Un solo botón de acento por pantalla. */
.mv-boton--acento {
  background-color: var(--mv-acento);
  color: var(--mv-acento-contraste);
  box-shadow: var(--mv-sombra-1);
}

.mv-boton--acento:hover:not(:disabled) {
  background-color: var(--mv-ambar-500);
  box-shadow: var(--mv-sombra-2);
}

.mv-boton--fantasma {
  background-color: transparent;
  color: var(--mv-texto-suave);
}

.mv-boton--fantasma:hover:not(:disabled) {
  background-color: var(--mv-fondo-alterno);
  color: var(--mv-texto);
}

.mv-boton--sm {
  min-height: 36px;
  padding: var(--mv-e-2) var(--mv-e-4);
  font-size: var(--mv-texto-xs);
}

.mv-boton--lg {
  min-height: 52px;
  padding: var(--mv-e-4) var(--mv-e-8);
  font-size: var(--mv-texto-base);
}

.mv-boton--bloque {
  display: flex;
  width: 100%;
}

/* Botón que solo contiene un icono. Requiere aria-label. */
.mv-boton--icono {
  min-width: 44px;
  padding: var(--mv-e-3);
}

/* =========================================================================
   3. Enlace                                                 (§3.3)
   ========================================================================= */

.mv-enlace {
  color: var(--mv-accion);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--mv-transicion);
}

.mv-enlace:hover {
  color: var(--mv-accion-hover);
  text-decoration-thickness: 2px;
}

.mv-enlace--acento {
  color: var(--mv-acento-texto);
}

/* =========================================================================
   4. Etiqueta                                               (§3.4)
   ========================================================================= */

.mv-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-e-1);
  padding: var(--mv-e-1) var(--mv-e-3);
  border: 1px solid transparent;
  border-radius: var(--mv-radio-completo);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-semi);
  line-height: 1.4;
  white-space: nowrap;
}

.mv-etiqueta--verde {
  background-color: var(--mv-verde-050);
  border-color: var(--mv-verde-100);
  color: var(--mv-verde-700);
}

.mv-etiqueta--ambar {
  background-color: var(--mv-ambar-050);
  border-color: var(--mv-ambar-100);
  color: var(--mv-ambar-700);
}

.mv-etiqueta--navy {
  background-color: var(--mv-navy-050);
  border-color: var(--mv-navy-100);
  color: var(--mv-navy-700);
}

.mv-etiqueta--neutro {
  background-color: var(--mv-fondo-alterno);
  border-color: var(--mv-borde);
  color: var(--mv-texto-suave);
}

.mv-etiqueta--solida.mv-etiqueta--verde {
  background-color: var(--mv-verde-600);
  border-color: transparent;
  color: var(--mv-blanco);
}

.mv-etiqueta--solida.mv-etiqueta--ambar {
  background-color: var(--mv-ambar-600);
  border-color: transparent;
  color: var(--mv-acento-contraste);
}

.mv-etiqueta--solida.mv-etiqueta--navy {
  background-color: var(--mv-navy-800);
  border-color: transparent;
  color: var(--mv-blanco);
}

/* Sobre tono institucional las variantes suaves necesitan contraste propio. */
.mv-seccion--institucional .mv-etiqueta--verde,
.mv-panel--institucional .mv-etiqueta--verde {
  background-color: var(--mv-accion-suave);
  border-color: transparent;
  color: var(--mv-verde-400);
}

.mv-seccion--institucional .mv-etiqueta--ambar,
.mv-panel--institucional .mv-etiqueta--ambar {
  background-color: var(--mv-acento-suave);
  border-color: transparent;
  color: var(--mv-ambar-500);
}

/* =========================================================================
   5. Tarjeta                                                (§3.5)
   ========================================================================= */

.mv-tarjeta {
  display: flex;
  flex-direction: column;
  background-color: var(--mv-fondo-elevado);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-md);
  overflow: hidden;
  transition: border-color var(--mv-transicion), box-shadow var(--mv-transicion),
    transform var(--mv-transicion);
}

.mv-tarjeta--interactiva:hover {
  border-color: var(--mv-borde-fuerte);
  box-shadow: var(--mv-sombra-2);
  transform: translateY(-2px);
}

.mv-tarjeta--plana {
  background-color: transparent;
  box-shadow: none;
}

.mv-tarjeta__medios {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  padding: var(--mv-e-6);
  background-color: var(--mv-fondo-alterno);
  color: var(--mv-texto-suave);
}

/* Color del icono ilustrativo, según el servicio al que pertenece. */
.mv-tarjeta__medios--verde {
  color: var(--mv-verde-600);
}

.mv-tarjeta__medios--ambar {
  color: var(--mv-ambar-700);
}

.mv-tarjeta__medios--navy {
  color: var(--mv-navy-700);
}

.mv-tarjeta__marca {
  position: absolute;
  top: var(--mv-e-3);
  left: var(--mv-e-3);
}

.mv-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-2);
  padding: var(--mv-e-5);
  flex-grow: 1;
}

.mv-tarjeta__sobretitulo {
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-3xs);
  font-weight: var(--mv-peso-fuerte);
  letter-spacing: var(--mv-espaciado-etiqueta);
  text-transform: uppercase;
}

.mv-tarjeta__titulo {
  color: var(--mv-texto);
  font-size: var(--mv-texto-xl);
}

.mv-tarjeta__texto {
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-sm);
}

.mv-tarjeta__pie {
  padding: 0 var(--mv-e-5) var(--mv-e-5);
}

/* Precio. La serif le da el peso visual sin recurrir a font-weight 900. */
.mv-precio {
  display: flex;
  align-items: baseline;
  gap: var(--mv-e-1);
  margin-top: var(--mv-e-2);
}

.mv-precio__monto {
  font-family: var(--mv-fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--mv-texto-2xl);
  font-weight: var(--mv-peso-fuerte);
  letter-spacing: var(--mv-espaciado-titulo);
  color: var(--mv-texto);
}

.mv-precio__moneda {
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-semi);
}

/* =========================================================================
   6. Lista de comprobación                                  (§3.6)
   ========================================================================= */

.mv-lista-comprobacion {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-2);
}

.mv-lista-comprobacion__item {
  position: relative;
  padding-left: var(--mv-e-6);
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-sm);
}

/* El icono es decoración: lo pone el CSS, no el HTML.
   `mask` permite teñirlo con un token en lugar de incrustar un color. */
.mv-lista-comprobacion__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  background-color: var(--mv-accion);
  mask-image: url("../assets/iconos/check.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../assets/iconos/check.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.mv-seccion--institucional .mv-lista-comprobacion__item::before {
  background-color: var(--mv-verde-400);
}

/* =========================================================================
   7. Formulario                                             (§3.7)
   ========================================================================= */

.mv-campo {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-2);
}

.mv-campo__etiqueta {
  color: var(--mv-texto);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
}

.mv-control {
  width: 100%;
  min-height: 44px;
  padding: var(--mv-e-3) var(--mv-e-4);
  background-color: var(--mv-fondo-elevado);
  border: 1px solid var(--mv-borde-fuerte);
  border-radius: var(--mv-radio-sm);
  color: var(--mv-texto);
  font-family: var(--mv-fuente-ui);
  font-size: var(--mv-texto-sm);
  transition: border-color var(--mv-transicion), box-shadow var(--mv-transicion);
}

.mv-control::placeholder {
  color: var(--mv-texto-tenue);
}

.mv-control:hover {
  border-color: var(--mv-accion);
}

.mv-control:focus {
  outline: none;
  border-color: var(--mv-accion);
  box-shadow: 0 0 0 3px var(--mv-accion-suave);
}

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

textarea.mv-control {
  min-height: 7rem;
  resize: vertical;
}

select.mv-control {
  cursor: pointer;
  appearance: none;
  padding-right: var(--mv-e-10);
}

/* Envoltorio del desplegable.
   La flecha va en un ::after con `mask`, no en un `background-image` del
   propio select: así se tiñe con un token y funciona en los dos tonos.
   (Un `filter: invert()` sobre el select invertiría también su fondo.) */
.mv-selector {
  position: relative;
  display: block;
}

.mv-selector::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--mv-e-4);
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%) rotate(90deg);
  background-color: var(--mv-texto-suave);
  pointer-events: none;
  mask-image: url("../assets/iconos/flecha-derecha.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../assets/iconos/flecha-derecha.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.mv-campo__ayuda {
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-2xs);
}

.mv-campo__error {
  display: flex;
  align-items: center;
  gap: var(--mv-e-1);
  color: var(--mv-rojo-600);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-medio);
}

.mv-campo--error .mv-control {
  border-color: var(--mv-rojo-600);
}

.mv-campo--error .mv-control:focus {
  box-shadow: 0 0 0 3px var(--mv-rojo-050);
}

/* Casilla de verificación */
.mv-casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-e-3);
  cursor: pointer;
}

.mv-casilla__control {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  accent-color: var(--mv-accion);
  cursor: pointer;
}

.mv-casilla__texto {
  font-size: var(--mv-texto-sm);
}

.mv-casilla__titulo {
  display: block;
  color: var(--mv-texto);
  font-weight: var(--mv-peso-semi);
}

.mv-casilla__nota {
  display: block;
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-2xs);
}

/* Deslizador */
.mv-rango {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.mv-rango::-webkit-slider-runnable-track {
  height: 6px;
  background-color: var(--mv-borde-fuerte);
  border-radius: var(--mv-radio-completo);
}

.mv-rango::-moz-range-track {
  height: 6px;
  background-color: var(--mv-borde-fuerte);
  border-radius: var(--mv-radio-completo);
}

.mv-rango::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  background-color: var(--mv-acento);
  border: 2px solid var(--mv-fondo-elevado);
  border-radius: var(--mv-radio-completo);
  box-shadow: var(--mv-sombra-1);
}

.mv-rango::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background-color: var(--mv-acento);
  border: 2px solid var(--mv-fondo-elevado);
  border-radius: var(--mv-radio-completo);
  box-shadow: var(--mv-sombra-1);
}

.mv-rango__limites {
  display: flex;
  justify-content: space-between;
  margin-top: var(--mv-e-1);
  color: var(--mv-texto-tenue);
  font-size: var(--mv-texto-3xs);
}

/* =========================================================================
   8. Alerta                                                 (§3.8)
   ========================================================================= */

.mv-alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-e-3);
  padding: var(--mv-e-4);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-sm);
  background-color: var(--mv-fondo-alterno);
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-sm);
}

.mv-alerta__icono {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.mv-alerta__titulo {
  display: block;
  margin-bottom: var(--mv-e-1);
  color: var(--mv-texto);
  font-weight: var(--mv-peso-semi);
}

.mv-alerta--exito {
  background-color: var(--mv-verde-050);
  border-color: var(--mv-verde-100);
}

.mv-alerta--exito .mv-alerta__icono {
  color: var(--mv-verde-600);
}

.mv-alerta--aviso {
  background-color: var(--mv-ambar-050);
  border-color: var(--mv-ambar-100);
}

.mv-alerta--aviso .mv-alerta__icono {
  color: var(--mv-ambar-700);
}

.mv-alerta--error {
  background-color: var(--mv-rojo-050);
  border-color: var(--mv-rojo-600);
}

.mv-alerta--error .mv-alerta__icono {
  color: var(--mv-rojo-600);
}

.mv-alerta--info .mv-alerta__icono {
  color: var(--mv-navy-700);
}

/* =========================================================================
   9. Barra de aviso                                         (§3.10)
   ========================================================================= */

.mv-barra-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-e-2);
  padding: var(--mv-e-2) var(--mv-e-4);
  background-color: var(--mv-ambar-600);
  color: var(--mv-acento-contraste);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-medio);
  text-align: center;
}

.mv-barra-aviso__icono {
  flex-shrink: 0;
}

/* =========================================================================
   10. Cabecera del sitio                                    (§3.9)
   ========================================================================= */

.mv-cabecera {
  position: sticky;
  top: 0;
  z-index: var(--mv-z-cabecera);
  background-color: var(--mv-navy-900);
  color: var(--mv-blanco);
  border-bottom: 1px solid var(--mv-linea-clara-sutil);

  /* Tono institucional para todo lo que viva dentro. */
  --mv-texto: var(--mv-blanco);
  --mv-texto-suave: var(--mv-navy-100);
  --mv-fondo-elevado: var(--mv-navy-800);
  --mv-fondo-alterno: var(--mv-navy-800);
  --mv-borde: var(--mv-linea-clara);
  --mv-borde-fuerte: var(--mv-linea-clara-fuerte);
  --mv-acento-texto: var(--mv-ambar-500);
  --mv-foco: var(--mv-ambar-500);
}

@supports (backdrop-filter: blur(12px)) {
  .mv-cabecera {
    background-color: var(--mv-navy-difuso);
    backdrop-filter: blur(12px);
  }
}

.mv-cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-e-4);
  min-height: 4.5rem;
}

/* Marca */
.mv-marca {
  display: flex;
  align-items: center;
  gap: var(--mv-e-3);
  text-decoration: none;
}

.mv-marca__sigla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background-color: var(--mv-ambar-500);
  border-radius: var(--mv-radio-sm);
  color: var(--mv-acento-contraste);
  font-family: var(--mv-fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--mv-texto-xl);
  font-weight: var(--mv-peso-fuerte);
  transition: transform var(--mv-transicion);
}

.mv-marca:hover .mv-marca__sigla {
  transform: scale(1.05);
}

.mv-marca__nombre {
  display: block;
  font-family: var(--mv-fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--mv-texto-xl);
  font-weight: var(--mv-peso-fuerte);
  letter-spacing: var(--mv-espaciado-titulo);
  line-height: 1.1;
  white-space: nowrap;
}

/* El lema es un lujo tipográfico: en pantallas estrechas cede el espacio
   a los controles para no desbordar la barra. */
.mv-marca__lema {
  display: none;
  color: var(--mv-ambar-500);
  font-size: var(--mv-texto-3xs);
  font-weight: var(--mv-peso-medio);
  letter-spacing: var(--mv-espaciado-etiqueta);
  text-transform: uppercase;
}

@media (min-width: 40em) {
  .mv-marca__lema {
    display: block;
  }
}

/* Navegación */
.mv-nav {
  display: none;
  align-items: center;
  gap: var(--mv-e-6);
}

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

.mv-nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-e-2);
  padding: var(--mv-e-2) 0;
  color: var(--mv-navy-100);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-medio);
  border-bottom: 2px solid transparent;
  transition: color var(--mv-transicion), border-color var(--mv-transicion);
}

.mv-nav__enlace:hover {
  color: var(--mv-blanco);
}

/* El estado activo sale del atributo, no de una clase aparte. */
.mv-nav__enlace[aria-current="page"] {
  color: var(--mv-ambar-500);
  border-bottom-color: var(--mv-ambar-500);
}

.mv-cabecera__controles {
  display: flex;
  align-items: center;
  gap: var(--mv-e-2);
}

@media (min-width: 40em) {
  .mv-cabecera__controles {
    gap: var(--mv-e-3);
  }
}

.mv-cabecera__moneda {
  display: none;
  align-items: center;
  gap: var(--mv-e-1);
  padding: var(--mv-e-1) var(--mv-e-3);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-sm);
  color: var(--mv-verde-400);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-semi);
}

@media (min-width: 40em) {
  .mv-cabecera__moneda {
    display: inline-flex;
  }
}

/* En pantallas estrechas el selector de idioma vive dentro del menú móvil:
   en la barra no cabe junto a la marca, el carrito y la hamburguesa. */
.mv-cabecera__idioma {
  display: none;
  min-height: 36px;
  padding: var(--mv-e-1) var(--mv-e-2);
  background-color: var(--mv-navy-800);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-sm);
  color: var(--mv-navy-100);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-semi);
  cursor: pointer;
}

@media (min-width: 40em) {
  .mv-cabecera__idioma {
    display: inline-flex;
  }
}

/* Botón del carrito con contador.
   Compacto por defecto para que quepa junto a la marca en pantallas de 320px. */
.mv-boton-carrito {
  position: relative;
  padding-inline: var(--mv-e-3);
}

@media (min-width: 40em) {
  .mv-boton-carrito {
    padding-inline: var(--mv-e-5);
  }
}

.mv-boton-carrito__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--mv-e-1);
  background-color: var(--mv-ambar-500);
  border-radius: var(--mv-radio-completo);
  color: var(--mv-acento-contraste);
  font-size: var(--mv-texto-3xs);
  font-weight: var(--mv-peso-fuerte);
  line-height: 1;
}

.mv-cabecera__hamburguesa {
  display: inline-flex;
  /* min-width del botón de icono mantiene los 44px de área táctil. */
  padding-inline: var(--mv-e-2);
}

@media (min-width: 64em) {
  .mv-cabecera__hamburguesa {
    display: none;
  }
}

/* Menú móvil */
.mv-menu-movil {
  display: flex;
  flex-direction: column;
  padding: var(--mv-e-3) 0 var(--mv-e-6);
  border-top: 1px solid var(--mv-borde);
}

@media (min-width: 64em) {
  .mv-menu-movil {
    display: none;
  }
}

.mv-menu-movil__enlace {
  display: flex;
  align-items: center;
  gap: var(--mv-e-3);
  min-height: 44px;
  padding: var(--mv-e-3) 0;
  color: var(--mv-navy-100);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
}

.mv-menu-movil__enlace:hover,
.mv-menu-movil__enlace[aria-current="page"] {
  color: var(--mv-ambar-500);
}

.mv-menu-movil__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-e-4);
  margin-top: var(--mv-e-4);
  padding-top: var(--mv-e-4);
  border-top: 1px solid var(--mv-borde);
  color: var(--mv-navy-100);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
}

/* =========================================================================
   11. Pie                                                   (§3.11)
   ========================================================================= */

.mv-pie {
  padding-block: var(--mv-e-16) var(--mv-e-8);
  background-color: var(--mv-navy-900);
  color: var(--mv-navy-200);
  font-size: var(--mv-texto-sm);

  --mv-texto: var(--mv-blanco);
  --mv-texto-suave: var(--mv-navy-200);
  --mv-borde: var(--mv-linea-clara);
  --mv-acento-texto: var(--mv-ambar-500);
  --mv-foco: var(--mv-ambar-500);
}

.mv-pie__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mv-e-10);
}

@media (min-width: 48em) {
  .mv-pie__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .mv-pie__rejilla {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.mv-pie__titulo {
  margin-bottom: var(--mv-e-4);
  color: var(--mv-blanco);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-fuerte);
  letter-spacing: var(--mv-espaciado-etiqueta);
  text-transform: uppercase;
}

.mv-pie__lista {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-3);
}

.mv-pie__enlace {
  color: var(--mv-navy-200);
  transition: color var(--mv-transicion);
}

.mv-pie__enlace:hover {
  color: var(--mv-ambar-500);
}

.mv-pie__legal {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-3);
  margin-top: var(--mv-e-12);
  padding-top: var(--mv-e-6);
  border-top: 1px solid var(--mv-borde);
  color: var(--mv-navy-200);
  font-size: var(--mv-texto-2xs);
}

@media (min-width: 48em) {
  .mv-pie__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================================
   12. Velo, modal y panel                                   (§3.12)
   ========================================================================= */

.mv-velo {
  position: fixed;
  inset: 0;
  z-index: var(--mv-z-velo);
  display: flex;
  background-color: var(--mv-navy-velo);
  animation: mv-aparecer var(--mv-transicion);
}

@supports (backdrop-filter: blur(4px)) {
  .mv-velo {
    backdrop-filter: blur(4px);
  }
}

.mv-velo--centrado {
  align-items: center;
  justify-content: center;
  padding: var(--mv-e-4);
}

.mv-velo--derecha {
  justify-content: flex-end;
}

@keyframes mv-aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mv-modal {
  position: relative;
  z-index: var(--mv-z-modal);
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--mv-e-8);
  background-color: var(--mv-fondo-elevado);
  border-radius: var(--mv-radio-lg);
  box-shadow: var(--mv-sombra-3);
}

.mv-modal--institucional {
  background-color: var(--mv-navy-900);

  --mv-fondo-elevado: var(--mv-navy-800);
  --mv-fondo-alterno: var(--mv-navy-800);
  --mv-texto: var(--mv-blanco);
  --mv-texto-suave: var(--mv-navy-200);
  --mv-texto-tenue: var(--mv-navy-200);
  --mv-borde: var(--mv-linea-clara);
  --mv-borde-fuerte: var(--mv-linea-clara-fuerte);
  --mv-acento-texto: var(--mv-ambar-500);
  --mv-acento-suave: var(--mv-ambar-tenue);
  --mv-accion-suave: var(--mv-verde-tenue);
  --mv-foco: var(--mv-ambar-500);
  --mv-fuente-titulo-activa: var(--mv-fuente-ui);
}

.mv-modal__cerrar,
.mv-panel__cerrar {
  position: absolute;
  top: var(--mv-e-4);
  right: var(--mv-e-4);
  color: var(--mv-texto-suave);
}

.mv-modal__cerrar:hover,
.mv-panel__cerrar:hover {
  color: var(--mv-texto);
}

.mv-modal__encabezado {
  margin-bottom: var(--mv-e-6);
  padding-right: var(--mv-e-10);
}

.mv-modal__titulo {
  margin-block: var(--mv-e-2);
  font-size: var(--mv-texto-2xl);
  font-weight: var(--mv-peso-fuerte);
}

/* Panel lateral */
.mv-panel {
  position: relative;
  z-index: var(--mv-z-modal);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 28rem;
  height: 100%;
  background-color: var(--mv-fondo-elevado);
  box-shadow: var(--mv-sombra-3);
  animation: mv-deslizar var(--mv-transicion);
}

@keyframes mv-deslizar {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.mv-panel__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-e-3);
  padding: var(--mv-e-5);
  background-color: var(--mv-navy-900);
  color: var(--mv-blanco);
}

.mv-panel__titulo {
  display: flex;
  align-items: center;
  gap: var(--mv-e-2);
  font-size: var(--mv-texto-base);
  font-weight: var(--mv-peso-semi);
}

.mv-panel__encabezado .mv-panel__cerrar {
  position: static;
  color: var(--mv-navy-100);
}

.mv-panel__encabezado .mv-panel__cerrar:hover {
  color: var(--mv-blanco);
}

.mv-panel__cuerpo {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--mv-e-5);
}

.mv-panel__pie {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-4);
  padding: var(--mv-e-5);
  background-color: var(--mv-fondo-alterno);
  border-top: 1px solid var(--mv-borde);
}

/* Artículo de una lista (línea del carrito) */
.mv-articulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-e-3);
  padding: var(--mv-e-3);
  background-color: var(--mv-fondo-alterno);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-sm);
}

.mv-articulo + .mv-articulo {
  margin-top: var(--mv-e-3);
}

.mv-articulo__categoria {
  color: var(--mv-texto-tenue);
  font-size: var(--mv-texto-3xs);
  font-weight: var(--mv-peso-fuerte);
  letter-spacing: var(--mv-espaciado-etiqueta);
  text-transform: uppercase;
}

.mv-articulo__titulo {
  margin-block: var(--mv-e-1);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
}

.mv-articulo__precio {
  color: var(--mv-accion);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
}

.mv-articulo__quitar {
  flex-shrink: 0;
}

.mv-articulo__quitar:hover {
  color: var(--mv-rojo-600);
}

/* Resumen de importes (carrito, cotizaciones, resultados de cálculo) */
.mv-resumen {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-2);
  margin: 0;
}

.mv-resumen__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mv-e-4);
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-sm);
}

.mv-resumen__linea dd {
  margin: 0;
  font-weight: var(--mv-peso-semi);
  color: var(--mv-texto);
}

.mv-resumen__linea--total {
  padding-top: var(--mv-e-3);
  border-top: 1px solid var(--mv-borde);
  color: var(--mv-texto);
  font-size: var(--mv-texto-base);
  font-weight: var(--mv-peso-semi);
}

.mv-resumen__linea--total dd {
  color: var(--mv-accion);
  font-family: var(--mv-fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--mv-texto-xl);
  font-weight: var(--mv-peso-fuerte);
}

/* Estado vacío reutilizable */
.mv-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-e-2);
  padding-block: var(--mv-e-12);
  color: var(--mv-texto-tenue);
  text-align: center;
}

.mv-vacio__titulo {
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-sm);
  font-weight: var(--mv-peso-semi);
}

.mv-vacio__texto {
  font-size: var(--mv-texto-2xs);
}

/* =========================================================================
   13. Avisos flotantes                                      (§3.14)
   ========================================================================= */

.mv-avisos {
  position: fixed;
  right: var(--mv-e-5);
  bottom: var(--mv-e-5);
  z-index: var(--mv-z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-2);
  max-width: calc(100vw - var(--mv-e-10));
  pointer-events: none;
}

.mv-aviso {
  display: flex;
  align-items: center;
  gap: var(--mv-e-2);
  padding: var(--mv-e-3) var(--mv-e-4);
  background-color: var(--mv-navy-900);
  border: 1px solid var(--mv-navy-700);
  border-radius: var(--mv-radio-sm);
  box-shadow: var(--mv-sombra-3);
  color: var(--mv-blanco);
  font-size: var(--mv-texto-xs);
  font-weight: var(--mv-peso-medio);
  animation: mv-entrar-aviso var(--mv-transicion);
}

.mv-aviso__icono {
  flex-shrink: 0;
  color: var(--mv-verde-400);
}

.mv-aviso--saliendo {
  opacity: 0;
  transform: translateY(var(--mv-e-2));
  transition: opacity var(--mv-transicion), transform var(--mv-transicion);
}

@keyframes mv-entrar-aviso {
  from {
    opacity: 0;
    transform: translateY(var(--mv-e-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   14. Rejilla                                               (§3.15)
   ========================================================================= */

.mv-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mv-e-6);
}

@media (min-width: 48em) {
  .mv-rejilla--2,
  .mv-rejilla--3,
  .mv-rejilla--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .mv-rejilla--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* =========================================================================
   15. Icono                                                 (§3.16)
   ========================================================================= */

.mv-icono {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: currentColor;
}

/* Icono dentro de un cuadro de color, para destacar una idea. */
.mv-icono-marco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--mv-radio-sm);
  background-color: var(--mv-accion-suave);
  color: var(--mv-accion);
}

.mv-icono-marco--acento {
  background-color: var(--mv-acento-suave);
  color: var(--mv-acento-texto);
}

.mv-icono-marco--grande {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--mv-radio-md);
}

.mv-seccion--institucional .mv-icono-marco {
  color: var(--mv-verde-400);
}