/* Energia Nobre · Home · VISS Digital · viss.digital */


/* ---- hero ---- */
.hero { position: relative; margin-top: -7.5rem; padding: 0 0 6.25rem; min-height: calc(85svh + 6.25rem); overflow: hidden; background: #334070; }
.hero__foto, .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__foto img { object-fit: cover; object-position: top center; }
.hero__veu { position: absolute; inset: 0; background-image: linear-gradient(180deg, #0000000d 0%, #000 100%); opacity: .5; }
.hero__in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; max-width: var(--content); min-height: 85svh; margin: 0 auto; }
.hero__texto { flex: 0 0 50%; }
.hero__etiqueta { color: var(--color-hero-tag); font: 500 1.125rem/1.575rem var(--font-titulo); }
.hero__titulo { max-width: 79%; color: #fff; font: 600 2.25rem/2.925rem var(--font-titulo); }
.hero__descricao { padding-right: 9.375rem; margin: 0 0 2.8125rem; color: #fff; font: 300 1rem/1.8rem var(--font-titulo); }
.hero__cartoes { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 50%; }
.vidro { position: relative; z-index: 0; overflow: hidden; }
.vidro::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(133deg, rgba(255, 255, 255, .28) -7.3%, rgba(255, 255, 255, 0) 108.04%);
  border: 0.125rem solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(0.625rem); backdrop-filter: blur(0.625rem);
}
.vidro--cartao { padding: 0.625rem 0 0.625rem 1.25rem; border-radius: 1.25rem; }
.vidro--cartao::before { border-radius: 1.25rem; }
.vidro--cartao img { width: 25rem; height: auto; aspect-ratio: 648 / 278; }
.vidro--clientes { margin-top: 1.25rem; padding: 1.25rem 2.5rem 1.25rem 1.25rem; border-radius: 6.25rem; }
.vidro--clientes::before { border-radius: 6.25rem; }
.vidro--clientes img { width: 22.1875rem; height: auto; aspect-ratio: 583 / 73; }

/* ---- duas colunas (serviços e sobre) ---- */
.duas-colunas { margin: 3.125rem 0; }
.duas-colunas__in { display: flex; align-items: center; max-width: var(--content); margin: 0 auto; }
.duas-colunas__texto { flex: 0 0 50%; padding-right: 3.125rem; }
.duas-colunas__imagem { flex: 1 1 auto; text-align: end; }
.duas-colunas__imagem img { display: block; margin-left: auto; max-width: 100%; height: auto; }
.servico__texto { margin: 2.8125rem 0 1.25rem; }
.duas-colunas__imagem img { width: 37.5rem; }
.sobre-home .duas-colunas__texto { padding-right: 6.25rem; }
.sobre-home .duas-colunas__texto { flex-basis: 50%; }
.sobre-home__p1 { margin: 2.8125rem 0 1.75rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01875rem; }
.sobre-home__p2 { margin: 0 0 3rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01875rem; }
.sobre-home .botao { margin: 0; }
.sobre-home { margin-top: 3.125rem; margin-bottom: 0; }
.servico { margin-top: 3.125rem; margin-bottom: 3.125rem; }

/* ---- faixa com foto ---- */

/* ---- 3 motivos + formulário ---- */
.motivos { margin-top: 6.25rem; }
.motivos__in { display: flex; align-items: center; max-width: var(--content); margin: 0 auto; }
.motivos__texto { flex: 0 0 50%; padding-right: 3.125rem; }
.motivos__form { flex: 0 0 50%; padding-left: 3.125rem; }
.motivos__cabeca { display: flex; align-items: flex-start; }
.motivos__numero { flex: 0 0 10.987%; text-align: center; color: var(--color-text); font: 600 4.3125rem/4.3125rem var(--font-titulo); }
.motivos__titulo { flex: 0 0 calc(89.025% - 0.625rem); margin: 0 0 0 0.625rem; }
.motivos__titulo { margin-top: 0; }
.motivos__descricao { margin: 1.5625rem 0 1.75rem; font-size: 1rem; line-height: 1.5rem; }
.motivos__lista { display: flex; flex-direction: column; gap: 1.25rem; }
.motivo { display: flex; align-items: center; gap: 0.9375rem; }
.motivo > div { flex: 1 1 auto; }
.motivo__icone { width: 1.875rem; height: 1.875rem; flex: none; color: var(--color-icon); fill: var(--color-icon); }
.motivo__icone--img { background: var(--color-icon); -webkit-mask: url('../img/icone-economia.svg') center / contain no-repeat; mask: url('../img/icone-economia.svg') center / contain no-repeat; }
.motivo__titulo { color: var(--color-text); font: 600 1rem/1.3rem var(--font-titulo); }
.motivo__texto { color: var(--color-text); font: 400 0.875rem/1.546875rem var(--font-titulo); }
.caixa-form__topo { padding: 1.25rem; border-radius: 1.25rem 1.25rem 0 0; background: #081b67 url('../img/fundo-faixa-960.avif') center / cover; }
.caixa-form__titulo { margin-left: 0.625rem; color: #fff; font: 400 1rem/1.3rem var(--font-titulo); text-align: center; }
.caixa-form__corpo { padding: 3.75rem 2.5rem; border-radius: 0 0 1.25rem 1.25rem; background: #f8f8f8; }

/* ---- projetos executados ---- */
.chamada { display: flow-root; margin-top: 0; padding: 3.125rem 0; }
.chamada__in { max-width: var(--content); margin: 0 auto; }
.chamada .titulo-secao { margin-top: 1.25rem; }
.chamada .titulo-secao--cheio { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.chamada .texto { margin-bottom: 1.75rem; }

/* ---- depoimentos ---- */
.depoimentos-titulo { max-width: var(--content); margin: 0 auto; }
.depoimentos { margin-bottom: -3.125rem; padding: 3.125rem 0 9.375rem; background: url('../img/fundo-depoimentos-1391.webp') center / 80% auto no-repeat; }
.depoimentos__in { max-width: 30rem; margin: 0 auto; padding: 0; }
.depo { padding-top: 0.9375rem; }
.depo__janela { overflow: hidden; width: 26rem; margin: 0 auto; }
.depo__trilha { display: flex; transition: transform .5s ease; }
.depo__slide { flex: 0 0 100%; margin-right: 2.5rem; display: flex; }
.depo__item { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 1.25rem 0; text-align: center; }
.depo__foto { margin: 0 auto 1.4375rem; }
.depo__foto img { width: 5.25rem; height: 5.25rem; border: 0.125rem solid #d6d6d6; border-radius: 62.4375rem; object-fit: cover; }
.depo__texto { color: #000; font: 300 0.875rem/1.3125rem var(--font-titulo); }
.depo__nome { margin-top: 1.5625rem; color: #000; font: 700 1.125rem/1.546875rem var(--font-titulo); text-transform: uppercase; }
.depo__pontos { display: flex; justify-content: center; margin: 0; padding: 0.9375rem 0 1.375rem; }
.depo__ponto { position: relative; flex: 0 0 max(1.5rem, 24px); width: max(1.5rem, 24px); height: max(1.5rem, 24px); margin: -0.65625rem 0; padding: 0; background: none; }
.depo__ponto::before { content: ''; position: absolute; left: calc(50% - 0.09375rem); top: calc(50% - 0.09375rem); width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: #000; opacity: .2; }
.depo__ponto[aria-current='true']::before { opacity: 1; }

/* =========================================================================
   TABLET
   ========================================================================= */
@media (max-width: 1024px) {
  .hero { margin-top: -9.375rem; padding: 0 1.25rem 3.125rem; min-height: 34.375rem; }
  .hero__in { min-height: 31.25rem; }
  .hero__texto, .hero__cartoes { flex-basis: 50%; }
  .hero__titulo { max-width: 100%; margin-bottom: 1.25rem; font-size: 1.6875rem; line-height: 1.2; }
  .hero__etiqueta { line-height: 1.2; }
  .hero__descricao { padding: 0; margin-bottom: 2.5rem; font-size: 0.75rem; line-height: 1.8; }
  .hero__botao { font-size: 0.875rem; line-height: 1.3125rem; }
  .vidro--cartao img { width: 18.75rem; }
  .vidro--clientes img { width: 15.9375rem; }
  .duas-colunas { margin: 3.125rem 0; padding: 0 1.5625rem; }
  .duas-colunas__imagem img { width: 100%; }
  .sobretitulo { line-height: 1.2; }
  .titulo-bloco { font-size: 1.375rem; line-height: 1.2; }
  .servico__texto { margin: 1.25rem 0 1.25rem; font-size: 0.875rem; line-height: 1.575rem; }
  .sobre-home { margin-top: 3.125rem; margin-bottom: 0; }
  .sobre-home .duas-colunas__texto { padding-right: 6.25rem; }
  .sobre-home__p1, .sobre-home__p2 { font-size: 0.875rem; line-height: 1.3125rem; }
  .sobre-home__p1 { margin: 1.25rem 0 1.5rem; }
  .sobre-home__p2 { margin-bottom: 2.8125rem; }
  .motivos { margin-top: 0; padding: 3.125rem 1.5625rem 0; }
  .motivos__texto { flex-basis: 55%; padding-right: 1.25rem; }
  .motivos__form { flex-basis: 45%; padding-left: 0; }
  .motivos__cabeca { align-items: center; }
  .motivos__numero { flex-basis: 10%; }
  .motivos__titulo { flex-basis: calc(80% - 0.625rem); font-size: 1.25rem; line-height: 1.2; }
  .motivos__descricao { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.3125rem; text-align: justify; }
  .motivo__texto { font-size: 0.75rem; line-height: 1.41075rem; }
  .caixa-form__topo { border-radius: 0.9375rem 0.9375rem 0 0; }
  .caixa-form__titulo { font-size: 1.125rem; line-height: 1.35rem; }
  .caixa-form__corpo { padding: 0.625rem; border-radius: 0 0 0.9375rem 0.9375rem; }
  .chamada { padding: 3.125rem 1.5625rem; }
  .titulo-secao--cheio { font-size: 1.375rem; line-height: 1.65rem; }
  .chamada .texto { margin-bottom: 1.5625rem; font-size: 0.875rem; }
  .depoimentos { padding: 0; margin-bottom: 0; background-size: cover; }
  .depo__janela { width: 27.5rem; }
  .depo__foto { margin-bottom: 1.3125rem; }
  .depo__foto img { width: 3.6875rem; height: 3.6875rem; }
  .depo__nome { line-height: 1.41075rem; }
  .depoimentos-titulo { padding: 3.125rem 1.5625rem; }
}

/* =========================================================================
   CELULAR
   ========================================================================= */
@media (max-width: 767px) {
  .hero { padding: 6.25rem 1.25rem 3.125rem; min-height: 47.625rem; }
  .hero__in { flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 38.25rem; }
  .hero__texto, .hero__cartoes { flex-basis: auto; }
  .hero__titulo { font-size: 1.4375rem; }
  .hero__descricao { margin-bottom: 1.25rem; font-size: 0.8125rem; line-height: 1.5; letter-spacing: -0.01875rem; text-align: justify; }
  .hero__cartoes { margin-top: 5.25rem; }
  .duas-colunas { margin: 3.125rem 0; padding: 3.125rem 1.25rem; }
  .servico { margin: 3.125rem 0; }
  .duas-colunas__in { flex-direction: column; align-items: stretch; }
  .duas-colunas__texto { flex-basis: auto; width: 100%; padding: 0; text-align: center; }
  .duas-colunas__imagem { width: 100%; }
  .sobretitulo, .sobretitulo--centro { text-align: center; }
  .titulo-bloco { font-size: 1.25rem; text-align: center; }
  .servico__texto { margin: 1.25rem 0 1.5625rem; text-align: justify; }
  .duas-colunas .botao { display: flex; width: fit-content; margin: 0.3125rem; }
  .sobre-home { margin: 3.125rem 0 0; padding: 0; }
  .sobre-home .duas-colunas__texto { padding: 0 1.25rem; }
  .sobre-home__p1 { margin: 1.25rem 0 1.5rem; }
  .sobre-home__p2 { margin: 0 0 3.125rem; }
  .motivos { margin-top: 0; padding: 3.125rem 1.25rem; }
  .motivos__in { flex-direction: column; align-items: stretch; }
  .motivos__texto, .motivos__form { flex-basis: auto; padding: 0; }
  .motivos__numero { font-size: 3.125rem; line-height: 3.125rem; }
  .motivos__titulo { flex-basis: calc(90% - 0.625rem); font-size: 1.125rem; text-align: left; }
  .motivos__descricao { margin-bottom: 0.875rem; }
  .motivos__lista { gap: 1.1875rem; }
  .motivo { flex-direction: column; align-items: stretch; text-align: center; gap: 0.9375rem; }
  .motivo__icone { align-self: center; }
  .motivo__titulo { font-size: 0.875rem; line-height: 1.1375rem; }
  .motivo__texto { font-size: 0.875rem; }
  .motivos__form { margin-top: 3.125rem; }
  .caixa-form__titulo { font-size: 1.125rem; line-height: 1.35rem; }
  .caixa-form__corpo { padding: 1.25rem; }
  .form__campo--meio { flex-basis: 100%; }
  .chamada { padding: 3.125rem 1.25rem 0; }
  .chamada .texto { margin-bottom: 1.375rem; font-size: 0.8125rem; letter-spacing: -0.01875rem; }
  .depoimentos-titulo { padding: 0 1.25rem; }
  .depoimentos-titulo .titulo-secao--cheio { font-size: 1.25rem; line-height: 1.5rem; }
  .depoimentos__in { padding: 0 1.25rem; }
  .depo__janela { width: 100%; }
}
