/* =========================================================================
   Inmoblia public brand system
   Satoshi typography, Manrope fallback, and the canonical brand palette.
   ========================================================================= */

/* ----- Design tokens ----- */
:root {
  --teal: #0dbbac;
  --teal-600: #087f75;
  --teal-050: #e8faf7;
  --teal-100: #c8f1eb;
  --purple: #6a46f4;
  --purple-600: #5732dc;
  --purple-050: #f0edff;
  --purple-100: #e4dfff;
  --purple-200: #d3cbfb;

  --ink: #0a1d33;
  --ink-800: #132b45;
  --ink-700: #1c3a58;
  --text: #334657;
  --slate: #637b88;
  --muted: #586f7b;
  --faint: #8b9ba4;

  --bg: #f5f7fa;
  --surface: #eef2f5;
  --surface-2: #e4eaee;
  --line: #dde4e8;
  --line-strong: #cbd5db;

  --c-high: #0b9e73;
  --c-high-bg: #e3f6ee;
  --c-mid: #d97d00;
  --c-mid-bg: #fdf2e2;
  --c-fair: #d9a300;
  --c-fair-bg: #fdf8e3;
  --c-low: #e04f2f;
  --c-low-bg: #fdeae4;

  --shadow-xs: 0 1px 2px rgba(10, 29, 51, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 29, 51, 0.07), 0 1px 2px rgba(10, 29, 51, 0.05);
  --shadow: 0 10px 32px rgba(10, 29, 51, 0.1);
  --shadow-lg: 0 24px 64px rgba(10, 29, 51, 0.16);

  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --maxw: 1240px;

  /* Spacing scale. Every gap on the report page comes from one of these seven steps, so nesting depth is
     legible as spacing: siblings inside a block sit at --sp-3, blocks inside a panel at --sp-5, panels at
     --sp-7. The previous ad-hoc values (4/8/12/14/18/22/24/44) produced separations that did not encode
     any hierarchy — a 14px gap and an 18px gap read as "the same, but wrong". */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --font: "Satoshi", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Satoshi", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ----- Reset & base ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* WebKit/Blink: a slim, unobtrusive scrollbar that only shows its thumb on hover. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
  border: 2px solid var(--bg);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

/* A list that has opted out of its marker has also opted out of the indent that only existed to make room
   for it. Without this, `list-style: none` alone leaves the UA's 40px `padding-inline-start` in place and
   the list floats to the right of everything it is supposed to align with. */
ul,
ol {
  padding: 0;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

[x-cloak] {
  display: none !important;
}

svg.icon {
  flex: none;
}

/* ----- Layout helpers ----- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 28px;
}

.visually-hidden {
  position: absolute;
  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: 12px;
  top: -48px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

.section-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 6px;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: linear-gradient(120deg, var(--ink), var(--ink-700));
  color: #fff;
  box-shadow: var(--shadow-xs);
}

/* El fondo es un degradado (background-image) y los degradados no interpolan:
   cambiar `background` en :hover lo sustituye de golpe. Animamos brightness. */
.btn--primary:hover {
  filter: brightness(1.35);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--sm {
  padding: 9px 14px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  transition:
    gap 0.15s ease,
    color 0.15s ease;
}

.link-arrow:hover {
  gap: 10px;
  color: var(--teal-600);
}

/* ----- Tags, chips, pills ----- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-xs);
}

.tag--solid {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.tag--muted {
  background: var(--surface-2);
  color: var(--muted);
  border-color: transparent;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}

.pill--high {
  background: var(--c-high-bg);
  color: var(--c-high);
}

.pill--medium {
  background: var(--c-mid-bg);
  color: var(--c-mid);
}

.pill--low {
  background: var(--c-low-bg);
  color: var(--c-low);
}

.pill--info {
  background: var(--purple-050);
  color: var(--purple-600);
}

/* For states that are neither good nor bad — a closed auction is not a failure, it is simply over. */
.pill--neutral {
  background: var(--surface-2);
  color: var(--muted);
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 70px;
  transition: height 0.22s ease;
}

/* Scrolling past the threshold shrinks the bar and logo a touch, freeing screen
   space; the effect is deliberately more pronounced on mobile (see media query). */
.site-header--scrolled .site-header__inner {
  height: 58px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.brand__logo {
  display: block;
  height: auto;
}

.brand__logo--header {
  width: 173px;
  transition: width 0.22s ease;
}

.site-header--scrolled .brand__logo--header {
  width: 156px;
}

.brand__logo--footer {
  width: 224px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.site-header__login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(110deg, var(--teal-600), var(--purple));
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition:
    filter 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.site-header__login:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-sm);
}

.site-header__login:active {
  transform: translateY(1px);
}

.site-header__login-label {
  display: inline;
}

/* Home header: transparent over the hero at the top; once the page scrolls past a
   small threshold, JS toggles .site-header--scrolled and these transitions fade in
   a frosted-glass bar. State is discrete (not scroll-linked), so the fade always
   runs to completion — no lingering half-faded frame. The top state is a true
   identity (blur 0 + saturate 1) so nothing is painted over the hero. */
.site-header--overlay {
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
  border-bottom: 1px solid rgba(15, 30, 50, 0);
  transition:
    background-color 0.22s ease,
    backdrop-filter 0.22s ease,
    -webkit-backdrop-filter 0.22s ease,
    border-color 0.22s ease;
}

.site-header--overlay.site-header--scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom-color: rgba(15, 30, 50, 0.09);
}

/* Both logo versions occupy the same cell and cross-dissolve with the bar. */
.brand--overlay {
  display: inline-grid;
}

.brand--overlay .brand__logo {
  grid-area: 1 / 1;
  transition: opacity 0.22s ease;
}

.brand__logo--on-light {
  opacity: 0;
}

.site-header--scrolled .brand__logo--on-dark {
  opacity: 0;
}

.site-header--scrolled .brand__logo--on-light {
  opacity: 1;
}

/* ----- Footer ----- */
.site-footer {
  margin-top: 96px;
  background: var(--ink);
  color: #b7c4cc;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 0% 0%, rgba(13, 187, 172, 0.12), transparent 60%), radial-gradient(45% 55% at 100% 100%, rgba(106, 70, 244, 0.14), transparent 60%);
  pointer-events: none;
}

.site-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;
  gap: 48px;
  padding-block: 60px 44px;
}

.site-footer__col p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
}

.site-footer__heading {
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__links a {
  color: #b7c4cc;
  font-size: 14px;
  width: fit-content;
  transition: color 0.15s ease;
}

.site-footer__links a:hover {
  color: #fff;
}

.site-footer__text strong,
.site-footer__sources {
  color: #dce4e8;
}

.site-footer__sources {
  margin-top: 12px;
  font-size: 13px;
  color: #8da0aa;
}

.site-footer__bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
  color: #8296a1;
}

/* ----- Search box ----- */
.searchbox {
  position: relative;
  width: 100%;
}

.searchbox__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 6px 6px 16px;
  box-shadow: var(--shadow-sm);
  /* Clips the "found" flash overlay to the rounded corners. The focus-within
     glow is the element's own box-shadow, so it is not affected. */
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    box-shadow 0.45s ease;
}

.searchbox__form:focus-within {
  border-color: var(--teal);
  box-shadow:
    0 0 0 4px rgba(13, 187, 172, 0.14),
    var(--shadow);
}

/* Brief celebratory state after "near me" locates the user. */
.searchbox__form.is-found {
  border-color: var(--teal);
  box-shadow:
    0 0 0 4px rgba(13, 187, 172, 0.22),
    0 0 34px rgba(13, 187, 172, 0.35),
    var(--shadow);
}

/* By default the field wrapper is layout-invisible (single-pill search); the
   mobile hero search promotes it to the boxed row so the button can sit apart. */
.searchbox__field {
  display: contents;
}

.searchbox__icon {
  color: var(--muted);
  display: inline-flex;
}

.searchbox__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 10px 0;
  text-overflow: ellipsis;
}

.searchbox__input::placeholder {
  color: var(--faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.searchbox__geo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--teal-600);
  border-left: 1px solid var(--line);
  border-radius: 0;
  transition: background 0.15s ease;
}

.searchbox__geo:hover {
  background: var(--teal-050);
  border-radius: var(--radius-sm);
  border-left-color: transparent;
}

.searchbox__geo:disabled {
  cursor: wait;
}

.searchbox__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-left: 1px solid var(--line);
  border-radius: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.searchbox__clear:hover {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  border-left-color: transparent;
}

.searchbox--compact .searchbox__clear {
  width: 38px;
  height: 38px;
}

/* "Te hemos encontrado" flash: covers the field while the reveal plays out. */
.searchbox__flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 20px;
  background: linear-gradient(100deg, var(--teal-050), #fff 70%);
  color: var(--teal-600);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  overflow: hidden;
  animation: flash-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sweeping shimmer across the flash. */
.searchbox__flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: flash-shimmer 1.1s ease-out;
}

.searchbox__flash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #063b36;
  flex: none;
  animation: flash-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.searchbox__flash-text {
  animation: flash-slide 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

@keyframes flash-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes flash-pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes flash-slide {
  from {
    transform: translateX(6px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes flash-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .searchbox__flash,
  .searchbox__flash-icon,
  .searchbox__flash-text,
  .searchbox__flash::after {
    animation: none;
  }
}

/* Confetti rain over the "found" flash. The layer hangs off the top-right corner of the
   field, which clips it, so the pieces drop in from above and fall out through the bottom.
   Each piece splits its motion in two so it does not fall on a straight line: the outer
   span drifts sideways at a constant rate, the inner one accelerates downwards and spins. */
.confetti {
  position: absolute;
  right: 12px;
  top: 0;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
}

.confetti__piece {
  position: absolute;
  animation: confetti-drift var(--duration) linear var(--delay) both;
}

.confetti__bit {
  display: block;
  width: 6px;
  border-radius: 2px;
  animation: confetti-fall var(--duration) cubic-bezier(0.4, 0, 0.85, 0.6) var(--delay) both;
}

@keyframes confetti-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--dx));
  }
}

@keyframes confetti-fall {
  0% {
    transform: translateY(var(--y0)) rotate(0deg);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(var(--fall)) rotate(var(--spin));
    opacity: 0;
  }
}

.searchbox__submit {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: #073b36;
  font-weight: 700;
  font-size: 15px;
  padding: 0 22px;
  height: 44px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.searchbox__submit:hover {
  background: var(--teal-600);
  color: #fff;
}

.searchbox--hero .searchbox__form {
  padding: 9px 9px 9px 22px;
  border-radius: 18px;
  border-color: transparent;
  box-shadow:
    0 20px 56px rgba(3, 12, 24, 0.4),
    0 2px 8px rgba(3, 12, 24, 0.25);
}

.searchbox--hero .searchbox__input {
  font-size: 17.5px;
  padding: 14px 0;
  text-overflow: ellipsis;
}

.searchbox--hero .searchbox__submit {
  height: 54px;
  padding-inline: 28px;
  border-radius: 12px;
}

.searchbox--compact .searchbox__submit {
  padding: 0 16px;
  height: 40px;
}

.searchbox--compact .searchbox__geo {
  width: 38px;
  height: 38px;
}

/* Embedded variant: the search lives inside the filter card, so it reads as one more control
   (no submit button, softer chrome) instead of a standalone search bar. */
.searchbox--embedded .searchbox__form {
  padding: 2px 4px 2px 12px;
  border-radius: var(--radius-sm);
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: none;
}

.searchbox--embedded .searchbox__form:focus-within {
  background: #fff;
}

.searchbox--embedded .searchbox__input {
  font-size: 14.5px;
  padding: 9px 0;
}

.searchbox--embedded .searchbox__geo,
.searchbox--embedded .searchbox__clear {
  width: 34px;
  height: 34px;
  border-left: 0;
}

.searchbox--embedded .searchbox__flash {
  font-size: 14px;
  padding-inline: 14px;
}

.searchbox--embedded .searchbox__status {
  padding-left: 2px;
  margin-top: 7px;
  font-size: 12px;
}

/* The filter card is its own scroll container, so the suggestion panel cannot escape it: keep the
   list short enough to sit inside the card. */
.searchbox--embedded .suggestions {
  max-height: min(46vh, 340px);
  padding: 6px;
}

/* The rail is far too narrow for the three-column suggestion row: the meta column starved the name
   down to an ellipsis. Stack the badges under the label instead so the place name gets the width. */
.searchbox--embedded .suggestion__link {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 10px;
}

.searchbox--embedded .suggestion__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.searchbox--embedded .suggestion__label {
  font-size: 14px;
}

.searchbox--embedded .suggestion__sub {
  font-size: 12px;
}

.searchbox--embedded .suggestion__meta {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: 40px;
  text-align: left;
}

.searchbox--embedded .suggestion__count {
  font-size: 11px;
  padding: 1px 7px;
}

.searchbox__geo-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(13, 187, 172, 0.25);
  border-top-color: var(--teal-600);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.searchbox__status {
  margin-top: 9px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12.5px;
}

.hero .searchbox__status {
  color: #bac8d0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Suggestions panel */
.searchbox__panel:empty {
  display: none;
}

.searchbox__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 60;
  transform-origin: top center;
  animation: panel-in 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .searchbox__panel {
    animation: none;
  }
}

.suggestions {
  list-style: none;
  margin: 0;
  padding: 7px;
  max-height: min(60vh, 400px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.suggestion + .suggestion {
  border-top: 1px solid var(--surface);
}

.suggestion__link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}

.suggestion__link:hover,
.suggestion__link.is-active {
  background: var(--teal-050);
}

.suggestion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--surface);
  color: var(--teal-600);
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.suggestion__link:hover .suggestion__icon,
.suggestion__link.is-active .suggestion__icon {
  background: var(--teal-100);
}

.suggestion__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.suggestion__label {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion__sub {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

.suggestion__kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.suggestion__count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal-600);
  background: var(--teal-050);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.searchbox__empty {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ----- Exact-address valuation ----- */
.valuation {
  min-height: calc(100vh - 420px);
  padding-block: clamp(72px, 9vw, 116px) 24px;
  background: radial-gradient(60% 55% at 50% 0%, rgba(13, 187, 172, 0.08), transparent 70%);
}

.valuation__inner {
  max-width: 900px;
}

.valuation__head {
  max-width: 680px;
  margin: 0 auto 34px;
  text-align: center;
}

.valuation__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--teal-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.valuation__head h1 {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.valuation__head p {
  max-width: 570px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.valuation-search {
  position: relative;
  z-index: 20;
  max-width: 720px;
  margin-inline: auto;
}

.valuation-search__form {
  padding-left: 20px;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.valuation-search__submit {
  align-self: stretch;
  min-width: 116px;
  border: 0;
  border-radius: 13px;
  padding-inline: 22px;
  background: var(--teal-600);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  transition: background 0.15s ease;
}

.valuation-search__submit:hover {
  background: var(--teal);
}

.valuation__attribution {
  margin-top: 10px;
  color: var(--faint);
  font-size: 11px;
  text-align: center;
}

.valuation__fallback-suggestions {
  max-width: 720px;
  margin: 12px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.valuation__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  margin: 22px auto 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.valuation__notice .icon {
  flex: none;
  color: var(--teal-600);
}

/* Rent-reliability caveat: the rent drives both the net yield and the score, so when it rests on a
   weak basis the warning has to read as a warning, not as another neutral footnote. */
.valuation__notice--caution {
  max-width: none;
  margin: 18px 0 0;
  border-color: #f0c987;
  background: #fdf6e9;
  color: #7a5312;
}

.valuation__notice--caution .icon {
  color: #b8790f;
}

.valuation__notice--caution strong {
  color: #5c3d0b;
}

.valuation__units,
.valuation__result {
  margin-top: 36px;
}

.valuation__units {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.valuation__section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.valuation__section-head h2 {
  font-size: 18px;
}

.valuation__section-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.valuation__section-icon,
.valuation__result-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--teal-050);
  color: var(--teal-600);
}

.valuation__unit-list {
  max-height: 440px;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}

.valuation__unit-list li + li {
  border-top: 1px solid var(--surface);
}

.valuation__unit-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.valuation__unit-list a:hover {
  background: var(--teal-050);
}

.valuation__unit-list span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.valuation__unit-list small {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.valuation__result-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.valuation__result-head span {
  color: var(--teal-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.valuation__result-head h2 {
  margin-top: 3px;
  font-size: clamp(19px, 3vw, 25px);
}

.valuation__result-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.valuation__headline-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 14px;
}

.valuation-metric {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.valuation-metric > span {
  color: var(--muted);
  font-size: 13px;
}

.valuation-metric > strong {
  margin-block: 8px 4px;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -0.035em;
  line-height: 1;
}

.valuation-metric > strong small {
  font-size: 14px;
  letter-spacing: 0;
}

.valuation-metric > small {
  color: var(--faint);
  font-size: 12.5px;
}

.valuation-metric--price {
  border-color: rgba(13, 187, 172, 0.35);
  background: linear-gradient(145deg, #fff, var(--teal-050));
}

.valuation-metric--score > strong {
  color: var(--purple);
}

.valuation-ranges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.valuation-range {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.valuation-range__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.valuation-range__head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.valuation-range__head span {
  color: var(--muted);
  font-size: 12px;
}

.valuation-range__head strong {
  font-size: 20px;
}

.valuation-range__confidence {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.valuation-range__confidence--high {
  background: var(--teal-050);
  color: var(--teal-600);
}

.valuation-range__confidence--low {
  background: #fff4e8;
  color: #9a5a12;
}

.valuation-range__plot {
  position: relative;
  height: 34px;
  margin-top: 18px;
}

.valuation-range__axis,
.valuation-range__band {
  position: absolute;
  top: 15px;
  height: 5px;
  border-radius: 999px;
}

.valuation-range__axis {
  right: 0;
  left: 0;
  background: var(--surface-2);
}

.valuation-range__band {
  left: var(--range-low);
  width: calc(var(--range-high) - var(--range-low));
  background: linear-gradient(90deg, rgba(13, 187, 172, 0.5), var(--teal-600));
}

.valuation-range__marker {
  position: absolute;
  top: 7px;
  left: var(--range-mid);
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--purple);
  box-shadow:
    0 0 0 1px rgba(106, 70, 244, 0.25),
    var(--shadow-sm);
}

.valuation-range__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  color: var(--ink);
  font-size: 11px;
}

.valuation-range__labels span,
.valuation-range__labels strong {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.valuation-range__labels strong {
  align-items: center;
  color: var(--purple);
}

.valuation-range__labels span:last-child {
  align-items: flex-end;
}

.valuation-range__labels small {
  color: var(--faint);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.valuation-range > p {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.valuation__cadastre,
.valuation__evidence {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.valuation__cadastre > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--teal-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.valuation__cadastre > div > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.valuation__cadastre dl,
.valuation__evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.valuation__cadastre dl {
  grid-template-columns: minmax(210px, 1.6fr) repeat(3, minmax(0, 1fr));
}

.valuation__cadastre dl > div {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--surface);
}

.valuation__cadastre dt,
.valuation__evidence span {
  color: var(--muted);
  font-size: 12px;
}

.valuation__cadastre dd {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.valuation__reference {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: normal;
  scrollbar-width: thin;
  white-space: nowrap;
}

.valuation__reference code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  letter-spacing: -0.025em;
}

.valuation__evidence h3 {
  font-size: 17px;
}

.valuation__evidence p {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.valuation__evidence strong {
  font-size: 18px;
}

.valuation__evidence span {
  line-height: 1.45;
}

.valuation-score {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}

.valuation-score__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 24px 10px;
}

.valuation-score__head span {
  color: var(--teal-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.valuation-score__head h3 {
  margin-top: 4px;
  font-size: 19px;
}

.valuation-score__head > strong {
  color: var(--purple);
  font-size: 30px;
  letter-spacing: -0.03em;
}

.valuation-score__head > strong small {
  font-size: 12px;
  letter-spacing: 0;
}

.valuation-score__intro {
  max-width: 700px;
  padding: 0 24px 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.valuation-score__factors {
  border-top: 1px solid var(--line);
}

.valuation-factor + .valuation-factor {
  border-top: 1px solid var(--line);
}

.valuation-factor summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.valuation-factor summary::-webkit-details-marker {
  display: none;
}

.valuation-factor summary:hover {
  background: var(--teal-050);
}

.valuation-factor__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--teal-600);
}

.valuation-factor__name,
.valuation-factor__value {
  display: flex;
  flex-direction: column;
}

.valuation-factor__name small,
.valuation-factor__value em {
  margin-top: 2px;
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}

.valuation-factor__track {
  width: min(220px, 100%);
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.valuation-factor__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--purple));
}

.valuation-factor__value {
  align-items: flex-end;
}

.valuation-factor__value > strong {
  font-size: 18px;
}

.valuation-factor__value > strong small {
  font-size: 10px;
}

.valuation-factor summary > .icon {
  color: var(--faint);
  transition: transform 0.15s ease;
}

.valuation-factor[open] summary > .icon {
  transform: rotate(90deg);
}

.valuation-factor__body {
  padding: 0 20px 18px 70px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.valuation-factor__body p + p {
  margin-top: 8px;
}

/* The evidence blocks (metric tiles, benchmark bars, municipal series) reuse the property-report
   components, so they only need their own vertical rhythm inside the disclosure. */
.valuation-factor__body > .retmetrics,
.valuation-factor__body > .benchgrid,
.valuation-factor__body > .trendgrid {
  margin-top: 16px;
}

.valuation-factor__note,
.valuation-factor__empty {
  margin-top: 14px;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.55;
}

.valuation-factor__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.valuation-factor__note svg {
  flex: none;
  margin-top: 1px;
}

.valuation__disclaimer {
  max-width: 760px;
  margin: 20px auto 0;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 760px) {
  .valuation {
    padding-top: 52px;
  }

  .valuation__head p {
    font-size: 15.5px;
  }

  .valuation-search__form {
    padding-left: 14px;
  }

  .valuation-search__submit {
    min-width: auto;
    padding-inline: 16px;
  }

  .valuation__headline-grid,
  .valuation__cadastre dl,
  .valuation__evidence-grid {
    grid-template-columns: 1fr 1fr;
  }

  .valuation-metric--price {
    grid-column: 1 / -1;
  }

  .valuation-ranges {
    grid-template-columns: 1fr;
  }

  .valuation__cadastre dl > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .valuation__headline-grid,
  .valuation__cadastre dl,
  .valuation__evidence-grid {
    grid-template-columns: 1fr;
  }

  .valuation-search__submit {
    font-size: 0;
  }

  .valuation-search__submit::after {
    content: "Ir";
    font-size: 14px;
  }

  .valuation-factor summary {
    grid-template-columns: 34px minmax(0, 1fr) auto 14px;
    gap: 9px;
    padding-inline: 14px;
  }

  .valuation-factor__icon {
    width: 34px;
    height: 34px;
  }

  .valuation-factor__body {
    padding-inline: 57px 14px;
  }

  .valuation-range {
    padding: 18px;
  }
}

/* ----- Home hero ----- */
.hero {
  position: relative;
  /* Slides up under the sticky, transparent home header (70px tall). */
  margin-top: -70px;
  background: radial-gradient(52% 90% at 8% -10%, rgba(13, 187, 172, 0.22), transparent 60%), radial-gradient(46% 80% at 96% 4%, rgba(106, 70, 244, 0.26), transparent 58%), linear-gradient(168deg, #07172a, var(--ink) 55%, #122b47);
  color: #fff;
  /* Not `hidden`: the search suggestions panel overflows the hero and must not
     be clipped. Backgrounds and the inset ::after texture stay within bounds. */
  overflow: visible;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 80%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  text-align: center;
  padding-block: clamp(94px, 10vw, 128px) clamp(44px, 6vw, 72px);
}

.hero__stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: #94a6b0;
}

.hero__stats-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #19d6c5;
  box-shadow: 0 0 0 0 rgba(25, 214, 197, 0.55);
  animation: hero-pulse 2.4s ease-out infinite;
}

@keyframes hero-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 214, 197, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(25, 214, 197, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 214, 197, 0);
  }
}

.hero__stat strong {
  font-weight: 700;
  color: #e7eef2;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hero__stats-pulse {
    animation: none;
  }
}

.hero__title {
  color: #fff;
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #19d6c5, #9279ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin: 20px auto 36px;
  max-width: 640px;
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  line-height: 1.65;
  color: #bac8d0;
}

.hero__search {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  font-weight: 600;
  font-size: 14.5px;
  color: #e7eef2;
  border-bottom: 1px solid rgba(232, 240, 251, 0.35);
  padding-bottom: 2px;
  transition:
    gap 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.hero__cta:hover {
  gap: 11px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.hero__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.store-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
}

.store-badge__logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  text-align: left;
}

.store-badge__text small {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #bac8d0;
}

.store-badge__text strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ----- Home sections ----- */
.nearby {
  padding-top: clamp(48px, 7vw, 76px);
}

.nearby__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.nearby__title {
  font-size: clamp(22px, 3vw, 30px);
}

.nearby__context {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

/* ----- Card grid & cards ----- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
  height: 100%;
}

.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 29, 51, 0.18), transparent 32%);
  pointer-events: none;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.card:hover .card__img {
  transform: scale(1.045);
}

.card__img--empty {
  object-fit: contain;
}

.card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 1;
}

.card__status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--ink);
}

.card__status--sold {
  background: var(--c-low);
}

.card__status--reserved {
  background: var(--c-mid);
}

/* Auction lots are a different kind of inventory, not a different status of the same advert, so the
   badge reads as an origin label rather than as a lifecycle state. */
.card__status--auction {
  background: var(--purple, #6b46c1);
}

.score-ring {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

.score-ring svg {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}

.score-ring__track {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 3.4;
}

.score-ring__bar {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.score-ring__num {
  position: relative;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.score-ring.is-high .score-ring__bar {
  stroke: var(--c-high);
}

.score-ring.is-mid .score-ring__bar,
.score-ring.is-fair .score-ring__bar {
  stroke: var(--c-mid);
}

.score-ring.is-low .score-ring__bar {
  stroke: var(--c-low);
}

.score-ring.is-high .score-ring__num {
  color: var(--c-high);
}

.score-ring.is-mid .score-ring__num,
.score-ring.is-fair .score-ring__num {
  color: var(--c-mid);
}

.score-ring.is-low .score-ring__num {
  color: var(--c-low);
}

.score-ring__warn {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-mid-bg);
  color: var(--c-mid);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  flex: 1;
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.card__price-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.card__price-unit {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

.card__title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  min-height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--muted);
  min-height: 1.3em;
  overflow: hidden;
}

.card__loc .icon {
  color: var(--faint);
  flex: none;
}

.card__loc span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__facts {
  list-style: none;
  margin: 2px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
}

.card__facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}

.card__facts .icon {
  color: var(--faint);
}

.card__invest {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.card__returns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.card__metric {
  flex: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__metric-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.card__metric-value {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.card__metric-value--accent {
  color: var(--teal-600);
}

.card__metric-value--good {
  color: var(--c-high);
}

.card__metric-value--bad {
  color: var(--c-low);
}

.card__returns .card__metric-value {
  font-size: 15px;
}

.card__signal {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.card__signal--positive {
  background: var(--c-high-bg);
  color: var(--c-high);
}

.card__signal--negative {
  background: var(--c-low-bg);
  color: var(--c-low);
}

.card__noscore {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--faint);
  padding-top: 12px;
}

/* ----- Listing page ----- */
.listing {
  padding-top: 20px;
}

/* Pull the row back by the link padding so "España" lines up with the filter card edge. */
.listing .crumbs {
  margin: 0 0 14px -4px;
}

.listing__layout {
  display: grid;
  grid-template-columns: 304px 1fr;
  gap: 30px;
  align-items: start;
}

.listing__results {
  min-width: 0;
}

/* Slim meta line so the grid starts level with the top of the filter card. */
.results__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.filters__mobile-toggle {
  display: none;
}

/* ----- Filters ----- */
.filters {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 4px 22px 22px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.filters__head {
  position: sticky;
  top: 0;
  background: #fff;
  padding-block: 16px 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  z-index: 2;
}

.filters__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filters__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.filters__close {
  display: none;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.filters__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filters__group legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  padding: 0;
}

.chips-select {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip-radio,
.segmented__item {
  position: relative;
  cursor: pointer;
}

.chip-radio input,
.segmented__item input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.chip-radio span {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: #fff;
  transition: all 0.12s ease;
}

.chip-radio input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.chip-radio input:focus-visible + span {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.segmented {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}

.segmented__item {
  flex: 1;
  text-align: center;
}

.segmented__item span {
  display: block;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  color: var(--muted);
  transition: all 0.12s ease;
}

.segmented__item input:checked + span {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.segmented__item input:focus-visible + span {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
}

.segmented--fill {
  background: var(--surface);
}

.rangepair {
  display: flex;
  gap: 10px;
}

/* ----- Price range (two thumbs over one track) -----
   Both range inputs are stacked on the same track so the selection reads as a single bar. The inputs
   themselves are click-through (`pointer-events: none`) and only their thumbs take the pointer, which is
   what lets the thumb underneath still be grabbed when the two meet. `.pricerange__fields` holds the real
   `precio_min`/`precio_max` inputs: hidden here, revealed by the `noscript` rule the markup carries. */
.pricerange__value {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.pricerange__track {
  position: relative;
  height: 20px;
  margin: 0 10px;
}

.pricerange__track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 5px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.pricerange__fill {
  position: absolute;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--teal);
}

.pricerange__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  outline: 0;
}

.pricerange__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.pricerange__thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.pricerange__thumb:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.pricerange__thumb:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.pricerange__fields {
  display: none;
}

.field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.field input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.field input:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-050);
}

.switches {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.switch {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  position: relative;
  width: 40px;
  height: 23px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background 0.16s ease;
  flex: none;
}

.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform 0.16s ease;
}

.switch input:checked + .switch__track {
  background: var(--teal);
}

.switch input:checked + .switch__track .switch__thumb {
  transform: translateX(17px);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.switch__label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.switch--block {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.rangeinput {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rangeinput input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  outline: 0;
}

.rangeinput input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.rangeinput input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.rangeinput output {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 74px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.filters__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.filters__apply {
  display: none;
}

/* ----- Custom dropdown (sort) ----- */
.dropdown {
  position: relative;
}

.dropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--muted);
  transition: border-color 0.12s ease;
}

.dropdown__btn:hover {
  border-color: var(--ink);
}

.dropdown__btn .icon:first-child {
  color: var(--muted);
}

.dropdown__label strong {
  color: var(--ink);
  font-weight: 600;
}

/* Inside the filter rail the sort control is a full-width field, not a toolbar button. */
.filters .dropdown,
.filters .dropdown__btn {
  width: 100%;
}

.filters .dropdown__btn {
  justify-content: space-between;
}

.filters .dropdown__label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filters .dropdown__menu {
  left: 0;
  min-width: 0;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}

.dropdown__opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--text);
  transition: background 0.12s ease;
}

.dropdown__opt:hover {
  background: var(--surface);
}

.dropdown__opt.is-selected {
  background: var(--teal-050);
  color: var(--teal-600);
  font-weight: 600;
}

/* ----- Territorial breadcrumb ----- */
/* The row's gap is the space around the SEPARATORS; the drill-down caret is pulled back onto its own label
   below, so each crumb reads as one unit ("España ⌄") instead of three evenly spaced marks in a row.
   The negative left margin cancels the first link's own padding, so the breadcrumb text starts on the same
   vertical line as the hero and every panel under it instead of 4px inside them. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 14px 0 4px -4px;
  font-size: 13.5px;
}

.crumb {
  display: inline-flex;
  align-items: center;
}

.crumbs__link {
  color: var(--muted);
  padding: 3px 4px;
  border-radius: 6px;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}

a.crumbs__link:hover {
  color: var(--teal-600);
  background: var(--teal-050);
}

.crumbs__link--current {
  color: var(--ink);
  font-weight: 600;
}

/* Same anchor as the caret below, so every mark in the row sits on the x-height band instead of the
   separators floating a pixel above the carets. */
.crumbs__sep {
  color: var(--line-strong);
  display: inline-flex;
  transform: translateY(1px);
}

.crumb__drop {
  position: relative;
  display: inline-flex;
}

/* `margin-left` cancels the slack between the label's own padding and the icon inside this hit area, so the
   caret sits against its word; the hit area itself stays 20px, which is what a finger needs. */
.crumb__toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -2px;
  border-radius: 6px;
  color: var(--muted);
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.crumb__toggle::-webkit-details-marker {
  display: none;
}

/* Anchored the way inline icons are meant to sit next to text — the `vertical-align: middle` rule, i.e. the
   centre of the glyph on the centre of the x-height band — which flex centring inside the 20px hit area
   cannot express. Measured on "Barcelona": x-band 101.80-109.00, so the target centre is 105.40 and the
   box-centred caret lands at 104.45; the 1px pushes it onto the band. */
.crumb__toggle svg {
  transform: translateY(1px);
}

.crumb__toggle:hover,
.crumb__drop[open] .crumb__toggle {
  background: var(--surface);
  color: var(--teal-600);
}

.crumb__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}

.crumb__menu-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 8px 8px;
}

.crumb__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--text);
  transition: background 0.12s ease;
}

.crumb__opt:hover {
  background: var(--surface);
  color: var(--teal-600);
}

.crumb__opt-count {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.crumb__opt:hover .crumb__opt-count {
  background: #fff;
}

/* ----- Empty state & pager ----- */
.empty-state {
  text-align: center;
  padding: 76px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.empty-state__icon {
  display: inline-flex;
  color: var(--faint);
  margin-bottom: 12px;
}

.empty-state h2 {
  font-size: 19px;
  margin-bottom: 6px;
}

.empty-state p {
  color: var(--muted);
}

/* Infinite-scroll sentinel: a full-width grid row that auto-loads the next page (and stays a
   clickable "next page" link if the reveal never fires — no-JS, or a very short viewport). */
.loadmore {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 4px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}

.loadmore:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.loadmore__spinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(13, 187, 172, 0.25);
  border-top-color: var(--teal-600);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Idle state shows the label only; the request swaps it for the spinner. */
.loadmore .loadmore__spinner {
  display: none;
}

.loadmore.htmx-request {
  border-style: solid;
  border-color: var(--line);
  color: var(--muted);
}

.loadmore.htmx-request .loadmore__spinner {
  display: block;
}

.loadmore.htmx-request .loadmore__label {
  color: var(--faint);
}

/* htmx swap feedback */
.htmx-indicator {
  opacity: 1;
}

#results.htmx-request {
  opacity: 0.5;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* ----- Detail: breadcrumb spacing ----- */
.detail > .container > .crumbs {
  margin-top: 20px;
}

/* ----- Detail: hero ----- */
.detail__hero {
  padding-top: 18px;
}

.detail__hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.detail__gallery {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  min-height: 340px;
  box-shadow: var(--shadow-sm);
}

.detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--faint);
}

.detail__gallery-tags {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
}

.detail__status {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--c-low);
}

.detail__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 8px;
}

.detail__place {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.detail__title {
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.detail__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.detail__price-value {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.detail__price-unit {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
}

.detail__quickfacts {
  list-style: none;
  margin: 4px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.detail__quickfacts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--muted);
}

.detail__quickfacts .icon {
  color: var(--teal-600);
}

.detail__quickfacts strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 700;
}

.detail__ref {
  font-size: 13px;
  color: var(--faint);
}

/* ----- Hero cash-flow card (renta − hipoteca − gastos) ----- */
.cashflow {
  margin: 4px 0 2px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.cashflow__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 12px;
}

.cashflow__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cashflow__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.cashflow__lab {
  color: var(--text);
}

.cashflow__lab em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--faint);
  margin-left: 4px;
}

.cashflow__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.cashflow__val--in {
  color: var(--c-high);
}

.cashflow__val--out {
  color: var(--muted);
}

.cashflow__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}

.cashflow__result .cashflow__lab {
  font-weight: 700;
  color: var(--ink);
}

.cashflow__result .cashflow__val {
  font-size: 20px;
}

.cashflow__result--pos .cashflow__val {
  color: var(--c-high);
}

.cashflow__result--neg .cashflow__val {
  color: var(--c-low);
}

.cashflow__foot {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
}

.cashflow__foot strong {
  color: var(--ink-700);
}

/* ----- Mortgage & cash-flow calculator ----- */
.mortgage__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.mortgage__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mortgage__control-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
}

.mortgage__control-label strong {
  font-family: var(--font-display);
  color: var(--teal-600);
}

.mortgage__reset {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.mortgage__reset:hover {
  color: var(--teal-600);
  border-color: var(--teal-600);
}

.mortgage__range {
  width: 100%;
  accent-color: var(--teal-600);
}

.mortgage__range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.mortgage__result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 18px 4px;
  border-radius: 12px;
  background: var(--purple-050);
  outline: 1.5px solid var(--purple);
}

.mortgage__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}

.mortgage__metric + .mortgage__metric {
  border-left: 1px solid rgba(106, 70, 244, 0.22);
}

.mortgage__metric-lab {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.mortgage__metric-val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.mortgage__metric-val.is-pos {
  color: var(--c-high);
}

.mortgage__metric-val.is-neg {
  color: var(--c-low);
}

.mortgage__metric-unit {
  font-size: 11px;
  color: var(--faint);
}

.mortgage__financing {
  margin-top: -4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.mortgage__financing strong,
.mortgage__financing span {
  font-weight: 700;
  color: var(--ink);
}

/* ----- Demand stat cards (icon + figure) ----- */
.benchcard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.benchcard__head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.benchcard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--teal-600);
}

.benchcard__figure {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.benchcard__value {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.benchcard__label {
  font-size: 12.5px;
  color: var(--text);
}

/* The benchmark mini-bar: a filled track for the property's value plus a tick for the national median. */
.benchbar {
  position: relative;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--teal-100);
  overflow: visible;
}

.benchbar__value {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-pill);
  background: var(--teal-600);
}

.benchbar__tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  transform: translateX(-1px);
  border-radius: 2px;
  background: var(--ink);
}

.benchbar__ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--faint);
}

.benchbar__ref-dot {
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.benchcard__src {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.4;
}

.benchcard--good .benchcard__value,
.benchcard--good .benchcard__icon {
  color: var(--c-high);
}

.benchcard--good .benchbar__value {
  background: var(--c-high);
}

.benchcard--bad .benchcard__value,
.benchcard--bad .benchcard__icon {
  color: var(--c-low);
}

.benchcard--bad .benchbar__value {
  background: var(--c-low);
}

/* ----- Score-breakdown info trigger + modal ----- */
.scomp__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.scomp__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.15s ease;
}

.scomp__info:hover {
  color: var(--teal-600);
}

.infomodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  /* The row has to BE the viewport, not the card's content. An implicit `auto` row grows to the card's
     intrinsic height — with a long method breakdown that is well over 1000px — and `max-height` then only
     clips what is drawn, leaving the card centred inside an oversized track and hanging off the bottom of
     the screen. Pinning the track makes both the max-height and the centring behave. */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 20px;
  background: rgba(16, 32, 48, 0.5);
  backdrop-filter: blur(2px);
}

.infomodal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(680px, 100%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(16, 32, 48, 0.28);
  outline: none;
}

/* The title bar stays put while the method breakdown scrolls: on a phone this content is several screens long. */
.infomodal__bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.infomodal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}

.infomodal__close {
  flex: none;
  display: inline-flex;
  margin-left: auto;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
}

.infomodal__close:hover {
  background: var(--surface);
  color: var(--ink);
}

.infomodal__title {
  font-size: 17px;
  font-weight: 750;
  color: var(--ink);
  line-height: 1.35;
}

.infomodal__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

/* Inside the dialog the method block is already the only thing on screen — it needs no card of its own. */
.infomodal__rich .method {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.infomodal__rich .method__head {
  display: none;
}

/* Locks the page behind an open dialog so touch scrolling acts on the dialog, not the listing underneath. */
body.is-modal-open {
  overflow: hidden;
}

/* ----- "Ver cómo se calcula" trigger ----- */
.method-src {
  display: none;
}

.method-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 2px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--purple-600);
  background: var(--purple-050);
  border: 1px solid var(--purple-200);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.method-cta:hover {
  background: var(--purple-100);
  border-color: var(--purple);
}

.method-cta .icon:last-child {
  color: var(--faint);
}

.method-cta > span {
  min-width: 0;
}

.detail__source-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* ----- Detail: grid -----
   The aside comes FIRST in the DOM so that on mobile the score and the "ver anuncio" CTA land right under
   the hero, with no `order` trickery and no mismatch between reading order and tab order. On desktop the
   two children are placed explicitly into the two columns of the same row. */
.detail__grid {
  display: grid;
  grid-template-columns: 1fr 368px;
  gap: 40px;
  align-items: start;
  padding-top: 52px;
}

.detail__main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.detail__aside {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ----- Panels & sections ----- */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.panel__hint,
.panel__foot {
  font-size: 13px;
  color: var(--muted);
}

.panel__foot {
  margin-top: 14px;
}

.panel__foot--warn {
  color: var(--c-mid);
}

.panel--copy .detail__summary {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
}

.panel--lead {
  border-left: 4px solid var(--teal-600);
}

.detail__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  font-weight: 500;
}

.section-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  min-width: 0;
}

/* Without this the text column keeps its min-content width and pushes the heading past the viewport. */
.section-head > div {
  min-width: 0;
}

.section-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-050), var(--purple-050));
  color: var(--teal-600);
  flex: none;
}

/* The eyebrow names the step of the report, so consecutive sections stop reading as one long identical
   list of panels. Paired with a per-tone icon colour below. */
.section-head__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 3px;
}

.section-head h2 {
  font-size: 21px;
}

.section-head p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

/* The section subtitle has a second home: an info button that opens it in the shared dialog. On a wide
   screen the prose is free, so the paragraph shows and the button stays hidden; on a phone the roles swap
   (see the 620px block) rather than the same sentence being printed twice. */
.section-head__info {
  display: none;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.section-head__info:hover {
  color: var(--ink);
}

.section-head--score .section-head__icon {
  background: linear-gradient(135deg, var(--purple-050), var(--teal-050));
  color: var(--purple-600);
}

.section-head--score .section-head__eyebrow {
  color: var(--purple-600);
}

.section-head--spec .section-head__icon {
  background: var(--surface);
  color: var(--ink);
}

.section-head--spec .section-head__eyebrow {
  color: var(--muted);
}

.section-head--market .section-head__icon {
  background: var(--teal-050);
  color: var(--teal-600);
}

/* ----- Panel variants -----
   Same content model, deliberately different visual weight, so the page has a rhythm instead of ten
   identical white cards: the score is the centrepiece, the spec is quiet, the checklist is an aside. */
.panel--score {
  border-color: var(--purple-050);
  box-shadow:
    0 1px 2px rgba(3, 12, 24, 0.04),
    0 18px 44px -28px rgba(106, 70, 244, 0.55);
  position: relative;
  overflow: hidden;
}

.panel--score::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--purple));
}

.panel--spec,
.panel--equip {
  background: transparent;
  border-style: dashed;
}

/* The verdict opens the report and needs no card of its own — its two coloured columns already carry it. */
.verdict {
  display: flex;
  flex-direction: column;
}

/* ----- Auction report block -----
   The lot conditions open an auction report and re-frame everything under them: the hero price is an
   opening bid, the buyer may inherit charges and may have to evict. So the panel gets the same "this is
   the centrepiece" treatment as the score — a coloured top rule and a lifted shadow — in amber rather
   than purple, because it is a caution, not a verdict. Everything inside is a shared primitive:
   `.pill` for the state, `.retmetrics` for the figures, `.specs` for the official record. */
.panel--auction {
  position: relative;
  overflow: hidden;
  border-color: var(--c-mid-bg);
  box-shadow:
    0 1px 2px rgba(3, 12, 24, 0.04),
    0 18px 44px -28px rgba(217, 125, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.panel--auction::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--c-fair), var(--c-mid));
}

/* `.panel--auction` owns the vertical rhythm through its own flex gap, so the head must not add a second
   margin on top of it. */
.panel--auction .section-head {
  margin-bottom: 0;
}

.section-head--auction .section-head__icon {
  background: linear-gradient(135deg, var(--c-fair-bg), var(--c-mid-bg));
  color: var(--c-mid);
}

.section-head--auction .section-head__eyebrow {
  color: var(--c-mid);
}

/* Kind, state and deadline as one chip row. They were a run-on sentence of body copy, which is exactly
   where the eye stops looking — and the state is the fact that decides whether the lot can be bid on. */
.auction__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.auction__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.auction__chip .icon {
  color: var(--faint);
}

/* A week or less left to bid stops being a date and becomes a deadline. */
.auction__chip--urgent {
  background: var(--c-mid-bg);
  color: var(--c-mid);
}

.auction__chip--urgent .icon {
  color: var(--c-mid);
}

/* Live Street View panel on the auction report. The caption is load-bearing: the panorama shows the
   façade, not the lot, so it must never read as a photograph of what is being sold. */
.auction__streetview {
  margin: 0;
}

.auction__streetview iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.auction__streetview figcaption {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--sp-2);
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.5;
}

/* ----- Score card ----- */
.scorecard {
  border-top: 4px solid var(--line-strong);
}

.scorecard.is-high {
  border-top-color: var(--c-high);
}

.scorecard.is-mid {
  border-top-color: var(--c-mid);
}

.scorecard.is-fair {
  border-top-color: var(--c-fair);
}

.scorecard.is-low {
  border-top-color: var(--c-low);
}

.scorecard__head {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.scorecard__gauge {
  flex: none;
  width: 120px;
}

.scorecard__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.scorecard__label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.scorecard__pct {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}

.scorecard__breakdown {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.scorecard__breakdown-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.scomp__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  margin-bottom: 5px;
  color: var(--text);
}

.scomp__pts {
  font-weight: 700;
  color: var(--teal-600);
}

.scomp__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.scomp__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal), var(--purple));
}

.scomp__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.scomp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-size: 14px;
  color: var(--text);
}

.scomp-total strong {
  font-size: 18px;
  color: var(--ink);
}

.scomp-total em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

/* No total to state. The row stays — it is where the reader looks for the score — but it says so in words
   and in grey, rather than printing a partial sum that would read as a verdict we have not earned. */
.scomp-total--na strong {
  font-size: 15px;
  color: var(--muted);
}

/* ----- Confidence explainer (bullets under the score) ----- */
.confexp {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.confexp__lead {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 10px;
}

.confexp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.confexp__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

.confexp__item .icon {
  flex: none;
  margin-top: 2px;
}

.confexp__item--ok .icon {
  color: var(--c-high);
}

.confexp__item--no .icon {
  color: var(--faint);
}

.confcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.confcard .confexp {
  margin-top: 14px;
  padding-top: 14px;
}

/* ----- Hero investment strip ----- */
.heroinv {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.heroinv__score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 94px;
  padding: 10px 16px;
  border-radius: var(--radius-sm, 12px);
  text-decoration: none;
  color: #fff;
  background: var(--ink);
}

.heroinv__score.score--high {
  background: var(--c-high);
}

.heroinv__score.score--mid {
  background: var(--c-mid);
}

.heroinv__score.score--low {
  background: var(--c-low);
}

.heroinv__score-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.heroinv__score-cap {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.92;
  text-align: center;
}

.heroinv__metrics {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.heroinv__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.heroinv__val {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.heroinv__val--good {
  color: var(--c-high);
}

.heroinv__val--bad {
  color: var(--c-low);
}

.heroinv__lab {
  font-size: 12px;
  color: var(--muted);
}

/* ----- Base-info block (untitled: description + spec) ----- */
.baseinfo {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.baseinfo__lead {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-700);
}

/* ----- Score-component blocks ----- */
.cblock {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* The icon, the heading and the score are three different type sizes, so they are aligned on the first
   text baseline rather than on their box tops — otherwise each one starts at a visibly different height. */
.cblock__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.cblock__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--teal-600);
}

.cblock__titles {
  flex: 1;
  min-width: 0;
}

.cblock__titles h2 {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.cblock__weight {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.cblock__titles p {
  margin-top: var(--sp-1);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Same subtitle-behind-the-"i" swap as `.section-head__info`; this block has its own head markup. */
.cblock__info {
  display: none;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.cblock__score {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cblock__score-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.cblock__score-num em {
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: var(--faint);
}

.cblock__score-pts {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-600);
}

.cblock__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}

.cblock__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-600));
}

.cblock__sub {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cblock__sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cblock__sub-head h3 {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cblock__foot {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

/* ----- Score factors (progressive disclosure) ----- */
.scorepanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.factors {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.factor {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.factor[open] {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.factor__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.factor__summary::-webkit-details-marker {
  display: none;
}

.factor__summary:hover {
  background: var(--surface);
}

.factor[open] .factor__summary:hover {
  background: transparent;
}

.factor__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--teal-600);
}

.factor[open] .factor__icon {
  background: var(--teal-050);
}

/* Two stacked pairs facing each other: title over weight on the left, score over points on the right. Both
   sides use the same two line boxes (18px then 15px), so the four lines land on two shared baselines
   instead of the old top-aligned mix of a 16px heading against a 22px numeral. */
.factor__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.factor__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.factor__titles h3 {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.factor__weight {
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: var(--faint);
}

.factor__score {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.factor__score-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.factor__score-num em {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--faint);
}

.factor__score-pts {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  color: var(--teal-600);
  white-space: nowrap;
}

/* An unmeasured component still gets a panel — the gap is the finding. It reads as absent rather than as
   zero: a grey "sin medir" chip where the number goes, and a hairline instead of a filled bar, so it can
   never be mistaken for a component that scored badly. */
.factor__score-na {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.factor--na .factor__icon {
  color: var(--faint);
}

.factor--na[open] .factor__icon {
  background: var(--surface-2);
}

.factor--na .factor__bar {
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);
  height: 2px;
}

.factor__chevron {
  flex: none;
  color: var(--faint);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.factor[open] .factor__chevron {
  transform: rotate(180deg);
}

.factor__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}

.factor__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-600));
}

.factor__body {
  padding: 2px var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Nested self-contained panels (mortgage, valuation) flatten into sub-sections inside a factor body. */
.factor__body .panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.factor__body .panel + .panel {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}

.scorecard__jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
  padding: 9px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 650;
  color: var(--teal-600);
  background: var(--surface);
  text-decoration: none;
}

.scorecard__jump:hover {
  background: var(--surface-2);
}

/* The caveats trigger closes the confidence card, and is deliberately the odd one out in the aside: amber,
   not teal. It is the only control on the page that says "no te fíes todavía", so it has to read as a
   caution rather than as one more way to keep exploring the analysis. */
.care-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 14px;
  padding: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--c-mid);
  background: var(--c-mid-bg);
  border: 1px solid #f2e2c6;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}

.care-cta:hover {
  background: #fbe8cd;
}

/* No confidence band to show: the panel exists only to keep the caveats reachable, so the button is its
   whole content and carries no separation from a block above it. */
.confcard--bare .care-cta {
  margin-top: 0;
}

/* Lifted into the info dialog on demand; it stays in the DOM for crawlers and never renders in place. */
.confirm-src {
  display: none;
}

.infomodal__rich .confirm__lead {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-700);
}

/* ----- Return metrics row ----- */
/* `min(100%, …)` keeps the track from ever exceeding the container, so `auto-fit` can add and drop columns
   on its own: three from ~700px, two from ~500px, one on a phone. There is deliberately no breakpoint
   override here — a media query is what used to force a single column onto every width below 1024px,
   including tablet widths with room for all three cards side by side. */
/* Three declared tracks, not `auto-fit`. `auto-fit` collapses empty tracks, so a row left with a single
   metric stretched that one tile across the full width and shouted louder than the three-metric rows above
   it. Fixed tracks keep a tile a tile; the count drops to two, then one, at the breakpoints below. */
.retmetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.retmetric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: var(--surface);
}

.retmetric__val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.retmetric--good .retmetric__val {
  color: var(--c-high);
}

.retmetric--bad .retmetric__val {
  color: var(--c-low);
}

.retmetric--accent .retmetric__val {
  color: var(--purple);
}

.retmetric__lab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
}

.retmetric__sub {
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.35;
}

/* ----- Income breakdown (rent → NOI) ----- */
.incbar {
  display: flex;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
}

.incbar__seg {
  height: 100%;
}

.incbar__seg--noi {
  background: var(--c-high);
}

.incbar__seg--ibi {
  background: var(--purple);
}

.incbar__seg--com {
  background: #d8a13a;
}

.incbar__seg--prov {
  background: var(--faint);
}

.inclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 20px;
}

.inclist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.inclist__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.inclist__item--noi .inclist__dot {
  background: var(--c-high);
}

.inclist__item--ibi .inclist__dot {
  background: var(--purple);
}

.inclist__item--com .inclist__dot {
  background: #d8a13a;
}

.inclist__item--prov .inclist__dot {
  background: var(--faint);
}

.inclist__lab {
  color: var(--muted);
}

.inclist__val {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.inclist__pct {
  min-width: 34px;
  text-align: right;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ----- Property-data notes ----- */
.pnotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pnotes__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-700);
}

.pnotes__item .icon {
  flex: none;
  margin-top: 2px;
}

.pnotes__item--good .icon {
  color: var(--c-high);
}

.pnotes__item--bad .icon {
  color: var(--c-low);
}

.pnotes__item--neutral .icon {
  color: var(--faint);
}

.scorecard__na {
  color: var(--muted);
  font-size: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Gauge */
.gauge {
  width: 100%;
  height: auto;
}

.gauge__track {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 12;
  stroke-linecap: round;
}

.gauge__value {
  fill: none;
  stroke: var(--c-high);
  stroke-width: 12;
  stroke-linecap: round;
}

.scorecard.is-mid .gauge__value {
  stroke: var(--c-mid);
}

.scorecard.is-fair .gauge__value {
  stroke: var(--c-fair);
}

.scorecard.is-low .gauge__value {
  stroke: var(--c-low);
}

.gauge__num {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
}

/* Percentile */
.percentile {
  margin-top: 6px;
}

.percentile__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #fbdcd2, #fbf0d2, var(--teal-100));
}

.percentile__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.percentile__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.percentile__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--faint);
}

/* ----- Source CTA ----- */
.source-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-color: var(--teal-100);
  background: linear-gradient(180deg, var(--teal-050), #fff 70%);
}

.source-cta__note {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

.source-cta__note .icon {
  color: var(--teal-600);
}

.source-cta__agency {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ----- Co-publishing agencies (syndicated listing) ----- */
/* Dialog body lifted into the shared info modal by `openRich`; never displayed in place. */
.publishers-src {
  display: none;
}

.publishers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.publishers__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.publishers__title .icon {
  color: var(--teal-600);
}

.publishers__lead {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.publishers__list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.publishers__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.infomodal__rich .publishers__item {
  gap: 14px;
  padding: 10px 0;
  font-size: 14px;
}

.publishers__item:last-child {
  border-bottom: 0;
}

/* The listing this page is rendered from, so the reader can place it among the rest. */
.publishers__item--current .publishers__agency {
  font-weight: 700;
  color: var(--ink);
}

.publishers__agency a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}

.publishers__agency .icon {
  color: var(--faint);
  flex: none;
}

.publishers__price {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}

/* ----- "Contexto para la IA" ----- */
.aictx-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aictx-cta__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.aictx-cta__title .icon {
  color: var(--purple-600);
}

.aictx-cta__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.aictx-cta__fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--teal-600);
}

/* The capture is a full-page screenshot and the advert text is long: this dialog needs the width. */
.infomodal__card--wide {
  width: min(940px, 100%);
  max-height: min(860px, 100%);
}

.aictx {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aictx__intro {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

.aictx__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.aictx__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.aictx__meta strong {
  color: var(--ink);
  font-weight: 650;
}

.aictx__meta .icon {
  color: var(--faint);
}

.aictx__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.aictx__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.aictx__tab:hover {
  color: var(--ink);
}

.aictx__tab.is-on {
  color: var(--purple-600);
  border-bottom-color: var(--purple-600);
}

/* Screenshots are full-page captures — tall and narrow. Cap the height and let the pane scroll them. */
.aictx__shot {
  max-height: 52vh;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.aictx__shot img {
  display: block;
  width: 100%;
}

.aictx__photo img {
  display: block;
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* Verbatim advert text: monospaced, wrapped, scrollable. Reformatting it would defeat the purpose. */
.aictx__text {
  max-height: 52vh;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.aictx__foot {
  font-size: 12.5px;
  color: var(--muted);
}

.aictx__foot a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--teal-600);
  font-weight: 600;
}

.aictx__foot--source {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.aictx__loading,
.aictx__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .aictx__shot,
  .aictx__text,
  .aictx__photo img {
    max-height: 60vh;
  }

  .aictx__tab {
    padding: 8px 9px;
    font-size: 12.5px;
  }
}

/* ----- KPIs ----- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 3px solid var(--line-strong);
}

.kpi--positive {
  border-top-color: var(--c-high);
}

.kpi--negative {
  border-top-color: var(--c-low);
}

.kpi__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.kpi__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.kpi__sub {
  font-size: 12px;
  color: var(--faint);
}

/* ----- Rent range bar ----- */
.panel--rent {
  margin-bottom: 24px;
}

.rangebar {
  padding-top: 6px;
}

.rangebar__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.rangebar__fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal), var(--purple));
  opacity: 0.85;
}

.rangebar__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.rangebar__marker-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
}

.rangebar__labels {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
}

.rangebar__label {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-weight: 700;
}

.rangebar__label em {
  font-style: normal;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--faint);
}

.rangebar__label--end {
  text-align: right;
}

.rangebar__label--mid {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  align-items: center;
  color: var(--purple-600);
}

/* ----- Waterfall ----- */
.wf {
  width: 100%;
  height: auto;
}

.wf__axis {
  stroke: var(--line);
  stroke-width: 1;
}

.wf__bar--base {
  fill: var(--ink);
}

.wf__bar--sub {
  fill: #f2b3a0;
}

.wf__bar--add {
  fill: var(--teal);
}

.wf__bar--total {
  fill: var(--teal);
}

.wf__value {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.wf__label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.wf-legend {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.wf-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.wf-legend__item::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--ink);
}

.wf-legend__item--sub::before {
  background: #f2b3a0;
}

.wf-legend__item--total::before {
  background: var(--teal);
}

/* ----- Trend charts (market evolution) ----- */
.trendgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* A chart alone on its row — the only one, or the last of an odd count — takes the full width instead of
   leaving half the row empty. The SVG scales with its viewBox, so it grows taller too and the curve keeps
   its proportions rather than being stretched flat. */
.trendgrid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.trend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 16px;
}

.trend__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trend__title {
  font-size: 15px;
  font-weight: 700;
}

.trend__src {
  margin-top: 3px;
  font-size: 12px;
  color: var(--faint);
}

.trend__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.trend__delta--up {
  background: var(--c-high-bg);
  color: var(--c-high);
}

.trend__delta--down {
  background: var(--c-low-bg);
  color: var(--c-low);
}

.trend__delta--flat {
  background: var(--surface);
  color: var(--muted);
}

/* ----- Similar properties (comparable rentals + sales) ----- */
.similar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 22px;
}

.similar__col {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.similar__head h3 {
  font-size: 15px;
  font-weight: 700;
}

.similar__head p {
  margin-top: 3px;
  font-size: 12px;
  color: var(--faint);
}

.similar__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.similar__item + .similar__item {
  border-top: 1px solid var(--line);
}

.similar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}

.similar__link:hover {
  background: var(--surface);
}

.similar__img {
  flex: none;
  width: 80px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface);
}

.similar__img--empty {
  object-fit: contain;
  padding: 8px;
  opacity: 0.7;
}

.similar__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.similar__meta {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.similar__price {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.similar__price em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}

.similar__badge {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--ink);
}

.similar__badge--sold,
.similar__badge--rented {
  background: var(--c-low);
}

.similar__badge--reserved {
  background: var(--c-mid);
}

.lc {
  width: 100%;
  height: auto;
}

.lc__axis {
  stroke: var(--line);
  stroke-width: 1;
}

.lc__line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lc--accent .lc__line {
  stroke: var(--purple);
}

.lc__grad-top {
  stop-color: rgba(13, 187, 172, 0.22);
}

.lc__grad-bottom {
  stop-color: rgba(13, 187, 172, 0);
}

.lc--accent .lc__grad-top {
  stop-color: rgba(106, 70, 244, 0.18);
}

.lc--accent .lc__grad-bottom {
  stop-color: rgba(106, 70, 244, 0);
}

.lc__dot {
  fill: #fff;
  stroke: var(--teal);
  stroke-width: 2.5;
}

.lc--accent .lc__dot {
  stroke: var(--purple);
}

.lc__last {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
}

.lc__tick {
  fill: var(--faint);
  font-size: 10.5px;
  font-weight: 500;
}

.lc__ref {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  opacity: 0.55;
}

.lc__ref-label {
  fill: var(--ink-700);
  font-size: 10.5px;
  font-weight: 600;
}

/* ----- Line-chart hover layer (pure CSS, one band per data point) ----- */
.lc__hit {
  fill: #fff;
  fill-opacity: 0;
  cursor: crosshair;
}

.lc__guide,
.lc__mark,
.lc__bubble {
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.lc__guide {
  stroke: var(--teal);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
}

.lc--accent .lc__guide {
  stroke: var(--purple);
}

.lc__mark {
  fill: var(--teal);
  stroke: #fff;
  stroke-width: 2;
}

.lc--accent .lc__mark {
  fill: var(--purple);
}

.lc__bubble rect {
  fill: var(--ink);
}

.lc__bubble text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
}

.lc__band:hover .lc__guide,
.lc__band:hover .lc__mark,
.lc__band:hover .lc__bubble {
  opacity: 1;
}

/* When a point is hovered, dim the always-on endpoint label to avoid overlap. */
.lc:hover .lc__last {
  opacity: 0.25;
}

/* ----- Scenario ----- */
.scenario {
  margin-top: 20px;
}

.scenario__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.scenario__control-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.scenario__out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}

.scenario__metric {
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scenario__metric span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.scenario__metric strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.scenario__metric--noi {
  background: var(--surface);
}

.scenario__metric--yield strong {
  color: var(--teal-600);
}

.note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  background: var(--purple-050);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
}

.note .icon {
  color: var(--purple-600);
  flex: none;
}

/* The caution variant. Multi-line legal text (published charges) wraps, so this one aligns to the top of
   the icon instead of centring a paragraph against it. */
.note--warn {
  align-items: flex-start;
  background: var(--c-mid-bg);
  line-height: 1.55;
}

.note--warn .icon {
  color: var(--c-mid);
  margin-top: 2px;
}

/* ----- Pros / cons ----- */
.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.proscons__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.proscons__col--pro {
  background: var(--c-high-bg);
  border-color: transparent;
}

.proscons__col--con {
  background: #fdf2ec;
  border-color: transparent;
}

.proscons__col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 14px;
}

.proscons__col--pro h3 {
  color: var(--c-high);
}

.proscons__col--con h3 {
  color: var(--c-low);
}

.proscons__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proscons__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proscons__item strong {
  font-size: 14px;
  color: var(--ink);
}

.proscons__item span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.proscons__empty {
  font-size: 13.5px;
  color: var(--muted);
}

/* ----- Stat grid ----- */
.benchgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.statcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.statcell__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.statcell__label {
  font-size: 13px;
  color: var(--text);
}

.statcell__src {
  font-size: 11.5px;
  color: var(--faint);
}

/* ----- Meters ----- */
.meters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.meter__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}

.meter__label {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}

.meter__caption {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.meter__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.meter__fill--brand {
  background: var(--teal);
}

.meter__fill--accent {
  background: var(--purple);
}

.meter__fill--muted {
  background: var(--faint);
}

/* ----- Specs ----- */
.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin: 0;
}

.specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.specs__row dt {
  color: var(--muted);
  font-size: 14px;
}

.specs__row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  text-align: right;
}

/* ----- Factor method block ("cómo se calcula") -----
   Opens every score-factor body: the datasets behind the factor, the calculation step by step, and the
   arithmetic turning the sub-score into its points of the global score. */
.method {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.method__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.method__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--purple-600);
}

.method__head h4 {
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.method__head p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.method__sources-lab,
.method__steps-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.method__sources-lab .icon {
  color: var(--teal-600);
}

.srclist {
  list-style: none;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.srclist__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srclist__name {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--teal-600);
}

.srclist__what {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.method__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: method-step;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.method__step {
  counter-increment: method-step;
  position: relative;
  padding-left: 30px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

.method__step::before {
  content: counter(method-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 750;
  color: var(--purple-600);
  background: var(--purple-050);
}

.method__math {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.method__math-op {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

.method__math-op em {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: var(--faint);
}

.method__math-sign {
  font-size: 15px;
  color: var(--faint);
}

.method__math-out {
  font-size: 19px;
  font-weight: 800;
  color: var(--teal-600);
}

.method__math-note {
  font-family: var(--font-sans, inherit);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

/* ----- Worked calculation ("el cálculo con los datos de este inmueble") -----
   The generic steps above say what the model does; this ladder redoes those same steps with the property's
   real numbers, so the sub-score can be checked with a calculator instead of taken on trust. Every row is
   `working → result`, and the results line up in their own column so the ladder reads top-down. */
.calc {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc__lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc__lab .icon {
  color: var(--purple-600);
}

.calc__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Label and working stack in the first column; the result spans both of their rows in the second, so a
   row with a note keeps its number vertically anchored to the step it belongs to. */
.calc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.calc__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.calc__label {
  grid-column: 1;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
}

.calc__expr {
  grid-column: 1;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.calc__out {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  text-align: right;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 750;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__note {
  grid-column: 1 / -1;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
}

.calc__row--total {
  margin-top: 2px;
  border-top: 1.5px solid var(--ink);
}

.calc__row--total .calc__out {
  font-size: 18px;
  color: var(--teal-600);
}

/* The results column survives a phone — every result is short ("+5", "3,40 %", "11.756 €/año") — so only
   the working needs to give ground. Stacking the result under it instead cost three lines per step. */
@media (max-width: 520px) {
  .calc__row {
    column-gap: 10px;
  }

  .calc__label,
  .calc__expr {
    font-size: 12px;
  }

  .calc__out {
    font-size: 13.5px;
  }

  .calc__row--total .calc__out {
    font-size: 16px;
  }
}

/* ----- Equipment grid -----
   Replaces the old amenity chips. Chips read as decoration; these attributes actually move the score, so
   each cell carries its own contribution to the "Datos del inmueble" sub-score. */
.equip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Fixed track counts, not `auto-fill`: the first row's separator is cleared with `:nth-child(-n + N)`, and
   N is only knowable if the column count is declared rather than derived from the items' min-content. */
.equip__grid,
.equip__free {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-5);
  row-gap: 0;
}

.equip__grid > :nth-child(-n + 3) {
  border-top: 0;
}

/* Rows separated by a hairline rather than boxed. Each cell is already inside the panel's card; a second
   border around every attribute made a list of seven facts look like seven components. The separator sits
   on top so `:nth-child(-n + N)` can clear the first row exactly, whatever the column count. */
.equip__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.equip__item--on .equip__icon {
  color: var(--teal-600);
}

.equip__item--bad .equip__icon {
  color: var(--c-low);
}

.equip__icon {
  flex: none;
  display: grid;
  place-items: center;
}

.equip__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.equip__label {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}

.equip__note {
  font-size: 11.5px;
  color: var(--muted);
}

.equip__pts {
  flex: none;
  font-size: 11.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.equip__pts--up {
  color: var(--teal-600);
  background: var(--teal-050);
}

.equip__pts--down {
  color: var(--c-low);
  background: #fdeaea;
}

.equip__free-lead {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
}

/* Same track geometry as `.equip__grid` above it, so the normalised attributes and the free-text ones read
   as one list in two halves rather than a tidy grid followed by a ragged inline flow. */

.equip__free li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text);
}

.equip__free .icon {
  flex: none;
  transform: translateY(2px);
}

.equip__free .icon {
  color: var(--faint);
}

.equip__free-note,
.equip__legend {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.equip__legend {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.equip__legend .icon {
  flex: none;
  margin-top: 2px;
  color: var(--faint);
}

.detail__agency-link {
  color: var(--teal-600);
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid transparent;
}

.detail__agency-link:hover {
  border-bottom-color: currentColor;
}

/* Syndicated listing: the credit names the agency count and opens the full list as a dialog. */
.detail__agency-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--teal-600);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.detail__agency-more:hover {
  border-bottom-color: currentColor;
}

.detail__agency-more .icon {
  transform: rotate(90deg);
}

/* ----- Disclaimer ----- */
.detail__disclaimer {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.detail__disclaimer .icon {
  color: var(--faint);
  flex: none;
  margin-top: 2px;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .detail__hero-inner {
    grid-template-columns: 1fr;
  }

  /* `min-height` must not survive here: combined with `aspect-ratio` it drove the *width* from the height
     (300px × 16/10 = 480px) and blew the image past the viewport on every phone. Width leads, height follows. */
  .detail__gallery {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* Single column: the aside (score + confidence + CTA) is first in the DOM, so it naturally lands right
     under the hero — which is where the score belongs, not buried under every section of the report. */
  .detail__grid {
    display: flex;
    flex-direction: column;
    /* Must reset the desktop `align-items: start`: on a column flex container that is the *horizontal*
       axis, so children sized to their own content and spilled past the container instead of filling it. */
    align-items: stretch;
    gap: 28px;
    padding-top: 28px;
  }

  .detail__main {
    gap: 32px;
  }

  .detail__aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 14px;
  }

  /* The score is the headline: it spans the full width, the confidence and CTA share the row below. */
  .detail__aside .scorecard {
    grid-column: 1 / -1;
  }

  /* `1fr` floors at min-content, so a wide row kept the column from ever shrinking; `minmax(0, 1fr)` lets it. */
  .similar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .similar__col {
    display: block;
    grid-row: auto;
    min-width: 0;
  }

  .cblock__head {
    flex-wrap: wrap;
  }
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .site-header__nav a:not(.site-header__cta) {
    display: none;
  }

  .how__grid {
    grid-template-columns: 1fr;
  }

  /* Two time series stay side by side while the stacked main column is still wide (1024→861px); below that
     each chart would be too narrow to read. */
  .trendgrid {
    grid-template-columns: 1fr;
  }

  .listing__layout {
    grid-template-columns: 1fr;
  }

  /* With the search living inside the filter drawer, this row is the only entry point to both:
     it doubles as the current-location display. */
  .filters__mobile-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 9px 9px 9px 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 18px;
    width: 100%;
    text-align: left;
  }

  .filters__mobile-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filters__mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
  }

  .filters {
    position: fixed;
    inset: 0;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding-inline: 20px;
  }

  .filters--open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .filters__close {
    display: inline-flex;
  }

  .filters__apply {
    display: inline-flex;
  }
}

@media (max-width: 620px) {
  /* 620px is where the main column finally gets too narrow for three tracks — not 860px, where the sidebar
     drops away and the column actually gets *wider*. Two tiles still fit here once the value drops to 18px:
     the widest headline the page produces ("1.744.740 €") measures ~125px inside a ~163px track. */
  .retmetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .retmetric__val {
    font-size: 18px;
  }

  /* The drill-down menu is anchored to its own crumb, so a crumb near the right edge pushed a fixed 260px
     panel off-screen. Anchor it to the whole breadcrumb row instead and let it span the container. */
  .crumbs {
    position: relative;
  }

  .crumb__drop {
    position: static;
  }

  .crumb__menu {
    left: 0;
    right: 0;
    width: auto;
    max-height: 60vh;
  }

  /* Full-bleed bottom sheet: on a phone a centred card wastes the edges and clips long method breakdowns. */
  .infomodal {
    padding: 0;
    place-items: end stretch;
  }

  .infomodal__card {
    width: 100%;
    max-height: 88dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .infomodal__bar {
    padding: 16px 16px 12px;
  }

  .infomodal__scroll {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .method-cta {
    width: 100%;
    justify-content: center;
  }

  .container {
    padding-inline: 18px;
  }

  /* Login collapses to an icon-only circular button. */
  .site-header__login {
    padding: 0;
    width: 42px;
    height: 42px;
    justify-content: center;
    border-radius: 50%;
    transition:
      filter 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.05s ease,
      width 0.22s ease,
      height 0.22s ease;
  }

  /* Shrink is more noticeable on mobile, where header real estate is scarcest. */
  .site-header--scrolled .site-header__inner {
    height: 52px;
  }

  .site-header--scrolled .brand__logo--header {
    width: 138px;
  }

  .site-header--scrolled .site-header__login {
    width: 36px;
    height: 36px;
  }

  .site-header__login-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Coverage line reads poorly on a narrow hero — hide it on mobile. */
  .hero__stats {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Hero search stacks: the boxed input row on top, and a big full-width button
     detached below it (outside the white box). */
  .searchbox--hero .searchbox__form {
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .searchbox--hero .searchbox__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 16px;
    padding: 6px 8px 6px 16px;
    box-shadow:
      0 20px 56px rgba(3, 12, 24, 0.4),
      0 2px 8px rgba(3, 12, 24, 0.25);
    overflow: hidden;
  }

  .searchbox--hero .searchbox__input {
    font-size: 16px;
  }

  .searchbox--hero .searchbox__submit {
    width: 100%;
    margin-top: 12px;
    height: 54px;
    padding-inline: 15px;
  }

  .searchbox--compact .searchbox__submit {
    padding-inline: 15px;
  }

  .hero__popular-label {
    width: 100%;
    margin: 0 0 2px;
  }

  .proscons,
  .scenario__controls,
  .specs,
  .mortgage__controls,
  .mortgage__result {
    grid-template-columns: 1fr;
  }

  .mortgage__metric {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    padding: 10px 12px;
  }

  .mortgage__metric + .mortgage__metric {
    border-left: 0;
    border-top: 1px solid rgba(106, 70, 244, 0.22);
  }

  .mortgage__metric-unit {
    display: none;
  }

  .nearby__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail__quickfacts {
    gap: 20px;
  }

  /* Below this width two aside cards side by side are too cramped — stack them. */
  .detail__aside {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 18px 16px;
  }

  /* ----- Mobile flattening: ONE box level -----
     On a 390px screen the report nested up to four bordered boxes (panel › factor › method › source card),
     which shrinks the text column to nothing and reads as visual noise. The rule below: section-level
     containers in the main column lose their box entirely and become plain full-width blocks separated by a
     hairline; only genuinely interactive or leaf elements (the factor accordion, the aside cards, form
     controls) are allowed to keep a border. Fills without borders (tints) are fine — they are not boxes. */
  .detail__main > .panel,
  .detail__main > .verdict {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: 0;
    padding-block: 0;
  }

  /* Sections no longer have a card edge, so a hairline carries the separation instead. */
  .detail__main > .panel + .panel,
  .detail__main > .panel + .verdict,
  .detail__main > .verdict + .panel {
    border-top: 1px solid var(--line);
    padding-top: 26px;
  }

  /* The gradient rule and lift only make sense on an actual card. */
  .panel--score::before,
  .panel--auction::before {
    display: none;
  }

  .section-head {
    gap: 11px;
    margin-bottom: 16px;
  }

  .section-head__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .section-head h2 {
    font-size: 18px;
  }

  /* The factor row keeps the desktop structure — icon, name over weight, score over points, chevron, then
     the bar underneath — and only tightens. Its four text lines still resolve onto two shared baselines, so
     nothing needs re-aligning at this width. */
  .factor__summary {
    padding: var(--sp-3);
    gap: var(--sp-2);
  }

  .factor__icon {
    width: 32px;
    height: 32px;
  }

  .factor__head {
    gap: var(--sp-2);
  }

  .factor__titles h3 {
    font-size: 15px;
  }

  .factor__score-num {
    font-size: 19px;
  }

  .factor__weight {
    font-size: 11.5px;
  }

  .factor__body {
    padding: 2px var(--sp-3) var(--sp-4);
  }

  /* The method block sits inside the factor card: no second border, just a tinted band. */
  .method {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 4px;
    gap: 14px;
  }

  .method__icon {
    border: 0;
    background: var(--purple-050);
    width: 28px;
    height: 28px;
  }

  /* Source "cards" become a plain list: a bold name and its description, no third box. */
  .srclist {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .srclist__item {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    gap: 2px;
  }

  .method__math {
    gap: 7px;
  }

  .method__math-note {
    flex-basis: 100%;
  }

  /* Section subtitles move behind the "i". They are two-to-four lines of prose each on a phone, and they
     restate what the dialog already says at length, so printing them inline pushed the actual content of
     every section down a screenful. The button replaces the paragraph; nothing is lost. */
  .section-head p,
  .cblock__titles p {
    display: none;
  }

  .section-head__info,
  .cblock__info {
    display: inline-flex;
  }

  .section-head {
    margin-bottom: 14px;
    align-items: center;
  }

  /* Equipment: two columns of hairline-separated rows instead of one bordered box per attribute stacked
     full width. These cells are short (an icon, two or three words, a points pill), so a single column
     wasted half the screen and made the block scroll for pages. */
  .equip__grid,
  .equip__free {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
  }

  .equip__grid > :nth-child(3) {
    border-top: 1px solid var(--line);
  }

  .equip__label {
    font-size: 13px;
  }

  /* Benchmark KPIs keep their tint but lose the outline. */
  .benchcard {
    border-color: transparent;
  }

  /* The verdict columns keep their green/amber tint; the outline is what made them read as boxes. */
  .proscons__col {
    border-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- Territorial investment guides (/invertir-en) -----
   The guides reuse the report primitives (panel, section-head, retmetrics, benchgrid, proscons, trendgrid)
   and only add what is genuinely theirs: the opening band, the children table and the sibling strip. */
.territory__hero {
  padding: 8px 0 var(--sp-6);
}

.territory__hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
}

.territory__eyebrow {
  color: var(--teal-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.territory__hero h1 {
  max-width: 30ch;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.territory__verdict {
  max-width: 78ch;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

.territory__hero .retmetrics {
  margin-top: var(--sp-3);
}

.territory__hero .retmetric {
  padding: var(--sp-4) var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
}

.territory__lead p + p {
  margin-top: 10px;
}

.territory__lead {
  max-width: 82ch;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.territory__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
}

/* Percentile rows: what is measured, its figure, and where it sits nationally. */
.tposition {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.tposition__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tposition__head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.tposition__head strong {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* The children index. A table, because the reader is comparing places, and comparison wants columns. */
.tchildren {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.tchildren__head,
.tchildren__row {
  display: grid;
  grid-template-columns: minmax(180px, 2.2fr) repeat(5, minmax(78px, 1fr));
  gap: 12px;
  align-items: center;
  padding: 11px 8px;
  min-width: 620px;
}

.tchildren__head {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--line-strong);
  background: #fff;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tchildren__head span:not(:first-child),
.tchildren__row span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tchildren__row {
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.tchildren__row:hover {
  background: var(--surface);
}

.tchildren__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tchildren__name a {
  color: var(--ink);
  font-weight: 700;
}

.tchildren__name a:hover {
  color: var(--purple-600);
}

.tchildren__name small {
  color: var(--faint);
  font-size: 12px;
}

.tchildren__row .is-good {
  color: var(--c-high);
  font-weight: 700;
}

/* Neighbouring territories, for the reader choosing between places rather than reading about one. */
.tsiblings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tsibling {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.tsibling:hover {
  border-color: var(--purple-200);
  background: var(--purple-050);
}

.tsibling__name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.tsibling__yield {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.02em;
}

.tsibling__sub {
  color: var(--faint);
  font-size: 12px;
}

.territory__cta {
  margin-top: var(--sp-4);
}

.territory__sources,
.territory__disclaimer {
  max-width: 90ch;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.6;
}

.panel--method p + p {
  margin-top: 10px;
}

/* The tail of a large children list: every child stays linked, without 300 more table rows. */
.tlinks {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.tlinks__head {
  margin-bottom: 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tlinks__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.tlinks__list a {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.tlinks__list a:hover {
  color: var(--purple-600);
}

/* The pointer from a property report to its municipality's guide: present, never shouting. */
.guidelink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple-600);
  font-weight: 600;
}

.guidelink:hover {
  text-decoration: underline;
}

/* ----- Territorial choropleth -----
   Real IGN outlines, one hue, lightness carrying the yield. The seams are the surface colour, so the map
   reads as a line drawing rather than as a block of colour. */
.tmap {
  margin: 0;
}

.tmap__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tmap__shape {
  stroke: #fff;
  stroke-width: 0.8;
  stroke-linejoin: round;
  transition: fill 0.12s ease;
}

.tmap__svg a:hover .tmap__shape,
.tmap__svg a:focus-visible .tmap__shape {
  stroke: var(--ink);
  stroke-width: 1.6;
  /* Raise the hovered shape above its neighbours so its outline is not clipped by the next path. */
  paint-order: stroke;
}

.tmap__svg a:focus-visible {
  outline: none;
}

.tmap__shape--current {
  stroke: var(--ink);
  stroke-width: 1.6;
  paint-order: stroke;
}

.tmap__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--sp-4);
}

.tmap__legend-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tmap__scale {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tmap__swatch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
}

.tmap__swatch em {
  color: var(--ink);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tmap__swatch--none em {
  color: var(--muted);
}

/* Map labels ride a white halo, so they stay readable over any step of the ramp. */
.tmap__label {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.tmap__label-value {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----- Price vs yield scatter ----- */
.sc {
  display: block;
  width: 100%;
  height: auto;
}

.sc__axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.sc__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.sc__ref {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.sc__ref-label,
.sc__tick {
  fill: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sc__axis-title {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc__dot {
  fill: var(--teal);
  stroke: #fff;
  stroke-width: 2;
}

.sc a:hover .sc__dot {
  fill: var(--purple);
}

.sc__dot--current {
  fill: var(--purple);
}

.sc__label--current {
  fill: var(--purple);
  font-size: 12.5px;
  font-weight: 700;
}

.sc__label {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3px;
  pointer-events: none;
}

/* The territory the page is about: a heavier outline and a label that wins over its neighbours'. */
.tmap__label--current {
  font-size: 13px;
  stroke-width: 3.5px;
}

.tmap__shape--current {
  stroke: var(--purple);
  stroke-width: 2;
}

/* ----- Guide layout -----
   Balanced grids: the column count comes from the number of cards, so a row is never left with one orphan
   card under three empty slots. */
.tgrid {
  display: grid;
  gap: var(--sp-3);
}

.tgrid--1 {
  grid-template-columns: minmax(0, 1fr);
}
.tgrid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tgrid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tgrid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.benchgrid.tgrid {
  gap: 14px;
}

/* One rhythm inside every guide panel: the head, then each block, evenly spaced. Without this the head
   sits on top of the first card and the footnote glues itself to the last one. */
.territory .panel > * + * {
  margin-top: var(--sp-5);
}

.territory .panel > .section-head + * {
  margin-top: var(--sp-5);
}

.territory .panel > .cblock__foot {
  margin-top: var(--sp-4);
}

.territory .verdict > * + * {
  margin-top: var(--sp-5);
}

@media (max-width: 900px) {
  .tgrid--3,
  .tgrid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tgrid--2,
  .tgrid--3,
  .tgrid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----- Charts on a phone -----
   An SVG scales to its container and drags its text down with it: at 414px the 11px labels of a 760-wide
   plot land at about 5px. The dense labels are therefore laid out twice server-side and swapped here, and
   the sparse text (ticks, axis titles, line-chart values, map legend) is simply enlarged, which is safe
   because those never collide with each other. */
.sc__labels--compact,
.tmap__labels--compact {
  display: none;
}

@media (max-width: 760px) {
  .sc__labels--wide,
  .tmap__labels--wide {
    display: none;
  }

  .sc__labels--compact,
  .tmap__labels--compact {
    display: block;
  }

  .sc__label {
    font-size: 22px;
    stroke-width: 5px;
  }

  .sc__label--current {
    font-size: 24px;
  }

  .sc__tick,
  .sc__ref-label {
    font-size: 21px;
  }

  .sc__axis-title {
    font-size: 20px;
  }

  .sc__dot {
    r: 9;
    stroke-width: 3;
  }

  .tmap__label {
    font-size: 24px;
    stroke-width: 6px;
  }

  .tmap__label-value {
    font-size: 23px;
  }

  .lc__tick,
  .lc__last,
  .lc__ref-label {
    font-size: 15px;
  }

  .wf__value,
  .wf__label {
    font-size: 14px;
  }
}

/* The half-width line charts stretch further on a phone, so their text needs a little more again. */
@media (max-width: 560px) {
  .lc__tick,
  .lc__last,
  .lc__ref-label {
    font-size: 17px;
  }
}

/* ----- The country page -----
   /invertir-en is the entry point of a family of 8.000 pages, so it opens on a dark band with the map of
   Spain inside it. Nothing below this comment applies to any other level: the identity is the point. */
.territory__hero--national {
  position: relative;
  /* Slides up under the sticky, transparent header (70px tall), exactly as the home hero does, so the
     topbar reads as part of the dark band instead of as a white strip sitting on top of it. */
  margin-top: -70px;
  margin-bottom: var(--sp-6);
  padding: calc(70px + var(--sp-5)) 0 var(--sp-7);
  background: radial-gradient(52% 90% at 8% -10%, rgba(13, 187, 172, 0.2), transparent 60%), radial-gradient(46% 80% at 96% 4%, rgba(106, 70, 244, 0.24), transparent 58%), linear-gradient(168deg, #07172a, var(--ink) 55%, #122b47);
  color: #fff;
}

.tnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: var(--sp-7);
}

.tnat__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.territory__hero--national .territory__eyebrow {
  color: var(--teal);
}

.territory__hero--national h1 {
  max-width: 20ch;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.territory__hero--national .territory__verdict {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.5px;
}

/* The four counts that place the whole family: how many people, municipalities, communities and listings
   sit behind everything below. They are structure, not market level, so they read as a rule of figures.
   Two by two rather than in a row: four figures across this column leave the last one wrapped alone. */
.tnat__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tnat__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tnat__facts strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tnat__facts span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.territory__hero--national .retmetrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.territory__hero--national .retmetric {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.territory__hero--national .retmetric__val {
  color: #fff;
}

.territory__hero--national .retmetric--accent .retmetric__val {
  color: var(--teal);
}

.territory__hero--national .retmetric__lab {
  color: rgba(255, 255, 255, 0.9);
}

.territory__hero--national .retmetric__sub {
  color: rgba(255, 255, 255, 0.55);
}

/* The map sits on the dark band: its fills are light enough to carry themselves, and only the chrome
   around it (legend label, hint, seams) has to be restated for the surface it now lives on. */
.tnat__map .tmap__shape {
  stroke: rgba(10, 29, 51, 0.55);
}

.tnat__map .tmap__legend {
  gap: 6px 12px;
  margin-top: var(--sp-3);
}

.tnat__map .tmap__legend-label {
  color: rgba(255, 255, 255, 0.62);
}

.tnat__maphint {
  margin-top: var(--sp-3);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

/* ----- The national ranking -----
   Nineteen communities on one shared scale, each row a link, with the national average marked on every
   track so a bar is read against the country and not only against the bar above it. */
.tladder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.tladder__row a {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1.1fr) minmax(0, 2fr) 64px;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.tladder__row a:hover {
  background: var(--surface);
}

.tladder__rank {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tladder__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.tladder__name small {
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 500;
}

.tladder__track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
}

.tladder__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #74d8cb, #0a9184);
}

.tladder__tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
  opacity: 0.45;
}

.tladder__value {
  font-family: var(--font-display);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ----- Province cards -----
   A community has at most eight provinces, so each one carries its figures in full instead of being
   squeezed into a table row, which only earns its keep past thirty children. */
.tcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.tcard:hover {
  border-color: var(--purple-200);
  background: var(--purple-050);
}

.tcard__name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.tcard__yield {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tcard__yield.is-good {
  color: var(--c-high);
}

.tcard__sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.tcard__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.tcard__figures span {
  display: flex;
  flex-direction: column;
  color: var(--ink-700);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tcard__figures em {
  color: var(--faint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----- How this page is calculated -----
   The same content used to be three paragraphs of small grey text. Coverage is a share, a period is a
   date and a source is a name plus what it feeds — each one drawn as what it is. */
.tmethod {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-5);
}

.tmethod__block {
  padding: var(--sp-4);
  border-radius: 14px;
  background: var(--surface);
}

.tmethod__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 6px;
}

.tmethod__title h3 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tmethod__score {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tmethod__score em {
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.tmethod__lead {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.tcov {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-4);
  list-style: none;
}

.tcov__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px var(--sp-3);
  align-items: baseline;
}

.tcov__label {
  color: var(--ink-700);
  font-size: 12.5px;
  font-weight: 600;
}

.tcov__value {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tcov__value em {
  color: var(--faint);
  font-style: normal;
  font-weight: 600;
}

.tcov__track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}

.tcov__track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal-600);
}

/* On a municipality a family is present or it is not, so the share collapses to a plain mark. */
.tcov__item--flag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 12.5px;
}

.tcov__item--flag.is-on {
  color: var(--ink-700);
  font-weight: 600;
}

.tcov__item--flag.is-on svg {
  color: var(--c-high);
}

.tperiods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-4);
}

.tperiods div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff;
}

.tperiods dt {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tperiods dd {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tsources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.tsource {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}

.tsource strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
}

.tsource span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.territory__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.territory__disclaimer svg {
  flex: none;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .tnat,
  .tmethod {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnat {
    gap: var(--sp-5);
  }

  .tladder__row a {
    grid-template-columns: 22px minmax(0, 1fr) 56px;
    gap: 8px;
  }

  /* The bar drops to its own line rather than being squeezed to nothing beside the name. */
  .tladder__track {
    grid-column: 2 / -1;
  }
}