/* ==========================================================================
   Molina Luxury Estates — hoja de estilo única
   Paleta: negro tinta / hueso / oro viejo.  Todo en CSS puro.
   ========================================================================== */

/* --- 1. Reset ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bone);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  --ink:        #0A0A0B;
  --ink-2:      #0F0F11;
  --ink-3:      #141416;
  --ink-4:      #1A1A1D;

  --bone:       #EDE9E1;
  --bone-dim:   #B7B2A8;
  --muted:      #9A958C;   /* 6.7:1 sobre --ink, 6.5:1 sobre --ink-2 */

  --gold:       #C8A86A;
  --gold-lt:    #E4C892;
  --gold-dk:    #8E7742;

  /* Hairlines decorativas (divisores, marcos): no portan información */
  --line:       rgba(200, 168, 106, 0.20);
  --line-soft:  rgba(237, 233, 225, 0.10);

  /* Borde de CONTROL (campos, botones, chips): opaco y >= 3:1 sobre ink/ink-2.
     #6A6252 = 3.19:1 sobre --ink, 3.10:1 sobre --ink-2. */
  --bd:         #6A6252;
  --bd-strong:  #8A8070;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
  --font-sans:    'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --pad-x:  clamp(20px, 5vw, 72px);
  --pad-y:  clamp(72px, 11vw, 160px);
  --maxw:   1480px;

  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
  --slow:   1.1s;

  --hdr-h:  clamp(68px, 8vw, 92px);
}

/* --- 3. Tipografía ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.d1 { font-size: clamp(2.9rem, 8.2vw, 6.6rem); line-height: 0.96; }
.d2 { font-size: clamp(2.1rem, 5.2vw, 4.1rem); }
.d3 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
.d4 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); }

.serif-it { font-style: italic; color: var(--gold-lt); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: "";
  width: clamp(26px, 4vw, 52px);
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}
.eyebrow.is-centered { justify-content: center; }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  color: var(--bone-dim);
  font-weight: 200;
  max-width: 58ch;
}

.meta {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 1080px; }

.section { padding-block: var(--pad-y); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.section--alt { background: var(--ink-2); }

.rule { height: 1px; background: var(--line); border: 0; }

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }

.stack > * + * { margin-top: 1.15rem; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 76px);
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* --- 5. Botones ---------------------------------------------------------- */
.btn {
  --btn-fg: var(--bone);
  --btn-bd: var(--bd-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 1.02em 2.2em;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-io);
}
.btn:hover::after,
.btn:focus-visible::after { transform: scaleY(1); transform-origin: top; }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--gold); }

.btn--solid { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--solid::after { background: var(--bone); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--ink); border-color: var(--bone); }

.btn--sm { padding: 0.82em 1.6em; font-size: 0.66rem; }
.btn--block { width: 100%; }

/* enlace con subrayado que se dibuja */
.link-u {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.5em;
}
.link-u::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-io);
}
.link-u:hover::after, .link-u:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link-u .arw { transition: transform 0.5s var(--ease); }
.link-u:hover .arw { transform: translateX(6px); }

/* --- 6. Foco visible -----------------------------------------------------
   Nunca se anula el outline: no existe ninguna regla `outline: none` en
   esta hoja, para que ningún control pueda quedarse sin indicador.        */
:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  padding: 0.8em 1.6em;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* --- 7. Header ----------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), backdrop-filter 0.6s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.hdr__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}
.brand__sub {
  font-size: 0.52rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.42rem;
}

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
}
.nav__link {
  position: relative;
  font-size: 0.71rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: 0.5em;
  transition: color 0.4s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-io);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--bone); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--gold); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.hdr__cta { display: none; }
@media (min-width: 1180px) { .hdr__cta { display: inline-flex; } }

/* Botón hamburguesa */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  align-items: flex-end;
  padding: 0 2px;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1px;
  background: var(--bone);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), width 0.45s var(--ease);
}
.burger span:nth-child(1) { width: 30px; }
.burger span:nth-child(2) { width: 20px; }
.burger[aria-expanded="true"] span:nth-child(1) { width: 26px; transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { width: 26px; transform: translateY(-3.5px) rotate(-45deg); }

/* Menú móvil */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--ink);
  padding: calc(var(--hdr-h) + 28px) var(--pad-x) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.75s var(--ease-io), visibility 0s linear 0.75s;
}
.mnav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.75s var(--ease-io), visibility 0s linear 0s;
}
@media (min-width: 1000px) { .mnav { display: none; } }

.mnav__list { display: flex; flex-direction: column; }
.mnav__item { border-top: 1px solid var(--line); }
.mnav__item:last-child { border-bottom: 1px solid var(--line); }
.mnav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  font-weight: 300;
  color: var(--bone);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.35s var(--ease);
}
.mnav.is-open .mnav__link { opacity: 1; transform: none; }
.mnav.is-open .mnav__item:nth-child(1) .mnav__link { transition-delay: 0.16s; }
.mnav.is-open .mnav__item:nth-child(2) .mnav__link { transition-delay: 0.22s; }
.mnav.is-open .mnav__item:nth-child(3) .mnav__link { transition-delay: 0.28s; }
.mnav.is-open .mnav__item:nth-child(4) .mnav__link { transition-delay: 0.34s; }
.mnav.is-open .mnav__item:nth-child(5) .mnav__link { transition-delay: 0.40s; }
.mnav__link:hover, .mnav__link[aria-current="page"] { color: var(--gold); }
.mnav__num {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.mnav__foot {
  display: grid;
  gap: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease) 0.46s, transform 0.5s var(--ease) 0.46s;
}
.mnav.is-open .mnav__foot { opacity: 1; transform: none; }

/* Bloqueo de scroll explícito en los DOS ejes (leer sólo `overflow-y` en el
   shorthand da falsos positivos: el body ya trae overflow-x: hidden). */
body.is-locked { overflow-x: hidden; overflow-y: hidden; }

/* Sin JS el menú desplegable no puede abrirse, así que se sirve estático:
   la navegación móvil siempre queda alcanzable. */
html:not(.js) .burger { display: none; }
html:not(.js) .mnav {
  position: static;
  clip-path: none;
  visibility: visible;
  overflow-y: visible;
  padding: calc(var(--hdr-h) + 20px) var(--pad-x) 8px;
  gap: 20px;
}
html:not(.js) .mnav__link { opacity: 1; transform: none; font-size: clamp(1.5rem, 6vw, 2rem); }
html:not(.js) .mnav__foot { opacity: 1; transform: none; }
@media (min-width: 1000px) { html:not(.js) .mnav { display: none; } }

/* --- 8. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--hdr-h) + 40px);
  padding-bottom: clamp(40px, 7vw, 88px);
  overflow: hidden;
}
.hero--page { min-height: min(72svh, 660px); }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* Estado base = estado FINAL. La animación sólo añade la deriva inicial
     (fill backwards), así que si nunca corre la imagen ya está correcta. */
  animation: heroDrift 22s var(--ease) backwards;
}
@keyframes heroDrift {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El lavado izquierdo es la "plancha" del titular: la banda de ventanas
     iluminadas de la villa llega a L=0.53 y dejaba el H1 a 2.76:1. Con este
     reparto el titular sube a 5.0:1 y la mitad derecha de la foto queda
     prácticamente limpia, así que la casa sigue siendo la protagonista. */
  background:
    linear-gradient(to bottom, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.06) 26%, rgba(10,10,11,0.10) 46%, rgba(10,10,11,0.66) 82%, rgba(10,10,11,0.96) 100%),
    linear-gradient(to right, rgba(10,10,11,0.90) 0%, rgba(10,10,11,0.72) 30%, rgba(10,10,11,0.34) 58%, rgba(10,10,11,0) 82%);
}

/* Los heros de página interior son más bajos, así que el recorte deja el cielo
   claro justo detrás del titular. Se refuerza el lavado izquierdo —donde vive
   el texto— y se deja limpia la derecha para que la fotografía siga leyéndose.
   Medido: titular en propiedades@768 pasa de 3.01:1 a 5.2:1; eyebrow en
   nosotros@375, de 4.71:1 a 6.9:1. */
.hero--page .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(10,10,11,0.80) 0%, rgba(10,10,11,0.22) 30%, rgba(10,10,11,0.34) 55%, rgba(10,10,11,0.80) 88%, rgba(10,10,11,0.97) 100%),
    linear-gradient(to right, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.52) 45%, rgba(10,10,11,0.06) 75%);
}

.hero__in { width: 100%; }
.hero__title { max-width: 16ch; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
  display: block;
  animation: rise 1.15s var(--ease-io) backwards;
}
.hero__title .ln:nth-child(1) > span { animation-delay: 0.12s; }
.hero__title .ln:nth-child(2) > span { animation-delay: 0.24s; }
.hero__title .ln:nth-child(3) > span { animation-delay: 0.36s; }
@keyframes rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin-top: clamp(24px, 3vw, 38px);
  animation: fadeUp 1s var(--ease) 0.7s backwards;
}
.hero__meta .dot { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero__down {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(40px, 7vw, 88px);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
  animation: fadeUp 1s var(--ease) 1s backwards;
}
@media (min-width: 1000px) { .hero__down { display: flex; } }
.hero__down i {
  display: block;
  width: 1px;
  height: 62px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: pulseLine 2.4s var(--ease) infinite;
}
@keyframes pulseLine {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.5); opacity: 0.4; }
}

/* --- 9. Buscador --------------------------------------------------------- */
.finder {
  margin-top: clamp(30px, 4vw, 50px);
  border: 1px solid var(--bd);
  /* Opaco al 88%: el texto del buscador no depende del píxel de la foto */
  background: rgba(9, 9, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fadeUp 1s var(--ease) 0.85s backwards;
}
.finder__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .finder__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .finder__grid { grid-template-columns: repeat(3, 1fr) auto; } }

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem clamp(18px, 2vw, 30px) 1.2rem;
  border-bottom: 1px solid var(--bd);
}
@media (min-width: 760px) {
  .finder .field:nth-child(odd) { border-right: 1px solid var(--bd); }
}
@media (min-width: 1080px) {
  .finder .field { border-right: 1px solid var(--bd); border-bottom: 0; }
  .finder .field:nth-child(odd) { border-right: 1px solid var(--bd); }
}
.field > label {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.field select,
.field input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 300;
  color: var(--bone);
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.field select option { background: var(--ink-3); color: var(--bone); }
.field::after {
  content: "";
  position: absolute;
  right: clamp(18px, 2vw, 30px);
  bottom: 1.75rem;
  width: 7px; height: 7px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}
.field--plain::after { display: none; }

.finder__go {
  display: flex;
  align-items: stretch;
}
.finder__go .btn {
  width: 100%;
  border: 0;
  background: var(--gold);
  color: var(--ink);
  min-height: 100%;
  padding-inline: clamp(28px, 4vw, 54px);
}
.finder__go .btn::after { background: var(--bone); }

/* --- 10. Tarjetas de propiedad ------------------------------------------ */
.props {
  display: grid;
  gap: clamp(30px, 3.4vw, 52px);
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .props { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .props--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.card:hover { border-color: var(--line); }
@media (hover: hover) and (min-width: 900px) {
  .card:hover { transform: translateY(-6px); }
}

.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-3);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.35s var(--ease);
}
.card:hover .card__media img { transform: scale(1.07); }
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,0.72), rgba(10,10,11,0) 55%);
  opacity: 0.85;
}

.tag {
  position: absolute;
  z-index: 2;
  top: 16px; left: 16px;
  padding: 0.5em 1em;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
}
.tag--ghost {
  color: var(--gold-lt);
  background: rgba(9, 9, 10, 0.92);
  border: 1px solid var(--bd);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tag--right { left: auto; right: 16px; }

.card__ref {
  position: absolute;
  z-index: 2;
  bottom: 16px; right: 18px;
  padding: 0.35em 0.7em;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  /* Chip opaco: no depende del píxel de la foto que quede detrás */
  color: var(--bone-dim);
  background: rgba(9, 9, 10, 0.86);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 32px);
  gap: 0.5rem;
}
.card__loc {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.card__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.14;
  color: var(--bone);
  transition: color 0.4s var(--ease);
}
.card:hover .card__name { color: var(--gold-lt); }
.card__price {
  margin-top: 0.35rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--bone);
}
.card__price small {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-left: 0.55em;
}

.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 1.6vw, 22px);
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.74rem;
  color: var(--bone-dim);
}
.specs li { display: flex; align-items: center; gap: 0.5em; }
.specs li + li::before {
  content: "";
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 0.5em;
  opacity: 0.7;
}
.specs b { font-weight: 400; color: var(--bone); }

.card__foot {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Tarjeta destacada horizontal */
.feature {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
@media (min-width: 980px) {
  .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: stretch; }
  .feature--flip .feature__media { order: 2; }
}
.feature__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
@media (min-width: 980px) { .feature__media { aspect-ratio: auto; min-height: 560px; } }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.feature:hover .feature__media img { transform: scale(1.05); }
.feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(30px, 4vw, 62px);
}

/* --- 11. Filtros / listado ---------------------------------------------- */
.filters {
  border: 1px solid var(--bd);
  background: var(--ink-2);
}
.filters__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .filters__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .filters__grid { grid-template-columns: repeat(4, 1fr); } }
.filters .field { border-bottom: 1px solid var(--bd); }
@media (min-width: 700px) { .filters .field:nth-child(odd) { border-right: 1px solid var(--bd); } }
@media (min-width: 1100px) {
  .filters .field { border-right: 1px solid var(--bd); }
  .filters .field:last-child { border-right: 0; }
}

.filters__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1rem clamp(18px, 2vw, 30px);
  border-top: 1px solid var(--bd);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.44em 0.9em;
  border: 1px solid var(--bd-strong);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.chip:hover { color: var(--gold-lt); border-color: var(--gold-lt); }
.chip .x { font-style: normal; color: var(--gold-lt); }

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(34px, 4vw, 56px) 0 clamp(26px, 3vw, 40px);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.results-bar__count b {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--gold-lt);
  margin-right: 0.35rem;
}
.sorter { display: flex; align-items: center; gap: 12px; }
.sorter select {
  border: 0;
  border-bottom: 1px solid var(--bd);
  background: transparent;
  color: var(--bone);
  padding: 0.4em 1.6em 0.4em 0;
  font-size: 0.74rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sorter select option { background: var(--ink-3); }

.empty {
  padding: clamp(50px, 8vw, 96px) 0;
  text-align: center;
  border: 1px dashed var(--line);
}

/* --- 12. Cifras ---------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--ink);
  padding: clamp(26px, 3.4vw, 46px) clamp(20px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-lt);
}
.stat__l { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }

/* --- 13. Servicio / lista numerada -------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--ink);
  padding: clamp(30px, 3.4vw, 52px) clamp(22px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background-color 0.6s var(--ease);
}
.step:hover { background: var(--ink-3); }
.step__n {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.step h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.step p { color: var(--bone-dim); font-size: 0.94rem; }

/* --- 14. Testimonios ----------------------------------------------------- */
.quotes { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 940px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  transition: border-color 0.6s var(--ease);
}
.quote:hover { border-color: var(--line); }
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.5;
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.7vw, 1.42rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--bone);
}
.quote__who { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); }
.quote__who img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  filter: grayscale(0.25);
}
.quote__who b { display: block; font-weight: 400; font-size: 0.94rem; }
.quote__who span { font-size: 0.72rem; color: var(--muted); }

/* --- 15. Detalle de propiedad ------------------------------------------- */
.gal { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .gal { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); } }
.gal__main {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-3);
}
.gal__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--ease); }
.gal__side { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
@media (min-width: 900px) { .gal__side { grid-template-columns: 1fr; grid-auto-rows: 1fr; } }
.gal__thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
.gal__thumb { border-color: var(--bd); }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; transition: opacity 0.5s var(--ease), transform 1.1s var(--ease); }
.gal__thumb:hover img { opacity: 1; transform: scale(1.06); }
.gal__thumb[aria-current="true"] { border-color: var(--gold-lt); }
.gal__thumb[aria-current="true"] img { opacity: 1; }

.dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .dl { grid-template-columns: repeat(3, 1fr); } }
.dl > div {
  background: var(--ink);
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dl dt { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.dl dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 300; color: var(--bone); }

.amen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) { .amen { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 3vw, 56px); } }
.amen li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem;
  color: var(--bone-dim);
}
.amen li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.62rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.sticky-panel { position: static; }
@media (min-width: 1100px) {
  .sticky-panel { position: sticky; top: calc(var(--hdr-h) + 28px); }
}

.panel {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(26px, 3vw, 40px);
}
.panel__price {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--gold-lt);
  line-height: 1.1;
}

.agent { display: flex; align-items: center; gap: 1rem; padding-top: 1.4rem; margin-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.agent img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }

.mapa {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
}
.mapa img { width: 100%; height: 100%; object-fit: cover; }
.mapa__note {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  padding: 0.85em 1.2em;
  background: rgba(10, 10, 11, 0.82);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem;
  color: var(--bone-dim);
  max-width: 34ch;
}

/* --- 16. Formularios ----------------------------------------------------- */
.form { display: grid; gap: clamp(18px, 2vw, 26px); }
.form__row { display: grid; gap: clamp(18px, 2vw, 26px); }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.inp { display: flex; flex-direction: column; gap: 0.5rem; }
.inp > label {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.inp input,
.inp select,
.inp textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--bd);
  background: transparent;
  color: var(--bone);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.4s var(--ease);
  border-radius: 0;
}
.inp input:hover,
.inp select:hover,
.inp textarea:hover { border-bottom-color: var(--bd-strong); }
.inp select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.inp select option { background: var(--ink-3); color: var(--bone); }
.inp textarea { resize: vertical; min-height: 120px; }
.inp input::placeholder, .inp textarea::placeholder { color: var(--muted); opacity: 1; }
.inp input:focus, .inp select:focus, .inp textarea:focus { border-bottom-color: var(--gold); }
.inp:focus-within > label { color: var(--gold); }

.inp--check { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 0.85rem; }
.inp--check .err { flex-basis: 100%; }
.inp--check input {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 3px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--bd-strong);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.inp--check input:hover { border-color: var(--gold-lt); }
.inp--check input:checked { background: var(--gold); border-color: var(--gold); }
/* La marca es un glifo real, no depende de ninguna animación */
.inp--check input:checked::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  margin: 3px auto 0;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.inp--check > label {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--bone-dim);
  line-height: 1.55;
}
.inp--check a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.err {
  font-size: 0.72rem;
  color: #E38A7A;
  min-height: 1.1em;
  letter-spacing: 0.04em;
}
.inp.has-err input,
.inp.has-err select,
.inp.has-err textarea { border-bottom-color: #E38A7A; }

.form-msg {
  display: none;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--gold);
  background: rgba(200, 168, 106, 0.07);
}
/* Sin `animation`, sin `opacity`: al añadir .is-on el panel es visible en el
   mismo fotograma aunque no corran animaciones ni rAF. */
.form-msg.is-on { display: flex; }
.form-msg__ic {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 0.9rem;
}
/* El bloque de texto ocupa el ancho restante: no se encoge a min-content */
.form-msg__txt { flex: 1 1 auto; min-width: 0; }
.form-msg b { display: block; font-weight: 400; color: var(--bone); margin-bottom: 0.3rem; }
.form-msg p { font-size: 0.9rem; color: var(--bone-dim); }

/* --- 17. Contacto -------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

.info-list li { padding: 1.35rem 0; border-bottom: 1px solid var(--line-soft); }
.info-list dt { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.info-list dd { margin: 0; color: var(--bone-dim); }
.info-list a:hover { color: var(--gold-lt); }

/* --- 18. Footer ---------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); background: var(--ink-2); }
.ftr__top {
  display: grid;
  gap: clamp(38px, 5vw, 64px);
  padding-block: clamp(52px, 7vw, 96px);
}
@media (min-width: 900px) { .ftr__top { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.7fr)) minmax(0, 1fr); } }
.ftr h3 { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; font-weight: 400; }
.ftr__list li + li { margin-top: 0.75rem; }
.ftr__list a, .ftr address { font-size: 0.9rem; color: var(--bone-dim); font-style: normal; line-height: 1.8; transition: color 0.35s var(--ease); }
/* Los enlaces dentro de <address> heredan por `a { color: inherit }`, pero se
   les fija el color de forma explícita para que ninguna cascada los deje
   con el color por defecto del navegador (azul sobre negro = 1.7:1). */
.ftr address a {
  color: var(--bone-dim);
  text-decoration: underline;
  text-decoration-color: rgba(200, 168, 106, 0.55);
  text-underline-offset: 3px;
  transition: color 0.35s var(--ease);
}
.ftr__list a:hover,
.ftr address a:hover,
.ftr address a:focus-visible { color: var(--gold-lt); }

.ftr__bot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 1.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.72rem;
  color: var(--muted);
}
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ftr__bot a:hover { color: var(--gold); }

.newsletter { display: flex; border-bottom: 1px solid var(--bd); }
.newsletter:hover, .newsletter:focus-within { border-bottom-color: var(--gold-lt); }
.newsletter input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.8rem 0; color: var(--bone); font-size: 0.9rem; }
.newsletter button { flex: none; color: var(--gold); padding-inline: 0.9rem; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.35s var(--ease); }
.newsletter button:hover { color: var(--gold-lt); }

/* --- 19. CTA de cierre --------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(72px, 10vw, 150px);
  border-block: 1px solid var(--line);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 120% at 50% 120%, rgba(200,168,106,0.14), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }

/* --- 20. Marquesina discreta -------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  padding-block: 1.4rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex;
  gap: clamp(40px, 6vw, 90px);
  width: max-content;
  animation: slide 42s linear infinite;
}
.ticker span {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* --- 21. Revelado al scroll ---------------------------------------------
   El estado OCULTO vive detrás de `.js`, que sólo pone un script en línea
   dentro del <head>. Si ese script no corre, o si main.js falla, o si el
   IntersectionObserver nunca dispara, todo queda visible por defecto.
   Además hay un temporizador de rescate registrado en el mismo script en
   línea (no en main.js), de modo que ninguna excepción posterior lo puede
   cancelar.                                                              */
.rv {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js .rv { opacity: 0; transform: translateY(28px); }
.rv.is-in { opacity: 1; transform: none; }

.rv-d1 { transition-delay: 0.09s; }
.rv-d2 { transition-delay: 0.18s; }
.rv-d3 { transition-delay: 0.27s; }
.rv-d4 { transition-delay: 0.36s; }

.rv-mask { overflow: hidden; }
.rv-mask > * { transition: transform 1.05s var(--ease-io); }
.js .rv-mask > * { transform: translateY(102%); }
.rv-mask.is-in > * { transform: none; }

.rv-line { transform-origin: left; transition: transform 1.2s var(--ease-io); }
.js .rv-line { transform: scaleX(0); }
.rv-line.is-in { transform: scaleX(1); }

.rv-img { overflow: hidden; }
.rv-img img { transition: transform 1.6s var(--ease-io); }
.js .rv-img img { transform: scale(1.14); }
.rv-img.is-in img { transform: scale(1); }

/* --- 22. Utilidades ------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tc { text-align: center; }
.page-top { padding-top: calc(var(--hdr-h) + clamp(34px, 6vw, 86px)); }

/* Anclas: el encabezado es fijo, así que ningún destino queda debajo de él */
[id] { scroll-margin-top: calc(var(--hdr-h) + 24px); }

/* Sobre foto, los textos de apoyo se suben a --bone-dim: --muted podría
   caer por debajo de 4.5:1 según el píxel del hero que quede detrás. */
.hero .meta,
.hero .breadcrumb { color: var(--bone-dim); }
.hero .breadcrumb i { color: var(--gold-lt); opacity: 1; }

/* Bloques que rellena el script. Cada uno se muestra SÓLO cuando el script
   confirmó que terminó de rellenarlo (`ok-*` en <html>). Si data.js o main.js
   fallan por separado, en su lugar aparece el aviso con teléfono y correo:
   nunca un hueco vacío ni una ficha con guiones. */
.nojs-note {
  border: 1px solid var(--bd);
  background: var(--ink-2);
  padding: clamp(24px, 3vw, 40px);
}
#ficha { display: none; }
html.ok-ficha #ficha { display: block; }
html.ok-ficha  #aviso-ficha,
html.ok-listado #aviso-listado,
html.ok-destacadas #aviso-destacadas { display: none; }
.mt-s { margin-top: clamp(20px, 2.4vw, 32px); }
.mt-m { margin-top: clamp(30px, 4vw, 52px); }
.mt-l { margin-top: clamp(44px, 6vw, 80px); }
.gold { color: var(--gold-lt); }
.dim  { color: var(--bone-dim); }

.split-2 { display: grid; gap: clamp(34px, 5vw, 76px); align-items: center; }
@media (min-width: 900px) { .split-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.frame { position: relative; }
.frame::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(200, 168, 106, 0.35);
  pointer-events: none;
  z-index: 2;
}

.ratio-45 { aspect-ratio: 4 / 5; overflow: hidden; }
.ratio-32 { aspect-ratio: 3 / 2; overflow: hidden; }
.ratio-11 { aspect-ratio: 1 / 1; overflow: hidden; }
.ratio-45 img, .ratio-32 img, .ratio-11 img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb i { font-style: normal; color: var(--gold); opacity: 0.6; }

/* --- 23. Movimiento reducido -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-mask > *, .rv-line, .rv-img img,
  .hero__title .ln > span, .hero__meta, .finder, .hero__down {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__bg img { animation: none; transform: none; }
  .ticker__track { animation: none; }
  .card:hover .card__media img,
  .feature:hover .feature__media img { transform: none; }
}