/* ============================================================
   El Parc de Vallbona · Igualada
   Warm rural-luxe + urban-elegant. Mobile-first, responsive.
   ============================================================ */

:root {
  /* Brand palette — Vallbona · coral #F28C4D · sand #D6C2AB · blue #78AFC5
     (variable names kept; values remapped to the brand) */
  --clay: #f28c4d;          /* coral — primary */
  --clay-dark: #db742f;     /* coral hover */
  --cream: #fbf7f1;         /* warm off-white background */
  --cream-2: #f3eadd;       /* sand-tint chips / alt blocks */
  --sand: #d6c2ab;          /* brand sand */
  --sage: #5e96ad;          /* deep sky-blue accent (Anoia / vistes) */
  --sage-dark: #3f7186;
  --olive: #284049;         /* deep teal-charcoal for dark sections */
  --charcoal: #22262b;      /* headings (near-black) */
  --ink: #34383d;           /* body text */
  --muted: #8a8073;         /* secondary text */
  --gold: #c89464;          /* warm tan accent (hairlines) */
  --white: #fffdfb;
  --line: rgba(40, 40, 45, 0.12);
  --shadow-sm: 0 2px 10px rgba(40, 40, 45, 0.08);
  --shadow-md: 0 12px 34px rgba(40, 40, 45, 0.14);
  --shadow-lg: 0 26px 60px rgba(30, 33, 38, 0.22);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --container: 1180px;
  --header-h: 74px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--charcoal); margin: 0 0 .5em; letter-spacing: .2px; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(56px, 9vw, 110px) 0; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .74rem;
  font-weight: 600; color: var(--clay); margin: 0 0 .8rem;
}
.eyebrow-light { color: var(--gold); }
.section-head { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.section-lead { color: var(--muted); font-size: 1.08rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--charcoal); color: #fff;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  padding: .85em 1.6em; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-align: center; line-height: 1.1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--clay); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--clay-dark); box-shadow: var(--shadow-md); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }
.btn-outline { background: transparent; color: var(--clay-dark); border-color: var(--clay); }
.btn-outline:hover { background: var(--clay); color: #fff; }
.btn-sm { padding: .6em 1.15em; font-size: .85rem; }
.btn-lg { padding: 1em 1.8em; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(246, 239, 230, 0); transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
.site-header.scrolled { background: rgba(246, 239, 230, .96); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--charcoal); }
.site-header:not(.scrolled) .brand { color: #fff; }
.brand-mark { display: inline-flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; letter-spacing: .5px; }
.brand-text em { font-style: normal; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; opacity: .82; margin-top: 3px; }

.main-nav { display: none; gap: 26px; }
.main-nav a { font-size: .92rem; font-weight: 500; color: inherit; position: relative; padding: 4px 0; }
.site-header:not(.scrolled) .main-nav { color: #fff; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--clay); transition: width .25s ease; }
.site-header.scrolled .main-nav a { color: var(--ink); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* Language switcher */
.lang-switch { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.5);
  padding: 7px 11px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: .8rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.site-header.scrolled .lang-current { background: #fff; color: var(--ink); border-color: var(--line); }
.lang-current:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; list-style: none; margin: 0; padding: 6px;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease; z-index: 120;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer;
  font-size: .9rem; color: var(--ink); transition: background .15s ease;
}
.lang-menu li:hover, .lang-menu li[aria-selected="true"] { background: var(--cream-2); }
.lang-code {
  font-weight: 700; font-size: .72rem; letter-spacing: .05em; background: var(--sand); color: var(--clay-dark);
  padding: 2px 6px; border-radius: 5px; min-width: 28px; text-align: center;
}
.lang-menu .lang-code { background: var(--cream-2); }

.header-cta { display: none; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5); border-radius: 11px; cursor: pointer;
}
.site-header.scrolled .nav-toggle { background: #fff; border-color: var(--line); }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: #fff; transition: .25s; border-radius: 2px; }
.site-header.scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
body.nav-open { overflow: hidden; }
@media (max-width: 900px) {
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: rgba(246,239,230,.99);
    flex-direction: column; align-items: flex-start; gap: 4px; padding: 26px 26px;
    transform: translateX(100%); transition: transform .3s ease; display: flex; backdrop-filter: blur(6px);
  }
  body.nav-open .main-nav { transform: translateX(0); }
  .main-nav a { color: var(--ink) !important; font-family: var(--serif); font-size: 1.5rem; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
}

/* ---------- Placeholders (swap with real photos) ---------- */
.ph { width: 100%; height: 100%; border-radius: inherit; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(0,0,0,.08)); }
.ph-1 { background-image: linear-gradient(135deg, #f2a35d, #db742f), radial-gradient(circle at 70% 30%, rgba(255,255,255,.28), transparent 60%); }
.ph-2 { background-image: linear-gradient(160deg, #8cc0d3, #5e96ad); }
.ph-studio { background-image: linear-gradient(140deg, #f4b079, #e0763a); }
.ph-onebed { background-image: linear-gradient(140deg, #e7dccb, #78afc5); }
.ph-twobed { background-image: linear-gradient(140deg, #9ec6d6, #3f7186); }
.ph-g1 { background-image: linear-gradient(160deg, #f4a866, #d6c2ab); }
.ph-g2 { background-image: linear-gradient(160deg, #8cc0d3, #284049); }
.ph-g3 { background-image: linear-gradient(160deg, #f0e4d2, #d6c2ab); }
.ph-g4 { background-image: linear-gradient(110deg, #f29a55, #78afc5, #284049); }
.ph-g5 { background-image: linear-gradient(160deg, #f4b079, #d6c2ab); }
.ph-g6 { background-image: linear-gradient(160deg, #d6c2ab, #78afc5); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: #fff; padding-top: var(--header-h); overflow: hidden;
  /* Al mòbil el contingut del hero és més alt que la pantalla i, amb
     align-items:center, un ítem que no hi cap sobreïx per DALT també: la
     primera línia quedava tapada per la capçalera fixa. "safe center" centra
     només quan hi cap i, si no, alinea a dalt respectant el padding. Els
     navegadors que no l'entenguin descarten la línia i mantenen el center. */
  align-items: safe center;
}
.hero-media {
  position: absolute; inset: 0;
  /* Real view photo with a warm brand tint; gradient stays as fallback */
  background-color: #284049;
  background-image:
    linear-gradient(120deg, rgba(40,64,73,.30), rgba(242,140,77,.12)),
    url("../img/hero.jpg");
  background-size: cover; background-position: center;
  transform: scale(1.05); animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom { to { transform: scale(1.14); } }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,24,18,.62), rgba(30,24,18,.18) 60%, transparent); }
.hero-content { position: relative; z-index: 2; max-width: 760px; padding-top: 40px; padding-bottom: 60px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 1rem; }
.hero-title { font-size: clamp(2.6rem, 7vw, 5rem); color: #fff; margin-bottom: .35em; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-subtitle { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 600px; color: rgba(255,255,255,.94); margin-bottom: 2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 2.4rem 0 0; padding: 0; font-size: .9rem; color: rgba(255,255,255,.9); }
.hero-badges li { letter-spacing: .03em; }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; transform: translateX(-50%); z-index: 2; }
.hero-scroll::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: scrollDot 1.6s ease infinite; }
@keyframes scrollDot { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 8px); } }

/* ---------- About ---------- */
.about { background: var(--white); }
.about-grid { display: grid; gap: clamp(34px, 5vw, 64px); align-items: center; }
.about-media { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 200px 140px; gap: 14px; }
.ph-about { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.about-media .ph-1 { grid-row: 1 / 3; }
.about-text h2 { margin-bottom: .4em; }
.about-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 14px; }
.about-points li { padding-left: 30px; position: relative; color: var(--ink); }
.about-points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(107,125,94,.18); }
.about-points strong { color: var(--charcoal); }

/* ---------- Cards (generic) ---------- */
.cards { display: grid; gap: 26px; }
.card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ---------- Apartments ---------- */
.apt-card .card-media { position: relative; height: 220px; }
.apt-card .ph { border-radius: 0; }
.card-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,253,250,.92); color: var(--clay-dark); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.card-body { padding: 24px 24px 26px; }
.card-meta { color: var(--clay); font-weight: 600; font-size: .92rem; margin: -.2rem 0 .8rem; }
.card-desc { color: var(--muted); font-size: .96rem; }
.card-feats { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.card-feats li { font-size: .8rem; background: var(--cream-2); color: var(--ink); padding: 5px 11px; border-radius: 999px; }
.apt-card.featured { border-color: var(--clay); box-shadow: var(--shadow-md); position: relative; }
.apt-card.featured::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--clay); border-radius: var(--radius-lg); pointer-events: none; }

/* Floor-door code (real unit reference under the plant name) */
.card-code { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-dark); margin: -.35rem 0 .7rem; }

/* Plant curiosity — editorial-magazine style: medallion logo + italic serif fact */
.plant-fact { display: flex; gap: 13px; align-items: flex-start; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.plant-logo { flex: none; width: 44px; height: 44px; padding: 6px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 50%; box-sizing: border-box; }
.plant-fact-text { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.06rem; line-height: 1.38; color: var(--charcoal); }
.plant-fact-label { display: block; font-family: var(--sans); font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin-bottom: 3px; }

/* Coming-soon apartments (real units, photos pending) */
.apt-soon { background: var(--cream); }
.apt-soon:hover { transform: none; box-shadow: var(--shadow-sm); }
.apt-soon .card-media { filter: saturate(.7); }
.card-tag-soon { background: var(--charcoal); color: #fff; }
.card-soon-note { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.card-soon-note::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--clay); vertical-align: middle; }

/* ---------- Business ---------- */
.business { background: linear-gradient(160deg, var(--olive), var(--charcoal)); color: #fff; }
.business h2, .business h3 { color: #fff; }
.business .section-lead { color: rgba(255,255,255,.82); }
.business-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; }
.biz-benefits { display: grid; gap: 22px; margin-top: 2.2rem; }
.biz-benefit { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px; }
.biz-benefit h3 { font-size: 1.2rem; margin-bottom: .35em; }
.biz-benefit p { color: rgba(255,255,255,.78); font-size: .94rem; margin: 0; }
.biz-ico { display: inline-flex; color: var(--gold); margin-bottom: 10px; }

.business-form-card { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 36px); box-shadow: var(--shadow-lg); }
.business-form-card h3 { color: var(--charcoal); }
.form-note { color: var(--muted); font-size: .94rem; margin-top: -.3rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 15px; margin-top: 1rem; }
.form-row { display: grid; gap: 15px; }
.form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.form input, .form select, .form textarea {
  font-family: var(--sans); font-size: .95rem; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--cream); color: var(--ink); width: 100%; transition: border-color .2s ease, box-shadow .2s ease;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(156,102,68,.15); background: #fff; }
.form textarea { resize: vertical; }
.form-success { background: rgba(107,125,94,.14); color: var(--sage-dark); padding: 12px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600; margin: 0; }

/* ---------- Gallery ---------- */
.gallery { background: var(--cream); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.g-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; height: 200px; box-shadow: var(--shadow-sm); }
.g-item .ph { transition: transform .4s ease; }
.g-item:hover .ph { transform: scale(1.06); }
.g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 14px; color: #fff; font-size: .9rem; font-weight: 600; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }

/* ---------- Amenities ---------- */
.amenities { background: var(--white); }
/* Una sola columna al mòbil: amb dues, etiquetes llargues com "Zona de
   bugaderia disponible" no caben i feien que tota la pàgina es pogués
   arrossegar en horitzontal. minmax(0,1fr) evita que cap pista creixi
   més enllà del contenidor. */
.amenity-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.amenity-list li { display: flex; align-items: center; gap: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-weight: 500; }
.am-ico { color: var(--clay-dark); flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--cream-2); border-radius: 10px; }

/* ---------- Location ---------- */
.location { background: var(--cream); }
.location-grid { display: grid; gap: clamp(30px, 4vw, 50px); align-items: center; }
.poi-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 16px; }
.poi-list li { display: flex; gap: 14px; align-items: flex-start; }
.poi-ico { color: var(--clay-dark); flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.poi-list strong { display: block; color: var(--charcoal); }
.poi-list span { color: var(--muted); font-size: .92rem; }
.location-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 360px; }
.location-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; filter: saturate(.92) contrast(.98); }
.map-link { position: absolute; right: 14px; bottom: 14px; background: var(--white); color: var(--clay-dark); font-weight: 600; font-size: .85rem; padding: 9px 14px; border-radius: 999px; box-shadow: var(--shadow-md); }

/* ---------- Booking ---------- */
.booking { background: var(--white); }
.booking-grid { display: grid; gap: 26px; align-items: start; }
.booking-availability { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 30px); }
.avail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.avail-head h3 { margin: 0; }
.avail-controls { display: flex; align-items: center; gap: 10px; }
.cal-nav { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--clay-dark); transition: background .15s ease; }
.cal-nav:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
.cal-month { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; min-width: 150px; text-align: center; text-transform: capitalize; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 9px; font-size: .9rem; font-weight: 600; background: #fff; border: 1.5px solid transparent; cursor: pointer; transition: all .12s ease; }
.cal-cell.empty { background: transparent; cursor: default; }
.cal-cell.free:hover { border-color: var(--clay); }
.cal-cell.busy { background: var(--sand); color: var(--muted); text-decoration: line-through; cursor: not-allowed; opacity: .7; }
.cal-cell.past { color: #c9bcab; cursor: default; pointer-events: none; }
.cal-cell.selected { background: var(--clay); color: #fff; }
.cal-cell.in-range { background: rgba(156,102,68,.16); }
.cal-status { font-size: .85rem; color: var(--muted); margin: 14px 0 0; }
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.cal-legend li { display: flex; align-items: center; gap: 7px; }
.dot { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.dot-free { background: #fff; border: 1.5px solid var(--line); }
.dot-busy { background: var(--sand); }
.dot-sel { background: var(--clay); }

.booking-card { background: linear-gradient(165deg, var(--cream-2), var(--cream)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 34px); box-shadow: var(--shadow-sm); }
.booking-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; min-height: 80px; font-size: .94rem; }
.booking-summary p { margin: 0; color: var(--muted); }
.booking-summary .sum-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink); }
.booking-summary .sum-row strong { color: var(--charcoal); }
.secure-note { font-size: .82rem; color: var(--muted); text-align: center; margin: 12px 0 0; }
/* Honeypot — invisible to real visitors, bots that fill every input still find it */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book-pay-error { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #FBEAE5; color: #9A3B2B; font-size: .86rem; font-weight: 600; text-align: center; }

/* Bloc "Reserva i paga" (Stripe) */
.book-pay { margin: 0 0 18px; }
.book-pay[hidden] { display: none; }
.book-pay-lines { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; font-size: .94rem; }
.book-pay-lines .sum-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink); }
.book-pay-lines .sum-row strong { color: var(--charcoal); }
.book-pay-lines .sum-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.06rem; }
.book-pay-lines .sum-total strong { color: var(--clay-dark); }
.book-pay-msg { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #FBEAE5; color: #9A3B2B; font-size: .86rem; font-weight: 600; text-align: center; }
.book-pay-msg[hidden] { display: none; }
.book-pay-secure { font-size: .8rem; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* Quote-request form inside the apartment modal */
.book-quote-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sand, #e6ddce); }
.book-quote-title { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 4px; }
.book-quote-form .form-note { margin: 0 0 14px; }
.book-quote-form label em { font-style: normal; color: var(--muted); font-weight: 400; }

/* Top banner shown after returning from Stripe Checkout (?booking=success|cancel) */
.booking-banner { position: sticky; top: 0; z-index: 150; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 20px; font-family: var(--sans); font-weight: 700; font-size: .92rem; text-align: center; }
.booking-banner[hidden] { display: none; }
.booking-banner.is-success { background: #E4F2E6; color: #2A6B3C; }
.booking-banner.is-cancel { background: #FBEAE5; color: #9A3B2B; }
.booking-banner button { background: none; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; flex: none; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.paywall-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; font-size: .8rem; color: var(--muted); }
.paywall-badges span { background: var(--cream-2); padding: 6px 12px; border-radius: 8px; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--cream); }
.tst-card { padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.tst-card blockquote { margin: 0; font-family: var(--serif); font-size: 1.22rem; line-height: 1.4; color: var(--charcoal); }
.tst-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.tst-card figcaption strong { color: var(--clay-dark); }
.tst-card figcaption span { font-size: .85rem; color: var(--muted); }

/* ---------- Final CTA ---------- */
.final-cta { background: linear-gradient(140deg, var(--clay), var(--clay-dark)); color: #fff; text-align: center; }
.final-cta h2 { color: #fff; }
.final-cta-inner { max-width: 660px; margin: 0 auto; }
.final-cta p { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-bottom: 1.8rem; }
.final-cta .hero-ctas { justify-content: center; }
.final-cta .btn-primary { background: #fff; color: var(--clay-dark); }
.final-cta .btn-primary:hover { background: var(--cream); }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,.78); padding: clamp(48px, 6vw, 72px) 0 28px; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1fr; }
.footer-brand .brand-text strong { color: #fff; font-size: 1.5rem; }
.footer-brand .brand-text em { color: var(--gold); }
.footer-brand p { margin: 14px 0 16px; max-width: 320px; font-size: .92rem; }
.socials { display: flex; gap: 16px; }
.socials a { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.85); border-bottom: 1px solid transparent; transition: border-color .2s; }
.socials a:hover { border-color: var(--gold); }
.footer-col h4 { color: #fff; font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.footer-contact, .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-contact a, .footer-links a { font-size: .92rem; color: rgba(255,255,255,.78); transition: color .2s; }
.footer-contact a:hover, .footer-links a:hover { color: var(--gold); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.footer-bottom p { margin: 0; }
.legal-links { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0; }
.legal-links a:hover { color: var(--gold); }

@media (min-width: 640px) {
  .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; text-align: left; }
  .footer-bottom p { grid-column: 1; justify-self: start; }
  .legal-links { grid-column: 2; justify-self: center; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (min-width: 440px) {
  .amenity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 620px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .amenity-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .about-grid { grid-template-columns: 1fr 1.1fr; }
  /* Named-area mosaic (not auto-placed) so 6 photos always tile a clean
     rectangle: one tall hero, one wide feature anchoring the bottom, four
     square accents — no leftover gaps regardless of caption length. */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200px 200px;
    grid-template-areas:
      "tall  sq1  sq2  sq3"
      "tall  wide wide sq4";
  }
  .g-tall { grid-area: tall; height: auto; }
  .g-wide { grid-area: wide; }
  .g-sq1 { grid-area: sq1; }
  .g-sq2 { grid-area: sq2; }
  .g-sq3 { grid-area: sq3; }
  .g-sq4 { grid-area: sq4; }
  .biz-benefits { grid-template-columns: 1fr 1fr; }
  .booking-grid { grid-template-columns: 1.15fr .85fr; }
  /* Tres blocs: marca, contacte i enllaços. La marca es queda amb 2fr —és la
     protagonista— i el que s'eixampla és la separació entre columnes, perquè
     les dues llistes no quedin arraulides al mig. Abans hi havia una quarta
     pista (de quan hi havia la columna "Comercial · Empreses") que es quedava
     buida i deixava un forat a la dreta. */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; column-gap: clamp(34px, 4vw, 56px); }
}
@media (min-width: 900px) {
  .main-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .cards.tst-cards { grid-template-columns: repeat(3, 1fr); }
  .cards.apt-cards { grid-template-columns: repeat(2, 1fr); }
  .business-grid { grid-template-columns: 1.15fr .85fr; }
  .location-grid { grid-template-columns: 1fr 1.1fr; }
}

/* ============================================================
   ELEGANCE LAYER — refinements for a more luxurious feel.
   Loaded last so it tunes the base styles above.
   ============================================================ */

/* Finer typography: subtle tracking, better numerals & rendering */
body { font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.015em; font-weight: 500; }
.hero-title { font-weight: 500; letter-spacing: -0.02em; }
.tst-card blockquote { font-weight: 500; }

/* Eyebrow flanked by a fine gold rule */
.eyebrow { display: inline-flex; align-items: center; gap: .7em; }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); opacity: .9; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--gold); opacity: .9; }

/* A short gold hairline under centred section titles */
.section-head h2 { position: relative; padding-bottom: .5em; }
.section-head h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 54px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Softer, layered shadows for depth */
:root {
  --shadow-sm: 0 1px 2px rgba(40,40,45,.05), 0 6px 18px rgba(40,40,45,.06);
  --shadow-md: 0 4px 10px rgba(40,40,45,.07), 0 18px 44px rgba(40,40,45,.10);
  --shadow-lg: 0 10px 24px rgba(30,33,38,.12), 0 40px 80px rgba(30,33,38,.18);
}

/* Buttons: refined tracking + smoother easing + gentle lift */
.btn { letter-spacing: .01em; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease, color .25s ease; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline:hover, .btn-ghost:hover { transform: translateY(-1px); }

/* Header: hairline + a touch more refinement when scrolled */
.site-header.scrolled { border-bottom: 1px solid var(--line); background: rgba(246,239,230,.92); }
.main-nav a { letter-spacing: .01em; }

/* Brand wordmark a little more distinguished */
.brand-text strong { letter-spacing: .8px; }
.brand-text em { letter-spacing: .26em; }

/* Cards: thinner edge, image zoom on hover, smoother motion */
.card { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.apt-card .card-media .ph { transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.apt-card:hover .card-media .ph { transform: scale(1.05); }
.apt-card.featured { transform: translateY(-6px); }
.apt-card.featured:hover { transform: translateY(-12px); }

/* Featured ribbon on the most-popular apartment */
.apt-card.featured .card-tag { background: var(--clay); color: #fff; }

/* Hero: richer cinematic depth + slow fade-up of content */
.hero-overlay { background:
  linear-gradient(90deg, rgba(28,22,16,.66), rgba(28,22,16,.20) 55%, rgba(28,22,16,.05)),
  radial-gradient(120% 80% at 50% 100%, rgba(20,16,12,.45), transparent 60%); }
.hero-eyebrow { letter-spacing: .3em; }
.hero-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: .8em; }
.hero-badges li { position: relative; padding-left: 2px; }

/* Gallery: gentle dark frame + smoother caption reveal */
.g-item { box-shadow: var(--shadow-sm); }
.g-item figcaption { transform: translateY(4px); opacity: .92; transition: transform .35s ease, opacity .35s ease; }
.g-item:hover figcaption { transform: translateY(0); opacity: 1; }

/* Amenities & POI: refined hover */
.amenity-list li { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.amenity-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(199,154,75,.4); }

/* Inputs: brand focus ring */
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: 0 0 0 3px rgba(242,140,77,.22); border-color: var(--clay); }

/* Calendar selected day a touch more refined */
.cal-cell.selected { box-shadow: 0 4px 12px rgba(242,140,77,.38); }

/* Section rhythm: a hair more breathing room on large screens */
@media (min-width: 1100px) {
  .section { padding: clamp(72px, 8vw, 128px) 0; }
  .container { padding: 0 32px; }
}

/* Decorative fine top accent line for the whole page (brand gradient) */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--clay), var(--sand), var(--sage));
}

/* Nature & tranquility band */
/* Full-bleed colour band (magazine-page treatment) — breaks out of .container
   to the viewport edge, white photo cards sit crisp on top of the warm tint. */
.nature-band {
  /* Abans: width:100vw + left:50% + margin-left:-50vw. El problema és que 100vw
     inclou l'amplada de la barra de desplaçament vertical i el contingut no,
     així que la banda sortia uns 8 px per cada costat i tota la pàgina es podia
     arrossegar en horitzontal. Aquest div ja és fill directe de la <section>,
     que ocupa tota l'amplada: no cal cap truc per treure'l del contenidor. */
  width: auto; position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  background: linear-gradient(165deg, #e9dcc9 0%, var(--sand) 100%);
  padding: clamp(48px, 7vw, 84px) 0;
}
.nature-head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.nature-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.nature-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0 0 24px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.nature-card .nature-text { padding: 18px 22px 0; }
.nature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(120,175,197,.5); }
.nature-ico {
  position: relative; overflow: hidden; display: block;
  width: 100%; height: 200px; border-radius: 0; margin-bottom: 0;
  background: var(--cream-2);
}
.nature-ico::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .68;                       /* translucent route image */
  transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.nature-ico::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(160deg, rgba(255,253,251,.06), rgba(40,64,73,.16));
}
.nature-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.nature-card:hover .nature-photo { transform: scale(1.05); }
.nature-card:hover .nature-ico::before { opacity: .9; transform: scale(1.05); }
.nat-forest::before { background-image: url(../img/nat-forest.svg); }
.nat-oak::before    { background-image: url(../img/nat-oak.svg); }
.nat-hills::before  { background-image: url(../img/nat-hills.svg); }
.nat-water::before  { background-image: url(../img/nat-water.svg); }
.nature-card h3 { font-size: 1.3rem; margin-bottom: .3em; }
.nature-card p { color: var(--muted); font-size: .94rem; margin: 0; }
.nature-link {
  display: inline-flex; margin: clamp(26px, 4vw, 38px) auto 0; justify-content: center;
  width: 100%; text-align: center; color: var(--sage-dark); font-weight: 600; font-size: .96rem;
  border-bottom: 0;
}
.nature-link:hover { color: var(--clay-dark); }
@media (min-width: 620px) { .nature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .nature-grid { grid-template-columns: repeat(4, 1fr); } }

/* Real apartment & gallery photos (auto-shown when files are added;
   the brand gradient stays as fallback if a file is missing — see app.js) */
.apt-photo, .gallery-photo, .cover-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; display: block;
}
.cover-photo { border-radius: inherit; }

/* Discover Igualada / Nearby place cards */
.place-cards { grid-template-columns: 1fr; }
.place-card { display: flex; flex-direction: column; margin: 0; }
.place-media {
  position: relative; height: 210px; overflow: hidden;
  background: linear-gradient(150deg, #d6c2ab, #5e96ad);
}
.place-media-fallback { background: linear-gradient(150deg, #f2a35d, #5e96ad); }
.place-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.place-card:hover .place-media img { transform: scale(1.05); }
.place-card figcaption { padding: 20px 22px 24px; }
.place-card h3 { font-size: 1.3rem; margin-bottom: .25em; }
.place-card p { color: var(--muted); font-size: .94rem; margin: 0; }
.nearby { background: var(--cream); }
@media (min-width: 640px) { .place-cards { grid-template-columns: repeat(3, 1fr); } }
.apt-card .card-tag { z-index: 2; }
.g-item figcaption { z-index: 2; }
.gallery-photo { transition: transform .4s ease; }
.g-item:hover .gallery-photo { transform: scale(1.06); }

/* Real Vallbona logo (transparent PNG, works on light & dark) */
.brand-logo { height: 46px; width: auto; display: block; }
.site-header:not(.scrolled) .brand-logo { height: 56px; }
.brand-logo-footer { height: 60px; margin-bottom: 4px; }
@media (max-width: 480px) {
  .brand-logo { height: 40px; }
  .site-header:not(.scrolled) .brand-logo { height: 46px; }
}

/* Refined text selection */
::selection { background: rgba(242,140,77,.28); color: var(--charcoal); }

/* ============================================================
   UPCOMING EVENTS — Anoia agenda
   ============================================================ */
.events { background: var(--white); }
.events-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.event-row {
  display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 16px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; transition: transform .2s ease, box-shadow .2s ease;
}
.event-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.event-date { text-align: center; line-height: 1.1; }
.event-date .ev-day { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--clay-dark); }
.event-date .ev-month { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.event-body h3 { font-size: 1.05rem; margin: 0 0 .2em; font-weight: 600; }
.event-loc { font-size: .86rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.event-loc svg { flex: none; }
.events-status { text-align: center; color: var(--muted); }
.events-note { text-align: center; font-size: .78rem; color: var(--muted); margin: 22px 0 0; }
@media (min-width: 640px) { .event-row { grid-template-columns: 100px 1fr; } }

/* ============================================================
   BOOKING STEPS + per-apartment detail modal
   ============================================================ */
.book-steps { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
.book-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.book-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--clay); color: #fff; font-weight: 700; font-family: var(--serif); font-size: 1.15rem; margin-bottom: 12px; }
.book-step h3 { font-size: 1.25rem; margin-bottom: .3em; }
.book-step p { color: var(--muted); font-size: .95rem; margin: 0; }
.book-cta { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
.book-cta .secure-note { margin-top: 14px; }
.book-cta .paywall-badges { margin-top: 14px; }
@media (min-width: 760px) { .book-steps { grid-template-columns: repeat(3, 1fr); } }

/* Modal */
body.modal-open { overflow: hidden; }
.apt-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow-y: auto; }
.apt-modal[hidden] { display: none; }
.apt-modal-overlay { position: fixed; inset: 0; background: rgba(20,24,28,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.apt-modal.open .apt-modal-overlay { opacity: 1; }
.apt-modal-panel {
  position: relative; z-index: 1; width: 100%; max-width: 960px; margin: auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; transform: translateY(16px) scale(.99); opacity: 0; transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
}
.apt-modal.open .apt-modal-panel { transform: none; opacity: 1; }
.apt-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92); color: var(--charcoal); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
}
.apt-modal-close:hover { background: var(--clay); color: #fff; }
/* Modal hero — botanical engraving + elegant title (magazine style) */
.apt-modal-hero { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); padding: clamp(22px, 3.4vw, 38px) clamp(22px, 3.6vw, 42px); background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%); border-bottom: 1px solid var(--line); }
.apt-hero-flower-wrap { flex: none; width: clamp(104px, 17vw, 168px); display: grid; place-items: center; }
.apt-hero-flower { width: 100%; height: auto; display: block; }
.apt-hero-text { min-width: 0; }
.apt-hero-code { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin: 0 0 .3rem; }
.apt-modal-hero h3 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); line-height: 1.04; margin: 0 0 .4rem; }
.apt-hero-fact { font-family: var(--serif); font-style: italic; font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.4; color: var(--muted); margin: 0; max-width: 46ch; }

.apt-modal-grid { display: grid; grid-template-columns: 1fr; }
.apt-modal-left { padding: clamp(20px, 3vw, 30px); min-width: 0; }
.apt-modal-right { padding: clamp(20px, 3vw, 30px); border-top: 1px solid var(--line); min-width: 0; }
.apt-modal-chars { margin-top: 20px; }
.apt-modal-meta { color: var(--clay); font-weight: 600; margin: 0 0 .8rem; }
.apt-modal-desc { color: var(--ink); }
.apt-modal-feats { margin: 0 0 18px; }
.apt-modal-feats li { display: inline-flex; align-items: center; gap: 7px; }
.apt-modal-feats li svg { color: var(--clay-dark); flex: none; }

/* Detailed amenities (full real list), collapsible and grouped by category */
.apt-amen { margin: 0 0 18px; }
.apt-amen-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 18px; font-family: var(--sans); font-size: .86rem; font-weight: 700; color: var(--clay-dark); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.apt-amen-toggle:hover { border-color: var(--clay); background: var(--cream); }
.apt-amen-chev { font-size: 1.1rem; line-height: 1; transition: transform .25s ease; }
.apt-amen-toggle.open .apt-amen-chev { transform: rotate(90deg); }
.apt-amen-list { margin-top: 22px; display: grid; gap: 30px 44px; }
/* Sense aquesta línia el botó "Veure tot l'equipament" no plega res: el
   JavaScript posa l'atribut hidden, però el display d'aquí sobre li guanya i
   la llista es queda oberta. La resta de plegables de la web ja tenen la
   seva (.apt-modal[hidden], .booking-banner[hidden]…); a aquest li faltava. */
.apt-amen-list[hidden] { display: none; }
/* Amb graella, una fila és tan alta com la seva categoria més llarga: "Cuina i
   menjador" (8 elements) al costat d'"Internet" (1) deixava un forat enorme.
   Amb columnes de text les categories s'empaqueten seguides; break-inside
   evita que una categoria quedi partida entre dues columnes. */
.am2-cat { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
.am2-cat h5 {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay-dark); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.am2-cat ul { list-style: none; padding: 0; margin: 0; }
.am2-cat li { display: flex; align-items: center; gap: 13px; color: var(--ink); font-size: .92rem; line-height: 1.35; padding: 10px 0; border-bottom: 1px solid rgba(40,40,45,.07); }
.am2-cat li:last-child { border-bottom: none; }
.am2-ico {
  position: relative; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px; background: var(--cream-2);
}
.am2-cat li svg { flex: none; color: var(--clay-dark); width: 15px; height: 15px; }
/* Not available at this unit: dim everything + a thin diagonal stroke across the icon chip only */
.am2-cat li.am2-off { color: var(--muted); }
.am2-cat li.am2-off .am2-ico { opacity: .55; }
.am2-cat li.am2-off .am2-ico::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.4px; background: currentColor; transform: rotate(-38deg); }
.am2-cat li.am2-off .am2-tx { text-decoration: line-through; text-decoration-color: var(--line); text-decoration-thickness: 1.4px; opacity: .75; }
.am2-cat li.am2-off .am2-tx small { text-decoration: none; }
.am2-tx small { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; }
@media (min-width: 560px) {
  .apt-amen-list { display: block; columns: 2; column-gap: 44px; }
  .am2-cat { margin: 0 0 30px; }
  /* Sense això, l'última categoria de cada columna arrossega un marge que
     desquadra el final del bloc. */
  .am2-cat:last-child { margin-bottom: 0; }
}
.apt-modal-review { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--clay); background: var(--cream); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--serif); font-size: .98rem; font-style: italic; color: var(--charcoal); }
.apt-modal-review cite { display: block; margin-top: 6px; font-family: var(--sans); font-style: normal; font-size: .8rem; font-weight: 600; color: var(--muted); }
.apt-modal-reg { font-size: .76rem; color: var(--muted); margin: 0 0 18px; }

/* Modal gallery */
.apt-modal-gallery { background: var(--cream-2); border-radius: var(--radius); overflow: hidden; }
.apt-gal-main { aspect-ratio: 4 / 3; overflow: hidden; }
.apt-gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease; }
.apt-gal-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.apt-gal-thumb { flex: 0 0 72px; height: 56px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; padding: 0; background: none; }
.apt-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apt-gal-thumb.active { border-color: var(--clay); }

.apt-modal-cal { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
/* Internal/admin note — never shown to regular visitors, only in ?edit mode */
.cal-sync { display: none; font-size: .8rem; color: var(--sage-dark); margin: 12px 0 0; font-weight: 600; }

.book-consent { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; font-size: .85rem; color: var(--ink); cursor: pointer; }
.book-consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--clay); cursor: pointer; }
.book-consent a { color: var(--clay-dark); text-decoration: underline; }

.book-extras { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 14px; margin: 16px 0 0; }
.book-extras legend { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .03em; color: var(--clay-dark); padding: 0 4px; }
.book-extra-item { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 600; color: var(--ink); margin: 8px 0; cursor: pointer; }
.book-extra-item input { flex: none; width: 16px; height: 16px; accent-color: var(--clay); cursor: pointer; }
.book-extra-note { font-size: .78rem; color: var(--muted); margin: 4px 0 0; }
body.vb-editing .cal-sync { display: block; }
body.vb-editing .cal-sync::before { content: "🔐 Admin · "; font-weight: 700; }
#mPayBtn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

@media (min-width: 780px) {
  .apt-modal-grid { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .apt-modal-right { border-top: none; border-left: 1px solid var(--line); }
}

/* ============================================================
   IMAGE EDIT MODE (?edit) — drag & drop image manager
   ============================================================ */
.vb-editing { scroll-behavior: auto; }
.vb-drop {
  position: absolute; inset: 0; z-index: 30; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40,64,73,.30); border: 2px dashed rgba(255,255,255,.85);
  border-radius: inherit; opacity: 0; transition: opacity .15s ease;
}
.vb-slot:hover > .vb-drop, .vb-drop.drag { opacity: 1; }
.vb-drop.drag { background: rgba(242,140,77,.55); border-color: #fff; }
.vb-drop-inner {
  text-align: center; color: #fff; pointer-events: none; padding: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5); line-height: 1.2;
}
.vb-drop-ico { display: block; font-size: 1.7rem; margin-bottom: 4px; }
.vb-drop-msg { font-size: .8rem; font-weight: 600; }
.vb-drop-file {
  display: inline-block; margin-top: 8px; font-size: .68rem; font-weight: 700;
  background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 999px; letter-spacing: .02em;
}
/* Anunci marcat com a no visible. Per als visitants la targeta ni tan sols
   arriba al DOM (app.js la treu); això només es veu dins l'editor, perquè
   l'admin sàpiga d'un cop d'ull què no està sortint i ho pugui desfer. */
.vb-editing .vb-apt-hidden { opacity: .45; filter: grayscale(1); position: relative; }
.vb-editing .vb-apt-hidden::after {
  content: "AMAGAT"; position: absolute; top: 12px; right: 12px; z-index: 33;
  background: var(--charcoal); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; padding: 5px 10px; border-radius: 999px;
}
/* Es qualifiquen amb .vb-admin-card perquè guanyin a les regles genèriques
   del tauler (label{display:block} i input{width:100%}), que són més avall. */
.vb-vis-list { display: grid; gap: 2px; margin: 6px 0 18px; }
.vb-admin-card .vb-vis-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 9px; cursor: pointer; margin-bottom: 0; font-weight: 500;
}
.vb-admin-card .vb-vis-row:hover { background: var(--cream); }
.vb-admin-card .vb-vis-row input {
  width: 18px; height: 18px; margin: 0; padding: 0; flex: none;
  accent-color: var(--clay); cursor: pointer;
}
.vb-vis-name { font-size: .95rem; }
.vb-admin-card .vb-vis-row input:not(:checked) + .vb-vis-name { color: var(--muted); text-decoration: line-through; }

/* L'etiqueta de la targeta ("Vistes al Parc de Vallbona") és text editable,
   però viu DINS del marc de la foto, que en mode edició queda tapat per la
   zona d'arrossegar (.vb-drop, z-index 30). Sense això, clicar l'etiqueta
   obria el selector de fitxers en lloc de deixar-hi escriure. */
.vb-editing .card-tag { z-index: 32; }
.vb-slot-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.vb-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,.95); color: var(--charcoal); font-size: .95rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.vb-btn:hover { background: var(--clay); color: #fff; }
.vb-hero-slot { position: absolute; inset: var(--header-h) 16px auto 16px; height: 150px; z-index: 30; }

/* Pan/crop controls — choose which part of the photo shows in a fixed slot */
.vb-pos-tools {
  position: absolute; left: 8px; bottom: 8px; z-index: 31; display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.55); padding: 5px 8px; border-radius: 8px; opacity: 0; transition: opacity .15s ease;
}
.vb-slot:hover .vb-pos-tools { opacity: 1; }
.vb-pos-label { color: #fff; font-size: .7rem; }
.vb-pos-tools input[type="range"] { width: 54px; height: 14px; accent-color: var(--clay); cursor: pointer; }

/* Inline text editing */
[data-i18n].vb-text-editable { outline: 1px dashed transparent; border-radius: 4px; cursor: text; transition: outline-color .15s ease, background .15s ease; }
[data-i18n].vb-text-editable:hover { outline-color: rgba(242,140,77,.6); background: rgba(242,140,77,.06); }
[data-i18n].vb-text-editable:focus { outline: 2px solid var(--clay); background: rgba(242,140,77,.1); }

/* Admin login gate (ab-admin.html) */
.vb-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--olive); padding: 24px; }
.vb-login-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(28px,5vw,40px); max-width: 380px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; }
.vb-login-card img { height: 56px; margin: 0 auto 20px; }
.vb-login-card h1 { font-size: 1.4rem; margin-bottom: 1.2em; }
.vb-login-card .form { text-align: left; }
.vb-login-error { color: #c0392b; font-size: .85rem; min-height: 1.2em; margin: 6px 0 0; }

/* Tauler d'emergència (botó de pànic) — a ab-admin.html */
.vb-panic-card { max-width: 420px; }
.vb-panic-status { font-weight: 700; font-size: .95rem; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; background: var(--cream-2); color: var(--ink); }
.vb-panic-status.is-on { background: #FBEAE5; color: #9A3B2B; }
.vb-panic-status.is-off { background: #E7F5EC; color: #1F7A45; }
.vb-panic-actions { margin-bottom: 4px; }
.vb-panic-btn { font-size: .95rem; }
.vb-panic-danger { background: #C0392B; color: #fff; border-color: #C0392B; }
.vb-panic-danger:hover { background: #9A3B2B; border-color: #9A3B2B; }
.vb-panic-hint { font-size: .82rem; color: var(--muted); margin: 10px 0 0; text-align: left; }
.vb-panic-custom { text-align: left; margin: 18px 0 4px; font-size: .88rem; }
.vb-panic-custom summary { cursor: pointer; font-weight: 600; color: var(--clay-dark); margin-bottom: 10px; }
.vb-panic-custom label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 10px; }
.vb-panic-custom input, .vb-panic-custom textarea { width: 100%; margin-top: 5px; font-family: var(--sans); font-size: .88rem; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--ink); resize: vertical; }
.vb-panic-error { color: #9A3B2B; font-size: .85rem; margin: 10px 0 0; }
.vb-panic-links { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.btn-link { background: none; border: none; color: var(--muted); font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 4px; }
.btn-link:hover { color: var(--clay-dark); }

/* Events admin panel rows */
.vb-ev-row { display: grid; grid-template-columns: 125px 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.vb-ev-row input { font-family: var(--sans); font-size: .85rem; padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 8px; min-width: 0; }
.vb-ev-row button { flex: none; }
@media (max-width: 760px) { .vb-ev-row { grid-template-columns: 1fr 1fr; } .vb-ev-row .vb-ev-del { grid-column: span 2; } }

.vb-toolbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: var(--charcoal); color: #fff; padding: 12px 18px; border-radius: 999px;
  box-shadow: var(--shadow-lg); max-width: calc(100vw - 24px);
}
.vb-tb-title { font-weight: 700; font-size: .9rem; }
.vb-tb-hint { font-size: .78rem; color: rgba(255,255,255,.72); }
.vb-tb-btn {
  border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: .82rem; cursor: pointer;
}
.vb-tb-btn:hover { background: rgba(255,255,255,.15); }
.vb-tb-exit { background: var(--clay); border-color: var(--clay); }
.vb-tb-exit:hover { background: var(--clay-dark); }
.vb-tb-publish { background: #2e7d4f; border-color: #2e7d4f; font-weight: 700; }
.vb-tb-publish:hover { background: #256b43; }
.vb-tb-publish:disabled { opacity: .7; cursor: default; }

/* Admin settings panel (domain / hosting / API connections) */
.vb-admin-panel { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding: 28px 14px; overflow-y: auto; }
.vb-admin-panel[hidden] { display: none; }
.vb-admin-overlay { position: fixed; inset: 0; background: rgba(20,24,28,.6); backdrop-filter: blur(3px); }
.vb-admin-card {
  position: relative; z-index: 1; width: 100%; max-width: 640px; margin: auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3vw, 32px);
}
.vb-admin-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--cream-2); color: var(--charcoal); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.vb-admin-close:hover { background: var(--clay); color: #fff; }
.vb-admin-card h3 { margin-bottom: .4em; padding-right: 30px; }
.vb-admin-note { color: var(--muted); font-size: .88rem; margin-bottom: 1.4rem; }
.vb-admin-card fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 18px; margin: 0 0 18px; }
.vb-admin-card legend { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clay-dark); padding: 0 6px; }
.vb-admin-card label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.vb-admin-hint { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .78rem; }
.vb-admin-card input { width: 100%; margin-top: 5px; font-family: var(--sans); font-size: .88rem; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--ink); }
.vb-admin-card input:focus { outline: none; border-color: var(--clay); background: #fff; }
.vb-admin-apt { background: var(--cream); }
.vb-admin-apt + .vb-admin-apt { margin-top: -6px; }
.vb-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Colors admin panel */
.vb-colors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 18px; }
.vb-color-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.vb-color-row input[type="color"] { width: 46px; height: 30px; flex: none; margin: 0; padding: 2px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
@media (max-width: 560px) { .vb-colors-grid { grid-template-columns: 1fr; } }

/* Amenities admin panel */
.vb-amen-aptpick select { width: 100%; margin-top: 5px; font-family: var(--sans); font-size: .9rem; font-weight: 600; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--ink); }
.vb-amen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 18px; }
.vb-amen-cat { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0; }
.vb-amen-cat legend { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clay-dark); padding: 0 4px; }
.vb-amen-item { display: flex !important; align-items: center; gap: 8px; font-size: .86rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; cursor: pointer; }
.vb-amen-item input[type="checkbox"] { width: auto !important; flex: none; margin: 0; accent-color: var(--clay); }
@media (max-width: 700px) { .vb-amen-list { grid-template-columns: 1fr; } }
.vb-admin-actions .vb-tb-btn { border-color: var(--line); color: var(--ink); }
.vb-admin-actions .vb-tb-btn:hover { background: var(--cream-2); }
.vb-admin-actions .vb-tb-exit { color: #fff; }
.vb-admin-actions .vb-tb-exit:hover { background: var(--clay-dark); }