/* ============================================================
   SinergIA 180 — Componentes reutilizables · territorio claro
   1. Dispositivos (MacBook · iPad · iPhone)
   2. Mapa de proceso de la planta
   3. Bloques de contenido
   ============================================================ */

/* ============================================================
   1. DISPOSITIVOS
   Proporciones reales de pantalla:
     MacBook 16:10 · iPad 59:41 (2360×1640) · iPhone 195:422 (1170×2532)
   La pantalla admite: <img> de captura · UI simulada · slot vacío.
   ============================================================ */
.mock{display:flex; flex-direction:column; align-items:center; gap:20px; width:100%}
.mock > .cuerpo{width:100%; align-self:stretch}
.mock-pie{text-align:center; max-width:44ch}
.mock-pie .rol{font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--texto)}
.mock-pie .desc{font-size:13.5px; color:var(--texto-3); margin-top:5px; line-height:1.5}

/* --- Pantalla --- */
.pantalla{position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; background:var(--papel)}
.lienzo{position:relative; flex:1; overflow:hidden; min-height:0}
.lienzo > img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:top center;
  background:var(--papel);
}
/* Una captura de ventana completa no se recorta: se ve entera */
.lienzo > img.contener{object-fit:contain; object-position:center}

/* Slot: el espacio reservado para la captura */
.slot{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; padding:20px; text-align:center;
  background:
    linear-gradient(180deg, rgba(33,88,232,.05), transparent 55%),
    repeating-linear-gradient(-45deg, rgba(13,20,36,.022) 0 10px, transparent 10px 20px);
}
.slot::before{content:''; position:absolute; inset:11px; border:1px dashed var(--linea-2); border-radius:7px}
.slot .ico{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; position:relative;
  border:1px solid var(--azul-line); background:var(--lavado); color:var(--azul-ia); font-size:15px;
}
.slot .t{font-size:12px; color:var(--texto-2); font-weight:500; position:relative}
.slot .f{
  font-family:var(--f-mono); font-size:10.5px; color:var(--azul-ia); position:relative;
  background:var(--lavado); border:1px solid var(--azul-line); padding:3px 8px; border-radius:5px; word-break:break-all;
}
.slot .px{font-family:var(--f-mono); font-size:10px; color:var(--texto-3); position:relative}
.mock.sm .slot .ico{display:none}
.mock.sm .slot{gap:6px}
.mock.sm .slot .t{font-size:11px}
.iphone .slot .f{font-size:9px; letter-spacing:-.01em; line-height:1.35}

/* ------------------------------------------------------------
   Cuerpos de dispositivo — negro espacial sobre fondo claro.
   Sin teclado: la laptop es tapa + base delgada, como el producto
   fotografiado de frente.
   ------------------------------------------------------------ */
.mock .tapa{
  position:relative;
  background:linear-gradient(168deg,#2A2C31 0%,#1B1D21 42%,#141519 100%);
  box-shadow:var(--s-dev), inset 0 0 0 1px rgba(255,255,255,.07);
}

/* --- MacBook --- */
.macbook{max-width:880px}
.macbook .tapa{padding:10px; border-radius:16px 16px 6px 6px}
.macbook .marco{position:relative; aspect-ratio:16/10; border-radius:7px; overflow:hidden; background:var(--papel)}
/* Tablero de proceso: la captura real es un poco más plana que 16:10 */
#recorrido .macbook .marco{aspect-ratio:1698/1051}
.macbook .base{
  position:relative; width:113%; margin-left:-6.5%; height:12px;
  background:linear-gradient(180deg,#E6E9EE 0%,#C8CDD6 58%,#AEB5C0 100%);
  border-radius:0 0 9px 9px;
  clip-path:polygon(1.1% 0, 98.9% 0, 100% 100%, 0 100%);
  box-shadow:0 14px 22px -14px rgba(13,20,36,.42);
}
.macbook .base::after{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:13%; height:4px; background:rgba(13,20,36,.20); border-radius:0 0 5px 5px;
}

/* --- iPad --- */
.ipad{max-width:600px}
.ipad .tapa{padding:11px; border-radius:26px}
.ipad .marco{position:relative; aspect-ratio:59/41; border-radius:15px; overflow:hidden; background:var(--papel)}
.ipad .cam{position:absolute; top:5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#3A3D44; z-index:3}

/* --- iPhone --- */
.iphone{max-width:280px}
.iphone .tapa{padding:9px; border-radius:46px}
.iphone .marco{position:relative; aspect-ratio:195/422; border-radius:37px; overflow:hidden; background:var(--papel)}
.iphone .isla{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:4;
  width:78px; height:22px; border-radius:99px; background:#141519;
}
.iphone .barra-inf{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:4;
  width:100px; height:4px; border-radius:99px; background:rgba(13,20,36,.26);
}

/* --- Chrome de navegador dentro de la pantalla --- */
.chrome{
  flex:none; height:34px; display:flex; align-items:center; gap:6px; padding:0 12px;
  background:#1B1D21; border-bottom:1px solid rgba(255,255,255,.06);
}
.chrome i{width:9px; height:9px; border-radius:50%; flex:none}
.chrome i{background:rgba(255,255,255,.20)}
.chrome i:nth-child(2){background:rgba(255,255,255,.15)}
.chrome i:nth-child(3){background:rgba(255,255,255,.11)}
.chrome .url{
  margin:0 auto; max-width:52%; padding:4px 14px; border-radius:99px;
  background:rgba(255,255,255,.09); color:rgba(255,255,255,.62);
  font-size:10.5px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* --- Composiciones --- */
.mocks{display:flex; flex-wrap:wrap; gap:clamp(26px,3.6vw,52px); align-items:flex-start; justify-content:center}
.mocks > *{flex:1 1 260px}
.mocks > .macbook{max-width:880px}
.mocks > .ipad{max-width:600px}
.mocks > .iphone{flex:0 0 280px; max-width:280px}

/* --- UI simulada --- */
.ui{position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; background:var(--fondo)}
.ui-nota{font-size:10.5px; color:var(--texto-3); line-height:1.5; margin:0}
.ui-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 15px; border-bottom:1px solid var(--linea); flex:none}
.ui-top .tt{font-size:11.5px; font-weight:600; color:var(--texto)}
.ui-top .tt em{display:block; font-style:normal; font-size:9.5px; font-weight:400; color:var(--texto-3); margin-top:2px}
.ui-top.oscura{background:var(--texto); border-bottom-color:transparent}
.ui-top.oscura .tt{color:#fff}
.ui-top.oscura .tt em{color:rgba(255,255,255,.6)}
.ui-top .vivo{display:inline-flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:.06em; color:rgba(255,255,255,.75)}
.ui-top .vivo::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--azul-400)}
.ui-top .hh{font-family:var(--f-mono); font-size:9.5px; color:var(--texto-3)}
.ui-body{padding:12px 14px; display:flex; flex-direction:column; gap:9px; overflow:hidden}
.ui-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:7px}
.ui-kpi{background:var(--papel); border:1px solid var(--linea); border-radius:9px; padding:9px 10px}
.ui-kpi b{display:block; font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--texto)}
.ui-kpi > span{font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-3)}
.ui-kpi.g b{color:var(--azul-700)} .ui-kpi.a b{color:var(--atencion)} .ui-kpi.r b{color:var(--critico)}
.ui-kpi b .ph{color:inherit; background:none}   /* el pendiente no pisa el estado */
.ui-fila{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--papel); border:1px solid var(--linea); border-radius:8px; padding:8px 10px; font-size:11px; color:var(--texto-2)}
.ui-fila b{font-family:var(--f-mono); font-size:10.5px; font-weight:500; color:var(--texto)}
.ui-alerta{border-radius:9px; padding:9px 11px; font-size:10.5px; line-height:1.5; background:var(--atencion-bg); border:1px solid rgba(18,50,122,.22); color:var(--texto-2)}
.ui-alerta.r{background:var(--critico-bg); border-color:rgba(199,38,60,.24)}
.ui-alerta .l{display:block; font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--atencion); margin-bottom:3px}
.ui-alerta.r .l{color:var(--critico)}
/* En pantalla de laptop la UI simulada se escala: legible en proyector */
.macbook .ui-top{padding:15px 22px}
.macbook .ui-top .tt{font-size:14.5px}
.macbook .ui-top .tt em{font-size:11px; margin-top:3px}
.macbook .ui-top .vivo{font-size:11px}
.macbook .ui-body{padding:20px 22px; gap:15px}
.macbook .ui-kpis{gap:12px}
.macbook .ui-kpi{padding:15px 17px; border-radius:11px}
.macbook .ui-kpi b{font-size:26px; margin-bottom:5px}
.macbook .ui-kpi > span{font-size:10px}
.macbook .ui-fila{font-size:13px; padding:12px 15px; border-radius:10px}
.macbook .ui-fila b{font-size:12.5px}
.macbook .ui-alerta{font-size:13px; padding:14px 16px; border-radius:11px}
.macbook .ui-alerta .l{font-size:10px; margin-bottom:5px}
.macbook .ui-nota{font-size:13px}
.macbook .punto{width:8px; height:8px; margin-right:8px}

.punto{display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:middle}
.punto.g{background:var(--ok)} .punto.a{background:var(--atencion)} .punto.r{background:var(--critico)}

/* ============================================================
   2. DIAGRAMA DE PLANTA (SVG)
   Cuatro flujos, distinguidos por tono azul y por trazo.
   ============================================================ */
.leyenda{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:26px}
.leyenda > span{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:var(--texto-2)}
.leyenda i{width:24px; height:0; flex:none; border-top-style:solid}
.lg-solidos i{border-top:2px solid var(--azul-ia)}
.lg-aceites i{border-top:2px dashed var(--azul-700)}
.lg-agua    i{border-top:2px dotted var(--azul-900)}
.lg-vapor   i{border-top:4px double var(--azul-500)}

/* El diagrama se sale del ancho de lectura: necesita aire para leerse */
.diagrama-zona{width:min(1520px, 94vw); margin-left:50%; transform:translateX(-50%)}
.diagrama{margin:0}
/* Solo el svg raíz: si no, la regla pisa el tamaño de los iconos anidados */
.diagrama > svg{width:100%; height:auto; display:block; overflow:visible}
/* --- Recorrido guiado --- */
.dg-tour{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:0 18px; width:min(760px,100%); margin:26px auto 0;
  padding:16px 20px; border:1px solid var(--linea); border-radius:var(--r);
  background:var(--fondo); box-shadow:var(--s-1);
}
.dg-play{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--azul-ia); color:#FFFFFF; transition:filter var(--t);
}
.dg-play:hover{filter:brightness(1.1)}
.dg-play .dg-ico-r{display:none}
.dg-tour.en-pausa .dg-play .dg-ico-p{display:none}
.dg-tour.en-pausa .dg-play .dg-ico-r{display:block}
.dg-info{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0}
.dg-n{font-family:var(--f-mono); font-size:11px; color:var(--azul-ia); letter-spacing:.1em}
.dg-t{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--texto)}
.dg-d{font-size:13.5px; color:var(--texto-2); flex:1 1 100%}
.dg-barra{grid-column:1 / -1; height:2px; margin-top:14px; border-radius:2px; background:var(--linea)}
.dg-barra i{display:block; height:100%; border-radius:2px; background:var(--azul-ia); transform:scaleX(0); transform-origin:0 50%}

/* Estado de reposo mientras corre el recorrido */
.diagrama.tour .de{opacity:.28; transition:opacity .45s var(--ease)}
.diagrama.tour .de.visto{opacity:.62}
.diagrama.tour .de.on{opacity:1}
.diagrama.tour .de.on path{stroke-width:2.6}
.diagrama.tour .de.on .de-t{fill:var(--texto)}
.diagrama.tour .dn{opacity:.5; transition:opacity .45s var(--ease)}
.diagrama.tour .dn.visto{opacity:1}
.diagrama.tour .dn.on{opacity:1}
.diagrama.tour .dn.on rect{stroke:var(--azul-ia); stroke-width:2; fill:var(--azul-50)}
/* En pausa el plano se ve entero: es cuando alguien quiere estudiarlo */
.diagrama.tour.pausada .de, .diagrama.tour.pausada .dn{opacity:1}
.dg-pt{pointer-events:none}
.dg-pt.f-solidos{fill:var(--azul-ia)}
.dg-pt.f-aceites{fill:var(--azul-700)}
.dg-pt.f-agua{fill:var(--azul-900)}
.dg-pt.f-vapor{fill:var(--azul-500)}

/* --- Cajas --- */
.dn rect{
  fill:var(--fondo); stroke:var(--linea-2); stroke-width:1;
  transition:stroke .22s var(--ease), fill .22s var(--ease);
}
.dn{cursor:pointer; color:var(--azul-ia)}
.dn-t{
  font-family:var(--f-body); font-size:12.5px; font-weight:600; fill:var(--texto);
  text-anchor:middle; letter-spacing:-.01em;
}
.dn:hover rect, .dn:focus-visible rect{stroke:var(--azul-ia); fill:var(--azul-50)}
.dn:focus-visible{outline:none}
.dn:focus-visible rect{stroke-width:2}
.dn.soporte{color:var(--texto-3)}
.dn.soporte rect{fill:var(--papel)}
.dn.soporte .dn-t{fill:var(--texto-2)}

/* --- Enlaces --- */
.de path{fill:none; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.de-t{
  font-family:var(--f-body); font-size:10.5px; fill:var(--texto-3);
  letter-spacing:.02em;
  paint-order:stroke; stroke:var(--fondo); stroke-width:4px; stroke-linejoin:round;
}
.f-solidos path{stroke:var(--azul-ia)}
.f-aceites path{stroke:var(--azul-700); stroke-dasharray:7 5}
.f-agua    path{stroke:var(--azul-900); stroke-dasharray:2 5}
.f-vapor   path{stroke:var(--azul-500); stroke-width:3.4}
.pf-solidos{fill:none; stroke:var(--azul-ia);  stroke-width:2}
.pf-aceites{fill:none; stroke:var(--azul-700); stroke-width:2}
.pf-agua   {fill:none; stroke:var(--azul-900); stroke-width:2}
.pf-vapor  {fill:none; stroke:var(--azul-500); stroke-width:2}

/* Detalle de nodo en modal */
.det .paso{border-top:1px solid var(--linea); padding:18px 0}
.det .paso .label{display:block; margin-bottom:7px}
.det .paso.hoy .label{color:var(--texto-3)}
.det .paso.sis .label{color:var(--azul-ia)}
.det .paso.dec .label{color:var(--azul-900)}
.det .paso p{color:var(--texto-2); font-size:15px}

/* ============================================================
   ICONOS — trazo de línea, heredan el color del contexto
   ============================================================ */
.ico{display:inline-flex; align-items:center; justify-content:center; flex:none}
svg.ico{display:block}
.nodo-p .ico{color:var(--c); margin-bottom:10px}
.nodo-p.soporte .ico{color:var(--texto-3)}
.agente .ico{color:var(--azul-ia)}
.nodo-f .ico{color:var(--azul-ia); margin-bottom:12px; justify-content:center; width:100%}
.slot .ico{color:var(--azul-ia)}
.tab svg{opacity:.65; transition:opacity var(--t)}
.tab.on svg{opacity:1; color:var(--azul-ia)}
.modal-t{display:flex; align-items:center; gap:12px; font-size:26px; margin:16px 0 10px}
.modal-ico{color:var(--azul-ia); flex:none}

/* ============================================================
   3. BLOQUES DE CONTENIDO
   ============================================================ */

/* --- Hero --- */
.hero{min-height:100svh; display:flex; align-items:center; padding-top:110px}
.hero .marca{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:clamp(30px,5vh,46px)}
.hero .chip{font-size:12.5px; font-weight:500; letter-spacing:.1em; color:var(--texto-2); border:1px solid var(--linea-2); border-radius:999px; padding:8px 16px; background:var(--fondo)}
.hero .chip.cliente{color:var(--texto); font-weight:600; border-color:var(--azul-line); background:var(--azul-100)}
.hero h1{max-width:19ch; font-size:clamp(34px,4.6vw,54px); margin-bottom:24px}
.hero h1 em{font-style:normal; color:var(--azul-ia)}
.hero .tag{font-size:clamp(16px,1.8vw,20px); color:var(--texto-2); margin-bottom:clamp(44px,7vh,72px)}
.hero .pista{margin-top:clamp(38px,6vh,60px); display:inline-flex; align-items:center; gap:11px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-3)}
.hero .pista::before{content:''; width:30px; height:1px; background:var(--azul-ia)}

/* --- Stats --- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.stat{background:var(--fondo); padding:26px 24px 24px}
.stat b{display:block; font-size:clamp(30px,4vw,46px); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--texto)}
.stat b .u{font-size:.42em; font-weight:500; color:var(--texto-3); margin-left:7px; letter-spacing:-.01em}
.stat .l{display:block; margin-top:12px; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--texto-3)}
.stat.duele{background:var(--lavado)}
.stat.duele b{color:var(--azul-ia)}

/* --- Cards --- */
.cards{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  position:relative; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r); padding:26px; box-shadow:var(--s-1);
  transition:border-color var(--t), transform var(--t);
}
/* La sombra de hover se cruza por opacidad: se compone, no repinta */
.card::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:var(--s-2); opacity:0; transition:opacity var(--t);
}
.card:hover{border-color:var(--linea-2); transform:translateY(-2px)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:10px}
.card p{color:var(--texto-2); font-size:15px}
.card .n{font-family:var(--f-mono); font-size:11px; color:var(--azul-ia); letter-spacing:.1em; display:block; margin-bottom:14px}

/* --- Puntos del estado actual: tarjeta breve que abre su detalle --- */
.puntos{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.punto-p{
  display:flex; flex-direction:column; align-items:flex-start; gap:0; text-align:left;
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r);
  padding:22px; box-shadow:var(--s-1);
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
}
.punto-p:hover{border-color:var(--azul-line); transform:translateY(-2px); box-shadow:var(--s-2)}
.punto-p .ico{color:var(--azul-ia); margin-bottom:16px}
.punto-p .area{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-3); margin-bottom:8px;
}
.punto-p .tt{font-size:16px; font-weight:600; letter-spacing:-.012em; line-height:1.35; color:var(--texto)}
.punto-p{min-height:172px}
.punto-p .ver{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:18px;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-3); transition:color var(--t);
}
.punto-p .ver svg{transition:transform var(--t)}
.punto-p:hover .ver, .punto-p:focus-visible .ver{color:var(--azul-ia)}
.punto-p:hover .ver svg{transform:translateX(3px)}
.det .paso.rep .label{color:var(--critico)}

/* --- Línea de tiempo numerada --- */
.pasos{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); list-style:none}
.paso-t .cab{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.paso-t .num{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--azul-ia); background:var(--fondo);
  font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--azul-ia);
}
.paso-t .linea{flex:1; height:1.5px; background:var(--azul-200); border-radius:2px}
.paso-t:last-child .linea{background:linear-gradient(90deg, var(--azul-200), transparent)}
.paso-t h3{margin-bottom:10px}
.paso-t p{color:var(--texto-2); font-size:15px}

/* --- Frase clave --- */
.quote{border-left:2px solid var(--azul-ia); padding:4px 0 4px 26px; font-size:clamp(19px,2.3vw,26px); line-height:1.42; letter-spacing:-.018em; max-width:64ch; color:var(--texto)}
.quote b{color:var(--azul-ia); font-weight:600}

/* --- Checklists --- */
.checks li{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea); font-size:15px; color:var(--texto-2)}
.checks .chk{flex:none; color:var(--azul-ia); margin-top:4px}
.checks li span{flex:1; min-width:0}

/* --- Roles: control segmentado, centrado --- */
.seg{
  position:relative; display:flex; gap:2px; width:max-content; max-width:100%;
  margin:0 auto clamp(30px,4.5vh,46px); padding:4px;
  border-radius:999px; background:var(--papel); border:1px solid var(--linea);
  overflow-x:auto; scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none}
.seg-ind{
  position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px;
  background:var(--fondo); border:1px solid var(--linea); box-shadow:var(--s-1);
  transition:transform .38s var(--salida), width .38s var(--salida); will-change:transform;
}
.seg-b{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  font-size:13.5px; font-weight:500; color:var(--texto-3); transition:color var(--t);
}
.seg-b:hover{color:var(--texto-2)}
.seg-b.on{color:var(--texto)}
.seg-b svg{opacity:.55; transition:opacity var(--t), color var(--t)}
.seg-b.on svg{opacity:1; color:var(--azul-ia)}
.pane{display:none}
.pane.on{display:block; animation:fade .32s var(--ease)}

/* --- Flujo de integración --- */
.flujo{display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.nodo-f{background:var(--superficie); padding:24px 20px; text-align:center}
.nodo-f.hi{background:var(--lavado); border-top:2px solid var(--azul-ia)}
.nodo-f h4{margin-bottom:7px}
.nodo-f p{font-size:13px; color:var(--texto-3)}
/* --- Opciones de integración: una tarjeta que revela las dos --- */
.opciones{position:relative; display:flex; justify-content:center}
.oc-velo{
  position:fixed; inset:0; pointer-events:none;
  background:rgba(255,255,255,.5); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  opacity:0; transition:opacity .38s var(--salida); z-index:1;
}
.opciones.abierta .oc-velo{opacity:1}
.oc{
  position:relative; z-index:2; width:min(620px,100%); text-align:center; cursor:pointer;
  padding:clamp(30px,4vw,46px); border-radius:var(--r-lg); color:#FFFFFF;
  background:linear-gradient(155deg, var(--azul-800), var(--azul-900));
  box-shadow:0 22px 50px -26px rgba(10,31,82,.75);
  transition:transform .42s var(--salida), box-shadow .42s var(--salida);
}
.oc:focus-visible{outline:2px solid var(--azul-300); outline-offset:4px}
.opciones.abierta .oc{transform:scale(.985)}
.oc-ico{display:inline-flex; color:#FFFFFF; opacity:.92; margin-bottom:16px}
.oc h3{color:#FFFFFF; margin-bottom:12px}
.oc p{color:rgba(255,255,255,.74); max-width:46ch; margin:0 auto; font-size:15px}
.oc-pista{
  display:inline-flex; align-items:center; gap:7px; margin-top:22px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul-300); transition:opacity .3s var(--ease);
}
.oc-pista svg{color:var(--azul-300)}
.opciones.abierta .oc-pista{opacity:0}
.oc-pop{
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-50%) scale(.96); width:min(880px, 92vw); text-align:left;
  opacity:0; pointer-events:none;
  transition:opacity .38s var(--salida), transform .38s var(--salida);
}
.opciones.abierta .oc-pop{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto}
.oc-sheet{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px;
  background:var(--fondo); border:1px solid var(--linea); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(13,20,36,.45);
}
.oc-op{
  color:var(--texto); background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--r); padding:24px;
}
.oc-op .l{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.14em; color:var(--azul-ia); text-transform:uppercase;
}
.oc-op h4{margin:12px 0 14px; font-size:17px}
.oc-op ul{display:grid; gap:9px}
.oc-op li{display:flex; gap:10px; font-size:14px; color:var(--texto-2)}
.oc-op li svg{color:var(--azul-ia); flex:none; margin-top:3px}
.oc-op .frase{margin-top:16px; padding-left:14px; border-left:2px solid var(--azul-200); font-size:14px; color:var(--texto)}

/* --- Agentes: lista puntual y la simulación al lado --- */
.agentes-duo{display:grid; gap:clamp(26px,3vw,46px); grid-template-columns:minmax(240px,330px) 1fr; align-items:start}
.agentes-lista{display:grid; gap:8px; list-style:none}
.agente-i{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:16px 18px; border-radius:12px;
  background:var(--superficie); border:1px solid var(--linea); box-shadow:var(--s-1);
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
}
.agente-i:hover{border-color:var(--azul-line); transform:translateX(3px); box-shadow:var(--s-2)}
.agente-i .ico{color:var(--azul-ia)}
.agente-i .nm{flex:1; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--texto)}
.agente-i .fl{color:var(--texto-3); transition:transform var(--t)}
.agente-i:hover .fl{transform:translateX(3px)}
.alerta-ej{font-family:var(--f-mono); font-size:12px; line-height:1.6; background:var(--papel); border:1px solid var(--linea); border-left:2px solid var(--azul-700); border-radius:10px; padding:14px 16px; color:var(--texto-2); white-space:pre-wrap}
.alerta-ej .l{display:block; font-family:var(--f-body); font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--azul-700); margin-bottom:7px}

/* Hueco donde se monta un componente vivo dentro de una pantalla */
.hueco{position:absolute; inset:0; overflow:hidden}
/* Un panel montado dentro de una pantalla llena el marco: sin bordes propios,
   sin altura mínima y con el desplazamiento dentro de sus columnas. */
.hueco > *{height:100%; max-height:none; min-height:0; border:0; border-radius:0; box-shadow:none}

/* --- Loop --- */
.loop{display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.loop-p{background:var(--superficie); padding:22px 20px}
.loop-p .n{font-family:var(--f-mono); font-size:10.5px; color:var(--azul-ia); letter-spacing:.12em}
.loop-p h4{margin:11px 0 6px}
.loop-p p{font-size:12.5px; color:var(--texto-3); line-height:1.5}

/* --- Tabla --- */
.tabla-wrap{
  overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r);
  background:
    linear-gradient(90deg, var(--superficie) 30%, rgba(255,255,255,0)) left / 36px 100% no-repeat local,
    linear-gradient(270deg, var(--superficie) 30%, rgba(255,255,255,0)) right / 36px 100% no-repeat local,
    linear-gradient(90deg, rgba(13,20,36,.10), rgba(13,20,36,0)) left / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(13,20,36,.10), rgba(13,20,36,0)) right / 14px 100% no-repeat scroll,
    var(--superficie);
}
table.t{width:100%; border-collapse:collapse; min-width:660px; font-size:14.5px}
table.t th{text-align:left; padding:16px 20px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); border-bottom:1px solid var(--linea); background:var(--papel); white-space:nowrap}
table.t td{padding:17px 20px; border-bottom:1px solid var(--linea); color:var(--texto-2); vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tr.hi td{background:var(--lavado); color:var(--texto)}
table.t td b{color:var(--texto); font-weight:600}
table.t .num{font-family:var(--f-mono); font-size:13px; color:var(--texto); white-space:nowrap}

/* --- Fases --- */
.fase{border:1px solid var(--linea); border-radius:var(--r); padding:28px; background:var(--superficie); box-shadow:var(--s-1)}
.fase.ahora{border-color:var(--azul-line); background:var(--lavado)}
.fase .f{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--azul-ia)}
.fase.next .f{color:var(--texto-3)}
.fase h3{margin:12px 0 11px}
.fase p{color:var(--texto-2); font-size:14.5px}

/* --- Stack --- */
.marquee{overflow:hidden; border-block:1px solid var(--linea); padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex; gap:46px; width:max-content; animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .tec{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:14px; font-weight:600; letter-spacing:-.005em; color:var(--texto-2);
}
.marquee-track .tec svg{color:var(--azul-ia); flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- Nota / upsell --- */
.nota{padding:22px 24px; border:1px dashed var(--linea-2); border-radius:var(--r); color:var(--texto-2); font-size:14.5px; background:var(--papel)}
.nota b{color:var(--texto)}
.upsell{border:1px solid var(--azul-line); border-radius:var(--r-lg); padding:clamp(28px,4vw,44px); background:var(--lavado)}
.upsell .kicker{margin-bottom:16px}
.upsell h3{font-size:clamp(20px,2.4vw,28px); margin-bottom:14px; max-width:26ch}
.upsell p{color:var(--texto-2); max-width:62ch; margin-bottom:18px}
.upsell li{padding:6px 0; color:var(--texto-2); font-size:14.5px; display:flex; gap:10px}
.upsell li::before{content:'—'; color:var(--azul-ia); flex:none}

/* --- Cierre --- */
.cierre{text-align:center; padding-block:clamp(50px,9vh,96px)}
.cierre h2{margin-bottom:20px}
.cierre .lead{margin:0 auto 38px; text-align:center}
.contacto{display:flex; gap:34px; justify-content:center; flex-wrap:wrap; font-size:14px; color:var(--texto-2)}
.contacto b{display:block; color:var(--texto); font-weight:600}
.contacto > div > span{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--texto-3); margin:3px 0 5px}

/* ============================================================
   AJUSTES RESPONSIVE DE COMPONENTES
   ============================================================ */
@media (max-width:980px){
  .agentes-duo{grid-template-columns:1fr}
}
/* En pantallas estrechas el plano se desplaza en horizontal antes que encogerse
   hasta ser ilegible */
@media (max-width:1100px){
  .diagrama-zona{width:100%; margin-left:0; transform:none}
  .diagrama{overflow-x:auto; padding-bottom:6px}
  .diagrama > svg{min-width:1000px}
}
@media (max-width:760px){
  .oc-pop{position:static; transform:none; opacity:1; pointer-events:auto; width:100%; margin-top:18px}
  .oc-sheet{grid-template-columns:1fr; background:none; border:0; box-shadow:none; padding:0}
  .opciones{display:block}
  .oc{width:100%}
  .oc-pista{display:none}
  .oc-velo{display:none}
}
@media (max-width:900px){
  .mocks{gap:32px}
  .mocks > .macbook, .mocks > .ipad{flex:1 1 100%}
}
@media (max-width:760px){
  .pasos{grid-template-columns:1fr; gap:0}
  .paso-t{position:relative; padding:0 0 26px 52px}
  .paso-t:last-child{padding-bottom:0}
  .paso-t .cab{position:absolute; left:0; top:0; margin:0}
  .paso-t .linea{display:none}
  .paso-t::before{content:''; position:absolute; left:17.5px; top:42px; bottom:8px; width:1.5px; background:var(--azul-200)}
  .paso-t:last-child::before{display:none}
}
@media (max-width:640px){
  .hero{padding-top:92px}
  .puntos{grid-template-columns:1fr}
  .punto-p{min-height:0}
  .hero .chip{font-size:11.5px; padding:7px 13px}
  .stats{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .duo, .trio{grid-template-columns:1fr}
  .quote{padding-left:18px; font-size:19px}
  .card, .opt, .agente, .fase{padding:22px}
  .upsell{padding:26px 22px}
  /* El mapa de proceso pasa a lectura vertical */
  .ruta-flujo{flex-direction:column; row-gap:0}
  .par{flex-direction:column; align-items:stretch}
  .nodo-p{width:100%}
  .flecha{flex:0 0 auto; width:100%; flex-direction:row; gap:10px; padding:8px 0 8px 20px; justify-content:flex-start}
  .flecha .ln{width:2px; height:22px}
  .flecha .ln::after{right:50%; top:auto; bottom:0; transform:translateX(50%) rotate(135deg)}
  /* En columna el trazo corre en vertical: los degradados giran con él */
  .tz-discontinua .ln{background:repeating-linear-gradient(180deg, var(--c) 0 5px, transparent 5px 9px) !important}
  .tz-punteada    .ln{background:repeating-linear-gradient(180deg, var(--c) 0 2px, transparent 2px 5px) !important}
  .tz-doble       .ln{background:linear-gradient(90deg, var(--c) 0 40%, transparent 40% 60%, var(--c) 60% 100%) !important; width:5px !important; height:22px !important}
  .flecha .et{max-width:none; text-align:left}
  .leyenda{gap:12px 18px; margin-bottom:24px}
  .linea{gap:10px}
  .contacto{gap:22px}
  .mocks > .iphone{flex:0 0 auto; max-width:260px; margin:0 auto}
}
@media (max-width:400px){
  .mocks > .iphone{max-width:100%}
}

/* ============================================================
   AJUSTES RESPONSIVE DE COMPONENTES
   ============================================================ */
@media (max-width:980px){
  .agentes-duo{grid-template-columns:1fr}
}
/* En pantallas estrechas el plano se desplaza en horizontal antes que encogerse
   hasta ser ilegible */
@media (max-width:1100px){
  .diagrama-zona{width:100%; margin-left:0; transform:none}
  .diagrama{overflow-x:auto; padding-bottom:6px}
  .diagrama > svg{min-width:1000px}
}
@media (max-width:760px){
  .oc-pop{position:static; transform:none; opacity:1; pointer-events:auto; width:100%; margin-top:18px}
  .oc-sheet{grid-template-columns:1fr; background:none; border:0; box-shadow:none; padding:0}
  .opciones{display:block}
  .oc{width:100%}
  .oc-pista{display:none}
  .oc-velo{display:none}
}
@media (max-width:900px){
  .mocks{gap:32px}
  .mocks > .macbook, .mocks > .ipad{flex:1 1 100%}
}
@media (max-width:760px){
  .pasos{grid-template-columns:1fr; gap:0}
  .paso-t{position:relative; padding:0 0 26px 52px}
  .paso-t:last-child{padding-bottom:0}
  .paso-t .cab{position:absolute; left:0; top:0; margin:0}
  .paso-t .linea{display:none}
  .paso-t::before{content:''; position:absolute; left:17.5px; top:42px; bottom:8px; width:1.5px; background:var(--azul-200)}
  .paso-t:last-child::before{display:none}
}
@media (max-width:640px){
  .hero{padding-top:92px}
  .puntos{grid-template-columns:1fr}
  .punto-p{min-height:0}
  .hero .chip{font-size:11.5px; padding:7px 13px}
  .stats{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .duo, .trio{grid-template-columns:1fr}
  .quote{padding-left:18px; font-size:19px}
  .card, .opt, .agente, .fase{padding:22px}
  .upsell{padding:26px 22px}
  /* El mapa de proceso pasa a lectura vertical */
  .ruta-flujo{flex-direction:column; row-gap:0}
  .par{flex-direction:column; align-items:stretch}
  .nodo-p{width:100%}
  .flecha{flex:0 0 auto; width:100%; flex-direction:row; gap:10px; padding:8px 0 8px 20px; justify-content:flex-start}
  .flecha .ln{width:2px; height:22px}
  .flecha .ln::after{right:50%; top:auto; bottom:0; transform:translateX(50%) rotate(135deg)}
  /* En columna el trazo corre en vertical: los degradados giran con él */
  .tz-discontinua .ln{background:repeating-linear-gradient(180deg, var(--c) 0 5px, transparent 5px 9px) !important}
  .tz-punteada    .ln{background:repeating-linear-gradient(180deg, var(--c) 0 2px, transparent 2px 5px) !important}
  .tz-doble       .ln{background:linear-gradient(90deg, var(--c) 0 40%, transparent 40% 60%, var(--c) 60% 100%) !important; width:5px !important; height:22px !important}
  .flecha .et{max-width:none; text-align:left}
  .leyenda{gap:12px 18px; margin-bottom:24px}
  .linea{gap:10px}
  .contacto{gap:22px}
  .mocks > .iphone{flex:0 0 auto; max-width:260px; margin:0 auto}
}
@media (max-width:400px){
  .mocks > .iphone{max-width:100%}
}

/* --- Bloque de demo: mockup con pestañas de agente --- */
.demo-intro{text-align:center; max-width:62ch; margin:0 auto clamp(28px,4vh,40px)}
.demo-intro .kicker{margin-bottom:16px}
.demo-intro p{color:var(--texto-2); font-size:clamp(15px,1.6vw,18px)}
.demo .tabs{justify-content:center; margin:clamp(24px,3.5vh,34px) 0 0}
.demo .pane{padding-top:0}