/* The One — Black Friday. Tokens e componentes do design system "Classical" (só o que o site usa) + estilos das páginas.
   Sem estilos inline no HTML: tudo aqui (permite uma política de segurança de conteúdo restrita). */

/* ── Fontes (hospedadas junto; variável, fatia latina cobre o português) ─────────────── */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-garamond-latin.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond-latin.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/lora-latin.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/lora-latin.woff2) format("woff2"); }

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-400: #bab6b6;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;

  --radius-sm: 2px;
  --radius-md: 4px;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  text-wrap: pretty; min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0;
}
p { margin: 0; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; }
s { text-decoration-thickness: 1px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.tnum { font-feature-settings: 'tnum' 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--color-bg); border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  font-size: 14px; text-decoration: none; color: var(--color-text);
}
.skip-link:focus { top: 12px; }

/* "Plate": a foto emoldurada do design system */
.plate {
  position: relative; margin: 0; overflow: hidden; background: var(--color-surface);
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider);
}
.plate > img, .plate > iframe, .plate .plate-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}

/* ── Botões / campos / tags ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent-700); border-color: var(--color-accent); }
.btn-primary:hover { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; }
.btn-lg { font-size: 16px; padding: 13px 22px; }

.input {
  width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 16px; /* 16px evita zoom no iPhone */
  color: var(--color-text); caret-color: var(--color-accent); background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 1.5px; }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* ── Navegação ───────────────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--gutter); border-bottom: 1px solid var(--color-divider);
}
.nav-brand { margin-right: auto; display: flex; align-items: center; line-height: 0; }
.nav a:not(.nav-brand) { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:not(.nav-brand):not(.btn):hover { color: var(--color-accent-700); }
.nav .btn-primary { color: var(--color-accent-700); }
.logo { height: 44px; width: auto; }

/* ── Home: hero ──────────────────────────────────────────────────────────────────────── */
.hero {
  background: color-mix(in srgb, var(--color-accent-200) 28%, var(--color-bg));
  border-bottom: 1px solid var(--color-divider);
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(48px, 7vw, 96px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;
}
.hero-kicker { display: flex; align-items: center; gap: 18px; width: min(420px, 80%); }
.hero-kicker i { flex: 1; height: 1px; background: var(--color-accent); }
.hero-kicker span { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-accent-700); }
.hero h1 {
  font-weight: 400; font-size: clamp(64px, 12vw, 168px); line-height: 0.88; letter-spacing: 0.01em; text-transform: uppercase;
}
.hero h1 span { display: block; }
.hero h1 .gold { color: var(--color-accent); }
.hero-sub { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 2; }
.hero-sub b { font-weight: 400; color: var(--color-accent-700); font-feature-settings: 'tnum' 1; }

/* ── Home: lista de imóveis ──────────────────────────────────────────────────────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--color-divider); margin-bottom: 40px;
}
.section-head h2 { font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: 0; }
.section-head .count { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-neutral-700); font-feature-settings: 'tnum' 1; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 48px 40px; }
.prop-card {
  display: flex; flex-direction: column; gap: 20px; padding: 14px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none; transition: border-color 0.2s;
}
.prop-card:hover, .prop-card:focus-visible { border-color: var(--color-accent); color: var(--color-text); }
.prop-card .plate { aspect-ratio: 16 / 10; }
.prop-body { padding: 0 6px 6px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.kicker-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-700);
}
.kicker-row .code { font-feature-settings: 'tnum' 1; white-space: nowrap; }
.prop-card h3 { font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
.specs-line { font-size: 14px; color: var(--color-neutral-700); }
.note { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700); }
.price-row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--color-accent); margin-top: auto;
}
.price-row .from { display: block; font-size: 13px; color: var(--color-neutral-700); font-feature-settings: 'tnum' 1; }
.price-row .price { display: block; font-family: var(--font-heading); font-size: 34px; line-height: 1.1; font-feature-settings: 'tnum' 1; margin-top: 2px; }
.more-link { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700); border-bottom: 1px solid var(--color-accent); padding-bottom: 3px; }

/* ── Página do imóvel ────────────────────────────────────────────────────────────────── */
.detail { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) clamp(56px, 8vw, 104px); }
.back-link {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
}
.back-link svg { width: 14px; height: 14px; }
.detail-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid var(--color-divider); margin-bottom: 32px; }
.detail-tags {
  display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-700);
}
.detail-head h1 { font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.01em; }

.detail-grid {
  display: grid; gap: 28px clamp(32px, 5vw, 64px); grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "gallery" "aside" "about" "map";
}
.g-gallery { grid-area: gallery; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.g-about { grid-area: about; min-width: 0; }
.g-map { grid-area: map; min-width: 0; }
.g-aside { grid-area: aside; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 960px) {
  .detail-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "gallery aside" "about aside" "map aside";
    gap: 28px clamp(32px, 5vw, 64px); align-items: start;
  }
}
@media (min-width: 960px) and (min-height: 900px) { .g-aside { position: sticky; top: 24px; } }

.gallery-main { aspect-ratio: 16 / 10; }
.gallery-main img { transition: opacity 0.15s; }
.gallery-main.is-loading img { opacity: 0.55; }
.g-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--color-text);
  border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-bg) 85%, transparent);
}
.g-btn:hover { background: var(--color-bg); }
.g-btn svg { width: 18px; height: 18px; }
.g-prev { left: 14px; }
.g-next { right: 14px; }
.g-count {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 4px 10px;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent); border-radius: var(--radius-sm);
  font-size: 12px; letter-spacing: 0.12em; font-feature-settings: 'tnum' 1;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.thumb {
  display: block; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 4 / 3; cursor: pointer; background: var(--color-surface); opacity: 0.7;
}
.thumb:hover, .thumb.is-active { opacity: 1; }
.thumb.is-active { border-color: var(--color-accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.block-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); display: block; margin-bottom: 14px; }
.g-about p { font-size: 16px; line-height: 1.75; text-align: justify; hyphens: auto; max-width: 62ch; }
.g-about { margin-top: 14px; }
.g-map .plate { aspect-ratio: 16 / 7; }
.g-map { margin-top: 14px; }
@media (max-width: 640px) { .g-map .plate { aspect-ratio: 4 / 3; } }
.g-map iframe { filter: grayscale(0.6) sepia(0.15); }

.price-box { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--color-accent); border-radius: var(--radius-md); }
.price-box .lbl { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-neutral-700); }
.price-box .lbl-gold { color: var(--color-accent-700); margin-top: 10px; }
.price-box .from { font-size: 18px; color: var(--color-neutral-700); font-feature-settings: 'tnum' 1; }
.price-box .price { font-family: var(--font-heading); font-size: 48px; line-height: 1; font-feature-settings: 'tnum' 1; }
.price-box .note { margin-top: 8px; font-size: 12px; letter-spacing: 0.16em; }
.price-box .valid { font-size: 13px; color: var(--color-accent-700); margin-top: 8px; }

.facts { margin: 0; display: flex; flex-direction: column; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.facts dt { color: var(--color-neutral-700); }
.facts dd { margin: 0; text-align: right; font-feature-settings: 'tnum' 1; }

.visit-form { display: flex; flex-direction: column; gap: 12px; }
.visit-form h2 { font-size: 22px; letter-spacing: 0; }
.visit-fields { display: flex; flex-direction: column; gap: 10px; }
.visit-ok { font-size: 14px; color: var(--color-accent-700); display: flex; flex-direction: column; gap: 8px; }
.visit-ok[hidden], .visit-fields[hidden] { display: none; }
.visit-err { font-size: 13px; color: #8a2f1d; min-height: 1.2em; }

.others { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 24px; }
.others .block-label { color: var(--color-neutral-700); margin: 0; }
.others-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.other-card { display: flex; flex-direction: column; gap: 8px; color: var(--color-text); text-decoration: none; }
.other-card:hover { color: var(--color-text); }
.other-card:hover .other-title { color: var(--color-accent-700); }
.other-card .plate { aspect-ratio: 3 / 2; }
.other-title { font-family: var(--font-heading); font-size: 22px; line-height: 1.15; }
.other-price { font-size: 14px; font-feature-settings: 'tnum' 1; }

/* ── Rodapé ──────────────────────────────────────────────────────────────────────────── */
.footer { background: color-mix(in srgb, var(--color-neutral-900) 70%, black); color: var(--color-neutral-200); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--gutter) 40px; display: flex; flex-direction: column; gap: 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.footer .logo { height: 64px; }
.footer .btn-primary { color: var(--color-accent-300); border-color: var(--color-accent-400); }
.footer .btn-primary:hover { color: var(--color-accent-300); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; font-size: 14px; line-height: 1.7; }
.footer-cols > div { display: flex; flex-direction: column; gap: 4px; }
.footer-cols .lbl { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-400); }
.footer-cols a, .footer-cols span.v { color: var(--color-neutral-100); text-decoration: none; font-feature-settings: 'tnum' 1; }
.footer-cols a:hover { color: var(--color-accent-300); }
.footer-rule { height: 1px; background: color-mix(in srgb, var(--color-accent-400) 40%, transparent); }
.footer-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-400); }

/* ── 404 ─────────────────────────────────────────────────────────────────────────────── */
.notfound { max-width: 640px; margin: 0 auto; padding: clamp(72px, 12vw, 160px) var(--gutter); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.notfound h1 { font-weight: 400; font-size: clamp(40px, 6vw, 64px); }

@media (max-width: 420px) {
  .nav { gap: 12px; }
  .nav .btn { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }