/* Apartaments Espai d'Àger — web nova (prototip). Identitat 22-10-2026:
   5 colors, Fraunces (títols) + Work Sans (text). Teula només per a allò clicable. */
:root {
  --pedra: #F5F0E6;
  --nogal: #5A3A24;
  --teula: #A84A28;
  --congost: #1F6F6B;
  --nit: #1D2433;
  --pedra-fosca: #EBE3D3;
  --linia: #D9CDB8;
  --nogal-suau: #6E5848;
  --max: 1160px;
  --gutter: clamp(20px, 4vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 17px; line-height: 1.65;
  color: var(--nogal); background: var(--pedra);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.4rem; }
p + p { margin-top: 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nogal-suau); margin-bottom: 14px; }
.lead { font-size: 1.15rem; color: var(--nogal-suau); max-width: 56ch; }
section { padding: clamp(64px, 9vw, 120px) 0; }
:focus-visible { outline: 3px solid var(--congost); outline-offset: 3px; border-radius: 4px; }

/* Botons — la teula és només per a la reserva i els enllaços clau */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 .95rem "Work Sans", sans-serif; letter-spacing: .02em; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-reserva { background: var(--teula); color: #fff; }
.btn-reserva:hover { background: #8f3e20; }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { background: var(--nogal); color: var(--pedra); border-color: var(--nogal); }
.on-dark .btn-line:hover { background: var(--pedra); color: var(--nit); border-color: var(--pedra); }
.link { color: var(--teula); font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }

/* Capçalera */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245,240,230,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { border-bottom-color: var(--nogal); }
.nav .btn { padding: 10px 22px; }
.menu-btn { display: none; background: none; border: 0; color: var(--nogal); cursor: pointer; padding: 8px; }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--pedra); padding: 16px var(--gutter) 24px; border-bottom: 1px solid var(--linia); display: none; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { font-size: 1.1rem; padding: 10px 0; }
  .nav .btn { margin-top: 10px; }
}

/* Hero */
.hero { position: relative; min-height: min(86vh, 780px); display: flex; align-items: flex-end; color: var(--pedra); padding: 0; background: var(--nit) center/cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29,36,51,.72) 0%, rgba(29,36,51,.35) 55%, rgba(29,36,51,.1) 100%), linear-gradient(180deg, rgba(29,36,51,.2) 0%, rgba(29,36,51,.3) 40%, rgba(29,36,51,.85) 100%); }
.hero .wrap { position: relative; width: 100%; padding-top: 140px; padding-bottom: clamp(48px, 7vw, 88px); }
.hero h1 { max-width: 14ch; }
.hero p.lead { color: rgba(245,240,230,.9); margin-top: 20px; }
.hero .eyebrow { color: rgba(245,240,230,.8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .btn-line { color: var(--pedra); }

/* Cercador de disponibilitat (demana per WhatsApp fins que hi hagi motor de reserves) */
.finder { background: var(--pedra); color: var(--nogal); border-radius: 18px; padding: 22px; margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: end; box-shadow: 0 18px 50px rgba(29,36,51,.35); }
.finder label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nogal-suau); margin-bottom: 6px; }
.finder input, .finder select { width: 100%; font: 500 1rem "Work Sans", sans-serif; color: var(--nogal); background: #fff; border: 1.5px solid var(--linia); border-radius: 10px; padding: 12px 14px; min-height: 48px; }
.finder input:focus, .finder select:focus { outline: 3px solid var(--congost); outline-offset: 1px; border-color: var(--congost); }
.finder .btn { min-height: 48px; }
.finder-note { grid-column: 1 / -1; font-size: .85rem; color: var(--nogal-suau); margin-top: -2px; }
@media (max-width: 860px) { .finder { grid-template-columns: 1fr 1fr; } .finder .btn { grid-column: 1 / -1; } .finder > div:nth-child(3) { grid-column: 1 / -1; } }

/* Dades clau */
.facts { background: var(--pedra-fosca); padding: 0; border-block: 1px solid var(--linia); }
.facts ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding: 32px 20px; border-left: 1px solid var(--linia); text-align: center; }
.facts li:first-child { border-left: 0; }
.facts strong { display: block; font: 600 2.3rem/1.1 "Fraunces", serif; }
.facts span { font-size: .9rem; color: var(--nogal-suau); }
@media (max-width: 760px) { .facts ul { grid-template-columns: 1fr 1fr; } .facts li:nth-child(3) { border-left: 0; } .facts li:nth-child(n+3) { border-top: 1px solid var(--linia); } }

/* Intro */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.rev { grid-template-columns: 1fr 1.05fr; }
.split.rev .split-media { order: -1; }
.split-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; }
.split-media.wide img { aspect-ratio: 5/4; }
.split h2 { margin-bottom: 22px; }
@media (max-width: 860px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev .split-media { order: 0; } .split-media img { aspect-ratio: 4/3; } }

/* Apartaments */
.heading { max-width: 60ch; margin-bottom: 48px; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.card { background: #fff; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.card-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card-body ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; color: var(--nogal-suau); }
.card-body ul li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--congost); margin-right: 8px; vertical-align: middle; }
.card-body .actions { margin-top: auto; padding-top: 8px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* Reserva directa */
.direct { background: var(--nogal); color: var(--pedra); }
.direct .eyebrow { color: rgba(245,240,230,.75); }
.direct .lead { color: rgba(245,240,230,.88); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 1.5px solid rgba(245,240,230,.4); padding-top: 22px; }
.steps li::before { content: counter(s); display: block; font: 600 2.4rem/1 "Fraunces", serif; color: var(--pedra); margin-bottom: 12px; }
.steps h3 { font-size: 1.2rem; margin-bottom: 8px; }
.steps p { color: rgba(245,240,230,.85); font-size: .98rem; }
.direct .cta { margin-top: 48px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Entorn */
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.place { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; background: var(--nit) center/cover; color: var(--pedra); display: flex; align-items: flex-end; text-decoration: none; }
.place::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(29,36,51,.88)); transition: opacity .2s; }
.place div { position: relative; padding: 22px; }
.place h3 { font-size: 1.3rem; }
.place p { font-size: .9rem; opacity: .9; margin-top: 4px; }
.place small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; font-weight: 600; }
.places-more { margin-top: 36px; }
@media (max-width: 860px) { .places { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .places { grid-template-columns: 1fr; } .place { aspect-ratio: 16/11; } }

/* Cel de nit */
.night { background: var(--nit) center/cover; color: var(--pedra); position: relative; }
.night .eyebrow { color: rgba(245,240,230,.7); }
.night .lead { color: rgba(245,240,230,.85); }
.night .detail { color: #8fd0cb; }

/* Opinions */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.quote { border-top: 2px solid var(--nogal); padding-top: 22px; }
.quote blockquote { font: 500 1.12rem/1.55 "Fraunces", serif; }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: .9rem; color: var(--nogal-suau); }
.quote cite strong { color: var(--nogal); }
.score { display: flex; align-items: baseline; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; }
.score strong { font: 600 4rem/1 "Fraunces", serif; }
.score span { color: var(--nogal-suau); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* Equipament */
.equip { background: var(--pedra-fosca); }
.equip ul { list-style: none; columns: 3; column-gap: 40px; margin-top: 32px; }
.equip li { break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--linia); display: flex; gap: 12px; align-items: center; }
.equip li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--congost); flex: none; }
@media (max-width: 760px) { .equip ul { columns: 1; } }

/* Galeria */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery figure { overflow: hidden; border-radius: 6px; background: var(--pedra-fosca); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figure:nth-child(1), .gallery figure:nth-child(6) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* Contacte */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.contact dl { display: grid; gap: 22px; margin-top: 32px; }
.contact dt { font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nogal-suau); margin-bottom: 2px; }
.contact dd { font: 500 1.25rem "Fraunces", serif; }
.contact dd a { text-decoration: none; border-bottom: 1.5px solid var(--linia); }
.contact dd a:hover { border-color: var(--nogal); }
.map { border-radius: 6px; overflow: hidden; min-height: 340px; border: 1px solid var(--linia); background: var(--pedra-fosca); }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* Capçalera de pàgina interior */
.page-head { background: var(--pedra-fosca); padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--linia); }

/* Peu */
.site-footer { background: var(--nit); color: var(--pedra); padding: 72px 0 32px; font-size: .95rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer img { height: 52px; width: auto; margin-bottom: 18px; }
.site-footer h4 { font: 600 .76rem "Work Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-bottom: 14px; }
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; opacity: .92; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .tagline { font: 500 1.1rem "Fraunces", serif; max-width: 26ch; opacity: .95; }
.site-footer .legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(245,240,230,.2); font-size: .85rem; opacity: .75; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* WhatsApp flotant */
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; background: var(--congost); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; padding: 13px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(29,36,51,.3); }
.wa:hover { background: #185a57; }
@media (max-width: 520px) { .wa span { display: none; } .wa { padding: 15px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Cercador: evita que els camps de data desbordin en mòbil */
.finder > div { min-width: 0; }
@media (max-width: 520px) { .finder { grid-template-columns: 1fr; padding: 18px; } .finder > div:nth-child(3) { grid-column: auto; } }

/* Un sol apartament: targeta horitzontal */
.cards.one { grid-template-columns: 1fr; }
.cards.one .card { flex-direction: row; }
.cards.one .card img { width: 55%; aspect-ratio: auto; min-height: 380px; object-fit: cover; }
.cards.one .card-body { justify-content: center; padding: clamp(24px, 4vw, 48px); }
@media (max-width: 760px) { .cards.one .card { flex-direction: column; } .cards.one .card img { width: 100%; min-height: 0; aspect-ratio: 3/2; } }

/* Franja de beneficis (les dades de l'apartament queden en una línia petita) */
.facts.benefits strong { font-size: 1.3rem; line-height: 1.25; margin-bottom: 6px; }
.facts.benefits li { padding: 28px 22px; }
.specs { text-align: center; font-size: .88rem; color: var(--nogal-suau); padding: 0 0 22px; letter-spacing: .02em; }

/* ===== Portada v4: moviment, bucles i gràfics (28-10-2026) ===== */
.hero { overflow: hidden; }
.hero-bg { position: absolute; inset: -5%; background: var(--nit) center/cover no-repeat; z-index: 0; animation: kb 28s ease-in-out infinite alternate; will-change: transform; }
.hero::before { z-index: 1; }
.hero .wrap { z-index: 2; }
.hero h1 { max-width: 16ch; }
@keyframes kb { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
.hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero .finder { animation: up .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 { animation-delay: .1s; } .hero p.lead { animation-delay: .25s; } .hero-cta { animation-delay: .4s; } .hero .finder { animation-delay: .55s; }
@keyframes up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-cta .btn-reserva { animation: ring 3.6s ease-in-out 2.5s infinite; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 74, 40, 0); } 50% { box-shadow: 0 0 0 10px rgba(168, 74, 40, .28); } }

/* Cinta en moviment */
.ticker { background: var(--nit); color: var(--pedra); overflow: hidden; white-space: nowrap; padding: 15px 0; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ticker-track { display: inline-flex; animation: tick 42s linear infinite; }
.ticker-track span { padding: 0 30px; }
.ticker-track span::after { content: "✦"; margin-left: 60px; opacity: .45; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Serralada que es dibuixa */
.ridge { background: var(--pedra); line-height: 0; padding-top: 28px; }
.ridge svg { width: 100%; height: clamp(70px, 9vw, 110px); display: block; }
.ridge path { fill: none; stroke: var(--nogal-suau); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .ridge path { stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s ease .2s; }
.js .ridge.in path { stroke-dashoffset: 0; }
.ridge .dot { fill: var(--congost); }
.ridge .halo { fill: var(--congost); opacity: .35; transform-box: fill-box; transform-origin: center; animation: halo 2.8s ease-out infinite; }
@keyframes halo { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(4.5); opacity: 0; } }
.ridge text { font: 600 11px "Work Sans", sans-serif; letter-spacing: .16em; fill: var(--nogal-suau); text-transform: uppercase; }

/* Xifres */
.stats { background: var(--pedra); padding: 0 0 clamp(32px, 5vw, 56px); }
.stats ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.stats li { text-align: center; padding: 26px 12px; border-left: 1px solid var(--linia); }
.stats li:first-child { border-left: 0; }
.stats strong { display: block; font: 600 clamp(2.3rem, 4.8vw, 3.5rem)/1 "Fraunces", serif; color: var(--nogal); }
.stats strong small { font-size: .45em; font-weight: 500; margin-left: 4px; }
.stats li > span { display: block; margin-top: 10px; font-size: .9rem; color: var(--nogal-suau); }

/* Franja de quatre punts amb icones */
.facts .ico { width: 34px; height: 34px; display: block; margin: 0 auto 12px; fill: none; stroke: var(--congost); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s; }
.facts li:hover .ico { transform: translateY(-4px) scale(1.08); }

/* Apartament: fotos i dades */
.collage { position: relative; padding-bottom: 14%; }
.collage .c1 { width: 84%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; display: block; }
.collage .c2 { position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 6px solid var(--pedra); box-shadow: 0 20px 50px rgba(29, 36, 51, .25); animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px); } }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.chips li { border: 1px solid var(--linia); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .88rem; color: var(--nogal-suau); }

/* Banda de les vistes */
.vistes { position: relative; color: var(--pedra); min-height: clamp(400px, 62vh, 580px); display: flex; align-items: center; background: var(--nit) center/cover no-repeat fixed; padding: 0; }
.vistes::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 36, 51, .88), rgba(29, 36, 51, .25)); }
.vistes .wrap { position: relative; }
.vistes h2 { max-width: 15ch; }
.vistes p { margin-top: 16px; max-width: 38ch; color: rgba(245, 240, 230, .92); font-size: 1.15rem; }
@media (max-width: 900px) { .vistes { background-attachment: scroll; } }

/* Secció de nit amb estrelles */
.night { position: relative; background: radial-gradient(120% 90% at 50% 0%, #2a3550 0%, var(--nit) 62%); color: var(--pedra); overflow: hidden; }
.night .wrap { position: relative; z-index: 1; }
.night .eyebrow { color: rgba(245, 240, 230, .75); }
.night .lead { color: rgba(245, 240, 230, .85); }
.night .places-more { color: rgba(245, 240, 230, .9); }
.night .link { color: var(--pedra); }
.sky { position: absolute; inset: 0; pointer-events: none; }
.sky i { position: absolute; display: block; border-radius: 50%; background: #fff; opacity: .2; animation: twinkle var(--d, 4s) ease-in-out var(--s, 0s) infinite; }
@keyframes twinkle { 50% { opacity: var(--o, .95); transform: scale(1.5); } }
.shoot { position: absolute; top: 10%; left: 78%; width: 130px; height: 2px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); opacity: 0; animation: shoot 9s linear 2s infinite; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-30deg); } 2% { opacity: 1; } 11% { opacity: 0; transform: translate(-340px, 196px) rotate(-30deg); } 100% { opacity: 0; transform: translate(-340px, 196px) rotate(-30deg); } }
.night .place { transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.night .place:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }

/* Distàncies */
.dist { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.bars { list-style: none; display: grid; gap: 26px; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: end; }
.bars b { font: 600 1.15rem "Fraunces", serif; }
.bars em { font-style: normal; color: var(--nogal-suau); }
.bar { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--pedra-fosca); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); background: var(--congost); border-radius: 99px; }
.js .bar i { width: 0; transition: width 1.5s cubic-bezier(.2, .7, .2, 1); }
.js .bars.in .bar i { width: var(--w); }
.bars li:nth-child(2) .bar i { transition-delay: .15s; } .bars li:nth-child(3) .bar i { transition-delay: .3s; } .bars li:nth-child(4) .bar i { transition-delay: .45s; }
.dist-note { margin-top: 28px; font-size: .9rem; color: var(--nogal-suau); }

/* Ressenyes rotatives */
.rev { display: grid; max-width: 800px; }
.rev-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease, visibility .8s; }
.rev-card.on { opacity: 1; visibility: visible; transform: none; }
.rev-stars { color: var(--nogal); letter-spacing: .2em; font-size: 1.25rem; margin-bottom: 16px; }
.rev-card blockquote { font: 500 clamp(1.3rem, 2.7vw, 1.85rem)/1.45 "Fraunces", serif; }
.rev-card cite { display: block; margin-top: 20px; font-style: normal; color: var(--nogal-suau); }
.rev-card cite strong { color: var(--nogal); }
.rev-dots { display: flex; gap: 10px; margin-top: 32px; min-height: 4px; }
.rev-dots button { width: 38px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: var(--linia); cursor: pointer; position: relative; overflow: hidden; }
.rev-dots button.on::after { content: ""; position: absolute; inset: 0; background: var(--nogal); transform-origin: left; animation: fill var(--t, 7s) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Preguntes freqüents */
.faq .wrap { max-width: 860px; }
.faq details { border-top: 1px solid var(--linia); padding: 22px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--linia); }
.faq summary { cursor: pointer; font: 600 1.2rem "Fraunces", serif; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--congost); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--nogal-suau); max-width: 62ch; }

/* Tancament */
.closing { background: var(--pedra-fosca); text-align: center; }
.closing .lead { margin: 18px auto 0; }
.closing .hero-cta { justify-content: center; animation: none; }

/* Aparició en fer scroll */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .stats ul { grid-template-columns: 1fr 1fr; }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--linia); }
  .dist { grid-template-columns: 1fr; }
  .collage { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .ridge path { stroke-dashoffset: 0; }
  .js .bar i { width: var(--w); }
}

/* ===== Colors v4b: més verd i més viu (28-10-2026, a validar per l'Oriol) ===== */
:root { --bosc: #0E4D45; --bosc-fosc: #0A3A35; --verd-viu: #2A9D78; --pedra-fosca: #E2EEDD; --linia: #CBDCC6; }
.hero::before { background: linear-gradient(90deg, rgba(10, 58, 53, .74) 0%, rgba(10, 58, 53, .32) 55%, rgba(10, 58, 53, .05) 100%), linear-gradient(180deg, rgba(10, 58, 53, .15) 0%, rgba(10, 58, 53, .25) 40%, rgba(10, 58, 53, .85) 100%); }
.vistes::before { background: linear-gradient(90deg, rgba(10, 58, 53, .86), rgba(10, 58, 53, .2)); }
.place::before { background: linear-gradient(180deg, transparent 40%, rgba(10, 58, 53, .9)); }
.ticker { background: var(--bosc); }
.night { background: radial-gradient(120% 90% at 50% 0%, #1F8A74 0%, var(--bosc) 58%, var(--bosc-fosc) 100%); }
.site-footer { background: var(--bosc); }
.facts .ico, .bar i, .ridge .dot, .ridge .halo { stroke: var(--verd-viu); }
.bar i, .ridge .dot, .ridge .halo { background: var(--verd-viu); fill: var(--verd-viu); }
.facts .ico { stroke: var(--congost); }
.stats strong, .facts strong { color: var(--bosc); }

/* ===== Home v5: estructura simplificada (28-10-2026) ===== */
.slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bosc-fosc); }
.slide { position: absolute; inset: -5%; background: center/cover no-repeat; opacity: 0; transition: opacity 1.6s ease; animation: kb 22s ease-in-out infinite alternate; will-change: transform, opacity; }
.slide.on { opacity: 1; }
.hero-bg { display: none; }
.slide-dots { display: flex; gap: 10px; margin-top: 22px; }
.slide-dots button { width: 38px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: rgba(245, 240, 230, .4); cursor: pointer; position: relative; overflow: hidden; }
.slide-dots button.on::after { content: ""; position: absolute; inset: 0; background: var(--pedra); transform-origin: left; animation: fill var(--t, 6s) linear forwards; }
.hero .finder { margin-top: 36px; }

.inclou { background: var(--pedra-fosca); }
.serveis { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 8px; }
.serveis li { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: .95rem; color: var(--nogal); }
.serveis .ico { width: 78px; height: 78px; padding: 20px; border: 1.5px solid var(--congost); border-radius: 50%; background: #fff; fill: none; stroke: var(--congost); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin: 0; transition: transform .35s, background .35s; }
.serveis li:hover .ico { transform: translateY(-5px); background: var(--pedra); }

.places.six { grid-template-columns: repeat(3, 1fr); }
.places.six .place { aspect-ratio: 4 / 3; }

.contact h2 { margin-bottom: 8px; }
@media (max-width: 900px) {
  .serveis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .serveis { grid-template-columns: repeat(2, 1fr); }
  .places.six { grid-template-columns: 1fr; }
  .places.six .place { aspect-ratio: 16 / 10; }
}

/* Silueta real del Montsec (calcada de la foto de la vista) */
.ridge.sil { background: var(--pedra); padding-top: 0; margin-top: -1px; }
.ridge.sil svg { height: clamp(90px, 12vw, 170px); width: 100%; display: block; }
.js .ridge.sil path.fill, .ridge.sil path.fill { fill: var(--pedra-fosca); stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.ridge.sil path:not(.fill) { stroke: var(--bosc); stroke-width: 3; }
.ridge.sil .dot { fill: var(--teula); stroke: none; }

/* ===== Home v6: colors amb sentit i silueta lligada al scroll (28-10-2026) =====
   Verd = natura i Montsec (seccions fosques). Crema i sorra = la casa (seccions clares).
   Terracota = només accions. Ocre = detalls (estrelles de les ressenyes). */
:root { --pedra-fosca: #EBE3D3; --linia: #D9CDB8; --ocre: #E3A82B; }
.intro-sil { background: var(--pedra); text-align: center; padding-bottom: 0; }
.intro-sil .wrap { max-width: 860px; }
.intro-sil h2 { max-width: 20ch; margin: 0 auto; }
.intro-sil .lead { margin: 22px auto 0; max-width: 58ch; }
.intro-sil .ridge.sil { margin-top: clamp(28px, 5vw, 56px); }
.ridge.sil, .ridge.sil svg { background: var(--pedra); }
.ridge.sil path, .js .ridge.sil path, .js .ridge.sil.in path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.ridge.sil path.fill { fill: var(--pedra-fosca); stroke: none; }
.ridge.sil path:not(.fill) { fill: none; stroke: var(--bosc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ridge.sil #sil-dot { fill: var(--ocre); stroke: var(--bosc); stroke-width: 3; }
.aptsec { background: var(--pedra-fosca); }
.aptsec .chips li { background: var(--pedra); border-color: transparent; }
.inclou { background: var(--pedra-fosca); }
.serveis .ico { background: var(--pedra-fosca); border-color: var(--bosc); stroke: var(--bosc); }
.serveis li:hover .ico { background: #fff; }
.night .shoot { background: linear-gradient(90deg, var(--ocre), rgba(227, 168, 43, 0)); }

.revband { position: relative; color: var(--pedra); background: var(--nogal) center/cover no-repeat fixed; padding: clamp(80px, 11vw, 150px) 0; }
.revband::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(48, 30, 18, .84), rgba(34, 22, 14, .92)); }
.revband .wrap { position: relative; }
.revband .eyebrow { color: rgba(245, 240, 230, .8); }
.revband .score strong { color: var(--pedra); }
.revband .score span { color: rgba(245, 240, 230, .85); }
.revband .link { color: var(--pedra); }
.revband .rev-stars { color: var(--ocre); }
.revband .rev-card cite, .revband .rev-card cite strong { color: var(--pedra); }
.revband .rev-dots button { background: rgba(245, 240, 230, .3); }
.revband .rev-dots button.on::after { background: var(--pedra); }
@media (max-width: 900px) { .revband { background-attachment: scroll; } }

/* ===== Home v7 (28-10-2026) ===== */
/* Paraules que canvien a l'obertura */
.rot { display: inline-grid; vertical-align: bottom; color: var(--congost); }
.rot span { grid-area: 1 / 1; opacity: 0; transform: translateY(40%); transition: opacity .6s ease, transform .6s ease; white-space: nowrap; }
.rot span.on { opacity: 1; transform: none; }
html:not(.js) .rot span + span { display: none; }
html:not(.js) .rot span { opacity: 1; transform: none; }
.intro-sil h2 { max-width: 22ch; }

/* Mosaic de fotos de l'apartament */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mosaic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; transition: transform .5s; }
.mosaic img:nth-child(even) { margin-top: 38px; }
.mosaic img:nth-child(odd) { margin-bottom: 38px; }
.mosaic img:hover { transform: scale(1.03); }
.mosaic img:nth-child(2) { animation: bob 9s ease-in-out infinite; }
.mosaic img:nth-child(3) { animation: bob 11s ease-in-out 1s infinite; }

/* «Què hi trobareu» més compacte */
.inclou { padding: clamp(36px, 5vw, 60px) 0; }
.inclou .heading { margin-bottom: 26px; }
.inclou h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.serveis { gap: 12px; margin-top: 0; }
.serveis li { font-size: .85rem; gap: 10px; }
.serveis .ico { width: 56px; height: 56px; padding: 14px; }

/* Ressenyes de Google sota el cercador */
.stars { background: linear-gradient(90deg, var(--ocre) var(--p, 100%), var(--e, rgba(255, 255, 255, .35)) var(--p, 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .08em; white-space: nowrap; }
.rvw { margin-top: 12px; color: var(--pedra); }
.rvw-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--pedra); text-decoration: none; font-size: .84rem; background: rgba(10, 58, 53, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 14px 5px 8px; }
.rvw-badge .g-logo { width: 18px; height: 18px; background: #fff; border-radius: 50%; padding: 2px; flex: none; }
.rvw-badge strong { font: 600 1.15rem/1 "Fraunces", serif; }
.rvw-badge .stars { font-size: .85rem; }
.rvw-badge:hover .rvw-count { text-decoration: underline; }
.rvw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; transition: opacity .45s ease; }
.rvw-grid.out { opacity: 0; }
.rvw-card { background: rgba(255, 255, 255, .96); color: var(--nogal); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .16); }
.rvw-in { display: block; padding: 9px 12px 10px; color: inherit; text-decoration: none; }
.rvw-head { display: flex; align-items: center; gap: 8px; }
.rvw-head .g-logo { width: 15px; height: 15px; margin-left: auto; flex: none; align-self: flex-start; }
.rvw-av { width: 26px; height: 26px; border-radius: 50%; background: var(--congost); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 600; overflow: hidden; flex: none; }
.rvw-av img { width: 100%; height: 100%; object-fit: cover; }
.rvw-name { font-weight: 600; font-size: .8rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rvw-head > div { min-width: 0; }
.rvw-card .stars { --e: rgba(90, 58, 36, .2); font-size: .78rem; display: block; margin-top: 2px; }
.rvw-text { font-size: .78rem; line-height: 1.35; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .rvw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rvw-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rot span { transition: none; } .rvw-grid { transition: none; } }

/* Menú transparent sobre la primera pantalla de la home; s'omple en baixar */
.brand .neg { display: none; }
.has-hero .site-header { position: fixed; left: 0; right: 0; transition: background .35s, border-color .35s, box-shadow .35s; }
.has-hero .site-header.top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.has-hero .site-header.top .brand .pos { display: none; }
.has-hero .site-header.top .brand .neg { display: block; }
.has-hero .site-header.top .nav a:not(.btn) { color: var(--pedra); }
.has-hero .site-header.top .nav a:not(.btn):hover, .has-hero .site-header.top .nav a[aria-current="page"] { border-bottom-color: var(--pedra); }
.has-hero .site-header.top .menu-btn { color: var(--pedra); }
@media (max-width: 860px) { .has-hero .site-header.top .nav a:not(.btn) { color: var(--nogal); } }

/* Descobreix Àger v2: bloc destacat de les estrelles, 4 targetes, CTA i com arribar petit */
.feat { display: grid; grid-template-columns: 1.05fr 1fr; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.feat-img { background: var(--nit) center/cover; min-height: 340px; }
.feat-txt { padding: clamp(22px, 3.5vw, 40px); }
.feat-txt small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; font-weight: 600; margin-bottom: 8px; }
.feat-txt h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.feat-txt p { margin-bottom: 12px; color: rgba(245, 240, 230, .92); line-height: 1.55; }
.feat-txt p:last-child { margin: 18px 0 0; }
.places.four { grid-template-columns: repeat(4, 1fr); }
.places.four .place { aspect-ratio: 3 / 4; }
.places.four .place p { font-size: .86rem; line-height: 1.4; }
.places.four .place h3 { font-size: 1.15rem; }
.cta { background: linear-gradient(135deg, var(--bosc) 0%, var(--verd-viu) 130%); color: var(--pedra); text-align: center; padding: clamp(48px, 7vw, 84px) 0; }
.cta h2 { color: var(--pedra); }
.cta p { margin: 12px auto 0; max-width: 46ch; opacity: .92; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px !important; max-width: none !important; }
.cta .btn-line:hover { background: var(--pedra); color: var(--bosc); border-color: var(--pedra); }
.arrive { padding: 18px 0; font-size: .9rem; color: var(--nogal-suau); border-top: 1px solid var(--linia); }
.arrive p { text-align: center; }
.arrive strong { color: var(--nogal); }
@media (max-width: 1000px) { .places.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat-img { min-height: 220px; } }
@media (max-width: 520px) { .places.four { grid-template-columns: 1fr; } .places.four .place { aspect-ratio: 16 / 10; } }
.places.four .place::before { background: linear-gradient(180deg, transparent 18%, rgba(10, 58, 53, .92) 82%); }

/* Crida final en crema (com abans) i peu amb 3 columnes */
.cta { background: var(--pedra); color: var(--nogal); }
.cta h2 { color: var(--nogal); }
.cta .btn-line:hover { background: var(--nogal); color: var(--pedra); border-color: var(--nogal); }
.site-footer .cols { grid-template-columns: 1.4fr 1fr 1.3fr; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* Pàgina de l'apartament (v1 amb SEO) */
.apfacts { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 32px; }
.apfacts li { background: #fff; border: 1px solid var(--linia); border-radius: 10px; padding: 14px 12px; text-align: center; }
.apfacts strong { display: block; font: 600 1.6rem/1.1 "Fraunces", serif; color: var(--bosc); }
.apfacts span { display: block; font-size: .8rem; color: var(--nogal-suau); margin-top: 4px; line-height: 1.25; }
.rooms { display: grid; gap: clamp(28px, 4vw, 52px); }
.room { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.room.flip figure { order: 2; }
.room figure { border-radius: 10px; overflow: hidden; background: var(--pedra-fosca); }
.room img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.room h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 10px; }
.room p { max-width: 46ch; line-height: 1.6; }
.groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.groups h3 { font-size: 1.05rem; color: var(--bosc); margin-bottom: 8px; }
.groups ul { columns: 1 !important; margin-top: 0 !important; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.dist { list-style: none; margin-top: 18px; }
.dist li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linia); }
.dist em { font-style: normal; color: var(--nogal-suau); font-size: .92rem; text-align: right; }
.small { font-size: .85rem; color: var(--nogal-suau); margin-top: 12px; }
.rev-band { background: linear-gradient(135deg, var(--bosc-fosc), var(--bosc)); padding: clamp(32px, 5vw, 52px) 0; }
.rev-band .rvw { margin-top: 0; }
.faq-wrap { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linia); padding: 16px 0; }
.faq summary { cursor: pointer; font: 600 1.05rem "Fraunces", serif; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--congost); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; max-width: 62ch; line-height: 1.6; }
@media (max-width: 1000px) { .apfacts { grid-template-columns: repeat(3, 1fr); } .groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .room, .two { grid-template-columns: 1fr; } .room.flip figure { order: 0; } }
@media (max-width: 520px) { .apfacts { grid-template-columns: repeat(2, 1fr); } .groups { grid-template-columns: 1fr; } }

/* ===== Pàgina de l'apartament v2: moviment i personalitat ===== */
.hero-ap { min-height: min(88vh, 820px); }
.hero-ap h1 { max-width: 20ch; }
.hero-ap p.lead { max-width: 52ch; }
.hero-ap .apfacts { margin-top: 28px; gap: 10px; max-width: 880px; }
.hero-ap .apfacts li { background: rgba(10, 58, 53, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .25); color: var(--pedra); padding: 12px 8px; }
.hero-ap .apfacts strong { color: var(--pedra); font-size: 1.45rem; }
.hero-ap .apfacts span { color: rgba(245, 240, 230, .88); }
.hero-ap .apfacts li { animation: up .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-ap .apfacts li:nth-child(1) { animation-delay: .5s; } .hero-ap .apfacts li:nth-child(2) { animation-delay: .58s; } .hero-ap .apfacts li:nth-child(3) { animation-delay: .66s; }
.hero-ap .apfacts li:nth-child(4) { animation-delay: .74s; } .hero-ap .apfacts li:nth-child(5) { animation-delay: .82s; } .hero-ap .apfacts li:nth-child(6) { animation-delay: .9s; }
.stamp { position: absolute; right: clamp(24px, 6vw, 90px); top: 120px; width: 132px; height: 132px; z-index: 2; display: grid; place-items: center; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.stamp text { font: 600 9.2px "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; fill: var(--pedra); }
.stamp img { filter: brightness(0) invert(1); opacity: .92; }
@keyframes spin { to { transform: rotate(360deg); } }
.rooms-sec { background: var(--pedra); text-align: left; padding-bottom: 0; }
.rooms-sec .heading { margin-bottom: 0; }
.tour-sec { background: var(--pedra-fosca); }
.tour { position: relative; display: grid; gap: clamp(36px, 5vw, 64px); padding-left: clamp(44px, 6vw, 88px); }
.tour::before, .tour::after { content: ""; position: absolute; left: 14px; top: 8px; width: 3px; border-radius: 3px; }
.tour::before { bottom: 8px; background: repeating-linear-gradient(180deg, var(--linia) 0 6px, transparent 6px 12px); }
.tour::after { height: calc((100% - 16px) * var(--p, 0)); background: var(--verd-viu); }
.room { position: relative; }
.room-n { position: absolute; left: calc(-1 * clamp(44px, 6vw, 88px) + 2px); top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--pedra-fosca); border: 2px solid var(--linia); color: var(--nogal-suau); font: 600 .78rem/22px "Work Sans", sans-serif; text-align: center; transition: .5s; z-index: 2; }
.room.in .room-n { background: var(--verd-viu); border-color: var(--verd-viu); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 6px rgba(42, 157, 120, .18); }
.room figure { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1) .1s; }
.room.flip figure { clip-path: inset(0 0 0 100%); }
.room.in figure { clip-path: inset(0 0 0 0); }
.room img { transform: scale(1.14) translateY(var(--py, 0px)); will-change: transform; }
.room-t h3, .room-t p { opacity: 0; transform: translateY(14px); transition: .8s cubic-bezier(.2, .7, .2, 1) .45s; }
.room-t p { transition-delay: .6s; }
.room.in .room-t h3, .room.in .room-t p { opacity: 1; transform: none; }
html:not(.js) .room figure, html:not(.js) .room-t h3, html:not(.js) .room-t p { clip-path: none; opacity: 1; transform: none; }
.room { opacity: 1 !important; transform: none !important; }
/* Balcó que s'obre en fer scroll */
.balcony { position: relative; height: 190vh; background: var(--bosc-fosc); }
.bal-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.bal-view { position: absolute; inset: -4%; background: center/cover no-repeat; transform: scale(calc(1.16 - var(--o, 0) * .16)); will-change: transform; }
.bal-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 58, 53, .1) 40%, rgba(10, 58, 53, .75) 100%); }
.bal-door { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; box-sizing: border-box; border: 14px solid var(--nogal); background: linear-gradient(135deg, rgba(245, 240, 230, .34), rgba(245, 240, 230, .12)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); will-change: transform; }
.bal-door.l { left: 0; transform: translateX(calc(var(--o, 0) * -102%)); border-right-width: 7px; }
.bal-door.r { right: 0; transform: translateX(calc(var(--o, 0) * 102%)); border-left-width: 7px; }
.bal-door span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 3px), var(--nogal) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(180deg, transparent calc(33% - 3px), var(--nogal) calc(33% - 3px) calc(33% + 3px), transparent calc(33% + 3px) calc(66% - 3px), var(--nogal) calc(66% - 3px) calc(66% + 3px), transparent calc(66% + 3px)); }
.bal-door::after { content: ""; position: absolute; top: 50%; width: 10px; height: 54px; border-radius: 6px; background: var(--ocre); transform: translateY(-50%); }
.bal-door.l::after { right: 14px; } .bal-door.r::after { left: 14px; }
.bal-hint { position: absolute; z-index: 4; left: 50%; bottom: 9vh; transform: translateX(-50%); color: var(--pedra); background: rgba(10, 58, 53, .7); padding: 10px 20px; border-radius: 999px; font-weight: 600; letter-spacing: .04em; opacity: calc(1 - var(--o, 0) * 6); pointer-events: none; }
.bal-hint i { display: inline-block; font-style: normal; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
.bal-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 max(20px, calc((100vw - 1100px) / 2)) clamp(36px, 7vh, 80px); color: var(--pedra); opacity: calc((var(--o, 0) - .55) * 3); transform: translateY(calc((1 - var(--o, 0)) * 30px)); }
.bal-cap .eyebrow { color: rgba(245, 240, 230, .85); }
.bal-cap h2 { color: var(--pedra); max-width: 18ch; }
.bal-cap p:not(.eyebrow) { max-width: 46ch; margin-top: 10px; }
.bal-q { font: italic 500 1.15rem "Fraunces", serif; }
.bal-q small { display: block; font: 500 .8rem "Work Sans", sans-serif; opacity: .85; margin-top: 4px; }
/* Equipament i distàncies */
.groups > div { background: #fff; border: 1px solid var(--linia); border-radius: 12px; padding: 20px 20px 14px; transition: transform .3s, box-shadow .3s; }
.groups > div:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 58, 53, .12); }
.groups li { opacity: 0; transform: translateX(-10px); transition: .5s cubic-bezier(.2, .7, .2, 1); }
.groups.in li, html:not(.js) .groups li { opacity: 1; transform: none; }
.groups li:nth-child(2) { transition-delay: .06s; } .groups li:nth-child(3) { transition-delay: .12s; } .groups li:nth-child(4) { transition-delay: .18s; }
.groups li:nth-child(5) { transition-delay: .24s; } .groups li:nth-child(6) { transition-delay: .3s; } .groups li:nth-child(7) { transition-delay: .36s; }
.dist li { align-items: center; }
.dist .trail { flex: 1; height: 2px; min-width: 24px; background: repeating-linear-gradient(90deg, var(--verd-viu) 0 6px, transparent 6px 12px); background-size: 12px 2px; animation: flow 1.2s linear infinite; opacity: .6; }
@keyframes flow { to { background-position: 12px 0; } }
/* Galeria */
.gallery figure { transform: translateY(0); }
.gallery figure img { transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s; }
.gallery figure:hover img { transform: scale(1.07); }
/* Preguntes */
.faq details { transition: background .3s; }
.faq details[open] { background: rgba(255, 255, 255, .55); border-radius: 10px; padding-left: 14px; padding-right: 14px; }
.faq summary::after { transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] p { animation: faqin .45s ease both; }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }
/* Botó que segueix en baixar */
.stick-cta { position: fixed; left: 50%; bottom: 22px; z-index: 40; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: .45s cubic-bezier(.2, .7, .2, 1); background: var(--teula); color: #fff; text-decoration: none; font-weight: 600; padding: 14px 26px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.stick-cta.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.stick-cta:hover { background: #8f3e20; }
@media (max-width: 760px) { .stamp { display: none; } .tour { padding-left: 42px; } .room-n { left: -40px; } .balcony { height: 170vh; } .bal-door { border-width: 9px; } .stick-cta { left: 16px; right: 84px; transform: translate(0, 24px); text-align: center; } .stick-cta.show { transform: none; } }
@media (prefers-reduced-motion: reduce) { .stamp svg, .dist .trail, .bal-hint i { animation: none; } .room figure { clip-path: none; transition: none; } .room-t h3, .room-t p, .groups li { opacity: 1; transform: none; } .room img { transform: none; } .balcony { height: auto; } .bal-stick { position: relative; height: 80vh; } .bal-door, .bal-hint { display: none; } .bal-cap { opacity: 1; transform: none; } }

.apfacts strong span { display: inline; margin: 0; font: inherit; color: inherit; line-height: inherit; }

/* On és: gràfic de barres i espais més curts (només a l'apartament) */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-bottom: clamp(28px, 4vw, 44px); margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--linia); }
.who h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.where { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.bchart { background: #fff; border: 1px solid var(--linia); border-radius: 14px; padding: 22px 24px 18px; box-shadow: 0 10px 30px rgba(10, 58, 53, .07); }
.bc-title { font: 600 .78rem "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--nogal-suau); margin-bottom: 14px; }
.bchart ul { list-style: none; display: grid; gap: 16px; }
.bchart li > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; margin-bottom: 6px; }
.bchart em { font-style: normal; color: var(--nogal-suau); white-space: nowrap; }
.bt { height: 12px; border-radius: 12px; background: var(--pedra-fosca); overflow: hidden; }
.bt b { display: block; height: 100%; width: 0; border-radius: 12px; background: var(--verd-viu); transition: width 1.3s cubic-bezier(.2, .7, .2, 1) .35s; }
.bchart li.walk .bt b { background: var(--ocre); }
.bchart.in .bt b, html:not(.js) .bt b { width: var(--w); }
.bchart li:nth-child(2) .bt b { transition-delay: .5s; } .bchart li:nth-child(3) .bt b { transition-delay: .65s; }
.bc-key { margin-top: 16px; font-size: .8rem; color: var(--nogal-suau); display: flex; align-items: center; gap: 6px; }
.bc-key .k { width: 10px; height: 10px; border-radius: 50%; background: var(--verd-viu); display: inline-block; }
.bc-key .k.walk { background: var(--ocre); margin-left: 8px; }
@media (max-width: 760px) { .who, .where { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bt b { transition: none; width: var(--w); } }
.ap-page section { padding: clamp(36px, 5vw, 64px) 0; }
.ap-page .heading { margin-bottom: 26px; }
.ap-page .hero-ap { min-height: min(80vh, 720px); padding: 0; }
.ap-page .rooms-sec { padding-bottom: 0; }
.ap-page .tour { gap: clamp(22px, 3.2vw, 40px); }
.ap-page .room img { aspect-ratio: 16 / 10; }
.ap-page .tour-sec { padding-top: clamp(24px, 3vw, 40px); }
.ap-page .balcony { height: 150vh; padding: 0; }
.ap-page .rev-band { padding: clamp(24px, 3.5vw, 40px) 0; }
.ap-page .cta { padding: clamp(36px, 5vw, 60px) 0; }
.ap-page .groups > div { padding: 16px 18px 10px; }
.ap-page .groups li { padding: 8px 0; }
@media (max-width: 760px) { .ap-page .balcony { height: 140vh; } }
.ap-page .gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-page .gallery figure:nth-child(1), .ap-page .gallery figure:nth-child(6) { grid-column: auto; grid-row: auto; }
.ap-page .gallery img { aspect-ratio: 3 / 2; }
.ap-page .faq-wrap { max-width: 1100px; }
.ap-page .faq { columns: 2; column-gap: 40px; }
.ap-page .faq details { break-inside: avoid; }
.ap-page .room { grid-template-columns: .85fr 1fr; }
@media (max-width: 760px) { .ap-page .gallery { grid-template-columns: 1fr 1fr; } .ap-page .faq { columns: 1; } .ap-page .room { grid-template-columns: 1fr; } }
.bchart li small { display: block; font-size: .75rem; color: var(--nogal-suau); line-height: 1.25; }
.bchart ul { gap: 13px; }

/* ===== Descobreix Àger v2 ===== */
.jump { position: sticky; top: 66px; z-index: 40; background: rgba(245, 240, 230, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia); }
.jump .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump a { flex: none; text-decoration: none; color: var(--nogal); font-weight: 600; font-size: .9rem; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--linia); background: #fff; transition: .25s; }
.jump a:hover { border-color: var(--verd-viu); }
.jump a.on { background: var(--bosc); color: var(--pedra); border-color: var(--bosc); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(42, 157, 120, .14); color: var(--bosc); font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.pill.dark { background: rgba(255, 255, 255, .14); color: var(--pedra); }
.feat-txt small .pill { margin-bottom: 8px; text-transform: none; letter-spacing: 0; opacity: 1; }
.d-sec.alt { background: var(--pedra-fosca); }
.hero-d h1 { max-width: 18ch; }
.fb { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.fb.flip figure { order: 2; }
.fb figure { border-radius: 12px; overflow: hidden; background: var(--pedra-fosca); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1) .1s; }
.fb.flip figure { clip-path: inset(0 0 0 100%); }
.fb.in figure { clip-path: inset(0); }
html:not(.js) .fb figure { clip-path: none; }
.fb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transform: scale(1.12) translateY(var(--py, 0px)); }
.fb-t { position: relative; }
.fb-t h2 { margin-bottom: 12px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.fb-t p { line-height: 1.6; margin-bottom: 10px; max-width: 54ch; }
.checks { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 28px; line-height: 1.45; max-width: 54ch; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--verd-viu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.glider { position: absolute; right: -6px; top: -54px; width: 78px; animation: glide 9s ease-in-out infinite alternate; pointer-events: none; }
.glider svg { width: 100%; height: auto; display: block; }
@keyframes glide { 0% { transform: translate(-30px, 12px) rotate(-6deg); } 100% { transform: translate(18px, -12px) rotate(5deg); } }
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.mini { background: #fff; border: 1px solid var(--linia); border-radius: 12px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.mini:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 58, 53, .12); }
.mini img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s; }
.mini:hover img { transform: scale(1.05); }
.mini figure { overflow: hidden; }
.mini > div { padding: 18px 20px 22px; }
.mini h3 { margin-bottom: 8px; font-size: 1.35rem; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.trio article { background: #fff; border: 1px solid var(--linia); border-radius: 12px; padding: 20px; transition: transform .3s, box-shadow .3s; overflow: hidden; }
.trio article:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 58, 53, .12); }
.trio figure { margin: -20px -20px 16px; overflow: hidden; }
.trio img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.trio h3 { font-size: 1.2rem; margin-bottom: 8px; }
.trio p { line-height: 1.55; font-size: .95rem; }
.ap-page .two { align-items: center; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } .two-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fb { grid-template-columns: 1fr; } .fb.flip figure { order: 0; } .glider { display: none; } .jump { top: 60px; } }
@media (prefers-reduced-motion: reduce) { .glider { animation: none; } .fb figure { clip-path: none; transition: none; } .fb img { transform: none; } }
.trio { align-items: start; }
.trio { align-items: stretch; }
.trio article { display: flex; flex-direction: column; }
.in .bchart .bt b { width: var(--w); }

/* ===== Contacte v2 ===== */
.hero-c { min-height: min(62vh, 560px); }
.ccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.ccard { background: #fff; border: 1px solid var(--linia); border-radius: 14px; padding: 26px 24px; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.ccard:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(10, 58, 53, .13); }
.cico { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--bosc); color: var(--bosc); display: grid; place-items: center; margin-bottom: 14px; background: var(--pedra-fosca); transition: .35s; }
.cico svg { width: 26px; height: 26px; }
.ccard:hover .cico { background: var(--bosc); color: var(--pedra); transform: rotate(-8deg) scale(1.06); }
.ccard h2 { font-size: 1.35rem; margin-bottom: 6px; }
.cval { font: 500 1.2rem/1.35 "Fraunces", serif; word-break: break-word; }
.cnote { color: var(--nogal-suau); margin-top: 8px; font-size: .95rem; line-height: 1.5; }
.cact { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copy { border: 0; background: none; color: var(--nogal-suau); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; padding: 6px 4px; }
.copy.ok { color: var(--verd-viu); text-decoration: none; font-weight: 600; }
.mapbox { position: relative; border-radius: 14px; overflow: hidden; min-height: 340px; background: linear-gradient(160deg, var(--bosc) 0%, var(--bosc-fosc) 100%); color: var(--pedra); display: grid; }
.mapbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mb-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.mb-ridge path { fill: rgba(245, 240, 230, .09); stroke: rgba(245, 240, 230, .35); stroke-width: 1.5; }
.mb-pin { position: absolute; left: 50%; top: 24%; width: 44px; height: 44px; transform: translateX(-50%); animation: bob 2.2s ease-in-out infinite; }
.mb-pin svg { width: 100%; height: 100%; display: block; position: relative; }
.mb-pin i { position: absolute; left: 50%; bottom: -6px; width: 30px; height: 10px; margin-left: -15px; border-radius: 50%; background: rgba(0, 0, 0, .3); filter: blur(3px); }
.mb-t { position: relative; align-self: end; text-align: center; padding: 20px 20px 26px; display: grid; gap: 12px; justify-items: center; }
.mb-t small { opacity: .8; font-size: .78rem; }
.c-sec.alt { background: var(--pedra-fosca); }
@media (max-width: 900px) { .ccards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mb-pin { animation: none; } }

/* ===== Legal i cookies ===== */
.legal-sec { background: var(--pedra); }
.legal { max-width: 800px; }
.legal h2 { font-size: 1.4rem; margin: 30px 0 10px; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { margin: 8px 0 8px 20px; }
.legal li { margin-bottom: 6px; }
.pend { background: #ffe9a8; color: #5A3A24; padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.draft { margin-top: 18px; background: #fff; border: 1px solid var(--ocre); border-left-width: 5px; padding: 12px 16px; border-radius: 8px; max-width: 70ch; font-size: .95rem; }
.ck-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .95rem; }
.ck-table th, .ck-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.ck-table th { background: var(--pedra-fosca); }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; display: flex; justify-content: center; }
.cookie[hidden] { display: none; }
.cookie-in { background: #fff; color: var(--nogal); border: 1px solid var(--linia); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); padding: 20px 22px; max-width: 640px; width: 100%; animation: up .5s cubic-bezier(.2, .7, .2, 1) both; }
.cookie-in p { font-size: .92rem; line-height: 1.5; margin-bottom: 8px; }
.cookie-opts { display: grid; gap: 8px; margin: 8px 0 12px; font-size: .92rem; }
.cookie-opts[hidden] { display: none; }
.cookie-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.cookie-btns .btn { padding: 11px 20px; }
.site-footer .linkbtn { color: inherit; opacity: .85; }
@media (max-width: 520px) { .cookie-btns .btn { flex: 1 1 100%; text-align: center; } }
.ccards.two { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (max-width: 900px) { .ccards.two { grid-template-columns: 1fr; } }

/* Reserva (formulari propi) i condicions */
.rsv { padding-top: clamp(32px, 5vw, 56px); }
.rsv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.rsv-card { background: #fff; border: 1px solid var(--linia); border-radius: 18px; padding: 24px; margin-bottom: 20px; }
.rsv-card h2 { font-size: 1.5rem; margin-bottom: 16px; }
.rsv-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.rsv-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px; }
.rsv-row.two { grid-template-columns: 1fr 1fr; } .rsv-row .full { grid-column: 1 / -1; }
.rsv label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nogal-suau); margin-bottom: 6px; }
.rsv input:not([type=radio]):not([type=checkbox]), .rsv select { width: 100%; font: 500 1rem "Work Sans", sans-serif; color: var(--nogal); background: #fff; border: 1.5px solid var(--linia); border-radius: 10px; padding: 12px 14px; min-height: 48px; }
.rsv-hint { font-size: .88rem; color: var(--nogal-suau); margin: 8px 0 14px; }
.rsv-err { color: #9b2c1a; background: #fbeae6; border-radius: 10px; padding: 10px 14px; margin-top: 14px; font-size: .95rem; }
.rsv-opts { display: grid; gap: 10px; }
.rsv-opt { display: flex !important; gap: 12px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; color: var(--nogal) !important; font-weight: 400 !important; border: 1.5px solid var(--linia); border-radius: 12px; padding: 14px; cursor: pointer; margin: 0 !important; }
.rsv-opt:has(input:checked) { border-color: var(--congost); background: #eef6f5; }
.rsv-check { display: flex !important; gap: 10px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-size: .92rem !important; font-weight: 400 !important; color: var(--nogal) !important; margin: 10px 0 18px !important; }
.rsv-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0; }
.rsv-dl dd { text-align: right; } .rsv-dl .tot { font-weight: 600; font-size: 1.15rem; border-top: 1px solid var(--linia); padding-top: 8px; }
.rsv-side { position: sticky; top: 90px; }
.rsv .btn[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 860px) { .rsv-grid { grid-template-columns: 1fr; } .rsv-side { position: static; order: -1; } .rsv-row { grid-template-columns: 1fr 1fr; } }

/* Reserva v2: calendari amb preus, passos, resum amb foto i pantalla de confirmació */
.rsv-hero { background: var(--pedra-fosca); padding: clamp(36px, 6vw, 72px) 0 28px; border-bottom: 1px solid var(--linia); }
.rsv-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.rsv-steps { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.rsv-steps li { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--nogal-suau); opacity: .55; transition: opacity .3s; }
.rsv-steps li.on { opacity: 1; color: var(--nogal); }
.rsv-steps i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--linia); font-size: .82rem; }
.rsv-steps li.on i { background: var(--teula); border-color: var(--teula); color: #fff; }
.rsv-steps li:not(:last-child)::after { content: ""; width: 28px; height: 2px; background: var(--linia); margin-left: 6px; }
.rsv-guests { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.rsv-guests label { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; color: var(--nogal) !important; }
.rsv-guests select { width: auto !important; min-width: 64px; min-height: 42px !important; padding: 8px 12px !important; }
.cal2 { position: relative; }
.cnav { display: flex; justify-content: space-between; position: absolute; left: 0; right: 0; top: -2px; pointer-events: none; z-index: 2; }
.cnav button { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--linia); background: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--nogal); }
.cnav button:disabled { opacity: .3; cursor: default; }
.cms { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cm h4 { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; text-align: center; text-transform: capitalize; margin-bottom: 10px; line-height: 38px; }
.cg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cg .dh { font-size: .7rem; font-weight: 600; color: var(--nogal-suau); text-align: center; padding-bottom: 4px; }
.dd { aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1.5px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: var(--nogal); padding: 0; transition: background .15s, border-color .15s, transform .15s; }
.dd b { font-weight: 600; font-size: .95rem; } .dd small { font-size: .66rem; color: var(--nogal-suau); min-height: 1em; }
.dd:hover:not(:disabled) { border-color: var(--congost); transform: translateY(-1px); }
.dd.off, .dd.occ { background: transparent; cursor: default; color: #b9ad9b; }
.dd.occ b { text-decoration: line-through; } .dd.occ { background: repeating-linear-gradient(135deg, #f0e9dc 0 5px, transparent 5px 10px); }
.dd.mid { background: #e3efed; border-radius: 0; } .dd.a, .dd.b { background: var(--teula); color: #fff; border-color: var(--teula); }
.dd.a small, .dd.b small { color: #fde8df; }
.cal2-leg { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--nogal-suau); margin: 14px 0 4px; }
.cal2-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--linia); }
.l-free { background: #fff; } .l-occ { background: repeating-linear-gradient(135deg, #f0e9dc 0 3px, #fff 3px 6px); } .l-sel { background: var(--teula); border-color: var(--teula) !important; }
.rsv-pick { font-weight: 600; color: var(--nogal); margin-top: 8px; }
.sum { padding: 0 !important; overflow: hidden; } .sum img { width: 100%; height: 150px; object-fit: cover; } .sum-in { padding: 20px 22px 22px; }
.rsv-trust { list-style: none; margin: 14px 0 6px; display: grid; gap: 6px; font-size: .88rem; color: var(--nogal-suau); }
.rsv-trust li::before { content: "✓"; color: var(--congost); font-weight: 700; margin-right: 8px; }
.rsv-opt span { display: grid; gap: 2px; } .rsv-opt em { font-style: normal; font-weight: 600; font-size: 1.1rem; color: var(--teula); } .rsv-opt small { font-size: .85rem; color: var(--nogal-suau); }
.rsv-go { width: 100%; min-height: 54px; font-size: 1.05rem; }
.rsv-dl .dsc { color: var(--congost); } .rsv-dl.big { grid-template-columns: 1fr auto; }
.rok-top { background: var(--nit); color: var(--pedra); text-align: center; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.rok-top .eyebrow { color: #c9bfae; } .rok-top h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18ch; margin: 0 auto 12px; }
.rok-top .lead { color: #e7dfd0; margin: 0 auto; }
.rok-check { width: 76px; height: 76px; color: #7ed3a3; margin-bottom: 18px; }
.rok-check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: rokdraw .9s ease forwards; } .rok-check path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: rokdraw .6s .7s ease forwards; }
@keyframes rokdraw { to { stroke-dashoffset: 0; } }
.rok-code { display: inline-block; margin-top: 22px; padding: 10px 20px; border: 1.5px dashed #8d826f; border-radius: 999px; color: #e7dfd0; } .rok-code b { color: #fff; letter-spacing: .08em; }
.rok-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding-top: 40px; padding-bottom: 80px; align-items: start; }
.rok-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.rok-tl { list-style: none; counter-reset: t; display: grid; gap: 14px; margin-bottom: 18px; }
.rok-tl li { counter-increment: t; position: relative; padding-left: 42px; font-size: .98rem; }
.rok-tl li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--teula); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }
.rok-wait { text-align: center; padding: 90px var(--gutter); } .rok-wait h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 10px; }
.spin { width: 48px; height: 48px; border: 4px solid var(--linia); border-top-color: var(--teula); border-radius: 50%; margin: 0 auto 22px; animation: rspin 1s linear infinite; } @keyframes rspin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .cms { grid-template-columns: 1fr; } .rok-grid { grid-template-columns: 1fr; } .dd { aspect-ratio: 1 / 1; } .rsv-steps li:not(:last-child)::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .rok-check circle, .rok-check path { animation: none; stroke-dashoffset: 0; } .spin { animation-duration: 3s; } }

/* Reserva v2.1: el calendari s'adapta a l'amplada disponible (1 mes si és estret, 2 si hi cap) */
.rsv-main, .rsv-side { min-width: 0; }
.cal2 { container-type: inline-size; }
.cms { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cms .cm:nth-child(2) { display: none; }
@container (min-width: 720px) { .cms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cms .cm:nth-child(2) { display: block; } }
.cm { min-width: 0; }
.dd { min-width: 0; overflow: hidden; }
@media (max-width: 860px) { .cms .cm:nth-child(2) { display: none; } }
.rok { padding: 0; }
.rok-top { margin-top: 0; }

/* Mirades de l'entorn (Descobreix Àger) */
.vistes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.vistes3 figure { overflow: hidden; border-radius: 8px; background: var(--pedra-fosca); position: relative; }
.vistes3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; } .vistes3 figure:hover img { transform: scale(1.04); }
.vistes3 figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; font-size: .88rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(29,36,51,.7)); }
@media (max-width: 700px) { .vistes3 { grid-template-columns: 1fr; } }
.rsv-guests small { color: var(--nogal-suau); font-weight: 400; }

/* ===== Mòbil v2 (29-10-2026): hero fiable a iOS, cercador compacte, bàner de cookies petit, botó flotant a totes les pàgines ===== */
@supports (height: 1svh) {
  .hero { min-height: min(86svh, 780px); } .hero-ap { min-height: min(88svh, 820px); } .ap-page .hero-ap { min-height: min(80svh, 720px); } .bal-stick { height: 100svh; }
}
.slide:first-child { opacity: 1; }   /* si el JS falla, la foto de portada es veu igualment */
.finder input[type="date"] { display: block; width: 100%; min-width: 0; max-width: 100%; height: 48px; -webkit-appearance: none; appearance: none; text-align: left; }
.finder input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
@media (max-width: 900px) {
  .slide, .hero-bg { animation: none; will-change: opacity; inset: 0; }                    /* menys capes animades: iOS no perd la imatge de fons */
  .hero-ap .apfacts li, .hero-ap .apfacts li * { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-ap .apfacts li { background: rgba(10, 58, 53, .62); }
}
@media (max-width: 700px) {
  section { padding: 52px 0; }
  .hero .wrap { padding-top: 112px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .hero p.lead { font-size: 1.02rem; margin-top: 16px; }
  .hero .finder, .finder { margin-top: 26px; padding: 16px; gap: 10px; grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .finder > div:nth-child(1), .finder > div:nth-child(2) { grid-column: auto; }
  .finder > div:nth-child(3) { grid-column: 1 / -1; }
  .finder .btn { grid-column: 1 / -1; width: 100%; }
  .finder label { font-size: .68rem; margin-bottom: 4px; }
  .finder input, .finder select { padding: 10px 10px; font-size: 16px; min-height: 46px; }
  .finder-note { text-align: center; margin: 2px 0 0; }
  /* bàner de cookies: una franja petita, no mig mòbil */
  .cookie { left: 8px; right: 8px; bottom: 8px; }
  .cookie-in { padding: 12px 14px; border-radius: 14px; }
  .cookie-in p { font-size: .78rem; line-height: 1.38; margin-bottom: 6px; }
  .cookie-in #cookie-t { display: none; }
  .cookie-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .cookie-btns .btn { flex: none; padding: 10px 6px; font-size: .84rem; width: 100%; }
  .cookie-btns .linkbtn { grid-column: 1 / -1; text-align: center; font-size: .82rem; }
  /* botó flotant «Consulta disponibilitat»: al costat del de WhatsApp, sense tapar-lo */
  .stick-cta { left: 14px; right: 84px; bottom: 16px; padding: 14px 10px; font-size: .95rem; }
  .wa { right: 14px; bottom: 16px; }
  .site-footer .wrap { padding-bottom: 76px; }
}
@media (max-width: 860px) {
  /* reserva al mòbil: primer el calendari, després el preu i, al final, el formulari */
  .rsv-grid { display: flex; flex-direction: column; gap: 0; }
  .rsv-main { display: contents; }
  #rq { order: 1; } .rsv-side { order: 2; position: static; } #rg { order: 3; }
  .rsv-side .sum img { display: none; }
  .rsv-side .sum { margin-bottom: 14px; }
  .rsv-trust { margin: 4px 0 14px; }
}
/* CTA final: només els botons, sense frase */
.cta { padding: clamp(32px, 4.5vw, 52px) 0; }
.cta .cta-btns { margin-top: 0 !important; }
/* Portada: bloc de beneficis */
.benef { padding: clamp(44px, 6vw, 80px) 0; }
.benef .heading { margin-bottom: 30px; }
.benef-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.benef-grid h3 { font: 600 1.15rem "Fraunces", serif; color: var(--bosc); margin-bottom: 10px; }
.benef-grid p { color: var(--nogal-suau); font-size: .98rem; }
@media (max-width: 900px) { .benef-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benef-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Check-in dels hostes (/checkin/) */
.ck-hero { padding-bottom: 36px; }
.ck-lead { max-width: 56ch; margin-top: 14px; font-size: 1.12rem; color: var(--nogal-suau); }
.ck-sec { padding-bottom: 72px; }
.ck-wrap { max-width: 820px; }
.ck-load { text-align: center; color: var(--nogal-suau); padding: 40px 0; }
.ck-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ck-sum { font-size: .92rem; font-weight: 600; color: var(--nogal-suau); }
.ck-lang { display: inline-flex; background: #fff; border: 1.5px solid var(--linia); border-radius: 999px; padding: 3px; }
.ck-lang button { font: 600 .82rem "Work Sans", sans-serif; border: 0; background: transparent; color: var(--nogal-suau); padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.ck-lang button[aria-pressed="true"] { background: var(--nogal); color: var(--pedra); }
.ck-ja { background: #eef6f5; border: 1px solid #bcdcd8; color: var(--congost); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: .95rem; }
.ck-prog { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: .88rem; font-weight: 600; color: var(--nogal-suau); }
.ck-bar { flex: 1; height: 8px; background: var(--pedra-fosca); border-radius: 99px; overflow: hidden; }
.ck-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--congost), #2a9d78); border-radius: 99px; transition: width .4s ease; }
.ck-p { padding: 0; background: #fff; border: 1.5px solid var(--linia); border-radius: 18px; margin-bottom: 14px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.ck-p.fet { border-color: #9fcfc8; }
.ck-p:has(.ck-b:not([hidden])) { box-shadow: 0 6px 24px rgba(90, 58, 36, .08); }
.ck-h { display: flex; align-items: center; gap: 14px; width: 100%; background: transparent; border: 0; text-align: left; padding: 18px 20px; cursor: pointer; font-family: inherit; color: var(--nogal); }
.ck-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pedra-fosca); font-weight: 600; transition: background .25s, color .25s; }
.ck-p.fet .ck-n { background: var(--congost); color: #fff; }
.ck-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ck-t b { font: 600 1.15rem "Fraunces", serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-t small { font-size: .8rem; color: var(--nogal-suau); }
.ck-ok { color: var(--congost); font-weight: 700; opacity: 0; transition: opacity .25s; }
.ck-p.fet .ck-ok { opacity: 1; }
.ck-chev { width: 10px; height: 10px; border-right: 2px solid var(--nogal-suau); border-bottom: 2px solid var(--nogal-suau); transform: rotate(45deg); transition: transform .25s; margin: 0 4px 4px 0; }
.ck-h[aria-expanded="true"] .ck-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.ck-b { padding: 4px 20px 22px; }
.ck-extra .ck-b { padding-top: 20px; }
.ck-g { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 14px; }
.ck-g .full { grid-column: 1 / -1; }
.ck-f label, .ck-doc legend, .ck-adr legend { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nogal-suau); margin-bottom: 6px; padding: 0; }
.ck-f label em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 400; }
.ck-f input:not([type=radio]):not([type=checkbox]), .ck-f select { width: 100%; font: 500 1rem "Work Sans", sans-serif; color: var(--nogal); background: #fff; border: 1.5px solid var(--linia); border-radius: 10px; padding: 12px 14px; min-height: 48px; }
.ck-f input:focus, .ck-f select:focus { outline: 3px solid rgba(31, 111, 107, .25); border-color: var(--congost); }
.ck-f input[readonly] { background: var(--pedra); color: var(--nogal-suau); }
.ck-f.bad input:not([type=radio]), .ck-f.bad select, .ck-doc.bad .ck-seg span { border-color: #c0432b; }
.ck-doc, .ck-adr { border: 0; padding: 0; margin: 4px 0 14px; min-width: 0; }
.ck-doc legend small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ck-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ck-seg label { margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; font-weight: 500 !important; color: var(--nogal) !important; cursor: pointer; }
.ck-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ck-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--linia); border-radius: 999px; background: #fff; transition: all .15s; }
.ck-seg input:checked + span { background: var(--congost); border-color: var(--congost); color: #fff; }
.ck-seg input:focus-visible + span { outline: 3px solid rgba(31, 111, 107, .35); outline-offset: 2px; }
.ck-e { display: block; color: #9b2c1a; font-size: .84rem; margin-top: 5px; }
.ck-h2 { display: block; color: var(--nogal-suau); font-size: .84rem; margin-top: 6px; }
.ck-chk { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--nogal); margin: 6px 0 14px; cursor: pointer; }
.ck-chk input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--congost); flex: none; }
.ck-acc { margin-top: 18px; padding: 16px; background: var(--pedra-fosca); border-radius: 14px; font-size: .9rem; }
.ck-err { color: #9b2c1a; background: #fbeae6; border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.ck-go { width: 100%; margin-top: 16px; min-height: 54px; font-size: 1.05rem; }
.ck-go[disabled] { opacity: .6; cursor: wait; }
.ck-fet { background: #fff; border: 1.5px solid var(--linia); border-radius: 22px; padding: clamp(32px, 6vw, 56px); text-align: center; }
.ck-fet h2 { margin: 14px 0 10px; }
.ck-tick { stroke-dasharray: 48; stroke-dashoffset: 48; animation: ck-tick .6s .15s ease forwards; }
@keyframes ck-tick { to { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .ck-g { grid-template-columns: 1fr; } .ck-b { padding: 2px 16px 18px; } .ck-h { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .ck-tick { animation: none; stroke-dashoffset: 0; } .ck-bar i, .ck-p, .ck-n { transition: none; } }

.ck-instr { background: #fff; border: 2px solid var(--congost); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.ck-instr h2 { margin: 0 0 8px; font-size: 1.15rem; color: var(--congost); }
.ck-instr p { margin: 0; line-height: 1.55; }