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

/* ========================= */
/* BODY */
/* ========================= */

body{
    background:
    linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),
    url("https://www.transparenttextures.com/patterns/diamond-upholstery.png");

    background-size:cover;
    background-attachment:fixed;
    color:white;
    min-height:100vh;
}

/* ========================= */
/* CONTENEDOR */
/* ========================= */

.container{
    max-width:1200px;
    margin:auto;
    padding:50px 25px;
}

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

.header{
    text-align:center;
    margin-bottom:50px;
}

.header img{
    width:160px;
    margin-bottom:20px;
    transition:0.3s;
}

.header img:hover{
    transform:scale(1.05);
}

.header h1{
    font-size:42px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.header span{
    color:#2ecc71;
}

.header p{
    font-size:18px;
    opacity:0.9;
}

/* ========================= */
/* INFORMACIÓN */
/* ========================= */

.info{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

}

/* TARJETAS */

.card{

background:rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
border-radius:15px;
padding:25px;
transition:0.3s;
border:1px solid rgba(255,255,255,0.15);

}

.card:hover{

transform:translateY(-5px);
background:rgba(255,255,255,0.15);

}

.card h2{

margin-bottom:10px;
color:#27ae60;

}

.card p{

line-height:1.6;

}

/* ========================= */
/* COBERTURA */
/* ========================= */

.coverage{
    margin-top:60px;
    text-align:center;
}

.coverage h2{
    margin-bottom:25px;
    font-size:32px;
}

.states{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.state{
    background:#27ae60;
    padding:12px 20px;
    border-radius:25px;
    font-size:15px;
    transition:0.3s;
}

.state:hover{
    transform:scale(1.05);
    background:#2ecc71;
}

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

.footer{
    margin-top:70px;
    text-align:center;
    font-size:14px;
    opacity:0.8;
    padding-bottom:20px;
}

/* ================================================= */
/* ==================== TABLETA ==================== */
/* ================================================= */

@media(max-width:1024px){

    .container{
        padding:40px 20px;
    }

    .header h1{
        font-size:34px;
    }

    .header p{
        font-size:16px;
    }

    .card{
        padding:25px;
    }

    .card h2{
        font-size:24px;
    }

    .coverage h2{
        font-size:28px;
    }
}

/* ================================================= */
/* ==================== CELULAR ==================== */
/* ================================================= */

@media(max-width:768px){

    .container{
        padding:30px 15px;
    }

    .header{
        margin-bottom:35px;
    }

    .header img{
        width:120px;
    }

    .header h1{
        font-size:28px;
        line-height:1.3;
    }

    .header p{
        font-size:15px;
    }

    .info{
        grid-template-columns:1fr;
        gap:20px;
    }

    .card{
        padding:22px;
    }

    .card h2{
        font-size:22px;
    }

    .card p{
        font-size:15px;
    }

    .coverage{
        margin-top:45px;
    }

    .coverage h2{
        font-size:24px;
    }

    .states{
        gap:10px;
    }

    .state{
        font-size:13px;
        padding:10px 16px;
    }

    .footer{
        font-size:12px;
        margin-top:50px;
    }
}

/* ================================================= */
/* ============== CELULARES PEQUEÑOS =============== */
/* ================================================= */

@media(max-width:480px){

    .header img{
        width:100px;
    }

    .header h1{
        font-size:22px;
    }

    .header p{
        font-size:14px;
    }

    .card{
        padding:18px;
    }

    .card h2{
        font-size:20px;
    }

    .card p{
        font-size:14px;
        line-height:1.6;
    }

    .coverage h2{
        font-size:20px;
    }

    .state{
        width:100%;
        max-width:220px;
        text-align:center;
    }

    .footer{
        font-size:11px;
    }
}