/* =================================================
HEADER
================================================ */

.header{

position:fixed;
top:0;
left:0;

width:100%;

background:rgba(15,23,32,.92);

backdrop-filter:blur(10px);

z-index:999;

border-bottom:1px solid rgba(255,255,255,.05);

transition:.35s;

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 0;

}

/* LOGO */

.logo a{
display:flex;
align-items:center;
}

.logo img{
height:48px;
display:block;
}

/* =================================================
MENU
================================================ */

.menu{

display:flex;
align-items:center;
gap:30px;

}

.menu a{

font-weight:500;
font-size:15px;

letter-spacing:.5px;

position:relative;

transition:.3s;

}

/* underline */

.menu a::after{

content:"";
position:absolute;

bottom:-6px;
left:0;

width:0;
height:2px;

background:var(--color-principal);

transition:.3s;

}

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

.menu a:hover::after{
width:100%;
}

/* =================================================
HEADER SCROLL
================================================ */

.header.scrolled{

background:#020617;

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

}

/* =================================================
HERO PREMIUM
================================================ */

.hero{

height:100vh;

background:
linear-gradient(
rgba(10,20,30,.85),
rgba(10,20,30,.95)
),
url('../img/hero/hero.jpg');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

position:relative;

text-align:center;

overflow:hidden;

}

.hero-overlay{

position:absolute;
inset:0;

background:rgba(15,23,32,.65);

}

.hero-content{

position:relative;
z-index:3;

max-width:720px;

padding:0 20px;

}

/* titulo */

.hero-title{

color:var(--color-principal);

font-size:64px;

font-weight:700;

margin-bottom:25px;

letter-spacing:2px;

position:relative;

}

/* glow */

.hero-title::before{

content:"";

position:absolute;

width:420px;
height:420px;

background:radial-gradient(
circle,
rgba(25,181,176,.25),
transparent 70%
);

top:50%;
left:50%;

transform:translate(-50%,-50%);

filter:blur(80px);

z-index:-1;

}

/* texto */

.hero p{

font-size:19px;

opacity:.85;

max-width:620px;

margin:auto;

margin-bottom:30px;

}

/* particulas */

.hero-particles{

position:absolute;

inset:0;

background-image:radial-gradient(
rgba(255,255,255,.06) 1px,
transparent 1px
);

background-size:35px 35px;

opacity:.18;

animation:particlesMove 25s linear infinite;

pointer-events:none;

}

@keyframes particlesMove{

from{
transform:translateY(0);
}

to{
transform:translateY(-120px);
}

}

/* =================================================
SERVICIOS
================================================ */

.servicios{
background:var(--color-oscuro-2);
}

/* grid */

.grid-servicios{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

margin-top:50px;

}

/* tarjetas */

.card-servicio{

background:rgba(30,41,59,.85);

padding:45px 35px;

border-radius:12px;

text-align:center;

transition:all .35s ease;

border:1px solid rgba(255,255,255,.06);

backdrop-filter:blur(6px);

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

}

.card-servicio:hover{

transform:translateY(-8px);

border-color:rgba(25,181,176,.3);

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

}

.card-servicio i{

font-size:42px;

color:var(--color-principal);

margin-bottom:22px;

transition:.3s;

}

.card-servicio:hover i{
transform:scale(1.15);
}

/* =================================================
BANNER PAGINAS
================================================ */

.banner{

position:relative;

padding:130px 0;

background-size:cover;
background-position:center;

text-align:center;

overflow:hidden;

}

.banner::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
rgba(5,15,25,.85),
rgba(10,30,45,.9)
);

}

.banner-content{

position:relative;

z-index:2;

max-width:800px;

margin:auto;

}

.banner h1{

font-size:52px;

letter-spacing:1px;

margin-bottom:15px;

}

.banner p{

font-size:18px;

opacity:.9;

max-width:600px;

margin:auto;

margin-bottom:25px;

}

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

.footer{

background:#020617;

padding:80px 0 30px;

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

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.footer h4{

margin-bottom:20px;

font-size:18px;

}

.footer ul li{

margin-bottom:10px;

opacity:.8;

}

.footer ul li a{

transition:.3s;

}

.footer ul li a:hover{
color:var(--color-principal);
}

/* redes */

.social{

display:flex;

gap:20px;

font-size:22px;

}

.social a{

transition:.3s;

}

.social a:hover{

color:var(--color-principal);

transform:translateY(-2px);

}

/* copyright */

.copy{

text-align:center;

margin-top:40px;

opacity:.6;

font-size:14px;

}

.copy a{

color:var(--color-principal);

font-weight:500;

}

/* =================================================
HERO SPLIT (HOME)
================================================ */

.hero-split{

padding:140px 0;
background:#0b1620;
overflow:hidden;

}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

/* TEXTO */

.hero-content{

max-width:600px;

}

.hero-buttons{

display:flex;
gap:15px;
margin-top:20px;

}

.hero-stats{

margin-top:25px;
display:flex;
gap:30px;
font-size:14px;
opacity:.8;

}

/* IMAGENES */

.hero-images{

position:relative;
max-width:520px;
margin:auto;

}

.hero-img-main{

width:100%;
border-radius:10px;
display:block;

box-shadow:0 25px 50px rgba(0,0,0,.45);

}

.hero-img-secondary{

position:absolute;

bottom:-40px;
left:-40px;

width:60%;

border-radius:10px;

border:6px solid #0b1620;

box-shadow:0 15px 35px rgba(0,0,0,.5);

}