:root {
  /* Cores principais baseadas no logo */
  --primary: #928071;    /* Tom terroso do logo (cor primária) */
  --primary-light: #b4a99e; /* Versão mais clara da primária */
  --primary-light2: #c4b8ad; /* Versão mais clara da primária */
  --primary-soft: #e8e2dc; /* Versão quase branca da primária */
  
  /* Cores de destaque e contrastes */
  --secondary: #0A0203;   /* Preto profundo do logo (quase preto) */
  --secondary-light: #3a3a3a; /* Para textos escuros */
  --secondary-soft: #5c5c5c; /* Para textos secundários */
  
  /* Neutros elegantes */
  --bg-light: #f8f6f4;    /* Fundo claro com leve tom terroso */
  --bg-soft: #f0ece8;     /* Fundo secundário */
  --bg-accent: rgba(224, 203, 184, 1);   /* Para destaques sutis */
  
  /* Textos */
  --text-dark: #0A0203;   /* Usando o preto do logo */
  --text-medium: #4a4a4a; /* Cinza escuro */
  --text-light: #ffffff;  /* Branco puro */
  
  /* Sombras refinadas */
  --shadow-light: 0 2px 12px rgba(10, 2, 3, 0.05);
  --shadow-medium: 0 4px 16px rgba(10, 2, 3, 0.1);
  --shadow-dark: 0 6px 24px rgba(10, 2, 3, 0.15);
  
  /* Cores de estado */
  --hover-primary: #6c5d52; /* Primária escurecida para hovers */
  --active-primary: #6b5d52; /* Primária mais escura ainda */
}

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

body {
  font-family: 'Space Grotesk', sans-serif; /* Geometria limpa */
  /* color: var(--secondary-dark); */
  background: #fff;
  line-height: 1.6;
}

h1, h2, h3 {
  /* font-family: 'Spectral', serif;  */
  font-weight: 600; /* Peso médio para frescor */
  color: var(--primary);
}

p {
  line-height: 1.6;
  color: var(--secondary-light);
}

h2 {font-size: 2rem;}

h2:not(.text-center) {
  position: relative;
  padding-bottom: 0.5rem; 
  display: inline-block; /* Contém o pseudo-elemento */
}

h2:not(.text-center)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* Largura do texto */
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent 70%);
}

h2.text-center {
  position: relative;
  text-align: center;
  padding-bottom: 0.5rem; 
}

h2.text-center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--primary) 50%,
    transparent 100%
  );
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap; /* Adiciona suporte para espaçamento em branco */
}

/* Utilitários genéricos (recomendo deixar aqui) */
.text-center { text-align: center; }
.bg-soft { background-color: var(--bg-soft); }
/* etc... */

[data-menu='logo'],
[data-menu='button'],
#menu > li > a,
#menu > li > span,
#menu > li > button,
.header_acoes a,
.intro-text *,
.page-open-animate {
  visibility: hidden;
}

/* ======================
   HEADER
   ====================== */
   .header {
    width: 100%;
    z-index: 1000;
    background-color: #fff; 
    position: fixed;
    top: 0;
    padding: .5rem 0rem;
    transition: all 0.4s ease;
    /* border-bottom: 1px solid rgba(28, 44, 58, 0.05);  */
  }

  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem; /* Espaço entre os grupos */
  }
  
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  /* Logo */
  .logo-svg {
    display: block;
    width: 180px; /* Tamanho ajustável */
    height: auto;
    transition: all 0.3s ease;
  }
  
  /* Menu */
  .header_menu {
    display: flex;
    align-items: center;
    gap: 3rem;
  }

  .header_menu {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Ocupa espaço disponível */
  }
  
  .menu {
    display: flex;
    align-items: center;
  }

  /* Logo alinhado à esquerda */
  [data-menu="logo"] {
  margin-right: auto; /* Empurra tudo para a direita */
  }

  /* Menu e ações alinhados à direita */
  .menu-container {
    display: flex;
    align-items: center;
    gap: 3rem; /* Espaço entre menu e botão */
  }

  /* Ajuste para o menu mobile */
  [data-menu="button"] {
    margin-left: auto; /* Mantém o botão hamburger à direita */
  }
    
    ul[data-menu="list"] {
      display: flex;
      list-style: none;
      gap: 1.8rem;
      align-items: center;
      text-align: center;
    }
    
    .menu li a,
    .menu li span {
      font: 500 1rem/1.2 'Space Grotesk', sans-serif;; 
      color: var(--primary); 
      /* text-shadow: 1px 1px 2px rgba(245, 240, 232, 0.3);  */
      text-decoration: none;
      padding: 0.5rem 0;
      position: relative;
      transition: color 0.3s ease;
    }
    
    /* Sublinhado animado */
    .menu li a::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary); /* Laranja */
      transition: width 0.3s ease;
    }
    
    .menu li a:hover {
      color: var(--primary); /* Laranja no hover */
    }
    
    .menu li a:hover::after {
      width: 100%;
    }

    .btn-submenu {
      font: 500 1rem/1.2 'Space Grotesk', sans-serif;; 
      padding: 0.5rem 0;
      font-size: 1rem;
      display: inline-flex; /* ou flex */
      align-items: center;
      justify-content: center;
      gap: 0.5rem; /* Espaço entre texto e ícone */
      /* padding-right: 1rem;  */
      position: relative; /* Mantém para posicionamento absoluto se necessário */      color: var(--primary);
      background: none;
      border: none;
      width: 100%;
      cursor: pointer;
      font-family: inherit; /* para garantir que use a mesma fonte */
  }

  .btn-submenu::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078"; /* Código Unicode do ícone fa-chevron-down */
    font-size: 0.8em;
    transition: transform 0.3s ease;
  }
  
  .btn-submenu:hover::after {
    transform: rotate(180deg);
  }

    /* Submenu - Desktop */
  .has-submenu {
    position: relative;
  }

  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    min-width: 220px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border-radius: 4px;
    z-index: 1000;
  }

  .submenu li a {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.95rem;
  }

  .submenu li a:hover {
    background-color: var(--bg-light);
  }

  .has-submenu:hover .submenu {
    display: block;
  }

    
    /* Efeito no scroll */
    .header.header-scrolled {
      /* backdrop-filter: blur(8px); */
      /* -webkit-backdrop-filter: blur(8px); */
      background-color: var(--bg-light); /* Fundo mais claro */
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }
    
    .header-scrolled .logo-svg {
      width: 160px; /* Logo reduz levemente */
    }

    @media (max-width: 768px) {
      
      .header .container {
        display: block;
      }
      
    }

    
    
    /* Responsivo */
    @media (max-width: 992px) {
      .header_menu {
        gap: 1.5rem;
      }
      
      ul[data-menu="list"] {
        gap: 1rem;
      }
      
      .btn-agendar {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
      }
    }
/* ======================
   FOOTER STYLES
   ====================== */

.site-footer {
  background: linear-gradient(
    to bottom, 
    white 0%, 
    white 30%,  /* Reduz a área branca */
    var(--bg-accent) 30%,  /* Início mais cedo da cor secundária */
    var(--bg-accent) 100%
  );
  color: var(--primary-light);
  padding-bottom: 5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.5rem;
  margin-bottom: 4rem;
}

.footer-grid.agendamento {
  background-color: var(--primary-light);
  padding: 4rem;
}

.footer-logo {
  max-width: 220px; /* Um pouco menor para elegância */
  margin-bottom: 1.5rem;
  filter: brightness(0) invert(90%); /* Logo em tom bege claro */
}

.footer-credenciais {
  color: var(--primary-light); 
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
}

.footer-title {
  color: #6c5d52; /* Versão 20% mais escura */
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.lista-agendamento .footer-title {
  color: white;
  font-size: 1.6rem;
}

.lista-agendamento .footer-title::after {
  background: linear-gradient(90deg, white, transparent 70%);
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* Largura do texto */
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent 70%);
}

.footer-col.logo-col h3 {
  color:var(--primary);
}

.site-footer address,
.site-footer p {
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  color: var(--secondary); 
}
.site-footer address {
  font-style: normal;
  line-height: 1.6;
}

.site-footer a,
.site-footer a * {
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* .site-footer a:hover,
.site-footer a:hover * {
  color: var(--primary); 
} */

.site-footer i {
  /* Círculo perfeito */
  display: inline-flex;        /* Mudamos para flex */
  align-items: center;        /* Centraliza verticalmente */
  justify-content: center;    /* Centraliza horizontalmente */
  
  /* Tamanho e forma */
  width: 28px;                /* Aumente para melhor visual */
  height: 28px;               /* Igual à width para círculo perfeito */
  border-radius: 50%;         /* Garante o formato circular */
  
  /* Cores e espaçamento */
  background-color: white;    /* Cor de fundo */
  color: var(--primary);      /* Cor do ícone */
  margin-right: 0.8rem;       /* Espaçamento aumentado */
  
  /* Efeitos visuais */
  transition: all 0.3s ease;  /* Suaviza as transições */
  font-size: 14px;            /* Tamanho do ícone */
}

.site-footer i:hover {
  color: white;
  background-color: var(--primary); /* Inverte cores no hover */
  transform: scale(1.1);      /* Efeito de zoom sutil */
}

.site-footer a:hover {
  color: var(--secondary-light);
}

/* Botão do Rodapé */
.btn-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary); 
  color: var(--text-light);
  padding: 0.7rem 1.8rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 1rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-footer:hover {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-light);
}

/* Redes Sociais */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-icons a {
  color: var(--primary);
  background-color: rgba(176, 144, 103, 0.1); /* Dourado muito suave */
  text-decoration: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(176, 144, 103, 0.3);
}

.social-icons a:hover {
  background-color: var(--primary);
  color: var(--text-light);
  transform: translateY(-3px);
}

.social-icons a i {
  margin-right: 0;
}

/* Rodapé Inferior */
.footer-bottom {
  border-top: 1px solid rgba(176, 144, 103, 0.2); /* Linha dourada sutil */
  padding-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--primary-light);
}

.footer-bottom p {
  margin-bottom: 0.5rem;
}

.footer-bottom i.fa-heart {
  color: var(--primary); 
  margin-right: 0.4rem;
}

.footer-bottom i.fa-heart:hover {
  color:#fff; 
  margin-right: 0.2rem;
}

/* ======================
   FORMULÁRIO DE AGENDAMENTO
   ====================== */


   .agendamento-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4rem;
   }

   .lista-agendamento {
    display: flex;
    flex-direction: column;
    gap: 1rem;
   }

   .lista-agendamento a {
    color: white;
   }

   .form-agendamento {
    color: var(--primary-light);
    /* padding: 2rem; */
    /* margin-bottom: 3rem; */
    /* border-radius: 1rem; */
    /* box-shadow: var(--shadow-medium); */
    /* max-width: 600px; */
    /* margin-inline: auto; */
  }

  .form-contato {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  
/* Garante que os campos de telefone e e-mail ocupem metade da linha */
.form-row {
  display: flex;
  gap: 1rem; /* Espaçamento entre os campos */
  width: 100%;
}

.form-row .form-group {
  flex: 1; /* Ocupa espaço igual */
  min-width: 0; /* Evita quebra de layout */
}
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(176, 144, 103, 0.3);
    background-color: var(--bg-soft);
    color: #333;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }
  
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: var(--primary);
    font-family: 'Space Grotesk', sans-serif; /* Geometria limpa */
    font-size: 0.95rem;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--primary);
    outline: none;
  }
  
  

/* Responsivo */
@media (max-width: 768px) {

  .lista-agendamento .footer-title::after {
    background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
  }


  .lista-agendamento {
    align-items: center;
  }

  .form-agendamento {
    padding: 0;
  }

  .footer-grid.agendamento {
    padding: 1.5rem;
  }

    .form-row {
      flex-direction: column;
      gap: 1.2rem; /* Espaçamento maior entre campos empilhados */
    }
    
    .form-row .form-group {
      width: 100%;
      flex: none; /* Remove o flex igualitário */
    }
  
  
  /* Estilos base para os campos */
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(176, 144, 103, 0.3);
    background-color: var(--bg-soft);
    color: #333;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    width: 100%; /* Garante largura total */
    box-sizing: border-box; /* Inclui padding na largura */
  }
  
  /* Placeholders */
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: var(--primary);
    font-family: 'Space Grotesk', sans-serif; /* Geometria limpa */
    font-size: 0.95rem;
    opacity: 0.7; /* Mais suave visualmente */
  }
  
  /* Estados de foco */
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Efeito de foco sutil */
  }

  .footer-grid {
    grid-template-columns: 1fr; /* Muda para 1 coluna */
    gap: 1.5rem; /* Reduz o espaçamento */
    margin-bottom: 5rem; /* Ajusta margem */
  }
  
  .footer-col {
    text-align: center;
  }
  
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent 0%, var(--primary-light) 50%, transparent 100%)

  }
  
  .social-icons {
    justify-content: center;
  }
  
  .btn-footer {
    min-width: none !important;
    width: 100%;
    justify-content: center;
  }

  .footer-col p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }
}
/* Elementos ocultos por padrão */
[data-menu="button"] {
  display: none;
}

[data-menu="contato-mobile"],
[data-menu="whatsapp"],
[data-menu="linkedin"],
[data-menu="instagram"] {
  display: none;
}

/* Estilo padrão para header_acoes (desktop) */
.header_acoes {
  display: flex;
}

[data-menu="logo"] {
  display: inline-block; /* ou block/flex se preferir */
}

[data-menu="logo"] img {
  display: block;         /* remove o espaço "fantasma" */
  max-width: 100%;
  height: auto;
}


@media (max-width: 768px) {
  /* Ajustes gerais */

  .header {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    padding: 6px 0px;
  }

/* header scroll */
.header.header-scrolled  {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.7); /* branco com transparência */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
} 

  [data-menu="logo"] {
    width: 100%;
    z-index: 999;
  }

  .header a > img {
    width: 100%;
  }

  .header_menu {
    justify-content: space-between;
  }

  .social-icons-header {
    display: none;
  }

  /* Botão hamburguer */
  .js [data-menu="button"] {
    display: flex;
    background: var(--primary);
    border: none;
    padding: 0.6rem; 
    border-radius: 50%; 
    font-family: 'OpenSans', sans-serif;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    margin: 4px 0;
    align-items: center;
    justify-content: center; 
    position: relative;
    z-index: 300;
    width: 3rem; 
    height: 3rem; 
  }

  #hamburguer {
    width: 30px;
    height: 2px;
    background: white;
    border-radius: 1px;
    position: relative;
    transition: background 0.3s ease; 
  }

  #hamburguer::before,
  #hamburguer::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: white;
    border-radius: 1px;
    position: absolute;
    left: 0;
    transition: transform 0.3s ease;
  }

  #hamburguer::before {
    top: -8px;
  }

  #hamburguer::after {
    top: 8px;
  }

  /* Estilos quando o menu está ativo */
  .js [data-menu="button"].active #hamburguer {
    background: transparent;
  }

  .js [data-menu="button"].active #hamburguer::before {
    transform: rotate(45deg);
    top: 0;
  }

  .js [data-menu="button"].active #hamburguer::after {
    transform: rotate(-45deg);
    top: 0;
  }

  /* Menu mobile ajustado */
  .js [data-menu="list"] {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 200;
    background-color: var(--bg-soft);
    padding: calc(var(--header-height) + 4rem) 0;
    overflow-y: auto;
    box-sizing: border-box;
    
    /* Estado inicial */
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: none; /* Remove qualquer transição CSS */
  }

  .js [data-menu="list"].active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
        /* Estado ativo */
        opacity: 1;
        pointer-events: auto;
  }

  .js [data-menu="list"] li {
    /* width: 100%; */
    max-width: 300px;
  }

    /* Remova qualquer animação CSS dos itens do menu */
    .js [data-menu="list"] li,
    .js [data-menu="list"] a {
      transition: none !important;
    }

  /* .js [data-menu="list"] a{
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary);
    padding: 0.8rem 1rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
  } */

  .js [data-menu="list"] {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity;
  }

  /* Previne rolagem horizontal */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  .header_acoes {
    display: none; /* Oculta inicialmente no mobile */
    position: fixed;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    width: 90%;
    max-width: 300px;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    z-index: 201;
    padding: 0;
    opacity: 0; /* Inicia transparente */
    /* Remova qualquer transition do CSS */
    transition: none !important;
  }

  .header_acoes.active {
    display: flex; /* Apenas controla a visibilidade */
    /* A animação será feita pelo GSAP */
    opacity: 1;
  }

  [data-menu="contato-mobile"].active  {
    position: fixed;
    color: var(--primary);
    display: block;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 1rem;
    opacity: 0;
  }

  [data-menu="linkedin"].active {
    position: fixed;
    font: 500 1rem 'OpenSans', sans-serif;
    color: var(--roxo);
    display: block;
    bottom: 0;
    right: 0;
    z-index: 999;
    padding: 1rem;
    opacity: 0;
  }

  [data-menu="whatsapp"].active {
    position: fixed;
    font: 500 1rem 'OpenSans', sans-serif;
    color: var(--roxo);
    display: block;
    bottom: 0;
    right: 60px;
    z-index: 999;
    padding: 1rem;
    opacity: 0;
  }

  [data-menu="instagram"].active {
    position: fixed;
    font: 500 1rem 'OpenSans', sans-serif;
    color: var(--primary);
    display: block;
    bottom: 0;
    right: 10px;
    z-index: 999;
    padding: 1rem;
    opacity: 0;
  }

  .submenu {
    display: none;
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  .submenu li a {
    padding: 0.5rem 0;
    font-size: 1rem;
    display: block;
    color: var(--secondary-soft);
  }
  
  .has-submenu.open > .submenu {
    display: block;
  }
  
}
/* ===== BOTÕES PRINCIPAIS ===== */
.btn-agendar, 
.btn-saiba-mais,
.btn-ver-todas,
.btn-primary,
.btn-outline, .btn-footer, .btn-midia, .btn-voltar  {
  display: inline-flex; /* Melhor alinhamento */
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.4rem; /* Mais horizontal padding */
  border-radius: 50px; /* Bordas mais arredondadas */
  font-weight: 600;
  font-size: 0.95rem; /* Tamanho levemente reduzido */
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  width: fit-content; /* Ajuste automático ao conteúdo */
  min-width: 180px; /* Largura mínima para uniformidade */
  text-align: center;
  letter-spacing: 0.5px; /* Mais elegante */
}

/* Botão Primário (Agendar) */
.btn-agendar, .btn-primary, .btn-midia, .btn-agendar, .btn-voltar {
  background-color: #cebd85;
  color: var(--text-light);
  border: 2px solid #cebd85; /* Borda sutil */
  position: relative;
  overflow: hidden; /* Para efeito hover */
}

.btn-agendar:hover, .btn-primary:hover, .btn-midia:hover, .btn-voltar:hover {
  background-color: var(--hover-primary); /* Marrom claro no hover */
  border-color: var(--hover-primary);
  transform: translateY(-2px) scale(1.02); /* Efeito de levitação suave */
  box-shadow: 0 4px 12px rgba(176, 144, 103, 0.2);
}

/* Botão Secundário (Outline) */
.btn-saiba-mais, 
.btn-ver-todas,
.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  transition: all 0.4s ease; /* Transição mais suave */
}

.btn-saiba-mais:hover,
.btn-ver-todas:hover,
.btn-outline:hover {
  background-color: var(--primary);
  color: var(--text-light);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(176, 144, 103, 0.1);
}

.btn-white {
  background-color: var(--bg-light);
  color: var(--primary);
  border: 2px solid var(--bg-light); /* Borda sutil */
  transition: all 0.4s ease; /* Transição mais suave */
}

.btn-saiba-mais:hover,
.btn-ver-todas:hover,
.btn-outline:hover {
  background-color: var(--primary);
  color: var(--text-light);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(176, 144, 103, 0.1);
}

/* Efeito de "preenchimento" no hover (opcional) */
.btn-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--primary);
  transition: all 0.4s ease;
  z-index: -1;
}

.btn-outline:hover::before {
  left: 0;
}

/* ===== BOTÕES DO FOOTER ===== */
.btn-footer {
  background-color: var(--primary); /* Nude claro */
  color: var(--text-light);
  border: 2px solid var(--primary);
}

.btn-footer:hover {
  background-color: var(--primary);
  color: var(--text-light);
}

/* Cards */
.card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
}

/* Seções padrão */
.section {
  padding: 4rem 0;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--secondary);
}

.form-success,
.form-error {
  display: none;
  margin-top: 15px;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 10px;
  border-radius: 6px;
}

.form-success {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

.form-error {
  color: #721c24;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}


@media (max-width: 768px) {

.btn-agendar {font-size: 1.2rem;}

}