/* Hoteles — estilos propios de la página. Solo tokens de site.css.
   El panel .demo es navy en ambos temas: dentro se usan tokens --panel-*. */

/* Simulador de tarifa (data-demo="hotel-rates") */
[data-demo="hotel-rates"] .demo-body{gap:18px}
[data-demo="hotel-rates"] [data-controls]{display:grid;gap:18px}
[data-demo="hotel-rates"] [data-controls]:empty{display:none}
[data-demo="hotel-rates"] .hr-context{font-size:13px;color:var(--panel-ink-2)}
[data-demo="hotel-rates"] .hr-slider{display:grid;gap:10px}
[data-demo="hotel-rates"] .hr-slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--panel-ink-2)}
[data-demo="hotel-rates"] .hr-slider-head output{color:var(--panel-ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-demo="hotel-rates"] input.range{background:linear-gradient(to right,var(--panel-accent) var(--hr-fill,0%),var(--panel-line) var(--hr-fill,0%))}
[data-demo="hotel-rates"] .hr-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--panel-ink-2);font-variant-numeric:tabular-nums;margin-top:-2px}
[data-demo="hotel-rates"] .hr-results{display:grid;gap:12px}
[data-demo="hotel-rates"] .kpi-value{font-size:24px;white-space:nowrap}
[data-demo="hotel-rates"] .hr-reco{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px;line-height:1.5;color:var(--panel-ink)}
[data-demo="hotel-rates"] .hr-apply{font:500 13px/1 var(--sans);padding:9px 14px;border-radius:var(--r);border:1px solid var(--panel-accent);background:transparent;color:var(--panel-accent);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
[data-demo="hotel-rates"] .hr-apply:hover{background:color-mix(in srgb,var(--panel-accent) 14%,transparent)}
[data-demo="hotel-rates"] .hr-apply[aria-pressed="true"]{background:var(--panel-accent);color:var(--panel)}
[data-demo="hotel-rates"] .hr-apply:focus-visible{outline:2px solid var(--panel-accent);outline-offset:2px}
[data-demo="hotel-rates"] .hr-apply[hidden]{display:none}
@media (max-width:480px){
  [data-demo="hotel-rates"] .kpi:last-child{grid-column:1 / -1}
  [data-demo="hotel-rates"] .hr-reco{grid-template-columns:minmax(0,1fr)}
  [data-demo="hotel-rates"] .hr-reco .tag{justify-self:start}
  [data-demo="hotel-rates"] .hr-apply{justify-self:start}
}

/* Qué incluye: encabezado y lista lado a lado, sin margen extra */
#incluye .grid-2{align-items:start;gap:48px}
#incluye .section-head{margin-bottom:0}
@media (max-width:640px){#incluye .grid-2{gap:24px}}