/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

/* COLORES */
:root{
--negro:#0F0F0F;
--gris-oscuro:#1F1F1F;
--gris:#2B2B2B;
--plateado:#C8C8C8;
--azul:#00C2FF;
--blanco:#FFFFFF;
}

/* BODY */
body{
background:var(--negro);
color:var(--blanco);
}

/* NAVBAR */
.navbar{
position:fixed;
top:0;
width:100%;
background:rgba(15,15,15,.95);
backdrop-filter:blur(6px);
border-bottom:1px solid rgba(255,255,255,0.1);
z-index:1000;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 5%;
}

/* LOGO */
.logo{
display:flex;
align-items:center;
gap:12px;
font-weight:700;
color:var(--plateado);
font-size:24px;
}

.logo img{
width:80px;
background:white;
padding:4px;
border-radius:6px;
}

/* MENU */
.menu{
display:flex;
list-style:none;
}

.menu a i{
margin-right:8px;
font-size:14px;
}

.menu li{
margin-left:25px;
}

.menu a{
color:var(--blanco);
text-decoration:none;
font-weight:600;
transition:.3s;
}

.menu a:hover{
color:var(--azul);
}

/* BOTON */
.btn-primary{
background:var(--azul);
padding:12px 25px;
border-radius:6px;
text-decoration:none;
color:white;
font-weight:bold;
transition:.3s;
}

.btn-primary:hover{
background:#0099cc;
}

/* HERO DESKTOP */
.hero{
height:100vh;
background:url("../img/estudioej.jpeg") center/cover no-repeat;
}

/* TEXTO HERO */
.hero-texto{
background:rgba(0,0,0,0.7);
padding:40px 5%;
text-align:center;
}

.hero-texto .hero-content{
max-width:900px;
margin:auto;
}

.hero-texto h1{
font-size:48px;
color:var(--blanco);
margin-bottom:20px;
}

.hero-texto p{
font-size:18px;
line-height:1.6;
color:#d6d6d6;
}

/* SECCIONES */
.section{
padding:90px 5%;
text-align:center;
}

.section h2{
font-size:38px;
color:var(--blanco);
margin-bottom:50px;
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

/* SERVICIOS */
.servicio-card{
background:var(--gris-oscuro);
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.4);
transition:.3s;
text-align:left;
}

.servicio-card:hover{
transform:translateY(-10px);
box-shadow:0 10px 30px rgba(0,0,0,.7);
}

.servicio-img{
width:100%;
height:230px;
overflow:hidden;
}

.servicio-img img{
width:100%;
height:100%;
object-fit:cover;
}

.servicio-card h3{
color:var(--blanco);
padding:20px 20px 10px;
}

.servicio-card p{
padding:0 20px 25px;
color:var(--plateado);
}

/* NOSOTROS */
.nosotros{
background:var(--gris);
}

.nosotros-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
margin-bottom:60px;
}

.nosotros-texto p{
margin-bottom:15px;
color:var(--plateado);
line-height:1.7;
}

.nosotros-img img{
width:100%;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.5);
}

/* INFO CARDS */
.info-card{
background:var(--gris-oscuro);
padding:35px;
border-radius:12px;
border:1px solid #333;
transition:.3s;
}

.info-card:hover{
transform:translateY(-8px);
border:1px solid var(--azul);
}

.icon-info{
font-size:40px;
color:var(--azul);
margin-bottom:15px;
}

/* TRABAJOS */
.trabajo{
width:100%;
height:260px;
object-fit:cover;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,.6);
transition:.3s;
}

.trabajo:hover{
transform:scale(1.05);
}

/* CONTACTO */
.contacto{
padding:80px 10%;
text-align:center;
}

.contacto h2{
margin-bottom:40px;
}

.contacto-contenedor{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}

.contacto-card{
background:#1B2831;
padding:40px;
border-radius:15px;
box-shadow:0px 10px 30px rgba(0,0,0,0.4);
}

.contacto-item{
display:flex;
align-items:center;
margin-bottom:25px;
}

.contacto-item i{
font-size:26px;
margin-right:15px;
color:var(--azul);
}

.contacto-item a{
color:var(--azul);
text-decoration:none;
}

.contacto-item a:hover{
text-decoration:underline;
}

.contacto-imagen img{
width:100%;
max-height:350px;
object-fit:cover;
border-radius:15px;
box-shadow:0px 10px 30px rgba(0,0,0,0.4);
}

/* FOOTER */
footer{
background:var(--gris-oscuro);
color:var(--plateado);
text-align:center;
padding:25px;
border-top:1px solid rgba(255,255,255,0.1);
}

/* POPUP */
#popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.75);
justify-content:center;
align-items:center;
z-index:2000;
padding:20px;
}

.popup-content{
position:relative;
width:100%;
max-width:380px;
animation:fadeIn .4s ease;
}

.popup-content img{
width:100%;
height:auto;
border-radius:12px;
box-shadow:0 10px 40px rgba(0,0,0,0.7);
border:2px solid var(--azul);
cursor:pointer;
}

.cerrar-popup{
position:absolute;
top:-12px;
right:-12px;
background:var(--azul);
color:white;
font-size:18px;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
}

.cerrar-popup:hover{
background:#0099cc;
}

/* ANIMACIÓN */
@keyframes fadeIn{
from{
opacity:0;
transform:scale(0.8);
}
to{
opacity:1;
transform:scale(1);
}
}

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

/* TABLET */
@media(max-width:1024px){
.hero{
height:85vh;
}
}

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

.menu{
display:none;
}

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

.contacto-contenedor{
grid-template-columns:1fr;
}

/* 🔥 HERO OPTIMIZADO */
.hero{
height:70vh;
background-size:cover;
background-position:center top;
background-repeat:no-repeat;
}

.hero-texto h1{
font-size:36px;
}

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

}