@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700;800;900&display=swap');

:root{
  --persianIndigo900:#330072;
  --carolinaBlue700:#0089CA;
  --neutral900:#3C3C3C;
  --neutral600:#979797;
  --neutral300:#F0F0F0;
  --neutral100:#FAFAFA;
  --neutral50:#FFFFFF;
}

/* --- Reset (mantém o visual do build original) --- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;font-family:Exo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html,body{height:100%}
body{line-height:1.5;background-color:var(--neutral100)}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}

/* --- Layout --- */
.wrapper{
  height:100%;
  width:100%;
  overflow:auto;
  padding:40px 100px;
}

.container{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{display:flex}

.socials{display:flex;gap:12px}
.socials img{cursor:pointer}

.cards{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:20px;
  margin-top:32px;
}

.card{
  position:relative;
  height:340px;
  width:295px;
  border-radius:8px;
  color:var(--neutral300);
  padding:18px;
  cursor:pointer;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  transition:background .3s ease;
  cursor:pointer;
}

.card-img{transition:transform .3s ease;z-index:5;height:230px;width:190px}

.card:hover .card-description{display:block;text-align:justify}
.card:hover .card-img{transform:scale(1.5)}

.card-title{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  padding:18px;
  z-index:8;
}

.card-title h3{max-width:240px;font-size:1.17em;font-weight:600}

.navigate-btn{
  display:flex;
  position:absolute;
  right:18px;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  border-radius:8px;
  padding:8px;
  z-index:11;
  width:36px;
  height:36px;
}

.card-even{background:radial-gradient(#8753d8,#602dae);transition:background .3s ease}
.card-even:hover::before{background:linear-gradient(to bottom,#8753d800,#511ba8);z-index:8}
.card-even .navigate-btn{background-color:var(--carolinaBlue700)}

.card-odd{background:radial-gradient(#6cc4ed,#0089ca);transition:background .3s ease}
.card-odd:hover::before{background:linear-gradient(to bottom,#6cc4ed00,#0089ca);z-index:8}
.card-odd .navigate-btn{background-color:var(--persianIndigo900)}

.card-description{
  display:none;
  position:absolute;
  bottom:0;
  margin-bottom:16px;
  font-size:12px;
  padding:0 16px 0 0;
  z-index:10;
}

.card-img-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:32px;
}

.card-coming-soon{
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-content:center;
  align-items:center;
}

.footer{
  width:100%;
  color:var(--neutral600);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 0;
}

/* --- Responsivo (igual ao original) --- */
@media (max-width:1060px){
  .wrapper{padding:40px 20px}
  .header{flex-direction:column}
  .cards{align-items:center;justify-content:center}
}

@media (max-width:620px){
  .logo{margin-bottom:20px}
  .logo img{max-width:180px;max-height:60px}
}

@media (max-width:420px){
  .logo{margin-bottom:20px}
  .logo img{max-width:140px;max-height:50px}
}