/* ==========================================================================
   Rio Ambiental — Versao 1 (Home): header e hero no estilo da Versao 3.

   Carregado depois do main.css e so pelo index.php (via $ra_css_extra), pra
   nao mexer nas versoes 2 e 3 — elas compartilham o mesmo main.css.

   O markup do header/hero e identico ao da Versao 3 (mesmo inc/header.php,
   mesma section.ra-hero em index.php/versao-3.php) — a diferenca e so CSS,
   escopado por body.ra-pagina-home aqui / body.ra-pagina-versao-3 la. Boa
   parte das regras abaixo e a mesma coisa portada de versao-3.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — foto grande de fundo com transicao automatica entre camadas (ver
   assets/js/versao-1.js), no lugar do gradiente decorativo + slider lateral
   da V1 original. .ra-hero ja tem position:relative + isolation:isolate
   (main.css), entao z-index negativo aqui fica atras do conteudo normal.
   -------------------------------------------------------------------------- */

body.ra-pagina-home .ra-hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* Scrim por cima das fotos, pra legibilidade do texto — mesmo gradiente da V3. */
body.ra-pagina-home .ra-hero__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 3, .72) 0%, rgba(6, 5, 3, .58) 45%, rgba(6, 5, 3, .86) 100%);
}
body.ra-pagina-home .ra-hero__fundo-camada {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.ra-pagina-home .ra-hero__fundo-camada.is-ativa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.ra-pagina-home .ra-hero__fundo-camada { transition: none; }
}

/* Brilhos/textura desenhados pro gradiente de marca somem — a foto ja
   fornece o visual de fundo. O slider de fotos que ficava ao lado do texto
   tambem some — com a imagem grande cobrindo a tela toda ele fica
   redundante; o texto passa a ocupar a largura toda, centralizado. */
body.ra-pagina-home .ra-hero__brilho,
body.ra-pagina-home .ra-hero__verde,
body.ra-pagina-home .ra-hero__textura,
body.ra-pagina-home .ra-hero__visual { display: none; }
body.ra-pagina-home .ra-hero__grid { grid-template-columns: 1fr; justify-items: center; }
body.ra-pagina-home .ra-hero__texto {
  max-width: 640px;
  text-align: center;
}
body.ra-pagina-home .ra-hero__acoes,
body.ra-pagina-home .ra-selos { justify-content: center; }

/* <em> do H1 ("Engenharia Ambiental"): so amarelo, gradiente bem sutil
   dentro do proprio amarelo (antes ia de azul a amarelo). */
body.ra-pagina-home .ra-hero h1 em {
  background: linear-gradient(100deg, #FFE066 0%, var(--amarelo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Botoes da hero e do menu menos arredondados (o .ra-btn padrao e
   pilula/999px). */
body.ra-pagina-home .ra-hero .ra-btn,
body.ra-pagina-home .ra-eyebrow,
body.ra-pagina-home .ra-header__cta .ra-btn,
body.ra-pagina-home .ra-drawer__rodape .ra-btn { border-radius: 10px; }

/* --------------------------------------------------------------------------
   Header translucido branco sobre a foto: fundo branco com opacidade,
   deixando a imagem aparecer atras. Ao rolar, vira solido normal — mesmo
   mecanismo (classe is-scrolled) que main.css ja usa, so trocando o tom.
   -------------------------------------------------------------------------- */
body.ra-pagina-home .ra-header {
  background: rgba(255, 255, 255, .90);
  border-bottom-color: rgba(255, 255, 255, .4);
}
body.ra-pagina-home .ra-header.is-scrolled {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--linha);
}

/* main.css tem regras especificas pra body.ra-pagina-home que deixam nav,
   icones e logo em tom claro — pensadas pro header ESCURO translucido da V1
   original. Com o header branco acima, precisam voltar ao tom padrao
   (mesmos valores que main.css ja usa no estado .is-scrolled), sempre,
   independente de ter rolado ou nao. */
body.ra-pagina-home .ra-header .ra-nav__link { color: var(--marrom); }
body.ra-pagina-home .ra-header .ra-nav__link:hover,
body.ra-pagina-home .ra-header .ra-nav__item.is-aberto > .ra-nav__link { color: var(--azul-esc); background: var(--bg-suave); }
body.ra-pagina-home .ra-header .ra-nav__link.is-ativo { color: var(--azul-esc); }
body.ra-pagina-home .ra-header .ra-icone-btn { background: #fff; border-color: var(--linha); color: var(--marrom); }
body.ra-pagina-home .ra-header .ra-icone-btn--zap { color: var(--verde); }
/* main.css usa :not(.is-scrolled) nessas duas regras (specificidade 0,4,1),
   maior que a nossa (0,3,1) de cima — sem repetir o :not(.is-scrolled) aqui,
   ele ganha no estado "nao rolado" e a logo branca volta a aparecer mesmo
   com o header branco. Repetindo o seletor igual, a ordem no arquivo (depois
   do main.css) decide, e a nossa vence. */
body.ra-pagina-home .ra-header .ra-logo__escura,
body.ra-pagina-home .ra-header:not(.is-scrolled) .ra-logo__escura { display: block; }
body.ra-pagina-home .ra-header .ra-logo__clara,
body.ra-pagina-home .ra-header:not(.is-scrolled) .ra-logo__clara { display: none; }

/* --------------------------------------------------------------------------
   Hero no mobile.

   .ra-selos e um flex sem quebra de linha: os 3 selos lado a lado davam
   ~494px de largura minima, e esse min-content virava o piso de largura do
   .ra-hero__texto — esticando titulo, lead, botoes e selos pros mesmos
   494px dentro de uma tela de 375px. O minmax(0, 1fr) tira esse piso e o
   wrap arruma os selos. Com o justify-items:center do grid acima, o wrap
   fica ainda mais essencial: sem stretch, a largura e resolvida por
   fit-content, que respeita o min-content mesmo com a coluna limitada.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  body.ra-pagina-home .ra-hero__grid { grid-template-columns: minmax(0, 1fr); }
  body.ra-pagina-home .ra-hero__texto { max-width: 100%; }
  body.ra-pagina-home .ra-selos { flex-wrap: wrap; padding-inline: 0; }
  body.ra-pagina-home .ra-selo { min-width: 0; }
}

@media (max-width: 575px) {
  body.ra-pagina-home .ra-hero h1 { font-size: 1.75rem; }
  body.ra-pagina-home .ra-eyebrow {
    font-size: .8125rem;
    padding: 8px 14px;
    margin-bottom: 20px;
  }
  body.ra-pagina-home .ra-selos { gap: 14px 20px; }
}