/* Estilo ilustrado: una columna para móvil, cada ruta con su dibujo y su color.
   --accent = color del hotel, --rc = color de la ruta abierta. Fondo con el panot de flor de las aceras de Barcelona. */
:root{color-scheme:light;
  --bg:#DEDAD2; --surface:#FFFFFF; --fg:#17212B; --muted:#5A6874; --line:#DDE3E8;
  --accent:#0F6E73; --accent-ink:#FFFFFF; --rc:#4F6D7A;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --tile:url("img/panot-flor.png");
}
@media (prefers-color-scheme: dark) and (min-width:100000px){:root{
  --bg:#1B2229; --surface:#1A232C; --fg:#E9EEF2; --muted:#9DABB6; --line:#2B3640; color-scheme:dark;
  --tile:url("img/panot-flor-oscuro.png")}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg) var(--tile) 0 0/84px 84px;color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5}
.wrap{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:18px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(32px,env(safe-area-inset-bottom,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.loading{color:var(--muted)}
h1,h2,h3{text-wrap:balance}

/* portada del hotel */
.cover{position:relative;overflow:hidden;background:var(--accent);color:var(--accent-ink);border-radius:24px;padding:22px 20px 120px;display:flex;flex-direction:column;gap:14px}
.skyline{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none}
.skyline svg{width:100%;height:100%;display:block}
.brand{display:flex;gap:14px;align-items:center;position:relative}
.logo{flex:none;width:56px;height:56px;border-radius:16px;background:var(--accent-ink);color:var(--accent);display:grid;place-items:center;font:800 24px var(--display);overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.logo img{width:100%;height:100%;object-fit:contain}
.brand h1{font:700 22px/1.15 var(--display);margin:0;letter-spacing:-.01em}
.brand small{opacity:.85;font-size:13px}
.cover p{margin:0;font-size:16px;position:relative;max-width:46ch}
.cover > div:last-of-type{position:relative}
.sechead{display:flex;flex-direction:column;gap:2px}
.sechead h2{font:700 20px var(--display);margin:6px 0 0}
.sechead span{font-size:14px;color:var(--muted)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font:700 15px var(--body);cursor:pointer;min-height:46px}
.btn:disabled{opacity:.35;cursor:default}
.btn-light{background:var(--accent-ink);color:var(--accent);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn-main{background:var(--rc);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.btn-ghost{background:var(--surface);color:var(--fg);border:2px solid var(--line);min-width:54px}
button:focus-visible{outline:3px solid var(--fg);outline-offset:2px}

/* tarjetas de ruta */
.cards{display:flex;flex-direction:column;gap:18px}
.rcard{background:var(--surface);border-radius:22px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(23,33,43,.08)}
.illus{display:block;width:100%;border:0;padding:0;cursor:pointer;position:relative;aspect-ratio:2/1;max-width:100%;background:var(--rc);overflow:hidden}
.illus .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.illus .slide.on{opacity:1}
.illus svg{width:100%;height:100%;display:block}
.sdots{position:absolute;right:10px;bottom:8px;display:flex;gap:5px}
.sdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.sdots i.on{background:#fff}
.rbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.rbody h3{font:700 19px/1.2 var(--display);margin:0;letter-spacing:-.01em}
.rbody p{margin:0;color:var(--muted);font-size:15px}
.near{font-size:13px;font-weight:600;color:var(--rc)}
.versions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.vbtn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;background:var(--surface);border:2px solid var(--rc);border-radius:14px;padding:10px;color:var(--fg);font:inherit;cursor:pointer;min-width:0;transition:transform .15s}
.vbtn:hover:not(:disabled){transform:translateY(-2px)}
.vbtn b{font:700 14px var(--display);color:var(--rc)}
.vbtn span{font-size:12px;color:var(--muted);line-height:1.3}
.vbtn em{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--rc);border-radius:999px;padding:1px 7px;margin-top:3px}
.vbtn:disabled{border-color:var(--line);border-style:dashed;cursor:default}
.vbtn:disabled b{color:var(--muted)}

.note{font-size:13px;color:var(--muted);margin:0}

/* portada: selector de idioma */
.cover-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:relative}
.lang select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:7px 28px 7px 12px;font:600 13px var(--body);cursor:pointer}
.lang select option{color:#17212B}
.vbtn em.ok{background:#2E8B57}

/* cabecera con dibujo (presentación) */
.rhead{position:relative;border-radius:22px;overflow:hidden;min-height:190px;background:var(--rc);display:flex;flex-direction:column;justify-content:flex-end}
.rbanner{position:absolute;inset:0}
.rbanner svg{width:100%;height:100%;display:block}
.rhead::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.back{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.94);color:#17212B;border:0;border-radius:999px;font:700 14px var(--body);cursor:pointer;padding:8px 14px;min-height:40px}
.rhead-text{position:relative;z-index:1;padding:16px;color:#fff;display:flex;flex-direction:column;gap:2px}
.rtitle{font:700 22px/1.15 var(--display);margin:0}
#ov-sub{font-size:14px;opacity:.9}

/* presentación de la ruta */
.vtabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border-radius:16px;padding:5px;gap:4px;box-shadow:0 1px 0 var(--line)}
.vtabs button{border:0;background:transparent;border-radius:12px;padding:9px 6px;cursor:pointer;color:var(--fg);font:inherit;display:flex;flex-direction:column;align-items:center;gap:1px}
.vtabs button b{font:700 13px var(--display)}
.vtabs button span{font-size:12px;color:var(--muted)}
.vtabs button.on{background:var(--rc);color:#fff}
.vtabs button.on span{color:rgba(255,255,255,.85)}
.vtabs button:disabled{opacity:.45;cursor:default}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.stats div{background:var(--surface);border-radius:16px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 1px 0 var(--line)}
.stats b{font:700 17px var(--display);color:var(--rc);font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--muted)}
.ov-desc{margin:0;font-size:16px}
.notice{margin:0;background:#FFF4D6;color:#5C4400;border-radius:12px;padding:10px 12px;font-size:14px}
.ovmap{border-radius:22px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(23,33,43,.08)}
#ov-map{height:240px;background:#E6E2DA}
.ov-h{font:700 18px var(--display);margin:4px 0 0}
.stoplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.stoplist::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:3px;background:color-mix(in srgb,var(--rc) 30%,transparent);border-radius:3px}
.stoplist button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:8px 0;color:var(--fg);font:inherit;cursor:pointer;position:relative}
.stoplist .n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--rc);color:#fff;display:grid;place-items:center;font:700 15px var(--display);border:4px solid var(--bg)}
.stoplist .t{flex:1;min-width:0;display:flex;flex-direction:column}
.stoplist .t b{font-size:16px}
.stoplist .t small{font-size:13px;color:var(--muted)}
.stoplist .go{color:var(--muted);font-size:22px}
.ov-cta{position:sticky;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:5}
.btn.big{width:100%;min-height:56px;font-size:17px;border-radius:18px}
.btn.small{min-height:36px;padding:6px 14px;font-size:14px}

/* ruta: mapa a pantalla completa */
body.is-tour{overflow:hidden}
.tour{position:fixed;inset:0;z-index:10;background:#E6E2DA}
#map{position:absolute;inset:0}
.tbar{position:absolute;z-index:600;top:max(10px,env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:18px;padding:8px 12px 8px 8px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.iconbtn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:color-mix(in srgb,var(--rc) 14%,var(--surface));color:var(--fg);font-size:20px;cursor:pointer}
.tbar-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tbar-text strong{font:700 14px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:4px}
.dots i{height:5px;flex:1;border-radius:999px;background:var(--line)}
.dots i.on{background:var(--rc)}
.arrive{position:absolute;z-index:650;top:calc(max(10px,env(safe-area-inset-top,0px)) + 72px);left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--rc);color:#fff;border-radius:16px;padding:10px 12px;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.arrive .btn-light{color:var(--rc)}
.mapbtn{position:absolute;z-index:600;right:14px;bottom:calc(var(--sheet-vis,240px) + 14px);width:48px;height:48px;border-radius:50%;border:0;background:var(--surface);color:var(--fg);font-size:22px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:bottom .3s}
.gps{position:absolute;z-index:600;left:12px;bottom:calc(var(--sheet-vis,240px) + 20px);margin:0;font-size:12px;background:var(--surface);color:var(--muted);padding:4px 10px;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:bottom .3s;max-width:60%}
.stop-icon{display:grid;place-items:center;border-radius:50%;color:#fff;font:700 12px var(--display);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.stop-icon.active{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent),0 2px 6px rgba(0,0,0,.35)}
.stop-icon.done{opacity:.5}
.hotel-icon{display:grid;place-items:center;border-radius:8px;background:#17212B;color:#fff;font:700 12px var(--display);border:2px solid #fff}
.me-icon{width:18px;height:18px;border-radius:50%;background:#2F80ED;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,128,237,.25)}

/* tarjeta deslizable */
.sheet{position:absolute;z-index:700;left:0;right:0;bottom:0;height:88%;max-width:640px;margin:0 auto;background:var(--surface);border-radius:26px 26px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;will-change:transform}
.grab{flex:none;display:grid;place-items:center;padding:10px 0 6px;cursor:grab;touch-action:none}
.grab span{width:44px;height:5px;border-radius:999px;background:var(--line)}
.sheet-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 18px max(24px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.sheet[data-state="peek"] .sheet-scroll{overflow:hidden}
.stophead{display:flex;gap:12px;align-items:flex-start;touch-action:none;cursor:grab}
.snum{flex:none;width:44px;height:44px;border-radius:50%;background:var(--rc);color:#fff;display:grid;place-items:center;font:700 16px var(--display);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.stophead > div{min-width:0}
.stophead h3{font:700 18px/1.25 var(--display);margin:2px 0 0;letter-spacing:-.01em}
.where{font-size:13px;color:var(--muted)}

/* reproductor tipo app de música */
.player{display:flex;flex-direction:column;gap:6px}
.pbar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.pfill{height:100%;width:0;background:var(--rc);border-radius:999px;transition:width .25s linear}
.ptimes{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pctrl{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.round{width:48px;height:48px;border-radius:50%;border:0;background:color-mix(in srgb,var(--rc) 12%,var(--surface));color:var(--fg);font:700 18px var(--body);cursor:pointer;display:grid;place-items:center;position:relative;line-height:1}
.round small{position:absolute;font-size:9px;font-weight:700;bottom:9px}
#speed{font-size:14px}
.round:disabled{opacity:.35;cursor:default}
.playbig{width:72px;height:72px;border-radius:50%;border:0;background:var(--rc);color:#fff;font-size:26px;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--rc) 45%,transparent);display:grid;place-items:center}
.stopnav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stopnav .btn{min-height:44px;font-size:14px}
.transcript{font-size:17px;line-height:1.6;display:flex;flex-direction:column;gap:10px}
.transcript p{margin:0;padding:2px 0 2px 12px;border-left:3px solid var(--line);transition:border-color .2s,background .2s}
.transcript p.now{border-left-color:var(--rc);background:color-mix(in srgb,var(--rc) 10%,transparent);border-radius:0 8px 8px 0}
.next{background:color-mix(in srgb,var(--rc) 10%,var(--surface));border-radius:14px;padding:12px 14px;font-size:15px}

/* final de ruta */
.donehead{position:relative;overflow:hidden;background:var(--rc);color:#fff;border-radius:24px;padding:34px 20px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.donehead h1{font:800 26px/1.15 var(--display);margin:6px 0 0}
.donehead p{margin:0;opacity:.92}
.medal{width:84px;height:84px;border-radius:50%;background:#fff;color:var(--rc);display:grid;place-items:center;font:800 40px var(--display);box-shadow:0 0 0 8px rgba(255,255,255,.25);animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.confetti{position:absolute;inset:0;background-image:radial-gradient(circle,#F2B23A 2px,transparent 3px),radial-gradient(circle,#fff 2px,transparent 3px),radial-gradient(circle,#E8604C 2px,transparent 3px);background-size:46px 46px,62px 62px,38px 38px;background-position:0 0,20px 14px,8px 30px;opacity:.35}
.card-box{background:var(--surface);border-radius:20px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow:0 1px 0 var(--line)}
.card-box h2{font:700 17px var(--display);margin:0}
.stars{display:flex;gap:6px}
.stars button{border:0;background:none;font-size:36px;line-height:1;color:var(--line);cursor:pointer;padding:2px;transition:transform .15s,color .15s}
.stars button.on{color:#F2B23A}
.stars button:hover{transform:scale(1.15)}
a.btn{text-decoration:none}
.minicards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini{border:0;padding:0;background:var(--surface);border-radius:16px;overflow:hidden;text-align:left;cursor:pointer;color:var(--fg);font:inherit;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line)}
.mini-illus{display:block;aspect-ratio:2/1;background:var(--rc)}
.mini-illus svg{width:100%;height:100%;display:block}
.mini b{font:700 13px/1.25 var(--display);padding:10px}
.reco{border:2px dashed var(--accent);border-radius:14px;padding:12px 14px;font-size:15px}
.reco b{display:block}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* iconos */
button svg,a.btn svg,.near svg{width:1.15em;height:1.15em;flex:none;display:block}
.near{display:inline-flex;align-items:center;gap:4px}
.btn svg{width:20px;height:20px}
.round svg{width:24px;height:24px}
.playbig svg{width:32px;height:32px}
.playbig svg path{transform:translateX(1px)}
.iconbtn{display:grid;place-items:center}.iconbtn svg{width:22px;height:22px}
.mapbtn{display:grid;place-items:center}.mapbtn svg{width:24px;height:24px}
.medal svg{width:44px;height:44px}
.back{display:inline-flex;align-items:center;gap:2px}.back svg{width:18px;height:18px}
.stoplist .go svg{width:20px;height:20px}
/* cómo llegar al inicio y descarga */
.getthere{background:var(--surface);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 var(--line)}
.gt-text{display:flex;flex-direction:column}
.gt-text b{font:700 15px var(--display)}
.gt-text small{font-size:13px;color:var(--muted)}
.gt-btns{display:flex;gap:8px;flex-wrap:wrap}
.gt-btns .btn{flex:1;min-width:140px;text-decoration:none}
.btn.offline{background:var(--surface);color:var(--fg);border:2px dashed var(--rc);width:100%;min-height:50px}
.btn.offline.ok{border-style:solid;border-color:#2E8B57;color:#2E8B57;opacity:1}

/* entrada de pago (Park Güell) y acceso en transporte (Montserrat) */
.ticketbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:0 0 14px}
.ticketbox p{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:14.5px;color:var(--muted)}
.ticketbox p svg,.gt-acc svg,.tk svg{width:20px;height:20px;flex:none;color:var(--rc)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border-radius:12px;padding:4px}
.seg button{border:0;border-radius:9px;padding:10px 8px;font:600 14.5px var(--body);background:transparent;color:var(--fg);cursor:pointer}
.seg button.on{background:var(--rc);color:#fff}
.tk{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12px;font-weight:600;color:var(--rc);margin-top:2px}
.tk svg{width:15px;height:15px}
.gt-acc{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-size:14.5px}
.illus[disabled]{cursor:default;filter:grayscale(.35)}

/* historia del hotel */
.story{background:var(--surface);border-radius:24px;padding:20px 20px 18px;margin:18px 0 6px;box-shadow:0 2px 0 rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.35);border-left:6px solid var(--accent)}
.story .kicker{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.story h2{font:700 22px/1.2 var(--display);margin:4px 0 10px}
.story-text p{margin:0 0 10px;font-size:15.5px;line-height:1.6}
.story-text p.more{display:none}
.story.open .story-text p.more{display:block}
.story:not(.open) .story-text p:first-child{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.story-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.story .btn-main{background:var(--accent);color:var(--accent-ink)}

/* bienvenida larga en la portada */
.hwelcome{position:relative;max-width:52ch}
.hwelcome p{margin:0 0 10px;font-size:16px;line-height:1.55}
.hwelcome p.more{display:none}
.hwelcome.open p.more{display:block}
.hwelcome:not(.open) p:first-child:not(:last-child){display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.wbtns{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}

/* logo de imagen (sin caja blanca) y logotipo en texto */
.logo.img{background:transparent;box-shadow:none;border-radius:0;width:auto;height:72px}
.logo.img img{width:auto;height:72px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
#hname .wordmark{display:block;height:44px;width:auto;max-width:100%}
#hname .demo{display:inline-block;margin-top:4px;font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.2);border-radius:999px;padding:2px 8px}

/* fotos de las paradas */
.sphoto{margin:4px 0 14px;border-radius:18px;overflow:hidden;background:var(--line)}
.sphoto img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.sphoto figcaption{font-size:11px;color:var(--muted);padding:6px 10px;background:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sphoto figcaption a{color:inherit}
.stoplist .thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none;margin-left:8px;background:var(--line)}

/* fotos históricas de portada */
.illus img,.rbanner img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) contrast(1.05)}
.rbanner .credit{position:absolute;right:8px;top:8px;z-index:2;font-size:10px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:999px;text-decoration:none;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-illus img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25)}

/* portada: rutas en cuadrícula; el huésped elige 1, 2 o 3 por fila (de inicio, 2) */
.sechead .viewsel{margin-left:auto;display:flex;gap:4px;background:var(--surface);border-radius:12px;padding:3px;box-shadow:0 1px 0 var(--line)}
.viewsel button{border:0;background:transparent;width:34px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);cursor:pointer;padding:0}
.viewsel button.on{background:var(--accent);color:#fff}
.viewsel svg{width:18px;height:18px}
.cards.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cards.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cols-2 .rcard,.cols-3 .rcard{border-radius:16px;display:flex;flex-direction:column}
.cols-2 .illus,.cols-3 .illus{aspect-ratio:4/3}
.cols-2 .sdots,.cols-3 .sdots{right:7px;bottom:6px;gap:4px}
.cols-2 .sdots i,.cols-3 .sdots i{width:6px;height:6px}
.cols-2 .rbody{padding:10px 11px 12px;gap:4px;flex:1}
.cols-2 .rbody h3{font-size:14.5px;line-height:1.2}
.cols-2 .rbody p{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cols-2 .near{font-size:11.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cols-2 .near svg,.cols-3 .near svg{display:inline-block;vertical-align:-2px;margin-right:2px}
.cols-2 .versions,.cols-3 .versions{grid-template-columns:1fr;gap:5px;margin-top:auto;padding-top:6px}
.cols-2 .vbtn,.cols-3 .vbtn{position:relative;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px;border-width:1.5px;border-radius:10px}
.cols-2 .vbtn b{font-size:12.5px}
.cols-2 .vbtn span{font-size:11px;white-space:nowrap}
.cols-2 .vbtn em,.cols-3 .vbtn em{position:absolute;right:-4px;top:-7px;font-size:9.5px;padding:0 5px;margin:0}
.cols-3 .rbody{padding:7px 7px 9px;gap:3px;flex:1}
.cols-3 .rbody h3{font-size:12px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cols-3 .rbody p{display:none}
.cols-3 .near{font-size:10px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cols-3 .versions{gap:4px;padding-top:4px}
.cols-3 .vbtn{padding:4px 6px;gap:3px;border-radius:8px}
.cols-3 .vbtn b{font-size:10.5px}
.cols-3 .vbtn span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cols-3 .vbtn:disabled span{display:none}
#home .sechead{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:10px}
#home .sechead > div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ===== Diseño moderno (oct 2026) ===== */
/* Propuesta "moderno": más aire, tipografía limpia, fotos protagonistas, panot muy suave */
:root{--bg:#F4F1EC;--surface:#FFFFFF;--fg:#141414;--muted:#6B6B6B;--line:#E8E3DB;--ink:#141414;
  --display:"Figtree","Segoe UI",system-ui,sans-serif}
body{background:var(--bg);position:relative}
body::before{content:"";position:fixed;inset:0;background:var(--tile) 0 0/96px 96px;opacity:.28;pointer-events:none;z-index:-1}
.wrap{gap:22px}

/* cabecera del hotel */
.cover{border-radius:28px;padding:22px 20px 96px;background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 70%,#000) 0%,var(--accent) 100%);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--accent) 70%,#000)}
.skyline{opacity:.55;height:100px}
.brand h1{font:800 22px/1.1 var(--display);letter-spacing:-.02em}
.lang select{background-color:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)}
.hwelcome p{font-size:15px;line-height:1.6;opacity:.92}
.btn-light{box-shadow:none;background:#fff;color:var(--ink)}
.btn-ghost-light{border:1px solid rgba(255,255,255,.35)}

/* cabecera de sección */
#home .sechead h2{font:800 26px/1.1 var(--display);letter-spacing:-.025em}
#home .sechead span{font-size:13px}
.viewsel{box-shadow:none;background:#EAE5DD}
.viewsel button.on{background:var(--ink)}

/* tarjetas: foto grande redondeada, texto debajo sin caja */
.rcard{background:transparent;box-shadow:none;border-radius:0;position:relative;overflow:visible}
.cards .illus{border-radius:20px;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.cards.cols-2 .illus{aspect-ratio:4/5}
.cards.cols-3 .illus{aspect-ratio:3/4;border-radius:14px}
.cards.cols-1 .illus{aspect-ratio:16/10}
.cards .rbody{padding:10px 2px 0!important;gap:3px}
.cards .rbody h3{font:700 15px/1.25 var(--display)!important;letter-spacing:-.01em}
.cards.cols-1 .rbody h3{font-size:19px!important}
.cards .rbody p{font-size:12.5px}
.cards .near{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);color:var(--ink)!important;
  font-size:11px!important;font-weight:700;padding:4px 9px;border-radius:999px;-webkit-line-clamp:1!important;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important}
.cards .near svg{color:var(--rc)}
.cards.cols-3 .near{top:6px;left:6px;font-size:9.5px!important;padding:3px 7px}
.cards .vbtn{border:0!important;background:#fff;border-radius:999px!important;justify-content:flex-start!important;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cards .vbtn span{margin-left:auto}
.cards .vbtn b{color:var(--ink)!important;font-weight:700}
.cards .vbtn span{color:var(--muted)}
.cards .vbtn:disabled{background:transparent;outline:1px dashed #CFC8BC}
.cards .vbtn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rc);flex:none}
.cards.cols-1 .vbtn{flex-direction:row;align-items:center;gap:8px}
.cards .vbtn:disabled::before{background:#CFC8BC}
.sdots i{box-shadow:none}

/* presentación de la ruta: foto a sangre */
#overview.wrap{padding-top:0}
.rhead{margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-radius:0 0 28px 28px;min-height:330px}
.rhead::after{inset:30% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.back{top:max(14px,env(safe-area-inset-top,0px));background:rgba(255,255,255,.85);backdrop-filter:blur(10px)}
.rtitle{font:800 28px/1.05 var(--display);letter-spacing:-.025em}
.rhead-text{padding:20px 20px 24px}
.vtabs{background:#EAE5DD;box-shadow:none;border-radius:999px;padding:4px}
.vtabs button{border-radius:999px;padding:7px 4px}
.vtabs button b{font:700 13px var(--display)}
.vtabs button.on{background:var(--ink)}
.stats{grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border-radius:20px;padding:12px 4px}
.stats div{background:transparent;box-shadow:none;padding:2px 4px;border-right:1px solid var(--line);border-radius:0}
.stats div:last-child{border-right:0}
.stats b{font:800 17px var(--display);color:var(--ink)}
.ov-desc{font-size:15.5px;line-height:1.6;color:#333}
.getthere,.ticketbox{border:0;box-shadow:none;border-radius:20px}
.ovmap{border-radius:20px;box-shadow:none}
.ov-h{font:800 20px var(--display);letter-spacing:-.02em}
.stoplist::before{width:2px;left:21px;background:#DDD6CB}
.stoplist .n{background:var(--ink);font:700 14px var(--display);border-color:var(--bg)}
.stoplist .thumb{border-radius:14px;width:58px;height:58px}
.btn-main{box-shadow:none}
.ov-cta .btn-main{background:var(--ink);border-radius:999px}

@media (prefers-color-scheme: dark) and (min-width:100000px){:root{--bg:#15191D;--surface:#1F252B;--fg:#ECEFF2;--muted:#9AA4AD;--line:#2C343C;--ink:#ECEFF2}
  .viewsel,.vtabs{background:#252C33}
  .viewsel button.on,.vtabs button.on,.stoplist .n,.ov-cta .btn-main{background:#ECEFF2;color:#15191D}
  .cards .vbtn{background:#1F252B}
  .cards .near{background:rgba(20,24,28,.82);color:#ECEFF2!important}
  .ov-desc{color:#D5DBE0}
  .stoplist::before{background:#2C343C}}

/* ===== Color (oct 2026): arena cálida, botones con el color del hotel, fotos en duotono con el color de cada ruta ===== */
:root{--bg:#F7EEDF;--line:#EADBC4;--ink:var(--accent)}
body::before{opacity:.45}
.viewsel,.vtabs{background:#EFE1CB}
.cards .vbtn{background:#FFFBF4}
.viewsel button.on,.vtabs button.on,.stoplist .n,.ov-cta .btn-main{background:var(--accent);color:var(--accent-ink)}
#home .sechead h2,.cards .rbody h3{color:#2A1E14}
.cards .vbtn b{color:var(--rc)!important}
/* duotono: la foto en blanco y negro se funde con el color de la ruta */
.illus .slide,.mini-illus,.rbanner{background:var(--rc)}
.illus img,.mini-illus img,.rbanner img{filter:grayscale(1) contrast(1.15) brightness(1.05)!important;mix-blend-mode:multiply;opacity:.95}
.illus .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 35%,transparent),transparent 60%);mix-blend-mode:screen;pointer-events:none}
.mini-illus{position:relative;overflow:hidden}
@media (prefers-color-scheme: dark) and (min-width:100000px){:root{--bg:#1A1714;--line:#332C25}
  .viewsel,.vtabs{background:#2A241E}
  .cards .vbtn{background:#231E19}
  #home .sechead h2,.cards .rbody h3{color:#F3EBDD}
  .viewsel button.on,.vtabs button.on,.stoplist .n,.ov-cta .btn-main{background:var(--accent);color:#fff}}
/* insignia "Continuar" dentro del botón (no encima) */
.cards .vbtn em{position:static!important;margin:0 0 0 auto!important;font-size:10px!important;padding:1px 7px!important;background:var(--rc)!important}
.cards .vbtn:has(em) span{display:none}

/* ===== Tarjetas del color de la ruta (tono intermedio), fotos al natural ===== */
/* E: foto al natural y tarjeta en tono pastel del color de la ruta */
.illus .slide,.mini-illus,.rbanner{background:#222}
.illus img,.mini-illus img,.rbanner img{filter:sepia(.2) contrast(1.05)!important;mix-blend-mode:normal!important;opacity:1!important}
.illus .slide::after{display:none}
.cards .rcard{--soft:color-mix(in srgb,var(--rc) 55%,#FFF4E6);--deep:color-mix(in srgb,var(--rc) 55%,#000);
  background:var(--soft)!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 10px 24px -18px color-mix(in srgb,var(--rc) 60%,#000)!important;padding:6px}
.cards.cols-3 .rcard{border-radius:16px!important;padding:4px}
.cards .illus{border-radius:17px!important;box-shadow:none!important}
.cards.cols-3 .illus{border-radius:12px!important}
.cards .rbody{padding:10px 6px 6px!important}
.cards.cols-3 .rbody{padding:6px 3px 3px!important}
.cards .rbody h3,#home .cards .rbody h3{color:var(--deep)!important}
.cards .rbody p{color:color-mix(in srgb,var(--rc) 50%,#2E241C)!important}
.cards .vbtn{background:rgba(255,255,255,.55)!important;box-shadow:none!important}
.cards .vbtn b{color:var(--deep)!important}
.cards .vbtn span{color:color-mix(in srgb,var(--rc) 40%,#5A5048)!important}
.cards .vbtn::before{background:var(--rc)!important}
.cards .vbtn:disabled{background:transparent!important;outline:1px dashed color-mix(in srgb,var(--rc) 35%,transparent)!important}
.cards .vbtn:disabled b,.cards .vbtn:disabled span{opacity:.6}
.cards .vbtn em{background:var(--rc)!important;color:#fff!important}

/* ===== Funciones nuevas (oct 2026) ===== */
.svisit{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--rc) 12%,#fff);border-radius:16px;padding:10px 12px;margin:0 0 12px}
.svisit svg{width:22px;height:22px;flex:none;color:var(--rc)}
.svisit span{flex:1;min-width:0;display:flex;flex-direction:column}
.svisit b{font-size:14px}.svisit small{font-size:12px;color:var(--muted)}
.svisit .btn{flex:none;white-space:nowrap}
.svisit{flex-wrap:wrap}
.svisit .buy{flex-basis:100%;display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--rc) 20%,transparent)}
.svisit .buy .btn{width:100%;text-align:center;justify-content:center;background:var(--accent,#7A5536);color:#fff}
.svisit .buy small{text-align:center;font-size:11.5px}
.info-card.tickets .irow span{white-space:nowrap}
.info-card.tickets .sub{margin:-2px 0 6px;font-size:13px;color:var(--muted)}
.autoplay{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:var(--surface);border-radius:14px;padding:10px 12px;margin:4px 0 12px;font:600 14px var(--body);color:var(--fg);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.autoplay i{flex:none;width:42px;height:24px;border-radius:999px;background:#CFC6B8;position:relative;transition:background .2s}
.autoplay i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.autoplay.on i{background:var(--rc)}.autoplay.on i::after{transform:translateX(18px)}
.poi{position:absolute;z-index:660;left:12px;right:12px;top:calc(max(10px,env(safe-area-inset-top,0px)) + 72px);display:flex;gap:12px;align-items:flex-start;background:var(--accent);color:#fff;border-radius:18px;padding:12px 40px 12px 12px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.poi .poi-emoji{font-size:26px;line-height:1}
.poi small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.poi b{display:block;font-size:16px}.poi p{margin:2px 0 8px;font-size:13.5px;opacity:.92}
.poi .btn-light{color:var(--accent)}
.poi-x{position:absolute;top:6px;right:8px;border:0;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:4px}
.poi-icon{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid var(--accent)}
.ov-pois{display:flex;flex-direction:column;gap:8px}
.poi-row{display:flex;gap:12px;align-items:center;text-align:left;background:var(--surface);border:0;border-radius:16px;padding:10px 12px;font:inherit;color:var(--fg);cursor:pointer}
.poi-row .poi-emoji{font-size:22px}
.poi-row span:last-child{display:flex;flex-direction:column}.poi-row b{font-size:15px}.poi-row small{font-size:12.5px;color:var(--muted)}
.access{display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:16px;padding:10px 14px}
.access span:last-child{display:flex;flex-direction:column}.access b{font-size:14px}.access small{font-size:12.5px;color:var(--muted)}
.acc-dot{width:12px;height:12px;border-radius:50%;flex:none}
.acc-llano{background:#2E8B57}.acc-cuestas{background:#D9A520}.acc-escaleras{background:#C0502E}
.stoplist .vi{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12px;font-weight:600;color:var(--rc);margin-top:2px}
.stoplist .vi svg{width:15px;height:15px}
.legal-link{text-align:center;margin:0;font-size:12.5px}.legal-link a{color:var(--muted)}

.rate-free{margin:-4px 0 6px;font-size:14px;color:var(--muted);text-align:center;line-height:1.45}

/* foto de portada del hotel */
.cover.has-photo{background:var(--accent);padding-bottom:28px}
.cover.has-photo::after{content:"";position:absolute;left:0;right:0;top:0;height:340px;background:var(--cover-img) var(--cover-pos,center)/cover no-repeat;z-index:0}
.cover.has-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:342px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.1) 140px,rgba(0,0,0,0) 210px,color-mix(in srgb,var(--accent) 60%,transparent) 280px,var(--accent) 340px)}
.cover.has-photo > *{position:relative;z-index:2}
.cover.has-photo .hwelcome{margin-top:150px}
.cover.has-photo .skyline{display:none}

/* ===== Pestañas: El hotel y Barcelona útil ===== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px max(10px,env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.tabbar button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;font:600 12px var(--body);color:#8A7F74;cursor:pointer;padding:4px 0}
.tabbar button svg{width:24px;height:24px}
.tabbar button.on{color:var(--accent)}
body.has-tabbar .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.has-tabbar .ov-cta{display:none}
.tabpage{gap:12px}
.tp-title{font:800 28px/1.1 var(--display);letter-spacing:-.025em;margin:8px 0 0}
.tp-sub{margin:-4px 0 4px;color:var(--muted);font-size:14px}
.demo-note{margin:0;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#C0392B}
#hi-body,#bcn-body{display:flex;flex-direction:column;gap:12px}
.wifi-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--accent);color:#fff;border-radius:20px;padding:14px 16px}
.wifi-card small{display:block;opacity:.8;font-size:12px}.wifi-card b{font-size:18px;word-break:break-all}
.wifi-card .btn-light{color:var(--accent)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{background:var(--surface);border-radius:18px;padding:14px;text-align:center;font-weight:700;font-size:14px;color:var(--accent);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.act span{font-size:22px}
.info-card{background:var(--surface);border-radius:20px;padding:14px 16px}
.info-card h3{margin:0 0 6px;font:700 15px var(--display)}
.info-card p{margin:0;font-size:14.5px}
.irow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #F0E6D6;font-size:14.5px;color:var(--fg);text-decoration:none}
.irow:last-child{border-bottom:0}.irow span{color:var(--muted);text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{background:#F3E8D6;border-radius:999px;padding:5px 11px;font-size:13.5px}
.info-photo{height:170px;border-radius:20px;background-size:cover;background-repeat:no-repeat}
.sos{display:flex;justify-content:space-between;align-items:center;background:#C0392B;color:#fff;border-radius:20px;padding:14px 16px;text-decoration:none}
.sos b{display:block;font-size:16px}.sos small{opacity:.88;font-size:13px}.sos span{font-size:30px;font-weight:800}
.tipcard{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:18px;padding:12px 14px;font-size:14.5px}
.tipcard > span{font-size:22px;line-height:1.1}.tipcard b{display:block}

/* ---------- tiempo, volver al hotel, servicios en el mapa, sin conexión ---------- */
.wx{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:20px;padding:12px 16px;margin:14px 0 0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.wx-i{font-size:32px;line-height:1;flex:none}
.wx small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.wx b{display:block;font-size:17px;letter-spacing:-.01em}
.wx p{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--fg)}
.offline-hint{margin:6px 2px 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.4}
a.iconbtn{display:grid;place-items:center;color:var(--fg);text-decoration:none}
.mapbtn.amenbtn{bottom:calc(var(--sheet-vis,240px) + 72px)}
.mapbtn.amenbtn.on{background:var(--accent);color:#fff}
.mapbtn.amenbtn.busy{opacity:.6}
.amen-icon{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.3);border:2px solid #2F80ED}
.acts.three{grid-template-columns:1fr 1fr}
.acts.three .act:last-child{grid-column:1/-1;flex-direction:row;justify-content:center;gap:8px}
#d-hotel{width:100%;margin-bottom:10px}
/* Barcelona en Navidad */
.xmas-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;background:#BC6075;color:#fff;border-radius:20px;padding:14px 16px;font:inherit;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.xmas-btn>span{font-size:28px;line-height:1}
.xmas-btn div{flex:1;display:flex;flex-direction:column}
.xmas-btn b{font:700 16px var(--display)}
.xmas-btn small{font-size:13px;opacity:.9}
.xmas-btn i{font-style:normal;font-size:26px;line-height:1}
.xback{display:block;text-align:left;align-self:flex-start;background:none;border:0;padding:6px 0;margin:0 0 4px;color:#BC6075;font:700 15px var(--body);cursor:pointer}
#xmas-body{display:flex;flex-direction:column;gap:12px}
.xm>b{display:block;font:700 16px var(--display);color:#BC6075}
.xm>p{margin:3px 0 4px!important;font-size:14px!important}
.xm .irow{padding:6px 0;font-size:13.5px}
.xm .irow span{max-width:62%}
.xm-acts{display:flex;gap:8px;margin-top:10px}
.xm-acts a{flex:1;text-align:center;text-decoration:none;padding:9px 10px;border-radius:12px;border:2px solid #BC6075;color:#BC6075;font-weight:700;font-size:14px;background:var(--surface)}
.xm-note{margin:4px 2px 0;font-size:12.5px;color:var(--muted)}
.xm-h{margin:10px 2px 0;font:700 18px var(--display);color:#BC6075}
/* Qué comer */
.food-btn{background:#fff;color:var(--fg);border:2px solid #BC6075}
.food-btn small{color:var(--muted);opacity:1}
.food-btn i{color:#BC6075}
.dishes{display:flex;flex-direction:column}
.dish{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #F0E6D6}
.dish:last-child{border-bottom:0}
.dish>span{font-size:26px;line-height:1.1;flex:none;width:30px;text-align:center}
.dish b{font:700 15px var(--display)}
.dish p{margin:2px 0 0!important;font-size:14px!important;color:var(--fg)}
#food-body{display:flex;flex-direction:column;gap:12px}
.wx-rain{display:inline-block;margin-top:6px;font-weight:700;font-size:14px;color:#BC6075;text-decoration:none}

/* =====================================================================
   DISEÑO B (oct 2026): editorial. Fondo crema, títulos con serifa,
   color vino para acciones, barra de pestañas oscura flotante.
   ===================================================================== */
:root{--bg:#F6F1E9;--surface:#FFFFFF;--fg:#1F1A17;--ink:#1F1A17;--muted:#6B6058;--line:#E7DED2;
  --wine:#AD5269;--wine-d:#93445A;--soft:#F4E7EA;
  --serif:"Source Serif 4","Charter","Bitstream Charter",Georgia,serif;
  --display:var(--serif)}
body{background:var(--bg)}
body::before{display:none}
.wrap{gap:16px}
h1,h2,h3{font-family:var(--serif)}
.btn{border-radius:16px}
.btn-main{background:var(--wine)!important;color:#fff!important;box-shadow:none}
.btn-soft{background:var(--soft);color:var(--wine-d)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--fg)}
.note{color:var(--muted)}

/* --- portada --- */
.topbar{display:flex;align-items:center;gap:10px;padding-top:6px}
.tb-brand{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.topbar .logo{width:34px;height:34px;border-radius:10px;background:var(--wine);color:#fff;font:700 16px var(--serif);box-shadow:none;flex:none}
.topbar .logo.img{background:transparent;width:auto;height:36px}
.topbar .logo.img img{height:36px;width:auto;filter:none}
#hname{font:600 13px var(--body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hname .demo{display:inline-block;margin-left:6px;font:700 10px var(--body);letter-spacing:.08em;background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;vertical-align:2px}
.topbar .lang select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231F1A17' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--fg);border:1.5px solid var(--line);backdrop-filter:none}
.hero2{margin-top:4px}
.hero-t{font:700 40px/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 8px}
.hero-t span,.hero-t em{display:block}
.hero-t em{font-style:italic;color:var(--wine)}
.hero-l{margin:0;color:var(--muted);font-size:15px}
#home .wx{display:inline-flex;align-self:flex-start;margin:0;border-radius:18px;padding:8px 14px 8px 10px;gap:10px}
#home .wx .wx-i{font-size:24px}
#home .wx small{display:none}
#home .wx b{font-size:14.5px}
#home .wx p{font-size:13px;color:var(--muted)}
.wcard{background:#fff;border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.wc-top{display:flex;gap:12px;align-items:center}
.wc-ico{width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:20px;flex:none}
.wc-top small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wine-d);font-weight:700}
.wc-top b{font:700 17px var(--serif)}
.wcard .hwelcome{max-width:none}
.wcard .hwelcome p{font-size:14.5px;line-height:1.55;color:#3d3530;opacity:1}
.wcard .hwelcome:not(.open) p:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wcard .wbtns{gap:8px}
.wcard .btn.small{min-height:40px;border-radius:12px}
.story{border-left:0;border-radius:22px;box-shadow:none;margin:0}
.story .kicker{color:var(--wine-d)}
.story .btn-main{background:var(--wine)}
.chips2{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:2px -16px 0;padding:0 16px}
.chips2::-webkit-scrollbar{display:none}
.chips2 button{flex:none;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;font:600 14px var(--body);color:var(--fg);cursor:pointer;white-space:nowrap}
.chips2 button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.feat{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 8px 24px rgba(60,40,20,.08)}
.feat .illus{aspect-ratio:16/10;border-radius:0;background:var(--wine);display:block;position:relative}
.feat .illus::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(20,10,10,.7));pointer-events:none}
.feat .illus img{filter:sepia(.15) contrast(1.05)!important;mix-blend-mode:normal!important;opacity:1!important}
.feat .badge{position:absolute;z-index:2;top:14px;left:14px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.95);border-radius:999px;padding:6px 12px;font:600 13px var(--body);color:var(--fg);max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat .badge svg{width:15px;height:15px;color:var(--wine)}
.feat .ft{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;text-align:left;display:flex;flex-direction:column}
.feat .ft small{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.feat .ft b{font:700 27px/1.08 var(--serif);margin-top:3px}
.fbody{padding:14px 18px 18px}
.fbody p{margin:0 0 14px;color:var(--muted);font-size:14px}
.frow{display:flex;gap:10px}
.frow .btn{flex:1;min-height:50px}
.frow .btn svg{width:18px;height:18px}
.sec2 h2{font:700 22px var(--serif);margin:10px 0 0}
.rlist{display:flex;flex-direction:column}
.li{display:flex;gap:14px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;text-align:left;font:inherit;color:var(--fg);cursor:pointer}
.li:disabled{opacity:.55;cursor:default}
.li .th{width:76px;height:76px;border-radius:18px;overflow:hidden;flex:none;background:var(--wine);position:relative;aspect-ratio:auto;box-shadow:none!important}
.li .th .slide{position:absolute;inset:0;opacity:0}.li .th .slide.on{opacity:1}
.li .th svg,.li .th img{width:100%;height:100%;object-fit:cover;display:block}
.li .th img{filter:sepia(.15)!important;mix-blend-mode:normal!important;opacity:1!important}
.li .lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.li .lt b{font:700 17px/1.2 var(--serif)}
.li .lt small{font-size:13px;color:var(--muted)}
.li i{font-style:normal;color:var(--muted);font-size:22px}
.li em{font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:var(--wine);border-radius:999px;padding:3px 9px}
.li em.ok{background:#2E8B57}

/* --- presentación de la ruta --- */
.rhead{min-height:330px;border-radius:0}
.rhead::after{inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,var(--bg))}
.back{border-radius:999px;background:rgba(255,255,255,.95)!important;color:var(--fg)}
.rhead-text{color:var(--fg);padding:0 20px 2px;margin-bottom:-6px}
.rtitle{font:700 32px/1.05 var(--serif);letter-spacing:-.01em;color:var(--fg)}
#ov-sub{color:var(--muted);opacity:1;font-size:15px}
.vtabs{background:#EDE5DA!important;border-radius:16px;padding:4px}
.vtabs button{border-radius:12px;padding:8px 4px;color:var(--muted)}
.vtabs button b{font:600 14px var(--body);color:var(--muted)}
.vtabs button span{color:var(--fg);font-weight:700;font-size:14px}
.vtabs button.on{background:#fff!important;color:var(--fg)!important;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.vtabs button.on b{color:var(--muted)}.vtabs button.on span{color:var(--fg)}
.stats{background:transparent!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0!important;padding:12px 0!important}
.stats div{border-right:0!important}
.stats b{font:700 21px var(--serif)!important;color:var(--fg)!important}
.stats span{font-size:12px}
.ov-h{font:700 22px var(--serif)}
.stoplist::before{width:2px;left:21px;background:repeating-linear-gradient(var(--wine) 0 6px,transparent 6px 11px)!important;opacity:.5}
.stoplist .n{width:40px;height:40px;background:#fff!important;color:var(--wine-d)!important;border:2px solid var(--wine)!important;font:700 15px var(--serif)!important;margin-left:2px}
.stoplist li:first-child .n{background:var(--wine)!important;color:#fff!important}
.stoplist .t b{font:700 16px/1.25 var(--serif)}
.ov-cta .btn-main,.btn.big{border-radius:18px!important}
.getthere,.ticketbox,.access,.poi-row{border-radius:20px}
.gt-text b{font:700 16px var(--serif)}

/* --- ruta en marcha --- */
.tbar{border-radius:999px;padding:6px 14px 6px 6px}
.tbar-text strong{font:700 14px var(--serif)}
.dots i.on{background:var(--wine)}
.sheet{background:var(--bg);border-radius:30px 30px 0 0}
.grab span{background:#D9CFC2}
.snum{background:var(--wine);font:700 16px var(--serif);box-shadow:none}
.where{font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--wine-d)}
.stophead h3{font:700 22px/1.15 var(--serif)}
.pbar{height:4px;background:#E2D8CB}
.pfill{background:var(--wine)}
.round{background:#EDE5DA;color:var(--fg)}
.playbig{background:var(--wine);box-shadow:0 8px 20px rgba(188,96,117,.4)}
.transcript{font:400 17px/1.6 var(--serif)}
.transcript p{border-left:0;padding:0;color:#7A6F66}
.transcript p.now{color:var(--fg);background:linear-gradient(transparent 62%,#F4DDE3 62%);border-radius:0}
.next{background:#fff;border-radius:16px}
.autoplay{border-radius:16px}
.autoplay.on i{background:var(--wine)}
.arrive{background:var(--wine);border-radius:18px}
.arrive .btn-light{color:var(--wine)}

/* --- final de ruta --- */
#done.wrap{padding-top:0}
.donehead{margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-radius:0 0 34px 34px;background:linear-gradient(160deg,#C66C80,#8E3A50);padding:64px 24px 44px}
.donehead h1{font:700 32px/1.1 var(--serif)}
.medal{color:var(--wine);font:700 40px var(--serif)}
.confetti{opacity:.2}
#d-stats{background:#fff!important;border:0;border-radius:20px!important;margin:-40px 6px 0;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.07);padding:14px 0!important}
.card-box{border-radius:22px;box-shadow:none}
.card-box h2{font:700 19px var(--serif)}
.stars button.on{color:#E9A93A}
.mini{border-radius:20px;box-shadow:none}
.mini b{font:700 15px/1.2 var(--serif)}
.mini-illus{aspect-ratio:16/10}
.mini-illus img{filter:sepia(.15)!important;mix-blend-mode:normal!important;opacity:1!important}
.reco{border-color:var(--wine)}

/* --- pestaña El hotel --- */
#hotelinfo.wrap{padding-top:0}
.hh2{position:relative;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));min-height:250px;padding:0 20px 22px;display:flex;align-items:flex-end;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,#000),var(--accent));border-radius:0 0 30px 30px;overflow:hidden}
.hh2.has-photo{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 35%,rgba(0,0,0,.65)),var(--hi-img) var(--hi-pos,center)/cover no-repeat}
.hh2 > div{position:relative;z-index:1}
.hh2 small{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.hh2 h1{font:700 32px/1.05 var(--serif);margin:4px 0}
.hh2 p{margin:0;font-size:14px;opacity:.9}
.hh-logo{position:absolute;right:18px;top:max(48px,calc(env(safe-area-inset-top,0px) + 30px))}
.hh-logo img{height:64px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.hh2 .demo-note{display:inline-block;margin-top:8px;background:#fff;color:#C0392B;border-radius:999px;padding:2px 9px}
.wifi-card{background:var(--ink)!important;border-radius:22px;padding:16px 18px}
.wifi-card small{color:#bfb6ad;opacity:1}
.wifi-card .btn{background:var(--wine);color:#fff;border-radius:12px;min-height:40px}
.two{display:flex;gap:10px}.two .btn{flex:1;min-height:52px}
.card{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:0;border-radius:20px;padding:14px 16px;text-decoration:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.card .e{width:44px;height:44px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:22px;flex:none}
.card div{flex:1;min-width:0}.card b{display:block;font-size:15px}.card div span{font-size:13px;color:var(--muted)}
.card i{font-style:normal;color:var(--muted);font-size:20px}
.lab{font:700 21px var(--serif);margin:10px 0 0}
.list{background:#fff;border-radius:20px;padding:4px 16px}
.list div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.list div:last-child{border:0}.list span{color:var(--muted);text-align:right}
.chips span{background:#fff}

/* --- Barcelona útil --- */
.tp-title{font:700 36px/1.05 var(--serif);letter-spacing:-.01em}
.sos{border-radius:20px}
.season{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;cursor:pointer;text-align:left;border-radius:24px;padding:18px 96px 18px 18px;color:#fff;font:inherit;
  background:linear-gradient(135deg,var(--hc),color-mix(in srgb,var(--hc) 70%,#000));overflow:hidden}
.season small{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.season b{font:700 24px/1.1 var(--serif);margin:4px 0 2px}
.season .s{font-size:14px;opacity:.92}
.season .em{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:60px;line-height:1}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:112px;background:#fff;border:0;border-radius:22px;padding:14px 16px;text-align:left;font:inherit;color:var(--fg);cursor:pointer}
.tile .e{font-size:26px;line-height:1}
.tile b{display:block;font:700 17px/1.15 var(--serif)}
.tile small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile.dark{background:var(--ink);color:#fff}.tile.dark small{color:#bfb6ad}
.info-card{border-radius:22px;scroll-margin-top:16px}
.info-card h3{font:700 17px var(--serif)}
.tipcard{border-radius:20px}
.tipcard b{font-family:var(--body)}

/* --- páginas con cabecera de color (temporadas, comida, lluvia) --- */
#fiesta.wrap,#food.wrap{padding-top:0}
.pgh{position:relative;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:calc(max(16px,env(safe-area-inset-top,0px)) + 64px) 20px 24px;border-radius:0 0 30px 30px;color:#fff;
  background:linear-gradient(150deg,var(--hc,#BC6075),color-mix(in srgb,var(--hc,#BC6075) 65%,#000))}
#food-head{--hc:#C9784C}
.pgh small{display:block;font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.88;min-height:1em}
.pgh h1{font:700 32px/1.05 var(--serif);margin:4px 0}
.pgh p{margin:0;font-size:14px;opacity:.9}
.bk{position:absolute;top:max(14px,env(safe-area-inset-top,0px));left:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--fg);font:700 22px var(--body);cursor:pointer;display:grid;place-items:center;line-height:1}
.tabs2{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:2px -16px 0;padding:0 16px}
.tabs2::-webkit-scrollbar{display:none}
.tabs2 button{flex:none;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;font:600 14px var(--body);color:var(--fg);cursor:pointer;white-space:nowrap}
.tabs2 button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
#fiesta-body,#food-body{display:flex;flex-direction:column;gap:12px}
.ev{background:#fff;border-radius:22px;padding:16px}
.ev h3{font:700 19px/1.2 var(--serif);margin:0 0 4px}
.ev p{margin:0;font-size:14px;color:var(--muted)}
.ev .r{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:13.5px}
.ev .a{display:flex;gap:8px;margin-top:12px}
.ev .a a{flex:1;text-align:center;padding:10px 0;border-radius:12px;background:var(--soft);color:var(--wine-d);font-weight:700;font-size:14px;text-decoration:none}
.dish{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.dish .c{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:28px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.dish b{font:700 17px var(--serif)}
.dish p{margin:2px 0 0!important;font-size:14px!important;color:var(--muted)!important}
.xm-note{color:var(--muted)}

/* --- barra de pestañas: oscura y flotante --- */
.tabbar{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;
  background:var(--ink);border:0;border-radius:22px;padding:8px 6px;box-shadow:0 10px 30px rgba(0,0,0,.25);backdrop-filter:none}
.tabbar button{color:#BFB6AD;position:relative}
.tabbar button.on{color:#fff}
.tabbar button.on::after{content:"";position:absolute;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--wine)}
.tabbar button svg circle[fill="#fff"]{fill:var(--ink)}
body.has-tabbar .wrap{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.legal-link{margin-top:6px}
/* bienvenida del hotel: tarjeta grande con la foto del hotel */
.wcard{padding:0;overflow:hidden;border-radius:28px;gap:0;box-shadow:0 8px 24px rgba(60,40,20,.08)}
.wc-photo{padding:18px 18px 4px}
.wc-photo.has-photo{min-height:220px;display:flex;align-items:flex-end;padding:18px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(20,10,10,.72)),var(--wc-img) var(--wc-pos,center)/cover no-repeat,var(--accent)}
.wc-photo.has-photo .wc-top small{color:#fff;opacity:.9}
.wc-photo.has-photo .wc-top b{color:#fff;font-size:26px;line-height:1.1}
.wc-photo.has-photo .wc-ico{background:rgba(255,255,255,.92)}
.wc-top b{font:700 22px/1.15 var(--serif)}
.wcard .hwelcome{padding:16px 18px 0}
.wcard .hwelcome p{font-size:16px;line-height:1.6;color:#3d3530}
.wcard .hwelcome:not(.open) p:first-child{-webkit-line-clamp:5}
.wcard .wbtns{padding:14px 18px 18px;gap:10px}
.wcard .wbtns .btn{flex:1;min-height:50px;font-size:15px;border-radius:16px}
.wcard .wbtns .btn{white-space:nowrap}
.wcard #btn-welcome{flex:1.5}
.hero-k{display:inline-flex;align-items:center;gap:6px;background:var(--wine);color:#fff;border-radius:999px;padding:6px 14px;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.hero-l{font-size:16px;color:#5f554d}
/* ===== Portada: tarjetas grandes (opción C) y títulos en letra moderna ===== */
:root{--serif:"Figtree","Segoe UI",system-ui,sans-serif}
h1,h2,h3,.hero-t,.tp-title,.rtitle,.pgh h1,.hh2 h1,.lab,.sec2 h2,.ov-h{letter-spacing:-.025em;font-weight:800!important}
.hero-t{font-size:38px;line-height:1.04}
.hero-t em{font-style:normal}
.sec2 h2{font-size:24px;margin:8px 0 0}
.bigcards{display:flex;flex-direction:column;gap:14px}
.bc{position:relative;height:250px;border-radius:28px;overflow:hidden;background:var(--wine);box-shadow:0 10px 24px -12px rgba(40,20,10,.35)}
.bc .illus{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:transparent;box-shadow:none!important}
.bc .illus .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s}.bc .illus .slide.on{opacity:1}
.bc .illus svg,.bc .illus img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc .illus img{filter:sepia(.12) contrast(1.05)!important;mix-blend-mode:normal!important;opacity:1!important}
.bc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0,rgba(0,0,0,0) 30%,rgba(10,5,5,.82));pointer-events:none}
.bc .badge{position:absolute;z-index:2;top:14px;left:14px;display:inline-flex;align-items:center;gap:5px;background:var(--wine);color:#fff;border-radius:999px;padding:5px 11px;font:700 12.5px var(--body);max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.bc .badge svg{width:14px;height:14px}
.bc .bt{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;color:#fff;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.bc .bt > b{font:800 23px/1.1 var(--body);letter-spacing:-.025em}
.bc .bt > span{font-size:13px;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;pointer-events:auto}
.vc{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:6px 11px;font:500 12.5px var(--body);cursor:pointer;white-space:nowrap}
.vc b{font-weight:700}
.vc:first-child{background:#fff;color:var(--fg);border-color:#fff}
.vc.off{opacity:.55;cursor:default}
.vc em{font-style:normal;background:var(--wine);color:#fff;border-radius:999px;padding:1px 7px;margin-left:4px;font-size:11px;font-weight:700}
.vcs{flex-wrap:nowrap}.vc{font-size:12px;padding:6px 10px}
/* ===== Portada: cuadrícula de 2 columnas (opción 1) ===== */
.gridcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gridcards > .note{grid-column:1/-1}
.gc{position:relative;aspect-ratio:3/4;border:0;padding:0;border-radius:22px;overflow:hidden;background:var(--wine);cursor:pointer;text-align:left;font:inherit;color:#fff;box-shadow:0 8px 20px -12px rgba(40,20,10,.4)}
.gc:disabled{cursor:default;filter:grayscale(.4)}
.gc .illus{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:transparent;box-shadow:none!important}
.gc .illus .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s}.gc .illus .slide.on{opacity:1}
.gc .illus svg,.gc .illus img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gc .illus img{filter:sepia(.12) contrast(1.05)!important;mix-blend-mode:normal!important;opacity:1!important}
.gc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(12,6,6,.8));pointer-events:none}
.gc .tg{position:absolute;z-index:2;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.94);color:var(--fg);border-radius:999px;padding:4px 9px;font:700 11.5px var(--body);max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc .tg svg{width:13px;height:13px;color:var(--wine)}
.gc .st{position:absolute;z-index:2;top:10px;right:10px;font-style:normal;background:var(--wine);color:#fff;border-radius:999px;padding:3px 8px;font:700 11px var(--body)}
.gc .st.ok{background:#2E8B57}
.gc .gt{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:2px}
.gc .gt b{font:800 16.5px/1.15 var(--body);letter-spacing:-.02em}
.gc .gt small{font-size:12px;opacity:.9}
/* selector 1/2/3 columnas */
.sec2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec2 .viewsel{display:flex;gap:3px;background:#EDE5DA;border-radius:12px;padding:3px;box-shadow:none;margin:8px 0 0}
.sec2 .viewsel button{border:0;background:transparent;width:34px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);cursor:pointer;padding:0}
.sec2 .viewsel button.on{background:var(--ink);color:#fff}
.sec2 .viewsel svg{width:18px;height:18px}
.gridcards.cols-1{grid-template-columns:1fr;gap:14px}
.gridcards.cols-1 .gc{aspect-ratio:16/10;border-radius:26px}
.gridcards.cols-1 .gc .gt b{font-size:22px}
.gridcards.cols-1 .gc .gt small{font-size:13px}
.gridcards.cols-1 .gc .tg{font-size:12.5px;padding:5px 11px;top:14px;left:14px}
.gridcards.cols-3{grid-template-columns:1fr 1fr 1fr;gap:8px}
.gridcards.cols-3 .gc{border-radius:16px}
.gridcards.cols-3 .gc .tg{top:6px;left:6px;font-size:10px;padding:3px 6px;gap:2px}
.gridcards.cols-3 .gc .tg svg{width:11px;height:11px}
.gridcards.cols-3 .gc .st{top:6px;right:6px;font-size:9.5px;padding:2px 6px}
.gridcards.cols-3 .gc .gt{left:8px;right:8px;bottom:8px}
.gridcards.cols-3 .gc .gt b{font-size:12.5px;line-height:1.15}
.gridcards.cols-3 .gc .gt small{display:none}
/* puntos para pasar las fotos a mano */
.gc .pdots{position:absolute;z-index:3;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;padding:6px 4px;border-radius:999px;background:rgba(0,0,0,.28)}
.gc .pdots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.gc .pdots i.on{background:#fff}
.gridcards.cols-1 .gc .pdots{top:auto;bottom:14px;right:14px;transform:none;flex-direction:row;padding:5px 7px}
.gridcards.cols-3 .gc .pdots{right:4px;gap:4px;padding:4px 3px}.gridcards.cols-3 .gc .pdots i{width:5px;height:5px}

/* VoiceWalk */
.hero-k .vw-pin{width:13px;height:17px;color:#fff;flex:none}
.hero-k .dot{font-style:normal;opacity:.7}
.vw-foot{text-align:center;margin:26px 0 4px}.vw-foot img{width:150px;height:auto;opacity:.9}
.hero-k{white-space:nowrap;max-width:100%;font-size:clamp(10.5px,3.2vw,13px)}

/* Código de acceso */
.gate{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:32px;padding-bottom:32px}
.g-card{background:#fff;border-radius:28px;padding:28px 22px;box-shadow:0 10px 30px rgba(31,26,23,.08);text-align:center}
.g-hotel{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.g-hotel img{height:56px;width:auto}
.g-hotel b{letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.g-card h1{font-size:26px;line-height:1.15;margin:6px 0 8px}
.g-card p{color:#6B6259;margin:0 0 18px;line-height:1.5}
.g-card input{width:100%;box-sizing:border-box;font:600 20px/1.2 var(--body,inherit);text-align:center;letter-spacing:.06em;padding:14px;border:2px solid #E6DCD0;border-radius:16px;background:#FBF8F4;color:#1F1A17}
.g-card input:focus{outline:none;border-color:#BC6075}
.g-card .btn{width:100%;margin-top:12px;justify-content:center}
.g-err{color:#A33A3A !important;font-weight:600;margin:10px 0 0 !important}
.gc .st.lock{background:#1F1A17;color:#fff}
.lockmsg{position:fixed;inset:auto 0 0 0;z-index:50;padding:16px;display:flex;justify-content:center}
.lockmsg>div{background:#1F1A17;color:#fff;border-radius:22px;padding:18px 18px 16px;max-width:460px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.lockmsg p{margin:6px 0 12px;color:#E7DFD6;line-height:1.45}

/* Vista previa en el móvil de la web de venta */
body.preview{padding-top:30px}
body.preview select,body.preview button,body.preview a{pointer-events:none}
body.preview .gc{pointer-events:auto}

.wc-credit{display:block;font-size:10.5px;color:#9A8F86;padding:6px 18px 0;text-align:right}

/* --- guías para escuchar (capítulos con foto) --- */
#guide.wrap{padding-top:0}
.gph{--hc:#5B4636;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65)),var(--gimg,none) center/cover,linear-gradient(150deg,var(--hc),color-mix(in srgb,var(--hc) 65%,#000));min-height:220px;display:flex;flex-direction:column;justify-content:flex-end}
#guide-body{display:flex;flex-direction:column;gap:14px;padding-top:16px;padding-bottom:40px}
.g-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.g-all{display:inline-flex;align-items:center;gap:8px}
.g-all svg{width:18px;height:18px}
.g-dur{font-size:14px;color:var(--muted)}
.g-intro p{margin:0 0 8px;font-size:15.5px;line-height:1.55}
.g-end{font-style:italic;color:var(--muted)}
.g-sec{font:700 22px var(--serif);margin:14px 0 0}
.g-ch{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 1px 0 var(--line);transition:box-shadow .2s}
.g-ch.now{box-shadow:0 0 0 3px var(--accent)}
.g-img{position:relative;aspect-ratio:16/9;background:#eee}
.g-img img{width:100%;height:100%;object-fit:cover;display:block}
.g-img .credit{position:absolute;right:8px;bottom:6px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:999px;text-decoration:none}
.g-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.g-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer}
.g-play svg{width:20px;height:20px}
.g-tt{flex:1;min-width:0}
.g-tt b{display:block;font:700 17px/1.25 var(--serif)}
.g-tt small{color:var(--muted);font-size:13px}
.g-more{flex:none;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font:600 13px var(--body);color:var(--fg);cursor:pointer}
.g-txt{display:none;padding:0 16px 14px}
.g-ch.open .g-txt{display:block}
.g-txt p{margin:0 0 8px;font-size:15px;line-height:1.55}
.gc.guide .tg{background:rgba(255,255,255,.95)}

/* portada: títulos de grupo (por barrio / por tema) */
.gridcards .grp{grid-column:1/-1;margin:14px 0 2px;font:700 19px/1.2 var(--serif)}
.gridcards .grp:first-child{margin-top:2px}

.g-walk{font-size:13px;color:var(--muted);margin:-4px 0 0;padding:0 14px 10px 70px}.g-walk a{color:var(--wine);font-weight:700;text-decoration:none}
.dish .c.svg{padding:5px}.dish .c.svg svg{width:100%;height:100%}

.g-img.multi .g-strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.g-img.multi .g-strip::-webkit-scrollbar{display:none}
.g-sl{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start}
.g-sl img{width:100%;height:100%;object-fit:cover;display:block}
.g-sl .credit{position:absolute;right:8px;bottom:6px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:999px;text-decoration:none}
.g-dots{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;gap:6px;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.3)}
.g-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.g-dots i.on{background:#fff}

.s-multi{position:relative;aspect-ratio:3/2}.s-multi .g-strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.s-multi .g-strip::-webkit-scrollbar{display:none}.s-multi .g-sl img{width:100%;height:100%;aspect-ratio:auto}

/* barra de progreso con bolita (se puede arrastrar) */
.pbar{position:relative;overflow:visible;cursor:pointer;touch-action:none;height:5px}
.pbar::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.pbar .pfill{transition:width .25s linear}
.pbar.drag .pfill,.pbar.drag .pknob{transition:none}
.pknob{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:var(--wine);box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translate(-50%,-50%);transition:left .25s linear;pointer-events:none}
.pbar.drag .pknob{width:20px;height:20px}
.mseek{display:flex;align-items:center;gap:10px;margin:10px 0 4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mseek .pbar{flex:1}
.mseek[hidden]{display:none}
.hwelcome p.to-hotel{margin-top:4px}
.topbar .lang select{max-width:none}

/* Samsung Internet: su botón de «subir arriba» flota abajo en el centro; la barra queda por encima de él */
.ua-samsung .tabbar{bottom:max(60px,env(safe-area-inset-bottom,0px))}
.ua-samsung body.has-tabbar .wrap{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}

/* posición del usuario estilo Google Maps: bolita azul con halo y cono de dirección */
.me-mk{pointer-events:none}
.me-mk .me-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#1A73E8;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:2}
.me-mk .me-dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:rgba(26,115,232,.25);animation:mePulse 2s ease-out infinite;z-index:-1}
@keyframes mePulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.me-mk .me-cone{position:absolute;inset:0;opacity:0;transition:transform .25s linear,opacity .3s;
  background:conic-gradient(from -35deg at 50% 50%,rgba(26,115,232,.75) 0deg 70deg,transparent 70deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,#000 10px,rgba(0,0,0,.6) 20px,transparent 32px);mask:radial-gradient(circle at 50% 50%,#000 0,#000 10px,rgba(0,0,0,.6) 20px,transparent 32px)}
#locate.on{background:#1A73E8;color:#fff}
/* Galería deslizable (cabecera de ruta y ficha de parada) */
.rhead::after,.rhead-text{pointer-events:none}
.gal{position:absolute;inset:0}
.gal-strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal-strip::-webkit-scrollbar{display:none}
.gal-sl{flex:0 0 100%;height:100%;scroll-snap-align:start;overflow:hidden}
.gal-sl img{width:100%;height:100%;object-fit:cover;display:block}
.gal-count{position:absolute;right:12px;top:max(14px,env(safe-area-inset-top,0px));z-index:3;font:700 12px var(--body);color:#fff;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px;pointer-events:none}
.gal-cred{position:absolute;right:8px;bottom:6px;z-index:3}
.rhead .gal-cred{top:calc(max(14px,env(safe-area-inset-top,0px)) + 30px);bottom:auto}
.gal-cred .credit{position:static;display:inline-block;font-size:10px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:999px;text-decoration:none;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ficha rápida de parada */
.peek{position:fixed;inset:0;z-index:2000;pointer-events:none}
.peek.on{pointer-events:auto}
.peek-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.peek.on .peek-bg{opacity:1}
.peek-card{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;max-height:88vh;overflow-y:auto;background:var(--bg,#fff);border-radius:26px 26px 0 0;transform:translateY(100%);transition:transform .25s ease;box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.peek.on .peek-card{transform:none}
.peek-ph{position:relative;aspect-ratio:4/3;max-height:52vh;width:100%;background:#222}
.peek-ph .gal-count{top:12px;left:12px;right:auto}
.peek-x{position:absolute;top:10px;right:10px;z-index:4;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#17212B;font:700 16px var(--body);cursor:pointer}
.peek-body{padding:16px 20px max(22px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
.peek-n{font:700 12px var(--body);color:var(--rc);text-transform:uppercase;letter-spacing:.04em}
.peek-body h3{margin:0;font:700 22px var(--head,inherit);line-height:1.2}
.peek-body small{color:var(--muted,#667)}
.peek-body p{margin:6px 0 4px;line-height:1.5}
.peek-body .btn{margin-top:8px;align-self:stretch;justify-content:center}
.vhint{margin:14px 2px -4px;font-size:13.5px;color:var(--muted,#667);line-height:1.4}
/* Fotos antiguas del hotel */
.oldpics{position:relative;margin:4px 0 14px;border-radius:18px;overflow:hidden;background:#2a2420}
.oldpics .gal-strip{aspect-ratio:4/3}
.oldpics .gal-sl img{object-fit:cover;background:#2a2420}
.oldpics .gal-sl img.v{object-fit:contain}
.oldpics .gal-count{top:10px;right:10px}
.oldpics figcaption{padding:10px 14px 12px;color:#f1e9df;font-size:14px;font-style:italic;background:#2a2420}
/* Etiqueta «Narrada» en las tarjetas */
.gc .gt .vb{align-self:flex-start;font-style:normal;font:700 10.5px var(--body);background:rgba(255,255,255,.92);color:var(--wine);border-radius:999px;padding:2px 8px;margin-bottom:4px}
.gridcards.cols-3 .gc .gt .vb{font-size:9px;padding:1px 5px}
/* Fotos: fondo suave animado mientras cargan */
@keyframes phx{0%{background-position:100% 0}100%{background-position:-100% 0}}
img[loading="lazy"]:not(.ok),.wc-photo:not(.has-photo){background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 70%);background-size:200% 100%;animation:phx 1.4s linear infinite}
.gal-sl,.gc .illus .slide,.peek-ph,.s-multi .g-sl{background-color:#d9cfc3}
/* Primeros pasos */
.onb{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0);transition:background .25s;pointer-events:none}
.onb.on{background:rgba(0,0,0,.5);pointer-events:auto}
.onb-card{position:relative;width:100%;max-width:520px;background:var(--bg,#fff);border-radius:26px 26px 0 0;padding:34px 24px max(24px,env(safe-area-inset-bottom,0px));text-align:center;transform:translateY(100%);transition:transform .25s ease}
.onb.on .onb-card{transform:none}
.onb-skip{position:absolute;top:14px;right:16px;border:0;background:none;color:var(--muted,#667);font:600 14px var(--body);cursor:pointer;padding:6px}
.onb-ic{font-size:46px;line-height:1;margin-bottom:12px}
.onb-card h3{margin:0 0 8px;font:700 21px/1.25 var(--display,inherit)}
.onb-card p{margin:0 auto 18px;max-width:380px;line-height:1.5;color:var(--fg,#222)}
.onb-dots{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
.onb-dots i{width:8px;height:8px;border-radius:50%;background:#d6ccc0}
.onb-dots i.on{background:var(--accent,#BC6075)}
.onb-next{width:100%;justify-content:center}
/* ===== Accesibilidad y móviles Android/Samsung ===== */
/* barra de pestañas: siempre por encima de la barra de gestos / botones del sistema */
.tabbar{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
body.has-tabbar .wrap{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.lockmsg{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* botones más fáciles de pulsar caminando (mínimo ~40–44 px) */
.chips2 button{min-height:40px}
.viewsel button,.sec2 .viewsel button{width:40px;height:38px}
.topbar .lang select,.lang select{min-height:40px}
.back{min-height:44px}
.peek-x{width:44px;height:44px}
.onb-skip{padding:10px 12px}
.legal-link a{display:inline-block;padding:10px 4px}
/* la etiqueta superior no se sale de la pantalla en móviles estrechos o con texto grande */
.hero-k{white-space:normal;flex-wrap:wrap;row-gap:2px}
/* foco visible al navegar con teclado / lector de pantalla */
a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
/* respeta "reducir movimiento": sin brillo animado en las fotos */
@media (prefers-reduced-motion: reduce){img[loading="lazy"]:not(.ok){animation:none}}
.hwelcome .oldwrap{margin:16px 0 12px}
.hwelcome .oldwrap .oldpics{margin:0}
.hwelcome .oldwrap.more{display:none}
.hwelcome.open .oldwrap.more{display:block}
.oldlab{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}

/* modo bolsillo */
.mapbtn.pocketbtn{bottom:calc(var(--sheet-vis,240px) + 130px)}
.pocket-ov{position:fixed;inset:0;z-index:5000;background:#000;color:#8a8a8a;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pocket-ov[hidden]{display:none}
.pk-box{text-align:center;max-width:280px;padding:24px;opacity:.55}
.pk-ico svg{width:40px;height:40px}
.pk-box b{display:block;font-size:18px;margin:10px 0 6px;color:#aaa}
.pk-box p{font-size:14px;line-height:1.45;margin:0 0 22px}
.pk-box small{font-size:13px}
.pk-ring{width:64px;height:8px;border-radius:4px;background:#222;margin:0 auto 10px;overflow:hidden}
.pk-ring i{display:block;height:100%;width:0;background:#777}
.pocket-ov.hold .pk-ring i{width:100%;transition:width 2s linear}