/* ====================================================================
   Páginas de programas (/programas y /programas/{slug})
   Usa las variables y componentes de professional.css (tarjetas de curso,
   banda de inscripción, portadas de marca, botones).
   ==================================================================== */

/* ---- Hero ---- */
.prog-hero {
    position: relative;
    background:
        radial-gradient(60% 90% at 88% 10%, rgba(245, 179, 1, .20), transparent 60%),
        radial-gradient(50% 80% at 8% 100%, rgba(0, 87, 168, .45), transparent 60%),
        linear-gradient(135deg, #04162b 0%, #0b2a52 60%, #04162b 100%);
    color: #fff;
    padding: 46px 0 56px;
    overflow: hidden;
}
.prog-hero .container { position: relative; }
.prog-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .85rem; color: #b9cdea; margin-bottom: 26px;
}
.prog-breadcrumb a { color: #fce286; text-decoration: none; font-weight: 600; }
.prog-breadcrumb a:hover { text-decoration: underline; }
.prog-breadcrumb [aria-current] { color: #fff; font-weight: 600; }
.prog-icon {
    width: 66px; height: 66px; border-radius: 18px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
    color: #1d1500; background: linear-gradient(135deg, #fce286, var(--accent-color));
    box-shadow: 0 12px 28px rgba(245, 179, 1, .35);
}
.prog-hero h1 {
    font-family: var(--font-head); font-weight: 800; color: #fff;
    font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; margin-bottom: 12px; max-width: 900px;
}
.prog-lead { font-size: clamp(1rem, 1.9vw, 1.2rem); color: #dbe7f8; max-width: 720px; margin-bottom: 22px; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.prog-chips span {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .09); border: 1px solid rgba(245, 179, 1, .4);
    color: #fce286; font-family: var(--font-head); font-weight: 700; font-size: .84rem;
    padding: 7px 15px; border-radius: var(--radius-pill);
}
.prog-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Secciones ---- */
.prog-section { padding: 64px 0; }
.prog-narrow { max-width: 860px; }
.prog-intro h2, .prog-sec-head h2 {
    font-family: var(--font-head); color: var(--ink);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 12px;
}
.prog-intro p { color: var(--text-dark); font-size: 1.06rem; line-height: 1.85; margin-bottom: 16px; }
.prog-sec-head { text-align: center; margin: 0 auto 36px; max-width: 760px; }
.prog-sec-head p { color: var(--text-light); }
.prog-courses { background: var(--bg-light); }
.prog-steps-sec { background: #fff; }

/* ---- Cómo empezar ---- */
.prog-steps {
    list-style: none; padding: 0; margin: 0 auto; max-width: 980px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.prog-steps li {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 30px 24px 26px; text-align: center; box-shadow: var(--shadow-sm);
}
.prog-step-n {
    width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-deep));
    box-shadow: 0 8px 18px rgba(0, 87, 168, .28);
}
.prog-steps h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }
.prog-steps p { font-size: .92rem; color: var(--text-light); line-height: 1.6; }

/* ---- Promoción del evento ---- */
.prog-evento { padding: 36px 0; background: #fff; }
.prog-evento-box {
    display: flex; flex-direction: column; gap: 6px; text-decoration: none;
    background: linear-gradient(135deg, #04162b, #0b2a52); color: #cfe0f7;
    border: 1px solid rgba(245, 179, 1, .5); border-radius: 18px; padding: 22px 26px;
    box-shadow: var(--shadow-md);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prog-evento-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prog-evento-box strong { font-family: var(--font-head); font-size: 1.25rem; color: #fff; }
.prog-evento-tag {
    align-self: flex-start; background: var(--accent-color); color: #1d1500;
    font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .5px;
    text-transform: uppercase; padding: 4px 11px; border-radius: var(--radius-pill);
}
.prog-evento-box span:last-child i { color: #fce286; margin-left: 4px; }

/* ---- Programas relacionados ---- */
.prog-related-sec { background: var(--bg-light); }
.prog-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.prog-related a {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 22px 14px; text-decoration: none; box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.prog-related a:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-color); }
.prog-related i { font-size: 1.5rem; color: var(--primary-color); }
.prog-related span { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.prog-related small { color: var(--text-light); }

/* ---- Índice de programas ---- */
.prog-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.prog-card {
    display: flex; flex-direction: column; text-decoration: none; min-width: 0;
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 28px 26px; box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.prog-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--accent-color); }
.prog-card-icon {
    width: 58px; height: 58px; border-radius: 16px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-deep));
    box-shadow: 0 10px 22px rgba(0, 87, 168, .28);
}
.prog-card h2 { font-family: var(--font-head); font-size: 1.25rem; color: var(--ink); margin-bottom: 8px; line-height: 1.25; }
.prog-card p { color: var(--text-light); font-size: .94rem; line-height: 1.6; margin-bottom: 14px; }
.prog-card ul { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.prog-card li {
    font-size: .88rem; color: var(--text-dark); padding: 7px 0 7px 22px; position: relative;
    border-top: 1px dashed var(--border-color);
}
.prog-card li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--accent-color); }
.prog-card-more { font-family: var(--font-head); font-weight: 700; color: var(--primary-color); display: inline-flex; align-items: center; gap: 8px; }
.prog-card:hover .prog-card-more i { transform: translateX(5px); }
.prog-card-more i { transition: transform .3s var(--ease); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .prog-steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 640px) {
    .prog-hero { padding: 34px 0 40px; }
    .prog-section { padding: 46px 0; }
    .prog-cta .btn { flex: 1 1 100%; }
    .prog-hub-grid { grid-template-columns: minmax(0, 1fr); }
    .prog-evento-box { padding: 18px; }
}