/* CasaViva Costa design system (Phase 3). One file, four layers; page
   stylesheets add the `page` layer. No framework. */
@layer reset, base, components, utilities, page;

/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #16233b;
  --ink-2: #4b5566;
  --ink-3: #596375;
  --line: #dde2e7;
  --line-2: #c5ccd5;
  --paper: #ffffff;
  --stone: #f3f5f6;
  --stone-2: #e9ecef;
  --brand: #9e4922;
  --brand-ink: #7a3517;
  --brand-tint: #fbf1ea;
  --sea: #0f6b8a;
  --sea-ink: #0b526a;
  --sea-tint: #e6f1f5;
  --ready: #25643d;
  --ready-tint: #e8f3ec;
  --amber: #8d5012;
  --amber-tint: #fbf3e3;
  --danger: #b42318;
  --danger-tint: #fdecea;

  --font: "Avenir Next", "Segoe UI Variable Text", "Aptos", "SF Pro Text",
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --lh: 1.55;
  --measure: 66ch;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --gutter: 1rem;
  --wrap: 75rem;
  --radius: 4px;
  --radius-l: 10px;
  --shadow: 0 1px 2px rgba(22, 35, 59, 0.08), 0 8px 24px -12px rgba(22, 35, 59, 0.18);
  --header-h: 3.75rem;
  --focus: 0 0 0 3px rgba(15, 107, 138, 0.35);
}
@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
    --header-h: 4.25rem;
  }
}

/* ------------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  :focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; box-shadow: var(--focus); border-radius: var(--radius); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* -------------------------------------------------------------------- base */
@layer base {
  /* Focus and anchor jumps stop clear of the sticky header and, on a phone,
     the action bar (WCAG 2.4.11: a focused control is never hidden under them). */
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-3)); }
  @media (max-width: 63.99em) { html:has(.actionbar) { scroll-padding-bottom: 5.5rem; } }
  body {
    font-family: var(--font);
    font-size: var(--fs-m);
    line-height: var(--lh);
    color: var(--ink);
    background: var(--stone);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  main { flex: 1 0 auto; min-width: 0; }
  :target, [id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
  /* "anywhere", not "break-word": only "anywhere" lowers a heading's min-content width, so one long word
     ("Nutzungsbedingungen", "Umsetzungsleitfaden") can never widen a grid or flex column past the screen.
     Where the browser hyphenates (hyphens: auto), it breaks at a hyphen first. */
  h1, h2, h3, h4 { font-weight: 650; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
  h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-l); }
  h4 { font-size: var(--fs-m); }
  p { max-width: var(--measure); text-wrap: pretty; overflow-wrap: break-word; }
  a { color: var(--sea); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
  a:hover { color: var(--sea-ink); }
  small { font-size: var(--fs-s); }
  strong { font-weight: 650; }
  hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
  ::selection { background: var(--brand-tint); }
  [hidden] { display: none !important; }
}

/* -------------------------------------------------------------- components */
@layer components {
  /* Layout */
  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .wrap--narrow { width: min(100% - 2 * var(--gutter), 48rem); margin-inline: auto; }
  .section { padding-block: var(--sp-6); }
  .section--tight { padding-block: var(--sp-5); }
  .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
  .section__head h2 { font-size: var(--fs-xl); }
  .section__lead { color: var(--ink-2); max-width: var(--measure); }
  .sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; left: var(--sp-4); top: -3rem; background: var(--ink); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); z-index: 100; text-decoration: none; }
  .skip-link:focus { top: var(--sp-2); }
  .surface { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); }
  .stack > * + * { margin-top: var(--sp-4); }
  .stack--s > * + * { margin-top: var(--sp-2); }
  .stack--l > * + * { margin-top: var(--sp-6); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
  .grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
  .grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .grid > *, .grid--wide > * { min-width: 0; }
  .muted { color: var(--ink-2); }
  .faint { color: var(--ink-3); }
  .num { font-variant-numeric: tabular-nums lining-nums; }
  .prose { max-width: var(--measure); overflow-wrap: break-word; }
  .prose p + p { margin-top: 1em; }
  .prose ul, .prose ol { padding-left: 1.25em; margin: 0.75em 0; }

  /* Hero photo (_hero_photo.html, hero.js): the day or the night photo
     covering its box, with a slow zoom on a wrapper (transform only, so
     nothing reflows). --hero-focus keeps the pool, the terrace and the sea
     in frame when a phone crops the sides. No zoom with reduced motion; the
     island pauses it off screen, in a hidden tab and with Save-Data. */
  .hero-photo { --hero-focus: 50% 50%; position: absolute; inset: 0; overflow: hidden; contain: paint; background: var(--ink); pointer-events: none; }
  .hero-photo--home { --hero-focus: 74% 58%; }
  .hero-photo--new-build { --hero-focus: 72% 70%; }
  .hero-photo--resales { --hero-focus: 70% 74%; }
  .hero-photo__motion { position: absolute; inset: 0; transform: scale(1.01); transform-origin: var(--hero-focus); animation: hero-zoom 18s ease-in-out infinite alternate; will-change: transform; backface-visibility: hidden; }
  .hero-photo__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--hero-focus); }
  .hero-photo[data-motion="paused"] .hero-photo__motion { animation-play-state: paused; }
  @keyframes hero-zoom { from { transform: scale(1.01); } to { transform: scale(1.09); } }
  @media (prefers-reduced-motion: reduce) { .hero-photo__motion { animation: none; will-change: auto; } }

  /* Read more (readmore.js): a long text shows its first 16rem (20rem from
     48em) under a soft fade, with a button. Collapsed from the first paint
     when scripts run, so nothing jumps; the island opens a short text again
     and shows the button only when the text is taller than its box. Without
     JavaScript the whole text shows. */
  @media (scripting: enabled) {
    .readmore:not([data-readmore="open"], [data-readmore="short"]) .readmore__body { max-height: 16rem; overflow: hidden; }
  }
  .readmore[data-readmore="collapsed"] .readmore__body { max-height: 16rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent); }
  .readmore__body { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
  .readmore__toggle { margin-top: var(--sp-3); }
  .readmore__toggle .icon { transition: transform 0.2s ease; }
  .readmore[data-readmore="open"] .readmore__toggle .icon { transform: rotate(180deg); }
  @media (min-width: 48em) {
    @media (scripting: enabled) {
      .readmore:not([data-readmore="open"], [data-readmore="short"]) .readmore__body { max-height: 20rem; }
    }
    .readmore[data-readmore="collapsed"] .readmore__body { max-height: 20rem; }
  }
  @media (prefers-reduced-motion: reduce) { .readmore__toggle .icon { transition: none; } }

  /* Icons */
  .icon { flex: none; vertical-align: -0.2em; }

  /* Header */
  .site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-header__bar { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); }
  .site-header__logo { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; margin-right: auto; min-height: 2.75rem; }
  .site-header__logo img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
  .site-header__logo span { font-size: var(--fs-m); }
  .site-nav { display: none; }
  .site-nav a { text-decoration: none; color: var(--ink); font-weight: 500; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); min-height: 2.5rem; display: inline-flex; align-items: center; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--stone); color: var(--ink); }
  .site-header__actions { display: flex; align-items: center; gap: var(--sp-1); }
  .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ink); text-decoration: none; position: relative; }
  .iconbtn:hover { background: var(--stone); color: var(--ink); }
  .iconbtn__count { position: absolute; top: 0.2rem; right: 0.1rem; min-width: 1.1rem; height: 1.1rem; padding-inline: 0.3rem; border-radius: 1rem; background: var(--brand); color: #fff; font-size: 0.7rem; font-weight: 650; line-height: 1.1rem; text-align: center; }
  .iconbtn__count:empty, .iconbtn__count[data-count="0"] { display: none; }
  .site-header__phone { display: none; }
  .site-menu { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper); z-index: 39; overflow: auto; padding: var(--sp-5) var(--gutter) var(--sp-8); }
  .site-menu[data-open] { display: block; }
  .site-menu__links { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-6); }
  .site-menu__links a { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; font-size: var(--fs-l); font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); min-height: 2.75rem; }
  .site-menu__group { margin-top: var(--sp-5); }
  .site-menu__group h2 { font-size: var(--fs-s); color: var(--ink-3); font-weight: 600; margin-bottom: var(--sp-2); }
  .site-menu__group a { display: flex; align-items: center; padding: var(--sp-2) 0; text-decoration: none; color: var(--ink); min-height: 2.5rem; }
  .lang-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .lang-list a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line-2); border-radius: 2rem; text-decoration: none; color: var(--ink); font-size: var(--fs-s); }
  .lang-list a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .lang-menu { position: relative; }
  .lang-menu summary { list-style: none; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; }
  .lang-menu summary::-webkit-details-marker { display: none; }
  .lang-menu__panel { position: absolute; right: 0; top: calc(100% + 0.25rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: var(--sp-2); min-width: 11rem; display: grid; gap: 1px; z-index: 50; }
  .lang-menu__panel a { display: flex; align-items: center; min-height: 2.25rem; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: var(--fs-s); }
  .lang-menu__panel a:hover { background: var(--stone); }
  .lang-menu__panel a[aria-current] { font-weight: 650; }
  @media (min-width: 64em) {
    .site-nav { display: flex; gap: var(--sp-1); margin-right: auto; }
    .site-header__logo { margin-right: var(--sp-5); }
    .site-header__phone { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); font-weight: 600; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); min-height: 2.75rem; }
    .site-header__phone:hover { background: var(--stone); }
    .site-header__menu { display: none; }
  }

  /* Footer */
  .site-footer { background: var(--ink); color: #c9d1dc; margin-top: var(--sp-8); padding: var(--sp-7) 0 var(--sp-6); font-size: var(--fs-s); }
  .site-footer a { color: #fff; text-decoration: none; display: inline-block; padding-block: 0.3rem; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer .faint { color: #a0aec0; }
  .site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
  @media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
  .site-footer__brand { display: flex; align-items: center; gap: var(--sp-3); color: #fff; font-weight: 650; font-size: var(--fs-l); text-decoration: none; min-height: 2.75rem; }
  .site-footer__brand img { width: 2.75rem; height: 2.75rem; border-radius: 50%; }
  .site-footer__tagline { margin-top: var(--sp-3); max-width: 34ch; }
  .site-footer h2 { font-size: var(--fs-s); color: #fff; font-weight: 650; margin-bottom: var(--sp-3); }
  .site-footer ul { display: grid; gap: var(--sp-2); }
  .site-footer ul a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 1.5rem; }
  .site-footer__legal { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; align-items: center; }
  .site-footer__legal a { color: #fff; display: inline-flex; align-items: center; min-height: 1.5rem; }
  .site-footer__raicv { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .site-footer .lang-list a { border-color: rgba(255,255,255,0.3); min-height: 2.25rem; }
  .site-footer .lang-list a[aria-current] { background: #fff; color: var(--ink); border-color: #fff; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 2.75rem; padding: 0.6rem 1.1rem; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-s); line-height: 1.25; text-decoration: none; border: 1px solid transparent; white-space: normal; text-align: center; max-width: 100%; overflow-wrap: break-word; }
  .btn--primary { background: var(--brand); color: #fff; min-height: 2.75rem; min-width: 2.75rem; }
  .btn--primary:hover { background: var(--brand-ink); color: #fff; }
  .btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
  .btn--secondary:hover { border-color: var(--ink); color: var(--ink); }
  .btn--ink { background: var(--ink); color: #fff; }
  .btn--ink:hover { background: #0e1729; color: #fff; }
  .btn--ghost { color: var(--ink); padding-inline: var(--sp-2); min-height: 2.5rem; }
  .btn--ghost:hover { background: var(--stone); color: var(--ink); }
  .btn--block { width: 100%; }
  .btn--s { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }
  .btn[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-ink); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

  /* Badges and chips */
  .badge { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; padding: 0.2rem 0.6rem; border-radius: 2rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; background: var(--stone-2); color: var(--ink-2); max-width: 100%; overflow-wrap: break-word; }
  .badge--key_ready { background: var(--ready-tint); color: var(--ready); }
  .badge--completion_year { background: var(--sea-tint); color: var(--sea-ink); }
  .badge--date_on_request { background: var(--stone-2); color: var(--ink-2); }
  .badge--drop { background: var(--amber-tint); color: var(--amber); }
  .badge--new { background: var(--brand-tint); color: var(--brand-ink); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line-2); border-radius: 2rem; font-size: var(--fs-xs); color: var(--ink); background: var(--paper); text-decoration: none; max-width: 100%; overflow-wrap: break-word; }
  .chip--soft { border-color: transparent; background: var(--stone); }
  a.chip:hover { border-color: var(--ink); color: var(--ink); }

  /* Breadcrumbs */
  .crumbs { font-size: var(--fs-xs); color: var(--ink-3); padding-block: var(--sp-3); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; align-items: center; }
  .crumbs li { display: inline-flex; align-items: center; }
  .crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--line-2); }
  .crumbs a { color: var(--ink-2); text-decoration: none; display: inline-block; padding-block: 0.4rem; }
  .crumbs a:hover { color: var(--ink); text-decoration: underline; }
  .crumbs li:last-child a { color: var(--ink); pointer-events: none; }

  /* Price */
  .price { font-variant-numeric: tabular-nums lining-nums; font-weight: 650; letter-spacing: -0.01em; }
  .price--l { font-size: var(--fs-xl); }
  .price--xl { font-size: var(--fs-2xl); }
  .price__to { color: var(--ink-2); font-weight: 500; font-size: 0.75em; }
  .price__was { color: var(--ink-3); font-weight: 500; text-decoration: line-through; font-size: 0.8em; }
  /* A price reduction (scheme/_drop.html): the badge, then the old price struck through. */
  .drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0.3rem 0 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
  .drop .badge { gap: 0.25rem; }
  .drop a.badge { text-decoration: none; }
  .drop a.badge:hover { text-decoration: underline; }
  .drop__was { white-space: nowrap; }
  .drop .price__was { font-size: 1em; }

  /* Facts (key-value) */
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--sp-3) var(--sp-4); }
  .facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
  .facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }
  .facts--row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
  .facts--row > div { display: flex; flex-direction: column; }

  /* Development card */
  .dev-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: var(--ink); container-type: inline-size; }
  .dev-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--stone-2); }
  .dev-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .dev-card__media .badge { position: absolute; left: var(--sp-3); top: var(--sp-3); background: rgba(255, 255, 255, 0.94); }
  .dev-card__media .badge--key_ready { color: var(--ready); }
  .dev-card__save { position: absolute; right: var(--sp-2); top: var(--sp-2); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.94); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
  .dev-card__save[aria-pressed="true"] { color: var(--brand); }
  .dev-card__body { display: grid; gap: 0.2rem; }
  .dev-card__name { font-weight: 650; font-size: var(--fs-m); line-height: 1.35; color: var(--ink); text-decoration: none; display: inline-block; min-height: 1.5rem; overflow-wrap: break-word; }
  .dev-card__name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.14em; }
  .dev-card__row .price { white-space: nowrap; }
  .dev-card__place { color: var(--ink-2); font-size: var(--fs-s); }
  .dev-card__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); margin-top: 0.2rem; }
  .dev-card__from { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; margin-right: 0.2rem; }
  .dev-card__meta { color: var(--ink-2); font-size: var(--fs-xs); }
  .dev-card--row { flex-direction: row; align-items: center; }
  .dev-card--row .dev-card__media { width: 7rem; aspect-ratio: 1; flex: none; }
  /* Card photo flip (card-photos.js): further photos stacked in the frame,
     hidden until flipped; arrows on hover and focus, a counter on touch. */
  .dev-card__media { touch-action: pan-y; }
  .dev-card__photo { position: absolute; inset: 0; display: none; }
  .dev-card__photo[data-shown] { display: block; }
  .dev-card__flip, .dev-card__count { position: absolute; z-index: 1; }
  .dev-card__flip { top: calc(37.5cqw - 1.125rem); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; }
  .dev-card__flip--prev { left: var(--sp-2); }
  .dev-card__flip--next { right: var(--sp-2); }
  .dev-card__count { top: calc(75cqw - 1.75rem); right: var(--sp-2); background: rgba(22, 35, 59, 0.75); color: #fff; font-size: var(--fs-xs); padding: 0.05rem 0.5rem; border-radius: 2rem; pointer-events: none; }
  .dev-card:hover .dev-card__flip, .dev-card__flip:focus-visible { opacity: 1; }
  @media (hover: hover) { .dev-card__count { opacity: 0; } .dev-card:hover .dev-card__count, .dev-card:focus-within .dev-card__count { opacity: 1; } }
  @media (hover: none) { .dev-card__flip:not(:focus-visible) { pointer-events: none; } }
  .dev-card--row .dev-card__flip, .dev-card--row .dev-card__count, .dev-card--row .dev-card__photo { display: none !important; }

  /* Lists */
  .rows { border-top: 1px solid var(--line); }
  .rows > li, .rows > div { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }

  /* Tables */
  .table { width: 100%; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
  .table th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
  .table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
  .table tr[aria-current] td { background: var(--brand-tint); }
  .table__num { text-align: right; white-space: nowrap; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Forms */
  .form { display: grid; gap: var(--sp-4); }
  @media (min-width: 40em) { .form--lead { grid-template-columns: 1fr 1fr; } .form--lead .field--span { grid-column: 1 / -1; } }
  .field { display: grid; gap: 0.35rem; }
  .field__label { font-size: var(--fs-s); font-weight: 600; }
  .field__label small { font-weight: 400; color: var(--ink-3); }
  .input { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
  .input:focus { border-color: var(--sea); outline: none; box-shadow: var(--focus); }
  textarea.input { min-height: 6rem; resize: vertical; }
  .input[aria-invalid="true"] { border-color: var(--danger); }
  .field__error { color: var(--danger); font-size: var(--fs-xs); }
  .field__error:empty { display: none; }
  .field__help { color: var(--ink-2); font-size: var(--fs-xs); }
  .field--invalid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .field--invalid select,
  .field--invalid textarea {
    border-color: var(--danger);
  }
  .errorlist {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--danger);
    font-size: var(--fs-xs);
  }
  .check { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-s); min-height: 1.75rem; cursor: pointer; }
  .check input { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; margin: 0; accent-color: var(--brand); flex: none; cursor: pointer; }
  .check a { display: inline-flex; align-items: center; min-height: 1.5rem; }
  .checks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .checks .check { border: 1px solid var(--line-2); border-radius: 2rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem; align-items: center; min-height: 2rem; }
  .checks .check input { margin: 0; }
  .checks .check:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .section__head a,
  .section__head .text-s { min-height: 1.5rem; display: inline-flex; align-items: center; }
  .checks--fold summary { cursor: pointer; font-size: var(--fs-s); color: var(--sea); list-style: none; margin-top: var(--sp-2); min-height: 1.5rem; display: inline-flex; align-items: center; }
  .checks--fold summary::-webkit-details-marker { display: none; }
  .checks--fold[open] summary { margin-bottom: var(--sp-2); }
  legend { font-size: var(--fs-s); font-weight: 600; margin-bottom: 0.35rem; padding: 0; }
  .form__note { font-size: var(--fs-xs); color: var(--ink-3); }
  .form__done { background: var(--ready-tint); border: 1px solid #bfe0cb; border-radius: var(--radius-l); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
  .form__done h3 { color: var(--ready); }

  /* Notice */
  .notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-l); background: var(--sea-tint); color: var(--sea-ink); font-size: var(--fs-s); }
  .notice--warn { background: var(--amber-tint); color: #7a4e0e; }
  .notice--error { background: var(--danger-tint); color: var(--danger); }
  .notice--success { background: var(--ready-tint); color: var(--ready); }

  /* Lead panel (shared by every page type) */
  .lead-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--sp-5); }
  .lead-panel h2, .lead-panel h3 { font-size: var(--fs-l); margin-bottom: var(--sp-1); }
  .lead-panel__lead { color: var(--ink-2); font-size: var(--fs-s); margin-bottom: var(--sp-4); }
  .lead-panel__alt { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

  /* Newsletter sign-up (scheme/_newsletter.html): home, searches, detail pages */
  .newsletter { display: grid; gap: var(--sp-4) var(--sp-7); padding: var(--sp-5); border-radius: var(--radius-l); background: var(--sea-tint); border: 1px solid #cfe3ea; }
  .newsletter__copy h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
  .newsletter__copy p { color: var(--ink-2); font-size: var(--fs-s); }
  .newsletter__form { gap: var(--sp-3); }
  .newsletter__fields { display: grid; gap: var(--sp-3); }
  .newsletter__consent { align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
  .newsletter__consent input { margin-top: 0.05rem; }
  .newsletter__consent a { display: inline; min-height: 0; }
  .newsletter .form__done { background: var(--paper); }
  @media (min-width: 40em) { .newsletter__fields { grid-template-columns: 3fr 2fr; } }
  @media (min-width: 64em) { .newsletter { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; padding: var(--sp-6); } }

  /* Agent strip (trust) */
  .agent { display: flex; gap: var(--sp-4); align-items: center; }
  .agent img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
  .agent__name { font-weight: 650; }
  .agent__name a, .guide__author-name a, .cluster a.text-s { min-height: 1.5rem; display: inline-flex; align-items: center; }
  .agent__meta { color: var(--ink-2); font-size: var(--fs-s); }
  .trust__contact li, .trust__contact a { min-height: 1.5rem; display: inline-flex; align-items: center; }

  /* Pagination */
  .pagination { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: center; margin-top: var(--sp-6); font-size: var(--fs-s); }
  .pagination a, .pagination span { min-width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); text-decoration: none; color: var(--ink); padding-inline: var(--sp-2); }
  .pagination a:hover { background: var(--stone-2); }
  .pagination [aria-current] { background: var(--ink); color: #fff; }

  /* Empty state */
  .empty { padding: var(--sp-7) var(--sp-5); text-align: center; background: var(--paper); border: 1px dashed var(--line-2); border-radius: var(--radius-l); display: grid; gap: var(--sp-3); justify-items: center; }
  .empty h2 { font-size: var(--fs-l); }

  /* Sticky mobile action bar */
  .actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); border-top: 1px solid var(--line); padding: var(--sp-2) var(--gutter) max(var(--sp-2), env(safe-area-inset-bottom)); display: flex; gap: var(--sp-2); align-items: center; }
  .actionbar .btn { flex: 1; }
  .actionbar .btn--ghost { flex: 0 0 auto; }
  .has-actionbar { padding-bottom: 4.5rem; }
  @media (min-width: 64em) { .actionbar { display: none; } .has-actionbar { padding-bottom: 0; } }

  /* Cookie banner (the shared consent markup, restyled as a bottom sheet) */
  .cookie-overlay { position: fixed; inset: auto 0 0 0; z-index: 60; padding: var(--sp-3); pointer-events: none; }
  .cookie-overlay--hidden { display: none; }
  .cookie-modal { pointer-events: auto; max-width: 40rem; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: var(--sp-4); font-size: var(--fs-s); }
  .cookie-modal__intro { display: flex; gap: var(--sp-3); align-items: flex-start; }
  .cookie-modal__mark { width: 1.75rem; height: 1.75rem; color: var(--sea); flex: none; }
  .cookie-modal__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .cookie-modal__text strong { display: block; margin-bottom: 0.2rem; }
  .cookie-modal__text p { color: var(--ink-2); font-size: var(--fs-xs); }
  .cookie-modal__link { font-size: var(--fs-xs); }
  .cookie-modal__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
  .cookie-action { min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--radius); border: 1px solid var(--line-2); font-weight: 600; font-size: var(--fs-xs); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
  .cookie-action--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
  .cookie-action--settings { border-color: transparent; text-decoration: underline; min-height: 2.5rem; }
  .cookie-modal__settings-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
  .cookie-modal__back { font-size: var(--fs-l); line-height: 1; padding: 0 var(--sp-2); }
  .cookie-modal__preferences { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
  .cookie-pref { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
  .cookie-pref__copy strong, .cookie-pref__text strong { display: block; font-size: var(--fs-s); }
  .cookie-pref__copy p, .cookie-pref__copy span, .cookie-pref__text p, .cookie-pref__state { font-size: var(--fs-xs); color: var(--ink-2); }
  .cookie-pref__switch { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .cookie-modal__policy-link { font-size: var(--fs-xs); }
  .cookie-pref input { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; accent-color: var(--brand); }
  .cookie-modal__settings-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

  /* WhatsApp fallback float (when assistant is disabled) */
  .whatsapp-float {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(22, 35, 59, 0.15);
    z-index: 40;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .whatsapp-float__inner { display: inline-flex; align-items: center; justify-content: center; }
  .whatsapp-float__icon { width: 26px; height: 26px; fill: currentColor; }
  .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); }
  .whatsapp-float:focus-visible { outline: none; box-shadow: var(--focus); }
  body.has-actionbar .whatsapp-float,
  body:has(.actionbar) .whatsapp-float { bottom: calc(64px + max(12px, env(safe-area-inset-bottom))); }
}

/* --------------------------------------------------------------- utilities */
@layer utilities {
  .mt-2 { margin-top: var(--sp-2); }
  .mt-4 { margin-top: var(--sp-4); }
  .mt-6 { margin-top: var(--sp-6); }
  .mb-4 { margin-bottom: var(--sp-4); }
  .text-s { font-size: var(--fs-s); }
  a.text-s { min-height: 1.5rem; display: inline-flex; align-items: center; }
  .text-xs { font-size: var(--fs-xs); }
  .nowrap { white-space: nowrap; }
  .desktop-only { display: none; }
  @media (min-width: 64em) { .desktop-only { display: revert; } .mobile-only { display: none !important; } }
}

/* Map / satellite control inside every map frame (map.js). No Street View. */
@layer components {
  .map-views {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 2;
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line-2);
    box-shadow: 0 2px 8px rgba(22, 35, 59, 0.12);
  }
  .map-views__button {
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    padding: 0.35rem 0.75rem;
    min-height: 32px;
    border-radius: 999px;
    cursor: pointer;
  }
  .map-views__button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
  }
  .map-views__button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}