/* Directorio v2 (24-10-2026): ancho completo, barra lateral de filtros, etiquetas activas; en móvil, panel a pantalla completa. */
.dx-wrap{inline-size:min(1560px,100% - 2*clamp(16px,3vw,40px));margin-inline:auto}
.dx-head{padding-block:clamp(18px,3vw,34px) clamp(10px,2vw,18px)}
.dx-head h1{font:400 clamp(1.8rem,1.2rem + 1.9vw,2.9rem)/1.05 var(--ff-display);margin:.5rem 0 .4rem;text-wrap:balance}
.dx-lead{margin:0;color:var(--muted);max-inline-size:70ch}
.dx{display:grid;grid-template-columns:290px minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:start;padding-block-end:3rem}

/* barra lateral */
.dx-side{position:sticky;inset-block-start:88px;max-block-size:calc(100vh - 104px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg,18px);background:var(--surface);overflow:hidden}
.dx-side-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem .6rem}
.dx-side-head h2{margin:0;font:600 .78rem/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dx-x{display:none;border:0;background:none;font-size:1.8rem;line-height:1;color:var(--ink);cursor:pointer;padding:.2rem .5rem}
.dx-form{overflow:auto;overscroll-behavior:contain;padding:0 1.15rem .6rem;flex:1 1 auto;min-block-size:0}
.dx-box{border:0;margin:0;padding:.85rem 0;box-shadow:inset 0 1px var(--line);min-inline-size:0}
.dx-box:first-child{box-shadow:none;padding-block-start:.2rem}
.dx-box legend{float:left;inline-size:100%;font-weight:700;font-size:.95rem;padding:0;margin-block-end:.5rem}
.dx-box legend+*{clear:both}
.dx-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.32rem 0;font-size:.92rem;cursor:pointer;color:var(--ink)}
.dx-opt:has(.cdot){grid-template-columns:auto auto 1fr auto}
.dx-opt input{inline-size:18px;block-size:18px;margin:0;accent-color:var(--fang,#d9572b);cursor:pointer}
.dx-opt .cdot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--cc)}
.dx-opt em{font-style:normal;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dx-opt.zero{opacity:.45}
.dx-opt:hover span{text-decoration:underline;text-underline-offset:3px}
.dx-note{margin:.5rem 0 0;font-size:.78rem;line-height:1.4;color:var(--muted)}
.dx-opt-any{margin-block-end:.35rem}
.dx-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem}
.dx-mo{position:relative;display:grid;justify-items:center;gap:.05rem;padding:.4rem .1rem .35rem;border:1px solid var(--line);border-radius:var(--r-sm,10px);background:var(--surface);cursor:pointer;min-block-size:44px;transition:background .15s,border-color .15s,color .15s}
.dx-mo input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}
.dx-mo span{font-weight:600;font-size:.86rem;color:var(--ink)}
.dx-mo em{font-style:normal;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dx-mo:hover{border-color:var(--ink)}
.dx-mo:has(input:checked){background:var(--ink);border-color:var(--ink)}.dx-mo:has(input:checked) span,.dx-mo:has(input:checked) em{color:var(--bg)}
.dx-mo:has(input:focus-visible){outline:2px solid var(--fang,#d9572b);outline-offset:2px}
.dx-mo.zero{opacity:.45}
.dx-range{display:flex;align-items:center;gap:.7rem;margin-block-end:.4rem}
.dx-range input{flex:1;accent-color:var(--fang,#d9572b)}
.dx-range output{min-inline-size:5.5em;text-align:end;font-size:.86rem;font-weight:600}
.dx-side-foot{flex:none;display:flex;gap:.5rem;padding:.8rem 1.15rem;border-block-start:1px solid var(--line);background:var(--surface)}
.dx-side-foot .btn{flex:1;justify-content:center}
.dx-side-foot #dx-apply{display:none}

/* zona de resultados */
.dx-top{display:flex;gap:.6rem;align-items:center}
.dx-search{flex:1;min-inline-size:0;display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 1.1rem;transition:border-color .2s,box-shadow .2s}
.dx-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in oklch,var(--fang) 22%,transparent)}
.dx-search svg{color:var(--muted);flex:none}
.dx-search input{flex:1;min-inline-size:0;border:0;outline:0;background:transparent;font:500 1rem var(--ff);color:var(--ink);padding-block:.9rem}
.dx-open{flex:none;display:none;align-items:center;gap:.45rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.8rem 1.1rem;font:600 .95rem var(--ff);cursor:pointer}
.dx-open b[hidden]{display:none}.dx-open b{display:inline-grid;place-items:center;min-inline-size:1.4em;block-size:1.4em;border-radius:999px;background:var(--fang,#d9572b);color:#fff;font-size:.75rem}
.dx-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;margin-block:1rem .6rem}
.dx-count{margin:0;font:600 1.05rem var(--ff)}
.dx-tools{display:flex;align-items:center;gap:1rem}
.dx-map{white-space:nowrap;font-weight:600;color:var(--ink);text-decoration:none;border-block-end:2px solid var(--fang,#d9572b)}
.dx-sort{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--muted)}
.dx-sort select{font:600 .92rem var(--ff);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 2rem .5rem .9rem}
.dx-chips{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.dx-chips[hidden]{display:none}
.dx-chips button{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:.38rem .5rem .38rem .8rem;font:500 .85rem var(--ff);cursor:pointer}
.dx-chips button i{font-style:normal;font-size:1.05rem;line-height:1;color:var(--muted)}
.dx-chips button:hover{border-color:var(--ink)}
.dx-chips .dx-chip-clear{background:none;border-color:transparent;text-decoration:underline;padding-inline:.5rem}
.dx-cards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,1.4vw,22px)}
.chip-pick{position:absolute;inset-inline-end:10px;inset-block-start:10px;background:var(--fang,#d9572b);color:#fff;font-weight:700;z-index:2}

/* móvil y tableta: la barra lateral pasa a panel a pantalla completa */
@media (max-width:980px){
  .dx{grid-template-columns:minmax(0,1fr)}
  .dx-open{display:inline-flex}
  .dx-top{position:sticky;inset-block-start:64px;z-index:30;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);padding-block:.5rem;margin-inline:calc(-1*clamp(16px,3vw,40px));padding-inline:clamp(16px,3vw,40px)}
  .dx-side{position:fixed;inset:0;inline-size:100%;max-inline-size:100vw;block-size:100%;z-index:90;max-block-size:none;border-radius:0;border:0;transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.1,1);visibility:hidden}
  .dx-side.open{transform:none;visibility:visible}
  .dx-x{display:block}
  .dx-side-head{padding-block:.8rem;border-block-end:1px solid var(--line)}
  .dx-form{padding-block-start:.4rem}
  .dx-side-foot{padding-block-end:calc(.8rem + env(safe-area-inset-bottom))}
  .dx-side-foot #dx-apply{display:inline-flex}
  body.dx-locked{overflow:hidden}
  .dx-bar{margin-block-start:.4rem}
}
@media (max-width:560px){
  .dx-search input{font-size:.95rem;padding-block:.75rem}
  .dx-open{padding:.7rem .9rem}
  .dx-tools{inline-size:100%;justify-content:space-between}
  .dx-cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.dx-side{transition:none}}
.dx-main{min-inline-size:0}
.dx-form,.dx-box,.dx-opt,.dx-opt span{min-inline-size:0}.dx-opt span{overflow-wrap:anywhere}.dx-range input{min-inline-size:0;inline-size:100%}
.dx-tools,.dx-sort{min-inline-size:0}.dx-sort select{min-inline-size:0;max-inline-size:100%;text-overflow:ellipsis}
@media (max-width:560px){.dx-tools{gap:.6rem}.dx-sort{flex:0 1 auto}.dx-sort select{max-inline-size:52vw}}

/* Rendimiento: las 399 tarjetas están en el HTML (rastreables sin JS) y el JS deja visibles solo 24. Hasta que lo hace, el navegador no maqueta ni pinta las que quedan
   fuera de pantalla (de la 13 en adelante); .dx-ready lo apaga para no recortar la sombra de las tarjetas al pasar el ratón. */
.js .dx-cards:not(.dx-ready) .card:nth-child(n+13){content-visibility:auto;contain-intrinsic-size:auto 470px}
@media (max-width:300px){.dx-tools{flex-wrap:wrap}.dx-sort{flex:1 1 100%}.dx-sort select{max-inline-size:100%;flex:1 1 auto}}

/* «Desde tu hotel»: campo «¿Dónde duermes?» con autocompletado local, distancia en las tarjetas y casilla de recogida.
   Sin JS el bloque no existe (no tendría nada que hacer). Alineado con el buscador y las tarjetas: mismo ancho, mismos bordes. */
.dx-where{display:none}
.js .dx-where{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:.8rem 1.8rem;align-items:start;margin-block-end:1rem;padding:1.05rem 1.2rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-lg,10px);background:var(--surface);scroll-margin-block-start:96px}
.dw-main,.dw-aside{min-inline-size:0}
.dw-label{display:flex;align-items:center;gap:.55rem;margin:0 0 .6rem;font:400 clamp(1.25rem,1.05rem + .6vw,1.55rem)/1.1 var(--ff-display);letter-spacing:-.01em;color:var(--ink)}
.dw-label svg{flex:none;color:var(--fang,#c4532f)}
.dw-field{position:relative}
.dw-field input{display:block;inline-size:100%;box-sizing:border-box;font:500 1rem var(--ff);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.82rem 2.9rem .82rem 1.1rem;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s}
.dw-field input::placeholder{color:var(--muted)}
.dw-field input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in oklch,var(--fang) 22%,transparent)}
.dw-x{position:absolute;inset-block-start:50%;inset-inline-end:.35rem;transform:translateY(-50%);inline-size:38px;block-size:38px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.dw-x[hidden]{display:none}
.dw-x:hover{color:var(--ink);background:var(--surface-2)}
.dw-x:focus-visible,.dw-pop button:focus-visible,.dw-pill:has(input:focus-visible),.dw-how summary:focus-visible{outline:2px solid var(--fang,#c4532f);outline-offset:2px}
.dw-list{position:absolute;inset-inline:0;inset-block-start:calc(100% + 6px);z-index:45;list-style:none;margin:0;padding:.35rem;max-block-size:min(340px,50vh);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,10px);box-shadow:0 14px 36px color-mix(in srgb,var(--ink) 16%,transparent)}
.dw-list[hidden]{display:none}
.dw-list li{display:grid;gap:.1rem;padding:.6rem .75rem;border-radius:8px;cursor:pointer;min-block-size:44px;align-content:center}
.dw-list li strong{font-weight:600;overflow-wrap:anywhere}
.dw-list li small{color:var(--muted);font-size:.8rem}
.dw-list li:hover,.dw-list li.on{background:var(--accent-soft)}
.dw-list li[aria-selected="true"]{outline:2px solid var(--fang,#c4532f);outline-offset:-2px}
.dw-hint,.dw-none{margin:.55rem 0 0;font-size:.82rem;line-height:1.4;color:var(--muted);max-inline-size:none}
.dw-none{color:var(--ink);font-size:.88rem}
.dw-none[hidden]{display:none}
.dw-aside{display:grid;gap:.8rem;align-content:start;padding-block-start:.15rem}
.dw-pop{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;font-size:.85rem;color:var(--muted)}
.dw-pop ul{list-style:none;margin:0;padding:0;display:contents}
.dw-pop button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:.4rem .85rem;min-block-size:36px;font:500 .86rem var(--ff);cursor:pointer;transition:border-color .15s}
.dw-pop button:hover{border-color:var(--ink)}
.dw-pill{display:inline-flex;align-items:center;gap:.55rem;justify-self:start;max-inline-size:100%;box-sizing:border-box;min-block-size:44px;padding:.5rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 .92rem var(--ff);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.dw-pill input{inline-size:18px;block-size:18px;margin:0;accent-color:var(--fang,#c4532f);cursor:pointer;flex:none}
.dw-pill em{font-style:normal;font-weight:500;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dw-pill:hover{border-color:var(--ink)}
.dw-pill:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--bg)}.dw-pill:has(input:checked) em{color:var(--bg);opacity:.8}
.dw-pill.zero{opacity:.5}
.dw-status{margin:.7rem 0 0;font-size:.92rem;font-weight:600;line-height:1.4;color:var(--accent-ink);max-inline-size:none}
.has-place .dw-hint{display:none}
.dw-status[hidden],.dw-how[hidden]{display:none}
.dw-how{margin-block-start:.35rem;font-size:.84rem;line-height:1.5;color:var(--muted)}
.dw-how summary{cursor:pointer;display:inline-block;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding-block:.25rem}
.dw-how p{margin:.4rem 0 0;max-inline-size:78ch}
/* distancia en la tarjeta: la línea que decide */
.meta .dx-dist{flex-basis:100%;color:var(--accent-ink);font-weight:600}
.meta .dx-dist span{min-inline-size:0;overflow-wrap:anywhere}
.meta .meta-pk{color:var(--ink)}
@media (max-width:820px){
  .js .dx-where{grid-template-columns:minmax(0,1fr);padding:.95rem 1rem 1rem}
  .dw-aside{padding-block-start:0}
  /* una sola fila de lugares que se desliza (como «Populares» de la portada) y, con lugar elegido, solo el estado: el bloque no empuja los resultados fuera de la pantalla */
  .dw-pop{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-1rem;padding:.15rem 1rem}
  .dw-pop::-webkit-scrollbar{display:none}
  .dw-pop span,.dw-pop button{flex:none;white-space:nowrap}
  .dw-pop ul{display:flex;gap:.5rem}
  .has-place .dw-pop{display:none}
}
@media (prefers-reduced-motion:reduce){.dw-field input,.dw-pill,.dw-pop button{transition:none}}