/* Reset e estrutura básica */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f4f1de;
  color: #333;
  line-height: 1.6;
}

/*IMPEDIR QUE O SITE TENHA ROLAGEM HORIZONTAL*/

body,
html {
  overflow-x: hidden;
}

/*_______________________________________________________*/

/* FONTES DO SITE */
@font-face {
  font-family: "all-round-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* Fonte padrão global */

h1 {
  font-family: 'all-round-gothic', sans-serif;
}
h2 {
  font-family: 'all-round-gothic', sans-serif;
}
h3 {
  font-family: 'all-round-gothic', sans-serif;
}
p {
	font-family: 'all-round-gothic', sans-serif;
}
ul {
	font-family: 'all-round-gothic', sans-serif;
}
/*_______________________________________________________*/


/*========================
SOBRE O CABEÇALHO DO SITE
========================*/
/* CSS Otimizado */

/* Estilo padrão para o cabeçalho em todas as páginas */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(107, 10, 1, 1); /* Fundo opaco por padrão */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Apenas em páginas com a classe 'has-transparent-header', o cabeçalho começa transparente */
.has-transparent-header .site-header {
    background-color: rgba(107, 10, 1, 1);
    box-shadow: none; /* Começa sem sombra também */
}

/* Quando o scroll acontece nessas páginas, o fundo e a sombra aparecem */
.has-transparent-header .site-header.show {
    background-color: rgba(107, 10, 1, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-header {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 80px;
    background: #6b0a01;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.4s ease;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-inner {
    width: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* LOGO CENTRALIZADO */
.logo img {
    height: 65px;
}
#menu-close {
	color: white;
}

/* Botão hambúrguer à esquerda */
.menu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 55px;
    height: 3px;
    background: #fff;
}

/* Off-canvas menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background-color: #6B0A00;
    transition: right 0.4s ease;
    padding: 80px 30px;
    z-index: 9999;
}

.mobile-menu.open {
    right: 0;
}
/* Botão de abrir */
.menu-toggle img {
    width: 38px;
    height: auto;
    cursor: pointer;
}
.mobile-menu ul {
	list-style: none !important;
		margin: 0;
    padding: 0;
	
	}
.mobile-menu li a {
    color: #f5af3d;
	font-family: "all-round-gothic", sans-serif;
	font-weight: 600;
    font-size: 14px;
    padding: 5px 0;
    display: block;
    text-decoration: none;
	list-style: none !important;
	text-transform: uppercase;
}

.mobile-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 0;
}

.mobile-menu li:last-child {
    border-bottom: none; /* evita linha sobrando no final */
}

.mobile-menu li a:hover {
    color: #f4f1de;
}


/* Botão de fechar */
.menu-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Overlay escurecido atrás do menu */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 9990;
}

.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Evita scroll quando o menu está aberto */
.body-no-scroll {
    overflow: hidden;
}
/*-----busca no menu-------*/
.mobile-search {
	height: 80px;
	margin-bottom: 10px;
}
.mobile-search input {
	border-radius: 80px;
    background-color: #f4f1eb;
	width: 16vw;
	height: 30px;
	padding: 5px;
	border: .6px solid #cc965e;
}
@media (max-width: 768px) {
	.mobile-search input {
	width: 40vw;
	}
}
.mobile-search input:focus {
	outline: none !important;
    box-shadow: none !important;
    border-radius: 80px !important;
}
.mobile-search .search-submit {
	height: 30px;
	margin-left: -30px;
	background-color: #f4f1de;
	width: 30px;
	color: #6B0A00;
	transition: background-color .5s;
	border-radius: 50%;
	border: solid 3px #f5af3d;
}
.mobile-search .search-submit:hover {
	color: #f5af3d;
	background-color: #232747;
}

/*========================
SOBRE O BOTÃO DE BUSCA DA PÁGINA 404
========================*/

.search-submit {
	height: 30px;
	margin-left: -30px;
	background-color: #f4f1de;
	width: 30px;
	color: #6B0A00;
	transition: background-color .5s;
	border-radius: 50%;
	border: solid 3px #f5af3d;
}
.search-submit:hover {
	color: #f5af3d;
	background-color: #232747;
}



/*========================
SOBRE O RODAPÉ DO SITE
========================*/

.site-footer {
    padding: 40px 20px;
    background: #6b0a01;
    color: #fff;
    text-align: center;
}

.footer-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Redes sociais */
.footer-social {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 30px;
}

.footer-social a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
	font-family: "all-round-gothic", sans-serif;
    font-size: 18px; /* ajusta a fonte do texto */
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-social a:hover {
    opacity: 1;
}

.footer-social i {
    font-size: 26px; /* ícone maior */
}


/* Newsletter */

.footer-newsletter h3 {
	margin-bottom: -30px;}

.footer-newsletter {
    margin-bottom: -20px;
	max-width: 300px;
	margin: 0 auto;
}

/* Links legais */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
}
.footer-links ul {
	list-style: none;
}


.footer-links a {
	list-style: none;
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}

.footer-links a:hover {
    opacity: 1;
}

/* Logo */
.footer-logo img {
    max-width: 110px;
    margin: 10px auto;
}

/* Parte inferior */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 30px;
    font-size: 10px;
    flex-wrap: wrap;
	list-style: none !important;
}

.footer-bottom .copy {
    opacity: 0.8;
}

.footer-bottom .credit {
    color: #ccc;
    font-size: 9px;
    opacity: 0.7;
}

.footer-bottom .iap {
    letter-spacing: 2px;
}

/* Mobile */
@media (max-width: 600px) {
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}


/*========================
SOBRE A HOMEPAGE
========================*/
/*
 * Estilo para a Seção Hero com Vídeo de Fundo
 */

.hero-section {
    position: relative; /* Essencial para o posicionamento das camadas */
    height: 90vh;      /* Faz a seção ocupar 100% da altura da tela */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;   /* Esconde qualquer parte do vídeo que transborde */
    color: #fff;        /* Cor do texto padrão para contrastar com o vídeo */
}

/* Wrapper do vídeo */
.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Camada mais baixa */
}

/* O vídeo em si */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* A mágica acontece aqui! */
}

/* Overlay (camada de cor semi-transparente sobre o vídeo) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Ex: preto com 50% de opacidade */
    z-index: 2; /* Fica entre o vídeo e o conteúdo */
}

/* Conteúdo (logo e título) */
.hero-content {
    position: relative;
    z-index: 3; /* Camada mais alta, fica na frente de tudo */
    text-align: center;
    padding: 20px;
}

/* Estilos para o logo e título (ajuste conforme necessário) */
.hero-logo {
    max-width: 200px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 2.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
/*-----------------------------------------------------------------*/

.container-sobre {
    max-width: 610px;
    margin: 50px auto;
	background-color: #E8E6D3;
}

.sobre-conteudo {
    max-width: 650px;
}
@media (max-width: 768px) {
	.container-sobre { 
		margin: 5px auto;
	}}
.secao-sobre h1 {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 20px;
	color: #222747;
}

.secao-sobre p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 40px;
	color: #222747;
}

.btn-sobre {
    display: inline-flex;
    align-items: center;
    gap: 10px;       /* Ajuste conforme seu esquema */
    padding: 12px 28px;
    text-decoration: none;
    color: #222747;
	font-size: 11px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.btn-sobre:hover {
   color: #e45042;
}

.pinpoint-icon {
    width: 20px;
    height: auto;
}
/*
 * Estilo para a Seção "Sobre" com fundo de mapa em CSS
 */

.secao-sobre {
    position: relative; /* Essencial para posicionar o fundo e o conteúdo */
    padding: 80px 20px;    /* Espaçamento interno para o conteúdo respirar */
    overflow: hidden;   /* Garante que nada vaze da seção */
	min-height: 80vh;
    
    /* Defina as variáveis de cor e largura para o mapa */
    --map-bg-color: #E8E6D3;
    --street-color: #F5F4E8;
    --street-width: 25px; /* Aumentei um pouco para ficar mais visível como fundo */
}

/* O pseudo-elemento que vai desenhar o mapa */
.secao-sobre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Coloca o mapa no fundo, mas acima da cor de fundo da seção */

    background-color: var(--map-bg-color);

    /* As camadas de gradiente que desenham as ruas */
    background-image:
        /* Linhas Verticais */
        linear-gradient(to right, transparent 75%, var(--street-color) 75%, var(--street-color) calc(75% + var(--street-width)), transparent calc(75% + var(--street-width))),
        linear-gradient(to right, transparent 25%, var(--street-color) 25%, var(--street-color) calc(25% + (var(--street-width) / 2)), transparent calc(25% + (var(--street-width) / 2))),
        linear-gradient(to right, transparent 85%, var(--street-color) 85%, var(--street-color) calc(85% + (var(--street-width) / 3)), transparent calc(85% + (var(--street-width) / 3))),
        linear-gradient(to right, transparent 90%, var(--street-color) 90%, var(--street-color) calc(90% + (var(--street-width) / 3)), transparent calc(90% + (var(--street-width) / 3))),
        
        /* Linhas Horizontais */
        linear-gradient(to bottom, transparent 20%, var(--street-color) 20%, var(--street-color) calc(20% + var(--street-width)), transparent calc(20% + var(--street-width))),
        linear-gradient(to bottom, transparent 50%, var(--street-color) 50%, var(--street-color) calc(50% + var(--street-width)), transparent calc(50% + var(--street-width))),
        linear-gradient(to bottom, transparent 80%, var(--street-color) 80%, var(--street-color) calc(80% + var(--street-width) * 1.5), transparent calc(80% + var(--street-width) * 1.5)),
        
        /* Linhas Diagonais */
        linear-gradient(165deg, transparent 20%, var(--street-color) 20%, var(--street-color) calc(20% + var(--street-width)), transparent calc(20% + var(--street-width))),
        linear-gradient(15deg, transparent 80%, var(--street-color) 80%, var(--street-color) calc(80% + var(--street-width)), transparent calc(80% + var(--street-width)));

    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.5; /* Ajuste a opacidade para o quão sutil você quer o fundo */
}

/* Garante que o conteúdo fique sobre o fundo */
.secao-sobre .container-sobre {
    position: relative;
    z-index: 2; /* Deve ser maior que o z-index do ::before */
}

/* Adicione aqui os outros estilos para .sobre-conteudo, h1, p, .btn-sobre etc. */
.sobre-conteudo {
    /* Exemplo de estilo para o conteúdo */
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: #333; /* Cor do texto para contrastar com o fundo claro */
}

/*SEÇÃO ROTAS*/
/* SEÇÃO ROTAS - REVISADO */
.secao-rotas {
    background-size: 60%;
    background-position: bottom center;
    background-repeat: repeat;
    padding: 60px 50px;
}

/* Correção de Altura: Garante que os slides tenham a mesma altura */
.secao-rotas .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}

.rota-card {
    background: #232747;
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px;
    width: 100%; /* Garante que o card ocupe todo o slide */
}

.rota-thumb {
    width: 66.66%;
	object-fit: cover;
	aspect-ratio: 16/9;

}

.rota-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rota-conteudo {
    width: 33.33%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: #fff;
}

.rota-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icone-rotas {
    width: 18px;
    height: auto;
}

.em-cartaz {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.rota-titulo {
    font-size: 1.4rem;
    margin: 20px;
    color: #fff;
}

.rota-excerpt {
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif;
    flex-grow: 1; /* Permite que o resumo ocupe o espaço extra */
	line-height: 1.6;
	color: #f4f1de !important;
}

.btn-conheca {
    margin-top: auto; /* Empurra o botão para o final do card */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e45042;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    align-self: flex-start; /* Alinha o botão à esquerda no container flex */
}

.btn-conheca:hover {
    color: #fdd8d5; /* Exemplo de cor no hover */
}

.icone-btn {
    width: 16px;
    height: auto;
}

/* Estilização da Paginação do Swiper */
.secao-rotas .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 40px;
}

.secao-rotas .swiper-pagination-bullet {
    width: 24px;
    height: 6px;
    border-radius: 3px;
    background-color: #232747;
    opacity: 0.5;
    transition: all 0.3s ease;
    margin: 0 5px !important;
}

.secao-rotas .swiper-pagination-bullet-active {
    width: 40px;
    background-color: #e45042;
    opacity: 1;
}

/* Navegação (Setas) - Adicionei um estilo básico */
.secao-rotas .swiper-button-prev,
.secao-rotas .swiper-button-next {
    color: #e45042; /* Cor das setas */
}

/* Layout Mobile */
@media (max-width: 900px) {
    .secao-rotas {
        padding: 80px 20px;
    }
    .rota-card {
        flex-direction: column;
    }
    .rota-thumb,
    .rota-conteudo {
        width: 100%;
    }
	.rota-thumb {
		width: 100%;
    max-height: 250px;
	}
    .rota-conteudo {
        padding: 30px 20px;
        min-height: 380px; /* Garante uma altura mínima no mobile também */
    }
    .rota-titulo {
        font-size: 1.2rem;
    }
	.rota-excerpt {
		font-size: .9;
		line-height: 1.6;
	}
}

/*-------------------------------------------------------------------------*/
/*
 /*
 * ==================================================
 * SEÇÃO "COMO FUNCIONA" - ESTILO MAPINHA
 * ==================================================
 */

.secao-como-funciona {
    position: relative;
    padding: 20px 20px;
    overflow: hidden; /* Garante que as linhas não vazem */

    /* Reutilizando o fundo de mapa */
    --map-bg-color: #fdfdfb;
    --street-color: #f5f4e8;
    --street-width: 20px;
}

/* Fundo de mapa sutil */
.secao-como-funciona::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background-color: var(--map-bg-color);
    background-image:
        linear-gradient(to right, transparent 60%, var(--street-color) 60%),
        linear-gradient(to bottom, transparent 40%, var(--street-color) 40%);
    opacity: 0.3;
}

.secao-como-funciona .container {
    position: relative;
    z-index: 2;
}

/* Cabeçalho da Seção */
.secao-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto; /* Aumentamos o espaço para o mapa respirar */
    color: #3a3a3a;
}
/* (Os estilos para .section-title e .section-subtitle podem ser mantidos como estavam) */


/* O GRID QUE CRIA O CAMINHO */
.como-funciona-grid {
    display: grid;
    grid-template-columns: 1fr 50px 1fr; /* Duas colunas de conteúdo com um "caminho" de 50px no meio */
    grid-auto-rows: min-content; /* A altura da linha se ajusta ao conteúdo */
    gap: 20px 0; /* Apenas espaçamento vertical entre as linhas */
    max-width: 1000px;
    margin: 0 auto;
}

/* O CARD (PONTO DE INTERESSE) */
.como-funciona-card {
    position: relative; /* Essencial para posicionar as linhas de conexão */
    padding: 30px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}

/* Ícone do Card */
.como-funciona-card .card-icon {
    font-size: 2.5rem;
    color: #6B0A00;
    margin-bottom: 20px;
}
/* (Os estilos para .card-title e .card-text podem ser mantidos) */


/* POSICIONAMENTO DOS CARDS NO GRID PARA CRIAR O ZIGUE-ZAGUE */
.como-funciona-card:nth-child(odd) { /* Cards 1 e 3 */
    grid-column: 1 / 2; /* Ocupa a primeira coluna */
    text-align: right; /* Alinha o texto à direita */
}

.como-funciona-card:nth-child(even) { /* Cards 2 e 4 */
    grid-column: 3 / 4; /* Ocupa a terceira coluna */
    text-align: left; /* Alinha o texto à esquerda */
}

/* AS LINHAS DE CONEXÃO (A MÁGICA) */
.como-funciona-card::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px; /* Metade do caminho central */
    height: 20px;
    background-color: #f4f1de;
}

/* Linha saindo dos cards da ESQUERDA */
.como-funciona-card:nth-child(odd)::before {
    right: -25px; /* Sai da direita do card para o centro */
}

/* Linha saindo dos cards da DIREITA */
.como-funciona-card:nth-child(even)::before {
    left: -25px; /* Sai da esquerda do card para o centro */
}

/* Linha VERTICAL pontilhada que conecta tudo */
.como-funciona-grid::before {
    content: '';
    position: absolute;
    top: 200px;
    bottom: 0;
    left: 50%;
    transform: translateX(-10%);
    width: 20px;
    /* Gradiente para criar a linha pontilhada */
    background-image: linear-gradient(to bottom, #6B0A00 60%, transparent 40%);
    background-size: 10px 15px; /* Tamanho de cada "ponto" */
    background-repeat: repeat-y;
}

/* RESPONSIVIDADE: No mobile, o layout vira uma linha do tempo vertical simples */
@media (max-width: 768px) {
    .como-funciona-grid {
        grid-template-columns: 50px 1fr; /* Coluna da linha à esquerda, conteúdo à direita */
        gap: 30px 0;
    }

    /* Todos os cards vão para a segunda coluna */
    .como-funciona-card:nth-child(n) {
        grid-column: 2 / 3;
        text-align: left;
    }

    /* A linha vertical fica à esquerda */
    .como-funciona-grid::before {
        left: 25px; /* Centraliza na primeira coluna de 50px */
    }

    /* A linha horizontal sai da esquerda de todos os cards */
    .como-funciona-card:nth-child(n)::before {
        left: -25px;
    }
}




/* SEÇÃO APOIO - REVISADO */
.secao-apoio {
    padding: 80px 40px;
    color: #000;
}

.titulo-apoio {
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #222747;
    margin: 0 auto 60px auto; /* Espaçamento ajustado */
    text-align: center;
}

.apoio-linha-desktop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap; /* Usar wrap para melhor responsividade */
    margin-bottom: 80px;
}

.apoio-grupo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.apoio-grupo-titulo {
    font-size: 1rem; /* Aumentei um pouco para legibilidade */
    font-weight: 700;
    text-transform: uppercase;
    color: #222747;
    margin-bottom: 20px;
}

.apoio-grupo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: nowrap;
}

.logo-item img {
    max-width: 140px; /* Usar max-width é mais seguro */
    height: 60px;     /* Altura fixa para alinhar os logos */
    object-fit: contain;
}

/* VÍDEO */
.video-thumb-area {
    display: flex;
    justify-content: center;
}

.video-thumb {
    width: 100%; /* Ocupa 100% do container */
    max-width: 800px; /* Limita o tamanho máximo */
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-thumb:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* MODAL */
.modal-video {
    /* display: none; -> controlado via JS */
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; /* Mantido no JS, mas para referência */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-conteudo {
    position: relative;
    width: 100%;
    max-width: 960px;
}

.modal-conteudo video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block; /* Remove espaço extra abaixo do vídeo */
}

.fechar-modal {
    position: absolute;
    top: -45px;
    right: -10px;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    color: #fff;
    border: none;
    background: transparent;
    line-height: 1;
}

/* MOBILE */
@media (max-width: 900px) {
    .secao-apoio {
        padding: 60px 20px;
    }
    .apoio-linha-desktop {
        gap: 50px;
    }
    .apoio-grupo {
        gap: 20px;
    }
    .logo-item img {
        max-width: 100px;
        height: 50px;
    }
    .fechar-modal {
        top: 10px;
        right: 10px;
        background-color: rgba(0,0,0,0.5);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 28px;
    }
}
/*
 * ==================================================
 * SEÇÃO DE APOIO - LAYOUT VERTICAL (CORRIGIDO)
 * ==================================================
 */

/* Container principal que agrupa todas as linhas de apoio */
.apoio-linha-desktop {
    display: flex; /* Usamos flex para controlar o alinhamento dos grupos */
    flex-direction: column; /* <<< A MUDANÇA PRINCIPAL: empilha os grupos verticalmente */
    align-items: center; /* Centraliza todos os grupos na página */
    gap: 50px; /* Espaço vertical entre cada grupo de apoio */
    margin-bottom: 60px;
}

/* Container para UM grupo (ex: "Produção" + seus logos) */
.apoio-grupo-container {
    width: 100%;
    max-width: 1100px; /* Limita a largura máxima para não ficar muito esticado em telas grandes */
    text-align: center; /* Centraliza o título */
}

/* Título de cada grupo (ex: "Produção", "Realização") */
.apoio-grupo-titulo {
    font-size: .4rem; /* Aumentei para legibilidade */
    font-weight: 700;
    text-transform: uppercase;
    color: #222747;
    margin-bottom: 20px;
    position: relative;
    o traço abaixo não ocupe 100% da largura */
}

/* Adiciona um traço decorativo abaixo do título */
.apoio-grupo-titulo::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: #e45042;
}

/* Container que segura apenas os logos de um grupo */
.apoio-grupo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Espaço entre os logos */
    flex-wrap: wrap; /* <<< ESSENCIAL: permite que os logos quebrem a linha se não couberem */
}

/* Estilo para cada logo individual */
.logo-item img {
    max-height: 60px; /* Controla a altura máxima para manter a consistência */
    max-width: 150px; /* Limita a largura */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Responsividade */
@media (max-width: 768px) {
    .apoio-grupo {
        gap: 20px; /* Diminui o espaço entre os logos no mobile */
    }
    .logo-item img {
        max-height: 50px;
    }
}



/*
 * ==================================================
 * PÁGINA SOBRE
 * ==================================================
 */

/* 1. Seção Herói */
.sobre-hero {
    padding: 120px 20px;
    background-color: #232747; /* Cor escura do tema */
    text-align: center;
}

.sobre-hero-title {
    color: #fff;
    font-size: 3rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.3;
}

/* 2. Seção "O que é" */
.sobre-o-que-e {
    padding: 100px 20px;
}

.o-que-e-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.o-que-e-texto .section-title-alt {
    font-size: 2.5rem;
    color: #e45042; /* Cor de destaque */
    margin-bottom: 20px;
}

.o-que-e-texto p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1em;
}

.o-que-e-imagem img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.o-que-e-destaque {
    max-width: 900px;
    margin: 60px auto 0 auto;
    text-align: center;
    padding: 25px;
    border: 2px solid #e45042;
    border-radius: 10px;
    font-size: 1.2rem;
    line-height: 1.7;
}

/* 3. Seção "Objetivos" (Pilares) */
.sobre-objetivos {
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    --map-bg-color: #E8E6D3;
    --street-color: #F5F4E8;
    --street-width: 20px;
}

.sobre-objetivos::before { /* Fundo de mapa */
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background-color: var(--map-bg-color);
    background-image: linear-gradient(to right, transparent 75%, var(--street-color) 75%), linear-gradient(to bottom, transparent 50%, var(--street-color) 50%);
    opacity: 0.4;
}

.sobre-objetivos .container {
    position: relative;
    z-index: 2;
}

.objetivos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas */
    gap: 25px;
}

.objetivo-card {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(107, 10, 1, 0.2);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
}

.objetivo-card .card-icon {
    font-size: 2.5rem;
    color: #e45042;
    margin-bottom: 15px;
}

.objetivo-card .card-title {
    font-size: 1.2rem;
    color: #6B0A01;
    margin-bottom: 10px;
}

/* 4. Seção "Por que é importante" */
.sobre-importancia {
    padding: 100px 20px;
    background-color: #f7f7f7;
}

.importancia-lista {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 2;
}

.importancia-lista li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.importancia-lista .fa-check {
    color: #e45042;
    margin-top: 8px;
}

/* 5. Seção "Legado" */
.sobre-legado {
    padding: 100px 20px;
    background-color: #232747;
    color: #fff;
    text-align: center;
}

.legado-imagem img {
    max-width: 60px;
	width: 55px;
	height: auto;
	justify-content: center;
    color: #e45042;
    margin-bottom: 20px;
}

.legado-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 20px;
}

.sobre-legado p {
    max-width: 700px;
    margin: 0 auto 20px auto;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
}

.legado-chamado {
    margin-top: 40px;
    font-size: 1.3rem !important;
    opacity: 1 !important;
}

/* Responsividade */
@media (max-width: 900px) {
    .sobre-hero-title { font-size: 2.2rem; }
    .o-que-e-content { grid-template-columns: 1fr; }
    .o-que-e-imagem { grid-row: 1; } /* Imagem vai para cima no mobile */
    .objetivos-grid { grid-template-columns: repeat(2, 1fr); } /* 2 colunas no tablet */
}

@media (max-width: 600px) {
    .objetivos-grid { grid-template-columns: 1fr; } /* 1 coluna no celular */
}

/*
 * ==================================================
 * PÁGINA EDUCAÇÃO
 * ==================================================
 */

/* 1. Seção Herói */
.educacao-hero {
    padding: 100px 20px;
    background-color: #f5f4e8; /* Cor clara do mapa, para diferenciar da pág Sobre */
    text-align: center;
    border-bottom: 2px solid #e8e6d3;
}

.educacao-hero-title {
    color: #6B0A01; /* Cor escura principal */
    font-size: 3rem;
    margin-bottom: 10px;
}

.educacao-hero-subtitle {
    color: #232747;
    font-size: 1.3rem;
    font-weight: 400;
}

/* 2. Seção Metodologia */
.educacao-metodologia {
    padding: 100px 20px;
}

.metodologia-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.metodologia-texto p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.metodologia-lista {
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
}

.metodologia-lista h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #232747;
}

.metodologia-lista ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.metodologia-lista li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 500;
}

.metodologia-lista .fa-solid {
    color: #e45042;
    font-size: 1.2rem;
}

/* 3. Seção Público vs. Privado */
.educacao-publico-privado {
    padding: 100px 20px;
    background-color: #232747;
    color: #fff;
}

.publico-privado-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.escola-coluna {
    border: 1px solid rgba(255,255,255,0.2);
    padding: 30px;
    border-radius: 10px;
}

.coluna-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.coluna-header .fa-solid {
    font-size: 2rem;
    color: #e45042;
}

.coluna-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.escola-coluna p {
    line-height: 1.7;
    opacity: 0.9;
}

.escola-coluna h4 {
    margin-top: 30px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    opacity: 0.8;
}

.escola-coluna ul {
    padding-left: 20px;
}

/* 4. Seção Impacto */
.educacao-impacto {
    padding: 100px 20px;
}

.impacto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.impacto-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f7f7f7;
    padding: 25px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #232747;
}

.impacto-item .fa-solid {
    font-size: 1.8rem;
    color: #e45042;
}

/* 5. Seção Marcas (Encerramento) */
.educacao-marcas {
    padding: 100px 20px;
    text-align: center;
    background-color: #f5f4e8;
}

.marcas-title {
    font-size: 2.5rem;
    color: #6B0A01;
    margin-bottom: 20px;
}

.educacao-marcas p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.8;
}

.marcas-citacao {
    margin-top: 40px;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 600;
    color: #232747;
    line-height: 1.6;
    border-left: 4px solid #e45042;
    padding-left: 25px;
    display: inline-block;
    text-align: left;
}

/* Responsividade */
@media (max-width: 900px) {
    .educacao-hero-title { font-size: 2.2rem; }
    .metodologia-content { grid-template-columns: 1fr; }
    .publico-privado-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .impacto-grid { grid-template-columns: 1fr; }
}
/*
 * 6. Seção CTA (Página Educação)
 */
.educacao-cta {
    padding: 80px 20px;
    background-color: #fff; /* Fundo branco para contrastar */
    text-align: center;
}

.cta-title {
    font-size: 2.2rem;
    color: #232747;
    margin-bottom: 15px;
}

.cta-subtitle {
    max-width: 600px;
    margin: 0 auto 40px auto;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
}

.btn-cta {
    display: inline-block;
    padding: 15px 35px;
    background-color: #e45042; /* Cor de destaque principal */
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 50px; /* Botão em formato de pílula */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(228, 80, 66, 0.3);
}

.btn-cta:hover {
    background-color: #6B0A01; /* Cor escura do tema no hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(107, 10, 1, 0.3);
}


/*
 * ==================================================
 * PÁGINA EVENTOS
 * ==================================================
 */

/* 1. Seção Herói */
.eventos-hero {
    padding: 120px 20px;
    background-color: #232747; /* Cor escura do tema */
    text-align: center;
}

.eventos-hero-title {
    color: #fff;
    font-size: 3rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.3;
}

/* 2. Seção "O que é" */
.eventos-o-que-e {
    padding: 100px 20px;
    text-align: center;
}

.o-que-e-intro {
    max-width: 800px;
    margin: 0 auto 20px auto;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #333;
}

.o-que-e-detalhe {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* 3. Seção Tipos de Eventos */
.eventos-tipos {
    padding: 100px 20px;
    background-color: #f7f7f7;
}

.tipos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.tipo-coluna {
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.tipo-coluna .coluna-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.tipo-coluna .coluna-header .fa-solid {
    font-size: 2rem;
    color: #e45042;
}

.tipo-coluna .coluna-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #232747;
}

.tipo-coluna p {
    line-height: 1.7;
}

/* 4. Seção Formatos */
.eventos-formatos {
    padding: 100px 20px;
}

.formatos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.formato-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f5f4e8; /* Cor clara do mapa */
    padding: 25px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #232747;
    border: 1px solid #e8e6d3;
}

.formato-item .fa-solid {
    font-size: 1.8rem;
    color: #6B0A01;
}

/* 5. Seção CTA Final */
.eventos-cta {
    padding: 100px 20px;
    background-color: #f5f4e8;
    text-align: center;
}

.cta-title {
    font-size: 2.2rem;
    color: #232747;
    margin-bottom: 30px;
}

.cta-lista {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px auto;
    display: inline-block;
    text-align: left;
    font-size: 1.1rem;
}

.cta-lista li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.cta-lista li::before {
    content: '✓';
    color: #e45042;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* O botão .btn-cta já foi estilizado na página Educação, então ele será reutilizado aqui */

/* Responsividade */
@media (max-width: 900px) {
    .eventos-hero-title { font-size: 2.2rem; }
    .tipos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .formatos-grid { grid-template-columns: 1fr; }
}

/*
 * ==================================================
 * ESTILOS PARA A PÁGINA 404
 * ==================================================
 */

/* O WordPress adiciona a classe .error404 ao <body> automaticamente */
.error404 .site-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 160px); /* Ocupa a altura da tela menos o header/footer */
    padding: 80px 20px;
    overflow: hidden;

    /* Reutilizando nosso fundo de mapa */
    --map-bg-color: #f5f4e8;
    --street-color: #fff;
    --street-width: 20px;
}

/* Aplicando o fundo de mapa */
.error404 .site-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background-color: var(--map-bg-color);
    background-image:
        linear-gradient(to right, transparent 75%, var(--street-color) 75%),
        linear-gradient(to bottom, transparent 50%, var(--street-color) 50%);
    opacity: 0.5;
}

/* Container principal do conteúdo 404 */
.error-404.not-found {
    position: relative;
    z-index: 2;
    max-width: 600px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(107, 10, 1, 0.2);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.error-404 .page-title {
    font-size: 2.5rem;
    color: #6B0A01; /* Cor principal escura */
    margin-top: 0;
    margin-bottom: 15px;
}

.error-404 .page-content p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 30px;
}

/* Estilizando o formulário de busca (gerado por get_search_form()) */
.error-404 .search-form {
    position: relative;
    margin-bottom: 40px;
}

.error-404 .search-form .search-field {
    width: 100%;
    padding: 15px 50px 15px 20px; /* Espaço para o texto e para o botão */
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 50px; /* Formato de pílula */
    transition: border-color 0.3s ease;
}

.error-404 .search-form .search-field:focus {
    border-color: #e45042; /* Cor de destaque no foco */
    outline: none;
}

.error-404 .search-form .search-submit {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    background-color: #e45042;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.2rem; /* Tamanho do ícone de lupa */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.error-404 .search-form .search-submit:hover {
    background-color: #6B0A01;
}

/* Estilizando a seção de links úteis */
.error-404 .useful-links h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    margin-top: 40px;
    margin-bottom: 20px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.error-404 .useful-links .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
}

.error-404 .useful-links .menu-item a {
    text-decoration: none;
    color: #232747;
    font-weight: 600;
    transition: color 0.3s ease;
}

.error-404 .useful-links .menu-item a:hover {
    color: #e45042;
}

/* Responsividade */
@media (max-width: 600px) {
    .error-404.not-found {
        padding: 30px;
    }
    .error-404 .page-title {
        font-size: 2rem;
    }
}

/*
 * ==================================================
 * ESTILOS PARA PÁGINAS GENÉRICAS (page.php)
 * ==================================================
 */

/* O WordPress adiciona a classe .page ao <body> de todas as páginas estáticas */


/* Container do artigo */
.page .entry-header,
.page .entry-content {
    max-width: 800px; /* Largura ideal para leitura */
    margin-left: auto;
    margin-right: auto;
}

/* Cabeçalho com o título da página */
.page .entry-header {
    border-bottom: 2px solid #e8e6d3; /* Linha sutil separando o título */
    padding-bottom: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.page .entry-title {
    font-size: 2.8rem;
    color: #6B0A01; /* Cor principal escura */
    line-height: 1.3;
}

/* Conteúdo principal do artigo */
.page .entry-content {
    font-size: 1.1rem;
    line-height: 1.8; /* Espaçamento generoso para conforto visual */
    color: #333;
}

/* Estilização para os subtítulos dentro do conteúdo */
.page .entry-content h2 {
    font-size: 2rem;
    color: #232747; /* Cor secundária escura */
    margin-top: 2.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5em;
}

.page .entry-content h3 {
    font-size: 1.5rem;
    color: #232747;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* Estilização para parágrafos, listas e outros elementos de texto */
.page .entry-content p {
    margin-bottom: 1.5em;
}

.page .entry-content ul,
.page .entry-content ol {
    margin-bottom: 1.5em;
    padding-left: 25px;
}

.page .entry-content li {
    margin-bottom: 0.8em;
}

.page .entry-content a {
    color: #e45042; /* Cor de destaque para links */
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.page .entry-content a:hover {
    color: #6B0A01;
}

.page .entry-content blockquote {
    margin: 2em 0;
    padding: 20px 30px;
    background-color: #fff;
    border-left: 5px solid #e45042;
    font-style: italic;
    font-size: 1.2rem;
}

/* Responsividade */
@media (max-width: 900px) {
    .page .entry-title {
        font-size: 2.2rem;
    }
    .page .entry-content h2 {
        font-size: 1.8rem;
    }
    .page .entry-content h3 {
        font-size: 1.4rem;
    }
}

/*
 * ==================================================
 * ESTILOS PARA POSTS INDIVIDUAIS (single.php)
 * ==================================================
 */

/* O WordPress adiciona a classe .single ao <body> */
.single .site-main {
    padding: 80px 20px;

}

/* Container do artigo */
.single-post-layout {
    max-width: 800px;
    margin: 0 auto;
}

/* Cabeçalho do Post */
.single .entry-header {
    margin-bottom: 30px;
    text-align: center;
}

.single .entry-title {
    font-size: 3rem;
    color: #232747;
    line-height: 1.2;
    margin-bottom: 15px;
}

.single .entry-meta {
    font-size: 0.9rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.single .entry-meta a {
    color: #777;
    text-decoration: none;
    transition: color 0.3s ease;
}

.single .entry-meta a:hover {
    color: #e45042;
}

.single .entry-meta .post-author::before {
    content: '|';
    margin: 0 10px;
    color: #ccc;
}

/* Imagem Destacada */
.single .post-thumbnail {
    margin-bottom: 40px;
}

.single .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

/* Conteúdo do Post */
.single .entry-content {
    /* Reutiliza os mesmos estilos de conteúdo do page.php para consistência */
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.single .entry-content h2,
.single .entry-content h3,
.single .entry-content p,
.single .entry-content ul,
.single .entry-content ol,
.single .entry-content a,
.single .entry-content blockquote {
    /* Herda os estilos definidos para .page .entry-content */
    /* Isso é ótimo para não repetir código. Se precisar de um estilo diferente,
       você pode sobrescrevê-lo aqui. Ex: */
    /* color: #000; */
}

/* Rodapé do Post (Tags) */
.single .entry-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.single .tag-links a {
    display: inline-block;
    background-color: #f5f4e8;
    color: #555;
    padding: 5px 15px;
    margin: 0 5px 5px 0;
    border-radius: 5px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.single .tag-links a:hover {
    background-color: #e45042;
    color: #fff;
}

/* Navegação entre Posts */
.single .post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.single .post-navigation .nav-previous,
.single .post-navigation .nav-next {
    width: 48%;
}

.single .post-navigation .nav-next {
    text-align: right;
}

.single .post-navigation .nav-subtitle {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 5px;
}

.single .post-navigation .nav-title {
    font-weight: 600;
    color: #232747;
}

.single .post-navigation a {
    text-decoration: none;
}

.single .post-navigation a:hover .nav-title {
    color: #e45042;
}

/* Seção de Comentários (Estilo Básico) */
.single .comments-area {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #e8e6d3;
}

.single .comments-title,
.single .comment-reply-title {
    font-size: 1.8rem;
    color: #232747;
    margin-bottom: 30px;
}

/* Responsividade */
@media (max-width: 900px) {
    .single .entry-title {
        font-size: 2.2rem;
    }
}

/*
 * ==================================================
 * ESTILOS PARA O ARQUIVO DE ROTAS (archive-rotas.php)
 * ==================================================
 */

.archive-rotas-layout .site-main {
    padding-bottom: 80px;
}

/* 1. Seção Herói */
.archive-hero {
    padding: 80px 20px;
    background-color: red; /* Cor clara do mapa */
    text-align: center;
    margin-bottom: 60px;
}

.archive-hero .archive-title {
    font-size: 3rem;
    color: #6B0A01;
}

/* 2. Grid de Mapa */
.rotas-map-grid {
    display: grid;
    /* Cria um grid com 3 colunas de largura igual */
    grid-template-columns: repeat(3, 1fr);
    /* O 'gap' simula as ruas do mapa */
    gap: 25px;
    background-color: #f5f4e8; /* Cor das "ruas" */
    padding: 55px; /* Espaçamento para as ruas externas */
    border-radius: 15px;
}

/* Estilo para cada card no grid */
.rota-grid-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rota-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.rota-grid-card .card-thumb {
    width: 100%;
    height: 400px; /* Altura fixa para as imagens */
}

.rota-grid-card .card-thumb img,
.rota-grid-card .placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rota-grid-card .placeholder-image {
    background-color: #e8e6d3; /* Cor de fundo se não houver imagem */
}

.rota-grid-card .card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.rota-grid-card .card-title {
    font-size: 1.3rem;
    color: #232747;
    margin: 0 0 10px 0;
}

.rota-grid-card .card-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1;
}

/* A MÁGICA DO GRID ASSIMÉTRICO */
/* Faz o 1º item ocupar 2 colunas */
.rotas-map-grid .rota-grid-card:nth-child(1) {
    grid-column: span 2;
}

/* Faz o 4º item ocupar 2 colunas */
.rotas-map-grid .rota-grid-card:nth-child(4) {
    grid-column: span 2;
}

/* Faz o 5º item (que agora está na 3ª linha) ocupar 3 colunas */
.rotas-map-grid .rota-grid-card:nth-child(5) {
    grid-column: span 3;
}

/* Faz o 8º item ocupar 2 colunas */
.rotas-map-grid .rota-grid-card:nth-child(8) {
    grid-column: span 2;
}

/* Responsividade do Grid */
@media (max-width: 1024px) {
    .rotas-map-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
    }

    /* Reseta e recria o padrão para 2 colunas */
    .rotas-map-grid .rota-grid-card:nth-child(n) {
        grid-column: span 1; /* Reseta todos */
    }
    .rotas-map-grid .rota-grid-card:nth-child(3) {
        grid-column: span 2; /* Faz o 3º item ocupar a linha toda */
    }
    .rotas-map-grid .rota-grid-card:nth-child(6) {
        grid-column: span 2; /* Faz o 6º item ocupar a linha toda */
    }
}

@media (max-width: 768px) {
    .rotas-map-grid {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        gap: 20px;
        padding: 20px;
    }
    /* Reseta todos os spans para 1 coluna */
    .rotas-map-grid .rota-grid-card:nth-child(n) {
        grid-column: span 1;
    }
    .rota-grid-card .card-thumb {
        height: 180px;
    }
}

/* Estilo para a paginação */
.pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.pagination .page-numbers {
    padding: 10px 15px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #555;
    border-radius: 5px;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background-color: #e45042;
    color: #fff;
    border-color: #e45042;
}

/*
 /*
 * ==================================================
 * PÁGINA CONTATO - VERSÃO FINAL E RESPONSIVA
 * ==================================================
 */

/* 1. Seção Herói */
.contato-hero {
    padding: 80px 20px; /* Padding ajustado para mobile-first */
    background-color: #f5f4e8;
    text-align: center;
}
.contato-hero-title {
    font-size: 2.5rem; /* Fonte ajustada */
    color: #6B0A01;
    margin-bottom: 15px;
}
.contato-hero-subtitle {
    font-size: 1.1rem; /* Fonte ajustada */
    color: #555;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. Seção Principal (Grid) */
.contato-main-section {
    padding: 80px 20px; /* Padding ajustado */
}

.contato-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Layout padrão para desktop */
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Coluna de Informações (Esquerda) */
.contato-info h3 {
    font-size: 1.5rem;
    color: #232747;
    margin-bottom: 20px;
}
.contato-info p {
    line-height: 1.7;
    margin-bottom: 30px;
}
.contato-info .info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    margin-bottom: 20px; /* Espaçamento reduzido */
}
.contato-info .info-item .fa-solid {
    color: #e45042;
    font-size: 1.5rem;
    width: 25px; /* Garante alinhamento */
    text-align: center;
}
.contato-info .info-item a {
    color: #333;
    text-decoration: none;
}
.contato-info .info-redes-title {
    margin-top: 40px;
}
.contato-info .info-redes-sociais {
    display: flex;
    gap: 20px;
}
.contato-info .info-redes-sociais a {
    font-size: 1.8rem;
    color: #232747;
    transition: color 0.3s ease;
}
.contato-info .info-redes-sociais a:hover {
    color: #e45042;
}

/*
 * ==================================================
 * RESPONSIVIDADE DA PÁGINA DE CONTATO
 * ==================================================
 */

/* Para tablets e telas menores */
@media (max-width: 900px) {
    .contato-grid {
        /* A CORREÇÃO PRINCIPAL: Altera o grid para uma única coluna */
        grid-template-columns: 1fr;
        gap: 50px; /* Aumenta o espaço vertical entre as seções */
    }

    .contato-info {
        text-align: center; /* Centraliza o conteúdo da coluna de informações */
    }

    .contato-info .info-item,
    .contato-info .info-redes-sociais {
        justify-content: center; /* Centraliza os itens e redes sociais */
    }
}

/* Para celulares */
@media (max-width: 600px) {
    .contato-hero {
        padding: 60px 20px;
    }
    .contato-hero-title {
        font-size: 2rem;
    }
    .contato-main-section {
        padding: 60px 20px;
    }
}

/*
 
/*
 * Estilo para a seção "Nenhum Resultado" na página de busca
 */
.search-results .no-results.not-found {
    max-width: 600px;
    margin: 60px auto;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
}

.search-results .no-results .page-title {
    font-size: 2rem;
    color: #6B0A01;
    margin-bottom: 15px;
}

.search-results .no-results .page-content p {
    margin-bottom: 30px;
}

/* Reutilizando o estilo do formulário de busca da pág 404 */
.search-results .no-results .search-form .search-field {
    /* Herda os estilos de .error-404 .search-form... */
}


/*==============================================
========SOBRE OS LAYOUTS DAS ROTAS==============
==============================================*/
.rota-single section {
    padding: 2rem 2rem;

}

.rota-hero {
	background: #232747;
	min-height: 45vh;
}

.rota-hero-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    align-items: center;
	background: #F4F1DE;
}

.rota-poster img {
	justify-self: center;
    border-radius: 0px;
	max-width: 100%;
    height: auto;
    display: block;
	object-fit: cover;
	aspect-ratio: 9/10;
	margin: 20px 10px 5px;
}

.rota-intro h1 {
    font-size: 2.1rem;
    line-height: 1.2;
    margin-bottom: 1rem;
	color: #232747;
}

.rota-excerpt {
    font-size: 1.1rem;
    color: #232747;
    max-width: 500px;
}
/*INFORMAÇÃO DA ROTA*/
.rota-info {
    background: #ffffff;
	margin: 15px;
	border-radius: 12px;
}

.rota-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.rota-info-col {
    font-size: 0.95rem;
}

.rota-info-col strong {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.5rem;
}
.rota-timeline {
    background: #f4f1de;
}

.rota-timeline .container {
    position: relative;
}
.rota-timeline .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 100%;
    background: #6B0A00;
    transform: translateX(-50%);
}
.timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 4rem;
    position: relative;
}
.timeline-item::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 24px;
    height: 24px;
    background: #6B0A00;
    border: 6px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
@media (max-width: 768px) {

    .timeline-item::before {
        left: 0;
        transform: translateX(-50%);
    }
	.timeline-image {
		width: 120px;
        height: 90px;
	}
	.timeline-content {
		margin-top: 10px;
	}
}


.timeline-left {
    flex-direction: row-reverse;
    text-align: right;
}

.timeline-right {
    text-align: left;
}
.timeline-content {
    background: #f5af3d;
    padding: 1.5rem;
    border-radius: 6px;
    max-width: 400px;
}

.timeline-content h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.timeline-content p {
    font-size: 0.95rem;
    color: #555;
}
.timeline-image img {
    width: 120px;
	height: 120px;
	object-fit: cover;
    border-radius: 50%;
	flex-shrink: 0;
}
/*CONTEXTO HISTÓRICO*/
.rota-contexto {
    background: #f5af3d;

}

.rota-contexto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    align-items: center;
}

.contexto-imagem {
	justify-self: right !important;
}

@media (max-width: 768px) {
	.contexto-imagem {
	justify-self: center !important;
	}}

.contexto-imagem img {
    border-radius: 50%;
	max-width: 100%;
	width: 340px;
    height: auto;
    display: block;
	object-fit: cover;
	aspect-ratio: 1/1;
	margin: 10px 10px 5px;
}
.contexto-texto h2 {
    font-size: 2rem;
    margin-bottom: 1rem
		color: #232747;
}

/*.contexto-texto p {
    font-size: 1rem;
    color: #232747;*/
}
@media (max-width: 768px) {
	.contexto-imagem  {
	justify-self: center;
	}}
	
/*OUTRAS ROTAS*/
.outras-rotas h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.outras-rotas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.rota-card h3 {
    font-size: 1.2rem;
}
@media (max-width: 768px) {

    .rota-hero-grid,
    .rota-info-grid,
    .rota-contexto-grid,
    .outras-rotas-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .rota-timeline .container::before {
        left: 0;
    }

    .timeline-item,
    .timeline-left,
    .timeline-right {
        flex-direction: column;
        text-align: left;
        padding-left: 2rem;
    }

    .timeline-image img {
        width: 100%;
    }
}

/*
 * ==================================================
 * ESTILOS PARA AS NOVAS SEÇÕES DE SINGLE-ROTA.PHP
 * ==================================================
 */

/* Seção Trailer */
.rota-trailer {
    padding: 80px 20px;
    background-color: #f7f7f7;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Seção Galeria */
.rota-galeria {
    padding: 80px 20px;
}
.rota-galeria .section-title-alt {
    text-align: center;
    font-size: 2.5rem;
    color: #6B0A01;
    margin-bottom: 50px;
}
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
.galeria-foto img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.galeria-foto:hover img {
    transform: scale(1.05);
}