/* =========================
   VARIÁVEIS DE LAYOUT - PADRONIZADAS
========================= */

:root {
    --home-max-width: 1450px; /* Aumentado para igualar o Header */
    --home-padding: 20px;
}

/* =========================
   BASE HOME
========================= */

.home-ancesgen {
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding: 0 var(--home-padding);
    box-sizing: border-box; /* Garante que o padding não estique o site */
}

/* REMOVE ISTO OU COMENTA: Era o que causava o desvio de 15px/145px */
.home-ancesgen > section {
    margin-left: 0; 
    margin-right: 0;
    margin-top: 40px;
    margin-bottom: 40px;
}
/* =========================
   GRID
========================= */

.home-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* =========================
   CARDS
========================= */

.card-destaque {
    grid-column: span 2;
    background: #daecda;
}

.section2-card {
    grid-column: span 1;
}

.destaque-direita {
    grid-column: span 2;
    background: #eeeeee;
}

.card-col {
    background: #ffffff;
}

.card-inner {
    padding: 15px;
}

/* =========================
   META
========================= */

.card-meta {
    display: flex;
    justify-content: space-between;
    font-family: Arial, sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    margin: 8px 0;
}

.tag {
    color: red;
}

.date {
    color: #333;
}

/* =========================
   TEXTO PADRÃO
========================= */

/* =========================
   TÍTULOS
========================= */

.card-title {
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold; /* <-- FALTAVA ISSO */
    color: #000000;
    margin: 6px 0;
}

.card-excerpt {
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

/* =========================
   ÁREA INSTITUCIONAL
========================= */

.card-institucional-inner {
    position: relative;
}

/* Contatos (direita) */
.institucional-contatos {
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    text-align: right;
}

/* Endereço (esquerda) */
.institucional-endereco {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 100px; /* espaço entre contatos e endereço */
}

/* =========================
   DIVISOR CUSTOMIZADO
========================= */

.institucional-divisor {
    position: relative;
    border: none;
    height: 2px;
    background: #000000;
    margin: 20px 0;
}

/* Reforço no canto direito */
.institucional-divisor::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;        /* trecho mais grosso */
    height: 4px;       /* +1px de espessura */
    background: #000000;
}

/* =========================
   IMAGEM INSTITUCIONAL
========================= */

.institucional-imagem {
    display: flex;
    justify-content: flex-end;
}

.institucional-imagem img {
    width: 300px;
    height: 210px;
    object-fit: contain;
    display: block;
}

/* =========================
   IMAGENS GERAIS
========================= */

.card-inner img {
    width: 100%;
    display: block;
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 768px) {

    .home-grid-4 {
        grid-template-columns: 1fr;
    }

    .card-destaque,
    .destaque-direita {
        grid-column: span 1;
    }

    .institucional-contatos {
        position: static;
        margin-bottom: 15px;
        text-align: left;
    }

    .institucional-endereco {
        margin-top: 20px;
    }

    .institucional-imagem {
        justify-content: flex-start;
    }

}
/* =========================
   SEÇÃO 2 — ÁREA INSTITUCIONAL
========================= */

.destaque-direita {
    grid-column: span 2;
    background: #eeeeee;
}

.card-institucional-inner {
    position: relative;
}

/* Contatos (direita) */
.institucional-contatos {
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    text-align: right;
}

/* Endereço (esquerda) */
.institucional-endereco {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 100px; /* padrão definido por você */
}

/* Divisor padrão AncesGen */
.institucional-divisor {
    position: relative;
    border: none;
    height: 2px;
    background: #000000;
    margin: 20px 0;
}

.institucional-divisor::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 4px;
    background: #000000;
}

/* Imagem institucional */
.institucional-imagem {
    display: flex;
    justify-content: flex-end;
}

.institucional-imagem img {
    width: 300px;
    height: 210px;
    object-fit: contain;
    display: block;
}

/* Responsivo específico da seção 2 */
@media (max-width: 768px) {

    .institucional-contatos {
        position: static;
        margin-bottom: 15px;
        text-align: left;
    }

    .institucional-endereco {
        margin-top: 20px;
    }

    .institucional-imagem {
        justify-content: flex-start;
    }

}
/* =========================
   META — CATEGORIA + DATA
========================= */

.card-meta span {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #c00000; /* vermelho */
    text-transform: uppercase;
}
/* =========================
   AJUSTE DE ALINHAMENTO
   Cards vs Destaque
========================= */

/* Remove padding dos cards normais */
.card-col .card-inner {
    padding: 0;
}

/* Mantém padding apenas no destaque */
.card-destaque .card-inner {
    padding: 15px;
}

/* Garante que imagens dos cards encostem no topo */
.card-col img {
    margin-top: 0;
    display: block;
}
/* =========================
   IMAGENS DAS COLUNAS
   (PADRÃO QUASE QUADRADO)
========================= */

/* Container da imagem nos cards */
.card-col img {
    width: 100%;
    aspect-ratio: 3 / 2; /* quase quadrado */
    object-fit: cover;
    display: block;
}

/* =========================
   IMAGENS DOS CARDS
   PADRÃO EDITORIAL 3:2
========================= */

/* Cards normais (todas as seções) */
.card-col img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    margin-top: 0;
}

/* Destaques (Seção 1 e 3) */
.card-destaque img {
    width: 100%;
    aspect-ratio: 16 / 9; /* destaque mais horizontal */
    object-fit: cover;
    display: block;
    margin-top: 10px;
}

/* =========================
   EXPANSÃO LATERAL DO CONTEÚDO
   (usar o espaço dos lados)
========================= */

.home-ancesgen > section {
    margin-left: -145px;
    margin-right: -100px;
}
/* =========================
   CORREÇÃO MOBILE — SEM SCROLL HORIZONTAL
========================= */

@media (max-width: 768px) {
    .home-ancesgen > section {
        margin-left: 0;
        margin-right: 0;
    }
}
/* =========================
   MOBILE — SEÇÃO 2 (TOPO INSTITUCIONAL)
========================= */

@media (max-width: 768px) {

    .card-institucional-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    /* CONTATOS — direita, primeiro */
    .institucional-contatos {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    /* ENDEREÇO — esquerda, abaixo dos contatos */
    .institucional-endereco {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }

    /* DIVISOR — linha inteira, abaixo dos textos */
    .institucional-divisor {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* IMAGEM — SEMPRE NO FINAL */
    .institucional-imagem {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex;
        justify-content: flex-end; /* alinhada à direita */
        margin-top: 15px;
    }

}


/* =========================
   MOBILE — TEXTO
========================= */

@media (max-width: 768px) {

    .card-excerpt {
        font-size: 15px;   /* ajuste aqui se quiser mais/menos */
        line-height: 1.3;
    }

}
/* =========================
   MOBILE — SEÇÃO 2
   FORÇAR EMPILHAMENTO DAS NOTÍCIAS
========================= */

@media (max-width: 768px) {

    .home-section-2 .home-grid-4 {
        display: block;
    }

    .home-section-2 .card-col {
        width: 100%;
        margin-bottom: 25px;
    }

    .home-section-2 .card-institucional {
        width: 100%;
    }

}
/* =========================
   TÍTULOS — LINKS EDITORIAIS
   (override do Hello)
========================= */

.card-title a {
    color: #000000;              /* preto */
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-title a:visited {
    color: #000000;              /* evita rosa do tema */
}

.card-title a:hover {
    color: #5a5a5a;              /* cinza intermediário */
    text-decoration: none;
}

.card-title a:focus {
    color: #5a5a5a;
    outline: none;
}
/* =========================
   SEÇÃO PAGINAÇÃO — HOME
========================= */

.home-section-pagination {
    margin-top: 20px;
}

.home-section-pagination .home-pagination-editorial {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.home-pagination-info {
    font-style: italic;
    margin-right: 20px;
}

.home-pagination-links a {
    color: #000000;
    text-decoration: none;
    margin-right: 10px;
    transition: color 0.2s ease;
}

.home-pagination-links a:hover {
    color: #5a5a5a;
}
@media (max-width: 768px) {
    .home-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   CORREÇÃO DE ALINHAMENTO — HOME ANCESGEN
   (Substituindo as margens negativas por 0)
========================================= */

.home-ancesgen > section {
    /* Alterado de -145px para 0 para alinhar com o Header */
    margin-left: 0 !important;
    
    /* Alterado de -100px para 0 para alinhar com o Menu */
    margin-right: 0 !important;
    
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Garante que o container pai não aperte o conteúdo */
.home-ancesgen {
    max-width: 1450px; /* Alinhado com o teu Header */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}