/* ============================================================
   GESTIÓN INTELIGENTE — HOME v3 (lenguaje visual nuevo)
   ------------------------------------------------------------
   Se carga DESPUÉS de tokens.css y app.css, y SOLO en la home.
   Todo lo nuevo va con prefijo .n- para no pisar los componentes
   compartidos que también usa /diagnostico (.btn, .field, .caso,
   .plan, .faq, .dock, .reveal, el switch de tema).

   Cero colores crudos: superficie, texto, acento y degradés salen
   de tokens.css, así el tema claro sigue funcionando.
   El diseño de referencia venía en violeta y Arial; acá esa capa
   se reemplaza por el acento y las tipografías de la marca.
   ============================================================ */

:root{
  --n-gutter:6%;
  --n-head:64px;
}
@media(min-width:900px){:root{--n-gutter:7%;--n-head:84px}}

/* ─────────── barra de progreso de lectura ─────────── */
.n-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:70;
  background:var(--gradient-iris-line);transform:scaleX(0);transform-origin:left;
  will-change:transform;pointer-events:none}

/* ─────────── encabezado de sección (rótulo + nota a la derecha) ─────────── */
.n-sec-top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-8)}
.n-sec-top .mono{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mut);text-align:right}
@media(max-width:700px){.n-sec-top .mono{display:none}}

/* ════════════════════════════════════════════════════════════
   HERO
   Izquierda: el titular. Derecha: la pila 2.5D — consulta que
   entra, asistente que contesta, próximo paso organizado.
   ════════════════════════════════════════════════════════════ */
.n-hero{position:relative;overflow:hidden;isolation:isolate;
  padding-block:var(--sp-10) var(--sp-8)}
@media(min-width:980px){.n-hero{padding-block:var(--sp-16) var(--sp-12)}}

.n-hero-grid{position:absolute;inset:0 0 0 45%;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);
  mask-image:linear-gradient(90deg,transparent,#000);
  transform:translateY(var(--layer-back,0))}

.n-hero-wrap{display:grid;gap:var(--sp-10)}
@media(min-width:980px){.n-hero-wrap{grid-template-columns:1.05fr .95fr;
  align-items:center;gap:var(--sp-8)}}

.n-hero h1{margin-bottom:var(--sp-5);text-wrap:balance}
.n-hero .lead{max-width:44ch;margin-bottom:var(--sp-6)}
.n-hero-cta{display:flex;flex-direction:column;gap:var(--sp-3)}
@media(min-width:560px){.n-hero-cta{flex-direction:row;align-items:center;flex-wrap:wrap}}
.n-hero-nota{margin-top:var(--sp-5);font-size:var(--step--2);color:var(--text-mut)}

/* ─── la pila ─── */
.n-stack{position:relative;width:min(390px,100%);margin-inline:auto;
  transform:translateY(var(--layer-front,0))}
@media(min-width:980px){.n-stack{margin-inline:auto 0;transform:translateY(var(--layer-front,0)) rotate(-2.5deg)}}
.n-stack-rotulo{display:block;text-align:center;margin-bottom:var(--sp-4);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-mut)}

.n-entrada{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradient-iris) border-box;
  border:1px solid transparent;box-shadow:0 14px 30px rgba(0,0,0,.18)}
@media(min-width:980px){.n-entrada{transform:translateX(-26px) rotate(-1.5deg)}}
.n-entrada svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7}
.n-entrada b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mut);font-weight:400}
.n-entrada p{margin:0;font-size:var(--step--1);line-height:1.4}
.n-entrada time{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;color:var(--text-mut)}

.n-hilo{width:1px;height:26px;margin-inline:auto;background:var(--gradient-iris-deep)}

.n-ventana{border-radius:var(--r-lg);overflow:hidden;border:1px solid transparent;
  background:linear-gradient(180deg,var(--surface-2),var(--surface)) padding-box,var(--gradient-iris) border-box;
  box-shadow:0 30px 70px rgba(0,0,0,.28)}
@media(min-width:980px){.n-ventana{transform:translateX(10px) rotate(3deg)}}
.n-ven-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);background:var(--scrim)}
.n-ven-bar img{width:34px;height:34px;flex:0 0 34px;border-radius:9px;object-fit:contain}
.n-ven-bar b{display:block;font-size:var(--step--1);letter-spacing:-.02em}
.n-ven-bar span{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.56rem;letter-spacing:.1em;color:var(--text-mut)}
.n-ven-vivo{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;color:var(--text-mut)}

.n-ven-chat{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.n-hora{text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.54rem;letter-spacing:.14em;color:var(--text-mut)}
.n-burb{max-width:88%;padding:var(--sp-3) var(--sp-4);border-radius:14px;
  font-size:var(--step--1);line-height:1.5;margin:0}
.n-burb.cliente{align-self:flex-end;background:var(--surface-2);
  border:1px solid var(--border);border-bottom-right-radius:4px}
.n-burb.asis{align-self:flex-start;background:var(--bot-bg);
  border:1px solid var(--bot-border);border-bottom-left-radius:4px}
.n-tick{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:5px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.54rem;color:var(--text-mut)}
.n-ven-pie{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:var(--scrim);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;color:var(--text-mut)}

.n-salida{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);
  border-radius:var(--r-md);border:1px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradient-iris) border-box;
  box-shadow:0 15px 40px rgba(0,0,0,.2)}
@media(min-width:980px){.n-salida{transform:translateX(24px) rotate(-1deg)}}
.n-salida-ok{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:800}
.n-salida b{display:block;font-size:var(--step--1);letter-spacing:-.02em}
.n-salida span{display:block;font-size:var(--step--2);color:var(--text-mut)}
.n-sim{display:block;text-align:center;margin-top:var(--sp-4);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.54rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut)}

/* ════════════════════════════════════════════════════════════
   FRANJA DE PÚBLICO / CONDICIONES
   ════════════════════════════════════════════════════════════ */
.n-franja{border-block:1px solid var(--border);background:var(--surface)}
.n-franja-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6);
  padding-block:var(--sp-5)}
.n-franja-rot{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut);
  flex:1 0 100%;max-width:100%}
@media(min-width:900px){.n-franja-rot{flex:0 0 150px}}
.n-franja-it{display:flex;flex-direction:column;gap:2px}
.n-franja-it b{font-size:var(--step-0);letter-spacing:-.03em;
  background:var(--gradient-iris-line);background-size:340% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.n-franja-it:nth-of-type(2) b{background-position:33% 50%}
.n-franja-it:nth-of-type(3) b{background-position:66% 50%}
.n-franja-it:nth-of-type(4) b{background-position:100% 50%}
.n-franja-it span{font-size:var(--step--2);color:var(--text-mut)}

/* ════════════════════════════════════════════════════════════
   RELATO CON SCROLL (sticky): del mensaje a la acción
   ════════════════════════════════════════════════════════════ */
.n-relato{position:relative;padding:0;height:250vh}
.n-relato-fijo{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding-block:var(--sp-10)}
.n-relato-cols{display:grid;gap:var(--sp-8)}
@media(min-width:980px){.n-relato-cols{grid-template-columns:1fr 1fr;gap:7%;align-items:center}}
.n-etapa{margin-top:var(--sp-6);min-height:150px;animation:n-aparecer .3s var(--ease)}
.n-etapa h3{font-size:var(--step-1);margin-bottom:var(--sp-2)}
.n-etapa p{color:var(--text-mut);font-size:var(--step-0);line-height:1.55;max-width:42ch}
.n-etapa-rot{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)}
@keyframes n-aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.n-pasos{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);max-width:320px}
.n-pasos button{flex:1;text-align:left;background:none;border:0;padding:var(--sp-2) 0;
  min-height:44px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.1em;color:var(--text-mut)}
.n-pasos button i{display:block;height:2px;margin-top:8px;border-radius:2px;background:var(--border-strong)}
.n-pasos button.on{color:var(--text)}
.n-pasos button.on i{background:var(--gradient-iris-line)}

.n-proc{position:relative;border-radius:var(--r-lg);padding:0 var(--sp-5) var(--sp-6);
  border:1px solid transparent;
  background:linear-gradient(180deg,var(--surface-2),var(--surface)) padding-box,var(--gradient-iris) border-box}
@media(min-width:980px){.n-proc{transform:perspective(1200px) rotateY(-3deg)}}
.n-proc-top{display:flex;align-items:center;gap:var(--sp-3);padding-block:var(--sp-4);
  margin-bottom:var(--sp-4);border-bottom:1px solid var(--border);font-size:var(--step--1)}
.n-proc-top img{width:28px;height:28px;border-radius:7px;object-fit:contain}
.n-proc-top .mono{margin-left:auto;font-size:.56rem}
.n-fila{display:flex;align-items:center;gap:var(--sp-4);opacity:.35;
  transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.n-fila.on{opacity:1;transform:none}
.n-fila-n{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--accent);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem}
.n-fila small{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.54rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.n-fila h4{margin:3px 0;font-size:var(--step--1);letter-spacing:-.02em}
.n-fila p{margin:0;font-size:var(--step--2);color:var(--text-mut)}
.n-fila-linea{width:1px;height:30px;margin:6px 0 6px 17px;background:var(--border-strong)}
.n-proc-pie{margin-top:var(--sp-5);text-align:center;font-size:var(--step--2);color:var(--text-mut)}

/* ════════════════════════════════════════════════════════════
   DEMO POR RUBRO (usa .tab/.panel de app.css para la conmutación)
   ════════════════════════════════════════════════════════════ */
.n-demo-panel{display:grid;gap:var(--sp-8);padding-top:var(--sp-6)}
@media(min-width:980px){.n-demo-panel{grid-template-columns:.9fr 1.1fr;gap:8%}}
.n-demo-txt h3{font-size:var(--step-2);line-height:1.1;margin:var(--sp-4) 0}
.n-demo-txt p{color:var(--text-mut);font-size:var(--step-0);line-height:1.55;max-width:40ch}
.n-demo-play{margin-top:var(--sp-6)}
.n-demo-aviso{display:block;margin-top:var(--sp-4);font-size:var(--step--2);
  color:var(--text-mut);max-width:40ch}
.n-demo-chat{display:flex;flex-direction:column;min-height:480px;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid transparent;
  background:linear-gradient(180deg,var(--surface-2),var(--surface)) padding-box,var(--gradient-iris) border-box}
.n-demo-msgs{flex:1;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5)}
.n-demo-msgs .n-burb{max-width:86%;font-size:var(--step-0);animation:n-aparecer .25s var(--ease)}
.n-demo-vacio{margin:auto;text-align:center;color:var(--text-mut)}
.n-demo-vacio b{display:block;font-size:var(--step-0);color:var(--text);font-weight:600}
.n-demo-vacio span{display:block;margin-top:6px;font-size:var(--step--1)}
.n-demo-res{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--accent);background:var(--accent-soft);animation:n-aparecer .3s var(--ease)}
.n-demo-res b{display:block;font-size:var(--step--1)}
.n-demo-res span{display:block;font-size:var(--step--1);color:var(--text-mut)}
.n-demo-res small{display:block;margin-top:5px;font-size:var(--step--2);color:var(--text-mut)}
.n-demo-pie{display:flex;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;color:var(--text-mut)}
.n-etiq{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.1em;border:1px solid var(--border-strong);border-radius:4px;
  padding:2px 7px;color:var(--text-mut)}

/* ════════════════════════════════════════════════════════════
   PANEL CLARO — el contraste editorial del diseño nuevo.
   Sin foto de stock: el bloque se sostiene con tipografía.
   ════════════════════════════════════════════════════════════ */
.n-luz{display:grid;padding:0;border-block:1px solid var(--border)}
@media(min-width:980px){.n-luz{grid-template-columns:1fr 1fr;min-height:640px}}
.n-luz-marca{position:relative;display:grid;place-items:center;overflow:hidden;
  padding:var(--sp-16) var(--n-gutter);background:var(--surface-2)}
.n-luz-marca::before{content:"";position:absolute;inset:0;background:var(--gradient-iris);opacity:.10}
.n-luz-marca::after{content:"";position:absolute;top:50%;left:50%;width:min(360px,70%);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--gradient-iris);
  filter:blur(80px);opacity:.28}
.n-luz-marca img{position:relative;width:clamp(120px,26vw,190px);height:auto;border-radius:var(--r-lg)}
.n-luz-frase{position:relative;margin-top:var(--sp-6);text-align:center;max-width:26ch}
.n-luz-frase span{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut)}
.n-luz-frase p{margin-top:var(--sp-3);font-size:var(--step-1);letter-spacing:-.03em;line-height:1.15}
/* El panel claro es claro en los dos temas: es el contraste de la sección.
   Los colores van fijos acá porque no son superficie de la app, son la pieza. */
.n-luz-txt{background:#EDEAF4;color:#1B1726;padding:var(--sp-12) var(--n-gutter)}
@media(min-width:980px){.n-luz-txt{padding-block:var(--sp-16)}}
.n-luz-txt .eyebrow span{color:#5B3E86}
.n-luz-txt .eyebrow::before{background:linear-gradient(90deg,#2C43C4,#6A2EBE,#B51E72)}
.n-luz-txt h2{font-size:var(--step-2);letter-spacing:-.05em;margin-bottom:var(--sp-5);
  color:#1B1726;-webkit-text-fill-color:#1B1726;background:none}
.n-luz-txt h2 em{font-style:normal;color:#6A2EBE;-webkit-text-fill-color:#6A2EBE}
.n-luz-txt p{color:#4A4356;font-size:var(--step-0);line-height:1.6;max-width:48ch}
.n-luz-txt p + p{margin-top:var(--sp-4)}
.n-luz-lista{margin-top:var(--sp-8);display:grid}
.n-luz-lista div{display:flex;gap:var(--sp-4);padding:var(--sp-3) 0;
  border-top:1px solid rgba(27,23,38,.14);font-size:var(--step--1)}
.n-luz-lista span{flex:0 0 74px;color:#6A2EBE;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.n-luz-lista b{color:#1B1726;font-weight:600}
.n-luz-cta{margin-top:var(--sp-8);display:inline-flex}
.n-luz-txt .btn-ghost{color:#1B1726;border-color:rgba(27,23,38,.35)}
.n-luz-txt .btn-ghost:hover{background:rgba(27,23,38,.06);border-color:#1B1726}
.n-luz-pie{margin-top:var(--sp-4);font-size:var(--step--2);color:#6B6478}

/* ════════════════════════════════════════════════════════════
   FILAS NUMERADAS (el proceso, la forma de trabajar)
   ════════════════════════════════════════════════════════════ */
.n-filas{margin-top:var(--sp-8)}
.n-filas-row{display:grid;grid-template-columns:34px 1fr;gap:var(--sp-2) var(--sp-4);
  padding-block:var(--sp-6);border-top:1px solid var(--border);align-items:start}
@media(min-width:900px){.n-filas-row{grid-template-columns:60px 1fr 1fr;gap:var(--sp-6)}}
.n-filas-row .mono{color:var(--accent);font-size:.68rem;padding-top:5px}
.n-filas-row h3{font-size:var(--step-1);letter-spacing:-.03em}
.n-filas-row p{grid-column:2;font-size:var(--step--1);color:var(--text-mut);line-height:1.6;max-width:52ch}
@media(min-width:900px){.n-filas-row p{grid-column:3}}

/* ════════════════════════════════════════════════════════════
   FAQ a dos columnas
   ════════════════════════════════════════════════════════════ */
.n-faq{display:grid;gap:var(--sp-8)}
@media(min-width:980px){.n-faq{grid-template-columns:.75fr 1.25fr;gap:10%}}
.n-faq .faq{margin-top:0}

/* ════════════════════════════════════════════════════════════
   CONTACTO — el bloque grande de cierre
   ════════════════════════════════════════════════════════════ */
.n-contacto{position:relative;overflow:hidden;border-radius:var(--r-lg);
  margin-inline:var(--sp-4);padding:var(--sp-10) var(--sp-6) var(--sp-12);
  background:var(--gradient-iris-deep);color:#fff;isolation:isolate}
@media(min-width:900px){.n-contacto{margin-inline:3%;padding:var(--sp-12) var(--sp-10)}}
.n-contacto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 90% at 80% 10%,rgba(255,255,255,.18),transparent 60%)}
.n-contacto .mono,.n-contacto .eyebrow span{color:rgba(255,255,255,.72)}
.n-contacto .eyebrow::before{background:rgba(255,255,255,.6)}
.n-contacto h2{font-size:var(--step-2);letter-spacing:-.05em;line-height:1.05;
  margin-block:var(--sp-6) var(--sp-5);color:#fff;-webkit-text-fill-color:#fff;background:none}
.n-contacto h2 span{color:rgba(255,255,255,.6);-webkit-text-fill-color:rgba(255,255,255,.6)}
.n-contacto>p{color:rgba(255,255,255,.86);font-size:var(--step-0);max-width:46ch;line-height:1.6}
.n-contacto-cols{display:grid;gap:var(--sp-8);margin-top:var(--sp-8)}
@media(min-width:980px){.n-contacto-cols{grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:start}}
/* La tarjeta del formulario vuelve al fondo de la app: los campos tienen que
   leerse como campos, no como texto sobre el degradé. */
.n-contacto .form-card{margin-top:0;background:var(--bg);border-color:transparent;
  background-image:none;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.n-contacto .zona{margin-top:0;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.n-contacto .zona p{color:rgba(255,255,255,.86)}
.n-contacto .zona b{color:#fff}
.n-contacto .zona svg{stroke:#fff}
.n-contacto-nota{margin-top:var(--sp-5);font-size:var(--step--2);color:rgba(255,255,255,.72)}

/* ════════════════════════════════════════════════════════════
   MENÚ EN CELULAR
   ════════════════════════════════════════════════════════════ */
.n-menu{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;
  border-radius:var(--r-pill);border:1px solid var(--outline);background:transparent;color:var(--text)}
.n-menu svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.n-menu .i-x{display:none}
.n-menu[aria-expanded="true"] .i-x{display:block}
.n-menu[aria-expanded="true"] .i-burger{display:none}
@media(min-width:860px){.n-menu{display:none}}
@media(max-width:859px){
  .nav-links.abierto{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:var(--sp-5);padding:var(--sp-6) var(--sp-5);
    background:var(--surface);border-bottom:1px solid var(--border);
    box-shadow:0 20px 40px rgba(0,0,0,.25)}
  .nav-links.abierto a{font-size:var(--step-0);color:var(--text)}
}

/* ════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   ════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .n-stack,.n-hero-grid,.n-proc,.n-entrada,.n-ventana,.n-salida{transform:none !important}
  .n-fila{opacity:1;transform:none}
  .n-relato{height:auto}
  .n-relato-fijo{position:static;min-height:0}
}

/* ════════════════════════════════════════════════════════════
   AJUSTES DE LA REVISIÓN VISUAL (capturas del 17-09-2026)
   ════════════════════════════════════════════════════════════ */

/* 1 · La demo por rubro tiene que quedar en dos columnas.
   .panel.on (dos clases) le gana en especificidad a .n-demo-panel (una),
   así que el display:grid necesita las dos clases para imponerse. */
.panel.on.n-demo-panel{display:grid}

/* 2 · El titular del hero de este sitio es una pregunta larga, no dos
   palabras como en el diseño de referencia. A tamaño --step-3 se comía la
   pantalla entera y los botones quedaban abajo del pliegue. */
.n-hero h1{font-size:clamp(2.35rem,1.35rem + 3.3vw,4.1rem);line-height:1.02}
@media(min-width:980px){.n-hero .lead{font-size:var(--step-0);max-width:46ch}}

/* 3 · Los títulos de cada rubro, a escala de columna y no de sección. */
.n-demo-txt h3{font-size:clamp(1.65rem,1.1rem + 1.7vw,2.5rem)}

/* 4 · En celular el relato deja de ser una sección fija de 250vh: las tres
   etapas se leen una abajo de la otra. La clase la pone app.js. */
.n-relato.n-relato-lista{height:auto;padding-block:var(--sp-16)}
.n-relato-lista .n-relato-fijo{position:static;min-height:0;padding-block:0}
.n-etapa-item + .n-etapa-item{margin-top:var(--sp-6);padding-top:var(--sp-6);
  border-top:1px solid var(--border)}
.n-relato-lista .n-etapa{min-height:0}
.n-etapa-item h3{font-size:var(--step-1);margin-bottom:var(--sp-2)}
.n-etapa-item p{color:var(--text-mut);font-size:var(--step-0);line-height:1.55}

/* 5 · El tilde del "próximo paso" tiene que leerse: a tamaño de texto normal
   sobre el fondo suave del acento quedaba casi invisible. */
.n-salida-ok{font-size:1.05rem;font-weight:800;line-height:1;
  border:1px solid var(--accent);color:var(--accent)}

/* ════════════════════════════════════════════════════════════
   AUDITORÍA CONTRA EL DISEÑO DE REFERENCIA (18-09-2026)
   Las piezas del diseño nuevo que habían quedado afuera.
   ════════════════════════════════════════════════════════════ */

/* 1 · Saltar al contenido: el primer tabulador de la página. Fuera de
   pantalla hasta que recibe foco. */
.skip-link{position:fixed;top:-100px;left:var(--sp-4);z-index:100;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-weight:700;
  text-decoration:none;transition:top .16s var(--ease)}
.skip-link:focus{top:var(--sp-3)}

/* 2 · Flechas de los botones y links. Heredan el color del texto, así que
   sirven igual sobre el acento, sobre el panel claro y sobre el degradé. */
.ico{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn .ico{margin-left:var(--sp-1)}

/* 3 · Link secundario: texto con flecha, sin caja. */
.n-textlink{display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;font-size:var(--step--1);color:var(--text);
  text-decoration:none;transition:gap .16s var(--ease)}
.n-textlink:hover{gap:var(--sp-3);color:var(--accent)}

/* 4 · Los botones se levantan al pasar el mouse. Va en home.css, así que
   el diagnóstico no cambia. */
@media(hover:hover){
  .btn{transition:background .18s var(--ease),border-color .18s var(--ease),
    transform .18s var(--ease),filter .18s var(--ease)}
  .btn:hover{transform:translateY(-2px)}
}

/* 5 · Franja del pie del hero. */
.n-hero-pie{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin-top:var(--sp-10);padding-top:var(--sp-5);
  border-top:1px solid var(--border);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut)}
.n-hero-pie span{max-width:32ch}
.n-hero-pie a{display:inline-flex;align-items:center;gap:var(--sp-2);
  color:var(--text);text-decoration:none;white-space:nowrap}
.n-hero-pie a:hover{color:var(--accent)}

/* 6 · Franja de públicos, arriba de la de condiciones. */
.n-publicos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);
  padding-block:var(--sp-5);border-bottom:1px solid var(--border)}
.n-publicos-rot{flex:1 0 100%;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut)}
@media(min-width:900px){.n-publicos-rot{flex:0 0 150px}}
.n-publicos p{font-size:var(--step-0);letter-spacing:-.02em;margin:0}
.n-publicos b{color:var(--accent);font-weight:400}

/* 7 · Halo de color detrás del panel del proceso. */
.n-proc-halo{position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--accent-soft),transparent 70%)}
.n-relato-cols>div:last-child{position:relative;isolation:isolate}

/* 8 · Pestañas de la demo: subrayado en vez de cápsula, como el diseño nuevo. */
.n-tabs{gap:var(--sp-6);border-bottom:1px solid var(--border);margin-bottom:0}
.n-tabs .tab{background:none;border:0;border-radius:0;padding:0 0 var(--sp-3);
  min-height:52px;font-size:var(--step-0);font-weight:500;color:var(--text-mut);
  box-shadow:none;position:relative}
.n-tabs .tab i{display:none}
.n-tabs .tab:hover{color:var(--text)}
.n-tabs .tab[aria-selected="true"]{background:none;color:var(--text);
  box-shadow:inset 0 -2px 0 0 var(--accent)}
.n-tabs .tab[aria-selected="true"]::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:2px;background:var(--gradient-iris-line)}

/* 9 · El botón de la demo cambia de icono cuando la conversación terminó. */
.n-demo-play .i-repetir{display:none}
.n-demo-play.vista .i-repetir{display:block}
.n-demo-play.vista .i-ir{display:none}

/* 10 · Los tildes van en SVG, no en el carácter ✓: la tipografía de marca no
   siempre lo trae y quedaba un círculo vacío. Además el color y el tamaño
   necesitan ganarle a la regla general de los <span> de cada tarjeta. */
.n-salida .n-salida-ok{color:var(--accent);font-size:1rem}
.n-salida .n-salida-ok .ico{width:16px;height:16px;stroke-width:2.4}
.n-ven-pie .ico{width:14px;height:14px;color:var(--accent);stroke-width:2.4}
.n-demo-res>.ico{width:18px;height:18px;flex:0 0 18px;color:var(--accent);stroke-width:2.4;margin-top:2px}

/* 11 · Las dos franjas en grilla, no en flex: con flex, la condición más larga
   empujaba a "Uno a uno" a una segunda fila y quedaba desbalanceado.
   Y el color de cada frase se elige por nth-child (el rótulo es el hijo 1),
   no por nth-of-type: los cinco son <span> y el rótulo corría la cuenta. */
@media(min-width:900px){
  .n-franja-in,.n-publicos{display:grid;grid-template-columns:170px repeat(4,1fr);
    align-items:center;gap:var(--sp-4)}
  .n-publicos{grid-template-columns:170px repeat(7,auto);justify-content:start;
    gap:var(--sp-3) var(--sp-4)}
  .n-franja-rot,.n-publicos-rot{flex:none;max-width:none}
}
.n-franja-it b{background-position:0% 50%}
.n-franja-it:nth-child(3) b{background-position:33% 50%}
.n-franja-it:nth-child(4) b{background-position:66% 50%}
.n-franja-it:nth-child(5) b{background-position:100% 50%}

/* 12 · El pie de cada demo dice a qué fuente está conectada. Es lo que separa
   un chatbot de un sistema, y de paso nombra el trabajo que se cotiza. */
.n-demo-fuente{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--accent)}
.n-demo-fuente .ico{width:13px;height:13px;stroke-width:2}