:root{
    /*==============================================================================================
    PALETA DE CORES
    ==============================================================================================*/
    --color-primary:#feba12;
    --color-secondary:#6bafe7;
    --color-accent:#6bafe7;
    --color-green:#27AE60;
    --color-black:#000000;
    --color-text:#F5F5F5;
    --color-text-light:#D9D9D9;
    --color-glass:rgba(255,255,255,.15);
    --color-glass-border:rgba(255,255,255,.20);
    --overlay:rgba(0,0,0,.45);
    /*==============================================================================================
    FONTES - TAMANHOS DE FONTES - TIPOGRAFIA
    ==============================================================================================*/
    --font-title:'Montserrat',sans-serif;
    --font-text:'Montserrat',sans-serif;
    --font-size-h1:3rem;
    --font-size-h2:2rem;
    --font-size-h3:1.5rem;
    --font-size-text:1rem;
    --font-size-small:.888rem;
    --font-size-button:1rem;
    /*==============================================================================================
    TAMANHOS - ALTURA DO HEADER FIXO
    ==============================================================================================*/
    --header-height:92px;
    --container-width:1450px;
    --section-padding:30px;
    /*==============================================================================================
    ESPAÇAMENTOS
    ==============================================================================================*/
    --space-xs:.12rem;
    --space-sm:.12rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-xxl:3rem;
    /*==============================================================================================
    BORDAS
    ==============================================================================================*/
    --radius-xs:5px;
    --radius-sm:10px;
    --radius-md:15px;
    --radius-lg:25px;
    --radius-xl:50px;
    /*==============================================================================================
    SOMBRAS
    ==============================================================================================*/
    --shadow-sm:0 5px 15px rgba(0,0,0,.15);
    --shadow-md:0 10px 20px rgba(0,0,0,.20);
    --shadow-lg:0 15px 25px rgba(0,0,0,.25);
    /*==============================================================================================
    TRANSIÇÕES
    ==============================================================================================*/
    --transition-fast:.20s;
    --transition-normal:.35s;
    --transition-slow:.60s;
/*==================================================================================================
• PLANO DE FUNDO
==================================================================================================*/
#background-fixed{ background-image:url("../assets/background.jpg");}

/*==================================================================================================
02 • RESET
==================================================================================================*/
*{ margin:5;
   padding:5;
   box-sizing:border-box;}
html{scroll-behavior:smooth;}

/*==================================================================================================
03 • TIPOGRAFIA GERAL
==================================================================================================*/
body{font-family:var(--font-text); font-size:var(--font-size-text); color:var(--color-text);}
h1{font-family:var(--font-title); font-size:var(--font-size-h1);}
h2{font-family:var(--font-title); font-size:var(--font-size-h2);}
h3{font-family:var(--font-title); font-size:var(--font-size-h3);}
p{font-size:var(--font-size-text);}
small{font-size:var(--font-size-small);}

/*==================================================================================================
03 • LINKS
==================================================================================================*/
a{color:inherit; text-decoration:none;}
img{display:block; max-width:80%; max-height: 600px;}
button{
    border:none;
    outline:none;
    background:none;
    cursor:pointer;
    font-family:inherit;}
input,
textarea,
select{
    font-family:inherit;
    outline:none;}

/*==================================================================================================
04 • BACKGROUND FIXO
==================================================================================================*/
#background-fixed{
    position:fixed;
    inset:0;
    z-index:-2;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed}


/*==================================================================================================
05 • OVERLAY
==================================================================================================*/
#background-fixed::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--overlay);}

/*==================================================================================================
06 • CONTEÚDO
==================================================================================================*/
#page-content{
    position:relative;
    z-index:10;
    width:100%;}

/*==================================================================================================
07 • CONTAINER
==================================================================================================*/
.container{
    width:min(95%,var(--container-width));
    margin:auto;}

/*==================================================================================================
08 • SECTION
==================================================================================================*/
.page-section{padding:var(--section-padding) 0;}

/*==================================================================================================
09 • SECTION HEADER / SECTION IMAGES / IMAGENS DAS SEÇÕES / CENTRALIZAÇÃO DE ELEMENTOS
==================================================================================================*/
.section-content{
    display:flex;
    justify-content:center;
    text-align:center;
    align-items:center;
    line-height:2.0;
    margin:40px 0;}}
.section-header{
    text-align:center;
    align-items:center;
    margin-bottom:var(--space-xs);}
.section-header 
h2{ margin-bottom:var(--space-md); line-height:1.0;}
.section-header p{
    max-width:768px;
    margin:auto;
    align-items:center;
    line-height:1.0;
    margin-bottom:24px;
    color:var(--color-text-light);}
.section-image{
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:1200px;
    margin:36px 7;}
.section-banner{
    max-width:95%;
    max-width:800px;
    height:auto;
    display:block;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:transform .30s ease, box-shadow .30s ease;}
.section-banner:hover{
    transform:scale(1.07);
    box-shadow:0 7px 40px rgba(0,0,0,.35);}



/*==================================================================================================
CARROSSEL
==================================================================================================*/
#information-carousel{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-lg);}
#information-carousel .section-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-lg);}
#information-carousel .section-image{margin:0;}
#information-image{display:block;}
.carousel-arrow{
    max-width:72px;
    max-width:72px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:transparent;
    color:var(--color-text);
    font-size:var(--font-size-h1);
    transition:.25s; }

.carousel-arrow:hover{ transform:scale(1.20); color:var(--color-secondary);}
#information-title{font-size:var(--font-size-h3); text-align:center; }
#information-description{font-size:var(--font-size-text);text-align:center; line-height:1.8; color:var(--color-text-light);}

/*==================================================================================================
10 • UTILITÁRIOS
==================================================================================================*/
.hidden{display:none!important;}
.active{opacity:1!important;}
.selected{border-color:var(--color-accent)!important;}
.text-center{text-align:center;}
.flex{display:flex;}
.grid{display:grid;}
.center{display:flex; justify-content:center; align-items:center;}
.glass{background:var(--color-glass);backdrop-filter:blur(14px); border:2px solid var(--color-glass-border);}
.shadow{box-shadow:var(--shadow-md);}
.radius{border-radius:var(--radius-lg);}
.mt-xs{margin-top:var(--space-xs);}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mt-xl{margin-top:var(--space-xl);}
.mb-xs{margin-bottom:var(--space-xs);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.mb-xl{margin-bottom:var(--space-xl);}

/*==================================================================================================
11 • SCROLLBAR
==================================================================================================*/
::-webkit-scrollbar{ width:15px;}
::-webkit-scrollbar-track{ background:#161616;}
::-webkit-scrollbar-thumb{ background:var(--color-accent);    border-radius:30px;}
::-webkit-scrollbar-thumb:hover{ background:var(--color-primary);}

/*==================================================================================================
12 • HEADER
==================================================================================================*/
#header-main{
    position:fixed;
    top:0px;
    left:0;
    width:100%;
    height:var(--header-height);
    display:flex;
    align-items:center;
    z-index:9999;
    background:rgba(18,18,30,.30);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:3px solid rgba(255,255,255,.08);
    transition:all var(--transition-normal); }

#header-main .container{
    display:flex;
    justify-content:space-between;
    align-items:center;}

/*==================================================================================================
13 • LOGOTIPO HEADER FIXO
==================================================================================================*/
#header-logo{display:flex; align-items:center; gap:var(--space-md); flex-shrink:0;}
#header-logo img{ width:auto; height:72px; object-fit:contain; display:block}
#header-logo span{ color: var(--color-primary); font-family:var(--font-title); font-size:var(--font-size-small); line-height:1.5;}

/*==================================================================================================
14 • MENU DESKTOP
==================================================================================================*/
#header-navigation ul{
    display:flex;
    white-space:nowrap;
    align-items:center;
    list-style:none;
    gap:var(--space-xl); }

.menu-link{
    display:flex;
    white-space:nowrap;
    position:relative;
    padding:10px 2px;
    font-weight:700;
    color:var(--color-text);
    transition:all var(--transition-fast);}

.menu-link:hover{ color:var(--color-accent);
}

/*==================================================================================================
15 • MENU ATIVO (SCROLL SPY)
==================================================================================================*/
.menu-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:3px;
    border-radius:10px;
    background:var(--color-accent);
    transition:all var(--transition-normal);}

.menu-link:hover::after{width:100%;}
.menu-link.active{color:var(--color-accent);}
.menu-link.active::after{width:100%;}

/*==================================================================================================
16 • MENU MOBILE
==================================================================================================*/
#mobile-menu-button{ display:none; color:var(--color-text); font-size:var(--font-size-h3);}
#mobile-navigation{
    position:fixed;
    top:var(--header-height);
    right:-100%;
    width:280px;
    height:calc(100vh - var(--header-height));
    display:flex;
    flex-direction:column;
    gap:var(--space-lg);
    padding:var(--space-xl);
    background:rgba(16,16,30,.95);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    transition:right var(--transition-normal);
    z-index:9998;}

#mobile-navigation a{transition:color var(--transition-fast);}
#mobile-navigation a:hover{ color:var(--color-accent);}

/*==================================================================================================
17 • HERO - PÁGINA INICIAL - HERO BUTTONS
==================================================================================================*/
.hero{
    min-height:72vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;}
#hero-title{
    font-family:var(--font-title);
    font-size:var(--font-size-h1);
    margin-bottom:var(--space-lg);
    color:var(--color-primary);
    text-shadow:0 5px 15px rgba(0,0,0,.35);}
#hero-description{
    font-size:var(--font-size-text);
    color:var(--color-text-light);
    margin-bottom:var(--space-xl);}
#hero-logo{margin-bottom:var(--space-xl);}
#hero-buttons{
    display:flex;
    justify-content:center;
    color: var(--color-accent);
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-lg);}

/*==================================================================================================
BOTÕES - HOVER DOS BOTÕES
==================================================================================================*/
.button{display:inline-flex; align-items:center; justify-content:center; gap:.8rem; padding:15px 30px; border-radius:var(--radius-xl); transition:all var(--transition-normal); box-shadow:var(--shadow-md); }
.button i{font-size:var(--font-size-button)}
.button.whatsapp{background:var(--color-green); max-height: 64px; color:white; }
.button.primary {background:var(--color-secondary); color:var(--color-text);}
.button.secondary{background:rgba(255,255,255,.12); color:var(--color-text); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12);}
.button:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); filter:brightness(1.10);}
.button:active{transform:translateY(0);}

/*==================================================================================================
CARDS DE PARTICIPAÇÃO
==================================================================================================*/
#attendance-selector{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:var(--space-xl);
    margin-top:var(--space-xl);
    margin-bottom:var(--space-xxl);}

.attendance-card{
    position:relative;
    padding:32px;
    border-radius:var(--radius-lg);
    cursor:pointer;
    text-align:center;
    background:var(--color-glass);
    backdrop-filter:blur(14px);
    border:2px solid transparent;
    box-shadow:var(--shadow-md);
    transition:all var(--transition-normal);}

.attendance-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.20);
    box-shadow:var(--shadow-lg);}

.attendance-card.active{
    background:rgba(97, 97, 99, 0.05);
    border:7px solid var(--color-secondary);
    border-color:var(--color-text);
    transform:translateY(-15px);}

.attendance-card img{
    max-width:164px;
    margin:auto;
    margin-bottom:var(--space-lg);}

.attendance-card h3{ margin-bottom:var(--space-md);}

.attendance-card p{
    line-height:2.0;
    color:var(--color-text-light);}


/*==================================================================================================
22 • FORMULÁRIO - Apenas define a aparência do formulário e não controla se o formulário aparece ou não (Iniciará oculto).
==================================================================================================*/
#participant-form{
    display:none;
    background:var(--color-glass);
    backdrop-filter:blur(18px);
    border:1px solid var(--color-glass-border);
    border-radius:var(--radius-lg);
    padding:40px;
    box-shadow:var(--shadow-lg);}


/*==================================================================================================
23 • FIELDSETS - Agrupa visual e semanticamente um conjunto de campos relacionados de um formulário.
==================================================================================================*/
#participant-form fieldset{
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--radius-md);
    padding:24px;
    margin-bottom:var(--space-xl);}

#participant-form legend{
    padding:0 10px;
    font-family:var(--font-title);
    font-weight:700;}

/*==================================================================================================
24 • INPUT GROUP
==================================================================================================*/
.input-group{
    display:flex;
    flex-direction:column;
    margin-bottom:var(--space-lg);
}
.input-group label{
    margin-bottom:10px;
    font-weight:600;
}

/*==================================================================================================
25 • INPUTS
==================================================================================================*/
.input-group input,
.input-group textarea,
.input-group select{
    width:100%;
    padding:15px 18px;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:var(--color-text);
    transition:all var(--transition-fast);
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 7px rgba(91,46,255,.25);
}

/*==================================================================================================
26 • PLACEHOLDER
==================================================================================================*/
::placeholder{color:rgba(255,255,255,.55);}


/*==================================================================================================
27 • CHECKBOX / RADIO
==================================================================================================*/
.checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
    cursor:pointer;
}
input[type="checkbox"],
input[type="radio"]{
    width:20px;
    height:20px;
    accent-color:var(--color-primary);
}



/*==================================================================================================
28 • BLOCO DE MÚSICAS
#music-list → Contêiner que agrupa todos os campos de músicas do formulário.
.music-item → Bloco individual de cada música (URL + prévia).
.music-item label → Estiliza o texto (rótulo) de cada campo de música.
.music-item input → Estiliza o campo de entrada da URL da música.
.music-item textarea → Estiliza uma área de texto dentro do bloco de música (caso exista).
.music-item select → Estiliza uma lista suspensa dentro do bloco de música (caso exista).
.music-item input:focus → Aplica o estilo ao campo de URL quando ele recebe o foco.
.music-item textarea:focus → Aplica o estilo à área de texto quando ela recebe o foco.
.music-item select:focus → Aplica o estilo à lista suspensa quando ela recebe o foco.
==================================================================================================*/
#music-list{display:flex;   flex-direction:column;    gap:12px;}
.music-item{display:flex;   flex-direction:column;    gap:12px;   margin-bottom:var(--space-lg);}
.music-item label{margin-bottom:10px; font-weight:600;}
.music-item input,
.music-item textarea,
.music-item select,
#music-search-input{
    width:100%;
    padding:12px 10px;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:var(--color-text);
    transition:all var(--transition-fast);}
.music-item input:focus,
.music-item textarea:focus,
.music-item select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 7px rgba(91,46,255,.25);}

/*==================================================================================================
29 • PREVIEW DO YOUTUBE / BUSCAS DO YOUTUBE
==================================================================================================*/
.music-preview{
    display:none;
    gap:16px;
    align-items:center;
    padding:15px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.08);}

.music-preview img{
    width:128px;
    border-radius:var(--radius-sm);}

.music-result{
    display:flex;
    gap:16px;
    align-items:center;
    padding:14px;
    cursor:pointer;
    border-radius:12px;
    transition:.25s;}

.music-result:hover{background:rgba(255,255,255,.08);}

.music-result img{ width:96px;    border-radius:10px;}

.music-result strong{display:block;}

.music-result small{opacity:.8;}

#music-search-area{
    display:none;
    margin:20px 0;
}

/*==================================================================================================
30 • PREVIEW DA FOTO - FORMULÁRIO
==================================================================================================*/
#photo-upload-area{margin-top:var(--space-lg);}
#photo-upload{
    width:100%;
    padding:18px;
    border:0px dashed rgba(255,255,255,.25);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.05);}

#photo-preview-area{
    display:none;
    margin:20px 0;
    text-align:center;}

#photo-preview{
    width:72px;
    height:72px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;}

#photo-preview img{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid var(--color-accent);
    box-shadow:var(--shadow-md);}

#photo-remove{
    display:none;
    margin-top:18px;}

#submit-area{margin-top:32px;  text-align:center;}
#submit-form{max-width:480px;  width:100%;}

/*==================================================================================================
31 • AVATAR / FOTO / ÁREAS
==================================================================================================*/
#selected-avatar{
    margin-top:var(--space-lg);
    margin-bottom:var(--space-lg);
    text-align:center;}

#avatar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:16px;}

#avatar-grid img{
    width:100%;
    cursor:pointer;
    border-radius:var(--radius-md);
    border:3px solid transparent;
    transition:all var(--transition-fast);}

#avatar-grid img:hover{ transform:scale(1.03);}

#avatar-grid img.selected{
    border-color:var(--color-accent);
    box-shadow:var(--shadow-md);}

#photo-avatar-area,
#photo-camera-area,
#photo-upload-area{ display:none; margin-top:var(--space-lg);}

/*==================================================================================================
32 • BOTÃO ENVIAR
==================================================================================================*/
#submit-form{
    justify-content:center;
    width:100%;
    margin-top:var(--space-xl);
    font-size:var(--font-size-button) }

/*==================================================================================================
33 • TABELAS

table → Define a aparência e comportamento da tabela inteira.
thead → Representa o cabeçalho da tabela (linha dos títulos).
th → Define cada célula do cabeçalho (Foto, Nome, Música 1...).
tbody → Contém todas as linhas de dados carregadas do banco.
tbody tr → Define o estilo de cada linha de participantes da tabela.
td → Define cada célula de dados da linha (foto, nome e músicas).
==================================================================================================*/
.table-container{ overflow-x:auto; border-radius:var(--radius-lg); background:var(--color-glass); backdrop-filter:blur(10px); border:3px solid var(--color-glass-border); box-shadow:var(--shadow-md);}
table{width:100%; border-collapse:separate; border-spacing:1px 5px;}
thead{background:rgba(255,255,255,.08);}
th{ padding:12px; font-size:var(--font-size-small);  font-family:var(--font-title); text-align:left;}
th:first-child, td:first-child{padding-left:12px;} /* Primeira coluna */
th:last-child, td:last-child{padding-right:12px;} /* Última coluna */
td{padding:20px 20px; border-top:7px solid rgba(255,255,255,.08); vertical-align:middle;}
td img{ width:50px; height:50px; object-fit:cover; border-radius:90%;}
tbody tr{transition:background var(--transition-fast);}
tbody tr:hover{background:rgba(255,255,255,.06);}

/*==================================================================================================
34 • CONTADOR / TÍTULO DAS TABELAS
==================================================================================================*/
#playlist-counter{
    display:flex;
    justify-content:center;
    gap:var(--space-xl);
    margin-bottom:var(--space-xl);
    flex-wrap:wrap;}
.counter-card{
    min-width:180px;
    text-align:center;
    padding:12px;
    border-radius:var(--radius-lg);
    background:var(--color-glass);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow-md);}
.counter-card span{ display:block; font-family:var(--font-title); font-size:var(--font-size-text); color:var(--color-accent);}
.counter-card small{ color:var(--color-text-light);}


/*==================================================================================================
35 • EMPTY STATE
==================================================================================================*/
.empty-state{display:none; text-align:center; padding:64px 24px;}
.empty-state i{color:var(--color-accent); margin-bottom:18px;}
.empty-state h3{margin-bottom:18px;}

/*==================================================================================================
36 • MODAL - Janela sobreposta à página que exibe um conteúdo temporário, como a galeria de avatares.
==================================================================================================*/
.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.70);
    z-index:99999;}

.modal-content{
    width:min(95%,900px);
    max-height:90vh;
    overflow:auto;
    padding:24px;
    border-radius:var(--radius-lg);
    background:rgba(25,25,35,.95);
    backdrop-filter:blur(20px);}

/*==================================================================================================
37 • TOAST
==================================================================================================*/
#toast-container{
    position:fixed;
    right:25px;
    bottom:25px;
    display:flex;
    flex-direction:column;
    gap:18px;
    z-index:999999;}

.toast{
    padding:20px 24px;
    border-radius:var(--radius-md);
    background:rgba(30,30,40,.96);
    backdrop-filter:blur(14px);
    box-shadow:var(--shadow-lg);
    animation:toastIn .35s ease;}


/*==================================================================================================
38 • FOOTER
==================================================================================================*/
#footer-main{padding:64px 0;text-align:center;}
#footer-main h3{margin-bottom:12px;}
#footer-main p{color:var(--color-text-light); margin-bottom:20px;}
#footer-logo{ max-width:640px; max-height:240px; margin:auto; margin-bottom:20px;}

/*==================================================================================================
39 • ANIMAÇÕES
==================================================================================================*/
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(40px); }
    to{ opacity:1; transform:none; }}

@keyframes toastIn{
    from{ opacity:0; transform:translateX(80px); }
    to{ opacity:1; transform:none;}}

/*==================================================================================================
40 • RESPONSIVIDADE
==================================================================================================*/
@media(max-width:1280px){
#header-navigation{ display:none; }
#mobile-menu-button{ display:block; }}
@media(max-width:768px){
:root{--section-padding:72px; }
#hero-title{font-size:var(--font-title);  }
#hero-description{font-size:var(--font-size-text);   }
#participant-form{padding:24px;    }
th, td{padding:12px; font-size:var(--font-size-text);    }}
@media(max-width:800px){
#header-logo span{display:none;} .button{ width:100%; } #hero-buttons{ flex-direction:column; } .counter-card{ width:100%; }
#toast-container{left:32px; right:32px; bottom:32px; } }
#submit-area{margin-top:32px; text-align:center;}
#submit-form{max-width:480px; width:100%;}