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

body{

background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
url("../img/camion.jpeg");

background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;
min-height:100vh;
}

.overlay{
background:rgba(0,0,0,.2);
min-height:100vh;
}

/* ================= HEADER ================= */

header{

background:#071b2d;

display:flex;
justify-content:space-between;
align-items:center;

padding:15px 30px;
flex-wrap:wrap;
}

.logo{
display:flex;
align-items:center;
gap:15px;
}

.logo img{
width:70px;
border-radius:10px;
}

nav ul{
display:flex;
gap:25px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

nav a:hover{
color:#00c3ff;
}

.ofertas{
display:flex;
gap:10px;
}

.ofertas img{
width:70px;
border-radius:10px;
}

/* ================= HERO ================= */

.hero{

display:flex;
justify-content:center;
align-items:center;

padding:70px 20px;
}

.rastreo{
width:100%;
max-width:1400px;
text-align:center;
}

.rastreo h1{

font-size:70px;
margin-bottom:40px;
}

/* ================= BUSQUEDA ================= */

.busqueda{

display:flex;
justify-content:center;
gap:10px;

margin-bottom:70px;
flex-wrap:wrap;
}

.busqueda input{

width:380px;
padding:18px;

border:none;
border-radius:10px;

font-size:18px;
outline:none;
}

.busqueda button{

padding:18px 30px;

border:none;
border-radius:10px;

background:#ff3131;
color:white;

font-size:18px;
cursor:pointer;

transition:.3s;
}

.busqueda button:hover{
background:red;
transform:scale(1.05);
}

/* ================= TIMELINE ================= */

/* ================= TIMELINE ================= */

.timeline{

position:relative;

display:flex;
justify-content:space-between;
align-items:flex-start;

gap:20px;

width:100%;

padding:0 40px;
}

/* LINEA GRIS */

.timeline::before{

content:"";

position:absolute;

top:45px;

/* INICIA EN EL CENTRO DEL PRIMER CÍRCULO */
left:calc(10% + 5px);

/* TERMINA EN EL ÚLTIMO CÍRCULO */
right:calc(10% + 5px);

height:5px;

background:#cfcfcf;

z-index:1;

border-radius:10px;
}

/* LINEA AZUL */

.linea{

position:absolute;

top:45px;

/* MISMA POSICIÓN */
left:calc(10% + 5px);

height:5px;

width:0%;

background:#00c3ff;

z-index:2;

border-radius:10px;

transition:1s;
}
/* PASOS */

.paso{

position:relative;
z-index:3;

width:20%;
text-align:center;
}

/* CIRCULOS */

.circulo{

width:90px;
height:90px;

border-radius:50%;

border:3px solid white;

display:flex;
justify-content:center;
align-items:center;

margin:auto;

font-size:35px;

background:rgba(255,255,255,.05);

transition:.5s;
}

.paso.active .circulo{

background:#00c3ff;
box-shadow:0 0 20px #00c3ff;
border-color:#00c3ff;
}

.paso h3{
margin-top:15px;
font-size:22px;
}

.descripcion{

margin-top:10px;
font-size:16px;
line-height:1.5;
}

/* ================= INFO ================= */

.info-rastreo{

margin-top:50px;

display:flex;
flex-direction:column;
gap:15px;

font-size:30px;
font-weight:bold;
}

.info-rastreo i{
color:#00c3ff;
}

/* ================= FOOTER ================= */

footer{

margin-top:80px;

background:linear-gradient(to right,#081b2e,#0a2d48);

padding:40px;
}

.footer-content{

display:flex;
justify-content:space-between;
flex-wrap:wrap;

gap:30px;
}

.footer-section{
max-width:300px;
}

.diamond{

font-size:40px;
color:#00c3ff;

margin-bottom:15px;
}

.social-icons{

display:flex;
gap:15px;
}

.social-icons a{

width:50px;
height:50px;

border-radius:50%;
border:2px solid white;

display:flex;
justify-content:center;
align-items:center;

color:white;
text-decoration:none;

transition:.3s;
}

.social-icons a:hover{

background:#00c3ff;
color:#071b2d;
}

.copy{

margin-top:30px;
text-align:center;

color:#ccc;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){

.timeline{
flex-wrap:wrap;
justify-content:center;
}

.timeline::before,
.linea{
display:none;
}

.paso{
width:40%;
}

}

@media(max-width:768px){

header{
flex-direction:column;
gap:20px;
}

nav ul{
flex-direction:column;
text-align:center;
}

.rastreo h1{
font-size:45px;
}

.busqueda input{
width:100%;
}

.paso{
width:100%;
}

.info-rastreo{
font-size:20px;
}

}