/* ══════════════════════════════════════════════════════════════
   BENTO APP NSS · sección oscura del Home
   Todo el CSS va scopeado bajo .nb-root para no tocar nada del sitio.
   Orbe: asset del CDN, no embebido.
   ══════════════════════════════════════════════════════════════ */
.nb-root{
  --lav-card:#F2F0F7; --purple-d:#472F68; --brand:#7B5EA7;
  --ink:#25213A; --ink-sub:#584E78; --ink-body:#4E4768; --ink-dim:#87809A; --ink-soft:#9d92b5;
  --toggle-off:#ADA7BE;
  --card-shadow:0 30.79px 31.14px rgba(139,127,156,.19);
  /* cuánto sangra el glass bajo el borde del tile. El tile recorta, así que
     este alto se descuenta de lo visible: lo que se compense acá hay que
     sumarlo a .nb-iawrap o la ventana del asistente corta la respuesta. */
  --nb-bleed:34px;
  --fb:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  container-type:inline-size; container-name:nbmock;
  color:#fff; font-family:var(--fb);
}
.nb-root *,.nb-root *::before,.nb-root *::after{ box-sizing:border-box; }

.nb-badge{ display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#C9B6E8; border:1px solid rgba(201,182,232,.3); border-radius:999px;
  padding:5px 12px; margin-bottom:24px; }
.nb-h{ font-size:clamp(23px,2.4vw,32px); font-weight:400; letter-spacing:-.028em;
  line-height:1.28; margin:0 0 42px; max-width:44ch; color:rgba(255,255,255,.45); }
.nb-h b{ font-weight:400; color:#fff; }

.nb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@container nbmock (max-width:900px){ .nb-grid{ grid-template-columns:repeat(2,1fr); } }
@container nbmock (max-width:560px){ .nb-grid{ grid-template-columns:1fr; } }

/* backdrop-filter: sin esto las vigas del fondo cruzaban la card enteras y el
   párrafo quedaba ilegible encima del degradado. El blur difumina lo que hay
   detrás y el velo oscuro baja el brillo de la viga lo justo para que el texto
   recupere contraste, sin perder el efecto vidrio. */
.nb-tile{ background:linear-gradient(rgba(12,8,24,.42), rgba(12,8,24,.42)), rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(22px) saturate(135%); backdrop-filter:blur(22px) saturate(135%);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .22s ease, background .22s ease; }
.nb-tile:hover{ background:linear-gradient(rgba(12,8,24,.34), rgba(12,8,24,.34)), rgba(255,255,255,.07);
  border-color:rgba(183,155,224,.45); }
.nb-w2{ grid-column:span 2; }
@container nbmock (max-width:560px){ .nb-w2{ grid-column:span 1; } }

.nb-head{ padding:20px 20px 16px; }
/* pretítulo de cada tarjeta: nombra el módulo antes del titular.
   Selector de 2 clases a propósito: es un <p> dentro de .nb-head, y
   `.nb-head p` (0,1,1) le ganaría a `.nb-kicker` (0,1,0). */
.nb-head .nb-kicker{ display:flex; align-items:center; gap:8px; margin:0 0 9px;
  font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(201,182,232,.9); max-width:none; }
@media screen and (max-width:767px){ .nb-head .nb-kicker{ font-size:10.5px; } }
.nb-beta{ text-transform:none; letter-spacing:0; font-size:9.5px; font-weight:500;
  line-height:1.5; padding:2px 7px; border-radius:999px;
  background:rgba(201,182,232,.14); border:1px solid rgba(201,182,232,.3); color:#C9B6E8; }
/* balance/pretty reparten las líneas: sin esto quedan viudas ("pedirlo",
   "revisa") solas en la última línea del título. */
/* Mismas métricas que .heading-style-h5 del sitio (22px / 1.2 / -.5px) y el mismo
   salto a 1rem en ≤767px. El color no se copia: heading-style-h5 es oscuro y acá
   el fondo es oscuro. */
.nb-head h3{ margin:0; font-size:22px; font-weight:400; letter-spacing:-.5px;
  line-height:1.2; color:#fff; max-width:24ch; text-wrap:balance; }
/* En móvil sube a 450: iOS siempre rasteriza en escala de grises y el 400
   se ve más delgado que en desktop. Monasans es variable 200–900, así que
   450 es un peso real, no negrita sintética. */
@media screen and (max-width:767px){ .nb-head h3{ font-size:1rem; font-weight:450; } }
/* Mismo tamaño que .text-size-regular del sitio (16px / 400). El color no se
   copia: la clase del sitio usa --secondary600, oscuro, y acá el fondo es oscuro. */
.nb-head p{ margin:9px 0 0; font-size:16px; font-weight:400; line-height:1.5;
  color:rgba(255,255,255,.5); max-width:38ch; text-wrap:pretty; }
@media screen and (max-width:767px){ .nb-head p{ font-size:14px; } }
/* sin overflow propio: el tile ya recorta. Con overflow aquí, el marco se
   recortaba apenas subía en hover y parecía meterse bajo el título. */
.nb-asset{ margin-top:auto; position:relative; }

/* ── marco liquid glass ── */
.nb-glass{
  position:relative; margin:22px 18px calc(var(--nb-bleed) * -1); padding:9px 9px 0;
  container-type:inline-size;
  border-radius:20px 20px 0 0;
  background:linear-gradient(157deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.055) 46%, rgba(183,155,224,.09) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(175%); backdrop-filter:blur(18px) saturate(175%);
  border:1px solid rgba(255,255,255,.20); border-bottom:0;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.50), inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(255,255,255,.10), inset 0 0 30px rgba(183,155,224,.12),
    0 26px 52px -28px rgba(0,0,0,.9);
  transition:transform .34s cubic-bezier(.2,.8,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.nb-glass::before{ content:""; position:absolute; left:0; right:0; top:0; height:52%;
  border-radius:20px 20px 0 0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(168deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 38%, transparent 72%); }
.nb-glass::after{ content:""; position:absolute; left:14%; right:14%; top:-1px; height:1px;
  pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); }
.nb-glass > *{ position:relative; z-index:1; }
.nb-tile:not(.nb-ia):hover .nb-glass{ transform:translateY(-8px); }
  /* la card sigue de largo por debajo del recorte: sangra, no se corta */
.nb-tile:hover .nb-glass{ border-color:rgba(201,182,232,.42); }

/* ── card clara de app ── */
.nb-app{ position:relative; background:linear-gradient(#fff,#F2F0F7 74%);
  border:1px solid rgba(255,255,255,.9); border-radius:12px 12px 0 0;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.55); color:#25213A; padding:22px 18px 64px; }
.nb-apph{ font-size:11px; font-weight:500; margin:0 0 11px; color:#25213A; }
.nb-row{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:10px 0; border-top:1px solid #EDEBF2; font-size:11px; color:#4E4768; position:relative; }
.nb-row:first-of-type{ border-top:0; }
.nb-row em{ font-style:normal; color:#87809A; font-size:10px; }
.nb-num{ font-variant-numeric:tabular-nums; color:#25213A; }
.nb-pill{ font-size:9px; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.nb-ok{ background:#E7F5EC; color:#2F7D4F; }
.nb-wait{ background:#FDF2E0; color:#9A6B1F; }
.nb-new{ background:#EEE8F8; color:#5B3C80; }
/* variantes por clase, no por style inline: el inline le gana al @container
   y en el tile angosto de nómina las 2 columnas desbordaban la card. */
.nb-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.nb-kpis.nb-k1{ grid-template-columns:1fr; }
.nb-kpis.nb-k2{ grid-template-columns:1fr 1fr; }
.nb-kpi{ border:1px solid #EDEBF2; border-radius:6px; padding:12px 12px; background:rgba(255,255,255,.7);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease; }
.nb-kpi i{ display:block; font-style:normal; font-size:8.5px; letter-spacing:.05em;
  text-transform:uppercase; color:#9d92b5; margin-bottom:4px; }
.nb-kpi b{ display:block; font-size:13px; font-weight:400; letter-spacing:-.02em;
  color:#25213A; font-variant-numeric:tabular-nums; }
.nb-kpi u{ display:block; text-decoration:none; font-size:9px; color:#2F7D4F; margin-top:2px; }
.nb-tile:not(.nb-ia):hover .nb-kpi{ transform:translateY(-3px); border-color:#DDD5EC; }
.nb-tile:not(.nb-ia):hover .nb-kpi:nth-child(2){ transition-delay:.05s; }
.nb-tile:not(.nb-ia):hover .nb-kpi:nth-child(3){ transition-delay:.1s; }

.nb-row::after{ content:""; position:absolute; inset:-2px -8px; border-radius:5px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(123,94,167,.13), transparent); opacity:0; }
.nb-tile:not(.nb-ia):hover .nb-row::after{ animation:nbSweep .85s ease forwards; }
.nb-tile:not(.nb-ia):hover .nb-row:nth-of-type(2)::after{ animation-delay:.09s; }
.nb-tile:not(.nb-ia):hover .nb-row:nth-of-type(3)::after{ animation-delay:.18s; }
@keyframes nbSweep{ 0%{opacity:0;transform:translateX(-26%)} 45%{opacity:1} 100%{opacity:0;transform:translateX(26%)} }

/* ── calce sugerido de conciliación: el gesto de conciliar un gasto ──
   Al pasar el mouse el botón se presiona y el panel vira a verde, en paralelo
   con el badge de la fila que ya cambia a "Conciliado" por .nb-swap. */
.nb-match{ margin-top:10px; border:1px solid #E3DCF1; border-radius:8px; padding:10px 11px;
  background:rgba(123,94,167,.045);
  transition:border-color .4s ease, background .4s ease; }
.nb-match-h{ margin:0 0 8px; font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  color:#9d92b5; display:flex; align-items:center; gap:6px; }
.nb-match-score{ font-size:8.5px; letter-spacing:0; text-transform:none; color:#2F7D4F;
  background:#E7F5EC; border-radius:999px; padding:1px 6px; }
.nb-match-doc{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:11px; color:#4E4768; padding-bottom:9px; border-bottom:1px solid #EDEBF2; }
.nb-match-doc em{ display:block; font-style:normal; font-size:10px; color:#87809A; margin-top:2px; }
.nb-match-act{ display:flex; gap:6px; margin-top:9px; }
.nb-btn{ font-size:9.5px; line-height:1; padding:5px 10px; border-radius:5px;
  border:1px solid #E3DCF1; color:#584E78; background:#fff; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), opacity .35s ease; }
.nb-btn-go{ border-color:transparent; background:var(--purple-d); color:#fff; }
.nb-tile:hover .nb-match{ border-color:#BFE3CE; background:rgba(47,125,79,.06); }
.nb-tile:hover .nb-btn-go{ animation:nbPress .55s cubic-bezier(.2,.8,.3,1); }
.nb-tile:hover .nb-btn:not(.nb-btn-go){ opacity:.4; }
@keyframes nbPress{ 0%{transform:none} 34%{transform:scale(.92)} 100%{transform:none} }

.nb-swap{ position:relative; display:inline-block; white-space:nowrap; }
.nb-swap > span{ transition:opacity .3s ease; }
.nb-swap .b{ position:absolute; left:0; top:0; opacity:0; }
.nb-tile:hover .nb-swap .a{ opacity:0; }
.nb-tile:hover .nb-swap .b{ opacity:1; }

.nb-tint-dash::before{ content:""; position:absolute; inset:0;
    border-radius:20px 20px 0 0;
  background:radial-gradient(120% 100% at 80% 0%, rgba(150,190,235,.22), transparent 62%); }
.nb-tint-conc::before{ content:""; position:absolute; inset:0;
    border-radius:20px 20px 0 0;
  background:radial-gradient(120% 100% at 30% 0%, rgba(160,225,195,.18), transparent 62%); }
.nb-tint-imp::before{ content:""; position:absolute; inset:0;
    border-radius:20px 20px 0 0;
  background:radial-gradient(120% 100% at 60% 0%, rgba(240,200,160,.18), transparent 62%); }
.nb-tint-nom::before{ content:""; position:absolute; inset:0;
    border-radius:20px 20px 0 0;
  background:radial-gradient(120% 100% at 40% 0%, rgba(205,175,240,.22), transparent 62%); }
.nb-tint-mail::before{ content:""; position:absolute; inset:0;
    border-radius:20px 20px 0 0;
  background:radial-gradient(120% 100% at 70% 0%, rgba(235,175,205,.18), transparent 62%); }

/* ══ ASISTENTE ══ ciclo 11s (era 15.15s) — ritmo pensado para gente scrolleando
   Intro comprimida: orbe, saludo, subtítulo y caja entran encadenados en 1.5s.
   Tecleo al doble de velocidad. De la carga a la respuesta completa: ~8s.
     orbe .15-.85 · saludo .45-1.05 · subtítulo .75-1.30 · caja 1.00-1.55
     heroOut 1.90-2.45 · sube 1.90-2.50 · teclea 2.50-4.10 · toggle 4.25-4.60
     envío 4.70-5.05 · morph 5.00-5.85 · spark 5.70-6.15 · líneas 5.95-7.90
     chips 7.60-8.10 · outro 9.80-10.70                                        */
/* el alto suma --nb-bleed: esos px los recorta el tile, así que sin sumarlos
   la ventana útil queda 34px corta y la card de respuesta se corta abajo. */
.nb-iawrap{ position:relative; overflow:hidden; border-radius:12px 12px 0 0; height:334px; }
.nb-stage{ position:absolute; top:0; left:0; width:1200px; height:1020px;
  transform-origin:top left; transform:scale(.4); }
@supports (width:1cqw){
  .nb-stage{ transform:scale(calc(100cqw / 1200px)); }
  .nb-iawrap{ height:calc(700px * (100cqw / 1200px) + var(--nb-bleed)); }
}
.nb-bg{ position:absolute; inset:0;
  background:radial-gradient(circle 433px at 984px 786px, #D6C6EE 0%, #F4F0FB 100%); }
.nb-grain{ position:absolute; inset:0; pointer-events:none; opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px; }

/* ── saludo ── */
.nb-hero{ position:absolute; inset:0; }
.nb-orb{ position:absolute; display:block; opacity:0;
  animation:nbOrbIn 11s cubic-bezier(.2,.9,.3,1) infinite; }
@keyframes nbOrbIn{
  0%,1.4%{ opacity:0; transform:scale(.86) } 7.7%,17.3%{ opacity:1; transform:scale(1) }
  22.3%,100%{ opacity:0; transform:scale(1) } }
.nb-greet{ position:absolute; left:0; right:0; top:213px; text-align:center;
  font-size:56px; line-height:1.16; letter-spacing:-.02em; color:#25213A; font-weight:500; opacity:0;
  animation:nbGreet 11s cubic-bezier(.2,.9,.3,1) infinite; }
@keyframes nbGreet{
  0%,4.1%{ opacity:0; transform:translateY(14px) } 9.6%,17.3%{ opacity:1; transform:none }
  22.3%,100%{ opacity:0; transform:translateY(-10px) } }
.nb-sub{ position:absolute; left:0; right:0; top:286px; text-align:center;
  font-size:30px; letter-spacing:-.01em; color:var(--ink-sub); font-weight:500; opacity:0;
  animation:nbSub 11s cubic-bezier(.2,.9,.3,1) infinite; }
@keyframes nbSub{
  0%,6.8%{ opacity:0; transform:translateY(20px); filter:blur(7px) }
  11.8%,17.3%{ opacity:1; transform:none; filter:none }
  22.3%,100%{ opacity:0; transform:translateY(-8px); filter:blur(4px) } }

/* ── shell único: prompt → respuesta ── */
.nb-shell{ position:absolute; left:91.6px; width:1016.8px;
  background:rgba(0,0,0,.01); border-radius:38.7785px;
  box-shadow:var(--card-shadow); opacity:0;
  animation:nbShell 11s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes nbShell{
  0%,9.1%{ opacity:0; top:377px; height:260.354px }
  14.1%,17.3%{ opacity:1; top:377px; height:260.354px }
  22.7%{ opacity:1; top:220px; height:260.354px }   /* centrado: (700−260)/2 */
  45.5%{ opacity:1; top:220px; height:260.354px }
  53.2%{ opacity:1; top:70px; height:560px }        /* centrado: (700−560)/2 */
  89.1%{ opacity:1; top:70px; height:560px }
  97.3%,100%{ opacity:0; top:70px; height:560px } }
.nb-card{ position:absolute; inset:17.038px; border-radius:27.9223px; border:1.09854px solid #fff;
  background:linear-gradient(180deg,#fff 0%,#fff 73.6%,var(--lav-card) 99.8%); overflow:hidden; }

/* ── capa prompt ── */
.nb-prompt{ position:absolute; inset:0; animation:nbPromptOut 11s ease infinite; }
@keyframes nbPromptOut{ 0%,45.5%{ opacity:1 } 48.5%,100%{ opacity:0 } }
.nb-ph{ position:absolute; left:35.2px; top:34px; width:890px; font-size:31px; line-height:1.42;
  letter-spacing:-.012em; font-weight:400; color:var(--ink-dim);
  animation:nbPh 11s linear infinite; }
@keyframes nbPh{ 0%,21%{ opacity:1 } 23%,100%{ opacity:0 } }

/* La línea escrita y el cursor son hermanos: el cursor queda pegado al borde
   derecho de lo ya revelado y se ve durante todo el tecleo. Antes vivía dentro
   del bloque recortado y solo asomaba al final. */
.nb-typed{ position:absolute; left:35.2px; top:34px; width:890px; font-size:33px; line-height:1.42;
  letter-spacing:-.014em; font-weight:400; color:var(--ink-body); display:flex; align-items:baseline; }
.nb-tl{ display:block; overflow:hidden; white-space:nowrap; width:0; flex:none;
  animation:nbType 11s steps(52,end) infinite; }
.nb-tl > span{ display:inline-block; }
@keyframes nbType{ 0%,22.7%{ width:0 } 37.3%,100%{ width:var(--w1,0px) } }
.nb-caret{ display:inline-block; width:2.5px; height:1.02em; flex:none; align-self:center;
  background:var(--purple-d); visibility:hidden;
  animation:nbCaret 11s step-end infinite, nbBlink .9s step-end infinite; }
@keyframes nbCaret{ 0%,21%{ visibility:hidden } 22%,45%{ visibility:visible } 46%,100%{ visibility:hidden } }
@keyframes nbBlink{ 50%{ opacity:0 } }

.nb-spark{ position:absolute; left:35.548px; top:171.719px; width:22.363px; height:22.363px; }
.nb-lbl{ position:absolute; left:71.7px; top:171px; font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap; }
.nb-tog{ position:absolute; left:222px; top:168.6px; width:52.465px; height:28.514px;
  border-radius:14.2568px; background:var(--toggle-off); animation:nbTog 11s linear infinite; }
@keyframes nbTog{ 0%,38.6%{ background:var(--toggle-off) } 41.8%,100%{ background:var(--purple-d) } }
.nb-knob{ position:absolute; left:4.478px; top:3.422px; width:21.67px; height:21.67px;
  border-radius:50%; background:#fff; opacity:.9;
  animation:nbKnob 11s cubic-bezier(.4,1.3,.5,1) infinite; }
@keyframes nbKnob{ 0%,38.6%{ transform:translateX(0) } 41.8%,100%{ transform:translateX(21.3px) } }
.nb-send{ position:absolute; left:892.2px; top:157.6px; width:50.52px; height:50.52px;
  border-radius:50%; background:var(--purple-d); animation:nbSend 11s ease infinite; }
@keyframes nbSend{ 0%,42.7%{ transform:scale(1) } 44.3%{ transform:scale(.86) } 45.9%,100%{ transform:scale(1) } }

/* ── capa respuesta ── */
.nb-ansl{ position:absolute; left:48px; top:40px; right:48px; }
.nb-asp{ width:48px; height:48px; border-radius:14px; background:rgba(123,94,167,.10);
  display:grid; place-items:center; margin-bottom:20px; opacity:0;
  animation:nbSparkIn 11s cubic-bezier(.2,.9,.3,1) infinite; }
.nb-asp svg{ width:30px; height:30px; }
@keyframes nbSparkIn{ 0%,51.8%{ opacity:0; transform:scale(.85) } 55.9%,89.1%{ opacity:1; transform:none }
  97.3%,100%{ opacity:0; transform:scale(.85) } }
.nb-ln{ font-size:23px; line-height:1.5; letter-spacing:-.01em; color:var(--ink-body);
  opacity:0; filter:blur(4px); }
.nb-ln b{ font-weight:700; color:var(--ink); }
.nb-ln .dot{ color:var(--ink-soft); }
.nb-gap{ margin-top:22px; }
.nb-l1{ animation:nbLine1 11s ease infinite; }
.nb-l2{ animation:nbLine2 11s ease infinite; }
.nb-l3{ animation:nbLine3 11s ease infinite; }
.nb-l4{ animation:nbLine4 11s ease infinite; }
.nb-l5{ animation:nbLine5 11s ease infinite; }
.nb-l6{ animation:nbLine6 11s ease infinite; }
@keyframes nbLine1{ 0%,54.1%{opacity:0;filter:blur(4px)} 57.0%,89.1%{opacity:1;filter:none} 97.3%,100%{opacity:0;filter:blur(4px)} }
@keyframes nbLine2{ 0%,57.0%{opacity:0;filter:blur(4px)} 59.9%,89.1%{opacity:1;filter:none} 97.3%,100%{opacity:0;filter:blur(4px)} }
@keyframes nbLine3{ 0%,59.9%{opacity:0;filter:blur(4px)} 62.9%,89.1%{opacity:1;filter:none} 97.3%,100%{opacity:0;filter:blur(4px)} }
@keyframes nbLine4{ 0%,62.9%{opacity:0;filter:blur(4px)} 65.8%,89.1%{opacity:1;filter:none} 97.3%,100%{opacity:0;filter:blur(4px)} }
@keyframes nbLine5{ 0%,65.8%{opacity:0;filter:blur(4px)} 68.8%,89.1%{opacity:1;filter:none} 97.3%,100%{opacity:0;filter:blur(4px)} }
@keyframes nbLine6{ 0%,68.8%{opacity:0;filter:blur(4px)} 71.8%,89.1%{opacity:1;filter:none} 97.3%,100%{opacity:0;filter:blur(4px)} }

.nb-chips{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.nb-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px;
  border-radius:999px; background:rgba(123,94,167,.10); border:1px solid rgba(71,47,104,.16);
  font-size:17px; font-weight:600; color:var(--purple-d); white-space:nowrap; opacity:0;
  animation:nbChip 11s cubic-bezier(.2,.9,.3,1) infinite; }
.nb-chip svg{ width:19px; height:19px; flex:none; }
.nb-chip:nth-of-type(2){ animation-name:nbChip2; }
@keyframes nbChip { 0%,69.1%{opacity:0;transform:translateY(8px)} 73.6%,89.1%{opacity:1;transform:none} 97.3%,100%{opacity:0} }
@keyframes nbChip2{ 0%,70.5%{opacity:0;transform:translateY(8px)} 75.0%,89.1%{opacity:1;transform:none} 97.3%,100%{opacity:0} }

/* ── variante nativa para pantallas angostas ── */
.nb-iamob{ display:none; padding:18px 16px 20px; border-radius:12px 12px 0 0;
  background:radial-gradient(circle 260px at 88% 96%, #D6C6EE 0%, #F4F0FB 100%); }
.nb-iamob .orbm{ width:98px; height:97.9px; margin:0 auto 4px; display:block; }
.nb-iamob .pb{ background:linear-gradient(180deg,#fff 0%,#fff 73.6%,var(--lav-card) 99.8%);
  border:1.1px solid #fff; border-radius:16px; box-shadow:var(--card-shadow); padding:12px 13px; }
.nb-iamob .pbq{ font-size:13px; line-height:1.42; color:var(--ink-body); letter-spacing:-.012em; }
.nb-iamob .pbbar{ display:flex; align-items:center; gap:7px; margin-top:11px; }
.nb-iamob .pbbar .lbl{ font-size:10.5px; font-weight:600; color:var(--ink); }
.nb-iamob .pbbar .tg{ width:30px; height:16.5px; border-radius:9px; background:var(--purple-d); position:relative; }
.nb-iamob .pbbar .tg::after{ content:""; position:absolute; right:2.4px; top:2.4px;
  width:11.7px; height:11.7px; border-radius:50%; background:#fff; opacity:.9; }
.nb-iamob .pbbar .sd{ margin-left:auto; width:27px; height:27px; border-radius:50%;
  background:var(--purple-d); display:grid; place-items:center; }
.nb-iamob .ans{ margin-top:12px; background:rgba(255,255,255,.9); border-radius:12px;
  padding:12px 13px; font-size:12px; line-height:1.5; color:var(--ink-body); }
.nb-iamob .ans b{ font-weight:700; color:var(--ink); }
.nb-iamob .bdg{ display:inline-flex; align-items:center; gap:6px; margin-top:11px;
  padding:5px 11px 5px 9px; border-radius:999px; background:rgba(123,94,167,.10);
  border:1px solid rgba(71,47,104,.16); font-size:10.5px; font-weight:600; color:var(--purple-d); }
.nb-iamob .bdg svg{ width:12px; height:12px; flex:none; }
@container nbmock (max-width:560px){
  .nb-iawrap{ display:none; }
  .nb-iamob{ display:block; }
}
/* La versión angosta también anima, sobre el mismo reloj de 11s.
   El tecleo lo hace el JS carácter a carácter (nss-bento.js), no una máscara:
   acá el texto envuelve en dos líneas y el truco de ancho con steps() solo
   sirve en una línea. El JS se engancha al mismo reloj de 11s, así que
   pregunta, toggle y respuesta siguen coordinados.
   Sin JS el texto se ve completo: el HTML ya lo trae escrito. */
.nb-iamob .pbcaret{ display:inline-block; width:2px; height:1em; margin-left:1px;
  vertical-align:-2px; background:var(--purple-d); visibility:hidden;
  animation:nbBlink .9s step-end infinite; }
.nb-iamob .pbbar .tg{ background:var(--toggle-off); animation:nbmTog 11s linear infinite; }
@keyframes nbmTog{ 0%,38.6%{ background:var(--toggle-off) } 41.8%,89.1%{ background:var(--purple-d) }
  97.3%,100%{ background:var(--toggle-off) } }
.nb-iamob .pbbar .tg::after{ left:2.4px; right:auto; animation:nbmKnob 11s cubic-bezier(.4,1.3,.5,1) infinite; }
@keyframes nbmKnob{ 0%,38.6%{ transform:translateX(0) } 41.8%,89.1%{ transform:translateX(13.5px) }
  97.3%,100%{ transform:translateX(0) } }
.nb-iamob .ans{ opacity:0; animation:nbmAns 11s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes nbmAns{ 0%,49%{ opacity:0; transform:translateY(12px) } 56%,89.1%{ opacity:1; transform:none }
  97.3%,100%{ opacity:0; transform:translateY(12px) } }

/* ── card de API, más oscura ── */
.nb-tile.nb-api{ position:relative; background:#0B0813; border-color:rgba(183,155,224,.30);
  box-shadow:0 0 0 1px rgba(183,155,224,.06), 0 30px 60px -34px rgba(0,0,0,.95); }
.nb-tile.nb-api:hover{ border-color:rgba(183,155,224,.52); }
  /* grilla de puntos sobre la tarjeta completa (no solo el asset), densa.
     Sin mask: el degradado del ::after es el que da el foco en hover. */
  .nb-tile.nb-api::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    border-radius:14px;
    background-image:radial-gradient(rgba(183,155,224,.26) 1px, transparent 1px);
    background-size:11px 11px;
    opacity:.5; transition:opacity .45s ease; }
  .nb-tile.nb-api:hover::before{ opacity:1; }
  .nb-tile.nb-api > *{ position:relative; z-index:1; }
  .nb-tile.nb-api::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
    background:radial-gradient(65% 45% at 50% 0%, rgba(183,155,224,.18), transparent 72%);
    opacity:0; transition:opacity .5s ease; }
  .nb-tile.nb-api:hover::after{ opacity:1; }
.nb-glass.nb-dark{
  background:linear-gradient(157deg, rgba(183,155,224,.13) 0%, rgba(255,255,255,.03) 48%, rgba(183,155,224,.07) 100%);
  border-color:rgba(183,155,224,.24);
  box-shadow:inset 0 1.5px 0 rgba(201,182,232,.42), inset 1px 0 0 rgba(183,155,224,.14),
    inset -1px 0 0 rgba(183,155,224,.10), inset 0 0 34px rgba(123,94,167,.16),
    0 26px 52px -28px rgba(0,0,0,.95); }
.nb-glass.nb-dark::after{ background:linear-gradient(90deg, transparent, rgba(201,182,232,.75), transparent); }
.nb-code{ background:#0F0B1A; border-radius:12px 12px 0 0; overflow:hidden;
  border:1px solid rgba(183,155,224,.14); border-bottom:0; }
.nb-tabs{ display:flex; gap:2px; padding:8px 8px 0; border-bottom:1px solid rgba(183,155,224,.12); }
.nb-tab{ appearance:none; border:0; background:none; cursor:pointer; font-family:var(--fb);
  font-size:11px; color:rgba(255,255,255,.42); padding:7px 13px; border-radius:7px 7px 0 0;
  transition:color .2s ease, background .2s ease; }
.nb-tab:hover{ color:rgba(255,255,255,.72); }
.nb-tab[aria-selected="true"]{ color:#fff; background:rgba(183,155,224,.12); }
.nb-cbody{ padding:14px 16px 16px; font-family:'SF Mono',Menlo,monospace;
  font-size:11px; line-height:1.75; color:#C9C4D6; overflow-x:auto; }
/* el código no se recorta en pantallas angostas: scrollea dentro de su caja */
.nb-cbody pre, .nb-cout pre{ margin:0; overflow-x:auto; }
.nb-cbody[hidden]{ display:none; }
.nb-kw{ color:#C792EA; } .nb-str{ color:#C3E88D; } .nb-fn{ color:#82AAFF; } .nb-cnum{ color:#F78C6C; }
.nb-crun{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-top:1px solid rgba(183,155,224,.12); }
.nb-crun .meta{ font-family:'SF Mono',Menlo,monospace; font-size:9.5px; color:rgba(255,255,255,.34); }
.nb-runbtn{ display:inline-flex; align-items:center; gap:7px; background:#fff; color:#16111F;
  border:0; border-radius:999px; padding:6px 14px; font-family:var(--fb);
  font-size:11px; font-weight:600; cursor:pointer; transition:transform .2s ease; }
.nb-tile.nb-api:hover .nb-runbtn{ transform:translateY(-1px); }
.nb-cout{ padding:0 16px 14px; opacity:0; transform:translateY(4px);
  transition:opacity .38s ease, transform .38s ease; }
.nb-tile.nb-api:hover .nb-cout{ opacity:1; transform:none; }
.nb-cout pre{ margin:0; font-family:'SF Mono',Menlo,monospace; font-size:10px; line-height:1.7;
  color:#8E86A6; border-left:2px solid rgba(183,155,224,.3); padding-left:11px; }

.nb-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:34px; }
.nb-cta{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#25213A;
  font-size:13px; padding:11px 20px; border-radius:999px; text-decoration:none; }
.nb-foot span{ font-size:12.5px; color:rgba(255,255,255,.45); }

/* sin nombre: resuelve contra .nb-glass, no contra .nb-root */
@container (max-width:330px){
  .nb-kpis, .nb-kpis.nb-k2{ grid-template-columns:1fr; }
  .nb-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; }
  .nb-row > *{ min-width:0; }
  .nb-row > :first-child{ flex:1 1 100%; }
  .nb-match-doc{ flex-wrap:wrap; gap:2px 8px; }
  .nb-match-doc > :first-child{ flex:1 1 100%; }
}

/* ── movimiento reducido ──
   Al matar las animaciones hay que reponer a mano TODO lo que solo existía
   dentro de los keyframes. .nb-shell nace en opacity:0 y sin top ni height
   (los ponía nbShell), así que sin esto la card colapsa y el prompt y la
   respuesta quedan visibles a la vez, encimados arriba.
   Estado elegido: el desenlace — la respuesta ya escrita. */
@media (prefers-reduced-motion: reduce){
  .nb-root *{ animation:none !important; transition:none !important; }

  /* la card, en su geometría de respuesta */
  .nb-shell{ opacity:1 !important; top:70px !important; height:560px !important; }

  /* fuera lo que en ese momento ya no está en pantalla */
  .nb-hero{ opacity:0 !important; }
  .nb-prompt{ opacity:0 !important; }
  .nb-caret{ visibility:hidden !important; }

  /* la respuesta, completa */
  .nb-asp{ opacity:1 !important; transform:none !important; }
  .nb-ln{ opacity:1 !important; filter:none !important; }
  .nb-chips{ opacity:1 !important; transform:none !important; }

  /* estados finales de los controles, por si el prompt se hiciera visible */
  .nb-tl{ width:auto !important; }
  .nb-ph{ opacity:0 !important; }
  .nb-tog{ background:var(--purple-d) !important; }
  .nb-knob{ transform:translateX(21.3px) !important; }

  /* los swaps de las otras tarjetas se quedan en su estado inicial */
  .nb-swap .a{ opacity:1 !important; }
  .nb-swap .b{ opacity:0 !important; }

  /* el fondo deja de seguir al scroll y se queda en su posición de diseño.
     Va aparte porque el overlay es hermano del embed, no vive en .nb-root */
  .app-bento_overlay::before{ transform:none !important; }
}
/* ══════════════════════════════════════════════════════════════
   OVERLAY "VIGAS" (Trío Afinado) · sección App del Home
   El div .app-bento_overlay (componente App NSS — Bento) es una banda
   anclada ARRIBA de la sección, no un forro completo: la composición no
   se estira con el alto de la sección y queda idéntica al prototipo.
   La máscara la funde con el morado base. Este CSS viene del embed, así
   que el canvas del Designer no lo pinta (preview y publicado sí).
   La opacidad NO se declara acá: se maneja en el Designer sobre el div.
   ══════════════════════════════════════════════════════════════ */
.app-bento_overlay{
  position:absolute; top:0; left:0; right:0; bottom:auto; height:740px;
  z-index:-1; pointer-events:none; background-color:transparent;
  --vg-max:240px;
  /* la capa de luz sobresale por abajo: se recorta acá */
  overflow:hidden;
  background-image:
    radial-gradient(88% 96% at 6% 97%, rgba(0,0,0,.93) 0%, transparent 62%),
    linear-gradient(115deg,#080512 0%,#171030 55%,#0a0716 100%);
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 56%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 56%,transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}

/* La LUZ (vigas + los dos focos de arriba a la derecha) va en su propia capa
   para poder moverla con el scroll. Mover la capa es trabajo de compositor;
   animar background-position repintaría los nueve degradados con sus blends
   en cada cuadro. El blend queda igual: los layers se mezclan en screen entre
   ellos y el conjunto entra en screen sobre la base.

   La capa SOLO viaja hacia arriba (--vg-k va de -1 a 0), así el borde de
   arriba siempre queda tapado. Y para que el viaje no deje la mitad de abajo
   sin vigas, la capa sobresale por abajo EXACTAMENTE lo que mide el viaje
   (bottom:-1 × --vg-max): en el extremo su borde inferior cae justo en el
   borde de la banda, así que siempre hay luz hasta abajo y el único
   desvanecido es el de la banda, el de siempre. */
.app-bento_overlay::before{
  content:""; position:absolute; inset:0 0 calc(-1 * var(--vg-max)) 0; pointer-events:none;
  background-image:
    linear-gradient(115deg, transparent 52%, rgba(244,236,255,0) 53.2%, rgba(244,236,255,.62) 55.4%, rgba(212,176,255,.5) 57.6%, transparent 59.6%),
    linear-gradient(115deg, transparent 42%, rgba(150,104,224,.32) 49%, rgba(118,88,178,.24) 57%, transparent 65%),
    linear-gradient(115deg, transparent 33.6%, rgba(201,182,232,.28) 34.4%, rgba(201,182,232,.09) 36.6%, transparent 38%),
    linear-gradient(115deg, transparent 71.5%, rgba(146,94,226,.22) 72.3%, rgba(146,94,226,.07) 75%, transparent 76.8%),
    radial-gradient(30% 40% at 92% 0%, rgba(214,96,255,.30) 0%, transparent 70%),
    radial-gradient(44% 58% at 87% 5%, rgba(196,136,255,.40) 0%, transparent 70%);
  background-size:cover; background-repeat:no-repeat;
  background-blend-mode:screen,screen,screen,screen,screen,screen;
  mix-blend-mode:screen;
  transform:translate3d(0, calc(var(--vg-k, 0) * var(--vg-max)), 0);
  will-change:transform;
}

/* El GRANO va arriba de todo y no se mueve.
   No es un detalle de orden: en `overlay` contra un fondo casi negro el grano
   se apaga (overlay con backdrop oscuro ≈ backdrop). Donde de verdad se ve es
   sobre las vigas, así que si queda debajo de la luz desaparece entero. */
.app-bento_overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; background-repeat:repeat;
  mix-blend-mode:overlay;
}

/* ≤991px (tablet y mobile): el titular ocupa casi todo el ancho, así que las
   vigas no pueden cruzarlo. Velo VERTICAL: transparente en el espacio vacío
   de arriba (ahí brillan las vigas) y oscuro exactamente donde corre el texto.
   El párrafo gris (.42 de alpha) es el primero en morir sobre una viga. */
@media (max-width:991px){
  /* El velo vertical que protege el titular baja a la capa base, debajo de la
     luz: así sigue oscureciendo el fondo igual que antes y no tiene que viajar
     con las vigas. Lo que hacía por arriba —apagar la luz sobre el texto— lo
     hace ahora la máscara de la propia capa de luz, con el mismo perfil. */
  .app-bento_overlay{
    height:600px; --vg-max:100px;
    background-image:
      linear-gradient(180deg, rgba(6,4,11,0) 0%, rgba(6,4,11,0) 20%, rgba(6,4,11,.55) 36%, rgba(6,4,11,.8) 55%, rgba(6,4,11,.88) 100%),
      radial-gradient(88% 96% at 6% 97%, rgba(0,0,0,.93) 0%, transparent 62%),
      linear-gradient(115deg,#080512 0%,#171030 55%,#0a0716 100%);
    background-size:cover,cover,cover;
    background-repeat:no-repeat,no-repeat,no-repeat;
  }
  .app-bento_overlay::before{
    background-image:
      linear-gradient(115deg, transparent 52%, rgba(244,236,255,0) 53.2%, rgba(244,236,255,.38) 55.4%, rgba(212,176,255,.3) 57.6%, transparent 59.6%),
      linear-gradient(115deg, transparent 42%, rgba(150,104,224,.20) 49%, rgba(118,88,178,.15) 57%, transparent 65%),
      linear-gradient(115deg, transparent 33.6%, rgba(201,182,232,.16) 34.4%, rgba(201,182,232,.05) 36.6%, transparent 38%),
      linear-gradient(115deg, transparent 71.5%, rgba(146,94,226,.14) 72.3%, rgba(146,94,226,.05) 75%, transparent 76.8%),
      radial-gradient(30% 40% at 92% 0%, rgba(214,96,255,.20) 0%, transparent 70%),
      radial-gradient(44% 58% at 87% 5%, rgba(196,136,255,.26) 0%, transparent 70%);
    /* El complemento del velo: donde antes lo tapaba, ahora la luz no llega.
       En px y no en %, porque la capa mide 100px más que la banda y los % se
       correrían. La meseta opaca (120px) es más alta que el viaje (100px), así
       que arriba de la banda nunca se pierde luz por moverse. Termina plana:
       el desvanecido de abajo lo hace la máscara de la banda. */
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 120px,rgba(0,0,0,.40) 216px,rgba(0,0,0,.17) 330px,rgba(0,0,0,.09) 480px,rgba(0,0,0,.09) 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 120px,rgba(0,0,0,.40) 216px,rgba(0,0,0,.17) 330px,rgba(0,0,0,.09) 480px,rgba(0,0,0,.09) 100%);
  }
}

/* Eco de la misma luz saliendo por abajo, detrás del CTA. Un cuarto de la
   intensidad, máscara invertida: cierra la sección sin competir con nada. */
.section_app-home-dark.is-full-bleed::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:460px;
  z-index:-1; pointer-events:none; mix-blend-mode:screen;
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(190,140,255,.14) 33%, rgba(190,140,255,.04) 37%, transparent 40%),
    linear-gradient(115deg, transparent 52%, rgba(150,104,224,.10) 55%, transparent 60%),
    radial-gradient(60% 80% at 88% 100%, rgba(120,74,210,.16) 0%, transparent 70%);
  -webkit-mask-image:linear-gradient(0deg,#000 30%,transparent 100%);
          mask-image:linear-gradient(0deg,#000 30%,transparent 100%);
}
@media (max-width:767px){
  .section_app-home-dark.is-full-bleed::before{ height:320px; }
}

/* ══════════════════════════════════════════════════════════════
   IDIOMA · el embed es un solo nodo compartido por todos los locales,
   así que no se puede traducir por locale desde el MCP. Solución: las dos
   versiones viven en el markup y se intercambian por el lang que Webflow
   pone en <html> (es / en / pt / zh). La app existe solo en español e
   inglés, así que todo locale no-español muestra el inglés.
   ══════════════════════════════════════════════════════════════ */
.nb-root [data-nb="en"]{ display:none; }
html:not([lang="es"]) .nb-root [data-nb="es"]{ display:none; }
html:not([lang="es"]) .nb-root [data-nb="en"]{ display:inline; }