@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cor-amarela: #FFA600DE;
    --cor-laranja: #FF5E55;
    --cor-rosa: #FF69B4;
    --cor-roxa: #5B00B6;
    --cor-vermelho: #FF4D64;
    --cor-azul: #1C74F5ff;
    --cor-verde: #33CC66;
    --cor-verdeAgua: #33CC99;
}

/* Color*/
.cor-amarela {
    color: var(--cor-amarela);
}

.cor-laranja {
    color: var(--cor-laranja);
}

.cor-rosa {
    color: var(--cor-rosa);
}

.cor-roxa {
    color: var(--cor-roxa);
}

.cor-verde {
    color: var(--cor-verde);
}

.cor-verdeAgua {
    color: var(--cor-verdeAgua);
}

.cor-azul {
    color: var(--cor-azul);
}

.bg-amarela {
    border-radius: 5px;
    color: #fff;
    background-color: var(--cor-amarela);
}

.bg-laranja {
    border-radius: 5px;
    color: #fff;
    background-color: var(--cor-laranja);
}

.bg-rosa {
    border-radius: 5px;
    color: #fff;
    background-color: var(--cor-rosa);
}

.bg-roxa {
    border-radius: 5px;
    color: #fff;
    background-color: var(--cor-roxa);
}

.bg-azul {
    border-radius: 5px;
    color: #fff;
    background-color: var(--cor-azul);
}

.bg-verde {
    border-radius: 5px;
    color: #fff;
    background-color: var(--cor-verde);
}

.fill-amarela {
    fill: var(--cor-amarela);
}

.fill-laranja {
    fill: var(--cor-laranja);
}

.fill-rosa {
    fill: var(--cor-rosa);
}

.fill-roxa {
    fill: #5b00b6;
}

.fill-verde {
    fill: var(--cor-verde);
}

.fill-verdeAgua {
    fill: var(--cor-verdeAgua);
}

.fill-azul {
    fill: var(--cor-azul);
}

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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #59005B, #CE009E);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #E50EB0, #8B3DCF);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #FF5E55, #E50EB0);
}

body {
    background: linear-gradient(to bottom, #59005B, #CE009E);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.schedule-card {
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    margin: auto;
    font-family: Arial, sans-serif;
}

.date-banner {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-banner svg {
    width: 80%;
    height: auto;
    display: block;
}

.banner-padrao {
    position: relative;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.banner-28 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='auto' viewBox='0 0 1200 200' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E .fil0 %7B fill: %23E50EB0; fill-rule: nonzero; %7D %3C/style%3E%3C/defs%3E%3Cg id='Camada_x0020_1'%3E%3Cpath class='fil0' d='M10.09 79.3l280.12 -12.95c0.63,-0.03 1.17,0 1.79,0.11l139.07 23.7c0.68,0.12 1.27,0.15 1.96,0.1l305.46 -20.57c0.49,-0.03 0.9,-0.02 1.39,0.03l227.51 22.63c0.77,0.08 1.44,0.06 2.2,-0.07l212.64 -35.66c2.31,-0.38 4.44,0.13 6.35,1.52 1.91,1.4 3.06,3.3 3.45,5.66l5.85 35.89c0.77,4.72 -2.36,9.19 -6.98,9.97l-219.02 36.72c-0.76,0.13 -1.43,0.15 -2.2,0.07l-229.76 -22.86c-0.48,-0.04 -0.9,-0.05 -1.38,-0.02l-307.72 20.72c-0.68,0.05 -1.28,0.02 -1.96,-0.1l-139.86 -23.84c-0.62,-0.1 -1.16,-0.14 -1.79,-0.11l-274.61 12.7c-2.34,0.11 -4.4,-0.65 -6.14,-2.27 -1.74,-1.62 -2.67,-3.64 -2.78,-6.03l-1.67 -36.29c-0.22,-4.77 3.41,-8.83 8.08,-9.05z'/%3E%3C/g%3E%3C/svg%3E");
}

.banner-01 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='auto' viewBox='0 0 1200 200' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E .fil0 %7B fill: %235b00b6; fill-rule: nonzero; %7D %3C/style%3E%3C/defs%3E%3Cg id='Camada_x0020_1'%3E%3Cpath class='fil0' d='M1188.91 114.7l-280.12 12.95c-0.63,0.03 -1.17,-0.01 -1.79,-0.11l-139.07 -23.7c-0.68,-0.12 -1.27,-0.15 -1.96,-0.1l-305.46 20.56c-0.48,0.04 -0.9,0.03 -1.39,-0.02l-227.5 -22.63c-0.78,-0.08 -1.44,-0.06 -2.21,0.07l-212.63 35.65c-2.32,0.39 -4.44,-0.12 -6.35,-1.52 -1.91,-1.39 -3.07,-3.29 -3.46,-5.65l-5.85 -35.89c-0.77,-4.72 2.36,-9.2 6.98,-9.97l219.02 -36.72c0.76,-0.13 1.43,-0.15 2.2,-0.08l229.76 22.86c0.48,0.05 0.9,0.06 1.38,0.03l307.72 -20.72c0.69,-0.05 1.28,-0.02 1.96,0.1l139.87 23.83c0.62,0.11 1.15,0.14 1.78,0.11l274.61 -12.69c2.35,-0.11 4.4,0.65 6.14,2.27 1.74,1.62 2.67,3.64 2.78,6.03l1.67 36.29c0.22,4.77 -3.41,8.83 -8.08,9.05z'/%3E%3C/g%3E%3C/svg%3E");
}

.banner-02 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='auto' viewBox='0 0 1200 200' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E .fil0 %7B fill: %23FF4D64; fill-rule: nonzero; %7D %3C/style%3E%3C/defs%3E%3Cg id='Camada_x0020_1'%3E%3Cpath class='fil0' d='M10.09 79.3l280.12 -12.95c0.63,-0.03 1.17,0 1.79,0.11l139.07 23.7c0.68,0.12 1.27,0.15 1.96,0.1l305.46 -20.57c0.49,-0.03 0.9,-0.02 1.39,0.03l227.51 22.63c0.77,0.08 1.44,0.06 2.2,-0.07l212.64 -35.66c2.31,-0.38 4.44,0.13 6.35,1.52 1.91,1.4 3.06,3.3 3.45,5.66l5.85 35.89c0.77,4.72 -2.36,9.19 -6.98,9.97l-219.02 36.72c-0.76,0.13 -1.43,0.15 -2.2,0.07l-229.76 -22.86c-0.48,-0.04 -0.9,-0.05 -1.38,-0.02l-307.72 20.72c-0.68,0.05 -1.28,0.02 -1.96,-0.1l-139.86 -23.84c-0.62,-0.1 -1.16,-0.14 -1.79,-0.11l-274.61 12.7c-2.34,0.11 -4.4,-0.65 -6.14,-2.27 -1.74,-1.62 -2.67,-3.64 -2.78,-6.03l-1.67 -36.29c-0.22,-4.77 3.41,-8.83 8.08,-9.05z'/%3E%3C/g%3E%3C/svg%3E");
}

.banner-03 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='auto' viewBox='0 0 1200 200' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E .fil0 %7B fill: %23FFA600DE; fill-rule: nonzero; %7D %3C/style%3E%3C/defs%3E%3Cg id='Camada_x0020_1'%3E%3Cpath class='fil0' d='M1188.91 114.7l-280.12 12.95c-0.63,0.03 -1.17,-0.01 -1.79,-0.11l-139.07 -23.7c-0.68,-0.12 -1.27,-0.15 -1.96,-0.1l-305.46 20.56c-0.48,0.04 -0.9,0.03 -1.39,-0.02l-227.5 -22.63c-0.78,-0.08 -1.44,-0.06 -2.21,0.07l-212.63 35.65c-2.32,0.39 -4.44,-0.12 -6.35,-1.52 -1.91,-1.39 -3.07,-3.29 -3.46,-5.65l-5.85 -35.89c-0.77,-4.72 2.36,-9.2 6.98,-9.97l219.02 -36.72c0.76,-0.13 1.43,-0.15 2.2,-0.08l229.76 22.86c0.48,0.05 0.9,0.06 1.38,0.03l307.72 -20.72c0.69,-0.05 1.28,-0.02 1.96,0.1l139.87 23.83c0.62,0.11 1.15,0.14 1.78,0.11l274.61 -12.69c2.35,-0.11 4.4,0.65 6.14,2.27 1.74,1.62 2.67,3.64 2.78,6.03l1.67 36.29c0.22,4.77 -3.41,8.83 -8.08,9.05z'/%3E%3C/g%3E%3C/svg%3E");
}

.banner-04 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='auto' viewBox='0 0 1200 200' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E .fil0 %7B fill: %235b00b6; fill-rule: nonzero; %7D %3C/style%3E%3C/defs%3E%3Cg id='Camada_x0020_1'%3E%3Cpath class='fil0' d='M10.09 79.3l280.12 -12.95c0.63,-0.03 1.17,0 1.79,0.11l139.07 23.7c0.68,0.12 1.27,0.15 1.96,0.1l305.46 -20.57c0.49,-0.03 0.9,-0.02 1.39,0.03l227.51 22.63c0.77,0.08 1.44,0.06 2.2,-0.07l212.64 -35.66c2.31,-0.38 4.44,0.13 6.35,1.52 1.91,1.4 3.06,3.3 3.45,5.66l5.85 35.89c0.77,4.72 -2.36,9.19 -6.98,9.97l-219.02 36.72c-0.76,0.13 -1.43,0.15 -2.2,0.07l-229.76 -22.86c-0.48,-0.04 -0.9,-0.05 -1.38,-0.02l-307.72 20.72c-0.68,0.05 -1.28,0.02 -1.96,-0.1l-139.86 -23.84c-0.62,-0.1 -1.16,-0.14 -1.79,-0.11l-274.61 12.7c-2.34,0.11 -4.4,-0.65 -6.14,-2.27 -1.74,-1.62 -2.67,-3.64 -2.78,-6.03l-1.67 -36.29c-0.22,-4.77 3.41,-8.83 8.08,-9.05z'/%3E%3C/g%3E%3C/svg%3E");
}

.date-title-top {
    position: absolute;
    font-size: 1.3rem;
    font-weight: bolder;
    color: white;
}

.date-title-top span {
    font-size: 0.8rem;
    font-weight: lighter;
    color: #ffffff;
}

.date-title {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 1.45rem;
    font-weight: bolder;
    color: white;
    white-space: nowrap;
}

.date-title-alto {
    top: 54%;
    left: 50%;
}

.date-title-baixo {
    top: 45%;
    left: 50%;
}

.date-title span {
    font-size: 1.05rem;
    font-weight: lighter;
    color: #ffffff;
}

.blocos-lista {
    list-style: none;
    padding: 0;
    color: white;
    font-size: 1.02em;
}

.blocos-lista li {
    margin-bottom: 20px;
}

.hora {
    padding: 5px;
    font-size: 1.2rem;
    font-weight: bold;
}

.bairro-banner {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bairro-banner svg {
    width: 90%;
    max-width: 250px;
    height: auto;
}

/* Section Bairro */

.date-title-bairro {
    position: absolute;
    color: white;
    font-size: 1rem;
    color: #ffffff;
    line-height: 1 !important;

}

.date-title-bairro span {
    display: block;
}

.localizacao {
    font-size: 1rem;
    color: #ffffff;
}

.evento-lista {
    list-style: none;
    padding: 0;
}

.evento-lista li {
    margin-bottom: 5px;
}

.data {
    font-size: 1.5rem;
    font-weight: bold;
}

.dia {
    font-size: 1.3rem;
    font-weight: Light;
    margin-left: 5px;
}

.horario {
    font-size: 1rem;
    font-weight: Light;
}

.horario strong {
    font-weight: bold;
}

/* Ajuste do card */
.card-3d {
    width: 100%;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.034);
    padding: 20px;
    border-radius: 10%;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-3d:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.5);
}

.artista-img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0px 12px 15px rgba(0, 0, 0, 0.8));
    transition: transform 0.3s ease;
}

.card-3d:hover .artista-img {
    transform: scale(1.13);
}

/* Informações do artista */
.artista-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    text-align: center;
}

.artista-info .hora {
    font-size: 2.5rem;
    font-weight: bold;
}

.artista-info strong {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Animação de confetes diretamente no fundo */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.2;
}

/* Animação hover*/
.title-hover {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
}


.text-hover {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out 0.1s;
}

footer {
    opacity: 0;
    transform: translateY(2px);
    filter: blur(4px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
}

/* Quando a classe "aparecer" é adicionada */
.title-hover.aparecer {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.text-hover.aparecer {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

footer.aparecer {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Responsividade */
/* @media (max-width: 768px) {
    .card-3d {
        max-width: 90%;
    }

    .artista-info .hora {
        font-size: 2rem;
    }

    .artista-info strong {
        font-size: 1.2rem;
    }
} */