:root {
    --bg-header-top: #000000;
    --bg-header-main: #3d0c11; /* O tom vinho escuro marcante da imagem */
    --text-color: #ffffff;
    --text-muted: #cccccc;
    --font-premium: 'Montserrat', sans-serif;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

b{

font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
size: 20cm;





}


    
    /* 1. FIXA O CABEÇALHO INTEIRO NO TOPO DA TELA DO TELEFONE */
 
    /* Esconde a barra do topo (redes sociais/idioma) no celular para economizar espaço na tela */
    
/* ==========================================================================
   UPGRADE PREMIUM DA SEÇÃO HERO (LAR / HOME)
   ========================================================================== */

.hero-section {
    height: 90vh; /* Ocupa 90% da altura da tela do usuário */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo horizontal e verticalmente */
    text-align: center;
    
    /* 1. Fundo com degradê que simula iluminação de palco (Vinho escuro para o Preto profundo) */
    background: radial-gradient(circle at center, #4a0d14 0%, #0b0b0b 100%);
    
    /* OBS: Quando você tiver a sua foto tocando guitarra, use a linha abaixo descomentada: */
    /* background: url('sua-foto-de-palco.jpg') center/cover no-repeat; */
    
    overflow: hidden;
}

/* 2. Camada de Proteção (Overlay) para o texto nunca sumir no fundo */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Mistura um degradê escuro para dar foco ao centro da tela */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, #0b0b0b 100%);
    z-index: 1;
}

/* 3. Container do Conteúdo */
.hero-content {
    position: relative;
    z-index: 2; /* Garante que o texto fique na frente do overlay */
    padding: 0 20px;
}



/* Opcional: Adicionar um subtítulo ou frase complementar abaixo do H1 se quiser */
.hero-content p {
    font-size: 1.2rem;
    color: #a0a0a0;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 1rem;
    font-weight: 600;
}








/* ==========================================================================
   CONCEITO DE ANIMAÇÃO (KEYFRAMES)
   ========================================================================== */
@keyframes surgirSuave {
    0% {
        opacity: 0;
        transform: translateY(30px); /* Começa um pouco mais abaixo */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Sobe suavemente para a posição original */
    }
}

/* Ajuste de responsividade para telas de celulares */
@media (max-width: 768px) {
    .fade-in-text {
        font-size: 3.5rem; /* Diminui o texto no celular para não quebrar a tela */
        letter-spacing: 3px;
    }
}



html {
    scroll-behavior: smooth;
}
/* Estado inicial do seu menu no layout */
.sub-navbar {
    width: 100%;
    background-color: #333;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* CLASSE CRUCIAL: Aplicada via JS quando o scroll atinge o menu */
.sub-navbar.fixado {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #1a1a1a; /* Fundo opcional mais escuro ao rolar */
}

/* Container do menu */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

/* Lista de links */
.nav-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* Links com o efeito da linha que corre */
.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 6px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #007bff; /* Cor da linha */
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* --- ADAPTAÇÃO PARA CELULAR (SEM HAMBÚRGUER) --- */
@media (max-width: 768px) {
    .nav-container {
        overflow-x: auto; /* Permite arrastar para o lado no celular */
        padding: 5px 15px;
        /* Remove a barra visual de rolagem em navegadores modernos */
        scrollbar-width: none; 
    }
    
    .nav-container::-webkit-scrollbar {
        display: none; /* Remove a barra visual no Chrome/Safari */
    }

    .sub-navbar .nav-links {
        justify-content: flex-start; /* Alinha à esquerda para permitir o arrasto */
    }
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-blue);
    transition: var(--transition);
}






body {
    background-color: #0b0b0b;
    color: var(--text-color);
    font-family: var(--font-premium);
    overflow-x: hidden;
}

/* --- ESTRUTURA DO HEADER (image_836249.jpg) --- */

.main-header {
    width: 100%;
    position: relative;
    z-index: 1000;
}

/* Barra preta superior */
.top-bar {
    background-color: var(--bg-header-top);
    display: flex;
    justify-content:center;
    align-items: center;
    padding: 0.5rem 5%;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-bar a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
}

.localization span {
    margin-left: 15px;
    cursor: pointer;
}

/* Área Vinho do Menu */
/* .navbar {
    background-color: var(--bg-header-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5% 0.5rem 5%;
} */

.search-btn, .nav-right-icons span {
    font-size: 1.2rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-color);
}

.logo-box {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 4px;
    border: 2px solid var(--text-color);
    padding: 2px 10px;
    text-align: center;
    display:  flow-root;
    position: relative;
    right: 136%;
}

/* Linha inferior de Links */
/* .sub-navbar {
    background-color: var(--bg-header-main);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   position: relative;
    
} */

/* ==========================================================================
   RESPONSIVIDADE PURA PARA TELEFONE (SEM ALTERAR O HTML)
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Faz a página rolar suavemente ao clicar nos links */
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s ease;
}

    /* Aumenta a área de toque do link para melhorar a usabilidade no telefone */
    
    .sub-navbar {
    background-color: #222;
    padding: 15px 0;
    width: 100%;
    
    /* Propriedades para o menu seguir o scroll */
    position: -webkit-sticky; /* Suporte para navegadores Safari antigos */
    position: sticky;
    top: 0;                   /* Gruda exatamente no topo da tela */
    z-index: 1000;            /* Garante que o menu fique por cima do conteúdo do site */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve para dar profundidade ao rolar */
}

/* Alinhamento dos itens da lista */
.sub-navbar .nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 0;
    padding: 0;
}

/* Estilização dos links */
.sub-navbar .nav-links a {
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

/* Mudança de cor ao passar o mouse */
.sub-navbar .nav-links a:hover {
    color: #00bcd4; /* Cor azul ciano de destaque */
}
 


.nav-links {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 1.5rem;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: color 0.3s, border-bottom 0.3s;
    padding-bottom: 4px;
}

.nav-links a:hover, .nav-links .active-link {
    /* color: var(--text-color);
    border-bottom: 2px solid var(--text-color); Efeito de linha embaixo do link ativo */
}



html {
    scroll-behavior: smooth; /* Faz a página rolar suavemente ao clicar nos links */
}
/* --- SEÇÃO HERO DE ALTO IMPACTO --- */

.hero-section {
    height: 80vh;
    position: relative;
    /* Para ficar idêntico, você usará a sua imagem de ação de fundo aqui */
    background: url('imagens/paceria\ 3.jpeg') center/cover no-repeat; 
    background-color: #151515; /* Fallback caso a imagem suma */
    display: flex;
    align-items: center;
    padding-left: 10%;
}

/* Camada escura/texturizada sobre a imagem para dar contraste ao texto */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-color);
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.7);
}



html {
    scroll-behavior: smooth;
}




.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image-wrapper {
    position: relative;
    height: 500px;
    background: linear-gradient(135deg, #1c1c1c, #2d0c11);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Efeito de moldura flutuante atrás da foto */
.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--bg-header-main);
    z-index: -1;
    border-radius: 4px;
}

.about-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.about-text p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* ==========================================================================
   5. DESIGN DA SEÇÃO: CATÁLOGO & GUITAR ACADEMY & MENTORIA (Grids de Cards)
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--bg-header-main);
}

.card-media-placeholder {
    height: 250px;
    background: linear-gradient(180deg, #1f1f1f, #111111);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.card-body {
    padding: 1.5rem;
}

.card-body h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.card-body p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.card-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1rem;
    display: block;
}

.btn-card {
    width: 100%;
    padding: 0.8rem;
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-card:hover {
    background-color: var(--text-color);
    color: var(--bg-body);
}



/* Linha inferior de Links */
.sub-navbar {
 background-color: var(--bg-header-main);
 padding-bottom: 1rem;
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
position: relative;
 
}




/* ==========================================================================
   DIAGRAMAÇÃO E DESIGN DE TEXTO PREMIUM
   ========================================================================== */

/* Seção geral que envolve os blocos de texto */
.text-section {
    padding: 6rem 5%; /* Dá um excelente espaçamento (respiro) acima e abaixo */
    display: flex;
    justify-content: center; /* Centraliza o bloco na tela */
    background-color: #0b0b0b;
}

/* Fundo ligeiramente alternado para quebrar a monotonia, se desejar */
.bg-alternativo {
    background-color: #111111;
}

/* O segredo da legibilidade: Limitar a largura máxima do texto */
.container-texto {
    max-width: 800px; /* Evita que a linha cruze a tela inteira como na imagem */
    width: 100%;
    text-align: left; /* Mantém o texto alinhado à esquerda, mas centralizado na tela */
}

/* Estilização dos Títulos Principais (SOBRE, CATÁLOGO, etc) */
.titulo-pagina {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #9b1111;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    position: relative;
}

/* Subtítulos (Afonso Gomes / Mensagens de apoio) */
.sub-nome {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff; /* O tom vinho refinado da identidade visual */
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.sub-info {
    font-size: 1.1rem;
    font-weight: 600;
    color: #a0a0a0;
    margin-bottom: 1.5rem;
}

/* Parágrafos de Texto */
.paragrafo-destaque {
    font-size: 1.1rem;
    line-height: 1.8; /* Aumenta o espaçamento vertical entre as linhas */
    color: #e0e0e0;
    margin-bottom: 1.2rem;
    text-align: justify; /* Distribui o texto harmoniosamente */
}

.paragrafo-comum {
    font-size: 1rem;
    line-height: 1.8;
    color: #a0a0a0; /* Um cinza elegante para não cansar a vista */
    margin-bottom: 1.5rem;
    text-align: justify;
}


/* ==========================================================================
   CSS GLOBAL PARA CORREÇÃO DE LAYOUT DE TEXTO (DRY COMPLIANT)
   ========================================================================== */

/* Regra para todas as seções de texto puro do site */
.secao-generica-texto {
    padding: 5rem 10%; /* 5rem em cima/baixo e 10% de recuo nas laterais para nunca colar na tela */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente o container */
    background-color: #0b0b0b; /* Fundo totalmente escuro igual ao print */
}

/* Cor de fundo ligeiramente alternada para criar contraste entre as seções */
.bg-alternativo {
    background-color: #121212; 
}

/* O Container que impede o texto de esticar infinitamente na tela */
.container-texto {
    max-width: 900px; /* Largura ideal para leitura ergonômica */
    width: 100%;
    text-align: left; /* Mantém o alinhamento à esquerda conforme seu print */
}

/* Estilização dos títulos (VÍDEOS, CONTATE-NOS) */
.titulo-pagina {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

/* Estilização das frases logo abaixo dos títulos */
.sub-info {
    font-size: 1.1rem;
    font-weight: 400;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
}

/* Resolução do espaçamento dos parágrafos longos */
.paragrafo-comum {
    font-size: 1rem;
    line-height: 1.8; /* Aumenta o espaço vertical entre as linhas em 180% */
    color: #a0a0a0; /* Tom cinza premium que não agride os olhos no escuro */
    text-align: justify; /* Deixa as bordas do bloco de texto alinhadas */
    margin-bottom: 2rem;
}



/* ==========================================================================
   ESTILIZAÇÃO DA GRID DE PARCERIAS
   ========================================================================== */

.grid-parcerias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Organiza os cards dinamicamente */
    gap: 20px; /* Distância entre os logos */
    margin-top: 2rem;
}

.card-parceiro {
    background-color: #1a1a1a;
    border: 1px solid #2d0a0e; /* Borda bem sutil com o tom vinho */
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card-parceiro img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%); /* Deixa as marcas em preto e branco combinando com o tema escuro */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse por cima do parceiro */
.card-parceiro:hover {
    transform: translateY(-5px);
    border-color: #4a0d14; /* Acelera a cor do vinho */
}

.card-parceiro:hover img {
    filter: grayscale(0%); /* Mostra a cor original da marca parceira */
    opacity: 1;
}




.botao-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    /* background-color: #25D366; */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.botao-whatsapp img {
    width: 35px;
    height: 35px;
}






/* ==========================================================================
   ESTILIZAÇÃO DOS BOTÕES DE CONTATO
   ========================================================================== */

/* Container para alinhar os botões */
.links-contato {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas como celulares */
    gap: 15px; /* Espaço entre cada botão */
    margin-top: 2rem;
}

/* Estilo Base dos Botões */
.btn-contato {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease; /* Transição suave na cor e no movimento */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Efeito ao passar o mouse (Hover Geral) */
.btn-contato:hover {
    transform: translateY(-3px); /* Faz o botão dar um leve salto para cima */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Cores específicas de cada marca com efeito hover dinâmico */

/* WhatsApp */
.btn-whatsapp {
    background-color: #25d366;
}
.btn-whatsapp:hover {
    background-color: #20ba5a;
}

/* Instagram */
.btn-instagram {
    /* Graduado elegante simulando as cores do Instagram */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
/* Instagram */
.btn-youtube {
    /* Graduado elegante simulando as cores do Instagram */
    background: linear-gradient(45deg, #ff0000 0%, #ff0000 25%, #dc2743 50%, #ff0000 75%, #ff0000 100%);
}
.btn-instagram:hover {
    filter: brightness(1.1); /* Dá um leve brilho no gradiente ao passar o mouse */
}

/* LinkedIn */
.btn-linkedin {
    background-color: #0077b5;
}
.btn-linkedin:hover {
    background-color: #006297;
}
.btn-youtube:hover {
    background-color: #006297;
}




/* Responsividade: Garante que os botões ocupem a largura total em telas de celulares */
@media (max-width: 500px) {
    .links-contato {
        flex-direction: column;
    }
    .btn-contato {
        justify-content: center;
        width: 100%;
    }
}








/* Responsividade rápida */
@media (max-width: 768px) {
    .top-bar { display: none; }
    .nav-links { flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
    .hero-content h1 { font-size: 2.5rem; }
}