body{
margin:0;
font-family: 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #020b18, #061a2e);
color:white;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 40px;
background:rgba(5,10,20,0.8);
backdrop-filter: blur(12px);
border-bottom:1px solid rgba(0,229,255,0.3);
position:sticky;
top:0;
z-index:100;
}

.logo img{
height:65px;
}

.menu{
display:flex;
gap:30px;
list-style:none;
}

.menu a{
text-decoration:none;
color:white;
transition:0.3s;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0%;
height:2px;
background:#00e5ff;
transition:0.3s;
}

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


/* FAQ */

.faq-container{
max-width:900px;
margin:auto;
padding:100px 20px;
text-align:center;
}

.faq-container h1{
font-size:42px;
margin-bottom:10px;
}

.faq-container p{
color:#9fb3c8;
margin-bottom:50px;
}

/* TARJETAS */

.faq-item{
margin-bottom:20px;
border-radius:15px;
overflow:hidden;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
border:1px solid rgba(0,229,255,0.2);
transition:0.3s;
}

.faq-item:hover{
transform: translateY(-3px);
border-color:#00e5ff;
}

/* PREGUNTA */

.faq-question{
width:100%;
text-align:left;
padding:20px;
font-size:18px;
background:transparent;
color:white;
border:none;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
}

/* ICONO + */

.faq-question::after{
content:"+";
font-size:22px;
color:#00e5ff;
transition:0.3s;
}

.faq-item.active .faq-question::after{
content:"−";
}

/* RESPUESTA */

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
}

.faq-answer p{
padding:0 20px 20px 20px;
margin:0;
color:#c7d5e0;
}

/* ACTIVO */

.faq-item.active .faq-answer{
max-height:200px;
}