/* =====================================================================
   Beek — recorrido de beek-mexico.com
   La pagina entera se sostiene sobre una linea que avanza, se mide,
   se ramifica y vuelve a unirse. El violeta significa una sola cosa:
   lo que aporta Beek. Todo lo demas es trazo tecnico.

   TEMAS. Todos los colores viven en variables. `:root` es el tema claro
   (predeterminado) y `html[data-tema="oscuro"]` el oscuro. Ningun color
   fijo fuera de estos dos bloques: tests/check.js lo vigila.
   ===================================================================== */

:root{
  color-scheme:light;
  /* fondo y tinta */
  --bg:#f5f6fa;
  --bg-rgb:245,246,250;
  --ink:#141722;
  --ink-dim:#4b5366;
  --ink-faint:#646d86;
  /* violeta de marca: en claro el texto usa un tono mas oscuro por contraste */
  --violet:#6d3fe0;
  --violet-bright:#5330c4;
  --violet-rgb:109,63,224;
  --violet-glow:rgba(109,63,224,.22);
  --slate:#a3abbd;
  /* lineas y superficies (todas sobre la tinta, para que sigan al fondo) */
  --hair:rgba(20,23,34,.10);
  --hair-strong:rgba(20,23,34,.20);
  --surface:rgba(20,23,34,.03);
  --surface-2:rgba(20,23,34,.055);
  --card:#ffffff;
  --panel-a:rgba(255,255,255,.94);
  --panel-b:rgba(240,242,248,.94);
  --node-bg:rgba(255,255,255,.94);
  --node-dest-bg:rgba(245,241,255,.96);
  --shadow:rgba(20,23,34,.10);
  --shadow-strong:rgba(20,23,34,.16);
  --ficha-bg:#eceef5;
  --term-bg:#1b1e28;
  --term-ink:#b9c1d4;
  --term-head:#7f889c;
  --term-line:rgba(255,255,255,.08);
  /* semaforo de las alertas y KPIs */
  --ok:#197a42;
  --warn:#8f5c0a;
  --ok-dot:#22c55e;
  /* medios: logotipos blancos y el cerebro WebGL (que pinta luz aditiva) */
  --logo-filter:invert(1);
  --logo-opacity:.72;
  --brain-filter:invert(1) hue-rotate(180deg);
  --brain-opacity:.9;

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(20px,5vw,72px);
  --maxw:1180px;
}

html[data-tema="oscuro"]{
  color-scheme:dark;
  --bg:#06070a;
  --bg-rgb:6,7,10;
  --ink:#e8ebf2;
  --ink-dim:#9aa3b8;
  --ink-faint:#5c6478;
  --violet:#8b5cf6;
  --violet-bright:#a78bfa;
  --violet-rgb:139,92,246;
  --violet-glow:rgba(139,92,246,.32);
  --slate:#5b6577;
  --hair:rgba(232,235,242,.12);
  --hair-strong:rgba(232,235,242,.22);
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.05);
  --card:#06070a;
  --panel-a:rgba(18,21,27,.92);
  --panel-b:rgba(10,12,16,.92);
  --node-bg:rgba(12,14,18,.92);
  --node-dest-bg:rgba(19,15,34,.92);
  --shadow:rgba(0,0,0,.5);
  --shadow-strong:rgba(0,0,0,.65);
  --ficha-bg:#080a0d;
  --term-bg:#05060a;
  --term-ink:#9aa3b8;
  --term-head:#5c6478;
  --term-line:rgba(255,255,255,.08);
  --ok:#7fd39d;
  --warn:#e5b96b;
  --ok-dot:#4ade80;
  --logo-filter:none;
  --logo-opacity:.82;
  --brain-filter:none;
  --brain-opacity:1;
}

*{box-sizing:border-box;}
html{background:var(--bg);scroll-behavior:auto;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* el cambio de tema se desliza en vez de tronar (el script inline evita el destello inicial) */
html.tema-transicion body,
html.tema-transicion .card,html.tema-transicion .pact-item,
html.tema-transicion .chat,html.tema-transicion .bi-panel{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}

/* ---------- lienzo de la red ---------- */
#brain{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
  filter:var(--brain-filter);opacity:var(--brain-opacity);
}
/* atenua donde vive el texto para que la red nunca compita con la lectura */
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(var(--bg-rgb),.95) 0%, rgba(var(--bg-rgb),.86) 26%, rgba(var(--bg-rgb),.40) 44%, rgba(var(--bg-rgb),0) 60%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.85) 0%, rgba(var(--bg-rgb),0) 14%, rgba(var(--bg-rgb),0) 84%, rgba(var(--bg-rgb),.94) 100%);
}

/* ---------- cabecera ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  /* la marca vive pegada a la esquina, no al margen del contenido */
  padding:16px 22px;
}
.brand{display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);}
.brand-iso{display:block;height:26px;width:auto;}
.brand-iso img{display:block;height:100%;width:auto;}
/* el logotipo trae la palabra en blanco: en claro se usa la version oscura */
.brand-iso img.solo-oscuro{display:none;}
html[data-tema="oscuro"] .brand-iso img.solo-oscuro{display:block;}
html[data-tema="oscuro"] .brand-iso img.solo-claro{display:none;}

.top-lado{display:flex;align-items:center;gap:16px;}
.top-ia{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.brand-lock{display:flex;align-items:center;gap:10px;}
.ia-iso{display:block;width:20px;height:20px;color:var(--ink);}
.ia-iso svg{display:block;width:100%;height:100%;overflow:visible;}
.ia-iso .node-accent{fill:var(--violet);filter:drop-shadow(0 0 5px rgba(var(--violet-rgb),.7));}
/* el isotipo vive: el trazo se dibuja (pathLength=100 normaliza el dash),
   los nodos se encienden en secuencia, la sinapsis brilla y todo se apaga
   para volver a empezar. Un ciclo de 7 s con pausa al final. */
.ia-iso .trace{stroke-dasharray:100;stroke-dashoffset:0;animation:iaTrazo 7s cubic-bezier(.55,0,.2,1) infinite;}
.ia-iso .node{transform-box:fill-box;transform-origin:center;animation:iaNodo1 7s ease infinite;}
.ia-iso .node-2{animation-name:iaNodo2;}
.ia-iso .node-3{animation-name:iaNodo3;}
.ia-iso .node-accent{animation:iaAcento 7s cubic-bezier(.22,.9,.3,1.4) infinite;}
.ia-iso .glow{animation:iaHalo 7s ease-in-out infinite;}
@keyframes iaTrazo{
  0%,3%{stroke-dashoffset:100;opacity:1}
  24%{stroke-dashoffset:0;opacity:1}
  86%{stroke-dashoffset:0;opacity:1}
  94%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes iaNodo1{0%,2%{opacity:0;transform:scale(.4)}7%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes iaNodo2{0%,8%{opacity:0;transform:scale(.4)}13%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes iaNodo3{0%,15%{opacity:0;transform:scale(.4)}20%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes iaAcento{0%,21%{opacity:0;transform:scale(.3)}26%{opacity:1;transform:scale(1.3)}30%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes iaHalo{0%,21%{opacity:0}27%{opacity:1}44%{opacity:.5}60%{opacity:1}76%{opacity:.6}86%{opacity:.9}94%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ia-iso .trace,.ia-iso .node,.ia-iso .glow{animation:none;opacity:1;transform:none;stroke-dashoffset:0;}
}
.brand-nombre{
  font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
.brand-nombre b{font-weight:800;color:var(--violet-bright);}
.top-meta{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* interruptor de tema: sol en oscuro (invita a la luz), luna en claro */
.tema-btn{
  width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--hair-strong);background:var(--surface);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.tema-btn svg{width:17px;height:17px;display:block;}
.tema-btn .ico-sol{display:none;}
html[data-tema="oscuro"] .tema-btn .ico-sol{display:block;}
html[data-tema="oscuro"] .tema-btn .ico-luna{display:none;}
.tema-btn:hover{border-color:var(--violet);color:var(--violet-bright);}
.tema-btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}

/* ---------- riel de progreso ---------- */
.rail{
  position:fixed;right:calc(var(--gut) - 6px);top:50%;transform:translateY(-50%);
  z-index:20;display:flex;flex-direction:column;gap:14px;align-items:center;
  transition:opacity .4s ease;
}
.rail-step{
  width:5px;height:5px;border-radius:50%;
  background:var(--ink-faint);opacity:.45;
  transition:opacity .4s ease, background-color .4s ease, transform .4s ease;
}
.rail-step.is-on{background:var(--violet);opacity:1;transform:scale(1.5);
  box-shadow:0 0 12px var(--violet-glow);}
.rail-step.is-past{opacity:.8;background:var(--ink-dim);}

/* ---------- estructura de actos ---------- */
main{position:relative;z-index:2;}
/* La altura del acto es el "peso" del scroll: 160vh mantiene el ritmo de
   lectura sin pantalla muerta entre que un acto suelta y el otro llega. */
.act{height:160vh;position:relative;}
.act-hero{height:132vh;}
.act-final{height:150vh;}
.act-inner{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;
  padding:104px 0 64px;
}
.wrap{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
}
/* el bloque de texto vive a la izquierda; la red respira a la derecha */
.act:not(.act-hero) .wrap{max-width:calc(var(--maxw) - 40px);}
.act .wrap > *{max-width:625px;}

/* animacion de entrada: la escribe el JS con --t (0 a 1) */
.act-inner > .wrap{
  opacity:var(--t,1);
  transform:translate3d(0,calc((1 - var(--t,1)) * 26px),0);
}

/* ---------- tipografia ---------- */
.eyebrow,.act-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 18px;
  display:flex;align-items:center;gap:14px;
}
.act-tag .num{
  color:var(--violet);font-weight:700;
  padding-right:14px;border-right:1px solid var(--hair-strong);
}
h1,h2{
  font-family:var(--display);font-weight:800;
  letter-spacing:-.03em;line-height:1.03;margin:0 0 20px;
  color:var(--ink);
}
h1{font-size:clamp(36px,5.2vw,64px);}
h2{font-size:clamp(29px,4.2vw,52px);}
.lede{
  font-size:clamp(14.5px,1.35vw,17px);line-height:1.6;
  color:var(--ink-dim);margin:0 0 26px;max-width:540px;
}
/* la frase clave dentro del parrafo se lee en tinta plena */
.lede strong{color:var(--ink);font-weight:600;}
h3{
  font-family:var(--display);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;margin:0 0 7px;color:var(--ink);
}

/* ---------- apertura ---------- */
.hero{max-width:var(--maxw);}
.act-hero .wrap > *{max-width:920px;}
.act-hero .wrap > .lede{max-width:600px;}
.scroll-cue{
  display:flex;align-items:center;gap:14px;margin:44px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cue-line{
  display:block;width:56px;height:1px;background:var(--hair-strong);position:relative;overflow:hidden;
}
.cue-line::after{
  content:"";position:absolute;inset:0;width:18px;background:var(--violet);
  animation:cue 2.4s cubic-bezier(.6,0,.35,1) infinite;
}
@keyframes cue{0%{transform:translateX(-20px);opacity:0}
  30%{opacity:1}70%{opacity:1}100%{transform:translateX(56px);opacity:0}}

/* ---------- tarjetas ---------- */
.cards,.criteria,.cases,.pact{list-style:none;margin:0;padding:0;}
.cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  max-width:625px;
}
.card{background:var(--card);padding:17px 19px;}
.card p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-dim);}

.clients{margin:24px 0 0;}
.clients-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;
}
/* Franja de logotipos reales. Los cinco vienen de tintas y estilos
   distintos: pasados a blanco (y a tinta en el tema claro) con la misma
   opacidad se leen como una sola familia. La altura se afina por logo
   porque cada marca trae proporciones muy diferentes. */
.clients-logos{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:18px 44px;
}
.clients-logos li{display:flex;align-items:center;}
.clients-logos img{
  display:block;width:auto;opacity:var(--logo-opacity);
  filter:var(--logo-filter);
  transition:opacity .25s ease;
}
.clients-logos li:hover img{opacity:1;}
.cl-legendary{height:56px;}
.cl-arenas{height:54px;}
.cl-velas{height:30px;}
.cl-thereef{height:50px;}
.cl-costaselva{height:46px;}
@media (max-width:560px){
  .clients-logos{gap:16px 30px;}
  .cl-legendary{height:44px;}
  .cl-arenas{height:42px;}
  .cl-velas{height:24px;}
  .cl-thereef{height:40px;}
  .cl-costaselva{height:37px;}
}

/* ---------- metricas y carriles ---------- */
.metrics{display:flex;flex-wrap:wrap;gap:38px;margin:0 0 32px;}
.metric{display:flex;flex-direction:column;gap:5px;}
.metric-n{
  font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);
  letter-spacing:-.03em;line-height:1;color:var(--ink);
}
.metric-l{font-size:12.5px;line-height:1.45;color:var(--ink-dim);max-width:190px;}
.metric-l em{font-style:normal;color:var(--violet-bright);}

.lane{margin:0 0 18px;max-width:580px;}
.lane-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 9px;
}
.lane-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.lane-time{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);
}
.lane-bar{
  height:6px;background:var(--surface-2);position:relative;overflow:hidden;
}
.lane-fill{
  position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0) * 100%);
  background:var(--slate);
}
.lane-note{font-size:12.6px;line-height:1.5;color:var(--ink-dim);margin:10px 0 0;}
.lane-new .lane-fill{
  background:linear-gradient(90deg,var(--violet),var(--violet-bright));
  box-shadow:0 0 18px var(--violet-glow);
}
.lane-new .lane-time{color:var(--violet-bright);}
.lanes-compare{margin:22px 0 0;}
.lane.is-small{margin-bottom:18px;}

/* ---------- criterios ---------- */
.criteria{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:15px 28px;margin:0 0 4px;max-width:640px;
}
.crit{position:relative;padding-left:38px;}
.crit-n{
  position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--violet);letter-spacing:.06em;
}
.crit p{margin:0;font-size:12.8px;line-height:1.5;color:var(--ink-dim);}
.crit p strong{color:var(--ink);font-weight:600;}
.crit-tec{
  font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.06em!important;
  color:var(--ink-faint)!important;margin-top:6px!important;
}

/* ---------- casos / portafolio ---------- */
.cases{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 28px;max-width:625px;
}
.case{border-top:1px solid var(--hair-strong);padding:16px 0 0;}
.case-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet);margin:0 0 10px;
}
.case p:not(.case-tag){margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-dim);}
.case.es-liga{cursor:pointer;transition:border-color .25s ease, background .25s ease, transform .25s ease;}
.case.es-liga:hover,.case.es-liga:focus-visible{
  border-color:rgba(var(--violet-rgb),.55);background:rgba(var(--violet-rgb),.05);
  transform:translateY(-2px);outline:none;
}
.case.es-liga:focus-visible{outline:2px solid var(--violet);outline-offset:4px;}
.case-ver{
  margin:12px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet-bright);display:flex;align-items:center;gap:8px;
}
.case-ver::after{content:"\2192";transition:transform .25s ease;}
.case.es-liga:hover .case-ver::after{transform:translateX(5px);}

/* ---------- cierre ---------- */
.pact{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);max-width:625px;}
.pact-item{background:var(--card);padding:18px 21px;}
.pact-item p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-dim);}
.pact-strong{background:rgba(var(--violet-rgb),.08);border-left:2px solid var(--violet);}
.pact-strong h3{color:var(--violet-bright);}

.close{margin:30px 0 0;}
.close-line{
  font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,23px);
  letter-spacing:-.015em;color:var(--ink);margin:0 0 24px;max-width:520px;line-height:1.3;
}
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.02em;
  color:var(--ink);padding:13px 26px;border:1px solid var(--hair-strong);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.btn:hover{border-color:var(--violet);background:rgba(var(--violet-rgb),.1);color:var(--violet-bright);}
.btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}

/* ---------- pie ---------- */
.foot{
  position:relative;z-index:2;padding:30px var(--gut) 40px;
  border-top:1px solid var(--hair);background:var(--ficha-bg);
}
.foot p{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .act{height:auto;min-height:0;}
  .act-inner{position:relative;height:auto;min-height:100vh;padding:110px 0 80px;}
  .rail{display:none;}
  .cards,.cases{grid-template-columns:1fr;}
  .metrics{gap:26px;}
  .metric-l{max-width:none;}
  .vignette{
    background:
      radial-gradient(140% 70% at 50% 45%, rgba(var(--bg-rgb),.9) 0%, rgba(var(--bg-rgb),.7) 45%, rgba(var(--bg-rgb),.35) 100%),
      linear-gradient(180deg, rgba(var(--bg-rgb),.9) 0%, rgba(var(--bg-rgb),0) 20%, rgba(var(--bg-rgb),0) 78%, rgba(var(--bg-rgb),.95) 100%);
  }
}
@media (max-width:560px){
  .top-meta{display:none;}
  .criteria{grid-template-columns:1fr;gap:20px;}
  .top{padding-top:14px;padding-bottom:12px;}
  .brand-iso{height:22px;}
  .brand-nombre{font-size:12.5px;}
  .brand-lock{gap:8px;}
  .top-lado{gap:12px;}
  .tema-btn{width:32px;height:32px;}
}

/* ---------- respeto a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .cue-line::after{animation:none;opacity:.6;transform:none;}
  .act-inner > .wrap{opacity:1!important;transform:none!important;}
  .rail-step{transition:none;}
}

/* =====================================================================
   PANTALLAS PLENAS — el cerebro es el protagonista y el texto se aparta.
   ===================================================================== */
.act-pleno{height:150vh;}
.act-pleno .act-inner{align-items:flex-end;padding:0 0 12vh;}
.act-pleno .wrap.pleno,
.act-pleno .wrap.hero{max-width:var(--maxw);}
.act-pleno .wrap > *{max-width:900px;}
.act-pleno .act-inner{position:relative;}
.act-pleno .wrap{position:relative;z-index:1;}

.pleno-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 16px;
}
.pleno-line{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(42px,7vw,96px);color:var(--ink);margin:0;
  text-shadow:0 4px 40px rgba(var(--bg-rgb),.85);
}

/* en pantalla plena la viñeta casi desaparece: nada debe tapar el cerebro */
body[data-escena="pleno"] .vignette{
  background:linear-gradient(to top,
    rgba(var(--bg-rgb),.94) 0%, rgba(var(--bg-rgb),.74) 17%, rgba(var(--bg-rgb),.34) 38%,
    rgba(var(--bg-rgb),.06) 62%, rgba(var(--bg-rgb),0) 78%);
}
.vignette{transition:background .5s ease;}

/* el riel estorba cuando el grafico manda */
body[data-escena="pleno"] .rail{opacity:.25;}

@media (max-width:900px){
  .act-pleno{height:auto;}
  .act-pleno .act-inner{align-items:center;padding:110px 0 80px;min-height:100vh;}
  .pleno-line{font-size:clamp(34px,10vw,54px);}
}

/* =====================================================================
   CHAT — la demostracion: se ve a Beek IA trabajando, no se habla de ella.
   ===================================================================== */
.chat{
  max-width:625px;border:1px solid var(--hair-strong);border-radius:14px;
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;box-shadow:0 24px 60px var(--shadow);
}
.chat-head{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--hair);
}
.chat-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-dot);box-shadow:0 0 10px var(--ok-dot);}
.chat-title{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.02em;}
.chat-model{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--violet-bright);
}
.chat-body{min-height:230px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.msg{
  font-size:13px;line-height:1.55;padding:10px 13px;border-radius:11px;max-width:86%;
  white-space:pre-wrap;word-break:break-word;
}
.msg-user{align-self:flex-end;background:rgba(var(--violet-rgb),.14);border:1px solid rgba(var(--violet-rgb),.34);color:var(--ink);}
.msg-ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--hair);color:var(--ink-dim);}
.msg-typing{color:var(--ink-faint);font-style:italic;}
.caret{display:inline-block;width:7px;height:13px;background:var(--violet-bright);
  margin-left:2px;vertical-align:-2px;animation:parpadeo 1s steps(2) infinite;}
@keyframes parpadeo{0%,50%{opacity:1}51%,100%{opacity:0}}
.chat-foot{
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--hair);
}
.chat-input{flex:1;font-size:12.5px;color:var(--ink-faint);}
.chat-send{
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.04em;
  color:var(--violet-bright);border:1px solid rgba(var(--violet-rgb),.42);border-radius:7px;padding:5px 12px;
}

/* =====================================================================
   FLUJO — como se trabaja, y el ciclo de vida del acto de activos
   ===================================================================== */
.flujo{margin:30px 0 0;max-width:625px;}
.flujo-tit{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 14px;
}
.flujo-pasos{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.flujo-pasos li{position:relative;padding-left:34px;}
.fp-n{
  position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(var(--violet-rgb),.45);color:var(--violet-bright);
  font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;
}
.flujo-pasos b{font-family:var(--display);font-size:13.5px;color:var(--ink);display:block;margin-bottom:2px;}
.flujo-pasos p{margin:0;font-size:12.8px;line-height:1.5;color:var(--ink-dim);}

/* =====================================================================
   FICHA — capa de consulta. Aqui el cerebro se calla y mandan los datos.
   ===================================================================== */
.ficha{
  position:relative;z-index:3;background:var(--ficha-bg);
  border-top:1px solid var(--hair);padding:90px 0 100px;
}
.ficha-h2{font-size:clamp(26px,3.4vw,42px)!important;margin-bottom:44px!important;}
.ficha-bloque{margin:0 0 56px;}
.ficha-tit{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
  padding:0 0 10px;margin:0 0 18px;border-bottom:1px solid var(--hair-strong);
}
.ficha-p{font-size:14px;line-height:1.65;color:var(--ink-dim);max-width:720px;margin:0 0 18px;}
.ficha-lista{margin:0 0 22px;padding:0 0 0 18px;color:var(--ink-dim);font-size:13.5px;line-height:1.85;max-width:720px;}
.ficha-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 32px;}
.ficha-grid b{font-family:var(--display);font-size:14px;color:var(--ink);display:block;margin-bottom:5px;}
.ficha-grid p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-dim);}
.ficha .criteria{max-width:none;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 30px;}

.tabla-scroll{overflow-x:auto;}
.tabla-comp{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
.tabla-comp th,.tabla-comp td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair);vertical-align:top;
}
.tabla-comp thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border-bottom-color:var(--hair-strong);
}
.tabla-comp td:first-child{color:var(--ink);font-weight:600;width:24%;}
.tabla-comp td{color:var(--ink-dim);}
.tabla-comp .es-nuevo{color:var(--ink)!important;background:rgba(var(--violet-rgb),.07);}
.tabla-comp thead .es-nuevo{color:var(--violet-bright)!important;}

/* la terminal es oscura en los dos temas: es una terminal */
.terminal{
  border:1px solid var(--hair-strong);border-radius:12px;overflow:hidden;max-width:720px;
  background:var(--term-bg);
}
.term-head{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--term-head);
  padding:9px 14px;border-bottom:1px solid var(--term-line);
}
.term-body{
  margin:0;padding:14px;font-family:var(--mono);font-size:12px;line-height:1.75;
  color:var(--term-ink);overflow-x:auto;
}

@media (max-width:900px){
  .ficha{padding:60px 0 70px;}
  .chat-body{min-height:200px;}
}

/* ---------- modulo de BI ----------
   La pregunta escrita arriba y el tablero abajo: el punto es que el KPI
   sale de una conversacion, no de un proyecto de reporteria. Mismo
   lenguaje visual que el chat para que se lean como la misma herramienta. */
.bi{max-width:625px;}
.bi-q{
  display:flex;align-items:baseline;gap:10px;margin:0 0 14px;
  font-family:var(--mono);font-size:13.5px;color:var(--ink);
}
.bi-prompt{color:var(--violet);font-weight:700;}
.bi-panel{
  border:1px solid var(--hair-strong);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px var(--shadow);
  min-height:352px;display:flex;flex-direction:column;justify-content:center;
}
.bi-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--hair);
}
.bi-kpi{
  display:flex;flex-direction:column;gap:4px;padding:18px 16px 15px;
}
.bi-kpi + .bi-kpi{border-left:1px solid var(--hair);}
.bi-n{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.02em;color:var(--ink);
}
.bi-l{font-size:12px;color:var(--ink-dim);line-height:1.35;}
.bi-d{font-family:var(--mono);font-size:10px;letter-spacing:.02em;line-height:1.45;margin-top:3px;}
.bi-d.up{color:var(--ok);}
.bi-d.warn{color:var(--warn);}
.bi-chart{padding:16px 16px 18px;}
.bi-charttit{
  margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.bi-bars{display:flex;align-items:flex-end;gap:6px;height:74px;}
.bi-bars span{
  flex:1;border-radius:3px 3px 0 0;height:calc(var(--h) * 100%);
  background:linear-gradient(180deg, rgba(var(--violet-rgb),.85), rgba(var(--violet-rgb),.25));
  min-width:8px;
  /* las barras crecen cuando el acto entra a escena: --t la publica journey.js */
  transform:scaleY(var(--t,1));transform-origin:bottom;
  transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
@media (max-width:640px){
  .bi-kpis{grid-template-columns:1fr;}
  .bi-kpi + .bi-kpi{border-left:0;border-top:1px solid var(--hair);}
  .bi-bars{height:58px;}
}
.bi-esc{animation:escIn .55s cubic-bezier(.22,.9,.3,1) both;}
@keyframes escIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.bi-caret{
  display:inline-block;width:8px;height:15px;margin-left:6px;vertical-align:-2px;
  background:var(--violet);animation:parp 1.1s steps(2) infinite;
}
@keyframes parp{to{visibility:hidden;}}

/* la oferta del modulo de BI: tres condiciones que hacen facil el si */
.bi-oferta{
  list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.bi-oferta li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-dim);padding:6px 12px;border:1px solid var(--hair-strong);
  border-radius:999px;display:flex;align-items:center;gap:7px;
}
.bi-oferta li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 8px var(--violet-glow);
}

/* embudo: cada peldano mas angosto que el anterior */
.funil{display:grid;gap:11px;padding:20px 18px 8px;}
.fun-fila{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:14px;}
.fun-eti{font-size:12px;color:var(--ink-dim);text-align:right;line-height:1.3;}
.fun-barra{height:26px;border-radius:7px;background:var(--surface-2);overflow:hidden;}
.fun-barra i{
  display:block;height:100%;width:calc(var(--p) * 100%);border-radius:7px;
  background:linear-gradient(90deg, rgba(var(--violet-rgb),.9), rgba(var(--violet-rgb),.4));
  transform-origin:left;animation:funCrece .8s cubic-bezier(.22,.9,.3,1) both;
}
.bi-esc .fun-fila:nth-child(2) .fun-barra i{animation-delay:.12s;}
.bi-esc .fun-fila:nth-child(3) .fun-barra i{animation-delay:.24s;}
.bi-esc .fun-fila:nth-child(4) .fun-barra i{animation-delay:.36s;}
@keyframes funCrece{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.fun-n{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);text-align:right;}
.fun-nota{
  margin:6px 18px 16px;font-size:12px;color:var(--ink-faint);line-height:1.5;
  padding-left:11px;border-left:2px solid rgba(var(--violet-rgb),.5);
}

/* alertas proactivas: llegan una tras otra */
.alertas{display:grid;gap:10px;padding:20px 18px 6px;}
.al{
  display:flex;align-items:flex-start;gap:12px;padding:13px 15px;
  border:1px solid var(--hair);border-radius:11px;background:var(--surface);
  animation:alIn .5s cubic-bezier(.22,.9,.3,1.03) both;
}
.bi-esc .al:nth-child(2){animation-delay:.16s;}
.bi-esc .al:nth-child(3){animation-delay:.32s;}
@keyframes alIn{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:none;}}
.al-ico{font-size:12px;line-height:1.6;flex:0 0 auto;}
.al-ico.warn{color:var(--warn);}
.al-ico.up{color:var(--ok);}
.al p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-dim);}
.al b{color:var(--ink);font-weight:600;}
@media (max-width:640px){
  .bi-panel{min-height:0;}
  .fun-fila{grid-template-columns:96px 1fr 58px;}
  .fun-eti{font-size:10.5px;}
}
@media (prefers-reduced-motion:reduce){
  .bi-caret{animation:none;}
  .fun-barra i,.al,.bi-esc{animation:none;}
}

/* =====================================================================
   SPLASH DE IDENTIDAD — el logotipo se dibuja al centro de la pantalla y
   vuela a su lugar en la cabecera. La geometria del nucleo copia la de
   la marca de la cabecera multiplicada por --k: asi el aterrizaje es
   pixel-perfect y el relevo entre las dos capas resulta invisible.
   ===================================================================== */
.splash{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  /* fusible sin JS: si el script muriera, la capa se quita sola */
  animation:splashFusible .6s ease 4.6s forwards;
  --k:8;
}
@keyframes splashFusible{to{opacity:0;visibility:hidden;}}
.splash-fondo{position:absolute;inset:0;background:var(--bg);}
.splash-halo{
  position:absolute;width:min(74vw,560px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--violet-rgb),.17) 0%, rgba(var(--violet-rgb),.05) 45%, transparent 70%);
  opacity:0;
}
.splash-nucleo{
  position:relative;display:flex;align-items:center;
  gap:calc(10px * var(--k));
  transform-origin:top left;will-change:transform;
}
.splash-iso{color:var(--ink);}
.splash-iso.brand-iso{width:auto;height:calc(26px * var(--k));}
/* el isotipo de Beek IA acompaña al logo y no vuela: se apaga con el fondo */
.splash-ia{
  position:relative;width:calc(30px * var(--k));height:calc(30px * var(--k));
  margin-left:calc(12px * var(--k));color:var(--ink);opacity:0;
}
.splash-ia svg{overflow:visible;}
.splash-sub{
  position:absolute;bottom:11vh;left:0;right:0;text-align:center;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-faint);opacity:0;
}
@media (max-width:900px){.splash{--k:5;}}
@media (max-width:560px){.splash{--k:3.2;}}
/* quien pide menos movimiento entra directo a la pagina */
@media (prefers-reduced-motion:reduce){.splash{display:none;}}

/* =====================================================================
   CHIPS — datos clave (tipos de activos, cierre del caso)
   ===================================================================== */
.evo-datos{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.evo-dato{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-dim);padding:6px 12px;border:1px solid var(--hair-strong);
  border-radius:999px;display:flex;align-items:center;gap:7px;
}
.evo-dato::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-faint);
}
.evo-dato.es-clave{color:var(--violet-bright);border-color:rgba(var(--violet-rgb),.45);}
.evo-dato.es-clave::before{background:var(--violet);box-shadow:0 0 8px var(--violet-glow);}
.caso-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}

/* =====================================================================
   CASO DE EXITO — la migracion, dibujada
   ===================================================================== */
.mig2{position:relative;height:190px;max-width:720px;margin:4px 0 22px;}
.mig2-rutas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.mig2-ruta{fill:none;stroke:var(--hair-strong);stroke-width:1.5;}
.mig2-flujo{
  fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:12 30;animation:migCorre 1.5s linear infinite;
  filter:drop-shadow(0 0 6px rgba(var(--violet-rgb),.55));
}
.mig2-flujo-b{animation-delay:.75s;}
@keyframes migCorre{from{stroke-dashoffset:0;}to{stroke-dashoffset:-42;}}
.mig2-nodo{
  position:absolute;width:210px;box-sizing:border-box;
  border:1px solid var(--hair-strong);border-radius:12px;padding:13px 15px;
  background:var(--node-bg);
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
}
.mig2-nodo span{
  display:block;margin-top:4px;font-family:var(--body);font-weight:400;
  font-size:11.5px;line-height:1.4;color:var(--ink-dim);
}
.mig2-origen{left:0;top:50%;transform:translateY(-50%);}
.mig2-dest{border-color:rgba(var(--violet-rgb),.45);background:var(--node-dest-bg);
  box-shadow:0 0 24px rgba(var(--violet-rgb),.10);}
.mig2-dest-a{right:0;top:-6px;}
.mig2-dest-b{right:0;bottom:-6px;}
.mig2-cifras{display:flex;flex-wrap:wrap;gap:14px 38px;margin:0 0 18px;}
.mig2-cifra b{
  display:block;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;color:var(--ink);
}
.mig2-cifra span{font-size:12px;color:var(--ink-dim);}
.mig2-chips{margin:4px 0 0;}

@media (max-width:900px){
  .mig2{height:auto;max-width:none;margin-bottom:16px;
    display:grid;gap:10px;}
  .mig2-rutas{display:none;}
  .mig2-nodo{position:static;width:auto;transform:none;}
  /* de origen a destinos: una costura vertical que late */
  .mig2-dest{position:relative;}
  .mig2-dest::before{
    content:"";position:absolute;left:26px;top:-11px;width:2px;height:12px;
    background:var(--violet);opacity:.7;
  }
}
@media (max-width:560px){
  .mig2-cifras{gap:12px 26px;}
}
@media (prefers-reduced-motion:reduce){
  .mig2-flujo{animation:none;}
}

/* =====================================================================
   PANTALLAS BAJAS (laptops 768-830px de alto): menos aire vertical y la
   comparativa de barras lado a lado, para que cada acto quepa en su marco.
   ===================================================================== */
@media (max-height:830px) and (min-width:901px){
  .act-inner{padding:86px 0 46px;}
  .act-tag{margin-bottom:12px;}
  h2{font-size:clamp(26px,3.6vw,44px);margin-bottom:14px;}
  .lede{margin-bottom:16px;}
  .criteria{gap:8px 24px;}
  .crit p{font-size:12.3px;}
  .cards .card{padding:13px 16px;}
  .lanes-compare{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:end;margin-top:8px;}
  .lanes-compare .lane-head{margin-bottom:6px;}
  .lanes-compare .lane{margin-bottom:0;max-width:none;}
  .lanes-compare .lane-note{grid-column:1 / -1;margin-top:5px;}
  .flujo{margin-top:18px;}
  .flujo-pasos{gap:8px;}
  .pact-item{padding:13px 17px;}
  .close{margin-top:18px;}
  /* BI: panel mas compacto, sin la fila de chips de oferta */
  .bi-panel{min-height:270px;}
  .bi-kpi{padding:12px 14px 11px;}
  .bi-bars{height:54px;}
  .bi-chart{padding:12px 14px 14px;}
  .bi-q{margin-bottom:10px;}
  .bi-oferta{display:none;}
  /* migracion: diagrama mas bajo */
  .mig2{height:168px;margin-bottom:14px;}
  .mig2-cifras{margin-bottom:12px;gap:10px 30px;}
  .case{padding-top:12px;}
  .case p:not(.case-tag){font-size:12.6px;}
  .evo-datos{gap:5px;}
  .evo-datos .evo-dato{padding:4px 10px;font-size:10px;}
}

/* el portafolio respira mejor a tres columnas en escritorio */
@media (min-width:901px){
  .act .wrap > .cases{max-width:960px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 26px;}
}

/* =====================================================================
   BEEK — ciclo de vida, gestion documental y contacto.
   ===================================================================== */
/* ciclo de vida: las cuatro etapas, a dos columnas */
.ciclo{margin-top:24px;}
.act .wrap > .ciclo{max-width:760px;}
.ciclo .flujo-pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;}
.tipos{margin-top:26px;}
.act .wrap > .tipos{max-width:760px;}
.tipos .evo-dato{white-space:normal;line-height:1.4;}

/* gestion documental: criterios a la izquierda, el panel de alertas a la derecha */
.act .wrap > .docs{max-width:980px;}
.docs{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px 36px;align-items:start;}
.docs .criteria{grid-template-columns:1fr;max-width:none;gap:16px;}
.docs-panel{
  border:1px solid var(--hair);border-radius:14px;background:var(--surface);
  padding:16px 16px 12px;
}
.docs-panel .clients-label{margin-bottom:4px;}
.docs-panel .alertas{padding:8px 0 4px;}
.docs-panel .lane-note{margin:10px 0 0;}
.docs-panel .al:nth-child(2){animation-delay:.16s;}
.docs-panel .al:nth-child(3){animation-delay:.32s;}

/* contacto */
.contacto{margin:0 0 22px;padding:16px 20px;border-left:2px solid var(--violet);background:rgba(var(--violet-rgb),.06);max-width:360px;}
.contacto .clients-label{margin-bottom:6px;}
.contacto-nombre{margin:0;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);}
.contacto-rol{margin:2px 0 0;font-size:13px;color:var(--ink-dim);}
.contacto a{color:var(--violet-bright);text-decoration:none;}
.contacto a:hover{text-decoration:underline;}

@media (max-width:900px){
  .docs{grid-template-columns:1fr;}
  .ciclo .flujo-pasos{grid-template-columns:1fr;}
}

/* =====================================================================
   CATALOGO — piezas de la segunda iteracion: chips de industrias en la
   apertura, rejilla de modulos, cards a tres columnas y portafolio de ocho.
   ===================================================================== */
.hero-chips{margin:22px 0 0;}
.act-hero .wrap > .hero-chips{max-width:920px;}
.act-hero .scroll-cue{margin-top:34px;}

/* modulos de la plataforma: ocho piezas a cuatro columnas, una linea cada una */
.act .wrap > .modulos{max-width:1000px;}
.modulos{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 26px;margin-top:6px;}
.modulos h3{font-size:14px;margin-bottom:5px;}
.modulos p{font-size:12.4px;}

/* servicios de desarrollo: seis cards a tres columnas */
.act .wrap > .cards.tres{max-width:1000px;}
.cards.tres{grid-template-columns:repeat(3,minmax(0,1fr));}
.cards.tres .card p{font-size:12.6px;}

/* portafolio de ocho piezas: dos filas de cuatro */
@media (min-width:901px){
  .act .wrap > .cases.ocho{max-width:1080px;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 22px;}
  .cases.ocho .case p:not(.case-tag){font-size:12.8px;}
  .cases.ocho h3{font-size:14.5px;}
}
@media (max-width:900px){
  .modulos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cards.tres{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .modulos{grid-template-columns:1fr;}
}
@media (max-height:830px) and (min-width:901px){
  .modulos{gap:12px 22px;}
  .cards.tres .card{padding:12px 15px;}
  .cards.tres .card p{font-size:12.2px;}
  .cases.ocho .case{padding-top:10px;}
  .cases.ocho .case-ver{margin-top:8px;}
  .hero-chips{margin-top:16px;}
}

/* acto final en escritorio: el pacto en fila, el flujo en 2x2 y el contacto
   junto a la frase de cierre, para que el acto quepa en una pantalla */
@media (min-width:901px){
  .act-final .wrap > .pact{max-width:none;grid-template-columns:repeat(3,1fr);}
  .act-final .wrap > .flujo{max-width:none;margin-top:22px;}
  .act-final .flujo-pasos{grid-template-columns:1fr 1fr;gap:10px 28px;}
  .act-final .wrap > .close{max-width:none;margin-top:22px;display:grid;grid-template-columns:300px 1fr;gap:12px 36px;align-items:center;}
  .act-final .contacto{margin:0;grid-row:1 / span 2;}
  .act-final .close-line{margin:0;}
  .act-final .btn{justify-self:start;}
}

/* acto 01 en escritorio: las cuatro tarjetas en una sola fila y los logos
   mas apretados, para que el acto quepa tambien en pantallas de 780px */
@media (min-width:901px){
  #acto-1 .wrap > .cards{max-width:1000px;grid-template-columns:repeat(4,minmax(0,1fr));}
  #acto-1 .clients{margin-top:18px;}
  #acto-1 .clients-logos{gap:14px 36px;}
}
@media (max-height:830px) and (min-width:901px){
  #acto-1 .cl-legendary{height:46px;}
  #acto-1 .cl-arenas{height:44px;}
  #acto-1 .cl-velas{height:25px;}
  #acto-1 .cl-thereef{height:41px;}
  #acto-1 .cl-costaselva{height:38px;}
  #acto-1 .clients{margin-top:12px;}
  .docs{gap:24px 32px;}
  .docs .criteria{gap:12px;}
}