header .logo-desktop,
header .logo-mobile-menu {
  width: 160px;
  margin: 1rem 0
}

/* ======================================================
   REDESIGN 2026 (Figma) - tipografia, header, footer, cards
   ====================================================== */

/* Paleta do cliente (Guia de Identidade Visual) sem token equivalente em style-base.css:
   azul claro, azul do logo (institucional) e azul cobalto (apoio) */
:root {
  --light-blue: #3A8FFF;
  --logo-blue: #0000FF;
  --cobalt-blue: #0101B0;
}

/* Titulos: fonte secundaria (Plus Jakarta Sans) + escala do Figma -0.25rem */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--secondary-font);
  font-weight: 600;
}

h1,
.h1 {
  font-size: 3.25rem;
}

h2,
.h2 {
  font-size: 1.75rem;
}

h3,
.h3 {
  font-size: 2.25rem;
}

h4,
.h4 {
  font-size: 1.75rem;
}

h5,
.h5 {
  font-size: 1.125rem;
}

h6,
.h6 {
  font-size: 0.875rem;
}

.bread__title {
  font-size: 1.125rem;
  color: var(--primary-color-dark);
}

/* A escala de titulos acima e para o conteudo principal - aside/offcanvas/modais
   tem sua propria hierarquia menor, sem relacao com o redesign do Figma. */
aside h2,
aside h3,
aside h4,
.aside-title,
.offcanvas h2,
.offcanvas h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Botao 14px (o restante da tipografia dos botoes ja vem do Bootstrap) */
.btn {
  --bs-btn-font-size: 14px;
}

/* ---->> HEADER TOP (utility bar) <<---- */
.topo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#topo-bootstrap address a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

#topo-bootstrap address a:hover {
  text-decoration: underline;
}

.topo__links a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.topo__social-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  border-color: #fff !important;
  background: transparent !important;
}

.topo__social-icon:hover {
  background: rgba(255, 255, 255, .15) !important;
}

/* ---->> HEADER NAV <<---- */
#header-nav {
  background-color: var(--light);
  box-shadow: 0 24px 16px rgba(0, 0, 0, .03);
}

/* Busca (icone compacto no header, so link pra /pesquisa - sem modal, sem campo inline) */
.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--dark);
  box-sizing: border-box;
  border: 0;
}

.icon-button:hover {
  background: rgba(var(--bs-primary-rgb), .06);
}

.navbar-brand .logo-desktop {
  width: 190px;
}

#dropdown-custom>.nav-item>.nav-link {
  color: var(--dark);
  font-weight: 500;
  font-size: 16px;
  border-radius: 999px;
  padding: .75rem 1rem;
}

#dropdown-custom>.nav-item>.nav-link:hover,
#dropdown-custom>.nav-item>.nav-link.active-menu-topo {
  color: var(--primary-color);
  background-color: rgba(var(--bs-primary-rgb), .06);
}

/* Notebooks (992-1599px): menu em uma linha so e header mais baixo */
@media (min-width: 992px) and (max-width: 1599.98px) {
  header .logo-desktop {
    margin: .5rem 0;
  }

  #dropdown-custom>.nav-item>.nav-link {
    padding-inline: .75rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-brand .logo-desktop {
    width: 160px;
  }

  #dropdown-custom>.nav-item>.nav-link {
    padding-inline: .5rem;
    font-size: 14px;
  }
}

/* ---->> FOOTER (2026) <<---- */
.site-footer {
  background-color: var(--logo-blue);
  position: relative;
  overflow: hidden;
  border-color: transparent !important;
}


.site-footer__seal {
      width: 150px;
    height: 150px;
    position: relative;
    object-fit: contain;
    z-index: 666;
}

.site-footer .footer__nav ul {
  list-style: none;
}

.site-footer .footer__nav h3 {
  color: #fff;
}

.site-footer .footer__nav h3::after {
  background: rgba(255, 255, 255, .35);
}

.site-footer .footer__nav li a:not(.btn) {
  color: #fff;
}

.site-footer .footer__nav li a:not(.btn):hover {
  color: var(--primary-color-light);
}

.site-footer .address :is(span, a):not(.btn) {
  color: #fff;
}

.site-footer .address :is(span, a):not(.btn) i {
  color: var(--primary-color-light);
}

.site-footer .address a:not(.btn):hover {
  color: var(--primary-color-light);
}

.bg-dark .copyright-footer p {
  color: var(--text-light);
}


.card {
  border-radius: 1.5rem;
  border-color: var(--primary-color-light);
  overflow: hidden;
}

.card .card-img-top {
  aspect-ratio: 4/3;
  object-fit: cover;
}

.card .card-title {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-strong);
}

.card .card-text {
  color: var(--text-soft);
  font-size: 16px;
}

.card .btn-primary {
  --bs-btn-color: var(--primary-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color-dark);
  --bs-btn-active-border-color: var(--primary-color-dark);
  border-radius: 999px;
  font-weight: 500;
  z-index: 2;
}

.card.bg-body-tertiary {
  background-color: var(--bg-100, #f6f6f6) !important;
}

/* Cards de segmentos/aplicacoes (icone + rotulo, sem foto) */
.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  height: 100%;
}

.icon-card:hover .icon-card__box img {
  transform: scale(1.1);
}

.icon-card__label {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-strong, #4a4848);
  text-align: center;
}

.icon-card__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 130px;
  border: 1px solid var(--primary-color);
  border-radius: .75rem;
  background: #f6f6f6;
  box-sizing: border-box;
}

.icon-card__box img {
  width: 72px;
  height: 72px;
  transition: .3s ease;
}

/* ---->> HERO / BANNER <<---- */
.splide-banner .splide__slide {
  position: relative;
  background: var(--background);
  background-size: cover !important;
  background-position: center !important;
}

/* Gradiente do Figma (navy a esquerda, esmaecendo pra direita) por cima da
   foto - a funcao renderTheme3() ja aplica um escurecimento plano de 30%
   via --background; esta camada extra reproduz o gradiente lateral do mockup
   sem precisar editar a funcao compartilhada de banner. */
.splide-banner .splide__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(91deg, rgba(25, 53, 98, .9) 8.8%, rgba(59, 59, 59, 0) 65%);
  pointer-events: none;
}

.splide-banner .splide__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 var(--bs-gutter-x, 1.5rem);
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
}

.banner__wrap {
  --slider-height: clamp(360px, min(34vw, calc(100vh - 8rem)), 760px);
  position: relative;
}

/* Setas do banner (Figma node-id=388255-5460) - botoes pequenos e discretos
   alinhados ao conteudo, nao as setas grandes padrao do Splide nas bordas. */
.splide-banner .splide__arrows {
  position: absolute;
  left: var(--bs-gutter-x, 1.5rem);
  bottom: 8%;
  z-index: 2;
  display: flex;
  gap: .75rem;
}

@media (min-width: 1320px) {
  .splide-banner .splide__arrows {
    left: calc((100% - 1320px) / 2 + var(--bs-gutter-x, 1.5rem));
  }
}

.splide-banner .splide__arrow {
  position: static;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 999px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}

.splide-banner .splide__arrow svg {
  display: none;
}

.splide-banner .splide__arrow::before {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.splide-banner .splide__arrow--prev::before {
  content: "\2039";
}

.splide-banner .splide__arrow--next::before {
  content: "\203A";
}

.splide-banner .splide__arrow:hover {
  background: rgba(255, 255, 255, .15);
}

.splide-banner .splide__arrow:disabled {
  opacity: .4;
}

.banner__seal {
  position: absolute;
  right: 5%;
  bottom: 12%;
  width: 110px;
  height: 110px;
  z-index: 2;
  pointer-events: none;
}

@media only screen and (max-width: 992px) {
  .banner__seal {
    width: 80px;
    height: 80px;
    right: 16px;
    bottom: 16px;
  }
}

/* ---->> INSTITUCIONAL (empresa/home) <<---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin: 1.5rem 0;
  text-align: center;
}

.stats-grid__number {
  display: block;
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 2.75rem;
  color: var(--primary-color);
}

.stats-grid__label {
  display: block;
  font-size: 16px;
  color: var(--text-soft);
}

@media only screen and (max-width: 576px) {
  .stats-grid {
    gap: .75rem;
  }

  .stats-grid__number {
    font-size: 1.75rem;
  }

  .stats-grid__label {
    font-size: 14px;
  }
}

.institucional__img {
  border-radius: 1rem;
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 992px) {
  .home-empresa .institucional__img {
    width: 88%;
  }
}

.text-soft {
  color: var(--text-soft);
}

/* Titulo "Veja os / Serviços em destaque" (Figma node-id=384023-7242) */
.highlight-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.highlight-title__eyebrow {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--light-blue);
}

.highlight-title__main {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--primary-color-darker);
}

@media only screen and (max-width: 576px) {
  .highlight-title__eyebrow {
    font-size: 1.5rem;
  }

  .highlight-title__main {
    font-size: 1.875rem;
  }
}

/* Titulo "Conheça nossos / Produtos sob medida" (Figma node-id=384023-6896) */
.produtos-sob-medida__eyebrow {
  color: var(--light-blue);
}

/* Secao "Nossas aplicações" da home (Figma node-id=388023-3567) - fundo liso, sem textura */
.applications-section {
  background-color: var(--bs-secondary-bg);
}

.applications-section .h2 {
  color: var(--light-blue);
}

/* Card de Aplicações (mesmo Figma acima) - foto no topo, info clara com botao outline embaixo */
.card-aplicacao {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--light);
}

.card-aplicacao__img {
  width: 100%;
  height: 257px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1200px) {
  .applications-section .card-aplicacao__img {
    height: auto;
    aspect-ratio: 332.5 / 257;
  }
}

.card-aplicacao__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex-grow: 1;
  padding: 1.5rem;
  border-radius: 0 0 16px 16px;
  background: var(--light);
}

.card-aplicacao__title {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--cobalt-blue);
  margin: 0;
}

.card-aplicacao__desc {
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
  margin: 0;
  flex-grow: 1;
}

.card-aplicacao__btn {
  font-size: .875rem;
  font-weight: 500;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  padding: .5rem .75rem;
  text-decoration: none;
  transition: var(--transition);
}

.card-aplicacao__btn:is(:hover, :focus-visible) {
  color: #fff;
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

/* Secao "Saiba mais sobre..." - paginas internas de Produtos e Servicos (Figma node-id=388019-1748) */
.detail-hero {
  background: var(--light);
  padding: 4rem 0;
}

.detail-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 5.5rem;
}

.detail-hero__box {
  flex: 1 1 350px;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.detail-hero__title {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--primary-color-darker);
  margin: 0;
}

.detail-hero__content {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.detail-hero__content>*:last-child {
  margin-bottom: 0;
}

.detail-hero__cta {
  border-radius: 24px;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.detail-hero__image {
  flex: 1 1 350px;
  min-width: 350px;
  height: 560px;
  border-radius: 24px;
  overflow: hidden;
}

.detail-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media only screen and (max-width: 992px) {
  .detail-hero__title {
    font-size: 2rem;
  }

  .detail-hero__image {
    height: 360px;
  }
}

/* Card de Produtos (Figma node-id=368003-9143) - foto sobre box azul com titulo e seta; no hover o box preenche o card */
.card-produto {
  --card-produto-height: 364px;
  --card-produto-shadow: 0 1px 4px rgba(var(--bs-body-color-rgb), .05);
  container: card-produto / inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: var(--card-produto-height);
  border: var(--bs-border-width) solid var(--primary-color-light);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--card-produto-shadow);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.card-produto:is(:hover, :focus-visible) {
  border-color: var(--bs-border-color);
  box-shadow: var(--card-produto-shadow), var(--card-produto-shadow);
}

.card-produto__media {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  margin: 1.25rem 1.3rem -1.25rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--bs-border-radius-xl);
  transform-origin: 50% 100%;
  transition: transform var(--transition);
}

.card-produto:is(:hover, :focus-visible) .card-produto__media {
  transform: scale(1.027);
}

/* Zoom por capa (aproxima o equipamento): --card-produto-pos recorta a foto, --card-produto-origin
   e --card-produto-zoom aproximam a partir desse ponto */
.card-produto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-produto-pos, 50% 50%);
  transform-origin: var(--card-produto-origin, 50% 50%);
  scale: var(--card-produto-zoom, 1);
}

/* Cards largos (2 por linha, 1 por linha ou telas grandes): moldura mais horizontal que a dos 4 por linha */
@container card-produto (min-width: 321px) {
  .card-produto__img {
    object-position: var(--card-produto-pos-wide, var(--card-produto-pos, 50% 50%));
    transform-origin: var(--card-produto-origin-wide, var(--card-produto-origin, 50% 50%));
    scale: var(--card-produto-zoom-wide, var(--card-produto-zoom, 1));
  }
}

.card-produto[href$="/chillers"] {
  --card-produto-pos: 52% 48%;
  --card-produto-origin: 52% 48%;
  --card-produto-zoom: 1.4;
  --card-produto-pos-wide: 52% 57%;
  --card-produto-origin-wide: 52% 57%;
  --card-produto-zoom-wide: 1.1;
}

.card-produto[href$="/equipamentos-e-aplicacoes-especiais"] {
  --card-produto-pos: 50% 47%;
  --card-produto-origin: 50% 47%;
  --card-produto-zoom: 1.12;
}

.card-produto[href$="/racks-de-compressores"] {
  --card-produto-pos: 0% 100%;
  --card-produto-origin: 0% 100%;
  --card-produto-zoom: 1.2;
  --card-produto-pos-wide: 0% 74%;
  --card-produto-zoom-wide: 1;
}

.card-produto[href$="/unidades-condensadoras-industriais"] {
  --card-produto-pos: 0% 50%;
  --card-produto-origin: 67% 74%;
  --card-produto-zoom: 1.9;
  --card-produto-pos-wide: 50% 50%;
  --card-produto-origin-wide: 45% 100%;
  --card-produto-zoom-wide: 1.5;
}

.card-produto__info {
  position: relative;
  flex: none;
  padding: 1.5rem;
}

.card-produto__info::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 100%;
  border-radius: var(--bs-border-radius-xl);
  background: linear-gradient(180deg, var(--primary-color-dark), var(--primary-color-darker));
  transition: height var(--transition);
}

.card-produto:is(:hover, :focus-visible) .card-produto__info::before {
  height: calc(var(--card-produto-height) - 2 * var(--bs-border-width));
}

.card-produto__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-produto__title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--bs-light);
  overflow-wrap: break-word;
}

.card-produto__btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  border-radius: 1.5rem;
  color: var(--bs-light);
  transition: background-color var(--transition), color var(--transition);
}

.card-produto:is(:hover, :focus-visible) .card-produto__btn {
  background-color: var(--bs-border-color);
  color: var(--dark);
}

.card-produto__icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url(../imagens/icones/topo/icone-seta-card.svg) center / 100% 100% no-repeat;
  mask: url(../imagens/icones/topo/icone-seta-card.svg) center / 100% 100% no-repeat;
}

@container card-produto (max-width: 250px) {
  .card-produto__info {
    padding: 1rem;
  }

  .card-produto__content {
    gap: .5rem;
  }

  .card-produto__btn {
    padding: .75rem;
  }
}

/* Card de Servicos */
.card-servico {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 313px;
  height: 100%;
  padding: 2rem 1.5rem;
  border: 1px solid #eee;
  border-radius: 12px;
  background: var(--light);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.card-servico:is(:hover, :focus-visible) {
  border-color: var(--primary-color-light);
  box-shadow: 0 4px 16px rgba(var(--bs-body-color-rgb), .08);
}

.card-servico__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(176, 193, 242, .35);
}

.card-servico__icon img {
  height: 72px;
  width: 72px;
}

.card-servico__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-servico__title {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text-strong, #4a4848);
}

.card-servico__desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-strong, #4a4848);
}

.card-servico__btn {
  align-self: flex-start;
  font-size: .875rem;
  font-weight: 500;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  padding: .5rem .75rem;
  transition: var(--transition);
}


.card-servico {
  position: relative;
  isolation: isolate;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.card-servico::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--servico-cover);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .3s ease;
}

.card-servico:is(:hover, :focus-visible)::before {
  opacity: 1;
}

.card-servico:is(:hover, :focus-visible) {
  border-color: var(--primary-color-light);
  box-shadow: 0 4px 16px rgba(var(--bs-body-color-rgb), .08);
}



.card-servico::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .3s ease;
}

.card-servico:is(:hover, :focus-visible)::after {
  opacity: 1;
}

.card-servico:is(:hover, :focus-visible) .card-servico__title,
.card-servico:is(:hover, :focus-visible) .card-servico__desc {
  color: #fff;
}

.card-servico:is(:hover, :focus-visible) .card-servico__btn {
  color: #fff;
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}


/* Secao "Serviços que Elevam o Nível do seu Projeto" (Figma node-id=388261-5857) - fundo azulado */
.services-highlight-section {
  background-color: color-mix(in srgb, var(--primary-color-light) 20%, #fff);
}

/* Secao "Segmentos Atendidos" da home (Figma node-id=388023-3046) - fundo com textura de linhas, titulo a esquerda */
.segmentos-section {
  position: relative;
  overflow: hidden;
}

.segmentos-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../imagens/home/segmentos-bg-pattern.webp) center / cover no-repeat;
  opacity: .035;
  pointer-events: none;
}

.segmentos-section>.container {
  position: relative;
  z-index: 1;
}

.text-primary-darker {
  color: var(--primary-color-darker);
}

/* Galeria de obras (home "Conheça nossas obras" e pagina /obras -
   Figma node-id=388778-7838 / 388778-6301) - foto com moldura branca e
   lupa no hover, abre em lightbox (fancybox, ver inc/fancy.php). */
.card-galeria {
  position: relative;
  display: block;
  border-radius: .25rem;
  overflow: hidden;
  background: var(--light);
  padding: 12px;
}

.card-galeria img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.card-galeria__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}

.card-galeria:hover .card-galeria__zoom,
.card-galeria:focus-visible .card-galeria__zoom {
  opacity: 1;
}

/* ---->> CTA (inc/cta-default.php, conteudo real via dr_cta) <<---- */
/* O style-base.css define .cta-default com um background fixo/quebrado
   (imagens/bg-cta.webp, que nao existe) e nunca le a variavel --bg-cta que
   o PHP ja seta a partir da imagem cadastrada em dr_cta.cta_background -
   por isso a secao aparecia sem foto nenhuma. Corrigido aqui. */
.cta-default {
  background-image: linear-gradient(rgba(36, 36, 36, .65), rgba(36, 36, 36, .65)), var(--bg-cta);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cta-default h2 {
  color: #fff;
  text-align: center;
  font-size: 2.25rem;
  text-transform: none;
  line-height: 1.2;
  font-weight: 600;
}

.cta-default h2 span {
  color: var(--light-blue);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  display: inline;
}

.cta-default p.fs-4 {
  color: #fff;
  font-size: 18px !important;
  font-weight: 600;
}

/* ---->> DESTAQUES (inc/destaques-inc.php) <<---- */
.card--23 {
  border-radius: 1.5rem;
}

/* ---->> SEGMENTOS / APLICACOES listagem <<---- */
/* Grid com colunas de largura fixa (nao flex) - flex-basis sozinho deixava
   cada card com uma largura diferente conforme o rotulo quebrava linha ou
   nao (ex.: "Agricultura e Agronegócio" ficava mais largo que "Sorvetes"),
   desalinhando a grade. Largura fixa faz todos os cards ficarem iguais e o
   rotulo (com altura minima pra 2 linhas) quebra dentro do espaço fixo. */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem 1rem;
  max-width: 1160px;
  margin: 0 auto;
}

.icon-grid>* {
  width: 100%;
}

@media only screen and (max-width: 992px) {
  .icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 576px) {
  .icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.icon-card__label {
  min-height: calc(18px * 1.4 * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 992px) {

  h1,
  .h1 {
    font-size: 2.25rem;
  }

  h3,
  .h3 {
    font-size: 1.75rem;
  }

  h4,
  .h4 {
    font-size: 1.5rem;
  }

  .cta-default h2,
  .cta-default h2 span {
    font-size: 1.5rem;
  }
}

/* ---->> HOME (ritmo vertical e tamanho das secoes) <<---- */
.home-page {
  --home-section-py: 3rem;
  --home-section-head-my: 3rem;
}

.home-section {
  padding-block: var(--home-section-py);
}

.home-section__head {
  margin-block: var(--home-section-head-my);
}

/* Notebooks (ex.: 1366x768): secoes mais baixas para enquadrar melhor a 100% de zoom */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .home-page {
    --home-section-py: 2rem;
    --home-section-head-my: 1.5rem;
  }

  .home-page .card-produto {
    --card-produto-height: clamp(300px, 23vw, 364px);
  }

  .home-page .cta-default {
    min-height: 300px;
  }

  .home-page .card-servico {
    min-height: 0;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }

  .home-page .card-servico__content {
    gap: .75rem;
  }

  .home-page .card-servico__title {
    font-size: 1.25rem;
  }

  .home-page .card-servico__desc {
    font-size: .9375rem;
    line-height: 1.45;
  }
}

/* Telas baixas (notebooks a 100% de zoom): "Serviços que Elevam o Nível" cabe inteira abaixo do header fixo */
@media (min-width: 992px) and (max-height: 870px) {
  .home-page .services-highlight-section {
    --home-section-py: 1.25rem;
  }

  .services-highlight-section .row {
    --bs-gutter-y: .875rem;
  }

  .services-highlight-section h2 {
    margin-block: 0 .75rem;
    font-size: 1.5rem;
  }

  .services-highlight-section p.fs-5 {
    margin-bottom: 1rem;
    font-size: 1rem !important;
  }

  .home-page .services-highlight-section .card-servico {
    min-height: 0;
    padding: 1.125rem 1.25rem;
    gap: .875rem;
  }

  .home-page .services-highlight-section .card-servico__icon {
    width: 48px;
    height: 48px;
  }

  .home-page .services-highlight-section .card-servico__icon img {
    width: 62px;
    height: 62px;
  }

  .home-page .services-highlight-section .card-servico__content {
    gap: .625rem;
  }

  .home-page .services-highlight-section .card-servico__title {
    font-size: 1.125rem;
  }

  .home-page .services-highlight-section .card-servico__desc {
    font-size: .875rem;
  }
}

@media (min-width: 992px) and (max-height: 720px) {
  .home-page .services-highlight-section {
    --home-section-py: .625rem;
  }

  .services-highlight-section .row {
    --bs-gutter-y: .625rem;
  }

  .services-highlight-section h2 {
    margin-bottom: .5rem;
    font-size: 1.375rem;
  }

  .services-highlight-section p.fs-5 {
    margin-bottom: .75rem;
    font-size: .9375rem !important;
    line-height: 1.4;
  }

  .services-highlight-section .btn {
    min-height: 2.25rem;
  }

  .home-page .services-highlight-section .card-servico {
    padding: .875rem 1rem;
    gap: .5rem;
  }

  .home-page .services-highlight-section .card-servico__icon {
    width: 40px;
    height: 40px;
  }

  .home-page .services-highlight-section .card-servico__icon img {
    width: 52px;
    height: 52px;
  }

  .home-page .services-highlight-section .card-servico__content {
    gap: .375rem;
  }

  .home-page .services-highlight-section .card-servico__title {
    font-size: 1rem;
  }

  .home-page .services-highlight-section .card-servico__desc {
    font-size: .8125rem;
    line-height: 1.35;
  }

  .home-page .services-highlight-section .card-servico__btn {
    padding: .3rem .75rem;
    font-size: .8125rem;
  }
}

/* FOOTER */
footer {
  background-color: var(--dark);
  margin-top: 3rem;
}

footer .logo-desktop {
  max-width: 200px;
  filter: brightness(0) invert(1)
}

footer h3 {
  margin-top: 0;
  font-size: 1.125rem;
  color: var(--light)
}

footer .footer__nav li a:not(.btn) {
  display: block;
  padding: 5px 0;
  font-size: .875rem;
  color: var(--light);
  transition: .3s
}

footer .footer__nav li a i {
  font-size: .625rem
}

footer .footer__nav li a:hover {
  color: var(--primary-color-light)
}

footer .address :is(span, a):not(.btn) {
  color: var(--light);
  font-size: .875rem;
  line-height: 25px;
  transition: .3s
}

footer .address a:not(.btn):hover {
  color: var(--primary-color-light)
}

.copyright-footer .btn.selos {
  min-height: unset;
}

@media screen and (max-width: 992.05px) {
  footer .social {
    justify-content: center;
  }
}

.card.card--23 {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: column nowrap;
  gap: 1rem;
  background-color: var(--dark);
  background-image: linear-gradient(-45deg, var(--dark), var(--grey)), var(--card-background);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply, normal;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  height: 100%
}

.card.card--23:focus-within,
.card.card--23:hover {
  box-shadow: 0 0 0 2px var(--secondary-color)
}

.card.card--23 .card__title {
  color: #fff;
  font-size: 1.25rem;
  text-shadow: 0 0 .25rem var(--dark);
  margin: 0;
  min-height: calc(1.25rem * 2 * 1.3)
}

.card.card--23 .card__link {
  z-index: 1;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: .5rem .75rem;
  font-size: .875rem;
  text-transform: uppercase;
  transition: var(--transition);
  color: var(--light);
  font-weight: 600;
  border: 2px solid currentColor;
  border-radius: 99px
}

.card.card--23 .card__link>span {
  width: 0;
  max-width: fit-content;
  opacity: 0;
  transition: var(--transition)
}

.card.card--23 .card__link:focus>span,
.card.card--23 .card__link:hover>span {
  width: 100px;
  opacity: 1;
  margin-right: .5rem
}

.card.card--23 .card__link::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  backface-visibility: visible
}

.card.card--23 .card__link:focus,
.card.card--23 .card__link:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-color)
}

.shadow-19 {
  box-shadow: rgba(50, 50, 93, .25) 0 2px 5px -1px, rgba(0, 0, 0, .3) 0 1px 3px -1px
}

.title-subtitle {
  margin-bottom: 0
}

.title-subtitle span {
  display: block;
  font-size: .9rem;
  color: #000;
  line-height: 1rem;
  letter-spacing: .25rem;
  text-transform: uppercase
}

/* ================= CLIENTES ================= */
.clientes .clientes__item {
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden
}

.clientes .clientes__item img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  margin: 0 auto;
  opacity: .75;
  border-radius: var(--bs-border-radius-sm);
  transition: opacity var(--transition)
}

.clientes .clientes__item:hover img {
  opacity: 1
}

/* ================= DEPOIMENTOS ================= */
.testimonial .testimonial-author-image {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 999px;
}

.obras-section .title {
  color: var(--primary-color);
}

.obras-section .splide__arrow {
  background: var(--primary-color);
}

.obras-section .splide__arrow svg {
  fill: #fff;
}