/* public/assets/css/home-portal.css — portada de PORTAL TEMÁTICO (home-portal.php).
   Sólo aporta el hero y los remates de secciones: las fichas de curso/objeto vienen ya
   estilizadas por app.css (.course-grid / .book-grid). Todo con tokens del sistema →
   claro/oscuro y temas de marca sin CSS extra. */

.portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    margin: 40px auto 8px;
    padding: 48px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.portal-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.portal-hero-copy h1 {
    margin: 0 0 14px;
    font-size: clamp(30px, 4.5vw, 44px);
    line-height: 1.12;
    color: var(--ink);
}
.portal-hero-copy h1 .portal-hero-role {
    display: block;
    margin-top: 6px;
    font-size: clamp(17px, 2.2vw, 22px);
    font-weight: 600;
    color: var(--accent);
}
.portal-hero-bio {
    margin: 0 0 22px;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}
.portal-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.portal-hero-photo { margin: 0; }
.portal-hero-photo img {
    display: block;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.portal-section .portal-course-grid { margin-bottom: 8px; }
.portal-more { margin-top: 26px; text-align: center; }
.portal-more a { color: var(--accent); font-weight: 600; }

@media (max-width: 860px) {
    .portal-hero { grid-template-columns: 1fr; gap: 26px; padding: 30px 22px; margin-top: 22px; }
    .portal-hero-photo { order: -1; }
    .portal-hero-photo img { max-width: 240px; }
}