.guides-hero{
height:100vh;
min-height:800px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(
180deg,
rgba(5,8,20,.15),
#050814
),
url("/img/fondofinalPA.png");
background-size:cover;
background-position:center;
}

.guides-hero:after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:280px;
background:linear-gradient(
transparent,
#050814
);
}

.guides-hero-content{
position:relative;
z-index:2;
max-width:1000px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
padding:20px;
}

.guides-title{
font-family:"Orbitron",sans-serif;
font-size:120px;
font-weight:1000;
letter-spacing:-4px;
background:linear-gradient(
90deg,
#ffffff,
#64dcff,
#9b7bff
);
-webkit-background-clip:text;
color:transparent;
opacity:0;
animation:heroTitle .8s ease forwards;
}

.guides-description{
margin-top:25px;
padding:25px 35px;
max-width:750px;
border-radius:24px;
position:relative;
background:linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.18),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 60px rgba(0,0,0,.45);
backdrop-filter:blur(25px);
color:#e4ebff;
font-size:20px;
font-weight:500;
line-height:1.6;
opacity:0;
animation:heroDescription .8s ease .2s forwards;
}

.guides-description:before,
.guides-description:after{
content:"";
position:absolute;
top:25px;
bottom:25px;
width:2px;
background:linear-gradient(
180deg,
transparent,
#64dcff,
#52ffe0,
transparent
);
}

.guides-description:before{
left:0;
}

.guides-description:after{
right:0;
}

@keyframes heroTitle{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes heroDescription{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.guides-section{
padding:100px 40px 220px;
background:#050814;
}

.guides-search{
max-width:950px;
margin:0 auto 60px;
}

.search-box{
height:65px;
display:flex;
align-items:center;
gap:15px;
padding:0 25px;
border-radius:22px;
background:linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.18),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 60px rgba(0,0,0,.45);
backdrop-filter:blur(25px);
}

.search-box svg{
width:25px;
height:25px;
color:#64dcff;
flex-shrink:0;
}

.search-box input{
width:100%;
height:100%;
background:none;
border:none;
outline:none;
color:white;
font-size:17px;
font-weight:500;
}

.search-box input::placeholder{
color:#9ba8c7;
}

.guides-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.guide-card{
position:relative;
overflow:hidden;
border-radius:30px;
cursor:pointer;
text-decoration:none;
background:
linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.05)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.15),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 60px rgba(0,0,0,.45);
backdrop-filter:blur(20px);
transition:.35s;
}

.guide-card:hover{
transform:translateY(-8px);
border-color:#64dcff;
box-shadow:
0 0 35px rgba(100,220,255,.25),
0 30px 60px rgba(0,0,0,.5);
}

.guide-card img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}

.guide-card:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:150px;
background:linear-gradient(
transparent,
#050814
);
z-index:1;
}

.guide-card-content{
position:relative;
z-index:2;
padding:25px;
margin-top:-25px;
}

.guide-brand{
display:block;
font-family:"Orbitron",sans-serif;
font-size:14px;
font-weight:800;
letter-spacing:1px;
color:#64dcff;
margin-bottom:12px;
}

.guide-card h3{
font-family:"Orbitron",sans-serif;
font-size:24px;
font-weight:900;
color:#fff;
margin-bottom:15px;
transition:.3s;
}

.guide-card:hover h3{
color:#64dcff;
}

.guide-card p{
font-size:15px;
font-weight:500;
line-height:1.7;
color:#bcc7e5;
min-height:55px;
}

.guide-footer{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:30px;
}

.guide-read{
font-family:"Orbitron",sans-serif;
font-size:14px;
font-weight:900;
color:#64dcff;
transition:.3s;
}

.guide-card:hover .guide-read{
transform:translateX(6px);
color:#52ffe0;
}

.guide-date{
font-size:13px;
font-weight:600;
color:#8793b5;
}

@media(max-width:1000px){

.guides-title{
font-size:70px;
}

.guides-description{
font-size:15px;
padding:22px;
}

.guides-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.guides-hero{
min-height:600px;
}

.guides-title{
font-size:45px;
}

.guides-description{
font-size:15px;
padding:22px;
}

.guides-section{
padding:70px 20px 100px;
}

.guides-grid{
grid-template-columns:1fr;
}

.search-box{
height:58px;
padding:0 18px;
}

.search-box input{
font-size:15px;
}

.guide-card img{
height:220px;
}

.guide-card-content{
padding:22px;
}

.guide-card h3{
font-size:21px;
}

.guide-card p{
font-size:14px;
}

}