@charset "utf-8";

/*
    Theme name: Tranferência Medicina - CMMG
    Author: HUB Tecnológico
    Author URI: https://cmmg.edu.br/hub/apresentacao
    Version: 2025.05.22
    Requires at least: 6.4
    Tested up to: 6.4
    Requires PHP: 7.4
    Text domain: __cmmg

    Description: Tema desenvolvido para a página de Tranferência Medicina - CMMG
*/

:root{

    --transCorHexBeje: #cbc5b9;
    --transCorRgbBeje: 203, 197, 185;
}

/***************************************************************************************************
    Base
***************************************************************************************************/

body{

    font-family: 'Absara Sans', sans-serif;
    font-size  : 1.6rem;
    line-height: 1.8em;
    font-weight: 300;
    color      : var(--cmmgCorHexCinzaInferno);
    text-align : left;
}

/***************************************************************************************************
    HTML
***************************************************************************************************/

h1, h2, h3, h4, h5, h6{

    color: var(--cmmgCorHexTurquesaCmmg);
}

main{

    position: relative;
    overflow: hidden;
}

section{

    margin   : auto;
    padding  : 0 4em 5em 4em;
    position : relative;
}

section > div{

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

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

    section{

        padding: 4em 2em;
    }
}

section h2{

    font-size   : 3em;
    text-align  : center;
    padding-top : 2em;
    font-variant: all-petite-caps;
}

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

    section h2{

        font-size: 2em;
    }
}

a, .__cmmgSublinhadoAnimado{

    --cmmgLinkCorHex1: var(--cmmgCorHexTurquesaCmmg);
    --cmmgLinkCorHex2: var(--cmmgCorHexTurquesaCmmg);
}

/***************************************************************************************************
    Classes genéricas
***************************************************************************************************/

.__cmmgLinkImg::after{

    outline-color: var(--cmmgCorHexTurquesaCmmg);
}

.__cmmgBotao{

    --cmmgBotaoCorHex1: var(--cmmgCorHexTurquesaCmmg);

    padding           : .5em 1.5em .4em 1.5em !important;
    font-variant      : all-petite-caps;
}

section > div .__cmmgBotao:last-child{

    font-size: 1.8em;
    display  : block;
    max-width: 10em;
    margin   : 2em auto 0 auto;
}

.__cmmgLayoutAcordeao{

    --cmmgLayoutAcordeaoCorHexBase: var(--cmmgCorHexTurquesaCmmg);
}

.__cmmgLayoutListaAbas{

    --cmmgLayoutListaAbasCorHexBase: var(--cmmgCorHexTurquesaCmmg);
}

/***************************************************************************************************
    HEADER: NAV
***************************************************************************************************/

#__nav{

    max-width: 70vw;
    translate: -50% 0;
    left     : 50%;
}

#__nav.__cmmgNavRolagem{

    max-width: 100vw;
    translate: initial;
    left     : 0;
}

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

    #__nav{

        max-width: 100vw;
        translate: initial;
        left     : 0;
    }
}

/***************************************************************************************************
    HEADER
***************************************************************************************************/

#__header.transPaginaInicial{

    --headerAlturaMin    : calc(90 * var(--cmmgVh));
    --headerGranTamanho  : 720px;

    display              : flex;
    min-height           : var(--headerAlturaMin);
    background-color     : var(--cmmgCorHexPrincipal);
    background-attachment: fixed;
    background-blend-mode: normal, overlay;
    background-repeat    : no-repeat, repeat;
    background-size      : auto 65%, var(--headerGranTamanho);
    background-position  : 70% center, center;
    background-image     : url('./imagens/geral/fundoFoto.png'),
                           url('./imagens/geral/fundoGranulado.png');
}

.__cmmgCssIos #__header.transPaginaInicial{

    --headerGranTamanho  : 100%;
    background-attachment: scroll;
}

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

    #__header.transPaginaInicial{

        --headerAlturaMin: calc(100 * var(--cmmgVh));
    }
}

div#transHeaderConteudo{

    --fSize  : 1.6vmin;

    font-size: var(--fSize);
    color    : #fefefe;
    margin   : auto auto auto 15%;
    padding  : 4em 0 0 0;
    overflow : hidden;
}

@media only screen and (orientation: portrait){

    div#transHeaderConteudo{

        font-size: max(var(--fSize), 1rem);
    }
}

h1{

    font-size   : 4em;
    color       : var(--cmmgCorHexTurquesaCmmg);
    font-variant: all-petite-caps;
    margin      : 0 0 1.2em 0;
    position    : relative;
    z-index     : 1;
}

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

    h1{

        font-size: 3.5em !important;
    }
}

h1 span{

    display    : block;
    line-height: .8em;
}

h1 span:nth-child(1){

    font-size: .89em;
}

h1 span:nth-child(2){

    font-size: 2em;
    color    : var(--transCorHexBeje);
}

h1 span:nth-child(3){

    font-size: 1.08em;
    color    : var(--cmmgCorHexDouradoCmmg);
}

#transHeaderConteudoTextos{

    width   : fit-content;
    position: relative;
    z-index : 1;
}

#transHeaderConteudoTextos h3,
#transHeaderConteudoTextos h4{

    margin      : 0;
    font-size   : 3.5em;
    line-height : 1em;
    color       : var(--transCorHexBeje);
    font-variant: all-petite-caps;
}

#transHeaderConteudoTextos h3{

    font-size: 3em;
    color    : var(--cmmgCorHexTurquesaCmmg);
}

#transHeaderConteudoTextos h4:not(:first-of-type){

    font-size: 2.35em;
    color    : var(--cmmgCorHexDouradoCmmg);
}

div#transHeaderConteudo .__cmmgBotao{

    font-size: 2em;
    margin   : 1em 0 0 0;
    position : relative;
    z-index  : 1;
    display  : block;
    width    : fit-content !important;
}

@media only screen and (max-aspect-ratio: 1.1){

    #__header.transPaginaInicial{

        background-position: center;
    }

    div#transHeaderConteudo{

        margin : auto;
        padding: 8em 2em 2em 2em;
    }

    div#transHeaderConteudo::after{

        content              : '';
        width                : 100%;
        min-height           : var(--headerAlturaMin);
        display              : block;
        position             : absolute;
        top                  : var(--wp-admin--admin-bar--height);
        left                 : 0;
        background-color     : rgba(var(--cmmgCorRgbPrincipal), 60%);
        background-attachment: fixed;
        background-blend-mode: overlay;
        background-repeat    : repeat;
        background-size      : var(--headerGranTamanho);
        background-position  : center;
        background-image     : url('./imagens/geral/fundoGranulado.png');
    }

    h1{

        text-align: center;
    }

    #transHeaderConteudoTextos{

        margin: 0 auto;
    }

    div#transHeaderConteudo .__cmmgBotao{

        margin: 1em auto 0 auto;
    }
}

/***************************************************************************************************
    SECTION: Conteúdo genérico
***************************************************************************************************/

section#transConteudo{

    padding-top: 10em;
}

/***************************************************************************************************
    SECTION: Cursos / Conheça
***************************************************************************************************/

section#transSectionConheca{

    padding: 0;
}

section#transSectionConheca h2{

    color           : #fefefe;
    padding         : .5em 1em;
    width           : calc(100% - 2em);
    background-color: var(--cmmgCorHexTurquesaCmmg);
}

section#transSectionConheca > div{

    font-size: 1.2em;
    padding  : 0 4em 5em 4em;
}

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

    section#transSectionConheca{

        padding-top: 0;
    }

    section#transSectionConheca h2{

        position: relative;
        width   : 100%;
        left    : -1em;
    }

    section#transSectionConheca > div{

        padding: 0 2em 5em 2em;
    }
}

#transSectionConhecaLista{

    display              : grid;
    margin               : 0 auto;
    grid-template-columns: repeat(auto-fill, 12em);
    justify-content      : center;
}

#transSectionConhecaLista li{

    margin       : .5em;
    padding      : 1em 1.5em;
    border-radius: .5em;
    box-shadow   : 0 0 10px #ccc;
}

#transSectionConhecaLista .material-icons{

    font-size       : 1.5em;
    color           : #fefefe;
    padding         : .3em;
    margin          : 0 0 .5em 0;
    border-radius   : 50%;
    background-color: var(--cmmgCorHexTurquesaCmmg);
}

#transSectionConhecaLista h3{

    margin   : 0;
    font-size: 1.1em;
    color    : var(--cmmgCorHexCinzaEsuro);
}

#transSectionConhecaLista p{

    margin   : 0;
    font-size: .8em;
}

section#transSectionConheca .__cmmgBotao{

    font-size: 1.6em;
}

/***************************************************************************************************
    SECTION: Porque
***************************************************************************************************/

section#transSectionPorque h2{

    font-variant: normal;
    margin      : 0 0 1em 0;
    color       : var(--cmmgCorHexDouradoCmmg);
}

section#transSectionPorque h2 + p{

    font-size : 1.2em;
    text-align: center;
}

section#transSectionPorque .__cmmgLayoutCarrossel{

    --cmmgLayoutCarrosselBotoesCorHexBase: var(--cmmgCorHexTurquesaCmmg);

    margin: 4em 0;
}

section#transSectionPorque .__cmmgLayoutCarrosselListaItem-html{

    vertical-align: top;
}

.transSectionPorqueDepoimentos{

    display  : flex;
    text-wrap: wrap;
}

.transSectionPorqueDepoimentos h3,
.transSectionPorqueDepoimentos h4{

    margin   : 0;
    font-size: 1.2em;
    color    : var(--cmmgCorHexCinzaEsuro);
}

.transSectionPorqueDepoimentos h3{

    color: var(--cmmgCorHexDouradoCmmg);
}

.transSectionPorqueDepoimentos > div:first-child{

    padding       : 1em 2em 1em 0;
    margin        : 0 2em 0 auto;
    width         : calc(40% - 4em);
    border-color  : var(--cmmgCorHexDouradoCmmg);
    border-width  : 0 2px 0 0;
    display       : flex;
    flex-direction: column;
}

.transSectionPorqueDepoimentos > div:first-child *:first-child{

    margin-top: auto;
}

.transSectionPorqueDepoimentos > div:first-child *:last-child{

    margin-bottom: auto;
}

.transSectionPorqueDepoimentos > div:last-child{

    width  : 60%;
    display: flex;
    padding: 2em 0;
}

.transSectionPorqueDepoimentos figure.__cmmgVideo{

    margin: auto;
}

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

    .transSectionPorqueDepoimentos{

        flex-direction: column-reverse;
    }

    .transSectionPorqueDepoimentos > div:first-child{

        padding     : 0;
        width       : auto;
        margin      : 2em auto 0 auto;
        border-width: 0;
    }

    .transSectionPorqueDepoimentos > div:last-child{

        width  : 100%;
        padding: 0;
    }
}

/***************************************************************************************************
    SECTION: Infraestrutura
***************************************************************************************************/

#transSectionInfraestrutura{

    color                : #fefefe;
    background-size      : cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
    background-repeat    : no-repeat;
    background-position  : center bottom;
    background-image     : url('./imagens/geral/fundoInfraestrutura.jpg'),
                           radial-gradient(ellipse at 50% 150%, rgb(var(--cmmgCorRgbTurquesaCmmg)), 30%, rgb(var(--cmmgCorRgbAzulFeluma)));
}

.__cmmgCssIos #transSectionInfraestrutura{

    background-attachment: scroll;
}

#transSectionInfraestrutura h2{

    color: #fefefe;
}

#transSectionInfraestrutura .__cmmgLayoutCarrossel{

    --cmmgLayoutCarrosselImgHoverCorRgbBase: var(--cmmgCorRgbTurquesaCmmg);
    --cmmgLayoutCarrosselBotoesCorHexBase  : #fefefe;
}

/***************************************************************************************************
    SECTION: Diferenciais
***************************************************************************************************/

#transSectionDiferenciaisLista{

    display              : grid;
    margin               : 0 auto;
    grid-template-columns: repeat(auto-fill, 23em);
    justify-content      : center;
}

#transSectionDiferenciaisLista li{

    color           : #fefefe;
    text-align      : center;
    border-radius   : .5em;
    padding         : 1.5em 2em;
    margin          : 1em;
    background-color: var(--cmmgCorHexTurquesaCmmg);
}

#transSectionDiferenciaisLista li .material-icons{

    font-size: 4em;
}

#transSectionDiferenciaisLista li h3{

    color    : #fefefe;
    font-size: 1.2em;
    margin   : 0 0 .5em 0;
}

#transSectionDiferenciaisLista li p{

    font-size: 1.1em;
    margin   : 0;
}

/***************************************************************************************************
    SECTION: Ecossistema FELUMA
***************************************************************************************************/

#transSectionEcossistema{

    color                : #fefefe;
    text-align           : center;
    background-attachment: fixed;
    background-size      : cover;
    background-color     : var(--cmmgCorHexAzulFeluma);
    background-image     : url('./imagens/geral/fundoEcossistemaFeluma.jpg');
}

.__cmmgCssIos #transSectionEcossistema{

    background-attachment: scroll;
}

#transSectionEcossistema h2{

    color : #fefefe;
    margin: 0 0 1.5em 0;
}

#transSectionEcossistema p{

    font-size: 1.1em;
}

#transSectionEcossistema > div > div{

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

/***************************************************************************************************
    SECTION: FAQ
***************************************************************************************************/

/* #transSectionFAQ{

} */

/***************************************************************************************************
    SECTION: Editais
***************************************************************************************************/

/* #transSectionEditais{

} */

/***************************************************************************************************
    FOOTER
***************************************************************************************************/

#__footer{

    display         : flex;
    flex-direction  : column;
    padding         : 5em 3em 3em 3em;
    color           : #fefefe;
    background-color: var(--cmmgCorHexPrincipal);
}

#__footer a{

    --cmmgLinkCorHex1: #fefefe;
    --cmmgLinkCorHex2: #fefefe;
}

#__footer p{

    margin: 0 0 1em 0;
}

#__footer img{

    max-width: calc(100vw - 6em);
}

#__footer .__cmmgLinkImg::after{

    outline-color: #fefefe;
}

#transRodapeInfo,
#transRodapeCertificados{

    display       : flex;
    flex-direction: row;
    margin        : 0 auto 3em auto;
}

#transRodapeInfo > div{

    margin: 0 3em auto 3em;
}

#transRodapeLogo img{

    height: 5em;
    filter: brightness(0)
            invert(1);
}

#transRodapeInfo p span:first-child{

    display    : block;
    font-weight: 600;
}

#transRodapeCertificados a{

    margin: 2em;
}

#transRodapeCertificados img{

    max-height: 180px;
}

#__footer > p:last-child{

    margin    : 0;
    text-align: center;
}

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

    #transRodapeInfo,
    #transRodapeCertificados{

        text-align    : center;
        flex-direction: column;
        margin        : 0 auto;
    }

    #transRodapeInfo > div,
    #transRodapeCertificados a{

        margin: 2em auto;
    }
}

/***************************************************************************************************
    RD Station
***************************************************************************************************/

#transRDStationForm,
#transRDStationForm > label:last-child{

    position: fixed;
    z-index : 99;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    display : none;
    opacity : 0;
}

#transRDStationForm > label:first-child{

    position   : absolute;
    top        : calc(.3em + var(--wp-admin--admin-bar--height));
    right      : .3em;
    color      : #fefefe;
    line-height: .3em;
    font-size  : 3em;
}

#transRDStationForm > label:last-child{

    z-index         : -1;
    background-color: rgba(var(--cmmgCorRgbPrincipal), 95%);
    background-image: linear-gradient(0, rgba(0, 0, 0, 30%), rgba(0, 0, 0, 30%));
}

#transRDStationFormCheckbox:checked + #transRDStationForm,
#transRDStationFormCheckbox:checked + #transRDStationForm > label:last-child{

    display  : flex;
    animation: transRDStationFormFade .5s ease-in-out forwards;
}

@keyframes transRDStationFormFade{

    0%   { display: none; opacity: 0; }
    1%   { display: flex; opacity: 0; }
    100% { display: flex; opacity: 1; }
}

#transRDStationForm > div{

    margin    : auto;
    max-width : 80vw;
    max-height: 80vh;
}

#transRDStationForm section{

    padding: 0;
}