html, body { padding: 0; margin: 0; font-family: "Encode Sans Condensed", sans-serif; font-size: 18px; color: white; overflow-x: hidden; }

section { display: flex; flex-direction: column; width: 100vw; justify-content: center; align-items: center; }
.container { width: calc(100% - 40px); max-width: 1280px; padding: 0 20px; }
button { padding: 12px; border: 0; text-transform: uppercase; font-family: Oswald; font-weight: 700; font-size: 18px; color: #45133E; background-color: #FBB835; box-shadow: 3px -3px 0 0 #00E0DA, -3px 3px 0 0 #F11E17; }
button:hover { background-color: white;}

button, a, nav .menu .pai { cursor: pointer; }


/* TEMPLATE */
nav { padding: 0 40px; display: flex; justify-content: space-between; align-items: center; position: fixed; width: calc(100% - 80px); z-index: 999; }
nav .nav_logo { position: relative; }
nav .menu { display: flex; gap: 30px; font-weight: 700; }
nav .menu a { color: white;  text-decoration: none; }
nav .menu .pai { position: relative; }
nav .menu .pai:hover { cursor: pointer; }
nav .menu .pai svg { transform: translate(0, 4px); }
nav .menu .submenu { overflow: hidden; transform-origin: top; position: absolute; z-index: 10; left: -8px; top: calc(100% + 10px); background-color: black; display: flex; flex-direction: column; justify-content: stretch; padding: 8px 0; border-radius: 10px; transition: transform 0.25s ease-out; }
nav .menu .submenu a { text-wrap: nowrap; padding: 6px 10px; color: #B2B2B2; font-weight: 600; font-size: 16px; }
nav .menu .submenu a:hover { background-color: #FFC440; color: black; }
nav .menu .momentoAtivo { color: #FFC440 !important; }
.mobilenav { display: none; }

footer { display: flex; flex-direction: column; width: 100%; padding: 48px 0; background-color: black; align-items: center; }
footer .footer { display: flex; justify-content: space-evenly; width: 100%; }
footer .footer-esquerda { display: flex; gap: 48px; align-items: center; margin-bottom: 48px; }
footer .separador { width: 1px; background-color: rgba(255, 255, 255, 0.5); height: 70px; }
footer .expediente { font-family: Rubik; font-size: 16px; }
footer .logo_footer { width: 100px; }


/* INDEX */
.home1, .home2, .home3, .home4 { position: relative; z-index: 1; }

.home1 { background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url("bg_container_1.jpg") lightgray 50% / 100% repeat-y; }
.home1 .container { display: flex; padding: 120px 20px 80px 20px; justify-content: center; align-items: flex-start; }
.home1 .contgrid { display: grid; grid-template-columns: 5fr 7fr; grid-gap: 24px; align-items: center; }
.home1 .contgrid .col_esquerda { display: flex; flex-direction: column; gap: 40px; }
.home1 .contgrid .col_esquerda .col_esquerda_texto { display: flex; flex-direction: column; gap: 20px; }
.home1 .contgrid .col_esquerda .txt1 { font-family: Oswald; font-size: 36px; font-weight: 700; }
.home1 .contgrid .col_direita { position: relative; width: 100%; aspect-ratio: 1520 / 1199; background-image: url("computador-composicao-top-v2.png"); background-size: cover; }
.home1 .contgrid .col_direita .video_top { position: absolute; aspect-ratio: 16 / 9; width: 61%; left: 20.6%; top: 18.5%; }

.home2 { background: url("bg_container_claro.jpg") lightgray 50% / 100% repeat-y; border-top: 6px solid #F11E17; }
.home2 .container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 20px 80px 20px; }
.home2 .container .txt1 { font-family: Oswald; font-size: 40px; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; }
.home2 .container .txt2 { color: #00E0DA; font-size: 24px; margin-bottom: 48px; }
.home2 .container .txt3 { display: grid; grid-template-columns: 2fr 8fr 2fr; grid-template-areas: ". a ."; grid-gap: 24px; }
.home2 .container .txt3 div:nth-child(1) { grid-area: a; text-align: center; }
.home2 .container .txt3 div:nth-child(1) p { margin: 0; margin-bottom: 24px; }
.home2 .container .txt3 div:nth-child(1) p:last-child { margin-bottom: 0; }
.home1 .contgrid .col_esquerda .txt2, .home2 .container .txt3 { line-height: 150%; }

.home2 .carrossel { overflow: hidden; position: relative; width: 100%; }
.home2 .carrossel .link_carrossel { position: absolute; transition: opacity 0.5s ease-in-out; display: grid; left: 50%; top: 0; padding: 36px; width: 465px; max-width: calc(100vw - 72px); grid-template-columns: 1fr max-content; grid-template-areas: "i i" "t b" "p b"; }
.home2 .carrossel .comTransicao { transition: transform 0.25s ease-out }
.home2 .carrossel .link_carrossel .thumb { aspect-ratio: 16 / 9; width: 100%; grid-area: i; margin-bottom: 20px; }
.home2 .carrossel .link_carrossel .thumb iframe { width: 100%; aspect-ratio: 16 / 9; }
.home2 .carrossel .link_carrossel .titulo { font-size: 24px; font-weight: 700; grid-area: t; transform: translate(0, -10px); }
.home2 .carrossel .link_carrossel .personagem { font-size: 18px; color: #FFC440; grid-area: p; transform: translate(0, -10px); }
.home2 .carrossel .link_carrossel .titulo, .home2 .carrossel .link_carrossel .personagem { font-family: Oswald; text-shadow: -2px 0 0 rgba(0, 219, 255, 0.45); }
.home2 .carrossel .link_carrossel .botao { display: flex; align-items: flex-start; justify-content: center; grid-area: b; }
.home2 .carrossel .link_carrossel .botao button { transform: translate(-4px, 0); }
.home2 .esteira_nav { display: grid; grid-template-columns: max-content 100px max-content; }
.home2 .esteira_nav div:nth-child(2){ font-size: 16px; font-weight: 600; color: #FBB835; text-align: center; letter-spacing: 3.2px; }
.home2 .container_setinhas { padding-top: 0 !important; }

.home3 { background: linear-gradient(0deg, rgba(255, 180, 34, 0.7) 0%, rgba(255, 180, 34, 0.7) 100%), url("bg_container_2.jpg") lightgray 50% / cover; border-top: 6px solid #00DBFF; }
.home3 .container, .home4 .container, .home6 .container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; padding: 100px 20px; align-items: center; }
.home3 .container .col_esquerda, .home4 .container .col_direita, .home6 .container .col_direita { display: flex; flex-direction: column; gap: 40px; }
.home3 .container .col_esquerda div:nth-child(1) { color: #014F63; font-family: Oswald; font-size: 40px; font-weight: 700; line-height: 120%; }
.home3 .container .col_esquerda div:nth-child(2) { color: #45133E; font-size: 18px; font-weight: 500; line-height: 150%; letter-spacing: -0.55px; }
.home3 .container .col_esquerda div:nth-child(2) p { margin: 0; margin-bottom: 24px; }
.home3 .container .col_esquerda div:nth-child(2) p:last-child { margin-bottom: 0; }
.home3 .container .col_esquerda div:nth-child(3) button { color: white; background-color: #45133E; box-shadow: 3px -3px 0 0 #00E0DA, -3px 3px 0 0 #F11E17; }
.home3 .container .col_esquerda div:nth-child(3) button:hover { background-color: black; }
.home3 .container .col_direita iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; }

.home4 { background: url("bg_4acupula.jpg") lightgray 50% / cover; background-color: black; border-top: 6px solid #F11E17; }
.home4 .container .col_esquerda img { width: 100%; }
.home4 .container .col_direita div:nth-child(1) { font-family: Oswald; font-size: 36px; font-weight: 700; line-height: 120%; }
.home4 .container .col_direita div:nth-child(2) p { margin: 0; margin-bottom: 24px; font-weight: 400; line-height: 150%; }
.home4 .container .col_direita div:nth-child(2) p:last-child { margin-bottom: 0; }

.home6 { background: linear-gradient(0deg, rgba(208, 66, 160, 0.60) 0%, rgba(208, 66, 160, 0.60) 100%), url("bg_container_6.jpg") lightgray 50% / cover; background-color: black; border-top: 6px solid #F11E17; }
.home6 .container .col_esquerda { text-align: center; }
.home6 .container .col_esquerda img { width: 100%; max-width: 315px; }
.home6 .container .col_direita div:nth-child(1) { font-family: Oswald; font-size: 36px; font-weight: 700; line-height: 120%; }
.home6 .container .col_direita div:nth-child(2) p { margin: 0; margin-bottom: 24px; font-weight: 400; line-height: 150%; }
.home6 .container .col_direita div:nth-child(2) p:last-child { margin-bottom: 0; }


/* ARTIGO */
.artigo {  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url("bg_limpo_azul.jpg") lightgray 50% / 100% repeat-y; }
.artigo .container { padding: 120px 20px 80px 20px; }
.artigo .container .conteudo { display: grid; grid-template-areas: "t e" "f e"; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; align-items: center; justify-content: center; }
.artigo .container .conteudo .titulo { grid-area: t; color: #FBB835; font-size: 40px; font-weight: 700; text-transform: uppercase; font-family: Oswald; }
.artigo .container .conteudo .fulltext { grid-area: f; }
.artigo .container .conteudo .fulltext p { margin: 0; margin-bottom: 14px; line-height: 160% }
.artigo .container .conteudo .fulltext p:last-child { color: #00E0DA; margin-bottom: 0; }
.artigo .container .conteudo .imagem, .artigo .container .conteudo .citacao { grid-area: e; }
.artigo .container .conteudo .imagem { text-align: center; }
.artigo .container .conteudo .citacao { padding: 50px; font-family: Oswald; background: url(img_citacao_topo.png), url(img_citacao_base.png); background-repeat: no-repeat; background-position: 10px 10px, calc(100% - 10px) calc(100% - 10px); background-size: 35px; font-size: 24px; color: #FFC440; font-weight: 700; }

.artigo .container .documentario { display: flex; flex-direction: column; gap: 40px; margin-bottom: 40px; }
.artigo .container .documentario .titulo { grid-area: t; color: #FBB835; font-size: 40px; font-weight: 700; text-transform: uppercase; font-family: Oswald; }
.artigo .container .documentario .fulltext p { margin: 0; margin-bottom: 14px; line-height: 160% }
.artigo .container .documentario .grade1, .artigo .container .documentario .grade2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; grid-template-areas: "a b"; }
.artigo .container .documentario .grade1 div:nth-child(1), .artigo .container .documentario .grade2 div:nth-child(2) { grid-area: a; }
.artigo .container .documentario .grade1 div:nth-child(2), .artigo .container .documentario .grade2 div:nth-child(1) { grid-area: b; }
.artigo .container .documentario .grade1 img, .artigo .container .documentario .grade2 img { width: 100% }
.artigo .container .documentario .com_titulo p:first-child { color: #FBB835; font-size: 40px; font-weight: 700; text-transform: uppercase; }
.artigo .container .documentario .grade2 iframe { aspect-ratio: 16 / 9; width: 100%; box-shadow: 8px -12px 0 0 #0FF, -8px 12px 0 0 #F0F; }

.artigo .container .video { display: grid; grid-template-columns: 1fr 10fr 1fr; grid-template-areas: ". a ."; margin-top: 80px; margin-bottom: 80px; }
.artigo .container .video .videoframe { grid-area: a; width: 100%; }
.artigo .container .video .videoframe .videovideo { width: 100%; aspect-ratio: 16 / 9; box-shadow: 8px -12px 0 0 #0FF, -8px 12px 0 0 #F0F; }

.multirio { background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url("bg_container_1.jpg") lightgray 50% / 100% repeat-y; border-top: 6px solid #00E0DA; }
.multirio .container { padding: 80px 0; }
.multirio .container .conteudo_multirio { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: 40px; }
.multirio .container .conteudo_multirio a { text-decoration: none; color: #FBB835; font-weight: 700; }
.multirio .container .conteudo_multirio .titulo { color: #FBB835; font-size: 40px; font-weight: 700; text-transform: uppercase; }
.multirio .container .conteudo_multirio .videovideo { width: 100%; aspect-ratio: 16 / 9; }

.comum { background: url("bg_container_1.jpg") lightgray 50% / 100% repeat-y; border-top: 6px solid #F11E17; }
.comum .container .conteudocomum { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; margin: 80px 0; }
.comum .container .conteudocomum .descricao p { margin: 0; line-height: 160% }
.comum .container .conteudocomum .descricao p:nth-child(1) { color: #FBB835; font-family: Oswald; font-size: 40px; font-style: normal; font-weight: 700; margin-bottom: 40px; }
.comum .container .conteudocomum .descricao p:nth-child(2) { margin-bottom: 28px; color: #00E0DA; line-height: 150%; font-size: 24px; }
.comum .container .conteudocomum .descricao p:nth-child(3) { margin-bottom: 40px; line-height: 150%; }


/* MODIFICADORES MOBILE */
@media only screen and (max-width: 1200px){
    .container { width: calc(100vw - 60px); }
    /* TEMPLATE */
    nav { display: none; }
    .mobilenav { display: block; position: fixed; background-color: black; width: 100%; max-height: 100vh; z-index: 9999; }
    .mobilenav .nav_exposto { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; }
    .mobilenav .nav_oculto { display: none; flex-direction: column; gap: 40px; padding: 20px 0; overflow-y: scroll; height: calc(100vh - 107px); }
    .mobilenav .nav_oculto a, .mobilenav .nav_oculto div { text-align: center; font-size: 24px; font-weight: 700; }
    .mobilenav .mobile_submenu { display: none; flex-direction: column; color: rgba(255, 255, 255, 0.7); padding-top: 5px; }
    .mobilenav .mobile_submenu a { font-size: 18px; font-weight: 600; padding: 10px 0; text-decoration: none; color: rgba(255, 255, 255, 0.7); }

    footer { align-items: center; }
    footer .footer { flex-direction: column; }
    footer .footer-esquerda { justify-content: center; }
    footer .expediente { margin-top: 48px; text-align: center; padding: 0 40px; }


    /* INDEX */
    .home1 .container { display: flex; padding: 120px 0 80px 0; justify-content: center; align-items: flex-start; }
    .home1 .contgrid { display: grid; grid-template-columns: 1fr; grid-gap: 24px; width: 100%; }
    .home1 .contgrid .col_esquerda { width: 100%; max-width: calc(100vw - 60px); }
    .home1 .contgrid .col_esquerda div { text-align: center; }
    .home1 .contgrid .col_esquerda div img { max-width: 180px !important; }
    .home1 .contgrid .col_esquerda .col_esquerda_texto .txt1 { font-size: 40px; }
    .home1 .contgrid .col_direita { width: 126%; transform: translate(-13%, 0); }

    .home2 .container .txt1, .home2 .container .txt2 { text-align: center; }
    .home2 .container .txt3 { display: grid; grid-template-columns: 1fr; grid-template-areas: "a" "b"; grid-gap: 24px; }
    .home2 .carrossel .link_carrossel { grid-template-columns: 1fr; grid-template-areas: "i" "t" "p" "b"; }
    .home2 .carrossel .link_carrossel .titulo, .home2 .carrossel .link_carrossel .personagem { text-align: center; }
    .home2 .carrossel .link_carrossel .botao { margin-top: 20px; }

    .home3 .container, .home4 .container, .home6 .container { grid-template-columns: 1fr; max-width: calc(100vw - 80px); }
    .home3 .container .col_esquerda, .home4 .container .col_direita, .home6 .container .col_direita { max-width: calc(100vw - 80px); }
    .home3 .container .col_direita iframe { margin-top: 24px; }
    
    .home4 .container .col_esquerda img { width: 100%; }
    .home4 .container .col_direita div:nth-child(1) { font-size: 40px; }
    .home4 .container .col_direita div:nth-child(2) p { margin-bottom: 24px; font-weight: 400; }
    .home4 .container .col_direita div:nth-child(2) p b { font-weight: 700; }
    .home4 .container .col_direita div:nth-child(2) p:last-child { margin-bottom: 0; }

    .home6 .container .col_esquerda img { width: 100%; }
    .home6 .container .col_direita div:nth-child(1) { font-size: 40px; }
    .home6 .container .col_direita div:nth-child(2) p { margin-bottom: 24px; font-weight: 400; }
    .home6 .container .col_direita div:nth-child(2) p b { font-weight: 700; }
    .home6 .container .col_direita div:nth-child(2) p:last-child { margin-bottom: 0; }


    /* ARTIGO */
    .artigo .container .conteudo { grid-template-areas: "t" "i" "f" "e"; grid-template-columns: 1fr; max-width: calc(100vw - 80px); }
    .artigo .container .conteudo .titulo { grid-area: t; color: #FBB835; font-size: 40px; font-weight: 700; text-transform: uppercase; font-family: Oswald; }
    .artigo .container .conteudo .fulltext { grid-area: f; }
    .artigo .container .conteudo .imagem { grid-area: i; }
    .artigo .container .conteudo .citacao { grid-area: e; }
    .artigo .container .conteudo .imagem { text-align: center; }
    .artigo .container .video { grid-template-columns: 1fr; grid-template-areas: "a"; max-width: calc(100vw - 80px); }

    .comum .container .conteudocomum { grid-template-columns: 1fr; max-width: calc(100vw - 80px); }
    .comum .container .conteudocomum .descricao p:nth-child(4) { text-align: center; margin-bottom: 40px; }

    .artigo .container .documentario .grade1, .artigo .container .documentario .grade2 { grid-template-columns: 1fr; grid-template-areas: "a" "b"; }
    .multirio .container .conteudo_multirio { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 450px){
    footer .footer-esquerda { flex-direction: column; margin-bottom: 96px; }
    footer .separador { width: 50vw; height: 1px; }
    footer .logo_footer { width: 130px; }
    footer .btn_spotify { width: 180px; }
}