body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    
}
header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 60px;

background:white;

border-bottom:1px solid #dddddd;
}
header img{

height: 105px;

}
nav a{

text-decoration:none;

color:#222;

margin-left:30px;

font-weight:bold;

}
.hero{

position:relative;

}

.hero img{

width:100%;

display:block;

}
.hero{

position:relative;

}

.hero img{

width:100%;

height:550px;

object-fit:cover;

display:block;

}

.hero-content{   

position:absolute;

top:50%;

left:8%;

transform:translateY(-50%);

color:white;

max-width:550px;

z-index:2;

}

.hero-content h1{

font-size:54px;

margin-bottom:20px;

line-height:1.1;

}

.hero-content p{

font-size:24px;

line-height:1.5;

margin-bottom:35px;

}

.btn{

display:inline-block;

background:#d40000;

color:white;

padding:18px 40px;

text-decoration:none;

border-radius:6px;

font-weight:bold;

transition:.3s;

}

.btn:hover{

background:#aa0000;

}


/* SERVICIOS */

.services{

padding:80px;

background:#f6f6f6;

}

.services h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

}

.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.card{

background:white;

padding:35px;

border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

}

.card h3{

margin-bottom:15px;

}

.card p{

color:#555;

line-height:1.6;

}
.hero::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

}
/* WHY */

.why{

padding:90px 80px;

background:white;

}

.why h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

}

.numbers{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

}

.number-box{

text-align:center;

padding:40px;

border-radius:12px;

background:#fafafa;

transition:.3s;

}

.number-box:hover{

transform:translateY(-8px);

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.number-box h3{

font-size:48px;

color:#d40000;

margin-bottom:15px;

}

.number-box p{

font-size:20px;

color:#555;

}
/* CLIENTES */

.clients{

padding:90px 80px;

background:#f7f7f7;

text-align:center;

}

.clients h2{

font-size:42px;

margin-bottom:20px;

}

.clients p{

max-width:900px;

margin:auto;

margin-bottom:60px;

font-size:20px;

color:#666;

line-height:1.7;

}

.logos{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:50px;

}

.logo-card{

height:100px;

display:flex;

justify-content:center;

align-items:center;

background:white;

border-radius:16px;

box-shadow:0 8px 24px rgba(0,0,0,.08);

padding:15px;

transition:.3s;

}

.logo-card:hover{

transform:translateY(-8px);

}

.logo-card img{

max-width:180px;

max-height:90px;

object-fit:contain;

}
/* OPERACIONES */

.operations{

padding:90px 80px;

background:white;

text-align:center;

}

.operations h2{

font-size:42px;

margin-bottom:20px;

}

.operations p{

max-width:900px;

margin:auto;

margin-bottom:60px;

line-height:1.7;

color:#666;

font-size:20px;

}

.operations-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}

.operation-card{

overflow:hidden;

background:white;

border-radius:15px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

transition:.3s;

}

.operation-card:hover{

transform:translateY(-10px);

}

.operation-card img{

width:100%;

height:260px;

object-fit:cover;

}

.operation-card h3{

margin-top:25px;

font-size:26px;

}

.operation-card p{

padding:0 25px 35px;

font-size:18px;

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

.coverage{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding:100px 100px;

background:#ffffff;

}

.coverage-text h2{

font-size:52px;

color:#111;

margin-bottom:25px;

}

.coverage-text p{

font-size:22px;

line-height:1.8;

color:#555;

margin-bottom:40px;

}

.coverage-map{

display:flex;

justify-content:center;

align-items:center;

}

.coverage-map img{

width:300px;

max-width:100%;

height:auto;

}

.coverage .btn{

display:inline-block;

padding:18px 36px;

background:#c40000;

color:white;

font-weight:bold;

border-radius:8px;

text-decoration:none;

transition:.3s;

}

.coverage .btn:hover{

background:#990000;

}

/*==========================
        NOTICIAS
==========================*/

.news{

padding:90px 80px;

background:#f7f7f7;

}

.news h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

}

.news-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}

.news-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}

.news-card:hover{

transform:translateY(-6px);

}

.news-card img{

width:100%;

height:260px;

object-fit:cover;

display:block;

}

.news-text{

padding:30px;

}

.news-text h3{

font-size:30px;

margin-bottom:18px;

color:#222;

}

.news-text p{

font-size:18px;

line-height:1.7;

color:#666;

}

.whatsapp{

position:fixed;

bottom:25px;

right:25px;

z-index:999;

}

.whatsapp img{

width:70px;

transition:.3s;

}

.whatsapp img:hover{

transform:scale(1.1);

}

/*==========================
CONTACTO
==========================*/

.contact{

padding:100px 80px;

background:white;

}

.contact h2{

text-align:center;

font-size:46px;

margin-bottom:20px;

}

.contact-subtitle{

text-align:center;

font-size:20px;

color:#666;

margin-bottom:60px;

}

.contact-container{

display:grid;

grid-template-columns:40% 60%;

gap:60px;

}

.contact-info h3{

font-size:30px;

margin-bottom:25px;

}

.contact-info p{

font-size:19px;

line-height:2;

color:#555;

}

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form textarea{

padding:18px;

font-size:17px;

border:1px solid #ddd;

border-radius:8px;

}

.contact-form textarea{

height:180px;

resize:none;

}

.contact-form button{

background:#c00000;

color:white;

border:none;

padding:18px;

font-size:18px;

font-weight:bold;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

background:#980000;

}

.contact-item{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:22px;

}

.contact-item span{

font-size:22px;

width:28px;

text-align:center;

}

.contact-item p{

margin:0;

font-size:18px;

line-height:1.6;

}

.contact-item a{

color:#444;

text-decoration:none;

transition:.3s;

}

.contact-item a:hover{

color:#c00000;

}

.social-links{

display:flex;

gap:18px;

margin-top:35px;

flex-wrap:wrap;

}

.social-links a{

background:#f4f4f4;

padding:10px 18px;

border-radius:30px;

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

}

.social-links a:hover{

background:#c00000;

color:white;

}

footer{

background:#111;

color:white;

text-align:center;

padding:50px;

}

footer img{

height:60px;

margin-bottom:20px;

}

footer p{

margin:10px 0;

color:#ccc;

}

html{

scroll-behavior:smooth;

}

.tipo-contacto{

display:flex;

gap:40px;

margin:10px 0;

font-size:17px;

}

.tipo-contacto label{

display:flex;

align-items:center;

gap:8px;

cursor:pointer;

}

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

@media (max-width:768px){
    /* HEADER */

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

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    margin-top:20px;
}

nav a{
    margin:0;
}

/* HERO */

.hero{
    height:auto;
}

.hero-content{
    max-width:90%;
}

/* SERVICIOS */

.services{
    padding:60px 20px;
}

.services h2{
    font-size:34px;
}

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

/* WHY */

.why{
    padding:60px 20px;
}

.why h2{
    font-size:34px;
}

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

.number-box{
    padding:20px;
}

.number-box h3{
    font-size:28px;
}

/* CLIENTES */

.clients{
    padding:60px 20px;
}

.clients h2{
    font-size:34px;
}

.clients p{
    font-size:17px;
}

.logos{
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.logo-card{
    height:90px;
    padding:10px;
}

.logo-card img{
    max-width:110px;
    max-height:55px;
}

}

@media (max-width:768px){

body{

background:yellow !important;

}

/* ===========================
   OPERACIONES
=========================== */

.operations{

    padding:60px 20px;

}

.operations h2{

    font-size:34px;

}

.operations p{

    font-size:17px;

    margin-bottom:40px;

}

.operations-grid{

    grid-template-columns:1fr;

    gap:30px;

}

.operation-card img{

    height:220px;

}

.operation-card h3{

    font-size:24px;

}

.operation-card p{

    font-size:16px;

    padding:0 20px 25px;

}

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

.coverage{

    grid-template-columns:1fr;

    gap:40px;

    padding:60px 20px;

    text-align:center;

}

.coverage-text h2{

    font-size:34px;

}

.coverage-text p{

    font-size:18px;

}

.coverage-map{

    order:2;

}

.coverage-map img{

    width:220px;

}


/* ===========================
   NOTICIAS
=========================== */

.news{

    padding:60px 20px;

}

.news h2{

    font-size:34px;

}

.news-grid{

    grid-template-columns:1fr;

    gap:30px;

}

.news-card img{

    height:220px;

}

.news-text{

    padding:22px;

}

.news-text h3{

    font-size:24px;

}

.news-text p{

    font-size:16px;

}


/* ===========================
   CONTACTO
=========================== */

.contact{

    padding:60px 20px;

}

.contact h2{

    font-size:34px;

}

.contact-subtitle{

    font-size:17px;

}

.contact-container{

    grid-template-columns:1fr;

    gap:40px;

}

.contact-info{

    text-align:center;

}

.contact-info h3{

    font-size:28px;

}

.contact-info p{

    font-size:17px;

}

.tipo-contacto{

    flex-direction:column;

    gap:12px;

}

.contact-form input,
.contact-form textarea,
.contact-form button{

    font-size:16px;

}


/* ===========================
   WHATSAPP
=========================== */

.whatsapp img{

    width:58px;

}


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

footer{

    padding:40px 20px;

}

footer img{

    height:50px;

}

}