/* =========================================================
   HOME - HERO
========================================================= */

.home-hero{
  padding:148px 0 45px;
}

/* =========================================================
   CONTAINER
========================================================= */

.home-hero-container{
  width:100%;
  padding: 0 20px;	
  margin:0 auto;

  display:grid;
  grid-template-columns:.92fr 1.08fr;

  align-items:center;

  gap:58px;
}

/* =========================================================
   COLUNA ESQUERDA
========================================================= */

.home-hero-content{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  padding:0;
}

/* =========================================================
   IMAGEM - TRANSFORMANDO EMPRESAS EM MARCAS
========================================================= */

.home-hero-title-image{
  width:100%;
  max-width:580px;

  height:135px;

  margin:0 0 28px;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.home-hero-title-image img{
  width:100%;
  height:auto;

  display:block;

  transform:scale(1.08);
  transform-origin:left center;
}


/* =========================================================
   TAG
========================================================= */

.home-hero-content .section-tag{
  display:block;

  margin:0 0 22px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:var(--en-accent);
}


/* =========================================================
   TEXTO
========================================================= */

.home-hero-description{
  width:100%;
  max-width:535px;

  margin:0 0 30px;

  font-size:16px;
  line-height:1.8;

  color:var(--en-muted);
}


/* =========================================================
   BOTÕES
========================================================= */

.hero-actions{
  display:flex;
  align-items:center;

  gap:28px;

  margin:0;

  flex-wrap:wrap;
}


/* =========================================================
   IMAGEM PRINCIPAL - DIREITA
========================================================= */

.home-hero-image{
  width:100%;

  /*
   * Antes estava 768px.
   * Isso estava deixando o Hero enorme.
   */
  height:650px;

  overflow:hidden;

  border-radius:150px 0 0 0;
}


.home-hero-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  /*
   * Mostra melhor a composição principal,
   * sem cortar excessivamente o topo.
   */
  object-position:center 45%;

  filter:none;
}

/* =========================================================
   CLIENTES - APROXIMAR DO HERO
========================================================= */

.clients-section{
  position:relative;
  z-index:2;

  margin-top:-95px;

  padding:0 0 90px;
}


.clients-box{
  padding:0 0 80px;
}


.clients-label{
  display:block;

  margin:0 0 45px;

  text-align:left;

  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;

  color:var(--en-black);
}

/* =========================================================
   HERO - MOBILE
   DESKTOP NÃO É ALTERADO
========================================================= */

@media (max-width: 767px){

  /* =======================================================
     HERO
  ======================================================= */

  .home-hero{
    width:100%;

    padding:98px 0 0;

    overflow:hidden;
  }

  /* =======================================================
     CONTAINER
  ======================================================= */

  .home-hero-container{
    width:100%;
    max-width:none;

    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;

    gap:0;
  }

  /* =======================================================
     PRIMEIRO BLOCO
  ======================================================= */

  .home-hero-content{
    order:1;

    width:100%;

    margin:0;
    padding:0 22px 42px;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    text-align:left;

    min-height:0;
  }

  /* =======================================================
     PRIMEIRA IMAGEM
     "TRANSFORMANDO EMPRESAS EM MARCAS"
  ======================================================= */

  .home-hero-title-image{
    position:relative;

    width:100%;
	aspect-ratio:390 / 140;  

    height:160px;

    margin:10px 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
  }

  .home-hero-title-image img{
    position:static;

    width:100%;
    max-width:390px;

    height:auto;

    display:block;

    margin:0 auto;

    object-fit:contain;

    transform:none;
  }

  /* =======================================================
     TAG
  ======================================================= */

  .home-hero-content .section-tag{
    position:static;

    margin:0 0 16px;
	transform: translatey(-150px);

    font-size:10px;
    font-weight:800;

    line-height:1.3;

    letter-spacing:.16em;

    text-transform:uppercase;
  }

  /* =======================================================
     TEXTO
  ======================================================= */

  .home-hero-content p,
  .home-hero-description{
    position:static;

    width:100%;
    max-width:370px;

    margin:-50px 0 20px;

    font-size:15px;
    line-height:1.7;
  }

  /* =======================================================
     BOTÕES
  ======================================================= */

  .hero-actions{
    position:static;

    width:100%;

    margin:0;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;

    align-items:center;

    gap:18px 28px;
  }

  .hero-actions .btn-en-dark{
    min-height:52px;

    padding:0 24px;
  }

  .hero-actions .btn-en-line{
    width:auto;

    padding:4px 0;
  }

  /* =======================================================
     SEGUNDA IMAGEM
  ======================================================= */

  .home-hero-image{
    order:2;

    position:relative;

    width:100%;

    height:auto;

    margin:0;
    padding:0;

    overflow:hidden;

    border-radius:0;
  }

  .home-hero-image img{
    width:100%;
    height:auto;

    min-height:0;

    display:block;

    margin:0;

    object-fit:contain;
    object-position:center;

    transform:none;

    filter:none;
  }

}