/* ============ programme paper, map act, cta + interactive piano, footer, responsive ============ */

/* ---------- Programme (Serveis as a printed concert programme) ---------- */
.programa {
  position: relative; z-index: 5;
  background: var(--bg-soft); color: var(--ink);
  padding: clamp(4rem, 9vh, 7rem) var(--pad-x) 0;
}
/* In journey mode the paper enters exactly when the zoom act's pin releases,
   swapping in place over the identical print on the 3D sheet. Until then it
   stays hidden so it can't cover the sheet mid-zoom. */
body.journey .programa { margin-top: -100svh; }
/* opacity, not visibility: the zoom act cross-fades this section in over the
   painted sheet, and visibility cannot be faded. pointer-events keeps it inert
   while it is still transparent. */
body.journey:not(.paper-live) .programa { pointer-events: none; }
.programa-paper { max-width: 900px; margin: 0 auto; }

.programa-head { text-align: center; padding-bottom: clamp(2.6rem, 6vw, 4.2rem); }
.programa-head .prog-school {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-dim);
}
.programa-head .prog-rule {
  width: 64px; height: 2px; background: var(--accent); margin: 1.3rem auto;
}
.programa-title {
  font-family: var(--font-drama); font-style: italic; font-weight: 500;
  font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--ink);
}
.programa-subtitle {
  font-family: var(--font-drama); font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--ink-dim); margin-top: 0.9rem;
}
.prog-staff { margin: 2.2rem auto 0; width: min(300px, 66%); color: rgba(1, 43, 58, 0.26); }

/* Rows: numeral · content · visual */
.prog-row {
  display: grid; grid-template-columns: 96px 1.25fr 0.85fr;
  gap: clamp(1.2rem, 3.5vw, 2.6rem); align-items: start;
  padding: clamp(2.4rem, 5vw, 3.4rem) 0;
  border-top: 3px double var(--hairline-ink);
}
.prog-num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--accent); line-height: 1;
}
.prog-body h3 {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: 0.9rem; letter-spacing: -0.01em;
}
.prog-body > p { line-height: 1.75; color: var(--ink-dim); max-width: 52ch; font-weight: 300; }

/* Row visuals */
.prog-visual { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.4rem; }

.mov-card {
  display: flex; align-items: baseline; gap: 0.9rem;
  border: 1px solid var(--hairline-ink); border-radius: 0.9rem;
  padding: 0.75rem 1.1rem; background: var(--bg-card);
}
.mov-card i {
  font-style: normal; font-family: var(--font-drama);
  color: var(--accent); font-size: 1.05rem; min-width: 1.4rem;
}
.mov-card span { font-size: 0.9rem; font-weight: 500; }

.instrument-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.instrument-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  border: 1px solid var(--hairline-ink); border-radius: 0.9rem;
  padding: 1rem 0.6rem; background: var(--bg-card);
  color: var(--ink);
}
.instrument-tile svg { color: var(--accent); }
.instrument-tile span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }

.notes-cloud {
  position: relative; min-height: 120px;
  border: 1px solid var(--hairline-ink); border-radius: 0.9rem;
  background: var(--bg-card); overflow: hidden;
}
.notes-cloud span {
  position: absolute; font-size: 1.5rem; color: var(--accent);
  animation: bob 3.4s ease-in-out infinite;
}
.notes-cloud span.ink { color: var(--ink-faint); font-size: 1.1rem; }
@keyframes bob { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }
.age-chip {
  align-self: flex-start;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--accent-dim); background: var(--bg-card);
  padding: 0.4rem 0.9rem; border-radius: 99px;
}

.repertori { list-style: none; }
.repertori li {
  display: flex; align-items: baseline; gap: 0.6em;
  padding: 0.5rem 0; font-size: 0.92rem;
}
.repertori .rep-dots {
  flex: 1; border-bottom: 1px dotted rgba(1, 43, 58, 0.26);
  transform: translateY(-4px);
}
.repertori .rep-month {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600;
  border: 1px solid var(--accent-dim); border-radius: 99px; padding: 0.2rem 0.6rem;
}

.programa-close {
  text-align: center; border-top: 3px double var(--hairline-ink);
  padding: clamp(3rem, 9vh, 5rem) 0 clamp(4rem, 12vh, 7rem);
}
.programa-close .prog-orn { font-family: var(--font-drama); font-size: 1.4rem; color: var(--accent); }
.programa-close p {
  margin-top: 1rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim);
  font-family: var(--font-heading);
}
.programa-close em {
  display: block; margin-top: 1.3rem; font-family: var(--font-drama);
  font-size: 1rem; color: var(--ink-dim);
}

/* ---------- Moments: real photographs, styled as prints in an album ---------- */
.moments {
  position: relative; z-index: 3;
  background: var(--bg-soft);
  padding: clamp(3rem, 8vh, 5.5rem) var(--pad-x) clamp(4rem, 10vh, 7rem);
  text-align: center;
}
/* the album head is centred, so its rule sits centred with it */
.moments .section-num { justify-content: center; }

.moments-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em;
  margin-bottom: clamp(2.2rem, 6vh, 3.5rem);
}
.moments-title em { font-family: var(--font-drama); font-weight: 500; color: var(--accent); }
.moments-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 1060px; margin: 0 auto;
  align-items: start;
}
.moment {
  background: var(--bg-card); border-radius: 2px;
  padding: 0.6rem 0.6rem 0.4rem;
  box-shadow: 0 10px 30px rgba(1, 43, 58, 0.09), 0 1px 0 rgba(1, 43, 58, 0.04);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.moment:nth-child(4n + 1) { transform: rotate(-1.6deg); }
.moment:nth-child(4n + 2) { transform: rotate(1.1deg) translateY(1.4rem); }
.moment:nth-child(4n + 3) { transform: rotate(-0.6deg) translateY(0.5rem); }
.moment:nth-child(4n) { transform: rotate(1.4deg) translateY(0.9rem); }
.moment:hover { transform: rotate(0deg) translateY(-4px); }
.moment img {
  /* height:auto is load-bearing — the <img> carries width/height attributes for
     CLS, and that height presentation hint otherwise beats aspect-ratio, so the
     prints rendered at their full 1000px instead of cropping to 4:5 */
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 1px;
  /* no sepia/saturate pass: the warm cast it added is exactly the "dirt" —
     the brand's warmth belongs to the paper around the print, not the print */
}
.moment figcaption {
  font-family: var(--font-drama); font-style: italic;
  font-size: 0.92rem; color: var(--ink-dim);
  padding: 0.55rem 0.2rem 0.35rem;
}

/* ---------- Map act (contacte): the programme fades into the map ---------- */
/* same paper colour as the programme, so the two sections read as one page */
.act-map { overflow: hidden; background: var(--bg-soft); z-index: 3; }
/* desktop: a framed panel, centred and clear of the caption/contact strip */
.map-layer {
  position: absolute; inset: 0 0 10vh; margin: auto; z-index: 1;
  width: min(58vw, 820px); aspect-ratio: 10 / 7;
  border: 1px solid var(--hairline-ink); border-radius: 1.3rem;
  overflow: hidden;
  box-shadow: 0 22px 56px rgba(1, 43, 58, 0.09);
}
body.journey .map-layer { opacity: 0; }
.map-layer a { display: block; width: 100%; height: 100%; }
.map-layer svg { width: 100%; height: 100%; }

.map-caption {
  position: absolute; left: var(--pad-x); bottom: clamp(6.5rem, 16vh, 9rem); z-index: 2;
  background: rgba(255, 250, 247, 0.93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-ink); border-radius: 1.2rem;
  padding: 1.2rem 1.5rem; max-width: 420px;
}
body.journey .map-caption { opacity: 0; }
.map-caption .section-num { margin-bottom: 0.5rem; }
.map-caption h2 {
  font-family: var(--font-drama); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-bottom: 0.35rem;
}
.map-caption p { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.55; }

.contact-strip {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 2rem; z-index: 2;
  display: flex; gap: 0.8rem; flex-wrap: wrap;
}
body.journey .contact-strip > * { opacity: 0; }
.contact-option {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.3rem;
  background: rgba(255, 250, 247, 0.93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-ink); border-radius: 99px;
  font-size: 0.88rem; font-weight: 600; font-family: var(--font-heading);
  transition: border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.contact-option:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.contact-option svg { color: var(--accent); }
.co-short { display: none; }

.map-pin-pulse { animation: pin-pulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pin-pulse {
  0% { transform: scale(0.4); opacity: 0.7; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Fallback: map act as a normal section */
body:not(.journey) .act-map { min-height: 100svh; }

/* ---------- CTA + interactive keyboard handoff ---------- */
.cta {
  position: relative; z-index: 4;
  /* this used to carry a title and a button; with only the line left, the old
     16vh of headroom read as a hole */
  padding: clamp(4rem, 9vh, 7rem) 0 0; text-align: center;
  /* flat navy — the same fill as the footer, so the page closes on one dark
     block rather than a ramp that reads as a separate colour */
  background: var(--brand-deep);
  color: var(--brand-paper);
}
.cta-inner { padding: 0 var(--pad-x); }
.cta-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 3.7rem); letter-spacing: -0.02em;
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
.cta-title em { font-family: var(--font-drama); font-weight: 500; color: var(--accent); }

.cta-piano-bar {
  display: flex; justify-content: flex-end;
  padding: 0 var(--pad-x); margin-top: clamp(2rem, 5vh, 3.2rem); margin-bottom: 1.1rem;
}
.sound-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent; border: 1px solid rgba(255, 244, 239, 0.32);
  color: rgba(255, 244, 239, 0.72); border-radius: 99px; padding: 0.55rem 1.1rem;
  font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sound-toggle:hover { color: var(--accent); border-color: var(--accent); }
.sound-toggle .snd-on { display: none; }
.sound-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.sound-toggle[aria-pressed="true"] .snd-on { display: block; }
.sound-toggle[aria-pressed="true"] .snd-off { display: none; }

.cta-piano { position: relative; }
.piano {
  height: var(--piano-h);
  display: flex;
  border-top: 4px solid var(--deep-2);
  background: var(--deep-2);
  touch-action: pan-y; /* keys respond to taps but vertical scroll still works */
}
.key-white {
  position: relative; flex: 1 1 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-paper) 100%);
  border-right: 1px solid rgba(1, 43, 58, 0.14);
  border-radius: 0 0 7px 7px;
  cursor: pointer;
  transform-origin: top;
  transition: transform 0.09s ease-out, background 0.18s ease;
  box-shadow: inset 0 -7px 0 rgba(1, 43, 58, 0.08);
}
.key-white:last-child { border-right: 0; }
.key-white.pressed {
  transform: translateY(5px) scaleY(0.985);
  background: linear-gradient(180deg, #ffeae2 0%, #ffdccf 100%);
  box-shadow: inset 0 -7px 0 rgba(251, 148, 120, 0.45);
}
.key-black {
  position: absolute; top: 0; z-index: 3;
  height: 60%;
  background: var(--brand-deep);
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 244, 239, 0.14); border-top: 0;
  transform-origin: top;
  transition: transform 0.09s ease-out, box-shadow 0.18s ease;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.45);
}
.key-black.pressed {
  transform: translateY(4px) scaleY(0.97);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.4), inset 0 -5px 0 rgba(251, 148, 120, 0.45);
}

/* ---------- Footer (dark anchor) ---------- */
.footer {
  position: relative; z-index: 4;
  background: var(--brand-deep); color: var(--brand-paper);
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--pad-x) 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem;
  max-width: 1100px; margin: 0 auto 3.5rem;
}
.footer-logo { width: 52px; margin-bottom: 1.2rem; }
.footer-brand h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.footer-drama { font-family: var(--font-drama); font-style: italic; color: rgba(255, 244, 239, 0.66); font-size: 0.95rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col h4 {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brand-paper); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.footer-col h4::after {
  content: ""; height: 1px; flex: 1; background: rgba(251, 148, 120, 0.45);
}
.footer-col a { color: rgba(255, 244, 239, 0.66); font-size: 0.9rem; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--bg-soft); }
.footer-copy {
  text-align: center; color: rgba(255, 244, 239, 0.45);
  font-size: 0.78rem; letter-spacing: 0.02em;
  border-top: 1px solid var(--hairline-cream);
  max-width: 1100px; margin: 0 auto; padding-top: 1.8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .moments-grid { grid-template-columns: 1fr 1fr; }
  .prog-row { grid-template-columns: 72px 1fr; }
  .prog-visual { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  /* stacked layers on a phone: framed photograph high on the wall, this copy in
     the band beneath it, the piano below that */
  .hero-brand {
    /* svh, not vh: on iOS vh is the chrome-less viewport, so a vh offset sits
       lower than its number suggests against these 100svh acts */
    top: 29svh; transform: none;
    left: var(--pad-x); right: var(--pad-x); max-width: none; text-align: center;
  }
  .hero-brand .hero-overline { justify-content: center; }
  /* No card here. At the vision pose the piano has slid down and left, so this
     copy sits on plain wall between the framed photograph above and the
     instrument below — and losing the card's padding gives back the ~45px that
     was forcing the first line to wrap. */
  .hero-vision {
    position: absolute; left: var(--pad-x); right: var(--pad-x);
    top: 23svh; bottom: auto; transform: none;
    padding: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-radius: 0;
  }
  .hero-vision .vision-line {
    font-size: clamp(1.15rem, 5.4vw, 1.6rem); line-height: 1.3;
    white-space: nowrap;   /* each line is one line, or the size is wrong */
  }
  .hero-vision .vision-line.accent { margin-bottom: 0.8rem; }
  .hero-sub { font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.1rem; }
  .hero-actions { gap: 0.6rem; margin-bottom: 0; }   /* the address below is hidden */
  /* both CTAs must sit on one line each inside a ~309px card interior */
  .hero-actions .btn {
    flex: 1 1 auto; text-align: center; white-space: nowrap;
    padding: 0.72rem 0.6rem; font-size: 0.78rem; letter-spacing: 0;
  }
  /* Without a card behind it this line landed on the black lid and vanished.
     The map act owns the address anyway, and the CTA above already leads to
     the form, so on a phone it simply goes. */
  .hero-vision .hero-address { display: none; }
  .scroll-hint { display: none; }
  /* copy sits low on a translucent paper card, clear of the piano above */
  .value-act { align-items: flex-end; }
  .value-card {
    margin: 0 auto 9svh; padding: 1.4rem 1.5rem;
    background: rgba(255, 250, 247, 0.93);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--hairline-ink); border-radius: 1.2rem;
  }
  .prog-row { grid-template-columns: 1fr; gap: 1rem; }
  .prog-visual { grid-column: 1; }
  .prog-num { display: flex; align-items: baseline; gap: 0.8rem; }
  .instrument-grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .instrument-tile { padding: 0.7rem 0.3rem; }
  .instrument-tile span { font-size: 0.66rem; }
  /* the album becomes a swipeable strip of prints */
  .moments { padding-left: 0; padding-right: 0; }
  .moments-grid {
    display: flex; overflow-x: auto; max-width: none;
    scroll-snap-type: x mandatory;
    padding: 1.6rem var(--pad-x) 1.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .moments-grid::-webkit-scrollbar { display: none; }
  .moment { flex: 0 0 72vw; scroll-snap-align: center; }
  .moment:nth-child(4n + 2) { transform: rotate(1.1deg); }
  .moment:nth-child(4n + 3) { transform: rotate(-0.6deg); }
  .moment:nth-child(4n) { transform: rotate(1.4deg); }
  /* The map was full-bleed with preserveAspectRatio="slice": a 0.95-ratio
     viewBox forced to cover a ~0.5-ratio phone viewport, so it scaled ~2x and
     cropped half the width away — giant blocks, labels running off the edge.
     A bounded panel whose aspect ratio matches the mobile viewBox means slice
     has almost nothing left to crop. */
  /* The phone crop now covers the whole neighbourhood — Rosselló with Entença at
     the top, Gran Via with Rocafort at the bottom, Tarragona out to the west —
     so it is drawn at ~0.64x and every label is scaled back up in viewBox units
     to stay legible. Narrower side padding buys back some of that scale. */
  /* The three pieces of this act were absolutely positioned and sized
     independently, so nothing stopped them colliding — the panel ran under the
     fixed nav at the top and the pills ran off the bottom. On a phone they now
     stack in a flex column, which makes overlap structurally impossible: the
     only thing left to tune is how much height the map is allowed to claim. */
  .act-map {
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(0.7rem, 2svh, 1.2rem);
    padding: 4.6rem 0.75rem 1.4rem;   /* top clears the fixed nav */
  }
  .map-layer {
    position: static; inset: auto;
    margin-inline: auto; flex: 0 0 auto;
    /* height budget: whatever the caption and pills do not need */
    width: min(100%, calc((100svh - 24rem) * 580 / 552));
    height: auto;
    aspect-ratio: 580 / 552;   /* exactly the mobile viewBox, so slice crops ~0 */
    border: 1px solid var(--hairline-ink); border-radius: 1.1rem;
    box-shadow: 0 14px 36px rgba(1, 43, 58, 0.08);
  }
  .map-layer .map-streets { font-size: 17px; }
  .map-layer .map-metro text[x] { font-size: 16px; }
  .map-layer .map-metro circle { r: 12px; }
  .map-layer .map-metro text:not([x]) { font-size: 13px; }
  .map-layer #map-lbl-valencia,
  .map-layer .map-lbl-roma { font-size: 18px; }
  /* only the right-anchored along-street names fall outside the crop; Aragó,
     Diputació and Gran Via sit at x≈60-76 and stay */
  .map-st-r { display: none; }
  /* Diputació runs straight through the vertical Llançà label and the park at
     this scale; Aragó and Gran Via sit clear, so only this one goes */
  .map-st-diputacio { display: none; }
  .map-caption {
    position: static; inset: auto; max-width: none;
    padding: 1rem 1.1rem;
  }
  .map-caption h2 { font-size: 1.25rem; }
  .map-caption p { font-size: 0.84rem; line-height: 1.5; }
  /* three pills on one row rather than two, so nothing falls under the browser
     chrome at the bottom of the viewport */
  .contact-strip { position: static; inset: auto; gap: 0.45rem; flex-wrap: nowrap; }
  .contact-option {
    padding: 0.6rem 0.5rem; font-size: 0.72rem; gap: 0.35rem;
    flex: 1 1 0; justify-content: center; min-width: 0;
  }
  .contact-option svg { width: 15px; height: 15px; flex: none; }
  /* full labels do not fit three-across at 393px, and a truncated phone number
     is useless — so the email pill uses its short label and nothing truncates */
  .contact-option .co-long { display: none; }
  .contact-option .co-short { display: inline; }
  .contact-option .co-label { white-space: nowrap; }
}

/* ============ Added for SEO / conversion: skip link, language switch,
   enquiry form, FAQ, footer hours ============ */

/* ---------- Skip link (keyboard + screen readers) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-deep); color: var(--brand-paper);
  padding: 0.8rem 1.4rem; border-radius: 0 0 0.6rem 0;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

/* ---------- Language switch ---------- */
.lang-switch { display: flex; align-items: center; gap: 0.15rem; margin-left: 1.4rem; }
.lang-switch a {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink-faint);
  padding: 0.3rem 0.42rem; border-radius: 0.4rem;
  transition: color 0.3s ease, background 0.3s ease;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--ink); background: rgba(1, 43, 58, 0.06); }
.menu-overlay-lang { display: none; }

/* ---------- Enquiry form ---------- */
.enquiry {
  position: relative; z-index: 5;
  background: var(--bg-soft);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x) clamp(4rem, 10vh, 6.5rem);
  border-top: 1px solid var(--hairline-ink);
}
.enquiry-inner {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.enquiry-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.12;
  letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
.enquiry-title em { font-family: var(--font-drama); font-weight: 500; color: var(--accent-ink); }
.enquiry-lead { color: var(--ink-dim); line-height: 1.7; font-weight: 300; margin-bottom: 1.6rem; }
.enquiry-alt {
  display: inline-flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--hairline-ink); border-radius: 99px;
  padding: 0.7rem 1.2rem; background: var(--bg-card);
  font-size: 0.9rem; font-weight: 600; font-family: var(--font-heading);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.enquiry-alt:hover { border-color: var(--accent); transform: translateY(-2px); }
.enquiry-alt svg { color: var(--accent); flex: none; }
.enquiry-alt em {
  display: block; font-family: var(--font-drama); font-style: italic;
  font-size: 0.76rem; color: var(--ink-faint); font-weight: 400;
}

.enquiry-form {
  background: var(--bg-card);
  border: 1px solid var(--hairline-ink); border-radius: 1.3rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: 0 14px 40px rgba(1, 43, 58, 0.06);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label, .field-choice legend {
  font-family: var(--font-heading); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--hairline-ink);
  border-radius: 0.7rem; padding: 0.72rem 0.9rem; width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(251, 148, 120, 0.18);
}
.field input:user-invalid { border-color: #d1543c; }

.field-choice { border: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.field-choice legend { width: 100%; }
.field-choice legend { margin-bottom: 0.15rem; }
/* .choice is itself a <label> inside .field, so `.field label` (0,2,0) applies
   its uppercase caption style. The reset has to match that specificity — a bare
   .choice (0,1,0) loses no matter where it sits in the file. */
.field .choice {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: var(--ink);
}
.choice input { width: auto; accent-color: var(--accent); }
.choice span { font-size: 0.92rem; color: var(--ink); }

.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }

.enquiry-submit { width: 100%; margin-top: 0.4rem; border: 0; cursor: pointer; font-size: 0.95rem; }
.enquiry-submit[disabled] { opacity: 0.6; cursor: progress; }
.enquiry-privacy {
  margin-top: 0.9rem; font-size: 0.76rem; line-height: 1.5;
  color: var(--ink-faint); text-align: center;
}
.enquiry-status {
  margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.55;
  text-align: center; font-weight: 500;
}
.enquiry-status:empty { display: none; }
.enquiry-status.ok { color: #1c6b4b; }
.enquiry-status.err { color: #b8432c; }

/* ---------- Qui som ---------- */
.quisom {
  position: relative; z-index: 5;
  background: var(--bg-soft); color: var(--ink);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
  border-top: 1px solid var(--hairline-ink);
}
.quisom-inner { max-width: 1060px; margin: 0 auto; }
.quisom-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.quisom-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.12;
  letter-spacing: -0.02em; margin-bottom: 1rem;
}
.quisom-title em { font-family: var(--font-drama); font-weight: 500; color: var(--accent-ink); }
/* the defining sentence: set larger than body copy because it is the one line
   a reader — or a model summarising the page — should come away with */
.quisom-lead {
  font-size: clamp(1.02rem, 2.1vw, 1.2rem); line-height: 1.65;
  color: var(--ink-dim); font-weight: 300; max-width: 44ch;
}
.quisom-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-ink); padding-top: clamp(1.6rem, 4vh, 2.4rem);
}
.quisom-col h3 {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.quisom-col h3::before {
  content: ""; width: 18px; height: 2px; background: var(--accent); flex: none;
}
.quisom-col p {
  line-height: 1.75; color: var(--ink-dim); font-weight: 300;
  font-size: clamp(0.93rem, 1.7vw, 1rem); max-width: 42ch;
}
.quisom-col p + p { margin-top: 0.9rem; }

/* ---------- FAQ ---------- */
.faq {
  position: relative; z-index: 5;
  background: var(--bg); color: var(--ink);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.02em;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem); text-align: center;
}
.faq-title em { font-family: var(--font-drama); font-weight: 500; color: var(--accent-ink); }
.faq-item { border-top: 1px solid var(--hairline-ink); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline-ink); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(0.98rem, 2vw, 1.08rem); line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-answer { padding: 0 0 1.3rem; }
.faq-answer p { color: var(--ink-dim); line-height: 1.75; font-weight: 300; max-width: 68ch; }

/* ---------- Footer hours ---------- */
.footer-hours { color: rgba(255, 244, 239, 0.66); font-size: 0.9rem; line-height: 1.6; margin-top: 0.4rem; }
.footer-hours strong { color: var(--brand-paper); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .enquiry-inner { grid-template-columns: 1fr; }
  /* these live here, not in the earlier responsive blocks: the .quisom base
     rules are declared further down the file and would otherwise win */
  .quisom-cols { grid-template-columns: 1fr 1fr; }
  .quisom-cols .quisom-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* The bar carried logo + full name + CA/ES/EN + burger = ~421px of content in
     a 393px viewport, so the name ran under "CA". The language switch is already
     repeated inside the burger overlay, so on phones the inline one goes. */
  .lang-switch { display: none; }
  .menu-overlay-lang { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
  .menu-overlay-lang a {
    font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.08em; color: var(--ink-dim);
    border: 1px solid var(--hairline-ink); border-radius: 0.5rem;
    padding: 0.4rem 0.7rem;
  }
  .menu-overlay-lang a[aria-current="true"] { color: var(--ink); border-color: var(--accent); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .quisom-cols { grid-template-columns: 1fr; gap: 1.8rem; }
  .quisom-cols .quisom-col:last-child { grid-column: auto; }
  .quisom-col p { max-width: none; }

  /* On mobile the WhatsApp shortcut belongs *after* the form — offered above it,
     it invites people to leave before they have seen what is being asked.
     display:contents lifts the intro's children into the same flex flow so the
     link can be ordered past the form without moving it in the markup. */
  .enquiry-inner { display: flex; flex-direction: column; gap: 0; }
  .enquiry-intro { display: contents; }
  .enquiry-lead { margin-bottom: 1.4rem; }
  .enquiry-form { order: 2; }
  .enquiry-alt { order: 3; align-self: stretch; justify-content: center; margin-top: 1.1rem; }
}