/* Hallmark · shape: kept (Photographic) · genre: editorial · theme: brand · redesign: polish (on the restyle) · job: book
 * paper: oklch(99.2% 0.003 250) · accent: oklch(44.3% 0.153 256.4) · display: Cormorant Garamond · body: Poppins · hero: Poster, the title on the water · nav: kept, banner over a retracting bar · footer: index columns on the railing blue · signature: the sea at sunset full-bleed, the title on the water · imagery: the owners' photographs, natural; logo redrawn in SVG
 * axes: light/garalde-serif/cool-blue · posture: full-palette (white paper, railing-blue signal, the same blue as the banner and footer field, the thin black line and grid of their Instagram, sunset accent) · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V, the layout is kept by request; the change is the system (the place's own blue, white and tile) and the four compositions the owner named */
/* Hallmark · polish by request: their Instagram's grid under three sections, two thin rings (the diamond and spiral seam later removed by request), "Disfrutá del mar" beside the mosaic, framed photos; the services panel white on the grid; "El plan" as its own band; the umbrella in place of the facade; a floating WhatsApp button and one review per screen on phones */
/* Hallmark · by request: the hero card is gone and the title sits on the photo; the tabs are a mosaic; the reviews a rail; the [PLACEHOLDER] rows are hidden for the demo; the "El plan" photo sits beside the planner */
/* Hallmark · finish-review: subagent · 7 findings · 7 resolved (reviews three across, lining figures, a gutter in the sunset band and one photo on phones, captions under the phone mosaic, the phone hero's horizon above the title, a larger opening line, a larger header logo) · gap: the WhatsApp number still needs the owners' confirmation */
/* Hallmark · polish finish-review: subagent · 5 findings · 5 resolved (the services panel opaque white, rings at 2.4em up and left of the first word, the grid on the column pitch from the content edge and ending on a line, "Disfrutá del mar" at headline size in its own column, the diamond at 96px with a 1.5px line on the left edge) */
/* Hallmark · waive 38iii · two heads, a thin ink ring up and left of the first word, no colour, weight or size change · the ring is the owners' own Instagram device from the Playa post, asked for by name */
/* Hallmark · waive 66 · one rotated line, "Disfrutá del mar", desktop only, beside the mosaic · it is the owners' own flyer line from ig-08, placed there at their request */
/* Hallmark · waive 47c · a 120px hairline grid at 8% under three sections that carry content · the grid is the ground of every Luz y Mar Instagram post, asked for by the owner */
/* Hallmark · answered F25 · the mosaic captions and "Disfrutá del mar" hide on phones at the owner's request; every photo keeps its alt text */
/* Hallmark · dismissed F17 · the reseñas h2 is the 5,0 figure over one short line, two lines the render measures as four */
/* Hallmark · dismissed 58 · the rail shows two reviews at a time; the other three sit past its edge and are counted though off-screen */
/* Hallmark · by request: the mosaic captions cut to plain names, the umbrella's caption gone; every mosaic photo opens a full-screen viewer that moves between them by arrow, key or swipe; the footer's edge is a drifting swell of the railing blue; the photos as AVIF with JPEG behind; the house's facade opens the mosaic and takes turns with the sea in the hero; noindex while it is a demo */
@import url("./tokens.css");
@import url("./base.css");

:root { --chrome-h: 7.5rem; --mosaic-gap: var(--space-xs); --olas-h: 64px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i--star { width: 16px; height: 16px; color: var(--color-sun-ink); fill: currentColor; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Buttons: one primary, the railing blue; its quiet sibling is the outline */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--quiet { min-height: 44px; padding: 0 var(--space-md); background: transparent; border-color: var(--color-accent); color: var(--color-accent); font-size: var(--text-sm); }
.btn--quiet:hover { background: var(--color-paper-2); }

.text-link { font-weight: 500; color: var(--color-accent); text-decoration-color: currentColor; text-underline-offset: 0.2em; }
.text-link:hover { color: var(--color-accent-2); }

/* Chrome: the blue banner, then a white bar that steps out of the way on the way down */
.banner { margin: 0; padding: var(--space-xs) var(--space-md); background: var(--color-field); color: var(--color-on-field); font-size: var(--text-sm); text-align: center; }
.banner a { color: inherit; text-underline-offset: 0.2em; }
.banner a:focus-visible { outline-color: var(--color-focus-on-field); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__inner { display: flex; align-items: center; gap: var(--space-xl); min-height: 84px; }
.logo { display: inline-flex; flex-shrink: 0; }
.logo img { width: auto; height: 60px; }
.bar__nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.bar__nav a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-xs); }
.bar__nav a:hover { color: var(--color-accent); text-decoration: underline; }

/* Hero: the sea, full screen on every width; the title sits on the water over an ink scrim */
.hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: calc(100svh - var(--chrome-h)); }
.hero__photo { position: absolute; inset: 0; margin: 0; }
.hero__img--mar { object-position: 50% 68%; }
/* the house takes turns with the sea: about seven seconds each, crossfading over a second and a half */
.hero__img--casa { opacity: 0; object-position: 52% 72%; animation: hero-alterna 18s var(--ease-in-out) infinite; }
@keyframes hero-alterna { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 82%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 50%, transparent) 45%, transparent 80%); }
.hero__content { position: relative; z-index: 2; display: grid; justify-items: start; gap: var(--space-md); padding-block: var(--space-3xl) var(--space-2xl); color: var(--color-on-photo); }
.hero h1 { max-width: 12ch; line-height: 0.98; color: var(--color-on-photo); }
.hero .lead { max-width: 34ch; color: var(--color-on-photo); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xs); }
.rating-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-on-photo); text-underline-offset: 0.2em; }
.rating-link .i--star { color: var(--color-sun); }
.hero .btn:focus-visible, .rating-link:focus-visible { outline-color: var(--color-on-photo); }

/* The owners' own line, set as large as a headline */
.calma { padding-block: var(--section-gap-s); }
/* set clearly larger and wider than any section head: it is the page's opening line */
.statement { max-width: 30ch; font: var(--display-weight) var(--text-statement)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }

/* The cabins: eight of the owners' photographs at once */
.cabanas { padding-block: var(--section-gap) var(--space-2xl); }
.cabanas__head { margin-bottom: var(--space-2xl); }
.cabanas__head h2 { max-width: 16ch; }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 17vw, 17rem); gap: var(--mosaic-gap); }
.tile { position: relative; margin: 0; overflow: hidden; }
.tile--lead { grid-column: 1 / 3; grid-row: span 2; }
.tile--tall { grid-column: 4; grid-row: span 2; }
/* the living room answers the facade from the opposite corner, so eight photos close the grid with no gap */
.tile--lead-end { grid-column: 3 / 5; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile__photo { position: absolute; inset: 0; display: block; cursor: zoom-in; }
/* on hover a white frame comes up inside the photo, like the frames on their posts */
.tile__photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 var(--space-xs) color-mix(in oklab, var(--color-frame) 85%, transparent); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.tile__photo:hover::before { opacity: 1; }
/* the focus ring drawn inside the tile, over the photograph, since the tile clips anything outside it */
.tile__photo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tile__photo:focus-visible { outline: none; }
.tile__photo:focus-visible::after { box-shadow: inset 0 0 0 3px var(--color-focus), inset 0 0 0 5px var(--color-paper); }
/* each caption on its own ink ground, so it reads over any photograph */
.tile figcaption { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--space-xs) var(--space-md); background: color-mix(in oklab, var(--color-scrim) 74%, transparent); color: var(--color-on-photo); font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }

/* What there is, as a ruled list on the grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.servicios { padding-block: var(--section-gap-l) var(--section-gap); }
.servicios__grid { align-items: start; row-gap: var(--space-2xl); }
.servicios__head { grid-column: 1 / 6; display: grid; gap: var(--space-xl); }
.servicios__head h2 { max-width: 12ch; }
/* Cintia's words set as a quote: a large opening mark in the railing blue, the words in the serif's italic,
   five stars over the name (her review is a five-star one in the brief). The mark sits a few pixels left of
   the content edge so the grid line there runs behind it, not along its edge. */
.quote blockquote::before { content: "\201C"; content: "\201C" / ""; display: block; height: 0.5em; margin-left: -0.06em; font: var(--display-weight) 9rem/1 var(--font-display); color: var(--color-accent); }
.quote blockquote p { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--color-ink); text-wrap: pretty; }
.stars--sm { gap: var(--space-3xs); }
.stars--sm .i { width: 16px; height: 16px; }
.quote { display: grid; gap: var(--space-md); margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { max-width: 34ch; font-size: clamp(1.375rem, 0.7vw + 1.1rem, 1.75rem); line-height: 1.38; }
.quote figcaption { display: grid; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
/* white on the grid, a thin black line around it, the icons in the railing blue */
.servicios__well { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); padding: var(--space-xl); border: var(--rule-hair) solid var(--color-line); background: var(--color-paper); color: var(--color-ink); }
.amenities h3 { padding-bottom: var(--space-sm); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-line); }
.amenities ul { margin: 0; padding: 0; list-style: none; }
.amenities li { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; border-bottom: var(--rule-hair) solid var(--color-rule); }
.amenities li:last-child { border-bottom: 0; }
.amenities .i { width: 24px; height: 24px; color: var(--color-accent); }

/* The sunset, edge to edge: two of the owners' frames side by side */
.banda__fig { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; background: var(--color-paper); }
.banda__fig::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 60%, transparent), transparent 35%); }
.banda__photo { height: clamp(20rem, 40vw, 38rem); }
.banda__caption { position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: var(--space-lg); z-index: 2; color: var(--color-on-photo); font-size: var(--text-sm); font-weight: 500; }

/* Proof: the score, then the guests in their own words on a rail */
.resenas { padding-block: var(--section-gap) 0; }
.resenas__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-xl); margin-bottom: var(--space-2xl); }
.resenas__head h2 { display: grid; gap: var(--space-md); max-width: none; }
.score { font-size: var(--text-figure); line-height: 0.95; font-variant-numeric: lining-nums tabular-nums; }
.score__line { font-size: var(--text-title); line-height: 1.15; }
.resenas__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.stars { display: flex; gap: var(--space-2xs); margin: 0; }
.stars .i { width: 24px; height: 24px; }
.rail-nav { display: flex; gap: var(--space-xs); }
.rail-nav[hidden] { display: none; }
.rail-nav__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: transparent; color: var(--color-accent); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.rail-nav__btn:hover { background: var(--color-paper-2); }
.rail-nav__btn:active { transform: translateY(1px); }
.rail-nav__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rail-nav__btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap-columns)) / 3); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.review { display: grid; align-content: start; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-accent); scroll-snap-align: start; }
.review blockquote { margin: 0; }
.review blockquote p { max-width: 52ch; font-size: var(--text-lead); line-height: 1.6; color: var(--color-ink-2); }
.review__name { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Where it is: the map and the door you will be looking for */
.donde { padding-block: var(--section-gap); }
.donde__head { align-items: end; row-gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.donde__head h2 { grid-column: 1 / 7; max-width: 13ch; }
.donde__head .facts { grid-column: 8 / -1; }
.facts { display: grid; margin: 0; }
.facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); font-weight: 500; line-height: 1.6; color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.fill { padding: 0 var(--space-2xs); border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.donde__visuals { align-items: start; }
.map { position: relative; grid-column: 1 / 9; margin: 0; }
/* Until Google's map arrives (or if it never does) the frame shows the address, not an empty box */
.map__fallback { position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin: 0; background: var(--color-paper-2); color: var(--color-ink-2); }
.map__fallback .i { color: var(--color-accent); }
.map__frame { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: 0; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.map figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.fachada { grid-column: 9 / -1; margin: 0; }
.fachada__photo { aspect-ratio: 13 / 18; }

/* The close: the planner that writes the WhatsApp message, beside the plan itself */
.reservar { padding-block: var(--section-gap-s) calc(var(--section-gap-s) + var(--olas-h)); }
.reservar__grid { align-items: start; row-gap: var(--space-2xl); }
.reservar__head { grid-column: 1 / 6; grid-row: 1; }
.reservar h2 { max-width: 18ch; }
.reservar .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.planner { grid-column: 7 / -1; grid-row: 1; display: grid; justify-items: start; gap: var(--space-lg); max-width: 36rem; }
.planner__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); width: 100%; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-xs); min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.field input { width: 100%; min-width: 0; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 2px; }
.field input:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.date { position: relative; }
.date__hint, .date__icon { display: none; }
/* iOS draws its own date control: it ignores the width and height it is given, centres the date and shows nothing
   while empty. There the field is flattened to a plain one, the date set left, a hint while it is empty and a
   calendar on the right; every other browser keeps its own control. */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; height: 52px; line-height: 50px; padding-right: calc(var(--space-md) + 20px + var(--space-sm)); text-align: left; }
  .field input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: left; }
  .date__icon { display: block; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-accent); }
  .date.is-empty .date__hint { display: block; position: absolute; left: calc(var(--space-md) + 1px); top: 50%; transform: translateY(-50%); pointer-events: none; font-size: var(--text-md); color: var(--color-muted); }
}
.field__help { min-height: 1lh; margin: 0; font-size: var(--text-sm); color: var(--color-error); }
.stepper { display: grid; grid-template-columns: 52px 5rem 52px; }
.stepper input { text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn { display: grid; place-items: center; min-height: 52px; border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.stepper__btn:hover { background: var(--color-paper-3); }
.stepper__btn:active { transform: translateY(1px); }
.stepper__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.stepper__btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.planner__submit { margin-top: var(--space-xs); }
.planner__preview { max-width: 52ch; font-size: var(--text-sm); color: var(--color-muted); }
.planner__preview q { color: var(--color-ink); quotes: "“" "”"; }
/* "El plan": its own band, two of their photographs framed like their posts */
.plan { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.plan__grid { align-items: start; row-gap: var(--space-xl); }
.plan__line { grid-column: 1 / 5; align-self: end; max-width: 11ch; padding-bottom: var(--space-2xl); }
.plan__photo { margin: 0; }
.plan__photo--a { grid-column: 5 / 9; }
.plan__photo--b { grid-column: 9 / -1; margin-top: var(--space-3xl); }
.plan__slot { aspect-ratio: 4 / 5; }

/* Footer: the logo in white on the railing blue, then where, how to reach them, and the page */
.foot { --color-focus: var(--color-focus-on-field); position: relative; padding-block: var(--section-gap-s) var(--space-xl); background: var(--color-field); color: var(--color-on-field); }
/* The footer's edge is a swell: three layers of the railing blue, each a different length and pace, drift over the end
   of the planner and rise out of the blue the first time the footer comes into view. One wave shape, black in the mask. */
.olas { --ola-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30C80 6 160 6 240 30S400 54 480 30V64H0Z'/%3E%3C/svg%3E"); position: absolute; inset-inline: 0; bottom: calc(100% - 1px); height: var(--olas-h); overflow: hidden; pointer-events: none; }
.ola { position: absolute; left: 0; bottom: 0; width: calc(100% + var(--ola-w)); height: var(--ola-alto); background: var(--color-field); opacity: var(--ola-op); -webkit-mask: var(--ola-forma) 0 0 / var(--ola-w) 100% repeat-x; mask: var(--ola-forma) 0 0 / var(--ola-w) 100% repeat-x; animation: ola var(--ola-t) linear infinite; }
.ola--1 { --ola-w: 760px; --ola-alto: 100%; --ola-op: 0.16; --ola-t: 28s; animation-direction: reverse; }
.ola--2 { --ola-w: 580px; --ola-alto: 80%; --ola-op: 0.38; --ola-t: 20s; }
.ola--3 { --ola-w: 440px; --ola-alto: 58%; --ola-op: 1; --ola-t: 15s; }
@keyframes ola { to { transform: translateX(calc(-1 * var(--ola-w))); } }
.js .olas { transform: translateY(100%); transition: transform 1.4s var(--ease-out); }
.js .olas.is-in { transform: none; }
.foot__mast { padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-on-field) 30%, transparent); }
.foot__logo { width: auto; height: 88px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); padding-block: var(--space-xl); }
.foot__label { margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-on-field-muted); }
.foot address { font-style: normal; line-height: 1.6; }
.foot ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.foot ul a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; color: var(--color-on-field); text-decoration: none; white-space: nowrap; }
.foot ul a:hover { text-decoration: underline; }
.foot__legal { padding-top: var(--space-md); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-on-field) 30%, transparent); font-size: var(--text-sm); color: var(--color-on-field-muted); }

/* Their Instagram's ground: a hairline grid at 8%, built on the page's column pitch from the content edge.
   Columns alternate one and two pitches wide and rows one and one and a half, so squares sit among
   wide and tall rectangles; the grid fades out toward the edges of each band. Phones use 4 columns
   and tablets 6, so the cells stay large (about 90px and 120px). */
.textura { position: relative; isolation: isolate; container-type: inline-size; }
.textura::before {
  --pitch: calc((min(100cqw, var(--container)) - 2 * var(--gutter) + var(--gap-columns)) / var(--grid-cols, 12));
  --grid-x: calc(max(0px, (100cqw - var(--container)) / 2) + var(--gutter));
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
  background-size: calc(3 * var(--pitch)) 100%, calc(3 * var(--pitch)) 100%, 100% calc(2.5 * var(--pitch)), 100% calc(2.5 * var(--pitch));
  background-position: var(--grid-x) 0, calc(var(--grid-x) + var(--pitch)) 0, 0 calc(100% - 1px), 0 calc(100% - 1px - var(--pitch));
  -webkit-mask-image: radial-gradient(ellipse 85% 95% at 45% 50%, var(--color-ink) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 95% at 45% 50%, var(--color-ink) 45%, transparent 100%);
}

/* A thin black ring behind one word, up and to the left, as on their "Playa" post */
.ring { position: relative; display: inline-block; isolation: isolate; }
.ring::before { content: ""; position: absolute; z-index: -1; left: -1.1em; top: -1.5em; width: 2.4em; height: 2.4em; border: 1.25px solid var(--color-line); border-radius: 50%; pointer-events: none; }

/* "Disfrutá del mar" at headline size, turned on its side in its own last column beside the mosaic */
.mosaic-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap-columns); align-items: start; }
.mosaic-wrap > .mosaic { grid-column: 1; grid-row: 1; }
.vertical { grid-column: 2; grid-row: 1; margin: 0; writing-mode: vertical-rl; font: var(--display-weight) var(--text-display)/0.9 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); white-space: nowrap; }

/* Photographs framed like their posts: a light border all round */
.frame { padding: var(--space-sm); background: var(--color-frame); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.frame--grey { background: var(--color-frame-grey); }

/* Phones: the reviews one at a time, with a dot for each */
.rail-dots { display: none; justify-content: center; gap: var(--space-2xs); margin-top: var(--space-md); }
.rail-dot { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail-dot::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--color-muted); border-radius: 50%; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.rail-dot:hover::before { background: var(--color-paper-3); }
.rail-dot:active::before { background: var(--color-muted); }
.rail-dot[aria-current="true"]::before { background: var(--color-accent); border-color: var(--color-accent); }
.rail-dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -6px; }
.rail-dot:disabled { opacity: 0.55; cursor: not-allowed; }

/* On a phone the action floats at the bottom right */
.fab { display: none; }

/* The viewer: the mosaic's photographs one at a time, full screen on the night blue; a swipe, the arrows or the keys move between them */
html:has(.visor[open]) { overflow-y: hidden; }
html { scrollbar-gutter: stable; }
.visor { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-on-photo); overflow: hidden; }
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: visor-in var(--dur-long) var(--ease-out); }
/* the page stays behind, blurred and dimmed under the night blue */
.visor::backdrop { background: color-mix(in oklab, var(--color-scrim) 68%, transparent); -webkit-backdrop-filter: blur(16px) saturate(0.9); backdrop-filter: blur(16px) saturate(0.9); }
.visor[open]::backdrop { animation: visor-in var(--dur-long) var(--ease-out); }
.visor[open] .visor__track { animation: visor-rise var(--dur-long) var(--ease-out); }
.visor.is-closing, .visor.is-closing::backdrop { animation: visor-out var(--dur-short) var(--ease-in) forwards; }
.visor__top { display: flex; justify-content: flex-end; padding: var(--space-md) var(--gutter) 0; }
.visor__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.visor__track::-webkit-scrollbar { display: none; }
.visor__slide { display: grid; place-items: center; min-height: 0; padding: var(--space-md) var(--gutter); scroll-snap-align: center; scroll-snap-stop: always; opacity: 0.25; transition: opacity var(--dur-long) var(--ease-out); }
.visor__slide.is-current { opacity: 1; }
.visor__slide figure { display: grid; justify-items: center; gap: var(--space-sm); margin: 0; min-height: 0; }
.visor__slide picture { display: contents; }
.visor__slide img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); }
.visor__slide figcaption { font-size: var(--text-sm); font-weight: 500; text-align: center; }
.visor__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); padding: 0 var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom)); }
.visor__count { min-width: 5ch; margin: 0; font-size: var(--text-sm); text-align: center; font-variant-numeric: lining-nums tabular-nums; color: var(--color-on-photo); }
.visor__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid color-mix(in oklab, var(--color-on-photo) 45%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--color-on-photo); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.visor__btn:hover { background: color-mix(in oklab, var(--color-on-photo) 12%, transparent); border-color: var(--color-on-photo); }
.visor__btn:active { transform: translateY(1px); }
.visor__btn:focus-visible { outline: 2px solid var(--color-focus-on-field); outline-offset: 2px; }
.visor__btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
@keyframes visor-in { from { opacity: 0; } }
@keyframes visor-rise { from { transform: translateY(var(--space-sm)) scale(0.99); } }
@keyframes visor-out { to { opacity: 0; } }

@media (max-width: 75rem) {
  .rail { grid-auto-columns: calc((100% - var(--gap-columns)) / 2); }
}
@media (max-width: 72rem) {
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
}
@media (max-width: 60rem) {
  :root { --chrome-h: 6.25rem; }
  .textura::before { --grid-cols: 6; }
  .bar__cta { display: none; }
  .bar__inner { min-height: 64px; }
  .logo img { height: 48px; }
  /* the photo runs taller than the screen, anchored at its foot, so the horizon sits above the title */
  .hero__img--casa { object-position: 50% 50%; }
  /* .hero__photo in front so it outweighs the slot's own fill rule in base.css */
  .hero__photo .hero__img--mar { top: auto; height: 147%; object-position: 38% 50%; }
  /* on a phone each photo keeps its caption under it, in the page's own ink */
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: row dense; row-gap: var(--space-md); }
  .tile--lead, .tile--lead-end { grid-column: 1 / -1; grid-row: auto; }
  .tile--tall, .tile--wide { grid-column: auto; grid-row: auto; }
  .tile__photo { position: relative; inset: auto; aspect-ratio: 1 / 1; }
  .tile--lead .tile__photo, .tile--lead-end .tile__photo { aspect-ratio: 4 / 3; }
  /* captions are a desktop detail; on phones the photographs speak alone (alt text stays) */
  .tile figcaption, .vertical { display: none; }
  .servicios__head, .servicios__well { grid-column: 1 / -1; }
  .rail { grid-auto-columns: 100%; }
  .rail-nav { display: none; }
  .rail-dots:not([hidden]) { display: flex; }
  .donde__head h2, .donde__head .facts, .map, .fachada { grid-column: 1 / -1; }
  .fachada { margin-top: var(--space-xl); }
  .fachada__photo { aspect-ratio: 4 / 5; }
  .reservar__head, .planner { grid-column: 1 / -1; grid-row: auto; }
  .plan__line { grid-column: 1 / -1; max-width: none; padding-bottom: 0; }
  .plan__photo--a { grid-column: 1 / 7; }
  .plan__photo--b { grid-column: 7 / -1; margin-top: var(--space-2xl); }
  .mosaic-wrap { display: block; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banda__fig { grid-template-columns: minmax(0, 1fr); }
  .banda__photo:first-child { display: none; }
  .banda__photo { height: auto; aspect-ratio: 4 / 5; }
  .js .fab { display: grid; place-items: center; position: fixed; right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); width: 56px; height: 56px; border: 2px solid var(--color-paper); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); opacity: 0; transform: translateY(var(--space-md)); visibility: hidden; transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in), background-color var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
  .js .fab.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), visibility 0s linear 0s; }
  .js .fab.is-on:active { transform: translateY(1px); }
  .fab:hover { background: var(--color-accent-2); }
  .fab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .fab .i { width: 24px; height: 24px; }
  /* room under the footer's last line for the floating button */
  .js .foot { padding-bottom: calc(var(--space-xl) + var(--space-2xl) + var(--space-lg)); }
}
@media (max-width: 40rem) {
  :root { --olas-h: 44px; }
  .ola--1 { --ola-w: 420px; }
  .ola--2 { --ola-w: 330px; }
  .ola--3 { --ola-w: 260px; }
  .textura::before { --grid-cols: 4; }
  .logo img { height: 44px; }
  .hero h1 { max-width: none; }
  .hero__actions { width: 100%; }
  .hero .btn, .planner__submit { width: 100%; padding-inline: var(--space-sm); font-size: var(--text-sm); }
  .servicios__well { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); padding: var(--space-lg); }
  .facts > div { grid-template-columns: 7rem minmax(0, 1fr); }
  .planner__dates { grid-template-columns: minmax(0, 1fr); }
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .foot__logo { height: 72px; }
  .ring::before { left: -0.4em; top: -1.3em; width: 2.2em; height: 2.2em; }
}
@media (max-width: 22.5rem) {
  .hero .btn .i, .planner__submit .i { display: none; }
  .hero .btn, .planner__submit { font-size: var(--text-xs); }
}
@media (pointer: coarse) {
  .foot ul a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar, .js .fab, .js .fab.is-on, .rail-dot::before, .tile__photo::before, .visor__slide { transition: none; }
  .js .fab.is-on:active { transform: none; }
  .visor[open] .visor__track, .ola, .hero__img--casa { animation: none; }
  .js .olas { transform: none; transition: none; }
  .btn, .stepper__btn, .rail-nav__btn, .visor__btn { transition: background-color var(--dur-short) linear; }
  .btn:active, .stepper__btn:active, .rail-nav__btn:active, .visor__btn:active { transform: none; }
}