/* =========================================================================
   CEDIRP - Home (css/home.css)
   Clone fiel das 4 rows da home de producao: hero -> faixa -> passos -> PADI.
   Carregado SOMENTE pela home. Todas as classes usam o prefixo "hm-".
   Valores (cores, fontes, espacamentos) extraidos da producao Beaver Builder.

   -------------------------------------------------------------------------
   COMO PUBLICAR (obrigatorio - sem isto as 4 secoes renderizam SEM ESTILO)
   -------------------------------------------------------------------------
   1) Backup:  cp ~/public_html/sitedev/index.html \
                  ~/public_html/sitedev/index.html.bkp-AAAAMMDD-HHMMSS
   2) Subir ESTE arquivo como  ~/public_html/sitedev/css/home.css
      (OBRIGATORIAMENTE dentro de css/ - o url('../assets/...') do hero
       so resolve a partir dali).
   3) Em ~/public_html/sitedev/index.html, logo abaixo da linha 12
      (<link rel="stylesheet" href="css/style.css?v=3">), acrescentar:
          <link rel="stylesheet" href="css/home.css?v=1">
   4) Subir o video de fundo da secao 3 (ver nota em "3. TRES PASSOS"):
      scratchpad/video-banner.mp4  ->
      ~/public_html/sitedev/assets/wp-content_uploads_2025_01_250127-Video-Banner.mp4
      Enquanto o mp4 nao subir, a secao usa o fundo cinza #474747 definido
      abaixo (legivel, sem repetir a foto do hero).

   -------------------------------------------------------------------------
   DESVIOS CONSCIENTES EM RELACAO A PRODUCAO (revisar com o cliente)
   -------------------------------------------------------------------------
   a) Hover dos botoes: producao nao tem NENHUM feedback de hover
      (transition:none e o hover repete o estado normal). Aqui os botoes
      tem hover, porque um link sem retorno visual e defeito de usabilidade.
      Para clone 1:1, remover os blocos ":hover, :focus-visible" dos botoes
      e trocar as duas declaracoes "transition" por "transition: none".
   b) <=768px: producao centraliza o bloco do paragrafo do hero e o do
      primeiro botao (colunas .fl-col-small ganham max-width:400px +
      margin auto) enquanto o titulo e o segundo botao ficam a esquerda -
      resultado visivelmente desalinhado. Aqui tudo fica alinhado a
      ESQUERDA; a largura de 360px do paragrafo reproduz as mesmas quebras
      de linha da producao.

   PENDENTE DE APROVACAO (nao aplicado - producao tem o mesmo comportamento)
   c) Veu da secao 3: rgba(71,71,71,0.49) deixa o texto branco em ate
      2,68:1 sobre partes claras do video (WCAG AA pede 4,5:1). Para
      corrigir, trocar por rgba(40,40,40,0.62) em .hm-passos::after.
   d) text-align: justify em telas estreitas gera "rios" de espaco.
      Para corrigir, acrescentar no bloco @media (max-width: 768px):
      .hm-hero__text, .hm-faixa__text, .hm-passo__text { text-align: left; }
   ========================================================================= */

/* -------------------------------------------------------------------------
   Container de 1100px (producao usa .fl-row-content { max-width:1100px }).
   O .container do sitedev tem max-width 1200px + padding 0 20px; 1140px de
   caixa devolve exatamente 1100px de conteudo util.
   ------------------------------------------------------------------------- */
.container.hm-container {
    max-width: 1140px;
}


/* =========================================================================
   1. HERO
   Row: padding 60px/50px + margem de 20px dos modulos internos.
   ========================================================================= */
.hm-hero {
    padding: 60px 0 50px;
    background-color: var(--color-primary);
    background-image:
        linear-gradient(90deg, rgba(53, 97, 152, 0.91) 0%, rgba(69, 109, 159, 0.87) 100%),
        url('../assets/wp-content_uploads_2025_01_Banner-Estrutura-001.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    background-attachment: scroll, scroll;
}

/* padding 20px = margem dos .fl-module-content da producao (conteudo util 1060px) */
.hm-hero__inner {
    padding: 20px;
}

/* Producao mantem 50px em TODAS as larguras: a regra do no
   .fl-node-lto5qz49w2he.fl-module-heading .fl-heading (0,3,0) vence o
   h2{font-size:30px} do tema dentro dos media queries. Nao ha reducao
   responsiva. (Se o cliente quiser reduzir no celular, e uma linha:
   @media (max-width:576px){ .hm-hero__title{font-size:34px} } ) */
.hm-hero__title {
    margin: 0 0 40px;
    padding: 0;
    font-family: var(--font-main);
    font-size: 50px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--color-white);
}

/* margin-bottom 50px = 10px do <p> + 20px + 20px das margens dos modulos */
.hm-hero__text {
    max-width: 510px;   /* coluna de 50% (550px) menos as margens de 20px */
    margin: 0 0 50px;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    text-align: justify;
    color: var(--color-white);
}

/* gap 40px = as margens de 20px de dois modulos vizinhos, nos dois eixos */
.hm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* Botao "fantasma": fundo transparente + borda branca de 2px, pilula. */
.hm-btn-ghost {
    display: inline-block;
    box-sizing: border-box;
    /* min-width (em vez de width fixo) garante a altura de 53,2px de uma linha
       mesmo quando a Myriad Pro nao esta instalada e a fonte de fallback e mais larga */
    min-width: 230px;
    padding: 15px 25px;
    white-space: nowrap;
    background-color: transparent;
    border: 2px solid var(--color-white);
    border-radius: 35px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    color: var(--color-white);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* DESVIO (a): producao nao tem feedback de hover; adicionado o hover coerente
   com o desenho fantasma (branco solido) para usabilidade.
   :focus-visible (e nao :focus) para o estilo nao "grudar" apos o clique. */
.hm-btn-ghost:hover,
.hm-btn-ghost:focus-visible {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.hm-btn-ghost:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px;
}

.hm-btn-ghost:active {
    position: relative;
    top: 1px;
}


/* =========================================================================
   2. FAIXA "Fazer seus exames e simples e pratico"
   Fundo BRANCO (a row de producao nao declara background-color).
   Row sem padding customizado -> 20px do Beaver + 20px dos modulos.
   ========================================================================= */
.hm-faixa {
    padding: 20px 0;
    background-color: var(--color-white);
}

/* flex-column evita colapso de margens, como o .fl-col-content da producao */
.hm-faixa__inner {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.hm-faixa__title {
    margin: 0 0 40px;
    padding: 0;
    font-family: var(--font-main);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--color-primary);
}

.hm-faixa__text {
    margin: 0 0 10px;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    text-align: justify;
    color: var(--color-dark);
}

/* 10px (margem do ultimo <p>) + 40px = os 50px de producao */
.hm-faixa__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px;
    margin-top: 40px;
}

/* Botao solido em pilula, sem borda e sem sombra. */
.hm-btn-pill {
    display: inline-block;
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
    padding: 15px;
    background-color: var(--color-primary);
    border: none;
    border-radius: 35px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    color: var(--color-white);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* #456d9f e a cor de hover real da producao; o que muda e a transicao
   de 0.2s (producao troca a cor de forma seca) - ver nota (a) no topo. */
.hm-btn-pill:hover,
.hm-btn-pill:focus-visible {
    background-color: #456d9f;
    color: var(--color-white);
    transform: none;
    box-shadow: none;
}

.hm-btn-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.hm-btn-pill:active {
    position: relative;
    top: 1px;
}


/* =========================================================================
   3. TRES PASSOS - video de fundo + veu cinza rgba(71,71,71,0.49)

   O video (assets/wp-content_uploads_2025_01_250127-Video-Banner.mp4) AINDA
   NAO EXISTE no servidor - ver passo 4 do bloco "COMO PUBLICAR" no topo.
   Ele e injetado por JS apenas acima de 768px e fora de prefers-reduced-motion
   (producao usa data-video-mobile="no" e tambem nao exibe video no mobile).

   Enquanto/onde nao ha video, o fundo e o cinza #474747 - exatamente a
   matiz do veu da producao. Escolha deliberada: NAO reutilizar a foto do
   hero (as secoes 1 e 3 ficariam identicas) e nao baixar uma segunda foto
   de ~140 KB que, no mobile, seria o fundo permanente.
   Se o cliente preferir textura fotografica aqui, trocar por:
     background-image: url('../assets/wp-content_uploads_2025_01_cedirp-estrutura-003.jpg');
     background-size: cover; background-position: center center;
   (medindo antes o contraste do texto branco sobre a foto + veu).
   ========================================================================= */
.hm-passos {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background-color: #474747;
}

.hm-passos__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    pointer-events: none;
}

/* veu de producao */
.hm-passos::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background-color: rgba(71, 71, 71, 0.49);
    pointer-events: none;
}

.hm-passos__content {
    position: relative;
    z-index: 2;
}

/* Colunas 32% / 30% / 36% com flex-grow -> 359,33 / 337,34 / 403,33 px */
.hm-passos__grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.hm-passos__col {
    display: flex;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.hm-passos__col:nth-child(1) { width: 32%; }
.hm-passos__col:nth-child(2) { width: 30%; }
.hm-passos__col:nth-child(3) { width: 36%; }

/* padding 20px = margem dos .fl-module-content da producao */
.hm-passo {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    text-align: left;
}

.hm-passo__icon {
    display: block;
    width: 50px;
    height: auto;
    margin: 0 0 15px;
}

.hm-passo__title {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--color-white);
}

.hm-passo__text {
    margin: 0;
    padding: 0 0 10px;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    text-align: justify;
    color: var(--color-white);
}


/* =========================================================================
   4. PADI - faixa em gradiente azul, colunas 51% / 48% alinhadas pelo TOPO
   ========================================================================= */
.hm-padi {
    padding: 20px 0;
    background-color: var(--color-primary);
    background-image: linear-gradient(90deg, #356198 0%, #456d9f 100%);
    color: var(--color-white);
}

.hm-padi__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.hm-padi__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 51%;
    box-sizing: border-box;
    padding: 20px;
}

.hm-padi__title {
    margin: 0 0 25px;   /* 5px do modulo do titulo + 20px do modulo de texto */
    padding: 0;
    font-family: var(--font-main);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--color-white);
}

.hm-padi__desc p {
    margin: 0 0 10px;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    color: var(--color-white);
}

.hm-padi__logo {
    flex: 1 1 48%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}

.hm-padi__logo img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}


/* =========================================================================
   RESPONSIVO
   Producao: tipografia do tema em 991px, empilhamento do Beaver em 768px.
   ========================================================================= */

/* ---- Tablet: corpo de texto cai para 14px e os h2 do tema sobem para 30px
        (comportamento real da producao). O titulo do hero NAO muda. ---- */
@media (max-width: 992px) {
    .hm-faixa__title,
    .hm-padi__title {
        font-size: 30px;
    }

    .hm-hero__text,
    .hm-faixa__text,
    .hm-passo__text,
    .hm-padi__desc p {
        font-size: 14px;
        line-height: 1.45;
    }
}

/* ---- Mobile: colunas empilhadas (bloco de ate 400px centralizado) ---- */
@media (max-width: 768px) {
    /* Producao zera o padding lateral da row; o recuo de 20px passa a vir
       apenas das margens/paddings internos dos blocos. */
    .hm-home .container.hm-container {
        padding-left: 0;
        padding-right: 0;
    }

    /* 360px = os mesmos 400px da coluna .fl-col-small menos a margem de 20px
       do modulo -> quebras de linha identicas as da producao.
       A centralizacao do bloco NAO e reproduzida - ver nota (b) no topo. */
    .hm-hero__text {
        max-width: 360px;
    }

    /* Producao empilha TODAS as colunas em <=768px (.fl-col{float:none;
       width:auto}), inclusive as dos botoes. Larguras fixas preservadas. */
    .hm-hero__actions,
    .hm-faixa__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    /* Producao nao exibe o video no mobile (data-video-mobile="no").
       O JS do HTML tambem nao chega a baixar o arquivo nesta faixa. */
    .hm-passos__bg {
        display: none;
    }

    .hm-passos__grid {
        display: block;
    }

    /* os :nth-child de largura tem especificidade maior - repetidos aqui */
    .hm-passos__col,
    .hm-passos__col:nth-child(1),
    .hm-passos__col:nth-child(2),
    .hm-passos__col:nth-child(3) {
        display: block;
        float: none;
        clear: both;
        width: auto;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .hm-padi__inner {
        display: block;
    }

    .hm-padi__text,
    .hm-padi__logo {
        width: auto;
    }

    .hm-padi__logo {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- WCAG 2.3.3 / 2.2.2: quem pede menos movimento nao recebe o video.
        O JS do HTML checa a mesma media query e nem baixa o arquivo. ---- */
@media (prefers-reduced-motion: reduce) {
    .hm-passos__bg {
        display: none;
    }
}