/* ==========================================================================
   Variáveis de Cores (Paleta baseada na Identidade OFS / Noite de Massas)
   ========================================================================== */
:root {
    --marrom-principal: #3e2712;
    --marrom-claro: #9c6e3c;
    --dourado-destaque: #f39c12;
    --dourado-hover: #e67e22;
    --fundo-claro: #fdfaf6;
}

/* ==========================================================================
   Hero Section (Banner Principal)
   ========================================================================== */
.hero-section {
    min-height: 85vh;
    /* Imagem de fundo com um overlay escuro para garantir a leitura do texto */
    background: linear-gradient(rgba(30, 18, 8, 0.8), rgba(30, 18, 8, 0.8)), 
                url('https://images.unsplash.com/photo-1551183053-bf91a1d81141?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    background-color: var(--marrom-principal); /* Cor de fallback caso a imagem não carregue */
    border-bottom: 5px solid var(--dourado-destaque);
}

.tracking-wide {
    letter-spacing: 3px;
    color: var(--dourado-destaque);
}

.meta-info span {
    display: inline-block;
    margin: 0 15px;
    font-size: 1.2rem;
    font-weight: 500;
}

/* ==========================================================================
   Botões de Destaque (.btn-buy)
   ========================================================================== */
.btn-buy {
    background-color: var(--dourado-destaque);
    color: #fff !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 30px;
    border: 2px solid var(--dourado-destaque);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
    transition: all 0.3s ease-in-out;
}

.btn-buy:hover {
    background-color: var(--dourado-hover);
    border-color: var(--dourado-hover);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.6);
    transform: translateY(-2px);
}

/* ==========================================================================
   Títulos e Elementos de Texto
   ========================================================================== */
.section-title {
    color: var(--marrom-principal);
    font-weight: 800;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 10px;
}

/* Linha decorativa abaixo dos títulos */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--dourado-destaque);
    border-radius: 2px;
}

.text-center.section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.text-brown {
    color: var(--marrom-principal) !important;
}

.border-brown {
    border-color: var(--marrom-principal) !important;
}

/* ==========================================================================
   Seções Específicas
   ========================================================================== */

/* Quem é a OFS */
#ofs {
    background-color: #fff;
}

.ofs-logo-box {
    padding: 3rem;
    border: 2px dashed var(--marrom-claro);
    border-radius: 15px;
    background-color: var(--fundo-claro);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* A Noite de Massas (Cards) */
.card {
    border: none;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

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

.list-group-item {
    border-color: rgba(0,0,0,0.05);
}

/* Galeria / Carrossel */
.slider-placeholder {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #aaa;
    border: 2px dashed #555;
    margin: 0 20px;
    background-color: #222;
}

/* Patrocinadores */
#patrocinadores {
    background-color: var(--fundo-claro);
}

.sponsor-card {
    height: 120px; /* Altura padronizada exigida */
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0 !important;
}

.sponsor-card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: var(--marrom-claro) !important;
}

/* ==========================================================================
   Formulário de Contato
   ========================================================================== */
#contato .form-control {
    border: 1px solid #ccc;
    padding: 10px 15px;
}

#contato .form-control:focus {
    border-color: var(--dourado-destaque);
    box-shadow: 0 0 0 0.25rem rgba(243, 156, 18, 0.25);
}