/* ===========================================================================
   HOME: CAPA, CHAMADA, SEÇÕES DE TEXTO E FAIXA LARANJA.
   AS SEÇÕES DO PAINEL FICAM EM paineis.css.
   =========================================================================== */

/* ---- CAPA ----------------------------------------------------------------------
   FUNDO PRETO, ATÉ 500px DE ALTURA. A FOTO TEM A LARGURA TODA E A ALTURA LIMITADA
   A 500px: ACIMA DISSO ELA ESTICA EM VEZ DE CORTAR. */

/* A CAPA TEM 500px DE ALTURA E A FOTO COBRE A ÁREA TODA: BANNER FORA DA MEDIDA PERDE
   AS BORDAS (CORTE CENTRADO), SEM SOBRAR FUNDO NEM ESTICAR. ABAIXO DE 1000px DE LARGURA
   A ALTURA ENCOLHE NA PROPORÇÃO 2:1. NO CELULAR, COM ARTE DE CELULAR NO PAINEL, A CAPA
   FICA QUADRADA. */
.capa {
    position: relative;
    height: min(500px, 50vw);
    margin: 0 0 60px;
    overflow: hidden;
    background: var(--preto);
    vertical-align: middle;
}

.capa__faixa {
    display: flex;
    height: 100%;
    transition: transform .6s ease;
}

.capa__slide {
    position: relative;
}

.capa__slide,
.capa__slide picture {
    display: block;
    flex: 0 0 100%;
    height: 100%;
}

.capa__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BANNER COM ARTE DE CELULAR: CADA LARGURA MOSTRA A CHAMADA DA PRÓPRIA ARTE. */
.capa__chamada--so-celular { display: none; }

@media (max-width: 767px) {
    .capa--arte-celular { height: 100vw; }
    .capa__slide--so-desktop,
    .capa__chamada--so-desktop,
    .capa__pontos .capa__ponto--so-desktop,
    .capa--celular-unico .capa__nav,
    .capa--celular-unico .capa__pontos { display: none; }
    .capa__chamada--so-celular { display: block; }
}

/* SETAS E PONTOS: SÓ COM 2 OU MAIS BANNERS. */
.capa__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    opacity: .8;
}

.capa__nav:hover { opacity: 1; }
.capa__nav--anterior { left: 10px; }
.capa__nav--proxima { right: 10px; }

.capa__pontos {
    position: absolute;
    right: 0;
    bottom: 15px;
    left: 0;
    z-index: 2;
    font-size: 0;
    text-align: center;
}

.capa__pontos li {
    display: inline-block;
    margin: 0 6px;
}

.capa__ponto {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}

.capa__ponto.ativo {
    background: var(--laranja);
}

/* CHAMADA DE CADA BANNER (TÍTULO, TEXTO E BOTÃO DO PAINEL), DENTRO DO PRÓPRIO SLIDE:
   TROCA JUNTO COM A IMAGEM. NO DESKTOP O CENTRO FICA A 49,2% DA ALTURA DA CAPA (246px
   NA CAPA DE 500px) E A 38% DA LARGURA DA JANELA. ABAIXO DE 992px, CENTRADA NA FOTO. */
.capa__chamada {
    position: absolute;
    top: calc(49.2% - 20px);
    left: 38vw;
    z-index: 1;
    margin: 20px 0 10px;
    transform: translate(-50%, -50%);
}

.capa__titulo {
    color: var(--laranja);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000;
}

.capa__texto {
    margin-top: 15px;
    color: #fff;
    font-size: 20px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.capa__chamada .botao-laranja {
    margin-top: 20px;
}

/* COM BANNER DO PAINEL, O <h1> DA PÁGINA FICA SÓ PARA BUSCADORES E LEITORES DE TELA:
   O TEXTO VISÍVEL É O DE CADA BANNER. */
.capa__h1-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 991px) {
    .capa__chamada {
        top: 50%;
        left: 50%;
        width: 90%;
        margin: 0;
        text-align: center;
    }

    .capa__titulo { font-size: 40px; }

    .capa { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .capa__titulo { font-size: 26px; }
    .capa__texto { font-size: 16px; }
    .capa__titulo br { display: none; }
    .capa__nav { font-size: 30px; }
}

/* ---- SEÇÕES DE TEXTO -------------------------------------------------------- */

.secao {
    position: relative;
    margin-top: 20px;
    padding-bottom: 40px;
}

.secao__cabeca {
    padding: 30px 0;
}

.secao__titulo {
    font-family: var(--fonte-titulo);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
}

.secao__texto p {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

@media (max-width: 991px) {
    .secao__cabeca { padding: 22px 0; }
    .secao__texto { margin-bottom: 30px; }
    .secao__texto p { font-size: 14px; line-height: 20px; }
}

/* ---- FAIXA LARANJA -----------------------------------------------------------
   TEXTO E BOTÕES À ESQUERDA (58,33%), FOTO À DIREITA (41,67%). ABAIXO DE 992px
   AS DUAS COLUNAS EMPILHAM. */

.faixa {
    margin-bottom: -30px;
    padding: 55px 0;
    background-color: var(--laranja);
}

.faixa__moldura,
.faixa__texto,
.faixa__miolo,
.faixa__botao,
.faixa__foto,
.faixa__foto-miolo {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.faixa__moldura {
    float: left;
    width: 100%;
    color: #777;
    text-align: center;
}

.faixa__texto {
    float: left;
    width: 58.33333333%;
    text-align: left;
}

.faixa__miolo {
    float: left;
    width: 100%;
    padding-left: 0;
}

.faixa__titulo {
    margin: 20px 0 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
}

.faixa__paragrafo {
    margin: 0 0 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

.faixa__botao {
    float: left;
    width: 50%;
}

.faixa__botao .botao-branco {
    display: block;
    width: 100%;
}

.faixa__foto {
    float: left;
    width: 41.66666667%;
}

.faixa__foto-miolo {
    float: left;
    width: 100%;
    text-align: center;
}

.faixa__foto-miolo img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .faixa__moldura,
    .faixa__texto,
    .faixa__miolo,
    .faixa__botao,
    .faixa__foto,
    .faixa__foto-miolo {
        float: none;
        width: auto;
    }

    .faixa__paragrafo { font-size: 14px; line-height: 20px; }

    /* EMPILHADOS, OS BOTÕES GANHAM VÃO ENTRE SI E A FOTO GANHA RESPIRO. */
    .faixa__botao { margin-top: 10px; padding: 0; }
    .faixa__miolo { padding-right: 0; }
    .faixa__foto-miolo { margin-top: 30px; padding: 0; }
    .faixa__texto,
    .faixa__foto { padding: 0; }
}

@media (max-width: 767px) {
    .faixa { padding: 35px 0; }
    .faixa__titulo { font-size: 20px; }
    .secao__titulo { font-size: 24px; }
}

.limpa {
    clear: both;
}