/* ==========================================================================
   FINCIL — Home (Fase 1)
   Estilos específicos de public/landing/index.html. Consume únicamente
   variables de tokens.css; los componentes genéricos (botones, tarjetas,
   badges, nav base) siguen viviendo en componentes.css.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Utilidades compartidas de la Home
   --------------------------------------------------------------------- */
.acento { color: var(--azul-fincil); }

/* ---------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------- */
.marca-fincil { display: flex; align-items: center; gap: var(--esp-3); }
.marca-fincil__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-fincil__nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.3rem; color: var(--azul-profundo); }
.marca-fincil__eslogan { font-size: 0.6875rem; color: var(--gris-texto); font-weight: 500; }

/* ---------------------------------------------------------------------
   Header — extensiones sobre .nav de componentes.css
   --------------------------------------------------------------------- */
.nav__enlace--activo { color: var(--azul-fincil) !important; font-weight: 600; position: relative; }
.nav__enlace--activo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px;
  height: 2px; background: var(--azul-fincil);
}
.nav__boton-menu {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--azul-profundo); padding: var(--esp-2);
}
.nav__menu-movil {
  display: none;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-3) var(--esp-6) var(--esp-5);
  border-top: 1px solid var(--borde);
}
.nav__menu-movil a {
  padding: var(--esp-3) 0;
  color: var(--azul-profundo);
  font-weight: 500;
  border-bottom: 1px solid var(--borde);
}
.nav__menu-movil.abierto { display: flex; }

@media (max-width: 900px) {
  .nav__boton-menu { display: block; }
  .nav__acciones .boton--secundario { display: none; }
}
@media (max-width: 560px) {
  .marca-fincil__eslogan { display: none; }
}

/* ---------------------------------------------------------------------
   Hero (1.2)
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--esp-9) 0 var(--esp-8);
  overflow: hidden;
  background: linear-gradient(180deg, var(--azul-claro) 0%, var(--blanco) 60%);
}
.hero__cuadricula {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--esp-8);
  align-items: center;
}
.hero__eyebrow { display: block; margin-bottom: var(--esp-4); }
.hero__titulo { max-width: 560px; }
.hero__titulo .acento { color: var(--azul-fincil); }
.hero__subtitulo { max-width: 480px; margin-top: var(--esp-5); }
.hero__acciones { display: flex; gap: var(--esp-4); margin-top: var(--esp-6); flex-wrap: wrap; }
.boton--con-icono { gap: 10px; }
.boton__circulo-play {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul-fincil-suave);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--azul-fincil); flex-shrink: 0;
}
.hero__confianza {
  display: flex; gap: var(--esp-6); flex-wrap: wrap;
  margin-top: var(--esp-6);
}
.hero__confianza-item {
  display: flex; align-items: center; gap: var(--esp-2);
  font-size: 0.875rem; color: var(--gris-texto); font-weight: 500;
}
.hero__confianza-item svg { color: var(--azul-fincil); flex-shrink: 0; }

@media (max-width: 980px) {
  .hero__cuadricula { grid-template-columns: 1fr; }
  .hero__titulo, .hero__subtitulo { max-width: none; }
}

/* ---- Composición visual del hero: mockup + anotaciones flotantes ---- */
.hero__visual {
  position: relative;
  padding: var(--esp-6) var(--esp-4) var(--esp-4);
}
.hero__hoja-decorativa {
  position: absolute; top: -40px; right: -30px; width: 160px; opacity: 0.5;
  color: var(--verde); pointer-events: none; z-index: 0;
}

.mockup {
  position: relative;
  z-index: 1;
  background: var(--azul-profundo);
  border-radius: var(--radio-lg);
  padding: 10px;
  box-shadow: 0 24px 60px rgba(18, 59, 104, 0.28);
}
.mockup__pantalla {
  background: var(--blanco);
  border-radius: var(--radio-md);
  overflow: hidden;
  display: flex;
  min-height: 380px;
}
.mockup__lateral {
  width: 150px;
  flex-shrink: 0;
  background: var(--azul-profundo);
  padding: var(--esp-4) var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mockup__lateral-marca {
  display: flex; align-items: center; gap: 6px;
  color: var(--blanco); font-family: var(--fuente-titulos); font-weight: 700;
  font-size: 0.9375rem; margin-bottom: var(--esp-4); padding: 0 var(--esp-2);
}
.mockup__enlace {
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--esp-2);
  border-radius: var(--radio-sm);
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  font-weight: 500;
}
.mockup__enlace svg { width: 14px; height: 14px; flex-shrink: 0; }
.mockup__enlace--activo { background: rgba(255,255,255,0.12); color: var(--blanco); }

.mockup__contenido { flex: 1; padding: var(--esp-4); min-width: 0; }
.mockup__saludo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-4); }
.mockup__saludo h5 { font-family: var(--fuente-titulos); font-size: 0.9375rem; font-weight: 700; color: var(--azul-profundo); margin: 0; }
.mockup__saludo p { font-size: 0.6875rem; color: var(--gris-texto); margin-top: 2px; }
.mockup__periodo { font-size: 0.6875rem; color: var(--gris-texto); background: var(--azul-claro); padding: 3px 10px; border-radius: var(--radio-pill); }

.mockup__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--esp-4); }
.mockup__kpi { background: var(--azul-claro); border-radius: var(--radio-sm); padding: 8px; }
.mockup__kpi-icono { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.mockup__kpi-valor { font-family: var(--fuente-titulos); font-size: 0.75rem; font-weight: 700; color: var(--azul-profundo); display: block; }
.mockup__kpi-cambio { font-size: 0.625rem; font-weight: 600; }
.mockup__kpi-cambio--positivo { color: var(--verde); }
.mockup__kpi-cambio--negativa { color: var(--rosa-acento); }

.mockup__fila-inferior { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.mockup__panel { background: var(--azul-claro); border-radius: var(--radio-sm); padding: 8px; }
.mockup__panel-titulo { font-size: 0.6875rem; font-weight: 700; color: var(--azul-profundo); margin-bottom: 6px; display: block; }
.mockup__lista-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.625rem; color: var(--gris-texto); padding: 3px 0; }
.mockup__lista-item b { color: var(--azul-profundo); font-weight: 600; }

/* ---- Anotaciones flotantes sobre el hero (estilo mano alzada) ---- */
.flotante {
  position: absolute;
  background: var(--blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  z-index: 2;
}
.flotante__icono {
  width: 30px; height: 30px; border-radius: var(--radio-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.flotante strong { display: block; color: var(--azul-profundo); font-size: 0.8125rem; }
.flotante span { color: var(--gris-texto); }
.flotante--nube { top: 0; right: 6%; }
.flotante--pedidos { bottom: 22%; left: -6%; }
.flotante--inventario { top: 46%; right: -9%; }
.flotante--nota {
  bottom: -8%; right: 10%;
  background: #FFF6D9;
  transform: rotate(-3deg);
  box-shadow: var(--sombra-tarjeta);
}

.manuscrito {
  position: absolute;
  font-family: var(--fuente-manuscrita);
  color: var(--azul-fincil);
  font-size: 1.375rem;
  line-height: 1.15;
  z-index: 2;
  pointer-events: none;
}
.manuscrito--hero { top: -6%; left: 4%; text-align: right; }
.manuscrito svg { display: block; margin-top: 4px; }

@media (max-width: 900px) {
  .flotante, .manuscrito, .hero__hoja-decorativa { display: none; }
}

/* El mockup del hero no debe forzar scroll horizontal en móvil: se
   simplifica en vez de reducirse a una miniatura ilegible. */
@media (max-width: 640px) {
  .hero__visual { padding: 0; }
  .mockup__lateral { display: none; }
  .mockup__pantalla { min-height: 0; }
  .mockup__kpis { grid-template-columns: repeat(2, 1fr); }
  .mockup__fila-inferior { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   ¿Qué es Fincil? (1.3)
   --------------------------------------------------------------------- */
.que-es__cuadricula {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--esp-8);
  align-items: center;
}
.que-es__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--azul-claro); color: var(--azul-fincil);
  padding: 8px 16px; border-radius: var(--radio-pill);
  font-size: 0.8125rem; font-weight: 600; margin-bottom: var(--esp-5);
}
.que-es__callout {
  display: flex; align-items: center; gap: var(--esp-3);
  background: var(--azul-claro);
  border-radius: var(--radio-md);
  padding: var(--esp-4) var(--esp-5);
  margin-top: var(--esp-5);
  max-width: 480px;
}
.que-es__callout-icono {
  width: 40px; height: 40px; border-radius: var(--radio-sm);
  background: var(--blanco); color: var(--azul-fincil);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.que-es__callout strong { color: var(--azul-profundo); }

/* ---- Diagrama radial simplificado ---- */
.radial { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto; }
.radial__centro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34%; z-index: 2;
}
.radial__nodo {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 1;
}
.radial__nodo-icono { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radial__nodo strong { display: block; color: var(--azul-profundo); font-size: 0.8125rem; }
.radial svg.radial__lineas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

@media (max-width: 980px) {
  .que-es__cuadricula { grid-template-columns: 1fr; }
  .radial { display: none; }
}

.franja-features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-5);
  margin-top: var(--esp-9);
  padding-top: var(--esp-7);
  border-top: 1px solid var(--borde);
}
.franja-features__item { display: flex; align-items: flex-start; gap: var(--esp-3); }
.franja-features__icono {
  width: 40px; height: 40px; border-radius: var(--radio-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.franja-features__item h4 { font-size: 1rem; }
.franja-features__item p { font-size: 0.875rem; color: var(--gris-texto); margin-top: 2px; }

@media (max-width: 700px) {
  .franja-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .franja-features { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Todo está conectado (1.4)
   --------------------------------------------------------------------- */
.conectado__cabecera { max-width: 640px; margin: 0 auto var(--esp-8); text-align: center; }
.conectado__cabecera .texto-eyebrow { display: block; margin-bottom: var(--esp-3); }

.conectado__panel-info {
  background: var(--blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--esp-5);
  max-width: 260px;
  margin: 0 auto var(--esp-6);
}
.conectado__panel-info-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--azul-profundo); margin-bottom: var(--esp-3); font-size: 0.9375rem; }
.conectado__panel-info li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--gris-texto); padding: 4px 0; }
.conectado__panel-info li svg { color: var(--verde); flex-shrink: 0; }

.ciclo { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 620px; margin: 0 auto; }
.ciclo__centro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22%; aspect-ratio: 1/1; border-radius: 50%;
  background: var(--azul-profundo); color: var(--blanco);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 2; box-shadow: var(--sombra-tarjeta-hover);
}
.ciclo__centro svg { width: 26%; margin-bottom: 4px; }
.ciclo__centro span { font-family: var(--fuente-titulos); font-weight: 700; font-size: 0.9375rem; }
.ciclo__nodo {
  position: absolute; transform: translate(-50%, -50%);
  width: 118px;
  background: var(--blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: 10px;
  text-align: center;
  z-index: 1;
}
.ciclo__nodo-icono { width: 30px; height: 30px; border-radius: 8px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.ciclo__nodo strong { display: block; font-size: 0.75rem; color: var(--azul-profundo); }
.ciclo svg.ciclo__flechas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ciclo__nota {
  position: absolute; top: -6%; left: -4%;
  background: #FFF6D9; transform: rotate(-4deg);
  border-radius: var(--radio-sm); box-shadow: var(--sombra-tarjeta);
  padding: 10px 14px; font-size: 0.75rem; max-width: 150px; z-index: 3;
}

@media (max-width: 900px) {
  .ciclo { display: none; }
}
.flujo-vertical { display: none; }
@media (max-width: 900px) {
  .flujo-vertical {
    display: flex; flex-direction: column; align-items: center;
    gap: 0; max-width: 320px; margin: 0 auto;
  }
  .flujo-vertical .tarjeta { width: 100%; display: flex; align-items: center; gap: var(--esp-3); text-align: left; padding: var(--esp-4); }
  .flujo-vertical .conector { width: 2px; height: 28px; background-image: linear-gradient(to bottom, var(--azul-fincil) 50%, transparent 50%); background-size: 2px 10px; }
}

.ejemplo-real {
  margin-top: var(--esp-9);
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-tarjeta);
}
.ejemplo-real__titulo { margin-bottom: var(--esp-5); }
.ejemplo-real__pasos {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px;
}
.ejemplo-real__paso {
  flex: 1 0 150px;
  background: var(--azul-claro);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
}
.ejemplo-real__paso-numero {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--azul-fincil); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; margin-bottom: var(--esp-3);
}
.ejemplo-real__paso h5 { font-size: 0.875rem; color: var(--azul-profundo); font-weight: 700; }
.ejemplo-real__paso p { font-size: 0.75rem; color: var(--gris-texto); margin-top: 4px; }
.ejemplo-real__flecha { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; color: var(--borde-fuerte); }

@media (max-width: 700px) {
  .ejemplo-real__pasos { flex-direction: column; }
  .ejemplo-real__flecha { transform: rotate(90deg); padding: 4px 0; }
}

/* ---------------------------------------------------------------------
   Funcionalidades principales (1.5)
   --------------------------------------------------------------------- */
.funcionalidades__cabecera { max-width: 620px; margin: 0 auto var(--esp-8); text-align: center; position: relative; }
.funcionalidades__cabecera .texto-eyebrow-pill {
  display: inline-flex; background: var(--azul-claro); color: var(--azul-fincil);
  padding: 6px 16px; border-radius: var(--radio-pill); font-weight: 600;
  font-size: 0.8125rem; margin-bottom: var(--esp-4);
}
.funcionalidades__nota {
  position: absolute; top: -10px; right: 0;
  font-family: var(--fuente-manuscrita); color: var(--azul-fincil);
  font-size: 1.125rem; line-height: 1.2; text-align: left;
}
@media (max-width: 900px) { .funcionalidades__nota { display: none; } }

.grid-modulos { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--esp-5); }
@media (max-width: 1100px) { .grid-modulos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .grid-modulos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-modulos { grid-template-columns: 1fr; } }

.tarjeta-modulo { position: relative; }
.tarjeta-modulo__numero {
  position: absolute; top: var(--esp-4); right: var(--esp-4);
  font-size: 0.6875rem; font-weight: 700; color: var(--gris-texto);
  background: var(--azul-claro); border-radius: var(--radio-pill);
  padding: 2px 8px;
}

.panel-cierre {
  margin-top: var(--esp-9);
  background: var(--azul-claro);
  border-radius: var(--radio-lg);
  padding: var(--esp-7);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: var(--esp-7);
  align-items: center;
}
.panel-cierre__badge {
  display: inline-flex; background: var(--blanco); color: var(--azul-fincil);
  padding: 6px 16px; border-radius: var(--radio-pill); font-weight: 600;
  font-size: 0.8125rem; margin-bottom: var(--esp-4);
}
.panel-cierre__acciones { display: flex; gap: var(--esp-3); margin-top: var(--esp-5); flex-wrap: wrap; }

@media (max-width: 900px) {
  .panel-cierre { grid-template-columns: 1fr; }
}