/*SILDERS*/
/*GENERALES*/
.titulo{
   font-size: calc(6vh);
   margin-bottom: 15px;
}
.fuente{
    margin-bottom: 15px;
    font-size: clamp(15px, 1.3vw, 18px);
}
/**/
/*contenedor*/
.panel_slider{
     /* Ajusta la altura según tu barra superior */
    /*background-color: #738935;*/
    margin-top: 120px;
    background-color: #425B6D;/*356789*/
    display: flex;/*me deja moverlo libremente*/
    justify-content: center;/*lo centra horizontal*/
    /*align-items: center;/*lo centra vertical*/
    height: calc(100vh - 110px);
}
/*imagenes*/
.panel_slider .slider-image {
    object-fit: cover;
    width: 100%;
    display: none;
    opacity: 0.3;    
}
/*contenedor del texto*/
.panel_slider .image-text {
    position: absolute;
    font-size: calc(5vw);
    color: white;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 18vh 30px;
    justify-content: space-between;
    min-width: 10%;
    transition: all 0.5s ease 0s;
}
/*sub titulo*/
.panel_slider .image-text p {
    font-size: 35%;
    margin-top: 3ex;
    transition: all 0.2s ease 0s;
}
#button_p{
    font-size: 20%;
    padding: 1% 3%;
    background: #039A43;/*CAMBIAR COLOR DE BOTONES*/
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.5s ease 0s;
    color: white;/*CAMBIA COLOR DE TEXTO*/
}
.panel_slider .image-text button:hover{
    background-color: #eceff1;
    color: black;
    transform: scale(1.1);
}
.espacio{
    background-color: #425B6D;
    height: 50px;
}
.panel_2{
    width: 100%;
    height: 100%;
    display: flex;
    padding: 2% 2%;
    background-color:white;
}
.panel_2 .info {
    width: 60%;
    height: 100%;
    padding: 5% 5%;
    text-align: justify;
    color: #425B6D;
}
/*.panel_2 .info h3 {
    padding: 10% 0%;
    font-size: calc(6vh);
}
.panel_2 .info p {
    margin-bottom: 15px;
    font-size: clamp(14px, 1.5vw, 18px);
}*/
.panel_2 .p2_img{
    background-color: #425B6D;
    display: flex;
    align-items: center;
    width: 50%;
    /*border-radius: 10px;*/
}
.panel_2 .p2_img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    /*border-radius: 10px;*/
    opacity: 0.5;
}
.Acessos_D{
    display: flex;
    flex-direction: column; 
    position: fixed;
    bottom: 1vh;
    right: 1vh;  
}
.Acessos_D button{
    /*display: none; /* Inicialmente oculto */
    background: none; /* Elimina el fondo del botón */
    margin-bottom: 10px; 
    border-radius: 170px;
    border: none;
    height: 50px;
    width: 65px;
    cursor: pointer;
    transition: all 0.5s ease 0s;
}
#btn_1 {
    cursor: pointer;
    letter-spacing: .05em;
    color: #000;
    transition-duration: .5s;
    transition-property: color,background,background-color,border-color;
    padding: 18px 24px;
    line-height: .5;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    border-width: 1px;
    font-size: clamp(17px, 1.4vw, 20px);
    text-decoration: none!important;
    margin-top: 30px;
}
#btn_1:hover {
    background-color: #425B6D;
    color: white;
}
#btn_2 {
    cursor: pointer;
    letter-spacing: .05em;
    color: #000;
    transition-duration: .5s;
    transition-property: color,background,background-color,border-color;
    padding: 18px 24px;
    line-height: .5;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    border-width: 1px;
    font-size: clamp(15px, 1.3vw, 18px);
    margin-top: 30px;
    background-color: #425B6D;
    color: white;
}
#btn_2:hover {
    background-color: white;
    color: black;
    
}
.Acessos_D img{   
    height: 100%;
    width: 70%;
}
#scrollToTopButton{
    display: none;
}
/* Estilos generales para el slider */
.panel_3{
    text-align: center;
    color: #3A5568;
    padding: 2% 2%;
    }
.panel_3 h3{
   font-size: calc(6vh);
}
.panel_3 p{
    margin-bottom: 15px;
    font-size: clamp(16px, 1.5vw, 20px);
}
.productos {
    position: relative;
    overflow: hidden;
    display: flex;
}
.slider {
    display: flex;
    transition: transform 0.5s ease; /* Agrega una transición a la propiedad 'transform' */
}
.slider .info {
    position: relative;
    height: 35vw;
    width: 100%;
    flex-shrink: 0;
    /*text-align: center;*/
}
.slider .info h3{
    position: absolute;
    top: 0; /* Ajusta la posición vertical del párrafo */
    left: 50%; /* Ajusta la posición horizontal del párrafo */
    height: 10%;
    width: 50%;
    font-size: clamp(18px, 1.5vw, 25px);
    background: rgba(66, 91, 109, 0.7); /* Color de fondo del párrafo */
    color: white; /* Color del texto del párrafo */
    padding: 10px; /* Espaciado alrededor del párrafo */
    z-index: 1; /* Asegura que el párrafo esté sobre la imagen */
}
.slider .info p{
    position: absolute;
    top: 10%; /* Ajusta la posición vertical del párrafo */
    left: 50%; /* Ajusta la posición horizontal del párrafo */
    height: 90%;
    width: 50%;
    font-size: clamp(15px, 1.3vw, 18px);
    background: rgba(66, 91, 109, 0.7); /* Color de fondo del párrafo */
    color: white; /* Color del texto del párrafo */
    padding: 10px; /* Espaciado alrededor del párrafo */
    z-index: 1; /* Asegura que el párrafo esté sobre la imagen */
}
.info img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
} 
/* Agrega estilos para el contenedor de la imagen */
.image-container {
    position: relative;
}
/* Estilos para los botones de navegación */
.slider-nav {
    display: flex;
    justify-content: center;
}

#next {
    display: block;
    position: absolute;
    top: 50%; /* Ajusta la posición vertical del párrafo */
    right: 20px;
    display: inline-block; /* Para que el botón sea un elemento en línea */
    width: 50px; /* Establece el ancho del botón */
    height: 50px; /* Establece la misma altura que el ancho para crear un círculo */
    opacity: 0.6;
    font-size: 25px;
    border: none; /* Elimina el borde */
    border-radius: 50%; /* Establece el radio de borde al 50% del ancho y altura */
    text-align: center; /* Centra el texto horizontalmente */
    line-height: 30px; /* Centra el texto verticalmente */
    cursor: pointer; /* Cambia el cursor a un puntero al pasar el ratón sobre el botón */
    transition: all 0.5s ease 0s;
}
#prev {
    display: block;
    position: absolute;
    top: 50%; /* Ajusta la posición vertical del párrafo */
    left: 20px;
    display: inline-block; /* Para que el botón sea un elemento en línea */
    width: 50px; /* Establece el ancho del botón */
    height: 50px; /* Establece la misma altura que el ancho para crear un círculo */
    opacity: 0.6;
    font-size: 25px;
    border: none; /* Elimina el borde */
    border-radius: 50%; /* Establece el radio de borde al 50% del ancho y altura */
    text-align: center; /* Centra el texto horizontalmente */
    line-height: 30px; /* Centra el texto verticalmente */
    cursor: pointer; /* Cambia el cursor a un puntero al pasar el ratón sobre el botón */
    transition: all 0.5s ease 0s;
}

.panel_4{
    display: flex;
    width: 100%;
    height: 560px;
    background-color: #537678;
    padding: 5vh 10vw;
    align-items: center;
}
    .panel_4 .noticia{
        display: flex;
        width: 100%;
        height: 100%;
    }
    .noticia img {
        width: 40%;
        height: 100%;
    }
    .noticia .txt{
        color: white;
        padding: 0% 5%;
        text-align: justify;
        /* Establecer posición relativa para el contenedor */
        position: relative;
    }
    .noticia .txt ul{
        padding: 5% 5%;   
     }
    .noticia .txt button{
    /* Establecer posición absoluta para el botón */
    position: absolute;
    bottom: 0px; /* Ajusta la distancia desde la parte inferior */
    left: 10%; /* Centra el botón horizontalmente */
   /* Ajusta el centro del botón horizontalmente */
    }
     
.panel_6{
    padding: 5% 0;
}
.info_p6{
    text-align: center;
    align-items: center;
}
.info_p6 p{
   color: #698088;
   padding: 0 10%;
   font-size: 15px;
}
.contenedor_p6{
    display: flex;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;*/
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.contenedor_p6 .art{
    height: 280px;
    width: 230px;
    margin-left: 20px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Establece la dirección del flujo en columna (vertical) */
    align-items: center;
}
.contenedor_p6 .art .cont_img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #4B6C39;
    display: flex;
    flex-direction: column; /* Establece la dirección del flujo en columna (vertical) */
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease 0s;
}
.contenedor_p6 .art .cont_img:hover{
    background-color:#425B6D; 
}
.contenedor_p6 .art h4{
    color: #425B6D;
    height: 50px;
    margin-top: 10px;
    font-size: 16px;
}
.contenedor_p6 .art p{
    font-size: 14px;
    color: #698088;
}


/*pcs*/
@media(max-width:1050px){ 
        .Acessos_D button{
            display: none;
        }
        .Acessos_D img{
            display: none;
        }
        .panel_slider{
          height: calc(60vh);
          display: flex;
          justify-content: center;
        }
        .panel_slider .image-text {
            font-size: 5vw; 
        }
        .panel_2{
            flex-direction: column;
            align-items: center;
            height: 100%;           
        }
        .panel_2 .info { 
            display: flex;
            flex-direction: column;
            width: 100%;
            align-items: center;   
            text-align: justify;
            justify-content: center;
        }
        .panel_2 .info h3{
            text-align: center;
        } 
        .panel_2 .p2_img{
            width: 50vw;
            height: 50vh;
        }
        .panel_3{
            padding: 2% 2%;
        }
        .slider .info {        
            height: 60vw;  
        }
        .titulo{
            font-size: calc(5vh);
            margin-bottom: 15px;
        }
        .panel_4 .noticia{
            display: flex;
            flex-direction: column;
            background-color: blue;
        }
        .panel_4 .noticia img{
            display: none;
        }
        .noticia .txt {
            padding: 0% 0%;
        }
        .noticia .txt ul{
            margin-bottom: 50px;
        }
        #btn_2 {
            font-size: 80%;
            padding: 15px 20px;
        } 
    
        #btn_1 {
            font-size: 80%;
            padding: 15px 20px;
        } 
        #button_p{
            font-size: 30%;
            padding: 2% 4%;
        }
}
@media(max-width:450px){ 
        .panel_slider {
           height: calc(80vh)
        }
        .panel_2 .p2_img{
            width: 100vw;
            height: 40vh;
        }
    }
/*tablets*/
@media(max-width:539px){          
        
        .panel_slider .image-text {
            padding: 15% 0px;
            display: flex;
            flex-direction: column;
            align-items: center;   
            align-content: center;
            justify-content: center;
            font-size: 11.5vw;
            width: 100vw;
            /*background-color: #039A43;*/
        }
        
       .panel_slider .image-text p {
            font-size: 40%;
            margin-top: 10%;
            /*background-color: #039A43;*/
            width: 90vw;
        }
        .panel_3{
            padding: 2% 0%;
        }
       #button_p{
            margin-top: 10%;
            font-size: 30%;
            padding: 5% 10vw;
        }
        
    }