:root{

  --bg:#050504;

  --panel:#0a0908;

  --line:rgba(255,255,255,.12);

  --text:#f2eee8;

  --muted:#a9a19a;

  --gold:#b68a46;

  --gold2:#dfb978

}



*{

  box-sizing:border-box

}



html{

  scroll-behavior:smooth

}



body{

  margin:0;

  background:var(--bg);

  color:var(--text);

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

  letter-spacing:.02em

}



a{

  color:inherit;

  text-decoration:none

}



.serif{

  font-family:Georgia,'Times New Roman',serif;

  font-weight:400;

  letter-spacing:-.03em

}



.wrap{

  width:min(1120px,calc(100% - 48px));

  margin:auto

}



.btn{

  display:inline-flex;

  align-items:center;

  gap:18px;

  border:1px solid var(--line);

  padding:16px 24px;

  text-transform:uppercase;

  font-size:12px;

  font-weight:700;

  letter-spacing:.16em

}



.btn:hover{

  border-color:var(--gold);

  color:var(--gold2)

}



.eyebrow{

  color:var(--gold);

  font-size:12px;

  font-weight:800;

  letter-spacing:.22em;

  text-transform:uppercase

}



p{

  color:var(--muted);

  line-height:1.7

}



.hero{

  min-height:92vh;

  background:

    radial-gradient(circle at 65% 58%,#0000 0,#050504 62%),

    linear-gradient(90deg,#050504 0%,#050504cc 30%,#05050422 60%),

    url('assets/statua.png') center right/contain no-repeat;



  display:flex;

  align-items:center;

  border-bottom:1px solid var(--line)

}



.hero h1{

  font-size:clamp(46px,6vw,86px);

  line-height:.96;

  margin:0 0 28px

}



.hero p{

  text-transform:uppercase;

  letter-spacing:.25em;

  font-weight:700

}



.section{

  border-bottom:1px solid var(--line);

  background:var(--panel)

}



.intro{

  display:grid;

  grid-template-columns:1.05fr 1.2fr;

  min-height:390px

}



.intro .copy{

  padding:70px 0

}



.intro h2{

  font-size:42px;

  line-height:1;

  margin:14px 0 40px

}



.intro-img{

  background:

    linear-gradient(90deg,#0a0908 0,#0000 26%),

    url('assets/colonne.png') center/cover no-repeat

}



.features{

  display:grid;

  grid-template-columns:repeat(3,1fr)

}



.feature{

  padding:0 34px 0 0;

  border-right:1px solid var(--line)

}



.feature:last-child{

  border-right:0

}



.ico{

  font-size:34px;

  color:var(--gold);

  margin-bottom:22px

}



.feature h3{

  font-size:14px;

  text-transform:uppercase;

  letter-spacing:.16em

}



.courses{

  padding:58px 0 18px

}



.head{

  display:flex;

  justify-content:space-between;

  align-items:end;

  margin-bottom:28px

}



.head h2{

  font-size:42px;

  margin:10px 0 0

}



.grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:28px

}



.card{

  border:1px solid var(--line);

  min-height:260px;

  display:flex;

  align-items:end;

  position:relative;

  overflow:hidden

}



.card:before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(#0000001a,#050504ee);

  z-index:1

}



.card img{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  filter:saturate(.8)

}



.card .txt{

  position:relative;

  z-index:2;

  padding:24px;

  width:100%

}



.card h3{

  text-transform:uppercase;

  letter-spacing:.14em;

  font-size:14px

}



.bar{

  height:1px;

  background:var(--line);

  margin:20px 0

}



.method{

  display:grid;

  grid-template-columns:.65fr 1.35fr;

  min-height:430px

}



.method .copy{

  padding:64px 0

}



.method h2{

  font-size:44px;

  line-height:1;

  margin:12px 0 20px

}



.method-img{

  background:url('assets/metodo.png') center/cover no-repeat

}



.bottom{

  display:grid;

  grid-template-columns:1fr 1fr

}



.starts,

.contact{

  padding:58px 0

}



.starts{

  border-right:1px solid var(--line)

}



.starts h2,

.contact h2{

  font-size:40px;

  margin:10px 0 30px

}



.dates{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:26px

}



.date small{

  color:var(--gold);

  font-weight:800;

  font-size:10px;

  text-transform:uppercase

}



.date strong{

  display:block;

  font-family:Georgia,serif;

  font-size:21px;

  margin:12px 0 4px

}



.contact{

  background:

    linear-gradient(90deg,#050504 0,#050504cc 45%,#05050411),

    url('assets/colonne.png') center/cover no-repeat;



  padding-left:64px

}





.quadrants-wrap{

  padding:80px 0;

}



.quadrants-head{

  margin-bottom:40px;

}



.quadrants-head h2{

  font-size:46px;

  line-height:1;

  margin:12px 0 0;

}



.quadrants-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-top:1px solid var(--line);

  border-left:1px solid var(--line);

}



.quadrant-card{

  min-height:330px;



  padding:30px;



  border-right:1px solid var(--line);

  border-bottom:1px solid var(--line);



  background:

    linear-gradient(145deg,#0f0e0c,#070706);



  display:flex;

  flex-direction:column;



  transition:.25s ease;

}



.quadrant-card:hover{

  background:

    linear-gradient(145deg,#17130f,#080706);

}



.quadrant-card span{

  color:var(--gold);



  font-size:11px;

  font-weight:800;

  letter-spacing:.22em;

  text-transform:uppercase;



  margin-bottom:48px;

}



.quadrant-card h3{

  margin:0 0 18px;



  font-size:15px;

  text-transform:uppercase;

  letter-spacing:.16em;

}



.quadrant-card strong{

  display:block;



  font-family:Georgia,'Times New Roman',serif;

  font-size:24px;

  line-height:1.15;

  font-weight:400;



  margin-bottom:18px;

}



.quadrant-card p{

  margin:0;

  font-size:14px;

}



@media(max-width:1000px){



  .quadrants-grid{

    grid-template-columns:repeat(2,1fr);

  }



}



@media(max-width:650px){



  .quadrants-wrap{

    padding:60px 0;

  }



  .quadrants-grid{

    grid-template-columns:1fr;

  }



  .quadrant-card{

    min-height:auto;

  }



  .quadrant-card span{

    margin-bottom:34px;

  }



}





@media(max-width:850px){



  .menu{

    display:none

  }



  .hero{

    background-size:cover;

    background-position:center;

    min-height:760px

  }



  .intro,

  .method,

  .bottom{

    grid-template-columns:1fr

  }



  .intro-img,

  .method-img{

    min-height:300px

  }



  .grid,

  .features,

  .dates{

    grid-template-columns:1fr

  }



  .feature{

    border-right:0;

    border-bottom:1px solid var(--line);

    padding:28px 0

  }



  .contact{

    padding-left:0

  }



  .wrap{

    width:min(100% - 32px,1120px)

  }



}