/* =========================================================
   Hero com foto de fundo (layout real do site, foto atmosferica
   em tela cheia, ao inves do hero split do design-system).
   ========================================================= */
.em-hero-fold{
  --em-nav-h: 96px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 901px){
  .em-hero-fold{
    height: calc(100dvh - var(--em-nav-h));
    max-height: calc(100dvh - var(--em-nav-h));
  }
}
.em-hero-fold .em-hero--photo{
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(24px, 5vh, 52px) 0 clamp(16px, 3vh, 32px);
}
.em-hero-fold .em-hero--photo h1{
  font-size: clamp(1.85rem, 2.2vh + 1.6vw, 3.55rem);
}
.em-hero-fold .em-hero--photo .em-lead{
  font-size: clamp(.92rem, .35vh + .7vw, 1.12rem);
  margin-top: .5em;
}
.em-hero-fold .em-hero__bottom{
  margin-top: clamp(1.1rem, 3.2vh, 2.2rem);
  gap: clamp(1rem, 2.4vh, 2rem);
}
.em-hero-fold .em-hero--photo .em-hero__stat strong{
  font-size: clamp(1.35rem, 1.2vh + .8vw, 2rem);
}
.em-hero-fold__marquee{
  flex: 0 0 auto;
  padding: 12px 0;
  background: var(--em-white);
  border-bottom: 1px solid var(--em-border);
}
.em-hero-fold__marquee .em-marquee__item{ font-size: .95rem; color: var(--em-navy-700); }

.em-hero--photo{
  position: relative;
  min-height: 0;
  display: flex; align-items: center;
  padding: clamp(96px, 11vw, 140px) 0 clamp(56px, 7vw, 90px);
  color: var(--em-text-on-dark);
  overflow: hidden;
}
.em-hero--photo .em-photo-bg{ background-position: center 30%; }
.em-hero--photo .em-photo-overlay{
  /* Zona escura cobre quase toda a largura: o bloco de texto agora vai
     de ponta a ponta do container, precisa de contraste solido em toda
     a extensao, sem perder totalmente a foto no canto direito. */
  background: linear-gradient(100deg, rgba(18,23,29,.95) 0%, rgba(18,23,29,.88) 45%, rgba(18,23,29,.68) 75%, rgba(18,23,29,.42) 100%);
}
.em-hero--photo .em-container{ position: relative; z-index: 2; }

/* Bloco de texto ocupa quase toda a largura do container (nao so uma
   coluna a esquerda): titulo, paragrafo e rodape se espalham de ponta
   a ponta da area disponivel na tela. */
.em-hero--photo__content{ max-width: min(96%, 1180px); width: 100%; }
/* Reserva espaco a direita pra caixa vertical de redes sociais (.em-hero__social)
   nao disputar com o rodape (CTA + estatisticas), que ja vai de ponta a ponta.
   So conta enquanto a caixa esta visivel (ver breakpoint 900px abaixo). */
@media (min-width: 901px){
  .em-hero--photo__content{ padding-right: clamp(64px, 7vw, 100px); }
}
.em-hero--photo h1{
  color: var(--em-white);
  font-size: clamp(2.4rem, 1.3rem + 4vw, 4.9rem);
  line-height: 1.06;
  max-width: 1120px;
  letter-spacing: -.01em;
}
.em-hero--photo .em-lead{
  color: rgba(245,243,233,.9);
  font-size: clamp(1rem, .9rem + .4vw, 1.28rem);
  max-width: 880px;
  margin-top: .8em;
}

/* Rodape distribuido de ponta a ponta: CTA na esquerda, estatisticas
   empurradas para a direita (space-between), ocupando toda a largura
   do bloco de texto em vez de ficarem agrupadas so no inicio. */
.em-hero--photo .em-hero__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  margin-top: clamp(2.6rem, 3.6vw, 3.8rem);
}
.em-hero--photo .em-hero__actions{ margin: 0; }
.em-hero--photo .em-hero__actions .em-btn--primary{
  padding: 1.25em 2.8em;
  font-size: clamp(1.02rem, .96rem + .25vw, 1.2rem);
}
.em-hero--photo .em-hero__stats{
  margin-top: 0;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: clamp(1.8rem, 3.6vw, 3.6rem);
  padding-left: clamp(1.6rem, 2.8vw, 3rem);
  border-left: 1px solid rgba(245,243,233,.25);
}
.em-hero--photo .em-hero__stat strong{
  color: var(--em-white);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem);
}
.em-hero--photo .em-hero__stat span{ color: rgba(245,243,233,.72); font-size: .92rem; }

@media (max-width: 900px){
  .em-hero--photo .em-hero__stats{ justify-content: flex-start; flex: 1 1 100%; }
}
@media (max-width: 640px){
  .em-hero--photo .em-hero__bottom{ flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .em-hero--photo .em-hero__stats{
    padding-left: 0; border-left: none;
    padding-top: 1.4rem; border-top: 1px solid rgba(245,243,233,.25);
    justify-content: flex-start;
  }
}

/* Caixa vertical de redes sociais, lado direito da Hero (mesmo padrao do site
   real: linha vertical + icones empilhados, ancorada na borda da secao,
   fora da largura do bloco de texto, que ja reserva espaco acima). */
.em-hero__social{
  position: absolute;
  right: clamp(14px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.em-hero__social-line{
  width: 2px; height: 52px; flex-shrink: 0;
  background: linear-gradient(180deg, transparent, var(--em-pink) 50%, transparent);
}
.em-hero__social a{
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  border: 0;
  transition: transform var(--em-fast) var(--em-ease), filter var(--em-fast) var(--em-ease);
}
.em-hero__social a:hover{
  transform: translateY(-4px) scale(1.08);
  filter: brightness(1.08);
}
.em-hero__social .em-icon{ width: 24px; height: 24px; }
.em-hero__social-btn--wa{
  background: var(--em-teal);
  box-shadow: 0 12px 24px rgba(0, 164, 156, .42);
}
.em-hero__social-btn--ig{
  background: var(--em-pink);
  box-shadow: 0 12px 24px rgba(236, 114, 140, .42);
}
.em-hero__social-btn--fb{
  background: var(--em-blue);
  box-shadow: 0 12px 24px rgba(0, 160, 199, .42);
}
.em-hero__social-btn--maps{
  background: var(--em-yellow);
  color: var(--em-navy-900);
  box-shadow: 0 12px 24px rgba(252, 212, 102, .42);
}
@media (max-width: 1180px){
  .em-hero__social{ right: 10px; gap: 14px; }
  .em-hero__social a{ width: 46px; height: 46px; }
  .em-hero__social .em-icon{ width: 21px; height: 21px; }
  .em-hero__social-line{ height: 40px; }
}
@media (max-width: 900px){
  .em-hero__social{ display: none; }
}
@media (max-height: 780px) and (min-width: 901px){
  .em-hero__social{ gap: 12px; }
  .em-hero__social a{ width: 40px; height: 40px; }
  .em-hero__social .em-icon{ width: 18px; height: 18px; }
  .em-hero__social-line{ height: 28px; }
}