/* ==========================================================================
   components.css — reusable UI pieces (BEM-ish: .block__element--modifier)
   .eyebrow .btn .link-u .icon .frame .ph-chip .note .badge .site-header .brand
   .main-nav .lang .menu-btn .mobile-menu .listing-card .contact-badge .mock-banner
   ========================================================================== */

/* ---------- Mockup banner (delete the element before going live) ---------- */
.mock-banner{background:var(--c-note-bg);color:var(--c-note-ink);text-align:center;font-size:var(--fs-eyebrow);font-weight:500;line-height:1.4;padding:.5rem var(--gutter);border-bottom:1px solid var(--c-note-line)}

/* ---------- Eyebrow: small caps label with a blue hairline ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.9rem;margin:0;font:700 var(--fs-eyebrow)/1.3 var(--font-sans);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--c-blue-700)}
.eyebrow::before{content:"";width:43.2px;height:2px;background:var(--c-brand);flex:none}
.eyebrow--light{color:var(--c-white)}
.eyebrow--light::before{background:var(--c-blue-200)}

/* ---------- Icons (inline SVG, stroke = currentColor) ---------- */
.icon{width:19.8px;height:19.8px;flex:none}

/* ---------- Animated underline link ---------- */
.link-u{display:inline;text-decoration:none;padding-bottom:2px;color:var(--c-blue-700);font-weight:600;
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom/100% 1.5px;transition:background-size var(--dur-base) var(--ease-out)}
.link-u:hover,.link-u:focus-visible{background-size:0% 1.5px}
.link-u--nav{color:var(--c-ink);font-weight:500;background-size:0% 1.5px}
.link-u--nav:hover,.link-u--nav:focus-visible{background-size:100% 1.5px;color:var(--c-blue-700)}

/* ---------- Buttons: pill, colour sweep on hover, arrow nudge ---------- */
.btn{--btn-bg:var(--c-brand);--btn-fg:var(--c-white);--btn-sweep:var(--c-blue-800);--btn-bd:var(--c-brand);--btn-fg-hover:var(--c-white);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:50.4px;padding:0 1.9rem;border-radius:var(--radius-pill);border:1.5px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  font:600 var(--fs-ui)/1.1 var(--font-sans);letter-spacing:var(--tracking-ui);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-sweep);transform:translateY(101%);border-radius:inherit;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--btn-fg-hover);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn__arrow{width:18px;height:18px;flex:none;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(4.5px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--c-ink);--btn-sweep:var(--c-ink);--btn-bd:var(--c-ink)}
.btn--light{--btn-bg:var(--c-white);--btn-fg:var(--c-blue-800);--btn-sweep:var(--c-blue-100);--btn-bd:var(--c-white);--btn-fg-hover:var(--c-blue-900)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:var(--c-white);--btn-sweep:var(--c-white);--btn-bd:rgba(255,255,255,.85);--btn-fg-hover:var(--c-blue-800)}
.btn--sm{min-height:43.2px;padding:0 1.35rem}

/* ---------- Photo frame (art-directed PLACEHOLDER or real photo) ----------
   Placeholder: <div class="frame__art"></div> + <figcaption class="frame__caption">
   Real photo:  <img class="frame__img" src="…" alt="…">  (see README → Photos)          */
.frame{position:relative;overflow:hidden;border-radius:var(--radius-m);background:var(--ph-1);box-shadow:var(--shadow-frame)}
.frame--45{aspect-ratio:4/5}.frame--43{aspect-ratio:4/3}.frame--11{aspect-ratio:1/1}
.frame--arch{border-radius:999px 999px var(--radius-m) var(--radius-m)}
.frame--warm{--ph-1:var(--ph-warm-1);--ph-2:var(--ph-warm-2)}
.frame__art{position:absolute;inset:-9% 0;will-change:transform;background-color:var(--ph-1);
  background-image:var(--art,none),linear-gradient(160deg,var(--ph-1),var(--ph-2));background-repeat:no-repeat;background-position:center bottom,center;background-size:cover,cover}
.frame__art::after{content:"";position:absolute;inset:0;background:url("../assets/img/grain.svg");opacity:.55;mix-blend-mode:multiply}
.frame::after{content:"";position:absolute;inset:12.6px;border:1px solid rgba(40,107,206,.55);border-radius:inherit;pointer-events:none;z-index:2}
.frame--arch::after{border-radius:999px 999px 7.2px 7.2px}
.frame--art-facade{--art:url("../assets/img/ph-facade.svg")}
.frame--art-arch{--art:url("../assets/img/ph-arch.svg")}
.frame--art-portrait{--art:url("../assets/img/ph-portrait.svg")}
.frame__img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;will-change:transform}
.frame__caption{position:absolute;left:19.8px;right:19.8px;bottom:19.8px;z-index:3;display:flex;gap:.6rem;align-items:center;width:max-content;max-width:calc(100% - 39.6px);
  padding:.55rem 1rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.96);border:1px solid var(--c-line);font:600 var(--fs-eyebrow)/1.3 var(--font-sans);color:var(--c-ink)}
.frame__caption--center{left:50%;right:auto;bottom:auto;top:36%;transform:translateX(-50%);text-align:center;width:max-content;max-width:calc(100% - 57.6px)}
.frame__caption::before{content:"";width:7.2px;height:7.2px;border-radius:50%;background:var(--c-brand);flex:none}

/* ---------- Placeholder chip for unconfirmed data: [email — a confirmar] ---------- */
.ph-chip{display:inline-block;padding:.05em .55em;border:1.5px dashed var(--c-border-strong);border-radius:5.4px;background:var(--c-white);color:var(--c-ink);font-size:.92em;font-weight:500;line-height:1.5}
.note{display:flex;gap:.8rem;align-items:flex-start;margin:0;padding:1rem 1.2rem;border:1.5px dashed var(--c-note-line);border-radius:var(--radius-s);background:var(--c-note-bg);color:var(--c-note-ink);font-size:var(--fs-small);line-height:1.55}
.note .icon{width:18px;height:18px;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem;border:1.5px solid var(--c-brand);border-radius:var(--radius-pill);background:var(--c-white);font:700 var(--fs-small)/1 var(--font-sans);letter-spacing:.04em;color:var(--c-ink)}
.badge::before{content:"";width:6.3px;height:6.3px;transform:rotate(45deg);background:var(--c-brand);flex:none}

/* ---------- Site header: sticky, transparent on the hero, white glass after scroll ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;
  transition:height var(--dur-base) var(--ease-out),background var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base)}
.site-header.is-scrolled{height:var(--header-h-small);background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14.4px);-webkit-backdrop-filter:saturate(1.4) blur(14.4px);
  border-bottom-color:var(--c-line-soft);box-shadow:0 10.8px 27px -22px rgba(14,26,46,.35)}
.site-header__bar{display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem);width:100%}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;min-width:0;flex:none}
.brand__symbol{height:41.4px;width:auto;transition:height var(--dur-base) var(--ease-out)}
.is-scrolled .brand__symbol{height:36px}
.brand__text{display:grid;gap:.4rem}
.brand__word{height:13.5px;width:auto}
.brand__sub{font:600 .9375rem/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-slate);white-space:nowrap}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)}
.main-nav__link{font-size:var(--fs-ui);white-space:nowrap}
@media (min-width:1021px) and (max-width:1180px){.site-header .brand__sub-long{display:none}}   /* keep the desktop nav on one line */

/* ---------- Language switch: sliding knob ---------- */
.lang{flex:none;--pos:0;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--c-ink);border-radius:var(--radius-pill);padding:3px;background:var(--c-white)}
.lang[data-lang="en"]{--pos:1}
.lang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:inherit;background:var(--c-ink);transform:translateX(calc(var(--pos) * 100%));transition:transform var(--dur-base) var(--ease-out)}
.lang__btn{position:relative;z-index:1;border:0;background:none;cursor:pointer;min-width:41.4px;min-height:34.2px;padding:0 .7rem;font:700 .9375rem/1 var(--font-sans);letter-spacing:.06em;color:var(--c-ink);transition:color var(--dur-base)}
.lang__btn[aria-pressed="true"]{color:var(--c-white)}

/* ---------- Mobile menu ---------- */
.menu-btn{flex:none;display:none;width:41.4px;height:41.4px;border:1.5px solid var(--c-ink);border-radius:50%;background:var(--c-white);cursor:pointer;position:relative;z-index:calc(var(--z-menu) + 1)}
.menu-btn__bar{position:absolute;left:10.8px;right:10.8px;height:1.5px;background:var(--c-ink);transition:transform var(--dur-base) var(--ease-out),opacity .2s}
.menu-btn__bar:nth-child(1){top:14.4px}.menu-btn__bar:nth-child(2){top:19.4px}.menu-btn__bar:nth-child(3){top:24.3px}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--c-white);padding:calc(var(--header-h) + 4.5rem) var(--gutter) 2rem;display:flex;flex-direction:column;gap:.2rem;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 39.6px) 32.4px);visibility:hidden;transition:clip-path .7s var(--ease-out),visibility 0s .7s}
.mobile-menu.is-open{clip-path:circle(150% at calc(100% - 39.6px) 32.4px);visibility:visible;transition:clip-path .8s var(--ease-out),visibility 0s}
.mobile-menu__link{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,8.5vw,3rem);line-height:1.2;text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--c-line);
  opacity:0;transform:translateY(16.2px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.mobile-menu.is-open .mobile-menu__link{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * 70ms)}
.mobile-menu__foot{margin-top:auto;padding-top:2rem;display:grid;gap:.9rem}
.mobile-menu__foot .btn{width:100%}
.site-header.menu-open{z-index:calc(var(--z-menu) + 1);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:none}
@media (max-width:1020px){
  .main-nav{display:none}
  .menu-btn{display:inline-block}
  .site-header .lang{margin-left:auto}
}
.brand__sub-long{margin-left:.45em}
@media (max-width:420px){
  .site-header .brand__sub-long{display:none}
  .site-header .brand__symbol{height:34.2px}.site-header.is-scrolled .brand__symbol{height:30.6px}
  .site-header .brand__word{height:11.7px}
  .lang__btn{min-width:34.2px;padding:0 .5rem}
  .site-header__bar{gap:.55rem}
}

/* ---------- Listing card (rendered by main.js from js/listings.js) ---------- */
.listing-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius-m);overflow:hidden;text-decoration:none;
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur-base)}
.listing-card:hover,.listing-card:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--c-blue-200)}
.listing-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ph-1)}
.listing-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.listing-card:hover .listing-card__media img{transform:scale(1.06)}
.listing-card__media .frame__art{inset:0}
.listing-card__deal{position:absolute;top:12.6px;left:12.6px;z-index:2;padding:.4rem .8rem;border-radius:var(--radius-pill);background:var(--c-white);color:var(--c-blue-800);font:700 .9375rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--shadow-1)}
.listing-card__photo-note{position:absolute;left:10.8px;right:10.8px;bottom:10.8px;z-index:2;width:max-content;max-width:calc(100% - 21.6px);padding:.35rem .65rem;border-radius:5.4px;
  background:rgba(255,246,218,.96);border:1px dashed var(--c-note-line);color:var(--c-note-ink);font:600 .9375rem/1.3 var(--font-sans)}
.listing-card__body{display:flex;flex-direction:column;gap:.35rem;padding:1.4rem 1.4rem 1.3rem;flex:1}
.listing-card__price{font:600 clamp(1.6rem,1.4rem + .5vw,1.9rem)/1.1 var(--font-display);color:var(--c-ink);letter-spacing:-.015em}
.listing-card__title{margin:0;font:600 1.0625rem/1.35 var(--font-sans);color:var(--c-ink)}
.listing-card__loc{margin:0;color:var(--c-slate);font-size:1rem;line-height:1.45}
.listing-card__meta{display:flex;flex-direction:column;gap:.45rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--c-line-soft);font-size:var(--fs-small);color:var(--c-ink)}
.listing-card__meta span{display:inline-flex;align-items:center;gap:.4rem}
.listing-card__meta .icon{width:16.2px;height:16.2px;color:var(--c-brand)}
.listing-card__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font:600 var(--fs-small)/1 var(--font-sans);color:var(--c-blue-700)}
.listing-card__go svg{width:14.4px;height:14.4px;transition:transform var(--dur-base) var(--ease-out)}
.listing-card:hover .listing-card__go svg{transform:translate(3px,-3px)}

/* ---------- Floating contact badge "Sun da Scala WJS · Estou online ↗" (opens WhatsApp) ---------- */
.contact-badge{position:fixed;right:clamp(12.6px,2.5vw,25.2px);bottom:clamp(12.6px,2.5vw,25.2px);z-index:var(--z-float);display:inline-flex;align-items:center;gap:.85rem;
  padding:.45rem 1.5rem .45rem .45rem;border-radius:var(--radius-pill);background:var(--c-brand);color:var(--c-white);text-decoration:none;
  box-shadow:0 16.2px 36px -16px rgba(27,78,155,.6),0 2px 5.4px rgba(14,26,46,.12);
  opacity:0;transform:translateY(21.6px) scale(.94);pointer-events:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),background var(--dur-fast),box-shadow var(--dur-base) var(--ease-out)}
.contact-badge.is-visible{opacity:1;transform:none;pointer-events:auto}
.contact-badge.is-visible:hover,.contact-badge.is-visible:focus-visible{transform:translateY(-4px);background:var(--c-brand-hover);box-shadow:0 23.4px 45px -18px rgba(27,78,155,.7),0 2px 5.4px rgba(14,26,46,.12)}
.contact-badge:focus-visible{outline:3px solid var(--c-blue-200);outline-offset:3px}
.contact-badge__avatar{position:relative;flex:none;width:52.2px;height:52.2px;border-radius:50%;box-shadow:0 0 0 3px var(--c-white)}
.contact-badge__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.contact-badge__dot{position:absolute;top:1px;right:-1px;width:12.6px;height:12.6px;border-radius:50%;background:var(--c-online);box-shadow:0 0 0 2.5px var(--c-white)}
.contact-badge__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c-online);animation:badge-pulse 2.4s var(--ease-out) infinite}
@keyframes badge-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.4);opacity:0}}
.contact-badge__text{display:grid;gap:.3rem;line-height:1.15}
.contact-badge__name{font:700 1.125rem/1.15 var(--font-sans);letter-spacing:-.005em;white-space:nowrap}
.contact-badge__sub{display:inline-flex;align-items:center;gap:.35rem;font:500 .9375rem/1.2 var(--font-sans);color:var(--c-blue-50);white-space:nowrap}
.contact-badge__sub svg{width:13.5px;height:13.5px;transition:transform var(--dur-base) var(--ease-out)}
.contact-badge:hover .contact-badge__sub svg{transform:translate(2px,-2px)}
.contact-badge__short{display:none;font:600 .9375rem/1 var(--font-sans);white-space:nowrap}
/* mobile: compact pill (avatar + "Sun · online") so it covers as little content as possible */
@media (max-width:640px){
  .contact-badge{gap:.55rem;padding:.3rem .95rem .3rem .3rem;right:10.8px;bottom:10.8px}
  .contact-badge__avatar{width:36px;height:36px;box-shadow:0 0 0 2px var(--c-white)}
  .contact-badge__dot{width:9.9px;height:9.9px;top:0;right:-2px;box-shadow:0 0 0 2px var(--c-white)}
  .contact-badge__text{display:none}
  .contact-badge__short{display:inline}
}
body.menu-open .contact-badge{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.contact-badge{transition:none;transform:none}.contact-badge__dot::after{animation:none;display:none}.contact-badge.is-visible:hover{transform:none}}

/* ---------- "Área privada" (secondary, subtle) ---------- */
.main-nav__private{display:inline-flex;align-items:center;gap:.45rem;min-height:39.6px;padding:0 .95rem;border:1px solid var(--c-line);border-radius:var(--radius-pill);
  color:var(--c-slate);text-decoration:none;font:500 var(--fs-small)/1 var(--font-sans);white-space:nowrap;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.main-nav__private:hover,.main-nav__private:focus-visible{color:var(--c-blue-700);border-color:var(--c-blue-300);background:var(--c-blue-50)}
.main-nav__private .icon{width:14.4px;height:14.4px}
@media (max-width:1380px){.main-nav__private{padding:0;width:39.6px;justify-content:center}.main-nav__private-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.mobile-menu__private{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;margin-top:1.1rem;min-height:39.6px;padding:0 1.1rem;border:1px solid var(--c-line);border-radius:var(--radius-pill);
  color:var(--c-slate);text-decoration:none;font:500 1rem/1 var(--font-sans);opacity:0;transform:translateY(16.2px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.mobile-menu.is-open .mobile-menu__private{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * 70ms)}
.mobile-menu__private .icon{width:16.2px;height:16.2px}
.ph-chip--sm{font-size:var(--fs-eyebrow)}
/* featured listing (= heroFeatureId): small "Em destaque" badge + brand outline */
.listing-card__featured{position:absolute;top:12.6px;right:12.6px;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:var(--radius-pill);background:var(--c-brand);color:var(--c-white);font:700 .9375rem/1 var(--font-sans);letter-spacing:.06em;box-shadow:var(--shadow-1)}
.listing-card__featured svg{width:12.6px;height:12.6px}
.listing-card--featured{border-color:var(--c-brand);box-shadow:0 0 0 1px var(--c-brand)}