/* ==========================================================================
   DEFINIÇÃO TERRENA — Sistema de Design
   "Da linha ao lugar" — grelha técnica, planos, profundidade, luz teal.
   ========================================================================== */

:root{
  /* ---- Paleta oficial (extraída do logótipo Definição Terrena) ---- */
  --ink:            #0c1214;   /* preto mineral */
  --graphite-900:   #142228;
  --graphite-800:   #1b2f38;
  --graphite-700:   #264a5a;   /* grafite / navy da marca */
  --graphite-600:   #34606f;
  --teal-900:       #1c5c52;
  --teal-700:       #2f9d86;
  --teal-500:       #5ecfb4;   /* teal profundo da marca */
  --teal-400:       #89e3d2;   /* teal principal da marca */
  --teal-300:       #c0f2e8;   /* teal claro / highlight */
  --stone-100:      #f6f3ec;   /* branco quente */
  --stone-200:      #efe9db;
  --stone-300:      #e3dac8;   /* bege / calcário */
  --stone-400:      #cabfa8;
  --terracotta:     #b9603e;   /* apontamento, cobertura / centro histórico */
  --terracotta-dim: #8f4c34;

  --bg:             var(--stone-100);
  --fg:             var(--ink);

  /* ---- Tipografia ---- */
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-sans:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Espaçamento / grelha ---- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container-max: 1440px;
  --section-pad: clamp(4rem, 10vw, 9rem);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(.16,.8,.24,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .4s;
  --dur-med: .9s;
  --dur-slow: 1.6s;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
svg{ display:block; }
::selection{ background:var(--teal-400); color:var(--ink); }

/* Skip link (accessibility) */
.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:999;
  background:var(--teal-400); color:var(--ink);
  padding:.8em 1.4em; font-family:var(--font-sans); font-size:.85rem; font-weight:500;
  transition:top .25s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--teal-400); outline-offset:4px;
}

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */
.type-display{
  font-family:var(--font-sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:.92;
  font-size:clamp(2.6rem, 8vw, 7.5rem);
}
.type-h2{
  font-family:var(--font-sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.98;
  font-size:clamp(2rem, 5vw, 4.2rem);
}
.type-h3{
  font-family:var(--font-sans);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.05;
  font-size:clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing:.01em;
}
.type-editorial{
  font-family:var(--font-serif);
  font-weight:400;
  font-style:italic;
  line-height:1.15;
  font-size:clamp(1.6rem, 3.4vw, 3rem);
  letter-spacing:0;
}
.type-lede{
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.4;
  font-size:clamp(1.1rem, 1.6vw, 1.5rem);
}
.type-body{
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.7;
  font-size:clamp(.95rem, 1vw, 1.05rem);
  color:var(--graphite-700);
}
.type-label{
  font-family:var(--font-sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
}
.type-mono-num{
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.on-dark{ color:var(--stone-100); }
.on-dark .type-body{ color:rgba(246,243,236,.72); }
.text-teal{ color:var(--teal-500); }
.text-terracotta{ color:var(--terracotta); }

/* ---------------------------------------------------------------------- */
/* Layout utilities                                                        */
/* ---------------------------------------------------------------------- */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  position:relative;
  padding-block:var(--section-pad);
}
.section-dark{ background:var(--ink); color:var(--stone-100); }
.section-graphite{ background:var(--graphite-800); color:var(--stone-100); }
.section-stone{ background:var(--stone-200); }

.grid{ display:grid; gap:var(--gutter); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-12{ grid-template-columns:repeat(12,1fr); }

@media (max-width:900px){
  .g-2,.g-3{ grid-template-columns:1fr; }
}

/* Section number + label, architectural style ("01 — Conceito") */
.section-tag{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:clamp(1.5rem,4vw,3rem);
  color:var(--teal-700);
}
.section-tag .num{
  font-family:var(--font-sans);
  font-size:.8rem;
  letter-spacing:.08em;
  border:1px solid currentColor;
  padding:.25em .6em;
  border-radius:1px;
}
.section-tag .line{
  flex:0 0 clamp(2rem,6vw,5rem);
  height:1px;
  background:currentColor;
  opacity:.5;
}
.section-tag .label{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; }

/* ---------------------------------------------------------------------- */
/* Marcador geográfico sobre fotografia aérea                              */
/* Ponto + linha-guia + etiqueta. Posiciona-se com left/top em % da figura */
/* que o contém; a cor vem de --accent, definido nessa figura.             */
/* ---------------------------------------------------------------------- */
.geo-figure{ position:relative; margin:0; --accent:var(--teal-400); }
.geo-mark{
  position:absolute; z-index:2;
  left:var(--x); top:var(--y);
  display:flex; align-items:center; gap:.55rem;
  transform:translate(0,-50%);
  pointer-events:none;
}
.geo-mark .dot{
  position:relative; flex:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 1px rgba(4,17,14,.6);
}
.geo-mark .dot::after{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--accent); opacity:.55;
  animation:geo-ping 3.4s var(--ease-out) infinite;
}
.geo-mark .lead{ flex:none; width:clamp(16px,3vw,34px); height:1px; background:var(--accent); opacity:.6; }
.geo-mark .lbl{
  font-family:var(--font-sans); font-size:.66rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--stone-100); white-space:nowrap;
  background:rgba(4,17,14,.62); backdrop-filter:blur(6px);
  padding:.42em .8em; border-left:1px solid var(--accent);
}
/* Variante espelhada, para marcas encostadas ao bordo direito */
.geo-mark--l{ flex-direction:row-reverse; transform:translate(-100%,-50%); }
.geo-mark--l .lbl{ border-left:0; border-right:1px solid var(--accent); }

@keyframes geo-ping{
  0%   { transform:scale(.7); opacity:.7; }
  60%  { transform:scale(1.9); opacity:0; }
  100% { transform:scale(1.9); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .geo-mark .dot::after{ animation:none; opacity:.35; } }
@media (max-width:560px){
  .geo-mark .lbl{ font-size:.58rem; padding:.35em .6em; }
  .geo-mark .lead{ width:14px; }
}

/* Technical coordinate marker, e.g. "40.8412°N · -8.4795°O" */
.coord{
  font-family:var(--font-sans);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--teal-500);
  opacity:.75;
  text-transform:uppercase;
}

/* Corner-bracket frame, like a plan/photo registration mark */
.frame{
  position:relative;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.frame:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -20px rgba(12,18,20,.35);
}
@media (hover:none){ .frame:hover{ transform:none; box-shadow:none; } }
.frame::before,.frame::after,
.frame > .bracket-tl, .frame > .bracket-br{
  content:'';
  position:absolute;
  width:22px; height:22px;
  border-color:var(--teal-400);
  opacity:.85;
  pointer-events:none;
  z-index:2;
}
.frame::before{ top:-1px; left:-1px; border-top:1.5px solid; border-left:1.5px solid; }
.frame::after{ bottom:-1px; right:-1px; border-bottom:1.5px solid; border-right:1.5px solid; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--font-sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.78rem;
  padding:1.05em 1.8em;
  border:1px solid currentColor;
  border-radius:1px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }
.btn-solid{ background:var(--ink); color:var(--stone-100); border-color:var(--ink); }
.btn-solid:hover{ background:var(--teal-500); border-color:var(--teal-500); color:var(--ink); }
.btn-ghost{ color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--stone-100); }
.on-dark .btn-ghost, .section-dark .btn-ghost, .section-graphite .btn-ghost, .hero .btn-ghost{ color:var(--stone-100); border-color:rgba(246,243,236,.55); background:rgba(9,14,16,.3); backdrop-filter:blur(8px); }
.on-dark .btn-ghost:hover, .section-dark .btn-ghost:hover, .section-graphite .btn-ghost:hover, .hero .btn-ghost:hover{ background:rgba(246,243,236,.12); border-color:var(--stone-100); color:var(--stone-100); }
.btn-teal{ background:var(--teal-400); color:var(--ink); border-color:var(--teal-400); }
.btn-teal:hover{ background:var(--stone-100); border-color:var(--stone-100); }

/* ---------------------------------------------------------------------- */
/* Preloader                                                                */
/* ---------------------------------------------------------------------- */
#preloader{
  position:fixed; inset:0; z-index:999;
  background:var(--stone-100);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease-in-out), visibility .9s var(--ease-in-out);
}
/* O MP4 vem primeiro e tem fundo branco: "multiply" funde esse branco com o
   fundo creme. O WebM com transparência não serve de base, porque o Safari e
   todos os browsers de iPhone ignoram a transparência e mostram-no preto. */
#preloader video{ width:min(34vw, 280px); height:auto; mix-blend-mode:multiply; }
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
body.is-loading{ overflow:hidden; height:100vh; }

/* Sem JavaScript, ou com o main.js em falta, só o script é que removia o
   preloader: ficava a tapar a página para sempre. Aqui nem chega a aparecer. */
.no-js #preloader, .js-falhou #preloader{ display:none; }
.no-js body.is-loading, .js-falhou body.is-loading{ overflow:visible; height:auto; }

/* ---------------------------------------------------------------------- */
/* Navigation                                                               */
/* ---------------------------------------------------------------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
/* O vidro vive num pseudo-elemento, não na própria .site-nav: um
   backdrop-filter no elemento torna-o bloco contentor dos descendentes
   position:fixed, o que prendia a gaveta do menu à altura da barra. */
.site-nav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(12,18,20,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0; transition:opacity var(--dur-fast) var(--ease-out);
}
.site-nav.is-scrolled::before{ opacity:1; }
.site-nav.is-scrolled{
  border-bottom-color:rgba(137,227,210,.15);
  padding-block:.75rem;
}
.site-nav .brand{ display:flex; align-items:center; gap:.65rem; color:var(--stone-100); }
.site-nav .brand img{ height:26px; width:auto; }
.site-nav .brand .wordmark{ height:11px; width:auto; opacity:.95; }
.nav-links{ display:flex; align-items:center; gap:clamp(1.2rem,2.4vw,2.6rem); }
.nav-links a{
  color:var(--stone-100);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--teal-400);
  transition:right var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ right:0; }
.nav-links a.is-active{ color:var(--teal-400); }
/* Submenu de Projetos ---------------------------------------------------- */
.nav-item{ position:relative; }
.nav-item.has-sub{ display:flex; align-items:center; gap:.45rem; }
/* Ponte invisível: mantém o :hover vivo na folga entre o item e o painel */
.nav-item.has-sub::after{ content:''; position:absolute; top:100%; left:0; right:0; height:1.1rem; }
.nav-sub-toggle{ display:flex; align-items:center; padding:0 0 4px; color:inherit; opacity:.65; }
.nav-sub-toggle svg{ width:10px; height:6px; transition:transform var(--dur-fast) var(--ease-out); }
.nav-item:hover .nav-sub-toggle, .nav-item:focus-within .nav-sub-toggle{ opacity:1; }
.nav-item:hover .nav-sub-toggle svg,
.nav-item:focus-within .nav-sub-toggle svg,
.nav-item.is-open .nav-sub-toggle svg{ transform:rotate(180deg); }

.nav-sub{
  position:absolute; top:calc(100% + 1.1rem); left:-.9rem; z-index:5;
  min-width:238px; padding:.45rem;
  display:flex; flex-direction:column;
  background:rgba(12,18,20,.94);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(137,227,210,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub,
.nav-item.is-open .nav-sub{ opacity:1; visibility:visible; transform:none; }
.nav-sub a{ display:flex; flex-direction:column; gap:.3rem; padding:.72rem .9rem; }
.nav-sub a::after{ display:none; }
.nav-sub a:hover{ background:rgba(246,243,236,.07); }
.nav-sub .p-name{ font-size:.78rem; letter-spacing:.12em; }
.nav-sub .p-state{
  font-family:var(--font-sans); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--teal-400); opacity:.75;
}
.nav-sub a.is-active .p-name{ color:var(--teal-400); }

.nav-toggle{ display:none; color:var(--stone-100); position:relative; z-index:202; }
.nav-toggle .i-burger{ display:block; }
.nav-toggle .i-close{ display:none; }
.nav-toggle[aria-expanded="true"] .i-burger{ display:none; }
.nav-toggle[aria-expanded="true"] .i-close{ display:block; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    background:var(--graphite-900); flex-direction:column; align-items:flex-start;
    padding:6.5rem 2rem 2rem; gap:1.7rem;
    transform:translateX(100%); transition:transform .55s var(--ease-in-out);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1rem; }
  .nav-toggle{ display:block; z-index:201; }
  .nav-item.has-sub{ flex-direction:column; align-items:flex-start; gap:1.2rem; width:100%; }
  .nav-item.has-sub::after{ display:none; }
  .nav-sub-toggle{ display:none; }
  .nav-sub{
    position:static; min-width:0; padding:0 0 0 1.1rem; gap:1.2rem;
    opacity:1; visibility:visible; transform:none;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; border-left:1px solid rgba(137,227,210,.25);
  }
  .nav-sub a{ padding:0; gap:.2rem; }
  .nav-sub a:hover{ background:none; }
  .nav-sub .p-name{ font-size:.92rem; }
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll                                                         */
/* ---------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="line"]{ transform:none; clip-path:inset(0 0 99.5% 0); transition:clip-path 1s var(--ease-out); opacity:1; }
[data-reveal="line"].is-visible{ clip-path:inset(0 0 0 0); }
[data-reveal="scale"]{ transform:scale(1.08); }

/* O mesmo para o conteúdo: todos os blocos nascem invisíveis à espera do
   observador. Sem script, aparecem de uma vez, sem animação. */
.no-js [data-reveal], .js-falhou [data-reveal],
.no-js [data-reveal="line"], .js-falhou [data-reveal="line"]{
  opacity:1; transform:none; clip-path:none; transition:none;
}
/* `scale(1)` não muda nada à vista, mas qualquer transform diferente de
   `none` cria um contexto de empilhamento, e um contexto de empilhamento
   isola o mix-blend-mode dos descendentes. Era isso que fazia aparecer o
   retângulo preto do vídeo no cartão dos contactos: em vez de se misturar
   com a secção escura, o vídeo misturava-se com o interior do contentor,
   que é transparente. Tem de acabar em `none`. */
[data-reveal="scale"].is-visible{ transform:none; }

[data-reveal-group] > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.site-footer{
  background:var(--ink); color:var(--stone-100);
  padding-block:clamp(3.5rem,8vw,6rem) 2rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr .8fr .8fr .8fr; gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
  border-bottom:1px solid rgba(246,243,236,.12);
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--teal-400); margin-bottom:1.2rem; }
.footer-grid li{ margin-bottom:.6rem; }
.footer-grid a{ font-size:.9rem; color:rgba(246,243,236,.75); transition:color var(--dur-fast); }
.footer-grid a:hover{ color:var(--teal-300); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; flex-wrap:wrap; gap:1rem; }
.footer-bottom .type-label{ color:rgba(246,243,236,.45); }

/* Identificação obrigatória da sociedade (art. 171.º CSC, art. 10.º DL 7/2004).
   Fica acima da linha de fecho, em corpo pequeno: é informação legal, não é
   para ler, é para estar lá. */
.footer-identidade{ padding-top:1.6rem; }
.footer-identidade .type-label{
  color:rgba(246,243,236,.32); line-height:1.7; letter-spacing:.08em;
  text-transform:none; font-size:.66rem; max-width:70ch;
}

/* ---------------------------------------------------------------------- */
/* Misc components                                                          */
/* ---------------------------------------------------------------------- */
.hairline{ height:1px; background:currentColor; opacity:.15; }

.stat{ display:flex; flex-direction:column; gap:.4rem; }
.stat .num{ font-family:var(--font-sans); font-weight:600; font-size:clamp(2.4rem,5vw,4rem); line-height:1; }
.stat .cap{ font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--teal-600,var(--teal-500)); }

.pill{
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid rgba(137,227,210,.4); color:var(--teal-400);
  padding:.4em 1em; border-radius:100px; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  white-space:nowrap;
}

/* Before / after compare slider */
.compare{
  position:relative; overflow:hidden; aspect-ratio:16/10; cursor:ew-resize; user-select:none;
  touch-action:pan-y;
}
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .after{ clip-path:inset(0 0 0 50%); }
.compare .handle{
  position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--stone-100);
  transform:translateX(-.5px);
}
.compare .handle .grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--stone-100);
  display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.compare .tag{
  position:absolute; bottom:1.1rem; z-index:3;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  color:var(--stone-100); background:rgba(12,18,20,.55); padding:.5em 1em; backdrop-filter:blur(6px);
}
.compare .tag.tag-before{ left:1.1rem; }
.compare .tag.tag-after{ right:1.1rem; }

/* Marquee (scroll strip) */
.marquee{ overflow:hidden; white-space:nowrap; border-top:1px solid rgba(38,74,90,.2); border-bottom:1px solid rgba(38,74,90,.2); }
.marquee .track{ display:inline-flex; animation:marquee 34s linear infinite; }
.marquee span{ display:inline-flex; align-items:center; padding:1.1rem 3rem; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.16em; font-size:.85rem; gap:1.6rem; }
.marquee span::after{ content:'—'; opacity:.4; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Utility spacing */
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.eyebrow{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-400); }

/* Floating contact action */
.fab-contact{
  position:fixed; right:clamp(1.1rem,3vw,2rem); bottom:clamp(1.1rem,3vw,2rem); z-index:250;
  opacity:0; transform:translateY(14px) scale(.94); pointer-events:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.fab-contact.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.fab-btn{
  display:flex; align-items:center; gap:.6rem;
  background:var(--ink); color:var(--stone-100);
  border:1px solid rgba(137,227,210,.35);
  padding:.9em 1em; border-radius:100px;
  box-shadow:0 14px 32px -12px rgba(12,18,20,.5);
  transition:background .35s var(--ease-out), padding .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.fab-btn svg{ width:20px; height:20px; flex:none; color:var(--teal-400); }
.fab-btn .fab-label{
  font-family:var(--font-sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .35s var(--ease-out), opacity .3s var(--ease-out);
}
.fab-btn:hover{ background:var(--teal-500); color:var(--ink); box-shadow:0 18px 36px -12px rgba(12,18,20,.55); }
.fab-btn:hover svg{ color:var(--ink); }
.fab-btn:hover .fab-label{ max-width:120px; opacity:1; }
@media (hover:none){ .fab-btn .fab-label{ max-width:120px; opacity:1; margin-left:-.1rem; } }

/* Back to top / scroll progress */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; background:var(--teal-400); z-index:300; width:0%;
  transition:width .1s linear;
}

/* ==========================================================================
   HERO (full-bleed)
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  background:var(--ink);
}
.hero-media{ position:absolute; inset:-6% -2%; z-index:0; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; }
/* Duotone colour-grade: unifies any source photo with the brand palette so the
   hero never looks like a raw real-estate snapshot, regardless of the asset. */
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(165deg, rgba(12,26,28,.58) 0%, rgba(18,42,45,.32) 45%, rgba(10,16,18,.5) 100%);
  mix-blend-mode:multiply;
}
.hero-media::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 18% 100%, rgba(94,207,180,.16), transparent 60%);
  mix-blend-mode:screen;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(9,14,16,.96) 0%, rgba(9,14,16,.62) 32%, rgba(9,14,16,.18) 58%, rgba(9,14,16,.4) 100%);
}
.hero-grain{ position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none; 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-grid-lines{ position:absolute; inset:0; z-index:1; display:flex; justify-content:space-between; padding-inline:var(--gutter); pointer-events:none; opacity:.35; }
.hero-grid-lines span{ width:1px; height:100%; background:linear-gradient(180deg, transparent, rgba(137,227,210,.5) 40%, transparent); }

.hero-top{ position:relative; z-index:2; padding-top:clamp(6rem,12vw,8.5rem); }
.hero-top .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.hero-ruler{ flex:1; display:flex; align-items:center; gap:.9rem; min-width:0; }
.hero-ruler .line{ flex:1; height:1px; background:linear-gradient(90deg, rgba(137,227,210,.55), transparent); min-width:2rem; }
.hero-ruler .tag{ white-space:nowrap; }

.hero-content{ position:relative; z-index:2; align-self:end; padding-bottom:clamp(2.4rem,6vw,4rem); }
.hero-kicker{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:.9rem; }
.hero-kicker .idx{ font-family:var(--font-sans); font-size:.72rem; color:var(--teal-400); border:1px solid rgba(137,227,210,.4); padding:.2em .55em; letter-spacing:.1em; }
.hero-title{ display:block; }
.hero-title .accent{
  display:block;
  font-family:var(--font-serif);
  font-weight:400; font-style:italic; text-transform:none;
  color:var(--teal-300);
  font-size:.62em;
  letter-spacing:0;
  line-height:1.05;
  margin-top:.06em;
}
.hero-sub{ margin-top:1.5rem; max-width:44ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; align-items:center; }

.hero-bottom{ position:relative; z-index:2; padding-bottom:clamp(1.6rem,4vw,2.4rem); }
.hero-bottom .container{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.hero-scroll{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.hero-scroll span{ width:1px; height:38px; background:linear-gradient(180deg, var(--teal-400), transparent); animation:scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:0; transform:scaleY(0); transform-origin:top;} 40%{opacity:1; transform:scaleY(1); transform-origin:top;} 60%{opacity:1; transform:scaleY(1); transform-origin:bottom;} 100%{opacity:0; transform:scaleY(0); transform-origin:bottom;} }
.hero-corner-marks{ display:flex; gap:.4rem; }
.hero-corner-marks span{ width:5px; height:5px; border:1px solid rgba(246,243,236,.4); }

@media (max-width:640px){
  .br-desktop{ display:none; }
  .hero{ grid-template-rows:auto 1fr auto; }
  .hero-top{ padding-top:5.5rem; }
  .hero-ruler{ display:none; }
  .hero-corner-marks{ display:none; }
  .hero-content{ padding-bottom:1.6rem; }
  .hero-actions{ margin-top:2rem; }
}

/* ==========================================================================
   CONCEITO
   ========================================================================== */
.concept-layout{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); align-items:start; }
.concept-copy{ padding-top:.6rem; }
.concept-diagram{ margin-top:clamp(3rem,7vw,6rem); }
.concept-diagram svg{ width:100%; height:auto; aspect-ratio:1200/320; display:block; }
.cd-label{ font-family:var(--font-sans); font-size:12px; letter-spacing:.14em; fill:var(--graphite-600); }
.cd-stage{ opacity:.92; }
@media (max-width:900px){
  .concept-layout{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .concept-diagram{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; }
  .concept-diagram svg{ width:640px; max-width:none; }
}

/* ==========================================================================
   FLAGSHIP (Oliveira Plaza teaser)
   ========================================================================== */
.flagship-head{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,6vw,4rem); }
.flagship-media{ position:relative; margin-inline:var(--gutter); aspect-ratio:16/8; overflow:hidden; }
@media (max-width:700px){ .flagship-media{ aspect-ratio:3/4; } }
.flagship-media img{ width:100%; height:100%; object-fit:cover; }
.flagship-media::before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,18,20,.88), rgba(12,18,20,.05) 55%); z-index:1; }
.flagship-overlay{ position:absolute; z-index:2; left:0; right:0; bottom:2.4rem; }
.flagship-overlay p{ max-width:52ch; }
.flagship-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); margin-top:clamp(3rem,7vw,5rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid rgba(246,243,236,.14); }
.flagship-stats .stat{ position:relative; padding-left:1.3rem; }
.flagship-stats .stat::before{ content:''; position:absolute; left:0; top:.15em; bottom:.3em; width:1px; background:rgba(137,227,210,.4); }
.flagship-stats .stat .num{ color:var(--stone-100); }
.flagship-stats .stat .cap{ color:rgba(246,243,236,.55); }
.flagship-stats--light{ grid-template-columns:repeat(3,1fr); border-top-color:rgba(38,74,90,.2); }
.flagship-stats--light .stat::before{ background:rgba(38,74,90,.35); }
.flagship-stats--light .stat .num{ color:var(--ink); }
.flagship-stats--light .stat .cap{ color:var(--graphite-600); }
@media (max-width:760px){ .flagship-stats--light{ grid-template-columns:repeat(2,1fr); } }
.flagship-cta{ margin-top:clamp(2.5rem,5vw,3.5rem); }
@media (max-width:760px){ .flagship-stats{ grid-template-columns:repeat(2,1fr); row-gap:2rem; } }

/* ==========================================================================
   MEMÓRIA / FUTURO (compare)
   ========================================================================== */
.memory-head{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); align-items:end; }
.memory-copy{ max-width:48ch; }
@media (max-width:900px){ .memory-head{ grid-template-columns:1fr; } }

/* ==========================================================================
   PILARES
   ========================================================================== */
.pillars-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); }
.pillar{ padding-top:1.6rem; border-top:1px solid rgba(38,74,90,.25); }
.pillar-num{ display:block; color:var(--teal-700); font-size:.8rem; margin-bottom:1.6rem; }
.pillar h3{ margin-bottom:.9rem; }

/* Shared hover feedback for numbered "spec card" pattern (pillar, usp-card,
   method-card, process-step, typ-tag cards): border lights up in teal and the
   index number brightens — a small, purposeful cue, not decoration. */
.pillar, .usp-card, .method-card, .process-step{
  transition:border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.pillar:hover, .usp-card:hover, .method-card:hover, .process-step:hover{
  border-top-color:var(--teal-500); transform:translateY(-3px);
}
.pillar-num, .usp-num, .process-num{ transition:color .4s var(--ease-out); }
.pillar:hover .pillar-num, .usp-card:hover .usp-num, .method-card:hover .usp-num, .process-step:hover .process-num{
  color:var(--teal-500);
}
@media (hover:none){
  .pillar:hover, .usp-card:hover, .method-card:hover, .process-step:hover{ transform:none; }
}
@media (max-width:1000px){ .pillars-grid{ grid-template-columns:1fr 1fr; row-gap:2.6rem; } }
@media (max-width:560px){ .pillars-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   VIDEO STRIP (Localização)
   ========================================================================== */
.section-video-strip{ position:relative; height:72vh; min-height:420px; overflow:hidden; display:flex; align-items:center; background:var(--ink); }
.section-video-strip video{ position:absolute; inset:-6% 0; width:100%; height:112%; object-fit:cover; }
.vs-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,18,20,.55), rgba(12,18,20,.35) 40%, rgba(12,18,20,.75)); }
.vs-content{ position:relative; z-index:1; }
.vs-content .type-editorial{ margin-top:.8rem; max-width:22ch; }

/* ==========================================================================
   CTA INVESTIR
   ========================================================================== */
.cta-invest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); align-items:center; }
@media (max-width:860px){ .cta-invest-grid{ grid-template-columns:1fr; gap:2.5rem; } }