: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(1180px,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;

  transition:.25s ease;

}



.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;

}



.section{

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

  background:var(--panel);

}





/* HERO */



.manual-hero{

  min-height:64vh;

  padding-top:180px;

  padding-bottom:90px;

  display:flex;

  align-items:end;

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



  background:

    radial-gradient(circle at 75% 40%,#0000 0,#050504 62%),

    linear-gradient(90deg,#050504 0%,#050504dd 45%,#05050433 100%),

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

}



.manual-hero h1{

  font-size:clamp(58px,9vw,120px);

  line-height:.9;

  margin:18px 0 30px;

}



.manual-hero p{

  max-width:680px;

  font-size:17px;

  line-height:1.9;

}



/* SECTION */



.manual-section{

  padding:90px 0;

}



/* HEAD */



.manual-head{

  display:flex;

  justify-content:space-between;

  align-items:end;

  gap:40px;

  margin-bottom:44px;

}



.manual-head h2{

  font-size:48px;

  margin:10px 0 0;

}



.manual-head p{

  max-width:360px;

}



/* GRID */



.manual-grid{

  display:grid;

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

  gap:18px;

}



/* CARD */



.manual-card{

  min-height:170px;

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

  padding:26px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;



  background:

    linear-gradient(145deg,#11100e,#070706);



  transition:

    transform .25s ease,

    border-color .25s ease,

    background .25s ease;

}



.manual-card:hover{

  transform:translateY(-6px);



  border-color:var(--gold);



  background:

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

}



.manual-card span{

  color:var(--gold);



  font-size:11px;

  font-weight:800;

  letter-spacing:.22em;

  text-transform:uppercase;

}



.manual-card strong{

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

  font-size:24px;

  line-height:1.15;

  font-weight:400;

}



.manual-card em{

  color:var(--muted);

  font-size:12px;

  font-style:normal;

  text-transform:uppercase;

  letter-spacing:.16em;

}







/* RESPONSIVE */



@media(max-width:1100px){



  .manual-grid{

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

  }



}



@media(max-width:850px){



  



  .manual-head{

    flex-direction:column;

    align-items:start;

  }



  .manual-grid{

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

  }



  .manual-hero{

    min-height:560px;

    padding-top:140px;

  }



  .manual-hero h1{

    font-size:74px;

  }



}



@media(max-width:650px){



  .manual-grid{

    grid-template-columns:1fr;

  }



  .manual-hero h1{

    font-size:58px;

  }



  .manual-head h2{

    font-size:38px;

  }



  .wrap{

    width:min(100% - 32px,1180px);

  }







}