/* Masia Can Ramoneda: limewash, sandstone, blue hour. */
@font-face { font-family: "Della Respira"; src: url(/fonts/della-respira-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-grotesk-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-grotesk-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --lime: #f1efea;        /* limewash */
  --lime-2: #e6e2d9;      /* plaster in shade */
  --ink: #1d1a17;
  --ink-2: #4a443d;
  --stone: #a97c4c;       /* the portal's sandstone */
  --stone-d: #6e4c2c;
  --night: #131a2c;       /* blue hour */
  --night-2: #1c2540;
  --bulb: #f4c983;        /* festoon light */
  --serif: "Della Respira", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --hd: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd); }
body { margin: 0; background: var(--lime); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
svg { fill: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--lime); padding: 10px 14px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--stone); outline-offset: 3px; }
h2 { font: 400 clamp(44px, 6.2vw, 96px)/.95 var(--serif); letter-spacing: -.01em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  font: 500 16px/1 var(--sans); text-decoration: none; border-radius: 2px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-light { background: var(--lime); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(19,26,44,.18); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: #fff; background: rgba(19,26,44,.35); }
.btn-dark { background: var(--night); color: var(--lime); }
.btn-dark:hover { background: var(--night-2); }

/* header */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); display: flex; align-items: center; gap: 28px;
  padding: 0 var(--pad); color: var(--ink); background: rgba(241,239,234,.94); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(29,26,23,.08); transition: background-color .35s, color .35s, box-shadow .35s; }
.hd.on-hero:not(.is-solid) { color: #fff; background: linear-gradient(rgba(10,14,26,.45), rgba(10,14,26,0)); backdrop-filter: none; box-shadow: none; }
.hd-logo { display: block; color: inherit; flex: none; }
.logo-svg { display: block; width: 112px; height: auto; }
.hd-nav { display: flex; gap: 26px; margin-left: auto; }
.hd-nav a, .hd-lang { font: 500 15px/1 var(--sans); text-decoration: none; padding: 8px 0; }
.hd-nav a:hover, .hd-lang:hover { text-decoration: underline; text-underline-offset: 6px; }
.hd-act { display: flex; align-items: center; gap: 18px; }
.hd-lang { opacity: .85; }
.hd-tel { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.hd-tel svg { width: 17px; height: 17px; }
.hd-cta { font: 500 15px/1 var(--sans); text-decoration: none; padding: 12px 16px; border-radius: 2px; background: var(--night); color: var(--lime); white-space: nowrap; }
.hd.on-hero:not(.is-solid) .hd-cta { background: var(--lime); color: var(--ink); }
.hd-burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.hd-burger i { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .3s; }
.hd-burger i:first-of-type { top: 17px; } .hd-burger i:last-of-type { top: 25px; }
.hd-burger[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.hd-burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--night); color: var(--lime); padding: calc(var(--hd) + 24px) var(--pad) 32px;
  display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 4px; }
.menu nav a { font: 400 44px/1.15 var(--serif); text-decoration: none; padding: 4px 0; }
.menu-foot { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; font-size: 17px; }
.menu-foot a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 32px; }
.menu-foot svg { width: 20px; height: 20px; color: var(--bulb); }
body.menu-open .hd { color: var(--lime) !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
body.menu-open .hd-cta, body.menu-open .hd-lang, body.menu-open .hd-tel span { visibility: hidden; }

/* hero: the masia stands in front of its name */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--night); color: #fff; }
.hero-media { position: absolute; inset: 0; will-change: transform;
  /* the blue-hour sky over their courtyard, deeper at the top, meeting the photo's own sky at the roofline */
  background: linear-gradient(180deg, #0b2f78 0%, #1450ae 16%, #2b8ce6 27%, #6cc9fd 34%, #8edcfe 42%, #8edcfe 100%); }
.hero-front { position: absolute; inset: 16vh 0 0; will-change: transform; }
.hero-front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-front { z-index: 2; pointer-events: none; }
.hero-title { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--hd) - 4px); text-align: center; color: #fbf4e6;
  font: 400 clamp(56px, 11vw, 250px)/.86 var(--serif); letter-spacing: -.012em; white-space: nowrap; will-change: transform;
  text-shadow: 0 2px 30px rgba(6,24,70,.35); }
.hero-title .pre { display: block; font-size: .2em; letter-spacing: .02em; line-height: 1; margin-bottom: .1em; }
.hero-title .l1, .hero-title .l2 { display: inline-block; }
.hero-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 120px var(--pad) clamp(28px, 5vh, 56px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  background: linear-gradient(rgba(10,14,28,0), rgba(10,14,28,.72)); }
.hero-sub { font: 400 clamp(19px, 1.6vw, 24px)/1.35 var(--sans); max-width: 30ch; text-wrap: balance; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* intro */
.intro { padding: clamp(96px, 16vh, 180px) var(--pad) clamp(80px, 12vh, 140px); }
.intro-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 6fr 6fr; grid-template-areas: "big fig" "small fig"; gap: 32px clamp(28px, 6vw, 96px); align-items: start; }
.intro-row { display: contents; }
.intro-big { grid-area: big; align-self: end; }
.intro-small { grid-area: small; }
.intro-fig { grid-area: fig; align-self: center; }
.intro-big { font: 400 clamp(34px, 4.6vw, 70px)/1.06 var(--serif); max-width: 19ch; text-wrap: balance; }
.intro-small { font-size: clamp(18px, 1.4vw, 21px); color: var(--ink-2); max-width: 36ch; }
.intro-fig { overflow: hidden; }
.intro-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }

/* history: the portal, built stone by stone. Without JS (or with reduced motion) it is a plain list beside the finished portal. */
.hist { position: relative; background: #ddd8cf; }
.hist-stage { position: relative; }
.hist-photo, .hist-canvas { display: none; }
.hist-poster { width: 100%; height: auto; max-height: 92vh; object-fit: cover; object-position: 50% 100%; background: url(/img/era-cerimonia.webp) 46% 70% / cover; }
.hist-text { padding: 56px var(--pad) 64px; max-width: 900px; }
.hist-head h2 { margin-bottom: 14px; }
.hist-lead { font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--serif); }
.hist-hint { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.hist-list { margin-top: 36px; display: grid; gap: 28px; }
.hist-date { font: 400 clamp(34px, 3.4vw, 56px)/1 var(--serif); color: var(--stone-d); }
.hist-txt { margin-top: 8px; font-size: 18px; max-width: 40ch; }
.hist-ph { margin-top: 14px; max-width: 220px; }
.hist-ph img { width: 100%; filter: saturate(.9); }
.hist-ph figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.hist-enter { margin-top: 14px; font: 400 26px/1 var(--serif); color: var(--stone-d); }
.hist-cap { display: none; }

.js-hist .hist-stage { height: 100vh; height: 100svh; overflow: hidden; background: #dcd7ce; }
.js-hist .hist-photo { display: block; position: absolute; inset: 0; will-change: transform; }
.js-hist .hist-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 62%; }
.js-hist .hist-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
.js-hist .hist-canvas.is-through { opacity: 0; }
.js-hist .hist-poster { display: none; }
.js-hist .hist-text { position: absolute; z-index: 2; top: 50%; right: 4vw; transform: translateY(-50%); width: min(460px, 31vw); padding: 0; max-width: none; }
@media (min-width: 761px) { .js-hist .hist-canvas { left: -6vw; width: 106vw; } }
.js-hist .hist-head h2 { font-size: clamp(40px, 4.4vw, 72px); }
.js-hist .hist-hint { font-size: 15px; }
.js-hist .hist-list { position: relative; margin-top: 34px; min-height: 300px; display: block; }
.js-hist .hist-item { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .16s ease, transform .3s ease, visibility 0s .16s; }
.js-hist .hist-item.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .16s, transform .55s cubic-bezier(.2,.7,.2,1) .16s, visibility 0s; }
.js-hist .hist-date { font-size: clamp(44px, 4.6vw, 76px); }
.js-hist .hist-text.is-gone { opacity: 0; transition: opacity .4s; }
.js-hist .hist-cap { display: block; position: absolute; z-index: 2; left: var(--pad); bottom: 28px; color: #fff; font-size: 15px;
  background: rgba(19,26,44,.62); padding: 7px 12px; opacity: 0; transition: opacity .5s; }
.js-hist .hist-cap.is-on { opacity: 1; }

/* the house archive */
.archive { padding: clamp(72px, 12vh, 120px) 0 clamp(64px, 10vh, 110px); background: var(--lime); }
.archive-h { font: 400 clamp(28px, 2.6vw, 40px)/1 var(--serif); padding: 0 var(--pad); max-width: 1400px; margin: 0 auto 32px; }
.archive-row { scroll-padding-inline: var(--pad); display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; padding: 0 var(--pad) 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ar-fig { flex: none; scroll-snap-align: start; }
.ar-fig img { height: clamp(220px, 30vw, 380px); width: auto; max-width: none; filter: grayscale(.15) contrast(1.02); }
.ar-fig figcaption { font-size: 14px; color: var(--ink-2); margin-top: 10px; max-width: 30ch; }
@media (min-width: 1200px) { .ar-fig:first-child { margin-left: auto; } .ar-fig:last-child { margin-right: auto; } .ar-fig img { height: clamp(200px, 15vw, 300px); } }

/* l'espai */
.espai { padding: clamp(80px, 14vh, 160px) var(--pad); max-width: 1500px; margin: 0 auto; }
.espai-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 8vh, 96px); }
.lead { font: 400 clamp(22px, 2vw, 30px)/1.25 var(--serif); max-width: 26ch; color: var(--ink-2); }
.espai-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); }
/* each space seen through the portal's round arch, as in the history scene */
.espai-media { position: sticky; top: calc(var(--hd) + 5vh); height: calc(100vh - var(--hd) - 10vh); width: min(100%, calc((100vh - var(--hd) - 10vh) * .78));
  justify-self: center; overflow: hidden; background: var(--lime-2); border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 10px #c9a27a, 0 0 0 11px rgba(110,76,44,.35); }
.em-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s ease; }
.em-img.is-on { opacity: 1; transform: none; }
.espai-item { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(29,26,23,.14); padding: 32px 0; }
.espai-item:last-child { min-height: 50vh; }
.espai-ph { display: none; }
.espai-item h3 { font: 400 clamp(38px, 3.8vw, 64px)/1 var(--serif); }
.espai-item p { margin-top: 14px; font-size: clamp(19px, 1.5vw, 23px); color: var(--ink-2); max-width: 28ch; }
.espai-more { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: clamp(14px, 2vw, 28px); margin-top: clamp(48px, 9vh, 110px); align-items: start; }
.espai-more img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.espai-more figure:nth-child(2) { margin-top: 12%; }
.espai-more figcaption { font-size: 14px; color: var(--ink-2); margin-top: 10px; }

/* serveis: blue hour */
.serveis { background: var(--lime-2); color: var(--ink); padding: clamp(88px, 14vh, 160px) 0 clamp(72px, 12vh, 140px); overflow: hidden; }
.serveis-in { max-width: 1400px; margin: 0 auto; padding: 0 var(--pad); }
.serveis h2 { color: var(--stone-d); }
.serveis-lead { font: 400 clamp(32px, 4vw, 60px)/1.06 var(--serif); max-width: 18ch; margin-top: 22px; }
.serveis-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px clamp(24px, 4vw, 64px); margin-top: clamp(48px, 8vh, 88px); }
.serveis-list li { border-top: 1px solid rgba(29,26,23,.18); padding-top: 18px; }
.serveis-list h3 { font: 400 clamp(25px, 2vw, 30px)/1.1 var(--serif); color: var(--ink); }
.serveis-list p { margin-top: 8px; color: var(--ink-2); }
.serveis-more { margin-top: 44px; max-width: 60ch; color: var(--ink-2); font-size: 18px; }
.gal { margin-top: clamp(64px, 10vh, 110px); }
.gal-track { display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--pad); width: max-content; align-items: flex-start; will-change: transform; }
.gal-fig img { height: clamp(260px, 30vw, 440px); width: auto; max-width: none; }
.gal-fig.g1 img, .gal-fig.g4 img { height: clamp(220px, 23vw, 340px); }
.gal-fig.g1, .gal-fig.g4 { margin-top: clamp(40px, 6vw, 90px); }
.gal-fig figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); }

/* contact: their courtyard at night */
.cont { position: relative; color: var(--lime); background: var(--night); overflow: hidden; }
.cont-bg { position: absolute; inset: 0; }
.cont-img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.cont-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,18,32,.92) 0%, rgba(13,18,32,.78) 45%, rgba(13,18,32,.55) 100%); }
.cont-in { position: relative; max-width: 1400px; margin: 0 auto; padding: clamp(88px, 14vh, 150px) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.cont .cont-big { font: 400 clamp(46px, 5.6vw, 92px)/.98 var(--serif); max-width: 12ch; }
.cont-lead { margin-top: 22px; font-size: 19px; max-width: 36ch; color: rgba(241,239,234,.88); }
.cont-ways { margin-top: 36px; display: grid; gap: 10px; }
.cont-ways a { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; padding: 8px 0; font: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--serif); }
.cont-ways a:hover { color: var(--bulb); }
.cont-ways svg { width: 26px; height: 26px; color: var(--bulb); flex: none; }
.cont-ways small { display: block; font: 500 13px/1.3 var(--sans); color: rgba(241,239,234,.75); }
.form { background: var(--lime); color: var(--ink); padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.fl { grid-column: 1 / -1; display: grid; gap: 6px; }
.fl.half { grid-column: auto; }
.fl label { font: 500 14px/1.2 var(--sans); color: var(--ink-2); }
.fl input, .fl select, .fl textarea { width: 100%; font: 400 17px/1.3 var(--sans); color: var(--ink); background: #fff; border: 1px solid #cfc9be; border-radius: 2px; padding: 12px 12px; min-height: 48px; }
.fl textarea { resize: vertical; min-height: 110px; }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: 2px solid var(--stone); outline-offset: 0; border-color: var(--stone); }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form .btn svg { width: 18px; }
.form-note { grid-column: 1 / -1; background: #fff; border-left: 3px solid var(--stone); padding: 14px 16px; font-size: 16px; }

/* the keystone in the contact section: the visitor's date is carved on it */
.clau { margin-top: 40px; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 18px; position: relative; }
.clau img { width: 220px; height: 220px; object-fit: cover; grid-row: 1; }
.clau-date { position: absolute; left: 0; top: 0; width: 220px; height: 220px; display: grid; place-items: center; text-align: center;
  font: 400 22px/1.1 var(--serif); color: #3f2612; text-shadow: 0 1px 0 rgba(255,236,200,.5), 0 -1px 0 rgba(50,30,12,.5); padding: 22px 0 0; }
.clau-date.is-new { animation: carve .9s ease-out; }
@keyframes carve { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: 0; } }
.clau figcaption { font-size: 15px; color: rgba(241,239,234,.8); max-width: 22ch; }

/* how to get there */
.arr { padding: clamp(88px, 14vh, 150px) var(--pad); }
.arr-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.arr-steps { margin-top: 28px; display: grid; gap: 16px; counter-reset: s; }
.arr-steps li { font-size: 18px; color: var(--ink-2); padding-left: 0; }
.arr-addr { margin-top: 28px; font: 400 26px/1.2 var(--serif); }
.arr-addr strong { font-weight: 400; }
.arr-gps { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.arr .btn { margin-top: 28px; }
.arr-map { --map-bg: #e9e5dc; --map-road: #fbfaf7; --map-major: #ffffff; --map-water: #b9cbd6; --map-park: #d5dcc6; --map-ink: #3b352e; --map-pin: #9a5a2a; --map-font: var(--sans);
  background: #e9e5dc; }
.arr-map svg { display: block; width: 100%; height: auto; }

/* footer */
.ft { background: var(--lime-2); color: var(--ink); padding: 64px var(--pad) 28px; }
.ft-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto auto; gap: 32px 56px; align-items: start; }
.ft-logo .logo-svg { width: 150px; }
.ft-addr { font-style: normal; color: var(--ink-2); }
.ft-contact { display: grid; gap: 6px; }
.ft-contact a { text-decoration: none; min-height: 28px; }
.ft-contact a:hover { text-decoration: underline; }
.ft-social { display: flex; gap: 6px; }
.ft-social a { display: grid; place-items: center; width: 44px; height: 44px; }
.ft-social svg { width: 24px; height: 24px; }
.ft-base { max-width: 1400px; margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(29,26,23,.14); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 14px; color: var(--ink-2); }
.ft-base a { color: inherit; }
.ft-base .cr-credit { margin-left: auto; color: var(--ink); }

.f { margin-right: -.07em; }

/* big screens: the content grows with them */
@media (min-width: 1800px) {
  .intro-in, .arr-in, .serveis-in, .cont-in, .ft-in, .ft-base, .archive-h { max-width: 1680px; }
  .espai { max-width: 1840px; }
  .js-hist .hist-text { width: min(560px, 30vw); }
  .js-hist .hist-txt { font-size: 21px; }
}

/* phone bar */
.bar { display: none; }

/* legal + 404 */
.page main { padding: calc(var(--hd) + 56px) var(--pad) 96px; max-width: 820px; margin: 0 auto; }
.legal h1 { font: 400 clamp(40px, 5vw, 64px)/1 var(--serif); margin-bottom: 28px; }
.legal h2 { font: 400 30px/1.1 var(--serif); margin: 40px 0 14px; }
.legal p { margin-bottom: 14px; color: var(--ink-2); }
.nf-big { font: 400 120px/1 var(--serif); color: var(--stone); margin-bottom: 20px; }
.nf p { margin-bottom: 10px; }

/* entrances (the text is there before the script runs; only the movement is added) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) {
  .hd-nav { display: none; }
  .hd-burger { display: block; }
  .hd-act { margin-left: auto; }
}
@media (max-width: 760px) {
  :root { --hd: 60px; }
  body { font-size: 16.5px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .hd { gap: 12px; }
  .logo-svg { width: 92px; }
  .hd-act { gap: 6px; }
  .hd-tel span, .hd-cta { display: none; }
  .hd-tel { width: 44px; height: 44px; justify-content: center; }
  .hd-tel svg { width: 20px; height: 20px; }
  .hd-lang { padding: 12px 8px; }

  .hero-front { top: 15vh; }
  .hero-front img { object-position: 42% 0; }
  .hero-media { background: linear-gradient(180deg, #0b2f78 0%, #1450ae 14%, #2b8ce6 24%, #6cc9fd 30%, #8edcfe 38%, #8edcfe 100%); }
  .hero-title { top: calc(var(--hd) + 6px); font-size: 19vw; line-height: .84; }
  .hero-title .l2 { display: block; }
  .hero-title .pre { font-size: .22em; }
  .hero-foot { flex-direction: column; align-items: flex-start; padding-top: 140px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); gap: 18px; }
  .hero-btns { justify-content: flex-start; }
  .hero-foot { background: linear-gradient(rgba(10,14,28,0), rgba(10,14,28,.62) 35%, rgba(10,14,28,.85)); }
  .hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
  .hero-btns .btn-ghost { display: none; }
  .hero-btns .btn-light { width: 100%; }

  .intro-in { grid-template-columns: 1fr; grid-template-areas: "big" "small" "fig"; }
  .intro-img { aspect-ratio: 4 / 3; }
  .espai { padding-bottom: 56px; }
  .arr { padding-top: 56px; }

  .js-hist .hist-text { top: calc(var(--hd) + 18px); right: auto; left: 20px; width: calc(100% - 40px); transform: none; }
  .js-hist .hist-head h2 { font-size: 38px; margin-bottom: 6px; }
  .js-hist .hist-lead { font-size: 21px; }
  .js-hist .hist-hint { display: none; }
  .js-hist .hist-list { margin-top: 14px; min-height: 150px; }
  .js-hist .hist-date { font-size: 36px; }
  .js-hist .hist-txt { font-size: 16px; margin-top: 4px; }
  .js-hist .hist-ph { display: none; }
  .js-hist .hist-enter { font-size: 22px; margin-top: 8px; }
  .js-hist .hist-photo img { object-position: 47% 70%; }

  .espai-head { grid-template-columns: 1fr; gap: 18px; }
  .espai-grid { grid-template-columns: 1fr; }
  .espai-media { display: none; }
  .espai-item { min-height: 0; padding: 0 0 40px; border: 0; }
  .espai-ph { display: block; margin-bottom: 18px; }
  .espai-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .espai-more { grid-template-columns: 1fr 1fr; }
  .espai-more figure:first-child { grid-column: 1 / -1; }
  .espai-more figure:nth-child(2) { margin-top: 0; }

  .serveis-list { grid-template-columns: 1fr; gap: 24px; }
  .gal { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--pad); }
  .gal-track { padding-right: var(--pad); }
  .gal-fig { scroll-snap-align: start; }
  .gal-fig img, .gal-fig.g1 img, .gal-fig.g4 img { height: 260px; }
  .gal-fig.g1, .gal-fig.g4 { margin-top: 0; }

  .cont-in { grid-template-columns: 1fr; }
  .cont-bg::after { background: rgba(13,18,32,.84); }
  .form { grid-template-columns: 1fr; padding: 20px; }
  .fl.half { grid-column: 1 / -1; }
  .form .btn { width: 100%; }

  .arr-in { grid-template-columns: 1fr; }
  .arr-map { order: -1; }

  .ft-in { grid-template-columns: 1fr; gap: 24px; }
  .ft-base .cr-credit { margin-left: 0; }

  .bar { display: grid; grid-template-columns: 1fr 1fr 1.2fr; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    background: var(--night); color: var(--lime); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
  .bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; text-decoration: none; font: 500 15px/1 var(--sans); }
  .bar a + a { border-left: 1px solid rgba(241,239,234,.14); }
  .bar svg { width: 19px; height: 19px; color: var(--bulb); }
  .bar .bar-cta { background: var(--lime); color: var(--ink); }
  .bar .bar-cta svg { color: var(--stone-d); }
}
@media (min-width: 1800px) {
  body { font-size: 18px; }
}