/* =====================================
   RESPONSIVE.CSS
   SERVICIOS GLOBALES
===================================== */

/* Tablets */

@media screen and (max-width: 992px){

.hero-content h1{
font-size:3rem;
}

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

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

}

/* Celulares */

@media screen and (max-width: 768px){

.header-container{
padding:10px 0;
}

.logo img{
height:60px;
}

/* Menú móvil */

nav{

position:absolute;

top:90px;
left:0;

width:100%;

background:#0B2D5C;

display:none;

padding:20px 0;

}

nav.active{
display:block;
}

nav ul{

flex-direction:column;

text-align:center;

gap:20px;

}

.menu-toggle{
display:block;
}

/* Hero */

.hero{
height:100vh;
padding:0 20px;
}

.hero-content h1{

font-size:2.2rem;
line-height:1.2;

}

.hero-content p{

font-size:1rem;

}

/* Botones */

.hero-buttons{

flex-direction:column;
align-items:center;

}

.btn-primary,
.btn-whatsapp{

width:100%;
max-width:300px;

text-align:center;

}

/* Servicios */

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


/* Contacto */

.contact-info{
text-align:center;
}

}

/* Teléfonos pequeños */

@media screen and (max-width: 480px){

.hero-content h1{
font-size:1.8rem;
}

.section h2{
font-size:2rem;
}

.card-info{
padding:25px;
}

.service-card{
padding:30px 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
font-size:.95rem;
}

.whatsapp-float{

width:55px;
height:55px;

font-size:1.6rem;

right:15px;
bottom:15px;

}

}

/* Pantallas grandes */

@media screen and (min-width: 1600px){

.container{
max-width:1400px;
}

.hero-content h1{
font-size:5rem;
}

.hero-content p{
font-size:1.4rem;
}

}

@media screen and (max-width:768px){

nav{

box-shadow:0 10px 25px rgba(0,0,0,.20);

border-top:1px solid rgba(255,255,255,.15);

}

nav ul li a{

font-size:1.2rem;

font-weight:600;

padding:12px 0;

display:block;

}

nav ul li a:hover{

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

}

}