/* Variáveis CSS */
:root {
  --cor-primaria: #c0ab68;
  --cor-primaria-escura: #af984c;
  --cor-secundaria: #1e293b;
  --cor-secundaria-clara: #334155;
  --texto-escuro: #0f172a;
  --texto-claro: #64748b;
  --texto-suave: #94a3b8;
  --branco: #ffffff;
  --cinza-50: #f8fafc;
  --cinza-100: #f1f5f9;
  --cinza-200: #e2e8f0;
  --cinza-800: #1e293b;
  --cinza-900: #0f172a;
  --fonte-familia: "Montserrat", sans-serif;
}

/* Reset e Estilos Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--fonte-familia);
  line-height: 1.6;
  color: var(--texto-escuro);
  background-color: var(--cinza-50);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Tipografia */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
}

.texto-gradiente {
  background: linear-gradient(to right, #beab6f, #af984c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Botões */
.botao-primario {
  background: linear-gradient(
    135deg,
    var(--cor-primaria),
    var(--cor-primaria-escura)
  );
  color: var(--branco);
  border: none;
  border-radius: 15px;
  font-family: var(--fonte-familia);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.botao-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
  color: var(--branco);
}

.botao-secundario {
  background: linear-gradient(
    135deg,
    var(--cor-secundaria),
    var(--cor-secundaria-clara)
  );
  color: var(--branco);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  font-family: var(--fonte-familia);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.botao-secundario:hover {
  background: linear-gradient(
    135deg,
    var(--cor-secundaria-clara),
    var(--cinza-800)
  );
  transform: translateY(-2px);
  color: var(--branco);
}

.botao-outline {
  background: var(--branco);
  color: var(--texto-escuro);
  border: 2px solid var(--cinza-200);
  border-radius: 15px;
  font-family: var(--fonte-familia);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.botao-outline:hover {
  background: var(--cinza-50);
  border-color: var(--texto-claro);
  color: var(--texto-escuro);
}

.botao-escuro {
  background: linear-gradient(
    135deg,
    var(--cor-secundaria),
    var(--cor-secundaria-clara)
  );
  color: var(--branco);
  border: none;
  border-radius: 15px;
  font-family: var(--fonte-familia);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.botao-escuro:hover {
  background: linear-gradient(
    135deg,
    var(--cor-secundaria-clara),
    var(--cinza-800)
  );
  color: var(--branco);
}

.botao-azul {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: var(--branco);
  border: none;
  border-radius: 15px;
  font-family: var(--fonte-familia);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.botao-azul:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: var(--branco);
}

.botao-grande {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.seta-botao {
  transition: transform 0.3s ease;
}

.btn:hover .seta-botao {
  transform: translateX(4px);
}

/* Distintivos */
.distintivo-secao,
.distintivo-hero,
.distintivo-portfolio,
.distintivo-galeria,
.distintivo-servico {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(245, 158, 11, 0.1);
  color: var(--cor-primaria-escura);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 500;
}

.distintivo-galeria {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--texto-escuro);
  backdrop-filter: blur(10px);
}

/* Cabeçalhos de Seção */
.cabecalho-secao {
  margin-bottom: 3rem;
}

.titulo-secao {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--texto-escuro);
}

.descricao-secao {
  font-size: 1.125rem;
  color: var(--texto-claro);
  max-width: 600px;
  font-weight: 300;
  line-height: 1.7;
}

/* Cabeçalho */
.cabecalho {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
  z-index: 1030;
}

.logo-header {
  height: 80px;
  max-width: 180px;

  @media (max-width: 768px) {
    height: 60px;
    max-width: 150px;
  }
}

.navbar-toggler {
  border: none;
  padding: 0;
  color: var(--branco);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler i {
  font-size: 2rem;
}

/* Navegação */
.navbar-nav {
  gap: 1.5rem;
}

.nav-link {
  position: relative;
  color: var(--branco);
  font-weight: 500;
  padding: 0.5rem 0 !important;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--cor-primaria);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--cor-primaria);
}

.nav-link:hover::after {
  width: 100%;
}

.btn-contato {
  background-color: var(--cor-primaria);
  color: var(--branco) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  padding: 12px 24px !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-contato:hover {
  background-color: var(--cor-primaria-escura);
  transform: translateY(-2px);
}

.btn-contato::after {
  display: none;
}

@media (max-width: 991px) {
  .navbar-nav {
    gap: 1rem;
    padding: 2rem 0;
  }

  .nav-link {
    padding: 0.75rem 0 !important;
  }

  .btn-contato {
    margin-top: 0.5rem;
    width: 100%;
    text-align: center;
  }
}

/* Menu Offcanvas */
.offcanvas {
  background: var(--cinza-900);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-title {
  color: var(--branco);
  font-weight: 600;
}

.btn-close {
  background-color: var(--branco);
  opacity: 0.7;
}

.btn-close:hover {
  opacity: 1;
}

.offcanvas-body {
  padding: 1.5rem;
}

.offcanvas .nav-item {
  margin: 0.5rem 0;
}

.offcanvas .nav-link {
  font-size: 1.125rem;
  padding: 0.75rem 0;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas .nav-link:hover {
  color: var(--cor-primaria);
  transform: translateX(10px);
  transition: all 0.3s ease;
}

@media (max-width: 991px) {
  .navbar-collapse {
    display: none;
  }
}

/* Estilos Globais para Seções */
section {
  padding: 80px 0;

  @media (max-width: 768px) {
    padding: 50px 0;
  }
}

/* Seção Principal (Hero) */
.secao-principal {
  min-height: 100vh;
  background-color: #1e293b;
  padding: 7rem 0 4rem;
}

@media (max-width: 991px) {
  .secao-principal {
    padding: 6rem 0 3rem;
  }
}

.hero-slider {
  width: 100%;
}

.hero-slider .splide__slide {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slider .splide__track {
  overflow: hidden;
}

.hero-slider .splide__slide.is-active {
  opacity: 1;
}

.distintivo-hero {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  font-size: 0.875rem;
  color: #beab6f;
}

.titulo-principal {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
}

@media (max-width: 1199px) {
  .titulo-principal {
    font-size: 3.5rem;
  }
}

@media (max-width: 991px) {
  .titulo-principal {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {
  .titulo-principal {
    font-size: 2rem;
  }
}

.texto-gradiente {
  background: linear-gradient(to right, #beab6f, #af984c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.descricao-hero {
  font-size: 1.125rem;
  color: #94a3b8;
  max-width: 600px;
}

@media (max-width: 767px) {
  .descricao-hero {
    font-size: 1rem;
  }
}

.estatistica-hero {
  text-align: left;
}

@media (max-width: 991px) {
  .estatistica-hero {
    text-align: center;
    margin-bottom: 1.5rem;
  }
}

.numero-estatistica {
  font-size: 2.5rem;
  font-weight: 700;
  color: #beab6f;
  line-height: 1.2;
}

@media (max-width: 1199px) {
  .numero-estatistica {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .numero-estatistica {
    font-size: 1.75rem;
  }
}

.label-estatistica {
  font-size: 0.875rem;
  color: #94a3b8;
}

.imagem-hero {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}

@media (max-width: 991px) {
  .imagem-hero {
    margin: 3rem 0 1rem;
  }
}

.imagem-principal {
  border-radius: 15px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-height: 600px;
  width: 100%;
  object-fit: cover;
}

.card-flutuante {
  position: absolute;
  max-width: 150px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1rem;
  border-radius: 15px;
  color: #ffffff;
  z-index: 2;
}

@media (max-width: 767px) {
  .card-flutuante {
    display: none;
  }
}

.card-flutuante-topo {
  top: 1rem;
  right: 1rem;
  display: none !important;
}

.card-flutuante-baixo {
  bottom: 2rem;
  left: 2rem;
}

.icone-flutuante {
  color: #beab6f;
  font-size: 1.25rem;
}

.texto-flutuante {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 600;
}

.botao-grande {
  padding: 1rem 2rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .botao-grande {
    padding: 0.75rem 1.5rem;
    width: 100%;
  }
}

/* Seção Portfólio */
.secao-portfolio {
  background: linear-gradient(
    135deg,
    var(--cinza-900) 0%,
    var(--cor-secundaria) 100%
  );
  color: var(--branco);
}

.secao-portfolio .distintivo-secao {
  background: rgba(245, 158, 11, 0.2);
  color: #beab6f;
  border-color: rgba(245, 158, 11, 0.3);
}

.secao-portfolio .titulo-secao {
  color: var(--branco);
}

.secao-portfolio .descricao-secao {
  color: rgba(255, 255, 255, 0.8);
}

.card-portfolio {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-portfolio:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.imagem-portfolio {
  height: 250px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

.imagem-portfolio img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-portfolio:hover .imagem-portfolio img {
  transform: scale(1.1);
}

.sobreposicao-portfolio {
  position: absolute;
  inset: 0;
  opacity: 0.8;
}

.sobreposicao-rosa {
  background: linear-gradient(to top, #be185d, #ec4899);
}

.sobreposicao-azul {
  background: linear-gradient(to top, #1e40af, #3b82f6);
}

.sobreposicao-verde {
  background: linear-gradient(to top, #047857, #10b981);
}

.icone-portfolio {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icone-portfolio i {
  font-size: 1.25rem;
  color: var(--branco);
}

.titulo-portfolio {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}

.titulo-portfolio h3 {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--branco);
  margin-bottom: 0.25rem;
}

.titulo-portfolio p {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.875rem;
}

.distintivo-portfolio {
  background: rgba(245, 158, 11, 0.2);
  color: #beab6f;
  border-color: rgba(245, 158, 11, 0.3);
}

.lista-portfolio {
  margin-bottom: 0 !important;
}

.lista-portfolio li {
  margin-bottom: 0.75rem;
}

.lista-portfolio li:last-child {
  margin-bottom: 0;
}

.ponto-lista {
  width: 6px;
  height: 6px;
  background-color: var(--cor-primaria);
  border-radius: 50%;
}

.item-estatistica {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.item-estatistica:hover {
  background: rgba(255, 255, 255, 0.1);
}

.icone-estatistica {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(
    135deg,
    var(--cor-primaria),
    var(--cor-primaria-escura)
  );
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.icone-estatistica i {
  font-size: 1.25rem;
  color: var(--branco);
}

.numero-estatistica-portfolio {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 0.5rem;
}

.label-estatistica-portfolio {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

.cta-portfolio {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.2),
    rgba(217, 119, 6, 0.2)
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 15px;
}

.cta-portfolio h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--branco);
}

.cta-portfolio p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 300;
  max-width: 600px;
  line-height: 1.7;
}

/* Seção Diferenciais */
.secao-diferenciais {
  background: linear-gradient(135deg, var(--cinza-50) 0%, var(--branco) 100%);
}

.card-diferencial {
  background: #ffffff;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.card-diferencial:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.icone-diferencial {
  width: 4rem;
  height: 4rem;
  background: linear-gradient(135deg, var(--cor-primaria), #d4c38d);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.icone-diferencial i {
  font-size: 2rem;
  color: #ffffff;
}

.titulo-diferencial {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--texto-escuro);
}

.descricao-diferencial {
  font-size: 1rem;
  color: var(--texto-claro);
  line-height: 1.5;
}

.texto-pequeno {
  font-size: 0.875rem;
  color: var(--texto-suave);
  font-style: italic;
}

@media (max-width: 767.98px) {
  .card-diferencial {
    padding: 1.5rem;
  }

  .icone-diferencial {
    width: 3.5rem;
    height: 3.5rem;
  }

  .icone-diferencial i {
    font-size: 1.75rem;
  }

  .titulo-diferencial {
    font-size: 1.125rem;
  }
}

.cta-diferenciais {
  background: linear-gradient(135deg, var(--cor-secundaria), var(--cinza-900));
  border-radius: 15px;
  color: var(--branco);
}

.cta-diferenciais h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--branco);
}

.cta-diferenciais p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.numero-cta {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 0.5rem;
}

.label-cta {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

/* Seção Galeria */
.secao-galeria {
  background: var(--branco);
}

.card-galeria {
  background: var(--branco);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--cinza-100);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-galeria:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.imagem-galeria {
  overflow: hidden;
}

.imagem-galeria img {
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 15px;
}

.card-galeria:hover .imagem-galeria img {
  transform: scale(1.05);
}

.titulo-galeria {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--texto-escuro);
  margin-bottom: 0.5rem;
}

.descricao-galeria {
  color: var(--texto-claro);
  font-weight: 500;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.item-caracteristica {
  background: var(--cinza-50);
  border-radius: 15px;
  border: 1px solid var(--cinza-100);
  transition: all 0.3s ease;
}

.item-caracteristica:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.icone-caracteristica {
  width: clamp(3rem, 6vw, 4rem);
  height: clamp(3rem, 6vw, 4rem);
  background: linear-gradient(
    135deg,
    var(--cor-primaria),
    var(--cor-primaria-escura)
  );
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
}

.icone-caracteristica i {
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--branco);
}

.numero-caracteristica {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--texto-escuro);
  margin-bottom: 0.5rem;
}

.label-caracteristica {
  color: var(--texto-escuro);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.descricao-caracteristica {
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  color: var(--texto-claro);
}

/* Seção Serviços */
.secao-servicos {
  background: linear-gradient(to bottom, var(--cinza-50), var(--branco));
}

.hero-servicos {
  background-image: url("../public/images/alfaiate.webp");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  min-height: 300px;
  border-radius: 15px;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.hero-servicos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

.conteudo-hero-servicos {
  position: relative;
  z-index: 2;
  color: var(--branco);
}

.icone-hero-servicos {
  font-size: 2rem;
  color: var(--cor-primaria);
  margin-bottom: 1rem;
}

.titulo-hero-servicos {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.descricao-hero-servicos {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 500px;
  margin: 0 auto;
}

.card-flutuante-servicos {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-radius: 15px;
  color: var(--branco);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-flutuante-servicos-1 {
  top: 20%;
  left: 10%;
}

.card-flutuante-servicos-2 {
  bottom: 20%;
  right: 10%;
}

.icone-flutuante-servicos {
  font-size: 2rem;
  color: var(--cor-primaria);
}

.titulo-flutuante-servicos {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.subtitulo-flutuante-servicos {
  opacity: 0.8;
  font-size: 0.9rem;
}

.card-servico {
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card-servico:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.card-servico-cinza {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(226, 232, 240, 0.5);
}

.card-servico-ambar {
  background: rgba(254, 243, 199, 0.8);
  border-color: rgba(245, 158, 11, 0.2);
}

.card-servico-azul {
  background: rgba(219, 234, 254, 0.8);
  border-color: rgba(59, 130, 246, 0.2);
}

.icone-servico {
  width: clamp(3rem, 6vw, 4rem);
  height: clamp(3rem, 6vw, 4rem);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.card-servico-cinza .icone-servico {
  background: linear-gradient(135deg, #475569, var(--cor-secundaria));
}

.card-servico-ambar .icone-servico {
  background: linear-gradient(
    135deg,
    var(--cor-primaria),
    var(--cor-primaria-escura)
  );
}

.card-servico-azul .icone-servico {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.icone-servico i {
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--branco);
}

.titulo-servico {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--texto-escuro);
}

.descricao-servico p {
  color: var(--texto-claro);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1rem;
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.lista-servico li {
  color: var(--texto-claro);
  font-weight: 500;
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.ponto-servico {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--cor-primaria);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Seção Sobre */
.secao-sobre {
  background: var(--branco);
}

.titulo-sobre {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--texto-escuro);
}

.descricao-sobre p {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--texto-claro);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.estatistica-sobre {
  background: rgba(248, 250, 252, 0.8);
  border-radius: 15px;
  border: 1px solid rgba(226, 232, 240, 0.5);
}

.numero-sobre {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--cor-primaria-escura);
  margin-bottom: 0.25rem;
}

.label-sobre {
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  color: var(--texto-claro);
  font-weight: 500;
}

.imagem-sobre img {
  border-radius: 15px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.card-flutuante-sobre {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.5);
  text-align: center;
}

.numero-flutuante-sobre {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texto-escuro);
  margin-bottom: 0.25rem;
}

.label-flutuante-sobre {
  font-size: 0.75rem;
  color: var(--texto-claro);
  font-weight: 500;
}

/* Seção Parceiros */
.secao-parceiros {
  background: var(--cor-primaria);
  position: relative;
}

.secao-parceiros::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

.secao-parceiros .container {
  position: relative;
  z-index: 10;
}

.titulo-parceiros {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--branco);
}

.descricao-parceiros {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 300;
}

.item-parceiro {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.item-parceiro:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.logo-parceiro {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

/* Seção Contato */
.secao-contato {
  background: linear-gradient(135deg, var(--cinza-900), var(--cor-secundaria));
  color: var(--branco);
}

.secao-contato .distintivo-secao {
  background: rgba(245, 158, 11, 0.2);
  color: #beab6f;
  border-color: rgba(245, 158, 11, 0.3);
}

.secao-contato .titulo-secao {
  color: var(--branco);
}

.secao-contato .descricao-secao {
  color: rgba(255, 255, 255, 0.8);
}

.formulario-contato {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.titulo-formulario {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--branco);
}

.campo-formulario {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  color: var(--branco);
  font-family: var(--fonte-familia);
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.75rem 1rem;
}

.campo-formulario::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.campo-formulario:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
  color: var(--branco);
}

.titulo-informacoes {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--branco);
}

.card-contato {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.card-contato:hover {
  background: rgba(255, 255, 255, 0.1);
}

.icone-contato {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #475569, var(--cor-secundaria));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icone-contato i {
  font-size: 1.25rem;
  color: var(--cor-primaria);
}

.titulo-contato {
  font-weight: 700;
  color: var(--branco);
  margin-bottom: 0.5rem;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.info-contato {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  margin-bottom: 0.25rem;
  font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Rodapé */
.rodape {
  background: var(--cinza-900);
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-rodape-img {
  height: 3rem;
  width: auto;
  opacity: 0.8;
  max-width: 140px;
}

.texto-rodape {
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 300;
}

/* Customização do Splide */
.splide {
  padding: 0 0rem;
}

.splide__slide {
  padding: 0 0.5rem;
}

.splide__track {
  padding: 1rem 0;
}

.splide__arrow {
  background: #ffffff;
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.7;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.splide__arrow:hover {
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.splide__arrow svg {
  fill: var(--cor-primaria);
  transition: fill 0.3s ease;
}

.splide__arrow--prev {
  left: -2.5rem;
}

.splide__arrow--next {
  right: -2.5rem;
}

.splide__pagination {
  bottom: -2rem;
}

.splide__pagination__page {
  background: #cbd5e1;
  opacity: 0.7;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.splide__pagination__page.is-active {
  background: var(--cor-primaria);
  opacity: 1;
  transform: scale(1.2);
}

/* Design Responsivo Específico */
@media (max-width: 576px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .mb-5 {
    margin-bottom: 2rem !important;
  }

  .gap-4 {
    gap: 1rem !important;
  }

  .card-flutuante-topo,
  .card-flutuante-baixo {
    display: none !important;
  }

  .imagem-portfolio {
    height: 200px;
  }

  .imagem-galeria img {
    height: 200px;
  }

  .hero-servicos {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .secao-principal {
    padding-top: 4rem;
  }

  .gradiente-fundo {
    width: 100%;
  }

  .card-flutuante-servicos-1,
  .card-flutuante-servicos-2 {
    display: none !important;
  }

  .hero-servicos {
    min-height: 250px;
    padding: 2rem 1rem;
  }

  .titulo-hero-servicos {
    font-size: 1.5rem;
  }

  .descricao-hero-servicos {
    font-size: 0.9rem;
  }

  .icone-hero-servicos {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 992px) {
  .logo-imagem {
    height: 2rem;
  }
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out forwards;
}

/* Correções de Overflow */
.row {
  margin-left: 0;
  margin-right: 0;
}

.row > * {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* Garantir que nenhum elemento cause overflow */
* {
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Botão WhatsApp Flutuante */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 15px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  color: #fff;
  transform: scale(1.1);
}

/* Responsivo */
@media screen and (max-width: 767px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 25px;
  }
}

/* Desenvolvedor */
.desenvolvedor {
  font-size: 0.875rem;
  opacity: 0.8;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}

.link-desenvolvedor {
  color: var(--branco);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.link-desenvolvedor:hover {
  color: var(--cor-primaria);
}

.logo-desenvolvedor {
  height: 1.5rem;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.link-desenvolvedor:hover .logo-desenvolvedor {
  opacity: 1;
}

/* Hero Slider */
.hero-slider {
  width: 100%;
  height: 100%;
}

.hero-slider .splide__slide {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background-color: #1e293b;
  border-radius: 15px;
}

.hero-slider .splide__slide.is-active {
  opacity: 1;
}

.hero-slider .conteudo-texto {
  max-width: 100%;
  color: var(--cor-texto-claro);
}

.distintivo-hero {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  font-size: 0.875rem;
  color: #beab6f;
}

.skip-links {
  position: absolute;
  top: -1000px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.skip-link {
  background: var(--texto-escuro);
  color: var(--branco);
  padding: 1rem 2rem;
  margin: 0.5rem;
  border-radius: 15px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.skip-link:focus {
  top: 1rem;
  position: absolute;
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mermaid {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 15px;
  margin: 2rem 0;
}

.descricao-processo {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: #666;
  line-height: 1.6;
}

.descricao-processo p {
  margin-bottom: 1rem;
}

/* Estilos para os nós do fluxograma */
.mermaid .node rect {
  fill: #006d77 !important;
  stroke: none !important;
}

.mermaid .node text {
  fill: #fff !important;
}

.conteudo-portfolio {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.conteudo-portfolio .row {
  flex: 1;
}

@media (max-width: 767.98px) {
  .lista-portfolio li {
    margin-bottom: 0.5rem;
  }

  .col-6:first-child .lista-portfolio {
    margin-bottom: 1rem !important;
  }
}

.btn-cta-portfolio {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  background-color: #beab6f;
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px #beab6f;
}

.btn-cta-portfolio:hover {
  background-color: #af984c;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #af984c;
}

.btn-cta-portfolio:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px #af984c;
}

@media (max-width: 767.98px) {
  .btn-cta-portfolio {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

/* Cards de Processo */
.processo-cards {
  position: relative;
  padding: 2rem 0;
}

.card-processo {
  background: #ffffff;
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cinza-200);
  position: relative;
  z-index: 2;
}

.card-processo:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.icone-processo {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--cor-primaria);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icone-processo i {
  font-size: 1.5rem;
  color: #ffffff;
}

.titulo-processo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-escuro);
  margin: 0;
  line-height: 1.4;
}

.processo-seta {
  position: relative;
}

.processo-seta::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 2rem;
  height: 1px;
  background: var(--cor-primaria);
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.5;
}

@media (max-width: 991px) {
  .processo-seta::before {
    display: none;
  }
  .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.descricao-processo {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--texto-claro);
  padding-top: 3rem;
}

.descricao-processo p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* Texto do Processo */
.texto-processo {
  color: var(--texto-secundario);
}

.subtitulo-processo {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--texto-primario);
  line-height: 1.4;
  max-width: 900px;
  margin: 0 auto;
}

.texto-destaque {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--texto-secundario);
  max-width: 800px;
  margin: 0 auto;
}

.texto-destaque p {
  margin-bottom: 1rem;
}

.texto-destaque p:last-child {
  margin-bottom: 0;
}

.processo-cards {
  padding: 4rem 0;
}

@media (max-width: 768px) {
  .subtitulo-processo {
    font-size: 1.5rem;
  }

  .texto-destaque {
    font-size: 1.1rem;
  }

  .processo-cards {
    padding: 3rem 0;
  }
}

.texto-processo p {
  margin-bottom: 0;
}

.texto-processo p:last-child {
  margin-bottom: 0;
}

/* Processo */
.processo-wrapper {
  position: relative;
}

.card-processo {
  background: #ffffff;
  border-radius: 15px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(190, 171, 111, 0.1);
}

.card-processo:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(190, 171, 111, 0.15);
  border-color: var(--cor-primaria);
}

.numero-processo {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(190, 171, 111, 0.15);
  line-height: 1;
  font-family: "Montserrat", sans-serif;
}

.icone-processo {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, var(--cor-primaria), #d4c38d);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 2rem;
  position: relative;
  z-index: 1;
}

.icone-processo i {
  font-size: 2.5rem;
  color: #ffffff;
}

.titulo-processo {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto-primario);
  margin: 0;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .card-processo {
    margin-bottom: 2rem;
  }

  .numero-processo {
    font-size: 2.5rem;
    top: 1rem;
    left: 1rem;
  }

  .icone-processo {
    width: 4rem;
    height: 4rem;
  }

  .icone-processo i {
    font-size: 2rem;
  }

  .titulo-processo {
    font-size: 1.1rem;
  }
}