/* =====================================================================
   KINGDOME GLAMPING — HOME
   ---------------------------------------------------------------------
   Built from Figma 9seZtnRlfpHsB09xr3tQAN, frame 396:794
   "06 · Home Desktop (copy v7)". The comp is 1440 wide; every number
   below is that comp's number, and the responsive work is done by
   scaling the page ladder rather than by re-laying-out at each stop.

   The register, and the reason there is no bold anywhere in this file:
   hierarchy is carried by SIZE and ALPHA, never by weight. The face is
   Plus Jakarta Sans at 200 / 300 / 400 and it never goes heavier.
   ===================================================================== */

/* ---- tokens, straight off the file's own variables ------------------ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 200 400; font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #000;
  --ink-80: rgba(0, 0, 0, .8);
  /* The second tone. Named for 60%, and was; 72% since 7 Oct 2026 (Juan:
     keep the two tones, raise the contrast): 5.7:1 on the page became
     9.1:1, which the light face needs to read comfortably. The name
     stayed so the pages' classes did not churn. */
  --ink-60: rgba(0, 0, 0, .72);
  --ink-40: rgba(0, 0, 0, .4);
  --line: rgba(0, 0, 0, .1);

  --paper: #fff;
  --page: #fdfcf7;          /* the ground; read off the Actividades edge fade */
  --surface-card: #edede6;
  --surface-sunk: #f7f7f0;
  --surface-warm: #f4f1e8;  /* prensa card + footer */

  --accent: #0068b8;
  --accent-on: #fff;

  --scrim: rgba(0, 0, 0, .36);    /* the film card's own; at .28 white 15/300 fell under 4.5:1 on the lawn */
  --glass-chrome: rgba(255, 255, 255, .4);
  --white-60: rgba(255, 255, 255, .6);
  --white-14: rgba(255, 255, 255, .14);
  --shadow-hairline: rgba(0, 0, 0, .12);

  --r-xs: 4px;  --r-sm: 6px;  --r-lg: 12px;  --r-xl: 18px;  --r-2xl: 24px;

  /* THE LADDER. `--u` is the comp pixel: 1 at 1440 and above, and it
     shrinks with the viewport so the whole page keeps its proportions
     instead of reflowing into a different design at every breakpoint. */
  --u: 1px;
  /* THE TYPE UNIT. `--u` is the comp pixel and it shrinks with the
     viewport, which is right for a layout and wrong for words: at 430 it
     is 0.694, so Body/15 came out at TEN PIXELS and Micro/12 at eight.
     Layout keeps scaling; type stops at 1:1 and never goes below the size
     the comp drew it. (Samara's mobile body copy is 14/18 — measured.) */
  --t: max(var(--u), 1px);
  /* AND THE RULE FOR USING IT: anything sized BY ITS TEXT — a button's
     padding, a badge's box, a row's height, a pill's radius — scales with
     `--t` alongside the words inside it. Only LAYOUT keeps `--u`: page
     margins, section padding, grid columns, picture boxes. Moving the type
     and leaving the containers behind is how an 18px number ends up in a
     badge drawn for 12, which is what Juan caught on the step numbers. At
     1440 the two units are equal, so none of this moves the comp. */
  --margin: 167;            /* comp px, multiplied by --u below */
  --gutter: calc(var(--margin) * var(--u));
  /* THE SECTION'S BREATH: the space a section leaves under itself (and the
     few that open with it). The comp's 150 on the ladder down to a tablet;
     a phone has its own (below). */
  --section: calc(150 * var(--u));
  --content: calc(1106 * var(--u));
  /* ONE GRID FOR EVERY SECTION. The column splits into three equal tracks
     on a 24 gap, so the lines fall at 167 / 543.67 / 920.33 at 1440 and
     everything that starts a column starts on one of them: the hero lead,
     the map, the second activity, the steps, the food card's text, the
     footer's groups. A card's EDGE sits on the column; its contents sit
     one --card-pad in, the same pad on every card. */
  --gap: calc(24 * var(--u));
  --col: calc((var(--content) - 2 * var(--gap)) / 3);
  --card-pad: calc(60 * var(--u));
  /* THE COLUMN'S EDGE, for anything placed against the page instead of
     inside the centred column: the gutter until 1440, then wherever the
     centred 1106 column begins. A percentage, so it resolves against the
     full-width box it is used in (the hero, a band, a section). */
  --edge: max(var(--gutter), calc(50% - var(--content) / 2));

  --ease-house: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1439px) { :root { --u: calc(100vw / 1440); } }
@media (max-width: 900px)  { :root { --u: calc(100vw / 900); --margin: 88; } }
/* A PHONE IS NOT THE COMP SHRUNK. On the ladder alone a 393 screen got
   the desktop's proportions: 39 px margins, 95 px between sections, cards
   inset inside the margins (Juan, 7 Oct: "very bad"). A phone's margin is
   a thumb's 24 (38 comp px at 620), and its sections breathe 64 to 80 px. */
@media (max-width: 640px)  { :root { --u: calc(100vw / 620); --margin: 38; --card-pad: 22px; --section: clamp(64px, 18vw, 80px); } }

* { box-sizing: border-box; }

/* Lenis (smooth wheel): its required rules. While it is driving, native
   smooth scrolling must be off or the two fight. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

html { -webkit-text-size-adjust: 100%; }
/* A tap gives way (press scales to .97) and that is all it shows: no grey
   flash over the thing pressed, which Safari draws on every link. */
html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
/* `hidden` has to win. The player, the menu sheet and the viewer all set a
   `display` of their own, and an author `display` beats the UA sheet's
   `[hidden] { display: none }`, so the player was standing over the whole
   page at opacity 0 and z-index 90, and every click on the site landed on
   it. Nothing was clickable. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); padding: 12px 16px; border-radius: var(--r-lg);
}
.skip:focus { left: 12px; top: 12px; }

/* Read, not seen. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* A ring that sits inside an `overflow: clip` box has to be drawn INWARD or
   the box cuts it off: the nav pill, the dome stage and the rail. */
.nav__menu a:focus-visible, .domos__stage:focus-visible, .acts__rail:focus-visible { outline-offset: -3px; }
.domos__stage:focus-visible { border-radius: var(--r-lg); }

/* The ring is the accent on paper and white on a photograph: blue on
   foliage and on the dusk lake measured about 2:1. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* A FINGER LEAVES NO RING (site.js, `is-tactil`): every ring on the site,
   the outlines and the ones drawn on an ::after, while the last thing to
   touch the page was a finger. A key that walks the page brings them back.
   A field being typed in still says so, in ink instead of the blue ring:
   the guest has to see where the letters go. */
.is-tactil :focus-visible, .is-tactil :focus-visible::after { outline: none !important; }
.is-tactil .film__line .film__segs { outline: none; }
.is-tactil .campo :is(input, select, textarea):focus:not([aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---- type ----------------------------------------------------------
   Tracking is a PERCENTAGE in the source file, so it is written in em
   here and survives every step of the ladder. ------------------------- */
.display-72 { font-weight: 200; font-size: calc(72 * var(--u)); line-height: 1;    letter-spacing: -.07em; word-spacing: .14em; margin: 0; }
.display-60 { font-weight: 200; font-size: calc(60 * var(--u)); line-height: 1.1;  letter-spacing: -.07em; word-spacing: .14em; margin: 0; }
.display-48 { font-weight: 200; font-size: calc(48 * var(--u)); line-height: 1.12; letter-spacing: -.07em; word-spacing: .14em;  margin: 0; }
.heading-24 { font-weight: 300; font-size: calc(24 * var(--t)); line-height: 1.25; letter-spacing: -.02em; word-spacing: .06em; margin: 0; }
.heading-21 { font-weight: 300; font-size: calc(21 * var(--t)); line-height: 1.25; letter-spacing: -.02em; word-spacing: .06em;  margin: 0; }
.body-20    { font-weight: 300; font-size: calc(20 * var(--t)); line-height: 1.4;  letter-spacing: -.02em; word-spacing: .06em;  margin: 0; }
.body-18    { font-weight: 300; font-size: calc(18 * var(--t)); line-height: 1.33; letter-spacing: -.02em; word-spacing: .06em;  margin: 0; }
.body-16    { font-weight: 300; font-size: calc(16 * var(--t)); line-height: 1.33; letter-spacing: -.02em; word-spacing: .06em;  margin: 0; }
.body-15    { font-weight: 300; font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em;  margin: 0; }
.micro-12   { font-weight: 300; font-size: calc(12 * var(--t)); line-height: 1.33; letter-spacing: -.02em; word-spacing: .06em;       margin: 0; }
/* The small label above a heading or a list. It is NOT capitals any more
   (the class keeps its old name so the pages need not change): sentence
   case, the face's own spacing, one step up from 12px because lowercase
   at 12 read as too small. Juan, 7 Oct 2026: spaced-out capitals, never
   again; tests/estilo.test.mjs fails if they come back. */
.caps {
  font-weight: 400; font-size: calc(14 * var(--t)); line-height: 1.33;
  letter-spacing: -.01em; color: var(--ink-60); margin: 0;
}
.ink-60 { color: var(--ink-60); }

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-weight: inherit; }

/* The nav is fixed, so an anchor that lands at the top of the viewport
   lands UNDER it. */
section[id] { scroll-margin-top: calc(110 * var(--u)); }
/* A section takes focus when an in-page link lands on it, so the next Tab
   starts there; it is not a control and draws no ring. */
section[tabindex="-1"]:focus { outline: none; }
[data-band="dark"], .hero__foot, .nav .is-invert { --focus: #fff; }

/* ---- button --------------------------------------------------------
   One shape. Padding is optically corrected: bottom = top + 2, because a
   geometric face with short ascenders sits high in its em box.
   ONE GRAMMAR FOR EVERY CONTROL: hover deepens the fill a few percent
   (never washes it toward white, which read as a faded, cheap blue),
   eased over .18s; press gives way to 97% and springs back. Hover only
   where there is a pointer, so a phone never keeps a stuck hover. ------ */
:root { --ease-ui: cubic-bezier(.2, 0, 0, 1); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xl); text-decoration: none; white-space: nowrap;
  font-weight: 400; letter-spacing: -.02em; word-spacing: .06em;
  transition: background-color .18s var(--ease-ui), box-shadow .18s var(--ease-ui), transform .24s var(--ease-ui);
}
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn--sm { font-size: calc(12 * var(--t)); line-height: 1.25; padding: calc(9 * var(--t)) calc(15 * var(--t)) calc(11 * var(--t)); }
.btn--md { font-size: calc(15 * var(--t)); line-height: 1.27; padding: calc(11 * var(--t)) calc(18 * var(--t)) calc(13 * var(--t)); border-radius: var(--r-2xl); }

.btn--accent { background: var(--accent); color: var(--accent-on); }
@media (hover: hover) { .btn--accent:hover { background: color-mix(in srgb, var(--accent) 90%, #000); } }
.btn--accent:active { background: color-mix(in srgb, var(--accent) 84%, #000); }

.btn--paper { background: var(--paper); color: var(--ink); box-shadow: 0 .5px 2px var(--shadow-hairline); }
@media (hover: hover) { .btn--paper:hover { box-shadow: 0 .5px 2px var(--shadow-hairline), 0 4px 12px rgba(0, 0, 0, .08); } }

.btn--link { background: var(--surface-card); color: var(--accent); }
@media (hover: hover) { .btn--link:hover { background: color-mix(in srgb, var(--surface-card) 93%, #000); } }

/* Glass carries no shadow: a drop shadow bleeds through a translucent fill. */
.btn--glass { background: rgba(255, 255, 255, .9); color: var(--ink); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border-radius: calc(20 * var(--t)); padding: calc(12 * var(--t)) calc(20 * var(--t)) calc(13 * var(--t)); }
@media (hover: hover) { .btn--glass:hover { background: #fff; } }

/* THE ARROW. Drawn, not typed: the face's own "→" is a thin, generic
   glyph, and set in blue after a line of words it read as a footnote
   (Juan, 7 Oct: "cheap and weird and bland"). Stroked in currentColor so
   it is ink in a pill and blue in a link; sized in em so it follows
   whatever text it sits in. It does not move on hover: nothing travels. */
.flecha {
  display: inline-block; flex: none;
  width: .92em; height: .69em; margin-left: .5em; vertical-align: .02em;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- nav -----------------------------------------------------------
   Transparent bar; the glass pill is the only object. Inverted is not a
   second theme — the same tokens resolved dark, driven by the band
   underneath the 65px probe line (see site.js). --------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: calc(80 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(54 * var(--u));
  color: var(--ink);
  /* ONE CLOCK for a flip (site.js): the words, the pill, the chip and the
     glass behind the wordmark and WhatsApp all change on it, so no frame
     has white words on light glass or ink on dark. At three speeds (.15,
     .25, .35) they did, and the blur popped in under fading glass. */
  --nav-flip: .25s var(--ease-house);
  transition: color var(--nav-flip);
}
.nav__mark { font-size: calc(24 * var(--t)); line-height: 1.25; letter-spacing: -.02em; word-spacing: .06em; text-decoration: none; }
/* The burger is a phone control; the bar carries the wordmark and the pill
   at every other size. */
.nav__burger { display: none; }
.nav__menu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; overflow: clip;
  border-radius: var(--r-xl);
  background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.nav__menu a {
  padding: calc(10 * var(--t)) calc(24 * var(--t)) calc(12 * var(--t));
  font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em;
  color: var(--ink-60); text-decoration: none;
  transition: color var(--nav-flip);
}
@media (hover: hover) { .nav__menu a:hover { color: var(--ink); } }
/* Four pages in the pill: under 1024 its words sit closer (15 a side, not
   24), or it met the wordmark at 761 and the WhatsApp word at 901. */
@media (max-width: 1023px) { .nav__menu a { padding-left: calc(15 * var(--t)); padding-right: calc(15 * var(--t)); } }
/* WHERE YOU ARE: the segmented control's "on", the one vocabulary the site
   already has for "this one of a set": a paper chip with a hairline, 3px
   inside the pill so its curve follows the pill's. Drawn behind the word,
   so the link keeps its size and the bar does not move. */
.nav__menu a { position: relative; }
.nav__menu a[aria-current] { color: var(--ink); }
.nav__menu a[aria-current]::before {
  content: ""; position: absolute; inset: 3px; z-index: -1;
  border-radius: calc(var(--r-xl) - 3px);
  background: var(--paper); box-shadow: 0 .5px 2px var(--shadow-hairline);
  transition: background-color var(--nav-flip), box-shadow var(--nav-flip);
}

/* INVERTED IS PER OBJECT (site.js): the wordmark, the pill and WhatsApp
   each read what is under them (above a phone; a phone's bar is paper). A page's photograph is
   often the width of the column, not the window, and a bar that flipped as
   one put a white wordmark on the paper beside it. */
.nav__mark--bar { transition: color var(--nav-flip), text-shadow var(--nav-flip); }
.nav .is-invert { color: #fff; }
/* Over a photograph the pill goes DARK glass, not light: white at 60% on a
   16% white film measured 2.2 to 3.6 against foliage and sky. The wordmark is
   bare, so it carries a soft shadow of the picture's own dark. */
.nav__menu.is-invert { background: rgba(0, 0, 0, .26); }
.nav__menu.is-invert a { color: rgba(255, 255, 255, .88); }
@media (hover: hover) { .nav__menu.is-invert a:hover { color: #fff; } }
/* On a photograph the chip is the film menu's own: white at 16%. */
.nav__menu.is-invert a[aria-current] { color: #fff; }
.nav__menu.is-invert a[aria-current]::before { background: rgba(255, 255, 255, .16); box-shadow: none; }
.nav__mark--bar.is-invert { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
/* OVER A PHOTOGRAPH (is-foto) nothing in the bar is bare, because a sky, a cloud or a white
   roof is a photograph too, and a bare word over a white roof beside dark
   trees has no ink that reads. The wordmark and WhatsApp take the pill's
   glass, drawn BEHIND them (::before), so nothing in the bar moves; on
   paper they are bare words again. Over pictures the bar takes ONE tone,
   white or ink, by what the pictures are under all of it (site.js), on
   dark or light glass, a little firmer than the pill's on paper. */
.nav__menu { transition: background-color var(--nav-flip); }
.nav__menu.is-foto { background: rgba(255, 255, 255, .55); }
.nav__menu.is-foto.is-invert { background: rgba(0, 0, 0, .36); }
.nav__mark--bar, .nav__wa { position: relative; }
.nav__mark--bar::before, .nav__wa::before {
  content: ""; position: absolute; z-index: -1;
  border-radius: var(--r-xl);
  /* The glass is always there, unseen: so its blur fades in with it
     instead of switching on under it. */
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; transition: opacity var(--nav-flip), background-color var(--nav-flip);
}
/* The pill's height (41) and its words' side padding, around each word. */
.nav__mark--bar::before { inset: -6px -16px -5px; }
.nav__wa::before { inset: -10px -16px -12px; }
.nav__mark--bar.is-foto::before, .nav__wa.is-foto::before { opacity: 1; }
.nav__mark--bar.is-foto.is-invert::before, .nav__wa.is-foto.is-invert::before { background: rgba(0, 0, 0, .36); }
/* On glass a word needs no shadow, and over a picture the words take the
   full ink or the full white, not the second tone: the second tone is for
   paper, where nothing competes with it. */
.nav__mark--bar.is-foto, .nav__wa.is-foto { text-shadow: none; }
.nav__menu.is-foto a, .nav__wa.is-foto { color: var(--ink); }
.nav__menu.is-foto.is-invert a, .nav__wa.is-foto.is-invert { color: #fff; }

/* WhatsApp beside the button: a word in the pill's own voice, bare like
   the wordmark, so over a photograph it takes the wordmark's shadow. */
.nav__end { display: flex; align-items: center; gap: calc(28 * var(--t)); }
.nav__wa {
  font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em;
  color: var(--ink-60); text-decoration: none;
  transition: color var(--nav-flip), text-shadow var(--nav-flip);
}
@media (hover: hover) { .nav__wa:hover { color: var(--ink); } }
.nav__wa.is-invert { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
@media (hover: hover) { .nav__wa.is-invert:hover { color: #fff; } }
@media (max-width: 900px) { .nav__wa { display: none; } }

/* THE WHATSAPP PILL. The chevrons' material — white, a hairline ring, a
   soft lift — so it reads on paper and on a photograph alike, and the one
   colour in it is WhatsApp's own, on the glyph only. It is shown by script
   (site.js) and only ever under 900. */
.wa {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 2px 14px; border-radius: 24px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .14);
  font-weight: 400; font-size: calc(15 * var(--t)); letter-spacing: -.02em;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s var(--ease-house), transform .3s var(--ease-house), visibility 0s linear .3s;
}
.wa.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease-house), transform .3s var(--ease-house), visibility 0s; }
.is-modal .wa.is-shown { opacity: 0; visibility: hidden; }
.wa__glyph { width: 20px; height: 20px; margin-top: 2px; fill: #25d366; flex: none; }
@media (max-width: 900px) { .wa { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .wa { transform: none; } }

/* ---- the nav on a phone ---------------------------------------------
   A paper bar, 62 tall, the same from the first frame on every page: the
   page's own ground and a hairline, so nothing scrolls through it and
   nothing in it changes as the page moves (site.js reads no pictures
   here). It carries two objects that never move: the menu's key, two
   lines whose glyph sits on the page's margin, and the wordmark beside
   it, always the way home. Open, the bar stays above the sheet: the key's
   lines cross into an X where they were, and the wordmark stays put.
   (Juan, 7 Oct: the glass pill, the flip to paper on scroll and the sheet's
   own X and wordmark, 13 px to the right, were "weird".) */
@media (max-width: 760px) {
  .nav {
    height: calc(62 * var(--t));
    padding: 0 var(--gutter);
    justify-content: flex-start;
  }
  .nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--page); box-shadow: 0 1px 0 var(--line);
    transition: box-shadow var(--nav-flip);
  }
  .nav__menu { display: none; }
  .nav__end, .nav--plain .nav__cta { margin-left: auto; }   /* the 404 has no .nav__end */
  /* The key is a thumb's 44, its glyph 18: the glyph, not the key, is on
     the margin, and the wordmark starts 10 px after the glyph ends. */
  .nav__burger {
    display: grid; place-items: center; flex: none;
    width: calc(44 * var(--t)); height: calc(44 * var(--t));
    margin: 0 calc(-3 * var(--t)) 0 calc(-13 * var(--t));
    color: inherit;
  }
  /* A thumb's 44 tall, centred in the bar like the key beside it. */
  .nav__mark--bar { position: relative; display: flex; align-items: center; height: 44px; padding: 0; font-size: calc(17 * var(--t)); }
  .nav__burger-icon { position: relative; display: block; width: calc(18 * var(--t)); height: calc(8 * var(--t)); }
  .nav__burger-icon::before, .nav__burger-icon::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 100%; height: 1.5px; margin-top: -.75px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--nav-flip);
  }
  .nav__burger-icon::before { transform: translateY(calc(-3.5 * var(--t))) rotate(0); }
  .nav__burger-icon::after  { transform: translateY(calc(3.5 * var(--t))) rotate(0); }
  /* Open: the two lines meet in the middle as they turn, on the bar's
     one clock (--nav-flip, .25 s), alongside the sheet's .22 s fade. */
  .menu-abierto .nav__burger-icon::before { transform: translateY(0) rotate(45deg); }
  .menu-abierto .nav__burger-icon::after  { transform: translateY(0) rotate(-45deg); }
  .menu-abierto .nav { z-index: 61; }
  /* Bar and sheet are one paper while it is open; the sheet has its own
     Reservar. */
  .menu-abierto .nav::before { box-shadow: 0 1px 0 transparent; }
  .menu-abierto .nav__end { visibility: hidden; }
  .nav__cta { height: calc(44 * var(--t)); padding: 0 calc(18 * var(--t)); border-radius: calc(24 * var(--t)); font-size: calc(14 * var(--t)); }
  section[id] { scroll-margin-top: calc(78 * var(--t)); }
  /* One way to book on a phone, not two: the bar at the foot is it. Keyed
     on the bar being in the page, not on reserva.js having put it up
     (`con-buscador`), which lands after the first paint and flashed the
     button. Where there is no bar (the 404) the top keeps its Reservar;
     the menu keeps its own everywhere. */
  :root:has([data-buscador]) .nav__cta { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav__burger-icon::before, .nav__burger-icon::after { transition: none; }
}

/* The sheet. Full screen, because at this size the links deserve it and
   the thumb deserves the target. It opens under the bar (above). */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--page);
  display: flex; flex-direction: column; justify-content: space-between;
  /* On a short phone the foot never touches the last link. */
  gap: calc(32 * var(--t));
  padding: calc(62 * var(--t)) var(--gutter) calc(40 * var(--t));
  opacity: 0; transition: opacity .22s var(--ease-house);
  /* A phone held sideways is shorter than the menu: it scrolls, and only
     itself, instead of cutting off Reservar under a page that is locked. */
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet.is-open { opacity: 1; }
.sheet__links { display: flex; flex-direction: column; gap: calc(6 * var(--t)); margin-top: calc(30 * var(--t)); }
.sheet__links a {
  font-weight: 200; font-size: calc(40 * var(--t)); line-height: 1.18; letter-spacing: -.07em; word-spacing: .14em;
  text-decoration: none; padding: calc(6 * var(--t)) 0;
}
/* The page you are on, in the footer's grammar: the second tone. */
.sheet__links a[aria-current] { color: var(--ink-60); }
/* The three domes, under Domos: a step down in size, not a fifth item.
   Each word keeps a thumb's 44 px. */
.sheet__domos { display: flex; gap: calc(22 * var(--t)); margin-top: calc(-8 * var(--t)); }
.sheet__links .sheet__domos a {
  font-size: calc(18 * var(--t)); font-weight: 300; line-height: 1.33; letter-spacing: -.02em; word-spacing: .06em;
  min-height: 44px; display: flex; align-items: center; padding: 0;
}
.sheet__foot { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--t)); }
@media (min-width: 761px) { .sheet { display: none; } }

/* ---- caption pill --------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: calc(5 * var(--t));
  padding: calc(9 * var(--t)) calc(14 * var(--t)) calc(12 * var(--t));
  border-radius: var(--r-lg);
  font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em;
  white-space: nowrap;
}
.pill b { font-weight: 300; }
.pill--photo { background: var(--scrim); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); color: #fff; }
.pill--photo span { color: rgba(255, 255, 255, .82); }

/* =========================================================== HERO === */
.hero {
  position: relative;
  /* THE PHOTO BAND GROWS WITH THE VIEWPORT, the type ladder does not. The
     comp is 1440x594 for the band — 2.4242:1 — and above 1440 `--u` is
     pinned at 1px, so a fixed 594 makes the band ever wider than its own
     picture and `cover` crops the TOP off. What it crops is exactly the
     faded sky that blends the photograph into the wash, which is why a
     wide window got a hard blue-to-white seam straight across it. */
  --photo-h: max(calc(594 * var(--u)), calc(100vw / 2.4242));
  /* AT LEAST A SCREENFUL. `svh` rather than `vh` so an iOS address bar
     sliding away does not resize the band under the reader's thumb. */
  height: calc(388 * var(--u) + var(--photo-h));
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  overflow: clip;
}
/* THE GRADIENT IS THE SKY, and the photograph is cut out of it — so it has
   to run all the way down behind the trees rather than stopping at 617 and
   leaving a hard edge under the ridge line. The stop is written as a LENGTH,
   not a percentage, so the ramp is bit-for-bit the comp's over 160..568.6
   whatever height the band grows to, and simply holds its colour below. */
.hero__sky {
  position: absolute; left: 0; right: 0;
  top: calc(160 * var(--u)); bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #6eb9da calc(408.6 * var(--u)));
}
.hero__photo { position: absolute; left: 0; right: 0; bottom: 0; height: var(--photo-h); }
/* No mask: the picture has no sky to hide. It is cut out along the ridge
   line and the gradient behind it does the rest. */
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.hero__type {
  position: absolute; left: var(--edge);
  top: calc(160 * var(--u)); width: var(--content);
  display: flex; flex-direction: column; gap: calc(17 * var(--u));
}
/* ONE LINE ON EVERY PHONE. The place is a single run of words; at 320 it
   broke after CUNDINAMARCA. It never wraps, and where 12px would not fit
   the column it comes down just enough to — 21.9em is the line's own
   width — which on anything 330 or wider is not at all. */
.hero__type > .caps { white-space: nowrap; font-size: min(calc(14 * var(--t)), calc((100vw - 2 * var(--gutter)) / 21.9)); }
/* The headline takes the first two tracks, the lead the third. */
.hero__row { display: grid; grid-template-columns: calc(var(--col) * 2 + var(--gap)) var(--col); column-gap: var(--gap); align-items: end; }
/* With no lead sentence the button belongs under the headline, on the same
   edge, not alone in the third track. */
.hero__row:not(:has(.hero__lead p)) { grid-template-columns: 1fr; row-gap: calc(32 * var(--u)); }
.hero__h1 {
  flex: 0 0 auto; margin: 0;
  font-weight: 200; font-size: calc(92 * var(--u)); line-height: 1; letter-spacing: -.07em; word-spacing: .14em;
}
.hero__lead { width: calc(319 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }

.hero__caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(44 * var(--u));
  display: flex; align-items: center; gap: calc(9 * var(--u));
}
/* Not a box on a desktop: the card and the caption are placed on the hero
   itself, at the comp's own coordinates. It only becomes a column on a
   phone, below. */
.hero__foot { display: contents; }

/* ---- THE ARRIVAL ----------------------------------------------------
   The first paint is the sky and the bar, nothing else. When the face and
   the photograph are both ready the hero enters as one picture: the
   photograph settles in from a hair larger, then the words rise a few
   pixels in reading order, then the card and the price. One curve, the
   house's, used for the large moves only; nothing bounces. The animations
   are paused (at their first frame) while <html> is .is-loading, so with
   no script they simply play on load and nothing stays hidden. */
@keyframes kd-photo { from { opacity: 0; scale: 1.035; } to { opacity: 1; scale: 1; } }
@keyframes kd-rise  { from { opacity: 0; translate: 0 calc(14 * var(--u)); } to { opacity: 1; translate: 0 0; } }
@keyframes kd-fade  { from { opacity: 0; } to { opacity: 1; } }
/* Paper first. The sky washes in, then the photograph settles into it,
   then the words, then the card and the price. */
.hero__sky          { animation: kd-fade 1.2s ease-out both; }
.hero__photo img    { animation: kd-photo 1.8s cubic-bezier(.16, 1, .3, 1) .35s both; }
.hero__type > .caps { animation: kd-rise 1.1s cubic-bezier(.16, 1, .3, 1) .62s both; }
.hero__h1           { animation: kd-rise 1.1s cubic-bezier(.16, 1, .3, 1) .7s both; }
.hero__lead         { animation: kd-rise 1.1s cubic-bezier(.16, 1, .3, 1) .82s both; }
.video-card, .hero__caption > * { animation: kd-fade .9s ease-out 1.2s both; }
/* Animate the pill and the button, never their wrapper: an ancestor with an
   opacity animation becomes the backdrop root, and the pill's blur then
   frosts nothing but its own wrapper. Once arrived, every animation is
   dropped so no compositing group outlives the entrance. */
.is-arrived :is(.hero__sky, .hero__photo img, .hero__type > .caps, .hero__h1, .hero__lead, .video-card, .hero__caption > *) { animation: none !important; }
.is-loading :is(.hero__sky, .hero__photo img, .hero__type > .caps, .hero__h1, .hero__lead, .video-card, .hero__caption > *) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Longhands, so the hold above still pauses them: a plain fade, no move. */
  :is(.hero__sky, .hero__photo img, .hero__type > .caps, .hero__h1, .hero__lead, .video-card, .hero__caption > *) {
    animation-name: kd-fade !important; animation-duration: .4s !important; animation-delay: 0s !important;
  }
}

/* the video card — a frosted corner card, on this file's tokens */
/* Bottom-anchored, not top: its lower edge shares the Caption row's
   baseline (938 of 982 in the comp = 44 up), and that is the rule that has
   to survive the band growing. */
.video-card {
  /* Anchored to the RIGHT edge on the layout unit. It was `left: 1114`
     on the type unit, which never shrinks, so at 1024 the whole card sat
     off the screen and at 1280 a hundred pixels of it did. 1440 - 1114 -
     272 = 54, the comp's own right margin. */
  position: absolute; right: var(--edge); bottom: calc(44 * var(--u));
  width: calc(272 * var(--t));
  display: flex; flex-direction: column; gap: calc(8 * var(--t));
  padding: calc(8 * var(--t));
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, .36);
  border: 1px solid var(--white-14);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  text-decoration: none; color: #fff;
  transition: background-color .15s var(--ease-house), border-color .15s var(--ease-house);
}
@media (hover: hover) { .video-card:hover { background: rgba(0, 0, 0, .38); border-color: rgba(255, 255, 255, .24); } }
.video-card__title { display: block; margin: 0; font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em; }
.video-card__poster { position: relative; display: block; border-radius: var(--r-xs); overflow: clip; aspect-ratio: 16 / 9; }
.video-card__poster img { width: 100%; height: 100%; object-fit: cover; }
/* The segment's own drone shot, over its own still. Transparent until the
   first frame is actually on screen, so the card never blinks black while
   the clip arrives; reduced motion and Save-Data never load it at all. */
.video-card__poster video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s var(--ease-house);
}
.video-card__poster video.is-playing { opacity: 1; }
.video-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 400; font-size: calc(12 * var(--t)); line-height: 1.25; letter-spacing: -.02em; word-spacing: .06em;
  color: rgba(255, 255, 255, .9);
}
.video-card__action { display: inline-flex; align-items: center; gap: calc(6 * var(--t)); }
.video-card__action img { width: calc(16 * var(--t)); height: calc(16 * var(--t)); }

/* TWO LAYERS, because the sky is further away than the headline and the
   bird standing on the B is not. The flock flies BEHIND the type — the
   canvas is inserted between the photograph and it — and only the one
   that has landed is drawn in front, on a canvas just big enough to hold
   it. Never in the way of a click. */
.birds { position: absolute; pointer-events: none; }
.birds--sky { left: 0; top: 0; }
.birds--front { z-index: 4; }

/* ====================================================== STATEMENT === */
.statement {
  padding: var(--section) var(--gutter) 0;
  display: grid; place-items: center;
  min-height: calc(229 * var(--u));
  text-align: center;
}
/* THE STATEMENT, the showroom way (samara.com/adus): very large type on
   the left edge, four authored lines, and three pictures IN the sentence at
   about cap height with room either side. Here the objects are prints, not
   cut-outs: a square photograph on white paper with the deep bottom border,
   each turned a few degrees, with a print's own small shadow. */
/* CENTRED. The type is sized FROM the column: the longest authored line
   (line one, ending on its print) measured about 15.4em at -7% tracking
   with the old 2:1 print, so at content / 15.6 it spanned the column edge
   to edge; with the 4:3 print it is 96% of it (1058 of 1106 at 1440), and
   the size was left alone rather than grown to make up the 4%. The other
   two lines centre under it, so the block's margins stay equal at every
   width above 900. */
.statement { place-items: center; text-align: center; }
.statement__p {
  max-width: var(--content); width: 100%; margin: 0 auto;
  font-weight: 200; font-size: calc(var(--content) / 15.6); line-height: 2.25; letter-spacing: -.07em; word-spacing: .14em;
}
@media (max-width: 900px) { .statement__p { font-size: calc((100vw - 2 * var(--gutter)) / 15.6); } }
/* Where a print closes its line its outer margin is space nobody sees, and
   in a centred line it pushes the visible ink off centre. */
@media (min-width: 901px) { .pin.pin--end { margin-right: 0; } }
/* A 4:3 print. It was 2:1 (the Instax Wide shape), and a strip that thin
   cut the subjects of Juan's own photographs in half: the dog lost its
   body, the house all but its roofline (Juan, 6 Oct: "check that the main
   subjects are not cropped"). At 4:3 they are whole, and the print carries
   about the area the wide one did. */
.pin {
  /* Every print sits INSIDE its line: centred on the line box (the offset
     below lifts it from the x-height middle to the true middle of the
     line), and the line is set tall enough to hold it (2.25), so all three
     lines share one pitch and no print reaches into its neighbours. */
  /* A PRINT, NOT A WHITE BOX (Juan, 6 Oct: "right now is like cheap"). It
     was a 3px white stroke round the picture. Now it has a print's own
     proportions — an even margin on three sides and the deep chin at the
     foot, a fifth of the picture's height, as a Polaroid has — and it is
     paper: a warm white that takes the light from the top left and falls
     off across the sheet, a grain you feel rather than see, a hairline
     edge, and the layered shadow of a card lying on a table. */
  --side: .085em; --chin: .32em;
  --edge: 0 0 0 .5px rgba(60, 45, 20, .1);
  position: relative; top: var(--lift, -.12em); z-index: 1;
  display: inline-block; vertical-align: middle;
  width: 2.5em; margin: 0 .18em;
  padding: var(--side) var(--side) var(--chin);
  border-radius: .03em;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .24  0 0 0 0 .19  0 0 0 0 .1  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    linear-gradient(165deg, #fffefb 0%, #fbf9f4 60%, #f5f2ea 100%);
  box-shadow:
    var(--edge),
    0 .5px 1px rgba(40, 30, 10, .1),
    0 .03em .06em rgba(40, 30, 10, .1),
    0 .14em .28em -.08em rgba(40, 30, 10, .24);
  rotate: var(--r); scale: 1;
  transition: rotate .3s cubic-bezier(.16, 1, .3, 1), scale .3s cubic-bezier(.16, 1, .3, 1), box-shadow .2s;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.pin :is(img, video) { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* The photograph sits IN the card, not on it: a hairline where the
   emulsion meets the paper, the faintest shade under the top edge, and
   the sheen a glossy print throws, low and from the same light. */
.pin::after {
  content: ""; position: absolute; pointer-events: none;
  inset: var(--side) var(--side) var(--chin);
  box-shadow: inset 0 0 0 .5px rgba(20, 15, 5, .22), inset 0 .5px 1.5px rgba(20, 15, 5, .25);
  background: linear-gradient(120deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 48%);
}
/* Hover says only "this can be picked up": the grab cursor and a shadow a
   shade deeper. No turn, no growth; the print stays where it was laid.
   Held: it is in the hand, and its shadow falls further away. */
@media (hover: hover) {
  .pin:hover {
    box-shadow: var(--edge), 0 .5px 1px rgba(40, 30, 10, .1), 0 .04em .08em rgba(40, 30, 10, .12), 0 .2em .36em -.08em rgba(40, 30, 10, .3);
  }
}
.pin.is-held {
  cursor: grabbing; z-index: 5; transition: box-shadow .2s;
  box-shadow: var(--edge), 0 .08em .16em rgba(40, 30, 10, .12), 0 .45em .7em -.14em rgba(40, 30, 10, .3);
}
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }
/* On touch a print still comes up sideways, but a thumb that lands on one
   on its way up the page scrolls the page instead of carrying the print. */
@media (pointer: coarse) { .pin { touch-action: pan-y; } }
/* A print never starts or ends a line: it travels with a word. */
.tie { white-space: nowrap; }

/* ========================================================== PROOF === */
.proof { padding: calc(138 * var(--u)) var(--gutter) var(--section); }
/* The live site's one sentence of what every dome has, read as the
   statement's second voice: tight under it, the body size, centred. */
/* THE SECOND VOICE (the reference's two-tone line under its statement):
   one sentence in ink, balanced over two lines, then the short line of what
   comes with it at 45%. Same face, same weight, one size. */
.proof:has(.voz) { padding-top: calc(96 * var(--u)); }
.voz {
  max-width: var(--content); margin: 0 auto; text-align: center;
  font-weight: 300; font-size: calc(32 * var(--t)); line-height: 1.22; letter-spacing: -.04em; word-spacing: .1em;
}
.voz > span:first-child { display: block; max-width: calc(900 * var(--u)); margin: 0 auto; text-wrap: balance; }
.voz__mute { display: block; color: var(--ink-60); }   /* .45 was 3.3:1, under AA at a phone's 22px */
/* The second voice never runs wider than the first: on /guatavita a long
   one ran the full column under a two-line block and read as a mistake. */
.voz__mute { max-width: calc(900 * var(--u)); margin: 0 auto; text-wrap: balance; }
.proof__grid {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--content);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(46 * var(--u));
}
.proof__grid li { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.prop__h {
  margin: 0; font-weight: 200;
  font-size: calc(30 * var(--u)); line-height: 1.14; letter-spacing: -.04em; word-spacing: .1em;
}

/* ========================================================== DOMOS === */
.domos {
  position: relative;
  background: var(--surface-sunk);
  padding: calc(71 * var(--u)) 0 calc(51 * var(--u));
  text-align: center;
  overflow: clip;
}
.domos__h { margin: 0 auto; max-width: calc(619 * var(--u)); }

/* THE INDEX. The stage shows one dome at a time; this is where the three
   are compared — the name, who fits, what it costs — and where the one on
   stage is marked. State is ink and a hairline, the way the segmented
   control says it, never weight: there is no bold to reach for. */
.indice {
  margin: calc(46 * var(--u)) auto 0;
  display: flex; justify-content: center; gap: calc(64 * var(--u));
}
.indice__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--t));
  padding: calc(4 * var(--t)) 0 calc(12 * var(--t));
  color: var(--ink-60);
  transition: color .2s var(--ease-house);
}
.indice__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0);
  transition: transform .32s var(--ease-house);
}
.indice__item.is-on { color: var(--ink); }
.indice__item.is-on::after { transform: scaleX(1); }
@media (hover: hover) { .indice__item:not(.is-on):hover { color: var(--ink); } }
.indice__name {
  font-weight: 300; font-size: max(20px, calc(30 * var(--u))); line-height: 1.2;
  letter-spacing: -.04em; word-spacing: .1em;
}
.indice__meta {
  font-weight: 300; font-size: calc(14 * var(--t)); line-height: 1.3;
  letter-spacing: -.02em; word-spacing: .06em; white-space: nowrap;
  color: var(--ink-60);
}
.indice__meta i { font-style: normal; }
@media (prefers-reduced-motion: reduce) { .indice__item::after { transition: none; } }

/* The phone's band (index.html says why); the instrument's from 641 up. */
.domos__lista { display: none; }

.domos__sub { margin: calc(28 * var(--u)) 0 0; }

.domos__stage {
  position: relative;
  /* Close under the words: every dome is now framed to its own height, so
     its crown sits just under the top of the stage and the stage need not
     stand off from the line above it. */
  margin-top: calc(14 * var(--u));
  height: calc(590 * var(--u));
  overflow: clip;
  touch-action: pan-y;
}
/* THE STAGE KEEPS ITS PROPORTION ABOVE 1440. The model is framed by WIDTH
   (20.6 m across the canvas, so one dome is on stage and the neighbours are
   off it), so the canvas must keep the comp's 1440 x 590 shape: with the
   page unit pinned at 1px above 1440 the band grew wider but not taller,
   the world shown vertically fell from 8.4 m to 7 m at 1728, and the tree
   tops were cut flat. Inside the stage the unit keeps scaling instead, so
   its height, the arrows and the fallback stills grow with it. */
@media (min-width: 1441px) { .domos__stage { --u: calc(100vw / 1440); } }
/* The stills are the fallback AND the poster: they show until the engine
   has a first frame, and they are all a browser without WebGL ever gets. */
.domos__still { position: absolute; inset: 0; }
/* Widths and bottom offsets are the comp's own, and they are not the same
   for all three: each render is framed to its OWN bounding box, so the only
   way three stills share one ground line and one scale is per-dome numbers.
   Ratios 906.9 : 1185.8 : 1216.3 are the domes' true world heights
   (7.003 : 9.157 : 9.393 m). This is exactly the arithmetic the live model
   makes unnecessary. */
.domos__still img {
  position: absolute; left: 50%; max-width: none; height: auto;
  transform: translateX(-50%);
  opacity: 0; transition: opacity .3s var(--ease-house);
}
.domos__still img[data-key="corbeta"] { width: calc(906.9 * var(--u)); bottom: calc(-50.1 * var(--u)); }
.domos__still img[data-key="fragata"] { width: calc(1185.8 * var(--u)); bottom: calc(-59.1 * var(--u)); }
.domos__still img[data-key="navio"]   { width: calc(1216.3 * var(--u)); bottom: calc(-67.4 * var(--u)); }
.domos__still img.is-on { opacity: 1; }
/* A still that is not on show is not fetched (a lazy picture that is not
   displayed never loads) until the band is all stills and needs it. */
.domos:not(.is-still) .domos__still img:not(.is-on) { display: none; }
.domos__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease-house); }
.domos__stage.is-live .domos__canvas { opacity: 1; }
.domos__stage.is-live .domos__still { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-house), visibility 0s linear .5s; }
.domos__stage.is-live { cursor: grab; }
.domos__stage.is-live:active { cursor: grabbing; }

/* Sits INSIDE the media, not beside it. Disabled slides away rather than
   greying out — an exhausted control leaves. */
.chevron {
  /* A round white control on the canon's object edge: a hairline ring and
     a soft lift, never a border or a grey tile. The arrow is drawn in the
     page's ink at 1.5px, the weight of the type around it. */
  position: absolute; top: calc(296 * var(--u));
  display: grid; place-items: center;
  width: calc(52 * var(--u)); height: calc(52 * var(--u));
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .07);
  color: var(--ink);
  transition: opacity .3s var(--ease-house), transform .3s var(--ease-house), box-shadow .2s;
}
.chevron svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .chevron:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 6px 18px rgba(0, 0, 0, .12); } }
.chevron--prev { left: calc(178 * var(--u)); }
/* Above the canvas whatever order the stage's children end up in: the
   canvas leaves for the viewer and comes back. */
.domos__stage .chevron { z-index: 2; }
.chevron--next { right: calc(178 * var(--u)); }
.chevron[disabled] { pointer-events: none; opacity: 0; }
.chevron--prev[disabled] { transform: translateX(-50%); }
.chevron--next[disabled] { transform: translateX(50%); }

/* Sits inside a segmented container filled surface/card with 3px padding.
   Selected is a white pill on a hairline; state is a SURFACE change, never
   a type change, because there is no bold to reach for. */
.seg {
  display: inline-flex; align-items: center; gap: 0;
  padding: calc(3 * var(--t));
  border-radius: calc(21 * var(--t));
  background: rgba(0, 0, 0, .04);
}
.seg__item {
  padding: calc(8 * var(--t)) calc(18 * var(--t)) calc(10 * var(--t));
  border-radius: var(--r-xl);
  font-weight: 400; font-size: calc(14 * var(--t)); line-height: 1.29; letter-spacing: -.02em; word-spacing: .06em;
  color: var(--ink-60); white-space: nowrap;
  transition: background-color .2s var(--ease-house), color .2s var(--ease-house), box-shadow .2s var(--ease-house);
}
.seg__item.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 .5px 2px var(--shadow-hairline); }
@media (hover: hover) { .seg__item:not(.is-on):hover { color: var(--ink); } }

.domos .seg { margin-top: calc(29 * var(--u)); }


/* The words leave with the camera and arrive with it. Opacity only — a
   label that slides is a second thing moving in a frame that already has
   one. */
.domos__sub, .ficha, .ficha__resumen { transition: opacity .24s var(--ease-house); }
.domos__sub.is-going, .ficha.is-going, .ficha__resumen.is-going { opacity: 0; }

.ficha {
  margin: calc(66 * var(--u)) auto 0;
  /* Never narrower than the spec row at the type's own size, or the row
     wraps at 1024 with a separator left hanging at the end of a line. */
  width: max(calc(760 * var(--u)), 540px);
  display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u));
}
.ficha__resumen {
  margin: 0; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; row-gap: calc(4 * var(--t)); gap: calc(13.5 * var(--t));
  font-weight: 300; font-size: calc(18 * var(--t)); line-height: calc(24 * var(--t)); letter-spacing: -.02em; word-spacing: .06em;
  white-space: nowrap;
}
/* One device pixel, not 1.5: a 1.5px rule lands on half pixels and the
   dividers in one row render at 1 and 2px alternately. */
.ficha__resumen span { white-space: nowrap; }
.ficha__resumen i { width: 1px; height: calc(19.8 * var(--t)); background: var(--ink-40); }
.ficha__regla { width: calc(540 * var(--u)); height: 1px; background: var(--line); }
.ficha__precio { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
/* The price is the sentence; the terms are its footnotes. One line in ink,
   a step up; everything after it in 60%, one fact per line. */
.ficha__precio .ficha__monto { color: var(--ink); font-size: calc(19 * var(--t)); line-height: calc(26 * var(--t)); margin-bottom: calc(6 * var(--u)); }
.ficha__precio p {
  text-wrap: balance;
  margin: 0; font-weight: 300;
  font-size: calc(16 * var(--t)); line-height: calc(24 * var(--t)); letter-spacing: -.02em; word-spacing: .06em;
  color: var(--ink-60);
}

/* Secondary actions, always in pairs. min-width and HUG, never fixed. */
.acciones { margin-top: calc(60 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(24 * var(--u)); }
.action {
  display: flex; align-items: center; justify-content: center;
  height: calc(64 * var(--t)); min-width: calc(167 * var(--t));
  padding: calc(8 * var(--t)) calc(18 * var(--t));
  border-radius: var(--r-xl);
  background: var(--surface-card);
  box-shadow: 0 .5px 2px var(--shadow-hairline);
  font-weight: 400; font-size: calc(14 * var(--t)); line-height: 1.29; letter-spacing: -.02em; word-spacing: .06em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease-ui), box-shadow .18s var(--ease-ui), transform .24s var(--ease-ui);
}
@media (hover: hover) { .action:hover { background: color-mix(in srgb, var(--surface-card) 93%, #000); } }
.action:active { transform: scale(.97); transition-duration: .08s; }
/* The booking control of the band you have just chosen a dome in: the
   page's one accent, the same as every other Reservar. "Ver en 3D" stays
   the quiet one beside it. */
.action--accent { background: var(--accent); color: var(--accent-on); }
@media (hover: hover) { .action--accent:hover { background: color-mix(in srgb, var(--accent) 90%, #000); } }
.action--accent:active { background: color-mix(in srgb, var(--accent) 84%, #000); }
.action--media { gap: calc(15 * var(--t)); padding-left: calc(8 * var(--t)); }
.action__thumb { width: calc(48 * var(--t)); height: calc(48 * var(--t)); border-radius: var(--r-sm); object-fit: cover; }
.action__label { display: inline-flex; align-items: center; gap: calc(6 * var(--t)); }
.action__label img { width: calc(13 * var(--t)); height: calc(9 * var(--t)); }
/* Waiting on the live model: there, but not yet anything to press. */
.action[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* No live model at all: only the model can answer these, so they go. */
.domos.is-still .seg, .domos.is-still .action--media { display: none; }
/* A phone's dome page before Ver en 3D is pressed (site.js, esperar): the
   dusk frame is the band, and a toggle with no model to turn waits too. */
.domos.is-espera .seg { display: none; }
.action[aria-busy="true"] { pointer-events: none; }

/* =========================================================== EMBALSE === */
/* THE CURTAIN. The stage is sticky for the whole wrapper, so the band's words and then the
   activities scroll over a photograph that stays put. The activities carry
   the page ground, so their straight top edge is the curtain. */
.curtain { position: relative; }
.curtain__stage {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}
.curtain__stage .embalse__photo { position: absolute; inset: 0; }
.curtain__stage .embalse__photo img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.curtain__stage::after {
  content: ""; position: absolute; inset: 0;
  /* ONE LIGHT, AND A LIGHT ONE. The shade falls from the top, the way a
     graduated filter holds a sky down, and it is gone before the domes. It
     used to run sideways in navy (Juan: "a bit funky"): the left of the
     frame went blue-black, the right stayed lit, and it read as two
     photographs. Black, not navy, so it lowers the exposure without
     tinting the greens. Kept as light as the words allow (Juan: "I don't
     love the sky being so cloudy and on top of that dimmed"). It holds a
     little more at 40%, where the body line crosses the white bank of
     cloud over the hills. Measured on DJI_0041 from 1280 to 1658 wide, at
     the brightest spot under each: the heading 3.1:1 (large text needs 3),
     the body line 4.3:1 (5.8:1 at its median), "WhatsApp" in the bar 5.2:1,
     where the old picture gave it 3.3:1. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, .25) 56%, rgba(0, 0, 0, 0) 72%);
}
/* The shade where the bar is, for site.js: the bar reads the picture's own
   pixels, and this falls on them. Keep it with the gradient above. */
.curtain__stage { --sombra: .45; }
/* The band is transparent and held with the stage. */
/* The band overlaps the stage from its own top (margin-top: -100svh), not
   the stage from its bottom: a sticky box's margin box is what stays inside
   the wrapper, so a negative bottom margin let the photograph hang out
   below the activities. */
.embalse { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; color: #fff; }
/* The dim lies over the whole held frame, words and photograph alike. */
.embalse::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #0b1520; opacity: calc(var(--cover, 0) * .32);
}
/* The activities arrive as a LAYER on top of the held photograph, not as
   more page: the page's own 24px radius at the top corners (the photograph
   shows past them) and one short lift on the top edge only (offset up,
   spread in, so it never falls on the section below). Under it the
   photograph dims as it is covered, as anything does when a sheet comes
   over it. */
.curtain > .acts {
  position: relative; z-index: 2; background: var(--page);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, .28);
}

/* The band is held WHOLE, words included: it is one composed frame, as
   the comp drew it, and the sheet covers it from the foot (the lake
   first, the words last). Nothing scrolls away to leave bare photograph. */
.embalse__type { position: absolute; left: var(--edge); top: calc(150 * var(--u)); z-index: 1; max-width: var(--content); }
.curtain .embalse__type { opacity: var(--words, 1); transform: translateY(calc((1 - var(--words, 1)) * -18px)); }
@media (prefers-reduced-motion: reduce) { .curtain .embalse__type { transform: none; } }
/* On the compositor where the browser can, as the parallax is (site.js
   then sets only --pie, how far down the band the words end). The sheet's
   way up the screen is its `cover` range: the first 100vh of it is the
   dim going 0 to 1, and the words go over the 220 px before the sheet's
   edge reaches their foot, smoothstep as the JS has it. Inset 0: the
   default reads the booking bar's scroll-padding as the screen's foot. */
@supports (animation-timeline: view()) {
  .curtain { timeline-scope: --telon; }
  .curtain > .acts { view-timeline: --telon block; view-timeline-inset: 0; }
  .curtain .embalse::after {
    animation: kd-telon-dim linear both;
    animation-timeline: --telon; animation-range: cover 0px cover 100vh;
  }
  .curtain .embalse__type {
    animation: kd-telon-sube ease-in-out both;
    animation-timeline: --telon;
    animation-range: cover calc(100vh - var(--pie, 0px) - 220px) cover calc(100vh - var(--pie, 0px));
  }
}
@media (prefers-reduced-motion: reduce) { .curtain .embalse__type { animation-name: kd-telon-va; } }
@keyframes kd-telon-dim  { from { opacity: 0; } to { opacity: .32; } }
@keyframes kd-telon-sube { to { opacity: 0; transform: translateY(-18px); } }
@keyframes kd-telon-va   { to { opacity: 0; } }
.embalse__type .caps { color: rgba(255, 255, 255, .9); }
.embalse__h {
  margin: calc(24 * var(--u)) 0 0;
  font-weight: 200; font-size: calc(96 * var(--u)); line-height: 1.08; letter-spacing: -.07em; word-spacing: .14em;
}
.embalse__type .body-18 { margin: calc(56 * var(--u)) 0 0; max-width: calc(600 * var(--u)); color: #fff; }
.embalse__type .btn { margin-top: calc(54 * var(--u)); }

/* ==================================================== ACTIVIDADES === */
.acts { position: relative; padding: var(--section) 0; overflow: clip; }
/* The rail bleeds past the right margin and the viewport crops the next
   card: the sliver is the whole affordance. No fade over it; a fade box
   sized for the old cards was cutting the fourth photograph with a hard
   top edge. */
.acts__head { padding: 0 var(--edge); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); }
.acts__intro { max-width: calc(503 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.acts__nav { display: flex; gap: calc(10 * var(--u)); flex: none; }
.acts__nav .chevron { position: relative; top: auto; left: auto; right: auto; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 40px; min-height: 40px; }
.acts__nav .chevron[disabled] { opacity: .3; transform: none; }
/* Touch swipes the rail itself; the arrows are for a mouse. */
@media (pointer: coarse) { .acts__nav { display: none; } }
.acts__rail {
  margin-top: calc(64 * var(--u));
  padding: 0 var(--edge);
  display: flex; gap: calc(24 * var(--u));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Without this the snapport starts at the padding EDGE, so the very first
     snap pulls the first card out to x=0 and the rail loses its page
     margin before anybody has touched it. */
  scroll-padding-left: var(--edge);
  scrollbar-width: none;
}
.acts__rail::-webkit-scrollbar { display: none; }
.act { flex: 0 0 var(--col); display: flex; flex-direction: column; gap: calc(14 * var(--u)); scroll-snap-align: start; }
.act__foto { position: relative; display: block; aspect-ratio: 315 / 220; border-radius: var(--r-lg); overflow: clip; background: var(--surface-card); }
.act__foto img { width: 100%; height: 100%; object-fit: cover; }
.act h3 { margin: 0; }
.act p { margin: 0; }
/* THE HOME PAGE'S ACTIVITIES ARE A GRID, not the rail (Juan: no more
   scrolling). The velero leads, two columns wide and two rows tall; the
   other four sit two by two beside it.
   EVERY LINE OF A CAPTION IS A ROW OF THE GRID. Each tile is a subgrid of
   four rows (picture, name, details, price), so a caption that wraps
   lowers its whole row, the velero's picture included, and the five
   pictures keep one foot and the captions keep shared baselines at any
   width. The fifth track between the two rows is the space between them
   (14 + 20 + 14 = 48). The rail above stays for the dome pages. */
.acts__grid {
  margin-top: calc(64 * var(--u));
  padding: 0 var(--edge);
  display: grid; grid-template-columns: repeat(4, 1fr);
  --tile: auto auto auto auto;
  grid-template-rows: var(--tile) calc(20 * var(--u)) var(--tile);
  gap: calc(14 * var(--u)) var(--gap);
}
.acts__grid .act { display: grid; grid-template-rows: subgrid; grid-row: span 4; min-width: 0; }
.acts__grid .act__foto { aspect-ratio: 1; }
.acts__grid .act--lead { grid-column: 1 / span 2; grid-row: 1 / span 9; }
/* The picture takes the first six rows: the first row's picture, its
   caption, the space, the second row's picture. Its caption follows. */
.acts__grid .act--lead .act__foto { grid-row: 1 / 7; aspect-ratio: auto; }
.acts__grid .act:nth-child(2) { grid-column: 3; grid-row: 1 / span 4; }
.acts__grid .act:nth-child(3) { grid-column: 4; grid-row: 1 / span 4; }
.acts__grid .act:nth-child(4) { grid-column: 3; grid-row: 6 / span 4; }
.acts__grid .act:nth-child(5) { grid-column: 4; grid-row: 6 / span 4; }
/* Narrower, four columns leave the small pictures too small. Two: the
   velero tall on the left beside the esquí and the kayak, the masaje and
   the bicicleta under them. (Not the velero across the width: its
   original is 980 wide, soft at that size on a sharp screen.) */
@media (max-width: 1100px) {
  .acts__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--tile) calc(20 * var(--u)) var(--tile) calc(20 * var(--u)) var(--tile);
  }
  .acts__grid .act__foto { aspect-ratio: 4 / 3; }
  .acts__grid .act--lead { grid-column: 1; }
  .acts__grid .act:nth-child(2) { grid-column: 2; grid-row: 1 / span 4; }
  .acts__grid .act:nth-child(3) { grid-column: 2; grid-row: 6 / span 4; }
  .acts__grid .act:nth-child(4) { grid-column: 1; grid-row: 11 / span 4; }
  .acts__grid .act:nth-child(5) { grid-column: 2; grid-row: 11 / span 4; }
}
/* A phone: the velero across the width, upright, the four two by two. */
@media (max-width: 640px) {
  .acts__grid { column-gap: 14px; }
  .acts__grid .act__foto { aspect-ratio: 1; }
  .acts__grid .act--lead { grid-column: 1 / span 2; grid-row: 1 / span 4; }
  .acts__grid .act--lead .act__foto { grid-row: auto; aspect-ratio: 4 / 5; }
  .acts__grid .act:nth-child(2) { grid-column: 1; grid-row: 6 / span 4; }
  .acts__grid .act:nth-child(3) { grid-column: 2; grid-row: 6 / span 4; }
}

/* ====================================================== GUATAVITA === */
/* STACKED, not side by side: the words and the distances first, then the
   map across the whole content width. Juan: "make this layout vertical
   stacked instead of horizontal". Above the map the words split on the
   grid: the heading in the first column, the distances across the other
   two, so the list ends on the map's right edge instead of stopping two
   thirds across it with its times floating mid-page (Juan, 7 Oct: "poorly
   executed/placed"). */
.cerca {
  padding: 0 var(--gutter) var(--section);
  display: grid; grid-template-columns: 1fr; row-gap: calc(56 * var(--u));
  max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto;
}
.cerca__type { display: grid; grid-template-columns: var(--col) 1fr; column-gap: var(--gap); align-items: start; }
.cerca__head { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.cerca__head > * { margin: 0; }
/* A table with a top rule too, so it reads as closed on both sides. */
.cerca .specs { margin: 0; }
.cerca .specs > div:first-child { border-top: 1px solid var(--line); }
.specs { margin: calc(18 * var(--u)) 0 0; }
.specs > div {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(58 * var(--t)); border-bottom: 1px solid var(--line);
  font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em;
}
.specs dt { color: var(--ink); }
.specs dd { margin: 0; color: var(--ink-60); }
/* Full width, so a wider frame: at 654/490 it would stand 830 tall. */
.cerca__mapa { position: relative; border-radius: var(--r-lg); overflow: clip; aspect-ratio: 1106 / 560; background: var(--surface-warm); }
/* The poster is a <picture>: the desktop frame, and the phone's own frame
   at 900 and under (tools/carta.mjs renders both from the live chart). */
.cerca__mapa > picture { display: contents; }
.cerca__mapa img { width: 100%; height: 100%; object-fit: cover; }
/* The poster stays OVER the chart until the chart has drawn, so there is
   never an empty paper while the tiles arrive, and it is the whole picture
   if they never do. Once the chart is up the poster has to stop EXISTING
   as far as the pointer is concerned, or the map cannot be dragged. */
.cerca__poster { position: relative; z-index: 1; transition: opacity .4s var(--ease-house); }
.cerca__mapa.is-live .cerca__poster { opacity: 0; pointer-events: none; }

/* TOP RIGHT, the one corner the chart leaves empty: the attribution runs
   along the foot. */
.cerca__maps { position: absolute; right: calc(20 * var(--u)); top: calc(20 * var(--u)); z-index: 2; }

/* ---- the chart (carta.js) -------------------------------------------
   MapLibre's own stylesheet is 70 kB of controls this chart does not
   show; these are the rules it cannot work without, and the chart's own
   words. The ground is the chart's paper, the same as the box's. */
.carta { position: absolute; inset: 0; z-index: 0; }
.maplibregl-map { overflow: hidden; -webkit-tap-highlight-color: transparent; font: inherit; }
.maplibregl-canvas { position: absolute; left: 0; top: 0; }
.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; user-select: none; -webkit-user-select: none; }
.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas { touch-action: pan-x pan-y; }
.maplibregl-canvas-container.maplibregl-touch-drag-pan,
.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: pinch-zoom; }
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: none; }
.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,
.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas { touch-action: pan-x pan-y; }
.maplibregl-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.maplibregl-marker { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.maplibregl-boxzoom { position: absolute; left: 0; top: 0; width: 0; height: 0; background: rgba(0, 104, 184, .08); border: 1px solid var(--accent); }

/* The credit: owed to OpenStreetMap and the tile hosts. No box: one
   line of small text on a paper halo, and it folds into an ⓘ in the
   corner five seconds after the chart is in view, or at the first drag
   (carta.js); the ⓘ opens it again. MapLibre keeps it in a <details>, and
   which state it is in is its class, `maplibregl-compact-show`. At .58
   the words are 4.6:1 on the chart's paper. */
.maplibregl-ctrl-bottom-right { position: absolute; right: calc(12 * var(--t)); bottom: calc(10 * var(--t)); z-index: 2; pointer-events: none; }
.maplibregl-ctrl-attrib { position: relative; display: block; margin: 0; min-height: 18px; pointer-events: auto; }
.maplibregl-ctrl-attrib-button {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; display: grid; place-items: center;
  list-style: none; cursor: pointer; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
  color: rgba(0, 0, 0, .58); transition: color .18s var(--ease-house), box-shadow .18s var(--ease-house);
}
.maplibregl-ctrl-attrib-button::-webkit-details-marker { display: none; }
.maplibregl-ctrl-attrib-button::before { content: "i"; font-size: 11px; line-height: 1; font-weight: 400; }
@media (hover: hover) { .maplibregl-ctrl-attrib-button:hover { color: var(--ink-80); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .36); } }
.maplibregl-ctrl-attrib-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.maplibregl-ctrl-attrib-inner {
  display: block; padding-right: calc(18px + 8 * var(--t)); line-height: 18px; white-space: nowrap;
  font-size: calc(11 * var(--t)); letter-spacing: -.01em; color: rgba(0, 0, 0, .58);
  text-shadow: 0 0 3px var(--surface-warm), 0 0 6px var(--surface-warm), 0 0 10px rgba(244, 241, 232, .9);
  opacity: 0; visibility: hidden; transition: opacity .12s var(--ease-house), visibility 0s linear .12s;
}
.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { opacity: 1; visibility: visible; transition: opacity .18s var(--ease-house); }
.maplibregl-ctrl-attrib a { color: inherit; text-decoration: none; }
@media (hover: hover) { .maplibregl-ctrl-attrib a:hover { color: var(--ink-80); text-decoration: underline; } }

/* "Use two fingers": no veil over the chart, one line of the site's own
   type at the foot, fading in place. carta.js holds it (`pide-gesto`)
   while the gestures keep coming and a moment after; MapLibre's own
   `maplibregl-show` lasts a tenth of a second and is ignored. */
.maplibregl-cooperative-gesture-screen {
  position: absolute; left: 0; right: 0; bottom: calc(36 * var(--t)); z-index: 3;
  display: flex; justify-content: center; pointer-events: none;
  font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; color: var(--ink);
  text-shadow: 0 0 6px var(--surface-warm), 0 0 12px var(--surface-warm), 0 0 2px var(--surface-warm);
  opacity: 0; transition: opacity .12s var(--ease-house);
}
.pide-gesto .maplibregl-cooperative-gesture-screen { opacity: 1; transition-duration: .18s; }
.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message { display: none; }
@media (hover: none), (pointer: coarse) {
  .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message { display: none; }
  .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message { display: block; }
}

/* The chart's words: KingDome one step up and in ink, beside a dot in the
   accent with a white ring and the house's soft lift; the towns a step
   down in the second tone; the embalse in the water's own ink. A paper
   halo so a road under a word never cuts it. */
.carta__lugar span, .carta__kd span {
  display: block; white-space: nowrap; letter-spacing: -.02em; word-spacing: .06em;
  text-shadow: 0 0 3px var(--surface-warm), 0 0 6px var(--surface-warm), 0 0 10px rgba(244, 241, 232, .9);
}
.carta__lugar span { font-size: calc(13 * var(--t)); line-height: 1.2; color: var(--ink-60); }
.carta__lugar--agua span { color: #3a607d; text-shadow: none; }   /* 4.7:1 on the water */
@media (max-width: 900px) { .carta__lugar--agua span { font-size: calc(12 * var(--t)); } }
.carta__kd { display: flex; align-items: center; gap: calc(8 * var(--t)); }
.carta__kd i {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 .5px 2px 3px var(--shadow-hairline), 0 4px 12px rgba(0, 0, 0, .12);
}
.carta__kd span { font-size: calc(16 * var(--t)); line-height: 1.2; color: var(--ink); font-weight: 400; }

/* ===================================================== ALIMÉNTATE === */
.desayuno {
  padding: 0 var(--gutter) var(--section);
  max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto;
}
/* A warm card, the press card's material: two rows, the live site's
   heading on the left and its sentences on the right, one hairline
   between them because it separates content. */
.desayuno__card {
  background: var(--surface-warm); border-radius: var(--r-2xl);
  padding: calc(16 * var(--u)) var(--card-pad);
}
.desayuno__row {
  /* The text column lands on the page's second grid line, not the card's. */
  display: grid; grid-template-columns: calc(var(--col) - var(--card-pad)) 1fr; column-gap: var(--gap);
  align-items: baseline;
  padding: calc(48 * var(--u)) 0;
}
.desayuno__row + .desayuno__row { border-top: 1px solid var(--line); }
.desayuno__row p { max-width: calc(560 * var(--u)); text-wrap: balance; }

/* =================================================== CÓMO FUNCIONA === */
.pasos { padding: 0 var(--gutter) var(--section); }
/* THREE EQUAL TRACKS, both rows: the heading block and steps 01-02 on
   the first, 03-05 on the second, so every step sits under another. (The
   comp ran row one on 428/315/315 and row two on 315/315/315, and the two
   rows never lined up.) */
.pasos__grid {
  max-width: var(--content); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: calc(96 * var(--u));
}
.pasos__head { display: flex; flex-direction: column; justify-content: flex-start; gap: calc(40 * var(--u)); }
.pasos__head h2 { max-width: calc(340 * var(--u)); }
.pasos__cta { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }

.paso { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.paso__n {
  display: grid; place-items: center;
  width: calc(40 * var(--t)); height: calc(38 * var(--t));
  border: 1px solid var(--ink-40); border-radius: var(--r-lg);
  font-size: calc(18 * var(--t)); line-height: 1.33; letter-spacing: -.02em; word-spacing: .06em; color: var(--ink-60);
}
/* A hairline timeline connects the numbers, and it STOPS AT THE ROW WRAP.
   The grid children are [head, 01..05], so the steps are nth-child 2..6
   and the three lines belong to 01, 03 and 04 — not to 02, which ends its
   row, and not to 05, which ends the sequence. The old selector drew them
   on 02, 03 and 04: one line running off the right edge and none at all
   between 01 and 02. */
.paso:nth-child(2)::before,
.paso:nth-child(4)::before,
.paso:nth-child(5)::before {
  content: ""; position: absolute;
  left: calc(52 * var(--u)); top: calc(19 * var(--u));
  width: calc(var(--col) + var(--gap) - 63 * var(--u)); height: 1px; background: var(--line);
}
.paso h3 { margin: calc(12 * var(--u)) 0 calc(8 * var(--u)); }
.paso p { margin: 0; min-height: calc(58 * var(--u)); }
.paso p a { color: inherit; text-underline-offset: 2px; }
/* The plate rides to the foot of its cell, and grid cells in a row are
   one height, so every plate in a row starts on the same line however many
   lines the sentence above it runs to. */
.paso p { margin-bottom: calc(24 * var(--u)); }
.paso__plate { margin-top: auto; }

.plate {
  position: relative; display: block; width: 100%;
  aspect-ratio: 315 / 396; border-radius: var(--r-lg); overflow: clip;
  background: var(--surface-card);
  box-shadow: 0 .5px 2px var(--shadow-hairline);
}
.plate > img { width: 100%; height: 100%; object-fit: cover; }
/* Step 01's monitor shows this page — Juan built the plate for it. It is
   NOT assembled here: the plate ships from the comp already composited, so
   the page sits in the bezel at exactly the size he drew it. Rebuilding
   that stack in CSS meant guessing Figma's crop, and the guess put the
   page inside the screen at the wrong scale. See tools/README-plates.md. */

/* ========================================================= PRENSA === */
.prensa { padding: 0 var(--gutter) var(--section); }
/* Straight under the hero, the first thing past the fold: clear of the
   photograph's edge, and the statement's own top padding is the gap below. */
.hero + .prensa { padding-top: calc(48 * var(--u)); padding-bottom: 0; }
/* The press used to close the domes' band; now the band closes itself,
   with the room the press card's foot gave it before the curtain. */
.domos:has(+ .curtain) { padding-bottom: calc(110 * var(--u)); }
.prensa__card {
  max-width: var(--content); margin: 0 auto;
  background: var(--surface-warm); border-radius: var(--r-2xl);
  padding: calc(31 * var(--u)) var(--card-pad);
  display: flex; flex-direction: column; gap: calc(22 * var(--u));
}
/* The label, and on the home the way to the articles, on one line. */
.prensa__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--t)) calc(24 * var(--t)); }
.prensa__outlets {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); flex-wrap: wrap;
}
/* The outlets' own marks, as single-ink masks (tools/press.py), every one
   at the same optical weight: its box and its tone (--o, around 50%) both
   set from how much ink it carries, so a solid mark and a hairline one read
   as one row. */
.prensa__outlets li { display: flex; }
.prensa__outlets img { display: block; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); opacity: var(--o, .5); }

/* ======================================================== RESEÑAS === */
.resena { padding: 0 var(--gutter) var(--section); text-align: center; }
.resena blockquote { margin: 0 auto; max-width: var(--content); }
.resena__q {
  margin: 0 0 calc(17 * var(--u));
  font-weight: 300; font-size: calc(44 * var(--u)); line-height: 1.14; letter-spacing: -.07em; word-spacing: .14em;
  /* In ink: it is the one thing on the page a stranger said about it. */
  color: var(--ink);
}
.resena footer p { margin: 0 0 calc(17 * var(--u)); font-weight: 400; font-size: calc(12 * var(--t)); line-height: 1.25; letter-spacing: -.02em; word-spacing: .06em; }
.resena footer p:last-child { margin-bottom: 0; }
.resena__link { color: var(--accent); text-decoration: none; }
@media (hover: hover) { .resena__link:hover { text-decoration: underline; } }

/* ========================================================= CIERRE === */
.cierre { padding: 0 var(--gutter) var(--section); text-align: center; }
.cierre p { max-width: var(--content); margin: 0 auto calc(50 * var(--u)); }

/* ========================================================= FOOTER === */
/* FOUR STEPS, EACH ONE A STEP. The footer has to be read at a glance, so
   every kind of thing in it has its own size and tone and nothing shares
   one with a thing of another kind: the name (Heading/24, ink), what you
   can press (20, ink), what a group is (Caps/12, second tone) and what you
   only read (Body/16, second tone), then the fine print (14) under the
   rule. The 12 and 15px links it had were too small (Juan, 7 Oct: "too
   small the text and also too noisy"); one size for everything, the
   first answer, left the eye nothing to rank ("now hierarchy is null").
   A label sits close to its list and far from the next group. */
.footer { background: var(--surface-warm); padding: calc(96 * var(--u)) var(--gutter) calc(48 * var(--u)); }
.footer__grid {
  max-width: var(--content); margin: 0 auto;
  /* Brand on track one, Domos and El lugar splitting track two, Reservas
     on track three. The email is 285px at 20 and the track is 353. */
  display: grid; grid-template-columns: var(--col) repeat(2, calc((var(--col) - var(--gap)) / 2)) var(--col);
  gap: var(--gap);
}
.footer .caps { margin-bottom: calc(18 * var(--t)); }
.footer__brand .heading-24 { margin-bottom: calc(10 * var(--t)); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--t)); }
.footer li a { font-size: calc(20 * var(--t)); line-height: 1.3; letter-spacing: -.02em; word-spacing: .06em; }
.footer__reservas .body-16 { margin-top: calc(14 * var(--t)); }
.footer a { text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (hover: hover) { .footer a:hover { text-decoration-line: underline; } }
/* Where you are: a page's own name, set back (domos.py and paginas.py mark it). */
.footer a[aria-current="page"] { color: var(--ink-60); }
.footer__rule { max-width: var(--content); margin: calc(96 * var(--u)) auto 0; height: 1px; background: var(--line); }
/* The fine print: one line at 14, the legal name on the left, the papers
   and the two networks on the right, spaced by air instead of dots. */
.footer__legal {
  max-width: var(--content); margin: calc(28 * var(--u)) auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(12 * var(--t)) calc(24 * var(--u));
  font-size: calc(14 * var(--t)); line-height: 1.3; letter-spacing: -.01em; word-spacing: .06em; color: var(--ink-60);
}
.footer__legal p { margin: 0; }
.footer__legal ul { flex-direction: row; flex-wrap: wrap; gap: calc(8 * var(--t)) calc(24 * var(--t)); }
.footer__legal li a { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
/* Under 1200 the email no longer fits a track (285px against 251 at
   1024): the name takes a row of its own and the three groups share the
   next, Reservas with twice the room. */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1fr 1fr 2fr; row-gap: calc(48 * var(--t)); }
  .footer__brand { grid-column: 1 / -1; }
}
/* A phone loses the columns it cannot hold and keeps the steps. Domos and
   El lugar stay side by side (stacked, the footer ran 1,100px of single
   lines) and Reservas takes the full width. A thumb's 44px comes from
   padding, not type. */
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: calc(36 * var(--t)); }
  .footer__brand, .footer__reservas { grid-column: 1 / -1; }
  .footer .caps { margin-bottom: calc(4 * var(--t)); }
  .footer ul { gap: 0; }
  .footer__grid li a { display: block; padding: 9px 0; }
  .footer__reservas .body-16 { margin-top: calc(6 * var(--t)); }
  .footer__rule { margin-top: calc(56 * var(--t)); }
  .footer__legal { flex-direction: column; gap: 0; margin-top: calc(20 * var(--t)); }
  .footer__legal ul { gap: 0 calc(24 * var(--t)); }
  .footer__legal a { display: inline-block; padding: 13px 0; }
}

/* ====================================================== THE PLAYER === */
/* The film plays HERE. Sending a reader to youtube.com to watch a
   twenty-minute press segment is sending them off the page that was
   selling them the weekend. */
.player {
  position: fixed; inset: 0; z-index: 90;
  /* Near black, so the only light around the film is its own glow: at
     .88 the nav and the hero read through and competed with it. */
  background: rgba(0, 0, 0, .97);
  display: grid; place-items: center;
  padding: calc(64 * var(--t)) calc(24 * var(--t));
  opacity: 0; transition: opacity .25s var(--ease-house);
}
.player.is-open { opacity: 1; }
/* As wide as the window allows AND as tall: on a short wide screen the
   width alone ran the row off the bottom. */
.player__frame {
  width: min(100%, calc(1180 * var(--u)), calc((100vh - 128 * var(--t)) * 16 / 9));
  width: min(100%, calc(1180 * var(--u)), calc((100svh - 128 * var(--t)) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: clip; background: #000;
}
.player__frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* Our film throws light past its frame, so the frame stops clipping and
   the film clips itself. The overlay does, so a phone never scrolls
   sideways into the glow. */
.player { overflow: clip; }
.player.is-ours .player__frame { overflow: visible; background: none; }

/* ---- the film (assets/js/film.js) ---- */
.film {
  position: relative; z-index: 0; width: 100%; height: 100%;
  container-type: inline-size;
  color: #fff; font-weight: 400; letter-spacing: -.02em; word-spacing: .06em;
}
.film__box {
  position: absolute; inset: 0; overflow: clip;
  border-radius: var(--r-lg); background: #000;
}
.film__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.film.is-rest .film__box { cursor: none; }

/* The light. Fades in on the first frame; dimmer while paused, so the
   dark settles back when the film does. */
.film__glow {
  position: absolute; z-index: -1; inset: -14% -10%; width: 120%; height: 128%;
  filter: blur(calc(56 * var(--t))) saturate(1.25);
  opacity: 0; transition: opacity .8s var(--ease-house);
  pointer-events: none;
}
.film.is-lit .film__glow { opacity: .55; }
.film.is-lit.is-paused .film__glow { opacity: .3; }
.film.is-full .film__glow { display: none; }

/* The row and the line, over a shade that is only as tall as they need. */
.film__chrome {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(40 * var(--t)) calc(14 * var(--t)) calc(8 * var(--t));
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0));
  transition: opacity .3s var(--ease-house);
}
.film.is-rest .film__chrome { opacity: 0; pointer-events: none; }

/* THE LINE. One variable, --p, the fraction played; each chapter works
   out its own fill from where it sits (--a to --b), so a frame of
   playback writes one property and the browser does the rest. */
.film__line { position: relative; height: calc(18 * var(--t)); display: flex; align-items: center; }
.film__segs { position: relative; display: flex; gap: 3px; width: 100%; height: 3px; transition: height .15s var(--ease-house); }
.film__line.is-hover .film__segs, .film.is-scrub .film__segs { height: 5px; }
.film__seg { position: relative; flex: 1 1 0; border-radius: 2px; overflow: clip; background: rgba(255, 255, 255, .26); transition: background-color .15s var(--ease-house); }
.film__seg.is-hover { background: rgba(255, 255, 255, .4); }
.film__seg i { position: absolute; inset: 0; transform-origin: 0 50%; }
.film__seg i:first-child { background: rgba(255, 255, 255, .3); transform: scaleX(clamp(0, calc((var(--q, 0) - var(--a)) / (var(--b) - var(--a))), 1)); }
.film__seg i:last-child { background: #fff; transform: scaleX(clamp(0, calc((var(--p, 0) - var(--a)) / (var(--b) - var(--a))), 1)); }
/* The range input carries the line for keys and screen readers, and for
   a drag: it lies over the line, invisible, the full height of the hit. */
.film__seek {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
/* A finger takes the line itself (film.js), over a band taller than the
   line, so the native range never fights it. */
@media (pointer: coarse) {
  .film__line { touch-action: none; }
  .film__line::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -6px; }
  .film__seek { pointer-events: none; }
  /* The keys stay 36 wide so the row fits a 320 phone; a finger gets 44
     of height. */
  .film__key, .film__chapter { position: relative; }
  .film__key::after, .film__chapter::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
}
.film__seek:focus-visible + .film__tip { opacity: 0; }
.film__line:has(.film__seek:focus-visible) .film__segs { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 4px; border-radius: 2px; }
.film__tip {
  position: absolute; bottom: calc(100% + 6 * var(--t));
  left: clamp(calc(60 * var(--t)), calc(var(--h, 0) * 100%), calc(100% - 60 * var(--t)));
  transform: translateX(-50%);
  display: flex; gap: calc(8 * var(--t)); align-items: baseline; white-space: nowrap;
  padding: calc(6 * var(--t)) calc(10 * var(--t)) calc(7 * var(--t));
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .94); color: var(--ink);
  font-size: calc(12 * var(--t)); line-height: 1.2;
  opacity: 0; transition: opacity .12s var(--ease-house); pointer-events: none;
}
.film__tip b { font-weight: 400; font-variant-numeric: tabular-nums; }
.film__tip span { color: var(--ink-60); }
.film__tip span:empty { display: none; }
.film__line.is-hover .film__tip { opacity: 1; }

.film__row { display: flex; align-items: center; gap: calc(4 * var(--t)); height: calc(40 * var(--t)); }
.film__fill { flex: 1; }
.film__key, .film__chapter {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(36 * var(--t)); border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .9); transition: color .15s var(--ease-house), background-color .15s var(--ease-house);
}
.film__key { width: calc(36 * var(--t)); }
.film__key svg, .film__chapter svg { width: calc(20 * var(--t)); height: calc(20 * var(--t)); flex: none; }
@media (hover: hover) { .film__key:hover, .film__chapter:hover { color: #fff; background: rgba(255, 255, 255, .1); } }
.film__key:focus-visible, .film__chapter:focus-visible, .film__menu button:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 1px; }
.film__time { padding: 0 calc(6 * var(--t)); font-size: calc(13 * var(--t)); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.film__chapter {
  gap: calc(8 * var(--t)); min-width: 0; padding: 0 calc(10 * var(--t));
  font-size: calc(13 * var(--t));
}
.film__chapter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film__chapter[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }

/* Paused: one big key in the middle, for the tap that does not know the
   row is there. Waiting: a ring, only once the film has asked for play. */
.film__big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(64 * var(--t)); height: calc(64 * var(--t)); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--scrim); border: 1px solid var(--white-14); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-house);
}
.film__big svg { width: calc(26 * var(--t)); height: calc(26 * var(--t)); margin-left: calc(3 * var(--t)); }
.film.is-paused .film__big { opacity: 1; pointer-events: auto; }
.film__wait {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(34 * var(--t)); height: calc(34 * var(--t)); border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); border-top-color: #fff;
  pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-house) .3s;
  animation: film-wait .9s linear infinite;
}
.film.is-waiting:not(.is-paused) .film__wait { opacity: 1; }
@keyframes film-wait { to { rotate: 1turn; } }

/* The chapter list: the hero card's own glass, over the corner it opens from. */
.film__menu {
  position: absolute; right: calc(12 * var(--t)); bottom: calc(64 * var(--t));
  width: min(calc(300 * var(--t)), calc(100% - 24 * var(--t)));
  max-height: calc(100% - 80 * var(--t)); overflow: auto; overscroll-behavior: contain;
  padding: calc(8 * var(--t));
  border-radius: var(--r-lg); background: rgba(12, 12, 12, .72); border: 1px solid var(--white-14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.film__menu-h {
  margin: 0; padding: calc(6 * var(--t)) calc(10 * var(--t)) calc(8 * var(--t));
  font-size: calc(13 * var(--t)); letter-spacing: -.01em; color: var(--white-60);
}
.film__menu ol { list-style: none; margin: 0; padding: 0; }
.film__menu button {
  display: grid; grid-template-columns: calc(44 * var(--t)) 1fr; align-items: baseline; width: 100%;
  padding: calc(8 * var(--t)) calc(10 * var(--t)); border-radius: var(--r-sm); text-align: left;
  font-size: calc(13 * var(--t)); line-height: 1.3; color: rgba(255, 255, 255, .88);
}
.film__menu button span { font-variant-numeric: tabular-nums; color: var(--white-60); }
@media (hover: hover) { .film__menu button:hover { background: rgba(255, 255, 255, .08); color: #fff; } }
.film__menu button[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }

.film.is-full { background: #000; }
.film.is-full .film__box { border-radius: 0; }

/* A phone's film is 360 px wide: the chapter key keeps its glyph and
   drops its words, and the menu takes the whole picture. */
@container (max-width: 520px) {
  .film__chapter span { display: none; }
  .film__chapter { padding: 0; width: calc(36 * var(--t)); }
  .film__menu { inset: calc(8 * var(--t)); width: auto; max-height: none; bottom: calc(56 * var(--t)); }
  .film__chrome { padding: calc(28 * var(--t)) calc(8 * var(--t)) calc(4 * var(--t)); }
}
@media (prefers-reduced-motion: reduce) { .film__glow { display: none; } }
.player__close {
  position: absolute; right: calc(20 * var(--t)); top: calc(18 * var(--t));
  padding: calc(9 * var(--t)) calc(15 * var(--t)) calc(11 * var(--t));
  border-radius: var(--r-xl); background: rgba(255, 255, 255, .92); color: var(--ink);
  font-weight: 400; font-size: calc(12 * var(--t)); letter-spacing: -.02em; word-spacing: .06em;
}
.video-card { text-align: left; font: inherit; cursor: pointer; }

/* ================================================== THE 3D VIEWER === */
/* Page chrome is ONE control; instrument chrome is all of them. */
.viewer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--surface-sunk);
  opacity: 0; transition: opacity .3s var(--ease-house);
}
.viewer.is-open { opacity: 1; }
.viewer__stage { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.viewer__stage:active { cursor: grabbing; }
/* The canvas is ONE element that moves between the band and here, so it
   arrives carrying `.domos__canvas` — whose opacity is driven by a selector
   that stops matching the moment it leaves the band. Without this it lands
   in the viewer at opacity 0 and the panel reads as broken. */
.viewer .viewer__stage canvas { width: 100%; height: 100%; display: block; opacity: 1; }
.viewer__top {
  position: absolute; inset: 0 0 auto; height: calc(80 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(54 * var(--u));
}
.viewer__name { margin: 0; font-weight: 300; font-size: calc(24 * var(--t)); line-height: 1.25; letter-spacing: -.02em; word-spacing: .06em; }
.viewer__close {
  padding: calc(9 * var(--t)) calc(15 * var(--t)) calc(11 * var(--t));
  border-radius: var(--r-xl); background: var(--paper); box-shadow: 0 .5px 2px var(--shadow-hairline);
  font-weight: 400; font-size: calc(12 * var(--t)); letter-spacing: -.02em; word-spacing: .06em;
}
/* The bar floats over the model, so it carries its own material: the same
   frosted chrome as the nav pill. Without it the segmented groups sit on a
   deck at four percent black and stop reading as controls. */
.viewer__bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(44 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u)); flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - var(--gutter) * 2);
  padding: calc(6 * var(--u));
  border-radius: calc(27 * var(--u));
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
/* The hour and the CTA travel together: on a desktop they are the tail of
   one row, on a phone they are the third row, and pairing them stops the
   booking control being a fourth thing to place. */
.viewer__bar .seg { background: rgba(0, 0, 0, .05); }
.viewer__end { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.viewer__cta { height: calc(38 * var(--t)); padding: 0 calc(16 * var(--t)); }
.viewer__name {
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u));
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.viewer__hint { text-shadow: 0 0 6px var(--surface-sunk), 0 0 12px var(--surface-sunk); }
.viewer__hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(20 * var(--u)); margin: 0;
  font-weight: 400; font-size: calc(12 * var(--t)); color: var(--ink-60);
}
/* ---- the viewer on a phone, upright or sideways ------------------------
   Juan, 7 Oct 2026, of three rows of controls in a white card that took
   40% of a phone held sideways: "so complicated", "it looks so bad". The
   dome is the instrument; around it, only the least that turns it. The
   views under it; the hour and Reservar beside them; the dome switched by
   the arrows at its name, as on the band. No card: the controls stand on
   the stage's own ground. Sideways it is one row. The model is framed
   above whatever the bar measures (`inset`, site.js). The desktop keeps
   its bar. */
.viewer__flecha { display: none; }
@media (max-width: 900px), (max-height: 600px) {
  .viewer__top { height: 62px; padding: 0 12px; }
  .viewer__domo {
    display: flex; align-items: center;
    border-radius: 22px; background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .viewer__domo .viewer__name {
    padding: 8px 16px 10px; font-size: 20px;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .viewer__flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
  .viewer__flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .viewer__flecha:disabled { opacity: .25; cursor: default; }
  .viewer__domo .viewer__flecha + .viewer__name { padding-left: 0; padding-right: 0; }
  .viewer__close { height: 44px; padding: 0 18px; font-size: 14px; }
  .viewer__bar {
    left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none;
    padding: 0; gap: 8px; border-radius: 0; justify-content: center;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .viewer__bar [data-viewer-domos] { display: none; }
  .viewer__bar .seg { background: rgba(0, 0, 0, .06); }
  .viewer__bar .seg__item { padding: 11px 14px 13px; font-size: 14px; }
  .viewer__end { gap: 8px; }
  .viewer__cta { height: 44px; padding: 0 20px; font-size: 14px; }
  .viewer__hint { display: none; }
}
/* The smallest phone sideways (568 wide): tighter, so it is still one row. */
@media (max-width: 700px) and (max-height: 400px) {
  .viewer__bar { gap: 6px; }
  .viewer__bar .seg__item { padding-left: 9px; padding-right: 9px; }
  .viewer__cta { padding: 0 14px; }
}
/* Upright: the views across the width, the hour and Reservar under them. */
@media (max-width: 640px) and (orientation: portrait) {
  .viewer__bar [data-viewer-views] { flex: 1 1 100%; }
  .viewer__bar [data-viewer-views] .seg__item { flex: 1 1 0; text-align: center; padding-left: 4px; padding-right: 4px; }
  .viewer__end { flex: 1 1 100%; justify-content: center; }
}

/* ======================================================= RESERVAR === */
/* The bar, the search, the results and the checkout (reserva.js). Nothing
   new in the vocabulary: paper on the ground with a hairline ring and a
   soft lift, state as surface and alpha, the accent only on what books.
   Layered over what the page already floats: the WhatsApp pill 40, the
   bar 45, the nav 50, the menu 60, the viewer 80, then these. */

/* ---- the bar: always at the foot of the screen ------------------------ */
/* On a desktop, Airbnb's search pill moved to the thumb's edge of the
   page: Llegada, Salida, Huéspedes, then the answer and the one button.
   On a phone, one line of what is asked and one of what it costs, and the
   button in the thumb's reach. The same three states everywhere: search,
   the answer (how many are free), the chosen dome. */
.buscador {
  position: fixed; z-index: 45;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  /* A FIXED OBJECT. Its width and every slot in it are set, so nothing it
     says (a price, "Consultando…", the button's word) can move its edges,
     or the panel that stands on it. */
  width: min(880px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 6px;
  /* One gap all round and fully round ends, so everything inside it (the
     lit field, the button) is concentric with it. */
  padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .12);
  transition: opacity .2s ease-out, transform .24s ease-out, background-color .2s ease-out, visibility 0s;
}
.is-modal .buscador {
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity .2s var(--ease-house), transform .3s var(--ease-house), visibility 0s linear .3s;
}
.buscador__resumen { display: none; }
.buscador__campos { position: relative; flex: none; display: flex; align-items: stretch; }
/* The one highlight: it slides to the field being asked. */
.buscador__luz {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 32px; background: var(--paper); pointer-events: none;
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);
  opacity: 0;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), width .32s cubic-bezier(.16, 1, .3, 1), opacity .16s ease-in;
}
.buscador__luz.is-on { opacity: 1; transition: transform .32s cubic-bezier(.16, 1, .3, 1), width .32s cubic-bezier(.16, 1, .3, 1), opacity .2s ease-out; }
.buscador__luz.sin-paso { transition: none; }
.buscador__seg { z-index: 1; }
.buscador__campo {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 150px; padding: 9px 20px 11px; border-radius: 32px; text-align: left;
  transition: background-color .15s var(--ease-house);
}
.buscador__campo:last-child { width: 170px; }
.buscador__seg { position: relative; display: flex; }
.buscador__seg + .buscador__seg .buscador__campo::before {
  content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line);
}
@media (hover: hover) { .buscador__campo:hover { background: rgba(0, 0, 0, .04); } }
.buscador__campo, .buscador__x, .buscador__wa, .cal__prev, .cal__next, .busca__borrar, .resumen-pill, .contador button {
  transition: background-color .18s var(--ease-ui), box-shadow .18s var(--ease-ui), color .18s var(--ease-ui), opacity .18s var(--ease-ui), transform .24s var(--ease-ui);
}
.buscador__x:active, .contador button:active, .cal__prev:active, .cal__next:active { transform: scale(.92); transition-duration: .08s; }
.buscador__x:active { transform: translateY(-50%) scale(.92); }
.resumen-pill:active { transform: scale(.98); transition-duration: .08s; }
.buscador__seg:hover .buscador__campo::before, .buscador__seg:hover + .buscador__seg .buscador__campo::before { opacity: 0; }
/* The lit field's own clear key. */
.buscador__x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-sunk); color: var(--ink);
}
.buscador__x .cerrar__x { width: 9px; height: 9px; }
.buscador__seg:has(.buscador__x:not([hidden])) .buscador__campo { padding-right: 42px; }
@media (hover: hover) { .buscador__x:hover { background: var(--surface-card); } }
/* Airbnb's own: the label in sentence case and in ink, the empty value in
   grey. No capitals, no tracking. */
.buscador__rotulo { font-weight: 400; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.buscador__valor {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 300; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; word-spacing: .06em;
}
.buscador:not(.is-lleno) [data-b-llegada], .buscador:not(.is-lleno) [data-b-salida] { color: var(--ink-60); }
/* The answer, between the question and the button: how many are free, or
   the chosen dome and its total. Nothing while there is no search. */
.buscador__precio {
  flex: 1 1 auto; min-width: 0;
  margin: 0 4px 0 4px; padding-left: 16px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-size: 15px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap;
}
.buscador__precio span { overflow: hidden; text-overflow: ellipsis; }
.buscador__precio span + span { font-size: 13px; color: var(--ink-60); }
/* One width for every word the button says. */
/* As tall as the bar lets it be: the same 6px from the bar's edge on top,
   bottom and end, so its curve follows the bar's. */
.buscador__accion { flex: none; align-self: stretch; width: 148px; gap: 8px; height: auto; padding: 0 0 2px; border-radius: 999px; }
.buscador__lupa { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.buscador[data-paso="reservar"] .buscador__lupa, .buscador[data-paso="ver"] .buscador__lupa { display: none; }

/* The page makes room for it: nothing it has to say ends under the bar. */
.con-buscador .footer { padding-bottom: calc(48 * var(--u) + 104px); }
/* The hero's price pill IS the bar now (the bar says "Desde $349.000 la
   noche" until there is a search), so the pill stands down while the bar is
   on; without script it is still there. The film card rises clear of the
   bar: the hero is taller than a laptop's screen, so its foot is measured
   from the screen's bottom, not the band's. */
.con-buscador .hero__caption { display: none; }
.con-buscador .video-card { bottom: max(calc(44 * var(--u)), calc(100% - 100vh + 104px)); bottom: max(calc(44 * var(--u)), calc(100% - 100svh + 104px)); }
/* A screen too short to lift the card above the bar (a phone held
   sideways, from 901 px wide under .hero__foot below) keeps it at the
   hero's foot, or it lands on the lead and its button. */
@media (min-width: 1201px) and (max-height: 500px) { .con-buscador .video-card { bottom: calc(44 * var(--u)); } }

/* Who is coming: two steppers, the ages said, and who fits where. */
.gente__fila, .pago__fila {
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--t));
  padding: calc(14 * var(--t)) 0;
}
.gente__fila + .gente__fila { border-top: 1px solid var(--line); }
.gente__fila p, .pago__fila p {
  margin: 0; display: flex; flex-direction: column; gap: calc(2 * var(--t));
  font-size: calc(16 * var(--t)); line-height: 1.3; letter-spacing: -.02em; word-spacing: .06em;
}
.gente__fila p span + span, .pago__fila p span + span { font-size: calc(14 * var(--t)); }
.gente__nota { margin: calc(6 * var(--t)) 0 0; font-size: calc(14 * var(--t)); line-height: 1.4; letter-spacing: -.01em; }
.gente__nota + .gente__nota { margin-top: 2px; }

/* A stepper: two round keys drawn in hairline, the number between them. */
.contador { display: inline-flex; align-items: center; gap: calc(10 * var(--t)); flex: none; }
.contador button {
  position: relative; width: calc(34 * var(--t)); height: calc(34 * var(--t)); border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); color: var(--ink);
  transition: box-shadow .15s var(--ease-house), opacity .15s var(--ease-house);
}
.contador button::before, .contador [data-mas]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px;
  margin: -.75px 0 0 -5.5px; background: currentColor; border-radius: 1px;
}
.contador [data-mas]::after { transform: rotate(90deg); }
@media (hover: hover) { .contador button:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.contador button:disabled { opacity: .28; cursor: default; }
.contador output { min-width: 1.6em; text-align: center; font-size: calc(16 * var(--t)); }
@media (pointer: coarse) { .contador button::after { content: ""; } .contador button { width: 44px; height: 44px; } }

/* The price paragraph can carry a way out ("Ver el Navío"). */
.enlace {
  font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ficha__precio a, .acciones__nota a, .pago__error a { color: var(--accent); text-underline-offset: 2px; }
.pago__error a, .pago__error .enlace { color: inherit; }

/* Said under the button, once: where the booking is finished. */
.acciones__nota {
  max-width: max(calc(540 * var(--u)), 480px);
  margin: calc(18 * var(--u)) auto 0; text-wrap: balance;
}

/* ---- the shared close key, the menu sheet's own ----------------------- */
.cerrar {
  flex: none; display: grid; place-items: center;
  width: calc(44 * var(--t)); height: calc(44 * var(--t));
  border-radius: var(--r-lg); background: rgba(0, 0, 0, .05);
}
@media (hover: hover) { .cerrar:hover { background: rgba(0, 0, 0, .08); } }
.cerrar__x { position: relative; display: block; width: calc(15 * var(--t)); height: calc(15 * var(--t)); }
.cerrar__x::before, .cerrar__x::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px;
  background: currentColor; border-radius: 2px;
}
.cerrar__x::before { transform: rotate(45deg); }
.cerrar__x::after { transform: rotate(-45deg); }

/* ---- the search -------------------------------------------------------- */
/* ON A DESKTOP it is Airbnb's: the bar stays where it is, the field being
   asked lifts inside it as a white pill, and ONE panel stands on the bar
   with the answer's controls. No header, no close key, no Next: outside or
   Esc closes it, and the bar's own button searches. The page behind is
   veiled in its own paper, not darkened.
   ON A PHONE it is Airbnb's sheet: full screen, the questions as cards on
   the sunk ground, one open at a time, the next step bottom right. */
.busca {
  position: fixed; inset: 0; z-index: 85;
  /* No veil: the page stays as it is and the panel's own lift separates
     it, as on Airbnb. This layer is only what catches the click outside. */
  background: transparent;
}
/* MOTION: the panel does not travel. Its place is set in pixels before it
   shows (reserva.js), and it only fades: in over .18s, out over .12s.
   Changing question is the same fade where it stands. */
.busca__panel {
  position: absolute; left: 0; bottom: 120px;
  opacity: 0;
  transition: opacity .12s ease-in;
  width: 760px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-2xl);
  /* The card's own depth: a hairline ring and a soft lift. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .1);
}
.busca.is-open .busca__panel { opacity: 1; transition: opacity .18s ease-out; }
.busca[data-pregunta="gente"] .busca__panel { width: 400px; }
/* Changing question: the old panel is gone at once and the new one fades
   in where it stands, so there is never a blank beat between them. */
.busca.is-open .busca__panel.is-saltando { opacity: 0; transition: none; }
.busca__top { display: none; }
.busca__cuerpo { padding: 28px 32px 8px; }
.pregunta__cerrada, .pregunta__head { display: none; }
.pregunta:not(.is-abierta) { display: none; }
.busca.is-solo-fechas [data-pregunta="gente"] { display: none; }
.pregunta__h { margin: 0; font-weight: 200; font-size: 32px; line-height: 1.1; letter-spacing: -.05em; word-spacing: .12em; }

/* The months. */
.cal__cuerpo { position: relative; }
.cal__meses { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cal__prev, .cal__next {
  position: absolute; top: 0; z-index: 1;
  width: 32px; height: 32px; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cal__prev { left: -6px; }
.cal__next { right: -6px; }
@media (hover: hover) { .cal__prev:hover, .cal__next:hover { background: var(--surface-sunk); box-shadow: none; } }
.cal__prev[disabled], .cal__next[disabled] { transform: none; opacity: .3; }
.mes__nombre {
  margin: 0 0 14px; text-align: center;
  font-weight: 400; font-size: 15px; line-height: 32px; letter-spacing: -.01em;
}
.mes__nombre::first-letter { text-transform: uppercase; }
.mes__semana, .mes__dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.mes__semana span { padding-bottom: 8px; text-align: center; font-weight: 400; font-size: 12px; color: var(--ink-60); }
.mes__dias { row-gap: 2px; }
/* A day: its number, and nothing else. Chosen is ink; the nights between
   are one warm band that runs into both ends, so a stay reads as one
   object. Full is struck through, past is faint, hover is a hairline. */
.dia {
  position: relative; isolation: isolate;
  height: 44px; display: grid; place-items: center;
  color: var(--ink); font-weight: 400; font-size: 15px; letter-spacing: -.01em;
}
.dia::before, .dia::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.dia::after {
  top: 2px; bottom: 2px; left: 50%; width: 40px; margin-left: -20px; border-radius: 50%;
  transition: box-shadow .14s var(--ease-ui), background-color .14s var(--ease-ui);
}
.dia.is-en::before { inset: 2px 0; background: var(--surface-card); }
.dia.is-a.is-con::before { inset: 2px 0 2px 50%; background: var(--surface-card); }
.dia.is-b::before { inset: 2px 50% 2px 0; background: var(--surface-card); }
.dia.is-a, .dia.is-b { color: #fff; }
.dia.is-a::after, .dia.is-b::after { background: var(--ink); }
@media (hover: hover) { .dia:not([aria-disabled="true"]):not(.is-a):not(.is-b):not(.is-pre-b):hover::after { box-shadow: inset 0 0 0 1px var(--ink); } }
.dia:focus { outline: none; }
.busca.is-teclado .dia:focus::after { box-shadow: 0 0 0 2px var(--accent); }
/* The stay as the pointer draws it, before the check-out is pressed. */
.dia.is-pre::before { inset: 2px 0; background: var(--surface-card); }
.dia.is-pre-a::before { inset: 2px 0 2px 50%; background: var(--surface-card); }
.dia.is-pre-b::before { inset: 2px 50% 2px 0; background: var(--surface-card); }
/* The check-out it would be: the band runs on into a whole disc and the
   ring alone marks the day. Left empty, the ring held half band, half paper. */
.dia.is-pre-b::after { background: var(--surface-card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dia[aria-disabled="true"] { color: var(--ink-40); cursor: default; }
.dia.is-lleno { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Who is coming. */
[data-pregunta="gente"] .gente__fila:first-of-type { padding-top: 4px; }
.gente__nota a { color: inherit; text-underline-offset: 2px; }

/* The foot of the panel: clear, and what the chosen nights come to. On a
   desktop the bar's button is the next step, so there is none here. */
.busca__pie {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 32px 22px;
}
.busca__borrar { font-size: 15px; letter-spacing: -.01em; color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; padding: 12px 6px; margin: -12px -6px; }
@media (hover: hover) { .busca__borrar:hover { color: var(--ink); } }
.busca__resumen {
  flex: 1 1 auto; margin: 0; display: flex; justify-content: flex-end; flex-wrap: wrap;
  font-size: 15px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
}
.busca__resumen span:first-child:not(:last-child), .busca__guia { color: var(--ink-60); }
.busca__resumen span + span::before { content: "\00a0·\00a0"; color: var(--ink-60); }
[data-busca-siguiente] { display: none; }
.busca[data-pregunta="gente"] [data-busca-siguiente] { display: inline-flex; flex: none; min-width: 132px; margin-left: auto; }
/* The guests panel is narrow and the bar under it already says what the
   nights come to; its foot is only the two ways out. */
.busca[data-pregunta="gente"] .busca__resumen { display: none; }

/* The bar, while the search stands on it: above the veil, its ground a
   shade down, and the field being asked lifted as a white pill. */
.is-buscando .buscador, .is-modal.is-buscando .buscador {
  z-index: 86; opacity: 1; visibility: visible; transform: translateX(-50%);
  background: #efeee8;
}
.is-buscando .buscador__campo::before { opacity: 0; }
.is-buscando .buscador__campo:hover { background: rgba(0, 0, 0, .04); }
.is-buscando .buscador__campo.is-activo:hover { background: transparent; }

/* ---- the results: the three domes, as a decision ------------------------
   What all three share is said once, at the head and the foot; each dome
   says only what is its own: its photographs, its line, its total, what it
   adds over the one before it, and one button. */
.resultados {
  position: fixed; inset: 0; z-index: 82;
  display: flex; flex-direction: column;
  background: var(--page);
}
/* Asked from the checkout (its dome's Cambiar), the results stand over it,
   as the calendar does over its dates. */
.resultados.is-encima { z-index: 83; }
/* The full-screen answers fade in with a few pixels of settle, and fade
   out without moving. Nothing slides. */
.resultados, .pago {
  opacity: 0; transform: translateY(6px);
  transition: opacity .14s ease-in, transform 0s linear .14s;
}
.resultados.is-open, .pago.is-open {
  opacity: 1; transform: none;
  transition: opacity .22s ease-out, transform .3s ease-out;
}
.resultados__barra {
  flex: none; position: relative; display: flex; align-items: center; justify-content: center;
  height: 76px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--page);
}
.resultados__barra .cerrar { position: absolute; left: max(12px, calc(50% - 553px - 56px)); top: 16px; }
/* Airbnb's summary pill: what was asked, folded to one line; press it to
   ask again. */
.resumen-pill {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 28px 10px; border-radius: 30px; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .06);
  font-size: 15px; line-height: 1.3; letter-spacing: -.02em; word-spacing: .06em;
}
.resumen-pill span + span { font-size: 13px; }
@media (hover: hover) { .resumen-pill:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 6px 18px rgba(0, 0, 0, .09); } }
.resultados__scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.resultados__head { max-width: 1106px; margin: 0 auto; padding: 44px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.resultados__head h2 { margin: 0; }
.resultados__head h2:focus { outline: none; }
.resultados__head p { margin: 0; }
/* What the price covers, then how it cancels: two short lines, once. */
.resultados__base { display: flex; flex-direction: column; gap: 2px; }
.resultados__otra { margin-top: 12px; }

/* NO BOXES. The photograph is the object; the words stand on the page's
   own ground, and every dome's rows line up with the others' (subgrid),
   so the eye compares across the line instead of hunting down each card. */
.resultados__lista {
  list-style: none; max-width: 1106px; margin: 0 auto; padding: 36px 24px 0;
  /* No row gap: a subgrid takes the list's row gap into each card's own
     rows, which opened every space inside the cards by half of it. Cards
     that wrap (two columns) are spaced by their own foot instead. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px;
}
.res { display: flex; flex-direction: column; min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .res { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
}
.res__media {
  position: relative; aspect-ratio: 4 / 3; isolation: isolate;
  border-radius: var(--r-xl); overflow: clip; background: var(--surface-card);
}
.res__fotos {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.res__fotos::-webkit-scrollbar { display: none; }
.res__fotos:focus-visible { outline-offset: -3px; border-radius: var(--r-xl); }
.res__fotos img {
  flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
  scroll-snap-align: start; scroll-snap-stop: always;
  user-select: none; -webkit-user-drag: none;
}
/* Where you are among its photographs: white dots on the picture, each
   with a breath of shadow so a white sky does not swallow it. */
.res__puntos {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 1;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.res__puntos span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 3px rgba(0, 0, 0, .25);
  transition: background-color .2s var(--ease-ui), transform .2s var(--ease-ui);
}
.res__puntos span.is-on { background: #fff; transform: scale(1.15); }
/* The arrows are a mouse's: they come in with the pointer and an exhausted
   one leaves. Touch swipes the photograph itself. */
.res__flecha.chevron {
  top: 50%; z-index: 1; translate: 0 -50%;
  width: 34px; height: 34px; opacity: 0;
}
.res__flecha--prev { left: 12px; }
.res__flecha--next { right: 12px; }
.res__media:hover .res__flecha:not([disabled]),
.res__media:focus-within .res__flecha:not([disabled]) { opacity: 1; }
@media (hover: none), (pointer: coarse) { .res__flecha { display: none; } }
.res__nombre { margin: 18px 0 0; font-weight: 300; font-size: calc(24 * var(--t)); line-height: 1.2; letter-spacing: -.03em; word-spacing: .06em; }
.res__nombre a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .18s var(--ease-ui); }
@media (hover: hover) { .res__nombre a:hover { text-decoration-color: currentColor; } }
/* Three steps, never two of a size: the name, its total, the sheet. */
.res__precio { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.res__precio p { margin: 0; }
.res__total { font-size: calc(18 * var(--t)); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.res__total span { font-size: 14px; letter-spacing: -.01em; color: var(--ink-60); }
.res__aviso { font-size: 14px; line-height: 1.4; color: var(--accent); }
.res__no { font-size: 15px; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
/* ONE action a dome, a pill its own size; seeing it more closely is a
   link in the same blue beside it, the way a product page pairs Buy with
   Learn more. */
.res__acciones { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.res__acciones:empty { display: none; }
/* Where the cards share rows, an empty one keeps its row. Gone, the sheet
   of a dome with nothing to press (the Corbeta for five) moved up into the
   others' button row, stretched it, and dropped their Reservar 120px
   below their price. */
@media (min-width: 641px) {
  @supports (grid-template-rows: subgrid) {
    .res__acciones:empty { display: block; margin-top: 0; }
  }
}
.res__acciones .btn { flex: 0 0 auto; min-width: 132px; }
.res__ver {
  display: inline-flex; align-items: center; gap: 2px; padding: 12px 0;
  font-size: 15px; line-height: 1.27; letter-spacing: -.02em; color: var(--accent);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color .18s var(--ease-ui);
}
.res__ver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .res__ver:hover { text-decoration-color: currentColor; } }
/* THE SHEET: the same six lines for every dome, one hairline apart, so
   the three read across like a spec sheet. What a dome has not is said in
   the second tone. */
.res__ficha { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.res__ficha li {
  padding: 10px 0 11px; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
}
.res__ficha li.is-sin { color: var(--ink-60); }
/* A short laptop screen still shows the decision, photograph to Reservar,
   without a scroll. */
@media (min-width: 901px) and (max-height: 820px) {
  .resultados__head { padding-top: 28px; gap: 8px; }
  .resultados__lista { padding-top: 24px; }
  .res__nombre { margin-top: 14px; }
}
/* A dome that cannot take the trip stays in its place, quieter: its
   first photograph dimmed, why not, and what would work instead. */
.res.is-no .res__media img { opacity: .5; filter: grayscale(.6); }
.res.is-no .res__nombre { color: var(--ink-60); }
.res.is-no .res__ficha li { color: var(--ink-60); }

/* The engine's one condition, said under the domes while it applies:
   small, it is a note and not a heading. */
.resultados__nota { max-width: 1106px; margin: 0 auto; padding: 32px 24px 0; font-size: 14px; line-height: 1.4; }
/* What the three share, and the host for whoever would rather ask. */
.resultados__pie {
  max-width: 1058px; margin: 56px max(24px, calc(50% - 529px)) 0; padding: 28px 0 72px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px 48px;
}
.resultados__incluye { margin: 0; max-width: 500px; }
.resultados__ayuda { display: flex; align-items: center; gap: 18px; }
.resultados__ayuda p { margin: 0; display: flex; flex-direction: column; text-align: right; }
.resultados__ayuda .btn { gap: 8px; }
.resultados__ayuda svg { width: 18px; height: 18px; fill: #25d366; }

/* ---- the checkout ---------------------------------------------------- */
.pago {
  position: fixed; inset: 0; z-index: 82;
  display: flex; flex-direction: column;
  background: var(--page);
}
.pago__barra {
  flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  height: 66px; padding: 0 max(12px, calc(50% - 553px - 56px));
  border-bottom: 1px solid var(--line);
}
.pago__scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.pago__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; align-items: start;
  max-width: 1106px; margin: 0 auto; padding: 56px 24px 110px;
}
.pago__form h2 { margin: 0 0 12px; }
.pago__form h2:focus { outline: none; }
.pago__sec { padding: 28px 0; border-bottom: 1px solid var(--line); }
.pago__sec h3 { margin: 0 0 10px; }
.pago__sec > p { margin: 0; }
.pago__fila + .pago__fila { border-top: 1px solid var(--line); }
/* One age per child: LobbyPMS will not take a child without one. */
.pago__edades { margin: 2px 0 0; }

.extras { list-style: none; margin: 14px 0 0; padding: 0; }
.extra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.extra__si { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
/* A checkbox drawn like the steppers above it: a hairline square that
   darkens under the pointer and, chosen, fills with ink and a white tick,
   as the calendar's chosen days do. The system's own glossy box read as
   another decade's (Juan, 7 Oct 2026). */
.extra__si input {
  flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border-radius: 6px;
  background: var(--paper) center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
  transition: box-shadow .15s var(--ease-house), background-color .15s var(--ease-house), transform .24s var(--ease-ui);
}
.extra__si input:checked {
  background-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (hover: hover) { .extra__si:hover input:not(:checked) { box-shadow: inset 0 0 0 1px var(--ink); } }
.extra__si input:active { transform: scale(.92); transition-duration: .08s; }
.extra__si input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.extra__si > span { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.3; letter-spacing: -.02em; }
.extra__si > span span + span { font-size: 14px; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; letter-spacing: -.01em; color: var(--ink-60); }
.campo i { font-style: normal; }
.campo--ancho { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea, .extra__cant select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); letter-spacing: -.01em;
  padding: 12px 14px; border: 0; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  transition: box-shadow .15s var(--ease-house);
}
.campo textarea { resize: vertical; min-height: 64px; }
/* A select drawn like the inputs beside it. Safari's own select ignores
   padding and comes out a 24 px strip with no ring; this one is the field,
   with the face's own chevron. */
.campo select, .extra__cant select {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px; line-height: 1.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
/* What is wrong with a field, under it. */
.campo__error { font-size: 14px; line-height: 1.35; letter-spacing: -.01em; color: #b3261e; }
.campo [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #b3261e; }
@media (hover: hover) { .campo :is(input, select, textarea):hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .32); } }
.campo :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.campo :is(input, select):user-invalid { box-shadow: inset 0 0 0 1.5px #b3261e; }
.extra__cant select { width: auto; padding: 8px 36px 8px 12px; font-size: 16px; background-position: right 10px center; }
.pago__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.pago__error {
  margin: 24px 0 0; padding: 14px 16px; border-radius: var(--r-lg);
  background: color-mix(in srgb, #b3261e 8%, var(--page)); color: #8c1d18;
}
.pago__confirmar { width: 100%; height: 56px; margin-top: 28px; font-size: 16px; }
.pago__confirmar:disabled { opacity: .5; cursor: default; }
/* While the booking is being made there is no way out of it: LobbyPMS's
   answer has to be seen. */
.pago.is-enviando .pago__barra .cerrar { opacity: .35; pointer-events: none; }
.pago__legal { margin: 12px 0 0; text-align: center; }
.pago__legal a { color: inherit; text-underline-offset: 2px; }

/* The trip, beside the form and level with it while it scrolls. */
.pago__resumen {
  position: sticky; top: 28px;
  padding: 14px 14px 22px; border-radius: var(--r-2xl);
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 4px 12px rgba(0, 0, 0, .08);
}
.pago__resumen > p { margin: 0 6px; }
.resumen__foto { aspect-ratio: 16 / 10; margin-bottom: 16px; border-radius: var(--r-lg); overflow: clip; background: var(--surface-sunk); }
.resumen__foto img { width: 100%; height: 100%; object-fit: cover; }
.resumen__nombre { font-weight: 300; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 4px !important; }
.cuenta { margin: 16px 6px 8px; }
.cuenta > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; letter-spacing: -.01em; }
.cuenta dt { color: var(--ink-60); }
.cuenta dd { margin: 0; white-space: nowrap; }
.cuenta .cuenta__total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 17px; }
.cuenta__total dt { color: var(--ink); }
.pago__resumen .micro-12 { margin: 0 6px; }

.hecho {
  max-width: 680px; margin: 0 auto; padding: 96px 24px 120px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.hecho h2 { margin: 0; }
.hecho h2:focus { outline: none; }
.hecho p { margin: 0; }
.hecho__botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

/* ---- WhatsApp, in the bar ---------------------------------------------- */
/* One thing floats on a phone, not two (Baymard: a chat bubble over the page
   costs the page). The pill's green glyph moves into the bar; the pill
   stands down while the bar is on. Desktops keep WhatsApp in the nav. */
.buscador__wa { display: none; }
/* Nothing focused ends up under the bar (WCAG 2.4.11). */
html.con-buscador { scroll-padding-bottom: 112px; }

@media (max-width: 900px) {
  .pago__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 20px 72px; }
  .pago__resumen { position: static; order: -1; }
  .pago__form h2 { margin-top: 20px; }
}
/* A tablet, or a phone sideways: one column at a phone's measure, and on a
   short screen the dome's picture a strip, so the form is not a screen
   away. */
@media (min-width: 641px) and (max-width: 900px) { .pago__grid { max-width: 640px; } }
@media (max-width: 900px) and (max-height: 500px) { .resumen__foto { aspect-ratio: auto; height: 34vh; } }
@media (max-width: 900px) {
  /* A phone's bar: the question and its answer on the left, the button in
     the thumb's reach on the right. Full width, so it is never a target to
     aim at. */
  .buscador {
    left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom)); transform: none;
    width: auto; padding: 6px; border-radius: 999px;
  }
  .is-modal .buscador { transform: translateY(12px); }
  .buscador__campos, .buscador__precio { display: none; }
  .buscador__resumen {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 6px 8px 8px 16px; border-radius: 24px; text-align: left;
  }
  .buscador__l1, .buscador__l2 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.02em; word-spacing: .06em; }
  .buscador__l1 { font-size: 16px; line-height: 1.3; }
  .buscador__l2 { font-size: 13px; line-height: 1.3; color: var(--ink-60); }
  .buscador__accion { width: 124px; padding: 0 0 2px; }
  .buscador__wa {
    flex: none; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    transition: background-color .2s ease-out;
  }
  @media (hover: hover) { .buscador__wa:hover { background: var(--surface-sunk); } }
  .buscador__wa svg { width: 24px; height: 24px; fill: #25d366; }
  .con-buscador .wa { display: none; }
  .con-buscador .video-card { bottom: auto; }
}
/* A phone's width: the button takes what its longest word needs and the
   WhatsApp key a finger's 44, so the two lines keep the room for the
   price. */
@media (max-width: 430px) {
  .buscador { gap: 4px; }
  .buscador__resumen { padding: 6px 4px 8px 14px; }
  .buscador__wa { width: 44px; height: 44px; }
  .buscador__accion { width: 108px; }
}
@media (max-width: 340px) { .buscador__accion { width: 100px; } }
/* THE FOOT, AS THE TOP. Once the page has moved, the phone's bar at the
   foot stands on the page's paper too: full width, a hairline over it, its
   10 px all round, so nothing scrolls by under the pill or round its ends.
   At the top of a page the pill floats over the first picture, as the bar
   at the top does. The pill keeps its width and its place. */
@media (max-width: 760px) {
  .con-buscador body::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    height: calc(max(10px, env(safe-area-inset-bottom)) + 75px);
    background: var(--page); box-shadow: 0 -1px 0 var(--line);
    opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-house);
  }
  .con-buscador.is-movida:not(.is-modal) body::after { opacity: 1; pointer-events: auto; }
  /* On its paper the pill has nothing behind it to frost: the blur goes,
     and with it a backdrop the phone re-drew on every frame of a scroll. */
  .con-buscador.is-movida:not(.is-modal):not(.is-buscando) .buscador {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper);
  }
}
@media (max-width: 640px) {
  .acciones__nota { margin: calc(16 * var(--t)) var(--gutter) 0; }
  .resultados__barra { height: 68px; }
  .resultados__barra .cerrar { top: 12px; }
  .resultados__head { padding: 28px 20px 0; }
  .resultados__lista { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 24px 20px 0; }
  /* A phone reads one dome at a time: its name and its total on one line,
     as a listing does; a dome that cannot take the trip folds to one row
     at the end, so it never costs a screen of scrolling. */
  .res {
    display: grid; grid-row: auto; grid-template-rows: none; column-gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "media media" "nombre total" "aviso aviso" "no no" "acciones acciones" "ficha ficha";
  }
  .res__precio { display: contents; }
  .res__media { grid-area: media; }
  .res__nombre { grid-area: nombre; margin-top: 16px; align-self: baseline; }
  .res__precio .res__total { grid-area: total; margin-top: 16px; align-self: baseline; font-size: calc(20 * var(--t)); }
  .res__precio .res__aviso { grid-area: aviso; margin-top: 4px; }
  .res__precio .res__no { grid-area: no; margin-top: 8px; }
  .res__acciones { grid-area: acciones; margin-top: 14px; }
  .res__ficha { grid-area: ficha; margin-top: 20px; }
  .res.is-no {
    grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: start;
    grid-template-areas: "media nombre" "media no" "media acciones";
    margin-top: -20px; padding-top: 20px; border-top: 1px solid var(--line);
  }
  .res.is-no + .res.is-no { margin-top: -28px; }
  .res.is-no .res__media { aspect-ratio: 1; border-radius: var(--r-lg); }
  .res.is-no .res__ficha { display: none; }
  .res.is-no .res__nombre { margin-top: 2px; font-size: 18px; }
  .res.is-no .res__precio .res__no { margin-top: 4px; font-size: 15px; color: var(--ink-60); }
  .res.is-no .res__acciones { margin-top: 12px; }
  .resultados__nota { padding: 24px 20px 0; }
  .resultados__pie { margin: 44px 20px 0; padding: 24px 0 56px; flex-direction: column; align-items: stretch; }
  .resultados__ayuda { flex-direction: column; align-items: stretch; gap: 14px; }
  .resultados__ayuda p { text-align: left; }
  .campos { grid-template-columns: 1fr; }
  .hecho { padding: 48px 20px 80px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .resultados__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res { padding-bottom: 44px; }
}
/* The phone's search: Airbnb's sheet, risen from the bar. A phone held
   sideways, or any screen too short for the desktop's panel, gets it too
   (reserva.js decides with the same query). */
@media (max-width: 900px), (max-height: 600px) {
  .busca {
    display: flex; background: var(--surface-sunk);
    opacity: 0; transform: translateY(6px);
    transition: opacity .14s ease-in, transform 0s linear .14s;
  }
  .busca.is-open {
    opacity: 1; transform: none;
    transition: opacity .22s ease-out, transform .3s ease-out;
  }
  .busca__panel,
  .busca[data-pregunta="gente"] .busca__panel,
  .busca.is-open .busca__panel,
  .busca.is-open[data-pregunta="gente"] .busca__panel {
    position: static; flex: 1 1 auto; width: 100%; max-width: none; min-height: 0;
    opacity: 1; transform: none; transition: none; border-radius: 0; background: transparent; box-shadow: none;
  }
  .busca__top { display: flex; justify-content: flex-end; padding: 10px 12px 2px; }
  .busca__top .cerrar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--paper);
    box-shadow: 0 .5px 2px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);
  }
  .busca__cuerpo {
    flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 16px;
  }
  .pregunta:not(.is-abierta) { display: block; }
  .pregunta {
    flex: none; border-radius: var(--r-2xl); background: var(--paper);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 4px 12px rgba(0, 0, 0, .08);
  }
  .pregunta__cerrada {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; text-align: left; font-size: 15px; letter-spacing: -.01em;
  }
  .pregunta__cerrada span:first-child { color: var(--ink-60); }
  .pregunta.is-abierta .pregunta__cerrada { display: none; }
  .pregunta__abierta { display: none; padding: 22px 16px 16px; }
  .pregunta.is-abierta .pregunta__abierta { display: block; }
  .pregunta__head { display: block; margin: 0 4px 16px; }
  .cal__meses { grid-template-columns: 1fr; gap: 28px; }
  .cal__prev, .cal__next { display: none; }
  .mes__nombre { text-align: left; padding-left: 4px; }
  /* Each month's name and week stay at the top of the sheet while its days
     scroll under them; the next month pushes them off. */
  .mes__cabeza { position: sticky; top: 0; z-index: 1; background: var(--paper); }
  .busca__pie {
    background: var(--paper); box-shadow: 0 -.5px 0 rgba(0, 0, 0, .12);
    padding: 12px 12px max(12px, env(safe-area-inset-bottom)) 20px;
  }
  /* Two lines on a phone: the nights, then what they come to. */
  .busca__resumen { flex-direction: column; align-items: flex-end; font-size: 14px; line-height: 1.3; }
  .busca__resumen span + span::before { content: none; }
  [data-busca-siguiente] { display: inline-flex; flex: none; min-width: 128px; margin-left: 0; }
  .busca[data-pregunta="gente"] .busca__resumen { display: flex; }
  [data-busca-siguiente]:disabled { opacity: .4; cursor: default; }
  .is-buscando .buscador { transform: none; }
}
@media (max-width: 360px) {
  .busca__pie { gap: 12px; }
  .busca [data-busca-siguiente], .busca[data-pregunta="gente"] [data-busca-siguiente] { min-width: 104px; }
  .busca__resumen span { white-space: nowrap; }
}
/* Tall enough for it: the dates card fills the sheet, whole, under the ✕,
   with its question fixed at the top, and only the months scroll inside it.
   The card's top never slides under the band. A phone held sideways is too
   short for a fixed question, so there the whole sheet still scrolls. */
@media (max-width: 900px) and (min-height: 501px), (max-height: 600px) and (min-height: 501px) {
  .pregunta.is-abierta[data-pregunta="fechas"] { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .pregunta.is-abierta[data-pregunta="fechas"] .pregunta__abierta { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .pregunta.is-abierta[data-pregunta="fechas"] .cal__cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
}
/* Wider than a phone (a tablet, a phone sideways): the cards keep a phone's
   measure in the middle, so a week is not spread across the whole screen,
   and the foot's ends line up with them. */
@media (min-width: 641px) and (max-width: 900px), (min-width: 641px) and (max-height: 600px) {
  .busca__cuerpo > .pregunta { width: 100%; max-width: 560px; margin-inline: auto; }
  .busca__pie { padding-left: max(20px, calc(50% - 272px)); padding-right: max(12px, calc(50% - 280px)); }
}
/* The hero's foot, wherever it is placed at this width, ends above the bar. */
@media (min-width: 901px) and (max-width: 1200px) {
  .con-buscador .hero__foot { bottom: max(calc(44 * var(--u)), calc(100% - 100vh + 104px)); bottom: max(calc(44 * var(--u)), calc(100% - 100svh + 104px)); }
}
/* Except on a phone held sideways, too short to lift it above the bar: it
   landed on the lead and its button, so it stays at the hero's foot. */
@media (min-width: 901px) and (max-width: 1200px) and (max-height: 500px) {
  .con-buscador .hero__foot { bottom: calc(44 * var(--u)); }
}
@media (max-width: 900px) {
  .con-buscador .hero__foot { padding-bottom: calc(28 * var(--u) + 80px); }
}
/* Reduced motion: things still appear and go (opacity), they do not travel. */
@media (prefers-reduced-motion: reduce) {
  .busca, .busca.is-open, .resultados, .resultados.is-open, .pago, .pago.is-open { transform: none; }
  .buscador__luz, .buscador__luz.is-on { transition: opacity .2s; }
  .buscador, .is-modal .buscador { transition: none; }
}

/* =========================================================== MAPA === */
/* The map of a long page (mapa.js): one hairline per section at the
   window's left edge, the one being read longer and in full ink. Pointed
   at, the lines fold away and the sections' names unfold where they
   stood, in the page's own margin: no box. A name longer than the margin
   fades at its end; over a dark band names and lines turn white.
   Desktop only; under the booking bar and the nav, under every dialog. */
.mapa {
  position: fixed; left: 14px; top: 50%; z-index: 44;
  display: none;
  padding: 120px 72px 120px 22px;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--ink);
  font-size: 16px; line-height: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ease-ui), visibility 0s linear .24s, color .24s var(--ease-ui);
}
@media (min-width: 1200px) { .mapa { display: block; } }
/* A rail read by hovering it, with rows 17 px tall, is not a touch screen's
   (an iPad Pro sideways is 1366 wide): the page's own headings do it. */
@media (hover: none) { .mapa { display: none !important; } }
.mapa.is-visible { opacity: 1; visibility: visible; transition: opacity .24s var(--ease-ui), color .24s var(--ease-ui); }
.mapa.is-invert { color: #fff; }
.mapa__rail {
  position: relative; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: auto;
}
.mapa__fila {
  position: relative; height: 5px;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
/* Each row's target: half the gap above and below, 12px left of the line,
   and, open, the whole width of its name. */
.mapa__llave {
  position: absolute; left: -12px; top: 50%;
  width: 52px; height: 17px; translate: 0 -50%;
  color: inherit; text-decoration: none; outline: none;
}
.mapa.is-abierto .mapa__llave { width: 300px; height: 27px; }
.mapa__raya {
  position: absolute; left: 12px; top: 50%;
  width: 20px; height: 1px; background: currentColor; opacity: .32;
  transform-origin: left center;
  transition: width .24s var(--ease-ui), opacity .2s var(--ease-ui), transform .24s var(--ease-ui);
}
.mapa__fila.is-actual .mapa__raya { width: 28px; opacity: 1; }
@media (hover: hover) { .mapa:not(.is-abierto) .mapa__fila:hover .mapa__raya { width: 40px; opacity: .7; } }
/* The name: out of a 5px blur, 4px to the left, after the row above. */
.mapa__palabra {
  position: absolute; left: 12px; top: 50%;
  translate: 0 -50%;
  white-space: nowrap; pointer-events: none; overflow: hidden;
  max-width: var(--sitio, 160px); padding-right: 12px;
  font-weight: 300; font-size: 13px; line-height: 16px; letter-spacing: -.01em;
  color: inherit;
  opacity: 0; filter: blur(5px); transform: translateX(-4px);
  transition: opacity .16s ease-in, filter .16s ease-in, transform .16s ease-in;
}
.mapa__texto { display: inline-block; transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s ease-out; }
/* Longer than the margin: it fades out over its last 24px. */
.mapa__fila.is-largo .mapa__palabra {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.mapa__fila.is-actual .mapa__texto { font-weight: 400; }
.mapa.is-abierto .mapa__raya { transform: scaleX(.15); opacity: 0; }
.mapa.is-abierto .mapa__palabra {
  opacity: 1; filter: none; transform: none;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1) var(--retardo, 0ms),
              filter .55s cubic-bezier(.16, 1, .3, 1) var(--retardo, 0ms),
              transform .55s cubic-bezier(.16, 1, .3, 1) var(--retardo, 0ms);
}
.mapa__llave:focus-visible .mapa__texto { text-decoration: underline; text-underline-offset: 3px; }
/* A heading the map has moved to takes focus for the keyboard, without a ring. */
main h2[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .mapa__palabra, .mapa.is-abierto .mapa__palabra { filter: none; transform: none; transition: opacity .01ms; }
  .mapa__fila { transition: none; }
}

/* ==================================================== RESPONSIVE === */
/* Below 900 the ladder alone stops being enough: three columns of body
   copy at 900/1440 of their size is unreadable, so these are the only
   places the design actually re-lays-out. */
@media (max-width: 900px) {
  :root { --u: calc(100vw / 900); }

  /* The hero stops being a canvas of absolutely-placed objects and becomes
     a column. `top:` on a relative box moves the paint and not the flow, so
     everything after it lands underneath — the padding does the work. */
  /* THE MOBILE HERO IS A COMPOSITION, NOT A STACK. Reflowing it into a
     column put the photograph in the middle of the page as a band and
     left the screen without a picture at the top; Juan: "hero section on
     mobile can have a different behaviour since we need to adjust the
     whole content". So it keeps the comp's model — words on air, the
     photograph pinned to the foot, the price floating on it — at a phone's
     proportions: the picture takes the bottom half of one screenful. */
  /* A COLUMN THAT IS AT LEAST A SCREENFUL. The words sit in the flow at the
     top and the foot is pushed to the bottom by `margin-top: auto`; when the
     screen is tall the foot lands on the photograph exactly as before, and
     when it is short, or the caption wraps, the hero simply grows instead of
     the price landing on the film card. At 390 wide the card ran 577..774
     and the caption 727..826: forty-seven pixels of one on top of the other,
     with the card's "Travesía TV" row buried under the price. */
  .hero {
    height: auto; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; padding: 0;
  }
  .hero__sky {
    display: block;
    top: calc(300 * var(--u)); bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #6eb9da calc(300 * var(--u)));
  }
  .hero__photo {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 48svh; min-height: calc(300 * var(--u));
    margin: 0; aspect-ratio: auto;
  }
  .hero__type {
    position: relative; top: auto; left: auto; right: auto;
    width: auto; padding: calc(150 * var(--u)) var(--gutter) 0; transform: none;
  }
  .hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: calc(30 * var(--u)); }
  .hero__h1 { font-size: calc(78 * var(--u)); }
  .hero__lead { width: 100%; max-width: calc(420 * var(--u)); }
  .hero__foot {
    position: relative; margin-top: auto;
    display: flex; flex-direction: column; align-items: flex-end;
    gap: calc(12 * var(--u));
    padding: calc(56 * var(--u)) var(--gutter) calc(28 * var(--u));
  }
  .video-card {
    position: static; margin: 0;
    width: min(calc(230 * var(--t)), 100%);
  }
  .hero__caption {
    position: static; transform: none; width: 100%;
    display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); justify-content: flex-start;
  }
  /* The pill wraps as LINES, not as two narrow columns: "IVA incluido."
     drops under the price instead of breaking into a sliver beside it. */
  .pill { white-space: normal; flex-wrap: wrap; }

  /* One line of who-and-how-much is 240px a dome: three of them stop
     fitting a row under 900, so the price goes under the guests. */
  .indice__meta { display: flex; flex-direction: column; align-items: center; }
  .indice__meta i { display: none; }

  .proof__grid { grid-template-columns: 1fr; gap: calc(48 * var(--u)); }
  .cerca { row-gap: calc(40 * var(--u)); }
  .cerca__type { grid-template-columns: 1fr; row-gap: calc(38 * var(--u)); }
  .cerca__mapa { aspect-ratio: 654 / 490; }
  .desayuno__card { padding: 0 var(--card-pad); }
  .desayuno__row { grid-template-columns: 1fr; gap: calc(16 * var(--u)); padding: calc(40 * var(--u)) 0; }
  .pasos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos__head { grid-column: 1 / -1; }
  .paso::before { display: none !important; }
  /* Three to a row on a phone, each centred in its cell, so the marks
     read as one block instead of a list. Eight fall 3/3/2: on a six-track
     grid each takes two, and the last pair starts one track in, centred
     under the six above. */
  .prensa__outlets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 14px; justify-items: center; align-items: center; }
  .prensa__outlets li { grid-column: span 2; }
  .prensa__outlets li:nth-child(7) { grid-column: 2 / span 2; }
  .prensa__outlets img { width: calc(var(--w) * .82px); height: auto; max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --u: calc(100vw / 620); }

  .hero__h1 { font-size: calc(64 * var(--u)); }
  .video-card { width: min(calc(210 * var(--t)), 100%); }
  /* A column that fills the screen, with the words held at the foot the
     way the comp holds them at the foot of a 982-tall band. */
  .embalse { height: 100vh; height: 100svh; }
  .curtain > .acts { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .embalse__type { left: 0; right: 0; top: 50%; translate: 0 -50%; padding: 0 var(--gutter); }
  /* Here the words sit across the middle of the screen, not in the sky,
     so the shade is deepest across the middle, where they are. */
  .curtain__stage::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .5) 36%, rgba(0, 0, 0, .5) 66%, rgba(0, 0, 0, .1) 100%);
  }
  .curtain__stage { --sombra: .2; }
  /* A FLOOR UNDER THE DISPLAY SIZES. On the ladder alone they fell to
     23-29px on a 390 phone, a step over the 18px body they head, and a
     heading one step over its text is not a heading. Body copy holds its
     size here (--t), so the headings hold theirs. At these sizes the display
     tracking eases from -7% to -4%, the pair the page already sets at
     22-34px: -7% is drawn for 48px and up, and below that it clots. */
  .display-72 { font-size: max(36px, calc(46 * var(--u))); }
  .display-60 { font-size: max(32px, calc(40 * var(--u))); }
  .display-48 { font-size: max(30px, calc(36 * var(--u))); }
  .resena__q { font-size: max(24px, calc(30 * var(--u))); line-height: 1.2; }
  .embalse__h { font-size: max(36px, calc(56 * var(--u))); }
  :is(.display-72, .display-60, .display-48, .resena__q, .embalse__h, .statement__p) { letter-spacing: -.04em; word-spacing: .1em; }

  .domos { padding-bottom: calc(80 * var(--u)); }
  .domos__stage { height: calc(420 * var(--u)); }
  .chevron { top: calc(190 * var(--u)); width: 44px; height: 44px; }
  .chevron--prev { left: calc(12 * var(--u)); }
  .chevron--next { right: calc(12 * var(--u)); }
  .domos__still img[data-key="corbeta"] { width: calc(580 * var(--u)); bottom: calc(-32 * var(--u)); }
  .domos__still img[data-key="fragata"] { width: calc(760 * var(--u)); bottom: calc(-38 * var(--u)); }
  .domos__still img[data-key="navio"]   { width: calc(780 * var(--u)); bottom: calc(-43 * var(--u)); }
  .ficha { width: auto; padding: 0 var(--gutter); }
  .ficha__resumen { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: calc(4 * var(--u)); }
  .ficha__regla { width: 100%; }
  .acciones { flex-direction: column; gap: calc(12 * var(--u)); }
  /* Full width: a thumb's target, and room for "Reservar el Domo Fragata",
     which ran out of a 176px pill on a 390 phone. */
  .acciones { align-items: stretch; }
  .action { width: 100%; }

  .pasos__grid { grid-template-columns: 1fr; }
  /* THE STEPS AS A LIST. Five photographs, each most of a screen tall,
     made the steps three times the length of the domes; on a phone they
     are read, not looked at. Number, title, sentence, a hairline between.
     The plates are lazy, so hidden they are never fetched. */
  .pasos__grid { row-gap: 0; }
  .pasos__head { margin-bottom: calc(32 * var(--t)); }
  .paso {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(16 * var(--t));
    padding: calc(20 * var(--t)) 0; border-top: 1px solid var(--line);
  }
  .paso__n { grid-row: 1 / span 2; }
  .paso h3, .paso p { grid-column: 2; }
  .paso h3 { margin: calc(6 * var(--t)) 0 calc(6 * var(--t)); }
  .paso p { margin: 0; min-height: 0; line-height: 1.4; }
  .paso__plate { display: none; }

  /* ONE LEFT EDGE. On a desktop the statement, the domes and the closing
     line are centred set pieces on a wide stage, and the film card sits in
     the far corner of the hero. On a phone a centred block between left-set
     blocks reads as an accident, and a card on the right of a left-set
     column reads as another. So every line of type starts at the gutter,
     every control sits under its object at that same edge, and the only
     things that centre are objects in their frames: the dome on its stage,
     the photographs. Juan, 3 Sep: "we can be more intentional with some
     text alignment." */
  .hero__foot { align-items: flex-start; }
  .statement { place-items: start; text-align: left; }
  /* On a phone three set lines would be 17px type: the sentence wraps
     itself at a statement's size instead, and the ties keep each print
     with its words, so they still fall in different places. */
  .statement__p { font-size: calc(46 * var(--u)); line-height: 1.8; }
  /* Six wrapped lines, three of them without a print: a smaller print lets
     the leading close up so the text-only lines do not float. */
  .statement__p .pin { width: 1.95em; }
  .br-d { display: none; }
  /* Three set lines, each ending on its picture, need a phone size that
     holds the longest one ("y noches estrelladas" and the photo). */
  /* On a phone the amenities are a short stacked list; a separator left
     at the end of every wrapped line read as debris. */
  .voz { font-size: 22px; line-height: 1.3; text-align: left; }
  .voz > span:first-child, .voz__mute { max-width: none; }
  .domos { text-align: left; }
  .domos__h { margin: 0 var(--gutter); max-width: none; }
  .domos__sub { margin: calc(28 * var(--u)) var(--gutter) 0; }
  .domos .seg { margin-left: var(--gutter); }
  .ficha { align-items: flex-start; }
  /* Set as a line of text rather than a row of cells, so it wraps like the
     activity captions do ("A 5 min · 2 a 8 personas · 60 min") instead of
     starting its second row with a bar. */
  .ficha__resumen { display: block; justify-content: flex-start; line-height: calc(26 * var(--t)); }
  .ficha__resumen i {
    display: inline-block; vertical-align: middle;
    width: 3px; height: 3px; border-radius: 50%; margin: 0 calc(8 * var(--t)) 2px;
    background: var(--ink-40);
  }
  .acciones { align-items: flex-start; padding: 0 var(--gutter); }
  .resena { text-align: left; }
  .resena blockquote { margin: 0; }
  .cierre { text-align: left; }
  .cierre p { margin-left: 0; margin-right: 0; }
}

/* Between the comp's 1440 and the phone column the centred price lands on
   the dome in the photograph (at 1024 it covered it). Here the card and the
   price travel together in the right-hand corner, over the trees. */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero__foot {
    position: absolute; right: var(--gutter); bottom: calc(44 * var(--u)); z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: calc(12 * var(--t));
  }
  .hero__foot .video-card, .hero__foot .hero__caption { position: static; transform: none; }
}

/* NOTHING A PHONE HAS TO READ OR PRESS IS SET UNDER 13PX. The comp's 12s are
   desktop sizes; on a phone they were button labels, captions and the
   legal line in light grey. Caps stay at 12: tracked capitals read larger. */
@media (max-width: 640px) {
  .btn--sm { font-size: calc(14 * var(--t)); }
  .micro-12, .video-card__meta, .resena footer p { font-size: calc(13 * var(--t)); }
  .player__close, .viewer__close { font-size: calc(14 * var(--t)); }
}

/* A THUMB NEEDS 44PX, and the comp's controls are drawn at 33 to 36. The
   objects keep their size; the part you can hit grows past them. `:where`
   so the `relative` never beats a control that is already positioned. */
@media (pointer: coarse) {
  :where(.btn--sm, .seg__item, .viewer__close) { position: relative; }
  .btn--sm::after, .seg__item::after, .player__close::after, .viewer__close::after {
    content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px;
  }
  .chevron::after { content: ""; position: absolute; inset: -7px; }
  /* Every button at least 44 px to a finger, whatever it looks like. */
  .btn--md { position: relative; }
  .btn--md::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
  .busca__top .cerrar { position: relative; }
  /* The tablet's (and a sideways phone's) bar: the wordmark and the pill's
     links get a finger's 44. */
  .nav__mark--bar { padding: 7px 0; }
  .nav__mark--bar::before { top: 1px; bottom: 2px; }   /* the glass stays the pill's 41 */
  .nav__menu a, .nav__wa { position: relative; }
  .nav__menu a::after, .nav__wa::after { content: ""; position: absolute; left: 0; right: 0; top: -13px; bottom: -13px; }
  .busca__top .cerrar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
}
/* A finger's double tap on a control is two presses, never a zoom. Pinch
   still zooms the page. */
a, button, label, input, select, textarea, summary, [role="button"] { touch-action: manipulation; }

/* ============================================================ 404 === */
/* One screen, the page's own register: caps, a display line, one sentence,
   two ways out. The nav here carries only the wordmark and the CTA. */
.nav--plain .nav__burger, .nav--plain .nav__menu { display: none; }
.nav--plain .nav__mark--bar { display: block; padding: 7px 0; }
.notfound {
  min-height: 100vh; min-height: 100svh;
  padding: calc(160 * var(--u)) var(--gutter) calc(120 * var(--u));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: calc(20 * var(--u));
  max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto;
}
.notfound .display-60 { max-width: calc(700 * var(--u)); }
.notfound .body-18 { max-width: calc(480 * var(--u)); }
.notfound__cta { display: flex; flex-wrap: wrap; gap: calc(12 * var(--t)); margin-top: calc(16 * var(--u)); }
.notfound__paginas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; column-gap: calc(24 * var(--t)); }
/* A finger's 44 for each, without spacing the line out. */
.notfound__paginas a { display: inline-block; padding: 13px 0; color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) { .notfound__paginas a:hover { text-decoration: underline; } }

/* ====================================================== PARALLAX === */
/* Every picture drifts against the page as it passes.
   THE ONE THING THAT MATTERS HERE IS THE MARGIN. A picture that travels
   ±5% inside 12% of overhang has 1% of slack at the extreme, and 1% is
   how you end up seeing the frame's own background down one edge at the
   top and bottom of the scroll. 8% either way against ±5% of travel
   leaves 3% — and the travel is capped in JS as well, so a bad viewport
   cannot widen it.

   Every frame holding one of these is `overflow: clip` AND positioned;
   check both before adding a new one, or the picture escapes and lands
   full-bleed on the page. */
img[data-px] {
  position: absolute; left: 0; width: 100%;
  top: -8%; height: 116%;
  object-fit: cover;
  /* No `will-change`. Thirteen pictures pinned as their own composited
     layers — the hero alone is 4096 wide — is tens of megabytes of layer
     memory held for the whole session, and it is what makes a scroll feel
     heavy rather than what makes it smooth. translate3d already promotes
     the ones that are actually moving, when they are moving. */
  transform: translate3d(0, calc(var(--px, 0) * 1%), 0);
}

.hero__photo { overflow: clip; }

/* THE HERO IS THE ONE EXCEPTION, and it earns it. Its picture already
   fills the band at the picture's own aspect, so buying vertical slack
   costs HORIZONTAL crop — and that crop walks the dome toward the edge of
   the frame, which is the one thing in the photograph you are selling.
   So it travels DOWNWARD ONLY and needs no slack at all: the bottom runs
   off a clipped band, and the top edge it uncovers is transparent sky
   with the gradient already behind it. `max()` does the clamping in CSS
   so a stray negative from the loop can never lift it. */
.hero__photo img[data-px] {
  top: 0; height: 100%;
  transform: translate3d(0, max(0%, calc(var(--px, 0) * 1%)), 0);
}

/* ON THE COMPOSITOR, where the browser has scroll timelines (site.js then
   leaves --px alone). Set from a scroll handler the pictures land a frame
   behind a native scroll, and a trackpad's scroll is native: they
   juddered against the page. The frame's own journey through the screen
   is the timeline, `cover` is the JS's 0 to 1, and the travel is the same
   ±5% (inset 0, or the booking bar's scroll-padding moves the screen's
   foot). `translate`, not `transform`, so the heroes' arrival (opacity
   and `scale`) runs in the same list. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The frame is the picture's parent, or its grandparent when the parent
       is an inline <picture> carrying a phone's cut (site.js's marco). */
    :has(> img[data-px]), :has(> picture > img[data-px]) { view-timeline: --px block; view-timeline-inset: 0; }
    picture:not(.hero__photo):has(> img[data-px]) { view-timeline: none; }
    img[data-px] { animation: kd-px linear both; animation-timeline: --px; animation-range: cover; }
    .hero__photo img[data-px] {
      animation: kd-photo 1.8s cubic-bezier(.16, 1, .3, 1) .35s both, kd-px-baja linear both;
      animation-timeline: auto, --px; animation-range: normal, cover;
    }
    /* The arrival drops its animations once it is over; not this one. */
    .is-arrived .hero__photo img[data-px] {
      animation: kd-px-baja linear both !important;
      animation-timeline: --px !important; animation-range: cover !important;
    }
    .domo-hero__photo img[data-px] {
      animation: kd-photo 1.8s cubic-bezier(.16, 1, .3, 1) .2s backwards, kd-px linear both;
      animation-timeline: auto, --px; animation-range: normal, cover;
    }
  }
}
@keyframes kd-px { from { translate: 0 -5%; } to { translate: 0 5%; } }
/* The hero only travels down: still for the first half, as max() holds it. */
@keyframes kd-px-baja { 0%, 50% { translate: 0 0; } to { translate: 0 5%; } }

@media (prefers-reduced-motion: reduce) {
  img[data-px] { position: absolute; top: 0; height: 100%; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================== DOME PAGES === */
/* /navio, /fragata, /corbeta (tools/domos.py). Nothing new in kind: the
   home's grid, its ladder, its cards and its rows, laid out for one dome.
   Every section is the column and 150 below it, as on the home. */

/* THE WAY TO A PAGE. A section of the home that has a page of its own says
   so with a paper pill: the label in ink and the drawn arrow. It was a
   line of blue text with a typed arrow, which read as a footnote, not a
   way on (Juan, 7 Oct). The pill is the house's own (.btn--paper), the
   same as "Ver los domos". */
.mas { margin: 0; font-size: calc(15 * var(--t)); line-height: 1.27; letter-spacing: -.02em; word-spacing: .06em; }
/* The home band's way to the page of the dome on stage, under the dome's
   own sentence, leaving and arriving with it. */
.domos__mas { margin: calc(20 * var(--u)) 0 0; transition: opacity .24s var(--ease-house); }
.domos__mas.is-going { opacity: 0; }

:is(.domo-hero, .estadia, .niveles, .datos, .otros) {
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin: 0 auto;
}

/* ---- the dome --------------------------------------------------------
   The home hero's words, on paper: the line of where, then the name on
   the first two tracks and the dome's own sentence on the third. Then one
   photograph at the width of the column, with the price on it. */
.domo-hero { position: relative; padding: calc(160 * var(--u)) var(--gutter) 0; }
.domo-hero__type { display: flex; flex-direction: column; gap: calc(17 * var(--u)); }
/* The same place line as the home's hero, held on one line the same way. */
.domo-hero__type > .caps { white-space: nowrap; font-size: min(calc(14 * var(--t)), calc((100vw - 2 * var(--gutter)) / 21.9)); }
.domo-hero__row { display: grid; grid-template-columns: calc(var(--col) * 2 + var(--gap)) var(--col); column-gap: var(--gap); align-items: end; }
.domo-hero__h1 {
  margin: 0;
  font-weight: 200; font-size: calc(92 * var(--u)); line-height: 1; letter-spacing: -.07em; word-spacing: .14em;
}
/* The sentence's last line sits on the name's baseline, not on the foot of
   its line box. */
.domo-hero__row p { padding-bottom: .55em; }
.domo-hero__photo {
  position: relative; overflow: clip;
  margin-top: calc(56 * var(--u));
  aspect-ratio: 1106 / 640;
  border-radius: var(--r-lg);
  background: var(--surface-card);
}
/* The section ends where the photograph does, so its foot is the
   photograph's foot. */
.domo-hero__caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(30 * var(--u)); z-index: 1;
  display: flex; align-items: center; gap: calc(9 * var(--u));
  --focus: #fff;
}
/* THE PRICE ON THE FIRST SCREEN. At 1440 x 900 the comp's 1106:640 put the
   price and the button 50 px under the fold, and 130 on a 1366 x 768
   laptop. So from a tablet up the frame takes what the screen has left
   under the words (the words end 341 comp px down; the price rides 30 up
   from the frame's foot), never shorter than 2.3:1 and never taller than
   the comp. `foco` on each portada keeps the dome in it. */
@media (min-width: 901px) {
  .domo-hero__photo {
    aspect-ratio: auto;
    height: clamp(calc(var(--content) / 2.3), calc(100svh - 341 * var(--u) + 8px), calc(640 * var(--u)));
  }
}
/* The home's arrival, without the hold: the words rise in reading order,
   the photograph settles, then the price. `backwards`, not `both`: once an
   entrance is over it is gone, so nothing over the pill's glass is left
   holding a compositing group (see the hero's .is-arrived). */
.domo-hero__type > *     { animation: kd-rise 1.1s cubic-bezier(.16, 1, .3, 1) backwards; }
.domo-hero__type > :nth-child(2) { animation-delay: .08s; }
.domo-hero__photo img    { animation: kd-photo 1.8s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
.domo-hero__caption > *  { animation: kd-fade .9s ease-out 1s backwards; }
/* The home's scrim was measured on the home's lawn. Under a dome page's
   price sit white railings and sky: at .36 "IVA incluido." fell to 3.4:1 on
   the Corbeta's. Measured with the words hidden, brightest 5% of what is
   behind them: .48 and the second voice at 90% hold 4.5 on all three. */
.domo-hero .pill--photo { background: rgba(0, 0, 0, .48); }
.domo-hero .pill--photo span { color: rgba(255, 255, 255, .9); }

/* Nosotros: the title stands over the centred statement, centred with it.
   On a phone everything shares the one left edge, as the statement does. */
@media (min-width: 641px) {
  .domo-hero--centro .domo-hero__type { align-items: center; text-align: center; }
  .domo-hero--centro .domo-hero__row { display: block; }
}
/* One short word, alone over the title: at the caps' +6% it read as
   spaced-out letters (Juan, 7 Oct). Set solid. */
.domo-hero--centro .domo-hero__type > .caps { letter-spacing: 0; }

/* ---- /nosotros: the opening shot ------------------------------------
   Full bleed under the title, 2:1 (4:5 on a phone, its own crop), never
   taller than most of the screen. NOT a data-px frame: that parallax hangs
   the picture 8% above its frame, and the top 8% of this one is the ridge
   and its sky, the horizon the shot is for. Instead the picture sits at its
   own 16:9 from the frame's top, ridge in view, and its own spare height
   (11% at 2:1) is the camera's travel as the page scrolls (kd-inclina).
   The width is pinned: left auto, the max-height comes back through the
   aspect ratio as a max-width, and a wide screen got a frame that stopped
   short of its right edge (Juan, 7 Oct). Pinned, it just gets shorter. */
.cine {
  position: relative; overflow: clip;
  margin-top: calc(56 * var(--u));
  width: 100%; aspect-ratio: 2 / 1; max-height: 86svh;
  view-timeline: --cine block;
}
.cine picture { position: absolute; inset: 0; display: block; }
.cine img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; }
/* While the photograph is on its way the frame is paper; then it fades in.
   No slit, no push, no blur (Juan: not "aggressive", and the first thing
   seen of it is the picture at full quality). .espera is set by the script
   after the section only when the picture is not already there. */
.cine img { transition: opacity 1.2s ease-out; }
.cine.espera img { opacity: 0; }
@media (max-width: 640px) {
  .cine { aspect-ratio: 4 / 5; margin-top: calc(40 * var(--u)); }
  .cine img { height: 100%; }
}

/* ---- la estadía: the heading on the first track, the words on two --- */
.estadia {
  padding: 0 var(--gutter) var(--section);
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap);
  align-items: start;
}
.estadia__texto { display: flex; flex-direction: column; gap: calc(24 * var(--u)); max-width: calc(620 * var(--u)); }
/* An entry in a list of them (/guatavita's ways in): its name a step over
   its sentence, the entries the column's own distance apart. */
.estadia__texto > div > h3 { margin: 0 0 calc(8 * var(--t)); }
/* Nosotros: each heading holds under the nav until the next one pushes it
   off (Juan, 7 Oct). The manifesto's paragraphs are short, so a heading
   held only while its own words pass would barely move: the gap between
   blocks is moved from the section into the words' column, and the heading
   stays through it. From a tablet up; on a phone it sits over its words.
   The LAST heading of a run keeps its section's gap and leaves with its own
   words, or it rides down onto whatever comes next ("En la prensa." landed
   on "Datos."). */
@media (min-width: 901px) {
  .estadia--fija > h2 { position: sticky; top: calc(120 * var(--u)); }
  .estadia--fija:has(+ .estadia--fija) { padding-bottom: 0; }
  .estadia--fija:has(+ .estadia--fija) > .estadia__texto { padding-bottom: var(--section); }
}
/* ---- motion on /nosotros ------------------------------------------
   Motion is the voice here, not ornament, and it never stands between the
   reader and the words. Two kinds only:

   ARRIVAL (.llega), time-based, the first screen: each word comes into
   focus from a soft blur, one after another; the title slowly, the
   statement at reading pace. `backwards`, not `both`: once a word has
   arrived nothing is left on it (no filter, no layer).

   READING (.revela), scroll-driven, below the fold: a paragraph comes into
   focus as it enters and goes back out if you scroll back, because it is
   tied to where the page is, not to a clock. The press list's hairlines
   draw from the left the same way. Browsers without scroll timelines get
   the page still, and so does anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .llega .w {
    display: inline-block;
    animation: kd-enfoque .9s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--d, 0s) + var(--i) * var(--paso, 40ms));
  }
  /* the title moves by its words, not as one block */
  .domo-hero__type > .domo-hero__row:has(.llega) { animation: none; }
  .voz.llega .w { animation-duration: .8s; }

  @supports (animation-timeline: view()) {
    /* Sharp once half of it is on screen: a paragraph resting at the foot
       of the first screen must not sit there blurred, as if broken. */
    .revela {
      animation: kd-revela linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    /* The statement under the shot is read in word by word as it rises:
       one timeline, its section's, each word a little later on it, all of
       it in focus by the time it reaches the lower middle of the screen. */
    .anima .proof { view-timeline: --voz block; }
    .anima .voz.lee .w {
      display: inline-block;
      animation: kd-enfoque linear both;
      animation-timeline: --voz;
      animation-range: cover calc(var(--i) * .45%) cover calc(11% + var(--i) * .45%);
    }
    /* The rest of the page, read in the same way (.anima, /nosotros). */
    .anima .estadia > h2,
    .anima .datos__head > h2,
    .anima .prensa__card > .caps,
    .anima .datos .specs > div {
      animation: kd-revela linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    /* The press wall's logos arrive left to right as the card comes up:
       one timeline, the card's, each logo a little later on it. */
    .anima .prensa__card { view-timeline: --muro block; }
    .anima .prensa__outlets li {
      --n: 0;
      animation: kd-revela linear both;
      animation-timeline: --muro;
      animation-range: cover calc(2% + var(--n) * 2%) cover calc(14% + var(--n) * 2%);
    }
    .anima .prensa__outlets li:nth-child(2) { --n: 1; }
    .anima .prensa__outlets li:nth-child(3) { --n: 2; }
    .anima .prensa__outlets li:nth-child(4) { --n: 3; }
    .anima .prensa__outlets li:nth-child(5) { --n: 4; }
    .anima .prensa__outlets li:nth-child(6) { --n: 5; }
    .anima .prensa__outlets li:nth-child(7) { --n: 6; }
    .anima .prensa__outlets li:nth-child(8) { --n: 7; }
    .anima .prensa__outlets li:nth-child(9) { --n: 8; }
    /* The farewell comes into focus word by word as it rises, then the
       button. */
    .anima .cierre { view-timeline: --cierre block; }
    .anima .cierre .lee .w {
      display: inline-block;
      animation: kd-enfoque linear both;
      animation-timeline: --cierre;
      animation-range: entry calc(10% + var(--i) * 9%) entry calc(45% + var(--i) * 9%);
    }
    .anima .cierre .btn {
      animation: kd-revela linear both;
      animation-timeline: --cierre;
      animation-range: entry 60% entry 100%;
    }
    .cita { border-bottom-color: transparent; position: relative; }
    .cita:not(:last-child)::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
      background: var(--line); transform-origin: 0 50%;
      animation: kd-trazo linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
  }
}
@keyframes kd-enfoque { from { opacity: 0; filter: blur(8px); translate: 0 .16em; } }
/* The opening shot's one movement: as the page scrolls, the camera tilts
   from the ridge to the domes, from a tablet up (the phone's crop has no
   spare height), never past the picture's own foot. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @media (min-width: 641px) {
      .cine img {
        animation: kd-inclina linear both;
        animation-timeline: --cine;
        animation-range: cover 30% cover 100%;
      }
    }
  }
}
@keyframes kd-inclina { to { translate: 0 -10.5%; } }
@keyframes kd-revela  { from { opacity: 0; filter: blur(5px); translate: 0 calc(16 * var(--u)); } }
@keyframes kd-trazo   { from { scale: 0 1; } }

/* ---- nosotros: the manifesto, set to be read --------------------------
   As Samara sets a statement (Juan's reference, 7 Oct): the heading large
   and centred, the words under it in ONE narrow column, left-aligned, in
   ink, at a size made for reading, a full line between paragraphs. One axis
   from the title and the shot down; nothing to zigzag between. On a phone,
   the one left edge. */
.bloque {
  padding: 0 var(--gutter) var(--section);
  display: flex; flex-direction: column; align-items: center; gap: calc(56 * var(--u));
  text-align: center;
}
.bloque > h2 { text-wrap: balance; }
.bloque__texto {
  width: min(100%, calc(520 * var(--u) + 60px));
  display: flex; flex-direction: column; gap: 1.5em;
  text-align: left; text-wrap: pretty;
}
.bloque__texto p {
  margin: 0;
  font-weight: 300; font-size: max(17px, calc(19 * var(--t))); line-height: 1.6;
  /* This face's space is narrow; at reading size it needs a little air
     back, or the words run together (Juan, 6 Oct, on spacing). */
  letter-spacing: -.01em; word-spacing: .08em; color: var(--ink);
}
@media (max-width: 640px) {
  .bloque { align-items: flex-start; text-align: left; gap: 24px; }
  .bloque > h2 { font-size: 40px; }
  .bloque__texto p { font-size: 17px; }
}

/* Nosotros: the press on the estadía's tracks, one quote per article,
   parted by the rows' own hairline. */
.cita { margin: 0; padding-bottom: calc(24 * var(--u)); border-bottom: 1px solid var(--line); }
.cita:last-child { padding-bottom: 0; border-bottom: 0; }
/* The outlet leads, in ink and larger, its section beside it in grey and
   the link at the far end. Then the quote, light and grey, its key fragment
   in ink at regular weight so a skimming eye lands on it (the face goes to
   400; a heavier cut would be another file to download). */
.cita__medio {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: calc(6 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(10 * var(--u));
}
.cita__medio p { margin: 0; }
.cita__medio b { font-weight: 400; font-size: max(16px, calc(18 * var(--t))); letter-spacing: -.01em; color: var(--ink); }
.cita__medio span { margin-left: .35em; font-size: calc(12 * var(--t)); color: var(--ink-60); }
/* The link to the article at reading size, not caption size (Juan: "a bit
   too small"), with a taller hit area than its line. */
.cita .resena__link {
  white-space: nowrap;
  font-size: max(15px, calc(16 * var(--t))); letter-spacing: -.01em;
  display: inline-block; padding: 12px 0; margin: -12px 0;
}
.cita__q {
  margin: 0; text-wrap: pretty;
  font-weight: 300; font-size: max(17px, calc(20 * var(--t))); line-height: 1.45;
  letter-spacing: -.01em; word-spacing: .06em; color: var(--ink-60);
}
.cita__q strong { font-weight: 400; color: var(--ink); }

/* ---- the photographs: the activities' rail, one height, each its own
   shape, so a landscape is not cropped to a portrait's box ------------- */
.fotos { padding-top: 0; }
.foto {
  flex: none; margin: 0;
  height: calc(480 * var(--u)); aspect-ratio: var(--a);
  border-radius: var(--r-lg); overflow: clip;
  background: var(--surface-card);
  scroll-snap-align: start;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---- one dome on the band --------------------------------------------
   The home's band with nothing to travel to: its heading, its sentence,
   the stage, three views, the ficha, the two actions. */
.domos--solo { padding-top: calc(110 * var(--u)); }
/* AT DUSK, AND IT BELONGS TO THE PAGE. The Forge's dusk sky (its own three
   stops, as the viewer paints them) is the stage's background, so it is
   there from the first paint, and it comes out of the paper and goes back
   into it: transparent at the top, where the sentence sits, and again at
   the foot, where the dome stands. No edge for the eye to find. */
.domos--solo .domos__stage::before {
  content: ""; position: absolute; inset: 0;
  /* The way in is eased over several stops: a straight ramp to the dark
     blue left a band of it lying across the top like a stripe. */
  background: linear-gradient(180deg,
    rgba(74, 92, 140, 0) 0%, rgba(74, 92, 140, .16) 8%, rgba(74, 92, 140, .42) 16%,
    rgba(74, 92, 140, .7) 24%, rgba(74, 92, 140, .9) 32%, #4a5c8c 40%,
    #7d7b9e 66%, #c39a86 86%, rgba(195, 154, 134, .45) 94%, rgba(195, 154, 134, 0) 100%);
}
/* The poster is this dome at dusk at the band's own framing, the stage's
   exact shape, so it fills the stage rather than being placed in it. */
.domos--solo .domos__still img { left: 0; bottom: 0; width: 100%; height: 100%; transform: none; object-fit: cover; }
.domos--solo .domos__noche { position: absolute; left: 0; right: 0; top: 26%; bottom: 18%; pointer-events: none; }

/* ---- por dentro: the breakfast card's material, a row per level ------
   The level on the first track, what is on it on the second, its picture
   on the third; one hairline between, because it separates content. */
.niveles { padding: var(--section) var(--gutter); display: flex; flex-direction: column; gap: calc(56 * var(--u)); }
.niveles__card { background: var(--surface-warm); border-radius: var(--r-2xl); padding: calc(16 * var(--u)) var(--card-pad); }
.nivel {
  display: grid; grid-template-columns: calc(var(--col) - var(--card-pad)) var(--col) calc(var(--col) - var(--card-pad));
  column-gap: var(--gap); align-items: start;
  padding: calc(48 * var(--u)) 0;
}
.nivel + .nivel { border-top: 1px solid var(--line); }
.nivel p { text-wrap: pretty; }
.nivel__foto { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: clip; background: var(--surface-card); }
.nivel__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---- incluido, lo que debe saber: the distances' rows ----------------
   The heading on the first track, a list on each of the other two. A row
   that wraps grows rather than spilling past its hairline. */
.datos {
  padding: 0 var(--gutter) var(--section);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start;
}
.datos__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--u)); }
.datos .specs { margin: 0; }
.datos__col .specs { margin-top: calc(12 * var(--u)); }
.datos .specs > div {
  height: auto; min-height: calc(58 * var(--t));
  gap: calc(16 * var(--u)); padding: calc(10 * var(--t)) 0;
}
.datos .specs > div:first-child { border-top: 1px solid var(--line); }
.datos .specs dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---- the other two: the band's ground, the band's renders ------------ */
.otros { padding: 0 var(--gutter) var(--section); display: flex; flex-direction: column; gap: calc(56 * var(--u)); }
.otros__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.otro {
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl); overflow: clip;
  background: var(--surface-sunk);
  box-shadow: 0 .5px 2px var(--shadow-hairline);
  text-decoration: none;
  transition: box-shadow .15s var(--ease-house);
}
@media (hover: hover) { .otro:hover { box-shadow: 0 1px 4px var(--shadow-hairline); } }
/* Each render is trimmed to its drawing, so the frame can place them all
   one way: whole, centred, standing on the card's floor. */
.otro__foto { display: block; aspect-ratio: 541 / 290; padding: calc(30 * var(--u)) calc(40 * var(--u)) 0; }
.otro__foto img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.otro__txt { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)) var(--card-pad) calc(36 * var(--u)); }
.otro__txt .body-15:last-child { margin-top: calc(8 * var(--u)); }

/* Between the comp and the phone a list on one track wraps its every row:
   the heading goes over the two lists and each list gets half the column. */
@media (min-width: 901px) and (max-width: 1200px) {
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(40 * var(--u)); }
  .datos__head { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

@media (max-width: 900px) {
  .domo-hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
  .domo-hero__row p { padding-bottom: 0; max-width: calc(480 * var(--u)); }
  .domo-hero__h1 { font-size: calc(78 * var(--u)); }
  .domo-hero__caption {
    left: calc(var(--gutter) + 16 * var(--t)); right: calc(var(--gutter) + 16 * var(--t)); bottom: calc(16 * var(--t)); transform: none;
    flex-wrap: wrap; align-items: flex-end;
  }
  .estadia { grid-template-columns: 1fr; row-gap: calc(32 * var(--u)); }
  .estadia__texto { max-width: none; }
  .nivel { grid-template-columns: 1fr; row-gap: calc(16 * var(--t)); padding: calc(40 * var(--u)) 0; }
  /* Never wider than its file can fill: the portrait pictures are 720 wide
     at 2x, so a full-width frame on a tablet was 0.7 of the pixels it asked for. */
  .nivel__foto { aspect-ratio: 4 / 3; max-width: calc(360 * var(--t)); margin-top: calc(8 * var(--t)); }
  .datos { grid-template-columns: 1fr; row-gap: calc(40 * var(--u)); }
}

@media (max-width: 640px) {
  .domo-hero__h1 { font-size: max(40px, calc(64 * var(--u))); letter-spacing: -.04em; word-spacing: .1em; }
  /* A phone's hero is a portrait: the same photograph, cropped by its
     frame rather than re-exported. */
  .domo-hero__photo { aspect-ratio: 4 / 5; margin-top: calc(40 * var(--u)); }
  /* Under the photograph, on paper: the price as a line of text in the
     page's ink, the button under it at the same edge. */
  .domo-hero__caption {
    position: static; margin-top: calc(18 * var(--t));
    flex-direction: column; align-items: flex-start; gap: calc(14 * var(--t));
    --focus: var(--accent);
  }
  .domo-hero .pill--photo { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); font-size: calc(16 * var(--t)); }
  .domo-hero .pill--photo span { color: var(--ink-60); }
  .domos--solo { padding-top: calc(80 * var(--u)); }
  .domos__mas { margin-left: var(--gutter); margin-right: var(--gutter); }
  /* minmax(0, …), not 1fr: Safari sizes a bare 1fr track by the card's
     render at its natural size, and the card came out 3,500 px wide. */
  .otros__grid { grid-template-columns: minmax(0, 1fr); }
  .datos .specs > div { font-size: calc(15 * var(--t)); }
}

/* ======================================================= BITÁCORA === */
/* /bitacora and its entries (tools/bitacora.py, from contenido/bitacora/).
   The home's ladder, /nosotros's title and its reading paragraph, the dome
   pages' rows. What is new is only what an article needs: a column to read
   in, its figures and captions, a table, its questions and its sources. */

/* ---- the index: the newest entry at the column's width, the rest two to
   a row. A card is its photograph, its section and minutes, its title (the
   one link, stretched over the card) and its dek; no box around any of it. */
.bitacora {
  max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto;
  padding: 0 var(--gutter) var(--section);
}
.nota { position: relative; }
.nota__foto {
  display: block; overflow: clip; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg); background: var(--surface-card);
}
.nota__foto img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s var(--ease-house); }
.nota--portada .nota__foto { aspect-ratio: 1106 / 640; }
/* The lead is on the first screen: it arrives with it, as a dome page's
   photograph does, rather than waiting to be scrolled into focus. */
.nota--portada .nota__foto img { animation: kd-photo 1.8s cubic-bezier(.16, 1, .3, 1) .5s backwards; }
.nota--portada .nota__fila { animation: kd-rise 1.1s cubic-bezier(.16, 1, .3, 1) .7s backwards; }
/* Under the title the statement is the page's own, so the lead comes up
   closer than the next section would. */
.proof--bitacora { padding-bottom: calc(110 * var(--u)); }
.nota__titulo { margin: 0; text-wrap: balance; }
.nota__titulo a {
  color: inherit; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .16em;
  transition: text-decoration-color .18s var(--ease-ui);
}
/* The whole card presses; a screen reader still hears one link, the title.
   The overlay stops above the card's foot (--pie, the space under a card
   in the grid), so the focus ring it carries hugs the card's words. */
.nota__titulo a::after { content: ""; position: absolute; inset: 0 0 var(--pie, 0) 0; border-radius: var(--r-lg); }
/* Hover deepens the photograph a few percent and draws the title's line. */
@media (hover: hover) {
  .nota:hover .nota__foto img { filter: brightness(.95); }
  .nota:hover .nota__titulo a { text-decoration-color: currentColor; }
}
/* The ring goes round the card the link stands for, not round the title. */
.nota__titulo a:focus-visible { outline: none; }
.nota__titulo a:focus-visible::after { outline: 2px solid var(--focus, var(--accent)); outline-offset: 8px; }
/* The lead: the title over two tracks, its dek and minutes on the third,
   starting on the title's first line (a dek runs longer than the title, so
   lined up at the foot the title sank under an empty band). */
.nota__fila {
  display: grid; grid-template-columns: calc(var(--col) * 2 + var(--gap)) var(--col); column-gap: var(--gap);
  align-items: start; align-items: first baseline;
  margin-top: calc(36 * var(--u));
}
.nota__lado { display: flex; flex-direction: column; gap: calc(16 * var(--t)); }
.nota__lado p { margin: 0; }
.nota--portada .nota__titulo { max-width: calc(640 * var(--u)); }
/* The rest share their lines across a row: photographs, then the minutes,
   the titles and the deks on one line each, whatever wraps (subgrid). The
   parent's row-gap stays zero: a subgrid's rows are the parent's, so any
   gap there opens up every line inside the cards. The space between rows
   of cards is each card's own foot. */
.bitacora__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 0;
  margin-top: calc(100 * var(--u));
}
.bitacora__grid .nota { --pie: calc(72 * var(--u)); display: flex; flex-direction: column; padding-bottom: var(--pie); }
@supports (grid-template-rows: subgrid) {
  .bitacora__grid .nota { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.bitacora__grid .nota > .caps { margin-top: calc(22 * var(--t)); }
.bitacora__grid .nota__titulo { margin-top: calc(8 * var(--t)); }
.bitacora__grid .nota > .body-16 { margin-top: calc(10 * var(--t)); max-width: calc(480 * var(--t)); }
/* "Siga leyendo.", under an entry: the same cards under a heading. */
.bitacora--siga { display: flex; flex-direction: column; gap: calc(56 * var(--u)); }
.bitacora--siga .bitacora__grid { margin-top: 0; }

/* ---- an entry: the head ----------------------------------------------
   /nosotros's centred title, smaller (an entry's title is a sentence, not
   a name), then the dek, then who wrote it, when, and how long it reads. */
.entrada__h1 { font-size: calc(72 * var(--u)); }
.entrada__cabeza .domo-hero__type > :nth-child(3) { animation-delay: .16s; }
.entrada__cabeza .domo-hero__type > :nth-child(4) { animation-delay: .24s; }
.entrada__dek { max-width: calc(620 * var(--t)); text-wrap: balance; }
/* Not the place line's one-line rule: the meta wraps like any sentence. */
.domo-hero__type > .entrada__meta { white-space: normal; font-size: calc(14 * var(--t)); font-weight: 300; }
.entrada__cabeza nav a, .entrada__meta a {
  color: inherit; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
  transition: text-decoration-color .18s var(--ease-ui), color .18s var(--ease-ui);
}
@media (hover: hover) {
  .entrada__cabeza nav a:hover, .entrada__meta a:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.entrada__portada { margin: 0; }
.entrada__portada .domo-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
/* The whole picture, at the comp's frame: no room to leave for a price. */
@media (min-width: 901px) {
  .entrada__portada .domo-hero__photo { height: auto; aspect-ratio: 1106 / 640; }
}

/* ---- an entry: the column -----------------------------------------------
   One column to read in, about 65 characters (620 at 1440), centred, with
   room either side for what is wider: a photograph at the content's width,
   a table. The page map rides in the left margin from 1200 (mapa.js). */
.entrada__cuerpo {
  --medida: min(100%, calc(560 * var(--u) + 60px));
  max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto;
  padding: calc(96 * var(--u)) var(--gutter) var(--section);
  display: grid;
  grid-template-columns: [ancho-start] minmax(0, 1fr) [texto-start] var(--medida) [texto-end] minmax(0, 1fr) [ancho-end];
}
.entrada__cuerpo > * { grid-column: texto; margin: 0; }
/* The reading paragraph of /nosotros (.bloque__texto p), and its lists. */
.entrada__cuerpo p, .entrada__cuerpo li {
  font-weight: 300; font-size: max(17px, calc(19 * var(--t))); line-height: 1.6;
  letter-spacing: -.01em; word-spacing: .08em; color: var(--ink);
}
.entrada__cuerpo > p + p, .entrada__cuerpo > p + :is(ul, ol), .entrada__cuerpo > :is(ul, ol) + p { margin-top: 1.25em; }
/* The answer, first and a step larger: what an assistant lifts, and what a
   reader who stops here leaves with. */
.entrada__cuerpo > p:first-child { font-size: max(19px, calc(23 * var(--t))); line-height: 1.5; letter-spacing: -.015em; }
.entrada__cuerpo strong { font-weight: 400; }
.entrada__cuerpo p a, .entrada__cuerpo li a, .entrada__preguntas a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transition: text-decoration-color .18s var(--ease-ui);
}
@media (hover: hover) {
  .entrada__cuerpo p a:hover, .entrada__cuerpo li a:hover, .entrada__preguntas a:hover { text-decoration-color: currentColor; }
}
/* A heading opens a section: the display step, its period, room above. */
.entrada__cuerpo > h2 { margin-top: calc(120 * var(--u)); margin-bottom: calc(36 * var(--u)); }
.entrada__cuerpo > h3 { margin-top: calc(48 * var(--u)); margin-bottom: calc(10 * var(--t)); }
.entrada__cuerpo :is(h2, h3)[id], .entrada__fuentes li, .nota-ref a { scroll-margin-top: calc(110 * var(--u) + 24px); }
/* Lists: a short hairline for a bullet, figures in the face's own tabular
   numbers. */
.entrada__cuerpo ul, .entrada__cuerpo ol { padding: 0; list-style: none; }
.entrada__cuerpo li { position: relative; padding-left: 1.4em; }
.entrada__cuerpo li + li { margin-top: .5em; }
.entrada__cuerpo ul > li::before {
  content: ""; position: absolute; left: .1em; top: .8em;
  width: .6em; height: 1px; background: var(--ink-40);
}
.entrada__cuerpo ol { counter-reset: n; }
.entrada__cuerpo ol > li { counter-increment: n; }
.entrada__cuerpo ol > li::before {
  content: counter(n) "."; position: absolute; left: 0;
  font-variant-numeric: tabular-nums; color: var(--ink-60);
}

/* The answer first, in the dome pages' rows: the thing on the left, which
   of them on the right, a hairline above the first and under each. */
.entrada__resumen > div {
  height: auto; min-height: calc(58 * var(--t)); gap: calc(16 * var(--t));
  padding: calc(12 * var(--t)) 0; font-size: calc(16 * var(--t));
}
.entrada__resumen > div:first-child { border-top: 1px solid var(--line); }
.entrada__resumen dd { text-align: right; }

/* ---- figures: the column, the content's width, two side by side ------- */
.entrada__figura, .entrada__par { margin: calc(64 * var(--u)) 0; }
.entrada__cuerpo > h2 + :is(.entrada__figura, .entrada__par) { margin-top: 0; }
.entrada__figura--ancha { grid-column: ancho; width: min(100%, var(--content)); justify-self: center; }
.entrada__medio {
  display: block; overflow: clip;
  border-radius: var(--r-lg); background: var(--surface-card);
}
.entrada__medio :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A print that moves is a print: narrower than the column, centred in it. */
.entrada__figura:has(video) { width: min(100%, calc(432 * var(--t))); justify-self: center; }
.entrada__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.entrada__par figure { margin: 0; }
.entrada__par .entrada__medio { aspect-ratio: 4 / 5; }
.entrada figcaption {
  margin-top: calc(12 * var(--t));
  font-size: calc(14 * var(--t)); line-height: 1.4; letter-spacing: -.01em; word-spacing: .06em;
  color: var(--ink-60); text-wrap: pretty;
}
.entrada__portada figcaption { max-width: var(--content); margin-left: auto; margin-right: auto; }

/* ---- the table: hairlines only, what a dome has not said in grey ------- */
.entrada__tabla { grid-column: ancho; width: min(100%, calc(820 * var(--u) + 60px)); justify-self: center; margin: calc(8 * var(--u)) 0 calc(24 * var(--u)); }
.entrada__cuerpo > h2 + .entrada__tabla { margin-top: 0; }
.entrada__tabla table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: calc(16 * var(--t)); line-height: 1.35; letter-spacing: -.01em; word-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.entrada__tabla :is(th, td) {
  padding: calc(14 * var(--t)) calc(16 * var(--t)) calc(14 * var(--t)) 0;
  text-align: left; vertical-align: top; font-weight: 300;
  border-bottom: 1px solid var(--line);
}
.entrada__tabla thead :is(th, td) { padding-top: 0; font-size: calc(20 * var(--t)); letter-spacing: -.02em; color: var(--ink); }
.entrada__tabla tbody th { color: var(--ink-60); }
.entrada__tabla td { color: var(--ink); }
.entrada__tabla td.no { color: var(--ink-60); }
.entrada__tabla :is(th, td):first-child { width: 28%; }

/* ---- one line of Juan's ---------------------------------------------- */
.entrada__cita { margin: calc(72 * var(--u)) 0; }
.entrada__cita blockquote { margin: 0; }
.entrada__cita blockquote p {
  font-weight: 200; font-size: max(26px, calc(36 * var(--u))); line-height: 1.2;
  letter-spacing: -.04em; word-spacing: .1em; text-indent: -.42em; text-wrap: balance;
}

/* ---- questions, all of them open ------------------------------------- */
.entrada__preguntas { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.entrada__pregunta h3 { margin: 0 0 calc(10 * var(--t)); }
.entrada__pregunta p { margin: 0; }

/* ---- sources and the signature --------------------------------------- */
.nota-ref { font-size: .62em; line-height: 0; vertical-align: super; }
.nota-ref a { color: var(--accent); text-decoration: none; padding: 0 .12em; }
.entrada__fuentes { counter-reset: n; }
.entrada__cuerpo .entrada__fuentes li { font-size: calc(15 * var(--t)); line-height: 1.5; color: var(--ink-60); }
.entrada__cuerpo .entrada__fuentes li a { color: var(--accent); }
.entrada__cuerpo .entrada__fuentes .nota-volver { text-decoration: none; margin-left: .2em; }
.entrada__firma {
  margin-top: calc(96 * var(--u)) !important; padding-top: calc(24 * var(--u));
  border-top: 1px solid var(--line);
}
.entrada__cuerpo > .entrada__firma { font-size: calc(15 * var(--t)); color: var(--ink-60); }
.entrada__cuerpo > .entrada__firma a { color: var(--ink); text-decoration-color: var(--line); }

/* A fact still to confirm, on a draft only (tools/bitacora.py). */
mark.pendiente { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 4px; padding: 0 .2em; }

/* An entry is inside the Bitácora, as a dome is inside Domos. */
.footer a[aria-current="true"] { color: var(--ink-60); }

/* Under 901 the comp's three tracks are wider than the screen (the dome
   pages' hero row stacks here for the same reason): the lead's title, then
   its dek and minutes, one under the other. */
@media (max-width: 900px) {
  .entrada__h1 { font-size: calc(64 * var(--u)); }
  .nota__fila { display: flex; flex-direction: column; gap: calc(16 * var(--t)); margin-top: calc(24 * var(--t)); }
  .nota__lado { max-width: calc(560 * var(--t)); }
}
@media (max-width: 640px) {
  .entrada__h1 { font-size: max(36px, calc(50 * var(--u))); letter-spacing: -.04em; word-spacing: .1em; }
  .entrada__portada .domo-hero__photo { aspect-ratio: 4 / 3; }
  .nota__fila { gap: calc(14 * var(--t)); margin-top: calc(20 * var(--t)); }
  .bitacora__grid { grid-template-columns: minmax(0, 1fr); margin-top: calc(56 * var(--u)); }
  .bitacora__grid .nota { --pie: calc(48 * var(--t)); }
  /* /nosotros's phone size for reading, the answer a step over it. */
  .entrada__cuerpo p, .entrada__cuerpo li { font-size: 17px; }
  .entrada__cuerpo > p:first-child { font-size: 19px; }
  /* One column, the gutters' width: there is no margin to be wider into. */
  .entrada__cuerpo { grid-template-columns: [ancho-start texto-start] minmax(0, 1fr) [texto-end ancho-end]; padding-top: calc(56 * var(--u)); }
  .entrada__cuerpo > h2 { margin-top: calc(72 * var(--t)); margin-bottom: calc(20 * var(--t)); }
  .entrada__figura, .entrada__par { margin: calc(40 * var(--t)) 0; }
  .entrada__par { gap: 10px; }
  /* The table on a phone: each row's label over its three answers, the
     answers under the domes' names. */
  .entrada__tabla tr {
    display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  .entrada__tabla thead td { display: none; }
  .entrada__tabla :is(th, td), .entrada__tabla :is(th, td):first-child { width: auto; padding: 0; border: 0; font-size: 15px; }
  .entrada__tabla thead :is(th, td) { font-size: 17px; }
  .entrada__tabla tbody th { grid-column: 1 / -1; padding-bottom: 4px; font-size: 13px; }
}

/* ===================================================== A PHONE ======
   Not the comp shrunk (Juan, 7 Oct: "mobile home page and all the pages
   are very bad"). The ladder's token (--margin, --section, at the top)
   gives a phone its own margin and its own breath; these are what a token
   cannot reach. */
@media (max-width: 640px) {
  /* NO CARD ON A PHONE. A warm card inside the page's margin took another
     22 px a side from a 393 screen: the words ran in a column 300 wide and
     each photograph came out at 270. On a phone the rows lie on the page,
     the column's full width, the card's own hairlines between them and one
     above and below the set. */
  .desayuno__card, .niveles__card {
    background: none; border-radius: 0; padding: 0;
    border-block: 1px solid var(--line);
  }
  .prensa__card {
    background: none; border-radius: 0; padding-left: 0; padding-right: 0;
    border-block: 1px solid var(--line);
  }
  /* A proof, then its levels: each section's breath, one after the other,
     left two of them (180 px) between a sentence and its list. */
  .proof + .niveles { padding-top: 0; }

  /* THE ACTIVITIES AS A LIST. Two by two at 393 left each caption 150 px:
     every price on two lines and the details on three. The velero leads
     across the width; the other four are rows, a picture beside its words,
     a hairline between, like the steps further down. The pictures stay
     small: the masaje's original is 472 px wide. */
  .acts__grid { display: flex; flex-direction: column; gap: 0; }
  /* A rail card's `flex: 0 0 var(--col)` is a width; down a column it
     became every row's height. */
  .acts__grid .act { flex: none; }
  .acts__grid .act--lead { display: flex; flex-direction: column; gap: calc(10 * var(--t)); padding-bottom: calc(28 * var(--t)); }
  .acts__grid .act--lead .act__foto { aspect-ratio: 4 / 5; }
  .acts__grid .act:not(.act--lead) {
    display: grid; grid-template-columns: 36% minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: 16px; row-gap: 6px; align-items: start;
    padding: 16px 0; border-top: 1px solid var(--line);
  }
  .acts__grid .act:not(.act--lead) .act__foto { grid-column: 1; grid-row: 1 / 4; aspect-ratio: 1; }
  .acts__grid .act:not(.act--lead) > :not(.act__foto) { grid-column: 2; }
  .acts__grid .act:not(.act--lead) h3 { font-size: calc(19 * var(--t)); margin-top: -3px; }

  /* THE DOMES AS A LIST (index.html says why). The heading and the three
     rows are the whole band: the instrument's index, words, stage, toggle,
     ficha and buttons leave, and with the stage gone its model is never
     fetched (site.js). Each row is one link, lying on the band between
     hairlines like the cards above; the renders share one frame and one
     floor line, as on the dome pages' "otros domos". */
  .domos:not(.domos--solo) > :not(.domos__h, .domos__lista) { display: none; }
  .domos__lista {
    display: block; list-style: none; padding: 0;
    margin: 48px var(--gutter) 0;
    border-bottom: 1px solid var(--line);
  }
  /* Room, not a stack: each dome its own breath (Juan, 8 Oct: "bring
     more space"). */
  .domos__item {
    display: flex; flex-direction: column; gap: 6px;
    padding: 56px 0 52px; border-top: 1px solid var(--line);
    color: var(--ink); text-decoration: none;
    transition: transform .24s var(--ease-ui);
  }
  .domos__item:active { transform: scale(.98); transition-duration: .08s; }
  .domos__render { display: block; aspect-ratio: 541 / 290; margin-bottom: 28px; }
  .domos__render img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
  .domos__nombre { display: flex; align-items: baseline; justify-content: space-between; }
  .domos__nombre .flecha { width: 16px; height: 12px; }
  .domos__datos { margin-top: 12px; }
  .domos__datos i { font-style: normal; }
  /* No room for the dates (reserva.js): the row says so in grey. */
  .domos__item.is-no { color: var(--ink-60); }
  .domos__item.is-no .domos__render img { opacity: .5; filter: grayscale(.6); }
}