/* =====================================================
   GAIA CURSOS — Design System
   Concepto: el crecimiento como forma de aprender.
   Anillos concéntricos (como anillos de un árbol / curvas
   topográficas) = progreso a través de un curso.
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* color */
  --ink:        #12142B;
  --ink-2:      #1B1E3F;
  --moss:       #2B2F63;
  --paper:      #F5F6FA;
  --paper-2:    #E7E9F5;
  --text-dark:  #12142B;
  --text-muted: #6B7090;
  --text-light: #F5F6FA;
  --text-light-muted: #A6ABC7;
  --gold:       #FF5A36;
  --gold-dim:   #C43E1D;
  --lime:       #6C5CE7;
  --line:       rgba(15,20,15,0.14);
  --line-light: rgba(238,240,229,0.16);

  /* type */
  --f-display: 'Space Grotesk', 'Inter', sans-serif;
  --f-body: 'Inter', -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--f-display); margin:0; font-weight:600; letter-spacing:-0.02em; }
p{ margin:0; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- utility ---------- */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px; height:1px;
  background: var(--gold-dim);
}
.section{ padding: 108px 0; }
.section--tight{ padding: 72px 0; }
.section--dark{ background: var(--ink); color: var(--text-light); }
.section--moss{ background: var(--moss); color: var(--text-light); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight:600;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--gold); color: var(--ink); }
.btn-primary:hover{ background: var(--lime); }
.btn-ghost{ border-color: var(--line); color: var(--text-dark); }
.btn-ghost:hover{ border-color: var(--text-dark); }
.btn-ghost-light{ border-color: var(--line-light); color: var(--text-light); }
.btn-ghost-light:hover{ border-color: var(--text-light); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover{ transform:none; }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(238,240,229,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-display); font-size:20px; font-weight:600;
}
.nav-logo .ring-mark{ width:26px; height:26px; object-fit:contain; }
.ring-mark{ object-fit:contain; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:14.5px; font-weight:500; color: var(--text-muted); transition:color .2s; }
.nav-links a:hover, .nav-links a.active{ color: var(--text-dark); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; }
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- ring / signature graphic ---------- */
.ring-mark path, .ring-mark circle, .ring-mark polygon{ vector-effect: non-scaling-stroke; }

/* ---------- urgencia / conversión ---------- */
.urgency-bar{
  background: var(--gold); color: var(--ink); text-align:center; font-size:13.5px; font-weight:600;
  padding: 10px 20px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.urgency-bar .countdown{ font-family: var(--f-mono); background: var(--ink); color: var(--gold); padding:3px 10px; border-radius:100px; font-size:12.5px; }

.sticky-buy{
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  background: var(--ink); color: var(--text-light);
  padding: 14px 24px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  transform: translateY(120%); transition: transform .3s ease;
  border-top: 1px solid var(--line-light);
}
.sticky-buy.show{ transform: translateY(0); }
.sticky-buy .sb-price{ font-family:var(--f-display); font-size:20px; }
.sticky-buy .sb-old{ text-decoration:line-through; color:var(--text-light-muted); font-size:14px; margin-left:8px; }
.sticky-buy .sb-note{ font-size:12.5px; color: var(--text-light-muted); }

.mid-cta{
  text-align:center; background: var(--paper-2); border-radius: var(--radius-l); padding: 40px 30px; margin: 40px 0;
}
.mid-cta h3{ font-size:22px; margin-bottom:10px; }
.mid-cta p{ color:var(--text-muted); font-size:14.5px; margin-bottom:20px; }

/* ---------- hero ---------- */
.hero{
  background: var(--ink);
  color: var(--text-light);
  position: relative;
  overflow: hidden;
  padding: 90px 0 0;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items:center;
  position: relative;
  z-index: 2;
}
.hero h1{
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.03;
  margin: 22px 0 26px;
}
.hero h1 em{ font-style:italic; color: var(--lime); }
.hero p.lead{
  font-size: 17.5px;
  color: var(--text-light-muted);
  max-width: 480px;
  line-height:1.6;
  margin-bottom: 34px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 48px; }
.hero-stats{
  display:flex; gap:36px; padding-top: 28px; border-top:1px solid var(--line-light);
  max-width: 520px;
}
.hero-stats div strong{ display:block; font-family: var(--f-display); font-size: 26px; }
.hero-stats div span{ font-size:12.5px; color: var(--text-light-muted); }
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-rings{ width: 100%; max-width: 420px; }
.hero-bottom-fade{
  height: 90px; margin-top: 80px;
  background: linear-gradient(180deg, transparent, var(--paper));
}

/* ---------- marquee / logos ---------- */
.trust{
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.trust .container{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:space-between;}
.trust span{ font-family: var(--f-mono); font-size:11.5px; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; }
.trust-words{ display:flex; gap:34px; flex-wrap:wrap; }
.trust-words b{ font-weight:600; color: var(--text-dark); font-size:14px; }

/* ---------- how it works ---------- */
.steps{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; margin-top: 56px;
}
.step{
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.step .num{ font-family: var(--f-mono); font-size:13px; color: var(--gold-dim); }
.step h3{ font-size: 19px; margin: 14px 0 10px; }
.step p{ font-size: 14.5px; color: var(--text-muted); line-height:1.55; }

/* ---------- section headers ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  margin-bottom: 20px;
}
.section-head h2{ font-size: clamp(28px,3.4vw,42px); margin-top:14px; max-width:600px; }
.section-head p{ max-width: 380px; color: var(--text-muted); font-size:15px; line-height:1.6; padding-bottom:4px; }
.section--dark .section-head p, .section--moss .section-head p{ color: var(--text-light-muted); }

/* ---------- featured course card ---------- */
.feature-course{
  margin-top: 48px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
  background: var(--ink);
  color: var(--text-light);
  border-radius: var(--radius-l);
  overflow:hidden;
}
.feature-course .fc-content{ padding: 56px; }
.fc-tag{
  display:inline-block; font-family: var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  color: var(--ink); background: var(--lime); padding: 5px 12px; border-radius: 100px; text-transform:uppercase;
  white-space:nowrap;
}
.feature-course h3{ font-size: 32px; margin: 20px 0 14px; line-height:1.1; }
.feature-course p{ color: var(--text-light-muted); line-height:1.6; margin-bottom: 26px; }
.fc-meta{ display:flex; gap:26px; margin-bottom:32px; flex-wrap:wrap; }
.fc-meta div{ font-size:13px; color: var(--text-light-muted); }
.fc-meta strong{ display:block; font-family: var(--f-mono); font-size:15px; color: var(--text-light); }
.fc-visual{ background: var(--moss); display:flex; align-items:center; justify-content:center; padding:40px; }
.fc-visual svg{ width:100%; max-width:320px; }

/* ---------- feature grid ---------- */
.grid-features{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; margin-top:48px;
}
.feature-cell{ background: var(--paper); padding: 34px; }
.feature-cell .fi{ width:36px; height:36px; margin-bottom:20px; color: var(--gold-dim); }
.feature-cell h4{ font-size:18px; margin-bottom:10px; }
.feature-cell p{ font-size:14px; color: var(--text-muted); line-height:1.6; }

/* ---------- testimonials ---------- */
.testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:48px; }
.testimonial{ padding: 28px; border:1px solid var(--line); border-radius: var(--radius-m); background: var(--paper-2); }
.testimonial p{ font-size:15px; line-height:1.6; margin-bottom:22px; }
.testimonial .who{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:600; font-size:14px;
  color: var(--ink); background: var(--lime);
}
.who span{ display:block; font-size:12.5px; color: var(--text-muted); }
.who b{ font-size:14px; }

/* ---------- final cta ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size: clamp(30px,4.4vw,52px); max-width:700px; margin: 20px auto 30px; }
.cta-final .actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ---------- footer ---------- */
.footer{ background: var(--ink); color: var(--text-light-muted); padding: 64px 0 30px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 40px; padding-bottom: 48px; border-bottom:1px solid var(--line-light); }
.footer-brand p{ font-size:14px; line-height:1.6; margin: 16px 0; max-width:280px; }
.footer h5{ font-family: var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-light); margin-bottom:18px; }
.footer li{ margin-bottom:10px; font-size:14px; }
.footer li a:hover{ color: var(--text-light); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top: 26px; font-size:12.5px; flex-wrap:wrap; gap:10px; }

/* =====================================================
   Catálogo de cursos
===================================================== */
.page-hero{
  background: var(--ink); color: var(--text-light); padding: 150px 0 70px;
}
.page-hero .eyebrow{ color: var(--lime); }
.page-hero .eyebrow::before{ background: var(--lime); }
.page-hero h1{ font-size: clamp(34px,5vw,54px); margin: 18px 0 14px; max-width:640px; }
.page-hero p{ color: var(--text-light-muted); max-width:520px; font-size:16px; line-height:1.6; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; padding: 40px 0 8px; }
.chip{
  padding: 9px 18px; border-radius:100px; border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color: var(--text-muted); background:transparent;
  transition: all .2s;
}
.chip.active, .chip:hover{ background: var(--ink); color: var(--text-light); border-color: var(--ink); }

.course-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; padding: 30px 0 100px; }
.course-card{
  border:1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); overflow:hidden;
  display:flex; flex-direction:column; transition: border-color .2s, transform .2s;
}
.course-card:hover{ transform: translateY(-4px); border-color: var(--text-muted); }
.course-card .cc-top{ background: var(--moss); color:var(--text-light); padding: 26px; position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; }
.course-card .cc-status{ font-family: var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.status-live{ color: var(--lime); }
.status-soon{ color: var(--text-light-muted); }
.course-card .cc-body{ padding: 24px; flex:1; display:flex; flex-direction:column; }
.course-card h3{ font-size:20px; margin-bottom: 10px; }
.course-card p{ font-size:14px; color: var(--text-muted); line-height:1.55; margin-bottom:20px; flex:1; }
.cc-meta{ display:flex; gap:16px; font-size:12.5px; color: var(--text-muted); margin-bottom:18px; font-family: var(--f-mono); }
.course-card.locked{ opacity:.6; }
.course-card.locked .btn{ pointer-events:none; }

/* =====================================================
   Página del curso (IA)
===================================================== */
.course-hero{
  background: var(--ink); color:var(--text-light); padding: 150px 0 90px; position:relative; overflow:hidden;
}
.course-hero .container{ display:grid; grid-template-columns: 1.3fr 0.9fr; gap:56px; align-items:start; }
.course-hero h1{ font-size: clamp(32px,4.6vw,52px); margin:18px 0 20px; line-height:1.08; }
.course-hero .lead{ color: var(--text-light-muted); font-size:16.5px; line-height:1.65; max-width:540px; margin-bottom:30px; }
.course-hero-meta{ display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line-light); padding-top:24px; margin-top:10px;}
.course-hero-meta div{ flex:1; min-width:120px; padding-right:20px; }
.course-hero-meta strong{ display:block; font-family: var(--f-mono); font-size:16px; margin-bottom:4px; }
.course-hero-meta span{ font-size:12px; color: var(--text-light-muted); }

.buy-card{
  background: var(--paper); color: var(--text-dark); border-radius: var(--radius-l); padding: 32px; position:sticky; top:100px;
}
.buy-card .price{ font-family:var(--f-display); font-size:40px; margin: 6px 0 4px; }
.buy-card .price-note{ font-size:13px; color:var(--text-muted); margin-bottom:24px; }
.buy-card ul{ margin: 22px 0 26px; display:flex; flex-direction:column; gap:12px; }
.buy-card li{ display:flex; gap:10px; font-size:14px; align-items:flex-start; }
.buy-card li svg{ flex-shrink:0; margin-top:2px; color: var(--gold-dim); }

.syllabus-week{
  border:1px solid var(--line); border-radius: var(--radius-m); margin-bottom:14px; overflow:hidden; background: var(--paper);
}
.week-head{
  display:flex; align-items:center; gap:20px; padding:22px 26px; cursor:pointer; background:none; border:none; width:100%; text-align:left;
}
.week-head .week-num{ font-family: var(--f-mono); font-size:12px; line-height:1.5; color: var(--gold-dim); width:84px; flex-shrink:0; }
.week-head .week-title{ flex:1; }
.week-head h4{ font-size:16.5px; margin-bottom:4px; }
.week-head span{ font-size:12.5px; color: var(--text-muted); }
.week-head .chev{ transition: transform .25s; flex-shrink:0; }
.syllabus-week.open .chev{ transform: rotate(180deg); }
.week-body{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.syllabus-week.open .week-body{ max-height: 600px; }
.week-body-inner{ padding: 0 26px 26px 124px; display:flex; flex-direction:column; gap:14px; }
.topic-row{ display:flex; align-items:center; gap:10px; font-size:14px; color: var(--text-muted); }
.topic-row svg{ flex-shrink:0; color: var(--text-muted); }
.topic-row.pdf svg{ color: var(--gold-dim); }
.topic-row.exercise svg{ color: var(--lime); }

.instructor{ display:flex; gap:26px; align-items:center; background: var(--paper-2); border-radius: var(--radius-l); padding:36px; }
.instructor .avatar{ width:76px; height:76px; font-size:26px; flex-shrink:0; }
.instructor h4{ font-size:20px; margin-bottom:6px; }
.instructor p{ font-size:14.5px; color: var(--text-muted); line-height:1.6; }

.faq-item{ border-bottom:1px solid var(--line); padding: 22px 0; }
.faq-item button{ display:flex; justify-content:space-between; width:100%; background:none; border:none; text-align:left; font-family:var(--f-body); font-size:16px; font-weight:600; }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-answer{ max-height:200px; margin-top:14px; }
.faq-answer p{ font-size:14.5px; color: var(--text-muted); line-height:1.6; }

/* =====================================================
   Campus (alumno)
===================================================== */
.campus-shell{ display:grid; grid-template-columns: 300px 1fr; min-height:100vh; background: var(--paper); }
.campus-sidebar{ background: var(--ink); color: var(--text-light); padding: 28px 26px; display:flex; flex-direction:column; }
.campus-sidebar .brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:18px; margin-bottom:36px; }
.campus-ring-wrap{ text-align:center; padding: 10px 0 26px; border-bottom:1px solid var(--line-light); margin-bottom: 22px; }
.campus-ring-wrap svg{ width:130px; height:130px; }
.campus-ring-wrap .pct{ font-family:var(--f-mono); font-size:26px; display:block; margin-top:-92px; }
.campus-ring-wrap .pct-label{ display:block; font-size:11.5px; color: var(--text-light-muted); margin-top:98px; }
.module-list{ display:flex; flex-direction:column; gap:4px; flex:1; overflow-y:auto; }
.module-item{
  display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius: var(--radius-s); font-size:13.5px; cursor:pointer;
  color: var(--text-light-muted); transition: background .2s, color .2s;
}
.module-item:hover{ background: var(--ink-2); }
.module-item.active{ background: var(--moss); color: var(--text-light); }
.module-item .mi-num{ font-family:var(--f-mono); font-size:11.5px; width:20px; flex-shrink:0; }
.module-item .mi-check{ margin-left:auto; flex-shrink:0; opacity:0; color: var(--lime); }
.module-item.done .mi-check{ opacity:1; }
.module-item.done .mi-num{ color: var(--lime); }

.campus-main{ padding: 40px 56px; max-width: 880px; }
.campus-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.campus-topbar h2{ font-size:14px; color: var(--text-muted); font-weight:500; }
.user-chip{ display:flex; align-items:center; gap:10px; font-size:14px; }

.pdf-card{
  border:1px solid var(--line); border-radius: var(--radius-m); padding:26px; display:flex; align-items:center; gap:20px; background: var(--paper-2); margin: 24px 0 34px;
}
.pdf-card .pi{ width:44px; height:44px; flex-shrink:0; color: var(--gold-dim); }
.pdf-card h4{ font-size:15.5px; margin-bottom:4px; }
.pdf-card span{ font-size:12.5px; color: var(--text-muted); }
.pdf-card .btn{ margin-left:auto; }

.exercise-list{ display:flex; flex-direction:column; gap:12px; margin: 20px 0 36px; }
.exercise-item{
  display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius: var(--radius-m); background: var(--paper);
}
.exercise-item h5{ font-family:var(--f-body); font-weight:600; font-size:14.5px; margin-bottom:5px; }
.exercise-item p{ font-size:13.5px; color: var(--text-muted); line-height:1.5; margin-bottom:10px; }
.exercise-item .ei-body{ width:100%; }

.ex-status{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; padding:4px 10px; border-radius:100px; margin-bottom:10px;
}
.ex-status.pendiente{ background: rgba(255,90,54,0.14); color: var(--gold-dim); }
.ex-status.aprobado{ background: rgba(108,92,231,0.16); color: #4A3FA0; }
.ex-status.a_corregir{ background: rgba(214,48,74,0.14); color: var(--rust,#D6304A); }
.ex-status.sin-entregar{ background: var(--paper-2); color: var(--text-muted); }

.ex-form textarea, .ex-form input[type=text]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius: var(--radius-s); font-family:var(--f-body);
  font-size:13.5px; margin-bottom:8px; background:var(--paper);
}
.ex-form textarea{ min-height:70px; resize:vertical; }
.ex-form .btn{ font-size:13px; padding:9px 18px; }

.ex-feedback{
  margin-top:10px; padding:12px 14px; border-radius: var(--radius-s); background: var(--paper-2); font-size:13px; line-height:1.5;
}
.ex-feedback b{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-muted); margin-bottom:4px; font-family:var(--f-mono); }
.ex-submitted-preview{ font-size:12.5px; color: var(--text-muted); background: var(--paper-2); border-radius: var(--radius-s); padding:10px 12px; margin-bottom:8px; white-space:pre-wrap; }
.ex-link-preview{ display:inline-block; font-size:12.5px; margin-bottom:8px; text-decoration:underline; }

.correction-card{ border:1px solid var(--line); border-radius: var(--radius-m); padding:20px; background: var(--paper); }
.correction-card .cc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.correction-card .cc-title{ font-weight:600; font-size:14.5px; }
.correction-card .cc-meta{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.correction-card .cc-text{ font-size:13.5px; background:var(--paper-2); border-radius:var(--radius-s); padding:12px 14px; margin:10px 0; white-space:pre-wrap; }
.correction-card textarea{ width:100%; min-height:60px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-s); font-family:var(--f-body); font-size:13.5px; margin:10px 0; }
.correction-card .cc-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.correction-card .cc-actions .btn{ font-size:13px; padding:9px 16px; }

.module-actions{ display:flex; justify-content:space-between; padding-top: 26px; border-top:1px solid var(--line); }

@media (max-width: 900px){
  .campus-shell{ grid-template-columns: 1fr; }
  .campus-sidebar{
    flex-direction: row; align-items:center; gap:14px; overflow-x:auto;
    padding: 14px 16px; position: sticky; top:0; z-index: 40; white-space:nowrap;
  }
  .campus-sidebar .brand{ margin-bottom:0; flex-shrink:0; }
  .campus-ring-wrap{ display:none; }
  .module-list{ flex-direction:row; overflow-x:auto; flex:1; gap:8px; min-width:0; }
  .module-item{ flex-shrink:0; white-space:nowrap; }
  .campus-sidebar > button{ flex-shrink:0; width:auto; padding:10px 14px; margin-top:0 !important; }
  .campus-main{ padding: 20px 16px 60px; }
}

/* =====================================================
   Admin
===================================================== */
.admin-shell{ display:grid; grid-template-columns: 260px 1fr; min-height:100vh; background: var(--paper-2); }
.admin-sidebar{ background: var(--ink); color: var(--text-light); padding: 26px 20px; }
.admin-sidebar .brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:17px; margin-bottom:8px; padding: 0 10px;}
.admin-sidebar .brand small{ display:block; font-family:var(--f-mono); font-size:10.5px; color: var(--text-light-muted); letter-spacing:.08em; }
.admin-nav{ margin-top:30px; display:flex; flex-direction:column; gap:2px; }
.admin-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius: var(--radius-s); font-size:14px; color: var(--text-light-muted);
  transition: background .2s, color .2s;
}
.admin-nav a svg{ width:17px; height:17px; flex-shrink:0; }
.admin-nav a:hover{ background: var(--ink-2); color: var(--text-light); }
.admin-nav a.active{ background: var(--gold); color: var(--ink); font-weight:600; }

.admin-main{ padding: 34px 42px; }
.admin-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 30px; }
.admin-header h1{ font-size: 27px; }
.admin-header p{ font-size:13.5px; color: var(--text-muted); margin-top:6px; }

.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 36px; }
.stat-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-m); padding:22px; }
.stat-card span{ font-size:12px; color:var(--text-muted); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.05em; }
.stat-card strong{ display:block; font-family:var(--f-display); font-size:30px; margin: 8px 0 4px; }
.stat-card .delta{ font-size:12.5px; }
.delta.up{ color:#4A3FA0; }
.delta.down{ color:#D6304A; }

.panel{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-m); padding:26px; margin-bottom:24px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.panel-head h3{ font-size:17px; }

.chart-bars{ display:flex; align-items:flex-end; gap:14px; height:180px; padding-top:10px; }
.chart-bars .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.chart-bars .bar{ width:100%; background: var(--moss); border-radius: 4px 4px 0 0; transition: height .6s ease; }
.chart-bars .bar-col span{ font-size:11px; color:var(--text-muted); font-family:var(--f-mono); }

table{ width:100%; border-collapse: collapse; }
th{ text-align:left; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding: 10px 14px; border-bottom:1px solid var(--line); }
td{ padding: 16px 14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.tag{ font-family:var(--f-mono); font-size:11px; padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
.tag-live{ background: rgba(169,214,107,0.25); color:#4A3FA0; }
.tag-draft{ background: rgba(217,164,65,0.25); color:#C43E1D; }
.progress-mini{ width:90px; height:6px; background: var(--paper-2); border-radius:100px; overflow:hidden; }
.progress-mini i{ display:block; height:100%; background: var(--gold); }
.row-actions{ display:flex; gap:8px; }
.icon-btn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:none; display:flex; align-items:center; justify-content:center; color: var(--text-muted); }
.icon-btn:hover{ border-color: var(--text-dark); color: var(--text-dark); }

.modal-overlay{
  position:fixed; inset:0; background: rgba(15,20,15,0.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{ background: var(--paper); border-radius: var(--radius-l); max-width:520px; width:100%; padding: 32px; max-height:88vh; overflow-y:auto; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.modal-head h3{ font-size:19px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color: var(--text-muted); }
.field input, .field select, .field textarea{
  width:100%; padding: 11px 14px; border:1px solid var(--line); border-radius: var(--radius-s); font-family: var(--f-body); font-size:14.5px; background: var(--paper);
}
.field textarea{ resize: vertical; min-height:80px; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }

.toast{
  position:fixed; bottom:26px; right:26px; background: var(--ink); color:var(--text-light); padding:14px 20px; border-radius: var(--radius-m);
  font-size:14px; transform: translateY(120%); transition: transform .3s ease; z-index:200; display:flex; align-items:center; gap:10px;
}
.toast.show{ transform: translateY(0); }

@media (max-width: 980px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{
    display:flex; flex-direction:row; align-items:center; gap:14px; overflow-x:auto;
    padding: 14px 16px; position: sticky; top:0; z-index:40; white-space:nowrap;
  }
  .admin-sidebar .brand{ margin-bottom:0; flex-shrink:0; }
  .admin-sidebar .brand small{ display:none; }
  .admin-nav{ flex-direction:row; margin-top:0; flex-shrink:0; }
  .admin-nav a{ white-space:nowrap; }
  .admin-sidebar > button{ flex-shrink:0; width:auto; padding:10px 14px; margin-top:0 !important; }
  .admin-main{ padding: 22px 18px; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ min-width: 480px; }
}

/* ---------- responsive global ---------- */
@media (max-width: 900px){
  .hero .container, .course-hero .container{ grid-template-columns: 1fr; }
  .buy-card{ position:static; }
  .feature-course{ grid-template-columns: 1fr; }
  .grid-features{ grid-template-columns: 1fr; }
  .course-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr 1fr; }
  .testimonials{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .steps{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .section{ padding: 70px 0; }
  .week-body-inner{ padding: 0 16px 22px 16px; }
  .week-head{ padding: 18px 16px; gap:12px; }
  .week-head .week-num{ width:64px; font-size:11px; }
  .instructor{ flex-direction:column; text-align:center; padding:26px; }
  .field-row{ flex-direction:column; gap:0; }
  .course-hero-meta div{ min-width: 45%; }
  .urgency-bar{ font-size:12px; padding:9px 14px; }
  .mid-cta{ padding: 30px 20px; }
}

@keyframes pulse-badge{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,90,54,0.45); }
  50%{ box-shadow: 0 0 0 6px rgba(255,90,54,0); }
}
.fc-tag.pulse, .tag-live.pulse{ animation: pulse-badge 2s ease-in-out infinite; will-change: box-shadow; }