.notas {position: absolute; display: flex; flex-direction: row; gap: 30px; top: 0; height: 100vh;}
.notas .nota {width: 30px; height: auto; position: relative; top: 0; transition: 4.4s; animation: infinite fall var(--fall) linear;}
.notas .nota svg {width: 100%; height: auto;animation: infinite rotate var(--time) linear;}
.notas.nt-l {left: 0;}
.notas.nt-r {right: 0;}

.vh {width: 100%; height: 110vh;}
.principal {background: var(--rosa); display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 304px 0 400px; position: relative; overflow: hidden;}
.principal .conteudo {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; position: relative; z-index: 100; background-color: var(--rosa); padding: 20px 0 30px;}
.principal .conteudo .info {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 75px; }
.principal .titulo {font: 800 30px Inter; color: var(--branco); text-align: center;}
.principal .clava {width: 216px; height: auto;}
.principal .clava svg {width: 100%; height: auto;}
.principal .cat {width: 400px; height: auto; margin: 0 0 -150px;}
.principal .cat img {width: 100%; height: auto;}


.star {width: 30px; position: absolute; transition: 0.4s;}
.star:hover {cursor: pointer;}
.star.impar {opacity: 0.7;}
.star.impar {animation: infinite rotate-sec-impar 6s linear}
.star.par {animation: infinite rotate-sec-par 8s linear}
.star img {width: 100%; height: auto; object-fit: contain;}

.espaco {background: var(--azul); padding: 282px 0 307px; position: relative;}
.espaco .titulo {font: 500 24px raleway; color: var(--branco); text-align: center; max-width: 700px; margin: 0 auto; padding: 20px ; background: var(--azul); position: relative; z-index: 100;}

.gatos {background: var(--rosa); padding: 30px 0 450px; position: relative;}

.gatos .coracao {width: 30px; height: 30px; position: absolute; transition: 2s; z-index: 1000;}
.gatos .coracao svg {width:100%; height: auto;}
.gatos .coracao.subir {transform: scale(2.5);}
.gatos .coracao.sumir {opacity: 0; transform: scale(0);}

.gatos .gato-ms {width: 100px; height: auto;}
.gatos .gato-ms svg {width: 100%; height: auto;}
.gatos .img {position: relative;}
.gatos .img:hover {cursor: pointer;}
.gatos img {width: 100%; height: 100%; object-fit: contain; position: relative;}
.gatos .com-titulo {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 75px; margin: 0 0 34px;}
.gatos .titulo {font: 800 30px Inter; color: var(--branco); text-align: center; position: relative; display: flex; justify-content: center; align-items: center; }
.gatos .titulo::before {content: ''; width: 110%; height: 6px; background-color: var(--branco); position: absolute; bottom: -21px;}
.gatos .galeria {display: flex; flex-direction: column; gap: 21px; justify-content: center; align-items: center;}
.gatos .galeria .top {display: flex; flex-direction: row; justify-content: space-between; gap: 20px; align-items: center;}
.gatos .galeria .top .left {width: 600px; height: 600px;}
.gatos .galeria .top .direita .img-1, .gatos .galeria .top .direita .img-2 {width: 330px;}
.gatos .galeria .top .direita {display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 20px;}
.gatos .galeria .bot {width: 920px;}
.gatos .galeria .ultimo {display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 20px;}
.gatos .galeria .fim {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin: -180px 0 0 90px; align-self: flex-start;}

.gatos .galeria .img-4 {max-width: 600px; width: 100%;}
.gatos .galeria .img-5 {max-width: 330px; width: 100%;}
.gatos .galeria .img-6 {max-width: 250px; width: 100%;}

.gatos .bg {position: absolute; top: -40px; left: 0; width: 600px;}
.gatos .pst {position: relative; z-index: 10;}
.gatos .bg img {width: 100%; height: auto;}
.gatos .pata {position: absolute; width: 250px; top: var(--top); right: var(--right);}
.gatos .pata img {width: 100%; height: auto;}
/* .gatos .pata.impar {top: ;} */

.carta {background: var(--azul); padding: 60px 0 80px; border-radius: 30px 30px 0 0;}
.carta .conteudo {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.carta .titulo {font: 800 30px Inter; color: var(--rosa-seg); text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: var(--branco); border-radius: 100px; padding: 20px 40px; max-width: 500px; gap: 20px; margin: 0 0 50px; transition: 0.4s;}
.carta .titulo:hover {cursor: pointer; transform: scale(1.07);}
.carta .icone {width: 50px; height: 40px;}
.carta .icone svg {width: 100%; height: 100%;}
.carta .info {width: 100%; background: var(--branco-seg); padding: 50px; font: 300 24px / 36px inter; max-width: 750px; display: none;}

.fixo {position: fixed; right: 30px; bottom: 70px; z-index: 1000;}
.fixo:hover {cursor: pointer;}
.fixo .bg {position: relative; background: var(--branco); border-radius: 100px; display: grid; place-content: center; place-items: center; padding: 15px; width: 50px; height: 50px; box-shadow: 0 0 6px 1px #b81ceb;}
.fixo.play .svg {opacity: 0; transform: scale(0);}
.fixo .svg {width: 25px; height: 25px; transition: 0.4s; opacity: 1; position: absolute; transform: scale(1);}
.fixo .svg svg {width: 100%; height: 100%;}
.fixo .svg svg path {fill: var(--preto);}
.fixo .rec-play {display: flex; flex-direction: row; justify-content: center; gap: 10px; height: 20px; opacity: 0; transition: 0.4s; position: absolute; transform: scale(0);}
.fixo.play .rec-play {opacity: 1; display: flex; transform: scale(1);}
.fixo .rec-y {height: 100%; width: 5px; background: var(--preto);}

.center {width: 100%; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 10px; z-index: 1000;}
.audio-vs {border-radius: 100px; padding: 20px; background: var(--preto-opaco); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; width: 100%; max-width: 300px; height: 50px;}
.audio-vs .rec {width: 5px; background: var(--branco);}
.audio-vs .rec.impar {height: 15px;}
.audio-vs .rec.par {height: 10px;}
.audio-vs.play .rec.impar {animation: infinite impar 1s linear;}
.audio-vs.play .rec.par {animation: infinite par 0.5s linear;}
@keyframes fall{
    0%{
        top:-20%;
    }
    25%{
        top: 25%;
    }
    50%{
        top: 50%;        
    }
    75%{
        top: 75%;        
    }
    100%{
        top: 150%;        
    }
}
@keyframes rotate-sec-impar{
    0%{
        transform: rotate(0) scale(1);
    }
    25%{
        transform: rotate(90deg) scale(1.1);
    }
    50%{
        transform: rotate(180deg) scale(1.3);
    }
    75%{
        transform: rotate(270deg) scale(1);
    }
    100%{
        transform: rotate(360deg) scale(1);
    }
}
@keyframes rotate-sec-par{
    0%{
        transform: rotate(0) scale(1);
    }
    25%{
        transform: rotate(90deg) scale(1.2);
    }
    50%{
        transform: rotate(180deg) scale(0.9);
    }
    75%{
        transform: rotate(270deg) scale(0.2);
    }
    100%{
        transform: rotate(360deg) scale(1);
    }
}
@keyframes rotate{
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(45deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(45deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes impar {
    0%{
        height: 15px;
    }
    25%{
        height: 10px;
    }
    50%{
        height: 5px;
    }
    75%{
        height: 10px;
    }
    100%{
        height: 15px;
    }
}
@keyframes par {
    0%{
        height: 10px;
    }
    25%{
        height: 15px;
    }
    50%{
        height: 20px;
    }
    75%{
        height: 15px;
    }
    100%{
        height: 10px;
    }
}

@media (max-width:1500px){
    .gatos .pata {width: 150px;}
    .gatos .bg {left: -195px}
}
@media (max-width:1260px){
    .gatos .galeria .fim {margin: -180px 0 0; width: 100%; padding-right: 40%; justify-content: flex-start;}
}
@media (max-width:1200px){
    .gatos .pata.pata-4 {display: none;}
}
@media (max-width:1100px){
    .principal .cat {margin: 0 0 -100px;}
    .principal .conteudo {justify-content: space-between; gap: 20px;}
    .principal .conteudo .info {justify-content: space-around; gap: 20px;}
    .gatos .galeria .top .left {width: auto; height: auto;}
    .gatos .galeria .top .direita .img-1, .gatos .galeria .top .direita .img-2 {width: auto;}
    .gatos .galeria .bot {width: auto;}
    .gatos .galeria, .gatos .galeria .top, .gatos .galeria .top .direita {gap: 8px;}
}
@media (max-width:990px){
    .gatos .galeria .ultimo {gap: 8px;}
    .gatos .galeria .fim {margin: -215px 0 0; gap: 8px;}
    .principal .cat {margin: 0 0 -50px;}
    .star {width: 20px;}
    .star.start-18.par {top: 63% !important; left: 72% !important;}
    .star.start-32.par {top: 65% !important; left: 54% !important;}
    .star.start-20.par {top: 68% !important; left: 91% !important;}
    .star.start-8.par  {top: 65% !important; left: 15% !important;}
    .star.start-5.impar {top: 78%  !important;}

    .principal .clava {width: 100px;}
    .principal .titulo {font-size: 26px;}
    .espaco .titulo {font-size: 22px;}
    .pata.pata-1 {display: none;}
    .pata.pata-5 {display: none;}
    .pata.pata-6 {display: none !important;}
    /* .pata.pata-8 {display: none;} */
    .pata.pata-11 {display: none;}
    .pata.pata-12 {display: none;}
    .pata.pata-13 {display: none;}

    /* .gatos .pata.pata-6 {--top:86% !important; --right: 68% !important} */
    .gatos .pata.pata-7 {--top:76% !important; --right: 10% !important}
    .gatos .pata.pata-8 {--top:80% !important; --right:40% !important}
    .gatos .pata.pata-9 {--top:86% !important; --right: 68% !important}

    .gatos .bg {display: none;}
    .gatos .titulo {font-size: 26px;}
    .gatos .com-titulo {gap: 8px; justify-content: space-around;}
    .gatos .gato-ms {width: 70px;}
    .gatos .com-titulo {margin: 0 0 30px;}
    .gatos .titulo::before {width: 100%;}
    .carta {padding: 25px 0 70px;}
    .carta .titulo {font-size: 26px; margin: 0 0 20px;}
}
@media (max-width:890px){
    .gatos .galeria .img-5 {max-width:230px;}
    .gatos .galeria .img-6 {max-width: 200px;}
    .gatos .galeria .fim {margin: 0; padding: 0;}
    .gatos .galeria .img-5 {max-width: 27%;}
    .gatos .galeria .fim {justify-content: center;}
    .gatos {padding: 30px 0 200px;}

}
@media (max-width:670px){
    .principal .cat {margin: 0 0 0; width: 300px;}
    .principal .conteudo {gap: 5px; justify-content: space-between;}
    .principal .clava {width: 80px;}
    .gatos .com-titulo {justify-content: space-between;}
    .carta .info {padding: 30px 30px 40px;}
    .gatos .pata {width: 90px;}
}
@media (max-width:585px){
    .principal .clava {width: 60px;}
    .carta .icone  {width: auto; height: auto; max-width: 50px;}
    .carta .titulo {font-size: 24px; width: 100%; padding: 20px;}
}