/* Academia ETERNI · Mis cursos premium V47.1
   Inspiración: fluidez de Apple TV, sin copiar su interfaz.
*/
:root{
  --mc-bg:#f7f2ed;
  --mc-plum:#43284b;
  --mc-plum-2:#5c4064;
  --mc-gold:#b58b4d;
  --mc-muted:#756c78;
  --mc-line:rgba(67,40,75,.10);
  --mc-shadow:0 20px 55px rgba(45,28,51,.08);
}

body[data-student-page="courses"]{
  background:
    radial-gradient(circle at 82% 5%,rgba(181,139,77,.09),transparent 26rem),
    linear-gradient(180deg,#fbf8f4 0%,var(--mc-bg) 100%);
}

.courses-top{padding:44px 0 26px}
.courses-heading-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:32px;
  align-items:end;
}
.courses-heading-copy{max-width:760px}
.courses-heading-copy h1{
  margin:7px 0 10px;
  color:var(--mc-plum);
  font:600 clamp(52px,7vw,78px)/.92 "Cormorant Garamond",serif;
}
.courses-heading-copy p{
  max-width:700px;
  margin:0;
  color:var(--mc-muted);
  font-size:15px;
  line-height:1.7;
}
.courses-explore-link{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 18px;
  align-items:center;
  padding:20px 22px;
  border:1px solid var(--mc-line);
  border-radius:24px;
  background:rgba(255,253,250,.82);
  box-shadow:0 14px 38px rgba(45,28,51,.06);
}
.courses-explore-link span{
  grid-column:1/-1;
  color:var(--mc-gold);
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.courses-explore-link strong{
  color:var(--mc-plum);
  font-size:13px;
}
.courses-explore-link b{
  color:var(--mc-plum);
  font-size:22px;
  font-weight:500;
}

.courses-metrics-line{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:28px;
  padding:14px 18px;
  width:max-content;
  max-width:100%;
  border:1px solid var(--mc-line);
  border-radius:999px;
  background:rgba(255,253,250,.78);
  box-shadow:0 10px 28px rgba(45,28,51,.05);
}
.courses-metrics-line>div{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
.courses-metrics-line strong{
  color:var(--mc-plum);
  font:700 23px/1 "Cormorant Garamond",serif;
}
.courses-metrics-line span{
  color:#786f7a;
  font-size:11px;
  white-space:nowrap;
}
.courses-metrics-line i{
  width:1px;
  height:24px;
  background:rgba(67,40,75,.10);
}

.courses-content{padding:18px 0 74px}
.courses-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:15px;
}
.courses-section-title h2{
  margin:5px 0 0;
  color:var(--mc-plum);
  font:600 clamp(38px,5vw,52px)/.96 "Cormorant Garamond",serif;
}
.courses-section-title>p{
  max-width:370px;
  margin:0;
  color:#847a85;
  font-size:12px;
  text-align:right;
}

.tv-course-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(390px, 42%);
  gap:20px;
  overflow-x:auto;
  padding:10px 4px 18px;
  scroll-snap-type:x mandatory;
  scroll-padding-left:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(67,40,75,.20) transparent;
}
.tv-course-rail::-webkit-scrollbar{height:9px}
.tv-course-rail::-webkit-scrollbar-track{background:transparent}
.tv-course-rail::-webkit-scrollbar-thumb{
  background:rgba(67,40,75,.16);
  border-radius:999px;
}
.tv-course-rail .media-card[hidden],
.tv-course-rail .media-card.entitlement-locked{
  display:none!important;
}
.tv-course-rail .media-card{
  position:relative;
  display:block;
  min-height:310px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:#33223a;
  box-shadow:var(--mc-shadow);
  scroll-snap-align:start;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  isolation:isolate;
}
.tv-course-rail .media-card:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(181,139,77,.30);
  box-shadow:0 28px 72px rgba(39,24,44,.16);
}
.tv-course-rail .media-card>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  object-fit:cover;
  transition:transform .4s ease;
}
.tv-course-rail .media-card:hover>img{transform:scale(1.035)}
.tv-course-rail .media-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(35,21,41,.04) 20%,rgba(35,21,41,.18) 48%,rgba(35,21,41,.90) 100%),
    linear-gradient(90deg,rgba(35,21,41,.45),transparent 56%);
}
.tv-course-rail .media-card-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:310px;
  padding:24px;
  color:#fff;
}
.tv-course-rail .media-card .status{
  align-self:flex-start;
  margin-bottom:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#f4ddaa;
  background:rgba(54,34,61,.48);
  backdrop-filter:blur(9px);
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
}
.tv-course-rail .media-card h3{
  max-width:90%;
  margin:0;
  color:#fff;
  font:600 clamp(30px,3vw,42px)/.94 "Cormorant Garamond",serif;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.tv-course-rail .media-card p{
  max-width:92%;
  margin:8px 0 13px;
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.5;
}
.tv-course-rail .progress{
  width:min(260px,72%);
  height:5px;
  margin:0 0 7px;
  background:rgba(255,255,255,.22);
}
.tv-course-rail .progress span{
  background:linear-gradient(90deg,#d2a85c,#f0dfb4);
}
.tv-course-rail .actual-progress-label{
  color:rgba(255,255,255,.77);
  font-size:11px;
}
.tv-course-rail .media-card a{
  position:absolute;
  right:20px;
  bottom:20px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin:0;
  border-radius:50%;
  color:var(--mc-plum);
  background:#fff;
  box-shadow:0 12px 30px rgba(15,8,18,.24);
  font-size:0;
}
.tv-course-rail .media-card a::after{
  content:"→";
  font-size:20px;
  line-height:1;
}
.tv-course-rail .media-card a:hover{
  transform:translateX(2px);
  background:#f7ead3;
}
.tv-course-rail .featured-card{
  border-color:rgba(181,139,77,.32);
}
.tv-course-rail .featured-card::after{
  content:"Continuar";
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  padding:8px 11px;
  border-radius:999px;
  color:#fff;
  background:rgba(67,40,75,.74);
  backdrop-filter:blur(9px);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.courses-bottom-callout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  align-items:center;
  margin-top:38px;
  padding:30px 32px;
  border:1px solid rgba(67,40,75,.09);
  border-radius:30px;
  background:
    radial-gradient(circle at 90% 10%,rgba(181,139,77,.12),transparent 18rem),
    linear-gradient(135deg,#fffdfa,#f0e8e2);
  box-shadow:0 18px 48px rgba(45,28,51,.06);
}
.courses-bottom-callout h2{
  margin:5px 0 8px;
  color:var(--mc-plum);
  font:600 39px/1 "Cormorant Garamond",serif;
}
.courses-bottom-callout p{
  max-width:660px;
  margin:0;
  color:#766c78;
  line-height:1.6;
}
.courses-bottom-callout>a{
  padding:15px 20px;
  border-radius:16px;
  color:#fff;
  background:var(--mc-plum);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

#studentNoCourses{margin-top:20px}

@media(max-width:1100px){
  .courses-heading-row{grid-template-columns:1fr}
  .courses-explore-link{width:min(330px,100%)}
  .tv-course-rail{grid-auto-columns:minmax(350px,58%)}
}
@media(max-width:760px){
  .courses-top{padding-top:28px}
  .courses-heading-copy h1{font-size:55px}
  .courses-metrics-line{
    width:100%;
    justify-content:space-between;
    border-radius:22px;
  }
  .courses-metrics-line>div{
    display:grid;
    gap:4px;
  }
  .courses-metrics-line span{white-space:normal}
  .courses-section-title{
    align-items:flex-start;
    flex-direction:column;
  }
  .courses-section-title>p{text-align:left}
  .tv-course-rail{grid-auto-columns:minmax(300px,86%)}
  .courses-bottom-callout{grid-template-columns:1fr}
  .courses-bottom-callout>a{justify-self:start}
}
@media(max-width:520px){
  .courses-metrics-line{
    gap:10px;
    padding:13px 14px;
  }
  .courses-metrics-line strong{font-size:20px}
  .courses-metrics-line span{font-size:9px}
  .tv-course-rail{grid-auto-columns:92%}
  .tv-course-rail .media-card,
  .tv-course-rail .media-card-body{min-height:280px}
  .tv-course-rail .media-card h3{font-size:34px}
}