@charset "utf-8";

/*
    Theme name: Simpósio Luso-Brasileiro - 2025
    Author: CMMG - Hub Tecnológico
    Author URI: https://cmmg.edu.br/hub/apresentacao
    Version: 2025.11.26
    Requires at least: 6.4
    Tested up to: 6.4
    Requires PHP: 7.4
    Text domain: __cmmg

    Description: Tema desenvolvido para a página do Simpósio Luso-Brasileiro - 2025
*/

@import url('https://use.typekit.net/gfe0exv.css');

/* GERAL */

:root{

    --lubrCorRgbAzulMedio : 7, 68, 89;
    --lubrCorHexAzulMedio : #074459;
    --lubrCorRgbAzulEscuro: 7, 53, 79;
    --lubrCorHexAzulEscuro: #07354f;
    --lubrCorRgbVerdeLubr : 20, 141, 149;
    --lubrCorHexVerdeLubr : #148d95;
}

body{

    font-family: 'Rubik', sans-serif;
    color      : #fefefe;
}

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

    body{

        font-size: 1.5em;
    }
}

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

    body{

        font-size: 1.4em;
    }
}

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

    body{

        font-size: 1.3em;
    }
}

main{

    background-color: var(--lubrCorHexAzulEscuro);
}

footer,
section{

    position        : relative;
    padding         : 7em 3em;
    background-color: rgba(var(--lubrCorRgbAzulEscuro), 90%);
}

section:last-of-type{

    padding-bottom: 7em;
}

footer > div > h2,
section > div > h2{

    text-transform: uppercase;
}

@media only screen and (orientation: portrait){

    section{

        background-color: rgba(var(--lubrCorRgbAzulEscuro), 75%);
    }
}

section > div{

    max-width: 800px;
    margin   : 0 auto;
}

h2, h3, h4, h5, h6{

    color      : #fefefe;
    line-height: 1.3em;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
}

a{

    --cmmgLinkCorHex1  : #fefefe;
    background-position: 50% 100%;
}

.__cmmgBotao{

    --cmmgBotaoCorHex1  : var(--lubrCorHexVerdeLubr);
    --cmmgBotaoCorHexTxt: var(--lubrCorHexAzulEscuro);

    text-transform      : uppercase;
    font-weight         : 500;
    font-size           : 1.5em;
    letter-spacing      : .1em;
    padding             : .5em 1.3em .4em 1.3em !important;
    border-radius       : 0;
    background-position : 50%;
}

/* HEADER - NAV */

#__cmmgNav{

    font-size: .95em;
}

:not(.__cmmgNavRolagem) #__cmmgLogoHeader img{

    height: 0;
}

#__cmmgLayoutMenuPrincipal a:not(.__cmmgBotao){

    text-transform: uppercase;
}

/* HEADER - BANNER */

.lubrBannerFundo{

    --lubrBannerFundoDivX             : 5em;
    --lubrBannerFundoGradiente1       : radial-gradient(circle at 40% 50%, var(--lubrCorHexAzulEscuro), transparent, transparent);
    --lubrBannerFundoGradiente2       : radial-gradient(circle at 0 0, var(--lubrCorHexAzulMedio), transparent, transparent);
    --lubrBannerFundoGradiente3       : radial-gradient(circle at 100% 15%, var(--lubrCorHexVerdeLubr), transparent, transparent);
    --lubrBannerFundoCirculosX        : calc(50vw - var(--lubrBannerFundoDivX) - 50.5em);
    --lubrBannerFundoCirculosY        : calc(calc(50 * var(--cmmgVh)) - 13.5em);
    --lubrBannerFundoCirculosSize     : 23.7em;
    --lubrBannerFundoGloboX           : calc(50vw - var(--lubrBannerFundoDivX) - 58em);
    --lubrBannerFundoGloboY           : calc(calc(var(--cmmgVh) * 50) - calc(var(--lubrBannerFundoGloboSize) / 2)); /* =50% - Porque? - Sei lá, iOS só aceitou assim */
    --lubrBannerFundoGloboSize        : 43.5em;
    --lubrBannerFundoParticulasEsqX   : calc(50vw - var(--lubrBannerFundoDivX) - 51em);
    --lubrBannerFundoParticulasEsqY   : calc(calc(50 * var(--cmmgVh)) - 10.5em);
    --lubrBannerFundoParticulasEsqSize: 43.5em;
    --lubrBannerFundoParticulasDirX   : calc(50vw + 30em);
    --lubrBannerFundoParticulasDirY   : calc(calc(50 * var(--cmmgVh)) - 45em);
    --lubrBannerFundoParticulasDirSize: 38em;
}

.lubrBannerFundo,
.lubrBannerFundo::after{

    font-size            : 1.73vmin;
    line-height          : 2em;

    background-repeat    : no-repeat;
    background-attachment: fixed !important;
    background-color     : var(--lubrCorHexAzulEscuro);

    background-size      : var(--lubrBannerFundoCirculosSize),
                           var(--lubrBannerFundoGloboSize),
                           var(--lubrBannerFundoParticulasEsqSize),
                           var(--lubrBannerFundoParticulasDirSize),
                           100%,
                           100%,
                           100%;

    background-position  : var(--lubrBannerFundoCirculosX)      var(--lubrBannerFundoCirculosY),
                           var(--lubrBannerFundoGloboX)         var(--lubrBannerFundoGloboY),
                           var(--lubrBannerFundoParticulasEsqX) var(--lubrBannerFundoParticulasEsqY),
                           var(--lubrBannerFundoParticulasDirX) var(--lubrBannerFundoParticulasDirY),
                           50%,
                           50%,
                           50%;

    background-blend-mode: color-dodge,
                           color-dodge,
                           color-dodge,
                           color-dodge,
                           normal,
                           normal,
                           normal;

    background-image     : url('./imagens/geral/circulos.png'),
                           url('./imagens/geral/globo.png'),
                           url('./imagens/geral/particulasEsquerda.svg'),
                           url('./imagens/geral/particulasDireita.svg'),
                           var(--lubrBannerFundoGradiente1),
                           var(--lubrBannerFundoGradiente2),
                           var(--lubrBannerFundoGradiente3);
}

/* .__cmmgCssIos .lubrBannerFundo,
.__cmmgCssIos .lubrBannerFundo::after{

    background-attachment: initial !important;
} */

.lubrBannerFundo{

    position             : initial;
    background-size      : 100%;
    background-position  : 50%;
    background-blend-mode: normal;
    background-image     : var(--lubrBannerFundoGradiente1), var(--lubrBannerFundoGradiente2), var(--lubrBannerFundoGradiente3);
}

.lubrBannerFundo::after{

    content : '';
    position: fixed;
    z-index : 0;
    display : block;
    width   : 100%;
    height  : 100%;
}

.lubrBannerFundo > div{

    margin  : auto;
    padding : 3em 0 3em var(--lubrBannerFundoDivX);
    width   : 37.5em;
    position: relative;
    z-index : 1;
}

@media only screen and (orientation: portrait){

    .lubrBannerFundo{

        --lubrBannerFundoDivX          : 0em;
        --lubrBannerFundoCirculosX     : calc(50vw - var(--lubrBannerFundoDivX) - 14.5em);
        --lubrBannerFundoCirculosY     : calc(calc(50 * var(--cmmgVh)) - 54em);
        --lubrBannerFundoGloboX        : 50%;
        --lubrBannerFundoGloboY        : calc(calc(50 * var(--cmmgVh)) - 60em);
        --lubrBannerFundoParticulasEsqX: calc(50vw - var(--lubrBannerFundoDivX) - 60em);
        --lubrBannerFundoParticulasEsqY: calc(calc(50 * var(--cmmgVh)) - 5em);
        --lubrBannerFundoParticulasDirX: calc(50vw + 5em);
        --lubrBannerFundoParticulasDirY: calc(calc(50 * var(--cmmgVh)) - 65em);
    }

    .lubrBannerFundo::after{

        background-size: 23.7em,
                         43.5em,
                         60em,
                         38em,
                         100%,
                         100%,
                         100%;
    }

    .__cmmgBodyRolagem .lubrBannerFundo::after{

        opacity: .1;
    }

    .lubrBannerFundo > div{

        padding: calc(3em + calc(15 * var(--cmmgVh))) 0 3em var(--lubrBannerFundoDivX);
    }
}

section#lubrSectionBanner{

    width     : 100%;
    min-height: calc(100 * var(--cmmgVh));
    display   : flex;
    padding   : 0;
}

section#lubrSectionBanner h1,
section#lubrSectionBanner h2{

    font-weight   : 500;
    text-transform: uppercase;
    color         : var(--lubrCorHexVerdeLubr);
}

section#lubrSectionBanner h1{

    font-size: 1.8em;
    margin   : 0 0 .5em 0;
}

section#lubrSectionBanner h2{

    font-size: 1.5em;
    margin   : 0 0 1.5em 7em;
}

section#lubrSectionBanner h3{

    color      : #fefefe;
    font-size  : 2.07em;
    font-weight: 300;
    text-align : right;
    margin     : 0 0 1.5em auto;
}

section#lubrSectionBanner h3#lubrLayoutFrontPageHeaderData,
section#lubrSectionBanner h3#lubrLayoutFrontPageHeaderLocalHora{

    font-weight: 500;
    font-size  : 2em;
    color      : var(--cmmgCorHexDouradoCmmg);
}

section#lubrSectionBanner h3#lubrLayoutFrontPageHeaderData{

    margin-bottom: .3em;
}

section#lubrSectionBanner h3#lubrLayoutFrontPageHeaderLocalHora{

    font-size    : 1.15em;
    margin-bottom: 3.5em;
}

div#lubrLayoutFrontPageHeaderApoio{

    display  : flex;
    gap      : 2em;
    translate: 10.5em 0;
}

div#lubrLayoutFrontPageHeaderApoio img{

    height: 3em;
}

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

    div#lubrLayoutFrontPageHeaderApoio{

        translate: initial;
        margin   : 0 0 0 auto;
        width    : fit-content;
    }
}

section#lubrSectionBanner .__cmmgBotao{

    margin : 3em 0 0 auto;
    width  : 15.5em !important;
    display: block;
}

@media only screen and (orientation: portrait){

    section#lubrSectionBanner .__cmmgBotao{

        width    : calc(100% - 2.6em - 2px) !important;
        font-size: 2em;
    }
}

/* HEADER - BANNER - ANIMAÇÕES */

.__cmmgWindowLoader .lubrBannerFundo::after{

    animation: lubrBannerFundoPaisagem 3s ease-out;
}

.__cmmgWindowLoader .lubrBannerFundo > div{

    animation: __cmmgFade 1.5s ease-in-out;
}

@media only screen and (orientation: portrait){

    .__cmmgWindowLoader .lubrBannerFundo::after{

        animation: lubrBannerFundoRetrato 3s ease-out;
    }
}

@keyframes lubrBannerFundoPaisagem{

    from {

        opacity            : 0;

        background-size    : var(--lubrBannerFundoCirculosSize),
                             var(--lubrBannerFundoGloboSize),
                             calc(var(--lubrBannerFundoParticulasEsqSize) / 1.2),
                             calc(var(--lubrBannerFundoParticulasDirSize) / 1.2),
                             100%,
                             100%,
                             100%;

        background-position: -30vw var(--lubrBannerFundoCirculosY),
                             -50vw var(--lubrBannerFundoGloboY),
                             var(--lubrBannerFundoParticulasEsqX) var(--lubrBannerFundoParticulasEsqY),
                             var(--lubrBannerFundoParticulasDirX) var(--lubrBannerFundoParticulasDirY),
                             50%,
                             50%,
                             50%;
    }

    to{

        opacity            : 1;

        background-size    : var(--lubrBannerFundoCirculosSize),
                             var(--lubrBannerFundoGloboSize),
                             var(--lubrBannerFundoParticulasEsqSize),
                             var(--lubrBannerFundoParticulasDirSize),
                             100%,
                             100%,
                             100%;

        background-position: var(--lubrBannerFundoCirculosX)      var(--lubrBannerFundoCirculosY),
                             var(--lubrBannerFundoGloboX)         var(--lubrBannerFundoGloboY),
                             var(--lubrBannerFundoParticulasEsqX) var(--lubrBannerFundoParticulasEsqY),
                             var(--lubrBannerFundoParticulasDirX) var(--lubrBannerFundoParticulasDirY),
                             50%,
                             50%,
                             50%;
    }
}

@keyframes lubrBannerFundoRetrato{

    from {

        opacity            : 0;

        background-size    : var(--lubrBannerFundoCirculosSize),
                             var(--lubrBannerFundoGloboSize),
                             calc(var(--lubrBannerFundoParticulasEsqSize) / 1.2),
                             calc(var(--lubrBannerFundoParticulasDirSize) / 1.2),
                             100%,
                             100%,
                             100%;

        background-position: var(--lubrBannerFundoCirculosX) -20vh,
                             var(--lubrBannerFundoGloboX) -40vh,
                             var(--lubrBannerFundoParticulasEsqX) var(--lubrBannerFundoParticulasEsqY),
                             var(--lubrBannerFundoParticulasDirX) var(--lubrBannerFundoParticulasDirY),
                             50%,
                             50%,
                             50%;
    }

    to{

        opacity            : 1;

        background-size    : var(--lubrBannerFundoCirculosSize),
                             var(--lubrBannerFundoGloboSize),
                             var(--lubrBannerFundoParticulasEsqSize),
                             var(--lubrBannerFundoParticulasDirSize),
                             100%,
                             100%,
                             100%;

        background-position: var(--lubrBannerFundoCirculosX)      var(--lubrBannerFundoCirculosY),
                             var(--lubrBannerFundoGloboX)         var(--lubrBannerFundoGloboY),
                             var(--lubrBannerFundoParticulasEsqX) var(--lubrBannerFundoParticulasEsqY),
                             var(--lubrBannerFundoParticulasDirX) var(--lubrBannerFundoParticulasDirY),
                             50%,
                             50%,
                             50%;
    }
}

/* SECTION - SOBRE / RESULTADOS */

#lubrSectionSobre      .__cmmgBotao,
#lubrSectionResultados .__cmmgBotao{

    display: block;
    margin : 0 auto;
    width  : fit-content !important;
}

#lubrSectionSobre      .lubrBotaoIscrevaSe,
#lubrSectionResultados .lubrBotaoIscrevaSe{

    margin-top: 4em;
}

.lubrSectionSobrePrazo{

    text-align      : center;
    padding         : 2em;
    margin          : 7em 0 0 0;
    border-radius   : .1em;
    border-width    : 1px;
    border-color    : rgba(255, 255, 255, 10%);
    background-color: rgba(255, 255, 255, 5%);
}

.lubrSectionSobrePrazo :last-child{

    margin-bottom: 0;
}


/* SECTION - PROGRAMAÇÃO / COMISSÃO ORGANIZADORA */

#lubrSectionProgramacao h3,
#lubrSectionComissao    h3{

    color        : var(--cmmgCorHexTurquesaCmmg);
    padding      : 0 0 .3em 0;
    border-color : var(--cmmgCorHexTurquesaCmmg);
    border-width : 0 0 2px 0;
    border-radius: .1em;
}

.lubrLayoutFrontPageProgramacaoHora{

    float       : left;
    font-size   : 1.1em;
    font-weight : 500;
    text-align  : center;
    color       : var(--cmmgCorHexTurquesaCmmg);
    border-width: 2px;
    padding     : .5em;
    margin      : 0 3em .7em 0;
    width       : 8em;
}

@media only screen and (orientation: portrait){

    .lubrLayoutFrontPageProgramacaoHora{

        float: initial;
    }
}

.lubrLayoutFrontPageProgramacaoHora + div{

    display: table;
    padding: .6em 0 0 0;
}

#lubrSectionProgramacao > div > ul > li{

    margin-bottom: 5em;
}

#lubrSectionProgramacao > div > ul > li:last-child{

    margin-bottom: 0;
}

#lubrSectionProgramacao h4{

    font-weight  : 300;
    margin-bottom: 1em;
}

#lubrSectionProgramacao h4 + div > ul > li,
#lubrSectionComissao > div > ul > li > ul > li{

    margin         : 0 0 2em .9em;
    list-style-type: square;
}

#lubrSectionComissao > div > ul > li:not(:last-child) > ul > li:last-child{

    margin-bottom: 5em;
}

/* SECTION - DINÂMICA DO EVENTO */

#lubrSectionDinamica h3,
#lubrSectionDinamica h4{

    margin: 2em 0;
}

#lubrSectionDinamica h3{

    color: var(--cmmgCorHexTurquesaCmmg);
}

#lubrSectionDinamica li, #lubrSectionVideos li{

    list-style-type: disc;
    margin         : 0 0 1em 1em;
}

/* SECTION - TRABALHOS EM DESTAQUE VIDEOS */

.lubrSectionVideosLista{

    display              : grid;
    grid-auto-rows       : max-content;
    grid-template-columns: repeat(auto-fill, 20em);
    gap                  : 2em 3em;
    margin               : 0 auto;
    justify-content      : center;
    padding              : 2em 0 0 0;
}
 
.lubrSectionVideosLista li{

    display        : flex;
    flex-direction : column;
    border         : 1px solid #cccccc;
    border-radius  : 1em;
}

#lubrSectionVideos iframe{

    border-radius: 1em 1em 0 0;
}

.lubrSectionVideosLista li div{

    padding: 1em;
}

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

    #lubrSectionVideos ul{

        grid-template-columns: repeat(auto-fill, 15em);
        justify-content      : center;
    }
}

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

    #lubrSectionVideos ul{
        
        grid-template-columns: repeat(auto-fill, 18.7em);
        justify-content      : center;
    }
} 


/* FOOTER */

#__cmmgFooter{

    text-align      : center;
    padding-bottom  : 3em;
    background-color: rgba(var(--lubrCorRgbAzulEscuro), 97%);
}

#__cmmgFooter > div{

    margin   : 0 auto;
    max-width: 1200px;
}

#__cmmgFooter h2{

    margin: 0;
}

#__cmmgFooter h2 + div{

    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
    gap           : 5em;
    max-width     : 45em;
    margin        : 4em auto 7em auto;
}

#__cmmgFooter .__cmmgLinkImg{

    margin: auto;
}

#__cmmgFooter .__cmmgLinkImg::after{

    outline-color: #fefefe;
}

#__cmmgFooter img{

    max-height: 5em;
}