/* ============================================================
   MATÉRIA EDUCATIVA — 04 · HOME
   Estilização da página inicial: hero, destaques, categorias,
   lista de recentes, seletor de categorias e cabeçalhos internos.
   ============================================================ */

/* -------------------- HERO -------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--fundo-alt);
    border-bottom: 1px solid var(--linha);
    padding: 15px;
}

/* Padrão de grade decorativo ao fundo com máscara radial */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--linha) 70%, transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--linha) 70%, transparent) 1px,
            transparent 1px
        );
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent);
    pointer-events: none;
}

.hero-grade {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.5fr 0.9fr;
    gap: 52px;
    padding: 72px 0;
}

.hero-texto {
    /* Layout natural do bloco de texto */
}

/* Pílula/badge do rótulo do hero */
.hero-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--raio-pill);
    border: 1px solid color-mix(in srgb, var(--link) 30%, transparent);
    background: var(--tinta-link-10);
    padding: 7px 16px;
    color: var(--link);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Ponto pulsante no rótulo */
.hero-rotulo::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acento);
    animation: pulsar 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    flex-shrink: 0;
}

/* Animação de pulso */
@keyframes pulsar {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.hero-titulo {
    font-size: var(--t-3xl);
    color: var(--marca);
}

/* Destaque com gradiente em em e strong do título */
.hero-titulo em,
.hero-titulo strong {
    background-image: var(--grad-acento);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
    font-weight: inherit;
}

.hero-descricao {
    color: var(--texto-suave);
    font-size: var(--t-md);
    line-height: 1.65;
}

/* Grupo de botões do hero */
.hero-acoes {
    display: flex;
    gap: 16px;
    margin-top: var(--esp-6);
    flex-wrap: wrap;
}

/* Cartões de números */
.hero-numeros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.numero-item {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    padding: 20px 24px;
    box-shadow: var(--sombra-1);
    transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}

.numero-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-2);
    border-color: color-mix(in srgb, var(--link) 40%, transparent);
}

.numero-valor {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 800;
    background-image: var(--grad-marca);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 4px;
}

.numero-rotulo {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--texto-suave);
}

/* -------------------- SEÇÕES -------------------- */
.secao-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 38px;
    border-bottom: 1px solid var(--linha);
    padding-bottom: 18px;
}

.secao-titulo {
    font-size: var(--t-xl);
    font-weight: 800;
    color: var(--marca);
    letter-spacing: -0.02em;
}

/* Barrinha colorida decorativa sob o título */
.secao-titulo::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    background: var(--grad-acento);
    border-radius: 2px;
    margin-top: 10px;
}

.secao-link {
    color: var(--link);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--t-rapida), transform var(--t-rapida);
}

.secao-link::after {
    content: " →";
    display: inline-block;
    transition: transform var(--t-media);
}

.secao-link:hover {
    color: var(--link-hover);
}

.secao-link:hover::after {
    transform: translateX(4px);
}

/* Wrappers de seções */
.destaques,
.categorias-home,
.recentes,
.relacionados {
    padding: 64px 0;
}

/* -------------------- DESTAQUES -------------------- */
.destaque-grade {
    display: grid;
    gap: 48px;
    margin-top: 28px;
}

.destaque-principal {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 32px;
    box-shadow: var(--sombra-1);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}

/* Barra colorida no topo do destaque principal */
.destaque-principal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--grad-acento);
}

.destaque-principal:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: color-mix(in srgb, var(--link) 30%, transparent);
}

.destaque-principal .cartao-categoria {
    margin-bottom: 8px;
}

.destaque-titulo {
    font-size: var(--t-2xl);
    color: var(--marca);
    margin-bottom: 12px;
}

.destaque-titulo a {
    color: var(--marca);
}

.destaque-titulo a:hover {
    color: var(--link);
}

.destaque-resumo {
    color: var(--texto-suave);
    font-size: var(--t-md);
    margin-bottom: 16px;
    line-height: 1.6;
}

.destaque-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* -------------------- CARTÕES -------------------- */
.cartao {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    padding: 22px;
    transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
    box-shadow: var(--sombra-0);
}

.cartao:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: color-mix(in srgb, var(--link) 35%, transparent);
}

/* Variantes de cartão */
.cartao-padrao {
    /* Dimensões padrão */
}

.cartao-largo {
    /* Pode ocupar mais espaço em grid */
}

.cartao-compacto {
    padding: 16px 18px;
}

/* Badge de categoria no cartão */
.cartao-categoria {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tinta-link-10);
    color: var(--link);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--raio-pill);
    padding: 4px 11px;
    transition: color var(--t-rapida), background var(--t-rapida);
    margin-bottom: 8px;
}

.cartao-categoria:hover {
    color: var(--link-hover);
    background: color-mix(in srgb, var(--link) 16%, transparent);
}

.cartao-titulo {
    font-size: var(--t-md);
    color: var(--marca);
    margin: 0 0 8px;
    line-height: 1.32;
}

.cartao-titulo a {
    color: var(--marca);
    transition: color var(--t-rapida);
}

.cartao-titulo a:hover {
    color: var(--link);
}

.cartao-resumo {
    color: var(--texto-suave);
    font-size: var(--t-sm);
    margin-bottom: 12px;
    line-height: 1.6;
}

.cartao-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: var(--t-xs);
    color: var(--texto-suave);
    margin: 0;
}

/* Grids de artigos */
.grade-artigos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 28px;
}

.grade-tres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* -------------------- CATEGORIAS -------------------- */
.categoria-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.categoria-cartao {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    padding: 26px;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-media), box-shadow var(--t-media), background var(--t-media);
    box-shadow: var(--sombra-0);
}

/* Círculo decorativo difuso no canto superior direito */
.categoria-cartao::after {
    content: "";
    position: absolute;
    top: -20px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: var(--tinta-acento-14);
    border-radius: 50%;
    filter: blur(18px);
    transition: transform var(--t-media);
    pointer-events: none;
}

.categoria-cartao:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    background: var(--fundo-alt);
}

.categoria-cartao:hover::after {
    transform: scale(1.3);
}

.categoria-cartao-titulo {
    font-size: var(--t-md);
    color: var(--marca);
    margin: 0 0 8px;
    font-weight: 800;
}

.categoria-cartao-titulo a {
    color: var(--marca);
}

.categoria-cartao-titulo a:hover {
    color: var(--link);
}

.categoria-cartao-texto {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    margin-bottom: 12px;
    line-height: 1.6;
}

.categoria-cartao-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tinta-link-10);
    color: var(--link);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--raio-pill);
    padding: 4px 11px;
    margin: 0;
}

/* -------------------- LISTA DE LINHAS -------------------- */
.lista-linhas {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 28px;
}

.linha-artigo {
    display: grid;
    grid-template-columns: 200px 1fr 160px;
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border-radius: var(--raio-m);
    border: 1px solid transparent;
    transition: background var(--t-media), border-color var(--t-media), transform var(--t-media);
}

.linha-artigo + .linha-artigo {
    border-top: 1px solid var(--linha);
}

.linha-artigo:hover {
    background: var(--fundo-alt);
    border-color: var(--linha);
    transform: translateX(4px);
}

.linha-categoria {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tinta-link-10);
    color: var(--link);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--raio-pill);
    padding: 4px 11px;
    white-space: nowrap;
    transition: color var(--t-rapida);
}

.linha-categoria:hover {
    color: var(--link-hover);
}

.linha-titulo {
    font-weight: 700;
    color: var(--marca);
    font-size: var(--t-md);
    transition: color var(--t-rapida);
}

.linha-titulo:hover {
    color: var(--link);
}

.linha-data {
    font-size: var(--t-xs);
    color: var(--texto-suave);
    text-align: right;
}

/* -------------------- SELETOR DE CATEGORIAS -------------------- */
.seletor {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 28px;
}

.seletor-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--linha-forte);
    background: transparent;
    color: var(--texto);
    border-radius: var(--raio-pill);
    padding: 9px 18px;
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-media), color var(--t-media), border-color var(--t-media), transform var(--t-media), box-shadow var(--t-media);
}

.seletor-item:hover {
    border-color: var(--link);
    color: var(--link);
    background: var(--tinta-link-10);
    transform: translateY(-2px);
    box-shadow: var(--sombra-1);
}

.seletor-ativo {
    background: var(--grad-marca);
    color: var(--sobre-grad);
    border-color: transparent;
    box-shadow: var(--sombra-1);
}

.seletor-ativo:hover {
    color: var(--sobre-grad);
    border-color: transparent;
    background: var(--grad-marca);
    filter: saturate(1.1) brightness(1.05);
}

.seletor-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    font-size: var(--t-xs);
    font-weight: 700;
}

/* -------------------- CABEÇALHO DE PÁGINA INTERNA -------------------- */
.pagina-cabecalho {
    padding: 30px;
    border-bottom: 1px solid var(--linha);
    margin-bottom: 38px;
}

.pagina-titulo {
    font-size: var(--t-2xl);
    color: var(--marca);
    margin: 0 0 12px;
}

.pagina-descricao {
    font-size: var(--t-md);
    color: var(--texto-suave);
    margin: 0;
    max-width: 66ch;
    line-height: 1.65;
}

.pagina-meta {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    margin-top: 12px;
}

/* -------------------- RESPONSIVO -------------------- */
@media (max-width: 1000px) {
    .hero-grade {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 52px 0;
    }

    .hero-numeros {
        grid-template-columns: repeat(3, 1fr);
    }

    .destaque-grade {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .categoria-grade,
    .grade-tres {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .grade-artigos,
    .grade-tres,
    .categoria-grade {
        grid-template-columns: 1fr;
    }

    .hero-numeros {
        grid-template-columns: 1fr;
    }

    .linha-artigo {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .linha-data {
        text-align: left;
    }

    .destaques,
    .categorias-home,
    .recentes,
    .relacionados {
        padding: 44px 0;
    }

    .destaque-principal {
        padding: 24px;
    }
}