/* ==========================================================================
   SECTIONS.CSS — layout único de cada secção da Arquitectura da Informação.
   Ordem do ficheiro = ordem da AI na Direcção Criativa (Fase 3):
   1 Hero · 2 Sobre · 3 MVV · 4 Processo · 5 Serviços · 6 DUAT ·
   7 Segmentos · 8 Porque · 9 Áreas · 10 Contacto
   ========================================================================== */

/* ===================== 1. HERO ===================== */
.hero{ position:relative; overflow:hidden; background:var(--color-primary); color:#fff; isolation:isolate; }
/* Ultra Premium Image Framework: a fotografia editorial (.photo-bleed, com
   o seu próprio overlay institucional) passou a ser o fundo do Hero. Este
   elemento deixa de pintar um gradiente opaco por cima da imagem — mantém
   só o glow amarelo pontual e o grão de textura, como uma segunda camada
   de luz sobre a fotografia, nunca a escondendo. */
.hero-bg-wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 85% 15%, rgba(249,210,8,.14), transparent 45%);
  /* Sprint H01 — "gradient breathing": a luz de fundo já não é estática;
     respira muito devagar (opacidade + escala), a mesma pista de "algo
     vivo" que os glows já davam, mas a velocidade diferente — camadas
     com vida própria, não sincronizadas como um metrónomo. */
  transform-origin:center; animation:heroBgBreathe 11s ease-in-out infinite alternate;
}
@keyframes heroBgBreathe{ from{ opacity:1; transform:scale(1); } to{ opacity:.82; transform:scale(1.035); } }
@media (prefers-reduced-motion: reduce){ .hero-bg-wash{ animation:none; } }
/* textura discreta — grão subtil via SVG noise, nunca decorativo puro (Parte D — Signature) */
.hero-bg-wash::after{
  content:""; position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Overlay dirigido do Hero (Ultra Premium Image Framework, auto-crítica):
   o overlay partilhado de .photo-bleed (components.css) fica claro de
   propósito para não esconder a fotografia — mas o texto vive sempre no
   lado esquerdo (.hero-copy, max-width:640px). Este gradiente horizontal
   escurece só essa faixa o suficiente para contraste AA em texto branco,
   e desvanece depressa para a direita, onde a composição já reserva céu/
   água como espaço negativo antes de chegar às pessoas fotografadas. */
.hero .photo-bleed::after{
  background:linear-gradient(90deg, rgba(31,32,81,.80) 0%, rgba(31,32,81,.66) 32%, rgba(31,32,81,.28) 58%, rgba(31,32,81,.40) 100%);
}
/* Sprint H01 (Hero Excellence) — a fotografia deixa de "aparecer" e passa a
   "revelar-se": um único fade de entrada ao carregar a página, antes de
   qualquer scroll (a primeira nota da "entrada cinematográfica"). Corre só
   em opacity — nunca em transform, para nunca disputar essa propriedade
   com o parallax de scroll, que vive num wrapper interno próprio
   (.hero-photo-parallax) e é controlado por JS. Âmbito: só o Hero — o
   .photo-bleed do fecho de Áreas continua a revelar-se por scroll, como
   antes, via .reveal. */
.hero .photo-bleed{ opacity:0; animation:heroPhotoReveal 1.5s var(--ease-out) .1s forwards; }
@keyframes heroPhotoReveal{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero .photo-bleed{ opacity:1; animation:none; } }
/* Wrapper interno de parallax (hero.js) — ligeiramente maior que o
   contentor (inset negativo) para que o pequeno deslocamento vertical
   ligado ao scroll nunca exponha uma aresta vazia. Move-se só em
   translate3d (GPU), a uma cadência diferente dos glows (que flutuam por
   tempo, não por scroll): camadas com profundidades diferentes, a mesma
   leitura de um cenário com várias distâncias focais. */
.hero-photo-parallax{ position:absolute; inset:-4% -1%; will-change:transform; }
@media (prefers-reduced-motion: reduce){ .hero-photo-parallax{ transform:none !important; } }
/* Ultra Premium Image Framework: a grelha deixa de reservar uma coluna
   para o motivo do telhado (agora a fotografia ocupa esse papel visual) —
   o texto fica contido a uma medida de leitura confortável, ancorado no
   lado esquerdo da fotografia, onde a composição original já deixa céu e
   água como espaço negativo (nunca sobre os rostos das pessoas). */
.hero-grid{ display:grid; position:relative; z-index:2; align-items:center; min-height:min(88vh, 760px); padding:var(--space-16) 0; }
@media(min-width:1024px){ .hero-grid{ min-height:min(92vh, 820px); padding:var(--space-24) 0; } }
.hero-copy{ max-width:640px; }
.hero .kicker{ color:var(--color-accent); }
/* Sprint H01 — hierarquia: a headline fica mais curta (ver index.html) e
   cresce um pouco mais (override só aqui — o token --fs-display global
   fica intacto, para não afectar nenhuma outra secção). "Sentir primeiro,
   ler depois" pede uma única frase grande, com muito ar à volta — nunca
   um parágrafo inteiro dentro de um h1. */
.hero-headline{ font-size:clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem); }
.hero-sub{ color:var(--color-text-on-navy-muted); font-size:1.05rem; max-width:42ch; margin-bottom:var(--space-8); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-4); }
/* Brilho dourado do CTA principal do Hero (Sprint H01) — âmbito local de
   propósito: o mesmo .btn-cta é reutilizado no rodapé e no formulário,
   fora desta sprint. Só box-shadow — nunca transform, para não disputar
   essa propriedade com o movimento magnético já controlado por JS. */
.hero-ctas .btn-cta:hover, .hero-ctas .btn-cta:focus-visible{
  box-shadow:0 10px 28px rgba(249,210,8,.38), var(--shadow-2);
}

/* Glows volumétricos — Apêndice 4 "background vivo": duas fontes de luz que
   respiram lentamente, nunca decoração estática (Parte D — restrição de
   pelo menos um elemento a fazer trabalho real: aqui dão profundidade
   atmosférica ao navy, não são apenas enfeite). */
/* Sprint H01: mix-blend-mode:screen dá aos glows leitura de luz real sobre
   a fotografia (bloom), em vez de um círculo colorido colado por cima. */
.hero-glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; mix-blend-mode:screen; }
.hero-glow--1{ width:min(46vw,480px); height:min(46vw,480px); background:radial-gradient(circle, rgba(249,210,8,.22), transparent 70%); top:-14%; right:-8%; animation:glowFloat 9s ease-in-out infinite alternate; }
.hero-glow--2{ width:min(34vw,360px); height:min(34vw,360px); background:radial-gradient(circle, rgba(255,255,255,.07), transparent 70%); bottom:-10%; left:6%; animation:glowFloat 12s ease-in-out infinite alternate-reverse; }
@keyframes glowFloat{ from{ transform:translateY(0) scale(1); } to{ transform:translateY(-26px) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .hero-glow{ animation:none; } }

/* Luz ambiente que segue o rato (hero.js) — só desktop/pointer:fine, uma
   quarta camada de profundidade que reage ao visitante sem tocar no texto. */
.hero-cursor-glow{ position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity .3s var(--ease-out); }
@media (prefers-reduced-motion: reduce){ .hero-cursor-glow{ display:none; } }

/* Costura de luz na base do Hero — evita o corte seco entre o navy do Hero
   e o branco de Sobre; a mesma lógica de "filme contínuo" repete-se em
   cada transição navy→claro do site (ver DUAT e fecho de Áreas). */
.hero::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:130px;
  background:linear-gradient(to bottom, transparent, var(--color-bg));
  z-index:0; pointer-events:none;
}

/* Headline letra-por-palavra (Apêndice 4 / Signature) — cada palavra revela
   por baixo de uma máscara, como Linear/Stripe. Ordem controlada por --i,
   partilhando o token --stagger-step do Design System. */
.hero-headline{ color:#fff; margin:var(--space-6) 0 var(--space-8); }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.word-mask .word{
  display:inline-block; transform:translateY(115%); opacity:0;
  animation:wordReveal .75s var(--ease-out) forwards;
  animation-delay:calc(var(--i, 0) * var(--stagger-step));
}
@keyframes wordReveal{ to{ transform:translateY(0); opacity:1; } }

.hero-reveal{ opacity:0; transform:translateY(16px); animation:heroIn var(--duration-slow) var(--ease-out) forwards; animation-delay:calc(var(--i, 0) * var(--stagger-step)); }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-reveal, .word-mask .word{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero-visual{ transition:none; }
}

/* CTA magnético (Apêndice 4 — "CTA elegante e magnético") — Craftsmanship
   C04: a duração mantém-se próxima do original (a suavização em cada
   mousemove é o que dá a sensação "magnética"; alongá-la demasiado fá-la-ia
   parecer arrastada atrás do cursor). O overshoot fica quase impercetível
   durante o seguimento e só se nota no pequeno assentar final. */
.btn-magnetic{ transition:transform .22s var(--ease-overshoot), background-color var(--duration-base), box-shadow var(--duration-base); }

/* Ripple subtil (Sprint H01) — só nos CTAs do Hero (hero.js só cria o
   span dentro de #hero); dourado, curto, nunca chamativo — confirma o
   clique sem competir com a navegação que acontece logo a seguir. */
.btn-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(249,210,8,.25) 55%, transparent 72%);
  transform:scale(0); opacity:.6; animation:btnRippleOut .6s var(--ease-out) forwards;
}
@keyframes btnRippleOut{ to{ transform:scale(1); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .btn-ripple{ display:none; } }

/* Convite de scroll — assinatura discreta que também resolve UX (o
   visitante sabe que há mais conteúdo abaixo sem precisar de o "descobrir").
   Sprint H01: só aparece depois do resto do Hero assentar (delay) — a
   ordem certa é sentir, depois ler, só depois descobrir que há mais. */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:22px; height:40px; z-index:3;
  display:none; align-items:flex-start; justify-content:center; text-decoration:none;
  opacity:0; animation:heroCueIn .8s var(--ease-out) 1.5s forwards;
}
@media(min-width:768px){ .scroll-cue{ display:flex; } }
@keyframes heroCueIn{ to{ opacity:1; } }
.scroll-cue-line{ width:1px; height:100%; background:rgba(255,255,255,.28); position:relative; overflow:hidden; }
.scroll-cue-line::after{ content:""; position:absolute; top:-45%; left:0; width:100%; height:45%; background:var(--color-accent); animation:scrollCue 1.9s ease-in-out infinite; }
@keyframes scrollCue{ 0%{ top:-45%; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ opacity:1; animation:none; }
  .scroll-cue-line::after{ animation:none; top:0; }
}

/* placeholder de fotografia — infra-estrutura reutilizável para qualquer
   secção futura que ainda não tenha activo real (Apêndice 3); nenhuma
   secção actual a usa, desde que a campanha fotográfica real chegou. */
.photo-placeholder{
  position:relative; border-radius:var(--radius-image); overflow:hidden; box-shadow:var(--shadow-image);
  background:linear-gradient(160deg, var(--color-surface-alt), var(--color-surface));
  min-height:220px; display:flex; align-items:center; justify-content:center;
}
/* Shimmer discreto — sinaliza "conteúdo em preparação por uma equipa", não
   "espaço esquecido". Skeleton com intenção, não um cinzento estático. */
.photo-placeholder::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  background-size:200% 100%; animation:placeholderShimmer 3.4s ease-in-out infinite;
}
@keyframes placeholderShimmer{ 0%{ background-position:140% 0; } 100%{ background-position:-40% 0; } }
@media (prefers-reduced-motion: reduce){ .photo-placeholder::before{ animation:none; display:none; } }
.photo-placeholder .roof-motif{ width:46%; opacity:.9; position:relative; z-index:1; }
.photo-placeholder span{
  position:absolute; bottom:var(--space-3); left:var(--space-3); right:var(--space-3);
  font-size:.7rem; letter-spacing:.03em; color:var(--color-text-muted); background:rgba(255,255,255,.85);
  padding:4px 8px; border-radius:6px; text-align:center;
}

/* ===================== 2. SOBRE ===================== */
.sobre-grid{ display:grid; gap:var(--space-8); }
@media(min-width:1024px){ .sobre-grid{ grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; } }
.sobre-text p{ margin-bottom:var(--space-4); color:var(--color-text-muted); font-size:1.05rem; }
.sobre-text p:last-child{ margin-bottom:0; }
.sobre-text strong{ color:var(--color-primary); }

/* ===================== 3. MISSÃO/VISÃO/VALORES ===================== */
.mvv-grid{ display:grid; gap:var(--space-6); }
@media(min-width:768px){ .mvv-grid{ grid-template-columns:repeat(3,1fr); } }
.mvv-card{
  background:var(--color-surface); border-radius:var(--radius-card); padding:var(--space-8);
  border:1px solid var(--color-border);
  /* Nota de bug corrigido (auditoria Craftsmanship): este elemento também
     tem a classe .reveal (base.css). Se este selector "vencer" a cascata
     sem incluir opacity/transform com o timing do reveal, o cartão salta
     para visível em vez de desvanecer — por isso a lista replica
     propositadamente o timing do .reveal, e só o :hover troca para
     overshoot num property-list próprio (nunca no estado de repouso). */
  transition:opacity var(--duration-slow) var(--ease-standard), transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.mvv-card:hover{
  transform:translateY(-6px); border-color:var(--color-accent); box-shadow:var(--shadow-1);
  transition:transform .22s var(--ease-overshoot), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.mvv-card h3{ margin-bottom:var(--space-3); }
.mvv-card p, .mvv-card li{ color:var(--color-text-muted); font-size:.98rem; }
.mvv-card ul li{ margin-bottom:6px; padding-left:1.2em; position:relative; }
.mvv-card ul li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--color-accent); }
.mvv-icon{ width:34px; height:34px; margin-bottom:var(--space-4); color:var(--color-primary); transition:transform var(--duration-base) var(--ease-standard); }
.mvv-card:hover .mvv-icon{ transform:scale(1.1) rotate(-4deg); }
/* Cascata de entrada — os três cartões deixam de "aparecer em bloco" e
   revelam em sequência (Parte D — quebra a sensação de template estático). */
.mvv-grid .mvv-card:nth-child(1){ transition-delay:0ms; }
.mvv-grid .mvv-card:nth-child(2){ transition-delay:.12s; }
.mvv-grid .mvv-card:nth-child(3){ transition-delay:.24s; }

/* ===================== 4. COMO FUNCIONA ===================== */
.process{ display:flex; flex-direction:column; position:relative; }
@media(min-width:1024px){ .process{ flex-direction:row; align-items:flex-start; } }
.process-step{
  position:relative; flex:1; padding:var(--space-6) 0 var(--space-6) var(--space-8); border-left:2px solid var(--color-border);
  /* mesma correcção de cascata do .mvv-card: este elemento também é
     .reveal — a lista tem de incluir opacity/transform, ou o passo salta
     para visível em vez de desvanecer. */
  transition:opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
/* Correcção (elevação Como Funciona): em desktop o número flutua acima da
   linha (top:-15px), mas o padding-top do passo tinha sido zerado — o
   título ficava a menos de 15px do centro do número, sobrepondo-se a ele.
   var(--space-12) dá folga suficiente para o número "pousar" sobre a
   linha sem tocar no texto, em qualquer dos 5 passos. */
@media(min-width:1024px){ .process-step{ padding:var(--space-12) var(--space-4) 0; border-left:none; border-top:2px solid var(--color-border); } }
.process-step:hover{ border-color:var(--color-accent); }
.process-step::before{
  content:attr(data-n); position:absolute; left:-15px; top:var(--space-6); z-index:2;
  width:28px; height:28px; border-radius:50%; background:var(--color-primary); color:#fff;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.8rem; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-btn);
  transition:background-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
.process-step:hover::before{ background:var(--color-accent); color:var(--color-primary); transform:scale(1.12); box-shadow:var(--shadow-1); }
@media(min-width:1024px){ .process-step::before{ left:calc(50% - 14px); top:-15px; } }
/* Linha de progresso dourada (elevação) — a linha cinza estática já une
   visualmente os 5 passos; esta camada por cima "cresce" da esquerda para
   a direita quando a secção entra em ecrã, para reforçar a ideia de
   sequência/progresso em vez de uma simples régua decorativa. Usa :has()
   como progressive enhancement — sem suporte, a linha cinza de baixo já
   comunica a mesma sequência sozinha, nada quebra. */
@media(min-width:1024px){
  .process::after{
    content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:0;
    background:var(--color-accent); transform-origin:left; transform:scaleX(0);
    transition:transform 1.1s var(--ease-out); pointer-events:none;
  }
  .process:has(.process-step.is-visible)::after{ transform:scaleX(1); }
}
@media (prefers-reduced-motion: reduce){ .process::after{ transition:none; } }
.process-step h3{ font-size:1.05rem; margin-bottom:6px; }
.process-step p{ font-size:.9rem; color:var(--color-text-muted); }
/* Fecho fotográfico do processo (Ultra Premium Image Framework) — a
   entrega de chaves é o único momento emocional que resume os 5 passos;
   o CTA fica dentro do mesmo bloco, como uma legenda com intenção, não um
   botão solto no fim da página. */
.process-close{ margin-top:var(--space-12); text-align:center; }
.process-close-photo{ margin:0 auto var(--space-8); max-width:1120px; }
.process-close-photo .photo-frame-tag{ left:50%; transform:translateX(-50%); white-space:nowrap; }
/* Cascata de entrada — os 5 passos deixam de aparecer em bloco; a leitura
   ganha sentido de sequência, reforçando a própria ideia de "processo". */
.process .process-step:nth-child(1){ transition-delay:0ms; }
.process .process-step:nth-child(2){ transition-delay:.09s; }
.process .process-step:nth-child(3){ transition-delay:.18s; }
.process .process-step:nth-child(4){ transition-delay:.27s; }
.process .process-step:nth-child(5){ transition-delay:.36s; }
.process-step:hover{ transition-delay:0s; }

/* ===================== 5. SERVIÇOS ===================== */
.servicos-grid{ display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media(min-width:640px){ .servicos-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .servicos-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; } }
/* Quebra editorial da simetria (Parte D — Elevação, Apêndice 2: "grids
   perfeitamente simétricas sem hierarquia" é um sinal de geração automática).
   Os 2 serviços ligados ao DUAT ocupam 2 colunas — reflectindo a ênfase
   real da Direcção Criativa (Fase 1/9.6), não uma variação decorativa. */
@media(min-width:1024px){ .card--featured{ grid-column:span 2; } }
.card--featured{ border-color:var(--color-accent); position:relative; }
/* Elevação: o cartão "mais procurado" já ganha o selo do ícone com o
   mesmo tratamento de superfície dos outros — aqui fica dourado mesmo em
   repouso, para o destaque ler-se antes de qualquer hover. */
.card--featured .card-icon-badge{ background:rgba(249,210,8,.16); }
.card-tag{
  position:absolute; top:var(--space-6); right:var(--space-6);
  background:var(--color-accent); color:var(--color-primary);
  font-size:.68rem; font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:.04em; padding:3px 9px; border-radius:20px;
}
/* Numeração discreta (elevação) — cada cartão "normal" fica com o seu
   índice no canto superior direito. Só os cartões em destaque não a têm
   (o render.js omite-a nesse caso) porque esse canto já está ocupado
   pelo .card-tag "Mais procurado" — nunca os dois ao mesmo tempo, para
   não colidirem. Reforça "são 8 serviços distintos", não um template a
   repetir-se 8 vezes. */
.card-num{
  position:absolute; top:var(--space-6); right:var(--space-6);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.72rem;
  color:var(--color-text-muted); opacity:.55; letter-spacing:.03em;
}
/* Cascata de entrada dos cartões — Parte D (Elevação): o grid deixa de
   "aparecer em bloco" e passa a revelar em onda, como uma equipa de motion
   design coreografaria, não um template que despeja tudo de uma vez. */
.servicos-grid .card:nth-child(1){ transition-delay:0ms; }
.servicos-grid .card:nth-child(2){ transition-delay:.07s; }
.servicos-grid .card:nth-child(3){ transition-delay:.14s; }
.servicos-grid .card:nth-child(4){ transition-delay:.21s; }
.servicos-grid .card:nth-child(5){ transition-delay:.28s; }
.servicos-grid .card:nth-child(6){ transition-delay:.35s; }
.servicos-grid .card:nth-child(7){ transition-delay:.42s; }
.servicos-grid .card:nth-child(8){ transition-delay:.49s; }
.servicos-grid .card:hover{ transition-delay:0s; }

/* ===================== 6. DUAT ===================== */
.duat{ background:var(--color-primary); color:#fff; position:relative; overflow:hidden; }
/* Costuras de luz — a mesma "vírgula" visual do rodapé (fio dourado fino)
   marca a entrada num capítulo navy; a base esbate para a secção clara
   seguinte, para que o corte nunca seja seco (Parte D — ritmo de filme). */
.duat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(249,210,8,.55), transparent);
  z-index:2; pointer-events:none;
}
.duat::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, transparent, var(--color-bg));
  z-index:0; pointer-events:none;
}
.duat-grid{ display:grid; gap:var(--space-8); position:relative; z-index:2; }
@media(min-width:1024px){ .duat-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:var(--space-16); } }
.duat h2{ color:#fff; }
.duat .kicker{ color:var(--color-accent); }
.duat-list li{
  display:flex; align-items:flex-start; gap:10px; font-size:1rem; color:rgba(255,255,255,.92); margin-bottom:var(--space-3);
  transition:transform var(--duration-fast) var(--ease-standard);
}
.duat-list li:hover{ transform:translateX(4px); }
.duat-list li svg{
  flex-shrink:0; margin-top:3px; width:16px; height:16px; color:var(--color-accent);
  stroke-dasharray:24; stroke-dashoffset:24;
}
/* O visto só "desenha" quando a secção entra em ecrã (a mesma classe
   .is-visible que o IntersectionObserver de scroll.js já atribui ao
   wrapper .reveal) — nunca ao carregar a página fora de vista. */
.duat .reveal.is-visible .duat-list li svg{ animation:duatCheckDraw .5s var(--ease-out) forwards; }
.duat .reveal.is-visible .duat-list li:nth-child(1) svg{ animation-delay:.15s; }
.duat .reveal.is-visible .duat-list li:nth-child(2) svg{ animation-delay:.25s; }
.duat .reveal.is-visible .duat-list li:nth-child(3) svg{ animation-delay:.35s; }
.duat .reveal.is-visible .duat-list li:nth-child(4) svg{ animation-delay:.45s; }
.duat .reveal.is-visible .duat-list li:nth-child(5) svg{ animation-delay:.55s; }
@keyframes duatCheckDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .duat-list li svg{ animation:none; stroke-dashoffset:0; }
  .duat-list li:hover{ transform:none; }
}
/* Fotografia jurídica (Ultra Premium Image Framework) — substitui o motivo
   decorativo por uma imagem real; o anel subtil dourado substitui a sombra
   clara do Design System (que quase não se lê sobre navy), mantendo a
   moldura "premium" sem depender de um fundo claro. */
.duat-photo{ border:1px solid rgba(249,210,8,.22); box-shadow:0 24px 64px rgba(0,0,0,.35); }

/* ===================== 7. SEGMENTOS ===================== */
/* tabs — regras partilhadas em components.css; aqui só o espaçamento do container */
#segmentos .tabs-nav{ margin-top:var(--space-2); }
/* Banner humano (Ultra Premium Image Framework) — antes de qualquer tab
   funcional, a secção mostra quem está do outro lado: uma família na casa
   nova. Justifica a existência (Fase 9 da Direcção Criativa já definia
   "Para Quem É" como a secção mais pessoal do site) e evita a sensação de
   lista de categorias sem rosto. */
.segmentos-photo{ margin-bottom:var(--space-12); }

/* ===================== 8. PORQUE ESCOLHER ===================== */
/* Layout dividido (Ultra Premium Image Framework) — esta era a secção mais
   estática da auditoria anterior (lista numerada, sem qualquer imagem). A
   fotografia de investimento não ilustra a lista — reforça a mensagem de
   "conhecimento profundo do mercado" com uma pessoa real a fazer exactamente
   isso. Em mobile empilha; a lista lê-se sempre primeiro. */
.porque-split{ display:flex; flex-direction:column; gap:var(--space-12); align-items:center; }
@media(min-width:1024px){ .porque-split{ flex-direction:row; align-items:stretch; gap:var(--space-16); } }
.porque-photo{ width:100%; max-width:420px; flex-shrink:0; }
@media(min-width:1024px){ .porque-photo{ max-width:340px; } }
.porque-list{ display:flex; flex-direction:column; max-width:760px; margin:0 auto; width:100%; }
.porque-item{
  display:flex; align-items:center; gap:var(--space-6); padding:var(--space-6) var(--space-4);
  margin:0 calc(var(--space-4) * -1); border-bottom:1px solid var(--color-border); border-radius:var(--radius-btn);
  transition:background-color var(--duration-base) var(--ease-standard), padding-left var(--duration-base) var(--ease-standard);
}
.porque-item:first-child{ border-top:1px solid var(--color-border); }
.porque-item:hover{ background:#fff; padding-left:var(--space-6); }
.porque-num{
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.4rem; color:var(--color-accent-dark);
  width:40px; flex-shrink:0; transition:color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.porque-item:hover .porque-num{ color:var(--color-primary); transform:scale(1.08); }
.porque-item p{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--color-primary); font-size:1.05rem; }

/* ===================== 9. ÁREAS DE ACTUAÇÃO ===================== */
/* A secção perde o padding-bottom por defeito (base.css) para que o
   .areas-close feche a secção rente à borda — resolve o "vão" pálido que
   existia entre Áreas e Contacto (dois fundos claros consecutivos sem
   nenhuma âncora visual entre eles). */
#areas{ padding-bottom:0; }
.areas-grid{ display:grid; gap:var(--space-6); grid-template-columns:repeat(2,1fr); }
@media(min-width:768px){ .areas-grid{ grid-template-columns:repeat(4,1fr); } }
.area-pin{
  text-align:center; padding:var(--space-6) var(--space-3); border-radius:var(--radius-card); background:var(--color-surface);
  border:1px solid var(--color-border); opacity:0; transform:translateY(16px);
  transition:opacity var(--duration-slow) var(--ease-standard), transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-base), box-shadow var(--duration-base);
}
.area-pin.is-visible{ opacity:1; transform:translateY(0); }
/* Craftsmanship C04: a entrada em ecrã usa o timing "standard" (previsível,
   nunca chamativo); só a resposta directa ao hover ganha overshoot — a
   distinção entre "algo que acontece" e "algo que o utilizador provocou". */
.area-pin.is-visible:hover{
  transform:translateY(-6px); border-color:var(--color-accent); box-shadow:var(--shadow-1);
  transition:transform .22s var(--ease-overshoot), border-color var(--duration-base), box-shadow var(--duration-base);
}
@media (prefers-reduced-motion: reduce){ .area-pin{ opacity:1; transform:none; } }
.area-pin svg{ width:26px; height:26px; color:var(--color-primary); margin:0 auto var(--space-3); transition:transform var(--duration-base) var(--ease-standard); }
.area-pin.is-visible:hover svg{ transform:scale(1.14); }
.areas-note{ text-align:center; margin-top:var(--space-8); color:var(--color-text-muted); font-size:.92rem; }

/* Fecho da secção — banda navy full-bleed, funciona como a "vírgula"
   emocional entre a prova de escala nacional (Áreas) e o convite final
   (Contacto). Nunca decorativa: é o único lugar do site que resume, numa
   frase, a promessa inteira antes do CTA de conversão (Fase 4). */
.areas-close{
  position:relative; overflow:hidden; margin-top:var(--space-16);
  background:var(--gradient-institutional); padding:var(--space-16) var(--space-4);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
/* Mesma assinatura de costura de luz usada em DUAT/rodapé — repetição
   deliberada, não acaso: é o motivo que diz "está a entrar num momento
   de pausa/síntese" sempre que o site muda para navy. */
.areas-close::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(249,210,8,.55), transparent);
  z-index:2; pointer-events:none;
}
.areas-close::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:100px;
  background:linear-gradient(to bottom, transparent, var(--color-surface));
  z-index:0; pointer-events:none;
}
/* Overlay dirigido do fecho de Áreas (Ultra Premium Image Framework,
   auto-crítica) — aqui o texto fica centrado, não à esquerda, por isso o
   overlay do Hero (horizontal) não serve: uma vinheta radial suave
   escurece só o centro, onde vivem a frase e o motivo do telhado, e
   desvanece nos cantos para deixar a cidade fotografada respirar. */
.areas-close .photo-bleed::after{
  background:radial-gradient(ellipse at center, rgba(31,32,81,.62) 0%, rgba(31,32,81,.26) 68%);
}
.areas-close p{
  position:relative; z-index:2; color:#fff; font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.9rem); line-height:1.35; max-width:22ch;
}
.areas-close-motif{ position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:340px; opacity:.10; z-index:1; }
@media(max-width:640px){ .areas-close{ padding:var(--space-12) var(--space-4); } .areas-close-motif{ width:220px; } }

/* ===================== 10. CONTACTO ===================== */
.contacto{ background:var(--color-surface); position:relative; overflow:hidden; }
/* wash subtil para o cartão de vidro do formulário ter contra o que se destacar */
.contacto::before{
  content:""; position:absolute; top:-10%; right:-6%; width:min(50vw,520px); height:min(50vw,520px);
  background:radial-gradient(circle, rgba(249,210,8,.10), transparent 70%); pointer-events:none; z-index:0;
}
.contacto .container{ position:relative; z-index:1; }
.contacto-grid{ display:grid; gap:var(--space-12); }
@media(min-width:1024px){ .contacto-grid{ grid-template-columns:1fr 1fr; } }
.contacto-info h2{ margin-bottom:var(--space-4); }
.contacto-lead{ color:var(--color-text-muted); margin-bottom:var(--space-8); font-size:1.05rem; }
/* Fotografia do escritório (Ultra Premium Image Framework) — ancora o "fale
   connosco" num lugar real, antes da lista de contactos; justifica-se por
   resolver exactamente a pergunta que este bloco levanta ("quem vou
   encontrar do outro lado?"). */
.contacto-photo{ margin-bottom:var(--space-8); }
.contacto-detail{ display:flex; gap:12px; align-items:flex-start; margin-bottom:var(--space-4); transition:transform var(--duration-fast) var(--ease-standard); }
.contacto-detail:hover{ transform:translateX(4px); }
.contacto-detail svg{ width:20px; height:20px; color:var(--color-primary); flex-shrink:0; margin-top:2px; transition:color var(--duration-fast) var(--ease-standard); }
.contacto-detail:hover svg{ color:var(--color-accent-dark); }
.contacto-detail strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); margin-bottom:2px; }
.form-card{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-8); box-shadow:var(--shadow-contact), var(--shadow-1); }