.linha-separadora {
    /* Dimensões da linha */
    width: 100%; /* Largura da linha (100% da largura do elemento pai) */
    height: 10px; /* Espessura da linha */
    
    /* Cor da linha */
    background-color: #DAA520; /* Cor marrom (SaddleBrown) */
    
    /* Centralização */
    margin: 30px auto; /* Margem superior/inferior de 30px e centralização horizontal */
    
    /* Borda (opcional, pode ser usada para um efeito diferente) */
    border: none; /* Remove a borda padrão do <hr> ou do <div> */
    
    /* Sombra */
    box-shadow: 0 10px 4px rgba(0, 0, 0, 0); /* Sombra suave para a linha */
    
    /* Arredondamento de bordas (opcional, para um visual mais suave) */
    border-radius: 5px; /* Arredonda as pontas da linha */
	}
	
.linha-separadora2 {
    /* Formato Cilíndrico (aspecto de pílula) */
    width: 80%; /* Largura da linha (80% do elemento pai) */
    height: 14px; /* Altura da linha, para dar um volume maior e permitir o efeito cilíndrico */
    border-radius: 7px; /* Metade da altura (14px / 2 = 7px) para criar as extremidades arredondadas, dando o aspecto de pílula/cilindro */
    
    /* Cor e Gradiente para o efeito de volume na superfície */
    /* Um gradiente linear simula a iluminação em uma superfície curva, contribuindo para o aspecto cilíndrico */
    background: linear-gradient(to right, #7a3a0e, #8B4513, #7a3a0e); 
    /* Marrom escuro (#7a3a0e) nas bordas, marrom médio (#8B4513) no centro. 
       Isso cria a ilusão de que a luz está batendo no centro e as bordas estão na sombra, dando volume. */
    
    /* Centralização e espaçamento */
    margin: 50px auto; /* Margem superior/inferior aumentada para acomodar a sombra destacada, e centralização horizontal */
    
    /* Garante que não há bordas padrão no div */
    border: none;
    
    /* Sombra Nítida e Bem Destacada da Linha */
    box-shadow: 
        0 20px 0px 2px rgba(0, 0, 0, 0.7); 
        /* Explicação dos valores:
           - 0: Deslocamento horizontal da sombra (nenhum).
           - 20px: Deslocamento vertical da sombra. Um valor maior faz a sombra parecer "separada" e "flutuando" abaixo da linha.
           - 0px: Raio de desfoque da sombra. Definir como 0px torna a sombra perfeitamente nítida.
           - 10px: Raio de propagação da sombra. Um valor positivo faz a sombra se espalhar além do tamanho do elemento, tornando-a "bem destacada".
           - rgba(0, 0, 0, 0.7): Cor da sombra. Preto com 70% de opacidade, o que a torna forte e visível.
        */
}

.linha-separadora3 {
    /* Formato Cilíndrico Metálico (simulando uma barra de metal) */
    width: 90%; /* Largura da linha (ajuste conforme necessário) */
    height: 8px; /* Altura da linha para dar mais 'corpo' e permitir um efeito cilíndrico pronunciado */
    border-radius: 4px; /* Exatamente metade da altura (18px / 2 = 9px) para criar as extremidades perfeitamente arredondadas, dando o aspecto de pílula/cilindro */
    
    /* Cores e Gradiente para o efeito de volume e aspecto metálico bronze/dourado */
    /* Este gradiente simula a iluminação em uma superfície curva de metal polido, com um brilho central */
    background: linear-gradient(to right, 
        #a0522d 0%,    /* Sienna - Tom base de bronze/marrom escuro na borda esquerda */
        #cd853f 25%,   /* Peru - Tom intermediário de bronze */
        #daa520 50%,   /* Goldenrod - Tom mais claro de dourado/bronze para o ponto de brilho central */
        #cd853f 75%,   /* Peru - Tom intermediário de bronze */
        #a0522d 100%   /* Sienna - Tom base de bronze/marrom escuro na borda direita */
    ); 
    
    /* Centralização e espaçamento */
    margin: 20px auto; /* Margem superior/inferior generosa para acomodar a sombra bem destacada, e centralização horizontal */
    
    border: none; /* Garante que não há bordas padrão no div */
    
    /* Sombra Nítida e Bem Destacada da Linha (como se estivesse flutuando) */
    box-shadow: 
        0 90px 0px 1px rgba(0, 0, 0, 0.8); 
        /* Explicação detalhada dos valores da sombra:
           - 0: Deslocamento horizontal (offset-x) da sombra - a sombra fica alinhada horizontalmente com a linha.
           - (45px-> 90px): Deslocamento vertical (offset-y) da sombra - um valor grande para que a sombra apareça bem abaixo da linha, criando a ilusão de que a linha está flutuando alto.
           - 0px: Raio de desfoque (blur-radius) da sombra - zero pixels torna a sombra perfeitamente nítida, sem borrado.
           - (25px -> 1px): Raio de propagação (spread-radius) da sombra - um valor positivo faz a sombra se expandir além do tamanho do elemento, tornando-a visivelmente maior e mais proeminente.
           - rgba(0, 0, 0, 0.8): Cor da sombra - preto com 80% de opacidade, resultando em uma sombra bem escura e marcante.
        */
}

        .cylindrical-separator {
            width: 100%;
            height: 12px;
            margin: 5px auto 5px auto;
            background: linear-gradient(to bottom, 
                #f5d770 0%,     /* amarelo dourado claro no topo */
                #e6c659 15%,    /* dourado médio */
                #d4b342 30%,    /* dourado mais escuro */
                #c7a535 50%,    /* centro escuro para profundidade */
                #d4b342 70%,    /* clareando */
                #e6c659 85%,    /* dourado médio */
                #f5d770 100%    /* amarelo dourado claro na base */
            );
            border-radius: 50px;
            border: 1px solid #b8956f; /* Borda sutil para definição */
            box-shadow: 
                0 15px 25px rgba(0, 0, 0, 0.35),     /* sombra principal bem distante e nítida */
                0 20px 35px rgba(0, 0, 0, 0.2),      /* sombra secundária ainda mais distante */
                0 5px 10px rgba(0, 0, 0, 0.25),      /* sombra próxima para contraste */
                inset 0 3px 6px rgba(255, 255, 255, 0.6), /* highlight superior forte */
                inset 0 -3px 6px rgba(0, 0, 0, 0.2), /* sombra interna inferior */
                inset 0 1px 0 rgba(255, 255, 255, 0.8); /* brilho no topo */
        }