/* ==========================================================================
   ARRAY Consulting Group — maqueta v5
   Paleta suavizada: el azul profundo se reemplaza por pizarra clara y los
   colores de marca pasan a versiones pastel, manteniendo el contraste de
   texto sobre cada fondo. Movimiento continuo y transiciones por desvanecido.
   ========================================================================== */

/* ==========================================================================
   El atributo `hidden` manda, siempre.

   Por defecto el navegador lo implementa con `display:none` en la hoja del
   agente de usuario, que es la de menor prioridad de todas: basta con que un
   elemento tenga su propio `display` —`.buscar-panel{display:flex}`,
   `.field{display:flex}`, `.mv-cuerpo{display:flex}`— para que `hidden` deje
   de esconder nada, sin ningún aviso. El elemento sigue diciendo que está
   oculto, `el.hidden` sigue devolviendo `true`, y se ve igual.

   Costó tres veces darse cuenta —los acordeones del menú compacto, el panel
   del buscador abierto en cada carga, y el mensaje de error del formulario que
   no se dejaba borrar—, así que la regla va acá arriba, una sola vez, y con
   `!important` porque tiene que ganarle a cualquier `display` que venga
   después. Para mostrar algo se le quita el atributo, no se le pelea el CSS.
   ========================================================================== */
[hidden]{display:none!important}

:root{
  --bg:#F7FAFC;
  --bg-2:#EDF3F8;
  --surface:#FFFFFF;
  --hair:#DCE7EF;
  --hair-2:#C6D8E3;

  --ink:#16323F;
  --ink-2:#2E4C5E;
  --muted:#5E7A8C;

  --slate:#3E6484;
  --slate-2:#4E7796;
  --slate-deep:#345470;
  --slate-line:#5A82A0;
  --on-slate:#EAF2F7;
  --on-slate-muted:#BCD2E0;

  --amber:#F2C14E;
  --amber-hot:#FFD469;
  --amber-ink:#3D2E00;
  --amber-deep:#9A7000;
  --link:#1F6690;
  --link-hot:#2E85B5;

  --mint:#6FBF8F;
  --sky:#7FB2D4;
  --coral:#E58A6E;
  --lime:#A8C97F;
  --lilac:#A79AD6;

  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --wrap:1200px;
  --r:18px;
}

*{box-sizing:border-box}
/* Nada de overflow-x en la raíz: si un eje queda en clip, el otro se
   arrastra y la página entera deja de poder scrollear. El recorte
   horizontal se resuelve en cada bloque que lo necesita. */
/* Sin scroll animado: al ir a una sección se salta de inmediato y la
   sección aparece. Un desplazamiento largo por toda la página se ve
   lento y descuidado. */
section[id],div[id]{scroll-margin-top:82px}
/* Las preguntas frecuentes son <details> y se llega a ellas por su ancla
   desde el buscador. Sin esta línea, la cabecera fija tapa la pregunta al
   aterrizar. Un poco más que las secciones: esas traen su propio relleno
   arriba, la pregunta no. No va a todo [id] a propósito — los resultados del
   buscador tienen id y se desplazan dentro de su caja con scrollIntoView, y
   este margen les dejaría un hueco. */
details[id]{scroll-margin-top:100px}
.aparece{animation:apareceSec .55s cubic-bezier(.22,1,.36,1) both}
@keyframes apareceSec{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.13;letter-spacing:-.014em}
h1{font-size:clamp(2rem,3.9vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700}
h3{font-size:1.28rem;font-weight:700}
h4{font-size:1rem;font-weight:600}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px;position:relative}
.section{padding-block:clamp(30px,3.1vw,48px)}
.stack{display:flex;flex-direction:column}
.gap-10{gap:10px}.gap-14{gap:14px}.gap-18{gap:18px}.gap-24{gap:24px}
.gap-32{gap:32px}.gap-40{gap:40px}.gap-56{gap:56px}

.label{
  font-family:var(--mono);font-size:.71rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
}
.label.on-dark{color:var(--on-slate-muted)}
.lede{font-size:clamp(1rem,1.35vw,1.1rem);color:var(--muted)}
.lede.on-dark{color:var(--on-slate-muted)}

/* --------------------------------------------------------------------------
   Encabezado de sección en dos celdas: el titular a la izquierda, el texto
   descriptivo a la derecha. El texto fluye según el ancho disponible, sin
   saltos de línea forzados. Se colapsa a una columna en pantallas chicas.
   -------------------------------------------------------------------------- */
.head2{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.head2 > .h2l{display:flex;flex-direction:column;gap:16px;min-width:0}
.head2 > .h2r{display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:clamp(4px,1.4vw,18px)}
.head2 h2{text-wrap:pretty}
@media (max-width:860px){
  .head2{grid-template-columns:1fr;gap:20px}
  .head2 > .h2r{padding-top:0}
}

/* enlace con flecha */
.arrow{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:.95rem;font-weight:500;color:var(--link);text-decoration:none;
  border-bottom:1px solid rgba(31,102,144,.32);padding-bottom:3px;
  transition:color .22s,border-color .22s;
}
.arrow svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.arrow:hover{color:var(--link-hot);border-color:var(--link-hot)}
.arrow:hover svg{transform:translateX(5px)}
.arrow.on-dark{color:var(--amber);border-color:rgba(242,193,78,.42)}
.arrow.on-dark:hover{color:#FFFFFF;border-color:#FFFFFF}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:.86rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;padding:13px 26px;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .24s cubic-bezier(.22,1,.36,1),background .24s,color .24s,border-color .24s,box-shadow .24s;
}
.btn-amber{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.btn-amber:hover{background:var(--amber-hot);transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,193,78,.4)}
.btn-outline{border-color:rgba(255,255,255,.45);color:#FFFFFF}
.btn-outline:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12);transform:translateY(-2px)}

/* ---------- header ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:90;background:var(--slate-deep);
  border-bottom:1px solid var(--slate-line);
}
.header-in{display:flex;align-items:center;gap:28px;height:78px}
.brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
.brand img{height:36px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--display);font-size:1.3rem;font-weight:800;letter-spacing:.03em;color:#FFFFFF}
.brand-txt em{
  font-style:normal;font-family:var(--mono);font-size:.545rem;letter-spacing:.135em;
  text-transform:uppercase;color:var(--on-slate-muted);padding-top:4px;
  /* Pasó de 35 a 56 caracteres. En dos líneas equilibradas ocupa el mismo
     ancho que antes y no le quita espacio a la navegación. */
  max-width:27em;line-height:1.45;text-wrap:balance;
}
@media (max-width:560px){.brand-txt em{display:none}}
.nav{display:flex;align-items:center;gap:clamp(12px,1.2vw,26px);margin-inline:auto}
.nav > a{
  position:relative;font-size:clamp(.78rem,.92vw,.88rem);font-weight:500;text-decoration:none;
  color:var(--on-slate-muted);padding-block:9px;transition:color .22s;
}
.nav > a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:right;transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.nav > a:hover{color:#FFFFFF}
.nav > a:hover::after{transform:scaleX(1);transform-origin:left}
/* Cuatro menus mas «Casos», el logotipo y el boton necesitan unos 1200 px. Por
   debajo de eso la barra se retira: si no, empuja la cabecera y la pagina
   entera arranca con barra horizontal. */
@media (max-width:1200px){.nav{display:none}.header-in .btn{margin-left:auto}}

/* ---------- menús desplegables de la barra ------------------------------- */
/* El titulo es un boton y no un enlace a proposito. Un elemento que navega al
   tocarlo Y despliega al pasar el puntero se comporta distinto segun el
   dispositivo, y en una pantalla tactil eso significa que el panel nunca se
   alcanza a ver. El destino del titulo esta dentro del panel, abajo a la
   izquierda: «Ver la seccion completa». */
/* Sin position:relative a proposito: el panel se posiciona contra .header-in
   —que si lo es— y no contra el titulo. Anclado al titulo, el primer menu de la
   barra se salia de la pantalla por la izquierda cerca de los 1200 px. */
.nav-item{position:static}
.nav-tit{
  display:flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:clamp(.78rem,.92vw,.88rem);font-weight:500;
  color:var(--on-slate-muted);padding:9px 0;transition:color .22s;
}
.nav-tit svg{width:13px;height:13px;flex:none;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.nav-tit:hover,.nav-item[data-abierto] .nav-tit{color:#FFFFFF}
.nav-item[data-abierto] .nav-tit svg{transform:rotate(180deg)}
.nav-tit:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:4px}

/* El panel se descuelga de la cabecera, no del titulo: asi puede ocupar el
   ancho del contenido aunque el titulo mida 120 px. */
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(1000px,100%);z-index:95;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1);
}
.nav-item[data-abierto] .mega{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
/* Franja invisible entre el titulo y el panel: sin ella, el puntero cruza un
   hueco de 18 px, el :hover se pierde y el panel se cierra en la cara. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega-in{
  display:grid;grid-template-columns:minmax(0,268px) minmax(0,1fr);
  background:var(--surface);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 60px rgba(22,50,63,.22),0 4px 12px rgba(22,50,63,.08);
}
.mega-rail{
  display:flex;flex-direction:column;gap:2px;padding:14px;
  background:var(--bg-2);border-right:1px solid var(--hair);
}
.mega-cat{
  text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.35;
  padding:11px 13px;border-radius:10px;transition:background .18s,color .18s;
}
.mega-cat:hover{background:rgba(74,113,146,.1)}
.mega-cat.is-on{background:var(--surface);color:var(--link);box-shadow:0 1px 3px rgba(22,50,63,.07)}
.mega-cat:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.mega-todo{
  margin-top:auto;padding:13px 13px 3px;border-top:1px solid var(--hair);
  font-size:.8rem;font-weight:600;color:var(--link);text-decoration:none;
}
.mega-todo::after{content:" →"}
.mega-todo:hover{text-decoration:underline}
/* Los paneles se apilan en la misma celda: el alto lo fija el mas largo y no
   cambia al recorrer las categorias. Con display:none el panel se encogia y se
   estiraba bajo el puntero, que es exactamente cuando peor se nota.
   visibility:hidden ademas saca del tabulador los enlaces que no se ven. */
.mega-paneles{display:grid;padding:20px 22px 22px;min-width:0}
.mega-panel{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .18s}
.mega-panel.is-on{visibility:visible;opacity:1}
.mega-bajada{
  font-size:.88rem;line-height:1.55;color:var(--muted);
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--hair);max-width:64ch;
}
.mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.mega-links a{
  display:block;padding:9px 11px;border-radius:10px;text-decoration:none;
  transition:background .18s,transform .18s;
}
.mega-links a:hover{background:var(--bg-2);transform:translateX(2px)}
.mega-links a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.mega-links b{display:block;font-size:.92rem;font-weight:650;color:var(--ink)}
.mega-links a:hover b{color:var(--link)}
.mega-links span{display:block;font-size:.79rem;line-height:1.45;color:var(--muted);padding-top:2px}
@media (prefers-reduced-motion:reduce){
  .mega,.mega-links a,.nav-tit svg{transition:none}
}

/* ---------- hero --------------------------------------------------------- */
/* ---------- menú compacto (bajo 1200 px) --------------------------------- */
/* Los nueve enlaces no caben junto al logotipo y al botón, así que por debajo
   de ese ancho la navegación pasa a un panel desplegable. Es el mismo juego de
   enlaces: no se esconde nada, solo cambia de forma. */
.menu-btn{
  display:none;flex:none;margin-left:auto;width:44px;height:44px;padding:0;
  align-items:center;justify-content:center;gap:5px;flex-direction:column;
  background:transparent;border:1px solid var(--slate-line);border-radius:12px;
  cursor:pointer;transition:border-color .22s,background .22s;
}
.menu-btn:hover{border-color:var(--amber);background:rgba(242,193,78,.1)}
.menu-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.menu-btn span{
  display:block;width:19px;height:2px;border-radius:2px;background:var(--on-slate);
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-panel{
  position:sticky;top:78px;z-index:89;background:var(--slate-deep);
  border-bottom:1px solid var(--slate-line);
  /* Con los menus desplegados el panel pasa del alto de la pantalla. Sin esto
     lo de abajo queda fuera y no hay forma de alcanzarlo. */
  max-height:calc(100dvh - 78px);overflow:hidden auto;overscroll-behavior:contain;
}
.menu-panel nav{
  display:flex;flex-direction:column;padding:6px 26px 22px;
  max-width:var(--wrap);margin-inline:auto;
}
.menu-panel a{
  font-size:1rem;font-weight:500;text-decoration:none;color:var(--on-slate);
  padding-block:14px;border-bottom:1px solid var(--slate-line);transition:color .2s,padding-left .2s;
}
.menu-panel a:hover{color:var(--amber);padding-left:6px}
/* En el teléfono los mismos menús son un acordeón. Nada se esconde: lo que en
   escritorio está en un panel ancho, acá está a un toque de distancia. */
.mv-grupo{border-bottom:1px solid var(--slate-line)}
.mv-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:500;
  color:var(--on-slate);padding:14px 0;text-align:left;
}
.mv-cab svg{width:18px;height:18px;flex:none;color:var(--on-slate-muted);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.mv-cab[aria-expanded="true"]{color:var(--amber)}
.mv-cab[aria-expanded="true"] svg{transform:rotate(180deg)}
.mv-cab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mv-cuerpo{display:flex;flex-direction:column;padding:0 0 12px 14px;border-left:2px solid var(--slate-line);margin-left:2px}
/* El atributo hidden lo aplica el navegador con display:none, y cualquier
   display propio le gana. Sin esta linea los cuatro acordeones abren solos. */
.mv-cat{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-slate-muted);padding:14px 0 6px;
}
.mv-cuerpo a{font-size:.94rem;padding-block:10px;border-bottom:0}
.mv-suelto{border-bottom:1px solid var(--slate-line)}
.menu-panel .btn{margin-top:18px;align-self:flex-start;border-bottom:0}
.menu-panel .btn:hover{padding-left:22px}
@media (max-width:1200px){.menu-btn{display:flex}}
@media (min-width:1201px){.menu-panel{display:none}}
@media (max-width:520px){
  /* A este ancho el botón de contacto y el del menú no caben juntos; el
     contacto sigue estando dentro del panel. */
  .site-header .header-in > .btn{display:none}
}

.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#4A7192 0%,#3A5E7E 52%,#33536F 100%);
  min-height:clamp(360px,46vh,480px);display:flex;align-items:center;
}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(94deg,rgba(52,84,112,.92) 0%,rgba(52,84,112,.72) 48%,rgba(52,84,112,.25) 100%);
}
/* Dos columnas: el texto a la izquierda y el video del diseñador donde antes
   estaban los círculos. El texto ya venía acotado a 58ch, así que la columna no
   lo estrecha: solo formaliza el espacio que el costado derecho ya ocupaba. */
.hero-in{
  position:relative;z-index:2;padding-block:clamp(34px,4.4vw,58px);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(16px,2.4vw,38px);align-items:center;
}
.hero h1{color:#FFFFFF;max-width:26ch}
.hero .lede{max-width:58ch;padding-top:14px;color:#D6E4EE}
.hero-cta{padding-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.hero-media{min-width:0}
/* La imagen fija va también de fondo del contenedor, no solo como póster del
   video: si el elemento no pinta nada —mientras carga, si el navegador no lo
   reproduce solo (el modo de ahorro del iPhone lo bloquea) o con movimiento
   reducido—, detrás queda la imagen y el hero nunca se ve vacío. La máscara
   vive acá y no en el video, para difuminar las dos capas con un solo borde. */
.hero-media{
  background:url('/videos/portada-v3-fija.webp') center/cover no-repeat;
  -webkit-mask-image:radial-gradient(122% 122% at 50% 50%,#000 52%,transparent 100%);
          mask-image:radial-gradient(122% 122% at 50% 50%,#000 52%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.hero-video{visibility:hidden}}
/* Con movimiento reducido el video queda oculto y se ve la imagen fija. Para
   que no parezca una falla, el guion agrega un botón encima: quien quiera ver
   el video lo inicia con un clic, y quien no, no recibe movimiento que no pidió.
   La clase la pone ese mismo clic, porque el video solo aparece si se pidió. */
.hero-media{position:relative}
.hero-video.reproduciendo{visibility:visible}
.hero-play{
  position:absolute;inset:0;margin:auto;width:66px;height:66px;
  display:grid;place-items:center;padding:0;
  border:1.5px solid var(--amber);border-radius:50%;
  background:rgba(22,50,63,.74);color:var(--amber);cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.hero-play:hover{background:var(--amber);color:var(--ink)}
.hero-play:focus-visible{outline:3px solid var(--amber-hot);outline-offset:3px}
.hero-play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
@media (prefers-reduced-motion:reduce){.hero-play{transition:none}}
/* aspect-ratio reserva el alto antes de que el video cargue: sin eso el hero
   crece de golpe y empuja la página cuando llega el primer cuadro.
   La máscara (en .hero-media) difumina los bordes contra el degradado. El fondo del
   video es casi el mismo tono, pero «casi» se nota como un rectángulo. */
.hero-video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:22px}
  .hero-media{max-width:560px}
}

/* Pantallas de poca altura: el llamado a la acción tiene que quedar sobre el
   pliegue sin obligar a desplazarse. */
@media (max-height:760px){
  .hero{min-height:0}
  .hero-in{padding-block:24px}
  .hero h1{font-size:clamp(1.65rem,2.9vw,2.35rem);max-width:30ch}
  .hero .lede{padding-top:10px;font-size:.97rem;max-width:66ch}
  .hero-cta{padding-top:16px}
  .creds-in{padding-block:12px}
  .section{padding-block:clamp(24px,2.6vw,38px)}
  .p-hero-in{padding-block:clamp(22px,2.8vw,40px)}
  .logos{padding-block:18px}
}
.up{animation:up 1s cubic-bezier(.22,1,.36,1) both}
.up.u2{animation-delay:.12s}.up.u3{animation-delay:.24s}.up.u4{animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.creds{background:var(--slate-2);border-bottom:1px solid var(--slate-line)}
.creds-in{
  /* Ancho completo, no dentro de .wrap: los cinco textos suman mas de 1200 px
     y el ultimo se iba a una segunda linea. */
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px clamp(16px,2.2vw,38px);padding-block:20px;padding-inline:26px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:#DDEAF2;text-align:center;
}
.creds-in span{display:flex;align-items:center;gap:10px}
.creds-in{padding-block:15px}
.creds-in span::before{
  content:"";width:6px;height:6px;background:var(--amber);transform:rotate(45deg);
  animation:tick 3.6s ease-in-out infinite;
}
.creds-in span:nth-child(2)::before{animation-delay:.6s}
.creds-in span:nth-child(3)::before{animation-delay:1.2s}
.creds-in span:nth-child(4)::before{animation-delay:1.8s}
.creds-in span:nth-child(5)::before{animation-delay:2.4s}
@keyframes tick{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- marquee de clientes ------------------------------------------ */
.logos{background:var(--surface);border-block:1px solid var(--hair);padding-block:22px;overflow:hidden;position:relative}
.logos::before,.logos::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:3;pointer-events:none}
.logos::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.logos::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.logos .label{text-align:center;padding-bottom:26px}
.marquee{display:flex;width:max-content}
.marquee.dup{animation:slide 165s linear infinite}
.logos:hover .marquee{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mtrack{display:flex;align-items:center;gap:56px;padding-right:56px}
.logo-slot{
  display:flex;align-items:center;justify-content:center;height:62px;flex:none;
  position:relative;z-index:1;
  font-family:var(--display);font-size:.98rem;font-weight:600;color:#7E96A6;
  white-space:nowrap;transition:color .25s;text-transform:none;
}
.logo-slot img{
  max-height:62px;max-width:180px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:filter .3s,opacity .3s,transform .34s cubic-bezier(.22,1,.36,1);
}
/* El carrusel ya se detiene al pasar el cursor sobre la sección, así que el
   logotipo se queda quieto mientras se agranda y toma color. El z-index lo
   levanta sobre sus vecinos para que no lo recorten. */
.logo-slot:hover{color:var(--ink);z-index:2}
.logo-slot:hover img{filter:none;opacity:1;transform:scale(1.28)}

/* ---------- por qué ARRAY ------------------------------------------------- */
/* Cuatro principios en dos columnas y no en tres, para que ninguno quede solo en su fila. */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px)}
@media (max-width:860px){.why{grid-template-columns:1fr;gap:0}}
.why-item{
  display:flex;flex-direction:column;gap:14px;padding:28px 26px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s;
}
.why-item:hover{transform:translateY(-5px);border-color:var(--hair-2);box-shadow:0 18px 40px rgba(22,50,63,.08)}
.why-item .ic{width:46px;height:46px}
.why-item h3{font-size:1.12rem}
.why-item p{color:var(--muted);font-size:.95rem}

/* ---------- sectores con pestañas ---------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tab{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);
  color:var(--muted);cursor:pointer;transition:all .24s;
}
.tab:hover{border-color:var(--link);color:var(--link)}
.tab[aria-selected="true"]{background:var(--slate);border-color:var(--slate);color:#FFFFFF}
.tabpanel{display:none}
.tabpanel.is-on{display:block;animation:soften .55s cubic-bezier(.22,1,.36,1) both}
@keyframes soften{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sector-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.sector-list li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding-block:16px;border-top:1px solid var(--hair)}
.sector-list li::before{
  content:"";width:10px;height:10px;margin-top:9px;transform:rotate(45deg);
  border:1.7px solid var(--accent,var(--link));
}
.sector-list strong{display:block;color:var(--ink);font-weight:600}
.sector-list span.d{color:var(--muted);font-size:.94rem;line-height:1.55}
.sector-list em{
  font-style:normal;display:block;padding-top:5px;color:var(--muted);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;
}

/* ---------- catálogo ------------------------------------------------------ */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.prods{grid-template-columns:1fr}}
a.prod{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--surface);
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,border-color .34s;
}
a.prod:hover{transform:translateY(-6px);border-color:var(--hair-2);box-shadow:0 22px 48px rgba(22,50,63,.1)}
/* La proporcion es la del dibujo (340x200). Reservarla evita que la pagina se
   reacomode cuando JavaScript inserta la escena, que es lo que hacia saltar el
   contenido al llegar por un ancla. */
.prod-art{border-bottom:1px solid var(--hair);position:relative;overflow:hidden;aspect-ratio:340/200}
.prod-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod-body h3{font-size:1.16rem}
.prod .problema{
  font-family:var(--display);font-size:1rem;font-weight:600;color:var(--ink);
  line-height:1.4;text-wrap:balance;
}
a.prod:hover .problema{color:var(--link)}
.prod .sub{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:400;color:var(--muted);line-height:1.5;
}
.prod .desc{font-size:.93rem;color:var(--muted);line-height:1.6}
.mods{display:flex;flex-wrap:wrap;gap:6px}
.mods span{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.05em;
  border:1px solid var(--hair);color:var(--muted);padding:4px 9px;border-radius:999px;
}
.prod-foot{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#7E96A6;
}
.prod-foot .go{display:inline-flex;align-items:center;gap:7px;color:var(--link);transition:gap .26s}
.prod-foot .go::after{content:"\2192";font-size:1rem;line-height:1}
a.prod:hover .prod-foot .go{gap:12px}

/* ---------- referencias con logotipo -------------------------------------- */
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px}
.ref{
  border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);padding:22px 20px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.ref:hover{transform:translateY(-5px);border-color:var(--link);box-shadow:0 16px 34px rgba(22,50,63,.09)}
.ref .mark{height:48px;display:flex;align-items:center}
.ref .mark img{max-height:48px;max-width:156px;width:auto;object-fit:contain}
.ref .mark .fallback{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink);
}
.ref .mark .fallback::before{
  content:"";width:26px;height:26px;border-radius:7px;flex:none;
  background:var(--tint,var(--bg-2));border:1px solid var(--hair-2);
}
.ref span.d{font-size:.86rem;color:var(--muted);line-height:1.5}

/* ---------- servicios ------------------------------------------------------ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,4.5vw,60px)}
@media (max-width:820px){.svc-grid{grid-template-columns:1fr}}
.svc{display:flex;flex-direction:column;gap:14px;padding-block:32px;border-top:1px solid var(--hair)}
.svc h3{display:flex;align-items:center;gap:16px}
.svc h3 svg{flex:none;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.svc:hover h3 svg{transform:rotate(-7deg) scale(1.08)}
.svc p{color:var(--muted);font-size:.95rem}
.svc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc li{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.05em;border:1px solid var(--hair);
  border-radius:999px;padding:5px 12px;color:var(--muted);transition:border-color .22s,color .22s;
}
.svc li:hover{border-color:var(--link);color:var(--link)}
/* La quinta línea ocupa el ancho completo: en dos columnas habría quedado sola
   en su fila, y así además se lee como lo que es, la línea nueva. */
.svc--ancho{grid-column:1/-1}
.svc--ancho p{max-width:68ch}

/* ---------- clientes ------------------------------------------------------- */
.clients{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
}
@media (max-width:1000px){.clients{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.clients{grid-template-columns:repeat(2,1fr)}}
.client{
  background:var(--surface);min-height:142px;padding:18px 14px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  text-align:center;transition:background .28s;
}
.client:hover{background:var(--bg)}
.client img{max-height:66px;max-width:164px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .28s,opacity .28s,transform .3s cubic-bezier(.22,1,.36,1)}
.client:hover img{filter:none;opacity:1;transform:scale(1.1)}
.client b{font-family:var(--display);font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink)}
.client span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#7E96A6}
.asset-note{
  font-family:var(--mono);font-size:.73rem;color:var(--muted);
  border-left:2px solid var(--amber);padding-left:14px;line-height:1.7;
}

/* ---------- contacto --------------------------------------------------------- */
.contact{background:linear-gradient(150deg,#456C8C 0%,#345470 100%);position:relative;overflow:hidden}
.contact h2{color:#FFFFFF}
.contact-in{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,60px);align-items:start;position:relative;z-index:2}
@media (max-width:940px){.contact-in{grid-template-columns:1fr}}
/* El formulario vive en un panel claro sobre el degradado oscuro de la
   sección, así que aquí dentro los colores se invierten respecto del resto
   del bloque de contacto. */
.form{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px;
  background:var(--surface);border:1px solid var(--hair);border-radius:26px;
  padding:clamp(22px,2.7vw,34px);box-shadow:0 26px 60px rgba(10,28,44,.24);
}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label,.field .lbl{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:block;
}
.field .lbl .hint{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--muted);opacity:.85;padding-left:10px}
.field label .req{color:var(--amber-deep)}
.field label .pista{
  font-family:var(--mono);letter-spacing:.05em;text-transform:none;color:var(--muted);
  opacity:.85;padding-left:8px;
}
.field input,.field textarea{
  font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--hair);border-radius:10px;padding:11px 13px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:112px;line-height:1.55}
.field input:focus,.field textarea:focus{
  outline:0;border-color:var(--link);background:var(--surface);
  box-shadow:0 0 0 3px rgba(31,102,144,.15);
}
.field input::placeholder,.field textarea::placeholder{color:#9AB0BE}

/* Estado de error: el mensaje solo aparece cuando el campo está marcado, para
   que el formulario no arranque lleno de advertencias. */
.field .err{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.03em;line-height:1.45;
  color:#A8452A;display:none;
}
.field.malo .err{display:block}
.field.malo input,.field.malo textarea{border-color:#D9927A;background:#FDF5F2}
.field.malo input:focus,.field.malo textarea:focus{border-color:#B85536;box-shadow:0 0 0 3px rgba(184,85,54,.16)}

/* Temas de interés: pastillas de encendido y apagado. La descripción de cada
   producto queda en el title, para no gastar tres líneas por opción. */
.chipset{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.chipbox{position:relative;cursor:pointer;text-transform:none;letter-spacing:normal;font-family:var(--body);font-size:1rem;color:inherit}
.chipbox input{position:absolute;opacity:0;width:1px;height:1px}
.chipbox span{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.04em;line-height:1.2;color:var(--ink-2);
  text-transform:none;
  background:var(--bg);border:1px solid var(--hair);border-radius:999px;padding:8px 14px 8px 11px;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.chipbox span::before{
  content:"";width:14px;height:14px;flex:none;border-radius:4px;
  border:1.5px solid var(--hair-2);background:var(--surface);
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  transition:background-color .2s,border-color .2s;
}
.chipbox:hover span{border-color:var(--hair-2);transform:translateY(-2px)}
.chipbox input:checked + span{background:rgba(242,193,78,.22);border-color:var(--amber);color:var(--ink)}
.chipbox input:checked + span::before{
  background-color:var(--amber);border-color:var(--amber);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M2.4 6.2 L4.7 8.6 L9.6 3.5" fill="none" stroke="%233D2E00" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.chipbox input:focus-visible + span{outline:2px solid var(--link);outline-offset:3px}
.file-row{
  display:flex;align-items:center;gap:15px;border:1px dashed var(--hair-2);border-radius:var(--r);
  padding:15px 18px;color:var(--muted);font-size:.87rem;background:var(--bg);
  transition:border-color .26s,background .26s;
}
.file-row:hover{border-color:var(--amber);background:rgba(242,193,78,.1)}
.file-row{cursor:pointer}
/* El input no se oculta con display:none: asi seguiria siendo enfocable por
   teclado y el foco iria a un elemento invisible. */
.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-row:focus-within{border-color:var(--link);box-shadow:0 0 0 3px rgba(31,102,144,.15)}
.file-row.con-archivo{border-style:solid;border-color:var(--amber);background:rgba(242,193,78,.12);color:var(--ink)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-top:8px}
.form-foot small{color:var(--muted);font-size:.79rem;line-height:1.5}
.contact-aside{display:flex;flex-direction:column;padding-top:10px}
.contact-aside .row{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--slate-line);padding-block:17px}
.contact-aside .row span{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#CFE0EB}
.contact-aside .row a,.contact-aside .row b{font-family:var(--display);font-size:1.06rem;font-weight:700;color:#FFFFFF;text-decoration:none}
.contact-aside .row a:hover{color:var(--amber)}

/* ---------- footer ------------------------------------------------------------ */
/* ---------- página de error --------------------------------------------- */
.err-nota{
  padding-top:22px;font-size:.9rem;line-height:1.6;color:var(--on-slate-muted);max-width:62ch;
}
.err-nota a{color:var(--amber);text-decoration:none}
.err-nota a:hover{text-decoration:underline}
.err-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.err-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.err-links{grid-template-columns:1fr}}
.err-links a{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);
  padding:18px 20px;transition:border-color .24s,transform .24s,box-shadow .24s;
}
.err-links a:hover{
  border-color:var(--hair-2);transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(22,50,63,.08);
}
.err-links b{font-family:var(--display);font-size:1rem;color:var(--ink)}
.err-links span{font-size:.86rem;line-height:1.5;color:var(--muted)}

.site-footer{background:var(--slate-deep);color:var(--on-slate-muted);border-top:1px solid var(--slate-line);padding-block:52px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media (max-width:1000px){.foot-in{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:700px){.foot-in{grid-template-columns:1fr;gap:30px}}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{height:42px;width:auto}
.foot-brand b{font-family:var(--display);font-size:1.38rem;font-weight:800;letter-spacing:.02em;color:#FFFFFF}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h4{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#A9C4D5}
.foot-col a{font-size:.89rem;text-decoration:none;color:var(--on-slate);opacity:.85;transition:color .22s,opacity .22s}
.foot-col a:hover{color:var(--amber);opacity:1}
.foot-legal{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--slate-line);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:.8rem;
}

/* ---------- reveals y transición entre páginas -------------------------------- */
.js-reveal .reveal{opacity:0;transform:translateY(22px)}
.js-reveal .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.js-reveal .reveal.d1{transition-delay:.08s}
.js-reveal .reveal.d2{transition-delay:.16s}
.js-reveal .reveal.d3{transition-delay:.24s}

/* desvanecido suave y rápido al cambiar de página */
#vista{transition:opacity .22s ease,transform .22s ease}
#vista.saliendo{opacity:0;transform:translateY(8px)}
.route{display:none}
.route.is-on{display:block}

/* ---------- páginas de producto ------------------------------------------------ */
.p-hero{
  background:linear-gradient(150deg,#4A7192 0%,#375B79 100%);
  color:var(--on-slate);border-bottom:1px solid var(--slate-line);position:relative;overflow:hidden;
}
.p-hero-in{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,52px);
  align-items:center;padding-block:clamp(30px,3.8vw,56px);position:relative;z-index:2;
}
@media (max-width:900px){.p-hero-in{grid-template-columns:1fr;gap:34px}}
.p-hero h1{color:#FFFFFF;font-size:clamp(1.9rem,4vw,3.1rem)}
/* El complemento del H1 lleva el termino por el que la gente busca. Va dentro
   del mismo encabezado —para el buscador es una sola senal— pero mas chico y
   en otra linea, para que el nombre del producto siga mandando visualmente. */
.h1-tema{
  display:block;font-size:clamp(.95rem,1.5vw,1.15rem);font-weight:500;
  color:var(--on-slate-muted);padding-top:8px;letter-spacing:0;
}
/* El problema es lo primero y lo mas grande bajo el nombre. La sigla pasa a ser
   una etiqueta discreta: sigue estando —la necesita el buscador— pero ya no
   compite con lo que al cliente le importa. */
.p-problema{
  font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.55rem);font-weight:600;
  line-height:1.35;color:var(--amber);padding-top:14px;max-width:42ch;text-wrap:balance;
}
.p-sub{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;color:var(--on-slate-muted);padding-top:12px;line-height:1.5;
}
.p-hero .lede{padding-top:16px;color:#D6E4EE}
.back{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--mono);font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;
  color:#CFE0EB;text-decoration:none;transition:color .22s;
}
.back:hover{color:var(--amber)}
.back svg{transition:transform .26s}
.back:hover svg{transform:translateX(-4px)}
.p-badge{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--slate-line);border-radius:999px;padding:6px 14px;color:#CFE0EB;margin-top:20px;
}
.p-antes{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:#BCD2E0;padding-top:14px}
.p-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

.p-cols{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(34px,4.5vw,60px);align-items:start}
@media (max-width:900px){.p-cols{grid-template-columns:1fr;gap:34px}}
.feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.feat li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding-block:17px;border-top:1px solid var(--hair)}
.feat li::before{content:"";width:11px;height:11px;margin-top:8px;transform:rotate(45deg);border:1.7px solid var(--accent)}
.feat strong{display:block;color:var(--ink);font-weight:600}
.feat span.d{color:var(--muted);font-size:.94rem;line-height:1.56}
.usecases{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.usecase{padding-block:18px;border-bottom:1px solid var(--hair)}
.usecase b{display:block;font-family:var(--display);font-size:1rem;color:var(--ink);padding-bottom:5px}
.usecase span{color:var(--muted);font-size:.92rem;line-height:1.55}
.outs{display:flex;flex-wrap:wrap;gap:8px}
.outs span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;border:1px solid var(--hair);
  border-radius:999px;padding:6px 13px;color:var(--muted);background:var(--surface);
}
.p-cta{
  background:var(--bg-2);border:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  padding:clamp(24px,3.2vw,38px);border-radius:var(--r);
}
.p-nav{display:flex;flex-wrap:wrap;gap:10px}
.p-nav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:999px;padding:9px 16px;color:var(--muted);
  text-decoration:none;transition:all .24s;background:var(--surface);
}
.p-nav a:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-2px)}
.p-nav a.cur{background:var(--slate);border-color:var(--slate);color:#FFFFFF}

/* ---------- escenas animadas: utilidades compartidas --------------------------- */
.esc{display:block;width:100%;height:auto}
/* El panel claro es parte del dibujo, no decoracion: los rotulos de las
   escenas son de tinta oscura y sobre el degradado del hero no se leen. */
.esc-lg{border-radius:var(--r);overflow:hidden;background:#EAF2F7;border:1px solid rgba(255,255,255,.28);min-height:clamp(300px,32vw,400px)}
.dash{stroke-dasharray:5 6;animation:dash 2.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.dashslow{stroke-dasharray:4 7;animation:dash 5s linear infinite}
.flo{animation:flo 6.5s ease-in-out infinite}
.flo2{animation:flo 6.5s ease-in-out -2.1s infinite}
.flo3{animation:flo 6.5s ease-in-out -4.2s infinite}
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.blink{animation:blink 2.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);animation:draw 3.6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes draw{0%{stroke-dashoffset:var(--len,200)}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.spin{animation:spin 9s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.spinback{animation:spin 13s linear reverse infinite;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js-reveal .reveal{opacity:1 !important;transform:none !important}
  .logo-slot:hover img,.client:hover img{transform:none}
}


/* Indicadores por producto: nombran qué se mide, no prometen un resultado. */
.met-nota{color:var(--muted);font-size:.86rem;line-height:1.5;margin-top:-4px}
.metricas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.metricas li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding-block:12px;border-top:1px solid var(--hair);
  color:var(--ink-2);font-size:.93rem;line-height:1.5;
}
.metricas li::before{
  content:"";width:12px;height:12px;margin-top:7px;border-radius:3px;
  border:1.8px solid var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent);
}

/* Diagrama de arquitectura: en pantallas angostas se desplaza solo el gráfico. */
.arq-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);padding:clamp(18px,2.6vw,30px)}
.arq-scroll svg{min-width:860px}
.arq-nota{
  font-size:.93rem;color:var(--muted);line-height:1.6;
  border-left:2px solid var(--amber);padding-left:14px;
}

/* Modalidad de despliegue */
.deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:920px){.deploy{grid-template-columns:1fr}}
.deploy-card{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:28px 26px;display:flex;flex-direction:column;gap:14px;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s;
}
.deploy-card:hover{transform:translateY(-5px);border-color:var(--hair-2);box-shadow:0 18px 40px rgba(22,50,63,.08)}
.deploy-card svg{width:56px;height:56px;flex:none}
.deploy-card h3{font-size:1.15rem}
.deploy-card p{color:var(--muted);font-size:.94rem;line-height:1.6}
.deploy-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;margin-top:auto}
.deploy-card li{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  padding-block:10px;border-top:1px solid var(--hair);
  color:var(--ink-2);font-size:.89rem;line-height:1.45;
}
.deploy-card li::before{
  content:"";width:9px;height:9px;margin-top:6px;transform:rotate(45deg);
  border:1.6px solid var(--mint);
}

/* ---------- casos: del proyecto al producto ---------- */
.casos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px;counter-reset:c}
.caso{
  display:grid;grid-template-columns:56px minmax(0,1fr) 250px;gap:clamp(16px,2.6vw,32px);
  align-items:start;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r);padding:26px 26px;
  transition:border-color .3s,box-shadow .3s;
}
.caso:hover{border-color:var(--hair-2);box-shadow:0 16px 36px rgba(22,50,63,.07)}
@media (max-width:960px){.caso{grid-template-columns:44px minmax(0,1fr)}}
.caso-n{
  font-family:var(--mono);font-size:1.05rem;letter-spacing:.06em;color:var(--amber-deep);
  border-top:2px solid var(--amber);padding-top:9px;
}
.caso-cuerpo{display:flex;flex-direction:column;gap:11px;min-width:0}
.caso-cuerpo h3{font-size:1.14rem;line-height:1.3}
.caso-p{color:var(--muted);font-size:.93rem;line-height:1.6}
.caso-p b{color:var(--ink);font-weight:600}
.caso-prod{
  display:flex;flex-direction:column;gap:3px;text-decoration:none;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:14px;padding:16px 18px;
  transition:border-color .28s,transform .28s,background .28s;
}
.caso-prod:hover{border-color:var(--link);transform:translateY(-3px);background:var(--surface)}
.caso-prod-eti{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.caso-prod b{font-family:var(--display);font-size:1.08rem;color:var(--ink)}
.caso-prod-sub{font-size:.83rem;color:var(--muted);line-height:1.4}
@media (max-width:960px){.caso-prod{grid-column:1/-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:10px}}

/* ---------- cómo se contrata ---------- */
.contrata{
  border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);
  display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,2.3fr);gap:clamp(24px,4vw,56px);
  padding:clamp(24px,3vw,34px);
}
@media (max-width:900px){.contrata{grid-template-columns:1fr;gap:20px}}
.contrata-cab{display:flex;flex-direction:column;gap:12px}
.contrata-cab p{color:var(--muted);font-size:.92rem;line-height:1.55}
.contrata-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
@media (max-width:760px){.contrata-lista{grid-template-columns:1fr;gap:0}}
.contrata-item{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--ink);padding-top:14px}
@media (max-width:760px){.contrata-item{border-top-width:1px;padding-block:14px}}
.contrata-item b{font-family:var(--display);font-size:1rem;color:var(--ink)}
.contrata-item span{color:var(--muted);font-size:.89rem;line-height:1.5}

/* ---------- capacidades tecnicas ---------- */
.skills{display:flex;flex-direction:column;gap:18px}
.skill{
  border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;transition:border-color .28s,box-shadow .28s,transform .28s;
}
.skill::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--tint,var(--hair-2));
}
.skill:hover{border-color:var(--hair-2);box-shadow:0 14px 34px rgba(22,50,63,.07);transform:translateY(-2px)}
.skill-cab{display:flex;flex-direction:column;gap:7px}
.skill-eti{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:flex-start;gap:9px;line-height:1.5;
}
.skill-eti::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--tint,var(--hair-2));
  animation:latido 6s ease-in-out infinite;animation-delay:var(--fase,0s);flex:none;margin-top:.45em;
}
@keyframes latido{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.skill h3{font-family:var(--display);font-size:1.12rem;font-weight:700;color:var(--ink);margin:0}
.skill p{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0;max-width:62ch}
.skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1060px){.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.skill-grid{grid-template-columns:1fr}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{
  font-family:var(--mono);font-size:.735rem;letter-spacing:.03em;line-height:1.2;
  color:var(--ink-2);background:var(--bg);border:1px solid var(--hair);border-radius:999px;
  padding:7px 13px;
  transition:background .24s,border-color .24s,color .24s,transform .24s;
}
.chip:hover{background:var(--tint,var(--bg-2));border-color:var(--hair-2);color:var(--ink);transform:translateY(-2px)}
.js-reveal .reveal .chip{opacity:0;transform:translateY(8px)}
.js-reveal .reveal.is-in .chip{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),background .24s,border-color .24s,color .24s;
  transition-delay:calc(var(--i,0) * .026s + .1s);
}
.skill-nota{
  font-size:.86rem;color:var(--muted);line-height:1.6;border-left:2px solid var(--amber);
  padding-left:14px;max-width:78ch;
}
@media (prefers-reduced-motion:reduce){
  .skill-eti::before{animation:none;opacity:.8;transform:none}
  .js-reveal .reveal .chip{opacity:1;transform:none}
}

/* ---------- metodología ---------- */
.fases{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media (max-width:1040px){.fases{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.fases{grid-template-columns:1fr;gap:0}}
.fase{
  display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:2px solid var(--ink);
  transition:border-color .3s;
}
.fase:hover{border-top-color:var(--amber)}
@media (max-width:700px){.fase{border-top-width:1px;padding-block:18px}}
/* El icono y el numero comparten linea: el numero solo ordena, el dibujo
   es lo que se reconoce de un vistazo al recorrer las cinco fases. */
.fase-cab{display:flex;align-items:center;gap:10px}
.fase-cab .ic{flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.fase:hover .fase-cab .ic{transform:translateY(-3px)}
.fase-n{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--amber-deep)}
.fase h3{font-size:1.05rem}
.fase p{color:var(--muted);font-size:.9rem;line-height:1.55}

/* ---------- equipo ---------- */
/* Cuatro personas, una sola fila. Con la regla anterior —filas de tres— habria
   quedado una tarjeta sola abajo, que es justo lo que se queria evitar. Sigue
   siendo flex y centrado: si el equipo vuelve a crecer, la fila incompleta
   queda al medio y no pegada a la izquierda. */
.equipo{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.equipo>.persona{flex:0 1 calc((100% - 72px)/4);min-width:0}
@media (max-width:1080px){.equipo>.persona{flex-basis:calc((100% - 24px)/2)}}
@media (max-width:620px){.equipo>.persona{flex-basis:100%}}
.persona{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;gap:10px;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s;
}
.persona:hover{transform:translateY(-5px);border-color:var(--hair-2);box-shadow:0 18px 40px rgba(22,50,63,.08)}
/* ASSET: retratos en /images/equipo/. Mientras no existan se muestran las iniciales. */
.retrato{
  width:92px;height:92px;border-radius:50%;overflow:hidden;margin-bottom:6px;
  background:linear-gradient(150deg,var(--slate-2),var(--slate));
  display:grid;place-items:center;flex:none;
}
.retrato img{width:100%;height:100%;object-fit:cover}
.iniciales{
  font-family:var(--display);font-size:1.7rem;font-weight:700;color:#FFFFFF;letter-spacing:.02em;
}
.persona h3{font-size:1.14rem}
.persona .rol{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--link);
}
.persona .resena{color:var(--muted);font-size:.93rem;line-height:1.6}

/* Aclaración bajo el bloque de IA: dónde se procesa el dato. Va más tenue que
   la bajada porque es letra chica que en sector público pesa mucho. */
.skill-mas{
  font-size:.86rem;line-height:1.6;color:var(--muted);padding-top:8px;
  border-top:1px solid var(--hair);margin-top:10px;
}

/* ---------- buscador del sitio ------------------------------------------ */
.buscar-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;padding:0;margin-right:4px;
  background:transparent;border:1px solid var(--slate-line);border-radius:10px;
  color:var(--on-slate-muted);cursor:pointer;transition:border-color .22s,color .22s,background .22s;
}
.buscar-btn svg{width:17px;height:17px}
.buscar-btn:hover{color:#FFFFFF;border-color:var(--amber);background:rgba(242,193,78,.1)}
.buscar-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:520px){.buscar-btn{display:none}}

.buscar-panel{
  position:fixed;inset:0;z-index:120;padding:clamp(60px,12vh,140px) 20px 20px;
  background:rgba(19,43,55,.55);backdrop-filter:blur(3px);
  display:flex;justify-content:center;align-items:flex-start;
}
.buscar-caja{
  width:min(680px,100%);background:var(--surface);border:1px solid var(--hair);
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px rgba(22,50,63,.3),0 4px 12px rgba(22,50,63,.1);
}
.buscar-campo{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.buscar-campo svg{width:19px;height:19px;flex:none;color:var(--muted)}
.buscar-campo input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--body);font-size:1.02rem;color:var(--ink);
}
.buscar-campo input::placeholder{color:var(--muted)}
.buscar-campo input::-webkit-search-cancel-button{display:none}
.buscar-campo kbd{
  flex:none;font-family:var(--mono);font-size:.66rem;color:var(--muted);
  border:1px solid var(--hair-2);border-radius:5px;padding:2px 6px;
}

.buscar-res{max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
.buscar-res[data-estado="vacio"],.buscar-res:empty{display:none}
.buscar-item{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"cat tit" ". det";
  gap:2px 12px;align-items:baseline;padding:13px 18px;text-decoration:none;
  border-bottom:1px solid var(--hair);
}
.buscar-item:last-child{border-bottom:0}
.buscar-item:hover,.buscar-item.es-sel{background:var(--bg-2)}
.buscar-cat{
  grid-area:cat;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--hair-2);
  border-radius:5px;padding:2px 7px;
}
.buscar-item b{grid-area:tit;font-size:.97rem;font-weight:650;color:var(--ink);line-height:1.4}
.buscar-det{grid-area:det;font-size:.86rem;color:var(--muted);line-height:1.5}
.buscar-res mark{background:rgba(242,193,78,.42);color:inherit;border-radius:3px;padding:0 1px}
.buscar-nada{padding:22px 18px;margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.buscar-res[data-estado="cargando"]::before{
  content:"Buscando…";display:block;padding:22px 18px;color:var(--muted);font-size:.93rem;
}
.buscar-res[data-estado="error"]::before{
  content:"No se pudo cargar el índice. Recargue la página o use los menús.";
  display:block;padding:22px 18px;color:var(--muted);font-size:.93rem;
}
.buscar-pie{
  margin:0;padding:12px 18px;border-top:1px solid var(--hair);background:var(--bg-2);
  font-size:.82rem;color:var(--muted);line-height:1.55;
}
.buscar-pie em{font-style:normal;color:var(--ink-2);font-weight:500}
@media (prefers-reduced-motion:reduce){.buscar-panel{backdrop-filter:none}}

/* El término buscado, marcado en la página a la que llevó el resultado.
   Colores sólidos y no transparentes a propósito: la marca cae tanto sobre
   fondos claros como sobre la sección oscura de contacto, y el texto tiene que
   leerse igual en los dos. El margen negativo compensa el relleno, así el
   párrafo no se reacomoda al aparecer la marca. Entra con el ámbar de la
   marca y se asienta en uno más suave, para que el ojo la encuentre. */
mark.resaltado{
  background:#F8DE9A;color:var(--ink);
  border-radius:3px;padding:0 2px;margin:0 -2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:resaltado-entra 1.6s ease-out;
}
@keyframes resaltado-entra{from{background:#F2C14E}}
@media (prefers-reduced-motion:reduce){mark.resaltado{animation:none}}

/* ---------- preguntas frecuentes ---------------------------------------- */
/* <details> nativo: se abre sin JavaScript, se puede buscar con Ctrl-F cuando
   el navegador lo soporta, y no hay estado que sincronizar. */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair);max-width:82ch}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 4px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--ink);
  line-height:1.45;transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--link)}
.faq-item summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-radius:6px}
.faq-item summary svg{
  width:19px;height:19px;flex:none;margin-top:3px;color:var(--muted);
  transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.faq-item[open] summary{color:var(--link)}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item > p{
  padding:0 4px 24px;margin:0;max-width:74ch;
  color:var(--muted);font-size:.97rem;line-height:1.72;
}
@media (prefers-reduced-motion:reduce){.faq-item summary svg{transition:none}}

/* ---------- páginas legales ---------- */
.legal{max-width:74ch}
.legal h2{font-size:1.24rem;padding-top:30px;padding-bottom:10px}
.legal h2:first-child{padding-top:0}
.legal p{color:var(--ink-2);font-size:.97rem;line-height:1.72;padding-bottom:6px}
.legal a{color:var(--link)}
.legal ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;padding-block:4px}
.legal li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;padding-block:8px;
  color:var(--ink-2);font-size:.97rem;line-height:1.6;
}
.legal li::before{content:"";width:9px;height:9px;margin-top:8px;transform:rotate(45deg);border:1.6px solid var(--amber)}
.legal-nota{
  margin-top:34px;border-left:2px solid var(--amber);padding-left:15px;
  color:var(--muted);font-size:.9rem;line-height:1.65;
}

/* ==========================================================================
   Profundidad en las escenas de producto
   La escena se inclina en un espacio con perspectiva real y proyecta sombra,
   así que deja de leerse como un dibujo plano. Los objetos que ya flotaban
   llevan su propia sombra, que es lo que da la sensación de altura.
   ========================================================================== */
.prod-art{perspective:900px;perspective-origin:50% 42%;background:linear-gradient(168deg,#F7FAFC 0%,#E7EEF3 100%)}
.prod-art::after{
  content:"";position:absolute;inset:auto 12% 8% 12%;height:14px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(22,50,63,.16),transparent 70%);
  transition:opacity .5s,transform .5s;pointer-events:none;
}
.prod-art .esc{
  width:100%;height:100%;
  transform:rotateX(7deg) rotateY(-9deg) scale(.95);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  transform-origin:50% 60%;
}
a.prod:hover .prod-art .esc{transform:rotateX(3deg) rotateY(-3.5deg) scale(1.01)}
a.prod:hover .prod-art::after{transform:scaleX(1.1);opacity:.75}

.esc-lg{perspective:1200px;perspective-origin:50% 44%;position:relative}
.esc-lg .esc{
  transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-11deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  transform-origin:50% 55%;
}
.esc-lg.sigue .esc{transition:transform .18s ease-out}
.esc-lg::after{
  content:"";position:absolute;inset:auto 14% 6% 14%;height:20px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.28),transparent 72%);
  pointer-events:none;
}

/* sombra propia de cada cuerpo que flota: es lo que separa los planos */
.esc .flo,.esc .flo2,.esc .flo3{filter:drop-shadow(0 7px 9px rgba(22,50,63,.18))}
.esc{filter:drop-shadow(0 12px 20px rgba(22,50,63,.09))}

/* el diagrama de arquitectura también gana volumen */
/* Sin inclinacion 3D en el diagrama de arquitectura. Un transform en 3D
   obliga al navegador a rasterizar el SVG y luego deformar ese mapa de
   bits, y el texto sale borroso. Aca lo que importa es que se lea. */

@media (prefers-reduced-motion:reduce){
  .prod-art .esc,.esc-lg .esc{transform:none !important}
  .prod-art::after,.esc-lg::after{display:none}
}

/* El lienzo 3D ocupa el marco completo y no necesita la inclinación CSS. */
.esc-lg.es3d{min-height:clamp(300px,32vw,400px);perspective:none}
.esc-lg.es3d::after{display:none}
.esc-lg.es3d canvas{border-radius:var(--r)}

.prod-art.es3d{perspective:none;background:linear-gradient(168deg,#F7FAFC 0%,#E9EFF4 100%)}
.prod-art.es3d::after{display:none}
.prod-art.es3d canvas{display:block;width:100%;height:100%;object-fit:cover}