html {
scroll-behavior: smooth; /* Faz a rolagem suave ao clicar nos links do menu */
}
/* =========================================
1. CONFIGURAÇÃO DE FONTES
========================================= */

/* Maiandra GD */
@font-face {
font-family: 'Maiandra GD';
/* Caminho relativo (sem a barra inicial) é mais seguro */
src: url('fontes/maiandra-gd-demi-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Maiandra GD';
src: url('fontes/maiandra-gd-demi-bold.ttf') format('truetype');
font-weight: bold; 
font-style: normal;
}

/* Pussycat */
@font-face {
font-family: 'Pussycat';
src: url('fontes/pussycat.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: block;
}

/* =========================================
2. ESTILOS GERAIS
========================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
/* Alterado para Maiandra GD */
font-family: 'Maiandra GD', 'Montserrat', Arial, sans-serif;
background: #0AB2E3;
overflow-x: hidden;
}

/* =========================================
NAVBAR (Estilo Amarelo sem Logo)
========================================= */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #FFD440;
backdrop-filter: blur(10px);
z-index: 1000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.navbar.scrolled {
background: #FFD440;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
max-width: 1100px;
margin: 0 auto;
padding: 1.2rem 2rem;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
}

.nav-menu {
display: flex;
list-style: none;
gap: 10rem;
align-items: center;
margin: 0;
padding: 0;
}

.nav-link {
font-family: 'Maiandra GD', 'Montserrat', sans-serif;
font-weight: bold;
font-size: clamp(1.1rem, 2vw, 1.2rem);
color: #005F85;
text-decoration: none;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 8px;
position: relative;
text-transform: uppercase;
}

.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 80%;
height: 3px;
background: #005F85;
transition: transform 0.3s ease;
}

.nav-link:hover {
color: #005F85;
transform: translateY(-2px);
}

.nav-link:hover::after {
transform: translateX(-50%) scaleX(1);
}

.nav-link:focus-visible {
outline: 3px solid #FFD440;
outline-offset: 4px;
}

/* Botão hambúrguer */
.nav-toggle {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
z-index: 1001;
position: absolute;
right: 20px;
top: 50%;
}

.nav-toggle span {
display: block;
width: 30px;
height: 3px;
background: #005F85;
transition: all 0.3s ease;
border-radius: 2px;
}

.nav-toggle:hover span {
background: #005F85;
}

.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}

.nav-toggle.active span:nth-child(2) {
opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}

/* --- Responsividade Navbar --- */
@media (max-width: 768px) {
.navbar {
height: 60px;
padding: 0rem 0; /* Altura menor no mobile */
display: flex;
align-items: center;
}

.nav-container {
justify-content: flex-end; /* Joga o botão para a direita */
height: 100%; /* Ocupa a altura da navbar */
padding: 0 20px; /* Apenas espaçamento lateral */
width: 100%;
}

.nav-toggle {
display: flex;
position: relative; /* Volta ao fluxo normal dentro do container */
right: auto;
top: auto;
transform: none;
}

.nav-menu {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 70%;
max-width: 300px;
/* Fundo Amarelo no Mobile também */
background: #FFD440; 
flex-direction: column;
padding: 6rem 2rem 2rem;
gap: 2rem;
transition: right 0.4s ease;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
justify-content: flex-start;
}

.nav-menu.active {
right: 0;
}

.nav-link {
font-size: 1.4rem; /* Maior para toque */
display: block;
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(0, 95, 133, 0.1); /* Linha divisória sutil */
padding-bottom: 10px;
}
}



/* =========================================
SEÇÃO HERO 
========================================= */



/* --- PADRÃO (DESKTOP) --- */

/* Esconde a imagem de celular (Capa.jpg) para quem está no PC */
.hero-mobile-img {
display: none; /* <--- AQUI: Diz "não mostre isso" */
}

/* Garante que o texto apareça no computador */
.hero-text-desktop {
display: block;
}

.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;

/* Ajuste o padding para compensar a navbar fixa */
padding-top: 110px; /* Altura aproximada da navbar */
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
background: #0AB2E3;
}

.hero {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 3rem;
max-width: 1200px;
width: 100%;
height: 100%;
}

.hero-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
max-width: 500px;
margin-left: clamp(0.5rem, 2vw, 2rem);
}

.hero-image img {
width: 100%;
height: auto;
display: block;
max-height: 75vh; 
object-fit: contain;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Conteúdo de Texto */
.hero-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
max-width: 500px;
padding-left: clamp(1rem, 3vw, 3rem);
}

.title {
font-family: 'Pussycat', cursive;
font-size: clamp(4rem, 12vw, 11rem); 
line-height: 0.85;
color: #FFD858;
text-shadow: 
10px 10px 0px #7A4699,
-2px -2px 0px #7A4699;
font-weight: normal;
letter-spacing: 0.00em;
}

.subtitle {
font-family: 'Pussycat', cursive;
letter-spacing: 0.02em;
font-weight: normal;
font-size: clamp(1.8rem, 4.5vw, 3.5rem);
line-height: 1.1;
color: #005F85;
max-width: 800px;
}

.description {
font-family: 'Montserrat', sans-serif;
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.5;
color: #FFFFFF;
}

.buttons {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1rem;
}

/* Botões */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.5rem; /* Levemente mais compacto */
font-family: 'Maiandra GD', sans-serif;
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
border-radius: 100px;
transition: all 0.3s ease;
cursor: pointer;
min-width: 160px;
text-align: center;
}

/* ... (Mantenha os estilos de cores dos botões .btn-primary e .btn-secondary iguais) ... */
.btn-primary { background: #FFCF57; color: #5D3A78; border: 3px solid #5D3A78; box-shadow: 0px 4px 0px #5D3A78; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0px 6px 0px #5D3A78; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0px 2px 0px #5D3A78; }
.btn-secondary { background: transparent; color: #FFFFFF; border: 3px solid #FFD440; }
.btn-secondary:hover { background: #FFD440; color:#005F85; transform: scale(1.05); }


/* =========================================
RESPONSIVIDADE (TABLET E CELULAR)
========================================= */

/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 900px) {

/* 1. ESCONDE a Imagem do Quebra-Cabeça (que é do Desktop) */
.hero-image {
display: none; /* <--- SOME com o quebra-cabeça */
}

/* 2. ESCONDE o Texto (Título/Subtítulo escritos em HTML) */
.hero-text-desktop {
display: none; /* <--- SOME com o texto */
}

/* 3. MOSTRA a Imagem Pronta (Capa.jpg) */
.hero-mobile-img {
display: block; /* <--- APARECE a imagem mobile */
/* ... outros ajustes de largura ... */
}

.hero {
margin-top: 2rem !important;
}
}



/* Tablet (até 1024px) */
@media (max-width: 1024px) {
.hero { gap: 2rem; }
.title { font-size: 5rem; }
}

/* Celular (até 768px) - CORREÇÕES DE LAYOUT */
@media (max-width: 768px) {

.hero {
margin-top: 2rem !important;
}

/* --- MENU HAMBÚRGUER --- */
.nav-toggle { display: flex; z-index: 1002; }

.nav-menu {
position: fixed;
top: 0; right: -100%; /* Escondido na direita */
height: 100vh;
width: 75%;
background: rgba(10, 178, 227, 0.98);
backdrop-filter: blur(10px);
flex-direction: column;
justify-content: center;
transition: 0.4s ease;
border-left: 4px solid #FFD440;
box-shadow: -10px 0 30px rgba(0,0,0,0.3);
}

.nav-menu.active { right: 0; } /* Aparece quando ativo */

.nav-link { font-size: 1.5rem; padding: 1rem; width: 100%; text-align: center; }

/* --- HERO MOBILE --- */
.container {
/* 100dvh = Altura dinâmica real do celular (ignora barra de endereço) */
height: 100dvh; 
min-height: 100dvh;

/* Padding top generoso para a imagem não ficar atrás do menu */
padding-top: 90px; 
padding-bottom: 1rem;
padding-left: 24px;
padding-right: 24px;

align-items: center; /* Começa do topo, não do centro absoluto */
}

.hero {
flex-direction: column;
gap: 1rem;
height: 100%;
justify-content: center; /* Itens começam do topo */
}

.hero-image {
display: none !important; 
}



.hero-content {
width: 100%;
align-items: center;
text-align: center;
gap: 0.8rem;
flex: 1; /* Ocupa o resto do espaço */
display: flex;
flex-direction: column;
}

.title {
font-size: 3.5rem;
margin-bottom: 0px;
text-shadow: 4px 4px 0px #7A4699;
}

.subtitle {
font-size: 1.2rem;
}

.description {
font-size: 0.9rem;
line-height: 1.3;
/* Limita a 3 linhas para não empurrar os botões pra fora da tela */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}*/

.buttons {
flex-direction: column;
width: 100%;
gap: 0.8rem;
margin-top: auto; /* Empurra os botões para o final do bloco de texto */
margin-bottom: 1rem;
}

.btn {
width: 100%;
padding: 0.8rem;
font-size: 1.1rem;
}
}







/* =========================================
SEÇÃO: SOBRE O JOGO 
========================================= */

.sobre-section {
background-color: #FFFFFF;
padding: 65px 20px;
position: relative;
overflow: hidden;
}

.sobre-container {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
}

/* Título */
.sobre-title {
font-family: 'Pussycat', cursive;
font-size: clamp(3rem, 6vw, 5rem); 
text-align: center;
color: #7A4699;
margin-bottom: 3rem;
position: relative;
display: block;
width: 100%;
line-height: 1;
}

.sobre-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 6px;
background: #7A4699;
border-radius: 3px;
}

/* Grid Principal (Texto vs Imagem) */
.sobre-content {
display: grid;
grid-template-columns: 1fr 1fr; /* Meio a meio */
gap: 60px;
align-items: center; /* Alinha texto e imagem pelo centro */
margin-bottom: 60px; /* Espaço para o card de baixo */
}

/* Coluna de Texto */
.sobre-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.sobre-text p {
font-family: 'Montserrat', sans-serif;
font-weight: 400; /* Normal */
font-size: 1.1rem; /* Padronizado */
line-height: 1.7;
color: #005f85;
text-align: left;
margin-bottom: 0;
}

.sobre-text strong {
color: #005F85;
font-weight: 700;
}

.highlight-region {
background: linear-gradient(120deg, #FFD858 0%, #FFD858 100%);
background-size: 100% 40%;
background-repeat: no-repeat;
background-position: 0 85%;
padding: 0 2px;
color: #1E6185;
}

/* Coluna Visual (Imagem do Tabuleiro) */
/*.sobre-visual {
position: relative;
display: flex;
flex-direction: column;*/
}

.sobre-visual {
display: flex;
flex-direction: column;
align-items: center;
/* Garante que o leque não invada o espaço do texto ao lado */
overflow: visible; 
}

.game-image-wrapper {
position: relative;
z-index: 2;
width: 100%;
}

.game-image-frame img {
width: 100%;
height: auto;
border-radius: 20px;
/* Sombra bonita para destacar do fundo branco */
/*box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
display: block;
transition: transform 0.3s ease;*/
}

.game-image-frame:hover img {
transform: rotate(0deg) scale(1.08);
}

.game-image-caption {
text-align: center;
font-size: 0.9rem;
color: #627191;
margin-top: 15px;
font-family: 'Montserrat', sans-serif;
}

/* Cursor de "mãozinha" na imagem expandida para indicar que vira */
#imgExpandida {
cursor: pointer;
transition: opacity 0.2s ease; /* Suaviza a troca da imagem */
}

/* --- CARD DESTAQUE HORIZONTAL --- */
/* --- CONCEITOS: GRID DE CARDS (Atualizado: Ícone ao lado do Texto) --- */

.area-conceito {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
}

/* Container Grid: Divide a tela em 2 colunas */
.cards-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 50% para cada card */
gap: 30px;
max-width: 1100px;
width: 100%;
}

/* Estrutura do Card (Mantendo Ícone ao Lado do Texto) */
.card-destaque-horizontal {
border-radius: 20px;
padding: 30px;
display: flex;
flex-direction: row; /* IMPORTANTE: Mantém ícone à esquerda e texto à direita */
align-items: flex-start; /* Alinha pelo topo */
gap: 25px;
box-shadow: 0 10px 0 rgba(0,0,0,0.1);
height: 100%; /* Para que ambos tenham a mesma altura */
}

/* Estilo do Ícone Redondo */
.card-icon-large {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Impede o ícone de ser esmagado */
font-size: 2.5rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Área de Texto dentro do Card */
.card-content-h {
flex: 1; /* Ocupa todo o espaço restante */
}

.card-title {
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
font-size: 1.3rem;
margin-top: 0;
margin-bottom: 15px;
line-height: 1.2;
text-transform: uppercase;
}

.card-text p {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.95rem;
line-height: 1.6;
color: #005F85;
margin-bottom: 15px;
}

/* --- ESTILO AMARELO (Reprodução Social) --- */
.card-amarelo {
background-color: #F9F8E8;
border: 3px solid #FFD440;
box-shadow: 0px 10px 0px #F9A825 !important;

}

.card-amarelo .card-icon-large {
background: linear-gradient(135deg, #FFF9C4 0%, #FFEB99 100%);
color: #5D3A78;
}

.card-amarelo .card-title {
color: #5D3A78;
}

.card-amarelo .highlight-care {
background: #FFF9C4;
color: #5D3A78;
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
}

/* --- ESTILO ROSA (Trabalho do Cuidado) --- */
.card-rosa {
background-color: #FFF0F5; /* Fundo Rosa Claro */
border: 3px solid #FF80AB; /* Borda Rosa Vibrante */
box-shadow: 0px 10px 0px #F06292 !important;
}

.card-rosa .card-icon-large {
background: linear-gradient(135deg, #FFC1E3 0%, #FF80AB 100%);
color: #F18AAE; /* Ícone Vinho/Rosa Escuro */
}

.card-rosa .card-title {
color: #C2185B;
}

.card-rosa .highlight-care {
background: #FFC1E3; 
color: #C2185B;
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
}

/* Efeito Hover: O card desce "apertando" a sombra */
.card-destaque-horizontal {
transition: transform 0.2s, box-shadow 0.2s;
}

.card-amarelo:hover {
transform: translateY(5px); /* Desce 5px */
box-shadow: 0px 5px 0px #F9A825 !important; /* A sombra diminui para parecer que apertou */
}

.card-rosa:hover {
transform: translateY(5px);
box-shadow: 0px 5px 0px #F06292 !important;
}

/* --- RESPONSIVIDADE (Mobile) --- */
@media (max-width: 900px) {
.cards-grid {
grid-template-columns: 1fr; /* Vira uma coluna única */
}

.card-destaque-horizontal {
/* No celular, se o texto for muito longo, pode ficar melhor empilhado.
Mas se quiseres manter ao lado mesmo no celular, não mudes isto.
Vou deixar flex-direction: column para garantir leitura, mas podes remover se preferires. */
flex-direction: column; 
align-items: center;
text-align: center;
}
}
/* --- RESPONSIVIDADE (Mobile) --- */
@media (max-width: 900px) {
.cards-grid {
grid-template-columns: 1fr; /* Vira uma coluna só no celular */
gap: 30px;
}

.card-destaque-horizontal {
flex-direction: row; /* No celular, volta a ficar ícone ao lado do texto se preferires */
align-items: flex-start;
}
}

/* --- RESPONSIVIDADE (Mobile) --- */
@media (max-width: 900px) {
.sobre-section {
padding: 50px 20px;
}

.sobre-content {
display: flex;
flex-direction: column;
gap: 40px;
}

/* Ordem Mobile: 1. Texto, 2. Imagem */
.sobre-text { order: 1; }
.sobre-visual { order: 2; }

.game-image-frame img {
transform: rotate(0deg); /* Remove rotação no mobile */
}

/* Card Horizontal vira Vertical no mobile */
.card-destaque-horizontal {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
}

.card-title {
text-align: center;
}
}

/* =========================================
MODAL / LIGHTBOX (Pop-up de Imagem)
========================================= */

.modal-overlay {
display: none; /* Oculto por padrão */
position: fixed; /* Fixo na tela, ignora rolagem */
z-index: 9999; /* Garante que fique acima de tudo */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Permite rolar se a imagem for muito alta */
background-color: rgba(0, 0, 0, 0.4); /* Fundo opaco */
backdrop-filter: blur(5px); /* Desfoque sutil no fundo */
justify-content: center;
align-items: center;
flex-direction: column;
}

/* A imagem expandida */
.modal-content {

width: 80%;
max-width: 90vw;   /* Máximo de 90% da largura da tela */
max-height: 90vh;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
animation-name: zoom;
animation-duration: 0.3s;

width: auto;
height: auto;
object-fit: contain;
}

/* Botão de fechar (X) */
.modal-close {
position: absolute;
top: 20px;
right: 35px;
color: #FFD858;
font-size: 40px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
color: #FFD858;
text-decoration: none;
cursor: pointer;
}

/* Animação de Zoom ao abrir */
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* Ajuste para celular */
@media only screen and (max-width: 700px){
.modal-content {
width: 95%;
}
}


/* =========================================
NOVO INDICADOR DE ZOOM (Elegante)
========================================= */

/* O container do ícone */
.zoom-indicator {
position: absolute;
bottom: 15px; /* Distância da borda inferior */
right: 15px;  /* Distância da borda direita */

/* Design do ícone circular */
width: 40px;
height: 40px;
background-color: #FFEFA5; /* Fundo escuro semi-transparente */
border-radius: 50%; /* Faz ficar redondo */
display: flex;
align-items: center;
justify-content: center;

/* Estilo da lupa */
color: #fff;
font-size: 1.2rem;

/* Comportamento: Invisível por padrão no desktop */
opacity: 0;
transition: all 0.3s ease;

/* Garante que o clique passe através do ícone e pegue na imagem */
pointer-events: none; 
}


/* Quando passar o mouse no FRAME, o ícone aparece e sobe um pouquinho */
.game-image-frame:hover .zoom-indicator {
opacity: 1;
transform: translateY(-5px); /* Um charme extra na animação */
}

/* Seu código já tem um zoom na imagem, vamos garantir que ele fique suave.
Se já tiver essa regra, verifique se tem o 'transition'. */
.game-image-frame img {
transition: transform 0.5s ease; /* Deixa o zoom da imagem bem suave */
}
/* Mantendo o seu zoom original */
.game-image-frame:hover img {
transform: scale(1.08); 
}


/* --- RESPONSIVIDADE (Celular) --- */
@media (max-width: 900px) {
.zoom-indicator {
/* No celular, o ícone fica sempre visível */
opacity: 1;
/* Um pouco menor e mais para o canto no celular */
width: 35px;
height: 35px;
bottom: 10px;
right: 10px;
font-size: 1rem;
}
}

/* --- LEQUE DE CARTAS --- */
.leque-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 530px; /* Altura para caber as cartas rodadas */
margin-top: 0px;
}

.carta-wrapper {
position: absolute;
transition: all 0.4s ease-out;
cursor: pointer;
transform-origin: bottom center; /* Roda a partir da base */
width: 160px; /* Largura da carta */
}

.carta-img {
width: 100%;
height: auto;
border-radius: 10px;
border: 3px solid #FFFFFF;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
display: block;
}

/* POSICIONAMENTO E ROTAÇÃO DAS CARTAS */

/* Carta 1 (Esquerda) */
.carta-1 {
transform: rotate(-15deg) translateX(-90px) translateY(10px);
z-index: 1;
}

/* Carta 2 */
.carta-2 {
transform: rotate(-5deg) translateX(-30px) translateY(-5px);
z-index: 2;
}

/* Carta 3 */
.carta-3 {
transform: rotate(5deg) translateX(30px) translateY(-5px);
z-index: 3;
}

/* Carta 4 (Direita) */
.carta-4 {
transform: rotate(15deg) translateX(90px) translateY(10px);
z-index: 4;
}

/* EFEITO HOVER (Ao passar o mouse) */
.carta-wrapper:hover {
z-index: 10; /* Traz para frente de todas */
transform: scale(1.15) translateY(-20px) rotate(0deg) !important; /* Aumenta e endireita */
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* Indicador de clique (Lupa) */
.zoom-indicator-leque {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
color: #627191;
background: rgba(255,255,255,0.8);
padding: 5px 15px;
border-radius: 20px;
opacity: 0.8;
pointer-events: none;
}

/* RESPONSIVIDADE (Celular) */
@media (max-width: 600px) {
.leque-container {
height: 380px; /* Menor no celular */
}
.carta-wrapper {
width: 120px; /* Cartas menores */
}
/* Aproxima as cartas no celular para caber na tela */
.carta-1 { transform: rotate(-15deg) translateX(-60px) translateY(10px); }
.carta-4 { transform: rotate(15deg) translateX(60px) translateY(10px); }
}



/* =========================================
SEÇÃO: POR QUE O JOGO?
========================================= */

.section-porque {
background-color: #F9F8E8; /* Amarelo Clarinho */
padding: 65px 20px;
position: relative;
}

.container-limitado {
max-width: 1100px;
margin: 0 auto;
}

/* Títulos */
.titulo-principal {
font-family: 'Pussycat', cursive;
color: #7A4699; /* Roxo Escuro */
font-size: clamp(2.5rem, 5vw, 4rem);
text-align: center;

/* Ajustes para o traçado funcionar */
position: relative; 
margin-bottom: 2rem; /* Aumentei para dar espaço para a linha e o subtítulo */
padding-bottom: 12px; /* Espaço entre o texto e a linha */
line-height: 1.1;
}

/* O elemento da linha (traçado) */
.titulo-principal::after {
content: '';
position: absolute;
bottom: 0; /* Cola na parte de baixo do padding */
left: 50%;
transform: translateX(-50%); /* Centraliza perfeitamente */

/* Mesmas medidas da seção 'Sobre' */
width: 200px; 
height: 6px; 
background: #7A4699; 
border-radius: 3px; 
}

.section-porque .subtitulo { 
font-family: 'Maiandra GD', cursive;
font-weight: normal;
color: #005F85;
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
text-align: center;
max-width: 900px;
margin: 0 auto 4rem auto;
line-height: 1.5;
}

/* Grid de Conteúdo */
.grid-conteudo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-bottom: 4rem;
}

/* Blocos de Texto */
.bloco-info {
margin-bottom: 2.5rem;
}

.section-porque h3 {
font-family: 'Maiandra GD', cursive;
color: #7A4699;
font-size: 1.8rem;
margin-bottom: 0.8rem;
font-weight: normal;
}

.section-porque p {
font-family: 'Montserrat', sans-serif;
font-weight: normal; 
color: #005F85;
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 1rem;
}

/* Efeito Marca-Texto Roxo */
.marca-texto {
background-color: #f0e6fa;
color: #005F85;
padding: 2px 6px;
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-weight: bold;
}

/* Imagem de Destaque */
.coluna-imagem {
text-align: center;
}

.img-destaque {
width: 100%;
max-width: 450px;
/*border-radius: 12px;*/
/*box-shadow: 0 15px 30px rgba(122, 70, 153, 0.2); /* Sombra roxa suave */
/*transform: rotate(2deg);*/
transform: rotate(2deg);
filter: drop-shadow(0 15px 30px rgba(122, 70, 153, 0.2));
transition: transform 0.3s ease;
display: block;
margin: 0 auto;
}

.img-destaque:hover {
transform: rotate(0deg) scale(1.02);
}

.legenda-imagem {
font-family: 'Montserrat', sans-serif !important; /* Força Montserrat aqui */
font-size: 0.9rem !important;
color: #005F85;
margin-top: 1rem;
opacity: 0.8;
font-weight: 400;
}

/* Box Manifesto (Final) */
.box-manifesto {
background-color: #FFFFFF;
border: 3px solid #7A4699;
border-radius: 16px;
padding: 2rem;
display: flex;
align-items: flex-start;
gap: 1.5rem;
box-shadow: 0 8px 0 #E3F6FC; /* Sombra sólida Azul Claro */
}

.icone-manifesto {
font-size: 2.5rem;
line-height: 1;
}

.texto-manifesto h3 {
margin-top: 0;
font-size: 1.5rem;
}

.texto-manifesto p {
margin-bottom: 0;
}

/* Responsividade Específica desta Seção */
@media (max-width: 900px) {
.grid-conteudo {
grid-template-columns: 1fr;
gap: 2rem;
}

.coluna-imagem {
order: -1; /* Imagem acima do texto no mobile */
margin-bottom: 1rem;
}

.img-destaque {
transform: rotate(0deg);
max-width: 100%;
}

.box-manifesto {
flex-direction: column;
text-align: center;
align-items: center;
}
}



/* =========================================
SEÇÃO: O TERRITÓRIO
========================================= */

.section-territorio {
background-color: #E3F6FC; /* Fundo Azul Nuvem */
padding: 65px 20px;
position: relative;
}

/* --- Título Personalizado (Azul) --- */
.titulo-territorio {
font-family: 'Pussycat', cursive;
color: #005F85; /* Azul Escuro */
font-size: clamp(3rem, 6vw, 5rem);
text-align: center;
position: relative;
margin-bottom: 2rem;
padding-bottom: 10px;
line-height: 1.1;
text-transform: lowercase; /* O design original usa minúsculas no título */
}

/* O Traçado (Agora em Azul para combinar) */
.titulo-territorio::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 6px;
background: #005F85; /* Azul Escuro */
border-radius: 3px;
}

.subtitulo-territorio {
font-family: 'Montserrat', sans-serif; /* Montserrat conforme pedido */
color: #005F85;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.3;
text-align: center;
margin-bottom: 3rem;
font-weight: 600;
}

/* --- Grid Layout --- */
.grid-territorio {
display: grid;
grid-template-columns: 1fr 1.2fr; /* Coluna do mapa um pouco maior */
gap: 60px;
align-items: center;
}

/* --- Coluna de Texto --- */
.coluna-info-territorio h3 {
font-family: 'Maiandra GD', cursive; /* Mantendo consistência nos subtítulos */
color: #005F85;
font-size: 1.8rem;
margin-bottom: 20px;
}

.coluna-info-territorio p {
font-family: 'Montserrat', sans-serif; /* Montserrat conforme pedido */
color: #005F85;
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 20px;
text-align: justify; /* Fica elegante em blocos informativos */
}

.coluna-info-territorio strong {
font-weight: 700;
}

/* --- Coluna Visual --- */
.img-mapa {
width: 100%;
border-radius: 20px;
/* Sombra azulada para integrar com o fundo */
box-shadow: 0 15px 40px rgba(10, 178, 227, 0.25); 
border: 4px solid #FFFFFF; /* Borda branca para destacar do fundo azul claro */
transition: transform 0.3s ease;
}

.img-mapa:hover {
transform: translateY(-5px);
}

/* =========================================
AJUSTES DO MODAL NO TERRITÓRIO
========================================= */

/* Transforma o wrapper em um container relativo para a lupa posicionar */
.wrapper-mapa {
position: relative;
display: block;
cursor: pointer;
border-radius: 20px; /* Segue o arredondamento da imagem */
overflow: hidden;    /* Garante que o zoom não saia da borda */
}

/* Quando passar o mouse no MAPA, a lupa aparece */
.wrapper-mapa:hover .zoom-indicator {
opacity: 1;
transform: translateY(-5px);
}

/* Efeito de Zoom na imagem do mapa ao passar o mouse */
.wrapper-mapa:hover .img-mapa {
box-shadow: 0 20px 50px rgba(10, 178, 227, 0.35); /* Sombra aumenta */
}

/* Garante que a transição seja suave (se já não estiver na classe img-mapa) */
.img-mapa {
transition: all 0.4s ease;
}

/* Ajuste da posição da lupa especificamente para o mapa (opcional) */
.wrapper-mapa .zoom-indicator {
bottom: 20px;
right: 20px;
background-color: rgba(0, 95, 133, 0.9); /* Azul escuro combinando com a seção */
}

/* --- Box Azul de Regiões (Referência visual) --- */
.box-regioes {
background-color: #0AB2E3; /* Azul Principal vibrante */
border-radius: 16px;
padding: 25px;
margin-top: 30px;
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(0, 95, 133, 0.15);
}

.box-regioes h4 {
font-family: 'Maiandra GD', cursive;
font-size: 1.4rem;
margin-bottom: 15px;
color: #FFFFFF; /* Título branco */
text-shadow: 1px 1px 0 #005F85;
}

.lista-locais {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colunas de locais */
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 600;
}

.lista-locais li {
display: flex;
align-items: center;
gap: 5px;
}

/* Ícone de pin antes de cada local */
.lista-locais li::before {
content: '📍';
font-size: 0.8rem;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
.grid-territorio {
grid-template-columns: 1fr; /* Empilha no celular */
gap: 40px;
}

.lista-locais {
grid-template-columns: 1fr 1fr; /* 2 colunas no celular */
}

.titulo-territorio {
font-size: 2.5rem;
}
}



/* =========================================
SEÇÃO: COMO FUNCIONA (Design System Final)
========================================= */

.section-funciona {
background-color: #FFFFFF;
padding: 65px 20px;
position: relative;
}

/* --- TÍTULO DA SEÇÃO (Pussycat - Único lugar permitido) --- */
.titulo-funciona {
font-family: 'Pussycat', cursive;
color: #7A4699; /* Roxo Escuro */
font-size: clamp(3rem, 6vw, 5rem);
text-align: center;
position: relative;
margin-bottom: 2rem;
padding-bottom: 10px;
line-height: 1.1;
}

.titulo-funciona::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 6px;
background: #7A4699;
border-radius: 3px;
}

/* --- SUBTÍTULOS E TEXTOS DE APOIO (Maiandra + Azul Escuro) --- */
.subtitulo-funciona {
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
color: #005F85;
font-size: 1.5rem;
text-align: center;
max-width: 900px;
margin: 0 auto 20px auto;
line-height: 1.3;
}

.texto-destaque-moedas {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 1.125rem;
color: #005F85;
margin-bottom: 3rem;
font-weight: normal;
line-height: 1.6;
}

/* --- GRID DAS MOEDAS --- */
.grid-moedas {
display: flex;
justify-content: center;
align-items: center; /* Alinha o centro vertical dos cards */
gap: 40px;
flex-wrap: wrap;
margin-bottom: 40px;
}

/* Estilo Base do Card */
.card-moeda {
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 10px 0 rgba(0,0,0,0.05);

/* [TÉCNICA DE ALINHAMENTO] */
display: flex;
flex-direction: column;
justify-content: center; /* Centraliza tudo verticalmente */
align-items: center;    /* Centraliza tudo horizontalmente */
}

/* --- 💚 CARD CUIDADO (Verde) --- */
.moeda-cuidado {
flex: 0 1 400px;
/* Altura maior para destaque */
min-height: 350px; 
background-color: #DFF5E1; /* Verde Claro Sólido */
transform: scale(1.05); /* Levemente maior */
z-index: 2;
}

.moeda-cuidado:hover {
transform: scale(1.1);
}

/* Ícone do Cuidado: Maior para empurrar conteúdo e dar peso */
.moeda-cuidado .icone-moeda {
font-size: 4.5rem; /* Aumentei bastante conforme solicitado */
margin-bottom: 25px;
line-height: 1;
/* Sem borda preta, apenas o emoji ou ícone SVG */
}

.moeda-cuidado .titulo-moeda {
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
color: #1B5E20; /* Verde Escuro */
font-size: 2rem; /* Título maior */
margin-bottom: 20px;
line-height: 1.2;
}

.moeda-cuidado .desc-moeda {
font-family: 'Montserrat', sans-serif;
color: #2E7D32; /* Verde Médio */
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 25px;
font-weight: 500;
}

.moeda-cuidado .badge-vitoria {
background-color: #4CAF50;
color: #FFFFFF;
font-family: 'Maiandra GD', sans-serif;
padding: 8px 20px;
border-radius: 50px;
display: inline-block;
margin-bottom: 20px;
font-weight: bold;
font-size: 1rem;
box-shadow: 0 4px 0 #2E7D32; /* Sombra sólida verde escura */
}

.moeda-cuidado .nota-moeda {
font-family: 'Montserrat', sans-serif;
font-size: 0.95rem;
color: #1B5E20;
font-style: italic;
font-weight: 600;
}

/* --- 💰 CARD ECONÔMICO (Rosa) --- */
.moeda-economico {
flex: 0 1 350px;
min-height: 400px; /* Altura menor que o cuidado */
background-color: #FCE4EC; /* Rosa Claro Sólido */
}

.moeda-economico:hover {
transform: translateY(-5px);
}

.moeda-economico .icone-moeda {
font-size: 3.5rem; /* Ícone padrão */
margin-bottom: 20px;
line-height: 1;
}

.moeda-economico .titulo-moeda {
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
color: #880E4F; /* Rosa Escuro */
font-size: 1.6rem;
margin-bottom: 15px;
}

.moeda-economico .desc-moeda {
font-family: 'Montserrat', sans-serif;
color: #AD1457; /* Rosa Médio */
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
font-weight: 500;
}

.moeda-economico .badge-sobrevivencia {
background-color: #D81B60;
color: #FFFFFF;
font-family: 'Maiandra GD', sans-serif;
padding: 6px 15px;
border-radius: 50px;
display: inline-block;
margin-bottom: 15px;
font-weight: bold;
font-size: 0.85rem;
}

.moeda-economico .nota-moeda {
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem;
color: #880E4F;
font-style: italic;
}

/* =========================================
AJUSTE DOS ÍCONES DE MOEDA (Imagens)
========================================= */

/* O container do ícone (círculo colorido) */
.icone-moeda {
/* Mantenha as propriedades que já existiam para o tamanho e cor do círculo */
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%; /* Garante que o fundo seja redondo */
overflow: hidden;   /* Corta qualquer parte da imagem que vaze */

/* Sugestão de tamanho (ajuste se necessário para ficar harmônico) */
width: 100px;  
height: 100px;
margin: 0 auto 25px auto; /* Centraliza e dá espaço abaixo */
}

/* A imagem dentro do ícone */
.img-icone-moeda {
width: 100%;
height: 100%;
object-fit: cover; /* Faz a imagem preencher todo o círculo sem distorcer */
display: block;
}

/* Ajuste específico para o card de Cuidado (que é maior) */
.moeda-cuidado .icone-moeda {
width: 120px; /* Um pouco maior para destaque */
height: 120px;
}


/* --- Responsividade --- */
@media (max-width: 768px) {
.grid-moedas {
flex-direction: column;
gap: 30px;
}

.moeda-cuidado, .moeda-economico {
flex: 1;
width: 100%;
min-height: auto;
transform: none !important;
}

/* No celular, reduzimos um pouco o ícone gigante */
.moeda-cuidado .icone-moeda {
font-size: 3.5rem; 
}
}




/* =========================================
SEÇÃO: BAIXAR O JOGO
========================================= */

.section-baixar {
background-color: #F9F8E8; /* Amarelo Clarinho (Identidade) */
padding: 80px 20px;
position: relative;
}

/* --- Título (Pussycat) --- */
.titulo-baixar {
font-family: 'Pussycat', cursive;
color: #7A4699; /* Roxo Escuro */
font-size: clamp(3rem, 6vw, 5rem); /* Grande destaque */
text-align: center;
position: relative;
margin-bottom: 2.5rem;
line-height: 1.1;
letter-spacing: 0.02em;

}

/* Traçado Roxo */
.titulo-baixar::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 6px;
background: #7A4699;
border-radius: 3px;
}

/* --- Subtítulo (Maiandra) --- */
.subtitulo-baixar {
font-family: 'Maiandra GD', sans-serif;
color: #005F85; /* Azul Escuro */
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
line-height: 1.3;
text-align: center;
max-width: 900px;
margin: 0 auto 60px auto;
}

/* --- GRID PASSO A PASSO (1-4) --- */
.grid-passos {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 colunas */
gap: 30px;
margin-bottom: 60px;
}

.card-passo {
background-color: #FFFFFF; /* Branco para limpar a visão */
border-radius: 20px;
padding: 40px 20px 20px 20px; /* Padding top maior para a bola */
position: relative;
text-align: center;
box-shadow: 0 8px 0 rgba(122, 70, 153, 0.15); /* Sombra roxa suave */
border: 2px solid #F0E6FA; /* Borda roxa bem clarinha */
margin-top: 30px; /* Espaço para a bola sair pra fora */
}

/* A Bola com Número (Flutuante) */
.bola-numero {
position: absolute;
top: -30px; /* Sai metade para fora */
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background-color: #7A4699; /* Roxo Escuro */
color: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
font-size: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.titulo-passo {
font-family: 'Maiandra GD', sans-serif;
color: #7A4699; /* Roxo Escuro */
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
}

.texto-passo {
font-family: 'Montserrat', sans-serif;
color: #005F85; /* Azul Escuro */
font-size: 1rem;
line-height: 1.4;
}

/* --- GRID DOWNLOADS (Arquivos) --- */
.grid-downloads {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 50px;
}

.card-download {
background-color: #0AB2E3; /* Azul Principal da Marca */
border-radius: 20px;
padding: 30px 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: transform 0.3s ease;
border: 4px solid #FFFFFF; /* Borda branca para destacar no amarelo */
box-shadow: 0 10px 20px rgba(10, 178, 227, 0.2);
}

.card-download:hover {
transform: translateY(-5px);
}

.icone-download {
font-size: 2.5rem;
margin-bottom: 10px;
background: rgba(255,255,255,0.2);
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}

.titulo-download {
font-family: 'Maiandra GD', sans-serif;
color: #FFFFFF; /* Branco sobre Azul */
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 5px;
}

.desc-download {
font-family: 'Montserrat', sans-serif;
color: #E3F6FC; /* Azul muito claro */
font-size: 0.9rem;
margin-bottom: 20px;
line-height: 1.3;
flex-grow: 1;
}

/* Botão do Card */
.btn-download {
background-color: #FFCF57; /* Amarelo Forte */
color: #7A4699; /* Texto Roxo Escuro */
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
text-decoration: none;
padding: 10px 25px;
border-radius: 50px;
font-size: 1rem;
transition: all 0.2s ease;
box-shadow: 0 4px 0 #DBB045; /* Sombra sólida amarela escura */
display: inline-block;
width: 100%;
}

.btn-download:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 #DBB045;
}

/* --- BOX DICA (Rodapé da seção) --- */
.box-dica {
background-color: #FFFFFF;
border: 2px dashed #005F85; /* Borda tracejada azul */
border-radius: 15px;
padding: 20px 30px;
display: flex;
align-items: center;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}

.icone-dica {
font-size: 2rem;
}

.box-dica p {
font-family: 'Montserrat', sans-serif;
color: #005F85;
font-size: 1rem;
line-height: 1.5;
margin: 0;
}

/* --- Responsividade --- */
@media (max-width: 1024px) {
.grid-passos, .grid-downloads {
grid-template-columns: repeat(2, 1fr); /* 2 por linha no tablet */
}
}

@media (max-width: 600px) {
.grid-passos, .grid-downloads {
grid-template-columns: 1fr; /* 1 por linha no celular */
}

.titulo-baixar {
font-size: 3rem;
}

.box-dica {
flex-direction: column;
text-align: center;
}
}


/* =========================================
SEÇÃO: CRÉDITOS (Institucional)
========================================= */

.section-creditos {
background-color: #FFF0F5; /* Rosa Clarinho (moeda) */
padding: 80px 20px;
position: relative;
}

/* --- Título Padronizado --- */
.titulo-creditos {
font-family: 'Pussycat', cursive;
/* Tamanho padronizado com as outras seções */
font-size: clamp(3rem, 6vw, 5rem) !important; 
color: #C2185B; /* Roxo */
text-align: center;
margin-bottom: 2rem;
line-height: 1.1;
position: relative;
}

/* Traçado abaixo do título (Roxo) */
.titulo-creditos::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 6px;
background: #C2185B;
border-radius: 3px;
}

/* --- Subtítulo  --- */
.subtitulo-creditos {
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
color: #C2185B;
font-size: 1.3rem !important;
text-align: center;
max-width: 800px;
margin: 0 auto 4rem auto;
line-height: 1.5;
}

/* --- LAYOUT GRID --- */
.grid-creditos {
display: grid;
grid-template-columns: 1fr 1.2fr; /* Coluna da direita um pouco mais larga para a lista */
gap: 60px;
align-items: start;
}

/* Blocos de Conteúdo */
.bloco-equipe {
margin-bottom: 40px;
}

/* Títulos dos Cargos (Maiandra) */
.titulo-cargo {
font-family: 'Maiandra GD', sans-serif;
font-weight: bold;
color: #C2185B;
font-size: 1.5rem;
margin-bottom: 1.5rem;
text-transform: uppercase;
border-bottom: 2px solid #C2185B; /* Linha sutil para separar */
padding-bottom: 10px;
display: inline-block; /* A linha acompanha o tamanho do texto */
width: 100%;
}

/* Estilo da Lista e Nomes */
.lista-membros {
list-style: none;
padding: 0;
margin: 0;
}

.membro {
margin-bottom: 20px;
}

/* Nome em Destaque */
.nome {
font-family: 'Montserrat', sans-serif;
font-weight: 700; /* Bold */
color: #7A4699;
font-size: 1.1rem; /* Padrão Nível 4 */
display: block;
margin-bottom: 4px;
}

/* Descrição / Cargo */
.descricao {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #7A4699;
font-size: 0.95rem; /* Nível 5 (Texto de apoio) */
line-height: 1.4;
display: block;
opacity: 0.9; /* Leve transparência para hierarquia */
}

/* --- Responsividade --- */
@media (max-width: 900px) {
.grid-creditos {
grid-template-columns: 1fr; /* Uma coluna no mobile */
gap: 40px;
}

.titulo-creditos {
font-size: 3rem !important;
}
}







/* =========================================
RODAPÉ (Footer)
========================================= */

.footer-geral {
width: 100%;
/* Garante que não vaze cor azul do body */
background-color: #FFFFFF; 
}

/* Área de Logos e Contato */
.footer-logos {
background-color: #FFFFFF;
padding: 40px 20px 20px 20px;
}

.grid-logos-organizacao {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 30px;
}

.titulo-footer {
font-family: 'Maiandra GD', sans-serif;
font-weight: normal;
font-size: 1.2rem;
color: #005F85;
margin-right: 15px;
margin-bottom: 0;
display: inline-block; /* Para ficar na linha das logos no Desktop */
}

/* Grupos de Logos */
.grupo-realizacao, .grupo-apoio {
display: flex;
align-items: center;
gap: 15px;
}

.lista-logos-img {
display: flex;
align-items: center;
gap: 20px;
}

/* Logos Padrão (PPG, EAU) */
.logo-inst {
height: 40px; /* Altura média */
width: auto;
object-fit: contain;
}

/* Logo Destaque (Urb.Anas) */
.logo-grande {
height: 70px; /* Bem maior que as outras */
}

/* Logo Apoio (Faperj) */
.logo-faperj {
height: 50px;
width: auto;
}

/* --- Área de Contato --- */
.footer-contato {
text-align: center;
border-top: 1px solid #E3F6FC; /* Linha sutil separando */
padding-top: 20px;
margin-top: 20px;
}

.footer-contato p {
font-family: 'Montserrat', sans-serif;
color: #005F85;
font-size: 0.95rem;
margin: 5px 0;
}

.footer-contato a {
color: #005F85;
text-decoration: none;
font-weight: bold;
}

/* --- Assinatura (Amarelo) --- */
.footer-assinatura {
background-color: #FFD440; /* Amarelo da Navbar */
color: #005F85; /* Texto Azul Escuro */
padding: 15px 20px; /* Padding resolve a altura fixa quebrada */
text-align: center;
width: 100%;
}

.footer-assinatura p {
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem;
margin: 0;
line-height: 1.4;
font-weight: 600;
}

.quebra-mobile {
display: none; /* Só quebra no celular */
}


/* =========================================
RESPONSIVIDADE RODAPÉ (Celular)
========================================= */
@media (max-width: 768px) {

/* 1. Logos em uma linha só (Wrap) */
.grid-logos-organizacao {
flex-direction: row; /* Força linha */
flex-wrap: wrap;     /* Quebra se faltar espaço */
justify-content: center;
gap: 20px;
}

/* Esconde os títulos "Realização" e "Apoio" no mobile para limpar o visual? 
Se quiser manter, remova o display:none abaixo. */
.titulo-footer {
display: none; 
}

.grupo-realizacao, .grupo-apoio {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

/* Ajuste de tamanhos para Mobile */
.logo-inst { height: 35px; }       /* Logos menores */
.logo-grande { height: 60px; }     /* Urb.Anas continua destaque */
.logo-faperj { height: 45px; }

/* 2. Assinatura Amarela sem quebra feia */
.footer-assinatura {
background-color: #FFD440; /* Garante o amarelo */
height: auto; /* Remove altura fixa */
}

.quebra-mobile {
display: block; /* Força a quebra de linha controlada */
}

.footer-assinatura p {
width: 100%;
}
}

/* ==================================================
CORREÇÃO FINAL DE EMERGÊNCIA (MOBILE)
Cole isto no FINAL do arquivo para sobrescrever tudo
================================================== */

@media (max-width: 900px) {

/* 1. Força o desaparecimento da imagem gigante e do texto */
.hero-image, 
.hero-image img,
.hero-text-desktop {
display: none !important;
}

/* 2. Força a imagem de capa correta a aparecer */
.hero-mobile-img {
display: block !important;
width: 100% !important;
max-width: 500px;
margin: 0 auto 20px auto;
}

/* 3. Garante que o layout seja vertical */
.hero {
flex-direction: column !important;
display: flex !important;
}

/* 4. Ajuste do padding do container para não ficar buraco */
.container {
padding-top: 85px !important; /* Altura segura para o menu */
display: block !important; /* Reseta flexbox conflitantes */
height: auto !important;
min-height: 100vh;
}
}