/* ── Variables (reutiliza ck-*) ────────────────────────────────── */
:root {
    --ck-primary:   #35536A;
    --ck-primary-h: #2c4457;
    --ck-green:     #1a9e5c;
    --ck-green-lt:  #e8f7f0;
    --ck-border:    #e4e8ed;
    --ck-bg:        #f5f7fa;
    --ck-text:      #1a2433;
    --ck-muted:     #7a8898;
    --ck-radius:    14px;
    --ck-shadow:    0 4px 24px rgba(0,0,0,0.07);
}

/* ── Breadcrumb bar ──────────────────────────────────────────── */
.cp-breadcrumb-bar {
    background: var(--ck-primary);
    padding: 14px 0;
    /* Placeholder: proximamente imagen de fondo aqui */
}
.cp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    flex-wrap: wrap;
}
.cp-bc-link {
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s;
}
.cp-bc-link:hover { color: #fff; text-decoration: none; }
.cp-bc-sep { color: rgba(255,255,255,0.4); font-size: 0.65rem; }
.cp-bc-active {
    color: #fff;
    font-weight: 500;
    opacity: 0.9;
}

/* ── Hero image ──────────────────────────────────────────────── */
.cp-img-cover {
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow);
    background-color: var(--ck-primary-h);
}

/* ── Layout ──────────────────────────────────────────────────── */
.cp-section { background: var(--ck-bg); }

/* ── Card principal ──────────────────────────────────────────── */
.cp-card {
    background: #fff;
    border-radius: var(--ck-radius);
    border: 1.5px solid var(--ck-border);
    box-shadow: var(--ck-shadow);
    overflow: hidden;
}
.cp-card-body { padding: 28px 30px; }

/* ── Badges ──────────────────────────────────────────────────── */
.cp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}
.cp-badge-blue  { background: #e8f0f7; color: var(--ck-primary); }
.cp-badge-info  { background: #e3f2fd; color: #0277bd; }
.cp-badge-green { background: var(--ck-green-lt); color: var(--ck-green); }
.cp-badge-price { background: #fff3cd; color: #856404; border: 1px solid #f0d060; }
.cp-badge-date  { background: #f0f4f8; color: var(--ck-muted); }

/* ── Section title ───────────────────────────────────────────── */
.cp-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ck-primary);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ck-border);
}

/* ── Descripción ─────────────────────────────────────────────── */
.cp-desc-texto {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--ck-text);
    white-space: pre-line;
}

/* ── Info grid ───────────────────────────────────────────────── */
.cp-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.cp-info-item {
    background: #fff;
    border: 1.5px solid var(--ck-border);
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cp-info-item i {
    font-size: 1.3rem;
    color: var(--ck-primary);
    flex-shrink: 0;
}
.cp-info-item div { display: flex; flex-direction: column; }
.cp-info-item strong { font-size: 0.83rem; color: var(--ck-text); font-weight: 700; }
.cp-info-item span  { font-size: 0.73rem; color: var(--ck-muted); }

/* ── Action card ─────────────────────────────────────────────── */
.cp-sticky-card { position: sticky; top: 24px; }

.cp-action-card {
    background: #fff;
    border-radius: var(--ck-radius);
    border: 1.5px solid var(--ck-border);
    box-shadow: var(--ck-shadow);
    padding: 24px 22px;
}

/* Precio */
.cp-action-precio {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 1.5px solid var(--ck-border);
    margin-bottom: 18px;
}
.cp-precio-valor {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--ck-text);
    letter-spacing: -1px;
}
.cp-precio-label { font-size: 0.73rem; color: var(--ck-muted); display: block; margin-top: 2px; }
.cp-precio-ext   { font-size: 0.73rem; color: var(--ck-muted); display: block; margin-top: 4px; }
.cp-precio-gratis {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ck-green);
}

/* Botones */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .2s;
}
.cp-btn-primary { background: var(--ck-primary); color: #fff; }
.cp-btn-primary:hover { background: var(--ck-primary-h); color: #fff; transform: translateY(-1px); }

.cp-btn-green {
    background: linear-gradient(135deg, var(--ck-green), #16874e);
    color: #fff;
    box-shadow: 0 3px 12px rgba(26,158,92,.2);
}
.cp-btn-green:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(26,158,92,.35); color: #fff; }

.cp-btn-outline {
    background: transparent;
    color: var(--ck-primary);
    border: 1.5px solid var(--ck-primary);
}
.cp-btn-outline:hover { background: var(--ck-primary); color: #fff; }

.cp-btn-ghost {
    background: transparent;
    color: var(--ck-muted);
    border: 1.5px solid var(--ck-border);
}
.cp-btn-ghost:hover { border-color: var(--ck-primary); color: var(--ck-primary); }

/* Info list */
.cp-action-info {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    border-top: 1.5px solid var(--ck-border);
    padding-top: 14px;
}
.cp-action-info li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--ck-muted);
    padding: 5px 0;
}
.cp-action-info li i { color: var(--ck-primary); font-size: 0.9rem; }

/* Share */
.cp-action-share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1.5px solid var(--ck-border);
}
.cp-share-label { font-size: 0.78rem; color: var(--ck-muted); font-weight: 600; margin-right: 2px; }
.cp-share-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ck-bg);
    border: 1.5px solid var(--ck-border);
    color: var(--ck-muted);
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}
.cp-share-btn:hover    { background: var(--ck-primary); border-color: var(--ck-primary); color: #fff; }
.cp-share-wa:hover     { background: #25d366; border-color: #25d366; color: #fff; }
.cp-share-li:hover     { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.cp-share-copy:hover   { background: var(--ck-green); border-color: var(--ck-green); color: #fff; }

/* ── Cursos relacionados ─────────────────────────────────────── */
.cp-relacionados-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ck-border);
}
.cp-relacionados-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ck-text);
    margin: 0;
}
.cp-rel-ver-todos {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ck-primary);
    text-decoration: none;
    display: flex; align-items: center; gap: 4px;
    transition: gap .2s;
}
.cp-rel-ver-todos:hover { color: var(--ck-primary-h); gap: 8px; }

.cp-rel-card {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--ck-radius);
    border: 1.5px solid var(--ck-border);
    box-shadow: var(--ck-shadow);
    overflow: hidden;
    text-decoration: none;
    transition: all .25s;
    height: 100%;
}
.cp-rel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    border-color: var(--ck-primary);
}
.cp-rel-img { height: 200px; overflow: hidden; }
.cp-rel-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}
.cp-rel-card:hover .cp-rel-img img { transform: scale(1.06); }
.cp-rel-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.cp-rel-horas  { font-size: 0.75rem; color: var(--ck-muted); font-weight: 600; margin-bottom: 6px; }
.cp-rel-titulo { font-size: 0.93rem; font-weight: 700; color: var(--ck-text); margin-bottom: 6px; line-height: 1.3; }
.cp-rel-desc   { font-size: 0.81rem; color: var(--ck-muted); flex: 1; margin-bottom: 12px; line-height: 1.5; }
.cp-rel-link   { font-size: 0.82rem; font-weight: 700; color: var(--ck-primary); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .cp-hero-titulo { font-size: 1.5rem; }
    .cp-hero-banner { min-height: 220px; }
    .cp-info-grid { grid-template-columns: repeat(2, 1fr); }
    .cp-card-body { padding: 20px 18px; }
}
@media (max-width: 575px) {
    .cp-hero-titulo { font-size: 1.2rem; }
    .cp-hero-banner { min-height: 180px; }
    .cp-info-grid { grid-template-columns: repeat(2, 1fr); }
    .cp-precio-valor { font-size: 1.8rem; }
}