/* Reset muito simples para tirar margens padrão */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Corpo da página */
body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #ffffff;
  color: #111827;
  margin: 0;
}

/* Para limitar a largura do conteúdo e centrar (tipo container do Figma) */
.container {
  max-width: 1248px; /* igual ao que vês no Figma no centro */
  margin: 0 auto;
  padding: 0 16px;
}

/* Navegação simples (vamos refinar depois com Dev Mode se quiseres) */
.site-header {
  background: #0b4dff; /* placeholder, mais tarde copiamos a cor exacta do Figma */
  color: #ffffff;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.nav-logo {
  font-weight: 600;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 24px;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

/* === HERO SECTION === */

/* Coluna de texto */
.hero-content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* As três frases do hero */
.hero-line {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.hero-line-1 {
  font-weight: 600;
}

/* Bloco de destaques (horário, morada, telefone) */
.hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.hero-highlight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-highlight-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent; /* bolinha escura atrás do ícone */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-highlight-text {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Botões */
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease,
    color 0.1s ease, border-color 0.1s ease;
}

.btn-primary {
  background: #ffffff;
  color: #155dfc;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
}

.btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Coluna da imagem */
.hero-image {
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 32px;
  display: block;
  object-fit: cover;
}

/* Footer básico */
.site-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: 14px;
  color: #6b7280;
  background: #f3f4f6;
}
/* === SERVICES SECTION === */

/* Isto vem do frame "Services" + os valores que vimos: 680px, 16px, 64px, #F9FAFB */
.services {
  background: #f9fafb;
  padding: 76px 0; /* 76px top/bottom, como os valores vermelhos que apareciam */
}

.services-inner {
  display: flex;
  flex-direction: column;
  gap: 64px; /* mesmo gap que viste no Dev Mode */
}

/* Cabeçalho da secção */
.services-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.services-header h2 {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 20px;          /* 30px de altura total ≈ 20px de texto com line-height 1.5 */
  font-weight: 400;         /* no Figma o Heading 3 está a 400, mantemos coerência */
  line-height: 1.5;
  color: #0a0a0a;           /* cor do Heading 3 que enviaste (#0A0A0A) */
  margin-bottom: 8px;
}

.services-header p {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;      /* 150% como no Figma */
  color: #4a5565;         /* cor exata que enviaste (#4A5565) */
  margin: 0;
}

/* Grid dos cartões */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas */
  gap: 24px; /* mais tarde afinamos com o valor exato */
}

/* Cada cartão individual */
.service-card {
  width: 100%; /* deixamos o grid controlar a largura, em vez de fixar 394.656px */
  min-height: 236px; /* altura mínima igual ao Figma */
  background: #ffffff;
  border-radius: 14px; /* exato do Figma */
  padding: 24px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1); /* igual ao Figma */
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* Ícone do cartão */
.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
}

/* Título do cartão */
.service-card h3 {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;        /* como no Figma */
  line-height: 24px;       /* 150% */
  color: #0a0a0a;
  margin: 8px 0 4px 0;
}

/* Texto do cartão */
.service-card p {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;       /* 150% */
  color: #4a5565;
  margin: 0;
}
/* === HERO + NAVIGATION (layout igual ao Figma) === */

.hero {
  background: linear-gradient(135deg, #155dfc 0%, #193cb8 100%);
  color: #ffffff;
  padding: 0;
}

/* Frame principal do Hero em Figma: width 1432, height 708, padding 24px 92px 0 92px, gap 120 */
.hero-inner {
  max-width: 1432px;
  margin: 0 auto;
  padding: 8px 92px 70px 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  min-height: 708px;
}

/* NAVIGATION */

.nav {
  display: flex;
  height: 48px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.nav-left {
  display: flex;
  width: 166.219px;
  height: 48px;
  align-items: center;
  gap: 12px;
}

/* "Tanque da Vila" */
.nav-logo {
  color: #ffffff;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

/* Links Serviços / Preços / Localização / Contactos */
.nav-links {
  display: flex;
  width: 351.328px;
  height: 24px;
  align-items: flex-start;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: flex;
  padding-bottom: 2px;
  justify-content: flex-end;
  align-items: center;
  color: #ffffff;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-decoration: none;
}

/* CONTAINER SEGUNDO: texto + imagem */

.hero-body {
  display: flex;
  height: 420px;
  justify-content: center;
  align-items: center;
  gap: 48px;
  align-self: stretch;
}

/* Coluna de texto */
.hero-content {
  display: flex;
  width: 600px;
  height: 420px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

/* Bloco dos 3 parágrafos */
.hero-text-block {
  display: flex;
  height: 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Todas as 3 linhas do texto principal */
.hero-line {
  color: #dbeafe;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
}

/* Destaques (horário, morada, telefone) */
.hero-highlights {
  display: flex;
  height: 104px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.hero-highlight {
  display: flex;
  height: 24px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.hero-highlight-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-highlight-text {
  display: flex;
  padding-bottom: 2px;
  justify-content: flex-end;
  align-items: center;
  color: #ffffff;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

/* Botões */

.hero-actions {
  display: flex;
  height: 52px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.btn {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 30px 16px 30px;
  border-radius: 10px;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  border: 2px solid transparent;
}

/* Botão "Ver Preços" */
.btn-primary {
  background: #ffffff;
  color: #155dfc;
  border-color: #ffffff;
}

/* Botão "Direções" */
.btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* Coluna da imagem */

.hero-image {
  display: flex;
  width: 600px;
  height: 400px;
  flex-direction: column;
  align-items: flex-start;
}

.hero-image-frame {
  height: 400px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === PRICING SECTION === */

.pricing {
  background: #ffffff;
}

.pricing-inner {
  max-width: 1432px;
  margin: 0 auto;
  padding: 80px 92px 0 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}

/* Cabeçalho (título + frase) */

.pricing-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  text-align: center;
}

.pricing-header h2 {
  display: flex;
  height: 30px;
  align-items: center;
  color: #0a0a0a;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 150% */
  margin: 0;
}

.pricing-header p {
  display: flex;
  height: 24px;
  align-items: center;
  color: #4a5565;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

/* Grid: 2 colunas para os 2 cartões */

.pricing-grid {
  display: grid;
  height: 554px;
  row-gap: 48px;
  column-gap: 48px;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cartões base */

.pricing-card {
  display: flex;
  padding: 33px 33px 1px 33px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 16px;
  background: #ffffff;
}

/* Esquerda: lavar roupa */
.pricing-card-wash {
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

/* Direita: secar roupa */
.pricing-card-dry {
  border: 1px solid #f3e8ff;
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
}

/* Títulos dos cartões */

.pricing-card-header {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.pricing-card-wash .pricing-card-header h3 {
  color: #155dfc;
}

.pricing-card-dry .pricing-card-header h3 {
  color: #9810fa;
}

.pricing-card-header h3 {
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

/* Corpo dos cartões (lista de preços) */

.pricing-card-body {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Cada linha de preço */

.pricing-item {
  display: flex;
  height: 76px;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.pricing-item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pricing-item-title {
  color: #0a0a0a;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

.pricing-item-subtitle {
  color: #4a5565;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.pricing-item-price {
  color: #155dfc;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
}

/* Preços roxos no cartão da secagem */

.pricing-card-dry .pricing-item-price {
  color: #9810fa;
}

/* Bloco "O que está incluído" */

.pricing-included {
  margin-top: 16px;
}

.pricing-included h4 {
  margin: 0 0 8px 0;
  color: #0a0a0a;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.pricing-included ul {
  margin: 0;
  padding-left: 20px;
  color: #4a5565;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

/* Banner de campanha em baixo */

.pricing-promo {
  height: 256px;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
}

.pricing-promo-image {
  width: 100%;
  height: 100%;
  background: url("../assets/pricing-promo.png") center / cover no-repeat;
}

.pricing-promo-overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(28, 57, 142, 0.8) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  align-items: center;
}

.pricing-promo-content {
  width: 429.188px;
  max-width: 100%;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-promo-content h3 {
  color: #ffffff;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

.pricing-promo-content p {
  color: #dbeafe;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

.btn.btn-promo {
  margin-top: 8px;
  padding: 6px 33px 10px 33px;
  border-radius: 10px;
  background: #ffffff;
  color: #155dfc;
  font-family: "Arimo", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  border: none;
}

/* SECÇÃO LOCATION (root) – Secção Location */
.location-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;               /* gap entre header e grid */
  width: 1280px;
  height: 830px;
  padding: 0 16px;
  margin: 0 auto;          /* centra na página */
  border: none;  /* como no Figma */
  background: transparent;
  box-sizing: border-box;
  font-family: "Arimo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Container 1 – header (título + parágrafo) */
.location-header {
  display: flex;
  padding-top: 14px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  align-self: stretch;
}

/* Heading – 20px, 150% */
.location-heading {
  display: flex;
  height: 30px;
  padding-bottom: 3px;
  justify-content: center;
  align-items: center;
  color: #0A0A0A;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 150% */
  margin: 0;
}

/* Paragraph abaixo do heading */
.location-description {
  display: flex;
  height: 24px;
  padding: 0 77.641px 2px 79.359px;
  justify-content: center;
  align-items: center;
  color: #4A5565;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

/* Container 2 – grid 2 colunas (esquerda / direita) */
.location-grid {
  display: grid;
  height: 696px;
  row-gap: 48px;
  column-gap: 48px;
  flex-shrink: 0;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Container 2.1 – coluna esquerda */
.location-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  justify-self: stretch;
}

/* ---------- BLOCO HORÁRIO (2.1.1) ---------- */

.location-hours-block {
  display: flex;
  height: 120px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* Heading do horário */
.location-hours-title {
  display: flex;
  padding: 0 410px 2px 0;
  align-items: center;
  align-self: stretch;
  color: #0A0A0A;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

/* Cartão branco do horário (2.1.1.2) */
.location-hours-card {
  display: flex;
  height: 72px;
  padding: 24px 24px 0 24px;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 14px;
  background: #FFFFFF;
  box-sizing: border-box;
}

/* Linha com “Todos os dias” + “6:30 - 23:30” */
.location-hours-row {
  display: flex;
  height: 24px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
}

/* Texto cinzento – Text 1 */
.location-hours-label {
  display: flex;
  padding-bottom: 2px;
  justify-content: center;
  align-items: center;
  color: #364153;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

/* Texto azul – Text 2 */
.location-hours-value {
  display: flex;
  padding-bottom: 2px;
  justify-content: center;
  align-items: center;
  color: #155DFC;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

/* ---------- BLOCO CONTACTOS (2.1.2) ---------- */

.location-contacts-block {
  display: flex;
  height: 308px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* Heading “Informações de Contacto” */
.location-contacts-title {
  display: flex;
  padding: 0 421px 2px 0;
  align-items: center;
  align-self: stretch;
  color: #0A0A0A;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

/* Cartão branco com 3 linhas (2.1.2.2) */
.location-contacts-card {
  display: flex;
  height: 260px;
  padding: 24px 24px 0 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 14px;
  background: #FFFFFF;
  box-sizing: border-box;
}

/* Linha individual (morada / telefone / email) */
.location-contact-row {
  display: flex;
  height: 76px;      /* 1ª linha do Figma; as seguintes ocupam 52px mas podemos manter 76 para simplicidade */
  flex-shrink: 0;
  align-self: stretch;
  gap: 12px;
}

/* Ícone da linha */
.location-contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Texto da linha (título + 1 ou 2 linhas) */
.location-contact-text {
  display: flex;
  width: 213.594px;    /* como no Figma */
  height: 76px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Título (Morada / Telefone / Email) */
.location-contact-title {
  display: flex;
  padding: 0 156.594px 2px 0; /* para morada; telefone/email ajustam visualmente mas deixamos igual */
  align-items: center;
  align-self: stretch;
  color: #0A0A0A;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

/* Bloco de linhas abaixo do título (morada) */
.location-contact-line,
.location-contact-link {
  color: #4A5565;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

/* Links (telefone / email) */
.location-contact-link {
  text-decoration: none;
}

.location-contact-link:hover {
  text-decoration: underline;
}

/* ---------- COLUNA DIREITA (2.2 – mapa) ---------- */

.location-right {
  display: flex;
  padding-bottom: 24px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  justify-self: stretch;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.10),
    0 4px 6px -4px rgba(0, 0, 0, 0.10);
  box-sizing: border-box;
}

/* Botão “Ver no mapa” */
.location-map-button {
  display: flex;
  height: 48px;
  padding: 10px 0 14px 0;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #155DFC;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-decoration: none;
  width: 100%;
  max-width: 200px;
  margin-top: 16px;
}

/* Moldura do iframe (600x600) */
.location-map-frame {
  width: 600px;
  height: 600px;
  background: #E5E7EB;
  overflow: hidden;
  border-radius: 10px;
}

/* iFrame em si */
.location-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 1) Títulos em linha única --- */
/* Horário de Funcionamento + Informações de Contacto */
.location-hours-title,
.location-contacts-title {
  padding: 0 0 2px 0;   /* tira o padding-right gigante */
  white-space: nowrap;  /* impede quebra de linha */
}

/* --- 2) Espaçamento uniforme entre Morada / Telefone / Email --- */

/* Cartão de contactos mantém o gap vertical de 16px entre linhas */
.location-contacts-card {
  gap: 16px;            /* já existia, mas reforçamos aqui */
}

/* Cada linha (Morada, Telefone, Email) */
.location-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: auto;         /* deixa a altura ser definida pelo conteúdo */
}

/* Texto de cada linha */
.location-contact-text {
  width: auto;          /* deixa crescer naturalmente */
  height: auto;         /* idem */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;             /* título vs linhas / link */
}

/* Títulos Morada / Telefone / Email sem aquele padding-right enorme */
.location-contact-title {
  padding: 0 0 2px 0;
}

/* Aumentar espaço acima da secção Localização */
.location-section {
  margin-top: 80px; /* ajusta o valor ao teu gosto */
  border: none !important; /* remove o risco preto */
  margin-bottom: 80px;
}

.location-band {
  width: 100%;              /* ocupa a largura toda da página */
  background: #F9FAFB;      /* cinzento do Figma */
  margin-top: 80px;        /* o espaçamento extra que tinhas posto antes */
  padding-top: 2px;     /* AUMENTA o espaço superior antes do título */
  padding-bottom: 10px; /* ESTE é o espaço cinzento */
}

/* Import da fonte (se ainda não tiveres) */
@import url("https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap");

/* Secção Footer */
.footer{
  display: flex;
  width: 1280px;
  height: 229px;
  padding: 0 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  background: #101828;
  font-family: Arimo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Container 1 (grid) */
.footer-grid{
  display: grid;
  height: 144px;
  row-gap: 32px;
  column-gap: 32px;
  flex-shrink: 0;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Colunas base */
.footer-col{
  align-self: stretch;
  justify-self: stretch;
}

/* Container 1.1 */
.footer-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}

/* Container 1.1.1 */
.footer-brand-row{
  display: flex;
  height: 48px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

/* Text wrap (padding-bottom:2) */
.footer-brand-title-wrap{
  display: flex;
  padding-bottom: 2px;
  justify-content: flex-end;
  align-items: center;
}

/* Texto 1.1 */
.footer-brand-title{
  color: #FFF;
  font-family: Arimo;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

/* Paragraph wrap */
.footer-brand-desc-wrap{
  display: flex;
  padding-right: 21px;
  align-items: center;
  align-self: stretch;
}

/* Texto 2.1 (width 267px) */
.footer-brand-desc{
  width: 267px;
  margin: 0;
  color: #99A1AF;
  font-family: Arimo;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

/* Container 1.2 */
.footer-links{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
}

/* Heading 4 */
.footer-heading{
  height: 24px;
  align-self: stretch;
  margin: 0;
  color: #FFF;
  font-family: Arimo;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

/* List 1 */
.footer-list{
  display: flex;
  height: 104px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items (mantendo altura 20px) */
.footer-list-item{
  display: flex;
  height: 20px;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
}

/* Link base */
.footer-link{
  display: flex;
  height: 19px;
  align-items: flex-start;
  color: #D1D5DC;
  font-family: Arimo;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.footer-link:hover{
  text-decoration: underline;
}

/* Container 1.3 */
.footer-contact{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
}

/* Lista 1 (2 linhas) */
.footer-mini-list{
  display: flex;
  height: 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.footer-mini-item{
  display: flex;
  height: 20px;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  flex: 1 0 0;

  color: #D1D5DC;
  font-family: Arimo;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.footer-mini-item-accent{
  color: #51A2FF;
}

/* Container 1.4 */
.footer-social{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  grid-row: 1 / span 1;
  grid-column: 4 / span 1;
}

/* Container 1.4.1 */
.footer-social-row{
  display: flex;
  height: 40px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Botões sociais */
.footer-social-btn{
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 33554400px;
  background: #1E2939;
  text-decoration: none;
}

.footer-social-btn svg{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Container 2 */
.footer-bottom{
  display: flex;
  height: 53px;
  padding-top: 33px;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
}

/* Paragraph do copyright */
.footer-copy{
  display: flex;
  height: 20px;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;

  color: #99A1AF;
  text-align: center;
  font-family: Arimo;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
/* Wrapper full width (fundo de ponta a ponta) */
.footer-full{
  width: 100%;
  background: #101828;
}

/* O teu .container global já centra e dá padding lateral */
.container{
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 16px;
}

/* O footer “interno” mantém o layout do Figma */
.footer{
  display: flex;
  height: 229px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  background: transparent; /* IMPORTANTE: fundo fica no .footer-full */
  font-family: Arimo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* grid e resto do CSS mantém igual ao anterior */
.footer-grid{
  display: grid;
  height: 144px;
  row-gap: 32px;
  column-gap: 32px;
  flex-shrink: 0;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer-col{ align-self: stretch; justify-self: stretch; }

/* …mantém aqui TODO o resto do CSS que eu te dei (brand, lists, social, bottom, etc.) */