/* Ocean Jet Ski v4 - css/sections.css
   The two sections that came out of the Constance study, kept apart on purpose (Tino, 2 Sep):
   THE BRAND, who takes you out, and THE MOMENTS, what a ride looks like.
   Frames, rails and the reveal itself live in motion.css; this file is layout and type only. */

/* ============ the brand ============ */
.brand{ padding:120px 32px 140px; background:var(--paper); }
/* On desktop the hero's floating picture hangs below the fold: its height (19.5vw * 4/3, capped
   at 400px) minus the 15% of the hero it covers. The brand starts 96px under its bottom edge,
   which is what "move this up" meant once the trust strip left (Tino, 2 Sep). */
@media (min-width:1024px){
  /* the picture is 42vw wide at 10:9, so 37.8vw tall (max 594px); 15svh of it overlaps the hero */
  /* 29 Sep 2026: la sección que va justo debajo de la portada (ahora productos) deja el hueco para la foto que cuelga. */
  .hero + .brand, .hero + .news, .hero + .home-bookbar{ padding-top:calc(min(37.8vw, 594px) - 15svh + 40px); }   /* the picture sits closer to the words under it (Tino, 3 Sep) */
}
/* Centred, the way Constance centres its introduction. The pictures stay asymmetric underneath,
   which is what keeps it from reading as a template. */
.brand__head{ max-width:760px; margin:0 auto 88px; text-align:center; }
.brand__eyebrow{ margin:0; font-size:13px; color:var(--ink-faint); }
.brand h2{ margin:10px 0 0; font-size:clamp(30px,3.6vw,52px); font-weight:600;
           text-transform:uppercase; line-height:.92; letter-spacing:-.015em; }
.brand__lead{ margin:26px auto 0; max-width:38ch; font-size:clamp(19px,1.6vw,23px); line-height:1.55; color:var(--ink-soft); }

.brand__grid{ max-width:1240px; margin:0 auto; }
figure.value{ position:relative; margin:0; }
.value__frame{ position:relative; overflow:hidden; background:var(--paper-warm); }
.value__frame img{ display:block; width:100%; height:100%; object-fit:cover;
                   transition:opacity var(--dur-slow) var(--ease); }
.value__msg{ position:absolute; inset:0; display:flex; align-items:center; padding:32px 34px;
             opacity:0; transform:translateY(10px);
             transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.value__msg p{ margin:0; font-size:18px; line-height:1.65; color:var(--ink); max-width:32ch; }
.value figcaption{ margin-top:16px; font-size:24px; font-weight:600;
                   text-transform:uppercase; letter-spacing:-.01em; }
/* the picture steps back to the paper ground and the words take its place */
@media (hover:hover){
  .value:hover .value__frame img{ opacity:.07; }
  .value:hover .value__msg{ opacity:1; transform:none; }
}
.value:focus-within .value__frame img{ opacity:.07; }
.value:focus-within .value__msg{ opacity:1; transform:none; }
.value:focus-visible{ outline:2px solid var(--marine); outline-offset:6px; }

@media (min-width:1024px){
  .brand__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; }
  .v1{ grid-column:1/6;  margin-top:0;    }
  .v2{ grid-column:8/13; margin-top:13vh; }
  .v3{ grid-column:2/7;  margin-top:11vh; }
  .v4{ grid-column:8/12; margin-top:5vh;  }
  .v1 .value__frame{ aspect-ratio:4/3; }
  .v2 .value__frame{ aspect-ratio:4/3; }
  .v3 .value__frame{ aspect-ratio:4/5; }
  .v4 .value__frame{ aspect-ratio:4/3; }
}
@media (max-width:1023.98px){
  /* 40px, not 64: it lets the next section's eyebrow show just above the dock, so the fold reads as
     "there is more" instead of as a dead white band (Tino, 3 Sep) */
  .brand{ padding:40px 24px 72px; }
  .brand__head{ margin-bottom:32px; }
  .brand__grid{ display:flex; flex-direction:column; gap:40px; }
  /* THE BUG Tino found on 3 Sep: "on the phone it seems to have no text on these images".
     `.value__msg` is a child of `.value__frame`, and the frame is a fixed 4/5 box with
     `overflow:hidden` and a `clip-path:inset(...)`. Setting the message to position:static put it in
     normal flow INSIDE that box, below the picture, where both the overflow and the clip-path cut it
     away completely. So the sentence was rendered and then clipped out of existence.
     On the phone the frame gives up its aspect ratio and its clipping, and the PICTURE carries the
     ratio instead. The words then sit under it, in flow, as they were always meant to. */
  .value__frame{ aspect-ratio:auto; height:auto; max-height:none; overflow:visible; }
  .frame--travel.value__frame{ clip-path:none !important; }
  .value__frame > img{ aspect-ratio:4/5; height:auto; width:100%; object-fit:cover; }
  .frame--travel.value__frame > img{ height:auto; top:0; }
  .value__msg{ position:static; opacity:1; transform:none; padding:10px 0 0; }
  .value__msg p{ color:var(--ink-soft); font-size:17px; }
  .value figcaption{ font-size:21px; margin-top:12px; }
  /* and a tap must not blank the photograph. Dimming the picture to 7% so the sentence can take its
     place is a hover idea; on a phone the sentence is already there, and :focus-within fires on tap,
     which is why the picture Tino screenshotted was washed out. */
  .value:focus-within .value__frame img{ opacity:1; }
}

/* ============ where we are ============ */
/* White, not beige, and the whole block arrives from the right as you scroll (Tino, 3 Sep 11:10). */
.place{ background:var(--paper); overflow:clip; padding:clamp(64px,10svh,140px) 24px clamp(72px,10svh,140px); }
.place__head{ max-width:760px; margin:0 auto clamp(36px,5svh,64px); text-align:center; }
.place__head .eyebrow{ margin:0; font-size:13px; color:var(--ink-faint); }
.place__head h2{ margin:8px 0 0; font-size:clamp(36px,7vw,52px); font-weight:600; text-transform:uppercase;
                 line-height:.94; letter-spacing:-.02em; color:var(--ink); }
.place__head .lead{ margin:14px auto 0; max-width:38ch; font-size:17px; line-height:1.65; color:var(--ink-soft); }
.place__grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:28px; }
.place__map{ position:relative; overflow:hidden; background:var(--paper-warm); aspect-ratio:4/3; }
.place__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.place__info{ display:flex; flex-direction:column; gap:8px; }
.place__label{ margin:12px 0 0; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.place__address{ margin:0; font-style:normal; font-size:19px; line-height:1.55; color:var(--ink); }
.place__hours{ margin:0; font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:38ch; }
.place__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.place__go, .place__ask{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 26px;
                         font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; }
.place__go{ background:var(--red); color:#fff; }
.place__ask{ border:1px solid var(--ink); color:var(--ink); }
@media (hover:hover){ .place__go:hover{ background:var(--red-deep); color:#fff; } .place__ask:hover{ background:rgba(17,19,21,.05); color:var(--ink); } }

/* the walking route. Same type as the brand section: centred, big uppercase head, generous body. */
.place__find{ max-width:1320px; margin:clamp(48px,7svh,96px) auto 0; }
.place__find-head{ max-width:1320px; margin:0 auto clamp(28px,4svh,48px); text-align:center; }
.place__find-head h3{ margin:0; font-size:clamp(30px,3.6vw,52px); font-weight:600; text-transform:uppercase;
                      line-height:.92; letter-spacing:-.015em; color:var(--ink); }
/* Tino, 3 Sep: the paragraph should run the full width of the block under it, with every line the same
   length. Justified, with the last line centred under the centred heading, and hyphenation on so the
   word spacing never opens into rivers. */
.place__find-head p{ margin:22px 0 0; font-size:clamp(18px,1.5vw,24px); line-height:1.5; color:var(--ink-soft);
                     text-align:justify; text-align-last:center; hyphens:auto; }
.place__find-head .place__tip{ margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); font-size:clamp(16px,1.3vw,19px); }
.place__find-head .place__tip strong{ color:var(--ink); font-weight:600; }
.place__diagram{ margin:0; }
.place__diagram img{ display:block; width:100%; height:auto; background:var(--paper-warm); }
.place__diagram figcaption{ margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--ink-soft); }

.place__shots{ max-width:1320px; margin:clamp(40px,6svh,80px) auto 0; display:grid; grid-template-columns:1fr; gap:20px; }
.place__shot{ margin:0; }
.place__shot img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--paper-warm); }
.place__shot figcaption{ margin:10px 0 0; font-size:14px; color:var(--ink-soft); }
@media (min-width:1024px){
  .place{ padding-left:32px; padding-right:32px; }
  .place__grid{ grid-template-columns:1.25fr 1fr; gap:56px; align-items:start; }
  .place__map{ aspect-ratio:16/11; }
  .place__shots{ grid-template-columns:1fr 1fr; gap:28px; }
}

/* the arrival: the three blocks sweep in from the right edge, one after another, when the section shows */
.place[data-slide-in] .place__grid,
.place[data-slide-in] .place__find,
.place[data-slide-in] .place__shots{
  transition:transform 1.8s cubic-bezier(.16,1,.3,1), opacity 1s linear;
}
.place[data-slide-in] .place__find{ transition-delay:.14s; }
.place[data-slide-in] .place__shots{ transition-delay:.28s; }
html.is-arming .place[data-slide-in]:not(.is-in) .place__grid,
html.is-entered .place[data-slide-in]:not(.is-in) .place__grid,
html.is-arming .place[data-slide-in]:not(.is-in) .place__find,
html.is-entered .place[data-slide-in]:not(.is-in) .place__find,
html.is-arming .place[data-slide-in]:not(.is-in) .place__shots,
html.is-entered .place[data-slide-in]:not(.is-in) .place__shots{ transform:translateX(103%); opacity:0; }
@media (prefers-reduced-motion:reduce){
  .place[data-slide-in] .place__grid, .place[data-slide-in] .place__find, .place[data-slide-in] .place__shots{
    transform:none !important; opacity:1 !important; transition:none !important; }
}

/* ============ our story ============ */
/* Three numbers, typed in as they arrive (the same hand as the hero name). */
.story{ background:var(--paper); padding:clamp(64px,10svh,140px) 24px clamp(72px,10svh,140px); }
.story__head{ max-width:1320px; margin:0 auto clamp(36px,5svh,64px); text-align:center; }
.story__head .eyebrow{ margin:0; font-size:13px; color:var(--ink-faint); }
.story__head h2{ margin:8px 0 0; font-size:clamp(36px,7vw,52px); font-weight:600; text-transform:uppercase;
                 line-height:.94; letter-spacing:-.02em; }
/* same measure as the row of figures below, justified (Tino, 3 Sep) */
.story__head .lead{ margin:20px 0 0; font-size:clamp(18px,1.5vw,24px); line-height:1.5; color:var(--ink-soft);
                    text-align:justify; text-align-last:center; hyphens:auto; }
/* the lines that carry the story, in the brand red (Tino, 3 Sep) */
.story__head .lead .hl{ color:var(--red); font-weight:500; }
.story__stats{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:28px; }
.story__stat{ border-top:1px solid var(--rule); padding-top:18px; }
.story__stat dt{ font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.story__stat dd{ margin:10px 0 0; font-size:clamp(44px,9vw,80px); font-weight:600; line-height:.9; letter-spacing:-.03em; color:var(--ink); }
.story__note{ max-width:1320px; margin:clamp(28px,4svh,44px) auto 0; font-size:14px; line-height:1.6; color:var(--ink-faint); }
@media (min-width:1024px){
  .story{ padding-left:32px; padding-right:32px; }
  .story__stats{ grid-template-columns:repeat(3,1fr); gap:56px; }
}

/* ============ the statement band arrives ============ */
/* Tino, 2 Sep 21:25: "make this slower... like a zoom in, zoom out... entering a new room". The video and
   its scrim come in from the right edge over 2.4s, starting at 118% and settling to size as they land,
   the headline types itself once they have, the paragraph fades up after. Only when the script has
   run (html.is-arming / .is-entered), so no-JS and reduced motion see it plain. */
html.is-arming .statement[data-slide-in]:not(.is-in) .statement__media,
html.is-entered .statement[data-slide-in]:not(.is-in) .statement__media{ transform:translateX(100%) scale(1.18); }
html.is-arming .statement[data-slide-in]:not(.is-in)::after,
html.is-entered .statement[data-slide-in]:not(.is-in)::after{ transform:translateX(100%); }
.statement[data-slide-in] .statement__media{ transform-origin:50% 50%; transition:transform 2.4s cubic-bezier(.16,1,.3,1); }
.statement[data-slide-in]::after{ transition:transform 2.4s cubic-bezier(.16,1,.3,1); }
html.is-arming .statement[data-slide-in]:not(.is-in) .statement__body p,
html.is-entered .statement[data-slide-in]:not(.is-in) .statement__body p{ opacity:0; transform:translateY(14px); }
.statement[data-slide-in] .statement__body p{ transition:opacity .9s linear 2.3s, transform 1.1s var(--ease) 2.3s; }
@media (prefers-reduced-motion:reduce){
  .statement[data-slide-in] .statement__media, .statement[data-slide-in]::after, .statement[data-slide-in] .statement__body p{
    transform:none !important; opacity:1 !important; transition:none !important; }
}

/* ============ rooms ============ */
/* The home page as a house: each band below the hero is a room you walk into (Tino, 2 Sep 21:25). A
   room waits a touch larger and a touch lower, and eases to its place over two seconds as it comes
   into view (enter.js adds .is-in). Same guard: only when the script has run. */
/* the room's floor (its ground colour) is already there; what is IN the room eases in */
[data-room] > *{ transform-origin:50% 40%; transition:opacity 1.4s linear, transform 2s cubic-bezier(.16,1,.3,1); }
html.is-arming [data-room]:not(.is-in) > *,
html.is-entered [data-room]:not(.is-in) > *{ opacity:0; transform:scale(1.05) translateY(48px); }
@media (prefers-reduced-motion:reduce){ [data-room] > *{ transition:none !important; transform:none !important; opacity:1 !important; } }

/* ============ travel ============
   The Constance feel Tino named: the pictures ride up as you scroll down, so the page beneath
   reads as almost still. The frame is a fixed window; the picture inside is taller than the window
   and slides within it, which is real parallax rather than the whole block being pushed about.
   js/lag.js writes --py. Pointer devices only, and nothing moves under reduced motion. */
.frame--travel{ position:relative; overflow:hidden; }
.frame--travel > img{
  width:100%; height:142%; object-fit:cover; display:block;
  /* the extra height has to sit HALF above and half below, or the picture starts flush with the
     frame's top edge and the smallest downward drift shows the frame's own colour as a strip along
     the top. That strip is what Tino saw. */
  position:relative; top:-21%;
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
  /* the settle in motion.css also writes transform, and an animation beats a plain declaration,
     so on a travelling frame the scale stands down and the ride takes its place. The frame itself
     still opens from its top edge: that reveal lives on the parent and is untouched. */
  animation:none !important;
}
@media (prefers-reduced-motion:reduce){
  .frame--travel > img{ transform:none !important; }
}

/* ============ good to know ============
   The old grid asked for repeat(auto-fit, minmax(320px, 1fr)) inside 1180px, which resolves to
   THREE columns for TWO lists: the empty third column was the hole Tino saw. Two columns from
   1024, one below, and the reassurance line runs the full width underneath. */
/* ============ good to know (its own page since 2 Sep) ============ */
.know{ padding:8px 32px 72px; background:var(--paper); }
.know__grid{ max-width:1240px; margin:0; display:grid; gap:40px 72px; grid-template-columns:1fr; }
.know__label{ margin:0 0 12px; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.know__list{ margin:0; padding:0; list-style:none; }
.know__list li{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--rule); font-size:18px; line-height:1.6; }
.know__tick{ color:var(--ocean-deep, #1b3a4b); flex:none; }
.know__extra .know__tick{ color:var(--ink-faint); }
.know__cta{ max-width:1240px; margin:0; padding:0 32px 120px; display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; }
.know__cta p{ margin:0; font-size:16px; color:var(--ink-soft); }
.know__cta p a{ text-decoration:underline; }
@media (min-width:1024px){
  .know__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1023.98px){
  .know{ padding:8px 24px 48px; }
  .know__cta{ padding:0 24px 72px; }
}

/* ============ the statement band ============
   Full bleed, tall, with the words on the picture. This is the band the gallery was missing and it
   carries the one line of feeling the rest of the page does not try to make. */
.statement{ position:relative; width:100%; height:min(100svh,1000px); overflow:hidden; background:var(--paper); }  /* a full room; WHITE behind the sweep, not black (Tino, 2 Sep 21:55) */
.statement__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* one scrim, top and bottom, so the words hold their contrast without dimming the whole picture */
.statement::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,16,20,.42) 0%, rgba(10,16,20,.10) 34%,
                                     rgba(10,16,20,.34) 62%, rgba(10,16,20,.58) 100%); }
.statement__body{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
                  align-items:center; justify-content:center; gap:18px; text-align:center;
                  padding:0 clamp(24px,6vw,80px); }
.statement__body h2{ margin:0; color:var(--paper); font-size:clamp(32px,4.4vw,56px); font-weight:600;
                     text-transform:uppercase; line-height:.94; letter-spacing:-.015em; max-width:24ch; }
.statement__body p{ margin:0; color:var(--paper); opacity:.92; font-size:clamp(17px,1.4vw,20px);
                    line-height:1.55; max-width:46ch; }
@media (max-width:1023.98px){
  .statement{ height:min(72svh,620px); }
}

/* ============ ride slideshows ============
   Each ride shows three of Ocean's own pictures instead of one. Pure CSS, no script: the same
   cross-fade the hero uses, so the page has one idea about how pictures change. Three slides,
   a 4 second hold and a 1 second fade, and it stops for anyone who asked for less motion. */
.rideshow{ position:relative; width:100%; height:100%; overflow:hidden; }
.rideshow__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0;
                animation:rideFade 15s linear infinite; }
.rideshow__img:nth-child(1){ animation-delay:0s;  opacity:1; }
.rideshow__img:nth-child(2){ animation-delay:5s;  }
.rideshow__img:nth-child(3){ animation-delay:10s; }
@keyframes rideFade{
  0%{ opacity:0; } 2%{ opacity:1; } 31%{ opacity:1; } 35%{ opacity:0; } 100%{ opacity:0; }
}
/* Slide one never fades. It is the floor the others cross-fade over, so at no point in the cycle
   is the frame's own background showing through a half-transparent picture: that was the washed
   out moment Tino saw. Slides two and three fade in and out above it. */
.rideshow__img:nth-child(1){ animation:none; opacity:1; z-index:0; }
.rideshow__img:nth-child(n+2){ z-index:1; }
@media (prefers-reduced-motion:reduce){
  .rideshow__img{ animation:none !important; opacity:0; }
  .rideshow__img:nth-child(1){ opacity:1; }
}

/* A slideshow that is a full-width banner rather than a card photo has no parent height to fill,
   so it collapsed to nothing. Give it its own. (Regression found and fixed 2 Sep.) */
section > .rideshow{ height:min(46vw,520px); }
@media (max-width:1023.98px){ section > .rideshow{ height:min(62vw,380px); } }

/* ============ the trust line ============
   One number and where it came from, under the hero line (Tino, 2 Sep: "these reviews need to be
   here"). The .trust section it used to sit in is gone. Platforms never merged. */
.trust__line{ margin:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
              color:var(--ink); }
.trust__score{ font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.trust__stars{ color:var(--red); font-size:18px; letter-spacing:.06em; }
.trust__count{ font-size:16px; color:var(--ink-soft); }
.hero-trust{ margin-top:34px; }

/* ============ the reveal, driven from the same loop as the travel ============
   The CSS view() timeline finished the reveal before the eye caught it. On a travelling frame the
   opening is written by js/lag.js instead, from the frame's real position on screen, which is the
   pronounced version Tino liked in the prototype. Default is fully open, so JS off loses nothing. */
.frame--travel{ animation:none !important; clip-path:inset(0 0 var(--closed,0%) 0); }
.frame--travel > img{ height:142%; position:relative; top:-21%; }
@media (prefers-reduced-motion:reduce){ .frame--travel{ clip-path:none !important; } }

/* No picture is ever taller than the screen it is read on: a portrait frame in a narrow window used
   to become 1190px tall, which is both ungainly and the reason the opening never finished. */
/* the gallery frames set their own heights; this cap is for the brand section only (3 Sep) */
.value__frame{ max-height:74svh; }


/* ============ the WhatsApp button ============ */
/* On every page, on every screen size except the home page on a phone, where the dock has it. */
.wa-fab{ position:fixed; right:24px; bottom:24px; z-index:60; display:inline-flex; align-items:center; gap:12px;
         height:64px; padding:0 26px 0 18px; border-radius:999px; background:#25d366; color:#fff;
         font-family:var(--font-sans); font-size:16px; font-weight:600; letter-spacing:.01em; text-decoration:none;
         box-shadow:0 12px 32px rgba(17,19,21,.24); transition:transform .25s var(--ease), background-color .25s linear; }
.wa-fab svg{ flex:none; }
.wa-fab:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@media (hover:hover){ .wa-fab:hover{ background:#1fbd5a; transform:translateY(-2px); color:#fff; } }
@media (max-width:1023.98px){
  .wa-fab{ right:16px; bottom:20px; height:58px; padding:0 20px 0 16px; font-size:15px; }
  .wa-fab--home{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .wa-fab{ transition:none; } }

/* ============ the family preview ============ */
/* The reference closes its home page with three quiet cards under a centred title ("Constance News",
   "Read all Articles"). Ours does the same for the Momenta family (Tino, 2 Sep). No clip reveal on
   these frames: they use their own class so motion.css leaves them alone. */
.news{ background:var(--paper-warm); padding:120px 32px 140px; }
.news__head{ max-width:760px; margin:0 auto 72px; text-align:center; }
.news__head h2{ margin:0; font-size:clamp(30px,3.6vw,52px); font-weight:600; text-transform:uppercase;
                line-height:.92; letter-spacing:-.015em; }
.news__head p{ margin:18px auto 0; max-width:44ch; font-size:18px; line-height:1.6; color:var(--ink-soft); }
.news__all{ display:inline-block; margin-top:22px; padding-bottom:4px; border-bottom:1px solid var(--ink);
            font-size:15px; letter-spacing:.02em; color:var(--ink); text-decoration:none; }
.news__grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:48px; }
.news__card{ display:block; color:var(--ink); text-decoration:none; }
.news__frame{ position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--sand); }
.news__frame img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.news__card h3{ margin:22px 0 0; font-size:clamp(20px,1.6vw,24px); font-weight:500; line-height:1.3; letter-spacing:-.01em; }
.news__card p{ margin:8px 0 0; font-size:16px; line-height:1.55; color:var(--ink-soft); }
.news__more{ display:inline-block; margin-top:16px; padding-bottom:3px; border-bottom:1px solid var(--ink);
             font-size:15px; color:var(--ink); }
@media (hover:hover){
  .news__card:hover{ color:var(--ink); }
  .news__card:hover .news__frame img{ transform:scale(1.04); }
  .news__card:hover .news__more, .news__all:hover{ color:var(--red); border-bottom-color:var(--red); }
}
@media (min-width:1024px){ .news__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1023.98px){ .news{ padding:64px 24px 80px; } .news__head{ margin-bottom:40px; } }
@media (prefers-reduced-motion:reduce){ .news__frame img{ transition:none; } }

/* ============ the menu, a drawer ============ */
/* Tino, 2 Sep 22:05, from the reference: the page dims, a white panel slides in from the right. */
.menu{ position:fixed; inset:0; z-index:70; }
.menu__scrim{ position:absolute; inset:0; border:0; padding:0; background:rgba(17,19,21,.55); cursor:pointer;
              animation:menuScrim .5s linear both; }
.menu__panel{ position:absolute; top:0; right:0; bottom:0; width:min(480px,100%); box-sizing:border-box; background:#fff; color:var(--ink);
              padding:28px 40px 36px; overflow-y:auto; display:flex; flex-direction:column; gap:28px;
              animation:menuIn .65s cubic-bezier(.16,1,.3,1) both; }
@keyframes menuIn{ from{ transform:translateX(100%); } to{ transform:none; } }
@keyframes menuScrim{ from{ opacity:0; } to{ opacity:1; } }
.menu__head{ display:flex; align-items:center; justify-content:space-between; min-height:44px; flex:none; }
.menu__brand{ font-size:15px; letter-spacing:.02em; color:var(--ink-soft); }
.menu__close{ width:44px; height:44px; margin-right:-12px; border:0; background:transparent; font-size:30px; line-height:1;
              color:var(--ink); cursor:pointer; }
.menu__nav{ display:flex; flex-direction:column; gap:2px; margin-top:8px; flex:none; }
.menu__nav a{ display:block; padding:6px 0; font-size:25px; font-weight:600; text-transform:uppercase; line-height:1.1;
              letter-spacing:-.012em; color:var(--ink); text-decoration:none; }
.menu__sub{ display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:1.4; flex:none; }
.menu__sub a{ color:var(--ink-soft); text-decoration:none; }
@media (hover:hover){ .menu__nav a:hover{ color:var(--red); } .menu__sub a:hover{ color:var(--ink); } }
/* the family, at the foot of the drawer: the Momenta page behind, faded to white, a typed line on it */
/* flex:none everywhere: a flex column would otherwise squeeze this block and cut the typed line */
.menu__family{ position:relative; overflow:hidden; box-sizing:border-box; flex:none; margin-top:auto; padding:84px 24px 22px; background:var(--paper-warm);
               display:flex; flex-direction:column; gap:10px; }
.menu__shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; opacity:.55; }
.menu__family::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 46%, #fff 100%); }
.menu__family > *:not(.menu__shot){ position:relative; z-index:1; }
.menu__family-eyebrow{ margin:0; font-size:13px; color:var(--ink-faint); }
.menu__type{ margin:0; font-size:21px; font-weight:600; text-transform:uppercase; line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
.menu__type .word{ display:inline-block; white-space:nowrap; }
.menu__type .ch{ display:inline-block; opacity:0; }
.menu__type.type-go .ch{ opacity:1; transition:opacity 0s linear calc(.45s + var(--i) * 38ms); }
.menu__family-links{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; }
.menu__family-links a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover){ .menu__family-links a:hover{ color:var(--red); } }
.menu__lang{ font-size:13px; color:var(--ink-faint); flex:none; }
/* The brand line is a link home. It looks exactly as the span did; on a phone the drawer covers the
   header logo, so this is the only way back to the home page while the menu is open (3 Sep). */
.menu__brand{ text-decoration:none; }
/* Book now inside the drawer: PHONE ONLY. The desktop header keeps its own and is signed off. */
.menu__book{ display:none; }
@media (max-width:1023.98px){
  .menu__panel{ width:100%; padding:14px 24px calc(20px + env(safe-area-inset-bottom)); gap:14px;
                overscroll-behavior:contain; }
  .menu__brand{ display:inline-flex; align-items:center; min-height:44px; }
  /* the one action a buyer wants, above the fold, never hidden by the menu */
  .menu__book{ display:flex; align-items:center; justify-content:center; flex:none; min-height:50px;
               margin-top:2px; padding:0 20px; background:var(--red); color:#fff; font-size:14px; font-weight:500;
               letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
  /* 44px tap targets throughout: nav rows were 38px, the small links 21px and the family links 16px */
  .menu__nav{ margin-top:2px; gap:0; }
  .menu__nav a{ font-size:24px; padding:9px 0; }
  /* two columns on the phone: four 44px rows would cost 176px of an 844px screen and push the
     family block and the language row off the bottom */
  .menu__sub{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
  .menu__sub a{ display:flex; align-items:center; min-height:44px; }
  /* full-bleed band on the phone, with its type on the panel's own left edge: the block's 24px inner
     padding used to indent "The family" past every other line in the drawer */
  .menu__family{ margin-inline:-24px; padding:28px 24px 0; }
  /* the Momenta screenshot carries its own headline; on a 390 panel it collided with ours, so the
     white veil comes up sooner here and our type always sits on near-white */
  .menu__family::after{ background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 26%, #fff 54%); }
  .menu__type{ font-size:19px; }
  .menu__family-links{ gap:0 24px; }
  .menu__family-links a{ display:inline-flex; align-items:center; min-height:44px; }
  .menu__lang{ display:flex; align-items:center; min-height:26px; }
}
@media (prefers-reduced-motion:reduce){
  .menu__scrim, .menu__panel{ animation:none; }
  .menu__type .ch{ opacity:1 !important; transition:none !important; }
}

/* The travel zoom is gentler inside the gallery than in the brand section: these are photographs of
   people, and 142% of the frame's height cropped their faces away (3 Sep). 116% with the smaller
   data-travel keeps the whole subject while still drifting. */

/* on a phone a justified column of 40 characters looks broken, so it goes back to plain ragged text */
@media (max-width:767.98px){
  .place__find-head p, .story__head .lead{ text-align:left; text-align-last:left; hyphens:none; }
}


/* ==================================================================
   THE ROUTE VIEWER (phone), 3 September 2026
   Tino: "this map on the phone needs to be able to minimize and see
   closer like on google maps, if not the image is just too small."
   At 342px the labels on the aerial diagram are unreadable. Drag to pan,
   two buttons or a pinch to zoom. Desktop shows the diagram at 1320px
   and never sees any of this.
   ================================================================== */
.place__zoom{ display:none; }
@media (max-width:1023.98px){
  .place__zoom{
    display:inline-flex; align-items:center; gap:8px; margin-top:12px; min-height:44px; padding:0 16px;
    border:1px solid var(--ink); background:transparent; color:var(--ink);
    font:inherit; font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  }
  .place__zoom-glyph{ font-size:17px; line-height:1; }
}
.routev{ position:fixed; inset:0; z-index:80; background:#0e1418; display:flex; flex-direction:column; }
/* the pane is a plain scroll container: dragging pans, which is the one gesture that behaves the
   same on every phone. touch-action leaves the browser's own pinch alone on top of it. */
.routev__pane{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom; overscroll-behavior:contain;
  display:flex; align-items:center; justify-content:center;
}
.routev__img{ display:block; width:calc(100% * var(--rz, 2)); max-width:none; height:auto; }
.routev__bar{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:#0e1418; border-top:1px solid rgba(255,255,255,.16);
}
.routev__btn{
  min-width:52px; min-height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.34);
  background:transparent; color:#fff; font:inherit; font-size:19px; line-height:1; cursor:pointer;
}
.routev__btn--close{ margin-left:auto; font-size:13px; font-weight:500; letter-spacing:.12em;
                     text-transform:uppercase; background:var(--red); border-color:var(--red); }
.routev__level{ color:rgba(255,255,255,.72); font-size:13px; min-width:34px; text-align:center; }

/* 29 Sep 2026: barra de reserva en la página principal, encima de los productos.
   Se ve también en el móvil, en columna, como en book.html. */
.home-bookbar{ display:block; }
.home-bookbar + .news{ padding-top:64px; }
@media (max-width:1023.98px){
  .home-bookbar{ display:block; padding:32px 24px 8px; }
  .home-bookbar .bookbar{ grid-template-columns:1fr; }
  .home-bookbar .bookbar__cell + .bookbar__cell{ border-left:0; border-top:1px solid var(--rule); }
  .home-bookbar .bookbar__cta{ min-width:0; width:100%; min-height:60px; }
  .home-bookbar + .news{ padding-top:40px; }
}

/* 29 Sep 2026: la barra de reserva solo lleva la actividad; su casilla llega hasta el botón. */
.bookbar.bookbar--ride{ grid-template-columns:1fr auto; }
@media (max-width:1023.98px){ .bookbar.bookbar--ride{ grid-template-columns:1fr; } }