canvas#murmurationCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #efe1cd;
}

header {
  position: sticky;
  top: 0;
  z-index: 1030; /* garantir que fica acima do conteúdo */
  background-color: transparent; /* importante para não ficar transparente */
}

/* --- TIPOGRAFIA --- */

.headline {
  margin-top: 300px;
  font-size: 100px;
  font-weight: bold;
  line-height: 1.2;
  margin-left: 40px;
}

body {
  font-family: "indivisible", sans-serif;
  background-color: #efe1cd;
  color: #54392d;
  margin: 0;
  padding: 0; 
}

h1 {
  font-family: "indivisible", sans-serif;
  font-size: 50px;
  font-weight: bold;
}

h2 {
  font-family: "indivisible", sans-serif;
  font-size: 30px;
  font-weight: bold;
}

h3 {
  font-family: "indivisible", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #ef6c1f;

}

p, a, nav, li {
  font-family: "indivisible", sans-serif;
  color:#54392d;
}

a {
  font-family: "indivisible", sans-serif;
  color:#54392d;
}


.rotate-on-hover {
    display: inline-block; /* necessário para a rotação funcionar bem */
    transition: transform 0.3s ease;
}

.rotate-on-hover:hover {
    transform: rotate(-10deg);
}

/* Para o texto dentro da seção about-1 que tem a classe "texto-maior" */
#about-1 .texto-maior {
    font-size: 4rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: bold;
    line-height: 1.2;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

/* Para o texto dentro da seção about-1 que tem a classe "paragrafo" */
#about-1 .paragrafo {
    font-size: 3rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: bold;
    line-height: 1.2;
    color:#ef6c1f;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

/* Para o texto dentro da seção about-1 que tem a classe "paragrafo-2" */
#about-1 .paragrafo-2 {
    font-size: 1.7rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: bold;
    line-height: 1.2;
    color:#54392d;
    margin-top: 10rem;
    margin-bottom: 0;
}

/* Para o texto dentro da seção about-2 que tem a classe "texto-maior" */
#about-2 .texto-maior {
    font-size: 4rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: bold;
    line-height: 1.2;
    color:#efe1cd;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

/* Para o texto dentro da seção about-2 que tem a classe "legenda" */
#about-2 .legenda {
    font-size: 1.5rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: 500;
    line-height: 1.2;
    color:#efe1cd;
    margin-top: 20rem;
    margin-bottom: 3rem;
}

/* Para o texto dentro da seção about-2 que tem a classe "legenda-2" */
#about-2 .legenda-2 {
    font-size: 1rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: 500;
    line-height: 1.2;
    color:#efe1cd;
}

/* Para o texto dentro da seção about-1 que tem a classe "texto-maior" */
#about-3 .texto-maior {
    font-size: 4rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: bold;
    line-height: 1.2;
    margin-top: 6rem;
    margin-bottom: 3rem;
}


/* --- MENU DESKTOP --- */
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding-right: 0;
}

.navbar-nav .nav-link {
  text-decoration: none;
  color: #54392d;
  font-weight: bold;
  font-size: 14px;
}

.navbar-nav .nav-link:hover {
  text-decoration: none;
  color: #54392d;
  font-weight: bold;
  font-size: 14px;
  text-decoration: underline;
}

 a:hover {
    text-decoration: underline;
  }

/* --- MENU HAMBURGUER --- */

/* Botão sem borda e fundo */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    background-color: transparent;
    display: flex;
    align-items: center;
}

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

/* Traço do meio */
.navbar-toggler-icon {
    position: relative;
    width: 30px;
    height: 3px;
    background-color: #4b2e25;
    transition: all 0.3s ease-in-out;
}

/* Traço de cima e de baixo */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #4b2e25;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

.imagem-topo {
    max-width: 100%;
    height: auto;
    display: block;
}

.mt-6 {
    margin-top: 5rem;
}

.mt-7 {
    margin-top: 7rem;
}

.mt-8 {
    margin-top: 10rem;
}

.hover-italic {
    transition: font-style 0.3s ease;
}

.hover-italic:hover {
    font-style: italic;
}

/* --- CONTACT PAGE --- */

.email-link {
    /* Define a cor padrão do link */
    color: inherit; /* Ou a cor que o teu tema já usa */
    text-decoration: none; /* Remove o sublinhado, se quiseres */
    transition: color 0.3s ease; /* Adiciona uma transição suave à cor */
}

.email-link:hover {
    /* Cor que aparece no hover */
    color: #ef6c1f;
}

/* --- WORK PAGE --- */

body.work-page {
    background-color: #ef6c1f;
}

/* Mudar a cor do logo na página de trabalho */
body.work-page .logo path {
    fill: #efe1cd !important;
}

/* --- Estilos da Navbar para a página 'work' --- */

/* Estilos para os links da navbar na página 'work' */
body.work-page .navbar-nav .nav-link {
    color: #efe1cd;
}

/* Hover e foco dos links */
body.work-page .navbar-nav .nav-link:hover,
body.work-page .navbar-nav .nav-link:focus {
    text-decoration: underline;
}

/* Estilos para o botão do hambúrguer (remove bordas e sombras) */
body.work-page .navbar-toggler {
    border: none;
    box-shadow: none;
}

/* Estilos para as linhas do hambúrguer */
body.work-page .navbar-toggler-icon {
    /* Remove a imagem de fundo do Bootstrap */
    background-image: none !important;
    /* Aplica a cor de fundo desejada para a linha do meio */
    background-color: #efe1cd !important;
    
    position: relative;
    width: 30px;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

body.work-page .navbar-toggler-icon::before,
body.work-page .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #efe1cd;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Estilos para o foco no botão do hambúrguer */
body.work-page .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Define o fundo da navbar como transparente */
body.work-page .navbar {
    background-color: transparent !important;
}

/* --- Estilos da Galeria de Projetos --- */

/* Estilos para o container da imagem */
.project-image-wrapper {
    display: block; 
}

/* Estilos para a legenda */
.project-caption {
    font-family: Indivisible, sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #efe1cd;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Esta regra define a cor do texto no estado de hover */
.project-link:hover .project-caption {
    color: #54392d;
}

/* Remove o sublinhado dos links das legendas em todos os estados */
.project-link,
.project-link:hover,
.project-link:focus {
    text-decoration: none;
}


/* --- Estilos do Footer --- */

/* Estilos para o footer da página de trabalho */
body.work-page .footer {
    color: #efe1cd;
}

/* Estilos para os ícones sociais */
body.work-page .footer .social-icons a {
    color: #efe1cd;
}

/* Estilos para o hover dos ícones sociais */
body.work-page .footer .social-icons a:hover {
    color: #54392d;
}

body.work-page .footer-text {
    color: #efe1cd; 
}


/* --- PROJECT PAGE --- */

body.project-page {
    background-color: #efe1cd;
}

/* Reduz a margem superior no container da página do projeto */
.container-project.my-5 {
    margin-top: 2rem !important; /* Ajusta este valor conforme a tua preferência */
    margin-bottom: 3rem !important; /* Mantém a margem inferior original se necessário */
}

.project-title {
  margin-bottom: 0;
}

.project-image {
  max-width: 100%;
  height: auto;
}

.text-end img {
  display: inline-block;
}

/* --- LEDHER BLUE PAGE --- */

/* Mudar a cor do logo na página de trabalho */
body.ledher-page .logo path {
    fill: #efe1cd !important;
}

body.ledher-page {
    background-color:#252921;
}

/* Estilos para os links da navbar na página 'work' */
body.ledher-page .navbar-nav .nav-link {
    color: #efe1cd;
}

/* Reduz a margem superior no container da página do projeto */
.container-project.my-5 {
    margin-top: 2rem !important; /* Ajusta este valor conforme a tua preferência */
    margin-bottom: 3rem !important; /* Mantém a margem inferior original se necessário */
}

/* Hover e foco dos links */
body.ledher-page .navbar-nav .nav-link:hover,
body.ledher-page .navbar-nav .nav-link:focus {
    text-decoration: underline;
}

/* Estilos para o botão do hambúrguer (remove bordas e sombras) */
body.ledher-page .navbar-toggler {
    border: none;
    box-shadow: none;
}

/* Estilos para as linhas do hambúrguer */
body.ledher-page .navbar-toggler-icon {
    /* Remove a imagem de fundo do Bootstrap */
    background-image: none !important;
    /* Aplica a cor de fundo desejada para a linha do meio */
    background-color: #efe1cd !important;
    position: relative;
    width: 30px;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

body.ledher-page .navbar-toggler-icon::before,
body.ledher-page .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #efe1cd;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Estilos para o foco no botão do hambúrguer */
body.ledher-page .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Define o fundo da navbar como transparente */
body.ledher-page .navbar {
    background-color: transparent !important;
}

/* Estilos para o footer da página de trabalho */
body.ledher-page .footer {
    color: #efe1cd;
}

/* Opcional: ajustar a cor dos ícones sociais */
body.ledher-page .footer .social-icons a {
    color: #efe1cd;
}

/* Opcional: ajuste o hover dos ícones sociais */
body.ledher-page .footer .social-icons a:hover {
    color:#ef6c1f; /* A cor do hover */
}

body.ledher-page .footer-text {
    color: #efe1cd; 
}

body.ledher-page {
    background-color: #252921;
}

body.ledher-page .project-title {
  color:#efe1cd;
  text-decoration: underline;
  
}

body.ledher-page .project-title:hover {
  color:#ef6c1f;
  text-decoration: underline;
  margin-bottom: 0;
}

body.ledher-page a {
  color:#efe1cd;
  text-decoration: underline;
  margin-bottom: 0;
}

h1.ledher-page {
  font-family: "indivisible", sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: #efe1cd;
}

p.ledher-page {
  font-family: "indivisible", sans-serif;
  color:#efe1cd;
}


.project-title {
  margin-bottom: 0;
}

.project-image {
  max-width: 100%;
  height: auto;
}

.text-end img {
  display: inline-block;
}


/* --- AGUCA PAGE --- */

/* Mudar a cor do logo na página de trabalho */
body.aguca-page .logo path {
    fill: #efe1cd !important;
}

/* --- Estilos da Navbar para a página 'aguca' --- */

/* Estilos para os links da navbar na página 'work' */
body.aguca-page .navbar-nav .nav-link {
    color: #efe1cd;
}

/* Hover e foco dos links */
body.aguca-page .navbar-nav .nav-link:hover,
body.aguca-page .navbar-nav .nav-link:focus {
    text-decoration: underline;
}

/* Estilos para o botão do hambúrguer (remove bordas e sombras) */
body.aguca-page .navbar-toggler {
    border: none;
    box-shadow: none;
}

/* Estilos para as linhas do hambúrguer */
body.aguca-page .navbar-toggler-icon {
    /* Remove a imagem de fundo do Bootstrap */
    background-image: none !important;
    /* Aplica a cor de fundo desejada para a linha do meio */
    background-color: #efe1cd !important;
    position: relative;
    width: 30px;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

body.aguca-page .navbar-toggler-icon::before,
body.aguca-page .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #efe1cd;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Estilos para o foco no botão do hambúrguer */
body.aguca-page .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Define o fundo da navbar como transparente */
body.aguca-page .navbar {
    background-color: transparent !important;
}

/* Estilos para o footer da página de trabalho */
body.aguca-page .footer {
    color: #efe1cd;
}

/* Opcional: ajustar a cor dos ícones sociais */
body.aguca-page .footer .social-icons a {
    color: #efe1cd;
}

/* Opcional: ajuste o hover dos ícones sociais */
body.aguca-page .footer .social-icons a:hover {
    color: #2dda32; /* A cor do hover */
}

body.aguca-page .footer-text {
    color: #efe1cd; 
}

body.aguca-page {
    background-color: black;
}

body.aguca-page .project-title {
  color:#efe1cd;
  text-decoration: underline;
  
}

body.aguca-page .project-title:hover {
  color:#2dda32;
  text-decoration: underline;
  margin-bottom: 0;
}

body.aguca-page a {
  color:#efe1cd;
  text-decoration: underline;
  margin-bottom: 0;
}

body.aguca-page a:hover {
  color:#2dda32;
  text-decoration: underline;
  margin-bottom: 0;
}

/* Reduz a margem superior no container da página do projeto */
.container-project.my-5 {
    margin-top: 2rem !important; /* Ajusta este valor conforme a tua preferência */
    margin-bottom: 3rem !important; /* Mantém a margem inferior original se necessário */
}

.project-title {
  margin-bottom: 0;
  text-decoration: underline;
}

.project-title:hover {
  color:#ef6c1f;
  text-decoration: underline;
  margin-bottom: 0;
}

.project-image {
  max-width: 100%;
  height: auto;
}

.text-end img {
  display: inline-block;
}

h1.aguca-page {
  font-family: "indivisible", sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: #efe1cd;
}

p.aguca-page {
  font-family: "indivisible", sans-serif;
  color:#efe1cd;
}


/* --- ABOUT PAGE --- */

/* Sections */

#about-1 {
  background-color: #efe1cd;
  color: #ef6c1f;
  position: relative; /* necessário para posicionar a imagem dentro desta secção */
  overflow: hidden; /* impede que a imagem ultrapasse a secção */
  max-width: 100%;
  min-height: 700px;
}

#about-2 {
  background-color: #ef6c1f;
  color: #efe1cd;
  position: relative; /* necessário para posicionar a imagem dentro desta secção */
  overflow: hidden; /* impede que a imagem ultrapasse a secção */
  max-width: 100%;
  min-height: 700px;
}

#about-team {
  background-color: #ef6c1f;
  color: #efe1cd;
  position: relative; /* necessário para posicionar a imagem dentro desta secção */
  overflow: hidden; /* impede que a imagem ultrapasse a secção */
  max-width: 100%;
  min-height: 700px;
}

#about-team .legenda-2 {
    font-size: 1rem; /* Ajuste este valor. Ex: 2rem, 3rem, 40px, etc. */
    /* Você pode usar 'rem' para um tamanho responsivo, ou 'px' para um tamanho fixo. */
    /* 'rem' é geralmente preferível para responsividade. */
    font-weight: 500;
    line-height: 1.2;
    color:#efe1cd;
}

#about-3 {
  background-color: transparent;
  color: #ef6c1f;
  position: relative; /* necessário para posicionar a imagem dentro desta secção */
  overflow: hidden; /* impede que a imagem ultrapasse a secção */
  max-width: 100%;
  min-height: 500px;
}

/* --- FOOTER --- */

.footer {
    background-color: transparent;
    color: #54392d;
    padding: 20px 0;
    font-size: 14px;
    margin-top: 30px;
}

.social-icons a {
    color: #54392d;
    font-size: 1.5rem;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #ef6c1f;
}

/* ---- MEET THE TINY TEAM ---- */

.image-text-wrapper {
  display: flex;
  flex-direction: column; /* Em mobile, os itens se empilham */
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  overflow: visible;
  height: auto;
}

.image-block {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
  padding: 0;
  box-sizing: border-box;
}

/* **NOVA REGRA** - Garante que o primeiro image-block não tem uma margem superior extra */
.image-block:first-child {
    margin-top: 0;
}

.team-img {
  width: 250px;
  border-radius: 20px;
  /* Transição e Transformação serão definidas *dentro* da media query para desktop */
  margin-bottom: 30px; /* Espaço entre a imagem e o texto em mobile */
  position: relative; /* Manter para o z-index */
  top: auto;
  transform: none;
  z-index: auto;
}

.col-text {
  position: relative; /* Remove o posicionamento absoluto em mobile */
  opacity: 1; /* O texto sempre visível em mobile */
  /* Transição e Transformação serão definidas *dentro* da media query para desktop */
  z-index: 1;
  width: 100%;
  max-width: 250px;
  text-align: left;
  padding: 10px;
  height: auto;
  max-height: none;
  overflow-y: auto;
  background-color: transparent;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
  margin: 0;
}

/* Em mobile, esconda o texto de desktop e mostre o texto de mobile */
.col-text.text-desktop {
    display: none; /* Esconde o texto que é só para desktop */
}

.col-text.text-mobile {
    display: block; /* Mostra o texto que é só para mobile */
}

/* --- MEDIA QUERY para telas maiores (a partir de 768px) --- */
@media (min-width: 768px) {
    .image-text-wrapper {
        flex-direction: row;
        gap: 80px; /* Mantém um gap generoso entre os image-blocks */
        justify-content: center;
        padding: 0 40px; /* Mantém padding lateral */
    }

    .image-block {
        position: relative;
        /*
         * Largura do image-block:
         * Imagem (250px) + Gap interno (20px) + Largura do texto (250px) = 520px
         * Aumentei para 540px para dar folga.
         * Se a imagem vai sair do bloco, a largura do bloco deve ser a largura da imagem + o gap interno.
         * A imagem 'sai' e o texto 'fica' dentro do bloco.
         * Largura que o image-block PRECISA ser para conter a imagem ANTES da animação: 250px
         * Quando a animação acontece, a imagem sai e o texto aparece.
         * O image-block vai conter o texto (250px) + um espaço onde a imagem estava.
         */
        width: 250px; /* A largura do image-block é o tamanho da imagem (o que ele mostra em repouso) */
        height: 450px; /* Altura generosa para o texto (ajuste se necessário) */
        display: block;
        text-align: left;
        /* MUITO IMPORTANTE: VOLTAR PARA 'overflow: visible' para que a imagem NÃO seja cortada */
        overflow: visible;
    }

    .team-img {
        width: 250px;
        border-radius: 20px;
        margin-bottom: 0;
        transition: transform 0.6s ease;
        position: absolute;
        /*top: 50%;*/
        transform: translateY(-50%) translateX(0); /* Estado inicial: sem deslocamento */
        z-index: 2; /* Imagem acima do texto no estado normal */
        top: 0;
        transform: translateY(0) translateX(0);
    }

    .col-text {
        position: absolute;
        opacity: 0;
        transition: opacity 0.6s ease;
        padding: 10px;
        background-color: transparent;
        font-size: 1rem;
        line-height: 1.4;
        /* CORREÇÃO DO TEXTO CORTADO: */
        width: 250px; /* Largura fixa para o bloco de texto (conforme a imagem) */
        /* Simplificar a altura e o centramento do texto */
        height: auto; /* Deixa a altura ser definida pelo conteúdo */
        max-height: calc(100% - 20px); /* Garante que não excede a altura do image-block - padding */
        top: 0; /* Centraliza o texto verticalmente no image-block */
        transform: none; /* Ajuste para centralizar perfeitamente */
        z-index: 1; /* Texto abaixo da imagem no estado normal */
    }

    /* Em desktop, esconda o texto de mobile e mostre o texto de desktop */
    .col-text.text-desktop {
        display: block; /* Mostra o texto que é só para desktop */
        /* As regras de 'left'/'right' e 'z-index' aplicar-se-ão a este div */
    }

    .col-text.text-mobile {
        display: none; /* Esconde o texto que é só para mobile */
    }

    /* POSICIONAMENTO ESPECÍFICO DOS ITENS DENTRO DE CADA image-block */

    /* BLOCO ESQUERDO (Inês) */
    .image-block:first-child .team-img {
        left: 0; /* Imagem Inês começa na borda esquerda do image-block */
    }

    .image-block:first-child .col-text.text-desktop { /* Alvo específico: texto desktop do primeiro bloco */
        /*left: 350px;  Mantém a posição trocada para desktop */
        right: auto;
    }    


    /* BLOCO DIREITO (Susana) */
    .image-block:last-child .team-img {
        right: 0; /* Imagem Susana começa na borda direita do image-block */
    }

    .image-block:last-child .col-text.text-desktop { /* Alvo específico: texto desktop do segundo bloco */
        /*right: 350px;  Mantém a posição trocada para desktop */
        left: auto;
    }


    /* ANIMAÇÃO DE HOVER */
    .image-text-wrapper:hover .img-left {
        /*
         * A imagem Inês move para a esquerda.
         * A distância de movimento deve ser a sua própria largura + o gap visual que terá com o texto
         * (se o texto estivesse visível na sua posição inicial, o que não é o caso).
         * Para a imagem sair da vista e o texto ocupar o seu espaço (a partir de 270px),
         * a imagem precisa mover-se a largura da imagem + a largura do texto (250 + 250) + o gap entre eles (20px).
         * Ou seja, a imagem precisa ir para uma posição onde o texto possa ser revelado.
         * Transform: translateX(-270px) irá mover a imagem 270px para a esquerda.
         * Se a imagem estava em left:0, ela vai para left: -270px.
         * O texto está em left: 270px.
         * Isso não está a fazê-los encontrar-se.
         *
         * Vamos tentar mover a imagem para o lado do texto.
         * A imagem deve mover-se PARA O LADO OPOSTO DO TEXTO, revelando o texto.
         * O texto está em 270px. A imagem vai para left: 0px.
         * A imagem tem 250px. O texto tem 250px.
         * Se a imagem move para -270px, o seu lado direito fica em -20px.
         * O texto começa em 270px. Eles não se tocam.
         *
         * A DISTÂNCIA QUE A IMAGEM DEVE MOVER É A LARGURA DO TEXTO + O ESPAÇO.
         * Transform da imagem: Largura do texto (250px) + Gap (20px) = 270px.
         * A imagem Inês (left: 0) vai para left: -270px.
         *
         * No seu screenshot, as imagens parecem desaparecer. Isso acontece se o
         * `translateX` as empurra para fora de um contentor com `overflow: hidden`.
         * Como voltamos para `overflow: visible` no .image-block, elas não deveriam desaparecer.
         *
         * Vamos ser mais agressivos com o deslocamento da imagem, para garantir que ela sai do caminho.
         */
        transform: translateY(-5%) translateX(-350px); /* Mover mais para fora */
    }

    .image-text-wrapper:hover .img-right {
        transform: translateY(-5%) translateX(350px); /* Mover mais para fora */
    }

    .image-text-wrapper:hover .col-text {
        opacity: 1;
        z-index: 3;
    }
}

/* ---- ANIMAÇÕES ---- */

.tracking-in-expand {
  opacity: 0; /* Inicialmente invisível */
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-8-4 19:21:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* --- CORREÇÃO PARA O ALINHAMENTO DO MENU HAMBÚRGUER --- */

/* Aplica apenas em telas pequenas, abaixo de 992px (o ponto de quebra 'lg' do Bootstrap) */
@media (max-width: 991px) {
  /* Garante que o menu ocupa o espaço e alinha o conteúdo à direita */
  .navbar-collapse {
    flex-grow: 1; /* Permite que o menu preencha o espaço disponível */
    justify-content: flex-end; /* Alinha o conteúdo (ul) para a direita */
  }

  /* Aplica-se à lista de links */
  .navbar-nav {
    flex-direction: column; /* Empilha os links verticalmente */
    align-items: flex-end; /* Alinha os links individualmente à direita */
  }
}

@media (max-width: 767.98px) {
    /* Força as colunas a terem a largura e margem corretas em mobile */
    .row > .col-10 {
        width: 83.33333333%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Força o alinhamento à esquerda para os h2 e h3 em desktop */
@media (min-width: 768px) {
    .row .col-10 {
        text-align: left !important;
    }
}