/* ==========================================================================
   FINCIL — Componentes (Fase 0)
   Piezas reutilizables para toda la landing: navegación, botones, tarjetas,
   badges y el motivo visual de "conexión" que se repite en Home (1.4).
   ========================================================================== */

/* ---- Navegación ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.nav__fila {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--esp-4) var(--esp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
}
.nav__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--azul-profundo);
}
.nav__marca .nav__punto { color: var(--azul-fincil); }
.nav__enlaces {
  display: flex;
  gap: var(--esp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__enlaces a {
  color: var(--azul-profundo);
  font-weight: 500;
  font-size: 0.9375rem;
}
.nav__enlaces a:hover { color: var(--azul-fincil); }
.nav__acciones { display: flex; align-items: center; gap: var(--esp-4); }

@media (max-width: 900px) {
  .nav__enlaces { display: none; }
}

/* ---- Botones ---- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 22px;
  border-radius: var(--radio-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duracion-rapida) var(--curva),
              background var(--duracion-rapida) var(--curva),
              box-shadow var(--duracion-rapida) var(--curva);
  text-decoration: none;
}
.boton--primario {
  background: var(--azul-fincil);
  color: var(--blanco);
}
.boton--primario:hover {
  background: var(--azul-fincil-hover);
  color: var(--blanco);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 143, 240, 0.28);
}
.boton--secundario {
  background: transparent;
  color: var(--azul-profundo);
  border-color: var(--borde-fuerte);
}
.boton--secundario:hover {
  border-color: var(--azul-fincil);
  color: var(--azul-fincil);
}
.boton--sobre-oscuro {
  background: var(--blanco);
  color: var(--azul-profundo);
}
.boton--sobre-oscuro:hover { background: var(--azul-claro); }
.boton--texto {
  background: none;
  border: none;
  color: var(--azul-fincil);
  padding: 4px 0;
  border-radius: 0;
}
.boton--texto:hover { color: var(--azul-fincil-hover); }

/* ---- Tarjetas ---- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--esp-5);
  transition: box-shadow var(--duracion-media) var(--curva),
              transform var(--duracion-media) var(--curva);
}
.tarjeta--interactiva:hover {
  box-shadow: var(--sombra-tarjeta-hover);
  transform: translateY(-2px);
}
.tarjeta__icono {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-sm);
  background: var(--azul-fincil-suave);
  color: var(--azul-fincil);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--esp-4);
}
.tarjeta h4 { margin-bottom: var(--esp-2); }
.tarjeta__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--esp-4);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ---- Badges de estado ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radio-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}
.badge--info { background: var(--azul-fincil-suave); color: var(--azul-fincil); }
.badge--exito { background: rgba(29, 122, 90, 0.12); color: var(--verde); }
.badge--acento { background: rgba(233, 107, 134, 0.14); color: var(--rosa-acento); }

/* ---- Conector: motivo visual de "todo está conectado" ----
   Línea punteada animada que fluye de un punto a otro. Se usa entre
   tarjetas de módulos para sugerir flujo de información (Home 1.4). */
.conector {
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, var(--azul-fincil) 50%, transparent 50%);
  background-size: 10px 2px;
  position: relative;
  overflow: hidden;
}
.conector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  animation: flujo-conector 1.4s linear infinite;
}
@keyframes flujo-conector {
  from { transform: translateX(0); }
  to { transform: translateX(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .conector::after { animation: none; }
}

/* ---- Contador animado de KPIs (número que sube al entrar en pantalla) ---- */
.kpi__numero {
  font-family: var(--fuente-titulos);
  font-size: var(--tam-h1);
  font-weight: 800;
  color: var(--azul-profundo);
}
.kpi__etiqueta { color: var(--gris-texto); font-size: 0.9375rem; }

/* ---- Animación de entrada al hacer scroll ----
   Se activa añadiendo la clase "en-vista" vía IntersectionObserver (JS). */
.entra-en-vista {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duracion-media) var(--curva),
              transform var(--duracion-media) var(--curva);
}
.entra-en-vista.en-vista {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .entra-en-vista { opacity: 1; transform: none; transition: none; }
}