/* ═══════════════════════════════════════════════════════════════════
   Jenny García — hoja de estilo

   SU MARCA, NO OTRA. Negro y oro son los colores con los que ella ya se
   presenta: su logotipo es un monograma dorado sobre un cuadro negro.
   Esta hoja no le cambia la marca, se la ejecuta.

   EL ORO ES MEDIDO, NO ELEGIDO. #8C7B5F sale del núcleo del trazo de su
   propio logotipo. Es un oro viejo y apagado, no un dorado de
   escaparate, y eso juega a favor.

   EL PELIGRO ES CONOCIDO: negro y oro es la combinación más manida del
   lujo inmobiliario y mal hecha parece un casino. Las tres reglas que
   lo evitan, y que no se rompen en ninguna regla de abajo:

     1. LA SUPERFICIE ES MARFIL. El negro es la base de la marca, no el
        fondo de la web: manda el marfil y manda el aire. El negro entra
        en el hero, en el bloque del acceso, en la banda y en el pie.
     2. EL ORO SOLO EN FILETES DE 1-2 PX, en el monograma y en detalles
        pequeños. Nunca un fondo de sección, nunca un fondo de botón.
        Da 3,52 sobre marfil: vale para una línea, no para una palabra.
        Para texto hay dos versiones medidas, --oro-texto sobre claro y
        --oro-claro sobre negro, y contraste.mjs lo comprueba.
     3. NI UN DEGRADADO DORADO, ni sombras doradas, ni brillos. Un oro
        plano de un píxel dice caro; un oro con brillo dice barato.

   EL ELEMENTO MEMORABLE ES UNO: el umbral. Cada sección abre con un
   filete de oro a sangre que el rótulo interrumpe, como el dintel de
   una puerta con su clave en medio. Se repite en las quince páginas y
   es lo único que se mueve del sitio, junto al clip del hero.

   MOVIMIENTO: solo opacity y transform, solo al aparecer, y nada si el
   sistema pide movimiento reducido —ahí el hero se queda en su póster.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --negro: #101010;          /* medido del fondo de su logotipo */
  --negro-alto: #1C1B19;
  --marfil: #F2EDE4;
  --marfil-hondo: #E7E0D3;
  --oro: #8C7B5F;            /* medido del trazo de su logotipo */
  --oro-texto: #6F6049;      /* el oro que sí puede ser texto, sobre marfil */
  --oro-claro: #BFA97F;      /* el oro que sí puede ser texto, sobre negro */
  --tinta: #1A1A18;
  --ceniza: #A9A399;
  --grafito: #5C564C;

  /* Derivados. Se declaran una vez para no repartir rgba() por la hoja. */
  --tinta-velo: rgba(16, 16, 16, 0.66);
  --linea: rgba(140, 123, 95, 0.42);
  --linea-clara: rgba(191, 169, 127, 0.34);
  --negro-velo: rgba(16, 16, 16, 0.62);

  --titulares: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --texto: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ancho: 72rem;
  --ancho-medio: 56rem;
  --ancho-estrecho: 38rem;
  --canal: clamp(1.25rem, 5vw, 4rem);

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Reset corto ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* El menú de móvil vive fuera de pantalla a la derecha. Sin recortar
     aquí, ese panel de 315 px se suma al ancho del documento y el
     móvil se desplaza en horizontal aunque no se vea nada. */
  overflow-x: hidden;

  /* SIN scroll-behavior: smooth, y no por gusto. Con el desplazamiento
     suave, cualquier salto programado —el de una captura, el de un
     enlace a #propiedades— tarda en llegar, y el IntersectionObserver
     que hace aparecer los bloques no se dispara a tiempo: las tarjetas
     de propiedades salían en blanco en las capturas. El salto instantáneo
     no le quita nada a la página y quita un fallo entero. */
}

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* red de seguridad: nada debe desbordar de todos modos */
}

img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--oro-texto);
  outline-offset: 3px;
}
.oscura :focus-visible { outline-color: var(--oro-claro); }

::selection { background: var(--negro); color: var(--marfil); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 0.5rem; top: 0.5rem;
  transform: translateY(-160%);
  z-index: 60;
  background: var(--negro); color: var(--marfil);
  padding: 0.6rem 1rem; text-decoration: none;
  font-size: 0.9rem;
}
.saltar:focus { transform: translateY(0); }

/* ── Retícula ─────────────────────────────────────────────────────── */

.contenedor {
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}
.contenedor.medio { max-width: var(--ancho-medio); }
.contenedor.estrecho { max-width: var(--ancho-estrecho); }

/* ── Tipografía ───────────────────────────────────────────────────── */

/* El eyebrow es la única mayúscula sostenida de la hoja. En mono, corta
   y muy espaciada, hace de rótulo sin competir con el titular, y es la
   pieza que interrumpe el filete del umbral. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-texto);
  margin: 0;
}
.oscura .eyebrow, .hero .eyebrow { color: var(--oro-claro); }

.titulo-grande {
  font-family: var(--titulares);
  font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
}
.seccion-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 1.4rem;
  max-width: 22ch;
}
.seccion-titulo.ancho { max-width: 30ch; }

.seccion-bajada {
  margin-top: 1.3rem;
  max-width: 54ch;
  font-size: 1.06em;
  color: var(--grafito);
}
.oscura .seccion-bajada { color: var(--ceniza); }

.parrafo { margin-top: 1.15rem; max-width: 62ch; }
.parrafo + .parrafo { margin-top: 0.95rem; }

.destacado {
  font-family: var(--titulares);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.95rem);
  line-height: 1.28;
  max-width: 30ch;
}

.cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── EL UMBRAL ────────────────────────────────────────────────────────
   El filete de oro a sangre, interrumpido por el rótulo. Es el único
   elemento memorable de la web y se repite en las quince páginas.

   El truco es de dos piezas y no de tres: una línea de 1 px de ancho
   completo, y encima el rótulo con el mismo fondo que la sección y un
   poco de aire a los lados, que la tapa justo donde se apoya. Así la
   línea parece partirse sin que haya dos líneas que alinear. */

.seccion {
  position: relative;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  scroll-margin-top: 6rem;   /* la cabecera es pegajosa: sin esto, un
                                enlace a #propiedades deja el rótulo de
                                la sección debajo del menú */
}
.seccion::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--linea);
}
.seccion.oscura::before { background: var(--linea-clara); }
.seccion.sin-umbral::before { display: none; }

.seccion.oscura {
  background: var(--negro);
  color: var(--marfil);
}
.seccion.hondo { background: var(--marfil-hondo); }

.seccion-cabeza {
  position: relative;
  margin-top: calc(clamp(4rem, 3rem + 6vw, 8rem) * -1 - 0.55rem);
  margin-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
}
.seccion-cabeza .eyebrow {
  display: inline-block;
  background: var(--marfil);
  padding-inline: 0.9rem;
  margin-inline-start: -0.9rem;
  line-height: 1.1;
}
.oscura .seccion-cabeza .eyebrow { background: var(--negro); }
.hondo .seccion-cabeza .eyebrow { background: var(--marfil-hondo); }

/* ── Botones ──────────────────────────────────────────────────────────
   Ninguno es dorado: sobre claro van negros con texto marfil (16,32) y
   sobre negro van marfil con texto negro (16,32). El oro se queda en el
   filete, que es donde cumple: de fondo de botón da 3,52. */

.acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.boton, .boton-claro, .boton-fantasma, .boton-fantasma-claro {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--texto);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.25s var(--curva), background-color 0.25s var(--curva), color 0.25s var(--curva);
}
.boton { background: var(--negro); color: var(--marfil); }
.boton-claro { background: var(--marfil); color: var(--negro); }
.boton-fantasma { background: transparent; color: var(--tinta); border-color: var(--oro); }
.boton-fantasma-claro { background: transparent; color: var(--marfil); border-color: var(--oro-claro); }

.boton:hover, .boton-claro:hover { transform: translateY(-2px); }
.boton-fantasma:hover { background: var(--negro); color: var(--marfil); border-color: var(--negro); }
.boton-fantasma-claro:hover { background: var(--marfil); color: var(--negro); border-color: var(--marfil); }

@media (prefers-reduced-motion: reduce) {
  .boton, .boton-claro, .boton-fantasma, .boton-fantasma-claro { transition: none; }
  .boton:hover, .boton-claro:hover { transform: none; }
}

.boton-inerte { opacity: 0.9; cursor: default; }

.enlace-texto {
  color: var(--oro-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 1px;
}
.enlace-texto:hover { border-bottom-color: var(--oro-texto); }
.oscura .enlace-texto { color: var(--oro-claro); border-bottom-color: var(--linea-clara); }
.oscura .enlace-texto:hover { border-bottom-color: var(--oro-claro); }

/* ── Franja de propuesta ──────────────────────────────────────────────
   Va arriba del todo y la escribe build.mjs en las quince páginas: no
   se puede quitar editando un HTML. Dice lo que es antes de que nadie
   se pregunte si esto es la web oficial de nadie. */

/* z-index por debajo de la cabecera: el panel del menú de móvil cuelga
   de la cabecera y hereda su contexto de apilamiento, así que si la
   franja va por encima, el panel abierto se queda por debajo de ella y
   el botón de cerrar acaba tapado. */
.franja {
  position: relative;
  z-index: 10;
  background: var(--negro-alto);
  color: var(--marfil);
  font-size: 0.82rem;
  line-height: 1.4;
}
.franja-interior {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem 1.1rem;
  padding-block: 0.6rem;
}
.franja-texto { color: var(--ceniza); }
.franja-cta {
  color: var(--marfil);
  text-decoration: none;
  border-bottom: 1px solid var(--oro);
  padding-bottom: 1px;
  font-weight: 500;
}
.franja-cerrar {
  margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--ceniza);
  font-size: 1.1rem; line-height: 1;
  padding: 0.25rem 0.35rem;
}
.franja-cerrar:hover { color: var(--marfil); }

/* ── Cabecera ─────────────────────────────────────────────────────────
   LLEVA SU LOGOTIPO, el suyo de verdad: el monograma JG dorado sobre
   negro que usa en sus carteles. Al lado, su nombre en Garamond. No se
   le dibuja una marca nueva: abre la web y tiene que ver la suya. */

/* Fondo sólido y SIN backdrop-filter, a propósito. Un backdrop-filter
   aquí crea bloque contenedor para los descendientes con position:
   fixed, y el panel del menú de móvil —que cuelga de la cabecera— se
   quedaba recortado a la altura de la propia cabecera: el fondo negro
   solo cubría la primera franja y los enlaces caían encima del hero,
   transparentes y superpuestos al titular. Con el fondo opaco no hace
   falta desenfocar nada. */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--marfil);
  border-bottom: 1px solid var(--linea);
}
.cabecera-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: 0.95rem;
}
.marca {
  text-decoration: none; flex-shrink: 0;
  display: flex; align-items: center; gap: 0.85rem;
}
/* Su monograma, tal cual. El archivo mide 190 px y aquí se pinta a 52:
   sobra resolución incluso en pantalla retina. */
.marca-logo {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: block;
}
.marca-texto { display: block; }
.marca-nombre {
  font-family: var(--titulares);
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: 0.005em;
  display: block;
}
.marca-filete {
  display: block;
  height: 1px;
  background: var(--oro);
  margin-top: 0.4rem;
  width: 100%;
}
.marca-descriptor {
  display: block;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--grafito);
  margin-top: 0.4rem;
}

.nav-lista { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.8rem); }
.nav-enlace {
  text-decoration: none;
  font-size: 0.93rem;
  color: var(--tinta);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
}
.nav-enlace:hover { border-bottom-color: var(--oro); }
.nav-enlace[aria-current='page'] { border-bottom-color: var(--oro); color: var(--oro-texto); }
.nav-wa {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* En pantalla estrecha, el logotipo más el nombre más el descriptor más
   el botón no caben en 375 px y el botón se salía por el borde. Se cede
   el descriptor y el filete, que son adorno, y se conserva lo que
   identifica: su monograma y su nombre. */
@media (max-width: 30rem) {
  .marca { gap: 0.6rem; }
  .marca-logo { width: 42px; height: 42px; }
  .marca-nombre { font-size: 1.2rem; }
  .marca-filete, .marca-descriptor { display: none; }
}

.menu-abrir {
  display: none;
  background: none; border: 1px solid var(--oro);
  padding: 0.5rem 0.85rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}

@media (max-width: 60rem) {
  .menu-abrir { display: inline-block; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(84vw, 22rem);
    background: var(--negro);
    color: var(--marfil);
    padding: 5.5rem var(--canal) 2rem;
    transform: translateX(100%);
    transition: transform 0.32s var(--curva);
    z-index: 50;
  }
  .nav[data-abierta='true'] { transform: translateX(0); }
  .nav-lista { flex-direction: column; align-items: flex-start; gap: 1.35rem; }
  .nav-enlace { color: var(--marfil); font-size: 1.15rem; }
  .nav-enlace[aria-current='page'] { color: var(--oro-claro); border-bottom-color: var(--oro-claro); }
  .nav-cerrar {
    position: absolute; top: 1.4rem; right: var(--canal);
    background: none; border: 0; color: var(--marfil);
    font-family: var(--mono); font-size: 0.75rem;
    letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  }
  .velo-menu {
    position: fixed; inset: 0; z-index: 45;
    background: var(--tinta-velo);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--curva);
  }
  .velo-menu[data-visible='true'] { opacity: 1; pointer-events: auto; }
}
@media (min-width: 60.001rem) {
  .nav-cerrar, .velo-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .velo-menu { transition: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────
   Sin buscador encima, sin verbo en imperativo. Una frase suya, mucho
   aire y dos salidas, sobre el clip de Gran Vía al anochecer.

   EL CLIP VA DE FONDO Y CON VELO, no de protagonista: es un sitio que
   dice Madrid en medio segundo y no dice nada de ella, así que su
   trabajo es sostener la frase, no competir con ella.

   El velo es un degradado NEGRO —de negro opaco a negro transparente,
   en diagonal— y no dorado. El oro aquí solo aparece en el filete de
   1 px que cierra el hero por abajo. */

.hero {
  position: relative;
  background: var(--negro);
  color: var(--marfil);
  overflow: hidden;
  border-bottom: 1px solid var(--linea-clara);
}
.hero-medio {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-medio img, .hero-medio video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16,16,16,0.94) 0%, rgba(16,16,16,0.86) 38%, rgba(16,16,16,0.58) 72%, rgba(16,16,16,0.48) 100%),
    linear-gradient(to top, rgba(16,16,16,0.72) 0%, rgba(16,16,16,0) 45%);
}
.hero-interior {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 2rem + 4vw, 5rem);
  padding-block: clamp(5rem, 3.5rem + 9vw, 10rem);
  align-items: center;
}
/* El crédito del clip, en pequeño y abajo del todo: no es material suyo
   y la web no finge que lo sea ni siquiera en el hero. */
/* El crédito del clip va como CHIP SÓLIDO, con el mismo lenguaje que el
   sello de render de las fichas, y no como pie de foto desvaído.

   Antes iba en 0,6 rem al 75 % de opacidad sobre el vídeo: se leía si
   uno sabía que estaba ahí. Y una marca que nadie lee es, en la
   práctica, una marca que no está —justo lo que esta web no se puede
   permitir, porque todo lo demás sí es material suyo—. Ahora es marfil
   sobre negro (16,32) y se lee. */
.hero-credito {
  position: absolute;
  right: var(--canal);
  bottom: 0;
  z-index: 2;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  max-width: calc(100% - var(--canal) * 2);
}
/* En pantalla estrecha deja de ser una esquina y pasa a ser una banda a
   lo ancho: en 375 px, un chip flotando sobre el hero se come el aire
   que necesita el titular. */
@media (max-width: 40rem) {
  .hero-credito {
    /* relative y NO static: en static el z-index se ignora, y como el
       vídeo y el velo van posicionados, se pintan por encima y el
       crédito desaparecía justo en la pantalla donde más gente lo va a
       ver. */
    position: relative;
    inset: auto;
    display: block;
    padding-inline: var(--canal);
    max-width: none;
    background: var(--negro-alto);
    border-top: 1px solid var(--linea-clara);
  }
}
.hero-titular {
  font-family: var(--titulares);
  font-size: clamp(2.6rem, 1.5rem + 5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 1.6rem;
  max-width: 14ch;
}
.hero-bajada {
  margin-top: 1.8rem;
  max-width: 46ch;
  color: var(--ceniza);
  font-size: 1.08em;
}
.hero-firma {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea-clara);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceniza);
  max-width: 42ch;
}
/* El teléfono no se parte nunca: un número de móvil cortado a mitad
   entre dos líneas se lee como dos números. */
.hero-firma .cifra { white-space: nowrap; }

/* El número, además de estar en el botón de WhatsApp, se queda como
   enlace tel:. En vivienda alta hay comprador que llama y no escribe, y
   quitarle el teléfono para forzar el chat es de las cosas que hacen
   que no te llame nadie. */
.tel {
  color: var(--marfil);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-clara);
  padding-bottom: 1px;
}
.tel:hover { border-bottom-color: var(--oro-claro); }

/* ── Huecos de foto ───────────────────────────────────────────────────
   Queda uno: la exclusiva de 2.235.000 €, de la que no hay foto
   pública. El hueco se pinta A PROPÓSITO, con la proporción final, el
   filete de oro y el rótulo que dice que ahí no va a haber foto. En una
   web cuyo argumento es que lo bueno no se publica, una ficha sin fotos
   es coherente; una foto de banco para tapar el hueco, no.

   No es una imagen: no pide ningún archivo al servidor, no pesa y no
   puede fallar. */

.hueco {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(140, 122, 91, 0.09) 11px 12px
    ),
    var(--marfil-hondo);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1rem, 2vw, 1.6rem);
  aspect-ratio: 3 / 2;
}
.oscura .hueco, .hero .hueco {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(191, 171, 141, 0.10) 11px 12px
    ),
    var(--negro-alto);
  border-color: var(--linea-clara);
}
.hueco.retrato { aspect-ratio: 4 / 5; }
.hueco.panoramica { aspect-ratio: 16 / 9; }
.hueco-rotulo {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.hero .hueco-rotulo, .oscura .hueco-rotulo { color: var(--oro-claro); }
.hueco-que {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--grafito);
  max-width: 34ch;
}
.hero .hueco-que, .oscura .hueco-que { color: var(--ceniza); }

/* ── El bloque del acceso ─────────────────────────────────────────────
   LA FIRMA DE LA WEB. Dice la verdad —que lo que se puede enseñar es
   una parte— y enseña de dónde salen las operaciones que no se anuncian.

   Lo que NO hace, y es deliberado: no hay contador de «12 propiedades
   off-market», ni lista borrosa, ni candados, ni formulario que
   prometa acceso a un inventario secreto. Fingir inventario es mentir
   y además se nota. La sensación de acceso la dan el texto y el aire. */

.acceso-rejilla {
  display: grid;
  gap: clamp(2.4rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 58rem) {
  .acceso-rejilla { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}
.origenes { border-top: 1px solid var(--linea-clara); }
.origen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1.1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linea-clara);
}
.origen-indice {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--oro-claro);
  padding-top: 0.28rem;
}
.origen-nombre { font-size: 1.02rem; font-weight: 500; }
.origen-nota {
  grid-column: 2;
  font-size: 0.92rem;
  color: var(--ceniza);
  margin-top: 0.15rem;
}
.origenes-pie {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: var(--ceniza);
  max-width: 44ch;
}

/* ── Pasos de «Cómo trabajo» ─────────────────────────────────────── */

.pasos { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.paso {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  border-top: 1px solid var(--linea);
}
@media (min-width: 48rem) {
  .paso { grid-template-columns: 6rem 1fr 1.2fr; align-items: baseline; }
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso-numero {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--oro-texto);
}
.paso-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.15;
}
.paso-texto { color: var(--grafito); max-width: 48ch; }

/* ── Propiedades ──────────────────────────────────────────────────────
   Dos por fila como mucho, grandes y con los datos en mono. Si esto
   llega a parecer la rejilla de un portal, el argumento de la portada
   se cae solo: no se puede prometer acceso a lo que no se publica y
   luego enseñar cien tarjetitas iguales. */

.rejilla-props {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (min-width: 52rem) {
  .rejilla-props { grid-template-columns: repeat(2, 1fr); }
}
.prop { position: relative; }
.prop-enlace { text-decoration: none; color: inherit; display: block; }
.prop-medio { position: relative; overflow: hidden; }
.prop-medio .hueco, .prop-medio img { transition: transform 0.5s var(--curva); }
.prop-enlace:hover .hueco, .prop-enlace:hover img { transform: scale(1.015); }
.prop-medio img { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .prop-medio .hueco, .prop-medio img { transition: none; }
  .prop-enlace:hover .hueco, .prop-enlace:hover img { transform: none; }
}
.prop-cuerpo { padding-top: 1.2rem; }
.prop-titulo {
  font-family: var(--titulares);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.14;
}
.prop-datos {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
}
.dato { display: flex; flex-direction: column; gap: 0.15rem; }
.dato-etiqueta {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafito);
}
.oscura .dato-etiqueta { color: var(--ceniza); }
.dato-valor {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.dato-valor.pendiente {
  font-size: 0.86rem;
  color: var(--grafito);
  font-family: var(--texto);
  font-style: italic;
}
.oscura .dato-valor.pendiente { color: var(--ceniza); }

.sello {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.9rem;
}
.sello-verificado { border: 1px solid var(--oro); color: var(--oro-texto); }
.oscura .sello-verificado { border-color: var(--oro-claro); color: var(--oro-claro); }

/* El sello de render. Llamar fotografía a un render de promotora es de
   las cosas que más rápido queman la credibilidad de una web de lujo,
   así que va encima de la imagen y no en letra pequeña debajo. */
.sello-render {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
}

/* La nota de procedencia de lo que es suyo. Debajo de la imagen, en
   pequeño, en todas las páginas donde aparece material cedido. */
.aviso-imagenes {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafito);
}
.oscura .aviso-imagenes { color: var(--ceniza); }

/* ── Ficha de inmueble ────────────────────────────────────────────── */

.ficha-cabeza { display: grid; gap: 1.2rem; }
.ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--linea);
}
/* El cierre de «Cómo trabajo». Es la frase que más la compromete de
   toda la web —decir que no hay nada— y por eso no va en letra de nota
   al pie: va en Garamond y con aire alrededor. */
.cierre {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-inline-start: clamp(1.2rem, 2vw, 2rem);
  border-inline-start: 1px solid var(--oro);
}
.cierre .destacado { margin-top: 0.9rem; }

.ficha-nota {
  margin-top: 1.6rem;
  font-size: 0.92rem;
  color: var(--grafito);
  max-width: 56ch;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--oro);
}

/* ── Banda del propietario ────────────────────────────────────────────
   Regla del nicho: la página del que vende nunca vive escondida en el
   pie. Va en el menú y con banda a pantalla completa en la portada. */

.banda {
  background: var(--negro-alto);
  color: var(--marfil);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}
.banda-titular {
  font-family: var(--titulares);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  line-height: 1.06;
  margin-top: 1.2rem;
  max-width: 20ch;
}
.banda-texto { margin-top: 1.4rem; max-width: 48ch; color: var(--ceniza); }

/* ── Puntos (vender, financiación) ────────────────────────────────── */

.puntos {
  display: grid;
  gap: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  margin-top: clamp(1.8rem, 1.4rem + 2vw, 3rem);
}
@media (min-width: 46rem) {
  .puntos { grid-template-columns: repeat(2, 1fr); }
}
.punto { padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.oscura .punto { border-top-color: var(--linea-clara); }
.punto-titulo {
  font-family: var(--titulares);
  font-size: 1.4rem;
  line-height: 1.18;
}
.punto-texto { margin-top: 0.6rem; color: var(--grafito); max-width: 42ch; }
.oscura .punto-texto { color: var(--ceniza); }

/* ── Formularios ──────────────────────────────────────────────────────
   No envían nada y lo dicen en pantalla, arriba y no en letra pequeña
   al final. Un formulario que se traga los datos en silencio durante
   una demo es la forma más tonta de perder la confianza que la web
   entera está intentando construir. */

.formulario {
  margin-top: 2rem;
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 46rem) {
  .formulario { grid-template-columns: repeat(2, 1fr); }
  .campo.ancho, .campo-casilla, .formulario-acciones { grid-column: 1 / -1; }
}
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo-etiqueta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito);
}
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--oro);
  padding: 0.6rem 0.2rem;
  border-radius: 0;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-bottom-color: var(--negro);
  border-bottom-width: 2px;
  padding-bottom: calc(0.6rem - 1px);
}
.campo-casilla {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--grafito);
}
.campo-casilla input { margin-top: 0.28rem; accent-color: var(--negro); }

.aviso-demo {
  padding: 1rem 1.2rem;
  border: 1px solid var(--oro);
  font-size: 0.9rem;
  color: var(--grafito);
  max-width: 56ch;
}
.oscura .aviso-demo { border-color: var(--oro-claro); color: var(--ceniza); }

/* ── Impuestos y calculadora ─────────────────────────────────────────
   Cada cifra lleva su artículo al lado, con enlace al BOE. Es la única
   parte de la web donde el dato manda sobre el diseño, y por eso va
   entera en mono y sin adornos. */

.impuestos { margin-top: clamp(1.8rem, 1.4rem + 2vw, 3rem); }
.impuesto {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--linea);
}
@media (min-width: 50rem) {
  .impuesto { grid-template-columns: 8.5rem 1fr 1.1fr; align-items: baseline; }
}
.impuesto:last-of-type { border-bottom: 1px solid var(--linea); }
.impuesto-tipo {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* «0,75 %» partido en dos líneas se lee como
                            dos cifras distintas */
}
.impuesto-caso {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-texto);
  display: block;
  margin-bottom: 0.4rem;
}
.impuesto-nombre { font-weight: 500; }
.impuesto-texto { color: var(--grafito); font-size: 0.95rem; margin-top: 0.35rem; }
.impuesto-fuente {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--grafito);
}
.impuesto-fuente a { color: var(--oro-texto); }

.sin-cifra { margin-top: 2.5rem; }
.sin-cifra li {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--linea);
  font-size: 0.96rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline;
}
.sin-cifra .norma {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--grafito);
}

.calculadora {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border: 1px solid var(--linea-clara);
  padding: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
}
.calc-campos {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.4rem;
}
@media (min-width: 40rem) {
  .calc-campos { grid-template-columns: 1fr 1fr; }
}
.oscura .campo input, .oscura .campo select, .oscura .campo textarea {
  color: var(--marfil);
  border-bottom-color: var(--oro-claro);
}
.oscura .campo-etiqueta { color: var(--ceniza); }
.oscura .campo input:focus, .oscura .campo select:focus { border-bottom-color: var(--marfil); }
.oscura .campo select option { color: var(--tinta); }

.calc-resultado { margin-top: 2rem; border-top: 1px solid var(--linea-clara); }
.calc-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--linea-clara);
}
/* Sin esto, `hidden` no oculta nada: display:flex gana a la regla del
   navegador para [hidden]. En segunda mano se veían las filas de IVA y
   AJD con un guion, que es exactamente el error que la calculadora
   existe para no cometer. */
.calc-fila[hidden] { display: none; }
.calc-etiqueta { font-size: 0.95rem; color: var(--ceniza); }
.calc-valor {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.calc-fila.total .calc-etiqueta { color: var(--marfil); font-weight: 500; }
.calc-fila.total .calc-valor { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.calc-nota { margin-top: 1.2rem; font-size: 0.86rem; color: var(--ceniza); max-width: 52ch; }

.aviso-legalillo {
  margin-top: 2rem;
  font-size: 0.86rem;
  color: var(--grafito);
  max-width: 60ch;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--oro);
}
.oscura .aviso-legalillo { color: var(--ceniza); border-inline-start-color: var(--oro-claro); }

/* ── Páginas legales ──────────────────────────────────────────────── */

.legal-seccion { margin-top: 2.8rem; }
.legal-titulo {
  font-family: var(--titulares);
  font-size: 1.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linea);
}
.ficha-identidad {
  margin-top: 2rem;
  display: grid;
  gap: 0.9rem;
}
.ficha-identidad div {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.4rem 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linea);
  font-size: 0.94rem;
}
.ficha-identidad dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito);
  padding-top: 0.2rem;
}
.ficha-identidad dd { margin: 0; }
/* El hueco de un dato que no se inventa. Sobre negro cambia de oro: el
   oro_texto se queda en 3,12 sobre el negro y no llega. */
.pendiente-dato {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--oro-texto);
}
.oscura .pendiente-dato { color: var(--oro-claro); }

/* ── Pie ──────────────────────────────────────────────────────────── */

.pie {
  background: var(--negro);
  color: var(--marfil);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) 2.5rem;
}
.pie-rejilla {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 52rem) {
  .pie-rejilla { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.pie-marca-nombre {
  font-family: var(--titulares);
  font-size: 1.6rem;
  line-height: 1.1;
}
.pie-reclamo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-top: 0.8rem;
}
.pie-columna-titulo {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ceniza);
  margin-bottom: 1rem;
}
.pie-lista li + li { margin-top: 0.65rem; }
.pie-lista a { text-decoration: none; font-size: 0.95rem; border-bottom: 1px solid transparent; }
.pie-lista a:hover { border-bottom-color: var(--oro-claro); }
.pie-cierre {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-clara);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ceniza);
}
.pie-nota { max-width: 68ch; }

/* ── Aparición ────────────────────────────────────────────────────────
   Lo único que se mueve, además del menú. Sube 14 px y aparece. Con
   movimiento reducido, todo nace visible: si .reveal se quedara en
   opacity 0, la página estaría vacía para quien lo tenga activado, y
   eso es exactamente lo que comprueba comprobar.mjs. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.reveal[data-visible='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}