/* =============================================================
   MOGlobal — Stylesheet
   -------------------------------------------------------------
   Sumário:
   1. Tokens de design (cores, espaçamento, tipografia)
   2. Reset e base
   3. Tipografia
   4. Layout (container, grid, secção)
   5. Componentes (botões, formulário, nav)
   6. Header
   7. Hero
   8. About
   9. Services
   10. Contact
   11. Footer
   12. Páginas legais (privacy.html / terms.html)
   13. Responsive (≤960px tablet, ≤640px mobile)
   14. Utilities + acessibilidade
   ============================================================= */


/* -----------------------------------------------------------
   0. TIPOGRAFIA — fontes alojadas localmente (sem chamadas à Google)
   ----------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-variable.woff2') format('woff2');
}

/* -----------------------------------------------------------
   1. TOKENS DE DESIGN
   ----------------------------------------------------------- */
:root {
  /* Cores */
  --c-navy:        #1B3A66;
  --c-navy-dark:   #122845;
  --c-navy-light:  #2B5489;

  --c-teal:        #2DA8A6;
  --c-teal-dark:   #1F8580;
  --c-teal-light: #6ee7e7; /* Para brilhar sobre o fundo azul escuro */

  --c-ink:         #0F172A;   /* texto principal */
  --c-ink-soft:    #334155;   /* texto secundário */
  --c-mute:        #64748B;   /* texto terciário, eyebrows */
  --c-amber:       #D97706;   /* erro / aviso — âmbar, não vermelho */
  --c-amber-dark:  #92400E;   /* erro texto */

  --c-gold:        #B48E4B;   /* Latão — acento industrial premium */

  --c-bg:          #F8F6F1;   /* Fundo creme (estilo atelier) */
  --c-bg-white:    #FFFFFF;   /* Branco puro para os cartões saltarem à vista */
  --c-bg-soft:     #EBE9E4;   /* Um creme ligeiramente mais escuro para contrastes */
  --c-line:        #E2E8F0;
  --c-line-strong: #CBD5E1;

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaçamento — escala base 4px */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Outros */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow:    0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.06);
  --shadow-lg: 0 20px 40px -12px rgba(15,23,42,0.12);

  --container: 1200px;
  --header-h: 65px;

  --ease: cubic-bezier(.22,.61,.36,1);
}


/* -----------------------------------------------------------
   2. RESET E BASE
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
a:hover { color: var(--c-teal-dark); }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

ul { list-style: none; padding: 0; margin: 0; }


/* -----------------------------------------------------------
   3. TIPOGRAFIA
   ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  /* Fraunces optical sizing — mais fina em tamanhos grandes */
  font-variation-settings: "opsz" 144;
}

h1 {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  font-weight: 500;
}

h2 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.125rem);
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  font-variation-settings: "opsz" 36;
}

h4 {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0 0 var(--s-4);
}

p { 
  margin: 0 0 var(--s-4); 
  color: var(--c-ink-soft);
  font-size: 0.9375rem; /* Garante que todos os parágrafos seguem os 15px */
}
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--c-teal-dark);

  line-height: 1;
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
}
.eyebrow-light {
  color: var(--c-teal-light);
}

/* --- Secção Azul (Industrial) --- */
.bg-navy {
  background-color: var(--c-navy);
  color: #fff;
}

.bg-navy p {
  color: rgba(255, 255, 255, 0.85); /* Branco suave para não cansar a vista */
}

.bg-navy h2 {
  color: #fff;
}

/* O eyebrow adaptado para o azul */
.bg-navy .eyebrow {
  color: var(--c-teal-light);
}


/* -----------------------------------------------------------
   4. LAYOUT
   ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.section { padding: var(--s-20) 0; }
.section-head { max-width: 900px; margin-bottom: var(--s-12); }
.section-lead { font-size: 1rem; color: var(--c-ink-soft); }

/* Compensar header sticky em todos os alvos de âncora (secções e detalhes de serviço) */
section[id], article[id] { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
  align-items: center;
}


/* -----------------------------------------------------------
   5. COMPONENTES
   ----------------------------------------------------------- */

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.9375rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  transition: all .25s var(--ease);
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--c-navy);
  color: #fff;
}
.btn-primary:hover {
  background: var(--c-navy-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-line-strong);
}
.btn-ghost:hover {
  border-color: var(--c-navy);
  color: var(--c-navy);
  background: var(--c-bg-soft);
}

.btn-sm { padding: 0.625rem 1.125rem; font-size: 0.875rem; }
.btn-block { width: 100%; }


/* Formulário */
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }

.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--s-2);
  letter-spacing: 0.01em;
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.8125rem 1rem;
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 100px; font-family: inherit; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 4px rgba(27,58,102,0.08);
}

/* Erro — só aparece após submit ou blur (classe adicionada via JS) */
.field input.is-invalid,
.field textarea.is-invalid {
  border-color: var(--c-amber);
  box-shadow: 0 0 0 3px rgba(217,119,6,0.10);
}
.field input.is-invalid:focus,
.field textarea.is-invalid:focus {
  border-color: var(--c-amber);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.15);
}

/* Asterisco nos campos obrigatórios — via CSS, não afetado pelo i18n */
.field label.req::after {
  content: " *";
  color: var(--c-teal-dark);
  font-weight: 700;
}

.form-status {
  margin: var(--s-3) 0 0;
  font-size: 0.875rem;
  min-height: 1.25rem;
}
.form-status.is-success { color: var(--c-teal-dark); }
.form-status.is-error   { color: var(--c-amber-dark); }


/* -----------------------------------------------------------
   6. HEADER
   ----------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent; /* Totalmente transparente lá em cima */
  border-bottom: 1px solid transparent;
  transition: all .3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(248, 246, 241, 0.85); /* O Creme do fundo com transparência */
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.05); /* Linha divisória muito suave */
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo img {
  height: 32px;
  width: auto;
  display:
   block;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--s-8); 
}
.header-nav a {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* Ainda mais pequeno (aprox 11px) */
  font-weight: 700; /* Mais peso para aguentar o tamanho pequeno */
  letter-spacing: 0.12em; /* Muito espaçado, dá aquele ar de blueprint/esquema técnico */
  text-transform: uppercase; /* Maiúsculas para virar uma "etiqueta" */
  color: var(--c-mute); /* Cor de texto terciário/esbatido */
  text-decoration: none;
  transition: all 0.3s var(--ease);
}
.header-nav a:hover {
  color: var(--c-teal);
  transform: translateY(-1px);
}

/* --- Ajuste de Espaçamento --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem; 
}

/* --- Seletor de Língua --- */
.lang-toggle-desktop {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: transparent; /* Removemos a "pílula" de fundo cinza */
  border: none;
  padding: 0;
  cursor: pointer;
}

.lang-toggle-desktop .lang-sep {
  display: inline; /* Voltamos a mostrar a barra divisória (/) */
  color: var(--c-line-strong);
  font-size: 0.8rem;
  font-weight: 300;
  margin: 0 2px;
}

.lang-toggle-desktop .lang-opt {
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-mute);
  transition: all 0.25s var(--ease);
  text-decoration: none;
}

.lang-toggle-desktop .lang-opt:hover:not(.is-active) {
  color: var(--c-navy);
}

.lang-toggle-desktop .lang-opt.is-active {
  color: var(--c-navy);
  background: rgba(27, 58, 102, 0.06); /* Fundo azul muito suave só na palavra ativa */
  box-shadow: none; /* Retiramos a sombra pesada */
}

/* Garantir que estilos antigos de menu não interferem */
.nav-toggle, .primary-nav { display: none !important; }

/* --- Botão de Contacto com Ícone --- */
.btn-contact {
  border-radius: var(--radius-sm); /* Mudámos de 2rem (pílula) para 6px (bloco estruturado) */
  padding: 0.6rem 1.25rem 0.6rem 1rem; 
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; 
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--c-navy);
  border: 1px solid transparent;
  transition: all 0.3s var(--ease);
}
.btn-contact:hover {
  background: var(--c-navy-dark);
  box-shadow: 0 4px 12px rgba(27, 58, 102, 0.15);
  transform: translateY(-1px);
}

.icon-contact {
  width: 16px; /* Ícone ligeiramente mais contido para um ar mais técnico */
  height: 16px;
  transition: transform 0.25s var(--ease); 
}
.btn-contact:hover .icon-contact {
  transform: translateY(-2px) scale(1.05);
}

/* Garantir o alinhamento da barra toda */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}


/* -----------------------------------------------------------
   7. HERO
   ----------------------------------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + var(--s-8)) 0 0; 
  overflow: visible; 
  background-color: var(--c-bg);
  background-size: 100% 100%, cover;
  background-position: 0 0, center right;
  background-repeat: no-repeat, no-repeat;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(45,168,166,0.07), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(27,58,102,0.05), transparent 50%);
  pointer-events: none;
  z-index: -1;
}
/* Subtle dot grid */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(27,58,102,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse at 70% 30%, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 40%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.hero-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  margin-bottom: var(--s-16);
}

.hero-text-content { 
  text-align: left; 
}

.hero-text-content h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-text-content .lead {
  font-size: 1rem;
  color: var(--c-ink-soft);
}

.hero-actions {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

/* A coluna da direita final e limpa */
.hero-visual-content {
  position: relative;
  display: flex;
  align-items: center; 
  min-height: 480px; 
  background-color: transparent; 
  background-image: none; 
  border-radius: 0;
  box-shadow: none;
}

.hero-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; 
  width: 85%; 
  
  background-image: url('assets/hero-bg.png'); 
  background-size: cover;
  background-position: center right; 
  z-index: 1;
  border-radius: 4px;
  box-shadow: none;
  
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 20%, black 80%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 20%, black 80%);
}

/* =========================================
   A ANIMAÇÃO (O motor que faz tudo deslizar)
   ========================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Anima os textos da esquerda (aparecem primeiro) */
.hero-text-content > * { 
  opacity: 0; 
  animation: fadeUp .8s var(--ease) forwards; 
}
.hero-text-content > *:nth-child(1) { animation-delay: .05s; }
.hero-text-content > *:nth-child(2) { animation-delay: .15s; }
.hero-text-content > *:nth-child(3) { animation-delay: .25s; }
.hero-text-content > *:nth-child(4) { animation-delay: .35s; }

.hero-cards {
  position: relative;
  z-index: 2; /* Ficam por cima da foto */
  width: 85%; /* Os cartões são mais largos que o espaço livre, criando a sobreposição com a foto */
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0; 
  padding-left: var(--s-8); /* Cria um 'acolchoamento' extra */
  /* Adiciona uma sombra suave a todo o bloco de cartões para destacar do fundo */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.06));
}

/* 1. O Cartão (estado normal: branco, fino e compacto) */
.service-card {
  position: relative; /* ancora o .card-chevron */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: var(--c-bg-white);
  padding: var(--s-4) var(--s-5);

  border: 1px solid rgba(0,0,0,0.06);
  border-top: 3px solid transparent;
  border-radius: 4px;

  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: all 0.3s var(--ease);
}

/* 2. O Cartão (estado hover: linha de cor no topo, sem fundo escuro)
   O :hover real só é usado com (hover: hover) — em toque, o WebKit
   simula :hover ao primeiro tap e esse estado pode ficar "pegado"
   sem soltar com um 2.º tap. Por isso, em toque, o visual depende
   só de .is-revealed, controlado pelo JS (setupTouchCardReveal),
   nunca do :hover real. */
@media (hover: hover) {
  .service-card:hover {
    background: var(--c-bg-white); /* Mantém-se branco */
    border-color: rgba(0,0,0,0.08); /* Fica ligeiramente mais marcado */
    border-top-color: var(--c-teal); /* Linha de destaque no topo do cartão */
    transform: translateY(-2px); /* Dá só um saltinho muito subtil */
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
  }
}

.service-card.is-revealed {
  background: var(--c-bg-white);
  border-color: rgba(0,0,0,0.08);
  border-top-color: var(--c-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
}

/* Acessibilidade */
.service-card:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 4px;
}

/* 3. O Ícone (pequeno e elegante) */
.card-visual {
  display: block !important;
  padding: 0 !important;
  margin-right: var(--s-3); /* Mais colado ao texto */
  background: transparent !important;
}

.service-card.has-image .card-icon { display: flex !important; }
.service-card.has-image .card-visual::after, .card-pattern { display: none !important; }

.card-icon {
width: var(--s-12);
  height: var(--s-12);
  border-radius: var(--radius);
  background: var(--c-bg); 
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  transition: all 0.3s var(--ease);
  flex-shrink: 0; 
}
.card-icon svg { width: 24px; height: 24px; } 

@media (hover: hover) {
  .service-card:hover .card-icon {
    background: var(--c-bg-soft);
    color: var(--c-teal-dark);
  }
}
.service-card.is-revealed .card-icon {
  background: var(--c-bg-soft);
  color: var(--c-teal-dark);
}

/* 4. Corpo do texto (letras pequenas) */
.card-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-grow: 1;
}

.card-num {
  font-family: var(--font-display);
  font-size: 1.75rem; /* Ajustado para não ser tão dominante */
  color: var(--c-teal);
  line-height: 1;
}
@media (hover: hover) {
  .service-card:hover .card-num {
    color: var(--c-teal);
  }
}
.service-card.is-revealed .card-num {
  color: var(--c-teal);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0;
  color: var(--c-ink);
  transition: color 0.3s var(--ease);
}

/* 5. A Descrição (revela-se sem alterar a cor de fundo) */
.card-desc {
  font-size: 0.8125rem; /* Letra mais pequena e legível */
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: all 0.4s var(--ease);
}

@media (hover: hover) {
  .service-card:hover .card-desc {
    max-height: 150px;
    opacity: 1;
    margin-top: var(--s-2);
  }
}
.service-card.is-revealed .card-desc {
  max-height: 150px;
  opacity: 1;
  margin-top: var(--s-2);
}

/* 5b. Chevron — indica que o cartão expande/colapsa ao toque */
.card-chevron {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 18px;
  height: 18px;
  color: var(--c-ink-soft);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.card-chevron svg { width: 100%; height: 100%; }

@media (hover: hover) {
  .service-card:hover .card-chevron {
    color: var(--c-teal-dark);
    transform: rotate(180deg);
  }
}
.service-card.is-revealed .card-chevron {
  color: var(--c-teal-dark);
  transform: rotate(180deg);
}

/* 5c. CTA "Saber mais" — único elemento que navega ao toque
   (ver script.js, setupTouchCardReveal: tocar fora do .card-cta
   só expande/colapsa a descrição) */
.card-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-teal-dark);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}

@media (hover: hover) {
  .service-card:hover .card-cta {
    max-height: 24px;
    opacity: 1;
    margin-top: var(--s-2);
  }
}
.service-card.is-revealed .card-cta {
  max-height: 24px;
  opacity: 1;
  margin-top: var(--s-2);
}

/* 6. Seta do cartão — não usada neste layout */
.card-arrow { 
  display: none; 
}


/* -----------------------------------------------------------
   8. ABOUT
   ----------------------------------------------------------- */
.section-about {
  background: var(--c-navy-dark); 
  padding: var(--s-20) 0 var(--s-20);
}

.about-grid-2 { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  text-align: left; 
}

.about-content { max-width: 35rem; margin: 0; }
.about-content h2 { 
  color: #fff; 
  margin-bottom: var(--s-6); 
  /* OPCIONAL: Se quiser garantir a 100% que este título NUNCA quebra */
  /* white-space: nowrap; */
}
.about-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--s-5);
}

.about-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Imagem de fundo fixa da secção */
  background-image: url('assets/about.png');
  background-size: cover;
  background-position: center;  
  box-shadow: var(--shadow-lg); 
}

/* Esconder os quadrados abstratos antigos para não taparem a foto */
.about-shape, .about-grid {
  display: none;
}

.stamp-box {
  position: absolute;
  bottom: 20px; /* Um pouco mais encostado ao fundo */
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px; /* Cantos um pouco mais fechados */
  padding: 0.6rem 1rem; /* Bem mais compacto */
  z-index: 10;
}
.stamp-title {
  font-family: var(--font-body); /* Usamos a fonte do corpo (sans) */
  font-size: 0.75rem;          
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;       /* Espaçado para legibilidade técnica */
  text-transform: uppercase;
}

/* -----------------------------------------------------------
   9. SERVICES
   ----------------------------------------------------------- */
.section-services { 
  background: var(--c-bg); 
}

.service {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--s-10);
  align-items: center;
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--c-line);
}
.service:last-of-type {
  border-bottom: none;
}
.service.service--reverse {
  grid-template-columns: 1fr minmax(260px, 380px);
}
.service.service--reverse .service-visual { order: 2; }
.service.service--reverse .service-body { order: 1; }

/* Foto do pilar, com overlay para o número se manter legível */
.service-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}
.service-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.55), transparent 55%);
}
.service-visual-num {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-4);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-sm);
}

.service-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-navy);
}

.service-body .service-lead {
  font-size: 0.9375rem; /* Ajustado para leitura confortável */
  color: var(--c-ink-soft);
  margin-bottom: var(--s-8);
  line-height: 1.6;
  max-width: 45em;
}

/* Grelha de soluções */
.service-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--s-10); /* Mais espaço vertical e horizontal */
  margin-top: var(--s-8);
}

.service-items li {
  list-style: none;
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-teal); /* O eixo que organiza o conteúdo */
}

/* Se o número de itens for ímpar, o último ocupa a linha toda em vez de deixar metade em branco */
.service-items li:nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;
}

/* Criamos um marcador super fino e alinhado */
.service-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem; /* Alinhado verticalmente com o texto */
  width: 8px;
  height: 2px; /* Um traço fino em vez de um ponto */
  background-color: var(--c-teal); /* Cor de acento principal */
}

.service-items strong {
  display: block;
  font-size: 0.65rem; /* Mantém este tamanho pequeno */
  text-transform: uppercase;
  letter-spacing: 0.15em; /* Aumenta um pouco o espaçamento para ser mais "clean" */
  color: var(--c-teal-dark);
  margin-bottom: 0.25rem;
  font-weight: 700; /* Dá-lhe mais peso */
}

.service-items strong::before {
  display: none;
}

.service-items span {
  display: block;
  font-size: 0.8rem;    
  color: var(--c-ink-soft);
  line-height: 1.5;
}

/* -----------------------------------------------------------
   10. CONTACT
   ----------------------------------------------------------- */
.section-contact { background: var(--c-bg-soft); }

.contact-intro h2 { margin-bottom: var(--s-5); }
.contact-intro .lead { font-size: 1rem; margin-bottom: var(--s-10); }

.contact-direct {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-line);
  margin-bottom: var(--s-6);
}
.contact-direct p {
  font-size: 0.875rem;
  color: var(--c-mute);
  margin-bottom: var(--s-2);
}
.contact-email {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-navy);
  font-variation-settings: "opsz" 36;
}
.contact-email:hover { color: var(--c-teal-dark); }

.contact-meta {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.contact-meta li {
  display: grid;
  grid-template-columns: 6.875rem 1fr;
  gap: var(--s-4);
  font-size: 0.875rem;
}
.contact-meta-label {
  color: var(--c-mute);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding-top: 2px;
}
.contact-meta-value { color: var(--c-ink-soft); }

.section-contact .grid-2 { align-items: start; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: var(--s-8);
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--shadow-lg);
}


/* -----------------------------------------------------------
   11. FOOTER
   ----------------------------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.78);
  padding: var(--s-20) 0 var(--s-8);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-10);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start; 
}

.footer-nav,
.footer-contact {
  padding-top: 0;
  margin-top: 0.625rem; 
}

.footer-brand .footer-logo-text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: var(--s-4);
  line-height: 1;
}
.footer-brand .footer-logo-text .logo-soft {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.footer-brand .footer-logo-img,
.footer-brand img {
  display: block;
  height: 52px; /* Tamanho do logo no rodapé */
  width: auto;
  margin-bottom: var(--s-6); /* Dá mais espaço entre o logo e o slogan por baixo */
  filter: brightness(0) invert(1); /* Converte o logo para branco, independentemente da cor original */
  opacity: 0.9;
}

.footer-tagline {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  max-width: 18em;
  margin: 0;
}

.footer-nav h4,
.footer-contact h4 {
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--s-5);
}

.footer-nav ul,
.footer-contact ul {
  display: grid;
  gap: var(--s-3);
}

.footer-nav a,
.footer-contact a,
.footer-contact li {
  color: rgba(255,255,255,0.78);
  font-size: 0.9375rem;
  transition: color .2s var(--ease);
}
.footer-nav a:hover,
.footer-contact a:hover { color: var(--c-teal); }

/* --- Rodapé de baixo (Copyright e Termos) --- */
.footer-bottom {
  padding-top: var(--s-8); /* Aumentámos o espaço entre a linha e o texto (de s-6 para s-8) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permite que no telemóvel os termos passem para baixo */
  gap: var(--s-6); /* Dá mais espaço quando os elementos se empilham no mobile */
}
.footer-bottom p {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.62);
}

.footer-bottom-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  gap: var(--s-5);
}
/* 1. A cor cinza para os links de texto (Termos e Privacidade) */
.footer-bottom-legal a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.62);
  transition: color .2s var(--ease);
  text-decoration: none;
}
.footer-bottom-legal a:hover { 
  color: rgba(255,255,255,0.8); 
}
/* 2. A cor Teal exclusiva para a seta (vence a regra de cima) */
.footer-bottom-legal a.footer-back-top {
  color: var(--c-teal);
  font-weight: 600;
  margin-left: var(--s-4);
  text-decoration: none;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease); 
  /* Área de toque maior para ecrãs táteis */
  font-size: 1.25rem;
  padding: 0.5rem 1rem;  
  display: inline-block; 
}
.footer-bottom-legal a.footer-back-top:hover {
  color: var(--c-teal-light); 
  transform: translateY(-2px); 
}


/* -----------------------------------------------------------
   12. PÁGINAS LEGAIS (privacy.html / terms.html)
   ----------------------------------------------------------- */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.legal-back {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-mute);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: color .2s var(--ease);
}
.legal-back:hover { color: var(--c-navy); }
.legal-back::before { content: "←"; }

.legal-content {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--s-20) var(--s-6) var(--s-24);
}
.legal-content h1 {
  font-size: clamp(1.75rem, 2.4vw + 0.5rem, 2.375rem);
  margin-bottom: var(--s-3);
}
.legal-date {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--c-mute);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-12);
  border-bottom: 1px solid var(--c-line);
}
.legal-notice {
  background: rgba(217,119,6,0.08);
  border-left: 3px solid #D97706;
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--s-12);
}
.legal-notice p {
  font-size: 0.875rem;
  color: #92400E;
  margin: 0;
  text-align: left;
}
.legal-content h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0;
  margin: var(--s-12) 0 var(--s-4);
  color: var(--c-navy);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p,
.legal-content ul {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-5);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.legal-content ul {
  list-style: disc;
  padding-left: var(--s-6);
  text-align: left; /* listas com bullets não justificam bem */
}
.legal-content ul li { margin-bottom: var(--s-2); }
.legal-content a { color: var(--c-navy); }
.legal-content a:hover { color: var(--c-teal-dark); }
.legal-content strong { color: var(--c-ink); font-weight: 600; }

.legal-footer {
  background: var(--c-ink);
  padding: var(--s-6) 0;
}
.legal-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.legal-footer p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}
.legal-footer-links {
  display: flex;
  gap: var(--s-5);
}
.legal-footer-links a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  transition: color .2s var(--ease);
}
.legal-footer-links a:hover { color: rgba(255,255,255,0.8); }
.legal-footer-links a[aria-current] { color: rgba(255,255,255,0.75); }

@media (max-width: 640px) {
  .legal-content { padding: var(--s-12) var(--s-5) var(--s-16); }
  .legal-content p,
  .legal-content ul {
    /* Em ecrãs estreitos a justificação cria espaços feios entre palavras */
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
}


/* -----------------------------------------------------------
   13. RESPONSIVE
----------------------------------------------------------- */

/* Tablet — até 960px */ 
  @media (max-width: 960px) { 

    .section { padding: var(--s-12) 0; } 
    .grid-2 { grid-template-columns: 1fr; gap: var(--s-12); } 
    .header-nav { display: none; }
    .hero { padding: calc(var(--header-h) + var(--s-10)) 0 var(--s-12); } 
      
      .hero-top-grid { 
        grid-template-columns: 1fr; /* Coloca o texto em cima e os cartões em baixo */
        gap: var(--s-10); 
      }
      .hero-text-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra a eyebrow e os títulos */
      }
      .hero-text-content .lead {
        margin-left: auto;
        margin-right: auto; /* Garante que o parágrafo não fica torto */
      }
      .hero-text-content .eyebrow::before {
      display: none;
      }
      .hero-actions {
        justify-content: center; /* Centra os botões Vamos Falar / Ver Serviços */
        width: 100%;
      }
      /* Esconder a foto do hero no tablet (reduz o ruído visual) */
      .hero-photo {
        display: none;
      }
      .hero-visual-content {
        min-height: auto;
      }
      /* Cartões do hero sempre visíveis e alinhados */
      .hero-cards {
        width: 100%;
        gap: var(--s-3);
        padding-left: 0;
      }
      .card-desc {
        max-height: 500px;
        opacity: 1;
        margin-top: var(--s-2);
      }
      /* Descrição já sempre visível e o toque navega direto —
         o chevron/CTA só fazem sentido na zona dependente de hover */
      .card-chevron,
      .card-cta {
        display: none;
      }
      /* Número e título seguidos na mesma linha, descrição em baixo
         (no mobile, ≤640px, o número desaparece e isto é revertido) */
      .card-body {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--s-2);
        align-items: baseline;
      }
      .card-num { grid-column: 1; font-size: 1.25rem; }
      .card-title { grid-column: 2; }
      .card-desc { grid-column: 1 / -1; }

    /* .about-grid-2 colapsa para 1 coluna (via .grid-2) — imagem e
       texto ocupam toda a largura disponível, em vez de ficarem
       limitados a 560px a meio da secção */
    .about-visual { aspect-ratio: 16 / 10; max-width: none; margin: 0; }
    .about-content { max-width: none; margin: 0; }
    .section-about { padding: var(--s-10) 0; }
    
    .service,
    .service.service--reverse { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-10) 0; }
    .service.service--reverse .service-visual,
    .service.service--reverse .service-body { order: initial; }
    .service-visual { aspect-ratio: 16 / 9; }
    /* No desktop o limite de 45em evita linhas demasiado longas na
       coluna estreita; no tablet a coluna já ocupa a largura toda,
       por isso o limite só deixava uma faixa vazia à direita */
    .service-body .service-lead { max-width: none; }
    .service-items strong {
      min-width: 0;
    }

    .contact-form { padding: var(--s-6); }
    
    .footer-inner { 
      grid-template-columns: 1.5fr 1fr 1fr; /* Mantém as 3 colunas, divididas de forma igual */
      gap: var(--s-6); /* Reduz um pouco o espaçamento entre elas para não apertar no tablet */
    }
  } 

  /* Mobile — até 640px */ 
  @media (max-width: 640px) { 
    :root { --header-h: 64px; } 
    .container { padding: 0 var(--s-5); } 
    
      /* Ajuste do Header para Mobile */
    .header-actions { gap: var(--s-3); }
    .header-nav { display: none; }
    .lang-toggle-desktop { font-size: 0.8rem; }
    .header-actions .btn { 
      padding: 0.5rem 0.875rem; 
      font-size: 0.8125rem; 
    }
      
    /* Hero */ 
    .hero {
      padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-10);
    }
    .hero-text-content h1 {
      font-size: 2.25rem;
    }
    .hero-photo {
      display: none;
    }
    /* O eyebrow da hero fica centrado no mobile — o traço antes do
       texto só faz sentido alinhado à esquerda, por isso esconde-se
       só aqui (as outras secções mantêm o traço) */
    .hero-text-content .eyebrow::before {
      display: none;
    }

    .service-card { 
      padding: var(--s-3); 
    }

    .card-icon {
      width: 40px; height: 40px; /* Ícone mais pequeno */
    }
    .card-icon svg { width: 20px; height: 20px; }
    .card-title { font-size: 1rem; }

    /* Cartões de serviço no hero: só o ícone, sem numeração, centrados */
    .service-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .card-visual { margin-right: 0; margin-bottom: var(--s-2); }
    .card-num { display: none; }
    /* Reverte o grid "número + título" do tablet — aqui o número
       já não existe, volta-se à coluna simples centrada */
    .card-body { display: flex; flex-direction: column; align-items: center; }

    /* Services — manter os títulos, esconder as descrições */
    .service-items span { display: none; }
    .service-visual-num { font-size: 1.25rem; }


    /* Contact */ 
    .contact-form { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); } 
    .contact-meta li { grid-template-columns: 1fr; gap: var(--s-1); } 
   
    /* Footer */ 
    .footer-inner { 
      grid-template-columns: 1fr; 
      gap: var(--s-8); 
      padding-bottom: 1.25rem;
    }    
    .footer-bottom { 
      flex-direction: column; 
      align-items: flex-start; 
      gap: var(--s-4); 
      padding-top: 1.25rem;
    }
    .footer-bottom-legal { gap: var(--s-4); }
  }


/* -----------------------------------------------------------
   14. UTILITIES + A11Y
   ----------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-3);
  background: var(--c-navy);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s-3); color: #fff; }

/* Focus visível em todos os elementos interactivos */
*:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible {
  outline-offset: 3px;
}

/* Respeitar preferência reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}