:root {
  --cor-primaria: #23344c;
  --cor-secundaria: #fefefe;
  --cor-destaque: #2b5486;
  --cor-botao: #7395a6;
  --cor-escura: #1f355e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

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

body {
  font-family: 'Sora', sans-serif;
  background-color: var(--cor-secundaria);
  color: var(--cor-primaria);
  overflow-x: hidden;
}

/* HEADER - DESKTOP COM GRID */
.navbar-text {
  background-color: #23344c;
  color: #B8D6ED;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 5px 30px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid #B8D6ED;
}

.navbar-left {
  justify-self: start;
}

a{
  text-decoration: none;
}

.navbar-nav-texto {
  display: flex;
  gap: 25px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-nav-texto a {
  text-decoration: none;
  color: #B8D6ED;
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.navbar-nav-texto a:hover {
  color: #fff;
}

.navbar-left .navbar-nav-texto a {
  position: relative;
  /* Necessário para posicionar a linha em relação ao link */
  padding-bottom: 5px;
  /* Cria um pequeno espaço entre o texto e a linha */
}

/* 2. Cria a linha (escondida por padrão) */
.navbar-left .navbar-nav-texto a::after {
  content: '';
  /* Pseudo-elementos sempre precisam da propriedade 'content' */
  position: absolute;
  width: 0;
  /* A linha começa com largura zero, ou seja, invisível */
  height: 2px;
  /* A espessura da linha */
  background-color: white;
  /* A cor da linha */
  bottom: 0;
  /* Posiciona a linha na parte de baixo do link (respeitando o padding) */
  left: 0;
  /* Alinha a linha à esquerda do texto */
  transition: width 0.3s ease-in-out;
  /* Animação suave da largura */
}

/* 3. Mostra a linha quando o mouse está sobre o link */
.navbar-left .navbar-nav-texto a:hover::after {
  width: 100%;
  /* Faz a linha se expandir até 100% da largura do link */
}

.navbar-center {
  justify-self: center;
}

#logo {
  height: 60px;
  display: block;
}

.navbar-right {
  justify-self: end;
}

.btn-contato {
  background-color: #B8D6ED;
  color: #2B5486;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;          /* REMOVE sublinhado */
  display: inline-flex;           /* COMPORTA COMO BOTÃO */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-contato:hover {
  transform: scale(1.05);
  background-color: #a6c9e4;      /* leve feedback visual */
}

.btn-contato:active {
  transform: scale(0.98);
}


/* MENU MOBILE ATUALIZADO */
.menu-hamburguer {
  display: none;
}

.menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: var(--cor-primaria);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-mobile.ativo {
  transform: translateX(0);
}

.menu-mobile ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.menu-mobile li {
  opacity: 0;
}

.menu-mobile.ativo li {
  animation: fadeInSlide 0.5s forwards;
}

.menu-mobile.ativo li:nth-child(1) {
  animation-delay: 0.1s;
}

.menu-mobile.ativo li:nth-child(2) {
  animation-delay: 0.2s;
}

.menu-mobile.ativo li:nth-child(3) {
  animation-delay: 0.3s;
}

.menu-mobile.ativo li:nth-child(4) {
  animation-delay: 0.4s;
}

.menu-mobile.ativo li:nth-child(5) {
  animation-delay: 0.5s;
}

.menu-mobile.ativo li:nth-child(6) {
  animation-delay: 0.6s;
}

.menu-mobile a {
  display: flex;
  align-items: center;
  color: var(--cor-secundaria);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 15px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.menu-mobile a:hover {
  background-color: var(--cor-destaque);
  transform: translateX(5px);
}

.menu-mobile a i {
  width: 40px;
  text-align: center;
  margin-right: 10px;
  color: #A5CFF3;
}

/* BOTÃO DE FECHAR E OVERLAY */
.close-menu-icon {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 1.8rem;
  color: #A5CFF3;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.close-menu-icon:hover {
  transform: rotate(90deg) scale(1.1);
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.menu-overlay.ativo {
  opacity: 1;
  visibility: visible;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* MEDIA QUERY HEADER (até 1024px) */
@media (max-width: 1024px) {
  .navbar-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-left,
  .navbar-center,
  .navbar-right {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .navbar-left {
    justify-content: flex-start;
  }

  .navbar-center {
    justify-content: center;
  }

  .navbar-right {
    justify-content: flex-end;
  }

  .navbar-nav-texto {
    display: none;
  }

  .menu-hamburguer {
    display: block;
    font-size: 1.8rem;
    color: #B8D6ED;
    cursor: pointer;
  }

  #logo {
    height: 50px;
  }

  .btn-contato {
    display: none;
  }
}

/* BANNER PRINCIPAL */
.MP {
  display: flex;
  height: 100vh;
  width: 100%;
  position: relative;
}

.MP-text {
  flex: 1;
  background-color: #23344c;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  z-index: 2;
}

.MP-text h1 {
  font-size: 64px;
  line-height: 1.1;
}

.MP-text p {
  font-size: 20px;
  margin: 30px 0;
  max-width: 400px;
}

.buttons {
  display: flex;
  gap: 20px;
}

.buttons a {
  text-decoration: none;
  padding: 15px 25px;
  border-radius: 8px;
  font-weight: bold;
}

.btn-primary {
  background-color: #A5CFF3;
  color: #003C71;
}

.MP-image {
  flex: 1;
  background-image: url('../image/Enscape_2025-04-01-18-06-59.png');
  background-size: cover;
  background-position: 50% center;
  clip-path: ellipse(68% 120% at 68% 90%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  z-index: 2;
}

#text-banner {
  font-weight: bolder;
}

/* MEDIA QUERY BANNER (até 900px) */
@media (max-width: 900px) {
  .MP {
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-image: url('../image/Enscape_2025-04-01-18-06-59.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* CORREÇÃO DO ALINHAMENTO DO TÍTULO */
    align-items: center;
    justify-content: center;
  }

  .MP::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(35, 52, 76, 0.7);
    z-index: 1;
  }

  .MP-image {
    display: none;
  }

  .MP-text {
    background: transparent;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
    max-width: 600px;
    text-align: center;
    align-items: center;
  }

  .MP-text h1 {
    font-size: 45px;
  }
}

/*-------------------------------------------------- Marcenaria -------------------------------------------------*/
.marcenaria-section {
  background: #fff;
  padding: 80px 5%;
  display: flex;
  justify-content: center;
}

/* --- LAYOUT DESKTOP (Com CSS Grid) --- */
/* Este código cria o layout da imagem que você enviou */

.marcenaria-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Duas colunas de larguras iguais */
  gap: 40px 60px;
  align-items: center;
  max-width: 1400px;
  width: 100%;
}

.carousel-wrapper {
  grid-column: 1 / 2;
  /* Posição: Coluna 1 */
  width: 100%;
  height: 550px;
}

.marcenaria-text {
  grid-column: 2 / 3;
  /* Posição: Coluna 2 */
}

.five-buttons {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Alinha verticalmente os botões e o separador */
  gap: 20px;
  margin-top: 20px;
}

/* Base comum para os dois botões */
.five-buttons button {
  padding: 18px 35px;
  /* Botões mais largos */
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  /* Transição suave para todos os efeitos */
  position: relative;
  /* Para efeitos de hover */
  overflow: hidden;
  /* Para o efeito de preenchimento */
}

/* Estilo do Botão Primário (Preenchido) */
.btn-primary {
  background-color: var(--cor-destaque);
  color: var(--cor-secundaria);
}

/* Efeito de hover para o Botão Primário */
.btn-primary:hover {
  transform: translateY(-4px);
  /* Efeito de "levantar" */
  box-shadow: 0 10px 20px rgba(43, 84, 134, 0.3);
  /* Sombra suave */
}

/* Estilo do Botão Secundário (Vazado) */
.btn-outline {
  background-color: transparent;
  color: var(--cor-destaque);
  border-color: var(--cor-destaque);
}

/* Efeito de hover para o Botão Secundário (preenchimento) */
.btn-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  /* Começa com largura 0 */
  height: 100%;
  background-color: var(--cor-destaque);
  transition: width 0.4s ease;
  z-index: -1;
}

.btn-outline:hover {
  color: var(--cor-secundaria);
  background-color: var(--cor-destaque);
  /* Texto fica branco */
}

.btn-outline:hover::before {
  width: 100%;
  /* Preenche o fundo no hover */
}

/* Animação do ícone de seta */
.btn-outline i {
  transition: transform 0.3s ease;
}

.btn-outline:hover i {
  transform: translateX(5px);
  /* Move a seta para a direita */
}


/* Estilo para o Separador "OU" */
.button-separator {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #a0a0a0;
  font-weight: bold;
}

.button-separator .line {
  width: 40px;
  height: 1px;
  background-color: #d0d0d0;
}


/* --- AJUSTES PARA MOBILE --- */
/* Garante que o separador não apareça no mobile */
@media (max-width: 900px) {
  .button-separator {
    display: none;
  }
}

/* --- LAYOUT MOBILE (Com Flexbox) --- */
@media (max-width: 900px) {
  .marcenaria-container {
    display: flex;
    /* Muda de Grid para Flex */
    flex-direction: column;
    /* Empilha os itens */
    gap: 30px;
  }

  /* Define a ordem para o mobile */
  .marcenaria-text {
    order: 1;
    /* Texto vem primeiro */
    text-align: center;
  }

  .carousel-wrapper {
    order: 2;
    /* Carrossel vem em segundo */
    height: 50s0px;
  }

  .five-buttons {
    order: 3;
    /* Botões vem por último */
    margin-top: 0;
  }
}

/* --- ESTILOS GERAIS E PARA TELAS PEQUENAS --- */

/* Estilos de conteúdo (não precisam mudar) */
.marcenaria-text h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: bold;
}

.marcenaria-text .highlight {
  color: var(--cor-destaque, #2b5486);
}

.marcenaria-text p {
  font-size: 1.1rem;
  margin-bottom: 15px;
  line-height: 1.6;
}

@media (max-width: 900px) {

  /* Adicione mais espaço abaixo do título e parágrafos */
  .marcenaria-text h1 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    /* AUMENTEI A MARGEM (antes era menor) */
  }

  .marcenaria-text p {
    font-size: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    /* ADICIONEI MARGEM ABAIXO DOS PARÁGRAFOS */
  }
}

/* Empilha os botões em telas muito pequenas */
@media (max-width: 480px) {
  .five-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .five-buttons .btn-primary,
  .five-buttons .btn-outline {
    width: 100%;
    max-width: 300px;
  }
}

/*-------------------------------------------------- Projetos Vitrine -------------------------------------------------*/

.hero-section {
  position: relative;
  height: 110vh;
  overflow: hidden;

}

/* Conteúdo central */
.hero-container {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  transition: color 0.5s ease;
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 2rem;
  font-weight: 500;
  margin-top: 10px;
}

/* Botões */
.hero-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn-primary,
.btn-outline {
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--cor-destaque);
  color: white;
  border-color: var(--cor-destaque);
}

.hero-section .btn-outline {
  position: relative;
  /* Essencial para o efeito */
  overflow: hidden;
  /* Esconde o fundo que vai "deslizar" */
  z-index: 1;
  /* Garante que o botão fique acima do vídeo */
}

/* 2. Cria o fundo azul que fica escondido por padrão */
.hero-section .btn-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  /* Começa com largura zero (invisível) */
  height: 100%;
  background-color: var(--cor-primaria);
  /* O fundo azul que você quer */
  transition: width 0.4s ease-in-out;
  /* A animação suave */
  z-index: -1;
  /* Fica atrás do texto do botão */
}

/* 3. A mágica acontece no hover (ou no clique/toque no mobile) */
.hero-section .btn-outline:hover {
  color: white !important;
  /* Força o texto a ficar branco no hover */
}

.hero-section .btn-outline:hover::before {
  width: 100%;
  /* Expande o fundo azul para preencher o botão */
}

/* Vídeo */
.video-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  /* mais tempo de fade */
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  /* começa um pouco mais "zoomado" */
  opacity: 0;
  transition:
    transform 3s ease-in-out,
    /* duração maior no zoom */
    opacity 3s ease-in-out;
}

/* Máscara curva */
.video-mask {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  height: -10px;
  background-color: white;
  clip-path: ellipse(100% 40% at 23% 42%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}


/* Estado ativo */
.active .video-wrapper {
  opacity: 1;
}

.active .video-wrapper video {
  transform: scale(1);
  opacity: 1;
}

.active .video-mask {
  opacity: 1;
  /* máscara só aparece com vídeo ativo */
}

.active .hero-container {
  color: white;
}

.active .btn-outline {
  color: white;
  border-color: white;
}

.active .btn-outline:hover {
  background-color: white;
  color: var(--cor-primaria);
}

.active .btn-primary {
  background-color: white;
  color: var(--cor-primaria);
  border-color: white;
}

@media (max-width: 768px) {
  .hero-section {
    height: 100vh;
    /* Altura ajustada para mobile */
  }

  .hero-container::before {
    /* Novo overlay para garantir legibilidade do texto */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 60%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  /* Faz o overlay aparecer junto com o resto da animação */
  .active .hero-container::before {
    opacity: 1;
  }

  /* Ajustes de fonte que você já tinha */
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
    max-width: 90%;
    /* Evita que o texto encoste nas bordas */
  }

  .video-wrapper video {
    height: 100%;
    /* Garante que o vídeo cubra a nova altura */
  }

  /* Remove a máscara de elipse e simplifica a transição */
  .video-mask {
    display: none;
    /* Escondemos a máscara original */
  }
}

/* Ajuste para telas bem pequenas, empilhando os botões */
@media (max-width: 480px) {
  .hero-buttons {
    flex-direction: column;
    /* Empilha os botões */
    width: 90%;
    max-width: 300px;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-outline {
    width: 100%;
    /* Faz os botões ocuparem a largura total */
  }
}

/*-------------------------------------------------- Projetos Vídeo -------------------------------------------------*/
/* ===== GARANTE QUE A CAPA DO VÍDEO PRINCIPAL FUNCIONE ===== */
.hero-video-slot video[poster] {
  object-fit: cover;
  background-color: #000;
}

/* ===== GARANTE QUE AS CAPAS DAS THUMBNAILS FUNCIONEM ===== */
.thumbnail-item video[poster] {
  object-fit: cover;
  background-color: #000;
}

/* ===== EVITA BUG VISUAL QUANDO O VÍDEO AINDA NÃO CARREGOU ===== */
.hero-video-slot video::-webkit-media-controls {
  opacity: 1;
}

/* ===== FORÇA A CAPA A APARECER ANTES DO PLAY ===== */
video:not([playing]) {
  background-size: cover;
  background-position: center;
}

.video-gallery-section {
  background-color: var(--cor-primaria);
  min-height: 100vh;
  padding: 60px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-gallery-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1400px;
  width: 100%;
}

/* LADO ESQUERDO: A GALERIA */
.video-gallery {
  flex: 1.5;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
  align-items: center;
  max-height: 85vh;
}

.hero-video-slot,
.thumbnail-grid {
  max-height: 85vh;
}

.hero-video-slot {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.hero-video-slot .main-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  justify-content: center;
}

.thumbnail-item {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.thumbnail-item:hover {
  opacity: 1;
  transform: scale(1.05);
  border-color: var(--cor-secundaria);
}

.thumbnail-item.active-thumbnail {
  opacity: 1;
  border-color: var(--cor-destaque);
  box-shadow: 0 0 20px rgba(43, 84, 134, 0.7);
}

.thumbnail-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* LADO DIREITO: O TEXTO (AGORA SEMPRE VISÍVEL) */
.video-gallery-text {
  flex: 1;
  color: var(--cor-secundaria);
}

.video-gallery-text h4 {
  color: #BDED;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.video-gallery-text h1 {
  font-size: 2.8rem;
  margin-bottom: 24px;
  line-height: 1.2;
}

.video-gallery-text p {
  font-size: 1.1rem;
  color: #BDED;
  margin-bottom: 16px;
  line-height: 1.6;
}

#text_info{
  color: #f0f4f8;
}

/* Bloco do botão (removido do HTML, mas deixamos a regra caso queira usar em outro lugar) */
.video-gallery-buttons .btn-light {
  background-color: #2B5486;
  color: #b8d6ed;
  font-size: 1.2rem;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
}

.video-gallery-buttons .btn-light:hover {
  background-color: #3a6aa0;
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 1024px) {
  .video-gallery-container {
    flex-direction: column;
    text-align: center;
    /* Mantido centralizado como você pediu */
  }

  /* Ordem corrigida para o mobile (sem o botão) */
  .video-gallery-text {
    order: 1;
  }

  .video-gallery {
    order: 2;
    margin-top: 5px;
  }
}

@media (max-width: 768px) {
  .video-gallery {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .hero-video-slot {
    max-width: 450px;
    margin: 0 auto;
  }

  .thumbnail-grid {
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
    max-height: none;
  }

  .thumbnail-item {
    width: 80px;
    aspect-ratio: 1 / 1;
    /* Mantido quadrado como você pediu */
  }

  .video-gallery-text h1 {
    font-size: 2.2rem;
  }

  .video-gallery-text p {
    font-size: 1rem;
  }
}

/*-------------------------------------------------- Projetos fotos -------------------------------------------------*/

.portifolio-section {
  padding: 80px 5%;
  background-color: var(--cor-secundaria);
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: hidden;
}

.portifolio-title {
  font-size: 3.5rem;
  /* Talvez um pouco maior para mais impacto */
  font-weight: 700;
  /* Mais negrito */
  margin-bottom: 15px;
  /* Mais espaço abaixo */
  color: var(--cor-escura);
  letter-spacing: -0.02em;
  /* Pequeno ajuste de espaçamento entre letras para modernidade */
}

.portifolio-subtitle {
  font-size: 1.3rem;
  /* Um pouco maior e mais legível */
  color: #666;
  /* Uma cor um pouco mais suave que #555 */
  margin-bottom: 50px;
  /* Mais espaço para o grid */
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  /* Melhor espaçamento entre linhas */
}

/* Garante que os títulos também sejam centralizados explicitamente */
.portifolio-title,
.portifolio-subtitle {
  text-align: center;
}

/* Animação suave para os títulos (opcional, mas um toque profissional) */
.portifolio-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}

.portifolio-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

/* Layout das Linhas de Galeria */
.portifolio-gallery,
.portifolio-gallery-2 {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.portifolio-gallery img,
.portifolio-gallery-2 img {
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  cursor: pointer;
  /* Adiciona o cursor de clique */
  transition: transform 0.3s ease;
}

.portifolio-gallery img:hover,
.portifolio-gallery-2 img:hover {
  transform: scale(1.02);
  /* Efeito de hover sutil */
}

.portifolio-gallery img:first-child {
  flex-basis: 40%;
}

.portifolio-gallery img:last-child {
  flex-basis: 60%;
}

.portifolio-gallery-2 img:first-child {
  flex-basis: 60%;
}

.portifolio-gallery-2 img:last-child {
  flex-basis: 40%;
}

/* Lógica do Botão "Ver mais" */
.gallery-hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

.gallery-hidden.show {
  max-height: 9999px; /* nunca corta */
  opacity: 1;
}


.gallery-toggle-container {
  text-align: center;
  margin-top: 30px;
}

#toggle-gallery-btn {
  padding: 15px 35px;
  background-color: #192737;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 1rem;
}

#toggle-gallery-btn:hover {
  background-color: #2a3b4c;
}

/* Estilo do Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  /* Efeito de blur no fundo para sofisticação */
}

.lightbox.show {
  display: flex;
}

.lightbox-content {
  max-width: 90%;
  max-height: 85%;
  border-radius: 12px;
  /* Cantos arredondados na imagem */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  /* Sombra mais intensa */
  animation: zoomIn 0.5s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

.lightbox-close {
  position: absolute;
  top: 25px;
  right: 35px;
  color: #fff;
  font-size: 50px;
  /* Ícone maior */
  font-weight: 200;
  /* Mais fino */
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1001;
  /* Garante que fique acima de tudo */
}

.lightbox-close:hover {
  color: #aaa;
}

/* Cor sutil no hover */


/* Botões de Navegação (SETA) */
.lightbox-prev,
.lightbox-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-destaque);
  /* MUDANÇA: Cor da seta para azul */
  font-size: 45px;
  font-weight: 200;
  padding: 12px;
  /* Removido padding horizontal extra */
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.15);
  /* Fundo branco sutil */
  backdrop-filter: blur(2px);
  /* Efeito de vidro para modernidade */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Borda sutil */
  border-radius: 50%;
  /* Deixa os botões redondos */
  width: 60px;
  /* Largura fixa */
  height: 60px;
  /* Altura fixa */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  user-select: none;
}

.lightbox-prev {
  left: 25px;
}

.lightbox-next {
  right: 25px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: rgba(255, 255, 255, 0.3);
  /* Clareia no hover */
  transform: translateY(-50%) scale(1.05);
}

/* Responsividade para os botões no mobile */
@media (max-width: 768px) {
  .lightbox-close {
    top: 15px;
    right: 20px;
    font-size: 35px;
  }

  /* MUDANÇA: CORREÇÃO DO POSICIONAMENTO DAS SETAS NO MOBILE */
  .lightbox-prev,
  .lightbox-next {
    width: 45px;
    height: 45px;
    font-size: 30px;
    padding: 0;
    /* Remover padding, já que width/height são fixos */
  }

  .lightbox-prev {
    left: 10px;
    /* Mais próximo da borda esquerda */
  }

  .lightbox-next {
    right: 10px;
    /* Mais próximo da borda direita */
  }
}

/* Animações e Responsividade */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {

  .portifolio-gallery,
  .portifolio-gallery-2 {
    flex-direction: column;
    gap: 25px; /* aumenta espaço entre imagens */
    margin-bottom: 40px; /* mais espaço entre as seções */
  }

  .portifolio-gallery img,
  .portifolio-gallery-2 img {
    width: 100%;
    height: auto !important; /* força ajuste correto */
    opacity: 1 !important;   /* impede sumir antes da animação */
  }

  /* Aumenta espaço geral do portfólio */
  .portifolio-section {
    padding: 60px 6%;
  }

  /* Ajusta título/subtítulo */
  .portifolio-title {
    font-size: 2.1rem;
  }

  .portifolio-subtitle {
    font-size: 1rem;
    margin-bottom: 40px;
  }
}

/*-------------------------------------------------- Processo -------------------------------------------------*/

:root {
  --timeline-line-width: 4px;
  --timeline-gap: 100px;
  --frame-max-width: 400px;
  --center-col-width: 150px;
  --card-offset: 60px;
}

.timeline-section {
  background-color: var(--cor-primaria);
  border-radius: 15px;
  padding: 1px 0;
  overflow-x: hidden;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 50px;
  color: var(--cor-secundaria);
}

.timeline-title {
  text-align: center;
  color: var(--cor-secundaria);
  margin-bottom: 60px;
  font-size: 3rem;
  position: relative;
  z-index: 6;
}

.timeline-title::after {
  content: "";
  display: block;
  width: 80%;
  max-width: 720px;
  height: 3px;
  background: var(--cor-secundaria);
  margin: 15px auto 0;
  border-radius: 4px;
}

.timeline-line {
  position: absolute;
  left: 50%;
  width: var(--timeline-line-width);
  /* --- AQUI ESTÁ A MUDANÇA --- */
  background: transparent;
  /* A linha de fundo agora é invisível */
  box-shadow: none;
  /* Removemos também qualquer sombra que ela tinha */
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 4px;
}

.timeline-line-fill {
  position: absolute;
  left: 50%;
  width: var(--timeline-line-width);
  height: 0;
  background: linear-gradient(180deg, var(--cor-destaque), rgba(43, 84, 134, 0.85));
  transform: translateX(-50%);
  z-index: 3;
  border-radius: 4px;
  transition: height 0.2s linear;
}

/* --- LAYOUT DESKTOP (GRID ZIGUE-ZAGUE) --- */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr var(--center-col-width) 1fr;
  align-items: start;
  padding: calc(var(--timeline-gap) / 2) 0;
  position: relative;
}

.timeline-item.left {
  grid-column: 1 / 2;
  justify-self: end;
  transform: translateX(calc(-1 * var(--card-offset)));
}

.timeline-item.right {
  grid-column: 3 / 4;
  justify-self: start;
  transform: translateX(calc(var(--card-offset)));
}

.frame-box {
  background: linear-gradient(135deg, #18283a, #0a1420);
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  color: var(--cor-secundaria);
  max-width: var(--frame-max-width);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.frame-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(2, 18, 30, 0.6);
  border-color: rgba(43, 84, 134, 0.5);
}

.frame-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.frame-icon {
  width: 38px;
  height: 38px;
}

.frame-title {
  font-size: 1.5rem;
  margin: 0;
  color: var(--cor-secundaria);
}

.frame-box p {
  margin: 6px 0 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.timeline-dot {
  grid-column: 2 / 3;
  justify-self: center;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-top: -50px;
  background: #18283a;
  border-radius: 50%;
  border: 4px solid var(--cor-primaria);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
  z-index: 4;
  transition: all 0.35s ease;
}

.timeline-row.active .timeline-dot {
  background: var(--cor-destaque);
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--cor-destaque);
}

/* ======================================================= */
/* --- RESPONSIVIDADE (NOVO Layout Mobile Centralizado) --- */
/* ======================================================= */
@media (max-width: 900px) {
  .timeline {
    padding: 0 20px;
  }

  .timeline-title {
    font-size: 2.2rem;
    margin-bottom: 40px;
  }

  .timeline-title::after {
    width: 90%;
  }

  .timeline-row {
    display: block;
    padding: 40px 0;
  }

  .timeline-item {
    width: 90%;
    margin: 0 auto;
    transform: none !important;
    position: relative;
    z-index: 5;
  }

  .frame-box {
    padding: 25px;
  }

  .frame-title {
    font-size: 1.2rem;
  }

  .frame-box p {
    font-size: 0.9rem;
  }

  .timeline-dot {
    display: none;
  }
}

/*-------------------------------------------------- Diferencial -------------------------------------------------*/

.diferenciais-showcase {
  padding: 80px 5%;
  background: #fff;
}

.container-diferencial {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.diferenciais-header .title-diferencial {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--cor-primaria);
}

.diferenciais-header .subtitle-diferencial {
  font-size: 1.2rem;
  margin-bottom: 50px;
  color: #555;
}

.diferenciais-carousel-wrapper {
  margin-bottom: 40px;
}

.swiper-container-diferencial {
  width: 100%;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.swiper-container-diferencial .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-legend {
  margin-top: 15px;
  font-size: 1rem;
  color: #666;
  font-style: italic;
  min-height: 24px;
  /* Evita que o layout "pule" ao trocar a legenda */
}

.diferenciais-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.diferencial-tab-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 12px;
  border: 1px solid #e0e5eb;
  background-color: #f8fafd;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cor-primaria);
  cursor: pointer;
  transition: all 0.3s ease;
}

.diferencial-tab-btn:hover {
  border-color: var(--cor-destaque);
  transform: translateY(-3px);
}

.diferencial-tab-btn.active {
  background-color: var(--cor-escura);
  color: var(--cor-secundaria);
  border-color: var(--cor-escura);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.diferenciais-content-panels {
  text-align: left;
  background-color: #23344C;
  /* A caixa agora tem o fundo azul escuro */
  border-radius: 16px;
  /* Cantos arredondados */
  padding: 40px;
  /* Espaçamento interno generoso */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Borda sutil para dar profundidade */
}

.diferencial-content-panel {
  display: none;
}

.diferencial-content-panel.active {
  display: block;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Slides padrão (desktop) */
.slide1 { 
    background-image: url("../image/11\ \(3\).png"); 
}
.slide2 { 
    background-image: url("../image/11\ \(2\).png"); 
}
.slide3 { 
    background-image: url("../image/11\ \(1\).png"); 
}
/* Ajustes gerais */
.swiper-slide {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 500px; /* ajuste se quiser */
}

/* MOBILE — troca as imagens */
@media (max-width: 768px) {
    .slide1 { 
        background-image: url("../image/1080s.png"); 
    }
    .slide2 { 
        background-image: url("../image/55\ \(2\).png"); 
    }
    .slide3 { 
        background-image: url("../image/55\ \(1\).png"); 
    }
}



/* MUDANÇA CRUCIAL: O texto dentro da caixa agora é claro */
.diferencial-content-panel h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--cor-secundaria);
  /* Texto branco */
}

.diferencial-content-panel p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 25px;
  color: #B8D6ED;
  /* Tom de azul claro para o parágrafo */
}

.diferencial-content-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.diferencial-content-panel ul li {
  font-size: 1rem;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
  color: #B8D6ED;
  /* Tom de azul claro para os itens da lista */
}

.diferencial-content-panel ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cor-secundaria);
  /* Checkmark branco para máximo contraste */
  font-weight: bold;
}


/* Ajuste de padding no mobile para a caixa não ficar tão grande */
@media (max-width: 768px) {
  .diferenciais-content-panels {
    padding: 30px;
  }
}

.diferencial-tab-btn {
  font-size: 0.9rem;
  padding: 12px 20px;
}

.diferencial-content-panel h3 {
  font-size:1.5rem;
}

.diferencial-content-panel p {
  font-size: 1rem;
}

.diferenciais-header h2{
  font-size: 3.5rem;
}


/* Slide individual */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Botões de navegação */
.swiper-button-prev,
.swiper-button-next {
  color: #000;
}

.swiper-pagination-bullet {
  background: #000;
}

/*-------------------------------------------------- Sobre a empresa -------------------------------------------------*/

.historia-sobre {
  background: var(--cor-primaria);
  color: #fff;
  text-align: center;
  padding: 80px 5%;
  border-radius: 15px;
}

.historia-header-sobre h4 {
  color: var(--cor-destaque);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.historia-header-sobre h2 {
  font-size: 3rem;
  margin-bottom: 15px;
  color: var(--cor-secundaria);
}

.historia-header-sobre p {
  margin: 0 auto 50px;
  max-width: 800px;
  color: #cdd6f4;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* Carrossel Imersivo */
.swiper-container-sobre {
  width: 100%;
  max-width: 1050px;
  height: 500px;
  border-radius: 16px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sobre-slide {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* Alinha o conteúdo na base */
  padding: 40px;
}

.sobre-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  z-index: 1;
  filter: brightness(0.7);
}


.sobre-slide::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 2;
}

.sobre-slide-content {
  position: relative;
  z-index: 3;
  text-align: left;
  color: #fff;
}

.tag-sobre {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.sobre-slide-content h3 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.sobre-slide-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.9);
}

/* Controles do Swiper */
.swiper-container-sobre .swiper-button-prev,
.swiper-container-sobre .swiper-button-next {
  color: #fff;
}

.swiper-container-sobre .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5);
}

.swiper-container-sobre .swiper-pagination-bullet-active {
  background: #fff;
}

/* Linha e Métricas */
.divider-sobre {
  height: 2px;
  background: var(--cor-destaque);
  width: 80%;
  max-width: 400px;
  margin: 60px auto;
  border-radius: 2px;
}

.metrics-sobre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.metric-sobre {
  padding: 30px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.metric-sobre:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.metric-sobre h4 {
  font-size: 3rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.metric-sobre span {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.metric-sobre p {
  margin: 0;
  color: #cdd6f4;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1500px) {
  .historia-header-sobre h2 {
    font-size: 2.2rem;
  }

  .swiper-container-sobre {
    height: 450px;

  }

  .sobre-slide-content h3 {
    font-size: 1.5rem;
  }

  .sobre-slide-content p {
    font-size: 1rem;
  }

  .swiper-container-sobre{
    height: 5%;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .metrics-sobre {
    grid-template-columns: 1fr;
  }
}

/* --- CONTROLE DE IMAGEM DESKTOP / MOBILE --- */

.desktop-img {
  display: block;
}

.mobile-img {
  display: none;
}

/* MOBILE */
@media (max-width: 768px) {
  .desktop-img {
    display: none;
  }

  .mobile-img {
    display: block;
  }
}



/*-------------------------------------------------- Depoimentos -------------------------------------------------*/

.depoimentos-section {
  padding: 80px 0;
  background: #fff;
}

.depoimentos-header {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 5%;
}

.depoimentos-header h4 {
  color: var(--cor-destaque);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.depoimentos-header h2 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--cor-primaria);
}

.depoimentos-header p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  color: #555;
}

/* A Esteira de Rolagem */
.scroller {
  max-width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  width: max-content;
  /* Animação CORRIGIDA E MAIS EXPLÍCITA */
  animation: scroll 20s linear infinite;
}


/* Keyframes CORRIGIDOS para um loop perfeito */
@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    /* Anima exatamente pela metade da largura total (o tamanho do conteúdo original) */
    transform: translateX(calc(-50% - 10px));
    /* O -10px é metade do 'gap' de 20px */
  }
}

/* Os Novos Cards de Depoimento (Estilo Conversa) */
.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem 0;
}

.depoimento-card-social {
  width: 380px;
  background: #f0f4f8;
  /* Fundo do card */
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #e8eef3;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.card-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.card-header .author {
  text-align: left;
}

.card-header .author h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--cor-primaria);
}

.card-header .author span {
  font-size: 0.9rem;
  color: #6b7280;
}

.message-bubble {
  background: var(--cor-escura);
  color: var(--cor-secundaria);
  padding: 20px;
  border-radius: 12px 12px 12px 0;
  /* Efeito de "balão" */
}

.message-bubble p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #cdd6f4;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
  .depoimentos-header h2 {
    font-size: 2.2rem;
  }

  .depoimentos-header p {
    font-size: 1rem;
  }

  .depoimento-card-social {
    width: 320px;
  }

  /* Cards um pouco menores */
}


/* ===== Instruções ===== */
.depoimentos-instrucao {
  text-align: center;
  font-size: 1.1rem;
  margin-top: 30px;
  color: #555;
  font-weight: 500;
}

/* Desktop → mostra apenas a frase do mouse */
.instrucao-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Mobile → esconde desktop e mostra toque */
  .instrucao-desktop {
    display: none;
  }
  .instrucao-mobile {
    display: block;
  }
}

/* ======= CARDS DEPOIMENTOS – IMAGENS WHATSAPP ======= */

.scroller__inner {
  display: flex;
  gap: 60px; /* ← AUMENTE AQUI (20px, 30px, 40px...) */
}

.tag-list li {
  padding: 0;
}

.whatsapp-print {
  width: 250px;                  /* Largura do card */
  aspect-ratio: 1080 / 1920;     /* Mantém a proporção exata */
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
  border: 2px solid #e6e6e6;
}

/* Mobile */
@media (max-width: 768px) {
  .whatsapp-print {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .scroller__inner {
    gap: 30px; /* Mobile */
  }
}

.scroller__inner {
    animation: scroll 60s linear infinite;
}



/*-------------------------------------------------- footer -------------------------------------------------*/

footer {
  background-color: var(--cor-primaria);
  color: #d3dbe5;
  padding: 60px 5% 20px 5%;
  /* Usa porcentagem para ser mais adaptável */
}

.footer-container {
  display: flex;
  justify-content: space-between;
  /* Empurra branding e links para as extremidades */
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  /* Espaço antes da linha inferior */
}

/* Coluna da Esquerda: Branding */
.footer-branding {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
}

.footer-logo {
  height: 50px;
  /* Ajuste a altura do seu logo */
  margin-bottom: 15px;
}

.footer-branding p {
  font-size: 1rem;
  line-height: 1.6;
  color: #aeb9c7;
}

/* Wrapper das Colunas da Direita: Links */
.footer-links-wrapper {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  flex: 2;
  justify-content: flex-end;
  /* Alinha as colunas de links à direita */
}

.footer-column {
  min-width: 150px;
}

.footer-column h3 {
  color: #fff;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 600;
}

.footer-column a {
  color: #aeb9c7;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  /* Para alinhar ícone e texto */
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: #fff;
}

/* Ícones Sociais (Animação Sutil) */
.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.social-icons a {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  background-color: var(--cor-destaque);
  transform: scale(1.1);
}

/* Rodapé Inferior */
.footer-bottom {
  border-top: 1px solid #2f4d6f;
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.9rem;
  color: #aeb9c7;
}

.footer-legal-links a {
  color: #aeb9c7;
  margin-left: 20px;
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: #fff;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links-wrapper {
    justify-content: center;
    /* Centraliza as colunas de links */
    width: 100%;
    margin-top: 30px;
  }

  .footer-column {
    align-items: center;
    text-align: center;
  }

  .footer-column a {
    justify-content: center;
    /* Centraliza ícone e texto dos links de contato */
  }

  .social-icons {
    justify-content: center;
    /* Centraliza os ícones sociais */
  }

  .footer-bottom {
    flex-direction: column;
    /* Empilha copyright e links legais */
    justify-content: center;
  }
}