/* HEADER */
#site-header {
  --bg: rgba(10,32,60,0);
  --logo-h: 56px;        /* altura do ícone - base mobile */
  --title-size: 30px;    /* tamanho do texto - base mobile */
  --gap: 12px;           /* espaço entre ícone e texto */
  background: var(--bg);
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
  padding: 4px 0;
  z-index: 1000;
}

#site-header.scrolled {
  --bg: rgba(10,32,60,.92);
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  padding: 4px 0;
}

/* Marca REMPES */
.brand {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.logo-mark {
  height: var(--logo-h);
  width: auto;
  display: block;
}
.brand-title {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: var(--title-size);
  line-height: 1;
  letter-spacing: .3px;
  color: #fff;
  text-transform: uppercase;
}
.brand .logo-svg {
  height: var(--logo-h);
  width: auto;
  display: block;
}
.brand .brand-text {
  line-height: 1;
  transform: translateY(1px);
}
.brand .brand-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: var(--title-size);
}

/* Navbar Brand */
.navbar-brand {
  overflow: visible;
  align-items: center;
  display: flex;
  line-height: 1;
  padding: 2px 0;
}

/* Compensar header mais alto */
section[id] { scroll-margin-top: 160px; }
#heroCarousel .hero { padding-top: 160px; }
#site-header.scrolled + #heroCarousel .hero { padding-top: 120px; }

#site-header .nav-link {
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 .4rem;
  position: relative;
}
#site-header .nav-link:hover { color: #fff; }
#site-header .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: #FFA500;
  transition: width .2s ease;
}
#site-header .nav-link:hover::after { width: 100%; }

.btn-custom {
  background: #FFA500;
  color: #000;
  font-weight: 700;
  border: none;
}
.btn-custom:hover { background: #ff8800; }

/* HERO */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), var(--bg) center/cover no-repeat;
}
.hero .hero-content { max-width: 980px; }
.hero h1 { font-size: clamp(28px, 5vw, 56px); font-weight: 800; }
.hero .lead { font-size: clamp(16px, 2.2vw, 22px); }

/* Scroll offset para âncoras */
section[id] { scroll-margin-top: 96px; }
footer { background: #1E3A5F; }
footer .p-copyright {
  font-size: 14px;
  color: #818181;
  margin-top: 16px;
}

/* Evita que a logo seja cortada */
#site-header { padding: 0px 0; }
#site-header.scrolled { padding: 4px 0; }

/* Logo sizing sane defaults to avoid clipping */
#site-header .logo,
#site-header .logo-mark {
  height: 150px;
  width: auto;
  display: block;
  vertical-align: middle;
}
@media (min-width: 1200px) {
  #site-header .logo,
  #site-header .logo-mark {
    height: 150px;
  }
}

/* Limite de largura para telas enormes */
@media (min-width: 1400px) {
  .brand { gap: 12px; }
  #site-header {
    --logo-h: 84px;
    --title-size: 34px;
  }
  .brand-title {
    font-size: var(--title-size);
  }
  #site-header .brand-sub {
    font-size: 14px;
  }
}

/* Compensa header fixo nas âncoras/hero para telas maiores */
@media (min-width: 1200px) {
  section[id] { scroll-margin-top: 140px; }
  #heroCarousel .hero { padding-top: 140px; }
  #site-header.scrolled + #heroCarousel .hero { padding-top: 120px; }
}

#sobre {
  background-color: #1E3A5F; /* azul */
  padding: 60px 20px;        /* espaçamento interno */
  margin-top: 40px;          /* espaço acima (entre a imagem e a seção) */
  color: #fff;               /* texto branco */
}

#sobre .container {
  max-width: 1200px;         /* largura máxima centralizada */
  margin: 0 auto;
}

/* Hero ocupa quase a tela toda (empurra o "Sobre nós" para baixo) */
.hero{
  min-height: 86vh;            /* antes: 70vh */
  padding: 180px 20px 180px;   /* mais respiro em cima/baixo */
}

/* Telas médias/grandes: ocupa ainda mais */
@media (min-width: 1024px){
  .hero{ min-height: 104vh; }
}

/* Se você colocou margem no #sobre, deixe pequena */
#sobre{ margin-top: 24px; }     /* ajuste fino, pode até ser 0 */

footer .rgc-redirect {
  text-decoration: none;
  font-size: 14px;
  color: #999898;
  margin-top: 16px;
}

footer .rgc-redirect a {
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  margin-top: 16px;
   align-items: end;
  justify-content: end;
}

footer .rgc-redirect a:hover {
  text-decoration: none;
  color: #FFA500; /* cor do link ao passar o mouse */
  transition: .3s ease;
  align-items: end;
  justify-content: end;
}

/* Ajustes de responsividade */
@media (max-width: 768px) {
  #site-header .nav-link {
    font-size: 14px; /* tamanho menor em telas pequenas */
  }
  #site-header .brand-title {
    font-size: 24px; /* tamanho menor em telas pequenas */
  }
  #site-header .logo-mark {
    height: 48px; /* logo menor em telas pequenas */
  }
  .hero {
    padding: 120px 20px; /* menos padding em telas pequenas */
  }
  .hero h1 {
    font-size: 24px; /* título menor em telas pequenas */
  }
  .hero .lead {
    font-size: 16px; /* texto menor em telas pequenas */
  }
  footer .p-copyright {
    font-size: 12px; /* texto menor em rodapé */
  }
  footer .rgc-redirect {
    font-size: 12px; /* texto menor em rodapé */
  }
}

#clientes img {
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  background: #fff;
  padding: 12px;
  transition: transform 0.2s;
}
#clientes img:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
}