/* ==========================================
   HEADER PREMIUM - CRYSTAL GLASS HERO
========================================== */

.header{

    position:relative;
    min-height:100vh;
    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #0f172a 0%,
        #172554 45%,
        #111827 100%
    );

    padding-bottom:80px;

}



/* ==========================================
   LUCES AMBIENTALES
========================================== */


.header-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.35;

    pointer-events:none;

}



.glow-1{

    width:600px;

    height:600px;

    background:#2563eb;

    top:-250px;

    left:-200px;

    animation:

    heroGlow1 12s infinite alternate;

}



.glow-2{

    width:550px;

    height:550px;

    background:#05b73a;

    bottom:-250px;

    right:-200px;

    animation:

    heroGlow2 14s infinite alternate;

}




@keyframes heroGlow1{


from{

transform:translate(0);

}


to{

transform:translate(120px,80px);

}


}



@keyframes heroGlow2{


from{

transform:translate(0);

}


to{

transform:translate(-100px,-80px);

}


}





/* ==========================================
   NAVBAR GLASS
========================================== */


.navbar{


    position:relative;

    z-index:10;


    margin-top:25px;


    padding:15px 25px;


    border-radius:30px;


    display:flex;


    align-items:center;


    justify-content:space-between;



    background:

    rgba(255,255,255,.55);



    backdrop-filter:

    blur(25px);



    border:

    1px solid rgba(255,255,255,.75);



    box-shadow:


    0 20px 50px rgba(15,23,42,.08);


}





/* LOGO */


.logo{


    display:flex;

    align-items:center;

    gap:15px;


    text-decoration:none;


    color:#0f172a;


    font-weight:800;

    font-size:1.25rem;


}



.logo-imagen{


    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    overflow:hidden;


    background:white;


    box-shadow:


    0 15px 35px rgba(37,99,235,.18);


}



.logo-imagen img{


    width:90%;

    height:90%;


    object-fit:contain;


}






/* MENU */


.menu{


    display:flex;


    list-style:none;


    gap:35px;


}



.menu a{


    text-decoration:none;


    color:#475569;


    font-weight:600;


    transition:.35s;


}



.menu a:hover{


    color:#2563eb;


}






/* BOTON NAV */


.header-boton{


    text-decoration:none;


    padding:14px 26px;


    border-radius:999px;


    color:white;


    font-weight:700;


    background:


    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    box-shadow:


    0 15px 35px rgba(37,99,235,.35);


    transition:.4s;


}



.header-boton:hover{


    transform:translateY(-4px);


    box-shadow:


    0 25px 50px rgba(37,99,235,.45);


}





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


.hero{


    position:relative;

    z-index:2;


    display:grid;


    grid-template-columns:

    1fr 1fr;


    align-items:center;


    gap:70px;


    padding-top:90px;


}





/* TEXTO */


.hero-tag{


    display:inline-flex;


    padding:10px 20px;


    border-radius:999px;


    background:white;


    color:#2563eb;


    font-weight:700;


    margin-bottom:25px;


    box-shadow:


    0 10px 30px rgba(0,0,0,.06);


}




.hero h1{


    font-size:

    clamp(2.8rem,5vw,5rem);


    line-height:1.05;


    letter-spacing:-2px;


    color:#fbe600;


    font-weight:900;


    margin-bottom:30px;


}




.hero p{


    color:#eef0f3;


    font-size:1.2rem;


    line-height:1.9;


    max-width:580px;


    margin-bottom:40px;


}






/* BOTONES */


.hero-botones{


    display:flex;


    gap:20px;


    margin-bottom:55px;


}



.boton-principal{


    padding:17px 35px;


    border-radius:999px;


    background:


    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    color:white;


    text-decoration:none;


    font-weight:750;


    box-shadow:


    0 20px 45px rgba(37,99,235,.35);


    transition:.4s;


}



.boton-principal:hover{


    transform:translateY(-5px);


}




.boton-secundario{


    padding:17px 35px;


    border-radius:999px;


    background:


    rgba(255,255,255,.65);


    backdrop-filter:blur(20px);


    border:

    1px solid rgba(255,255,255,.8);


    color:#334155;


    text-decoration:none;


    font-weight:700;


    transition:.4s;


}



.boton-secundario:hover{


    background:white;


}







/* DATOS */


.hero-datos{


    display:flex;


    gap:20px;


}



.hero-datos div{


    padding:20px;


    min-width:140px;


    border-radius:25px;


    background:


    rgba(255,255,255,.55);


    backdrop-filter:blur(20px);


    border:


    1px solid rgba(255,255,255,.8);


    box-shadow:


    0 20px 45px rgba(15,23,42,.08);


}



.hero-datos strong{


    display:block;


    font-size:2rem;


    color:#2563eb;


}



.hero-datos span{


    color:#64748b;


    font-size:.9rem;


}

/* ==========================================
   IMAGEN HERO
========================================== */
.hero-imagen{
    width:79%;
    height:69%;
    margin-top:-300px;
    position:relative;
}

.imagen-glass{


    position:relative;


    padding:15px;


    border-radius:45px;


    background:


    rgba(255,255,255,.45);


    backdrop-filter:blur(25px);


    border:


    1px solid rgba(255,255,255,.8);


    box-shadow:


    0 40px 90px rgba(15,23,42,.15);


}





.imagen-glass img{


    width:100%;


    height:500px;


    object-fit:cover;


    border-radius:35px;


}






/* LOGO FLOTANTE */


.logo-flotante{


    position:absolute;


    bottom:35px;


    left:-35px;


    width:90px;


    height:90px;


    border-radius:30px;


    background:


    rgba(255,255,255,.8);


    backdrop-filter:blur(20px);


    display:flex;


    align-items:center;


    justify-content:center;


    box-shadow:


    0 20px 50px rgba(15,23,42,.15);


}



.logo-flotante img{


    width:65%;


    height:65%;


    object-fit:contain;


}






/* CIRCULOS DECORATIVOS */


.hero-circulo{


    position:absolute;


    border-radius:50%;


    z-index:-1;


}



.circulo-a{


    width:220px;


    height:220px;


    background:#06b6d4;


    opacity:.18;


    filter:blur(30px);


    right:-80px;


    top:-60px;


}



.circulo-b{


    width:180px;


    height:180px;


    background:#7c3aed;


    opacity:.15;


    filter:blur(35px);


    left:-60px;


    bottom:-50px;


}






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


.menu-toggle{


    display:none;


    border:none;


    background:none;


}



.menu-toggle span{


    display:block;


    width:28px;


    height:3px;


    margin:6px;


    background:#0f172a;


    border-radius:10px;


}







/* ==========================================
   TABLET
========================================== */


@media(max-width:1000px){


.hero{


    grid-template-columns:1fr;


    text-align:center;


}



.hero p{


    margin:auto;

    margin-bottom:40px;


}



.hero-botones,
.hero-datos{


    justify-content:center;


}



.menu{


    display:none;


}



.menu-toggle{


    display:block;


}


.hero-imagen{


    max-width:600px;

    margin:auto;


}



}







/* ==========================================
   MOVIL
========================================== */


@media(max-width:600px){


.header{


    min-height:auto;


}



.navbar{


    padding:12px 18px;


}



.logo span{


    display:none;


}



.hero{


    padding-top:60px;


}



.hero h1{


    font-size:2.5rem;


}



.hero-botones{


    flex-direction:column;


}



.hero-datos{


    flex-direction:column;


}



.hero-datos div{


    width:100%;


}



.imagen-glass img{
    height:400px;

}



.logo-flotante{


    width:70px;

    height:70px;


}


}