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

:root{
--primary:#005DAA;
--secondary:#003B6F;
--light:#f7f7f7;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* --------------   Seccion de Img Fondo  ---------------- */


.hero{
	height:90vh;
	background:url('../img/fondos/Portada_Agricolas.png') center/cover;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
}

.hero-content{
position:relative;
color:white;
text-align:center;
max-width:800px;
}

.hero h1{
font-size:60px;
margin-bottom:20px;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}



/* -------------- Main ---------------- */
.logos{
	padding:150px 0;
    margin-left: 7%;
    margin-right: 7%;	
}

.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:30px;
    margin-top:40px;
}

.logos h1{
    font-size: 1.2vw;
}

.product-card{
    margin-left: 7%;
    margin-right: 7%;
}


.product-card img {
    transition: transform 0.3s ease;
    margin-top: 10%;
}
.product-card:hover img {
    transform: scale(1.05);
}

.product-card p {
    padding: 4%;  
    font-size: 17px;
}

.product-card label {
    font-weight:500;
    padding: 2%; 
    color: #005daa; 
    font-size: 20px;
}

.product-card h3 {
    padding-top: 2%;  
    font-size: 1.4vw;
}

@media(max-width:768px){
    .product-card{
        margin-top: 15%;
    }

    .product-card h3 {
        padding-top: 2%;  
        font-size: 27px;
    }

}

@media(max-width:768px){
    .logos h1{
        font-size: 3.2vh;
    }   
    .steps {
        display: inherit;
    } 
}





/* -------------- Lista ---------------- */
.lista{
    width: 15%;
}
.lista ul{
    padding-left: 10%;
}

.btn-checkbox input[type="radio"] {
  display: none; /* Oculta el checkbox original */
}

.btn-checkbox{
  display: inline-block;
  padding: 4px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}


.btn-checkbox:hover {
    background-color: #005daa;
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 90%;
}
/* Cambia el color cuando el checkbox está seleccionado */
.btn-checkbox:has(input[type="radio"]:checked) {
    background-color: #005daa;
    color: white;
    border-color: #0056b3;
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 90%;
}


@media(max-width:768px){
    .lista{
        width: 100%;
    } 
}



/* Contenedor principal */
        .slider {
            position: relative;
            width: 70%;
            margin: auto;
            overflow: hidden;
            border-radius: 10px;
        }

        /* Cada slide se oculta por defecto */
        .slide {
            display: none;
            width: 100%;
        }

        .slide img {
            display: block;
        }

        /* Clase para mostrar el slide activo */
        .slide.active {
            display: block;
            animation: fade 0.5s;
        }

        @keyframes fade {
            from {opacity: .4} 
            to {opacity: 1}
        }

        /* Botones de navegación */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 80px;
        }

        .prev { left: 0; }
        .next { right: 0; }


/* -------------- Modal ---------------- */

 /* Estilos para el Modal de Imagen (Lightbox) */
        #imageModal {
            display: none; /* Oculto por defecto */
            position: fixed;
            z-index: 1000;
            padding-top: 50px;
            left: 20%;
            bottom: 20%;
            width: 65%;
            height: 550px;
            overflow: auto;
            background-color: rgba(0,0,0,0.35);
            backdrop-filter: blur(5px);
        }

        #modalImage {
            margin: auto;
            display: block;
            max-width: 90%;
            width: 45%;            
            border-radius: 8px;
        }

        .slideImg {
            margin: auto;
            display: block;
            max-width: 90%;
            width: 45%;            
            border-radius: 8px;
        }

        #closeModal {
            position: absolute;
            top: 20px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        #closeModal:hover {
            color: #carto-blue;
        }




        @media(max-width:768px){
            .slider {
                width: 85%;
            } 
            #modalImage, .slideImg {
                width: 85%;     
            }
            .nav-btn {
                padding: 0px 0px;
                font-size: 38px;
            }
            #imageModal {
                padding-top: 50px;
                left: 10%;
                bottom: 20%;
                width: 85%;
                height: 450px;
            }


        }