@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Unbounded:wght@200..900&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /* Colors */
  --hue: 32;
  --first-color: hsl(32, 100%, 50%);
  --first-color-alt: hsl(32, 100%, 45%);
  --first-color-light: hsl(32, 100%, 70%);
  --title-color: hsl(240, 8%, 95%);
  --text-color: hsl(240, 8%, 70%);
  --text-color-light: hsl(240, 8%, 50%);
  --body-color: hsl(240, 100%, 2%);
  --container-color: hsl(240, 8%, 6%);

  /* Font */
  --body-font: "Montserrat", sans-serif;
  --second-font: "Unbounded", sans-serif;
  --biggest-font-size: 2rem;
  --bigger-font-size: 1.75rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /* Font weight */
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /* Z index */
  --z-tooltip: 10;
  --z-fixed: 100;
}

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

html { scroll-behavior: smooth; }

body, button { font-family: var(--body-font); font-size: var(--normal-font-size); }

body { background-color: var(--body-color); color: var(--text-color); }

button { outline: none; border: none; }

h1, h2, h3, h4 {
  color: var(--title-color);
  font-family: var(--second-font);
  font-weight: var(--font-semi-bold);
}

ul { list-style: none; }
a { text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.section { padding-inline: 2rem; }

.container {
  width: 100%;
  max-width: 1120px; /* ou maior em desktop */
  margin: 0 auto; 
  padding-inline: 1.5rem;
}


.grid { display: grid; gap: 1.5rem; }

.section { padding-block: 5rem 1rem; }
.section__title { text-align: center; font-size: var(--h1-font-size); margin-bottom: 3rem; }
.section__title span { color: var(--first-color); }

.main { overflow: hidden; }

/*=============== BLOB ===============*/
.blob-animate{
  width: 100px;
  height: 100px;
  background: linear-gradient(180deg, var(--first-color-alt) 20%, var(--first-color-light) 100%);
  border-radius: 30%;
  position: absolute;
  filter: blur(35px);
  z-index: -1; 
  animation: animateBlob 5s linear infinite;
}

@keyframes animateBlob {
  0%{ transform: rotate(0); }
  100%{ transform: rotate(360deg); }
}

/*Blob*/
.blob{
  width: 250px;
  height: 250px;
  background: linear-gradient(180deg,
              var(--first-color) 0%,
              var(--first-color-alt) 100%);
  border-radius: 50%;
  filter: blur(50px);
  position: absolute;
  z-index: -1;
}

/*=============== CURSOR ===============*/
.cursor{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 50px;
  height: 50px;
  background-color: var(--first-color-light);
  border-radius: 50%;
  box-shadow: 0 0 30px var(--first-color);
  mix-blend-mode: difference;
  pointer-events: none;
  transition: transform .2s ease-out, 
            left .2s ease-out,
            top .2s,
            width .2s,
            height .2s;
}

.hide-cursor{
  width: 0;
  height: 0;
}

/*=============== HEADER & NAV ===============*/
.header{
  position: fixed;
  width: 100%;
  top: 0;
  background: linear-gradient(180deg, var(--body-color) 60%, hsla(240,100%,2%,0) 100%);
  z-index: var(--z-fixed);
  padding-block: 2rem;
}

.section { padding-top: calc(var(--header-height) + 4rem); }

.header .blob-animate{ top:-3rem; left:-3rem; }

.nav{
  display: flex;
  justify-content: space-between;
  padding-block: 1rem;
}

.nav.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  padding-left: 0;
}

.nav__logo{
  font-family: var(--second-font);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
  transition: color .4s;
  margin-right: auto;
}

.nav__logo:hover{ color: var(--first-color); }

.nav__logo img { height: 10rem; width: auto; }

/* Nav Links Desktop */
.nav__menu { display: flex; }
.nav__list { display: flex; flex-direction: row; gap: 2rem; }

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  font-size: var(--small-font-size);
  font-family: var(--second-font);
  transition: color .4s, text-shadow .4s;
}

.nav__link, .nav__toggle { color: #fff; }

.nav__link:hover{ color: var(--first-color); text-shadow:0 8px 16px var(--first-color); }

.nav__toggle{ display: none; font-size: 2rem; cursor: pointer; color: var(--title-color); transition: color .3s; }
.nav__toggle:hover { color: var(--first-color); text-shadow: 0 8px 16px var(--first-color); }


/*Active link*/
.active-link{
  color: var(--first-color);
  text-shadow:0 8px 16px var(--first-color);
}

 /* ===== MENU ===== */
.nav__list {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav__link {
  color: var(--title-color);
  transition: color 0.3s, text-shadow 0.3s;
}

.nav__link:hover {
  color: var(--first-color);
  text-shadow: 0 0 12px hsla(32, 100%, 50%, 0.8);
}
.nav__menu a.active-link {
  color: var(--first-color) !important; /* força a cor laranja */
  text-shadow: 0 0 12px hsla(32, 100%, 50%, 0.8); /* glow laranja */
}
/* ===== SUBMENU ===== */
.has-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 120%;
  left: 0;
  background: var(--body-color);
  border: 2px solid var(--first-color);
  border-radius: 1.2rem;
  padding: 0.3rem 0;
  min-width: 100px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 14px 48px hsla(32, 100%, 50%, 0.5);
  z-index: 200;
}

/* Mostrar submenu no hover (desktop) */
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Links do submenu */
.submenu__link {
  display: block;
  padding: 0.7rem 1.4rem;
  color: var(--title-color);
  transition: all 0.3s;
}

/* Hover laranja + glow */
.submenu__link:hover {
  color: var(--first-color);
  background: hsla(32, 100%, 50%, 0.1);
  box-shadow: inset 0 0 14px hsla(32, 100%, 50%, 0.5);
}
/*=============== ABOUT  ================== */
.about{
  position:relative;
}

.about__container{
  row-gap:3rem;
  overflow-y: visible;
}

.about__data .section__title{
  margin-bottom: 2rem;
  text-align: var(--h2-font-size);
  margin-bottom: 2rem
}

.about__description {
  color: var(--h2-font-size);
  margin-bottom: 2rem;
}
.about__description b{
  color: var(--first-color);
  font-weight: var(--font-semi-bold);
}

.about__image {
  position: relative;
  justify-self: center;
  overflow: visible; 
}
.home__image {
  position: relative;
  display: grid;
  justify-self: center;
  overflow: visible;
}

.home__image .blob-animate {
  position: absolute;
  z-index: -1;          /* atrás da imagem */
  width: 150px;
  height: 600px;
  border-radius: 40%;
  bottom: 0;
  justify-self: center;
  opacity: 0.5;
  animation: animateBlob 5s linear infinite;
}

.home__perfil {
  position: relative;
  z-index: 1;           /* imagem acima do blob */
  width: 600px;         /* tamanho desktop */
  justify-self: center;

}

/* Blobs gerais */
.blob-animate {
  position: absolute;
  border-radius: 50%;
  filter: blur(35px);
  z-index: 0; /* abaixo da imagem */
  animation: animateBlob 2s linear infinite;
}

/* Primeiro blob */
.blob-1 {
  width: 200px;
  height: 200px;
  top: 1.5rem;
  left: 1rem;
  background: linear-gradient(180deg, var(--first-color-alt) 20%, var(--first-color-light) 100%);
}

/* Segundo blob */
.blob-2 {
  width: 180px;
  height: 180px;
  bottom: 0.5rem;
  right: 1rem;
  background: linear-gradient(180deg, hsl(32,100%,60%) 20%, hsl(32,100%,75%) 100%);
}

/* Imagem da equipe */
.about__perfil {
  position: relative;
  z-index: 1; /* acima dos blobs */
  display: block;
  margin: 0 auto;
  width: 400px;
}

.about__shadow {
  position: absolute;
  width: 100%;
  height: 250px; /* aumenta para cobrir totalmente a parte inferior */
  bottom: -40px;
  left: 0;
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
  filter: blur(10px); /* suaviza o corte */
  z-index: 2; /* acima da imagem */
  pointer-events: none;
  height: 400px;
}

/* Animação genérica do blob */
@keyframes animateBlob {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*=============== BUTTON ================== */
.button{
  background-color: var(--body-color);
  border:3px solid var(--first-color);
  color: var(--title-color);
  padding: 1rem 2rem;
  box-shadow: 0 8px 32px hsl(32, 100%, 70%),
              inset 8px -8px 30px hsl(32, 100%, 50%);
  border-radius: 4rem;
  font-family: var(--second-font);
  font-weight: var(--font-semi-bold);
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  transition: box-shadow .4s;
}
.button i{
  font-weight: initial;
  font-size: 1rem;
}
.button:hover{
  box-shadow:0 8px 48px hsl(32, 100%, .7%),
              inset 8px -8px 30px hsl(32, 100%, 50%);
}

/*=============== PROJECTS ================== */

.projects__img{
  border-radius: 1.5rem;
  width: 100%;
  display: block;
  width: 100%;
  display: block;
  filter: grayscale(100%);       /* deixa preto e branco */
  transition: filter 0.5s ease, transform 0.3s ease;
  border-radius: 2rem;
}
.projects__image:hover .projects__img {
  filter: grayscale(0%);          /* colorida */
}

.projects .section__title{
  text-align: center;
  margin-left: 1.5rem;
}
.section__title{
  text-align: center;
  margin-bottom: 2rem;
}
.projects__title{
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.projects__subtitle {
  font-style: italic;
  font-weight: bold;
}
.projects__card{
  position:relative;
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: 3rem;
  overflow: hidden;
  max-width: 400px;
}

.projects__card .blob{
  z-index: 0;
  right: -7.75rem;
  bottom:0;
}

.projects__number, .projects__data, .projects__image{
  position: relative;
  z-index: 1;
}

.projects__button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background-color: var(--body-color);
  border: 3px solid var(--first-color);
  border-radius: 50%;
  color: var(--title-color);
  font-size: 2rem;
  position: absolute;
  top: .75rem;
  right: .75rem;
  opacity: 0;
  pointer-events: none;
  transition: box-shadow .4s, opacity .4s;
}

.projects__image{
  opacity: 1;
  pointer-events:initial;
    position: relative;
  z-index: 1;
}
.projects__image:hover .projects__button {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--first-color),
              0 0 30px var(--first-color),
              0 0 45px var(--first-color);
}

/* Ícone dentro do botão */
.projects__button i {
  font-size: 1.8rem;
  transition: transform 0.3s ease;
}

/* Hover do botão anima o ícone */
.projects__button:hover i {
  transform: scale(1.15);
}

.projects__number{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.projects__number h1{
  font-size: var(--biggest-font-size);
}

.projects__number h3{
  font-weight: var(--font-regular);
  font-size: var(--h3-font-size);
}

.projects__data{
  margin-block: 2rem;
}

.projects__description{
  font-size: var(--small-font-size);
}
.projects__container {
 
  padding: 1rem 1rem; /* mais espaço lateral */
  display: block;     /* evita o grid cortar o swiper */
}

/* Swiper ocupa toda a largura disponível */
.projects__swiper { 
  width:100%; 
  padding:1rem 0; 
  box-sizing:border-box; 
  padding-bottom: 5rem;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  bottom: 10px;
  width: 100%;
  z-index: 10;

}
.projects.swiper-pagination{
  bottom: 50px;
}
.projects.swiper-pagination{
  background-color: var(--first-color);
  color: #f4b807;
  transition: opacity .4s;
}
/* Faz as imagens se ajustarem ao card */
.projects__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}
/*=============== Concept ================== */
.work.section {
  padding-bottom: 5rem; /* espaço extra para scroll */
  position: relative;
}
.work__tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  background-color: var(--container-color);
  padding: 1rem 1.5rem;
  border-radius: 4rem;
  margin-bottom: 2rem; 
}

.work__button{
  background: none;
  color: var(--text-color);
  display: flex;
  align-items: center;
  column-gap: .5rem;
  font-size: var(--small-font-size);
  font-family: var(--second-font);
  cursor:pointer;
  transition: color .4s, transform 0.3s;
}

.work__button i{
  font-size: 1rem;
}
.work__button:hover{
color:var(--first-color)
}
/* hover apenas se NÃO estiver ativo */
.work__button:hover:not(.work-active) {
  color: var(--first-color); /* laranja */
}
/* Botão ativo (clicado) */
.work__button.work-active {
  color: var(--first-color);
  font-weight: bold;
}
.work__area{
  position: relative;
  padding-left:1rem;
}
.work__content{
  display: grid;
  row-gap: 4rem;
}
.work__card {
  display: grid;
  grid-template-columns: 1fr 1fr; /* duas colunas */
  gap: 2rem;
  align-items: center;
}
.work__data{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.work__data div {
  grid-column: 2;
  text-align: left;
}

/* Descrição sempre à direita */
.work__description {
  grid-column: 2;
  text-align: left;
}
.work__title{
  font-size: var(--h3-font-size);
  margin-bottom: .2rem;
}
.work__subtitle{
 margin-bottom: 1rem;
 font-size: var(--normal-font-size);
 font-weight: var(--font-regular);
 color: var(--first-color);
}

.work__line {
  width: 4px;
  height: 110%; /* aumenta o comprimento da linha */
    background: linear-gradient(
    180deg,
    rgba(255, 165, 0, 0) 0%,      /* começa transparente no topo */
    hsl(39, 100%, 50%) 15%,       /* entra o laranja */
    hsl(25, 100%, 50%) 100%       /* termina laranja mais escuro */
  );
  position: absolute;
  top: 1rem;              /* desce um pouco */
  left: 50%;              
  transform: translateX(-50%);
}
.work__year {
  font-size: var(--h2-font-size);
  font-weight: bold;
  color: var(--first-color);
  grid-column: 1;       
  text-align: right; 
  margin-right: .5rem;   
}

.work__line::after {
  content: '';
  width: 16px;
  height: 16px;
  background-color: hsl(39, 100%, 50%);
  border-radius: 50%;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
.work__content {
  display: grid;
  row-gap: 1.5rem; /* antes era 4rem, diminua para reduzir o espaço */
}

#planeamento.work__content {
  row-gap: 2.8rem; /* ajusta verticalmente apenas esses cards */
}

/*hide sections*/
.work__area [data-content] {
  display: none;
}

.work__content.work-active {
  display: grid;
}

/*Tab*/
.work__button {
  color: white; /* cor padrão dos não ativos */
  font-weight: normal;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.work__button.work-active {
  color: var(--first-color); /* texto laranja quando ativo */
  font-weight: bold;
}

/*=============== NEWS SERVICES ================== */

.services__container {
  row-gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

/* CARD */
.services__card {
  position: relative;
  background-color: var(--container-color);
  padding: 2rem 1.5rem;
  border-radius: 2rem;
  overflow: hidden;
  width: 320px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

/* BLOBS IGUAIS (para os dois cards) */
.services__card .blob,
.services__card .blob-2 {
  position: absolute;
  top: -7rem;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--first-color) 0%, var(--first-color-alt) 100%);
  filter: blur(60px);
  opacity: 0.9;
  z-index: 0;
}
.services__card .blob {
  left: -7rem;
}
.services__card .blob-2 {
  right: -7rem;
  left: auto;
}

/* ==== IMAGEM DE FUNDO (marca d’água) NOS CARDS ==== */

/* Estilo base — aplica a todos os cards */
.services__card {
  position: relative;
  background-color: var(--container-color);
  color: var(--title-color);
  overflow: hidden;
}

/* Imagem de fundo com efeito suave */
.services__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15; /* controla a intensidade da marca d’água */
  z-index: 0;
  transition: opacity 0.3s ease;
}

.services__card > * {
  position: relative;
  z-index: 1;
}

/* Imagem específica para cada card */
.services__card:nth-child(1)::before {
  background-image: url(../imagens/Kit.jpg); 
}

.services__card:nth-child(2)::before {
  background-image: url(../imagens/Participa.jpg); 
}

.services__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* camada leve de sombra */
  z-index: 0;
}

/* CONTEÚDO */
.services__data,
.services__info {
  position: relative;
  z-index: 1;
}

.services__title {
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 2rem;
  color: var(--title-color);
}

.services__container {
  margin-top: 2rem;
   display: grid;
  grid-template-columns: repeat(2, 480px);
}
.services__description {
  font-size: var(--normal-font-size);
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.services__subtitle {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color);
  margin-bottom: 0.75rem;
}

/* SKILLS */
.services__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.services__skills a {
  color: #ffffff;        /* deixa o texto branco */
  text-decoration: none; /* remove o sublinhado */ 
}

.services__skills > li {
  background-color: transparent;
  border: 1px solid var(--first-color);
  color: var(--title-color);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  letter-spacing: 0.2px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.services__skills > li:hover {
  transform: translateX(0.35rem);
  border-color: var(--first-color-alt); /* opcional: muda a borda ao hover */
  cursor: pointer;
}

/* BOTÃO */
.services__button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background-color: var(--body-color);
  border: 2px solid var(--first-color);
  border-radius: .5rem;
  font-size: 1.5rem;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  cursor: pointer;
  color: var(--title-color); 
}

.services__button i {
  transition: rotate .4s;
}
.services__button:hover {
  color: var(--first-color);
}

/* Services info */
.services__info {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
}

/* Card aberto */
.services-open .services__info {
  height: auto; 
  opacity: 1;
}

/* Card fechado */
.services__card.services-close .services__info {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 2rem; 
}

.services__button {
  bottom: 2.5rem;
}


.services-open .services__button i {
  rotate: -180deg;
}

/*=============== TESTIMONIALS  ================== */
.testimonials .section__title{
  text-align: initial;
  margin-left: 1.5rem;
}

.testimonials__container{
  position: relative;
  margin-inline: 0;
  overflow: hidden;
}

.testimonials__card{
  position:relative;
  background-color: var(--container-color);
  width: 320px;
  padding: 1.5rem 1rem 2.5rem;
  border-radius: 3rem;
  margin-inline: 1rem;
  text-align: center;
  overflow: hidden;
}

.testimonials__card .blob{
  z-index: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom:-12.5rem;
}

.testimonials__data{
  position: relative;
  z-index: 1;
}

.testimonials__img{
  width: 60px;
  border-radius: 50%;
  margin: 0 auto .5rem;
}

.testimonials__name{
  font-size: var(--normal-font-size);
  font-weight: var(--font-regular);
  margin-bottom: 1.5rem;
}

.testimonials__rating{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5rem;
  margin-bottom: .5rem;
}

.testimonials__star{
  display: flex;
  column-gap: .25rem;
}

.testimonials__star i{
  color: var(--title-color);
  font-size: 1rem;
}

.testimonials__number{
  font-size: var(--h3-font-size);
}

.testimonials__content{
  display: flex;
  width: max-content;
  animation: scroll 18s linear infinite;
}

.testimonials__reverse{
  flex-direction: row-reverse;
  animation-direction: reverse;
  animation-delay: -1s;
}

.testimonials__content:hover{
  animation-play-state: paused;
}
/* Animação de scroll */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* CONTACT*/
.contact__container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.contact__title {
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  padding-top: 10px;
}

.contact__title i {
  margin-right: 0.4rem;
  color: var(--first-color);
}

.icon--blob {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff7b00; 
  font-size: 1.3rem;
  margin-right: 0.5rem;
  z-index: 1;
}

#contact-button {
  display: block;
  margin: 1rem auto;
}

/* Centraliza o bloco das redes sociais */
.contact__social {
  text-align: center;
  margin-top: 1.5rem;
}

/* Ícones centralizados e espaçados */
.contact__links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.8rem;
}

/* Ícones com bolinhas */
.contact__link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 0, 0.1); /* leve fundo amarelo translúcido */
  color:  #FFD700;
  cursor: pointer;
  font-size: 1.3rem;
  transition: all 0.3s ease;
  transform: translateX(.35rem);
}

.contact__simbol{
  color: var(--first-color-alt);
}
/* Animação suave no hover */
.contact__link:hover {
  transform: scale(1.15);
}

/* Cores oficiais no hover */
.contact__link:hover .fa-facebook-f {
  color: #1877F2; /* azul Facebook */
}

.contact__link:hover .fa-instagram {
  color: #C13584; /* rosa Instagram */
}

.contact__link:hover .fa-linkedin-in {
  color: #0A66C2; /* azul LinkedIn */
}

.contact__link:hover .fa-whatsapp {
  color: #25D366; /* verde WhatsApp */
}

/*FORM*/
form {
  width: 100%;
  max-width: 30rem;
}

#contactos{
  align-items: center;
  padding-bottom: 2rem;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 70vh;
}

#section_contactos{
  font-size: 20px;
  margin-bottom: 1rem;
  color: var(--first-color-light);
  text-align: center;
}

label, input, textarea{
  display: block;
}

input, textarea {
  width: 100%;
  font: inherit;
  padding: 1.25rem;
  font-weight: 700;
}

.clic{
  display: block;
  width: 100%;
  font: inherit;
  padding: 1.25rem;
  font-weight: 700;
}

input, textarea {
  margin-bottom: 1rem;
  color: white;
  background: #323644;
  border: 0.125rem solid transparent;
  border-radius: 1.125rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:hover, input:focus, textarea:hover, textarea:focus {
  outline: none;
  border-color:var(--first-color);
  box-shadow: 0 0 0 0.3125rem #26344a;
}

label {
  margin-bottom: 0.5rem;
  color: #84868f;
}

textarea {
  min-height: 12.5rem;
  resize: vertical;
}

button {
  border: none;
  border-radius: 99px;
  color: white;
  background: #b6afaf;
  cursor: pointer;
  transition: 0.3s;
}

button:hover, button:focus {
  outline: none;
  background:var(--first-color-alt);
}

button:disabled {
  cursor: not-allowed;
  background: #555b69;
}

.contact__data {
  display: flex;           /* transforma em flex container */
  flex-direction: column;  /* título em cima, botão e logo embaixo */
  align-items: center;     /* centraliza horizontalmente todos os filhos */
  gap: 1.5rem;             /* espaço entre os elementos */
  width: 100%;             /* garante que o container ocupe toda a largura */
}

#contact-button{
  background-color:black;
  align-items: center;         /* centraliza verticalmente o ícone e o texto */
  justify-content: center;     /* centraliza o conteúdo do botão */
  gap: 0.5rem;                 /* espaço entre o texto e o ícone */
  text-align: center;          /* centraliza o texto dentro do botão */
}

.contact__button{
  cursor: pointer;
}

.contact__logo {
  width: 100%;             /* ocupa toda a largura do pai */
  display: flex;
  justify-content: center; /* centraliza o logo horizontalmente */
  margin-top: 1.5rem;
}

.contact__logo img {
  display: block;          /* remove espaços indesejados */
  width: 180px;            /* ajusta o tamanho do logo */
  height: auto;
  transition: transform 0.3s ease;
}

.contact__logo img:hover {
  transform: scale(1.05);
}

.contact__email{
  display: none;
}

/* LOCATION */
.map-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding-inline: 0.5rem; /* 🔸 espaçamento lateral */
  box-sizing: border-box;
}

.map-box {
  width: 100%;
  height: 180px; /* ajusta conforme quiseres */
  position: relative;
  filter: grayscale(100%) brightness(90%);
  border-radius: 1rem; 
  overflow: hidden;
}

.map-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*=============== FOOTER================== */
.footer{
  position: relative;
  padding-block: 4rem 2rem;
  text-align: center;
  row-gap: 1rem;
  overflow: hidden;
}

.footer .blob-animate{
  bottom: -3rem;
  right: -3rem;
}

.footer__copy{
  color: var(--title-color);
}

.footer__copy span{
  color: var(--first-color);
}

.footer__year span{
  font-family: var(--second-font);
}

/*=============== SCROLL BAR================== */
::-webkit-scrollbar {
  width: .6px;
  background-color: hsl(240, 6%, 12%);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(240, 6%, 20%);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{
  background-color: hsl(240, 6%, 24%);
}

/*=============== RESPONSIVE MOBILE ================== */
@media screen and (max-width: 768px){
  .nav__toggle { display: block; font-size: 2rem; cursor: pointer; z-index: 1001; color:#fff; }
  .nav__toggle:hover { color: var(--first-color); text-shadow: none; }
  .nav__menu{
    position: absolute; top: 100%; right: 0; background-color: var(--body-color);
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0; flex-direction: column; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000; width: 130px; min-width: 100px; max-width: 70vw;
  }
  .nav__menu.show { max-height: 500px; padding: 0.5rem 1rem; }
  .nav__list { flex-direction: column; gap: 1rem; }
}

/*=============== HOME ===============*/
.home { position: relative; }

.home__container{
  position: relative;
  padding-top: 4rem;
  row-gap: 3rem;
}

.home__data{
  position: relative; /* mobile-first */
  top: auto; left: auto; z-index: auto;
}

.home__greeting{
  font-size: var(--h2-font-size);
  font-weight: var(--font-regular);
  color: var(--first-color);
}

.home__name{ font-size: var(--biggest-font-size); }

.home__image{
  position: relative;
  display: grid;
  overflow: visible;
}

.home__image .blob-animate {
  position: absolute;
  z-index: -1; /* atrás da imagem */
  width: 200px;  /* tamanho maior para desktop */
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--first-color-alt) 20%, var(--first-color-light) 100%);
  filter: blur(35px);
  animation: animateBlob 5s linear infinite;
}

.home__perfil{ 
  justify-self: center; 
  width: 500px; 
}

.home__info{
  z-index: 2;
  bottom: -1rem;
  justify-self: center;
  position: relative;
  top: -1rem;             
}

.home__split{
  font-size: var(--h3-font-size);
  font-weight: var(--font-regular);
  color: var(--first-color);
}

.home__profession-1 .home__profession-2{
  font-size: var(--bigger-font-size);
  text-align: center;
  overflow: hidden;
}

.home__profession-1{
  position: relative;
  color: var(--first-color);
}

.home__profession-1::after{
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, hsl(0,0%,0%) 10%, hsla(0,0%,0%,0) 60%);
  position: absolute;
  top:0; left:0;
}

.home__profession-2{ transform: translateY(-0.8rem); }

.home__social{
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  z-index: 2;
}

.home__social-link{
  color: var(--title-color);
  font-size: 1.25rem;
  transition: transform 0.4s, color .4s;
}

.home__social-link:hover{
  color: var(--first-color);
  transform: translateX(.25rem);
}


/*=============== BREAKPOINTS ===============*/
/* MOBILE-FIRST */

@media screen and (max-width: 320px){
  .container{ margin-inline: auto; }
  .blob, .home__image .blob-animate{ width: 200px; height: 200px; }
}
  .projects__card{
    padding-inline: 1rem;
}

  .work__tabs{
    padding-inline: 1rem;
}
  .testimonials__card{
    width: 250px;
    padding: 2rem;
}

  .contact__logo {
  width: 100%;             
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.contact__logo img {
  display: block;          
  width: 180px;            
  height: auto;
  transition: transform 0.3s ease;
}

.contact__logo img:hover {
  transform: scale(1.05);
}
  .header {
    height: auto;
    padding-block: 0.1rem; 
  }

@media screen and (max-width: 540px){
  .container{ width: 460px; margin-inline: auto; }

    .about__container, .services__container{
      grid-template-columns: 1fr; /* coluna única */
      justify-content: center;    /* centraliza todo o conteúdo */
  }
}

  .about__data, .about__discription .section__title{
    text-align: center;
  }
  
  .about__data .button {
    display: inline-block;
    margin: 1rem auto 0 auto; /* centraliza o botão */
  }
  :is(.projects, .testimonials) .section__title{
    text-align: center;
    margin-left: 0;
  }
  .projects__card{
    width: 350px;
  }
  .projects__img{
    border-radius: 2rem;
  }
  .work__tabs {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .work__tabs .work__button {
    justify-self: center; 
  }
    .section__title {
    margin-bottom: 1.25rem; 
  }

    .map-section {
    padding-inline: 1.5rem;
  }

  .map-box {
    height: 220px;
  }

  .header {
  height: auto;
  padding-block: 0.1rem; 
  }

@media screen and (max-width: 768px){

   .header {
    height: auto;
    padding-block: 0.1rem; /* menos espaço vertical */
  }

  .contact__logo {
  width: 100%;             
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.contact__logo img {
  display: block;        
  width: 180px;            
  height: auto;
  transition: transform 0.3s ease;
}

.contact__logo img:hover {
  transform: scale(1.05);
}
    /* MENU */
  .nav__menu { display: none; }
  .nav__menu.show { display: block; }
  .nav__list { flex-direction: column; gap: 1rem; }

  /* Submenu */
  .has-submenu .submenu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: transparent;
    width: 100%;
    margin-top: 0.5rem;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .has-submenu:hover > .submenu,
  .has-submenu.submenu-open .submenu { display: block; }
    .home__container {
    padding-top: 8rem; /* dá mais respiro pro texto */
  }
    .section {
    padding-block: 3rem 2rem;
    }
    .container { 
    width: 100%; 
    max-width: 600px; 
    margin-inline: auto; 
    padding-inline: 1rem;
  }
    .about__container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0rem;
    box-sizing: border-box;
  }

  .about__data {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .about__data .section__title {
    text-align: center;
  }

  .about__description {
    text-align: center;
  }

  .button {
    display: block;
    margin: 1rem auto;
  }

  .about__image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: visible;
  }

  .about__perfil {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
  }
  .projects__img{
   border-radius: 2rem;
  }

  .work__title{
    font-size: var(__bigger-font-size);
  }

  .work.section {
  padding-bottom: 5rem; /* espaço extra para scroll */
  position: relative;
}
  .work__tabs {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    background-color: var(--container-color);
    padding: 1rem 1.5rem;
    border-radius: 4rem;
    margin-bottom: 2rem; 
  }

  .work__button{
    background: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--small-font-size);
    font-family: var(--second-font);
    cursor:pointer;
    transition: color .4s, transform 0.3s;
  }

  .work__button i{
    font-size: 1rem;
  }
  .work__button:hover{
  color:var(--first-color)
  }
  /* hover apenas se NÃO estiver ativo */
  .work__button:hover:not(.work-active) {
    color: var(--first-color); /* laranja */
  }
  /* Botão ativo (clicado) */
  .work__button.work-active {
    color: var(--first-color);
    font-weight: bold;
  }
  .work__area{
    position: relative;
    padding-left:0rem;
    display: flex;
    justify-content: center;
  }
  .work__content{
    display: grid;
    row-gap: 4rem;
  }
  .work__card {
    display: grid;
    grid-template-columns: 1fr 1fr; /* duas colunas */
    gap: 2rem;
    align-items: center;
  }
  .work__data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .work__data div {
    grid-column: 2;
    text-align: left;
  }

  /* Descrição sempre à direita */
  .work__description {
    grid-column: 2;
    text-align: left;
  }
  .work__title{
    font-size: var(--h3-font-size);
    margin-bottom: .2rem;
  }
  .work__subtitle{
  margin-bottom: 1rem;
  font-size: var(--normal-font-size);
  font-weight: var(--font-regular);
  color: var(--first-color);
  }

  .work__line {
    width: 4px;
    height: 110%; /* aumenta o comprimento da linha */
      background: linear-gradient(
      180deg,
      rgba(255, 165, 0, 0) 0%,      /* começa transparente no topo */
      hsl(39, 100%, 50%) 15%,       /* entra o laranja */
      hsl(25, 100%, 50%) 100%       /* termina laranja mais escuro */
    );
    position: absolute;
    top: 1rem;              /* desce um pouco */
    left: 50%;              
    transform: translateX(-50%);
  }
  .work__year {
    font-size: var(--h2-font-size);
    font-weight: bold;
    color: var(--first-color);
    grid-column: 1;       
    text-align: right; 
    margin-right: .5rem;   
  }

  .work__line::after {
    content: '';
    width: 16px;
    height: 16px;
    background-color: hsl(39, 100%, 50%);
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
  }
  .work__content {
    display: grid;
    row-gap: 1.5rem; /* antes era 4rem, diminua para reduzir o espaço */
  }

  #planeamento.work__content {
    row-gap: 2.8rem; /* ajusta verticalmente apenas esses cards */
  }

  /*hide sections*/
  .work__area [data-content] {
    display: none;
  }

  .work__content.work-active {
    display: grid;
  }

  /*Tab*/
  .work__button {
    color: white; /* cor padrão dos não ativos */
    font-weight: normal;
    transition: color 0.3s ease, font-weight 0.3s ease;
  }

  .work__button.work-active {
    color: var(--first-color); /* texto laranja quando ativo */
    font-weight: bold;
  }
   .services__card {
    width: 100%;
    min-height: auto;
    padding: 1.5rem;
  }

  .services__card .blob,
  .services__card .blob-2 {
    width: 200px;
    height: 200px;
    top: -6rem;
    filter: blur(40px);
  }

  .services__title {
    font-size: 1.1rem;
  }

  .services__description {
    font-size: 0.9rem;
  }

.services__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center;
  gap: 2rem 4rem; /* row-gap column-gap */
  }

.services__info {
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
  }

  .testimonials__container::before,
  .testimonials__container::after {
    width: 8%; /* sombra mais estreita */
    height: 100%;
    z-index: 1;
  }

  /* sombra esquerda */
  .testimonials__container::after {
    left: 0;
    background: linear-gradient(90deg, hsla(0,0%,0%,0.2) 0%, hsla(0,0%,0%,0) 100%);
  }

  /* sombra direita */
  .testimonials__container::before {
    right: 0;
    background: linear-gradient(270deg, hsla(0,0%,0%,0.2) 0%, hsla(0,0%,0%,0) 100%);
  }
}
  
/* DESKTOP e telas grandes */
@media screen and (min-width: 1150px){
  :root{
    --biggest-font-size: 3rem;
    --bigger-font-size: 2rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }

  .home__data{
    position: absolute;
    top: 5rem;
    left: 1rem;
    z-index: 2;
    margin-right: 5rem;
  }

  .home__image,
  .home__image .blob-animate{
    justify-self: center;
  }

  .home__image .blob-animate{
    width: 300px;
    height: 600px;
  }
  .home__perfil {
    width: 600px; /* mantém tamanho maior */
  }

  .home__info{
    position: absolute;
    top: 10rem;
    right: 1rem;
    z-index: 2;
     margin-left: 5rem;
  }

  .home__split{
    font-size: var(--h2-font-size);
  }

  .home__profession-1{
      font-size: var(--biggest-font-size);
      text-align: initial;
  }
    .home__profession-2{
      font-size: var(--biggest-font-size);
      transform: translateY(-1.5rem);
  }
    .home__social{
      bottom: 3rem;
      row-gap: 1.5rem;
      margin-top: 5rem;
      padding-left: 10rem;
  }
   .home__social-link{
    font-size: 1.5rem;
  }
    .about__container{
      grid-template-columns: repeat(2, 500px);
      align-items: center;
      column-gap: 5.5rem;
      padding-top: 2rem;
      position: relative;
  }

  .about__image {
    position: relative;
    z-index: 1; /* imagem e blobs ficam abaixo da sombra */
    width: 600px;
    order:-1
  }

  .about__perfil {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

  .about__image .blob-animate{
    width: 200px;
    height: 200px;
    filter:blur(50px)
  }

  .about__image .blob-animate:nth-child(1){
    left: 4rem;
    top:4rem;
  }
  .about__image .blob-animate:nth-child(2){
    right: -1rem;
    bottom:3rem;
  }

  .about__shadow{
    height: 480px;
  }
  .projects{
    padding-block: 9rem 4rem;
  }
  .projects__swiper{
    padding-bottom: 5rem;
  } 
  .projects__container{
    max-width: 1380px;
  }
  .projects__card{
    padding: 2.5rem;
    border-radius: 4rem;
    max-width: 440px; 
    width: auto !important;
  }
  .projects__swiper {
  overflow: hidden;
}
  .projects__subtitle, .projects__description{
    font-size: var(--normal-font-size);
  }
  .projects__img{
    border-radius: 2rem;
  }
  .projects__button{
    top: 1.5rem;
    right: 1.5rem;
  }
  .work__card{
    grid-template-columns: repeat(2, 450px);
    column-gap: 9rem;
  }
 .work__title{
  font-size: var(--h2-font-size);
 }
  .work__subtitle .work__description{
  font-size: var(--h2-font-size);
 }
 
 .services__container {
    display: grid; /* usa grid para facilitar largura fixa dos cards */
    grid-template-columns: repeat(2, 480px); /* cards mais largos */
    justify-content: center;
    column-gap: 4rem;
    row-gap: 3rem;
  }
 .services__card {
    width: 455px; /* maior em telas grandes */
    padding: 3rem;
    border-radius: 4rem;
  }

 .services__title{
  font-size: var(--h2-font-size);
  margin-bottom: 1rem;
 }
 .services__button{
  right: 2rem;
  bottom: 2rem;
 }
  .section{
  padding-block: 7rem 2rem;
 }
  .services__title{
    margin-bottom: 4rem;
  }
  .blob{
    width: 300px;
    height: 300px;
  }

  .testimonials__container{
    row-gap: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1380px; /* igual aos projetos */
    margin: 0 auto;
    overflow: hidden;
  }

    .testimonials__content {
      display: flex;
      width: 200%; /* força a faixa de testemunhos a ocupar mais largura */
      justify-content: flex-start;  
  }

    .testimonials__container::after, .testimonials__container::before{
      content: '';
      position: absolute;
      top: 0;
      width: 20%;
      height: 100%;
  }
  .testimonials__container::after{
    left: 0;
    background: linear-gradient(90deg,
      hsl(0,0%,0%) 0%,
      hsla(0,0%,0%,0) 100%); 
  }
  .testimonials__container::before{
    right: 0;
    z-index: 1;
    background: linear-gradient(270deg,
      hsl(0,0%,0%) 0%,
      hsla(0,0%,0%,0) 100%);
  }

  .testimonials__card{
    width: 370px;
    padding: 3rem 2rem;
    border-radius: 4rem;
    flex-shrink: 0;
  }

  .testimonials__number{
    font-size: var(--normal-font-size);
  }

  .contact__container.grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem; /* espaço entre colunas */
    width: 70%;
    margin: 0 auto;
  }

  .contact__data,
  #contactos {
    flex: 1; /* cada coluna ocupa metade do container */
  }

  #contact-button {
    margin: 0 auto 2rem auto; /* centralizado horizontalmente */
  }

  .contact__social {
    margin-top: 1rem;
  }
  .map-section {
    padding-inline: 6rem; /* padding maior em desktop */
  }

  .map-box {
    height: 250px;
  }
}