/* CARIBASOL V2-mix — SHELL (giro 13, D-127): the ONE header, phone menu and footer of every page.
   Same markup on every page (between the SHELL:HEADER / SHELL:FOOTER markers; tools/check-shell.py compares them), same CSS (this file),
   same JS (js/shell.js). giro 27 (client feedback Alan / Nick): brand font Caribasol Sans (= Linux Biolinum), three colours (blue of the logo · white · orange of the sun),
   the Caribasol blue header (utility band + sticky row, the Hero starts BELOW it — no transparent header over the picture any more), a narrower, more compact column.
   ONE page container for the whole site (giro 13b, D-133): --gx below (§0). Sections, header and footer all read --gx, nothing else defines a page margin. */

/* ======================= 0 · the page container — the ONLY place a page margin is defined ======================= */
/* --gx = the side margin of the page: sections, header content and footer content all start at --gx and end at 100% - --gx.
   A percentage inside a custom property is resolved where the property is USED: every user of --gx sits in a box as wide as the page (sections, footer, header row).
   ---- giro 27 (points 5 + 12): the WIDTH of the content column — change it here, nowhere else ----
   --col-1440 = the column at a 1440 px window · --col-1920 = the column at 1920 px and wider (the cap) · in between it grows in a straight line (--col-k = (col-1920 − col-1440) / 480 px).
   Below 1440 the column follows the same line, never closer than --gx-min to the window edge. Phones (< 1024): the 16 px margin, unchanged.
   giro 25: 1254 px at 1440, 1482 at 1920 · giro 27: 1140 / 1240 (the client found the site too wide).
   ---- the size of the interface (giro 25, D-246) ----
   --ui = every size of the site is written calc(N px * var(--ui)) (tools/scale-giro25.py). Minimums that win over it: body text 16 px on phones / tablets (--fs-body-min), labels 12 px, tap targets 44 px.
   --sp = giro 27 (point 12): the vertical rhythm — section paddings and the gaps of card grids are written calc(N px * var(--ui) * var(--sp)); .82 = 18 % tighter than giro 25. */
:root { --ui: .95; --sp: .82; --fs-body-min: 16px; --tap-hit: 44px;   /* --tap-hit: the minimum hit area — never scaled */
  --col-1440: 1140px; --col-1920: 1240px; --col-k: .2083; --gx-min: 32px;
  --gx: 16px; }
@media (min-width: 1024px) { :root { --fs-body-min: 0px;   /* desktop: the body text may follow --ui (16 → 15.2 px) */
  --colw: min(calc(100vw - 2 * var(--gx-min)), calc(var(--col-1440) + (100vw - 1440px) * var(--col-k)), var(--col-1920));
  --gx: calc((100% - var(--colw)) / 2); } }

/* ======================= 0a · brand tokens (giro 27, point 2): three colours — the blue of the logo, white, the orange of the sun ======================= */
/* --c-blue = #0D53A1 (base given by the client brief, TO CONFIRM with the client; the logo files measure #004B9C–#004EA2) · --c-deep = the same blue, darker, for the utility band and dark fields ·
   --c-sun = #F4840C, the sun of the logo, for accents only (dots, rules, small marks) · --c-sun-btn = the sun darkened for the main buttons: white on #F4840C is 2.58:1 (fails AA), white on #C2550A is 4.62:1.
   Text neutrals are tints of the blue (ink, muted, lines) — not extra colours. Contrast (WCAG): white / blue 7.58 · white / deep 11.27 · #CFE0F5 / deep 8.39 · #CFE0F5 / blue 5.65 · muted / page 6.61 · blue / page 7.24 · ink / page 15.17 · white / sun-btn 4.62. */
:root {
  --c-blue: #0D53A1; --c-blue-h: #0A458A; --c-blue-a: #083A75; --c-deep: #083A73; --c-blue-t: #E8F1FB; --c-blue-t2: #F3F8FD; --c-on-blue: #CFE0F5;
  --c-sun: #F4840C; --c-sun-btn: #C2550A; --c-sun-btn-h: #A84808;
  --c-cta: #0D53A1; --c-cta-h: #0A4589;   /* 27.10.2026 (Daniel: the orange does not convince): the main actions and the labels in the logo blue; the sun stays as a small accent (dots, rules, the holiday umbrella) */
  --c-ink: #0E2240; --c-muted: #4A5B73; --c-line: #D7E2EE; --c-page: #F7FAFD;
  --f-brand: 'Caribasol Sans', 'Caribasol Fallback', system-ui, sans-serif;   /* titles, menu, buttons (point 1) */
  --f-text: Inter, 'Inter Fallback', system-ui, sans-serif;                    /* running text, data, labels (point 1: more legible than Caribasol Sans Regular at 14–16 px) */
  --f-title: var(--f-brand);
}
/* titles, menu and buttons in Caribasol Sans Bold (the family has 400 and 700 only: 500 / 600 would fall back to 400 or be synthesised) */
h1, h2, h3 { font-family: var(--f-brand); }
:is(h1, h2, h3):not(.ft__h) { font-weight: 700 !important; letter-spacing: -.005em !important; }
:is(.btn, .btn-primary, .btn-light, .cs-go, .cs-sheet__go, .ct-btn, .ct-send, .bk__go, .hn__go, .nf__btn, .cta-btn, .ab-cta a, .sl-cta a) { font-family: var(--f-brand) !important; font-weight: 700 !important; letter-spacing: .005em !important; }

/* WhatsApp (27.10.2026): the official look — WhatsApp green #25D366, white glyph and white text, WhatsApp's own UI font stack (web.whatsapp.com).
   Accepted trade-off: white on #25D366 is 1.98:1 (below WCAG AA); the text is set bold and never smaller than 15 px. Hover / pressed: the darker greens of the WhatsApp palette.
   --wa-ring: the dark teal of the WhatsApp palette, for the focus ring on light surfaces (white on the blues). */
:root { --wa-green: #25D366; --wa-green-h: #1EBE5D; --wa-green-a: #128C7E; --wa-text: #fff; --wa-ring: #075E54;
  --wa-font: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; }

/* ======================= 0b · surfaces (giro 23 → giro 27) ======================= */
/* giro 23 (D-212) had a TEMPORARY Metal · Gold choice of the "pearl" surfaces (CONSEGNA #35b). giro 27 (point 2): no gold, no silver — the surfaces become white with a light-blue shade,
   the same blue as the logo. The stops keep their names (every surface of the site reads them). The switch, html[data-tone], is gone. */
:root {
  --tl-1: #ffffff; --tl-2: #f5f9fe; --tl-3: #e9f1fa;
  --cr-1: #ffffff; --cr-2: #f5f9fe; --cr-3: #e9f1fa;
  --pn-1: #ffffff; --pn-2: #f6f9fd; --pn-3: #ebf2fa;
  --bl-1: #ffffff; --bl-2: #f5f9fe; --bl-3: #e9f1fa;
  --pp-1: #ffffff; --pp-2: #f7fafd; --pp-3: #edf3fa;
  --sb-0: #eef4fb;
}

/* ======================= 1 · header (giro 27, point 4 + sticky alignment) ======================= */
/* 27.10.2026 (client feedback): ONE row — the utility band is gone (EN · ES now in the row, caribasol.com in the footer and the phone menu, the office phone in the footer and the phone menu).
   Row (.hdr-wrap, sticky): blue, white logo, menu, EN · ES, WhatsApp, always full width. Logo, menu and WhatsApp sit at --gx + --hdr-pad.
   Home (body.shell-hero): the row lies over the Hero, TRANSPARENT (a soft blue wash from the top keeps it legible on the video) and turns blue as soon as the page
   moves (.floating, js/shell.js: scrolled by more than 4 px), a 250 ms fade of the background only. Other pages: blue at once.
   Phones (< 1024): Home: fixed over the Hero, other pages: in the flow (D-062, as before). */
/* 27.10.2026: the space of the scrollbar is always kept (pages with and without a scrollbar have the same width: nothing moves between pages) */
html { scrollbar-gutter: stable; }
:root {
  --row-h: calc(80px * var(--ui)); --hdr-pad: 0px;   /* 27.10.2026: no extra inset — logo and WhatsApp sit on the content column (--gx), like every section below */
  --logo-h: calc(54px * var(--ui));                     /* official logo (caribasolproperty.com), sun + two lines, 3.93 : 1 → 202 px wide at --ui .95 */
  --shell-h: 0px; --hdr-h: 0px;                         /* giro 27: the header is in the flow now — pages no longer reserve room for it (contact / pages / results / detail read these) */
}
@media (min-width: 1024px) { :root { --sticky-top: var(--row-h); } }
@media (max-width: 1023px) { :root { --row-h: calc(64px * var(--ui)); --hdr-pad: 0px; --logo-h: calc(40px * var(--ui)); --sticky-top: var(--row-h); } }   /* sticky bars start under the sticky header */

.hdr-wrap { position: sticky; top: 0; z-index: 20; height: var(--row-h); }
.hdr { position: relative; height: var(--row-h); color: #fff; }
.hdr__pill { position: absolute; inset: 0; pointer-events: none; background: var(--c-blue); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; }   /* the full-width blue background */
/* the Home: over the Hero, transparent until the page moves */
body.shell-hero .hdr-wrap { position: fixed; top: 0; left: 0; right: 0; }
body.shell-hero .hdr__pill { transition: background-color .25s ease, box-shadow .25s ease; }
body.shell-hero .hdr:not(.floating) .hdr__pill { background-color: transparent; background-image: linear-gradient(180deg, rgba(6, 43, 92, .5) 0%, rgba(6, 43, 92, .22) 60%, rgba(6, 43, 92, 0) 100%); box-shadow: none; }
body.shell-hero .hdr:not(.floating) { text-shadow: 0 1px 8px rgba(5, 26, 54, .35); }
body.shell-hero .hdr.floating .hdr__pill { box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 18px rgba(8, 30, 62, .18); }
@media (prefers-reduced-motion: reduce) { body.shell-hero .hdr__pill { transition: none; } }

/* language (27.10.2026): a subtle dropdown with flags — <details class="lsel">: the summary shows the current language (flag + code; html[lang] picks which), the list
   opens under it on white. Languages without pages yet are review only (.rv) and marked "Coming soon". js/shell.js closes it on Esc / a click outside. */
.lsel { position: relative; margin-right: calc(6px * var(--ui)); }
.lsel__btn { position: relative; list-style: none; display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); height: calc(36px * var(--ui)); padding: 0 calc(10px * var(--ui)) 0 calc(11px * var(--ui));
  border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none; font-family: var(--f-text); font-size: max(14px, calc(14px * var(--ui))); font-weight: 600; letter-spacing: .04em; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: background-color .15s ease, box-shadow .15s ease; }
.lsel__btn::-webkit-details-marker { display: none; }
.lsel__btn::after { content: ''; position: absolute; inset: min(0px, calc((100% - var(--tap-hit)) / 2)) 0; }   /* 44 px hit area */
@media (hover: hover) and (pointer: fine) { .lsel__btn:hover { background: rgba(255, 255, 255, .12); } }
.lsel[open] .lsel__btn { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.lsel__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lsel__cur { display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); }
html[lang="es"] .lsel__cur[data-for="en"], html:not([lang="es"]) .lsel__cur[data-for="es"] { display: none; }
.lsel__caret { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: transform .2s ease; }
.lsel[open] .lsel__caret { transform: rotate(180deg); }
.flag { display: block; flex: none; width: calc(21px * var(--ui)); height: calc(15px * var(--ui)); border-radius: 3px; box-shadow: 0 0 0 1px rgba(14, 34, 64, .14); }
.lsel__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: calc(230px * var(--ui)); width: max-content; margin: 0; padding: calc(6px * var(--ui)); list-style: none; background: #fff;
  border-radius: calc(14px * var(--ui)); box-shadow: 0 2px 6px rgba(8, 30, 62, .12), 0 16px 40px rgba(8, 30, 62, .24); text-shadow: none; animation: lsel-in .16s ease; }
@keyframes lsel-in { from { opacity: 0; transform: translateY(-4px); } }
.lsel__menu :is(a, .lsel__soon) { display: flex; align-items: center; gap: calc(11px * var(--ui)); min-height: calc(44px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(9px * var(--ui));
  font-family: var(--f-text); font-size: max(15px, calc(15px * var(--ui))); font-weight: 500; color: #0E2240 !important; text-decoration: none !important; }
.lsel__menu a[aria-current] { font-weight: 700; background: #EEF3F9; }
.lsel__menu a[aria-current]::after { content: ''; margin-left: auto; width: 5px; height: 10px; border: solid var(--c-blue); border-width: 0 2px 2px 0; transform: translate(-3px, -2px) rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .lsel__menu a:not([aria-current]):hover { background: #F3F6FA; } }
.lsel__menu a:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
.lsel__soon { opacity: .55; cursor: default; }
:is(.lsel__soon, .mnav__langs__soon) small { margin-left: auto; padding-left: 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lsel__menu { animation: none; } .lsel__caret { transition: none; } }
@media (max-width: 1023px) { .lsel { margin-right: calc(2px * var(--ui)); } .lsel__btn { height: calc(34px * var(--ui)); padding: 0 calc(8px * var(--ui)) 0 calc(9px * var(--ui)); gap: calc(5px * var(--ui)); } }
.hdr__in { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 calc(var(--gx) + var(--hdr-pad)); }
/* .instant = no transition for a frame in which the state must flip at once (js/shell.js: a scroll position restored on Back / Reload) */
.hdr.instant, .hdr.instant * { transition: none !important; }

/* logo: the official logo of caribasolproperty.com (wp-content/uploads/2019/07/caribasol-updated-logo.png), white, trimmed to its drawing — img/logo/caribasol-logo-white-*.png; never redrawn, never recoloured */
.brand { display: flex; align-items: center; color: #fff; text-decoration: none; flex: none; border-radius: calc(4px * var(--ui)); }
.brand:hover { color: #fff; }
.brand__logo { display: block; height: var(--logo-h); width: auto; }
.brand:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* menu (D-080 + Contact, giro 27): Buy · Sell · Areas · Journal · Contact — Caribasol Sans Bold, sentence case, no tracking; centred in the row; D-085 hover = a 1 px rule drawn from the left; the current page keeps the rule */
.hdr nav { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: max-content; margin: 0 auto; align-items: center; display: flex; gap: var(--nav-gap, calc(34px * var(--ui)));
  font-family: var(--f-brand); font-size: calc(18px * var(--ui)); font-weight: 700; letter-spacing: .005em; color: inherit; white-space: nowrap; }
.hdr nav :is(a, .mega__btn) { position: relative; padding: calc(8px * var(--ui)) 0; color: inherit; text-decoration: none; }
/* giro 19 (D-187): the header does not move when the language changes — each item reserves the width of its LONGEST label (data-w: an invisible copy in the same grid cell) */
.hdr nav :is(a, .mega__btn) { display: inline-grid; justify-items: center; }
.hdr nav :is(a, .mega__btn) > span, .hdr nav :is(a, .mega__btn)[data-w]::before { grid-area: 1 / 1; }
.hdr nav :is(a, .mega__btn)[data-w]::before { content: attr(data-w); visibility: hidden; pointer-events: none; }
.hdr nav :is(a, .mega__btn) > span { position: relative; }
.hdr nav :is(a, .mega__btn) > span::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-5px * var(--ui)); height: 2px; border-radius: 1px; background: var(--c-sun); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .36s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .hdr nav :is(a, .mega__btn):hover > span::after { transform: scaleX(1); transform-origin: 0 50%; } }
.hdr nav :is(a, .mega__btn):focus-visible > span::after, .hdr nav :is(a, .mega__btn)[aria-current] > span::after { transform: scaleX(1); transform-origin: 0 50%; }
.hdr nav :is(a, .mega__btn):focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
@media (min-width: 1024px) and (max-width: 1199px) { :root { --nav-gap: calc(22px * var(--ui)); } }

.hdr .right { margin-left: auto; display: flex; gap: calc(12px * var(--ui)); align-items: center; color: inherit; position: relative; }
.hdr .right a { color: inherit; text-decoration: none; }
/* WhatsApp (point 4: "a measured size", the client found the legacy one right): an outlined key, icon + word on desktop, the icon alone on phones */
.hdr-wa { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); height: calc(40px * var(--ui)); padding: 0 calc(15px * var(--ui)) 0 calc(12px * var(--ui)); border-radius: calc(999px * var(--ui));
  border: 1.5px solid rgba(255, 255, 255, .7); font-family: var(--f-brand); font-weight: 700; font-size: calc(17px * var(--ui)); letter-spacing: .005em; transition: background-color .15s ease, border-color .15s ease; }
.hdr-wa svg { width: calc(21px * var(--ui)); height: calc(21px * var(--ui)); flex: none; }
@media (hover: hover) and (pointer: fine) { .hdr-wa:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } }
.hdr-wa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.menu-btn { display: none; width: var(--tap-hit); height: var(--tap-hit); margin-right: calc(-10px * var(--ui)); border: 0; background: transparent; color: inherit; align-items: center; justify-content: center; cursor: pointer; border-radius: calc(10px * var(--ui)); }
.menu-btn svg { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); }
.menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* social keys (D-094): on hover / keyboard focus the network's own colour fills the key as a circle from the lower-left corner; the icon turns white. Reduced motion: fade */
.soc { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); border-radius: calc(10px * var(--ui)); overflow: hidden; color: inherit; transition: color .3s cubic-bezier(.23, 1, .32, 1); }
.soc svg { display: block; width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.soc::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: circle(0% at 0% 100%); transition: clip-path .55s cubic-bezier(.23, 1, .32, 1); }
.soc--ig::before { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.soc--fb::before { background: #1877f2; }
.soc:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; color: #fff; }
.soc:focus-visible::before { clip-path: circle(142% at 0% 100%); }
@media (hover: hover) and (pointer: fine) { .soc:hover::before { clip-path: circle(142% at 0% 100%); } .soc:hover, .mnav__social .soc:hover { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .soc::before { clip-path: none; opacity: 0; transition: opacity .25s ease; } .soc:focus-visible::before { clip-path: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) { .soc:hover::before { clip-path: none; opacity: 1; } }

/* favourites counter (D-096): white on the blue row. Base look: css/prefs.css */
.hdr .right > .favc { color: #fff; }
/* 1024–1199 with the counter shown: no room for the absolutely centred menu → it joins the flow between logo and right group */
@media (min-width: 1024px) and (max-width: 1199px) { .hdr:has(.favc:not([hidden])) nav { position: static; width: auto; margin: 0 auto; } .hdr:has(.favc:not([hidden])) .right { margin-left: 0; } }

/* phones / tablets (< 1024): logo · WhatsApp (icon) · menu */
@media (max-width: 1023px) {
  .hdr nav { display: none; }
  .hdr .right { gap: calc(2px * var(--ui)); }
  .menu-btn { display: flex; }
  .hdr-wa { width: var(--tap-hit); height: var(--tap-hit); padding: 0; justify-content: center; border: 0; }
  .hdr-wa svg { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); }
  .hdr-wa__t { display: none; }
  .hdr .right > a.favc { display: inline-flex; }
  /* 27.10.2026: the header sticks to the top on phones too, on every page (was: in the flow, scrolling away, except on the Home — D-062) */
}

/* ======================= 2 · phone menu (D-058, D-083; D-080 rows + Contact) — giro 27: blue, white text ======================= */
.mnav { position: fixed; inset: 0; z-index: 90; background: var(--c-blue); color: #fff; display: flex; flex-direction: column; padding: 0 calc(16px * var(--ui)) calc(21px * var(--ui)); overflow-y: auto;
  font-family: var(--f-text); opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .28s ease, transform .28s ease; }
.mnav[hidden] { display: none; }
.mnav.open { opacity: 1; transform: none; }
.mnav a { text-decoration: none; color: inherit; }
.mnav__head { height: var(--row-h); flex: none; display: flex; align-items: center; justify-content: space-between; }
.mnav__head .brand__logo { height: var(--logo-h); }
.mnav__close { width: var(--tap-hit); height: var(--tap-hit); margin-right: calc(-6px * var(--ui)); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mnav__close:focus-visible, .mnav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mnav__rows { display: flex; flex-direction: column; margin-top: calc(6px * var(--ui)); }
.mnav__rows a { font-family: var(--f-brand); min-height: max(48px, calc(50px * var(--ui))); display: flex; align-items: center; font-size: calc(23px * var(--ui)); font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.mnav__rows a[aria-current] { box-shadow: inset 3px 0 0 var(--c-sun); padding-left: calc(12px * var(--ui)); }
.mnav__sec { margin-top: calc(21px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.5; }
.mnav__lbl { display: flex; align-items: center; gap: calc(8px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-blue); margin-bottom: calc(6px * var(--ui)); }
.mnav__contact a[href] { display: flex; align-items: center; min-height: var(--tap-hit); font-size: max(var(--fs-body-min), calc(17px * var(--ui))); font-weight: 600; }
.mnav__contact .addr { color: var(--c-on-blue); padding: calc(5px * var(--ui)) 0 0; }
.mnav__lang { display: flex; gap: calc(6px * var(--ui)); flex-wrap: wrap; }
.mnav__lang :is(a, span) { min-width: var(--tap-hit); height: var(--tap-hit); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(10px * var(--ui)); font-size: max(15px, calc(15px * var(--ui))); font-weight: 600;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.mnav__lang :is(a, span)[aria-current] { background: #fff; color: var(--c-blue); box-shadow: none; font-weight: 700; }
.mnav__bridge { display: flex; align-items: center; gap: .35em; min-height: var(--tap-hit); margin-top: calc(18px * var(--ui)); color: #fff !important; font-size: max(15px, calc(16px * var(--ui))); font-weight: 600; }   /* caribasol.com */
.mnav__social { display: flex; gap: calc(6px * var(--ui)); margin-top: auto; padding-top: calc(21px * var(--ui)); }
.mnav__social .soc { width: var(--tap-hit); height: var(--tap-hit); background: rgba(255, 255, 255, .12); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mnav { transition: none; }
  .hdr nav a > span::after, .soc { transition: none !important; }
}

/* ======================= 3 · footer (D-118 → giro 27: the blue footer of the client files, logo in white) ======================= */
.ft { --ft-ink: var(--c-on-blue); --ft-line: rgba(207, 224, 245, .22); background: var(--c-blue); color: #fff; padding: calc(60px * var(--ui) * var(--sp)) var(--gx) calc(27px * var(--ui));
  font-family: var(--f-text); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; }
.ft a { color: #fff; text-decoration: none; }
.ft a[href]:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ft a:focus-visible, .ft .cookie-settings:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: calc(3px * var(--ui)); }
.ft__top { display: flex; align-items: center; justify-content: space-between; gap: calc(24px * var(--ui)); padding-bottom: calc(36px * var(--ui) * var(--sp)); border-bottom: 1px solid var(--ft-line); }
.ft__brand { display: inline-block; border-radius: calc(5px * var(--ui)); }
.ft__brand img { display: block; height: calc(66px * var(--ui)); width: auto; }   /* img/logo/caribasol-logo-white-*.png = the official logo, white, trimmed to its drawing */
.ft__line { margin: calc(14px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--ft-ink); }
.ft__since { display: block; width: auto; height: calc(84px * var(--ui)); flex: none; }   /* the client "since 1986" badge, in white (img/since-1986-white.webp, year TO VERIFY) */
.ft__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.2fr);   /* 27.10.2026 (2): brand + social · language · rentals | Explore | Office */
     /* 27.10.2026: Explore · Office · social, language, rentals (no Buy column) */
   gap: calc(36px * var(--ui)); padding: calc(36px * var(--ui) * var(--sp)) 0 calc(42px * var(--ui) * var(--sp)); }
.ft .ft__h { margin: 0 0 calc(12px * var(--ui)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ui)) calc(8px * var(--ui)); font: 700 calc(17px * var(--ui))/1.3 var(--f-brand) !important;
  letter-spacing: .01em; color: #fff; }
.ft .ft__h::before { content: ''; width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-radius: 50%; background: var(--c-sun); flex: none; }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8px * var(--ui)); }
.ft__col li a { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); }
.ft__office address { font-style: normal; color: var(--ft-ink); }
.ft__rv { margin-top: calc(6px * var(--ui)); white-space: normal !important; height: auto !important; max-width: 100%; line-height: 1.35; }   /* the review chip of the address wraps (ES at 390 widened the footer by 58 px) */
.ft__cols > * { min-width: 0; }
.ft__tel { display: inline-flex; align-items: center; min-height: calc(24px * var(--ui)); margin-top: calc(5px * var(--ui)); font-weight: 600; }
.ft__office .ft__tel + .ft__tel { margin-left: calc(14px * var(--ui)); }
.ft__office .ft__tel.ft__mail { display: flex; margin-left: 0; overflow-wrap: anywhere; }   /* giro 15 (D-141): the shared e-mail, own line */
.ft__langs { margin: calc(8px * var(--ui)) 0 0; font-size: max(12px, calc(13px * var(--ui))); color: var(--ft-ink); max-width: 30ch; }
.ft__social { display: flex; gap: calc(6px * var(--ui)); margin-bottom: calc(22px * var(--ui)); }
.ft .soc { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.ft .soc:focus-visible { outline-color: #fff; }
.ft__lang { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)); }
.ft__lang a { text-decoration: none; }
.ft__lang :is(a, span) { min-width: calc(34px * var(--ui)); height: calc(30px * var(--ui)); padding: 0 calc(6px * var(--ui)); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(8px * var(--ui));
  font-size: max(13px, calc(14px * var(--ui))); font-weight: 600; color: #fff; box-shadow: inset 0 0 0 1px var(--ft-line); }
.ft__lang :is(a, span)[aria-current] { background: #fff; color: var(--c-blue); box-shadow: none; }
/* the rentals site (27.10.2026, from the header): "Caribasol holiday rentals →" under the languages */
.ft__rentals { display: inline-flex; align-items: center; gap: .35em; min-height: var(--tap-hit); margin-top: calc(18px * var(--ui)); padding: 0 calc(16px * var(--ui)); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ft-line); font-weight: 600; font-size: max(15px, calc(15px * var(--ui))); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .ft .ft__rentals:hover { background: rgba(255, 255, 255, .1); text-decoration: none; } }
.ft__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(9px * var(--ui)) calc(24px * var(--ui)); padding-top: calc(18px * var(--ui)); border-top: 1px solid var(--ft-line);
  font-size: max(12px, calc(13px * var(--ui))); color: var(--ft-ink); }
.ft__legal { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)) calc(18px * var(--ui)); align-items: center; margin-left: auto; justify-content: flex-end; }   /* 27.10.2026: on the right */
.ft__legal a { color: var(--ft-ink); }
.ft__legal .cookie-settings { color: var(--ft-ink); font-size: max(12px, calc(13px * var(--ui))); }
.ft__base > span { position: relative; padding-left: calc(46px * var(--ui)); }
.ft__base > span::before { content: ''; position: absolute; left: 0; top: 50%; width: calc(34px * var(--ui)); height: 2px; margin-top: -1px; background: var(--c-sun); }   /* the warm rule (D-036) — the sun, no gold */
@media (max-width: 1023px) { .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(32px * var(--ui)) calc(30px * var(--ui)); } }
@media (max-width: 767px) {
  .ft { padding: calc(42px * var(--ui)) var(--gx) calc(24px * var(--ui)); }
  .ft__top { flex-direction: column; align-items: flex-start; gap: calc(18px * var(--ui)); padding-bottom: calc(26px * var(--ui)); }
  .ft__brand img { height: calc(52px * var(--ui)); }
  .ft__since { height: calc(66px * var(--ui)); }
  .ft__cols { grid-template-columns: 1fr; gap: calc(26px * var(--ui)); padding: calc(26px * var(--ui)) 0 calc(30px * var(--ui)); }
  .ft__col li a { display: inline-flex; align-items: center; min-height: calc(33px * var(--ui)); }
  .ft__col ul { gap: 0; }
  .ft__tel { min-height: calc(33px * var(--ui)); }
  .ft__base { flex-direction: column; align-items: flex-start; }
  .ft__legal a, .ft__legal .cookie-settings { min-height: calc(33px * var(--ui)); display: inline-flex; align-items: center; }
}

/* ======================= 4 · two versions of the site: NORMAL and REVIEW (giro 15, D-140) ======================= */
/* html.review (set before first paint by the head script, kept by js/shell.js) = the REVIEW version: review chips ("Temp", "To verify", "Review needed", "Demo"), banners, source
   notes and the [TESTO …] / [DATO MANCANTE …] placeholders are visible. Without it = the NORMAL version: all of those are hidden; where a hidden placeholder would leave a hole the
   page carries a neutral, honest text ("Information coming soon"), never an invented fact. Markup: .rv = review only · .nm = normal only · .ph-txt wraps a placeholder (.rv) + its neutral text (.nm).
   PROVISIONAL (D-140 a, b — to decide with the client and Daniel, CONSEGNA.md part 1): the class list of review aids below, and data-hold (articles kept out of the normal version). */
html:not(.review):not(.show-aids) :is(.rv, .chip-rv, .rel-note, .ar-note, .jr-ph-note, .src, .review-note, .ct-note, .art-status, .intro__note) { display: none !important; }
html.review .nm { display: none !important; }
/* giro 24b (D-235, D-238): Normal hides the About team box and the guide steps that have no text yet; Review shows them with their chip */
html:not(.review):not(.show-aids) :is(.ab-team, .gd-step:has(.ph-txt)) { display: none !important; }
html:not(.review):not(.show-held) [data-hold] { display: none !important; }
html:not(.review) [data-nonlocal] { display: none !important; }                                     /* giro 15b (D-153): the Journal is local only — stories not about the Costa del Sol / the zones of the office (Ski in Sierra Nevada) are out of the index, the Home and the "more stories" in the NORMAL version; REVIEW shows them with the chip "Non locale" */
html:not(.review) .pg-sec:has(> .jr-list):not(:has(.jr-card:not([data-hold]):not([data-nonlocal]))) { display: none; }   /* "More stories" with nothing left to show: no heading over an empty list */
@media (min-width: 1280px) { html.review .jr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* Home, REVIEW: four stories in one row (the fourth is the non-local one) */                       /* 8b: articles with 2022 figures and taxes, out of the Journal index and the Home until reviewed */
html:not(.review) .tile--ph { display: none; }                                                   /* tiles that hold only a placeholder: no hole, no empty box */
html:not(.review) .pg-sec:has(> .tiles > .tile--ph):not(:has(> .tiles > .tile:not(.tile--ph))) { display: none; }
html:not(.review) .jr-grid, html:not(.review) .jr-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(320px * var(--ui))), 1fr)); }   /* fewer cards: the rest fill the row, no empty column */

html:not(.review) .ph-txt { padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; color: var(--muted, #4A5B73); }   /* the neutral text is plain text, not a dashed placeholder box */

/* ======================= 5 · tap floor (giro 15b, D-146): after the 25 % reduction every control still has a 44 × 44 px hit area on phones and touch screens ======================= */
/* Text and labels have their own floors (16 / 12 px, tools/scale-giro15b.py); on a phone or a touch screen the controls below never get smaller than 44 px, whatever the scale did to their padding and height.
   Inline links inside running text are exempt (WCAG 2.5.8); a card is one big link (css/shared.css §2b). */
@media (max-width: 1023px), (pointer: coarse) {
  .hdr .brand, .menu-btn, .mnav__close, .soc, .ft .soc, .fav, .lc__fav, .gal__fav, .rail-btn, .favc,
  .ft__col li a, .ft__tel, .ft__legal a, .ft__legal .cookie-settings, .cookie-settings, .mnav__contact a[href],
  .ct-btn, .ct-send, .btn, .btn-light, .btn-primary, .btn--filters, .nl-field, .fld input:not([type=checkbox]):not([type=radio]), .fld select, select, summary, label.check,
  .chips label, .chip, .acc__btn, .sl-links a, .zn-others a, .pc button, .art-share .ct-btn { min-height: max(44px, calc(44px * var(--ui))) !important; }
  .menu-btn, .mnav__close, .soc, .ft .soc, .fav, .lc__fav, .gal__fav, .rail-btn, .favc, .ft__col li a, .ft__legal a, .cookie-settings, .btn, .ct-btn, .ct-send, select { min-width: max(44px, calc(44px * var(--ui))) !important; }
  .ft__tel, .ft__col li a, .ft__legal a, .cookie-settings { display: inline-flex; align-items: center; }
  .ft__lang a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-hit); min-width: var(--tap-hit); }   /* giro 25: the footer EN · ES were 27 px tall (before the scale too) */
  .ft__tel.ft__mail { display: flex; }
  /* standalone text links (not inside a sentence): arrows under section titles, breadcrumb, back link, telephone, landing links */
  .sel-head > a, .jr-head > a, .similar__head > a, .surf-cr > a, [data-screen-label="The agency"] a, .browse__links > a, .kicker > a, .crumbs a, a[href^="tel:"] { display: inline-flex; align-items: center; min-height: max(44px, calc(44px * var(--ui))) !important; min-width: max(44px, calc(44px * var(--ui))); }
}

/* giro 18 (D-179): note on /es/ pages whose prose is still English */
.i18n-note { margin: 0 0 calc(12px * var(--ui)); font-size: max(12px, calc(13px * var(--ui))); line-height: 1.4; color: #4A5B73; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ui)) calc(8px * var(--ui)); }
.i18n-note > span:first-child { font-style: italic; }

/* ======================= 6 · WhatsApp (27.10.2026) — every WhatsApp control of the site, one look: the official green pill, white glyph + "WhatsApp" ======================= */
/* Buttons and standalone links to wa.me (header, phone menu, footer, Home strip, contact / sell / zone channel rows, property buttons + mobile bar, results 503, Journal share, 404).
   The glyph is the official WhatsApp mark (Simple Icons, CC0), always fill: currentColor. A WhatsApp link INSIDE a sentence stays a text link. */
:is(.hdr-wa, .btn, .ct-btn, .cta-bar__ico, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"], a[data-share-wa] {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--ui));
  background: var(--wa-green) !important; color: var(--wa-text) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
  font-family: var(--wa-font) !important; font-weight: 700 !important; font-size: max(15px, calc(16px * var(--ui))) !important; letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none !important; white-space: nowrap; transition: background-color .15s ease; }
:is(.hdr-wa, .btn, .ct-btn, .cta-bar__ico, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"] svg, a[data-share-wa] svg {
  width: calc(20px * var(--ui)) !important; height: calc(20px * var(--ui)) !important; flex: none; fill: currentColor; stroke: none; color: inherit !important; }
:is(.btn, .ct-btn, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"], a[data-share-wa] { min-height: calc(44px * var(--ui)); padding: 0 calc(20px * var(--ui)) 0 calc(16px * var(--ui)) !important; }
.ft__tel[href^="https://wa.me/"] { min-height: calc(40px * var(--ui)); }
.mnav__contact a[href^="https://wa.me/"] { align-self: flex-start; min-height: var(--tap-hit); margin: calc(4px * var(--ui)) 0; }
@media (hover: hover) and (pointer: fine) { :is(.hdr-wa, .btn, .ct-btn, .cta-bar__ico, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"]:hover, a[data-share-wa]:hover { background: var(--wa-green-h) !important; text-decoration: none !important; } }
:is(.hdr-wa, .btn, .ct-btn, .cta-bar__ico, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"]:active, a[data-share-wa]:active { background: var(--wa-green-a) !important; }
:is(.hdr-wa, .btn, .ct-btn, .cta-bar__ico, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"]:focus-visible, a[data-share-wa]:focus-visible { outline: 2px solid var(--wa-ring); outline-offset: 2px; }
:is(.hdr, .ft, .mnav) a[href^="https://wa.me/"]:focus-visible { outline-color: #fff; }   /* on the blues: a white ring */
.hdr .hdr-wa { height: calc(44px * var(--ui)); padding: 0 calc(20px * var(--ui)) 0 calc(16px * var(--ui)); }
.hdr .hdr-wa svg { width: calc(22px * var(--ui)) !important; height: calc(22px * var(--ui)) !important; }
/* icon-only keys (phone header, property bar): a green circle, the glyph a little larger */
@media (max-width: 1023px) { .hdr .hdr-wa { position: relative; width: calc(42px * var(--ui)); height: calc(42px * var(--ui)); padding: 0; margin: 0 calc(2px * var(--ui)); } .hdr .hdr-wa svg { width: calc(24px * var(--ui)) !important; height: calc(24px * var(--ui)) !important; }
  .hdr .hdr-wa::after { content: ''; position: absolute; inset: min(0px, calc((100% - var(--tap-hit)) / 2)); } }
.cta-bar__ico[href^="https://wa.me/"] { padding: 0 !important; }
/* channel rows (Contact, Sell, zone pages): the whole row is the green key, white label and number, the glyph white on a lighter disc */
.ct-ch a[data-ch="whatsapp"] { background: var(--wa-green) !important; color: var(--wa-text) !important; }
.ct-ch a[data-ch="whatsapp"] * { color: var(--wa-text) !important; }
.ct-ch a[data-ch="whatsapp"] .ct-ch__t { font-family: var(--wa-font); }
.ct-ch a[data-ch="whatsapp"] .ct-ch__k { font-weight: 700; text-transform: none; letter-spacing: 0; }   /* the brand name as written: "WhatsApp" */
@media (hover: hover) and (pointer: fine) { .ct-ch a[data-ch="whatsapp"]:hover { background: var(--wa-green-h) !important; } }
.ct-ch a[data-ch="whatsapp"]:active { background: var(--wa-green-a) !important; }
.ct-ch a[data-ch="whatsapp"]:focus-visible { outline: 2px solid var(--wa-ring); outline-offset: 2px; }
[data-ch="whatsapp"] .ct-ch__ico { background: rgba(255, 255, 255, .2) !important; color: var(--wa-text) !important; }
[data-ch="whatsapp"] .ct-ch__ico svg { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); fill: currentColor; }
@media (prefers-reduced-motion: reduce) { :is(.hdr-wa, .btn, .ct-btn, .cta-bar__ico, .ft__tel, .mnav__contact a, .look__alt a)[href^="https://wa.me/"], a[data-share-wa], .ct-ch a[data-ch="whatsapp"] { transition: none; } }

/* ======================= 7 · phone menu, larger + social colours on touch (27.10.2026, client feedback) ======================= */
.mnav__head .brand__logo { height: calc(44px * var(--ui)); }
.mnav__close { width: 52px; height: 52px; }
.mnav__close svg { width: 18px; height: 18px; }
.mnav__rows a { font-size: calc(32px * var(--ui)); min-height: calc(66px * var(--ui)); }
.mnav__sec { margin-top: calc(30px * var(--ui)); font-size: max(18px, calc(19px * var(--ui))); }
.mnav__lbl { font-size: max(13px, calc(14px * var(--ui))); margin-bottom: calc(10px * var(--ui)); }
.mnav__contact a[href] { min-height: 52px; font-size: max(20px, calc(22px * var(--ui))); }
.mnav__contact a[href^="https://wa.me/"] { min-height: 54px !important; margin: calc(8px * var(--ui)) 0 !important; padding: 0 calc(26px * var(--ui)) 0 calc(22px * var(--ui)) !important; font-size: 18px !important; gap: 10px; }
.mnav__contact a[href^="https://wa.me/"] svg { width: 24px !important; height: 24px !important; }
.mnav__contact .addr { font-size: max(17px, calc(18px * var(--ui))); }
.mnav__langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px * var(--ui)); }
.mnav__langs :is(a, .mnav__langs__soon) { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border-radius: 12px; font-size: 18px; font-weight: 600; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.mnav__langs .flag { width: 28px; height: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.mnav__langs a[aria-current] { background: #fff; color: var(--c-blue); box-shadow: none; font-weight: 700; }
.mnav__langs__soon { opacity: .55; }
.mnav__langs__soon small { display: none; }
.mnav__bridge { min-height: 54px; margin-top: calc(26px * var(--ui)); font-size: max(18px, calc(19px * var(--ui))); }
.mnav__social { gap: 12px; }
.mnav__social .soc { width: 56px; height: 56px; border-radius: 14px; }
.mnav__social .soc svg { width: 26px; height: 26px; }
/* Instagram / Facebook in their colours wherever there is no hover (phones, tablets) and always in the phone menu: the reveal of desktop hover shown at rest */
.mnav__social .soc::before { clip-path: none; opacity: 1; }
@media (hover: none) { .soc::before { clip-path: none; opacity: 1; } .soc, .ft .soc { color: #fff; box-shadow: none; } }

/* ======================= 8 · Discover (mega menu) + footer details (27.10.2026) ======================= */
.mega__btn { margin: 0; padding: calc(8px * var(--ui)) 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; grid-template-columns: auto auto; column-gap: calc(5px * var(--ui)); align-items: center; }
.hdr nav .mega__btn[data-w]::before { grid-area: 1 / 1; }
.mega__caret { grid-area: 1 / 2; width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.mega__btn[aria-expanded=true] .mega__caret { transform: rotate(180deg); }
.hdr nav .mega__btn:is([aria-expanded=true], .is-current) > span::after { transform: scaleX(1); transform-origin: 0 50%; }
.hdr nav .mega__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
/* the panel: white, full width under the row, the content on the page column; four photo cards + quick links */
.mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 25; background: #fff; color: #0E2240; text-shadow: none; box-shadow: 0 1px 0 rgba(14, 34, 64, .06), 0 24px 48px rgba(8, 30, 62, .22); animation: mega-in .18s ease; }
.mega[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.mega__in { display: grid; grid-template-columns: minmax(0, 1fr) calc(272px * var(--ui)); gap: calc(36px * var(--ui)); padding: calc(28px * var(--ui)) var(--gx) calc(32px * var(--ui)); }
.mega__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(18px * var(--ui)); }
.mega__card { display: flex; flex-direction: column; gap: calc(4px * var(--ui)); color: inherit !important; text-decoration: none !important; }
.mega__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(10px * var(--ui)); background: #E6EEF7; margin-bottom: calc(8px * var(--ui)); }
.mega__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mega__t { font-family: var(--f-brand); font-size: calc(19px * var(--ui)); font-weight: 700; line-height: 1.2; }
.mega__d { font-family: var(--f-text); font-size: max(14px, calc(14px * var(--ui))); line-height: 1.4; color: var(--c-muted, #4A5B73); }
@media (hover: hover) and (pointer: fine) { .mega__card:hover .mega__img img { transform: scale(1.04); } .mega__card:hover .mega__t { color: var(--c-blue); } }
.mega__card:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 4px; border-radius: calc(10px * var(--ui)); }
.mega__card[aria-current] .mega__t { color: var(--c-blue); }
.mega__side { padding-left: calc(28px * var(--ui)); border-left: 1px solid #E3EAF3; font-family: var(--f-text); }
.mega__h { margin: 0 0 calc(10px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted, #4A5B73); }
.mega__side ul { list-style: none; margin: 0; padding: 0; }
.mega__side .hol { color: var(--c-blue, #0D53A1) !important; }   /* the rentals link in the blue of the site (27.10.2026) */
.mega__side a { display: flex; align-items: center; gap: .35em; min-height: calc(40px * var(--ui)); font-size: max(15px, calc(16px * var(--ui))); font-weight: 600; color: #0E2240 !important; text-decoration: none; border-bottom: 1px solid #EEF2F7; }
@media (hover: hover) and (pointer: fine) { .mega__side a:hover { color: var(--c-blue) !important; } }
.mega__side a:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
@media (max-width: 1023px) { .mega { display: none !important; } }
@media (max-width: 1279px) { .mega__in { grid-template-columns: minmax(0, 1fr); } .mega__side { padding: calc(18px * var(--ui)) 0 0; border-left: 0; border-top: 1px solid #E3EAF3; } .mega__side ul { display: flex; flex-wrap: wrap; gap: 0 calc(24px * var(--ui)); } .mega__side a { border-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } .mega__img img, .mega__caret { transition: none; } }
/* the Home: the transparent header turns blue while Discover is open */
body.shell-hero .hdr.mega-open .hdr__pill { background-color: var(--c-blue); background-image: none; }
/* footer: flags on EN · ES */
.ft__lang :is(a, .ft__soon) { gap: calc(7px * var(--ui)); padding: 0 calc(10px * var(--ui)) !important; justify-content: flex-start !important; }
.ft__lang .flag { width: calc(19px * var(--ui)); height: calc(13px * var(--ui)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
@media (max-width: 767px) { .ft__legal { margin-left: 0; justify-content: flex-start; } }   /* phones: the legal links under the copyright, from the left */
/* "Caribasol holiday rentals" (27.10.2026): a beach umbrella in front, everywhere the link appears (mega menu, footer, phone menu) */
.hol { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); }
.ico-hol { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mega__side .hol .ico-hol { color: var(--c-blue, #0D53A1); }
.mnav__bridge .ico-hol { width: 24px; height: 24px; }
.mega__side .hol { white-space: nowrap; }   /* "Caribasol holiday rentals →" on one line */
/* footer without the top band (27.10.2026): logo + slogan head the first column */
.ft { padding-top: calc(48px * var(--ui) * var(--sp)); }
.ft__cols { padding-top: 0 !important; }
.ft__reach .ft__id { margin-bottom: calc(22px * var(--ui)); }
.ft__reach .ft__brand img { height: calc(58px * var(--ui)); }
.ft__reach .ft__line { margin-top: calc(10px * var(--ui)); }
/* languages without pages yet (27.10.2026): the same look as ES / EN, only faded; "Coming soon" is the tooltip */
:is(.lsel__soon, .mnav__langs__soon, .ft__soon) { opacity: .42; cursor: default; }
.ft__lang { display: grid; grid-template-columns: repeat(4, max-content); gap: calc(6px * var(--ui)); }   /* 8 languages: two rows of four */
/* 27.10.2026: no orange dot before the footer headings (Explore · Office · Language) */
.ft .ft__h::before { content: none; display: none; }
.ico-hol { stroke-width: 1.8; }

/* ======================= 9 · phone menu = the desktop menu; footer social and slogan (27.10.2026) ======================= */
/* Discover in the phone menu: a row like the others, a tap opens its pages under it */
.mnav__disc { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: calc(66px * var(--ui)); margin: 0; padding: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: none; color: #fff; font-family: var(--f-brand); font-size: calc(32px * var(--ui)); font-weight: 700; text-align: left; cursor: pointer; }
.mnav__caret { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.mnav__disc[aria-expanded=true] .mnav__caret { transform: rotate(180deg); }
.mnav__disc:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mnav__sub { display: flex; flex-direction: column; padding: calc(4px * var(--ui)) 0 calc(10px * var(--ui)) calc(18px * var(--ui)); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.mnav__sub[hidden] { display: none; }
.mnav__rows .mnav__sub a { min-height: calc(48px * var(--ui)); font-size: calc(22px * var(--ui)); font-weight: 700; border-bottom: 0; color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { .mnav__caret { transition: none; } }

/* footer social: whole buttons in the brands' colours from the start, the official marks (Simple Icons, CC0) and the names */
.ft__social { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-bottom: calc(18px * var(--ui)); }
.soc-btn { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); min-height: 44px; padding: 0 calc(16px * var(--ui)) 0 calc(13px * var(--ui)); border-radius: 999px; color: #fff !important;
  font-family: var(--f-text); font-size: max(15px, calc(15px * var(--ui))); font-weight: 600; text-decoration: none !important; box-shadow: 0 2px 8px rgba(5, 26, 54, .25); transition: filter .15s ease, transform .15s ease; }
.soc-btn svg { width: 19px; height: 19px; flex: none; fill: currentColor; }
.soc-btn--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.soc-btn--fb { background: #1877F2; }
@media (hover: hover) and (pointer: fine) { .soc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } }
.soc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .soc-btn { transition: none; } }
/* the slogan: Caribasol Sans, "the whole coast" in its italic */
.ft__reach .ft__line { margin-top: calc(14px * var(--ui)); font-family: var(--f-brand); font-size: calc(21px * var(--ui)); line-height: 1.25; color: #fff; }
.ft__line em { font-style: italic; font-weight: 400; color: var(--ft-ink); }
/* language buttons right under the social ones; holiday rentals under the office */
.ft__reach .ft__lang { margin-top: 0; }
.ft__office .ft__rentals { margin-top: calc(16px * var(--ui)); }
/* the brand block of the footer, composed (27.10.2026): social buttons of equal width, the 8 languages on the same width below them;
   phones: the whole block centred, a hairline under it before Explore / Office */
.ft__reach .ft__social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, calc(340px * var(--ui))); }
.ft__reach .soc-btn { justify-content: center; }
.ft__reach .ft__lang { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, calc(340px * var(--ui))); }
.ft__reach .ft__lang :is(a, .ft__soon) { justify-content: center !important; min-width: 0; }
@media (max-width: 767px) {
  .ft__reach { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: calc(26px * var(--ui)); border-bottom: 1px solid var(--ft-line); }
  .ft__reach .ft__id { display: flex; flex-direction: column; align-items: center; }
  .ft__reach .ft__line { font-size: calc(22px * var(--ui)); }
}
.ft__reach .ft__lang :is(a, .ft__soon) { height: calc(36px * var(--ui)) !important; min-height: 0 !important; }   /* one height for all 8 (phones gave the links a 44 px tap height, not the faded ones) */
@media (max-width: 1023px) { .ft__reach .ft__lang :is(a, .ft__soon) { height: 40px !important; } }

/* ======================= 10 · footer Explore + Office (27.10.2026: "a long list", "ugly on mobile") ======================= */
.ft .ft__h { font-size: calc(19px * var(--ui)) !important; margin-bottom: calc(16px * var(--ui)) !important; }
/* Explore: two columns of links in the brand face, a small arrow slides in on hover */
.ft__col:not(.ft__reach):not(.ft__office) ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: calc(10px * var(--ui)) calc(36px * var(--ui)); }
.ft__col:not(.ft__reach):not(.ft__office) li a { display: inline-flex; align-items: center; gap: .35em; font-family: var(--f-brand); font-size: calc(18px * var(--ui)); font-weight: 700; color: #fff; }
.ft__col:not(.ft__reach):not(.ft__office) li a::after { content: '→'; font-family: var(--f-text); font-weight: 400; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .ft__col:not(.ft__reach):not(.ft__office) li a:hover { text-decoration: none; } .ft__col:not(.ft__reach):not(.ft__office) li a:hover::after { opacity: 1; transform: none; } }
/* Office: icon + line, then the actions */
.ft__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(12px * var(--ui)); }
.ft__contact li { display: flex; align-items: flex-start; gap: calc(10px * var(--ui)); }
.ft__ci { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); flex: none; margin-top: 2px; fill: none; stroke: var(--c-on-blue, #CFE0F5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft__contact address { color: #fff; line-height: 1.5; }
.ft__contact .ft__tel { margin: 0 !important; min-height: 0 !important; font-weight: 600; }
.nw { white-space: nowrap; }
.ft__acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--ui)); margin-top: calc(20px * var(--ui)); }
.ft__acts .ft__tel, .ft__office .ft__acts .ft__rentals { margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .ft__col li a::after { transition: none; } }
/* phones: Explore as tiles in two columns, Office as a soft card */
@media (max-width: 767px) {
  .ft__cols { gap: calc(26px * var(--ui)) !important; }
  .ft__col:not(.ft__reach):not(.ft__office) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px * var(--ui)); }
  .ft__col:not(.ft__reach):not(.ft__office) li a { display: flex; justify-content: space-between; min-height: 48px; padding: 0 calc(14px * var(--ui)); border: 1px solid var(--ft-line); border-radius: calc(11px * var(--ui)); font-size: calc(17px * var(--ui)); }
  .ft__col:not(.ft__reach):not(.ft__office) li a::after { opacity: .6; transform: none; }
  .ft__office { padding: calc(18px * var(--ui)); border-radius: calc(14px * var(--ui)); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--ft-line); }
  .ft__acts { flex-direction: column; align-items: stretch; }
  .ft__acts > a { justify-content: center; }
}
@media (min-width: 1024px) { .ft__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.15fr); } }   /* desktop only: phones / tablets keep their 1 / 2 columns */
.ft__col:not(.ft__reach):not(.ft__office) li a { white-space: nowrap; }
.ft__col:not(.ft__reach):not(.ft__office) ul { column-gap: calc(28px * var(--ui)); }
@media (max-width: 767px) { .ft__col:not(.ft__reach):not(.ft__office) li a { font-size: calc(16px * var(--ui)); padding: 0 calc(12px * var(--ui)); } }
@media (max-width: 767px) { .ft__col:not(.ft__reach):not(.ft__office) li a { font-size: calc(15px * var(--ui)); padding: 0 calc(11px * var(--ui)); } }   /* "Properties for sale →" fits its tile */
@media (max-width: 767px) { .ft__col:not(.ft__reach):not(.ft__office) li a::after { content: none; } .ft__col:not(.ft__reach):not(.ft__office) li a { font-size: calc(16px * var(--ui)); } }   /* phones: the tile is the affordance, no arrow — every label fits */
/* footer hierarchy (27.10.2026): the headings in the brand face (bold), the links in the text face, regular, close together — so they read apart */
/* (the headings keep the brand face, Caribasol Sans bold — Daniel, 27.10.2026: "revert them to the nice font") */
@media (min-width: 768px) {
  .ft__col:not(.ft__reach):not(.ft__office) ul { gap: calc(8px * var(--ui)) calc(32px * var(--ui)); }
  .ft__col:not(.ft__reach):not(.ft__office) li a { font-family: var(--f-text); font-size: max(15px, calc(16px * var(--ui))); font-weight: 400; color: rgba(255, 255, 255, .92); }
  .ft__contact { gap: calc(10px * var(--ui)); }
  .ft__contact address, .ft__contact .ft__tel { font-size: max(15px, calc(16px * var(--ui))); font-weight: 400 !important; color: rgba(255, 255, 255, .92); }
}
/* footer social (27.10.2026, 2): on a mouse the buttons are quiet (outlined) and the brand colours sweep in on hover, like the round keys before;
   on touch screens (no hover) the colours stay on from the start */
@media (hover: hover) and (pointer: fine) {
  .soc-btn { position: relative; isolation: isolate; overflow: hidden; background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
  .soc-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: circle(0% at 0% 100%); transition: clip-path .55s cubic-bezier(.23, 1, .32, 1); }
  .soc-btn--ig::before { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
  .soc-btn--fb::before { background: #1877F2; }
  .soc-btn:hover, .soc-btn:focus-visible { filter: none; box-shadow: 0 2px 8px rgba(5, 26, 54, .25); }
  .soc-btn:hover::before, .soc-btn:focus-visible::before { clip-path: circle(150% at 0% 100%); }
}
@media (prefers-reduced-motion: reduce) { .soc-btn::before { transition: none; } }
/* 27.10.2026: the footer always at the bottom (short pages: the main fills the window), and the overscroll of the window in the blue of header / footer
   (the body keeps its light ground, the html behind it is blue) */
html { background: var(--c-blue, #0D53A1); }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
body > .ft { flex: none; }

/* ======================= 11 · page changes without the header "skipping" (27.10.2026) =======================
   Cross-document View Transitions (Chrome / Edge 126+, Safari 18.2+; elsewhere a normal navigation): the header is ONE element across pages —
   it stays still while the content cross-fades in 0.18 s. Off with prefers-reduced-motion. */
@view-transition { navigation: auto; }
.hdr-wrap { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; z-index: 50; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* the current item of the menu: its rule is there from the start (set by script on some pages: no grow-in at every page change); hover keeps the animation */
.hdr nav :is(a[aria-current], .mega__btn.is-current) > span::after { transition: none; }