/* =====================================================================
   CURSOS PAGE
   ===================================================================== */

/* --- Hero --- */
.cu-hero{
  padding:56px 0 64px;
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.cu-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.cu-hero-text{display:flex;flex-direction:column;max-width:540px}
.cu-eyebrow{color:var(--ink-2);margin-bottom:18px}
.cu-title{
  font-family:var(--serif);font-weight:400;
  font-size:54px;line-height:1.08;letter-spacing:-.01em;
  color:var(--navy);margin:0 0 22px;
}
.cu-title .accent{color:var(--insight-2)}
.cu-lede{
  font-size:15.5px;line-height:1.6;color:var(--ink-2);
  max-width:460px;margin:0 0 32px;
}
.cu-hero-cta{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink-block);color:#F2EDE6;
  padding:15px 22px;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;align-self:flex-start;
  transition:background .2s ease, transform .2s ease;
}
.cu-hero-cta svg{width:18px;height:18px;stroke:var(--insight);fill:none;stroke-width:1.8}
.cu-hero-cta:hover{background:var(--ink-block-2);transform:translateY(-1px)}

/* Hero photo (books + plant + diagram) */
.cu-hero-photo{
  position:relative;
  aspect-ratio: 5/4;
  background:var(--bg-soft);
  overflow:hidden;
}
.cu-hero-photo .cu-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.cu-hero-photo .placeholder-pattern{position:absolute;inset:0;width:100%;height:100%}
.cu-hero-photo .frame-corners{position:absolute;inset:14px;pointer-events:none;z-index:2}
.cu-hero-photo .frame-corners span{position:absolute;width:16px;height:16px;border:1px solid rgba(11,29,58,.3)}
.cu-hero-photo .frame-corners .tl{top:0;left:0;border-right:0;border-bottom:0}
.cu-hero-photo .frame-corners .tr{top:0;right:0;border-left:0;border-bottom:0}
.cu-hero-photo .frame-corners .bl{bottom:0;left:0;border-right:0;border-top:0}
.cu-hero-photo .frame-corners .br{bottom:0;right:0;border-left:0;border-top:0}
.cu-hero-photo .photo-cap{
  position:absolute;left:18px;bottom:18px;z-index:3;
  font-family:var(--mono);font-size:11px;color:rgba(11,29,58,.7);
  background:rgba(250,250,248,.85);padding:4px 9px;
}

/* --- Section header (centered, eyebrow with hairline) --- */
.cu-section{padding:72px 0 0}
.cu-section-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:36px;
}
.cu-section-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  margin-bottom:14px;
}
.cu-section-eyebrow::after{
  content:"";display:inline-block;width:42px;height:1px;background:var(--insight-2);
}
.cu-section-title{
  font-family:var(--serif);font-weight:400;
  font-size:40px;line-height:1.15;letter-spacing:-.005em;
  color:var(--navy);margin:0;
}

/* --- Mapa de contenidos (4 steps) --- */
.cu-steps{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:0;
}
.cu-step{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:24px 22px 24px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.cu-step.is-active{
  background:#FFF7E5;
  border:1.5px solid var(--insight-2);
}
.cu-step-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.cu-step-num{
  width:34px;height:34px;border-radius:50%;
  background:var(--ink-block);color:var(--insight);
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:700;font-size:14.5px;
  letter-spacing:.01em;
}
.cu-step.is-active .cu-step-num{
  background:#E69020;color:#fff;
}
.cu-step-ic{width:36px;height:36px;color:var(--navy);display:grid;place-items:center}
.cu-step-ic svg{width:36px;height:36px;stroke:var(--navy);stroke-width:1.5;fill:none}
.cu-step.is-active .cu-step-ic svg{stroke:#E69020}
.cu-step-label{
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin:0;
}
.cu-step-desc{
  font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0;
  min-height:60px;
}
.cu-step-list{
  list-style:none;padding:0;margin:8px 0 0;
  display:flex;flex-direction:column;gap:8px;
}
/* Enlace a la ficha del curso dentro de las listas */
.cu-course-link{
  display:flex;flex-direction:row;align-items:baseline;
  gap:6px;flex-wrap:wrap;
  color:var(--ink);text-decoration:none;
}
.cu-course-name{
  flex:1 1 auto;
  text-decoration:underline;
  text-decoration-color:var(--rule);
  text-underline-offset:3px;
  transition:text-decoration-color .15s ease;
}
.cu-course-cta{
  flex:0 0 auto;white-space:nowrap;margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono,monospace);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--insight-2);
}
.cu-course-cta svg{width:11px;height:11px;stroke-width:2}
.cu-step.is-active .cu-course-cta{color:#E69020}
.cu-course-link:hover .cu-course-name,
.cu-course-link:focus-visible .cu-course-name{
  text-decoration-color:currentColor;
}
.cu-course-link:hover .cu-course-cta svg{transform:translate(1px,-1px)}
.cu-course-cta svg{transition:transform .15s ease}
.cu-step-list li{
  position:relative;padding-left:14px;
  font-size:13px;color:var(--ink);line-height:1.4;
}
.cu-step-list li::before{
  content:"";position:absolute;left:0;top:7px;
  width:5px;height:5px;border-radius:50%;
  background:var(--insight-2);
}
.cu-step.is-active .cu-step-list li::before{background:#E69020}
.cu-step-sep{
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;color:var(--insight-2);
}
.cu-step-sep svg{width:20px;height:20px;stroke:#E69020;fill:none;stroke-width:1.8}

/* --- Capacidades complementarias --- */
.cu-caps{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
  margin-top:32px;
}
.cu-cap{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:24px 22px 22px;
  display:flex;flex-direction:column;gap:12px;
}
.cu-cap-head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:4px;
}
.cu-cap-ic{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 52px;
}
.cu-cap-ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8}
.cu-cap.green .cu-cap-ic{background:#2D8B6A}
.cu-cap.blue  .cu-cap-ic{background:#2F5FA7}
.cu-cap.purp  .cu-cap-ic{background:#6E5BAF}
.cu-cap-title{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin:0;
}
.cu-cap.green .cu-cap-title{color:#1E6649}
.cu-cap.blue  .cu-cap-title{color:#244B85}
.cu-cap.purp  .cu-cap-title{color:#4F3D8C}
.cu-cap-desc{
  font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 4px;
}
.cu-cap-list{
  list-style:none;padding:0;margin:8px 0 0;
  display:flex;flex-direction:column;gap:8px;
}
.cu-cap-list li{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--ink);
}
.cu-cap-list .check{
  width:18px;height:18px;flex:0 0 18px;
  display:grid;place-items:center;
}
.cu-cap-list .check svg{width:18px;height:18px;fill:none;stroke-width:1.8}
.cu-cap.green .cu-cap-list .check svg{stroke:#2D8B6A}
.cu-cap.blue  .cu-cap-list .check svg{stroke:#2F5FA7}
.cu-cap.purp  .cu-cap-list .check svg{stroke:#6E5BAF}

/* CTA outline (centered) */
.cu-cta-row{
  display:flex;justify-content:center;
  margin-top:36px;
}
.cu-cta-outline{
  display:inline-flex;align-items:center;gap:14px;
  padding:13px 24px;
  border:1.5px solid var(--navy);
  background:transparent;color:var(--navy);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  transition:background .2s ease, color .2s ease;
}
.cu-cta-outline svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:1.8}
.cu-cta-outline:hover{background:var(--ink-block);color:#F2EDE6}
.cu-cta-outline:hover svg{stroke:var(--insight)}

/* --- Tres formas de aprender --- */
.cu-ways-wrap{
  margin-top:72px;
  background:var(--bg-soft);
  padding:64px 0 72px;
  border-top:1px solid var(--rule);
}
.cu-ways-wrap .cu-section{padding-top:0}
.cu-ways-wrap .cu-section-head{margin-bottom:36px}
.cu-ways{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
}
.cu-way{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:28px 26px 26px;
  display:flex;flex-direction:column;gap:14px;
}
.cu-way.feat{
  position:relative;
  background:var(--ink-block);
  border:1.5px solid var(--ink-block);
  box-shadow:0 18px 40px -28px rgba(20,28,48,.5);
}
.cu-way.feat .cu-way-title{color:#fff}
.cu-way.feat .cu-way-sub{color:var(--on-ink-2)}
.cu-way.feat .cu-way-desc{color:var(--on-ink-2)}
.cu-way.feat .cu-way-list li{color:#F2EDE6}
.cu-way.feat .cu-way-price .amt{color:var(--insight)}
.cu-way.feat .cu-way-price .per{color:var(--on-ink-2)}
.cu-way.feat .cu-way-cta{
  background:var(--insight);color:var(--on-amber);align-self:stretch;justify-content:center;
}
.cu-way.feat .cu-way-cta svg{stroke:var(--on-amber)}
.cu-way.feat .cu-way-cta:hover{background:#ffd84d}
.cu-way-ribbon{
  position:absolute;top:0;right:24px;transform:translateY(-50%);
  background:var(--insight);color:var(--on-amber);
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--navy);
}
.cu-way-price{
  display:flex;align-items:baseline;gap:8px;margin:2px 0 0;
}
.cu-way-price .amt{
  font-family:var(--serif);font-weight:400;font-size:36px;
  line-height:1;color:var(--navy);letter-spacing:-.01em;
}
.cu-way-price .per{
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-2);
}
.cu-way-ic{
  width:58px;height:58px;border-radius:50%;
  background:#FFF1DA;
  display:grid;place-items:center;
  flex:0 0 58px;
  border:1.5px solid #E69020;
}
.cu-way-ic svg{width:26px;height:26px;stroke:#E69020;fill:none;stroke-width:1.6}
.cu-way-titles{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.cu-way-title{
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;
  color:var(--navy);margin:0;letter-spacing:-.005em;
}
.cu-way-sub{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin:0;
}
.cu-way-desc{
  font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:6px 0 4px;
}
.cu-way-list{
  list-style:none;padding:0;margin:6px 0 0;
  display:flex;flex-direction:column;gap:9px;
}
.cu-way-list li{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--ink);
}
.cu-way-list .check{
  width:18px;height:18px;flex:0 0 18px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#FFF1DA;
}
.cu-way-list .check svg{width:11px;height:11px;stroke:#E69020;fill:none;stroke-width:2.4}

/* Schools logos block (mode 2) */
.cu-schools-logos{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:16px 18px;
  align-items:center;justify-items:center;
  margin:8px 0 8px;
  padding:14px 0;
}
.cu-school-logo{
  height:34px;display:grid;place-items:center;
  color:var(--ink);font-family:var(--serif);font-weight:400;font-size:13.5px;
  letter-spacing:-.005em;line-height:1.05;text-align:center;
  opacity:.85;
}
.cu-school-logo strong{
  font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:-.01em;
  color:var(--navy);
}
.cu-school-logo .stack{display:flex;flex-direction:column;align-items:center;gap:0}
.cu-school-logo .stack small{
  font-family:var(--sans);font-size:7.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.cu-schools-foot{
  font-size:12.5px;color:var(--ink-2);text-align:center;
  font-family:var(--serif);font-style:italic;line-height:1.45;
  margin:8px auto 4px;max-width:280px;
}

.cu-way-cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink-block);color:#F2EDE6;
  padding:12px 18px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;align-self:flex-start;
  margin-top:14px;
  transition:background .2s ease, transform .2s ease;
}
.cu-way-cta svg{width:14px;height:14px;stroke:var(--insight);fill:none;stroke-width:2}
.cu-way-cta:hover{background:var(--ink-block-2);transform:translateY(-1px)}
.cu-way-cta.outline{
  background:transparent;color:var(--navy);
  border:1.5px solid var(--navy);padding:10.5px 16.5px;
}
.cu-way-cta.outline svg{stroke:var(--navy)}
.cu-way-cta.outline:hover{background:var(--ink-block);color:#F2EDE6}
.cu-way-cta.outline:hover svg{stroke:var(--insight)}

/* --- Contact strip --- */
.cu-contact{
  background:var(--bg-soft);
  border-top:1px solid var(--rule);
  padding:24px 0;
}
.cu-contact-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:24px;align-items:center;
}
.cu-contact-ic{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid #E69020;
  flex:0 0 48px;
}
.cu-contact-ic svg{width:24px;height:24px;stroke:#E69020;fill:none;stroke-width:1.6}
.cu-contact-text{
  font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--navy);
  font-weight:400;letter-spacing:-.005em;margin:0;
}

/* --- Responsive --- */
@media (max-width: 1180px){
  .cu-steps{grid-template-columns: 1fr 1fr; gap:18px}
  .cu-step-sep{display:none}
}
@media (max-width: 900px){
  .cu-hero-grid{grid-template-columns:1fr;gap:36px}
  .cu-title{font-size:42px}
  .cu-caps{grid-template-columns:1fr}
  .cu-ways{grid-template-columns:1fr}
  .cu-contact-inner{grid-template-columns:1fr;text-align:center;gap:16px}
  .cu-contact-ic{margin:0 auto}
}
@media (max-width: 640px){
  .cu-steps{grid-template-columns:1fr;gap:14px}
  .cu-section-title{font-size:30px}
}

/* === DARK MODE — superficies/acentos literales === */
:root[data-theme="dark"] .cu-step.is-active{
  background:#2A2114;            /* panel ámbar oscuro (era #FFF7E5 fijo) */
  border-color:var(--insight-2);
}
/* títulos de capacidad por categoría: aclarados para card oscura */
:root[data-theme="dark"] .cu-cap.green .cu-cap-title{ color:#5FB98A; }
:root[data-theme="dark"] .cu-cap.blue  .cu-cap-title{ color:#8FB2E6; }
:root[data-theme="dark"] .cu-cap.purp  .cu-cap-title{ color:#A593E0; }
/* burbujas de icono/check crema (#FFF1DA) → ámbar oscuro en dark */
:root[data-theme="dark"] .cu-way-ic,
:root[data-theme="dark"] .cu-way-list .check{ background:#2A2114; }