:root { /* Define global CSS variables in the :root pseudo-class */

    /*colors*/
    --color-mustard-yellow: #F8C700;
    --color-yellow: #D9AE00; /* Usado para Notícias */
    --color-cyan: #00D9C3;   /* Seu ciano original, usado para Education */
    --color-white: #ffffff;
    --color-dark-blue: #014B6B;
    --color-blue: #1B95E7;   /* Usado para Events */
    --color-light-blue: #63C0D2; /* Azul claro para Companies */
    --color-orange: #FFA07A; /* Adicionado para Escolas, se você quiser diferenciar do ciano */
    --color-green: #ADFF2F;  /* Adicionado para Eventos, se quiser diferenciar do azul */

    /* Font Sizes - Base para desktop */
    --font-size-first-title: 2.2rem;
    --font-size-second-title: 2rem;
    --font-size-subtitle: 1.2rem;
    --font-size-text: 1rem;
    --font-size-card-title: 1.1rem;
    --font-size-card-date: 0.85rem;
    --font-size-button-text: 0.78vw; /* Mantido VW para botões para escala, mas vamos ajustar com media query */
    --font-size-social-icon: 1.1rem;
    --font-size-section-title: 2.2rem;
    --font-size-section-subtitle: 1.2rem;
    --font-size-subtitle-area: 0.9vw; /* Mantido VW */

    /* Padding/Margin - Base para desktop */
    --spacing-gap-cards: 20px;
    --spacing-card-padding: 15px;
    --spacing-news-button-padding-x: 0.78vw;
    --spacing-news-button-padding-y: 0.52vw;
    --spacing-photo-button-padding-x: 0.78vw;
    --spacing-photo-button-padding-y: 0.52vw;
    --spacing-icon-margin-right: 0.26vw;
}

.desktop-section {
    display: block; /* Visível por padrão */
}
.mobile-section {
    display: none; /* Escondido por padrão */
}

/* Base styles (Mobile First ou Desktop First com overwrites, este está mais para Desktop First) */
.font-first-title {
    opacity: 1;
    font-size: var(--font-size-first-title);
}

.font-second-title {
    font-size: var(--font-size-second-title);
    line-height: 1.2;
}

.font-subtitle {
    font-size: var(--font-size-subtitle);
}

.colorBlueText { color: #00457C; }
.colorBlueTriangle { color: #1F2F60; }
.colorTurquoiseTriangle { color: #178DAD !important; }
.colorBlueGlobe { color: #5060BD; }
.bgBlueArticleButton { background: #457397; }
.bgBluePublicationButton { background: #00457C; }
.bgBrownButton { background: #cbb37c; }
.colorBrownButton { color: #cbb37c; }
.bgGreenButton { background: #bbc200; }
.colorGreenButton { color: #bbc200; }
.colorGreenLightButton { color: #e5e89f; }
.bgPurpleButton { background: #c0b4ff; }
.colorPurpleButton { color: #c0b4ff; }
.colorGrayTriangle { color: #646464; }
.colorGrayGlobe { color: #707070; }
.colorGrayLightTriangle { color: #CBCBCB; }
.colorOrange { color: #FDA623; }
.colorOrangeTriangle { color: #F7931E; }
.colorYellow { color: #FDA623; } /* Conflito: --color-yellow é #D9AE00. Isso precisa ser resolvido. Sugiro remover esta regra se --color-yellow já estiver definido. */

/* Cores para os títulos do carrossel */
.font-first-title.color-companies {
    color: var(--color-light-blue);
}

.font-first-title.color-news {
    color: var(--color-yellow);
}

.font-first-title.color-education {
    color: var(--color-cyan);
}

.font-first-title.color-events {
    color: var(--color-blue);
}

/* Cores para os botões do carrossel */
.news-button.color-companies {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue); /* Se o botão tiver borda */
}

.news-button.color-news {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

.news-button.color-education {
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
}

.news-button.color-events {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.news-button.color-divulgacao {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-dark-blue); /* Garante que o texto dentro do botão seja legível */
}

/* Também adicione uma regra para o título */
.font-first-title.color-divulgacao {
    color: white;
}

.opacity {
    padding-top: 60px;
    background: transparent linear-gradient(180deg, #00000033 0%, #80808000 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.line-height {
    line-height: 1;
}

/* CARROSSEL */
#carouselHighlights_desktop .carousel-indicators [data-bs-target] {
    border: 1px solid white;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin-top: -10%; /* Ajuste inicial, será reavaliado em media queries */
}

#carouselHighlights_desktop .carousel-indicators .active {
    background-color: #00457C;
}

#carouselHighlights_desktop .mt-1 a{
    gap: 10px;
    align-items: center;
}

#carouselHighlights_desktop .main-links-buttons{
   display: flex;
    justify-content: center;
    margin-top: 20px;
}

.fa-circle-chevron-right{
    margin-left: 5px;
    margin-right: 0px;
}

#carouselHighlights_desktop .carousel-item .overlay {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    width: 90%;
    max-width: 1400px;
    box-sizing: border-box;
    text-align: center;
    padding: 0 15px; /* Adicionado padding para prevenir que o texto cole nas bordas em mobile */
}

.overlay.text-start {
    text-align: center !important;
}

.carousel-control-next, .carousel-control-prev {
    width: 8%;
    top: 10%;
}

.carousel-item .items-center{
    margin: 0 auto;
}

.font-first-title.colorMustardYellow{
    color: var(--color-mustard-yellow);
}

.font-first-title.colorCyan{
    color: var(--color-cyan);
}

.carousel-item .overlay img{
    width: auto;
    height: 50px; /* Tamanho base da imagem no overlay */
}

/* BOTOES GERAIS DE NOTICIAS */
.news-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    min-width: 150px;
    height: 30px;
    color: #FFFFFF;
    border-radius: 9999px;
    border: none;
    padding: var(--spacing-news-button-padding-y) var(--spacing-news-button-padding-x);
    cursor: pointer;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: var(--font-size-button-text);
    line-height: 1.33;
    letter-spacing: 0px;
    text-align: center;
    opacity: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.news-button.colorMustardYellow{ background-color: var(--color-mustard-yellow); }
.news-button.colorCyan{ background-color: var(--color-cyan); }
.news-button.colorMustardYellow:hover { background-color: #FDA623; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); }
.news-button.colorCyan:hover { background-color: #178DAD; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); }

.news-button i {
    margin-right: var(--spacing-icon-margin-right);
    font-size: var(--font-size-button-text);
}
/* ========================================================= */
/* ESTILOS PARA "ÚLTIMOS DESTAQUES" (CARDS) */
/* ========================================================= */

#latestNewsDesktop-section, #latestNewsMobile-section {
    padding: 50px 0;
    position: relative;
    z-index: 10;
    background-color: var(--color-white);
    margin: -5% auto 0 auto;
    border-radius: 40px;
}

.latest-news-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 15px; /* Adicionado padding para evitar que o título encoste nas bordas em mobile */
}

#latestNewsDesktop-section .font-second-title, #latestNewsMobile-section .font-second-title {
    color: var(--color-dark-blue);
    margin-bottom: 10px;
}

#latestNewsDesktop-section .font-subtitle, #latestNewsMobile-section .font-subtitle {
    color: var(--color-blue);
}

.latest-news-cards{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-gap-cards);
    align-items: stretch;
}

.news-card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    /* REMOVIDO: width: calc(25% - var(--spacing-card-padding)); */

    /* Largura flexível que garante 4 por linha, mas não abaixo de 250px */
    width: calc((100% / 4) - var(--spacing-gap-cards));

    /* CRÍTICO: Define a largura mínima para evitar que ele estique e force a quebra */
    min-width: 280px; /* **NOVO:** Define o tamanho mínimo legível (ex: 250px) */

    /* A max-width de 300px pode ser mantida para evitar cards muito grandes em telas largas */
    max-width: 300px;

    display: flex;
    flex-direction: column;
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    padding-top: 66.66%;
    overflow: hidden;
    border-radius: 20px 20px 0px 0px;
}

.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-image-wrapper-antigos {
    position: relative;
    height: 400px;
    width: auto;
    padding-top: 66.66%;
    overflow: hidden;
}

.card-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-content{
    padding: var(--spacing-card-padding);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: space-between;
}

.card-content.colorLightBlue{
    color: var(--color-light-blue);
    border-top:  2px solid var(--color-light-blue);
}

.card-content.colorCyan{
    color: var(--color-cyan);
    border-top:  2px solid var(--color-cyan);
}

.card-content.colorYellow{
    color: var(--color-mustard-yellow);
    border-top:  2px solid var(--color-mustard-yellow);
}

.card-content.colorBlue{
    color: var(--color-blue);
    border-top:  2px solid var(--color-blue);
}

/* NOVO: CLASSES PARA BORDER-TOP E COR DA DATA */
/* Cores do background-color da SEÇÃO DE CONTEÚDO (card-content) */
.card-content-companies { border-top: 2px solid var(--color-light-blue); }
.card-content-news { border-top: 2px solid var(--color-yellow); }
.card-content-education { border-top: 2px solid var(--color-cyan); } /* Mantido ciano, mas você pode mudar para var(--color-orange) */
.card-content-events { border-top: 2px solid var(--color-blue); }   /* Mantido azul, mas você pode mudar para var(--color-green) */

.card-date {
    font-size: var(--font-size-card-date);
    margin-bottom: 5px;
    flex-shrink: 0;
}


.card-date-companies { color: var(--color-light-blue); }
.card-date-news { color: var(--color-yellow); }
.card-date-education { color: var(--color-cyan); } /* Mantido ciano, mas você pode mudar para var(--color-orange) */
.card-date-events { color: var(--color-blue); }   /* Mantido azul, mas você pode mudar para var(--color-green) */

.card-title {
    font-size: var(--font-size-card-title);
    color: var(--color-white);
    margin-bottom: 20px;
}

.card-text-grow {
    flex-grow: 1; /* Isto é a chave! O wrapper de texto preenche o espaço. */
    margin-bottom: 20px; /* Mantém o espaçamento entre o texto e o bloco de botões */
    /* Você pode adicionar um min-height: 80px aqui se quiser forçar o tamanho mínimo do bloco */
}

.card-buttons {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Adicionado para quebrar botões em telas pequenas */
    gap: 10px; /* Espaço entre os botões quando quebram */
}

.card-button-link {
    font-size: 0.75rem; /* Isso é uma unidade fixa, podemos torná-la relativa */
    padding: 8px 15px; /* Unidade fixa, podemos tornar relativa */
    min-width: unset;
    height: auto;
}

.photo-button, #dataDesktop_section .news-button, .latest-news-cards .main-links-buttons .news-button, .more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    box-shadow: 1px 1px 6px var(--color-mustard-yellow);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    background-color: transparent;
    color: var(--color-mustard-yellow);
    border: 1px solid var(--color-mustard-yellow);

    min-width: 150px; /* Pode precisar de ajuste responsivo */
    height: 30px; /* Pode precisar de ajuste responsivo */
    padding: var(--spacing-photo-button-padding-y) var(--spacing-photo-button-padding-x);
    font-size: var(--font-size-button-text);
}

.photo-button i, #dataDesktop_section .news-button i,
.more-button i {
    margin-right: var(--spacing-icon-margin-right);
    font-size: var(--font-size-button-text);
}

.photo-button i.fa-angle-right, #dataDesktop_section .news-button i.fa-angle-right,
.more-button i.fa-angle-right {
    margin-left: var(--spacing-icon-margin-right);
    margin-right: 0;
}

.photo-button:hover, #dataDesktop_section .news-button:hover,
.more-button:hover {
    background-color: var(--color-mustard-yellow);
    color: var(--color-white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    color: var(--color-white);
    font-size: var(--font-size-social-icon);
    transition: color 0.3s ease;
}


/*A PARTE DO DETALHES DAS EMPRESAS, ESCOLAS, NOTICIAS E EVENTOS*/

.videoSticky {
    position: sticky;
    top: 0;
    z-index: 98;
    overflow-x: hidden;
    background-color: white;
    height: 35vh; /* Mantém a altura definida */
    width: auto; /* Garante que o banner ocupe toda a largura disponível */
    display: flex; /* Transforma o container em um flex container */
    flex-direction: column; /* Organiza os itens filhos em uma coluna (um abaixo do outro) */
    justify-content: center; /* Centraliza o conteúdo verticalmente dentro do container */
    align-items: center; /* Centraliza o conteúdo horizontalmente dentro do container */
    text-align: center; /* Adicionalmente para centralizar qualquer texto inline que possa estar diretamente no .videoSticky */
}

#dataDesktop_section .img-fluid{
    height: 100%;
    width:  100%;
}


/* O .inner-content.active já define o display: block */


/* Estilos globais para o container dos botões roláveis */
.inner-buttons-container {
    position: sticky;
    top: 120px; /* Ajuste para desktop */
    z-index: 97;
    background-color: transparent;
    padding-top: 5px; /* Padding vertical no container externo */
    padding-bottom: 5px; /* Padding vertical no container externo */
    display: flex;
    /* justify-content: center; - Será sobrescrito por IDs específicos ou aplicado pelo wrapper */
    align-items: center; /* Centraliza verticalmente se houver altura extra */
    justify-content: center;
    flex-wrap: nowrap; /* Impede que o .inner-buttons-wrapper quebre linha */


    /* PROPRIEDADES PARA A BARRA DE ROLAGEM VISÍVEL */
    overflow-x: scroll; /* Permite a rolagem horizontal, e a barra será visível */
    -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
    width: 100%; /* Ocupa a largura total */
    /* NÃO COLOQUE AQUI AS PROPRIEDADES PARA ESCONDER A BARRA DE ROLAGEM */
}

/* NOVO ESTILO: Para o wrapper interno que conterá os botões */
.inner-buttons-wrapper {
    display: flex; /* Faz com que os botões dentro dele se alinhem em linha */
    flex-wrap: nowrap; /* Essencial: impede que os botões quebrem linha DENTRO deste wrapper */
    gap: 10px; /* Espaço entre os botões */
    /* Opcional: min-width: max-content; pode ser útil para garantir que o wrapper sempre seja tão largo quanto seu conteúdo */
}

/* ---------------------------------------------------------------------- */
/* ESTILOS PARA COLORIR A BARRA DE ROLAGEM (Scrollbar) */
/* ---------------------------------------------------------------------- */

/* Para navegadores baseados em WebKit (Chrome, Safari, Edge) */
.inner-buttons-container::-webkit-scrollbar {
    height: 10px; /* Altura da barra de rolagem horizontal */
    background-color: transparent; /* Fundo da área da barra de rolagem */
}

.inner-buttons-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Cor do "polegar" (a parte que você arrasta) */
    border-radius: 4px; /* Cantos arredondados para o polegar */
    border: 3px solid transparent; /* Opcional: borda transparente para reduzir o tamanho visual do polegar */
}

/* Quando o mouse passa sobre a barra de rolagem (opcional) */
.inner-buttons-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cor mais escura no hover */
}

/* Para Firefox (suporte limitado) */
/* scrollbar-color: thumb-color track-color; */
/* Define a cor do polegar e da trilha da barra de rolagem */
.inner-buttons-container {
    scrollbar-color: #888 transparent; /* #888 é a cor do polegar, transparent é a cor da trilha */
    scrollbar-width: thin; /* ou 'auto' para o padrão, ou 'none' para esconder (não é o que queremos aqui) */
}


/* Estilos para os botões individuais */
.inner-buttons-container .inner-nav {
    font-size: 0.75rem;
    padding: 5px 15px;
    margin: 5px 0; /* Ajustado para apenas margin vertical, horizontal é pelo gap do wrapper */
    border-radius: 25px;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px #00000057;
    flex-shrink: 0; /* Impede que os botões diminuam de tamanho quando o espaço é limitado */
    min-width: 60px;
}

.inner-content,
.month-buttons-wrapper {
    display: none; /* Esconde todos os wrappers de mês por padrão */
}

/* Exibe os contêineres que têm a classe 'active' OU 'active-initial-visibility' */
.inner-content.active,
.month-buttons-wrapper.active,
.month-buttons-wrapper.active-initial-visibility { /* Adicionada esta classe aqui */
    display: block; /* Use 'block' para contêineres */
}

/* Exibe os cards que estão dentro de um contêiner visível */
.inner-content.active .highlight-card-item {
    display: flex; /* ou 'block' ou 'grid', dependendo do seu layout */
}

.content-container { display: none; }
.content-container.active { display: block; }
video, img { max-width: 100%; height: auto; }
.btn-nav {
    background-color: #ffffff66;
    border-color: transparent !important;
    border-radius: 25px;
    color: #fff;
    margin: 5px;
}
.overlay-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    text-align: center;
    width: 100%;
    background-color: transparent;
    padding: 10px;
    border-radius: 5px;
    min-height: 250px;
}
.buttons-container { margin-top: 50px; }

/*BOTÕES 2 CAMADA*/
.inner-nav {
    padding: 5px 25px;
    margin: 5px;
    border-radius: 25px;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px #00000057;
}

.month-buttons-wrapper .inner-nav{
    font-size: 0.65rem;
    padding: 5px 15px;
    margin: 0px;
}

.inner-nav.active, .inner-nav:hover {
    background-color: #d3d3d3;
    color: #000;
}

.inner-nav.companies-btn { background-color: rgba(0, 0, 0, 0.3) ; color: var(--color-white); border: 2px solid var(--color-light-blue); }
.inner-nav.companies-btn:hover, .inner-nav.companies-btn.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-light-blue); color: #fff; }

.inner-nav.education-btn { background-color: rgba(0, 0, 0, 0.3); color: var(--color-white); border: 2px solid var(--color-cyan); }
.inner-nav.education-btn:hover, .inner-nav.education-btn.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-cyan); color: #fff; }

.inner-nav.news-btn { background-color: rgba(0, 0, 0, 0.3); color: var(--color-white); border: 2px solid var(--color-yellow); }
.inner-nav.news-btn:hover, .inner-nav.news-btn.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-yellow); color: #fff; }

.inner-nav.events-btn { background-color: rgba(0, 0, 0, 0.3); color: var(--color-white); border: 2px solid var(--color-blue); }
.inner-nav.events-btn:hover, .inner-nav.events-btn.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-blue); color: #fff; }

.inner-content, .detailed-content { display: none; }
.inner-content.active, .detailed-content.active { display: block; }

/*SESSÃO TITULOS*/
.section-title {
    font-size: var(--font-size-section-title);
    margin-bottom: 15px;
    line-height: 1.25;
}

.section-title u { text-decoration: none; }
.section-title.colorLightBlue { color: var(--color-light-blue); }
.section-title.colorCyan { color: var(--color-cyan); }
.section-title.colorYellow { color: var(--color-yellow); }
.section-title.colorBlue { color: var(--color-blue); }

/*SUBTITULO*/
.section-subtitle {
    color: var(--color-white);
    font-size: var(--font-size-section-subtitle);
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 20px;
    text-decoration: none;
}

.video-container { position: relative; }
.subtitleArea {
    font-family: OpenSansLight, serif;
    font-size: var(--font-size-subtitle-area);
    color: #fff;
    cursor: pointer;
}

/* Cores padrão para botões de navegação */
.btn-nav {
    background-color: #6b7280; /* Um cinza padrão para inativos */
    color: white;
    /* Outros estilos padrão, como padding, border-radius, etc. */
}

/* Estilo para o botão ATIVO da categoria EMPRESAS */
.btn-nav.companies.active {
    background-color: var(--color-light-blue) !important; /* Ou a cor específica que você deseja para empresas */
    color: white !important;
    /* Adicione outros estilos se quiser (ex: box-shadow) */
}

/* Estilo para o botão ATIVO da categoria ESCOLAS (Ciano) */
.btn-nav.education.active {
    background-color: var(--color-cyan) !important; /* Um ciano vibrante */
    color: white !important;
}

/* Estilo para o botão ATIVO da categoria NOTÍCIAS */
.btn-nav.news.active {
    background-color: var(--color-yellow) !important; /* Um amarelo para notícias */
    color: white !important; /* Texto mais escuro para contrastar com o amarelo */
}

/* Estilo para o botão ATIVO da categoria EVENTOS */
.btn-nav.events.active {
    background-color: var(--color-blue) !important; /* Um azul mais escuro para eventos */
    color: white !important;
}

/*
* Se você estiver usando Tailwind JIT e quiser aplicar as classes diretamente no HTML
* com classes como 'bg-companies-active', precisará configurar o `tailwind.config.js`
* para incluir essas cores.
*/


/* Hover para EMPRESAS */
.btn-nav.companies:hover, .content-container#companies .btn-nav.companies.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-light-blue); color: #fff; }
/* Hover para EDUCAÇÃO */
.btn-nav.education:hover, .content-container#education .btn-nav.education.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-cyan); color: #fff; }
/* Hover para Notícias */
.btn-nav.news:hover, .content-container#news .btn-nav.news.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-yellow); color: #fff; }
.btn-nav.events:hover, .content-container#events .btn-nav.events.active { font-family: OpenSansBold, sans-serif; background-color: var(--color-blue); color: #fff; }


/* O NOVO ELEMENTO DA BARRA DE COR */
.card-color-bar {
    height: 8px;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Cores específicas para cada categoria de card (mantidas da sua última versão) */
.card-color-bar.color-companies { background-color: var(--color-light-blue); }
.card-color-bar.color-news { background-color: var(--color-yellow); }
.card-color-bar.color-education { background-color: var(--color-cyan); } /* Usei cyan de volta, ajuste se quiser --color-orange */
.card-color-bar.color-events { background-color: var(--color-blue); }   /* Usei blue de volta, ajuste se quiser --color-green */

.px-responsive.mt-5 {
    margin-bottom: 50px;
}


#firstCarouselHighlightsMobile-section {
    #home_mobile {
        /* Contêiner interno que centraliza o conteúdo do carrossel */
        text-align: center; /* Centraliza o conteúdo */
        width: 100%; /* Garante que ocupe toda a largura disponível */
        padding: 0; /* Remove padding padrão se houver */


        #superior{
            margin-top: -320px;
            margin-bottom: 20px;
        }

        .carousel-control-next,
        .carousel-control-prev {
            top: unset; /* Remove o posicionamento top padrão */
            bottom: 3rem; /* Posiciona os controles na parte inferior */
            /* Garante que os controles sejam visíveis e clicáveis */
            width: auto;
            opacity: 1; /* Garante visibilidade total */
            z-index: 10; /* Garante que fiquem acima das imagens */
            display: flex;
            align-items: center;
            justify-content: center;
        }


        h1{
            width: 85%;
            text-align: center;
            margin: 0 auto;
        }

        p{
            width: 70%;
            text-align: center;
            margin: 0 auto;
            color: var(--color-white);
            font-size: var(--font-size-text);
            margin-top: 10px;
        }

        .fs-1 {
            font-size: calc(1.375rem + 2.5vw) !important;
        }

        #conteudo-carrossel { /* Contêiner para o conteúdo de texto e botões dentro de um item do carrossel */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Centraliza verticalmente */
            height: 100%; /* Ocupa a altura total do item */
            padding: 1rem; /* Adiciona algum padding */
        }

        .carousel-indicators { /* Estilo para os indicadores de navegação (os pontos) */
            position: absolute;
            bottom: 0; /* Alinha na parte inferior */
            left: 0;
            right: 0;
            margin-bottom: 120px; /* Afasta da parte inferior */
            margin-left: 0;
            margin-right: 0;
            justify-content: center !important;
            gap: 10px; /* Espaçamento entre os pontos */
        }

        #btn-prox, #btn-voltar { /* Estilo para os botões de navegação Próximo/Voltar (setas de imagem) */
            width: 30px !important;
            height: 30px !important;
            opacity: 1 !important;
            transition: transform 0.2s ease-in-out;
        }
        #btn-prox:hover, #btn-voltar:hover {
            transform: scale(1.1); /* Efeito de zoom no hover */
        }

        .carousel-indicators [data-bs-target] { /* Estilo para cada indicador individual */
            opacity: 1; /* Visibilidade total */
            border-radius: 50%;
            width: 15px !important;
            height: 15px !important;
            background-color: rgba(255, 255, 255, 0.7); /* Cor padrão dos pontos (branco semi-transparente) */
            border: none; /* Remove borda padrão */
            transition: background-color 0.3s ease;
        }

        .carousel-indicators .active { /* Estilo para o indicador ativo */
            background-color: #00467F !important; /* Cor azul escuro para o ponto ativo */
        }

        .carousel-item { /* Estilo base para cada item do carrossel */
            line-height: 1.2;
            /* Garante que a imagem de fundo preencha o item */
            background-size: cover;
            background-position: center;
            min-height: 80vh; /* Altura mínima para itens de carrossel */
            display: flex; /* Para centralizar o conteúdo interno */
            align-items: center;
            justify-content: center;
        }

        .sub { /* Classe para um texto de subtítulo menor */
            font-size: .9rem;
        }

        #btn-conhecer { /* Estilo para um botão específico de "Conhecer", se ainda existir */
            padding: .5rem 1.5rem !important;
        }
    }
}


#latestNewsMobile-section {
    margin-top: -50px;
    /* Contêiner de cards para o scroll horizontal */
    .latest-news-cards {
        display: flex; /* Alinha os cards lado a lado */
        justify-content: flex-start;
        flex-wrap: nowrap; /* Impede que os cards quebrem a linha */
        overflow-x: auto; /* Habilita o scroll horizontal */
        overflow-y: hidden; /* Esconde o scroll vertical */
        gap: 15px; /* Espaçamento entre os cards */
        padding: 0 15px; /* Adiciona espaçamento nas laterais */
        -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
    }

    /* Esconde a barra de rolagem (opcional) */
    .latest-news-cards::-webkit-scrollbar {
        display: none;
    }

    /* Estilos dos Cards de Notícias */
    .news-card {
        flex-shrink: 0; /* IMPEDE que os cards diminuam de tamanho */
        width: 80vw; /* Largura do card, 80% da viewport */
        max-width: 300px;
        height: auto;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .card-image-wrapper {
        width: 100%;
        height: 300px; /* Altura fixa para as imagens */
        overflow: hidden;
    }

    .card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Outros estilos para os elementos internos do card, se necessário */
    .card-content {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .card-buttons {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Ajustes específicos para botões e ícones sociais dentro do card */
    .photo-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 15px;
        text-transform: uppercase;
        border: 1px solid var(--color-mustard-yellow);
        background-color: transparent;
        color: var(--color-mustard-yellow);
        border-radius: 9999px;
        min-width: unset;
        height: auto;
        font-size: 0.8rem;
    }

    .social-icons {
        display: flex;
        gap: 10px;
    }

    .social-icon {
        font-size: 1.3rem;
    }
}

#dataMobile_section {

    /* Estilos dos Cards de Notícias */
    .news-card {
        flex-shrink: 0; /* IMPEDE que os cards diminuam de tamanho */
        width: 80vw; /* Largura do card, 80% da viewport */
        max-width: 300px;
        height: auto;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .card-image-wrapper {
        width: 100%;
        height: 300px; /* Altura fixa para as imagens */
        overflow: hidden;
    }

    .card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Outros estilos para os elementos internos do card, se necessário */
    .card-content {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .card-buttons {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Ajustes específicos para botões e ícones sociais dentro do card */
    .photo-button, .news-button, .more-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 15px;
        text-transform: uppercase;
        border: 1px solid var(--color-mustard-yellow);
        background-color: transparent;
        color: var(--color-mustard-yellow);
        border-radius: 9999px;
        min-width: unset;
        height: auto;
        font-size: 0.8rem;
    }

    .social-icons {
        display: flex;
        gap: 10px;
    }

    .social-icon {
        font-size: 1.3rem;
    }
}

#dataMobile_section .parte-superior .detalhes img{
    width: 100%;

}

#dataMobile_section .modal-content .parte-superior{
    box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.2);
    border-radius:  0px 0px 20px 20px;
    height: 200px;
}


#dataMobile_section .modal-content .parte-superior .detalhes{
    margin-top: -6px;
}

#dataMobile_section .modal-content .parte-superior .buttons-container .inner-buttons-wrapper, #dataMobile_section .modal-content .parte-superior .buttons-container .month-buttons-wrapper{
    padding-left: 15px;
    padding-right: 15px;
}

#dataMobile_section .swiperBox .swiper-button-prev{
    margin-left: 50px;
}

#dataMobile_section .swiperBox .swiper-button-next{
    margin-right: 50px;
}

#dataMobile_section .swiper-slide--one {
    min-height: 562px;
    background: url("../images/pagina_destaques/bg_visitasempresas_mobile.webp") no-repeat 50% 50% / cover;
}

#dataMobile_section .swiper-slide--two {
    min-height: 562px;
    background: url("../images/pagina_destaques/bg_visitasescolas_mobile.webp") no-repeat 50% 50% / cover;
}

#dataMobile_section .swiper-slide--three {
    min-height: 562px;
    background: url("../images/pagina_destaques/bg_noticias_mobile.webp") no-repeat 50% 50% / cover;
}

#dataMobile_section .swiper-slide--four {
    min-height: 562px;
    background: url("../images/pagina_destaques/bg_eventos_mobile.webp") no-repeat 50% 50% / cover;
}

#dataMobile_section .p-4{
    border: none;
}


#dataMobile_section .btn-areas {
    display: inline;
    padding: 2px 8px 2px 8px;
    color: white;
    border: solid 1px rgba(43, 43, 43, 0.56);
    border-radius: 25px;
}

#dataMobile_section .btn-areas.colorLightBlue{
    background-color: var(--color-light-blue);
}
#dataMobile_section .btn-areas.colorCyan{
    background-color: var(--color-cyan);
}
#dataMobile_section .btn-areas.colorYellow{
    background-color: var(--color-yellow);
}
#dataMobile_section .btn-areas.colorBlue{
    background-color: var(--color-blue);
}

#dataMobile_section button > a {
    text-decoration: none;
    color: white;
    margin: 2px;
    padding: 2px;
    font-size: var(--font-size-button-text);
}

#swiperData button.btn-areas .fa-circle-chevron-right {
    color: #fff !important;
}

#modalCompanies_mobile .modal-footer {
    margin-top: -1px;
    background-image: url(../images/pagina_destaques/imgmobile_botaofechar_empresas.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#modalEducation_mobile .modal-footer {
    margin-top: -1px;
    background-image: url(../images/pagina_destaques/imgmobile_botaofechar_escola.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#modalNews_mobile .modal-footer {
    margin-top: -1px;
    background-image: url(../images/pagina_destaques/imgmobile_botaofechar_noticias.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#modalEvents_mobile .modal-footer {
    margin-top: -1px;
    background-image: url(../images/pagina_destaques/imgmobile_botaofechar_eventos.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#dataMobile_section .inner-buttons-container .inner-nav{
    background-color: darkgrey;
    margin-top: -20px;
}

#dataMobile_section .inner-buttons-container {
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 20px 0px;
}

.modal-footer .companies-btn {
    background-color: var(--color-light-blue);
}

.modal-footer .education-btn {
    background-color: var(--color-cyan);
}


.modal-footer .news-btn {
    background-color: var(--color-yellow);
}

.modal-footer .events-btn {
    background-color: var(--color-blue);
}

#modalCompanies_mobile .inner-nav.active{
    background-color: var(--color-light-blue);
}

#modalEducation_mobile .inner-nav.active{
    background-color: var(--color-cyan);
}

#modalNews_mobile .inner-nav.active{
    background-color: var(--color-yellow);
}

#modalEvents_mobile .inner-nav.active{
    background-color: var(--color-blue);
}

#dataMobile_section .inner-content,
#dataMobile_section .month-buttons-wrapper {
    display: none;
}

/*
 * Exibe os contêineres que têm a classe 'active'
 */
#dataMobile_section .inner-content.active {
    display: block; /* Para o conteúdo principal, use 'block' */
}

#dataMobile_section .month-buttons-wrapper.active {
    display: flex; /* Para os botões, use 'flex' */
    flex-wrap: nowrap; /* Impede a quebra de linha */
    overflow-x: auto; /* Permite a rolagem horizontal */
    padding: 20px 0px; /* Adiciona um espaço na parte inferior para a barra de rolagem não sobrepor o conteúdo */
    margin-top: -5px;
    -ms-overflow-style: none; /* Esconde a barra de rolagem no Internet Explorer e Edge */
    scrollbar-width: none;  /* Esconde a barra de rolagem no Firefox */
    gap: 10px;
}

#dataMobile_section .parte-superior .buttons-container{
    margin-top: -3px;
}

/* Seleciona o contêiner da miniatura gerado pelo nanogallery2 */
/* Esta regra garante que a miniatura interna ocupe 100% (30px) do contêiner */
#my_nanogallery2 .nGY2GThumbnail {
    /* O !important é necessário para sobrescrever os estilos embutidos da biblioteca */
    height: 100% !important;
    min-height: 30px !important;
    /* Remove qualquer padding ou margem que a biblioteca possa adicionar */
    padding: 0 !important;
    margin: 0 !important;
    display: flex; /* Usamos flexbox para centralizar o rótulo */
    justify-content: center;
    align-items: center;
}

/* Opcional: Garante que o rótulo (texto) também se ajuste */
#my_nanogallery2 .nGY2Label {
    /* Ajuste o line-height para centralizar o texto verticalmente, se necessário */
    line-height: 1;
}
/* ========================================================= */
/* MEDIA QUERIES PARA RESPONSIVIDADE */
/* ========================================================= */

/* Tablets em diante (min-width: 768px) */
@media (min-width: 1024px) and (max-width: 1372px) { /* Para telas de desktop menores ou tablets grandes */
    :root {
        --font-size-first-title: 1.5rem;
        --font-size-second-title: 1.3rem;
        --font-size-subtitle: 1rem;
        --font-size-section-title: 1.5rem;
        --font-size-section-subtitle: 1rem;

        --font-size-button-text: 0.8rem; /* Unidade fixa para melhor controle */
        --spacing-news-button-padding-x: 18px;
        --spacing-news-button-padding-y: 10px;
        --spacing-photo-button-padding-x: 18px;
        --spacing-photo-button-padding-y: 10px;
        --spacing-icon-margin-right: 8px;
    }

    /* Ajuste para 3 cards por linha */
    .news-card {
        width: calc(33.333% - var(--spacing-gap-cards) * 2 / 3); /* (3 cards, 2 gaps) */
        max-width: 200px; /* Ajuste o max-width para 3 por linha, se desejar */
    }

    .photo-button:hover {
        background-color: var(--color-mustard-yellow);
        color: var(--color-white);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }

    .news-card .card-title {
        font-size: var(--font-size-subtitle);
    }

    .news-card .photo-button, .news-card .social-icons{
        margin: 0 auto;
    }

    #latestNewsDesktop-section {
        width: 90%; /* Aumenta a largura para ocupar mais espaço em tablets */
        margin-top: -3%; /* Ajusta a margem superior */
    }

    #carouselHighlights_desktop .carousel-item .overlay {
        top: 40%; /* Ajuste a posição do overlay */
        width: 95%;
    }

    .carousel-item .overlay img{
        height: 40px; /* Reduz o tamanho da imagem no overlay */
    }

    .inner-buttons-container {
        top: 100px; /* Ajuste para tablets */
        padding: 5px;
        position: sticky;
        z-index: 97;
        background-color: transparent;
        display: flex;
        /* justify-content: center; - Será sobrescrito por IDs específicos ou aplicado pelo wrapper */
        align-items: center; /* Centraliza verticalmente se houver altura extra */
        justify-content: center;
        flex-wrap: nowrap; /* Impede que o .inner-buttons-wrapper quebre linha */


        /* PROPRIEDADES PARA A BARRA DE ROLAGEM VISÍVEL */
        overflow-x: auto; /* Permite a rolagem horizontal, e a barra será visível */
        -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
        width: 100%; /* Ocupa a largura total */
        /* NÃO COLOQUE AQUI AS PROPRIEDADES PARA ESCONDER A BARRA DE ROLAGEM */
    }

    /* Centraliza os botões de Empresas, Educação e Eventos (para o .inner-buttons-wrapper) */
    #companies .inner-buttons-container,
    #education .inner-buttons-container,
    #events .inner-buttons-container {
        justify-content: center; /* Garante a centralização do wrapper dentro do container */
    }

    #news .inner-buttons-wrapper {
        justify-content: flex-start; /* Alinha o wrapper à esquerda dentro do container */
        width: 90%;
    }

    #news .submenu-news{
        justify-content: center;
    }

    .section-title {
        margin-top: 2.5%;
    }

    .buttons-container .btn-nav{
        font-size: 0.8rem;
    }

    .inner-buttons-container .inner-nav{
        font-size: 0.6rem;
    }
}


@media (min-width: 595px) and (max-width: 1024px) { /* Exemplo de breakpoint para mobile */

    :root {
        --font-size-first-title: 1.5rem;
        --font-size-second-title: 1.3rem;
        --font-size-subtitle: 1rem;
        --font-size-section-title: 1.5rem;
        --font-size-section-subtitle: 1rem;

        --font-size-button-text: 0.8rem; /* Unidade fixa para melhor controle */
        --spacing-news-button-padding-x: 18px;
        --spacing-news-button-padding-y: 10px;
        --spacing-photo-button-padding-x: 18px;
        --spacing-photo-button-padding-y: 10px;
        --spacing-icon-margin-right: 8px;
    }

    /* Ajuste para 3 cards por linha */
    .news-card {
        width: calc(33.333% - var(--spacing-gap-cards) * 2 / 3); /* (3 cards, 2 gaps) */
        max-width: 200px; /* Ajuste o max-width para 3 por linha, se desejar */
    }

    .photo-button:hover {
        background-color: var(--color-mustard-yellow);
        color: var(--color-white);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }

    .news-card .card-title {
        font-size: var(--font-size-subtitle);
    }

    .news-card .photo-button, .news-card .social-icons{
        margin: 0 auto;
    }

    #latestNewsDesktop-section {
        width: 90%; /* Aumenta a largura para ocupar mais espaço em tablets */
        margin-top: -3%; /* Ajusta a margem superior */
    }

    #carouselHighlights_desktop .carousel-item .overlay {
        top: 40%; /* Ajuste a posição do overlay */
        width: 95%;
    }

    .carousel-item .overlay img{
        height: 40px; /* Reduz o tamanho da imagem no overlay */
    }

    .inner-buttons-container {
        top: 100px; /* Ajuste para tablets */
        padding: 5px;

    }

    /* Centralização para o container principal que envolve todos os botões (de ano e de mês) */
    .inner-buttons-container {
        display: flex;             /* Habilita o Flexbox */
        justify-content: center;   /* Centraliza o conteúdo horizontalmente */
        width: 100%;               /* Opcional, mas garante que o container use toda a largura disponível */
    }


    /* O CSS que você forneceu (se aplicável ao contexto) */
    #modalCompanies_mobile .inner-buttons-container,
    #modalEducation_mobile .inner-buttons-container,
    #modalEvents_mobile .inner-buttons-container { /* Adicione o '#' que estava faltando no seu CSS */
        justify-content: center;
    }

    #modalCompanies_mobile .inner-buttons-wrapper {
        justify-content: flex-start; /* Garante a centralização do wrapper dentro do container */
    }

    #modalNews_mobile .submenu-news{
        justify-content: center;
    }

    .section-title {
        margin-top: 2.5%;
    }

    .buttons-container .btn-nav{
        font-size: 0.8rem;
    }

    .buttons-container .inner-buttons-wrapper .inner-nav{
        font-size: 0.8rem;
    }

    .buttons-container .month-buttons-wrapper .inner-nav{
        font-size: 0.6rem;
    }
}

@media (max-width: 594px) {
    :root {
        --font-size-first-title: 1.5rem;
        --font-size-second-title: 1.3rem;
        --font-size-subtitle: 1rem;
        --font-size-section-title: 1.5rem;
        --font-size-section-subtitle: 1rem;

        --font-size-button-text: 0.8rem; /* Unidade fixa para melhor controle */
        --spacing-news-button-padding-x: 18px;
        --spacing-news-button-padding-y: 10px;
        --spacing-photo-button-padding-x: 18px;
        --spacing-photo-button-padding-y: 10px;
        --spacing-icon-margin-right: 8px;
    }

    /* Ajuste para 3 cards por linha */
    .news-card {
        width: calc(33.333% - var(--spacing-gap-cards) * 2 / 3); /* (3 cards, 2 gaps) */
        max-width: 200px; /* Ajuste o max-width para 3 por linha, se desejar */
    }

    .photo-button:hover {
        background-color: var(--color-mustard-yellow);
        color: var(--color-white);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }

    .news-card .card-title {
        font-size: var(--font-size-subtitle);
    }

    .news-card .photo-button, .news-card .social-icons{
        margin: 0 auto;
    }


    #latestNewsDesktop-section {
        width: 90%; /* Aumenta a largura para ocupar mais espaço em tablets */
        margin-top: -3%; /* Ajusta a margem superior */
    }

    #carouselHighlights_desktop .carousel-item .overlay {
        top: 40%; /* Ajuste a posição do overlay */
        width: 95%;
    }

    .carousel-item .overlay img{
        height: 40px; /* Reduz o tamanho da imagem no overlay */
    }

    .inner-buttons-container {
        top: 100px; /* Ajuste para tablets */
        padding: 5px;

    }

    /* Centralização para o container principal que envolve todos os botões (de ano e de mês) */
    .inner-buttons-container {
        display: flex;             /* Habilita o Flexbox */
        justify-content: center;   /* Centraliza o conteúdo horizontalmente */
        width: 100%;               /* Opcional, mas garante que o container use toda a largura disponível */
    }


    /* O CSS que você forneceu (se aplicável ao contexto) */
    #modalCompanies_mobile .inner-buttons-container,
    #modalEducation_mobile .inner-buttons-container{ /* Adicione o '#' que estava faltando no seu CSS */
        justify-content: flex-start;
    }

    #modalCompanies_mobile .detalhes img{
        width: 100vw;
    }

    #modalNews_mobile .submenu-news, #modalEvents_mobile .inner-buttons-container {
        justify-content: center;
    }

    .section-title {
        margin-top: 2.5%;
    }

    .buttons-container .btn-nav{
        font-size: 0.8rem;
    }

    .buttons-container .inner-buttons-wrapper .inner-nav{
        font-size: 0.8rem;
    }

    .buttons-container .month-buttons-wrapper .inner-nav{
        font-size: 0.6rem;
    }

    /*GALERIA MOBILE*/

    .nGY2 .toolbar .label .title {
        font-size: 1rem;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nGY2 .toolbar .label {
        width: 594px;
    }

    .nGY2 .nGY2ViewerToolsTopLeft{
        left: 0px;
    }

    .nGY2 .nGY2ViewerToolsTopRight{
       width: 100%;
        right: 0px;
    }

    .nGY2 .nGY2ViewerToolsTopRight .toolbar{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nGY2 .nGY2ViewerToolsTopRight .toolbar .ngy2viewerToolAction{
        margin: 0px;
    }

}