*{
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/portadaIndex.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;
}

.btn{
background:var(--primary);
color:white;
padding:15px 35px;
text-decoration:none;
border-radius:5px;
}


/* --------------   Seccion de Iconos ---------------- */

.features{
    background:#7777;
    padding:60px 40px;
    display:flex;
    justify-content:center;
    align-items:stretch;
}

.feature-item{
    flex:1;
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:0 30px;
    position:relative;
}

.feature-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:1px;
    background:#8d8d8d;
}

.icon img{
    width:100px;
    height:auto;
    max-width: none;
}

.content h3{
    font-size:14px;
    font-weight:800;
    margin-bottom:12px;
    color:#000;
    text-transform:uppercase;
}

.content p{
    font-size:11px;
    line-height:1.5;
    color:#222;
}


@media(max-width:1200px){

    .features{
        flex-wrap:wrap;
    }

    .feature-item{
        flex:0 0 50%;
        padding:30px;
    }

    .feature-item::after{
        display:none;
    }
}

@media(max-width:768px){

    .features{
        padding:40px 20px;
    }

    .feature-item{
        flex:0 0 100%;
        margin-bottom:30px;
    }

    .icon img{
        width:60px;
    }

    .content h3{
        font-size:13px;
    }

    .content p{
        font-size:13px;
    }
}


/* --------------  Productos  ---------------- */

.productos{
    background:#f2f2f2;
    padding:90px 5%;
    display:flex;
    align-items:center;
    gap:60px;
}

/* COLUMNA IZQUIERDA */

.productos-info{
    width:35%;
}

.subtitulo{
    display:block;
    color:#0066b3;
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:10px;
}

.productos-info h2{
    font-size:4rem;
    line-height:1;
    color:#07254d;
    font-weight:800;
    margin-bottom:30px;
}

.productos-info p{
    font-size:1.2rem;
    line-height:1.6;
    color:#222;
    margin-bottom:40px;
}

.btn-productos{
    display:inline-flex;
    align-items:center;
    gap:15px;
    background:#0066b3;
    color:#fff;
    text-decoration:none;
    padding:18px 28px;
    font-weight:700;
    font-size:1rem;
    transition:.3s;
}

.btn-productos:hover{
    background:#004f8c;
}

.btn-productos span{
    font-size:2rem;
    line-height:1;
}

/* COLUMNA DERECHA */

.productos-grid{
    width:65%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.producto-card{
    background:#fff;
    border:1px solid #d7d7d7;
    border-radius:8px;
    overflow:hidden;
    transition:.3s;
}

.producto-card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.producto-img{
    height:220px;
    background:#333;
}

.producto-img img{
    width:80%;
    height:80%;
    object-fit:contain;
    display:block;
}

.producto-body{
    padding:25px;
}

.producto-body h3{
    text-align:center;
    color:#333;
    font-size:1.7rem;
    font-weight:800;
    margin-bottom:15px;
}

.producto-body p{
    color:#444;
    line-height:1.5;
    margin-bottom:25px;
}

.producto-body a{
    color:#0066b3;
    text-decoration:none;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:12px;
}

.producto-body a span{
    font-size:1.8rem;
}

@media(max-width:1200px){

    .productos{
        flex-direction:column;
    }

    .productos-info,
    .productos-grid{
        width:100%;
    }

    .productos-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .productos-grid{
        grid-template-columns:1fr;
    }

    .productos-info h2{
        font-size:2.8rem;
    }

}



/* --------------  grupo Fryen  ---------------- */
.grupoFyen{
    background:#7777;
    padding: 1.5%;
}

.grupoFyen img{
    width: 100%;
}

.grupoFyen h1{
    font-size: 2vw;
}

@media(max-width:768px){
    .grupoFyen img{
        height: 200px;
    }
    .grupoFyen h1{
        font-size: 3.5vh;
    }
}


/* -------------- Logos ---------------- */
.logos{
	padding:100px 0;
	
}

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

.lineLeft {
     padding-left: 12%;
     border-left: solid 2px #2d292977;
}

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

@media(max-width:768px){
    .logos h1{
        font-size: 3.2vh;
    }   
    .steps {
        display: inherit;
    }
    .lineLeft {
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center;
         padding-left: 12%;
         border-left: none;
         margin-top: 10%;
    }   
    .lineCenter {
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center;
    }    
}

/* --------------  FryenGrupo  ---------------- */