/* --- Reset e Fontes Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000; /* Um creme muito suave, quase branco */
    font-family: 'Lato', sans-serif;
    color: #1a1a1a;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Fonte sofisticada */
    font-weight: 400;
}

/* --- Header Sofisticado --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 60px;
    background-color: #000000;
    /* 1. A Borda (Aumentei um pouco a opacidade para garantir que fique visível) */
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important; /* Linha dourada sutil. O !important força a exibição */
    
    /* 2. O Segredo para não ser engolido pela seção de baixo */
    position: relative; 
    z-index: 100; /* Joga o header (e a borda) para a camada da frente */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo h2 {
    font-size: 26px;
    letter-spacing: 2px; /* Espaçamento chique entre letras */
    text-transform: uppercase;
    color: #ffffff;
}

/* --- Menu Principal com Indicador Delicado --- */
.main-menu ul {
    display: flex;
    list-style: none;
    gap: 40px;
    align-items: center;
}

.main-menu ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 12px; 
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    
    /* Importante para o círculo: */
    position: relative; 
    padding-bottom: 15px; /* Empurra o círculo para baixo, desgrudando do texto */
    display: inline-block;
}

/* O Círculo Base (Sempre visível, apenas as bordas) */
.main-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; /* Tamanho delicado */
    height: 6px;
    border-radius: 50%;
    border: 1px solid #1a1a1a; /* Borda fina e visível na cor do texto */
    background-color: transparent; /* Mantém o meio oco */
    transition: all 0.3s ease;
}
/* Efeito Hover: Quando passa o mouse */
/* Efeito Hover: Ao passar o mouse */
.main-menu ul li a:hover {
    color: #d4af37; /* Texto fica dourado */
}

.main-menu ul li a:hover::after {
    border-color: #d4af37; /* A borda do círculo fica dourada, mas ele continua oco */
}

/* Efeito Ativo: Ao clicar / Página atual */
.main-menu ul li a.active {
    color: #d4af37; /* Texto dourado */
}

.main-menu ul li a.active::after {
    border-color: #d4af37; /* Borda dourada */
    background-color: #d4af37; /* Preenche o meio do círculo de dourado */
}

.account-icon a {
    color: #ffffff;
    font-size: 28px;
}

/* --- Hero Section --- */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('homepage-background.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(255, 255, 255);
}

.hero-content .pre-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.hero-content h1 {
    font-size: 64px;
    margin-bottom: 20px;
    font-style: italic; /* O itálico na Playfair fica muito elegante */
}

.hero-content .sub-title {
    font-size: 18px;
    font-weight: 300;
}

/* --- Seção do Container Geral --- */
.monthly-event {
    padding: 100px 20px; /* Bastante espaço em cima e embaixo para destacar */
    background-color: #000000; /* Fundo levemente creme */
    display: flex;
    justify-content: center;
}

.container {
    max-width: 1100px;
    width: 100%;
}

/* --- O Card Horizontal de Luxo --- */
.luxury-card {
    display: flex; /* Coloca texto e imagem lado a lado */
    background-color: #000000;
    border: 1px solid #d4af37; /* Borda Dourada Fina */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15); /* Sombra dourada suave */
    overflow: hidden; /* Garante que a imagem respeite as bordas arredondadas */
    min-height: 450px; /* Garante uma altura imponente */
}

/* --- Lado do Texto (Esquerda) --- */
.card-content {
    flex: 1; /* Ocupa 50% do espaço */
    padding: 60px; /* Espaçamento interno generoso */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o texto verticalmente */
}

.eyebrow-text {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    color: #d4af37; /* Dourado */
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Lato', sans-serif;
}

.card-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px; /* Título grande */
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    margin-bottom: 25px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.event-meta i {
    color: #d4af37;
}

.description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 35px;
    font-size: 16px;
    max-width: 90%; /* Evita que o texto fique muito largo */
}

/* --- Botão Estilo "Ouro" --- */
.btn-luxury {
    display: inline-block;
    width: fit-content;
    padding: 15px 35px;
    background: linear-gradient(45deg, #d4af37, #f3dfa2, #d4af37); /* Gradiente Metálico */
    background-size: 200% auto;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 14px;
    transition: 0.5s;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
    border: none;
}

.btn-luxury:hover {
    background-position: right center; /* Move o gradiente ao passar o mouse */
    transform: translateY(-2px); /* Levanta levemente o botão */
}

/* --- Lado da Imagem (Direita) --- */
.card-image {
    flex: 1; /* Ocupa os outros 50% */
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem preencher o espaço sem distorcer */
    display: block;
}

/* --- Responsividade (Para Celular) --- */
@media (max-width: 900px) {
    .luxury-card {
        flex-direction: column-reverse; /* Imagem em cima, texto embaixo no celular */
        height: auto;
    }

    .card-image {
        height: 300px; /* Altura fixa para a imagem no celular */
    }

    .card-content {
        padding: 40px 25px;
    }

    .card-content h2 {
        font-size: 32px;
    }
}

/* Responsividade para celular */
@media (max-width: 768px) {
    .event-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .hero-content h1 {
        font-size: 40px;
    }
    
    header {
        padding: 15px 20px;
    }
    
    .main-menu {
        display: none; /* Em mobile real, precisaríamos de um menu hambúrguer */
    }
}



/* --- Estilos Específicos da Página de Eventos (Área de Membros) --- */

/* Badge de Membro no Header */
.member-badge {
    font-size: 10px;
    background-color: #d4af37;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 8px;
    letter-spacing: 1px;
}

/* Header da Área Interna */
.members-header {
    /* Quebra o preto total usando o fundo radial chique do restante do site */
    
    
    /* Ajusta o espaçamento para o texto respirar bem (ajuste o 120px se o header for fixo) */
    padding: 120px 20px 60px; 
    
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Uma leve linha divisória embaixo também, se quiser separar do card que vem a seguir */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.welcome-text {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 10px;
}

.header-content h1 {
    font-size: 42px;
    color: #ffffff;
}

/* Barra de Filtros */
.events-filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-bottom: 40px;
    background-color: #fdfcf8;
}

.filter-btn {
    border: none;
    background: none;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 10px 20px;
    color: #888;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.filter-btn:hover, .filter-btn.active {
    color: #d4af37;
    border-bottom: 2px solid #d4af37;
}

/* --- Grid de Cards Verticais --- */
.events-grid-section {
    padding: 20px 5%;
    background-color: #fff;
    min-height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsivo Automático */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.event-card-vertical {
    background: #fff;
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card-vertical:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: #d4af37;
}

/* Imagem e Tags */
.card-thumb {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.event-card-vertical:hover .card-thumb img {
    transform: scale(1.05); /* Zoom suave na imagem ao passar o mouse */
}

.category-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(255,255,255,0.9);
    padding: 5px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    color: #1a1a1a;
}

.overlay-date {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: #d4af37;
    color: white;
    padding: 8px 12px;
    text-align: center;
    min-width: 50px;
}

.overlay-date .day {
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.overlay-date .month {
    font-size: 10px;
    text-transform: uppercase;
}

/* Corpo do Card */
.card-body {
    padding: 25px;
}

.card-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.location {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location i {
    color: #d4af37;
}

.excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Footer do Card */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f4f4f4;
    padding-top: 20px;
}

.slots {
    font-size: 12px;
    font-weight: bold;
    color: #d4af37;
    text-transform: uppercase;
}

.btn-rsvp {
    text-decoration: none;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
    transition: 0.3s;
}

.btn-rsvp:hover {
    color: #d4af37;
    border-color: #d4af37;
}




/* --- Membership Hero --- */
.membership-hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 80px; /* Compensa o header fixo */
}

.hero-content-small {
    max-width: 800px;
    padding: 0 20px;
}

.hero-content-small .pre-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #d4af37;
    margin-bottom: 15px;
}

.hero-content-small h1 {
    font-size: 56px;
    margin-bottom: 15px;
}

.hero-content-small .sub-title {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

/* --- Benefícios (Pilares) --- */
.benefits-section {
    background-color: #fff;
    padding: 80px 10%;
    border-bottom: 1px solid #f0f0f0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    text-align: center;
}

.benefit-item i {
    font-size: 32px;
    color: #d4af37;
    margin-bottom: 20px;
}

.benefit-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.benefit-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* --- Pricing/Membership Tiers --- */
.tiers-section {
    background-color: #fdfcf8;
    padding: 100px 5%;
}

.text-center {
    text-align: center;
}

.text-center h2 {
    font-size: 42px;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.divider.center {
    margin: 0 auto 50px auto;
}

.pricing-cards {
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza verticalmente */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap; /* Garante que quebre a linha no celular */
}

.tier-card {
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 50px 40px;
    width: 320px;
    text-align: left;
    transition: 0.3s;
    position: relative;
}

.tier-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: #d4af37;
}

/* Destaque para o Plano Principal */
.tier-card.featured {
    border: 1px solid #d4af37;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1);
    transform: scale(1.05); /* Deixa o cartão do meio levemente maior */
    background-color: #1a1a1a; /* Fundo escuro para luxo */
    color: #fff;
    z-index: 1;
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d4af37;
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
}

.tier-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 25px;
}

.tier-card.featured .tier-header {
    border-bottom: 1px solid #333;
}

.tier-header h3 {
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.tier-card.featured h3 {
    color: #d4af37;
}

.price {
    font-size: 36px;
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}

.price span {
    font-size: 16px;
    color: #888;
}

.tier-card.featured .price span {
    color: #aaa;
}

.tier-features {
    list-style: none;
    margin-bottom: 40px;
}

.tier-features li {
    font-size: 14px;
    margin-bottom: 15px;
    color: #555;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.tier-card.featured .tier-features li {
    color: #ddd;
}

.tier-features i {
    color: #d4af37;
    font-size: 12px;
    margin-top: 3px;
}

.tier-features li.disabled {
    color: #aaa;
    text-decoration: line-through;
}

.tier-features li.disabled i {
    color: #aaa;
}

/* Botões dos Tiers */
.btn-tier {
    display: block;
    text-align: center;
    padding: 15px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-tier:hover {
    background-color: #1a1a1a;
    color: #fff;
}

.btn-tier-gold {
    display: block;
    text-align: center;
    padding: 15px;
    background-color: #d4af37;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    transition: 0.3s;
    font-weight: bold;
}

.btn-tier-gold:hover {
    background-color: #c5a059;
}

/* Responsividade */
@media (max-width: 900px) {
    .tier-card.featured {
        transform: scale(1); /* Tira o scale no celular para alinhar melhor */
    }
    
    .pricing-cards {
        flex-direction: column;
    }
    
    .tier-card {
        width: 100%;
        max-width: 400px;
    }
}


/* --- Ajustes de Centralização --- */

/* 1. Garante que o container geral fique no centro da tela */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* O 'auto' nas laterais é o que centraliza o bloco */
}

/* 2. Força a seção inteira a alinhar o conteúdo ao centro */
.tiers-section {
    background-color: #fdfcf8;
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza tudo (título e cards) horizontalmente */
}

/* 3. Ajuste fino nos cartões para mantê-los alinhados e responsivos */
.pricing-cards {
    display: flex;
    justify-content: center; /* Centraliza os cartões entre si */
    align-items: center; 
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    margin: 40px auto 0; /* Margem no topo para desgrudar do título e auto nas laterais */
    flex-wrap: wrap; 
}


/* --- Seção Lookbook / Revista --- */
.lookbook-section {
    padding: 100px 20px;
    background-color: #fff;
    overflow: hidden; /* Evita barra de rolagem horizontal se o 3D vazar */
}

.section-subtitle {
    font-family: 'Lato', sans-serif;
    color: #888;
    margin-bottom: 50px;
    font-size: 16px;
    letter-spacing: 1px;
}

/* O palco do 3D */
.magazine-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px; /* Profundidade do 3D */
    margin: 40px auto;
}

/* O Livro em si */
.magazine {
    width: 400px; /* Largura da página */
    height: 550px; /* Altura da página */
    position: relative;
    transform-style: preserve-3d;
}

/* Cada folha do livro */
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left center; /* O eixo de rotação é a esquerda (lombada) */
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1); /* Animação suave e realista */
    cursor: pointer;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05), 5px 5px 15px rgba(0,0,0,0.1);
    border-radius: 2px 8px 8px 2px;
}

/* Frente e Verso de cada folha */
.page .front, 
.page .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Esconde o lado oposto quando virado */
    background-color: #fdfcf8;
    border-radius: 2px 8px 8px 2px;
    overflow: hidden;
}

/* O verso começa virado em 180 graus */
.page .back {
    transform: rotateY(180deg);
    border-radius: 8px 2px 2px 8px; /* Inverte o border-radius no verso */
}

/* Classe ativada via JavaScript quando clicamos */
.page.flipped {
    transform: rotateY(-180deg);
}

/* Estilo do conteúdo interno das páginas */
.page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-content.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 40px;
    text-align: center;
    border: 1px solid #d4af37;
}

.page-content.text-only {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Responsividade */
@media (max-width: 600px) {
    .magazine {
        width: 300px;
        height: 420px;
    }
}


/* --- Seção Sobre Nós (Curta) na Home --- */
.about-short {
    padding: 100px 20px;
    background-color: #000000; /* Fundo branco para contrastar com o evento, se necessário */
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px; /* Espaçamento chique entre imagem e texto */
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Imagem Redonda/Pílula --- */
.about-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.about-img {
    width: 100%;
    max-width: 420px; /* Controla a largura máxima */
    height: 550px; /* Altura maior para não cortar a foto inteira */
    object-fit: cover; /* Mantém a proporção sem distorcer */
    
    /* O SEGREDO DO FORMATO: Arredonda totalmente as pontas criando um arco/pílula */
    border-radius: 250px; 
    
    /* Uma sombra deslocada elegante para dar volume */

}

/* --- Texto Sobre Nós --- */
.about-content {
    flex: 1;
    max-width: 500px; /* Evita que o texto fique comprido e ruim de ler */
}

.about-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: #c2baba;
    margin-bottom: 25px;
    line-height: 1.2;
}

.about-content p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8; /* Respiro chique entre as linhas */
    margin-bottom: 40px;
}

/* Botão Vazado (Outline) Dourado */
.btn-gold-outline {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #d4af37;
    color: #d4af37;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.4s ease;
    background-color: transparent;
}

.btn-gold-outline:hover {
    background-color: #d4af37;
    color: #fff;
}

/* --- Responsividade (Para Celulares) --- */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column; /* Imagem em cima, texto embaixo */
        text-align: center;
        gap: 50px;
    }
    
    .about-img {
        height: 450px; /* Reduz um pouco a altura no celular */
        box-shadow: 10px 10px 0px #f4f0e6; /* Sombra menor no mobile */
    }
}


/* --- Seção Spotlight (Centralizada) --- */
/* --- Seção Spotlight (Fundo Preto) --- */
.march-spotlight {
    /* Gradiente escuro e sofisticado */
    background: radial-gradient(circle at top center, #262630 0%, #0a0a0d 100%);
    
    /* Espaçamento para o card respirar bem na tela */
    padding: 100px 20px; 
    min-height: 100vh;
    
    /* Centraliza o card na tela */
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* --- Cartão Efeito Vidro Claro (Clear Glassmorphism) --- */
/* No .glass-card-clear: Aumentamos o max-width */
.glass-card-clear {
    /* 1. Criando o "volume" do vidro: um degradê que é um pouco mais claro no topo e desvanece */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    
    /* 2. Mantemos o blur para caso você adicione alguma imagem de fundo na seção no futuro */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* 3. Borda mais visível. A borda superior mais clara simula a luz batendo na quina do vidro */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    
    /* 4. Arredondamento e corte (ESSENCIAL para a imagem do topo não ficar com os bicos quadrados) */
    border-radius: 24px;
    overflow: hidden; 
    
    /* 5. Sombra mais forte e escura para o card "flutuar" e descolar do fundo da página */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    
    /* --- Dimensões que ajustamos na etapa anterior --- */
    max-width: 1150px; 
    width: 95%; 
    display: flex;
    flex-direction: column;
    margin: 0 auto; 
}

/* Na .glass-image-top: Reduzimos a altura fixa */
.glass-image-top {
    width: 100%;
    height: 400px; /* Reduzido de 400px para 280px. Isso economiza muito espaço vertical. */
    position: relative;
}

.glass-image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o espaço sem distorcer */
    display: block;
    /* Um leve filtro para a imagem não brigar com o texto branco depois */
    filter: brightness(0.9); 
}

/* --- 2. Conteúdo de Texto Abaixo --- */
/* Reduzindo o padding interno geral */
.glass-content-bottom {
    padding: 35px 50px; /* Reduzido de 50px 60px para ficar mais compacto */
    text-align: center; 
    color: #fdfcf8; 
}

/* Reduzindo a margem do título */
.glass-card-clear h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px; /* Leve redução na fonte */
    line-height: 1.1;
    margin-bottom: 15px; /* Reduzido de 20px */
    color: #fff; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}

/* Reduzindo a margem do divisor */
.divider-glass-clear {
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.5), transparent);
    margin: 25px auto; /* Reduzido de 30px */
    opacity: 0.7;
}

/* Ajustando a descrição para ocupar mais espaço horizontal */
.spotlight-desc-clear {
    font-size: 17px;
    line-height: 1.7; /* Leve redução no espaçamento entre linhas */
    color: #f4f4f4;
    margin-bottom: 35px; /* Reduzido de 50px */
    font-weight: 400;
    max-width: 90%; /* Aumentado de 80% para 90%. Deixa o texto se espalhar mais, reduzindo a altura */
    margin-left: auto;
    margin-right: auto;
}

/* Ajustando o espaçamento da área do botão */
.glass-action-clear {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 25px; /* Reduzido de 30px */
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    max-width: 95%; /* Pode ser um pouco mais largo agora */
    margin: 0 auto;
}

.urgency-clear {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #f3dfa2; /* Um dourado mais claro e luminoso */
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botão com Brilho (Glow) */
.btn-gold-glow {
    background: linear-gradient(45deg, #d4af37, #f9e6b3);
    color: #1a1a1a;
    padding: 18px 45px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;
    border-radius: 50px; /* Botão pílula mais moderno */
    transition: all 0.4s ease;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); /* O "Glow" dourado permanente */
}

.btn-gold-glow:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.7); /* Glow aumenta no hover */
    background: linear-gradient(45deg, #f9e6b3, #d4af37); /* Inverte o gradiente */
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .glass-image-top {
        height: 300px; /* Imagem menor em tablets */
    }
    .glass-content-bottom {
        padding: 40px 30px;
    }
    .glass-card-clear h2 {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .glass-image-top {
        height: 220px; /* Imagem ainda menor em celulares */
    }
    .glass-content-bottom {
        padding: 30px 20px;
    }
    .glass-card-clear h2 {
        font-size: 28px;
    }
    .spotlight-meta {
        flex-direction: column;
        gap: 10px;
    }
    .glass-action-clear {
        flex-direction: column;
        gap: 25px;
    }
    .btn-gold-glow {
        width: 100%; /* Botão largura total no celular */
        text-align: center;
    }
    .spotlight-desc-clear {
        max-width: 100%;
    }
}









/* --- Seção Sobre Nós --- */
.about-section {
    /* Mantendo o fundo escuro radial elegante */
    background: radial-gradient(circle at top center, #262630 0%, #0a0a0d 100%);
    padding: 140px 20px 80px; /* Padding top maior para não grudar no header */
    min-height: 100vh;
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Card Principal de Vidro (Sobre) --- */
.glass-card-about {
    /* O mesmo Dark Glassmorphism refinado que aplicamos nos eventos */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    
    max-width: 900px; /* Um pouco mais estreito para facilitar a leitura do texto */
    width: 100%;
    margin-bottom: 60px;
    padding: 60px 50px;
    text-align: center;
}

.glass-card-about h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    color: #fff;
    margin-bottom: 10px;
}

.about-desc {
    font-size: 17px;
    line-height: 1.8;
    color: #f4f4f4;
    margin-bottom: 20px;
    font-weight: 300;
}

/* --- Pilares (Cards Menores em Vidro) --- */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.pillar-glass {
    /* Vidro um pouco mais sutil para os cards menores */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
}

.pillar-glass:hover {
    transform: translateY(-8px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.4); /* O topo acende com um dourado suave no hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.pillar-glass i {
    font-size: 32px;
    color: #d4af37; /* Dourado da marca */
    margin-bottom: 25px;
}

.pillar-glass h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #fff;
    margin-bottom: 15px;
}

.pillar-glass p {
    font-size: 15px;
    line-height: 1.6;
    color: #c4c4c4;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .about-pillars {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
    }
}

@media (max-width: 600px) {
    .about-pillars {
        grid-template-columns: 1fr; /* 1 coluna no celular */
    }
    .glass-card-about {
        padding: 40px 20px;
    }
    .glass-card-about h2 {
        font-size: 32px;
    }
}




/* --- Seção Fundadoras --- */
.founders-section {
    /* Fundo escuro contínuo para manter o clima da página */
    background: #0a0a0d; 
    padding: 100px 20px;
}

.founders-container {
    max-width: 1150px;
    margin: 0 auto;
}

.founders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide a tela no meio (Desktop) */
    gap: 70px; /* Espaço elegante entre a foto e o texto */
    align-items: center;
}

/* --- Moldura de Vidro para a Foto --- */
.founders-image-wrapper {
    position: relative;
    border-radius: 24px;
    padding: 15px; /* Cria o espaço da "moldura" */
    
    /* Efeito de vidro contornando a foto */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.founders-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 14px; /* Arredondamento interno da foto */
    display: block;
    /* Um leve filtro para deixar a foto mais "cinematográfica" e chique */
    filter: contrast(105%) brightness(0.95); 
}

/* --- Estilo dos Textos das Fundadoras --- */
.founders-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: #fff;
    margin: 15px 0 20px;
}

.divider-glass-left {
    width: 80px;
    height: 1px;
    /* Degradê dourado que some para a direita */
    background: linear-gradient(to right, rgba(212, 175, 55, 0.8), transparent);
    margin: 0 0 35px 0;
}

.founders-text p {
    font-size: 17px;
    line-height: 1.8;
    color: #c4c4c4;
    margin-bottom: 25px;
    font-weight: 300;
}

/* --- Assinaturas / Nomes --- */
.founders-signatures {
    margin-top: 45px;
    font-family: 'Playfair Display', serif;
    font-style: italic; /* Traz um ar de assinatura manual */
    font-size: 26px;
    color: #d4af37; /* Dourado da marca */
    display: flex;
    align-items: center;
    gap: 15px;
}

.signature-amp {
    font-size: 20px;
    color: #555; /* Um "&" mais discreto */
    font-style: normal;
}

/* --- Responsividade (Celulares e Tablets) --- */
@media (max-width: 950px) {
    .founders-grid {
        grid-template-columns: 1fr; /* Fica uma coluna só, foto em cima do texto */
        gap: 50px;
    }
    
    .founders-image-wrapper {
        max-width: 600px;
        margin: 0 auto; /* Centraliza a foto */
    }
    
    .founders-text {
        text-align: center; /* Centraliza os textos no mobile */
    }
    
    .divider-glass-left {
        margin: 0 auto 35px auto; /* Centraliza a linha divisória */
        background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.8), transparent);
    }
    
    .founders-signatures {
        justify-content: center; /* Centraliza as assinaturas */
    }
}


/* --- Estilo para a Logo em Imagem --- */
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.img-logo {
    /* Ajuste este valor (35px, 40px, 50px) dependendo de quão alta é a sua imagem original.
       Isso garante que ela fique do mesmo tamanho que o texto anterior.
    */
    height: 75px; 
    width: 100px; /* O auto garante que a imagem não fique esticada ou achatada */
    display: block;
}







/* --- Seção Waitlist (Membership) --- */
.waitlist-section {
    /* Fundo escuro radial preenchendo a tela toda */
    background: radial-gradient(circle at center, #262630 0%, #0a0a0d 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px; /* Espaço para o header */
}

/* --- Card de Vidro Centralizado --- */
.glass-card-waitlist {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    
    max-width: 700px; /* Card mais estreito para focar a atenção */
    width: 100%;
    padding: 60px 50px;
    text-align: center;
    margin: 0 auto;
}

/* Ícone da Chave no topo */
.waitlist-icon {
    font-size: 38px;
    color: #d4af37; /* Dourado */
    margin-bottom: 20px;
}

.glass-card-waitlist h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    color: #fff;
    margin: 15px 0 10px;
}

.divider-glass-center {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.8), transparent);
    margin: 25px auto;
}

.waitlist-desc {
    font-size: 17px;
    line-height: 1.7;
    color: #c4c4c4;
    margin-bottom: 20px;
    font-weight: 300;
}

/* --- Formulário Elegante de Vidro --- */
.waitlist-form {
    margin-top: 40px;
}

.input-glass-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* Input invisível / sublinhado */
.glass-input {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.03); /* Leve fundo no input */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 16px 25px;
    color: #fff;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.6); /* Borda fica dourada ao clicar */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* Ajuste no botão para o formulário */
.btn-waitlist {
    width: 100%;
    max-width: 400px;
    cursor: pointer; /* Garante que mostre a mãozinha de clique */
}

/* --- Responsividade --- */
@media (max-width: 600px) {
    .glass-card-waitlist {
        padding: 40px 25px;
    }
    .glass-card-waitlist h2 {
        font-size: 36px;
    }
    .glass-input, .btn-waitlist {
        max-width: 100%;
    }
}


/* --- Seção de Vídeo (Home) --- */
.video-section {
    background: radial-gradient(circle at center, #1a1a24 0%, #0a0a0d 100%);
    padding: 100px 20px;
    display: flex;
    justify-content: center;
}

.video-container {
    max-width: 400px; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-header {
    text-align: center;
    margin-bottom: 40px;
}

.video-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: #fff;
    margin: 15px 0;
}

.divider-glass-center {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.8), transparent);
    margin: 25px auto;
}

/* --- Moldura de Vidro Premium para o Player --- */
.video-glass-wrapper {
    width: 100%;
    border-radius: 24px;
    padding: 15px; 
    
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.video-glass-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px; 
    outline: none;
    background-color: #000; 
}

/* --- Responsividade do Vídeo --- */
@media (max-width: 768px) {
    .video-section {
        padding: 60px 20px;
    }
    .video-header h2 {
        font-size: 32px;
    }
    .video-glass-wrapper {
        padding: 10px;
        border-radius: 16px;
    }
    .video-glass-wrapper video {
        border-radius: 10px;
    }
}


/* --- Ícone da Chave com Círculo Vazado --- */
.waitlist-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    /* Borda dourada com leve transparência para manter a elegância */
    border: 1px solid rgba(212, 175, 55, 0.4); 
    border-radius: 50%;
    margin-bottom: 25px;
}

.waitlist-icon-circle i {
    font-size: 28px;
    color: #d4af37; /* Dourado */
}

/* --- Ajuste para o Botão Isolado (Sem Formulário) --- */
.waitlist-action {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.waitlist-action .btn-waitlist {
    display: inline-block; /* Garante que a tag <a> respeite o padding do botão */
    text-align: center;
    width: 100%;
    max-width: 350px; /* Deixei um pouco mais contido para ficar mais chique */
}




/* --- Ajustes Gerais do Header --- */
header {
    position: relative; /* Necessário para o menu mobile descer a partir dele */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Esconde o botão hambúrguer no Desktop */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: #d4af37; /* Dourado */
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.mobile-toggle:hover {
    color: #fff;
}

/* --- Menu Mobile (Versão À Prova de Falhas) --- */
@media (max-width: 768px) {
    .mobile-toggle {
        display: block; 
    }
    
    .main-menu {
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background: rgba(10, 10, 13, 0.98); 
        backdrop-filter: blur(15px); 
        -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(212, 175, 55, 0.2);
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        z-index: 999;
        
        /* O SEGREDO: Esconde o menu completamente por padrão no mobile */
        display: none; 
        padding: 30px 0;
    }
    
    /* Quando o JavaScript adiciona a classe .open, ele força o menu a aparecer */
    .main-menu.open {
        display: block !important; 
    }
    
    .main-menu ul {
        display: flex; 
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        gap: 30px; 
        margin: 0;
        padding: 0;
    }

    .main-menu ul li a {
        font-size: 18px; 
        display: block;
    }
}


/* --- Seção de Imagem Única do Evento (Homepage) --- */
.monthly-event-poster {
    /* Fundo transparente para herdar o fundo escuro do body */
    background: transparent;
    padding: 80px 20px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poster-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.poster-wrapper {
    /* Como a imagem é vertical (formato retrato), limitamos a largura para ela não ficar gigante no computador */
    max-width: 600px; 
    width: 100%;
    
    /* A borda dourada elegante */
    border: 2px solid rgba(212, 175, 55, 0.8);
    border-radius: 16px; /* Cantos levemente arredondados */
    overflow: hidden; /* Garante que a imagem respeite o arredondamento */
    
    /* Um leve brilho dourado e uma sombra profunda para descolar do fundo */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.15);
}

.event-flyer {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .monthly-event-poster {
        padding: 60px 20px;
    }
    .poster-wrapper {
        border-radius: 12px;
    }
}



/* --- Seção de Imagem Única do Evento (Usada na Home e na página de Eventos) --- */
.monthly-event-poster {
    background: transparent;
    padding: 0px 20px 120px; /* Pouco espaço em cima para ficar perto do título */
    display: flex;
    justify-content: center;
    align-items: center;
}

.poster-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.poster-wrapper {
    max-width: 600px; /* Controla o tamanho para não ficar gigante */
    width: 100%;
    
    /* A moldura dourada premium */
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 12px; 
    overflow: hidden; 
    
    /* Sombra profunda + Glow Dourado */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 175, 55, 0.15);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Leve efeito de flutuação ao passar o mouse (Opcional, mas muito elegante) */
.poster-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(212, 175, 55, 0.25);
}

.event-flyer {
    width: 100%;
    height: auto;
    display: block;
}


/* --- Seção Teaser de Eventos Futuros --- */
.upcoming-events-teaser {
    background: transparent;
    padding: 20px 20px 120px; /* Preenche a parte de baixo da página */
    display: flex;
    justify-content: center;
}

.teaser-container {
    max-width: 850px;
    width: 100%;
}

.glass-card-teaser {
    /* Vidro escuro super elegante */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(212, 175, 55, 0.3); /* O topo acende com um fio dourado */
    border-radius: 24px;
    padding: 60px 50px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.teaser-icon {
    font-size: 28px;
    color: #d4af37;
    margin-bottom: 20px;
}

.glass-card-teaser h2 {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    color: #fff;
    margin-bottom: 15px;
}

.teaser-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #c4c4c4;
    margin-bottom: 35px;
    font-weight: 300;
}

/* --- Tags Bloqueadas (Efeito de Mistério) --- */
.teaser-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
}

.locked-tag {
    /* Fundo mais escuro para parecer "apagado/trancado" */
    background: rgba(0, 0, 0, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 13px;
    color: #888; /* Texto cinza */
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.locked-tag i {
    color: #d4af37; /* Apenas o cadeado brilha em dourado */
    font-size: 12px;
}

.teaser-footer {
    font-size: 15px;
    color: #d4af37;
    font-style: italic;
    font-family: 'Playfair Display', serif;
}

/* --- Responsividade --- */
@media (max-width: 600px) {
    .glass-card-teaser {
        padding: 40px 25px;
    }
    .glass-card-teaser h2 {
        font-size: 32px;
    }
    .teaser-tags {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .locked-tag {
        width: 100%;
        justify-content: center;
    }
}



/* --- Moldura de Vidro para o Vídeo (About Us) --- */
.video-glass-wrapper-about {
    /* Controle de Tamanho e Centralização */
    max-width: 800px; /* Controla o tamanho do "preview" na tela */
    width: 100%;
    margin: 0 auto; /* Centraliza a moldura na página */
    
    /* Efeito de Vidro (Idêntico ao da Home) */
    border-radius: 24px;
    padding: 15px; /* Cria a borda da moldura */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.video-glass-wrapper-about video {
    width: 100%;
    
    /* 1. Define a altura achatada. Você pode usar uma altura fixa (ex: height: 350px) 
       ou uma proporção cinematográfica como a linha abaixo (21:9): */
    aspect-ratio: 21 / 9; 
    
    /* 2. O segredo: faz a imagem de capa preencher o espaço sem distorcer */
    object-fit: cover; 
    
    display: block;
    border-radius: 14px; 
    outline: none;
    background-color: #000; 
}

/* Responsividade para o celular não ficar com o vídeo fino demais */
@media (max-width: 768px) {
    .video-glass-wrapper-about video {
        aspect-ratio: 16 / 9; /* Volta para o formato normal de vídeo no celular */
        border-radius: 10px;
    }
}


/* --- Ícone do Substack no Header --- */
.account-icon a {
    color: #d4af37; /* Aplica o dourado da marca */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efeito Hover: Fica branco e sobe levemente ao passar o mouse */
.account-icon a:hover {
    color: #ffffff; 
    transform: translateY(-2px);
}

/* Garante que o SVG obedeça ao tamanho correto */
.account-icon svg {
    width: 18px; /* Você pode aumentar aqui se achar pequeno */
    height: 18px;
}