/* Soluciones — three-part editorial layout inspired by approved reference.
   Background and decorative waves are authored in CSS/SVG. */
#experiencias.solution-feature{position:relative!important;isolation:isolate!important;overflow:hidden!important;padding:70px 0!important;min-height:520px;background:radial-gradient(ellipse at 53% 52%,rgba(92,28,174,.44),transparent 39%),radial-gradient(ellipse at 95% 100%,rgba(163,25,133,.25),transparent 43%),linear-gradient(112deg,#100622,#18072e 53%,#110524)!important;color:#fff}
#experiencias.solution-feature::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 11% 15%,rgba(181,66,255,.7) 1.5px,transparent 2px),radial-gradient(circle at 92% 24%,rgba(255,111,38,.8) 2px,transparent 3px),radial-gradient(ellipse 420px 120px at 77% 102%,rgba(255,90,35,.19),transparent);opacity:.55}
#experiencias.solution-feature::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-radial-gradient(ellipse 700px 230px at 52% 123%,transparent 0 20px,rgba(155,58,241,.13) 21px 22px,transparent 23px 39px);mask-image:linear-gradient(0deg,#000,transparent 47%)}
#experiencias .solution-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 4% 98%,rgba(255,107,31,.2),transparent 18%),radial-gradient(circle at 98% 0%,rgba(96,22,220,.32),transparent 24%)}
#experiencias .solution-wave-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.8;filter:drop-shadow(0 0 6px rgba(169,47,251,.48))}
#experiencias .solution-inner{position:relative;z-index:1;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,1.05fr)!important;align-items:center!important;gap:clamp(18px,2.5vw,40px)!important;min-height:390px}
#experiencias .solution-copy{position:relative;z-index:2;min-width:0}
#experiencias .solution-copy .section-tag{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:9px!important;font-size:13px!important;line-height:1.4!important;font-weight:800!important;color:#ff7a2d!important;margin:0 0 17px!important}
#experiencias .solution-copy .section-tag::after{content:"";width:104px;height:2px;background:linear-gradient(90deg,#ff792d,transparent)}
#experiencias .solution-copy h2{font-size:clamp(29px,2.6vw,40px)!important;line-height:1.16!important;letter-spacing:-.035em!important;color:#fff!important;margin:0 0 18px!important}
#experiencias .solution-copy h2 em{font-style:normal!important;color:#ff742c!important}
#experiencias .solution-copy p{font-size:15px!important;line-height:1.6!important;color:#e5dcef!important;max-width:450px!important;margin:0 0 26px!important}
#experiencias .solution-copy .outline-link{display:inline-flex!important;align-items:center!important;gap:12px!important;padding:11px 22px!important;border:1px solid #ff762b!important;border-radius:999px!important;background:transparent!important;color:#ff8a43!important;font-size:15px!important;font-weight:700!important;text-decoration:none!important;transition:background-color .2s,color .2s,transform .2s!important}
#experiencias .solution-copy .outline-link:hover,#experiencias .solution-copy .outline-link:focus-visible{background:#7934d8!important;border-color:#b28aff!important;color:#fff!important;transform:translateX(4px)}
/* Existing repository photograph is used for the person; no new image is generated. */
#experiencias .solution-person{height:420px;align-self:end;min-width:0;background-image:linear-gradient(180deg,rgba(20,6,43,.03) 20%,rgba(18,5,39,.16) 62%,#17072d 100%),url('assets/services/ikrea-desarrollo-web-800x400.webp');background-position:center,52% center;background-size:cover,auto 100%;background-repeat:no-repeat;border-radius:46% 46% 0 0;filter:drop-shadow(0 0 28px rgba(103,30,212,.28));mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%);opacity:.97}
#experiencias .solution-values{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-self:center}
#experiencias .solution-value-card{min-width:0!important;min-height:152px!important;padding:19px 17px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:7px!important;background:linear-gradient(150deg,rgba(59,20,103,.59),rgba(34,10,67,.48))!important;border:1px solid rgba(159,71,244,.34)!important;border-radius:17px!important;box-shadow:inset 0 0 20px rgba(135,51,231,.08),0 12px 30px rgba(6,0,22,.12)!important;backdrop-filter:blur(7px)}
#experiencias .solution-value-card:nth-child(4n+4),#experiencias .solution-value-card:nth-child(4n+3){border-color:rgba(255,99,57,.27)!important}
#experiencias .solution-value-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;color:#7e39ff}
#experiencias .solution-value-icon.is-orange{color:#ff762c}
#experiencias .solution-value-icon svg{width:31px;height:31px}
#experiencias .solution-value-card strong{font-size:14px!important;line-height:1.3!important;color:#fff!important;font-weight:800!important}
#experiencias .solution-value-card p{font-size:12px!important;line-height:1.45!important;color:#e1d4ed!important;margin:0!important}
@media(prefers-reduced-motion:no-preference){#experiencias .solution-value-card{animation:ikrea-sol-card-float 5s ease-in-out infinite}#experiencias .solution-value-card:nth-child(2){animation-delay:-1.25s}#experiencias .solution-value-card:nth-child(3){animation-delay:-2.5s}#experiencias .solution-value-card:nth-child(4){animation-delay:-3.75s}}
@keyframes ikrea-sol-card-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:1200px){#experiencias .solution-inner{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)!important;gap:22px!important}#experiencias .solution-copy{grid-column:1;grid-row:1}#experiencias .solution-person{grid-column:2;grid-row:1/3;height:370px}#experiencias .solution-values{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(4,minmax(0,1fr))!important}#experiencias .solution-value-card{min-height:145px!important}}
@media(max-width:700px){#experiencias.solution-feature{padding:70px 0!important}#experiencias .solution-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:25px!important}#experiencias .solution-copy h2{font-size:32px!important}#experiencias .solution-person{order:2;width:100%;height:270px;background-size:cover,auto 115%;background-position:center,center center;align-self:center;max-width:420px}#experiencias .solution-values{order:3;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#experiencias .solution-value-card{min-height:138px!important;padding:15px 12px!important}#experiencias .solution-value-card strong{font-size:13px!important}#experiencias .solution-value-card p{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){#experiencias .solution-value-card{animation:none!important}}

/* Solution CTA: orange hover and subtle lateral oscillation. */
#experiencias .solution-copy .outline-link:hover,
#experiencias .solution-copy .outline-link:focus-visible{
 background:#ff792d!important;border-color:#ff792d!important;color:#fff!important;
 box-shadow:0 8px 26px rgba(255,113,39,.27)!important;
 transform:translateX(0)!important;
}
#experiencias .solution-copy .outline-link:hover span,
#experiencias .solution-copy .outline-link:focus-visible span{color:#fff!important}
@media(prefers-reduced-motion:no-preference){
 #experiencias .solution-copy .outline-link:hover,
 #experiencias .solution-copy .outline-link:focus-visible{animation:ikrea-sol-cta-sway 1.5s ease-in-out infinite!important}
}
@keyframes ikrea-sol-cta-sway{0%,100%{transform:translateX(0)}25%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* Animated cosmic atmosphere: layered nebula and sparse drifting stars, behind all content. */
#experiencias.solution-feature::before{
 z-index:0!important;inset:-18%!important;opacity:.64!important;
 background:
 radial-gradient(ellipse 30% 27% at 24% 52%,rgba(151,65,255,.25),transparent 78%),
 radial-gradient(ellipse 36% 32% at 69% 40%,rgba(93,40,237,.31),transparent 79%),
 radial-gradient(ellipse 26% 24% at 85% 81%,rgba(255,91,73,.18),transparent 77%),
 radial-gradient(ellipse 34% 24% at 42% 86%,rgba(185,48,198,.15),transparent 80%)!important;
 filter:blur(26px);will-change:transform;
}
#experiencias.solution-feature::after{
 z-index:0!important;inset:-10%!important;opacity:.62!important;mask-image:none!important;
 background:
 radial-gradient(circle at 8% 13%,rgba(255,255,255,.85) 0 1px,transparent 2px),
 radial-gradient(circle at 24% 73%,rgba(201,166,255,.8) 0 1.4px,transparent 2.5px),
 radial-gradient(circle at 39% 24%,rgba(255,255,255,.65) 0 1px,transparent 2px),
 radial-gradient(circle at 58% 82%,rgba(255,167,117,.75) 0 1.3px,transparent 2.5px),
 radial-gradient(circle at 76% 18%,rgba(213,176,255,.8) 0 1.5px,transparent 3px),
 radial-gradient(circle at 91% 62%,rgba(255,255,255,.7) 0 1px,transparent 2px),
 radial-gradient(circle at 66% 56%,rgba(205,152,255,.75) 0 1px,transparent 2px),
 radial-gradient(circle at 15% 45%,rgba(255,148,103,.8) 0 1.2px,transparent 2.5px),
 radial-gradient(circle at 49% 9%,rgba(255,255,255,.6) 0 1px,transparent 2px),
 radial-gradient(circle at 95% 92%,rgba(197,147,255,.7) 0 1.5px,transparent 3px)!important;
 will-change:transform;
}
#experiencias .solution-atmosphere{z-index:0!important;opacity:.82;background:
 radial-gradient(ellipse 31% 37% at 17% 79%,rgba(129,45,242,.16),transparent 84%),
 radial-gradient(ellipse 34% 46% at 80% 29%,rgba(166,48,223,.18),transparent 84%),
 radial-gradient(ellipse 24% 28% at 87% 89%,rgba(255,104,47,.13),transparent 85%)!important}
#experiencias .solution-wave-lines{z-index:1!important}
#experiencias .solution-inner{z-index:2!important}
@media(prefers-reduced-motion:no-preference){
 #experiencias.solution-feature::before{animation:ikrea-nebula-drift 24s ease-in-out infinite alternate}
 #experiencias.solution-feature::after{animation:ikrea-stars-drift 38s linear infinite alternate}
 #experiencias .solution-atmosphere{animation:ikrea-nebula-glow 16s ease-in-out infinite alternate}
}
@keyframes ikrea-nebula-drift{from{transform:translate3d(-3%,1%,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.12)}}
@keyframes ikrea-stars-drift{from{transform:translate3d(-2%,1%,0)}to{transform:translate3d(3%,-3%,0)}}
@keyframes ikrea-nebula-glow{from{opacity:.48}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){
 #experiencias.solution-feature::before,#experiencias.solution-feature::after,
 #experiencias .solution-atmosphere,#experiencias .solution-copy .outline-link{animation:none!important}
}

/* Interactive cosmic starfield, scoped to Soluciones. */
#experiencias .solution-cosmos{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#experiencias .solution-cosmos canvas{display:block;width:100%;height:100%;opacity:.92}
#experiencias .solution-wave-lines{z-index:1!important;pointer-events:none}
#experiencias .solution-inner{z-index:2!important}
@media(prefers-reduced-motion:reduce){#experiencias .solution-cosmos{opacity:.6}}

/* Match the About CTA's subtle hover movement, without perpetual swaying. */
@media(prefers-reduced-motion:no-preference){
 #experiencias .solution-copy .outline-link:hover,
 #experiencias .solution-copy .outline-link:focus-visible{
  animation:none!important;
  transform:translateX(5px)!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #experiencias .solution-copy .outline-link:hover,
 #experiencias .solution-copy .outline-link:focus-visible{animation:none!important;transform:none!important}
}

/* Ver soluciones: use independent translate animation.
   transform:none!important previously suppressed transform keyframes. */
@keyframes ikrea-solution-cta-horizontal{
 0%,100%{translate:-9px 0}
 50%{translate:9px 0}
}
#experiencias .solution-copy .outline-link{
 display:inline-flex!important;
 transform:none!important;
 animation:ikrea-solution-cta-horizontal 2.4s ease-in-out infinite!important;
 will-change:translate;
}
#experiencias .solution-copy .outline-link:hover,
#experiencias .solution-copy .outline-link:focus-visible{
 transform:none!important;
 animation:ikrea-solution-cta-horizontal 2.4s ease-in-out infinite!important;
}
@media(max-width:700px){
 #experiencias .solution-copy .outline-link{
  display:flex!important;width:max-content!important;max-width:calc(100% - 20px)!important;
  margin-left:auto!important;margin-right:auto!important;
  justify-content:center!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #experiencias .solution-copy .outline-link,
 #experiencias .solution-copy .outline-link:hover,
 #experiencias .solution-copy .outline-link:focus-visible{
  animation:none!important;translate:none!important;will-change:auto
 }
}

/* Transparent professional illustration replaces the previous framed photograph. */
#experiencias .solution-person{
 position:relative!important;
 height:460px!important;
 width:100%!important;
 align-self:end!important;
 border-radius:0!important;
 background-image:url('assets/services/ikrea-profesional-tecnológica.webp')!important;
 background-position:center bottom!important;
 background-size:contain!important;
 background-repeat:no-repeat!important;
 filter:drop-shadow(0 10px 24px rgba(115,41,218,.24))!important;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%)!important;
 mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%)!important;
 opacity:1!important;
}
@media(min-width:701px) and (max-width:1200px){
 #experiencias .solution-person{height:390px!important;align-self:center!important}
}
@media(max-width:700px){
 #experiencias .solution-person{
  width:100%!important;max-width:430px!important;height:330px!important;
  margin-inline:auto!important;align-self:center!important;
  background-position:center bottom!important;background-size:contain!important;
 }
}

/* Larger static transparent subject: no energy rings or character motion. */
#experiencias .solution-person{
 height:540px!important;
 transform:scale(1.19)!important;
 transform-origin:center bottom!important;
 z-index:1!important;
 overflow:visible!important;
 animation:none!important;
}
#experiencias .solution-person::before,
#experiencias .solution-person::after{
 content:none!important;
 display:none!important;
 animation:none!important;
}
@media(min-width:701px) and (max-width:1200px){
 #experiencias .solution-person{height:440px!important;transform:scale(1.10)!important}
}
@media(max-width:700px){
 #experiencias .solution-person{
  height:375px!important;transform:scale(1.06)!important;
  max-width:420px!important;
 }
}