/* ==========================================================================
   KW Beloki — capa de movimiento e interacción
   Se carga después de site.css.
   Principio: todo parte de un estado visible. Si el JS falla o el usuario
   pide menos movimiento, la página se ve completa igual — nada se queda
   escondido en opacity:0 esperando un observador.
   ========================================================================== */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* salto al contenido: accesibilidad y buena práctica de indexación */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:12px 20px;
  font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- aparición al hacer scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .6s var(--ease-out) var(--d,0ms);
}

/* ---------- barra de progreso de lectura ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:80;transition:width .1s linear}

/* ---------- cabecera al hacer scroll ---------- */
.topbar{transition:box-shadow .25s var(--ease)}
.topbar .wrap{transition:min-height .25s var(--ease)}
.topbar.is-scrolled{box-shadow:0 1px 22px rgba(0,0,0,.10)}
.topbar.is-scrolled .wrap{min-height:60px}
.brand .mark{transition:width .25s var(--ease),height .25s var(--ease),flex-basis .25s var(--ease),font-size .25s var(--ease)}
.topbar.is-scrolled .brand .mark{width:34px;height:34px;flex-basis:34px;font-size:13px}

/* ---------- portada: resplandor de fondo muy contenido ---------- */
.home-hero{position:relative;overflow:hidden}
.home-hero::before{
  content:"";position:absolute;z-index:0;inset:-30% -10% auto -20%;height:130%;
  background:radial-gradient(42% 40% at 24% 32%,color-mix(in srgb,var(--accent) 6%,transparent) 0%,transparent 72%);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .home-hero::before{animation:drift 24s ease-in-out infinite alternate}
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,4%,0) scale(1.12)}}
.home-hero>.wrap{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   Portada con foto de fondo
   Se activa poniendo la clase «con-foto» en la sección del héroe.

   Dos cosas que hacen que esto salga bien o mal: el velo y el contraste.
   La foto es de noche pero tiene zonas claras —las luces del paseo—, así que
   el texto en blanco encima necesita un velo oscuro o se pierde justo ahí.
   El velo es un degradado, más denso a la izquierda, que es donde cae el
   titular, y más suave a la derecha, donde no hay texto y se ve la bahía.
   -------------------------------------------------------------------------- */
.home-hero.con-foto {
  background-image:
    linear-gradient(100deg, rgba(10,14,24,.88) 0%, rgba(10,14,24,.74) 42%, rgba(10,14,24,.46) 100%),
    var(--foto);
  background-size: cover;
  /* la bahía iluminada está en la franja baja de la foto; el héroe es mucho
     más apaisado que ella, así que hay que elegir qué banda se ve */
  background-position: center 80%;
  color: #fff;
  /* con foto conviene más aire: si no, se ve un recorte tan fino que no se
     entiende qué se está mirando */
  padding-block: clamp(72px, 8vw, 124px) clamp(56px, 6vw, 92px);
}
/* el resplandor rojo de la versión clara sobraría encima de la foto */
.home-hero.con-foto::before { display: none; }

.home-hero.con-foto .eyebrow { color: rgba(255,255,255,.82); }
.home-hero.con-foto h1 { color: #fff; }
.home-hero.con-foto h1 em { color: #fff; }
.home-hero.con-foto .lede { color: rgba(255,255,255,.88); }

/* el panel de datos pasa a ser una tarjeta sólida: encima de una foto, un
   recuadro translúcido se vuelve ilegible en cuanto pasa por una zona clara */
.home-hero.con-foto .hero-stats {
  background: #fff;
  padding: var(--s4) var(--s4) var(--s3);
  color: var(--ink);
}
.home-hero.con-foto .hero-stats dt { color: var(--ink-faint); }
.home-hero.con-foto .hero-stats dd { color: var(--ink); }

/* El botón secundario era un contorno oscuro y sobre la foto no se veía.
   El relleno es oscuro y bastante opaco a propósito: con uno claro o muy
   transparente, el texto blanco se pierde en cuanto la foto tiene una zona
   iluminada detrás, y además así el contraste se sostiene solo, sin depender
   de qué haya debajo. */
.home-hero.con-foto .btn.ghost {
  border-color: rgba(255,255,255,.62);
  color: #fff;
  background: rgba(10,14,24,.72);
}
.home-hero.con-foto .btn.ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

@media (max-width: 900px) {
  /* en vertical el texto ocupa todo el ancho, así que el velo va parejo */
  .home-hero.con-foto {
    background-image:
      linear-gradient(180deg, rgba(10,14,24,.86) 0%, rgba(10,14,24,.80) 60%, rgba(10,14,24,.86) 100%),
      var(--foto);
  }
}

/* entrada del titular, palabra a palabra */
.js .home-hero h1 .w{display:inline-block;opacity:0;transform:translateY(.48em)}
.js .home-hero h1 .w.in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease-out) var(--d,0ms),transform .55s var(--ease-out) var(--d,0ms);
}

/* ---------- cinta de zonas ---------- */
.marquee{border-block:1px solid var(--line);background:var(--ground);overflow:hidden;padding-block:16px}
.marquee-track{display:flex;width:max-content;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:slide 46s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-track span{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink-soft);
  padding-inline:22px;white-space:nowrap;display:flex;align-items:center;gap:22px;
}
.marquee-track span::after{content:"";width:6px;height:6px;background:var(--accent);flex:0 0 6px}

/* ---------- vídeo ---------- */
.video-band{background:var(--night);color:var(--night-ink);border-block:1px solid var(--line)}
.video-band h2{color:var(--night-ink)}
.video-band .lede{color:var(--night-soft)}
.video-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){.video-grid{grid-template-columns:1fr}}
.player{
  position:relative;aspect-ratio:16/9;max-width:100%;width:100%;overflow:hidden;display:block;padding:0;
  background:linear-gradient(140deg,#242a2f 0%,#12161a 58%,#1e1215 100%);
  border:1px solid var(--night-line);cursor:pointer;
}
.player img,.player video{width:100%;height:100%;object-fit:cover;display:block}
.player iframe{width:100%;height:100%;border:0;display:block}
.player .play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,.10));
  transition:background .25s var(--ease);
}
.player:hover .play{background:linear-gradient(to top,rgba(0,0,0,.46),rgba(0,0,0,.04))}
.play-btn{
  position:relative;width:78px;height:78px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;transition:transform .25s var(--ease-out);
  box-shadow:0 10px 40px rgba(206,1,31,.42);
}
.player:hover .play-btn{transform:scale(1.09)}
.play-btn i{display:block;border-left:20px solid #fff;border-block:12px solid transparent;margin-left:5px}
@media (prefers-reduced-motion:no-preference){
  .play-btn::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--accent);animation:pulse 2.6s var(--ease-out) infinite;
  }
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.95);opacity:0}}
.player .cap{
  position:absolute;left:0;right:0;bottom:0;padding:32px 24px 20px;text-align:left;
  font-family:var(--display);font-weight:700;font-size:15px;color:#fff;
  /* velo propio: el rótulo sigue legible aunque la foto de portada sea clara */
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.player .cap small{display:block;font-weight:600;font-size:11px;letter-spacing:.11em;text-transform:uppercase;opacity:.72;margin-bottom:6px}
.video-chapters{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--night-line)}
.video-chapters li{
  display:grid;grid-template-columns:54px 1fr;gap:var(--s2);padding:14px 0;
  border-bottom:1px solid var(--night-line);font-size:14.5px;color:var(--night-soft);
}
.video-chapters b{font-family:var(--display);font-weight:700;color:var(--accent);font-size:13px}

/* aviso de hueco pendiente — se borra al poner el contenido real */
.pending{
  border:1px dashed var(--accent);background:var(--accent-wash);color:var(--ink);
  padding:14px 18px;font-size:13px;line-height:1.65;margin-top:var(--s2);
}
.pending b{font-family:var(--display);font-weight:700;display:block;margin-bottom:4px;color:var(--accent)}
.pending code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--sunk);padding:1px 5px}
.video-band .pending{background:rgba(206,1,31,.13);color:var(--night-ink);border-color:var(--accent)}
.video-band .pending code{background:rgba(255,255,255,.1)}

/* ---------- fotos de inmueble ---------- */
.prop-media img,.detail-media img,.thumbs img,.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.prop-media img,.prop-media svg{transition:transform .5s var(--ease-out)}
.prop:hover .prop-media img,.prop:hover .prop-media svg{transform:scale(1.045)}
.prop,.post{transition:border-color .2s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease-out)}
.prop:hover,.post:hover{transform:translateY(-3px)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-top:var(--s1)}
.gallery button{
  padding:0;border:1px solid var(--line);background:var(--sunk);aspect-ratio:3/2;
  overflow:hidden;cursor:pointer;max-width:100%;position:relative;display:block;
}
.gallery button img,.gallery button svg{transition:transform .4s var(--ease-out)}
.gallery button:hover img,.gallery button:hover svg{transform:scale(1.06)}
.gallery .more-count{
  position:absolute;inset:0;background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.1rem;
}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(10,12,13,.95);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){.lightbox{animation:fadein .2s var(--ease-out)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lightbox figure{margin:0;max-width:min(1100px,92vw);width:100%}
.lightbox .frame{aspect-ratio:3/2;background:#16191b;border:1px solid rgba(255,255,255,.15);overflow:hidden;max-width:100%}
.lightbox .frame img,.lightbox .frame svg{width:100%;height:100%;object-fit:contain}
.lightbox figcaption{
  color:rgba(255,255,255,.74);font-size:13.5px;margin-top:14px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:rgba(22,25,28,.82);border:1px solid rgba(255,255,255,.28);
  color:#fff;width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
  font-size:22px;line-height:1;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--accent);border-color:var(--accent)}
.lb-close{top:20px;right:20px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}

/* ---------- volver arriba ---------- */
.totop{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;
  width:48px;height:48px;background:var(--ink);color:var(--ground);border:0;cursor:pointer;
  display:grid;place-items:center;font-size:20px;line-height:1;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease-out),background .2s var(--ease);
}
.totop.on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--accent);color:#fff}

/* ---------- transición al filtrar ---------- */
.grid-props.swapping{opacity:.3;transition:opacity .14s var(--ease)}

/* ---------- reseñas ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:880px){.reviews{grid-template-columns:1fr}}
.review{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);margin:0}
.stars{color:var(--accent);font-size:15px;letter-spacing:3px}
.review blockquote{margin:0;font-size:1.02rem;line-height:1.65;color:var(--ink)}
.review figcaption{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-faint)}
.review figcaption b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:14.5px;margin-bottom:3px}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal].in,
  .js .home-hero h1 .w,.js .home-hero h1 .w.in{opacity:1!important;transform:none!important;transition:none!important}
  .marquee-track,.home-hero::before{animation:none!important}
}

/* ---------- selector de idioma ---------- */
.lang{display:flex;align-items:center;border:1px solid var(--line-strong);overflow:hidden;flex:0 0 auto}
.lang-op{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;
  padding:9px 11px;text-decoration:none;color:var(--ink-faint);
  border-left:1px solid var(--line);transition:background .15s var(--ease),color .15s var(--ease);
}
.lang-op:first-child{border-left:0}
.lang-op:hover{background:var(--sunk);color:var(--ink)}
.lang-op.is-on{background:var(--accent);color:#fff}
@media (max-width:1060px){.lang{margin-left:auto}}
@media (max-width:420px){.lang-op{padding:9px 9px;font-size:11.5px}}

/* ==========================================================================
   RECUADROS ESTRUCTURADOS
   Todas las tarjetas comparten la misma anatomía: cabecera numerada con
   línea, título y cuerpo. Así la cabecera cae a la misma altura en todas,
   aunque el título ocupe una línea o dos.
   ========================================================================== */

.cols3,.space{counter-reset:caja}

.pillar,.room{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:0;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:2px solid var(--accent);
}
.pillar>*,.room>*{padding-inline:var(--s4)}

/* cabecera: etiqueta a la izquierda, número a la derecha, línea debajo */
.pillar .tag,.room h3 code{
  counter-increment:caja;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0;padding-block:16px;
  border-bottom:1px solid var(--line);
  color:var(--accent);
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.pillar .tag::after,.room h3 code::after{
  content:counter(caja,decimal-leading-zero);
  color:var(--ink-faint);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

.pillar h3,.room h3{
  margin:0;padding-top:var(--s3);padding-bottom:12px;
  font-size:1.14rem;line-height:1.3;
}
.pillar p,.room p{margin:0;padding-bottom:var(--s4);color:var(--ink-soft);font-size:.98rem}
.pillar .more{margin:0;padding-block:0 var(--s4)}

/* la ficha de sala tenía el código dentro del h3: lo sacamos a cabecera */
.room h3{display:block}
.room h3 code{display:flex;margin-bottom:var(--s3);margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4)}

/* --- franja de refuerzo: cajas de verdad, no columnas sueltas --- */
.ticker .wrap{gap:0}
.tick{
  counter-increment:caja;
  padding:var(--s4);border:1px solid var(--line);border-left-width:0;
  background:var(--surface);display:grid;grid-template-rows:auto 1fr;gap:10px;
}
.tick:first-child{border-left-width:1px}
@media (max-width:780px){
  .tick{border-left-width:1px}
  .tick:nth-child(n+3){border-top-width:0}
  .tick:nth-child(2n){border-left-width:0}
}
/* a una columna las fichas se apilan: borde en los cuatro lados y sin doblar
   el de arriba con el de abajo de la anterior. Se repite el nth-child del
   bloque de 780 porque si no le gana en especificidad. */
@media (max-width:560px){
  .tick,.tick:nth-child(2n){border-left-width:1px}
  .tick + .tick{border-top-width:0}
}
.tick .n{
  font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--line);
}
.tick .l{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6}

/* --- panel de datos del hero: caja cerrada --- */
.hero-stats{
  border:1px solid var(--line);border-top:2px solid var(--accent);
  background:var(--surface);padding-inline:var(--s4);
}
.hero-stats div{padding-block:15px}
.hero-stats div:last-child{border-bottom:0}

/* ==========================================================================
   ANIMACIÓN EN LO QUE IMPORTA
   ========================================================================== */

/* el número del paso entra girando ligeramente */
@media (prefers-reduced-motion:no-preference){
  .js .step[data-reveal] .num{opacity:0;transform:translateX(-6px)}
  .js .step[data-reveal].in .num{
    opacity:1;transform:none;
    transition:opacity .5s var(--ease-out) .12s,transform .5s var(--ease-out) .12s;
  }
}

/* botón principal: la flecha se desliza al pasar por encima */
.btn.go::after{
  content:"→";margin-left:10px;display:inline-block;
  transition:transform .22s var(--ease-out);
}
.btn.go:hover::after{transform:translateX(4px)}

/* el formulario de captación se destaca al entrar en pantalla */
.form-destacado{position:relative}
.form-destacado::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  border:2px solid var(--accent);opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .js .form-destacado[data-reveal].in::before{animation:marco 2.2s var(--ease-out) .35s}
}
@keyframes marco{
  0%{opacity:0;transform:scale(1.015)}
  25%{opacity:1;transform:scale(1)}
  75%{opacity:1}
  100%{opacity:0}
}

/* ==========================================================================
   CAPTACIÓN: QUE EL AGENTE DEJE SUS DATOS
   ========================================================================== */

/* franja intermedia de llamada a la acción */
.llamada{
  background:var(--accent);color:#fff;
  border-block:1px solid var(--accent-deep);
}
.llamada .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);
  align-items:center;padding-block:clamp(36px,5vw,56px);
}
@media (max-width:860px){.llamada .wrap{grid-template-columns:1fr}}
.llamada p.eyebrow{color:rgba(255,255,255,.82);margin-bottom:14px}
.llamada p.eyebrow::before{background:rgba(255,255,255,.6)}
.llamada h2{color:#fff;font-size:clamp(1.5rem,3.2vw,2.2rem);margin:0}
.llamada .sub{color:rgba(255,255,255,.88);margin-top:14px;max-width:62ch;font-size:1.03rem}
.llamada .btn{background:#fff;color:var(--accent);border-color:#fff}
.llamada .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* qué pasa después de dejar los datos */
.pasos-lead{
  list-style:none;margin:var(--s4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);background:var(--surface);
}
@media (max-width:700px){.pasos-lead{grid-template-columns:1fr}}
.pasos-lead li{padding:var(--s3);border-left:1px solid var(--line)}
.pasos-lead li:first-child{border-left:0}
@media (max-width:700px){
  .pasos-lead li{border-left:0;border-top:1px solid var(--line)}
  .pasos-lead li:first-child{border-top:0}
}
.pasos-lead b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.pasos-lead span{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}

/* garantías junto al formulario: quitan fricción antes de enviar */
.garantias{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:var(--s3);
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink-soft);
}
.garantias span{display:flex;align-items:center;gap:7px}
.garantias span::before{content:"✓";color:var(--accent);font-weight:700}

/* barra fija en móvil: la entrevista siempre a un toque */
.cta-fija{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  gap:12px;align-items:center;
}
.cta-fija p{
  flex:1;min-width:0;font-family:var(--display);font-weight:700;
  font-size:13px;line-height:1.3;color:var(--ink);
}
.cta-fija p small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.cta-fija .btn{flex:0 0 auto;min-height:42px;padding:0 18px;font-size:12.5px}
@media (max-width:820px){
  .cta-fija{display:flex}
  .totop{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:72px}
}

/* ---------- cabecera en pantallas estrechas ----------
   Sin esto, marca + selector de idioma + botón de menú no caben en una fila
   y el botón se descuelga a una segunda línea. */
@media (max-width:560px){
  .topbar .wrap{gap:12px;min-height:60px}
  .brand .mark{width:32px;height:32px;flex-basis:32px;font-size:13px}
  .brand b{font-size:15px}
  .brand i{display:none}
  .lang-op{padding:8px 9px;font-size:11.5px}
  .burger{width:40px;height:36px}
}

/* enlaces del pie: en móvil necesitan superficie para el dedo */
@media (max-width:820px){
  .foot-cols ul{gap:2px}
  .foot-cols a{display:inline-block;padding-block:9px}
}

/* ---------- tres áreas de entrada (agentes, agencias, quien empieza) ---------- */
.perfiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);align-items:stretch}
@media (max-width:980px){.perfiles{grid-template-columns:1fr}}
.perfil{
  display:grid;grid-template-rows:auto auto auto 1fr auto;
  background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--line-strong);
  padding:0;margin:0;
}
.perfil>*{padding-inline:var(--s4)}
/* las dos vías prioritarias se distinguen sin gritar */
.perfil.destacado{border-top-color:var(--accent);box-shadow:0 4px 20px rgba(20,22,24,.06)}

.perfil-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  /* altura fija: la tercera tarjeta no lleva distintivo y, sin esto,
     su título subiría respecto al de las otras dos */
  min-height:62px;padding-block:14px;border-bottom:1px solid var(--line);
}
.perfil-tag{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
}
.perfil.destacado .perfil-tag{color:var(--accent)}
.perfil-marca{
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:4px 8px;white-space:nowrap;
}
.perfil h3{margin:0;padding-top:var(--s3);padding-bottom:10px;font-size:1.16rem;line-height:1.3}
.perfil>p{margin:0;padding-bottom:var(--s3);color:var(--ink-soft);font-size:.98rem}
.perfil-lista{list-style:none;margin:0;padding-bottom:var(--s4);display:grid;gap:10px;align-content:start}
.perfil-lista li{position:relative;padding-left:24px;font-size:.95rem;color:var(--ink-soft)}
.perfil-lista li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.perfil .btn{margin:0 var(--s4) var(--s4);padding-inline:18px}

/* ==========================================================================
   AVISO DE COOKIES
   Aparece abajo, no tapa la web entera. El botón de rechazar tiene el mismo
   peso visual que el de aceptar: la norma exige que rechazar sea tan fácil
   como aceptar, y un «rechazar» escondido es motivo de sanción.
   ========================================================================== */

.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--surface);border-top:2px solid var(--accent);
  box-shadow:0 -6px 30px rgba(20,22,24,.12);
  padding:var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom,0px));
}
@media (prefers-reduced-motion:no-preference){
  .cookies{animation:sube .32s var(--ease-out)}
}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}

.cookies-caja{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4);align-items:center;
}
@media (max-width:860px){.cookies-caja{grid-template-columns:1fr}}

.cookies h2{font-size:1.05rem;margin-bottom:8px}
.cookies-txt p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:78ch}
.cookies-txt a{color:var(--accent);font-weight:600}

.cookies-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:520px){
  .cookies-btns{display:grid;grid-template-columns:1fr 1fr}
  .cookies-btns [data-c="si"],.cookies-btns [data-c="guardar"]{grid-column:1/-1}
}

/* panel de ajustes: puede crecer, así que se le pone tope y scroll propio */
.cookies-caja.ajustes{grid-template-columns:1fr;align-items:start}
.cookies-caja.ajustes .cookies-txt{max-height:48vh;overflow-y:auto}
.cookies-cats{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.cookies-cats li{padding:14px 0;border-bottom:1px solid var(--line)}
.cat-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.cat-cab b{font-family:var(--display);font-weight:700;font-size:14.5px}
.cat-cab span{
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
}
.cookies-cats p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:76ch}

/* interruptor */
.sw{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 44px}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw span{
  position:absolute;inset:0;background:var(--line-strong);
  transition:background .2s var(--ease);pointer-events:none;
}
.sw span::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;
  transition:transform .2s var(--ease-out);
}
.sw input:checked + span{background:var(--accent)}
.sw input:checked + span::after{transform:translateX(20px)}
.sw input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* mientras el aviso está abierto, la barra fija de móvil estorba */
.con-cookies .cta-fija,.con-cookies .totop{display:none}

/* ==========================================================================
   VÍDEO VERTICAL
   El vídeo de empresa es 9:16, pensado para redes. En vez de meterlo en un
   marco horizontal con dos bandas negras, la sección se adapta: texto a la
   izquierda con más sitio y el vídeo a la derecha en su proporción real.
   ========================================================================== */

.video-band.vertical .video-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
@media (max-width:900px){
  .video-band.vertical .video-grid{grid-template-columns:1fr}
  .video-band.vertical .video-col{max-width:320px;margin-inline:auto}
}

/* el vídeo propio no necesita fachada: no instala cookies de terceros,
   así que se muestra el reproductor nativo directamente */
.video-vertical{
  position:relative;aspect-ratio:9/16;max-width:100%;width:100%;
  background:#12161a;border:1px solid var(--night-line);overflow:hidden;
}
.video-vertical video{width:100%;height:100%;object-fit:cover;display:block;background:#12161a}

.video-pie{
  margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--night-soft);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.video-pie b{font-family:var(--display);font-weight:700;color:var(--night-ink)}

/* los mensajes del vídeo, como lista de apoyo */
.video-claves{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--night-line)}
.video-claves li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--night-line);
  font-size:14.5px;color:var(--night-soft);
}
.video-claves li::before{
  content:"";width:7px;height:7px;background:var(--accent);
  display:block;transform:translateY(-2px);
}
.video-claves b{font-family:var(--display);font-weight:700;color:var(--night-ink)}

/* --------------------------------------------------------------------------
   Mapa bajo petición
   Igual que el vídeo: la web no carga nada de Google hasta que el visitante
   lo pide. Así el mapa no mete cookies a quien solo quería el teléfono.
   -------------------------------------------------------------------------- */
.mapa {
  margin-top: 20px;
  border: 1px dashed var(--line-strong);
  background: var(--sunk);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}
.mapa.cargado {
  display: block;
  padding: 0;
  border-style: solid;
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapa-nota {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.6;
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   Fotos dentro de las tarjetas del espacio
   La foto va arriba, a sangre: la tarjeta tiene su propio padding y la imagen
   lo compensa con márgenes negativos para llegar al borde.
   -------------------------------------------------------------------------- */
.room picture {
  display: block;
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
}
.room picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sunk);
}
/* el rótulo de la tarjeta ya no necesita separarse del borde superior */
.room picture + h3 code { margin-top: 0; }

/* nota de procedencia de las reseñas */
.review-fuente {
  margin-top: var(--s4);
  font-size: 14px;
  color: var(--ink-faint);
  line-height: 1.7;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Fotos sueltas fuera de las tarjetas
   -------------------------------------------------------------------------- */
.foto-ancha { margin: 0 0 var(--s4); }
.foto-ancha img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sunk);
}

/* banda a lo ancho del contenedor, con pie */
.foto-banda { margin: 0 auto; max-width: var(--max); padding-inline: var(--pad); }
.foto-banda img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 60%;
  background: var(--sunk);
}
/* La banda de 21:9 va bien para un paisaje, pero recorta mucho por arriba y
   por abajo. Cuando lo importante de la foto está en el tercio superior —un
   rótulo, por ejemplo— hay que bajar el recorte y anclarlo arriba, o se corta
   justo lo que se quería enseñar. */
.foto-banda.rotulo img { aspect-ratio: 16 / 9; object-position: center 28%; }
@media (max-width: 700px) { .foto-banda.rotulo img { aspect-ratio: 3 / 2; } }

.foto-banda figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Logo de la cabecera
   Sustituye al cuadro rojo dibujado con CSS. El archivo lleva transparencia,
   porque la barra superior es semitransparente y con desenfoque: un fondo
   blanco se vería como un parche al bajar por la página.
   -------------------------------------------------------------------------- */
.brand .logo {
  display: block;
  height: 44px;
  width: auto;
  transition: height .25s var(--ease);
}
.topbar.is-scrolled .brand .logo { height: 36px; }

/* el rótulo de la sede, separado del logo por una línea fina */
.brand > i {
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  align-self: center;
  margin-top: 0;
}
/* en pantallas estrechas manda el logo: el rótulo sobra */
@media (max-width: 560px) {
  .brand > i { display: none; }
  .brand .logo { height: 38px; }
}

/* --------------------------------------------------------------------------
   El logo no se encoge nunca.

   La cabecera es un flex y pedía unos 1.253 px de ancho (logo + rótulo + seis
   enlaces + botón + los tres idiomas) en un contenedor de 1.200. El navegador
   repartía la falta encogiendo lo que podía, y lo único con holgura era el
   logo: se quedaba en 14 px de ancho cuando la imagen mide 124, o sea un
   churro vertical. Pasaba en cualquier pantalla por encima de 1.060 px, que
   es donde aparece el menú completo; en móvil no se veía porque ahí el menú
   va escondido.

   Un <picture> dentro de un flex no protege el tamaño de su <img>, así que
   hay que decírselo a los dos.
   -------------------------------------------------------------------------- */
.brand { flex: 0 0 auto; }
.brand picture { flex: 0 0 auto; display: block; }
.brand .logo { flex: 0 0 auto; max-width: none; }

/* Y aun sin encoger el logo, el contenido no cabía. El rótulo de la sede es
   lo más prescindible: el logo ya dice de quién es la web y el antetítulo de
   la portada repite «Market Center Keller Williams · Donostia». */
@media (min-width: 1061px) {
  .brand > i { display: none; }
}


/* --------------------------------------------------------------------------
   Keller Williams en cifras
   El contador lo anima motion.js al entrar en pantalla, leyendo data-count.
   Si el visitante tiene activado «reducir movimiento», el número aparece
   puesto, sin cuenta atrás.
   -------------------------------------------------------------------------- */
.cifras { background: var(--sunk); border-block: 1px solid var(--line); }
.cifras .wrap { text-align: center; }
.cifras h2 { margin-bottom: var(--s2); }
.cifras .lede { margin: 0 auto var(--s5); }
.cifras-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s4); align-items: start;
}
.cifra b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cifra span {
  display: block; margin-top: 10px;
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
}
.cifra small {
  display: block; margin-top: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  max-width: 24ch; margin-inline: auto;
}
@media (max-width: 860px) { .cifras-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--s5); } }
@media (max-width: 440px) { .cifras-grid { grid-template-columns: 1fr; } }