/* ============================================================================
   JIH · Just Invest Here — hoja de estilos
   Mobile-first: los estilos base son para móvil; las @media añaden tablet y
   escritorio por encima. Colores y tipografías según el brandboard oficial.
   ========================================================================== */

/* ------------------------------------------------------------ 0. Tipografía
   Las tres familias se sirven desde este mismo dominio, no desde Google Fonts.
   Así Google no recibe la IP de cada visitante (cumplimiento del RGPD) y la
   página carga sin depender de un servidor externo.

   Ambas están bajo licencia SIL Open Font License 1.1. El texto completo, con
   su aviso de copyright, está en assets/fonts/OFL-Cormorant-Garamond.txt y
   assets/fonts/OFL-Jost.txt, que deben acompañar siempre a los archivos.

   De Cormorant solo se incluye el peso 400, normal y cursiva. De Jost, solo el
   500. Si algún día hace falta otro peso, hay que añadir su archivo aquí.     */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* Jost, solo para el micro-texto en versalitas: etiquetas de sección, botones,
   ubicaciones de ficha, pies de cifra. Es una geométrica de corte Futura, el
   registro que usan las marcas de moda y arquitectura para este tamaño.

   No sustituye a ninguna de las dos tipografías de marca: nada de lo que se
   lee como texto —titulares, párrafos, precios— cambia de familia.            */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Paleta principal del brandboard */
  --gold:        #B08D33;
  --gold-light:  #D0BF65;
  --sage:        #ADAC40;
  --navy:        #0E2A52;
  --black:       #000000;
  --white:       #FFFFFF;

  /* Capas de fondo: negro de marca, con superficies apenas elevadas */
  --bg:          #000000;
  --bg-alt:      #0A0A09;
  --surface:     #121110;
  --surface-2:   #1A1815;

  /* Texto.
     Sobre negro, el blanco puro es frío y hace que cualquier sitio parezca una
     plantilla. Estos neutros llevan algo de luz cálida —el mismo marfil que las
     referencias usan de fondo— y conviven mucho mejor con el dorado. */
  --warm:        248, 244, 236;
  --text:        rgba(248, 244, 236, 0.92);
  --text-muted:  rgba(248, 244, 236, 0.62);
  --text-faint:  rgba(248, 244, 236, 0.40);

  /* Líneas */
  --line:        rgba(248, 244, 236, 0.12);
  --line-gold:   rgba(176, 141, 51, 0.32);

  /* Micro-tipografía: las etiquetas pequeñas en versalitas.
     Antes cada una traía su propio tamaño y su propio espaciado, y casi todas
     iban en dorado vivo. A 11px el #B08D33 se lee amarillo, y repetido once
     veces deja de ser un acento para convertirse en el color por defecto.
     Ahora hay una sola escala y el dorado queda para lo que de verdad acentúa:
     botones, cifras, la raya que abre cada sección.

     La Jost es más ancha y más regular que la Times en caja alta, así que a
     igual tamaño pesa más: estos valores van un punto por debajo de los que
     tenían las mismas etiquetas cuando iban en serif.                         */
  --micro:       0.68rem;
  --micro-sm:    0.62rem;
  --track:       0.26em;
  --track-tight: 0.16em;

  /* Tipografías oficiales JIH.
     Para probar Playfair Display en los títulos, cambia solo --font-display. */
  --font-display: 'Times New Roman', Times, 'Liberation Serif', serif;
  --font-body:    'Cormorant Garamond', 'Times New Roman', Times, serif;
  /* Solo para versalitas diminutas. Nunca para texto corrido ni titulares. */
  --font-micro:   'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Ritmo vertical */
  --space-section: 72px;
  --gutter: 20px;
  --maxw: 1240px;

  --radius: 2px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Altura real de la cabecera fija; la usa scroll-margin-top */
  --header-h: 64px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem;      /* Cormorant es estrecha: necesita cuerpo generoso */
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Aire inferior para que el botón flotante de WhatsApp no tape contenido */
  padding-bottom: 88px;
}

body.is-locked { overflow: hidden; }

/* height: auto es la red de seguridad contra logos deformados. Las imágenes
   llevan sus medidas reales en los atributos width/height del HTML, y el
   navegador las trata como si fueran CSS: si una regla fija solo el ancho, la
   altura se queda en la del archivo y la imagen sale estirada. */
img { max-width: 100%; height: auto; display: block; }

/* Sin esto, cualquier regla con display: flex/grid anularía el atributo
   hidden y mostraría bloques que deberían estar ocultos. */
[hidden] { display: none !important; }
a { color: var(--gold-light); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0.005em;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--black);
  padding: 12px 18px; font-family: var(--font-micro);
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------------------------------------------------------- 3. Estructura */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: 48px; }

.section-head { margin-bottom: 44px; }
.section-head--center { text-align: center; }

/* La etiqueta que abre cada sección.
   Va en neutro, no en dorado: lo que aporta la marca es la raya corta que la
   precede. Un milímetro de oro pesa más que veinte letras amarillas. */
.eyebrow {
  font-family: var(--font-micro);
  font-size: var(--micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  height: 1px;
  width: 26px;
  background: var(--gold);
  flex: none;
}

/* Centrada, la raya descoloca: se deja solo la palabra. El padding compensa el
   espaciado que el navegador añade detrás de la última letra, que si no
   desplaza el conjunto hacia la izquierda. */
.section-head--center .eyebrow {
  display: block;
  padding-left: var(--track);
  color: var(--text-faint);
}
.section-head--center .eyebrow::before { display: none; }

.section-title {
  font-size: clamp(2rem, 7.4vw, 3.4rem);
  line-height: 1.06;
  /* A tamaños grandes, la Times abre demasiado entre letras */
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 0 18px;
}
.section-head--center .section-title { margin-inline: auto; }

.section-lede {
  color: var(--text-muted);
  /* Columna estrecha y entrelínea generosa: es lo que separa un texto
     editorial de un párrafo de plantilla. */
  max-width: 46ch;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.75;
}
.section-head--center .section-lede { margin-inline: auto; }

/* ------------------------------------------------------------- 4. Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;              /* cómodo para el pulgar */
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-micro);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .18s var(--ease);
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--black); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.74rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ----------------------------------------------------------- 5. Cabecera */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}

/* El desenfoque va en esta capa y no en .header. Si se aplica al propio
   .header, el navegador lo convierte en raíz de fondo y el menú desplegable
   —que es hijo suyo— se vuelve translúcido y deja ver el hero por detrás. */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .3s var(--ease);
}
.header.is-stuck::before { background: rgba(0, 0, 0, 0.94); }
.header.is-stuck { border-bottom-color: var(--line-gold); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
}

/* El logo dorado vive siempre sobre negro, así conserva su contraste */
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 38px; width: auto; }
.brand__text { display: none; }

.header__actions { display: flex; align-items: center; gap: 8px; }

/* Selector de idioma */
.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-family: var(--font-micro);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 9px 10px;
  min-height: 40px;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang button.is-active { color: var(--black); background: var(--gold); }
.lang button:not(.is-active):hover { color: var(--white); }

.header__cta { display: none; }

/* Botón hamburguesa */
.burger {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block; width: 18px; height: 1px;
  background: var(--white);
  position: relative;
  transition: background .2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: ''; position: absolute; left: 0;
  width: 18px; height: 1px; background: var(--white);
  transition: transform .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menú desplegable en móvil */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: var(--black);
  border-bottom: 1px solid var(--line-gold);
  padding: 8px var(--gutter) 24px;
  display: grid;
  gap: 2px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.nav.is-open { opacity: 1; transform: none; pointer-events: auto; }

.nav a {
  color: var(--text);
  font-family: var(--font-micro);
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.nav a:last-of-type { border-bottom: 0; }
.nav .btn { margin-top: 14px; }

/* ---------------------------------------------------------------- 6. Hero */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 24px);
  padding-bottom: 44px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  /* En móvil el texto ocupa todo el ancho, así que el velo es vertical.
     En pantallas anchas se le añade otro lateral (ver más abajo) que oscurece
     solo el lado del texto y deja la fotografía luciendo a la derecha. */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.40) 24%,
      rgba(0,0,0,0.62) 58%,
      rgba(0,0,0,0.88) 84%,
      var(--bg) 100%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

/* Sombra suave para que el texto se lea sobre cualquier fotografía,
   también si mañana se cambia por otra más clara. */
.hero__eyebrow,
.hero__title,
.hero__sub,
.hero__baseline { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.62); }

/* Sobre la fotografía el dorado pierde fuerza y se ensucia. En marfil se lee
   limpio, y el oro de la marca ya está presente en el logotipo de la cabecera. */
.hero__eyebrow {
  font-family: var(--font-micro);
  font-size: var(--micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--warm), 0.86);
  margin: 0 0 22px;
}
.hero__title {
  font-size: clamp(1.85rem, 7.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  /* Suficiente para que "Invertir no es comprar." quepa en una sola línea
     y el salto caiga donde lo marca el <br>, no donde toque. */
  max-width: 24ch;
}
.hero__sub {
  color: rgba(var(--warm), 0.80);
  max-width: 44ch;
  margin: 0 0 34px;
  font-size: 1.1rem;
  line-height: 1.7;
}
/* El titular de la página de propietarios es más largo que el de la landing:
   necesita más ancho para que el salto caiga donde marca el <br>. */
.hero--sell .hero__title { max-width: 32ch; }

.hero__ctas { display: grid; gap: 12px; }
.hero__baseline {
  margin: 34px 0 0;
  font-family: var(--font-micro);
  font-size: var(--micro-sm);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ----------------------------------------------------------- 7. Buscador */
.search {
  background: var(--surface);
  border: 1px solid var(--line-gold);
  padding: 22px 18px;
}
.search__grid { display: grid; gap: 14px; }

.field { display: grid; gap: 7px; }
/* Una etiqueta de formulario no es un acento: solo dice qué va en el campo */
.field > label {
  font-family: var(--font-micro);
  font-size: var(--micro-sm);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .hint { color: var(--text-faint); text-transform: none; letter-spacing: 0; font-size: 0.8rem; }

select, input, textarea {
  width: 100%;
  min-height: 50px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color .2s var(--ease);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select:focus, input:focus, textarea:focus { border-color: var(--gold); outline: none; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B08D33' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
::placeholder { color: var(--text-faint); opacity: 1; }

.search__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 18px;
}
.search__count {
  font-family: var(--font-micro);
  font-size: 0.72rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-muted);
}
.search__count b { color: var(--gold); font-weight: 400; }
.link-reset {
  background: none; border: 0; padding: 0;
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.link-reset:hover { color: var(--gold-light); }

/* ------------------------------------------------------------ 8. Tarjetas */
.grid { display: grid; gap: 22px; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: var(--line-gold); }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); }
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.04); }
}

/* Marcador de posición de marca para las propiedades sin foto todavía */
.card__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(176,141,51,0.16), transparent 62%),
    linear-gradient(160deg, #15130F 0%, #0B0A08 100%);
  padding: 20px;
  text-align: center;
}
.card__placeholder img { width: 52px; height: auto; opacity: 0.6; }
.card__placeholder span {
  font-family: var(--font-micro);
  font-size: var(--micro-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-left: var(--track);
}

.card__badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
  z-index: 2;
}
.badge {
  font-family: var(--font-micro);
  /* Va encima de la fotografía: por debajo de esto deja de leerse bien */
  font-size: 0.63rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--line);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.badge--gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.badge--sold { background: rgba(0,0,0,0.82); border-color: rgba(255,255,255,0.3); }

.card__body {
  padding: 20px 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
/* La fila de tarjetas era la que más amarillo acumulaba: una ubicación dorada
   por ficha, nueve por pantalla. En neutro, el ojo va antes al nombre y al
   precio, que es lo que vende. */
.card__location {
  font-family: var(--font-micro);
  font-size: var(--micro-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card__title {
  font-size: 1.45rem;
  line-height: 1.18;
  letter-spacing: -0.005em;
}
.card__price {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--white);
  letter-spacing: 0.02em;
}
.card__price small {
  display: block;
  font-size: var(--micro-sm);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}
.card__specs {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.card__specs span { display: inline-flex; align-items: center; gap: 6px; }
.card__specs em { font-style: normal; color: var(--text); }
.card__cta { margin-top: 14px; }

/* El título es un botón para que la tarjeta entera sea clicable y accesible
   con el teclado, pero debe leerse como un título, no como un control. */
.card__link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.card__link:hover { color: var(--gold-light); }

/* La tarjeta entera es clicable, sin anidar botones dentro de enlaces */
.card__link::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
}

/* Variante Luxury: más aire, foto más alta */
.grid--luxury .card__media { aspect-ratio: 3 / 2; }
.grid--luxury .card__title { font-size: 1.55rem; }
.grid--luxury .card { background: linear-gradient(180deg, var(--surface) 0%, #0D0C0A 100%); }

/* Tarjetas bloqueadas de la colección privada */
.card--locked .card__media { filter: blur(14px) saturate(0.5) brightness(0.55); }
.card--locked .card__body { filter: blur(5px); user-select: none; }
.card--locked { pointer-events: none; }

/* Si una ficha bloqueada aún no tiene fotografía, se deja el panel de marca
   liso. Difuminar el logotipo lo convertía en un borrón dorado vertical. */
.card--locked .card__placeholder img,
.card--locked .card__placeholder span { display: none; }

.locked-wrap { position: relative; }
.locked-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.86) 72%, var(--bg) 100%);
  pointer-events: none;
}

/* ------------------------------------------------- 9. Acceso privado Luxury */
.gate {
  position: relative;
  z-index: 3;
  margin-top: -110px;
  background: linear-gradient(180deg, rgba(10,9,8,0.96) 0%, var(--surface) 100%);
  border: 1px solid var(--line-gold);
  padding: 34px 20px 30px;
  text-align: center;
  box-shadow: var(--shadow);
}
.gate__icon { width: 44px; height: auto; margin: 0 auto 16px; opacity: 0.85; }
.gate__title { font-size: clamp(1.6rem, 6vw, 2.3rem); letter-spacing: -0.015em; margin-bottom: 14px; }
.gate__text { color: var(--text-muted); max-width: 46ch; line-height: 1.75; margin: 0 auto 24px; }
/* Este sí es un acento: dice cuántas fichas quedan detrás del formulario */
.gate__count {
  font-family: var(--font-micro);
  font-size: var(--micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
  padding-left: var(--track);
  margin-bottom: 22px;
}
.gate .form { max-width: 460px; margin-inline: auto; text-align: left; }

.notice-ok {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-gold);
  background: rgba(176, 141, 51, 0.08);
  color: var(--gold-light);
  padding: 14px 18px;
  font-size: 0.98rem;
  margin-bottom: 26px;
}

/* --------------------------------------------------------- 10. Formularios */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }

.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.92rem; line-height: 1.45;
  color: var(--text-muted);
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0;
  margin: 2px 0 0; flex: none;
  accent-color: var(--gold);
}
.consent a { text-decoration: underline; text-underline-offset: 3px; }

/* Trampa antispam: invisible para las personas, tentadora para los robots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__msg { font-size: 0.98rem; margin: 0; min-height: 1.4em; }
.form__msg.is-ok    { color: var(--gold-light); }
.form__msg.is-error { color: #E5A3A3; }

/* --------------------------------------------------- 11. Propuesta de valor */
.values { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value {
  background: var(--bg);
  padding: 28px 22px;
  display: grid; gap: 10px;
}
.value h3 { font-size: 1.35rem; letter-spacing: -0.005em; }
.value p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }

/* Es un contador, no un dato: debe pesar menos que el titular que acompaña.
   Después de `.value p` porque el número también es un <p>. */
.value .value__num {
  font-family: var(--font-micro);
  font-size: var(--micro);
  letter-spacing: var(--track);
  color: var(--text-faint);
}

/* ------------------------------- 11b. Captación: los dos compradores */
.compare { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.compare__side {
  background: var(--bg);
  padding: 30px 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}
/* El lado internacional es el argumento: se marca en dorado. */
.compare__side--gold {
  background: linear-gradient(180deg, rgba(176,141,51,0.09) 0%, var(--bg) 70%);
  border-top: 2px solid var(--gold);
}
.compare__side h3 { font-size: 1.45rem; letter-spacing: -0.008em; }
.compare__side p { margin: 0; color: var(--text-muted); font-size: 1.02rem; line-height: 1.72; }

/* Va después de `.compare__side p` y con la misma especificidad a propósito:
   el tag es un <p> dentro del lado, y si se declara antes pierde el tamaño y
   el color contra esa regla. */
.compare__side .compare__tag {
  font-family: var(--font-micro);
  font-size: var(--micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.compare__side--gold .compare__tag { color: var(--gold); }

.compare__close {
  max-width: 52ch;
  margin: 36px auto 0;
  text-align: center;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.7;
}

/* --------------------------------- 11c. Franja de captación en la landing */
.band {
  border: 1px solid var(--line-gold);
  background: linear-gradient(120deg, rgba(176,141,51,0.10) 0%, var(--surface) 62%);
  padding: 30px 22px;
  display: grid;
  gap: 16px;
}
.band__title { font-size: 1.6rem; letter-spacing: -0.01em; }
.band p { margin: 0; color: var(--text-muted); max-width: 46ch; line-height: 1.72; }
.band .btn { justify-self: start; }

/* ------------------------------------------------------- 12. Cifras / prueba */
.stats { display: grid; gap: 1px; background: var(--line-gold); border: 1px solid var(--line-gold); }
.stat { background: var(--bg-alt); padding: 36px 20px; text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 14px;
}
/* En versalitas la cifra manda y el texto se convierte en su pie */
.stat__label {
  color: var(--text-faint);
  font-family: var(--font-micro);
  font-size: var(--micro-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.6;
  padding-left: var(--track);
  margin: 0;
}
.stats-note {
  text-align: center; color: var(--text-faint);
  font-size: 0.9rem; margin: 20px 0 0;
}

.quotes { display: grid; gap: 22px; margin-top: 46px; }
.quote {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 20px;
}
.quote p { margin: 0 0 12px; font-size: 1.12rem; font-style: italic; color: var(--text); }
.quote footer {
  font-family: var(--font-micro);
  font-size: var(--micro); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--text-muted);
}
.quote footer span { display: block; color: var(--text-faint); letter-spacing: 0.08em; margin-top: 4px; }

/* --------------------------------------------------------- 13. Lead magnets */
.magnets { display: grid; gap: 18px; }
.magnet {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 26px 20px;
  display: grid; gap: 12px;
  transition: border-color .3s var(--ease);
}
.magnet:hover { border-color: var(--line-gold); }
.magnet h3 { font-size: 1.3rem; letter-spacing: -0.005em; }
.magnet p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.7; flex: 1; }

/* Después de `.magnet p`: el tag es un <p> y con una sola clase perdía */
.magnet .magnet__tag {
  font-family: var(--font-micro);
  font-size: var(--micro-sm); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-faint);
  flex: none;
}
.magnet .btn { margin-top: 6px; }

/* ---------------------------------------------------------- 14. Ficha modal */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  padding: 0;
}
.modal[open] { display: block; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
}
.modal__panel {
  position: relative;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 0;
}
.modal__close {
  position: sticky; top: 0; z-index: 5;
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: rgba(0,0,0,0.78);
  border: 1px solid var(--line);
  color: var(--white);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.modal__close:hover { color: var(--gold); border-color: var(--gold); }

.modal__gallery { position: relative; margin-top: -48px; }
.modal__gallery .card__placeholder { position: relative; aspect-ratio: 4 / 3; }
.modal__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.modal__thumbs { display: flex; gap: 8px; padding: 8px var(--gutter) 0; }
.modal__thumbs img { width: 76px; aspect-ratio: 1; object-fit: cover; cursor: pointer; opacity: 0.55; border: 1px solid transparent; }
.modal__thumbs img.is-active, .modal__thumbs img:hover { opacity: 1; border-color: var(--gold); }

.modal__body { padding: 26px var(--gutter) 48px; }
.modal__location {
  font-family: var(--font-micro);
  font-size: var(--micro-sm); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 10px;
}
.modal__title { font-size: clamp(1.7rem, 7vw, 2.6rem); margin: 0 0 12px; }
.modal__price {
  font-family: var(--font-display);
  font-size: 1.7rem; color: var(--white); margin: 0 0 24px;
}
.modal__desc { color: var(--text); font-size: 1.1rem; margin: 0 0 26px; }

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 28px;
}
.spec { background: var(--bg); padding: 16px 14px; }
.spec dt {
  font-family: var(--font-micro);
  font-size: 0.6rem; letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 6px;
}
.spec dd { margin: 0; font-size: 1.05rem; color: var(--text); }

.amenities { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 9px; }
.amenities li {
  position: relative; padding-left: 20px;
  color: var(--text-muted); font-size: 1rem;
}
.amenities li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--gold);
}

.modal__block-title {
  font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 14px;
  font-family: var(--font-micro);
}
.modal__form {
  border: 1px solid var(--line-gold);
  background: var(--surface);
  padding: 24px 18px;
}
.modal__ref {
  font-size: var(--micro-sm); color: var(--text-faint);
  letter-spacing: var(--track-tight); text-transform: uppercase;
  font-family: var(--font-micro);
  margin: 24px 0 0;
}

/* ------------------------------------------------------------ 15. Pie */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line-gold);
  padding-block: 54px 32px;
}
.footer__grid { display: grid; gap: 34px; }
/* En el pie se usa el ícono solo y el nombre compuesto como texto real.
   El logotipo completo rasterizado dejaba las letras "JUST INVEST HERE"
   diminutas y borrosas a este tamaño. */
.footer__brand img { height: 78px; width: auto; margin-bottom: 16px; }
.footer__wordmark {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  line-height: 1.3;
}
.footer__tagline { color: var(--text-muted); margin: 0; max-width: 34ch; }
/* En el pie el dorado se reserva para el nombre de la marca. Los tres
   encabezados de columna solo ordenan enlaces. */
.footer h4 {
  font-family: var(--font-micro);
  font-size: var(--micro-sm); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--gold-light); }

.footer__bottom {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid; gap: 14px;
  color: var(--text-faint);
  font-size: 0.86rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ------------------------------------------------- 16. WhatsApp flotante */
.wa {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #1E1C18;
  border: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.wa:hover { transform: scale(1.06); background: var(--gold); }
.wa svg { width: 28px; height: 28px; fill: var(--gold); transition: fill .25s var(--ease); }
.wa:hover svg { fill: var(--black); }

/* ------------------------------------------------------ 17. Aviso cookies */
.cookies {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  background: rgba(10, 10, 9, 0.98);
  border: 1px solid var(--line-gold);
  padding: 18px;
  display: grid; gap: 14px;
  box-shadow: var(--shadow);
  /* No ocupa el hueco del botón de WhatsApp */
  margin-right: 82px;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }
.cookies__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* -------------------------------------------------- 18. Estados de carga */
.state {
  text-align: center;
  color: var(--text-muted);
  padding: 50px 20px;
  font-size: 1.05rem;
}
.skeleton-grid { display: grid; gap: 22px; }
.skeleton {
  aspect-ratio: 4 / 3;
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* --------------------------------------------- 19. Página de texto legal */
.legal { padding-top: calc(var(--header-h) + 48px); }
.prose { max-width: 70ch; }
.prose h1 { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 10px; }
.prose h2 {
  font-size: 1.45rem; margin: 40px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--gold-light);
}
.prose h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { padding-left: 20px; display: grid; gap: 8px; }
.prose strong { color: var(--text); font-weight: 400; }
.prose .updated {
  font-family: var(--font-micro);
  font-size: var(--micro-sm); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 36px;
}
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.96rem; }
.prose th, .prose td {
  border: 1px solid var(--line); padding: 10px 12px;
  text-align: left; vertical-align: top; color: var(--text-muted);
  /* Sin esto, una celda con un correo largo o una dirección sin espacios no
     puede encogerse y empuja la tabla fuera de la pantalla en móviles
     estrechos. Una tabla no debe poder provocar scroll horizontal. */
  overflow-wrap: anywhere;
}
.prose th { color: var(--text-faint); font-family: var(--font-micro); font-weight: 500;
  font-size: var(--micro-sm); letter-spacing: var(--track-tight); text-transform: uppercase; }

/* ============================================================================
   20. TABLET — a partir de 720px
   ========================================================================== */
@media (min-width: 720px) {
  :root { --gutter: 32px; --space-section: 96px; --header-h: 72px; }

  .brand img { height: 44px; }
  .brand__text {
    display: block;
    font-family: var(--font-micro);
    font-size: var(--micro-sm); letter-spacing: var(--track); text-transform: uppercase;
    color: var(--text-faint);
    border-left: 1px solid var(--line-gold);
    padding-left: 12px;
  }

  .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
  .hero__ctas .btn { min-width: 232px; }


  /* Velo lateral: contraste donde está el texto, foto limpia a la derecha. */
  .hero__media::after {
    background:
      linear-gradient(to right,
        rgba(0,0,0,0.80) 0%,
        rgba(0,0,0,0.52) 38%,
        rgba(0,0,0,0.12) 68%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.40) 0%,
        rgba(0,0,0,0.12) 28%,
        rgba(0,0,0,0.38) 66%,
        rgba(0,0,0,0.86) 88%,
        var(--bg) 100%);
  }

  .search { padding: 28px 26px; }
  .search__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .grid--luxury { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .values { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: repeat(2, 1fr); }
  .band {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 34px 38px;
  }
  .band__text { display: grid; gap: 8px; }
  .magnets { grid-template-columns: repeat(3, 1fr); }
  .magnet { grid-template-rows: auto auto 1fr auto; }
  .quotes { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .form__row--2 { grid-template-columns: repeat(2, 1fr); }

  .gate { padding: 46px 40px 40px; }

  .modal__panel {
    max-width: 960px;
    margin: 4vh auto;
    height: auto;
    max-height: 92dvh;
    border: 1px solid var(--line-gold);
  }
  .modal__close { position: absolute; top: 10px; right: 10px; margin: 0; }
  .modal__gallery { margin-top: 0; }
  /* En pantallas anchas la foto no debe empujar el precio fuera de la vista. */
  .modal__gallery img,
  .modal__gallery .card__placeholder { aspect-ratio: 16 / 9; max-height: 46dvh; }
  .modal__body { padding: 34px 40px 48px; }
  .specs { grid-template-columns: repeat(4, 1fr); }
  .amenities { grid-template-columns: repeat(2, 1fr); gap: 9px 26px; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }

  .cookies {
    left: auto; right: 90px; max-width: 520px; margin-right: 0;
    grid-template-columns: 1fr auto; align-items: center; gap: 20px;
  }
}

/* ============================================================================
   21. ESCRITORIO — a partir de 1100px
   ========================================================================== */
@media (min-width: 1100px) {
  :root { --space-section: 120px; }

  .burger { display: none; }
  .header__cta { display: inline-flex; }

  .nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 34px;
    background: none;
    border: 0;
    padding: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
  }
  .nav a {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    padding: 8px 0;
    border: 0;
    color: var(--text-muted);
    position: relative;
  }
  .nav a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--gold);
    transition: right .3s var(--ease);
  }
  .nav a:hover { color: var(--white); }
  .nav a:hover::after { right: 0; }
  .nav .btn { display: none; }

  .hero { min-height: 100svh; align-items: center; padding-bottom: 80px; }
  .hero__title { font-size: clamp(3.2rem, 5vw, 4.6rem); }

  .search__grid { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
  .search__grid .btn { min-width: 170px; }

  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid--luxury { grid-template-columns: repeat(3, 1fr); }
  .grid--business { grid-template-columns: repeat(2, 1fr); }

  .values { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }

  .section-head--split {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  }
  .section-head--split .section-lede { margin: 0; }
}

/* Pantallas muy estrechas (360px y menos): recorta el aire lateral */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .btn { padding: 14px 18px; font-size: 0.76rem; letter-spacing: 0.12em; }
  .card__body { padding: 18px 15px 20px; }
}