/* Home · «Innovación» (#innovacion): sección propia para el bloque de Transformación Digital, después de Soluciones.
   Reutiliza la tarjeta .digital-banner (video decorativo, borde animado de atmosphere.css/footer-refresh.css) y solo la
   ajusta dentro de .innovation: más alta, texto mayor, borde morado–azul del botón con giro lento, brillo en la esquina
   superior derecha y seis capacidades informativas (sin enlace ni efecto de cursor). El único enlace es el botón. */

/* Separación: el espacio inferior de Soluciones (115 / 70 px) más este margen superior. */
.innovation.section{padding-top:24px}
/* Iluminación de fondo: la misma de Soluciones (resplandor azul a la izquierda y morado a la derecha, muy suaves). */
.innovation{position:relative;isolation:isolate}
.innovation:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-40px 0 -150px;background:radial-gradient(ellipse 60% 42% at 14% 42%,#00599b33,transparent 85%),radial-gradient(ellipse 55% 40% at 88% 62%,#840b9830,transparent 85%)}

.innovation .digital-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:44px;min-height:310px;margin-top:42px;padding:56px 56px 56px 190px;border-radius:32px;
  background:radial-gradient(60% 75% at 100% 0%,#873cec30,transparent 70%),radial-gradient(40% 50% at 98% 2%,#008cec24,transparent 70%),linear-gradient(100deg,#091329dd,#09132ba6 60%,#170923bb)}
/* El bloque no es un enlace: sin desplazamiento al pasar el cursor (el resplandor del borde se conserva). */
.innovation .digital-banner:hover,.innovation .digital-banner:focus-within{transform:none}
/* Borde: degradado morado–azul del botón (#b02df0 → #008cec), girando despacio. */
.innovation .digital-banner:after{background:conic-gradient(from var(--digital-angle),#b02df0,#5371ff,#008cec,#5371ff,#b02df0);opacity:1;animation:digital-border-orbit 16s linear infinite}
.innovation .digital-banner:hover:after,.innovation .digital-banner:focus-within:after{animation:digital-border-orbit 16s linear infinite}
.innovation .digital-art{left:-56px;top:-40px;width:280px;height:calc(100% + 80px)}

.innovation .digital-copy{min-width:0;width:auto;margin:0}
.innovation .digital-copy .eyebrow{font-size:.72rem;letter-spacing:.16em;margin-bottom:14px}
.innovation .digital-copy h3{margin:0;font-size:clamp(1.55rem,1rem + 1.2vw,2rem);font-weight:400;line-height:1.28;letter-spacing:-.03em}
.innovation .digital-copy h3 .gradient{color:transparent}
.innovation .digital-copy .digital-button{display:inline-flex;align-items:center;margin-top:30px}

/* Capacidades: dos filas de tres recuadros informativos. */
.innovation .digital-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:stretch;gap:14px;width:auto;margin:0;padding:0;border:0;list-style:none}
.innovation .digital-capabilities li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:116px;padding:20px 8px;border:1px solid #ffffff14;border-radius:16px;background:linear-gradient(180deg,#ffffff08,#ffffff02);text-align:center;cursor:default}
.innovation .innovation-icon{width:34px;height:34px;color:#e4ebf7}
.innovation .digital-capabilities span{font-size:.75rem;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#24b5f0}
/* Hover (solo con cursor): el recuadro crece un poco y se ilumina con el morado–azul del borde. Siguen sin enlace: el
   cursor no cambia. */
.innovation .digital-capabilities li,.innovation .innovation-icon,.innovation .digital-capabilities span{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background-color .3s ease,color .3s ease,filter .3s ease}
@media(hover:hover){
  .innovation .digital-capabilities li:hover{transform:translateY(-3px) scale(1.04);border-color:#8f6cf280;background-color:#5371ff14;box-shadow:0 10px 28px #13052b55,0 0 26px #7246ed38,inset 0 0 22px #008cec1c}
  .innovation .digital-capabilities li:hover .innovation-icon{color:#fff;filter:drop-shadow(0 0 8px #5aa8ffa6)}
  .innovation .digital-capabilities li:hover span{color:#6fd0ff}
}

@media(max-width:1200px){
  .innovation .digital-banner{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);padding-left:140px;gap:32px}
  .innovation .digital-art{left:-90px}
  .innovation .digital-capabilities span{letter-spacing:.02em}
}
/* Tableta: texto arriba, capacidades debajo a todo el ancho. */
@media(max-width:980px){
  .innovation .digital-banner{grid-template-columns:1fr;gap:34px;min-height:0;padding:48px 40px 40px}
  .innovation .digital-art{left:-70px;top:-60px;width:260px;height:360px;opacity:.55}
}
@media(max-width:700px){
  .innovation.section{padding-top:16px}
  .innovation .digital-banner{margin-top:32px;padding:36px 22px 24px;border-radius:25px;gap:28px}
  .innovation .digital-copy h3{font-size:1.5rem}
  /* El texto del botón no cabe en una línea a 360 px: ancho completo y hasta dos renglones, mismo estilo. */
  .innovation .digital-copy .digital-button{display:flex;width:100%;justify-content:space-between;margin-top:24px;padding:12px 18px;white-space:normal;text-align:left;line-height:1.35}
  .innovation .digital-capabilities{gap:10px}
  .innovation .digital-capabilities li{min-height:100px;padding:16px 6px;gap:10px}
  .innovation .innovation-icon{width:30px;height:30px}
}
/* Si tres columnas no caben con «Automatización» completa, dos columnas. */
@media(max-width:430px){.innovation .digital-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.innovation .digital-banner:after,.innovation .digital-banner:hover:after,.innovation .digital-banner:focus-within:after{animation:none}
  .innovation .digital-capabilities li:hover{transform:none}}