/* 
Tema Customizado - Instituto Márcia Ferrari
Este arquivo deve ser salvo em: assets/css/imf-theme.css
*/

/* ==================================================
   IDENTIDADE VISUAL — CORES DO INSTITUTO
   --------------------------------------------------
   Todas as cores principais do site ficam reunidas
   aqui para facilitar a manutenção.

   Se no futuro for necessário atualizar a identidade
   visual do Instituto, basta alterar os valores abaixo.
   ================================================== */

:root {
    /* Azul escuro principal */
    --imf-azul-escuro: #0B2F45;

    /* Azul escuro utilizado no início do gradiente */
    --imf-azul-profundo: #082638;

    /* Azul médio */
    --imf-azul-medio: #225473;

    /* Azul claro */
    --imf-azul-claro: #2E7099;

    /* Dourado principal */
    --imf-dourado: #B59945;

    /* Dourado claro */
    --imf-dourado-claro: #CCAB48;

    /* Dourado escuro utilizado nos ícones */
    --imf-dourado-escuro: #8F7635;

    /* Branco */
    --imf-branco: #FFFFFF;
}

/* --- TIPOGRAFIA --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

body, input, select, textarea, h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif !important;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.fonte-destaque {
    font-family: 'Montserrat', serif !important;
}

/* Texto Geral */
body,
input,
select,
textarea {
    font-size: 1.3rem !important;
    line-height: 1.8;
    color: #0B2F45;
}

/* Texto da seção principal */
#main,
#main p,
#main li,
#main dt,
#main dd {
    color: #0B2F45;
}

/* Ajuste de tamanho e espaçamento para parágrafos e listas na seção principal */
#main p,
#main li {
    font-size: 1.5rem;
    line-height: 1.9;
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
    color: #0B2F45;
}

.major h2 {
    font-size: 2.2rem;
}

#nav ul li a {
    font-size: 1rem;
    font-weight: 700;
}

#main p {
    max-width: 70ch;
}

/* --- BACKGROUNDS GERAIS --- */
/* Força a substituição do degradê rosa/roxo padrão do Stellar */
html, body, body:before, #wrapper {
    background-color: #0B2F45 !important;
    background-image: linear-gradient(
135deg,
#082638 30%,
#225473 70%,
#2E7099 100%
) !important;}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background:
    radial-gradient(
        circle at bottom right,
        rgba(181,153,69,.25),
        transparent 45%
    );
}



/* Remove qualquer overlay de imagem (ruído/padrão) nativo que possa interferir na cor */
body {
    /*background-attachment: fixed !important;*/
    background-size: cover !important;
    background-repeat: no-repeat;
}

/* --- CORES DE ELEMENTOS --- */
/* Garantindo que o Header e o Footer tenham os textos na cor Branca */
#header h1, #header p, #footer h2, #footer p, #footer dl dt, #footer dl dd, #footer .copyright {
    color: #FFFFFF !important;
}

/* Botões Primários e Chamadas de Ação (Dourado Médio) */
.button.primary, 
input[type="submit"].primary, 
input[type="reset"].primary, 
input[type="button"].primary {
    background-color: #B59945 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* Efeito Hover nos botões primários (Dourado Claro) */
.button.primary:hover, 
input[type="submit"].primary:hover, 
input[type="reset"].primary:hover, 
input[type="button"].primary:hover {
    background-color: #CCAB48 !important;
}

/* Ícones de Destaque nas Seções (Dourado Médio) */
.major .icon, .features li .icon {
    color: #B59945 !important;
}

/* --- BORDAS SUAVES E ACOLHIMENTO --- */

/* Arredondamento suave nos botões */
.button, input[type="submit"], input[type="reset"], input[type="button"] {
    border-radius: 8px !important;
}

/* Imagens arredondadas para quebrar a rigidez */
.image img {
    border-radius: 12px !important;
}

/* Ajuste específico para a imagem de introdução (MIV) e Sobre */
.spotlight .image img {
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave para dar profundidade */
}

/* Cards da seção de Projetos e MIV */
.features li {
    background-color: #fbfbfb; /* Cinza muito claro, quase branco, para separar o card */
    border-radius: 12px !important;
    padding: 2.5em !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pequeno efeito de flutuação ao passar o mouse nos cards */
.features li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* --- AJUSTES DO HEADER, FOOTER E LINKS SECUNDÁRIOS --- */
/* Botões Secundários */
.button {
    box-shadow: inset 0 0 0 2px #225473 !important;
    color: #225473 !important;
}

.button:hover {
    background-color: rgba(34, 84, 115, 0.05) !important;
}

/* Links em texto (Azul Claro) */
a {
    color: #2E7099;
    text-decoration: none;
    border-bottom-color: transparent;
    transition: color 0.2s ease;
}

a:hover {
    color: #225473; /* Azul Médio no Hover */
}

/* Botões Secundários (Learn More) no Header e Footer para que fiquem visíveis no azul */
#header .button, 
#footer .button {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

#header .button:hover, 
#footer .button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 0 0 2px #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Links de texto no Footer visíveis */
#footer a {
    color: #CCAB48 !important; /* Dourado Claro para contraste */
}
#footer a:hover {
    color: #FFFFFF !important;
}
/* --- 5. ÍCONES CUSTOMIZADOS (IMAGENS PNG) --- */

/* Regra base para garantir tamanho e alinhamento idênticos para todos os ícones PNG */
.icon-customizado::before {
    content: '' !important;
    display: inline-block !important;
    width: 1.7em !important;
    height: 1.7em !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    background-color: currentColor !important;
}
/* Máscara específica do Atados */
.icon-atados::before {
    -webkit-mask: url('../../images/atados.png') no-repeat center / 70% !important;
    mask: url('../../images/atados.png') no-repeat center / 70% !important;
}

/* Máscara específica do Instagram */
.icon-instagram::before {
    -webkit-mask: url('../../images/instagram.png') no-repeat center / 80% !important;
    mask: url('../../images/instagram.png') no-repeat center / 80% !important;
}
/* Máscara específica do YouTube */
.icon-youtube::before {
    -webkit-mask: url('../../images/youtube_logo.png') no-repeat center / 110% !important;
    mask: url('../../images/youtube_logo.png') no-repeat center / 110% !important;
}

/* --- 6. AJUSTES VISUAIS (HEADER, IMAGENS E RESPONSIVIDADE) --- */

/* Header: Aumenta a fonte e o espaçamento entre a logo e o lema */
#header .fonte-destaque {
    font-size: 2em !important;
    margin-top: 3em !important;
}

/* Ajustes exclusivos para Mobile e Tablets */
@media screen and (max-width: 980px) {
    /* Força a imagem do "Sobre Nós" a escalar com a tela */
    .spotlight .image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 2em 0 0 0 !important;
    }
    
    .spotlight .image img {
        width: 100% !important;
    }
}

/* --- 7. AJUSTES ESPECÍFICOS DE LAYOUT (SPOTLIGHT) --- */

@media screen and (min-width: 981px) {
    /* Ajusta a seção Sobre para dar mais destaque à foto */
    #intro .spotlight {
        display: flex !important;
        align-items: center !important;
    }

    /* Reduz a largura do texto para dar mais espaço à imagem */
    #intro .spotlight .content {
        width: 40% !important;
        padding-right: 3em !important;
    }

    /* Aumenta a largura da imagem */
    #intro .spotlight .image {
        width: 60% !important;
        padding-left: 0 !important;
    }

    /* Ajusta a imagem e o container gráfico */
    #intro .spotlight .image img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==================================================
   HEADER DAS PÁGINAS INTERNAS
   --------------------------------------------------
   A classe "pagina-interna" é utilizada nas páginas
   internas do site, como:
   - Sobre Nós
   - Projetos
   - Transparência
   - Doação

   A logo recebe um tamanho menor nessas páginas
   para evitar que ultrapasse os limites da tela.
   ================================================== */

/* ==================================================
   LOGO DO HEADER — PÁGINAS INTERNAS
   --------------------------------------------------
   Nas páginas internas o header possui mais conteúdo
   do que na página inicial. Por isso, definimos
   explicitamente o tamanho da logo.

   O "width" controla o tamanho visual da logo.
   O "max-width" impede que ela fique grande demais
   em telas menores.
   ================================================== */

.pagina-interna #header .logo {
    display: block;
    width: 500px;
    max-width: 80%;
    margin: 0 auto 1.5em auto;
}

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

/* ==================================================
   NOSSA ESSÊNCIA — PÁGINA SOBRE NÓS
   --------------------------------------------------
   Na página Sobre Nós, Missão, Visão e Valores
   possuem textos mais longos.

   Por isso, os três blocos são apresentados
   verticalmente, em vez de lado a lado.
   ================================================== */

.essencia-institucional {
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 900px;
    margin: 0 auto;
}


/* --------------------------------------------------
   CADA BLOCO DE MISSÃO, VISÃO E VALORES
   -------------------------------------------------- */

.essencia-item {
    display: flex;
    align-items: flex-start;
    gap: 2em;
    padding: 2em;
    text-align: left;

    /* Fundo branco para destacar o conteúdo */
    background: rgba(255, 255, 255, 0.8);

    /* Cantos arredondados seguindo o estilo do site */
    border-radius: 12px;

    /* Sombra suave para criar profundidade */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

    /* Permite que o movimento do hover seja suave */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* ==================================================
   EFEITO HOVER — NOSSA ESSÊNCIA
   ================================================== */

.essencia-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.14);
}


/* O ícone cresce levemente ao passar o mouse */

.essencia-item .essencia-icone .icon {
    transition:
        transform 0.3s ease;
}

.essencia-item:hover .essencia-icone .icon {
    transform: scale(1.08);
}

/* --------------------------------------------------
   ÍCONE DA ESSÊNCIA
   -------------------------------------------------- */

.essencia-icone {
    /* Espaço reservado para o ícone */
    flex: 0 0 100px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* ==================================================
   ÍCONES — NOSSA ESSÊNCIA
   --------------------------------------------------
   Os ícones recebem um tamanho maior para funcionar
   como elemento visual de destaque de cada bloco.
   ================================================== */

.essencia-icone .icon {
    color: var(--imf-dourado);

    /* Tamanho visual do ícone */
    font-size: 3.5em !important;

    /* Garante que o ícone não fique comprimido */
    width: 1.5em;
    height: 1.5em;

    /* Centraliza o símbolo */
    display: flex;
    justify-content: center;
    align-items: center;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* --------------------------------------------------
   CONTEÚDO DO BLOCO
   -------------------------------------------------- */

.essencia-conteudo {
    flex: 1;
}


/* Título de cada bloco */

.essencia-conteudo h3 {
    margin-top: 0;
    margin-bottom: 0.75em;
}


/* Último parágrafo sem margem inferior */

.essencia-conteudo p:last-child {
    margin-bottom: 0;
}


/* ==================================================
   RESPONSIVIDADE
   --------------------------------------------------
   Em telas pequenas, o ícone fica acima do texto.
   ================================================== */

@media screen and (max-width: 736px) {

    .essencia-item {
        flex-direction: column;
        gap: 1em;
        padding: 1.5em;
    }

    .essencia-icone {
        flex-basis: auto;
        justify-content: flex-start;
    }

    .essencia-icone .icon {
        font-size: 2em;
    }

}

/* ==================================================
   ÍCONES — PÚBLICO BENEFICIADO
   --------------------------------------------------
   Os ícones utilizam o dourado da identidade visual
   e ganham uma pequena animação ao passar o mouse.
   ================================================== */

#publico .icon.major {
    color: var(--imf-dourado);

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* Efeito ao passar o mouse sobre o bloco */

#publico .col-6:hover .icon.major {
    transform: scale(1.15);
    color: var(--imf-dourado-claro);
}

/* ==================================================
   ANIMAÇÃO DE ENTRADA — HEADER
   --------------------------------------------------
   Reproduz nas páginas internas a sensação de
   entrada suave utilizada na página inicial.

   A animação acontece apenas uma vez, quando
   a página é carregada.
   ================================================== */


/* Estado inicial dos elementos */

.pagina-interna #header .logo,
.pagina-interna #header .fonte-destaque,
.pagina-interna #header h1,
.pagina-interna #header > p:not(.fonte-destaque) {
    opacity: 0;
    transform: translateY(20px);
}


/* Logo */

.pagina-interna #header .logo {
    animation: entrada-header 0.8s ease-out 0.1s forwards;
}


/* Lema */

.pagina-interna #header .fonte-destaque {
    animation: entrada-header 0.8s ease-out 0.25s forwards;
}


/* Título */

.pagina-interna #header h1 {
    animation: entrada-header 0.8s ease-out 0.4s forwards;
}


/* Descrição */

.pagina-interna #header > p:not(.fonte-destaque) {
    animation: entrada-header 0.8s ease-out 0.55s forwards;
}


/* --------------------------------------------------
   DEFINIÇÃO DA ANIMAÇÃO
   -------------------------------------------------- */

@keyframes entrada-header {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ==================================================
   CORREÇÃO DE SCROLL HORIZONTAL — MOBILE
   --------------------------------------------------
   Impede que elementos muito largos criem uma área
   vazia de rolagem horizontal em telas pequenas.

   Isso é especialmente importante para emails e
   outros textos sem espaços.
   ================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* Permite que textos longos quebrem corretamente */

#footer a,
#footer dd,
#footer p {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* Evita que o conteúdo do footer ultrapasse a tela */

#footer section {
    max-width: 100%;
    min-width: 0;
}


/* ==================================================
   EMAIL DO FOOTER
   --------------------------------------------------
   O email é um texto longo e contínuo. Esta regra
   permite que ele seja quebrado automaticamente
   em telas pequenas.
   ================================================== */

#footer dl dd a[href^="mailto:"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   BOTÕES — ALINHAMENTO DO TEXTO
   ------------------------------------------------------------
   O Stellar utiliza regras próprias de altura e line-height
   para os botões. Isso pode fazer com que textos curtos fiquem
   visualmente deslocados para cima.

   Utilizamos Flexbox para garantir que o texto fique sempre
   centralizado vertical e horizontalmente.
   ============================================================ */

#main .button {
    /* Permite que o botão cresça quando necessário */
    height: auto;
    min-height: 3em;

    /* Permite quebra de linha em telas pequenas */
    white-space: normal;

    /* Centralização vertical e horizontal */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Espaçamento interno */
    padding-top: 0.8em;
    padding-bottom: 0.8em;

    /* Espaçamento entre linhas quando o texto quebra */
    line-height: 1.4;

    /* Centralização horizontal do texto */
    text-align: center;

    /* Garante que o padding não aumente a largura */
    box-sizing: border-box;
}


/* Ajuste específico para telas pequenas */

@media screen and (max-width: 736px) {

    #main .actions.special {
        width: 100%;
    }

    #main .actions.special li {
        width: 100%;
        max-width: 100%;
    }

    #main .actions.special .button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        /* Espaço interno adequado */
        padding-left: 1em;
        padding-right: 1em;

        /* Permite quebra de linha */
        white-space: normal;
    }

}

/* ============================================================
   BOTÃO — VOLTAR AO INÍCIO
   ============================================================ */

#header .voltar-inicio {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 1.5em;

    height: auto;
    min-height: 3em;

    padding-top: 0.8em;
    padding-bottom: 0.8em;

    line-height: 1.4;

    text-align: center;

    white-space: normal;

    box-sizing: border-box;
}

/* ============================================================
   AJUSTE PARA TELAS PEQUENAS
   ------------------------------------------------------------
   Em celulares, o botão ocupa uma largura confortável sem
   ultrapassar os limites da tela.
   ============================================================ */

@media screen and (max-width: 736px) {

    #header .voltar-inicio {
        display: inline-block;

        max-width: 90%;

        white-space: normal;

        line-height: 1.4;

        text-align: center;
    }

}



/* =========================================================
   PARCEIROS INSTITUCIONAIS
   =========================================================
   Estilos exclusivos para os cartões de parceiros da
   página de Transparência.

   A estrutura utiliza CSS Grid para manter os parceiros
   lado a lado em telas grandes e empilhá-los em telas
   pequenas.
   ========================================================= */


/* =========================================================
   GRADE DOS PARCEIROS
   ========================================================= */

.parceiros-grid {
    display: grid;

    /* Dois cartões lado a lado no desktop */
    grid-template-columns: repeat(2, minmax(0, 1fr));

    /* Espaçamento entre os cartões */
    gap: 2em;

    /* Ocupa toda a largura disponível */
    width: 100%;

    /* Espaçamento superior */
    margin-top: 2em;
}


/* =========================================================
   CARTÃO INDIVIDUAL DO PARCEIRO
   ========================================================= */

.parceiro-card {
    display: flex;

    /* Organiza imagem e texto verticalmente */
    flex-direction: column;

    /* Faz os cartões ocuparem a mesma altura */
    height: 100%;

    /* Centraliza o conteúdo textual */
    text-align: center;
}


/* =========================================================
   ÁREA DA IMAGEM DO PARCEIRO
   ========================================================= */

.parceiro-imagem {
    /* Altura padronizada para todas as imagens */
    height: 180px;

    /* Centraliza a imagem horizontalmente */
    display: flex;

    justify-content: center;

    /* Centraliza a imagem verticalmente */
    align-items: center;

    /* Evita que a imagem ultrapasse a área */
    overflow: hidden;

    /* Espaço entre a imagem e o nome */
    margin-bottom: 1.5em;
}


/* =========================================================
   IMAGEM DO PARCEIRO
   ========================================================= */

.parceiro-imagem img {
    /* Permite que a imagem se ajuste à área disponível */
    max-width: 100%;

    max-height: 100%;

    /* Mantém a proporção original da imagem */
    width: auto;

    height: auto;

    /* Garante que a imagem inteira permaneça visível */
    object-fit: contain;
}


/* =========================================================
   ÁREA DO NOME DO PARCEIRO
   ========================================================= */

.parceiro-nome {
    /* Permite que os nomes ocupem o espaço restante */
    flex-grow: 1;

    /* Mantém o título alinhado no topo da área */
    display: flex;

    align-items: flex-start;

    /* Centraliza o texto horizontalmente */
    justify-content: center;
}


/* =========================================================
   TÍTULO DO PARCEIRO
   ========================================================= */

.parceiro-nome h3 {
    /* Remove margem adicional */
    margin: 0;

    /* Melhora a leitura quando o texto ocupa várias linhas */
    line-height: 1.4;
}


/* =========================================================
   RESPONSIVIDADE — TELAS PEQUENAS
   =========================================================
   Em celulares, os parceiros passam a ocupar uma única
   coluna para evitar que os cartões fiquem estreitos.
   ========================================================= */

@media screen and (max-width: 736px) {

    .parceiros-grid {
        /* Um parceiro por linha */
        grid-template-columns: 1fr;

        /* Aumenta o espaço entre os cartões */
        gap: 3em;
    }


    .parceiro-imagem {
        /* Reduz a altura da área de imagem no celular */
        height: 160px;
    }

}

/* =========================================================
   SEÇÃO "NOSSOS PROJETOS"
   ---------------------------------------------------------
   Mantém todos os cartões com a mesma altura e alinha
   os botões "Saiba Mais", mesmo quando os textos possuem
   quantidades diferentes de linhas.
   ========================================================= */

#second .row {
    align-items: stretch;
}

#second .col-6 {
    display: flex;
    flex-direction: column;
}

#second .col-6 .actions {
    margin-top: auto;
}

/* =========================================================
   GALERIA DOS PROJETOS
   ========================================================= */

.projeto-galeria .box.alt .image {
    overflow: hidden;
    position: relative;
    border-radius: 8px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.projeto-galeria .box.alt .image img {

    display: block;
    width: 100%;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

}


/* Efeito de destaque no desktop */

.projeto-galeria .box.alt .image:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25);

}


.projeto-galeria .box.alt .image:hover img {

    transform: scale(1.06);

    filter: brightness(1.08);

}

/* =========================================================
   LIGHTBOX — GALERIA DOS PROJETOS
   ---------------------------------------------------------
   Permite visualizar as fotografias da galeria em tamanho
   maior sem sair da página.

   Este componente é genérico e pode ser utilizado em
   qualquer página que possua:

       .projeto-galeria

   Não depende especificamente do Projeto Tênis de Mesa.
   ========================================================= */


/* ---------------------------------------------------------
   CAMADA PRINCIPAL
   --------------------------------------------------------- */

.projeto-lightbox {

    /* Oculto inicialmente */

    display: none;

    /* Fica acima de todo o conteúdo da página */

    position: fixed;

    inset: 0;

    z-index: 9999;

    /* Fundo escuro translúcido */

    background: rgba(0, 0, 0, 0.88);

    /* Centraliza a fotografia */

    align-items: center;
    justify-content: center;

    /* Espaçamento para telas pequenas */

    padding: 2rem;

}


/* ---------------------------------------------------------
   LIGHTBOX ABERTO
   --------------------------------------------------------- */

.projeto-lightbox.aberto {

    display: flex;

}


/* ---------------------------------------------------------
   IMAGEM AMPLIADA
   --------------------------------------------------------- */

.projeto-lightbox-imagem {

    display: block;

    max-width: 90vw;
    max-height: 85vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 6px;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5);

}


/* ---------------------------------------------------------
   BOTÃO FECHAR
   --------------------------------------------------------- */

.projeto-lightbox-fechar {

    position: absolute;

    top: 1.5rem;
    right: 2rem;

    width: 3rem;
    height: 3rem;

    border: none;

    background: transparent;

    color: #ffffff;

    font-size: 2.5rem;

    line-height: 1;

    cursor: pointer;

    z-index: 2;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;

}


/* Hover do botão */

.projeto-lightbox-fechar:hover {

    transform: scale(1.15);

    opacity: 0.75;

}


/* ---------------------------------------------------------
   INDICAÇÃO DE QUE A FOTO É CLICÁVEL
   --------------------------------------------------------- */

.projeto-galeria .projeto-foto {

    cursor: zoom-in;

}


/* ---------------------------------------------------------
   AJUSTES PARA CELULAR
   --------------------------------------------------------- */

@media screen and (max-width: 736px) {

    .projeto-lightbox {

        padding: 1rem;

    }


    .projeto-lightbox-imagem {

        max-width: 94vw;
        max-height: 82vh;

    }


    .projeto-lightbox-fechar {

        top: 0.75rem;
        right: 0.75rem;

        width: 2.5rem;
        height: 2.5rem;

        font-size: 2rem;

    }

}

/* =========================================================
   INTRODUÇÃO DOS PROJETOS
   ---------------------------------------------------------
   Permite que o texto acompanhe a altura da imagem,
   em vez de ficar preso a uma coluna independente.
   ========================================================= */

.projeto-introducao {
    text-align: left;
}


/* ---------------------------------------------------------
   IMAGEM DA INTRODUÇÃO
   --------------------------------------------------------- */

.projeto-imagem-introducao {
    float: left;

    width: 58%;

    margin: 0 2.5rem 1.5rem 0;

    border-radius: 8px;

    overflow: hidden;
}


/* Imagem propriamente dita */

.projeto-imagem-introducao img {
    display: block;
    width: 100%;
}


/* ---------------------------------------------------------
   LIMPA O FLOAT
   ---------------------------------------------------------

   Garante que a seção continue contendo a imagem mesmo
   depois que o texto deixar de ocupar sua altura.
   */

.projeto-introducao::after {
    content: "";
    display: table;
    clear: both;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 736px) {

    .projeto-imagem-introducao {

        float: none;

        display: block;

        width: 100%;

        margin: 0 0 1.5rem 0;

    }

}

/* =========================================================
   LOGOS DOS PROJETOS — PÁGINA INICIAL
   ---------------------------------------------------------
   Cria uma área visual de tamanho uniforme para as logos
   dos projetos.

   Como cada logo pode ter uma proporção diferente,
   utilizamos object-fit: contain para preservar a imagem
   inteira sem distorção ou corte.

   A altura fixa garante que os títulos e textos dos
   projetos comecem aproximadamente na mesma altura.
   ========================================================= */

#second .logo-projeto {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Altura padrão da área das logos */
    height: 400px;

    /* Evita que a imagem ultrapasse a área */
    overflow: hidden;

    /* Remove margens/efeitos que o Stellar possa aplicar */
    margin-bottom: 1.5rem;
}


/* ---------------------------------------------------------
   IMAGEM DA LOGO
   --------------------------------------------------------- */

#second .logo-projeto img {
    width: 100%;
    height: 100%;

    /*
     * Mantém a proporção original da logo.
     * A imagem inteira permanece visível.
     */
    object-fit: contain;

    /*
     * Pequeno espaçamento interno para evitar que
     * logos muito grandes encostem nas bordas.
     */
    padding: 15px;
}


/* =========================================================
   AJUSTE PARA MOBILE
   ========================================================= */

@media screen and (max-width: 736px) {

    #second .logo-projeto {
        height: 220px;
    }

    #second .logo-projeto img {
        padding: 10px;
    }

}

/* =========================================================
   LOGO NO FOOTER
   ========================================================= */

#footer .footer-logo {
    margin-bottom: 1.5rem;
}

#footer .footer-logo img {
    display: block;

    /*
     * Tamanho desejado no desktop.
     */
    width: 400px;

    /*
     * Nunca permite que a logo ultrapasse a largura
     * disponível do elemento pai.
     */
    max-width: 100%;

    height: auto;
}


/* =========================================================
   AJUSTE DA LOGO NO MOBILE
   ========================================================= */

@media screen and (max-width: 736px) {

    #footer .footer-logo img {
        /*
         * No celular a logo passa a ocupar no máximo
         * a largura disponível.
         *
         * O width: 400px continua sendo o tamanho
         * preferencial, mas o max-width impede que
         * ela ultrapasse a tela.
         */
        width: 400px;
        max-width: 100%;
        height: auto;
    }

}

/* =========================================================
   BOTÃO FLUTUANTE — VOLTAR AO TOPO
   ---------------------------------------------------------
   Botão reutilizável para todas as páginas do site.

   O JavaScript adiciona a classe "visivel" quando o
   visitante rola a página para baixo.

   Por padrão o botão fica invisível.
   ========================================================= */

#voltar-topo {

    /* Fica fixo em relação à janela do navegador */
    position: fixed;

    /* Distância das bordas */
    right: 25px;
    bottom: 25px;

    /* Tamanho do botão */
    width: 50px;
    height: 50px;

    /* Centraliza o símbolo dentro do botão */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Identidade visual do Instituto */
    background-color: #B59945;

    /* Texto/símbolo branco */
    color: #FFFFFF !important;

    /* Formato circular */
    border-radius: 50%;

    /* Fica acima do restante do conteúdo */
    z-index: 9999;

    /* Inicialmente invisível */
    opacity: 0;
    visibility: hidden;

    /*
     * Pequena animação para o botão aparecer
     * suavemente.
     */
    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease,
        background-color 0.2s ease;

    /*
     * Remove qualquer aparência de link herdada
     * do Stellar.
     */
    border-bottom: none !important;

}


/* =========================================================
   BOTÃO VISÍVEL
   ========================================================= */

#voltar-topo.visivel {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   HOVER
   ========================================================= */

#voltar-topo:hover {

    background-color: #CCAB48;

    color: #FFFFFF !important;

    transform: translateY(-3px);

}


/* =========================================================
   SÍMBOLO DE SETA
   ---------------------------------------------------------
   Utilizamos uma seta de texto em vez de depender dos
   ícones do Stellar. Isso torna o botão independente
   de Font Awesome.
   ========================================================= */

#voltar-topo::before {

    content: "↑";

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1;

}


/* =========================================================
   AJUSTE PARA MOBILE
   ========================================================= */

@media screen and (max-width: 736px) {

    #voltar-topo {

        width: 45px;
        height: 45px;

        right: 15px;
        bottom: 15px;

    }


    #voltar-topo::before {

        font-size: 1.3rem;

    }

}

/* =========================================================
   ROLAGEM SUAVE — VOLTAR AO TOPO
   ---------------------------------------------------------
   Garante que a navegação até o topo da página aconteça
   suavemente em vez de saltar instantaneamente.
   ========================================================= */

html {
    scroll-behavior: smooth !important;
}

/* Portal de Transparência - destaque na página inicial */
#transparencia-destaque {
    padding-top: 3em;
    padding-bottom: 3em;
    text-align: center;
}

#transparencia-destaque .content {
    text-align: center;
}

#transparencia-destaque header {
    text-align: center;
}

#transparencia-destaque h2 {
    margin-bottom: 0.4em;
}

#transparencia-destaque p {
    margin-bottom: 0;
}

#transparencia-destaque .actions {
    margin-top: 1.5em;
    justify-content: center;
}

/* =========================================================
   DEPOIMENTOS EM VÍDEO
   ---------------------------------------------------------
   Mantém os YouTube Shorts em seu formato vertical original
   e centraliza o vídeo dentro da página.
   ========================================================= */

.depoimento-video {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    margin: 2em auto 0;
}


/* Moldura do vídeo */

.depoimento-video-frame {
    position: relative;

    width: min(100%, 400px);

    aspect-ratio: 9 / 16;

    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15);

    background: #000;
}


/* YouTube iframe */

.depoimento-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* Legenda */

.depoimento-legenda {
    margin-top: 1em;

    max-width: 400px;

    text-align: center;

    font-size: 0.95em !important;

    opacity: 0.8;
}

/* =========================================================
   VÍDEO DE PODCAST / ENTREVISTA
   ---------------------------------------------------------
   Vídeos horizontais são exibidos no formato 16:9.
   ========================================================= */

.podcast-video {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 2em auto 0;
}

.podcast-video-frame {
    position: relative;

    width: min(100%, 900px);

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15);

    background: #000;
}

.podcast-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}
#podcast {
    margin-bottom: 1em;
}