/* ═══════════════════════════════════════════════════════════════════════════
   FinteChile · Sistema de diseño WEB (ftc-web)
   Híbrido Brandbook + terminal. FUENTE MAESTRA: FinteChile-Brandboard.pdf.
   Reconciliado a ftc-brand: navy #0A1733 · azul eléctrico #3F55F7 · verde #27D545.
   Roboto (display/cuerpo) + JetBrains Mono (datos/labels/terminal).
   Dos ánimos: dark (navy, hero/inmersivo) y light (#F5F7FB, dashboards).
   Este archivo es el CONTRATO compartido por landing, ROI y Mapa. No inventar marca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes ── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root{
  /* ===== Paleta oficial del Brandboard (MANDA) ===== */
  --blue-light:    #B7D8F2;   /* celeste, tintes/superficies suaves            */
  --blue-electric: #3F55F7;   /* AZUL ELÉCTRICO — acento primario              */
  --blue-dark:     #1A3FB7;   /* azul profundo                                 */

  /* ===== Superficie / estructura ===== */
  --navy:      #0A1733;       /* superficie oscura + tinta primaria            */
  --navy-deep: #050F26;       /* fondo más profundo                            */
  --navy-2:    #13234D;       /* navy elevado (cards en dark)                  */
  --white:     #FFFFFF;

  /* ===== Colores del LOGO (isotipo) — solo marca / positivo ===== */
  --cyan:      #0DC9EB;       /* triángulo cyan del isotipo                     */
  --cyan-soft: #7FDFEF;
  --green:     #27D545;       /* triángulo verde / acento POSITIVO             */
  --green-deep:#00A83B;

  /* ===== Superficies claras (ánimo light) ===== */
  --bg-light:  #F5F7FB;       /* fondo dashboards                              */
  --bg-soft:   #EEF2FA;
  --bg-tint:   #E6EDF9;
  --card:      #FFFFFF;
  --card-2:    #F8FAFE;

  /* ===== Ink sobre claro ===== */
  --ink-1: #0A1733;
  --ink-2: #46526B;
  --ink-3: #7A87A0;

  /* ===== Ink sobre oscuro ===== */
  --on-dark-1: #FFFFFF;
  --on-dark-2: #C7D2E8;
  --on-dark-3: #9AA8C6;
  --on-dark-4: #6B7A9C;

  /* ===== Líneas / bordes ===== */
  --line:        rgba(10,23,51,.10);
  --line-2:      rgba(10,23,51,.18);
  --line-dark:   rgba(255,255,255,.10);
  --line-dark-2: rgba(255,255,255,.16);

  /* ===== Gradientes (Brandbook) ===== */
  --grad-official: linear-gradient(90deg,#000000 0%,#3F55F7 100%);
  --grad-brand:    linear-gradient(90deg,#0A1733 0%,#1A3FB7 40%,#3F55F7 74%,#B7D8F2 100%);
  --grad-brand-135:linear-gradient(135deg,#0A1733 0%,#1A3FB7 38%,#3F55F7 72%,#B7D8F2 100%);
  --grad-line:     linear-gradient(90deg,#3F55F7,#B7D8F2);
  --grad-wedge:    linear-gradient(150deg,#3F55F7 0%,rgba(63,85,247,0) 62%);
  /* acento terminal (isotipo): verde→cyan, SOLO como firma/acento, no como marca principal */
  --grad-iso:      linear-gradient(115deg,#27D545 0%,#0DC9EB 100%);

  /* ===== Paleta de datos (charts) — orden estable, temado a marca ===== */
  --c1: #3F55F7;  /* azul eléctrico (serie principal)   */
  --c2: #0DC9EB;  /* cyan                               */
  --c3: #27D545;  /* verde                              */
  --c4: #1A3FB7;  /* azul profundo                      */
  --c5: #B7D8F2;  /* celeste                            */
  --c6: #8A93A6;  /* gris neutro                        */
  --c7: #7C5CFF;  /* violeta (extensión, alto contraste)*/
  --c8: #0A1733;  /* navy (tramo oscuro)                */

  /* ===== Tipografía ===== */
  --font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===== Radios ===== */
  --r-chip: 999px;
  --r-tile: 12px;
  --r-card: 16px;
  --r-panel: 22px;

  /* ===== Motion ===== */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .25s;
  --dur-2: .45s;
  --dur-3: .7s;

  /* ===== Layout ===== */
  --maxw: 1320px;
  --gutter: clamp(20px,4vw,52px);
  --nav-h: 62px;
}

/* ═══ Reset base ═══ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--navy);color:var(--on-dark-1);overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--blue-electric);color:#fff}
:focus-visible{outline:2px solid var(--blue-electric);outline-offset:3px}

/* ═══ Utilidades de color/tipo ═══ */
.mono{font-family:var(--font-mono)}
.electric{color:var(--blue-electric)}
.green{color:var(--green)}
.cyan{color:var(--cyan)}
.grad-text{background:var(--grad-line);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-iso-text{background:var(--grad-iso);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-electric);display:inline-flex;gap:9px;align-items:center;
}
.eyebrow i{font-style:normal;color:var(--on-dark-4)}

/* ═══════════════════════════════════════════════════════════════
   NAV SHELL — barra superior de 3 pestañas (Landing/ROI/Mapa)
   Idéntica en las 3 páginas. Data-attr [data-tab] marca la activa.
   ═══════════════════════════════════════════════════════════════ */
.ftc-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--nav-border);
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2);
}
.ftc-nav__brand{display:flex;align-items:center;gap:12px;min-width:0}
.ftc-nav__brand img{height:24px;width:auto}
/* tabs SIEMPRE centradas en el viewport (independiente del ancho de marca/acciones):
   así el grupo queda en la MISMA posición en las 3 páginas y no se descuadra al cambiar de tab */
.ftc-nav__tabs{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;background:var(--nav-tabs-bg);border:1px solid var(--nav-border);
  padding:4px;border-radius:var(--r-chip)}
.ftc-nav__tab{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;
  color:var(--on-dark-3);padding:8px 18px;border-radius:var(--r-chip);
  display:inline-flex;align-items:center;gap:7px;transition:var(--dur-1);white-space:nowrap;border:0;background:none;
}
.ftc-nav.on-light .ftc-nav__tab{color:var(--ink-3)}
.ftc-nav__tab i{font-style:normal;font-size:10px;opacity:.7;color:var(--green)}
.ftc-nav__tab:hover{color:var(--on-dark-1)}
.ftc-nav.on-light .ftc-nav__tab:hover{color:var(--ink-1)}
.ftc-nav__tab[aria-current="page"]{background:var(--blue-electric);color:#fff}
.ftc-nav__tab[aria-current="page"] i{color:#fff;opacity:.85}
.ftc-nav__cta{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:#fff;
  background:#16264F;border:1px solid rgba(255,255,255,.14);
  padding:9px 16px;border-radius:8px;display:inline-flex;align-items:center;gap:7px;
  transition:var(--dur-1);position:relative;overflow:hidden;
}
/* CTA: fondo navy FIJO en ambos temas (blanco sobre navy siempre legible) */
:root[data-theme="light"] .ftc-nav__cta{background:#0A1733;border-color:rgba(10,23,51,.16)}
.ftc-nav__cta::before{content:"";position:absolute;inset:0;background:var(--blue-electric);opacity:0;transition:var(--dur-1)}
.ftc-nav__cta:hover::before{opacity:1}
.ftc-nav__cta>*{position:relative;z-index:1}
.ftc-nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.ftc-nav__burger span{width:22px;height:2px;background:currentColor;transition:.3s}
@media(max-width:820px){
  .ftc-nav__cta{display:none}
  .ftc-nav__tab{padding:8px 12px;font-size:11.5px}
  .ftc-nav__tab i{display:none}
}
@media(max-width:520px){
  .ftc-nav__brand span{display:none}
}

/* ═══ Botones ═══ */
.btn{
  font-family:var(--font-mono);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding:14px 26px;border-radius:8px;display:inline-flex;align-items:center;gap:9px;
  transition:var(--dur-1) var(--ease);position:relative;overflow:hidden;border:1px solid transparent;
}
.btn span{transition:transform var(--dur-1);position:relative;z-index:2}
.btn:hover span{transform:translateX(4px)}
.btn--solid{color:#fff;background:var(--blue-electric)}
.btn--solid:hover{background:var(--blue-dark)}
.btn--ghost{border-color:var(--line-dark-2);color:var(--on-dark-1)}
.btn--ghost:hover{border-color:var(--blue-electric);background:rgba(63,85,247,.08)}
.on-light .btn--ghost,.btn--ghost.on-light{border-color:var(--line-2);color:var(--ink-1)}

/* ═══ Chips / badges ═══ */
.chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;padding:5px 11px;border-radius:var(--r-chip);
  border:1px solid var(--line-dark);color:var(--on-dark-3);display:inline-flex;gap:6px;align-items:center}
.chip.on-light{border-color:var(--line);color:var(--ink-3);background:var(--bg-soft)}

/* ═══ Fondo: rejilla de puntos + rays (motivo del Mapa PDF) ═══ */
.fx-dots{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--line-dark) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);}
.fx-rays{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* rays se dibujan con canvas/SVG en JS por página; aquí solo el contenedor */

/* ═══ Section head compartido ═══ */
.sec__head{display:flex;align-items:baseline;gap:18px;margin-bottom:36px;position:relative;padding-bottom:20px}
.sec__head::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-dark)}
.sec__head::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--grad-line);z-index:1;transition:width 1.1s var(--ease)}
.sec__head.in::before{width:100%}
.sec__num{font-family:var(--font-mono);font-size:13px;color:var(--green);font-weight:600}
.sec__title{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4.6vw,58px);letter-spacing:-.02em;line-height:1}
.on-light .sec__head::after{background:var(--line)}
.on-light .sec__title{color:var(--ink-1)}

/* ═══ Cards / KPI (ánimo light, para dashboards) ═══ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue-electric)}
.kpi.cy::before{background:var(--cyan)}.kpi.gr::before{background:var(--green)}.kpi.nv::before{background:var(--navy)}
.kpi__lab{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.kpi__val{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);font-weight:900;color:var(--ink-1);line-height:1.02;margin-top:6px}
.kpi__sub{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}

/* glass cards (ánimo dark) */
.glass{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:18px 20px}

/* ═══ Chart shells ═══ */
.chart{width:100%;height:320px}
.chart.sm{height:240px}
.chart.tall{height:400px}

/* ═══ Reveal on scroll ═══ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ═══ Footer compartido ═══ */
.ftc-foot{border-top:1px solid var(--line-dark);padding:56px var(--gutter) 30px;max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.ftc-foot__row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.ftc-foot__brand img{height:28px;margin-bottom:14px}
.ftc-foot__brand p{color:var(--on-dark-3);font-size:14px;max-width:280px}
.ftc-foot__cols{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.ftc-foot__cols>div{display:flex;flex-direction:column;gap:11px}
.ftc-foot__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;color:var(--green);margin-bottom:3px}
.ftc-foot__cols a{color:var(--on-dark-3);font-size:14px;transition:.2s}
.ftc-foot__cols a:hover{color:var(--on-dark-1)}
.ftc-foot__bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line-dark);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--on-dark-4)}
.ftc-foot__bar b{color:var(--green)}
.on-light .ftc-foot{border-top-color:var(--line)}
.on-light .ftc-foot__brand p,.on-light .ftc-foot__cols a{color:var(--ink-3)}
.on-light .ftc-foot__bar{border-top-color:var(--line);color:var(--ink-3)}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE TEMAS · dark ("luna", default) ⇄ light (más blanco)
   El toggle pone data-theme en <html>. Los tokens de superficie/tinta
   se INVIERTEN, así los componentes que usan var(--navy)/var(--on-dark-*)
   /var(--line-dark) se adaptan solos. Las marcas (eléctrico, verde, cyan)
   NO cambian. Colores de datos (charts) tienen variante por tema.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme: dark;
  /* tokens de nav (dark) */
  --nav-bg:       rgba(10,23,51,.72);
  --nav-tabs-bg:  rgba(255,255,255,.05);
  --nav-border:   rgba(255,255,255,.10);
  /* superficie semántica (para componentes nuevos) */
  --surface:      var(--navy);
  --surface-2:    var(--navy-deep);
  --surface-card: rgba(255,255,255,.05);
  --ink:          var(--on-dark-1);
  --ink-soft:     var(--on-dark-2);
  --ink-dim:      var(--on-dark-3);
  --hair:         var(--line-dark);
}
html,body{transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}

:root[data-theme="light"]{
  color-scheme: light;
  /* invertir superficies oscuras -> claras */
  --navy:      #FFFFFF;
  --navy-deep: #EEF2FA;
  --navy-2:    #FFFFFF;
  /* la "tinta sobre oscuro" pasa a ser tinta oscura sobre claro */
  --on-dark-1: #0A1733;
  --on-dark-2: #33415C;
  --on-dark-3: #55637E;
  --on-dark-4: #8A93A6;
  /* hairlines oscuras sobre claro */
  --line-dark:   rgba(10,23,51,.12);
  --line-dark-2: rgba(10,23,51,.20);
  /* nav claro */
  --nav-bg:      rgba(255,255,255,.82);
  --nav-tabs-bg: rgba(10,23,51,.04);
  --nav-border:  rgba(10,23,51,.10);
  /* superficies claras un punto más blancas que el modo dashboard previo */
  --bg-light: #FFFFFF;
  --bg-soft:  #F4F7FC;
  --bg-tint:  #EAF0FA;
  --surface-card: rgba(10,23,51,.03);
  /* charts: gris de de-énfasis un poco más oscuro para contraste sobre blanco */
  --c6: #9AA6BC;
}
/* selección legible en ambos temas */
:root[data-theme="light"] ::selection{background:var(--blue-electric);color:#fff}

/* ═══ Botón toggle de tema (va en la nav, junto al CTA) ═══ */
.ftc-theme{
  width:38px;height:38px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--nav-border);background:var(--nav-tabs-bg);
  color:var(--ink);cursor:pointer;transition:var(--dur-1);position:relative;overflow:hidden;
}
.ftc-theme:hover{border-color:var(--blue-electric);color:var(--blue-electric)}
.ftc-theme svg{width:18px;height:18px;display:block}
.ftc-theme .i-sun{display:none}
.ftc-theme .i-moon{display:block}
:root[data-theme="light"] .ftc-theme .i-sun{display:block}
:root[data-theme="light"] .ftc-theme .i-moon{display:none}

/* ═══ Accesibilidad de movimiento ═══ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.1ms!important;scroll-behavior:auto!important}
}