*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Segoe UI', sans-serif;
    background:#ffffff;
    color:#222;
}

.contenedor{
    width:90%;
    max-width:1100px;
    margin:auto;
}

/* HERO */

.hero{
    background:#111;
    color:white;
    padding:120px 0;
}

.etiqueta{
    background:#ff5a1f;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    letter-spacing:2px;
}

.hero h1{
    font-size:55px;
    margin:25px 0;
    max-width:700px;
}

.hero p{
    max-width:700px;
    color:#d9d9d9;
}

/* TITULO */

.presentacion{
    padding:90px 0;
    text-align:center;
}

.presentacion h2{
    font-size:40px;
}

.linea{
    width:100px;
    height:4px;
    background:#ff5a1f;
    margin:20px auto;
}

/* SERVICIOS */

.servicios{
    width:90%;
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    padding-bottom:100px;
}

.servicio{
    border:2px solid #eee;
    padding:40px;
    transition:.3s;
}

.servicio:hover{
    border-color:#ff5a1f;
}

.numero{
    color:#ff5a1f;
    font-size:45px;
    font-weight:bold;
    margin-bottom:20px;
}

.servicio h3{
    margin-bottom:15px;
}

/* FRASE */

.frase{
    background:#ff5a1f;
    color:white;
    text-align:center;
    padding:100px 20px;
}

.frase h2{
    font-size:42px;
    margin-bottom:20px;
}

/* BENEFICIOS */

.beneficios{
    width:90%;
    max-width:1100px;
    margin:90px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.beneficio{
    background:#111;
    color:white;
    text-align:center;
    padding:30px;
    font-size:18px;
}

/* FOOTER */

footer{
    background:#1a1a1a;
    color:white;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
    padding:70px 8%;
}

.footer-col h3{
    color:#ff5a1f;
    margin-bottom:20px;
}

.footer-col p{
    margin-bottom:10px;
}
/* SLIDER */

.slider-section{
    padding:100px 0;
    background:#f7f7f7;
    text-align:center;
}

.slider-section h2{
    margin-bottom:40px;
    font-size:40px;
}

.slider{
    width:90%;
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    border-radius:20px;
}

.slides{
    display:flex;
    width:600%;
    animation: deslizar 24s infinite;
}

.slides img{
    width:16.666%;
    height:500px;
    object-fit:cover;
}

@keyframes deslizar{

    0%,12%{
        transform:translateX(0);
    }

    16%,28%{
        transform:translateX(-16.666%);
    }

    32%,44%{
        transform:translateX(-33.333%);
    }

    48%,60%{
        transform:translateX(-50%);
    }

    64%,76%{
        transform:translateX(-66.666%);
    }

    80%,92%{
        transform:translateX(-83.333%);
    }

    100%{
        transform:translateX(0);
    }
}