@font-face {
    font-family: 'Cabin';
    src: url('../fonts/CabinCondensed-Medium.ttf');
}
@font-face {
    font-family: 'Merienda';
    src: url('../fonts/Merienda-Medium.ttf');
}
@font-face {
  font-family: 'Playfar';
  src: url('../fonts/PlayfairDisplay-Regular.ttf');
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 0px; /* Mantém espaço para a logo fixa */

}

h1 {
    color: #2c3e50;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    body {
        /* padding: 10px; Reduz padding lateral no mobile */
        padding-top: 0px; /* Mantém espaço para a logo fixa */
    }
}







.status-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
    text-align: center;
}


#result-container {
width: 100%;
background: white;
padding: 0; /* Removendo padding aqui */
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
min-height: 100px;
/* border: 1px solid #e0e0e0; */
display: flex; /* Habilita o layout de colunas */
}

.hino-content-wrapper {
display: flex;
width: 100%;
}







#main-content {
    padding: 10px;
    background-color: #ffffff;
background-image: 
  /* 1. Camada Superior: O "corte" circular no centro */
  radial-gradient(circle at center, transparent 0%, #ffffff30 65%, #FFF 90%),
  
  /* 2. Camada Inferior: O padrão de linhas original */
  linear-gradient(#eeeeee 1.2px, transparent 1.2px),
  linear-gradient(to right, #eeeeee 1.2px, #ffffff 1.2px);
  
background-size: 
  /* O radial precisa cobrir toda a área para não cortar as bordas */
  100% 100%, 
  /* O tamanho do padrão de linhas (mantido do seu código original) */
  70px 70px, 
  70px 70px;
  
background-position: 
  center, 
  center, 
  center;
}



@media (max-width: 768px) {
/* 1. Transforma o container principal em coluna única */
#result-container {
flex-direction: column;
border: none;
box-shadow: none;
background: transparent;
}

.hino-content-wrapper {
flex-direction: column;
}

#main-content {
    padding: 10px;
    z-index: 10;
    margin-top: -140px;
    background-image: unset;
    background-color: unset;
}


}








/* Lista de Áudios */
.audio-section {
position: relative;
z-index: 3;
width: 100%;
padding: 0 20px;
margin-top: 10px;
box-sizing: border-box;
}

.section-header h3 {
font-size: 1em;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
color: #444;
}

.title-info {
opacity: 0.3;
font-weight: 400;
}

.audio-list {
list-style: none;
padding: 0;
margin: 0;
}

.audio-list li {
display: flex;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.85em;
}





.play-button {
background: var(--accent-blue);
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 24px;
text-align: center;
margin-right: 10px;
cursor: pointer;
font-size: 14px;
/* Usaremos um ícone simples (►) ou um elemento icon */
transition: background 0.2s;
}
.play-button:hover {
background: var(--primary-blue);
}


.version-play-button {
display: inline-flex;
align-items: center;
justify-content: center;

/* Tamanho e Espaçamento */
min-width: 20px;
height: 20px;
padding: 3px 5px;
margin-right: 5px;

/* Cores e Bordas */
background: #f5f5F5;
color: #333;
border-radius: 6px;
border: 1px solid #d1d1d1;

/* Fonte */
font-family: 'JetBrains Mono', 'Inconsolata', monospace;
font-size: 0.9rem;
font-weight: bold;

/* Efeito 3D (A "mágica" está aqui) */
box-shadow:
0 4px 0 #bbb,                /* Profundidade da tecla */
0 5px 10px rgba(0,0,0,0.1);  /* Sombra projetada */

cursor: pointer;
user-select: none;
transition: all 0.1s ease;
}

/* Efeito de pressionar */
.version-play-button:hover {
content: '\►';
transform: translateY(3px);    /* Move a tecla para baixo */
box-shadow:
0 1px 0 #bbb,                /* Reduz a profundidade */
0 2px 5px rgba(0,0,0,0.2);
}


@media (max-width: 768px) {
.audio-section {
/* Suaviza a subida na animação se você tiver JS para isso */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Barra de arraste (visual) */
.sheet-handle {
width: 40px;
height: 5px;
background: #e0e0e0;
border-radius: 10px;
margin: 0 auto 15px auto;
}

.sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.section-header {
display: flex;
justify-content: flex-end;
}

.section-header h3 {
font-family: 'Inter', sans-serif;
font-size: 1.15rem;
font-weight: 700;
color: #eee;
margin: 10px 0;
padding: 5px 40px 5px 10px;
border: none;
background-color: #a777e3;
background: linear-gradient(304deg, #6e8efb10, #004fc270);
}

/* Esconde o atalho de teclado no mobile */
.title-info {
display: none;
}

.close-sheet {
background: #f0f0f0;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 22px;
color: #666;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.audio-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.audio-list li {
display: flex;
align-items: center;
height: 20px;
padding: 5px 0px;
background: #f8f9fa;
border: 1px solid #f0f0f0;
border-radius: 12px;
transition: all 0.2s ease;
cursor: pointer;
}

.audio-list li:active {
background: #f0f0f0;
transform: scale(0.98);
}

/* Transformando o número no botão de Play */
.version-play-button {
all: unset;
position: relative;
width: 35px;
height: 35px;
min-width: 35px;
background: linear-gradient(135deg, #6e8efb, #004fc2);
color: transparent !important;
border-radius: 50% !important;
margin-right: 15px !important;
margin-left: -5px !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgb(0 0 0 / 58%) !important;
border: none !important;
}

/* Ícone de Play (Índice visual) */
.version-play-button::before {
content: '';
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid white;
margin-left: 9px;
}
.version-play-button:hover {
transform: scale(1.05); 
}

.audio-list li span {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 1rem;
color: #333;
flex-grow: 1;
}

/* Efeito opcional de "Tocando" */
.audio-list li:hover span {
color: #6e8efb;
}
}




/* Ajuste na estrutura de exibição da letra */
.letra-hino-display {
display: block !important; /* Garante que a letra seja exibida normalmente */
}

/* Removendo estilos antigos de layout que podem conflitar com o flex */
.letra-hino {
 display: block;
}

.bloco {
line-height: 2.0em;
font-size: 1.1em;
display: flex;
}


/* Ocultar elementos de paginação se não estiverem sendo usados */
.pagination-controls {
display: none;
}


#letra {
/* box-shadow: #00000020 7px 4px 4px 0px; */
font-family: 'Cabin';
max-width: 70vw;
display: flex;
margin-left: 20px;
/* overflow-x: scroll; */
/* border: 1px dashed #CCC; */
padding: 10px;
/* background: #0f53ff10; */
background: #ffffff90;
/* border-bottom: #CCC 1px solid; */

}
.pagina {
margin-left: 15px;
}
.titulo-hino {
margin: 10px 10vw 10px 0 ;
margin-left: 10vw;
font-family: 'Merienda';
font-size: 1.2em;
}


.chord {
position: relative;
font-weight: bold;
}

.chord:before {
content: attr(data-chord); /* Pega o texto do data-chord */
position: absolute;
top: -10px;              /* Ajusta a cifra acima da letra */
left: 0;
font-size: 0.5em;
color: red;
white-space: nowrap;
font-size: 0.9em;
}



@media (max-width: 768px) {
/* 3. Ajusta a área da letra */
#letra {
max-width: 100%;
margin-left: 0;
padding: 15px;
border-radius: 8px;
flex-direction: column; /* Estrofes uma embaixo da outra */
overflow-x: hidden;

background-color: #ffffff;
background-image: 
  /* 1. Camada Superior: O "corte" circular no centro */
  radial-gradient(circle at center, transparent 0%, #ffffff30 65%, #FFF 90%),
  
  /* 2. Camada Inferior: O padrão de linhas original */
  linear-gradient(#eeeeee 0.8px, transparent 0.8px),
  linear-gradient(to right, #eeeeee 0.8px, #ffffff 0.8px);
  
background-size: 
  /* O radial precisa cobrir toda a área para não cortar as bordas */
  100% 100%, 
  /* O tamanho do padrão de linhas (mantido do seu código original) */
  70px 70px, 
  70px 70px;
  
background-position: 
  center, 
  center, 
  center;
}

.pagina {
margin-left: 0;
}

.titulo-hino {
margin: 15px 0;
text-align: center;
width: 100%;
font-size: 1.4em;
}


/* 5. Ajustes de legibilidade de texto no mobile */
.bloco {
font-size: 1.4em; /* Um pouco maior para leitura no celular */
line-height: 1.8em;
}

.chord:before {
font-size: 0.8em; /* Ajusta tamanho da cifra no mobile */
}

}

/* Ajuste fino para telas muito pequenas (iPhone SE, etc) */
@media (max-width: 400px) {
.audio-section {
padding: 0 10px;
}
}



.musicos-section {
  background-color: #f1f1f1;
  padding: 0px 20px 30px;
  border-radius: 15px;
}