/* ============================================================
   HERO COM VÍDEO EM BACKGROUND
   Usado em páginas que têm vídeo a ocupar o ecrã inteiro
   como elemento de fundo (diferente do #indexvideo da home)
   ============================================================ */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Vídeo posicionado atrás do conteúdo (z-index: -1) */
#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
    will-change: transform;
}

/* Título por cima do vídeo de fundo */
.hero-video-container h1 {
    font-size: clamp(45px, 10vw, 90px);
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin-bottom: 20px;
}

/* ============================================================
   TIPOGRAFIA GLOBAL
   .titulo-seccao — título de secção grande
   .titulo-medio — título de secção médio
   Ambos partilham o mesmo estilo base
   .highlight — palavra em verde dentro do título
   ============================================================ */
.titulo-seccao, 
.titulo-medio {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 3px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Palavra de destaque em verde dentro de títulos */
.highlight { color: #00ff66; }

/* Contentor de texto corrido — largura máxima centrada */
.content-wrapper {
    padding: 30px 20px 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ============================================================
   GRELHA DE CARDS (SECÇÃO DESTAQUES)
   Usada na página Sobre para mostrar eventos, espaços, etc.
   2 colunas em desktop, 1 coluna em tablet/mobile
   Para adicionar um card: copia um bloco .card no sobre.html
   ============================================================ */
.destaques-section {
    padding: 20px 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.destaques-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Card individual */
.card {
    background: #1a1c23;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

/* Hover: borda verde e sobe ligeiramente */
.card:hover {
    border-color: #00ff66;
    transform: translateY(-8px);
}

/* Contentor do media (imagem ou vídeo) dentro do card
   aspect-ratio: 3/2 mantém proporção consistente */
.media-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #000000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagem ou vídeo dentro do media-container */
.card-video, 
.c-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Área de texto dentro do card */
.card-info {
    padding: 25px;
    flex-grow: 1;
}

/* Tag de categoria no topo do card (ex: "EVENTOS", "PARCERIA") */
.tag-amarela {
    color: #00ff66;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.card-info h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: uppercase;
}

.card-info p {
    color: #a0a0a0;
    font-size: 15px;
    line-height: 1.6;
    text-align: justify;
}

/* ============================================================
   CARROSSEL DE IMAGENS (dentro dos cards)
   Controlado por JS/open-titles.js
   .c-img.active é a imagem visível
   .c-prev e .c-next são os botões de navegação
   Aparecem só no hover do card
   ============================================================ */
.carousel-sobre {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Todas as imagens sobrepostas — só a .active é visível */
.c-img {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.c-img.active { opacity: 1; }

/* Botões prev/next — invisíveis por defeito, aparecem no hover do card */
.c-prev, 
.c-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 80px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.card:hover .c-prev, 
.card:hover .c-next { opacity: 1; visibility: visible; }

.c-prev { left: 0; border-radius: 0 15px 15px 0; }
.c-next { right: 0; border-radius: 15px 0 0 15px; }
.c-prev:hover, .c-next:hover { background: #00ff66; color: #000000; }

/* ============================================================
   SAÍDAS PROFISSIONAIS
   Tabela expansível — cada linha abre/fecha ao clicar
   Controlado por JS/open-titles.js
   Para adicionar uma saída: copia um bloco .saida-row no sobre.html
   ============================================================ */
.saidas-section {
    padding: 40px 20px;
    background: #0a0b0e;
}

.saidas-tabela {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Linha clicável da tabela */
.saida-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.saida-row:hover { background: rgba(255, 255, 255, 0.02); }

/* Cabeçalho da linha — sempre visível */
.saida-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saida-header h4 {
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
}

/* Título fica verde quando a linha está aberta */
.saida-row.active .saida-header h4 { color: #00ff66; }

/* Conteúdo expandível — fechado por defeito (max-height: 0) */
.saida-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease, padding 0.3s ease;
    padding: 0 20px;
}

/* Quando a linha está ativa, expande suavemente */
.saida-row.active .saida-info {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 30px;
    transition: max-height 0.5s cubic-bezier(0.99, 0.01, 0.45, 1), opacity 0.4s ease;
}

.saida-info p {
    color: #aaa;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
    margin: 0;
}

/* ============================================================
   PARCEIROS
   Grelha de logos de parceiros — 3 colunas em desktop
   Logos em escala de cinza por defeito, coloridos no hover
   Para adicionar parceiro: copia um .parceiro-link no sobre.html
   ============================================================ */
.parceiros-section {
    padding: 60px 20px;
    text-align: center;
    background: #0f1014;
}

/* Texto introdutório com borda esquerda verde */
.parceiros-intro {
    max-width: 1000px;
    margin: 0 auto 30px;
    text-align: left;
    border-left: 5px solid #00ff66;
    padding-left: 30px;
}

.parceiros-intro p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

/* Grelha de 3 colunas para os logos */
.parceiros-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 30px auto 40px;
    align-items: center;
    justify-items: center;
}

.parceiro-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Logos em cinza com 50% opacidade por defeito */
.parceiro-link img {
    width: 100%;
    max-width: 220px;
    height: 100px;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(1) brightness(1.2);
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

/* Hover: logo a cores e ligeiramente maior */
.parceiro-link:hover img {
    opacity: 1;
    filter: grayscale(0) brightness(1);
    transform: scale(1.05);
}

/* ============================================================
   CALL TO ACTION (CTA)
   Botões no fundo da página Sobre
   .btn-cta — botão outline
   .btn-cta.highlight-btn — botão preenchido a verde
   ============================================================ */
.cta-section {
    padding: 20px 20px 50px;
    display: flex;
    gap: 25px;
    justify-content: center;
    background: #0f1014;
}

/* Botão outline */
.btn-cta {
    padding: 18px 38px;
    border: 1px solid rgba(0, 255, 102, 0.4);
    color: #00ff66;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Botão preenchido a verde */
.btn-cta.highlight-btn {
    background: #00ff66;
    color: #000000;
    border-color: #00ff66;
}

/* Hover: ambos ficam brancos */
.btn-cta:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ============================================================
   ANIMAÇÃO REVEAL ON SCROLL
   Elementos com class="reveal" animam ao entrar no ecrã
   Controlado por JS/open-titles.js
   Para aplicar a um elemento: adiciona class="reveal" no HTML
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal.active { animation: fadeInUp 0.6s ease-out forwards; }

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

/* Tablets e desktops pequenos */
@media (max-width: 1024px) {
    /* Cards em coluna única */
    .destaques-grid { grid-template-columns: 1fr; gap: 30px; }
    /* Parceiros em 2 colunas */
    .parceiros-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .parceiro-link img { height: 70px; max-width: 160px; }
    .card { height: auto; }
    .card-info { padding: 25px; }
    /* Botões do carrossel sempre visíveis em tablet (sem hover) */
    .c-prev, .c-next { opacity: 1; visibility: visible; width: 40px; height: 60px; font-size: 20px; }
}

/* Tablets verticais */
@media (max-width: 768px) {
    /* Títulos menores e em coluna */
    .titulo-seccao, 
    .titulo-medio {
        font-size: clamp(22px, 7vw, 30px);
        margin-bottom: 30px;
        padding: 0 15px;
        line-height: 1.2;
        letter-spacing: 0.5px;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    /* Parceiros em coluna única */
    .parceiros-grid { grid-template-columns: 1fr; gap: 40px; margin: 20px auto 50px; }
    .parceiro-link img { height: auto; max-width: 180px; }
    .saida-header h4 { font-size: 15px; line-height: 1.4; }
    .saida-header { padding: 20px 10px; }
    .content-wrapper { padding: 40px 20px; }
    /* Borda esquerda mais fina em mobile */
    .texto-corrido { border-left: 3px solid #00ff66; padding-left: 15px; }
}

/* Telemóveis */
@media (max-width: 480px) {
    .titulo-seccao, 
    .titulo-medio { font-size: 1.4rem; letter-spacing: 0px; padding: 0 10px; line-height: 1.2; }

    /* CTA em coluna única */
    .cta-section { flex-direction: column; align-items: center; gap: 20px; padding: 20px 15px 40px; }

    /* Botões CTA a largura total */
    .btn-cta { width: 100%; max-width: 300px; padding: 16px; font-size: 0.9rem; box-sizing: border-box; }

    .saida-header h4 { font-size: 0.85rem; padding: 0 10px; }

    /* Texto corrido com padding interno para não colar à borda */
    .texto-corrido {
        font-size: 0.95rem; line-height: 1.6;
        padding: 0 15px 0 18px;
        margin-bottom: 20px;
        text-align: justify;
        word-break: break-word;
        border-left: 3px solid #00ff66;
    }
}