:root {
    --ovb-blue:      #003366;
    --ovb-blue-dark: #002244;
    --ovb-hot-pink:  #FF3399;
    --ovb-berry:     #CC0066;
    --ovb-teal:      #009999;
    --ovb-growth:    #2E9F6E;
    --ovb-growth-dark:#0F6B44;
    --ink:           #0a0a0b;
    --ink-soft:      rgba(10,10,11,0.62);
    --ink-faint:     rgba(10,10,11,0.38);
    --bg:            #F7F6F1;
    --surface:       #ffffff;
    --light-grey:    #EEEDE7;
    --border:        rgba(10,10,11,0.08);
    --border-strong: rgba(10,10,11,0.14);
  }
  * { box-sizing: border-box; }
  html, body, #root { height:100%; }
  html, body { margin:0; padding:0; overflow:hidden; background:var(--bg);
    font-family:"Segoe UI Historic","Segoe UI","Inter",system-ui,sans-serif;
    color:var(--ovb-blue); font-variant-numeric:tabular-nums; letter-spacing:-0.005em; }
  h1,h2,h3 { letter-spacing:-0.015em; }
  a { color:inherit; text-decoration:none; }
  button { font-family:inherit; cursor:pointer; }

  /* Top-level tabs */
  .top-tabs {
    position:sticky; top:0; z-index:30;
    background:linear-gradient(180deg, rgba(247,246,241,0.95) 0%, rgba(247,246,241,0.85) 100%);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    padding:14px 28px 0;
    display:flex; align-items:flex-end; gap:4px;
  }
  .top-tabs .tab {
    position:relative; padding:12px 22px;
    font-size:13px; font-weight:800; letter-spacing:0.02em;
    color:var(--ink-soft); background:transparent; border:0;
    border-top-left-radius:12px; border-top-right-radius:12px;
    cursor:pointer; transition:.18s;
  }
  .top-tabs .tab:hover { color:var(--ovb-blue); background:rgba(0,51,102,0.04); }
  .top-tabs .tab.active {
    background:var(--surface);
    color:var(--ovb-blue);
    border:1px solid var(--border);
    border-bottom-color:transparent;
    margin-bottom:-1px;
  }
  .top-tabs .tab.active::after {
    content:""; position:absolute; left:14px; right:14px; top:0; height:3px;
    background:linear-gradient(90deg, var(--ovb-hot-pink), var(--ovb-berry));
    border-radius:0 0 3px 3px;
  }
  .top-tabs .right { margin-left:auto; padding:8px 0 12px; font-size:11px; color:var(--ink-soft); letter-spacing:0.04em; }
  .top-tabs .euribor-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px; border-radius:999px;
    background:var(--surface); border:1px solid var(--border);
    font-size:11px; font-weight:800; color:var(--ovb-blue); letter-spacing:0.04em;
  }
  .top-tabs .euribor-badge .val { color:var(--ovb-berry); font-size:12px; }
  .top-tabs .euribor-badge button { background:transparent; border:0; color:var(--ovb-blue); font-weight:700; cursor:pointer; font-size:11px; }

  /* Layout */
  /* El motor ocupa siempre el 100% del viewport (cualquier pantalla), sin
     desbordes ni huecos. El scroll del contenido ocurre dentro de <main>. */
  .app { display:flex; width:100%; height:100vh; height:100dvh; overflow:hidden; }
  /* Barra lateral · siempre azul corporativo */
  aside {
    flex:0 0 240px; width:240px; min-width:240px; max-width:240px;
    background:linear-gradient(180deg,#002747 0%, #001A33 100%);
    border-right:1px solid rgba(255,255,255,0.10); box-shadow:18px 0 60px -44px rgba(0,0,0,0.6);
    padding:24px 16px; height:100%; overflow-y:auto; display:flex; flex-direction:column; flex-shrink:0;
  }
  aside .brand { display:flex; gap:10px; align-items:center; margin-bottom:28px; padding:0 4px; }
  aside .logo { height:36px; display:flex; align-items:center; }
  aside .logo img { height:36px; width:auto; display:block; filter:brightness(0) invert(1); }
  aside .brand .name { font-size:14px; font-weight:800; line-height:1; color:#fff; }
  aside .brand .sub  { font-size:9px; font-weight:600; letter-spacing:0.22em;
    text-transform:uppercase; color:rgba(214,229,246,0.65); margin-top:4px; }
  aside .brand .ver  { font-size:8px; font-weight:700; letter-spacing:0.16em;
    text-transform:uppercase; color:rgba(214,229,246,0.4); margin-top:3px; }
  aside .eyebrow { color:rgba(214,229,246,0.45); }

  .eyebrow { font-size:10px; font-weight:800; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--ink-soft); }
  .accent-rule { width:48px; height:3px; background:var(--ovb-hot-pink); border-radius:2px; }

  nav { display:flex; flex-direction:column; gap:2px; }
  aside nav button {
    text-align:left; background:transparent; border:0; padding:10px 12px;
    font-size:13px; font-weight:700; color:rgba(220,233,247,0.74);
    border-radius:8px; transition:.15s;
  }
  aside nav button:hover { background:rgba(255,255,255,0.08); color:#fff; }
  aside nav button.active { background:rgba(255,255,255,0.13); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16); }
  aside .btn.ghost { color:rgba(220,233,247,0.82); border-color:rgba(255,255,255,0.18); background:transparent; }
  aside .btn.ghost:hover { background:rgba(255,255,255,0.08); color:#fff; }

  /* Botón de cambio de modo (solo admin) · bajo la marca */
  .modo-toggle {
    display:flex; align-items:center; gap:8px; width:100%; margin:0 0 20px;
    padding:9px 11px; border-radius:9px; cursor:pointer;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
    color:#fff; font-size:12px; font-weight:800; letter-spacing:.02em;
  }
  .modo-toggle:hover { background:rgba(255,255,255,0.15); }
  .modo-toggle .dot { width:8px; height:8px; border-radius:50%; background:#66CCCC; flex-shrink:0; }
  /* ════ Modo Director · barra lateral rosa OVB ════ */
  .app.director aside { background:linear-gradient(180deg,#CC0066 0%, #80003D 100%); }
  .app.director .modo-toggle { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.30); }
  .app.director .modo-toggle .dot { background:#FFD6EC; }
  .app.director aside nav button.active { background:rgba(255,255,255,0.20); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28); }
  /* Recuadro de seguimiento del director */
  .dir-resumen { margin-top:8px; padding:11px 12px; border-radius:10px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22); display:flex; flex-direction:column; gap:9px; }
  .dir-resumen .dir-stat { display:flex; align-items:baseline; gap:9px; }
  .dir-resumen .dir-stat .n { font-size:21px; font-weight:800; color:#fff; min-width:32px; line-height:1; }
  .dir-resumen .dir-stat .l { font-size:11px; font-weight:700; color:rgba(255,255,255,0.88); letter-spacing:.01em; }
  .dir-resumen-cargando { font-size:11px; color:rgba(255,255,255,0.75); }

  main { flex:1 1 auto; min-width:0; height:100%; overflow-y:auto; overflow-x:hidden; padding:36px 40px; }
  .page-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
  .page-header h1 { font-size:28px; font-weight:800; margin:4px 0 0; }

  /* Card */
  .card {
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:20px; box-shadow:0 12px 28px -22px rgba(0,51,102,0.25);
    margin-bottom:16px;
  }

  /* Pills */
  .pill {
    display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
    font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
    background:var(--light-grey); color:var(--ink-soft); border:1px solid var(--border);
  }
  .pill.pink { background:rgba(255,51,153,0.10); color:var(--ovb-berry); border-color:rgba(204,0,102,0.25); }
  .pill.green{ background:rgba(46,159,110,0.12); color:var(--ovb-growth-dark); border-color:rgba(46,159,110,0.30); }
  .pill.blue { background:rgba(0,51,102,0.08);   color:var(--ovb-blue);  border-color:rgba(0,51,102,0.18); }
  .pill.amber{ background:rgba(255,176,32,0.12); color:#A35D00; border-color:rgba(255,176,32,0.30); }

  /* KPIs */
  .kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; justify-items:stretch; }
  .kpi { position:relative; padding:14px 14px 14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; text-align:center; display:flex; flex-direction:column; }
  .kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ovb-blue); }
  .kpi.green::before{ background:var(--ovb-growth); }
  .kpi.pink::before { background:var(--ovb-hot-pink); }
  .kpi .label { font-size:9.5px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
    min-height:40px; display:flex; align-items:center; justify-content:center; }
  .kpi .value { font-size:30px; font-weight:800; line-height:1.05; margin-top:10px; word-break:break-word; }
  .kpi .hint  { font-size:11px; color:var(--ink-soft); margin-top:auto; padding-top:6px; line-height:1.3; text-align:center; }
  @media (max-width:1200px){ .kpis{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:780px) { .kpis{grid-template-columns:repeat(2,1fr);} }

  /* Buttons */
  .btn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
    border:1px solid var(--border-strong); border-radius:10px; background:var(--surface);
    font-size:13px; font-weight:700; color:var(--ovb-blue); transition:.15s; }
  .btn:hover { background:#f3f1ea; }
  .btn.primary { background:var(--ovb-blue); border-color:var(--ovb-blue); color:#fff; box-shadow:0 12px 24px -16px rgba(0,51,102,0.5); }
  .btn.primary:hover { background:var(--ovb-blue-dark); }
  .btn.pink    { background:var(--ovb-hot-pink); border-color:var(--ovb-hot-pink); color:#fff; box-shadow:0 12px 24px -16px rgba(204,0,102,0.55); }
  .btn.pink:hover{ background:var(--ovb-berry); }
  .btn.green   { background:var(--ovb-growth); border-color:var(--ovb-growth); color:#fff; }
  .btn.ghost   { background:transparent; border-color:transparent; color:var(--ovb-blue); }
  .btn.small   { height:30px; padding:0 12px; font-size:12px; border-radius:8px; }

  /* Tablas */
  table { width:100%; border-collapse:collapse; }
  thead th { font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ink-soft); text-align:center; padding:10px 12px; border-bottom:1px solid var(--border); }
  tbody td { padding:14px 12px; font-size:13px; border-bottom:1px solid rgba(10,10,11,0.05); vertical-align:middle; text-align:center; }
  tbody tr:hover { background:#fafaf6; }
  td.right, th.right { text-align:right; }
  td.left, th.left { text-align:left; }

  /* Score badge */
  .score {
    display:inline-flex; align-items:center; gap:8px; padding:3px 12px 3px 4px; border-radius:999px;
    font-size:12px; font-weight:800;
  }
  .score .num {
    width:30px; height:30px; border-radius:50%; background:#fff;
    display:grid; place-items:center; font-size:12px; color:var(--ovb-blue);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
  }
  .score.excelente { background:rgba(46,159,110,0.18); color:var(--ovb-growth-dark); }
  .score.alta      { background:rgba(0,153,153,0.18); color:#006666; }
  .score.revisar   { background:rgba(255,176,32,0.18); color:#A35D00; }
  .score.vigilar   { background:rgba(0,51,102,0.12);   color:var(--ovb-blue); }
  .score.no_compensa { background:rgba(204,0,102,0.12); color:var(--ovb-berry); }

  /* Forms */
  label.field { display:flex; flex-direction:column; gap:4px; }
  label.field span { font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
  /* Campos obligatorios · resaltados con un fondo rosa translúcido */
  .req-field, .block-req { background:rgba(255,51,153,0.07); border:1px solid rgba(255,51,153,0.22); border-radius:10px; padding:11px 12px; }
  .req-field > span:first-child::after { content:" *"; color:var(--ovb-berry); }
  .req-legend { font-size:11px; color:var(--ovb-berry); font-weight:700; margin:0 0 2px; display:flex; align-items:center; gap:7px; }
  .req-legend .sw { width:14px; height:14px; border-radius:4px; background:rgba(255,51,153,0.12); border:1px solid rgba(255,51,153,0.30); display:inline-block; }
  /* Buscador por nombre */
  /* Fila de filtro: selector de colaborador (admin) + buscador */
  .filtro-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 12px; }
  .filtro-row .buscador { margin:0; flex:1 1 240px; }
  .sel-colab-wrap { display:inline-flex; align-items:center; gap:8px; background:rgba(0,153,153,0.08); border:1.5px solid var(--ovb-teal); border-radius:10px; padding:5px 10px 5px 12px; }
  .sel-colab-lbl { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ovb-teal); }
  .sel-colab { height:32px; border:0; background:#fff; border-radius:7px; padding:0 8px; font-size:13px; font-weight:800; color:var(--ovb-blue); cursor:pointer; max-width:230px; }
  .buscador { margin:0 0 12px; }
  .buscador input { width:100%; max-width:380px; height:40px; padding:0 14px; border:1px solid var(--border-strong); border-radius:10px; font-size:14px; font-weight:600; background:var(--surface); color:var(--ovb-blue); }
  .buscador input::placeholder { color:var(--ink-soft); font-weight:600; }
  input[type=text], input[type=number], input[type=date], input[type=email], select, textarea {
    height:38px; padding:0 12px; border:1px solid var(--border-strong); border-radius:10px;
    font-size:14px; font-weight:600; color:var(--ovb-blue); background:#fff; font-family:inherit;
  }
  textarea { height:auto; padding:10px 12px; }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ovb-blue); }
  input.no-spinner { -moz-appearance:textfield; appearance:textfield; }
  input.no-spinner::-webkit-inner-spin-button, input.no-spinner::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  /* Sin flechas en NINGÚN input numérico: solo se editan escribiendo (no rueda, no spinners) */
  input[type=number] { -moz-appearance:textfield; appearance:textfield; }
  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

  /* Escalera de progreso de la oportunidad (sustituye a la bolita) */
  .esc-btn { background:transparent; border:0; padding:4px 0; cursor:pointer; transform-origin:center bottom; }
  .esc-btn:hover svg { opacity:0.85; }
  @keyframes esc-celebrate {
    0%   { transform:scale(1);    filter:drop-shadow(0 0 0 rgba(46,159,110,0)); }
    25%  { transform:scale(1.18); filter:drop-shadow(0 0 10px rgba(46,159,110,0.65)); }
    55%  { transform:scale(0.96); filter:drop-shadow(0 0 4px rgba(46,159,110,0.45)); }
    100% { transform:scale(1);    filter:drop-shadow(0 0 0 rgba(46,159,110,0)); }
  }
  @keyframes esc-cancel {
    0%   { transform:translateX(0)  scale(1); }
    20%  { transform:translateX(-3px) scale(1.05); filter:drop-shadow(0 0 6px rgba(220,38,38,0.55)); }
    40%  { transform:translateX(3px)  scale(1.05); filter:drop-shadow(0 0 6px rgba(220,38,38,0.55)); }
    60%  { transform:translateX(-2px) scale(1.02); }
    80%  { transform:translateX(2px)  scale(1.02); }
    100% { transform:translateX(0)  scale(1); }
  }
  .esc-completado { animation:esc-celebrate 0.75s ease-out 1; }
  .esc-cancelado  { animation:esc-cancel    0.65s ease-out 1; }

  /* Modal */
  .modal-backdrop {
    position:fixed; inset:0; background:rgba(0,17,40,0.55); backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px); z-index:50; display:flex; align-items:center; justify-content:center; padding:24px;
    animation:fadeIn .18s ease-out;
  }
  .modal {
    background:#fff; border-radius:18px; max-width:780px; width:100%; max-height:90vh; overflow:auto;
    box-shadow:0 40px 80px -20px rgba(0,17,40,0.6);
    animation:pop .22s ease-out;
  }
  /* Ventana del Euríbor: compacta y más ancha que alta */
  .modal.eurref { max-width:740px; }
  .modal.eurref .body { padding:16px 18px; }
  .modal-backdrop.full { padding:0; }
  .modal.full {
    max-width:none; width:100vw; height:100vh; max-height:100vh; border-radius:0;
  }
  .modal header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .modal header h2 { margin:0; font-size:18px; }
  .modal .x { background:rgba(0,0,0,0.06); border:0; width:34px; height:34px; border-radius:50%; font-size:16px; color:var(--ink); }
  .modal .body { padding:22px; }
  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
  @keyframes pop { from{opacity:0; transform:translateY(8px) scale(0.98);} to{opacity:1; transform:none;} }

  /* Toast */
  #toast {
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
    background:rgba(20,21,24,0.94); color:#fff; padding:10px 18px; border-radius:999px;
    border:1px solid rgba(46,159,110,0.4);
    font-size:13px; font-weight:700; letter-spacing:0.02em;
    z-index:80; opacity:0; transition:opacity .2s, transform .25s; pointer-events:none;
  }
  #toast.show { opacity:1; transform:translate(-50%,0); }

  /* Hero / sections */
  .hero-grad { background:linear-gradient(135deg,var(--ovb-blue) 0%, var(--ovb-blue-dark) 100%); color:#fff; padding:22px; border-radius:14px; }
  .hero-grad em { font-style:normal; background:linear-gradient(135deg,#FFFFFF 0%, #FFD4E6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  @media (max-width:900px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;} }

  .stat .l { font-size:10px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
  .stat .v { font-size:18px; font-weight:800; margin-top:4px; line-height:1.1; }
  .stat .v.green { color:var(--ovb-growth-dark); }
  .stat .v.pink { color:var(--ovb-berry); }

  .disclaimer { font-size:11px; color:var(--ink-soft); font-style:italic; line-height:1.5; }

  /* Argument box */
  .argument {
    background:linear-gradient(135deg,var(--ovb-blue) 0%, var(--ovb-blue-dark) 100%);
    color:#fff; padding:18px 22px; border-radius:12px;
  }
  .argument pre { white-space:pre-wrap; font-family:inherit; font-size:13.5px; line-height:1.55; margin:0; }
  .argument .head { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; opacity:0.8; margin-bottom:8px; font-weight:800; }

  /* Empty states */
  .empty { text-align:center; padding:40px 20px; color:var(--ink-soft); font-size:13px; }
  .empty .big { font-size:32px; margin-bottom:10px; }

  /* Semáforo */
  .semaforo {
    display:inline-flex; align-items:center; gap:8px;
    padding:4px 10px 4px 4px; border-radius:999px;
    font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  }
  .semaforo .dot {
    width:22px; height:22px; border-radius:50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
    flex:none;
  }
  .semaforo.verde   { background:rgba(46,159,110,0.14);  color:var(--ovb-growth-dark); }
  .semaforo.verde   .dot { background: radial-gradient(circle at 35% 35%, #5BE092 0%, var(--ovb-growth-dark) 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 0 0 3px rgba(46,159,110,0.18); }
  .semaforo.amarillo{ background:rgba(255,176,32,0.18);  color:#A35D00; }
  .semaforo.amarillo .dot { background: radial-gradient(circle at 35% 35%, #FFD480 0%, #C26A00 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 0 0 3px rgba(255,176,32,0.22); }
  .semaforo.rojo    { background:rgba(220,38,38,0.12);    color:#991B1B; }
  .semaforo.rojo    .dot { background: radial-gradient(circle at 35% 35%, #F87171 0%, #991B1B 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 0 0 3px rgba(220,38,38,0.20); }

  /* Alerta LTV > 80% (cabecera de la ficha) */
  .alert-ltv {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    background:linear-gradient(135deg,#CC0066 0%,#8a0044 100%); color:#fff;
    border-radius:14px; padding:16px 22px; margin-bottom:16px;
    font-size:17px; font-weight:800; letter-spacing:0.02em;
    box-shadow:0 18px 40px -20px rgba(204,0,102,0.65);
  }
  .alert-ltv .ico { font-size:22px; line-height:1; }
  .alert-ltv .meta { font-size:12.5px; font-weight:600; opacity:0.92; letter-spacing:0; }
  /* Variante OK (LTV dentro del 80%) · más sobria */
  .alert-ltv.ok {
    background:rgba(46,159,110,0.12); color:var(--ovb-growth-dark);
    border:1px solid rgba(46,159,110,0.32); box-shadow:none;
    padding:12px 18px; font-size:15px;
  }
  .alert-ltv.ok .ico { font-size:18px; }
  .alert-ltv.ok .meta { color:var(--ovb-growth-dark); }

  /* Hero del cálculo rápido */
  .hero-rapido {
    background: linear-gradient(135deg, var(--ovb-blue) 0%, var(--ovb-blue-dark) 100%);
    color:#fff; padding:28px 32px; border-radius:18px;
    box-shadow:0 30px 60px -28px rgba(0,51,102,0.45);
    margin-bottom:20px;
    position:relative; overflow:hidden;
  }
  .hero-rapido::after {
    content:""; position:absolute; right:-60px; top:-60px;
    width:240px; height:240px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,51,153,0.35) 0%, transparent 70%);
    pointer-events:none;
  }
  .hero-rapido .pregunta {
    font-size:13px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
    opacity:0.7; margin-bottom:10px;
  }
  .hero-rapido h2 {
    font-size:32px; font-weight:800; line-height:1.1; margin:0 0 6px;
    max-width:680px;
  }
  .hero-rapido h2 em {
    font-style:normal;
    background:linear-gradient(135deg,#FFFFFF 0%, #FFD4E6 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-rapido .target {
    margin-top:18px; padding:16px 20px;
    background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
    border-radius:12px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    position:relative; z-index:1;
  }
  .hero-rapido .target .lbl { font-size:11px; font-weight:800; letter-spacing:0.22em; text-transform:uppercase; opacity:0.78; }
  .hero-rapido .target .val { font-size:36px; font-weight:800; line-height:1; letter-spacing:-0.02em; margin-top:4px; }
  .hero-rapido .target .banco { font-size:14px; font-weight:700; opacity:0.86; margin-top:6px; }

  /* ════ Presentación estilo OVB (formato App Grecia) ════════════════════ */
  @font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
  @font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
  @font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }

  /* ════ Landing del Inicio · scroll (estilo App Grecia · sobrio + futurista) ════ */
  main.main-landing { padding:0; height:100%; overflow:hidden; }

  .nlp {
    --c-blue:#003366; --c-blue-deep:#001A33; --c-blue-med:#336699; --c-blue-light:#6699CC;
    --c-pink:#FF3399; --c-berry:#CC0066; --c-teal:#009999; --c-sapphire:#66CCCC;
    --c-green:#2E9F6E; --c-ink:#0A1F3A; --c-ink-soft:#4A5A74;
    --ease:cubic-bezier(0.22,1,0.36,1);
    font-family:'Segoe UI Historic','Segoe UI',Tahoma,sans-serif;
    position:relative; height:100%;
    overflow-y:auto; overflow-x:hidden;
    scroll-snap-type:y proximity; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    /* Fondo ÚNICO y fijo (el contenido hace scroll por encima → sin costuras entre diapos) */
    --mx:-300px; --my:-300px;
    background-color:#001428;
    background-image:
      radial-gradient(320px circle at var(--mx) var(--my), rgba(102,204,204,0.22) 0%, rgba(102,204,204,0.07) 42%, transparent 70%),
      radial-gradient(1200px 820px at 84% -10%, rgba(0,153,153,0.14) 0%, transparent 60%),
      radial-gradient(1000px 720px at -6% 110%, rgba(255,51,153,0.11) 0%, transparent 60%),
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(160deg, #001428 0%, #001f3a 52%, #002a4d 100%);
    background-size:auto, auto, auto, 64px 64px, 64px 64px, auto;
    background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-position:0 0;
  }
  .nlp::-webkit-scrollbar { width:9px; }
  .nlp::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:99px; }
  .nlp::-webkit-scrollbar-track { background:transparent; }

  .nlp-sec {
    position:relative; min-height:100vh;
    scroll-snap-align:start; scroll-snap-stop:always;
    display:flex; align-items:center; justify-content:center;
    padding:88px 64px; overflow:hidden;
  }
  .nlp-inner { position:relative; z-index:3; width:100%; max-width:1160px; margin:0 auto; }

  /* — Temas (fondo transparente: lo aporta .nlp para que sea continuo) — */
  .nlp-sec.dark  { background:transparent; color:#EAF2FB; }
  .nlp-sec.light { background:transparent; color:#EAF2FB; }

  /* — Orbes desactivados (el fondo es único; la vida la da la mini-luz del ratón) — */
  .nlp-orb { display:none; position:absolute; border-radius:50%; filter:blur(95px); pointer-events:none; z-index:1; }
  .nlp-orb.pink { background:radial-gradient(circle, rgba(255,51,153,0.45) 0%, transparent 70%); }
  .nlp-orb.teal { background:radial-gradient(circle, rgba(102,204,204,0.45) 0%, transparent 70%); }
  .nlp-orb.o1 { width:560px; height:560px; top:-160px; right:-90px; animation:nlp-orb1 19s ease-in-out infinite; }
  .nlp-orb.o2 { width:480px; height:480px; bottom:-130px; left:-80px; animation:nlp-orb2 23s ease-in-out infinite; }
  @keyframes nlp-orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-55px,70px) scale(1.12);} }
  @keyframes nlp-orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(80px,-60px) scale(1.15);} }

  /* — Tipografía base — */
  .nlp-eyebrow { display:inline-flex; align-items:center; gap:14px; font-size:clamp(11px,0.95vw,14px);
    font-weight:800; letter-spacing:0.3em; text-transform:uppercase; margin:0 0 26px; }
  .nlp-eyebrow::before { content:''; width:42px; height:2px; display:inline-block; }
  .nlp-sec.dark  .nlp-eyebrow { color:var(--c-sapphire); }
  .nlp-sec.dark  .nlp-eyebrow::before { background:var(--c-sapphire); }
  .nlp-sec.light .nlp-eyebrow { color:var(--c-berry); }
  .nlp-sec.light .nlp-eyebrow::before { background:var(--c-pink); }

  .nlp-title { font-weight:700; line-height:1.03; letter-spacing:-0.02em; margin:0 0 24px; font-size:clamp(38px,5vw,80px); }
  .nlp-sec.dark  .nlp-title { color:#fff; }
  .nlp-sec.light .nlp-title { color:var(--c-blue); }
  .nlp-title em { font-style:normal; }
  .nlp-sec.dark  .nlp-title em { background:linear-gradient(120deg,var(--c-pink),#FF8AC4);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .nlp-sec.light .nlp-title em { color:var(--c-berry); }

  .nlp-sub { font-size:clamp(17px,1.55vw,26px); line-height:1.45; margin:0; max-width:880px; font-weight:400; }
  .nlp-sec.dark  .nlp-sub { color:rgba(214,229,246,0.9); }
  .nlp-sec.light .nlp-sub { color:var(--c-ink-soft); }
  .nlp-lead { font-size:clamp(16px,1.5vw,26px); line-height:1.4; margin:0 0 26px; max-width:1000px; }
  .nlp-sec.dark  .nlp-lead { color:rgba(214,229,246,0.78); }
  .nlp-sec.light .nlp-lead { color:var(--c-ink-soft); }

  /* — Reveal al hacer scroll — */
  .nlp .reveal { opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .nlp .reveal.in { opacity:1; transform:none; }
  .nlp .stagger > * { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .nlp .stagger.in > * { opacity:1; transform:none; }
  .nlp .stagger.in > *:nth-child(1){ transition-delay:.02s; }
  .nlp .stagger.in > *:nth-child(2){ transition-delay:.12s; }
  .nlp .stagger.in > *:nth-child(3){ transition-delay:.22s; }
  .nlp .stagger.in > *:nth-child(4){ transition-delay:.32s; }
  .nlp .stagger.in > *:nth-child(5){ transition-delay:.42s; }

  /* — Insignia con pulso (hero) — */
  .nlp-badge { display:inline-flex; align-items:center; gap:12px; padding:11px 20px; margin-bottom:30px;
    border:1.5px solid rgba(102,204,204,0.45); border-radius:999px; background:rgba(102,204,204,0.08);
    font-size:13px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--c-sapphire); }
  .nlp-badge .pulse { width:9px; height:9px; border-radius:50%; background:var(--c-sapphire);
    box-shadow:0 0 0 0 rgba(102,204,204,0.7); animation:nlp-pulse 2.2s ease-in-out infinite; }
  @keyframes nlp-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(102,204,204,0.55);} 50%{box-shadow:0 0 0 12px rgba(102,204,204,0);} }
  .nlp-hero-title { font-size:clamp(54px,7vw,118px); line-height:1; }

  /* — Cue de scroll — */
  .nlp-cue { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:11px; color:rgba(220,233,247,0.6);
    font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:800; animation:nlp-fadein 1.2s ease 0.6s both; }
  .nlp-cue .mouse { width:26px; height:42px; border:2px solid rgba(220,233,247,0.4); border-radius:14px; position:relative; }
  .nlp-cue .mouse::before { content:''; position:absolute; left:50%; top:7px; width:4px; height:8px; border-radius:2px;
    background:var(--c-sapphire); transform:translateX(-50%); animation:nlp-wheel 1.6s ease-in-out infinite; }
  @keyframes nlp-wheel { 0%{opacity:0;transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0;transform:translate(-50%,13px);} }
  @keyframes nlp-fadein { from{opacity:0;} to{opacity:1;} }

  /* — Riel de puntos lateral — */
  .nlp-rail { position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:40;
    display:flex; flex-direction:column; gap:11px; }
  .nlp-dot { width:9px; height:9px; border-radius:50%; background:rgba(0,51,102,0.22); border:0; padding:0; cursor:pointer; transition:.25s var(--ease); }
  .nlp-dot:hover { transform:scale(1.3); }
  .nlp-dot.active { background:var(--c-berry); height:24px; border-radius:8px; }
  .nlp-rail.on-dark .nlp-dot { background:rgba(255,255,255,0.28); }
  .nlp-rail.on-dark .nlp-dot.active { background:var(--c-sapphire); }
  @media (max-width:820px){ .nlp-rail { display:none; } }

  /* — Tarjetas de ahorro (luz / telefonía / seguros) — */
  .nlp-ah-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
  .nlp-card { position:relative; overflow:hidden; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:22px;
    padding:36px 28px; text-align:center; box-shadow:0 30px 60px -42px rgba(0,0,0,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
  .nlp-card:hover { transform:translateY(-7px); border-color:rgba(102,204,204,0.4); box-shadow:0 44px 80px -42px rgba(0,0,0,0.7); }
  .nlp-card .ico { width:72px; height:72px; border-radius:20px; display:grid; place-items:center; margin:0 auto 18px; color:#fff;
    box-shadow:0 16px 34px -14px rgba(0,0,0,0.55); }
  .nlp-card .ico svg { width:38px; height:38px; }
  .nlp-card .ico.amber { background:linear-gradient(160deg,#F0B000,#B58300); }
  .nlp-card .ico.blue  { background:linear-gradient(160deg,#4d8fd6,#1E5AA8); }
  .nlp-card .ico.teal  { background:linear-gradient(160deg,#11b0c2,#007A8A); }
  .nlp-card .nm { font-size:21px; font-weight:800; color:var(--c-sapphire); }
  .nlp-card .num { font-size:clamp(32px,3.2vw,50px); font-weight:800; color:#fff; letter-spacing:-0.02em; line-height:1; margin-top:6px; }
  .nlp-card .un { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(214,229,246,0.6); margin-top:7px; }
  .nlp-foot-line { font-size:clamp(16px,1.4vw,22px); color:rgba(214,229,246,0.78); margin:30px 0 0; }

  /* — Frases ancla (statement) — */
  .nlp-statement { font-size:clamp(40px,5.6vw,98px); font-weight:700; line-height:1.0; letter-spacing:-0.02em; color:#fff; margin:0; }
  .nlp-statement em { font-style:normal; background:linear-gradient(120deg,var(--c-pink),#FF8AC4);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .nlp-part { display:inline-flex; align-items:center; gap:18px; font-size:clamp(14px,1.3vw,22px);
    font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-sapphire); margin:0 0 26px; }
  .nlp-part::before { content:''; width:64px; height:2px; background:var(--c-sapphire); display:inline-block; }
  .nlp-bigtag { font-size:clamp(48px,8vw,128px); font-weight:800; line-height:0.96; letter-spacing:-0.02em; margin:0; color:#fff; }
  .nlp-salto { font-size:clamp(26px,2.8vw,46px); font-weight:700; color:#fff; margin:18px 0 0; line-height:1.14; }
  .nlp-salto strong { color:var(--c-pink); font-weight:800; }
  .nlp-watermark { position:absolute; right:2%; bottom:-7%; font-size:min(42vw,540px); font-weight:800; line-height:1;
    color:transparent; -webkit-text-stroke:2px rgba(255,255,255,0.055); z-index:1; pointer-events:none; user-select:none; }
  .nlp-watermark.pink { -webkit-text-stroke:2px rgba(255,51,153,0.18); }
  .nlp-statement strong, .nlp-sub strong { color:var(--c-sapphire); font-weight:800; }

  /* — Comparativa de barras (3% vs 2%, interactiva) — */
  .nlp .bars-sub { font-size:clamp(15px,1.35vw,22px); color:rgba(214,229,246,0.8); margin:0 0 20px; }
  .nlp .bars-sub strong { color:#fff; font-weight:800; }
  .nlp .accent-rule-g { width:84px; height:5px; background:linear-gradient(90deg,var(--c-pink),var(--c-berry)); border-radius:2px; margin:0 0 30px; }
  .nlp .compare-wrap { display:grid; grid-template-columns:1.05fr 0.95fr; gap:54px; align-items:center; }
  .nlp .chart-cols { position:relative; display:flex; align-items:flex-end; justify-content:center; gap:64px; height:400px; }
  .nlp .bar-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
  .nlp .bar { width:140px; height:0; border-radius:14px 14px 0 0; transition:height 1.05s var(--ease);
    display:flex; align-items:flex-start; justify-content:center; overflow:hidden; }
  .nlp .bar.hi { background:linear-gradient(180deg,#FF3399 0%,#CC0066 100%); cursor:pointer; }
  .nlp .bar.lo { background:linear-gradient(180deg,#12A3B4 0%,#007A8A 100%); }
  .nlp .bar-cuota { color:#fff; font-weight:800; font-size:17px; padding-top:16px; white-space:nowrap; }
  .nlp .bar-pct { font-size:40px; font-weight:800; color:#fff; margin-bottom:12px; }
  .nlp .bar-tot { font-size:21px; font-weight:800; color:#fff; margin-top:14px; white-space:nowrap; }
  .nlp .chart-cap { grid-column:1 / -1; text-align:center; font-size:15px; color:rgba(214,229,246,0.62); margin-top:6px; }
  .nlp .gpanel { display:flex; flex-direction:column; gap:20px; }
  .nlp .fx-badge { position:absolute; left:50%; bottom:96px; transform:translateX(-50%) scale(0.4); opacity:0;
    background:rgba(255,255,255,0.95); color:var(--c-blue); font-weight:800; font-size:24px; padding:11px 26px;
    border:2px solid rgba(0,51,102,0.14); border-radius:999px; box-shadow:0 16px 38px -14px rgba(0,51,102,0.3);
    pointer-events:none; white-space:nowrap; z-index:7; backdrop-filter:blur(2px); }
  .nlp .compare-wrap.s1 .fx-badge, .nlp .compare-wrap.s2 .fx-badge { animation:nlp-fxpop .7s cubic-bezier(.2,1.2,.3,1) forwards; }
  @keyframes nlp-fxpop { 0%{opacity:0;transform:translateX(-50%) scale(0.4);} 60%{opacity:1;transform:translateX(-50%) scale(1.1);} 100%{opacity:1;transform:translateX(-50%) scale(1);} }
  .nlp .compare-wrap.s1 .bar.hi, .nlp .compare-wrap.s2 .bar.hi { animation:nlp-fxflash .6s ease; }
  @keyframes nlp-fxflash { 0%{filter:brightness(1);} 30%{filter:brightness(1.45);} 100%{filter:brightness(1);} }
  .nlp .compare-wrap.s1 .bar.lo, .nlp .compare-wrap.s2 .bar.lo { animation:nlp-fxglow 1.1s ease .15s 2; }
  @keyframes nlp-fxglow { 0%,100%{box-shadow:0 0 0 0 rgba(18,163,180,0);} 50%{box-shadow:0 0 0 14px rgba(18,163,180,0.28);} }
  .nlp .dif-callout { border:1px solid rgba(255,255,255,0.13); border-radius:20px; padding:22px 26px;
    background:rgba(255,255,255,0.06); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; transform:translateY(24px); pointer-events:none; cursor:pointer;
    transition:opacity .5s ease .35s, transform .5s ease .35s; }
  .nlp .compare-wrap.s1 .dif-callout, .nlp .compare-wrap.s2 .dif-callout { opacity:1; transform:none; pointer-events:auto; }
  .nlp .dif-callout .k { font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:rgba(214,229,246,0.7); font-weight:800; }
  .nlp .dif-callout .v { font-size:46px; font-weight:800; color:#fff; line-height:1; margin-top:8px; }
  .nlp .dif-callout .v span { font-size:18px; font-weight:600; color:rgba(214,229,246,0.6); }
  .nlp .dif-hint { font-size:13px; color:var(--c-sapphire); font-weight:800; margin-top:10px; }
  .nlp .compare-wrap.s2 .dif-hint { visibility:hidden; }
  .nlp .save-callout { background:rgba(46,159,110,0.14); border:1px solid rgba(63,201,138,0.42); color:#fff; border-radius:20px; padding:26px 30px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; transform:translateY(24px) scale(0.97); transition:.5s; box-shadow:0 24px 50px -30px rgba(15,107,68,0.5); }
  .nlp .compare-wrap.s2 .save-callout { opacity:1; transform:none; }
  .nlp .save-callout .k { font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:rgba(214,229,246,0.72); font-weight:800; }
  .nlp .save-callout .v { font-size:58px; font-weight:800; line-height:0.95; margin-top:8px; letter-spacing:-0.02em; color:#5BE0A0; }

  /* — Gráfica de cruce · recorte (interactiva) — */
  .nlp .recorte-wrap { display:grid; grid-template-columns:1.45fr 1fr; gap:46px; align-items:center; }
  .nlp .recorte-left { position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; }
  .nlp .recorte-right { display:flex; flex-direction:column; gap:22px; justify-content:center; }
  .nlp .recorte-legend { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14px; font-weight:700; color:rgba(214,229,246,0.78); }
  .nlp .recorte-legend span { display:flex; align-items:center; gap:9px; }
  .nlp .recorte-legend i { width:20px; height:7px; border-radius:4px; display:inline-block; }
  .nlp .recorte-legend .leg-ahorro, .nlp .recorte-legend .leg-cruce { visibility:hidden; }
  .nlp .recorte-wrap.r1 .leg-ahorro, .nlp .recorte-wrap.r1 .leg-cruce { visibility:visible; }
  .nlp .recorte-chart { width:100%; }
  .nlp .recorte-btn { align-self:center; margin-top:12px; max-width:92%; text-align:center;
    font-family:inherit; cursor:pointer; border:1px solid rgba(63,201,138,0.5); border-radius:16px;
    padding:16px 26px; font-size:16px; font-weight:800; color:#fff; line-height:1.25;
    background:rgba(46,159,110,0.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 22px 48px -18px rgba(0,0,0,0.55); transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease, border-color .25s ease; }
  .nlp .recorte-btn:hover { transform:translateY(-2px); box-shadow:0 28px 58px -18px rgba(46,159,110,0.55); }
  .nlp .recorte-btn .hi { color:#5BE0A0; }
  .nlp .recorte-btn .pink { display:block; margin-top:4px; font-size:0.94em; letter-spacing:0.02em; color:var(--c-pink); }
  .nlp .recorte-btn.is-done { cursor:default; border-color:rgba(255,255,255,0.16); background:rgba(255,255,255,0.07); }
  .nlp .recorte-btn.is-done:hover { transform:none; box-shadow:0 22px 48px -18px rgba(0,0,0,0.55); }
  .nlp .recorte-readout { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13); border-radius:20px; padding:26px 28px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 30px 60px -40px rgba(0,0,0,0.6);
    opacity:0; transform:translateY(18px); pointer-events:none; cursor:pointer; transition:opacity .5s ease, transform .5s ease; }
  .nlp .recorte-wrap.r1 .recorte-readout { opacity:1; transform:none; pointer-events:auto; }
  .nlp .recorte-wrap.r2 .recorte-readout { cursor:default; }
  .nlp .recorte-readout .ro-num { font-size:46px; font-weight:800; color:#fff; line-height:1; letter-spacing:-0.02em; }
  .nlp .recorte-readout .ro-txt { font-size:17px; color:rgba(234,242,251,0.92); line-height:1.4; margin-top:12px; }
  .nlp .recorte-readout .ro-txt strong { color:#FF66B2; font-weight:800; }
  .nlp .recorte-readout .ro-save { font-size:18px; color:#fff; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.13); }
  .nlp .recorte-readout .ro-save strong { color:var(--c-sapphire); font-weight:800; font-size:22px; }
  .nlp .recorte-readout .ro-hint { font-size:13px; color:var(--c-sapphire); font-weight:800; margin-top:12px; }
  .nlp .recorte-wrap.r2 .ro-hint { visibility:hidden; }
  .nlp .recorte-slider-box { opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .5s ease, transform .5s ease; }
  .nlp .recorte-wrap.r2 .recorte-slider-box { opacity:1; transform:none; pointer-events:auto; }
  .nlp .recorte-slider-lbl { font-size:17px; color:rgba(234,242,251,0.92); margin-bottom:11px; font-weight:600; }
  .nlp .recorte-slider-lbl strong { color:#FF66B2; font-weight:800; }
  .nlp .recorte-slider-box input[type=range] { width:100%; height:12px; -webkit-appearance:none; appearance:none;
    background:rgba(255,255,255,0.14); border-radius:8px; outline:none; cursor:pointer; }
  .nlp .recorte-slider-box input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
    width:30px; height:30px; border-radius:50%; background:var(--c-pink); border:4px solid #0A1F3A; box-shadow:0 0 16px rgba(255,51,153,0.7); cursor:pointer; }
  .nlp .recorte-slider-box input[type=range]::-moz-range-thumb { width:30px; height:30px; border-radius:50%;
    background:var(--c-pink); border:4px solid #0A1F3A; cursor:pointer; }
  .nlp .recorte-scale { display:flex; justify-content:space-between; font-size:13px; color:rgba(214,229,246,0.6); margin-top:8px; }

  /* — Motor IA (oscuro · futurista) — */
  .nlp .motor-sub { font-size:clamp(16px,1.45vw,24px); line-height:1.45; margin:0 0 32px; max-width:980px; color:rgba(214,229,246,0.85); }
  .nlp .motor-sub strong { color:var(--c-sapphire); font-weight:800; }
  .nlp .motor-wrap { display:grid; grid-template-columns:1.08fr 0.92fr; gap:48px; align-items:center; }
  .nlp .motor-steps { display:flex; flex-direction:column; gap:11px; }
  .nlp .motor-step { display:flex; align-items:center; gap:16px; padding:13px 18px; border-radius:15px;
    background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(6px); }
  .nlp .motor-step .n { flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
    font-weight:800; font-size:19px; color:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,0.5); }
  .nlp .motor-step:nth-child(1) .n { background:linear-gradient(160deg,#1E5AA8,#003366); }
  .nlp .motor-step:nth-child(2) .n { background:linear-gradient(160deg,#1183A6,#005E86); }
  .nlp .motor-step:nth-child(3) .n { background:linear-gradient(160deg,#12A3B4,#007A8A); }
  .nlp .motor-step:nth-child(4) .n { background:linear-gradient(160deg,#1AA886,#0C7D5F); }
  .nlp .motor-step:nth-child(5) .n { background:linear-gradient(160deg,#2E9F6E,#0F6B44); }
  .nlp .motor-step .t { font-size:19px; font-weight:800; color:#fff; line-height:1.15; }
  .nlp .motor-step .t span { display:block; font-size:14px; font-weight:500; color:rgba(214,229,246,0.66); margin-top:2px; }
  .nlp .ai-core { position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto; display:grid; place-items:center; }
  .nlp .ai-rings span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; }
  .nlp .ai-rings span:nth-child(1){ width:46%; height:46%; border:2px dashed rgba(102,204,204,0.4); }
  .nlp .ai-rings span:nth-child(2){ width:72%; height:72%; border:1.5px solid rgba(102,204,204,0.22); }
  .nlp .ai-rings span:nth-child(3){ width:97%; height:97%; border:2px dashed rgba(255,51,153,0.28); }
  .nlp .ai-pulse { position:absolute; left:50%; top:50%; width:40%; height:40%; transform:translate(-50%,-50%);
    border-radius:50%; border:3px solid var(--c-sapphire); animation:nlp-aipulse 2.6s ease-out infinite; }
  @keyframes nlp-aipulse { 0%{opacity:.7; width:40%; height:40%;} 100%{opacity:0; width:104%; height:104%;} }
  .nlp .ai-orbit { position:absolute; inset:0; animation:nlp-aispin 12s linear infinite; }
  .nlp .ai-orbit i { position:absolute; width:24px; height:24px; border-radius:50%; }
  .nlp .ai-orbit i:nth-child(1){ top:-2px; left:50%; transform:translateX(-50%); background:var(--c-pink); box-shadow:0 0 18px rgba(255,51,153,0.8); }
  .nlp .ai-orbit i:nth-child(2){ bottom:7%; left:5%; background:var(--c-sapphire); box-shadow:0 0 18px rgba(102,204,204,0.8); }
  .nlp .ai-orbit i:nth-child(3){ bottom:7%; right:5%; background:var(--c-teal); box-shadow:0 0 18px rgba(0,153,153,0.8); }
  @keyframes nlp-aispin { to { transform:rotate(360deg); } }
  .nlp .ai-chip { position:absolute; left:50%; top:50%; z-index:3; width:26%; height:26%; display:grid; place-items:center;
    filter:drop-shadow(0 0 14px rgba(102,204,204,0.55)); animation:nlp-aibreathe 2.8s ease-in-out infinite; }
  .nlp .ai-chip svg { width:100%; height:100%; display:block; }
  @keyframes nlp-aibreathe { 0%,100%{transform:translate(-50%,-56%) scale(1);} 50%{transform:translate(-50%,-56%) scale(1.05);} }

  /* — Ciclo · un ahorro que se repite — */
  .nlp .nlp-cycle { display:flex; align-items:stretch; justify-content:flex-start; gap:16px; flex-wrap:wrap; margin:12px 0 4px; }
  .nlp .nlp-cyc { flex:1; min-width:200px; max-width:300px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
    border-radius:18px; padding:24px 22px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex; flex-direction:column; gap:14px; transition:transform .4s var(--ease), border-color .4s var(--ease); }
  .nlp .nlp-cyc:hover { transform:translateY(-6px); border-color:rgba(102,204,204,0.4); }
  .nlp .nlp-cyc .ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-weight:800; font-size:19px; color:#fff;
    box-shadow:0 8px 20px -8px rgba(0,0,0,0.55); }
  .nlp .nlp-cyc:nth-child(1) .ic { background:linear-gradient(160deg,#1E5AA8,#003366); }
  .nlp .nlp-cyc:nth-child(3) .ic { background:linear-gradient(160deg,#12A3B4,#007A8A); }
  .nlp .nlp-cyc:nth-child(5) .ic { background:linear-gradient(160deg,#2E9F6E,#0F6B44); }
  .nlp .nlp-cyc .t { font-size:19px; font-weight:800; color:#fff; line-height:1.2; }
  .nlp .nlp-cyc-arrow { display:flex; align-items:center; color:var(--c-sapphire); font-size:28px; font-weight:800; }
  .nlp .nlp-loop { display:inline-flex; align-items:center; gap:14px; margin-top:28px; padding:15px 28px; border-radius:999px;
    border:1px solid rgba(102,204,204,0.42); background:rgba(102,204,204,0.09); }
  .nlp .nlp-loop .sym { font-size:24px; color:var(--c-sapphire); display:inline-block; animation:nlp-aispin 7s linear infinite; }
  .nlp .nlp-loop .txt { font-size:clamp(14px,1.2vw,18px); font-weight:700; color:#fff; }
  .nlp .nlp-loop strong { color:var(--c-sapphire); font-weight:800; }
  .nlp .nlp-foot-line strong { color:var(--c-sapphire); font-weight:800; }
  @media (max-width:760px){ .nlp .nlp-cyc-arrow { transform:rotate(90deg); } }

  /* — Cierre (CTA) — */
  .nlp .nlp-cta { display:inline-flex; align-items:center; gap:12px; font-family:inherit; cursor:pointer; border:1px solid rgba(102,204,204,0.55); border-radius:16px;
    padding:20px 40px; font-size:clamp(16px,1.4vw,22px); font-weight:800; color:#fff;
    background:rgba(0,153,153,0.40); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 22px 50px -18px rgba(0,153,153,0.5); transition:.18s; }
  .nlp .nlp-cta:hover { transform:translateY(-3px); background:rgba(0,153,153,0.55); box-shadow:0 28px 62px -18px rgba(0,153,153,0.62); }
  .nlp .nlp-cta .arw { font-size:1.2em; line-height:1; }

  /* ════ Barra lateral · grupos + Euríbor (sobre azul) ═══════════════════ */
  .nav-group { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
  .nav-group-lbl { font-size:10px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
    color:rgba(214,229,246,0.45); padding:0 8px 7px; }
  .nav-sub-lbl { font-size:11px; font-weight:800; color:#fff; padding:4px 12px 2px; opacity:.92; }
  .side-foot { margin-top:auto; padding-top:14px; }
  .side-euribor-box { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13); border-radius:12px; padding:10px 12px; }
  .side-euribor-box .lbl { font-size:9px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:rgba(214,229,246,0.6); }
  .side-euribor-box .row { display:flex; align-items:center; justify-content:space-between; margin-top:3px; }
  .side-euribor-box .val { font-size:18px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
  .side-euribor-box button { background:transparent; border:0; color:#66CCCC; font-weight:800; cursor:pointer; font-size:13px; line-height:1; }
  .side-euribor-box .meta { font-size:9px; color:rgba(214,229,246,0.6); margin-top:3px; letter-spacing:0.02em; }
  .side-euribor-box .meta a { text-decoration:underline; }

  /* Bancos en cálculo rápido */
  .banco-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:18px; cursor:pointer; transition:.18s;
    position:relative; overflow:hidden;
  }
  .banco-card:hover { border-color:var(--ovb-blue); transform:translateY(-2px); box-shadow:0 18px 36px -22px rgba(0,51,102,0.35); }
  .banco-card.selected { border-color:var(--ovb-hot-pink); border-width:2px; padding:17px; }
  .banco-card.selected::before {
    content:"✓"; position:absolute; top:10px; right:12px;
    width:22px; height:22px; border-radius:50%; background:var(--ovb-hot-pink); color:#fff;
    font-size:12px; font-weight:800; display:grid; place-items:center;
  }
  .banco-card .name { font-size:16px; font-weight:800; color:var(--ovb-blue); }
  .banco-card .rates { margin-top:10px; font-size:12px; }
  .banco-card .rate { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid rgba(0,0,0,0.04); }
  .banco-card .rate:last-child { border-bottom:0; }
  .banco-card .rate-lbl { color:var(--ink-soft); }
  .banco-card .rate-val { font-weight:800; color:var(--ovb-blue); font-variant-numeric:tabular-nums; }

  /* Sub-tabs (fijas/variables/mixtas) */
  .sub-tabs {
    display:flex; gap:6px; padding:6px; margin-bottom:18px;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    box-shadow:0 8px 20px -16px rgba(0,51,102,0.18);
  }
  .sub-tabs::-webkit-scrollbar { height:6px; }
  .sub-tabs::-webkit-scrollbar-thumb { background:rgba(0,51,102,0.18); border-radius:99px; }
  .sub-tab {
    flex:0 0 auto; scroll-snap-align:start;
    padding:10px 18px; border-radius:10px; border:0; background:transparent;
    font-size:13px; font-weight:800; letter-spacing:0.04em; color:var(--ink-soft);
    cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:8px;
  }
  .sub-tab:hover { background:rgba(0,51,102,0.05); color:var(--ovb-blue); }
  .sub-tab.active {
    background:linear-gradient(135deg, var(--ovb-blue) 0%, var(--ovb-blue-dark) 100%);
    color:#fff; box-shadow:0 8px 20px -10px rgba(0,51,102,0.45);
  }
  .sub-tab .count {
    background:rgba(255,255,255,0.18); color:inherit;
    padding:1px 8px; border-radius:999px; font-size:11px; font-weight:800;
  }
  .sub-tab:not(.active) .count { background:rgba(0,51,102,0.08); color:var(--ovb-blue); }

  /* Cálculo completo placeholder */
  .placeholder-soon {
    max-width:680px; margin:80px auto; text-align:center;
    background:var(--surface); border:1px solid var(--border);
    border-radius:18px; padding:60px 40px;
  }
  .placeholder-soon .big-ico { font-size:64px; margin-bottom:18px; }
  .placeholder-soon h2 { font-size:28px; font-weight:800; margin:0 0 14px; }
  .placeholder-soon p { font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:520px; margin:0 auto; }
  .placeholder-soon ul { text-align:left; max-width:480px; margin:24px auto 0; padding:0; list-style:none; }
  .placeholder-soon li {
    padding:10px 14px; margin-bottom:8px;
    background:var(--light-grey); border-radius:10px;
    font-size:13px; color:var(--ovb-blue); font-weight:600;
    display:flex; align-items:center; gap:10px;
  }
  .placeholder-soon li::before { content:"⏳"; }

  /* Mobile */
  @media (max-width:900px){
    aside { display:none; }
    main { padding:18px; }
    .kpi .value { font-size:22px; }
    .top-tabs { padding:10px 14px 0; flex-wrap:wrap; }
    .hero-rapido { padding:20px; }
    .hero-rapido h2 { font-size:24px; }
  }