/*
 * BravoLabs · estilos de la landing.
 *
 * Se encola SOLO en la plantilla page-bravolabs.php y DESPUES de global.css, así que
 * no hace falta duplicar tokens ni pelear el cascade con un <style> tardío. Todo va
 * scopeado bajo .bl para no tocar el header ni el footer del theme.
 *
 * Contraste medido sobre #0a0a0a: --bl-soft 10.2:1, --bl-muted 5.66:1, rojo 4.59:1.
 * El rojo se usa SOLO en texto grande y en botones con texto negro: sobre blanco da
 * 4.31 y no pasa AA en texto pequeño.
 *
 * Movimiento: nada mueve layout (cero CLS) y todo falla VISIBLE. Los estados
 * "escondidos" solo existen bajo html.bl-js, que pone el JS al arrancar; sin JS o con
 * prefers-reduced-motion la página se ve completa desde el primer cuadro.
 */
.bl{
  --bl-red:#EF1E1C; --bl-ink:#0a0a0a; --bl-w:#fff;
  --bl-soft:rgba(255,255,255,.72);
  --bl-muted:rgba(255,255,255,.52);
  --bl-line:rgba(255,255,255,.14);
  --bl-line2:rgba(255,255,255,.28);
  --bl-panel:rgba(255,255,255,.04);
  background:var(--bl-ink);
  color:var(--bl-w);
  font-family:var(--font-primary);
  font-size:16px;
  line-height:1.65;
}
.bl *{box-sizing:border-box}
.bl .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.bl section{padding:96px 0;border-bottom:1px solid var(--bl-line)}
.bl h1,.bl h2,.bl h3{letter-spacing:-.02em;margin:0}
.bl p{color:var(--bl-soft);margin:0}
.bl .eyebrow{font-size:12px;font-weight:600;color:var(--bl-muted);margin-bottom:20px}
.bl h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;line-height:1.18;margin-bottom:16px;max-width:760px;color:var(--bl-w)}
.bl h3{color:var(--bl-w)}
.bl .lead{font-size:17px;color:var(--bl-soft);max-width:720px}
.bl .accent{color:var(--bl-red)}
.bl .chip{display:inline-block;font-size:12px;font-weight:600;color:var(--bl-soft);border:1px solid var(--bl-line2);padding:5px 10px;border-radius:2px;line-height:1.3}

.bl .btn{display:inline-block;padding:15px 26px;font-size:14px;font-weight:700;border-radius:2px;text-decoration:none;border:0;font-family:inherit;cursor:pointer}
.bl .btn-primario{background:var(--bl-red);color:#0a0a0a}
.bl .btn-primario:hover{background:#ff3b39;color:#0a0a0a}
.bl .btn-secundario{border:1px solid var(--bl-line2);color:var(--bl-w)}
.bl .btn-secundario:hover{border-color:var(--bl-w);color:var(--bl-w)}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
/* global.css impone a .hero min-height:100vh, display:flex, align-items:center y
   overflow:hidden. Aquí el hero es un bloque normal, así que se neutraliza. */
.bl .hero{display:block;min-height:0;align-items:initial;overflow:visible;position:static;
  padding:140px 0 72px;border-bottom:1px solid var(--bl-line);background:var(--bl-ink)}
.bl .hero h1{font-size:clamp(38px,6vw,68px);font-weight:700;line-height:1.05;max-width:900px;color:var(--bl-w)}
.bl .hero h1 .accent{display:block}
.bl .hero p{font-size:19px;max-width:620px;margin-top:26px}
.bl .hero-btns{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
.bl .chips{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bl .chips li{font-size:12px;font-weight:600;color:var(--bl-soft);border:1px solid var(--bl-line);padding:6px 11px;border-radius:2px}
.bl .chips li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bl-red);margin-right:8px;vertical-align:1px}

/* ─── Hero: tablero de integración ─────────────────────────────────────── */
/* Un circuito, no un grafo radial: sistemas que alimentan a la izquierda, los
   agentes al centro, los que se actualizan a la derecha. Por las trazas viajan
   pulsos; cada traza tiene su propio periodo, así que el ojo no encuentra el loop. */
.bl .hero-vis{margin-top:44px}
.bl .hv{display:block;width:100%;height:auto;aspect-ratio:1056/260}
.bl .hv-m{display:none;aspect-ratio:335/180}
.bl .hv text{font-family:var(--font-primary);font-size:12px;font-weight:600;fill:var(--bl-soft);text-anchor:middle}
.bl .hv .t2{font-size:13px;font-weight:700;fill:var(--bl-w)}
.bl .hv .sub{font-size:11px;font-weight:500;fill:var(--bl-muted)}
.bl .hv .tr path{fill:none;stroke:var(--bl-line2);stroke-width:1}
.bl .hv .cj rect{fill:var(--bl-ink);stroke:var(--bl-line2);stroke-width:1}
.bl .hv .cj .cc{fill:var(--bl-panel)}
.bl .hv .pt rect{fill:var(--bl-line2)}
/* El pulso: 10 unidades de un path normalizado a 100. Entra por fuera del inicio y
   sale por fuera del final; la cabeza toca el destino al 91%. */
.bl .hv .sg path{fill:none;stroke:var(--bl-red);stroke-width:2;stroke-linecap:round;stroke-dasharray:10 90;stroke-dashoffset:10;
  animation:bl-sig var(--d,2.6s) linear var(--r,0s) infinite;animation-direction:var(--dir,normal)}
.bl .hv .sg-h path{stroke-width:7;opacity:.16}  /* halo con función: legibilidad sobre 1px */
.bl .hv .s1{--d:2.4s;--r:0s}
.bl .hv .s1r{--d:2.4s;--r:1.3s;--dir:reverse}
.bl .hv .s2{--d:3.1s;--r:.8s}
.bl .hv .s3{--d:2.7s;--r:1.9s}
.bl .hv .s4{--d:2.5s;--r:.4s}
.bl .hv .s5{--d:2.9s;--r:1.5s}
@keyframes bl-sig{from{stroke-dashoffset:10}to{stroke-dashoffset:-100}}
/* Lo que se enciende: puertos de entrada y cajas destino al llegar, puertos de salida al partir */
.bl .hv .p1{animation:bl-port 2.4s linear 0s infinite}
.bl .hv .p2{animation:bl-port 3.1s linear .8s infinite}
.bl .hv .p3{animation:bl-port 2.7s linear 1.9s infinite}
.bl .hv .p4{animation:bl-port-out 2.5s linear .4s infinite}
.bl .hv .p5{animation:bl-port-out 2.9s linear 1.5s infinite}
.bl .hv .c1{animation:bl-caja 2.4s linear 1.3s infinite}
.bl .hv .c4{animation:bl-caja 2.5s linear .4s infinite}
.bl .hv .c5{animation:bl-caja 2.9s linear 1.5s infinite}
@keyframes bl-port{0%,86%,100%{fill:var(--bl-line2)}90%,95%{fill:var(--bl-red)}}
@keyframes bl-port-out{0%,3%{fill:var(--bl-red)}8%,100%{fill:var(--bl-line2)}}
@keyframes bl-caja{0%,86%,100%{stroke:var(--bl-line2)}90%,95%{stroke:var(--bl-red)}}
.bl .pausa *,.bl .pausa *::before{animation-play-state:paused!important}

/* ─── Problema: el tablero antes y después ─────────────────────────────── */
/* Kanban de tres columnas con seis tarjetas. "Hoy": entran a Nuevos y se enfrían
   una por una. "Con el sistema": cada una cruza a Contactados y a Agendados con su
   palomita. Todo CSS con retraso por tarjeta (--i × 0.6 s), periodo 17 s. Las
   tarjetas viven en una capa absoluta y solo se mueven con transform: CLS cero. */
.bl .kb{--T:17s;--card:52px;--gap:12px;--kgap:10px;--pad:12px;margin-top:40px;max-width:880px;position:relative;font-size:13px}
.bl .kb-top{display:flex;justify-content:space-between;align-items:center;height:36px;margin-bottom:10px;font-size:12px;font-weight:600;color:var(--bl-muted)}
.bl .kb-fase{position:relative;display:inline-block;width:9em;height:1.4em}
.bl .kb-fase span{position:absolute;left:0;top:0;color:var(--bl-w);font-size:14px;white-space:nowrap}
.bl .kb-fase .f-hoy{animation:bl-f-hoy var(--T) linear infinite}
.bl .kb-fase .f-sis{opacity:0;animation:bl-f-sis var(--T) linear infinite}
.bl .kb-prog{display:flex;gap:4px}
.bl .kb-prog i{width:9px;height:9px;border:1px solid var(--bl-line2);animation:bl-kprog var(--T) linear calc(var(--i)*.6s) infinite}
.bl .kb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kgap)}
.bl .kb-col{border:1px solid var(--bl-line);background:var(--bl-panel);height:calc(42px + 6*var(--card) + 5*var(--gap) + 14px);border-radius:2px}
.bl .kb-h{height:42px;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:600;color:var(--bl-muted);border-bottom:1px solid var(--bl-line)}
.bl .kb-cards{position:absolute;left:0;right:0;top:calc(36px + 10px + 42px + 8px);pointer-events:none}
.bl .kb-card{position:absolute;left:6px;top:calc(var(--i)*(var(--card) + var(--gap)));width:calc((100% - 2*var(--kgap))/3 - var(--pad));height:var(--card);
  border:1px solid var(--bl-line2);background:var(--bl-ink);border-radius:2px;padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  opacity:0;animation:bl-kmove var(--T) linear calc(var(--i)*.6s) infinite,bl-klook var(--T) linear calc(var(--i)*.6s) infinite}
.bl .kb-nom{color:var(--bl-w);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl .kb-est{position:relative;height:1.3em;font-size:11px;font-weight:600}
.bl .kb-est>span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;display:flex;align-items:center;gap:6px}
.bl .e-nuevo{color:var(--bl-muted);animation:bl-e-nuevo var(--T) linear calc(var(--i)*.6s) infinite}
.bl .e-frio{color:var(--bl-soft);animation:bl-e-frio var(--T) linear calc(var(--i)*.6s) infinite}
.bl .e-frio::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bl-red)}
.bl .e-resp{color:var(--bl-w);animation:bl-e-resp var(--T) linear calc(var(--i)*.6s) infinite}
.bl .e-ok{color:#2ecc71;animation:bl-e-ok var(--T) linear calc(var(--i)*.6s) infinite}
.bl .e-ok svg{width:12px;height:12px;flex-shrink:0}
.bl .e-ok path{fill:none;stroke:#2ecc71;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;animation:bl-tick var(--T) linear calc(var(--i)*.6s) infinite}
/* Tiempo de la tarjeta 0 sobre 17 s: aparece 0-0.3 s (1.8%), se enfría a 3 s (17.6%),
   cruza a Contactados 6.5-7 s (38.2-41.2%), a Agendados 8-8.5 s (47.1-50%), se apaga
   a 13 s (76.5-78.8%) y vuelve al inicio invisible. La tarjeta 5 va 3 s después y
   cierra a 16 s, dentro del periodo. El desplazamiento es el ancho de la columna más
   el hueco: la tarjeta mide una columna, así que 100% + hueco = una columna. */
@keyframes bl-kmove{
  0%,38.2%{transform:translateX(0)}
  41.2%,47.1%{transform:translateX(calc(100% + var(--pad) + var(--kgap)))}
  50%,78.8%{transform:translateX(calc(200% + 2*var(--pad) + 2*var(--kgap)))}
  78.9%,100%{transform:translateX(0)}
}
@keyframes bl-klook{
  0%{opacity:0;border-color:var(--bl-line2)}
  1.8%,17.6%{opacity:1;border-color:var(--bl-line2)}
  19.4%,38.2%{opacity:.4;border-color:var(--bl-line)}
  39.5%,49%{opacity:1;border-color:var(--bl-line2)}
  50%,51.5%{opacity:1;border-color:#2ecc71}
  53%,76.5%{opacity:1;border-color:var(--bl-line2)}
  78.8%,100%{opacity:0;border-color:var(--bl-line2)}
}
@keyframes bl-e-nuevo{0%,17.6%{opacity:1}19.4%,100%{opacity:0}}
@keyframes bl-e-frio{0%,17.6%{opacity:0}19.4%,38.2%{opacity:1}39.5%,100%{opacity:0}}
@keyframes bl-e-resp{0%,38.2%{opacity:0}39.5%,47.1%{opacity:1}48.5%,100%{opacity:0}}
@keyframes bl-e-ok{0%,47.1%{opacity:0}48.5%,100%{opacity:1}}
@keyframes bl-tick{0%,48.5%{stroke-dashoffset:14}52%,100%{stroke-dashoffset:0}}
@keyframes bl-kprog{0%,49%{background:transparent;border-color:var(--bl-line2)}50%,76.5%{background:#2ecc71;border-color:#2ecc71}78.8%,100%{background:transparent;border-color:var(--bl-line2)}}
@keyframes bl-f-hoy{0%,38.2%{opacity:1}39.5%,78.8%{opacity:0}80%,100%{opacity:1}}
@keyframes bl-f-sis{0%,38.2%{opacity:0}39.5%,78.8%{opacity:1}80%,100%{opacity:0}}

/* ─── Dualidad ─────────────────────────────────────────────────────────── */
.bl .dual{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:48px;position:relative}
.bl .dcol{min-width:0}
.bl .dcol+.dcol{border-left:1px solid var(--bl-line);padding-left:56px}
.bl .dname{font-size:18px;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--bl-line2);margin-bottom:6px}
.bl .drole{font-size:12px;font-weight:600;color:var(--bl-muted);display:block;margin-top:4px}
.bl .ditem{padding:14px 0;border-bottom:1px solid var(--bl-line);font-size:15px;transition:color .2s ease}
.bl .ditem:last-child{border-bottom:0}
.bl .dsub{display:block;color:var(--bl-muted);font-size:13px;margin-top:2px}
.bl .ditem.ligado{color:var(--bl-red)}
.bl .ditem.ligado .dsub{color:var(--bl-soft)}
.bl .bl-hilos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bl .bl-hilo{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke .25s ease}
.bl .bl-hilos.trazado .bl-hilo{animation:bl-trazar .9s ease forwards}
.bl .bl-hilos.trazado .bl-hilo:nth-child(2){animation-delay:.12s}
.bl .bl-hilos.trazado .bl-hilo:nth-child(3){animation-delay:.24s}
.bl .bl-hilos.trazado .bl-hilo:nth-child(4){animation-delay:.36s}
.bl .bl-hilo.vivo{stroke:var(--bl-red);stroke-width:1.6}
@keyframes bl-trazar{to{stroke-dashoffset:0}}

/* ─── Calculadora ──────────────────────────────────────────────────────── */
.bl .calc{margin-top:44px;border:1px solid var(--bl-line2)}
.bl .calc-tabs{display:flex;border-bottom:1px solid var(--bl-line2)}
.bl .calc-tab{flex:1;background:none;border:0;border-right:1px solid var(--bl-line);color:var(--bl-muted);font-family:inherit;font-size:14px;font-weight:700;padding:18px 12px;cursor:pointer;position:relative;transition:color .2s ease}
.bl .calc-tab:last-child{border-right:0}
.bl .calc-tab small{display:block;font-size:12px;font-weight:500;margin-top:2px;color:var(--bl-muted)}
.bl .calc-tab[aria-pressed="true"]{color:var(--bl-w)}
.bl .calc-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bl-red);transform:scaleX(0);transition:transform .25s ease}
.bl .calc-tab[aria-pressed="true"]::after{transform:scaleX(1)}
.bl .calc-cuerpo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.bl .calc-form{padding:32px;border-right:1px solid var(--bl-line);min-width:0}
.bl .calc-pregunta{font-size:20px;font-weight:600;color:var(--bl-w);line-height:1.3}
.bl .calc-preset{font-size:13px;color:var(--bl-muted);margin-top:6px}
.bl .calc-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:24px}
.bl .campo{display:flex;flex-direction:column;min-width:0}
.bl .campo label{font-size:12px;font-weight:600;color:var(--bl-muted);margin-bottom:6px;line-height:1.35;min-height:2.7em}
.bl .campo-in{display:flex;align-items:center;border:1px solid var(--bl-line2);border-radius:2px;transition:border-color .2s ease}
.bl .campo-in:focus-within{border-color:var(--bl-red);outline:2px solid var(--bl-red);outline-offset:1px}
.bl .campo-in:has(input:invalid){border-color:var(--bl-red);border-style:dashed}
.bl .campo-in input{flex:1;min-width:0;background:transparent;border:0;color:var(--bl-w);font-family:inherit;font-size:16px;font-weight:600;padding:11px 12px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.bl .campo-in input::-webkit-outer-spin-button,.bl .campo-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bl .campo-in input:focus{outline:0}
.bl .campo-in span{font-size:12px;font-weight:600;color:var(--bl-muted);padding:0 12px 0 0;white-space:nowrap}
.bl .calc-inv{margin-top:28px;padding-top:22px;border-top:1px solid var(--bl-line)}
.bl .calc-inv-t{font-size:14px;font-weight:700;color:var(--bl-w)}
.bl .calc-inv-t span{font-size:12px;font-weight:500;color:var(--bl-muted);margin-left:8px}
.bl .calc-campos-inv{margin-top:14px}

.bl .calc-res{padding:32px;background:var(--bl-panel);min-width:0}
.bl .res-big{display:grid;gap:18px}
.bl .res-k{padding-bottom:16px;border-bottom:1px solid var(--bl-line)}
.bl .res-l{display:block;font-size:12px;font-weight:600;color:var(--bl-muted);margin-bottom:4px}
.bl .res-k strong{display:block;font-size:clamp(28px,3vw,36px);font-weight:700;line-height:1.05;color:var(--bl-w);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bl .res-ret strong{color:var(--bl-red)}
.bl .res-pay.no strong{font-size:22px}
.bl .res-graf{display:block;width:100%;height:auto;margin-top:22px}
.bl .res-graf .g-cero{stroke:var(--bl-line2);stroke-width:1}
.bl .res-graf .g-bar{fill:var(--bl-red);transition:y .35s ease,height .35s ease,fill .35s ease}
.bl .res-graf .g-bar.neg{fill:rgba(255,255,255,.22)}
.bl .res-graf .g-t{fill:rgba(255,255,255,.52);font-size:9px;font-family:var(--font-primary)}
.bl .res-techo{font-size:13px;color:var(--bl-muted);margin-top:10px}
.bl .res-techo strong{color:var(--bl-w);font-weight:700}
.bl .res-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.bl .res-card{border:1px solid var(--bl-line);padding:14px;min-width:0}
.bl .res-card strong{display:block;font-size:20px;font-weight:700;color:var(--bl-w);font-variant-numeric:tabular-nums;line-height:1.1}
.bl .res-card small{display:block;font-size:11px;color:var(--bl-muted);margin-top:6px;line-height:1.35}
.bl .res-cta{margin-top:22px;width:100%;text-align:center}
.bl .res-como{margin-top:16px;font-size:13px;color:var(--bl-muted)}
.bl .res-como summary{cursor:pointer;color:var(--bl-soft);font-weight:600}
.bl .res-como p{font-size:13px;margin-top:8px;color:var(--bl-muted)}

/* El loop de la pauta agéntica: un anillo con un punto que recorre las cuatro
   etapas. Es la historia del escenario: cada vuelta mejora la siguiente. */
.bl .res-loop{position:relative;width:200px;height:200px;margin:22px auto 0}
.bl .res-loop svg{width:100%;height:100%;display:block}
.bl .loop-ring{fill:none;stroke:var(--bl-line2);stroke-width:1}
.bl .loop-viaja{fill:none;stroke:var(--bl-red);stroke-width:3;stroke-linecap:round;stroke-dasharray:28 462;animation:bl-loop 4s linear infinite}
@keyframes bl-loop{to{stroke-dashoffset:-490}}
.bl .res-loop span{position:absolute;left:50%;top:50%;font-size:12px;font-weight:600;color:var(--bl-w);background:var(--bl-ink);padding:3px 8px;border:1px solid var(--bl-line2);border-radius:2px;
  transform:translate(-50%,-50%) rotate(calc(var(--a)*90deg - 90deg)) translate(78px) rotate(calc(90deg - var(--a)*90deg))}

/* Sin JS: los tres ejemplos en texto. Con JS se esconde en cuanto la calculadora existe. */
.bl .calc-estatico{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bl .calc-estatico>div{border:1px solid var(--bl-line);padding:20px}
.bl .calc-estatico b{display:block;font-size:14px;margin-bottom:6px}
.bl .calc-estatico span{font-size:14px;color:var(--bl-soft)}
.bl .calc:not([hidden])+.calc-estatico{display:none}

/* ─── Verticales ───────────────────────────────────────────────────────── */
.bl .verts{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;margin-top:52px}
.bl .vert{padding-bottom:28px;border-bottom:1px solid var(--bl-line);min-width:0;position:relative}
.bl .vert h3{font-size:22px;font-weight:600;margin-bottom:10px}
.bl .vert>p{font-size:15px}
.bl .vert .chip{margin-top:16px}
.bl .vsola{margin-top:16px;font-size:14px;color:var(--bl-soft)}
.bl .vsola b{display:inline-block;font-size:12px;font-weight:600;color:var(--bl-muted);margin-right:10px}
.bl .vert::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--bl-red);transition:width .35s ease}
.bl .vert:hover::after,.bl .vert:focus-within::after{width:100%}

/* ─── Chat vivo ────────────────────────────────────────────────────────── */
.bl .chat{border:1px solid var(--bl-line);max-width:560px;margin-top:44px}
.bl .chat-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--bl-line)}
.bl .chat-ini{width:36px;height:36px;background:var(--bl-red);color:#0a0a0a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border-radius:50%;flex-shrink:0}
.bl .chat-nom{font-size:14px;font-weight:600}
.bl .chat-est{font-size:12px;color:var(--bl-muted)}
.bl .chat-est::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#2ecc71;margin-right:6px;vertical-align:1px}
.bl .chat-hora{margin-left:auto;font-size:12px;color:var(--bl-muted);font-variant-numeric:tabular-nums}
.bl .chat-body{padding:20px;min-height:372px;position:relative}
.bl .msg{margin-bottom:16px}
.bl .msg:last-child{margin-bottom:0}
.bl .msg b{display:block;font-size:11px;font-weight:600;color:var(--bl-muted);margin-bottom:6px}
.bl .burbuja{padding:13px 16px;font-size:14px;line-height:1.55;border:1px solid var(--bl-line);color:var(--bl-soft);max-width:88%}
.bl .msg.ag .burbuja{background:rgba(255,255,255,.05);border-color:var(--bl-line2);color:var(--bl-w);margin-left:auto}
.bl .accion{display:flex;flex-wrap:wrap;gap:8px;border-left:2px solid var(--bl-red);padding:4px 0 4px 14px}
.bl .accion span{font-size:12px;font-weight:600;color:var(--bl-w);border:1px solid var(--bl-line2);padding:4px 9px;border-radius:2px}
/* Con JS el chat se reproduce en loop: cada mensaje entra cuando le toca y aparece
   un "escribiendo" antes de cada respuesta del agente. */
.bl-js .chat.loop .msg{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.bl-js .chat.loop .msg.dicho{opacity:1;transform:none}
.bl .escribe{display:none;position:absolute;right:20px;top:0;margin-top:23px;gap:4px;padding:12px 16px;border:1px solid var(--bl-line2);background:rgba(255,255,255,.05);width:max-content}
.bl .escribe.on{display:flex}
.bl .escribe i{width:6px;height:6px;border-radius:50%;background:var(--bl-soft);animation:bl-punto 1s infinite}
.bl .escribe i:nth-child(2){animation-delay:.15s}
.bl .escribe i:nth-child(3){animation-delay:.3s}
@keyframes bl-punto{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ─── Casos ────────────────────────────────────────────────────────────── */
.bl .casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.bl .caso{border:1px solid var(--bl-line);padding:20px;min-width:0;transition:border-color .25s ease}
.bl .caso:hover{border-color:var(--bl-line2)}
.bl .caso-vert{font-size:11px;font-weight:600;color:var(--bl-muted);margin-bottom:12px}
.bl .caso-cli{font-size:16px;font-weight:700;margin-bottom:8px;line-height:1.25}
.bl .caso p{font-size:14px}

/* ─── Plataforma ───────────────────────────────────────────────────────── */
.bl .plat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.bl .plat>div{min-width:0;border-top:2px solid var(--bl-line2);padding-top:16px}
.bl .plat h3{font-size:16px;font-weight:600;margin-bottom:8px}
.bl .plat p{font-size:14px}

/* ─── Diagnóstico, FAQ, cierre ─────────────────────────────────────────── */
.bl .diag{border:1px solid var(--bl-line2);padding:44px}
.bl .diag-lista{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.bl .diag-lista>div{min-width:0}
.bl .diag-lista b{display:block;font-size:12px;font-weight:600;color:var(--bl-muted);margin-bottom:6px}
.bl .diag-lista span{font-size:15px;color:var(--bl-w)}

.bl .faq{max-width:780px;margin-top:44px}
.bl .faq-item{border-bottom:1px solid var(--bl-line)}
.bl .faq-q{width:100%;background:none;border:0;color:var(--bl-w);font-family:inherit;font-size:16px;font-weight:600;text-align:left;padding:24px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.bl .faq-ico{font-size:20px;color:var(--bl-red);flex-shrink:0;transition:transform .2s ease}
.bl .faq-item.open .faq-ico{transform:rotate(45deg)}
.bl .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.bl .faq-item.open .faq-a{max-height:400px}
.bl .faq-a p{font-size:15px;padding-bottom:24px;max-width:680px}

.bl .cierre{padding:96px 0;border-bottom:0}
.bl .cierre h2{font-size:clamp(28px,4vw,44px);font-weight:700;max-width:760px}
.bl .form{margin-top:44px;max-width:640px}
.bl .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bl .fg{display:flex;flex-direction:column;min-width:0}
.bl .fg.full{grid-column:1/-1}
.bl .fg label{font-size:12px;font-weight:600;color:var(--bl-muted);margin-bottom:8px}
.bl .fg input,.bl .fg select,.bl .fg textarea{background:transparent;border:1px solid var(--bl-line2);color:var(--bl-w);font-family:inherit;font-size:15px;padding:13px 14px;border-radius:2px;width:100%}
.bl .fg input::placeholder,.bl .fg textarea::placeholder{color:rgba(255,255,255,.55)}
.bl .fg input:focus,.bl .fg select:focus,.bl .fg textarea:focus{outline:2px solid var(--bl-red);outline-offset:1px;border-color:transparent}
.bl .fg textarea{min-height:110px;resize:vertical}
.bl .fg select option{background:#0a0a0a;color:#fff}
.bl .form .btn{margin-top:24px;width:100%;text-align:center}

/* ─── Entrada al scroll ────────────────────────────────────────────────── */
/* Solo bajo html.bl-js y solo hasta que el observer marca .visto. El JS marca de
   entrada todo lo que ya está en pantalla y, por si el observer nunca dispara,
   marca el resto por tiempo: nada puede quedarse invisible. */
.bl-js .bl [data-entra]>.wrap{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.bl-js .bl [data-entra].visto>.wrap{opacity:1;transform:none}

/* El titular se descubre. Las clases las pone el JS: si no corre, el texto está
   visible desde el primer cuadro. Nunca al revés. */
.bl .hero h1 .accent{position:relative}
.bl .hero h1 .accent.entrando{clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.2,.7,.2,1)}
.bl .hero h1 .accent.entrando::after{content:"";position:absolute;top:.12em;right:-.06em;width:.05em;height:.78em;background:var(--bl-red)}
.bl .hero h1 .accent.revelado{clip-path:inset(0 0 0 0)}

/* ─── Responsivo ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .bl .hero-vis{margin-top:32px}
  .bl .hv-d{display:none}.bl .hv-m{display:block}
  .bl .hv text{font-size:11px}
}
@media(max-width:600px){
  .bl .kb{--card:48px;--gap:10px;--kgap:6px;--pad:8px;font-size:12px}
  .bl .kb-h{padding:0 8px;font-size:11px}
  .bl .kb-card{left:4px;padding:6px 7px}
  .bl .kb-nom{font-size:11.5px}
  .bl .kb-est{font-size:10px}
  .bl .kb-est>span{gap:4px}
}
@media(max-width:1024px){
  .bl .casos,.bl .plat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .bl .dual,.bl .verts,.bl .diag-lista,.bl .fgrid,.bl .calc-cuerpo,.bl .calc-campos,.bl .calc-estatico{grid-template-columns:1fr;gap:32px}
  .bl .calc-campos{gap:14px}
  .bl .calc-form{border-right:0;border-bottom:1px solid var(--bl-line);padding:24px 20px}
  .bl .calc-res{padding:24px 20px}
  .bl .campo label{min-height:0}
  .bl .dcol+.dcol{border-left:0;border-top:1px solid var(--bl-line);padding:32px 0 0}
  .bl .bl-hilos{display:none}
  .bl section,.bl .cierre{padding:64px 0}
  .bl .hero{padding:104px 0 56px}
  .bl .diag{padding:28px}
  .bl .wrap{padding:0 20px}
  .bl .calc-tab{padding:14px 8px;font-size:13px}
  .bl .calc-tab small{display:none}
  .bl .res-cards{grid-template-columns:1fr}
  /* Casos: de rejilla a riel con scroll-snap. Son una línea cada uno, se escanean. */
  .bl .casos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:40px -20px 0;padding:0 20px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bl .casos::-webkit-scrollbar{display:none}
  .bl .caso{flex:0 0 78%;scroll-snap-align:start}
  .bl .plat{grid-template-columns:1fr;gap:24px}
  .bl .chat-body{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  /* Cuadros fijos: pulsos a un tercio de cada traza; la lista en su estado "Hoy" */
  .bl .hv .sg path,.bl .hv .pt rect,.bl .hv .cj rect{animation:none!important}
  .bl .hv .sg path{stroke-dashoffset:-30}
  /* El tablero fijo en su estado "Hoy": las seis en Nuevos, enfriadas */
  .bl .kb *,.bl .kb *::before{animation:none!important}
  .bl .kb-card{opacity:.4}
  .bl .kb-est>.e-frio{opacity:1}
  .bl .bl-hilo{stroke-dashoffset:0;animation:none!important}
  .bl .vert::after,.bl .ditem,.bl .faq-ico,.bl .calc-tab,.bl .calc-tab::after,.bl .res-graf .g-bar{transition:none}
  .bl .loop-viaja{animation:none}
  .bl .escribe i{animation:none}
  .bl-js .bl [data-entra]>.wrap{opacity:1;transform:none;transition:none}
  .bl-js .chat.loop .msg{opacity:1;transform:none;transition:none}
  .bl .hero h1 .accent.entrando{clip-path:none;transition:none}
}