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

body{
/*background:#07131f;*/
background:#483D8B;
color:white;
overflow-x:hidden;
}

/* NAV */
nav{
position:fixed;
width:100%;
top:0;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;
z-index:999;
background:rgba(5,20,35,.35);
backdrop-filter: blur(15px);
}

.logo{
font-size:30px;
font-weight:bold;
color:#00ffd0;
}

nav ul{
display:flex;
gap:35px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
transition:.3s;
}

nav a:hover{
color:#00ffd0;
}

/* HERO */
.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:120px 10%;
background:
/*
radial-gradient(circle at top left,#00ffd055,transparent 40%),
linear-gradient(120deg,#07131f,#081f38);
*/
radial-gradient(circle at top left, #00ffd055, transparent 40%), linear-gradient(120deg, #181236, #2d235c)
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.hero h1{
font-size:65px;
line-height:1.1;
margin-bottom:25px;
}

.hero span{
color:#00ffd0;
}

.hero p{
font-size:20px;
opacity:.8;
line-height:1.7;
margin-bottom:35px;
}

.btn{
padding:18px 45px;
/*background:#00ffd0;  verde agua */
background:#FFD700;
color:#05161f; /* negro verde*/
border:none;
border-radius:40px;
font-weight:bold;
cursor:pointer;
transition:.4s;
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 10px 30px #00ffd070;
}

/* mockup */
.mockup{
height:500px;
border-radius:30px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
box-shadow:0 20px 70px rgba(0,0,0,.4);
display:flex;
justify-content:center;
align-items:center;
animation:float 4s ease-in-out infinite;
}

.mockup img{
width:90%;
border-radius:20px;
}

@keyframes float{
50%{
transform:translateY(-20px);
}
}

/* FEATURES */
section{
padding:100px 10%;
}

.title{
text-align:center;
font-size:50px;
margin-bottom:70px;
}

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

.card{
padding:40px;
border-radius:25px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(20px);
transition:.4s;
transform:translateY(80px);
opacity:0;
}

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

.card:hover{
transform:translateY(-12px);
}

.card h3{
margin:20px 0;
/* color:#00ffd0; verde agua */
color:#FFD700;
}

/* stats */
.stats{
display:flex;
justify-content:center;
gap:70px;
flex-wrap:wrap;
text-align:center;
}

.stat h2{
font-size:65px;
/* color:#00ffd0; verde agua */
color:#FFD700;
}

.stat p{
margin-top:15px;
}

/* testimonial */
.testimonial{
max-width:800px;
margin:auto;
text-align:center;
background:rgba(255,255,255,.05);
padding:60px;
border-radius:30px;
}

/* CTA */
.cta{
text-align:center;
background:linear-gradient(135deg,#00ffd022,#00a2ff22);
border-radius:35px;
}

footer{
text-align:center;
padding:35px;
opacity:.7;
}


    /* responsive */
    @media(max-width:900px){
    
        .hero-grid{
         grid-template-columns:1fr;
         text-align:center;
        }
        
        .hero h1{
         font-size:48px;
        }
    
    }




    .imagen-transparente {
    
        /*opacity: 0.5;*/ /* 50% de transparencia */
        opacity: 1.0;
        transition: opacity 0.3s ease; /* Efecto suave al pasar el ratón */
    }
    
    /* Opcional: la imagen se vuelve totalmente visible al pasar el ratón por encima */
    .imagen-transparente:hover {
        opacity: 1.0; 
    }
 
    

    
        @import url('https://googleapis.com');

        .texto-brush {
            font-family: 'Pacifico', cursive;
            font-size: 14px; /* Tamaño 12 */
            color: #00693E;
        }