/* =========================================================================
   Mi Vínculo — Página de inicio
   Solo lo que es exclusivo de esta página. Todo lo reutilizable vive en
   componentes.css y se documenta en docs/sistema-diseno.md.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.mv-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--mv-e-16);
  background-color: var(--mv-navy-900);
  color: var(--mv-blanco);

  --mv-fondo: 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-100);
  --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);
}

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

/* Trama de puntos muy tenue, para que el navy no quede plano. */
.mv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    var(--mv-linea-clara-fuerte) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.35;
  pointer-events: none;
}

.mv-hero__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mv-e-12);
  align-items: center;
}

@media (min-width: 64em) {
  .mv-hero__rejilla {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--mv-e-16);
  }
}

.mv-hero__contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mv-e-6);
}

.mv-hero__titulo {
  font-size: var(--mv-texto-5xl);
}

/* El énfasis del titular: la serif ya carga el peso, así que basta el color. */
.mv-hero__enfasis {
  color: var(--mv-ambar-500);
}

.mv-hero__entrada {
  max-width: 46ch;
  color: var(--mv-navy-100);
  font-size: var(--mv-texto-lg);
  line-height: var(--mv-interlinea-amplia);
}

.mv-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-e-3);
}

/* Tarjeta de garantías, sobre el navy del hero */
.mv-hero__panel {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-4);
  padding: var(--mv-e-6);
  background-color: var(--mv-navy-800);
  border: 1px solid var(--mv-linea-clara);
  border-radius: var(--mv-radio-lg);
  box-shadow: var(--mv-sombra-3);
}

.mv-hero__panel-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-e-3);
  padding-bottom: var(--mv-e-4);
  border-bottom: 1px solid var(--mv-linea-clara);
}

.mv-hero__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-e-2);
  color: var(--mv-navy-100);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-semi);
}

.mv-hero__pulso {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--mv-radio-completo);
  background-color: var(--mv-verde-400);
}

.mv-garantia {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-e-3);
}

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

.mv-garantia__texto {
  margin-top: var(--mv-e-1);
  color: var(--mv-navy-200);
  font-size: var(--mv-texto-xs);
}

/* -------------------------------------------------------------------------
   Catálogo
   ------------------------------------------------------------------------- */

.mv-catalogo__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-6);
  margin-bottom: var(--mv-e-10);
}

@media (min-width: 64em) {
  .mv-catalogo__encabezado {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* Pestañas de filtro */
.mv-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-e-1);
  padding: var(--mv-e-1);
  background-color: var(--mv-fondo-alterno);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-md);
}

.mv-filtros__boton {
  padding: var(--mv-e-2) var(--mv-e-4);
  border-radius: var(--mv-radio-sm);
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-xs);
  font-weight: var(--mv-peso-semi);
  transition: background-color var(--mv-transicion), color var(--mv-transicion);
}

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

.mv-filtros__boton[aria-pressed="true"] {
  background-color: var(--mv-fondo-elevado);
  box-shadow: var(--mv-sombra-1);
  color: var(--mv-texto);
}

/* -------------------------------------------------------------------------
   Calculadora hipotecaria
   ------------------------------------------------------------------------- */

.mv-finanzas__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mv-e-12);
  align-items: center;
}

@media (min-width: 64em) {
  .mv-finanzas__rejilla {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--mv-e-16);
  }
}

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

.mv-paso {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-e-3);
  color: var(--mv-texto-suave);
  font-size: var(--mv-texto-sm);
}

.mv-paso__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  background-color: var(--mv-accion-suave);
  border-radius: var(--mv-radio-completo);
  color: var(--mv-verde-400);
  font-size: var(--mv-texto-2xs);
  font-weight: var(--mv-peso-fuerte);
}

.mv-calculadora {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-6);
  padding: var(--mv-e-6);
  background-color: var(--mv-fondo-elevado);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-lg);
  box-shadow: var(--mv-sombra-3);
}

@media (min-width: 48em) {
  .mv-calculadora {
    padding: var(--mv-e-8);
  }
}

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

.mv-calculadora__valor {
  color: var(--mv-ambar-500);
  font-family: var(--mv-fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--mv-texto-xl);
  font-weight: var(--mv-peso-fuerte);
}

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

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

.mv-calculadora__resultado {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mv-e-4);
  padding: var(--mv-e-5);
  background-color: var(--mv-navy-900);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-md);
}

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

.mv-cifra__rotulo {
  display: block;
  color: var(--mv-navy-200);
  font-size: var(--mv-texto-2xs);
}

.mv-cifra__valor {
  display: block;
  margin-top: var(--mv-e-1);
  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);
}

.mv-cifra__valor--verde {
  color: var(--mv-verde-400);
}

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

.mv-cifra__nota {
  display: block;
  color: var(--mv-navy-200);
  font-size: var(--mv-texto-3xs);
}

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

/* -------------------------------------------------------------------------
   Bloque de confianza
   ------------------------------------------------------------------------- */

.mv-confianza {
  display: flex;
  flex-direction: column;
  gap: var(--mv-e-6);
  padding: var(--mv-e-8);
  background-color: var(--mv-fondo-elevado);
  border: 1px solid var(--mv-borde);
  border-radius: var(--mv-radio-md);
}

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

.mv-confianza__texto {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-e-4);
}

.mv-confianza__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-e-2);
  flex-shrink: 0;
}