/* ==========================================================================
   KENSINGTON Maresme — Sistema de diseño
   Tokens extraídos en vivo de kensington-international.com (jul-2026).
   ========================================================================== */

:root {
  /* Alto real de la cabecera. Lo recalcula `landing.js` al cargar y al girar
     el móvil; este valor es el que sale con el logotipo actual y sirve de
     respaldo si el script no llega a ejecutarse. Lo usa el hero para descontar
     la cabecera de la primera pantalla. */
  --k-header-h: 51px;

  /* --- Color de marca (valores exactos de su web) --- */
  --k-ink:            #07211d;
  --k-ink-2:          #082823;
  --k-primary:        #1c5749;
  --k-primary-hover:  #16473c;
  --k-primary-100:    #42574f;
  --k-primary-200:    #364741;
  --k-surface:        #fcfffe;
  --k-surface-soft:   #f5f8f7;
  --k-white:          #ffffff;
  --k-border:         #d6dfdc;
  --k-border-dark:    rgba(252, 255, 254, .22);

  /* --- Oro (DECISIÓN CERRADA por la marca, julio 2026 — no cambiar) ---
     Historia completa, para que nadie la deshaga sin saberla: el dorado sale
     de la web de Kensington. Su manual 2023 no lo recoge y la marca pidió
     sustituirlo por el único no-verde del manual, el Acento terracota
     #cd9c87. Se publicaron LAS DOS versiones (la terracota como principal y
     esta dorada en /dorada) y, viéndolas en vivo, la marca eligió el DORADO.
     Esto es lo que aprobaron mirándolo; no se "corrige" hacia el manual.
       base   → filetes, iconos y microtipografía sobre blanco.
       cta    → relleno de botón con texto tinta encima (7,27:1).
       bright → realces sobre fondos verde oscuro y hover de botón (9,28:1).
       soft   → lavado frío casi blanco para fondos de hover. */
  --k-gold:        #a48d5c;
  --k-gold-cta:    #c2a76d;
  --k-gold-bright: #d9bd82;
  --k-gold-soft:   #edf7f6;
  --k-gold-glow:   rgba(194, 167, 109, .38);

  /* --- Tipografía ---
     Proxima Nova (Adobe Fonts) con el kit bloqueado por dominio; Mulish es el
     sustituto libre más fiel. Si el cliente aporta su kit, esta cascada lo
     toma sola sin tocar nada más. */
  --k-font: "proxima-nova", "Mulish", -apple-system, BlinkMacSystemFont,
            "Segoe UI", system-ui, sans-serif;

  --k-h1:      43.2px;
  --k-h1-lh:   50.5px;
  --k-h2:      32px;
  --k-h2-lh:   37.4px;
  --k-h3:      24px;
  --k-h4:      20px;
  --k-body:    16px;
  --k-body-lh: 24px;
  --k-small:   14px;

  --k-gutter:      24px;
  --k-gutter-lg:   80px;
  --k-section:     64px;
  --k-section-lg:  80px;
  --k-max:         1440px;
  --k-radius:      4px;
  --k-ctrl-h:      48px;

  --k-ease: cubic-bezier(.22, .61, .36, 1);
  --k-shadow-sm: 0 2px 10px rgba(7, 33, 29, .06);
  --k-shadow-md: 0 14px 34px rgba(7, 33, 29, .13);
  --k-shadow-lg: 0 22px 60px rgba(7, 33, 29, .26);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  font-family: var(--k-font);
  font-size: var(--k-body);
  line-height: var(--k-body-lh);
  font-weight: 400;
  color: var(--k-ink-2);
  background: var(--k-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* También el retardo: los paneles retrasan el `visibility: hidden` para
       que dé tiempo a salir. Sin animación no hay nada que esperar, y si el
       retardo se quedara, el menú tardaría un tercio de segundo en cerrarse. */
    transition-delay: 0s !important;
  }
}

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

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

/* ==========================================================================
   Layout
   ========================================================================== */

.k-section { padding: var(--k-section) var(--k-gutter); }
.k-container { width: 100%; max-width: var(--k-max); margin-inline: auto; }

.k-dark { background: var(--k-ink); color: var(--k-surface); }
.k-dark .k-lead, .k-dark .k-muted { color: rgba(252, 255, 254, .78); }
.k-soft { background: var(--k-surface-soft); }

@media (min-width: 1024px) {
  .k-section { padding: var(--k-section-lg) var(--k-gutter-lg); }
}

/* ==========================================================================
   Tipografía
   Kensington nunca usa negrita ni versalitas en titulares grandes: el énfasis
   sube un solo peso. Ese contraste sutil es lo que hace que se lea como suyo.
   ========================================================================== */

.k-h1, .k-h2 {
  font-size: var(--k-h2);
  line-height: var(--k-h2-lh);
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  text-wrap: balance;
}
.k-h1 strong, .k-h2 strong { font-weight: 500; }

.k-h3 { font-size: var(--k-h3); line-height: 1.25; font-weight: 400; }
.k-h4 { font-size: var(--k-h4); line-height: 1.35; font-weight: 400; }

.k-lead {
  font-size: 17px;
  line-height: 27px;
  color: var(--k-primary-100);
  max-width: 62ch;
  text-wrap: pretty;
}
.k-muted { color: var(--k-primary-100); }

.k-section-head { margin-bottom: 32px; }
.k-section-head .k-lead { margin-top: 14px; }

@media (min-width: 1024px) {
  .k-h1, .k-h2 { font-size: var(--k-h1); line-height: var(--k-h1-lh); }
  .k-h3 { font-size: 28px; }
  .k-lead { font-size: 18px; line-height: 29px; }
  .k-section-head { margin-bottom: 44px; }
}

/* ==========================================================================
   Botones
   48px, radio 4px, peso 600, sin mayúsculas — como los suyos. La diferencia:
   los CTA llevan peso visual real (oro claro + halo) para que se vea dónde
   hay que pulsar.
   ========================================================================== */

.k-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--k-ctrl-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--k-radius);
  font-size: var(--k-body);
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color .22s var(--k-ease), color .22s var(--k-ease),
              border-color .22s var(--k-ease), box-shadow .22s var(--k-ease),
              transform .22s var(--k-ease);
}
.k-btn svg { flex: none; }
.k-btn:active { transform: translateY(1px); }

/* CTA principal. El halo dorado es lo que lo separa del fondo verde. */
.k-btn--gold {
  background: var(--k-gold-cta);
  border-color: var(--k-gold-cta);
  color: var(--k-ink);
  box-shadow: 0 6px 22px var(--k-gold-glow);
}
.k-btn--gold:hover {
  background: var(--k-gold-bright);
  border-color: var(--k-gold-bright);
  box-shadow: 0 10px 30px var(--k-gold-glow);
  transform: translateY(-2px);
}

.k-btn--primary {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: var(--k-surface);
  box-shadow: 0 4px 16px rgba(28, 87, 73, .26);
}
.k-btn--primary:hover {
  background: var(--k-primary-hover);
  border-color: var(--k-primary-hover);
  box-shadow: 0 8px 24px rgba(28, 87, 73, .34);
  transform: translateY(-2px);
}

.k-btn--outline {
  background: transparent;
  border-color: var(--k-border);
  color: var(--k-ink-2);
}
.k-btn--outline:hover { border-color: var(--k-ink-2); background: var(--k-ink-2); color: var(--k-surface); }

.k-btn--light { background: var(--k-surface); border-color: var(--k-surface); color: var(--k-ink); }
.k-btn--light:hover { background: var(--k-white); transform: translateY(-2px); }

/* Sobre fondo oscuro: borde marfil sólido, no un gris que se pierde */
.k-btn--ghost-light {
  background: rgba(252, 255, 254, .07);
  border-color: rgba(252, 255, 254, .55);
  color: var(--k-surface);
}
.k-btn--ghost-light:hover {
  background: var(--k-surface);
  border-color: var(--k-surface);
  color: var(--k-ink);
  transform: translateY(-2px);
}

.k-btn--block { width: 100%; }
.k-btn--sm { min-height: 44px; padding: 0 16px; font-size: var(--k-small); }
@media (min-width: 1024px) { .k-btn--sm { min-height: 42px; } }

.k-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--k-primary);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color .2s var(--k-ease);
}
.k-link:hover { color: var(--k-primary-hover); }
.k-dark .k-link { color: var(--k-gold-cta); }

/* Antetítulo de la ficha: tipología y ubicación, sin filete decorativo */
.k-kicker {
  display: block;
  font-size: 12px; line-height: 1.5; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-gold); margin-bottom: 14px;
}

/* ==========================================================================
   Agenda de visitas — selector de día y hora
   ========================================================================== */

.kag__load, .kag__vacio {
  padding: 24px 20px; text-align: center;
  font-size: 14px; line-height: 22px; color: var(--k-primary-100);
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  background: var(--k-surface-soft);
}
.kag__lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-primary-100); margin-bottom: 10px;
}
.kag__lbl--h { margin-top: 22px; }

/* Los días se desplazan en horizontal: en móvil no caben catorce en columna */
.kag__dias {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.kag__dias::-webkit-scrollbar { display: none; }
.kag__dia {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 62px; min-height: 74px; padding: 9px 4px;
  display: grid; place-content: center; gap: 1px;
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  background: var(--k-surface); cursor: pointer; text-align: center;
  transition: border-color .18s var(--k-ease), background-color .18s var(--k-ease);
}
.kag__dia:hover { border-color: var(--k-gold); background: var(--k-gold-soft); }
.kag__dia.is-sel { border-color: var(--k-primary); background: var(--k-primary); color: var(--k-surface); }
.kag__dow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--k-primary-100); }
.kag__dia.is-sel .kag__dow, .kag__dia.is-sel .kag__mes { color: rgba(252,255,254,.75); }
.kag__num { font-size: 21px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kag__mes { font-size: 11px; color: var(--k-primary-100); }

.kag__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.kag__hora {
  min-height: 46px; padding: 0 8px;
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  background: var(--k-surface);
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .18s var(--k-ease), background-color .18s var(--k-ease), color .18s var(--k-ease);
}
.kag__hora:hover { border-color: var(--k-gold); background: var(--k-gold-soft); }
.kag__hora.is-sel { border-color: var(--k-primary); background: var(--k-primary); color: var(--k-surface); }
.kag__nota { margin-top: 14px; font-size: 12px; line-height: 18px; color: var(--k-primary-100); }

/* ==========================================================================
   Header
   ========================================================================== */

.k-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--k-ink);
  color: var(--k-surface);
  border-bottom: 1px solid var(--k-border-dark);
}
.k-header__inner {
  max-width: var(--k-max);
  margin-inline: auto;
  padding: 12px var(--k-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.k-header__logo { display: inline-flex; align-items: center; min-height: 44px; margin: -9px 0; }
.k-header__logo img { height: 26px; width: auto; }

.k-header__nav { display: none; }
.k-header__nav a {
  font-size: var(--k-small);
  color: rgba(252, 255, 254, .82);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--k-ease), border-color .2s var(--k-ease);
}
.k-header__nav a:hover { color: var(--k-surface); border-bottom-color: var(--k-gold-cta); }

.k-header__actions { display: flex; align-items: center; gap: 10px; }
.k-header__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; margin: -13px 0;
  font-size: var(--k-small); font-weight: 600; color: var(--k-surface);
}
.k-header__tel span { display: none; }
.k-header__cta { display: none; }

/* Menú lateral: sólo existe en móvil (ver el bloque "DISEÑO MÓVIL") */
.k-burger { display: none; }
.k-drawer { display: none; }

@media (min-width: 1024px) {
  .k-header__inner { padding: 14px var(--k-gutter-lg); }
  .k-header__logo img { height: 34px; }
  .k-header__nav { display: flex; align-items: center; gap: 28px; }
  .k-header__tel span, .k-header__cta { display: inline-flex; }
  .k-header__tel { margin: 0; }
  .k-header__actions { gap: 20px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.k-hero {
  position: relative; isolation: isolate;
  background: var(--k-ink);
  color: var(--k-surface);
  min-height: 560px;
  display: flex; align-items: flex-end;
}
.k-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.k-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: k-drift 26s var(--k-ease) infinite alternate;
}
@keyframes k-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Vídeo de fondo — SÓLO escritorio.
   En móvil (80 % del tráfico) no se inyecta siquiera el iframe: la foto es el
   fondo y la página vuela. El contenedor vive vacío hasta que landing.js
   decide que procede cargarlo. */
.k-hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--k-ease); }
.k-hero__video.is-on { opacity: 1; }
.k-hero__video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;          /* 16:9 cubriendo el hero */
  min-width: 177.77vh; min-height: 100%;
  border: 0; pointer-events: none;
}
/* Con el vídeo puesto, la foto deja de moverse: dos animaciones se estorban */
.k-hero__video.is-on ~ img,
.k-hero__media:has(.k-hero__video.is-on) img { animation: none; }
.k-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(7,33,29,.95) 0%, rgba(7,33,29,.74) 38%, rgba(7,33,29,.3) 72%, rgba(7,33,29,.46) 100%);
}

.k-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--k-max);
  margin-inline: auto;
  padding: 88px var(--k-gutter) 40px;
  display: grid;
  gap: 32px;
}
.k-hero__copy { max-width: 660px; }
.k-hero .k-h1 { color: var(--k-surface); }
.k-hero .k-lead { color: rgba(252, 255, 254, .88); margin-top: 16px; }

.k-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Indicador de scroll: sólo móvil. En escritorio ni se pinta, o metería una
   fila extra en la rejilla del hero. */
.k-hero__cue { display: none; }

@media (max-width: 1023px) {
  /* El formulario del hero se retira en móvil: con casas de 250.000 a
     8.800.000 €, pedir datos antes de enseñar nada es fricción pura.
     ► Para el test A/B con formulario, comentar este bloque. */
  .k-hero__inner > .k-quickform { display: none; }
}
@media (min-width: 1024px) {
  .k-hero { min-height: 680px; }
  .k-hero__inner {
    padding: 150px var(--k-gutter-lg) 56px;
    grid-template-columns: 1fr minmax(390px, 430px);
    align-items: end;
    gap: 56px;
  }
}

/* --- Sello de Google: prueba social con la marca que la respalda --- */
.k-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--k-border-dark);
  border-radius: 999px;
  background: rgba(252, 255, 254, .07);
  backdrop-filter: blur(6px);
  transition: border-color .2s var(--k-ease), background-color .2s var(--k-ease);
}
.k-google:hover { border-color: var(--k-gold-cta); background: rgba(252, 255, 254, .12); }
.k-google__g { flex: none; width: 22px; height: 22px; }
.k-google__score { font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.k-google__meta { font-size: 12px; line-height: 15px; color: rgba(252, 255, 254, .72); }
.k-stars { color: var(--k-gold-bright); letter-spacing: .08em; font-size: 13px; line-height: 1; }

.k-hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--k-border-dark);
}

/* ==========================================================================
   Formulario compacto (hero) — gancho de off-market
   ========================================================================== */

.k-quickform {
  background: var(--k-surface);
  color: var(--k-ink-2);
  border-radius: var(--k-radius);
  padding: 26px 24px;
  box-shadow: var(--k-shadow-lg);
  border-top: 3px solid var(--k-gold-cta);
}
.k-quickform__title { font-size: 21px; font-weight: 400; line-height: 1.28; }
.k-quickform__sub {
  font-size: 13px; line-height: 20px; color: var(--k-primary-100);
  margin-top: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--k-border);
}
.k-quickform .k-field { margin-top: 14px; }
.k-quickform .k-btn { margin-top: 18px; }

/* La alternativa telefónica, explícita: quien no rellena formularios, llama */
.k-orcall {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--k-border);
  font-size: 13px; line-height: 19px; color: var(--k-primary-100);
}
.k-orcall a { font-weight: 600; color: var(--k-primary); white-space: nowrap; }
.k-orcall a:hover { text-decoration: underline; }

/* ==========================================================================
   Campos — subrayados, sin caja: el detalle formal de Kensington
   ========================================================================== */

.k-field { display: block; }
.k-field__label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--k-primary-100); margin-bottom: 2px;
}
.k-field__req { color: var(--k-gold); }

.k-input, .k-textarea {
  width: 100%; height: var(--k-ctrl-h); padding: 0 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--k-border);
  border-radius: 0; font-size: var(--k-body); color: var(--k-ink-2);
  transition: border-color .2s var(--k-ease);
}
.k-textarea { height: auto; min-height: 88px; padding: 10px 2px; resize: vertical; line-height: 24px; }
.k-input::placeholder, .k-textarea::placeholder { color: #9aa8a3; }
.k-input:hover, .k-textarea:hover { border-bottom-color: var(--k-primary-100); }
.k-input:focus, .k-textarea:focus {
  outline: none; border-bottom-color: var(--k-primary);
  border-bottom-width: 2px; padding-bottom: 0;
}
.k-input[aria-invalid="true"], .k-textarea[aria-invalid="true"] { border-bottom-color: #b3261e; }

.k-error { display: none; font-size: 12px; line-height: 16px; color: #b3261e; margin-top: 4px; }
.k-field--invalid .k-error { display: block; }

.k-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  font-size: 12px; line-height: 18px; color: var(--k-primary-100);
}
.k-consent input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--k-primary); cursor: pointer;
}
.k-consent a { color: var(--k-primary); text-decoration: underline; }

.k-form__note {
  display: flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12px; line-height: 17px; color: var(--k-primary-100);
}
.k-hp {
  position: absolute !important; left: -9999px !important;
  opacity: 0 !important; height: 0 !important; width: 0 !important;
}

/* ==========================================================================
   Enlace a la cartera completa
   Sólo en las landings de MUNICIPIO, justo encima del buscador. Quien llega
   por un anuncio de una zona concreta y no ve su casa entre las nueve de ese
   pueblo se va; esto lo devuelve al listado entero sin salirse del embudo.

   NO se escribe a mano en ningún .html: lo inyecta deploy/genera-landings.py
   (y su gemelo EN) al regenerar las landings. En agosto de 2026 se puso dos
   veces editando el servidor y las dos veces lo borró la publicación
   siguiente. Si hay que cambiarlo, se cambia en el generador.
   ========================================================================== */

.k-crosslink {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 10px 24px;
  margin: 0 0 20px;
  padding: 18px 20px;
  background: var(--k-gold-soft);
  border: 1px solid var(--k-border);
  border-left: 3px solid var(--k-gold-cta);
  border-radius: var(--k-radius);
}
.k-crosslink p { margin: 0; color: var(--k-primary-100); }

.k-crosslink__cta {
  font-weight: 700;
  color: var(--k-primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.k-crosslink__cta:hover { color: var(--k-primary-hover); }
.k-crosslink__cta b { font-variant-numeric: tabular-nums; }

/* La flecha va pegada a la última palabra, dentro de un .k-nowrap: si el
   enlace entero fuese nowrap desbordaría a lo ancho en un móvil de 320 px, y
   si no lo fuese la flecha caería sola a la línea de abajo y el enlace
   dejaba de leerse como enlace (era el defecto de la versión de agosto). */
/* `display:inline-block` es obligatorio, no cosmético: el reset de arriba pone
   todos los svg en `display:block`, y una caja de bloque rompe línea aunque su
   padre sea nowrap. Sin esto la flecha vuelve a caerse sola a la línea de
   abajo, que es justo el defecto que se venía arrastrando. */
.k-crosslink__cta svg {
  display: inline-block;
  width: 18px; height: 18px;
  margin-left: 8px; vertical-align: -3px;
}

/* ==========================================================================
   Buscador de propiedades
   Barra unificada tipo consola de búsqueda: campos separados por filetes,
   no cinco cajas sueltas. Es lo que le da aire profesional.
   ========================================================================== */

.k-searchbar {
  position: relative;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-sm);
  /* Sin overflow:hidden — los desplegables tienen que poder salirse */
}

.k-searchbar__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--k-border);
  background: var(--k-surface-soft);
  border-radius: 3px 3px 0 0;
}
.k-searchbar__count { font-size: 15px; color: var(--k-primary-100); }
.k-searchbar__count b { font-weight: 600; color: var(--k-ink-2); font-variant-numeric: tabular-nums; }

.k-searchbar__fields { display: none; }
.k-searchbar__fields.is-open { display: block; }

/* Asa, título y botón de confirmación son mobiliario del panel inferior:
   en la barra de escritorio no pintan nada. */
.k-sheet__grip, .k-sheet__title, .k-sheet__cta, .k-sheet__backdrop { display: none; }

.k-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Cada campo con su etiqueta encima y un filete que lo separa del siguiente */
.k-fld {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--k-border);
  transition: background-color .2s var(--k-ease);
}
.k-fld:last-of-type { border-bottom: 0; }
.k-fld:focus-within { background: var(--k-gold-soft); }
.k-fld__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--k-primary-100); margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px;
}
.k-fld__label svg { color: var(--k-gold); }

/* El <select> nativo se queda como fuente de verdad (accesible y sin JS extra
   en el resto del código) pero oculto: su lista desplegable la pinta el sistema
   operativo y no hay CSS que la haga elegante. Encima va un desplegable propio. */
.k-fld select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: -1px; overflow: hidden;
}

.k-sel { position: relative; }
.k-sel__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 30px; padding: 0;
  border: 0; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--k-ink-2);
  text-align: left; cursor: pointer;
}
.k-sel__btn svg { flex: none; color: var(--k-gold); transition: transform .22s var(--k-ease); }
.k-sel.is-open .k-sel__btn svg { transform: rotate(180deg); }
.k-sel__btn[data-empty="1"] { color: var(--k-primary-100); font-weight: 400; }

.k-sel__menu {
  position: absolute; z-index: 40;
  top: calc(100% + 14px); left: -20px; right: -20px;
  max-height: 320px; overflow-y: auto;
  padding: 6px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-top: 2px solid var(--k-gold-cta);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--k-ease), transform .18s var(--k-ease), visibility 0s linear .18s;
  scrollbar-width: thin;
}
.k-sel.is-open .k-sel__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.k-sel__menu::-webkit-scrollbar { width: 6px; }
.k-sel__menu::-webkit-scrollbar-thumb { background: var(--k-border); border-radius: 3px; }

.k-sel__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 12px;
  border: 0; border-radius: 2px; background: transparent;
  font-size: 15px; line-height: 1.3; color: var(--k-ink-2);
  text-align: left; cursor: pointer;
  transition: background-color .15s var(--k-ease), color .15s var(--k-ease);
}
.k-sel__opt:hover, .k-sel__opt.is-active { background: var(--k-gold-soft); }
.k-sel__opt[aria-selected="true"] { background: var(--k-primary); color: var(--k-surface); font-weight: 600; }
.k-sel__opt[aria-selected="true"] .k-sel__n { color: var(--k-gold-bright); }
/* Recuento a la derecha, en oro: da sensación de catálogo, no de formulario */
.k-sel__n { flex: none; font-size: 12px; font-weight: 700; color: var(--k-gold); font-variant-numeric: tabular-nums; }
/* "Todo el Maresme" separado del resto por un filete */
.k-sel__opt--all { border-bottom: 1px solid var(--k-border); border-radius: 2px 2px 0 0; margin-bottom: 4px; }

.k-searchbar__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--k-border);
  background: var(--k-surface-soft);
  border-radius: 0 0 3px 3px;
}
/* Sin filtros aplicados el pie sobra: no dejamos una franja vacía */
.k-searchbar__foot:not(.is-on) { display: none; }

/* Chips de filtros activos: se ve de un vistazo qué se está aplicando */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--k-primary);
  border-radius: 999px;
  background: var(--k-primary);
  color: var(--k-surface);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background-color .2s var(--k-ease);
}
.k-chip:hover { background: var(--k-primary-hover); }
.k-chip svg { opacity: .8; }

@media (min-width: 640px) {
  .k-fields { grid-template-columns: 1fr 1fr; }
  .k-fld { border-right: 1px solid var(--k-border); }
  .k-fld:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1024px) {
  /* En desktop sobra ancho: la barra se despliega entera y siempre visible */
  .k-searchbar__fields { display: block; }
  .k-fields { grid-template-columns: repeat(4, 1fr); }
  .k-fld { border-right: 1px solid var(--k-border); border-bottom: 0; padding: 16px 24px; }
  .k-fld:nth-child(2n) { border-right: 1px solid var(--k-border); }
  .k-fld:last-of-type { border-right: 0; }
  #f-toggle { display: none; }
}

/* ==========================================================================
   Rejilla y tarjeta de propiedad
   ========================================================================== */

.k-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 28px 24px; margin-top: 32px;
}
@media (min-width: 640px)  { .k-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .k-grid { grid-template-columns: repeat(3, 1fr); } }

.k-card {
  display: flex; flex-direction: column;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  overflow: hidden;
  transition: border-color .25s var(--k-ease), box-shadow .25s var(--k-ease),
              transform .25s var(--k-ease);
}
.k-card:hover {
  border-color: var(--k-primary-100);
  box-shadow: var(--k-shadow-md);
  transform: translateY(-3px);
}

/* --- Carrusel de la tarjeta: se pasan fotos sin entrar en la ficha --- */
.k-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--k-surface-soft);
}
.k-card__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .35s var(--k-ease);
}
.k-card__slide.is-on { opacity: 1; }
.k-card__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Enlace invisible sobre la foto: toda la imagen lleva a la ficha,
   salvo donde están las flechas */
.k-card__cover { position: absolute; inset: 0; z-index: 1; }

.k-card__nav {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(252, 255, 254, .5);
  border-radius: 50%;
  background: rgba(7, 33, 29, .55);
  backdrop-filter: blur(6px);
  color: var(--k-surface);
  cursor: pointer;
  opacity: 0;
  transition: opacity .22s var(--k-ease), background-color .22s var(--k-ease),
              border-color .22s var(--k-ease);
}
.k-card__nav--prev { left: 10px; }
.k-card__nav--next { right: 10px; }
.k-card__nav:hover { background: var(--k-gold-cta); border-color: var(--k-gold-cta); color: var(--k-ink); }
.k-card:hover .k-card__nav, .k-card__nav:focus-visible { opacity: 1; }
/* Sin hover que las invoque, las flechas se quedan puestas. Se comprueban las
   dos condiciones porque no todos los táctiles declaran bien `hover: none`. */
@media (hover: none), (max-width: 1023px) { .k-card__nav { opacity: .92; } }

.k-card__dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3;
  display: flex; justify-content: center; gap: 5px;
  pointer-events: none;
}
.k-card__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(252, 255, 254, .5);
  transition: background-color .2s var(--k-ease), width .2s var(--k-ease);
}
.k-card__dot.is-on { background: var(--k-gold-bright); width: 16px; border-radius: 3px; }

.k-card__tags {
  position: absolute; inset: 12px 12px auto 12px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
  pointer-events: none;
}
.k-tag {
  padding: 5px 10px; border-radius: 2px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(7, 33, 29, .8);
  color: var(--k-surface);
  backdrop-filter: blur(4px);
}
/* Oro sólido con tinta oscura: legible y caro, no un dorado lavado */
.k-tag--gold { background: var(--k-gold-cta); color: var(--k-ink); }

/* El precio sobre la fotografía es un recurso de móvil: en escritorio va bajo
   el título, así que aquí ni se pinta (si no, saldría dos veces). */
.k-card__onimg { display: none; }

.k-card__count {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 2px;
  background: rgba(7, 33, 29, .72);
  color: var(--k-surface);
  font-size: 11px; font-weight: 600;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.k-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.k-card__town {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--k-primary-100);
}
.k-card__title {
  font-size: 18px; line-height: 25px; font-weight: 400; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 50px;
}
.k-card__price {
  font-size: 22px; line-height: 1.2; font-weight: 500;
  margin-top: 12px; letter-spacing: -.01em;
}
.k-card__specs {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--k-border);
  font-size: 13px; color: var(--k-primary-100);
}
.k-card__spec { display: flex; align-items: center; gap: 6px; }
.k-card__spec svg { color: var(--k-gold); }

.k-card__foot { margin-top: 18px; }
.k-card__row { display: flex; flex-wrap: wrap; gap: 8px; }
.k-card__row .k-btn { flex: 1; }

/* Agendar visita: el CTA difícil. En escritorio salta a línea completa. */
.k-card__tour {
  flex: 1 0 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 12px;
  border: 1px solid var(--k-gold);
  border-radius: var(--k-radius);
  background: linear-gradient(to right, rgba(194,167,109,.1), rgba(194,167,109,.03));
  color: var(--k-ink-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .22s var(--k-ease), color .22s var(--k-ease), border-color .22s var(--k-ease);
}
.k-card__tour svg { color: var(--k-gold); flex: none; transition: color .22s var(--k-ease); }
.k-card__tour:hover { background: var(--k-gold-cta); border-color: var(--k-gold-cta); color: var(--k-ink); }
.k-card__tour:hover svg { color: var(--k-ink); }

.k-empty {
  grid-column: 1 / -1; padding: 56px 24px; text-align: center;
  border: 1px dashed var(--k-border); border-radius: var(--k-radius);
  color: var(--k-primary-100);
}
.k-more { display: flex; justify-content: center; margin-top: 40px; }

/* ==========================================================================
   Banda de visita privada — el CTA de mayor valor, con urgencia real
   ========================================================================== */

.k-tourband {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--k-ink);
  color: var(--k-surface);
  border-radius: var(--k-radius);
}
.k-tourband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 88% 0%, rgba(194,167,109,.22) 0%, transparent 58%);
}
.k-tourband__inner {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.k-tourband__copy { padding: 34px 26px; }
.k-tourband h2 { font-size: 26px; line-height: 1.22; font-weight: 300; }
.k-tourband h2 strong { font-weight: 500; }
.k-tourband__copy > p { margin-top: 14px; font-size: 15px; line-height: 24px; color: rgba(252,255,254,.8); max-width: 52ch; }

/* Urgencia sobria: filete vertical dorado y versalitas. Sin píldora ni punto
   parpadeante — eso resta más de lo que suma en un producto de lujo. */
.k-urgency {
  display: block;
  padding-left: 14px; margin-bottom: 20px;
  border-left: 2px solid var(--k-gold-cta);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.5; color: var(--k-gold-bright);
}

/* Las tres modalidades, en una línea discreta bajo los botones */
.k-tourband__modes {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--k-border-dark);
}
.k-tourband__mode {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 18px; color: rgba(252,255,254,.82);
}
.k-tourband__mode svg { flex: none; color: var(--k-gold-cta); }

/* La imagen entra a sangre por el lado derecho: es lo que hace que la sección
   respire lujo sin ocupar un píxel más de alto. */
.k-tourband__figure { position: relative; min-height: 240px; overflow: hidden; }
.k-tourband__figure img { width: 100%; height: 100%; object-fit: cover; }
.k-tourband__figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,33,29,.85) 0%, rgba(7,33,29,.12) 55%);
}
.k-tourband__caption {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1;
  font-size: 12px; line-height: 17px; letter-spacing: .04em;
  color: rgba(252,255,254,.9);
}
.k-tourband__caption b { display: block; font-weight: 600; color: var(--k-gold-bright); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; margin-bottom: 4px; }

@media (min-width: 900px) {
  .k-tourband__inner { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
  .k-tourband__copy { padding: 48px 44px; align-self: center; }
  .k-tourband h2 { font-size: 32px; }
  .k-tourband__figure { min-height: 100%; }
  /* Degradado lateral para que la foto funda con el verde en vez de recortarse */
  .k-tourband__figure::after {
    background: linear-gradient(to right, rgba(7,33,29,.96) 0%, rgba(7,33,29,.25) 40%, rgba(7,33,29,.45) 100%);
  }
}

/* ==========================================================================
   Reputación — bloque tras el listado
   ========================================================================== */

.k-repu { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 900px) { .k-repu { grid-template-columns: auto 1fr; gap: 56px; } }

/* Tarjeta de valoración con la marca Google explícita */
.k-ratecard {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 34px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-sm);
  text-align: center;
  min-width: 230px;
}
.k-ratecard__score {
  font-size: 54px; line-height: 1; font-weight: 300;
  letter-spacing: -.02em; color: var(--k-ink);
}
.k-ratecard .k-stars { font-size: 18px; margin-top: 10px; color: #f5b400; }
.k-ratecard__meta { font-size: 13px; color: var(--k-primary-100); margin-top: 8px; }
.k-ratecard__brand {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--k-border);
  font-size: 13px; font-weight: 600; color: var(--k-primary-100);
}

.k-repu__facts { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .k-repu__facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .k-repu__facts { grid-template-columns: repeat(4, 1fr); } }

.k-repufact { padding-left: 16px; border-left: 2px solid var(--k-gold); }
.k-repufact b { display: block; font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.k-repufact span { display: block; font-size: 14px; line-height: 20px; color: var(--k-primary-100); margin-top: 6px; }

/* ==========================================================================
   Cartera off-market
   El argumento que más pesa en lujo: hay más de lo que se ve, y se enseña
   a quien encaja. Por eso va en verde profundo, como una nota aparte.
   ========================================================================== */

.k-offmarket {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  margin-top: 40px; padding: 30px 26px;
  background: var(--k-ink);
  color: var(--k-surface);
  border-radius: var(--k-radius);
  border-left: 3px solid var(--k-gold-cta);
}
.k-offmarket h3 {
  font-size: 23px; line-height: 1.24; font-weight: 300;
  color: var(--k-surface);
}
.k-offmarket p {
  margin-top: 14px;
  font-size: 15px; line-height: 24px;
  color: rgba(252, 255, 254, .8);
  max-width: 62ch;
}
.k-offmarket__cta { display: grid; gap: 10px; align-content: center; }

@media (min-width: 900px) {
  .k-offmarket {
    grid-template-columns: 1.35fr .65fr;
    gap: 48px; padding: 40px 40px;
    align-items: center;
  }
  .k-offmarket h3 { font-size: 28px; }
}

/* ==========================================================================
   Proceso — cuatro pasos que entran por el ojo
   ========================================================================== */

.k-steps {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  margin-top: 32px; counter-reset: step;
}
@media (min-width: 700px)  { .k-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .k-steps { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.k-step {
  position: relative; overflow: hidden;
  padding: 30px 24px 26px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  transition: opacity .6s var(--k-ease), transform .6s var(--k-ease),
              border-color .25s var(--k-ease), box-shadow .25s var(--k-ease);
}
/* El paso nace VISIBLE. Sólo se oculta si landing.js confirma que puede
   revelarlo (IntersectionObserver disponible y sin reduced-motion). Así, si el
   JS falla o tarda, el contenido se ve igual: en tráfico de pago no se puede
   arriesgar una sección en blanco. */
.k-step.is-armed { opacity: 0; transform: translateY(22px); }
.k-step.is-armed.is-in { opacity: 1; transform: none; }
.k-step:hover { border-color: var(--k-gold); box-shadow: var(--k-shadow-md); }

/* Numeral gigante de fondo: da ritmo y jerarquía sin añadir texto */
.k-step__n {
  position: absolute; top: -14px; right: 4px;
  font-size: 96px; line-height: 1; font-weight: 700;
  color: var(--k-gold);
  opacity: .1;
  pointer-events: none;
  transition: opacity .3s var(--k-ease), transform .4s var(--k-ease);
}
.k-step:hover .k-step__n { opacity: .18; transform: scale(1.06); }

.k-step__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--k-gold);
  border-radius: 50%;
  color: var(--k-gold);
  margin-bottom: 18px;
  transition: background-color .25s var(--k-ease), color .25s var(--k-ease);
}
.k-step:hover .k-step__icon { background: var(--k-gold-cta); border-color: var(--k-gold-cta); color: var(--k-ink); }
.k-step h3 { font-size: var(--k-h4); font-weight: 500; line-height: 1.3; position: relative; }
.k-step p { margin-top: 9px; font-size: 15px; line-height: 23px; color: var(--k-primary-100); position: relative; }

/* ==========================================================================
   Equipo — tratamiento editorial
   ========================================================================== */

.k-agentfeature {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  overflow: hidden;
  margin-top: 32px;
}
@media (min-width: 860px) { .k-agentfeature { grid-template-columns: 380px 1fr; } }

.k-agentfeature__photo { position: relative; background: var(--k-ink); min-height: 340px; }
.k-agentfeature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.k-agentfeature__badge {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: rgba(7, 33, 29, .84);
  backdrop-filter: blur(6px);
  border: 1px solid var(--k-border-dark);
  border-radius: 999px;
  color: var(--k-surface);
  font-size: 12px; font-weight: 600;
}
.k-agentfeature__badge svg { color: var(--k-gold-cta); }

.k-agentfeature__body { padding: 32px 28px; display: flex; flex-direction: column; }
@media (min-width: 860px) { .k-agentfeature__body { padding: 44px 44px; } }

.k-agentfeature__quote {
  font-size: 22px; line-height: 1.42; font-weight: 300;
  color: var(--k-ink); text-wrap: pretty;
}
@media (min-width: 860px) { .k-agentfeature__quote { font-size: 26px; } }
.k-agentfeature__quote::before {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--k-gold); margin-bottom: 20px;
}
.k-agentfeature__name { margin-top: 24px; font-size: 17px; font-weight: 600; }
.k-agentfeature__role { font-size: 13px; color: var(--k-gold); margin-top: 3px; }

.k-agentfeature__langs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.k-pill {
  padding: 5px 12px;
  border: 1px solid var(--k-border);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--k-primary-100);
}
.k-agentfeature__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.k-agentfeature__second {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--k-border);
}
.k-agentfeature__second .k-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--k-ink); color: var(--k-gold-cta);
  font-size: 15px; font-weight: 600;
}

/* ==========================================================================
   Reseñas — carrusel arrastrable con acreditación de Google
   ========================================================================== */

.k-revhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.k-revnav { display: flex; gap: 8px; }

.k-revtrack {
  display: flex; gap: 20px;
  margin-top: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  cursor: grab;
}
.k-revtrack::-webkit-scrollbar { display: none; }
.k-revtrack.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.k-revtrack.is-dragging * { pointer-events: none; user-select: none; }

.k-review {
  flex: 0 0 auto;
  width: min(100%, 400px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--k-border-dark);
  border-radius: var(--k-radius);
  background: rgba(252, 255, 254, .05);
}
.k-review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-review .k-stars { font-size: 15px; color: #f5b400; }
.k-review__text {
  font-size: 15px; line-height: 24px;
  color: rgba(252, 255, 254, .9);
  margin-top: 14px; flex: 1;
}
.k-review__by {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--k-border-dark);
}
.k-review__av {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--k-gold-cta); color: var(--k-ink);
  display: grid; place-items: center; font-weight: 600; font-size: 14px;
}
.k-review__name { font-size: 14px; font-weight: 600; color: var(--k-surface); }
.k-review__when {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: rgba(252, 255, 254, .6); margin-top: 2px;
}
/* Sello de verificada: sin esto las reseñas parecen inventadas */
.k-verified {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--k-gold-bright); font-weight: 600;
}

.k-revdots { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.k-revdot {
  width: 7px; height: 7px; border-radius: 50%; border: 0;
  background: rgba(252, 255, 254, .3); cursor: pointer; padding: 0;
  transition: background-color .2s var(--k-ease), width .2s var(--k-ease);
}
.k-revdot.is-on { background: var(--k-gold-bright); width: 20px; border-radius: 4px; }

/* ==========================================================================
   Argumentario de valor (bloque simple reutilizable)
   ========================================================================== */

.k-values {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  margin-top: 32px; background: var(--k-border);
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  overflow: hidden;
}
.k-value { padding: 28px 24px; background: var(--k-surface); }
.k-value h3 { font-size: var(--k-h4); font-weight: 500; line-height: 1.3; }
.k-value p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--k-primary-100); }
@media (min-width: 640px)  { .k-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .k-values { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Vídeo (fachada: el iframe no carga hasta el clic)
   ========================================================================== */

.k-video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--k-radius); overflow: hidden;
  background: var(--k-ink);
  cursor: pointer; border: 0; padding: 0; width: 100%;
}
.k-video img {
  width: 100%; height: 100%; object-fit: cover; opacity: .72;
  transition: opacity .3s var(--k-ease), transform .6s var(--k-ease);
}
.k-video:hover img { opacity: .58; transform: scale(1.03); }
.k-video__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.k-video__play i {
  width: 74px; height: 74px; display: grid; place-items: center;
  border-radius: 50%; background: var(--k-gold-cta); color: var(--k-ink);
  box-shadow: 0 10px 34px var(--k-gold-glow);
  transition: transform .25s var(--k-ease);
}
.k-video:hover .k-video__play i { transform: scale(1.08); }
.k-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Contacto
   ========================================================================== */

.k-contact { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) { .k-contact { grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: start; } }

.k-contact__aside { display: flex; flex-direction: column; gap: 24px; }
.k-facts { display: flex; flex-direction: column; gap: 16px; }
.k-fact { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 23px; }
.k-fact__icon { flex: none; color: var(--k-gold); margin-top: 2px; }
.k-fact b { display: block; font-weight: 600; font-size: 13px; color: var(--k-primary-100); }

.k-formgrid { display: grid; grid-template-columns: 1fr; gap: 18px 20px; }
@media (min-width: 640px) {
  .k-formgrid { grid-template-columns: 1fr 1fr; }
  .k-formgrid .k-field--full { grid-column: 1 / -1; }
}

/* auto-fit: se adapta tanto a 2 opciones como a 3 sin dejar huecos */
.k-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .k-choices { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

.k-choice { position: relative; }
.k-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.k-choice span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 12px; text-align: center;
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  font-size: var(--k-small); font-weight: 500; line-height: 1.3;
  cursor: pointer;
  transition: border-color .2s var(--k-ease), background-color .2s var(--k-ease),
              color .2s var(--k-ease), box-shadow .2s var(--k-ease);
}
.k-choice span svg { flex: none; color: var(--k-gold); }
.k-choice input:hover + span { border-color: var(--k-primary-100); }
.k-choice input:checked + span {
  border-color: var(--k-primary); background: var(--k-primary); color: var(--k-surface);
  box-shadow: 0 4px 14px rgba(28, 87, 73, .25);
}
.k-choice input:checked + span svg { color: var(--k-gold-bright); }
.k-choice input:focus-visible + span { outline: 2px solid var(--k-gold-cta); outline-offset: 2px; }

.k-visit { display: none; grid-column: 1 / -1; }
.k-visit.is-on { display: grid; gap: 18px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .k-visit.is-on { grid-template-columns: 1fr 1fr; } }

.k-select {
  width: 100%; height: var(--k-ctrl-h); padding: 0 26px 0 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--k-border);
  border-radius: 0; font-size: var(--k-body); color: var(--k-ink-2);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2342574f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center;
  transition: border-color .2s var(--k-ease);
}
.k-select:focus { outline: none; border-bottom-color: var(--k-primary); border-bottom-width: 2px; }

.k-formsuccess {
  display: none; padding: 32px 28px;
  border: 1px solid var(--k-primary); border-radius: var(--k-radius);
  background: var(--k-gold-soft);
}
.k-formsuccess.is-on { display: block; }
.k-formsuccess h3 { font-size: var(--k-h3); font-weight: 400; color: var(--k-ink); }
.k-formsuccess p { margin-top: 10px; color: var(--k-primary-100); }

/* ==========================================================================
   Modal de solicitud
   El listado no arrastra al pie: al pulsar "Me interesa" o "Agendar visita"
   se abre aquí mismo, con la propiedad delante y el formulario ya escrito.
   ========================================================================== */

.k-modal {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.k-modal.is-on { display: flex; }

.k-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 33, 29, .78);
  backdrop-filter: blur(5px);
  animation: k-fade .25s var(--k-ease);
}
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }

.k-modal__panel {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  /* `minmax(0, 1fr)` es lo que hace que el popup se pueda desplazar. Con la
     fila en `auto` el alto lo fijaba el contenido del formulario: el panel lo
     recortaba a la altura de la pantalla y el resto —incluido el botón de
     enviar— quedaba fuera de alcance, sin barra de desplazamiento, porque el
     cuerpo nunca llegaba a desbordarse. Con el mínimo a cero la fila se ciñe al
     panel y el desbordamiento pasa al cuerpo, que sí es scrollable. */
  grid-template-rows: minmax(0, 1fr);
  width: 100%; max-width: 940px;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  background: var(--k-surface);
  border-radius: var(--k-radius);
  box-shadow: 0 30px 90px rgba(7, 33, 29, .5);
  animation: k-rise .3s var(--k-ease);
}
@keyframes k-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.k-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(7, 33, 29, .6);
  backdrop-filter: blur(4px);
  color: var(--k-surface);
  cursor: pointer;
  transition: background-color .2s var(--k-ease);
}
.k-modal__close:hover { background: var(--k-gold-cta); color: var(--k-ink); }

/* Columna de la propiedad: recuerda qué se está pidiendo */
.k-modal__aside { position: relative; display: none; background: var(--k-ink); }
.k-modal__aside img { width: 100%; height: 100%; object-fit: cover; }
.k-modal__aside::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,33,29,.94) 0%, rgba(7,33,29,.15) 62%);
}
.k-modal__prop {
  position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1;
  color: var(--k-surface);
}
.k-modal__prop small {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-gold-bright); margin-bottom: 8px;
}
.k-modal__prop b { display: block; font-size: 17px; line-height: 1.35; font-weight: 400; }
.k-modal__prop span { display: block; margin-top: 8px; font-size: 19px; font-weight: 500; }

.k-modal__body {
  padding: 26px 22px;
  overflow-y: auto; min-height: 0;
  /* Que el gesto no arrastre la página de detrás al llegar al final del
     formulario: en iOS el rebote encadena el scroll al documento y el popup
     parece que se cierra solo. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.k-modal__title { font-size: 23px; line-height: 1.25; font-weight: 300; padding-right: 44px; }
.k-modal__title strong { font-weight: 500; }
.k-modal__sub {
  margin-top: 10px; padding-bottom: 20px;
  border-bottom: 1px solid var(--k-border);
  font-size: 14px; line-height: 21px; color: var(--k-primary-100);
}
.k-modal__body form { margin-top: 20px; }

@media (min-width: 820px) {
  .k-modal__panel { grid-template-columns: 340px 1fr; }
  .k-modal__aside { display: block; }
  .k-modal__body { padding: 36px 34px; }
  /* Sin propiedad concreta no hay columna de imagen: una sola columna, o el
     formulario se metería en la pista de 340 px y quedaría estrujado. */
  .k-modal__panel.is-noprop { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 819px) {
  .k-modal { padding: 0; align-items: flex-end; }
  .k-modal__panel { max-width: none; max-height: 94dvh; border-radius: 4px 4px 0 0; }
}

body.k-locked { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */

.k-footer { background: var(--k-ink); color: rgba(252, 255, 254, .78); }
.k-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px)  { .k-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .k-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; } }

.k-footer img.k-footer__logo { height: 30px; width: auto; margin-bottom: 18px; }
.k-footer h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--k-gold-cta); margin-bottom: 14px;
}
.k-footer a:hover { color: var(--k-surface); text-decoration: underline; }
.k-footer li + li { margin-top: 8px; }
.k-footer__bar {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--k-border-dark);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 12px; line-height: 18px; color: rgba(252, 255, 254, .55);
}
.k-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; }

/* ==========================================================================
   Barra de acción móvil
   ========================================================================== */

.k-actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7, 33, 29, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--k-border-dark);
  transform: translateY(110%);
  transition: transform .3s var(--k-ease);
}
.k-actionbar.is-on { transform: translateY(0); }
.k-actionbar .k-btn { min-height: 46px; font-size: 15px; padding: 0 12px; }
@media (min-width: 1024px) { .k-actionbar { display: none; } }
@media (max-width: 1023px) { body.has-actionbar { padding-bottom: 72px; } }

/* ==========================================================================
   Ficha de propiedad
   ========================================================================== */

.k-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--k-primary-100);
  padding: 16px var(--k-gutter) 0;
  max-width: var(--k-max); margin-inline: auto;
}
.k-crumbs a:hover { color: var(--k-primary); text-decoration: underline; }
.k-crumbs span[aria-current] { color: var(--k-ink-2); }
@media (min-width: 1024px) { .k-crumbs { padding: 20px var(--k-gutter-lg) 0; } }

.k-gallery { display: grid; grid-template-columns: 1fr; gap: 8px; }
.k-gallery__main {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--k-surface-soft); border-radius: var(--k-radius);
  cursor: zoom-in; border: 0; padding: 0; width: 100%;
}
.k-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.k-gallery__side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k-gallery__side button {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border: 0; padding: 0; border-radius: var(--k-radius);
  background: var(--k-surface-soft); cursor: zoom-in;
}
.k-gallery__side img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--k-ease); }
.k-gallery__side button:hover img { transform: scale(1.05); }
.k-gallery__count {
  position: absolute; inset: auto 12px 12px auto;
  padding: 8px 14px; border-radius: 2px;
  background: rgba(7, 33, 29, .86); color: var(--k-surface);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
@media (min-width: 900px) {
  /* La proporción la marca el CONTENEDOR, no la primera fotografía.
     Antes el alto salía de la relación natural de esa imagen: cada propiedad
     daba una altura distinta y, con originales verticales o cuadrados, la
     columna lateral quedaba corta y aparecía un hueco en medio.
     Con la proporción fija y `object-fit: cover`, las tres fotos llenan su
     hueco exacto y todas las fichas se ven iguales. */
  .k-gallery {
    grid-template-columns: 2fr 1fr;
    /* `width: 100%` es imprescindible: con `aspect-ratio` y un `max-height`
       sin ancho definido, el navegador encoge el ANCHO para conservar la
       proporción y la galería queda más estrecha que el titular. Fijando el
       ancho, la proporción sólo decide el alto y el tope lo recorta. */
    width: 100%;
    /* El alto tiene que ser DEFINIDO, no derivado de `aspect-ratio`. Con la
       proporción, el navegador considera el alto indefinido al repartir las
       filas del grid: la fila se dimensionaba con el alto natural de la foto y
       el recorte del contenedor sólo la tapaba, así que las imágenes se salían
       por debajo. Con un alto calculado, la fila mide exactamente la galería.
       Se queda con el menor de tres topes: lo que deja libre la pantalla, la
       proporción 16/9 del ancho disponible —que evita que en pantallas
       estrechas y altas la galería salga más alta que ancha— y ese mismo 16/9
       una vez el contenedor toca su ancho máximo. El suelo evita la franja. */
    height: max(380px, min(
      calc(100vh - 300px),
      calc((100vw - var(--k-gutter-lg) * 2) * 0.5625),
      calc(var(--k-max) * 0.5625)
    ));
    /* La fotografía manda: se queda con dos tercios de la pantalla. Lo que se
       reserva es la cabecera más el bloque de título con holgura, para que el
       titular respire en lugar de pegarse al borde inferior.
       El mínimo evita que en pantallas muy bajas la galería degenere en una
       franja: ahí la ubicación puede caer bajo el pliegue, que es preferible a
       enseñar las fotos aplastadas. */
    /* La fila tiene que ser `1fr`, no `auto`. Con `auto` el alto de la fila lo
       decide el contenido (la altura natural de la foto), el `max-height` sólo
       recorta el contenedor y las imágenes se desbordan por debajo. Con `1fr`
       la fila mide exactamente lo que mide la galería ya recortada. */
    grid-template-rows: 1fr;
    overflow: hidden;
  }
  .k-gallery__main { aspect-ratio: auto; height: 100%; min-height: 0; }
  /* `min-height: 0` anula el tamaño mínimo automático del item: sin él, la
     columna lateral se niega a encoger por debajo del alto natural de sus dos
     fotos y estira la fila del grid, que era lo que desbordaba la galería. */
  .k-gallery__side {
    grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
    height: 100%; min-height: 0;
  }
  .k-gallery__side button { aspect-ratio: auto; height: 100%; min-height: 0; }
}

.k-detail__head { margin-bottom: 26px; }
.k-detail { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) { .k-detail { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; } }

.k-sticky { position: static; }
@media (min-width: 1024px) { .k-sticky { position: sticky; top: 92px; } }

.k-panel {
  padding: 26px 24px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-top: 3px solid var(--k-gold-cta);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-md);
}
.k-panel__price { font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -.015em; }
.k-panel__ref { font-size: 13px; color: var(--k-primary-100); margin-top: 4px; }
.k-panel__actions { display: grid; gap: 10px; margin-top: 22px; }
.k-panel__agent {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--k-border);
}

.k-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  background: var(--k-border); border: 1px solid var(--k-border);
  border-radius: var(--k-radius); overflow: hidden;
}
@media (min-width: 700px) { .k-specs { grid-template-columns: repeat(4, 1fr); } }
.k-spec { padding: 18px 16px; background: var(--k-surface); text-align: center; }
.k-spec__ico { color: var(--k-gold); display: grid; place-items: center; margin-bottom: 8px; }
.k-spec__val { font-size: 20px; font-weight: 500; line-height: 1.2; }
.k-spec__key { font-size: 12px; color: var(--k-primary-100); margin-top: 3px; }

.k-prose { max-width: 68ch; }
.k-prose p { margin-top: 16px; line-height: 26px; color: var(--k-primary-200); }
.k-prose p:first-child { margin-top: 0; }

.k-datalist {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: 20px; border-top: 1px solid var(--k-border);
}
@media (min-width: 640px) { .k-datalist { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.k-datalist div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--k-border); font-size: 15px;
}
.k-datalist dt { color: var(--k-primary-100); }
.k-datalist dd { font-weight: 500; text-align: right; }

.k-lightbox { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(7, 33, 29, .97); }
.k-lightbox.is-on { display: grid; grid-template-rows: auto 1fr auto; }
.k-lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; color: rgba(252, 255, 254, .8); font-size: 14px;
}
/* La foto se ve SIEMPRE entera.
   Con `max-height: 100%` sobre un elemento de rejilla el porcentaje no llega a
   resolverse y la imagen desbordaba: se recortaba por arriba y por abajo. Con
   la imagen posicionada y `object-fit: contain` el resultado es determinista,
   quepa apaisada o vertical. */
.k-lightbox__stage {
  position: relative;
  min-height: 0; min-width: 0;
  overflow: hidden;
}
.k-lightbox__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0 12px;               /* aire lateral sin romper el encaje */
  object-fit: contain;
  object-position: center;
}
.k-lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.k-iconbtn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--k-border-dark); border-radius: 50%;
  background: transparent; color: var(--k-surface); cursor: pointer;
  transition: background-color .2s var(--k-ease), border-color .2s var(--k-ease);
}
.k-iconbtn:hover { background: var(--k-gold-cta); border-color: var(--k-gold-cta); color: var(--k-ink); }
.k-iconbtn:disabled { opacity: .3; cursor: default; }
.k-iconbtn:disabled:hover { background: transparent; border-color: var(--k-border-dark); color: var(--k-surface); }

/* Variante compacta para el carrusel de reseñas. En móvil no baja de 44px. */
.k-iconbtn--sm { width: 44px; height: 44px; }
@media (min-width: 1024px) { .k-iconbtn--sm { width: 40px; height: 40px; } }

/* ==========================================================================
   Cualificación
   Se abre DESPUÉS de tener nombre, teléfono y correo: el lead ya está a salvo,
   así que aquí sólo se enriquece. Una pregunta por pantalla, un toque por
   respuesta, sin campos que escribir salvo que el usuario elija "Otro".
   ========================================================================== */

.kq { position: fixed; inset: 0; z-index: 96; display: none; }
.kq.is-on { display: flex; align-items: center; justify-content: center; padding: 20px; }
.kq__backdrop { position: absolute; inset: 0; background: rgba(7, 33, 29, .84); backdrop-filter: blur(6px); }

.kq__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: calc(100dvh - 40px);
  background: var(--k-surface);
  border-radius: var(--k-radius);
  box-shadow: 0 30px 90px rgba(7, 33, 29, .55);
  overflow: hidden;
}

/* Barra de avance: dice cuánto queda sin necesidad de leer nada */
.kq__bar { height: 3px; background: var(--k-border); flex: none; }
.kq__bar i { display: block; height: 100%; width: 0; background: var(--k-gold-cta); transition: width .35s var(--k-ease); }

.kq__head { padding: 26px 26px 0; }
.kq__step {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-gold);
}
.kq__close {
  width: 40px; height: 40px; margin: -10px -10px 0 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--k-primary-100); cursor: pointer; flex: none;
}
.kq__close:hover { background: var(--k-surface-soft); color: var(--k-ink); }

.kq__q { margin-top: 16px; font-size: 25px; line-height: 1.24; font-weight: 300; text-wrap: balance; }
.kq__q strong { font-weight: 500; }
.kq__help { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--k-primary-100); }

.kq__body { padding: 22px 26px 26px; overflow-y: auto; }

/* Opción: un toque y avanza. Nada de radios que haya que confirmar. */
.kq__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 62px; padding: 14px 18px;
  margin-top: 10px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  font-size: 16px; line-height: 22px; font-weight: 500; color: var(--k-ink-2);
  text-align: left; cursor: pointer;
  transition: border-color .18s var(--k-ease), background-color .18s var(--k-ease),
              transform .18s var(--k-ease);
}
.kq__opt:first-child { margin-top: 0; }
.kq__opt:hover { border-color: var(--k-gold); background: var(--k-gold-soft); transform: translateX(3px); }
.kq__opt.is-sel { border-color: var(--k-primary); background: var(--k-primary); color: var(--k-surface); }
.kq__opt svg { flex: none; opacity: 0; color: var(--k-gold); transition: opacity .18s var(--k-ease); }
.kq__opt:hover svg { opacity: 1; }
.kq__opt.is-sel svg { opacity: 1; color: var(--k-gold-bright); }

/* "Otro": se distingue del resto sin gritar */
.kq__opt--otro { border-style: dashed; font-weight: 400; color: var(--k-primary-100); }
.kq__otro { display: none; margin-top: 12px; }
.kq__otro.is-on { display: block; }
.kq__otro .k-input { font-size: 16px; }
.kq__otro .k-btn { margin-top: 14px; }

/* Paso final: las tres declaraciones */
.kq__declara { display: grid; gap: 2px; }
.kq__check {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--k-border);
  font-size: 14px; line-height: 21px; color: var(--k-primary-200);
  cursor: pointer;
}
.kq__check:last-child { border-bottom: 0; }
.kq__check input {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--k-primary); cursor: pointer;
}
.kq__err { display: none; margin-top: 10px; font-size: 13px; color: #b3261e; }
.kq__err.is-on { display: block; }

.kq__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 26px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--k-border);
  background: var(--k-surface-soft);
}
.kq__back {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 4px;
  border: 0; background: none;
  font-size: 14px; font-weight: 600; color: var(--k-primary-100); cursor: pointer;
}
.kq__back:hover { color: var(--k-ink); }
.kq__back[hidden] { visibility: hidden; display: inline-flex; }
.kq__skip {
  border: 0; background: none; padding: 0 4px; min-height: 44px;
  font-size: 13px; color: var(--k-primary-100);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.kq__skip:hover { color: var(--k-ink); }

/* Cierre: lo que ocurre después, dicho sin adornos */
.kq__done { padding: 34px 28px; text-align: center; }
.kq__done__mark {
  width: 60px; height: 60px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border: 1px solid var(--k-gold); border-radius: 50%;
  color: var(--k-gold);
}
.kq__done h3 { font-size: 24px; font-weight: 300; line-height: 1.28; }
.kq__done h3 strong { font-weight: 500; }
.kq__done p { margin-top: 12px; font-size: 15px; line-height: 24px; color: var(--k-primary-100); }
.kq__done .k-btn { margin-top: 24px; }

@media (max-width: 619px) {
  .kq.is-on { padding: 0; align-items: flex-end; }
  .kq__panel { max-width: none; max-height: 94dvh; border-radius: 14px 14px 0 0; }
  .kq__head { padding: 22px 20px 0; }
  .kq__body { padding: 18px 20px 22px; }
  .kq__foot { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); }
  .kq__q { font-size: 22px; }
  .kq__opt { min-height: 58px; font-size: 15px; padding: 12px 16px; }
  .kq__close { width: 44px; height: 44px; margin: -12px -12px 0 0; }
}

/* ==========================================================================
   Páginas legales
   Documento sobrio y legible. Se quedan dentro del dominio: sacar a nadie a
   otra web es perder tráfico pagado y la capacidad de medirlo.
   ========================================================================== */

.k-legal { max-width: 760px; margin-inline: auto; }
.k-legal__back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-bottom: 6px;
  font-size: var(--k-small); font-weight: 600; color: var(--k-primary);
}
.k-legal__back:hover { text-decoration: underline; }
.k-legal__meta {
  margin-top: 14px; padding-bottom: 26px;
  border-bottom: 1px solid var(--k-border);
  font-size: 13px; color: var(--k-primary-100);
}
.k-legal h2 {
  margin-top: 42px; margin-bottom: 14px;
  font-size: 22px; line-height: 1.28; font-weight: 500;
  padding-top: 24px; border-top: 1px solid var(--k-border);
}
.k-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.k-legal h3 { margin-top: 26px; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.k-legal p { margin-top: 12px; font-size: 15px; line-height: 25px; color: var(--k-primary-200); }
.k-legal ul { margin-top: 12px; display: grid; gap: 9px; }
.k-legal li {
  position: relative; padding-left: 18px;
  font-size: 15px; line-height: 24px; color: var(--k-primary-200);
}
.k-legal li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--k-gold);
}
.k-legal a { color: var(--k-primary); text-decoration: underline; text-underline-offset: 2px; }
.k-legal strong { font-weight: 600; color: var(--k-ink-2); }

/* Ficha de datos del titular */
.k-legal__card {
  margin-top: 16px; padding: 20px 22px;
  background: var(--k-surface-soft);
  border: 1px solid var(--k-border);
  border-left: 3px solid var(--k-gold);
  border-radius: var(--k-radius);
  font-size: 15px; line-height: 25px;
}
.k-legal__card p { margin-top: 0; }
.k-legal__card dl { display: grid; grid-template-columns: 1fr; gap: 2px; }
.k-legal__card dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-primary-100); margin-top: 12px; }
.k-legal__card dt:first-child { margin-top: 0; }
.k-legal__card dd { margin: 0; font-size: 15px; line-height: 23px; }

/* Tabla de cookies: en móvil se desplaza sola, la página nunca */
.k-legal__tablewrap {
  margin-top: 16px; overflow-x: auto;
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
}
.k-legal table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
.k-legal th, .k-legal td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--k-border); vertical-align: top; }
.k-legal th {
  background: var(--k-surface-soft);
  /* 12px y no menos: en móvil, 11px en versalitas con tracking se vuelve
     ilegible y estas cabeceras nombran qué cookie es cada una. */
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-primary-100); white-space: nowrap;
}
.k-legal tbody tr:last-child td { border-bottom: 0; }
.k-legal td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--k-ink);
}

/* Aviso al cliente: se retira antes de publicar */
.k-legal__note {
  margin-top: 34px; padding: 18px 20px;
  border: 1px dashed var(--k-gold);
  border-radius: var(--k-radius);
  background: var(--k-gold-soft);
  font-size: 13px; line-height: 21px; color: var(--k-primary-200);
}
.k-legal__note b { display: block; margin-bottom: 4px; color: var(--k-ink); }

@media (min-width: 700px) {
  .k-legal__card dl { grid-template-columns: 190px 1fr; gap: 10px 20px; }
  .k-legal__card dt { margin-top: 0; }
}

/* ==========================================================================
   Cookies — banner y panel
   Barra inferior estrecha: no tapa el contenido, no bloquea el scroll y no
   oscurece la página. Aceptar y rechazar tienen el mismo peso visual porque
   la AEPD lo exige y porque, de paso, salir de aquí cuesta un solo toque.
   ========================================================================== */

.kc-banner {
  position: fixed; inset: auto 0 0 0; z-index: 85;
  padding: 14px var(--k-gutter) calc(14px + env(safe-area-inset-bottom));
  background: rgba(7, 33, 29, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--k-gold-cta);
  color: var(--k-surface);
  transform: translateY(105%);
  visibility: hidden;
  /* El banner de cookies no puede quedar atado a que corra la animación: si no
     aparece, no se recoge el consentimiento y no se activa ninguna etiqueta. */
  transition: transform .4s var(--k-ease), visibility 0s linear .4s;
}
.kc-banner.is-on { transform: none; visibility: visible; transition-delay: 0s; }

.kc-banner__inner {
  max-width: var(--k-max); margin-inline: auto;
  display: grid; gap: 14px; align-items: center;
}
.kc-banner__text { font-size: 13px; line-height: 20px; color: rgba(252, 255, 254, .82); }
.kc-banner__text b { display: block; font-size: 15px; font-weight: 500; color: var(--k-surface); margin-bottom: 4px; }
.kc-banner__text a {
  color: var(--k-gold-cta); text-decoration: underline; text-underline-offset: 2px;
  /* Área de toque cómoda sin mover el texto: el relleno crece hacia fuera y el
     margen negativo lo reabsorbe. Es un enlace en frase (exento por WCAG),
     pero es la puerta a la política de cookies y no cuesta nada acertarle. */
  display: inline-block; padding-block: 12px; margin-block: -12px;
}

.kc-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Aceptar y rechazar, mismo tamaño y misma jerarquía: exigencia de la AEPD */
.kc-banner__actions .k-btn { min-height: 46px; font-size: 14px; padding: 0 14px; }
.kc-banner__more {
  grid-column: 1 / -1;
  background: none; border: 0; padding: 6px 0; min-height: 44px;
  color: rgba(252, 255, 254, .68);
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.kc-banner__more:hover { color: var(--k-surface); }

/* Mientras se pide el consentimiento, la barra de acción se retira: dos barras
   apiladas abajo es justo el amontonamiento que hay que evitar. */
body.kc-asking .k-actionbar { transform: translateY(110%); }

@media (min-width: 860px) {
  .kc-banner { padding: 16px var(--k-gutter-lg); }
  .kc-banner__inner { grid-template-columns: 1fr auto; gap: 40px; }
  .kc-banner__actions { grid-template-columns: auto auto auto; gap: 10px; }
  .kc-banner__more { grid-column: auto; order: -1; padding: 0 8px; }
  .kc-banner__actions .k-btn { min-width: 132px; }
}

/* --- Panel de detalle --------------------------------------------------- */

.kc-modal {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  visibility: hidden;
  transition: visibility 0s linear .3s;
}
.kc-modal.is-on { visibility: visible; transition-delay: 0s; }
.kc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 33, 29, .78); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .3s var(--k-ease);
}
.kc-modal.is-on .kc-modal__backdrop { opacity: 1; }

.kc-panel {
  position: relative;
  width: 100%; max-width: 620px; max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--k-surface);
  border-radius: var(--k-radius);
  border-top: 3px solid var(--k-gold-cta);
  box-shadow: 0 30px 90px rgba(7, 33, 29, .5);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .3s var(--k-ease), opacity .3s var(--k-ease);
}
.kc-modal.is-on .kc-panel { transform: none; opacity: 1; }

.kc-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--k-border);
}
.kc-panel__head h2 { font-size: 21px; font-weight: 400; line-height: 1.25; }
.kc-panel__head p { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--k-primary-100); }
.kc-panel__close {
  flex: none; width: 44px; height: 44px; margin: -10px -10px 0 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--k-primary-100); cursor: pointer;
}
.kc-panel__close:hover { background: var(--k-surface-soft); color: var(--k-ink); }

.kc-panel__body { padding: 6px 24px; overflow-y: auto; }

.kc-cat {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--k-border);
}
.kc-cat:last-child { border-bottom: 0; }
.kc-cat__txt { flex: 1; }
.kc-cat__txt b { display: block; font-size: 15px; font-weight: 600; }
.kc-cat__txt span { display: block; margin-top: 5px; font-size: 13px; line-height: 20px; color: var(--k-primary-100); }
/* 12px: aquí va la base legal y la duración de cada categoría — es lo que la
   AEPD espera que el usuario pueda leer de verdad, no letra pequeña ritual. */
.kc-cat__txt small { display: block; margin-top: 6px; font-size: 12px; color: #8a9a94; }

/* Interruptor: 44px de zona táctil aunque el control mida 26 */
.kc-switch { position: relative; flex: none; width: 48px; height: 44px; display: grid; place-items: center; }
.kc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kc-switch i {
  display: block; width: 44px; height: 26px; border-radius: 13px;
  background: #c8d3cf; transition: background-color .22s var(--k-ease);
  pointer-events: none;
}
.kc-switch i::after {
  content: ""; position: absolute; top: 50%; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--k-surface); transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(7, 33, 29, .3);
  transition: transform .22s var(--k-ease);
}
.kc-switch input:checked + i { background: var(--k-primary); }
.kc-switch input:checked + i::after { transform: translate(22px, -50%); }
.kc-switch input:focus-visible + i { outline: 2px solid var(--k-gold-cta); outline-offset: 3px; }
.kc-switch input:disabled + i { background: var(--k-primary); opacity: .45; cursor: default; }

.kc-panel__foot {
  display: grid; gap: 8px;
  padding: 18px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--k-border);
  background: var(--k-surface-soft);
  border-radius: 0 0 3px 3px;
}
.kc-panel__foot .k-btn { min-height: 48px; }
.kc-panel__legal {
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  margin-top: 6px; font-size: 12px;
}
.kc-panel__legal a { color: var(--k-primary); text-decoration: underline; }

@media (min-width: 620px) {
  .kc-panel__foot { grid-template-columns: 1fr 1fr auto; align-items: center; }
  .kc-panel__legal { grid-column: 1 / -1; }
}

/* ==========================================================================
   DISEÑO MÓVIL
   No es el escritorio encogido: cambia la escala tipográfica, la densidad, la
   jerarquía y los patrones de interacción. Tres criterios lo gobiernan:
     1. El pulgar decide — filtrar y solicitar ocurren en paneles inferiores,
        no scrolleando hasta el pie.
     2. La fotografía manda — en una pantalla de 375 px la foto es lo único que
        se mira, así que el precio se escribe encima de ella.
     3. La página no puede ser una columna infinita — lo secundario pasa a
        carruseles horizontales.
   ========================================================================== */

@media (max-width: 1023px) {

  /* --- Escala tipográfica propia -------------------------------------- */
  .k-h1 { font-size: 34px; line-height: 37.4px; }
  .k-h2 { font-size: 25px; line-height: 30px; }   /* jerarquía real bajo el H1 */
  .k-h3 { font-size: 21px; }
  .k-lead { font-size: 16px; line-height: 25px; }
  .k-section { padding: 52px var(--k-gutter); }
  .k-section-head { margin-bottom: 26px; }
  .k-prose p { font-size: 15px; line-height: 24px; }

  /* --- Cabecera y menú lateral ---------------------------------------- */
  .k-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin: -13px -8px -13px 0;
    padding: 0 10px; border: 0; background: transparent; cursor: pointer;
  }
  .k-burger span {
    display: block; height: 1.5px; background: var(--k-surface);
    transition: transform .25s var(--k-ease), opacity .25s var(--k-ease);
  }
  .k-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .k-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

  /* Siempre en el DOM y fuera de pantalla por transform. Nada de alternar
     [hidden] + requestAnimationFrame: si el navegador no pinta un frame, el
     panel no llega a abrirse. Con visibility la transición es fiable. */
  .k-drawer {
    display: block;
    position: fixed; inset: 0; z-index: 80;
    visibility: hidden;
    /* Aparece al instante y sólo se retrasa el ocultarse, para dar tiempo a que
       el panel termine de salir. Transicionar `visibility` para MOSTRAR ata la
       navegación a que la animación llegue a ejecutarse: si el navegador la
       descarta —ahorro de batería, movimiento reducido, pestaña en segundo
       plano— el menú no se ve nunca. El menú no puede depender de eso. */
    transition: visibility 0s linear .32s;
  }
  .k-drawer.is-on { visibility: visible; transition-delay: 0s; }
  .k-drawer__backdrop {
    position: absolute; inset: 0;
    background: rgba(7, 33, 29, .72); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .28s var(--k-ease);
  }
  .k-drawer.is-on .k-drawer__backdrop { opacity: 1; }
  .k-drawer__panel {
    position: absolute; inset: 0 0 0 auto;
    width: min(88vw, 360px);
    display: flex; flex-direction: column;
    padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
    background: var(--k-ink); color: var(--k-surface);
    transform: translateX(100%);
    transition: transform .3s var(--k-ease);
    overflow-y: auto;
  }
  .k-drawer.is-on .k-drawer__panel { transform: none; }
  .k-drawer__close {
    align-self: flex-end;
    width: 44px; height: 44px; margin: -8px -10px 8px 0;
    display: grid; place-items: center;
    border: 0; background: transparent; color: var(--k-surface); cursor: pointer;
  }
  .k-drawer__nav { flex: 1; }
  .k-drawer__nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--k-border-dark);
    font-size: 19px; font-weight: 300; line-height: 1.3;
  }
  .k-drawer__nav a span {
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    color: var(--k-gold-cta); font-variant-numeric: tabular-nums;
  }
  .k-drawer__foot { display: grid; gap: 10px; margin-top: 24px; }
  .k-drawer__addr {
    margin-top: 6px; font-size: 12px; line-height: 19px;
    color: rgba(252, 255, 254, .58);
  }

  /* --- Hero: pantalla completa, contenido en la zona del pulgar --------
     La cabecera es `sticky`, o sea que ocupa sitio en el flujo: pedir
     `100svh` para el hero daba una primera pantalla de 100svh + cabecera y el
     bloque de reseñas de Google se iba por debajo del pliegue. Se descuenta.
     `svh` mide la pantalla con la barra del navegador desplegada, que es el
     caso peor en Safari; y el relleno inferior respeta el indicador de inicio
     del iPhone, que si no se come la última línea. */
  .k-hero { min-height: calc(100svh - var(--k-header-h)); }
  .k-hero__inner {
    padding: 40px var(--k-gutter) calc(30px + env(safe-area-inset-bottom, 0px));
    align-content: end; min-height: calc(100svh - var(--k-header-h));
  }
  .k-hero .k-lead { font-size: 16px; line-height: 25px; margin-top: 14px; }
  .k-hero__actions { margin-top: 26px; gap: 10px; }
  /* Un solo botón manda; el teléfono queda como alternativa, no como rival */
  .k-hero__actions .k-btn--gold { width: 100%; }
  .k-hero__actions .k-btn--ghost-light {
    width: 100%; background: transparent; border-color: rgba(252,255,254,.34);
  }
  .k-hero__trust { margin-top: 24px; padding-top: 20px; gap: 12px 18px; }
  .k-google { padding: 8px 14px 8px 10px; gap: 10px; }
  .k-google__score { font-size: 17px; }
  .k-google__meta { font-size: 11px; }

  /* Indicador de scroll: dice que hay página debajo sin ocupar sitio */
  .k-hero__cue {
    display: block;
    position: absolute; left: 50%; bottom: 10px;
    width: 1px; height: 26px;
    background: linear-gradient(to bottom, transparent, var(--k-gold-cta));
    transform: translateX(-50%);
    animation: k-cue 2.6s var(--k-ease) infinite;
  }
  @keyframes k-cue {
    0%, 100% { opacity: 0; transform: translate(-50%, -6px); }
    50%      { opacity: 1; transform: translate(-50%, 0); }
  }

  /* --- Tarjeta: la foto manda y el precio va escrito sobre ella -------- */
  .k-card__media { aspect-ratio: 3 / 2; }
  .k-card__onimg {
    display: block;
    position: absolute; left: 14px; bottom: 12px; z-index: 2;
    font-size: 21px; font-weight: 600; letter-spacing: -.01em;
    color: var(--k-surface);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 12px rgba(7, 33, 29, .8);
    pointer-events: none;
  }
  /* Velo inferior para que el precio se lea sobre cualquier foto */
  .k-card__media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 44%;
    background: linear-gradient(to top, rgba(7,33,29,.72), transparent);
    pointer-events: none;
  }
  .k-card__dots { bottom: 44px; }
  .k-card__count { bottom: 46px; }
  .k-card__price { display: none; }        /* ya está sobre la fotografía */

  .k-card__body { padding: 16px 16px 18px; }
  .k-card__town { font-size: 12px; }
  .k-card__title { font-size: 16px; line-height: 22px; margin-top: 6px; min-height: 44px; }
  .k-card__specs {
    margin-top: 10px; padding-top: 10px; gap: 6px 14px; font-size: 12px;
  }
  /* Tres acciones en una sola fila de 44 px: ver, pedir info y agendar.
     La de agendar se reduce a icono — el calendario se entiende sin texto y
     así el CTA de visita sigue en cada tarjeta sin robar una fila entera. */
  .k-card__foot { margin-top: 14px; }
  .k-card__row { flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .k-card__row .k-btn { padding: 0 10px; font-size: 13px; }
  .k-card__tour {
    flex: 0 0 46px;
    min-height: 44px; padding: 0;
  }
  .k-card__tour span { display: none; }    /* queda sólo el icono */
  .k-card__tour svg { width: 19px; height: 19px; }

  /* --- Filtros: panel inferior ---------------------------------------- */
  .k-searchbar__head { padding: 14px 16px; }
  .k-searchbar__count { font-size: 14px; }

  .k-sheet__backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 74;
    background: rgba(7, 33, 29, .66); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    /* Igual que el menú: mostrar es inmediato, ocultar espera al fundido. */
    transition: opacity .28s var(--k-ease), visibility 0s linear .28s;
  }
  .k-sheet__backdrop.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

  .k-searchbar__fields {
    display: block;
    position: fixed; inset: auto 0 0 0; z-index: 75;
    max-height: 86svh; overflow-y: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--k-surface);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 50px rgba(7, 33, 29, .34);
    transform: translateY(101%);
    visibility: hidden;
    /* Visible al instante; sólo el ocultarse espera a que termine de bajar.
       Mismo motivo que en el menú: si la transición no llega a ejecutarse, el
       panel de filtros se quedaría invisible para siempre. */
    transition: transform .32s var(--k-ease), visibility 0s linear .32s;
    overscroll-behavior: contain;
  }
  .k-searchbar__fields.is-open { transform: none; visibility: visible; transition-delay: 0s; }

  .k-sheet__grip {
    display: block;
    width: 40px; height: 4px; margin: 10px auto 0;
    background: var(--k-border); border-radius: 2px;
  }
  .k-sheet__title {
    display: block;
    padding: 14px 20px 12px;
    font-size: 17px; font-weight: 500;
    border-bottom: 1px solid var(--k-border);
  }
  .k-fields { grid-template-columns: 1fr; }
  /* Fila entera pulsable: 62 px de alto y cursor de acción en todo el bloque */
  .k-fld { padding: 14px 20px; min-height: 62px; cursor: pointer; }
  .k-fld__label { font-size: 10px; }
  .k-sel__btn { font-size: 17px; min-height: 34px; }
  .k-sel__menu { left: 4px; right: 4px; max-height: 46svh; }
  .k-sel__opt { padding: 14px 12px; font-size: 16px; }

  .k-searchbar__foot { padding: 12px 20px; }
  .k-sheet__cta {
    display: grid; grid-template-columns: auto 1fr; gap: 10px;
    padding: 14px 20px 6px;
    border-top: 1px solid var(--k-border);
    background: var(--k-surface);
    position: sticky; bottom: 0;
  }
  .k-sheet__cta .k-btn { min-height: 50px; }

  /* --- Proceso: carrusel horizontal ------------------------------------ */
  .k-steps {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* se sale del contenedor a sangre para que se intuya que hay más */
    margin-inline: calc(var(--k-gutter) * -1);
    padding-inline: var(--k-gutter);
    padding-bottom: 4px;
  }
  .k-steps::-webkit-scrollbar { display: none; }
  .k-step { scroll-snap-align: start; padding: 24px 20px 22px; }
  .k-step__n { font-size: 74px; top: -10px; }
  .k-step h3 { font-size: 18px; }
  .k-step p { font-size: 14px; line-height: 21px; }

  /* --- Reputación, equipo, banda: densidad ----------------------------- */
  .k-ratecard { padding: 22px 26px; min-width: 0; width: 100%; }
  .k-ratecard__score { font-size: 44px; }
  .k-repu { gap: 20px; }
  .k-repu__facts { gap: 14px; }
  .k-repufact b { font-size: 22px; }
  .k-repufact span { font-size: 13px; line-height: 19px; }

  /* El retrato manda, pero no necesita media pantalla para hacerlo */
  .k-agentfeature { margin-top: 24px; }
  .k-agentfeature__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .k-agentfeature__photo img { object-position: center 22%; }
  .k-agentfeature__body { padding: 24px 22px; }
  .k-agentfeature__quote { font-size: 18px; line-height: 1.45; }
  .k-agentfeature__quote::before { margin-bottom: 14px; }
  .k-agentfeature__name { margin-top: 18px; }
  .k-agentfeature__langs { margin-top: 14px; }
  .k-agentfeature__actions { margin-top: 20px; }
  .k-agentfeature__actions .k-btn { flex: 1; }
  .k-agentfeature__second { margin-top: 20px; padding-top: 18px; }

  .k-tourband__copy { padding: 28px 22px; }
  .k-tourband h2 { font-size: 23px; }
  .k-tourband__copy > p { font-size: 14px; line-height: 22px; }
  .k-tourband__modes { margin-top: 20px; padding-top: 18px; gap: 8px 16px; }
  .k-tourband__mode { font-size: 12px; }
  .k-tourband__figure { min-height: 200px; }

  .k-review { padding: 22px 20px; }
  .k-review__text { font-size: 14px; line-height: 22px; }

  /* --- Ficha: el precio y los botones, nada más pasar el título --------
     En una columna, el panel se iría detrás de toda la descripción. Aquí
     sube justo debajo del encabezado, que es donde se decide. */
  .k-detail { display: flex; flex-direction: column; gap: 34px; }
  .k-detail > aside { order: -1; }
  .k-detail__head { margin-bottom: 22px; }
  .k-panel { padding: 22px 20px; }
  .k-panel__price { font-size: 30px; }
  .k-panel__actions { gap: 8px; margin-top: 18px; }
  .k-spec { padding: 15px 12px; }
  .k-spec__val { font-size: 18px; }
  /* Sólo por debajo de 900: a partir de ahí manda la galería de escritorio,
     que fija el alto en el contenedor. Si la proporción se aplicara también en
     la franja 900-1023 pisaría esa regla —va después en la hoja— y la foto
     volvería a desbordarse. */
  @media (max-width: 899px) { .k-gallery__main { aspect-ratio: 4 / 3; } }
  .k-datalist div { padding: 12px 0; font-size: 14px; }

  /* --- Contacto -------------------------------------------------------
     Los datos de la oficina pasan a una fila compacta: en móvil ya están en
     el menú, en la barra fija y en el pie; aquí sólo hacen falta como respaldo. */
  .k-contact { gap: 28px; }
  .k-contact__aside { gap: 18px; }
  .k-facts { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
  .k-fact { font-size: 13px; line-height: 19px; gap: 9px; }
  .k-fact__icon svg { width: 17px; height: 17px; }
  .k-fact b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .k-formgrid { gap: 16px; }
  .k-choice span { min-height: 46px; }

  /* --- Pie: tres bloques apilados no necesitan tanto aire -------------- */
  .k-footer.k-section { padding-top: 42px; padding-bottom: 34px; }
  .k-footer img.k-footer__logo { height: 26px; margin-bottom: 14px; }
  .k-footer h4 { margin-bottom: 10px; }

  /* --- Barra de acción: el pulgar llega primero al oro ------------------ */
  .k-actionbar { grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .k-actionbar .k-btn--light { padding: 0; font-size: 0; }
  .k-actionbar .k-btn--light svg { width: 20px; height: 20px; }
  .k-actionbar .k-btn { min-height: 50px; }

  /* --- Pie ------------------------------------------------------------- */
  .k-footer__grid { gap: 22px; }
  .k-footer__bar { margin-top: 26px; padding-top: 16px; }
}

/* Pantallas muy estrechas: el titular no puede partirse en cinco líneas */
@media (max-width: 359px) {
  .k-h1 { font-size: 29px; line-height: 33px; }
  .k-card__row .k-btn { font-size: 12px; padding: 0 6px; }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.k-hide { display: none !important; }
.k-nowrap { white-space: nowrap; }
@media print { .k-header, .k-actionbar, .k-video, .k-lightbox { display: none !important; } }

/* ==========================================================================
   Zonas de toque en móvil
   Va al final a propósito: son correcciones de tamaño mínimo que deben ganar
   a las reglas de aspecto de cada componente. El listón son los 44 px de
   Apple, que también cubren los 48 dp de Android.
   Donde el control es pequeño por diseño —los puntos del carrusel de reseñas—
   el área se agranda con un pseudoelemento, de modo que el dedo acierta sin
   que cambie nada de lo que se ve.
   ========================================================================== */
@media (max-width: 1023px) {
  .k-card__nav { width: 44px; height: 44px; }

  .k-revdot { position: relative; }
  .k-revdot::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* La casilla del RGPD es la puerta de todo el formulario. */
  .k-consent input { width: 22px; height: 22px; margin-top: 0; }
  .k-consent { align-items: center; padding: 4px 0; }

  /* Enlaces del pie: van en lista, no dentro de una frase, así que les toca
     área propia. El margen negativo evita que crezca la altura del bloque. */
  /* Todo click-to-call que vive SUELTO en una línea de texto —pie, párrafos,
     el teléfono de la cabecera— y no dentro de un botón: un botón `.k-btn` ya
     mide 48 px por su propio `min-height` y con `gap` entre hermanos, así que
     aplicarle aquí el mismo margen negativo lo monta sobre el botón de al lado
     dentro de ese `gap` en vez de sumarle área de toque. Por eso `:not(.k-btn)`
     es obligatorio, no cosmético: sin él, «Solicitar visita» y el botón de
     teléfono de debajo quedan pegados en el panel, en el cajón móvil y en
     cualquier grupo de acciones que use este mismo patrón. */
  .k-footer__legal a,
  a[href^="tel:"]:not(.k-btn),
  a[href^="mailto:"]:not(.k-btn) {
    display: inline-flex; align-items: center;
    min-height: 44px; margin-block: -13px;
  }

  .k-google { min-height: 44px; }

  /* El aviso de cookies no puede comerse media pantalla en un móvil pequeño:
     «Configurar» ocupaba una fila entera para él solo. Pasa a la misma línea,
     con su ancho natural de enlace. «Rechazar» y «Aceptar» siguen midiendo
     exactamente lo mismo, que es lo que exige la guía de la AEPD: rechazar
     tiene que costar lo mismo que aceptar. */
  .kc-banner__actions { grid-template-columns: auto 1fr 1fr; align-items: center; }
  .kc-banner__more { grid-column: auto; padding: 0 4px; min-height: 46px; }
  /* El título de la tarjeta: la foto ya es un enlace grande, pero el titular
     es donde mucha gente pulsa. */
  .k-card__title a { display: block; min-height: 44px; }
}