/* ==========================================================================
   ÍNDICE - LANDING PAGE 01
   ==========================================================================
   1. CONFIGURAÇÕES GERAIS E VARIÁVEIS
      1.1. Alterações nas Variáveis
      1.2. Estilos de Texto Geral

   2. HEADER E NAVEGAÇÃO
      2.1. Estrutura e Transições de Altura
      2.2. Logótipo
      2.3. Transições de Botões (Estado Normal/Inicial)
      2.4. Ajustes Sticky & Scroll (Botões "Contacte-nos" e Pesquisa)
      2.5. Correções de Layout (Breakdance)

   3. SECÇÃO DE ÂNCORAS
      3.1. Ajustes de Espaçamento (Padding)
      3.2. Animação de Sublinhado nos Links

   4. SECÇÃO DE TESTEMUNHOS
      4.1. Container dos Textos (Grid Overlay)
      4.2. Galeria de Imagens (Estados Base, Overlay e Ativo)
      4.3. Animação e Visibilidade dos Textos

   5. SECÇÃO DE ACORDEÕES / FAQS
      5.1. Alinhamento e Espaçamentos
   ========================================================================== */


/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E VARIÁVEIS
   ========================================================================== */

/* 1.1. Alterações nas Variáveis */
.l01 {
  --background-palette-primary: #914B43;
  --status-hover: #73332C;
  --status-selected: #5C2923;
}

/* 1.2. Estilos de Texto Geral */
.l01 h1, .l01 h2, .l01 h3, .l01 h4 {
	font-family: "Libre Baskerville" !important;
	font-weight: 400;
}
.l01 h3, .l01 h4 {
	line-height: 160% !important;
}



/* ==========================================================================
   2. HEADER E NAVEGAÇÃO
   ========================================================================== */

/* 2.1. Estrutura e Transições de Altura */
header.l01-header,
div.l01-header {
  height: 108px !important;
  transition: height 0.3s ease;
}

/* Transição de altura APENAS quando o l01-header tem a classe de scroll */
header.l01-header.l01-scrolled,
div.l01-header.l01-scrolled {
  height: 80px !important;
}

/* 2.2. Logótipo */
/* Redimensionar a imagem do logo apenas dentro deste header */
.l01-header .header-logo img {
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

/* 2.3. Transições de Botões (Estado Normal/Inicial) */
/* ESTADO INICIAL (Normal - Sem scroll)
   Transição suave para os botões mudarem de tamanho */
.l01-header-button .button-atom,
.bde-search-form .search-form__button {
  transition: all 0.3s ease-in-out !important;
}

/* ESTADO NORMAL (Antes do Scroll)
   Adiciona uma transição suave para não "saltar" ao fazer scroll */
.l01-header-button .button-atom,
.bde-search-form .search-form__button {
  transition: all 0.3s ease !important;
}

/* ESTADO INICIAL (Normal - Sem scroll)
   Transição suave para os botões mudarem de tamanho */
.l01-header-button .button-atom,
.bde-search-form .search-form__button {
  transition: all 0.3s ease-in-out !important;
}

/* 2.4. Ajustes Sticky & Scroll (Botões "Contacte-nos" e Pesquisa) */
/* 2.4.1. Botão "Contacte-nos" */
.bde-header-builder--sticky-styles .l01-header-button .button-atom,
.header-fixo.is-sticky .l01-header-button .button-atom,
.l01-header.l01-scrolled .l01-header-button .button-atom {
  padding: 12px 14px !important;    /* Reduz a altura/espaçamento interno */
  min-height: unset !important;    /* Remove alturas mínimas impostas pelo builder */
  height: 48px !important;
}

/* 2.4.2. Botão de Pesquisa (Ícone da Lupa) */
.bde-header-builder--sticky-styles .bde-search-form .search-form__button,
.header-fixo.is-sticky .bde-search-form .search-form__button,
.l01-header.l01-scrolled .bde-search-form .search-form__button {
  padding: 8px !important;          /* Reduz o tamanho da área do botão da lupa */
  width: 48px !important;           /* Define largura menor */
  height: 48px !important;          /* Define altura menor */
  min-height: unset !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 2.5. Correções de Layout (Breakdance) */
.breakdance .bde-search-form-212-105 {
    display: flex !important;
    align-items: center !important;
}



/* ==========================================================================
   3. SECÇÃO DE ÂNCORAS
   ========================================================================== */

/* 3.1. Ajustes de Espaçamento (Padding) */
/* Transição suave para o padding */
.l01-ancoras .u-py-24 {
  transition: padding 0.3s ease-in-out;
}

/* Quando a secção fica sticky, altera o padding superior e inferior para 16px */
.l01-ancoras.is-stuck .u-py-24 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 3.2. Animação de Linha nos Titulos */
/* Garante o posicionamento para a linha */
.l01-ancoras .bde-button a.breakdance-link {
  position: relative;
  transition: color 0.3s ease;
}

/* Cria a linha de sublinhado */
.l01-ancoras .bde-button a.breakdance-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor; /* Usa a cor do texto do botão */
  transition: width 0.3s ease-in-out;
}

/* Estado Ativo: expande o sublinhado para 100% */
.l01-ancoras .bde-button a.breakdance-link.active::after {
  width: 100%;
}

/* Esconder secção apenas em mobile (767px para baixo) */
@media (max-width: 767px) {
  .l01-ancoras {
    display: none;
  }
}

/* ==========================================================================
   4. SECÇÃO DE TESTEMUNHOS
   ========================================================================== */

/* 4.1. Container dos Textos (Grid Overlay) */
/* 4.1.1. CONTAINER DIREITO DOS TEXTOS (GRID OVERLAY) --- */
/* O seletor flexível do Breakdance para o container de texto */
#testemunhos > div:last-child {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: center; /* Centra os textos verticalmente */
  min-height: 100%;     /* Ocupa a altura total da secção */
}

/* 4.2. Galeria de Imagens (Estados Base, Overlay e Ativo) */
/* ESTILOS BASE DAS IMAGENS --- */
.l01-testemunho-img01,
.l01-testemunho-img02,
.l01-testemunho-img03 {
  position: relative;
  cursor: pointer;
  outline: 2px solid transparent;
  transition: outline 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

/* PSEUDO-ELEMENTO PARA A IMAGEM DE FUNDO (Permite a transição fluida) */
.l01-testemunho-img01::before,
.l01-testemunho-img02::before,
.l01-testemunho-img03::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Herda a imagem de fundo definida no container */
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease-in-out;
  z-index: -1;
  transform: scale(1); /* Ponto de partida inicial */
}

/* Overlay preta com 50% de opacidade */
.l01-testemunho-img01::after,
.l01-testemunho-img02::after,
.l01-testemunho-img03::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* Oculta os conteúdos internos (SVG) quando inativos */
.l01-testemunho-img01 *,
.l01-testemunho-img02 *,
.l01-testemunho-img03 * {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: relative;
  z-index: 2;
}

/* ESTADO ATIVO DA IMAGEM SELECIONADA */
.l01-testemunho-img01.active,
.l01-testemunho-img02.active,
.l01-testemunho-img03.active {
  outline: 2px solid var(--status-selected);
}

/* AMPLIAÇÃO APLICADA À IMAGEM DE FUNDO DO PSEUDO-ELEMENTO */
.l01-testemunho-img01.active::before,
.l01-testemunho-img02.active::before,
.l01-testemunho-img03.active::before {
  transform: scale(1.2); /* 1.25 equivale a 125% de zoom (Ajuste conforme necessário) */
}

/* VISIBILIDADE DO OVERLAY E CONTEÚDOS NO ESTADO ATIVO */
.l01-testemunho-img01.active::after,
.l01-testemunho-img02.active::after,
.l01-testemunho-img03.active::after,
.l01-testemunho-img01.active *,
.l01-testemunho-img02.active *,
.l01-testemunho-img03.active * {
  opacity: 1;
}

/* 4.3. Animação e Visibilidade dos Textos */
/* ESTILOS DOS TEXTOS */
#testemunhos #testemunho01,
#testemunhos #testemunho02,
#testemunhos #testemunho03 {
  grid-area: 1 / 1; /* Faz todos os textos ocuparem a mesma célula da Grid */
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* Texto Ativo */
#testemunhos #testemunho01.active,
#testemunhos #testemunho02.active,
#testemunhos #testemunho03.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ==========================================================================
   5. SECÇÃO DE ACORDEÕES / FAQS
   ========================================================================== */

/* 5.1. Alinhamento e Espaçamentos */
#faqs .bde-accordion__button {
    max-width: 800px;
    margin: auto !important;
}
#faqs .bde-accordion__panel {
	margin-top: -24px;
}