/* ============================================================
   Página pilar: Aprender a programar gratis
   Alineada con el resto del sitio y con /ejemplos/:
   - las CAJAS con fondo de color usan el color del nav-bar (#2c3e50 plano)
   - títulos #2c3e50, texto secundario #5f6c72
   - tarjetas radius 8px, sombra 0 2px 10px rgba(0,0,0,.1), hover -5px
   ============================================================ */
:root {
    --apr-navy: #2c3e50;
    --apr-navy-2: #34495e;
    --apr-grad: #2c3e50;              /* (nombre histórico; ahora color plano) */
    --apr-link: #4f46c9;
    --apr-ink: #2c3e50;
    --apr-body: #384049;
    --apr-muted: #5f6c72;
    --apr-border: #e6e8ee;
    --apr-card-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.aprender-article { max-width: 900px; margin: 0 auto; padding: 1.5rem 0 3rem; }

/* ---------- breadcrumb ---------- */
.aprender-breadcrumb { font-size: .85rem; color: var(--apr-muted); margin-bottom: 1.2rem; }
.aprender-breadcrumb a { color: var(--apr-link); text-decoration: none; font-weight: 600; }
.aprender-breadcrumb a:hover { text-decoration: underline; }
.aprender-breadcrumb span { margin: 0 .4rem; opacity: .7; }

/* ---------- hero ---------- */
.aprender-hero {
    position: relative;
    background: var(--apr-navy);
    color: #fff;
    border-radius: 14px;
    padding: 2.6rem 2.2rem;
    margin-bottom: 2.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.aprender-hero::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%);
    pointer-events: none;
}
.aprender-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .35rem .8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.aprender-hero h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 .8rem;
    line-height: 1.2;
}
.aprender-lead { font-size: 1.1rem; line-height: 1.65; opacity: .97; margin: 0 0 1.5rem; max-width: 46ch; }
.aprender-lead strong { color: #fff; font-weight: 800; }

.aprender-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.aprender-btn {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: .95rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.aprender-btn-primary { background: #fff; color: var(--apr-navy); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.aprender-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.aprender-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.aprender-btn-ghost:hover { background: rgba(255, 255, 255, .22); transform: translateY(-3px); }

/* ---------- secciones ---------- */
.aprender-section { margin-bottom: 2.8rem; }
.aprender-section > h2 {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--apr-ink);
    margin: 0 0 1.1rem;
    padding-bottom: .55rem;
    position: relative;
}
.aprender-section > h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 60px; height: 3px;
    border-radius: 3px;
    background: var(--apr-navy);
}
.aprender-section > p { line-height: 1.75; color: var(--apr-body); margin: 0 0 1rem; }
.aprender-section a { color: var(--apr-link); font-weight: 600; }
.aprender-section a:hover { text-decoration: underline; }

/* ---------- tarjetas "¿por dónde empiezo?" ---------- */
.aprender-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem;
    margin-top: 1.3rem;
}
.aprender-card {
    border: 1px solid var(--apr-border);
    border-top: 3px solid var(--apr-navy);
    border-radius: 8px;
    padding: 1.3rem;
    background: #fff;
    box-shadow: var(--apr-card-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.aprender-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0, 0, 0, .14); }
.aprender-card-emoji { font-size: 1.9rem; display: block; margin-bottom: .5rem; }
.aprender-card h3 { font-size: 1.03rem; margin: 0 0 .45rem; color: var(--apr-ink); line-height: 1.3; }
.aprender-card p { font-size: .9rem; margin: 0 0 .8rem; color: var(--apr-muted); line-height: 1.55; }
.aprender-card a { font-weight: 700; text-decoration: none; font-size: .9rem; }

/* ---------- ruta paso a paso ---------- */
.aprender-ruta { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1.4rem; }
.aprender-paso {
    display: flex;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid var(--apr-border);
    border-left: 4px solid var(--apr-navy);
    border-radius: 8px;
    padding: 1.3rem 1.4rem;
    box-shadow: var(--apr-card-shadow);
}
.aprender-num {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--apr-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
}
.aprender-paso-body { flex: 1; min-width: 0; }
.aprender-paso-body h3 { margin: .3rem 0 .5rem; font-size: 1.15rem; color: var(--apr-ink); }
.aprender-paso-body p { color: var(--apr-body); margin: 0 0 .5rem; line-height: 1.6; }
.aprender-paso-body ul { margin: .5rem 0 0; padding-left: 1.2rem; line-height: 1.95; }
.aprender-paso-body li { color: var(--apr-body); }

/* ---------- índice de contenido ---------- */
.aprender-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.4rem;
    margin-top: 1.4rem;
}
.aprender-index-col {
    background: #fff;
    border: 1px solid var(--apr-border);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--apr-card-shadow);
}
.aprender-index-col h3 {
    font-size: 1rem;
    color: var(--apr-ink);
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--apr-border);
}
.aprender-index-col ul { list-style: none; margin: 0; padding: 0; line-height: 2.05; }
.aprender-index-col a { text-decoration: none; font-weight: 600; font-size: .92rem; }

/* ---------- FAQ ---------- */
.aprender-faq { margin-top: 1.3rem; }
.aprender-faq details {
    border: 1px solid var(--apr-border);
    border-radius: 8px;
    padding: .95rem 1.15rem;
    margin-bottom: .7rem;
    background: #fff;
    box-shadow: var(--apr-card-shadow);
}
.aprender-faq summary {
    font-weight: 700;
    color: var(--apr-ink);
    cursor: pointer;
    list-style: none;
    padding-left: 1.4rem;
    position: relative;
}
.aprender-faq summary::-webkit-details-marker { display: none; }
.aprender-faq summary::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--apr-navy);
    transition: transform .2s ease;
}
.aprender-faq details[open] summary::before { transform: rotate(90deg); }
.aprender-faq p { margin: .8rem 0 0; line-height: 1.7; color: var(--apr-body); }
.aprender-faq a { color: var(--apr-link); font-weight: 600; }

/* ---------- cierre ---------- */
.aprender-final {
    text-align: center;
    background: #f7f8fb;
    border: 1px solid var(--apr-border);
    border-radius: 12px;
    padding: 2.2rem;
}
.aprender-final h2 { padding-bottom: .8rem; }
.aprender-final h2::after { left: 50%; transform: translateX(-50%); }
.aprender-final .aprender-cta-row { justify-content: center; }
.aprender-final .aprender-btn-primary { background: var(--apr-navy); color: #fff; }
.aprender-final .aprender-btn-primary:hover { background: var(--apr-navy-2); }
.aprender-final .aprender-btn-ghost { border-color: var(--apr-navy); color: var(--apr-ink); background: transparent; }
.aprender-final .aprender-btn-ghost:hover { background: rgba(44, 62, 80, .08); }

/* ---------- modo oscuro ---------- */
.dark-theme .aprender-section > h2 { color: #e8eaed; }
.dark-theme .aprender-section > p,
.dark-theme .aprender-paso-body p,
.dark-theme .aprender-paso-body li { color: #c7ccd4; }
.dark-theme .aprender-card,
.dark-theme .aprender-paso,
.dark-theme .aprender-index-col,
.dark-theme .aprender-faq details { background: #1c1c1c; border-color: #2e2e2e; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.dark-theme .aprender-card { border-top-color: #3d5871; }
.dark-theme .aprender-paso { border-left-color: #3d5871; }
.dark-theme .aprender-card h3,
.dark-theme .aprender-paso-body h3,
.dark-theme .aprender-index-col h3,
.dark-theme .aprender-faq summary { color: #e2e4e8; }
.dark-theme .aprender-card p { color: #b9bdc6; }
.dark-theme .aprender-index-col h3 { border-bottom-color: #2e2e2e; }
.dark-theme .aprender-faq p { color: #c7ccd4; }
.dark-theme .aprender-section a,
.dark-theme .aprender-breadcrumb a,
.dark-theme .aprender-faq a { color: #9db2ff; }
.dark-theme .aprender-final { background: #181818; border-color: #2e2e2e; }
.dark-theme .aprender-final .aprender-btn-ghost { color: #cdd3db; border-color: #3d5871; }
.dark-theme .aprender-breadcrumb { color: #9aa1ac; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
    .aprender-hero { padding: 1.9rem 1.4rem; }
    .aprender-section > h2 { font-size: 1.35rem; }
    .aprender-paso { flex-direction: column; gap: .8rem; }
}