@charset "utf-8";
/* ==========================================================================
   Jhovanny Realtor - hoja de estilo unica
   Orden: tokens > base > utilidades > componentes > secciones > responsive
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
/*
  La página es CLARA y las bandas oscuras son la excepción, no al revés.
  Todo oscuro escondía la jerarquía: las tarjetas no se despegaban del
  fondo, las secciones se fundían entre sí y las fotos de los inmuebles
  —que es lo que se vende— competían con el fondo en vez de destacar sobre
  él. Sobre blanco, la foto manda sola.

  Se quedan en oscuro tres sitios, a propósito: el hero (donde corre el
  video), la banda que capta propietarios y el pie. Sirven de respiro y de
  separador, y mantienen la identidad negro y oro del logo.

  Cómo funciona el cambio de contexto: los tokens de texto, línea, velo y
  superficie se REDECLARAN dentro de .franja-oscura, .hero--principal y
  .pie. Los componentes no saben en qué fondo están; leen los tokens y se
  adaptan solos. Por eso ninguna tarjeta, botón ni campo necesita variante.
*/
:root {
  color-scheme: light;

  /* Tinta. Se conserva completa: es la que visten las bandas oscuras. */
  --ink-950: oklch(0.125 0.007 70);
  --ink-900: oklch(0.155 0.008 70);
  --ink-850: oklch(0.185 0.009 70);
  --ink-800: oklch(0.215 0.010 70);
  --ink-750: oklch(0.255 0.011 70);

  /* Dorado de marca, tomado del logo del cliente. */
  --gold-300: oklch(0.905 0.085 92);
  --gold-400: oklch(0.855 0.115 90);
  --gold-500: oklch(0.800 0.130 85);
  --gold-600: oklch(0.700 0.125 78);
  --gold-700: oklch(0.560 0.105 72);
  /* Sobre blanco el dorado de marca no llega ni a 2:1. Para texto y para
     iconos sobre claro se usa este, que sí pasa. El de marca se reserva
     para rellenos, donde la letra va encima en oscuro. */
  --gold-texto: oklch(0.470 0.095 68);

  /* Superficies claras */
  --pagina: oklch(0.972 0.002 90);
  --sup: oklch(1 0 0);
  --sup-2: oklch(0.955 0.003 90);

  /* Texto sobre claro */
  --fg: oklch(0.215 0.012 75);
  --fg-soft: oklch(0.385 0.011 75);
  --fg-mut: oklch(0.505 0.010 75);
  --fg-dim: oklch(0.595 0.008 75);
  --on-gold: oklch(0.185 0.030 75);

  /* Velos de elevación. En claro son tinta; en las bandas oscuras se
     redeclaran a blanco y todo lo que los usa se invierte solo. */
  --velo-1: oklch(0.215 0.012 75 / 0.025);
  --velo-2: oklch(0.215 0.012 75 / 0.045);
  --velo-3: oklch(0.215 0.012 75 / 0.075);

  /* Lineas y sombras */
  --line: oklch(0.215 0.012 75 / 0.10);
  --line-2: oklch(0.215 0.012 75 / 0.18);
  --line-gold: oklch(0.700 0.125 78 / 0.42);
  --sh-1: 0 1px 2px oklch(0.215 0.012 75 / 0.06);
  --sh-2: 0 6px 20px -8px oklch(0.215 0.012 75 / 0.16);
  --sh-3: 0 22px 60px -22px oklch(0.215 0.012 75 / 0.26);
  --sh-gold: 0 8px 24px -14px oklch(0.700 0.125 78 / 0.42);

  --ok: oklch(0.52 0.14 155);
  --err: oklch(0.52 0.19 27);

  /* Tipografia */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala pensada primero para el telefono: en 390 px los titulares se
     quedan en 34-40 px, no en 50-60. El extremo alto solo lo alcanza el
     escritorio. */
  --t-display: clamp(2.15rem, 1.05rem + 4.6vw, 5.25rem);
  --t-h1: clamp(1.7rem, 1.15rem + 2.5vw, 3.6rem);
  --t-h2: clamp(1.42rem, 1.02rem + 1.85vw, 2.7rem);
  --t-h3: clamp(1.08rem, 0.98rem + 0.55vw, 1.5rem);
  --t-lead: clamp(0.95rem, 0.9rem + 0.3vw, 1.18rem);
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;

  /* Espaciado */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --pad-seccion: clamp(2.4rem, 6vw, 6.5rem);
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --ancho: 1280px;
  --ancho-texto: 62ch;

  /* Radios */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Movimiento. Nunca ease-in: las salidas se sienten pesadas. */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 140ms;
  --d-2: 200ms;
  --d-3: 280ms;

  /* Capas, por significado y no por numeros al azar */
  --z-fondo: 0;
  --z-contenido: 1;
  --z-pegado: 100;
  --z-barra-inferior: 180;
  --z-cabecera: 200;
  --z-flotante: 250;
  --z-menu: 300;
  --z-modal: 400;
  --z-visor: 450;
  --z-aviso: 500;

  /* Alturas de las barras fijas */
  --h-cabecera: 68px;
  --h-barra-inferior: calc(58px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  :root { --h-cabecera: 82px; }
}

/* ----------------------------------------------------------------- 2. base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-cabecera) + 16px);
}

body {
  margin: 0;
  background: var(--pagina);
  color: var(--fg);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.sin-scroll { overflow: hidden; }

/* El [hidden] del navegador viene de su hoja de estilo: cualquier clase de
   autor con display lo pisa. Como el catalogo oculta y muestra fichas con
   este atributo, aqui manda el atributo. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

h3, h4 { font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24; line-height: 1.18; }

p { margin: 0; text-wrap: pretty; }
img, video, svg { display: block; max-width: 100%; }

/* Un <svg> sin width ni height mide 300 × 150 y dentro de un flex se estira.
   Los iconos se dibujan sin atributos de tamaño, así que el tamaño base va
   aquí y cada contexto lo pisa con el suyo. */
svg { width: 20px; height: 20px; flex: none; }
img, video { height: auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold-500); color: var(--on-gold); }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Barra de desplazamiento discreta, solo donde el navegador la soporta */
* { scrollbar-width: thin; scrollbar-color: var(--ink-750) transparent; }

/* Los hijos de grid y flex no bajan de su ancho de contenido salvo que se les
   diga. Sin esto, cualquier carrusel horizontal empuja el ancho de la pagina
   y aparece scroll lateral en movil. */
.buscador__caja > *, .buscador__fila > *,
.grupo-fichas, .fichas,
.galeria, .galeria__miniaturas,
.ficha-cuerpo > *, .contacto > *, .captacion > *, .razones > *,
.pie__interior > *, .carrusel, .carrusel__pista, .visor__pie,
.tarjeta__cuerpo, .tarjeta__datos, .servicio, .razon > * {
  min-width: 0;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-aviso);
  transform: translateY(-160%);
  background: var(--gold-500); color: var(--on-gold);
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600;
  transition: transform var(--d-2) var(--e-out);
}
.saltar:focus { transform: translateY(0); }

/* ------------------------------------------------------------ 3. utilidades */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: var(--pad-seccion); }
.seccion--ajustada { padding-block: clamp(1.9rem, 4.5vw, 4.25rem); }
/* Va justo debajo de la cabecera de pagina: no necesita aire arriba. */
.seccion--pegada { padding-top: clamp(1.1rem, 2.5vw, 2.25rem); }

.borde-arriba { border-top: 1px solid var(--line); }

/* Cada seccion tiene que sentirse distinta de la anterior. Un realce muy
   contenido (tinte + hilos) basta para romper la sensacion de bloque unico
   sin llenar la pagina de cajas. */
.seccion--realce {
  position: relative;
  background: var(--sup-2);
  border-block: 1px solid var(--line);
}

/* Banda oscura. Aquí se redeclaran los tokens y todo lo de dentro se
   invierte solo: no hace falta una variante por componente. */
.franja-oscura,
.hero--principal,
.pie {
  color-scheme: dark;
  color: var(--fg);
  --sup: var(--ink-900);
  --sup-2: var(--ink-850);
  --fg: oklch(0.975 0.004 85);
  --fg-soft: oklch(0.845 0.008 85);
  --fg-mut: oklch(0.735 0.010 85);
  --fg-dim: oklch(0.625 0.010 85);
  --gold-texto: var(--gold-400);
  --velo-1: var(--velo-1);
  --velo-2: var(--velo-3);
  --velo-3: oklch(1 0 0 / 0.10);
  --line: oklch(1 0 0 / 0.10);
  --line-2: oklch(1 0 0 / 0.18);
  --line-gold: oklch(0.800 0.130 85 / 0.32);
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --sh-2: 0 6px 20px -6px oklch(0 0 0 / 0.55);
  --sh-3: 0 22px 60px -18px oklch(0 0 0 / 0.75);
}

.franja-oscura {
  position: relative;
  color: var(--fg);
  background:
    radial-gradient(90% 120% at 88% 0%, oklch(0.800 0.130 85 / 0.10), transparent 62%),
    var(--ink-950);
}

/* Banda clara de apoyo, para separar sin oscurecer. */
.franja-suave { background: var(--sup-2); border-block: 1px solid var(--line); }
.seccion--realce + .seccion.borde-arriba { border-top: 0; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-texto);
}
.etiqueta::before {
  content: ''; width: 26px; height: 1px; background: var(--gold-600); opacity: 0.8;
}

.encabezado-seccion { margin-bottom: clamp(1.35rem, 3.2vw, 3rem); }
.encabezado-seccion h1 { font-size: var(--t-h1); margin-top: var(--s-3); }
.encabezado-seccion h2 { font-size: var(--t-h2); margin-top: var(--s-3); }
.encabezado-seccion p {
  margin-top: var(--s-3); color: var(--fg-mut);
  font-size: var(--t-lead); max-width: 52ch;
}
/* En movil la entradilla de una seccion casi nunca aporta lo que ocupa. Se
   recorta a tres lineas; la del hero no, porque ahi es la promesa de la
   pagina y cortarla a media frase queda mal. */
@media (max-width: 719px) {
  .seccion .encabezado-seccion p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

.encabezado-seccion--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }

.texto-mut { color: var(--fg-mut); }
.num { font-variant-numeric: tabular-nums; }

/* Aparicion al hacer scroll */
.revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
  transition-delay: var(--retardo, 0ms);
}
.revela.visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------- 4. componentes */

/* 4.1 botones ------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-borde: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px;
  padding: 0.78rem 1.35rem;
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.005em;
  text-align: center;
  transition: transform var(--d-1) var(--e-out), background-color var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primario {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--on-gold);
  --btn-borde: var(--gold-500);
  box-shadow: var(--sh-gold);
  font-weight: 700;
}
.btn--secundario { --btn-bg: var(--velo-2); }
.btn--fantasma { --btn-borde: transparent; --btn-fg: var(--fg-soft); padding-inline: 0.9rem; }
.btn--claro { --btn-bg: oklch(1 0 0 / 0.1); --btn-borde: oklch(1 0 0 / 0.28); backdrop-filter: blur(10px); }
.btn--ancho { width: 100%; }
.btn--pequeno { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--t-xs); }

@media (hover: hover) {
  .btn--primario:hover { --btn-bg: var(--gold-400); --btn-borde: var(--gold-400); }
  .btn--secundario:hover, .btn--claro:hover { --btn-bg: oklch(1 0 0 / 0.13); --btn-borde: var(--line-gold); }
  .btn--fantasma:hover { --btn-fg: var(--fg); --btn-bg: var(--velo-3); }
}

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

.btn-icono {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  color: var(--fg-soft);
  transition: transform var(--d-1) var(--e-out), background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.btn-icono svg { width: 19px; height: 19px; }
.btn-icono:active { transform: scale(0.94); }
@media (hover: hover) { .btn-icono:hover { background: var(--velo-3); color: var(--fg); } }

/* 4.2 enlaces de texto ---------------------------------------------------- */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 40px; /* deja el enlace por encima del minimo tactil */
  color: var(--gold-texto); font-weight: 600; font-size: var(--t-sm);
  transition: color var(--d-2) var(--e-out);
}
.enlace-flecha svg { width: 16px; height: 16px; transition: transform var(--d-2) var(--e-out); }
@media (hover: hover) {
  .enlace-flecha:hover { color: var(--gold-texto); }
  .enlace-flecha:hover svg { transform: translateX(3px); }
}

/* 4.3 distintivos --------------------------------------------------------- */
.distintivo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.34rem 0.7rem;
  border-radius: var(--r-full);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: oklch(0.155 0.008 70 / 0.82);
  color: var(--fg);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
}
.distintivo--oro { background: var(--gold-500); color: var(--on-gold); border-color: var(--gold-texto); }
.distintivo--linea { background: oklch(0.125 0.007 70 / 0.72); color: var(--gold-300); border-color: var(--line-gold); }
.distintivo--estado { background: oklch(0.125 0.007 70 / 0.86); color: var(--fg-mut); }

/* 4.4 campos de formulario ------------------------------------------------ */
.campo { display: flex; flex-direction: column; gap: 0.45rem; }
.campo > label, .leyenda {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-mut);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  background: var(--velo-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: 1rem; /* 16px evita el zoom automatico de iOS */
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.campo textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdb4a4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px;
  padding-right: 2.6rem;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--fg-dim); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--gold-texto); background: var(--velo-3); outline: none;
}
.campo[data-error='1'] input, .campo[data-error='1'] select, .campo[data-error='1'] textarea { border-color: var(--err); }
.campo-error { font-size: var(--t-xs); color: var(--err); min-height: 1em; }
.campo-pista { font-size: var(--t-xs); color: var(--fg-dim); }

.casilla { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--fg-mut); }
.casilla input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--gold-texto); }
.casilla a { color: var(--gold-texto); text-decoration: underline; text-underline-offset: 3px; }

.rejilla-campos { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* 4.5 fichas de propiedad ------------------------------------------------- */
.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--sup);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.tarjeta__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-850);
}
.tarjeta__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 260ms var(--e-out);
}
.tarjeta__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0.125 0.007 70 / 0.72) 0%, oklch(0.125 0.007 70 / 0.12) 42%, transparent 72%);
  pointer-events: none;
}
.tarjeta__marcas { position: absolute; top: 0.8rem; left: 0.8rem; display: flex; gap: 0.4rem; flex-wrap: wrap; max-width: calc(100% - 4.2rem); }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1; }
.tarjeta__lugar {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mut);
}
.tarjeta__lugar svg { width: 14px; height: 14px; color: var(--gold-texto); flex: none; }
.tarjeta__titulo { font-size: 1.32rem; }
.tarjeta__titulo a::after { content: ''; position: absolute; inset: 0; } /* toda la ficha es el enlace */
.tarjeta__datos {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  font-size: var(--t-sm); color: var(--fg-soft);
}
.tarjeta__datos li { display: inline-flex; align-items: center; gap: 0.4rem; }
.tarjeta__datos svg { width: 16px; height: 16px; color: var(--gold-texto); }
.tarjeta__pie {
  margin-top: auto; padding-top: 0.9rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  border-top: 1px solid var(--line);
}
.tarjeta__precio { font-family: var(--f-display); font-size: 1.35rem; font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0; font-variant-numeric: tabular-nums; }
.tarjeta__precio small { display: block; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mut); }
.tarjeta__precio--consultar { font-size: 1.05rem; color: var(--gold-texto); }

.favorito {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: oklch(0.125 0.007 70 / 0.6);
  border: 1px solid var(--line-2);
  color: var(--fg);
  backdrop-filter: blur(10px);
  transition: transform var(--d-1) var(--e-out), background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.favorito svg { width: 20px; height: 20px; }
.favorito svg path { transition: fill var(--d-2) var(--e-out); }
.favorito:active { transform: scale(0.9); }
.favorito[aria-pressed='true'] { color: var(--gold-400); }
.favorito[aria-pressed='true'] svg path { fill: currentColor; }
.favorito.late { animation: latido 320ms var(--e-out); }
@keyframes latido { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-4px); border-color: var(--line-gold); box-shadow: var(--sh-3); }
  .tarjeta:hover .tarjeta__media img { transform: scale(1.045); }
  .favorito:hover { background: oklch(0.125 0.007 70 / 0.85); }
}

/* Ficha compacta de telefono: dos por fila, sin texto de relleno. */
@media (max-width: 719px) {
  .tarjeta { border-radius: var(--r-md); }
  .tarjeta__cuerpo { padding: 0.75rem 0.8rem 0.9rem; gap: 0.4rem; }
  .tarjeta__titulo { font-size: 1rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tarjeta__lugar { font-size: 0.65rem; letter-spacing: 0.06em; }
  .tarjeta__datos { font-size: 0.78rem; gap: 0.2rem 0.6rem; }
  .tarjeta__datos svg { width: 14px; height: 14px; }
  .tarjeta__pie { padding-top: 0.6rem; gap: 0.4rem; }
  .tarjeta__precio { font-size: 1.02rem; }
  .tarjeta__precio--consultar { font-size: 0.82rem; }
  .tarjeta__pie .enlace-flecha { display: none; }
  .tarjeta__marcas { top: 0.5rem; left: 0.5rem; gap: 0.25rem; max-width: calc(100% - 3.4rem); }
  .distintivo { padding: 0.24rem 0.5rem; font-size: 0.62rem; letter-spacing: 0.05em; }
  .favorito { width: 38px; height: 38px; top: 0.45rem; right: 0.45rem; }
  .favorito svg { width: 18px; height: 18px; }
  /* En el carril la ficha respira mas: es la vitrina del inicio */
  .rejilla-props--carril .tarjeta__titulo { font-size: 1.08rem; }
  .rejilla-props--carril .tarjeta__cuerpo { padding: 0.9rem 1rem 1.05rem; }
}
.tarjeta:has(a:focus-visible) { border-color: var(--gold-texto); }
@media (hover: none) { .tarjeta:active { transform: scale(0.988); } }

/* 4.6 rejilla del catalogo ------------------------------------------------ */
.rejilla-props {
  display: grid;
  gap: clamp(0.7rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* En el telefono el catalogo va a dos columnas: se ven cuatro propiedades por
   pantalla en vez de una, y se recorre igual de rapido que una app. */
@media (min-width: 360px) and (max-width: 719px) {
  .rejilla-props { grid-template-columns: 1fr 1fr; }
}

/**
 * Carril: en movil, en vez de apilar, las fichas se deslizan en horizontal.
 * Se usa en las destacadas del inicio y en "otras propiedades" de la ficha.
 */
@media (max-width: 719px) {
  .rejilla-props--carril {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* sangra hasta el borde de la pantalla para que se note que hay mas */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 2px 0.5rem;
  }
  .rejilla-props--carril::-webkit-scrollbar { display: none; }
  .rejilla-props--carril > * { flex: 0 0 76%; scroll-snap-align: start; }
  .rejilla-props--carril > .tarjeta--invitacion { flex-basis: 68%; }
}

/* Ficha de invitacion: cierra la fila cuando hay pocas propiedades, sin
   fingir inventario que no existe. */
.tarjeta--invitacion {
  justify-content: center; align-items: center; text-align: center; gap: 0.85rem;
  min-height: 320px; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, var(--velo-1), transparent);
  border-style: dashed; border-color: var(--line-2);
}
.tarjeta--invitacion__icono {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-full); border: 1px solid var(--line-gold); color: var(--gold-texto);
}
.tarjeta--invitacion__icono svg { width: 22px; height: 22px; }
.tarjeta--invitacion h3 { font-size: 1.25rem; }
.tarjeta--invitacion p { font-size: var(--t-sm); color: var(--fg-mut); max-width: 30ch; }
@media (hover: hover) { .tarjeta--invitacion:hover { transform: none; box-shadow: none; } }

/* Con una sola propiedad visible, la invitacion ocupa el resto de la fila.
   No se estira a lo alto (align-self: center): una caja de 470 px con cuatro
   elementos dentro se veria hueca. */
@media (min-width: 900px) {
  .tarjeta--invitacion--ancha {
    grid-column: span 2;
    align-self: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'icono titulo boton' 'icono texto boton';
    align-items: center;
    column-gap: var(--s-5);
    row-gap: 0.3rem;
    min-height: 0;
    padding: 1.5rem 1.75rem;
    text-align: left;
  }
  .tarjeta--invitacion--ancha .tarjeta--invitacion__icono { grid-area: icono; }
  .tarjeta--invitacion--ancha h3 { grid-area: titulo; align-self: end; }
  .tarjeta--invitacion--ancha p { grid-area: texto; align-self: start; max-width: 56ch; }
  .tarjeta--invitacion--ancha .btn { grid-area: boton; }
}

/* 4.7 estado vacio -------------------------------------------------------- */
.vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-5);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--s-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--velo-1), transparent);
}
.vacio__icono {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-full); border: 1px solid var(--line-gold); color: var(--gold-texto);
}
.vacio__icono svg { width: 24px; height: 24px; }
.vacio h2, .vacio h3 { font-size: var(--t-h3); }
.vacio p { color: var(--fg-mut); max-width: 46ch; }
.vacio__acciones { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

/* 4.8 esqueletos de carga ------------------------------------------------- */
.esqueleto {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--sup);
}
.esqueleto__bloque {
  background: linear-gradient(100deg, var(--ink-850) 30%, var(--ink-800) 50%, var(--ink-850) 70%);
  background-size: 220% 100%;
  animation: brillo 1.25s linear infinite;
}
.esqueleto__media { aspect-ratio: 4 / 3; }
.esqueleto__cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: grid; gap: 0.7rem; }
.esqueleto__linea { height: 12px; border-radius: var(--r-xs); }
@keyframes brillo { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* 4.9 aviso flotante ------------------------------------------------------ */
.aviso {
  position: fixed; z-index: var(--z-aviso);
  left: 50%; bottom: calc(var(--h-barra-inferior) + 1rem);
  transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.15rem;
  background: var(--ink-800); color: var(--fg);
  border: 1px solid var(--line-gold); border-radius: var(--r-full);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm); font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
  max-width: calc(100vw - 2rem);
}
.aviso svg { width: 18px; height: 18px; color: var(--gold-texto); flex: none; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .aviso { bottom: 1.5rem; } }

/* --------------------------------------------------------- 5. cabecera/nav */
.cabecera {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-cabecera);
  height: var(--h-cabecera);
  display: flex; align-items: center;
  transition: background-color var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out), backdrop-filter var(--d-3) var(--e-out);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
}
/* La cabecera solo va en claro sobre el video de la PORTADA. En las
   páginas interiores el encabezado ya es claro, así que ahí la cabecera se
   comporta como el resto de la página: letra oscura y nada de velo. Sin
   esta distinción el menú quedaba gris sobre gris en todo el sitio menos
   en la portada. */
body:has(.hero--principal) .cabecera:not([data-fija='1']) {
  color-scheme: dark;
  --fg: oklch(0.975 0.004 85);
  --fg-soft: oklch(0.845 0.008 85);
  --fg-mut: oklch(0.735 0.010 85);
  --velo-3: oklch(1 0 0 / 0.10);
  color: var(--fg);
}
body:has(.hero--principal) .cabecera:not([data-fija='1'])::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, oklch(0.125 0.007 70 / 0.72), transparent);
}
/* En interior, la cabecera se apoya desde el primer píxel. */
body:not(:has(.hero--principal)) .cabecera {
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
}
body:not(:has(.hero--principal)) .cabecera .marca__bajada,
body:not(:has(.hero--principal)) .cabecera .nav-escritorio a[aria-current='page'] { color: var(--gold-texto); }
/* Al bajar se asienta sobre la página: superficie clara y letra oscura. */
.cabecera[data-fija='1'] {
  color-scheme: light;
  --fg: oklch(0.215 0.012 75);
  --fg-soft: oklch(0.385 0.011 75);
  --fg-mut: oklch(0.505 0.010 75);
  --velo-3: oklch(0.215 0.012 75 / 0.075);
  color: var(--fg);
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}
.cabecera[data-fija='1'] .marca__bajada,
.cabecera[data-fija='1'] .nav-escritorio a[aria-current='page'] { color: var(--gold-texto); }
.cabecera[data-fija='1']::before { opacity: 0; }

.cabecera__interior { display: flex; align-items: center; gap: var(--s-6); width: 100%; }

.marca { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.marca img { width: 38px; height: 38px; object-fit: contain; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre { font-family: var(--f-display); font-size: 1.06rem; font-variation-settings: 'opsz' 20, 'SOFT' 0, 'WONK' 0; letter-spacing: 0.01em; }
.marca__bajada { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-texto); }

.nav-escritorio { display: none; }
.nav-escritorio ul { display: flex; align-items: center; gap: 0.35rem; }
.nav-escritorio a {
  display: block; padding: 0.55rem 0.85rem; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 500; color: var(--fg-soft);
  transition: color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
@media (hover: hover) { .nav-escritorio a:hover { color: var(--fg); background: var(--velo-3); } }
.nav-escritorio a[aria-current='page'] { color: var(--gold-texto); }

.cabecera__acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.contador-fav {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--gold-500); color: var(--on-gold);
  border-radius: var(--r-full);
  font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.con-contador { position: relative; }
.contador-fav[hidden] { display: none; }

.abrir-menu { display: inline-grid; }

/* Menu movil */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--ink-950);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-3) var(--e-out), visibility var(--d-3);
}
.menu[data-abierto='1'] { opacity: 1; visibility: visible; }
.menu__cabecera { display: flex; align-items: center; justify-content: space-between; height: var(--h-cabecera); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.menu__cuerpo { overflow-y: auto; padding: var(--s-6) var(--gutter); }
.menu__lista { display: grid; gap: 0.15rem; }
.menu__lista a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.95rem 0.25rem;
  font-family: var(--f-display); font-size: 1.65rem;
  font-variation-settings: 'opsz' 32, 'SOFT' 0, 'WONK' 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
}
.menu__lista a svg { width: 18px; height: 18px; color: var(--gold-texto); }
.menu[data-abierto='1'] .menu__lista a { animation: entra-menu 260ms var(--e-out) forwards; animation-delay: var(--retardo, 0ms); }
@keyframes entra-menu { to { opacity: 1; transform: none; } }
.menu__pie { padding: var(--s-5) var(--gutter) var(--s-8); border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.menu__redes { display: flex; gap: 0.6rem; }

/* Barra inferior movil */
.barra-inferior {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-barra-inferior);
  height: var(--h-barra-inferior);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: oklch(0.125 0.007 70 / 0.93);
  backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line);
}
.barra-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--fg-dim);
  transition: color var(--d-2) var(--e-out);
}
.barra-inferior svg { width: 21px; height: 21px; }
.barra-inferior a[aria-current='page'] { color: var(--gold-texto); }
.barra-inferior a:active { color: var(--gold-texto); }

/* Boton flotante de WhatsApp (solo escritorio: en movil ya esta en la barra) */
.flotante-wa {
  position: fixed; z-index: var(--z-flotante);
  right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  display: none; align-items: center; gap: 0.6rem;
  height: 56px; padding: 0 1.25rem 0 1.05rem;
  background: var(--ink-800); color: var(--fg);
  border: 1px solid var(--line-gold); border-radius: var(--r-full);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm); font-weight: 600;
  transition: transform var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.flotante-wa svg { width: 22px; height: 22px; color: var(--gold-texto); }
.flotante-wa:active { transform: scale(0.96); }
@media (hover: hover) { .flotante-wa:hover { background: var(--ink-750); transform: translateY(-2px); } }

/* ----------------------------------------------------------------- 6. hero */
.hero {
  position: relative;
  /* En un movil apaisado la ventana mide menos de 400 px de alto: un minimo
     fijo dejaria los botones fuera de pantalla. */
  min-height: min(620px, 100svh);
  height: 82svh;
  max-height: 1080px;
  display: grid;
  isolation: isolate;
  overflow: hidden;
}
.hero--interior {
  height: auto; min-height: 0; max-height: none;
  padding-top: calc(var(--h-cabecera) + clamp(1.6rem, 3.4vw, 2.75rem));
  padding-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  background: var(--sup-2);
  border-bottom: 1px solid var(--line);
}
/* Encabezado corto: el formulario de publicar tiene que verse enseguida. */
.hero--compacto { padding-bottom: clamp(0.9rem, 2vw, 1.4rem); }

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink-950); }
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}
/* El fundido del bucle: el video baja a 0 justo antes de terminar y deja ver
   el poster, que es un fotograma del arranque. Al reiniciarse vuelve a subir.
   Asi el salto del bucle no se ve y el mp4 se descarga una sola vez. */
.hero__video { opacity: 0; transition: opacity 550ms var(--e-out); }
.hero__video.activo { opacity: 1; }

/* Dos capas: una mancha suave detras del bloque de texto (para que el titular
   se lea sobre el cielo sin oscurecer toda la escena) y un degradado general
   que apoya cabecera y pie. Medido con el video en marcha: el subtitulo pasaba
   de 2.9:1 sin la mancha. */
/* En vertical el texto va sobre el cielo, que es la parte mas clara del video.
   Un degradado continuo de arriba a abajo se lee como un viraje de cine y
   deja el mar, la casa y la roca a plena luz; una mancha localizada se notaba
   como un borron. Medido con el video en marcha: el subtitulo pasaba de
   2.9:1 a 5.4:1 en el peor pixel. */
.hero__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    oklch(0.125 0.007 70 / 0.9) 0%,
    oklch(0.125 0.007 70 / 0.76) 30%,
    oklch(0.125 0.007 70 / 0.5) 50%,
    oklch(0.125 0.007 70 / 0.12) 64%,
    oklch(0.125 0.007 70 / 0.5) 83%,
    oklch(0.125 0.007 70 / 0.92) 100%);
}

.hero__contenido {
  position: relative; z-index: var(--z-contenido);
  width: 100%; max-width: var(--ancho); margin-inline: auto;
  padding: calc(var(--h-cabecera) + clamp(1.5rem, 5vh, 3rem)) var(--gutter) clamp(5rem, 12vh, 7rem);
  display: flex; flex-direction: column;
  align-self: start;
}
.hero__titulo {
  font-size: var(--t-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 400;
  letter-spacing: -0.026em;
  max-width: 15ch;
  text-shadow: 0 2px 24px oklch(0 0 0 / 0.45);
}
.hero__titulo em { font-style: italic; color: var(--gold-300); }
.hero__bajada {
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: var(--t-lead);
  color: var(--fg);
  max-width: 42ch;
  text-shadow: 0 2px 16px oklch(0 0 0 / 0.7);
}
.hero__acciones { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero__acciones .btn { flex: 1 1 auto; min-width: 168px; }

.hero__pie {
  position: absolute; z-index: var(--z-contenido);
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--h-barra-inferior) + 0.9rem);
  width: 100%; max-width: var(--ancho);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.hero__pie > * { text-shadow: 0 1px 10px oklch(0 0 0 / 0.65); }
.hero__zona { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); }
.hero__zona svg { width: 14px; height: 14px; color: var(--gold-texto); }
.hero__baja { display: none; color: var(--fg-soft); }
.hero__baja svg { width: 16px; height: 16px; animation: baja 1.9s var(--e-io) infinite; }
@keyframes baja { 0%, 100% { transform: translateY(0); opacity: 0.65; } 50% { transform: translateY(5px); opacity: 1; } }

/* Cabecera de pagina interior: en escritorio, titular a la izquierda y un
   bloque util a la derecha para que la pantalla ancha no quede vacia. */
.hero-interior__rejilla { display: grid; gap: clamp(1.75rem, 4vw, 3rem); margin-top: var(--s-5); }
@media (min-width: 900px) {
  .hero-interior__rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); align-items: center; }
  .hero-interior__rejilla--simple { grid-template-columns: minmax(0, 1fr); max-width: 46ch; }
}

.panel-ayuda {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  border: 1px solid var(--line-gold); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 130% at 90% 0%, oklch(0.800 0.130 85 / 0.12), transparent 60%),
    var(--ink-900);
}
.panel-ayuda__icono {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-full); border: 1px solid var(--line-gold); color: var(--gold-texto);
}
.panel-ayuda__icono svg { width: 20px; height: 20px; }
.panel-ayuda h2 { font-size: 1.35rem; }
.panel-ayuda p { font-size: var(--t-sm); color: var(--fg-mut); }
.panel-ayuda .btn { margin-top: var(--s-2); }
@media (max-width: 899px) { .panel-ayuda--secundario { display: none; } }

.rejilla-props--separada { margin-top: clamp(2rem, 4vw, 3rem); }

/* Pasos numerados de la pagina de propietarios */
.pasos { display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: paso; }
.paso {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--velo-1), transparent);
}
.paso__num { font-family: var(--f-display); font-size: 0.95rem; color: var(--gold-texto); font-variant-numeric: tabular-nums; }
.paso h3 { font-size: 1.15rem; }
.paso p { font-size: var(--t-sm); color: var(--fg-mut); }

/* --------------------------------------------------- 7. buscador y filtros */
.buscador { position: relative; z-index: var(--z-pegado); }
.buscador__caja {
  background: var(--sup);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  display: grid; gap: var(--s-5);
}
.buscador__fila { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.buscador__entrada { position: relative; display: flex; align-items: center; }
.buscador__entrada svg.lupa { position: absolute; left: 1.05rem; width: 20px; height: 20px; color: var(--gold-texto); pointer-events: none; }
.buscador__entrada input {
  width: 100%; min-height: 56px;
  padding: 0.9rem 3rem 0.9rem 3.1rem;
  background: var(--velo-2);
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  font-size: 1rem;
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.buscador__entrada input:focus { border-color: var(--gold-texto); background: var(--velo-3); outline: none; }
.buscador__entrada input::placeholder { color: var(--fg-dim); }
.buscador__limpiar {
  position: absolute; right: 0.65rem;
  width: 34px; height: 34px; display: none; place-items: center;
  border-radius: var(--r-full); color: var(--fg-mut);
  transition: color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.buscador__limpiar svg { width: 16px; height: 16px; }
.buscador__limpiar.visible { display: grid; }
@media (hover: hover) { .buscador__limpiar:hover { color: var(--fg); background: var(--velo-3); } }

.grupo-fichas { display: flex; flex-direction: column; gap: 0.6rem; }
.grupo-fichas__titulo { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-mut); }
.fichas {
  display: flex; gap: 0.5rem; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--s-1) * -1); padding: 2px var(--s-1);
  scroll-snap-type: x proximity;
}
.fichas::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .fichas { flex-wrap: wrap; overflow: visible; } }

.ficha {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 42px; padding: 0.5rem 1.05rem;
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  background: var(--velo-1);
  font-size: var(--t-sm); font-weight: 500; color: var(--fg-soft);
  white-space: nowrap;
  transition: transform var(--d-1) var(--e-out), background-color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.ficha:active { transform: scale(0.96); }
.ficha[aria-pressed='true'] { background: var(--gold-500); border-color: var(--gold-texto); color: var(--on-gold); font-weight: 700; }
.ficha__num { font-size: 0.72rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

select.ficha {
  appearance: none;
  min-width: 180px;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdb4a4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px;
}

.fila-acciones { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fila-acciones > * { flex: 1 1 auto; }
@media (hover: hover) { .ficha:not([aria-pressed='true']):hover { border-color: var(--line-gold); color: var(--fg); background: var(--velo-3); } }

.buscador__avanzado { display: grid; gap: var(--s-4); }
.buscador__avanzado[hidden] { display: none; }

.buscador__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.contador-resultados { font-size: var(--t-sm); color: var(--fg-mut); }
.contador-resultados strong { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 8. servicios */
.rejilla-servicios { display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
/* Cinco servicios en dos filas parejas (3 + 2) en vez de dejar uno huerfano. */
@media (min-width: 1180px) {
  .rejilla-servicios { grid-template-columns: repeat(6, 1fr); }
  .servicio { grid-column: span 2; }
  .servicio:nth-child(4) { grid-column: 1 / span 3; }
  .servicio:nth-child(5) { grid-column: 4 / span 3; }
}
.servicio {
  position: relative;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, var(--velo-2), transparent);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.servicio__icono {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line-gold);
  background: oklch(0.800 0.130 85 / 0.08);
  color: var(--gold-texto);
}
.servicio__icono svg { width: 22px; height: 22px; }
.servicio h3 { font-size: var(--t-h3); }
.servicio p { color: var(--fg-mut); font-size: var(--t-sm); flex: 1; }
.servicio .enlace-flecha::after { content: ''; position: absolute; inset: 0; }
@media (hover: hover) { .servicio:hover { transform: translateY(-3px); border-color: var(--line-gold); } }

/* ------------------------------------------------------------- 9. razones */
.razones { display: grid; gap: clamp(1.1rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .razones { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.razones__lista { display: grid; }

/* En movil cada razon es un desplegable: se ven los cuatro titulares de un
   vistazo y el texto solo aparece si interesa. En escritorio el JS los deja
   abiertos y se comportan como la lista de siempre. */
.razon { border-top: 1px solid var(--line); }
.razon:last-child { border-bottom: 1px solid var(--line); }
.razon__cabeza {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 52px; padding-block: 0.6rem;
  cursor: pointer; list-style: none;
}
.razon__cabeza::-webkit-details-marker { display: none; }
.razon__num { font-family: var(--f-display); font-size: 0.9rem; color: var(--gold-texto); font-variant-numeric: tabular-nums; flex: none; }
.razon h3 { font-size: 1.06rem; flex: 1; }
.razon__chevron { flex: none; color: var(--fg-dim); transition: transform var(--d-2) var(--e-out), color var(--d-2) var(--e-out); }
.razon__chevron svg { width: 17px; height: 17px; }
.razon[open] .razon__chevron { transform: rotate(180deg); color: var(--gold-texto); }
.razon__texto {
  padding: 0 0 var(--s-4) calc(0.9rem + var(--s-4));
  color: var(--fg-mut); font-size: var(--t-sm);
  animation: abrir-razon 220ms var(--e-out);
}
@keyframes abrir-razon { from { opacity: 0; transform: translateY(-5px); } }
@media (hover: hover) { .razon__cabeza:hover h3 { color: var(--gold-texto); } }
.razon__cabeza h3 { transition: color var(--d-2) var(--e-out); }

@media (min-width: 900px) {
  .razon__cabeza { cursor: default; pointer-events: none; padding-block: var(--s-4) 0.2rem; min-height: 0; }
  .razon__chevron { display: none; }
  .razon h3 { font-size: 1.2rem; }
  .razon__texto { padding-bottom: var(--s-5); animation: none; }
}

/* --------------------------------------------------------- 10. captacion */
.captacion {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-gold); border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 88% 6%, oklch(0.800 0.130 85 / 0.14), transparent 58%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  padding: clamp(1.6rem, 4vw, 3.25rem);
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 940px) { .captacion { grid-template-columns: 0.95fr 1.05fr; align-items: center; } }
.captacion h2 { font-size: var(--t-h2); }
.captacion__texto p { color: var(--fg-mut); margin-top: var(--s-4); max-width: 46ch; }
.captacion__puntos { display: grid; gap: 0.7rem; margin-top: var(--s-6); }
.captacion__puntos li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--t-sm); color: var(--fg-soft); }
.captacion__puntos svg { width: 18px; height: 18px; color: var(--gold-texto); flex: none; margin-top: 3px; }
/**
 * Banda de captacion: la version corta que va en el inicio, el catalogo y la
 * ficha. El formulario completo vive solo en /vender/, que es su pagina.
 * Antes el formulario entero se repetia en todas y costaba 1.800 px de scroll
 * en cada una.
 */
.banda-captacion {
  display: grid; gap: var(--s-5);
  padding: clamp(1.35rem, 3.2vw, 2.5rem);
  border: 1px solid var(--line-gold); border-radius: var(--r-xl);
  background:
    radial-gradient(110% 130% at 92% 4%, oklch(0.800 0.130 85 / 0.14), transparent 60%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
}
.banda-captacion h2 { font-size: var(--t-h2); margin-top: var(--s-3); }
.banda-captacion p { margin-top: var(--s-3); color: var(--fg-mut); font-size: var(--t-sm); max-width: 44ch; }
.banda-captacion__acciones { display: grid; gap: 0.6rem; align-content: center; }
.banda-captacion__acciones .btn { width: 100%; }
@media (min-width: 760px) {
  .banda-captacion { grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
  .banda-captacion__acciones { justify-items: stretch; }
}

/**
 * Contacto corto de las paginas secundarias. Deliberadamente sobrio: va justo
 * debajo de la banda dorada de propietarios y dos tarjetas iguales seguidas
 * se leerian como una sola cosa repetida.
 */
.banda-contacto {
  display: grid; gap: var(--s-4);
  padding: clamp(1.05rem, 2.6vw, 1.75rem) clamp(1.05rem, 2.6vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--velo-1), transparent);
}
.banda-contacto h2 { font-size: clamp(1.22rem, 1.02rem + 0.9vw, 1.7rem); margin-top: 0.5rem; }
.banda-contacto__acciones { display: grid; gap: 0.55rem; }
.banda-contacto__acciones .btn { width: 100%; }
.banda-contacto__zona {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mut);
}
.banda-contacto__zona svg { width: 14px; height: 14px; color: var(--gold-texto); flex: none; }
@media (min-width: 700px) {
  .banda-contacto { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1.5rem, 4vw, 3rem); }
  .banda-contacto__acciones { grid-auto-flow: column; }
  .banda-contacto__acciones .btn { width: auto; }
  .banda-contacto__zona { grid-column: 1 / -1; }
}

.formulario { display: grid; gap: var(--s-4); }
.formulario__estado { font-size: var(--t-sm); min-height: 1.2em; }
.formulario__estado[data-tipo='ok'] { color: var(--ok); }
.formulario__estado[data-tipo='error'] { color: var(--err); }

/* ------------------------------------------------------- 11. testimonios */
.carrusel { position: relative; }
.carrusel__pista {
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--s-2);
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.testimonio {
  flex: 0 0 min(100%, 420px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--sup); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.testimonio__estrellas { display: flex; gap: 2px; color: var(--gold-texto); }
.testimonio__estrellas svg { width: 16px; height: 16px; }
.testimonio blockquote { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.45; font-variation-settings: 'opsz' 24, 'SOFT' 0, 'WONK' 0; }
.testimonio__firma { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.carrusel__mandos { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: var(--s-4); }

/* --------------------------------------------------------- 12. contacto */
.contacto { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.contacto__datos { display: grid; gap: var(--s-4); align-content: start; }
.dato {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--velo-1);
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.dato__icono { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--line-gold); color: var(--gold-texto); flex: none; }
.dato__icono svg { width: 19px; height: 19px; }
.dato__texto { display: grid; gap: 2px; }
.dato__titulo { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mut); }
.dato__valor { font-size: 1.05rem; font-weight: 600; }
@media (hover: hover) { a.dato:hover { border-color: var(--line-gold); background: var(--velo-2); } }

.mapa {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  min-height: 300px; background: var(--sup-2);
}
.mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; filter: grayscale(0.35) contrast(1.05) brightness(0.82); }
.mapa__nota { position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2; }

/* El mapa es de un tercero: no se carga hasta que alguien lo pide. */
.mapa__activar {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  padding: var(--s-6);
  text-align: center;
  background:
    radial-gradient(80% 70% at 50% 40%, oklch(0.800 0.130 85 / 0.07), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 34px, var(--velo-2) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--velo-2) 34px 35px),
    var(--ink-900);
  transition: background-color var(--d-2) var(--e-out);
}
.mapa__activar > svg { width: 28px; height: 28px; color: var(--gold-texto); }
.mapa__titulo { font-family: var(--f-display); font-size: 1.25rem; font-variation-settings: 'opsz' 28, 'SOFT' 0, 'WONK' 0; }
.mapa__pista { font-size: var(--t-xs); color: var(--fg-mut); max-width: 30ch; }
.mapa__activar .btn { margin-top: var(--s-2); }

/* ------------------------------------------------------------ 13. ficha */
.migas { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: var(--t-xs); color: var(--fg-mut); }
.migas a { transition: color var(--d-2) var(--e-out); }
.migas svg { width: 12px; height: 12px; opacity: 0.6; }
@media (hover: hover) { .migas a:hover { color: var(--gold-texto); } }

.ficha-cabecera { display: grid; gap: var(--s-5); }
.ficha-cabecera__marcas { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.ficha-cabecera h1 { font-size: var(--t-h1); }
.ficha-cabecera__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; color: var(--fg-mut); }
.ficha-cabecera__meta span { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-sm); }
.ficha-cabecera__meta svg { width: 15px; height: 15px; color: var(--gold-texto); }
.ficha-cabecera__acciones { display: flex; gap: 0.5rem; }

/* Galeria */
.galeria { display: grid; gap: 0.55rem; }
.galeria__principal {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  aspect-ratio: 4 / 3; background: var(--ink-850);
  cursor: zoom-in;
}
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria__lupa {
  position: absolute; right: 0.85rem; bottom: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem; border-radius: var(--r-full);
  background: oklch(0.125 0.007 70 / 0.8); border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  font-size: var(--t-xs); font-weight: 600;
}
.galeria__lupa svg { width: 15px; height: 15px; }
.galeria__miniaturas {
  display: grid; gap: 0.55rem;
  grid-auto-flow: column; grid-auto-columns: 92px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.galeria__miniaturas::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .galeria__miniaturas { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; } }
.miniatura {
  position: relative; scroll-snap-align: start;
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  opacity: 0.55;
  transition: opacity var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), transform var(--d-1) var(--e-out);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:active { transform: scale(0.95); }
.miniatura[aria-current='true'] { opacity: 1; border-color: var(--gold-texto); }
@media (hover: hover) { .miniatura:hover { opacity: 1; } }

.ficha-cuerpo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
/* Sin align-items:start a proposito: el <aside> debe estirarse a lo alto de la
   fila para que el panel de accion tenga recorrido donde quedarse pegado. */
@media (min-width: 1000px) { .ficha-cuerpo { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.85fr); } }

.bloque + .bloque { margin-top: clamp(2rem, 4vw, 3rem); }
.bloque h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); }
.bloque p + p { margin-top: var(--s-4); }
.bloque p { color: var(--fg-soft); }

/* -------------------------------------------------- etiqueta de plan ---- */
/* Medidas y colores exactos del programa de destacados: la etiqueta va en la
   esquina superior izquierda de la foto, a 10 px del borde. El color de cada
   plan viaja en el atributo style porque se edita desde el panel. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 5px 10px; border-radius: 4px;
  white-space: nowrap; line-height: 1.2;
}
.tarjeta__marcas:has(.badge) { top: 10px; left: 10px; }

/* Tabla de tipologias de un proyecto. Va dentro de su propio contenedor con
   scroll horizontal: en el telefono la tabla es mas ancha que la pantalla y sin
   esto arrastraria toda la pagina hacia los lados. */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); }
.tabla-simple { width: 100%; border-collapse: collapse; min-width: 460px; font-size: var(--t-sm); }
.tabla-simple th, .tabla-simple td { padding: 0.7rem 0.9rem; text-align: left; white-space: nowrap; }
.tabla-simple thead th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-mut); font-weight: 600; background: var(--velo-1);
}
.tabla-simple tbody tr + tr td { border-top: 1px solid var(--line); }
.tabla-simple td:first-child { color: var(--fg); font-weight: 600; }
.tabla-simple td { color: var(--fg-soft); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------- planes de destacado -- */

.planes { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.planes > * { min-width: 0; }
.plan {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: clamp(1.2rem, 3vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--sup);
}
.plan--destacado { border-color: var(--line-gold); box-shadow: var(--sh-gold); }
.plan__cabeza { display: grid; gap: 0.5rem; }
.plan__cabeza .badge { position: static; align-self: start; }
.plan__cabeza h3 { font-family: var(--f-display); font-size: var(--t-h3); }
.plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; }
.plan__precio strong { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.plan__precio span { font-size: var(--t-xs); color: var(--fg-mut); }
.plan__descripcion { font-size: var(--t-sm); color: var(--fg-mut); margin-top: 0.35rem; }
.plan__lista { display: grid; gap: 0.55rem; font-size: var(--t-sm); color: var(--fg-soft); }
.plan__lista li { display: flex; gap: 0.55rem; }
.plan__lista li::before { content: '✓'; color: var(--gold-texto); flex: none; }
.plan__cupo {
  margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--gold-texto); font-weight: 600;
}
.plan__cupo[data-lleno='1'] { color: var(--fg-mut); }

.honestidad {
  border: 1px solid var(--line-gold); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  background: oklch(0.800 0.130 85 / 0.045);
  display: grid; gap: var(--s-4);
}
.honestidad h2 { font-family: var(--f-display); font-size: var(--t-h3); }
.honestidad p { color: var(--fg-soft); font-size: var(--t-sm); max-width: var(--ancho-texto); }

.especificaciones { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.especificacion {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--velo-1);
}
.especificacion svg { width: 19px; height: 19px; color: var(--gold-texto); }
.especificacion dt { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mut); }
.especificacion dd { margin: 0; font-size: 1.08rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.lista-marcada { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lista-marcada li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-sm); color: var(--fg-soft); }
.lista-marcada svg { width: 17px; height: 17px; color: var(--gold-texto); flex: none; margin-top: 3px; }

.panel-accion {
  position: sticky; top: calc(var(--h-cabecera) + 1.25rem);
  display: grid; gap: var(--s-4);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  background: var(--sup); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.panel-accion__precio { font-family: var(--f-display); font-size: 1.9rem; font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0; line-height: 1.1; }
.panel-accion__precio small { display: block; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-mut); margin-bottom: 0.35rem; }
.panel-accion__asesor { display: flex; align-items: center; gap: 0.75rem; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.panel-accion__avatar { width: 44px; height: 44px; border-radius: var(--r-full); display: grid; place-items: center; background: oklch(0.800 0.130 85 / 0.12); border: 1px solid var(--line-gold); color: var(--gold-texto); font-family: var(--f-display); font-size: 1.05rem; flex: none; }

/* Barra fija de accion en ficha (movil) */
.barra-ficha {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-flotante);
  display: flex; gap: 0.6rem; align-items: center;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: oklch(0.125 0.007 70 / 0.95);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--d-3) var(--e-out);
}
.barra-ficha.visible { transform: none; }
.barra-ficha .btn { flex: 1; }
.barra-ficha__precio { font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------ 14. modal */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: end center; visibility: hidden; }
.modal[data-abierto='1'] { visibility: visible; }
@media (min-width: 720px) { .modal { place-items: center; } }
.modal__fondo {
  position: absolute; inset: 0;
  background: oklch(0.09 0.005 70 / 0.72);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--d-3) var(--e-out);
}
.modal[data-abierto='1'] .modal__fondo { opacity: 1; }
.modal__caja {
  position: relative;
  width: min(100%, 560px);
  max-height: min(88svh, 760px);
  overflow-y: auto;
  background: var(--sup);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s-6) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px); opacity: 0;
  transition: transform var(--d-3) var(--e-out), opacity var(--d-2) var(--e-out);
  box-shadow: var(--sh-3);
}
@media (min-width: 720px) { .modal__caja { border-radius: var(--r-xl); transform: translateY(10px) scale(0.98); } }
.modal[data-abierto='1'] .modal__caja { transform: none; opacity: 1; }
.modal__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.modal__cabecera h2 { font-size: 1.5rem; }
.modal__cabecera p { font-size: var(--t-sm); color: var(--fg-mut); margin-top: 0.35rem; }
.modal__asa { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--line-2); margin: 0 auto var(--s-4); }
@media (min-width: 720px) { .modal__asa { display: none; } }

/* ------------------------------------------------------------ 15. visor */
.visor { position: fixed; inset: 0; z-index: var(--z-visor); display: grid; grid-template-rows: auto 1fr auto; background: oklch(0.09 0.005 70 / 0.97); opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--e-out), visibility var(--d-3); }
.visor[data-abierto='1'] { opacity: 1; visibility: visible; }
.visor__barra { display: flex; align-items: center; justify-content: space-between; padding: calc(0.9rem + env(safe-area-inset-top, 0px)) var(--gutter) 0.9rem; }
.visor__contador { font-size: var(--t-sm); color: var(--fg-mut); font-variant-numeric: tabular-nums; }
.visor__escena { position: relative; display: grid; place-items: center; overflow: hidden; padding-inline: var(--gutter); }
.visor__escena img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.visor__nav { position: absolute; top: 50%; transform: translateY(-50%); background: oklch(0.125 0.007 70 / 0.7); backdrop-filter: blur(8px); }
.visor__nav--ant { left: 0.5rem; }
.visor__nav--sig { right: 0.5rem; }
.visor__pie { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding: 0.9rem var(--gutter) calc(0.9rem + env(safe-area-inset-bottom, 0px)); }
.visor__pie::-webkit-scrollbar { display: none; }
.visor__pie .miniatura { flex: none; width: 62px; }

/* ------------------------------------------------------------- 16. footer */
.pie { border-top: 1px solid var(--line); background: var(--ink-950); color: var(--fg); padding-bottom: var(--h-barra-inferior); }
/* En la ficha no hay barra inferior, pero si barra de accion de la propiedad. */
[data-pagina='ficha'] .pie { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
.pie__interior { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 800px) { .pie__interior { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie h3 { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-mut); margin-bottom: var(--s-4); }
.pie__enlaces { display: grid; gap: 0.65rem; }
.pie__enlaces a { font-size: var(--t-sm); color: var(--fg-soft); transition: color var(--d-2) var(--e-out); }
@media (hover: hover) { .pie__enlaces a:hover { color: var(--gold-texto); } }
.pie__marca p { color: var(--fg-mut); font-size: var(--t-sm); margin-top: var(--s-4); max-width: 40ch; }
.pie__redes { display: flex; gap: 0.55rem; margin-top: var(--s-5); }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--fg-dim);
}
.pie__legal a { transition: color var(--d-2) var(--e-out); }
@media (hover: hover) { .pie__legal a:hover { color: var(--fg-mut); } }

/* --------------------------------------------------------- 17. legalidad */
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: var(--t-h3); margin-top: var(--s-10); margin-bottom: var(--s-4); }
.prosa p, .prosa li { color: var(--fg-soft); }
.prosa p + p, .prosa ul { margin-top: var(--s-4); }
.prosa ul { display: grid; gap: 0.5rem; padding-left: 1.15rem; list-style: disc; }
.aviso-legal {
  display: flex; gap: 0.8rem;
  padding: var(--s-5); margin-bottom: var(--s-8);
  border: 1px solid var(--line-gold); border-radius: var(--r-md);
  background: oklch(0.800 0.130 85 / 0.06);
  font-size: var(--t-sm); color: var(--fg-soft);
}
.aviso-legal svg { width: 20px; height: 20px; color: var(--gold-texto); flex: none; }

/* ------------------------------------------- 17b. compactado de telefono */
/*
 * Todo lo que sigue existe por una razon: en 390 px la pagina medía diez
 * pantallas y media. Aqui las secciones pasan a rejillas de dos columnas,
 * los textos de relleno se recortan y desaparece el aire que no aportaba.
 */
@media (max-width: 719px) {

  /* --- servicios: cuadricula de dos, icono grande y texto justo --------- */
  .rejilla-servicios { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .servicio { padding: 0.95rem 0.9rem 1.05rem; gap: 0.55rem; border-radius: var(--r-md); }
  .servicio__icono { width: 38px; height: 38px; border-radius: var(--r-sm); }
  .servicio__icono svg { width: 19px; height: 19px; }
  .servicio h3 { font-size: 1rem; line-height: 1.18; }
  .servicio p {
    font-size: 0.8rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .servicio .enlace-flecha { min-height: 0; font-size: 0.76rem; gap: 0.3rem; }
  .servicio .enlace-flecha svg { width: 14px; height: 14px; }
  /* el ultimo servicio cierra la fila a lo ancho */
  .rejilla-servicios > :last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .rejilla-servicios > :last-child:nth-child(odd) p { flex: 1 1 100%; -webkit-line-clamp: 2; }

  /* --- pasos de /vender/: dos por fila ---------------------------------- */
  .pasos { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .paso { padding: 0.95rem 0.9rem 1.05rem; gap: 0.35rem; border-radius: var(--r-md); }
  .paso h3 { font-size: 0.98rem; }
  .paso p { font-size: 0.78rem; line-height: 1.42; }

  /* --- contacto: dos por fila y mapa mas bajo --------------------------- */
  .contacto { gap: var(--s-4); }
  .contacto__datos { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .dato { flex-direction: column; align-items: flex-start; gap: 0.55rem; padding: 0.9rem; border-radius: var(--r-md); }
  .dato__icono { width: 34px; height: 34px; }
  .dato__icono svg { width: 16px; height: 16px; }
  .dato__titulo { font-size: 0.65rem; }
  .dato__valor { font-size: 0.95rem; }
  .mapa, .mapa iframe { min-height: 190px; }
  .mapa__titulo { font-size: 1.05rem; }
  .mapa__pista { display: none; }

  /* --- captacion: puntos en dos columnas -------------------------------- */
  .captacion { padding: 1.15rem 1rem 1.35rem; gap: var(--s-5); border-radius: var(--r-lg); }
  .captacion__puntos { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: var(--s-4); }
  .captacion__puntos li { font-size: 0.78rem; line-height: 1.35; }
  .captacion__puntos svg { width: 15px; height: 15px; margin-top: 1px; }
  .captacion__texto p { font-size: var(--t-sm); }

  /* --- formularios ------------------------------------------------------ */
  .rejilla-campos { gap: 0.7rem; }
  .formulario { gap: 0.7rem; }
  .campo input, .campo select, .campo textarea { min-height: 46px; padding: 0.65rem 0.85rem; }
  .campo textarea { min-height: 82px; }
  .campo > label, .leyenda { font-size: 0.66rem; letter-spacing: 0.07em; }
  .casilla { font-size: 0.78rem; line-height: 1.4; }

  /* --- buscador --------------------------------------------------------- */
  .buscador__caja { padding: 0.85rem; gap: 0.85rem; border-radius: var(--r-lg); }
  .buscador__entrada input { min-height: 48px; padding-block: 0.7rem; }
  .buscador__pie { padding-top: 0.75rem; }
  .ficha { min-height: 38px; padding: 0.4rem 0.85rem; }

  /* --- estados vacios --------------------------------------------------- */
  .vacio { padding: 1.6rem 1rem; gap: 0.85rem; border-radius: var(--r-lg); }
  .vacio__icono { width: 44px; height: 44px; }
  .vacio__icono svg { width: 20px; height: 20px; }
  .vacio p { font-size: var(--t-sm); }
  .tarjeta--invitacion { min-height: 0; padding: 1.1rem 0.9rem; gap: 0.55rem; }
  .tarjeta--invitacion h3 { font-size: 1rem; }
  .tarjeta--invitacion p { font-size: 0.78rem; line-height: 1.4; }

  /* --- ficha de propiedad ----------------------------------------------- */
  .ficha-cabecera { gap: var(--s-3); }
  .ficha-cabecera__meta { gap: 0.35rem 0.9rem; }
  .bloque + .bloque { margin-top: 1.5rem; }
  .bloque h2 { margin-bottom: 0.7rem; }
  .bloque p { font-size: var(--t-sm); }
  .especificaciones { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .especificacion { padding: 0.75rem; border-radius: var(--r-sm); }
  .panel-accion { padding: 1rem; gap: 0.7rem; border-radius: var(--r-lg); }
  .panel-accion__precio { font-size: 1.5rem; }
  .galeria__miniaturas { grid-auto-columns: 74px; }

  /* Las caracteristicas leen mejor como fichas que como lista larga */
  .lista-marcada { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .lista-marcada li {
    align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--line); border-radius: var(--r-full);
    background: var(--velo-1);
    font-size: 0.78rem;
  }
  .lista-marcada svg { width: 13px; height: 13px; margin-top: 0; }

  /* --- pie: dos columnas de enlaces ------------------------------------- */
  .pie__interior { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; padding-block: 2rem 1.5rem; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__marca p { font-size: 0.8rem; margin-top: 0.7rem; }
  .pie h3 { margin-bottom: 0.7rem; }
  .pie__enlaces { gap: 0.45rem; }
  .pie__enlaces a { font-size: 0.8rem; }
  .pie__legal { padding-block: 1rem; gap: 0.4rem; }

  /* --- cabecera de pagina interior -------------------------------------- */
  .hero--interior { padding-top: calc(var(--h-cabecera) + 1.1rem); padding-bottom: 0.5rem; }
  .hero-interior__rejilla { margin-top: 0.85rem; }

  /* El hero deja asomar el buscador: se ve que hay pagina debajo. */
  .hero--principal { height: 86svh; min-height: min(520px, 100svh); }
  /* El bloque sube: cuanto mas arriba, mas cubierto por el velo y mejor se
     lee sobre el cielo, que es la parte clara del video. */
  .hero--principal .hero__contenido {
    padding-top: calc(var(--h-cabecera) + 0.9rem);
    padding-bottom: clamp(3rem, 9vh, 4.5rem);
  }
  .hero__bajada { max-width: 34ch; }
  .hero__acciones { margin-top: 1.15rem; gap: 0.55rem; }
  .hero__acciones .btn { min-height: 46px; }
}

/* Texto largo plegado con "Leer mas" (solo donde el JS lo activa). */
.mas-texto__cuerpo { overflow: hidden; }
.mas-texto[data-plegado='1'] .mas-texto__cuerpo {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.mas-texto__boton { margin-top: 0.35rem; padding-inline: 0; color: var(--gold-texto); }
.mas-texto__boton svg { transition: transform var(--d-2) var(--e-out); }
.mas-texto__boton.esta-abierto svg { transform: rotate(180deg); }

/* ------------------------------- 17c. encabezado editable y video ------
   El video no se incrusta: se muestra la miniatura y el reproductor solo
   se carga cuando alguien pulsa play. Un iframe de YouTube en la portada
   pesa cientos de kilobytes y castiga el tiempo de carga.
   Si una sección no tiene ni texto ni video, el servidor no dibuja nada:
   ni marco, ni caja gris, ni cartel de «próximamente». */

.encabezado-editable__caja { display: grid; gap: clamp(1.1rem, 3vw, 2.25rem); }
.encabezado-editable h2 { font-size: var(--t-h2); }
.encabezado-editable__bajada { margin-top: var(--s-3); color: var(--fg-soft); font-size: var(--t-lead); }
.encabezado-editable__intro { margin-top: var(--s-4); color: var(--fg-mut); max-width: 62ch; }
.encabezado-editable__intro p + p { margin-top: var(--s-3); }
.encabezado-editable__intro ul, .encabezado-editable__intro ol {
  margin-top: var(--s-3); padding-left: 1.15rem; list-style: disc; display: grid; gap: 0.35rem;
}
.encabezado-editable__intro a { color: var(--gold-texto); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .encabezado-editable--lado .encabezado-editable__caja {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  }
}

.video-perezoso {
  position: relative;
  width: 100%;
  /* aspect-ratio reserva el espacio: sin esto el contenido salta al cargar */
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-850);
  border: 1px solid var(--line);
}
.video-perezoso--vertical { aspect-ratio: 9 / 16; max-width: 400px; margin-inline: auto; }
.video-perezoso__boton {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0;
  cursor: pointer;
}
.video-perezoso__boton img { width: 100%; height: 100%; object-fit: cover; }
.video-perezoso__play {
  position: absolute;
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: var(--r-full);
  background: oklch(0.125 0.007 70 / 0.72);
  border: 1px solid var(--line-gold);
  backdrop-filter: blur(8px);
  color: var(--gold-texto);
  transition: transform var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.video-perezoso__play svg { width: 28px; height: 28px; margin-left: 3px; }
.video-perezoso__boton:active .video-perezoso__play { transform: scale(0.94); }
@media (hover: hover) {
  .video-perezoso__boton:hover .video-perezoso__play { transform: scale(1.06); background: oklch(0.125 0.007 70 / 0.88); }
}
.video-perezoso iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------- 18. responsive */
@media (min-width: 560px) {
  .hero__baja { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
}

/* En movil y tablet el WhatsApp ya vive en la barra inferior: el de la
   cabecera solo robaba ancho y empujaba el boton de menu fuera de pantalla. */
@media (max-width: 1023px) {
  .cabecera .btn--primario { display: none; }
  .cabecera__interior { gap: var(--s-3); }
}

@media (min-width: 720px) {
  .buscador__fila { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 900px) {
  .barra-inferior { display: none; }
  :root { --h-barra-inferior: 0px; }
  .flotante-wa { display: inline-flex; }
  .barra-ficha { display: none; }
  .pie, [data-pagina='ficha'] .pie { padding-bottom: 0; }
}

@media (min-width: 1024px) {
  .abrir-menu { display: none; }
  .nav-escritorio { display: block; }
  .marca img { width: 44px; height: 44px; }
  .marca__nombre { font-size: 1.18rem; }

  /* El video del hero deja libre el cielo a la izquierda: ahi va el texto. */
  .hero__contenido { max-width: var(--ancho); }
  .hero__titulo { max-width: 13ch; }
  .hero--principal { align-content: center; }
  .hero--principal .hero__contenido { align-self: center; padding-block: 0; max-width: var(--ancho); }
  .hero--principal .hero__interior { max-width: 640px; }
  .hero--principal .hero__velo {
    background:
      radial-gradient(62% 74% at 20% 50%, oklch(0.125 0.007 70 / 0.7) 0%, oklch(0.125 0.007 70 / 0.34) 58%, transparent 82%),
      linear-gradient(100deg, oklch(0.125 0.007 70 / 0.84) 0%, oklch(0.125 0.007 70 / 0.6) 34%, oklch(0.125 0.007 70 / 0.18) 58%, transparent 76%),
      linear-gradient(to bottom, oklch(0.125 0.007 70 / 0.5) 0%, transparent 24%, transparent 66%, oklch(0.125 0.007 70 / 0.8) 100%);
  }
}

@media (min-width: 1440px) {
  :root { --ancho: 1340px; }
}

/* Movil apaisado: la ventana pierde dos tercios de alto y el hero tiene que
   caber entero, botones incluidos. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero--principal .hero__contenido {
    padding-top: calc(var(--h-cabecera) + 0.5rem);
    padding-bottom: 1.25rem;
  }
  .hero__titulo { font-size: clamp(1.7rem, 6.6vh, 2.5rem); max-width: 22ch; }
  .hero__bajada { font-size: 0.95rem; margin-top: 0.5rem; max-width: 54ch; }
  .hero__acciones { margin-top: 0.9rem; gap: 0.5rem; }
  .hero__acciones .btn { min-height: 42px; padding-block: 0.55rem; }
  .hero__pie { display: none; }
}

/* ---------------------------------------------------- 19. reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revela { opacity: 1; transform: none; }
  .menu__lista a { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- 20. impresion */
@media print {
  .cabecera, .barra-inferior, .flotante-wa, .barra-ficha, .buscador, .modal, .visor, .saltar { display: none !important; }
  body { background: #fff; color: #111; }
}

/* ==========================================================================
   21. Desplegables: el fondo blanco de las opciones
   --------------------------------------------------------------------------
   Un <select> con fondo translúcido abre su lista con el fondo del sistema.
   En Windows eso es BLANCO, y como las <option> heredaban el color de texto
   casi blanco del tema oscuro, la lista salía en blanco sobre blanco: no se
   leía nada. color-scheme por sí solo no lo arregla, porque el navegador
   compone el desplegable contra el background-color del control.

   Arreglo: fondo OPACO en el control y reglas explícitas para option y
   optgroup. Las dos cosas, no una. Y la flecha, que se dibujaba con un gris
   fijo dentro de un data-URI, pasa a currentColor para que siga al tema.
   ========================================================================== */

.campo select,
select.ficha,
.buscador select {
  background-color: var(--sup);
  color: var(--fg);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

option,
optgroup {
  background-color: var(--sup);
  color: var(--fg);
}
option:disabled { color: var(--fg-dim); }

/* ==========================================================================
   22. Publicar: pasos, bloques de campos y cierre
   ========================================================================== */

.envoltura--estrecha { max-width: 880px; }

.pasos-flujo {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.pasos-flujo li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem; border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--sup);
  font-size: var(--t-sm); font-weight: 600; color: var(--fg-mut);
  min-width: 0;
}
.pasos-flujo li span {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--velo-3); color: var(--fg-mut);
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.pasos-flujo li[data-estado="activo"] { border-color: var(--gold-texto); color: var(--fg); }
.pasos-flujo li[data-estado="activo"] span { background: var(--gold-500); color: var(--on-gold); }
.pasos-flujo li[data-estado="hecho"] { color: var(--fg-soft); }
.pasos-flujo li[data-estado="hecho"] span { background: var(--ok); color: var(--sup); }

.panel-flujo { min-width: 0; }

.bloque-campos {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sup);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  margin: 0 0 var(--s-5);
  min-width: 0;
}
.bloque-campos > legend,
.bloque-campos > summary {
  font-family: var(--f-display);
  font-size: 1.06rem;
  color: var(--fg);
}
.bloque-campos > legend { padding: 0 0.5rem; margin-left: -0.5rem; }
.bloque-campos > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.bloque-campos > summary::-webkit-details-marker { display: none; }
.bloque-campos--plegable[open] > summary { margin-bottom: var(--s-4); }
.campo-opcional {
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim);
}

.rejilla-campos--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.rejilla-campos--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.rejilla-campos--3 > *, .rejilla-campos--4 > * { min-width: 0; }

.campo--fotos input[type="file"] {
  min-height: 0; padding: 0.7rem; background: var(--velo-1);
  font-size: var(--t-sm); cursor: pointer;
}
.lista-adjuntos { font-size: var(--t-sm); color: var(--ok); margin-top: 0.5rem; }

.formulario__pista-envio {
  font-size: var(--t-xs); color: var(--fg-mut); text-align: center; margin-top: 0.6rem;
}
.campo-error--bloque { display: block; min-height: 1.2em; margin-bottom: 0.6rem; font-weight: 600; }

.cierre-flujo {
  text-align: center;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  background: var(--sup);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid; gap: var(--s-4); justify-items: center;
}
.cierre-flujo__marca {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--gold-500); color: var(--on-gold);
}
.cierre-flujo__marca svg { width: 26px; height: 26px; }
.cierre-flujo h2 { font-size: var(--t-h3); }
.cierre-flujo p { color: var(--fg-soft); max-width: 52ch; }
.cierre-flujo__acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   23. Planes: cuatro tarjetas, y en publicar son elegibles
   ========================================================================== */

.plan { background: var(--sup); }
.plan__marca {
  align-self: start;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-mut);
  padding: 5px 10px; border-radius: 4px; border: 1px solid var(--line-2);
}
.plan__cupo--libre { color: var(--fg-mut); font-weight: 500; }

/* Con auto-fit las cuatro tarjetas dejaban una huérfana en la segunda fila
   en un rango ancho de pantallas. Rejilla explícita por tamaño. */
.planes { grid-template-columns: 1fr; }
@media (min-width: 620px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan--elegible { cursor: pointer; position: relative; }
.plan--elegible:focus-within { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.plan__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan__elegir {
  margin-top: var(--s-3);
  display: block; text-align: center;
  padding: 0.6rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  font-size: var(--t-sm); font-weight: 700; color: var(--fg-soft);
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.plan--elegible:has(.plan__radio:checked) {
  border-color: var(--gold-texto);
  box-shadow: var(--sh-gold), 0 0 0 1px var(--gold-600);
}
.plan--elegible:has(.plan__radio:checked) .plan__elegir {
  background: var(--gold-500); border-color: var(--gold-texto); color: var(--on-gold);
}
.plan--elegible:has(.plan__radio:disabled) { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) {
  .plan--elegible:hover { border-color: var(--line-gold); }
}

/* ==========================================================================
   24. Video de la página de publicar
   ========================================================================== */

.video-lado { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.video-lado > * { min-width: 0; }
@media (min-width: 900px) { .video-lado { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.video-lado__texto h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.video-lado__texto p { color: var(--fg-soft); }
.video-lado__marco { min-width: 0; }

/* ==========================================================================
   25. Ajustes del tema claro
   ========================================================================== */

.buscador__caja { background: var(--sup); }
.buscador--catalogo { margin-bottom: var(--s-6); }
.pasos--compactos .paso { padding: clamp(1rem, 2vw, 1.35rem); }
.encabezado-seccion--simple { max-width: 62ch; }
.btn--grande { min-height: 54px; padding-inline: 1.6rem; font-size: 1.02rem; }

/* El mapa se aclaraba con un filtro para pegar con el fondo oscuro. */
.mapa iframe { filter: none; }
.miniatura { opacity: 1; }
.miniatura[aria-current="false"] { opacity: 0.6; }

/* Distintivos sobre foto: siguen siendo oscuros, están sobre la imagen. */
.distintivo--linea, .distintivo--estado { backdrop-filter: blur(8px); }


/* ==========================================================================
   26. Elementos flotantes: siguen oscuros a propósito
   --------------------------------------------------------------------------
   La barra inferior, el menú de móvil, el botón flotante y la barra de la
   ficha se apoyan sobre el contenido, no forman parte de él. En oscuro se
   separan de la página sin necesidad de sombras fuertes. Declaran su propio
   contexto para que la letra no herede el color oscuro del cuerpo.
   ========================================================================== */

.menu,
.barra-inferior,
.flotante-wa,
.barra-ficha,
.aviso {
  color-scheme: dark;
  --fg: oklch(0.975 0.004 85);
  --fg-soft: oklch(0.845 0.008 85);
  --fg-mut: oklch(0.735 0.010 85);
  --fg-dim: oklch(0.625 0.010 85);
  --gold-texto: var(--gold-400);
  --velo-1: oklch(1 0 0 / 0.03);
  --velo-2: oklch(1 0 0 / 0.06);
  --velo-3: oklch(1 0 0 / 0.10);
  --line: oklch(1 0 0 / 0.10);
  --line-2: oklch(1 0 0 / 0.18);
  --sup: var(--ink-900);
  --sup-2: var(--ink-850);
  color: var(--fg);
}

/* ==========================================================================
   27. Contraste medido, no estimado
   --------------------------------------------------------------------------
   Cada regla de aquí sale de medir el contraste real de un texto contra el
   píxel que tiene detrás, no de mirarlo. Se corrige lo que quedó por debajo
   de 4.5:1 (3:1 en texto grande) al pasar la página a tema claro.
   ========================================================================== */

/* --fg-dim daba 4.03:1 sobre blanco en las pistas de 12px. */
:root { --fg-dim: oklch(0.545 0.010 75); }

/* El panel de ayuda seguía en tinta: es una tarjeta sobre página clara. */
.panel-ayuda {
  background:
    radial-gradient(120% 130% at 90% 0%, oklch(0.800 0.130 85 / 0.10), transparent 60%),
    var(--sup);
}

/* El mapa se oscurecía con un filtro pensado para fondo negro, y su cartel
   de activación heredaba texto oscuro sobre ese fondo oscuro. */
.mapa iframe { filter: grayscale(0.25) contrast(1.02); }
.mapa__activar { background: var(--sup-2); }

/* Los distintivos y el contador del visor van SOBRE FOTO: ahí el texto es
   claro siempre, independientemente del tema de la página. */
.distintivo,
.galeria__lupa,
.visor,
.barra-ficha,
.tarjeta__marcas {
  color-scheme: dark;
  --fg: oklch(0.975 0.004 85);
  --fg-soft: oklch(0.845 0.008 85);
  --fg-mut: oklch(0.800 0.010 85);
  --fg-dim: oklch(0.720 0.010 85);
  --gold-texto: var(--gold-400);
  color: var(--fg);
}
.distintivo--estado { color: var(--fg-mut); }

/* El pie del visor y sus controles viven sobre el velo negro a pantalla
   completa, no sobre la página. */
.visor__contador, .visor__pie, .visor__cerrar { color: var(--fg-soft); }

/* El distintivo dorado lleva letra oscura: el bloque 27 le puso color claro
   al declarar el contexto de foto y hay que devolvérselo. */
.distintivo--oro { color: var(--on-gold); }

/* ==========================================================================
   28. Compactado y aprovechamiento del ancho
   --------------------------------------------------------------------------
   Tres problemas medidos en escritorio a 1512 px:
     · el <legend> se dibujaba A CABALLO sobre el borde del recuadro, así que
       la mitad del texto quedaba fuera de la superficie blanca;
     · /vender/ usaba un contenedor de 880 px y dejaba 311 px muertos a cada
       lado;
     · las cuatro tarjetas de plan quedaban en 293 × 676 px, con las viñetas
       partidas en tres líneas.
   ========================================================================== */

/* 28.1 El legend, dentro del recuadro ------------------------------------- */
/* Un <legend> tiene renderizado propio: se coloca encima del borde superior
   y lo interrumpe. Sacarlo del flujo con float lo convierte en un bloque
   normal y el borde se dibuja entero. `flow-root` contiene el flotante y el
   `clear` evita que el primer campo se le monte encima. */
.bloque-campos { display: flow-root; }
.bloque-campos > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--s-4);
}
.bloque-campos > legend + * { clear: both; }

/* 28.2 /vender/: formulario y apoyo en dos columnas ----------------------- */
.panel-flujo--dos { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
.panel-flujo--dos > * { min-width: 0; }
@media (min-width: 1040px) {
  .panel-flujo--dos { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  /* El panel de apoyo acompaña al formulario mientras se rellena. */
  .apoyo-publicar { position: sticky; top: calc(var(--h-cabecera) + 1.2rem); }
}

.apoyo-publicar__caja {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sup);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.apoyo-pasos { display: grid; gap: 0.9rem; margin-top: var(--s-4); }
.apoyo-pasos li { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; }
.apoyo-pasos__num {
  font-family: var(--f-display); font-size: 0.82rem; color: var(--gold-texto);
  font-variant-numeric: tabular-nums; flex: none; padding-top: 0.12rem;
}
.apoyo-pasos strong { display: block; font-size: 0.95rem; }
.apoyo-pasos p { font-size: var(--t-xs); color: var(--fg-mut); line-height: 1.5; }
.apoyo-publicar__nota {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--fg-soft);
}

/* 28.3 Planes: comparación compacta --------------------------------------- */
.envoltura--ancha { max-width: 1440px; }

.planes--comparar { gap: 0.9rem; }
@media (min-width: 1340px) {
  /* Cuatro columnas solo cuando hay ancho de verdad. Entre 620 y 1339 px van
     2×2, que se lee mejor que cuatro tarjetas estranguladas. */
  .planes--comparar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1140px) and (max-width: 1339.98px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan { padding: clamp(1rem, 1.9vw, 1.35rem); gap: var(--s-3); }
.plan__cabeza { gap: 0.35rem; }
.plan__cabeza h3 { font-size: 1.12rem; line-height: 1.2; }
.plan__precio strong { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); }
.plan__precio span { font-size: 0.7rem; }
.plan__lista { gap: 0.42rem; font-size: 0.82rem; line-height: 1.45; }
.plan__lista li::before { font-size: 0.78rem; }
.plan__cupo { padding-top: var(--s-3); font-size: 0.72rem; }
.plan__marca { font-size: 0.62rem; padding: 4px 8px; }
.plan .badge { font-size: 10px; padding: 4px 8px; }

/* 28.4 Menos scroll en móvil ---------------------------------------------- */
@media (max-width: 719px) {
  .bloque-campos { padding: 0.95rem; margin-bottom: 0.85rem; }
  .bloque-campos > legend { margin-bottom: 0.7rem; font-size: 1rem; }
  .pasos-flujo { gap: 0.35rem; margin-bottom: 1.1rem; }
  .pasos-flujo li { padding: 0.4rem 0.7rem; font-size: 0.78rem; gap: 0.4rem; }
  .pasos-flujo li span { width: 19px; height: 19px; font-size: 0.68rem; }
  .apoyo-publicar__caja { padding: 1rem; }
  .apoyo-pasos { gap: 0.7rem; }
  .plan { padding: 1rem; }
  .plan__lista { font-size: 0.8rem; }
  .cierre-flujo { padding: 1.5rem 1.1rem; }
}


/* ==========================================================================
   29. Menos scroll: los planes en carril y las secciones compactadas
   --------------------------------------------------------------------------
   Medido en 390 px: las cuatro tarjetas de plan apiladas ocupaban 1.751 px,
   el 36 % de /planes/. En carril ocupan una pantalla y se comparan mejor,
   que es justo lo que se hace con una tabla de precios: mirar una al lado de
   otra, no recorrerlas de arriba abajo.
   ========================================================================== */

@media (max-width: 719px) {
  .planes {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* sangra hasta el borde para que se vea que hay más a la derecha */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 2px 0.5rem;
    gap: 0.7rem;
  }
  .planes::-webkit-scrollbar { display: none; }
  .planes > * { flex: 0 0 82%; scroll-snap-align: start; }
  .planes .plan__lista { gap: 0.38rem; }
}

/* Servicios y contacto: mismo contenido, menos aire. */
@media (max-width: 719px) {
  .servicio { padding: 0.95rem 1rem 1.05rem; gap: 0.5rem; }
  .servicio h3 { font-size: 1.02rem; }
  .servicio p { font-size: 0.82rem; line-height: 1.5; }
  .dato { padding: 0.85rem 1rem; }
  .razon__cabeza { padding-block: 0.8rem; }
  .razon__texto { padding-bottom: 0.85rem; }
}

@media (min-width: 900px) {
  .rejilla-servicios { gap: clamp(0.9rem, 1.6vw, 1.35rem); }
  .servicio { padding: clamp(1.1rem, 1.8vw, 1.5rem); }
}

/* El mapa reservaba 300 px de alto en el teléfono, donde es el bloque más
   caro de la sección de contacto y el que menos se usa. */
@media (max-width: 719px) {
  .mapa, .mapa iframe { min-height: 210px; }
}

/* ==========================================================================
   30. Que se note lo que se paga
   --------------------------------------------------------------------------
   Hasta ahora los cuatro planes compartían el mismo tipo de tarjeta y la
   única diferencia visible era la etiqueta de color. Quien pagaba $119.900
   veía casi lo mismo que quien no pagaba nada. Aquí cada escalón tiene un
   TRATAMIENTO distinto, no solo un color:

     Premium   franja oscura propia arriba de la portada, tarjetas grandes,
               y un banner ancho en los listados de su ciudad
     Plus      vitrina de destacados, primera fila, botón de WhatsApp en oro
     Destacado vitrina de destacados, en rotación
     Gratuito  el listado general, como cualquier otra
   ========================================================================== */

/* 30.1 Carrusel Premium de la portada ------------------------------------- */
.rejilla-premium { grid-template-columns: 1fr; gap: clamp(0.8rem, 2vw, 1.5rem); }
@media (min-width: 760px) { .rejilla-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rejilla-premium { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Dentro de la franja oscura la tarjeta sigue siendo clara: es la foto lo
   que tiene que destacar, y sobre negro una tarjeta blanca destaca más. */
.rejilla-premium .tarjeta {
  color-scheme: light;
  --sup: oklch(1 0 0);
  --fg: oklch(0.215 0.012 75);
  --fg-soft: oklch(0.385 0.011 75);
  --fg-mut: oklch(0.505 0.010 75);
  --fg-dim: oklch(0.545 0.010 75);
  --gold-texto: oklch(0.470 0.095 68);
  --line: oklch(0.215 0.012 75 / 0.10);
  --line-2: oklch(0.215 0.012 75 / 0.18);
  --velo-1: oklch(0.215 0.012 75 / 0.025);
  --velo-2: oklch(0.215 0.012 75 / 0.045);
  --velo-3: oklch(0.215 0.012 75 / 0.075);
  color: var(--fg);
  border-color: var(--line-gold);
  box-shadow: 0 18px 40px -24px oklch(0 0 0 / 0.9);
}
.rejilla-premium .tarjeta__media { aspect-ratio: 16 / 10; }
.rejilla-premium .tarjeta__titulo { font-size: 1.24rem; }

/* 30.2 Banner de ciudad, exclusivo de Premium ----------------------------- */
.banner-premium {
  display: grid;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sup);
  box-shadow: var(--sh-gold);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
  min-width: 0;
}
/* El alto lo manda el banner, nunca la foto: sin este tope una foto vertical
   estiraba la franja hasta 1.200 px y partía en dos el listado. */
@media (min-width: 820px) {
  .banner-premium {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    height: clamp(230px, 24vw, 320px);
  }
}
@media (hover: hover) { .banner-premium:hover { transform: translateY(-2px); box-shadow: var(--sh-2), var(--sh-gold); } }

.banner-premium__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; min-width: 0; }
@media (min-width: 820px) { .banner-premium__media { aspect-ratio: auto; min-height: 0; height: 100%; } }
.banner-premium__media img { width: 100%; height: 100%; object-fit: cover; }
.banner-premium__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.125 0.007 70 / 0.28), transparent 45%);
}
.banner-premium__marcas { position: absolute; top: 10px; left: 10px; display: flex; gap: 0.4rem; }

.banner-premium__cuerpo {
  display: flex; flex-direction: column; justify-content: center; gap: 0.6rem;
  padding: clamp(1.1rem, 2.6vw, 1.9rem);
  min-width: 0;
}
.banner-premium__lugar {
  font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mut);
}
.banner-premium__cuerpo h3 {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem); line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.banner-premium__precio {
  display: flex; flex-direction: column; gap: 0.1rem;
  font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.banner-premium__precio small {
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mut);
}

/* 30.3 Botón de WhatsApp resaltado: beneficio de Plus y Premium ----------- */
.btn--resaltado {
  box-shadow: var(--sh-gold), 0 0 0 3px oklch(0.800 0.130 85 / 0.22);
}
@media (prefers-reduced-motion: no-preference) {
  .btn--resaltado { animation: latido-oro 2.8s var(--e-io) infinite; }
  @keyframes latido-oro {
    0%, 72%, 100% { box-shadow: var(--sh-gold), 0 0 0 3px oklch(0.800 0.130 85 / 0.22); }
    84%           { box-shadow: var(--sh-gold), 0 0 0 7px oklch(0.800 0.130 85 / 0.10); }
  }
}

/* 30.4 Ficha ampliada: el bloque que solo ve Premium ---------------------- */
.bloque--premium {
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  background: oklch(0.800 0.130 85 / 0.05);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.bloque--premium .etiqueta { margin-bottom: 0.35rem; }
.bloque--premium h2 { margin-bottom: var(--s-4); }

/* 30.5 Móvil -------------------------------------------------------------- */
@media (max-width: 719px) {
  .banner-premium__cuerpo { padding: 0.85rem 1rem 1rem; gap: 0.35rem; }
  .banner-premium__cuerpo h3 { font-size: 1.12rem; -webkit-line-clamp: 2; }
  .banner-premium__media { aspect-ratio: 2 / 1; }
  .banner-premium__precio { font-size: 1.3rem; }
  .rejilla-premium .tarjeta__titulo { font-size: 1.08rem; }
}

/* Los seis textos largos de la ficha ampliada. */
.ficha-larga { display: grid; gap: var(--s-5); }
.ficha-larga h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.ficha-larga p { color: var(--fg-soft); font-size: var(--t-sm); }
.ficha-larga p + p { margin-top: 0.5rem; }
@media (min-width: 860px) { .ficha-larga { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-8); } }
.ficha-larga > * { min-width: 0; }

/* 30.6 Inventario corto ---------------------------------------------------
   Una sola tarjeta dentro de una rejilla de cuatro columnas se ve abandonada,
   y hoy hay pocas propiedades publicadas. Mientras sean una o dos, se centran
   y se ensanchan; en cuanto entre la tercera, la rejilla vuelve sola a lo de
   siempre. */
@media (min-width: 760px) {
  .rejilla-props:has(> :last-child:nth-child(-n + 2)) {
    grid-template-columns: repeat(auto-fit, minmax(320px, 440px));
    justify-content: center;
  }
}

/* El botón flotante de WhatsApp se posa sobre la esquina derecha: el texto del
   banner se aparta para que no le pise el título. */
@media (min-width: 1100px) { .banner-premium__cuerpo { padding-right: clamp(3rem, 5vw, 4.5rem); } }