/* Bencefalo v84 — Taller Brujo course catalogue + shared footer */

/* ===== Course catalogue ===== */
.courses-section{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(164,126,255,.10);
  background:
    radial-gradient(42rem 30rem at 100% 0%,rgba(91,33,182,.10),transparent 66%),
    linear-gradient(180deg,rgba(3,4,12,.96),rgba(7,5,12,.98));
}
.courses-section .section-title{margin-bottom:12px!important}
.courses-intro{
  max-width:690px!important;
  margin:0 0 34px!important;
  color:#aaa5b7!important;
  font-family:var(--font-body)!important;
  font-size:16px!important;
  line-height:1.68!important;
}
.course-list{
  display:grid;
  gap:18px;
}
.course-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:34px;
  padding:30px 32px;
  overflow:hidden;
  border:1px solid rgba(164,126,255,.18);
  border-radius:24px;
  background:
    radial-gradient(32rem 22rem at 0% 10%,rgba(88,34,142,.17),transparent 67%),
    linear-gradient(145deg,rgba(18,15,38,.96),rgba(5,6,14,.985));
  box-shadow:0 18px 58px rgba(0,0,0,.16);
}
.course-card::before{
  content:"";
  position:absolute;
  left:0;top:22px;bottom:22px;width:2px;
  background:linear-gradient(180deg,transparent,#8b5cf6,transparent);
  opacity:.45;
}
.course-card.is-featured{
  border-color:rgba(230,198,112,.30);
  background:
    radial-gradient(34rem 25rem at 0% 0%,rgba(126,61,180,.24),transparent 67%),
    radial-gradient(22rem 18rem at 100% 100%,rgba(146,92,25,.10),transparent 72%),
    linear-gradient(145deg,rgba(24,16,40,.98),rgba(6,6,15,.99));
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 0 0 1px rgba(245,221,160,.035);
}
.course-card.is-featured::before{
  width:3px;
  background:linear-gradient(180deg,transparent,#f0d58d 32%,#a855f7 70%,transparent);
  opacity:.85;
}
.course-kicker-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.course-pill{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:5px 9px;
  border:1px solid rgba(164,126,255,.20);
  border-radius:999px;
  background:rgba(124,58,237,.07);
  color:#c8a5f6;
  font-family:var(--font-ui)!important;
  font-size:9px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.is-featured .course-pill.primary{
  color:#f1d98f;
  border-color:rgba(241,217,143,.28);
  background:rgba(241,217,143,.055);
}
.course-card h3{
  margin:0 0 8px!important;
  color:#fff!important;
  font-family:var(--font-display)!important;
  font-size:34px!important;
  line-height:1.04!important;
  font-weight:400!important;
}
.course-slogan{
  margin:0 0 16px!important;
  color:#d8c7e8!important;
  font-family:var(--font-body)!important;
  font-size:17px!important;
  line-height:1.45!important;
  font-style:italic;
}
.is-featured .course-slogan{color:#efdda9!important}
.course-description{
  margin:0!important;
  max-width:58ch;
  color:#aaa5b7!important;
  font-family:var(--font-body)!important;
  font-size:15px!important;
  line-height:1.68!important;
}
.course-details{
  display:grid;
  align-content:start;
  gap:18px;
}
.course-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.course-fact{
  min-height:65px;
  padding:11px 13px;
  border:1px solid rgba(164,126,255,.11);
  border-radius:13px;
  background:rgba(255,255,255,.018);
}
.course-fact b,
.course-topic-title{
  display:block;
  margin-bottom:4px;
  color:#b995e7;
  font-family:var(--font-ui)!important;
  font-size:9px!important;
  line-height:1.25!important;
  font-weight:600!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.is-featured .course-fact b,
.is-featured .course-topic-title{color:#ddc678}
.course-fact span{
  display:block;
  color:#d3cdd9;
  font-family:var(--font-ui)!important;
  font-size:12px!important;
  line-height:1.48!important;
  font-weight:400!important;
}
.course-topic-box{
  padding:14px 15px;
  border:1px solid rgba(164,126,255,.11);
  border-radius:14px;
  background:rgba(255,255,255,.014);
}
.course-topics{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.course-topic{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border:1px solid rgba(164,126,255,.12);
  border-radius:999px;
  color:#aaa5b7;
  background:rgba(124,58,237,.035);
  font-family:var(--font-ui)!important;
  font-size:10px!important;
  line-height:1.25!important;
}
.is-featured .course-topic{
  border-color:rgba(241,217,143,.13);
  background:rgba(241,217,143,.025);
}
.course-coming{
  color:#8f899b!important;
  font-family:var(--font-ui)!important;
  font-size:12px!important;
  line-height:1.5!important;
}

/* ===== Shared Home footer on Taller ===== */
.site-footer{
  margin-top:42px;
  padding:54px 0 22px!important;
  border-top:1px solid rgba(164,126,255,.16)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(105,46,180,.11),transparent 27%),
    linear-gradient(180deg,#050510 0%,#030309 100%)!important;
}
.footer-grid{
  display:grid!important;
  grid-template-columns:minmax(280px,1.7fr) repeat(3,minmax(135px,.72fr));
  gap:38px!important;
  align-items:start;
}
.footer-brand{max-width:420px}
.footer-brand-link{text-decoration:none}
.footer-brand-title{
  display:inline-block;
  color:#fff;
  font-family:var(--font-display)!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:.035em;
}
.footer-brand p{
  margin:12px 0 20px;
  max-width:390px;
  color:#9691a6!important;
  font-family:var(--font-body)!important;
  font-size:14px!important;
  line-height:1.65!important;
}
.footer-socials{display:flex;flex-wrap:wrap;gap:10px!important}
.footer-socials a{
  width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(164,126,255,.24)!important;
  border-radius:50%!important;
  background:rgba(13,12,27,.78)!important;
  color:#d9d3e6!important;
  text-decoration:none!important;
  transition:.16s ease;
}
.footer-socials a svg{width:19px;height:19px;fill:currentColor;display:block}
.footer-socials a:hover{
  color:#d7a6ff!important;
  border-color:rgba(190,122,255,.58)!important;
  background:rgba(92,43,151,.20)!important;
}
.footer-col{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
}
.footer-col>strong{
  color:#f2eef9!important;
  font-family:var(--font-ui)!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  margin-bottom:4px!important;
}
.footer-col a{
  color:#918b9e!important;
  font-family:var(--font-ui)!important;
  font-size:12px!important;
  line-height:1.5!important;
  font-weight:400!important;
  text-decoration:none!important;
}
.footer-col a:hover{color:#c995ff!important;text-decoration:none!important}
.footer-bottom{
  margin-top:40px!important;
  padding-top:18px!important;
  border-top:1px solid rgba(164,126,255,.10)!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:18px!important;
  color:#6f6a79!important;
  font-family:var(--font-ui)!important;
  font-size:11px!important;
  line-height:1.5!important;
}

@media(max-width:900px){
  .course-card{grid-template-columns:1fr;gap:24px;padding:27px}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr!important;gap:28px!important}
  .footer-brand{grid-column:1/-1;max-width:580px}
}
@media(max-width:620px){
  .courses-section{padding-top:58px!important}
  .courses-intro{font-size:15px!important;margin-bottom:27px!important}
  .course-card{padding:23px 20px;border-radius:20px;gap:20px}
  .course-card h3{font-size:30px!important}
  .course-slogan{font-size:16px!important}
  .course-description{font-size:14px!important;line-height:1.64!important}
  .course-facts{grid-template-columns:1fr}
  .course-fact{min-height:0}
  .course-topic{font-size:9.5px!important}
  .site-footer{padding:42px 0 20px!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .footer-brand{grid-column:1/-1}
  .footer-brand-title{font-size:27px!important}
  .footer-socials{gap:7px!important}
  .footer-socials a{width:38px!important;height:38px!important;min-height:38px!important}
  .footer-socials a svg{width:18px;height:18px}
  .footer-bottom{flex-direction:column!important;margin-top:30px!important}
}