@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Urbanist:wght@400;500;700&display=swap');

html, body{
    margin:0;
    font-family: "Urbanist", sans-serif ;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    min-height: 100vh; 
    min-height: 100dvh;
    
}




/* --- NAVEGADOR ESTRUTURA GERAL --- */
.navegador {
    background-color: #27348B;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Garante o espaçamento entre os 3 blocos */
    padding: 10px 50px;
    position: relative; /* Necessário para o menu mobile absoluto */
    min-height: 100px;
}

/* Os blocos laterais ocupam o mesmo espaço para forçar o centro a ser o meio real */
.nav-left, .nav-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav-right {
    justify-content: flex-end; /* Links/Hambúrguer colados à direita */
}

.nav-center {
    flex: 0; /* Ocupa apenas o tamanho do logo */
    display: flex;
    justify-content: center;
}

/* Logos */
.logo-ae {
    height: 50px; /* Ajusta conforme o teu logo horizontal */
    width: auto;
    display: block;
}

.logo-gala {
    height: 90px;
    width: auto;
    display: block;
}

/* Menu Desktop */
.nav-right ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.nav-right ul li a {
    text-decoration: none;
    color: #FFF1B8; 
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    white-space: nowrap; /* Impede que o texto quebre em duas linhas */
}

/* Esta regra garante que o link da página atual fique branco */
.nav-right ul li a.active {
    color: #ffffff !important;
    /* Opcional: podes adicionar um brilho ou sublinhado para destacar mais */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.nav-right ul li a:hover {
    color: #ffffff;
}
.nav-right ul li a:active {
    color: #ffffff;

}

/* --- CONFIGURAÇÃO DO HAMBÚRGUER --- */
.hamburger {
    display: none; /* Escondido no Desktop */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #FFF1B8;
    transition: 0.3s ease-in-out;
}

/* --- RESPONSIVO (Mobile) --- */
@media (max-width: 1024px) {
   
    /* 1. Altura do contentor um pouco mais compacta */
    .navegador {
        height: 70px; /* Reduzi de 80px para 70px */
        padding: 0 15px;
    }

    /* 2. Logo AEISCTE (Esquerda) - Bem mais pequeno */
    .logo-ae {
        height: 18px; /* Era ~25px-30px, agora fica mais discreto */
        width: auto;
    }

    /* 3. Logo GALA (Centro) - Diminuído para não bater no topo */
    .logo-gala {
        height: 40px; /* Era 50px-55px, agora cabe perfeitamente */
        width: auto;
    }

    .hamburger {
        display: flex; /* Aparece no Mobile */
    }

    /* Esconde a lista original e prepara a transição suave */
    .nav-right ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Abre logo abaixo da barra */
        left: 0;
        width: 100%;
        background-color: #27348B;
        text-align: center;
        z-index: 1000;
        gap: 0;
        
        /* Transição Suave */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: all 0.4s ease-in-out;
    }

    .nav-right ul.active {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
        padding: 20px 0;
    }

    .nav-right ul li {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 241, 184, 0.1);
    }
    /* Animação do X */
    .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}


.meu-footer {
    background-color: #27348B;
    color: #FFF1B8;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    position: relative;
    bottom: auto;
    width: 100%;
    margin-top: auto; /* Empurra para o fim se usares o Flexbox no body */

}


.social-media {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    padding: 0;
}
.social-media li a {
    color: #FFF1B8;
    font-size: 20px;
    transition: color 0.3s ease;
}

.social-media li a:hover {
    color: #ffffff;
}


/* --- CONTENTOR PRINCIPAL (BANNER VIDEO) --- */
#landing-video {
    position: relative;
    width: 100%;
    height: 100vh; 
    /* Importante para browsers mobile que têm barras de navegação dinâmicas */
    height: 100dvh; 
    overflow: hidden;
    background-color: #27348B;
}

/* --- O VÍDEO (FUNDO) --- */
#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* --- CAMADA POR CIMA DO VÍDEO --- */
.logo-centro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    z-index: 10;
    background: rgba(0, 0, 0, 0.3); 
    animation: entradaSuave 1.5s ease-out forwards;
}

.logo-centro img {
    max-width: 80%; /* Ajuste para não transbordar no iPhone */
    width: 300px;
    height: auto;
    margin-bottom: 20px;
}

.logo-centro p {
font-family: 'Urbanist', sans-serif;
font-size: 18px;
color: #FFF1B8;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 0;
/* Animação do texto */
animation: entradaSuave 2s ease-out forwards;
}

.logo-centro a{
text-decoration: none;
}

.logo-centro a:hover {
color: #ffffff;
transition: 0.3s ease;
}

/* --- SECÇÃO DESCRIÇÃO (A QUE ESTAVA DESCENTRADA) --- */
#descricao {
    background-color: #27348B;
    text-transform: uppercase;
    text-align: center;
    padding: 60px 20px;
    color: #FFF1B8;
    position: relative;
    z-index: 20;
    
    /* Garante que o conteúdo interno também use flex para centrar */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

#descricao p {
    margin-bottom: 10px;
    width: 100%;
}

#descricao h3 {
    font-family: 'Italiana', serif;
    font-size: 28px;
    margin-bottom: 30px;
    font-weight: normal;
    width: 100%;
}

/* --- BOTÕES --- */
.botao {
    text-decoration: none;
    /* Usamos inline-flex também no PC para melhor controlo de alinhamento */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    
    /* Reduzi o padding lateral de 40px para 25px para encurtar o botão */
    padding: 10px 25px; 
    margin: 10px;
    
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #FFF1B8 0%, #C9A24D 50%, #FFF1B8 100%);
    color: #27348B;
    border: none;
    cursor: pointer;

    /* Reduzi o min-width para 160px para não forçar um botão tão largo no PC */
    min-width: 160px; 
}


/* Seletor para quando o botão tem o atributo 'disabled' */ 
.botao-desativado{
    text-decoration: none;
    /* Usamos inline-flex também no PC para melhor controlo de alinhamento */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    /* Reduzi o padding lateral de 40px para 25px para encurtar o botão */
    padding: 10px 25px; 
    margin: 10px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    background: #d1d1d1 !important; /* Força o cinzento sobre o gradiente */
    background-image: none !important;
    color: #7a7a7a !important;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none !important;
    
}




/* Efeito quando clicas (Active) */
.botao:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- MEDIA QUERY PARA IPHONE (O FIX DEFINITIVO) --- */
@media (max-width: 768px) {
    #descricao {
        padding: 40px 15px;
    }

    #descricao h3 {
        font-size: 22px; /* Reduz um pouco para não quebrar linhas estranhas */
    }

    /* Força os botões a ficarem um por baixo do outro e centrados */
    .botao {
        /* 1. Mudamos para inline-flex para ele se ajustar ao texto ou ao max-width */
        display: inline-flex; 
        align-items: center;
        justify-content: center;

        /* 2. Largura mais controlada */
        width: auto;           /* Deixa de ocupar 80% obrigatoriamente */
        min-width: 180px;      /* Largura mínima para manter a elegância */
        max-width: 220px;      /* Impede que fique "comprido" demais */
        
        /* 3. Ajuste de padding (menos espaço nas laterais) */
        padding: 12px 20px; 
        
        /* 4. Garante a centragem num fluxo de coluna */
        margin: 10px auto; 
        font-size: 13px;       /* Um pouco menor para mobile */
    }

    .hero-logos-container {
        flex-direction: column; /* Logos um por baixo do outro no mobile */
        gap: 30px;
    }
}

/* --- ANIMAÇÕES (DEFINIDAS APENAS UMA VEZ) --- */
@keyframes entradaSuave {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Logos do Hero */
.hero-logos-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    padding: 40px 20px;
}

.hero-logo {
    width: 180px;
    height: auto;
    opacity: 0;
    animation: entradaSuave 1.2s ease-out forwards;
}
/* Efeito de Cascata: o segundo logo aparece ligeiramente depois */
.hero-logo:nth-child(2) {
    animation-delay: 0.3s;
}
.hero-contactos {

    background-image: 
        /* Camada do Gradiente Azul transparente (ajusta a opacidade se necessário) */
        linear-gradient(180deg, rgba(39, 52, 139, 0.762) 0%, rgba(39, 52, 139, 0.8) 100%),
        url('../fotos/direcao.jpg'); 
        
    background-size: cover;          
    background-position: center;     
    background-repeat: no-repeat;
    
    height: 80vh;                   
    display: flex;
    align-items: center;             
    justify-content: center;        
    width: 100%;
}

.hero-logos-container {
    display: flex;
    flex-direction: row;          /* Empilha os logos e o texto */
    align-items: center;             /* Centra-os horizontalmente no meio da div */
    gap: 0px;
}

.hero-logos-container img {
    height: 250px;                   /* Ajusta o tamanho dos logos conforme preferires */
    width: auto;
    display: block;
}

.hero-contactos-2 {
    background-color: #27348B; /* O azul da marca */
    display: flex;
    justify-content: center;   /* Centra os 3 blocos no meio do ecrã */
    align-items: flex-start;
    gap: 60px;                 /* Espaço entre cada um dos 3 blocos */
    padding: 60px 20px;
    flex-wrap: wrap;           /* Para telemóveis, eles saltam para baixo */
}

.link-tel {
    color: white; /* Ou o teu código de Gold #FFF1B8 */
    text-decoration: none;
    font-weight: normal;
}

.link-tel:hover {
    color: #FFF1B8; /* Muda para gold ao passar o rato */
}

.bloco-contacto {
    display: flex;
    align-items: center;       /* Alinha ícone e texto verticalmente */
    gap: 15px;
    color: #FFF1B8;            /* O teu dourado */
}

.bloco-contacto i {
    font-size: 55px;           /* Tamanho do ícone */
}

.texto-contacto {
    display: flex;
    flex-direction: column;   
}

.titulo-contacto {
    font-family: 'Italiana', serif; 
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
}

.texto-contacto p {
    text-transform: uppercase;
    font-family: 'Italiana', sans-serif;
    margin: 2px 0 0 0;
    font-size: 14px;
    color: #FFF1B8;           
    opacity: 0.9;
}

.mapa-contactos{
    width: 100%;
    line-height: 0;
    border-top: 2px solid #C9A24D;
    border-bottom: 2px solid #C9A24D;
}

.mapa-iscte {
    background-color: #27348B; /* O azul oficial */
    padding: 50px 20px;        /* Espaçamento para a imagem não tocar nos bordos */
    display: flex;
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente */
    width: 100%;
}

.mapa-iscte img {
    max-width: 1000px;         /* Define um tamanho máximo para não ficar gigante no PC */
    width: 100%;               /* No telemóvel, ocupa a largura disponível */
    height: auto;              /* Mantém a proporção original da planta */
    border-radius: 10px;       /* Opcional: arredonda os cantos para um look mais moderno */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Dá profundidade à imagem sobre o azul */
    
    /* Garante que a imagem não distorce */
    object-fit: contain;
}

/* Ajuste para Mobile (iPhone) */
@media (max-width: 768px) {
    .mapa-iscte {
        padding: 30px 10px;
    }
    
    .mapa-iscte img {
        max-width: 100%;       /* Garante que cabe no ecrã do telemóvel */
    }
}

/* --- ADAPTAÇÃO MOBILE (Ecrãs até 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Ajuste do Hero (Banner Inicial) */
    .hero-contactos {
        height: 60vh; /* Reduzimos a altura no mobile para não ocupar o ecrã todo */
    }

    .hero-logos-container {
        flex-direction: column; /* Logos ficam um por cima do outro */
        gap: 20px;
        padding: 0 20px;
    }

    .hero-logos-container img {
        height: 150px; /* Logos mais pequenos para caberem bem */
        width: auto;
    }

    /* 2. Ajuste dos Blocos de Contacto */
    .hero-contactos-2 {
        flex-direction: column; /* Blocos em lista vertical */
        align-items: center;    /* Centra os blocos */
        gap: 40px;              /* Espaço entre os blocos */
        padding: 40px 20px;
        text-align: center;     /* Centra o texto */
    }

    .bloco-contacto {
        flex-direction: column; /* Ícone fica por cima do texto */
        gap: 10px;
        width: 100%;
    }

    .bloco-contacto i {
        font-size: 40px; /* Ícone ligeiramente menor */
    }

    .titulo-contacto {
        font-size: 18px; /* Título mais legível */
    }

    .texto-contacto p {
        font-size: 16px; /* Texto do contacto maior para ser fácil de ler/clicar */
    }

    /* 3. Ajuste do Mapa */
    .mapa-contactos iframe {
        height: 300px; /* Mapa mais baixo no mobile */
    }
}

/* --- AJUSTE PARA TELEMÓVEIS MUITO PEQUENOS (Ecrãs até 480px) --- */
@media (max-width: 480px) {
    .hero-logos-container img {
        height: 120px;
    }
    
    .hero-contactos {
        height: 50vh;
    }
}

/* Grelha de Imagens na Home Page*/
#imagens {
    background-color: #27348B;
    padding: 60px 20px; /* Reduzi de 50px para 20px para dar mais espaço no mobile */
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.titulo-galeria {
    font-family: 'Italiana', serif;
    color: #FFF1B8;
    font-size: 32px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.grelha-fotos {
    display: grid;
    /* Alterado para 1fr no mobile e garantindo que não transborda */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center; /* Centra os itens se sobrar espaço */
}
@media (max-width: 768px) {
    #imagens {
        padding: 40px 15px; /* Padding ainda menor para ecrãs pequenos */
    }

    .grelha-fotos {
        /* No mobile, forçamos uma coluna única bem centrada */
        grid-template-columns: 1fr; 
        max-width: 90%; /* Garante margens iguais dos dois lados */
    }

    .foto-item {
        height: 220px; /* Altura ligeiramente menor para mobile */
        width: 100%;
        margin: 0 auto;
    }
}

.foto-item {
    overflow: hidden; /* Garante que a imagem não sai das bordas arredondadas */
    border-radius: 10px;
    border: 1px solid #C9A24D;
    height: 250px; /* Altura fixa para manter a grelha certinha */
}

.foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a foto preencher o quadrado sem distorcer */
    transition: transform 0.5s ease;
    display: block;
}

/* Efeito ao passar o rato */
.foto-item:hover img {
    transform: scale(1.1); /* Zoom suave na imagem */
    filter: brightness(1.1);
}
#imagem-votacao {
    /* 1. Mantemos a altura que definiste */
    height: 550px; 
    width: 100%;
    
    /* 2. Definimos a imagem */
    background-image: url('../fotos/IMG_3736 (1)-2.jpg');

    /* 3. O COMPORTAMENTO GOAT: Preenche tudo sem esticar, mas cortando. */
    background-size: cover;

    /* 4. O SEGREDO DO CORTE: 
       center: foca horizontalmente nos rostos dos apresentadores.
       center (ou top): garante que as cabeças não são cortadas no topo.
    */
    background-position: center; /* Ou apenas 'center center' */

    /* 5. Impede repetição se a janela for gigante */
    background-repeat: no-repeat;

    /* Mantemos os teus estilos de flexbox para o texto */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    
    animation: entradaSuave 1.2s ease-out forwards;
}

/* Garante que o texto tem boa leitura sobre a imagem */
.texto-banner {
    color: #FFF1B8; /* Ou branco, para contraste */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8); /* Sombra para ler bem sobre a foto */
    max-width: 35%; /* Limita o texto para não cobrir as pessoas */
    z-index: 2;
}

/* Garante que o texto não "foge" do bloco azul */
.texto-banner {
    width: 25%; 
    z-index: 2;
    color: #FFF1B8;
}

/* 3. Efeito de Cascata nos textos dentro do banner */
.texto-banner h1 {
    color: #FFF1B8;
    max-width: 500px;
    font-family: 'Italiana', serif;
    font-size: 75px;
    opacity: 0; /* Começa invisível para a animação */
    animation: entradaSuave 1s ease-out 0.3s forwards; /* Delay de 0.3s */
}

.texto-banner p {
    color: #FFF1B8;
    font-family: 'Urbanist', sans-serif; /* Corrigido de serif para sans-serif para combinar */
    font-size: 18px;
    margin: 10px 0;
    opacity: 0;
    animation: entradaSuave 1s ease-out 0.5s forwards; /* Delay de 0.5s */
}

.texto-banner .botao {
    opacity: 0;
    animation: entradaSuave 1s ease-out 0.7s forwards; /* Delay de 0.7s */
}

/* 4. Animação para os Cards (Passo 1, 2 e 3) */
.passo-card {
    background-color: #27348B;
    color: #FFF1B8;
    padding: 20px 30px 40px 30px; /* Ajustei o padding para ficar mais equilibrado */
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    /* Animação de entrada para os cartões azuis */
    opacity: 0;
    animation: entradaSuave 0.8s ease-out forwards;
}

/* Delays para os cards aparecerem um a um */
.passo-card:nth-child(1) { animation-delay: 0.9s; }
.passo-card:nth-child(2) { animation-delay: 1.1s; }
.passo-card:nth-child(3) { animation-delay: 1.3s; }

.texto-banner p {
    color: #FFF1B8;
    font-family: 'Urbanist', serif;
    font-size: 18px;
    margin: 10px 0; /* Espaço entre os parágrafos */
}

#passos-votacao {
    display: grid;
    /* Cria duas colunas iguais */
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    padding: 10px 10px;
    background-color: #ffffff; /* Fundo branco como no PDF */
}

.passo-card {
    background-color: #27348B; /* O teu azul */
    color: #FFF1B8;            /* O teu dourado */
    padding: 10px 30px 80px 30px;
    border-radius: 5px;        /* Cantos menos arredondados, mais sérios */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Faz o terceiro card (Resultados) ocupar as duas colunas */
.passo-card.largo {
    grid-column: 1 / span 2;
}

.passo-numero {
    font-family: 'Italiana', serif;
    font-size: 40px;
    border-bottom: 1px solid #FFF1B8;
    width: fit-content;
    margin-bottom: 10px;
}

.passo-card h4 {
    font-family: 'Italiana', serif;
    text-transform: uppercase;
    font-size: 20px;
    margin: 0;
}

.passo-card p {
    font-family: 'Urbanist', sans-serif;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Ajuste para Telemóveis */
@media (max-width: 768px) {

    #imagem-votacao {
    height: 450px; 
    width: 100%;
    background-image: 
        linear-gradient(to right, rgba(39, 52, 139, 0.6) 30%, rgba(39, 52, 139, 0.1) 100%), 
        url('../fotos/Foto alterada para vertical.png');
    background-size: cover;
    background-position: center 20%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10%;
    
    /* Animação para o banner inteiro aparecer */
    animation: entradaSuave 1.2s ease-out forwards;
}
    #passos-votacao {
        grid-template-columns: 1fr;
    }
    .passo-card.largo {
        grid-column: 1;
    }
}

/* Termos e Condições */
#termos-votacao {
    padding: 20px 10%;
    color: #27348B;
    font-family: 'Urbanist', sans-serif;
}

#termos-votacao p {
    font-weight: 700;
    margin-bottom: 10px;
}

#termos-votacao ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Formulário */
#formulario-container {
    padding: 20px 10% 60px 10%;
    max-width: 800px; /* Para o formulário não ficar demasiado largo em ecrãs gigantes */
}

.campo {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.campo label {
    color: #27348B;
    font-family: 'Urbanist', sans-serif;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 15px;
}

.campo input {
    border: 2px solid #27348B;
    border-radius: 30px; /* Arredondado como no design */
    padding: 12px 20px;
    font-family: 'Urbanist', sans-serif;
    outline: none;
    transition: border-color 0.3s;
}

.campo input:focus {
    border-color: #C9A24D; /* Muda para dourado quando clicas */
}

/* Container da lista de categorias */
#voteForm {
    display: flex;
    flex-direction: column;
}

/* Criar uma grelha para os selects a partir do título de votação */
.titulo-votacao ~ .campo {
    display: inline-block;
    width: 48%; /* Quase metade para caberem dois lado a lado */
    margin-right: 2%;
    vertical-align: top;
}

/* No telemóvel, volta a ocupar a largura toda */
@media (max-width: 768px) {
    .titulo-votacao ~ .campo {
        width: 100%;
        margin-right: 0;
    }
}

/* Botão de Submeter */
#formulario-container .botao {
    cursor: pointer;
    width: 100%; /* Botão largo no final do form */
    margin-top: 10px;
    border: none;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex; /* Mantemos flex mas invisível */
    justify-content: center;
    align-items: center;
    
    /* Estado inicial invisível */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.modal-content {
    background: #27348B;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #FFF1B8;
    max-width: 400px;
    color: #FFF1B8;
    font-family: 'Italiana', serif;
    font-size: 18px;
    
    /* Efeito de "subida" suave */
    transform: translateY(20px);
    transition: transform 0.4s ease-out;
}

/* Classe que ativa a suavidade */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.botao-modal {
    margin-top: 20px;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #FFF1B8 0%, #C9A24D 50%, #FFF1B8 100%);
    color: #27348B;
    border: none;
    cursor: pointer;
}
.botao-modal:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    filter: brightness(1.2);
    color: #ffffff;
}

.dress-code {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10%;
    
    /* O fundo com o gradiente corrigido */
    background-image: 
        linear-gradient(180deg, rgba(39, 52, 139, 0.946) 0%, rgba(39, 52, 139, 0.169) 100%),
        url('../assets/Imagem dress code com fundo.png');
    background-size: cover;
    background-color: #27348B;
    background-position: center;
}

/* 2. Aplicação no Contentor e Elementos */
.dress-code-content {
    /* Garante que o grupo de texto aparece de forma coesa */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-grande {
    font-family: 'Italiana', serif;
    color: #FFF1B8;
    font-size: 90px;
    text-transform: uppercase;
    letter-spacing: 10px;
    margin: 0;
    
    /* Animação com pequeno delay */
    opacity: 0;
    animation: entradaSuave 1.2s ease-out 0.2s forwards;
}

.subtitulo {
    font-family: 'Italiana', serif;
    color: #FFF1B8;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 10px 0 20px 0;
    
    /* Aparece logo a seguir ao título */
    opacity: 0;
    animation: entradaSuave 1.2s ease-out 0.5s forwards;
}

.texto-apoio {
    font-family: 'Urbanist', sans-serif;
    color: #ffffff;
    font-size: 18px;
    max-width: 500px;
    line-height: 1.6;
    
    /* Aparece por último */
    opacity: 0;
    animation: entradaSuave 1.2s ease-out 0.8s forwards;
}

/* Ajuste de responsividade para o texto não quebrar mal */
@media (max-width: 768px) {
    .titulo-grande { font-size: 50px; letter-spacing: 5px; }
    .subtitulo { font-size: 20px; }
}

/* 1. Contentor Principal do Programa */
.programa {
    background-color: #27348B;
    padding: 80px 20px;
    text-align: center;
    color: #FFF1B8;
}

.titulo-programa {
    font-family: 'Italiana', serif;
    text-transform: uppercase;
    font-size: 35px;
    letter-spacing: 3px;
    margin-top: 200px;
}

/* 2. Carrossel de Ícones */
.carrossel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.seta-carrossel {
    background: none;
    border: none;
    color: #FFF1B8;
    font-size: 30px;
    cursor: pointer;
    transition: transform 0.2s;
}

.seta-carrossel:hover {
    transform: scale(1.2);
    color: #ffffff;
}

/* 3. Transição Suave (Fade) */
#item-ativo {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 1;
    transform: scale(1);
}

.fade-out {
    opacity: 0 !important;
    transform: scale(0.95) !important;
}
/* Padronização dos Ícones */
.icon-grande {
    width: 80px;        /* Largura fixa */
    height: 80px;       /* Altura fixa */
    object-fit: contain; /* Garante que o ícone não distorce dentro do quadrado */
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Fixar o contentor para não "saltar" */
.carrossel-content {
    min-height: 180px;  /* Ajusta este valor para caber o teu ícone + as 2 linhas */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.data-texto {
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    margin: 0;
    min-height: 1.2em; /* Reserva espaço para a linha mesmo vazia */
}

.hora-texto {
    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
    opacity: 0.8;
    margin-top: 5px;
    min-height: 1.2em; /* Impede o salto quando o texto some */
}
/* 4. Grelha de Eventos (As 3 fotos em baixo) */
.grelha-programa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 40px auto 0 auto;
}

.evento-card {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
}

.evento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Filtro para dar o tom azul do PDF */
    filter: brightness(0.5) saturate(1.5) sepia(0.2);
    transition: transform 0.6s ease;
}

.evento-card:hover img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

.evento-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 30px 15px;
    background: linear-gradient(transparent, rgba(39, 52, 139, 0.95));
}

.evento-hora {
    font-family: 'Italiana', serif;
    font-size: 28px;
    display: block;
    margin-bottom: 5px;
}

.evento-desc {
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}
/* O contentor que estica 100% no ecrã */
.seccao-programa {
    width: 100%;
    /* Substitui pelo caminho correto da tua imagem de fundo */
    background-image: linear-gradient(rgba(39, 52, 139, 0.5), rgba(39, 52, 139, 0.5)), url('../fotos/IMG_4209.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito parallax opcional */
    padding: 80px 0; /* Espaço em cima e em baixo */
    text-align: center;
    flex: 1;
}

.titulo-sessao {
    font-family: 'Italiana', serif;
    color: #FFF1B8;
    font-size: 45px;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* O contentor que centra os cards e limita a largura */
.imagens-gala {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1100px; /* Largura máxima dos cards juntos */
    margin: 0 auto; /* Centra o bloco no meio do ecrã */
    padding: 0 20px;
}

/* Ajuste nos cards para não deformarem */
.card-evento {
    flex: 1;
    height: 500px; /* Altura que definimos para reduzir o zoom */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.card-evento img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* --- 2. O Contentor dos Cards (Garante que ficam alinhados) --- */
.seccao-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 3. O Card Individual --- */
.card-evento {
    position: relative;
    flex: 1;
    height: 450px; 
    
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background-color: #27348B;
}

/* --- 4. A Imagem --- */
.card-evento img {
    width: 100%;
    height: 110%;
    object-fit: cover; 

    object-position: center; 
    
    transition: transform 0.5s ease;
    display: block;
}

.card-evento:hover img {
    transform: scale(1.05);
}


/* --- 5. O Overlay "Lente Azul" --- */
.overlay-texto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(39, 52, 139, 0.7); 
    
    /* Centra o conteúdo no meio do card */
    display: flex;
    flex-direction: column;
    align-items: center;      /* Centra horizontalmente no eixo Flex */
    justify-content: center;   /* Centra verticalmente no eixo Flex */
    
    text-align: center;        /* Centra as linhas de texto */
    padding: 20px;
    box-sizing: border-box;    /* Garante que o padding não "empurra" o conteúdo para fora */
    z-index: 2;
}

/* --- 6. Tipografia (Estilo PDF) --- */
.overlay-texto h2 {
    font-family: 'Italiana', serif;
    color: #FFF1B8;
    font-size: 32px;
    margin: 0 0 10px 0;
    font-weight: 400;
}

.overlay-texto p {
    font-family: 'Urbanist', sans-serif;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    text-transform: none; /* Mantém minúsculas para leitura fácil */
    max-width: 90%;
    margin: 0;
}

/* 5. A Tipografia (Igual ao PDF) */
.hora {
    display: block;            /* Garante que ocupa a linha toda */
    width: 100%;               /* Força a largura para o text-align funcionar */
    font-family: 'Italiana', serif;
    color: #FFF1B8; 
    font-size: 35px; 
    margin: 0 0 10px 0;        /* Reset de margens para evitar desvios */
    letter-spacing: 2px;
}

.descricao {
    display: block;
    width: 100%;
    font-family: 'Urbanist', sans-serif;
    text-transform: uppercase;
    color: #ffffff; 
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;            /* Centra o bloco de texto se ele tiver max-width */
    max-width: 90%; 
}

/* 6. Ajuste para Telemóveis (Empilha as colunas) */
@media (max-width: 768px) {
    /* 1. Reset total do contentor para mobile */
    .imagens-gala, .seccao-cards {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;    /* Força os filhos para o centro horizontal */
        justify-content: center !important;
        width: 100% !important;            /* Ocupa a largura total */
        max-width: 100vw !important;
        padding: 20px 0 !important;        /* Remove paddings laterais que podem descentrar */
        margin: 0 auto !important;         /* Centra o bloco no ecrã */
        gap: 25px;
    }

    /* 2. O Card em si */
    .card-evento {
        width: 90% !important;             /* Dá uma margem de 5% de cada lado */
        max-width: 340px !important;       /* Não deixa crescer demais */
        margin: 0 auto !important;         /* Centra o card dentro do pai */
        height: 300px !important;          /* Altura estável */
        flex: none !important;             /* Impede o flex de tentar esticar o card */
    }

    /* 3. Garantir que o texto dentro não foge */
    .overlay-texto {
        width: 100% !important;
        left: 0 !important;
        padding: 15px !important;
    }
}

/* Página de edição 25*/

#fundo-edicao{
    background-image: url('../assets/Fundo 25 edition.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

.banner-edicao {
    width: 100%;
    height: 40vh; /* Ocupa 40% da altura do ecrã, em vez de tudo */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.banner-edicao img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ou 'cover' se quiseres que preencha tudo sem margens */
    padding: 40px; /* Dá ar ao logo lá dentro */
    animation: entradaSuave 1.5s ease-out forwards;
}
.destaques{
    padding: 80px 20px;
    color: #FFF1B8;
}
.destaques h2 {
    text-align: center;
    font-family: 'Italiana', serif;
    color: #FFF1B8;
    font-size: 32px;
    margin-bottom: 40px;
    text-transform: uppercase;

}

.container-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    
}

.card-premio {
    position: relative;
    width: 280px;
    height: 380px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.card-premio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center; 
    transition: transform 0.5s ease;
}
.card-premio #treinador {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center; 
    transition: transform 0.5s ease;
}


/* O Overlay que escurece e mostra o texto */
.overlay-premio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Invisível ao início */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease;
}

.overlay-premio p {
    color: #FFF1B8; /* O teu dourado */
    font-family: 'Italiana', serif;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0; /* Texto escondido */
    transform: translateY(20px);
    transition: all 0.4s ease;
    padding: 0 10px;
}

/* HOVER: Escurece a imagem e revela o texto */
.card-premio:hover img {
    transform: scale(1.1);
}

.card-premio:hover .overlay-premio {
    background-color: rgba(0, 0, 0, 0.7); /* Lente escura */
}

.card-premio:hover .overlay-premio p {
    opacity: 1;
    transform: translateY(0);
}

/* --- MELHORES MOMENTOS (Contentor) --- */
.melhores-momentos {
    padding: 80px 0;
    position: relative;
    overflow: hidden; /* Garante que as setas não saem fora */
}

.melhores-momentos h2 {
    text-align: center;
    font-family: 'Italiana', serif;
    color: #FFF1B8; /* O teu dourado */
    margin-bottom: 50px;
    text-transform: uppercase;
}

/* --- CARROSSEL WRAPPER (Necessário para posicionar as setas) --- */
.carrossel-wrapper {
    position: relative;
    max-width: 1400px; /* Largura máxima do carrossel no ecrã */
    margin: 0 auto;
    padding: 0 60px; /* Espaço para as setas nas laterais */
}

/* --- CARROSSEL CONTAINER (MANTIDO E AJUSTADO) --- */
.carrossel-container {
    width: 100%;
    overflow-x: auto; /* Permite scroll nativo */
    scroll-snap-type: x mandatory; /* Efeito magnético */
    scroll-behavior: smooth; /* MUDANÇA: Scroll suave nativo para as setas */
    scrollbar-width: none; /* Esconde scrollbar Firefox */
}

.carrossel-container::-webkit-scrollbar {
    display: none; /* Esconde scrollbar Chrome/Safari */
}

.carrossel-track {
    display: flex;
    gap: 25px;
    padding: 10px 0; /* Espaço para a sombra */
}

.carrossel-img {
    width: 480px; /* Largura fixa premium */
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Sombra mais forte no fundo azul */
    scroll-snap-align: center; /* Para no centro */
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.carrossel-img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* --- SETAS DE NAVEGAÇÃO (Sem círculo) --- */
.carrossel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* MUDANÇAS: Removido fundo, borda e sombra de caixa */
    background: none; 
    border: none;
    box-shadow: none;
    
    color: #FFF1B8; /* O teu dourado */
    font-size: 50px; /* Aumentamos o tamanho para compensar a falta do círculo */
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Sombra no texto para garantir leitura sobre qualquer foto */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); 
}

.carrossel-btn:hover {
    /* No hover, ela brilha e cresce ligeiramente */
    color: #ffffff; 
    transform: translateY(-50%) scale(1.2);
    text-shadow: 0 0 15px rgba(255, 241, 184, 0.8);
    background: none; /* Garante que não aparece fundo no hover */
}

.carrossel-btn.prev {
    left: 10px; /* Afastamos um pouco da borda para não ficar colada */
}

.carrossel-btn.next {
    right: 10px;
}

/* Ajuste para mobile: as setas costumam atrapalhar sem o círculo, 
   por isso mantemos o display none ou diminuímos o tamanho */
@media (max-width: 1024px) {
    .carrossel-btn {
        display: none; 
    }
}

/* Esconde as setas em ecrãs táteis (onde o dedo é melhor) */
@media (max-width: 1024px) {
    .carrossel-wrapper { padding: 0 20px; }
    .carrossel-btn { display: none; }
    .carrossel-img { width: 350px; height: 233px; }
}

/* --- LIGHTBOX (JANELA MODAL EXPANDIDA) --- */
.lightbox {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo quase preto */
    z-index: 2000; /* Acima de TUDO (incluindo o header) */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Quando o Lightbox está aberto */
.lightbox.open {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 85%;
    border-radius: 8px;
    border: 4px solid #FFF1B8; /* Borda dourada premium */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

.lightbox.open .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #FFF1B8;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.lightbox-close:hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* --- ADAPTAÇÃO PARA VERSÃO MOBILE --- */
@media (max-width: 768px) {
    
    /* 1. Banner da Edição: Reduzir a altura para não ocupar o ecrã todo */
    .banner-edicao {
        height: 25vh;
        padding: 20px;
    }

    .banner-edicao img {
        padding: 10px;
    }

    /* 2. Destaques: Ajustar títulos e margens */
    .destaques {
        padding: 40px 10px;
    }

    .destaques h2 {
        font-size: 18px;
        margin-bottom: 30px;
    }

    /* 3. Cards de Prémio: Passar para 1 ou 2 por linha */
    .container-cards {
        gap: 15px;
        padding: 10px;
    }

    .card-premio {
        width: 100%; /* Ocupa a largura quase toda do telemóvel */
        max-width: 320px; /* Garante que não estica demasiado */
        height: 350px;
    }

    /* Facilitar a leitura no telemóvel (o hover é mais difícil) */
    .overlay-premio {
        background-color: rgba(0, 0, 0, 0.4); /* Fundo ligeiramente visível sempre */
    }

    .overlay-premio p {
        opacity: 1; /* Mostrar o texto sempre ou facilitar o toque */
        transform: translateY(0);
        font-size: 20px;
    }

    /* 4. Melhores Momentos (Carrossel) */
    .melhores-momentos {
        padding: 40px 0;
    }

    .melhores-momentos h2 {
        font-size: 18px;
    }
/* 1. Ativa o scroll e suaviza o movimento no iPhone/Android */
    .carrossel-container {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* Scroll ultra suave no iOS */
        padding-bottom: 15px;
    }

    /* 2. Ajusta o tamanho das fotos para "mostrar" que há mais ao lado */
    .carrossel-img {
        width: 85vw; /* Ocupa 85% da largura do ecrã */
        height: 260px;
        scroll-snap-align: center; /* A foto "cola" sempre no meio ao parar */
        flex-shrink: 0; /* IMPRESCINDÍVEL: Impede as fotos de encolherem */
    }

    /* 3. Remove as setas (inúteis com o dedo e ocupam espaço) */
    .carrossel-btn {
        display: none !important;
    }

    /* 4. Espaçamento do trilho */
    .carrossel-track {
        gap: 15px;
        padding: 0 20px; /* Margem para a primeira e última foto não colarem nos bordos */
    }


    /* As setas já estão escondidas no teu código original para < 1024px, 
       o que é correto para mobile pois usa-se o deslize do dedo. */

    /* 5. Lightbox (Modal da Imagem) */
    .lightbox-close {
        top: 20px;
        right: 20px;
        font-size: 40px;
    }

    .lightbox-content {
        max-width: 95%;
        border-width: 2px;
    }

    
}

.italiana {
    font-family: 'Italiana', serif !important;
}