/* ==========================================================================
   KW Beloki — sistema de diseño
   Color: paleta corporativa Keller Williams — rojo KW, negro, grises fríos y blanco.
   Tipos: Montserrat (geométrica, equivalente libre de Gotham) + Mulish para texto.
   Retícula: contenedor único de 1200 px, escala de espaciado de 8 px.
   ========================================================================== */

:root{
  /* --- color --- */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --sunk:#F4F5F6;
  --ink:#141618;
  --ink-soft:#53565A;      /* KW Cool Gray 11 */
  --ink-faint:#70757A;
  --accent:#CE011F;        /* rojo KW */
  --accent-deep:#9E0117;
  --accent-wash:#FDF0F1;
  --amber:#8A5300;
  --line:#E4E6E8;
  --line-strong:#C9CDD0;
  --night:#F7F8F9;         /* franja clara, antes negra */
  --night-ink:#141618;
  --night-soft:#53565A;
  --night-line:#E1E4E6;
  --night-sunk:#FFFFFF;

  /* --- tipografía --- */
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --body:"Mulish","Helvetica Neue",Arial,sans-serif;

  /* --- espaciado (múltiplos de 8) --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
  --block:clamp(56px,7vw,96px);
  --pad:clamp(20px,4vw,40px);
  --max:1200px;

  /* La web va siempre en claro, decisión de marca. Sin esto, el
     navegador pinta en oscuro los controles de formulario. */
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{
  font-family:var(--display);margin:0;font-weight:700;
  line-height:1.15;letter-spacing:-.014em;text-wrap:balance;
}
h1{font-weight:800;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.rule{height:3px;background:var(--accent);border:0;margin:0}
.hair{height:1px;background:var(--line);border:0;margin:0}
.slot{border-bottom:1px dashed var(--accent);color:var(--accent)}

/* etiqueta pequeña, el único uso de mayúsculas del sistema */
.label,.sec-label,.eyebrow,.tag,.cat,.crumbs,.badge,
.foot-cols h4,label,.prop .zona,.step .when,.sortbox{
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
}

/* ---------- cabecera ---------- */
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:var(--s3);min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand .mark{
  width:40px;height:40px;flex:0 0 40px;background:var(--accent);color:#fff;
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em;
  display:grid;place-items:center;
}
.brand b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;display:block;line-height:1.1}
.brand i{
  font-family:var(--display);font-style:normal;font-weight:600;font-size:10px;
  color:var(--ink-faint);letter-spacing:.11em;text-transform:uppercase;display:block;margin-top:3px;
}
nav.links{display:flex;gap:var(--s4);align-items:center}
nav.links a{
  text-decoration:none;color:var(--ink-soft);white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.005em;
  padding-block:6px;border-bottom:2px solid transparent;
}
nav.links a:hover{color:var(--ink)}
nav.links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

.burger{
  display:none;width:44px;height:40px;border:1px solid var(--line-strong);background:transparent;
  cursor:pointer;padding:0;place-items:center;color:var(--ink);
}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
#menu{display:none}
@media (max-width:1060px){
  nav.links{display:none}
  .burger{display:grid}
  .topbar .wrap{flex-wrap:wrap}
  #menu[hidden]{display:none!important}
  #menu{display:block;width:100%;border-top:1px solid var(--line);padding-block:var(--s1) var(--s2)}
  #menu a{
    display:block;text-decoration:none;font-family:var(--display);font-weight:600;font-size:15px;
    padding:14px 0;border-bottom:1px solid var(--line);
  }
  #menu a:last-child{border-bottom:0}
  .topbar>.wrap>.btn{display:none}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  text-decoration:none;text-align:center;min-height:46px;padding:0 24px;
  background:var(--accent);color:#fff;border:2px solid var(--accent);
  transition:background .15s ease,color .15s ease,border-color .15s ease;cursor:pointer;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn.pale{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.btn.pale:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.btn.sm{min-height:38px;padding:0 18px;font-size:12.5px}
.btn.block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s4)}

/* ---------- ritmo de sección ---------- */
section{padding-block:var(--block)}
.eyebrow,.sec-label{color:var(--accent);margin:0 0 var(--s2);display:block}
.sec-head{margin-bottom:var(--s5)}
.sec-head>div{max-width:none}
.sec-head h2{font-size:clamp(1.55rem,3vw,2.2rem)}
.sec-head p{margin-top:var(--s2);color:var(--ink-soft);max-width:62ch;font-size:1.04rem}
.sec-head .aside-cta{margin-top:var(--s3)}
.lede{font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.62;max-width:58ch;color:var(--ink-soft)}
.lede strong{font-weight:700;color:var(--ink)}

/* ---------- cabecera de página interior ---------- */
.page-head{padding-block:clamp(40px,5vw,68px) clamp(32px,4vw,48px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(1.95rem,4vw,3rem);line-height:1.1}
.page-head .lede{margin-top:var(--s3)}
.crumbs{color:var(--ink-faint);margin:0 0 var(--s3)}
.crumbs a{text-decoration:none;color:var(--ink-faint)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin-inline:8px;color:var(--line-strong)}

/* ---------- portada ---------- */
.home-hero{padding-block:clamp(48px,6vw,88px) clamp(36px,4vw,56px)}
.home-hero h1{font-size:clamp(1.95rem,3.9vw,3.05rem);line-height:1.12;max-width:16ch}
.home-hero h1 em{font-style:normal;color:var(--accent)}
.home-hero .lede{margin-top:var(--s3)}
.hero-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
@media (max-width:900px){.hero-cols{grid-template-columns:1fr;align-items:start}}
.hero-stats{margin:0;border-top:3px solid var(--accent)}
.hero-stats div{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:var(--s2);
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);
}
.hero-stats dt{color:var(--ink-faint);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.hero-stats dd{margin:0;font-family:var(--display);font-weight:700;font-size:.97rem;line-height:1.35;text-align:right}

/* buscador */
.search{background:var(--night);color:var(--night-ink);border-block:1px solid var(--line)}
.search form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:var(--s2);align-items:end;padding-block:var(--s4)}
@media (max-width:980px){.search form{grid-template-columns:repeat(2,minmax(0,1fr))}.search .btn{grid-column:1/-1}}
@media (max-width:520px){.search form{grid-template-columns:1fr}}
.search label{display:block;color:var(--night-soft);margin-bottom:9px}
.search select,.search input{
  width:100%;height:46px;font-family:var(--body);font-size:15px;color:var(--night-ink);
  background:var(--night-sunk);border:1px solid var(--night-line);padding:0 12px;border-radius:0;
}
.search option{color:#141618;background:#fff}

/* ---------- rejilla de inmuebles ---------- */
.grid-props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1000px){.grid-props{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-props{grid-template-columns:1fr}}

.prop{
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.prop:hover{border-color:var(--line-strong);box-shadow:0 4px 18px rgba(20,22,24,.06)}
.prop-media{position:relative;aspect-ratio:3/2;background:var(--sunk);overflow:hidden;max-width:100%;border-bottom:1px solid var(--line)}
.prop-media svg{width:100%;height:100%;display:block}
.prop-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.badge{padding:6px 9px;background:var(--ink);color:var(--ground);font-size:10px;letter-spacing:.1em}
.badge.new{background:var(--accent);color:#fff}
.badge.drop{background:var(--amber);color:#fff}
.badge.rent{background:var(--night);color:var(--night-ink)}
.prop-ref{
  position:absolute;right:12px;bottom:12px;padding:5px 8px;
  background:var(--surface);color:var(--ink-soft);border:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.06em;
}
.prop-body{padding:var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.prop .zona{color:var(--accent);font-size:10.5px}
.prop h3{font-size:1.08rem;font-weight:700;line-height:1.3;letter-spacing:-.012em}
.prop-price{
  font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:2px;
}
.prop-price small{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--ink-faint);margin-left:4px;letter-spacing:0}
.prop-specs{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-soft);
}
.prop-specs b{font-weight:700;color:var(--ink)}
.prop-specs>span{color:var(--line-strong)}

/* ---------- filtros ---------- */
.filters{border-bottom:1px solid var(--line);background:var(--sunk)}
.filters form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);align-items:end;padding-block:var(--s3)}
@media (max-width:1000px){.filters form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.filters form{grid-template-columns:1fr}}
.filters label{display:block;color:var(--ink-faint);margin-bottom:9px}
.filters select,.filters input{
  width:100%;height:46px;font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);padding:0 12px;border-radius:0;
}
.results-bar{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s4)}
.results-bar p{color:var(--ink-soft);font-size:15px}
.results-bar b{font-family:var(--display);font-weight:800;color:var(--ink)}
.sortbox{display:flex;align-items:center;gap:10px;color:var(--ink-faint);text-transform:uppercase}
.sortbox select{
  font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);height:38px;padding:0 10px;border-radius:0;
}
.empty{border:1px solid var(--line-strong);background:var(--sunk);padding:56px var(--s3);text-align:center;color:var(--ink-soft)}
.empty b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink);margin-bottom:10px}

/* ---------- ficha de inmueble ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:940px){.detail{grid-template-columns:1fr}}
.detail-media{border:1px solid var(--line);background:var(--sunk);aspect-ratio:3/2;overflow:hidden;max-width:100%}
.detail-media svg{width:100%;height:100%}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-top:var(--s1)}
.thumbs div{border:1px solid var(--line);background:var(--sunk);aspect-ratio:3/2;overflow:hidden;max-width:100%}
.detail h1{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.detail-desc{margin-top:var(--s3);color:var(--ink-soft);display:grid;gap:var(--s2);max-width:66ch}
.detail h2{font-size:1.3rem;margin-top:var(--s5)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--surface);margin-top:var(--s4)}
@media (max-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{padding:var(--s3) var(--s2);border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
@media (max-width:620px){
  .facts div:nth-child(2n){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.facts dt{color:var(--ink-faint);font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.facts dd{margin:8px 0 0;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sheet{border:1px solid var(--line);border-top:4px solid var(--accent);background:var(--surface);padding:var(--s4);position:sticky;top:96px}
@media (max-width:940px){.sheet{position:static}}
.sheet .price{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4vw,2.7rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sheet .price small{display:block;font-family:var(--body);font-size:13px;font-weight:500;color:var(--ink-faint);margin-top:10px;letter-spacing:0}
.sheet dl{margin:var(--s4) 0;border-top:1px solid var(--line)}
.sheet dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.sheet dt{color:var(--ink-faint);font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;padding-top:3px}
.sheet dd{margin:0;text-align:right;font-weight:600}
.sheet .actions{display:grid;gap:10px}
.legal-note{font-size:12.5px;line-height:1.7;color:var(--ink-faint);margin-top:var(--s3);max-width:76ch}
.energy i{
  font-style:normal;width:24px;height:24px;display:inline-grid;place-items:center;
  background:var(--ink);color:var(--ground);font-family:var(--display);font-weight:800;font-size:12px;
}

/* ---------- columnas de servicio ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media (max-width:880px){.cols3{grid-template-columns:1fr}}
.pillar{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);padding:var(--s4);display:flex;flex-direction:column}
.pillar .tag{color:var(--accent);display:block;margin-bottom:var(--s2)}
.pillar h3{font-size:1.2rem;margin-bottom:10px}
.pillar p{color:var(--ink-soft);font-size:.99rem}
.pillar .more{
  display:inline-block;margin-top:auto;padding-top:var(--s3);
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--accent);text-decoration:none;
}
.pillar .more:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- secuencias numeradas ---------- */
.route{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.5fr) 120px;
  gap:var(--s4);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
@media (max-width:920px){
  .step{grid-template-columns:44px minmax(0,1fr);gap:var(--s2);row-gap:10px}
  /* en móvil solo quedan dos columnas, así que todo lo que no sea el número
     tiene que ir a la segunda: sin esto el párrafo caía en la columna del
     número y el texto salía a palabra por línea, en vertical */
  .step h3,.step p,.step .when{grid-column:2}
}
.step:hover{background:var(--sunk)}
.step .num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--accent);letter-spacing:-.01em}
.step h3{font-size:1.2rem}
.step h3 small{
  display:block;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:8px;line-height:1.5;
}
.step p{color:var(--ink-soft);font-size:1rem}
.step .when{color:var(--ink-soft);text-align:right;font-size:11px;padding-top:3px}
@media (max-width:920px){.step .when{text-align:left;color:var(--ink-faint)}}

/* ---------- franja de datos ---------- */
.ticker{background:var(--night);color:var(--night-ink);border-block:1px solid var(--line)}
.ticker .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-block:0}
@media (max-width:780px){.ticker .wrap{grid-template-columns:repeat(2,1fr)}}
/* El aspecto de cada dato (relleno, borde y fondo) lo define ui.css, que
   rediseñó la franja como cuatro fichas cerradas. Aquí solo queda cuántas
   columnas hay a cada ancho.

   OJO: si se vuelven a poner reglas de .tick en este archivo con un
   :first-child o un :nth-child, le ganarán por especificidad a las de
   ui.css aunque vayan antes, y la primera ficha se quedará con el texto
   pegado a su propio borde. Es lo que pasaba hasta el 5-nov-2026. */
@media (max-width:560px){
  .ticker .wrap{grid-template-columns:1fr}
}
.tick .n{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.25;letter-spacing:-.01em}
.tick .l{color:var(--night-soft);font-size:13.5px;margin-top:10px;line-height:1.55}

/* ---------- zonas ---------- */
.zonas{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--surface)}
@media (max-width:860px){.zonas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.zonas{grid-template-columns:1fr}}
.zona-card{padding:var(--s4);border-left:1px solid var(--line);text-decoration:none;display:block}
.zona-card:first-child{border-left:0}
@media (max-width:860px){
  .zona-card:nth-child(2n+1){border-left:0}
  .zona-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:480px){
  .zona-card{border-left:0;border-bottom:1px solid var(--line)}
  .zona-card:last-child{border-bottom:0}
}
.zona-card:hover{background:var(--sunk)}
.zona-card h3{font-size:1.15rem;margin-bottom:10px}
.zona-card p{color:var(--ink-soft);font-size:14px;line-height:1.7}

/* ---------- artículos ---------- */
.grid-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:980px){.grid-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-posts{grid-template-columns:1fr}}
.post{background:var(--surface);border:1px solid var(--line);padding:var(--s4);text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:border-color .15s ease,box-shadow .15s ease}
.post:hover{border-color:var(--line-strong);box-shadow:0 4px 18px rgba(20,22,24,.06)}
.post .cat{color:var(--accent);display:block}
.post h3{font-size:1.15rem;line-height:1.3}
.post p{color:var(--ink-soft);font-size:.97rem}
.post .meta{
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--ink-faint);font-size:13px;
}

.prose{max-width:68ch;display:grid;gap:var(--s3)}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin-top:var(--s3)}
.prose h3{font-size:1.2rem}
.prose p{color:var(--ink-soft)}
.prose ul{margin:0;padding-left:22px;color:var(--ink-soft);display:grid;gap:10px}
.prose li::marker{color:var(--accent)}
.prose .callout{border-left:4px solid var(--accent);background:var(--sunk);padding:var(--s3) var(--s4);color:var(--ink)}
.prose .callout b{display:block;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.prose td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;max-width:100%}

/* Primer intento en pantalla pequeña: apretar las celdas. Con esto una tabla
   de cifras cortas pasa a caber y se puede seguir leyendo como tabla. */
@media (max-width:700px){
  .prose table{font-size:13.5px}
  .prose th,.prose td{padding:9px 8px}
  .prose th:first-child,.prose td:first-child{padding-left:0}
  .prose th:last-child,.prose td:last-child{padding-right:0}
}

/* Segundo intento, para la tabla que aun así no entra: cada fila pasa a ser
   un bloque y el nombre de la columna viaja dentro de la celda, en data-col.
   Con scroll horizontal la última columna quedaba escondida y cada celda se
   partía a palabra por línea. Las marcas .apilable y .apilada las pone
   site.js, y solo cuando ha medido que la tabla no cabe. */
@media (max-width:900px){
  .table-scroll.apilada{overflow-x:visible}
  table.apilable{display:block}
  table.apilable thead{display:none}
  table.apilable tbody{display:block}
  table.apilable tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  table.apilable tr:last-child{border-bottom:0}
  table.apilable td,table.apilable td:first-child,table.apilable td:last-child{
    display:block;padding:0;border:0;text-align:left;font-variant-numeric:normal;
  }
  table.apilable{font-size:1rem}
  table.apilable td + td{margin-top:12px}
  table.apilable td::before{
    content:attr(data-col);display:block;
    font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;line-height:1.4;
  }
  table.apilable td:not([data-col])::before{content:none}
}

/* ---------- modelo económico ---------- */
.econ{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:920px){.econ{grid-template-columns:1fr}}
.bars{display:grid;gap:var(--s4)}
.bar-row .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-bottom:10px;flex-wrap:wrap}
.bar-row .gci{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.bar-row .gci b{font-weight:800;color:var(--ink)}
.bar-row .split{font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bar-row .split i{font-style:normal;color:var(--accent);font-weight:700}
.bar{display:flex;height:24px;background:var(--sunk);border:1px solid var(--line)}
.bar .office{background:var(--accent)}
.bar .agent{background:var(--ink)}
.bar-legend{display:flex;gap:var(--s3);color:var(--ink-soft);margin-top:var(--s3);flex-wrap:wrap;font-size:12.5px}
.bar-legend span{display:flex;align-items:center;gap:8px}
.bar-legend i{width:13px;height:13px;display:block}
.scale{font-size:12.5px;color:var(--ink-faint);margin-top:12px;line-height:1.65;max-width:70ch}
.claim{background:var(--sunk);border:1px solid var(--line);border-top:4px solid var(--accent);padding:var(--s4);display:grid;gap:var(--s2)}
.claim h3{font-size:1.2rem}
.claim p{color:var(--ink-soft);font-size:.99rem}
.claim .big{
  font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;
  color:var(--accent);letter-spacing:-.035em;font-variant-numeric:tabular-nums;display:block;margin-bottom:10px;
}

/* ---------- encaje sí / no ---------- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:var(--surface)}
@media (max-width:780px){.fit{grid-template-columns:1fr}}
.fit>div{padding:var(--s5) var(--s4)}
.fit>div:first-child{border-right:1px solid var(--line);border-top:3px solid var(--accent)}
.fit>div:last-child{border-top:3px solid var(--line-strong)}
@media (max-width:780px){.fit>div:first-child{border-right:0;border-bottom:1px solid var(--line)}}
.fit h3{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:var(--s3)}
.fit .yes h3{color:var(--accent)}
.fit .no h3{color:var(--ink-faint)}
.fit ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.fit li{padding-left:28px;position:relative;font-size:1rem;color:var(--ink-soft)}
.fit .yes li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--accent);font-weight:700}
.fit .no li::before{content:"\00d7";position:absolute;left:1px;top:-2px;color:var(--ink-faint);font-size:1.2em}

/* ---------- salas / servicios en rejilla ---------- */
.space{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (max-width:780px){.space{grid-template-columns:1fr}}
.room{background:var(--surface);border:1px solid var(--line);padding:var(--s4)}
.room h3{font-size:1.1rem;margin-bottom:10px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.room h3 code{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--accent);letter-spacing:.11em;text-transform:uppercase}
.room p{color:var(--ink-soft);font-size:.97rem}

/* ---------- listas de datos ---------- */
.specs{border-top:3px solid var(--accent);margin-top:var(--s4)}
.spec{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s3);
  padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
@media (max-width:520px){.spec{grid-template-columns:1fr;gap:4px}}
.spec dt{color:var(--ink-faint);font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;padding-top:4px}
.spec dd{margin:0;text-align:right}
@media (max-width:520px){.spec dd{text-align:left}}

/* ---------- acordeón ---------- */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;cursor:pointer;padding:var(--s3) 0;display:flex;justify-content:space-between;gap:var(--s3);align-items:center;
  font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.015em;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:1.5rem;line-height:1;font-weight:600}
details[open] summary::after{content:"\2013"}
summary:hover{color:var(--accent)}
details .answer{padding-bottom:var(--s3);color:var(--ink-soft);max-width:72ch;display:grid;gap:var(--s2)}
details .answer a{color:var(--accent)}

/* ---------- llamada final y formularios ---------- */
.cta{background:var(--night);color:var(--night-ink);border-block:1px solid var(--line)}
.cta .eyebrow{color:var(--accent)}
.cta h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
.cta h2 em{font-style:normal;color:var(--accent)}
.cta .lede{color:var(--night-soft);margin-top:var(--s3)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:880px){.cta-grid{grid-template-columns:1fr}}
.cta .hero-stats{border-top-color:var(--accent)}
.cta .hero-stats div{border-bottom-color:var(--night-line)}
.cta .hero-stats dt{color:var(--night-soft)}

.contact-list{margin-top:var(--s4);border-top:1px solid var(--night-line)}
.contact-list a,.contact-list div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s2);
  padding:15px 0;border-bottom:1px solid var(--night-line);text-decoration:none;font-size:14.5px;
}
.contact-list span{
  color:var(--night-soft);font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;padding-top:4px;
}
.contact-list b{text-align:right}
.contact-list a:hover b{color:var(--accent)}

form.card,form.light{padding:var(--s4)}
form.card{background:var(--night-sunk);border:1px solid var(--night-line);color:var(--night-ink)}
form.light{background:var(--sunk);border:1px solid var(--line);border-top:4px solid var(--accent)}
form h3{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s3)}
form.card label{color:var(--night-soft)}
form.light label{color:var(--ink-faint)}
form input,form select,form textarea{
  width:100%;font-family:var(--body);font-size:15px;padding:12px 14px;border-radius:0;min-height:46px;
}
form.card input,form.card select,form.card textarea{color:var(--ink);background:var(--ground);border:1px solid var(--line-strong)}
form.light input,form.light select,form.light textarea{color:var(--ink);background:var(--surface);border:1px solid var(--line-strong)}
form option{color:#141618;background:#fff}
.field{display:grid;gap:8px;margin-bottom:var(--s2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:88px}
form .btn{margin-top:var(--s1)}
.form-note{font-size:12px;line-height:1.7;margin-top:var(--s2)}
form.card .form-note{color:var(--ink-faint)}
form.light .form-note{color:var(--ink-faint)}
.sent{margin-top:var(--s2);padding:var(--s2);border:1px solid var(--accent);background:var(--accent-wash);color:var(--ink);font-size:.95rem}
.sent a{color:var(--accent);font-weight:700}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--line);padding-block:var(--s6) var(--s4);background:var(--ground)}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5)}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr;gap:var(--s4)}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr}}
.foot-cols h4{color:var(--ink-faint);margin:0 0 var(--s2)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-cols a{text-decoration:none;font-size:14.5px;color:var(--ink-soft)}
.foot-cols a:hover{color:var(--accent)}
.foot-brand b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;display:block;margin-bottom:var(--s2)}
.foot-brand p{font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:38ch}
.foot-legal{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line)}
.foot-legal p{font-size:12px;line-height:1.8;color:var(--ink-faint);max-width:100ch}