* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;    
}

:root {
  --morado-pastel: #D6A3FB; /* Base principal */
  --verde-menta: #A0E4B0; /* Salud y bienestar */
  --azul-sereno: #42c5f5; /* Confianza y tranquilidad */
  --azulito: #319AF2;
  --verde-esmeralda: #6FCF97; /* Armonía y frescura */
  --amarillo-suave: #F8E3A3; /* Energía positiva */
  --durazno-pastel: #FFBFA9; /* Bienestar emocional */
  --turquesa-relajante: #5FC8D7; /* Seguridad y calma */ 
  --morado-violeta: #8462E3;
  --letra: #6f6f6f;
}

.bodyp {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.header {
 
top: 0px;
width: 100%;
height: 70px;
 
 
}

.fixed.header {
    top: 0;
    height: 67px;
    position: fixed;
    width: 100%;
    z-index: 12;
    background-color: #ffffff; /* Cambia de color cuando se fija */
}

 

.conte-bottom{
 display: none;
}
.menu-1 {
	top:19% !important;
}

.menu-2 {
	top:49% !important;
}

.menu-3 {
	top:79% !important;
}
.men.close .menu-2 , .men.close .menu-3{
	transform:rotate(-765deg) !important;
		top:49% !important;
}

 .men.close .menu-1 {
	transform:rotate(45deg) !important;
		top:49% !important;
}
.header img {
position: relative;
width: 210px;
top: 9px;
left: 25px;

}
 
  


.slier_pr {
 
width: 100%;
top: 0px;

 
}

.slier_pr img {
 position: relative;
 width: 100%;
 
    
}

.lefthead {
 
width: 18%;
position: relative;
float: left;
height: 60px;    
    
}

.righthead {position: relative;float: right;width: 82%;top: 9px;height: 60px;display: flex;justify-content: flex-end;align-items: center;}

.righthead ul {
list-style: none;  
padding: 0;
margin: 0;
display: flex;
}

.righthead ul li {font-family: Sans-serif !important;color: #646464;top: -3px;height: 37px;padding: 8px 15px;position: relative;right: 22px;cursor: pointer;}

.righthead ul li a {
   background: linear-gradient(to right, #00a2e8, #0072c6);
    font-family: Sans-serif;
    font-size: 16px;
    padding: 9px;
    font-weight: 300;
    border-radius: 8px;
    list-style: none;
    text-decoration: none;
    color: white;
    cursor: pointer;}

.righthead ul li:not(:has(a)):before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 1px;
  border-bottom: 1.5px solid #319AF2;
  transition: left 0.3s ease-out, right 0.3s ease-out;
}

.righthead ul li:not(:has(a)):hover:before {
  left: 0;
  right: 0;
}


.msg_btn {
    position: relative;
    width: 100%;
    height: 400px;
  
  
}

.btnservices {
    position: relative;
    margin: auto;
    text-align: center;
}

.btnservices a {
    position: relative;
    text-align: center;
    /* border-radius: 16px; */
    margin: auto;
    padding: 15px 20px;
    color: #319AF2;
    border-bottom: 2px solid #319AF2;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -1px;
    white-space: nowrap;
    display: inline-block;
}

.btnservices p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem; /* Usa rem para que sea responsive */
    font-weight: bold;
    width: 70%;
    position: relative;
    margin: auto;
    color: var(--letra);
}




 /*____EFECTO____*/
        
.servicios {
position: relative;
    width: 100%;
    left: 0px;
height: 500px;
}        
 
.servicios .parent {
    position: relative;
    top: 32px;
    width: 128px;
    margin: auto;
    left: 26%;
    float: left;
    aspect-ratio: 1;
    animation: rotate 60s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.servicios .parent span {
position: absolute;
    font-family: calibri, sans-serif;
    color: var(--azul-sereno);
    font-weight: bold;
    color: rgb(70, 70, 70);
    top: 112%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 211px;
    text-align: center;
}

.items {
    --width: 43px;
    --distance: 234px;
    position: absolute;
    top: -15%;
    left: 31%;
    width: var(--width);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 50%;
   
    transform: translate(calc(cos(var(--move))* var(--distance)), calc(sin(var(--move))* var(--distance)));
    animation: move 60s linear infinite;
}

.items:nth-of-type(1) { --move: 0 * 360deg / -1; }
.items:nth-of-type(2) { --move: 1 * 360deg / -5; }
.items:nth-of-type(3) { --move: 2 * 360deg / 3.2; }
.items:nth-of-type(4) { --move: 3 * 360deg / 14; }
.items:nth-of-type(5) { --move: 4 * 360deg / 10; }
.items:nth-of-type(6) { --move: 5 * 360deg / 10; }
.items:nth-of-type(7) { --move: 6 * 360deg / 10; }
.items:nth-of-type(8) { --move: 7 * 360deg / 10; }
.items:nth-of-type(9) { --move: 8 * 360deg / 10; }
.items:nth-of-type(10) { --move: 9 * 360deg / 10; }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes move {
    from {
        transform: translate(calc(cos(var(--move)) * var(--distance)), calc(sin(var(--move)) * var(--distance))) rotate(0deg);
    }
    to {
        transform: translate(calc(cos(var(--move)) * var(--distance)), calc(sin(var(--move)) * var(--distance))) rotate(-360deg);
    }
}

@media (max-width: 800px) {
    .items {
        --width: 30px;
        --distance: 233px;
    }
}

.items img {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
 
}
 

.servicios_efect > img {
position: absolute;
    top: 16%;
    left: 29%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: rgb(70, 70, 70);
    z-index: 1;
    width: 152px;
    text-align: center;
    animation: none;
   
}



.servicios .textrec {
position: relative;
    width: 583px;
    right: 13%;
    top: -10%;
    height: 400px;
    font-size: 21px;
    line-height: 2;
    float: right;
    font-family: 'Montserrat', sans-serif;
    
}

.servicios h1 {
    color: #319AF2;
    font-weight: 400;
}

.actform {
    width: 100%;
    position: relative;
    height: 120px;
background: linear-gradient(to right, #00a2e8, #0072c6);
    text-align: center;
}

.actform h1 {
    text-align: center;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    top: 25px;
    color: white;
    
}


.form {
    width: 100%;
position: relative;
height: 400px;
    text-align: center;
 
  
}


.form a {
    position: relative;
background: linear-gradient(to right, #00a2e8, #0072c6);
    text-align: center;
    border-radius: 16px;
    top: 131px;
    margin: auto;
    list-style: none;
    text-decoration: none;
    padding: 15px 20px;
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -1px;
    white-space: nowrap;
    display: inline-block;
   
  
}

.button-gradient {
 transition: all 0.3s ease-in-out;
    }

.button-gradient:hover {
    background: linear-gradient(to right, #0095dd, #005bb5); /* Efecto hover */
    transform: scale(1.05);
}

.form h1 {
    position: relative;
    top: 20px;
    text-align: center;
color: #ff7a7a;        
font-weight: 400;
        font-family: 'Montserrat', sans-serif;
}

.form p {
    position: relative;
    top: 20px;
    width: 33%;
    margin: auto;
    font-size: 21px;
    line-height: 1.5;
    text-align: center;
    color: #333333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}
        
            
 
@keyframes changeMessage {
            0%, 100% {
              transform: translateY(0);
        }
            50% {
              transform: translateY(-0.3em);
        }
        }



.targetslider {
    position: relative;
    width: 100%;
    margin: auto;
    
}


.infoform {
    position: relative;
    cursor: pointer;
width: 90%;
        padding: 8px;
        margin: auto;
        margin-top: 42px;
        height: 120px;
                background: #E8F1F9;
}
.infoform h1 {
    color: #319AF2;
    font-weight: 400;
    position: relative;
    top: 29px;
    text-align: center;
}

/*BOT*/

   #botIcon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            /* background-color: #4CAF50; */
            border-radius: 50%;
            padding: 3px;
            z-index: 12;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        #botIcon img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }






        /* Estilo del chat */
#chatBox {
    display: none;
    position: relative;
    width: 98%;
    padding: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    max-height: 300px; /* Limita la altura del chat */
    overflow-y: auto;  /* Habilita el scroll vertical */
}
 
        /* Burbujas de mensaje */
        .botMessage {
            background: #5f93dd;
            color: white;
            padding: 10px;
            position: relative;
            left: 5px;
            width: 96%;
            font-size: 12px;
            text-align: left;
            float: left;
            border-radius: 0 10px 10px 10px;
            margin-bottom: 10px;
            opacity: 0;
            transform: translateY(20px);
            animation: messageAppear 0.7s ease forwards;
        }

        .userMessage {
            background: #E6E6E6;
            color: #555;
            padding: 10px;
            border-radius: 10px 0 10px 10px;
            margin-top: 8px;
            width: 87%;
            font-size: 12px;
            float: right;
            margin-bottom: 10px;
            text-align: right;
            opacity: 0;
            transform: translateY(20px);
            animation: messageAppear 0.7s ease forwards;
        }

        .optionButton {
            background: #ffffff;
            border: 1px solid #319AF2;
            color: #319AF2;
            padding: 5px 10px;
            margin-left: 5px;
            font-size: 12px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 5px;
            opacity: 0;
            transform: translateY(20px);
            animation: messageAppear 0.7s ease forwards;
        }
        .optionButton:hover {
            background: #319AF2;
            color: white;
        }
.body_bot {
    
position: fixed;
bottom: 25px;
right: 20px;
width: 300px;
max-height: 400px;
background: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;

padding: 0px;
font-family: calibri, sans-serif;
z-index: 20;
}


.head_bot {
    position: absolute;
    width: 283px;
    background: #ffffff;
    height: 40px;
    border-radius: 5px 5px 0 0;
    z-index: 15;
    display: none;
}

.hb_icono img {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    left: 5px;
    top: 5px;
}

.hb_online {
     position: relative;
     width: 70%;
     text-align: left;
}

.hb_icono {
    position: relative;
    width: 15%;
}

.hb_close {
    position: relative;
    width: 15%;
    /* float: right; */
    text-align: center;
}



.hb_txtup p {
    position: relative;
    font-size: 13px;
    font-weight: bold;
    color: #767676;
    top: 7px;
    left: 5px;
    text-align: left;
}
.hb_txtdwn p {
    position: relative;
    font-size: 11.5px;
    left: 19px;
    top: 7px;
    color: #a2a2a2;
}

.hb_txtdwn span {
    position: absolute;
    width: 8px;!;!i;!;
    height: 8px;
    background: #1fbf1f;
    border-radius: 50%;
    top: 26px;
    left: 7px;
}

.hb_close span {
    position: relative;
    text-align: center;
    font-weight: bold;
    left: 20px;
    color: #319AF2;
    top: 1px;
    font-size: 25px;
}


.hb_close span:hover {
    color: red;
    cursor: pointer;
}


   @keyframes messageAppear {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }




/*slider*/


.slider_portada {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .slides_portada {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slide_portada {
            min-width: 100%;
            position: relative;
        }

.slide_portada::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }

        .slide_portada img {
            width: 100%;
            height: auto;
            display: block;
        }
        .text_portada {position: absolute;top: 31%;left: 50%;padding: 8px;transform: translate(-50%, -50%);border-radius: 19px;font-weight: 700;line-height: 1;width: 88%;color: #FFFFFF;font-family: "Poppins", Sans-serif;font-size: 60px;word-spacing: 0.1em;text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); /* Borde oscuro */}
        .controls_portada {
            position: absolute;
            top: 36%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-51%);
        }
        .controls_portada button {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 17px;
            width: 50px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 50%;
        }


        
.btn_wsp {
    position: absolute;
    width: 387px;
    height: 67px;
    top: 53%;
    text-align: left;
    /* float: left; */
    /* right: 38%; */
    padding: 0px;
    background: linear-gradient(to bottom, #13b913, #0e920e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
    color: #fff;
    z-index: 10;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
        
.btn_wsp .ico-wsp img {
    position: relative !important;
    width: 30px !important;
    top: 5px !important;
    height: 30px !important;
    float: left !important;
    left: 4px !important;!i;!;
}
        
        .w-h {
            position: relative;
            width: 36%;
            height: 40px;
        }
        
        .ico-wsp {
                     position: relative;
                     width: 14%;
                     height: 40px;
        }
        
        .number-wsp {
                     position: relative;
            width: 40%;
            height: 40px;
        }
        
        .w-h p {
        position: relative;
        font-weight: bold;
        font-size: 23px;
        left: -4px;
        top: 4px;
        line-height: 0.8;
        }
        .number-wsp p {
        position: relative;
        font-weight: bold;
        font-size: 25px;
        right: 15px;
        top: 5px;
        }

@media (max-width: 1595px) {
    
    .form p {

    width: 85% !important;
   
}
    
    
    
    .text_portada {
font-size: 5vw;
        width: 90%;
        top: 45%;
        text-align: center;
  
}
    
    .servicios .textrec {
    position: relative;
  right: 2%;

}
    
    .servicios .parent {
    position: relative;
   
    left: 22%;

}
    
    .servicios_efect > img {
        position: absolute;
        left: 26%;
        top: 22%;
    }
    
    .btn_wsp {
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
}
 
}



@media (max-width: 1265px) {
    
   
    .servicios .parent {
    position: relative;
    left: 22%;
}
    
        .servicios .textrec {
 
position: relative;
 
width: 88%;
 
margin: auto;
 
left: 38%;
 
transform: translateX(-50%);
 
text-align: center;
 
top: -11%;
 
}

 
    
    .servicios_efect > img {
        position: absolute;
        left: 30%;
        top: 101px;
    }
    .servicios_efect {
           position: relative;
    top: 50%;
    left: 70%;
    transform: translateX(-50%);
    }
.servicios {
    position: relative;
    width: 100%;
    left: 0px;
    height: 940px;
}
 
}



@media (max-width: 1068px) {
    
   
    .servicios .parent {
    position: relative;
    left: 22%;
}
    
        .servicios .textrec {
 
position: relative;
 
width: 88%;
 
margin: auto;
 
left: 38%;
 
transform: translateX(-50%);
 
text-align: center;
 
top: -26%;
 
}

 
    
    .servicios_efect > img {
        position: absolute;
        left: 38%;
        border-radius: 3px;
        width: 87px;
        top: 80px;
    }
    .servicios_efect {
           position: relative;
    top: 50%;
    left: 70%;
    transform: translateX(-50%);
    }
.servicios {
    position: relative;
    width: 100%;
    left: 0px;
    height: 940px;
}
    .infoform h1 {
    color: #319AF2;
    font-weight: 400;
    position: relative;
    top: 11px;
    font-size: 25px;
    text-align: center;
}
 
}


@media (max-width: 725px) {
    
    .aliados {
    position: relative !important;
    margin-top: 84px !important;
    width: 100% !important;
    height: 234px !important;
    text-align: center !important;
}

 
    
    .aliados h1 {
     
    font-size: 26px !important;
 
    font-family: 'Montserrat', sans-serif !important;
}
    
.sec_form form h1 {
    color: #319AF2 !important;
    font-size: 19px !important;
}
    
    .sec_form form span {
    color: #319AF2 !important;
    font-size: 14px !important;
}
    
    
    .righthead ul li a {
    background: linear-gradient(to right, #00a2e8, #0072c6);
    font-family: Sans-serif;
    font-size: 16px;
    position: relative;
    padding: 9px;
    top: 20px;
    font-weight: 300;
    border-radius: 8px;
    list-style: none;
    text-decoration: none;
    color: white;
    cursor: pointer;
}
    
 
    .conte-bottom {
        display: inline-flex !important;
        position: relative !important;
        top: 11px !important;
        right: 11px !important;
        float: right !important;
        background: linear-gradient(to right, #00a2e8, #0072c6);
        border-radius: 6px;
        width: 51px !important;
        height: 46px !important;
        cursor: pointer !important;
    }
        .line {
        width: 81% !important;
        height: 4px !important;
        right: 5px;
        position: absolute !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.40s !important;
    }
 
  .righthead.togleslide {
        right: 0px;
        top: 66px;
    }
    
        .righthead {
        position: fixed;
        top: 70px;
        width: 252px;
        right: -144%;
        height: 338px;
        background: #ffffff;
        /* float: left; */
        z-index: 50;
        border-right: 1px solid #dfdfdf;
        transition: right 0.8s;
    }
    
         .righthead ul {position: relative;display: block;}
    
    .righthead ul li {
    font-family: Sans-serif !important;
    color: #646464;
    top: -3px;
    height: 50px;
    padding: 8px 15px;
    position: relative;
    right: 22px;
    cursor: pointer;
}
 
.actform h1 {
    text-align: center;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    top: 41px;
    color: white;
}
    .infoform {
    position: relative;
    cursor: pointer;
    width: 90%;
    padding: 8px;
    margin: auto;
    margin-top: 42px;
    height: 120px;
        background: #E8F1F9;
}
    
.btn_wsp {position: absolute;top: 88%;left: 50%;transform: translateX(-50%);font-size: 18px;width: 279px;height: auto;border-radius: 7px;text-align: center;}
    
    .btn_wsp .ico-wsp img {
    position: relative !important;
    width: 26px !important;
    top: 6px !important;
    height: 26px !important;
    float: left !important;
    left: 5px !important;
}
    
    .number-wsp p {
    position: relative;
    font-weight: bold;
    font-size: 18px;
    right: 5px;
    top: 8px;
}
    .w-h p {
    position: relative;
    font-weight: bold;
    font-size: 17px;
    left: -4px;
    top: 5px;
    line-height: 0.8;
    text-align: left;
}
    
    .btnservices p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    width: 94%;
    position: relative;
    margin: auto;
    color: var(--letra);
}
}



    @media (max-width: 670px) {
        
            .servicios {
        position: relative;
        width: 100%;
        left: 0px;
        height: 544px;
    }
        
    .servicios h1 {
        color: #319AF2;
        font-size: 30px;
        font-weight: 400;
    }

        .servicios .textrec {
            position: relative;
            top: -44%;
            height: auto;
            /* background: red; */
            font-size: 16px;
        }

            .btnservices p {
    font-family: 'Montserrat', sans-serif;
    font-size: 23px;
    font-weight: bold;
    width: 94%;
    top: 45px;
    position: relative;
    margin: auto;
    color: var(--letra);
    }
     .btnservices a {
        position: relative;
        text-align: center;
        /* border-radius: 16px; */
        margin: auto;
        padding: 15px 20px;
        top: 37px;
        color: #319AF2;
        border-bottom: 2px solid #319AF2;
        font-size: 25px;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: -1px;
        white-space: nowrap;
        display: inline-block;
    }
        .form h1 {
        position: relative;
        top: 20px;
        text-align: center;
        font-size: 23px;
        color: #ff7a7a;
        font-weight: 400;
        font-family: 'Montserrat', sans-serif;
    }

        .form p {
        position: relative;
        top: 43px;
        width: 33%;
        margin: auto;
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
        color: #333333;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
    }

        .form a {
            position: relative;
                top: 112px;
            font-size: 22px;
        }

            .infoform h1 {
            color: #319AF2;
            font-weight: 400;
            position: relative;
            top: 11px;
            font-size: 21px;
            text-align: center;
        }


                        .author {
                        font-size: 23px !important;
                        color: #319AF2 !important;
                        font-weight: bold !important;
    }


                    blockquote {
                        font-size: 16px !important;
                        width: 98% !important;
           

    }
        
            .items {
        --width: 30px !important;
        --distance: 130px !important;
    }
            .servicios_efect {
        position: relative;
        top: 39%;
        left: 61%;
        transform: translateX(-50%);
    }
 .items img {
         position: relative;
        width: 99px;
        height: 99px;
        border-radius: 50%;
}
        
        .servicios .parent span {
    position: absolute;
    font-family: calibri, sans-serif;
    color: var(--azul-sereno);
    font-weight: bold;
    color: rgb(70, 70, 70);
    font-size: 12px;
    top: 112%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 134px;
    text-align: center;
}
        
        .servicios .parent {
    position: relative;
    top: 32px;
    width: 93px;
    /* background: red; */
    margin: auto;
    left: 26%;
    float: left;
    aspect-ratio: 1;
    animation: rotate 60s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}
        
    }

 
.aliados {
    position: relative;
    margin-top: 84px;
    width: 100%;
    height: 304px;
    text-align: center
}

.aliados h1{
    position: relative;
    color: #319AF2;
    height: 125px;
    font-family: 'Montserrat', sans-serif;
}



.img_aliados {
   position: relative;
        width: 100%;
    text-align: center;
}

.img_aliados ul li{
   position: relative;
   display: inline-flex;
   text-align: center;
   width: 96%;
   max-width: 456px;
   margin: auto;
  
}

.img_aliados ul li img {
    width: 34%;
    position: relative;
    margin: auto;
      cursor: pointer;
}