/* ===================================
    Cover
====================================== */
section{
  position: relative;
  overflow-x:clip;
}


.cover{
  width: 100%;
  height: 400px;
  padding-top: 100px;
  padding-bottom: 0px;
  position: relative;
  overflow-x: clip;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.7) 0%, #030303 100%),url("../../assets/img/Soluciones/Bg-cover.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
}


.bg-cover{
  background: rgb(0,0,0);
background: linear-gradient(176deg, rgba(0,0,0,1) 85%, rgba(255,255,255,1) 85%);
}

.inf-cover{
  width: 60%;
}

.inf-cover .description{
  width: 70%;
}

.inf-cover .indicador{
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: #fff;
}

.inf-cover h1{
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase;
}

.img-cover{
  width: 90%;
  position: absolute;
  top: 100px;
  right: -95px;
z-index: 1;
}

.img-deco{
  width: auto;
  position: absolute;
  top:40%;
  right: 0px;
  transform: translate(-0%, -50%);
}

.frente{
  position: relative;
  z-index: 10;
}
/* ===================================
    Global
====================================== */
body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    scroll-behavior: smooth;
}

.content-info-soluciones{
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 20;
}


.card-solucion{
  width: 100%;
  height: auto;
  position: relative;
  overflow: clip;
}


.card-solucion img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.card-solucion .inf-solucion{
  width: 90%;
  height: auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  opacity: 0.8!important;
  padding: 30px;
  position: relative;
  left: 0px;
  top:30%;
}

 .rent-body ul{

  padding-left: 10px!important;
}
 .rent-body li{
  line-height: 1.5em;
  list-style-image: url('../../assets/img/temp/icon-list.png');
  font-size: 14px;
}



.card-solucion .inf-solucion h4{
  font-weight: 700;
}


.card-solucion .inf-solucion p{
  margin-bottom: 0px;
  font-size: 14px;
}

.card-solucion .inf-solucion .deco{
  width: 50%;
  height: 2px;
  background: #FF0000;
  margin-top: 20px;
  margin-bottom: 10px;
}



.card-solucion .inf-solucion-alt{
  width: 90%;
  height: auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  opacity: 0.8;
  padding: 30px;
  position: relative;
  right: 0px;
  bottom: 0px;
}


.card-solucion .inf-solucion-alt h4{
  font-weight: 700;
}


.card-solucion .inf-solucion-alt p{
  margin-bottom: 0px;
  font-size: 14px;
}

.card-solucion .inf-solucion-alt .deco{
  width: 50%;
  height: 2px;
  background: #FF0000;
  margin-top: 20px;
  margin-bottom: 10px;
}

@property --percent {
    syntax: "<percent>";
    initial-value: 50%;
    inherits: false;
}


.card-s {
  height: 200px;
    --percent: 150%;
    --parallax-height: 150%;
    background-image: var(--img);
    background-size: 120%; /* height priority */
    background-position: center bottom var(--percent);
    background-repeat: no-repeat;
    -webkit-animation: parallax linear both;
            animation: parallax linear both;
    animation-timeline: view();
    animation-range: cover;
    -webkit-animation-duration: 1ms;
            animation-duration: 1ms; /* for firefox*/

    transform: translateZ(0);
}

@-webkit-keyframes parallax {
    to {
        /*
        --percent: 0%;
        animation-timeline使うと何故か動かない
*/
        background-position: center bottom 0%;
    }
}
@keyframes parallax {
    to {
        /*
        --percent: 0%;
        animation-timeline使うと何故か動かない
*/
        background-position: center bottom 0%;
    }
}

.card-s .blank {
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    touch-callout: none;
}
.card-s h2 {
    font-size: 1rem;
    text-transform: capitalize;
}
.card-s * {
    mix-blend-mode: difference;
}
.card-s::before {
    content: "image loading...";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: white;
    z-index: -1;
    mix-blend-mode: darken;
}
/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.img-cover{
  width: 80%;
top: -70px;
right: -70px;
z-index: 1;
}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.img-cover{
  width: 60%;
top: -33px;
right: -60px;
}

.card-s {
    height: auto;
    --percent: 190%;
    background-size: 220%;
}
.card-solucion{
  width: 100%;
  height: 650px;
  position: relative;
  overflow: clip;
}

.card-solucion .inf-solucion{position: absolute;}
.card-solucion .inf-solucion-alt{position: absolute;}


}
/* md  */ @media (min-width: 768px) {

.img-cover{
  width: 55%;
        top: -90px;
        right: -70px;
}
.content-info-soluciones{flex-direction: row;}

.card-solucion .inf-solucion{width: 65%;padding: 50px;}
.card-solucion .inf-solucion-alt{width: 65%;padding: 50px;}

.card-s {
    --percent: 180%;
    background-size: 200%;
}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.img-cover{
  width: 55%;
top: 50px;
right: -190px;
}

.content-info-soluciones{width: 85%;}
.card-solucion .inf-solucion{width: 65%;padding: 50px;}
.card-solucion .inf-solucion-alt{width: 65%;padding: 50px;}

.card-s {
    --percent: 160%;
    background-size: 150%;
}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {
.img-cover{
  width: 50%;
top: -30px;
right: -100px;
}
.content-info-soluciones{width: 65%;}

.card-solucion .inf-solucion{width: 55%;padding: 50px;}
.card-solucion .inf-solucion-alt{width: 55%;padding: 50px;}


.card-s {
    --percent: 150%;
    background-size: 120%;
}

}
/* xxl */ @media (min-width: 1400px) {}