/* ============ BedsKingKong · Sistema de diseño 2026 ============ */
:root{
  --ink:#0B2B6B;          /* azul marino */
  --ink-2:#007BFF;        /* azul eléctrico */
  --gold:#F4B400;         /* dorado: acento de negociación */
  --gold-soft:#FFF3CF;
  --coral:#F2603F;        /* contraoferta */
  --coral-soft:#FFE6DF;
  --ok:#17A06B;  --ok-soft:#DDF5EA;
  --bad:#D2445A; --bad-soft:#FBE3E7;
  --mute:#6B7686;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#E9EEF6;
  --text:#1F2937;
  --line:#E0E6F0;
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(11,43,107,.06),0 8px 24px -12px rgba(11,43,107,.18);
  --top-h:64px;
  --bottom-h:68px;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-num:'Space Grotesk','Plus Jakarta Sans',sans-serif;
}
[data-bs-theme="dark"]{
  --ink:#8DB8FF; --ink-2:#4D94FF;
  --gold:#FFC83D; --gold-soft:#3A2F10;
  --coral:#FF8466; --coral-soft:#3B211B;
  --ok:#3DD598; --ok-soft:#10301F;
  --bad:#FF7A8C; --bad-soft:#3A1A20;
  --mute:#98A6C4;
  --bg:#0A1226; --surface:#111B36; --surface-2:#182750; --text:#EAF0FF; --line:#22305A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; padding-top:var(--top-h);
  padding-bottom:calc(var(--bottom-h) + env(safe-area-inset-bottom) + 20px);
}
h1,h2,h3,h4,h5{font-weight:800; letter-spacing:-.02em}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.text-mute{color:var(--mute)!important}
a{color:var(--ink-2)}
.btn{font-weight:700; border-radius:14px; padding:.65rem 1.1rem; transition:transform .15s, box-shadow .15s, background .15s}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink); color:var(--bg); border:0}
[data-bs-theme="light"] .btn-ink{color:#fff}
.btn-ink:hover{background:var(--ink-2); color:#fff}
.btn-gold{background:var(--gold); color:#2A2000; border:0}
.btn-gold:hover{background:#ffc933; color:#2A2000; box-shadow:0 8px 20px -8px rgba(244,180,0,.8)}
.btn-ghost{background:transparent; border:1.5px solid var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}
.btn-coral{background:var(--coral); color:#fff; border:0}
.btn-ok{background:var(--ok); color:#fff; border:0}
.btn-ok:hover{filter:brightness(1.07); color:#fff}
.btn-sm{border-radius:11px; padding:.4rem .8rem; font-size:.85rem}
.form-control,.form-select{border-radius:14px; border:1.5px solid var(--line); background-color:var(--surface); padding:.7rem .9rem; font-weight:500}
.form-control:focus,.form-select:focus{border-color:var(--ink); box-shadow:0 0 0 .2rem rgba(11,43,107,.12)}
.form-label{font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); margin-bottom:.3rem}

/* ---------- Barra superior ---------- */
.bkk-top{position:fixed; inset:0 0 auto 0; height:var(--top-h); z-index:1030; display:flex; align-items:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.bkk-top .container-xxl{width:100%}
.bkk-logo{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--text)}
.bkk-logo-mark{width:38px; height:38px; display:grid; place-items:center}
.bkk-logo-mark img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(11,43,107,.25))}
.bkk-logo-text{font-weight:600; font-size:1.12rem; letter-spacing:-.03em}
.bkk-logo-text{font-weight:800; color:var(--ink)}
.bkk-logo-text b{font-weight:800; color:var(--gold)}
.bkk-desknav{gap:.25rem; margin-left:1.5rem}
.bkk-desknav a{display:flex; gap:.45rem; align-items:center; text-decoration:none; color:var(--mute); font-weight:700; font-size:.92rem; padding:.5rem .85rem; border-radius:12px; transition:.15s}
.bkk-desknav a:hover{background:var(--surface-2); color:var(--text)}
.bkk-desknav a.active{background:var(--ink); color:#fff}
[data-bs-theme="dark"] .bkk-desknav a.active{color:#0A1226}
.icon-btn{width:40px; height:40px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); display:grid; place-items:center; transition:.15s}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn .dot{position:absolute; top:8px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--coral); border:2px solid var(--surface)}
.role-switch{display:flex; background:var(--surface-2); border-radius:14px; padding:3px; gap:2px}
.role-switch button{border:0; background:transparent; color:var(--mute); font-weight:700; font-size:.78rem; padding:.42rem .65rem; border-radius:11px; display:flex; gap:.35rem; align-items:center; transition:.2s}
.role-switch button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
@media (max-width:575px){ .role-switch button span{display:none} .role-switch button{padding:.5rem .6rem} .bkk-logo-text{font-size:1rem} }

/* ---------- Navegación inferior móvil ---------- */
.bkk-bottom{position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:1040;
  height:var(--bottom-h); border-radius:26px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; padding:6px;
  background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(18px);
  border:1px solid var(--line); box-shadow:0 18px 40px -16px rgba(11,43,107,.45)}
.bkk-bottom.cols-4{grid-template-columns:repeat(4,1fr)}
.bkk-bottom a{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:100%;
  text-decoration:none; color:var(--mute); font-size:.66rem; font-weight:700; border-radius:20px; transition:color .2s, background .25s; -webkit-tap-highlight-color:transparent; min-width:44px}
.bkk-bottom a i{font-size:1.28rem; transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.bkk-bottom a.active{color:var(--ink); background:color-mix(in srgb,var(--gold) 28%,transparent)}
.bkk-bottom a.active i{transform:translateY(-2px) scale(1.12)}
.bkk-bottom a .badge-dot{position:absolute; top:8px; left:calc(50% + 8px); min-width:17px; height:17px; border-radius:9px; background:var(--coral); color:#fff; font-size:.62rem; display:grid; place-items:center; padding:0 4px; border:2px solid var(--surface)}
@media (min-width:992px){ body{padding-bottom:40px} }
@media (max-width:991px){ .toast-container{bottom:calc(var(--bottom-h) + 30px)!important} }

/* ---------- Layout ---------- */
.bkk-main{min-height:70vh}
.view{animation:viewIn .35s ease both}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.section{padding:1.4rem 0}
.section-title{font-size:clamp(1.35rem,2.2vw,1.8rem); margin-bottom:.25rem}
.card-bkk{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.chip{display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .8rem; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-weight:700; font-size:.82rem; color:var(--text); cursor:pointer; transition:.15s; white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink)}
[data-bs-theme="dark"] .chip.active{color:#0A1226}
.scroll-x{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.demo-tag{display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.1rem .45rem; border-radius:6px; background:var(--surface-2); color:var(--mute)}

/* ---------- Hero ---------- */
.hero{position:relative; padding:1.2rem 0 2rem; overflow:hidden}
.hero-grid{display:grid; gap:2rem; align-items:center}
@media (min-width:992px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.7rem); line-height:1.02}
.hero h1 mark{background:linear-gradient(transparent 58%,var(--gold) 58%); color:inherit; padding:0 .1em}
.eyebrow{display:inline-flex; gap:.4rem; align-items:center; font-size:.78rem; font-weight:800; color:var(--ink); background:var(--gold-soft); padding:.35rem .75rem; border-radius:999px}
.search-card{padding:1rem; margin-top:1.4rem}
.budget-box{background:var(--ink); color:#fff; border-radius:16px; padding:1rem 1.1rem; margin-top:.9rem; position:relative; overflow:hidden}
[data-bs-theme="dark"] .budget-box{background:#0F2358; color:#EAF2F1}
.budget-box::after{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:var(--gold); opacity:.14}
.budget-box .amount{font-family:var(--font-num); font-size:2.3rem; font-weight:700; color:var(--gold); line-height:1}
.budget-box small{color:rgba(255,255,255,.7)}
.budget-box input[type=range]{width:100%; accent-color:var(--gold)}
.market-bar{height:8px; border-radius:6px; background:rgba(255,255,255,.15); position:relative; margin:.55rem 0 .2rem}
.market-bar .zone{position:absolute; top:0; bottom:0; background:rgba(244,180,0,.45); border-radius:6px}
.market-bar .pin{position:absolute; top:-4px; width:4px; height:16px; background:var(--gold); border-radius:3px; transform:translateX(-2px); transition:left .15s}

.hero-visual{position:relative; min-height:430px}
.hero-photo{position:absolute; inset:0 0 0 12%; border-radius:32px; background-size:cover; background-position:center; box-shadow:var(--shadow)}
.float-offer{position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:.7rem .9rem; box-shadow:0 18px 34px -16px rgba(0,0,0,.35); display:flex; gap:.7rem; align-items:center; animation:floaty 6s ease-in-out infinite}
.float-offer .ic{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem}
.float-offer .p{font-family:var(--font-num); font-size:1.25rem; font-weight:700; line-height:1}
.float-offer small{color:var(--mute); font-weight:600; font-size:.72rem}
.fo-1{top:6%; left:0; animation-delay:0s}
.fo-2{top:40%; right:-2%; animation-delay:1.4s}
.fo-3{bottom:5%; left:6%; animation-delay:2.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.you-bubble{position:absolute; top:-8px; right:8%; background:var(--gold); color:#2A2000; font-weight:800; border-radius:18px 18px 4px 18px; padding:.6rem .9rem; box-shadow:0 14px 28px -12px rgba(244,180,0,.8); z-index:2}
@media (max-width:991px){.hero-visual{min-height:300px}.hero-photo{inset:0}.fo-2{right:2%}}

/* ---------- Cómo funciona ---------- */
.steps{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{padding:1.1rem; position:relative; transition:transform .2s}
.step:hover{transform:translateY(-3px)}
.step .n{font-family:var(--font-num); font-weight:700; font-size:.8rem; width:28px; height:28px; border-radius:9px; background:var(--gold); color:#2A2000; display:grid; place-items:center; margin-bottom:.6rem}
.step i.big{position:absolute; right:1rem; top:1rem; font-size:1.5rem; color:var(--ink); opacity:.35}

/* ---------- Tarjetas de alojamiento ---------- */
.grid-props{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prop{overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; cursor:pointer}
.prop:hover{transform:translateY(-4px)}
.prop .ph{position:relative; aspect-ratio:4/3; background-size:cover; background-position:center}
.prop .ph .tag{position:absolute; left:10px; top:10px; background:rgba(255,255,255,.92); color:#14201F; font-weight:800; font-size:.72rem; padding:.28rem .6rem; border-radius:9px}
.prop .ph .fav{position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); border:0; color:#14201F; display:grid; place-items:center}
.prop .ph .fav.on{color:var(--coral)}
.prop .body{padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.prop .price{font-family:var(--font-num); font-weight:700; font-size:1.3rem}
.prop .price small{font-family:var(--font); font-weight:600; color:var(--mute); font-size:.76rem}
.rate{font-weight:800; font-size:.85rem}
.rate i{color:var(--gold)}
.amen{display:flex; gap:.35rem; flex-wrap:wrap}
.amen span{font-size:.72rem; font-weight:600; background:var(--surface-2); padding:.2rem .5rem; border-radius:8px; display:inline-flex; gap:.25rem; align-items:center}
.img-fallback{background:linear-gradient(135deg,var(--ink),var(--ink-2))}

/* ---------- Explorar ---------- */
.explore-layout{display:grid; gap:1rem}
@media (min-width:1200px){.explore-layout{grid-template-columns:1fr 420px}}
#map{height:520px; border-radius:var(--radius); border:1px solid var(--line); z-index:1}
@media (min-width:1200px){#mapWrap{position:sticky; top:calc(var(--top-h) + 16px)}}
.map-price{background:var(--surface); color:var(--text); font-family:var(--font-num); font-weight:700; border:2px solid var(--ink); border-radius:14px; padding:2px 8px; font-size:.8rem; white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,.25)}

/* ---------- Ofertas ---------- */
.st{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:800; padding:.28rem .65rem; border-radius:999px}
.st-pending{background:var(--gold-soft); color:#8A6200}
[data-bs-theme="dark"] .st-pending{color:var(--gold)}
.st-accepted{background:var(--ok-soft); color:var(--ok)}
.st-counter{background:var(--coral-soft); color:var(--coral)}
.st-rejected{background:var(--bad-soft); color:var(--bad)}
.st-expired{background:var(--surface-2); color:var(--mute)}
.req-item{padding:.9rem 1rem; cursor:pointer; border:1.5px solid var(--line); border-radius:16px; background:var(--surface); transition:.15s}
.req-item:hover{border-color:var(--ink)}
.req-item.active{border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent)}
.offer{display:grid; grid-template-columns:96px 1fr; gap:.9rem; padding:.8rem; border-radius:18px; border:1.5px solid var(--line); background:var(--surface); position:relative; transition:.2s}
.offer.sel{border-color:var(--ink)}
.offer.best{border-color:var(--ok)}
.offer .th{border-radius:14px; background-size:cover; background-position:center; min-height:96px}
.offer .pr{font-family:var(--font-num); font-size:1.7rem; font-weight:700; line-height:1}
.offer.counter .pr{color:var(--coral)}
.offer.accepted .pr{color:var(--ok)}
.offer.rejected,.offer.expired{opacity:.62}
.delta{font-size:.76rem; font-weight:800; padding:.15rem .5rem; border-radius:8px}
.delta.up{background:var(--coral-soft); color:var(--coral)}
.delta.eq{background:var(--ok-soft); color:var(--ok)}
.delta.down{background:var(--ok-soft); color:var(--ok)}
.ribbon{position:absolute; top:-9px; right:14px; background:var(--ok); color:#fff; font-size:.68rem; font-weight:800; padding:.18rem .6rem; border-radius:8px}
@media (max-width:420px){.offer{grid-template-columns:72px 1fr}.offer .th{min-height:72px}}
.compare-bar{position:sticky; bottom:calc(var(--bottom-h) + 26px + env(safe-area-inset-bottom)); z-index:20; background:var(--ink); color:#fff; border-radius:18px; padding:.7rem 1rem; display:flex; align-items:center; gap:.8rem; box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
[data-bs-theme="dark"] .compare-bar{background:#0F2358}
@media (min-width:992px){.compare-bar{bottom:20px}}
.cmp-table th{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); width:110px}
.cmp-table td{font-weight:600}
.cmp-best{background:var(--ok-soft)!important; color:var(--ok)}

/* ---------- Ficha ---------- */
.gallery{display:grid; gap:.5rem; grid-template-columns:1fr; border-radius:var(--radius); overflow:hidden}
.gallery .g{background-size:cover; background-position:center; min-height:220px; cursor:pointer; transition:filter .2s}
.gallery .g:hover{filter:brightness(.92)}
@media (min-width:768px){.gallery{grid-template-columns:2fr 1fr 1fr; grid-template-rows:200px 200px}.gallery .g:first-child{grid-row:span 2}}
@media (max-width:767px){.gallery .g:nth-child(n+3){display:none}.gallery{grid-template-columns:2fr 1fr}.gallery .g{min-height:240px}}
.sticky-side{position:sticky; top:calc(var(--top-h) + 16px)}
.feature{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; background:var(--surface-2); border-radius:14px; font-weight:600; font-size:.9rem}
.feature i{color:var(--ink); font-size:1.15rem}

/* ---------- Reserva / resumen ---------- */
.sum-row{display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px dashed var(--line)}
.sum-row:last-child{border-bottom:0}
.sum-total{font-family:var(--font-num); font-size:1.8rem; font-weight:700}

/* ---------- Dashboard ---------- */
.kpi{padding:1rem 1.1rem}
.kpi .v{font-family:var(--font-num); font-size:1.9rem; font-weight:700; line-height:1.1}
.kpi .l{font-size:.78rem; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.05em}
.kpi .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem}
.trend{font-size:.76rem; font-weight:800}
.trend.up{color:var(--ok)} .trend.down{color:var(--bad)}
.timeline{position:relative; padding-left:1.4rem}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line)}
.timeline .it{position:relative; padding-bottom:.9rem}
.timeline .it::before{content:""; position:absolute; left:-1.4rem; top:5px; width:14px; height:14px; border-radius:50%; background:var(--gold); border:3px solid var(--surface)}
.toggle-row{display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line)}
.avatar{width:64px; height:64px; border-radius:20px; background:var(--ink); color:var(--gold); display:grid; place-items:center; font-weight:800; font-size:1.4rem}
.avatar.sm{width:38px; height:38px; border-radius:12px; font-size:.9rem}

/* ---------- Calendario ---------- */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal .h{font-size:.7rem; font-weight:800; color:var(--mute); text-align:center; text-transform:uppercase}
.cal .d{aspect-ratio:1; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; cursor:pointer; font-size:.9rem; transition:.15s; position:relative}
.cal .d:hover{border-color:var(--ink)}
.cal .d small{font-size:.58rem; font-weight:700}
.cal .d.free{background:var(--surface)}
.cal .d.booked{background:var(--ink); color:#fff; border-color:var(--ink); cursor:default}
[data-bs-theme="dark"] .cal .d.booked{color:#0A1226}
.cal .d.blocked{background:var(--surface-2); color:var(--mute); text-decoration:line-through}
.cal .d.empty{border:0; background:transparent; cursor:default}
.legend i{display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:.3rem; vertical-align:-1px}

/* ---------- Admin ---------- */
table.dataTable{border-collapse:collapse!important}
.dataTables_wrapper .form-control,.dataTables_wrapper .form-select{padding:.35rem .6rem}
.table{--bs-table-bg:transparent; --bs-table-color:var(--text); --bs-table-border-color:var(--line)}
.page-link{color:var(--ink); border-radius:10px!important; margin:0 2px; border-color:var(--line); background:var(--surface)}
.page-item.active .page-link{background:var(--ink); border-color:var(--ink); color:#fff}
.table-wrap{padding:1rem; overflow-x:auto}

/* ---------- Modales / Swal ---------- */
.bkk-modal{border-radius:24px; border:1px solid var(--line); background:var(--surface)}
.swal2-popup{border-radius:24px!important; font-family:var(--font)!important; background:var(--surface)!important; color:var(--text)!important}
.swal2-title{color:var(--text)!important; font-weight:800!important}
.swal2-html-container{color:var(--text)!important}
.swal2-styled{border-radius:14px!important; font-weight:700!important}
.swal2-input{border-radius:14px!important; font-family:var(--font-num)!important; font-size:1.6rem!important; text-align:center}
.toast-container{z-index:2000}
.bkk-toast{border-radius:16px; border:0; box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}

footer.bkk-foot{padding:2rem 0; color:var(--mute); font-size:.82rem}
.host-cta{background:var(--ink); color:#fff; border-radius:28px; padding:2rem; position:relative; overflow:hidden}
[data-bs-theme="dark"] .host-cta{background:#0F2358}
.host-cta::before{content:""; position:absolute; right:-60px; bottom:-80px; width:260px; height:260px; border-radius:50%; background:var(--gold); opacity:.18}
.benefit{display:flex; gap:.8rem; padding:.7rem 0}
.benefit i{width:38px; height:38px; border-radius:12px; background:var(--gold-soft); color:var(--ink); display:grid; place-items:center; flex:none; font-size:1.05rem}
.pulse{animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,96,63,.5)}100%{box-shadow:0 0 0 14px rgba(242,96,63,0)}}
.pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.9); opacity:0}to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- Añadidos ---------- */
.req-list{display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.3rem}
.req-list .req-item{flex:0 0 260px}
@media (min-width:992px){.req-list{flex-direction:column; overflow:visible}.req-list .req-item{flex:none}}
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem}
.cat{display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.8rem .3rem; border-radius:18px; border:1.5px solid var(--line); background:var(--surface); font-weight:700; font-size:.78rem; color:var(--text); cursor:pointer; transition:.2s; text-align:center}
.cat i{font-size:1.5rem; color:var(--ink-2)}
.cat:hover{border-color:var(--ink-2); transform:translateY(-3px); box-shadow:var(--shadow)}
@media (max-width:575px){.cats{grid-template-columns:repeat(3,1fr)}}
.tagline-script{font-family:'Brush Script MT','Segoe Script',cursive; color:var(--gold); font-style:italic; font-weight:700}
.chat{display:flex; flex-direction:column; gap:.6rem}
.bubble{max-width:82%; padding:.6rem .85rem; border-radius:16px; font-size:.9rem}
.bubble.them{background:var(--surface-2); border-bottom-left-radius:4px; align-self:flex-start}
.bubble.me{background:var(--ink); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
[data-bs-theme="dark"] .bubble.me{color:#0A1226}
.bubble small{display:block; opacity:.65; font-size:.68rem; font-weight:700; margin-bottom:.1rem}
.brand-hero-logo{height:56px}

/* ============ Estilo tipo buscador de alojamientos (v2) ============ */
:root{--ink-hdr:#0B2B6B}
.bkk-top{background:var(--ink-hdr)!important; border-bottom:0; backdrop-filter:none}
[data-bs-theme="dark"] .bkk-top{background:#081a40!important}
.bkk-top .bkk-logo-text,.bkk-top .bkk-logo-text b{color:#fff}
.bkk-top .bkk-logo-text b{color:var(--gold)}
.bkk-top .bkk-desknav a{color:rgba(255,255,255,.8)}
.bkk-top .bkk-desknav a:hover{background:rgba(255,255,255,.12); color:#fff}
.bkk-top .bkk-desknav a.active{background:transparent; color:#fff; box-shadow:inset 0 -3px 0 var(--gold); border-radius:0}
.bkk-top .icon-btn{background:transparent; border-color:rgba(255,255,255,.3); color:#fff}
.bkk-top .icon-btn .dot{border-color:var(--ink-hdr)}
.btn-hdr{background:#fff; color:var(--ink-hdr); border:0; font-weight:800}
.btn-hdr:hover{background:var(--gold-soft); color:var(--ink-hdr)}
.btn-hdr-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); font-weight:700}
.btn-hdr-ghost:hover{background:rgba(255,255,255,.14); color:#fff}
.user-chip{display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:14px; padding:.25rem .7rem .25rem .3rem; font-weight:700; font-size:.82rem}
.user-chip:hover{background:rgba(255,255,255,.2)}
.user-chip .avatar{background:var(--gold); color:#2A2000}

.hero-navy{background:linear-gradient(180deg,var(--ink-hdr) 0,#0f3a8f 100%); color:#fff; padding:2rem 0 5.2rem}
.hero-navy .hero-grid{display:grid; gap:2rem; align-items:center}
@media (min-width:992px){.hero-navy .hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-navy h1{font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.05; color:#fff}
.hero-navy h1 mark{background:none; color:var(--gold); padding:0}
.hero-navy .lead{color:rgba(255,255,255,.82); font-size:1.05rem}
.hero-navy .eyebrow{background:rgba(255,255,255,.14); color:#fff}
.hero-navy .hero-visual{min-height:330px}
.sbar-wrap{margin-top:-3.6rem; position:relative; z-index:5}
.sbar{background:var(--gold); border-radius:20px; padding:.8rem; box-shadow:0 18px 40px -18px rgba(11,43,107,.55)}
.sbar .form-control,.sbar .form-select{border:2px solid transparent; background:#fff; color:#1F2937; border-radius:12px}
.sbar .form-label{color:#4a3500}
.sbar .small.text-mute{color:#5a4300!important}
.sbar .btn-gold{background:var(--ink-hdr); color:#fff}
.sbar .btn-gold:hover{background:#0f3a8f; color:#fff; box-shadow:none}
[data-bs-theme="dark"] .sbar .form-control,[data-bs-theme="dark"] .sbar .form-select{background:#fff; color:#1F2937}

/* Precio escrito a mano */
.budget-box{background:transparent!important; color:inherit!important; padding:0!important; margin:0!important; border-radius:0!important; overflow:visible!important}
.budget-box::after{display:none}
.bb-label{display:block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; color:var(--mute)}
.sbar .bb-label{color:#4a3500}
.bb-input{display:flex; align-items:center; background:#fff; border:2px solid var(--ink-hdr); border-radius:12px; overflow:hidden}
.bb-input span{padding:.7rem .8rem; font-weight:800; background:var(--surface-2); color:#1F2937; font-size:.85rem}
.bb-input input{border:0; outline:0; width:100%; padding:.7rem .8rem; font-family:var(--font-num); font-size:1.25rem; font-weight:700; color:#1F2937; background:#fff}
.bb-input:focus-within{box-shadow:0 0 0 .25rem rgba(11,43,107,.25)}
.bb-msg{display:block; margin-top:.3rem; font-size:.74rem; color:var(--mute)}
.sbar .bb-msg{color:#5a4300}

.login-banner{display:flex; align-items:center; gap:.9rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:.8rem 1rem; color:var(--text)}
.login-banner>i{font-size:1.8rem; color:var(--ink-2)}
.tiles{display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem}
.tile{cursor:pointer; transition:.2s}
.tile .timg{aspect-ratio:4/3; border-radius:16px; background-size:cover; background-position:center; margin-bottom:.4rem; transition:filter .2s}
.tile:hover .timg{filter:brightness(.9)} .tile b{display:block} .tile small{color:var(--mute)}
@media (max-width:767px){.tiles{grid-template-columns:repeat(2,1fr)}}
.dests{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.dest{height:170px; border-radius:18px; background-size:cover; background-position:center; position:relative; overflow:hidden; cursor:pointer}
.dest .dov{position:absolute; inset:auto 0 0 0; padding:.8rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.65))}
.dest .dov small{display:block; opacity:.85}
@media (max-width:767px){.dests{grid-template-columns:repeat(2,1fr)}.dest{height:130px}}

/* Resultados en lista */
.hcard{display:grid; grid-template-columns:240px 1fr 200px; gap:1rem; padding:.8rem; cursor:pointer; transition:box-shadow .2s, border-color .2s}
.hcard:hover{border-color:var(--ink-2)}
.himg{position:relative; min-height:190px; border-radius:14px; background-size:cover; background-position:center}
.himg .fav{position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#14201F; display:grid; place-items:center}
.himg .fav.on{color:var(--coral)}
.hname{font-size:1.1rem; font-weight:800; color:var(--ink-2)}
.hloc{color:var(--ink-2); font-weight:700; text-decoration:underline}
.okline{color:var(--ok); font-weight:700; font-size:.82rem}
.hright{display:flex; flex-direction:column; align-items:flex-end; gap:.5rem}
.hprice{font-family:var(--font-num); font-size:1.6rem; font-weight:700}
@media (max-width:767px){.hcard{grid-template-columns:1fr}.himg{min-height:170px}.hright{align-items:stretch}}
.score{display:flex; gap:.5rem; align-items:center; text-align:right}
.score .txt b{display:block; font-size:.9rem; line-height:1.1} .score .txt small{color:var(--mute); font-size:.7rem}
.sbox{display:inline-grid; place-items:center; min-width:38px; height:34px; padding:0 .4rem; border-radius:10px 10px 10px 2px; background:var(--ink-hdr); color:#fff; font-family:var(--font-num); font-weight:700}
[data-bs-theme="dark"] .sbox{background:var(--ink-2)}
.sbox.sm{min-width:30px; height:26px; font-size:.78rem}
.stars{color:var(--gold); font-size:.8rem}
.tag-type{font-size:.72rem; font-weight:800; background:var(--surface-2); padding:.15rem .55rem; border-radius:8px}

/* Filtros laterales */
.fside .fh{font-size:.9rem; font-weight:800; margin:1.1rem 0 .5rem; padding-top:1rem; border-top:1px solid var(--line)}
.fside .fh:first-of-type{border-top:0; padding-top:0; margin-top:.9rem}
.fchk{display:flex; align-items:center; gap:.55rem; padding:.18rem 0; cursor:pointer; font-size:.88rem}
.fchk span{flex:1} .fchk small{color:var(--mute)}
.fchk .form-check-input{margin:0; border-color:var(--ink-hdr)}
.fchk .form-check-input:checked{background-color:var(--ink-hdr); border-color:var(--ink-hdr)}
.mapcard{width:100%; display:flex; align-items:center; gap:.6rem; border:2px solid var(--ink-2); border-radius:14px; padding:.8rem; background:var(--surface-2); color:var(--ink-2); font-weight:700}
.mapcard i{font-size:1.5rem}
#map{height:360px}

/* Ficha */
.dtabs{display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin-bottom:1rem; overflow-x:auto; position:sticky; top:var(--top-h); background:var(--bg); z-index:10}
.dtabs a{padding:.7rem 1rem; text-decoration:none; font-weight:700; color:var(--mute); white-space:nowrap; border-bottom:3px solid transparent}
.dtabs a:hover{color:var(--ink-2); border-color:var(--ink-2)}
.dsec{margin-bottom:1.6rem; scroll-margin-top:calc(var(--top-h) + 60px)}
.highlight .hl{display:flex; gap:.5rem; font-size:.85rem; align-items:flex-start} .highlight .hl i{color:var(--ink-2); font-size:1.15rem}
.rbar{height:8px; border-radius:6px; background:var(--surface-2); margin:.25rem 0 .6rem; overflow:hidden}
.rbar span{display:block; height:100%; background:var(--ink-2); border-radius:6px}

/* Sesión / cuentas demo */
.demo-creds{background:var(--surface-2); border-radius:14px; padding:.8rem}
.cred{display:grid; grid-template-columns:78px 1fr; gap:.1rem .6rem; width:100%; text-align:left; border:1.5px dashed var(--line); background:var(--surface); border-radius:10px; padding:.45rem .6rem; margin-bottom:.4rem; font-size:.78rem; color:var(--text)}
.cred:hover{border-color:var(--ink-2)}
.cred code{grid-column:2; color:var(--coral)}
.cred b{grid-row:span 2; align-self:center}
code{color:var(--coral); background:transparent}
.wall .demo-creds code{color:var(--ink-2)}