.video-container{
    position: relative;

}
.video-texto{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.h1 {
    font-size: clamp(2rem, 6vw, 12rem) !important;
}
/*========== LONGRVIDADE =================================*/
#longevidad .container-fluid {
    padding-left: 7% !important;
    padding-right: 0 !important;
    background-color: #F2F2F2;
}

#longevidad img{
    object-fit: cover;
    border-radius: 16px 0 0 16px;
}

#longevidad span{
    color: var(--primary--color);
    font-family: 'Montserrat-BoldItalic';
   
}



/* =============ESTABLECIDO=============== */
.tabla {
    display: flex; 
    align-items: center; 
    /*justify-content: center;*/
    flex-wrap: wrap;
    gap: 2rem;
}
  
.item {
    display: flex; 
    align-items: center;
}
  
.circle {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    color: var(--secundary--text--color); 
    margin-right: 10px; 
    font-weight: bold; 
    background: linear-gradient(78.39deg, rgba(255, 87, 4, 0.1776) -137.62%, rgba(255, 64, 4, 0.74) 91.5%);
}
  
.separator {
    width: 2px;
    background-color: #B1B1B1;
    height: 100%;
}

.parte3 h4{
    text-transform: uppercase;
    font-family: 'Montserrat-Bold';
}

.accordion-button {
    background-color: transparent;
    box-shadow: none;
    color: var(--primary--text--color);
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: var(--primary--text--color);
}

.accordion-button:hover {
    background-color: transparent;
    box-shadow: none;
}

.accordion-button::after {
    display: none;
}

#establecido img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/*========== BEYOND BETTER =================================*/
#beyond .h1{
    font-family: 'Montserrat-Bold';
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bg-primary-gradient    {
    background: linear-gradient(to top, #FF5704BD 12.58%, #FF570420 74%);   
}

.bg-secundary-gradient{
    background: linear-gradient(to bottom, rgba(255, 202, 203, 0.2812) 4.42%, rgba(255, 38, 0, 0.74) 95.87%);
    color: #FF3705;
}
.bg-gradint-azul{
    background: linear-gradient(to bottom, rgba(114, 180, 255, 0.2812) 4.42%, rgba(0, 105, 203, 0.74) 95.87%);
    color: #003F88;
}

.bg-gradient-rosa{
    background: linear-gradient(to bottom, rgba(255, 107, 107, 0.3478) 4.42%, rgba(235, 1, 40, 0.74) 95.87%);
    color:#E92764;
}

#beyond .card{
    border-radius: 1rem;
    -webkit-box-shadow: 10px 10px 19px -6px #c2bac2;
    -moz-box-shadow: 10px 10px 19px -6px #c2bac2;
    box-shadow: 10px 10px 19px -6px #c2bac2;
    
}

#beyond .slick-produtcs .card{
    position: relative;
    
}
#beyond .slick-produtcs .slick-track {
    padding-bottom: 3rem !important;
   
}

#beyond .slick-produtcs .card .enlace-producto{
    position: absolute;
    right: 10px;
    bottom: 10px;
}



.slick-dots li:not(.slick-active){
    opacity: 0.5 !important;
}


/*========== CARROUSEL PRODUCTOS =================================*/

#carrousel-product{
    position: relative;
}

.marquee-container{
    position: absolute;
    right: 0;
    width: 100%;
    bottom: 10%;
}


.carousel-control-custom {
    width: 35px; /* Ancho del botón */
    height: 35px; /* Altura del botón */
    border-radius: 50%; /* Bordes circulares */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta para centrar */
    z-index: 1
}

.carousel-control-prev {
    left: 6rem;
}

.carousel-control-next {
    right: 6rem;
}

.carousel-control-prev,
.carousel-control-next{
    background: linear-gradient(78.39deg, rgba(255, 87, 4, 0.1776) -137.62%, rgba(255, 64, 4, 0.74) 91.5%);
    opacity: 1 !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover{
    opacity: 1 !important;
}

#carrousel-product .product-container {
    display: grid; 
    grid-auto-columns: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        "attr1 product product product product attr2"
        "attr3 product product product product attr4";
    width: 80%;
    margin: auto;
}

#carrousel-product .product {
    grid-area: product;
    text-align: center;
    position: relative;
}

#carrousel-product .product .product-title{
    position: absolute;
    left: 50%;
    top: -5% !important;
    transform: translateX(-50%);
    color: var(--primary--color);

    font-family: 'Montserrat-Bold';
    font-size: clamp(2.25rem, 5vw, 6.5rem);
    font-weight: bold;
}

#carrousel-product .product .producto{
    position: absolute;
}
/* #carrousel-product .producto:hover{
    -webkit-transform:scale(1.3);transform:scale(1.3);
    overflow: hidden;
} */



#carrousel-product .attr:nth-child(1) { grid-area: attr1; }
#carrousel-product .attr:nth-child(2) { grid-area: attr2; }
#carrousel-product .attr:nth-child(3) { grid-area: attr3; }
#carrousel-product .attr:nth-child(4) { grid-area: attr4; }

#carrousel-product .attr {
    display: flex;
    justify-content: center;
    text-align: center;
}

#carrousel-product .attr:nth-child(1),
#carrousel-product .attr:nth-child(2){
    align-items: end;
}

#carrousel-product .attr:nth-child(3),
#carrousel-product .attr:nth-child(4){
    align-items: center;
}

#carrousel-product .attr h6 {
    font-family: 'Montserrat-Bold';
    color: var(--primary--color);
    text-transform: uppercase;
}

#carrousel-product .attr p {
    color: var(--primary--color);
}

#carrousel-product .carousel-item{
    background-image: url(../../img/backgrounds/bg-gray.png);
    background-position-y: bottom;
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#carrousel-product .carousel-item:nth-child(1) .product-title{
    top: 7%;
}

/*========== CELION =================================*/
#celion-brand{
    background-image: url(../../img/backgrounds/bg-gray.png);
    border-radius: 75px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#celion-brand .brand{
    background-color: var(--primary--color);
    padding: 2rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0 10px 25px 0;
    width: 70%; 
}

.brandspan {
    background-color: var(--background--color);
    color: var(--primary--color);
    display: block;
    border-radius: 0 10px 25px 0; 
    width: 100%; 
    border: 1px solid var(--primary--color);
}

#celion-brand strong{
    font-family: 'Montserrat-Bold';
}

/*========== COMPRAR =================================*/
#comprar .h3{font-family: 'Montserrat-Bold';
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
}

#comprar .card{
    border-radius: 30px;
    height: 100%;
}
#comprar .card-text {
    color: #545454;
}

/*========== MEJOR =================================*/
#mejor .bor {
    background-color: transparent !important;
    border-radius: 30px;
    position: relative; /* Para el pseudo-elemento */
    background-color: white; /* Color de fondo para el contenido */
    overflow: hidden; /* Asegura que nada sobresalga */
    padding: 1.5px; /* Aumenta el padding para un borde más grueso */
}
  
#mejor .bor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    background: linear-gradient(89.93deg, #FF5704 0.02%, rgba(255, 87, 4, 0) 13.51%, #FF5704 25.5%, rgba(255, 87, 4, 0) 36.99%, #FF5704 51.48%, rgba(255, 87, 4, 0) 63.97%, #FF5704 74.46%, rgba(255, 87, 4, 0) 83.95%, #FF5704 94.45%);
    z-index: -1;
}

#mejor .bor .contenido{
    background-color: white !important;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-rounded {
    border-radius: 30px;
    overflow: hidden;
    position: relative; /* Para que el botón se posicione respecto al video */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   
    
  
    pointer-events: none;
    
}

.play-button img{
    width: 50%;
}

/*.video-container {*/
/*    background: black;*/
/*    position: relative;*/
/*    border-radius: 30px;*/
/*}*/



/*========== EXPERTOS =================================*/
#expertos{
    background-image: url(../../img/backgrounds/backgroundpanel.png);
    background-size: cover;
}

#expertos h2 {
    color: #A7A7A7;
}

#expertos h2 span {
    background: linear-gradient(90deg, #F8C83C -8.42%, #FF5704 42.04%, #FF3CE0 93.31%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; 
}

#expertos .card-body{
    border-radius: 30px;
}

#expertos .card {
    box-shadow: 0 0 25px rgba(0, 0, 0, .2); /* Sombra suave */
    border-radius: 25px; /* Esquinas redondeadas */
}

#expertos .card-text span{
    font-family: 'Montserrat-BoldItalic';
    color: var(--primary--color);
}

/*========== SLICK2 =================================*/
#slick2 {
    position: relative; 
}

#slick2 .prev,
#slick2 .next {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 16px;
    color: var(--background--color); 
    cursor: pointer; 
    z-index: 10;
    background: linear-gradient(78.39deg, rgba(255, 87, 4, 0.1776) -137.62%, rgba(255, 64, 4, 0.74) 91.5%);
    border-radius: 50%; 
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#slick2 .prev {
    left: 34.5%;
}
#slick2 .next{
    right: 34.5%;
}

#slick2 .prev,
#slick2 .next { 
    transform: translateY(-50%); 
}
.slick-tecnologia img {
    border-radius: 30px; /* Ajusta el valor según el nivel de redondez que desees */
    border: 2px solid #cecece;
}
  

/*========== VALORES =================================*/
.tarjeta1,
.tarjeta2,
.tarjeta3,
.tarjeta4,
.tarjeta5{
    border-radius: 20px !important;
    height: 160px !important;
    width: 100%;
    color: var(--secundary--text--color);

}
.tarjeta1{
    background: linear-gradient(254.84deg, #FF5704 2.28%, #F8C83C 96.89%);
}
.tarjeta2{
    background: linear-gradient(254.84deg, #56D7FF 2.28%, #006B73 96.89%);
}
.tarjeta3{
    background: linear-gradient(254.84deg, #FF5704 2.28%, #C73CF8 96.89%);
}
.tarjeta4{
    background: linear-gradient(254.84deg, #A004FF 2.28%, #3CA9F8 96.89%);
}
.tarjeta5{
    background: linear-gradient(254.84deg, #73AD28 2.28%, #F8C83C 96.89%);
}
#valores .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure the slide takes the full height */
}
#valores p{
    margin-bottom: 0;
    font-size: calc(1.1rem + 0.9vw) !important;
}

    /*==========  GARANTIA =================================*/
#garantia span{
    display: block;
    margin-bottom: 15px;
    color: var(--primary--text--color);
    font-weight: bolder;
}

#garantia .icono-naranja{
    background-color: var(--primary--color);
    color: white; 
    padding: 8px;
    border-radius: 50%;
    font-size: 1rem;
    margin-right: 10px;
    vertical-align: middle;
}

/*==========  CE =================================*/
#ce .border-subrayado{
    border-right: none !important;
    border-left: none !important;
}

#ce .border-topbottom {
    border-top: 1px solid var(--border--subrayado);  
    border-bottom: 1px solid var(--border--subrayado);  
    border-left: none;  
    border-right: none;  
}

#ce h2{
    font-family: 'Montserrat-Light';
}

#ce h3{
    font-family: 'Montserrat-Bold';
}


#ce .delay-2 {
    animation-delay: .3s; 
  }
  
#ce .delay-3 {
    animation-delay: .6s; 
  }
  
#ce .delay-4 {
    animation-delay: .9s; 
  }
  
#ce .delay-5 {
    animation-delay: 1.2s; 
  }
  

#ce h2,h3{
    transition: transform 0.3s ease;
  }
#ce h2:hover,
#ce h3:hover{
    transform: scale(1.5);
    font-family: 'Montserrat-Bold';
    
  }


/*==========  transforma =================================*/
#transforma .h6{
    font-size: clamp(2.5rem, 3vw, 7rem);
}

#transforma img{
  border-radius: 70px 0 0 70px;
  background: #F1F1F1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#transforma .bac{
    background: var(--primary--color);
}

#transforma p{
    color: var(--background--color);
    font-family: 'Montserrat-Bold';
}

#transforma-container{
    background: #F5F5F5;
}

#transforma .gradient{
    background: rgb(255,87,4);
    background: linear-gradient(135deg, rgba(255,87,4,1) 81%, rgba(255,255,255,1) 100%);
    border-radius: 0 70px 70px 0;
    
}

/*==========  AHORRA =================================*/
#ahorra {
    background-image: url(../../img/backgrounds/ahorraback-min.png);
}

#gana {
    background-image: url(../../img/backgrounds/ganaback-min.png);
}

#ahorra,
#gana {
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    padding: 120px 0;
}

#ahorra ul,
#gana ul{
    padding-left: 1rem;
    color: white;
}

/*==========  FORMULARIO =================================*/
#formulario .container-fluid{
    padding-left: 7% !important;
    padding-right: 0 !important;
}

#formulario .form-control {
    border: 2px solid var(--primary--color);
    background-color: transparent !important;
    border-radius: 14px;
    padding-top: .75rem;
    padding-bottom:.75rem;
}
#formulario .form-control:focus {
    box-shadow: none; /* Elimina el sombreado */
    border-color: var(--primary--color); /* Mantiene el color del borde si es necesario */
}
#formulario .myForm{
    background: rgb(255,255,255);
    background: linear-gradient(121deg, rgba(255,255,255,1) 71%, rgba(255,87,4,0.510329131652661) 100%);
}

#formulario .img-container{
    position: relative;
}

#formulario img.icon{
    position: absolute;
    top: 25px;
    left: 25px;
}

#formulario img.bg{
    object-fit: cover;
    object-position: center;
    height: 100%;
}


@keyframes zoom-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.img-zoom-in {
    animation: zoom-in .7s forwards;
}