/*
Theme Name: Liamani Brasil
Theme URL: https://liamani.com.br/
Author: Igor
Description: Tema Premium Liamani Brasil.
Version: 1.0
Base Colors: Mustard/Gold (#dcb65b), Dark Olive/Brown (#655634)
*/

/* --------------------------------------------------------------------------
   1. IMPORTAÇÃO DE FONTES & VARIÁVEIS (Google Fonts como alternativa à Mangueira Alt)
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

:root {
    --bg-main: #dcb051;               /* Cor de fundo principal do site */
    --color-hover: #655634;           /* Cor do texto do menu ao passar o mouse */
    --font-bold: 'Montserrat', sans-serif;   /* Equivalente à Mangueira Alt Bold (Peso 700) */
    --font-medium: 'Montserrat', sans-serif; /* Equivalente à Mangueira Alt Medium (Peso 500) */
    --white: #ffffff;
    --black: #000000;
    --status-bg: #b99744;             /* Fundo da caixa de status */
    --spotify-bg: #812117;            /* Fundo escuro do player do Spotify */
}

/* --------------------------------------------------------------------------
   2. RESETS E ESTILOS GERAIS
-------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    font-family: var(--font-medium);
    font-weight: 500;
    color: #655634; /* Substitua aqui pelo código da cor desejada */
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Títulos de Seções Principais (Destaque, Parceiros, Último Lançamento, etc.) */
.section-title {
    font-family: var(--font-bold);
    font-weight: 700;
    text-transform: uppercase;
    color: #655634; /* Substitua aqui pelo código da cor desejada */
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Centraliza o título apenas na seção de Últimas Notícias */
.ultimas-noticias-section .section-title {
    text-align: center;
}

/* --------------------------------------------------------------------------
   3. TOPO DO SITE (HEADER, LOGO E MENU SOBREPOSTO)
-------------------------------------------------------------------------- */
.site-header {
    position: relative;
    width: 100%;
    /* Cor de fundo base */
    background-color: #dcb051; 
    /* Gradiente para o efeito de desvanecimento na cor correta */
    background: linear-gradient(to bottom, rgba(220, 176, 81, 0) 70%, #dcb051 100%), 
                url('https://liamani.com.br/wp-content/uploads/2026/07/Header-Liamani-Brasil.jpg');
    
    /* CONTROLE AQUI O TAMANHO DA IMAGEM: */
    /* 'cover' faz preencher todo o espaço; 
       tente valores como '100% auto' ou '120% auto' para diminuir/ajustar */
    background-size: cover; 
    
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 920px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Posicionamento da Logo Centralizada */
.header-logo-wrap {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    max-width: 550px;
    text-align: center;
}

.header-logo-wrap img {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
}

/* Barra de Menu por cima da imagem do topo */
.nav-menu-container {
    width: 100%;
    background: transparent;
    z-index: 3;
    padding-bottom: 10px;
}

.main-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 35px;
}

.main-menu li a {
    font-family: var(--font-bold);
    font-weight: 700;
    color: var(--white);
    font-size: 20px;
    text-transform: uppercase;
    padding: 5px 0;
    border-bottom: 3px solid transparent;
    display: inline-block;
}

/* Efeito Hover do Menu: Muda de branco para #655634 e cria linha branca abaixo */
.main-menu li a:hover,
.main-menu li.current-menu-item a {
    color: var(--color-hover);
    border-bottom: 3px solid var(--white);
}

/* --------------------------------------------------------------------------
   4. CAIXA DE PESQUISA (AJUSTADA)
-------------------------------------------------------------------------- */

/* Adicionamos uma margem inferior aqui para afastar do bloco de baixo */
.search-fixed-wrap {
    margin-bottom: 30px; /* Ajuste este valor para aumentar/diminuir o afastamento */
    display: flex;
    justify-content: center;
}

.search-fixed-wrap .search-field {
    width: 100%;
    max-width: 700px; 
    
    /* Cor de fundo da caixa (ajuste se quiser mais escura ou clara) */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    
    /* Cor e posição do texto */
    color: #ffffff; /* Garante que o texto fique branco */
    font-size: 14px;
    text-align: center; /* Centraliza o texto dentro da caixa */
    outline: none;

    /* ALTURA: Reduzi para 40px para ficar menos "alta" */
    height: 40px; 
    
    /* PADDING: 0 no topo/base, 20px nas laterais para o texto não encostar nas bordas */
    padding: 0 180px; 
}

/* Para garantir que o texto dentro da caixa fique visível e legível */
.search-fixed-wrap .search-field::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   5. ESPAÇOS DE PUBLICIDADE (BANNER AJUSTADO PARA 921x92)
-------------------------------------------------------------------------- */
.ad-split-container {
    display: flex;
    width: 921px;
    height: 92px;
    
    /* ALTERAÇÃO AQUI: Ajuste o 'top' (primeiro valor) para subir ou descer */
    /* Valor negativo sobe o anúncio, valor positivo desce */
    margin: 10px auto 30px auto; 
    
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ad-left-space {
    flex: 1;                /* Ocupa o espaço branco à esquerda */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

.ad-right-image {
    width: 250px;           /* Ajuste conforme o tamanho da sua imagem de rosto */
    height: 92px;           /* Deve ser a mesma altura do container */
}

.ad-right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Corta a imagem para preencher o bloco sem distorcer */
}

/* Ajuste para mobile (para não quebrar o layout em telas pequenas) */
@media (max-width: 950px) {
    .ad-split-container {
        width: 100%;
        height: auto;       /* Deixa o navegador calcular a altura em mobile */
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   6. BLOCO: DESTAQUE + PARCEIROS (SLIDER)
-------------------------------------------------------------------------- */
/* Container pai para garantir alinhamento com as notícias */
.destaque-parceiros-section {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Proporção ajustada para melhor alinhamento */
    gap: 30px;
    margin-bottom: 40px;
}

/* Card Destaque */
.news-large-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
	width: 100%;
    height: 331px;
}

/* Card Grid Padrão */
.news-grid-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    height: 331px;
    width: 100%; /* Mudado de largura fixa para 100% para o Grid funcionar */
}

.news-large-card img, .news-grid-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.news-large-card:hover img, .news-grid-card:hover img, .read-more-card:hover img {
    filter: brightness(40%);
}

/* Meta Data */
.news-card-meta {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0,0,0,0.7);
    padding: 6px 12px;
    font-size: 10px;
    font-family: var(--font-bold);
    font-weight: 700;
    border-radius: 6px;
    color: #fff;
    text-transform: uppercase;
    z-index: 10;
}

/* Conteúdo Base com degradê */
.news-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    z-index: 5;
}

.news-card-category {
    font-size: 11px;
    font-family: var(--font-medium);
    font-weight: 700;
    text-transform: uppercase;
    color: #e2b747;
    margin-bottom: 5px;
}

.news-card-title {
    font-family: var(--font-medium);
    font-weight: 500;
    color: var(--white);
    line-height: 1.2;
}

.news-large-card .news-card-title {
    font-size: 24px; 
}

.news-grid-card .news-card-title {
    font-size: 14px;
}

/* Parceiros */
.parceiros-slider-container {
    width: 88%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.parceiros-wrapper {
    display: flex;
    width: 100%;
}

.parceiro-slide {
    min-width: 100%;
    position: relative;
}

/* --------------------------------------------------------------------------
   7. SEÇÃO: GRID DE NOTÍCIAS (HOME E PÁGINAS INTERNAS)
-------------------------------------------------------------------------- */
.grid-noticias-home {
    display: grid;
    grid-template-columns: repeat(auto-fill, 252px);
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

/* Alinhamento à esquerda para páginas internas (Leia Também) */
.single .grid-noticias-home, 
.page-template-default .grid-noticias-home {
    justify-content: flex-start;
}

/* Card padrão: 252x331 com novo estilo */
.news-grid-card {
    width: 252px;
    height: 331px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

/* Card maior: 514x331 */
.news-grid-card.wide-card {
    grid-column: span 2;
    width: 100%;
}

/* Selo de Data e Autor no topo */
.news-grid-card .news-card-meta {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-family: var(--font-bold);
    text-transform: uppercase;
    z-index: 10;
}

/* Conteúdo (Categoria + Título) na base com degradê */
.news-grid-card .news-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    z-index: 5;
}

.news-grid-card .news-card-category {
    font-size: 11px;
    color: #e2b747;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.news-grid-card .news-card-title {
    font-size: 14px;
    color: #fff;
    font-family: var(--font-medium);
    line-height: 1.2;
}

/* Botão Acessar Modo Completo */
.btn-modo-completo-wrap {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.btn-modo-completo {
    font-family: var(--font-bold);
    font-weight: 700;
    background-color: var(--white);
    color: var(--color-hover);
    padding: 12px 35px;
    text-transform: uppercase;
    font-size: 13px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
}

.btn-modo-completo:hover {
    background-color: var(--color-hover);
    color: var(--white);
}

/* --------------------------------------------------------------------------
   8. SEÇÃO: GALERIA DE FOTOS
-------------------------------------------------------------------------- */
.galeria-box {
    margin-bottom: 40px;
}

.galeria-nav {
    display: flex;
    justify-content: space-between; /* Título esquerda, Categorias direita */
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.galeria-nav-links {
    display: flex;
    gap: 20px;
}

.galeria-nav-links a {
    font-size: 12px;
    font-weight: 700;
    color: #655634;
    text-transform: uppercase;
    text-decoration: none;
}

.galeria-row-thumbs {
    display: flex; /* Alinha tudo em linha */
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}

.galeria-thumb-item {
    flex: 1; /* Distribui o espaço igual para cada imagem */
    border: 2px solid #655634;
    overflow: hidden;
    display: block;
}

.galeria-thumb-item img {
    width: 100%;
    height: 140px; /* Altura sugerida para o alinhamento */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.galeria-thumb-item img:hover {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   9. SEÇÃO: ÚLTIMO LANÇAMENTO (SPOTIFY + YOUTUBE)
-------------------------------------------------------------------------- */
.ultimo-lancamento-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.spotify-custom-player {
    background-color: var(--spotify-bg);
    border-radius: 12px;
    padding: 20px;
    color: var(--white);
}

.youtube-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.youtube-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   10. SEÇÃO: FILMOGRAFIA (LOOPING INFINITO)
-------------------------------------------------------------------------- */
.filmografia-grid-5 {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}

.filmografia-track-wrapper {
    flex-grow: 1;
    overflow: hidden;
    margin-right: 15px;
}

.filmografia-track {
    display: flex;
    gap: 15px;
    animation: marquee 30s linear infinite;
    flex-shrink: 0;
}

.filmografia-track:hover {
    animation-play-state: paused;
}

/* Estilo unificado para todos os cards (incluindo o fixo) */
.filme-item-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    width: 200px;
    display: block;
    transition: transform 0.3s ease;
}

.filme-item-card img {
    width: 100%;
    height: 300px; /* Altura fixa para manter o alinhamento */
    object-fit: cover;
    display: block;
}

.filme-item-card:hover {
    transform: scale(1.05);
}

/* Contêiner do ícone fixo apenas posiciona o card */
.filmografia-static-icon {
    flex-shrink: 0;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   11. SEÇÃO: AGENDA + MÍDIAS SOCIAIS + LINKS OFICIAIS
-------------------------------------------------------------------------- */
.agenda-social-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

/* Bloco Agenda */
.agenda-custom-box {
    background-image: url('https://liamani.com.br/wp-content/uploads/2026/07/Agenda-1.png');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    height: 380px;
    position: relative;
    overflow: hidden;
}

/* Área que contém a trilha de animação */
.agenda-scrollable-area {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 200px;
    overflow: hidden;
}

/* Trilha que faz o movimento */
.agenda-track {
    animation: marqueeVertical 150s linear infinite;
}

.agenda-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.agenda-row-item {
    background: rgba(255,255,255,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: 10px 15px;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 14px;
    color: #705929;
    margin-bottom: 6px;
    border-radius: 4px;
}

/* Títulos das colunas */
.section-title-alt {
    font-size: 16px;
    font-weight: 700;
    color: #655634;
    margin-bottom: 1px;
    text-transform: uppercase;
}

/* Controle de altura específico para o título de Links Oficiais */
.links-title-spacing {
    margin-top: 30px;
}

/* Mídias Sociais */
.social-big-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.social-btn-link img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

/* Links Oficiais - Estrutura Integrada */
.links-oficiais-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-full {
    width: 100%;
}

.links-oficiais-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.link-oficial-item {
    background-color: var(--white);
    color: #4a4a4a;
    padding: 10px 12px;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Cores de Hover */
.btn-x:hover { background-color: #000 !important; color: #fff !important; }
.btn-insta:hover { background-color: #E1306C !important; color: #fff !important; }
.btn-face:hover { background-color: #4267B2 !important; color: #fff !important; }
.btn-yt:hover { background-color: #FF0000 !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   12. ESTRUTURA INTERNA: PÁGINA DE NOTÍCIA ÚNICA (SINGLE.PHP)
-------------------------------------------------------------------------- */
.single-post-wrapper {
    background: var(--white);
    color: #333333;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.single-post-header {
    margin-bottom: 25px;
}

/* Nova estrutura da Imagem de Destaque */
.single-post-thumbnail {
    width: 723px;
    height: 359px;
    margin: 20px auto;
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.single-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.single-post-meta {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 8px;
}

.single-post-title {
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: 32px;
    color: #111111;
    line-height: 1.25;
}

.single-post-share-bar {
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 0;
    margin-bottom: 25px;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 15px;
}

.single-post-content {
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.8;
    color: #444444;
}

.single-post-content p {
    margin-bottom: 20px;
}

/* Bloco Leia Também abaixo do Post */
.read-more-section {
    margin: 40px 0;
}

.read-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --------------------------------------------------------------------------
   13. SEÇÃO INFERIOR: STATUS BOX E MÍDIAS SOCIAIS (WIDGETS AREA)
-------------------------------------------------------------------------- */
.bottom-widgets-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Caixa de Status Customizada */
.status-container-box {
    background-color: var(--status-bg);
    border-radius: 12px;
    overflow: hidden;
}

.status-header-title {
    background-color: var(--color-hover);
    font-family: var(--font-bold);
    font-weight: 700;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--white);
}

.status-body-content {
    padding: 10px 15px; /* Ajustado para encolher a caixa */
    display: flex;
    flex-direction: column;
    gap: 4px; /* Ajustado para diminuir o espaço entre as linhas */
}

.status-line-item {
    font-size: 14px;
    color: var(--white);
    display: flex;
    gap: 6px;
    line-height: 1.2; /* Ajustado para compactar a altura da linha */
}

/* Labels em BOLD e Respostas em MEDIUM - Classes Corrigidas */
.status-line-item .border-label {
    font-family: var(--font-bold);
    font-weight: 700;
}

.status-line-item .border-value {
    font-family: var(--font-medium);
    font-weight: 500;
}

/* Mídias sociais repetidas ao lado do Status */
.social-widget-side {
    display: flex;
    flex-direction: column;
}

.social-side-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* --------------------------------------------------------------------------
   14. ESTRUTURA INTERNA: TODAS AS NOTÍCIAS / ARQUIVO (ARCHIVE.PHP)
-------------------------------------------------------------------------- */
.archive-grid-4columns {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Força 4 colunas */
    gap: 20px !important; /* Espaço entre os cards */
    margin: 20px 0 !important; /* Espaço em cima e embaixo */
    width: 100%;
}

.news-grid-card {
    width: 100% !important;
    margin-bottom: 0 !important; /* Remove margem extra que causa o efeito de "grudado" */
}

/* Paginação das Notícias */
.pagination-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}

.pagination-container a, .pagination-container span {
    font-family: var(--font-bold);
    font-weight: 700;
    padding: 8px 16px;
    background: transparent;
    color: var(--white);
    font-size: 15px;
}

.pagination-container a:hover, .pagination-container .current {
    color: var(--color-hover);
}

/* --------------------------------------------------------------------------
   15. RODAPÉ DO SITE (FOOTER)
-------------------------------------------------------------------------- */
.site-footer {
    background-image: url('https://liamani.com.br/wp-content/uploads/2026/07/Footer.png');
    background-repeat: no-repeat;
    background-size: contain;      /* Mantém a imagem inteira */
	background-position: center;   /* Centraliza a imagem no meio do footer */
    padding: 36px 0;
    margin-top: 40px;
    background-color: #cbb073;
}

.footer-inner-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text-credits {
    max-width: 60%;
    font-family: var(--font-medium);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.6;
}

.footer-text-credits p {
    margin-bottom: 8px;
}

.footer-text-credits a {
    font-family: var(--font-bold);
    font-weight: 700;
    color: var(--white);
    text-decoration: underline;
}

.footer-logo-side img {
    max-width: 280px;
    height: auto;
}

/* --------------------------------------------------------------------------
   16. ADAPTAÇÕES PARA RESPONSIVIDADE (MOBILE / TABLET)
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .destaque-parceiros-section,
    .ultimo-lancamento-block,
    .agenda-social-links-grid,
    .bottom-widgets-grid,
    .footer-inner-layout {
        grid-template-columns: 1fr;
    }
    .grid-noticias-home {
        grid-template-columns: repeat(2, 1fr);
    }
    .filmografia-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .galeria-row-thumbs {
        grid-template-columns: repeat(5, 1fr);
    }
    .footer-inner-layout {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .footer-text-credits {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .main-menu {
        flex-direction: column;
        gap: 15px;
    }
    .site-header {
        min-height: 480px;
    }
    .grid-noticias-home, .archive-grid-2columns, .read-more-grid {
        grid-template-columns: 1fr;
    }
    .filmografia-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-post-wrapper {
        padding: 20px;
    }
    .single-post-title {
        font-size: 24px;
    }
}