@charset "utf-8";
/* ==========================================================================
   Cano Boluda · demo de rediseño
   Dirección: Swiss Modernism 2.0 — retícula de 12, espaciado matemático,
   blanco/negro y UN solo acento vibrante (el amarillo de su logotipo).
   Sin gradientes, sin sombras decorativas, sin glassmorphism.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* color: neutros con sesgo cálido mínimo, acento único de marca */
  --paper:#FFFFFF;
  --mist:#F4F3F0;
  --mist-2:#EAE8E3;
  --ink:#101010;
  --ink-soft:#3A3A37;
  --slate:#6E6E67;
  --line:#DCDAD3;
  --line-hard:#101010;
  --accent:#F8D000;
  --accent-ink:#101010;
  --accent-edge:#C9A800;
  --band:#101010;
  --band-paper:#F4F3F0;
  --band-line:#2E2E2B;
  --band-slate:#93918A;
  --focus:#101010;

  /* tipografía */
  --display:"Bricolage Grotesque","Archivo","Helvetica Neue",Helvetica,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* escala tipográfica modular */
  --t1:.6875rem;   /* 11 */
  --t2:.8125rem;   /* 13 */
  --t3:.9375rem;   /* 15 */
  --t4:1.0625rem;  /* 17 */
  --t5:1.3125rem;  /* 21 */
  --t6:1.6875rem;  /* 27 */
  --t7:2.25rem;    /* 36 */
  --t8:3rem;       /* 48 */
  --t9:4.25rem;    /* 68 */

  /* espaciado */
  --x1:4px; --x2:8px; --x3:12px; --x4:16px; --x5:24px;
  --x6:32px; --x7:48px; --x8:64px; --x9:96px; --x10:128px;

  /* retícula */
  --gutter:clamp(16px,3.2vw,32px);
  --page:1320px;

  /* escala z: 10 sticky · 20 desplegable · 30 velo · 50 lightbox */
  --z-head:10; --z-pop:20; --z-veil:30; --z-box:50;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0B0A;
    --mist:#141412;
    --mist-2:#1C1C19;
    --ink:#F2F1ED;
    --ink-soft:#CFCDC6;
    --slate:#918F87;
    --line:#2B2B27;
    --line-hard:#F2F1ED;
    --accent:#F8D000;
    --accent-ink:#101010;
    --accent-edge:#F8D000;
    --band:#000000;
    --band-paper:#F2F1ED;
    --band-line:#262622;
    --band-slate:#8B8981;
    --focus:#F8D000;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0B0A;
  --mist:#141412;
  --mist-2:#1C1C19;
  --ink:#F2F1ED;
  --ink-soft:#CFCDC6;
  --slate:#918F87;
  --line:#2B2B27;
  --line-hard:#F2F1ED;
  --accent:#F8D000;
  --accent-ink:#101010;
  --accent-edge:#F8D000;
  --band:#000000;
  --band-paper:#F2F1ED;
  --band-line:#262622;
  --band-slate:#8B8981;
  --focus:#F8D000;
}

/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t4);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:calc(var(--z-box) + 1);
  background:var(--accent);color:var(--accent-ink);
  padding:12px 20px;font-family:var(--mono);font-size:var(--t2);
}
.skip:focus{left:0}

/* --- 3. Retícula -------------------------------------------------------- */
.page{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--x5)}
@media (max-width:900px){.g12{grid-template-columns:repeat(6,1fr)}}
@media (max-width:560px){.g12{grid-template-columns:repeat(2,1fr);gap:var(--x4)}}

/* --- 4. Tipografía ------------------------------------------------------ */
.d{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:"wdth" 96;
  letter-spacing:-.025em;
  line-height:.95;
  text-wrap:balance;
}
.d-xl{font-size:clamp(2.75rem,7.2vw,var(--t9))}
.d-l{font-size:clamp(2rem,4.6vw,var(--t8))}
.d-m{font-size:clamp(1.5rem,3vw,var(--t7))}
.d-s{font-size:var(--t6)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);
}
.lede{font-size:var(--t5);line-height:1.5;max-width:34ch;color:var(--ink-soft)}
.copy{max-width:68ch;color:var(--ink-soft)}
.copy + .copy{margin-top:var(--x4)}
.muted{color:var(--slate)}
.num{font-variant-numeric:tabular-nums}

/* --- 5. Cinta de demo --------------------------------------------------- */
.ribbon{background:var(--accent);color:var(--accent-ink)}
.ribbon .page{
  display:flex;flex-wrap:wrap;gap:var(--x2) var(--x5);align-items:center;
  min-height:38px;padding-block:var(--x2);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;
}
.ribbon b{font-weight:500;background:var(--accent-ink);color:var(--accent);padding:2px 7px}
.ribbon a{margin-inline-start:auto;text-decoration:underline;text-underline-offset:3px}

/* --- 6. Cabecera -------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:var(--z-head);
  background:var(--paper);
  border-bottom:1px solid var(--line-hard);
}
.masthead .page{
  display:flex;align-items:center;gap:var(--x5);min-height:78px;
}
.brand{display:flex;align-items:center;gap:var(--x3);text-decoration:none;flex:0 0 auto}
.brand-mark{flex:0 0 auto}
.brand-name{
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 92;
  font-size:var(--t4);letter-spacing:-.01em;line-height:1;display:block;
}
.brand-sub{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);line-height:1;display:block;margin-top:4px;
}
.mainnav{display:flex;gap:var(--x2);margin-inline-start:auto}
.mainnav a{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--x3);
  font-family:var(--display);font-weight:600;font-size:var(--t3);
  text-decoration:none;border-bottom:3px solid transparent;
}
.mainnav a:hover{border-bottom-color:var(--accent)}
.mainnav a[aria-current="page"]{border-bottom-color:var(--line-hard)}
.head-tools{display:flex;align-items:center;gap:var(--x2)}
.iconbtn{
  display:inline-grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
}
.iconbtn:hover{border-color:var(--line-hard)}
.phone{
  display:inline-flex;align-items:center;gap:var(--x2);min-height:44px;
  padding-inline:var(--x4);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--t2);text-decoration:none;letter-spacing:.02em;
}
.phone:hover{background:var(--accent);color:var(--accent-ink)}
@media (max-width:1080px){.mainnav a{padding-inline:var(--x2);font-size:var(--t2)}}

/* --- 6b. Menú de móvil --------------------------------------------------- */
/* El botón y el panel los crea ui.js: sin JavaScript no aparecen y la
   navegación de siempre sigue visible, que es la que funciona sin scripts. */
.menu-btn{display:none;gap:var(--x2);align-items:center;padding-inline:var(--x3);width:auto}
.menu-btn .barras{display:block;width:17px;height:11px;position:relative}
.menu-btn .barras::before,
.menu-btn .barras::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
}
.menu-btn .barras::before{top:0}
.menu-btn .barras::after{bottom:0}
.menu-btn .rotulo{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;
}

.menu-panel{
  position:fixed;inset:0;z-index:var(--z-veil);
  background:var(--paper);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-panel[hidden]{display:none}
.menu-cab{
  display:flex;align-items:center;gap:var(--x4);
  min-height:64px;padding-inline:var(--gutter);
  border-bottom:1px solid var(--line-hard);
}
.menu-cab .label{margin-inline-end:auto}
.menu-lista{display:flex;flex-direction:column;padding-inline:var(--gutter)}
.menu-lista a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--x4);
  min-height:68px;padding-block:var(--x3);
  border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 96;
  font-size:var(--t7);letter-spacing:-.02em;line-height:1;text-decoration:none;
}
.menu-lista a::after{
  content:"→";font-family:var(--mono);font-size:var(--t4);color:var(--slate);
}
.menu-lista a[aria-current="page"]{color:var(--slate)}
.menu-lista a[aria-current="page"]::after{content:"·";color:var(--accent-edge)}
.menu-pie{
  margin-top:auto;padding:var(--x6) var(--gutter) var(--x7);
  display:flex;flex-direction:column;gap:var(--x4);
}
.menu-tel{
  display:flex;align-items:center;justify-content:center;gap:var(--x3);
  min-height:64px;background:var(--accent);color:var(--accent-ink);
  text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:var(--t6);letter-spacing:.01em;
}
.menu-tel small{
  font-family:var(--mono);font-weight:400;font-size:var(--t1);
  letter-spacing:.14em;text-transform:uppercase;
}
.js .menu-panel{animation:panel .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes panel{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.menu-extras{
  display:flex;align-items:center;justify-content:space-between;gap:var(--x4);
  padding-bottom:var(--x2);
}
.menu-extras a{
  display:inline-flex;align-items:center;gap:var(--x2);min-height:44px;
  font-family:var(--mono);font-size:var(--t2);text-decoration:none;
  border-bottom:2px solid var(--accent);
}

@media (max-width:860px){
  /* Con JavaScript: una sola fila —marca, teléfono y menú—. Guardadas y
     tema se van al panel, que es donde hay sitio de sobra. */
  .js .mainnav{display:none}
  .js .menu-btn{display:inline-flex}
  .js .head-tools > .iconbtn:not(.menu-btn),
  .js .head-tools > a.iconbtn{display:none}
  .masthead .page{min-height:66px;gap:var(--x3)}
  .js .head-tools{margin-inline-start:auto}
  .js .phone{padding-inline:var(--x3)}
  .js .phone .phone-label{display:none}

  /* Sin JavaScript no hay panel: la navegación baja a una segunda línea
     completa, sin desplazamiento horizontal ni opciones cortadas. */
  .masthead .page{flex-wrap:wrap}
  .mainnav{width:100%;margin-inline-start:0;flex-wrap:wrap;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  /* «Servicios profesionales» es más ancho que el propio nombre y en la
     cabecera estrecha se come el sitio del teléfono. */
  .brand-sub{display:none}
}
@media (max-width:480px){
  .js .menu-btn .rotulo{display:none}
  .js .menu-btn{width:44px;padding-inline:0;justify-content:center}
}
@media (min-width:861px){.menu-panel{display:none !important}}

/* --- 7. Botones --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--x2);
  min-height:48px;padding:0 var(--x6);border:1px solid var(--line-hard);
  background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:var(--t3);
  letter-spacing:.02em;
}
.btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}
.btn-accent:hover{background:var(--ink);color:var(--paper);border-color:var(--line-hard)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link-under{
  text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;
  font-family:var(--mono);font-size:var(--t2);letter-spacing:.08em;text-transform:uppercase;
}
.link-under:hover{border-bottom-color:var(--line-hard)}

/* --- 8. Portada --------------------------------------------------------- */
.hero{border-bottom:1px solid var(--line-hard);overflow:hidden}
.hero .g12{align-items:end;gap:0 var(--x5)}
.hero-copy{
  grid-column:1 / 7;
  display:flex;flex-direction:column;gap:var(--x5);
  padding-block:var(--x8) var(--x8);
}
.hero-fig{grid-column:7 / 13;position:relative;align-self:stretch;min-height:420px;margin-inline-end:calc(var(--gutter) * -1)}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.hero-tag{
  position:absolute;left:0;bottom:0;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--x3) var(--x4);display:flex;gap:var(--x4);flex-wrap:wrap;
}
h1 .hl{
  display:inline-block;background:var(--accent);color:var(--accent-ink);
  padding-inline:.1em;
}
h1 .thin{
  display:block;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:.44em;letter-spacing:-.01em;line-height:1.15;margin-top:.28em;
  color:var(--ink-soft);
}
@media (max-width:900px){
  .hero-copy{grid-column:1 / -1;padding-block:var(--x7) var(--x6)}
  .hero-fig{grid-column:1 / -1;min-height:0;aspect-ratio:16/10;margin-inline:calc(var(--gutter) * -1)}
}

/* --- 9. Buscador -------------------------------------------------------- */
.finder{
  display:grid;grid-template-columns:repeat(4,1fr) auto;
  border:1px solid var(--line-hard);
}
.finder .fld{
  display:flex;flex-direction:column;gap:var(--x1);
  padding:var(--x3) var(--x4);border-inline-end:1px solid var(--line);
  min-height:64px;justify-content:center;
}
.finder .fld > span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.finder select{
  appearance:none;border:0;background:transparent;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:var(--t3);
  padding:0;width:100%;cursor:pointer;min-height:24px;
}
.finder .go{
  border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:var(--t2);
  letter-spacing:.1em;text-transform:uppercase;padding-inline:var(--x7);min-height:64px;
}
.finder .go:hover{background:var(--ink);color:var(--paper)}
@media (max-width:820px){
  .finder{grid-template-columns:1fr 1fr}
  .finder .fld:nth-child(2n){border-inline-end:0}
  .finder .fld:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .finder .go{grid-column:1 / -1;min-height:56px}
}

/* --- 10. Cifras --------------------------------------------------------- */
.stats{border-bottom:1px solid var(--line);background:var(--mist)}
.stats .page{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:var(--x6) var(--x5) var(--x6) 0;border-inline-start:1px solid var(--line)}
.stat:first-child{border-inline-start:0}
.stat:not(:first-child){padding-inline-start:var(--x5)}
.stat b{
  display:block;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;
  font-size:clamp(1.75rem,4vw,var(--t8));line-height:1;font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:var(--x2);font-size:var(--t3);color:var(--slate);max-width:20ch}
@media (max-width:760px){
  .stats .page{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stat:nth-child(n+3){padding-top:0}
}

/* --- 11. Secciones ------------------------------------------------------ */
.section{padding-block:var(--x9)}
.section-tight{padding-block:var(--x7)}
.section + .section{border-top:1px solid var(--line)}
.sec-head{margin-bottom:var(--x7)}
.sec-head h2{grid-column:1 / 6}
.sec-head .sec-aside{grid-column:7 / 12;display:flex;flex-direction:column;gap:var(--x3);align-self:end}
@media (max-width:900px){
  .sec-head h2{grid-column:1 / -1}
  .sec-head .sec-aside{grid-column:1 / -1}
}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.rule-hard{border-top:1px solid var(--line-hard)}

/* --- 12. Tarjeta de propiedad ------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:var(--x5)}
.card{
  display:flex;flex-direction:column;text-decoration:none;position:relative;
  background:var(--paper);
}
.card-media{position:relative;overflow:hidden;background:var(--mist-2)}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.035)}
.card-op{
  position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;
}
.card-op.is-consult{background:var(--accent);color:var(--accent-ink)}
.card-shots{
  position:absolute;bottom:0;right:0;background:rgba(16,16,16,.82);color:#F2F1ED;
  font-family:var(--mono);font-size:var(--t1);padding:4px 8px;
}
.card-body{display:flex;flex-direction:column;gap:var(--x2);padding-top:var(--x3);flex:1}
.card-kind{
  font-family:var(--display);font-weight:700;font-size:var(--t4);line-height:1.2;
  letter-spacing:-.01em;
}
.card-where{font-size:var(--t3);color:var(--slate)}
.card-foot{
  margin-top:auto;padding-top:var(--x3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--x3);
}
.card-price{font-family:var(--display);font-weight:800;font-size:var(--t5);font-variant-numeric:tabular-nums}
.card-price.is-consult{font-size:var(--t3);font-weight:700;letter-spacing:.02em}
.card-ref{font-family:var(--mono);font-size:var(--t1);color:var(--slate)}
.card-link{position:absolute;inset:0;z-index:1;text-indent:-9999px;overflow:hidden}
.card .fav{position:absolute;top:0;right:0;z-index:2}

.fav{
  width:44px;height:44px;display:grid;place-items:center;
  border:0;background:transparent;color:#FFFFFF;cursor:pointer;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.fav[aria-pressed="true"]{color:var(--accent)}
.fav:hover{transform:scale(1.08)}

/* --- 13. Registro en lista ---------------------------------------------- */
.rows{border-top:1px solid var(--line-hard)}
.row{
  position:relative;display:grid;
  grid-template-columns:112px minmax(0,1fr) 132px 128px 148px 44px;
  gap:0 var(--x5);align-items:center;
  padding-block:var(--x3);border-bottom:1px solid var(--line);
}
.row:hover{background:var(--mist)}
.row-media{width:112px;aspect-ratio:4/3;object-fit:cover;background:var(--mist-2)}
.row-kind{display:block;font-family:var(--display);font-weight:700;font-size:var(--t4);line-height:1.25}
.row-where{display:block;font-size:var(--t3);color:var(--slate);margin-top:2px}
.row-ref,.row-sup{font-family:var(--mono);font-size:var(--t2);color:var(--slate)}
.row-price{
  font-family:var(--display);font-weight:800;font-size:var(--t5);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.row-price small{
  display:block;font-family:var(--mono);font-weight:400;font-size:var(--t1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
}
.row-price.is-consult{font-size:var(--t3)}
.row .card-link{text-indent:-9999px}
.row .fav{color:var(--line);filter:none;justify-self:end;position:relative;z-index:2}
.row .fav:hover{color:var(--slate)}
.row .fav[aria-pressed="true"]{color:var(--accent-edge)}
@media (max-width:980px){
  .row{grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"m i p" "m r p" "m s p";row-gap:2px}
  .row-media{grid-area:m;width:96px;aspect-ratio:1}
  .row-info{grid-area:i}
  .row-ref{grid-area:r}
  .row-sup{grid-area:s}
  .row-price{grid-area:p}
  .row .fav{display:none}
}

/* --- 14. Barra de control ----------------------------------------------- */
.toolbar{
  display:flex;flex-wrap:wrap;gap:var(--x3) var(--x5);align-items:center;
  padding-block:var(--x4);border-top:1px solid var(--line-hard);
}
.chips{display:flex;flex-wrap:wrap;gap:var(--x2)}
.chip{
  min-height:36px;padding:0 var(--x4);border:1px solid var(--line);
  background:transparent;color:var(--slate);cursor:pointer;
  font-family:var(--mono);font-size:var(--t2);letter-spacing:.03em;
}
.chip:hover{border-color:var(--line-hard);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-edge);color:var(--accent-ink)}
.toolbar-end{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--x5);align-items:center}
.picker{display:inline-flex;align-items:center;gap:var(--x2);font-family:var(--mono);font-size:var(--t2);color:var(--slate)}
.picker select{
  border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:var(--t2);min-height:36px;cursor:pointer;
}
.segmented{display:flex;border:1px solid var(--line)}
.segmented button{
  min-height:36px;padding:0 var(--x4);border:0;background:transparent;color:var(--slate);
  cursor:pointer;font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;
}
.segmented button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tally{font-family:var(--mono);font-size:var(--t2);color:var(--slate)}

/* --- 15. Filtros laterales ---------------------------------------------- */
.listing{align-items:start}
.aside{grid-column:1 / 4;position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--x5)}
.results{grid-column:4 / 13}
.fset{border-top:1px solid var(--line-hard);padding-top:var(--x3)}
.fset h3{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);font-weight:400;margin-bottom:var(--x3);
}
.opt{display:flex;align-items:center;gap:var(--x3);min-height:40px;cursor:pointer;font-size:var(--t3)}
.opt input{width:18px;height:18px;accent-color:var(--accent-edge);cursor:pointer;flex:0 0 auto}
.opt .n{margin-inline-start:auto;font-family:var(--mono);font-size:var(--t1);color:var(--slate)}
.range{display:flex;flex-direction:column;gap:var(--x2)}
.range input{width:100%;accent-color:var(--accent-edge);min-height:40px}
.range output{font-family:var(--mono);font-size:var(--t2)}
@media (max-width:900px){
  .aside{grid-column:1 / -1;position:static}
  .results{grid-column:1 / -1}
}

.pager{display:flex;gap:var(--x2);align-items:center;justify-content:center;padding-top:var(--x7)}
.pager button{
  min-width:44px;min-height:44px;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:var(--t2);
}
.pager button[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--line-hard)}
.pager button:hover:not([aria-current="true"]):not([disabled]){border-color:var(--line-hard)}

.empty{
  padding:var(--x9) 0;text-align:center;color:var(--slate);
  font-family:var(--mono);font-size:var(--t3);
}

/* --- 16. Ficha ---------------------------------------------------------- */
.ficha-head{padding-block:var(--x6) var(--x5)}
.crumbs{font-family:var(--mono);font-size:var(--t2);color:var(--slate);display:flex;gap:var(--x2);flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:var(--x2);align-items:stretch}
.shot-main{position:relative;background:var(--mist-2)}
.shot-main img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.shot-side{display:grid;grid-template-rows:1fr 1fr;gap:var(--x2)}
.shot{position:relative;background:var(--mist-2);border:0;padding:0;cursor:zoom-in;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-more{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(16,16,16,.6);color:#F2F1ED;
  font-family:var(--mono);font-size:var(--t3);letter-spacing:.08em;
}
@media (max-width:820px){
  .gallery{grid-template-columns:1fr}
  .shot-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
}

.ficha-grid{align-items:start;padding-block:var(--x7)}
.ficha-main{grid-column:1 / 8;display:flex;flex-direction:column;gap:var(--x6)}
.ficha-side{grid-column:9 / 13;position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--x4)}
@media (max-width:960px){
  .ficha-main{grid-column:1 / -1}
  .ficha-side{grid-column:1 / -1;position:static}
}
.price-box{border:1px solid var(--line-hard);padding:var(--x5)}
.price-box .p{
  font-family:var(--display);font-weight:800;font-size:var(--t8);line-height:1;
  font-variant-numeric:tabular-nums;
}
.price-box .p.is-consult{font-size:var(--t6)}
.price-box .stack{display:flex;flex-direction:column;gap:var(--x3);margin-top:var(--x5)}
.agent{border:1px solid var(--line);padding:var(--x5);display:flex;flex-direction:column;gap:var(--x3)}

.specs{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-hard)}
.spec{
  display:flex;flex-direction:column;gap:var(--x1);
  padding:var(--x4) var(--x4) var(--x4) 0;border-bottom:1px solid var(--line);
}
.spec:nth-child(2n){padding-inline-start:var(--x4);border-inline-start:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.spec dd{margin:0;font-family:var(--display);font-weight:700;font-size:var(--t5);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .specs{grid-template-columns:1fr}
  .spec:nth-child(2n){padding-inline-start:0;border-inline-start:0}
}
.tags{display:flex;flex-wrap:wrap;gap:var(--x2)}
.tag{
  font-family:var(--mono);font-size:var(--t2);border:1px solid var(--line);
  padding:6px var(--x3);color:var(--ink-soft);
}
.tag-off{color:var(--slate);opacity:.5;text-decoration:line-through}
.notice{
  border-inline-start:3px solid var(--accent);padding:var(--x3) 0 var(--x3) var(--x4);
  font-size:var(--t3);color:var(--slate);
}

/* --- 17. Lightbox ------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-box);
  background:rgba(8,8,8,.94);
  display:grid;grid-template-rows:auto 1fr auto;gap:var(--x3);
  padding:var(--x4);
}
.lightbox[hidden]{display:none}
.lb-bar{display:flex;align-items:center;gap:var(--x4);color:#F2F1ED;font-family:var(--mono);font-size:var(--t2)}
.lb-bar button{
  min-width:44px;min-height:44px;border:1px solid #45443F;background:transparent;color:#F2F1ED;cursor:pointer;
}
.lb-bar button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lb-close{margin-inline-start:auto}
.lb-stage{display:grid;place-items:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}
.lb-strip{display:flex;gap:var(--x2);overflow-x:auto;padding-bottom:var(--x1)}
.lb-strip button{border:2px solid transparent;background:none;padding:0;cursor:pointer;flex:0 0 auto}
.lb-strip button[aria-current="true"]{border-color:var(--accent)}
.lb-strip img{width:86px;height:64px;object-fit:cover;display:block}

/* --- 18. Banda oscura --------------------------------------------------- */
.band{background:var(--band);color:var(--band-paper);padding-block:var(--x9)}
.band .label{color:var(--band-slate)}
.band .lede{color:var(--band-slate)}
.band-copy{grid-column:1 / 6;display:flex;flex-direction:column;gap:var(--x4)}
.band-form{grid-column:7 / 13}
@media (max-width:900px){.band-copy,.band-form{grid-column:1 / -1}}
.vform{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--band-line)}
.vform .fld{
  display:flex;flex-direction:column;gap:var(--x1);padding:var(--x3) var(--x4);
  border-inline-end:1px solid var(--band-line);border-bottom:1px solid var(--band-line);
  min-height:66px;justify-content:center;
}
.vform .fld:nth-child(2n){border-inline-end:0}
.vform .fld.wide{grid-column:1 / -1;border-inline-end:0}
.vform .fld > span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--band-slate)}
.vform input,.vform select{
  border:0;background:transparent;color:var(--band-paper);
  font-family:var(--display);font-weight:600;font-size:var(--t3);width:100%;min-height:26px;
}
.vform input::placeholder{color:#63625C;font-weight:400}
.vform button{
  grid-column:1 / -1;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:var(--t3);letter-spacing:.08em;
  text-transform:uppercase;min-height:56px;
}
.vform button:hover{background:var(--band-paper)}
.said{
  margin-top:var(--x4);border-inline-start:3px solid var(--accent);
  padding-inline-start:var(--x4);font-size:var(--t3);
}

/* --- 19. Oficinas ------------------------------------------------------- */
.offices{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-hard)}
.office{
  display:flex;flex-direction:column;gap:var(--x2);
  padding:var(--x5) var(--x5) var(--x6) 0;
  border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line);
}
.office:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
.office:not(:nth-child(3n+1)){padding-inline-start:var(--x5)}
.office h3{
  font-family:var(--display);font-weight:800;font-size:var(--t5);letter-spacing:-.01em;
  display:flex;align-items:center;gap:var(--x2);flex-wrap:wrap;
}
.pin{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:3px 6px;font-weight:400;
}
.office p{font-size:var(--t3);color:var(--slate)}
.office .mono{font-size:var(--t2);color:var(--slate)}
@media (max-width:900px){
  .offices{grid-template-columns:1fr 1fr}
  .office:nth-child(3n+1){border-inline-start:1px solid var(--line);padding-inline-start:var(--x5)}
  .office:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:560px){
  .offices{grid-template-columns:1fr}
  .office{border-inline-start:0;padding-inline-start:0}
}

/* --- 20. Mapa ------------------------------------------------------------ */
.plot{
  position:relative;overflow:hidden;
  border:1px solid var(--line-hard);
  background:var(--mist-2);
  min-height:260px;
}
.capa-teselas,.capa-pins{position:absolute;inset:0}
.capa-pins{pointer-events:none}
.tesela{position:absolute;width:256px;height:256px;max-width:none;user-select:none}
/* Las teselas son claras: en tema oscuro se invierten para no deslumbrar. */
:root[data-theme="dark"] .capa-teselas{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .capa-teselas{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
}

.pin-punto{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  display:grid;place-items:center;pointer-events:auto;
  text-decoration:none;border-radius:50%;
}
.pin-bola{
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2.5px solid #101010;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .15s cubic-bezier(.2,.7,.3,1);
}
.pin-punto:hover .pin-bola,
.pin-punto:focus-visible .pin-bola{transform:scale(1.45)}
.pin-punto.apagado{z-index:0}
.pin-punto.apagado .pin-bola{
  width:10px;height:10px;background:#FFFFFF;border-color:#8C8A83;opacity:.75;
}
.pin-punto:not(.apagado){z-index:1}

.plot-cred{
  position:absolute;right:0;bottom:0;
  background:rgba(255,255,255,.82);color:#101010;
  font-family:var(--mono);font-size:10px;letter-spacing:.02em;
  padding:3px 7px;
}
.tip{
  position:absolute;pointer-events:none;transform:translate(-50%,-150%);
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--t1);
  line-height:1.5;padding:7px 10px;white-space:nowrap;opacity:0;transition:opacity .12s;
  z-index:2;
}
.tip.on{opacity:1}
.tip.debajo{transform:translate(-50%,50%)}

/* --- 21. Nosotros ------------------------------------------------------- */
.split{align-items:start}
.split-a{grid-column:1 / 6}
.split-b{grid-column:7 / 13}
/* dos tercios / un tercio, con la misma ruptura que el resto de la retícula */
.wide-a{grid-column:1 / 8}
.wide-b{grid-column:9 / 13}
.stack-col{display:flex;flex-direction:column;gap:var(--x4)}
@media (max-width:900px){
  .split-a,.split-b,.wide-a,.wide-b{grid-column:1 / -1}
}
.steps{border-top:1px solid var(--line-hard)}
.step{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--x5);
  padding-block:var(--x5);border-bottom:1px solid var(--line);
}
.step-k{font-family:var(--mono);font-size:var(--t2);color:var(--slate);letter-spacing:.06em}
.step h3{font-family:var(--display);font-weight:700;font-size:var(--t5);margin-bottom:var(--x2)}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:var(--x2)}}
.figure-wide{margin:0}
.figure-wide img{width:100%;aspect-ratio:21/9;object-fit:cover}
.figure-wide figcaption{
  font-family:var(--mono);font-size:var(--t1);color:var(--slate);
  padding-top:var(--x2);letter-spacing:.06em;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--x5)}
@media (max-width:640px){.duo{grid-template-columns:1fr}}

/* --- 21b. Cobertura por pueblo ------------------------------------------ */
.cover{border-top:1px solid var(--line-hard)}
.cover-row{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr) 3rem;
  gap:var(--x4);align-items:center;
  padding-block:var(--x3);border-bottom:1px solid var(--line);
}
.cover-town{font-family:var(--display);font-weight:600;font-size:var(--t3)}
.cover-bar{display:block;height:10px;background:var(--mist-2)}
.cover-bar i{display:block;height:100%;background:var(--accent)}
.cover-n{font-family:var(--mono);font-size:var(--t2);text-align:right;color:var(--slate);font-variant-numeric:tabular-nums}
.cover-more{
  padding-top:var(--x4);font-size:var(--t3);color:var(--slate);
  line-height:1.7;
}
@media (max-width:520px){
  .cover-row{grid-template-columns:minmax(0,1fr) 3rem;grid-template-areas:"t n" "b b";row-gap:var(--x2)}
  .cover-town{grid-area:t}
  .cover-n{grid-area:n}
  .cover-bar{grid-area:b}
}

/* --- 22. Diagnóstico ---------------------------------------------------- */
.diag{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-hard)}
.diag-col{padding:var(--x5);display:flex;flex-direction:column;gap:var(--x4)}
.diag-col + .diag-col{border-inline-start:1px solid var(--line-hard)}
.diag-col h3{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;display:flex;align-items:center;gap:var(--x2);
}
.dot{width:10px;height:10px;flex:0 0 auto}
.dot-now{background:var(--slate)}
.dot-next{background:var(--accent)}
.diag ul{display:flex;flex-direction:column;gap:var(--x3)}
.diag li{font-size:var(--t3);line-height:1.55;padding-inline-start:var(--x4);position:relative}
.diag li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--slate)}
.diag code{font-family:var(--mono);font-size:var(--t2);background:var(--mist);padding:1px 5px}
.diag .stamp{margin-top:auto;font-family:var(--mono);font-size:var(--t1);color:var(--slate)}
@media (max-width:760px){
  .diag{grid-template-columns:1fr}
  .diag-col + .diag-col{border-inline-start:0;border-top:1px solid var(--line-hard)}
}

/* --- 23. Alertas -------------------------------------------------------- */
.subscribe{display:flex;flex-wrap:wrap;gap:var(--x4);align-items:flex-end}
.subscribe .fld{display:flex;flex-direction:column;gap:var(--x2);flex:1 1 280px}
.subscribe .fld > span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.subscribe input{
  border:0;border-bottom:2px solid var(--line-hard);background:transparent;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:var(--t5);padding:var(--x2) 0;min-height:44px;
}

/* --- 24. Pie ------------------------------------------------------------ */
.foot{background:var(--band);color:var(--band-paper);padding-block:var(--x8) var(--x5)}
.foot h4{
  font-family:var(--mono);font-weight:400;font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--band-slate);margin-bottom:var(--x3);
}
.foot-a{grid-column:1 / 5}
.foot-b{grid-column:6 / 9}
.foot-c{grid-column:9 / 13}
.foot p,.foot li{font-size:var(--t3);color:#BFBDB4}
.foot li + li{margin-top:var(--x2)}
.foot a{text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--accent)}
.foot-note{
  display:flex;flex-wrap:wrap;gap:var(--x3) var(--x6);
  margin-top:var(--x7);padding-top:var(--x4);border-top:1px solid var(--band-line);
  font-family:var(--mono);font-size:var(--t1);color:#7B7972;
}
@media (max-width:820px){.foot-a,.foot-b,.foot-c{grid-column:1 / -1}}

/* --- 25. Movimiento ----------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js [data-rise]{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
.js [data-rise="1"]{animation-delay:.02s}
.js [data-rise="2"]{animation-delay:.10s}
.js [data-rise="3"]{animation-delay:.18s}
.js [data-rise="4"]{animation-delay:.26s}
.js [data-rise="5"]{animation-delay:.34s}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}
.is-hidden{display:none !important}