/* ==========================================================
   EVOL-IA — Web Corporativa
   Sistema visual propio (no reutiliza código de Contracts)
   ========================================================== */

:root{
  --bg-void:#060C22;
  --bg-surface:#0B1740;
  /* 2026-09-04: unificando los muchos tonos de azul de las cajas/tarjetas
     (capacidades, productos, laboratorio, formularios, Nosotros, tienda...)
     a un solo azul solido pedido por el cliente. Antes --bg-glass era
     semitransparente (rgba(16,30,74,.55)), por lo que el mismo recuadro se
     veia con un tono distinto segun el fondo detras (--bg-void vs
     --bg-surface en las franjas alternas) -- eso era buena parte de "muchos
     azules". Se deja solido para que el color sea el mismo en todas partes.
     El nombre de la variable se conserva (la usan ~30 reglas) aunque ya no
     sea semitransparente. */
  --bg-glass:#0E1841;
  --bg-glass-hover:color-mix(in srgb, #0E1841 82%, white 18%);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);

  --azure:#2F6BFF;
  --cyan:#22D3F5;
  --violet:#9B4DFF;

  --ink-0:#FFFFFF;
  --ink-1:#C6D2F0;
  --ink-2:#7C89B8;
  /* --ink-3 se usa para notas y leyendas pequeñas; #4E5A88 daba solo
     2.6:1 sobre el fondo (ilegible). #7A85B0 sube a ~5:1 y sigue
     leyendose como texto secundario. */
  --ink-3:#7A85B0;

  --good:#34D399;
  --good-bg:rgba(52,211,153,.12);
  --pending:#F5B342;
  --pending-bg:rgba(245,179,66,.12);

  --cap-ia:#22D3F5;
  --cap-datos:#2F6BFF;
  --cap-finanzas:#22C68C;
  --cap-software:#9B4DFF;
  --cap-auto:#FF6B4A;
  --cap-inmersivas:#FF3DAE;

  --font-display:Georgia,Cambria,"Iowan Old Style","Times New Roman",serif;
  --font-body:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Cascadia Code","SF Mono",Consolas,"Roboto Mono",monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;

  /* contenedor ancho usado SOLO por las secciones de Home (Hero,
     Capacidades, Productos, EVOL, LAB teaser, Nosotros teaser, footer de
     Home) para que compartan un mismo eje horizontal. El resto del sitio
     (nav, subpaginas) sigue usando .wrap / 1180px sin cambios. */
  --site-max-width:1600px;
  --site-padding:28px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg-void);
  color:var(--ink-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink-0);
  font-weight:400;
  text-wrap:balance;
  margin:0;
}
a{color:var(--cyan);text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--azure);color:#fff;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(6,12,34,.7);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.site-nav.scrolled{background:rgba(6,12,34,.92);border-bottom-color:var(--line);}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 32px;}
/* En Home las secciones usan el contenedor ancho (--site-max-width), asi
   que el header debe usar el MISMO o el logo/menu quedan metidos 123px
   hacia adentro respecto a las tarjetas. Solo aplica a index.html (clase
   nav-home): las subpaginas siguen con .wrap de 1180px, donde su header
   y su contenido ya coinciden. */
.nav-home .wrap{
  max-width:var(--site-max-width);
  padding-left:var(--site-padding);
  padding-right:var(--site-padding);
}
@media(max-width:640px){
  .nav-home .wrap{padding-left:20px;padding-right:20px;}
}

/* El header es fixed (115px en desktop, 77px en movil). Sin esto, al
   saltar a #capacidades o #productos la seccion se alinea con y=0 y el
   eyebrow y el titulo quedan tapados por el header. */
section[id]{scroll-margin-top:130px;}
@media(max-width:860px){ section[id]{scroll-margin-top:92px;} }
.brand-lockup{display:flex;align-items:center;}
/* logo con presencia corporativa real -- ~2.3x el tamaño anterior (34px -> 80px) */
.brand-lockup img{height:94px;width:auto;}
@media(max-width:860px){ .brand-lockup img{height:56px;} }
.nav-links{display:flex;align-items:center;gap:30px;white-space:nowrap;}
/* Nueve entradas, una de ellas larga: por debajo de 1400 se aprieta el
   espaciado antes que partir la barra en dos filas. */
@media(max-width:1400px){.nav-links{gap:20px;}.nav-links a{font-size:13.5px;}}
@media(max-width:1180px){.nav-links{gap:15px;}.nav-links a{font-size:13px;}}
.nav-links a{color:var(--ink-1);font-size:14px;transition:color .15s;}
.nav-links a:hover{color:var(--ink-0);}
/* estado activo real: se aplica por pagina (hardcodeado en el HTML de cada
   una, no hay deteccion en JS) -- un punto discreto, no un subrayado
   completo, para no confundirse con "elemento destacado" */
.nav-links a.active{color:var(--ink-0);font-weight:600;position:relative;}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--cyan);
}
.nav-cta.active{box-shadow:0 0 0 2px var(--cyan),0 8px 24px rgba(34,211,245,.25);}
.nav-cta{
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  color:#04102b !important;font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:999px;
  box-shadow:0 8px 24px rgba(34,211,245,.25);
  transition:transform .15s,box-shadow .15s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(34,211,245,.35);}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink-0);padding:8px 10px;font-size:18px;line-height:1;}
@media(max-width:1040px){
  .nav-links{
    position:fixed;top:72px;left:0;right:0;bottom:0;
    /* .site-nav lleva backdrop-filter, y eso lo convierte en el BLOQUE
       CONTENEDOR de este position:fixed. Consecuencia: bottom:0 se medía
       contra la barra (77px), no contra la pantalla, y el panel quedaba
       en 72px de alto con los enlaces cayendo fuera, sobre el hero.
       La altura explícita lo corrige sin tocar el blur ni sacar el panel
       de .site-nav. Medido en produccion el 2026-08-28: fallo real, no
       de emulacion. */
    height:calc(100vh - 72px);
    /* 2026-09-01: con fondo rgba(...,.98) el panel se veia transparente en
       la practica (se alcanzaba a leer el texto/video de fondo detras del
       menu abierto), aunque el 98% de opacidad deberia ser casi solido.
       Se cambia a un color solido (mismo tono que --bg-void) para que el
       panel quede completamente opaco sin depender de mezcla de alpha. */
    background:var(--bg-void);flex-direction:column;justify-content:flex-start;
    padding:36px 32px;gap:22px;font-size:17px;white-space:normal;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
}

/* ---------- hero: dos columnas, video contenido (no full-screen) ---------- */
.hero{padding:130px 0 26px;position:relative;overflow:hidden;}
@media(max-width:860px){ .hero{padding:118px 0 40px;} }
/* Eje horizontal unico de Home: Hero, Capacidades, Productos, seccion
   EVOL, teaser de LAB, teaser de Nosotros y el footer de Home (via
   .wrap-home, ver footer mas abajo) comparten exactamente el mismo
   ancho/padding -- el resto del sitio (nav, subpaginas) sigue en .wrap
   generico de 1180px, sin cambios. */
.hero .wrap,
#capacidades .wrap,
#productos .wrap,
#lab-teaser .wrap,
#nosotros-teaser .wrap,
.wrap-home{
  max-width:var(--site-max-width);
  padding:0 var(--site-padding);
}
@media(max-width:640px){
  .hero .wrap,
  #capacidades .wrap,
  #productos .wrap,
  #lab-teaser .wrap,
  #nosotros-teaser .wrap,
  .wrap-home{
    padding:0 20px;
  }
}

/* CINTA DE PARTICULAS (index.html): bloque propio en el flujo normal del
   documento, ENTRE el Hero y #capacidades -- no es fondo del Hero ni usa
   position:absolute sobre el. Al ser un hermano en flujo, el navegador
   garantiza estructuralmente que heroBottom <= bandTop <= capacidadesTop:
   ningun elemento del Hero puede intersectarla. El canvas se dimensiona
   contra este contenedor (main.js mide flowCanvas.parentElement). */
.particle-band{
  position:relative;width:100%;height:clamp(110px,15vh,165px);
  overflow:hidden;pointer-events:none;
}
.particle-band #data-flow{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}

/* Fondo de las 5 subpaginas (page-hero): video fondo.mp4, capas equivalentes
   con .hero-bg-video/.hero-bg-overlay. NO se usa en el Hero de Home. */
.hero-bg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;z-index:0;
}
.hero-bg-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,
    rgba(6,12,34,.86) 0%, rgba(6,12,34,.84) 42%, rgba(6,12,34,.68) 100%);
}
/* Hero armado con grid-template-areas -- .hero-message usa display:contents
   (desaparece de la caja, sus hijos pasan a ser items directos de
   .hero-grid) para poder ubicar CADA pieza (h1/parrafo/bottom/linea de
   capacidades) en su propia fila, con el video ocupando todas las filas
   de la columna derecha. Esto permite reordenar todo por breakpoint sin
   position:absolute -- solo reasignando grid-template-areas. */
.hero-grid{
  position:relative;z-index:1;display:grid;
  /* 48% / 52% -- la columna del video pesa un poco mas que la de texto,
     como en la referencia, sin dejar el H1 sin espacio para 2 lineas */
  grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  grid-template-areas:
    "h1      video"
    "lede    video"
    "bottom  video";
  column-gap:48px;align-items:start;
}
.hero-media{grid-area:video;align-self:center;}
.hero-message{display:contents;}
.hero-message h1{grid-area:h1;}
.hero-lede{grid-area:lede;}
.hero-bottom{grid-area:bottom;}

@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "h1"
      "lede"
      "bottom"
      "video";
    row-gap:20px;
  }
}

.eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;margin:0 0 14px;
}

/* clamp calibrado con medidas reales de ancho de texto (no vw a ojo): a
   este tamaño "De los datos a la decisión." SIEMPRE cabe en una sola
   linea dentro de su columna, con margen, en 1024/1280/1440px -- probado
   con getBoundingClientRect en el navegador antes de fijar los numeros.
   Recalculado tras angostar el contenedor a 1360px/48px de padding. */
.hero-message h1{font-size:clamp(30px,calc(4vw - 3px),56px);line-height:1.1;max-width:100%;}
/* texto con degradado cyan -> purpura para las palabras clave del H1
   (datos / decision / accion) -- no es un cambio de contenido, solo de estilo */
.grad-text{
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lede{
  font-size:16.5px;color:var(--ink-1);max-width:560px;margin-top:16px;
  border-left:2px solid var(--cyan);padding-left:14px;
}

/* CTA + EVOL como una sola composicion horizontal: columna de acciones
   (1fr, botones apilados) + EVOL en una pista fija de 200px a la derecha,
   ambos alineados por abajo. Sin position:absolute. */
/* la pista de EVOL baja de 215 a 205 y el gap del grid de 16 a 10: eso
   libera ~16px para la fila de botones, que los necesita para respirar
   (gap 22px) sin partirse en dos lineas. */
.hero-bottom{
  display:grid;grid-template-columns:minmax(0,1fr) 205px;
  align-items:center;gap:10px;margin-top:-20px;
}
/* stretch: los dos botones comparten altura aunque el secundario lleve
   2 lineas de texto y un avatar mas alto */
.hero-cta-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:22px;}
.hero-evol-figure{width:100%;max-width:205px;justify-self:center;align-self:center;}
.hero-evol-figure img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 34px rgba(34,211,245,.25));
  animation:float 6s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){ .hero-evol-figure img{animation:none;} }
/* entre 901 y 1340px la columna izquierda es mas angosta que a 1440px --
   sin esto, CTA+CTA+EVOL ya no caben en una sola fila y el secundario
   se va a una segunda linea. Se reduce EVOL un poco y los botones se
   comprimen mas (ver .btn-primary/.btn-secondary mas abajo). */
@media(min-width:901px) and (max-width:1340px){
  .hero-bottom{grid-template-columns:minmax(0,1fr) 180px;gap:12px;}
  .hero-evol-figure{max-width:180px;}
}
@media(max-width:640px){
  /* a este ancho no cabe CTA+CTA+EVOL en una fila sin romperse -- la
     propia guia de la ronda permite mobile vertical cuando el ancho no
     alcanza. EVOL vuelve al flujo normal, centrado, entre los CTA y la
     linea de capacidades; los botones vuelven a su tamano base. */
  .hero-bottom{display:block;}
  .hero-cta-row{flex-direction:column;align-items:flex-start;}
  .hero-evol-figure{max-width:130px;margin:14px auto 0;}
  .btn-primary{font-size:14px;padding:13px 22px;}
  .btn-secondary{font-size:13px;padding:11px 16px 11px 10px;}
  .btn-secondary-text{max-width:none;}
  .hero-evol-avatar{width:44px;height:48px;}
}

.btn-primary{
  background:linear-gradient(90deg,var(--cyan),var(--violet));color:#04102b;
  font-weight:700;font-size:12.5px;padding:14px 18px;border-radius:10px;
  box-shadow:0 12px 32px rgba(34,211,245,.28);
  transition:transform .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(34,211,245,.38);}
.btn-primary:hover .btn-arrow{transform:translateX(3px);}
.btn-arrow{display:inline-block;transition:transform .15s;}
/* boton secundario mas angosto que el principal: el texto se fuerza a
   2 lineas dando un max-width chico a .btn-secondary-text (95px es mas
   que "Cuéntale a EVOL" (~84px) pero menos que la frase completa en una
   sola linea (~155px) -- medido con canvas text metrics reales antes de
   fijar el numero). El boton ya no fuerza una sola linea. */
.btn-secondary{
  border:1px solid var(--line-strong);color:var(--ink-0);font-size:11.5px;
  padding:9px 14px 9px 10px;border-radius:10px;transition:border-color .15s,background .15s;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-secondary-text{text-align:left;line-height:1.28;max-width:95px;}
.btn-secondary:hover{border-color:var(--cyan);background:rgba(34,211,245,.08);}
/* EVOL a 24px se perdia dentro del boton. Ahora usa evol-avatar.png, que
   es el mismo asset oficial pero con el margen transparente recortado
   (evol-sidebar.png tenia 28% de ancho vacio, y eso encogia el robot
   dentro de su caja). Sin recuadro de fondo: se lee el robot, no la caja. */
.hero-evol-avatar{width:46px;height:50px;object-fit:contain;flex:none;background:none;border-radius:0;}
@media(min-width:901px) and (max-width:1340px){
  .btn-primary{font-size:11.5px;padding:12px 13px;gap:5px;}
  .btn-secondary{font-size:10.5px;padding:7px 11px 7px 8px;gap:8px;}
  .btn-secondary-text{max-width:82px;line-height:1.25;}
  .hero-evol-avatar{width:38px;height:41px;}
  .hero-cta-row{gap:16px;}
}

/* área audiovisual: contenedor propio, con radio y sombra -- NO fondo de pagina */
.hero-media{position:relative;}
.hero-video-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-strong);aspect-ratio:16/9;background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.hero-video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.video-controls{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:8px;}
.video-btn{
  background:rgba(6,12,34,.62);border:1px solid var(--line-strong);color:var(--ink-0);
  border-radius:999px;padding:9px 15px;font-size:12.5px;backdrop-filter:blur(6px);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.video-btn:hover{border-color:var(--cyan);}
.video-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.hero-media-caption{font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:right;}

/* ---------- sections ---------- */
section{padding:88px 0;border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
.band-alt{background:var(--bg-surface);}
.section-title{font-size:clamp(24px,3vw,34px);margin-bottom:12px;}
.section-intro{color:var(--ink-2);max-width:640px;font-size:15px;margin-bottom:44px;}

/* la transicion Hero -> Capacidades debe sentirse inmediata, no un salto
   vacio -- solo esta seccion recorta su padding superior, el resto del
   sitio sigue usando el spacing generico de section{} */
#capacidades{padding-top:34px;}
#capacidades .section-intro{margin-bottom:30px;}

/* ---------- capacidades ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
@media(max-width:980px){.cap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cap-grid{grid-template-columns:1fr;}}
.cap-card{
  border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:var(--bg-glass);
  border-top:3px solid var(--accent);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.cap-card:hover{transform:translateY(-4px);background:var(--bg-glass-hover);box-shadow:0 16px 34px rgba(0,0,0,.35);}
/* iconos con mas presencia y halo del color de acento de cada capacidad,
   mas cerca de como se ven en la referencia */
.cap-icon{
  width:60px;height:60px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow:0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
  margin:0 auto 18px;
}
.cap-icon svg{width:30px;height:30px;stroke-width:1.5;}
/* el numero se aclara un 22% hacia blanco: a 11px, el azure y el violeta
   puros no llegaban a 4.5:1 sobre el fondo oscuro */
.cap-card .num{font-family:var(--font-mono);font-size:11px;color:color-mix(in srgb, var(--accent) 78%, #fff);}
.cap-card h3{font-size:18.5px;color:var(--ink-0);margin:10px 0 14px;line-height:1.25;}
.cap-card ul{margin:0;padding-left:16px;font-size:13px;color:var(--ink-2);}
.cap-card li{margin-bottom:6px;}

/* ---------- productos ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
/* Dos tarjetas: se reparten el ancho sin dejar una columna fantasma.
   Modificador propio de la seccion; .prod-grid a 3 columnas sigue igual. */
.prod-grid--dos{grid-template-columns:repeat(2,1fr);}
/* Familia de tres soluciones: 3 columnas en escritorio, 2+1 en tableta y
   una por fila en movil. Sin columna fantasma en ningun ancho. */
@media(max-width:1024px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.prod-grid,.prod-grid--dos{grid-template-columns:1fr;}}
.prod-card{
  border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--bg-glass);
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;
}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.35);}
.prod-card .kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
.prod-card h3{font-size:21px;margin:10px 0 10px;}
.prod-card p{font-size:13.5px;color:var(--ink-1);margin:0 0 14px;flex:1;}
.prod-card .demuestra{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.cap-pill{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2);}
.prod-card .cta{
  font-size:13px;font-weight:700;color:var(--ink-0);text-align:center;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  padding:10px 16px;border-radius:9px;
}
.prod-card .cta.secondary{background:none;border:1px solid var(--line-strong);color:var(--ink-0);}

/* ---------- EVOL section ----------
   Bloque superior COMPACTO en una sola fila (EVOL izquierda + texto
   derecha, centrados entre si), y el video justo debajo. La altura del
   bloque la marca el robot: la imagen se limita por ALTO (max-height),
   no por ancho, que es lo que antes disparaba la altura de la seccion. */
#pregunta-evol{padding:64px 0;}
.evol-section{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:44px;align-items:flex-start;
}
.evol-portrait{display:flex;justify-content:center;align-items:center;}
.evol-portrait img{
  max-height:345px;width:auto;max-width:100%;display:block;
  filter:drop-shadow(0 26px 52px rgba(34,211,245,.22));
  animation:float 6s ease-in-out infinite;
}
.evol-intro{display:flex;flex-direction:column;}
.evol-intro .section-title{margin-bottom:10px;font-size:clamp(26px,2.9vw,37px);}
.evol-intro .section-intro{margin-bottom:0;max-width:640px;}

@media(max-width:900px){
  /* mobile: texto primero, EVOL despues, video al final */
  .evol-section{grid-template-columns:1fr;gap:24px;}
  .evol-portrait{order:2;}
  .evol-intro{order:1;}
  .evol-portrait img{max-height:250px;}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@media (prefers-reduced-motion:reduce){ .evol-portrait img{animation:none;} }

/* video demostrativo de EVOL: ultimo bloque de la seccion (EVOL+texto ->
   "Ahora te toca a ti" -> video), centrado y horizontal */
.evol-video-block{margin:42px auto 0;max-width:850px;}
.evol-video-block .hero-video-frame{aspect-ratio:16/9;box-shadow:0 20px 46px rgba(0,0,0,.35);}
.evol-video-block video{object-fit:cover;}
/* la leyenda va ARRIBA del video: presenta lo que se va a ver, asi que
   necesita contraste real (--ink-3 quedaba casi ilegible sobre el fondo) */
.evol-video-block .hero-media-caption{
  text-align:center;margin:0 0 12px;
  color:var(--ink-1);font-size:13.5px;
}

.evol-demo{border:1px solid var(--line-strong);border-radius:18px;background:var(--bg-glass);padding:24px 26px;margin-top:34px;}
.evol-prompt{font-family:var(--font-display);font-size:21px;color:var(--ink-0);margin-bottom:14px;}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.pill-btn{
  font-size:13px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-1);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.pill-btn:hover{border-color:var(--cyan);color:var(--ink-0);transform:translateY(-1px);}
.pill-btn.active{background:linear-gradient(90deg,var(--cyan),var(--violet));color:#04102b;border-color:transparent;font-weight:700;}
/* fuera del flujo hasta que EVOL responde: antes quedaba con opacity:0
   pero seguia ocupando ~70px, que era el hueco vacio del panel. El JS
   solo agrega la clase .show, asi que basta con alternar el display. */
.evol-response{display:none;}
.evol-response.show{
  display:flex;gap:16px;align-items:stretch;border-top:1px solid var(--line);padding-top:20px;
  opacity:1;transform:translateY(0);
}
/* el avatar acompana la ALTURA de la burbuja (align-self:stretch), no un
   tamano fijo -- asi crece o se achica con el largo de la respuesta */
.evol-response img{
  width:155px;height:auto;align-self:stretch;flex:none;
  object-fit:contain;object-position:center center;
  background:none;padding:0;border-radius:0;
}
@media(max-width:560px){ .evol-response img{width:92px;} }
.evol-response .bubble{background:var(--bg-void);border:1px solid var(--line);border-radius:14px;padding:16px 18px;flex:1;}
.evol-response .route{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.evol-response .route span{font-size:11px;padding:4px 9px;border-radius:999px;background:var(--good-bg);color:var(--good);}
.evol-response .route span.prod{background:rgba(155,77,255,.14);color:var(--violet);}
.evol-route-cta{margin-top:14px;}
.evol-route-cta a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:#04102b;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  padding:9px 16px;border-radius:9px;transition:transform .15s,box-shadow .15s;
}
.evol-route-cta a:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(34,211,245,.28);}
.evol-route-cta a:focus-visible{outline:2px solid var(--ink-0);outline-offset:2px;}
.evol-placeholder{color:var(--ink-3);font-size:13.5px;border-top:1px solid var(--line);padding-top:16px;}
@media(prefers-reduced-motion:reduce){.evol-response{transition:none;}}

/* ---------- status tags ---------- */
.status-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.status-group{flex:1;min-width:220px;}
.status-group .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:700;}
.status-group.avail .label{color:var(--good);}
.status-group.pending .label{color:var(--pending);}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;border-radius:999px;margin:0 6px 6px 0;}
.tag.avail{background:var(--good-bg);color:var(--good);}
.tag.pending{background:var(--pending-bg);color:var(--pending);}
.placeholder-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--pending-bg);border:1px solid rgba(245,179,66,.3);
  border-radius:10px;padding:12px 14px;margin-top:14px;font-size:13px;color:var(--pending);
}

/* ---------- footer ---------- */
footer.site-footer{padding:36px 0 28px;}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;}
/* logo completo del footer -- antes 30px, se perdia visualmente */
/* ancho objetivo 80-90px desktop, 55-65px mobile (logo_lingt.png es 1536x1024, ratio 1.5:1) */
.footer-brand img{height:57px;margin-bottom:16px;}
@media(max-width:640px){ .footer-brand img{height:40px;} }
.footer-brand p{font-size:13.5px;color:var(--ink-1);max-width:280px;}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-links h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin:0 0 12px;font-weight:700;}
.footer-links a{display:block;color:var(--ink-1);font-size:13.5px;margin-bottom:8px;}
.footer-links a:hover{color:var(--ink-0);}
.footer-bottom{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;font-size:12px;color:var(--ink-3);}

/* ---------- header de subpaginas -- mismo fondo EVOL-IA DATA FLOW que Home ---------- */
.page-hero{padding:174px 0 60px;position:relative;overflow:hidden;min-height:700px;}
/* 2026-09-01: en celular/tablet el bloque medía 1086px y el video de fondo
   se estiraba a esa altura completa (height:100%), así que object-fit:cover
   recortaba casi todo el ancho del video y se veía gigante y desbordado.
   Se baja el min-height y se limita el alto del video/capa oscura a 300px:
   el video se ve completo arriba y abajo continúa el fondo azul liso
   (mismo color que la capa oscura, por eso no se nota el corte). */
@media(max-width:860px){
  .page-hero{padding:130px 0 50px;min-height:520px;}
  .hero-bg-video,.hero-bg-overlay{height:min(100%,300px);}
}
.page-hero h1{font-size:clamp(28px,4vw,44px);max-width:760px;}
.page-hero .lede{font-size:16px;color:var(--ink-1);max-width:640px;margin-top:16px;}
.page-hero > .wrap{position:relative;z-index:1;}

/* ---------- seguridad ---------- */
/* Las clases que habia aqui eran exclusivas de esta pagina y sostenian
   las dos tarjetas-lista que se han sustituido por bloques narrativos. */

.seg-intro{max-width:820px;}
.seg-intro h2{
  font-family:var(--font-display);font-size:clamp(21px,2.6vw,29px);
  color:var(--ink-0);margin:0 0 14px;
}
.seg-intro p{color:var(--ink-1);font-size:15.5px;line-height:1.65;margin:0;max-width:740px;}

.seg-texto{max-width:740px;}
.seg-texto p{color:var(--ink-2);font-size:15px;line-height:1.68;margin:0 0 14px;}
.seg-texto p:last-child{margin-bottom:0;}

/* Texto y video, a dos columnas. El video manda en ancho: es 16:9. */
.seg-media{display:grid;grid-template-columns:1fr minmax(280px,520px);gap:44px;align-items:center;}
@media(max-width:1100px){ .seg-media{grid-template-columns:1fr minmax(240px,400px);gap:32px;} }
@media(max-width:900px){ .seg-media{grid-template-columns:1fr;gap:26px;} }
.seg-media-texto .section-title{margin-bottom:12px;}
.seg-media-texto p{color:var(--ink-2);font-size:15px;line-height:1.68;margin:0;max-width:520px;}
.seg-media-video{margin:0;width:100%;position:relative;}
.seg-media-video video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:16px;border:1px solid var(--line-strong);background:var(--bg-void);
  box-shadow:0 22px 44px rgba(4,10,30,.5);
}
@media(max-width:900px){ .seg-media-video{max-width:520px;margin-inline:auto;} }

/* Principios: bloques ligeros, sin caja pesada ni vinetas */
.seg-principios{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;margin-top:34px;}
@media(max-width:980px){ .seg-principios{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .seg-principios{grid-template-columns:1fr;} }
.seg-principio{border-left:2px solid var(--cyan);padding-left:16px;}
.seg-principio:nth-child(2){border-left-color:var(--azure);}
.seg-principio:nth-child(3){border-left-color:var(--violet);}
.seg-principio:nth-child(4){border-left-color:var(--good);}
.seg-principio:nth-child(5){border-left-color:var(--cyan);}
.seg-principio:nth-child(6){border-left-color:var(--azure);}
.seg-principio:nth-child(7){border-left-color:var(--violet);}
.seg-principio h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-0);margin:0 0 8px;
}
.seg-principio p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.55;}

/* Controles confirmados: lista aireada, sin tarjeta */
.seg-controles{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:840px;}
.seg-controles li{
  border-top:1px solid var(--line);padding-top:14px;
  font-size:14.5px;color:var(--ink-2);line-height:1.6;
}
.seg-controles li b{color:var(--ink-0);font-weight:600;}

/* Controles en tarjetas */
/* Siete controles legibles de un vistazo. La septima ocupa la fila entera
   en vez de quedarse sola y descolgada al final de la rejilla. */
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
@media(max-width:980px){ .seg-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .seg-grid{grid-template-columns:1fr;} }
.seg-card{
  border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;
  background:var(--bg-glass);display:flex;flex-direction:column;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.seg-card:hover{background:var(--bg-glass-hover);border-color:var(--line-strong);transform:translateY(-2px);}
.seg-card-num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--cyan);margin-bottom:12px;
}
.seg-card:nth-child(3n+2) .seg-card-num{color:var(--azure);}
.seg-card:nth-child(3n) .seg-card-num{color:var(--violet);}
.seg-card h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-0);margin:0 0 9px;
}
.seg-card p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55;}
/* La septima cierra la composicion a lo ancho */
.seg-card--ancha{grid-column:1 / -1;border-left:2px solid var(--good);}
.seg-card--ancha .seg-card-num{color:var(--good);}
@media(prefers-reduced-motion:reduce){
  .seg-card{transition:none;}
  .seg-card:hover{transform:none;}
}

/* Recorrido del documento */
/* Ocho pasos como secuencia legible, no como diagrama de arquitectura. */
.seg-ciclo-titulo{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:52px 0 18px;
}
.seg-ciclo{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
@media(max-width:980px){ .seg-ciclo{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .seg-ciclo{grid-template-columns:1fr;} }
.seg-ciclo li{
  display:flex;align-items:baseline;gap:10px;
  border-top:1px solid var(--line-strong);padding-top:12px;
  font-size:13.5px;color:var(--ink-1);line-height:1.45;
}
.seg-ciclo li span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--cyan);
  flex:none;
}
.seg-ciclo li:nth-child(4n+2) span{color:var(--azure);}
.seg-ciclo li:nth-child(4n+3) span{color:var(--violet);}
.seg-ciclo li:nth-child(4n)   span{color:var(--good);}

/* Triada CIA: tres bloques con la inicial como ancla visual */
.seg-cia{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;}
@media(max-width:900px){ .seg-cia{grid-template-columns:1fr;gap:20px;} }
.seg-cia-item{
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  background:var(--bg-glass);position:relative;overflow:hidden;
}
.seg-cia-item:nth-child(2){border-color:rgba(58,134,255,.28);}
.seg-cia-item:nth-child(3){border-color:rgba(155,77,255,.28);}
.seg-cia-letra{
  font-family:var(--font-display);font-size:56px;line-height:1;
  color:var(--cyan);opacity:.22;position:absolute;right:16px;top:10px;
}
.seg-cia-item:nth-child(2) .seg-cia-letra{color:var(--azure);}
.seg-cia-item:nth-child(3) .seg-cia-letra{color:var(--violet);}
.seg-cia-item h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-0);margin:0 0 10px;position:relative;
}
.seg-cia-item p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6;position:relative;}

/* Seguridad aplicada: texto y EVOL, sin fondo ni marco para la imagen */
.seg-aplicada{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:48px;align-items:center;}
@media(max-width:1100px){ .seg-aplicada{grid-template-columns:1fr minmax(200px,280px);gap:34px;} }
@media(max-width:900px){
  .seg-aplicada{grid-template-columns:1fr;gap:28px;justify-items:center;}
  .seg-aplicada .seg-evol{order:2;}
  .seg-aplicada .seg-aplicada-texto{order:1;}
}
.seg-aplicada-texto .cta.secondary{margin-top:22px;display:inline-flex;}
.seg-evol{margin:0;display:flex;justify-content:center;position:relative;}
.seg-evol img{
  display:block;width:auto;max-width:100%;height:auto;max-height:380px;position:relative;z-index:1;
  filter:drop-shadow(0 18px 26px rgba(4,10,30,.5));
}
/* Halo anclado al contenedor: sin porcentajes de ancho, no puede desbordar */
.seg-evol::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--cyan) 18%, transparent) 0%,
    color-mix(in srgb, var(--violet) 10%, transparent) 46%,
    transparent 70%);
}
@media(max-width:1100px){ .seg-evol img{max-height:320px;} }
@media(max-width:900px){  .seg-evol img{max-height:290px;} }
@media(max-width:480px){  .seg-evol img{max-height:250px;} }

/* Compromiso vs control: dos columnas, sin tarjeta pesada */
.seg-dos{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px;}
@media(max-width:760px){ .seg-dos{grid-template-columns:1fr;gap:22px;} }
.seg-dos-col{border-left:2px solid var(--cyan);padding-left:18px;}
.seg-dos-col:nth-child(2){border-left-color:var(--violet);}
.seg-dos-col h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-0);margin:0 0 9px;
}
.seg-dos-col p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6;}

.seg-nota{font-size:13.5px;color:var(--ink-3);margin:26px 0 0;max-width:760px;line-height:1.6;}

.seg-cierre .wrap{display:flex;justify-content:center;}
.seg-frase{
  font-family:var(--font-display);font-size:clamp(18px,2.2vw,25px);line-height:1.5;
  color:var(--ink-0);max-width:820px;margin:0;text-align:center;
}

/* ---------- LAB ---------- */
/* Hero mas compacto SOLO en LAB: el titular es corto y el peso de la
   pagina son las tarjetas, no la portada. .page-hero global no cambia
   (lo usan Contracts, Nosotros, Seguridad y Contacto). */
.page-lab .page-hero{padding:148px 0 44px;}
@media(max-width:860px){ .page-lab .page-hero{padding:112px 0 36px;} }
.page-lab section{padding-top:56px;}

.lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:980px){.lab-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.lab-grid{grid-template-columns:1fr;}}
.lab-card{
  border:1px solid var(--line-strong);border-radius:14px;padding:18px;background:var(--bg-glass);
  min-height:170px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
/* Taxonomia de 5 estados -- un video/demo NO implica "Producto" */
.lab-card.product{border-style:solid;border-color:rgba(52,211,153,.4);}
.lab-card.demo{border-style:solid;border-color:rgba(34,211,245,.4);}
.lab-card.dev{border-style:solid;border-color:rgba(47,107,255,.4);}
.lab-card.lab{border-style:dashed;border-color:rgba(155,77,255,.4);}
.lab-card.pending{border-style:dashed;}
/* Capacidad: servicio de EVOL-IA, no un producto SaaS cerrado */
.lab-card.capacidad{border-style:solid;border-color:rgba(155,77,255,.45);}
.lab-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.3);}
.lab-card .lab-tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;font-weight:700;}
.lab-card.product .lab-tag{color:var(--good);}
.lab-card.demo .lab-tag{color:var(--cyan);}
.lab-card.capacidad .lab-tag{color:color-mix(in srgb, var(--violet) 76%, #fff);}
/* el CTA de capacidad es un <button>: abre el widget, no navega */
.lab-card.capacidad .cta.secondary{background:none;border:0;padding:6px 0;cursor:pointer;font:inherit;min-height:34px;}
/* aclarados: a 10.5px el azure y el violeta puros quedaban bajo 4.5:1 */
.lab-card.dev .lab-tag{color:color-mix(in srgb, var(--azure) 76%, #fff);}
.lab-card.lab .lab-tag{color:color-mix(in srgb, var(--violet) 76%, #fff);}
.lab-card.pending .lab-tag{color:var(--ink-2);}
.lab-card h4{font-family:var(--font-body);font-weight:700;color:var(--ink-0);font-size:14.5px;margin:0 0 6px;}
.lab-card p{font-size:12px;color:var(--ink-2);margin:0;flex:1;}
.lab-card video{width:100%;border-radius:8px;margin-top:10px;}
/* el CTA se ancla abajo: con alturas de texto distintas, los enlaces de
   todas las tarjetas quedan igual alineados en cada fila */
.lab-card .cta.secondary{
  margin-top:14px;align-self:flex-start;
  background:none;border:none;padding:0;
  font-size:12.5px;font-weight:700;color:var(--cyan);
  transition:color .15s,transform .15s;
}
.lab-card .cta.secondary:hover{color:var(--ink-0);transform:translateX(2px);}
.lab-card .cta.secondary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* Leyenda de estados (pagina LAB): barra propia, no texto suelto */
.lab-legend{
  display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:28px;
  font-size:12px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:12px;
  background:var(--bg-glass);padding:16px 20px;
}
.lab-legend span{display:inline-flex;align-items:center;gap:7px;}
.lab-legend .dot{width:8px;height:8px;border-radius:50%;flex:none;}
@media(prefers-reduced-motion:reduce){ .lab-card .cta.secondary{transition:none;} }

/* Teaser de LAB en Home: 3 mini-casos (que se construyo), no un repaso
   de las capacidades -- eso ya vive en la seccion Capacidades */
.lab-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.lab-teaser-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.lab-teaser-grid{grid-template-columns:1fr;}}
.lab-teaser-grid .lab-card{display:flex;flex-direction:column;}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px;}
.proj-tags span{
  font-size:10.5px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--ink-2);
}
.proj-cta{
  margin-top:auto;align-self:flex-start;
  font-size:12.5px;font-weight:700;color:var(--cyan);
  transition:color .15s,transform .15s;
}
.proj-cta:hover{color:var(--ink-0);transform:translateX(2px);}
.proj-cta:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* Teaser de Nosotros en Home: quienes somos y como pensamos */
.nosotros-teaser{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:760px;}

/* 2026-09-01: la figura .teaser-evol (robot con grafica, debajo del texto
   de esta seccion) no tenia ninguna regla de tamano propia. La imagen trae
   width="620" height="930" en el HTML, y el reset global "img{max-width:100%}"
   solo limita el ancho en pantallas angostas, no el alto -- entonces se
   mostraba a su tamano completo: hasta 930px de alto, igual en celular que
   en PC (un bloque enorme, casi vacio, antes de ver el resto de la pagina).
   Se centra la figura y se limita la altura de la imagen igual que en las
   otras imagenes de robot del sitio (.seg-evol, .nos-evol). */
.teaser-evol{margin:0;display:flex;justify-content:center;}
.teaser-evol img{width:auto;height:auto;max-width:100%;max-height:345px;}
.teaser-evol img{animation:float 6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){ .teaser-evol img{animation:none;} }
@media(max-width:1100px){ .teaser-evol img{max-height:320px;} }
@media(max-width:900px){ .teaser-evol img{max-height:290px;} }
@media(max-width:480px){ .teaser-evol img{max-height:250px;} }

/* 2026-09-01: .teaser-fila (contenedor de texto + robot en "Como
   trabajamos") no tenia ninguna regla de layout -- por eso el robot
   quedaba apilado debajo del texto en vez de al lado. Las reglas de
   arriba (.teaser-evol img en 1100/900/480px) ya estaban pensadas para
   un layout en fila, asi que se agrega el flex que faltaba, solo en
   escritorio; en movil/tablet (<=980px) se mantiene el apilado actual,
   sin cambios. */
@media(min-width:981px){
  .teaser-fila{display:flex;align-items:center;justify-content:flex-start;gap:120px;}
}

/* ── 2026-09-04: densidad vertical de "Como trabajamos" (#nosotros-teaser) ──
   Medido en el navegador a 1365x660 (portatil 15"): la seccion ocupaba
   557px de un viewport de 660px -- el 84% de la pantalla para dos parrafos
   y el robot. Las reglas responsables, por impacto:

     1. section{padding:88px 0}  -> 176px de la altura es solo padding.
     2. Separacion entre los dos parrafos: 73px reales, por suma de TRES
        margenes distintos -> .section-intro{margin-bottom:44px} + el
        margen superior por defecto del navegador en <p> (1em = 15px, que
        esta hoja nunca resetea) + el gap:14px del flex column de
        .nosotros-teaser. Dentro de flex los margenes NO colapsan, por eso
        se acumulan los tres en vez de quedarse en el mayor.
     3. .teaser-fila{justify-content:space-between} sobre una fila de
        1294px con una columna de texto de 640px -> 400px de vacio
        horizontal: eso es lo que aleja a EVOL del contenido.
     4. .teaser-evol img{max-height:380px} -> con el texto en 359px, es el
        robot (no el texto) quien fija la altura de la fila.

   Se corrigen esas cuatro. No se tocan textos, imagenes ni tipografias. */

/* (2) Se aplica en todos los anchos: acumular tres separaciones distintas
   entre dos parrafos es un defecto de espaciado, no un ajuste de portatil.
   El gap:14px del contenedor sigue marcando el ritmo de la columna; el
   +8px solo distingue parrafo de parrafo, sin abrir un hueco. */
.nosotros-teaser .section-intro{margin-top:0;margin-bottom:0;}
.nosotros-teaser .section-intro + .section-intro{margin-top:8px;}

/* (1)(3) Regimen de fila (>=981px, donde .teaser-fila es flex) y hasta
   1440px: se recorta el padding vertical y se limita el ancho de la fila
   para acercar EVOL al texto. El limite inferior es 981px y no 1200px
   porque a 1199x700 se medio exactamente el mismo defecto (557px de
   alto, 80% del viewport): el corte en 1200 habria sido arbitrario.
   Importante: SIN margin:auto -- la fila sigue anclada a la izquierda,
   asi que el texto conserva intacto el eje horizontal compartido de Home
   (Hero, Capacidades, Productos...). Lo unico que se mueve es el robot.
   El clamp() se auto-anula por debajo de ~1060px de viewport, donde la
   fila ya es mas estrecha que el limite. */
@media(min-width:981px) and (max-width:1440px){
  #nosotros-teaser{padding:64px 0;}
  .teaser-fila{max-width:clamp(1000px,78vw,1160px);gap:48px;}
}

/* (4) Ademas, viewport bajo (<=800px de alto): es el caso de la captura,
   donde la seccion se comia la pantalla. Se ajusta el robot a la altura
   real del bloque de texto (294px) para que sea el texto y no la imagen
   quien fije la altura de la fila, y se recorta un poco mas el padding.
   Sin limite inferior de alto: un viewport aun mas bajo necesita este
   recorte todavia mas. */
@media(min-width:981px) and (max-width:1440px) and (max-height:800px){
  #nosotros-teaser{padding:56px 0;}
  .teaser-evol img{max-height:320px;}
}

.enfoque-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;}
@media(max-width:820px){.enfoque-grid{grid-template-columns:1fr;}}
.enfoque-card{
  border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:12px;padding:20px 22px;background:var(--bg-glass);
  transition:background .25s ease,transform .25s ease;
}
.enfoque-card:nth-child(2){border-left-color:var(--azure);}
.enfoque-card:nth-child(3){border-left-color:var(--violet);}
.enfoque-card:hover{background:var(--bg-glass-hover);transform:translateY(-3px);}
.enfoque-card h4{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-0);margin:0 0 8px;
}
.enfoque-card p{font-size:13.5px;color:var(--ink-1);margin:0;line-height:1.5;}

.fundadora{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line);margin-top:32px;padding-top:24px;
}
.fundadora-nombre{font-family:var(--font-display);font-size:19px;color:var(--ink-0);margin:0 0 3px;}
.fundadora-rol{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin:0 0 8px;}
.fundadora-perfil{font-size:13px;color:var(--ink-2);margin:0;max-width:640px;}
@media(prefers-reduced-motion:reduce){
  .enfoque-card,.proj-cta{transition:none;}
  .enfoque-card:hover{transform:none;}
}

/* ---------- casos ---------- */
.cases-empty{border:1px dashed var(--line-strong);border-radius:14px;padding:32px;text-align:center;color:var(--ink-2);font-size:14px;}

/* ---------- formulario de contacto (visual, sin backend) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;color:var(--ink-2);}
.field input,.field select,.field textarea{
  background:var(--bg-glass);border:1px solid var(--line-strong);border-radius:9px;
  padding:11px 13px;color:var(--ink-0);font-size:14px;font-family:inherit;
}
.field textarea{resize:vertical;min-height:100px;}
/* el gris por defecto del navegador (#757575) daba 3.75:1 sobre el campo
   oscuro; --ink-2 sube a ~5:1 y ademas usa la paleta del sitio */
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:1;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;}
.contact-side{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--bg-glass);height:fit-content;}
.contact-side h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:0 0 14px;}
.contact-side .row{display:flex;justify-content:space-between;font-size:13.5px;padding:10px 0;border-bottom:1px solid var(--line);}
.contact-side .row:last-child{border-bottom:none;}
.contact-side .row span:first-child{color:var(--ink-2);}
.contact-side .row span:last-child{color:var(--pending);}
.contact-side .row span.filled{color:var(--cyan);}

/* bloque de identidad de la tarjeta de contacto */
.contact-person{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:6px;}
.contact-name{font-family:var(--font-display);font-size:17px;color:var(--ink-0);margin:0 0 4px;}
.contact-role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px;font-weight:600;}
.contact-creds{margin:0;padding-left:16px;font-size:13px;color:var(--ink-1);}
.contact-creds li{margin-bottom:4px;}

/* botones de contacto profesional (LinkedIn / WhatsApp) */
/* Cuatro accesos: 2x2 en escritorio, uno por fila en movil. Rejilla en
   vez de flex para que las dos columnas midan lo mismo aunque las
   etiquetas tengan distinta longitud. */
.contact-social{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px;}
@media(max-width:520px){.contact-social{grid-template-columns:1fr;}}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:1 1 0;min-width:130px;
  border:1px solid var(--line-strong);border-radius:10px;
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--ink-0);
  background:var(--bg-glass);
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.social-btn svg{width:17px;height:17px;flex:none;}
.social-btn:hover{
  transform:translateY(-2px);border-color:var(--cyan);
  background:var(--bg-glass-hover);box-shadow:0 10px 22px rgba(0,0,0,.3);
}
.social-btn.wa:hover{border-color:#25D366;box-shadow:0 10px 22px rgba(37,211,102,.22);}
.social-btn.li:hover{border-color:#0A66C2;box-shadow:0 10px 22px rgba(10,102,194,.22);}
.social-btn.li:hover svg{color:#0A66C2;}
.social-btn.yt:hover{border-color:#FF0000;box-shadow:0 10px 22px rgba(255,0,0,.20);}
.social-btn.yt:hover svg{color:#FF0000;}
.social-btn.gh:hover{border-color:var(--ink-0);box-shadow:0 10px 22px rgba(0,0,0,.32);}
.social-btn.wa:hover svg{color:#25D366;}
.social-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
/* sin URL configurada todavia: visible pero no accionable */
.social-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;}
@media(prefers-reduced-motion:reduce){ .social-btn{transition:none;} .social-btn:hover{transform:none;} }
.contact-side .row span.filled a{color:inherit;}
.contact-side .row span.filled a:hover{text-decoration:underline;}
.form-note{font-size:12px;color:var(--ink-3);margin-top:4px;}

/* ==========================================================
   EVOL — asistente web flotante (las 6 paginas)
   Sin IA real todavia: solo componente visual/funcional.
   Construido por JS (main.js) y anexado a document.body, por eso
   no hay marcado propio en el HTML de cada pagina.
   ========================================================== */
.evol-fab{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  width:86px;height:86px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-glass-hover),var(--bg-void));
  border:1px solid var(--line-strong);
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.evol-fab:hover{transform:translateY(-2px);border-color:var(--cyan);}
.evol-fab:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.evol-fab.evol-fab--dim{opacity:.55;}
/* Con el panel abierto, el avatar flotante queda oculto -- ya existe un
   boton de cierre (X) en el encabezado del panel, asi que no hace falta
   el "bolita" duplicado detras. Se apoya en aria-expanded, que main.js
   ya actualiza al abrir/cerrar: cero cambios de logica para lograrlo. */
.evol-fab[aria-expanded="true"]{display:none;}
/* EVOL en video dentro del circulo (2026-09-13). Antes era evol-avatar.png a
   68x73 con object-fit contain; el video es cuadrado y el circulo lo recorta. */
.evol-fab-video{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;pointer-events:none;}
.evol-fab-tooltip{
  position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(4px);
  background:var(--bg-void);border:1px solid var(--line-strong);color:var(--ink-0);
  font-size:12.5px;white-space:nowrap;padding:7px 12px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
}
.evol-fab:hover .evol-fab-tooltip,.evol-fab:focus-visible .evol-fab-tooltip{
  opacity:1;transform:translateY(-50%) translateX(0);
}

/* El panel se abre AL COSTADO IZQUIERDO del avatar, no encima: el FAB
   ocupa 24px..110px desde la derecha (86px de ancho), asi que el panel
   arranca en 126px y deja 16px de aire. EVOL queda visible y se lee como
   el origen del asistente, no como algo tapado por una ventana. */
.evol-panel{
  position:fixed;right:126px;bottom:24px;z-index:1000;
  width:300px;max-width:calc(100vw - 150px);
  height:min(440px, calc(100vh - 60px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-glass-hover);backdrop-filter:blur(16px);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;transform:translateX(12px) scale(.98);
  transition:opacity .18s ease,transform .18s ease;
}
/* CRITICO: `.evol-panel{display:flex}` de arriba tiene la misma
   especificidad que la regla nativa del navegador para [hidden] y la
   estaba ganando por orden de aparicion -- el panel quedaba con
   opacity:0 pero seguia ocupando su lugar en pantalla y "robando" los
   clics de lo que estuviera debajo (asi se rompieron los controles del
   video del Hero). Este selector con mas especificidad restaura el
   display:none real mientras el atributo hidden este presente. */
.evol-panel[hidden]{display:none;}
.evol-panel.open{opacity:1;transform:translateX(0) scale(1);}
@media(prefers-reduced-motion:reduce){
  .evol-panel{transition:none;}
  .evol-fab{transition:none;}
}
.evol-panel-header{
  display:flex;align-items:center;gap:10px;padding:16px 16px;
  border-bottom:1px solid var(--line);flex:none;
}
.evol-panel-avatar{width:36px;height:36px;object-fit:contain;border-radius:8px;background:var(--bg-void);flex:none;}
.evol-panel-heading{flex:1;min-width:0;}
.evol-panel-heading p{margin:0;}
.evol-panel-heading #evol-panel-title{font-family:var(--font-display);font-size:15px;color:var(--ink-0);}
.evol-panel-sub{font-size:11.5px;color:var(--ink-2);}
.evol-panel-online{
  display:flex;align-items:center;gap:5px;font-size:11px;color:var(--good);flex:none;
}
.evol-panel-online .dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;}
.evol-panel-close{
  flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-1);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.evol-panel-close:hover{border-color:var(--cyan);color:var(--ink-0);}
.evol-panel-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.evol-panel-body{flex:1;overflow-y:auto;padding:16px;}
.evol-panel-body{scrollbar-width:none;-ms-overflow-style:none;}
.evol-panel-body::-webkit-scrollbar{display:none;}
.evol-panel-msg{
  background:var(--bg-void);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;font-size:13.5px;color:var(--ink-1);line-height:1.5;margin-bottom:16px;
}
/* las opciones rapidas viven fuera del historial: son sugerencias
   siempre disponibles, no el contenido de la conversacion */
/* Menu CONTEXTUAL: aparece cuando ayuda a arrancar y se repliega en
   cuanto la conversacion tiene rumbo. Sin max-height ni overflow: era
   una segunda zona de scroll dentro del panel, encima del historial. */
.evol-panel-pills{
  /* Rejilla compacta (2026-09-13): con flex-wrap cada pildora media lo
     que su texto y en 272px cabian una o dos por fila -- cuatro filas y
     178px para seis opciones. auto-fit con minimo de 84px da 3 columnas
     en el panel de escritorio, 2 si el ancho no alcanza y mas en paneles
     anchos (tableta), sin media queries ni JS. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:5px;flex:none;
  padding:8px 10px;border-top:1px solid var(--line);
}
/* display:flex gana al atributo `hidden`, hay que decirlo explicitamente */
.evol-panel-pills[hidden]{display:none;}

/* Accion discreta para volver a ver las capacidades. No es un segundo
   menu: es una linea de texto que despliega el que ya existe. */
.evol-explorar{
  flex:none;background:none;border:0;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:11.5px;letter-spacing:.02em;
  padding:8px 14px;text-align:left;cursor:pointer;font-family:inherit;
}
.evol-explorar:hover{color:var(--cyan);}
.evol-explorar:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.evol-explorar[hidden]{display:none;}
/* Pildoras como accesos rapidos, no como tarjetas: 11px, hasta dos lineas,
   la misma altura dentro de cada fila (la rejilla las estira). El color es
   un acento por posicion -- borde al 38%, degradado muy leve y una linea
   luminosa de 1px arriba --; el texto sigue en blanco para leerse igual. */
.evol-panel-pills .pill-btn{
  --acento:var(--cyan);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:28px;padding:4px 5px;border-radius:10px;
  font-size:11px;line-height:1.15;text-align:center;color:var(--ink-0);
  border:1px solid color-mix(in srgb, var(--acento) 38%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--acento) 14%, transparent), color-mix(in srgb, var(--acento) 5%, transparent));
}
.evol-panel-pills .pill-btn::before{
  content:"";position:absolute;top:0;left:18%;right:18%;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--acento), transparent);opacity:.8;
}
/* Identidad EVOL-IA: azul, morado, cian y turquesa; ambar y rosa como
   acentos suaves. Por posicion: en el sub-menu de Desarrollos cada
   categoria conserva siempre su color. */
.evol-panel-pills .pill-btn:nth-child(6n+1){--acento:#4F7CFF;}
.evol-panel-pills .pill-btn:nth-child(6n+2){--acento:var(--violet);}
.evol-panel-pills .pill-btn:nth-child(6n+3){--acento:var(--cyan);}
.evol-panel-pills .pill-btn:nth-child(6n+4){--acento:#2DD4BF;}
.evol-panel-pills .pill-btn:nth-child(6n+5){--acento:#F5B461;}
.evol-panel-pills .pill-btn:nth-child(6n){--acento:#E879F9;}
.evol-panel-pills .pill-btn:hover{
  color:var(--ink-0);
  border-color:color-mix(in srgb, var(--acento) 70%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--acento) 24%, transparent), color-mix(in srgb, var(--acento) 9%, transparent));
  box-shadow:0 0 10px color-mix(in srgb, var(--acento) 20%, transparent);
}
.evol-panel-pills .pill-btn:focus-visible{outline:2px solid var(--acento);outline-offset:1px;}
/* La opcion elegida conserva el estado activo de siempre. */
.evol-panel-pills .pill-btn.active{
  background:linear-gradient(90deg,var(--cyan),var(--violet));color:#04102b;border-color:transparent;
}
.evol-panel-answer{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;
}
.evol-panel-answer:not([hidden]){opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.evol-panel-answer{transition:none;}}
.evol-panel-answer p{font-size:13.5px;color:var(--ink-1);line-height:1.5;margin:0 0 12px;}
.evol-panel-ctas{display:flex;flex-direction:column;gap:8px;}
.evol-cta-btn{
  font-size:12.5px;font-weight:700;color:var(--ink-0);text-align:center;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  border-radius:9px;padding:10px 12px;
}
.evol-cta-btn:hover{filter:brightness(1.08);}
.evol-cta-btn:focus-visible{outline:2px solid var(--ink-0);outline-offset:2px;}

/* ---- chat de EVOL: historial, burbujas e input ---- */
.evol-panel-body{display:flex;flex-direction:column;gap:12px;}
.evol-msg{display:flex;gap:9px;align-items:flex-start;}
.evol-msg-avatar{width:30px;height:32px;object-fit:contain;flex:none;}
.evol-msg .evol-bubble{
  font-size:13.5px;line-height:1.5;color:var(--ink-1);
  border-radius:14px;padding:11px 13px;max-width:82%;
}
.evol-msg--bot .evol-bubble{background:var(--bg-void);border:1px solid var(--line);white-space:pre-wrap;}
.evol-msg--user{justify-content:flex-end;}
.evol-msg--user .evol-bubble{
  background:rgba(34,211,245,.12);border:1px solid rgba(34,211,245,.28);
  color:var(--ink-0);white-space:pre-wrap;
}
/* indicador "EVOL esta pensando" */
.evol-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle;}
.evol-dots i{width:4px;height:4px;border-radius:50%;background:var(--cyan);display:inline-block;}
@media(prefers-reduced-motion:no-preference){
  .evol-dots i{animation:evol-blink 1.2s infinite;}
  .evol-dots i:nth-child(2){animation-delay:.2s;}
  .evol-dots i:nth-child(3){animation-delay:.4s;}
}
@keyframes evol-blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* fila de entrada: parte del panel, no una ventana aparte */
.evol-input-row{
  display:flex;align-items:flex-end;gap:8px;flex:none;
  padding:12px 14px;border-top:1px solid var(--line);
  background:rgba(6,12,34,.35);
}
.evol-input{
  flex:1;min-width:0;resize:none;overflow-y:auto;
  background:var(--bg-void);border:1px solid var(--line-strong);border-radius:12px;
  color:var(--ink-0);font-family:inherit;font-size:13.5px;line-height:1.45;
  padding:10px 12px;max-height:96px;
}
.evol-input::placeholder{color:var(--ink-2);opacity:1;}
/* Sin barra visible, como el historial: el texto sigue desplazandose con
   rueda, trackpad, tactil y teclado. Solo esta caja, no la pagina. */
.evol-input{scrollbar-width:none;-ms-overflow-style:none;}
.evol-input::-webkit-scrollbar{display:none;}
.evol-input:focus{outline:2px solid var(--cyan);outline-offset:1px;}
.evol-send{
  flex:none;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#04102b;
  font-size:17px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
}
/* El boton dice con la vista lo que hace: apagado sin texto que enviar,
   encendido en cuanto hay algo que mandar. */
.evol-send:disabled{opacity:.38;cursor:default;box-shadow:none;transform:none;}
.evol-send:disabled:hover{transform:none;box-shadow:none;}
.evol-send:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,211,245,.3);}
.evol-send:focus-visible{outline:2px solid var(--ink-0);outline-offset:2px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media(prefers-reduced-motion:reduce){ .evol-send{transition:none;} }

@media(max-width:900px){
  /* ya no cabe el panel al costado: se coloca ENCIMA del avatar, pero
     con 12px de aire (FAB = 24 abajo + 86 de alto => 122 minimo) para
     que EVOL siga asomando y conserve su identidad */
  .evol-panel{
    right:12px;left:12px;bottom:124px;width:auto;max-width:none;
    height:auto;max-height:calc(100vh - 210px);
  }
}
@media(max-width:640px){
  .evol-fab{bottom:16px;right:16px;width:70px;height:70px;}
  .evol-fab-tooltip{display:none;}
  /* FAB = 16 abajo + 70 de alto => 98 minimo, +12 de aire */
  .evol-panel{bottom:100px;max-height:calc(100vh - 180px);}
  .evol-msg .evol-bubble{max-width:86%;}
}

/* ==========================================================
   EVOL-IA Contracts (contracts.html)
   Todo prefijado .page-contracts / .ctr-* : la pagina dejo de
   reutilizar .cap-grid/.cap-card (componentes de Capacidades de
   Home) para poder compactarla sin tocar nada global.
   ========================================================== */
.page-contracts section{padding:66px 0;}
.page-contracts .section-intro{margin-bottom:26px;max-width:720px;}

/* estado real del producto: etapa final, no "idea en desarrollo" */
.ctr-status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;
  color:var(--cyan);background:rgba(34,211,245,.1);
  border:1px solid rgba(34,211,245,.32);
}
.ctr-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;
}

/* "Que gestiona": 4 tarjetas informativas compactas */
.ctr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:980px){.ctr-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.ctr-grid{grid-template-columns:1fr;}}
.ctr-card{
  border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:14px;padding:18px;background:var(--bg-glass);
  display:flex;flex-direction:column;
  transition:transform .25s ease,background .25s ease;
}
/* Cabecera de la tarjeta: icono de trazo a la izquierda y numero de orden
   a la derecha. Ambos heredan el acento de la tarjeta: ningun color nuevo. */
.ctr-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.ctr-card-ico{width:20px;height:20px;flex:none;color:var(--accent);}
.ctr-card-ico svg{width:100%;height:100%;display:block;}
.ctr-card-num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;margin-left:auto;
  color:color-mix(in srgb, var(--accent) 72%, #fff);
}
.ctr-card:hover{transform:translateY(-3px);background:var(--bg-glass-hover);}
.ctr-card h3{font-size:15px;color:var(--ink-0);margin:0 0 8px;line-height:1.3;}
.ctr-card p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.5;}

/* Flujo de la operacion: 01 -> 02 -> 03 -> 04. Reutiliza exactamente el
   borde, el radio, el acento y el hover de .ctr-card: ningun estilo nuevo,
   solo la disposicion horizontal y un conector de 1px entre etapas. */
.crm-flujo{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
@media(max-width:1000px){.crm-flujo{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.crm-flujo{grid-template-columns:1fr;}}
.crm-paso{
  border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:14px;padding:20px 18px;background:var(--bg-glass);
  display:flex;flex-direction:column;position:relative;
  transition:transform .25s ease,background .25s ease;
}
.crm-paso:hover{transform:translateY(-3px);background:var(--bg-glass-hover);}
.crm-paso .num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;margin-bottom:8px;
  color:color-mix(in srgb, var(--accent) 78%, #fff);
}
.crm-paso h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-0);margin:0 0 8px;
}
.crm-paso p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.55;}
/* El conector solo se dibuja cuando las cuatro etapas van en una fila. */
@media(min-width:1001px){
  .crm-paso:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:0;width:14px;height:1px;
    background:var(--line-strong);transform:translateX(14px);
  }
}
.crm-flujo-nota{margin-top:22px;font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:74ch;}

/* EVOL-IA CRM en accion: el video es el protagonista y los tres puntos lo
   apoyan. Deliberadamente NO son tarjetas -- llevan barra de acento a la
   izquierda, como .ctr-principle -- para que no se lean como un segundo
   catalogo de capacidades. Ningun color nuevo: heredan --accent. */
.crm-accion{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;margin-top:30px;}
@media(max-width:1000px){.crm-accion{grid-template-columns:1fr;gap:28px;}}
.crm-accion-video{
  margin:0;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#000;line-height:0;
}
/* alto automatico: el video conserva su proporcion, nunca se deforma */
.crm-accion-video video{width:100%;height:auto;display:block;}
.crm-accion-puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.crm-accion-punto{border-left:2px solid var(--accent);padding-left:16px;}
.crm-accion-punto h3{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-0);margin:0 0 6px;
}
.crm-accion-punto p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.55;}

/* "El proceso": 5 etapas */
.ctr-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:1100px){.ctr-steps{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.ctr-steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.ctr-steps{grid-template-columns:1fr;}}
.ctr-step{
  border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:14px;padding:20px 17px;background:var(--bg-glass);
  display:flex;flex-direction:column;
}
.ctr-step .num{
  font-family:var(--font-mono);font-size:11px;margin-bottom:8px;
  color:color-mix(in srgb, var(--accent) 78%, #fff);
}
.ctr-step h3{font-size:15px;color:var(--ink-0);margin:0 0 8px;}
.ctr-step p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.5;}

/* Principios de seguridad: compactos, sin repetir "Que gestiona" */
.ctr-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
@media(max-width:980px){.ctr-principles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.ctr-principles{grid-template-columns:1fr;}}
.ctr-principle{border-left:2px solid var(--cyan);padding-left:14px;}
.ctr-principle:nth-child(2){border-left-color:var(--azure);}
.ctr-principle:nth-child(3){border-left-color:var(--violet);}
.ctr-principle:nth-child(4){border-left-color:var(--good);}
.ctr-principle h4{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-0);margin:0 0 6px;
}
.ctr-principle p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.5;}

/* Bloque profesional del footer (solo Contracts) */
.footer-person{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;}
.footer-person-name{font-family:var(--font-display);font-size:15.5px;color:var(--ink-0);margin:0 0 4px;}
.footer-person-role{font-size:12.5px;color:var(--ink-2);margin:0 0 14px;}
.footer-person-links{display:flex;flex-wrap:wrap;gap:10px;}
.footer-person-links .social-btn{flex:0 0 auto;min-width:132px;}

@media(prefers-reduced-motion:reduce){
  .ctr-card,.crm-paso{transition:none;}
  .ctr-card:hover,.crm-paso:hover{transform:none;}
}


/* Sugerencias de la seccion protagonista. Deliberadamente discretas: no
   deben leerse como los botones de un chat, porque el unico chat es el
   flotante. Reutilizan borde, radio y acento ya existentes. */
.evol-ideas{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
.evol-ideas-titulo{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 16px;
}
.evol-ideas-row{display:flex;flex-wrap:wrap;gap:10px;}
.evol-idea{
  font-family:var(--font-body);font-size:12.5px;color:var(--ink-1);
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.evol-idea:hover,.evol-idea:focus-visible{
  border-color:var(--cyan);color:var(--ink-0);background:var(--bg-glass);
}
@media(prefers-reduced-motion:reduce){.evol-idea{transition:none;}}


/* Asistente Academico: el video del producto manda en su bloque. Alto
   automatico para que conserve su proporcion, y el mismo borde y radio
   que el resto de piezas de video del sitio. */
.aca-video{
  margin:28px auto 0;max-width:900px;
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#000;line-height:0;
}
.aca-video video{width:100%;height:auto;display:block;}


/* Hero de EVOL-IA LAB: la propuesta a la izquierda y la pieza visual a la
   derecha, para que el bloque no quede todo en una columna. Reutiliza el
   bloque que antes servia a otra seccion: ni una regla nueva de mas. */
.lab-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;}
@media(max-width:1000px){.lab-hero{grid-template-columns:1fr;gap:28px;}}
.lab-hero-texto .lede{margin-bottom:14px;}
/* El video acompana, no manda: con techo para que no domine el hero. */
.lab-hero-video{
  margin:0;max-width:520px;width:100%;
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#000;line-height:0;
}
@media(max-width:1000px){.lab-hero-video{max-width:560px;margin:0 auto;}}
.lab-hero-video video{width:100%;height:auto;display:block;}
/* Las disciplinas, como etiquetas discretas: no compiten con el titular. */
.lab-hero-disciplinas{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.lab-hero-disciplinas li{
  font-size:12.5px;color:var(--ink-1);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
}

/* ---------- Contracts · seccion de cierre con video ----------
   Dos columnas: el texto se estrecha para dejarle sitio al video, sin
   tocar una sola palabra del copy. Alcance limitado a .page-contracts
   .ctr-cierre, asi que ninguna otra seccion ni pagina se ve afectada. */
.page-contracts .ctr-cierre .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:46px;
  align-items:center;
}
.page-contracts .ctr-cierre .ctr-cierre-texto{min-width:0;}
/* el parrafo se estrecha aqui; el resto del sitio conserva su medida */
.page-contracts .ctr-cierre .section-intro{max-width:none;}

.page-contracts .ctr-cierre-video{
  position:relative;   /* ancla los controles de sonido */
  min-width:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-void);
  box-shadow:0 18px 48px rgba(0,0,0,.38);
}
.page-contracts .ctr-cierre-video video{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* Por debajo de 900px vuelve a una sola columna y el video pasa abajo */
@media (max-width:900px){
  .page-contracts .ctr-cierre .wrap{
    grid-template-columns:1fr;
    gap:30px;
  }
  .page-contracts .ctr-cierre-video{margin-top:4px;}
}

/* ---------- Continuación de consulta EVOL (contacto.html) ---------- */
#evol-continuacion .evol-resumen{
  background:var(--bg-void);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;margin-bottom:26px;
}
#evol-continuacion .evol-resumen h3{font-size:14px;margin:0 0 12px;color:var(--ink-0);}
#evol-continuacion .evol-resumen dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;}
#evol-continuacion .evol-resumen dt{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;}
#evol-continuacion .evol-resumen dd{margin:0;font-size:13.5px;color:var(--ink-1);}
#evol-continuacion .evol-consentimiento label{display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--ink-1);cursor:pointer;}
#evol-continuacion .evol-consentimiento input{margin-top:3px;flex:0 0 auto;}
#evol-continuacion .evol-canales{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
@media (max-width:620px){
  #evol-continuacion .evol-resumen dl{grid-template-columns:1fr;gap:2px 0;}
  #evol-continuacion .evol-resumen dd{margin-bottom:10px;}
}


/* ---------- Nosotros: bloques narrativos ---------- */
/* Todo lo de aqui es aditivo y esta acotado a la pagina Nosotros o a
   clases nuevas. .enfoque-grid y .enfoque-card siguen intactas para
   Inicio: la variante de cuatro columnas solo aplica con el modificador. */

.nos-destacado{
  border:1px solid var(--line-strong);border-radius:16px;
  background:var(--bg-glass);padding:34px 38px;max-width:880px;
}
.nos-destacado h2{
  font-family:var(--font-display);font-size:clamp(24px,3vw,34px);
  color:var(--ink-0);margin:0 0 18px;
}
.nos-destacado p{
  color:var(--ink-1);font-size:17px;line-height:1.65;margin:0 0 16px;max-width:740px;
}
.nos-destacado p:last-child{margin-bottom:0;}
@media(max-width:600px){ .nos-destacado{padding:26px 22px;} }

/* Parrafos de texto corrido: la separacion es menor que la de
   .section-intro, que esta pensada para preceder a una rejilla. */
.nos-texto{max-width:740px;}
.nos-texto p{color:var(--ink-2);font-size:15px;line-height:1.68;margin:0 0 14px;}
.nos-texto p:last-child{margin-bottom:0;}

/* Frases destacadas: separadas del texto, sin caja */
.nos-frase{
  font-family:var(--font-display);font-size:clamp(19px,2.4vw,27px);
  line-height:1.45;color:var(--ink-0);max-width:840px;margin:0;
  padding-left:22px;border-left:3px solid var(--cyan);
}
.nos-frase--cierre{border-left-color:var(--violet);margin-top:34px;}
.nos-frase-band{padding:56px 0;}
@media(max-width:600px){ .nos-frase{padding-left:16px;} .nos-frase-band{padding:40px 0;} }

/* Cuatro principios de trabajo */
.enfoque-grid--cuatro{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){ .enfoque-grid--cuatro{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .enfoque-grid--cuatro{grid-template-columns:1fr;} }
.enfoque-grid--cuatro .enfoque-card:nth-child(4){border-left-color:var(--good);}

/* 2026-09-04: el HTML de Nosotros ("Primero entender...") ya marca esta
   seccion con enfoque-grid--cinco, pero la regla nunca se creo -- por eso
   caia en la base de 3 columnas y, con 5 tarjetas, la segunda fila (04-05)
   quedaba incompleta y pegada a la izquierda en vez de centrada. Se sigue
   el mismo patron que enfoque-grid--cuatro (arriba), con una rejilla de 6
   columnas para poder centrar una fila de 2 dentro del ancho de 3. */
@media(min-width:821px){
  .enfoque-grid--cinco{grid-template-columns:repeat(6,1fr);}
  .enfoque-grid--cinco .enfoque-card{grid-column:span 2;}
  .enfoque-grid--cinco .enfoque-card:nth-child(4){grid-column:2 / span 2;}
  .enfoque-grid--cinco .enfoque-card:nth-child(5){grid-column:4 / span 2;}
}

.nos-cierre .section-title{max-width:840px;}


/* ---------- Nosotros: presencia de EVOL ---------- */
/* Dos apariciones y solo dos, cada una AL LADO del texto y por un costado
   distinto, para que la pagina no repita la misma composicion. */

.nos-humano{
  display:grid;grid-template-columns:minmax(220px,370px) 1fr;
  gap:44px;align-items:center;
}
/* El bloque del video reparte mas ancho: un 16:9 en una columna estrecha
   se queda en una miniatura. */
.nos-humano--media{grid-template-columns:minmax(280px,520px) 1fr;}
/* 2026-09-04: .nos-media ya se ancla arriba via align-self:stretch (ver
   mas abajo), pero .nos-destacado no tenia esa ancla y heredaba el
   align-items:center de .nos-humano. Si la fila termina siendo mas alta
   que la tarjeta -- el video no puede agrandarla por su propio limite de
   alto, pero un salto de linea del titulo, una fuente que tarda en cargar
   o cualquier otro empuje en la fila sí puede -- .nos-destacado quedaba
   centrada en esa fila alta: el video se ve pegado arriba y la tarjeta
   flota mucho mas abajo, con un hueco vacio entre los dos. Alineando
   ambas columnas arriba, siempre arrancan a la misma altura sin importar
   cuanto crezca la fila. */
.nos-humano--media{align-items:flex-start;}
/* El segundo bloque invierte el orden: texto a la izquierda, EVOL a la derecha. */
.nos-humano--invertido{grid-template-columns:1fr minmax(200px,320px);}
@media(max-width:1100px){
  .nos-humano{grid-template-columns:minmax(200px,290px) 1fr;gap:32px;}
  .nos-humano--media{grid-template-columns:minmax(240px,400px) 1fr;}
  .nos-humano--invertido{grid-template-columns:1fr minmax(180px,250px);}
}
@media(max-width:900px){
  /* En movil el texto va primero y EVOL debajo: nunca al lado. */
  .nos-humano,.nos-humano--invertido,.nos-humano--media{grid-template-columns:1fr;gap:24px;justify-items:center;}
  .nos-humano .nos-evol,.nos-humano .nos-media{order:2;}
  .nos-humano .nos-destacado{order:1;}
}

.nos-evol{margin:0;display:flex;justify-content:center;align-items:center;position:relative;}
.nos-evol img{
  display:block;width:auto;max-width:100%;height:auto;position:relative;z-index:1;
  /* La sombra sigue la silueta real: el PNG tiene alfa, no es una caja. */
  filter:drop-shadow(0 18px 26px rgba(4,10,30,.45));
}
/* Halo radial MUY tenue detras del personaje: da profundidad, no luminosidad. */
.nos-evol::before{
  /* Anclado a los cuatro lados del contenedor: sin porcentajes de ancho ni
     transformaciones, el halo no puede sobresalir por ningun costado. Con
     width:112% sangraba a la derecha y empujaba el ancho del documento. */
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--cyan) 20%, transparent) 0%,
    color-mix(in srgb, var(--azure) 10%, transparent) 45%,
    transparent 70%);
  z-index:0;pointer-events:none;
}

.nos-evol--destacado img{max-height:340px;}
.nos-evol--experiencia img{max-height:300px;}
@media(max-width:1100px){
  .nos-evol--destacado img{max-height:290px;}
  .nos-evol--experiencia img{max-height:255px;}
}
@media(max-width:900px){
  .nos-evol--destacado img{max-height:260px;}
  .nos-evol--experiencia img{max-height:220px;}
}
@media(max-width:480px){
  .nos-evol--destacado img{max-height:230px;}
  .nos-evol--experiencia img{max-height:200px;}
}

/* El video del bloque: rectangular, asi que no lleva el halo radial del
   personaje. Marco sobrio y sombra, en linea con el resto de la pagina. */
.nos-media{margin:0;position:relative;width:100%;align-self:stretch;}
.nos-media video{
  display:block;width:auto;height:292.5px;aspect-ratio:16/9;object-fit:cover;
  border-radius:16px;border:1px solid var(--line-strong);
  background:var(--bg-void);
  box-shadow:0 22px 44px rgba(4,10,30,.5);
}
/* Por debajo de 1100px la columna del video baja su tope a 400px (ver
   .nos-humano--media arriba): el limite de alto tiene que bajar con ella,
   si no el video vuelve a pedir mas ancho del que la columna tiene. */
@media(max-width:1100px){ .nos-media video{height:225px;} }
@media(max-width:900px){ .nos-media{max-width:520px;align-self:auto;} .nos-media video{width:100%;height:auto;} }

/* --- movimiento ---
   Se reutiliza `float`, la misma animacion que ya usa .evol-portrait en el
   resto del sitio: un desplazamiento lento y corto, nada de rebotes. Los
   dos personajes van desfasados para que no respiren al unisono. */
@media (prefers-reduced-motion:no-preference){
  .nos-evol img{animation:float 7.5s ease-in-out infinite;}
  .nos-evol--experiencia img{animation-duration:9s;animation-delay:-2.5s;}
}

/* Como trabajamos: 01 -> 02 -> 03 -> 04 */
/* Entrada en cascada: las tarjetas no aparecen todas de golpe. Se apoya en
   la clase .in que ya coloca el observador de scroll; no hace falta JS. */
@media (prefers-reduced-motion:no-preference){
  .nos-pasos .enfoque-card:nth-child(1){transition-delay:0s;}
  .nos-pasos .enfoque-card:nth-child(2){transition-delay:.10s;}
  .nos-pasos .enfoque-card:nth-child(3){transition-delay:.20s;}
  .nos-pasos .enfoque-card:nth-child(4){transition-delay:.30s;}
  .nos-pasos .enfoque-card:nth-child(5){transition-delay:.40s;}
}
.nos-pasos{list-style:none;margin:32px 0 0;padding:0;position:relative;}
.nos-pasos .enfoque-card{position:relative;}
.paso-num{
  display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--cyan);margin-bottom:10px;
}
.nos-pasos .enfoque-card:nth-child(2) .paso-num{color:var(--azure);}
.nos-pasos .enfoque-card:nth-child(3) .paso-num{color:var(--violet);}
.nos-pasos .enfoque-card:nth-child(4) .paso-num{color:var(--good);}
.nos-pasos .enfoque-card:nth-child(5) .paso-num{color:var(--cap-auto);}
.enfoque-grid--cinco .enfoque-card:nth-child(4){border-left-color:var(--good);}
.enfoque-grid--cinco .enfoque-card:nth-child(5){border-left-color:var(--cap-auto);}
/* Conector entre pasos. Decorativo: desaparece en cuanto la rejilla deja
   de tener cuatro columnas, para no dibujar lineas hacia ninguna parte. */
@media(min-width:1001px){
  .nos-pasos .enfoque-card:not(:last-child)::after{
    content:'';position:absolute;top:34px;right:-13px;width:8px;height:1px;
    background:var(--line-strong);
  }
}
@media(min-width:1001px){
  /* Fila 1 de --cinco termina en la 03: el conector generico de arriba
     (:not(:last-child)) le dibuja una linea que ya no apunta a ninguna
     tarjeta, porque la 04 esta en la fila de abajo. Se apaga solo aqui. */
  .enfoque-grid--cinco .enfoque-card:nth-child(3)::after{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .nos-evol img{filter:none;animation:none;} .nos-evol::before{animation:none;}
}