@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/thin/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/duotone/style.css');

@keyframes swoon {
    0%{ background-position-x: 0; }
    100%{ background-position-x: 99%; }
}

*{
    /* background-color: rgba(15, 15, 255, 0.1); */
    box-sizing: border-box; }

:root {
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-2xl: 2rem;
    --radius-pill: 9999px;
    --radius-full: 50%;

    --font-family: 'Poppins', Arial, Helvetica, sans-serif;

    --color-emphasis: #6D55cc;
    --color-primary: #0077CC;
    --color-secondary: #00BB77;

    --color-black: #000;
    --color-danger: #f44;
    --color-expired: #fd0;
    --color-info: #06F;
    --color-success: #2d0;
    --color-warning: #f80;
    --color-white: #fff;
    
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #c5c5c5;
    --color-neutral-400: #999;
    --color-neutral-500: #888;
    --color-neutral-600: #333;
    --color-neutral-700: #222;
    --color-neutral-800: #111;
    --color-neutral-900: #000; }

a{
    color: var(--color-neutral-300);
    font-size: 1.1rem;
    outline: none;
    transition: color .15s ease-in-out; }
a:focus,
a:hover{ text-decoration: none; }

body{
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-400);
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    transition: padding .15s ease-in-out; }
body.side-menu-active{
    overflow: hidden;
    padding-left: 0; }
body.side-menu-active .side-menu{ left: 0; }
body.side-menu-active .side-menu-bg{ display: block; }

footer{
    color: var(--color-neutral-400);
    padding: 2rem 0 3rem 0;
    position: relative;
    text-align: center;
    z-index: 200; }

form button,
form input,
form optgroup,
form select,
form textarea{
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    outline: none; }
form button.btn{
    font-size: 1.4rem;
    width: 100%; }

h1, h2, h3, h4, h5, h6{
    color: var(--color-white);
    font-weight: 300;
    letter-spacing: -0.1rem;
    line-height: 1.4;
    margin: 1rem 0 0 0;
    padding: 0; }
h1{
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: -0.2rem; }
h2{
    font-size: 3.5rem;
    font-weight: 500;
    letter-spacing: -0.2rem; }
h3{ font-size: 2.2rem; }
h4{ font-size: 1.8rem; }
h5{ font-size: 1.6rem; }
h6{ font-size: 1.4rem; }
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span{ color: var(--color-primary); }

header{
    background-color: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    left: 0;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 275; }
header .link{
    color: var(--color-neutral-300); 
    font-size: 1.2rem; }
header .link:focus,
header .link:hover{ color: var(--color-primary); }
header .margin{
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%; }
header .margin .col{
    align-items: center;
    display: flex;
    gap: 2rem; }
header .margin .col:first-child{
    justify-content: flex-start;
    width: 30%; }
header .margin .col:last-child{
    justify-content: flex-end;
    width: 30%; }
header .menu-main{
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0; }

hr{
    border: none;
    border-top: var(--color-neutral-600) 2px dotted;
    margin: 2rem 0; }

p{ margin: 1rem 0 0 0; }

main{
    margin-top: -100px;
    padding: calc(1rem + 100px) 0 2rem 0;
    position: relative;
    z-index: 100; }

section{ display: flow-root; }

small{
    font-weight: 300;
    font-size: .9rem; }

strong{ font-weight: 700; }

ul{
    list-style: none;
    margin: 0;
    padding: 0; }

.banner-slim{
    background-color: var(--color-secondary);
    color: var(--color-white);
    display: none;
    font-size: 1.1rem;
    padding: 1rem 4rem;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 250; }
.banner-slim p{ margin: 0; }
.banner-slim .link{
    color: var(--color-white);
    font-weight: 500;
    text-decoration: underline; }
.banner-slim .link-close{
    color: var(--color-white);
    position: absolute;
    right: 1rem;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%); }

.border-radius-sm{ border-radius: var(--radius-sm); }
.border-radius-md{ border-radius: var(--radius-md); }
.border-radius-lg{ border-radius: var(--radius-lg); }
.border-radius-xl{ border-radius: var(--radius-xl); }
.border-radius-2xl{ border-radius: var(--radius-2xl); }
.border-radius-pill{ border-radius: var(--radius-pill); }
.border-radius-full{ border-radius: var(--radius-full); }

.box{
    background-color: var(--color-neutral-700);
    border-radius: var(--radius-xl);
    margin: 2rem 0;
    padding: 2rem; }
.box .form .form-control{
    background-color: transparent;
    color: var(--color-white); }
.box .form{ margin: 2rem auto; }

.btn{
    background-color: var(--color-white);
    border: transparent 2px solid;
    border-radius: var(--radius-xl);
    color: var(--color-neutral-600);
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-family);
    font-size: 1.2rem;
    font-weight: 500;
    padding: 1.5rem 3rem;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease-in-out, color .15s ease-in-out;
    vertical-align: middle;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none; }
.btn:focus,
.btn:hover{
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none; }
.btn.btn-border{
    background-color: transparent;
    border: var(--color-primary) 2px solid;
    color: var(--color-primary); }
.btn.btn-border:focus,
.btn.btn-border:hover{
    background-color: var(--color-primary);
    color: var(--color-white); }
.btn.btn-full{ width: 100%; }
.btn.btn-primary{
    background-color: var(--color-primary);
    color: var(--color-white); }
.btn.btn-primary:focus,
.btn.btn-primary:hover{
    background-color: var(--color-white);
    color: var(--color-primary); }
.btn.btn-secondary{
    background-color: var(--color-secondary);
    color: var(--color-white); }
.btn.btn-secondary:focus,
.btn.btn-secondary:hover{
    background-color: var(--color-white);
    color: var(--color-secondary); }
.btn.btn-small{
    border-radius: var(--radius-md);
    font-size: .9rem;
    padding: .5rem 1rem; }
.btn.btn-color{
    animation: swoon 4s infinite linear;
    background: linear-gradient(90deg, #6FFFDE 0%, #FFE245 20%, #FF5057 40%, #FFE245 60%, #6FFFDE 80%, #FFE245 100%);
    background-size: 600%;
    box-shadow: 0 0 2rem rgba(255, 255, 255, 0);
    color: var(--color-black);
    font-size: 1.6rem;
    letter-spacing: -.05rem;
    transition: box-shadow .15s ease-in-out; }
.btn.btn-color:focus,
.btn.btn-color:hover{ box-shadow: 0 0 4rem rgba(255, 155, 255, .25); }
.btn span{ display: block; }
.btn small{ display: block; }

.color-danger{ color: var(--color-danger); }
.color-expired{ color: var(--color-expired); }
.color-info{ color: var(--color-info); }
.color-primary{ color: var(--color-primary); }
.color-secondary{ color: var(--color-secondary); }
.color-success{ color: var(--color-success); }
.color-warning{ color: var(--color-warning); }
.color-white{ color: var(--color-white); }

.content{
    margin-bottom: 4rem;
    margin-top: 4rem; }

.etiqueta{
    background-color: var(--color-neutral-700);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    display: inline-block;
    padding: .5rem 1.5rem; }

.form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem auto;
    max-width: 640px; }

.form-control{
    appearance: none;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: var(--color-neutral-200) 1px solid;
    border-radius: var(--radius-xl);
    color: var(--color-neutral-600);
    display: block;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.25;
    padding: 1.5rem 1rem;
    resize: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none; }
.form-control::-moz-placeholder{
    color: transparent;
    opacity: 1 }
.form-control::placeholder{
    color: transparent;
    opacity: 1; }
.form-control:disabled{
    background-color: var(--color-neutral-100);
    opacity: .6; }
.form-control:focus{
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary); }
.form-control[readonly]{
    background-color: var(--color-neutral-100);
    box-shadow: none;
    cursor: default; }

.form-floating{ position: relative; }
.form-floating > label{
    color: var(--color-white);
    font-size: 1.2rem;
    height: 100%;
    left: 0;
    overflow: hidden;
    padding: 1.5rem;
    pointer-events: none;
    position: absolute;
    text-align: start;
    text-overflow: ellipsis;
    top: 0;
    transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    white-space: nowrap;
    z-index: 2; }
.form-floating > .form-control{ padding: 1.5rem; }
.form-floating > .form-control:focus~label,
.form-floating > .form-control:not(:placeholder-shown)~label{
    color: var(--color-neutral-400);
    transform: scale(.8) translateY(-1rem) translate(.4rem); }
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown){ 
    padding-top: 2rem;
    padding-bottom: 1rem; }

.img{
    margin: 1rem auto;
    max-width: 100%; }

.label{
    border: var(--color-white) 2px solid;
    border-radius: var(--radius-md);
    color: var(--color-white);
    display: inline-block;
    font-size: 1rem;
    line-height: 1em;
    padding: .5rem 1rem; }

.line + .line{ margin-top: 4rem; }
.line-space-2 .unit{ padding-right: 2rem; }
.line-space-2 .unitExt{ padding-left: 2rem; }
.line-space-4 .unit{ padding-right: 4rem; }
.line-space-4 .unitExt{ padding-left: 4rem; }

.link{
    font-weight: 300;
    text-decoration: none; }
.link:focus,
.link:hover{ text-decoration: none; }
.link-logo{
    background: var(--color-primary);
    background-size: 100% auto;
    border-radius: 60px;
    color: var(--color-white);
    display: inline-block;
    height: 60px;
    margin: 0 0 0 -70px;
    padding: 2px 10px;
    position: relative;
    text-decoration: none !important;
    transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
    width: 60px; }
.link-logo:after{
    color: var(--color-white) !important;
    content: 'Academia\A Prokeys';
    display: inline-block;
    font-weight: 500;
    padding-left: 15px;
    position: absolute;
    left: calc(100%);
    line-height: 1.2;
    top: 50%;
    transform: translateY(-50%);
    white-space: pre;
    width: min-content; }
.link-logo:before{
    background-color: transparent;
    content: '';
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: calc(100% + 100px); }
.link-logo:focus,
.link-logo:hover{
    background-color: var(--color-white);
    color: var(--color-primary); }
.link-logo i{ font-size: 40px; }
.link-menu-open{ position: relative; }
.link-menu-close{
    color: var(--color-white);
    text-decoration: none; }
.link-menu-close:focus,
.link-menu-close:hover{
    color: var(--color-primary);
    text-decoration: none; }

.list-content{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1rem; }
.list-content li a{
    background-color: var(--color-neutral-800);
    border-radius: var(--radius-md);
    display: block;
    text-decoration: none;
    transition: background-color .15s ease-in-out;
    width: 100%; }
.list-content li a:focus,
.list-content li a:hover{ background-color: var(--color-neutral-700); }
.list-content li a img{
    border-radius: var(--radius-md);
    height: auto;
    max-width: 100%; }
.list-content li a span{
    display: block;
    padding: 1rem;
    transition: padding .15s ease-in-out; }
.list-content li a:focus span,
.list-content li a:hover span{ padding: .75rem 1rem 1.25rem 1rem; }

.list-hr li{ padding: 2rem 0; }
.list-hr li + li{ border-top: var(--color-neutral-600) 1px dotted; }
.list-hr li p{ margin-top: 0; }

.list-links{ text-align: center; }
.list-links li{
    display: inline-block;
    margin: .25rem; }

.list-social{
    display: flex;
    gap: 0 1rem;
    list-style: none;
    margin: 0 auto;
    justify-content: center;
    padding: 0; }
.list-social li a{ color: var(--color-primary); }
.list-social li a i{ transition: color .15s ease-in-out; }
.list-social li a:focus i,
.list-social li a:hover i{ color: var(--color-white); } 

.list-testimonials{
    align-items: flex-start;
    display: grid;
    gap: 4rem;
    grid-template-columns: auto 1fr;
    margin: 4rem 0; }
.list-testimonials .icon-ph{ margin: 2rem 4rem; }
.list-testimonials .icon-ph i{
    font-size: 10rem;
    line-height: 1; }
.list-testimonials ul{
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0; }

.margin{
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 1rem;
    position: relative;
    width: 100%; }
.margin-90{ max-width: 1420px; }
.margin-80{ max-width: 1280px; }
.margin-70{ max-width: 980px; }

.max-width-100{ max-width: 100%; }

.menu-account{
    background-color: var(--color-neutral-700);
    border-radius: var(--radius-xl);
    margin: 2rem 0;
    padding: 2rem; }

.mb1rem{ margin-bottom: 1rem; }
.mb2rem{ margin-bottom: 2rem; }
.mb3rem{ margin-bottom: 3rem; }
.mb4rem{ margin-bottom: 4rem; }

.mbn1rem{ margin-bottom: -1rem; }
.mbn2rem{ margin-bottom: -2rem; }
.mbn3rem{ margin-bottom: -3rem; }
.mbn4rem{ margin-bottom: -4rem; }

.mt1rem{ margin-top: 1rem; }
.mt2rem{ margin-top: 2rem; }
.mt3rem{ margin-top: 3rem; }
.mt4rem{ margin-top: 4rem; }

#notification-box{
    background-color: var(--color-primary);
    border-radius: var(--radius-xl);
    top: 0;
    color: var(--color-white);
    right: 1rem;
    opacity: 0;
    padding: 1rem 2rem;
    position: fixed;
    transition: opacity 0.15s ease-in-out, top 0.15s ease-in-out, visibility 0.15s ease-in-out;
    visibility: hidden;
    z-index: 9999; }
#notification-box[data-type="error"]{ background-color: var(--color-danger); }
#notification-box[data-type="info"]{ background-color: var(--color-info); }
#notification-box[data-type="success"]{ background-color: var(--color-success); }
#notification-box.open {
    opacity: 1;
    top: 1rem;
    visibility: visible; }

.ph-duotone,
.ph-thin{
    font-size: 1.8rem;
    line-height: 1.4;
    vertical-align: middle; }

.section-primary{ background-color: var(--color-primary); }

.section-white{
    background-color: var(--color-white);
    color: var(--color-neutral-600); }
.section-white h1,
.section-white h2,
.section-white h3,
.section-white h4,
.section-white h5,
.section-white h6{ color: var(--color-neutral-800); }

.side-menu{
    background-color: var(--color-neutral-700);
    height: 100%;
    left: -400px;
    padding: 2rem;
    position: fixed;
    text-align: center;
    top: 0;
    transition: left .3s ease-in-out;
    width: 400px;
    z-index: 400; }
.side-menu h4{ margin: 0; }
.side-menu .link{
    color: var(--color-neutral-400); 
    font-size: 1.2rem;
    font-weight: 300; }
.side-menu .link:focus,
.side-menu .link:hover{ color: var(--color-primary); }
.side-menu .link-emphasis{
    color: var(--color-neutral-300); 
    font-size: 1.4rem;
    font-weight: 400; }
.side-menu-bg{
    background-color: rgba(15, 15, 15, 0.5);
    display: none;
    height: 100%;
    inset: 0;
    position: fixed;
    width: 100%;
    z-index: 350; }
.side-menu-footer .btn{ width: 100%; }
.side-menu-content{ margin: 2rem 0 4rem 0; }
.side-menu-content ul li{
    line-height: 2;
    text-align: left; }
.side-menu-header{
    display: flex;
    justify-content: space-between; }

.steps{
    background-color: var(--color-neutral-700);
    border-radius: var(--radius-xl);
    display: flex;
    margin: 2rem 0;
    padding: 1rem; }
.steps .step{
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 1.4rem;
    justify-content: center;
    position: relative; }
.steps .step.active {
    background-color: var(--color-primary);
    border-radius: var(--radius-xl);
    color: var(--color-white);
    font-weight: 500;
    padding: 1rem; }

.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-size-md{ font-size: 1.25rem; }
.text-size-lg{ font-size: 1.5rem; }
.text-size-xl{ font-size: 2rem; }

.title{
    margin-bottom: 4rem;
    margin-top: 4rem;
    text-align: center; }
.title h1 + p{ margin-top: 0; }
.title p{ margin-top: 1rem; }

.video{
    aspect-ratio: 16 / 9;
    display: block;
    margin: 1rem auto;
    overflow: hidden;
    width: 100%; }
.video iframe{
    display: block;
    height: 100%;
    width: 100%; }

@media screen and (max-width: 1200px) {

    .list-content ul{ grid-template-columns: repeat(3, 1fr); }

}

@media screen and (max-width: 992px) {

    body.side-menu-active{ padding-left: 0; }
    body.side-menu-active .side-menu{ left: 0; }

    .side-menu{
        left: -300px;
        padding: 1rem;
        width: 300px; }

}

@media screen and (max-width: 768px) {

    .list-content ul{ grid-template-columns: repeat(2, 1fr); }

}

/* PAGES -------------------------------------------------------------- */

.page-criar-conta{
    background-image: url(../images/fundo-piano.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover; }

.page-entrar{
    background-image: url(../images/fundo-piano.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover; }
.page-entrar main h1{
    font-size: 7rem;
    font-weight: 200;
    line-height: 1.2; 
    margin-top: .5rem; }

.page-esqueceu-senha{
    background-image: url(../images/fundo-piano.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover; }

.page-grupo-whatsapp{
    background-image: url(../temp/fundo-grupo-whatsapp.png);
    background-position: 50% 100px;
    background-repeat: no-repeat;
    background-size: 100% auto; }
.page-grupo-whatsapp main{ padding-top: 30vw; }

.page-plataforma main h1{
    font-size: 6rem;
    letter-spacing: -0.3rem; }

.page-sobre main h1{
    font-size: 6rem;
    letter-spacing: -0.3rem; }

/* PLUGINS -------------------------------------------------------------- */

.swiper[data-theme="plataform-slider"]{
    padding-bottom: 3rem;
    padding-top: 3rem; }
.swiper[data-theme="plataform-slider"] .swiper-button-next,
.swiper[data-theme="plataform-slider"] .swiper-button-prev{
    color: var(--color-white);
    height: 25px;
    left: auto;
    margin-top: 0 ;
    position: absolute;
    right: 0; 
    top: 0;
    transition: all .15s ease-in-out;
    width: 25px; }
.swiper[data-theme="plataform-slider"] .swiper-button-prev{ right: 30px; } 
.swiper[data-theme="plataform-slider"] .swiper-button-next:hover,
.swiper[data-theme="plataform-slider"] .swiper-button-prev:hover{ color: var(--color-white); }
.swiper[data-theme="plataform-slider"] .swiper-pagination-bullet{
    background: var(--color-white);
    border-radius: var(--radius-pill);
    height: 1rem;
    opacity: .25;
    transition: all .15s ease-in-out;
    width: 1rem; }
.swiper[data-theme="plataform-slider"] .swiper-pagination-bullet:focus,
.swiper[data-theme="plataform-slider"] .swiper-pagination-bullet:hover{
    background: var(--color-white);
    opacity: 1; }
.swiper[data-theme="plataform-slider"] .swiper-pagination-bullet-active{
    background: var(--color-white);
    opacity: 1 !important;
    width: 2rem; }
.swiper[data-theme="plataform-slider"] .swiper-slide{ display: block; }
.swiper[data-theme="plataform-slider"] .swiper-slide:hover img{ transform: scale(.98); }
.swiper[data-theme="plataform-slider"] .swiper-slide img{
    border-radius: var(--radius-md);
    height: auto;
    max-width: 100%;
    transition: transform .15s ease-in-out; }