/* hidden siempre gana (antes .eng-none{display:grid} dejaba el cartel siempre visible) */
[hidden]{display:none!important}
/* ============================================================
La Saucisserie Gîtes - design system (from the family's, re-themed by _build/tema.py)
Clon de la familia (Siete Villas / Villetta: reglas finas, mucho aire,
fotos grandes) con la paleta de la casa en Sausset-les-Pins: el verde de
la pinede #1e2e45 (bandas, hero, pie, velos sobre las fotos), el azul
del Mediterraneo #3f7a12 (botones, precios, enlaces), la piedra #cfcbb8 y
la arena clara #f6f3ea de fondo; texto verde-gris #1b2430. Tipografia:
Newsreader (serif con optical size) + Figtree. Modo claro y oscuro.
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:root{
--pad: clamp(18px,4vw,64px);
--serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
--sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
--ease: cubic-bezier(.16,1,.3,1);
--slide-w: min(86%,1100px);
/* la paleta de la villetta (la de su sitio actual) */
--field:#27463a; /* deep green: labels, links, the cards' edge */
--field-2:#345c4c;
--deep:#1e2e45; /* the slate navy of their headings: hero, footer, veils over the photos */
--wood:#5e6b66; /* gris calido: iconos y detalles */
--ember:#3f7a12; /* el azul del Mediterraneo: el boton de reservar, los precios, los enlaces */
--ember-2:#336210;
--wheat:#e9e4c8; /* etiquetas sobre marron: arena clara */
--stone:#cfcbb8; /* el gris claro */
--paper:#f6f3ea;
--paper-2:#ece8dc;
--card:#ffffff; /* el fondo de las tarjetas (en oscuro, piedra de noche) */
--r: 12px; /* radio de las tarjetas */
}
/* ---- temas: papel (todas las paginas) y bandas de color ---- */
.t-paper{
--bg:var(--paper); --bg2:var(--paper-2); --ink:#1b2430;
--dim:#5e6b66; --faint:rgba(27,36,48,.46);
--rule:rgba(27,36,48,.14);
--scrim:rgba(246,243,234,.94); --scrim0:rgba(246,243,234,0);
--fill:rgba(30,46,69,.06);
--acc:var(--ember); --acc-soft:var(--wheat); --acc-ink:var(--field); --on-acc:#ffffff;
}
.t-dark,.band-dark{
--bg:#1b2430; --bg2:#263242; --ink:#f6f3ea;
--dim:rgba(246,243,234,.74); --faint:rgba(246,243,234,.44);
--rule:rgba(246,243,234,.18);
--scrim:rgba(30,46,69,.92); --scrim0:rgba(30,46,69,0);
--fill:rgba(246,243,234,.08);
--acc:var(--ember); --acc-soft:var(--wheat); --acc-ink:var(--wheat); --on-acc:#ffffff;
}
.band-field{
--bg:var(--deep); --bg2:#2b4360; --ink:#ffffff;
--dim:rgba(255,255,255,.84); --faint:rgba(255,255,255,.56);
--rule:rgba(255,255,255,.22); --fill:rgba(255,255,255,.1);
--acc:var(--ember); --acc-soft:var(--wheat); --acc-ink:var(--wheat); --on-acc:#ffffff;
background:var(--bg); color:var(--ink);
}
.band-stone{
--bg:#e4e9e3; --bg2:#d9e1d7; --ink:#1b2430;
--dim:#5e6b66; --faint:rgba(27,36,48,.46);
--rule:rgba(27,36,48,.16); --fill:rgba(27,36,48,.06);
--acc:var(--ember); --acc-ink:var(--field); --on-acc:#ffffff;
background:var(--bg); color:var(--ink);
}
.band-dark{background:var(--bg);color:var(--ink)}
body{
background:var(--bg); color:var(--ink);
font-family:var(--sans); font-weight:300; font-optical-sizing:auto;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* ---- tipografia base ---- */
.lbl{
font-family:var(--sans); font-weight:500;
font-size:clamp(10px,1vw,11.5px); letter-spacing:.2em;
text-transform:uppercase; color:var(--acc-ink);
}
.lbl-faint{color:var(--faint)}
.body-txt{font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.75;color:var(--dim);max-width:62ch}
.body-txt + .body-txt{margin-top:1em}
/* ============================================================
HEADER: marca, nav centrada, idiomas y el boton de reservar; en el
telefono la nav es un panel que abre el boton del menu
============================================================ */
.hdr{
position:fixed; top:0; left:0; right:0; z-index:60;
display:flex; align-items:center; justify-content:space-between; gap:16px;
height:72px; padding:0 var(--pad);
}
.hdr::before{
content:""; position:absolute; inset:0 0 auto; height:150px;
background:linear-gradient(to bottom,var(--scrim),var(--scrim0));
pointer-events:none;
}
.hdr > *{position:relative}
.brand{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex:none}
.brand img{height:clamp(30px,3.4vw,40px);width:auto;display:block;border-radius:5px}
.brand span{
font-family:var(--serif); font-weight:500; text-transform:uppercase;
font-size:14px; letter-spacing:.24em; text-indent:.24em; line-height:1;
white-space:nowrap; color:var(--ink); transition:color .5s var(--ease);
}
.nav{
position:absolute; left:50%; transform:translateX(-50%);
display:flex; gap:clamp(14px,2vw,30px); align-items:center;
}
.nav a{
font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
color:var(--dim); padding-bottom:4px; white-space:nowrap;
border-bottom:1px solid transparent;
transition:color .5s var(--ease),border-color .5s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ember)}
.nav .nav-book,.nav .nav-langs{display:none}
/* z-index 61: en el telefono el panel del menu (58) no debe tapar el boton que lo cierra */
.hdr-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex:none;z-index:61}
.langs{display:flex;align-items:center;gap:clamp(7px,.8vw,12px)}
.langs a{
font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
color:var(--faint); transition:color .5s var(--ease);
}
.langs a:hover,.langs a[aria-current=true]{color:var(--ink)}
/* .btn.btn-book: mas especifico que .btn (definido mas abajo), si no el fondo transparente lo pisa */
.btn.btn-book{padding:11px 18px;font-size:10.5px;background:var(--ember);border-color:var(--ember);color:#fff}
.btn.btn-book:hover{background:var(--ember-2);border-color:var(--ember-2);color:#fff}
/* con la pagina scrolleada (fuera de la foto o el film) el header se vuelve solido */
.hdr.is-solid{background:var(--bg);box-shadow:0 1px 0 var(--rule)}
.hdr.is-solid::before{display:none}
.menu-btn{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),opacity .35s var(--ease)}
html.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
html.menu-open .menu-btn span:nth-child(2){opacity:0}
html.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* el header sobre una foto o el film: claro sobre oscuro */
body.on-photo .hdr{
--ink:#f6f3ea; --dim:rgba(246,243,234,.72); --faint:rgba(246,243,234,.45);
}
body.on-photo .hdr::before{
background:linear-gradient(to bottom,rgba(30,46,69,.9) 0,rgba(30,46,69,.55) 45%,rgba(30,46,69,0));
}
body.on-photo .nav a,body.on-photo .langs a,body.on-photo .brand span{text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* con « Photos » el menú tiene cinco entradas (Juan, 16/10): entre 1001 y 1360 px va en el flujo del header (no
centrado encima de todo) y más compacto, para no pisar los idiomas; bajo 1180 px, solo el logo */
@media (min-width:1001px) and (max-width:1360px){
.nav{position:relative;left:auto;transform:none;margin:0 auto;gap:clamp(10px,1.3vw,18px)} /* relative: static la dejaba debajo del degradado del header */
.nav a{font-size:10.5px;letter-spacing:.13em}
}
@media (min-width:1001px) and (max-width:1180px){.brand span{display:none}}
@media (min-width:1001px) and (max-width:1220px){
.brand span{font-size:11.5px;letter-spacing:.18em;text-indent:.18em}
.nav{gap:clamp(10px,1.4vw,18px)}
.nav a{font-size:10.5px;letter-spacing:.14em}
.btn.btn-book{padding:10px 14px;font-size:10px}
}
@media (max-width:1000px){
.hdr{height:64px}
.hdr::before{height:130px}
.nav{display:none}
.langs{display:none}
.menu-btn{display:flex}
.brand img{height:30px}
.brand span{font-size:11.5px;letter-spacing:.18em;text-indent:.18em}
/* el panel del menu: toda la pantalla, las entradas grandes, los
idiomas y el boton de reservar */
html.menu-open .nav{
display:flex; position:fixed; inset:0; z-index:58; transform:none; left:0;
flex-direction:column; justify-content:center; align-items:center; gap:clamp(18px,3.5vh,30px);
background:rgba(30,46,69,.97); padding:80px var(--pad) 40px;
}
html.menu-open .nav a{font-family:var(--serif);font-size:clamp(24px,4.5vh,30px);letter-spacing:.1em;text-transform:none;font-weight:400;color:#fff;text-shadow:none}
html.menu-open .nav a[aria-current=page]{border-bottom-color:var(--ember)}
html.menu-open .nav .nav-book{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:var(--ember);padding:14px 26px;border-radius:6px;border:0;margin-top:10px}
html.menu-open .nav .nav-langs{display:flex;gap:18px;margin-top:20px}
html.menu-open .nav .nav-langs a{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
html.menu-open .nav .nav-langs a[aria-current=true]{color:#fff;border-bottom-color:var(--ember)}
html.menu-open .hdr{--ink:#fff;--dim:rgba(255,255,255,.7)}
html.menu-open .hdr::before{background:none}
html.menu-open body{overflow:hidden}
}
@media (max-width:420px){
.btn.btn-book{padding:9px 12px;font-size:9.5px;letter-spacing:.1em}
}
/* el nombre es largo (23 letras): en el telefono queda solo el monograma, el nombre lo dice el hero */
@media (max-width:640px){.brand span{display:none}.brand img{height:34px}}
/* ============================================================
SCROLLYTELLING
============================================================ */
.scrolly{position:relative}
.scrolly-stick{
position:sticky; top:0; overflow:hidden;
height:100svh; height:100dvh;
background:#1e2e45;
}
.scrolly-canvas,.scrolly-poster{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block;
}
.scrolly-poster{z-index:1;transition:opacity .8s var(--ease)}
.scrolly-canvas{z-index:2}
.scrolly.is-live .scrolly-poster{opacity:0}
.scrolly-veil{
position:absolute; inset:auto 0 0; height:62%; z-index:3; pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.34) 34%,rgba(0,0,0,0));
}
.scrolly-load{
position:absolute; left:0; bottom:0; height:2px; z-index:8;
width:0%; background:rgba(30,46,69,.9);
transition:width .35s linear,opacity .6s var(--ease);
}
.scrolly-load.done{opacity:0}
.hero-mark{
position:absolute; inset:0; z-index:6; display:grid; place-content:center;
text-align:center; padding:0 var(--pad); will-change:opacity,transform;
}
/* un oscurecido suave detras del titulo (se va con el titulo al scrollear) */
.hero-mark::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(ellipse 62% 52% at 50% 50%,rgba(0,0,0,.40),rgba(0,0,0,.18) 55%,rgba(0,0,0,0) 75%);
}
.hero-mark .lbl{
color:rgba(246,243,234,.8); margin-bottom:clamp(14px,2vw,26px);
letter-spacing:.3em; text-indent:.3em; font-weight:400;
text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.85);
}
.hero-mark h1{font-weight:300;line-height:.9}
.hero-mark .l1,.hero-mark .l2{
display:block; font-family:var(--serif); font-weight:300;
text-transform:uppercase; color:#f6f3ea;
/* una sombra pegada al trazo, otra media y el halo ancho: legible sobre la fachada clara y el cielo */
text-shadow:0 1px 2px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.6),0 6px 34px rgba(0,0,0,.8);
}
.hero-mark .l1{font-size:clamp(20px,4.4vw,70px);letter-spacing:.16em;text-indent:.16em}
.hero-mark .l1-room{font-size:clamp(19px,3.8vw,60px)}
.hero-mark .l2{
font-size:clamp(13px,2.5vw,36px); letter-spacing:.26em; text-indent:.26em;
margin-top:clamp(6px,1.1vw,16px);
}
.hero-mark .hero-tag{
font-family:var(--serif); font-style:italic; font-weight:300;
font-size:clamp(16px,2.1vw,30px); line-height:1.25; color:rgba(246,243,234,.92);
letter-spacing:.02em; margin-top:clamp(16px,2.4vw,34px);
text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 14px rgba(0,0,0,.85);
}
.caps{position:absolute;inset:auto 0 0;z-index:7}
.cap{
position:absolute; left:var(--pad); bottom:clamp(46px,7vh,88px);
right:var(--pad); max-width:min(76%,720px);
opacity:0; will-change:opacity;
}
.cap h2,.cap .cap-h{
font-family:var(--serif); font-weight:300; color:#f6f3ea;
font-size:clamp(28px,4.4vw,56px); line-height:1.02;
text-shadow:0 1px 2px rgba(0,0,0,.65),0 3px 12px rgba(0,0,0,.7),0 6px 30px rgba(0,0,0,.85);
}
.cap p{
margin-top:clamp(10px,1.3vw,18px);
font-size:clamp(10px,1.05vw,12px); letter-spacing:.22em; text-transform:uppercase;
color:rgba(246,243,234,.86); text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 14px rgba(0,0,0,.85);
}
.cap .btn{margin-top:clamp(20px,2.6vw,34px)}
.scrolly-count{
position:absolute; right:var(--pad); top:clamp(92px,12vh,124px); z-index:7;
font-size:11px; letter-spacing:.28em; color:rgba(246,243,234,.8);
text-shadow:0 2px 14px rgba(0,0,0,.85); font-variant-numeric:tabular-nums;
}
.scrolly-bar{
position:absolute; right:calc(var(--pad) - 1px); z-index:7;
top:clamp(150px,22vh,210px); bottom:clamp(110px,16vh,170px); width:1px;
background:rgba(246,243,234,.2);
}
.scrolly-bar i{position:absolute;inset:0 0 auto;display:block;width:1px;height:0%;background:var(--ember)}
/* el aviso para bajar y el botón « Voir les photos » (Juan, 16/10: Véronique no veía que había que bajar; antes
decía "Scroll" en 10 px). El aviso se va al empezar a bajar; el botón queda hasta la última banda. */
.scrolly-hint{
position:absolute; left:16px; right:16px; bottom:clamp(92px,13.5vh,128px); z-index:8;
display:flex; flex-direction:column; align-items:center; gap:6px; margin:0;
color:#fff; text-align:center; pointer-events:none;
transition:opacity .6s var(--ease);
}
.scrolly-hint .hint-txt{
font-size:clamp(12.5px,1.05vw,15px); letter-spacing:.12em; text-transform:uppercase; font-weight:500; line-height:1.35;
padding:11px 20px; border-radius:999px; background:rgba(20,34,26,.62); border:1px solid rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.scrolly-hint .hint-arrow svg{display:block;width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));animation:hint-bota 1.5s ease-in-out infinite}
@keyframes hint-bota{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(9px);opacity:1}}
.scrolly-hint.gone{opacity:0}
/* arriba a la izquierda desde el principio (Juan, 16/10: abajo tapaba los textos de cada toma) */
.scrolly-skip{
position:absolute; left:var(--pad); top:90px; z-index:8;
display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px;
background:#f6f3ea; color:#1e2e45; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
text-decoration:none; white-space:nowrap; box-shadow:0 12px 30px rgba(0,0,0,.3);
transition:opacity .45s var(--ease),visibility .45s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.scrolly-skip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.scrolly-skip:hover{background:#fff;color:#1e2e45}
.scrolly-skip.gone{opacity:0;visibility:hidden}
/* La villa: el contador de tomas baja lo que mide el sub-header fijo */
.scrolly.has-subnav .scrolly-count{top:calc(clamp(92px,12vh,124px) + 50px)}
@media (max-width:1000px){.scrolly.has-subnav .scrolly-count{top:calc(clamp(92px,12vh,124px) + 46px)}}
.scrolly.has-subnav .scrolly-skip{top:138px}
@media (max-width:1000px){.scrolly-skip{top:80px;padding:10px 16px;font-size:10.5px}.scrolly.has-subnav .scrolly-skip{top:124px}}
@media (max-width:640px){.scrolly-hint .hint-txt{letter-spacing:.08em;padding:10px 16px}}
@media (prefers-reduced-motion:reduce){.scrolly-hint .hint-arrow svg{animation:none}}
.scrolly.no-frames .scrolly-canvas,.scrolly.no-frames .scrolly-load{display:none}
.scrolly.is-static{height:auto !important}
.scrolly.is-static .scrolly-stick{position:relative;height:auto}
.scrolly.is-static .scrolly-canvas,.scrolly.is-static .scrolly-bar,.scrolly.is-static .scrolly-hint,.scrolly.is-static .scrolly-skip,
.scrolly.is-static .scrolly-count,.scrolly.is-static .scrolly-load{display:none}
.scrolly.is-static .scrolly-poster{position:relative;height:auto;opacity:1}
.scrolly.is-static .caps{position:static;padding:clamp(40px,7vw,84px) var(--pad);background:var(--deep)}
.scrolly.is-static .cap{position:static;opacity:1;max-width:none;margin-bottom:38px}
.scrolly.is-static .cap:last-child{margin-bottom:0}
.scrolly.is-static .scrolly-veil{height:40%}
/* ============================================================
BOTONES: el primario lleno de coral, el secundario en linea
============================================================ */
.btn{
display:inline-block; border:1px solid var(--acc-ink);
padding:13px 22px; font-size:11px; letter-spacing:.14em; font-weight:500;
text-transform:uppercase; color:var(--acc-ink); background:transparent;
border-radius:6px; line-height:1.2;
transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.btn:hover{background:var(--acc-ink);color:var(--on-acc,#fff)}
.btn.is-off{opacity:.38;pointer-events:none}
.btn-primary{background:var(--ember);border-color:var(--ember);color:#fff}
.btn-primary:hover{background:var(--ember-2);border-color:var(--ember-2);color:#fff}
.btn-light{color:#f6f3ea;border-color:rgba(246,243,234,.72)}
.btn-light:hover{background:#f6f3ea;color:var(--deep);border-color:#f6f3ea}
.btn svg{width:15px;height:15px;vertical-align:-3px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:1.8}
.btn-wa{display:inline-flex;align-items:center;justify-content:center}
.btn-wa svg{width:16px;height:16px;fill:currentColor;stroke:none;vertical-align:0;margin-top:-2px;margin-bottom:-2px}
.band-field .btn:not(.btn-primary),.band-dark .btn:not(.btn-primary){color:#fff;border-color:rgba(255,255,255,.7)}
.band-field .btn-primary,.band-dark .btn-primary,.scrolly .btn-primary,.cta .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--deep)}
.band-field .btn-primary:hover,.band-dark .btn-primary:hover,.scrolly .btn-primary:hover,.cta .btn-primary:hover{background:var(--wheat);border-color:var(--wheat);color:var(--deep)}
.band-field .btn:not(.btn-primary):hover,.band-dark .btn:not(.btn-primary):hover{background:var(--card);color:var(--field)}
/* ============================================================
SECCIONES: cortas, con bandas
============================================================ */
.sec{padding:clamp(40px,6vw,84px) var(--pad)}
.sec-flush{padding-left:0;padding-right:0}
.sec-alt{background:var(--bg2)}
.sec-head{margin-bottom:clamp(18px,2.6vw,36px)}
.sec-head.pad{padding:0 var(--pad)}
.sec-head .lbl{margin-bottom:clamp(8px,1.2vw,14px)}
.sec-head h2,.split h2,.strip h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.08;letter-spacing:-.01em}
.sec-head .body-txt{margin-top:10px}
.sec-btn{margin-top:clamp(20px,2.8vw,36px)}
.sec-tight-b{padding-bottom:clamp(14px,2vw,28px)}
.sec-tight-t{padding-top:clamp(14px,2vw,28px)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.cols-2 .body-txt{max-width:none}
@media (max-width:820px){.cols-2{grid-template-columns:1fr}}
/* foto + texto lado a lado (bienvenida, Chiri Bar, detalles del hotel) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4.5vw,72px);align-items:start}
.split-photo{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split-photo figure{margin:0}
.split-photo figure img{width:100%;height:auto;display:block;border-radius:var(--r)}
/* una foto vertical al lado de un texto se recorta a 4:3 (Juan, 29/9: "gigantesca") */
.split-photo figure.fit img{aspect-ratio:4/3;object-fit:cover}
.split h2{margin:clamp(8px,1.2vw,14px) 0 clamp(12px,1.6vw,20px)}
@media (max-width:900px){.split,.split-photo{grid-template-columns:1fr}}
/* la banda de contacto de la home */
.strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,50px);align-items:center}
.strip-btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:820px){.strip{grid-template-columns:1fr}}
/* ============================================================
LAS CIFRAS (bienvenida) y LOS ICONOS (lo que incluye)
============================================================ */
.facts-strip{
display:grid; grid-template-columns:repeat(4,1fr);
margin-top:clamp(24px,3.4vw,44px); background:var(--card);
border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
}
.facts-strip div{padding:clamp(16px,2vw,26px) 12px;text-align:center;border-right:1px solid var(--rule)}
.facts-strip div:last-child{border-right:0}
.facts-strip b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,42px);line-height:1;color:var(--field)}
.facts-strip span{display:block;margin-top:8px;font-size:clamp(9.5px,.95vw,11px);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
@media (max-width:640px){.facts-strip{grid-template-columns:repeat(2,1fr)}.facts-strip div:nth-child(2n){border-right:0}.facts-strip div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
padding:clamp(14px,1.8vw,22px) 10px; border:1px solid var(--rule); border-radius:10px;
background:rgba(255,255,255,.07);
transition:background .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);
}
.tile:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.tile i{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-content:center;color:var(--wheat)}
.tile svg{width:24px;height:24px}
.tile span{font-size:12px;letter-spacing:.03em;line-height:1.35;color:var(--ink);font-weight:400}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}.tile{padding:12px 8px}.tile i{width:40px;height:40px}.tile svg{width:20px;height:20px}.tile span{font-size:11px}}
/* las casillas con foto de fondo (La villetta): la foto velada, el icono y el texto encima; al pasar, la foto
se acerca y se aclara (Juan, 8/10 de noche) */
.tile-ph{position:relative;overflow:hidden;justify-content:center;min-height:clamp(130px,11vw,160px);background:var(--deep);border-color:rgba(255,255,255,.2)}
.tile-ph i,.tile-ph span{flex:none} /* el circulo del icono no se achata aunque el texto ocupe dos lineas (Juan, 9/10) */
.tile-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.58;transition:transform 1.2s var(--ease),opacity .5s var(--ease)}
.tile-ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(30,46,69,.18),rgba(30,46,69,.74));transition:opacity .5s var(--ease)}
.tile-ph i,.tile-ph span{position:relative;z-index:2}
.tile-ph i{background:rgba(30,46,69,.5);border:1px solid rgba(255,255,255,.4);color:#fff;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.tile-ph span{color:#fff;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.65)}
@media (hover:hover){
.tile-ph:hover,.tile-ph:focus-visible{background:var(--deep);border-color:rgba(255,255,255,.55);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.tile-ph:hover img,.tile-ph:focus-visible img{transform:scale(1.08);opacity:.9}
.tile-ph:hover::before,.tile-ph:focus-visible::before{opacity:.75}
.tile-ph:hover i,.tile-ph:focus-visible i{background:var(--paper);border-color:var(--paper);color:var(--deep);transform:scale(1.06)}
}
/* la franja de contacto con foto de fondo, para no pegarse al footer del mismo color */
.cta-contact{position:relative;overflow:hidden}
.cta-contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:0}
.cta-contact::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(30,46,69,.68)}
.cta-contact>.strip{position:relative;z-index:2;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(18px,2.6vw,30px);padding-block:clamp(10px,2vw,28px)} /* texto y boton centrados (Juan, 9/10) */
.cta-contact .body-txt{margin-inline:auto}
.cta-contact .strip-btns{justify-content:center}
/* ============================================================
CARRUSELES
============================================================ */
.gal{position:relative}
.rail{
position:relative;
display:flex; gap:var(--pad); overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
cursor:grab;
}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.rail img{-webkit-user-drag:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{scroll-snap-align:center;margin:0}
.rail-strip{padding-inline:var(--pad);align-items:flex-end}
.rail-strip figure{flex:0 0 auto}
.rail-strip img{height:min(50svh,460px);width:auto;object-fit:contain;border-radius:8px;box-shadow:0 14px 40px rgba(27,36,48,.18)}
.gal-ctl{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2.4vw,30px);padding-inline:var(--pad)}
.gal-ctl.wide-ctl{padding-inline:calc((100% - var(--slide-w))/2)}
.arw{
width:46px; height:46px; border:1px solid var(--rule); color:var(--ink); border-radius:50%;
display:grid; place-content:center; background:var(--card);
transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.band-field .arw{background:transparent}
.arw:hover:not(:disabled){background:var(--field);color:#fff;border-color:var(--field)}
.arw:disabled{opacity:.28;cursor:default}
.arw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.gal-count{margin-left:auto;font-size:11px;letter-spacing:.24em;color:var(--faint);font-variant-numeric:tabular-nums}
/* ============================================================
CIFRAS DE LAS HABITACIONES
============================================================ */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--card)}
.facts-4{grid-template-columns:repeat(2,1fr)}
.facts div{padding:clamp(18px,2.2vw,30px) clamp(12px,1.6vw,22px);border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.facts-4 div:nth-child(2n){border-right:0}
.facts-4 div:nth-last-child(-n+2){border-bottom:0}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1;color:var(--field)}
.facts span{display:block;margin-top:8px;font-size:clamp(9.5px,.95vw,11px);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
/* ============================================================
CTA A SANGRE (y el buscador sobre la foto)
============================================================ */
.cta{position:relative;min-height:58svh;display:grid;align-content:center;justify-items:center;
text-align:center;padding:clamp(56px,8vw,110px) var(--pad);overflow:hidden}
.cta > *:not(img){max-width:100%}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(30,46,69,.6)}
.cta > *{position:relative;z-index:2}
.cta h2{font-family:var(--serif);font-weight:300;color:#f6f3ea;font-size:clamp(30px,4.8vw,64px);line-height:1.04;text-shadow:0 3px 28px rgba(0,0,0,.6)}
.cta .lbl{color:var(--wheat);margin-top:clamp(14px,2vw,24px);letter-spacing:.26em;text-indent:.26em}
.cta .btn{margin-top:clamp(26px,3.4vw,44px)}
.cta-search{min-height:auto}
.cta-search::after{background:rgba(30,46,69,.55)}
.cta-search .lbl{margin:0 0 12px}
.cta-search h2{font-size:clamp(28px,4.2vw,56px)}
.cta .cta-panel{width:100%;max-width:1100px;text-align:left;margin:clamp(22px,3vw,36px) auto 0}
.cta-search .form-note{color:rgba(255,255,255,.82);text-align:center;margin-top:12px}
/* el buscador de fechas y huespedes */
.search{
display:grid; grid-template-columns:1.1fr 1.1fr .7fr .7fr auto; gap:10px; align-items:end;
background:var(--card); padding:14px; border-radius:var(--r); box-shadow:0 16px 50px rgba(0,0,0,.25);
color:var(--ink);
}
.search label{display:block;min-width:0}
.search .lbl{display:block;margin-bottom:6px;color:var(--field);font-size:10px}
.search input{
width:100%; border:1px solid rgba(27,36,48,.18); border-radius:6px; padding:12px 12px;
font:inherit; font-size:14px; color:var(--ink); background:var(--card);
}
.search input:focus{outline:none;border-color:var(--field)}
.search .btn{padding:14px 18px;white-space:nowrap}
@media (max-width:820px){
.search{grid-template-columns:1fr 1fr}
.search .btn{grid-column:1 / -1;text-align:center}
}
/* ============================================================
FOTOS SUELTAS, PORTADAS
============================================================ */
.wide{margin:0}
.wide img{width:100%;height:min(64svh,620px);object-fit:cover}
.phero{
position:relative; overflow:hidden;
min-height:clamp(320px,56svh,560px);
display:grid; align-items:end; background:#1e2e45;
}
.phero-sm{min-height:clamp(280px,44svh,440px)}
.phero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phero-veil{
position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to bottom,rgba(30,46,69,.62) 0,rgba(30,46,69,.14) 30%,rgba(30,46,69,.1) 48%,rgba(30,46,69,.82) 100%);
}
.phero-mark{position:relative; padding:0 var(--pad) clamp(30px,5vh,56px)}
.phero-mark .lbl{color:var(--wheat); margin-bottom:clamp(10px,1.4vw,16px)}
.phero-mark h1{font-family:var(--serif);font-weight:300;color:#f6f3ea;font-size:clamp(32px,5.8vw,76px);line-height:1.02;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.lead{max-width:74ch}
.lead .body-txt{font-size:clamp(15px,1.4vw,18px);max-width:none}
.lead-full{max-width:none}
/* ============================================================
LISTAS CON TILDE (ficha de la habitacion)
============================================================ */
.offer{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,64px)}
.offer li{display:flex;align-items:center;gap:12px;padding:clamp(10px,1.2vw,14px) 0;border-bottom:1px solid var(--rule);font-size:clamp(14px,1.15vw,16px);line-height:1.4;color:var(--ink)}
.offer svg{width:22px;height:22px;flex:none;color:var(--acc-ink)}
@media (max-width:820px){.offer{grid-template-columns:1fr}}
/* ============================================================
DATOS (dl), FORMULARIO, MAPA
============================================================ */
.dl{border-top:1px solid var(--rule)}
.dl > div{display:grid;grid-template-columns:minmax(140px,.4fr) 1fr;gap:clamp(14px,3vw,40px);padding:clamp(14px,2vw,24px) 0;border-bottom:1px solid var(--rule)}
.dl dt{font-size:clamp(10px,1vw,11.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink);padding-top:.35em;font-weight:500}
.dl dd{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.75;color:var(--ink)}
.dl dd a{color:var(--field);border-bottom:1px solid var(--rule)}
.dl-vars{margin-bottom:clamp(22px,3vw,40px)}
.dl-con dd .btn{margin-top:4px}
@media (max-width:620px){.dl > div{grid-template-columns:1fr;gap:8px}}
.tbd-inline{color:var(--faint);font-style:italic}
.form{display:grid;gap:clamp(14px,1.8vw,22px)}
.form label{display:block}
.form .lbl{display:block;margin-bottom:7px}
.form input,.form textarea,.form select{
width:100%; background:var(--card); color:var(--ink);
border:1px solid var(--rule); border-radius:6px;
padding:11px 12px; font-family:var(--sans); font-weight:300; font-size:14.5px;
transition:border-color .4s var(--ease);
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--field)}
.form ::placeholder{color:var(--faint);opacity:1}
.form input[type=number]{appearance:textfield;-moz-appearance:textfield}
.form input[type=number]::-webkit-outer-spin-button,.form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form textarea{resize:vertical;min-height:100px}
.form select{appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,22px)}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.form-total{padding-top:4px}
.form-total p{font-size:14.5px;line-height:1.6;font-variant-numeric:tabular-nums;color:var(--ink)}
.form-note{font-size:11.5px;letter-spacing:.06em;color:var(--faint);line-height:1.7}
.form-note a{color:var(--field);border-bottom:1px solid var(--rule)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--dim);line-height:1.5}
.check input{width:auto;margin-top:3px;accent-color:var(--field)}
.con-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:900px){.con-grid{grid-template-columns:1fr}}
.form-panel{border:1px solid var(--rule);background:var(--card);border-radius:var(--r);padding:clamp(20px,3vw,40px)}
.con-aside{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(20px,3vw,40px)}
.con-aside .dl{border-top:0}
.con-logo{margin-top:clamp(20px,2.8vw,36px)}
.con-logo img{width:clamp(64px,6vw,84px);height:auto;border-radius:8px}
.map{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg2)}
.map > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.4}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:clamp(12px,2vw,20px);text-align:center;padding:var(--pad)}
.map-load p{font-size:clamp(10px,1.05vw,12px);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);max-width:44ch;line-height:1.8}
.map.is-on .map-load,.map.is-on > img{display:none}
@media (max-width:640px){ .map{aspect-ratio:4/5} }
/* ---- les vidéos de Véronique : miniature locale + bouton lecture ; le lecteur YouTube (nocookie) n'arrive qu'au clic ---- */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(12px,1.6vw,22px)}
.vid{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:var(--deep);color:#fff;text-decoration:none;isolation:isolate}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.92;transition:transform 1.2s var(--ease),opacity .5s var(--ease)}
.vid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(30,46,69,0) 40%,rgba(30,46,69,.8))}
.vid-play{position:absolute;left:50%;top:50%;z-index:2;width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);transform:translate(-50%,-50%);border-radius:50%;
background:rgba(30,46,69,.55);border:1px solid rgba(255,255,255,.6);color:#fff;display:grid;place-content:center;backdrop-filter:blur(4px);
transition:background .4s var(--ease),transform .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.vid-play svg{width:clamp(24px,2.6vw,32px);height:clamp(24px,2.6vw,32px);fill:currentColor;stroke:none;margin-left:3px} /* en px : en % dentro de la grilla centrada el svg se achicaba a 5 px */
.vid-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(12px,1.6vw,20px);display:grid;gap:3px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.vid-cap b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.6vw,24px);line-height:1.15}
.vid-cap span{font-size:12.5px;letter-spacing:.03em;line-height:1.35;opacity:.92}
.vid-feat .vid-cap b{font-size:clamp(20px,2vw,30px)}
/* en la grilla de La villa las miniaturas son bajas: el boton va arriba a la izquierda, lejos del titulo (Juan, 15/10) */
.videos .vid-play{left:clamp(12px,1.6vw,18px);top:clamp(12px,1.6vw,18px);width:46px;height:46px;transform:none}
.videos .vid-play svg{width:20px;height:20px;margin-left:2px}
.videos .vid::before{background:linear-gradient(180deg,rgba(30,46,69,.18),rgba(30,46,69,0) 30%,rgba(30,46,69,0) 42%,rgba(30,46,69,.85))}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;display:block;background:#000}
.vid.is-on img,.vid.is-on::before,.vid.is-on .vid-play,.vid.is-on .vid-cap{display:none}
@media (hover:hover){
.vid:hover img,.vid:focus-visible img{transform:scale(1.06)}
.vid:hover .vid-play,.vid:focus-visible .vid-play{background:var(--paper);border-color:var(--paper);color:var(--deep);transform:translate(-50%,-50%) scale(1.08)}
.videos .vid:hover .vid-play,.videos .vid:focus-visible .vid-play{transform:scale(1.08)}
}
.split-video{align-items:center;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr)}
@media (max-width:900px){.split-video{grid-template-columns:1fr}}
/* ============================================================
FOOTER
============================================================ */
.ftr{
--ink:#f6f3ea; --dim:rgba(246,243,234,.72); --faint:rgba(246,243,234,.42); --rule:rgba(246,243,234,.18);
background:var(--deep); color:var(--ink);
padding:clamp(44px,6vw,80px) var(--pad) clamp(28px,3vw,44px);
}
.ftr .lbl{margin-bottom:clamp(14px,1.8vw,22px);color:var(--wheat)}
.ftr-mark{font-family:var(--serif);font-weight:300;text-transform:uppercase;font-size:clamp(18px,4.2vw,64px);line-height:.9;letter-spacing:.16em;text-indent:.16em;color:var(--ink)}
.ftr-line{
display:flex; flex-wrap:wrap; gap:clamp(14px,2.6vw,40px);
margin-top:clamp(28px,4vw,56px); padding-top:clamp(18px,2.4vw,28px); padding-right:76px;
border-top:1px solid var(--rule);
font-size:clamp(10px,1vw,11.5px); letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.ftr-line a:hover{color:var(--ink)}
.ftr-line .sep{margin-left:auto;color:var(--faint)}
@media (max-width:700px){.ftr-line{padding-right:0}.ftr{padding-bottom:140px}.ftr-line .sep{margin-left:0;width:100%}}
/* ============================================================
PANTALLA DE CARGA
============================================================ */
html.has-splash{overflow:hidden}
html.has-splash body{overflow:hidden}
.splash{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;background:#1e2e45;touch-action:none;overscroll-behavior:contain;transition:transform 1.05s var(--ease)}
.splash img{width:clamp(160px,24vw,260px);height:auto;border-radius:8px;animation:splash-late 2.4s var(--ease) infinite alternate}
.splash i{display:block;width:clamp(160px,24vw,260px);height:1px;margin-top:clamp(18px,3vh,28px);background:rgba(246,243,234,.16)}
.splash i::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--ember);transition:width .3s linear}
@keyframes splash-late{from{opacity:.82;transform:scale(.984)}to{opacity:1;transform:scale(1)}}
html.splash-open .splash{transform:translateY(-101%)}
/* ============================================================
REVEALS, ACCESIBILIDAD
============================================================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--field);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.rv{opacity:1 !important;transform:none !important}
.scrolly.is-static .cap{opacity:1 !important;visibility:visible !important}
.scrolly.is-static .hero-mark{opacity:1 !important;visibility:visible !important;transform:none !important}
html{scroll-behavior:auto}
}
/* ============================================================
CALENDARIO DE DISPONIBILIDAD (pagina de cada habitacion)
============================================================ */
.cal-note{border:1px solid var(--rule);padding:14px 18px;margin-bottom:24px;max-width:70ch;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--dim)}
.cal-nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px)}
.cal-nav .arw{flex:0 0 46px;align-self:center}
.cal-months{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr;flex:1 1 auto;min-width:0}
@media (min-width:760px){ .cal-months{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1220px){ .cal-months{grid-template-columns:repeat(3,1fr)} }
.cal-block{min-width:0} /* sin recuadro blanco (pedido de Juan, 17/9) */
.cal-month{font-family:var(--serif);font-weight:400;line-height:1;font-size:clamp(20px,2vw,26px);margin-bottom:12px;color:var(--field)}
.cal-month::first-letter{text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cal-dow{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 4px;text-align:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cal-day{
border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
min-height:clamp(46px,4.2vw,58px); padding:clamp(4px,.5vw,7px); overflow:hidden;
display:flex; flex-direction:column; justify-content:space-between;
background:transparent; color:var(--ink); text-align:left;
transition:background .3s var(--ease),color .3s var(--ease);
}
.cal-day b{font-weight:400;font-size:clamp(12px,1.1vw,14px);line-height:1;font-variant-numeric:tabular-nums}
.cal-day span{font-size:clamp(8px,.68vw,9.5px);color:var(--field);font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;font-weight:500}
.cal-day.is-free{cursor:pointer}
.cal-day.is-free:not(.is-sel):not(.is-range):hover{background:var(--fill)}
.cal-day.is-booked{background:rgba(27,36,48,.06);color:var(--faint)}
.cal-day.is-booked span{color:var(--faint);opacity:.7}
.cal-day.is-booked b{text-decoration:line-through;text-decoration-thickness:1px}
.cal-day.is-closed{color:var(--faint)}
.cal-day.is-past{color:var(--faint);opacity:.4}
.cal-day.is-sel,.cal-day.is-range{background:var(--ember);color:#fff}
.cal-day.is-sel span,.cal-day.is-range span{color:#fff;opacity:.85}
.cal-day:disabled{cursor:default}
.cal-day.is-short{opacity:.32;cursor:not-allowed}
.cal-day.is-short:hover{background:transparent}
.cal-legend{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,28px);margin-top:clamp(16px,2.2vw,26px)}
.cal-legend span{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cal-legend i{width:14px;height:14px;border:1px solid var(--rule);display:block;flex:0 0 auto;border-radius:3px;background:var(--card)}
.cal-legend i.k-booked{background:rgba(27,36,48,.08)}
.cal-legend i.k-closed{background:transparent;opacity:.35}
.cal-legend i.k-sel{background:var(--ember);border-color:var(--ember)}
.cal-disc{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,24px);margin-top:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.cal-sel{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(12px,2vw,24px);margin-top:clamp(18px,2.6vw,32px);padding-top:clamp(14px,2vw,24px);border-top:1px solid var(--rule)}
.cal-sel p{font-size:clamp(10px,1vw,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-right:auto}
.cal-sel p b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cal-sel .btn{white-space:nowrap}
@media (min-width:701px){.cal-sel{padding-right:76px}}
.cal-engine-note{margin-top:10px}
.cal-rooms{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(16px,2.2vw,26px)}
.cal-rooms .lbl{width:100%;margin-bottom:2px}
.cal-rooms button{border:1px solid var(--rule);background:var(--card);border-radius:20px;padding:9px 14px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.cal-rooms button:hover{color:var(--field);border-color:var(--field)}
.cal-rooms button.is-on{background:var(--field);color:#fff;border-color:var(--field)}
@media (max-width:520px){.cal-day{min-height:48px;padding:5px 4px}.cal-day span{font-size:8px}}
/* ============================================================
MOSAICO DE FOTOS CON SCROLL LATERAL
============================================================ */
.mosaic-wrap{position:relative}
.mosaic{
--mg:clamp(4px,.6vw,10px);
--u:calc((min(56svh,540px) - 7*var(--mg))/8);
display:grid; grid-auto-flow:column dense; gap:var(--mg);
grid-template-rows:repeat(8,var(--u)); grid-auto-columns:var(--u);
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
padding:0 var(--pad); cursor:grab; scroll-behavior:auto;
}
.mosaic::-webkit-scrollbar{display:none}
.mosaic.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.mosaic a{position:relative;display:block;overflow:hidden;background:var(--bg2);grid-column:span 6;grid-row:span 4;cursor:zoom-in;border-radius:6px}
.mosaic.is-dragging a{cursor:grabbing}
.mosaic a.m-v,.mosaic a.m-s{grid-column:span 3;grid-row:span 4}
.mosaic a.m-big{grid-column:span 12;grid-row:span 8}
.mosaic a.m-vbig{grid-column:span 6;grid-row:span 8}
.mosaic::after{content:"";grid-row:span 8;width:1px}
@media (max-width:760px){.mosaic{--u:calc((min(50svh,400px) - 7*var(--mg))/8)}}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.mosaic a:hover img{transform:scale(1.035)}
.mosaic a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.mosaic-note{margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.mosaic-ctl{padding-inline:var(--pad);margin-top:clamp(14px,2vw,24px)}
.rail figure img{cursor:zoom-in}
.rail.is-dragging figure img{cursor:grabbing}
/* ============================================================
BOTONES FIJOS: WhatsApp y el asistente
============================================================ */
.wa{
position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:70;
width:54px; height:54px; border-radius:50%;
background:#25d366; color:#fff; display:grid; place-content:center;
box-shadow:0 8px 24px rgba(0,0,0,.28);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wa:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 30px rgba(0,0,0,.34)}
.wa svg{width:30px;height:30px;fill:currentColor;display:block}
html.lb-open .wa,html.has-splash .wa,html.lb-open .chat-btn,html.has-splash .chat-btn,html.menu-open .wa,html.menu-open .chat-btn{visibility:hidden}
@media (max-width:760px){.wa{width:50px;height:50px}.wa svg{width:28px;height:28px}}
/* sin numero de WhatsApp: el mismo boton abre la mail, en el marron de la marca */
.wa-mail{background:var(--field);color:#fff}
.wa-mail svg{width:26px;height:26px;fill:none}
html.dark .wa-mail{background:var(--wheat);color:#1e2e45}
@media (max-width:760px){.wa-mail svg{width:24px;height:24px}}
.chat-btn{
position:fixed; right:clamp(14px,2vw,26px); bottom:calc(clamp(14px,2vw,26px) + 66px); z-index:70;
display:flex; align-items:center; gap:8px;
background:var(--field); color:#fff; padding:12px 16px 12px 14px; border-radius:30px;
box-shadow:0 8px 24px rgba(0,0,0,.28);
font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
transition:transform .35s var(--ease),background .35s var(--ease);
}
.chat-btn:hover{transform:translateY(-2px);background:var(--field-2)}
.chat-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chat-btn[aria-expanded=true]{visibility:hidden}
@media (max-width:760px){.chat-btn{bottom:calc(clamp(14px,2vw,26px) + 62px);padding:11px 14px 11px 12px}.chat-btn span{display:none}.chat-btn{border-radius:50%;width:50px;height:50px;justify-content:center;padding:0}}
.chat{
position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:80;
width:min(390px,calc(100vw - 28px)); height:min(620px,calc(100dvh - 40px));
display:flex; flex-direction:column; background:var(--card); color:var(--ink);
border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.35); overflow:hidden;
}
.chat[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--field);color:#fff}
.chat-head img{width:52px;height:auto;border-radius:4px}
.chat-head b{display:block;font-weight:500;font-size:14px}
.chat-head span{display:block;font-size:11px;opacity:.8;margin-top:2px}
.chat-x{margin-left:auto;width:36px;height:36px;display:grid;place-content:center;color:#fff;border-radius:50%}
.chat-x:hover{background:rgba(255,255,255,.15)}
.chat-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.chat-log{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg2)}
.msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-line}
.msg-bot{align-self:flex-start;background:var(--card);border:1px solid var(--rule);border-bottom-left-radius:4px}
.msg-user{align-self:flex-end;background:var(--field);color:#fff;border-bottom-right-radius:4px}
.msg a{color:var(--field);text-decoration:underline}
.msg .btn{margin-top:10px;font-size:10px;padding:9px 14px;white-space:normal}
.msg .msg-btns{display:flex;flex-wrap:wrap;gap:6px}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;background:var(--bg2)}
.chat-quick button{border:1px solid var(--field);color:var(--field);border-radius:20px;padding:7px 12px;font-size:12px;background:var(--card);transition:background .3s var(--ease),color .3s var(--ease)}
.chat-quick button:hover{background:var(--field);color:#fff}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rule);background:var(--card)}
.chat-form input{flex:1 1 auto;min-width:0;border:1px solid var(--rule);border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink)}
.chat-form input:focus{outline:none;border-color:var(--field)}
.chat-form .btn{padding:10px 14px;flex:none}
.chat-note{font-size:10.5px;color:var(--faint);padding:0 14px 10px;background:var(--card);letter-spacing:.03em}
@media (max-width:640px){.chat{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}}
/* ============================================================
LIGHTBOX
============================================================ */
html.lb-open{overflow:hidden}
html.lb-open body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:1fr auto;background:rgba(30,46,69,.96);color:#f6f3ea;touch-action:pan-y;user-select:none;opacity:0;transition:opacity .45s var(--ease)}
.lb.is-on{opacity:1}
.lb:not(.is-on){pointer-events:none}
.lb[hidden]{display:none}
.lb-stage{position:relative;min-height:0;display:grid;place-items:center;grid-template-rows:100%;padding:clamp(56px,8vh,80px) clamp(56px,7vw,110px) 0}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(14px,2vh,22px) var(--pad) clamp(18px,3vh,30px);font-size:clamp(10px,1.05vw,12px);letter-spacing:.2em;text-transform:uppercase;color:rgba(246,243,234,.72)}
.lb-cap b{font-weight:400;color:#f6f3ea}
.lb-cap i{font-style:normal;font-variant-numeric:tabular-nums;color:rgba(246,243,234,.5)}
.lb-x,.lb-prev,.lb-next{position:absolute;z-index:2;width:48px;height:48px;border:1px solid rgba(246,243,234,.3);color:#f6f3ea;display:grid;place-content:center;border-radius:50%;transition:background .4s var(--ease),border-color .4s var(--ease)}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:rgba(246,243,234,.14);border-color:#f6f3ea}
.lb-x{top:clamp(14px,2vh,22px);right:var(--pad)}
.lb-prev{left:var(--pad);top:50%;transform:translateY(-50%)}
.lb-next{right:var(--pad);top:50%;transform:translateY(-50%)}
.lb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2}
.lb-x svg{width:14px;height:14px}
@media (max-width:760px){.lb-stage{padding:64px 10px 0}.lb-prev,.lb-next{top:auto;bottom:clamp(64px,10vh,90px);transform:none;width:44px;height:44px}.lb-cap{flex-wrap:wrap}}
/* ============================================================
OPINIONES
============================================================ */
.pad-x{padding-left:var(--pad);padding-right:var(--pad)}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.scores > a{display:block;padding:clamp(18px,2.4vw,30px) clamp(14px,2vw,26px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.scores b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,54px);line-height:.92;color:var(--field)}
.scores span{display:block;margin-top:10px;font-size:clamp(10px,1vw,11.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);line-height:1.7}
.scores small{display:block;font-size:inherit;color:var(--wood);letter-spacing:inherit}
.scores b i{font-style:normal;font-size:.4em;color:var(--faint);letter-spacing:.02em}
@media (max-width:760px){.scores{grid-template-columns:1fr}}
.rev-wrap{margin-top:clamp(20px,3vw,40px)}
.rev-rail{display:flex;align-items:stretch;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;padding:1px var(--pad);cursor:grab;scroll-behavior:auto}
.rev-rail::-webkit-scrollbar{display:none}
.rev-rail.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.rev-card{flex:0 0 min(84vw,400px);display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,28px);border:1px solid var(--rule);background:var(--card);border-radius:var(--r)}
.rev-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--field);font-weight:500}
.rev-txt{flex:1 1 auto;font-family:var(--serif);font-weight:400;font-size:clamp(15.5px,1.25vw,18px);line-height:1.45;color:var(--ink)}
.rev-card footer{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);line-height:1.8}
.rev-card footer b{font-weight:500;color:var(--dim)}
.rev-ctl{padding-inline:var(--pad)}
.quotes-note{margin-top:clamp(16px,2.2vw,28px)}
.social{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,24px);align-items:baseline}
.social a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--rule);padding-bottom:3px}
.social a:hover{color:var(--ink);border-color:var(--ink)}
/* ============================================================
TARJETAS DE LAS HABITACIONES
============================================================ */
.room-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(18px,2.6vw,36px)}
.room-cards-2{grid-template-columns:repeat(2,1fr);max-width:1180px}
.room-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:0 12px 34px rgba(27,36,48,.07)}
.room-card-img{display:block;overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--bg2)}
/* varias fotos apiladas: la .is-on se ve y las demas entran con un fundido (site.js, data-slides) */
.room-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.room-card-img img.is-on{opacity:1}
.room-card:hover .room-card-img img{transform:scale(1.035)}
/* el toque verde de cada tarjeta: el icono, la etiqueta y el filo de arriba (Juan, 28/9: "queda muy negro y gris") */
.room-card{background:color-mix(in srgb,var(--field) 5%,var(--card))}
.room-card-body{border-top:3px solid var(--field)}
.room-ico{margin:0 0 -2px}
.room-ico i{display:grid;place-content:center;width:44px;height:44px;border-radius:50%;background:var(--field);color:#fff}
.room-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;left:12px;bottom:12px;background:var(--ember);color:#fff;font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.room-card-body{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px);padding:clamp(18px,2.2vw,28px);flex:1 1 auto}
.room-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.05}
.room-card h3 a:hover{color:var(--field)}
.room-card .body-txt{flex:1 1 auto;font-size:14.5px}
.room-price{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);font-weight:500}
.room-card-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.room-cards-big{grid-template-columns:1fr;grid-auto-rows:1fr} /* las tres del mismo alto */
.room-card-big{flex-direction:row;min-height:0}
.room-card-big .room-card-img{flex:0 0 50%;aspect-ratio:auto;min-height:100%}
.room-card-big .room-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-card-big:nth-child(even){flex-direction:row-reverse}
.room-card-big .room-card-body{justify-content:center;padding:clamp(22px,2.6vw,40px);gap:clamp(8px,1vw,12px)}
.room-card-big .body-txt{flex:0 0 auto;font-size:14.5px;line-height:1.6}
.rc-p2{color:var(--dim)}
.rc-facts{display:flex;flex-wrap:wrap;gap:10px 26px;padding:10px 0 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:4px 0}
.rc-facts div{display:flex;align-items:baseline;gap:7px}
.rc-facts b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;color:var(--field)}
.rc-facts span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.rc-amen{display:flex;flex-wrap:wrap;gap:6px 8px}
.rc-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.02em;color:var(--ink);background:var(--bg2);border:1px solid var(--rule);border-radius:999px;padding:5px 11px 5px 6px}
.rc-chip i{width:22px;height:22px;border-radius:50%;background:var(--field);color:var(--wheat);display:grid;place-content:center;flex:0 0 auto}
.rc-chip svg{width:13px;height:13px}
.room-card-big h3{font-size:clamp(30px,3.4vw,50px)}
@media (max-width:900px){
.room-cards,.room-cards-2{grid-template-columns:1fr}
.room-card-big,.room-card-big:nth-child(even){flex-direction:column}
.room-card-big .room-card-img{aspect-ratio:4/3;flex:none;min-height:0}
.rc-facts b{font-size:20px}
}
/* ============================================================
PROMOS con foto, FAQ, DETALLES DEL HOTEL
============================================================ */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.promo{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.promo figure{margin:0;aspect-ratio:16/9;overflow:hidden}
.promo figure img{width:100%;height:100%;object-fit:cover}
.promo-body{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,26px);flex:1 1 auto}
.promo h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.05;color:var(--field)}
.promo ul{display:grid;gap:7px;flex:1 1 auto;align-content:start}
.promo li{font-size:14px;line-height:1.55;color:var(--dim);padding-left:16px;position:relative}
.promo li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1.5px;background:var(--ember)}
.promo .btn{align-self:flex-start;margin-top:6px}
@media (max-width:900px){.promos{grid-template-columns:1fr}}
/* las preguntas en dos columnas (Juan, 8/10 de noche: "2 filas... menos scroll"); con 12 preguntas, las dos
ultimas cierran cada columna */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);align-items:start;margin-top:clamp(14px,2vw,24px)}
.faq details{border-top:1px solid var(--rule)}
.faq details:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
@media (max-width:760px){.faq{grid-template-columns:1fr}.faq details:nth-last-child(-n+2){border-bottom:0}.faq details:last-child{border-bottom:1px solid var(--rule)}}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:clamp(14px,1.8vw,22px) 0;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.55vw,22px);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:20px;color:var(--ember);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 clamp(14px,1.8vw,22px);font-size:14.5px;line-height:1.75;color:var(--dim);max-width:62ch}
.dets .det{padding:clamp(22px,3.2vw,48px) 0;border-top:1px solid var(--rule);scroll-margin-top:140px}
.dets .det figure img{aspect-ratio:4/3;object-fit:cover}
/* el sub-header de "El hotel": fijo bajo el header, un icono por seccion,
con scroll lateral en el telefono y la seccion a la vista marcada */
.subnav{position:sticky;top:72px;z-index:50;background:var(--deep);color:#fff;box-shadow:0 8px 24px rgba(30,46,69,.18)}
.subnav-in{display:flex;gap:4px;padding:0 var(--pad);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:14px 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.72);border-bottom:2px solid transparent;white-space:nowrap;transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.subnav a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--wheat)}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.subnav a.is-on{color:#fff;border-bottom-color:var(--ember)}
@media (max-width:1000px){.subnav{top:64px}.subnav a{padding:12px 12px;font-size:10px}.dets .det,.place{scroll-margin-top:120px}}
/* La villa: el sub-header fijo DESDE EL PRINCIPIO, también sobre el film (Juan, 16/10) */
.subnav.is-fixed{position:fixed;left:0;right:0;top:72px}
@media (max-width:1000px){.subnav.is-fixed{top:64px}}
/* « Photos » del menú y el botón de los films llegan desde otra página: la galería no queda bajo el header + sub-header */
#fotos{scroll-margin-top:122px}
@media (max-width:1000px){#fotos{scroll-margin-top:110px}}
.det-ico svg{width:42px;height:42px;color:var(--wood);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.det h2{font-size:clamp(26px,3.2vw,44px)}
/* ============================================================
EL MOTOR DE RESERVAS
============================================================ */
.eng{background:var(--bg2);padding-top:clamp(14px,2vw,28px)}
.steps{display:flex;gap:8px;margin-bottom:clamp(18px,2.4vw,30px)}
.steps li{flex:1 1 0;display:flex;align-items:stretch;padding:0;border-radius:8px;background:var(--card);border:1px solid var(--rule);color:var(--faint);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;min-width:0}
.steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li button{all:unset;box-sizing:border-box;flex:1;display:flex;align-items:center;gap:10px;padding:11px 14px;min-width:0;border-radius:8px;cursor:pointer;color:inherit}
.steps li button:disabled{cursor:default}
.steps li button:focus-visible{outline:2px solid var(--field);outline-offset:2px}
.steps li.is-done:not(.is-on) button:not(:disabled):hover{background:var(--bg2)}
.steps li.is-done:not(.is-on) button:not(:disabled):hover span{text-decoration:underline;text-underline-offset:3px}
.steps li b{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-content:center;background:rgba(27,36,48,.1);font-weight:500;font-size:12px}
.steps li.is-on{color:var(--field);border-color:var(--field)}
.steps li.is-on b{background:var(--field);color:#fff}
.steps li.is-done{color:var(--wood)}
.steps li.is-done b{background:var(--wood);color:#fff}
@media (max-width:760px){.steps li span{display:none}.steps li button{justify-content:center;padding:10px}}
.search-card{box-shadow:0 10px 30px rgba(27,36,48,.08);border:1px solid var(--rule)}
.eng-search .form-note{margin-top:12px}
.eng-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(14px,1.8vw,22px)}
.eng-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.05}
.eng-sub{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--field);font-weight:500}
.eng-cmp{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,24px);margin-bottom:clamp(14px,1.8vw,22px)}
.eng-cmp[hidden]{display:none}
.eng-cmp-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--field);font-weight:600;margin-bottom:12px}
.eng-cmp-unit{font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--dim)}
.eng-cmp-unit:empty{display:none}
.eng-cmp-unit::before{content:"·";margin-right:8px;color:var(--faint)}
.eng-search .eng-cmp{margin:clamp(18px,2.4vw,28px) 0 0}
.eng-cmp-h svg{width:18px;height:18px;color:var(--wood);flex:none}
.eng-cmp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:10px}
.eng-cmp-list li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;border-radius:10px;background:var(--bg2);min-width:0}
.eng-cmp-list li.is-direct{background:var(--field);color:#fff}
.eng-cmp-site{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.eng-cmp-list li.is-direct .eng-cmp-site{color:rgba(255,255,255,.8)}
.eng-cmp-list b{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1;white-space:nowrap}
.eng-cmp-list li:not(.is-direct) b{color:var(--dim)}
.eng-cmp-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--ember);color:#fff;border-radius:999px;padding:4px 10px;font-weight:600}
.eng-cmp-pct{font-size:12px;color:var(--ember-2);font-weight:600}
.eng-cmp-note{margin-top:10px;font-size:12px;line-height:1.5;color:var(--faint)}
@media (max-width:640px){
.eng-cmp-unit{flex-basis:100%;padding-left:26px}
.eng-cmp-unit::before{display:none}
.eng-cmp-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.eng-cmp-list li.is-direct{grid-column:1 / -1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 12px}
.eng-cmp-list li.is-direct .eng-cmp-site{flex-basis:100%}
.eng-cmp-list li{padding:10px}
.eng-cmp-site{font-size:9.5px;letter-spacing:.06em}
.eng-cmp-list li:not(.is-direct) b{font-size:19px}
}
.eng-list{display:grid;gap:14px}
.eng-room{display:grid;grid-template-columns:minmax(200px,.9fr) minmax(0,1.6fr) minmax(190px,.8fr);gap:0;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.eng-room[hidden]{display:none}
.eng-room-img{display:block;position:relative;min-height:260px}
.eng-room-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eng-room-body{padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:8px;min-width:0}
.eng-room h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.05}
.eng-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--dim)}
.eng-meta svg,.eng-rate svg{width:18px;height:18px;margin-right:6px;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.5;color:var(--wood)}
.eng-rate{font-size:12.5px;color:var(--field);line-height:1.5}
.eng-status{font-size:12px;color:var(--ember);font-weight:500}
.eng-see{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--rule);align-self:flex-start;margin-top:auto;padding-bottom:2px}
.eng-see:hover{color:var(--field);border-color:var(--field)}
.eng-room-price{padding:clamp(16px,2vw,24px);border-left:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;gap:6px;background:var(--bg2)}
.eng-pn b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--field)}
.eng-pn span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.eng-total{font-size:12.5px;color:var(--dim)}
.eng-total b{color:var(--ink);font-weight:500;margin-left:6px}
.eng-room-price .btn{margin-top:8px}
.eng-room.is-off{opacity:.6}
.eng-room.is-off .eng-room-price .btn,.eng-room.is-off .eng-pn,.eng-room.is-off .eng-total{display:none}
.eng-none{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,3vw,40px);display:grid;gap:12px;justify-items:start}
.eng-none h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px)}
.eng-pn b{white-space:nowrap}
@media (max-width:900px){
.eng-room{grid-template-columns:1fr}
.eng-room-img{aspect-ratio:16/9;min-height:0}
.eng-room-price{border-left:0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;text-align:left}
.eng-room-price .eng-pn{grid-column:1;grid-row:1}
.eng-room-price .eng-total{grid-column:1;grid-row:2}
.eng-room-price .btn{grid-column:2;grid-row:1 / 3;margin:0}
.eng-pn b{font-size:30px}
.eng-head{flex-direction:column;align-items:flex-start}
}
.eng-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);gap:clamp(16px,2.4vw,30px);align-items:start}
.eng-form{background:var(--card);padding:clamp(18px,2.6vw,32px);border-radius:var(--r);border:1px solid var(--rule)}
.eng-form h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.05;margin-bottom:6px}
.eng-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.eng-summary{background:var(--field);color:#fff;padding:clamp(18px,2.6vw,30px);border-radius:var(--r);position:sticky;top:88px}
.eng-summary .lbl{color:var(--wheat);margin-bottom:8px}
.eng-summary dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:14px}
.eng-summary dt{opacity:.75}
.eng-summary dd{text-align:right;font-weight:400}
.eng-summary .eng-sum-total{border-bottom:0;align-items:baseline}
.eng-summary .eng-sum-total dd{font-family:var(--serif);font-size:30px;line-height:1}
.eng-summary .form-note{color:rgba(255,255,255,.7);margin-top:10px}
@media (max-width:820px){.eng-grid{grid-template-columns:1fr}.eng-summary{position:static;order:-1}}
.eng-done-box{text-align:center;background:var(--card);border:1px solid var(--rule);padding:clamp(28px,4vw,56px);border-radius:var(--r);max-width:780px;margin:0 auto}
.eng-done-box > svg{width:60px;height:60px;color:var(--wood);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 14px;padding:14px;border:1px solid var(--wood);border-radius:50%}
.eng-done-box h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.8vw,50px);line-height:1.05;margin-bottom:12px}
.eng-done-box .body-txt{margin:0 auto}
.eng-done-sum{display:grid;gap:8px;margin:22px auto;max-width:520px;text-align:left}
.eng-done-sum div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14px}
.eng-done-sum dt{color:var(--dim)}
.eng-done-sum dd{text-align:right;font-weight:500}
.eng-done-box .eng-btns{justify-content:center}
.eng-demo{margin-top:clamp(16px,2.2vw,28px);max-width:80ch}
/* ============================================================
EL HERO, ultima banda: las tres habitaciones salen del edificio.
site.js mueve cada tarjeta desde el punto del cuadro (data-emerge)
hasta su lugar, con el progreso de la banda; sin JS o con movimiento
reducido quedan quietas en su lugar.
============================================================ */
.cap-rooms{left:var(--pad);right:var(--pad);max-width:none;bottom:clamp(22px,4vh,48px);text-align:center}
.cap-rooms .cap-h{font-size:clamp(26px,3.8vw,50px)}
.cap-rooms > p:not(.cap-h){margin-top:8px}
.emerge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);max-width:1040px;margin:clamp(14px,2vh,22px) auto 0}
.emerge-slot{min-width:0}
.emerge-card{display:block;position:relative;background:var(--card);color:var(--ink);text-align:left;border-radius:10px;overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.4);opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.emerge-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.emerge-txt{display:block}
.emerge-card .badge{left:10px;bottom:auto;top:10px;font-size:9.5px;padding:7px 9px;z-index:1}
.emerge-name{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.6vw,23px);line-height:1.05;padding:10px 12px 0}
.emerge-sub{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--field);font-weight:500;padding:5px 12px 12px}
.emerge-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:clamp(12px,2vh,20px)}
.emerge-btns .btn{margin:0}
.scrolly.is-static .emerge-card{opacity:1 !important;transform:none !important}
@media (max-width:760px){
.cap-rooms{bottom:clamp(14px,2vh,24px)}
.cap-rooms .cap-h{font-size:clamp(24px,7vw,32px)}
.emerge{grid-template-columns:1fr;gap:8px;margin-top:10px}
.emerge-card{display:grid;grid-template-columns:96px 1fr;align-items:stretch}
.emerge-card img{aspect-ratio:auto;width:96px;height:78px;object-fit:cover;align-self:center}
.emerge-txt{align-self:center}
.emerge-card .badge{display:none}
.emerge-name{font-size:17px;padding:8px 12px 0}
.emerge-sub{padding:3px 12px 8px}
.emerge-btns .btn-light{display:none}
}
@media (max-height:640px) and (max-width:760px){
.cap-rooms > p:not(.cap-h){display:none}
.emerge-card img{display:none}
.emerge-card{grid-template-columns:1fr}
.emerge-name{padding-top:6px}
}
/* ============================================================
LA HOME: lo que incluye, con una foto en cada icono. 2 filas de 6 en
escritorio (4 columnas en tablet); en el telefono una sola fila que se
desliza con scroll-snap, sin JS. El icono y el texto van DENTRO de la
foto, abajo (icono a la izquierda, texto a su derecha); con el mouse
encima la tarjeta cambia de fondo y el icono pasa al centro con el
texto debajo (.ip-bar se va, .ip-mid aparece).
============================================================ */
.incl-photos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.ip{position:relative;display:block;aspect-ratio:4/3.1;border-radius:var(--r);overflow:hidden;background:var(--deep);
color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.14);
transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.ip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.ip::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(30,46,69,.88) 0%,rgba(30,46,69,.45) 38%,rgba(30,46,69,0) 62%);transition:opacity .4s}
.ip::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
background:linear-gradient(155deg,var(--field) 0%,#2b4360 100%);transition:opacity .45s var(--ease)} /* el verde de campo de la marca, no la teja (Juan, 28/9) */
.ip-bar,.ip-mid{position:absolute;z-index:2;display:flex;align-items:center;gap:10px}
.ip-bar{left:11px;right:11px;bottom:11px;transition:opacity .3s,transform .45s var(--ease)}
.ip-bar i,.ip-mid i{flex:0 0 auto;display:grid;place-content:center;border-radius:50%;color:var(--wheat);
background:rgba(30,46,69,.55);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(4px)}
.ip-bar i{width:38px;height:38px}
.ip-bar span,.ip-mid span{font-size:12.5px;letter-spacing:.02em;line-height:1.3;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.ip svg{width:20px;height:20px}
.ip-mid{inset:0;flex-direction:column;justify-content:center;gap:12px;text-align:center;padding:14px;
opacity:0;transform:translateY(10px) scale(.94);transition:opacity .35s,transform .5s var(--ease)}
.ip-mid i{width:54px;height:54px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);color:#fff}
.ip-mid svg{width:26px;height:26px}
.ip-mid span{font-size:14px;font-weight:500;text-shadow:none}
@media (hover:hover){
.ip:hover,.ip:focus-visible{transform:translateY(-3px);border-color:rgba(255,255,255,.5);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.ip:hover img,.ip:focus-visible img{transform:scale(1.07)}
.ip:hover::before,.ip:focus-visible::before{opacity:0}
.ip:hover::after,.ip:focus-visible::after{opacity:.94}
.ip:hover .ip-bar,.ip:focus-visible .ip-bar{opacity:0;transform:translateY(10px)}
.ip:hover .ip-mid,.ip:focus-visible .ip-mid{opacity:1;transform:none}
}
.incl-swipe{display:none}
@media (max-width:1000px){.incl-photos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
.incl-photos{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(-1*var(--pad));padding:4px var(--pad) 8px;scroll-padding-inline:var(--pad)}
.incl-photos::-webkit-scrollbar{display:none}
.ip{flex:0 0 62vw;scroll-snap-align:start;aspect-ratio:4/3}
.ip-bar span{font-size:12px}
.incl-swipe{display:block;margin:6px 0 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center}
}
/* el calendario con la tarifa de cada noche dentro del motor (paso 1) */
.eng-cal{margin-top:clamp(28px,4vw,48px);padding-top:clamp(22px,3vw,36px);border-top:1px solid var(--rule)}
.eng-cal-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;margin-bottom:clamp(14px,2vw,22px)}
.eng-cal-head .lbl{margin:0}
.eng-cal-hint{font-size:13px;line-height:1.6;color:var(--dim);max-width:64ch;margin:0}
@media (min-width:1000px){.eng-cal .cal-months{grid-template-columns:1fr 1fr}}
/* ============================================================
EL SELECTOR DE FECHAS PROPIO (Llegada / Salida): un boton por campo y
un panel fijo con dos meses (uno en el telefono) con el rango de tarifa
de las habitaciones disponibles en cada dia.
============================================================ */
.dp-btn{display:block;width:100%;text-align:left;border:1px solid rgba(27,36,48,.18);border-radius:6px;padding:12px 12px;
font:inherit;font-size:14px;color:var(--ink);background:var(--card);cursor:pointer;line-height:1.25;position:relative;padding-right:34px}
.dp-btn::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--field);border-bottom:1.5px solid var(--field);transform:translateY(-70%) rotate(45deg)}
.dp-btn:hover,.dp-btn:focus-visible{outline:none;border-color:var(--field)}
.dp{position:fixed;z-index:80;background:var(--card);color:var(--ink);border-radius:12px;border:1px solid var(--rule);
box-shadow:0 24px 60px rgba(0,0,0,.28);padding:14px 16px 12px;box-sizing:border-box}
.dp-head{display:flex;align-items:flex-start;gap:10px}
.dp-head .arw{flex:0 0 38px;width:38px;height:38px;margin-top:4px}
.dp-months{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;min-width:0}
.dp-month{min-width:0}
.dp-month h4{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1;color:var(--field);margin:8px 0 10px}
.dp-month h4::first-letter{text-transform:uppercase}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{text-align:center;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:2px 0 6px}
.dp-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:3px 0;
border:0;border-radius:6px;background:transparent;font:inherit;color:var(--ink);cursor:pointer}
.dp-day b{font-weight:500;font-size:13px;line-height:1}
.dp-day i{font-style:normal;font-size:9px;letter-spacing:.01em;line-height:1;color:var(--field);white-space:nowrap;font-variant-numeric:tabular-nums}
.dp-day:hover:not(:disabled){background:var(--bg2)}
.dp-day.is-past,.dp-day:disabled{color:var(--faint);cursor:default}
.dp-day.is-past i,.dp-day:disabled i{visibility:hidden}
.dp-day.is-short{opacity:.32;cursor:not-allowed}
.dp-day.is-off{color:var(--faint)}
.dp-day.is-off b{text-decoration:line-through}
.dp-day.is-off i{visibility:hidden}
.dp-day.is-range{background:rgba(30,46,69,.16)}
.dp-day.is-in,.dp-day.is-out{background:var(--ember);color:#fff}
.dp-day.is-in i,.dp-day.is-out i{color:#fff}
.dp-legend{margin:10px 0 0;font-size:10.5px;line-height:1.5;letter-spacing:.04em;color:var(--dim)}
.dp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.dp-sel{font-size:12px;color:var(--dim);margin:0;font-variant-numeric:tabular-nums}
.dp-foot .btn{padding:10px 16px}
@media (max-width:760px){
.dp{left:10px !important;right:10px;bottom:10px;top:auto !important;width:auto !important;max-height:84vh;overflow:auto;padding:12px}
.dp-months{grid-template-columns:1fr}
.dp-day{min-height:42px}
}
/* ============================================================
EL HOTEL: la presentacion con el carrusel de todas las fotos. Texto a la
izquierda; a la derecha la foto del centro grande y la anterior y la
siguiente asomando (scroll-snap al centro + escala), flechas, contador,
arrastre con el mouse (site.js) y avance automatico (data-autoplay).
============================================================ */
.hcar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.hcar-txt h2{margin:0 0 clamp(14px,1.6vw,22px)}
.hcar-txt .body-txt{max-width:none}
.hcar-gal{min-width:0}
.rail-peek{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:12%;
scroll-padding-inline:12%;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.rail-peek::-webkit-scrollbar{display:none}
.rail-peek figure{flex:0 0 100%;scroll-snap-align:center;margin:0;transform:scale(.9);opacity:.5;
transition:transform .55s var(--ease),opacity .55s var(--ease)}
.rail-peek figure.is-center{transform:none;opacity:1}
.rail-peek img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;box-shadow:0 18px 44px rgba(27,36,48,.2)}
.hcar-gal .gal-ctl{padding-inline:11%;margin-top:14px}
@media (max-width:900px){
.hcar{grid-template-columns:1fr;gap:22px}
.rail-peek{padding-inline:10%;scroll-padding-inline:10%;gap:8px}
.rail-peek figure{flex:0 0 100%}
.hcar-gal .gal-ctl{padding-inline:10%}
}
/* El hotel: cada detalle con el carrusel de su categoria (misma animacion que la presentacion) */
.det .hcar-gal{min-width:0}
.det .rail-peek{padding-inline:10%;scroll-padding-inline:10%}
.det .hcar-gal .gal-ctl{padding-inline:10%;margin-top:12px}
.det .rail-peek figure{transform:scale(.92)}
.det .rail-peek figure.is-center{transform:none}
/* el pie: navegación (enlaces internos a todas las páginas y habitaciones) */
.ftr-nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 22px;margin:14px 0 22px;max-width:900px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.ftr-nav a{color:inherit;text-decoration:none;opacity:.72}
.ftr-nav a:hover,.ftr-nav a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* motor: la fecha sugerida, el aviso de la categoria pedida y los botones sin lugar */
.eng-sug1{margin-top:12px;padding:12px 16px;border-radius:10px;background:var(--card);border:1px solid var(--wood);color:var(--field);font-size:13.5px;line-height:1.5}
.eng-sug{font-size:14px;color:var(--field);font-weight:500}
.eng-want{margin:0 0 clamp(12px,1.6vw,18px);padding:12px 16px;border-radius:10px;background:var(--card);border-left:3px solid var(--ember);font-size:13.5px;line-height:1.5;color:var(--dim)}
.eng-none .eng-btns{display:flex;flex-wrap:wrap;gap:10px}
/* ============================================================
LAS SIETE VILLAS: lo propio de la casa
============================================================ */
/* el boton del tema (luna en claro, sol en oscuro) */
.theme-btn{width:40px;height:40px;display:grid;place-content:center;border-radius:50%;color:var(--dim);transition:background .35s var(--ease),color .35s var(--ease)}
.theme-btn:hover{background:var(--fill);color:var(--ink)}
.theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-btn svg:last-child{display:none}
html.dark .theme-btn svg:first-child{display:none}
html.dark .theme-btn svg:last-child{display:block}
@media (max-width:1000px){.theme-btn{width:36px;height:36px}}
/* la casa en tres ideas */
.ideas-lbl{margin:clamp(22px,3vw,36px) 0 clamp(12px,1.6vw,18px)}
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.idea figure{margin:0 0 clamp(12px,1.4vw,18px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--r)}
.idea figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.idea:hover figure img{transform:scale(1.035)}
.idea h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.05;margin-bottom:8px}
.idea .body-txt{font-size:14.5px;max-width:none}
@media (max-width:820px){.ideas{grid-template-columns:1fr}.idea figure{aspect-ratio:16/10}}
/* el entorno: lugares con la distancia grande */
/* el carrusel de los lugares de la home: tres tarjetas a la vista, cada una un enlace a Marsala e dintorni */
.places-gal{position:relative}
.places-rail{gap:clamp(12px,1.8vw,22px);padding:6px 2px 18px;scroll-padding-inline:2px}
.places-rail figure.place-fig{flex:0 0 clamp(250px,calc((100% - 2*clamp(12px,1.8vw,22px))/3),440px);scroll-snap-align:start;margin:0;display:flex}
.places-rail .place{width:100%;color:inherit;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.places-rail .place:hover,.places-rail .place:focus-visible{transform:translateY(-4px);box-shadow:0 20px 44px rgba(27,36,48,.16);border-color:var(--stone)}
.places-rail img{cursor:inherit}
.places-rail .place-img{margin:calc(-1 * clamp(18px,2.2vw,28px)) calc(-1 * clamp(18px,2.2vw,28px)) 10px} /* .rail figure pone margin:0 */
.places-gal .gal-ctl{padding-inline:0}
@media (max-width:760px){.places-rail figure.place-fig{flex-basis:80%}}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(12px,1.8vw,22px)}
.places-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.place{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.2vw,28px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);scroll-margin-top:140px;overflow:hidden}
/* la foto del lugar, a sangre arriba de la tarjeta (cuando la hay: photos.LUGARES_FOTOS) */
.place-img{margin:calc(-1 * clamp(18px,2.2vw,28px)) calc(-1 * clamp(18px,2.2vw,28px)) 10px;aspect-ratio:3/2;overflow:hidden;background:var(--bg2)}
.place-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.place:hover .place-img img{transform:scale(1.035)}
.place-img + .place-ico{margin-top:4px}
.place-ico svg{width:34px;height:34px;color:var(--wood);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.place-dist{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.place-dist b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,38px);line-height:1;color:var(--field)}
.place-dist span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.place h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.05}
.place .lbl{font-size:10px}
.place .body-txt{font-size:14px;max-width:none;margin-top:4px}
@media (max-width:900px){.places-3{grid-template-columns:1fr}}
/* El entorno (.places-big): los lugares de a dos por fila, con la foto al costado
del texto y mas grande (Juan, 29/9: "queda muy largo"). En movil vuelven a
una columna con la foto arriba. */
@media (min-width:901px){
.places-big{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.places-big .place:has(.place-img){display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(16px,2vw,28px);row-gap:6px;padding:0;align-items:start}
.places-big .place:has(.place-img) .place-img{grid-column:1;grid-row:1 / -1;margin:0;aspect-ratio:auto;min-height:280px;height:100%;align-self:stretch}
.places-big .place:has(.place-img) > :not(.place-img){grid-column:2;margin-right:clamp(18px,2.2vw,28px)}
.places-big .place:has(.place-img) .place-img + .place-ico{margin-top:clamp(18px,2.2vw,28px)}
.places-big .place:has(.place-img) .place-dist{margin-top:0}
.places-big .place:has(.place-img) .body-txt{margin-bottom:clamp(18px,2.2vw,28px)}
}
/* las ciudades y los aeropuertos */
.fars{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.far{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--rule);border-radius:10px}
.far i{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--fill);color:var(--wood);display:grid;place-content:center}
.far svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.far b{display:block;font-weight:500;font-size:14px;color:var(--ink)}
.far span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}
/* los servicios cercanos */
.srvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.srv{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--rule);border-radius:10px}
.srv i{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--fill);color:var(--field);display:grid;place-content:center}
.srv svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.srv b{display:block;font-weight:500;font-size:14px;color:var(--ink);line-height:1.3}
.srv span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:3px;font-variant-numeric:tabular-nums}
/* el hover de todas las tarjetas (Juan, 29/9): se levantan un poco, sombra,
filo verde y el icono redondo se pinta de verde. La transicion de opacidad
se mantiene en 1 s porque estas tarjetas tambien son .rv (entrada al hacer scroll). */
.srv,.far,.place,.rev-card,.room-card,.promo,.scores > a{transition:opacity 1s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.srv i,.far i{transition:background-color .5s var(--ease),color .5s var(--ease)}
.emerge-card{transition:box-shadow .5s var(--ease)}
@media (hover:hover){
.srv:hover,.far:hover,.place:hover,.rev-card:hover,.room-card:hover,.promo:hover,.scores > a:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,36,48,.14);border-color:color-mix(in srgb,var(--field) 55%,var(--rule))}
.srv:hover i,.far:hover i{background:var(--field);color:#fff}
.emerge-card:hover{box-shadow:0 26px 60px rgba(0,0,0,.5)}
html.dark .srv:hover,html.dark .far:hover,html.dark .place:hover,html.dark .rev-card:hover,html.dark .room-card:hover,html.dark .promo:hover,html.dark .scores > a:hover{box-shadow:0 18px 40px rgba(0,0,0,.45)}
}
@media (prefers-reduced-motion:reduce){
.srv:hover,.far:hover,.place:hover,.rev-card:hover,.room-card:hover,.promo:hover,.scores > a:hover{transform:none}
}
/* el motor: los extras de la casa */
.eng-extras{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);display:grid;gap:6px}
.eng-extras .lbl{margin-bottom:2px}
.eng-extras .form-note{margin-bottom:4px}
.extra{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink);cursor:pointer}
.extra input{margin-top:3px;accent-color:var(--field)}
.extra b{font-weight:500}
.extra small{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.extra.is-locked{opacity:.85}
.eng-summary dd small{display:block;font-size:12px;opacity:.8}
/* las paginas legales */
.legal{max-width:76ch}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.1;margin:clamp(18px,2.4vw,30px) 0 8px}
.legal .body-txt{max-width:none}
.legal .form-note{margin-top:clamp(22px,3vw,36px)}
.legal .form-note a{margin-left:2px}
/* el pie: el registro y la nota de demo */
.ftr-reg{margin-top:clamp(14px,2vw,22px);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.8}
/* las opiniones: la nota */
.rev-stars{color:var(--ember)}
.rev-card[lang=fr] .rev-txt{font-style:italic}
/* las tarjetas de la home (dos dormitorios) */
.room-card .lbl{color:var(--field)}
/* las tarjetas que salen de la casa: sin precio, con el subtitulo */
.emerge-sub{color:var(--field)}
/* ============================================================
MODO OSCURO: por preferencia del sistema (si no se eligio nada) o
por el boton (data-theme en , guardado en localStorage). Los
tokens del papel pasan a piedra de noche; las bandas verdes y el pie
se mantienen; las tarjetas usan --card.
============================================================ */
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .t-paper{
--bg:#1b2430; --bg2:#263242; --ink:#f6f3ea; --card:#2b3a4d;
--dim:rgba(246,243,234,.74); --faint:rgba(246,243,234,.46); --rule:rgba(246,243,234,.16);
--scrim:rgba(27,36,48,.94); --scrim0:rgba(27,36,48,0); --fill:rgba(233,228,200,.08);
--acc-ink:var(--wheat); --field:#9fcf6a; --field-2:#b9df8e; --ember:#9fcf6a; --ember-2:#b9df8e; --on-acc:#1b2430; --wood:#cfcbb8;
}
:root:not([data-theme=light]) .band-stone{--bg:#2b3a4d;--bg2:#35475c;--ink:#f6f3ea;--dim:rgba(246,243,234,.74);--faint:rgba(246,243,234,.46);--rule:rgba(246,243,234,.16);--fill:rgba(246,243,234,.08)}
:root:not([data-theme=light]) .facts-strip,:root:not([data-theme=light]) .facts{background:var(--card)}
}
:root[data-theme=dark] .t-paper{
--bg:#1b2430; --bg2:#263242; --ink:#f6f3ea; --card:#2b3a4d;
--dim:rgba(246,243,234,.74); --faint:rgba(246,243,234,.46); --rule:rgba(246,243,234,.16);
--scrim:rgba(27,36,48,.94); --scrim0:rgba(27,36,48,0); --fill:rgba(233,228,200,.08);
--acc-ink:var(--wheat); --field:#9fcf6a; --field-2:#b9df8e; --ember:#9fcf6a; --ember-2:#b9df8e; --on-acc:#1b2430; --wood:#cfcbb8;
}
:root[data-theme=dark] .band-stone{--bg:#2b3a4d;--bg2:#35475c;--ink:#f6f3ea;--dim:rgba(246,243,234,.74);--faint:rgba(246,243,234,.46);--rule:rgba(246,243,234,.16);--fill:rgba(246,243,234,.08)}
/* en oscuro las bandas marrones conservan el marron pleno y el boton primario va en crema */
:root[data-theme=dark] .band-field,html.dark .band-field{--bg:#1e2e45;--bg2:#2b4360;--ember:#f6f3ea;--ember-2:#e9e4c8;--on-acc:#1e2e45}
html.dark .btn-primary,:root[data-theme=dark] .btn-primary{color:#1b2430}
html.dark .btn.btn-book,:root[data-theme=dark] .btn.btn-book{color:#1b2430}
html.dark .cal-day.is-sel,html.dark .cal-day.is-range,html.dark .dp-day.is-in,html.dark .dp-day.is-out{color:#1b2430}
html.dark .cal-day.is-sel span,html.dark .cal-day.is-range span,html.dark .dp-day.is-in i,html.dark .dp-day.is-out i{color:#1b2430}
html.dark .chat-btn,html.dark .chat-head,html.dark .msg-user,html.dark .eng-summary,html.dark .room-ico i{color:#1b2430}
html.dark .eng-summary .lbl,html.dark .eng-summary .form-note{color:rgba(27,36,48,.7)}
html.dark .eng-summary dl div{border-bottom-color:rgba(27,36,48,.2)}
html.dark .chat-x{color:#1b2430}
html.dark .steps li.is-on b,html.dark .steps li.is-done b{color:#1b2430}
html.dark .chat-quick button:hover,html.dark .cal-rooms button.is-on,html.dark .arw:hover:not(:disabled),html.dark .srv:hover i,html.dark .far:hover i,html.dark .btn:hover{color:#1b2430}
/* Marsala e dintorni: le esperienze con la foto del tramonto a fianco (Commons, con credito in calce) */
.act-split{align-items:center}
.act-split .lead{max-width:none}
.act-split figure.fit img{aspect-ratio:3/2;border-radius:var(--r)}
/* ============================================================
VILLA MA PAULO : lo propio de la casa
============================================================ */
/* la regla de la casa (familias, sin fiestas) bajo la bienvenida */
.regle{display:flex;gap:12px;align-items:flex-start;max-width:74ch;margin-top:clamp(16px,2vw,24px);padding:14px 16px;border-left:3px solid var(--ember);background:var(--card);border-radius:0 var(--r) var(--r) 0;font-size:14.5px;line-height:1.6;color:var(--dim)}
.regle svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--field);margin-top:2px}
/* las novedades (editables desde el panel): banda verde con la lista en dos columnas */
.news{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(22px,4vw,60px);align-items:start}
.news-date{margin-top:clamp(10px,1.4vw,18px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--wheat)}
.news-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.news-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.5;color:var(--ink)}
.news-list svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--wheat);margin-top:1px}
@media (max-width:900px){.news{grid-template-columns:1fr}.news-list{grid-template-columns:1fr}}
/* el mot de Véronique en la pagina de contacto */
.mot{margin:0 0 clamp(16px,2vw,24px);padding:0 0 clamp(16px,2vw,24px);border-bottom:1px solid var(--rule)}
.mot p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--ink)}
/* el livre d'or: dos cifras en vez de tres */
.scores-2{grid-template-columns:repeat(2,1fr);max-width:720px}
@media (max-width:760px){.scores-2{grid-template-columns:1fr}}
/* los planos de la villa: dos imagenes grandes, clicables */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);grid-template-rows:none;grid-auto-flow:row;overflow:visible;padding:0;cursor:default}
.plans::after{content:none} /* el relleno de 8 filas del mosaico dejaba un hueco bajo los planos */
.plans .plan{display:block;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:12px;grid-column:auto;grid-row:auto;cursor:zoom-in}
.plans .plan img{width:100%;height:auto;object-fit:contain;transition:none}
.plans .plan .lbl{display:block;margin-top:10px}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
/* el buscador de semanas: dos selectores y los viajeros */
.search-wk{grid-template-columns:1.6fr 1fr .6fr .6fr auto}
.search select{width:100%;border:1px solid rgba(27,36,48,.18);border-radius:6px;padding:12px 32px 12px 12px;font:inherit;font-size:14px;color:var(--ink);background:var(--card);appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.search select:focus{outline:none;border-color:var(--field)}
@media (max-width:820px){.search-wk{grid-template-columns:1fr 1fr}.search-wk label:first-child{grid-column:1 / -1}}
/* EL CALENDARIO DE SEMANAS (reservar): un mes por bloque, una fila por semana */
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(16px,2vw,24px)}
.wk-month-h{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1;color:var(--field);margin:0 0 10px}
.wk-list{display:grid;gap:8px}
.wk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;text-align:left;padding:11px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);
transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.wk-dates{font-size:14px;font-variant-numeric:tabular-nums}
.wk-dates b{font-weight:500}
.wk-dates i{font-style:normal;color:var(--faint);margin:0 4px}
.wk-price{grid-row:1 / 3;align-self:center;font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1;color:var(--ember);white-space:nowrap;font-variant-numeric:tabular-nums}
.wk-state{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--field)}
.wk.is-libre{cursor:pointer}
.wk.is-libre:hover:not(.is-sel){border-color:var(--field);transform:translateY(-1px)}
.wk.is-reservee{background:transparent;color:var(--faint);cursor:default}
.wk.is-reservee .wk-price{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.wk.is-reservee .wk-state{color:var(--faint)}
/* el nombre de quien reservó (Véronique, 20/10): debajo de « Réservée » */
.wk-nom{grid-column:2;font-size:13.5px;font-weight:500;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk.is-sel{background:var(--ember);border-color:var(--ember);color:#fff;box-shadow:0 10px 26px rgba(63,122,18,.3)}
.wk.is-sel .wk-price,.wk.is-sel .wk-state,.wk.is-sel .wk-dates i{color:#fff}
.wk.is-ete:not(.is-reservee) .wk-state::after{content:" · 14 nuits min."}
.wk-sum{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 22px;align-items:center;margin-top:clamp(18px,2.6vw,30px);padding:16px clamp(16px,2vw,24px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 -12px 40px rgba(0,0,0,.12)}
.wk-sum-txt{font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.wk-sum-txt b{font-weight:500;color:var(--ink)}
.wk-sum-total{display:flex;align-items:baseline;gap:10px}
.wk-sum-total b{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,34px);line-height:1;color:var(--ember);white-space:nowrap}
.wk-sum .form-note{grid-column:1 / -1}
.wk-sum .form-note.is-warn{color:#b23a3a;font-weight:500}
.wk-sum .btn{white-space:nowrap}
.wk-pick{margin-top:14px}
@media (max-width:820px){.wk-sum{grid-template-columns:1fr;gap:8px}.wk-sum .btn{width:100%;text-align:center}.weeks{grid-template-columns:1fr}}
html.dark .wk.is-sel{color:#1b2430}
html.dark .wk.is-sel .wk-price,html.dark .wk.is-sel .wk-state,html.dark .wk.is-sel .wk-dates i{color:#1b2430}
html.dark .wk.is-ete:not(.is-reservee) .wk-state::after{color:inherit}
/* ---- el calendario de meses arriba del motor (reserver, Juan 14/10): una fila por semana, sabado → viernes ---- */
.cal-sec{padding-bottom:clamp(10px,1.6vw,22px)}
.cal-legend i.k-demande{background:transparent;border-style:dashed}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:clamp(18px,2.4vw,32px) clamp(18px,2.4vw,36px);margin-top:clamp(16px,2vw,24px)}
.cg-month-h{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1;color:var(--field);margin:0 0 10px}
.cg-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(86px,auto);gap:2px;align-items:center}
.cg-head{padding:0 8px 6px 4px}
.cg-head span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:center}
.cg-head .cg-p,.cg-wk .cg-p{text-align:right}
.cg-wk{width:100%;margin:0 0 6px;padding:5px 8px 5px 4px;border:1px solid var(--rule);border-radius:10px;background:var(--card);font:inherit;color:inherit;text-align:center;
transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.cg-day{font-size:13px;line-height:26px;font-variant-numeric:tabular-nums}
.cg-day.is-out{color:var(--faint)}
.cg-wk .cg-p{font-family:var(--serif);font-weight:500;font-size:15px;line-height:1;color:var(--ember);white-space:nowrap;font-variant-numeric:tabular-nums}
.cg-wk .cg-p i{font-style:normal;font-family:var(--sans);font-weight:400;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--field)}
.cg-wk.is-libre{cursor:pointer}
.cg-wk.is-libre:hover:not(.is-sel){border-color:var(--field);transform:translateY(-1px)}
.cg-wk.is-reservee{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(27,36,48,.07) 7px 8px) var(--bg2);color:var(--faint);cursor:default}
.cg-wk.is-reservee .cg-p i,.cg-wk.is-reservee .cg-day{color:var(--faint)}
.cg-wk .cg-p i.cg-nom{display:inline-block;max-width:128px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--dim)}
.cg-wk.is-demande{border-style:dashed}
.cg-wk.is-passe{background:transparent;border-color:transparent;opacity:.4}
.cg-wk.is-sel{background:var(--ember);border-color:var(--ember);color:#fff;box-shadow:0 10px 26px rgba(63,122,18,.3)}
.cg-wk.is-sel .cg-p,.cg-wk.is-sel .cg-p i,.cg-wk.is-sel .cg-day,.cg-wk.is-sel .cg-day.is-out{color:#fff}
.cg-wk.is-sel .cg-day.is-out{opacity:.6}
.cg-foot{text-align:center;margin:clamp(6px,1vw,12px) 0 0}
.cg-sum{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 22px;align-items:center;margin-top:clamp(18px,2.6vw,30px);padding:16px clamp(16px,2vw,24px);
border:1px solid var(--rule);border-radius:12px;background:var(--card)}
/* la selección queda a la vista: pegada abajo mientras se recorre el calendario, en las dos vistas (Juan, 15/10:
"al seleccionar una semana no sale el coso de reserva"); los botones flotantes se apartan (.cg-bar, casa.js) */
.cg-sum{position:sticky;bottom:clamp(10px,1.6vw,18px);z-index:6;border-left:4px solid #2f7d4f;box-shadow:0 16px 44px rgba(0,0,0,.2)}
.cg-sum .wk-sum-txt{margin:0}
.wa,.chat-btn{transition:opacity .3s,visibility .3s}
.cg-bar .wa,.cg-bar .chat-btn{opacity:0;visibility:hidden}
.cg-sum .form-note{grid-column:1 / -1;margin:0;order:5}
.cg-sum .form-note:empty{display:none}
.cg-sum .form-note.is-warn{color:#b23a3a;font-weight:500}
.cg-sum .btn{white-space:nowrap}
@media (max-width:820px){.cg{grid-template-columns:1fr}.cg-sum{grid-template-columns:1fr;gap:8px;padding:12px 14px}.cg-sum .wk-sum-txt{font-size:14px;line-height:1.35}.cg-sum .wk-sum-total b{font-size:22px}.cg-sum .form-note:not(.is-warn){display:none}.cg-sum .btn{width:100%;text-align:center;padding:12px 14px}.cg-row{grid-template-columns:repeat(7,minmax(0,1fr)) minmax(78px,auto)}}
/* ---- Réserver (Juan, 15/10) : le chercheur EN HAUT, sa réponse tout de suite, d'autres dates, un seul calendrier à deux vues ---- */
.eng{padding-top:clamp(22px,3vw,40px)}
.eng-res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px clamp(16px,2.4vw,32px);align-items:center;margin-top:clamp(16px,2.2vw,24px);
padding:clamp(16px,2vw,24px) clamp(16px,2.2vw,28px);background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--rule);border-radius:var(--r);
box-shadow:0 12px 34px rgba(27,36,48,.08)}
.eng-res.is-ok{border-left-color:#2f7d4f}
.eng-res.is-no{border-left-color:#b23a3a}
.eng-res-state{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.15;margin:0}
.eng-res-state i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-content:center;font-style:normal;font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;background:#2f7d4f}
.eng-res.is-no .eng-res-state i{background:#b23a3a}
.eng-res-dates{margin:6px 0 0;font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.eng-res-dates b{font-weight:500;color:var(--ink)}
.eng-res-note{margin:6px 0 0}
.eng-res-note:empty{display:none}
.eng-res-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.eng-res-side .btn{white-space:nowrap}
.eng-res-alt{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:14px;margin-top:4px}
.eng-res-alt .lbl{margin:0 0 10px}
.eng-chips{display:flex;flex-wrap:wrap;gap:10px}
.eng-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer;
font:inherit;font-size:13px;text-align:left;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.eng-chip b{font-weight:500}
.eng-chip span{font-size:12px;color:var(--ember)}
.eng-chip:hover,.eng-chip:focus-visible{border-color:var(--ember);transform:translateY(-1px)}
.eng-other{margin-top:clamp(16px,2.2vw,24px);border:1px dashed var(--rule);border-radius:var(--r);background:color-mix(in srgb,var(--card) 60%,transparent)}
.eng-other summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:14px clamp(14px,2vw,22px);font-size:14px;color:var(--field);font-weight:500}
.eng-other summary::-webkit-details-marker{display:none}
.eng-other summary svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.eng-other summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:var(--dim)}
.eng-other[open] summary::after{content:"−"}
.eng-other > .body-txt{margin:0 clamp(14px,2vw,22px) 12px;font-size:14px;max-width:80ch}
.eng-other .search-other{margin:0 clamp(10px,1.6vw,18px) clamp(12px,1.8vw,18px);box-shadow:none}
.search-other input[type=date]{min-height:46px}
.cal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 clamp(14px,2vw,22px)}
.cal-bar .cal-legend{margin-top:0}
.cal-views{display:inline-flex;padding:4px;border:1px solid var(--rule);border-radius:999px;background:var(--card)}
.cal-views button{all:unset;cursor:pointer;padding:8px 18px;border-radius:999px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--dim);transition:background .3s var(--ease),color .3s var(--ease)}
.cal-views button.is-on{background:var(--field);color:#fff}
.cal-views button:focus-visible{outline:2px solid var(--field);outline-offset:2px}
[data-cal-pane="semaines"] .weeks{margin-top:0}
@media (max-width:820px){
.eng-res{grid-template-columns:1fr}
.eng-res-side{align-items:stretch}
.eng-res-side .btn{width:100%;text-align:center}
.eng-chip{flex:1 1 100%}
}
html.dark .cg-wk.is-sel,html.dark .cg-wk.is-sel .cg-p,html.dark .cg-wk.is-sel .cg-p i,html.dark .cg-wk.is-sel .cg-day{color:#1b2430}
html.dark .cg-wk.is-reservee{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(246,243,234,.08) 7px 8px) var(--bg2)}
/* ---- les nouveautés en vignettes (Juan, 14/10) : photo, icône et survol comme les équipements ---- */
.news{grid-template-columns:minmax(0,.6fr) minmax(0,2fr)}
.news-grid .tiles{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.news-grid .tile span{font-size:12.5px}
@media (max-width:900px){.news{grid-template-columns:1fr}.news-grid .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* ============================================================
LA SAUCISSERIE GÎTES: what is specific to this site (appended by _build/tema.py)
============================================================ */
/* the brand: the leaves of their logo + the name, "Gîtes" small */
.brand img{height:clamp(30px,3.2vw,38px);border-radius:0}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand small{font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-indent:.3em;font-weight:600;color:var(--acc-ink);margin-top:4px;text-transform:uppercase}
body.on-photo .brand small{color:rgba(246,243,234,.8)}
.ftr-mark{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);font-size:clamp(18px,3.4vw,52px);letter-spacing:.1em;text-indent:0}
.ftr-mark img{height:clamp(36px,4vw,60px);width:auto}
.ftr-tag{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,19px);color:var(--dim)}
.ftr-social{display:inline-flex;gap:14px;align-items:center}
.ftr-social a,.social a{display:inline-flex;align-items:center;gap:6px;color:inherit;border:0;opacity:.85}
.ftr-social a:hover,.social a:hover{opacity:1;color:var(--ink)}
.ftr-social svg,.social svg{width:18px;height:18px;fill:currentColor}
.ftr-social span{font-size:inherit}
.social{display:flex;flex-wrap:wrap;gap:12px 18px}
.social a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--field);border-bottom:1px solid var(--rule);padding-bottom:3px;opacity:1}
.social svg{fill:none;stroke:currentColor}
.social a[aria-label=Facebook] svg{fill:currentColor;stroke:none}
.phero-sub{margin-top:clamp(8px,1vw,14px);font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.6vw,22px);color:rgba(246,243,234,.9);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.phero:not(.phero-sm){min-height:clamp(380px,64svh,640px)}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.8vw,24px);line-height:1.15;margin:clamp(16px,2vw,24px) 0 10px}
.btn-sm{padding:9px 14px;font-size:10px}
.sign{font-family:var(--serif);font-style:italic;font-size:17px}
.new-badge{display:inline-flex;align-items:center;gap:8px;margin:4px 0 14px;padding:8px 14px;border-radius:999px;background:var(--ember);color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em}
.new-badge svg{width:18px;height:18px}
html.dark .new-badge{color:#1b2430}
/* ---- the search (Simone-style): dates, guests, the button and a row of filter chips ---- */
/* one line (30/10, James): the two dates, then adults / children / pets in small boxes, then the button; no Sort by */
.search-ls{grid-template-columns:1.1fr 1.1fr minmax(100px,.42fr) minmax(100px,.42fr) minmax(100px,.42fr) auto;grid-template-areas:"in out ad ch pe go"}
.search-ls > label:nth-child(1){grid-area:in}.search-ls > label:nth-child(2){grid-area:out}.search-ls > label:nth-child(3){grid-area:ad}.search-ls > label:nth-child(4){grid-area:ch}.search-ls > label:nth-child(5){grid-area:pe}
.search-ls > .btn{grid-area:go}
.search-flags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.search-flags > .lbl{margin:0 6px 0 2px;color:var(--faint)}
.chip{display:inline-flex;align-items:center;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span,.chip-static{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--bg2);color:var(--dim);font-size:12px;letter-spacing:.02em;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chip:hover span{border-color:var(--field);color:var(--field)}
.chip input:checked + span{background:var(--field);border-color:var(--field);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--field);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip-static{color:var(--ink)}
@media (max-width:820px){
.search-ls{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"in in in out out out" "ad ad ch ch pe pe" "go go go go go go"}
.search-ls > .btn{text-align:center}
}
.sec-search .search{margin-top:6px}
.sec-search .form-note{margin-top:12px}
/* ---- the cards of the six accommodations ---- */
.vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.vcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:0 12px 34px rgba(27,36,48,.07);transition:opacity 1s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.vcard[hidden]{display:none}
.vcard-img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.vcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.vcard-img img.is-on{opacity:1}
.vcard:hover .vcard-img img{transform:scale(1.035)}
.vcard .badge{left:12px;top:12px;bottom:auto}
.vcard .badge-soft{left:auto;right:12px;background:var(--paper);color:var(--deep)}
.vcard-body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.2vw,26px);flex:1 1 auto;border-top:3px solid var(--field)}
.vcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.05}
.vcard h3 a:hover{color:var(--field)}
.vcard-specs{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--dim)}
.vcard-specs span{display:inline-flex;align-items:center;gap:6px}
.vcard-specs svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;color:var(--wood)}
.vcard-card{font-size:13.5px;line-height:1.5;color:var(--dim)}
.vcard-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.vcard-price [data-price-from]{font-weight:600;color:var(--field)}
.vcard-av{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.vcard-av.is-free{background:rgba(47,125,79,.14);color:#2f7d4f}
.vcard-av.is-busy{background:rgba(178,58,58,.12);color:#b23a3a}
.vcard-av.is-check{background:var(--bg2);color:var(--field);border:1px solid var(--rule)}
.vcard.is-busy{opacity:.78}
.vcard-btns{display:flex;flex-wrap:wrap;gap:8px}
@media (hover:hover){.vcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,36,48,.14);border-color:color-mix(in srgb,var(--field) 55%,var(--rule))}}
@media (max-width:1000px){.vcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vcards{grid-template-columns:1fr}}
.res-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-bottom:clamp(16px,2.2vw,28px)}
.res-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,36px);line-height:1.05;margin-right:auto}
.res-head .form-note{flex-basis:100%}
.eng-none .eng-btns{display:flex;flex-wrap:wrap;gap:10px}
/* ---- the accommodation page: facts, beds, facilities, rates ---- */
.beds{display:grid;gap:8px;margin-top:clamp(12px,1.6vw,20px)}
.beds li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--card);font-size:14.5px;line-height:1.4;color:var(--ink)}
.beds svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--field)}
.offer{margin-top:clamp(12px,1.6vw,20px)}
.offer-1{grid-template-columns:1fr}
.offer li{font-size:14px}
.v-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6em}
.rates{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;font-size:14px;font-variant-numeric:tabular-nums}
.rates th,.rates td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--rule)}
.rates thead th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-ink);font-weight:600;background:var(--bg2)}
.rates tbody th{font-weight:600;color:var(--ink)}
.rates td:nth-child(3),.rates td:nth-child(4){font-family:var(--serif);font-size:16px;color:var(--field);white-space:nowrap}
.rates tr:last-child th,.rates tr:last-child td{border-bottom:0}
@media (max-width:640px){.rates th,.rates td{padding:10px 8px}.rates td:nth-child(3),.rates td:nth-child(4){font-size:14px}}
/* the real Bookingmood calendars and the booking form (iframes) */
.bm-frame iframe,.resa-frame iframe{width:100%;height:560px;border:0;display:block;border-radius:var(--r);background:#fff}
.bm-frame{background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.resa-frame{background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.resa-frame iframe{height:760px}
.bm-list{display:grid;gap:10px}
.bm-item{border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.bm-item summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px clamp(14px,2vw,22px);cursor:pointer;font-family:var(--serif);font-size:clamp(18px,1.8vw,24px)}
.bm-item summary::-webkit-details-marker{display:none}
.bm-item summary svg{width:22px;height:22px;flex:none;color:var(--field)}
.bm-item summary i{margin-left:auto;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink)}
.bm-item summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--ember);margin-left:10px}
.bm-item[open] summary::after{content:"\2212"}
.bm-item .bm-frame{margin:0 clamp(10px,1.6vw,18px) 8px;border:0}
.bm-item > .form-note{padding:0 clamp(14px,2vw,22px) 14px}
@media (max-width:640px){.bm-frame iframe{height:520px}.resa-frame iframe{height:820px}}
/* ---- the home: the three ideas, the green heart, the places ---- */
.ideas{margin-top:clamp(16px,2.2vw,28px)}
.green-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,44px)}
.green-figs figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.green-figs figure a{display:block;cursor:zoom-in}
.green-figs img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.green-figs figure:hover img{transform:scale(1.035)}
.green-figs figcaption{padding:10px 2px 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (max-width:760px){.green-figs{grid-template-columns:1fr}}
.tiles-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.tiles-6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.tiles-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.place h3{font-size:clamp(17px,1.5vw,21px)}
.places-rail .place{gap:4px}
.links{display:grid;gap:6px;margin-top:8px}
.links a{font-size:14px;color:var(--field);border-bottom:1px solid var(--rule)}
.far-note{font-style:normal;color:#b23a3a;font-weight:600;letter-spacing:0;text-transform:none}
.hows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.hows-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.how{padding:clamp(18px,2.2vw,28px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.how i,.how b{display:grid;place-content:center;width:44px;height:44px;border-radius:50%;background:var(--field);color:#fff;font-family:var(--serif);font-size:18px;margin-bottom:12px}
.how svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.how h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.1;margin-bottom:8px}
.how .body-txt{font-size:14px;max-width:none}
@media (max-width:1000px){.hows-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hows,.hows-4{grid-template-columns:1fr}}
/* ---- the offers ---- */
.promos{margin-top:clamp(16px,2.2vw,28px)}
.promos-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.promo-price{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);font-weight:700}
.promo .body-txt{max-width:none;flex:1 1 auto}
@media (max-width:1100px){.promos-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.promos-4{grid-template-columns:1fr}}
/* ---- the reviews: three scores ---- */
.scores-3{grid-template-columns:repeat(3,1fr)}
.scores-3 b svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;color:var(--field)}
.rev-more{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--field);border-bottom:1px solid var(--rule);padding-bottom:3px}
@media (max-width:760px){.scores-3{grid-template-columns:1fr}}
/* ---- the sections with a detail icon ---- */
.det-ico svg{width:42px;height:42px;color:var(--wood);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.det h2{font-size:clamp(26px,3.2vw,44px)}
.det .body-txt{max-width:none}
.det.split-photo{align-items:start}
.det .hcar-gal,.split-photo .hcar-gal{min-width:0}
.split-photo .rail-peek{padding-inline:10%;scroll-padding-inline:10%}
.split-photo .hcar-gal .gal-ctl{padding-inline:10%;margin-top:12px}
.mot{margin:16px 0 0;padding:0;border:0}
.band-field .mot p{color:rgba(255,255,255,.9)}
.legal .btn{margin-left:8px;vertical-align:middle}
figure.fit a{display:block}
/* dark mode: the accents that changed */
html.dark .vcard-av.is-free{color:#9fcf6a}
html.dark .chip input:checked + span{color:#1b2430}
html.dark .rates thead th{background:var(--bg2)}
html.dark .how i,html.dark .how b{color:#1b2430}
html.dark .beds li{background:var(--card)}
/* six entries in the menu and long labels in French, German and Dutch (« Nos installations », « Unsere
Einrichtungen »…): up to 1600 px the menu stays in the flow of the header, a little more compact, so
it never runs over the languages and the « Book a gîte » button (seen on fr/ at 1440 px, 22/10) */
@media (min-width:1361px) and (max-width:1600px){
.nav{position:relative;left:auto;transform:none;margin:0 auto;gap:clamp(12px,1.4vw,22px)}
.nav a{font-size:10.5px;letter-spacing:.14em}
}
/* the branded calendars (22/10, Juan: "con nuestro branding y con los precios de cada noche"): our own month grid with the
nightly price in every day; booked days come from the availability layer when it is connected */
.cal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.cal-card{padding:clamp(16px,2vw,24px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.cal-card > h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;margin:0 0 4px}
.cal-card > h3 small{display:block;margin-top:4px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cal-card .form-note{margin-top:10px}
.cal-card details{margin-top:10px;border-top:1px solid var(--rule)}
.cal-card details summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink)}
.cal-card details summary::-webkit-details-marker{display:none}
.cal-card details summary svg{width:18px;height:18px;flex:none}
.lscal{margin-top:12px}
.lscal-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lscal-bar .arw{width:36px;height:36px}
.lscal-title{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);text-align:center;text-transform:capitalize}
.lscal-months{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,26px)}
.lscal-big .lscal-months{grid-template-columns:repeat(2,minmax(0,1fr))}
.lscal-mh{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 6px;text-transform:capitalize}
.lscal-big .lscal-mh{font-size:13px}
.lscal-dow,.lscal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.lscal-dow span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:center;padding:2px 0 4px}
.lscal-days span,.lscal-days i{display:grid;gap:1px;align-content:center;justify-items:center;min-height:44px;border-radius:7px;background:var(--bg2);font-size:12px;line-height:1}
.lscal-days i{background:transparent}
.lscal-days span b{font-weight:600;font-size:12.5px}
.lscal-days span small{font-size:10px;color:var(--dim);letter-spacing:0}
.lscal-days .is-free{background:#e4ede1;color:#1f3a2a}
.lscal-days .is-free small{color:#2f5f3a;font-weight:600}
.lscal-days .is-busy{background:#e8a6a0;color:#5b1f1b}
.lscal-days .is-busy b{text-decoration:line-through;opacity:.7}
.lscal-days .is-req{background:#efeae0;color:var(--dim)}
.lscal-days .is-past{background:transparent;color:var(--faint);border:1px dashed var(--rule)}
.lscal-days .is-today{box-shadow:inset 0 0 0 2px var(--ember)}
.lscal-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:12px;color:var(--dim)}
.lscal-legend span{display:inline-flex;align-items:center;gap:6px}
.lscal-legend i{width:12px;height:12px;border-radius:3px}
.lscal-legend .is-free{background:#e4ede1;border:1px solid #c9dcc3}
.lscal-legend .is-busy{background:#e8a6a0}
.lscal-legend .is-req{background:#efeae0;border:1px solid #e2dbc9}
.lscal-status{margin-top:8px}
html.dark .lscal-days .is-free{background:rgba(228,237,225,.16);color:#dfeadb}
html.dark .lscal-days .is-free small{color:#b9d6b1}
html.dark .lscal-days .is-req{background:rgba(255,255,255,.06);color:var(--dim)}
html.dark .lscal-days .is-busy{background:rgba(232,166,160,.55);color:#fff}
@media (max-width:900px){.cal-grid{grid-template-columns:1fr}.lscal-big .lscal-months{grid-template-columns:1fr}}
@media (max-width:420px){.lscal-days span,.lscal-days i{min-height:40px}.lscal-days span small{font-size:9px}}
/* Book a gîte (22/10 evening): the selector above and one calendar with the next four months in a row */
.cal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,2vw,22px)}
.cal-tab{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink);font-family:var(--serif);font-size:15.5px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cal-tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--field)}
.cal-tab:hover{border-color:var(--field)}
.cal-tab.is-on{background:var(--field);border-color:var(--field);color:#fff}
.cal-tab.is-on svg{color:#fff}
.cal-pane{padding:clamp(16px,2vw,26px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.cal-sub{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 4px}
.cal-pane details{margin-top:14px;border-top:1px solid var(--rule)}
.cal-pane details summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink)}
.cal-pane details summary::-webkit-details-marker{display:none}
.cal-pane details summary svg{width:18px;height:18px;flex:none}
.cal-pane .form-note{margin-top:12px}
.cal-book{margin:16px 0 0}
.cal-book .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;font-size:11.5px;line-height:1} /* 23/10: the fixed height without padding left the text stuck to the top */
.cal-pane .engine{margin-top:10px}
.cal-pane .engine-card{background:var(--bg)}
.resa-dates{margin:0 0 14px}
.lscal[data-n="4"] .lscal-months{grid-template-columns:repeat(4,minmax(0,1fr))}
.lscal[data-n="4"] .lscal-days span,.lscal[data-n="4"] .lscal-days i{min-height:38px}
.lscal[data-n="4"] .lscal-days span b{font-size:12px}
.lscal[data-n="4"] .lscal-days span small{font-size:9.5px}
.lscal-days .is-est small{color:var(--faint);font-weight:500;font-style:italic}
.lscal-legend .is-est{background:#e4ede1;border:1px dashed #9db59a}
@media (max-width:1180px){.lscal[data-n="4"] .lscal-months{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lscal[data-n="4"] .lscal-months{grid-template-columns:1fr}.cal-tab{height:38px;padding:0 12px;font-size:14px}}
/* the gîte pages (22/10 at night): one calendar only, the official Bookingmood widget folded under it */
.bm-official{margin-top:14px;border-top:1px solid var(--rule)}
.bm-official summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 0;cursor:pointer;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink)}
.bm-official summary::-webkit-details-marker{display:none}
.bm-official summary svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bm-official .form-note{margin-top:10px}
/* the booking engine of the gîte pages (22/10 at night): the calendar picks the dates, the card sums them up */
.engine{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.85fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.engine .lscal{margin-top:0}
.engine .lscal[data-n="4"] .lscal-months{grid-template-columns:repeat(2,minmax(0,1fr))}
.engine .lscal[data-n="4"] .lscal-days span,.engine .lscal[data-n="4"] .lscal-days i{min-height:44px}
.engine .lscal[data-n="4"] .lscal-days span b{font-size:12.5px}
.engine .lscal[data-n="4"] .lscal-days span small{font-size:10px}
.engine-card{position:sticky;top:96px;padding:clamp(18px,2.2vw,28px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.engine-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;margin:4px 0 10px}
.engine-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 6px}
.engine-sum div{padding:10px 12px;border-radius:10px;background:var(--bg2)}
.engine-sum dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.engine-sum dd{margin:2px 0 0;font-family:var(--serif);font-size:18px;line-height:1.2}
.eng-aprox{font-size:12px;margin:0 0 10px}
.eng-warn{color:var(--red,#b2382b);font-weight:600}
.engine-card .eng-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.engine-card .eng-btns .btn{flex:1 1 auto;justify-content:center}
.eng-copy{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--bg2)}
.eng-copy b{display:block;font-family:var(--serif);font-size:17px;margin-top:4px}
.engine-card .eng-other{margin-top:18px;padding:0;border:0;border-radius:0;background:none} /* the Ma Paulo base drew a dashed box with this class name */
.eng-gites{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.eng-gite{padding:6px 11px;border-radius:999px;border:1px solid var(--rule);font-size:13px;text-decoration:none;color:var(--ink);background:var(--card)}
.eng-gite:hover{border-color:var(--field)}
.eng-gite.is-on{background:var(--field);color:#fff;border-color:var(--field)}
.lscal[data-select] .lscal-days span:not(.is-past){cursor:pointer}
.lscal[data-select] .lscal-days span:not(.is-past):hover{box-shadow:inset 0 0 0 2px var(--field)}
/* a changeover day (5/11, James): a stay can end here, new guests arrive; clear without diagonals */
.lscal-days .is-change{background:#f6e3e0;color:#7a3b35}
.lscal-days .is-change small{color:#7a3b35;opacity:1;text-decoration:none}
.lscal-days .is-change b{text-decoration:none;opacity:1}
.lscal-legend .is-change{background:#f6e3e0;border:1px solid #e8a6a0}
html.dark .lscal-days .is-change{background:rgba(232,166,160,.22);color:#f3d6d2}
html.dark .lscal-days .is-change small{color:#f3d6d2}
html.dark .lscal-legend .is-change{background:rgba(232,166,160,.22)}
.lscal-days .is-range{background:#c9dcc3;color:#1f3a2a}
.lscal-days .is-range small{color:#2f5f3a}
.lscal-days .is-sel{background:var(--field);color:#fff}
.lscal-days .is-sel small,.lscal-days .is-sel b{color:#fff;opacity:1;text-decoration:none}
html.dark .lscal-days .is-range{background:rgba(201,220,195,.35);color:#e9f1e6}
/* the arrival and departure days: « html.dark .is-free » outranked .is-sel, so in dark mode only the middle lit up (29/10, Juan) */
html.dark .lscal-days .is-sel{background:var(--field);color:#1b2430}
html.dark .lscal-days .is-sel small,html.dark .lscal-days .is-sel b{color:#1b2430}
@media (max-width:980px){.engine{grid-template-columns:1fr}.engine-card{position:static}}
@media (max-width:640px){.engine .lscal[data-n="4"] .lscal-months{grid-template-columns:1fr}}
/* Around us (22/10 at night, Juan): the cards all the same size, the sights with a photo and its credit, the note as a pill */
.fars-head{margin-bottom:clamp(18px,2.4vw,30px);max-width:720px}
.fars{grid-auto-rows:1fr;align-items:stretch}
.far{height:100%}
.fars-ph{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(12px,1.6vw,20px)}
.far-ph{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:var(--r)}
.far-ph > div{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.far-ph b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.15}
.far-img{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bg2)}
.far-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.far-ph:hover .far-img img{transform:scale(1.035)}
.far-credit{margin-top:auto;padding-top:8px;font-size:10px;letter-spacing:.02em;color:var(--faint);text-transform:none}
.far-credit a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.far-credit a:hover{border-bottom-color:currentColor}
.far-note{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(178,58,58,.12);color:#b23a3a;font-style:normal;font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
@media (max-width:640px){.fars-ph{grid-auto-rows:auto}.far-ph{height:auto}} /* a una columna no hay vecinas que igualar: cada tarjeta mide lo suyo */
html.dark .far-note{background:rgba(232,166,160,.2);color:#f0b5af}
/* gîte pages (23/10, Juan): beds and facilities in one list of boxes across the whole width, an icon for each item; the
photo of the selected item fills the background (a clear band at the top, the list over a darker veil below). It
changes by itself every 3 s (gites.js initKit) and stops when the guest clicks one; a second use of the same photo
frames another part of it (data-z) */
.kit{position:relative;overflow:hidden;isolation:isolate;background:#141c26;color:#fff;padding-bottom:clamp(18px,2.2vw,30px)} /* the photo ends where the boxes end (Juan, 23/10) */
.kit-stage{position:absolute;inset:0;z-index:-1;background:#141c26}
.kit-ph{position:absolute;inset:0;margin:0;opacity:0;overflow:hidden;transition:opacity 1s var(--ease)}
.kit-ph.is-on{opacity:1}
.kit-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transform-origin:50% 50%;transition:transform 1.6s var(--ease),transform-origin 1.6s var(--ease)}
.kit-ph figcaption{display:none}
.kit-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,20,29,.62) 0%,rgba(14,20,29,.38) 35%,rgba(14,20,29,.45) 100%)}
.kit-in{position:relative;z-index:1}
.kit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(14px,1.8vw,22px);text-shadow:0 1px 14px rgba(0,0,0,.55)}
.kit-head > div{max-width:760px}
.kit .lbl{color:#b9df8e}
.kit h2{color:#fff}
/* the caption of the photo, at the right of the title */
.kit-cap{flex:none;max-width:38%;margin:0 0 4px;text-align:right;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.kit-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.kit-it{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;min-height:50px;padding:10px 13px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(20,28,38,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13.5px;line-height:1.3;color:#fff;cursor:pointer;user-select:none;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.kit-it svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:#9fcf6a;transition:color .35s var(--ease)}
.kit-it:hover{border-color:rgba(255,255,255,.42);background:rgba(20,28,38,.75)}
.kit-it:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kit-it.is-on{background:#9fcf6a;border-color:#9fcf6a;color:#1b2430}
.kit-it.is-on svg{color:#1b2430}
.kit.is-auto .kit-it.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(27,36,48,.55);transform-origin:0 50%;animation:kitbar 3s linear forwards}
@keyframes kitbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kit-note{margin-top:6px;color:rgba(255,255,255,.78)}
@media (prefers-reduced-motion:reduce){.kit-ph,.kit-ph img{transition:none}.kit.is-auto .kit-it.is-on::after{animation:none}}
/* phone and tablet: the photo on top, it stays in view while the list scrolls under it */
@media (max-width:900px){
.kit{padding-top:0;overflow:visible} /* overflow:hidden would cancel the sticky photo */
.kit-stage{position:sticky;inset:auto;top:var(--kit-top,110px);z-index:2;height:auto;aspect-ratio:16/10;margin:0 calc(-1 * var(--pad)) 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.kit-stage::after{background:linear-gradient(0deg,rgba(14,20,29,.75) 0%,rgba(14,20,29,0) 45%)}
.kit-ph figcaption{display:block;position:absolute;left:16px;bottom:12px;max-width:80%;z-index:2;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.kit-cap{display:none}
.kit-head{display:block;text-shadow:none}
.kit-list{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.kit-it{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.05)}
}
@media (max-width:560px){ /* two compact columns on a phone too: half as long */
.kit-list{gap:6px}
.kit-it{gap:8px;min-height:46px;padding:8px 9px;font-size:12.5px;line-height:1.25;border-radius:9px}
.kit-it svg{width:18px;height:18px}
}
/* Book a gîte (23/10): the official booking form of the selected gîte under the calendars, on the same page */
.cal-resa{margin-top:clamp(22px,3vw,40px);padding:clamp(18px,2.2vw,30px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);scroll-margin-top:100px}
.cal-resa h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.1;margin:4px 0 8px}
.cal-resa .body-txt{max-width:780px;margin-bottom:14px}
.cal-resa .resa-frame{margin-top:6px}
.cal-resa .form-note{margin-top:12px}
.cal-resa .eng-none{margin-top:6px}
/* ---------- OUR booking form (29/10/2026): the dates from the calendar, the details, the summary, then the link to
the booking confirmation; and the days the gîtes are closed on the calendars ---------- */
.lscal-days .is-closed{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(30,46,69,.07) 5px 6px);color:var(--faint);cursor:not-allowed}
.lscal-days .is-closed b{opacity:.55}
.lscal-legend .is-closed{background:repeating-linear-gradient(135deg,#f6f3ea 0 3px,#d9ddd6 3px 4px);border:1px solid #d9ddd6}
html.dark .lscal-days .is-closed{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.06) 5px 6px)}
.btn.is-off{opacity:.45}
.resa-form{margin-top:6px;scroll-margin-top:110px}
.rf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.rf-grid.rf-dates{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.rf-grid .rf-wide{grid-column:1 / -1}
.resa-form input[type=date]{min-height:46px}
.rf-warn,.rf-err{color:var(--red,#b2382b);font-weight:600;font-size:14px;line-height:1.5}
.rf-sum{border:1px solid var(--rule);border-radius:var(--r);background:var(--bg2,#f1efe7);padding:clamp(16px,2vw,26px);display:grid;gap:10px}
.rf-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px}
.rf-total b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);color:var(--deep)}
html.dark .rf-total b{color:inherit} /* the slate navy vanished on the dark summary (29/10, Juan): the same white as the other amounts */
.rf-lines{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:14px;color:var(--dim)}
.rf-pay{display:grid;gap:6px;margin:0;padding-top:10px;border-top:1px solid var(--rule)}
.rf-pay > div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.rf-pay dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.rf-actions{display:flex;flex-wrap:wrap;gap:10px}
.rf-submit{min-width:200px}
.rf-ok{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);padding:clamp(20px,3vw,36px);display:grid;gap:10px;justify-items:start}
.rf-ok h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.15}
.resa-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#book .resa-form{max-width:980px}
@media (max-width:760px){.rf-grid{grid-template-columns:1fr 1fr}.rf-grid > label:nth-child(-n+3){grid-column:1 / -1}}
@media (max-width:420px){.rf-grid,.rf-grid.rf-dates{grid-template-columns:1fr}}
/* the booking confirmation of a guest */
.bc{padding-top:clamp(110px,12vw,150px)}
.bc-in{max-width:820px;margin:0 auto}
.bc-in > h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.05;margin:6px 0 14px}
.bc-doc{display:grid;gap:clamp(18px,2.4vw,30px)}
/* straight from the booking form (29/10, Juan): thank you + what is left to do, while the booking is pending */
.bc-thanks{margin:0 0 clamp(18px,2.4vw,28px);padding:clamp(16px,2vw,24px);border-radius:var(--r);background:var(--bg2,#eef2ec);border-left:4px solid var(--acc);display:grid;gap:6px;font-size:15.5px;line-height:1.55}
.bc-thanks p{margin:0}
.bc-thanks-h{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.bc-card{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);padding:clamp(18px,2.6vw,34px);display:grid;gap:12px}
.bc-card h2,.bc-cond h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,28px);margin-top:8px}
.bc-dl{display:grid;gap:6px;margin:0}
.bc-dl > div{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:14.5px;line-height:1.5}
.bc-dl dt{color:var(--dim)}
.bc-dl dd{margin:0;word-break:break-word}
@media (max-width:560px){.bc-dl > div{grid-template-columns:1fr;gap:0}}
.bc-cond{border-top:1px solid var(--rule);padding-top:10px;max-height:520px;overflow:auto;font-size:14px;line-height:1.65;color:var(--ink)}
.bc-cond h3{font-weight:700;font-size:14.5px;margin:14px 0 4px}
.bc-cond p{margin:0 0 8px}
.bc-sign{display:grid;gap:12px;justify-items:start;padding:clamp(16px,2vw,24px);border:2px solid var(--field);border-radius:var(--r);background:var(--card)}
.bc-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.bc-check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--field)}
.bc-done{font-size:16px;font-weight:600;color:var(--field);padding:14px 18px;border-radius:var(--r);background:var(--bg2,#eef2ec)}
@media print{.hdr,.ftr,.wa,.chat,.chat-fab,.bc-print,.bc-sign{display:none!important}.bc{padding-top:0}.bc-cond{max-height:none;overflow:visible}}
/* James's « France connections » map, redrawn (29/10/2026): Find us and Our facilities › Celebrations */
.svc-map{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:6px 12px 6px 6px;border:1px solid rgba(246,243,234,.4);border-radius:10px;background:rgba(20,30,42,.35);font-size:12px;letter-spacing:.04em;cursor:pointer}
.svc-map img{width:44px;height:auto;border-radius:6px;background:#f6f3ea;display:block}
.svc-map:hover,.svc-map:focus-visible{border-color:#f6f3ea}
.tile-more{display:none!important}
.walk-foto{margin:clamp(22px,3vw,40px) auto 0;max-width:760px}
/* a section added from the panel (5/11, James) */
.plus-centro{text-align:center}
.plus-in{max-width:980px;margin:0 auto}
.plus-in h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,52px);line-height:1.1;margin:0 0 16px}
.plus-in .body-txt{max-width:66ch;margin:0 auto 14px}
.plus-fotos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,2.4vw,32px);margin-top:clamp(18px,2.6vw,32px)}
.plus-fotos figure{margin:0;flex:0 1 auto;max-width:min(46%,440px)}
.plus-n1 figure{max-width:min(100%,640px)}
.plus-fotos img{width:100%;height:auto;display:block;border-radius:var(--r)}
@media (max-width:620px){.plus-fotos figure{max-width:100%}}
.eng-disc{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--field)}
/* the fire basket of the old factory (5/11, James): once on each page's header. 6/11 (Juan: above the title it hardly
showed): bigger, on the right against the edge, level with the bottom of the title; the title keeps clear of it.
On a phone, as on 5/11: small, above the label, on the left (Juan, 6/11). */
.phero-mark{padding-right:calc(var(--pad) + clamp(120px,11vw,176px) + 28px)}
.basket{position:absolute;right:var(--pad);bottom:clamp(30px,5vh,56px);display:block;width:clamp(120px,11vw,176px);height:auto;aspect-ratio:84/39;margin:0;background:#fff;opacity:.96;-webkit-mask:url(../img/fire-basket.png) right bottom/contain no-repeat;mask:url(../img/fire-basket.png) right bottom/contain no-repeat}
@media (max-width:620px){
.phero-mark{padding-right:var(--pad)}
.basket{position:static;width:84px;height:39px;aspect-ratio:auto;margin:0 0 8px;-webkit-mask-position:left center;mask-position:left center}
}
/* the leaves growing out of the L of « La », as on their signs (5/11, James): only on the main title of the Home */
.hero2-title .l1{display:block;width:fit-content;margin-inline:auto;position:relative}
/* 11/11 (James): white, and the base of the bunch comes out of the top left of the L, as on their logo */
.hero2-title .l1::before{content:"";position:absolute;left:-.36em;top:-.36em;width:.8em;height:.615em;background:#fff;-webkit-mask:url(../img/leaves.svg) center/contain no-repeat;mask:url(../img/leaves.svg) center/contain no-repeat;pointer-events:none}
.fr-map{margin:clamp(26px,3.5vw,48px) auto 0;max-width:1180px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center}
.fr-map-svg svg{width:100%;height:auto;display:block;border-radius:calc(var(--r) * 1.6)}
.fr-map figcaption h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.1;margin:6px 0 16px}
.fr-map-ley{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;line-height:1.5;color:var(--ink)}
.fr-map-ley li{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center}
.fr-map-ley i{height:0;border-top:3px dashed #3f7a12}
.fr-map-ley .mk-rail{border-top:3px dotted #1e2e45}
.fr-map-ley .mk-air{border-top:2px dashed #1e2e45}
html.dark .fr-map-ley .mk-car{border-top-color:#9fcf6a} /* the navy train and plane marks vanished on the dark page (29/10) */
html.dark .fr-map-ley .mk-rail,html.dark .fr-map-ley .mk-air{border-top-color:#dfe5ec}
.fr-map-wrap .fr-map{margin-top:0}
@media (max-width:900px){.fr-map{grid-template-columns:1fr}}
/* the reviews (29/10/2026): the Google and Facebook reviews with their logos */
.rev-logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(12px,1.6vw,20px)}
.rev-logo{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .3s var(--ease)}
.rev-logo:hover{border-color:var(--field)}
.rev-logo svg{width:24px;height:24px;flex:none}
.scores > div{display:block;padding:clamp(18px,2.4vw,30px) clamp(14px,2vw,26px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.small-book{text-align:center;padding:clamp(26px,3.5vw,48px) 16px}
/* Around us: the website of a place and the buttons of Bike & Hike (29/10/2026, panel › Links) */
.far-link{display:inline-block;margin-left:6px;font-weight:600;color:var(--field);white-space:nowrap}
.app-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn-app{font-size:12px}
/* the group message of Book a gîte (29/10/2026) */
.res-group{margin-bottom:clamp(14px,2vw,24px)}
/* 12/11 (James: « All gîtes have board games… » was faint and small on a phone): the note under the Play list reads as text */
.fac-all{margin-top:18px;max-width:62ch;font-size:clamp(15px,1.2vw,16.5px);line-height:1.6;font-weight:600;color:var(--ink)}
/* 12/11/2026, going live: the cookie notice (Google Analytics only with consent) and « Cookie preferences » in the footer */
.ftr-ck{color:inherit;opacity:.72;font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:pointer}
.ftr-ck:hover,.ftr-ck:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
.ck{position:fixed;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:85;width:min(440px,calc(100vw - 28px));background:var(--card);color:var(--ink);border:1px solid rgba(27,36,48,.14);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.22);padding:18px 20px;font-size:14px;line-height:1.55}
html.dark .ck{border-color:rgba(246,243,234,.16)}
.ck[hidden]{display:none}
.ck p{margin:0 0 14px}
.ck a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ck-btns{display:flex;gap:10px}
.ck-btns .btn{flex:1;text-align:center;cursor:pointer}
@media (max-width:760px){.ck{left:10px;right:10px;bottom:10px;width:auto}html.ck-on .chat-btn{visibility:hidden}}
/* ============================================================
THE HOME LIKE SIMONE'S (22/10/2026, Juan: "quiero que el home sea más como el de Simone"): the hero
of findrealestate.com (hero.js), the text that darkens as you scroll, the photos in arrows, the dark
accordion with the giant words and the three steps to book (efectos.js). Appended to site.css by
_build/tema.py after site-extra.css.
============================================================ */
.hero2{position:relative;height:400vh;margin-bottom:-100vh;margin-top:-72px;--wm-w:min(36vw,500px);--wm-h:calc(var(--wm-w) * 80 / 104);--wm-c:42svh;visibility:hidden}
.hero2-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#17261f}
.hero2-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero2-sky{position:absolute;inset:0;transform-origin:50% 42%;will-change:transform}
.hero2-sky img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.hero2-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(12,22,18,.58),rgba(12,22,18,0) 72%),linear-gradient(to bottom,rgba(20,32,26,.5),rgba(20,32,26,.22) 38%,rgba(20,32,26,.34) 70%,rgba(20,32,26,.7))}
.hero2-comp{position:absolute;inset:0;z-index:2;opacity:0;-webkit-mask-image:url("../logo.svg");mask-image:url("../logo.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% calc(var(--wm-c) - var(--wm-h) / 2);mask-position:50% calc(var(--wm-c) - var(--wm-h) / 2);-webkit-mask-size:var(--wm-w) var(--wm-h);mask-size:var(--wm-w) var(--wm-h)}
.hero2-logo{position:absolute;top:calc(var(--wm-c) - var(--wm-h) / 2);left:calc(50% - var(--wm-w) / 2);width:var(--wm-w);height:var(--wm-h);z-index:5;opacity:0}
.hero2-logo svg{width:100%;height:100%;overflow:visible;display:block}
.hero2-logo path{fill:none;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.hero2-wordmark{position:absolute;left:0;right:0;top:calc(var(--wm-c) + var(--wm-h) / 2 + 22px);z-index:5;margin:0;text-align:center;opacity:0;color:#fff;font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;font-size:clamp(17px,2.3vw,32px);line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 20px rgba(0,0,0,.55)}
.hero2-wordmark small{display:block;font-size:.5em;letter-spacing:.46em;text-indent:.46em;opacity:.85}
.hero2-haze{position:absolute;left:0;right:0;bottom:0;height:40vh;z-index:4}
.hero2-haze img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hero2-stick .hero2-haze{transform:translateY(70%)}
.hero2-content{position:relative;z-index:5;display:grid;align-items:center;height:100%;padding:0 var(--pad) 16vh;text-align:center;color:#fff}
.hero2-content .lbl{color:rgba(255,255,255,.92);margin-bottom:clamp(14px,2vw,22px);text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.6)}
.hero2-title h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,10.5vw,156px);line-height:.95;letter-spacing:-.02em;color:#fff;margin:0 auto;max-width:12ch;text-shadow:0 1px 2px rgba(0,0,0,.6),0 4px 22px rgba(0,0,0,.6),0 14px 60px rgba(0,0,0,.45)}
.hero2-title .l1{display:block}
.hero2-title .l2{display:block;font-size:.3em;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;margin-top:.3em;opacity:.92}
.hero2-text{margin:clamp(16px,2.2vw,26px) auto 0;max-width:42ch;font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,28px);line-height:1.3;color:#fff;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 16px rgba(0,0,0,.6)}
.hero2-actions{margin-top:clamp(22px,3vw,40px);display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero2-hint{position:absolute;left:0;right:0;bottom:4vh;z-index:5;display:grid;justify-items:center;gap:4px;margin:0;color:rgba(255,255,255,.8);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
.hero2-hint svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:hero2bob 1.8s ease-in-out infinite}
@keyframes hero2bob{50%{transform:translateY(6px)}}
.hero2-overlap{position:absolute;top:0;left:0;right:0;bottom:100vh;pointer-events:none}
.hero2-overlap .hero2-haze{height:62vh;transform:none}
.hero2-overlay{position:absolute;left:0;right:0;bottom:0;height:32vh;z-index:3;background:linear-gradient(to bottom,rgba(246,243,234,0),var(--bg))}
/* everything after the hero goes over its last stretch (margin-bottom -100vh), with its own background */
.hero2 ~ .sec,.hero2 ~ section{position:relative;z-index:2;background-color:var(--bg)}
.hero2 ~ .sec-alt{background-color:var(--bg2)}
.hero2 ~ .band-field{background-color:var(--field)}
.hero2 ~ .sec-svc{background-color:var(--deep)}
.hero2 ~ .cta{background-color:var(--deep)}
@media (max-width:1000px){.hero2{margin-top:-64px}}
@media (max-width:760px){.hero2{height:320vh;--wm-w:66vw;--wm-c:40svh}.hero2-content{padding-bottom:24vh}.hero2-haze{height:40vh}.hero2-logo path{stroke-width:1.8}.hero2-wordmark{font-size:16px}}
@media (max-width:620px){.hero2-title h1{font-size:clamp(46px,14vw,66px)}.hero2-text{font-size:17px}.hero2-actions .btn{width:100%;max-width:320px}}
@media (prefers-reduced-motion:reduce){.hero2{height:100vh;height:100svh;margin-bottom:0;visibility:visible}.hero2-stick .hero2-haze{transform:translateY(40%)}.hero2-overlap{display:none}}
/* the words that darken with the scroll */
[data-scrub-text] .w{display:inline-block;white-space:pre-wrap}
.why-txt .em,.arrows-p .em{color:var(--faint)}
/* why: the text, the photo that breathes, the figures */
.sec-why{padding-top:clamp(64px,9vw,130px)}
.why-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);align-items:start}
.why-txt{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.3vw,50px);line-height:1.12;letter-spacing:-.02em;text-wrap:pretty}
.why-photo{margin:clamp(30px,5vw,72px) 0 0;width:100%;aspect-ratio:16/9;max-height:78vh;overflow:hidden;border-radius:var(--r);background:var(--bg2)}
.why-photo figure{margin:0;width:100%;height:100%}
.why-photo img{width:100%;height:100%;object-fit:cover;display:block;animation:whykb 22s ease-in-out infinite alternate}
@keyframes whykb{from{transform:scale(1)}to{transform:scale(1.09)}}
.sec-why .facts-strip{margin-top:clamp(30px,5vw,72px)}
@media (max-width:820px){.why-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.why-photo img{animation:none}}
/* more than a place to sleep: the four photos in arrows */
.sec-arrows{text-align:center;--aw:clamp(84px,24vw,346px)}
.arrows-h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,60px);line-height:1.05;letter-spacing:-.02em;max-width:22ch;margin:0 auto clamp(26px,4vw,52px)}
.arrows{display:flex;justify-content:center;margin-left:calc(var(--aw) * .194)}
.arrow{flex:0 0 auto;width:var(--aw);aspect-ratio:346/440;margin-left:calc(var(--aw) * -.194);-webkit-mask:url('data:image/svg+xml,') center / 100% 100% no-repeat;mask:url('data:image/svg+xml,') center / 100% 100% no-repeat}
.arrow img{width:100%;height:100%;object-fit:cover;display:block}
.arrows-p{max-width:46ch;margin:clamp(26px,4vw,52px) auto 0;font-size:clamp(18px,2vw,28px);line-height:1.3;letter-spacing:-.01em;font-weight:500;text-wrap:balance}
/* three ways to enjoy it: the dark accordion with the giant word and the photo on hover */
.sec-svc{--bg:var(--deep);--bg2:#2b4360;--card:#2b4360;--ink:#fff;--dim:rgba(255,255,255,.84);--faint:rgba(255,255,255,.56);background:var(--deep);color:#fff;padding-left:0;padding-right:0}
.svc-head{padding:0 var(--pad) clamp(28px,4vw,60px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);align-items:start}
.svc-head .lbl{color:var(--wheat)}
.svc-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,60px);line-height:1.02;letter-spacing:-.02em;color:#fff}
.svc-items{border-bottom:1px solid rgba(255,255,255,.18)}
.svc-item{position:relative;display:block;overflow:hidden;border-top:1px solid rgba(255,255,255,.18);color:#f6f3ea;text-decoration:none}
.svc-bg{position:absolute;inset:0;opacity:0;background:#2b4360;transform:scale(1.05);clip-path:inset(100% 0 0 0);transition:opacity .4s,transform 4s cubic-bezier(.5,1,.89,1),clip-path 1s cubic-bezier(.16,1,.3,1)}
.svc-bg img{width:100%;height:100%;object-fit:cover;display:block}
.svc-item:hover .svc-bg,.svc-item:focus-visible .svc-bg{opacity:.42;transform:scale(1);clip-path:inset(0 0 0 0)}
.svc-in{position:relative;z-index:1;display:grid;grid-template-columns:46px minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(16px,4vw,64px);align-items:center;padding:clamp(34px,5vw,72px) var(--pad)}
.svc-in i{width:30px;height:30px;border:1px solid rgba(246,243,234,.5);border-radius:50%;display:grid;place-content:center;font-style:normal;font-size:12px;align-self:start}
.svc-p{font-size:clamp(15px,1.3vw,19px);line-height:1.45;font-weight:500;color:#f6f3ea;max-width:36ch}
.svc-t{display:block;font-family:var(--serif);font-weight:400;font-size:1.2em;line-height:1.2;margin-bottom:8px;color:var(--wheat)}
.why-p{margin-top:14px;max-width:40ch}
.svc-link{display:block;margin-top:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--wheat)}
.svc-word{font-family:var(--serif);font-weight:400;font-size:clamp(50px,10vw,160px);line-height:.95;letter-spacing:-.03em;color:#fff}
@media (max-width:820px){.svc-head{grid-template-columns:1fr}.svc-in{grid-template-columns:1fr;gap:14px}.svc-in i{display:none}.svc-word{order:-1;font-size:clamp(44px,13vw,80px)}}
/* how to book: three numbered cards (.steps3: .hows/.how are the cards of Find us) */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.step3{padding:clamp(18px,2.4vw,30px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.step3 b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1;color:var(--ember);margin-bottom:12px}
.step3 h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.05;margin-bottom:8px}
.step3 .body-txt{font-size:14.5px;max-width:none}
@media (max-width:820px){.steps3{grid-template-columns:1fr}}
/* more than a place to sleep (29/10/2026): James's photos in a soft collage instead of the arrows */
.more-collage{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:clamp(10px,1.4vw,18px);max-width:1180px;margin:0 auto;text-align:left}
.more-fig{margin:0;position:relative;border-radius:calc(var(--r) * 1.6);overflow:hidden;background:var(--bg2)}
.more-fig a{display:block;height:100%}
.more-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.more-fig a:hover img{transform:scale(1.035)}
.more-fig figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(246,243,234,.88);color:var(--deep);font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.2;pointer-events:none}
.more-1{grid-row:1 / span 2;aspect-ratio:4 / 5}
.more-2,.more-3{aspect-ratio:4 / 3}
.more-4{grid-column:2 / span 2;aspect-ratio:16 / 8}
.more-n3 .more-3{grid-column:2 / span 2;aspect-ratio:16 / 8}
@media (max-width:760px){
.more-collage{grid-template-columns:1fr 1fr}
.more-1{grid-column:1 / -1;grid-row:auto;aspect-ratio:4 / 3}
.more-4{grid-column:1 / -1;aspect-ratio:16 / 10}
.more-fig figcaption{font-size:12.5px;left:8px;bottom:8px;padding:4px 10px}
}
/* the boxes of « Everything for… » open their photo (29/10): a pointer, and the four buttons under them */
.tiles.ideas-lb .tile{cursor:zoom-in}
.fac-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}