/* ===================================================================
   MEDIDAS EXACTAS — Design System
   Cozinhas, roupeiros e mobiliário por medida — segmento premium
=================================================================== */

/* Fontes carregadas via <link> no <head> de cada página (mais rápido do que @import) */

:root{
  --ink:#161210;
  --ink-soft:#2c2620;
  --ink-2:#1e1815;
  --paper:#f6f3ec;
  --paper-2:#efe8d9;
  --paper-3:#e7dfcb;
  --stone:#8f8776;
  --stone-light:#b8b09c;
  --gold:#d89a4e;
  --gold-light:#efc287;
  --gold-deep:#c2621f;
  --gradient-warm: linear-gradient(135deg, #f7c968 0%, #e0912f 45%, #c2621f 100%);
  --hero-green:#a3d13c;
  --hero-green-dark:#8fb832;
  --line: rgba(21,19,15,0.13);
  --line-light: rgba(246,243,236,0.18);
  --shadow: 0 30px 60px -20px rgba(21,19,15,0.35);

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --container: 1400px;
  --pad: clamp(24px, 5vw, 80px);
  --section-pad: clamp(56px, 6vw, 96px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--ink); overflow-x:hidden; width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
/* `color:inherit` é essencial: por omissão um <button> NÃO herda a cor do texto à
   volta — usa a cor de sistema do browser (preto no Chrome, azul no Safari do
   iPhone). Como os ícones em SVG destes botões são desenhados com
   `stroke="currentColor"`, sem isto ficavam da cor de sistema em vez da do site. */
button{ font-family:inherit; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:none; border:none; padding:0; outline:none; }
input,textarea,select{ font-family:inherit; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.08; margin:0; letter-spacing:-0.01em; }
.eyebrow{
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:22px;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.on-dark{ color:var(--gold-light); }

.h-display{ font-size:clamp(46px, 6.4vw, 96px); }
.h-xl{ font-size:clamp(38px, 5vw, 68px); }
.h-lg{ font-size:clamp(30px, 3.6vw, 46px); }
.h-md{ font-size:clamp(24px, 2.4vw, 32px); }
.italic{
  font-style:italic; font-weight:500;
  background-image:var(--gradient-warm);
  background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  display:inline-block;
}

.lede{ font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:var(--ink-soft); font-weight:300; max-width:52ch; }
.on-dark .lede, .lede.on-dark{ color:#d9d3c4; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 34px; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid transparent; border-radius:8px; background:var(--gold); color:#231604;
  overflow:hidden; transition:transform .3s ease, background .3s ease;
  white-space:nowrap; box-shadow:none;
}
.btn > span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; }
.btn:hover{ background:var(--gold-light); box-shadow:none; }

.btn-outline{ background:transparent; color:var(--paper); border:1px solid rgba(246,243,236,0.4); box-shadow:none; }
.btn-outline:hover{ border-color:var(--gold-light); background:rgba(246,243,236,0.06); box-shadow:none; }

.btn-on-dark{ border:1px solid rgba(246,243,236,0.4); background:transparent; color:var(--paper); box-shadow:none; }
.btn-on-dark:hover{ border-color:var(--gold-light); background:rgba(246,243,236,0.06); }

.btn-light{ background:var(--paper); color:var(--ink); box-shadow:none; }
.btn-light:hover{ background:var(--gold-light); color:#231604; box-shadow:none; }

.text-link{ position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.section.dark .text-link{ color:var(--paper); }
.text-link::after{ content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.65,0,.35,1); }
.text-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.text-link svg{ transition:transform .35s ease; }
.text-link:hover svg{ transform:translateX(5px); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  background:transparent; box-shadow:none; backdrop-filter:none;
  transition:padding .4s ease, background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
  mix-blend-mode:normal;
}
.site-header.is-dark-page{ }
.site-header .logo{ display:flex; align-items:center; line-height:1; z-index:1201; position:relative; }
.logo-row{ display:flex; align-items:center; gap:12px; }
.logo-icon-img{ height:42px; width:42px; flex-shrink:0; object-fit:contain; display:block; transition:filter .3s ease; }
.logo-name-mask{
  display:inline-block; height:34px; aspect-ratio:2172/516; flex-shrink:0;
  object-fit:contain; object-position:left center;
  transition:filter .3s ease;
}

.site-header.on-light:not(.scrolled) .logo-name-mask{ filter:invert(1); }

.site-header.scrolled{
  padding:14px var(--pad);
  background:var(--ink);
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.4);
}

.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav a{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--paper); position:relative; padding:4px 0;
}
.site-header.on-light:not(.scrolled) .main-nav a{ color:var(--ink); }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold-light); transition:width .35s ease; }
.site-header.on-light:not(.scrolled) .main-nav a::after{ background:var(--gold); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }

.nav-cta{
  display:inline-flex; align-items:center; padding:12px 24px !important; border:1px solid transparent;
  background:var(--gold); color:#231604 !important; font-size:11.5px !important; font-weight:600;
  border-radius:8px; transition:background .3s ease;
  box-shadow:none;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--gold-light); box-shadow:none; }
.site-header.on-light:not(.scrolled) .nav-cta{ color:#231604 !important; }

.burger{
  display:none; width:26px; height:18px; position:relative; z-index:1201; background:none; border:0; padding:0;
}
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--paper); transition:all .35s ease; }
.site-header.on-light:not(.scrolled) .burger span{ background:var(--ink); }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.nav-open .burger span{ background:var(--paper) !important; }
.nav-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; background:var(--ink); z-index:1190;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px;
  padding:0 var(--pad);
  transform:translateY(-100%); transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.nav-open .mobile-nav{ transform:translateY(0); }
.mobile-nav-close{
  position:absolute; top:26px; right:var(--pad); width:44px; height:44px;
  border:0; background:none; display:flex; align-items:center; justify-content:center; color:var(--paper);
}
.mobile-nav-close svg{ width:18px; height:18px; }
.mobile-nav a{ font-family:var(--serif); font-size:clamp(32px,7vw,54px); color:var(--paper); padding:10px 0; border-bottom:1px solid var(--line-light); width:100%; }
.mobile-nav .m-sub{ margin-top:20px; display:flex; gap:24px; }
.mobile-nav .m-sub a{ font-family:var(--sans); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; border:0; width:auto; color:var(--stone-light); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(21,19,15,0.35) 0%, rgba(21,19,15,0.25) 40%, rgba(21,19,15,0.82) 100%), center/cover no-repeat;
  color:var(--paper); overflow:hidden;
}
.hero.has-video{ background:var(--ink); }
.hero-video-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); pointer-events:none; }
.hero-video-mask{
  position:absolute; inset:0; z-index:1; background:var(--ink);
  opacity:1; transition:opacity .7s ease; pointer-events:none;
}
.hero-video-mask.hidden{ opacity:0; }
.hero-video-wrap mux-player{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  --media-object-fit:cover;
  --controls:none;
  --play-button:none;
  --center-controls:none;
  --bottom-play-button:none;
  --seek-backward-button:none;
  --seek-forward-button:none;
  --cast-button:none;
  --airplay-button:none;
  --pip-button:none;
  --fullscreen-button:none;
  --rendition-menu-button:none;
  --captions-button:none;
  --playback-rate-button:none;
  --time-display:none;
  --volume-range:none;
  --title-display:none;
  --loading-indicator:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(21,19,15,0.35) 0%, rgba(21,19,15,0.22) 40%, rgba(21,19,15,0.85) 100%);
}
.hero-top-shadow{
  position:absolute; top:0; left:0; right:0; height:480px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 20%, rgba(0,0,0,0.48) 42%, rgba(0,0,0,0.2) 68%, rgba(0,0,0,0) 100%);
}
.grain::after{ z-index:1; }
.hero-inner{ position:relative; z-index:2; width:100%; padding:110px var(--pad) 100px; }
.hero .eyebrow{ color:var(--gold-light); }
.hero h1{ color:var(--paper); max-width:16ch; }
.hero p.lede{ color:#e7e1d2; margin-top:26px; }
.hero-cta{ display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; }
/* Setas para o visitante passar entre os vídeos do hero.
   Ficam fora do .hero-video-wrap (que é aria-hidden e não recebe cliques). */
.hero-video-nav{
  position:absolute; right:var(--pad); bottom:34px; z-index:3;
  display:flex; align-items:center; gap:12px;
}
.hero-video-btn{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(246,243,236,0.3); background:rgba(21,19,15,0.42);
  color:var(--gold-light); cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.hero-video-btn svg{ width:16px; height:16px; display:block; }
.hero-video-btn:hover{ border-color:var(--gold); background:rgba(21,19,15,0.7); color:var(--gold); }
.hero-video-dots{ display:flex; align-items:center; gap:7px; }
.hero-video-dot{
  width:7px; height:7px; border-radius:50%; padding:0; border:0; cursor:pointer;
  background:rgba(246,243,236,0.32);
  transition:background .2s ease, transform .2s ease;
}
.hero-video-dot:hover{ background:rgba(246,243,236,0.62); }
.hero-video-dot.active{ background:var(--gold-light); transform:scale(1.4); }
/* Nas páginas interiores o título encosta ao fundo do hero: as setas descem um
   pouco, para ficarem à mesma distância do título e da margem. */
.page-hero .hero-video-nav{ bottom:20px; }

@media (max-width:700px){
  .hero-video-nav{ bottom:24px; gap:9px; }
  .page-hero .hero-video-nav{ bottom:16px; }
  .hero-video-btn{ width:34px; height:34px; }
  .hero-video-btn svg{ width:14px; height:14px; }
  .hero-video-dot{ width:6px; height:6px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-video-dot{ transition:none; }
}

/* page hero (interior pages) */
.page-hero{
  position:relative; min-height:64vh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(21,19,15,0.45), rgba(21,19,15,0.82)), center/cover no-repeat;
  color:var(--paper); padding-top:140px;
}
.page-hero-inner{ padding:0 var(--pad) 70px; width:100%; position:relative; z-index:2; }
.page-hero.has-video{ background:var(--ink); overflow:hidden; }
/* Páginas sem vídeo (Termos, Privacidade, Cookies): precisam de fundo escuro
   próprio. Sem ele, o gradiente translúcido do hero assenta sobre o corpo claro
   e a banda fica lavada, com o título claro quase sem contraste. Com o fundo
   escuro fica um hero a sério, igual ao das outras páginas, e liga sem emenda à
   secção escura que vem logo a seguir. */
.page-hero:not(.has-video){ background-color:var(--ink); }
.breadcrumb{ display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone-light); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--gold-light); }

/* ---------- Sections ---------- */
section{ position:relative; }
.section{ padding:var(--section-pad) 0; }
.section.dark{ background:var(--ink); color:var(--paper); }
.section.paper-2{ background:var(--paper-2); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap; }
.section-head.center{ flex-direction:column; align-items:center; text-align:center; }
.section-head .side{ max-width:420px; }
.section-head .side .lede{ margin-top:18px; }

.reveal{ opacity:0; transform:translateY(36px); transition:opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-2{ transition-delay:.12s; }
.reveal-3{ transition-delay:.24s; }
.reveal-4{ transition-delay:.36s; }

/* ---------- Stats (Ducampus-inspired) ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ padding:44px var(--pad); text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat{ position:relative; }
.stat-icon{ width:30px; height:30px; margin:0 auto 16px; display:block; color:var(--gold); opacity:0.5; }
.stat .num{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; font-size:clamp(32px,3.6vw,52px); color:var(--gold); display:flex; justify-content:center; align-items:baseline; gap:2px; white-space:nowrap; }
.stat .label{ margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); }
.section.dark .stat .label{ color:var(--stone-light); }
.section.dark .stats-strip{ border-color:var(--line-light); }
.section.dark .stat{ border-color:var(--line-light); }

/* ---------- Process steps (icon timeline, Ducampus + Epoca inspired) ---------- */
.process{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; margin-top:20px; gap:8px; }
.process::before{ content:''; position:absolute; top:34px; left:34px; right:34px; height:1px; background:var(--line); }
.section.dark .process::before{ background:var(--line-light); }
.process-step{ position:relative; flex:1; text-align:center; padding:0 10px; }
.process-step .icon{
  width:68px; height:68px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px; position:relative; z-index:1;
  transition:background .4s ease, border-color .4s ease;
}
.section.dark .process-step .icon{ background:var(--ink); border-color:var(--line-light); }
.process-step:hover .icon{ background:var(--ink); border-color:var(--gold); }
.process-step:hover .icon svg{ stroke:var(--gold-light); }
.process-step .icon svg{ width:26px; height:26px; stroke:var(--ink); transition:stroke .4s ease; }
.section.dark .process-step .icon svg{ stroke:var(--paper); }
.process-step .num{ font-family:var(--mono); color:var(--gold); font-size:12.5px; letter-spacing:0.05em; margin-bottom:10px; display:block; }
.process-step h4{ font-size:19px; margin-bottom:10px; }
.process-step p{ font-size:14px; color:var(--stone); max-width:26ch; margin:0 auto; }

.process-track{ position:absolute; top:34px; left:34px; right:34px; height:1px; pointer-events:none; }
.process-runner{
  position:absolute; top:50%; left:0; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 12px 3px rgba(217,130,47,0.65);
  opacity:0;
}
.process.in .process-runner{ animation:process-run 7s linear .3s forwards; }
@keyframes process-run{
  0%{ left:0%; opacity:1; }
  100%{ left:100%; opacity:1; }
}
@keyframes process-activate{
  0%{ transform:rotate(0deg); }
  100%{ background:var(--ink); border-color:var(--gold); transform:rotate(360deg); }
}
@keyframes process-activate-icon{ to{ stroke:var(--gold-light); } }
.process.in .process-step:nth-child(2) .icon{ animation:process-activate .8s ease-in-out .3s forwards; }
.process.in .process-step:nth-child(2) .icon svg{ animation:process-activate-icon .4s ease .3s forwards; }
.process.in .process-step:nth-child(3) .icon{ animation:process-activate .8s ease-in-out 2.63s forwards; }
.process.in .process-step:nth-child(3) .icon svg{ animation:process-activate-icon .4s ease 2.63s forwards; }
.process.in .process-step:nth-child(4) .icon{ animation:process-activate .8s ease-in-out 4.97s forwards; }
.process.in .process-step:nth-child(4) .icon svg{ animation:process-activate-icon .4s ease 4.97s forwards; }
.process.in .process-step:nth-child(5) .icon{ animation:process-activate .8s ease-in-out 7.3s forwards; }
.process.in .process-step:nth-child(5) .icon svg{ animation:process-activate-icon .4s ease 7.3s forwards; }
@media (max-width:1100px){
  .process-track{ display:none; }
}
.section.dark .process-step p{ color:var(--stone-light); }

/* ---------- Project grid (Section 5) ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width: 1000px){
  .project-grid{ grid-template-columns:repeat(2,1fr); }
}
.project-card{
  position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:14px; background:var(--ink);
}
.project-card.wide{ grid-column:span 2; aspect-ratio:16/9; }
.project-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,.84,.44,1), filter .8s ease; filter:saturate(0.92) brightness(0.92); }
.project-card:hover img{ transform:scale(1.07); filter:saturate(1) brightness(0.8); }
.project-card .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:38px; background:linear-gradient(180deg, transparent 40%, rgba(15,13,10,0.9) 100%);
  color:var(--paper);
}
.project-card .tag{ margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tag-pill{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  background:none; color:var(--gold-light);
}
.project-card h3{ font-size:clamp(22px,2vw,30px); margin-bottom:10px; transform:translateY(0); }
.project-card .meta{ display:flex; gap:18px; font-size:12.5px; color:#d8d1c0; opacity:0; max-height:0; overflow:hidden; transition:opacity .5s ease, max-height .5s ease; }
.project-card:hover .meta{ opacity:1; max-height:40px; }
.project-card .meta span{ display:flex; align-items:center; gap:6px; }
.project-card .arrow{
  position:absolute; top:28px; right:28px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(246,243,236,0.5);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translate(-8px,8px); transition:all .4s ease;
}
.project-card:hover .arrow{ opacity:1; transform:translate(0); background:var(--gold-light); border-color:var(--gold-light); }
.project-card .arrow svg{ stroke:var(--paper); width:16px; }
.project-card:hover .arrow svg{ stroke:var(--ink); }

/* ---------- Materials (Section 6) ---------- */
/* Sem altura fixa: a altura vem da própria placa 3D, para o título ficar encostado
   ao fundo dela como na página de materiais. Com os 520px fixos que aqui estavam,
   a placa (que se dimensiona pela largura da coluna) ficava mais baixa do que o
   tile e o título caía mais de 100px abaixo da pedra. */
.materials-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.material-tile{ position:relative; overflow:hidden; cursor:pointer; transition:flex .5s ease; }
.material-tile > img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,.84,.44,1); filter:grayscale(0.15) brightness(0.75); }
.material-tile:hover > img{ transform:scale(1.09); filter:grayscale(0) brightness(0.85); }
.material-tile > .tile-swatch{ width:100%; height:100%; transition:transform 1s cubic-bezier(.16,.84,.44,1); }
.material-tile:hover > .tile-swatch{ transform:scale(1.09); }
.material-tile .label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 18px; text-align:center;
  /* z-index:2 garante que o rótulo fica sempre acima das camadas do mockup (corpo mascarado incluído).
     Sem véu/sombra de fundo — só o text-shadow do nome/subtítulo garante a legibilidade. */
  color:var(--paper);
}
.material-tile .label .name{ font-family:var(--serif); font-size:18px; font-weight:500; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.6); }
.material-tile .label .sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-light); margin-top:6px; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.6); }
/* Amostras claras (mármores brancos, lacados creme): o texto claro não tem contraste
   possível, por isso inverte-se para escuro com halo claro. A classe é posta em
   js/main.js a partir da luminância medida da própria textura. */
.material-tile.tile-light .label{ color:var(--ink); }
.material-tile.tile-light .label .name{ text-shadow:0 1px 3px rgba(255,255,255,.95), 0 2px 10px rgba(255,255,255,.7); }
/* Castanho-dourado escuro (não o --gold-deep, que só dava 2.6:1): mantém o tom quente
   da marca e passa os 4.5:1 de contraste em toda a gama de amostras claras. */
.material-tile.tile-light .label .sub{ color:#6b2f07; text-shadow:0 1px 3px rgba(255,255,255,.95), 0 2px 10px rgba(255,255,255,.7); }
.material-tile:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* Estrela das amostras guardadas como "Tenho Interesse" (marcada em js/main.js).
   O círculo anterior ficava pequeno e baço; este é maior, com folga à volta da
   estrela, anel dourado a definir a borda e sombra a separá-lo de mármores claros. */
/* O topo não é 0: a placa 3D é desenhada com margem transparente por cima, e um
   símbolo encostado ao topo do tile ficava a flutuar fora da pedra. */
.tile-star{
  position:absolute; top:26px; right:14px; z-index:3; display:none;
  width:36px; height:36px; border-radius:50%;
  align-items:center; justify-content:center; pointer-events:none;
  background:rgba(10,9,7,0.7);
  border:1px solid rgba(216,154,78,0.55);
  box-shadow:0 2px 10px rgba(10,9,7,0.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.material-tile.is-interested .tile-star{ display:flex; }
.tile-star svg{ width:18px; height:18px; fill:var(--gold); display:block; }
/* nos carrosséis as amostras são mais pequenas, a marca acompanha */
.materials-carousel.auto-carousel .tile-star{ top:20px; right:11px; width:30px; height:30px; }
.materials-carousel.auto-carousel .tile-star svg{ width:15px; height:15px; }

/* ---------- StoneMockup — placa 3D reutilizável com textura substituível ----------
   Uso: <div class="stone-mockup" data-texture="img/materials/x.jpg">...</div>
   Trocar de pedra = mudar data-texture (ou setStoneMockupTexture(el,url) em js/main.js).
   Camadas independentes, cada uma com uma responsabilidade:
     geometria  → a silhueta alfa do PNG base, aplicada como mask-image em .sm-body
                  (única fonte de verdade: a textura nunca sai da placa, nada dentro dela fica sem textura)
     textura    → .sm-face (fill + 4 faces); todas com o mesmo cover/posição → material contínuo
     iluminação → o mesmo PNG base em mix-blend-mode:multiply (luminância lisa e neutra por face)
     sombra     → .sm-shadow, uma sombra projetada no chão, FORA do corpo mascarado */
.stone-mockup{ position:relative; width:100%; aspect-ratio:1024/1536; transition:transform 1s cubic-bezier(.16,.84,.44,1); }
.material-tile:hover .stone-mockup{ transform:scale(1.05); }
.stone-mockup .sm-shadow{ display:none; }
/* sem z-index: a ordem no DOM (sombra → corpo) já os empilha; assim o corpo não passa por cima do .label */
.stone-mockup .sm-body{
  position:absolute; inset:0; isolation:isolate;
  -webkit-mask-image:url('../img/mockup/stone-slabs-base.png?v=4'); mask-image:url('../img/mockup/stone-slabs-base.png?v=4');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.stone-mockup .sm-face{ position:absolute; inset:0; background-size:cover; background-position:center; }
/* Os polígonos podem sobrepor-se/exceder à vontade: a máscara recorta o excesso e, como todas as
   faces mostram a mesma imagem na mesma posição, sobreposições são invisíveis. */
.stone-mockup .sm-face.a-front{ clip-path:polygon(5% 9%, 63.3% 3.5%, 64.2% 97.5%, 5% 94%); }
.stone-mockup .sm-face.a-side{ clip-path:polygon(61.5% 3.5%, 69% 4.5%, 70% 97%, 62.3% 97.5%); }
.stone-mockup .sm-face.b-front{ clip-path:polygon(63.5% 12%, 90% 8%, 86% 95%, 63% 92%); }
.stone-mockup .sm-face.b-side{ clip-path:polygon(88% 8%, 95% 9%, 90.5% 95%, 83.5% 95%); }
.stone-mockup .sm-base{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:multiply; pointer-events:none; }

/* ---------- Painel de amostra de material ---------- */
.material-drawer-backdrop{
  position:fixed; inset:0; background:rgba(10,9,7,0.72); z-index:2000;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.material-drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.material-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(460px, 100vw);
  background:var(--ink); color:var(--paper); z-index:2001; border-left:1px solid var(--line-light);
  transform:translateX(100%); transition:transform .45s cubic-bezier(.16,.84,.44,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.material-drawer.open{ transform:translateX(0); }
.material-drawer-close{
  position:absolute; top:20px; right:20px; z-index:2; width:40px; height:40px; border-radius:50%;
  background:rgba(10,9,7,0.55); border:1px solid rgba(255,255,255,0.25); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.material-drawer-close svg{ stroke:var(--paper); width:16px; }
.material-drawer-media{ position:relative; width:100%; height:190px; background:var(--ink-2); }
.material-drawer-media img, .material-drawer-media .tile-swatch{ width:100%; height:100%; object-fit:cover; display:block; }
.material-drawer-media img[hidden], .material-drawer-media .tile-swatch[hidden]{ display:none; }
.material-drawer-media-label{
  position:absolute; left:0; right:0; bottom:0; padding:20px 32px;
  background:linear-gradient(180deg, transparent, rgba(15,13,10,0.88));
}
.material-drawer-media-label .eyebrow{ color:var(--gold-light); margin-bottom:8px; }
.material-drawer-media-label h2{ color:var(--paper); font-size:clamp(24px,3vw,30px); }
.material-drawer-body{ padding:32px; }
.material-drawer-body .lede{ margin-top:0; }
.material-spec-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;
  margin:28px 0; padding:26px 0; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
}
.material-spec-item .lbl{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--stone-light); margin-bottom:6px;
}
.material-spec-item .val{ font-size:15px; color:var(--paper); }
.material-drawer-cta{ display:block; width:100%; text-align:center; }
/* já marcado: fica em contorno, para se perceber que é para desmarcar */
.material-drawer-cta.is-marked{
  background:transparent; border:1px solid var(--gold); color:var(--gold-light);
}
.material-interest-note{
  margin:10px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  color:var(--stone-light); text-align:center;
}
.material-interest-note a{ color:var(--gold-light); text-decoration:underline; }
.material-drawer-similar{ margin-top:36px; }
/* Os quatro itens têm de ficar sempre iguais: colunas de largura fixa em partes
   iguais, quadrado garantido pelo aspect-ratio, e o nome com altura reservada de
   duas linhas (cortado se for maior). Sem isso, um nome que passa a duas linhas
   desalinhava o item em relação aos outros. */
.material-similar-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; align-items:start;
}
.material-similar-item{
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit; color:inherit; text-align:center;
  min-width:0;
}
.material-similar-item .swatch{
  display:block; width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--ink-2);
}
.material-similar-item .swatch img{ width:100%; height:100%; object-fit:cover; display:block; }
.material-similar-item .name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11px; margin-top:8px; line-height:1.3; height:2.6em; color:var(--stone-light);
}
.material-similar-item:hover .name{ color:var(--gold-light); }
@media (max-width:600px){
  .material-similar-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Carrossel de amostras (página de materiais) ---------- */
.materials-carousel-wrap{ position:relative; }
/* Sem `-webkit-overflow-scrolling:touch`: essa propriedade legada põe o scroll numa
   camada própria no iOS e é uma fonte conhecida de cintilação quando o scrollLeft é
   alterado por código — que é exatamente o que a reciclagem do loop faz. O iOS
   moderno já faz a inércia sem ela. */
/* O fundo é a cor da própria secção, por isso não se vê — serve só de rede de
   segurança: a pista é a camada que o browser repinta ao reciclar o carrossel, e
   assim, se uma placa se atrasar um frame, aparece o escuro do site e não branco.
   (Vai na pista e não em cada amostra: nos tiles ficava um retângulo visível à
   volta da placa 3D, que não preenche o tile todo.) */
.materials-carousel{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:8px; background:var(--ink);
}
.materials-carousel::-webkit-scrollbar{ display:none; }
.materials-carousel .material-tile{ flex:0 0 auto; width:320px; aspect-ratio:2/3; scroll-snap-align:start; }
.materials-carousel .material-tile .label{ padding:32px 24px; }
.materials-carousel .material-tile .label .name{ font-size:22px; }
.materials-carousel .material-tile .label .sub{ font-size:10.5px; }
.carousel-nav{
  position:absolute; top:calc(50% - 4px); transform:translateY(-50%); width:42px; height:42px;
  border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--gold); opacity:0.65; transition:opacity .25s ease, background .25s ease; cursor:pointer; z-index:2;
}
.carousel-nav:hover{ opacity:1; background:rgba(10,9,7,0.35); }
/* stroke-width um pouco maior para a seta manter o mesmo peso visual agora que é
   maior — senão, ampliada, o traço ficava proporcionalmente mais fino. */
.carousel-nav svg{ stroke:var(--gold); width:19px; }
.carousel-nav svg path{ stroke-width:1.8; }
.carousel-nav.prev{ left:-6px; }
.carousel-nav.next{ right:-6px; }
/* Barras de posição por baixo do carrossel (criadas em js/main.js, uma por ecrã de
   conteúdo da unidade que se repete). */
.carousel-dots{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:16px; }
.carousel-dots span{
  width:16px; height:3px; border-radius:2px; background:rgba(246,243,236,0.2);
  transition:background .3s ease, width .3s ease;
}
.carousel-dots span.active{ width:26px; background:var(--gold); }
@media (max-width:900px){
  .materials-carousel .material-tile{ width:240px; }
}

/* ---------- Hierarquia Marca → Linha → Amostras (materiais.html) ----------
   A marca é o cabeçalho forte (serif, com filete), a linha é o subtítulo com o
   eyebrow "Linha" e cada linha traz o seu próprio carrossel de amostras. */
.brand-block{ margin-top:64px; }
.brand-block:first-of-type{ margin-top:8px; }
.brand-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--line-light); margin-bottom:8px;
}
.brand-name{
  font-family:var(--serif); font-size:clamp(26px,3vw,36px); font-weight:500; letter-spacing:-0.01em;
  color:var(--paper); margin:0;
}
/* Com logótipo, a marca aparece numa placa clara — mesmo tratamento dado às logos
   dos fornecedores no topo da página, porque são artes escuras sobre fundo escuro. */
.brand-name-logo{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper); border-radius:10px; padding:12px 22px;
}
/* limita por altura E largura: as logos largas (wordmarks) são travadas pela largura e as
   quase quadradas pela altura, ficando todas com peso visual parecido */
.brand-name-logo img{ width:auto; height:auto; max-height:46px; max-width:150px; object-fit:contain; display:block; }
.brand-meta{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone-light); }
.line-block{ margin-top:38px; }
.line-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.line-eyebrow{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:8px;
}
.line-title{ font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:500; color:var(--paper); margin:0; }
@media (max-width:760px){
  .brand-block{ margin-top:46px; }
  .line-block{ margin-top:30px; }
  .line-head{ align-items:flex-start; gap:10px; margin-bottom:16px; }
  .brand-name-logo{ padding:10px 16px; }
  .brand-name-logo img{ max-height:36px; max-width:120px; }
}

/* ---------- Carrossel automático de 2 linhas (amostras reais, materiais.html) ----------
   Grelha com 2 filas fixas; grid-auto-flow:column preenche cada coluna de cima a baixo,
   ficando 5 colunas visíveis de cada vez (5 em cima + 5 em baixo). Avança sozinho via JS
   (main.js), uma coluna de cada vez, e recomeça ao chegar ao fim. */
.materials-carousel.auto-carousel{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,1fr);
  grid-auto-columns:220px; gap:16px;
}
.materials-carousel.auto-carousel .material-tile{ width:220px; aspect-ratio:2/3; scroll-snap-align:start; }
.materials-carousel.auto-carousel .material-tile .label{ padding:20px 16px; }
.materials-carousel.auto-carousel .material-tile .label .name{ font-size:16px; }
.materials-carousel.auto-carousel .material-tile .label .sub{ font-size:9px; }
@media (max-width:900px){
  .materials-carousel.auto-carousel{ grid-auto-columns:160px; }
  .materials-carousel.auto-carousel .material-tile{ width:160px; }
}

/* ---------- Grelha de amostras (secção Pedras — sem carrossel, quebra de linha) ---------- */
.materials-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.materials-grid .material-tile{ aspect-ratio:2/3; }
.materials-grid .material-tile .label{ padding:32px 24px; }
.materials-grid .material-tile .label .name{ font-size:22px; }
.materials-grid .material-tile .label .sub{ font-size:10.5px; }
@media (max-width:1100px){
  .materials-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:700px){
  .materials-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .materials-grid .material-tile .label{ padding:20px 14px; }
  .materials-grid .material-tile .label .name{ font-size:16px; }
}

/* ---------- Fornecedores (intro da página de Materiais) ---------- */
.materials-intro-row{ display:flex; justify-content:space-between; align-items:center; gap:48px; flex-wrap:wrap; }
.materials-intro-text{ max-width:600px; }
.suppliers-strip{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.suppliers-label{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone-light); }
.suppliers-logos{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.supplier-logo{
  background:var(--paper); border-radius:10px; height:56px; padding:10px 22px;
  display:flex; align-items:center; justify-content:center;
}
.supplier-logo img{ max-height:100%; max-width:130px; width:auto; height:auto; object-fit:contain; display:block; }
@media (max-width:900px){
  .materials-intro-row{ flex-direction:column; align-items:flex-start; }
  .suppliers-strip{ align-items:flex-start; }
}
/* No telemóvel as três logos ficam sempre na mesma linha: em vez de cada caixa ter
   largura própria (que obrigava a quebrar linha), passam a repartir igualmente a
   largura disponível e a imagem acompanha o tamanho da caixa. */
@media (max-width:600px){
  .suppliers-strip{ width:100%; }
  .suppliers-logos{ flex-wrap:nowrap; gap:8px; width:100%; }
  .supplier-logo{ flex:1 1 0; min-width:0; height:46px; padding:8px 10px; }
  .supplier-logo img{ max-width:100%; }
}

/* ---------- Why choose us (Section 7) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.section.dark .why-grid{ background:var(--line-light); border-color:var(--line-light); }
.why-card{ background:var(--paper); padding:52px 36px; }
.section.dark .why-card{ background:var(--ink); }
.why-card .index{ font-family:var(--mono); font-size:13px; letter-spacing:0.05em; color:var(--gold); margin-bottom:34px; display:block; }
.why-card h3{ font-size:23px; margin-bottom:16px; }
.why-card p{ font-size:14.5px; color:var(--stone); line-height:1.7; }
.section.dark .why-card p{ color:var(--stone-light); }

/* ---------- Testimonials (Section 8) ---------- */
.testi-wrap{ max-width:820px; margin:0 auto; text-align:center; position:relative; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation:fadein .8s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.testi-stars{ display:flex; gap:6px; justify-content:center; margin-bottom:28px; }
.testi-stars svg{ width:16px; height:16px; fill:var(--gold-light); }
.testi-quote{ font-family:var(--serif); font-size:clamp(21px,2.4vw,30px); font-weight:400; font-style:italic; line-height:1.5; margin-bottom:38px; }
.testi-person{ display:flex; align-items:center; justify-content:center; gap:16px; }
.testi-person img{ width:54px; height:54px; border-radius:50%; object-fit:cover; }
.avatar-mono{
  width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:14px; font-weight:600;
  flex-shrink:0;
}
.testi-person .name{ font-weight:600; font-size:14px; }
.testi-person .proj{ font-size:12.5px; color:var(--stone-light); }
.testi-dots{ display:flex; gap:10px; justify-content:center; margin-top:44px; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; background:var(--line-light); border:0; padding:0; transition:background .3s ease, transform .3s ease; }
.testi-dots button.active{ background:var(--gold-light); transform:scale(1.3); }

/* ---------- Inspiration masonry (Section 9) ---------- */
.masonry{ column-count:4; column-gap:20px; }
.masonry .m-item{ break-inside:avoid; margin-bottom:20px; position:relative; overflow:hidden; border-radius:2px; cursor:zoom-in; }
.masonry .m-item img{ width:100%; transition:transform .8s cubic-bezier(.16,.84,.44,1); }
.masonry .m-item:hover img{ transform:scale(1.06); }
.masonry .m-item .m-overlay{
  position:absolute; inset:0; background:rgba(15,13,10,0.35); opacity:0; transition:opacity .4s ease;
  display:flex; align-items:center; justify-content:center;
}
.masonry .m-item:hover .m-overlay{ opacity:1; }
.masonry .m-item .m-overlay svg{ width:30px; height:30px; stroke:var(--paper); }
.masonry .m-item .m-tag{ position:absolute; left:16px; bottom:16px; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper); opacity:0; transition:opacity .4s ease; }
.masonry .m-item:hover .m-tag{ opacity:1; }

.filter-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:52px; align-items:center; position:relative; z-index:5; }
.filter-row .lang-switcher{ margin-left:auto; }
@media (max-width:600px){
  .filter-row .lang-switcher{ flex-basis:100%; margin-left:0; display:flex; justify-content:center; margin-top:4px; }
}

/* ---------- Seletor de idioma ---------- */
.lang-switcher{ position:relative; }
.lang-switch-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--line);
  border-radius:30px; background:transparent; color:var(--ink); font-family:var(--mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; transition:all .3s ease;
}
.lang-switch-btn:hover{ border-color:var(--gold); }
.section.dark .lang-switch-btn, .site-header .lang-switch-btn{ border-color:var(--line-light); color:var(--paper); }
.main-nav [data-lang-switcher-mount]{ display:flex; align-items:center; }
.mobile-nav-lang{ margin-top:36px; }
.mobile-nav-lang .lang-switch-btn{
  border-color:var(--line-light); color:var(--paper); font-size:13px; padding:12px 20px;
}
.mobile-nav-lang .lang-switch-list{ left:0; right:auto; }
.lang-switch-list{
  position:absolute; top:calc(100% + 8px); right:0; z-index:20; min-width:150px;
  background:var(--ink); border:1px solid var(--line-light); border-radius:10px; padding:6px; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.lang-switcher.open .lang-switch-list{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.lang-switch-list li{
  padding:10px 14px; font-family:var(--mono); font-size:12.5px; color:var(--stone-light); border-radius:6px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-switch-list li:hover{ background:rgba(217,130,47,0.14); color:var(--paper); }
.lang-switch-list li.active{ color:var(--gold-light); }
.filter-btn{
  padding:11px 24px; border:1px solid var(--line); border-radius:30px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; background:transparent; color:var(--ink); transition:all .3s ease;
}
/* Selecionado: preenchido. Passar o rato: apenas uma pista, propositadamente
   diferente do selecionado — antes eram idênticos, e um botão sob o cursor parecia
   tão selecionado como o verdadeiro. O hover fica ainda restrito a ecrãs com rato,
   porque no toque ele cola-se ao botão depois do toque e ficavam dois com ar de ativos. */
.filter-btn.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.section.dark .filter-btn{ border-color:var(--line-light); color:var(--paper); }
.section.dark .filter-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
@media (hover:hover){
  .filter-btn:hover:not(.active){ border-color:var(--ink); background:rgba(21,19,15,0.06); }
  .section.dark .filter-btn:hover:not(.active){ border-color:var(--gold); background:rgba(216,154,78,0.12); }
}

/* ---------- Final CTA (Section 10) ---------- */
.cta-final{
  position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background-position:center; background-size:cover; background-repeat:no-repeat; color:var(--paper);
  overflow:hidden;
}
.cta-final::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,13,10,0.55), rgba(15,13,10,0.85));
}
.cta-final .container{ position:relative; z-index:1; }
.cta-final h2{ color:var(--paper); max-width:16ch; margin:0 auto; }
.cta-final .lede{ color:#e7e1d2; margin:26px auto 0; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--stone-light); padding:100px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:60px; padding-bottom:70px; border-bottom:1px solid var(--line-light); }
.footer-brand .logo-row{ margin-bottom:22px; }
.footer-brand .logo-name-mask{ height:34px; }
.footer-brand .logo-icon-img{ height:42px; width:42px; }
.footer-brand p{ font-size:14px; max-width:34ch; line-height:1.7; }
.footer-social{ display:flex; gap:14px; margin-top:26px; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--line-light); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s ease; }
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); }
.footer-social svg{ width:15px; height:15px; stroke:var(--paper); }
.footer-social img{ width:15px; height:15px; display:block; object-fit:contain; }
.footer-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper); margin-bottom:26px; }
.footer-col ul li{ margin-bottom:14px; }
.footer-col ul li a{ font-size:14.5px; transition:color .3s ease, padding-left .3s ease; }
.footer-col ul li a:hover{ color:var(--gold-light); padding-left:4px; }
.footer-col address{ font-style:normal; font-size:14.5px; line-height:1.9; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:30px 0; font-size:12.5px; flex-wrap:wrap; gap:12px; }
.footer-bottom a:hover{ color:var(--gold-light); }
.back-to-top{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-light); }
.footer-bottom{ font-family:var(--mono); }
.back-to-top svg{ width:14px; }

/* ---------- Assinatura Flux Studios (rodapé) ---------- */
.flux-sig{
  --flux: #c8875a;
  --ink: #1a1512;
  --muted: #6b5c50;
  --rule: rgba(15,12,10,.16);
  display:inline-flex; align-items:center; gap:13px;
  text-decoration:none; padding:4px 0; line-height:1;
  font-family:var(--sans);
}
.flux-sig--dark{
  --ink:#f4ece4; --muted:#8f8073; --rule:rgba(244,236,228,.2);
}
.flux-sig__mark{ display:block; height:20px; width:auto; }
.flux-sig__rule{ width:1px; height:15px; background:var(--rule); }
.flux-sig__kicker{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.flux-sig__name{
  font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink);
}
.flux-sig__mark, .flux-sig__rule, .flux-sig__kicker, .flux-sig__name{
  transition: color .25s ease, background .25s ease, opacity .25s ease;
}
.flux-sig:hover .flux-sig__rule{ background:var(--flux); }
.flux-sig:hover .flux-sig__kicker{ color:var(--flux); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); }
.field input, .field select, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line); padding:12px 2px; font-size:16px; color:var(--ink);
  transition:border-color .3s ease;
}
.section.dark .field input, .section.dark .field select, .section.dark .field textarea{ color:var(--paper); border-color:var(--line-light); }
.section.dark .field label{ color:var(--stone-light); }

/* ---------- Select personalizado ---------- */
.select-wrap{ position:relative; }
.select-native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.select-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:transparent; border:0; border-bottom:1px solid var(--line); padding:12px 2px;
  font-family:inherit; font-size:16px; color:var(--ink); text-align:left; transition:border-color .3s ease;
}
.select-btn svg{ width:15px; height:15px; flex-shrink:0; color:var(--gold); transition:transform .3s ease; }
.select-wrap.open .select-btn svg{ transform:rotate(180deg); }
.select-btn:focus{ outline:none; border-color:var(--gold); }
.section.dark .select-btn{ color:var(--paper); border-color:var(--line-light); }

.select-list{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:20;
  background:var(--ink); border:1px solid var(--line-light); border-radius:10px;
  padding:6px; margin:0; list-style:none; box-shadow:0 24px 46px -16px rgba(0,0,0,0.65);
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  max-height:none; overflow:visible;
}
.select-wrap.open .select-list{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.select-list li{
  padding:11px 14px; font-family:var(--mono); font-size:13px; letter-spacing:0.02em;
  color:var(--stone-light); border-radius:6px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.select-list li:hover{ background:rgba(217,130,47,0.14); color:var(--paper); }
.select-list li.active{ color:var(--gold-light); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:120px; }

/* ---------- Misc components ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.img-frame{ position:relative; overflow:hidden; border-radius:14px; }
.img-frame img{ width:100%; height:100%; object-fit:cover; }
.img-frame iframe{ width:100%; height:100%; border:0; display:block; }
.img-frame.tall{ aspect-ratio:4/5; }
.img-frame.wide{ aspect-ratio:16/10; }
.img-frame.video-embed{ aspect-ratio:16/9; cursor:auto; }
.img-frame.square{ aspect-ratio:1/1; }

/* ---------- Cards de projetos na página de Serviços ---------- */
.service-cards{ display:flex; flex-direction:column; gap:16px; }
.service-cards .project-card{ aspect-ratio:16/11; }
.service-cards.single .project-card{ aspect-ratio:4/5; }

.badge-float{
  position:absolute; bottom:-30px; left:-30px; background:var(--ink); color:var(--paper);
  padding:28px 32px; border-radius:2px; box-shadow:var(--shadow);
}
.badge-float .num{ font-family:var(--mono); font-weight:500; font-size:34px; color:var(--gold-light); }
.badge-float .txt{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone-light); margin-top:8px; max-width:16ch; }

.value-list{ display:flex; flex-direction:column; gap:0; }
.value-row{ display:grid; grid-template-columns:80px 1fr; gap:30px; padding:34px 0; border-top:1px solid var(--line); align-items:center; }
.value-row:last-child{ border-bottom:1px solid var(--line); }
.section.dark .value-row{ border-color:var(--line-light); }
.value-row .vn{ font-family:var(--mono); font-size:20px; color:var(--gold); }

.contact-box-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px; }
.contact-box{
  border:1px solid var(--line-light); border-radius:14px; padding:28px 30px;
  background:rgba(21,19,15,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  position:relative; z-index:1;
}
.contact-box h4{ font-size:19px; color:var(--paper); margin-bottom:14px; }
.contact-box address{ font-style:normal; font-size:14.5px; color:var(--stone-light); line-height:1.9; }
.contact-box p{ font-size:14.5px; color:var(--stone-light); line-height:1.7; margin:0; }
.contact-box-promo{ border-color:rgba(216,154,78,0.45); background:rgba(216,154,78,0.1); }
/* Card da morada: a foto ocupa toda a altura do lado direito, encostada aos limites
   do card (o posicionamento absoluto ignora o padding), e é esbatida por um véu que
   escurece do centro para a esquerda — assim funde-se com o card em vez de parecer
   uma caixa colada lá dentro, e o texto por cima continua legível. */
.contact-box-office{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:186px; }
.contact-box-office .office-text{ position:relative; z-index:2; max-width:52%; }
/* A própria foto é que se esbate, através de uma máscara — e não um véu escuro por
   cima dela. É esta a diferença que evita a aresta: o fundo do card é translúcido
   (`rgba(21,19,15,.72)` + backdrop-filter), por isso nenhum véu de cor fixa lhe
   acerta, e o ponto onde acabava via-se como uma banda. Assim a foto desvanece
   mesmo para transparente e deixa passar o fundo real do card, seja ele qual for. */
.office-photo{
  position:absolute; top:0; right:0; bottom:0; width:66%; height:100%;
  max-width:none; object-fit:cover; object-position:center; display:block;
  filter:brightness(0.95);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.9) 68%, #000 82%, #000 100%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.9) 68%, #000 82%, #000 100%);
}
@media (max-width:600px){
  .contact-box-office{ min-height:172px; }
  .contact-box-office .office-text{ max-width:54%; }
  .office-photo{ width:64%; }
}

.form-side-note{ font-family:var(--sans); font-size:16px; color:#d9d3c4; margin:0; }
.form-side-note a{ color:var(--gold-light); font-weight:600; text-decoration:none; }
/* Botão sempre encostado à esquerda, com o texto sempre ao lado (nunca por baixo) —
   o texto quebra dentro de si mesmo (.callback-line já tem flex-wrap:wrap) em vez de
   cair para a linha seguinte. Só empilha a partir de mobile (ver media query abaixo). */
.form-submit-row{ display:flex; flex-direction:row; align-items:center; gap:24px; flex-wrap:nowrap; }
.form-submit-row > .btn{ flex-shrink:0; }
.form-submit-row > .callback-line{ flex:1 1 auto; }
.callback-line{ display:flex; align-items:center; flex-wrap:nowrap; gap:8px; }
.callback-prefix, .callback-suffix{ white-space:nowrap; flex-shrink:0; }
.callback-people{ flex-shrink:0; }
.callback-people{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; }
.callback-person{ display:inline-flex; align-items:center; gap:7px; }
.callback-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-light); flex-shrink:0; vertical-align:middle; }
.callback-name{ color:var(--paper); font-weight:600; }
.footer-people{ display:flex; flex-direction:column; gap:10px; margin:14px 0; font-size:14.5px; }
.footer-people .callback-avatar{ width:28px; height:28px; }
.callback-phone{ font-family:inherit; font-size:inherit; color:var(--gold-light); font-weight:600; text-decoration:none; }
@media (max-width:600px){
  .form-submit-row{ flex-direction:column; align-items:center; gap:20px; }
  .callback-line{ flex-direction:column; align-items:center; text-align:center; gap:10px; width:100%; }
  .callback-people{ align-items:center; }
}
.value-row h4{ font-size:20px; margin-bottom:8px; }
.value-row p{ font-size:14.5px; color:var(--stone); max-width:60ch; }
.section.dark .value-row p{ color:var(--stone-light); }

.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.team-card .img-frame{ aspect-ratio:3/4; margin-bottom:20px; }
.team-card img{ filter:grayscale(0.5); transition:filter .5s ease; }
.team-card:hover img{ filter:grayscale(0); }
.team-card h4{ font-size:18px; }
.team-card .role{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-top:4px; }

/* project single */
.project-hero-gallery{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.project-hero-gallery .img-frame:first-child{ grid-row:span 2; aspect-ratio:4/5; }
.project-hero-gallery .img-frame{ aspect-ratio:4/3.6; }

.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.project-meta-bar{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:60px 0; }
.pm-item{ padding:30px var(--pad); border-right:1px solid var(--line); }
.pm-item:last-child{ border-right:0; }
.pm-item .lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; }
.pm-item .val{ font-family:var(--serif); font-size:20px; }
.section.dark .project-meta-bar, .section.dark .pm-item{ border-color:var(--line-light); }
.section.dark .pm-item .lbl{ color:var(--stone-light); }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(10,9,7,0.96); z-index:2000; display:none; align-items:center; justify-content:center; padding:60px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox .lb-close{
  position:absolute; top:34px; right:var(--pad); width:44px; height:44px;
  border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1); color:var(--paper); transition:background .25s ease;
}
.lightbox .lb-close svg{ stroke:var(--paper); width:18px; }
.lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px;
  border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1); color:var(--paper); transition:background .25s ease;
}
@media (hover:hover){
  .lightbox .lb-close:hover{ background:rgba(255,255,255,0.2); }
  .lightbox .lb-prev:hover, .lightbox .lb-next:hover{ background:rgba(255,255,255,0.2); }
}
.lightbox .lb-prev svg, .lightbox .lb-next svg{ stroke:var(--paper); width:20px; }
.lightbox .lb-prev{ left:var(--pad); }
.lightbox .lb-next{ right:var(--pad); }
.lightbox .lb-counter{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--stone-light);
}
@media (max-width:600px){
  .lightbox{ padding:90px 20px 118px; }
  .lightbox .lb-prev, .lightbox .lb-next{
    top:auto; bottom:16px; transform:none; width:42px; height:42px;
  }
  .lightbox .lb-prev{ left:calc(50% - 54px); right:auto; }
  .lightbox .lb-next{ left:calc(50% + 12px); right:auto; }
  .lightbox .lb-counter{ bottom:68px; }
}

/* whatsapp float */
.wa-float{
  position:fixed; bottom:28px; right:28px; width:60px; height:60px; border-radius:50%; background:#25D366; z-index:900;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,0.3); transition:transform .3s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }

/* grain overlay for extra depth on dark hero sections */
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.05; 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");
}

/* ---------- Páginas legais (Termos, Privacidade, Cookies) ---------- */
.legal-content{ max-width:760px; }
.legal-meta{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--stone-light); }
.legal-content h2{ font-size:24px; font-weight:500; margin-top:52px; margin-bottom:16px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-0.005em; margin-top:26px; margin-bottom:10px; }
.legal-content p{ font-size:15.5px; line-height:1.75; color:var(--stone-light); margin-bottom:16px; }
.legal-content ul, .legal-content ol{ margin:0 0 18px; padding-left:22px; color:var(--stone-light); font-size:15.5px; line-height:1.75; }
.legal-content ul{ list-style:disc; }
.legal-content ol{ list-style:decimal; }
.legal-content li{ margin-bottom:8px; }
.legal-content li > ul, .legal-content li > ol{ margin-top:8px; margin-bottom:0; }
.legal-content strong{ color:var(--paper); font-weight:600; }
.legal-content a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover{ color:var(--gold); }
.legal-content .legal-note{
  background:rgba(217,130,47,0.1); border:1px solid rgba(217,130,47,0.3); border-radius:10px;
  padding:16px 20px; font-size:14px; line-height:1.6; color:var(--paper); margin:24px 0;
}

/* ---------- Watermark word (background typographic accent) ---------- */
/* ---------- Marca decorativa (o ícone desenhado da empresa) ----------
   Usa-se o desenho como máscara e a cor vem do CSS: o ficheiro fica com um terço
   do peso (só o canal alfa) e o tom acompanha a paleta do site. Fica atrás do
   conteúdo, muito esbatido, apenas como textura de fundo. */
.deco-mark{ position:relative; overflow:hidden; }
.deco-mark > *{ position:relative; z-index:1; }
/* A caixa fica sempre DENTRO da secção (deslocamentos positivos) e o desenho é
   ajustado a ela com `contain` — assim o losango nunca é cortado, seja qual for a
   altura ou largura da secção. Antes saía para fora com um deslocamento negativo e
   o `overflow:hidden` cortava-lhe um lado. */
/* Tamanho de volta ao original (grande) — a garantia de nunca cortar não vem de o
   encolher, vem da aritmética: offset + tamanho, os dois em percentagem do MESMO
   contentor, somam menos de 100%. Isso é verdade em qualquer altura/largura de
   secção, por isso pode ser grande sem nunca sair da caixa. */
.deco-mark::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:50%; right:0; transform:translateY(-50%);
  width:min(760px, 60%); height:min(760px, 80%);
  background:var(--gold); opacity:0.08;
  -webkit-mask:url('/img/decor/icon-sketch-mask.png') no-repeat center/contain;
          mask:url('/img/decor/icon-sketch-mask.png') no-repeat center/contain;
}
/* alterna o lado, para não parecer sempre o mesmo carimbo */
.deco-mark.deco-left::before{ right:auto; left:0; }
@media (max-width:600px){
  .deco-mark::before{ width:min(480px, 80%); height:min(480px, 64%); opacity:0.06; }
}

.watermark-wrap{ position:relative; overflow:hidden; }
.watermark-text{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-weight:600; font-size:clamp(120px, 22vw, 340px);
  line-height:1; white-space:nowrap; pointer-events:none; z-index:0;
  color:transparent; -webkit-text-stroke:1px rgba(240,179,80,0.18);
  letter-spacing:0.04em;
}
.watermark-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1900px, 190%); max-width:none; height:auto;
  opacity:0.3; pointer-events:none; z-index:0; user-select:none;
}
.watermark-script{
  font-family:var(--serif); font-style:italic; font-weight:500;
  background-image:var(--gradient-warm); background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; opacity:0.35;
}

/* ---------- Sunburst highlight section ---------- */
.section-sunburst{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 15% 20%, rgba(247,201,104,0.9) 0%, rgba(224,145,47,0.55) 32%, rgba(22,18,16,0) 62%),
    var(--ink);
}
.section-sunburst .container{ position:relative; z-index:1; }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi-card{
  background:rgba(246,243,236,0.08); backdrop-filter:blur(6px);
  border:1px solid rgba(246,243,236,0.14); border-radius:14px; padding:32px;
}
.testi-card .testi-stars{ justify-content:flex-start; margin-bottom:18px; }
.testi-card .testi-stars svg{ fill:var(--gold-light); }
.testi-card p{ font-size:14.5px; line-height:1.7; color:#f1ece0; margin:0 0 22px; }
.testi-card .testi-person{ justify-content:flex-start; }
.testi-card .name{ color:var(--paper); }
.testi-card .proj{ color:var(--stone-light); }

/* ---------- Filmstrip gallery ---------- */
.filmstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.filmstrip .img-frame{ aspect-ratio:3/4; }
.filmstrip .img-frame img{ transition:transform .8s cubic-bezier(.16,.84,.44,1); }
.filmstrip .img-frame:hover img{ transform:scale(1.06); }

/* ---------- Slider de comparação (antes / depois) ---------- */
.compare-slider{
  position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; border-radius:4px;
  touch-action:pan-y; user-select:none;
}
.compare-slider .compare-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; pointer-events:none;
}
.compare-slider .compare-before{ clip-path:inset(0 50% 0 0); }
.compare-slider .compare-after{ clip-path:inset(0 0 0 50%); }
.compare-slider.hint-anim .compare-before,
.compare-slider.hint-anim .compare-after{ transition:clip-path .9s ease-in-out; }
.compare-slider.hint-anim .compare-handle{ transition:left .9s ease-in-out; }
.compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0; pointer-events:none; z-index:2;
}
.compare-handle::before{
  content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:var(--paper); box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.compare-handle-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
.compare-handle-grip svg{ width:20px; height:20px; }
.compare-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  -webkit-appearance:none; appearance:none; background:none; opacity:0; cursor:ew-resize; z-index:3;
}
.compare-range::-webkit-slider-thumb{ -webkit-appearance:none; width:42px; height:100%; }
.compare-range::-moz-range-thumb{ width:42px; height:100%; border:0; background:none; }
.compare-label{
  position:absolute; bottom:14px; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--paper); background:rgba(21,19,15,0.55); padding:6px 12px; border-radius:999px;
}
.compare-label-left{ left:14px; }
.compare-label-right{ right:14px; }

/* ---------- Pessoa decorativa (secção Orçamento) ---------- */
/* Fica por trás do formulário (a coluna da esquerda), encostado ao lado direito
   dele, e não no canto da página como antes. Esbatido, para não competir com os
   campos que estão por cima: o texto tem de continuar a ler-se sem esforço. */
.orcamento-person-wrap{
  position:absolute; left:22%; bottom:120px; height:60vh; width:30vw; max-width:440px;
  z-index:0; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:flex-end;
}
.orcamento-person{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  object-fit:contain; opacity:0.28;
}
/* No telemóvel o formulário passa a ocupar a largura toda, por isso o técnico é
   ancorado ao topo da zona dos campos e encostado à direita, atrás deles. Fica mais
   esbatido do que no computador: em ecrã pequeno o texto sobrepõe-se-lhe muito mais. */
@media (max-width:1100px){
  .orcamento-person-wrap{
    left:auto; right:-6%; top:20%; bottom:auto;
    width:66%; max-width:300px; height:36vh;
    align-items:flex-start; justify-content:flex-end;
  }
  .orcamento-person{ opacity:0.2; }
}

/* ---------- Stories (estilo Facebook) ---------- */
.stories-row{ display:flex; justify-content:center; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.story-card{
  position:relative; width:280px; flex-shrink:0; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 40px -14px rgba(0,0,0,0.6); border:1px solid rgba(246,243,236,0.1);
  transition:transform .35s ease, box-shadow .35s ease;
}
.story-card:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -14px rgba(0,0,0,0.7); }
.story-media{
  position:relative; aspect-ratio:9/16; background:#000;
}
.story-media iframe,
.story-media mux-player{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.story-media mux-player{
  --media-object-fit:cover;
  --accent-color:var(--gold);
  --seek-backward-button:none;
  --seek-forward-button:none;
  --cast-button:none;
  --airplay-button:none;
  --pip-button:none;
  --rendition-menu-button:none;
  --captions-button:none;
  --playback-rate-button:none;
  --time-display:none;
  --volume-range:none;
}

/* ---------- Ambientes grid (destaque grande + destaques médios + miniaturas) ---------- */
/* Os cards mantêm exatamente o visual de .project-card (imagem + overlay ao passar o rato);
   aqui só se define a disposição/tamanho de cada um dentro da grelha. */
.ambiente-grid{ display:flex; flex-direction:column; gap:26px; }
.ambiente-top{ display:grid; grid-template-columns:2fr 1fr; gap:26px; align-items:start; }
.ambiente-bottom{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.ambiente-feature{ aspect-ratio:1/1; }
.ambiente-side{ display:flex; flex-direction:column; gap:26px; }
.ambiente-side-card{ aspect-ratio:1/1; }
.ambiente-small{ aspect-ratio:1/1; }

/* ---------- FAQ accordion ---------- */
.faq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; border-bottom:1px solid var(--line); }
.faq-item{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:0; padding:22px 0; text-align:left; font-family:var(--serif); font-size:17px; color:var(--ink);
}
.faq-q .plus{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold);
  position:relative; transition:transform .35s ease, background .35s ease;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--gold); transition:opacity .3s ease;
}
.faq-q .plus::before{ width:10px; height:1.4px; transform:translate(-50%,-50%); }
.faq-q .plus::after{ width:1.4px; height:10px; transform:translate(-50%,-50%); }
.faq-item.open .plus{ transform:rotate(45deg); background:var(--gold); }
.faq-item.open .plus::before, .faq-item.open .plus::after{ background:var(--ink); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a p{ padding:0 0 22px; font-size:14.5px; color:var(--stone); line-height:1.7; max-width:56ch; }
.faq-item.open .faq-a{ max-height:220px; }
.section.dark .faq-grid{ border-color:var(--line-light); }
.section.dark .faq-item{ border-color:var(--line-light); }
.section.dark .faq-q{ color:var(--paper); }
.section.dark .faq-a p{ color:var(--stone-light); }

/* ---------- Homepage hero — estilo Amplitude (verde, sans-serif a negrito) ---------- */
/* Escopado à secção .hero e ao cabeçalho apenas no estado "sobre o hero" (não scrolled, não on-light) */
.hero .eyebrow{ font-family:var(--sans); font-weight:700; letter-spacing:0.14em; color:var(--hero-green); }
/* Um pouco maior do que era (28/3.6vw/52): o texto do hero e curto e e a
   primeira coisa que se ve. Esta regra ganha a de cima, por vir depois. */
.hero h1{ font-family:var(--sans); font-weight:800; letter-spacing:-0.02em; line-height:1.1; max-width:15ch; font-size:clamp(33px, 4.3vw, 62px); }
.hero p.lede{ font-size:clamp(14.5px, 1.1vw, 16.5px); max-width:44ch; }
.hero-cta .btn{ padding:14px 28px; font-size:11.5px; }
.hero h1 .italic{
  font-style:normal; font-weight:800;
  background-image:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--paper); -webkit-text-fill-color:var(--paper);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .main-nav{ display:none; }
  .burger{ display:block; }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:50px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .materials-strip{ grid-template-columns:repeat(3,1fr); }
  /* nada de aspect-ratio quadrado aqui: obrigava a placa (1024/1536) a transbordar
     do tile e o título aparecia a meio da pedra em vez de no fundo */
  .masonry{ column-count:2; }
  .related-grid{ grid-template-columns:1fr 1fr; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .stat{ border:1px solid var(--line); }
  .stat:last-child{ border-right:1px solid var(--line); }
  .process{ flex-wrap:wrap; row-gap:40px; }
  .process::before{ display:none; }
  .process-step{ flex:1 1 45%; }
  .testi-grid{ grid-template-columns:1fr 1fr; }
  .filmstrip{ grid-template-columns:repeat(2,1fr); }
  .ambiente-top{ grid-template-columns:1fr; align-items:stretch; }
  .ambiente-feature{ width:100%; }
  .ambiente-side{ flex-direction:row; }
  .ambiente-side-card{ flex:1 1 0; width:100%; }
  .ambiente-bottom{ grid-template-columns:1fr 1fr; }
  .faq-grid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .split, .split.reverse{ grid-template-columns:1fr; direction:ltr; }
  .split.mobile-text-first{ display:flex; flex-direction:column; align-items:stretch; }
  .split.mobile-text-first .split-text{ order:1; }
  .split.mobile-text-first .split-media{ order:2; }
  .project-grid{ grid-template-columns:1fr; }
  .project-card.wide{ grid-column:span 1; }
  .stories-row{
    flex-wrap:nowrap; justify-content:flex-start; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
    padding-left:var(--pad); padding-right:calc(var(--pad) * 0.5);
  }
  .stories-row::-webkit-scrollbar{ display:none; }
  .story-card{ width:78vw; max-width:340px; flex-shrink:0; scroll-snap-align:center; }
  .form-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .project-meta-bar{ grid-template-columns:1fr 1fr; }
  .pm-item{ border-bottom:1px solid var(--line); }
  .project-hero-gallery{ grid-template-columns:1fr; }
  .project-hero-gallery .img-frame:first-child{ grid-row:auto; aspect-ratio:4/3; }
  .masonry{ column-count:1; }
  .related-grid{ grid-template-columns:1fr; }
  .badge-float{ left:16px; bottom:-20px; padding:20px 22px; }
  .footer-top{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .filmstrip{ grid-template-columns:repeat(2,1fr); }
  .materials-strip{ grid-template-columns:repeat(2,1fr); }
  .ambiente-side{ flex-direction:column; }
  .ambiente-bottom{ grid-template-columns:1fr; }
  .ambiente-small{ aspect-ratio:4/5; }
  .project-card .overlay{ padding:20px; }
  .project-card h3{ font-size:clamp(18px,5vw,22px); margin-bottom:6px; }
  .project-card .tag{ margin-bottom:6px; }
  .tag-pill{ font-size:9px; }
  .project-card .arrow{ top:16px; right:16px; width:36px; height:36px; }
}
