/* ============================================================
   SOVERANTI — design-v2.css  (carga después de theme-extras.css)
   Mejoras visuales premium en servicios, cursos, packs y globales
   ============================================================ */

/* ─── VARIABLES LOCALES ────────────────────────────────────── */
:root {
  --gold-glow: 0 0 0 3px rgba(196,167,96,.12), 0 8px 32px rgba(196,167,96,.18);
  --card-radius: 18px;
  --card-shadow: 0 2px 12px rgba(11,25,39,.06);
  --card-shadow-hover: 0 16px 48px rgba(11,25,39,.12), 0 4px 16px rgba(196,167,96,.1);
}

/* ─── PAGE HEADER: más visual ──────────────────────────────── */
.page-header {
  padding: 80px 5% 60px !important;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(196,167,96,.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-header h1 {
  font-size: clamp(2rem,4.5vw,3.2rem) !important;
  letter-spacing: -0.5px;
  max-width: 700px;
}
.page-header em { font-style: italic; color: var(--gold) !important; }

/* ─── ICONOS DE SERVICIO: contenedor premium ───────────────── */
.serv-icon {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(140deg, rgba(196,167,96,.18) 0%, rgba(196,167,96,.05) 100%) !important;
  border: 1px solid rgba(196,167,96,.30) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  font-size: 1.7rem !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease, background .3s ease !important;
}
.serv-icon svg { color: #C4A760 !important; stroke: #C4A760 !important; }
.servicio-card:hover .serv-icon {
  transform: translateY(-3px) scale(1.04) !important;
  background: linear-gradient(140deg, rgba(196,167,96,.28) 0%, rgba(196,167,96,.08) 100%) !important;
  border-color: rgba(196,167,96,.5) !important;
  box-shadow: 0 8px 20px rgba(196,167,96,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* ─── TARJETA DE SERVICIO: upgrade visual ──────────────────── */
.servicio-card {
  border-radius: var(--card-radius) !important;
  padding: 24px 24px 26px !important;
  border: 1px solid rgba(196,167,96,.15) !important;
  box-shadow: var(--card-shadow) !important;
  transition: all .3s cubic-bezier(.22,.61,.36,1) !important;
  position: relative;
  overflow: hidden;
}
.servicio-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: rgba(196,167,96,.35) !important;
}
.servicio-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, #C4A760, #8A6820) !important;
}
.servicio-card h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}
.servicio-card p {
  font-size: .84rem !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}

/* ─── PRECIO: más protagonismo ─────────────────────────────── */
.serv-precio {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #C4A760 !important;           /* dorado de siempre */
  letter-spacing: -.01em !important;
  margin: 14px 0 !important;
  padding: 11px 0 !important;
  border-top: 1px solid rgba(196,167,96,.15) !important;
  border-bottom: 1px solid rgba(196,167,96,.15) !important;
}
.serv-precio span {
  font-family: 'Jost', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

/* ─── LISTA INCLUYE: checkmarks dorados ────────────────────── */
.serv-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 20px !important;
}
.serv-items li {
  position: relative !important;
  padding: 4px 0 4px 22px !important;
  font-size: .8rem !important;
  line-height: 1.45 !important;
  border-bottom: 1px solid rgba(196,167,96,.07) !important;
}
.serv-items li:last-child { border-bottom: none !important; }
.serv-items li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: #C4A760 !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
}

/* ─── BOTÓN CONTRATAR: premium full-width ──────────────────── */
.serv-btn {
  display: block !important;
  text-align: center !important;
  background-color: #ffffff !important;
  color: #0B1927 !important;
  border: 1.5px solid rgba(196,167,96,.5) !important;
  padding: 13px 22px !important;
  border-radius: 12px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  letter-spacing: .4px !important;
  margin-top: 16px !important;
  box-shadow: 0 3px 12px rgba(11,25,39,.06) !important;
  transition: background-color .3s ease, color .25s ease, border-color .3s ease,
              transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease !important;
  text-decoration: none !important;
}
.serv-btn:hover {
  background-color: #C4A760 !important;   /* blanco → dorado sólido, limpio */
  color: #0B1927 !important;
  border-color: #C4A760 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(196,167,96,.4) !important;
}
.serv-btn:active { transform: translateY(-1px) !important; }
.serv-btn-nota {
  display: block !important;
  text-align: center !important;
  font-size: .72rem !important;
  opacity: .5 !important;
  margin-top: 8px !important;
}

/* ─── TARJETA DESTACADA ────────────────────────────────────── */
.servicio-card.destacado {
  border-color: rgba(196,167,96,.4) !important;
  box-shadow: 0 4px 20px rgba(196,167,96,.12) !important;
}
.servicio-card.destacado::before {
  height: 4px !important;
  background: linear-gradient(90deg, #C4A760, #f0c878, #8A6820) !important;
}
.serv-badge {
  background: linear-gradient(135deg, #C4A760, #8A6820) !important;
  color: #0B1927 !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
}

/* ─── MÁS SERVICIOS ────────────────────────────────────────── */
.mas-servicios {
  border-radius: var(--card-radius) !important;
  padding: 36px !important;
  text-align: center;
  margin-top: 20px;
}
.ms-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(196,167,96,.14), rgba(196,167,96,.04));
  border: 1px solid rgba(196,167,96,.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: #C4A760;
}
.ms-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  margin: 4px !important;
}
.tags { margin: 16px 0 20px; }

/* ─── PACK CARDS: mejoradas ────────────────────────────────── */
.packs { padding: 80px 5% !important; }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 24px; margin-top: 40px; }
.pack-card {
  border-radius: var(--card-radius) !important;
  padding: 36px !important;
  position: relative;
  overflow: hidden;
  transition: all .3s ease !important;
}
.pack-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
.pack-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(196,167,96,.4), rgba(196,167,96,.1));
}
.pack-destacado::before {
  background: linear-gradient(90deg, #C4A760, #8A6820) !important;
}
.pack-icon {
  width: 52px; height: 52px;
  background: rgba(196,167,96,.1);
  border: 1px solid rgba(196,167,96,.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: #C4A760;
}
.pack-icon svg { stroke: #C4A760; }
.pack-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}
.pack-includes {
  list-style: none !important;
  padding: 0 !important;
}
.pack-includes li {
  position: relative !important;
  padding: 5px 0 5px 22px !important;
  font-size: .83rem !important;
}
.pack-includes li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: #C4A760 !important;
  font-weight: 700 !important;
}
.pack-precio {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
}
.pack-btn {
  display: block !important;
  text-align: center !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  margin-top: 20px !important;
  transition: all .2s !important;
}

/* ─── CURSOS GRID: cards mejoradas ────────────────────────── */
.curso-card {
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  transition: all .3s cubic-bezier(.22,.61,.36,1) !important;
}
.curso-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
.curso-cover {
  position: relative;
  overflow: hidden;
}
.curso-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,25,39,.5) 100%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   PORTADAS DISEÑO B — Navy + Medallón con color propio por curso
   Cada curso define su acento vía variables CSS. Iconos Lucide.
   Hilo de marca: fondo navy + estructura comunes a todos.
   ══════════════════════════════════════════════════════════════ */
.cv-b {
  /* Acento por defecto (oro de marca). Cada clase de color lo sobreescribe */
  --cv-accent: #C4A760;
  --cv-light: #e0c78a;
  --cv-dark: #876818;
  --cv-glow: 196,167,96;
  background:
    radial-gradient(ellipse 130% 115% at 50% 0%, rgba(var(--cv-glow),0.13) 0%, transparent 52%),
    radial-gradient(ellipse 120% 100% at 32% 0%, #102338 0%, #0a1726 45%, #050b14 100%) !important;
  height: 178px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
/* Patrón de puntos teñido del acento */
.cv-b::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(var(--cv-glow),0.8) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
/* Línea de acento en borde inferior */
.cv-b::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--cv-glow),0.95) 50%, transparent 100%);
  z-index: 10;
  inset: auto;
  top: auto;
}
/* Halo de color difuso detrás del medallón */
.cv-glow {
  position: absolute;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(var(--cv-glow),0.24) 0%, rgba(var(--cv-glow),0.08) 38%, transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
/* Medallón del icono — gradiente del color del curso */
.cv-icon {
  position: relative;
  z-index: 3;
  width: 82px; height: 82px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--cv-light) 0%, var(--cv-accent) 44%, var(--cv-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22),
    0 0 0 6px rgba(var(--cv-glow),0.12),
    0 8px 28px rgba(var(--cv-glow),0.38),
    0 18px 50px rgba(0,0,0,0.38),
    inset 0 1.5px 1px rgba(255,255,255,0.42),
    inset 0 -2px 4px rgba(0,0,0,0.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Brillo diagonal del medallón */
.cv-icon::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 44%);
  pointer-events: none;
}
/* El SVG del icono — blanco para contraste sobre cualquier color */
.cv-icon svg {
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.28));
}
/* Hover: el medallón reacciona con la card */
.curso-card:hover .cv-icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3),
    0 0 0 7px rgba(var(--cv-glow),0.16),
    0 12px 34px rgba(var(--cv-glow),0.5),
    0 20px 56px rgba(0,0,0,0.42),
    inset 0 1.5px 1px rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.22);
}

/* ─── PALETA DE ACENTOS POR CURSO ─────────────────────────────
   Tonos joya ricos que combinan con el navy de marca         */
.cv-amber   { --cv-accent:#C4A760; --cv-light:#e6cf91; --cv-dark:#866417; --cv-glow:196,167,96; }
.cv-emerald { --cv-accent:#10b981; --cv-light:#5eead4; --cv-dark:#047857; --cv-glow:16,185,129; }
.cv-blue    { --cv-accent:#3b82f6; --cv-light:#7cb0fb; --cv-dark:#1d4ed8; --cv-glow:59,130,246; }
.cv-violet  { --cv-accent:#8b5cf6; --cv-light:#b69bfa; --cv-dark:#6d28d9; --cv-glow:139,92,246; }
.cv-cyan    { --cv-accent:#06b6d4; --cv-light:#4fd9ec; --cv-dark:#0e7490; --cv-glow:6,182,212; }
.cv-orange  { --cv-accent:#f59e0b; --cv-light:#fcc24d; --cv-dark:#b45309; --cv-glow:245,158,11; }
.cv-red     { --cv-accent:#ef4444; --cv-light:#f88a8a; --cv-dark:#b91c1c; --cv-glow:239,68,68; }
.cv-lime    { --cv-accent:#84cc16; --cv-light:#b4e85a; --cv-dark:#4d7c0f; --cv-glow:132,204,22; }
.cv-sky     { --cv-accent:#0ea5e9; --cv-light:#54c6f7; --cv-dark:#0369a1; --cv-glow:14,165,233; }
.cv-pink    { --cv-accent:#ec4899; --cv-light:#f586bd; --cv-dark:#be185d; --cv-glow:236,72,153; }
.cv-teal    { --cv-accent:#14b8a6; --cv-light:#5ce0d2; --cv-dark:#0f766e; --cv-glow:20,184,166; }
.cv-btc     { --cv-accent:#f7931a; --cv-light:#fcbf5e; --cv-dark:#c2670a; --cv-glow:247,147,26; }
.cv-indigo  { --cv-accent:#6366f1; --cv-light:#9aa0fa; --cv-dark:#4338ca; --cv-glow:99,102,241; }
.cv-purple  { --cv-accent:#a855f7; --cv-light:#cb9bfc; --cv-dark:#7e22ce; --cv-glow:168,85,247; }

/* Anulamos el cc-* background para los que aún lo tengan */
.cc-1,.cc-2,.cc-3,.cc-4 { background: none !important; }
.curso-btn {
  display: block !important;
  text-align: center !important;
  background: linear-gradient(135deg, #C4A760, #8A6820) !important;
  color: #0B1927 !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  transition: all .2s !important;
  box-shadow: 0 4px 14px rgba(196,167,96,.22) !important;
  text-decoration: none !important;
}
.curso-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(196,167,96,.35) !important;
}
.curso-cat {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #C4A760 !important;
  margin-bottom: 8px !important;
}
.curso-precio {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #C4A760 !important;
}

/* ─── TEMA CATEGORÍA (BLOQUES DE CURSOS) ───────────────────── */
.cursos-tema-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
}
.cursos-tema-header {
  margin-bottom: 32px !important;
  padding: 28px 36px !important;
  background: linear-gradient(135deg, rgba(196,167,96,.06) 0%, transparent 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(196,167,96,.12) !important;
}
.cursos-tema-icon {
  width: 56px; height: 56px;
  background: rgba(196,167,96,.12);
  border: 1px solid rgba(196,167,96,.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #C4A760;
  flex-shrink: 0;
}
.cursos-tema-icon svg { stroke: #C4A760; }

/* ─── ESTADÍSTICAS PROOF ────────────────────────────────────── */
.cursos-proof {
  background: linear-gradient(135deg, rgba(196,167,96,.08) 0%, rgba(196,167,96,.03) 100%) !important;
  border: 1px solid rgba(196,167,96,.15) !important;
  border-radius: 16px !important;
  padding: 28px 40px !important;
  margin-bottom: 48px !important;
}
.cp-num {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  color: #C4A760 !important;
}
.cp-lbl { font-size: .78rem !important; opacity: .6 !important; }

/* ─── NÚMEROS DE SERVICIOS ──────────────────────────────────── */
.serv-numeros {
  padding: 36px 5% !important;
}
.sn-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr)) !important;
  gap: 32px !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
}
.sn-num {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.sn-label {
  font-size: .78rem !important;
  letter-spacing: .5px !important;
  margin-top: 6px !important;
}

/* ─── FITNESS / TRADING / MENTALIDAD CARDS ─────────────────── */
.plan-card, .fit-card, .trad-card {
  border-radius: var(--card-radius) !important;
  transition: all .3s ease !important;
  overflow: hidden;
}
.plan-card:hover, .fit-card:hover, .trad-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ─── PRECIOS CARDS ─────────────────────────────────────────── */
.precio-card, .price-card {
  border-radius: var(--card-radius) !important;
  transition: all .3s ease !important;
}
.precio-card:hover, .price-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ─── TESTIMONIOS: upgrade ──────────────────────────────────── */
.test-card {
  border-radius: var(--card-radius) !important;
  padding: 28px !important;
  position: relative !important;
}
.test-card::before {
  content: '"';
  font-family: 'Cormorant Garamond', serif;
  font-size: 5rem;
  line-height: 1;
  position: absolute;
  top: 12px; left: 24px;
  color: rgba(196,167,96,.15);
  font-weight: 600;
}
.test-card p {
  padding-top: 20px !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
}

/* ─── SECTION HEADER: upgrade ───────────────────────────────── */
.section-label {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.section-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}
.section-sub {
  font-size: .95rem !important;
  line-height: 1.75 !important;
  max-width: 600px !important;
  margin-bottom: 40px !important;
}

/* ─── BOTONES GLOBALES ──────────────────────────────────────── */
.btn-primary, .btn--primary {
  background: linear-gradient(135deg, #C4A760 0%, #8A6820 100%) !important;
  color: #0B1927 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 16px rgba(196,167,96,.3) !important;
  transition: all .2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.btn-primary:hover, .btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(196,167,96,.4) !important;
  filter: brightness(1.05) !important;
}

/* ─── NAV CTA UPGRADE ───────────────────────────────────────── */
.nav-cta {
  background: linear-gradient(135deg, #C4A760 0%, #8A6820 100%) !important;
  color: #0B1927 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
  font-size: .82rem !important;
  transition: all .2s !important;
  box-shadow: 0 2px 10px rgba(196,167,96,.2) !important;
}
.nav-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(196,167,96,.35) !important;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
footer {
  background: #060d14 !important;
  border-top: 1px solid rgba(196,167,96,.12) !important;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .servicios-grid { gap: 16px !important; }
  .servicio-card { padding: 24px !important; }
  .packs-grid { grid-template-columns: 1fr !important; }
  .cursos-tema-header { padding: 20px !important; }
}

/* ─── TEMARIO PLEGABLE EN LAS TARJETAS ──────────────────────────
   Cada tarjeta mostraba sus 8 módulos desplegados y el primero abierto:
   15 tarjetas × 8 acordeones dejaban la página inmanejable. Ahora el
   temario completo vive dentro de un <details> cerrado. */
.curso-temario {
  margin: 18px 0 4px;
  border-top: 1px solid rgba(11,25,39,.08);
}
.curso-temario > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px 12px;
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: #0B1927;
  transition: color .18s ease;
}
.curso-temario > summary::-webkit-details-marker { display: none; }
.curso-temario > summary::marker { content: ''; }
.curso-temario > summary:hover,
.curso-temario[open] > summary { color: #8A6820; }
.curso-temario .ct-meta {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 600;
  color: #6B7A8A;
  white-space: nowrap;
}
.curso-temario .ct-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #C4A760;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.curso-temario[open] .ct-arrow { transform: rotate(180deg); }
.curso-temario .curso-modulos-inner { padding-top: 2px; }

@keyframes ct-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.curso-temario[open] .curso-modulos-inner {
  animation: ct-abrir .3s cubic-bezier(.4,0,.2,1);
}

/* La tarjeta respira mejor con el temario plegado */
.curso-card .curso-stats { margin-bottom: 14px; }
.curso-card .curso-outcomes { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .curso-temario[open] .curso-modulos-inner { animation: none; }
  .curso-temario .ct-arrow { transition: none; }
}