/* RESET */

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

body{
background:#F7F7F8;
color:#202123;
transition:.4s;
}

body.dark{
background:#202123;
color:#ECECF1;
}

html, body{
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
box-sizing:border-box;
}

*{
box-sizing:border-box;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}

.gallery img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

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


/* LOADER */

#loader{
position:fixed;
inset:0;
background:#202123;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
transition:.6s;
}

#loader.hide{
opacity:0;
pointer-events:none;
}

.spinner{
width:45px;
height:45px;
border:4px solid #2563EB;
border-top-color:transparent;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg);}
}


/* NAVBAR */

header{
position:sticky;
top:0;
backdrop-filter:blur(10px);
background:rgba(247,247,248,.85);
padding:18px 25px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
}

body.dark header{
background:rgba(32,33,35,.8);
}

.logo{
font-weight:bold;
color:#2563EB;
}

.menu-btn{
font-size:24px;
cursor:pointer;
}

.dark-btn{
background:#2563EB;
border:none;
color:white;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}


/* HERO */

.hero{
text-align:center;
padding:80px 20px 40px;
}

.hero h1{
font-size:4rem;
color:#2563EB;
margin-bottom:10px;
}

.blue-line{
height:4px;
background:#2563EB;
width:70%;
margin:auto;
margin-bottom:25px;
}

.hero p{
max-width:700px;
margin:auto;
font-size:18px;
}


/* CONTENIDO */

.container{
max-width:1200px;
margin:60px auto;
padding:0 20px;
}

.content{
display:flex;
gap:30px;
margin-bottom:80px;
flex-wrap:wrap;
}

.text{
flex:1 1 60%;
line-height:1.9;
}

.text h2{
color:#2563EB;
margin-bottom:15px;
}

.image{
flex:1 1 35%;
}

.image img{
width:100%;
border-radius:12px;
}


/* BOTON */

.btn{
display:inline-block;
margin-top:20px;
padding:10px 20px;
background:#2563EB;
color:white;
text-decoration:none;
border-radius:8px;
transition:.3s;
}

.btn:hover{
background:#1D4ED8;
}


/* MENU LATERAL */

.side-menu{
position:fixed;
top:0;
left:-280px;
width:280px;
height:100%;
background:#202123;
color:white;
padding:25px;
transition:.4s cubic-bezier(.77,0,.18,1);
z-index:2000;
}

.side-menu.open{
left:0;
}

.menu-top{
display:flex;
justify-content:space-between;
align-items:center;
}

.close-btn{
cursor:pointer;
font-size:20px;
}

.side-menu a{
display:block;
color:#ECECF1;
text-decoration:none;
margin:15px 0;
}

.side-menu a:hover{
color:#2563EB;
}

/* BOTON WHATSAPP FLOTANTE */

#whatsapp-btn{

position:fixed;
bottom:25px;
right:25px;

background:none;
border:none;

z-index:9999;

}

#whatsapp-btn img{

width:60px;
height:60px;

transition:.3s;

}

#whatsapp-btn img:hover{

transform:scale(1.15);

}


/* OVERLAY */

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
opacity:0;
pointer-events:none;
transition:.3s;
}

.overlay.show{
opacity:1;
pointer-events:all;
}


/* FOOTER */

footer{
text-align:center;
background:#202123;
color:#9CA3AF;
padding:25px 0;
}


/* ANIMACION TIPO APPLE */

.reveal{
  opacity:0;
  transform:translateY(80px) scale(.96);
  transition:1s cubic-bezier(.19,1,.22,1);
}

.reveal.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* TARJETAS DE PROYECTOS */

.project-card{

display:flex;
gap:30px;
margin:60px 0;
align-items:center;
flex-wrap:wrap;

}

.project-card img{

width:350px;
border-radius:12px;

}

.project-info{

flex:1;

}

.project-info h2{

color:#2563EB;
margin-bottom:10px;

}

/* TARJETAS DE SERVICIOS */

.service-card{

background:white;
padding:25px;
border-radius:12px;
margin:40px 0;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;

}

body.dark .service-card{
background:#2a2a2e;
}

.service-card:hover{

transform:translateY(-5px);

}

.service-card h2{

color:#2563EB;
margin-bottom:10px;

}

/* LIGHTBOX PROFESIONAL */

.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.92);
z-index:9999;

justify-content:center;
align-items:center;
flex-direction:column;
}

/* cuando se abre */

.lightbox.show{
display:flex;
}

/* imagen */

.lightbox-img{
max-width:90%;
max-height:85%;
border-radius:10px;
box-shadow:0 0 40px rgba(0,0,0,0.8);

transform:scale(0.8);
opacity:0;
transition:all 0.35s ease;
}

/* animación */

.lightbox.show .lightbox-img{
transform:scale(1);
opacity:1;
}

/* cerrar */

.close{
position:absolute;
top:25px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}

/* flechas */

.prev,.next{
position:absolute;
top:50%;
font-size:50px;
color:white;
cursor:pointer;
padding:20px;
user-select:none;
}

.prev{left:30px;}
.next{right:30px;}

.prev:hover,.next:hover,.close:hover{
color:#00aaff;
}

input, textarea{
width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #ccc;
}

button{
padding:10px 20px;
background:#0077ff;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#0055cc;
}

/* ================= PROYECTOS ================= */

.container-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  padding: 20px;
}

/* Tarjeta de cada proyecto */
.project-card {
  background:#1e293b;   /* fondo oscuro */
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 15px rgba(0,0,0,0.3);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.project-card:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 20px rgba(0,0,0,0.5);
}

/* Previsualización del proyecto (iframe reducido) */
.project-preview {
  width:100%;
  height:180px;
  border:none;
  pointer-events:none; /* que no se pueda interactuar */
}

/* Parte inferior con título y descripción */
.project-info {
  padding:15px 20px;
  background:#0f172a;  /* tono oscuro */
  color:white;
}

.project-info h3 {
  margin:0 0 5px 0;
  font-size:1.2rem;
  color:#f1f5f9;
}

.project-info p {
  margin:0;
  font-size:0.95rem;
  color:#cbd5e1;
}

/* Link de todo el proyecto */
.project-link {
  text-decoration:none;
  color:inherit;
}

#whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 1000;
}

#whatsapp-btn img {
  width: 100%;
  height: 100%;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .project-preview {
    height:150px;
  }

  .project-info h3 {
    font-size:1rem;
  }

  .project-info p {
    font-size:0.85rem;
  }
}


/* RESPONSIVE */

@media(max-width:768px){


}