/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ========================================
   STYLES EXISTENTES (não editar)
   ======================================== */
.portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.portfolio-details,
.portfolio-ficha {
    background: white;
    padding: 20px;
    border-radius: 5px;
}

.portfolio-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.portfolio-ficha {
    font-size: small;
}

ul {
    margin: 0;
}

.local-tag {
    padding: 5px 10px 6px 5px;
    margin: .5em 0;
    border-radius: 5px;
    color: #fff;
    font-family: "Barlow";
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.7px;
}

.last-item-info {
    margin: 0.5em 0 0.9em;
}

li {
    list-style-type: none;
}

.portfolio-local .local-tag:nth-child(1) {
    background-color: #1abc9c;
}

.portfolio-local .local-tag:nth-child(2) {
    background-color: #3498db;
}

.portfolio-local .local-tag:nth-child(3) {
    background-color: #e74c3c;
}

.portfolio-local .local-tag:nth-child(4) {
    background-color: #9b59b6;
}

.portfolio-local .local-tag:nth-child(5) {
    background-color: #f1c40f;
}

.portfolio-local .local-tag:nth-child(6) {
    background-color: #e67e22;
}

li span.rotulo,
span.rotulo,
local-tag {
    font-size: 11px;
    font-weight: 800;
}

.post-categories {
    margin-left: 10px;
    font-size: 0.9em;
}

.custom-meta {
    display: flex;
    align-items: center;
}

.entry-meta .posted-by.author {
    display: none;
}

#main.site-main article.post-8272,
#main.site-main article.post-8274 {
    background-color: transparent;
}

#primary.content-area.primary main.site-main article.post-115 div.entry-content,
#primary.content-area.primary main.site-main article.post-8272 div.entry-content,
#primary.content-area.primary main.site-main article.post-8384 div.entry-content {
    padding: 0em !important;
}

/* 
#primary.content-area.primary {
    margin: 1.5em 0 0 0 !important;
}
*/

.entry-meta {
    display: flex;
    align-items: center;
}

.entry-meta span {
    margin-right: 10px;
}

/* Tamanho da tela na home */
@media (min-width: 922px) {
    .ast-container {
        max-width: 980px;
    }
}

.ast-container,
.ast-container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* ========================================
   NOVOS ESTILOS PARA PORTFOLIO BOX
   ======================================== */

/* 1) HEADER COM TÍTULO E FILTRO */
.tusp-portfolio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.tusp-portfolio-header h1 {
    font-size: 2em;
    margin: 0.9em 0 10px 0em;
}

.tusp-portfolio-filter-header {
    display: flex;
    justify-content: space-between;
    /* Distribui o espaço entre os itens: o primeiro no início, o último no fim */
    /* width: 500px; */
    align-items: center;
    margin: 0 0 1em 0;
}

.tusp-form-agenda {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 1em;
    text-align: right;
}

body {
    background: #dfe8f3;
}

.tusp-portfolio-titulo {
    display: flex;
    justify-content: flex-start;
    /* Alinha os itens à esquerda */
    width: 200px;
    /* Exemplo, ajuste conforme necessário */
}

.tusp-portfolio-filter {
    display: flex;
    /* width: 500px; */
    align-items: center;
}

.tusp-portfolio-filter label {
    margin-right: 0.5em;
    width: auto;
    /* Exemplo, ajuste conforme necessário */
    font-size: 13px;
    color: #333;
    text-align: right;
}

.tusp-portfolio-filter select {
    font-size: 13px;
    width: 200px;
    /* Exemplo, ajuste conforme necessário */
    padding: 0.2em 0.4em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

input #search-field.search-field {
    font-family: 'Radio Canada Big' !important;
    font-size: 1em;
}

.ast-live-search-results label,
.ast-live-search-results a {
    font-family: 'Radio Canada Big';
}

a.ast-search-item {
    padding: 6px 14px !important;
    font-size: 0.7em !important;
    font-style: italic !important;
}

main-navigation ul li ul .sub-menu {
    width: 12em !important;
}

/* 2) GRID DE CARDS - 4 colunas responsivas */
.tusp-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0.5em;
    /* Espaçamento entre as linhas */
    column-gap: 1em;
    /* Espaçamento entre as colunas */
    margin: 0;
    padding: 0em;
}

/* 3) CARD INDIVIDUAL */
.tusp-portfolio-item {
    position: relative;
    background: white;
    padding: 0.5em;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
    overflow: hidden;
    transition: transform 0.2s;
    padding: 0;
    padding-bottom: 0;
    border-radius: 3px;
}

.tusp-portfolio-item:hover {
    transform: translateY(-4px);
}

/* 3.1) PREVENÇÃO DE ESPAÇOS EM BRANCO INJETADOS PELO WORDPRESS */
.tusp-portfolio-item p,
.tusp-portfolio-item br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4) IMAGEM FIXA */
.tusp-portfolio-item img {
    width: 100%;
    height: auto;
    /* A altura agora será flexível... */
    aspect-ratio: 4 / 5 !important;
    /* ...para manter EXATAMENTE a proporção original de 4x5! */
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 5px 5px 0 0;
    flex-shrink: 0;
}

/* 5) TÍTULO E DATA */
.tusp-portfolio-title {
    font-size: 20px !important;
    font-weight: bold;
    margin: 1px 0;
    color: #333;
    text-decoration: none !important;
    line-height: 1.2;
}

.tusp-portfolio-grid .tusp-portfolio-item a.portfolio-list-items {
    color: #333;
    /* Cor preta para o link (afetará o título se não for sobrescrito) */
    text-decoration: none !important;
    font-weight: normal !important;
    /* Garante que o link não seja negrito */
    display: contents;
}

.tusp-portfolio-grid .tusp-portfolio-item a.portfolio-list-items h3.portfolio-list-title {
    color: #333 !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    margin: 5px 10px 5px 10px;
    /* Reduced top margin */
    line-height: 1.2;
    text-align: center;
}

.tusp-portfolio-grid .tusp-portfolio-item a.portfolio-list-items .portfolio-list-local {
    color: #333 !important;
    /* Cor preta para data e local */
    font-weight: normal !important;
    /* Peso normal para data e local */
    font-size: 0.65em;
    margin-top: 5px;
    margin-bottom: 0.5em;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.tusp-portfolio-grid .tusp-portfolio-item a.portfolio-list-items .portfolio-list-date {
    color: #777 !important;
    font-weight: normal !important;
    font-size: 0.85em;
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: center;
    display: block;
}

/* Estilos para o local como rótulo */
.tusp-portfolio-grid .tusp-portfolio-item a.portfolio-list-items .portfolio-list-local.local-tag {
    color: #fff !important;
    /* Cor do texto do rótulo */
    padding: 0.2em 0.4em;
    border-radius: 5px;
    display: inline-block;
    /* Para se comportar como um rótulo inline */
    margin-top: 3px;
    font-size: 0.85em;
}

/* Cores de fundo diferentes para múltiplos locais (se aplicável) */

/* Cores para os spans com base no texto */
.span-cor-mariantonia {
    background-color: #3498db;
}

.span-cor-ribeirao {
    background-color: #e74c3c;
}

.span-cor-bauru {
    background-color: #e67e22;
}

.span-cor-saocarlos {
    background-color: #f1c40f;
}

.span-cor-butanta {
    background-color: #1abc9c;
}

.span-cor-multiuso {
    background-color: #9b59b6;
}

/* Cor para o novo local: Outros espaços */
.span-cor-outros {
    background-color: #7f8c8d;
    /* Um cinza concreto (ajuste conforme a identidade visual) */
}

.span-cor-experimental {
    background-color: #2f9921;
    /* Um cinza concreto (ajuste conforme a identidade visual) */
}

.tusp-portfolio-periodo {
    font-size: 13px;
    margin: 1px 0 4px;
    color: #666;
    line-height: 1.2;
}

/* 6) LOCAL (BADGE) */
.tusp-portfolio-local {
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.2em 0.4em;
    font-size: 0.8em;
    border-radius: 0.2em;
}

.portfolio-container {
    margin-top: 1.5em;
}

.portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.portfolio-details,
.portfolio-ficha {
    background: white;
    padding: 20px;
    border-radius: 15px;
}

.portfolio-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.portfolio-ficha {
    font-size: small;
}

ul {
    margin: 0;
}

.local-tag {
    padding: 5px 10px 6px 5px;
    margin: .5em auto;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.85em;
}

.last-item-info {
    margin: 0.5em 0 0.9em;
}

li {
    list-style-type: none;
}

.portfolio-local .local-tag:nth-child(1) {
    background-color: #1abc9c;
    /* Cor 1 */
}

.portfolio-local .local-tag:nth-child(2) {
    background-color: #3498db;
    /* Cor 2 */
}

.portfolio-local .local-tag:nth-child(3) {
    background-color: #e74c3c;
    /* Cor 3 */
}

.portfolio-local .local-tag:nth-child(4) {
    background-color: #9b59b6;
    /* Cor 4 */
}

.portfolio-local .local-tag:nth-child(5) {
    background-color: #f1c40f;
    /* Cor 5 */
}

.portfolio-local .local-tag:nth-child(6) {
    background-color: #e67e22;
    /* Cor 6 */
}

li span.rotulo,
span.rotulo {
    font-size: 11px;
    font-weight: 200;
}

.post-categories {
    margin-left: 10px;
    /* Ajuste conforme necessário */
    font-size: 0.9em;
}

.custom-meta {
    display: flex;
    align-items: center;
}

.entry-meta .posted-by.author {
    display: none;
}

/*Ajustando o tamanho da margin nos posts*/
#primary.content-area.primary {
    margin: 0 0 0;
}

.entry-meta {
    display: flex;
    align-items: center;
}

.entry-meta span {
    margin-right: 10px;
}

/*tamanho da tela na home*/
@media (min-width: 922px) {
    .ast-container {
        max-width: 980px;
    }
}

.ast-container,
.ast-container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.card {
    display: flex;
    /* Transforma o card em um container flex */
    flex-direction: column;
    /* Conteúdo dentro do card se organiza em coluna */
}

.card-content {
    flex-grow: 1;
    margin: 0px 0px 0;
    text-align: center;
    overflow: hidden;
}

.card-footer {
    margin: 5px 0px 1px;
    text-align: center;
}


/* Para as tags de local */
/* 1. Container dos 'local-tag' dentro do card-footer */
.tusp-portfolio-grid .tusp-portfolio-item .card-footer .portfolio-list-local {
    display: flex;
    /* Ativa o Flexbox */
    flex-wrap: wrap;
    /* Permite que os itens quebrem para a próxima linha */
    gap: 0.5em;
    /* Espaço entre as tags. Ajuste conforme necessário. O seu já tinha gap: 10px */
    width: 100%;
    /* Faz o container ocupar toda a largura disponível no card-footer */
    /* Respiro de 10px nas laterais: as tags não encostam na borda do card */
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 15px;
    /* Added spacing from image */
    /* Mantendo margens existentes */
    margin-bottom: 0px;
    /* Removed spacing to title */
    /* Mantendo margens existentes */
    /* Outros estilos que você já tinha para este seletor podem permanecer, como color, font-weight, font-size.
       Apenas display, flex-wrap, e gap são os mais importantes para este novo layout. */
}

/* 2. Estilos para cada 'local-tag' individual */
.tusp-portfolio-grid .tusp-portfolio-item .card-footer .portfolio-list-local .local-tag {
    flex-grow: 1;
    /* Faz com que a tag cresça para ocupar o espaço disponível na linha */
    flex-basis: auto;
    /* A base de tamanho antes de crescer. 'auto' ou um valor como '100px' se quiser que quebre mais cedo. */
    text-align: center;
    /* Centraliza o texto dentro da tag */

    /* Estilos que você já tem e são importantes manter */
    padding: 5px 10px;
    /* Ajuste o padding vertical e horizontal conforme o visual desejado. O original era 5px 10px 6px 5px */
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    /* Ou o font-weight que estava usando */
    text-decoration: none;
    font-size: 0.85em;
    /* Ou o font-size que estava usando */

    /* Garante que o texto da tag não quebre em múltiplas linhas internamente */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: center;
    /* Adiciona "..." se o texto da tag for muito longo para o espaço */

    margin: 0;
    /* Remove margens individuais que possam conflitar com o 'gap' do container flex */
    /* A cor de fundo será aplicada pelas classes específicas (ex: .span-cor-mariantonia) que o seu JS adiciona */
}


/* Editando a home */

.home .em-cartaz-section h2 {
    /* Se você usou o wrapper e está na home */
    text-align: center;
    /* ou left */
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 2em;
    /* Ajuste conforme necessário */
}


/* Para página inicial */

/* Estrutura das Colunas na Home */
.home-columns-section {
    display: flex;
    flex-wrap: wrap;
    /* Permite que as colunas quebrem em telas menores */
    gap: 30px;
    /* Espaço entre as colunas, ajuste conforme necessário */
    margin-top: 0;
    /* Espaçamento acima da seção de colunas */
    margin-bottom: 0;
    /* Espaçamento abaixo da seção de colunas */
}

.home-column {
    flex: 1;
    /* Faz com que cada coluna tente ocupar o mesmo espaço */
    min-width: 300px;
    /* Largura mínima antes de quebrar a linha em telas menores */
}

.home-column h2 {
    /* Estilo para os títulos das seções "Notícias" e "Agenda TUSP" */
    margin-bottom: 1em;
    font-size: 1.8em;
    /* Ajuste o tamanho conforme preferir */
}

.tusp-noticia-item {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #e0e0e0;
    /* Linha separadora sutil */
}

.tusp-noticia-item:last-child {
    border-bottom: none;
    /* Remove a borda do último item */
    margin-bottom: 0;
    padding-bottom: 0;
}

.tusp-noticia-item .entry-title {
    font-size: 1.2em;
    /* Tamanho do título da notícia */
    margin-bottom: 0.3em;
}

.tusp-noticia-item .entry-title a {
    text-decoration: none;
    color: #222222;
    /* Cor do título */
}

.tusp-noticia-item .entry-title a:hover {
    color: #0073aa;
    /* Cor do título ao passar o mouse (opcional) */
}

.tusp-noticia-item .entry-meta {
    font-size: 0.8em;
    color: #555555;
    /* Cor dos metadados (data, categoria) */
    margin-bottom: 0.75em;
    line-height: 1.4;
}

.tusp-noticia-item .entry-summary p {
    margin-bottom: 0;
    font-size: 0.95em;
    line-height: 1.6;
}

/* Calendario do TUSP */

.secao-calendario-completo h2 {
    /* Título da seção geral do calendário */
    text-align: center;
    margin-bottom: 1em;
    font-size: 2em;
}

/* Container principal gerado pelo shortcode */
.tusp-calendar-container-main {
    display: flex;
    flex-wrap: wrap;
    /* Permite quebrar em telas menores */
    gap: 30px;
    /* Espaço entre a coluna do calendário e a coluna da lista de eventos */
}

.tusp-calendar-column {
    flex: 2;
    /* Calendário ocupa mais espaço (ex: 2/3) */
    min-width: 300px;
    /* Ou um valor que funcione bem para o calendário */
}

.tusp-event-list-column {
    flex: 1;
    /* Lista de eventos ocupa menos espaço (ex: 1/3) */
    min-width: 280px;
    /* background-color: #f9f9f9; /* Removido para seguir o exemplo MariAntonia (fundo transparente) */
    /* border: 1px solid #eee; */
    /* Removido */
    /* padding: 1em; */
    /* Removido, estilizar o conteúdo interno se necessário */
}

/* Estilos para o cabeçalho do calendário (título do mês, navegação) */
.tusp-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
    padding: 0.5em 0;
    /* Ajustado para não ter padding lateral excessivo */
    /* background-color: #f8f8f8; */
    /* Fundo opcional, exemplo MA é limpo */
    border-bottom: 1px solid #ddd;
}

.tusp-calendar-month-year {
    font-size: 1.5em;
    /* Exemplo: MAIO 2025 */
    font-weight: bold;
    text-align: center;
    flex-grow: 1;
}

.tusp-calendar-nav a {
    text-decoration: none;
    color: #333;
    /* Cor do link de navegação */
    padding: 0.5em;
    font-size: 0.9em;
    font-weight: bold;
}

.tusp-calendar-nav a:hover {
    color: #c90000;
    /* Cor TUSP ao passar o mouse */
}

/* Grid do Calendário */
.tusp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #ddd;
    /* Linhas da grade */
    border: 1px solid #ddd;
}

.tusp-calendar-weekday-header {
    background-color: #fff;
    /* Fundo dos dias da semana */
    text-align: center;
    padding: 0.6em 0.2em;
    font-weight: bold;
    font-size: 0.8em;
    color: #777;
}

.tusp-calendar-day {
    background-color: #fff;
    padding: 0.2em 0.5em;
    /* Padding interno dos dias */
    text-align: right;
    min-height: 50px;
    /* Altura mínima das células */
    position: relative;
    font-size: 0.8em;
    cursor: pointer;
    /* Indica que o dia é clicável (para o futuro) */
}

.tusp-calendar-day:hover {
    background-color: #f0f0f0;
    /* Efeito hover suave */
}

.tusp-calendar-day .day-number {
    display: block;
}

.tusp-calendar-day.empty {
    background-color: #f9f9f9;
    cursor: default;
}

.tusp-calendar-day.empty:hover {
    background-color: #f9f9f9;
}


.tusp-calendar-day.today {
    /* Estilo para o dia atual */
    background-color: #fffde7;
    /* Um amarelo claro para destacar "hoje" */
    font-weight: bold;
}

.tusp-calendar-day.today .day-number {
    color: #c90000;
    /* Cor TUSP para o número do dia atual */
}

/* (Manter .selected-day-example e .event-marker da resposta anterior se quiser testar com eles) */
/* Marcador de evento (será usado quando tivermos eventos reais) */
.event-marker {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #c90000;
    /* Cor do marcador de evento */
    border-radius: 50%;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}


/* Cabeçalho da Lista de Eventos */
.tusp-event-list-header {
    font-weight: normal;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
    font-size: 0.9em;
    color: #777;
}

.tusp-event-list-header .selected-date-for-events {
    color: #000;
    font-weight: bold;
}

.tusp-event-list-content p {
    /* Mensagem de "lista de eventos virá aqui" */
    font-style: italic;
    color: #777;
    font-size: 0.9em;
}


/* Estilo para os itens de evento de exemplo */
.tusp-event-item-example {
    display: flex;
    gap: 10px;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}

.tusp-event-item-example:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.tusp-event-item-example img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.tusp-event-item-example .event-details h4 {
    margin: 0 0 0.3em 0;
    font-size: 1em;
    font-weight: bold;
}

.tusp-event-item-example .event-details p {
    margin: 0;
    font-size: 0.85em;
    color: #666;
}

.tusp-event-item-example .event-details p span {
    /* Para o "All Day" */
    font-weight: bold;
}

/* Para layout lado a lado como no exemplo do Maria Antonia: */
/* Você precisaria de um container geral para o calendário e a lista */
.calendario-e-lista-container {
    display: flex;
    flex-wrap: wrap;
    /* Quebra em telas menores */
    gap: 20px;
    /* Espaço entre calendário e lista */
}

.calendario-e-lista-container .tusp-calendar-wrapper {
    flex: 2;
    /* Calendário ocupa mais espaço */
    min-width: 320px;
    /* Largura mínima para o calendário */
    margin-bottom: 0;
    /* Remove margem se estiver lado a lado */
}

.calendario-e-lista-container .tusp-event-list-wrapper {
    flex: 1;
    /* Lista de eventos ocupa menos espaço */
    min-width: 300px;
    /* Largura mínima para a lista */
    margin-top: 0;
    /* Remove margem se estiver lado a lado */
    background-color: transparent;
    /* Fundo da lista no exemplo é transparente */
    border: none;
    padding: 0;
}

.calendario-e-lista-container .tusp-event-list-header {
    /* Ajusta o header da lista de eventos */
    background-color: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
}

/* Estilos para a lista de eventos reais */
.tusp-event-item {
    display: flex;
    gap: 15px;
    /* Espaço entre thumbnail e detalhes */
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #eee;
}

.tusp-event-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tusp-event-item .event-thumb img {
    width: 70px;
    /* Tamanho da thumbnail */
    height: 70px;
    object-fit: cover;
    border-radius: 3px;
    /* Borda arredondada opcional */
}

.tusp-event-item .event-details {
    flex: 1;
}

.tusp-event-item .event-title {
    margin: 0 0 0.25em 0;
    font-size: 1.1em;
    /* Tamanho do título do evento */
    font-weight: bold;
}

.tusp-event-item .event-title a {
    text-decoration: none;
    color: #333;
}

.tusp-event-item .event-title a:hover {
    color: #c90000;
    /* Cor TUSP */
}

.tusp-event-item .event-dates,
.tusp-event-item .event-location {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0.25em;
    line-height: 1.4;
}

/* --- Aprimoramentos do Calendário --- */

/* Novo container para as bolinhas de evento, para alinhá-las */
.event-markers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
    /* Espaço entre as bolinhas */
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Bolinha de evento (agora azul!) */
.event-marker {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #004282;
    /* Cor AZUL - ajuste se tiver o hexadecimal exato do TUSP */
    border-radius: 50%;

    /* Remove o posicionamento antigo para funcionar dentro do flex container */
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
}

/* --- Ajustes na Lista de Eventos do Calendário --- */

/* Bloco de código novo (com altura fixa e rolagem) */
.tusp-event-list-content {
    max-height: 470px;
    /* Altura máxima aproximada do calendário */
    overflow-y: auto;
    /* Adiciona a barra de rolagem vertical QUANDO o conteúdo ultrapassa a altura */
    padding-right: 10px;
    /* Espaço para a barra de rolagem não cobrir o texto */
}

/* Estilos para a seção com fundo colorido do shortcode */
.secao-com-fundo {
    padding: 2.5em;
    /* Espaçamento interno */
    margin: 2em 0;
    /* Espaçamento externo */
    border-radius: 8px;
    /* Cantos arredondados */
    color: inherit;
    /* Herda a cor do texto, mas você pode forçar uma aqui se precisar */
}

/*
 * Estilos para a Seção de Conteúdo Extra
 * -------------------------------------------------- */

.secao-extra-wrapper {
    /* O truque para ocupar a largura toda da tela */
    width: 100vw;
    /* 100% da largura da janela */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 1em 0;
    /* Espaçamento vertical generoso */
    margin-top: 1em;
    /* Espaço acima da seção */
}

/* Container para o conteúdo DENTRO da seção, para manter alinhado */
.secao-extra-conteudo {
    max-width: 980px;
    /* Mesma largura máxima do seu .ast-container */
    margin: 0 auto;
    /* Centraliza o conteúdo */
    padding: 0 20px;
    /* Adiciona um respiro nas laterais para telas menores */
    box-sizing: border-box;
}

/* Ajuste de cor de texto para fundos escuros, se necessário */
.secao-extra-wrapper {
    color: #333;
    /* Cor de texto padrão */
}

.meu-elemento-customizado {
    font-family: "balboa-plus", sans-serif;
}

/* Se a cor de fundo for escura, o texto precisa ser claro.
   Isso teria que ser definido manualmente ou com JS,
   mas por enquanto, você pode definir manualmente a cor do texto no editor. */

/* ============================================== */
/* === ESTILOS COMPLETOS PARA OS CARDS DO TUSP === */
/* ============================================== */

/* --- 1. O Card Principal (a caixa que segura tudo) --- */
.quadro-custom {
    flex: 1;
    min-width: 250px;
    background-color: #ffffff;
    /* Fundo branco para o card */
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    text-align: left;
    /* Alinhamos o texto geral à esquerda agora */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* Importante para o cabeçalho não vazar */
    display: flex;
    /* Usamos flexbox aqui também para o conteúdo se organizar */
    flex-direction: column;
    /* Organiza o cabeçalho e corpo em coluna */
}

.quadro-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* --- 2. O Cabeçalho Rosa --- */
.quadro-cabecalho {
    background-color: #ccc;
    /* Um rosa bem clarinho de fundo */
    color: #333;
    /* Cor do texto principal */
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    /* Use uma fonte moderna, se tiver. Se não, o navegador usa uma padrão */
    font-weight: 700;
    /* Negrito */
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Efeito de contorno sutil como na sua imagem */
    text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff;
}

/* --- 3. O Corpo do Card --- */
.quadro-corpo {
    padding: 15px;
    flex-grow: 1;
    /* Faz o corpo crescer e ocupar o espaço disponível */
}

/* --- 4. Cada Bloco de Evento --- */
.evento-bloco {
    margin-bottom: 15px;
    /* Espaço abaixo de cada bloco */
}

.evento-titulo {
    font-size: 0.95em !important;
    color: #333;
    margin-top: 0;
    margin-bottom: 8px;
    /* Espaço entre o título e a descrição */
    font-weight: 700;
    /* Título em negrito */
}

.evento-descricao {
    font-size: 0.75em;
    color: #555;
    line-height: 1.6;
    /* Altura da linha para melhor legibilidade */
    margin: 0;
}

/* --- 5. A Linha Separadora --- */
hr.evento-separador {
    border: 0;
    height: 1px;
    background-color: #EAEAEA;
    /* Uma linha bem suave */
    margin: 20px 0;
    /* Espaçamento vertical da linha */
}

/* Para telas menores (tablets e celulares), fazemos os quadros ocuparem mais espaço */
@media (max-width: 768px) {
    .quadro-custom {
        /* Em telas de tablet, podemos ter 2 colunas */
        flex-basis: 40%;
    }
}

@media (max-width: 480px) {
    .quadro-custom {
        /* Em telas de celular, temos 1 coluna */
        flex-basis: 100%;
    }
}

.botao-custom {
    background-color: #E5007B;
    color: #fff !important;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.paragrafo-intro {
    font-size: 1.2em;
    font-style: italic;
    color: #555;
}

.container-responsivo-custom {
    display: flex;
    /* A MÁGICA ACONTECE AQUI! */
    flex-wrap: wrap;
    /* Permite que os cards quebrem para a linha de baixo em telas menores. */
    gap: 10px;
    /* Cria um espaço horizontal e vertical entre os cards. Ajuste se quiser. */
    justify-content: center;
    /* Centraliza os cards na linha. */
    margin: 0em auto;
    /* Adiciona um espaço vertical para respirar. */
}

/* ===================================================================
 * LAYOUT DA PÁGINA DE PORTFOLIO (EVENTO) - VERSÃO FINAL
 * =================================================================== */

/* Define o layout de grid com duas colunas para o cabeçalho do portfólio */
.portfolio-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* 1. Define a altura e a estrutura flex da CAIXA DE DETALHES. */
.portfolio-header .portfolio-details {
    height: 600px;
    /* Altura fixa para alinhar com a imagem. Ajuste este valor se a altura da imagem mudar. */
    display: flex !important;
    flex-direction: column !important;
    background: white;
    padding: 20px;
    border-radius: 15px;
}

/* 2. Garante que o título e a tag local NÃO cresçam, permanecendo fixos no topo */
.portfolio-header .portfolio-details h2,
.portfolio-header .portfolio-details .portfolio-local {
    flex-shrink: 0 !important;
    /* Impede que os itens encolham */
}

/* Novo container rolável para todo o conteúdo abaixo do título e tag local */
.portfolio-details-scrollable {
    flex-grow: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-right: 10px;
    /* Espaço para a barra de rolagem não cobrir o texto */
}

/* Remove a margem inferior do último parágrafo em "Outras Informações" para evitar espaço excessivo */
.info-importante-content p:last-child {
    margin-bottom: 0 !important;
}

/* 3. Estilização do container da ficha técnica (agora expande naturalmente) */
.ficha-tecnica-scroll-container {
    margin-top: 15px !important;
    padding-top: 20px;
    border-top: 1px solid #eee;
    /* Adiciona uma linha separadora */
}

/* 4. Estiliza o rótulo "FICHA TÉCNICA" */
.ficha-tecnica-scroll-container .rotulo {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 11px;
}

/* 5. Estiliza o conteúdo da ficha técnica (rolagem removida, pois agora rola no container pai) */
.ficha-tecnica-scroll-container .ficha-tecnica-content {
    font-size: 0.9em;
    line-height: 1.5;
}

/* Garante que o parágrafo dentro da ficha técnica não tenha margens excessivas */
.ficha-tecnica-content p {
    margin-top: 0;
}

/* ===================================================================
 * LAYOUT RESPONSIVO PARA MOBILE (TELAS MENORES QUE 768px)
 * =================================================================== */

@media (max-width: 768px) {

    /* 1. Altera o grid para ter apenas UMA coluna.
       Isso empilha a imagem e a caixa de informações verticalmente. */
    .portfolio-header {
        grid-template-columns: 1fr;
    }

    /* 2. Remove a altura fixa da caixa de detalhes.
       Isso permite que a caixa cresça o necessário para mostrar todo o conteúdo. */
    .portfolio-header .portfolio-details {
        height: auto;
        display: block;
        /* Desativa o modo 'flex' que usávamos para a rolagem no desktop. */
    }

    /* 3. Desativa a rolagem interna de todo o conteúdo no mobile, deixando a página rolar normalmente. */
    .portfolio-details-scrollable {
        height: auto;
        overflow-y: visible;
        display: block;
        padding-right: 0;
    }

    .ficha-tecnica-scroll-container {
        flex-grow: 0;
    }

    .ficha-tecnica-scroll-container .ficha-tecnica-content {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

a.quadro-link-wrapper {
    text-decoration: none;
    /* Remove o sublinhado do link */
    color: inherit;
    /* Faz o texto dentro do link herdar a cor normal */
    display: flex;
    /* Faz o <a> se comportar como um item flex, respeitando o layout */
    flex-direction: column;
}

a.quadro-link-wrapper .quadro-custom {
    width: 100%;
    /* Garante que o quadro ocupe todo o espaço do link */
}

/* Para telas grandes (desktops com 992px de largura ou mais) */
@media (min-width: 992px) {
    .container-responsivo-custom {
        /* Esta regra impede que os itens quebrem para a próxima linha */
        flex-wrap: nowrap;
    }
}

.quadro-link-wrapper * {
    text-decoration: none !important;
}

/* Regra 1: Garante que o próprio link principal não tenha sublinhado. */
a.quadro-link-wrapper,
a.quadro-link-wrapper:hover {
    text-decoration: none !important;
}

/* Regra 2: Força que QUALQUER texto DENTRO do link (títulos, parágrafos)
   também não tenha sublinhado, sobrepondo qualquer regra do tema. */
.quadro-link-wrapper * {
    text-decoration: none !important;
}

/* 1. Reduz o espaço ABAIXO de cada bloco de evento */
.quadro-custom .evento-bloco {
    margin-bottom: 12px;
    /* Era 15px, reduzimos um pouco */
}

/* 2. Reduz o espaço entre o TÍTULO e a DESCRIÇÃO */
.quadro-custom .evento-titulo {
    margin-bottom: 4px;
    /* Era 8px, uma redução significativa */
    line-height: 1.3;
    /* Melhora a proximidade com o texto abaixo */
}

/* 3. Garante que a descrição não adicione espaço extra */
.quadro-custom .evento-descricao {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.4;
    /* Um bom espaçamento entre linhas para leitura */
}

/* 4. Reduz drasticamente o espaço da LINHA SEPARADORA */
.quadro-custom hr.evento-separador {
    margin-top: 12px;
    margin-bottom: 12px;
    /* Era 20px em cima e embaixo, agora está bem menor */
}

/* ================================================== */
/* === CORRIGE ALTURA DA IMAGEM NO CABEÇALHO DO CARD === */
/* ================================================== */

.quadro-cabecalho a {
    display: block;
    /* Faz o link se comportar como um bloco, eliminando espaços extras */
    line-height: 0;
    /* Remove qualquer altura de linha residual para um ajuste perfeito */
}

/* ======================================================= */
/* === FORMATAÇÃO FINAL DOS LINKS NOS TÍTULOS DOS CARDS === */
/* ======================================================= */

/*
  Esta regra ABRANGENTE garante que os links nos títulos
  tenham a aparência correta em TODOS os seus estados.
*/
.quadro-custom .evento-titulo a,
.quadro-custom .evento-titulo a:link,
.quadro-custom .evento-titulo a:visited,
.quadro-custom .evento-titulo a:active {
    color: #333333 !important;
    /* A cor cinza-escura dos títulos */
    text-decoration: none !important;
    /* Remove o sublinhado */
    font-weight: 700 !important;
    /* Garante que seja negrito */
}

/*
  Esta regra garante que, ao passar o mouse, a formatação
  se mantenha consistente, sem mudar de cor ou aparecer sublinhado.
*/
.quadro-custom .evento-titulo a:hover {
    color: #333333 !important;
    /* Mantém a mesma cor */
    text-decoration: none !important;
    /* Mantém sem sublinhado */
}

.espaco-calendario {
    padding: 15px 20px 0;
}

/* =================================================================== */
/* ESTILOS ATUALIZADOS PARA O MENU PRINCIPAL (VERSÃO CORRIGIDA) */
/* =================================================================== */

/* --- 1. Para itens com DUAS LINHAS e SETA de submenu --- */
/* Esta regra organiza o texto e a seta lado a lado */
#ast-hf-menu-1 .menu-item.duas-linhas-com-seta>a {
    display: flex;
    /* Ativa o modo Flexbox */
    align-items: center;
    /* Alinha o texto e a seta verticalmente ao centro */
    justify-content: center;
    /* Centraliza o conjunto no espaço do botão */
    gap: 6px;
    /* Cria um pequeno espaço entre o texto e a seta */
    /* Removemos a quebra de linha daqui para aplicar somente no texto */
}

/* Esta regra aplica a quebra de linha APENAS no texto */
#ast-hf-menu-1 .menu-item.duas-linhas-com-seta>a {
    white-space: normal;
    text-align: center;
    /* Alinha o texto à direita para ficar bonito perto da seta */
    line-height: 13px;
    max-width: 120px;
    /* Aumentei um pouco para evitar a quebra do "s". Ajuste se precisar. */
}


/* --- 2. Para itens com DUAS LINHAS SIMPLES (sem seta) --- */
#ast-hf-menu-2 .menu-item.duas-linhas-simples>a {
    display: inline-block;
    white-space: normal !important;
    text-align: center;
    line-height: 1.3em;
    max-width: 100px;
    /* Ajuste se necessário */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* --- 3. Para o DESTAQUE (continua igual) --- */
#ast-hf-menu-2 .menu-item.menu-destaque>a {
    background-color: #fff;
    color: rgba(18, 18, 18, 0.6) !important;
    border-radius: 5px;
    border: 2px solid #7c7c7c;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 13px;
}

/* Efeito ao passar o mouse */
#ast-hf-menu-2 .menu-item.menu-destaque:hover>a {
    color: #555 !important;
    background-color: #eee;
    /* Cor um pouco mais escura no hover */
}

/* =================================================================== */
/* BOTÃO FLUTUANTE DA PROGRAMAÇÃO                                    */
/* =================================================================== */

#botao-flutuante-programacao {
    /* Por padrão, o botão fica escondido em todas as páginas */
    display: none;

    /* Posicionamento Fixo */
    position: fixed;
    bottom: 25px;
    /* Distância da parte de baixo */
    right: 25px;
    /* Distância da esquerda */
    z-index: 1000;
    /* Garante que ele fique por cima de outros elementos */

    /* Estilo do Botão */
    background-color: #fff;
    /* Mesma cor do seu outro botão para consistência */
    font-size: 16px;
    color: #444;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    border: 3px solid #444;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    /* Uma sombra sutil */
    transition: all 0.3s ease;
    /* Efeito suave na transição */
}

/* Regra Mágica: Mostra o botão APENAS na página inicial */
/* O WordPress adiciona a classe .home no body da página inicial 
body.home #botao-flutuante-programacao {
  display: inline-block;
}
*/

/* Efeito ao passar o mouse */
#botao-flutuante-programacao:hover {
    background-color: #eee;
    /* Cor um pouco mais escura */
    transform: translateY(-2px);
    /* Levanta um pouquinho o botão */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
}

/* Ajuste para telas pequenas (celulares) */
@media (max-width: 768px) {
    #botao-flutuante-programacao {
        font-size: 14px;
        padding: 10px 15px;
        bottom: 20px;
        right: 20px;
    }
}

/* =================================================================== */
/* === FONTES PERSONALIZADAS PARA A AGENDA (ROBOTO SLAB) === */
/* =================================================================== */

/*
 * Esta regra aplica a fonte Roboto Slab a todo o container do calendário,
 * incluindo o cabeçalho, os dias e a lista de eventos.
*/
.secao-calendario-completo {
    font-family: 'Roboto Slab', serif;
    text-transform: lowercase;
}

.tag-final-local h2 {
    font-size: 1em;
    font-family: 'Roboto Slab', serif;
}

/*
 * ==================================================
 * === ESTILOS PARA AS SEÇÕES DA PÁGINA INICIAL ===
 * ==================================================
*/

/* Alvo: Apenas as seções da página inicial (pelo ID da página) */
.post-115 .secao-extra-wrapper {
    padding-top: 0em;
    /* Aumenta o espaço interno no topo */
    padding-bottom: 0em;
    /* Aumenta o espaço interno embaixo */
}

.entry-content .caption h2 {
    margin-bottom: 0;
}

.metaslider .caption,
.metaslider .caption-wrap {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    /* Evita que o texto quebre em telas menores */
    min-width: 10% !important;
}

/* Garante que os títulos dentro das seções tenham um bom espaçamento */
.home .secao-extra-wrapper h2 {
    margin-top: 0;
    margin-bottom: 0.2em;
    /* Espaço entre o título e o conteúdo abaixo */
}

.home .secao-extra-wrapper .secao-calendario-completo h2 {
    margin-bottom: 0.5em;
    /* Espaço entre o título e o conteúdo abaixo */
}

.post-8384 .secao-extra-conteudo {
    padding: 0em;
    /* border: 1px solid #ddd; */
}

.post-115 .secao-extra-conteudo {
    padding: 0.5em 1em;
    /* border: 1px solid #ddd; */
    border-radius: 5px;
}

.post-115 .secao-extra-wrapper:nth-of-type(4) .secao-extra-conteudo {
    padding-top: 1.5em;
}

.post-8384 .secao-extra-wrapper:last-child {
    padding-bottom: 1.8em;
    /* border: 1px solid #ddd; */
}

.post-8384 .quadro-custom {
    padding-top: .7em;
    /* border: 1px solid #ddd; */
}

.secao-extra-conteudo-banner {
    padding: 1.5em !important;
    background-color: #fff
        /*#fff7f6*/
    ;
    border: none !important;
}

.metaslider.ms-theme-simply-dark.has-dots-nav {
    margin-bottom: 1rem !important;
}

/* =================================================================== */
/* === PORTFOLIO EM LINHA ÚNICA (APENAS PÁGINA ID 115) === */
/* =================================================================== */

/* 1. Transforma o grid em um container flex horizontal na página .post-115 */
.post-115 .tusp-portfolio-grid {
    display: flex;
    /* Muda o layout de grid para flex */
    flex-wrap: nowrap;
    /* Impede que os itens quebrem para a linha de baixo */
    overflow-x: auto;
    /* Adiciona a barra de rolagem horizontal */
    overflow-y: hidden;
    /* Esconde qualquer rolagem vertical desnecessária */

    /* Remove a propriedade grid-template-columns que não é mais necessária */
    grid-template-columns: none;

    /* Adiciona um preenchimento inferior para a barra de rolagem não cobrir os cards */
    padding-bottom: 20px;

    /* Melhora a experiência de rolagem em dispositivos de toque */
    -webkit-overflow-scrolling: touch;
}

/* 2. Define um tamanho fixo para cada item do portfólio (APENAS na página .post-115) */
.post-115 .tusp-portfolio-grid .tusp-portfolio-item {
    flex: 0 0 220px;
    /* Impede que o item cresça ou encolha e define sua largura base */
    width: 220px;
    /* Largura fixa para cada card */
}

/* =================================================================== */
/* === CURSOR PARA ARRASTAR O PORTFÓLIO (PÁGINA ID 115) === */
/* =================================================================== */

/* Cursor de mão aberta quando o mouse está sobre a área */
.post-115 .tusp-portfolio-grid {
    cursor: grab;
    user-select: none;
    /* Impede que o texto seja selecionado ao arrastar */
}

/* Cursor de mão fechada quando o usuário está clicando e arrastando */
.post-115 .tusp-portfolio-grid.active {
    cursor: grabbing;
}

.post-115 a.read-more

/*, .post-115 .meta-category */
    {
    display: none;
}

.post-115 .tusp-noticias-list,
.post-115 .tusp-coluna-lateral {
    font-size: .75em;
}

/* Layout de Duas Colunas para Seção Específica */
.tusp-layout-duas-colunas {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* Espaçamento entre as colunas */
}

.tusp-coluna-noticias {
    flex: 2;
    /* Faz a coluna de notícias ocupar 2/3 do espaço */
    min-width: 300px;
}

.tusp-coluna-lateral {
    flex: 1;
    /* Faz a coluna lateral ocupar 1/3 do espaço */
    min-width: 280px;
}

.page .entry-content {
    background-color: white;
    border-radius: 10px;
    /* border: 1px solid #ededed; */
    margin-bottom: 2em;
    margin-top: 1em;
}

.post-8384.page .entry-content,
.post-115.page .entry-content,
.post-8272.page .entry-content {
    background-color: transparent !important;
    border: none;
}

body.page {
    background-color: #ededed;
}

/* Busca no header - Estilo 
.ast-header-search .ast-search-menu-icon form label {
    border-bottom: 2px solid #333 !important;
}
*/

/*
 * ==================================================
 * === ESTILOS COMPLETOS PARA A PÁGINA DE BUSCA ===
 * ==================================================
*/

/* --- ESTRUTURA DO CABEÇALHO (TÍTULO E PAGINAÇÃO) --- */
.search-header-container {
    display: flex;
    justify-content: space-between;
    /* Itens nas extremidades */
    align-items: center;
    /* Alinha verticalmente */
    flex-wrap: wrap;
    /* Permite quebrar em telas menores */
    gap: 20px;
    /* Espaço entre título e paginação em telas menores */
    margin-bottom: 40px;
    /* Espaço antes dos cards */
    border-bottom: 1px solid #eee;
    /* Linha separadora opcional */
    padding-bottom: 20px;
}

.search-title-area {
    flex-grow: 1;
    /* Faz a área do título tentar ocupar mais espaço */
}

.search-pagination-area {
    flex-shrink: 0;
    /* Impede que a paginação encolha */
}

/* --- TÍTULO "RESULTADO DA BUSCA" MENOR --- */
.search .page-title {
    font-size: 1.5em;
    /* Tamanho do título reduzido */
    font-weight: bold;
    color: #333;
    margin-bottom: 0;
    /* Remove a margem que estava no h1 */
}

.search .page-title span {
    font-weight: normal;
    color: #555;
}


/* --- GRADE DE 3 COLUNAS PARA OS CARDS --- */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}


/* --- ESTILO DO CARD INDIVIDUAL --- */
.card-result {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-result:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- IMAGEM DO CARD (TAMANHO UNIFORME) --- */
.card-result-image img {
    width: 100%;
    height: 180px;
    /* Controle a altura de todas as imagens aqui */
    object-fit: cover;
}

/* --- CONTEÚDO DO CARD (TÍTULO E RESUMO) --- */
.card-result-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-result-content .entry-title {
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 15px;
}

.card-result-content .entry-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.card-result-content .entry-title a:hover {
    color: #E5007B;
    /* Cor de destaque do TUSP */
}

.card-result-content .entry-summary {
    color: #666;
    font-size: 1em;
    flex-grow: 1;
    margin-bottom: 0;
}


/* --- RESPONSIVIDADE DA GRADE --- */
@media (max-width: 991px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas em tablets */
    }
}

@media (max-width: 767px) {
    .search-results-grid {
        grid-template-columns: 1fr;
        /* 1 coluna em celulares */
    }
}

/*
 * ==========================================================
 * === CORREÇÃO FINAL PARA O LAYOUT FLEX DA PÁGINA DE BUSCA ===
 * ==========================================================
*/

/* * Alvo: Apenas na página de busca (body.search).
 * Ação: Força cada seção principal (o cabeçalho e a grade de cards) 
 * a ocupar 100% da largura do container flex. Isso faz com que 
 * fiquem uma EM CIMA da outra, em vez de lado a lado.
*/
.search .ast-container>.search-header-container,
.search .ast-container>.search-results-grid {
    flex-basis: 100%;
    width: 100%;
}

/* =================================================================== */
/* === SLIDER DE PORTFÓLIO COM SETAS (PÁGINA ID 115) === */
/* =================================================================== */

/* 1. Container que envolve o slider e as setas */
.post-115 .tusp-portfolio-slider-wrapper {
    position: relative;
    /* Necessário para posicionar as setas */
    margin: 0 25px;
    /* Adiciona um espaço nas laterais para as setas não ficarem coladas */
}

/* 2. Esconde a barra de rolagem horizontal */
.post-115 .tusp-portfolio-grid {
    scrollbar-width: none;
    /* Para Firefox */
    -ms-overflow-style: none;
    /* Para Internet Explorer e Edge */
}

.post-115 .tusp-portfolio-grid::-webkit-scrollbar {
    display: none;
    /* Para Chrome, Safari e Opera */
}

button.tusp-slider-arrow:focus,
button.tusp-slider-arrow:hover {
    background-color: #222 !important;
    color: #fff !important;
}

/* 3. Estilo e posicionamento das setas */
.tusp-slider-arrow {
    position: absolute;
    top: -11%;
    transform: translateY(0%);
    z-index: 10;
    background-color: transparent;
    /*rgba(255, 255, 255, 0.85)*/
    border: none;
    border-radius: 10%;
    width: 30px;
    height: 30px;
    font-size: 23px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    /*0 2px 6px rgba(0, 0, 0, 0.15)*/
    transition: all 0.2s ease-in-out;
}

.tusp-slider-arrow:hover {
    /* background-color: #fff; */
    transform: translateY(0%) scale(1.05);
    /* Efeito de zoom no hover */
}

.tusp-slider-arrow.prev {
    left: 0px;
    /* Posiciona a seta para fora da área de conteúdo */
}

.tusp-slider-arrow.next {
    right: 0px;
    /* Posiciona a seta para fora da área de conteúdo */
}

/* 4. Em telas menores, onde o toque é mais comum, as setas não são necessárias */
@media (max-width: 768px) {
    .tusp-slider-arrow {
        top: -9%;
    }

    .post-115 .tusp-portfolio-slider-wrapper {
        margin: 0;
        /* Remove a margem lateral no mobile */
    }
}

.entry-content :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0;
}

.metaslider.ms-theme-simply-dark .flexslider ul.slides .caption-wrap .caption {
    padding: 0rem 1rem;
}

/* ===================================================================
 * CSS para Layout de Colunas (ex: Seção Notícias/Mídias)
 * =================================================================== */

.container-duas-colunas {
    display: flex;
    flex-wrap: wrap;
    /* Permite quebrar para mobile */
    gap: 40px;
    /* Espaço entre as colunas */
}

/* Coluna da esquerda (Notícias) - 60% da largura */
.coluna-esquerda {
    flex: 6;
    min-width: 300px;
    /* Largura mínima antes de quebrar */
}

/* Coluna da direita (Mídias) - 40% da largura */
.coluna-direita {
    flex: 4;
    min-width: 300px;
    /* Largura mínima antes de quebrar */
}

/* Garante que vídeos e iframes se ajustem à coluna */
.coluna-direita iframe,
.coluna-direita video {
    max-width: 100%;
}

/* --- CORREÇÃO DO VÍDEO RESPONSIVO --- */
.video-responsivo-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* Proporção 16:9 (YouTube padrão) */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
    /* Espaço para não grudar no próximo item */
    border-radius: 6px;
    /* Opcional: bordas arredondadas */
}

.video-responsivo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Em telas pequenas (mobile), faz as colunas ocuparem 100% */
@media (max-width: 768px) {
    .container-duas-colunas {
        flex-direction: column;
        /* Coloca uma coluna embaixo da outra */
    }

    .coluna-esquerda,
    .coluna-direita {
        flex: 1 1 100%;
        /* Ocupa 100% da largura */
    }
}

.page article header.entry-header {
    margin-bottom: 1em;
}

/* =================================================================== */
/* === CORREÇÃO: Data da Notícia na Home (ao lado do título) === */
/* =================================================================== */

/*
 * Esta regra aplica-se à data (.meta-date) que agora está
 * DENTRO do título da notícia (.entry-title).
*/
.tusp-noticia-item .entry-title .meta-date {
    font-size: 0.8em;
    /* Restaura o tamanho de fonte menor */
    color: #3498db;
    /* Restaura a cor cinza (a cor original no seu CSS) */
    font-weight: normal;
    /* Remove o negrito herdado do H3 */
    margin-left: 3px;
    /* Adiciona um espaço para separar do título */

    /* Se você quiser a data em AZUL, substitua a linha 'color' acima por esta: */
    /* color: #0073aa; */
}

/* =================================================================== */
/* === FILTRO DE ANO DA PÁGINA DE NOTÍCIAS (V2 - Profissional) === */
/* =================================================================== */

.blog-filter-container {
    margin-bottom: 2em;
    /* Espaço abaixo do filtro */
    padding-right: 1em;
}

#blog-year-filter-form {
    display: flex;
    /* Coloca os itens em linha */
    align-items: center;
    /* ALINHA A ALTURA de todos os itens! */
    justify-content: flex-end;
    /* Alinha o grupo todo à direita */
    gap: 12px;
    /* Espaço entre os elementos */
}

/* 1. O TEXTO "Filtrar por Ano:" */
#blog-year-filter-form label {
    font-size: 0.9em;
    color: #333;
    /* Um pouco mais escuro para mais contraste */
    font-weight: bold;
    /* Deixa o texto mais "proposital", menos espremido */
    margin-bottom: 0;
}

/* 2. A BARRA DE SELEÇÃO (Dropdown) */
#blog-year-filter-form select {
    width: 200px;
    /* Define uma largura fixa, não precisa ser tão largo */
    padding: 8px 12px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    /* Garante que a altura seja a mesma do botão */
    box-sizing: border-box;
}

/* 3. O BOTÃO "Filtrar" */
#blog-year-filter-form input[type="submit"] {
    /* Cores (Azul TUSP que já usamos no site) */
    background-color: #004282;
    /* Azul escuro do seu site */
    color: #ffffff;
    border: 1px solid #004282;

    /* Tamanho (para alinhar com o select) */
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: bold;

    /* Estilo */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Efeito ao passar o mouse */
#blog-year-filter-form input[type="submit"]:hover {
    background-color: #0056b3;
    /* Um tom de azul mais claro */
    border-color: #0056b3;
}

#primary.content-area.primary.ast-blog-layout-5-grid {
    margin: 30px 0 0;
}

.type-page .entry-content {
    padding: 1em;
}

.ast-separate-container.ast-two-container #secondary .widget {
    padding: 1em;
}

.type-post .widget-title {
    margin-bottom: 0.3em;
}

.type-post #secondary {
    margin: 2em 0 2.5em 42.5px;
}

body.single-post article.type-post {
    margin-top: 2em;
}

/* =================================================================== */
/* === WIDGET DE IMAGEM DESTACADA (SIDEBAR) === */
/* =================================================================== */

.widget-imagem-destacada-wrapper img {
    width: 100%;
    /* Faz a imagem ocupar 100% da largura do widget */
    height: auto;
    /* Mantém a proporção */
    display: block;
    /* Remove qualquer espaço extra abaixo da imagem */
    border-radius: 8px;
    /* Opcional: deixa as bordas bonitinhas */
}

/* Layout Flexbox para Notícias */
.tusp-noticia-item-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* Responsividade: Celular fica um embaixo do outro */
@media (max-width: 768px) {
    .tusp-noticia-item-flex {
        flex-direction: column;
    }

    .tusp-noticia-thumb {
        width: 100% !important;
        margin-bottom: 15px;
    }

    .tusp-noticia-thumb img {
        width: 100%;
        height: auto;
    }
}

/* Tamanho fixo para a coluna da imagem */
.tusp-noticia-thumb {
    width: 250px;
    /* Ajuste conforme quiser */
    flex-shrink: 0;
}

.tusp-noticia-thumb img {
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
}

.tusp-noticia-content {
    flex-grow: 1;
}

/* Estilo da Paginação */
.tusp-pagination .page-numbers {
    padding: 8px 12px;
    border: 1px solid #ddd;
    margin: 0 3px;
    text-decoration: none;
    color: #333;
}

.tusp-pagination .page-numbers.current {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* --- PAGINAÇÃO BONITA (Correção Visual) --- */
.tusp-pagination-wrapper {
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

/* Estilo dos números e setas */
.tusp-pagination-wrapper .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 35px;
    /* Largura mínima para ficarem quadrados */
    height: 35px;
    padding: 0 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease;
    line-height: 1;
}

/* Hover (passar o mouse) */
.tusp-pagination-wrapper a.page-numbers:hover {
    background-color: #eee;
    border-color: #ccc;
    color: #000;
}

/* Página Atual (Ativa) */
.tusp-pagination-wrapper .page-numbers.current {
    background-color: #333;
    /* Fundo escuro */
    color: #fff;
    /* Texto branco */
    border-color: #333;
    cursor: default;
}

/* --- ESTILO DO BOTÃO "VEJA MAIS" (Para a Home) --- */
.botao-veja-mais-noticias {
    display: inline-block;
    padding: 12px 25px;
    background-color: #333;
    /* Cor do botão */
    color: #fff !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.botao-veja-mais-noticias:hover {
    background-color: #E5007B;
    /* Rosa do TUSP no hover */
    color: #fff !important;
}

/* =================================================== */
/* === CORREÇÃO DA BUSCA - ESTILO MINIMALISTA === */
/* =================================================== */

/* 1. CONFIGURAÇÃO GERAL DO CONTAINER DE BUSCA */
.ast-header-search {
    padding-left: 10px;
    /* Um pequeno respiro do botão 'Últimas Notícias' */
}

/* 2. O ESTADO "DESCANSO" (A linha falsa escrita Buscar...) */
.ast-header-search .ast-search-menu-icon a.ast-search-icon,
.ast-header-search .ast-search-menu-icon .ast-search-icon {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 8rem !important;
    /* REDUZI de 220px para 160px para não quebrar o menu */
    height: 35px !important;
    border-bottom: 1px solid #bbb !important;
    /* A linha cinza */
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

.ast-search-menu-icon form.form-search {
    border: 0 1px 0 0;
}

/* O texto "Buscar..." */
.ast-header-search .ast-search-menu-icon a.ast-search-icon::before,
.ast-header-search .ast-search-menu-icon .ast-search-icon::before {
    margin-right: auto;
    font-size: 0.9em !important;
    color: #999 !important;
    font-weight: normal !important;
    padding-left: 0px;
    display: block !important;
}

.ast-search-menu-icon.slide-search .search-form {
    top: 43%;
}

/* 3. O ESTADO "ATIVO" (Quando clica e abre o campo real) */

/* Esconde a linha falsa quando a real abre para não duplicar */
.ast-header-search .ast-search-menu-icon.ast-search-icon-active a.ast-search-icon,
.ast-header-search .ast-search-menu-icon.ast-search-icon-active .ast-search-icon {
    border-bottom: none !important;
    width: auto !important;
}

.ast-header-search .ast-search-menu-icon.ast-search-icon-active a.ast-search-icon::before {
    display: none !important;
}

/* 4. ESTILIZANDO O CAMPO DE DIGITAÇÃO REAL (A Mágica) */
/* Isso transforma o quadrado branco na linha minimalista */
.ast-search-menu-icon .search-form .search-field {
    background-color: transparent !important;
    /* Fundo transparente */
    border: none !important;
    border-bottom: 1px solid #333 !important;
    /* A linha preta de digitação */
    border-radius: 0 !important;
    padding-left: 0px !important;
    color: #333 !important;
    width: 140px !important;
    /* Mesma largura da linha falsa */
    outline: none !important;
    /* Remove aquela borda azul do navegador */
    box-shadow: none !important;
    /* Remove sombras extras */
    font-size: 0.9em !important;
}

/* Remove o botão de lupa de dentro do input se ele existir */
.ast-search-menu-icon .search-form button,
.ast-search-menu-icon .search-form input[type="submit"] {
    display: none !important;
}

/* 5. MOBILE - Volta ao ícone normal */
@media (max-width: 920px) {

    /* Aumentei um pouco a quebra para tablets */
    .ast-header-search .ast-search-menu-icon a.ast-search-icon {
        width: auto !important;
        border-bottom: none !important;
    }

    .ast-header-search .ast-search-menu-icon a.ast-search-icon::before {
        display: none !important;
    }
}

.ast-search-menu-icon.slide-search .search-form {
    right: 0 !important;
}

.ast-header-search .slide-search .search-form {
    border: none !important;
}

/* Remove o <br> intruso dentro da miniatura da notícia */
.tusp-noticia-thumb br {
    display: none !important;
}

body.single.group-blog #secondary {
    margin: 2em 0 2.5em;
}

/* --- ESTILOS DA NOVA BUSCA DO HEADER --- */

/* Alinha o item de busca no menu */
li.menu-item-busca-custom {
    display: flex;
    align-items: center;
    margin-left: 15px;
    /* Espaço entre o botão Últimas Notícias e a busca */
}

/* O container do formulário */
.tusp-form-busca {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    /* A linha cinza embaixo */
    padding-bottom: 2px;
    width: 120px;
    /* Largura da busca */
    transition: border-color 0.3s ease;
}

/* Efeito ao clicar na busca (a linha fica preta/escura) */
.tusp-form-busca:focus-within {
    border-bottom: 1px solid #333;
}

/* O campo de digitação (input) */
input.tusp-campo-busca {
    border: none !important;
    background: transparent !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    font-size: 0.9em !important;
    color: #333 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
    /* Mantém a fonte do site */
}

/* O botão da lupa */
button.tusp-botao-busca {
    background: transparent !important;
    border: none !important;
    padding: 0 0 0 5px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Remove altura extra */
}

/* Efeito hover na lupa */
button.tusp-botao-busca svg {
    transition: stroke 0.3s ease;
}

button.tusp-botao-busca:hover svg {
    stroke: #E5007B;
    /* Cor TUSP (Rosa) ao passar o mouse na lupa */
}

/* Ajuste para telas pequenas (Celular/Tablet) */
@media (max-width: 921px) {
    li.menu-item-busca-custom {
        margin: 10px 0;
        width: 100%;
        justify-content: center;
        /* Centraliza no menu mobile */
    }

    .tusp-form-busca {
        width: 90%;
        /* Ocupa quase toda a largura no celular */
    }
}

/* --- CORREÇÃO DE ALINHAMENTO DA BUSCA NO MENU DIREITO --- */

/* 1. Força o container do menu a ser uma linha única flexível */
.ast-builder-menu-2 .main-header-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* Proíbe quebrar linha */
    align-items: center !important;
    /* Alinha tudo verticalmente no centro */
}

/* 2. Garante que a busca não seja espremida, mas respeite a linha */
li.menu-item-busca-custom {
    flex-shrink: 0;
    /* Impede que a busca encolha demais */
    margin-left: 20px;
    /* Espaço entre o botão e a lupa */
    margin-bottom: 0 !important;
    /* Garante que não tenha margem empurrando */
}

/* 3. Ajuste fino caso o botão "Últimas Notícias" esteja desalinhado */
.ast-builder-menu-2 .menu-item {
    display: flex;
    align-items: center;
}

/* --- AJUSTES DA BUSCA PARA MOBILE E DESKTOP --- */

/* 1. Esconde a busca do Menu Principal quando estamos no computador */
/* (Assim ela não aparece duplicada ou no lado esquerdo) */
@media (min-width: 922px) {
    .busca-versao-mobile {
        display: none !important;
    }

    /* Protege o alinhamento flex apenas para desktop */
    .ast-builder-menu-2 .main-header-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
}

/* 2. Estilização para Celulares (Telas menores que 921px) */
@media (max-width: 921px) {

    /* Faz o item ocupar a largura toda e centralizar */
    li.menu-item-busca-custom {
        width: 100%;
        margin: 15px 0;
        /* Um pouco de espaço vertical */
        display: flex;
        justify-content: center;
    }

    /* Aumenta a largura do campo para ficar fácil de clicar */
    .tusp-form-busca {
        width: 90% !important;
        /* Quase toda a largura da tela */
        border-bottom: 1px solid #ccc;
    }

    /* Garante que o input tenha tamanho de fonte legível */
    input.tusp-campo-busca {
        font-size: 16px !important;
        /* Evita zoom automático no iPhone */
        height: 40px;
    }
}

/* --- AJUSTE DA BUSCA NO HEADER MOBILE (HTML 1) --- */

/* Configura o container do shortcode para caber na barra */
.tusp-busca-mobile-wrapper {
    display: flex;
    align-items: center;
    margin-right: 10px;
    /* Espaço entre a busca e o ícone do menu */
}

/* Estilo específico para a busca quando está na barra do celular */
.tusp-form-busca.mobile-header-search {
    width: 140px;
    /* Largura fixa menor para caber (ajuste se precisar) */
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
}

/* O campo de texto no mobile */
.tusp-form-busca.mobile-header-search input.tusp-campo-busca {
    font-size: 14px !important;
    height: 30px;
    padding: 0 !important;
    width: 100% !important;
}

/* Esconde o HTML 1 no Desktop para não duplicar com o menu secundário */
@media (min-width: 922px) {
    .ast-header-html-1 {
        display: none !important;
    }
}

/* Ajuste para telas MUITO pequenas (iPhone SE, etc) */
@media (max-width: 360px) {
    .tusp-form-busca.mobile-header-search {
        width: 100px;
        /* Diminui um pouco se a tela for minúscula */
    }
}

/* --- ESTILO DO AJAX LIVE SEARCH (TEXTO COMPACTO) --- */

/* Container dos Resultados */
.tusp-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    /* Cola visualmente no input */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    /* Z-index bem alto para garantir */
    display: none;
    border-radius: 0 0 5px 5px;
    max-height: 350px;
    /* Altura máxima com rolagem se precisar */
    overflow-y: auto;
}

/* Lista Limpa */
.tusp-search-results ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tusp-search-results li {
    border-bottom: 1px solid #eee;
    margin: 0;
}

/* Link Compacto */
.tusp-search-results li a {
    display: block;
    /* Ocupa a linha toda */
    padding: 8px 12px;
    /* Espaçamento confortável mas compacto */
    text-decoration: none;
    transition: background 0.2s;
}

.tusp-search-results li a:hover {
    background-color: #f5f5f5;
}

/* Título do Resultado */
.tusp-search-results .search-title {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    /* Leve negrito */
    display: block;
    line-height: 1.3;
}

/* Data do Resultado */
.tusp-search-results .search-date {
    display: block;
    margin-top: 2px;
}

/* Link "Ver Todos" */
.tusp-search-results li.ver-todos a {
    text-align: center;
    color: #E5007B;
    /* Rosa TUSP */
    font-weight: bold;
    font-size: 13px;
    background: #fafafa;
}

.tusp-search-results .no-results {
    padding: 10px;
    font-size: 13px;
    color: #666;
    text-align: center;
}

/* --- AJUSTE DA BUSCA PARA MOBILE --- */
@media (max-width: 921px) {

    /* 1. Removemos completamente o Dropdown no Mobile */
    .tusp-search-results {
        display: none !important;
    }

    /* 2. Ajuste de segurança para a barra de busca não quebrar o layout */
    /* Isso ajuda no caso do celular do seu chefe */
    .tusp-busca-mobile-wrapper {
        position: relative;
        max-width: 60vw;
        /* Garante que a busca nunca ocupe mais que 60% da tela */
        overflow: hidden;
        /* Se algo vazar, corta, não quebra o site */
    }

    /* Garante que o campo de texto respeite o tamanho */
    .tusp-form-busca.mobile-header-search {
        width: 100% !important;
        max-width: 180px;
        /* Um tamanho máximo seguro */
    }
}

/* --- ATUALIZAÇÃO DO ESTILO DO LIVE SEARCH --- */

/* Alinha a linha de metadados (Tipo | Data) */
.tusp-search-results .search-meta-line {
    display: flex;
    align-items: center;
    font-size: 10px;
    /* Bem pequeno e discreto */
    text-transform: uppercase;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

/* Estilo base do rótulo de tipo */
.search-type {
    font-weight: 800;
}

/* Cores específicas para cada tipo no dropdown */
.search-type.tipo-evento {
    color: #E5007B;
}

/* Rosa */
.search-type.tipo-noticia {
    color: #3498db;
}

/* Azul */
.search-type.tipo-pagina {
    color: #9b59b6;
}

/* Roxo */
.search-type.tipo-padrao {
    color: #555;
}

/* Separador vertical | */
.search-separator {
    margin: 0 6px;
    color: #ddd;
}

/* A data */
.search-date {
    color: #999;
    font-weight: normal;
}

/* Ajuste no título para não brigar com o meta */
.tusp-search-results .search-title {
    font-size: 14px;
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

/* --- ESTILO DOS RESULTADOS NA PÁGINA DE BUSCA --- */

/* Container da linha de meta (acima do título) */
.tusp-search-page-meta {
    font-size: 0.75em;
    /* Pequeno e elegante */
    font-weight: 800;
    margin-bottom: 5px;
    /* Espaço até o título */
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cores dos Tipos (Mesmas do Dropdown) */
.tusp-search-page-meta .tipo-evento {
    color: #E5007B;
    /* Rosa TUSP */
}

.tusp-search-page-meta .tipo-noticia {
    color: #3498db;
    /* Azul */
}

.tusp-search-page-meta .tipo-pagina {
    color: #9b59b6;
    /* Roxo */
}

/* Separador | */
.tusp-search-page-meta .search-separator {
    margin: 0 8px;
    color: #ccc;
    font-weight: normal;
}

/* Data */
.tusp-search-page-meta .search-date {
    color: #777;
    font-weight: normal;
}

/* --- CORREÇÃO DO DROPDOWN DO MENU 2 (DIREITA) --- */

/* 1. Resetar o alinhamento dos itens da lista (li) */
.ast-builder-menu-2 .sub-menu .menu-item {
    display: block !important;
    /* Remove o display:flex que estava centralizando */
    text-align: left !important;
    /* Força texto para a esquerda */
    border-bottom: 1px solid #111;
    /* sugestão: #eaeaea; Linha divisória em largura total */
}

/* Remove a borda do último item para ficar limpo */
.ast-builder-menu-2 .sub-menu .menu-item:last-child {
    border-bottom: none;
}

/* 2. Estilizar o Link (a) para ocupar todo o espaço */
.ast-builder-menu-2 .sub-menu .menu-item>.menu-link {
    display: block !important;
    /* Garante que seja um bloco, não inline */
    width: 100% !important;
    /* Ocupa 100% da largura do dropdown */
    text-align: left !important;
    padding: 10px 20px !important;
    /* Espaçamento interno padrão */
    justify-content: flex-start !important;
    /* Caso o tema force flexbox */
}

/* 3. Corrigir a largura do container do Dropdown */
/* Isso resolve o problema dele estar "muito largo" */
.ast-builder-menu-2 .main-header-menu .sub-menu {
    width: 240px !important;
    /* Largura padrão agradável (igual ao Menu 1) */
    left: auto;
    /* Evita posicionamentos estranhos */
    right: 0;
    /* Alinha o dropdown pela direita se preferir, ou remova para padrão */
}

/* 4. Ajuste específico para a linha divisória (caso ela seja um pseudo-elemento no seu tema) */
/* Isso garante que qualquer borda ou linha ocupe a largura real */
.ast-builder-menu-2 .sub-menu .menu-item>.menu-link {
    border-bottom: none !important;
    /* Remove bordas internas do link se houver duplicidade */
}

/* --- BOTÃO "VER MAIS" PARA CARD DINÂMICO DE PORTFÓLIO (ATUALIZADO) --- */

.portfolio-header .portfolio-details {
    position: relative;
    transition: height 0.4s ease-in-out;
    overflow: hidden;
}

.tusp-expand-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
    display: flex;
    align-items: flex-end;
    /* Joga o texto para o canto direito */
    justify-content: flex-end;
    padding-bottom: 15px;
    padding-right: 25px;
    /* Espaçamento da borda direita */
    box-sizing: border-box;
    /* Garante que o padding não estoure a largura */
    cursor: pointer;
    color: #E5007B;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

.portfolio-details.is-expanded .tusp-expand-btn {
    background: #fff;
    height: 40px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
}

/* --- CORREÇÃO DAS TAGS DE LOCAL (QUEBRA DE LINHA E SOBREPOSIÇÃO) --- */

/* 1. Transforma o container das tags num flexbox responsivo */
.portfolio-local {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Permite que as tags pulem para a linha de baixo */
    gap: 8px 10px !important;
    /* Cria um respiro exato: 8px vertical, 10px horizontal */
    align-items: center;
}

/* 2. Força a tag a ser um bloco sólido e impede a quebra de texto */
.local-tag {
    display: inline-block !important;
    /* Garante que a tag se comporte como um botão sólido */
    white-space: nowrap !important;
    /* A MÁGICA: Impede que o texto quebre de linha dentro da tag */
    margin: 0 !important;
    /* Anula as margens antigas espalhadas no código, deixando o 'gap' acima fazer o trabalho */

    /* Regras de segurança caso a tela do celular seja minúscula (ex: iPhone SE) */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Coloca "..." no final só se a tag for maior que a tela inteira */
}

/* ================================================== */
/* === RESPONSIVIDADE DA GRADE (AGENDA) === */
/* ================================================== */
@media (max-width: 991px) {
    .tusp-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .tusp-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        /* Um espaço confortável entre os cards */
    }

    /* A regra de altura da imagem foi removida daqui, o aspect-ratio fará a mágica sozinho! */
}

/* ================================================== */
/* === LETREIRO DIGITAL CONTÍNUO (INFINITO) === */
/* ================================================== */
.portfolio-list-title {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.letreiro-wrapper {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

.letreiro-texto {
    display: inline-block;
}

/* Animação para Desktop */
@media (hover: hover) and (pointer: fine) {
    .tusp-portfolio-item:hover .titulo-longo .letreiro-wrapper {
        animation: rolarLetreiroContinuo var(--duracao, 5s) linear infinite;
    }
}

/* Animação para Mobile */
@media (hover: none) {
    .tusp-portfolio-item.visivel-na-tela .titulo-longo .letreiro-wrapper {
        animation: rolarLetreiroContinuo var(--duracao, 5s) linear infinite;
    }
}

@keyframes rolarLetreiroContinuo {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ================================================== */
/* === ESTILOS PARA O ACCORDION SLIDER === */
/* ================================================== */

/* 1. Força a imagem a preencher todo o painel sem deixar espaço em branco */

/* 2. Arruma o texto: remove rotação, quebra a linha e cria um degradê escuro */
.as-layer.tusp-camada-texto {
    font-family: 'Roboto Slab', serif !important;
}

/* 3. Estilo do Título da Peça */
.as-layer.tusp-camada-texto .tusp-acc-title {
    font-family: 'Roboto Slab', serif !important;
    font-size: 1em;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 5px;
}

/* 4. Estilo da Data de Início */
.as-layer.tusp-camada-texto .tusp-acc-date {
    font-family: 'Roboto Slab', serif !important;
    font-size: 0.95em;
    font-weight: 400;
    color: #E5007B !important;
    /* Rosa TUSP */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===================================================================
 * COMPONENTE UNIVERSAL: SANFONA (ACCORDION)
 * =================================================================== */

.tusp-sanfona-wrapper {
    max-width: 800px;
    margin: 2em 0;
    /* Centraliza a sanfona na página */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.tusp-sanfona-item {
    border-bottom: 1px solid #eaeaea;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tusp-sanfona-item button.tusp-sanfona-btn {
    box-shadow: none !important;
}

.tusp-sanfona-item:first-child {
    border-top: 1px solid #eaeaea;
}

/* O Botão Clicável */
.tusp-sanfona-btn {
    width: 100%;
    background: transparent !important;
    border: none !important;
    text-align: left;
    padding: 20px 10px;
    font-size: 1.1em;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
}

.tusp-sanfona-btn:hover {
    color: #E5007B !important;
    /* Rosa do TUSP */
}

/* Blinda o botão contra o texto branco de foco do tema Astra */
.tusp-sanfona-btn:focus,
.tusp-sanfona-btn:active {
    color: #333 !important;
    background: transparent !important;
    outline: none !important;
    /* Remove aquela borda extra que alguns navegadores colocam */
    box-shadow: none !important;
}

.tusp-sanfona-titulo {
    padding-right: 20px;
    font-weight: 600;
}

/* A Setinha */
.tusp-sanfona-seta {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.tusp-sanfona-btn.ativo .tusp-sanfona-seta {
    transform: rotate(180deg);
}

/* O Texto (Invisível por Padrão) */
.tusp-sanfona-conteudo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.tusp-sanfona-inner {
    padding: 0 10px 20px 10px;
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
}

.tusp-sanfona-inner p:last-child {
    margin-bottom: 0;
}

.letreiro-wrapper .letreiro-texto {
    padding-bottom: 2px !important;
    margin-bottom: 1px !important;
}

/* =================================================================== */
/* === CORREÇÃO: MENU QUEBRANDO PALAVRAS NO EDGE E SAFARI === */
/* =================================================================== */

/* 1. Impede que o navegador "esprema" os itens do menu por falta de espaço */
.main-header-menu>.menu-item {
    flex-shrink: 0 !important;
}

/* 2. Proíbe qualquer navegador de cortar palavras no meio (ex: Agend-a) */
.main-header-menu>.menu-item>.menu-link {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
}

/* =================================================================== */
/* === OPÇÕES DE CONFIGURAÇÃO DE LAYOUT (CAIXA / SEM CAIXA) === */
/* =================================================================== */

/* Quando "sem caixa" estiver selecionado, permite que o container de conteúdo
   ocupe a largura total da tela, mantendo 20px de padding lateral */
body.tusp-layout-unboxed .site-content .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Forçar comportamento "Sem Caixa" em páginas de portfolio */
body.tusp-layout-unboxed .portfolio-details,
body.tusp-layout-unboxed .portfolio-ficha {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.tusp-layout-unboxed .portfolio-container {
    margin-top: 0 !important;
}

/* Quando "sem caixa" for selecionado em páginas normais e posts,
   garante que a estilização interna não force padding/fundos extras 
   se o layout Plain do Astra deixar alguma caixa residual */
body.tusp-layout-unboxed .ast-plain-container .site-content .entry-content,
body.tusp-layout-unboxed .site-content .entry-content {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ===================================================================
 * NOVOS ESTILOS PARA A AGENDA TRES CAIXAS & HISTÓRICO
 * =================================================================== */

/* Container de cada seção da agenda */
.tusp-agenda-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Títulos das caixas da agenda */
.tusp-agenda-box-title {
    font-size: 1.6em !important;
    font-weight: 800 !important;
    color: #121212 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* Linha divisória colorida abaixo do título */
.tusp-agenda-box-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 60px !important;
    height: 2px !important;
}

/* Cores específicas de cada caixa */
.tusp-agenda-box.em-cartaz .tusp-agenda-box-title::after {
    background-color: #E5007B !important;
    /* Rosa TUSP */
}

.tusp-agenda-box.em-breve .tusp-agenda-box-title::after {
    background-color: #3498db !important;
    /* Azul */
}

.tusp-agenda-box.passados .tusp-agenda-box-title::after {
    background-color: #7f8c8d !important;
    /* Cinza */
}

/* Estilo para mensagem de "Nenhum evento..." */
.nada-em-cartaz {
    font-style: italic !important;
    color: #777 !important;
    font-size: 0.95em !important;
    margin: 0 !important;
    padding: 10px 0 !important;
}

/* Container do botão "Ver todos" */
.tusp-btn-ver-todos-container {
    text-align: center !important;
    margin-top: 35px !important;
    width: 100% !important;
}

/* O botão de "Ver todos" */
.tusp-btn-ver-todos {
    display: inline-block !important;
    background-color: transparent !important;
    color: #555 !important;
    padding: 10px 25px !important;
    font-weight: normal !important;
    font-size: 0.9em !important;
    text-transform: none !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.tusp-btn-ver-todos:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border-color: #999 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Ajustes responsivos para as caixas */
@media (max-width: 768px) {
    .tusp-agenda-box {
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    .tusp-agenda-box-title {
        font-size: 1.3em !important;
        margin-bottom: 20px !important;
    }

    .tusp-btn-ver-todos {
        padding: 10px 25px !important;
        font-size: 0.85em !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}