/* Bencefalo v95 — course pages visual normalization
   Canonical fonts: Angle Fairy (display), Newsreader (editorial), Inter (UI). */

/* =========================================================
   COURSE CARDS — /taller-brujo
   ========================================================= */
.course-overview{
  position:relative!important;
  display:block!important;
  min-height:390px!important;
  overflow:hidden!important;
}
.course-overview .course-summary{
  position:static!important;
  z-index:4!important;
  width:62%!important;
  min-height:390px;
  padding:34px 34px 96px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.course-overview-art{
  position:absolute!important;
  z-index:1!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:57%!important;
  min-height:0!important;
  overflow:hidden!important;
  border:0!important;
}
.course-overview-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.72) 26%,#000 44%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.72) 26%,#000 44%,#000 100%);
}
.course-overview-art::before{
  z-index:2!important;
  background:
    linear-gradient(90deg,transparent 0%,rgba(5,5,12,.12) 35%,rgba(5,5,12,.02) 64%,rgba(5,5,12,.16) 100%),
    linear-gradient(180deg,rgba(4,4,10,.12),transparent 42%,rgba(4,4,10,.44))!important;
}
.course-overview-art::after{
  z-index:3!important;
  background:radial-gradient(34rem 25rem at 78% 46%,transparent 38%,rgba(4,4,11,.18) 100%)!important;
}
.course-overview .course-actions{
  position:absolute!important;
  z-index:7!important;
  right:28px!important;
  bottom:26px!important;
  margin:0!important;
  justify-content:flex-end!important;
}
.course-overview .course-cta{min-width:150px}
.course-overview .course-description{
  max-width:56ch!important;
}
.sendero-art .course-overview-image{object-position:center 52%!important}
.lab-art .course-overview-image{object-position:center 49%!important}
.divination-art .course-overview-image{object-position:center 48%!important}
.tarot-art .course-overview-image{object-position:center 49%!important}

/* =========================================================
   COURSE DETAIL PAGES — HERO LIKE THE MAIN TALLER HERO
   ========================================================= */
.course-detail-page{
  background:#05050c!important;
  color:#f4eff6!important;
}
.course-detail-page .course-breadcrumb{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  padding:14px 0!important;
  color:#8f8998!important;
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  line-height:1.45!important;
}
.course-detail-page .course-breadcrumb a{
  color:#a89fad!important;
  font-family:var(--font-ui)!important;
}
.course-detail-hero{
  position:relative!important;
  isolation:isolate;
  min-height:620px;
  padding:0!important;
  display:flex;
  align-items:stretch;
  overflow:hidden!important;
  border-bottom:1px solid rgba(var(--course-accent-rgb),.10)!important;
  background:#05050c!important;
}
.course-detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--course-hero-image)!important;
  background-size:cover!important;
  background-position:var(--course-hero-position,center center)!important;
  background-repeat:no-repeat!important;
  filter:saturate(.88) contrast(1.03) brightness(.76);
  transform:scale(1.008);
}
.course-detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,#05050c 0%,rgba(5,5,12,.98) 13%,rgba(5,5,12,.90) 29%,rgba(5,5,12,.68) 43%,rgba(5,5,12,.30) 58%,rgba(5,5,12,.06) 75%,rgba(5,5,12,.16) 100%),
    linear-gradient(180deg,rgba(5,5,12,.18) 0%,transparent 25%,transparent 68%,rgba(5,5,12,.42) 88%,#05050c 100%)!important;
}
.course-sendero-page{--course-hero-image:url('/assets/course-el-sendero-sagrado.png');--course-hero-position:center 52%}
.course-lab-page{--course-hero-image:url('/assets/course-laboratorio-magico.png');--course-hero-position:center 50%}
.course-divination-page{--course-hero-image:url('/assets/course-taller-adivinacion.png');--course-hero-position:center 50%}
.course-tarot-page{--course-hero-image:url('/assets/course-tarot-para-todos.png');--course-hero-position:center 50%}

.course-detail-hero-grid{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  width:min(1180px,calc(100% - 40px))!important;
  min-height:620px;
  margin:auto!important;
  padding:58px 0 112px!important;
}
.course-detail-hero-copy{
  width:min(690px,59vw);
  max-width:690px;
}
.course-detail-hero .eyebrow{
  color:var(--course-accent)!important;
  margin-bottom:16px!important;
}
.course-detail-hero h1{
  max-width:11ch!important;
  margin:0 0 16px!important;
  font-family:var(--font-display)!important;
  font-size:var(--type-display)!important;
  font-weight:400!important;
  line-height:var(--lh-display)!important;
  letter-spacing:-.02em!important;
}
.course-detail-hero .course-slogan-large{
  margin:0 0 14px!important;
  color:var(--course-accent)!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-lead)!important;
  line-height:1.45!important;
  font-weight:400!important;
  font-style:italic!important;
}
.course-detail-hero .course-lead{
  max-width:58ch!important;
  margin:0!important;
  color:#c1bbc7!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-lead)!important;
  line-height:var(--lh-lead)!important;
  font-weight:400!important;
}
.course-detail-hero .actions{
  position:absolute!important;
  right:0!important;
  bottom:34px!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin:0!important;
}
.course-detail-hero .actions .btn,
.course-detail-hero .actions .outline{
  min-width:160px;
}
.course-detail-hero .course-hero-art{display:none!important}

/* Details strip: one pixel larger than v94. */
.course-fact-strip{
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;
  background:#090813!important;
}
.course-fact-strip>div{padding:20px 22px!important}
.course-fact-strip b{
  font-family:var(--font-ui)!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:.11em!important;
}
.course-fact-strip span{
  color:#d5d0d9!important;
  font-family:var(--font-ui)!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1.45!important;
}

/* =========================================================
   CANONICAL TYPOGRAPHY + SPACING FOR ALL COURSE PAGES
   ========================================================= */
.course-detail-section{
  padding:72px 0!important;
  border-bottom:1px solid rgba(164,126,255,.075)!important;
}
.course-detail-section .wrap{width:min(1180px,calc(100% - 40px))!important}
.course-detail-section .eyebrow,
.course-detail-page .price-status,
.course-detail-page .lab-receives-label{
  font-family:var(--font-ui)!important;
  font-size:var(--type-eyebrow)!important;
  font-weight:300!important;
  line-height:1.35!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}
.course-detail-section h2,
.course-detail-section .section-title,
.waitlist-card h2{
  font-family:var(--font-display)!important;
  font-size:var(--type-h2)!important;
  font-weight:400!important;
  line-height:var(--lh-h2)!important;
  letter-spacing:-.012em!important;
}
.course-detail-section h3,
.how-card h3,
.lab-class-card h3{
  font-family:var(--font-display)!important;
  font-weight:400!important;
  font-style:normal!important;
}
.course-detail-section p,
.detail-copy p,
.how-card p,
.lab-class-card>p,
.course-faq details p,
.waitlist-card>p,
.payment-copy p{
  color:#aaa5b3!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-body)!important;
  font-weight:400!important;
  line-height:var(--lh-body)!important;
}
.detail-copy,
.detail-copy-wide,
.payment-copy{
  width:100%;
  max-width:none!important;
}
.detail-copy p,
.detail-copy-wide p,
.payment-copy p{
  max-width:none!important;
}
.full-width-detail{
  display:block!important;
}
.full-width-detail .detail-copy,
.full-width-detail .detail-copy-wide{max-width:none!important}

/* How it works cards */
.how-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
.how-card{
  padding:24px!important;
  border-radius:20px!important;
}
.how-card span{
  width:44px!important;
  height:44px!important;
  font-family:var(--font-ui)!important;
  font-size:var(--type-ui)!important;
  font-weight:600!important;
}
.how-card h3{
  margin:0 0 8px!important;
  font-size:var(--type-h4)!important;
  line-height:var(--lh-h4)!important;
}
.how-card p{
  margin:0!important;
  font-size:var(--type-card)!important;
  line-height:1.65!important;
}

/* Smaller learning cards in the thematic live courses */
.learning-grid{gap:14px!important}
.learning-card{padding:22px!important;border-radius:18px!important}
.learning-card .num{
  font-family:var(--font-ui)!important;
  font-size:var(--type-micro)!important;
  font-weight:600!important;
}
.learning-card h3{
  margin:10px 0 0!important;
  font-family:var(--font-display)!important;
  font-size:var(--type-h5)!important;
  line-height:1.18!important;
  font-weight:400!important;
}

/* Payments */
.payment-section-layout{
  display:block!important;
}
.payment-section-layout .payment-box{
  width:100%;
  margin-top:28px;
}
.payment-box{
  padding:26px!important;
  border-radius:22px!important;
}
.payment-options-public{
  gap:14px!important;
}
.payment-option-public span{
  min-height:118px!important;
  padding:18px!important;
}
.payment-option-public b{
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  font-weight:600!important;
}
.payment-option-public strong{
  font-family:var(--font-ui)!important;
  font-size:1.5rem!important;
  font-weight:700!important;
}
.payment-option-public small,
.payment-note{
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  line-height:1.5!important;
}
.payment-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}
.payment-preview-card{
  padding:20px;
  border:1px solid rgba(var(--course-accent-rgb),.18);
  border-radius:18px;
  background:rgba(var(--course-accent-rgb),.035);
}
.payment-preview-card b{
  display:block;
  margin-bottom:7px;
  color:var(--course-accent);
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  font-weight:600!important;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.payment-preview-card strong{
  display:block;
  color:#fff;
  font-family:var(--font-ui)!important;
  font-size:1.5rem!important;
  line-height:1.2!important;
}
.payment-preview-card small{
  color:#98919e;
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
}

/* FAQ — full width, canonical display/body pairing */
.course-faq-full{width:100%}
.course-faq{width:100%;gap:10px!important}
.course-faq details{
  width:100%;
  border-radius:16px!important;
}
.course-faq summary{
  padding:18px 20px!important;
  color:#f0ebf2!important;
  font-family:var(--font-display)!important;
  font-size:1.625rem!important;
  font-weight:400!important;
  line-height:1.18!important;
}
.course-faq details p{
  padding:0 20px 20px!important;
  margin:0!important;
  font-size:1rem!important;
  line-height:1.72!important;
}

/* Wait list */
.waitlist-card{
  width:100%!important;
  max-width:none!important;
  padding:30px!important;
}
.waitlist-card h2{margin-bottom:12px!important}

/* =========================================================
   LABORATORIO MÁGICO — HORIZONTAL CAROUSEL
   ========================================================= */
.lab-carousel{
  position:relative;
  margin-top:26px;
}
.lab-carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.lab-carousel-viewport::-webkit-scrollbar{display:none}
.lab-catalog-track{
  display:flex!important;
  gap:16px!important;
  width:max-content;
}
.lab-class-card{
  flex:0 0 min(560px,calc((100vw - 96px)/2));
  width:min(560px,calc((100vw - 96px)/2));
  min-height:360px;
  padding:26px!important;
  border-radius:22px!important;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(25rem 17rem at 100% 0%,rgba(var(--course-accent-rgb),.055),transparent 72%),
    rgba(255,255,255,.014)!important;
}
.lab-class-card h3{
  margin:0 0 10px!important;
  font-size:var(--type-h4)!important;
  line-height:var(--lh-h4)!important;
}
.lab-class-card>p{
  margin:0 0 16px!important;
  font-size:var(--type-card)!important;
  line-height:1.65!important;
}
.lab-receives-label{
  margin:4px 0 10px!important;
  color:var(--course-accent)!important;
  font-size:var(--type-micro)!important;
  font-weight:500!important;
  letter-spacing:.14em!important;
}
.lab-class-meta{
  margin:0 0 20px!important;
  gap:7px!important;
}
.lab-class-meta span{
  padding:6px 9px!important;
  color:#a8d8d2!important;
  font-family:var(--font-ui)!important;
  font-size:var(--type-micro)!important;
  font-weight:500!important;
  line-height:1.35!important;
}
.lab-class-card .toolbar{
  margin-top:auto;
  align-items:flex-end!important;
}
.lab-class-card .toolbar>strong{
  color:#fff;
  font-family:var(--font-ui)!important;
  font-size:1.125rem!important;
  font-weight:700!important;
}
.lab-carousel-controls{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:0 0 14px;
}
.lab-carousel-btn{
  width:44px;
  height:44px;
  padding:0!important;
  border:1px solid rgba(var(--course-accent-rgb),.28)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.02)!important;
  color:#f4eff6!important;
  font-family:var(--font-ui)!important;
  font-size:20px!important;
  line-height:1!important;
}
.lab-carousel-btn:hover{background:rgba(var(--course-accent-rgb),.10)!important}
.lab-carousel-hint{
  margin-top:12px!important;
  color:#817b88!important;
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  line-height:1.45!important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .course-overview .course-summary{width:66%!important}
  .course-overview-art{width:58%!important}
}

@media(max-width:820px){
  .course-overview{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  .course-overview-art{
    position:relative!important;
    inset:auto!important;
    order:-1!important;
    width:100%!important;
    min-height:230px!important;
  }
  .course-overview-image{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.72) 80%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.72) 80%,transparent 100%);
  }
  .course-overview .course-summary{
    width:100%!important;
    min-height:0!important;
    padding:18px 21px 24px!important;
  }
  .course-overview .course-actions{
    position:static!important;
    align-self:flex-end!important;
    justify-content:flex-end!important;
    margin-top:22px!important;
  }

  .course-detail-hero{min-height:650px}
  .course-detail-hero-grid{
    min-height:650px!important;
    width:calc(100% - 28px)!important;
    padding:62px 0 112px!important;
    align-items:flex-end!important;
  }
  .course-detail-hero-copy{
    width:100%!important;
    max-width:660px!important;
  }
  .course-detail-hero::before{
    background-position:var(--course-hero-position-mobile,var(--course-hero-position,center center))!important;
    filter:saturate(.84) contrast(1.02) brightness(.66);
  }
  .course-detail-hero::after{
    background:
      linear-gradient(90deg,rgba(5,5,12,.90) 0%,rgba(5,5,12,.63) 42%,rgba(5,5,12,.24) 76%,rgba(5,5,12,.10) 100%),
      linear-gradient(180deg,rgba(5,5,12,.16) 0%,rgba(5,5,12,.08) 28%,rgba(5,5,12,.34) 58%,rgba(5,5,12,.80) 82%,#05050c 100%)!important;
  }
  .course-sendero-page{--course-hero-position-mobile:center 48%}
  .course-lab-page{--course-hero-position-mobile:center 48%}
  .course-divination-page{--course-hero-position-mobile:center 48%}
  .course-tarot-page{--course-hero-position-mobile:center 48%}
  .course-detail-hero h1{max-width:12ch!important}
  .course-detail-hero .course-lead{max-width:40ch!important}
  .course-detail-hero .actions{
    right:0!important;
    bottom:30px!important;
  }
  .how-grid{grid-template-columns:1fr!important}
  .learning-grid{grid-template-columns:1fr!important}
  .payment-preview{grid-template-columns:1fr!important}
  .lab-class-card{
    flex-basis:min(82vw,520px);
    width:min(82vw,520px);
  }
}

@media(max-width:560px){
  .course-detail-page .course-breadcrumb{width:calc(100% - 28px)}
  .course-detail-section{padding:54px 0!important}
  .course-detail-section .wrap{width:calc(100% - 28px)!important}
  .course-detail-hero{
    min-height:690px;
  }
  .course-detail-hero-grid{
    min-height:690px!important;
    padding:80px 0 124px!important;
  }
  .course-detail-hero h1{
    font-size:clamp(3.25rem,15vw,4.25rem)!important;
    max-width:none!important;
  }
  .course-detail-hero .course-slogan-large{font-size:1.125rem!important}
  .course-detail-hero .course-lead{font-size:1rem!important;line-height:1.62!important}
  .course-detail-hero .actions{
    left:0!important;
    right:0!important;
    bottom:28px!important;
    justify-content:flex-end!important;
  }
  .course-detail-hero .actions .btn,
  .course-detail-hero .actions .outline{
    min-width:0!important;
    padding:12px 16px!important;
  }
  .course-fact-strip{grid-template-columns:1fr 1fr!important}
  .course-fact-strip>div{padding:15px!important}
  .course-fact-strip span{font-size:13px!important}
  .course-faq summary{font-size:1.45rem!important}
  .lab-class-card{
    flex-basis:calc(100vw - 46px);
    width:calc(100vw - 46px);
    min-height:340px;
    padding:22px!important;
  }
}