/* ============================================================
   360 Tech — Nexo
   Hero: intro centrada + panel de "interfaz automatizada" con
   tres pestañas que rotan solas cada 5s (Bienvenida · Rendimiento
   · Dashboard). Fondo oscuro. Depende de site.css · site-mocks.css
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.phero--nexo{ text-align:center; overflow:hidden; padding-bottom:clamp(46px,8vh,100px); }
.phero--nexo::before{
  content:""; position:absolute; z-index:0; left:50%; top:-8%; transform:translateX(-50%);
  width:min(1200px,124vw); height:620px; pointer-events:none;
  background:radial-gradient(52% 56% at 50% 38%, rgba(17,195,189,.14), transparent 72%);
}
.phero--nexo .wrap{ position:relative; z-index:1; }

/* ============================================================
   PANEL · interfaz automatizada (es el hero)
   ============================================================ */
.nxui{ margin-top:clamp(10px,2vh,26px); }
.nxui .mock{ box-shadow:0 70px 150px -60px rgba(0,0,0,.94); }

/* título dentro de la interfaz */
.nxhero{ position:relative; text-align:center; padding:clamp(34px,6vh,72px) 24px clamp(26px,3.6vh,42px); overflow:hidden; }
.nxhero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(64% 130% at 50% -18%, rgba(17,195,189,.16), transparent 66%); }
.nxhero > *{ position:relative; z-index:1; }
.nxhero__title{ font-family:var(--f-sans); font-weight:700; font-size:clamp(2.3rem,5vw,4.3rem); line-height:.98; letter-spacing:-.038em; margin:0 auto; max-width:15ch; text-wrap:balance; color:#fff; }
.nxhero__sub{ margin:clamp(16px,2.4vh,24px) auto 0; max-width:52ch; color:var(--mut); font-weight:300; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.5; }

/* botones debajo de la interfaz */
.nxcta{ margin-top:clamp(26px,4vh,42px); justify-content:center; }

/* barra de pestañas */
.nxtabs{ display:flex; gap:6px; padding:11px 12px 0; border-bottom:1px solid var(--line); }
.nxtab{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 14px 15px; border-radius:11px 11px 0 0;
  font-family:var(--f-sans); font-weight:500; font-size:.86rem; color:var(--mut); cursor:pointer; transition:color .3s var(--ease), background .3s var(--ease); }
.nxtab .ic{ width:17px; height:17px; flex:none; color:var(--mut-2); transition:color .3s var(--ease); }
.nxtab .ic svg{ width:100%; height:100%; display:block; }
.nxtab:hover{ color:#eaf5f7; }
.nxtab.on{ color:#fff; background:rgba(17,195,189,.08); }
.nxtab.on .ic{ color:var(--turq); }
.nxtab__n{ font-family:var(--f-mono,Menlo,monospace); font-size:.64rem; color:var(--mut-2); }
.nxtab.on .nxtab__n{ color:var(--turq); }
/* barra de progreso auto */
.nxtab__pg{ position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px; background:rgba(159,236,233,.14); overflow:hidden; opacity:0; }
.nxtab.on .nxtab__pg{ opacity:1; }
.nxtab__pg i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,#0f9a95,#43e7e1); border-radius:2px; }
.nxtab.on.run .nxtab__pg i{ animation:nxProg var(--dwell,5s) linear forwards; }
@keyframes nxProg{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (max-width:640px){
  .nxtab__lb{ display:none; }
  .nxtab{ flex:none; width:44px; }
}

/* área de contenido */
.nxstage{ position:relative; min-height:300px; transition:height .5s var(--ease); }
.nxpanel{ position:absolute; top:0; left:0; right:0; padding:24px clamp(18px,3vw,34px) 28px; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), transform .5s var(--ease); transform:translateY(10px); pointer-events:none; }
.nxpanel.show{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .nxpanel{ transition:opacity .2s linear; transform:none; } .nxstage{ transition:none; } }

.nxp__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.nxp__title{ font-family:var(--f-sans); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; color:#fff; }
.nxp__tag{ font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq); border:1px solid rgba(17,195,189,.3); background:rgba(17,195,189,.08); border-radius:100px; padding:5px 12px; }

/* reveal helpers dentro del panel (gated a movimiento) */
.nx-el{ transition:opacity .5s var(--ease), transform .5s var(--ease); }
@media (prefers-reduced-motion:no-preference){
  .nxpanel:not(.show) .nx-el{ opacity:0; transform:translateY(12px); }
}

/* ============================================================
   PANEL 1 · Bienvenida + accesos rápidos
   ============================================================ */
.nxw{ display:flex; flex-direction:column; gap:20px; }
.nxw__intro{ text-align:center; position:relative; padding:clamp(20px,4vh,52px) 10px clamp(14px,2vh,26px); }
.nxw__intro::before{ content:""; position:absolute; inset:20px 0 0; pointer-events:none;
  background:radial-gradient(58% 96% at 50% 46%, rgba(17,195,189,.11), transparent 62%); }
.nxw__intro > *{ position:relative; z-index:1; }
.nxw__title{ font-family:var(--f-sans); font-weight:700; font-size:clamp(2.2rem,4.7vw,4.1rem); line-height:.98; letter-spacing:-.038em; margin:0 auto; max-width:15ch; text-wrap:balance; color:#fff; }
.nxw__sub{ margin:clamp(14px,2vh,22px) auto 0; max-width:52ch; color:var(--mut); font-weight:300; font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.5; }
.nxw__bar{ display:flex; align-items:center; justify-content:flex-start; }
.nxw__hi{ display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:300; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--turq); }
.nxw__hi .dot{ width:7px; height:7px; border-radius:50%; background:var(--turq); box-shadow:0 0 8px var(--turq); }
.nxw__qk{ font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut-2); }
.nxw__qa{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.nxqa{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:18px 17px; border:1px solid var(--line); border-radius:15px;
  background:linear-gradient(180deg,rgba(13,22,36,.5),rgba(8,13,22,.34)); text-align:left; cursor:pointer; transition:transform .35s var(--ease), border-color .35s var(--ease); }
.nxqa:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.nxqa__ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--turq); background:rgba(17,195,189,.1); border:1px solid rgba(17,195,189,.22); }
.nxqa__ic svg{ width:21px; height:21px; }
.nxqa__tx{ display:flex; flex-direction:column; gap:3px; }
.nxqa__tx b{ font-family:var(--f-sans); font-weight:600; font-size:.94rem; color:#eaf5f7; }
.nxqa__tx span{ font-size:.76rem; color:var(--mut-2); line-height:1.35; }
@media (max-width:760px){ .nxw__qa{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   PANEL 2 · Rendimiento (gráfica que crece)
   ============================================================ */
.nxc{ display:grid; grid-template-columns:1fr; gap:16px; }
.nxc__top{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; }
.nxc__big{ font-family:var(--f-display); font-weight:300; font-size:clamp(2.2rem,4vw,3.1rem); color:#fff; line-height:1; letter-spacing:-.01em; }
.nxc__big .cur{ color:var(--mut-2); font-size:.5em; }
.nxc__delta{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-sans); font-weight:600; font-size:.86rem; color:#43e7e1; padding-bottom:5px; }
.nxc__delta svg{ width:15px; height:15px; }
.nxc__legend{ margin-left:auto; display:flex; gap:16px; padding-bottom:6px; }
.nxc__lg{ display:flex; align-items:center; gap:7px; font-size:.72rem; color:var(--mut-2); }
.nxc__lg i{ width:16px; height:3px; border-radius:2px; background:var(--turq); }
.nxc__lg.g2 i{ background:rgba(159,236,233,.3); }
.nxc__chart{ position:relative; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(10,17,29,.4),rgba(8,13,22,.2)); padding:14px 16px 8px; }
.nxc__svg{ width:100%; height:auto; display:block; overflow:visible; }
.nxc__x{ display:flex; justify-content:space-between; padding:8px 4px 2px; }
.nxc__x span{ font-family:var(--f-mono,Menlo,monospace); font-size:.62rem; color:var(--mut-2); }
.nxc-grid line{ stroke:rgba(159,236,233,.08); stroke-width:1; }
.nxc-area{ fill:url(#nxArea); opacity:.9; }
.nxc-line{ fill:none; stroke:#11c3bd; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 6px 14px rgba(17,195,189,.4)); }
.nxc-line2{ fill:none; stroke:rgba(159,236,233,.28); stroke-width:1.6; stroke-dasharray:4 5; }
.nxc-dot{ fill:#03110f; stroke:#43e7e1; stroke-width:2.5; }
.nxc-flag{ fill:rgba(3,17,15,.9); stroke:rgba(17,195,189,.4); }
.nxc-flag-t{ fill:#eaf5f7; font-family:var(--f-mono,Menlo,monospace); font-size:9px; font-weight:600; }

/* ============================================================
   PANEL 3 · Dashboard
   ============================================================ */
.nxd{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; gap:13px; align-content:start; }
.nxd__kpi{ grid-column:span 1; border:1px solid var(--line); border-radius:13px; padding:15px 16px; background:linear-gradient(180deg,rgba(13,22,36,.5),rgba(8,13,22,.3)); }
.nxd__kpi .k{ font-size:.68rem; color:var(--mut-2); letter-spacing:.02em; }
.nxd__kpi .v{ font-family:var(--f-display); font-weight:400; font-size:1.5rem; color:#fff; margin-top:8px; line-height:1; }
.nxd__kpi .d{ display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600; color:#43e7e1; margin-top:9px; }
.nxd__kpi .d.dn{ color:#e0a24f; }
.nxd__kpi .d svg{ width:12px; height:12px; }
.nxd__panel{ grid-column:span 2; border:1px solid var(--line); border-radius:13px; padding:16px 17px; background:linear-gradient(180deg,rgba(10,17,29,.42),rgba(8,13,22,.24)); }
.nxd__panel h5{ font-family:var(--f-sans); font-weight:600; font-size:.86rem; color:#eaf5f7; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.nxd__panel h5 span{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mut-2); }
/* filas de barras */
.nxd-row{ display:grid; grid-template-columns:78px 1fr 40px; gap:11px; align-items:center; margin-bottom:11px; }
.nxd-row:last-child{ margin-bottom:0; }
.nxd-row .nm{ font-size:.76rem; color:var(--mut); }
.nxd-row .tr{ height:7px; border-radius:5px; background:rgba(159,236,233,.09); overflow:hidden; }
.nxd-row .tr b{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#0f5a79,#11c3bd); width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.nxd-row.b2 .tr b{ background:linear-gradient(90deg,#0f7d77,#43e7e1); }
.nxd-row .pc{ font-family:var(--f-mono,Menlo,monospace); font-size:.72rem; color:var(--turq); text-align:right; }
/* mini donut */
.nxd__donut{ display:flex; align-items:center; gap:16px; }
.nxd-ring{ width:84px; height:84px; flex:none; }
.nxd-ring circle{ fill:none; stroke-width:9; }
.nxd-ring .bg{ stroke:rgba(159,236,233,.1); }
.nxd-ring .fg{ stroke:#11c3bd; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); filter:drop-shadow(0 0 6px rgba(17,195,189,.5)); }
.nxd-ring__c{ font-family:var(--f-display); font-weight:400; font-size:13px; fill:#fff; }
.nxd__leg{ display:flex; flex-direction:column; gap:8px; }
.nxd__leg div{ display:flex; align-items:center; gap:8px; font-size:.74rem; color:var(--mut); }
.nxd__leg i{ width:9px; height:9px; border-radius:3px; background:var(--turq); }
.nxd__leg i.a2{ background:#3fb6e0; } .nxd__leg i.a3{ background:rgba(159,236,233,.28); }
@media (max-width:760px){
  .nxd{ grid-template-columns:repeat(2,1fr); }
  .nxd__panel{ grid-column:span 2; }
}

/* controles: reproducir/pausar + puntos */
.nxctl{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.nxctl__pp{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut-2); cursor:pointer; transition:color .25s var(--ease); }
.nxctl__pp:hover{ color:#eaf5f7; }
.nxctl__pp svg{ width:12px; height:12px; }
.nxctl__dots{ display:flex; gap:7px; }
.nxctl__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(159,236,233,.2); cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); }
.nxctl__dots i.on{ background:var(--turq); transform:scale(1.25); }

/* ============================================================
   MODALIDADES · selector interactivo sobre fondo claro
   ============================================================ */
.modes .sec-head{ position:relative; z-index:1; }
.modes__grid{ margin-top:clamp(34px,5vh,58px); display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(24px,3.4vw,50px); align-items:start; }

/* --- selector (izquierda) --- */
.modes__sel{ display:flex; flex-direction:column; gap:14px; }
.msel{ position:relative; text-align:left; cursor:pointer; width:100%; border:1px solid var(--sol-line); border-radius:16px; padding:19px 21px;
  background:rgba(255,255,255,.55); transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.msel:hover{ background:rgba(255,255,255,.85); }
.msel.on{ border-color:rgba(15,90,121,.4); background:#fff; box-shadow:0 26px 54px -32px rgba(9,60,70,.45); }
.msel__top{ display:flex; align-items:center; gap:10px; }
.msel__tag{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sol-mut); transition:color .3s var(--ease); }
.msel.on .msel__tag{ color:var(--sol-turq); }
.msel__no{ margin-left:auto; font-family:var(--f-display); font-weight:400; font-size:.62rem; color:rgba(9,20,32,.28); }
.msel h4{ font-family:var(--f-sans); font-weight:600; font-size:1.28rem; letter-spacing:-.02em; color:var(--sol-ink); margin:10px 0 6px; }
.msel h4 .plus{ color:var(--sol-turq); }
.msel p{ color:var(--sol-mut); font-size:.9rem; line-height:1.5; margin:0; }
.msel__chips{ display:flex; flex-wrap:wrap; gap:8px; overflow:hidden; max-height:0; opacity:0; margin-top:0; transition:max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease); }
.msel.on .msel__chips{ max-height:120px; opacity:1; margin-top:15px; }
.mchip{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--sol-turq); border:1px solid rgba(15,90,121,.28); background:rgba(17,195,189,.12); border-radius:100px; padding:5px 11px; }
.mchip svg{ width:12px; height:12px; }

/* --- vista/mockup (derecha) --- */
.modes__view{ position:sticky; top:96px; }
.lmock{ border:1px solid rgba(9,60,70,.14); border-radius:16px; background:#fff; box-shadow:0 44px 96px -54px rgba(9,60,70,.6); overflow:hidden; }
.lmock__bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--sol-line); background:linear-gradient(180deg,#f3fbfa,#e8f5f3); }
.lmock__dot{ width:10px; height:10px; border-radius:50%; background:rgba(9,60,70,.16); }
.lmock__title{ margin-left:7px; font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--sol-mut); }
.lmock__tag{ margin-left:auto; font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--sol-turq); border:1px solid rgba(15,90,121,.3); background:rgba(17,195,189,.12); border-radius:100px; padding:4px 11px; }
.lmock__body{ padding:20px; min-height:372px; }
@media (prefers-reduced-motion:no-preference){ .lmock__body{ animation:lmFade .45s var(--ease) both; } }
@keyframes lmFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* KPIs claros */
.lk-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.lk{ border:1px solid var(--sol-line); border-radius:13px; padding:15px 16px; background:rgba(255,255,255,.7); }
.lk .k{ font-size:.68rem; color:var(--sol-mut); }
.lk .v{ font-family:var(--f-display); font-weight:400; font-size:1.42rem; color:var(--sol-ink); margin-top:8px; line-height:1; }
.lk .d{ display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600; color:var(--sol-turq); margin-top:9px; }
.lk .d svg{ width:12px; height:12px; }

/* bloque de barras (Nexo) */
.lblock{ margin-top:14px; border:1px solid var(--sol-line); border-radius:13px; padding:16px 17px 14px; background:rgba(255,255,255,.55); }
.lblock__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.lblock__h b{ font-family:var(--f-sans); font-weight:600; font-size:.9rem; color:var(--sol-ink); }
.lblock__h span{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sol-mut); }
.lbars{ display:flex; align-items:flex-end; gap:6px; height:132px; }
.lbarcol{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
.lbar{ width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#19d0c9,#0e8f88); height:0; transition:height 1s cubic-bezier(.22,1,.36,1); }
.lbarcol.hi .lbar{ background:linear-gradient(180deg,#0e8f88,#0a6f6a); }
.lbarcol span{ font-family:var(--f-mono,Menlo,monospace); font-size:.54rem; color:rgba(9,20,32,.45); }

/* filas de entidad (Consolidado / Automated) */
.lent{ display:grid; grid-template-columns:118px 1fr 46px; gap:12px; align-items:center; margin-bottom:12px; }
.lent:last-child{ margin-bottom:0; }
.lent .nm{ font-size:.82rem; color:var(--sol-ink); font-weight:500; }
.lent .tr{ height:9px; border-radius:6px; background:rgba(9,60,70,.09); overflow:hidden; }
.lent .tr b{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#0e8f88,#19d0c9); width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.lent.matz .tr b{ background:linear-gradient(90deg,#0a6f6a,#11c3bd); }
.lent .pc{ font-family:var(--f-mono,Menlo,monospace); font-size:.74rem; color:var(--sol-turq); text-align:right; }

/* tarjeta IA (Automated) */
.lai{ display:flex; gap:13px; align-items:flex-start; border:1px solid rgba(15,90,121,.26); border-radius:13px; padding:14px 15px; background:linear-gradient(160deg, rgba(17,195,189,.14), rgba(255,255,255,.5)); margin-top:12px; }
.lai:first-of-type{ margin-top:0; }
.lai__ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,#13b7b1,#0a6f6a); }
.lai__ic svg{ width:18px; height:18px; }
.lai__tx b{ display:block; font-family:var(--f-sans); font-weight:600; font-size:.9rem; color:var(--sol-ink); margin-bottom:3px; }
.lai__tx p{ margin:0; font-size:.82rem; color:var(--sol-mut); line-height:1.45; }
.lai__tx em{ font-style:normal; color:var(--sol-turq); font-weight:600; }
.lsub{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sol-mut); margin:0 0 13px; }

@media (max-width:860px){
  .modes__grid{ grid-template-columns:1fr; }
  .modes__view{ position:static; }
}

/* ============================================================
   QUÉ INCLUYE · features (fondo oscuro)
   ============================================================ */
.nxfeat{ margin-top:clamp(34px,5vh,58px); display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.nxft{ position:relative; overflow:hidden; display:flex; gap:20px; align-items:flex-start; padding:28px 30px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg, rgba(13,22,36,.55), rgba(8,13,22,.36)); transition:transform .45s var(--ease), border-color .45s var(--ease); }
.nxft:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.nxft__no{ position:absolute; top:16px; right:22px; font-family:var(--f-display); font-weight:600; font-size:3.4rem; line-height:1; letter-spacing:-.04em; color:rgba(159,236,233,.05); transition:color .45s var(--ease); }
.nxft:hover .nxft__no{ color:rgba(17,195,189,.12); }
.nxft__ic{ flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:var(--turq); background:rgba(17,195,189,.09); border:1px solid rgba(17,195,189,.22); }
.nxft__ic svg{ width:27px; height:27px; }
.nxft__tx{ padding-top:2px; }
.nxft__tx h4{ font-family:var(--f-sans); font-weight:600; font-size:1.28rem; letter-spacing:-.015em; margin:0 0 9px; }
.nxft__tx p{ color:var(--mut); font-size:.96rem; line-height:1.5; max-width:38ch; margin:0; }
@media (max-width:720px){ .nxfeat{ grid-template-columns:1fr; } }