/* ==========================================================================
   Home (v2) -- CSS proprio do template home-v2.php

   Carregado apenas por este template, via wp_head. Nao alcanca o home.php
   que esta no ar nem qualquer outra pagina.

   Regra da casa: todo seletor daqui usa o prefixo .hv2-.

   Cuidados com o CSS global do tema, que usa seletores de elemento nu --
   todos ja mordidos durante o quem-somos-v2:

     - ul { list-style: none; padding: 0; margin: 0 }  (style.css:39)
     - header { position: fixed }  -> nao usar <header> nesta marcacao.
       Altura util ~88px (logo 44 + padding 16+16).
     - footer { background: #080d18 } -> nao usar <footer> nesta marcacao.
     - br { display: none } em @media (max-width: 991px): todo <br> precisa
       de um espaco em volta, senao as palavras colam no mobile.

   Identidade visual (fora de escopo mudar): Poppins 500 sem caixa alta,
   azul #29458E (.span-blue), verde #009E75 (.span-green), raio 16px.
   ========================================================================== */

/* --------------------------------------------------------------- HERO ----
   A foto da fabrica entra como fundo da secao, com um veu escuro por cima:
   a aerea e clara e cheia de detalhe, e texto sobre ela sem veu fica
   ilegivel. O veu e mais denso a esquerda, onde o texto mora, e abre para a
   direita para a fabrica continuar aparecendo.

   O image-set serve o webp a quem suporta. A declaracao anterior fica como
   fallback: quem nao entende a funcao ignora a segunda e usa o jpg.

   Altura de 620px definida pelo cliente, com o texto centralizado na
   vertical dentro do bloco. */
/* Os 15px laterais e o raio de 16px repetem o tratamento do hero que a home
   ja usa hoje (.custom-slide-style + .bg-desktop, no style.css do tema): o
   bloco nao sangra ate a borda da tela, fica encaixado com respiro. */
.hv2-hero {
    /* O header do tema e position: fixed e nao ocupa lugar no fluxo, entao
       a primeira secao precisa reservar o espaco dele. O tema usa 140px em
       .sobre-hero e .cases-page; aqui sao 90px de proposito -- pouco acima
       da altura util do header (~88px), para o hero subir e as solucoes
       ficarem mais perto da primeira dobra, como o briefing pede. */
    padding: 90px 15px 0;
}

.hv2-hero__bloco {
    display: flex;
    /* texto centralizado na vertical; o padding vale para os dois lados */
    align-items: center;
    min-height: 400px;
    padding: 64px 0;
    border-radius: 16px;
    overflow: hidden;
    background-color: #0a142d;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image:
        linear-gradient(90deg, rgba(10, 20, 45, .88) 0%, rgba(10, 20, 45, .62) 48%, rgba(10, 20, 45, .20) 100%),
        var(--hv2-hero-jpg);
    background-image:
        linear-gradient(90deg, rgba(10, 20, 45, .88) 0%, rgba(10, 20, 45, .62) 48%, rgba(10, 20, 45, .20) 100%),
        image-set(var(--hv2-hero-webp) type("image/webp"), var(--hv2-hero-jpg) type("image/jpeg"));
}

.hv2-hero__bloco > .container {
    width: 100%;
}

.hv2-hero__texto {
    max-width: 640px;
}

.hv2-hero__texto h1 {
    font-size: 46px;
    line-height: 1.15;
    margin: 0 0 16px;
    color: #fff;
}

/* o verde da marca (#009E75) e escuro demais sobre o veu: sobre fundo claro
   ele funciona, aqui sumiria. Este e o mesmo verde clareado, so no hero. */
.hv2-hero__texto .span-green {
    color: #17c79a;
}

/* text-wrap: pretty evita a viuva -- a ultima linha com uma palavra sozinha.
   Resolve no CSS em vez de cravar &nbsp; no texto, entao continua valendo
   se a frase mudar. Navegador sem suporte simplesmente quebra como antes. */
.hv2-hero__texto p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, .88);
    text-wrap: pretty;
}

/* ----------------------------------------------------------- SOLUCOES ----
   Uma marcacao so serve aos dois layouts em avaliacao; quem muda o desenho
   e o modificador na lista. Assim a comparacao entre grade e lista e
   honesta -- muda o CSS, nao o HTML -- e adotar um deles depois e apagar o
   bloco do outro. */
.hv2-solucoes-secao {
    padding: 72px 0 96px;
}

.hv2-solucoes__topo {
    margin-bottom: 40px;
    max-width: 62ch;
}

.hv2-solucoes__topo h2 {
    margin: 0 0 12px;
}

.hv2-solucoes__topo p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}

.hv2-solucoes {
    display: grid;
    gap: 24px;
}

.hv2-solucao {
    display: flex;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.hv2-solucao:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(41, 69, 142, .12);
    color: inherit;
    text-decoration: none;
}

.hv2-solucao__midia {
    position: relative;
    overflow: hidden;
    background: #f6f6f6;
    flex-shrink: 0;
}

.hv2-solucao__midia img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.hv2-solucao:hover .hv2-solucao__midia img {
    transform: scale(1.06);
}

.hv2-solucao__texto h3 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 8px;
    color: #29458E;
}

.hv2-solucao__texto p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 12px;
    text-wrap: pretty;
}

.hv2-solucao__link {
    display: inline-block;
    font-weight: 500;
    color: #009E75;
}

.hv2-solucao:hover .hv2-solucao__link {
    text-decoration: underline;
}

/* ---------------------------------------------------- variante: GRADE ----
   Duas em cima, duas embaixo. Com metade da largura para cada cartao a foto
   cabe em 16/9 e mostra o ambiente -- era exatamente o que quatro colunas
   numa linha so nao permitiam, porque a moldura ficava quadrada e apertada. */
.hv2-solucoes--grade {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.hv2-solucoes--grade .hv2-solucao {
    flex-direction: column;
}

.hv2-solucoes--grade .hv2-solucao__midia {
    aspect-ratio: 16 / 9;
}

.hv2-solucoes--grade .hv2-solucao__texto {
    padding: 24px 26px 28px;
}

/* ------------------------------------------- cartao: TEXTO NO FUNDO ----
   O fundo da pagina e branco, entao um cartao branco nao tem contorno: o
   painel do texto sumia e a foto ficava solta no meio do nada. Um cinza
   claro devolve o limite do cartao sem disputar atencao com a foto. */
.hv2-cards--fundo .hv2-solucao {
    background: #f4f5f8;
}

.hv2-cards--fundo .hv2-solucao:hover {
    background: #eef0f5;
}

/* --------------------------------------- cartao: TEXTO SOBREPOSTO ----
   Texto sobre a foto, que e como o tema ja desenha os cartoes de solucao
   hoje (.content-etapa-card no style.css: absolute, bottom 20px, titulo
   em verde). O veu so na base garante a leitura sem escurecer a foto
   inteira. A moldura abre para 3/2 porque o texto precisa de altura --
   continua horizontal, so menos extrema que 16/9. */
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao {
    position: relative;
}

.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__midia {
    aspect-ratio: 3 / 2;
}

.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__midia::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 45, 0) 30%, rgba(10, 20, 45, .55) 58%, rgba(10, 20, 45, .92) 100%);
}

.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 26px 26px;
}

.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__texto h3 {
    color: #fff;
}

.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__texto p {
    color: rgba(255, 255, 255, .85);
}

/* mesmo verde clareado do hero: o #009E75 nao sustenta sobre o veu */
.hv2-solucoes--grade.hv2-cards--sobreposto .hv2-solucao__link {
    color: #17c79a;
}

/* ---------------------------------------------------- variante: LISTA ----
   Quatro faixas empilhadas, foto a esquerda. Le como indice: sobra espaco
   para o texto explicar a vertical, o que ajuda quem ainda nao sabe qual
   delas procura -- mas ocupa mais altura e empurra os numeros para baixo. */
.hv2-solucoes--lista {
    grid-template-columns: 1fr;
    gap: 16px;
}

.hv2-solucoes--lista .hv2-solucao {
    flex-direction: row;
    align-items: stretch;
    border: 1px solid #ececf1;
}

.hv2-solucoes--lista .hv2-solucao__midia {
    flex: 0 0 300px;
    aspect-ratio: 16 / 10;
}

.hv2-solucoes--lista .hv2-solucao__texto {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hv2-solucoes--lista .hv2-solucao__texto p {
    max-width: 68ch;
}

/* ================================================================ 1199 === */
@media (max-width: 1199px) {
    .hv2-hero__texto h1 {
        font-size: 40px;
    }

    .hv2-solucao__texto h3 {
        font-size: 20px;
    }
}

/* ================================================================= 991 === */
@media (max-width: 991px) {
    /* sem a coluna direita livre, o veu passa a cobrir a foto por inteiro */
    .hv2-hero__bloco {
        min-height: 460px;
        padding: 48px 0;
        background-image:
            linear-gradient(180deg, rgba(10, 20, 45, .82) 0%, rgba(10, 20, 45, .72) 100%),
            var(--hv2-hero-jpg);
        background-image:
            linear-gradient(180deg, rgba(10, 20, 45, .82) 0%, rgba(10, 20, 45, .72) 100%),
            image-set(var(--hv2-hero-webp) type("image/webp"), var(--hv2-hero-jpg) type("image/jpeg"));
    }

    .hv2-hero__texto h1 {
        font-size: 34px;
    }

    .hv2-hero__texto p {
        font-size: 17px;
        max-width: none;
    }

    .hv2-solucoes-secao {
        padding: 56px 0 64px;
    }

    .hv2-solucoes--grade {
        gap: 20px;
    }

    .hv2-solucoes--lista .hv2-solucao__midia {
        flex-basis: 220px;
    }

    .hv2-solucoes--lista .hv2-solucao__texto {
        padding: 20px 22px;
    }
}

/* ================================================================= 575 === */
@media (max-width: 575px) {
    .hv2-hero__bloco {
        min-height: 380px;
    }

    .hv2-hero__texto h1 {
        font-size: 28px;
    }

    /* dois cartoes lado a lado nao cabem numa tela estreita */
    .hv2-solucoes--grade {
        grid-template-columns: 1fr;
    }

    /* na tela estreita a faixa nao cabe deitada: a foto sobe para o topo */
    .hv2-solucoes--lista .hv2-solucao {
        flex-direction: column;
    }

    .hv2-solucoes--lista .hv2-solucao__midia {
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }
}