/* Fonte personalizada - adicionar depois em /fonts */
@font-face {
  font-family: 'BlauerNueBoldItalic';
  src: url('fonts/BlauerNue-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'BlauerNueThinItalic';
  src: url('fonts/BlauerNue-ThinItalic.ttf') format('truetype');
}

:root {
  --primary:#67695c;
  --bg:#0b0c10;
  --bg-alt:#141518;
  --text:#e9ecf1;
}

body {
  margin:0;
  font-family:'BlauerNueThinItalic', sans-serif;
  background:var(--bg);
  color:var(--text);
}
h1,h2,h3 {
  font-family:'BlauerNueBoldItalic', sans-serif;
}
.container {width:90%; max-width:1100px; margin:auto;}
.section {padding:60px 0;}
.section.alt {background:var(--bg-alt);}
.section.highlight {background:#1c1d22;}

.site-header {background:#111; padding:12px 0; position:sticky; top:0;}
.flex {display:flex; gap:20px;}
.center-v {align-items:center;}
.between {justify-content:space-between;}
.logo {height:40px;}
.nav a {margin:0 10px; color:var(--text); text-decoration:none;}
.nav a.btn {background:var(--primary); padding:8px 12px; border-radius:6px; color:#fff;}
.btn-equipa {
  display: inline-block;
  padding: 12px 20px;
  background-color: #67695c; /* cor base */
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: 0.3s;
}

.btn-equipa:hover {
  background-color: #4d4f45; /* tom mais escuro no hover */
}

.hero {padding:80px 0;}
.grid-2 {display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.hero-img {border-radius:12px; width:100%;}
.highlight {color:var(--primary);}

.cards {display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card {background:#222; padding:20px; border-radius:10px;}

.testimonials {display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.testimonial {background:#222; padding:20px; border-radius:10px;}

.form-wrap {display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.form-card {background:#222; padding:20px; border-radius:10px;}
.field {margin-bottom:15px; display:flex; flex-direction:column;}
input {padding:10px; border-radius:6px; border:none;}

.btn {display:inline-block; padding:12px 20px; border-radius:6px; background:var(--primary); color:#fff; text-align:center; cursor:pointer;}
.btn.full {width:100%;}

.pricing {display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.price-card {background:#222; padding:10px; border-radius:10px; text-align:center;}
.price {font-size:1.0rem; color:var(--primary);}

.site-footer {background:#111; text-align:center; padding:20px;}
footer {
  background-color: #67695c;
  color: white;
  text-align: center;
  padding: 20px;
}

footer a {
  color: #FFD700; /* amarelo ouro para destacar */
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}
.contact-section {
  padding: 60px 20px;
  text-align: center;
  background-color: #222; /* fundo da secção */
  color: white;
}

.contact-form {
  max-width: 400px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.contact-form button {
  padding: 12px;
  background-color: #67695c; /* cor base da tua paleta */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background-color: #55574b;
}
/* =======================
   RESPONSIVIDADE MOBILE
   ======================= */

/* Tablets e ecrãs médios */
@media (max-width: 992px) {
  header nav ul {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .hero {
    padding: 40px 20px;
    text-align: center;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .planos {
    grid-template-columns: 1fr 1fr; /* 2 colunas em tablets */
    gap: 20px;
  }
}

/* Telemóveis */
@media (max-width: 768px) {
  /* Menu */
  header nav ul {
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }

  /* Títulos */
  h1, h2, h3 {
    font-size: 1.5rem;
    text-align: center;
  }

  /* Secção Equipa */
  .equipa {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .equipa .membro {
    width: 100%;
    margin-bottom: 20px;
  }

  .equipa img {
    max-width: 200px;
    border-radius: 50%;
    margin-bottom: 10px;
  }

  /* Planos (ficam em coluna) */
  .planos {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .planos .plano {
    width: 100%;
    text-align: center;
  }

  /* Formulário de contacto */
  form {
    width: 100%;
    padding: 10px;
  }

  form input,
  form textarea,
  form button {
    width: 100%;
    font-size: 1rem;
  }

  /* Footer */
  footer {
    text-align: center;
    padding: 20px;
  }
}

/* Ecrãs muito pequenos (tipo iPhone SE) */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.3rem;
  }

  .hero p {
    font-size: 1rem;
  }

  button, a.button {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}
/* Ajustes para tablets e telemóveis */
@media (max-width: 992px) {
  /* Container centralizado */
  .container {
    width: 95%;
    margin: auto;
  }

  /* Hero (banner inicial) */
  .hero {
    text-align: center;
    padding: 40px 20px;
  }
  .hero h1 {
    font-size: 2rem; /* mantém estilo mas ajusta tamanho */
  }
  .hero p {
    font-size: 1rem;
  }

  /* Equipa: fotos ficam em coluna */
  .equipa {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .equipa .membro {
    width: 100%;
    margin-bottom: 30px;
  }
  .equipa img {
    max-width: 250px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
  }

  /* Planos: 1 por linha */
  .planos {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .planos .plano {
    width: 100%;
    text-align: center;
  }

  /* Formulário */
  form {
    width: 100%;
  }
  form input,
  form textarea,
  form button {
    width: 100%;
    font-size: 1rem;
  }

  /* Footer */
  footer {
    text-align: center;
    padding: 20px;
  }
}

/* Ecrãs muito pequenos (tipo iPhone SE) */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  button, a.button {
    font-size: 0.9rem;
    padding: 10px 16px;
  }
}
/* ====== PLANOS MOBILE ====== */
@media (max-width: 768px) {
  .planos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
  }

  .plano {
    width: 100%;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background: #1a1a1a; /* fundo igual ao desktop */
  }

  .plano h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .plano p {
    font-size: 0.95rem; /* texto mais pequeno no mobile */
    line-height: 1.4;
  }
}

/* ====== EQUIPA MOBILE ====== */
@media (max-width: 768px) {
  .equipa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 20px 10px;
  }

  .membro {
    width: 100%;
    text-align: center;
  }

  .membro img {
    max-width: 220px;
    margin-bottom: 10px;
    border-radius: 50%; /* foto redonda para estilo mais clean */
  }

  .membro h3 {
    margin: 10px 0 5px 0;
    font-size: 1.2rem;
  }

  .membro p {
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0 15px;
  }
}
/* ===== HEADER BASE ===== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #000;
  position: relative;
  z-index: 1000;
}

.logo img {
  max-height: 50px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}

.cta {
  background: #67695c;
  padding: 8px 12px;
  border-radius: 5px;
}

/* ===== MENU TOGGLE ===== */
.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 2rem;
  color: #fff;
}

/* ===== CLOSE BUTTON ===== */
.close-menu {
  display: none;
  font-size: 2rem;
  color: #fff;
  text-align: right;
  padding: 10px 20px;
  cursor: pointer;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  nav {
    display: none;
  }

  nav.active {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #111;
    padding: 10px 0 20px 0;
  }

  nav ul {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .menu-toggle {
    display: block;
  }

  .close-menu {
    display: block;
  }
}