body{

font-family:"Inter",sans-serif;

background:
radial-gradient(circle at 20% 20%, rgba(99,102,241,0.15), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15), transparent 40%),
#0f172a;

color:white;
min-height:100vh;

}

/* HEADER */

.header h1{
font-weight:700;
letter-spacing:-0.02em;
margin-bottom:8px;
}

.header p{
color:#94a3b8;
margin-bottom:40px;
}

/* CARD */

.page-card{

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

padding:28px;

border-radius:14px;

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(8px);

transition:all .35s ease;

height:100%;

}

.page-card:hover{

transform:translateY(-6px);

border-color:rgba(99,102,241,0.4);

box-shadow:
0 20px 40px rgba(0,0,0,0.5),
0 0 25px rgba(99,102,241,0.2);

}

/* TEXT */

.card-content{
flex:1;
}

.card-content h2{
font-size:1.15rem;
font-weight:600;
margin-bottom:8px;
min-height:40px;
}

.card-content p{
color:#94a3b8;
font-size:0.9rem;
margin-bottom:20px;
min-height:40px;
}

/* BUTTON */

.btn-page{

border:1px solid rgba(255,255,255,0.15);

background:rgba(255,255,255,0.02);

border-radius:8px;

padding:10px 18px;

color:white;

font-weight:500;

transition:all .25s ease;

text-decoration:none;

display:inline-block;

}

.btn-page:hover{

background:linear-gradient(90deg,#6366f1,#3b82f6);

border-color:transparent;

transform:translateY(-2px);

box-shadow:0 0 18px rgba(99,102,241,0.5);

color:white;

}

/* PREVIEW */

.card-preview{

width:260px;
flex-shrink:0;

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

}

.card-preview img{

width:100%;
height:160px;

object-fit:cover;

border-radius:10px;

border:1px solid rgba(255,255,255,0.15);

box-shadow:0 15px 30px rgba(0,0,0,0.6);

transition:transform .3s ease;

}

.page-card:hover img{
transform:scale(1.04);
}

/* ================= */
/* RESPONSIVIDADE */
/* ================= */

/* telas médias (tablet) */

@media(max-width:1200px){

.page-card{

flex-direction:column;
text-align:center;

}

.card-preview{

width:100%;
max-width:340px;

}

.card-preview img{

height:auto;

}

}

/* celular */

@media(max-width:768px){

.header h1{
font-size:1.6rem;
}

.page-card{

padding:22px;

}

.card-preview{

max-width:100%;

}

}

main{
position:relative;
z-index:2;
}