/* Reset e Estilos Globais */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&display=swap');

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif; /* Zara usa fontes limpas ou serifadas elegantes */
    scroll-behavior: smooth;
    background-color: #fff;
}

h1, h2, h3, .zara-text {
    font-family: 'Playfair+Display', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Menu 3 Pontinhos (Menu Dots) */
.menu-dots {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 2000;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5px;
}

.menu-dots span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    transition: all 0.3s;
}

.menu-dots:hover span {
    background-color: #666;
}

/* Sidebar Customizada (Zara Style) */
#sidebar {
    position: fixed;
    top: 0;
    left: -100%; /* Escondido por padrão */
    height: 100vh;
    width: 100%; /* Ocupa a tela toda ao abrir para foco total */
    z-index: 1500;
    background: rgba(255, 255, 255, 0.98);
    transition: left 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar.sidebar-visible {
    left: 0;
}

#sidebar .nav-link {
    color: #000;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 400;
    padding: 10px 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: all 0.3s;
    border: none !important;
}

#sidebar .nav-link:hover {
    letter-spacing: 8px;
    opacity: 0.6;
}

/* Conteúdo Principal */
#main-content {
    min-height: 100vh;
}

.section-padding {
    padding: 100px 10%;
}

/* Imagens Full Screen */
.img-full {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
}

.img-creative {
    object-position: top center; /* Ajuste para garantir que "CREATIVE" apareça */
}

/* Espaço em branco entre imagens */
.spacer {
    height: 150px; /* Mais espaço para o estilo Zara */
    background-color: #fff;
}

/* Rodapé */
footer.bg-black {
    background-color: #000 !important;
}

.zara-text {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Responsividade Mobile */
@media (max-width: 991.98px) {
    .img-full {
        height: 80vh; /* Um pouco maior no mobile para impacto */
    }

    #sidebar .nav-link {
        font-size: 1.5rem;
    }

    .section-padding {
        padding: 50px 20px;
    }
}

/* Estilo para links ativos */
.nav-link.active {
    font-weight: bold;
}

/* Brand Items */
.brand-item {
    transition: opacity 0.3s ease;
}

.brand-item:hover {
    opacity: 0.8;
}

.post-item {
    transition: opacity 0.3s ease;
}

.post-item:hover {
    opacity: 0.8;
}

/* Ajuste para a página de posts */
body {
    background-color: #fff;
}

/* Animação de fade do carrossel mais suave */
.carousel-fade .carousel-item {
    transition: opacity 1s ease-in-out;
}

/* Estilos minimalistas para os controles do carrossel */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1 !important;
}

.carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.3;
    background-color: #000;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
    width: 6px;
    height: 6px;
}