/* ==========================================================================
   MARGARIDA PINTO — Real Estate Advisor
   Conceito: "Maré Calma" — editorial atlântico, luxo Comporta
   Paleta: branco-cal · areia quente · verde-pinheiro · dourado champanhe
   Tipografia: Fraunces (display) + Hanken Grotesk (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTES — auto-hospedadas (zero pedidos a terceiros; RGPD-friendly)
   Fraunces (variável, opsz+wght) + Hanken Grotesk (variável, wght)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/hanken-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/hanken-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Cor — território */
  --cal: #FAF7F1;            /* branco-cal: fundo principal */
  --cal-2: #F4EDE2;          /* cal mais profundo: secções alternadas claras */
  --areia: #E7DCC9;          /* areia quente: blocos, molduras */
  --areia-2: #D9C9AE;        /* areia funda: hairlines sobre areia */
  --pinheiro: #1F3B31;       /* verde-pinheiro: âncora, secções escuras, CTAs */
  --pinheiro-2: #172D25;     /* pinheiro profundo: footer, passagens escuras */
  --ink: #20302A;            /* texto principal sobre claro */
  --ink-2: #56635C;          /* texto secundário sobre claro (4.6:1 em cal) */
  --gold: #AE8C57;           /* champanhe sobre claro — só hairlines/decoração */
  --gold-deep: #8A6D3E;      /* champanhe fundo: dourado em TEXTO sobre claro (AA 4.5:1) */
  --gold-2: #CDB287;         /* champanhe sobre escuro */
  --paper: #F5F0E7;          /* texto principal sobre escuro */
  --paper-2: #AFBDB4;        /* texto secundário sobre escuro */
  --linha: rgba(32, 48, 42, 0.16);   /* hairline sobre claro */
  --linha-dark: rgba(245, 240, 231, 0.18); /* hairline sobre escuro */
  --erro: #A03D2E;           /* estados de erro (terracota queimada, 4.9:1) */

  /* Movimento — registo "maré": assenta, nunca salta */
  --ease-tide: cubic-bezier(0.23, 1, 0.32, 1);     /* ease-out forte: entradas */
  --ease-drift: cubic-bezier(0.77, 0, 0.175, 1);   /* in-out: morphs em ecrã */
  --dur-press: 140ms;
  --dur-micro: 220ms;
  --dur-ui: 300ms;
  --dur-reveal: 750ms;
  --dur-hero: 1100ms;

  /* Tipo — fallbacks com cobertura cirílica (Georgia) e CJK (sistema) */
  --font-display: "Fraunces", "Georgia", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-body: "Hanken Grotesk", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  /* Medidas */
  --nav-h: 76px;
  --container: 1240px;
  --gutter: clamp(1.375rem, 5vw, 4rem);
  --sec-pad: clamp(6rem, 13vh, 10rem);

  /* Z-index */
  --z-nav: 100;
  --z-menu: 200;
  --z-modal: 1000;
}

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cal);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; padding: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--cal); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

.on-dark :focus-visible,
[data-theme="dark"] :focus-visible {
  outline-color: var(--gold-2);
}

/* Skip link — primeiro elemento focável */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--gutter);
  z-index: calc(var(--z-modal) + 1);
  background: var(--pinheiro);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  transition: top var(--dur-micro) var(--ease-tide);
}
.skip-link:focus-visible { top: 12px; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 360;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(3.1rem, 8.6vw, 6.4rem);
  line-height: 0.98;
}

.display-2 {
  font-size: clamp(2.25rem, 4.6vw, 3.8rem);
  line-height: 1.04;
}

h3 { font-size: clamp(1.35rem, 2vw, 1.66rem); font-weight: 480; }

.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.28rem);
  line-height: 1.65;
  font-weight: 350;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
}
.on-dark .eyebrow { color: var(--paper-2); }
.on-dark .eyebrow::before { background: var(--gold-2); }

.italic { font-style: italic; }

.muted { color: var(--ink-2); }
.on-dark .muted { color: var(--paper-2); }

/* Link editorial: underline dourado que cresce */
.link-line {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size var(--dur-ui) var(--ease-tide), color var(--dur-micro) ease;
}
.on-dark .link-line {
  background-image: linear-gradient(var(--gold-2), var(--gold-2));
}
@media (hover: hover) and (pointer: fine) {
  .link-line:hover { background-size: 100% 1px; }
}
.link-line:focus-visible { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sec-pad);
  position: relative;
}

.on-dark {
  background: var(--pinheiro);
  color: var(--paper);
}

.on-dark.deep { background: var(--pinheiro-2); }

/* Grão subtil nas secções escuras — tacto de papel */
.on-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.on-dark > * { position: relative; z-index: 1; }

/* Cabeçalho de secção */
.sec-head { margin-bottom: clamp(3rem, 6vh, 4.5rem); max-width: 60ch; }
.sec-head .eyebrow { margin-bottom: 1.375rem; }
.sec-head h2 { margin-bottom: 0; }
.sec-head .sec-sub { margin-top: 1.5rem; max-width: 52ch; }

/* --------------------------------------------------------------------------
   5. REVEALS — sistema "maré" (IntersectionObserver em main.js)
   -------------------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-reveal) var(--ease-tide),
    transform var(--dur-reveal) var(--ease-tide);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Reduced motion: o fade fica, a translação cai. Nunca zero. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] {
    transform: none;
    transition: opacity 420ms ease;
  }
}

/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.875rem 1.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-micro) ease,
    border-color var(--dur-micro) ease,
    color var(--dur-micro) ease,
    transform var(--dur-press) var(--ease-tide);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-solid {
  background: var(--pinheiro);
  color: var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--pinheiro-2); }
}

.on-dark .btn-solid {
  background: var(--paper);
  color: var(--pinheiro-2);
}
@media (hover: hover) and (pointer: fine) {
  .on-dark .btn-solid:hover { background: var(--cal); }
}

.btn-ghost {
  border: 1px solid var(--linha);
  color: var(--ink);
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { border-color: var(--gold); color: var(--pinheiro); }
}
.on-dark .btn-ghost {
  border-color: var(--linha-dark);
  color: var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .on-dark .btn-ghost:hover { border-color: var(--gold-2); }
}

/* --------------------------------------------------------------------------
   7. NAVEGAÇÃO
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-ui) ease,
    border-color var(--dur-ui) ease,
    backdrop-filter var(--dur-ui) ease;
}
.nav.is-scrolled {
  background: rgba(250, 247, 241, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
}

.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-inner > nav { margin-left: auto; }

.nav-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 470;
  font-size: 1.21rem;
  letter-spacing: 0.005em;
  color: var(--ink);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.1rem);
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
  padding: 0.5rem 0;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: left calc(100% - 6px);
  background-size: 0% 1px;
  transition: background-size var(--dur-ui) var(--ease-tide), color var(--dur-micro) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); background-size: 100% 1px; }
}
.nav-links a:focus-visible { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-cta {
  min-height: 42px;
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
}

/* Burger — só mobile */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  align-items: center;
  justify-content: center;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  position: absolute;
  transition: transform var(--dur-ui) var(--ease-drift), opacity var(--dur-micro) ease;
}
.nav-burger span::before { transform: translateY(-7px); }
.nav-burger span::after { transform: translateY(7px); }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: rotate(45deg); background: var(--paper); }
.nav-burger[aria-expanded="true"] span::after { transform: rotate(-45deg); background: var(--paper); }

/* Menu mobile — cortina pinheiro */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--pinheiro-2);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) ease, visibility 0s linear var(--dur-ui);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-ui) ease;
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-menu nav a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 360;
  line-height: 1.3;
  padding: 0.35rem 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-tide), transform var(--dur-reveal) var(--ease-tide);
  transition-delay: var(--d, 0ms);
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu .menu-foot {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mobile-menu .menu-foot a { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu nav a { transform: none; transition: opacity 320ms ease; }
}

/* Menu aberto: a nav inteira sobe acima da cortina, em modo transparente,
   para o burger (agora X) continuar visível e clicável */
body.menu-open .nav {
  z-index: calc(var(--z-menu) + 1);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.menu-open .nav-brand { color: var(--paper); }
body.menu-open .nav-cta { display: none; }
body.menu-open .lang { visibility: hidden; }

/* --------------------------------------------------------------------------
   8. SELETOR DE LÍNGUAS
   -------------------------------------------------------------------------- */
.lang {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 42px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: transparent;
  transition: border-color var(--dur-micro) ease;
}
@media (hover: hover) and (pointer: fine) {
  .lang-btn:hover { border-color: var(--gold); }
}
.lang-btn .flag { width: 18px; height: 13px; border-radius: 1px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(32,48,42,0.12); }
.lang-btn .chev {
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-micro) var(--ease-tide);
  margin-left: 2px;
}
.lang-btn[aria-expanded="true"] .chev { transform: rotate(225deg) translateY(-1px); }

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 196px;
  background: var(--cal);
  border: 1px solid var(--linha);
  border-radius: 3px;
  box-shadow: 0 18px 44px -18px rgba(23, 45, 37, 0.35);
  padding: 0.375rem;
  list-style: none;
  margin: 0;
  z-index: 50;
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  visibility: hidden;
  transition:
    opacity var(--dur-micro) var(--ease-tide),
    transform var(--dur-micro) var(--ease-tide),
    visibility 0s linear var(--dur-micro);
}
.lang.is-open .lang-list {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--dur-micro) var(--ease-tide),
    transform var(--dur-micro) var(--ease-tide);
}
.lang-list [role="option"] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 2px;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.lang-list [role="option"] .flag { width: 18px; height: 13px; border-radius: 1px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(32,48,42,0.12); }
.lang-list [role="option"] .lang-native { color: var(--ink-2); font-weight: 400; margin-left: auto; font-size: 0.78rem; }
.lang-list [role="option"]:hover,
.lang-list [role="option"].is-focused { background: var(--cal-2); }
.lang-list [role="option"][aria-selected="true"] {
  background: var(--pinheiro);
  color: var(--paper);
}
.lang-list [role="option"][aria-selected="true"] .lang-native { color: var(--paper-2); }
@media (prefers-reduced-motion: reduce) {
  .lang-list { transform: none; }
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(3rem, 7vh, 5rem);
  background:
    radial-gradient(110% 75% at 85% 12%, rgba(231, 220, 201, 0.5) 0%, rgba(231, 220, 201, 0) 60%),
    var(--cal);
  overflow: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6.5rem);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 2rem;
}
.hero-kicker::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
}

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .line { display: block; }
.hero h1 .line-2 { font-style: italic; font-weight: 340; color: var(--pinheiro); }

.hero-role {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 2.25rem;
}

.hero-lede {
  max-width: 47ch;
  color: var(--ink-2);
  margin-bottom: 2.75rem;
}
.hero-lede strong { color: var(--ink); font-weight: 500; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Retrato editorial com moldura */
.hero-figure {
  position: relative;
  justify-self: end;
  width: min(100%, 460px);
  will-change: transform;
}
.hero-figure::before {
  content: "";
  position: absolute;
  inset: clamp(1.25rem, 3vw, 2rem) clamp(-1.25rem, -3vw, -2rem) clamp(-1.25rem, -3vw, -2rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--areia);
  z-index: -1;
}
.hero-figure .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.hero-figure .frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(250, 247, 241, 0.55);
  pointer-events: none;
}
.hero-figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.125rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.99rem;
  color: var(--ink-2);
}
.hero-figcaption::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* Entrada do hero — uma vez, ao carregar */
html.js .hero [data-hero] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-hero) var(--ease-tide),
    transform var(--dur-hero) var(--ease-tide);
  transition-delay: var(--d, 0ms);
}
html.js .hero.is-ready [data-hero] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero [data-hero] { transform: none; transition: opacity 420ms ease; }
}

/* --------------------------------------------------------------------------
   10. SOBRE
   -------------------------------------------------------------------------- */
.sobre { background: var(--cal-2); }

.sobre-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.sobre-aside { position: sticky; top: calc(var(--nav-h) + 2rem); }

.sobre-body .lead { color: var(--ink); max-width: 56ch; }
.sobre-body p + p { margin-top: 1.5rem; }

.sobre-marks {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.sobre-marks .mark .mark-num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  font-weight: 350;
  font-style: italic;
  line-height: 1.1;
  color: var(--pinheiro);
}
.sobre-marks .mark .mark-num .it { font-style: italic; color: var(--gold); }
.sobre-marks .mark .mark-label {
  margin-top: 0.625rem;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   11. SERVIÇOS
   -------------------------------------------------------------------------- */
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}

.servico {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  border-top: 1px solid var(--linha);
  position: relative;
  transition: border-color var(--dur-ui) ease;
}
.servico::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 600ms var(--ease-tide);
}
@media (hover: hover) and (pointer: fine) {
  .servico:hover::before { width: 100%; }
}

.servico-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-deep);
  margin-bottom: 1.375rem;
}
.servico h3 { margin-bottom: 1.125rem; max-width: 16ch; }
.servico p { color: var(--ink-2); font-size: 1rem; max-width: 40ch; }
.servico .servico-via {
  margin-top: auto;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   12. INTERNATIONAL BUYERS — passagem escura
   -------------------------------------------------------------------------- */
.international { background: var(--pinheiro); }

.intl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.intl-body .lead { color: var(--paper); max-width: 50ch; }
.intl-body p { color: var(--paper-2); max-width: 52ch; }
.intl-body p + p, .intl-body .lead + p { margin-top: 1.375rem; }
.intl-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.intl-points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.intl-points li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--linha-dark);
}
.intl-points li:first-child { border-top: 1px solid var(--linha-dark); }
.intl-points .pt-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-2);
  font-size: 1rem;
  flex: none;
  width: 2rem;
}
.intl-points .pt-text { color: var(--paper); font-size: 1.02rem; line-height: 1.55; }
.intl-points .pt-text small {
  display: block;
  color: var(--paper-2);
  font-size: 0.89rem;
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   13. TERRITÓRIO — mapa SVG (gravura cartográfica sobre cal)
   -------------------------------------------------------------------------- */
.territorio { background: var(--cal-2); }

.terr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.terr-map {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
  width: 100%;
}
.terr-map svg { width: 100%; height: auto; }

.map-outline {
  fill: rgba(31, 59, 49, 0.025);
  stroke: var(--pinheiro);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.map-region { stroke: none; }
.map-region.alentejo { fill: rgba(174, 140, 87, 0.10); }
.map-region.litoral { fill: rgba(174, 140, 87, 0.30); }
.map-region.algarve { fill: rgba(174, 140, 87, 0.16); }
.map-divider {
  stroke: rgba(31, 59, 49, 0.30);
  stroke-width: 0.75;
  stroke-dasharray: 3 4;
  fill: none;
}
.map-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.map-dot-ref { fill: rgba(32, 48, 42, 0.5); }
.map-marker-dot { fill: var(--gold); }
.map-marker-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.8;
  transform-origin: center;
  transform-box: fill-box;
  animation: marker-pulse 3.2s var(--ease-tide) infinite;
}
@keyframes marker-pulse {
  0% { transform: scale(0.45); opacity: 0.9; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-marker-ring { animation: none; opacity: 0.5; transform: scale(1); }
}
.map-comporta-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  fill: var(--pinheiro);
  text-transform: none;
}

.terr-list { list-style: none; padding: 0; margin-top: 2.5rem; }
.terr-list li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linha);
}
.terr-list li:first-child { border-top: 1px solid var(--linha); }
.terr-list .terr-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
  flex: none;
  min-width: 11.5ch;
}
.terr-list .terr-name .star { color: var(--gold); display: inline-block; vertical-align: 0.18em; margin-left: 2px; }
.terr-list .terr-desc { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
.terr-note {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--pinheiro);
}

/* --------------------------------------------------------------------------
   14. PROCESSO — timeline
   -------------------------------------------------------------------------- */
.processo { background: var(--cal); }

.timeline {
  position: relative;
  max-width: 760px;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 11px;
  width: 1px;
  background: var(--linha);
}
.timeline::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 11px;
  width: 1px;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
html:not(.js) .timeline::after { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .timeline::after { transform: scaleY(1); transition: none; }
}

.step {
  position: relative;
  padding: 0 0 clamp(2.5rem, 5vh, 3.75rem) 3.5rem;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cal);
  border: 1px solid var(--gold);
}
.step.is-in::before { background: var(--gold); }
html.js .step::before { transition: background-color 400ms ease 300ms; }

.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}
.step h3 { margin-bottom: 0.75rem; }
.step p { color: var(--ink-2); max-width: 56ch; font-size: 1rem; }

/* --------------------------------------------------------------------------
   15. TESTEMUNHOS — carrossel (oculto se vazio)
   -------------------------------------------------------------------------- */
.testemunhos { background: var(--cal-2); }
.testemunhos[hidden] { display: none; }

/* Painel emoldurado — eco da moldura do retrato do hero */
.tst-panel {
  position: relative;
  max-width: 720px;
  background: var(--cal);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
}
.tst-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  background: var(--areia);
}
.tst-panel::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(174, 140, 87, 0.3);
  pointer-events: none;
}

.tst-stage {
  position: relative;
}
.tst-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 600ms var(--ease-tide),
    transform 600ms var(--ease-tide),
    visibility 0s linear 600ms;
}
.tst-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 600ms var(--ease-tide) 120ms,
    transform 600ms var(--ease-tide) 120ms;
}
.tst-quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 370;
  line-height: 1.45;
  color: var(--ink);
}
/* Testemunhos longos: registo editorial legível em vez de pull-quote */
.tst-slide.is-long .tst-quote {
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  font-weight: 400;
  line-height: 1.7;
  max-width: 60ch;
}
/* Corte a meio + "Ler mais" */
.tst-quote.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.tst-more {
  margin-top: 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.tst-quote::before { content: "“"; color: var(--gold); }
.tst-quote::after { content: "”"; color: var(--gold); }
.tst-author {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.tst-author::before { content: ""; width: 1.75rem; height: 1px; background: var(--gold); }

.tst-controls {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.tst-dots { display: flex; gap: 0.625rem; }
.tst-dot {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.tst-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  transition: background-color var(--dur-micro) ease, transform var(--dur-micro) var(--ease-tide);
}
.tst-dot[aria-selected="true"]::after { background: var(--gold); transform: scale(1.2); }

.tst-share { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   16. CONTACTO
   -------------------------------------------------------------------------- */
.contacto { background: var(--cal); }

.ctc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.ctc-aside .sec-head { margin-bottom: 2.5rem; }

.ctc-direct { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--linha); }
.ctc-direct > * {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 1.02rem;
  color: var(--ink);
}
.ctc-direct svg { width: 19px; height: 19px; color: var(--gold); flex: none; }
.ctc-direct .label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-width: 6.25rem;
  flex: none;
}

.ctc-whats { margin-bottom: 2rem; }
.ctc-whats .btn { width: 100%; }

.ctc-tst {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
}
.ctc-tst-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.ctc-tst .link-line { font-size: 0.95rem; color: var(--ink-2); }

.ctc-social { display: flex; gap: 0.875rem; margin-top: 2rem; }
.ctc-social a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 2px;
  color: var(--ink-2);
  transition: border-color var(--dur-micro) ease, color var(--dur-micro) ease, transform var(--dur-press) var(--ease-tide);
}
.ctc-social a:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .ctc-social a:hover { border-color: var(--gold); color: var(--pinheiro); }
}
.ctc-social svg { width: 19px; height: 19px; }

/* Formulário */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field.full { grid-column: 1 / -1; }

.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.form-label .req { color: var(--gold-deep); }

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
  padding: 0.625rem 2px;
  font-size: 1.05rem;
  color: var(--ink);
  transition: border-color var(--dur-micro) ease;
  min-height: 44px;
}
.form-input::placeholder { color: rgba(86, 99, 92, 0.55); }
.form-input:hover { border-bottom-color: rgba(32, 48, 42, 0.35); }
.form-input:focus {
  outline: none;
  border-bottom-color: var(--pinheiro);
  box-shadow: 0 1px 0 0 var(--pinheiro);
}
.form-field.has-error .form-input { border-bottom-color: var(--erro); box-shadow: 0 1px 0 0 var(--erro); }
textarea.form-input { resize: vertical; min-height: 120px; line-height: 1.6; }

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2356635C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}

.form-error {
  font-size: 0.84rem;
  color: var(--erro);
  display: none;
}
.form-error:not(:empty) { display: block; }

/* RGPD checkbox */
.form-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  border: 1px solid rgba(32, 48, 42, 0.4);
  border-radius: 2px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
.form-consent input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--cal);
  border-bottom: 2px solid var(--cal);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--dur-micro) var(--ease-tide);
}
.form-consent input[type="checkbox"]:checked {
  background: var(--pinheiro);
  border-color: var(--pinheiro);
}
.form-consent input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.form-consent.has-error input[type="checkbox"] { border-color: var(--erro); }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .form-consent a:hover { color: var(--pinheiro); }
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.form-status {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  display: none;
}
.form-status.is-ok { display: block; color: var(--pinheiro); }
.form-status.is-error { display: block; color: var(--erro); }

/* Honeypot invisível */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--pinheiro-2);
  color: var(--paper-2);
  padding-block: clamp(3.5rem, 7vh, 5.5rem) 2.5rem;
  font-size: 0.92rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linha-dark);
}
.footer-brand .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--paper);
}
.footer-brand .role {
  margin-top: 0.375rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; }
.footer-nav a { color: var(--paper-2); font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover { color: var(--paper); }
}
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha-dark);
  border-radius: 2px;
  color: var(--paper-2);
  transition: border-color var(--dur-micro) ease, color var(--dur-micro) ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover { border-color: var(--gold-2); color: var(--paper); }
}
.footer-social svg { width: 18px; height: 18px; }

.footer-legal {
  margin-top: 2.25rem;
  max-width: 72ch;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--paper-2);
}
.footer-bottom {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(175, 189, 180, 0.75);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover { color: var(--paper); }
}

/* --------------------------------------------------------------------------
   18. MODAL — Política de Privacidade
   -------------------------------------------------------------------------- */
.privacy-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(680px, calc(100vw - 2rem));
  max-height: min(82svh, 900px);
  margin: auto;
}
.privacy-modal::backdrop {
  background: rgba(18, 31, 26, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.privacy-inner {
  background: var(--cal);
  color: var(--ink);
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow-y: auto;
  max-height: inherit;
  border-radius: 3px;
}
.privacy-inner h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 1.5rem;
}
.privacy-inner h2 + p { margin-top: 0; }
.privacy-inner p { font-size: 0.95rem; color: var(--ink-2); margin-top: 1rem; }
.privacy-inner strong { color: var(--ink); font-weight: 600; }
.privacy-close {
  margin-top: 2rem;
}
.form-grid.one-col { grid-template-columns: 1fr; }
.tst-intro {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin-bottom: 1.75rem;
  max-width: 52ch;
}
.tst-modal .form-actions { gap: 0.875rem; }

html.js .privacy-modal[open] {
  animation: modal-in 300ms var(--ease-tide);
}
.privacy-modal[open]::backdrop {
  animation: backdrop-in 300ms ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .privacy-modal[open] { animation: backdrop-in 250ms ease; }
}

/* --------------------------------------------------------------------------
   19. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { gap: 2.5rem; }
  .sobre-grid, .intl-grid, .terr-grid, .ctc-grid { grid-template-columns: 1fr; }
  .sobre-aside { position: static; }
  .servicos-grid { grid-template-columns: 1fr; gap: 0; }
  .servico { padding-bottom: 2.25rem; }
  .terr-map { max-width: 320px; margin-inline: 0; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta { display: none; }

  .hero { min-height: auto; padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem)); }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-figure { justify-self: start; width: min(100%, 400px); }
}

@media (max-width: 640px) {
  :root { --sec-pad: clamp(4.5rem, 10vh, 6rem); }
  .sobre-marks { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .footer-top { flex-direction: column; }
  .tst-panel::before { inset: 1rem -0.875rem -0.875rem 1rem; }
}

/* --------------------------------------------------------------------------
   20. NO-JS — tudo visível, nada depende de script
   -------------------------------------------------------------------------- */
html:not(.js) .lang { display: none; }
html:not(.js) .mobile-menu { display: none; }

/* --------------------------------------------------------------------------
   21. PRINT — discreto
   -------------------------------------------------------------------------- */
@media print {
  .nav, .mobile-menu, .hero-ctas, .ctc-form, .tst-controls { display: none !important; }
  .on-dark, .on-dark.deep, .footer { background: #fff !important; color: #000 !important; }
}