/* Acorax visual refresh: 3 services + standalone Scarlett image. */
#soluciones .service-card {position:relative;isolation:isolate;overflow:hidden;min-height:285px;border:1px solid rgba(62,166,239,.45);border-radius:23px;background:#051a38!important;color:#fff!important;box-shadow:0 16px 35px rgba(10,49,94,.18);padding:28px 30px!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;}
#soluciones .service-card::before {content:"";position:absolute;z-index:-2;inset:0;background-position:right center;background-repeat:no-repeat;background-size:auto 100%;}
#soluciones .service-card:nth-child(1)::before {background-image:url('assets/acorax-servicio-01.webp')}
#soluciones .service-card:nth-child(2)::before {background-image:url('assets/acorax-servicio-02.webp')}
#soluciones .service-card:nth-child(3)::before {background-image:url('assets/acorax-servicio-03.webp')}
#soluciones .service-card::after {content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#061b3af2 0%,#061b3aef 39%,#061b3aa0 65%,#061b3a12 100%);pointer-events:none;}
#soluciones .service-card .service-index {color:#e3efff!important;font-weight:750!important;letter-spacing:.04em;}
#soluciones .service-card .service-symbol {font-size:25px!important;color:#83dbff!important;line-height:1.3;margin:9px 0!important;}
#soluciones .service-card h3 {color:#fff!important;font-size:clamp(1.3rem,2vw,1.72rem)!important;line-height:1.18!important;margin:5px 0 10px!important;max-width:68%;}
#soluciones .service-card p {color:#e4eefc!important;font-size:clamp(.89rem,1.25vw,1rem)!important;line-height:1.48!important;max-width:59%;margin:0 0 16px!important;}
#soluciones .service-card a {color:#59d4ff!important;font-weight:750!important;margin-top:auto!important;text-decoration:none;}
#soluciones .service-card a:hover {text-decoration:underline;}
#laboratorio #scarlett .innovation-graphic img {object-fit:cover;object-position:center;}
@media(max-width:760px){#soluciones .service-card {min-height:275px;padding:24px!important;}#soluciones .service-card h3 {max-width:75%;font-size:1.34rem!important;}#soluciones .service-card p {max-width:65%;font-size:.91rem!important;}#soluciones .service-card::before {background-size:auto 100%;background-position:60% center;}#soluciones .service-card::after {background:linear-gradient(90deg,#061b3af5 0%,#061b3ae7 42%,#061b3aa0 70%,#061b3a35 100%);}}
@media(max-width:440px){#soluciones .service-card{min-height:286px}#soluciones .service-card h3{max-width:88%}#soluciones .service-card p{max-width:81%}#soluciones .service-card::after{background:linear-gradient(90deg,#061b3af5,#061b3aeb 55%,#061b3a65 100%)}}

/* Corrección responsive: reproducir tarjetas horizontales aprobadas también en escritorio. */
@media(min-width:761px){
 #soluciones .service-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;max-width:1120px;margin-inline:auto}
 #soluciones .service-card{min-height:290px!important;padding:30px 42px!important}
 #soluciones .service-card::before{background-size:auto 100%!important;background-position:right center!important}
 #soluciones .service-card::after{background:linear-gradient(90deg,#061b3afc 0%,#061b3af5 31%,#061b3aba 49%,#061b3a18 73%,transparent 100%)!important}
 #soluciones .service-card h3{max-width:50%!important;font-size:clamp(1.6rem,2.6vw,2.2rem)!important}
 #soluciones .service-card p{max-width:46%!important;font-size:clamp(.96rem,1.35vw,1.1rem)!important}
 #soluciones .service-card a{font-size:1rem!important}
}
@media(min-width:761px) and (max-width:1000px){
 #soluciones .service-card h3{max-width:55%!important}
 #soluciones .service-card p{max-width:51%!important}
}

/* Refinamiento: fade corto y suave para apreciar más las imágenes. */
@media(min-width:761px){
 #soluciones .service-card::after{
 background:linear-gradient(90deg,rgba(4,18,40,.97) 0%,rgba(4,18,40,.88) 28%,rgba(4,18,40,.48) 45%,rgba(4,18,40,.08) 62%,transparent 74%)!important;
 }
 #soluciones .service-card::before{background-size:auto 100%!important;background-position:right center!important}
 #soluciones .service-card h3,#soluciones .service-card p,#soluciones .service-card a{position:relative;z-index:1}
}
/* En móvil la legibilidad tiene prioridad, pero el lado visual conserva color. */
@media(max-width:760px){
 #soluciones .service-card::after{
 background:linear-gradient(90deg,rgba(4,18,40,.96) 0%,rgba(4,18,40,.84) 40%,rgba(4,18,40,.34) 75%,rgba(4,18,40,.12) 100%)!important;
 }
}
/* Distinguir el destino de cada enlace dentro del mismo laboratorio. */
#laboratorio .innovation-card{scroll-margin-top:110px}
#laboratorio .innovation-card:target{
 outline:3px solid #35b8ee;
 outline-offset:4px;
 box-shadow:0 0 0 7px rgba(53,184,238,.12),0 15px 42px rgba(18,94,156,.18);
}


/* Fade-out verdadero: la ilustración se revela a la derecha y se desvanece hacia el texto. */
#soluciones .service-card{background:#061b3a!important}
#soluciones .service-card::before{
  background-size:auto 100%!important;
  background-position:right center!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 25%,rgba(0,0,0,.18) 39%,rgba(0,0,0,.75) 55%,#000 70%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 25%,rgba(0,0,0,.18) 39%,rgba(0,0,0,.75) 55%,#000 70%);
}
#soluciones .service-card::after{background:linear-gradient(to right,rgba(6,27,58,.25) 0%,rgba(6,27,58,.12) 42%,transparent 67%)!important;}
@media(max-width:760px){
 #soluciones .service-card::before{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 25%,rgba(0,0,0,.65) 55%,#000 82%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 25%,rgba(0,0,0,.65) 55%,#000 82%);
 }
 #soluciones .service-card::after{background:linear-gradient(to right,rgba(6,27,58,.52),rgba(6,27,58,.22) 60%,transparent 100%)!important;}
}


/* Desktop v3: image anchored only to right zone; long actual dissolve, not dark veil.
   Prevent embedded captions in source artwork from appearing behind body copy. */
@media(min-width:761px){
 #soluciones .service-card::before{
   inset:0 0 0 48%!important;
   background-size:auto 110%!important;
   background-position:right center!important;
   -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 30%,rgba(0,0,0,.22) 43%,rgba(0,0,0,.72) 64%,#000 85%)!important;
   mask-image:linear-gradient(to right,transparent 0%,transparent 30%,rgba(0,0,0,.22) 43%,rgba(0,0,0,.72) 64%,#000 85%)!important;
 }
 #soluciones .service-card::after{background:linear-gradient(to right,#061b3a 0%,rgba(6,27,58,.95) 35%,rgba(6,27,58,.1) 65%,transparent 88%)!important;}
}

/* v4 — Imagen protagonista (60%), con fade corto sobre el texto (40%). */
@media(min-width:761px){
 #soluciones .service-card::before{
   inset:0!important;
   background-position:right center!important;
   background-size:cover!important;
   -webkit-mask-image:none!important;
   mask-image:none!important;
 }
 #soluciones .service-card::after{
   background:linear-gradient(to right,
    rgba(6,27,58,.98) 0%,
    rgba(6,27,58,.94) 24%,
    rgba(6,27,58,.66) 38%,
    rgba(6,27,58,.18) 52%,
    transparent 64%)!important;
 }
 #soluciones .service-card h3{max-width:40%!important}
 #soluciones .service-card p{max-width:39%!important}
}


/* v5 — Solo tarjeta 03: mostrar imagen íntegra, incluido el rótulo ACORAX AI.
   Evita background-size:cover, que cortaba la parte inferior del arte original. */
#soluciones .service-card:nth-child(3)::before{
 background-size:auto 100%!important;
 background-position:right center!important;
 background-color:#061b3a;
}
@media(min-width:761px){
 #soluciones .service-card:nth-child(3)::after{
  background:linear-gradient(to right,#061b3a 0%,rgba(6,27,58,.97) 30%,rgba(6,27,58,.55) 53%,transparent 72%)!important;
 }
}


/* v6: AI card only — gentle image-to-text dissolve, preserve full AI lettering. */
@media(min-width:761px){
 #soluciones .service-card:nth-child(3)::before{
   background-size:auto 100%!important;
   background-position:right center!important;
   -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.45) 32%,rgba(0,0,0,.88) 50%,#000 64%)!important;
   mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.45) 32%,rgba(0,0,0,.88) 50%,#000 64%)!important;
 }
 #soluciones .service-card:nth-child(3)::after{
   background:linear-gradient(to right,rgba(6,27,58,.94) 0%,rgba(6,27,58,.63) 32%,rgba(6,27,58,.17) 51%,transparent 68%)!important;
 }
}

/* v7: seam fix. Artwork retains full height/title; opacity starts only once
   the right-anchored image actually begins (~58% of card width). */
@media(min-width:761px){
 #soluciones .service-card:nth-child(3)::before{
  inset:0!important;
  background-size:auto 100%!important;
  background-position:right center!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 49%,rgba(0,0,0,.06) 56%,rgba(0,0,0,.36) 66%,rgba(0,0,0,.78) 76%,#000 88%)!important;
  mask-image:linear-gradient(to right,transparent 0%,transparent 49%,rgba(0,0,0,.06) 56%,rgba(0,0,0,.36) 66%,rgba(0,0,0,.78) 76%,#000 88%)!important;
 }
 #soluciones .service-card:nth-child(3)::after{
  background:linear-gradient(to right,rgba(6,27,58,.97) 0%,rgba(6,27,58,.88) 35%,rgba(6,27,58,.42) 53%,rgba(6,27,58,.12) 72%,transparent 90%)!important;
 }
}