/* ══════════════════════════════════════════════════════════════
   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; }
}
/* ══════════════════════════════════════════════════════════════
   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;
  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"),
    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%),
    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:180px 180px,cover,cover,cover,cover,cover,cover,cover,cover;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-blend-mode:overlay,screen,screen,screen,screen,screen,screen,normal,normal;
  -webkit-mask-image:linear-gradient(180deg,#000 56%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 56%,transparent 100%);
}

/* ≤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){
  .app-bento_overlay{
    height:600px;
    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"),
      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%),
      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%),
      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:180px 180px,cover,cover,cover,cover,cover,cover,cover,cover,cover;
    background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-blend-mode:overlay,normal,screen,screen,screen,screen,screen,screen,normal,normal;
  }
}

/* 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; }