/* Wanderlust B&B — proposta di restyling della home (duepuntip, 03/10/2026).
   Marchio del cliente: legno scuro, crema, un rosa-salmone per le azioni,
   il bronzo delle loro grafiche Instagram per i dettagli. Titoli in un
   serif elegante (Cormorant Garamond), testi in un sans pulito (Jost). */
:root{
  --crema:#f6efe6;
  --crema-2:#ece2d3;
  --legno:#2e241d;
  --legno-2:#4a3c31;
  --testo:#2e241d;
  --testo-2:#5a4a3d;
  --bronzo:#8a6236;
  --bronzo-chiaro:#c9a77c;
  --salmone:#e3957c;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --margine:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{background:var(--crema);scroll-behavior:smooth;overflow-x:clip}
body{margin:0;color:var(--testo);font:300 17px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.scorre-scuro{color:var(--crema)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(38px,5.2vw,76px);text-wrap:balance}
h2 em,h1 em{font-style:italic;font-weight:400;color:var(--bronzo)}
body.scorre-scuro h2 em{color:var(--bronzo-chiaro)}
p{margin:0}
.salta{position:absolute;left:-999px}.salta:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 14px}
.occhiello{font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronzo);margin-bottom:22px}
/* il trattino prima dell'occhiello segna l'inizio di ogni sezione (non nelle aperture centrate) */
.benvenuto-testo .occhiello,.camere-intro .occhiello,.colazione .occhiello,.api-intro .occhiello,.sezione-testa .occhiello,.noi .occhiello,.intorno-testa .occhiello,.social-testo .occhiello{position:relative;padding-left:46px}
.benvenuto-testo .occhiello::before,.camere-intro .occhiello::before,.colazione .occhiello::before,.api-intro .occhiello::before,.sezione-testa .occhiello::before,.noi .occhiello::before,.intorno-testa .occhiello::before,.social-testo .occhiello::before{content:'';position:absolute;left:0;top:.7em;width:30px;height:1px;background:currentColor}
body.scorre-scuro .occhiello{color:var(--bronzo-chiaro)}
a:focus-visible,button:focus-visible{outline:2px solid var(--salmone);outline-offset:4px}


/* Avatar WhatsApp fisso (desktop, Andrea 04/10): foto tonda di Daniela in basso a destra, con un pallino
   verde che pulsa in alto a destra e dentro il logo di WhatsApp. Da telefono resta la barra. */
.cta-avatar{position:fixed;right:var(--margine);bottom:65px;z-index:61;display:block;width:64px;height:64px;text-decoration:none;transition:transform 300ms var(--ease)}
.cta-avatar:hover{transform:translateY(-3px)}
.cta-avatar-foto{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--crema),0 0 0 4px rgb(46 36 29 / .12),0 14px 34px rgb(20 14 10 / .28)}
.cta-avatar-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cta-avatar-punto{position:absolute;top:-4px;right:-4px;width:24px;height:24px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--crema)}
.cta-avatar-punto::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid #25d366;opacity:0;animation:pulsa 2.4s ease-out infinite}
@keyframes pulsa{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.cta-avatar-punto::before{animation:none}}

/* CTA fisse: da desktop WhatsApp in basso a destra, da telefono barra piena WhatsApp + Chiama */
.cta-fissa{position:fixed;right:24px;bottom:24px;z-index:61;display:flex;gap:10px}
.cta-fissa a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--salmone);color:var(--legno);text-decoration:none;font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 30px rgba(46,36,29,.28);transition:transform 300ms var(--ease),background 300ms}
.cta-fissa a:hover{background:#ecaa94;transform:translateY(-2px)}
.cta-fissa .cta-tel{display:none}
.cta-fissa{display:none}            /* da desktop al suo posto c'è l'avatar */

/* pulsanti e link */
.pulsante{display:inline-flex;align-items:center;gap:10px;background:var(--salmone);color:var(--legno);text-decoration:none;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:18px 30px;border-radius:999px;transition:transform 300ms var(--ease),background 300ms}
.pulsante:hover{background:#ecaa94;transform:translateY(-2px)}
.pulsante-piccolo{padding:12px 20px;font-size:11px}
.link-chiaro,.link-scuro{font:400 14px/1 var(--sans);letter-spacing:.08em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.link-chiaro{color:#fff}
.link-scuro{color:var(--testo);display:inline-block;margin-top:28px}

/* barra */
.barra{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--margine);color:#fff;transition:background 500ms var(--ease),padding 500ms var(--ease),color 500ms}
.barra.solida{background:rgb(246 239 230 / .94);backdrop-filter:blur(10px);color:var(--testo);padding-block:10px;box-shadow:0 1px 0 rgb(46 36 29 / .08)}
.barra-menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);font:400 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.barra-menu a{text-decoration:none}
.barra-menu a:not(.pulsante):hover{opacity:.7}
.barra-dx{justify-content:flex-end}
.barra-logo img{width:clamp(96px,8vw,128px);transition:width 500ms var(--ease),filter 500ms}
.barra.solida .barra-logo img{width:72px;filter:brightness(.25) sepia(.4)}
.lingue{display:inline-flex;gap:10px;font-size:12px;opacity:.85}
.ico{display:inline-block;vertical-align:middle;flex:none}
.barra-social{display:inline-flex;gap:14px;align-items:center}
.barra-social a{display:inline-flex;opacity:.9}
.barra-social a:hover{opacity:.6}
.barra-social-mobile{display:none}
.lingue b{font-weight:500;border-bottom:1px solid currentColor}
.barra-apri{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:inherit;position:relative}
.barra-apri span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform 300ms var(--ease)}
.barra-apri span:first-child{top:17px}.barra-apri span:last-child{top:26px}
.barra-apri[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.barra-apri[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu-mobile{position:fixed;inset:0;z-index:45;background:var(--legno);color:var(--crema);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;font:400 34px/1.1 var(--serif)}
.menu-mobile[hidden]{display:none}
.menu-mobile a{text-decoration:none}
.menu-mobile .lingue{font:400 14px var(--sans);margin-top:18px}

/* 1 · apertura */
.eroe{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;isolation:isolate}
.eroe .scorre-fondo img,.chiusura .scorre-fondo img{width:100%;height:100%;object-fit:cover}
.eroe-velo{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgb(20 14 10 / .55) 0%,rgb(20 14 10 / .18) 40%,rgb(20 14 10 / .5) 100%)}
.eroe-testo{position:relative;z-index:1;padding:120px var(--margine) 90px;max-width:1000px}
.eroe .occhiello{color:#f3dcc7}
.eroe h1{font-size:clamp(52px,8.4vw,128px);font-weight:400;text-shadow:0 2px 30px rgb(0 0 0 / .25)}
.eroe h1 em{color:#f6d6c4}
.eroe-sotto{margin:26px auto 0;max-width:620px;text-wrap:balance;font-size:clamp(17px,1.5vw,20px);color:#fbf3ea}
.eroe-azioni{display:flex;flex-wrap:wrap;gap:22px 32px;justify-content:center;align-items:center;margin-top:40px}
@keyframes scendi{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 2 · benvenuto */
.benvenuto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center;padding:clamp(100px,14vw,200px) var(--margine)}
.benvenuto h2{font-size:clamp(34px,4vw,58px);margin-bottom:28px}
.benvenuto-testo>p:not(.occhiello){color:var(--testo-2);max-width:520px}
.benvenuto-foto{margin:0 auto;border-radius:6px;overflow:hidden}
.benvenuto-foto.slider{overflow:visible;border-radius:0;width:100%}
.benvenuto-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.benvenuto-foto.slider img{aspect-ratio:4/3}

/* striscia */
.striscia{border-block:1px solid rgb(46 36 29 / .14);padding:22px 0;font:400 clamp(30px,4vw,54px)/1 var(--serif);font-style:italic;color:var(--legno-2)}
.striscia .solo-fila{gap:44px;align-items:center}
.striscia i{font-style:normal;font-size:.5em;color:var(--bronzo)}

/* 3 · camere (pista) */
.camere{padding-top:clamp(80px,10vw,140px);background:var(--crema-2);border-top:1px solid rgba(46,36,29,.12)}
.camere .scorre-fermo,.esperienze .scorre-fermo{display:flex;flex-direction:column;justify-content:center}
.camere-intro{padding-inline:var(--margine);max-width:none;margin-bottom:40px}
.camere-intro h2{white-space:nowrap;font-size:clamp(30px,3.6vw,56px)}
.camere-intro>p:last-child{color:var(--testo-2);margin-top:20px;max-width:480px}
.camere .scorre-pista{gap:28px;padding-inline:var(--margine);padding-block:30px}
.camera,.esperienza{background:#fff;border-radius:10px;box-shadow:0 12px 34px rgba(46,36,29,.09);overflow:hidden;padding-bottom:26px}
.camera>:not(figure),.esperienza>:not(figure){margin-inline:24px}
.camera{width:clamp(280px,30vw,440px)}
.camera figure{margin:0 0 22px;overflow:hidden}
.camera img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 900ms var(--ease)}
.camera:hover img{transform:scale(1.04)}
.camera-tipo{font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronzo);margin-bottom:10px}
.camera h3{font-size:clamp(28px,2.4vw,36px);margin-bottom:12px}
.camera p:last-child{color:var(--testo-2);font-size:16px}
.camera-servizi{align-self:stretch;background:var(--legno);color:var(--crema);border-radius:10px;padding:40px 36px;display:flex;flex-direction:column;justify-content:center;box-shadow:none}
.camera-servizi>*{margin-inline:0}
.camera-servizi h3{color:var(--crema);margin-bottom:22px}
.camera-servizi ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.camera-servizi li{display:flex;align-items:center;gap:14px}
.camera-servizi .ico{color:var(--bronzo-chiaro)}

/* 4 · colazione (apre) */
.colazione-apre .scorre-quadro{position:relative}
.colazione-apre .scorre-quadro img{width:100%;height:100%;object-fit:cover}
.apre-testo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--margine);color:#fff;background:linear-gradient(0deg,rgb(20 14 10 / .6),transparent 55%)}
.apre-testo .occhiello{color:#f3dcc7}
.apre-testo h2 em{color:#f6d6c4}
.colazione{padding:clamp(90px,12vw,170px) var(--margine);border-top:1px solid rgba(46,36,29,.12)}
.colazione-griglia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.colazione-testo .grande{font:400 clamp(26px,2.6vw,38px)/1.3 var(--serif);margin-bottom:30px}
.colazione-testo>p:last-child{color:var(--testo-2);max-width:520px}
.colazione-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:center}
.colazione-foto img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px}
.colazione-foto img:nth-child(2){aspect-ratio:2/3.5}

/* 5 · firma (sotto le citazioni) */
.firma{font:500 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronzo)}
body.scorre-scuro .firma{color:var(--bronzo-chiaro)}

/* 6 · api (tinta + mosaico) */
.api{padding:clamp(110px,14vw,200px) 0 clamp(90px,12vw,160px)}
.api-intro{padding-inline:var(--margine);max-width:980px;margin-bottom:60px}
.api-intro h2{font-size:clamp(34px,4.4vw,64px)}
/* alveare: nove esagoni stondati a punta in su, 3+3+3 sfalsati e incastrati. Un'unità (--u)
   è mezza larghezza di esagono: 7 unità per fila da desktop; un esagono a punta è alto
   1,1547 volte la larghezza e la fila sotto parte a 3/4 dell'altezza. Il ritaglio è fisso
   (clipPath #esagono in pagina): la foto scelta parte a tutto schermo già esagonale e
   rimpicciolendosi scopre le altre. */
.api .scorre-mosaico{--u:min(calc(min(1180px,92vw) / 7),calc(80svh / 5.77));display:grid;grid-template-columns:repeat(7,var(--u));grid-template-rows:repeat(3,calc(var(--u) * 1.732));align-items:start;width:calc(var(--u) * 7);height:calc(var(--u) * 5.78)}
.api .scorre-tessera{margin:0;overflow:hidden;width:96%;justify-self:center;aspect-ratio:1/1.1547;clip-path:url(#esagono)}
.api .scorre-tessera:nth-child(1){grid-area:1/1/2/3}
.api .scorre-tessera:nth-child(2){grid-area:1/3/2/5}
.api .scorre-tessera:nth-child(3){grid-area:1/5/2/7}
.api .scorre-tessera:nth-child(4){grid-area:2/4/3/6}
.api .scorre-tessera:nth-child(5){grid-area:2/2/3/4}
.api .scorre-tessera:nth-child(6){grid-area:2/6/3/8}
.api .scorre-tessera:nth-child(7){grid-area:3/1/4/3}
.api .scorre-tessera:nth-child(8){grid-area:3/3/4/5}
.api .scorre-tessera:nth-child(9){grid-area:3/5/4/7}
.api .scorre-tessera img{width:100%;height:100%;object-fit:cover}
.api .scorre-fermo{display:grid;place-items:center}
.api-racconto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);padding:80px var(--margine) 0;max-width:1300px;margin:auto;color:rgb(246 239 230 / .88)}
.api-racconto strong{font-weight:500;color:var(--crema)}

/* 7 · esperienze */
.esperienze{background:var(--crema-2);border-top:1px solid rgba(46,36,29,.12);padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(70px,9vw,130px)}
.sezione-testa{max-width:900px;padding-inline:var(--margine);margin-bottom:40px}
.esperienze .scorre-pista{gap:28px;padding-inline:var(--margine);padding-block:30px}
.esperienza{width:clamp(300px,32vw,460px)}
.esperienza-contatto{align-self:stretch;background:var(--legno);color:var(--crema);border-radius:10px;padding:40px 36px;display:flex;flex-direction:column;justify-content:center;box-shadow:none}
.esperienza-contatto>*{margin-inline:0}
.esperienza-contatto h3{color:var(--crema)}
.esperienza-contatto p:last-of-type{color:var(--crema-2)}
.esperienza-contatto .esperienza-data{color:var(--bronzo-chiaro)}
.esperienza-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:26px}
.esperienza-azioni .link-chiaro{color:var(--crema)}
.esperienza figure{margin:0 0 22px;overflow:hidden}
.esperienza img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 900ms var(--ease)}
.esperienza:hover img{transform:scale(1.04)}
.esperienza-data{font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronzo);margin-bottom:10px}
.esperienza h3{font-size:clamp(26px,2.2vw,32px);margin-bottom:10px}
.esperienza p:last-child{color:var(--testo-2);font-size:16px}

/* testi in due misure: da telefono la versione breve */
.solo-telefono{display:none}

/* 8 · motivi (pila) */
/* --scorre-coda: lo spazio dopo l'ultima scheda; il minimo per farla arrivare in quota è 100vh − quota − altezza scheda
   (80vh): 10vh. Si tiene appena sopra, così dopo «Sentirsi a casa» si riparte subito (Andrea, 04/10). */
.motivi{padding:clamp(40px,6vw,90px) var(--margine) 40px;--scorre-quota:10vh;--scorre-coda:12vh}
.motivo{position:relative;height:80vh;border-radius:8px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.motivo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motivo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgb(20 14 10 / .72),rgb(20 14 10 / .1) 60%)}
.motivo-testo{position:relative;z-index:1;padding:clamp(28px,5vw,70px);max-width:720px}
.motivo .numero{font:400 italic 24px var(--serif);color:#f6d6c4;margin-bottom:6px}
.motivo h2{margin-bottom:16px}
.motivo-testo>p:last-child{color:#f7ece2;font-size:18px}

/* 9 · chi siamo (tinta) */
.noi{background:var(--legno);color:var(--crema);display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(40px,7vw,120px);align-items:center;padding:clamp(110px,14vw,200px) var(--margine)}
.noi-foto{margin:0;border-radius:6px;overflow:hidden;max-width:360px}
.noi-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.noi .occhiello,.noi .firma{color:var(--bronzo-chiaro)}
.noi blockquote{margin:0 0 30px;font:400 italic clamp(32px,3.8vw,58px)/1.15 var(--serif)}


/* 2b · slider del territorio (scroll-snap, pallini da app.js) */
.slider{position:relative;align-self:start}
.slider-pista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:6px}
.slider-pista::-webkit-scrollbar{display:none}
.slider-pista>figure{flex:none;width:100%;scroll-snap-align:start;margin:0;border-radius:6px;overflow:hidden;position:relative}
.slider-pista img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.slider-pista figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;font:400 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgb(20 14 10 / .55),transparent)}
.slider-freccia{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgb(246 239 230 / .88);color:var(--legno);cursor:pointer;box-shadow:0 6px 18px rgb(20 14 10 / .22);transition:background 250ms,transform 250ms var(--ease)}
.slider-freccia:hover{background:var(--salmone);transform:scale(1.06)}
.slider-prima{left:14px}
.slider-dopo{right:14px}
.benvenuto-foto.slider .slider-freccia{top:calc(50% - 22px - 20px)}
.slider-punti{display:flex;justify-content:center;gap:8px;margin-top:14px}
.slider-punti button{width:8px;height:8px;border-radius:50%;border:1px solid var(--bronzo);background:transparent;padding:0;cursor:pointer}
.slider-punti button[aria-selected="true"]{background:var(--bronzo)}

/* 10b · carosello a due file: sopra da sinistra a destra, sotto al contrario */
.carosello{padding:clamp(80px,10vw,140px) 0 clamp(70px,9vw,120px);background:var(--legno);color:var(--crema);overflow:hidden}
.carosello h2,.carosello .occhiello{color:var(--crema)}
.carosello .occhiello{color:var(--bronzo-chiaro)}
.carosello .sezione-testa{margin-bottom:40px}
.carosello .scorre-finestra+.scorre-finestra{margin-top:14px}
/* 6 foto per fila, 5 visibili da desktop: la corsa è di una tessera sola, quindi lenta */
.carosello .scorre-binario{--scorre-passo:14px;padding-inline:20px}
.carosello figure{margin:0;width:calc((100vw - 40px - 4 * 14px) / 5);aspect-ratio:1/1;border-radius:6px;overflow:hidden}
.carosello img{width:100%;height:100%;object-fit:cover;display:block}

/* 12 · seguici: pagina Facebook e contatti */
.social{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start;padding:clamp(100px,12vw,170px) var(--margine);background:var(--crema-2);border-top:1px solid rgba(46,36,29,.12)}
.social h2{font-size:clamp(34px,4vw,58px);margin-bottom:20px}
.social-testo>p:not(.occhiello){color:var(--testo-2);max-width:480px}
.social-link{display:flex;flex-wrap:wrap;gap:22px;margin:28px 0 30px}
.social-link a{display:inline-flex;align-items:center;gap:8px;color:var(--legno);text-decoration:none;font:400 14px/1 var(--sans);letter-spacing:.08em;border-bottom:1px solid currentColor;padding-bottom:4px}
.social-contatti{display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.4}
.social-contatti a{display:inline-flex;align-items:center;gap:12px;color:var(--legno);text-decoration:none;align-self:flex-start}
.social-contatti a span{border-bottom:1px solid rgba(46,36,29,.3);padding-bottom:3px}
.social-contatti .ico{color:var(--bronzo)}
.social-fb{display:flex;justify-content:center}
.social-fb-logo{align-self:center;justify-content:center;padding:40px 0;position:relative}
.social-sciame{position:absolute;inset:0;pointer-events:none;overflow:visible}
.social-notifica{position:absolute;width:var(--misura,20px);height:var(--misura,20px);margin:calc(var(--misura,20px) / -2) 0 0 calc(var(--misura,20px) / -2);color:#c4ae97;opacity:0;animation:notifica 3.4s ease-in-out forwards}
.social-notifica svg{width:100%;height:100%;display:block}
@keyframes notifica{0%{opacity:0;transform:translateY(12px) scale(.7)}25%{opacity:1;transform:translateY(0) scale(1.05)}70%{opacity:.95;transform:translateY(-12px) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.9)}}
.social-logo{width:min(530px,100%);aspect-ratio:600/465;background:#d8c8b6;-webkit-mask:url(img/logo.webp) center/contain no-repeat;mask:url(img/logo.webp) center/contain no-repeat}
.giro-aereo{background:#d8c8b6;padding:clamp(56px,7vw,96px) var(--margine)}
.social-giro-blocco{margin:0;display:flex;flex-direction:column;align-items:center;gap:22px}
.giro-coppia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);width:100%}
.social-giro,.giro-mappa{width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--crema-2);box-shadow:0 14px 34px rgb(46 36 29 / .18)}
.giro-mappa iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.giro-coppia{grid-template-columns:1fr}}
.social-giro video{width:100%;height:100%;object-fit:cover;display:block}
.social-fb iframe{width:540px;max-width:100%;border-radius:6px;background:#fff}

/* 11 · chiusura */
.chiusura{position:relative;min-height:90svh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;isolation:isolate}
.chiusura-velo{position:absolute;inset:0;background:rgb(20 14 10 / .55)}
.chiusura-testo{position:relative;padding:100px var(--margine)}
.chiusura .occhiello{color:#f3dcc7}
.chiusura h2 em{color:#f6d6c4}

/* piede */
.piede{background:var(--legno);color:rgb(246 239 230 / .82);padding:90px var(--margine) 110px;font-size:15px}
.piede-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.piede-logo{width:110px;margin-bottom:18px}
.piede h3{font:500 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronzo-chiaro);margin-bottom:16px}
.piede a{text-decoration:none}
.piede a:hover{color:var(--salmone)}
.piede-fondo{margin-top:60px;padding-top:24px;border-top:1px solid rgb(246 239 230 / .15);font-size:13px;color:rgb(246 239 230 / .75)}
.piede-fondo a{color:var(--salmone)}
.piede-crediti{font-size:12px;color:var(--bronzo-chiaro);opacity:.8;margin-top:28px}
.piede-crediti a{color:inherit}

/* telefono */
/* barra del telefono già da 1320 px (Andrea, 03/10): logo a sinistra, Instagram, Facebook e menu a destra */
@media (max-width:1320px){
  .barra{grid-template-columns:1fr auto auto;gap:6px;padding:12px 20px}
  .barra-menu{display:none}
  .barra-logo{justify-self:start}
  .barra-apri{display:block;justify-self:end}
  .barra-social-mobile{display:inline-flex;gap:12px;margin-right:4px}
}
@media (max-width:900px){
  body{padding-bottom:58px}
  /* hero compatta da telefono (Andrea, 04/10): occhiello e sottotitolo più piccoli, meno aria */
  .eroe-testo{padding:90px 20px 70px}
  .eroe .occhiello{font-size:10px;letter-spacing:.2em;margin-bottom:12px}
  .eroe h1{font-size:clamp(40px,11vw,52px);line-height:1.02}
  .eroe-sotto{font-size:15px;line-height:1.45;margin-top:14px;max-width:300px}
  .eroe-azioni{margin-top:22px}
  .solo-grande{display:none}
  .solo-telefono{display:inline}
  /* contatti come pulsanti da telefono (Andrea, 04/10) */
  .social-contatti{gap:10px}
  .social-contatti a{align-self:stretch;min-height:54px;padding:12px 18px;border-radius:999px;background:#fff;box-shadow:0 8px 24px rgba(46,36,29,.08);font:500 14px/1.3 var(--sans);letter-spacing:.04em}
  .social-contatti a:first-child{background:var(--salmone)}
  .social-contatti a:first-child .ico{color:var(--legno)}
  .social-contatti a span{border-bottom:0;padding-bottom:0}
  .cta-avatar{display:none}
  .cta-fissa{left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;background:var(--legno)}
  .cta-fissa a{min-height:58px;border-radius:0;box-shadow:none;padding:0 12px}
  .cta-fissa a:hover{transform:none}
  .cta-fissa .cta-tel{display:inline-flex;background:var(--legno);color:var(--crema);border-left:1px solid rgba(246,239,230,.18)}
  .benvenuto,.colazione-griglia,.noi,.api-racconto{grid-template-columns:1fr}
  .esperienza{width:78vw}
  .esperienze .scorre-pista{padding-inline:20px !important;scroll-padding-inline:20px}
  .piede-griglia{grid-template-columns:1fr 1fr}
  .camera{width:78vw}
  .camere-intro h2{white-space:normal;font-size:clamp(34px,9vw,44px)}
  .camere-intro{margin-bottom:10px}
  .sezione-testa{margin-bottom:10px}
  .camere .scorre-pista,.esperienze .scorre-pista{padding-block:16px 30px;align-items:flex-start}
  .camere .scorre-pista{padding-inline:20px !important;scroll-padding-inline:20px}
  .api .scorre-mosaico{--u:calc(94vw / 6);grid-template-columns:repeat(6,var(--u));grid-template-rows:repeat(4,calc(var(--u) * 1.732));width:calc(var(--u) * 6);height:calc(var(--u) * 7.52)}
  .api .scorre-tessera:nth-child(5){grid-area:1/2/2/4}
  .api .scorre-tessera:nth-child(1){grid-area:1/4/2/6}
  .api .scorre-tessera:nth-child(2){grid-area:2/1/3/3}
  .api .scorre-tessera:nth-child(3){grid-area:2/3/3/5}
  .api .scorre-tessera:nth-child(4){grid-area:2/5/3/7}
  .api .scorre-tessera:nth-child(6){grid-area:3/2/4/4}
  .api .scorre-tessera:nth-child(7){grid-area:3/4/4/6}
  .api .scorre-tessera:nth-child(8){grid-area:4/1/5/3}
  .api .scorre-tessera:nth-child(9){grid-area:4/3/5/5}
  .noi-foto{max-width:62%;margin:0 auto}
  .slider-pista img,.benvenuto-foto.slider img{aspect-ratio:1/1}
  /* da telefono: 3 foto per fila, 2 visibili (Andrea, 04/10) */
  .carosello figure{width:calc((100vw - 40px - 10px) / 2)}
  .carosello figure:nth-child(n+4){display:none}
  .carosello .scorre-binario{--scorre-passo:10px;padding-inline:20px}
  .social{grid-template-columns:1fr}
  .social-fb iframe{width:100%;max-width:540px;height:600px}
  .motivo{height:72vh}
  .motivi{--scorre-coda:20vh}
}
@media (prefers-reduced-motion:reduce){