/* ============================================================
   Portal de Saberes — Estilos e Efeitos
   Paleta: Creme quente · Tinta escura · Âmbar como detalhe

   Referências: caderno universitário, biblioteca, mapa de
   rotas, rede de conhecimento, luz de leitura — saber que
   transforma e conecta. Cremes levemente mais fechados (pergaminho),
   alinhados ao login admin do portal.
   ============================================================ */

/* ============================================================
   VARIÁVEIS PORTAL
   ============================================================ */
:root {
    --portal-amber:        #B8880F;
    --portal-amber-light:  #D4A017;
    --portal-amber-pale:   rgba(184,136,15,0.10);
    --portal-amber-border: rgba(184,136,15,0.22);

    --portal-ink:          #2C2C2C;
    --portal-ink-soft:     rgba(44,44,44,0.62);
    --portal-ink-muted:    rgba(44,44,44,0.36);

    --portal-cream:        #E4E0D6;
    --portal-cream-alt:    #D6D2C8;
    --portal-cream-card:   #EFEDE6;
    /* Texto claro sobre tinta / botão primário escuro (não confundir com fundos creme) */
    --portal-cream-bright: #F0EDE5;

    --portal-border:       rgba(44,44,44,0.11);
    --portal-border-hover: rgba(44,44,44,0.18);
    --portal-shadow:       rgba(44,44,44,0.09);

    /* Grade de pontos — caderno/leveza */
    --portal-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.1' fill='rgba(44%2C44%2C44%2C0.09)'/%3E%3C/svg%3E");
    --portal-dots-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.1' fill='rgba(44%2C44%2C44%2C0.09)'/%3E%3C/svg%3E");
    /* Grade invertida para fundo escuro */
    --portal-dots-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.1' fill='rgba(255%2C255%2C255%2C0.05)'/%3E%3C/svg%3E");
}

/* ============================================================
   OVERRIDE / EXTENSÃO DO TEMA PORTAL (light mode)
   ============================================================ */

/* Botões — tinta escura como primário, borda/outline como secundário */
.theme-portal .btn-primary {
    background: var(--portal-ink);
    color: var(--portal-cream-bright);
    box-shadow: none;
}
.theme-portal .btn-primary:hover {
    background: #3C3832;
    color: var(--portal-cream-bright);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(44,44,44,0.18);
}
.theme-portal .btn-secondary {
    background: transparent;
    color: var(--portal-ink);
    border: 1.5px solid rgba(44,44,44,0.22);
}
.theme-portal .btn-secondary:hover {
    background: rgba(44,44,44,0.05);
    border-color: var(--portal-amber);
    color: var(--portal-ink);
    transform: translateY(-2px);
}
.theme-portal .btn-outline {
    color: var(--portal-amber);
    border-color: var(--portal-amber);
}
.theme-portal .btn-outline:hover {
    background: var(--portal-amber);
    color: var(--portal-cream-bright);
}

/* Feature cards — brancos limpos, detalhe âmbar no hover */
.theme-portal .feature-card {
    background: var(--portal-cream-card);
    border: 1px solid var(--portal-border);
    box-shadow: 0 2px 8px var(--portal-shadow);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.theme-portal .feature-card:hover {
    border-color: var(--portal-border-hover);
    box-shadow: 0 8px 32px rgba(44,44,44,0.10);
    transform: translateY(-3px);
}
.theme-portal .feature-card__icon {
    background: var(--portal-amber-pale);
    color: var(--portal-amber);
}
.theme-portal .feature-card__title { color: var(--portal-ink); }
.theme-portal .feature-card__text  { color: var(--portal-ink-soft); }

/* Section labels, títulos, subtítulos */
.theme-portal .section-label   { color: var(--portal-amber); }
.theme-portal .section-title   { color: var(--portal-ink); }
.theme-portal .section-subtitle { color: var(--portal-ink-soft); }

/* Content block */
.theme-portal .content-block p       { color: var(--portal-ink-soft); }
.theme-portal .content-block h3      { color: var(--portal-ink); }
.theme-portal .content-block strong  { color: var(--portal-ink); }
.theme-portal .simple-list li        { color: var(--portal-ink-soft); }
.theme-portal .simple-list li::before { background: var(--portal-amber); }
.theme-portal .highlight-box {
    background: var(--portal-amber-pale);
    border-left-color: var(--portal-amber);
}
.theme-portal .highlight-box p { color: var(--portal-ink-soft); }

/* Value items */
.theme-portal .value-item {
    background: var(--portal-cream-card);
    border-color: var(--portal-border);
    color: var(--portal-ink-soft);
    box-shadow: 0 1px 4px var(--portal-shadow);
}
.theme-portal .value-item i { color: var(--portal-amber); }

/* Section alternada */
.theme-portal .section--alt {
    background: var(--portal-cream-alt);
    background-image: var(--portal-dots);
    background-size: 24px 24px;
}

/* ============================================================
   HERO — REDE DE CONHECIMENTO
   ============================================================ */
.portal-hero {
    background:
        radial-gradient(ellipse 55% 45% at 95% 8%, rgba(184,136,15,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 5% 90%, rgba(44,44,44,0.06) 0%, transparent 55%),
        var(--portal-dots),
        linear-gradient(180deg, var(--portal-cream) 0%, var(--portal-cream-alt) 100%);
    background-size: auto, auto, 24px 24px, auto;
    padding: calc(var(--header-total) + 4.5rem) 0 5rem;
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    display: flex;
    align-items: center;
}

/* Linha âmbar no topo — marcador de página, foco */
.portal-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--portal-amber) 25%,
        var(--portal-amber) 75%,
        transparent 100%);
    z-index: 2;
}

/* Faixa lateral esquerda — bookmark âmbar */
.portal-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom,
        var(--portal-amber) 0%,
        rgba(184,136,15,0.20) 50%,
        transparent 100%);
    z-index: 2;
}

.portal-hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative; z-index: 1;
}

.portal-hero__content { max-width: 560px; }

.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.30rem 0.9rem;
    background: var(--portal-amber-pale);
    border: 1px solid var(--portal-amber-border);
    border-radius: 100px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--portal-amber);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1.75rem;
}

.portal-hero__title {
    font-size: clamp(2.3rem, 4.8vw, 3.9rem);
    font-weight: 900;
    color: var(--portal-ink);
    line-height: 1.08;
    margin-bottom: 1.1rem;
    letter-spacing: -0.03em;
}
.portal-hero__title .acc-a { color: var(--portal-amber); }

.portal-hero__sub {
    font-size: 1.08rem;
    color: var(--portal-ink-soft);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 2.25rem;
}

.portal-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

/* SVG da rede de conhecimento */
.portal-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.portal-rede-svg {
    width: 100%;
    max-width: 380px;
    height: auto;
    opacity: 0.88;
    filter: drop-shadow(0 8px 32px rgba(44,44,44,0.06));
}

/* ============================================================
   DIVISOR EDITORIAL
   ============================================================ */
.portal-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}
.portal-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(44,44,44,0.12), transparent);
}
.portal-divider__line:last-child {
    background: linear-gradient(to left, rgba(44,44,44,0.12), transparent);
}
.portal-divider__mark {
    width: 7px;
    height: 7px;
    background: var(--portal-amber);
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 0.65;
}

/* ============================================================
   CARDS DE TRILHA — borda âmbar lateral
   ============================================================ */
.portal-trilha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.portal-trilha-card {
    background: var(--portal-cream-card);
    border: 1px solid var(--portal-border);
    border-left: 3px solid var(--portal-amber);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.5rem 1.5rem 1.35rem;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    box-shadow: 0 2px 8px var(--portal-shadow);
}
.portal-trilha-card:hover {
    border-left-color: var(--portal-amber-light);
    box-shadow: 0 8px 32px rgba(44,44,44,0.10);
    transform: translateX(4px);
}
.portal-trilha-card__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--portal-amber-pale);
    color: var(--portal-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    flex-shrink: 0;
}
.portal-trilha-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-ink);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}
.portal-trilha-card__text {
    font-size: 0.88rem;
    color: var(--portal-ink-soft);
    line-height: 1.62;
}

/* ============================================================
   CARDS DE FORMAÇÃO — numerados, editoriais
   ============================================================ */
.portal-formacao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}
.portal-formacao-card {
    background: var(--portal-cream-card);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    box-shadow: 0 2px 8px var(--portal-shadow);
}
.portal-formacao-card:hover {
    box-shadow: 0 8px 36px rgba(44,44,44,0.10);
    transform: translateY(-4px);
    border-color: var(--portal-border-hover);
}
/* Acento top no hover */
.portal-formacao-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--portal-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.portal-formacao-card:hover::before { transform: scaleX(1); }

.portal-formacao-card__num {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(184,136,15,0.14);
    letter-spacing: -0.05em;
    margin-bottom: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.portal-formacao-card__icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--portal-amber-pale);
    color: var(--portal-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
}
.portal-formacao-card__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--portal-ink);
    margin-bottom: 0.35rem;
}
.portal-formacao-card__text {
    font-size: 0.87rem;
    color: var(--portal-ink-soft);
    line-height: 1.6;
}

/* ============================================================
   ARQUIVO VIVO — cards de conteúdo
   ============================================================ */
.portal-arquivo-card {
    background: var(--portal-cream-card);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px var(--portal-shadow);
    height: 100%;
    transition: box-shadow var(--transition);
}
.portal-arquivo-card:hover {
    box-shadow: 0 8px 32px rgba(44,44,44,0.10);
}
.portal-arquivo-card .section-label {
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
}
.portal-arquivo-card h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--portal-ink);
    margin-bottom: 0.75rem;
    line-height: 1.25;
}
.portal-arquivo-card p    { color: var(--portal-ink-soft); font-size: 0.93rem; line-height: 1.72; }
.portal-arquivo-card .highlight-box { margin-top: 1.25rem; }

/* ============================================================
   SEÇÃO CLARA COM DOTS (seções internas)
   ============================================================ */
.portal-dots-section {
    background-color: var(--portal-cream);
    background-image: var(--portal-dots);
    background-size: 24px 24px;
}
.portal-dots-section-alt {
    background-color: var(--portal-cream-alt);
    background-image: var(--portal-dots-alt);
    background-size: 24px 24px;
}

/* ============================================================
   CTA — TINTA ESCURA (contraste total, âmbar como detalhe)
   ============================================================ */
.portal-cta {
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(184,136,15,0.06) 0%, transparent 70%),
        var(--portal-dots-inv),
        #1E1A12;
    background-size: auto, 24px 24px, auto;
    padding: var(--section-py) 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.portal-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right,
        transparent,
        var(--portal-amber) 30%,
        var(--portal-amber-light) 50%,
        var(--portal-amber) 70%,
        transparent);
}
.portal-cta .container { position: relative; z-index: 1; }

.portal-cta__title {
    font-size: clamp(1.75rem, 3.8vw, 2.8rem);
    font-weight: 900;
    color: var(--portal-cream-bright);
    margin-bottom: 0.85rem;
    letter-spacing: -0.025em;
    line-height: 1.12;
}
.portal-cta__title .acc-a { color: var(--portal-amber-light); }

.portal-cta__sub {
    font-size: 1.05rem;
    color: rgba(240,237,229,0.68);
    margin-bottom: 2.25rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.72;
}
.portal-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.portal-cta__actions .btn-primary {
    background: var(--portal-amber);
    color: #1E1A12;
    font-weight: 800;
}
.portal-cta__actions .btn-primary:hover {
    background: var(--portal-amber-light);
    color: #1E1A12;
}
.portal-cta__actions .btn-secondary {
    border-color: rgba(240,237,229,0.22);
    color: rgba(240,237,229,0.75);
    background: transparent;
}
.portal-cta__actions .btn-secondary:hover {
    background: rgba(240,237,229,0.07);
    border-color: rgba(240,237,229,0.38);
    color: var(--portal-cream-bright);
    transform: translateY(-2px);
}

/* ============================================================
   CITAÇÃO FOCAL (pull quote para "Para quem é")
   ============================================================ */
.portal-foco-strip {
    background: var(--portal-ink);
    background-image: var(--portal-dots-inv);
    background-size: 24px 24px;
    padding: 3.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.portal-foco-strip::before,
.portal-foco-strip::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--portal-amber) 40%, var(--portal-amber) 60%, transparent);
}
.portal-foco-strip::before { top: 0; }
.portal-foco-strip::after  { bottom: 0; }

.portal-foco-strip .container { position: relative; z-index: 1; }

.portal-foco-strip__text {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: rgba(240,237,229,0.90);
    line-height: 1.55;
    max-width: 680px;
    margin: 0 auto;
    letter-spacing: -0.01em;
}
.portal-foco-strip__text em {
    font-style: normal;
    color: var(--portal-amber-light);
}

/* ============================================================
   PROFESSORES — CARROSSEL E LISTAGEM
   ============================================================ */
.portal-hero--compact { min-height: auto; padding: 3.5rem 0 2rem; }
.portal-hero--compact .portal-hero__title { font-size: clamp(2rem, 4vw, 2.8rem); }

.portal-prof-carousel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: center;
    margin-top: 2rem;
}
.portal-prof-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.portal-prof-carousel__viewport::-webkit-scrollbar { display: none; }
.portal-prof-carousel__track {
    display: flex;
    gap: 1rem;
    padding: .25rem .15rem 1rem;
}
.portal-prof-carousel__nav {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--portal-border);
    background: var(--portal-cream-card);
    color: var(--portal-ink);
    cursor: pointer;
    display: grid; place-items: center;
    transition: border-color .2s, background .2s;
}
.portal-prof-carousel__nav:hover {
    border-color: var(--portal-amber);
    background: var(--portal-amber-pale);
    color: var(--portal-amber);
}
.portal-prof-carousel__cta { text-align: center; margin-top: 1.5rem; }

.portal-prof-card {
    flex: 0 0 min(280px, 78vw);
    scroll-snap-align: start;
    background: var(--portal-cream-card);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    padding: 1.35rem;
    box-shadow: 0 2px 10px var(--portal-shadow);
}
.portal-prof-card__avatar {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--portal-amber), var(--portal-amber-light));
    display: grid; place-items: center; margin-bottom: .85rem;
}
.portal-prof-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-prof-card__avatar span { font-weight: 700; color: var(--portal-cream-bright); font-size: 1.4rem; }
.portal-prof-card__name { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--portal-ink); }
.portal-prof-card__bio { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.5; color: var(--portal-ink-soft); }
.portal-prof-card__cursos { display: flex; flex-wrap: wrap; gap: .35rem; }
.portal-prof-card__chip {
    font-size: .75rem; padding: .2rem .55rem; border-radius: 999px;
    background: var(--portal-amber-pale); color: var(--portal-amber);
    border: 1px solid var(--portal-amber-border);
}
.portal-prof-card__chip--more { background: transparent; color: var(--portal-ink-soft); border-color: var(--portal-border); }

.portal-prof-list { display: grid; gap: 1.25rem; }
.portal-prof-list__item {
    display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem;
    background: var(--portal-cream-card);
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    padding: 1.5rem;
}
.portal-prof-list__avatar {
    width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--portal-amber), var(--portal-amber-light));
    display: grid; place-items: center;
}
.portal-prof-list__avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-prof-list__avatar span { font-size: 2rem; font-weight: 700; color: var(--portal-cream-bright); }
.portal-prof-list__name { margin: 0 0 .65rem; font-size: 1.35rem; color: var(--portal-ink); }
.portal-prof-list__bio { margin: 0 0 1rem; line-height: 1.65; color: var(--portal-ink-soft); }
.portal-prof-list__bio--empty { font-style: italic; opacity: .75; }
.portal-prof-list__cursos h3 {
    margin: 0 0 .45rem; font-size: .85rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--portal-amber);
}
.portal-prof-list__cursos ul { margin: 0; padding-left: 1.1rem; }
.portal-prof-list__cursos li { margin: .25rem 0; }
.portal-prof-list__cursos a { color: var(--portal-ink); text-decoration: none; border-bottom: 1px solid var(--portal-amber-border); }
.portal-prof-list__cursos a:hover { color: var(--portal-amber); }
.portal-prof-list__sem-cursos { margin: 0; font-size: .92rem; color: var(--portal-ink-muted); font-style: italic; }

@media (max-width: 640px) {
    .portal-prof-carousel { grid-template-columns: 1fr; }
    .portal-prof-carousel__nav { display: none; }
    .portal-prof-list__item { grid-template-columns: 1fr; text-align: center; }
    .portal-prof-list__avatar { margin: 0 auto; }
    .portal-prof-list__cursos ul { list-style: none; padding: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .portal-hero .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .portal-hero__visual { display: none; }
    .portal-hero { min-height: auto; }
}
@media (max-width: 640px) {
    .portal-formacao-grid { grid-template-columns: 1fr 1fr; }
    .portal-trilha-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .portal-formacao-grid { grid-template-columns: 1fr; }
}