/* Cinta de contacto profesional al borde inferior de las paginas del menu
   (Inicio, Desarrollos, Tienda, Nosotros, Contacto). Mismo comportamiento
   que la cinta de Contratacion Laboral Colombiana: texto en bucle continuo,
   se detiene al pasar el cursor o enfocar un enlace y queda quieta si el
   visitante pide menos movimiento. Colores de EVOL-IA (cian y violeta).

   Cada .cinta-tramo repite cuatro veces la misma .cinta-unidad para que, aun
   en pantallas muy anchas, un tramo mida mas que el viewport y el bucle no
   deje huecos. El segundo tramo es copia aria-hidden del primero: la
   animacion desplaza -50% de la pista, que es exactamente un tramo. */
.cinta{
  position:relative;overflow:hidden;height:40px;
  contain:paint;max-width:100vw;
  display:flex;align-items:center;
  background:linear-gradient(90deg,var(--bg-surface),#24185E);
  color:var(--ink-0);
  font-family:var(--font-body);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.cinta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}
/* difuminado en los extremos: el texto entra y sale sin cortarse en seco */
.cinta::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--bg-surface) 0,transparent 64px,transparent calc(100% - 64px),#24185E 100%);
}
.cinta-pista{
  display:flex;width:max-content;
  animation:cinta-desplazar 80s linear infinite;
}
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista{animation-play-state:paused;}
.cinta-tramo{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;}
.cinta-unidad{display:flex;align-items:center;}
.cinta-unidad > span,
.cinta-unidad > a{padding:0 18px;}
.cinta a{color:var(--ink-0);text-decoration:underline;text-underline-offset:3px;}
.cinta a:hover,
.cinta a:focus-visible{color:var(--cyan);}
.cinta a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.cinta-sep{color:var(--cyan);font-size:16px;}
@keyframes cinta-desplazar{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* El pie de pagina de estas paginas no tiene contenido y, con el relleno
   general de main.css (36px arriba y 28px abajo), dejaba una franja azul
   alta encima de la cinta. Se acorta solo donde hay cinta, con una clase
   propia: el resto del sitio conserva su pie sin cambios. */
footer.site-footer.footer-corto{padding:12px 0 0;}

@media(prefers-reduced-motion:reduce){
  .cinta::after{display:none;}
  .cinta{height:auto;padding:10px 16px;}
  .cinta-pista{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}
  .cinta-tramo{white-space:normal;flex-wrap:wrap;justify-content:center;}
  .cinta-tramo[aria-hidden]{display:none;}
  /* en la version quieta basta una vez la informacion */
  .cinta-unidad:not(:first-child){display:none;}
}
@media print{.cinta{display:none;}}