/* Custom base styles for land-fintezia */
:root {
  --ink: #0a0a0a;
  --ink-soft: #131414;
  --ink-line: rgba(255,255,255,0.1);
  --signal: #29d8d0;
  --signal-dim: rgba(41,216,208,0.14);
  --paper: #fafafa;
  --hero-bg-1: #032e30;
  --hero-bg-2: #0f5d5e;
  --hero-line: rgba(255,255,255,0.14);
  --accent: #0f5d5e;
  --accent-dark: #032e30;
  --accent-light: #cbfcf5;
  --accent-50: #f0fdfb;
  --accent-200: #97f8ed;
}

body {
  margin: 0;
  padding: 0;
}

.hito-btn {
  font-family: inherit;
}

/* Los degradados por página NO se definen aquí: viven en el bloque del
   design system, derivados de la paleta oficial (--green-950/--blue-950/
   --purple-950…). Antes había aquí un duplicado con la paleta genérica de
   Tailwind (#052e16, #172554, #3b0764) que, por tener más especificidad
   que el bloque de abajo, era el que realmente se pintaba. */

/* Carousel Container (MIPYME) */
.carousel-container {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(3, 46, 48, 0.2);
  height: 410px;
  position: relative;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.card-inner {
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.card-inner-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 24px;
  text-align: center;
}

/* Slide 1 - Documents */
.doc-box {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.doc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.doc-icon-cyan {
  background: #e6fdfb;
  color: #0f5d5e;
}

.doc-icon-blue {
  background: #eff6ff;
  color: #3b82f6;
}

.doc-content {
  flex: 1;
  min-width: 0;
}

.doc-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}

.doc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-progress-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.doc-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1s ease-out;
}

/* Slide 2 - Flow Prediction */
.trend-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.trend-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trend-value {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin: 2px 0 0;
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f2f2ff;
  color: #7b61ff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(123, 97, 255, 0.15);
}

.chart-container {
  margin-bottom: 10px;
}

.chart-svg {
  width: 100%;
  height: auto;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  padding: 0 4px;
  margin-top: 6px;
}

/* Slide 3 - Results and Score */
.score-ring-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.score-ring-outer {
  position: relative;
  width: 120px;
  height: 120px;
}

.score-ring-svg {
  width: 100%;
  height: 100%;
}

.score-ring-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.score-ring-status {
  font-size: 9px;
  font-weight: 800;
  color: #2da065;
  letter-spacing: 0.08em;
}

.score-ring-number {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin: 2px 0;
}

.score-ring-label {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.credit-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.credit-info {
  display: flex;
  flex-direction: column;
}

.credit-label {
  font-size: 11.5px;
  font-weight: 500;
  color: #166534;
}

.credit-value {
  font-size: 20px;
  font-weight: 700;
  color: #14532d;
  margin: 2px 0 0;
}

.credit-currency {
  font-size: 12px;
  font-weight: 500;
}

.btn-claim {
  background: #0f5d5e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #0f5d5e;
}

.btn-claim:hover {
  background: #cbfcf5;
  color: #0f5d5e;
  border-color: #cbfcf5;
}

/* Bottom Navigation & Metadata */
.card-bottom {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 16px;
}

.carousel-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.25s ease;
}

.dot.active {
  width: 20px;
  border-radius: 4px;
  background: #0f5d5e;
}

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

.meta-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.meta-desc {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* GLOBAL SITE CSS FROM ANGULAR */
:root {
    --green-950: #032e30; --green-900: #124e4f; --green-800: #0f5d5e;
    --green-700: #0d7878; --green-600: #0a9795; --green-500: #10bcb6;
    --green-400: #29d8d0; --green-300: #5bede1; --green-200: #97f8ed;
    --green-100: #cbfcf5; --green-50: #f0fdfb;

    --purple-950: #1f0b6a; --purple-700: #4f1ee3; --purple-500: #7b61ff;
    --purple-300: #b6b1ff; --purple-200: #d5d4ff; --purple-100: #e9e8ff; --purple-50: #f2f2ff;

    --blue-950: #14213d; --blue-800: #2650a7; --blue-700: #2761ce; --blue-600: #3077e0;
    --blue-500: #4593ec; --blue-400: #69b2f1; --blue-300: #99cef7; --blue-200: #c3e0fa;
    --blue-100: #ddedfc; --blue-50: #f0f7fe;

    --neutral-950: #0a0a0a; --neutral-900: #191a1a; --neutral-800: #282929;
    --neutral-700: #404545; --neutral-600: #545959; --neutral-500: #737878;
    --neutral-400: #a3a8a8; --neutral-300: #d5d7d7; --neutral-200: #e5e6e6;
    --neutral-100: #f4f5f5; --neutral-50: #fafafa;

    --success-600: #2a714b; --success-50: #f0f9f3; --success-200: #bae0c6;
    --warning-700: #9f7c01; --warning-50: #fffee7; --warning-200: #fffc89;

    --shadow-xs: 0px 4px 15px rgba(0,0,0,0.05);
    --shadow-s:  0px 4px 10px rgba(0,0,0,0.15);

    /* ---- CAPA EDITORIAL (nueva, derivada del sistema) ----
       Ink = fondo oscuro NEUTRO, reservado solo para chrome compartido
       entre las 4 páginas (CTA final, footer) — no para el Hero.
       Cada landing tendrá su propio hero con su acento de página
       (Home/MIPYME = verde, Financieros = azul, Factoring = morado),
       siguiendo la misma arquitectura #page-financieros/#page-factoring
       que ya existe en el design system. Aquí: Home = verde de marca.
       Signal = verde brillante que SÍ funciona sobre fondo oscuro
       (--green-800 se apaga demasiado sobre fondo oscuro). */
    --ink: var(--neutral-950);
    --ink-soft: #131414;
    --ink-line: rgba(255,255,255,0.1);
    --signal: var(--green-400);
    --signal-dim: rgba(41,216,208,0.14);
    --paper: var(--neutral-50);

    /* Hero de esta página — Home usa verde. MIPYME comparte el verde;
       Financieros/Factoring sobreescriben --hero-bg-1/2 y --signal
       más abajo, vía body.page-financieros / body.page-factoring. */
    --hero-bg-1: var(--green-950);
    --hero-bg-2: var(--green-800);
    --hero-line: rgba(255,255,255,0.14);

    /* Acento de página — por defecto verde (Home / MIPYME). Nav, footer
       y botón primario se mantienen siempre en verde Fintezia — no usan
       --accent. Esto sigue la arquitectura de fintezia-design-system.md */
    --accent: var(--green-800);
    --accent-dark: var(--green-950);
    --accent-light: var(--green-100);
    --accent-50: var(--green-50);
    --accent-200: var(--green-200);

    --font-display: 'Space Grotesk', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

html { scroll-behavior: smooth; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   DESIGN SYSTEM DE SUBPÁGINAS — aplica solo a mipyme.html,
   financieros.html y factoring.html (clase en <body>).
   :where() mantiene especificidad cero para no alterar la
   cascada original. El index usa utilidades Tailwind puras.
  ========================================================= */
:where(.page-mipyme, .page-financieros, .page-factoring) {

  &.page-financieros {
    --hero-bg-1: var(--blue-950); --hero-bg-2: var(--blue-700);
    --signal: var(--blue-400);
    --accent: var(--blue-800); --accent-dark: var(--blue-950);
    --accent-light: var(--blue-100); --accent-50: var(--blue-50); --accent-200: var(--blue-200);
  }
  &.page-factoring {
    --hero-bg-1: var(--purple-950); --hero-bg-2: var(--purple-700);
    --signal: var(--purple-300);
    --accent: var(--purple-700); --accent-dark: var(--purple-950);
    --accent-light: var(--purple-100); --accent-50: var(--purple-50); --accent-200: var(--purple-200);
  }

  @media (prefers-reduced-motion: reduce) {
    
  }

  /* ---- TIPOGRAFÍA ----
     Display: Space Grotesk — grotesca técnica con carácter propio en números,
     coherente con un producto que vive de scores y datos. Evita el Inter-para-todo
     que hace que cualquier fintech se vea igual.
     Body: Inter — legible, neutro, hace de piso.
     Mono: IBM Plex Mono — reservado exclusivamente para cifras y datos (scores,
     stats, moneda) para que un número siempre se sienta "medido", no decorado. */
  h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 700; color: var(--neutral-900); letter-spacing: -0.01em; }
  h1 { font-size: 64px; line-height: 1.05; }
  h2 { font-size: 44px; line-height: 1.1; }
  h3 { font-size: 32px; line-height: 1.15; }
  h5 { font-size: 20px; line-height: 1.3; }
  .body-l { font-size: 19px; line-height: 30px; font-weight: 400; }
  .body-m { font-size: 16px; line-height: 24px; font-weight: 400; }
  .body-s { font-size: 14px; line-height: 20px; font-weight: 400; }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .caption { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; }

  .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
  .section { padding: 112px 0; }
  .section-tight { padding: 64px 0; }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent);
    margin-bottom: 20px;
  }
  .eyebrow.on-ink { color: var(--signal); }
  .eyebrow::before { content:''; display:block; width:16px; height:2px; background:currentColor; }

  /* =========================================================
     BOTONES — Design System oficial (Filled / Outlined, L/M/S,
     con estados Active, Hover, Disabled y Loading)
  ========================================================= */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; border-radius: 10px; cursor: pointer;
    transition: all 0.2s ease; border: 1.5px solid transparent; text-decoration: none;
    white-space: nowrap;
  }
  .btn-l { padding: 12px 24px; font-size: 18px; line-height: 28px; border-radius: 12px; }
  .btn-m { padding: 8px 16px;  font-size: 16px; line-height: 24px; border-radius: 10px; }
  .btn-s { padding: 6px 12px;  font-size: 14px; line-height: 20px; border-radius: 8px; }

  .btn-filled { background: var(--accent); color: #fff; border-color: var(--accent); }
  .btn-filled:hover { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
  .btn-filled:disabled { background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed; border-color: var(--neutral-100); }
  .btn-filled.is-loading { background: var(--accent-light); color: var(--accent); pointer-events: none; }

  /* Variante primaria para hero oscuros */
  .btn-filled.on-ink { background: #fff; color: var(--accent); border-color: #fff; }
  .btn-filled.on-ink:hover { background: var(--accent-50); color: var(--accent-dark); border-color: var(--accent-50); }

  .btn-outlined { background: #fff; border-color: var(--accent); color: var(--accent); }
  .btn-outlined:hover { background: var(--accent-50); }
  .btn-outlined:disabled { border-color: var(--neutral-200); color: var(--neutral-400); cursor: not-allowed; background: transparent; }
  .btn-outlined.is-loading { background: var(--accent-50); pointer-events: none; }

  /* Variante para usarse sobre fondo --ink (hero, CTA oscuro, footer) */
  .btn-outlined.on-ink { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
  .btn-outlined.on-ink:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }

  .btn i.fa-spinner { font-size: 0.9em; }
  .btn-label-hidden { display: none; }

  /* =========================================================
     INPUTS — Design System oficial
  ========================================================= */
  .input-wrap { display: flex; flex-direction: column; gap: 6px; }
  .input-label { font-size: 14px; font-weight: 600; color: var(--neutral-900); }
  .input-field {
    border: 1.5px solid var(--neutral-300); border-radius: 10px;
    padding: 10px 14px; font-size: 14px; line-height: 20px; width: 100%;
    background: #fff; color: var(--neutral-900); transition: all 0.2s; outline: none;
    font-family: var(--font-body);
  }
  .input-field:focus { border-color: var(--purple-500); box-shadow: 0 0 0 2px rgba(123,97,255,0.20); }

  /* Slider (extensión coherente del input, thumb en verde señal) */
  .range-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
    border-radius: 999px; background: var(--ink-line); outline: none; cursor: pointer;
  }
  .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--signal); border: 3px solid var(--ink);
    box-shadow: 0 0 0 1px var(--signal); cursor: pointer;
  }
  .range-slider::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; background: var(--signal);
    border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--signal); cursor: pointer;
  }

  /* =========================================================
     NAV
  ========================================================= */
  .nav {
    position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--neutral-200);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .nav-logo svg { height: 26px; width: auto; }
  .nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
  .nav-links a { font-size: 15px; font-weight: 500; color: var(--neutral-700); text-decoration: none; transition: color 0.2s; }
  .nav-links a:hover { color: var(--green-800); }
  .nav-actions { display: flex; gap: 12px; align-items: center; }

  /* =========================================================
     HERO — fondo ink, headline editorial, gauge como firma visual
  ========================================================= */
  .hero {
    background: linear-gradient(155deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
    color: #fff; padding: 88px 0 0; overflow: hidden;
    position: relative;
  }
  .hero-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
    padding-bottom: 72px;
  }
  .hero h1 { color: #fff; margin: 20px 0 24px; max-width: 560px; }
  .hero .body-l { color: rgba(255,255,255,0.68); max-width: 480px; margin-bottom: 36px; }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

  .hero-trust {
    display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.5);
  }
  .hero-trust i { color: var(--signal); }

  /* ---- MARQUEE de aliados ---- */
  .marquee-wrap {
    border-top: 1px solid var(--hero-line); padding: 22px 0; overflow: hidden;
    position: relative;
  }
  .marquee-label {
    position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
    background: var(--hero-bg-1); padding-right: 24px; font-family: var(--font-mono);
    font-size: 11.5px; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; z-index: 2;
  }
  .marquee-track {
    display: flex; gap: 64px; white-space: nowrap; animation: marquee 26s linear infinite;
    padding-left: 220px;
  }
  .marquee-track span { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: rgba(255,255,255,0.35); }

  /* ---- GAUGE CARD (firma visual del hero) ---- */
  .gauge-card {
    background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(3,46,48,0.28);
    padding: 32px 32px 28px; position: relative;
  }
  .gauge-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .gauge-card-co { display: flex; align-items: center; gap: 10px; }
  .gauge-card-co-icon {
    width: 34px; height: 34px; border-radius: 9px; background: var(--accent-50);
    display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 14px;
  }
  .gauge-card-co-name { font-size: 13.5px; font-weight: 600; color: var(--neutral-900); }
  .gauge-card-co-sub { font-size: 11.5px; color: var(--neutral-500); }
  .gauge-ai-tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    background: var(--purple-50); color: var(--purple-700); font-size: 11px; font-weight: 700;
  }
  .gauge-svg-wrap { display: flex; justify-content: center; margin: 8px 0 4px; }
  .gauge-number { font-family: var(--font-mono); font-weight: 600; }
  .gauge-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }

  .gauge-slider-block { border-top: 1px solid var(--neutral-200); margin-top: 18px; padding-top: 20px; }
  .gauge-slider-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--neutral-600); margin-bottom: 10px; }
  .gauge-slider-value { font-family: var(--font-mono); color: var(--neutral-900); font-weight: 600; }
  .gauge-disclaimer { font-size: 11px; color: var(--neutral-400); margin-top: 12px; }

  .range-slider { background: var(--neutral-200); }
  .range-slider::-webkit-slider-thumb { border-color: #fff; box-shadow: 0 0 0 1px var(--accent), var(--shadow-s); }
  .range-slider::-moz-range-thumb { border-color: #fff; box-shadow: 0 0 0 1px var(--accent), var(--shadow-s); }

  .gauge-chip {
    position: absolute; background: #fff; border: 1px solid var(--neutral-200);
    border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-s);
    display: flex; align-items: center; gap: 10px;
  }
  .gauge-chip-liq { top: -18px; right: -22px; }
  .gauge-chip-banks { bottom: -20px; left: -24px; }
  .gauge-chip i { color: var(--accent); font-size: 14px; }
  .gauge-chip-t { font-size: 10.5px; color: var(--neutral-500); }
  .gauge-chip-v { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--neutral-900); }

  @media (max-width: 900px) {
    .gauge-chip-liq, .gauge-chip-banks { display: none; }
  }

  /* =========================================================
     SELECTOR DE ROL — editorial, sin cards con sombra pesada
  ========================================================= */
  .role-section { background: var(--paper); }
  .role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--neutral-200); }
  .role-item {
    padding: 36px 32px; border-right: 1px solid var(--neutral-200); border-bottom: 1px solid var(--neutral-200);
    text-decoration: none; color: inherit; display: block; transition: background 0.2s;
  }
  .role-item:last-child { border-right: none; }
  .role-item:hover { background: #fff; }
  .role-item-tag { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
  .role-item-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--neutral-900); margin: 14px 0 10px; line-height: 1.25; }
  .role-item-desc { font-size: 14.5px; color: var(--neutral-600); line-height: 21px; margin-bottom: 18px; }
  .role-item-arrow { font-size: 13px; font-weight: 600; color: var(--neutral-900); display: inline-flex; align-items: center; gap: 8px; }
  .role-item:hover .role-item-arrow { color: var(--accent); }
  .role-item-arrow i { transition: transform 0.2s; }
  .role-item:hover .role-item-arrow i { transform: translateX(3px); }

  @media (max-width: 900px) {
    .role-grid { grid-template-columns: 1fr; }
    .role-item { border-right: none; }
  }

  /* =========================================================
     STATS — fila editorial de datos, no cards
  ========================================================= */
  .stats-row {
    display: grid; grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--neutral-200); border-bottom: 1px solid var(--neutral-200);
  }
  .stat-col { padding: 40px 32px; border-right: 1px solid var(--neutral-200); }
  .stat-col:last-child { border-right: none; }
  .stat-number { font-family: var(--font-mono); font-size: 40px; font-weight: 600; color: var(--neutral-900); line-height: 1; }
  .stat-label { font-size: 13.5px; color: var(--neutral-600); margin-top: 10px; line-height: 19px; }
  @media (max-width: 900px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .stat-col:nth-child(2) { border-right: none; }
  }

  /* =========================================================
     ECOSISTEMA
  ========================================================= */
  .eco-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 56px; }
  .eco-item { border-top: 3px solid var(--accent); padding-top: 24px; }
  .eco-item.blue { border-top-color: var(--blue-800); }
  .eco-item.purple { border-top-color: var(--purple-700); }
  .eco-item-icon {
    width: 42px; height: 42px; border-radius: 11px; background: var(--accent-50);
    display: flex; align-items: center; justify-content: center; color: var(--accent);
    font-size: 17px; margin-bottom: 20px;
  }
  .eco-item.blue .eco-item-icon { background: var(--blue-50); color: var(--blue-800); }
  .eco-item.purple .eco-item-icon { background: var(--purple-50); color: var(--purple-700); }
  .eco-item h3 { font-size: 24px; margin-bottom: 12px; }
  .eco-item p { font-size: 15px; color: var(--neutral-600); line-height: 22px; margin-bottom: 20px; }
  .eco-item a { font-size: 14px; font-weight: 600; color: var(--neutral-900); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .eco-item a:hover { color: var(--green-800); }

  /* =========================================================
     CTA BANNER
  ========================================================= */
  .cta-banner {
    background: var(--ink); border-radius: 24px; padding: 72px 56px; text-align: center; color: #fff;
    position: relative; overflow: hidden;
  }
  .cta-banner h2 { color: #fff; }
  .cta-banner p { color: rgba(255,255,255,0.62); margin: 18px auto 36px; font-size: 18px; max-width: 460px; }
  .cta-banner-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* =========================================================
     FOOTER
  ========================================================= */
  .footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 64px 0 28px; }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
  .footer-brand p { font-size: 14px; line-height: 22px; margin: 12px 0 20px; }
  .footer-col h6 { color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.07em; }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 14px; transition: color 0.2s; }
  .footer-links a:hover { color: var(--signal); }
  .footer-bottom { border-top: 1px solid var(--ink-line); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 12px; }

  @media (max-width: 900px) {
    h1 { font-size: 42px; } h2 { font-size: 32px; }
    .hero-grid { grid-template-columns: 1fr; }
    .eco-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cta-banner { padding: 48px 28px; }
  }
  /* =========================================================
     COMPONENTES COMPARTIDOS — MIPYME / Financieros / Factoring
  ========================================================= */

  /* Hero interior (sub-páginas) */
  .hero-inner { background: linear-gradient(155deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%); color: #fff; padding: 128px 0 64px; }
  .hero-inner h1 { color: #fff; }
  .hero-inner .body-l { color: rgba(255,255,255,0.72); }

  /* Dolores (pains) — lista editorial, sin cards con sombra */
  .pain-list { display: flex; flex-direction: column; }
  .pain-item { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding-bottom: 26px; }
  .pain-item:last-child { padding-bottom: 0; }
  .pain-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .pain-quote { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--neutral-900); margin-bottom: 6px; }
  .pain-answer { font-size: 14px; color: var(--neutral-600); line-height: 20px; }

  /* Pasos numerados */
  .steps-list { display: flex; flex-direction: column; }
  .step-row { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding-bottom: 26px; }
  .step-num-wrap { display: flex; flex-direction: column; align-items: center; }
  .step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .step-line { width: 2px; flex: 1; background: var(--accent-200); margin: 6px 0; min-height: 20px; }
  .step-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--neutral-900); margin-bottom: 6px; }
  .step-desc { font-size: 14px; color: var(--neutral-600); line-height: 20px; }

  /* Planes / pricing */
  .plans-row { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 24px; align-items: start; justify-content: center; }
  .plan-card { border: 1.5px solid var(--neutral-200); border-radius: 16px; padding: 32px; background: #fff; }
  .plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .plan-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
  .plan-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--neutral-900); }
  .plan-price { font-family: var(--font-mono); font-size: 38px; font-weight: 600; color: var(--neutral-900); margin: 12px 0 2px; }
  .plan-period { font-size: 13px; color: var(--neutral-500); }
  .plan-desc { font-size: 14px; color: var(--neutral-600); margin: 16px 0; line-height: 20px; }
  .plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
  .plan-features li { display: flex; gap: 10px; font-size: 13.5px; color: var(--neutral-700); align-items: flex-start; }
  .plan-features li i { color: var(--accent); margin-top: 3px; flex-shrink: 0; font-size: 12px; }

  /* Modos (Financieros) */
  .modes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .mode-card { border: 1.5px solid var(--neutral-200); border-radius: 16px; padding: 32px; background: #fff; }
  .mode-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
  .mode-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .mode-label { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
  .mode-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
  .mode-step { display: flex; gap: 14px; margin-bottom: 16px; }
  .mode-step:last-child { margin-bottom: 0; }
  .mode-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .mode-step-title { font-size: 13.5px; font-weight: 600; color: var(--neutral-900); margin-bottom: 4px; }
  .mode-step-desc { font-size: 13px; color: var(--neutral-600); line-height: 19px; }

  /* Tabla comparativa */
  .compare-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; overflow: hidden; }
  .compare-table th, .compare-table td { padding: 16px 20px; text-align: left; font-size: 13.5px; }
  .compare-table th { font-family: var(--font-display); font-weight: 600; color: var(--neutral-900); background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200); }
  .compare-table th.col-accent { color: var(--accent); }
  .compare-table td { color: var(--neutral-700); border-bottom: 1px solid var(--neutral-100); }
  .compare-table tr:last-child td { border-bottom: none; }
  .compare-table td.col-accent { color: var(--accent); font-weight: 600; font-family: var(--font-mono); }

  /* Contacto */
  .contact-row { display: flex; gap: 18px; flex-wrap: wrap; }
  .contact-item { flex: 1; min-width: 220px; display: flex; gap: 14px; align-items: center; border: 1.5px solid var(--neutral-200); border-radius: 14px; padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color 0.2s; }
  .contact-item > div:last-child { min-width: 0; }
  .contact-item:hover { border-color: var(--accent); }
  .contact-item-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .contact-item-label { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
  .contact-item-val { font-weight: 600; color: var(--neutral-900); font-size: 13.5px; word-break: break-word; line-height: 1.2; }

  /* Diagrama de ecosistema — flat, moderno, sin ilustraciones dibujadas a mano */
  .flow-diagram { display: flex; align-items: center; justify-content: center; gap: 0; padding: 24px 0 8px; flex-wrap: wrap; }
  .flow-node { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 148px; cursor: default; transition: transform 0.3s ease; }
  .flow-node:hover { transform: translateY(-4px); }
  .flow-node-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2px solid var(--neutral-200); background: #fff; color: var(--neutral-700); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .flow-node:hover .flow-node-icon { box-shadow: 0 12px 24px rgba(0,0,0,0.08); transform: scale(1.05); }
  .flow-node-icon.emisor { color: var(--green-800); border-color: var(--green-300); }
  .flow-node:hover .flow-node-icon.emisor { background: var(--green-50); border-color: var(--green-400); }
  .flow-node-icon.pagador { color: var(--purple-700); border-color: var(--purple-300); }
  .flow-node:hover .flow-node-icon.pagador { background: var(--purple-50); border-color: var(--purple-400); }
  .flow-node-icon.center { background: var(--purple-700); color: #fff; border-color: var(--purple-700); width: 80px; height: 80px; font-size: 26px; }
  .flow-node:hover .flow-node-icon.center { background: var(--purple-500); border-color: var(--purple-500); box-shadow: 0 12px 28px rgba(123, 97, 255, 0.4); transform: scale(1.08); }
  .flow-node-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--neutral-900); }
  .flow-node-desc { font-size: 12px; color: var(--neutral-600); text-align: center; line-height: 16px; }
  .flow-link { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; min-width: 84px; }
  .flow-link-arrow { color: var(--neutral-300); font-size: 18px; }
  .flow-link-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
  .flow-link-tag.out { background: var(--purple-50); color: var(--purple-700); }
  .flow-link-tag.back { background: var(--success-50); color: var(--success-600); }

  /* Roles de factoring */
  .roles-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
  .role-card2 { border-top: 3px solid var(--neutral-300); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
  .role-card2.emisor { border-top-color: var(--green-400); }
  .role-card2.pagador { border-top-color: var(--purple-300); }
  .role-card2.factor { border-top-color: #c60f0f; }
  .role-tag2 { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; width: fit-content; }
  .role-tag2.emisor { background: var(--green-50); color: var(--green-800); }
  .role-tag2.pagador { background: var(--purple-50); color: var(--purple-700); }
  .role-tag2.factor { background: #fff1f1; color: #c60f0f; }
  .role-title2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--neutral-900); min-height: 54px; display: flex; align-items: flex-start; }
  .role-desc2 { font-size: 13.5px; color: var(--neutral-600); line-height: 20px; }
  .role-benefits2 { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .role-benefits2 li { display: flex; gap: 8px; font-size: 13px; color: var(--neutral-700); align-items: flex-start; }
  .role-benefits2 li i { color: var(--success-600); margin-top: 3px; flex-shrink: 0; font-size: 11px; }
  .role-note2 { font-size: 11.5px; color: var(--neutral-500); margin-top: 6px; }

  /* Flujo de operación (Factoring) */
  .flow-step2 { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 22px; margin: 4px 0; border: 1.5px solid transparent; border-radius: 14px; transition: all 0.2s ease; }
  .flow-step2:hover { background: var(--accent-50); border-color: var(--accent-200); }
  .flow-step2 .step-num { border: 2px solid var(--accent); background: #fff; color: var(--accent); transition: all 0.2s ease; }
  .flow-step2:hover .step-num { background: var(--accent); color: #fff; }
  .flow-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1.5px solid; }
  .flow-chip-approve { color: var(--success-600); border-color: var(--success-200); background: var(--success-50); }
  .flow-chip-alert { color: var(--warning-700); border-color: var(--warning-200); background: var(--warning-50); }

  /* FAQ */
  .faq-list { display: flex; flex-direction: column; }
  .faq-item { border-bottom: 1px solid var(--neutral-200); padding: 20px 0; cursor: pointer; }
  .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--neutral-900); }
  .faq-q i { color: var(--accent); transition: transform 0.2s; flex-shrink: 0; }
  .faq-a { font-size: 14px; color: var(--neutral-600); line-height: 21px; max-height: 0; overflow: hidden; transition: max-height 0.3s; }
  .faq-item.open .faq-a { max-height: 220px; padding-top: 12px; }
  .faq-item.open .faq-q i { transform: rotate(180deg); }

  /* Tarjeta de diagnóstico (MIPYME) */
  .diag-card { background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(3,46,48,0.2); padding: 30px; }
  .diag-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
  .diag-score { font-family: var(--font-mono); font-size: 40px; font-weight: 600; color: var(--neutral-900); line-height: 1; }
  .diag-row { margin-bottom: 16px; }
  .diag-row:last-child { margin-bottom: 0; }
  .diag-row-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
  .diag-label { font-size: 13px; color: var(--neutral-600); }
  .diag-value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--neutral-900); }
  .diag-bar-track { height: 7px; border-radius: 999px; background: var(--neutral-100); overflow: hidden; }
  .diag-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); width: 0%; transition: width 1s cubic-bezier(0.22,1,0.36,1); }

  /* Tarjeta de filtro/resultados (Financieros) */
  .filter-card { background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(20,33,61,0.2); padding: 30px; }
  .filter-row-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--neutral-600); margin-bottom: 10px; }
  .filter-result { text-align: center; padding-top: 22px; border-top: 1px solid var(--neutral-200); margin-top: 22px; }
  .filter-result-num { font-family: var(--font-mono); font-size: 44px; font-weight: 600; color: var(--accent); }
  .filter-result-label { font-size: 13px; color: var(--neutral-600); margin-top: 4px; }
  .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
  .filter-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--accent-50); color: var(--accent); }

  @media (max-width: 900px) {
    .plans-row, .modes-row, .roles-row { grid-template-columns: 1fr; }
    .flow-diagram { flex-direction: column; padding-bottom: 24px; }
    .flow-link { flex-direction: column; gap: 8px; padding: 16px 0; }
    .flow-link-arrow { transform: rotate(90deg); margin: 4px 0; }
  }
}

/* =========================================================
   NAVBAR DEL SITIO — compartida por las 4 páginas, por eso va
   fuera del bloque de subpáginas. En CSS plano: tailwind.css
   está precompilado y solo contiene las utilidades que ya
   estaban en el HTML, así que utilidades nuevas no existirían.
   Bajo 900px la barra colapsa en un panel desplegable; sobre
   900px es la fila horizontal de siempre.
  ========================================================= */
.site-nav { --nav-h: 104px; }

.site-nav-logo { display: block; color: #fff; }

.site-nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
  font-size: 15px;
}
.site-nav-menu a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.site-nav-menu a:hover,
.site-nav-menu a[aria-current="page"] { color: #fff; }

/* Hamburguesa: oculta en desktop, se convierte en X al abrir. */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.site-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* "Iniciar sesión" se duplica dentro del panel móvil, donde el
   botón de la barra ya no cabe. */
.site-nav-mobile-only { display: none; }

@media (max-width: 900px) {
  /* Barra mas baja: 104px es altura de escritorio y en un movil se come
     un octavo de la pantalla antes de que empiece el contenido.
     `.site-nav > div` (0,1,1) gana al h-[104px] del HTML (0,1,0). */
  .site-nav { --nav-h: 72px; }
  .site-nav > div { height: var(--nav-h); }

  .site-nav .site-nav-toggle { display: flex; }

  /* Dos clases a proposito. El CDN de Tailwind se inyecta DESPUES de esta
     hoja, asi que su `.inline-flex` (0,1,0) empataba con `.site-nav-login`
     y ganaba por orden: el boton no se ocultaba, empujaba la hamburguesa
     fuera de la pantalla y el menu quedaba inalcanzable en movil.
     "Iniciar sesion" ya vive dentro del panel desplegable. */
  .site-nav .site-nav-login { display: none; }

  .site-nav-menu {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    font-size: 17px;
    background: var(--hero-bg-1, #032e30);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  }
  .site-nav-menu.is-open { display: flex; }
  .site-nav-menu li { width: 100%; }
  .site-nav-menu a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-nav-menu li:last-child a { border-bottom: 0; }

  .site-nav-mobile-only { display: block; }
  .site-nav-mobile-only a { color: #fff; font-weight: 600; }
}

@media (max-width: 900px) {
  /* Una sola linea, alineado con la hamburguesa. Sin esto "Comenzar"
     rompia en dos y las alturas de la fila no cuadraban. */
  .site-nav .site-nav-cta {
    white-space: nowrap;
    height: 42px;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .site-nav .site-nav-cta { padding-left: 14px; padding-right: 14px; }
}

/* =========================================================
   PIE DEL SITIO — compartido por las 4 páginas.
   En móvil el grid de Tailwind caía a una sola columna con
   gap-10, lo que estiraba el pie a una tira larguísima de
   scroll. Aquí los tres grupos de enlaces pasan a dos
   columnas y la marca ocupa el ancho completo.
  ========================================================= */
@media (max-width: 767px) {
  .site-footer { padding-top: 44px; padding-bottom: 36px; }

  .site-footer .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding-bottom: 30px;
  }
  .site-footer .site-footer-brand { grid-column: 1 / -1; }
  .site-footer .site-footer-brand p { margin-top: 14px; }

  .site-footer .site-footer-bottom {
    padding-top: 24px;
    gap: 18px;
    text-align: center;
  }
  .site-footer .site-footer-social { gap: 22px; }
  /* Área táctil cómoda para los iconos sociales. */
  .site-footer .site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* UX/UI Improvements: Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* UX/UI Improvements: Navbar Glassmorphism */
.navbar-glass {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.8) !important;
  color: #0f172a !important; /* text-slate-900 */
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

.navbar-glass .site-nav-logo img {
  filter: none !important;
}

.navbar-glass .site-nav-login {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}
.navbar-glass .site-nav-login:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.navbar-glass .site-nav-cta {
  background-color: #0f5d5e !important;
  color: white !important;
  border-color: #0f5d5e !important;
}
.navbar-glass .site-nav-cta:hover {
  background-color: #0b4546 !important;
}

/* UX/UI Improvements: Modal Animation */
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-animate-in {
  animation: modalEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Fix for navbar menu text color on scroll */
.navbar-glass .site-nav-menu li a {
  color: #0f172a !important;
}
.navbar-glass .site-nav-menu li a:hover {
  color: #0f5d5e !important;
}
.navbar-glass .site-nav-menu a[aria-current="page"] {
  color: #0f5d5e !important;
  font-weight: 600 !important;
}
.navbar-glass .site-nav-toggle span {
  background-color: #0f172a !important;
}

/* CTA con el rotulo "Proximamente": el texto mas la pildora supera el ancho
   de un movil, y .btn lleva white-space:nowrap, asi que el boton se salia de
   la pantalla y creaba scroll horizontal. En estrecho se permite partir. */
/* Partir en cualquier ancho, no solo en movil. El rotulo cabe en
   una linea cuando hay sitio, asi que en escritorio no cambia nada;
   lo que se evita es el ancho minimo enorme que imponia `nowrap`.
   Con la regla limitada a 640px, la fila de tres roles de
   factoring.html desbordaba 113px a 901px de ancho. */
.btn.con-rotulo {
  white-space: normal;
  text-align: center;
  /* La etiqueta y el rotulo son dos items flex. Con `wrap`, el
     rotulo baja solo a una segunda linea cuando no cabe al lado,
     en vez de estrujar el texto en cuatro lineas de dos palabras.
     Donde hay sitio se sigue viendo todo en una linea. */
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .btn.con-rotulo {
    line-height: 1.35;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* =========================================================
   PANEL MÓVIL DEL MENÚ — legibilidad y jerarquía.

   La barra tiene dos estados: transparente sobre el hero y
   clara al hacer scroll (`.navbar-glass`, que en index.html
   está puesto en el HTML y por tanto nunca se apaga). En el
   estado claro los enlaces se pintan de #0f172a !important,
   pero el panel desplegable seguía usando el verde del hero:
   texto casi negro sobre verde casi negro, ilegible — y en la
   portada, ilegible siempre. El panel ahora sigue el estado
   de la barra en vez de ignorarlo.
  ========================================================= */
@media (max-width: 900px) {
  .site-nav-menu {
    /* 16px de padding + 4px del enlace = 20px, la misma sangría
       que el logo de la barra. Antes iban desalineados. */
    padding: 6px 16px 16px;
    font-size: 16px;
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav-menu a {
    padding: 13px 4px;
    font-weight: 500;
  }

  /* Página actual: barra de acento en lugar de solo un tono
     de color, que sobre el panel claro casi no se distinguía. */
  .site-nav-menu a[aria-current="page"] {
    position: relative;
    padding-left: 14px;
    font-weight: 600;
  }
  .site-nav-menu a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: currentColor;
  }

  /* Barra clara -> panel claro. */
  .navbar-glass .site-nav-menu {
    background: #ffffff;
    border-top-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  }
  .navbar-glass .site-nav-menu a {
    border-bottom-color: rgba(15, 23, 42, 0.08);
  }
  .navbar-glass .site-nav-menu li a:hover {
    background: #f0fdfb;
  }

  /* "Iniciar sesión" es una acción, no un enlace más de la
     lista. Se separa y se lee como botón en ambos estados.
     Especificidad 0,3,2 para ganarle a `li:last-child a`, que
     si no le borra el borde inferior. */
  .site-nav-menu li.site-nav-mobile-only {
    margin-top: 12px;
  }
  .site-nav-menu li.site-nav-mobile-only a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
  }
  .navbar-glass .site-nav-menu li.site-nav-mobile-only a {
    border-color: #0f5d5e;
    background: #0f5d5e;
    color: #ffffff !important;
  }
}

/* =========================================================
   DESBORDE HORIZONTAL EN MÓVIL.

   Con la página más ancha que la pantalla, la barra fija se
   estiraba a 404px sobre un viewport de 375 y al desplazar de
   lado se despegaba del borde: el header se veía torcido sin
   que el header tuviera la culpa. Tres focos, los tres son el
   mismo error de fondo — un hijo de rejilla o una celda cuyo
   ancho mínimo no cabe y estira a su contenedor.
  ========================================================= */

/* 1) factoring.html — .pagador-grid colapsa a una columna,
   pero los items de grid llevan `min-width: auto`, así que la
   pista crecía hasta el ancho mínimo del contenido (364px)
   dentro de un contenedor de 327px. */
@media (max-width: 768px) {
  .pagador-grid > * { min-width: 0; }
}

@media (max-width: 640px) {
  /* 2) financieros.html — la fila de cifras. "+1,200" en mono
     de 40px más 32px de padding a cada lado daba un mínimo de
     209px, así que `1fr 1fr` se resolvía como `209px 150px`.
     Cifra y padding más chicos: vuelve a repartirse mitad y
     mitad. */
  .stats-row > .stat-col { min-width: 0; padding: 28px 16px; }
  .stat-number { font-size: 28px; }
  .stat-label { font-size: 12.5px; line-height: 17px; }

  /* 3) financieros.html — la tabla comparativa. Con ancho
     automático las tres columnas pedían 380px. `fixed` las
     reparte sobre el ancho disponible y deja que el texto
     baje de línea, que en una comparativa es mejor que un
     scroll lateral: las tres columnas siguen viéndose juntas. */
  .compare-table {
    table-layout: fixed;
    width: 100%;
  }
  .compare-table th,
  .compare-table td {
    padding: 10px 7px;
    font-size: 12px;
    /* `break-word` parte solo si la palabra no cabe ni sola en su
       linea. Con `anywhere` cortaba "prospeccion" por la mitad. */
    overflow-wrap: break-word;
  }
}

/* =========================================================
   BARRA CLARA: LOGO Y CTA QUE SE VOLVÍAN INVISIBLES.

   financieros.html enciende `.navbar-glass` al pasar de 50px
   de scroll, pero su nav usa el logo blanco y un CTA
   `.btn-filled.on-ink`, que es un botón blanco pensado para
   fondos oscuros. Sobre la barra clara quedaban blanco sobre
   blanco: ni el logo ni "Comenzar" se veían.

   Francisco ya había cubierto index.html, pero ahí el CTA
   lleva `.site-nav-cta` y el logo es el a color, así que sus
   reglas no alcanzaban a esta página.
  ========================================================= */

/* El selector de atributo cambia solo el logo blanco: index y
   registro-emisor ya traen el logo a color y no se tocan. El
   archivo oscuro pesa 4.5 KB, frente a los 448 KB del a color. */
.navbar-glass .site-nav-logo img[src$="logo-fintezia-white.svg"] {
  content: url("assets/vectors/logo-fintezia-oscuro.svg");
}

.navbar-glass .btn.btn-filled.on-ink {
  background: #0f5d5e;
  border-color: #0f5d5e;
  color: #ffffff;
}
.navbar-glass .btn.btn-filled.on-ink:hover {
  background: #0d4f50;
  border-color: #0d4f50;
  color: #ffffff;
}

/* =========================================================
   ÚLTIMOS DESBORDES EN PANTALLAS MUY ESTRECHAS (factoring).
  ========================================================= */

/* El mock "Dashboard de Pagador" trae `repeat(3,1fr)` en el
   atributo style. A 320-360px las tres cifras en mono no caben
   y estiraban la tarjeta. Dos columnas y cifra más chica. */
@media (max-width: 420px) {
  .pagador-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pagador-stats > div { padding: 11px !important; }
  .pagador-stats > div > div:first-child { font-size: 16px !important; }
}

/* A 320px el logo de 132px no deja sitio para "Comenzar" y la
   hamburguesa. Se reduce la marca, no los controles. */
@media (max-width: 360px) {
  .site-nav-logo img { height: 26px; }
  .site-nav .site-nav-cta,
  .site-nav .btn.btn-filled.on-ink {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
}


/* `repeat(3,1fr)` es `minmax(auto,1fr)`: cada pista crece hasta
   el ancho mínimo de su contenido, así que las tres tarjetas de
   rol salían desiguales (234/245/221 px a 886). Con el mínimo a
   cero se reparten exacto. */
.roles-row > .role-card2 { min-width: 0; }