/* ==========================================================
   AREAS DE PRACTICA
   ========================================================== */

/* ---------- ÁREAS DE PRÁCTICA ---------- */
.practice{background:var(--paper-dim);}
.area{
  border-top:1px solid var(--rule);
  padding:44px 22px 44px 0;
  display:grid; grid-template-columns:280px 1fr; gap:48px;
  position:relative;
  transition:background-color var(--t-hover) ease;
}
.area::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-flip);
}
.area:hover{background:rgba(19,41,75,0.028);}
.area:hover::after{transform:scaleX(1);}
.area:last-child{border-bottom:1px solid var(--rule);}
.area-head{display:flex; gap:18px; align-items:flex-start; padding-left:22px;}
.area-mark{
  font-family:'Libre Baskerville', serif; font-style:italic; font-size:15px;
  color:var(--brass); flex-shrink:0; padding-top:3px;
  transition:transform var(--t-hover) var(--ease-flip);
}
.area:hover .area-mark{transform:translateX(4px);}
.area-head h3{font-size:22px; max-width:220px;}
.area-body p{color:var(--slate); max-width:560px; margin:0 0 20px; font-size:15px;}
.area-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 32px;
  list-style:none; margin:0; padding:0;
}
.area-list li{
  font-size:13.5px; color:var(--ink); padding-left:16px; position:relative;
}
.area-list li::before{
  content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--brass);
  transition:width var(--t-hover) var(--ease-flip);
}
.area:hover .area-list li::before{width:11px;}
@media (max-width:820px){
  .area{grid-template-columns:1fr; gap:18px; padding-right:0;}
  .area-head{padding-left:0;}
  .area-list{grid-template-columns:1fr;}
}