@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

html {
    font-size: 125%;
}
/* :root {
    --cor-primaria-branca: #FFFFFF;
    --cor-secundaria-azul: #0056b3;
    --cor-azul-escuro: #004080;
    --cor-azul-muito-escuro: #003366;
    --cor-azul-claro: #ADD8E6;
    --cor-azul-super-claro: #EBF5FF;
    --cor-texto-principal: #333333;
    --cor-texto-claro: #f8f9fa;
    --fonte-principal: 'Open Sans', sans-serif;
    --fonte-titulos: 'Montserrat', sans-serif;
} */

:root {
    --cor-primaria-branca: #FFFFFF;
    --cor-secundaria-azul: #0aa5f5;
    --cor-azul-escuro: #0aa5f5;
    --cor-azul-muito-escuro: #0aa5f5;
    --cor-azul-claro: #ADD8E6;
    --cor-azul-super-claro: #EBF5FF;
    --cor-texto-principal: #333333;
    --cor-texto-claro: #f8f9fa;
    --fonte-principal: 'Open Sans', sans-serif;
    --fonte-titulos: 'Montserrat', sans-serif;
}

body {
    font-family: var(--fonte-principal);
    line-height: 1.7;
    color: var(--cor-texto-principal);
    background-color: var(--cor-primaria-branca);
    padding-top: 80px; /* Ajuste conforme a altura final do seu navbar */
}

a {
    color: var(--cor-secundaria-azul);
    text-decoration: none;
}
a:hover {
    color: var(--cor-azul-escuro);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul-escuro);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* Reset para a tag header que envolve o navbar */
header {
    padding: 0;
    margin: 0;
    border: none;
    background-color: var(--cor-azul-escuro); /* Alterado de transparent para a cor do navbar */
    line-height: 0; /* Para evitar que qualquer espaço em branco dentro do header cause altura */
}

/* Navbar Customizada */
#mainNavbar {
    background-color: var(--cor-azul-escuro) !important;
    padding-top: 0.35rem; 
    padding-bottom: 0.35rem; 
    transition: background-color 0.3s ease;
    min-height: 80px; 
    border: none !important; /* Garante que todas as bordas são removidas */
    box-shadow: none !important;
    /* Removidas as especificações de border-top, border-bottom, etc., pois border:none já cobre */
}

/* CORREÇÃO: Garante que os itens do navbar fiquem nos cantos opostos em telas menores */
#mainNavbar > .container {
    display: flex;
    align-items: center;
    /* * 'space-between' empurra o primeiro item (logo) para a esquerda
     * e o último item (botão) para a direita.
     * Esta é a configuração padrão do Bootstrap que foi sobrescrita.
     */
    justify-content: space-between;
}

/* Adicione este código ao seu arquivo CSS */
.navbar-logo {
  height: 40px; /* Ajuste a altura conforme sua preferência */
  width: auto;  /* Mantém a proporção da imagem */
}

#mainNavbar .navbar-brand {
    color: var(--cor-primaria-branca);
    font-family: var(--fonte-titulos);
    font-weight: bold;
    margin-right: 1rem; 
    padding: 0.1rem 0; 
    display: flex; 
    align-items: center; 
}

#mainNavbar .navbar-logo {
    height: 60px; 
    width: auto; 
}

#mainNavbar .navbar-brand:hover { color: var(--cor-azul-claro); }

#mainNavbar .nav-link {
    color: var(--cor-primaria-branca);
    padding: 0.5rem 0.8rem; 
    font-family: var(--fonte-principal);
    font-weight: bold;
    font-size: 0.95rem; 
    transition: color 0.3s ease;
    white-space: nowrap; 
}
#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active { color: var(--cor-azul-claro) !important; }

/* Garante que a lista de navegação também esteja alinhada ao centro verticalmente */
#mainNavbar .navbar-nav {
    align-items: center;
}

#mainNavbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#mainNavbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }
#mainNavbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); }

/* Hero Sections */
.hero-section { 
    background-color: var(--cor-azul-claro);
    color: var(--cor-azul-muito-escuro);
    padding: 6rem 0;
    min-height: 70vh;
}
.page-hero-section { 
    background-color: var(--cor-azul-super-claro); 
    color: var(--cor-azul-muito-escuro);
    padding: 4rem 0;
}

.page-hero-section .page-title {
    color: var(--cor-azul-muito-escuro);
    font-size: 2.8rem; 
    word-break: break-word; 
}

.hero-section h2 { 
    color: var(--cor-azul-muito-escuro);
    font-size: 3rem;
}

.hero-section p.lead, .page-hero-section p.lead {
    font-size: 1.3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.page-hero-section .page-title { margin-bottom: 0.5rem; } 
.page-hero-section .page-subtitle { font-size: 1.2rem; color: #555; }

.cta-button {
    background-color: var(--cor-secundaria-azul);
    border-color: var(--cor-secundaria-azul);
    color: var(--cor-primaria-branca) !important;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.cta-button:hover {
    background-color: var(--cor-azul-escuro);
    border-color: var(--cor-azul-escuro);
    transform: translateY(-2px);
}
.cta-button-secondary {
    background-color: transparent;
    border: 2px solid var(--cor-secundaria-azul);
    color: var(--cor-secundaria-azul) !important;
    padding: 0.70rem 1.45rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.cta-button-secondary:hover {
    background-color: var(--cor-secundaria-azul);
    color: var(--cor-primaria-branca) !important;
    transform: translateY(-2px);
}

.content-section .section-title { 
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}
.content-section h3 { 
    font-size: 2.5rem;
    font-weight: 700;
}

.mestre-marcelo-img-container,
.img-container 
{
    width: 100%;
    display: block;
    background-color: #e9ecef; 
    overflow: hidden; 
}
.mestre-marcelo-img-container { aspect-ratio: 3 / 4; }
.img-container { aspect-ratio: 4 / 3; }
.mestre-marcelo-img-container img,
.img-container img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
}

.card { border: none; } 
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.card .card-title {
    color: var(--cor-secundaria-azul);
    font-family: var(--fonte-titulos);
}
.card .card-img-top {
    border-bottom: 3px solid var(--cor-azul-claro);
    min-height: 150px; 
    object-fit: cover;
    background-color: #f0f0f0; 
    color: transparent; 
    font-size: 0; 
    line-height: 0; 
    aspect-ratio: 600 / 400; 
}
.title-link-sobre h5.card-title { 
    color: var(--cor-secundaria-azul);
    transition: color 0.3s ease;
}
.title-link-sobre:hover h5.card-title {
    color: var(--cor-azul-escuro);
    text-decoration: underline;
}
.character-card .card-img-top { max-height: 250px; }

.alt-bg { background-color: var(--cor-azul-super-claro); }

footer {
    background-color: var(--cor-azul-muito-escuro);
    color: var(--cor-texto-claro);
}
footer a { color: var(--cor-azul-claro); margin: 0 10px; }
footer a:hover { color: var(--cor-primaria-branca); text-decoration: underline; }
footer .bi:hover { transform: scale(1.2); }

@media (max-width: 1199.98px) { 
    #mainNavbar .nav-link {
        padding: 0.5rem 0.7rem; 
        font-size: 0.9rem; 
    }
    #mainNavbar .navbar-brand {
        /* O tamanho do logo é controlado por .navbar-logo height */
    }
}
@media (max-width: 991.98px) { 
    /* body padding-top será ajustado por JS se o navbar for mais alto */
    #mainNavbar .navbar-nav {
        background-color: var(--cor-azul-escuro);
        border-top: 1px solid var(--cor-azul-claro);
        margin-top: 0.5rem;
        align-items: flex-start; 
    }
    #mainNavbar .nav-link { 
        padding: 0.8rem 1rem; 
        font-size: 0.9rem; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
    }
    #mainNavbar .nav-link:last-child { border-bottom: none; }
    
    .hero-section h2 { font-size: 2.5rem; }
    .page-hero-section .page-title { font-size: 2.2rem; } 
    
    .hero-section p.lead, .page-hero-section p.lead { font-size: 1.1rem; }

    .mestre-marcelo-img-container,
    .img-container {
        margin-bottom: 1.5rem; 
    }
}
@media (max-width: 767.98px) {
    .content-section .section-title { font-size: 1.8rem; }
    .content-section h3 { font-size: 2rem; }
    .page-hero-section .page-title { font-size: 1.9rem; } 
}
@media (max-width: 575.98px) {
    .page-hero-section .page-title { font-size: 1.7rem; } 
}