/* ============================================================
   MEGA CRIAÇÕES - TÍTULOS DAS PÁGINAS
   Arquivo: css/titulos-paginas.css

   Páginas principais: .paginas-principais
   Páginas de Serviços: .paginas-servicos

   Não interfere no menu, logotipo ou rodapé.
   ============================================================ */


/* ============================================================
   1. DESKTOP - TELAS A PARTIR DE 768px
   ============================================================ */

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

    /* Configuração das faixas */
    .paginas-principais,
    .paginas-servicos {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 101px;
        min-height: 101px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        background: url('../images/background.jpg') no-repeat center top;
    }

    /* Configuração dos textos */
    .paginas-principais > div,
    .paginas-servicos > div {
        position: relative;
        top: 15px;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0;
        transform: none;
        font-family: roboto, Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.2;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
    }

    /* Altura exclusiva dos Serviços */
    .paginas-servicos {
        height: 101px;
        min-height: 101px;
    }

    /* Ajuste vertical exclusivo dos Serviços */
    .paginas-servicos > div {
        top: 10px;
    }
}


/* ============================================================
   2. MOBILE - TELAS ATÉ 767px
   ============================================================ */

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

    /* Configuração das faixas */
    .paginas-principais,
    .paginas-servicos {
        position: relative;
        display: block;
        width: 100%;
        height: 75px;
        min-height: 75px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        background: url('../images/background.jpg') no-repeat center top;
    }

    /* Centralização horizontal e vertical */
    .paginas-principais > div,
    .paginas-servicos > div {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0;
        transform: translateY(-50%);
        font-family: roboto, Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.2;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
    }

    /* Altura independente dos Serviços */
    .paginas-servicos {
        height: 75px;
        min-height: 75px;
    }
}