:root{
--bg:#050b18;
--panel:#0f172a;
--text:#fff;
--accent:#3b82f6;
--radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
font-family:Arial,sans-serif;
background:
radial-gradient(circle at top,#1e3a8a55,transparent),
linear-gradient(#050b18,#0f172a);
color:var(--text);
}

.container{width:min(1100px,92%);margin:auto}

.site-header{
position:sticky;
top:0;
background:#07111fcc;
backdrop-filter:blur(12px);
}

.nav-bar{
display:flex;
justify-content:space-between;
padding:18px 0;
}

.brand,.nav-links a{
color:#fff;
text-decoration:none;
margin-left:15px;
}

.hero{padding:90px 0}

.hero-content{
background:#101826cc;
padding:40px;
border-radius:var(--radius);
}

.hero h1{font-size:50px;margin:10px 0}

.hero-actions{margin-top:25px;display:flex;gap:15px}

.button{
padding:12px 22px;
border-radius:30px;
text-decoration:none;
background:var(--accent);
color:white;
display:inline-block;
}

.gallery-section{padding:70px 0}

.section-header{margin-bottom:30px}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.gallery-card{
background:#111827;
border-radius:20px;
overflow:hidden;
}

.gallery-card img{
width:100%;
height:220px;
object-fit:cover;
}

.card-copy{padding:18px}

.card-label{color:#60a5fa;font-size:.8rem}

.contact-banner{padding:70px 0}

.contact-content{
background:#101826;
padding:30px;
border-radius:20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.site-footer{
padding:25px;
text-align:center;
color:#94a3b8;
}

@media(max-width:768px){
.nav-bar,.contact-content{flex-direction:column}
.hero h1{font-size:38px}
.hero-actions{flex-direction:column}
.button{width:100%;text-align:center}
}

/* ===== Transición al abrir proyecto ===== */

body.cargando{
    overflow:hidden;
}

body.cargando::before{

    content:"";

    position:fixed;
    inset:0;

    background:rgba(3,8,20,.85);

    backdrop-filter:blur(15px);

    opacity:0;

    animation:fadeIn .45s forwards;

    z-index:9999;

}

@keyframes fadeIn{

    to{
        opacity:1;
    }

}

.gallery-card{

    transition:.35s;

}

.gallery-card.abriendo{

    transform:scale(.96);

    opacity:.5;

    filter:blur(4px);

}