@font-face { font-family: "Cera"; src: url("res/CeraProBlack.otf") format("opentype"); }
@font-face { font-family: "Myriad"; src: url("res/MyriadProReg.otf") format("opentype"); }
@font-face { font-family: "MyriadBold"; src: url("res/MyriadProBold.otf") format("opentype"); }
@font-face { font-family: "MyriadBoldCond"; src: url("res/MyriadProBoldCond.otf") format("opentype"); }

* { margin: 0; padding: 0; }
body { font-family: "Myriad"; }
a { text-decoration: none; display: inline-block; text-transform: uppercase; }

.flex_centralizado { display: flex; justify-content: center; align-items: center; }

.lightbox {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: none;
    justify-content: center;
}
.lightbox_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    position: relative;
}
.lightbox_fechar {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.lightbox_titulo {
    background: url("src/CONTEUDOS-fundo-brasao-branco-40.png"), #FFDA64;
    display: flex;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 20px;
    background-repeat: no-repeat;
    background-position: 80%;
}
.lightbox_titulo_container {
    display: flex;
    gap: 20px;
    flex-direction: column;
    width: calc(100% - 40px);
    max-width: 800px;
    color: #002A7F;
}
.lightbox_titulo_titulo {
    font-size: 36px;
    font-family: "MyriadBold";
}
.lightbox_conteudo {
    display: flex;
    background: white;
    overflow-y: scroll;
    justify-content: center;
    height: stretch;
    padding-top: 20px;
    padding-bottom: 50px;
}
.lightbox_conteudo_container {
    width: calc(100% - 40px);
    max-width: 650px;
    height: 100%;
    font-size: 18px;
    p { margin-bottom: 25px; }
    p:last-child { padding-bottom: 50px }
    a { color: #009007; font-family: "MyriadBold"; }
    iframe { border: 4px solid #002A7F; aspect-ratio: 16 / 9; width: 100%; background-color: #78BCFF; }

    audio { width: 100%; }
    audio::-webkit-media-controls-panel { background-color: #FFDA64; }
    audio::-webkit-media-controls-play-button { background-color: transparent; color: #002A7F; border-radius: 50%; }
    audio::-webkit-media-controls-timeline { border-radius: 999px; }
    audio::-webkit-media-controls-timeline-container { background-color: #006305; }
}

.background { aspect-ratio: 64 / 9; height: 100dvh; background: url('src/background.png'); z-index: 1; position: fixed; background-size: contain; }
 
.conteudo { display: flex; flex-flow: row nowrap; z-index: 2; position: fixed; }
.conteudo_block { height: 100dvh; display: flex; justify-content: center; align-items: center; }
.conteudo_primeiro { min-width: 100dvw; }
.conteudo_segundo, .conteudo_outros { min-width: min-content; }
.conteudo_segundo { margin-right: 256px; }
.conteudo_outros { margin: 0 256px; }

.mfc_intro_container {
    display: flex;
    background: url("src/01-fundo-gramado.png");
    background-size: cover;
    padding: 50px;
    border: 5px solid white;
    border-radius: 10px;
}
.mfc_intro_conteudo {
    width: 90dvw;
    max-width: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "l t" "a a";
    align-items: center;
    div:nth-child(1){ grid-area: l; }
    div:nth-child(2){ grid-area: t; color: white; font-size: 30px; text-shadow: 2px 2px 1px #000; }
    div:nth-child(3){ grid-area: a; text-align: center; color: gold; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 2px #000; }
}

.mfc_ole_container {
    background-color: #78BCFF;
    padding: 80px;
    text-align: center;
    border-radius: 100%;
    border: 4px solid black;
    background-image: url("src/03-fundo-bola.png");
    background-size: contain;
    aspect-ratio: 1;
    position: relative;
    width: 367px;
    z-index: 10;
    div:nth-child(2){font-size: 22px; font-family: "MyriadBold"; }
}
.mfc_ole_carta {
    position: absolute;
    z-index: 0;
}
.mfc_ole_conteudo {
    flex-direction: column;
    gap: 25px;
    a {
        background: black;
        padding: 5px 15px;
        font-size: 18px;
        color: white;
        border-radius: 5px;
        font-family: "Cera";
        display: inline-block;
        width: max-content;
        transition: transform 0.4s ease;
        &:hover { transform: scale(1.05); }
    }
}
.mfc_ole_btn_grande {
    background: black;
    font-family: "Cera";
    color: #FF9C39;
    font-size: 22px;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    aspect-ratio: 1;
    padding: 15px;
    width: min-content;
}

.mfc_estudantes_container {
    background: linear-gradient(to bottom, #FFF0C1, #FFC71E);
    border: 5px solid white;
    border-radius: 10px;
    padding: 20px;
    color: #002A7F;
    font-size: 20px;
    text-align: center;
    transition: transform 0.4s ease;
    text-transform: unset;
    &:hover { transform: scale(1.05); }
}
.mfc_estudantes_conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    
}
.mfc_estudantes_conteudo_btn {
    background: #002A7F;
    padding: 5px 15px;
    color: white;
    border-radius: 5px;
    font-family: "Cera";
    font-size: 22px;
}

.mfc_jogos_container {
    display: flex;
    gap: 30px;
    height: 90dvh;
    max-height: 620px;
    align-items: center;
}
.mfc_jogos_titulo, .mfc_jogos_jogo {
    border: 5px solid #FFDA64;
    border-radius: 20px;
    background: linear-gradient(to bottom, #006405, #009007);
    display: flex;
    flex-direction: column;
    color: white;
}
.mfc_jogos_titulo {
    margin-right: -50px;
    padding: 50px;
    gap: 30px;
    align-self: flex-start;
    font-size: 24px;
}
.mfc_jogos_titulo_titulo {
    font-family: "Cera";
    line-height: 140%;
    .txt_ouro { font-size: 48px; color: #E3C232; }
    .txt_branco { font-size: 54px; }
}
.mfc_jogos_jogo {
    position: relative;
    min-width: 275px;
    gap: 20px;
    text-align: center;
    padding: 35px 0 50px 0;
    font-family: "Cera";
    text-transform: uppercase;
    font-size: 40px;
    transition: transform 0.4s ease;
    &:nth-child(2){ align-self: flex-end; }
    &:nth-child(3){ align-self: flex-start; }
    &:nth-child(4){ align-self: center; }
    &:hover { transform: scale(1.05); }
}
.mfc_jogos_jogo_btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    background-color: #FFDA64;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    font-size: 32px;
    padding: 10px 25px;
    border-radius: 5px;
    color: #006283;
}

.mfc_curta_container {
    position: relative;
    height: 90dvh;
    max-height: 600px;
    width: 1300px;
}
.mfc_curta_titulo, .mfc_curta_bolha {
    background: #002A7F;
    aspect-ratio: 1;
    background-image: url(src/03-fundo-bola.png);
    background-size: cover;
    position: absolute;
}
.mfc_curta_titulo {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 4px solid white;
    border-radius: 100%;
    overflow: hidden;
    color: white;
    padding: 60px;
    gap: 20px;
    width: 265px;
    top: 10%;
    & div { overflow: visible }
}
.mfc_curta_titulo_texto {
    font-size: 20px;
    font-weight: bold;
    background-image: url(src/03-fundo-bola.png);
    background-size: cover;
}
.mfc_curta_bolha {
    aspect-ratio: 1;
    border: 4px solid white;
    padding: 30px;
    flex-direction: column;
    border-radius: 100%;
    position: absolute;
    transition: transform 0.4s ease;
    &:hover { transform: scale(1.05); }
}
.mfc_curta_bolha_conteudo {
    border-radius: 5px;
    background-color: #FFDA64;
}
.mfc_curta_bolha_conteudo_thumb {
    position: relative;
}
.floating_thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.mfc_curta_bolha_conteudo_barra {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: #FFDA64;
    color: #002A7F;
    font-family: "MyriadBoldCond";
}

.mfc_historias_container {
    display: flex;
    gap: 50px;
    align-items: center;
}
.mfc_historias_titulo, .mfc_historias_carrossel {
    border: 5px solid #002A7F;
    padding: 30px;
}


.mfc_historias_titulo {
    display: flex;
    gap: 50px;
    flex-direction: column;
    font-size: 20px;
    font-family: "MyriadBold";
    color: #002A7F;
    background: linear-gradient(to bottom, #FFCC22, #FFDF77);
    border-radius: 20px;
}

.mfc_historias_carrossel_titulo { grid-area: t }

.mfc_historias_carrossel {
    display: grid;
    align-items: center;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    grid-template-areas: "t t t" "se c sd" "p p p";
    position: relative;
    width: 100%;
    background: url("src/06-fundo-brasao-branco-30.png"), linear-gradient(to bottom, #FFCC22, #FFDF77);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    &:nth-child(2){ transform: translateY(-20%); }
    &:nth-child(3){ transform: translateY(20%); }
    &:nth-child(4){ transform: translateY(-10%); }
}

.mfc_historias_carrossel_viewport {
    overflow: hidden;
    width: 325px;
    grid-area: c;
}

.mfc_historias_carrossel_track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .4s ease;
}

.slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    flex-direction: column;
    gap: 25px;
    font-size: 24px;
    font-family: "MyriadBold";
    text-align: center;
    cursor: pointer;
    color: #002A7F;
}

.slide_bg {
    aspect-ratio: 16 / 9;
    width: 325px;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Setas */

.seta_esquerda,
.seta_direita {
    cursor: pointer;
    user-select: none;
    font-size: 2rem;
}

.seta_esquerda { grid-area: se; }
.seta_direita { grid-area: sd; }

/* Pips */

.pips {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    grid-area: p;
}

.pip {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #79BF7F;
    cursor: pointer;
    transition: 0.2s;
}

.pip.ativo {
    background: #0D7551;
}

.final_card {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: #1C336E;
}
.final_card_container {
    border: 5px solid white;
    border-radius: 20px;
    width: calc(100% - 40px);
    max-width: 1200px;
    height: calc(100% - 40px);
    text-align: center;
}
.final_card_grid {
    display: grid;
    grid-template-areas: "lf lm" "t t";
    grid-gap: 50px;
    align-items: center;
    padding: 0 10%;
}
.final_card_textos {
    grid-area: t;
    display: flex;
    flex-direction: column;
    gap: 30px;
    & div:nth-child(1) { font-size: 24px; color: white; }
    & div:nth-child(2) { font-size: 20px; color: #E3C232; }
}

.vert_buffer { width: 100px; }


/* RESPONSIVIDADE MOBILE */
@media (max-width: 900px) {
    .mfc_intro_container { max-width: calc(100dvw - 180px); }
    .mfc_intro_conteudo { text-align: center; grid-gap: 20px; grid-template-columns: 1fr; grid-template-areas: "l" "t" "a"; }
    .mfc_intro_conteudo div:nth-child(2){ font-size: 24px; }
    .final_card_grid { grid-template-areas: "lf" "lm" "t"; }
    .conteudo_segundo, .conteudo_outros { margin: 0 128px; }
    .mfc_intro_container img, .final_card img { max-width: 100% }
    .mfc_ole_carta { transform: scale(0.8); }
}