/* ========================================================= Hotel Santuari · Balaguer Sistema visual v1 — blanc i negre (Motel One + Zola) Coherent amb Es Mirador, adaptat a la personalitat del Santuari ========================================================= */ /* ---------- 1. Tokens ---------- */ :root{ /* Superfícies */ --paper:#FFFFFF; /* blanc pur — targetes i fons principal */ --cream:#F8F6F3; /* crema molt subtil — alternativa al blanc */ --stone:#EDEAE5; /* bloc neutre càlid */ --ink:#111111; /* negre de marca */ --ink-soft:#2B2B2B; --muted:#6E6A66; --line:rgba(17,17,17,.14); --line-soft:rgba(17,17,17,.08); --on-dark:#F8F6F3; --on-dark-muted:rgba(248,246,243,.62); /* Radis — 4 escales, res enmig */ --r-pill:999px; /* botons, píndoles, chips */ --r-sm:14px; /* inputs */ --r-md:22px; /* targetes petites */ --r-lg:32px; /* targetes grans, blocs i files */ --r-block:32px; /* àlies de compatibilitat: no fer-lo servir */ /* Tipografia */ --serif:'Source Serif 4',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; /* Ombres i moviment */ --shadow:0 28px 64px -34px rgba(17,17,17,.45); --shadow-soft:0 14px 40px -26px rgba(17,17,17,.4); --ease:cubic-bezier(.22,.61,.36,1); /* L'única taca de color del blanc i negre: el descompte de les ofertes. Terracota fosca, del mateix aire que el burdeus de la pell «crema». */ --sale:#A63D2B; --sale-on:#FFFFFF; /* Mesures */ --wrap:1260px; --gut:30px; --header-h:96px; } /* ---------- 1b. Pells (skins) ---------- La pell es tria amb un atribut a l'etiqueta : → per defecte, blanc i negre → blocs de color, com Es Mirador → fons càlid i botons burdeus → fons càlid i botons negres El mini CMS només haurà d'escriure aquest atribut. Cap altre canvi. */ /* --- Pell «pastel»: color als avantatges --- */ :root[data-skin="pastel"]{ --sale:#C0563C; --sale-on:#FFFFFF; --acc-1:#F0D9CE; /* blush */ --acc-2:#D3DDCC; /* sage */ --acc-3:#CFDCE2; /* sky */ } :root[data-skin="pastel"] .adv-grid{ gap:20px;background:none;border:0;border-radius:0; } :root[data-skin="pastel"] .adv{ border-radius:var(--r-lg);padding:36px 32px; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } :root[data-skin="pastel"] .adv:hover{ transform:translateY(-4px);box-shadow:var(--shadow-soft); } :root[data-skin="pastel"] .adv:nth-child(3n+1){background:var(--acc-1)} :root[data-skin="pastel"] .adv:nth-child(3n+2){background:var(--acc-2)} :root[data-skin="pastel"] .adv:nth-child(3n+3){background:var(--acc-3)} :root[data-skin="pastel"] .adv p{color:rgba(17,17,17,.62)} /* --- Pell «crema»: fons càlid i botons burdeus --- */ :root[data-skin="crema"]{ --paper:#FFFDF8; --cream:#FAF5EC; --stone:#F0E7D8; --ink:#2E2A26; --ink-soft:#463F38; --muted:#7A6F62; --line:rgba(46,42,38,.15); --line-soft:rgba(46,42,38,.09); --on-dark:#FAF5EC; --on-dark-muted:rgba(250,245,236,.66); --sale:#73263A; --sale-on:#FFFFFF; --burdeus:#73263A; --burdeus-clar:#8C3049; --shadow:0 28px 64px -34px rgba(46,42,38,.45); --shadow-soft:0 14px 40px -26px rgba(46,42,38,.4); } /* Botons */ :root[data-skin="crema"] .pill.dark{background:var(--burdeus);border-color:var(--burdeus);color:#FFF9F3} :root[data-skin="crema"] .pill.dark:hover{background:var(--burdeus-clar)} :root[data-skin="crema"] .pill.outline{border-color:var(--burdeus);color:var(--burdeus)} :root[data-skin="crema"] .pill.outline:hover{background:var(--burdeus);color:#FFF9F3} :root[data-skin="crema"] .pill.light{color:var(--burdeus)} /* Accents */ :root[data-skin="crema"] .eyebrow{color:var(--burdeus)} :root[data-skin="crema"] .rule{background:var(--burdeus);opacity:.6} :root[data-skin="crema"] h1 em, :root[data-skin="crema"] h2 em, :root[data-skin="crema"] h3 em{color:var(--burdeus)} :root[data-skin="crema"] .txt-link{border-bottom-color:var(--burdeus);color:var(--burdeus)} :root[data-skin="crema"] .glance-tabs button[aria-selected="true"]{color:var(--burdeus)} :root[data-skin="crema"] .glance-tabs button::after{background:var(--burdeus)} :root[data-skin="crema"] .cond{border-left-color:var(--burdeus)} :root[data-skin="crema"] .adv svg, :root[data-skin="crema"] .gi svg{stroke:var(--burdeus)} /* Els blocs foscos i el peu passen a burdeus */ :root[data-skin="crema"] .block.dark, :root[data-skin="crema"] .block.dark .split-text, :root[data-skin="crema"] .block.dark .cta-in, :root[data-skin="crema"] .footer{background-color:var(--burdeus)} :root[data-skin="crema"] .block.dark .rule.on-dark{background:var(--on-dark)} /* --- Pell «crema-negre»: el mateix fons càlid, però tinta i botons negres --- */ :root[data-skin="crema-negre"]{ --paper:#FFFDF8; --cream:#FAF5EC; --stone:#F0E7D8; --ink:#161310; --ink-soft:#332E29; --muted:#7A6F62; --line:rgba(22,19,16,.15); --line-soft:rgba(22,19,16,.09); --on-dark:#FAF5EC; --on-dark-muted:rgba(250,245,236,.66); --shadow:0 28px 64px -34px rgba(22,19,16,.45); --shadow-soft:0 14px 40px -26px rgba(22,19,16,.4); } /* Res més. Botons, blocs foscos i peu segueixen --ink, que aquí és negre. Tota la diferència amb la pell per defecte és la temperatura del fons. */ /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.018em} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} ::selection{background:var(--ink);color:var(--cream)} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px} /* ---------- 3. Escala tipogràfica ---------- */ h1{font-size:clamp(44px,6.4vw,84px)} h2{font-size:clamp(32px,4.2vw,54px)} h3{font-size:clamp(23px,2.3vw,30px)} h4{font-size:20px} .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--ink-soft)} /* Èmfasi dins de títols: cursiva serif */ h1 em,h2 em,h3 em{font-style:italic;font-weight:300} /* Source Serif té més cos que Cormorant: el pes lleuger manté l'aire */ /* Cintell — marcador universal d'inici de secció */ .eyebrow{ font-family:var(--sans); font-size:11px;font-weight:600; letter-spacing:.2em;text-transform:uppercase; color:var(--muted); display:block;margin-bottom:20px; } .eyebrow.on-dark{color:var(--on-dark-muted)} /* Filet decoratiu */ .rule{width:48px;height:1px;background:var(--ink);opacity:.35;margin:0 0 26px} .rule.center{margin-left:auto;margin-right:auto} .rule.on-dark{background:var(--on-dark);opacity:.4} /* ---------- 4. Layout ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .sec{padding:104px 0} .sec.tight{padding:72px 0} .sec-head{max-width:640px;margin:0 auto 60px;text-align:center} /* Les pàgines sense heroi obren amb un h1 que ha de tenir la mida d'un h2 */ .sec-head h1{font-size:clamp(32px,4.2vw,54px)} .sec-head.left{margin-left:0;text-align:left} .sec-head p{color:var(--muted);margin-top:22px} .center{text-align:center} /* Blocs que "suren" sobre el fons. S'alineen exactament amb la resta del contingut (mateixa amplada útil que dins de .wrap) i porten el mateix radi que les targetes. Sense max-width s'estiraven a tota la pantalla i quedaven descordats en monitors grans. */ .block{ max-width:calc(var(--wrap) - var(--gut) * 2); margin:0 auto; border-radius:var(--r-lg,32px); overflow:hidden; isolation:isolate; } /* El retall s'aplica també a la graella interior: així les cantonades queden arrodonides encara que el contenidor no arribi a retallar els seus fills. */ .block > .split, .block > .cta-in{border-radius:inherit;overflow:hidden} @media (max-width:1320px){ .block{margin:0 var(--gut)} } .block.stone{background-color:var(--stone,#EDEAE5)} /* Atenció: NO es pot fer «background:#111; background:var(--ink)» com a reserva. Si la variable no existeix, el navegador no torna a la declaració anterior: descarta la propietat sencera. La reserva va dins del var(). */ .block.dark{ background-color:var(--ink,#111111); color:var(--on-dark,#F8F6F3); -webkit-print-color-adjust:exact; print-color-adjust:exact; forced-color-adjust:none; } .block.dark .muted,.block.dark p{color:var(--on-dark-muted)} .block.dark h2,.block.dark h3{color:var(--on-dark)} /* ---------- 5. Marcadors de foto ---------- */ /* Cada .ph declara data-src amb el fitxer que hi ha d'anar. En posar-hi un real, l'etiqueta desapareix sola. */ .ph{ position:relative;overflow:hidden; background:var(--stone); display:flex;align-items:center;justify-content:center; } .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .ph[data-src]::after{ content:attr(data-src); font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-size:11px;letter-spacing:.04em; color:var(--muted); padding:8px 14px; border:1px dashed var(--line); border-radius:var(--r-pill); background:rgba(255,255,255,.6); text-align:center;max-width:86%; } .ph:has(img)::after{display:none} /* Marcador quan una imatge encara no existeix */ .ph-missing{display:block;width:100%;height:100%;min-height:220px;background:var(--stone)} .ph.r4-3{aspect-ratio:4/3} .ph.r16-10{aspect-ratio:16/10} .ph.r1-1{aspect-ratio:1/1} .ph.r3-4{aspect-ratio:3/4} /* ---------- 6. Botons ---------- */ .pill{ display:inline-flex;align-items:center;gap:9px; font-size:14px;font-weight:500;letter-spacing:.01em; padding:14px 30px; border-radius:var(--r-pill); border:1.5px solid transparent; background:none; transition:background .3s var(--ease),color .3s var(--ease), border-color .3s var(--ease),transform .3s var(--ease); } .pill:hover{transform:translateY(-2px)} .pill.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)} .pill.dark:hover{background:#333} .pill.outline{border-color:var(--ink);color:var(--ink)} .pill.outline:hover{background:var(--ink);color:var(--cream)} .pill.light{background:var(--paper);color:var(--ink);border-color:var(--paper)} .pill.light:hover{background:transparent;color:var(--paper);border-color:var(--paper)} .pill.ghost-light{border-color:rgba(248,246,243,.5);color:var(--on-dark)} .pill.ghost-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .pill.sm{padding:10px 22px;font-size:13px} /* Enllaç de text subratllat */ .txt-link{ display:inline-block;font-size:14px;font-weight:500; padding-bottom:3px; border-bottom:1.5px solid var(--ink); transition:opacity .25s var(--ease),transform .25s var(--ease); } .txt-link:hover{opacity:.55;transform:translateX(3px)} .txt-link.on-dark{border-color:var(--on-dark)} /* ---------- 7. Capçalera flotant ---------- */ .header{position:fixed;inset:0 0 auto;z-index:200;padding:20px var(--gut) 0;pointer-events:none} .bar{ pointer-events:auto; max-width:var(--wrap);margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:12px 12px 12px 30px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--line-soft); border-radius:var(--r-pill); transition:box-shadow .35s var(--ease),background .35s var(--ease); } .header.scrolled .bar{box-shadow:var(--shadow-soft);background:rgba(255,255,255,.94)} .brand{display:flex;align-items:center;flex-shrink:0} /* El logotip és una imatge, no text reconstruït: alçada fixa i amplada lliure, perquè la proporció de la marca no es deformi mai. */ .brand .logo{height:34px;width:auto;display:block} .footer .brand .logo{height:40px} @media (max-width:640px){ .brand .logo{height:26px} } /* A 320 px la barra demana 284 px i només en té 280: retallem el logotip */ @media (max-width:360px){ .brand .logo{height:23px} .bar{padding-left:16px} } .nav{display:flex;align-items:center;gap:20px;min-width:0} .nav a{font-size:13.5px;position:relative;padding:4px 0;white-space:nowrap;transition:opacity .25s} .nav a::after{ content:'';position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--ink);transition:width .3s var(--ease); } .nav a:hover::after,.nav a[aria-current="page"]::after{width:100%} .head-right{display:flex;align-items:center;gap:10px;flex-shrink:0} /* Idiomes en fila, com a l'Es Mirador. Només a l'escriptori: a mòbil no hi caben quatre i es queda el botó desplegable. */ .lang-row{display:flex;gap:2px} .lang-row a{ font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--muted); padding:5px 8px;border-radius:var(--r-pill);transition:color .25s,background .25s} .lang-row a:hover{color:var(--ink)} .lang-row a[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--stone)} .lang{position:relative;display:none} .lang-btn{ display:flex;align-items:center;gap:6px; font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:8px 13px;border:1px solid var(--line);border-radius:var(--r-pill); background:none;transition:border-color .25s; } .lang-btn:hover{border-color:var(--ink)} .lang-menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:130px; background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow-soft); opacity:0;visibility:hidden;transform:translateY(-6px); transition:.25s var(--ease); } .lang.open .lang-menu{opacity:1;visibility:visible;transform:none} .lang-menu a{display:block;font-size:14px;padding:8px 14px;border-radius:var(--r-sm)} .lang-menu a:hover{background:var(--cream)} .lang-menu a[aria-current="true"]{font-weight:600} .burger{display:none;width:44px;height:44px;border:1px solid var(--line); border-radius:var(--r-pill);background:none;position:relative} .burger span{position:absolute;left:13px;width:18px;height:1.5px;background:var(--ink); transition:.3s var(--ease)} .burger span:nth-child(1){top:17px} .burger span:nth-child(2){top:24px} .burger.open span:nth-child(1){top:21px;transform:rotate(45deg)} .burger.open span:nth-child(2){top:21px;transform:rotate(-45deg)} /* Menú mòbil a pantalla completa */ .mobile-nav{ position:fixed;inset:0;z-index:190;background:var(--cream); padding:calc(var(--header-h) + 30px) var(--gut) 40px; display:flex;flex-direction:column;justify-content:center;gap:6px; transform:translateX(100%);transition:transform .45s var(--ease); } .mobile-nav.open{transform:none} .mobile-nav a{font-family:var(--serif);font-size:34px;padding:10px 0; border-bottom:1px solid var(--line-soft)} .mobile-nav .mob-foot{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px} /* ---------- 8. Hero ---------- */ /* Sense «overflow:hidden» a .hero: el calendari del cercador en surt per sota i quedaria tallat. Qui ha de retallar és la capa de les fotos, que fan zoom. */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; color:var(--on-dark)} .hero .ph{position:absolute;inset:0;overflow:hidden} .hero .ph::before{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(17,17,17,.42) 0%,rgba(17,17,17,.1) 42%,rgba(17,17,17,.66) 100%); } /* Cos de l'heroi: text + motor de reserves, sempre dins la primera pantalla */ .hero-body{ position:relative;z-index:2;width:100%; padding:calc(var(--header-h) + 40px) 0 clamp(22px,3.4vh,40px); display:flex;flex-direction:column;gap:clamp(24px,4.6vh,54px); } .hero-in{position:relative;z-index:2;width:100%} .hero h1{max-width:14ch;margin-bottom:22px} .hero .lead{max-width:46ch;color:rgba(248,246,243,.86)} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .hero.compact{min-height:64svh;align-items:center} .hero.compact .hero-in{padding:calc(var(--header-h) + 40px) 0 60px} .hero.compact h1{max-width:18ch} /* --- Fosa encadenada de l'heroi (sense fletxes ni punts) --- */ .hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-slides .slide{ position:absolute;inset:0; opacity:0;transition:opacity 1.8s var(--ease); will-change:opacity; } .hero-slides .slide.on{opacity:1} .hero-slides .slide img{ width:100%;height:100%;object-fit:cover; object-position:center; /* cada slide el sobreescriu en línia */ transform:scale(1.04);transition:transform 9s linear; } .hero-slides .slide.on img{transform:scale(1)} .hero-slides::after{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(17,17,17,.42) 0%,rgba(17,17,17,.1) 42%,rgba(17,17,17,.66) 100%); } /* Crèdit fotogràfic, per slide */ .hero-credit{ position:absolute;right:var(--gut);bottom:18px;z-index:3; font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:rgba(248,246,243,.55); opacity:0;transition:opacity .8s var(--ease); text-align:right; } .hero-credit.on{opacity:1} @media (prefers-reduced-motion:reduce){ .hero-slides .slide{transition:none} .hero-slides .slide img{transform:none;transition:none} } /* Cua d'scroll */ .scroll-cue{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%); font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,246,243,.6)} .scroll-cue::after{content:'';display:block;width:1px;height:34px;margin:10px auto 0; background:linear-gradient(rgba(248,246,243,.6),transparent)} /* ---------- 9. Barra de reserva (motor) ---------- */ /* Dins de l'heroi no necessita marge negatiu: la posiciona .hero-body */ .book-bar{position:relative;z-index:20} .book-form{ background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-lg);box-shadow:var(--shadow); display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:stretch; padding:10px;gap:4px; } .bf{padding:14px 24px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px} .bf:last-of-type{border-right:0} .bf label{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .bf input,.bf select{ border:0;background:none;font-family:var(--sans);font-size:15px;font-weight:400; color:var(--ink);padding:2px 0;width:100%; } .bf input::-webkit-calendar-picker-indicator{opacity:.4;cursor:pointer} .book-form .pill{align-self:center;margin-right:6px;white-space:nowrap} /* ─── Cercador de GuestPro ──────────────────────────────────────────────── El widget ve amb el seu CSS, que no encaixa amb el blanc i negre. El redibuixem perquè quedi igual que la nostra barra: mateixa caixa, mateixes etiquetes petites en majúscules, mateix botó pill negre. Cal !important perquè el seu full es carrega després del nostre. Els noms de classe són els que genera guestpro.min.js; comprovats el 13/08/2026 contra el widget real, no suposats. */ .gp-widget{ background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-lg);box-shadow:var(--shadow); padding:10px;overflow:visible; max-width:880px;margin:0 auto} /* El calendari ha de passar per sobre del que ve després de l'heroi */ .book-bar{z-index:60} .gp-widget .guestpro{ background:transparent !important;border:0 !important; padding:0 !important;margin:0 !important;box-shadow:none !important; font-family:var(--sans) !important} .gp-widget .guestpro-form{ display:flex !important;flex-wrap:nowrap !important;align-items:stretch !important; padding:0 !important;margin:0 !important;text-align:left !important; background:transparent !important;border:0 !important} /* Cada camp: els mateixos coixins i la mateixa línia divisòria que .bf */ .gp-widget .guestpro-form > div{ position:relative; padding:14px 24px !important;margin:0 !important; border-right:1px solid var(--line-soft) !important; display:flex !important;flex-direction:column !important;justify-content:center !important} .gp-widget .guestpro-form > div:last-child{border-right:0 !important} /* Amplades relatives: les dates manen, com a la nostra barra */ /* Aquesta casa només té un hotel: «Allotjament · Cercar tots» no diu res. Amagar-lo no canvia el que s'envia al motor (provat contra el widget real). Cal repetir «.guestpro-form > div» o la regla de sobre li guanya: display:flex amb dues classes i un element pesa més que dues classes soles. */ .gp-widget .guestpro-form > div.guestpro-accommodation{display:none !important} .gp-widget .guestpro-dates{flex:3.4 1 0 !important;min-width:330px !important} /* El rang de dates és llarg: si el deixem tallar, es llegeix «13 d'ag. del…» */ .gp-widget .guestpro-dates-display{ white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important} .gp-widget .guestpro-occupancy{flex:1.6 1 0 !important} .gp-widget .guestpro-promo{flex:1.6 1 0 !important} .gp-widget .guestpro-submit{ flex:0 0 auto !important;padding:6px 6px 6px 20px !important; justify-content:center !important} .gp-widget .guestpro-submit-spacer{display:none !important} /* L'etiqueta petita en majúscules */ .gp-widget .guestpro-label{ display:block !important; font-family:var(--sans) !important;font-size:10px !important;font-weight:600 !important; letter-spacing:.18em !important;text-transform:uppercase !important; color:var(--muted) !important;margin:0 0 3px !important;line-height:1.4 !important} /* El valor que es llegeix */ .gp-widget .guestpro-form input[type=text], .gp-widget .guestpro-form input:not([type]), .gp-widget .guestpro-accommodation-display, .gp-widget .guestpro-dates-display, .gp-widget .guestpro-occupancy-display, .gp-widget .guestpro-promo-promo{ background:transparent !important;border:0 !important;box-shadow:none !important;outline:0 !important; font-family:var(--sans) !important;font-size:15px !important;font-weight:400 !important; color:var(--ink) !important;padding:2px 0 !important;margin:0 !important; width:100% !important;height:auto !important;text-align:left !important; text-overflow:ellipsis;cursor:pointer} .gp-widget .guestpro-promo-promo{cursor:text} .gp-widget .guestpro-form input::placeholder{color:var(--muted) !important;opacity:1} /* El botó, idèntic al .pill.dark */ .gp-widget .guestpro-search_button{ background:var(--ink) !important;color:var(--cream) !important; border:1.5px solid var(--ink) !important;border-radius:var(--r-pill) !important; font-family:var(--sans) !important;font-size:14px !important;font-weight:500 !important; letter-spacing:.01em !important;text-transform:none !important; padding:14px 30px !important;width:auto !important;cursor:pointer !important; white-space:nowrap !important;-webkit-appearance:none;appearance:none; transition:background .3s var(--ease),transform .3s var(--ease) !important} .gp-widget .guestpro-search_button:hover{ background:#333 !important;transform:translateY(-2px)} /* Desplegables: la nostra ombra i les nostres cantonades */ .gp-widget .guestpro-dropdown{ z-index:9999 !important; background:var(--paper) !important;border:1px solid var(--line-soft) !important; border-radius:var(--r-md) !important; box-shadow:0 18px 44px rgba(17,17,17,.16) !important; font-family:var(--sans) !important;color:var(--ink) !important} .gp-widget .guestpro-dropdown select{ font-family:var(--sans) !important;font-size:14px !important;color:var(--ink) !important; border:1px solid var(--line-soft) !important;border-radius:10px !important; background:var(--paper) !important;padding:8px 10px !important} /* El calendari amb els preus de cada dia */ .gp-widget .guestpro-picker{font-family:var(--sans) !important;color:var(--ink) !important} .gp-widget .guestpro-picker-title{ font-family:var(--serif) !important;font-weight:400 !important; font-size:17px !important;color:var(--ink) !important} .gp-widget .guestpro-picker-day-name{ font-size:10px !important;font-weight:600 !important;letter-spacing:.12em !important; text-transform:uppercase !important;color:var(--muted) !important} .gp-widget .guestpro-picker-day{border-radius:10px !important} .gp-widget .guestpro-picker-rate{ font-size:10px !important;color:var(--muted) !important;letter-spacing:0 !important} .gp-widget .guestpro-picker-selected-start, .gp-widget .guestpro-picker-selected-end, .gp-widget .guestpro-picker-selected-date{ background:var(--ink) !important;color:var(--cream) !important} .gp-widget .guestpro-picker-selected-start .guestpro-picker-rate, .gp-widget .guestpro-picker-selected-end .guestpro-picker-rate, .gp-widget .guestpro-picker-selected-date .guestpro-picker-rate{ color:rgba(248,246,243,.75) !important} .gp-widget .guestpro-picker-in-range{background:var(--stone) !important;color:var(--ink) !important} .gp-widget .guestpro-picker-nav-btn{ background:transparent !important;border:1px solid var(--line-soft) !important; border-radius:999px !important;color:var(--ink) !important} /* En pantalla petita, en columna, com fa la nostra barra */ @media (max-width:900px){ .gp-widget .guestpro-form{flex-wrap:wrap !important;flex-direction:column !important} .gp-widget .guestpro-form > div{ border-right:0 !important;border-bottom:1px solid var(--line-soft) !important; padding:14px 18px !important;flex:1 1 auto !important;width:100% !important} .gp-widget .guestpro-submit{ border-bottom:0 !important;padding:14px 6px 6px !important} .gp-widget .guestpro-search_button{width:100% !important} .gp-widget .guestpro-dropdown{left:0 !important;right:0 !important;width:auto !important} } /* Marc del motor incrustat. L'alçada la fixem nosaltres perquè un iframe d'un altre domini no pot dir-nos quant ocupa: el navegador no ho permet. */ .engine-frame{ border-radius:var(--r-lg,32px);overflow:hidden;background:var(--paper); border:1px solid var(--line-soft);isolation:isolate} .engine-frame iframe{display:block;width:100%;min-height:2400px;border:0} @media (max-width:760px){.engine-frame iframe{min-height:2600px}} .book-note{ margin:12px auto 0;max-width:62ch;text-align:center; font-size:12.5px;line-height:1.55;color:var(--muted)} /* Contenidor del widget GuestPro incrustat */ .engine-embed{background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)} .engine-embed iframe{width:100%;min-height:2200px;border:0;display:block} /* ---------- 10. Intro dues columnes ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0} .split .ph{min-height:520px;height:100%} .split-text{padding:clamp(40px,5vw,80px)} /* Cinturó i tirants: el fons fosc també a la columna de text. */ .block.dark .split-text{background-color:var(--ink,#111111)} .block.stone .split-text{background-color:var(--stone,#EDEAE5)} .split.flip .ph{order:2} .split-stats{display:flex;flex-wrap:wrap;gap:38px;margin-top:38px; padding-top:32px;border-top:1px solid var(--line-soft)} .stat b{display:block;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1} .stat span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ---------- 11. Graelles genèriques ---------- */ .grid{display:grid;gap:26px} /* Per defecte, un element de graella no es pot encongir per sota del seu contingut. En un mòbil això vol dir columnes més amples que la pantalla. Aquesta línia ho evita a tot arreu d'un cop. */ .grid > *{min-width:0} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} /* Targeta estàndard */ .card{ background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column; transition:transform .45s var(--ease),box-shadow .45s var(--ease); } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .card:hover .ph img{transform:scale(1.06)} .card-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1} .card-body h3{margin-bottom:12px} .card-body p{font-size:14.5px;color:var(--muted)} /* El botó sempre a la dreta, hi hagi codi promocional o no. Amb «space-between» i un sol fill, el botó se n'anava a l'esquerra. */ .card-foot{margin-top:auto;padding-top:24px;display:flex;align-items:center; justify-content:flex-start;gap:14px;flex-wrap:wrap} .card-foot > .pill{margin-left:auto} /* Píndola de categoria */ .cat{ display:inline-block;font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--ink); background:var(--stone);padding:6px 15px;border-radius:var(--r-pill); margin-bottom:16px;align-self:flex-start; } /* Llista d'equipament en píndoles */ .feat{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0} .feat li{font-size:12.5px;color:var(--ink-soft);background:var(--cream); border:1px solid var(--line-soft);padding:7px 15px;border-radius:var(--r-pill)} /* ---------- 12. Fila d'habitació (patró principal) ---------- */ .roomrow{ display:grid;grid-template-columns:1fr 1fr;align-items:stretch; background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-lg);overflow:hidden;margin-bottom:26px; } .roomrow .ph{min-height:460px} /* Fila sense fotografia encara: el marcador ocupa el lloc */ .roomrow .ph:empty{background:var(--cream);border-right:1px dashed var(--line)} .roomrow.flip .ph:empty{border-right:0;border-left:1px dashed var(--line)} .roomrow.flip .ph{order:2} .roomrow-text{padding:clamp(36px,4.6vw,64px);display:flex;flex-direction:column;justify-content:center} .roomrow-text h3{margin-bottom:14px} .roomrow-text .desc{font-size:15px;color:var(--muted)} .room-meta{display:flex;flex-wrap:wrap;gap:26px;margin:26px 0 0; padding-top:22px;border-top:1px solid var(--line-soft)} .room-meta div span{display:block;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted)} .room-meta div b{font-family:var(--serif);font-size:22px;font-weight:400} .roomrow-text .pill{align-self:flex-start;margin-top:30px} .cap-note{font-size:12.5px;color:var(--muted);margin:14px 0 0} .cap-note a{border-bottom:1px solid var(--line)} .cap-note a:hover{border-color:var(--ink)} /* ---------- 13. Ofertes ---------- */ .offer-item{position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .offer-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .offer-item .ph{overflow:hidden} .offer-item .ph img{transition:transform .7s var(--ease)} .offer-item:hover .ph img{transform:scale(1.05)} .offer-item h2{font-size:26px;line-height:1.15;margin-bottom:12px} /* La casella del codi promocional, sobre el bloc negre */ .promo-box{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px} .promo-box input{ background:transparent;border:1px solid rgba(248,246,243,.4);color:var(--on-dark); border-radius:var(--r-pill);padding:14px 26px;font-family:var(--sans);font-size:14px; min-width:220px;text-transform:uppercase;letter-spacing:.06em} .promo-box input::placeholder{color:rgba(248,246,243,.55);text-transform:none;letter-spacing:0} .promo-box input:focus{outline:none;border-color:var(--on-dark)} .offer-badge{ position:absolute;top:18px;left:18px;z-index:3; display:inline-flex;align-items:center; font-family:var(--sans);font-size:16px;font-weight:700; letter-spacing:-.01em;line-height:1; background:var(--sale);color:var(--sale-on); padding:11px 20px;border-radius:var(--r-pill); box-shadow:0 10px 26px -12px rgba(17,17,17,.7); } .offer-badge.light{background:var(--paper);color:var(--ink)} /* Una ombra suau a la part de dalt de la foto perquè el distintiu es llegeixi sempre, també sobre una imatge clara. */ .offer-item .ph::after{ content:'';position:absolute;inset:0 0 auto;height:110px;z-index:2; background:linear-gradient(180deg,rgba(17,17,17,.22),transparent); pointer-events:none} .offer-item .ph{position:relative} .cond{ background:var(--cream);border-left:3px solid var(--ink); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:18px 20px;margin-top:22px; } .cond h3{font-family:var(--sans);font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .cond li{font-size:12.5px;line-height:1.65;color:var(--ink-soft); padding-left:16px;position:relative} .cond li::before{content:'';position:absolute;left:0;top:11px; width:5px;height:1px;background:var(--muted)} .cond li b{font-weight:600} .code-chip{ display:inline-flex;align-items:center;gap:7px; font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-size:12.5px;letter-spacing:.08em; border:1px dashed var(--ink);border-radius:var(--r-pill); padding:8px 16px; } /* ---------- 14. Avantatges ---------- */ .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line-soft);border:1px solid var(--line-soft); border-radius:var(--r-lg);overflow:hidden} .adv{background:var(--paper);padding:38px 32px;transition:background .35s var(--ease)} .adv:hover{background:var(--cream)} .adv svg{ width:34px;height:34px;display:block;margin-bottom:20px; stroke:var(--ink);stroke-width:1.4;fill:none; stroke-linecap:round;stroke-linejoin:round; transition:transform .4s var(--ease); } .adv:hover svg{transform:translateY(-3px)} .adv .num{font-family:var(--serif);font-size:15px;color:var(--muted); display:block;margin-bottom:16px} .adv h4{font-family:var(--serif);font-size:23px;margin-bottom:8px} .adv p{font-size:13.5px;color:var(--muted)} /* ---------- 15. Serveis (llista compacta) ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 46px} .svc{padding:26px 0;border-bottom:1px solid var(--line-soft); display:flex;gap:18px;align-items:flex-start} .svc b{font-family:var(--serif);font-size:21px;font-weight:400;display:block;margin-bottom:4px} .svc p{font-size:13.5px;color:var(--muted)} .svc .idx{font-size:11px;color:var(--muted);padding-top:8px;min-width:22px} /* ---------- 15b. Tot d'un cop d'ull (pestanyes + icones) ---------- */ .glance-tabs{ display:flex;flex-wrap:wrap;justify-content:center;gap:34px; margin:0 0 60px;padding:0 0 2px; } .glance-tabs button{ background:none;border:0;padding:8px 2px; font-family:var(--sans);font-size:12.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--muted); position:relative;transition:color .3s var(--ease); } .glance-tabs button::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease); } .glance-tabs button:hover{color:var(--ink)} .glance-tabs button[aria-selected="true"]{color:var(--ink)} .glance-tabs button[aria-selected="true"]::after{transform:scaleX(1)} .glance-panel[hidden]{display:none} .glance-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:44px 52px; } .gi{display:flex;gap:20px;align-items:flex-start} .gi svg{ width:32px;height:32px;flex-shrink:0;margin-top:2px; stroke:var(--ink);stroke-width:1.4;fill:none; stroke-linecap:round;stroke-linejoin:round; } .gi h4{font-family:var(--sans);font-size:15.5px;font-weight:500; letter-spacing:0;line-height:1.4;margin:0 0 6px;color:var(--ink)} .gi p{font-size:14px;line-height:1.6;color:var(--muted);margin:0} .gi p + p{margin-top:6px} .gi a{border-bottom:1px solid var(--line);transition:border-color .25s} .gi a:hover{border-color:var(--ink)} .gi .pending{font-style:italic} @media (max-width:980px){ .glance-grid{grid-template-columns:repeat(2,1fr);gap:38px 40px} } @media (max-width:640px){ .glance-grid{grid-template-columns:1fr;gap:32px} .glance-tabs{gap:20px;justify-content:flex-start;margin-bottom:42px; overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .glance-tabs button{white-space:nowrap;font-size:11.5px} } /* ---------- 16. Entorn ---------- */ .env-item{position:relative;border-radius:var(--r-lg);overflow:hidden; display:flex;align-items:flex-end;min-height:340px;color:var(--on-dark)} .env-item .ph{position:absolute;inset:0} .env-item .ph::before{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,transparent 30%,rgba(17,17,17,.78) 100%)} .env-item .env-body{position:relative;z-index:2;padding:30px} .env-item h3{font-size:26px;margin-bottom:8px} .env-item p{font-size:13.5px;color:rgba(248,246,243,.75);margin:0} .env-item .dist{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:rgba(248,246,243,.6);display:block;margin-bottom:10px} .env-item:hover .ph img{transform:scale(1.06)} .env-item.tall{min-height:auto;grid-row:span 2} /* ---------- 17. Ressenyes ---------- Atenció al nom: «.rev» és la targeta de ressenya. La fila amb la foto a l'altra banda es diu «.flip», no «.rev», perquè si no hereta d'aquí el fons, la vora i els 34 px de coixí. */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .rev{background:var(--paper);border:1px solid var(--line-soft); border-radius:var(--r-lg);padding:34px} .rev .stars{font-size:13px;letter-spacing:.28em;margin-bottom:18px} .rev blockquote{margin:0 0 20px;font-family:var(--serif);font-size:23px;line-height:1.35} .rev cite{font-style:normal;font-size:12.5px;color:var(--muted)} /* ---------- 18. Menú / restaurant ---------- */ .menu-list li{display:flex;justify-content:space-between;gap:20px;align-items:baseline; padding:16px 0;border-bottom:1px solid var(--line-soft)} .menu-list b{font-family:var(--serif);font-size:20px;font-weight:400} .menu-list span{font-size:13px;color:var(--muted);white-space:nowrap} .hours{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:14.5px} .hours dt{color:var(--muted)} .hours dd{margin:0} /* ---------- 19. CTA final ---------- */ .cta-in{padding:clamp(64px,8vw,104px) var(--gut);text-align:center} .block.dark .cta-in{background-color:var(--ink,#111111)} .cta-in h2{max-width:16ch;margin:0 auto 22px} .cta-in p{max-width:52ch;margin:0 auto 36px} .cta-in .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* ---------- 20. Contacte ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start} .cinfo dl{display:grid;grid-template-columns:1fr;gap:26px;margin:0} .cinfo dt{font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin-bottom:6px} .cinfo dd{margin:0;font-size:16px} .cinfo dd a{border-bottom:1px solid var(--line);transition:border-color .25s} .cinfo dd a:hover{border-color:var(--ink)} .cform{display:grid;gap:16px} .cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cform input,.cform textarea,.cform select{ width:100%;font-family:var(--sans);font-size:15px;font-weight:300; padding:15px 20px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r-sm); transition:border-color .25s; } .cform textarea{min-height:150px;resize:vertical} .cform input:focus,.cform textarea:focus{outline:0;border-color:var(--ink)} .cform .check{display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)} .cform .check input{width:auto;flex-shrink:0;margin-top:3px} .map{border-radius:var(--r-lg);overflow:hidden;max-width:calc(var(--wrap) - var(--gut) * 2);margin:0 auto;line-height:0} .map iframe{width:100%;height:460px;border:0;filter:grayscale(1) contrast(1.05)} /* ---------- 21. Acordió (FAQ / menús) ---------- */ .acc-item{border-bottom:1px solid var(--line-soft)} .acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:24px 0;background:none;border:0;text-align:left; font-family:var(--serif);font-size:22px} .acc-q .ic{flex-shrink:0;width:26px;height:26px;position:relative;transition:transform .35s var(--ease)} .acc-q .ic::before,.acc-q .ic::after{content:'';position:absolute;background:var(--ink); left:50%;top:50%;transform:translate(-50%,-50%)} .acc-q .ic::before{width:13px;height:1px} .acc-q .ic::after{width:1px;height:13px} .acc-item.open .acc-q .ic{transform:rotate(45deg)} .acc-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .acc-a-in{padding:0 0 26px;font-size:14.5px;color:var(--muted);max-width:66ch} /* ---------- 21b. Llista de preguntes freqüents ---------- La pregunta i la resposta s'han de distingir a cop d'ull. No ho fem amb color (el negre ja és negre i no hi ha on anar), sinó amb el que separa millor dos nivells de text: família, mida i pes. pregunta serif · 21 px · pes 500 · negre resposta sans · 15 px · pes 400 · gris fosc Dues famílies diferents es distingeixen abans que dos grisos. */ /* Tota la llista en una columna centrada, no només la resposta. Abans la pregunta ocupava els 1.176 px del contenidor i la resposta es quedava a 610: semblava tallada. Ara les dues comparteixen amplada i es llegeix com una columna, no com un retall. A tota amplada la línia faria 166 caràcters; aquí en fa uns 90, que és el que es pot llegir sense perdre el fil d'una línia a l'altra. */ .faq-list{max-width:720px;margin:0 auto; border-top:1px solid var(--line-soft)} .faq-list .acc-h{margin:0;font-size:inherit;font-family:inherit;font-weight:inherit} .faq-list .acc-q{ font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.35; color:var(--ink);align-items:flex-start;gap:24px;padding:26px 0; transition:color .25s var(--ease)} .faq-list .acc-q:hover{color:var(--ink-soft)} .faq-list .acc-q .ic{margin-top:5px} /* Només n'hi pot haver una d'oberta, o sigui que no cal cap marca lateral per saber quina estàs llegint: és l'única. */ .faq-list .acc-a-in{ padding-bottom:30px;max-width:none; font-size:16px;line-height:1.75;color:var(--ink-soft)} .faq-list .acc-a-in p + p{margin-top:14px} @media (max-width:640px){ .faq-list .acc-q{font-size:18px;gap:16px;padding:22px 0} .faq-list .acc-a-in{font-size:15.5px} } /* ---------- 21c. Pàgina no trobada ---------- El «404» va darrere del text, gros i molt clar: fa de fons, no de titular. El titular de veritat és la frase, que és la que ha de llegir la persona. */ .sec-404{padding:calc(var(--header-h) + 90px) 0 120px;position:relative;overflow:hidden} .e404{max-width:680px;margin:0 auto;text-align:center;position:relative} .e404-num{ position:absolute;left:50%;top:-104px;transform:translateX(-50%); font-family:var(--serif);font-weight:400;font-size:clamp(150px,21vw,250px); line-height:1;letter-spacing:-.03em;color:var(--stone); z-index:-1;user-select:none;pointer-events:none;margin:0} .e404-sign{ width:76px;height:76px;display:block;margin:0 auto 34px; stroke:var(--ink);stroke-width:1.4;fill:none; stroke-linecap:round;stroke-linejoin:round; animation:e404-oscil 5s ease-in-out infinite;transform-origin:60px 108px} @keyframes e404-oscil{ 0%,100%{transform:rotate(-2.5deg)} 50% {transform:rotate(2.5deg)} } @media (prefers-reduced-motion:reduce){.e404-sign{animation:none}} .e404 h1{margin-bottom:20px} .e404-text{color:var(--muted);max-width:50ch;margin:0 auto} .e404-sub{ margin:52px 0 16px;font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .e404-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .e404-foot{ margin-top:44px;padding-top:34px;border-top:1px solid var(--line-soft); display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center} .e404-tel{font-size:14px;color:var(--muted)} .e404-tel a{color:var(--ink);border-bottom:1px solid var(--line)} .e404-tel a:hover{border-color:var(--ink)} @media (max-width:640px){ .sec-404{padding-top:calc(var(--header-h) + 64px);padding-bottom:80px} .e404-num{top:-62px} .e404-sign{width:62px;height:62px;margin-bottom:20px} } /* ---------- 22. Peu ---------- */ .footer{background:var(--ink);color:var(--on-dark); border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:104px;padding:80px 0 34px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px} .foot-grid h4{font-family:var(--sans);font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:20px} .foot-grid li{margin-bottom:11px} .foot-grid a{font-size:14.5px;color:var(--on-dark-muted);transition:color .25s} .foot-grid a:hover{color:var(--on-dark)} .foot-brand p{font-size:14px;color:var(--on-dark-muted);margin-top:22px;max-width:32ch} .foot-bottom{margin-top:60px;padding-top:26px;border-top:1px solid rgba(248,246,243,.16); display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px; font-size:12.5px;color:var(--on-dark-muted)} .foot-bottom nav{display:flex;flex-wrap:wrap;gap:20px} /* ---------- 23. Animació d'entrada ---------- */ .reveal{opacity:0;transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } /* ---------- 23b. Barra de reserva fixa (només mòbil) ---------- Al mòbil no hi caben logotip, idiomes, «Reservar» i el botó de menú a la mateixa barra: en una pantalla de 390 px demanaven 407 px i en teníem 332. Traiem «Reservar» de dalt i el posem aquí, sempre a la vista mentre es baixa. La puja el JS quan el cercador de l'heroi ja no es veu, perquè no se li posi al damunt. */ .mobile-cta{display:none} /* La barra de reserva de baix apareix quan el botó «Reservar» marxa de la capçalera, no abans: si no, entre 1080 i 1240 px en tindries dos. */ @media (max-width:1080px){ .mobile-cta{ display:flex;gap:10px;align-items:center; position:fixed;left:0;right:0;bottom:0;z-index:180; padding:10px var(--gut); padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.93); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line-soft); transform:translateY(120%); transition:transform .4s var(--ease); } .mobile-cta.on{transform:none} .mobile-cta .pill{padding:14px 20px;font-size:14px} .mobile-cta .pill.dark{flex:1;justify-content:center} .mobile-cta .pill.outline{flex:0 0 auto;padding:14px 16px} .mobile-cta svg{width:20px;height:20px;fill:currentColor;display:block} /* Que el peu no quedi mai tapat per la barra. L'espai va dins del peu i no al body: si no, quedaria una franja crema sota el peu fosc. */ .footer{padding-bottom:calc(34px + 74px)} /* Amb el menú obert, la barra sobra: el menú ja porta el seu botó */ body.menu-open .mobile-cta{transform:translateY(120%)} } /* ---------- 24. Responsive ---------- */ /* La capçalera té tres estats, no dos. * * Abans en tenia dos i el canvi era a 1240 px, que és molt d'hora: al Mac, * una finestra que no ocupi tota la pantalla sol fer uns 1200 px i ja et * sortia el menú d'hamburguesa en un ordinador de sobretaula. Semblava un * error i ho era. * * Mesurat amb la Inter de veritat, entrada per entrada i en els quatre * idiomes: la barra sencera més llarga és la castellana i demana 1182 px. * Per això no n'hi havia prou de baixar el punt de canvi — no hi cabia. * El que calia era fer la barra més estreta: * * fila d'idiomes → botó desplegable −90 px * separació del menú 20 → 14 px −42 px * logotip 34 → 30 px −21 px * marges de la barra més justos −20 px * * Amb això la barra compacta demana 1008 px, i el menú sencer aguanta fins * a 1080 px amb 72 px de marge, que és el coixí per si la Inter no carrega * i el navegador tira de la lletra del sistema, que és més ampla. */ /* Tram intermedi: el menú sencer hi és, però la barra va prima. */ @media (max-width:1240px) and (min-width:1081px){ .lang-row{display:none} .lang{display:block} .nav{gap:14px} .brand .logo{height:30px} .bar{gap:18px;padding:12px 12px 12px 22px} } /* A partir d'aquí sí que no hi cap: menú d'hamburguesa. */ @media (max-width:1080px){ .nav{display:none} .lang-row{display:none} .lang{display:block} .burger{display:block} /* «Reservar» passa a la barra de baix: aquí no hi cap amb la resta */ .head-right > .pill{display:none} .bar{gap:14px;padding:10px 10px 10px 20px} .brand .logo{height:30px} } @media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} .adv-grid,.svc-grid,.rev-grid{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ :root{--gut:20px} .sec{padding:74px 0} .split,.roomrow{grid-template-columns:1fr} /* Compte amb «min-height» + «aspect-ratio» dins d'una graella: la mida mínima automàtica de l'element passa a ser alçada × proporció, i això eixamplava la columna fins a 512 px dins d'un mòbil de 390. La foto s'emportava el contingut amb ella. Amb la proporció n'hi ha prou. */ .split > *,.roomrow > *{min-width:0} .split .ph,.roomrow .ph{min-height:0;aspect-ratio:16/10} .split.flip .ph,.roomrow.flip .ph{order:0} .g2,.g3,.env-grid{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr;gap:44px} .book-form{grid-template-columns:1fr 1fr} .bf:nth-of-type(2){border-right:0} .book-form .pill{grid-column:1/-1;justify-content:center;margin:6px} .env-item.tall{grid-row:auto} } @media (max-width:640px){ .adv-grid,.svc-grid,.rev-grid,.g4,.foot-grid{grid-template-columns:1fr} /* Dates una al costat de l'altra, ocupació i botó a tota amplada: 3 files en comptes de 4, així el motor cap sempre a la primera pantalla */ .book-form{grid-template-columns:1fr 1fr;padding:8px} .bf{padding:11px 16px} .bf:nth-of-type(2){border-right:0} .bf:nth-of-type(3){grid-column:1/-1;border-right:0;border-top:1px solid var(--line-soft)} .book-form .pill{margin:4px 0 0} .hero-body{gap:20px;padding-top:calc(var(--header-h) + 20px)} .hero h1{margin-bottom:16px} .split-stats{gap:24px} .mobile-nav a{font-size:28px} .hero .lead{font-size:16px} .foot-bottom{flex-direction:column} } /* Pantalles baixes (mòbil apaïsat, portàtils petits): l'heroi s'ajusta */ @media (max-height:700px) and (min-width:641px){ .hero{min-height:auto} .hero-body{padding-top:calc(var(--header-h) + 28px);gap:26px} .hero h1{font-size:clamp(38px,5vw,58px)} .hero .lead{display:none} } /* ---------- 25. Impressió ---------- */ @media print{ .header,.mobile-nav,.book-bar,.scroll-cue,.footer,.mobile-cta{display:none} body{background:#fff} .block,.card{break-inside:avoid} }