header.mobile nav .navbar-toggler {
  font-size: 34px;
  box-shadow: none;
}
header.mobile nav .navbar-toggler.collapsed .menu-abrir {
  display: inline;
}
header.mobile nav .navbar-toggler.collapsed .menu-fechar {
  display: none;
}
header.mobile nav .navbar-toggler .menu-abrir {
  display: none;
}
header.mobile nav .navbar-toggler .menu-fechar {
  display: inline;
}

header.mobile nav .dropdown-menu a {
  font-size: 15px;
  text-wrap: wrap;
}

header.mobile nav .navbar-mobile {
  transition-duration: 0.5s;
}

#carousel-topo-mobile img {
  height: 400px;
  object-fit: cover;
  object-position: center;
}
#carousel-topo-mobile .carousel-indicators button {
  width: 50px;
  height: 6px;
  opacity: 1;
}
#carousel-topo-mobile .carousel-indicators button.active,
#carousel-topo-mobile .carousel-indicators button:hover {
  background-color: #cc3333;
}
#carousel-topo-mobile .carousel-caption {
  text-align: left;
  /* border: 1px solid red; */
  left: 7.5%;
  right: 7.5%;
  top: 50px;
}
#carousel-topo-mobile .carousel-caption .subtitulo {
  font-family: "Raleway";
  font-size: 19px;
}
#carousel-topo-mobile .carousel-caption .titulo {
  font-family: "Merriweather";
  font-size: 48px;
  font-weight: bold;
}
#carousel-topo-mobile .carousel-caption .texto {
  font-family: "Merriweather";
  font-size: 24px;
  font-weight: normal;
  line-height: 28px;
}

main.mobile .titulo,
footer.mobile .titulo {
  font-size: 18px;
  line-height: 22px;
}
main.mobile .texto,
footer.mobile .texto {
  font-size: 10px;
}
.mobile .botao-vermais {
  background-color: #cc3333;
  border: 4px solid #cc3333;
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-family: "Merriweather";
  font-weight: bold;
  transition-duration: 0.5s;
  padding: 4px 16px;
}
.mobile .botao-vermais:hover {
  background-color: white;
  color: #cc3333;
}

.mobile .lista-caixa-projetos {
  gap: 50px;
}
.mobile .caixa-projeto {
  width: fit-content;
}
.mobile .caixa-projeto .titulo {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 12.8px;
  width: 220px;
  height: 134px;
  text-transform: uppercase;
  color: transparent;
  cursor: pointer;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
}
.mobile .caixa-projeto.activo .titulo div {
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile .caixa-projeto .botao-vermais {
  display: inline-block;
  cursor: pointer;
}
.mobile .paginacao a {
  background-color: #cc3333;
  color: white;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  font-family: "Raleway";
  font-weight: normal;
  cursor: pointer;
  transition-duration: 0.5s;
  border: 3px solid #cc3333;
}
.mobile .paginacao a:hover,
.mobile .paginacao a.active {
  background-color: white;
  color: #cc3333;
}

main.mobile .subtitulo {
  font-size: 12px;
  font-weight: 600;
}

/* Container do formulário */
.mobile form {
  padding: 15px 15px 5px 15px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* A caixa que segura o input e o ícone juntos */
.mobile form .search-box {
  position: relative;
  /* Removemos o display:flex e justify-content daqui */
  width: 286px; /* A largura fixa vem para a caixa pai */
  max-width: 90%; /* Mantém a responsividade para telas muito pequenas */
}

/* O campo de texto */
.mobile form input[type="text"] {
  width: 100%; /* Agora ele preenche os 286px exatos da caixa pai */
  height: 36px;
  outline: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 5px 40px 5px 15px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #666666;
  box-sizing: border-box;
}

/* O texto cinza 'pesquisar' dentro do campo */
.mobile form input::placeholder {
  text-transform: lowercase;
  font-style: italic;
  color: #888888;
}

/* A lupa de pesquisa */
.mobile form .icone {
  position: absolute;
  right: 12px; /* Agora isso empurra 12px para dentro do input! */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-image: url("../imagens/lupa_mobile.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* 1. O CARD BASE */
footer.mobile .destaque-card {
  height: 450px;
  box-sizing: border-box;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  text-decoration: none;
  overflow: hidden;
}

/* 2. O FUNDO ESCURO (Faz o mesmo papel da '.sombra' no portfólio) */
footer.mobile .destaque-card .titulo {
  height: 100%;
  width: 100%;
  background-color: rgba(35, 31, 32, 0); /* Inicia transparente */
  transition: background-color 0.2s ease-in-out;

  /* Mantém o texto em cima e o olho embaixo, centralizados */
  display: flex;
  flex-direction: column; /* CRUCIAL para não quebrar o layout */
  justify-content: center;
  align-items: center;
  padding: 0px 35px;
}

/* 3. O TEXTO (Faz o mesmo papel do '.titulo' do portfólio) */
footer.mobile .destaque-card .titulo span {
  color: white;
  text-transform: uppercase;
  font-family: "Merriweather", serif;
  font-weight: bold;
  font-size: 19px;
  text-align: center;

  /* Inicia escondido e para cima */
  opacity: 0;
  transform: translateY(-15px);
  transition: all 0.2s ease-in-out;
}

/* 4. O OLHO */
footer.mobile .destaque-card .titulo .icone-olho {
  width: 40px;
  height: 26px;
  margin-top: 15px; /* Respiro entre texto e ícone */

  /* Inicia escondido e para baixo */
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.2s ease-in-out;
}

/* =======================================
   EFEITOS DE TOQUE / HOVER (MÁGICA)
   ======================================= */

/* O fundo escurece ao tocar */
footer.mobile .destaque-card:hover .titulo,
footer.mobile .destaque-card:focus .titulo,
footer.mobile .destaque-card:active .titulo,
footer.mobile .destaque-card.active .titulo {
  background-color: rgba(35, 31, 32, 0.8);
}

/* O texto e o olho se encontram no meio ao tocar */
footer.mobile .destaque-card:hover .titulo span,
footer.mobile .destaque-card:focus .titulo span,
footer.mobile .destaque-card:active .titulo span,
footer.mobile .destaque-card.active .titulo span,
footer.mobile .destaque-card:hover .titulo .icone-olho,
footer.mobile .destaque-card:focus .titulo .icone-olho,
footer.mobile .destaque-card:active .titulo .icone-olho,
footer.mobile .destaque-card.active .titulo .icone-olho {
  opacity: 1;
  transform: translateY(0);
}
/* footer.mobile .destaque-card .titulo:hover button{display: flex;} */

footer.mobile .contactos {
  color: white;
  height: 480px;
  /* background-image: url("https://interiberia.pt/public/img/fundo-contact-us.jpg"); */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
footer.mobile .contactos .sombra {
  background-color: rgba(35, 31, 32, 0.8);
}
footer.mobile .contactos .titulo {
  font-size: 24px;
}
footer.mobile .contactos .subtitulo {
  font-family: "Raleway";
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}
footer.mobile .contactos .texto {
  font-family: "Merriweather";
  font-size: 13px;
  font-weight: normal;
  color: white;
}
footer.mobile .contactos p {
  margin: 0px;
}

footer.mobile .icones {
  height: 35px;
}
footer.mobile .icones.pequenos {
  height: 26px;
}

footer.mobile .copyright {
  font-size: 9.5px;
}

footer.mobile .botao-voltar-topo {
  font-family: "Raleway";
  font-size: 24px;
  background-color: #cc3333;
  color: white;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.5);
  transform: rotate(-90deg);
  position: fixed;
  right: 20px;
  bottom: 10px;
  cursor: pointer;
}
footer.mobile .botao-voltar-topo span {
  transform: translate(0.5px, -1px);
}

.mobile .lista-caixa-projetos.especial {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 0px !important;
}
.mobile .lista-caixa-projetos.especial {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 0px !important;
}

.mobile .caixa-portfolio {
  height: 360px;
  box-sizing: border-box;
  background-position: center;
  /* Trocado 100% 100% por cover para a imagem não achatar no celular */
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden; /* Mantém a animação dentro do limite do card */
}

.mobile .caixa-portfolio.grande {
  height: 450px !important;
}

/* --- ESTILOS DA SOMBRA --- */
.mobile .caixa-portfolio .sombra {
  background-color: rgba(35, 31, 32, 0); /* Inicia transparente */
  color: white;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out; /* Transição levemente mais rápida no mobile */
}

/* --- ESTILOS DO TÍTULO --- */
.mobile .caixa-portfolio .sombra .titulo {
  text-transform: uppercase;
  font-family: "Merriweather", serif;
  font-weight: bold;
  font-size: 19px; /* Tamanho original que você definiu */

  /* Estado inicial (escondido e para cima) */
  opacity: 0;
  transform: translateY(-15px);
  transition: all 0.2s ease-in-out;
}

/* --- ESTILOS DO ÍCONE DE OLHO --- */
.mobile .caixa-portfolio .sombra img {
  width: 40px;
  height: 26px;

  /* Estado inicial (escondido e para baixo) */
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.2s ease-in-out;
}

/* =======================================
   EFEITOS DE HOVER / TOQUE (MOBILE)
   ======================================= */

/* 1. Fundo escurece ao tocar/focar */
.mobile .caixa-portfolio:hover .sombra,
.mobile .caixa-portfolio:focus .sombra,
.mobile .caixa-portfolio:active .sombra {
  background-color: rgba(35, 31, 32, 0.8);
}

/* 2. Texto desce e aparece / Olho sobe e aparece ao tocar/focar */
.mobile .caixa-portfolio:hover .sombra .titulo,
.mobile .caixa-portfolio:focus .sombra .titulo,
.mobile .caixa-portfolio:active .sombra .titulo,
.mobile .caixa-portfolio:hover .sombra img,
.mobile .caixa-portfolio:focus .sombra img,
.mobile .caixa-portfolio:active .sombra img {
  opacity: 1;
  transform: translateY(0);
}

@media all and (width < 992px) {
  .modal .titulo {
    font-size: 18px;
  }
  .modal .data {
    font-size: 12px;
  }
  .modal .texto {
    font-size: 12px;
  }

  nav .nav-item:has(> .nav-link.show) {
    background-color: #eae8e8;
  }

  nav .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    border-radius: 0px;
    border: none;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0 0 0 26px;
    box-shadow: none;

    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.3s ease-in-out,
      margin-top 0.3s ease-in-out;
  }
  nav .dropdown-menu.show {
    margin: 22px 0 0 0px;
    padding: 0 0 0 26px;
    max-height: 120px; /* Um limite alto o suficiente para caber todos os submenus */
    /* Transição normal para a ABERTURA */
    transition:
      max-height 0.3s ease-in-out,
      margin-top 0.3s ease-in-out;
  }

  nav .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 3. Estilo dos links (Mantemos igual ao anterior) */
  nav .dropdown-menu a {
    display: block;
    color: #666666;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    text-transform: none;
    border: none;
    padding: 2px 0 6px 0;
    border-bottom: 1px solid #ccc !important;
    background-color: transparent;
  }

  nav .dropdown-menu li:last-child a.dropdown-item {
    border-bottom: none !important;
  }

  nav .dropdown-menu a:hover,
  nav .dropdown-menu a.active {
    color: #cc0000;
    background-color: #f1f1f1;
  }

  nav .abrir_fechar {
    float: right;
    display: block;
    background-image: url("../imagens/arrow_right_mobile.png");
    width: 6px;
    height: 14px;
    position: relative;
    top: 5px;
    margin-right: 6%;
  }
  .max_area {
    margin: 0 !important;
  }

  div.copyright {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  div.copyright > div.sociais {
    margin-top: 20px;
  }

  main.container {
    padding: 0;
  }

  #carousel-pai {
    height: 200px;
  }

  #carousel-topo .carousel-caption {
    top: 10%; /* Sobe um pouco mais o bloco de texto */
    left: 5%; /* Margem de respiro lateral */
    width: 90%;
    padding: 0 15px;
  }

  /* 2. Redução drástica das fontes para caberem na foto */
  #carousel-topo .carousel-caption .titulo {
    font-size: 16px;
    margin-bottom: 5px; /* Deixa as linhas mais coladas */
  }

  #carousel-topo .carousel-caption .subtitulo {
    font-size: 11px;
    margin-bottom: 12px;
  }

  /* 3. Ajuste do texto inferior e da linha separadora */
  #carousel-topo .carousel-caption .texto {
    font-size: 11px;
    padding-top: 10px;
  }

  #carousel-topo .carousel-caption .texto::before {
    width: 45px; /* Encurta a linha branca para ficar proporcional à tela pequena */
  }

  /* 4. Miniaturização dos Controles (Bolinhas) */
  #carousel-topo .carousel-indicators {
    bottom: 10px;
    margin-bottom: 0;
  }

  #carousel-topo .carousel-indicators button {
    width: 15px;
    height: 15px;
    margin: 0 4px 15px;
    border-width: 1px; /* Garante que a borda não fique muito grossa no mobile */
  }

  /* 1. Trava a altura do container principal das imagens */
  #carousel-topo .carousel-inner,
  #carousel-topo .carousel-item {
    height: 200px;
  }

  /* 2. O segredo: Força a imagem a preencher os 200px e recorta o que sobrar */
  #carousel-topo .carousel-item img {
    height: 200px;
    object-fit: cover; /* Faz a imagem cobrir o espaço sem amassar */
    object-position: center; /* Mantém o centro da foto visível */
  }

  .ultimas_noticias {
    margin: 0;
  }

  .noticias-max-area {
    width: 91%;
    margin: 0px auto 0;
  }

  .noticias-item {
    width: 100%;
    height: auto;
  }

  .noticias-imagem {
    height: auto;
  }

  .noticias-grid {
    gap: 26px;
  }

  .junta_te_nos {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .junta_te_nos > .max_area > .conteudo {
    padding: 0 5% !important;
    margin-bottom: 0;
  }
  .bloco-sombra {
    margin-top: 25px;
  }

  .contacte_nos {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .contacte_nos > .max_area > .conteudo {
    padding: 0 5% !important;
    margin: 4px 0 20px 0;
    padding: 13px;
  }

  .contacte_nos > .max_area > .conteudo > p {
    margin-bottom: 20px;
  }

  .formulario {
    padding: 0 5%;
  }

  .contacte_nos .form-group {
    display: flex;
    width: 320px;
    flex-direction: column;
    justify-content: start;
    margin-bottom: 15px;
    justify-self: center;
  }
  .sobre-nos__hero {
    background: #ffffff;
    padding-top: 0;
  }
  .sobre-nos__hero-copy h1 {
    padding: 2% 5%;
  }

  .sobre-nos__hero-copy p {
    background: #f1f1f1;
    padding: 5%;
  }
  .sobre-nos__highlights {
    padding: 0 37px;
  }

  .sobre-nos__highlight-section {
    padding: 3rem;
  }

  .sobre-nos__highlight-title {
    margin: 0 auto 45px auto;
    max-width: 300px;
    min-height: 70px;
  }
  .sobre-nos__highlight-title span {
    font-size: 17px;
  }

  .sobre-nos__process-flex {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 40px;
    margin-top: 40px;
  }

  .sobre-nos__process-flex::before {
    display: none !important;
  }

  /* 2. Esconde a imagem combinada do Desktop */
  .process-icon-desktop {
    display: none !important;
  }

  /* 3. Liga o bloco do Mobile e empilha as 3 imagens perfeitamente */
  .process-icon-mobile {
    display: flex !important;
    flex-direction: column; /* Empilha: Ícone > Bolinha > Seta */
    align-items: center; /* Centraliza tudo no meio da tela */
    justify-content: center;
    gap: 5px; /* Um pequeno respiro entre o ícone, a bolinha e a seta */
    width: 100%;
  }

  .iniciar-animacao .sobre-nos__process-icon {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  /* Ajuste de tamanho caso as imagens venham muito grandes */
  .mobile-img-principal {
    max-height: 60px; /* Controla a altura do ícone principal */
    margin-bottom: 24px;
  }

  .mobile-img-ponto {
    max-height: 15px; /* Controla a bolinha */
  }

  .mobile-img-seta {
    max-height: 25px; /* Controla a seta apontando para baixo */
    margin-bottom: -15px; /* Opcional: puxa o card branco um pouco mais pra perto da seta */
    transform: rotate(90deg);
  }

  /* Removemos aquele truque de alinhar por baixo, pois no mobile é tudo centralizado */
  .sobre-nos__process-icon {
    height: auto;
    align-items: center;
  }

  .ultimos-projetos__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    width: 75%;
    justify-self: center;
    padding-bottom: 40px;
  }

  .page__hero {
    background: #ffffff;
    padding-top: 0px;
  }

  .page__hero-copy h1 {
    padding: 2% 5%;
  }

  .page__hero-copy p {
    background: #f1f1f1;
    padding: 5%;
  }

  .servico-hero {
    width: 91%;
    justify-self: center;
    padding: 0 5%;
  }

  .servicos__conteudo {
    width: 91%;
    justify-self: center;
    padding: 0 5%;
  }

  .servicos__conhecer-portfolio img {
    max-width: 315px;
    justify-self: center;
  }

  .hrsite {
    width: 91%;
    justify-self: center;
  }

  .botao-voltar {
    margin-left: 6%;
  }

  .ultimos-projetos__title::after {
    width: 91%;
  }

  /* Remove as bordas superior e inferior da barra geral */
  .servicos__navbar {
    position: relative;
    border-top: none;
    border-bottom: none;
    padding: 10px 0; /* Dá um respiro geral */
  }

  .servicos__navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Centraliza a linha no meio do título */
    height: 1px;
    background-color: #f1f1f1; /* Cor da linha */
    height: 3px;
    width: 100%;
  }

  /* Muda de linha reta para blocos empilhados (coluna) */
  .servicos__nav-list {
    flex-direction: column;
    gap: 6px; /* O espaçamento entre os botões na imagem */
    padding: 10px 6px 0 6px;
  }

  /* Transforma cada item em uma caixa com borda */
  .servicos__nav-item {
    width: 100%;
    border: solid 1px #cccccc;
    background-color: #ffffff;
  }

  /* Ajusta o texto e o espaçamento interno do botão */
  .servicos__nav-link {
    padding: 7px 0 7px 18px;
    font-size: 13px;
    font-weight: 600; /* Deixa a fonte mais forte como na imagem */
    color: #666666;
    text-transform: uppercase; /* Força tudo para maiúsculo igual à imagem */
  }

  /* O ESTADO ATIVO NO MOBILE (Fundo Vermelho, Texto Branco) */
  .servicos__nav-item.is-active {
    background-color: #cc0000;
  }

  .servicos__nav-item.is-active .servicos__nav-link {
    color: #ffffff; /* Texto branco */
  }
  .servicos__nav-item::after {
    display: none !important;
  }

  .servicos__imagem {
    width: 100%;
    height: auto;
    max-width: 400px;
    justify-self: center;
  }

  .servicos__btn-voltar.is-visible,
  .servicos__btn-voltar-linha.is-visible {
    display: block;
  }

  .cliente-card {
    flex-direction: column; /* Empilha a imagem em cima do texto */
    align-items: center;
    text-align: start; /* Centraliza todo o texto */
  }

  .cliente-card__imagem-col {
    flex: auto;
    padding-right: 0;
    margin-bottom: 25px; /* Empurra o texto para baixo */
  }

  .cliente-card__conteudo-col {
    width: 80%;
    justify-self: center;
    padding-left: 0;
    border-left: none; /* Remove a linha vertical no celular */

    padding-top: 25px;
  }

  .contactos-wrapper {
    flex-direction: column; /* Empilha o Formulário e a Lâmpada */
  }

  .contactos-info-col {
    flex: auto;
    width: 100%;
  }

  .form-proposta {
    grid-template-columns: 1fr; /* Transforma as 2 colunas do form em 1 só */
  }

  .contactos-formulario-col {
    max-width: 91%;
    width: 100%;
    justify-self: center;
    align-self: center;
    padding: 20px; /* Reduz o respiro no celular */
  }

  .contactos-info-col img {
    width: 91%;
  }

  .form-proposta {
    padding: 0;
  }

  .portfolio-grid {
    grid-template-columns: 1fr; /* 1 coluna no celular */
    padding: 0 45px;
  }

  .portfolio-filtros-wrapper {
    display: block; /* Desativa o flex do desktop */
    min-height: auto; 
    padding: 15px;
  }
  
  .portfolio-filtros .filtro-item {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
    justify-content: center;
  }

  /* 1. Empilha os itens do filtro */
  .portfolio-filtros {
    flex-direction: column;
    width: 91%;
    gap: 5px;
  }

  /* 2. Formata cada bloco (As caixas com borda) */
  .portfolio-filtros .filtro-item {
    flex-direction: column;
    width: 100%;
    border: 1px solid #e5e5e5;
    margin-bottom: 6px; /* O espaço entre as caixas igual à imagem */
    border-right: 1px solid #e5e5e5; /* Devolve a borda direita */
    padding: 0; /* Zera para controlarmos internamente */
    background-color: #ffffff;
  }

  /* 3. O botão TODOS (Fundo vermelho centralizado) */
  .portfolio-filtros .filtro-item.is-active a {
    display: block;
    padding: 5px 30px;
    text-align: center;
    background-color: #cc0000;
    color: #ffffff;
    font-size: 13px;
  }

  /* 4. O Título da Categoria (Cor na esquerda, Texto no centro, Seta na direita) */
  .filtro-item-titulo {
    position: relative;
    display: block;
    padding: 5px 30px; /* Espaço nas laterais para não encostar nos ícones */
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* O quadradinho de cor absoluto na esquerda */
  .portfolio-filtros .cor-box {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
  }

  /* A setinha absoluta na direita */
  .seta-dropdown {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
  }

  /* 5. A MÁGICA: Transforma o Dropdown Flutuante em Accordion Fixo */
.portfolio-dropdown {
    position: static; 
    width: 100%;
    box-shadow: none; 
    border: none;
    transform: none; 
    padding: 0;
    
    /* A MÁGICA DA ANIMAÇÃO COMEÇA AQUI */
    display: block !important; /* Precisamos que ele exista na tela para ter altura */
    visibility: hidden; /* Desativa os cliques quando estiver fechado */
    max-height: 0; /* Colapsa o menu (altura zero) */
    overflow: hidden; /* Esconde qualquer texto que tente vazar */
    opacity: 0; /* Deixa invisível */
    
    /* A instrução para o CSS animar a altura e a transparência em 0.3 segundos */
    transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.4s;
  }

  /* 6. Formata os Sub-itens (Alinhados à esquerda com recuo) */
  .portfolio-dropdown li a {
    text-align: left;
    padding: 5px 15px 5px 30px;
    font-size: 12px;
    font-weight: 600;
    color: #555555; /* Tom azulado escuro como na imagem */
  }

  /* 7. Exibe o menu ao clicar/tocar (usando o hover como quebra-galho pro front) */
  .portfolio-filtros .has-dropdown:hover .portfolio-dropdown {
    display: block; /* Empurra os itens de baixo automaticamente */
    transform: none;
  }
/* =========================================
     MÁGICA DO CLIQUE (SOMENTE MOBILE)
  ========================================= */
  
/* 1. Bloqueia completamente o efeito do mouse/toque acidental (Hover) no celular */
  .portfolio-filtros .has-dropdown:hover .portfolio-dropdown {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }

  /* 2. O Estado ABERTO (.is-open adicionado pelo JavaScript) */
  .portfolio-filtros .has-dropdown.is-open .portfolio-dropdown {
    visibility: visible;
    /* Colocamos um limite alto o suficiente para caber o seu maior menu (ex: Programação Web) */
    max-height: 350px; 
    opacity: 1;
  }

  /* 3. Garante que se o usuário tocar/segurar no menu aberto, ele não feche sozinho */
  .portfolio-filtros .has-dropdown.is-open:hover .portfolio-dropdown {
    visibility: visible;
    max-height: 350px; 
    opacity: 1;
  }

}