/* Geocalia design system. Source of truth for the mockups; tokens must match docs/STYLE_GUIDE.md.
   Mobile first: base rules are for phones, min-width queries add room and detail. */
:root{
  --paper:#FDFBF7; --paper-rgb:253 251 247; --white:#fff; --on-ink:#fff; --sand:#F4EFE6; --line:#E6E0D6;
  --ink:#161513; --ink-700:#403D39; --ink-500:#6B665F; --ink-400:#8E8981;
  --success:#1B7447; --success-tint:#E7F3EC; --warning:#8F5200; --warning-tint:#FBF1DE;
  --danger:#B3261E; --danger-tint:#FCEBE9; --info:#1F5FA8; --info-tint:#E8F0FA;
  --place-h:40; --place-c:.125;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-ctl:12px; --r-group:20px;
  --shadow-1:0 1px 2px rgb(22 21 19/.06),0 2px 8px rgb(22 21 19/.06);
  --shadow-2:0 8px 28px rgb(22 21 19/.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Boska",Georgia,serif; --display-w:500;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root,[data-place]{
  --place-tint:oklch(.955 calc(var(--place-c)*.20) var(--place-h));
  --place-soft:oklch(.905 calc(var(--place-c)*.42) var(--place-h));
  --place:oklch(.50 var(--place-c) var(--place-h));
  --place-deep:oklch(.34 calc(var(--place-c)*.75) var(--place-h));
  /* photo placeholder layers, derived from the same hue */
  --sky-1:oklch(.93 calc(var(--place-c)*.35) var(--place-h));
  --sky-2:oklch(.80 calc(var(--place-c)*.65) var(--place-h));
  --far:oklch(.64 calc(var(--place-c)*.8) var(--place-h));
  --mid:oklch(.48 var(--place-c) var(--place-h));
  --near:oklch(.30 calc(var(--place-c)*.7) var(--place-h));
}
/* Dark theme: follows the device. Same tokens, darker paper and lighter ink; the place hue keeps its tone. */
:root{color-scheme:light dark}
@media(prefers-color-scheme:dark){
  :root{
    --paper:#141311; --paper-rgb:20 19 17; --white:#1D1C19; --on-ink:#141311; --sand:#25231F; --line:#36332D;
    --ink:#EEEAE3; --ink-700:#D2CDC4; --ink-500:#A39D93; --ink-400:#7F796F;
    --success:#5CC28A; --success-tint:#16291E; --warning:#E8A84A; --warning-tint:#2E2312;
    --danger:#F0857D; --danger-tint:#331A18; --info:#7FB0EB; --info-tint:#16233A;
    --shadow-1:0 1px 2px rgb(0 0 0/.4),0 2px 8px rgb(0 0 0/.3); --shadow-2:0 8px 28px rgb(0 0 0/.5);
  }
  :root,[data-place]{
    --place-tint:oklch(.24 calc(var(--place-c)*.30) var(--place-h));
    --place-soft:oklch(.31 calc(var(--place-c)*.45) var(--place-h));
    --place:oklch(.74 var(--place-c) var(--place-h));
    --place-deep:oklch(.84 calc(var(--place-c)*.6) var(--place-h));
  }
  img{filter:brightness(.92)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The room a jump to an anchor leaves for the sticky header. On the targets, never as scroll-padding on html:
   that would also count for the search box inside the header, and typing in it would scroll the page. */
[id]{scroll-margin-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
@media(min-width:1024px){.wrap{padding:0 48px}}
section{padding:48px 0}
@media(min-width:1024px){section{padding:72px 0}}

/* type */
.eyebrow{font:500 12px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin:0 0 12px}
.display-xl,.display-l,.display-m,.display-s,.wordmark{font-family:var(--display);font-weight:var(--display-w);letter-spacing:-.015em;margin:0;text-wrap:balance}
.display-xl{font-size:clamp(36px,4.5vw,58px);line-height:1.02}
.display-l{font-size:clamp(30px,3.8vw,46px);line-height:1.06}
.display-m{font-size:clamp(28px,2.8vw,36px);line-height:1.12}
.display-s{font-size:clamp(26px,2.4vw,30px);line-height:1.15}
.display-xl em,.display-l em,.display-m em,.display-s em{font-style:italic;color:var(--place)}
.title{font:600 20px/1.3 var(--sans);margin:0}
.lead{font-size:18px;line-height:1.6;color:var(--ink-700);max-width:46ch;margin:20px 0 0}
.small{font-size:14px;line-height:1.45}
.meta{font-size:14px;color:var(--ink-500);margin:0}
.caption{font:500 12px/1.35 var(--sans);color:var(--ink-500)}
.coords{font:500 12px/1 var(--sans);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink-500)}

/* icons */
.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-sm{width:16px;height:16px}

/* site header */
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.wordmark{font-size:28px;line-height:1;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.nav{display:none;gap:28px;font-size:15px}
.nav a{text-decoration:none;color:var(--ink-700)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);font-weight:600}
@media(min-width:900px){.nav{display:flex}}
.search-compact{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-1);font-size:14px;cursor:pointer}
.search-compact b{font-weight:600}
.search-compact span{color:var(--ink-500)}
.search-compact i{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center}

/* buttons, chips, tags */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;white-space:nowrap;padding:0 24px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--sans);cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),background .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:var(--on-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--ink) 85%,var(--paper))}
.btn-secondary{background:var(--white);border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--sand)}
.btn-place{background:var(--place);color:#fff}
.btn-place:hover{background:var(--place-deep)}
.btn-ghost{background:none;padding:0 0 3px;height:auto;border-radius:0;border-bottom:1px solid var(--ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-icon{width:44px;height:44px;padding:0;background:var(--white);border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{background:var(--sand);color:var(--ink-400);cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:400 14px/1 var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease)}
.chip:hover{border-color:var(--ink-400)}
.chip[aria-pressed=true],.chip[aria-selected=true]{background:var(--place-soft);border-color:transparent;color:var(--place-deep);font-weight:600}
.chip-sm{height:32px;padding:0 12px;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--place);flex:none}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--r-xs);background:rgb(255 255 255/.92);font:500 12px/1 var(--sans);color:#161513}
.tag-line{border:1px solid var(--line);background:var(--white)}
.tag-place{background:var(--place-soft);color:var(--place-deep)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rail{display:flex;gap:10px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.rail::-webkit-scrollbar,.doc-nav::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;padding:0 0 14px;font:500 15px/1 var(--sans);color:var(--ink-500);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:600;border-color:var(--place)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-500);flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.pager{display:flex;gap:6px;align-items:center}
.pager a,.pager span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;text-decoration:none;font:500 14px/1 var(--sans)}
.pager a:hover{background:var(--sand)}
.pager [aria-current]{background:var(--ink);color:var(--on-ink)}

/* photo placeholder: a landscape drawn from the place hue */
.photo{position:relative;overflow:hidden;border-radius:var(--r-sm);background:linear-gradient(180deg,var(--sky-1),var(--sky-2));isolation:isolate}
.photo svg.scene{position:absolute;inset:0;width:100%;height:100%;transition:transform .3s var(--ease)}
/* matched on the symbol originals; colours arrive through inherited custom properties */
.far{fill:var(--far)} .mid{fill:var(--mid)} .near{fill:var(--near)} .sun{fill:#fff;opacity:.75}
.photo .tag{position:absolute;top:12px;left:12px;z-index:2}
.photo .save,.guide-card>.save{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgb(255 255 255/.92);color:#161513;display:grid;place-items:center;cursor:pointer}
.photo .ratio{position:absolute;left:12px;bottom:10px;z-index:2;font:600 12px/1 var(--sans);color:#fff}
.r45{aspect-ratio:4/5}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1}.r169{aspect-ratio:16/9}
.contour{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;pointer-events:none}

/* heroes */
.hero{display:grid;gap:32px;align-items:center;padding:24px 0 48px}
@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr;gap:56px;padding:36px 0 72px}}
.hero .photo{aspect-ratio:4/3.4;border-radius:var(--r-md)}
.facts-inline{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap}
.facts-inline b{display:block;font:600 20px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.facts-inline span{font-size:13px;color:var(--ink-500)}
.immersive{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.immersive .photo{position:absolute;inset:0;border-radius:0;z-index:-2}
.immersive::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(22 21 19/0) 30%,rgb(22 21 19/.68))}
.immersive .inner{padding:28px;width:100%}
@media(min-width:1024px){.immersive .inner{padding:48px}}
.immersive .crumbs,.immersive .coords{color:rgb(255 255 255/.85)}
.immersive .crumbs [aria-current]{color:#fff}
.immersive em{color:#fff!important}

/* search */
.search{display:none;position:relative;align-items:stretch;background:var(--white);border-radius:999px;box-shadow:var(--shadow-1);border:1px solid var(--line);height:72px;padding:0;margin-top:36px;max-width:760px}
/* Segments are full-height pills with no gap to the bar, so the hover and open fill reaches every edge. */
.search .seg{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 22px;border-radius:999px;border:0;background:none;text-align:left;cursor:pointer;position:relative;min-width:0;transition:background .15s var(--ease)}
.search .seg:first-child{padding-left:30px}
/* The last segment runs under the submit button to the right edge of the bar. */
.search .seg:nth-last-child(2){flex:1.25;padding-right:78px}
.search .seg:hover,.search .seg[aria-expanded=true]{background:var(--sand)}
.search .seg[aria-expanded=true]{box-shadow:inset 0 0 0 1px var(--line)}
.search .seg:focus-visible{outline-offset:-3px}
.search .seg+.seg::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--line);transition:opacity .15s var(--ease)}
/* No divider on either side of the segment being hovered, focused or open. */
.search .seg:hover::before,.search .seg:hover+.seg::before,
.search .seg:focus-visible::before,.search .seg:focus-visible+.seg::before,
.search .seg[aria-expanded=true]::before,.search .seg[aria-expanded=true]+.seg::before{opacity:0}
.search .seg b{font:600 12px/1.3 var(--sans)}
.search .seg span{font-size:15px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search .seg span.set{color:var(--ink)}
.search .go{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;cursor:pointer}
.search .go:active{transform:translateY(-50%) scale(.96)}
.search-m{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-1);border-radius:999px;height:60px;padding:0 8px 0 20px;margin-top:28px;width:100%;cursor:pointer;text-align:left}
.search-m div{flex:1;min-width:0}
.search-m b{display:block;font:600 15px/1.3 var(--sans)}
.search-m span{font-size:13px;color:var(--ink-500)}
.search-m i{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;flex:none}
@media(min-width:768px){.search{display:flex}.search-m{display:none}}
.popover{background:var(--white);border-radius:var(--r-group);box-shadow:var(--shadow-2);padding:12px}
.ac{list-style:none;margin:0;padding:0}
.ac li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-ctl);cursor:pointer}
.ac li[aria-selected=true],.ac li:hover{background:var(--sand)}
.ac li i{width:40px;height:40px;border-radius:var(--r-sm);background:var(--place-soft);color:var(--place-deep);display:grid;place-items:center;flex:none}
.ac b{display:block;font-weight:600}
.cal{padding:20px}
.cal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cal header b{font:600 16px/1 var(--sans)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;text-align:center;font-size:14px}
.cal-grid span{height:40px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.cal-grid .dow{font:500 12px/1 var(--sans);color:var(--ink-500);height:28px}
.cal-grid .in{background:var(--place-soft)}
.cal-grid .a{background:linear-gradient(90deg,transparent 50%,var(--place-soft) 50%)}
.cal-grid .b{background:linear-gradient(90deg,var(--place-soft) 50%,transparent 50%)}
.cal-grid .a i,.cal-grid .b i{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-style:normal;font-weight:600}
.cal-grid .off{color:var(--ink-400)}
.stepper{display:inline-flex;align-items:center;gap:14px}
.stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink-400);background:var(--white);font:400 18px/1 var(--sans);cursor:pointer}
.stepper button[disabled]{border-color:var(--line);color:var(--ink-400);cursor:not-allowed}
.stepper b{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.guest{display:flex;justify-content:space-between;align-items:center;padding:14px 8px;border-bottom:1px solid var(--line)}
.guest:last-child{border:0}

/* forms */
.field{display:grid;gap:6px}
.field label{font:600 14px/1.3 var(--sans)}
.input{height:52px;border:1px solid var(--ink-400);border-radius:var(--r-ctl);padding:0 14px;font:400 16px/1 var(--sans);background:var(--white);color:var(--ink);width:100%}
.input::placeholder{color:var(--ink-500)}
.input:focus{outline:2px solid var(--ink);outline-offset:1px}
.input.err{border-color:var(--danger);border-width:2px}
.input:disabled{background:var(--sand);border-color:var(--line);color:var(--ink-400)}
.help{font-size:13px;color:var(--ink-500)}
.help.err{color:var(--danger);display:flex;gap:6px;align-items:center}
.check{display:flex;align-items:center;gap:10px;cursor:pointer}
.check input{appearance:none;width:22px;height:22px;border:1px solid var(--ink-400);border-radius:6px;background:var(--white);display:grid;place-items:center;margin:0;cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input[type=checkbox]:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--white)}
.toggle{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--ink-400);position:relative;margin:0;cursor:pointer;transition:background .15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:transform .15s var(--ease)}
.toggle:checked{background:var(--ink)}
.toggle:checked::after{transform:translateX(18px)}

/* cards */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(min-width:1024px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.stagger>*:nth-child(4n+2){margin-top:48px}.stagger>*:nth-child(4n+3){margin-top:24px}.stagger>*:nth-child(4n+4){margin-top:64px}}
.card{text-decoration:none;display:block}
.card .title{margin-top:14px;font-size:18px;text-decoration:underline transparent 1px;text-underline-offset:4px;transition:text-decoration-color .15s}
.card:hover .title{text-decoration-color:var(--place)}
.card:hover .scene{transform:scale(1.03)}
.card .meta{margin-top:4px}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--ink-700);margin-top:6px}
.route .i{color:var(--place)}
.card-row{display:flex;gap:14px;align-items:center;text-decoration:none;padding:12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--white)}
.card-row:hover{border-color:var(--ink-400)}
.card-row .photo{width:76px;height:76px;border-radius:var(--r-xs);flex:none}
.card-row>div{flex:1;min-width:0}
.card-row b{display:block;font-weight:600;overflow-wrap:break-word}
/* A row's line of text stays short: two lines at most. */
.card-row .meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.audience-sub{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:28px 0 12px;color:var(--place-deep)}
/* Inside a profile panel the headings and cards take the inset of the columns above (.profile-grid>div),
   so both blocks share one left and right edge and no card sits on the panel's border. */
.profile-panel>.audience-sub,.profile-panel>.cards-2{margin-inline:20px}
.profile-panel>.cards-2:last-child{margin-bottom:20px}
@media(min-width:900px){.profile-panel>.audience-sub,.profile-panel>.cards-2{margin-inline:24px}.profile-panel>.cards-2:last-child{margin-bottom:24px}}
.not-found{padding-bottom:72px}
.not-found-links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.guide-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:230px;text-decoration:none;background:var(--place-tint);border-radius:var(--r-sm);padding:24px}
.guide-card:hover .display-s{text-decoration:underline 1px;text-underline-offset:5px}
.solid{position:relative;overflow:hidden;background:var(--place);color:#fff;border-radius:var(--r-sm);padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;isolation:isolate}
.solid .contour{color:rgb(255 255 255/.16);z-index:-1}
.solid .display-m{font-style:italic}
.solid .tag{align-self:flex-start}
.solid a{color:#fff;font-weight:600;text-underline-offset:4px}
.exp{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:flex;flex-direction:column}
.exp .photo{border-radius:0}
.exp .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.exp .specs{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ink-700)}
.exp .specs span{display:inline-flex;align-items:center;gap:6px}
.exp p{margin:0;font-size:15px;color:var(--ink-700)}
.exp .slot{margin-top:auto;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.exp .slot b{font-variant-numeric:tabular-nums}

/* place panels */
.tint{background:var(--place-tint);border-radius:var(--r-md);padding:28px 20px}
@media(min-width:1024px){.tint{padding:56px}}
.panel{background:var(--white);border-radius:var(--r-md);padding:28px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 20px;margin-top:24px}
.facts>div{display:flex;gap:12px;align-items:flex-start}
.facts .i{color:var(--place);margin-top:2px}
.facts .caption{display:block;margin-bottom:4px}
.facts b{font:600 17px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.summary{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.summary span{height:36px;padding:0 14px;border-radius:999px;background:var(--place-soft);color:var(--place-deep);font:500 14px/36px var(--sans)}

/* content blocks */
.prose{max-width:720px}
.prose p{font-size:18px;line-height:1.6;color:var(--ink-700);margin:16px 0 0}
.prose a{text-decoration:underline var(--place) 1px;text-underline-offset:3px}
.prose a:hover{color:var(--place)}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.months div{text-align:center}
.months i{display:block;height:44px;border-radius:var(--r-xs);background:var(--sand);position:relative}
.months i.l1{background:var(--place-soft)}
.months i.l2{background:var(--place)}
.months i.l2::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--white)}
.months span{font:500 12px/1 var(--sans);color:var(--ink-500);display:block;margin-top:8px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-700);margin-top:16px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:2px;background:var(--sand)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 28px 44px}
.timeline li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--place-soft)}
.timeline li:last-child::before{display:none}
.timeline .n{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--place);color:#fff;font:600 13px/28px var(--sans);text-align:center}
.timeline b{font:600 17px/1.5 var(--sans)}
.timeline p{margin:4px 0 0;color:var(--ink-700);font-size:15px}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--ink)}
.table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.table td:first-child{font-weight:600}
.table-wrap{overflow-x:auto}
.callout{display:flex;gap:14px;border-radius:var(--r-sm);padding:18px 20px;background:var(--place-tint)}
.callout .i{color:var(--place);margin-top:2px}
.callout b{display:block;font-weight:600;margin-bottom:2px}
.callout p{margin:0;color:var(--ink-700);font-size:15px}
.callout.skip{background:var(--sand)}.callout.skip .i{color:var(--ink)}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tips li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.tips li:first-child{border-top:1px solid var(--line)}
.tips .num{font-family:var(--display);font-weight:var(--display-w);font-style:italic;font-size:30px;line-height:1;color:var(--place);min-width:28px}
.tips b{display:block;font-weight:600}
.tips p{margin:2px 0 0;font-size:15px;color:var(--ink-700)}
.quote{margin:0;padding-left:24px;border-left:2px solid var(--place)}
.quote p{font-family:var(--display);font-weight:var(--display-w);font-style:italic;font-size:clamp(24px,2.4vw,30px);line-height:1.25;margin:0}
.quote footer{margin-top:12px;font-size:14px;color:var(--ink-500)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font:600 17px/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .25s var(--ease)}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{margin:0 0 18px;color:var(--ink-700);max-width:62ch}
.byline{display:flex;gap:14px;align-items:center}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--place-soft);color:var(--place-deep);display:grid;place-items:center;font:600 16px/1 var(--sans);flex:none}
.byline b{display:block;font-weight:600}
.sources{margin:14px 0 0;padding:0 0 0 18px;font-size:14px;color:var(--ink-700)}
.gallery{display:grid;gap:8px;grid-template-columns:1fr 1fr}
@media(min-width:768px){.gallery{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}.gallery>:first-child{grid-row:span 2}}
.gallery .photo{min-height:140px;height:100%}
.map{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--place-tint);min-height:300px;color:var(--place-soft)}
.map .contour{stroke-width:1.5}
.pin{position:absolute;width:32px;height:32px;margin:-16px;border-radius:50%;background:var(--place);color:#fff;font:600 13px/32px var(--sans);text-align:center;box-shadow:0 0 0 4px rgb(255 255 255/.9)}
.map .btn{position:absolute;right:14px;bottom:14px}
.budget{display:flex;gap:3px;align-items:center}
.budget .i{width:16px;height:16px;color:var(--ink)}
.budget .i.off{color:var(--ink-400);opacity:.5}
.news{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);border-radius:var(--r-md);padding:36px 24px;isolation:isolate}
@media(min-width:900px){.news{padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}}
.news .contour{color:rgb(255 255 255/.10);z-index:-1}
.news em{color:var(--place-soft)!important}
.news form{display:flex;gap:8px;background:var(--white);border-radius:999px;padding:6px;margin-top:20px}
.news input{flex:1;border:0;background:none;padding:0 16px;font:400 16px/1 var(--sans);min-width:0;color:var(--ink)}
.news input:focus{outline:none}
.news .caption{color:rgb(255 255 255/.7);display:block;margin-top:12px}

/* stays */
.stay{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.stay .photo{border-radius:0}
.stay .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.stay .why{font-size:15px;color:var(--ink-700);margin:0}
.stay .why b{color:var(--place-deep);font-weight:600}
.score{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-700)}
.score b{background:var(--ink);color:var(--on-ink);border-radius:var(--r-xs);padding:5px 7px;font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums}
.stay .slot{margin-top:auto;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.stay .slot b{font:600 18px/1 var(--sans);font-variant-numeric:tabular-nums}
.mbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-2);border-radius:var(--r-group) var(--r-group) 0 0;padding:12px 16px;max-width:400px}
.mbar b{font:600 16px/1.2 var(--sans);font-variant-numeric:tabular-nums}

/* feedback */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);font-size:15px}
.alert b{font-weight:600}
.alert.success{background:var(--success-tint);color:var(--success)}
.alert.warning{background:var(--warning-tint);color:var(--warning)}
.alert.danger{background:var(--danger-tint);color:var(--danger)}
.alert.info{background:var(--info-tint);color:var(--info)}
.alert span{color:var(--ink-700)}
.toast{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--on-ink);border-radius:var(--r-sm);padding:12px 18px 12px 14px;font-size:14px;box-shadow:var(--shadow-2)}
.toast a{color:#fff;font-weight:600;text-underline-offset:3px}
.empty{position:relative;overflow:hidden;text-align:center;padding:48px 24px;border:1px dashed var(--ink-400);border-radius:var(--r-md);color:var(--line);isolation:isolate}
.empty .contour{z-index:-1}
.empty .display-s,.empty p{color:var(--ink)}
.empty p{color:var(--ink-700);max-width:40ch;margin:10px auto 20px}
.sk{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--sand) 25%,#FAF7F1 50%,var(--sand) 75%);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

.footer{position:relative;overflow:hidden;background:var(--sand);padding:56px 0 32px;margin-top:24px;color:var(--line);isolation:isolate}
.footer .contour{z-index:-1;color:color-mix(in srgb,var(--ink) 6%,var(--sand))}
.footer .wrap{color:var(--ink)}
.footer .cols{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:600px){.footer .cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.footer .cols{grid-template-columns:1.4fr repeat(4,1fr)}}
.footer h3{font:600 14px/1 var(--sans);margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.footer ul a{text-decoration:none;color:var(--ink-700)}
.footer ul a:hover{color:var(--ink);text-decoration:underline}
.footer .legal{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-500)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- page furniture added for full-page mockups ---------- */
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.card:hover .photo img,.exp:hover .photo img,.stay:hover .photo img,.eat:hover .photo img{transform:scale(1.03)}
.photo .credit{position:absolute;right:8px;bottom:6px;z-index:2;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10px/1.2 var(--sans);color:#fff;text-decoration:none;text-shadow:0 1px 2px rgb(0 0 0/.7)}
.photo a.credit:hover{text-decoration:underline}
.r43{aspect-ratio:4/3}.r219{aspect-ratio:21/9}
.sec{padding:36px 0}
@media(min-width:1024px){.sec{padding:52px 0}}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sec-head p{margin:8px 0 0;color:var(--ink-700);max-width:60ch}
.mock-bar{background:var(--ink);color:var(--on-ink);font:500 12px/1.3 var(--sans)}
.mock-bar .wrap{display:flex;gap:16px;align-items:center;padding-top:8px;padding-bottom:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mock-bar a{color:rgb(255 255 255/.75);text-decoration:none}.mock-bar a:hover,.mock-bar a[aria-current]{color:#fff}
.mock-bar b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255/.6)}
.site-head{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .header{height:60px}
@media(min-width:900px){.site-head .header{height:72px}}
.site-head .wordmark{font-size:24px}
.lang{font:600 13px/1 var(--sans);border:1px solid var(--line);border-radius:999px;padding:8px 10px;text-decoration:none;display:none}
@media(min-width:900px){.lang{display:inline-block}}
.head-right{display:flex;align-items:center;gap:10px}
.search-compact{max-width:52vw;overflow:hidden;white-space:nowrap}
.search-compact b{overflow:hidden;text-overflow:ellipsis}

/* hero variants for pages */
.phero{padding:20px 0 8px}
.phero .crumbs{margin-bottom:14px}
/* One column that never grows past the screen: a long row of chips (the cities a plan leaves from) made the hero three screens wide. */
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.phero-grid>*{min-width:0}
@media(min-width:1024px){.phero-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.phero{padding:36px 0 16px}}
.phero .photo{aspect-ratio:4/3}
@media(min-width:1024px){.phero .photo{aspect-ratio:5/4}}
.belongs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center;font-size:13px;color:var(--ink-500)}
.belongs a{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--white);text-decoration:none;color:var(--ink);font-weight:500}
.belongs a:hover{border-color:var(--ink-400)}
.immersive.tall{min-height:62vh;border-radius:0}
@media(min-width:1024px){.immersive.tall{min-height:520px;border-radius:var(--r-md)}}

/* layout with side rail: one column on phones, rail appears on desktop */
.layout{display:block}
.rail-col{display:none}
@media(min-width:1100px){.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}.rail-col{display:block;position:sticky;top:96px}}
.toc{list-style:none;margin:0 0 20px;padding:0;border-left:1px solid var(--line);font-size:14px}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--ink-500)}
.toc a:hover{color:var(--ink)}.toc a.on{color:var(--ink);font-weight:600;border-color:var(--place)}
.rail-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.rail-panel .display-s{font-size:24px}
.sec-tabs{position:sticky;top:calc(var(--head-h,60px) - 1px);z-index:20;margin:0 -20px 14px;padding:0 20px}
/* Bars that stick under the header run the whole window width, like the header: paper with
   blur and a hairline from edge to edge, while their content stays in the container. The band
   is a box-shadow spread 100vmax to each side and clipped to the bar's height (::before; the
   hairline the same way in ::after): shadows draw past the edges without widening the page, so
   nothing has to clip the body (overflow-x on body breaks sticky on iPhone). No blur: Safari on
   iPhone painted the earlier border-image band see-through under backdrop-filter. */
.sec-tabs::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(var(--paper-rgb)/.97);box-shadow:0 0 0 100vmax rgb(var(--paper-rgb)/.97);clip-path:inset(0 -100vmax)}
.sec-tabs .tabs{border:0;gap:22px}.sec-tabs .tabs a{padding:14px 0 12px;font:500 14px/1 var(--sans);color:var(--ink-500);white-space:nowrap;text-decoration:none;border-bottom:2px solid transparent}
.sec-tabs .tabs a.on{color:var(--ink);font-weight:600;border-color:var(--place)}
@media(min-width:1100px){.sec-tabs{display:none}}
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgb(22 21 19/.10);padding:10px 16px calc(10px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s linear .2s}
/* No transform on the bar: iOS Safari leaves a transformed fixed layer where it was while its toolbars
   grow or shrink, so the bar floated above the bottom edge. It fades in place instead. */
.sticky-bar.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s var(--ease)}
.sticky-bar b{font:600 15px/1.2 var(--sans)}
@media(min-width:1100px){.sticky-bar{display:none}}
body.has-bar{padding-bottom:76px}
@media(min-width:1100px){body.has-bar{padding-bottom:0}}

/* swipe rail on phones, grid on desktop */
/* Positioned, so hidden labels (.sr) in the cards past the edge stay inside the scroller and do not widen the page on phones. */
.swipe{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 10px;scrollbar-width:none;scroll-padding-inline:20px}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{flex:0 0 78%;scroll-snap-align:start;max-width:340px}
.swipe.narrow>*{flex-basis:62%}
@media(min-width:900px){.swipe{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;margin:0;padding:0}.swipe>*{max-width:none}.swipe.c2{grid-template-columns:repeat(2,1fr)}.swipe.c4{grid-template-columns:repeat(4,1fr)}}

/* eateries */
.eat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.eat .photo{border-radius:0}
.eat .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.eat .order{font-size:15px;color:var(--ink-700);margin:0}
.eat .order b{color:var(--place-deep);font-weight:600}
.eat .slot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-700)}
.price-level{font:600 14px/1 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.price-level i{font-style:normal;color:var(--ink-400);opacity:.6}
.dishes{display:grid;gap:0;list-style:none;margin:0;padding:0}
.dishes li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.dishes li:first-child{border-top:1px solid var(--line)}
.dishes b{font-weight:600}.dishes span{color:var(--ink-500);text-align:right}

/* trip profiles: how you travel */
.profiles{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px}
.profiles::-webkit-scrollbar{display:none}
@media(min-width:900px){.profiles{margin:0;padding:2px 0 4px;flex-wrap:wrap;overflow:visible}}
.profile-btn{display:flex;align-items:center;gap:10px;flex:none;height:52px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:500 15px/1 var(--sans);cursor:pointer}
.profile-btn:hover{border-color:var(--ink-400)}
.profile-btn[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.profile-panel{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);overflow:hidden}
.profile-panel[hidden]{display:none}
.profile-top{padding:20px;background:var(--place-tint);display:grid;gap:8px}
@media(min-width:900px){.profile-top{grid-template-columns:1fr auto;align-items:end;padding:24px 28px}}
.profile-top p{margin:0;color:var(--ink-700);max-width:62ch}
.profile-top .budget-day{font:600 22px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.profile-top .budget-day span{display:block;font:500 12px/1.4 var(--sans);color:var(--ink-500)}
.profile-grid{display:grid}
@media(min-width:900px){.profile-grid{grid-template-columns:repeat(4,1fr)}}
.profile-grid>div{padding:18px 20px;border-top:1px solid var(--line)}
@media(min-width:900px){.profile-grid>div{padding:22px 24px}.profile-grid>div+div{border-left:1px solid var(--line)}}
.profile-grid h4{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;color:var(--place-deep)}
.profile-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:var(--ink-700)}
.profile-grid li b{color:var(--ink);font-weight:600}
.stay-dog{display:flex;align-items:center;gap:6px;color:var(--ink-700)}
/* cost: "¿Cuánto cuesta?" under the profile panels, one row per way of travelling */
.cost{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);padding:20px}
@media(min-width:900px){.cost{padding:24px 28px}}
.cost-head{display:grid;gap:14px}
@media(min-width:700px){.cost-head{grid-template-columns:1fr auto;align-items:center}}
.cost-head h3{margin:0}
.cost-inputs{display:flex;flex-wrap:wrap;gap:12px 24px}
.cost-input{display:flex;align-items:center;gap:12px}
.cost-input>span:first-child{min-width:72px;font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.cost-rows{list-style:none;margin:16px 0 0;padding:0;display:grid}
.cost-rows li+li{border-top:1px solid var(--line)}
.cost-row{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;padding:12px 0;cursor:pointer}
.cost-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.cost-name{display:flex;align-items:center;gap:8px;font:500 15px/1.3 var(--sans);color:var(--ink-700)}
.cost-total{font:600 16px/1.2 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-bar{grid-column:1/-1;position:relative;height:6px;border-radius:3px;background:var(--place-tint)}
.cost-bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--ink-400)}
.cost-row[aria-current=true] .cost-name{color:var(--ink);font-weight:600}
.cost-row[aria-current=true] .cost-bar i{background:var(--place-deep)}
.cost-note{margin:12px 0 0}
.profile-grid .soon{display:inline-block;margin-left:4px;font:500 11px/1 var(--sans);padding:3px 6px;border-radius:var(--r-xs);background:var(--sand);color:var(--ink-700);vertical-align:middle}

/* Profile and audience advice: a strip of short cells, then the full blocks. */
.profile-strip{list-style:none;margin:0;padding:20px;display:grid;gap:20px 14px;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
@media(min-width:900px){.profile-strip{grid-template-columns:repeat(4,1fr);padding:20px 24px}}
.profile-strip li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.profile-strip li > svg{flex:none;width:28px;height:28px;padding:12px;box-sizing:content-box;border-radius:50%;background:var(--white);color:var(--place-deep)}
.profile-strip b{display:block;font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--place-deep);margin-bottom:3px}
.profile-strip li span span{font-size:14px;line-height:1.35;color:var(--ink-700)}
.profile-blocks{display:grid;gap:12px;padding:0 20px 20px}
@media(min-width:900px){.profile-blocks{padding:0 24px 24px}}
.profile-blocks section{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.profile-blocks h4{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;color:var(--place-deep)}
.profile-blocks ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-700)}
.profile-blocks li b{color:var(--ink);font-weight:600}
.profile-blocks .soon{display:inline-block;margin-left:4px;font:500 11px/1 var(--sans);padding:3px 6px;border-radius:var(--r-xs);background:var(--sand);color:var(--ink-700);vertical-align:middle}

/* specs, checklist, difficulty, drive time */
.specs-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);overflow:hidden}
@media(min-width:768px){.specs-grid{grid-template-columns:repeat(4,1fr)}}
/* fewer facts than columns: as many columns as facts, no empty cells */
.specs-grid:has(>:only-child){grid-template-columns:1fr}
@media(min-width:768px){
  .specs-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  .specs-grid:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}
/* the last fact takes the rest of its row, so a row never ends in an empty cell */
.specs-grid>div:last-child{grid-column-end:-1}
.specs-grid>div{padding:16px 18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.specs-grid .caption{display:block;margin-bottom:6px}
.specs-grid b{font:600 17px/1.25 var(--sans);font-variant-numeric:tabular-nums}
.level{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.level i{width:14px;height:6px;border-radius:1px;background:var(--line)}
.level i.on{background:var(--place)}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(min-width:768px){.checklist{grid-template-columns:1fr 1fr}}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.checklist .i{color:var(--place);margin-top:2px}
.drive{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--r-xs);background:var(--ink);color:var(--on-ink);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums}
.drive .i{width:14px;height:14px}
.band{display:flex;align-items:baseline;gap:12px;margin:32px 0 16px;padding-top:16px;border-top:1px solid var(--ink)}
.band h3{font:600 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0}
.band span{font-size:14px;color:var(--ink-500)}
.plan{display:grid;grid-template-columns:112px 1fr;gap:14px;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
@media(min-width:640px){.plan{grid-template-columns:200px 1fr;gap:20px;padding:16px 0}}
.plan .photo{aspect-ratio:1}
@media(min-width:640px){.plan .photo{aspect-ratio:3/2}}
.plan h4{font:600 17px/1.3 var(--sans);margin:6px 0 4px}
.plan p{margin:0;font-size:14px;color:var(--ink-700)}
.plan .row{gap:6px}
.plan.is-active{background:var(--place-tint);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:var(--r-sm)}
.options{display:grid;gap:16px}
@media(min-width:768px){.options{grid-template-columns:1fr 1fr}}
.option{border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);padding:22px;display:flex;flex-direction:column;gap:10px}
.option.pick{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.option p{margin:0;color:var(--ink-700);font-size:15px}
.option .from{font:600 22px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.option .slot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.day{margin:0 0 8px;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--place-deep)}
.timeline .t{display:block;font:600 12px/1 var(--sans);color:var(--ink-500);font-variant-numeric:tabular-nums;margin-bottom:4px}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 6px}
.filters::-webkit-scrollbar{display:none}
@media(min-width:900px){.filters{flex-wrap:wrap;margin:0;padding:2px 0 6px;overflow:visible}}
.filters .sep{flex:none;width:1px;background:var(--line);margin:6px 4px}

/* map explorer */
.mapx{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.mapx-bar{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.mapx-bar::-webkit-scrollbar{display:none}
.mapx-body{position:relative}
.mapx-map{height:64vh;min-height:380px;max-height:560px;background:var(--place-tint)}
.mapx-list{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 12px;position:absolute;left:0;right:0;bottom:0;z-index:5;scrollbar-width:none}
.mapx-list::-webkit-scrollbar{display:none}
.mapx-item{flex:0 0 82%;max-width:320px;scroll-snap-align:center;display:flex;gap:12px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;text-align:left;cursor:pointer;box-shadow:var(--shadow-1)}
.mapx-item .photo{width:64px;height:64px;border-radius:var(--r-xs);flex:none}
.mapx-item b{display:block;font:600 15px/1.3 var(--sans)}
.mapx-item .meta{font-size:13px}
.mapx-item.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),var(--shadow-1)}
.mapx-item[hidden]{display:none}
@media(min-width:900px){
  .mapx-body{display:grid;grid-template-columns:minmax(250px,34%) 1fr}
  .mapx-map{height:560px;max-height:none;order:2}
  /* z-index:auto: as a grid item its z-index would count even unpositioned and lift the list over the sticky title bar. */
  .mapx-list{position:static;z-index:auto;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:560px;padding:12px;border-right:1px solid var(--line);scroll-snap-type:none}
  .mapx-item{flex:none;max-width:none;box-shadow:none}
}
.mk{display:grid;place-items:center;cursor:pointer;font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgb(22 21 19/.28);transition:transform .15s var(--ease)}
.mk:hover,.mk.is-active{transform:scale(1.12);z-index:3}
.mk-do{width:32px;height:32px;border-radius:50%;background:var(--place);color:#fff}
.mk-eat{width:32px;height:32px;border-radius:50%;background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}
.mk-stay{height:28px;padding:0 10px;border-radius:999px;background:var(--white);color:var(--ink);border:1px solid var(--line)}
.mk-svc{width:26px;height:26px;border-radius:var(--r-xs);background:var(--ink-700);color:var(--on-ink)}
.mk-num{width:28px;height:28px;border-radius:50%;background:var(--place);color:#fff;box-shadow:0 0 0 3px rgb(255 255 255/.9),0 1px 4px rgb(22 21 19/.28)}
.mk-origin{height:26px;padding:0 8px;border-radius:var(--r-xs);background:var(--ink);color:var(--on-ink);letter-spacing:.04em}
.mk.is-active{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.mk .i{width:16px;height:16px}
/* sec-map-wide: the map below the side rail, across the whole page: a taller map and a wider list. */
@media(min-width:1100px){.sec-map-wide .mapx-body{grid-template-columns:400px 1fr}.sec-map-wide .mapx-map,.sec-map-wide .mapx-list{height:680px}}
.mapx-legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-700)}
.mapx-legend span{display:inline-flex;align-items:center;gap:6px}
.mapx-legend{align-items:center;gap:8px 18px}
.mapx-legend span{gap:8px}
/* The markers of the map, drawn small at their real size (a scaled one keeps its full box and looks adrift). */
.mapx-legend .mk{display:grid;place-items:center;box-shadow:none;transform:none;cursor:default;flex:none;width:22px;height:22px;padding:0;font-size:10px}
.mapx-legend .mk .i{width:12px;height:12px}
.mapx-legend .mk-stay{width:auto;height:20px;padding:0 7px}
.mapx-legend .mk-svc{width:20px;height:20px}
.maplibregl-ctrl-attrib{font:10px/1.4 var(--sans)!important}
.map-static{position:relative;border-radius:var(--r-md);overflow:hidden}
.kicker{font:500 12px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--place-deep);margin:0 0 10px}
.cards-2{display:grid;gap:16px}
@media(min-width:768px){.cards-2{grid-template-columns:1fr 1fr;gap:24px}}
.cards-4{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.cards-4{grid-template-columns:repeat(4,1fr);gap:24px}}
.exp .specs{display:flex;flex-wrap:wrap;gap:6px 14px}
.plan[hidden],.band[hidden]{display:none}
.two{display:grid;gap:32px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:48px}}
.stack{display:grid;gap:12px}
.lead-ans{font-size:18px;line-height:1.6;color:var(--ink-700);max-width:66ch;margin:0}
.lead-ans a,.prose-links a{text-decoration:underline var(--place) 1px;text-underline-offset:3px}
.phero-grid>.photo{order:-1}
/* On phones the picture leads the page, so the heart sits on it, where the cards of a listing have it; the pill under the title is for wide screens. */
.phero-grid>div>.fav-block .save-inline{display:none}
@media(min-width:1024px){.phero-grid>.photo>.save{display:none}.phero-grid>div>.fav-block .save-inline{display:inline-flex}}
@media(min-width:1024px){.phero-grid>.photo{order:0}}

/* day plans: a drive, an easy walk and a table */
.plan-strip{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);overflow:hidden}
.plan-strip li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.plan-strip li:last-child{border-bottom:0}
.plan-strip li.leg{background:var(--sand)}
.plan-strip time{font:600 14px/1.4 var(--sans);font-variant-numeric:tabular-nums}
.plan-strip b{display:flex;align-items:center;gap:8px;font:600 15px/1.35 var(--sans)}
.plan-strip b .i{color:var(--place)}
.plan-strip span{display:block;font-size:13px;color:var(--ink-500);margin-top:3px}
@media(min-width:900px){
  .plan-strip{grid-template-columns:repeat(5,1fr)}
  .plan-strip li{grid-template-columns:1fr;gap:8px;padding:18px;border-bottom:0;border-right:1px solid var(--line)}
  .plan-strip li:last-child{border-right:0}
  .plan-strip b{align-items:flex-start;flex-direction:column;gap:10px}
}
.combo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;color:var(--ink-700);margin-top:6px}
.combo span{display:inline-flex;align-items:center;gap:6px}
.combo .i{width:16px;height:16px;color:var(--place)}
.combo i{font-style:normal;color:var(--ink-400)}
.origins{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:18px -20px 0;padding:2px 20px}
.origins::-webkit-scrollbar{display:none}
@media(min-width:900px){.origins{margin:18px 0 0;padding:2px 0;flex-wrap:wrap;overflow:visible}}
.origins .lbl{flex:none;font-size:13px;color:var(--ink-500)}
.origins .chip b{font-weight:600}
.swap{display:grid;gap:10px;align-content:start}
/* the side of a plan's route section: starts at the top, cards as tall as their text */
.plan-side{align-content:start}
.swap-head{display:grid;gap:4px;margin:4px 0 2px}
.swap-head .meta{margin:0}
.swap .card-row{align-items:flex-start}
.swap .card-row b span{font-weight:400;color:var(--ink-500)}

/* route-plan (component `route`): a plan as a timeline of stops with the leg between each pair (STYLE_GUIDE §8) */
.route-plan{--route-time:44px;--route-dot:28px;display:block;list-style:none;margin:0;padding:0;position:relative}
.route-plan::before{content:"";position:absolute;left:calc(var(--route-time) + 12px + var(--route-dot) / 2 - 1px);top:24px;bottom:24px;border-left:2px solid var(--line)}
.route-stop{display:grid;grid-template-columns:var(--route-time) var(--route-dot) 1fr;gap:0 12px;align-items:start;padding:12px 0}
.route-stop time{font:600 14px/var(--route-dot) var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-700)}
.route-dot{position:relative;z-index:1;width:var(--route-dot);height:var(--route-dot);border-radius:50%;display:grid;place-items:center;background:var(--place);color:#fff;font:600 13px/1 var(--sans)}
.route-dot .i{width:16px;height:16px}
.route-stop.is-end .route-dot{background:var(--sand);color:var(--ink-700);box-shadow:0 0 0 1px var(--line)}
.route-body{min-width:0}
.route-title{display:block;font:600 16px/1.35 var(--sans);padding-top:3px}
.route-title a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
.route-move,.route-place{display:inline-flex;align-items:center;gap:4px;font-size:13px;margin-top:2px}
.route-move{color:var(--ink-500)}
.route-place{color:var(--place-deep)}
.route-place .i{width:14px;height:14px}
.route-note{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--ink-500)}
.route-leg{position:relative;z-index:1;display:flex;align-items:center;gap:8px;width:fit-content;margin:2px 0 2px calc(var(--route-time) + 12px + var(--route-dot) / 2 - 14px);padding:4px 12px 4px 6px;border-radius:999px;background:var(--sand);box-shadow:0 0 0 3px #fff;font:500 13px/1.3 var(--sans);color:var(--ink-700)}
.route-leg .i{width:20px;height:20px;padding:2px;border-radius:50%;background:var(--white);color:var(--place)}
.route-leg[data-by="walk"],.route-leg[data-by="bike"]{background:var(--place-tint)}
.route-leg a,.route-move a{color:inherit;text-decoration-color:var(--place);text-underline-offset:3px}
.route-leg[data-by="plane"]{background:var(--place-tint)}
.route-km{color:var(--ink-500)}
.route-km::before{content:"·";margin-right:8px}
.route-provider{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.route-provider > div{display:grid;gap:1px;min-width:0;flex:1 1 auto}
.route-provider > .btn{flex:none;margin-left:auto}
.route-who{font:600 14px/1.35 var(--sans);color:var(--ink)}
.route-price{font-size:13px;color:var(--ink-700)}
.route-total{display:grid;gap:2px;margin-top:18px;padding:14px 16px;border-radius:var(--r-md);background:var(--place-tint)}
.route-total b{font:600 17px/1.35 var(--sans)}
.route-total p{margin:4px 0 0}
.route-cards .eyebrow{display:block;margin:0 0 2px;color:var(--place-deep)}
@media(min-width:900px){
  .route-plan{--route-time:64px;--route-dot:32px}
  .route-stop{padding:16px 0}
  .route-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2px 28px;align-items:start}
  .route-body > :not(.route-provider){grid-column:1}
  .route-provider{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .route-title{font-size:17px}
}

/* the trip profile is a lens: anything tagged for other profiles is hidden */
[hidden]{display:none!important}
.lens-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink-700);margin:0 0 18px}
.lens-note .tag{height:28px;padding:0 10px;font-size:13px}

/* prose written in Markdown: the body of a place */
.prose h2{font-family:var(--display);font-weight:var(--display-w);letter-spacing:-.015em;font-size:clamp(24px,2.2vw,28px);line-height:1.15;margin:0 0 8px;text-wrap:balance}
/* A heading inside running text opens a new part: air above it, more than below. */
.prose * + h2{margin-top:44px}
.prose * + h3{margin-top:32px}
.prose h2 em{font-style:italic;color:var(--place)}
.prose h3{font:600 20px/1.3 var(--sans);margin:28px 0 0}
.prose ul,.prose ol{font-size:18px;line-height:1.6;color:var(--ink-700);padding-left:22px}
.tips li div>p:first-of-type{margin-top:2px}
.callout div>p{margin:0}

/* Destinations grouped by country on listings */
.country-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 4px;padding:2px 20px}
.country-nav::-webkit-scrollbar{display:none}
.country-nav .chip{text-decoration:none;white-space:nowrap}
.country-nav .chip[aria-current=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.country{padding:28px 0 8px;border-top:1px solid var(--line);margin-top:28px;scroll-margin-top:194px}
.countries>.country:first-child{border-top:0;margin-top:0}
.country-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.country-head .eyebrow{margin:0 0 4px}
.country-head .display-s{margin:0}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font:500 14px/1.2 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.link-arrow:hover{text-decoration:underline;text-underline-offset:3px}
.country .swipe>*{flex:0 0 58%;max-width:260px}
@media(min-width:900px){
  .country-nav{margin:0 0 4px;padding:0;flex-wrap:wrap}
  .countries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .country{grid-column:span var(--span,4)}
  .country .swipe{grid-template-columns:repeat(var(--span,4),minmax(0,1fr))}
  .country .swipe>*{max-width:none}
}

/* Trip steps: the planning decisions that depend on each other, numbered in order */
.trip-steps{counter-reset:step;border-top:1px solid var(--line);margin-top:12px}
.trip-steps-head{padding:36px 0 0}
.trip-steps-head>p:not(.kicker){color:var(--ink-700);max-width:62ch;margin:12px 0 0}
.trip-steps-nav{list-style:none;margin:22px -20px 0;padding:2px 20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.trip-steps-nav::-webkit-scrollbar{display:none}
.trip-steps-nav a{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 7px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.trip-steps-nav a:hover{border-color:var(--place)}
.trip-steps-nav .n,.trip-steps>.sec>.sec-head .kicker::before{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--place-deep);color:#fff;font:600 13px/1 var(--sans);letter-spacing:0}
.trip-steps>.sec{counter-increment:step}
.trip-steps>.sec>.sec-head .kicker{display:flex;align-items:center;gap:10px}
.trip-steps>.sec>.sec-head .kicker::before{content:counter(step)}
@media(min-width:1024px){
  .trip-steps-nav{margin:22px 0 0;padding:0}
  .trip-steps>.sec{position:relative;padding-left:64px}
  .trip-steps>.sec>.sec-head .kicker::before{position:absolute;left:0;top:44px;width:38px;height:38px;font-size:16px}
  .trip-steps>.sec::after{content:"";position:absolute;left:18.5px;top:94px;bottom:-32px;width:1px;background:var(--line)}
  .trip-steps>.sec:last-child::after{display:none}
}

/* Site search: the pill in the header is a real search field; results drop below it */
.site-search{position:relative;min-width:0}
.site-search .search-compact{cursor:text;padding:0 6px 0 16px;gap:6px;max-width:none}
.site-search input{border:0;outline:0;background:none;font:500 14px/1 var(--sans);color:var(--ink);width:26vw;min-width:72px;max-width:190px;padding:0;-webkit-appearance:none;appearance:none}
.site-search input::placeholder{color:var(--ink);font-weight:600;opacity:1}
.site-search input:focus::placeholder{color:var(--ink-400);font-weight:400}
.site-search input::-webkit-search-cancel-button{display:none}
.site-search .search-compact:focus-within{border-color:var(--ink)}
.search-results{position:fixed;left:12px;right:12px;top:66px;z-index:60;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2);max-height:min(70vh,520px);overflow:auto;padding:6px}
.search-results a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.search-results a:hover,.search-results a[aria-selected="true"]{background:var(--sand)}
.search-results .ico,.search-list .ico{flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--sand);display:grid;place-items:center;color:var(--ink-700)}
.search-results .txt,.search-list .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.search-results b{font:600 15px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results .meta{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-empty{margin:0;padding:14px 12px;color:var(--ink-500);font-size:14px}
@media(min-width:900px){
  .site-search input{width:200px;max-width:none}
  .search-results{position:absolute;left:auto;right:0;top:calc(100% + 8px);width:420px}
}
/* Search results page */
.search-form{display:flex;gap:10px;max-width:640px;margin-top:22px}
.search-form .btn{flex:none;gap:8px}
.search-list{list-style:none;margin:0;padding:0;max-width:760px;border-top:1px solid var(--line)}
.search-list a{display:flex;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.search-list a{border-radius:var(--r-sm);transition:background-color .15s}
.search-list a,.search-list a:hover,.search-list a:hover *{text-decoration:none}
.search-list a:hover,.search-list a:focus-visible{background:var(--sand)}
.search-list a:hover .ico,.search-list a:focus-visible .ico{background:var(--paper,#fff)}
.search-list b{font:600 17px/1.3 var(--sans)}
.search-list .kind{color:var(--ink-700);font-weight:500}
.search-list .sum{color:var(--ink-700);font-size:15px;line-height:1.45}

/* Site pages: about, legal texts */
.phero .crumbs{margin-bottom:18px}
.doc-page{display:grid;gap:32px;padding:8px 0 56px}
.doc-page .prose{max-width:720px}
.doc-page .prose h2{margin-top:36px}
.doc-page table{font-size:14px}
.doc-aside{align-self:start;border-top:1px solid var(--line);padding-top:20px}
.doc-aside ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc-aside a{color:var(--ink);text-underline-offset:3px}
@media(min-width:1000px){.doc-page{grid-template-columns:minmax(0,720px) 240px;gap:72px}.doc-aside{border-top:0;border-left:1px solid var(--line);padding:4px 0 4px 24px;position:sticky;top:96px}}

/* Account and saved items */
.account{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;flex:none;text-decoration:none;color:var(--ink);font:600 15px/1 var(--sans);overflow:hidden}
.account:hover{border-color:var(--ink)}
.account.in{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.account img{width:100%;height:100%;object-fit:cover}
.account.has-photo{background:var(--white);border-color:var(--line);padding:0}
.save[aria-pressed="true"]{color:var(--danger)}
.save[aria-pressed="true"] .i{fill:currentColor}
.save.busy{opacity:.5}
/* account-layout: the visitor's own pages. The menu (account-nav) is a row of pills that scrolls on
   phones and a column beside the page from 1024px; signed out there is no menu. */
.account-nav{display:flex;gap:8px;overflow-x:auto;margin:16px -20px 0;padding:0 20px 4px;scrollbar-width:none}
.account-nav::-webkit-scrollbar{display:none}
.account-nav a{display:inline-flex;align-items:center;gap:8px;flex:none;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.account-nav a.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.account-nav a.out{color:var(--ink-500)}
html:not(.has-session) .account-nav{display:none}
@media(min-width:1024px){
  .account-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
  html:not(.has-session) .account-layout{display:block}
  .account-nav{position:sticky;top:96px;flex-direction:column;gap:2px;overflow:visible;margin:44px 0 0;padding:0}
  .account-nav a{height:42px;border:0;border-radius:10px;background:none}
  .account-nav a:hover{background:var(--sand,#F4EFE6)}
  .account-nav a.on{background:var(--sand,#F4EFE6);color:var(--ink);font-weight:600}
  .account-nav a.out{margin-top:10px;padding-top:0;border-top:0}
}
.account-card{display:flex;align-items:center;gap:14px}
.account-card p{margin:0;display:grid;gap:2px}
.account-face{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--sand,#F4EFE6);font:600 20px/1 var(--sans)}
.account-face img{width:100%;height:100%;object-fit:cover}
/* switch: a checkbox drawn as an on/off control, with its label beside it */
.switch{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px;font:500 15px/1.3 var(--sans);cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:var(--line);transition:background .15s}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px rgb(0 0 0/.25);transition:transform .15s}
.switch input:checked+.switch-track{background:var(--ink)}
.switch input:checked+.switch-track::after{transform:translateX(18px)}
.switch input:focus-visible+.switch-track{outline:2px solid var(--ink);outline-offset:2px}
.account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);max-width:760px}
.search-list .unsave{margin-left:auto;align-self:center;flex:none}

/* "Cerca de ti": choosing the city you leave from */
.origin-tools{display:flex;gap:10px;flex-wrap:wrap;max-width:640px;margin-bottom:8px}
.origin-tools .input{flex:1 1 240px}
.origin-tools .btn{gap:8px}
.origin-group{padding:22px 0 4px;border-top:1px solid var(--line);margin-top:22px}
.origin-group .eyebrow{margin:0 0 12px}
.origin-list{display:flex;flex-wrap:wrap;gap:8px}
.origin-list .chip{text-decoration:none}
.origin-list .chip.nearest{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* Logo: the word alone, lowercase, in the sans, bold and tight. The mark is only the favicon. */
.wordmark{font-family:var(--sans);font-weight:700;letter-spacing:-.045em;line-height:1;text-decoration:none}
.header .wordmark,.site-head .wordmark{font-size:24px}
.footer .wordmark{font-size:26px}
.brand-mark{width:1em;height:1em}

/* Listing filters and the ways of travelling on a place card */
.filters{display:grid;gap:12px;margin:4px 0 24px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md,16px);background:var(--white)}
.filter-group{display:grid;gap:8px;min-width:0}
.filter-label{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.filter-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
.filter-chips::-webkit-scrollbar{display:none}
.filter-chips .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.filter-select{height:40px;padding:0 44px 0 16px;border:1px solid var(--line);border-radius:999px;font:400 14px/1 var(--sans);color:var(--ink);max-width:240px;cursor:pointer;-webkit-appearance:none;appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C1A16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center}
.filter-select:hover{border-color:var(--ink-400)}
.filter-status{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;color:var(--ink-500)}
.filter-pair{display:flex;gap:10px;flex-wrap:wrap}
.filter-sub{display:grid;gap:8px}
.filter-relax{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:12px;background:var(--place-tint,#F4EFE6);font-size:14px;line-height:1.45;color:var(--ink)}
.filter-relax[hidden]{display:none}
.filter-clear{border:0;background:none;padding:0;font:600 13px/1 var(--sans);color:var(--ink);text-decoration:underline;cursor:pointer}
@media(min-width:900px){.filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;padding:20px 24px}.filter-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}.filter-status{grid-column:1/-1}}
.card[hidden],[data-filter-group][hidden]{display:none!important}
.card .ways{display:flex;gap:8px;margin:8px 0 0;color:var(--ink-500)}
.card .ways>span{display:inline-flex}
.card.in-season .title::after{content:"Mejor época";display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--place-soft);color:var(--place-deep);font:600 11px/1 var(--sans);vertical-align:middle}
.ways-list{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ways-list .chip{cursor:default}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Trip search: where, when, how, who with, what */
.trip-search{position:relative;margin-top:24px;max-width:1080px}
/* The type of search: a row of pills over the bar. The fields of the other types hide. */
.ts-types{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 10px;padding:0 20px}
.ts-types::-webkit-scrollbar{display:none}
.ts-type{flex:none;cursor:pointer}
.ts-type input{position:absolute;opacity:0;pointer-events:none}
.ts-type span{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:500 14px/1 var(--sans);color:var(--ink)}
.ts-type input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
.ts-type input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ts-bar{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:20px;background:var(--white);box-shadow:var(--shadow-1)}
.trip-search[data-type=all] [data-for]:not([data-for~=all]),.trip-search[data-type=destinations] [data-for]:not([data-for~=destinations]),
.trip-search[data-type=plans] [data-for]:not([data-for~=plans]),.trip-search[data-type=getaways] [data-for]:not([data-for~=getaways]),
.trip-search[data-type=near] [data-for]:not([data-for~=near]){display:none}
.ts-bar>.ts-field:not([data-for~=all]){grid-column:auto}
html:not(.js) .trip-search:has(input[name=type][value=plans]:checked) [data-for]:not([data-for~=plans]),html:not(.js) .trip-search:has(input[name=type][value=getaways]:checked) [data-for]:not([data-for~=getaways]),
html:not(.js) .trip-search:has(input[name=type][value=destinations]:checked) [data-for]:not([data-for~=destinations]),html:not(.js) .trip-search:has(input[name=type][value=near]:checked) [data-for]:not([data-for~=near]),
html:not(.js) .trip-search:has(input[name=type][value=""]:checked) [data-for]:not([data-for~=all]){display:none}
/* Sticky: the bar stays under the header while the page scrolls (from 900 px). */
/* Phone home: only the type buttons stick under the header; the form opens the page as usual.
   The wrapper and the form step out of the layout so the buttons stick within the whole page. */
@media(max-width:899px){
  .ts-sticky,.ts-sticky .trip-search{display:contents}
  .ts-sticky .ts-types{position:sticky;top:var(--head-h,61px);z-index:25;margin:14px -20px 4px;padding:10px 20px;background:rgb(var(--paper-rgb)/.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .ts-sticky .ts-types.is-stuck{border-bottom:1px solid var(--line)}
}
@media(min-width:900px){.ts-sticky::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(var(--paper-rgb)/.97);box-shadow:0 0 0 100vmax rgb(var(--paper-rgb)/.97);clip-path:inset(0 -100vmax)}.ts-sticky{position:sticky;top:var(--head-h,72px);z-index:25;margin:0 -20px;padding:10px 20px}.ts-sticky .trip-search{margin-top:0}}
.ts-field{display:grid;gap:2px;padding:12px 18px;border-bottom:1px solid var(--line);min-width:0;cursor:pointer}
.ts-label{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.ts-field input,.ts-field select{width:100%;border:0;background:none;padding:2px 0;margin:0;font:500 16px/1.3 var(--sans);color:var(--ink);outline:0;appearance:none;-webkit-appearance:none;text-overflow:ellipsis;cursor:pointer}
.ts-field input{cursor:text}
.ts-field input::placeholder{color:var(--ink-400);font-weight:400}
.ts-field:focus-within{background:var(--paper,#FDFBF7)}
.ts-field:focus-within .ts-label{color:var(--ink)}
.ts-where,.ts-go{grid-column:1/-1}
label.ts-field:nth-of-type(even){border-left:1px solid var(--line)}
.ts-go{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px;height:48px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:600 15px/1 var(--sans);cursor:pointer}
.ts-go:hover{opacity:.9}
@media(min-width:900px){
  .ts-types{margin:0 0 10px;padding:0}
  .ts-bar{display:flex;align-items:center;border-radius:999px;padding-left:10px}
  .ts-bar>.ts-field{flex:1 1 0}
  .ts-bar>.ts-where{flex:1.5 1 0}
  .ts-where,.ts-go{grid-column:auto}
  label.ts-field:nth-of-type(even){border-left:0}
  .ts-field{border-bottom:0;border-right:1px solid var(--line);padding:12px 18px}
  .ts-field:nth-last-of-type(1){border-right:0}
  .ts-go{flex:none}
  .ts-field input,.ts-field select{font-size:14px}
  .ts-go{margin:8px;height:48px;padding:0 22px}
}
/* Trips: the list, the planner and its print version */
.trip-new{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;background:var(--white);box-shadow:var(--shadow-1);overflow:hidden;max-width:860px}
.trip-new .ts-field:first-child,.trip-new .ts-go{grid-column:1/-1}
.trip-new .ts-field:nth-child(3){border-left:1px solid var(--line)}
@media(min-width:900px){.trip-new{grid-template-columns:2fr 1fr .7fr auto;align-items:center;border-radius:999px;padding-left:10px}.trip-new .ts-field:first-child,.trip-new .ts-go{grid-column:auto}.trip-new .ts-field{border-bottom:0;border-right:1px solid var(--line)}.trip-new .ts-field:nth-child(3){border-left:0;border-right:0}}
.trip-head .kicker a{color:inherit}
.trip-title{margin:0}
.trip-title-input{width:100%;border:0;background:none;font:inherit;color:inherit;padding:0;outline:0;border-bottom:1px dashed transparent}
.trip-title-input:hover,.trip-title-input:focus{border-bottom-color:var(--line)}
.trip-meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:12px}
.trip-date{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-500)}
.trip-date input{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:500 14px/1 var(--sans);color:var(--ink)}
.trip-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.trip-state.bad{color:#B3261E}
.trip-layout{display:grid;gap:28px;padding:8px 0 48px}
@media(min-width:1024px){.trip-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.trip-side{position:sticky;top:84px}}
.trip-day{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:16px;margin-bottom:16px}
.trip-day.target{border-color:var(--ink)}
.trip-day-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:10px}
.trip-day-head .n{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.trip-day-head .date{font-size:14px;color:var(--ink-500)}
.trip-day-title{flex:1 1 200px;min-width:0;height:36px;border:0;border-bottom:1px solid var(--line);background:none;font:500 15px/1 var(--sans);color:var(--ink);outline:0}
.trip-target{border:1px solid var(--line);border-radius:999px;background:none;height:30px;padding:0 12px;font:500 12px/1 var(--sans);cursor:pointer;color:var(--ink-500)}
.trip-target[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.trip-items{list-style:none;margin:0;padding:0}
.trip-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;padding:12px 0;border-top:1px solid var(--line)}
.trip-item:first-child{border-top:0}
.trip-item .ico{width:36px;height:36px;border-radius:10px;background:var(--paper,#F6F2EA);display:grid;place-items:center}
.trip-item .txt{display:grid;gap:3px;min-width:0}
.trip-item .txt a{color:inherit;text-decoration:none}
.trip-item .txt a:hover b{text-decoration:underline}
.trip-item .sum{font-size:14px;color:var(--ink-600,#4A4540)}
.trip-note,.trip-own{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:400 14px/1.4 var(--sans);color:var(--ink);background:var(--white);resize:none;overflow:hidden}
.trip-own{margin-top:0;font-weight:500}
.trip-note:placeholder-shown{border-style:dashed}
.trip-item-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.trip-item-actions button,.trip-move{height:30px;min-width:30px;border:1px solid var(--line);border-radius:8px;background:var(--white);display:inline-grid;place-items:center;cursor:pointer;color:var(--ink);font:500 12px/1 var(--sans)}
.trip-item-actions button:disabled{opacity:.35;cursor:default}
.trip-move{padding:0 8px}
.i.flip{transform:rotate(180deg)}
.trip-empty{margin:4px 0 8px}
.trip-line{display:flex;gap:8px;margin-top:10px}
.trip-line input{flex:1;min-width:0;height:38px;border:1px dashed var(--line);border-radius:10px;padding:0 12px;font:400 14px/1 var(--sans);background:none}
.trip-remove-day{margin-top:10px;border:0;background:none;padding:0;font:500 13px/1 var(--sans);color:var(--ink-500);text-decoration:underline;cursor:pointer}
.trip-box{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:16px;margin-bottom:16px}
.trip-box h2{margin:0 0 10px}
.trip-search-field{border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.trip-pool{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.trip-pool li{display:grid;grid-template-columns:32px minmax(0,1fr) 36px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.trip-pool li:first-child{border-top:0}
.trip-pool li.meta{display:block}
.trip-pool .ico{width:32px;height:32px;border-radius:8px;background:var(--paper,#F6F2EA);display:grid;place-items:center}
.trip-pool .txt{display:grid;gap:2px;min-width:0}
.trip-pool .txt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trip-pool .meta{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trip-add{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer}
.trip-add.done{background:var(--place-soft,#E8F0E8);border-color:transparent}
.print-only{display:none}
@media print{
  @page{margin:16mm 14mm}
  body{background:var(--white)}
  .site-head,.footer,.site-foot,footer,.no-print,.sticky,.sec-tabs{display:none!important}
  .print-only{display:block}
  .fav-block,.save{display:none!important}
  .print-qr{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:10px 0 0;border-top:1px solid #ccc;break-inside:avoid;font:400 10px/1.4 var(--sans);color:#444}
  .print-qr svg{width:26mm;height:26mm;flex:none}
  .print-qr p{margin:0}
  .print-qr b{display:block;font-size:12px;color:#000}
  .print-qr span{word-break:break-all}
  .trip-page{padding:0}
  .trip-head{padding:0 0 10px}
  .print-brand{font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#666;margin:0 0 8px}
  .trip-title-input{display:none}
  .trip-title{font-size:28px}
  .trip-layout{display:block;padding:0}
  .trip-day{border:0;border-top:2px solid #000;border-radius:0;padding:10px 0 4px;margin:0 0 10px;break-inside:auto}
  .trip-day-head{margin-bottom:4px}
  .trip-day-head .n{font-size:12px}
  .print-day-title{font:600 15px/1.3 var(--sans);flex-basis:100%}
  .trip-item{grid-template-columns:24px minmax(0,1fr);padding:7px 0;break-inside:avoid;border-top-color:#ddd}
  .trip-item .ico{width:24px;height:24px;background:none}
  .trip-item .sum{font-size:11px;color:#333}
  .trip-item .meta{font-size:10px}
  .trip-item b{font-size:13px}
  .print-url{font-size:9px;color:#666;word-break:break-all}
  .print-note{font-size:12px;font-style:italic;margin:2px 0 0}
  .trip-item.own .print-only{font:500 13px/1.3 var(--sans);margin:3px 0 0}
  .print-foot{font-size:9px;color:#666;margin-top:16px}
  a{color:#000}
  /* A day plan on paper: the route with times, legs, contact of each stop and the cost, then
     the prose and tips; no header, map, booking buttons, alternatives or related cards. */
  .print-plan .stuck,.print-plan .sec-tabs,.print-plan #map,.print-plan #eat,.print-plan #more,.print-plan #faq,.print-plan .origins,
  .print-plan .btn,.print-plan .row,.print-plan .zones,.print-plan .belongs,.print-plan .crumbs,.print-plan .phero .photo,.sticky-bar,.sheet-panel{display:none!important}
  .print-plan .print-brand{display:block;margin:0 0 6px}
  .print-plan .phero,.print-plan .phero-grid{display:block;padding:0;min-height:0}
  .print-plan h1{font-size:26px;line-height:1.1;margin:0 0 6px}
  .print-plan .lead{font-size:12px;margin:0 0 10px}
  .print-plan .wrap{padding:0;max-width:none}
  .print-plan .sec{padding:14px 0 0;margin:0}
  .print-plan .sec-head p{display:none}
  .print-plan .display-m{font-size:18px}
  .print-plan .specs-grid{break-inside:avoid}
  .print-plan .specs-grid:has(>:nth-child(4)){grid-template-columns:repeat(4,1fr)}
  .print-plan .specs-grid>div{padding:6px 8px}
  .print-plan .specs-grid b{font-size:12px}
  .route-plan{--route-time:40px;--route-dot:22px}
  .route-stop{padding:6px 0;break-inside:avoid}
  .route-body{display:block}
  .route-title{font-size:13px}
  .route-note,.route-move,.route-place{font-size:10.5px}
  .route-contact{display:block;font-size:10px;color:#333;margin:2px 0 0}
  .route-provider{display:flex;margin-top:4px;padding:4px 8px;border-color:#ccc;break-inside:avoid}
  .route-leg{font-size:10px;padding:2px 8px 2px 4px;box-shadow:none;break-inside:avoid;break-after:avoid}
  .route-total{break-inside:avoid;padding:8px 10px;margin-top:8px}
  .print-plan .two{display:block}
  .print-plan .plan-side{display:none}
  .print-plan .prose,.print-plan .prose p,.print-plan .prose li{font-size:11.5px;line-height:1.5}
  .print-plan .prose h2{font-size:17px;margin-top:14px}
  .print-plan .option{padding:10px 12px}
  .print-plan .option .title{font-size:14px}
  .print-plan .option p{font-size:11px}
  .print-plan .option,.print-plan .tip{break-inside:avoid}
  .print-plan .print-foot{display:block;border-top:1px solid #ccc;padding-top:6px}
  .print-plan .print-foot b{font-size:10px;color:#000}
}
/* Sheets: a side panel on a large screen, the whole screen on a phone */
[data-sheet]{cursor:pointer}
.sheet-link{color:inherit;text-decoration:none}
.sheet-link:hover{text-decoration:underline}
/* A business named in an offer links its own page, in the colour of the text around it. */
.option .title a,.offered a{color:inherit;text-decoration:none}
.option .title a:hover,.offered a:hover{text-decoration:underline}
.do-vendors{margin:20px 0 0;line-height:1.7}
.do-vendors a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.sheet{position:fixed;inset:0;z-index:1000}
.sheet-shade{position:absolute;inset:0;background:rgb(20 18 15/.0);transition:background .2s var(--ease)}
.sheet.in .sheet-shade{background:rgb(20 18 15/.45)}
.sheet-panel{position:absolute;inset:0;background:var(--paper,#FDFBF7);overflow-y:auto;overscroll-behavior:contain;outline:0;transform:translateY(16px);opacity:0;transition:transform .2s var(--ease),opacity .2s var(--ease);-webkit-overflow-scrolling:touch}
.sheet.in .sheet-panel{transform:none;opacity:1}
.sheet-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--paper,#FDFBF7);border-bottom:1px solid var(--line)}
.sheet-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer}
.sheet-full{font:500 13px/1 var(--sans);color:var(--ink-500)}
.sheet-body .photo{border-radius:0}
.sheet-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:4px}
.sheet-gallery.sheet-pair{margin-top:0}
.sheet-gallery.n3 .photo:first-child{grid-column:1/-1;aspect-ratio:2/1}
@media (min-width:1024px){.item-main .sheet-gallery.n3{grid-template-columns:repeat(3,1fr)}.item-main .sheet-gallery.n3 .photo:first-child{grid-column:auto;aspect-ratio:4/3}}
/* One column that never grows past the panel: a long line inside "Leer más" made it scroll sideways. */
.sheet-text{padding:18px 20px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sheet-text .kicker{display:flex;align-items:center;gap:6px;margin:0}
.sheet-text .kicker a{color:inherit}
.sheet-title{margin:0}
.sheet-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.sheet-facts div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper,#FDFBF7)}
.sheet-facts dt{display:flex;align-items:center;gap:6px;font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.sheet-facts dd{margin:4px 0 0;font:500 15px/1.3 var(--sans)}
.sheet-tip{background:var(--place-tint,#F4EFE6);border-radius:12px;padding:12px 14px;margin:0}
.sheet-note{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-600,#4A4540);margin:0}
.sheet-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sheet-sub{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:8px 0 0}
.sheet-offers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sheet-offers li{display:grid;gap:4px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--white)}
.sheet-offers .btn{justify-self:start;margin-top:4px}
.sheet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sheet-reviewed{font-size:12px}
/* Provider data: the practical rows, opening hours, chip lists, conditions and third-party opinions (STYLE_GUIDE §8, content/) */
.practical{margin:0;border-top:1px solid var(--line)}
.practical>div{display:grid;grid-template-columns:minmax(104px,32%) 1fr;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);align-items:start}
.practical dt{display:flex;align-items:center;gap:6px;font:600 11px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.practical dd{margin:0;font:500 15px/1.4 var(--sans);min-width:0;overflow-wrap:anywhere}
.practical dd a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.practical dd a:hover{text-decoration-color:currentColor}
.practical-tint{border:0;background:var(--place-tint,#F4EFE6);border-radius:12px;padding:4px 14px}
.practical-tint>div:last-child{border-bottom:0}
.practical-verified{font-size:12px;margin:0}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hours li{display:grid;grid-template-columns:5.5em 1fr;gap:8px}
.hours .closed{color:var(--ink-500)}
.hours-note{margin:4px 0 0;font-size:13px}
.chip-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip-list .chip{cursor:default;height:auto;min-height:32px;padding-block:6px;white-space:normal}
.chip-list .chip:hover{border-color:var(--line)}
.policies{margin:0;display:grid;gap:10px}
.policies dt{font:600 13px/1.3 var(--sans)}
.policies dd{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--ink-700)}
.opinions{display:grid;gap:10px}
.opinions-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.opinions-score b{font:600 22px/1 var(--sans)}
.opinions-score .meta{flex-basis:100%;font-size:13px}
.opinion{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.opinion p{margin:0;font-size:15px;line-height:1.5}
.opinion footer{margin-top:6px;font-size:13px;color:var(--ink-500)}
.opinions-note{font-size:12px;margin:0}
.vendor-runs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vendor-runs li{display:grid;gap:4px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--white)}
.vendor-runs b{font:600 17px/1.3 var(--sans)}
.vendor-runs a{color:inherit;text-decoration:none}
.vendor-runs a:hover{text-decoration:underline;text-underline-offset:3px}
.sheet-offers b a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
@media (min-width:1024px){.item-main .practical>div{grid-template-columns:180px 1fr}}
html.sheet-open{overflow:hidden;scrollbar-gutter:stable}
html.sheet-open body{overflow:hidden;overscroll-behavior:none}
@media(min-width:768px){
  .sheet-panel{left:auto;width:min(552px,100%);box-shadow:-12px 0 32px rgb(0 0 0/.12);transform:translateX(24px)}
  .sheet.in .sheet-panel{transform:none}
}
.sheet-page{max-width:720px;padding-top:12px;padding-bottom:48px}
.sheet-page .sheet-body{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper,#FDFBF7)}
/* Blocks filled in by the script: a placeholder of their size until then */
@keyframes geo-shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skeleton-row,.skeleton-card,.skeleton-line,.filters-skeleton span,.has-session .account:not(.in){background:linear-gradient(90deg,var(--line) 0,var(--sand) 40%,var(--line) 80%);background-size:400px 100%;animation:geo-shimmer 1.2s linear infinite}
.skeleton-row{list-style:none;height:56px;border-radius:12px;margin:0 0 10px}
.skeleton-card{height:180px;border-radius:16px;margin:0 0 16px}
.skeleton-list{list-style:none;margin:0;padding:0;max-width:760px}
.skeleton-line{display:block;height:14px;border-radius:7px;margin:0 0 12px}
.skeleton-line.w90{width:90%}.skeleton-line.w80{width:80%}.skeleton-line.w60{height:26px;width:60%;margin-bottom:18px}.skeleton-line.w40{width:40%;margin-bottom:24px}
.skeleton-sheet{padding:20px}
.skeleton-hero{height:220px}
html:not(.js) .filters{display:none}
.filters.is-loading{min-height:150px}
@media(min-width:900px){.filters.is-loading{min-height:118px}}
.filters-skeleton{display:grid;gap:12px}
.filters-skeleton span{display:block;height:32px;border-radius:999px;max-width:520px}
.filters-skeleton span:nth-child(2){max-width:360px}
.filters-skeleton span:nth-child(3){max-width:220px}
.has-session .account:not(.in){color:transparent;border-color:transparent}
.has-session .account:not(.in) svg{visibility:hidden}
.session-ready .account:not(.in){animation:none;background:var(--white);color:var(--ink);border-color:var(--line)}
.session-ready .account:not(.in) svg{visibility:visible}
.trip-page.is-loading .trip-title-input{color:transparent}
/* "Dónde" autocomplete: a menu that opens below the field */
.ts-where{position:relative;border-radius:20px 20px 0 0}
.ts-where .ts-label{cursor:text}
.where-menu{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:40;max-height:min(420px,60vh);overflow-y:auto;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgb(0 0 0/.14);padding:6px}
.where-menu button{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px 10px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.where-menu button:hover,.where-menu button[aria-selected=true]{background:var(--place-tint,#F4EFE6)}
.where-swatch{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--place-soft);color:var(--place-deep)}
.where-text{display:grid;gap:2px;min-width:0}
.where-text b{font:600 15px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-text mark{background:none;color:var(--place-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.where-meta{font-size:13px;color:var(--ink-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-count{font:500 12px/1 var(--sans);color:var(--place-deep);background:var(--place-soft);border-radius:999px;padding:6px 9px;white-space:nowrap}
.where-head{margin:6px 10px 4px;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.where-empty{margin:10px;font-size:14px;color:var(--ink-500)}
@media(min-width:900px){.ts-where{border-radius:999px 0 0 999px}.where-menu{left:0;right:auto;width:min(460px,90vw)}}
/* Header on phones: logo and controls on the first row, the search wide on the second */
@media(max-width:767px){
  .site-head .header{display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:8px;row-gap:8px;height:auto;padding:10px 0}
  .site-head .head-right{display:contents}
  .site-head .wordmark{grid-column:1;grid-row:1}
  .site-head .account{grid-column:2;grid-row:1}
  .site-head .site-search{grid-column:1/-1;grid-row:2;position:relative}
  .site-head .site-search .search-compact{display:flex;width:100%;height:44px}
  .site-head .site-search input{flex:1;width:auto;max-width:none;font-size:16px}
  .site-head .search-results{position:absolute;left:0;right:0;top:calc(100% + 6px)}
  .site-head .account{width:40px;height:40px}
  .sec-tabs{top:114px}
  [id]{scroll-margin-top:164px}
  .country{scroll-margin-top:294px}
}
/* The landing of one place to eat, to sleep, a service or a thing to do */
.item-page{padding-top:14px;padding-bottom:48px}
.item-crumbs{margin-bottom:12px}
.item-layout{display:grid;gap:28px}
.item-main .sheet-text{padding:18px 20px 32px}
.item-side h2{margin:0 0 10px}
.item-near{margin-bottom:20px}
.item-place{display:block;text-decoration:none}
.vendor-book{margin:0 0 16px;padding:14px 16px}
.ad-slot{margin-top:20px;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);min-height:250px}
.ad-slot .caption{display:block;margin-bottom:6px;color:var(--ink-500)}
.side-list{margin-top:8px}
.side-list .around-h{margin-top:24px}
.side-list .search-list a{padding:12px 8px}
.side-list .search-list b{font-size:15px}
.side-list .search-list .sum{font-size:13px}
@media(min-width:1024px){.item-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.item-side{position:sticky;top:96px}.item-layout:has(.avail){align-items:stretch}.item-layout:has(.avail) .item-side{position:static}.item-side .avail{position:sticky;top:96px;z-index:4;box-shadow:0 6px 24px rgb(22 21 19/.06),0 0 0 24px var(--paper,#FDFBF7)}}
/* The sticky availability box carries a band of page colour around it, so the list that scrolls under it never peeks out at its edges. */
.sheet-tips{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px}
.sheet-faq details{border-top:1px solid var(--line);padding:10px 0}
.sheet-faq summary{font:600 15px/1.35 var(--sans);cursor:pointer}
.sheet-faq details div{margin-top:6px;font-size:15px;color:var(--ink-700,#3a3530)}
.sheet-text .alert{margin:0}

/* ── Reusable: phone-first page pieces (STYLE_GUIDE.md section 8, ui/ and layout/) ── */
/* bleed-phone: runs to the screen edges on a phone, back inside the page from 768 px. */
.bleed-phone{margin-left:-20px;margin-right:-20px}
@media(min-width:768px){.bleed-phone{margin-left:0;margin-right:0}}
/* card-tablet: no card on a phone; a framed card from 768 px. */
@media(min-width:768px){.card-tablet{border:1px solid var(--line);border-radius:20px;overflow:clip;background:var(--paper,#FDFBF7)}}
/* stuck: the name of the page stays under the header once its title has scrolled away.
   The container has data-stuck, the title data-stuck-anchor; the script adds .is-stuck. */
.stuck{position:sticky;top:var(--head-h,61px);z-index:20;height:0}
.stuck>div{position:absolute;left:0;right:0;top:0;display:grid;gap:2px;padding:10px 20px;background:rgb(var(--paper-rgb)/.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease);pointer-events:none}
/* On every page the bar runs from edge to edge of the screen, and its text lines up with the page column (.wrap).
   Inside the side sheet panel it stays within the panel. */
.stuck>div{position:fixed;top:var(--head-h,61px);padding-left:max(20px,calc((100vw - 1280px) / 2 + 48px));padding-right:max(20px,calc((100vw - 1280px) / 2 + 48px))}
@media(min-width:768px){.stuck>div{padding-left:max(32px,calc((100vw - 1280px) / 2 + 48px));padding-right:max(32px,calc((100vw - 1280px) / 2 + 48px))}}
@media(min-width:1024px){.stuck>div{padding-left:max(48px,calc((100vw - 1280px) / 2 + 48px));padding-right:max(48px,calc((100vw - 1280px) / 2 + 48px))}}
.sheet-panel .stuck>div{position:absolute;top:0;padding:10px 20px}
.stuck b{font:600 16px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stuck span{font:500 12px/1.2 var(--sans);color:var(--ink-500)}
.is-stuck>.stuck>div,.is-stuck .stuck-desk>div{opacity:1;transform:none}
/* Where the browser knows a sticky element is stuck, CSS shows the bar by itself; the script is the fallback. */
.stuck{container-type:scroll-state}
@container scroll-state(stuck: top){.stuck>div{opacity:1;transform:none}}
.stuck.stuck-dark>div{background:rgb(22 21 19/.94);border-color:transparent;color:#fff}
.stuck.stuck-dark span{color:rgb(255 255 255/.7)}
.sheet-panel .stuck{display:none}
/* stuck-desk: the place name under the header on desktop, as wide as the window with its hairline, the text
   aligned with the content; the phone has the section tabs. The page box clips what passes the window edge. */
.stuck-page{overflow-x:clip}
.stuck-desk{display:none}
/* stuck-phone: the same bar below 1100 px, where stuck-desk is not shown (a plan's title on every screen) */
@media(min-width:1100px){.stuck-phone{display:none}}
@media(min-width:1100px){[data-stuck] .rail-col{top:150px}.stuck-desk{display:block;margin:0 -20px}.stuck-desk>div{padding-top:12px;padding-bottom:12px}.stuck-desk b{font:var(--display-w) 22px/1.15 var(--display);letter-spacing:-.01em}.is-stuck .stuck-desk>div{opacity:1;transform:none}}
.sheet-bar-title{flex:1;min-width:0;font:600 15px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .18s var(--ease)}
.sheet-panel.is-stuck .sheet-bar-title{opacity:1}
.sheet-bar-cta{flex:none;display:none}
.sheet-dock{display:none}
@media(max-width:767px){.sheet-panel .sheet-dock{display:flex;position:sticky;bottom:0;opacity:1;visibility:visible;pointer-events:auto;left:auto;right:auto;width:100%;box-sizing:border-box;margin:24px 0 0}.sheet-panel.is-stuck .sheet-bar-cta{display:none!important}.sheet-panel.is-stuck .sheet-bar-cta~.sheet-full{display:inline}}
.sheet-panel.is-stuck .sheet-bar-cta{display:inline-flex}
.sheet-panel.is-stuck .sheet-bar-cta~.sheet-full{display:none}
/* disclosure: secondary detail closed behind a label, an optional teaser and a chevron. */
.disclosure{border:1px solid var(--line);border-radius:12px;background:var(--white)}
.disclosure>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font:500 15px/1.3 var(--sans)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary b{font-weight:600}
.disclosure-teaser{color:var(--ink-500);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disclosure-chevron{margin-left:auto;flex:none;transition:transform .18s var(--ease)}
.disclosure[open] .disclosure-chevron{transform:rotate(180deg)}
.disclosure-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:0 14px 14px}
.disclosure-flat{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none}
.disclosure-flat>summary,.disclosure-flat .disclosure-body{padding-left:0;padding-right:0}
.disclosure-tint{border-color:transparent;background:var(--place-tint,#F4EFE6)}
/* clamp: long text takes at most half the screen (or a third) until "Leer más". */
.clamp{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;--clamp-h:50vh}
@supports(height:1svh){.clamp{--clamp-h:50svh}.clamp[data-clamp=third]{--clamp-h:33svh}}
.clamp[data-clamp=third]{--clamp-h:33vh}
html.js .clamp.is-clamped{max-height:var(--clamp-h);overflow:hidden;position:relative}
html.js .clamp.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;background:linear-gradient(rgb(var(--paper-rgb)/0),var(--clamp-fade,var(--paper,#FDFBF7)));pointer-events:none}
.clamp-more{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;font:600 14px/1 var(--sans);cursor:pointer;color:var(--ink)}
.clamp-more[hidden]{display:none}
/* avail: dates and party, then one action. Top of a sheet's sticky column; the phone bar jumps to it. */
.avail{display:grid;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md,20px);padding:20px;box-shadow:0 6px 24px rgb(22 21 19/.06);margin-bottom:24px;scroll-margin-top:250px}
@media(max-width:767px){.avail{scroll-margin-top:304px}}
.avail-price{margin:0;font:500 15px/1.3 var(--sans);color:var(--ink-500)}
.avail-price b{font:600 22px/1.2 var(--sans);color:var(--ink)}
.avail-fields{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink-400);border-radius:14px;overflow:hidden;position:relative}
.avail-cell{display:grid;gap:2px;padding:10px 12px;min-width:0;cursor:pointer}
.avail-cell>span,.avail-party summary>span{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.avail-cell input{border:0;padding:0;font:400 15px/1.3 var(--sans);background:none;color:var(--ink);width:100%;min-width:0}
.avail-cell input:focus{outline:0}
.avail-cell select{border:0;padding:0;font:400 15px/1.3 var(--sans);background:none;color:var(--ink);width:100%;min-width:0;appearance:none;cursor:pointer}
.avail-cell select:focus{outline:0}
.avail-cell:focus-within{outline:0;background:var(--sand,#F1ECE3)}
.avail-party[open]{background:none}
.avail-party[open]>summary{padding-bottom:6px}
.avail-fields>.avail-cell:nth-child(2){border-left:1px solid var(--ink-400)}
.avail-wide{grid-column:1/-1}
.avail-fields>.avail-wide:not(:first-child){border-top:1px solid var(--ink-400)}
.avail-party summary{display:grid;grid-template-columns:1fr auto;align-items:center;list-style:none;cursor:pointer}
.avail-party summary::-webkit-details-marker{display:none}
/* No outline of its own: the cell already turns sand while it has focus. A full-width row never takes the divider meant for the second date. */
.avail-party summary:focus{outline:0}
.avail-fields>.avail-cell.avail-wide:nth-child(n){border-left:0}
.avail-party summary b{grid-column:1;font:400 15px/1.3 var(--sans)}
.avail-party summary .disclosure-chevron{grid-column:2;grid-row:1/3}
.avail-party[open] .disclosure-chevron{transform:rotate(180deg)}
.avail-pop{margin-top:8px}
.avail-nights{margin:0}
.avail-go{width:100%}

.avail-call{justify-self:center}
.avail-note{margin:0;font-size:12px;line-height:1.4;color:var(--ink-500);text-align:center}
@media(min-width:1024px){.sticky-bar-item{display:none}}
/* One search: where the page carries the search bar, the header leaves its own out. */
body:has(.ts-wrap) .site-head .site-search{display:none}
.origin-aliases{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.origin-aliases[hidden]{display:none}
.origin-aliases .chip{text-decoration:none}
.near-from{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--place-tint,#F4EFE6);font-size:15px}
.near-from[hidden]{display:none}
.ts-city{position:relative}
.ts-city .ts-label{cursor:text}
.ts-city .where-menu{right:auto;width:min(360px,calc(100vw - 40px))}
/* No divider between the last field of each type and the Buscar button. */
@media(min-width:900px){
  .trip-search[data-type=all] .ts-field:has([name=what]),.trip-search[data-type=destinations] .ts-field:has([name=what]),
  .trip-search[data-type=plans] .ts-field:has([name=include]),.trip-search[data-type=getaways] .ts-field:has([name=month]),
  .trip-search[data-type=near] .ts-city{border-right:0}
}
@media(min-width:900px){.trip-search:not([data-type=near]) .ts-bar>.ts-city{border-right:1px solid var(--line)}}
/* "Vuelas desde" belongs to "En avión": it shows only while that way of travelling is chosen. */
.trip-search:not(:has(select[name=how] option[value=fly]:checked)) .ts-fly{display:none}
.card-flight{display:flex;align-items:flex-start;gap:6px;color:var(--ink)}
.card-flight svg{flex:none;margin-top:2px}
.flight-source{display:flex;align-items:flex-start;gap:6px;margin:0 0 18px;max-width:72ch}
.flight-source svg{flex:none;margin-top:2px}
/* Results being changed in place by a new search. */
[data-results]{transition:opacity .15s}
[data-results][aria-busy=true]{opacity:.45;pointer-events:none}
@media(prefers-reduced-motion:reduce){[data-results]{transition:none}}
/* Phone: the first field and a round button; the rest opens under "Fechas y filtros". */
.ts-toggle{display:none}
@media(max-width:899px){
  .ts-bar{grid-template-columns:1fr 1fr}
  .ts-bar>.ts-where,.ts-bar>.ts-city{grid-column:1/-1;order:0;padding:14px 72px 14px 18px;border-bottom:0;border-radius:20px}
  .ts-bar>.ts-go{position:absolute;top:9px;right:9px;width:48px;height:48px;margin:0;padding:0;grid-column:auto}
  .ts-bar>.ts-go span{display:none}
  .ts-toggle{grid-column:1/-1;order:1;display:flex;align-items:center;gap:8px;width:100%;padding:12px 18px;border:0;border-top:1px solid var(--line);background:none;font:500 14px/1.2 var(--sans);color:var(--ink);cursor:pointer;text-align:left;border-radius:0 0 20px 20px}
  .ts-toggle b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:600 12px/1 var(--sans)}
  .ts-toggle b[hidden]{display:none}
  .ts-toggle .disclosure-chevron{margin-left:auto}
  .ts-bar.is-open .ts-toggle{border-radius:0}
  .ts-bar.is-open .ts-toggle .disclosure-chevron{transform:rotate(180deg)}
  .trip-search[data-type=near] .ts-toggle{display:none}
  .ts-bar>.ts-more{order:2;border:0;border-top:1px solid var(--line);box-shadow:1px 0 0 var(--line)}
  .ts-bar:not(.is-open)>.ts-more{display:none}
}
.origin-city{flex:1 1 280px;border:1px solid var(--ink-400);border-radius:var(--r-ctl,14px);background:var(--white);position:relative}
.origin-city .ts-field{border:0;padding:8px 14px}
/* around: the rest of the plan of a thing to do. */
.around-h{display:flex;align-items:center;gap:8px;margin:28px 0 12px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.around-note{margin:10px 0 0}
.around-cols{display:grid;gap:8px 40px}
@media(min-width:900px){.around-cols{grid-template-columns:1fr 1fr}}
/* Sticky filters (Cerca de): the filter card becomes one row that scrolls sideways, in a band
   under the header like the section tabs; the count and the relaxed note follow under it. */
.filters-sticky{position:sticky;top:var(--head-h,61px);z-index:20;margin:8px -20px 0;padding:0 20px}
.filters-sticky::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(var(--paper-rgb)/.97);box-shadow:0 0 0 100vmax rgb(var(--paper-rgb)/.97);clip-path:inset(0 -100vmax)}
.filters-sticky .filters{display:flex;flex-wrap:nowrap;align-items:center;gap:18px;margin:0 -20px;padding:10px 20px;border:0;border-radius:0;background:none;overflow-x:auto;scrollbar-width:none}
.filters-sticky .filters::-webkit-scrollbar{display:none}
.filters-sticky .filters.is-loading{min-height:56px}
.filters-sticky .filters-skeleton{display:flex}
.filters-sticky .filter-group{display:flex;align-items:center;gap:8px;flex:none}
.filters-sticky .filter-chips{margin:0;padding:0;overflow:visible;flex-wrap:nowrap}
.filters-sticky .filter-select{height:34px;font-size:13px;padding:0 36px 0 14px;background-position:right 14px center}
.filters-sticky .filter-status{flex:none;white-space:nowrap}
.filters-sticky .filter-relax{flex:none;max-width:420px;padding:8px 12px;font-size:13px}
@media(min-width:900px){.filters-sticky .filters{margin:0;padding:12px 0;overflow-x:auto;scrollbar-width:thin}.filters-sticky .filter-chips{flex-wrap:nowrap}}
/* The filters as one box of fields, like the search of the home: label over choice, one row.
   Below it, what is applied (a chip each, with its icon), the count and any note. */
.filters-sticky .filters.filters-box{display:block;margin:0;padding:8px 0 10px;border:0;border-radius:0;background:none;overflow:visible}
.filters-fields{display:flex;align-items:stretch;padding-left:6px;border:1px solid var(--line);border-radius:999px;background:var(--white);box-shadow:var(--shadow-1);overflow-x:auto;scrollbar-width:none}
.filters-fields::-webkit-scrollbar{display:none}
.filters-box .ts-label{white-space:nowrap}
.filters-box .ts-field{flex:1 0 auto;min-width:128px;padding:8px 16px;border-bottom:0;border-right:1px solid var(--line)}
.filters-box .ts-field:last-child{border-right:0}
.filters-box .ts-field select{font-size:14px;cursor:pointer}
.filters-box .filter-applied{flex-wrap:wrap;gap:8px 12px;margin:10px 4px 0;white-space:normal}
.filters-box .filter-applied .filter-chips{margin:0;padding:0;flex-wrap:wrap;overflow:visible}
.filters-box .filter-applied .filter-chips:empty{display:none}
.chip-applied{gap:6px;cursor:pointer}
.chip-applied .i:last-child{width:12px;height:12px;opacity:.6}
.filters-box .filter-relax{margin:10px 0 0;max-width:none}
/* The line under the section tabs belongs to the bar once it is pinned under the header; in its place in the page it has none. */
.sec-tabs.is-pinned::after,.filters-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;background:var(--line);box-shadow:0 0 0 100vmax var(--line);clip-path:inset(0 -100vmax)}
@media(min-width:900px){.ts-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;background:var(--line);box-shadow:0 0 0 100vmax var(--line);clip-path:inset(0 -100vmax)}}
/* A stuck bar with the page's main buttons on the right (plans, getaways): they take clicks only while the bar shows. */
.stuck-acts>div{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px}
.stuck-text{display:grid;gap:2px;min-width:0}
.stuck-text>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stuck-actions{display:flex;gap:8px}
.stuck-actions .btn{white-space:nowrap}
.is-stuck>.stuck-acts>div,.is-stuck .stuck-desk.stuck-acts>div{pointer-events:auto}
@container scroll-state(stuck: top){.stuck-acts>div{pointer-events:auto}}
@media(max-width:699px){.stuck-actions .stuck-more{display:none}}
/* save-inline: the heart as a pill with its word ("Guardar" / "Guardado"), in fav-block */
.save-inline{display:inline-flex;align-items:center;gap:8px;margin-top:16px;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:500 14px/1 var(--sans);color:var(--ink);cursor:pointer}
/* meter: a share of a whole (quotas, coverage); Ui::meter() */
.meter{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
.meter-inline{display:inline-block;width:64px;height:4px;margin-left:8px;vertical-align:middle}
.meter-warn i{background:var(--warning)}
.meter-full i{background:var(--danger)}
/* facepile: overlapping round pictures; Ui::facepile() */
.facepile{display:inline-flex;align-items:center}
.facepile .face{position:relative;z-index:calc(1 + var(--n,0));display:grid;place-items:center;width:34px;height:34px;margin-left:-10px;border-radius:50%;border:2px solid #fff;background:var(--sand,#EFE7DA);color:var(--ink-700);font:600 13px/1 var(--sans);overflow:hidden;text-decoration:none;flex:none}
.facepile .face:first-child{margin-left:0}
.facepile .face img{width:100%;height:100%;object-fit:cover}
.facepile a.face:hover,.facepile a.face:focus-visible{transform:translateY(-2px);z-index:20}
.facepile-count{margin-left:10px;font:600 14px/1 var(--sans);color:var(--ink-700);font-variant-numeric:tabular-nums}
.facepile-lg .face{width:44px;height:44px;margin-left:-12px}
/* statistics admin (/admin) */
.admin .sec{padding:24px 0;border-top:1px solid var(--line)}
@media(min-width:1024px){.admin .sec{padding:36px 0}}
.admin .sec>h2{margin:0 0 16px}
.admin .table td,.admin .table th{white-space:nowrap}
.admin .table td.num,.admin .table th.num{text-align:right;font-variant-numeric:tabular-nums}
.admin .table td:first-child{white-space:normal}
.admin .specs-grid b{font-size:22px}
.admin .note{margin:12px 0 0;max-width:72ch}
.admin-quota{display:grid;gap:8px;max-width:520px}
.admin-saved{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.admin-saved li{display:flex;align-items:center;gap:12px;font-size:15px}
.admin-saved .caption{margin-left:auto;white-space:nowrap}
.admin-quota .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
@media(min-width:1024px){.admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}}
/* fav-block: the heart of a detail page with how many people saved it (Ui::favBlock). The pile is
   anonymous: tinted circles of the place colour that overlap, each with a paper ring, and "+6". */
.fav-block{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:16px 0 4px}
.fav-block .save-inline{margin:0}
.fav-pile{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-500)}
.fav-pile[hidden]{display:none}
.fav-dots{display:inline-flex;align-items:center}
.fav-dots i{width:26px;height:26px;border-radius:50%;border:2px solid var(--paper,#FDFBF7);margin-left:-8px;background:var(--place-soft,#EFE7DA);box-shadow:inset 0 0 0 1px rgb(22 21 19/.06)}
.fav-dots i{position:relative;display:grid;place-items:center;overflow:hidden;font:600 11px/1 var(--sans);font-style:normal;color:var(--ink-700,#3A3733)}
.fav-dots i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fav-dots i:first-child{margin-left:0}
.fav-dots i:nth-child(2n){background:var(--place-tint,#F4EFE6)}
.fav-dots i:nth-child(3n){background:color-mix(in oklab,var(--place,#8A6A4A) 35%,#fff)}
.fav-dots b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;margin-left:-8px;border-radius:999px;border:2px solid var(--paper,#FDFBF7);background:var(--ink);color:var(--on-ink);font:600 11px/1 var(--sans)}
.save-inline[aria-pressed="true"]{border-color:var(--danger);color:var(--danger)}
/* The first section right under a text hero (zones): no second gap on top of the hero's own */
.sec.sec-after-hero{padding-top:12px}
/* Advice without a numbered list: the page's text beside the callouts, which stay in view while it is
   read; with no text either, the callouts share the width */
@media(min-width:900px){.stack-aside{position:sticky;top:calc(var(--head-h,72px) + 70px);align-self:start}}
.callouts-row{display:grid;gap:12px}
@media(min-width:768px){.callouts-row{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
/* free-tag: "Gratis" where a price would go, only on sheets marked `free: true` from a checked source */
.free-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--place-soft,#EFE7DA);color:var(--place-deep,#3F3A2E);font:600 13px/1 var(--sans)}
/* Flights: the airports with a direct flight on a plan abroad (origins-fly), and the cities a flight away on Cerca de (fly-list) */
.origins-fly .lbl{display:inline-flex;align-items:center;gap:6px}
.chip-static{cursor:default}
.origins-note{flex:none;font-size:12px}
.fly-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fly-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--white);text-decoration:none;color:var(--ink)}
.fly-item b{font:600 15px/1.2 var(--sans)}
.fly-item .meta{grid-column:2;font-size:13px}
.fly-item:hover{border-color:var(--ink-400)}

/* The language menu: the pill opens the languages this page exists in. */
.lang-menu{position:relative;display:none}
@media(min-width:900px){.lang-menu{display:block}}
.lang-menu>summary{list-style:none;cursor:pointer;display:inline-block}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;min-width:150px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:var(--shadow-1)}
.lang-menu a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;font:500 14px/1.2 var(--sans);color:var(--ink)}
.lang-menu a:hover{background:var(--paper,#FDFBF7)}
.lang-menu a[aria-current]{font-weight:700}

/* A map keeps its layers to itself: MapLibre gives its controls and its "use ⌘ + scroll" screen
   z-indexes of their own, which without this climb over the sticky bars of the page. */
.maplibregl-map,.mapx-map{isolation:isolate}

/* The languages in the footer: the choice on every screen, and the only one on a phone. */
.footer-langs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:32px;font-size:14px;color:var(--ink-500)}
.footer-langs span{display:inline-flex;align-items:center;gap:6px}
.footer-langs a{color:var(--ink);text-decoration:none}
.footer-langs a:hover{text-decoration:underline}
.footer-langs a[aria-current]{font-weight:700}
/* cookie-bar: the consent notice, one thin line at the foot of the screen until the visitor answers */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:#161513;color:#fff;font:400 13px/1.35 var(--sans)}
.cookie-bar p{margin:0}
.cookie-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-bar span{display:inline-flex;gap:8px}
.cookie-bar button{height:28px;padding:0 12px;border-radius:999px;border:1px solid rgb(255 255 255/.45);background:none;color:#fff;font:600 12px/1 var(--sans);cursor:pointer}
.cookie-bar button[data-yes]{background:#fff;border-color:#fff;color:#161513}
@media print{.cookie-bar{display:none}}
.fav-block{position:relative}
.trip-menu{position:absolute;right:0;top:100%;z-index:30;min-width:240px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--white);box-shadow:0 8px 24px rgb(0 0 0/.12)}
.trip-menu .meta{margin:0 0 8px}
.trip-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.trip-menu button{width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;font:500 14px/1.3 var(--sans);cursor:pointer}
.trip-menu button:hover{background:var(--sand,#F4EFE6)}
.trip-menu-days{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font:500 14px/1.3 var(--sans)}
.trip-menu-days input{width:64px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px}
@media print{.trip-add,.trip-menu{display:none!important}}
.route-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.route-filter .chip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.route-departs{margin:0 0 16px}
.route-cards [hidden]{display:none}
/* The header names the three most outstanding destinations of the language; on a phone only the first fits. */
@media(max-width:899px){.nav .nav-place:nth-of-type(n+3){display:none}}

/* Form fields at 16px or more on touch screens: below that, iPhone zooms in on focus. */
@media(pointer:coarse){input,select,textarea{font-size:max(16px,1em)!important}}

/* Add a plan to one of the visitor's trips: a block of its own under the save row, signed-in only. */
.trip-cta{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--place-tint)}
.trip-cta-head{display:flex;gap:12px;align-items:flex-start}
.trip-cta-head .i{color:var(--place-deep);margin-top:2px}
.trip-cta-head b{font:600 16px/1.3 var(--sans)}
.trip-cta-head .meta{margin:4px 0 0}
.trip-cta-choices{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.trip-cta-choices .trip-menu-days{flex-basis:100%;justify-content:flex-start;gap:12px}
.trip-cta-status:empty{display:none}
.trip-cta-status{margin:10px 0 0}
@media(min-width:1024px){.trip-cta{max-width:560px}}
@media print{.trip-cta{display:none!important}}
/* A theme's airports: one row per airport, the places it serves. */
.fly-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fly-list li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md,20px)}
.fly-list li>.i{margin-top:3px;color:var(--place-deep,var(--ink))}
.fly-list b{display:block;font-weight:600}
.fly-list .meta{color:var(--ink-500);font-size:14px}
.fly-list a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(min-width:768px){.fly-list{grid-template-columns:1fr 1fr}}
/* Tables written inside a text (Markdown): ruled rows, header in small caps, numbers aligned right, a frame
   that scrolls sideways on a phone instead of squeezing the columns. */
.prose table{width:100%;border-collapse:collapse;margin:24px 0 8px;font:400 16px/1.45 var(--sans);color:var(--ink-700);background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm,12px);overflow:hidden}
.prose thead th{font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);text-align:left;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.prose td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.prose tbody tr:first-child td{border-top:0}
.prose td:first-child{color:var(--ink)}
.prose td:last-child:not(:first-child),.prose th:last-child:not(:first-child){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prose tbody tr:nth-child(even) td{background:rgb(var(--paper-rgb,253 251 247)/.5)}
@media(max-width:600px){.prose table{display:block;overflow-x:auto;font-size:15px}.prose td,.prose thead th{padding:10px 12px}}

/* Prefooter of a place: links to every place inside it. */
.prefooter{margin:48px 0 0;padding:24px 0 8px;border-top:1px solid var(--line)}
.prefooter ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
@media(min-width:768px){.prefooter ul{columns:4}}
.prefooter li{break-inside:avoid;padding:5px 0}
.prefooter a{color:var(--ink-700);text-decoration:none;font-size:15px}
.prefooter a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}