/* Casa Camelia — design system condiviso (editoriale, warm, elegante) */
:root{
  /* 22/8 — due soli crema, non tre. --bg-warm era #f5f0e8, cioe' a meta'
     strada fra gli altri due: lo scarto con --bg-soft era cosi' piccolo
     che non si leggeva come "sezione diversa" ma come difetto di stampa.
     Ora punta allo stesso valore di --bg-soft. Il nome resta perche' e'
     usato in piu' punti, ma di colori di fondo ne esistono due chiari
     (--bg per la pagina, --bg-soft per le sezioni alterne) e uno scuro
     (--ink per le fasce forti). Se serve una terza tonalita', si cambia
     ritmo o si usa lo scuro, non si inventa un altro crema. */
  --bg:#faf6f1; --bg-soft:#f3ece2; --bg-warm:#f3ece2;
  --card:#ffffff; --line:rgba(44,24,16,.12);
  --ink:#2c1810; --ink2:#4d3a2f; --dim:#6b5b4d; --soft:#8c7b6b;
  --rosa:#b5614f; --rosa-h:#9a4f3f; --gold:#c9a875; --green:#6b8e5a;
  --ease:cubic-bezier(.19,1,.22,1);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bg);color:var(--ink2);line-height:1.7;font-weight:400;overflow-x:hidden}
.serif{font-family:var(--serif)}
h1,h2,h3,h4,.disp{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:88%;max-width:1180px;margin:0 auto}
.over{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;color:var(--rosa)}
.muted{color:var(--dim)}
.italic{font-style:italic;color:var(--rosa)}
em{font-style:italic;color:var(--rosa);font-weight:500}
.center{text-align:center}

.link{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:500;font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;padding-bottom:4px;border-bottom:1px solid var(--ink);transition:.4s var(--ease);color:var(--ink)}
.link:hover{gap:1em;border-color:var(--rosa);color:var(--rosa)}
.link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.link.lt{color:var(--bg);border-color:rgba(250,246,241,.55)}
.link.lt:hover{color:#fff;border-color:#fff}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;padding:1em 2em;border-radius:60px;background:var(--rosa);color:#fff;border:1px solid var(--rosa);transition:.35s var(--ease);cursor:pointer}
.btn:hover{background:var(--rosa-h);border-color:var(--rosa-h);transform:translateY(-1px)}
/* 26/8: nessun pulsante del sito ha piu' un segno dentro. L'avevano
   solo i due pulsanti di invio dei moduli, ed erano gli unici due su
   tutto il sito: la regola resta per chi la volesse rimettere. */
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}

.orn{display:flex;align-items:center;justify-content:center;gap:22px;padding:6px 0}
.orn::before,.orn::after{content:'';height:1px;width:80px;background:var(--line)}
.orn svg{width:26px;height:26px;color:var(--rosa)}

/* ===================== NAV (a pillola) ===================== */
header{position:fixed;top:0;left:0;width:100%;z-index:100;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
header.solid{background:rgba(250,246,241,.96);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
        width:94%;max-width:1360px;margin:0 auto;padding:22px 0;transition:padding .4s var(--ease)}
header.solid .hdr-in{padding:12px 0}

/* marchio piccolo a sinistra: assente sulla home in cima, dove c'e' quello grande nella hero */
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);transition:opacity .4s var(--ease)}
.brand img{width:32px;height:32px;object-fit:contain}
.brand .nm{font-family:var(--serif);font-weight:500;font-size:1.2rem;letter-spacing:.04em;color:var(--rosa);white-space:nowrap}
body.home header:not(.solid) .brand{opacity:0;pointer-events:none}
body:not(.home) header:not(.solid) .brand{color:#fff}
body:not(.home) header:not(.solid) .brand .nm{color:#fff}

.hdr-right{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem);margin-left:auto}
.hnav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem);
  font-family:var(--serif);font-size:1.05rem;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.94)}
.hnav a{position:relative;transition:color .3s}
.hnav a:hover{color:#fff}
.hnav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor}
header.solid .hnav{color:var(--ink2)}
header.solid .hnav a:hover,header.solid .hnav a.on{color:var(--rosa)}

/* 16/9: .lang era la scatola della tendina, tolta. Ora c'e' un solo
   elemento, .lang-sw, definito in fondo al foglio. */
/* 14/9: qui c'erano le regole delle tre sigle IT/EN/DE messe in fila.
   Adesso gli unici <a> dentro .lang sono le voci della tendina, e quelle
   regole (una con tre !important) le riscrivevano sopra rendendo
   invisibile la lingua attiva: fondo tolto e testo bianco su bianco. */

.burger{display:none}
.burger{display:none;width:28px;height:22px;position:relative;background:none;border:none;cursor:pointer;padding:0;flex:0 0 auto}
.burger span{position:absolute;left:2px;right:2px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger span:nth-child(1){top:4px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:16px}
/* 17/9: qui c'erano le tre righe della croce per l'hamburger a TRE
   filetti, dove il centrale si spegne. Ma dal 17/8 i filetti sono due
   (il terzo e' display:none) e questa regola continuava a spegnere il
   SECONDO: aperto si vedeva una riga sola invece della croce. La croce
   la fanno le due righe piu' sotto, quelle che ruotano il primo e il
   secondo in versi opposti. */
.mobmenu{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
body.menu-open{overflow:hidden}
body.menu-open .mobmenu{opacity:1;pointer-events:auto}
.mm-inner{display:flex;flex-direction:column;gap:6px;text-align:center}
.mm-inner a{font-family:var(--serif);font-size:2.4rem;color:var(--ink);font-weight:500;padding:14px;transition:color .3s}
.mm-inner a.on,.mm-inner a:hover{color:var(--rosa);font-style:italic}
@media(max-width:820px){.hnav{display:none}.burger{display:block;width:28px;height:22px;position:relative;background:none;border:none;cursor:pointer;padding:0}.burger span{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}.burger span:nth-child(1){top:3px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:17px}header.solid .burger span{background:var(--ink)}body.menu-open .burger span{background:var(--ink)}}

/* ===================== HERO HOME ===================== */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06)}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,24,16,.40) 0%,rgba(44,24,16,.04) 30%,rgba(44,24,16,0) 58%,rgba(44,24,16,.42) 100%)}
.hero .inner{position:relative;z-index:3;width:88%;max-width:1180px;margin:0 auto;padding-bottom:9vh;color:var(--bg)}
.hero .over{color:#f5d4c8;margin-bottom:26px;opacity:0}
.hero{align-items:center}
/* due riproduttori sovrapposti: mentre uno finisce, l'altro e' gia' partito.
   Il movimento non si ferma mai, quindi non c'e' nessuno stacco da mascherare. */
.hero .bg .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.4s linear}
.hero .bg .clip.on{opacity:1}

.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity 1.5s var(--ease);
  background:radial-gradient(ellipse at 50% 46%,rgba(44,24,16,.52) 0%,rgba(44,24,16,.34) 44%,rgba(44,24,16,.12) 74%),
             linear-gradient(180deg,rgba(44,24,16,.32) 0%,rgba(44,24,16,0) 34%,rgba(44,24,16,.38) 100%)}
.hero.reveal .hero-veil{opacity:1}

.hero{flex-direction:column;justify-content:center}
.hero .inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:none;margin:0;padding:0 6vw 8vh}
.hero-lock{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,34px)}
.hero-lock img,.hero-name,.hero-place,.hero-cta{opacity:0;transform:translateY(20px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.hero.reveal .hero-lock img{opacity:1;transform:none;transition-delay:.05s}
.hero.reveal .hero-name{opacity:1;transform:none;transition-delay:.35s}
.hero.reveal .hero-place{opacity:1;transform:none;transition-delay:.6s}
.hero.reveal .hero-cta{opacity:1;transform:none;transition-delay:.85s}

.hero-lock img{width:clamp(88px,8.5vw,132px);height:auto;filter:drop-shadow(0 3px 26px rgba(44,24,16,.45))}
.hero-name{--ls:clamp(.06em,.9vw,.16em);font-family:var(--serif);font-weight:400;color:#faf6f1;line-height:1;
  font-size:clamp(2.2rem,6.4vw,5rem);letter-spacing:var(--ls);margin-right:calc(-0.5 * var(--ls));text-transform:uppercase;
  text-shadow:0 2px 46px rgba(44,24,16,.34)}
.hero-place{font-family:var(--sans);font-weight:600;font-size:clamp(.6rem,1vw,.74rem);
  letter-spacing:.34em;margin-right:-.17em;text-transform:uppercase;color:var(--gold);margin-top:-6px;
  text-shadow:0 1px 18px rgba(44,24,16,.45)}
.hero-cta{margin-top:clamp(26px,6vh,64px)}
.hero-cta .btn{font-family:var(--serif);font-size:1.08rem;font-weight:500;text-transform:none;
  letter-spacing:.02em;padding:.85em 2.4em;box-shadow:0 14px 34px rgba(44,24,16,.3)}

@media(prefers-reduced-motion:reduce){
  .hero .bg .clip{display:none}
  .hero-veil{opacity:1;transition:none}
  .hero-lock img,.hero-name,.hero-place,.hero-cta{opacity:1;transform:none;transition:none}
}

/* ===================== PAGE HERO ===================== */
.phero{position:relative;padding:220px 0 110px;overflow:hidden;background:var(--ink);color:var(--bg)}
.phero.img .pbg{position:absolute;inset:0}
.phero.img .pbg img{width:100%;height:100%;object-fit:cover;filter:sepia(.32) contrast(1.04) brightness(.48) saturate(.9)}
.phero .inner{position:relative;z-index:2}
.phero .over{color:#f5d4c8;margin-bottom:22px}
.phero h1{color:var(--bg);font-size:clamp(2.6rem,6vw,5rem);font-weight:500;max-width:18ch;line-height:1.05}
.phero h1 em{color:#f5d4c8}
.phero p{color:rgba(250,246,241,.85);max-width:52ch;margin-top:22px;font-size:1.1rem}
.crumbs{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,246,241,.55);margin-bottom:26px;font-weight:600}
.crumbs a:hover{color:#f5d4c8}

/* ===================== reveal ===================== */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0)}

/* ===================== SEZIONI GENERICHE ===================== */
.sec{padding:130px 0}
.sec.soft{background:var(--bg-soft)}
/* Due sezioni con lo stesso fondo, una attaccata all'altra, sommano le
   loro distanze: 130 sotto la prima piu' 130 sopra la seconda fanno 260
   di crema vuota, e a quel punto non sembrano piu' due parti della stessa
   cosa ma due argomenti scollegati.
   Si stringe solo il lato che le guarda, non tutti e due: se no si
   accorciano anche le distanze da quello che sta prima e dopo, che con
   loro non c'entra. Insieme fanno 130, la stessa distanza che c'e'
   normalmente fra due sezioni. */
.sec.unita-sotto{padding-bottom:65px}
.sec.unita-sopra{padding-top:65px}
.sec.warm{background:var(--bg-warm)}
.sec.dark{background:var(--ink);color:var(--bg)}
.sec.dark h2,.sec.dark h3{color:var(--bg)}
.sec.dark em{color:#f5d4c8}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:60px;flex-wrap:wrap}
.shead h2{font-size:clamp(2.2rem,4.8vw,4rem);font-weight:500;margin-top:14px}
.headc{text-align:center;margin-bottom:60px}
.headc h2{font-size:clamp(2.2rem,4.8vw,4rem);font-weight:500;margin-top:12px}
.big-say{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.7vw,2.8rem);line-height:1.32;max-width:20ch;margin:0 auto;color:var(--ink)}

/* ===================== SPLIT ===================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split .im{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft);border-radius:6px}
.split .im img{width:100%;height:108%;object-fit:cover}
.split .im.bw img{filter:grayscale(1) contrast(1.05) brightness(.98) sepia(.14)}
.split .im .cap{position:absolute;bottom:20px;left:20px;color:var(--bg);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;z-index:2;font-weight:600}
.split h2,.gd-in h2{font-size:clamp(2.2rem,5vw,3.8rem);margin:16px 0 22px;font-weight:500;line-height:1.08}
.split p{margin-bottom:18px;max-width:46ch;color:var(--dim)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:44px}}

/* ===================== ROOMS ===================== */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.room{background:var(--card);border-radius:8px;overflow:hidden;transition:.35s var(--ease);border:1px solid var(--line)}
.room:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(44,24,16,.14)}
.room .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.room .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.room:hover .ph img{transform:scale(1.05)}
.room .tag{position:absolute;top:16px;left:16px;background:rgba(250,246,241,.94);color:var(--rosa);padding:.35em .9em;border-radius:60px;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.room .body{padding:1.6rem 1.7rem}
.room h3{font-size:1.7rem;font-weight:500;margin-bottom:.5rem}
.room .desc{color:var(--dim);font-size:.95rem;line-height:1.6;margin-bottom:1.3rem;max-width:32ch}
.room .meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.1rem;border-top:1px solid var(--line)}
.room .price{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--rosa)}
.room .price span{font-family:var(--sans);font-size:.72rem;font-weight:500;color:var(--soft);letter-spacing:.06em;text-transform:uppercase;margin-left:.35em}
.room .amen{display:flex;gap:.7rem;color:var(--soft)}
.room .amen svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
@media(max-width:900px){.rooms{grid-template-columns:1fr}}

/* ===================== GALLERY MASONRY ===================== */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px}
.gal>a{position:relative;overflow:hidden;background:var(--bg-soft);border-radius:4px}
.gal>a img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal>a:hover img{transform:scale(1.06)}
.gal .tall{grid-row:span 2}
.gal .wide{grid-column:span 2}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.gal .tall,.gal .wide{grid-row:auto;grid-column:auto}}

/* ===================== POI ===================== */
.poi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.poi{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.5rem 1.6rem;transition:.3s var(--ease)}
.poi:hover{border-color:var(--rosa);transform:translateY(-3px);box-shadow:0 12px 30px rgba(44,24,16,.08)}
.poi .over{font-size:.65rem;letter-spacing:.24em;margin-bottom:8px}
.poi h3{font-size:1.5rem;font-weight:500;margin-bottom:.35rem}
.poi p{font-size:.9rem;color:var(--dim);line-height:1.55}
@media(max-width:900px){.poi-grid{grid-template-columns:1fr}}

/* ===================== BAND (parallax-safe) ===================== */
.band{position:relative;padding:180px 0;color:var(--bg);text-align:center;overflow:hidden}
.band .bg{position:absolute;inset:0;z-index:0}
.band .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) sepia(.2) contrast(1.05)}
.band .inner{position:relative;z-index:2}
.band .over{color:#f5d4c8;margin-bottom:22px}
.band q{display:block;quotes:none;font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.18;font-weight:500;max-width:22ch;margin:0 auto 40px;color:#fff;font-style:italic}
.band q::before,.band q::after{content:''}
.band .stats{display:flex;gap:56px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.band .stat{padding:0 8px}
.band .stat .n{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.6vw,3.6rem);color:#f5d4c8;line-height:1;letter-spacing:-.02em}
.band .stat .l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-top:10px;color:rgba(250,246,241,.72)}

/* ===================== FORM ===================== */
.form-grid{display:grid;gap:18px;max-width:640px;margin:0 auto}
.form-grid .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:.45em}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:1em 1.1em;background:var(--card);border:1px solid var(--line);border-radius:6px;font-family:var(--sans);font-size:1rem;color:var(--ink);transition:.25s}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgba(181,97,79,.18)}
.form-grid textarea{min-height:140px;resize:vertical}
@media(max-width:640px){.form-grid .row2{grid-template-columns:1fr}}

/* ===================== NEWSLETTER + FOOTER ===================== */
.news{padding:130px 0;text-align:center;background:var(--bg-soft)}
.news .over{margin-bottom:14px}
.news h2{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:500;margin-bottom:18px}
.news p{color:var(--dim);max-width:44ch;margin:0 auto 32px}
.news form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:220px;padding:1em 1.2em;border:1px solid var(--line);border-radius:60px;background:var(--card);font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.news input:focus{outline:none;border-color:var(--rosa)}
.news button{padding:1em 1.9em;border-radius:60px;background:var(--rosa);color:#fff;border:none;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.3s}
.news button:hover{background:var(--rosa-h)}

footer{background:var(--ink);color:rgba(250,246,241,.75);padding:80px 0 30px}
/* Colonne su misura del contenuto e non quattro frazioni fisse: con
   1fr la colonna dei contatti era piu' stretta dell'indirizzo mail, che
   la sfondava e mandava fuori squadra tutta la riga. Adesso le tre
   colonne prendono la larghezza che gli serve e il blocco del nome si
   mangia l'avanzo. */
/* Larghezze decise qui, non dal contenuto. Con le colonne "auto" ognuna
   veniva larga quanto la sua voce piu' lunga: Contatti quanto l'indirizzo
   mail (34 caratteri) e le altre due quanto una parola sola, cosi' il
   piede sembrava tre blocchi capitati li' per caso. Sono misure fisse
   perche' il contenuto di un piede e' fisso: sotto i 900px la griglia si
   spezza comunque e queste non contano piu'. */
footer .fgrid{display:grid;grid-template-columns:minmax(0,1fr) 9rem 17rem 9rem;
  gap:clamp(1.6rem,2.6vw,3rem);margin-bottom:44px;align-items:start}
/* i titoletti delle colonne sono in maiuscoletto e partono piu' in alto
   del nome grande a sinistra: questo li riallinea a occhio */
footer .fcol{padding-top:8px}
footer .fcol .fadr{line-height:1.55;margin-bottom:4px}
footer .nm{font-family:var(--serif);font-size:1.8rem;font-weight:500;color:#fff;margin-bottom:16px}
footer p{font-size:.92rem;line-height:1.7;max-width:34ch;color:rgba(250,246,241,.7)}
footer h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-family:var(--sans);font-weight:600;color:#fff;margin-bottom:16px}
footer .fcol{display:flex;flex-direction:column;gap:8px;font-size:.9rem}
footer .fcol a{color:rgba(250,246,241,.68);transition:.3s}
footer .fcol a:hover{color:#f5d4c8}
footer .fbot{margin-top:24px;padding-top:24px;border-top:1px solid rgba(250,246,241,.12);
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.78rem;color:rgba(250,246,241,.55);flex-wrap:wrap;gap:12px 28px}
footer .fb-sx{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
/* I codici fiscali sono un obbligo di legge, non una nota a pie' di
   pagina: restano discreti ma leggibili, e non si spezzano a meta'.
   16/9: sono diventati tre elementi separati proprio per questo. Erano
   una riga sola, e sul telefono il CIN andava a capo in mezzo alla
   sigla. Il puntino fra l'uno e l'altro lo mette il foglio di stile,
   cosi' sparisce da solo quando vanno in colonna. */
footer .fb-dx{display:inline-flex;flex-wrap:wrap;justify-content:flex-end}
footer .fb-dx > span + span::before{content:'·';margin:0 .55em;opacity:.55}
@media(max-width:900px){
  footer .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  footer .fcol{padding-top:0}
}
@media(max-width:520px){
  footer .fgrid{grid-template-columns:1fr}
  /* In colonna sola lo space-between non separa piu' niente. Tutto
     centrato: i tre codici uno per riga sotto al resto, che e' il modo
     in cui restano leggibili senza spezzarsi. */
  footer .fbot{flex-direction:column;align-items:center;text-align:center;gap:12px}
  footer .fb-sx{justify-content:center;gap:8px 18px}
  footer .fb-dx{flex-direction:column;align-items:center;gap:4px;line-height:1.7}
  footer .fb-dx > span + span::before{content:none}
}

/* ===================== FORMS ===================== */
.frm{display:flex;flex-direction:column;gap:18px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.frm label{display:flex;flex-direction:column;gap:8px;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.frm input,.frm select,.frm textarea{padding:1em 1.1em;border:1px solid var(--line);border-radius:14px;background:var(--card);font-family:var(--sans);font-size:.98rem;color:var(--ink);text-transform:none;letter-spacing:normal;font-weight:400;transition:.25s}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgba(181,97,79,.14)}
.frm textarea{resize:vertical;min-height:110px;font-family:var(--sans)}
/* Solo il pulsante di invio, che e' figlio diretto del modulo. Senza
   il '>' la regola prendeva anche i pulsanti dentro il modulo (le
   tendine, le frecce del calendario, i piu' e i meno degli ospiti)
   e li spingeva giu' di 8px: nella riga del telefono la casella
   del prefisso finiva sfalsata rispetto a quella del numero. */
.frm > button{align-self:flex-start;margin-top:8px}
@media(max-width:640px){.frm .row{grid-template-columns:1fr}}

/* ===================== CONTACT INFO ===================== */
.cinfo{margin-top:28px;display:flex;flex-direction:column;gap:22px}
.ci{display:flex;flex-direction:column;gap:6px}
.ci .over{margin-bottom:2px}
.ci a,.ci span{font-family:var(--serif);font-size:1.35rem;color:var(--ink);line-height:1.4;font-weight:500}
.ci a{transition:.25s;text-decoration:none}
.ci a:hover{color:var(--rosa)}

/* ===================== FORMS ===================== */
.frm{display:flex;flex-direction:column;gap:18px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.frm label{display:flex;flex-direction:column;gap:8px;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.frm input,.frm select,.frm textarea{padding:1em 1.1em;border:1px solid var(--line);border-radius:14px;background:var(--card);font-family:var(--sans);font-size:.98rem;color:var(--ink);text-transform:none;letter-spacing:normal;font-weight:400;transition:.25s}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgba(181,97,79,.14)}
.frm textarea{resize:vertical;min-height:110px;font-family:var(--sans)}
.frm > button{align-self:flex-start;margin-top:8px}
@media(max-width:640px){.frm .row{grid-template-columns:1fr}}

/* ===================== CONTACT INFO ===================== */
.cinfo{margin-top:28px;display:flex;flex-direction:column;gap:22px}
.ci{display:flex;flex-direction:column;gap:6px}
.ci .over{margin-bottom:2px}
.ci a,.ci span{font-family:var(--serif);font-size:1.35rem;color:var(--ink);line-height:1.4;font-weight:500}
.ci a{transition:.25s;text-decoration:none}
.ci a:hover{color:var(--rosa)}

/* Motion safety */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .clip{clip-path:inset(0 0 0 0)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mm-lang{display:inline-block;margin-top:26px;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mm-lang:hover{color:var(--rosa)}

/* form richiesta */
.frm-note{margin:-6px 0 18px;font-size:.86rem;color:var(--dim)}
.frm-esito{margin-top:18px;padding:0;max-height:0;overflow:hidden;opacity:0;
  border-radius:10px;transition:max-height .4s var(--ease),opacity .4s var(--ease),padding .4s var(--ease)}
.frm-esito.on{padding:16px 18px;max-height:200px;opacity:1;background:var(--bg-soft);border:1px solid var(--line)}
/* l'esito buono e' una banda scura come il piede: il verde di prima non era
   un colore di Casa Camelia (Steven, 19/10). Angoli vivi come i pulsanti */
.frm-esito.on.ok{background:var(--ink);border-color:var(--ink);color:rgba(250,246,241,.75);border-radius:0;padding:22px 24px}
.frm-esito.ok strong{color:#fff;font-weight:500;font-family:var(--serif);font-size:1.45rem;line-height:1.3;letter-spacing:.01em}
.frm-esito.ko{border-color:var(--rosa);color:var(--ink)}
.frm input:invalid.touched,.frm select:invalid.touched{border-color:var(--rosa)}

/* =====================================================================
   2026-08-14 — testata alla Aris (marchio centrato) + hero rivista
   Sovrascrive le regole precedenti di header/hero. In coda apposta.
   ===================================================================== */

header{position:fixed;top:0;left:0;width:100%;z-index:100}
header.solid{background:rgba(250,246,241,.96);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  width:92%;max-width:1500px;margin:0 auto;padding:24px 0}
header.solid .hdr-in{padding:12px 0}
.hdr-l{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.4rem)}
.hdr-r{display:flex;justify-content:flex-end;align-items:center;padding-right:clamp(0px,7vw,112px)}

/* marchio centrato, grande sulla hero e piccolo dopo lo scroll */
body.home header:not(.solid) .brand,
body:not(.home) header:not(.solid) .brand{opacity:1;pointer-events:auto}
.brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:#fff;text-align:center}
.brand img{width:54px;height:54px;object-fit:contain;transition:width .5s var(--ease),opacity .4s var(--ease)}
.brand img.dark{position:absolute;top:0;left:50%;transform:translateX(-50%);opacity:0}
header.solid .brand img.cream{opacity:0}
header.solid .brand img.dark{opacity:1}
header.solid .brand img{width:34px}
.brand .nm{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.5rem);
  letter-spacing:.2em;text-indent:.2em;color:#fff;white-space:nowrap;line-height:1}
header.solid .brand .nm{color:var(--rosa);font-size:1.15rem}
.brand .sub{font-family:var(--sans);font-weight:600;font-size:.54rem;text-transform:uppercase;
  letter-spacing:.34em;text-indent:.34em;color:rgba(255,255,255,.72);line-height:1;
  transition:opacity .4s var(--ease),max-height .5s var(--ease)}
header.solid .brand .sub{opacity:0;max-height:0;overflow:hidden}

.call{font-family:var(--sans);font-weight:600;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.24em;color:#fff;padding-bottom:5px;border-bottom:1px solid transparent;transition:.4s var(--ease)}
.call:hover{border-color:currentColor}
header.solid .call{color:var(--ink)}

.lang-sw{color:rgba(255,255,255,.9);font-size:.66rem}
header.solid .lang-sw{color:var(--ink2)}

/* hamburger sempre visibile, due filetti */
.burger{display:flex!important;flex-direction:column;justify-content:center;gap:7px;
  width:28px;height:20px;background:none;border:0;padding:0;cursor:pointer}
.burger span{display:block;width:100%;height:1px;background:#fff;transition:.4s var(--ease)}
.burger span:nth-child(3){display:none}
header.solid .burger span{background:var(--ink)}
body.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* bollo d'angolo */
.blob{position:absolute;top:-58px;right:-58px;width:196px;height:196px;border-radius:50%;
  background:var(--rosa);display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 0 46px 42px;transition:transform .5s var(--ease),background .4s var(--ease)}
.blob span{font-family:var(--sans);color:#fff;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;line-height:1.7;text-align:left}
.blob:hover{transform:scale(1.06);background:var(--rosa-h)}
header.solid .blob{transform:scale(.8);transform-origin:top right}
header.solid .blob:hover{transform:scale(.85)}

/* ---------- HERO ---------- */
.hero-veil{opacity:1!important;transition:none;background:none}
.hero .bg::after{
  background:
    radial-gradient(120% 85% at 50% 45%,rgba(30,18,12,.30) 0%,rgba(30,18,12,.66) 100%),
    linear-gradient(180deg,rgba(30,18,12,.66) 0%,rgba(30,18,12,.42) 34%,rgba(30,18,12,.46) 66%,rgba(30,18,12,.76) 100%)!important;
}
.hero .inner{padding-bottom:0;justify-content:center}
.hero-say{
  font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(2.6rem,7.2vw,6rem);line-height:1.02;letter-spacing:.01em;
  text-shadow:0 2px 44px rgba(0,0,0,.35);opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero-say em{font-style:italic;color:var(--gold)}
.hero.reveal .hero-say{opacity:1;transform:none;transition-delay:.1s}
.hero .hero-place{margin-top:clamp(18px,3vh,30px);color:rgba(255,255,255,.84);
  font-family:var(--sans);font-weight:600;font-size:clamp(.6rem,1vw,.72rem);
  text-transform:uppercase;letter-spacing:.3em;text-indent:.3em}
.hero.reveal .hero-place{transition-delay:.45s}
.hero .hero-cta{margin-top:clamp(26px,5vh,48px)}
.hero-cta .btn{background:transparent;border-color:rgba(255,255,255,.6);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em}
.hero-cta .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* piede della hero: tre numeri a sinistra, invito a scorrere a destra */
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;
  width:92%;max-width:1500px;margin:0 auto;padding-bottom:2.2rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.hero-meta{display:flex;gap:clamp(1.4rem,3vw,3rem);color:#fff}
.hero-meta div{line-height:1.2}
.hero-meta b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:.02em}
.hero-meta span{font-family:var(--sans);font-size:.54rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;opacity:.62}
.hero .scrollcue{position:static;transform:none;left:auto;bottom:auto}

/* pagine interne: la velatura della testata copriva poco il titolo */
.phero{padding-top:260px}

@media (max-width:900px){
  .hdr-in{gap:1rem;padding:16px 0}
  .brand img{width:38px}
  .brand .nm{font-size:1rem;letter-spacing:.16em;text-indent:.16em}
  .brand .sub{font-size:.46rem}
  .blob{width:116px;height:116px;top:-34px;right:-34px;padding:0 0 26px 21px}
  .blob span{font-size:.54rem;letter-spacing:.14em;line-height:1.5}
  .hero .inner{padding:9rem 8% 8rem}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1rem;width:88%;padding-bottom:1.6rem}
  .hero-meta{width:100%;justify-content:space-between;gap:1rem;
    padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.22)}
  .hero-meta b{font-size:1.2rem}
  .hero .scrollcue{display:none}
  .phero{padding-top:190px}
}
.hero-foot .scrollcue{color:rgba(255,255,255,.72)}
.hero-foot .scrollcue .ln{background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)}

/* --- rifinitura 2026-08-14 (2): marchio a colori, hero pulita --- */
/* la rosa e' sempre quella colorata, anche sopra la hero */
.brand img.cream{display:none}
.brand img.dark{position:static;transform:none;opacity:1}
header.solid .brand img.dark{opacity:1}
.brand .nm{color:var(--rosa);text-shadow:0 2px 24px rgba(0,0,0,.45)}
header.solid .brand .nm{text-shadow:none}
.brand{filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
header.solid .brand{filter:none}
/* niente piu' bollo d'angolo: lo spazio riservato a destra non serve */
.hdr-r{padding-right:0}

/* --- 2026-08-15 (3): hero 06 scelta da Steven --- */
/* foto ferma al posto del video, velatura laterale, testo in basso a sinistra */
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%;transform:scale(1.05);
  animation:heroZoom 16s cubic-bezier(.19,1,.22,1) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero .bg::after{
  background:linear-gradient(90deg,rgba(18,13,9,.74) 0%,rgba(18,13,9,.32) 62%,rgba(18,13,9,.16) 100%)!important;
}
/* il contenuto della hero passa da centrato a in basso a sinistra */
.hero .inner{align-items:flex-start!important;text-align:left!important;justify-content:flex-end!important;
  width:92%;max-width:1500px;padding:0 0 clamp(3rem,7vh,5.2rem)!important;height:100%}
.hero-say{max-width:14ch;font-size:clamp(2.2rem,5.6vw,4.6rem)}
.hero-say em{font-style:normal;color:inherit}
.hero .hero-cta{margin-top:clamp(22px,4vh,34px)}
/* pulsanti squadrati e pieni nel rosa del marchio */
.hero-cta .btn{background:var(--rosa);border-color:var(--rosa);color:#fff;border-radius:0}
.hero-cta .btn:hover{background:var(--rosa-h);border-color:var(--rosa-h);color:#fff}
/* "Prenota ora" in testata: pieno rosa, squadrato */
.call.bk{background:var(--rosa);border:1px solid var(--rosa);color:#fff;padding:12px 24px;
  border-bottom:1px solid var(--rosa);transition:.3s var(--ease)}
.call.bk:hover{background:var(--rosa-h);border-color:var(--rosa-h);color:#fff}
header.solid .call.bk{color:#fff}
@media(max-width:900px){
  /* 3.2rem sono 51 pixel, ed erano loro a comandare: c'e' un
     `!important` che batte tutte le regole scritte dopo. Su un telefono
     lasciavano il blocco sospeso a mezz'aria, con una striscia di foto
     vuota sotto al pulsante. Il valore si cambia QUI, che e' dove
     vive: metterne un altro piu' in basso sarebbe una gara di
     `!important` che poi nessuno capisce piu'. (18/9) */
  .hero .inner{width:88%;padding-bottom:1.7rem!important}
  .hero-say{max-width:none}
}

/* --- correzione: nella 06 il marchio sulla hero e' crema, rosa solo dopo lo scroll --- */
.brand img.cream{display:block}
.brand img.dark{position:absolute;top:0;left:50%;transform:translateX(-50%);opacity:0}
.brand .nm{color:var(--bg)}
header.solid .brand img.cream{opacity:0}
header.solid .brand img.dark{opacity:1}
header.solid .brand .nm{color:var(--rosa)}
.brand{filter:drop-shadow(0 2px 20px rgba(0,0,0,.45))}
header.solid .brand{filter:none}
/* la foto verticale per il telefono */
.hero .bg picture{display:block;width:100%;height:100%}
/* 19/9: tolto. Stabiliva il punto di messa a fuoco per il telefono
   quando la foto era quella larga di Laura; adesso la foto e' una
   sola e verticale, e il valore per il telefono sta in fondo al
   foglio insieme alle altre regole del telefono. Due regole che
   dicono cose diverse sulla stessa cosa sono il modo migliore per non
   capirci piu' niente. */

/* testo di benvenuto: piu' lungo della frase a effetto, quindi corpo piu' piccolo
   e riga piu' larga, altrimenti diventa una colonna di dodici righe */
.big-say.lungo{font-weight:400;font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.5;max-width:34ch}

/* senza occhielli i titoli di sezione partono piu' in alto: recupero un po' d'aria */
.shead h2,.headc h2{margin-top:0}
/* la riga di presentazione sotto a un titolo centrato: senza un freno
   si stende su tutta la larghezza del contenitore e diventa una riga
   sottile lunga un metro, che nessuno legge.
   E le serve aria sopra: attaccata al titolo sembrava la seconda riga
   del titolo, non una frase a parte. */
.headc p{max-width:58ch;margin:0 auto;color:var(--dim)}
.headc h2 + p{margin-top:20px}
.band .inner q{margin-top:0}

/* pulsanti squadrati ovunque, non solo nella hero (coerenza con la scelta del 15/8) */
.btn{border-radius:0}
.news button{border-radius:0}

/* galleria: riquadri piu' alti e con altezze diverse, come nella prima versione */
.gal{grid-auto-rows:290px;gap:16px}
@media(max-width:900px){.gal{grid-auto-rows:230px;gap:12px}
  .gal .tall{grid-row:span 2}.gal .wide{grid-column:span 2}}

/* il solo testo di benvenuto resta piu' piccolo: e' lungo il triplo della frase
   che c'era prima, alla misura piena diventava un muro di dodici righe */
.big-say.lungo{font-size:clamp(1.3rem,2.4vw,1.95rem);line-height:1.5;max-width:36ch;font-weight:400}

/* ===== "Le piccole cose": impaginazione rivista (scelta 01, 15/8) ===== */
.pcose{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.8rem);align-items:start}
.pcose figure{overflow:hidden;background:var(--bg-soft)}
.pcose img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcose figure:hover img{transform:scale(1.04)}
/* la colazione si vede intera: proporzione naturale della foto, nessun taglio */
.pcose .pc-1{grid-column:1/span 6;aspect-ratio:4/5}
.pcose .pc-1 img{object-fit:contain;background:var(--bg-soft)}
.pcose .pc-q{grid-column:8/span 5;align-self:center}
.pcose .pc-q p{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.34;color:var(--ink)}
.pcose .pc-q span{display:block;margin-top:16px;font-family:var(--sans);font-weight:600;
  font-size:.6rem;text-transform:uppercase;letter-spacing:.22em;color:var(--rosa)}
.pcose .pc-2{grid-column:1/span 4;aspect-ratio:3/4}
.pcose .pc-3{grid-column:5/span 4;aspect-ratio:2/3;margin-top:clamp(1.5rem,4vw,3.5rem)}
.pcose .pc-4{grid-column:9/span 4;aspect-ratio:1}
@media(max-width:860px){
  .pcose{gap:1rem}
  .pcose .pc-1,.pcose .pc-q{grid-column:1/span 12}
  .pcose .pc-2,.pcose .pc-3{grid-column:span 6;margin-top:0}
  .pcose .pc-4{grid-column:span 6}
}

/* il testo nella colonna delle "piccole cose": non e' una citazione, e' un invito */
/* stessa misura del testo della sezione sopra: non deve gridare piu' forte
   di "Casa Camelia nasce con un desiderio semplice" (16/8) */
.pcose .pc-q p{font-family:var(--sans);font-style:normal;font-size:1rem;line-height:1.7;color:var(--dim);max-width:44ch}
.pcose .pc-q .pc-claim{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.95rem);line-height:1.28;color:var(--ink);
  margin-top:.7em;font-weight:500;max-width:none}
.pcose .pc-q .pc-claim em{font-style:italic;color:var(--rosa)}
.pcose .pc-q .btn{margin-top:clamp(1.4rem,2.4vw,2rem)}

/* fascia territorio: da vetrina di numeri a porta verso Esperienze (16/8) */
.band .band-p{max-width:52ch;margin:-18px auto 0;color:rgba(250,246,241,.82);font-size:1.02rem;line-height:1.7}
/* stessa misura dei titoli di sezione, non piu' piccolo perche' e' una "citazione" */
.band q{font-size:clamp(2.2rem,4.8vw,4rem);font-style:normal;max-width:20ch;margin-bottom:44px}
.band q em{font-style:italic;color:#f5d4c8}

/* ============================================================
   16/8 — tre porte, quaderno, chiusura
   ============================================================ */

/* (qui c'era un doppione delle tre porte: tolto il 5/9. Il foglio
   aveva due copie del blocco e vinceva sempre la seconda) */

/* --- IL QUADERNO: firme degli ospiti che scorrono --- */
/* stesse distanze delle altre sezioni: 130px sotto (104 qui + i 26 che il
   nastro dei foglietti si porta dietro per le ombre) e 60 sotto al titolo */
.quad{background:var(--bg-warm);padding-bottom:104px;overflow:hidden}
.quad-intro{max-width:46ch;margin:22px auto 0;color:var(--dim)}
/* 21/10: la sfumatura ai lati non e' piu' una maschera (mask-image) ma
   due veli del colore del fondo. Su iPhone la maschera sopra un nastro
   largo migliaia di pixel che scorre e' il sospettato numero uno del
   quaderno che resta vuoto: il telefono deve disegnare tutto il nastro
   dentro la maschera e a volte non lo fa. A occhio non cambia niente. */
.quad-track{position:relative;width:100%;overflow:hidden}
.quad-track::before,.quad-track::after{content:'';position:absolute;top:0;bottom:0;z-index:3;
  width:8%;pointer-events:none}
.quad-track::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(250,246,241,0))}
.quad-track::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(250,246,241,0))}
/* 21/10: il nastro non si muove piu' tutto intero. Era una striscia di
   ~7000 px spostata con transform: su iPhone, a tre pixel per punto,
   un'immagine da oltre 100 MB che Safari a volte buttava via (il
   quaderno spariva, per esempio chiudendo il popup della newsletter
   sopra). Ora il nastro e' fermo e largo quanto lo schermo, e app.js ne
   fa scorrere il contenuto (scrollLeft): il telefono disegna solo il
   pezzo che si vede, come quando si scorre una pagina. */
.quad-rail{display:flex;gap:clamp(1.2rem,2.4vw,2.2rem);width:100%;overflow:hidden;padding:26px 0}
@media(prefers-reduced-motion:reduce){
  .quad-rail{overflow-x:auto}
  .quad-track::before,.quad-track::after{display:none}
}
/* ogni firma e' un foglietto di carta, appena storto */
/* 1/9 — le schede del quaderno sono le PAGINE VERE fotografate, non
   piu' testi ribattuti in un carattere che imita la scrittura. Un testo
   battuto puo' averlo scritto chiunque, noi compresi: e' proprio quello
   che questa sezione deve smentire.
   Sulla scheda si legge solo l'inizio, che e' il ritaglio in alto a
   sinistra: serve a far venire voglia di cliccare. La pagina intera si
   apre nel lettore, lo stesso delle guide su Esperienze.
   La vecchia .fogl (foglietto di carta col testo dentro) e' stata tolta:
   non la usava piu' nessuno. */
/* 16/9: altezza scritta, non dedotta dalle proporzioni. Il nastro e'
   largo `max-content`, e per calcolarlo il browser deve sapere quanto e'
   alto ogni foglietto; con `aspect-ratio` e immagini caricate in ritardo
   su Safari da telefono quel conto veniva zero e la striscia spariva.
   L'altezza e' 5/4 della larghezza, cioe' esattamente quello che diceva
   aspect-ratio: cambiando l'una va cambiata l'altra. */
.qfoglio{position:relative;flex:0 0 clamp(250px,27vw,340px);
  height:clamp(312px,33.75vw,425px);
  padding:0;border:0;background:#fffdf9;cursor:pointer;overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(44,24,16,.4);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.qfoglio:nth-child(odd){transform:rotate(-.7deg)}
.qfoglio:nth-child(even){transform:rotate(.8deg)}
.qfoglio:hover,.qfoglio:focus-visible{transform:rotate(0) translateY(-5px);
  box-shadow:0 22px 44px -20px rgba(44,24,16,.5)}
/* la pagina si vede INTERA, non ritagliata: i blocchi scritti hanno forme
   molto diverse (uno e' largo il doppio dell'altro) e riempiendo il
   riquadro alcuni venivano ingranditi al punto da mostrare tre parole.
   Piccola si legge poco, ma la scheda deve invogliare a cliccare, non
   sostituire la lettura: quella la fa il lettore.
   Ancorata in alto: cosi' la prima riga scritta sta sempre alla stessa
   altezza su tutte le schede, e la fila ha una linea comune. Provata
   anche centrata (7/9) e scartata: ogni pagina partiva da un punto suo
   e la fila sembrava sgangherata. */
.qfoglio img{width:100%;height:100%;object-fit:contain;object-position:center top;display:block}
/* al passaggio compare l'invito, come sulle copertine delle guide e
   sulla mappa di Contatti: stesso gesto, stesso segno */
.q-velo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,12,8,.42);opacity:0;transition:opacity .4s var(--ease)}
.qfoglio:hover .q-velo,.qfoglio:focus-visible .q-velo{opacity:1}
.q-velo b{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.7);padding:12px 22px}
/* la firma sta sopra alla foto, su una fascia chiara: fuori dal riquadro
   servirebbe spazio in piu' e le schede sono gia' storte fra loro */
.q-firma{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:left;
  padding:26px 16px 12px;font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(0deg,rgba(255,253,249,.97) 58%,rgba(255,253,249,0))}
.q-firma i{display:block;margin-top:4px;font-style:normal;font-weight:500;
  letter-spacing:.14em;color:var(--soft)}

/* ============================================================
   16/8 — tre porte, quaderno, chiusura
   ============================================================ */

/* --- TRE PORTE (impianto Gage): fascia a tutta pagina, nessun titolo --- */
.porte{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.porta{position:relative;display:block;aspect-ratio:4/5;max-height:76vh;overflow:hidden;background:var(--ink)}
.porta img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.porta:hover img{transform:scale(1.05);filter:brightness(.72)}
/* velo scuro uniforme: senza, sulle foto chiare la scritta si perde */
.porta::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(44,24,16,.10),rgba(44,24,16,.42))}
.porta .p-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;text-align:center;padding:20px}
.porta .p-nm{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.5rem);
  color:#fff;line-height:1.1;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.porta .p-go{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.62);
  padding:11px 22px;transition:.4s var(--ease)}
.porta:hover .p-go{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:820px){
  .porte{grid-template-columns:1fr}
  .porta{aspect-ratio:16/10}
}

/* (qui c'era un secondo doppione dell'inizio del quaderno, identico al
   primo: tolto il 21/10) */
/* ogni firma e' un foglietto di carta, appena storto */
/* (qui c'era un doppione di .qfoglio e del quaderno: tolto il 1/9.
   Il foglio aveva due copie identiche del blocco, quindi ogni modifica
   andava fatta due volte e vinceva sempre la seconda) */

/* --- CHIUSURA: prenota + newsletter affiancate, non piu' due sezioni gemelle --- */
.chiusa{background:var(--bg-soft);padding:130px 0;border-top:1px solid var(--line)}
.ch-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.ch-book h2{font-size:clamp(2.2rem,4.4vw,3.5rem);margin-bottom:20px}
.ch-book p{max-width:42ch;margin-bottom:30px;color:var(--dim)}
.ch-news{border-left:1px solid var(--line);padding-left:clamp(2rem,4vw,3.4rem)}
.ch-news h3{font-size:clamp(1.5rem,2.2vw,1.9rem);margin:12px 0 12px;line-height:1.14}
.ch-news p{color:var(--dim);font-size:.95rem;margin-bottom:20px;max-width:34ch}
.ch-news form{display:flex;gap:10px;flex-wrap:wrap}
.ch-news input{flex:1 1 190px;min-width:0;padding:14px 16px;border:1px solid var(--line);
  background:var(--bg);font-family:var(--sans);font-size:.92rem;color:var(--ink)}
.ch-news input:focus{outline:none;border-color:var(--rosa)}
.ch-news button{padding:14px 24px;background:var(--rosa);color:#fff;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:.35s var(--ease)}
.ch-news button:hover{background:var(--rosa-h)}
@media(max-width:860px){
  .ch-grid{grid-template-columns:1fr;gap:2.6rem}
  .ch-news{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:2.4rem}
}

/* ============================================================
   16/8 — le tre porte senza foto (in attesa degli scatti veri)
   ============================================================ */
.porte{grid-template-columns:repeat(3,1fr);background:var(--ink)}
/* 5/9: un po' piu' alte, da 300-420 a 380-520. Erano una fascia bassa
   in mezzo a due sezioni ariose e sembravano di passaggio. */
.porta{aspect-ratio:auto;max-height:none;min-height:clamp(380px,50vh,520px);
  border-right:1px solid rgba(250,246,241,.14)}
.porta:last-child{border-right:0}
.porta::after{display:none}
.porta .p-in{gap:18px;padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem);
  justify-content:center}
.porta .p-nm{text-shadow:none;color:var(--bg);transition:color .4s var(--ease)}
.porta .p-txt{font-family:var(--sans);font-size:.92rem;line-height:1.6;
  color:rgba(250,246,241,.62);max-width:26ch}
.porta .p-go{border-color:rgba(250,246,241,.4);color:rgba(250,246,241,.86)}
.porta:hover{background:#241209}
.porta:hover .p-nm{color:#f5d4c8}
@media(max-width:820px){
  .porte{grid-template-columns:1fr}
  .porta{min-height:0;border-right:0;border-bottom:1px solid rgba(250,246,241,.14)}
}

/* ============================================================
   16/8 — chiusura: la camelia che si compone + newsletter
   ============================================================ */
.chiusa{background:var(--bg-soft);padding:130px 0;border-top:1px solid var(--line)}
.ch-grid{display:grid;grid-template-columns:.8fr 1fr;
  gap:clamp(1.6rem,4vw,4rem);align-items:center;max-width:900px}
/* il disegno sta vicino al testo e non ai due capi della pagina */
.ch-dis{display:flex;justify-content:flex-end}
.ch-dis .tela-disegno{width:min(100%,270px);color:var(--rosa)}
.ch-dis .tela-disegno svg{width:100%;height:auto;display:block;overflow:visible}
/* Lo spessore e' in unita' del disegno, non in pixel: questa camelia e'
   vettorizzata a 1100 unita' di larghezza, e a video sta in 270px: il
   disegno viene rimpicciolito a un quarto, quindi il numero va moltiplicato
   di conseguenza per ottenere il tratto che si voleva. */
.ch-dis .tela-disegno svg path{fill:none;stroke:currentColor;stroke-width:4.6;
  stroke-linecap:round;stroke-linejoin:round}

.ch-news h2{font-size:clamp(2rem,3.8vw,3.1rem);margin-bottom:18px;line-height:1.08}
.ch-news p{color:var(--dim);max-width:40ch;margin-bottom:30px}

@media(max-width:860px){
  .ch-grid{grid-template-columns:1fr;gap:2.2rem;text-align:center;justify-items:center}
  .ch-dis{justify-content:center}
  .ch-dis .tela-disegno{width:min(56%,200px)}
  .ch-news p{margin-left:auto;margin-right:auto}
}

/* ============================================================
   17/8 — testata de La casa: foto a tutto schermo, testo in basso a destra
   ============================================================ */
.phero-piena{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.phero-piena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Tre veli, ognuno con un compito: uno in cima perche' marchio e voci della
   testata restino leggibili sul cielo chiaro, uno da destra e uno dal basso
   per il testo sopra al tetto. Il lago al centro non viene toccato. */
.phero-piena::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,12,8,.42) 0%,rgba(20,12,8,.06) 22%,
             rgba(20,12,8,0) 46%,rgba(20,12,8,.30) 74%,rgba(20,12,8,.72) 100%),
             linear-gradient(270deg,rgba(20,12,8,.40) 0%,rgba(20,12,8,0) 56%)}
.pp-testo{position:relative;z-index:2;width:88%;max-width:1180px;margin:0 auto;
  padding-bottom:clamp(3.5rem,10vh,7rem);color:#fff;text-align:right}
.pp-testo .crumbs{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:22px}
.pp-testo .crumbs a{color:rgba(255,255,255,.7)}
.pp-testo .crumbs a:hover{color:#fff}
.pp-testo h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.04}
/* lo stesso rosso dei pulsanti, cosi' in pagina il colore e' uno solo */
.pp-testo h1 em{color:var(--rosa)}
.pp-testo p{color:rgba(255,255,255,.86);max-width:40ch;margin:22px 0 30px;
  margin-left:auto;font-size:1.05rem}
@media(max-width:820px){
  .pp-testo{text-align:left;padding-bottom:clamp(3rem,8vh,5rem)}
  .pp-testo p{margin-left:0}
}

/* il riquadro affiancato al testo accetta anche un video, non solo una foto */
.split .im video{width:100%;height:108%;object-fit:cover;display:block}

/* ============================================================
   17/8 — "La casa in un colpo d'occhio": pianta + elenco
   I metri quadri vengono dalla planimetria vera, non sono stime.
   ============================================================ */
.colpo{background:var(--bg-warm)}
.cp-grid{display:grid;grid-template-columns:.85fr 1.25fr .9fr;
  gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.cp-testo h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.06;margin-bottom:18px}
.cp-testo p{color:var(--dim);max-width:30ch;margin-bottom:28px}

.cp-pianta svg{width:100%;height:auto;display:block;overflow:visible}
.cp-pianta .stanza rect{fill:#fffdf9;stroke:var(--ink);stroke-width:1.2}
.cp-pianta .stanza rect.disimp{fill:var(--bg-soft);stroke-dasharray:3 4;opacity:.9}
.cp-pianta .balcone rect{fill:none;stroke:var(--rosa);stroke-width:1;stroke-dasharray:4 4}
.cp-pianta .balcone text{fill:var(--rosa);font-family:var(--sans);font-size:9px;
  font-weight:600;letter-spacing:.1em;text-anchor:middle}
.cp-pianta text.nm{fill:var(--ink);font-family:var(--serif);font-size:17px;
  font-weight:500;text-anchor:middle}
.cp-pianta text.nm.pc{font-size:14px}
.cp-pianta text.mq{fill:var(--soft);font-family:var(--sans);font-size:9.5px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;text-anchor:middle}

.cp-lista{list-style:none;display:flex;flex-direction:column;gap:0}
.cp-lista li{padding:13px 0;border-bottom:1px solid var(--line);
  font-size:.94rem;color:var(--dim);line-height:1.5}
.cp-lista li:first-child{padding-top:0}
.cp-lista li:last-child{border-bottom:0}
.cp-lista b{color:var(--ink);font-weight:600}

@media(max-width:980px){
  .cp-grid{grid-template-columns:1fr;gap:2.4rem}
  .cp-pianta{max-width:520px;margin:0 auto}
}

/* ============================================================
   17/8 — La casa rifatta: tour, soggiorno, le due camere
   ============================================================ */
/* Il tour: torna il testo a fianco, e il video ha il suo tasto di avvio.
   Non parte da solo: un'immagine ferma con un tasto sopra si legge come
   qualcosa da fare, non come un rettangolo appoggiato sul crema. */
.tour{background:var(--bg);padding:clamp(5.5rem,10vh,8rem) 0}
.tour .wrap{max-width:1340px}
.tr-grid{display:grid;grid-template-columns:.92fr 1.85fr;
  gap:clamp(2rem,4vw,4rem);align-items:center}
.tr-testo h2{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.06;margin-bottom:18px}
.tr-testo p{color:var(--dim);max-width:32ch}

.tr-video{position:relative;overflow:hidden;background:var(--ink)}
.tr-video video{width:100%;height:auto;display:block}

/* le dotazioni del soggiorno: un'icona a filo sopra la parola */
.dotaz{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,2.8rem);
  margin-top:34px}
.dotaz li{display:flex;flex-direction:column;align-items:center;gap:11px;
  text-align:center;min-width:74px}
.dotaz svg{width:32px;height:24px;fill:none;stroke:var(--rosa);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}
.dotaz span{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);line-height:1.5}

/* le due camere affiancate */
.camere{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem)}
.cam .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft);margin-bottom:20px}
.cam .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cam:hover .ph img{transform:scale(1.03)}
.cam h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:10px}
.cam p{color:var(--dim);max-width:38ch;margin-bottom:14px}
.cam .mini{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft)}
.nota-serv{margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:26px;
  border-top:1px solid var(--line);color:var(--dim);max-width:62ch}

@media(max-width:900px){
  .tr-grid{grid-template-columns:1fr;gap:2rem}
  .camere{grid-template-columns:1fr;gap:2.6rem}
}

/* ============================================================
   17/8 — testata: marchio a sinistra, voci a destra
   Con quattro pagine sole le voci ci stanno in chiaro, e il menu a
   tutto schermo resta solo sul telefono.
   ============================================================ */
.hdr-in{display:flex!important;align-items:center;justify-content:space-between;
  gap:1.5rem;width:92%;max-width:1500px;margin:0 auto;padding:20px 0}
header.solid .hdr-in{padding:12px 0}

/* 18/9: tolto un `!important` che non serviva. Stava qui dal 17/8 per
   battere il `flex-direction:column` di una regola piu' in alto, ma
   questa riga viene DOPO quella, quindi vinceva gia' da sola. Con
   l'!important invece bloccava la testata del telefono, che il marchio
   lo impila. Verificato: sul monitor resta in fila. */
.brand{flex-direction:row;align-items:center;gap:12px;text-align:left}
.brand img{width:40px;height:40px}
header.solid .brand img{width:34px}
.brand img.dark{left:20px;transform:translateX(-50%)}
.brand .nm{font-size:clamp(1rem,1.4vw,1.24rem);letter-spacing:.18em;text-indent:.18em}
header.solid .brand .nm{font-size:1.1rem}

.hdr-r{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.2rem);padding-right:0!important}
.hdr-r .lang-sw{font-size:.6rem}
.hnav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem);
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.9)}
.hnav a{position:relative;padding-bottom:4px;transition:color .3s}
.hnav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.hnav a:hover::after,.hnav a.on::after{transform:scaleX(1)}
header.solid .hnav{color:var(--ink2)}
header.solid .hnav a:hover,header.solid .hnav a.on{color:var(--rosa)}

.call.bk{border:1px solid currentColor;padding:.72em 1.5em;font-size:.66rem}
header.solid .call.bk{background:var(--rosa);color:#fff;border-color:var(--rosa)}
header.solid .call.bk:hover{background:var(--rosa-h);border-color:var(--rosa-h)}

/* il menu a tutto schermo resta, ma solo sul telefono */
.burger{display:none!important}
@media(max-width:900px){
  .hnav{display:none}
  .burger{display:flex!important}
  .call.bk{padding:.6em 1.1em}
}

/* ============================================================
   17/8 — ritocchi alla testata: piu' staccata dall'alto, marchio
   nel rosso del pulsante, scritte un filo piu' grandi
   ============================================================ */
.hdr-in{padding:36px 0}
header.solid .hdr-in{padding:14px 0}

/* il marchio resta rosso anche sopra la foto: prima diventava crema li'
   e rosso solo dopo lo scroll */
.brand img.cream{opacity:0!important}
.brand img.dark{opacity:1!important}
.brand .nm{color:var(--rosa)!important;font-size:clamp(1.16rem,1.7vw,1.46rem)}
header.solid .brand .nm{font-size:1.28rem}
.brand img{width:46px;height:46px}
header.solid .brand img{width:36px}
.brand img.dark{left:23px}

.hnav{font-size:.95rem}

/* correzioni: solo il segno del marchio e' rosso, il nome resta bianco
   sopra la foto (e rosso quando la testata diventa crema, altrimenti
   sparirebbe). E il pulsante non ha nessun bordo chiaro attorno. */
.brand .nm{color:#fff!important}
header.solid .brand .nm{color:var(--rosa)!important}
.call.bk{border:1px solid var(--rosa)}

/* Sopra la foto il rosso del marchio finisce sulla sagoma piu' scura e non
   stacca. Non lo si cambia di colore: lo si schiarisce, e appena la testata
   diventa crema torna al rosso pieno. Il passaggio viaggia con tutto il resto. */
.brand img.dark{transition:opacity .4s var(--ease),filter .4s var(--ease),width .5s var(--ease)}
header:not(.solid) .brand img.dark{filter:brightness(1.55) saturate(.92)}

/* schiarito ancora un po' */
header:not(.solid) .brand img.dark{filter:brightness(1.85) saturate(.9)}

/* "Casa Camelia" era gia' nel carattere del titolo (Cormorant Garamond):
   sembrava diverso solo perche' aveva le lettere molto distanziate.
   Tolta la spaziatura, e' identico a "Benvenuti sul Lago Maggiore". */
.brand .nm{letter-spacing:.03em;text-indent:0;font-weight:500}

/* ============================================================
   17/8 — testi del riferimento: hero su tre righe, tour piu' largo
   ============================================================ */
.pp-testo h1{font-size:clamp(3rem,7vw,6rem);line-height:.98}
.pp-testo .occhio{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,2.4vw,2.1rem);color:#fff;margin:10px 0 18px;max-width:none}
.pp-testo .occhio em{color:var(--rosa);font-style:italic}
.pp-testo p{font-size:1rem}
.pp-testo .btn{margin-top:6px}


.lenta p{max-width:46ch;margin:20px auto 34px;color:var(--dim);line-height:1.9}
.lenta h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
@media(max-width:900px){ .tr-grid{grid-template-columns:1fr} }

/* senza il pulsante il blocco si accorcia: lo si porta piu' in basso,
   cosi' resta tutto sul tetto e il lago non viene coperto */
.pp-testo{padding-bottom:clamp(1.8rem,4.5vh,3rem)}
.pp-testo p:last-child{margin-bottom:0}



/* la hero riprende il pulsante: si stringono i margini fra le righe
   cosi' il blocco resta tutto sul tetto e il lago non viene coperto */
/* ATTENZIONE: questo recupero dipende dal TESTO del titolo, non dal
   layout. "Un posto da chiamare casa." su schermo largo finisce con
   la p di "posto", che scende sotto la riga e riempie lo spazio: li'
   lo scarto con la home e' di 1-3px e non serve toccare niente. Sotto
   i 414px va a capo e l'ultima riga resta senza lettere discendenti,
   quindi si apre un vuoto di 10-11px. Se un domani il titolo cambia,
   questa riga va rimisurata. */
.pp-testo h1{margin-bottom:0}
.pp-testo .occhio{margin:6px 0 12px}
.pp-testo p{margin:0 0 20px;margin-left:auto}
.pp-testo .btn{padding:.9em 1.9em}

/* ============================================================
   17/8 — hero della home: sotto al titolo una riga in corsivo e un testo,
   come nella hero de La casa
   ============================================================ */
.hero-occhio{font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(1.3rem,2.4vw,2.1rem);line-height:1.2;margin:14px 0 14px}
.hero-occhio em{color:var(--rosa);font-style:italic}
.hero-sub{color:rgba(255,255,255,.88);max-width:46ch;font-size:1rem;
  line-height:1.7;margin-bottom:28px}
@media(max-width:820px){ .hero-sub{max-width:none;font-size:.94rem} }

/* ============================================================
   19/8 — marchio grande in cima, piccolo dopo lo scroll
   Il segno e' un <img> sovrapposto a un altro (crema e rosso): quando
   cambia misura va spostata anche l'ancora del secondo, che e' meta'
   della larghezza.
   ============================================================ */
/* 21/8 — richiesta di Laura: sopra la foto il marchio deve essere largo
   quanto "Benvenuti sul", la prima riga del titolo che sta sotto. Il segno
   e' il 103, il nome il 3rem e il vuoto in mezzo il 22: sono i 74/2,15rem/16
   di prima moltiplicati tutti per lo stesso fattore, cosi' le proporzioni
   interne restano quelle. ATTENZIONE: img.dark e' ancorata a meta' della
   larghezza del segno, quindi va sempre tenuta a width/2 (103/2 = 51,5). */
header:not(.solid) .brand img{width:103px;height:103px}
header:not(.solid) .brand img.dark{left:51.5px}
header:not(.solid) .brand .nm{font-size:clamp(1.9rem,3.5vw,3rem)}
header:not(.solid) .brand{gap:22px}
.brand .nm{transition:font-size .5s var(--ease),color .4s var(--ease)}
.brand{gap:16px}
header:not(.solid) .hdr-in{padding:30px 0}




/* ============================================================
   19/8 — "Le piccole cose" rifatta: testo fermo a sinistra, foto che
   scorrono da sole a destra, di altezze diverse.
   ============================================================ */
.pcose-sez{overflow:hidden}
.pc-grid{display:grid;grid-template-columns:.82fr 1.35fr;
  gap:clamp(2rem,4vw,4rem);align-items:center}
.pc-testo h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.06;margin-bottom:24px}
.pc-testo p{color:var(--dim);max-width:38ch;margin-bottom:16px}
.pc-testo .pc-claim{font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.85rem);
  line-height:1.28;color:var(--ink);font-weight:500;max-width:none;margin:22px 0 28px}
.pc-testo .pc-claim em{font-style:italic;color:var(--rosa)}

@media(max-width:900px){
  .pc-grid{grid-template-columns:1fr;gap:2.2rem}
}

/* la colonna del testo era troppo stretta e il titolo si spezzava in quattro */
.pc-grid{grid-template-columns:1fr 1.15fr;gap:clamp(2rem,3.6vw,3.4rem)}
.pc-testo h2{font-size:clamp(1.9rem,3.1vw,2.7rem)}
.pc-testo p{max-width:34ch}
.pc-testo .pc-claim{font-size:clamp(1.2rem,1.9vw,1.6rem)}

/* minmax(0,...): senza, la colonna delle foto imporrebbe la sua larghezza
   naturale e schiaccerebbe il testo */
.pc-grid{grid-template-columns:1fr minmax(0,1.15fr)}

/* Una foto per volta, che si dissolve nella successiva. */
.pc-vetrina{position:relative;height:clamp(330px,34vw,470px)}
.pc-vetrina .pv{position:absolute;top:50%;left:0;opacity:0;
  transform:translateY(-50%) scale(1.02);
  transition:opacity .6s var(--ease),transform .9s var(--ease);
  overflow:hidden;background:var(--bg-warm)}
.pc-vetrina .pv.on{opacity:1;transform:translateY(-50%) scale(1)}
.pc-vetrina img{width:100%;height:100%;object-fit:cover;display:block}
/* quattro ingombri diversi: la forma cambia a ogni cambio */
.pc-vetrina .alta   {height:100%;aspect-ratio:3/4}
.pc-vetrina .media  {height:84%; aspect-ratio:1}
.pc-vetrina .bassa  {height:72%; aspect-ratio:4/3}
.pc-vetrina .piccola{height:58%; aspect-ratio:1}
@media(prefers-reduced-motion:reduce){
  .pc-vetrina .pv{transition:none}
}

/* titolo centrato sopra, poi testo a sinistra e foto a destra.
   Le foto tornano alla misura di prima, cioe' grandi: la vetrina occupa
   quasi due terzi della riga. */
.pc-grid{grid-template-columns:.72fr minmax(0,1.5fr);gap:clamp(2rem,4vw,4rem);
  align-items:center}
.pc-testo p{max-width:32ch}
.pc-vetrina{height:clamp(400px,44vw,620px)}

/* Le due colonne erano larghe piu' del loro contenuto, quindi testo e foto
   galleggiavano lontani con un vuoto in mezzo e il blocco risultava
   sbilanciato a destra. Ora le colonne valgono quanto quello che contengono
   e la coppia viene centrata nella pagina. */
.pc-grid{grid-template-columns:minmax(0,360px) auto;justify-content:center;
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.pc-vetrina{width:clamp(300px,33vw,470px)}
.pc-testo p{max-width:none}
@media(max-width:900px){
  .pc-grid{grid-template-columns:1fr;justify-content:stretch}
  .pc-vetrina{width:100%;height:clamp(320px,72vw,420px)}
}

/* testo centrato anche lui, come il titolo sopra */
.pc-testo{text-align:center}
.pc-testo p{margin-left:auto;margin-right:auto}

/* Le foto erano centrate nel loro riquadro: quelle larghe sporgevano verso
   sinistra e finivano addosso al testo, quelle strette restavano lontane.
   Ancorandole tutte al bordo sinistro la distanza dal testo e' sempre la
   stessa, e a variare e' il lato verso il margine della pagina. */
.pc-vetrina .pv{left:0;transform:translateY(-50%) scale(1.02)}
.pc-vetrina .pv.on{transform:translateY(-50%) scale(1)}
.pc-grid{gap:clamp(2.4rem,5.5vw,5.5rem)}

/* misure ravvicinate: restano quattro forme diverse (verticale, quasi
   quadrata, quadrata, verticale morbida) ma senza salti di ingombro */
.pc-vetrina .alta   {height:100%;aspect-ratio:3/4}
.pc-vetrina .media  {height:94%; aspect-ratio:5/6}
.pc-vetrina .bassa  {height:88%; aspect-ratio:1}
.pc-vetrina .piccola{height:92%; aspect-ratio:4/5}

/* ============================================================
   19/8 — tutti i pulsanti alla stessa misura.
   Quello della hero della home era rimasto a .72rem con la spaziatura piu'
   larga: 41px di altezza contro i 51 di tutti gli altri.
   ============================================================ */
.hero-cta .btn{font-size:.82rem;letter-spacing:.16em;padding:1em 2em}
.pp-testo .btn{padding:1em 2em}

/* "Invia richiesta" e' un <button>, gli altri sono <a>: i browser danno ai
   button un'interlinea propria invece di ereditare quella della pagina, e
   veniva 6px piu' basso. Dichiarandola esplicitamente sono tutti uguali. */
.btn{line-height:1.7}

/* la frase di chiusura torna alla misura di prima */
.pc-testo .pc-claim{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.28;
  margin:22px 0 28px}

/* ============================================================
   20/8 — LA CASA: la riga dei servizi sotto ogni camera prende
   l'icona del letto (niente piu' metrature), e sotto le camere
   arriva la fascia "altri spazi" a due colonne.
   ============================================================ */

/* Icona + testo sulla stessa riga. Il commento diceva gia' "allineati
   alla PRIMA RIGA e non al centro", ma il codice faceva il contrario:
   con `center`, appena la scritta va a capo (e sul telefono va a capo
   sempre) l'icona scende a meta' e sembra staccata dal testo. (18/9) */
.cam .mini{display:flex;align-items:flex-start;gap:.7em}
/* 25/9 — qui c'era `margin-top:.15em`, che spingeva il disegno in giu'.
   Era gia' sbagliato da solo, ma il guasto vero sta nei disegni: dentro
   il loro riquadro da 24 unita' non sono centrati, stanno nella meta'
   bassa (il letto a un cuscino va da 9 a 19, il divano da 6 a 20).
   Il margine sommava il suo 1,8 px a quel dislivello e l'icona finiva
   visibilmente sotto la riga di testo.
   Misurato togliendolo: il centro dell'inchiostro e quello della prima
   riga restano entro mezzo pixel su tutte e due le camere.
   Se un domani si rifanno le icone, il posto giusto dove sistemarlo e'
   il disegno, non questo margine. */
.cam .mini svg{width:24px;height:18px;flex:none;fill:none;stroke:var(--rosa);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* due colonne divise da una linea. La colonna del terrazzo e' piu'
   larga perche' ha tre riquadri invece di due: cosi' i riquadri
   restano della stessa misura in tutte e due. */
/* ha la sua intestazione, quindi non serve piu' incollarla
   alla sezione delle camere */
.alt-grid{display:grid;grid-template-columns:2fr 3fr;
  gap:clamp(2.6rem,6vw,5rem);align-items:start}
.alt-col h3{font-size:clamp(1.5rem,2.4vw,2.05rem);margin-bottom:24px}

.alt-foto{display:grid;gap:clamp(.9rem,1.8vw,1.4rem)}
.alt-foto.due{grid-template-columns:repeat(2,1fr)}
.alt-foto.tre{grid-template-columns:repeat(3,1fr)}
.alt-foto .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft);
  margin-bottom:14px}
.alt-foto .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.alt-foto figure:hover .ph img{transform:scale(1.03)}
.alt-foto figcaption{font-size:.86rem;line-height:1.6;color:var(--dim)}
.alt-foto figcaption b{display:block;font-family:var(--serif);font-weight:500;
  font-size:1.12rem;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}

/* segnaposto finche' non arrivano le foto di cucina e bagno */
.alt-foto .ph.vuota{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line)}
.alt-foto .ph.vuota span{font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}

@media(max-width:900px){
  .alt-grid{grid-template-columns:1fr;gap:3rem}
  .alt-foto.tre{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .alt-foto.due,.alt-foto.tre{grid-template-columns:1fr}
}

/* chiusure di pagina: l'invito a prenotare su La casa, le guide su Contatti.
   I 22px fra titolo e testo sono la misura usata nel resto del sito
   (.split h2 e i titoli centrati di Esperienze): qui va ridichiarata
   perche' questi h2 non stanno dentro .split. */
.rimando h2,.guide h2{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-bottom:22px}
.rimando p,.guide p{margin:0 auto 34px;color:var(--dim);line-height:1.9}
/* la frase sta su una riga sola: senza limite di larghezza va a capo
   solo quando lo schermo lo impone davvero, non a meta' frase */
.rimando p{max-width:none}
.guide p{max-width:54ch}


/* ============================================================
   21/8 — stacco occhiello/titolo uguale ovunque.
   La regola `.shead h2,.headc h2{margin-top:0}
/* la riga di presentazione sotto a un titolo centrato: senza un freno
   si stende su tutta la larghezza del contenitore e diventa una riga
   sottile lunga un metro, che nessuno legge.
   E le serve aria sopra: attaccata al titolo sembrava la seconda riga
   del titolo, non una frase a parte. */
.headc p{max-width:58ch;margin:0 auto;color:var(--dim)}
.headc h2 + p{margin-top:20px}` era nata per i
   titoli SENZA occhiello, ma li colpiva tutti: dove l'occhiello
   c'era, finiva appiccicato al titolo (0px), mentre nelle sezioni
   a due colonne ne restavano 16 (.split h2). Qui si ridanno i 16
   solo quando l'occhiello precede davvero il titolo.
   ============================================================ */
.over + h2{margin-top:16px}

/* ============================================================
   22/8 — ESPERIENZE: blocchi grandi alternati, foto a meta'
   schermo e testo dall'altra parte. I titoli portano i nomi
   propri dei luoghi: e' con quelli che la gente cerca.
   ============================================================ */
.esp-hero{height:clamp(420px,58vh,620px)}
.esp-hero img{width:100%;height:100%;object-fit:cover;display:block}
.esp-hero .pp-testo h1{font-size:clamp(2rem,4.2vw,3.4rem)}

/* le due guide, in cima */
.ga-intro{max-width:52ch;margin:18px auto 0;color:var(--dim)}

/* La sezione ha piu' aria delle altre per un motivo pratico: la guida
   aperta e' alta quasi il doppio della copertina chiusa, e senza questo
   spazio uscirebbe di sopra sotto la testata e di sotto nella sezione
   dopo. Lo spazio serve al momento in cui si guarda, non a quello fermo. */
.guide-alto{padding-top:165px;padding-bottom:165px}

/* 22/8 — LE NOSTRE GUIDE: testo a sinistra, le due copertine a destra.
   Le copertine sono i PDF veri, appoggiate una accanto all'altra e
   ruotate di poco, come due quaderni posati sul tavolo. La rotazione e'
   piccola apposta: di piu' diventa un collage, e questo sito non ne ha.
   Passandoci sopra si raddrizzano.
   L'elenco delle due guide usa .eb-lista, la stessa dei blocchi dei
   luoghi qui sotto: nome, dato in evidenza, descrizione. E' gia' il
   modo in cui questa pagina presenta le cose. */
/* senza l'occhiello sopra, il titolo non ha piu' niente da cui staccarsi */
.gd-in h2{margin-top:0}
.gd-in{display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
/* 22/8 — le guide.
   Al passaggio del mouse non succede piu' niente di acrobatico: la
   copertina si raddrizza e compare la scritta che dice di cliccare.
   Prima si sfogliavano da sole e venivano avanti verso chi guardava:
   troppo, e a pagina piccola non si leggeva comunque niente. Lo
   sfogliamento vive nel lettore, dove serve.
   I fogli restano nel codice perche' e' da li' che il lettore prende
   le pagine, ma non si girano mai qui dentro. */
.cop-due{display:flex;justify-content:center;gap:clamp(1rem,2.4vw,2rem)}
.cop{position:relative;width:min(46%,240px);aspect-ratio:990/1400;cursor:pointer;
  transition:transform .5s var(--ease)}
/* appoggiate storte di poco, come due quaderni posati sul tavolo */
.cop:first-child{transform:rotate(-3deg) translateY(10px)}
.cop:last-child{transform:rotate(2.4deg) translateY(-10px)}
.cop:hover,.cop:focus-visible{transform:rotate(0) translateY(-8px)}
.cop:focus-visible{outline:2px solid var(--rosa);outline-offset:6px}

.cop .pg{position:absolute;inset:0}
.cop .pg .retro{display:none}
.cop .pg .fronte{position:absolute;inset:0}
.cop .pg .fronte img{width:100%;height:100%;object-fit:cover}
/* solo la copertina si vede: le pagine stanno sotto e servono al lettore */
.cop .pg:not(:last-child){visibility:hidden}

.cop::before{content:'';position:absolute;inset:0;z-index:2;
  box-shadow:0 22px 50px -18px rgba(44,24,16,.38),0 2px 8px rgba(44,24,16,.10)}

/* l'invito a cliccare: velo e scritta, solo al passaggio */
.cop .sfoglia{position:absolute;inset:0;z-index:3;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(20,12,8,.42);opacity:0;transition:opacity .4s var(--ease)}
.cop:hover .sfoglia,.cop:focus-visible .sfoglia{opacity:1}
.cop .sfoglia b{font-family:var(--sans);font-size:.64rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.7);border-radius:60px;padding:.72em 1.35em}
.cop .sfoglia span{font-family:var(--sans);font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}

@media(prefers-reduced-motion:reduce){
  .cop,.cop .sfoglia{transition:none}
}

/* La sezione ha piu' aria delle altre per un motivo pratico: la guida
   aperta e' alta quasi il doppio della copertina chiusa, e senza questo
   spazio uscirebbe di sopra sotto la testata e di sotto nella sezione
   dopo. Lo spazio serve al momento in cui si guarda, non a quello fermo. */
.guide-alto{padding-top:165px;padding-bottom:165px}

/* 22/8 — LE NOSTRE GUIDE: testo a sinistra, le due copertine a destra.
   Le copertine sono i PDF veri, appoggiate una accanto all'altra e
   ruotate di poco, come due quaderni posati sul tavolo. La rotazione e'
   piccola apposta: di piu' diventa un collage, e questo sito non ne ha.
   Passandoci sopra si raddrizzano.
   L'elenco delle due guide usa .eb-lista, la stessa dei blocchi dei
   luoghi qui sotto: nome, dato in evidenza, descrizione. E' gia' il
   modo in cui questa pagina presenta le cose. */
/* senza l'occhiello sopra, il titolo non ha piu' niente da cui staccarsi */
.gd-in h2{margin-top:0}
.gd-in{display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
/* 22/8 — le guide si sfogliano.
   Ogni guida e' una pila: copertina, due pagine vere prese dal PDF, e
   in fondo un cartoncino disegnato con gli stili del sito che invita a
   prenotare. Al passaggio del mouse i fogli girano uno per volta e
   resta scoperto il cartoncino; uscendo tornano al loro posto.
   Ogni foglio ha due facce: davanti la pagina, dietro un rettangolo
   color carta. Senza il retro, girando si vedrebbe la pagina
   specchiata, che e' l'errore classico di questo effetto. */
.cop-due{display:flex;justify-content:center;gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:900px){
  .gd-in{grid-template-columns:1fr;gap:2.6rem}
  .cop{width:min(44%,200px)}
}


/* i blocchi: foto che arriva al bordo dello schermo da un lato */
.eb{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  background:var(--bg)}
/* il fondo dei blocchi e' dichiarato, non calcolato sul numero della
   sezione: cosi' non cambia da solo quando se ne aggiunge o toglie una */
.eb.crema{background:var(--bg-soft)}
.eb-foto{height:100%;min-height:clamp(340px,46vw,560px);overflow:hidden;background:var(--bg-soft)}
.eb-foto img{width:100%;height:100%;object-fit:cover;display:block}
.eb-testo{padding:clamp(3rem,6vw,5.5rem) clamp(1.6rem,5vw,5rem)}
.eb.rovescio .eb-foto{order:2}
.eb.rovescio .eb-testo{order:1}
.eb-testo h2,.acqua-in h2,
.montagna .headc h2,.sport .headc h2,
.tavola h2{font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1.15;margin:14px 0 26px}

.eb-lista{list-style:none;display:flex;flex-direction:column;gap:20px;max-width:44ch}
.eb-lista li{color:var(--dim);font-size:.94rem;line-height:1.6}
.eb-lista b{display:block;font-family:var(--serif);font-weight:500;font-size:1.16rem;
  color:var(--ink);letter-spacing:-.01em}
/* il tempo da casa e' l'informazione piu' preziosa delle guide:
   sta in evidenza sotto il nome, non annegato nel testo */
.eb-lista span,.cam .quando{display:block;font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rosa);margin:3px 0 6px}
.eb-altro{margin-top:26px;font-size:.88rem;font-style:italic;color:var(--soft);max-width:44ch}

/* 22/8 — non tutte le foto arrivano al bordo dello schermo.
   Prima erano tutte a filo e si alternavano destra-sinistra: alla seconda
   si era gia' capita la regola e le tre dopo non aggiungevano niente. E
   comunque nel resto del sito le foto stanno dentro il contenitore, quindi
   cinque di fila a tutta larghezza erano la sezione a fare storia a se'.
   Ora il ritmo e' fuori, dentro, dentro, fuori, dentro: si nota che
   cambiano, non si indovina quando.
   Il 6% e' il margine del contenitore del sito (l'88% ne lascia sei per
   parte), quindi le foto "dentro" finiscono dove finisce il testo delle
   altre sezioni, non a un margine inventato. */
/* l'intestazione che annuncia i blocchi */
.anteprima h2{font-size:clamp(2.2rem,4.8vw,4rem);margin:12px 0 18px}
.anteprima p{color:var(--dim);max-width:52ch;margin:0 auto}

@media(max-width:900px){
  .eb{grid-template-columns:1fr}
  .eb.rovescio .eb-foto{order:1}
  .eb.rovescio .eb-testo{order:2}
  .eb-foto{min-height:260px;max-height:44vh}
}

/* ============================================================
   21/8 — la testata de La casa allineata a quella della home.
   Misurate a 1440px, le differenze erano tre e nessuna era quella
   che si vedeva a occhio: il titolo stava a 96px contro 73,6, il
   paragrafo era largo 440 contro 506 e il pulsante stava 40 dal
   fondo invece di 63. Le distanze fra titolo, testo e pulsante
   erano gia' identiche (26 e 18).
   ============================================================ */
.pp-testo h1{font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.02}
.pp-testo p{max-width:46ch}
/* La home NON usa un valore fisso: e' clamp(3rem,7vh,5.2rem), cioe'
   segue l'altezza della finestra. Il 63px che avevo messo combaciava
   solo su uno schermo alto 900. Qui si ripete la stessa formula. */
.phero-piena .pp-testo{padding-bottom:clamp(3rem,7vh,5.2rem)}

/* Su telefono la home stringe la colonna all'88% e alza il pulsante a
   51 dal fondo: qui restavano 92% e 63, cioe' testo piu' a sinistra e
   pulsante piu' basso. Stessi numeri anche qui. */
@media(max-width:820px){
  .phero-piena .pp-testo{width:88%;padding-bottom:3.2rem}
}

/* Perche' "La Casa" sembrava piu' staccato dal testo pur avendo gli
   stessi 26px: in home il titolo finisce con "Lago Maggiore", e la g
   scende sotto la riga riempiendo lo spazio. "La Casa" non ha nessuna
   lettera che scende, quindi sotto le lettere resta il vuoto del
   contenitore e lo stacco visto dall'occhio passava da 27 a 48px.
   Il recupero e' in em, cosi' segue il titolo quando rimpicciolisce
   sul telefono invece di restare un numero fisso. */
/* ATTENZIONE: questo recupero dipende dal TESTO del titolo, non dal
   layout. "Un posto da chiamare casa." su schermo largo finisce con
   la p di "posto", che scende sotto la riga e riempie lo spazio: li'
   lo scarto con la home e' di 1-3px e non serve toccare niente. Sotto
   i 414px va a capo e l'ultima riga resta senza lettere discendenti,
   quindi si apre un vuoto di 10-11px. Se un domani il titolo cambia,
   questa riga va rimisurata. */
/* ATTENZIONE: dipende dal TESTO del titolo, non dal layout. "chiamare
   casa." non ha nessuna lettera che scende sotto la riga, quindi sotto
   le lettere resta il vuoto del contenitore e lo stacco visto dall'occhio
   passava da 27-30 a 41-49px. Il recupero misurato e' 0,29 volte il corpo
   del titolo a ogni larghezza, quindi si esprime in em e segue il testo
   quando rimpicciolisce. Se il titolo cambia, va rimisurato. */
/* NIENTE correzione del margine qui sotto, e vale la pena spiegare
   perche'. Il titolo de La casa finisce con "casa", senza lettere che
   scendono sotto la riga; la home finisce con "Maggiore", dove la g
   scende. Guardando il solo inchiostro sembrano staccati in modo
   diverso, ma correggendo QUELLO si sbaglia: il testo si alza di 20px
   rispetto alla riga di base e diventa appiccicato davvero. La misura
   che conta e' da riga di base a riga di base, e con margine zero
   viene uguale in tutte e due. */

/* La foto del tramonto e' panoramica: nel riquadro 4/5 delle altre
   sezioni perderebbe il lago ai lati, quindi qui il riquadro e' 4/3. */
.breve .im{aspect-ratio:4/3}
.breve h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:18px}
.breve>.wrap>div>p{color:var(--dim);margin-bottom:8px;max-width:38ch}

/* La fascia dei numeri su La casa. Due correzioni rispetto al modello:
   le cifre di default del Cormorant sono "antiche" (il 6 e il 3 scendono
   sotto la riga, il 2 no), quindi le etichette sotto ballavano; e la
   frase a 20ch spezzava "tutta per / voi". */
.band .stat .n{font-variant-numeric:lining-nums;line-height:1}
.band .stats{align-items:flex-start}
#spazi q{max-width:26ch}

/* Introduzione de La casa: solo testo, misura da lettura comoda. */
.intro-casa .wrap{max-width:820px}
.intro-casa p{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.85;
  color:var(--dim);text-align:center}
.intro-casa p+p{margin-top:22px}
.posizione h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.posizione p{color:var(--dim);margin-bottom:16px}
.posizione p:last-child{margin-bottom:0}

/* Il tramonto e' panoramico: qui il riquadro va in 4/3, se no il lago
   ai lati si perde (stessa ragione della fascia che c'era prima). */
.posizione .im{aspect-ratio:4/3}
/* i due paragrafi dell'introduzione sono in serie, non uno solo */
.intro-casa .big-say+.big-say{margin-top:26px}

/* 22/8 — chiusure di pagina: niente riga fra il disegno e il testo, e
   titolo tutto nero (l'accento rosa restava solo sul pre-footer e
   faceva a pugni con la sobrieta' del resto). */
.ch-news{border-left:0;padding-left:clamp(2rem,4vw,3.4rem)}
@media(max-width:860px){
  .ch-news{border-top:0;padding-top:0}
}
.chiusa h2 em{color:inherit;font-style:normal}

/* Chiusura specchiata (La casa): stessa famiglia della home, ma il
   testo a sinistra e il fiore a destra, cosi' non e' un copia e incolla.
   Si scambiano le colonne senza toccare l'ordine nel documento, che per
   chi legge con la tastiera o con lo schermo deve restare testo-dopo-fiore. */
.ch-grid.specchiata{grid-template-columns:.85fr 1.15fr}
/* Il disegno e' spinto in fondo alla sua colonna (justify-content:flex-end):
   in home questo lo avvicina al testo, che sta a destra. Specchiando, il
   fiore finisce nella colonna di destra e quella stessa regola lo allontana.
   Qui va spinto dalla parte opposta, verso il testo. */
.ch-grid.specchiata .ch-dis{order:2;justify-content:flex-start}
.ch-grid.specchiata .ch-news{order:1;padding-left:0;padding-right:clamp(2rem,4vw,3.4rem)}
@media(max-width:860px){
  .ch-grid.specchiata .ch-dis{order:1}
  .ch-grid.specchiata .ch-news{order:2;padding-right:0}
}

/* 22/8 — "un pensiero prima di partire" e le chiusure di pagina tornano
   sul crema base, lo stesso della prima sezione dopo la testata. */
.quad{background:var(--bg)}
.chiusa{background:var(--bg)}
/* La chiusura sta sul crema base. Su La casa la precede "In collina",
   che e' sul crema alterno, quindi lo stacco c'e' gia' e la riga in
   cima non serve. */
.chiusa{border-top:0}

/* ============================================================
   22/8 — chiusure di pagina centrate DAVVERO. Prima la griglia
   aveva due colonne in frazioni, che si spartiscono tutta la
   larghezza disponibile: il testo (largo 40 caratteri) e il fiore
   (270px) non la riempivano, e il gruppo restava schiacciato a
   sinistra con un buco a destra. Ora le colonne si dimensionano
   sul contenuto e il gruppo si centra rispetto alla pagina.
   ============================================================ */
.ch-grid{grid-template-columns:auto auto;justify-content:center;
  align-items:center;gap:clamp(2.5rem,5vw,4.5rem)}
.ch-news{max-width:26rem;padding-left:0}
.ch-grid.specchiata{grid-template-columns:auto auto}
.ch-grid.specchiata .ch-news{padding-right:0}
.ch-dis{justify-content:center}
.ch-grid.specchiata .ch-dis{justify-content:center}
.ch-dis .tela-disegno{width:270px}

@media(max-width:860px){
  .ch-grid,.ch-grid.specchiata{grid-template-columns:1fr;justify-items:center}
  .ch-news{text-align:center;max-width:32rem}
  .ch-news p{margin-left:auto;margin-right:auto}
  .ch-dis .tela-disegno{width:min(56%,200px)}
}

/* PROVA 22/8 — "In collina" su fondo scuro. I paragrafi di quella
   sezione erano sul grigio caldo da leggere su chiaro: qui vanno
   schiariti, se no spariscono. */
.sec.dark.posizione p{color:rgba(250,246,241,.82)}

/* Su fondo scuro il corsivo dei titoli diventa rosa chiaro (regola
   generale .sec.dark em). Qui non serve: il titolo resta tutto bianco. */
.sec.dark.posizione h2 em{color:inherit}

/* La sottolineatura della voce di menu nasceva da DUE regole diverse:
   quella vecchia per la voce attiva la metteva a -7px sotto il testo,
   quella nuova (hover e attiva insieme) a 0. Risultato: passando col
   mouse su una voce, la sua riga usciva a un'altezza diversa da quella
   della pagina in cui ci si trova. Ora e' una sola per tutte e due. */
.hnav a.on::after{bottom:0}

/* ============================================================
   22/8 — RIPRISTINO. Ripulendo il CSS della vecchia Esperienze
   ho tagliato un pezzo piu' largo del dovuto e con lui sono
   sparite queste regole: il filmato della testata de La casa
   (senza posizione assoluta restava nel flusso e spingeva il
   testo fuori dallo schermo) e le distanze delle due testate,
   allineate a fatica il 21/8.
   ============================================================ */

/* il filmato riempie la testata e sta sotto i veli, come faceva la foto */
.phero-piena .pp-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

/* testo a sinistra, colonna larga come quella della home (92% / 1500px),
   cosi' il titolo parte dallo stesso punto nelle due pagine */
.pp-testo{text-align:left;width:92%;max-width:1500px}
.pp-testo p{margin-left:0;margin-right:auto;max-width:46ch}

/* stesso corpo del titolo della home e stessa distanza dal fondo:
   il valore e' una formula, non un numero fisso, perche' segue
   l'altezza della finestra */
.pp-testo h1{font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.02}
.phero-piena .pp-testo{padding-bottom:clamp(3rem,7vh,5.2rem)}

/* 26px fra titolo e testo, 18 fra testo e pulsante, in tutte e due le
   testate. In home serve `.hero .hero-cta` perche' la regola che dava
   i 34px e' scritta cosi' e batte il solo `.hero-cta`. */
.hero-sub{margin-top:26px;margin-bottom:18px}
.hero .hero-cta{margin-top:0}
.pp-testo p{margin-top:26px;margin-bottom:18px}
.pp-testo .btn{margin-top:0}

@media(max-width:820px){
  .phero-piena .pp-testo{width:88%;padding-bottom:3.2rem}
}

/* la camelia del marchio al posto del rombo fra le sezioni: senza misura
   l'immagine usciva a grandezza naturale (persa nel taglio del 22/8) */
.orn img{width:34px;height:34px;object-fit:contain;display:block}

/* ============================================================
   26/8 — PRENOTA, pagina a se'.
   La prenotazione non e' piu' un pezzo di Contatti: ha una sua
   pagina, e tutti i "Prenota ora" del sito puntano li'.
   La testata e' .phero, la fascia scura senza foto che era di
   Contatti ed e' rimasta libera. Qui e' quella giusta: prima di
   un compito da fare, una schermata di foto e' un ostacolo.
   ============================================================ */
.phero.stretta{padding:170px 0 64px}
.phero.stretta h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.phero.stretta p{font-size:1.02rem;margin-top:16px}
@media(max-width:820px){ .phero.stretta{padding:150px 0 48px} }

/* la voce della testata quando sei gia' sulla pagina che porta */
.call.on{background:var(--rosa);color:#fff;border-color:var(--rosa)}
header.solid .call.on{color:#fff}

/* modulo sotto a un titolo centrato: il pulsante appeso a sinistra
   sotto a tutto quel centrato sembrava scivolato via. Solo il pulsante
   e l'esito: i campi restano larghi quanto il modulo, se no diventa una
   colonna di scatole di larghezze diverse. */
.frm-centrata > .btn,
.frm-centrata > button{align-self:center}
.frm-centrata .frm-esito{text-align:center}

/* le spunte: qui l'etichetta va accanto alla casella, non sopra, e non
   in maiuscoletto come le altre, perche' e' una frase da leggere */
.frm-spunta{flex-direction:row!important;align-items:flex-start;gap:12px!important;
  text-transform:none!important;letter-spacing:0!important;font-size:.88rem!important;
  font-weight:400!important;color:var(--dim)!important;line-height:1.55;cursor:pointer}
.frm-spunta input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--rosa)}
.frm-spunta a{color:var(--rosa);text-decoration:underline;text-underline-offset:2px}
/* al posto della spunta (21/10): la stessa frase, senza casella */
.frm-nota{margin:0;font-size:.88rem;line-height:1.55;color:var(--dim)}
.frm-nota a{color:var(--rosa);text-decoration:underline;text-underline-offset:2px}
.frm-centrata .frm-nota{text-align:center}

/* ============================================================
   26/8 — CONTATTI rimessa in ordine.
   L'ordine adesso segue quello che uno vuole fare: prenotare,
   capire come funziona, curiosare, e solo alla fine sapere dove
   siamo e come ci si arriva.
   ============================================================ */

/* l'introduzione sotto al titolo della prenotazione: stessa misura
   dei paragrafi del sito, con lo stacco prima del modulo */
.prenota-intro{color:var(--dim);max-width:54ch;margin:16px 0 34px}

/* --- INSTAGRAM · testo a sinistra, otto foto a destra ---
   Le foto sono quadrate perche' e' il taglio con cui la gente
   riconosce Instagram: il rettangolo non direbbe la stessa cosa.
   Quattro per riga su tutta la larghezza, non otto: a otto tornavano
   della misura che avevano quando stavano strette accanto al testo,
   e l'idea era proprio farle piu' grandi.
   minmax(0,1fr) e non 1fr: con le frazioni nude le foto si prendono
   piu' spazio di quello che hanno, come gia' successo sui blocchi
   delle esperienze. */
/* la colonna delle foto si prende piu' spazio del testo: a parita' di
   quattro riquadri per riga, e' l'unico modo di farli piu' grandi */
.ig-in{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(2.2rem,4vw,4rem);align-items:center}
/* misura grande, la stessa di "Chi siamo" e di "Le nostre guide" su
   Esperienze: sono tutte aperture di sezione, non voci di elenco */
.ig-testo h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.08;font-weight:500;
  margin:0 0 24px}
.ig-testo p{color:var(--dim);max-width:40ch;margin-bottom:30px}
.ig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ig-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--bg-soft)}
.ig-grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease),opacity .35s var(--ease)}
.ig-grid a:hover img{transform:scale(1.06)}
/* passando su un riquadro gli altri si fanno da parte, come sulle
   copertine delle guide: e' lo stesso gesto, quindi lo stesso segnale */
.ig-grid:hover img{opacity:.55}
.ig-grid a:hover img{opacity:1}
/* il nome del profilo: firma sotto le foto, allineata a destra come il
   bordo della griglia. Non e' un secondo invito, l'invito e' il pulsante
   nel testo, quindi qui niente pulsante ma un segno leggero. */
.ig-lato{display:flex;flex-direction:column;gap:16px}
.ig-nome{align-self:flex-end;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  color:var(--soft);transition:color .3s var(--ease)}
.ig-nome svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
/* la lineetta che si allunga: lo stesso verso della freccia dei pulsanti */
.ig-nome i{display:block;width:34px;height:1px;background:currentColor;
  transition:width .4s var(--ease)}
.ig-nome:hover{color:var(--rosa)}
.ig-nome:hover i{width:52px}

/* --- DOMANDE FREQUENTI · <details>, l'apertura la fa il browser ---
   Niente JavaScript: funziona da tastiera, coi lettori di schermo e
   anche se lo script non parte. Il segno + ruota di 45 gradi e
   diventa una x, cosi' il verso dell'apertura si vede. */
.faq-lista{max-width:840px;margin:0 auto;border-top:1px solid rgba(250,246,241,.16)}
.faq-lista details{border-bottom:1px solid rgba(250,246,241,.16)}
.faq-lista summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;
  position:relative;font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.35rem);
  font-weight:500;color:var(--bg);transition:color .3s var(--ease)}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary:hover{color:#f5d4c8}
.faq-lista summary::after{content:'';position:absolute;right:6px;top:50%;
  width:13px;height:13px;margin-top:-7px;
  background:linear-gradient(var(--bg),var(--bg)) center/100% 1.5px no-repeat,
             linear-gradient(var(--bg),var(--bg)) center/1.5px 100% no-repeat;
  transition:transform .35s var(--ease)}
.faq-lista details[open] summary::after{transform:rotate(45deg)}
.faq-lista details p{color:rgba(250,246,241,.78);font-size:.95rem;line-height:1.75;
  max-width:62ch;padding:0 44px 26px 0;margin:0}
.faq-lista details p a{color:#f5d4c8;text-decoration:underline;text-underline-offset:2px}

/* --- INDIRIZZO E RECAPITI · mappa a sinistra, i tre recapiti a destra ---
   Provate anche in riga sotto al titolo con la mappa larga su tutta la
   pagina: cosi' pero' un disegno di strade pesava piu' dell'indirizzo,
   che e' la cosa che uno e' venuto a leggere. Adesso stanno alla pari. */
.rec{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.rec .cinfo{margin-top:0;gap:28px}
.rec .ci a,.rec .ci span{font-size:1.22rem;line-height:1.45}
.rec .ci a:hover{color:var(--rosa)}

/* la mappa e' lei stessa il collegamento. Passandoci sopra si scurisce
   e compare l'invito, la stessa cosa che fanno le copertine delle guide
   su Esperienze: stesso gesto, stesso segno. Il pulsante fisso in un
   angolo che c'era prima faceva a botte con quello della testata. */
.rec-mappa{position:relative;display:block;overflow:hidden;background:var(--bg-soft)}
.rec-mappa img{width:100%;height:auto;display:block;
  transition:transform 1.2s var(--ease)}
.rec-mappa:hover img{transform:scale(1.04)}
.rec-velo{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;background:rgba(20,12,8,.42);opacity:0;
  transition:opacity .4s var(--ease)}
.rec-mappa:hover .rec-velo,.rec-mappa:focus-visible .rec-velo{opacity:1}
.rec-velo b{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.7);padding:14px 26px}
/* l'attribuzione a OpenStreetMap resta sempre visibile: e' la licenza */
.rec-osm{position:absolute;right:0;bottom:0;z-index:3;font-family:var(--sans);
  font-size:.58rem;letter-spacing:.08em;color:var(--soft);
  background:rgba(250,246,241,.86);padding:3px 7px}

/* --- CHI SIAMO · testo a sinistra, la foto a destra ---
   La foto e' piccola apposta: e' un ritratto, non un panorama, e a
   tutta colonna avrebbe pesato piu' del testo che accompagna.
   Appoggiata storta con la cornice bianca: e' la stessa cartolina delle
   copertine delle guide su Esperienze, quindi non e' un'idea nuova ma
   un modo di fare che il sito ha gia'.
   L'inclinazione e' ferma: si raddrizzava al passaggio del mouse, ma
   qui non c'e' niente da aprire ne' da leggere sotto, quindi il
   movimento prometteva una cosa che non succede. */
.chi-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center}
/* titolo della misura grande, la stessa di "Le nostre guide" su
   Esperienze (.gd-in h2): questa e' un'apertura, non una voce di elenco */
.chi-in h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.08;font-weight:500;
  margin:0 0 24px}
.chi-in p{color:var(--dim);max-width:46ch}
.chi-in p + p{margin-top:16px}
.chi-foto{width:min(96%,420px);margin:0 auto}
.chi-storta{aspect-ratio:3/4;overflow:hidden;
  border:10px solid #fff;box-shadow:0 26px 60px rgba(44,24,16,.22);
  transform:rotate(2.6deg)}
.chi-storta img{width:100%;height:100%;object-fit:cover;object-position:center 56%;display:block}
@media(max-width:820px){
  .chi-in{grid-template-columns:1fr;gap:2.6rem}
  .chi-in p{max-width:none}
  .chi-foto{width:min(78%,320px)}
}



@media(max-width:820px){
  .ig-in{grid-template-columns:1fr;gap:2.4rem}
  .ig-testo p{max-width:none}
  .ig-grid:hover img{opacity:1}
  .rec{grid-template-columns:1fr;gap:2.4rem}
}

/* ============================================================
   25/8 — TESTATA DI CONTATTI: le chiavi col vaso blu.
   Era l'unica pagina rimasta con la vecchia fascia scura senza
   foto (.phero, che da qui non la usa piu' nessuno).
   La foto e' chiara, quindi il titolo bianco non ha su cosa
   appoggiarsi da solo: il velo standard basta su schermo largo,
   dove in basso a sinistra il piano e' un po' piu' scuro, ma su
   telefono il ritaglio cambia e sotto al titolo resta bianco.
   Qui il velo di fondo va piu' giu' e piu' scuro. Solo su
   telefono: farlo anche di la' spegnerebbe la luce della foto,
   che e' il motivo per cui e' stata scelta.
   ============================================================ */
@media(max-width:820px){
  .phero-piena.chiavi::after{background:linear-gradient(180deg,
    rgba(20,12,8,.40) 0%,rgba(20,12,8,.06) 20%,rgba(20,12,8,0) 38%,
    rgba(20,12,8,.42) 66%,rgba(20,12,8,.88) 100%)}
}

/* ============================================================
   22/8 — SCARTATA: la testata "mezzo e mezzo" di Esperienze.
   Non e' in nessuna pagina del sito, la usa solo la pagina di
   prova. Tenuta perche' il difetto non era suo: apriva in un
   modo diverso dalle altre due pagine, e questo non si aggiusta.
   Al posto della foto unica a tutta larghezza, il testo su crema
   a sinistra e otto luoghi che salgono piano a destra. Su una
   pagina che si chiama Esperienze, otto posti dicono piu' di uno.
   Le foto restano piccole apposta: quelle prese dalle guide sono
   a 800 pixel e ingrandite si sfaldano, qui non lo sono mai.
   La testata del sito sta compatta da subito (vedi app.js): su
   fondo chiaro il marchio e le voci, che sono bianche, sparirebbero.
   ============================================================ */
/* Altezza fissa e riga in minmax(0,1fr), non min-height: le otto foto in
   colonna sono alte 3700 pixel e con min-height se la prendevano tutta,
   spingendo il testo a meta' di quella colonna, fuori schermo. Cosi' la
   riga non puo' superare la sezione e la striscia viene tagliata.
   Le colonne in minmax(0,1fr) per lo stesso motivo in larghezza
   (stesso rimedio gia' in uso su .ga-grid). */
.th-mezzo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);overflow:hidden;
  background:var(--bg-soft);height:100vh}
.th-mezzo .testo{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,11vh,8rem) clamp(1.6rem,5vw,5rem) clamp(3rem,6vh,4.5rem);
  width:100%;max-width:640px;margin-left:auto}
.th-mezzo h1{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.06;margin:16px 0 22px}
.th-mezzo p{color:var(--dim);max-width:40ch;margin-bottom:30px;font-size:1.05rem}
.th-mezzo .btn{align-self:flex-start}

/* la striscia: due colonne che scorrono in su a velocita' diverse.
   Ogni colonna contiene le sue foto due volte e sale della propria
   meta': quando riparte da zero l'immagine sotto lo sguardo e' la
   stessa, quindi il giro non si vede. */
.nastro{position:relative;overflow:hidden;height:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;gap:14px;padding:14px;background:var(--bg-soft)}
.nastro .col{display:flex;flex-direction:column;gap:14px;animation:nastro-sale 46s linear infinite}
/* ritardo negativo: la colonna lenta parte gia' a meta' corsa, cosi' le due
   non sono allineate al caricamento e i riquadri non fanno le scalette */
.nastro .col.lenta{animation-duration:64s;animation-delay:-19s}
.nastro figure{aspect-ratio:3/4;overflow:hidden;background:var(--line)}
.nastro img{width:100%;height:100%;object-fit:cover}
@keyframes nastro-sale{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* i due veli in cima e in fondo: le foto entrano e escono sfumando
   nel fondo, cosi' non si vede il taglio netto del bordo.
   Il colore trasparente e' lo stesso --bg-soft: le sfumature non
   accettano una variabile a meta' corsa. */
.nastro::before,.nastro::after{content:'';position:absolute;left:0;right:0;height:110px;
  z-index:2;pointer-events:none}
.nastro::before{top:0;background:linear-gradient(180deg,#f3ece2,rgba(243,236,226,0))}
.nastro::after{bottom:0;background:linear-gradient(0deg,#f3ece2,rgba(243,236,226,0))}

/* Anche sul telefono resta a tutto schermo: il testo prende quello che gli
   serve e la striscia si mangia il resto della schermata. Non un'altezza
   fissa, se no su schermi corti il pulsante finisce sotto la piega. */
@media(max-width:900px){
  .th-mezzo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .th-mezzo .testo{max-width:none;margin:0;
    padding:clamp(6rem,11vh,8rem) clamp(1.6rem,5vw,5rem) clamp(2rem,4vh,3rem)}
  .nastro{height:auto}
}
@media(prefers-reduced-motion:reduce){ .nastro .col{animation:none} }

/* ============================================================
   22/8 — TESTATA DI ESPERIENZE: la colonna dei luoghi.
   Guscio identico a home e La casa (.phero-piena): schermo pieno,
   marchio grande, testo in basso a sinistra. Al posto della foto
   unica, otto luoghi che salgono in due colonne sulla meta' destra.
   La meta' sinistra resta fondo pieno, cosi' il titolo non ha
   niente sotto da spegnere.
   Il taglio verticale e' netto di proposito: sfumato sembrava che
   le foto finissero male, e in questo sito i bordi sono tutti netti.
   Prima di arrivarci sono passate una testata mezzo-e-mezzo su crema
   e una con tre foto in dissolvenza: la prima apriva in un modo
   diverso dalle altre pagine, la seconda mostrava un posto solo.
   Restano tutte in prova-testata-2.html.
   ============================================================ */
.esp-colonna{background:var(--ink)}
.striscia{position:absolute;top:0;bottom:0;right:0;left:48%;z-index:0;
  overflow:hidden;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);gap:10px;align-items:start}
/* le due colonne salgono a velocita' diverse e quella lenta parte gia'
   a meta' corsa, se no i riquadri fanno le scalette */
.striscia .col{display:flex;flex-direction:column;gap:10px;
  animation:striscia-sale 52s linear infinite}
.striscia .col:nth-child(2){animation-duration:68s;animation-delay:-21s}
.striscia figure{aspect-ratio:4/5;overflow:hidden;background:var(--line)}
/* .phero-piena mette le sue immagini a tutto riquadro in posizione
   assoluta, perche' li' l'immagine e' lo sfondo. Queste no: stanno
   nel flusso della loro colonna. */
.striscia img{position:static;width:100%;height:100%;object-fit:cover}
/* ogni colonna contiene le sue foto due volte e sale della propria
   meta': quando riparte da zero l'immagine sotto lo sguardo e' la
   stessa, quindi il giro non si vede */
@keyframes striscia-sale{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* del velo di .phero-piena qui serve solo la parte alta, che tiene
   leggibili le voci della testata quando passano su un cielo chiaro.
   In basso non c'e' niente da spegnere: e' fondo pieno. */
.esp-colonna::after{z-index:1;background:linear-gradient(180deg,
  rgba(20,12,8,.52) 0%,rgba(20,12,8,.18) 20%,rgba(20,12,8,0) 44%)}
.esp-colonna .pp-testo{z-index:2}

@media(max-width:900px){
  /* meta' schermo su un telefono sarebbe una fessura: le foto passano
     sopra e prendono la parte alta, il testo resta sotto sul fondo */
  .esp-colonna .striscia{left:0;bottom:auto;height:52%}
  /* qui pero' il marchio non ha piu' il fondo pieno sotto, come sul
     grande: sta sopra le foto, e quella di Villa Taranto e' un giardino
     in pieno sole. Il velo in alto va caricato. */
  .esp-colonna::after{background:linear-gradient(180deg,
    rgba(20,12,8,.74) 0%,rgba(20,12,8,.40) 13%,rgba(20,12,8,0) 32%)}
}
@media(prefers-reduced-motion:reduce){ .striscia .col{animation:none} }

/* ============================================================
   22/8 — IL LETTORE DELLE GUIDE.
   Al passaggio del mouse la guida si sfoglia da sola e si vedono
   i titoli; per leggere davvero serve una pagina grande, e a quel
   punto non e' piu' un effetto ma uno strumento: si apre al click,
   si gira al proprio ritmo, si chiude quando si vuole.
   Le misure sono in unita' di schermata (vh) e non in pixel: la
   pagina deve entrare intera in qualsiasi finestra, che e' tutto
   il senso di aprirla.
   ============================================================ */
.lettore{position:fixed;inset:0;z-index:200;background:rgba(20,12,8,.94);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.6rem,2vw,2rem);padding:72px clamp(.6rem,2vw,2rem) 84px;
  opacity:0;transition:opacity .35s var(--ease)}
.lettore[hidden]{display:none}
.lettore.aperto{opacity:1}

.lt-barra{position:absolute;top:0;left:0;right:0;height:66px;
  display:flex;align-items:center;gap:16px;padding:0 clamp(1rem,3vw,2.4rem);
  color:rgba(255,255,255,.9)}
.lt-tit{font-family:var(--serif);font-size:1.25rem}
.lt-conta{font-family:var(--sans);font-size:.64rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.lt-chiudi{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;
  font-size:2rem;line-height:1;padding:4px 10px;opacity:.75;transition:opacity .3s}
.lt-chiudi:hover{opacity:1}

/* la pagina: alta quanto la finestra lascia, larga di conseguenza */
.lt-pagina{height:100%;aspect-ratio:712/1007;max-width:100%;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.lt-pagina img{width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity .22s ease}
.lt-pagina.cambia img{opacity:0}

.lt-frec{background:none;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  width:52px;height:52px;flex:0 0 52px;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.lt-frec svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lt-frec:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.lt-frec[disabled]{opacity:.22;cursor:default}
.lt-frec[disabled]:hover{background:none;border-color:rgba(255,255,255,.3)}

.lt-piede{position:absolute;bottom:0;left:0;right:0;height:84px;
  display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2rem);
  padding:0 clamp(1rem,3vw,2.4rem);color:rgba(255,255,255,.7);
  font-family:var(--sans);font-size:.86rem}

@media(max-width:820px){
  /* sul telefono le frecce vanno sotto, ai lati non c'e' spazio */
  .lettore{flex-wrap:wrap;
    padding:60px .8rem calc(84px + env(safe-area-inset-bottom))}
  .lt-pagina{order:1;flex:1 1 100%;height:auto;width:100%;max-height:100%}
  /* Frecce e pulsante sulla STESSA riga in fondo. Prima le frecce
     galleggiavano sopra la pagina: nelle scansioni alte il foglio
     arrivava fin li' e ci finivano sopra. Tenerle piu' in alto voleva
     dire rubare altri 50px alla pagina, che sul telefono sono tanti. */
  /* z-index: il piede e' l'ULTIMO figlio del lettore, quindi la sua
     fascia (trasparente ma larga tutta) sta sopra alle frecce e si
     mangiava i tocchi. Da quando stanno sulla sua stessa riga, senza
     questo le frecce si vedono e non rispondono. */
  .lt-frec{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));
    width:48px;height:48px;flex:0 0 48px;z-index:2}
  .lt-frec.prec{left:5%}
  .lt-frec.succ{right:5%}
  /* Il pulsante c'era solo sul monitor. Qui resta, ma da solo e al
     centro: la didascalia "Il quaderno di casa, scritto dai nostri
     ospiti" andava a capo e spingeva il bottone in un angolo, storto.
     Su uno schermo stretto quella frase vale meno del pulsante: dice
     una cosa che si capisce gia' da sola guardando la pagina. */
  .lt-piede{height:auto;justify-content:center;
    padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
  .lt-piede span{display:none}
  .lt-piede .btn{font-size:.74rem;padding:.9em 1.8em;flex:none}
  /* Qui c'era .lt-frec{bottom:96px}, di quando le frecce stavano sopra
     al piede. Scritta DOPO quella che le porta in fondo, quindi vinceva
     lei e le frecce restavano alte, addosso alla pagina: era questa la
     riga che faceva sembrare non applicata la correzione. */
}


/* ============================================================
   22/8 — I BLOCCHI DI ESPERIENZE, quattro forme diverse.
   Prima erano cinque volte la stessa cosa a specchio: foto a
   meta' schermo di qua, testo di la', e viceversa. Alla seconda
   si era gia' capita la regola. Ora cambia l'impaginazione, non
   il lato: foto piena, foto piccola, fascia che scorre, schede.
   I fondi sono dichiarati uno per uno e non piu' calcolati sul
   numero della sezione, che era una regola che si rompeva ogni
   volta che se ne aggiungeva o toglieva una.

   24/8 — provato e scartato: tutti e quattro crema, divisi dalla
   camelia piccola della home. Funzionava, ma la pagina perdeva il
   respiro che le davano i cambi di fondo. Steven ha preferito
   tenere l'alternanza. Restano i fondi dichiarati blocco per blocco.
   ============================================================ */

/* 2 · giornate in acqua: testo largo, foto sola e verticale */
.acqua-in{display:grid;grid-template-columns:1fr .78fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:center}
.acqua-foto{aspect-ratio:3/4;overflow:hidden;background:var(--line)}
.acqua-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.acqua-foto:hover img{transform:scale(1.04)}

/* 3 · montagna: fascia di foto che scorre di lato, larga quanto lo schermo.
   Le altezze sono diverse fra loro apposta, se no e' una striscia di
   francobolli. La riga contiene le sue foto due volte e scorre della
   propria meta': quando riparte, sotto lo sguardo c'e' la stessa foto. */
/* la fascia di foto chiude la sezione: sotto non c'e' imbottitura, se no
   resta una striscia di marrone vuota e le foto sembrano galleggiare
   dentro il blocco invece di finirlo */
.sec.montagna{padding-bottom:0}
.montagna .headc{margin-bottom:34px}
.montagna .mt-lista{max-width:none;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.6rem)}
.sec.dark .eb-lista b{color:var(--bg)}
/* nella tavola l'elenco sta in colonna accanto alla foto, non su tre
   colonne come in montagna: gli serve solo la larghezza giusta */
.tavola .eb-lista{max-width:42ch}
.sec.dark .eb-lista li{color:rgba(250,246,241,.78)}
.fascia-oriz{overflow:hidden;margin-top:clamp(3rem,6vw,5rem)}
.fo-riga{display:flex;gap:14px;width:max-content;
  animation:fascia-scorre 58s linear infinite}
.fo-riga figure{overflow:hidden;background:rgba(255,255,255,.06)}
.fo-riga img{width:100%;height:100%;object-fit:cover;display:block}
.fo-riga .alta{width:clamp(180px,20vw,300px);aspect-ratio:3/4}
.fo-riga .media{width:clamp(220px,25vw,380px);aspect-ratio:1}
.fo-riga .bassa{width:clamp(260px,30vw,460px);aspect-ratio:4/3}
@keyframes fascia-scorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .fo-riga{animation:none} }

/* 4 · sport: tre schede in fila, la stessa costruzione delle camere */
.camere.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
/* il tempo da casa sta attaccato al nome, come negli elenchi degli altri
   blocchi: il titolo della scheda perde la sua distanza sotto */
.sport .cam h3{margin-bottom:2px}

@media(max-width:900px){
  .acqua-in{grid-template-columns:1fr;gap:2.4rem}
  .acqua-foto{max-width:380px}
  .montagna .mt-lista{grid-template-columns:1fr;gap:1.4rem}
  .camere.tre{grid-template-columns:1fr}
}


/* --- PAGINE DI TESTO (informativa privacy, condizioni) ---
   Una colonna sola e stretta: sono documenti da leggere, non da guardare.
   La misura e' in caratteri e non in pixel apposta, cosi' resta leggibile
   qualunque sia la dimensione del testo scelta dal lettore. */
.doc{max-width:72ch;margin:0 auto}
.doc h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;margin:56px 0 16px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.05rem;font-weight:600;font-family:var(--sans);
  letter-spacing:.02em;margin:32px 0 10px}
.doc p{color:var(--dim);line-height:1.85;margin-bottom:16px}
.doc ul{list-style:none;margin:0 0 20px;padding:0}
.doc li{color:var(--dim);line-height:1.8;padding-left:20px;position:relative;
  margin-bottom:10px}
.doc li::before{content:'';position:absolute;left:0;top:.75em;
  width:6px;height:1px;background:var(--rosa)}
.doc a{color:var(--rosa);text-decoration:underline;text-underline-offset:3px}
.doc b{color:var(--ink);font-weight:600}
/* il riquadro dei recapiti del titolare: e' il dato che un ospite viene
   a cercare qui dentro, non deve stare annegato nel testo */
.doc-box{background:var(--bg-soft);padding:28px 32px;margin:0 0 8px}
.doc-box p{margin-bottom:6px}
.doc-box p:last-child{margin-bottom:0}
.doc-agg{font-family:var(--sans);font-size:.85rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);margin-top:64px;
  padding-top:20px;border-top:1px solid var(--line)}

/* La riga "fa fede l'italiano", solo nelle pagine legali tradotte. Sta
   sopra la data dell'ultimo aggiornamento e prende lei il filo di
   separazione, se no ce ne sarebbero due uno sopra l'altro. La scrive
   services/camelia-sito/traduci.py: nella pagina italiana non esiste. */
.doc-fede{font-size:.88rem;line-height:1.7;color:var(--dim);
  margin-top:64px;padding-top:20px;border-top:1px solid var(--line)}
.doc-fede + .doc-agg{margin-top:26px;padding-top:0;border-top:0}

@media(max-width:820px){ .doc-box{padding:22px 20px} }
/* il link all'informativa nel piede: stessa discrezione del resto della
   riga, ma sottolineato, se no in mezzo a due righe di dati non si capisce
   che e' cliccabile */
footer .fbot a{color:rgba(250,246,241,.6);text-decoration:underline;
  text-underline-offset:3px;transition:.3s}
footer .fbot a:hover{color:#f5d4c8}

/* testata delle pagine di testo: il titolo e basta, centrato. Niente
   occhiello, niente sottotitolo: qui non c'e' niente da presentare. */
.phero.stretta.sola{padding:250px 0 100px;text-align:center}
.phero.stretta.sola h1{max-width:none;margin:0 auto}
@media(max-width:820px){ .phero.stretta.sola{padding:200px 0 70px} }

/* ============================================================
   12/9 — PRENOTA rimessa in piedi.
   Prima era una fascia scura vuota per tre quarti e poi un modulo
   che galleggiava da solo in mezzo al color crema: niente diceva
   cosa stai prenotando, a che condizioni, e cosa succede dopo che
   hai premuto invia. Le condizioni che contano stanno adesso nella
   testata, con lo stesso stile dei numeri della fascia in home:
   non c'e' un secondo stile nuovo, sono gli stessi.
   ============================================================ */
/* Titolo e sottotitolo con lo stesso trattamento delle altre pagine
   (La casa, Esperienze, Contatti): bianco pieno senza la parola in
   rosa, a sinistra, spezzato a mano, e sotto un sottotitolo tenuto
   stretto sulla misura di lettura. Li' quel testo sta sopra una foto a
   tutto schermo, qui sopra la fascia scura: cambia il fondo, non il
   modo di scrivere il titolo di una pagina. */
.phero.stretta.pagina{padding:210px 0 92px}
.phero.stretta.pagina h1{max-width:none;font-size:clamp(2.2rem,5.6vw,4.6rem);
  line-height:1.02;color:#fff}
.phero.stretta.pagina p{max-width:46ch;margin-top:26px;font-size:1.05rem}
@media(max-width:820px){ .phero.stretta.pagina{padding:180px 0 62px} }
/* Il modulo dentro un foglio, cosi' ha un perimetro e smette di
   galleggiare. Stesso fondo dei riquadri della privacy. */
.pren-foglio{background:var(--bg-soft);padding:clamp(28px,4vw,52px);border-radius:20px}
/* il foglio ha gia' il suo respiro dentro: col distacco pieno di .sec
   restava un vuoto di crema alto quanto la testata */
#modulo{padding-top:clamp(54px,7vw,88px)}


/* ============================================================
   12/9 — PANNELLO DI RICERCA della pagina Prenota.
   Due caselle in fila come su Booking: le date e gli ospiti.
   Ognuna apre un pannello sotto di se'. Il senso e' che uno
   decide il soggiorno guardando un calendario, non scrivendo
   due date in due campi separati senza sapere se sono libere.
   Le notti occupate arrivano da disponibilita.json, che oggi
   non esiste ancora: senza quel file il calendario mostra tutto
   libero e non mente, perche' non promette una conferma.
   ============================================================ */
.pren-bar{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:20}
.pb-box{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  padding:.95em 1.2em;border:1px solid var(--line);border-radius:14px;background:var(--card);
  font-family:var(--sans);cursor:pointer;transition:.25s;width:100%}
.pb-box:hover{border-color:var(--rosa)}
.pb-box.aperta{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(181,97,79,.14)}
.pb-l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.pb-v{font-size:.98rem;color:var(--ink)}
.pb-v.vuoto{color:var(--dim)}
/* il pannello si apre sopra al resto del modulo, non lo spinge giu' */
.pb-pop{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:30;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(44,24,16,.14);padding:24px;display:none}
.pb-pop.on{display:block}
.pb-pop.stretta{left:auto;right:0;width:min(420px,100%)}

/* --- calendario --- */
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-frec{border:1px solid var(--line);background:none;border-radius:50%;width:36px;height:36px;
  cursor:pointer;color:var(--ink);font-size:1rem;line-height:1;transition:.25s}
.cal-frec:hover:not(:disabled){border-color:var(--rosa);color:var(--rosa)}
.cal-frec:disabled{opacity:.3;cursor:default}
.cal-mesi{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.cal-m h4{font-family:var(--serif);font-size:1.15rem;font-weight:500;text-transform:none;
  letter-spacing:0;text-align:center;margin-bottom:14px;color:var(--ink)}
.cal-set,.cal-gg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-set div{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  text-align:center;padding-bottom:8px;font-weight:600}
.cal-d{border:none;background:none;font-family:var(--sans);cursor:pointer;border-radius:10px;
  padding:7px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.92rem;color:var(--ink);transition:background .18s,color .18s}
.cal-d .pz{font-size:.64rem;color:var(--dim);line-height:1}
.cal-d:hover:not(:disabled){background:var(--bg-soft)}
.cal-d:disabled{color:var(--line);cursor:default}
/* la notte occupata si barra: spenta e basta sembrerebbe fuori stagione */
.cal-d.occ{color:var(--line);cursor:default;text-decoration:line-through}
.cal-d.dentro{background:var(--bg-soft);border-radius:0}
.cal-d.estremo{background:var(--rosa);color:#fff;border-radius:10px}
.cal-d.estremo .pz{color:rgba(255,255,255,.75)}
.cal-vuoto{visibility:hidden}
.cal-piede{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:.84rem;color:var(--dim)}
.cal-pulisci{background:none;border:none;font-family:var(--sans);font-size:.84rem;
  color:var(--rosa);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* --- ospiti: i piu' e i meno --- */
.osp-riga{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.osp-riga + .osp-riga{border-top:1px solid var(--line)}
.osp-riga .et{font-size:.98rem;color:var(--ink)}
.osp-riga .et small{display:block;font-size:.8rem;color:var(--dim);margin-top:3px}
.step{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:4px}
.step button{width:34px;height:34px;border-radius:8px;border:none;background:none;cursor:pointer;
  font-size:1.2rem;line-height:1;color:var(--rosa);transition:.2s}
.step button:hover:not(:disabled){background:var(--bg-soft)}
.step button:disabled{color:var(--line);cursor:default}
.step .q{min-width:28px;text-align:center;font-size:1rem;color:var(--ink);
  font-variant-numeric:lining-nums}
/* l'eta' di ogni bambino, che compare solo quando serve */
.osp-eta{display:flex;flex-direction:column;gap:16px;padding:16px 0 4px;
  border-top:1px solid var(--line)}
/* L'eta' e' un campo vero, con la sua etichetta in maiuscoletto come
   tutti gli altri del modulo, non una tendina appesa a destra di una
   riga: e' un dato che va scelto, non una preferenza. */
.osp-eta .osp-campo{display:flex;flex-direction:column;align-items:stretch;gap:8px;
  font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:400}
.osp-et{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.osp-eta select{width:100%;padding:.85em 1em;border:1px solid var(--line);border-radius:12px;
  background:var(--card);font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.osp-eta select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgba(181,97,79,.14)}
/* la risposta che l'eta' fa comparire: e' il motivo per cui la chiediamo */
.osp-dice{font-size:.84rem;line-height:1.6;color:var(--dim);background:var(--bg-soft);
  border-radius:12px;padding:12px 14px;margin-top:2px}
/* .btn e' inline-flex senza justify-content: a larghezza piena la
   parola resta appiccicata a sinistra come se fosse un'etichetta. */
.osp-fatto{width:100%;margin-top:16px;justify-content:center}
.pb-nota{font-size:.82rem;color:var(--dim);margin-top:14px;line-height:1.6}

@media(max-width:820px){
  .pren-bar{grid-template-columns:1fr}
  .cal-mesi{grid-template-columns:1fr;gap:26px}
  .pb-pop{padding:18px}
  .pb-pop.stretta{width:100%}
  /* 21/10: sul telefono i due riquadri sono uno sotto l'altro e il
     pannello, appeso al fondo della barra, si apriva SOTTO "Ospiti" anche
     quando si sceglievano le date. Qui ogni pannello si apre subito sotto
     il suo riquadro e spinge giu' il resto, come una tendina. */
  #pb-data{order:1} #pop-data{order:2} #pb-osp{order:3} #pop-osp{order:4}
  .pb-pop{position:static}
}

/* ============================================================
   13/9 — testata centrata.
   La barra di ricerca era stata provata qui dentro, sulla meta'
   destra rimasta vuota. Tolta: la prenotazione finiva meta' nella
   testata e meta' nel modulo, e chi scorreva doveva ricordarsi
   cosa aveva gia' scelto. Sta tutta in cima al modulo.
   ============================================================ */
.phero.stretta.pagina.centro{text-align:center}
.phero.stretta.pagina.centro h1{margin:0 auto}
.phero.stretta.pagina.centro p{margin-left:auto;margin-right:auto}

/* Telefono: prefisso e numero affiancati. La casella del prefisso resta
   stretta e mostra solo "+39", il nome del paese si legge nell'elenco,
   che e' dove uno lo cerca: in una riga da due colonne non c'e' spazio
   per "+39 Italia" e il numero insieme. */
.tel{display:flex;gap:10px}
.tel input{flex:1;min-width:0}

/* ============================================================
   13/9 — le tendine nostre (paese, prefisso telefonico).
   Le <select> del browser non si possono vestire: font, colori e
   bordi li decide il sistema operativo, e in mezzo a campi tondi
   color crema si vedeva la differenza. E soprattutto non hanno un
   campo di ricerca: scrivere dentro una select funziona, ma e' una
   cosa che sanno in pochi, e davanti a 248 paesi gli altri si
   mettono a scorrere.
   ============================================================ */
.scelta{position:relative}
.sc-box{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:1em 1.1em;border:1px solid var(--line);border-radius:14px;
  background:var(--card);font-family:var(--sans);font-size:.98rem;color:var(--ink);
  text-align:left;cursor:pointer;transition:.25s;text-transform:none;letter-spacing:normal;
  font-weight:400}
.sc-box:hover{border-color:var(--rosa)}
.sc-box.aperta{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(181,97,79,.14)}
.sc-box.vuoto .sc-nome{color:var(--dim)}
.sc-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-frec{flex:0 0 auto;font-size:.62rem;color:var(--dim);line-height:1}
.sc-pop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 50px rgba(44,24,16,.14);overflow:hidden;display:none}
.sc-pop.on{display:block}
.sc-cerca{width:100%;border:none;border-bottom:1px solid var(--line);
  padding:.95em 1.1em;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:transparent}
.sc-cerca:focus{outline:none}
.sc-cerca::placeholder{color:var(--dim)}
.sc-lista{max-height:270px;overflow-y:auto;padding:6px;scrollbar-width:thin}
.sc-v{display:flex;align-items:baseline;gap:10px;width:100%;padding:.62em .8em;
  border:none;background:none;font-family:var(--sans);font-size:.94rem;color:var(--ink);
  text-align:left;cursor:pointer;border-radius:10px;transition:background .15s}
.sc-v .pre{color:var(--dim);font-variant-numeric:lining-nums;flex:0 0 auto}
/* una sola voce accesa alla volta: il puntatore muove la stessa
   evidenziazione delle frecce, non ne accende una seconda */
.sc-v.evid{background:var(--bg-soft)}
.sc-v.presa{background:var(--rosa);color:#fff}
.sc-v.presa .pre{color:rgba(255,255,255,.75)}
.sc-niente{padding:16px 14px;color:var(--dim);font-size:.9rem}
/* il prefisso e' stretto: il suo elenco no, se no i nomi lunghi si
   tagliano tutti e la ricerca diventa inutile */
.scelta.corta{flex:0 0 128px;width:128px}
.scelta.corta .sc-pop{width:min(330px,78vw);right:auto}
/* la tendina di si'/no non ha bisogno di 128px: due parole */
#sc-animale{flex:0 0 96px;width:96px}
#sc-animale .sc-pop{width:120px}
/* La voce vuota resta alta come le altre, se no non si riesce a cliccarla
   per togliere una risposta gia' data. Si distingue da un filetto
   sotto, che dice "da qui in giu' ci sono le risposte". */
.sc-v .nm:empty{display:block;min-height:1.25em}
.sc-v:has(.nm:empty){border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px}
@media(max-width:640px){ .scelta.corta .sc-pop{left:0} }


/* ============================================================
   13/9 — "Altre informazioni" e la coda della pagina.
   Sopra sta quello che serve per forza, qui sotto quello che si
   puo' saltare: senza uno stacco le tendine facoltative si
   leggevano come obbligatorie quanto l'email.
   ============================================================ */
.pren-altro{margin-top:14px;display:flex;flex-direction:column;gap:18px}
/* solo l'etichetta, senza il filetto che continuava verso destra: in una
   colonna sola di campi quel tratto non separava niente, faceva rumore */
.pren-sep{margin:26px 0 4px}
.pren-sep span{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--dim)}
.pren-altro label[hidden]{display:none}
/* Dentro "Altre informazioni" le note non portano margini propri: se no
   sotto il paragrafo degli animali restava il doppio dello spazio che
   c'era fra le altre domande. */
.pren-altro .frm-note{margin:0;max-width:64ch}

/* Qui i campi sono piccoli, tutti della stessa misura: sono domande
   facoltative e non devono pesare quanto il nome e l'email, che
   obbligatori lo sono. Prima la casella dell'animale era bassa e le
   tendine alte il doppio, e nella stessa riga si vedeva. */
.pren-altro .sc-box{padding:.5em .95em;font-size:.88rem;border-radius:10px;min-height:35px}
.pren-altro .sc-nome{line-height:1.35}
.pren-altro .an-txt{min-height:35px}
/* Una tendina senza risposta ha l'etichetta vuota, e senza questo si
   accartoccia: veniva alta 26px contro i 35 delle altre. Lo spazio
   unificatore tiene su la riga anche quando non c'e' niente scritto. */
.sc-nome:empty::after{content:"\00a0"}
.pren-altro .scelta{max-width:420px}
.pren-altro #sc-animale{flex:0 0 88px;width:88px}
/* La casella dell'animale: stessa altezza, stesso raggio e stesso corpo
   dei due pulsanti accanto. Con le misure di .frm input veniva alta il
   doppio e la riga sembrava storta.
   Si prende lo spazio che resta e sparisce quando la risposta e' no. */
/* Larga il giusto: ci si scrive "un cane di taglia media", non un tema.
   Prima si prendeva tutta la riga che restava. */
.an-txt{flex:0 1 320px;min-width:0;max-width:320px;
  padding:.5em .95em!important;font-size:.88rem!important;border-radius:10px!important}
.an-txt[hidden]{display:none}
.pren-coda{margin:22px auto 6px;text-align:center;font-size:.88rem;line-height:1.7;
  color:var(--dim);max-width:60ch}

/* La regola del pagamento, sopra al pulsante. Nasce il 16/9 spostandola
   fuori dalla spunta, che era diventata un paragrafo contrattuale e
   nessuno legge una spunta di quattro righe.
   Sta in piccolo e in grigio, come vuole Steven: e' un'informazione, non
   un cartello. Ma non piu' piccola di cosi', perche' se un giorno
   qualcuno contesta il pagamento in banca questa riga e' la prova che
   l'aveva davanti mentre pagava, e una prova illeggibile non vale. */
.pren-paga{margin:16px 0 12px;font-size:.82rem;line-height:1.65;
  color:var(--dim)}

/* Le cinque righe con l'icona sotto al modulo. Stesso tratto delle
   icone dei servizi de La casa: 1.2 di spessore, nessun riempimento,
   colore rosa. Non e' un set nuovo, e' quello che c'era gia'. */
/* Stanno dentro al modulo, sopra alle spunte: sono le cose che uno
   vuole sapere nell'istante prima di premere il pulsante, non dopo. */
.pren-fatti{list-style:none;margin:30px 0 0;padding:26px 0 0;display:grid;
  border-top:1px solid var(--line);
  grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2.4vw,2rem)}
.pren-fatti li{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;font-size:.82rem;line-height:1.45;color:var(--dim)}
.pren-fatti svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--rosa);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:720px){
  .pren-fatti{grid-template-columns:repeat(2,1fr);gap:22px}
  .pren-fatti li{flex-direction:row;text-align:left;gap:12px}
}

/* Il riepilogo: un foglio bianco dentro al foglio crema, cosi' si
   stacca senza bisogno di un bordo colorato. Le cifre a destra,
   incolonnate, con le cifre a tutta altezza come nel resto del sito. */
.riepilogo{background:var(--card);border-radius:16px;padding:20px 22px;margin-top:26px}
.ri-tit{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--dim);margin-bottom:14px}
.ri-righe{display:flex;flex-direction:column;gap:10px}
.ri-r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:.94rem;color:var(--ink)}
.ri-r .et{color:var(--dim)}
.ri-r .im{font-variant-numeric:lining-nums;white-space:nowrap}
.ri-r.tot{border-top:1px solid var(--line);padding-top:12px;margin-top:2px;
  font-weight:600}
/* le prime righe dicono cosa si e' scelto, non quanto costa: il valore
   a destra non e' una cifra e non va incolonnato come tale */
.ri-r.dato .im{color:var(--ink);font-variant-numeric:normal}
.ri-r.stacco{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
/* il pulsante di invio al centro, non a sinistra: e' l'unica cosa da
   fare in quel punto della pagina */
#richiesta > button{align-self:center;margin-top:22px;padding-left:2.6em;padding-right:2.6em}
.ri-nota{font-size:.82rem;line-height:1.6;color:var(--dim);margin-top:12px}

/* una frase che deve stare su una riga sua senza essere un altro
   paragrafo: su schermo stretto va a capo come tutte le altre */
.riga{display:block}

/* 16/9: qui c'erano i pulsanti "si' / no". Provati e tolti: con tre
   domande facoltative di fila facevano muro, e tre tipi di comando
   diversi nello stesso modulo si notano. Ora sono tutte tendine.

   La riga degli animali: etichetta, tendina e casella tutte sulla stessa
   riga. Il flex-direction va forzato perche' .frm label mette column a
   tutte le etichette del modulo. */
.frm-riga{flex-direction:row!important;align-items:center;justify-content:flex-start;
  gap:16px!important;flex-wrap:wrap}

/* ============================================================
   14/9 — la lingua diventa una tendina.
   Tre sigle sempre accese in fila occupavano lo spazio di una
   voce di menu e sembravano tre pulsanti da premere, quando
   invece due su tre sono solo alternative. Chiusa e' una sigla
   sola, aperta ha i nomi per esteso.
   ============================================================ */
/* Il pulsante della lingua: porta all'altra, non apre niente. Tratto e
   dimensioni sono quelli del vecchio pulsante della tendina, cosi' nella
   testata non si sposta nulla. Il mappamondo usa lo stesso spessore di
   linea delle altre icone del sito. */
/* niente `color:inherit` qui: questa regola sta in fondo al foglio e
   vinceva sul bianco della testata trasparente, facendo ereditare il
   colore scuro del corpo. Il colore lo decidono le due righe sopra,
   .lang-sw / header.solid .lang-sw, insieme alle voci del menu. (16/9) */
.lang-sw{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;
  font-family:var(--sans);font-weight:600;font-size:inherit;
  text-transform:uppercase;letter-spacing:.2em;transition:color .3s}
.lang-sw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;opacity:.9;flex:none}
.lang-sw:hover{color:#fff}
.lang-sw:hover svg{opacity:1}
header.solid .lang-sw:hover{color:var(--rosa)}

/* ============================================================
   14/9 — via l'azzurro del riempimento automatico.
   Quando Chrome compila un campo dai suggerimenti gli mette un
   fondo azzurro suo (rgb 232 240 254) che NON si toglie con
   background-color: e' imposto dal browser e vince su tutto.
   L'unico modo e' coprirlo con un'ombra interna alta abbastanza
   da riempire il campo, che segue anche gli angoli arrotondati.
   Il colore del testo va forzato con -webkit-text-fill-color,
   perche' anche quello lo decide lui.
   La transizione lunghissima serve a impedirgli di rimetterlo
   dopo qualche istante: e' un trucco brutto ma e' quello che
   funziona, e non esiste un modo pulito.
   Vale anche per il popup della newsletter (.nl-frm, 19/10): era
   nato con una classe sua ed era tornato azzurro. Un modulo nuovo
   va aggiunto QUI, non corretto da capo.
   ============================================================ */
.frm input:-webkit-autofill,
.frm input:-webkit-autofill:hover,
.frm select:-webkit-autofill,
.frm textarea:-webkit-autofill,
.nl-frm input:-webkit-autofill,
.nl-frm input:-webkit-autofill:hover,
.nl-frm input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;
  box-shadow:0 0 0 1000px var(--card) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s}
/* col fuoco attivo l'anello rosa deve restare: le due ombre si
   sommano, prima il riempimento e poi il contorno */
.frm input:-webkit-autofill:focus,
.frm select:-webkit-autofill:focus,
.frm textarea:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--card) inset, 0 0 0 3px rgba(181,97,79,.14);
  box-shadow:0 0 0 1000px var(--card) inset, 0 0 0 3px rgba(181,97,79,.14)}
/* Firefox usa il nome standard */
.frm input:autofill,
.frm textarea:autofill,
.nl-frm input:autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 1000px var(--card) inset}

/* la riga dello sconto e il totale pieno barrato accanto a quello nuovo */
.ri-r.meno .im{color:var(--green)}
.ri-r.tot .pieno{color:var(--dim);font-weight:400;margin-right:8px}

/* PAGINA NON TROVATA
   Tutta sulla fascia scura. La versione con la parte crema e i quattro
   riquadri di rientro e' stata provata e scartata: qui non serve
   contenuto in piu', serve aria. */
/* alta quanto lo schermo: il piede deve restare sotto la piega, e con
   una foto dietro il vuoto non e' piu' vuoto */
.e404-testa{padding:230px 0 200px;min-height:100vh;display:flex;align-items:center;
  box-sizing:border-box}
/* Larghezza piena, ma con i margini. `width:100%` da solo annullava
   l'88% del contenitore normale, e sul telefono il testo finiva a filo
   dei due bordi dello schermo. A monitor largo non si notava perche'
   il testo e' centrato e non arriva mai ai lati. (18/9) */
.e404-testa .wrap{width:100%;padding-left:6%;padding-right:6%}
/* Due veli sovrapposti sulla foto.
   Il primo, al centro, serve a leggere: il lago e' la parte piu' chiara
   dell'immagine ed e' proprio li' che cade la frase sotto al titolo.
   Il secondo, in fondo, scende fino al colore esatto del piede: senza,
   la foto finiva di netto contro la fascia scura e si vedeva la riga di
   taglio. Cosi' la foto ci entra dentro invece di finirci contro. */
.e404-testa .pbg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(44,24,16,0) 62%, rgba(44,24,16,.55) 85%, var(--ink) 100%),
    radial-gradient(ellipse 70% 55% at 50% 45%,
      rgba(28,16,11,.62) 0%, rgba(28,16,11,.34) 55%, rgba(28,16,11,.20) 100%)}
.e404-testa p{margin-top:30px;text-wrap:balance}  /* niente "a presto." da solo a capo */
/* .btn.ghost nasce per il fondo chiaro: qui sarebbe scuro su scuro */
.e404-bottoni{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:52px}
.e404-bottoni .btn.ghost{color:var(--bg);border-color:rgba(250,246,241,.45)}
.e404-bottoni .btn.ghost:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
@media(max-width:820px){ .e404-testa{padding:170px 0 120px;min-height:92vh} }


/* ============================================================
   IL TELEFONO — IN FONDO APPOSTA
   Questi due blocchi stanno alla fine del foglio perche' devono
   vincere: le regole che correggono erano sparse piu' avanti, e un
   foglio di stile a parita' di peso da' ragione all'ultima. Messi a
   meta' file, le correzioni per il telefono perdevano in silenzio.
   Se un domani si aggiungono regole nuove, vanno sopra a questa riga.
   ============================================================ */

/* ============================================================
   18/9 — LA TESTATA SUL TELEFONO (variante E)
   Scelta da Steven dopo aver guardato otto siti veri e provato otto
   disposizioni sulla pagina di anteprima
   (office.stevetech.it/casa-camelia-telefono/).

   Come funziona:
   - appena si arriva c'e' SOLO il marchio, grande e al centro. Niente
     voci, niente pulsante: sopra una foto a tutto schermo il nome
     della casa e' l'unica cosa che serve
   - appena si scorre la fascia diventa crema, il marchio si
     rimpicciolisce e va a SINISTRA, e compaiono "Menu" e "Prenota"
     a destra

   Non serve codice: il sito sa gia' quando la testata smette di stare
   sulla foto, perche' e' lo stesso istante in cui cambia colore
   (app.js aggiunge .solid oltre i 50 px di scorrimento).

   Perche' il marchio va a sinistra invece di restare centrato:
   restando al centro, "Menu" finiva piantato al bordo con 81 px di
   vuoto fino al marchio, mentre a destra ce n'erano 28. Il marchio
   era centrato sulla PAGINA, ma il pulsante e' largo il triplo della
   parola "Menu". Spostandolo a sinistra il problema sparisce invece
   di essere bilanciato, ed e' anche quello che il sito fa sul
   monitor.

   L'hamburger diventa la parola "Menu": a queste misure una parola si
   legge meglio di due filetti, ed e' quello che fanno Passalacqua e
   il Grand Hotel Tremezzo, che sono i due riferimenti piu' vicini.

   LA ROSA. Nel sito ci sono due rose sovrapposte, crema e scura, e la
   scura era appesa a un valore in pixel da tenere a meta' della
   larghezza del segno: un numero da rifare a ogni cambio di misura,
   che il 18/9 e' andato storto tre volte di fila. Qui la crema si
   toglie e la scura torna un elemento normale, che si mette in fila e
   si centra da solo. Il passaggio di colore non si perde: era gia'
   disattivato da una regola con !important piu' avanti nel foglio.
   ============================================================ */
@media(max-width:820px){
  /* `display:contents` fa sparire la SCATOLA .hdr-r lasciando dentro i
     suoi figli: cosi' "Menu" e "Prenota" diventano fratelli del
     marchio e l'ordine si puo' decidere.
     Senza questa riga l'ordine vale solo DENTRO la scatola, mentre la
     scatola intera resta prima del marchio: scorrendo uscivano Menu,
     Prenota e poi il marchio a destra, mezzo fuori dallo schermo.
     La riga c'era nel blocco della testata a due righe, e togliendo
     quello e' sparita con lui. L'anteprima non poteva mostrarlo,
     perche' li' la prova si appoggia sopra al foglio di stile
     pubblicato, che quella riga ce l'aveva ancora. (18/9) */
  .hdr-r{display:contents}

  .brand img.cream{display:none}
  .brand img.dark{position:static;transform:none;left:auto;top:auto;opacity:1}

  .hdr-in{position:relative;flex-wrap:nowrap;justify-content:space-between;
    align-items:center;min-height:96px;padding:18px 0 14px}
  /* scorrendo, la fascia non si appiccica al bordo: sopra c'e' la
     tacca del telefono e la barra del browser */
  header.solid .hdr-in{min-height:80px;padding:16px 0 14px;
    justify-content:flex-start}

  /* 20/9: il marchio passa da centrato-impilato a SINISTRA in fila,
     tenendo le misure di prima (segno 56, nome 1.62rem). In cima Menu
     e Prenota sono spenti, quindi la riga e' tutta sua: 56 + nome
     stanno dentro i 358 px utili con margine. */
  .brand{position:static;transform:none;flex-direction:row;align-items:center;
    gap:12px;margin:0 auto 0 0;text-align:left;flex:none;order:1}
  /* Le forme ripetute non sono per bellezza: la misura del marchio la
     decidono regole scritte come `header:not(.solid) .brand img`, che
     valgono piu' di `.brand img` e vincono a prescindere dall'ordine.
     Per batterle bisogna usare la stessa forma. (La piu' insidiosa e'
     quella del 21/8 che mette il segno a 103 px sopra la foto.) */
  .brand img,
  header:not(.solid) .brand img,
  header.solid .brand img{width:56px;height:56px}
  .brand .nm,
  header:not(.solid) .brand .nm,
  header.solid .brand .nm{display:inline;font-size:1.62rem;letter-spacing:.13em;
    text-indent:.13em;line-height:1;white-space:nowrap;font-weight:400}

  /* `flex:none` e' necessario: senza, il marchio si lascia restringere
     sotto la larghezza della sua stessa scritta, e il nome esce dal suo
     riquadro finendo sopra "Menu". Lo spazio fra i tre gruppi scende da
     24 a 14 px, se no il totale (184 + 34 + 86) non ci sta nei 358
     utili e "Prenota" esce dallo schermo. (18/9) */
  header.solid .hdr-in{column-gap:14px}
  header.solid .brand{position:static;transform:none;flex-direction:row;
    align-items:center;gap:10px;margin-right:auto;order:1;flex:none}
  header.solid .brand img,
  header.solid .brand img.dark{width:34px;height:34px}
  header.solid .brand .nm{font-size:1.14rem;letter-spacing:.14em;text-indent:.14em}

  .hnav,.lang-sw{display:none}

  /* L'ordine va dato SEMPRE, non solo quando la testata e' chiara:
     "Menu" e "Prenota" sopra la foto sono spenti ma restano in fila, e
     senza un ordine esplicito venivano prima del marchio, spingendolo
     a destra fuori dallo schermo. (20/9) */
  .burger{display:block;width:auto;height:auto;position:relative;z-index:2;order:2}
  .burger span{display:none}
  .burger::after{content:'Menu';font-family:var(--sans);font-size:.62rem;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

  /* il riempimento va in PIXEL: il corpo qui e' zero, perche' serve a
     sostituire "Prenota ora" con "Prenota", e una misura in em
     calcolata su zero fa zero */
  .call.bk{position:relative;z-index:2;font-size:0;order:3;
    padding:10px 15px;border:1px solid var(--rosa);
    background:var(--rosa);color:#fff}
  .call.bk::after{content:'Prenota';font-family:var(--sans);font-size:.62rem;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase}

  /* il punto della variante: sopra la foto c'e' solo il marchio */
  header:not(.solid) .burger,
  header:not(.solid) .call.bk{opacity:0;pointer-events:none}
  .burger,.call.bk{transition:opacity .45s var(--ease)}
}


/* ============================================================
   18/9 — LA TESTATA DELLA HOME, SUL TELEFONO
   Due misure decise guardando il monitor e mai riviste:
   - il titolo a 35 pixel, che su una schermata alta 730 sembra una
     didascalia invece di un benvenuto
   - 51 pixel di vuoto sotto al pulsante, che non tengono compagnia a
     niente: il blocco sembra fermarsi a mezz'aria
   ============================================================ */
@media(max-width:820px){
  .hero-say{font-size:2.7rem;line-height:1.04}
  .hero-sub{font-size:1rem;line-height:1.62;margin-top:1.1rem}
  .hero-cta{margin-top:1.5rem}
}

/* ============================================================
   20/9 — LO SPAZIO SOPRA AL PARAGRAFO DI BENVENUTO
   Era scritto dentro al tag della sezione, quindi vinceva su tutto e
   sul telefono restava di 130 px: quasi un quinto di schermata di
   vuoto prima di leggere la prima riga.
   Sul monitor resta 130, che e' come e' sempre stato.
   ============================================================ */
.sec.intro{padding:130px 0 60px}
@media(max-width:820px){
  /* 46 era troppo stretto: il paragrafo si appiccicava alla foto.
     72 e' circa a meta' fra quello e i 130 di partenza. */
  .sec.intro{padding:72px 0 48px}
}

/* ============================================================
   18/9 — LE FOTO DI INSTAGRAM SUL TELEFONO
   Quattro colonne su uno schermo da 390 pixel fanno riquadri da 78:
   francobolli, in cui non si distingue cosa sia ritratto. Sono le
   foto della casa, cioe' esattamente quello che uno vuole guardare.
   Due colonne le portano a 165.
   ============================================================ */
@media(max-width:560px){
  .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ============================================================
   18/9 — L'HAMBURGER INVISIBILE
   Su tutte le pagine tranne la home i due filetti erano scuri anche
   sopra la fascia scura della testata: scuro su scuro, cioe' niente.
   Da telefono voleva dire nessun menu su otto pagine su nove.
   Veniva da una regola scritta quando le pagine interne avevano la
   testata chiara (`body:not(.home)` => filetti scuri). Da quando anche
   loro aprono con una fascia scura, quella condizione e' sbagliata: il
   colore non dipende da QUALE pagina e', dipende da cosa c'e' sotto.
   Quindi segue lo stesso criterio delle voci del menu: chiaro sopra la
   fascia, scuro quando la testata diventa crema.
   ============================================================ */
header:not(.solid) .burger span{background:#fff}
header.solid .burger span{background:var(--ink)}
body.menu-open .burger span{background:var(--ink)}

/* ============================================================
   18/9 — I CAMPI CHE USCIVANO DAL BORDO
   Sul telefono email e telefono sfondavano il lato destro del foglio
   di una quarantina di pixel, e venivano tagliati. Non si vedeva come
   "la pagina scorre di lato" perche' il foglio li ritaglia: il
   controllo automatico infatti non li segnalava.

   La causa e' una trappola delle griglie: una colonna `1fr` vale
   `minmax(auto, 1fr)`, e quel `auto` NON scende sotto la larghezza
   minima del contenuto. Una casella di testo ha una larghezza minima
   sua (vent'anni fa era l'attributo `size`), quindi la colonna si
   allargava oltre lo spazio disponibile.
   `minmax(0, 1fr)` toglie quel pavimento, e `min-width:0` fa lo stesso
   per le caselle dentro ai contenitori flessibili.
   ============================================================ */
.frm .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:640px){
  .frm .row{grid-template-columns:minmax(0,1fr)}
}
.frm input,.frm select,.frm textarea{min-width:0;max-width:100%}
.frm .tel,.frm .scelta,.frm label{min-width:0}
.tel input{min-width:0;flex:1 1 0}

/* ============================================================
   17/9 — IL MENU DIVENTA UN PANNELLO
   Prima era una schermata intera color crema che copriva tutto, con
   le voci grandi al centro: un gesto grosso per quattro voci, e da
   telefono sembrava di aver cambiato pagina invece di aver aperto un
   menu ("non mi piace come si aprono le voci del menu che occupano
   tutta la pagina", Steven).
   Ora e' un pannello sotto l'hamburger. Il velo che copre lo schermo
   resta, ma trasparente: serve a chiudere il menu toccando fuori, che
   e' il gesto che la gente fa. Per questo non si tocca il codice: la
   chiusura al clic sul velo esiste gia'.
   ============================================================ */
.mobmenu{background:rgba(44,24,16,.32);backdrop-filter:blur(2px);
  align-items:flex-start;justify-content:flex-end}
.mm-inner{background:var(--bg);border-radius:16px;
  box-shadow:0 26px 60px -24px rgba(44,24,16,.55);
  padding:14px 10px;margin:78px 4% 0 0;min-width:216px;
  text-align:left;gap:0;
  transform:translateY(-8px) scale(.98);opacity:0;
  transition:transform .32s var(--ease),opacity .32s var(--ease)}
body.menu-open .mm-inner{transform:none;opacity:1}
.mm-inner a{font-size:1.22rem;padding:11px 16px;border-radius:10px}
.mm-inner a.on,.mm-inner a:hover{font-style:normal;background:var(--bg-soft)}
/* la lingua e' una voce come le altre, non una nota a pie' di pannello:
   stesso allineamento e stessa area da toccare, separata da un filo che
   attraversa tutto il pannello */
.mm-inner .mm-lang{display:block;margin:8px 0 0;padding:16px 16px 6px;
  border-top:1px solid var(--line);text-align:left;font-size:.7rem}
@media(max-width:500px){ .mm-inner{margin-top:70px} }

/* ============================================================
   17/9 — IL TELEFONO, SECONDO GIRO
   Tutto da una schermata di Steven fatta con Chrome su iPhone.

   1. `100vh` sul telefono NON e' lo schermo: i browser lo calcolano
      come se le barre non ci fossero, quindi la parte bassa della
      testata finisce sempre sotto la barra dei pulsanti e il pulsante
      "Prenota ora" della foto non si vede mai. `svh` e' la misura
      giusta: e' lo schermo con le barre APERTE, cioe' il caso peggiore,
      quindi il contenuto ci sta sempre. Si lascia `vh` sopra come rete
      per i browser vecchi che non conoscono `svh`.

   2. La foto. Una foto larga dentro una finestra alta e stretta si
      vede per un terzo, e non c'e' regola che lo eviti: o si accorcia
      la finestra o si taglia. Accorciata a 80: si vede quasi meta'
      della foto, e sotto comincia a spuntare la sezione dopo, che e'
      anche un invito a scorrere.

   3. Il nome per esteso torna. Lo spazio lo fa la sigla della lingua,
      che sul telefono lascia la riga: nel menu c'e' gia'. Fra le due
      cose, il nome della casa conta di piu' di una scorciatoia
      doppia.
   ============================================================ */
.hero{height:100vh;height:100svh}

@media(max-width:820px){
  /* Schermo pieno, ma quello VERO: `svh` e' l'altezza con le barre del
     browser aperte, cioe' il caso peggiore. Cosi' la testata riempie la
     schermata come sul monitor e non finisce mai sotto i pulsanti.
     Per un giorno e' stata all'80% per far vedere piu' foto: era una
     mia scelta, e l'effetto a schermo pieno vale di piu'. (18/9) */
  .hero{height:100vh;height:100svh;min-height:520px}
  /* La foto e' alta (1500x2250) e la finestra del telefono e' ancora
     piu' stretta: si taglia un po' di lato, non in altezza. Il 45%
     tiene il riquadro luminoso del lago all'altezza degli occhi. */
  .hero .bg img{object-position:center 45%}
}



/* ============================================================
   16/9 — TESTO TROPPO PICCOLO SUL TELEFONO
   Trovato misurando, non a occhio (schermate.py). Sono etichette
   nate a 10-11 pixel guardando un monitor, dove stanno in mezzo a
   testo grande e si leggono per contrasto. Su un telefono, con tutto
   ravvicinato, diventano un fastidio.
   Restano piccoli apposta: il credito della mappa (© OpenStreetMap,
   una nota d'obbligo, non un'informazione) e la freccia delle
   tendine, che e' un simbolo e non si legge.
   ============================================================ */
@media(max-width:820px){
  .q-firma{font-size:11.5px}
  /* `.porta .p-go` e `.cop .sfoglia span` valgono piu' di una classe
     sola: qui serve la stessa forma, se no la regola perde in silenzio.
     Sbagliato una prima volta il 16/9, e il controllo l'ha ridetto. */
  .porta .p-go{font-size:12px}
  .cam .mini{font-size:12px}
  .dotaz span{font-size:12px}
  .cop .sfoglia span{font-size:11px}
}

/* ============================================================
   16/9 — IL TELEFONO: SPAZI E POSIZIONI
   Prima prova su un telefono vero. Due cose, tutte e due nate da
   misure decise guardando uno schermo largo.

   1. Gli spazi. `.sec` ha 130px sopra e sotto: fra una sezione e
      l'altra fanno 260px, che su un monitor sono un respiro e su un
      telefono sono due terzi di schermata vuota. Si scorre e non
      succede niente. Stessa cosa per la fascia scura e per la
      chiusura.

   2. Le foto de "Le piccole cose". Sono sovrapposte e ancorate al
      bordo sinistro: la larghezza gliela da' l'altezza, tramite le
      proporzioni, quindi su schermo stretto restano molto piu'
      strette della colonna e sembrano buttate li' a sinistra. Qui
      vengono centrate.
   ============================================================ */
@media(max-width:820px){
  .sec{padding:76px 0}
  .band{padding:104px 0}
  .chiusa{padding:76px 0}
  .quad{padding-bottom:64px}
  .porta{min-height:clamp(300px,42vh,380px)}

  .pc-vetrina .pv{left:50%;transform:translate(-50%,-50%) scale(1.02)}
  .pc-vetrina .pv.on{transform:translate(-50%,-50%) scale(1)}
}

/* ============================================================
   18/9 — qui c'era il blocco del 16/9 per la testata sul telefono:
   marchio rimpicciolito, spazi, e il corpo del pulsante.
   Tolto perche' era scritto per la testata vecchia (marchio a
   sinistra su una riga sola) e stava DOPO la variante E, quindi le
   rimetteva sopra le sue misure. Il guasto visibile: il pulsante
   mostrava due scritte sovrapposte, "Prenota ora" del codice piu'
   "Prenota" che la variante E ci scrive sopra, perche' il corpo del
   testo non riusciva piu' ad andare a zero.
   La testata sul telefono adesso sta tutta in un posto solo, sopra.
   ============================================================ */




/* ============================================================
   20/9 — IL RITMO DELLA HOME SUL TELEFONO
   Gli stacchi fra un pezzo e l'altro andavano da 48 a 156 px, decisi
   uno alla volta in momenti diversi. Da qui in giu' ce n'e' uno solo.

   La misura e' quella che piace a Steven: il bianco fra la foto e
   "Sentirsi a casa", 72 px. E' anche quella approvata sotto la hero.

   COME FUNZIONA, perche' non e' "72 su ogni sezione":
   lo spazio appartiene alla CUCITURA fra due blocchi, non al blocco.
   Quindi due sezioni normali mettono 36 per una, e fanno 72.
   Chi confina con un blocco che arriva fino al bordo e non ha spazio
   suo (la hero, le tre porte, il piede) si porta i 72 tutti lui.

   Vale solo per body.home e solo sotto gli 820. Le altre pagine
   restano come sono finche' non le guardiamo una per una.
   ============================================================ */
@media(max-width:820px){
  body.home{--ritmo:72px}

  /* Ogni sezione tiene i suoi 72 dentro, sopra e sotto. Dove il fondo
     cambia colore si sommano e fanno 144: sono giusti, perche' il bordo
     del colore e' un fatto che si vede e va respirato anche lui.
     Il primo tentativo dava 36 per parte (72 in tutto) e il pulsante
     finiva a 36 dal bordo della fascia: sembrava appiccicato. */
  body.home .sec,
  body.home .chiusa        {padding:var(--ritmo) 0}
  body.home footer         {padding-top:var(--ritmo)}

  /* Dove invece il vicino arriva fino al bordo e ink e colore sono la
     stessa cosa (la foto della hero, le tre porte scure), di bordi da
     respirare ce n'e' uno solo e bastano 72. */
  body.home .sec.intro     {padding-top:var(--ritmo)}
  body.home .sec.quad      {padding-bottom:var(--ritmo)}

  /* Il marchio chiude il benvenuto, non apre la storia: sta attaccato
     al paragrafo come un punto fermo, e i 72 pieni stanno sotto di lui.
     ATTENZIONE: il marchio sta dentro a un .wrap, quindi NON e' fratello
     della sezione che segue. Il fratello e' il .wrap che lo contiene. */
  body.home .sec.intro         {padding-bottom:32px}
  body.home .orn               {padding:0}
  body.home .wrap:has(.orn) + .sec{padding-top:var(--ritmo)}
}

/* Gli angoli delle foto de "Le piccole cose".
   Quelle di "Sentirsi a casa" sono stondate da sempre (.split .im,
   6px). Queste no, e sul telefono, dove le due sezioni si vedono una
   dopo l'altra scorrendo, la differenza si nota. Stesso 6px, non un
   valore nuovo.
   I foglietti del quaderno restano invece ad angolo vivo apposta:
   sono fogli di carta, e la carta non ha gli angoli tondi.
   Sul monitor non si tocca, come da accordi: se un giorno vorrai anche
   li', basta togliere queste due righe dal @media. */
@media(max-width:820px){
  .pc-vetrina .pv{border-radius:6px}
}

/* Titolo e testo de "Le piccole cose" stavano a 60px, mentre due sezioni
   sopra ("Sentirsi a casa") ne hanno 22: quasi il triplo, e sul telefono,
   dove le due sezioni si vedono una dopo l'altra, si nota.
   Il 22 non e' un numero nuovo, e' quello che usa gia' l'altro titolo.
   ATTENZIONE: .headc e' condiviso con La casa, Contatti, Esperienze e le
   pagine inglesi. Per questo la regola nomina .pcose-sez e non .headc:
   le altre sezioni hanno sotto al titolo una fascia di foto, non un
   paragrafo, e li' 60 ci sta. */
@media(max-width:820px){
  .pcose-sez .headc{margin-bottom:22px}
}

/* ============================================================
   20/9 — "LE PICCOLE COSE" SUL TELEFONO: LA FOTO SOPRA AL TESTO
   Sul monitor resta com'e': testo a sinistra e la pila di foto che si
   dissolvono a destra. Qui cambia una cosa sola, l'ordine.

   Il motivo: in colonna il pulsante "Contattaci" finiva in mezzo alla
   sezione e le foto venivano dopo, quindi l'invito restava sepolto e la
   sezione si chiudeva con delle immagini. Adesso la foto viene subito
   sotto al titolo e il testo col pulsante chiude.

   Provate anche la griglia e il nastro da scorrere: stanno tutte sulla
   pagina delle prove, in private/casa-camelia-piccole-cose/.
   ============================================================ */
@media(max-width:820px){
  /* le foto sono una casella della griglia: basta dire che vengono prima */
  .pcose-sez .pc-vetrina{order:-1}

  /* Piu' grandi che sul monitor, dove sono piccole perche' dividono la riga
     col testo: qui la riga e' tutta loro.
     Il tetto e' 110vw e non un numero a caso: la larghezza di queste foto
     nasce dall'altezza (altezza x proporzioni), la piu' larga e' la "media"
     e viene 0,78 dell'altezza, mentre la colonna e' l'88% dello schermo.
     Oltre 112vw sporgerebbe e la pagina scorrerebbe di lato.
     110 era il massimo possibile ed era troppo: le foto arrivavano a
     toccare i due bordi. 96 le porta da 240 a 281 di larghezza, un quinto
     abbondante in piu', e lascia il margine che c'era. */
  .pcose-sez .pc-vetrina{height:clamp(340px,96vw,440px)}
  .pcose-sez .pc-vetrina .pv{max-width:100%}

  /* Sotto al titolo adesso c'e' la foto, non il testo: i 22px sono la
     misura giusta fra un titolo e un paragrafo, fra un titolo e una foto
     sono troppo pochi. 2.2rem e' lo stesso stacco che c'e' fra la foto e
     il testo qui sotto, cosi' il blocco ha una spaziatura sola. */
  .pcose-sez .headc{margin-bottom:2.2rem}
}

/* ============================================================
   20/9 — IL LETTORE SUL TELEFONO
   1. Le frecce si nascondono con l'attributo hidden, ma qui sopra
      .lt-frec dichiara display:flex, e una regola del foglio batte
      sempre hidden. Risultato: sulla home comparivano due frecce che
      non portavano da nessuna parte. Adesso il quaderno si sfoglia
      davvero (vedi app.js), ma la regola ci vuole lo stesso: nelle
      guide di una pagina sola devono sparire per davvero.
   2. L'intestazione stava incollata in cima, schiacciata sotto la
      barra degli indirizzi di Safari, e il titolo era a sinistra
      mentre la pagina sotto e' centrata.
   ============================================================ */
.lt-frec[hidden]{display:none}

@media(max-width:820px){
  .lt-barra{height:auto;flex-direction:column;align-items:center;gap:3px;
    padding:34px 62px 12px;text-align:center}
  .lt-tit{font-size:1.05rem;line-height:1.3}
  /* la X esce dalla colonna e torna al suo angolo */
  .lt-chiudi{position:absolute;top:16px;right:6px;margin-left:0}
  /* la pagina comincia sotto l'intestazione, che ora e' piu' alta */
  .lettore{padding-top:112px}
}

/* (qui c'era la velocita' del nastro sul telefono, 130 secondi invece
   di 62: dal 21/10 la decide app.js, che fa scorrere il quaderno) */

/* La frase che chiude "Le piccole cose" e' piu' grande del testo normale
   per farsi sentire: sul monitor e' 25,6 contro 16, un rapporto di 1,6.
   Sul telefono era 19,2 contro 16, cioe' 1,2: la differenza c'era ma non
   si percepiva, e la frase sembrava un paragrafo qualsiasi. */
/* NB: il selettore e' .pc-testo .pc-claim e non .pc-claim perche' la
   misura di partenza e' scritta cosi': un selettore piu' leggero non la
   batte, e la riga sembra non fare niente. */
@media(max-width:820px){
  .pc-testo .pc-claim{font-size:1.4rem}
}

/* 21/9: qui c'era il piede centrato in colonna (prima a due colonne con
   Esplora e Seguici affiancate, poi in colonna sola). Scartato da Steven,
   il piede resta quello di prima. */


/* ============================================================
   21/9 — LA TESTATA PIENA (La casa, Esperienze) SUL TELEFONO
   Stesso guasto della home, corretto li' il 16/9 e mai qui: `100vh`
   su iPhone e' l'altezza SENZA le barre di Safari, quindi la testata
   e' piu' alta della finestra e il "Prenota ora", che sta in fondo,
   resta sotto il bordo. Entri nella pagina e non lo vedi.
   `svh` e' l'altezza vera, quella con le barre. Il `100vh` sopra resta
   per i browser che non conoscono `svh`.
   Sul monitor non cambia niente: senza barre che compaiono e
   scompaiono, svh e vh valgono uguale.
   ============================================================ */
.phero-piena{min-height:100vh;min-height:100svh}

/* 21/9: qui c'era la prova col filmato in una fascia 16:9 e il testo
   sotto, per vederlo intero. Non serve piu': sul telefono ora parte un
   filmato girato verticale, che si vede tutto E riempie lo schermo.
   La classe pagina-casa resta sulle due la-casa.html, non da' fastidio. */

/* ============================================================
   25/9 — "LA CASA": I FONDI (monitor + telefono) E IL RITMO (telefono)

   1. I FONDI, su tutti e due gli schermi.
   Il soggiorno passa sul crema base, le camere tengono il crema
   alterno. I fondi della pagina diventano quindi: introduzione
   bianca, soggiorno bianco, camere crema, "il resto della casa"
   bianco. Prima erano soggiorno e camere insieme a fare un'isola di
   colore fra due sezioni bianche.
   Questa parte NON sta dentro a un @media: e' una scelta di pagina,
   non un adattamento al telefono. (Nata guardando il telefono, poi
   Steven l'ha voluta anche sul monitor.)

   2. IL RITMO, solo sul telefono.
   Stessa regola della home (blocco del 20/9): lo spazio appartiene
   alla CUCITURA fra due blocchi, non al blocco. Ogni sezione tiene
   72 dentro, sopra e sotto, quindi due sezioni che si toccano fanno
   144. Chi confina con un blocco che arriva fino al bordo e non ha
   spazio suo (la testata col filmato, il piede) si porta i 72 tutti
   lui.

   QUI C'ERA UN MARCHIO. Fra introduzione e soggiorno, che ora hanno
   lo stesso fondo, avevo messo la camelia a fare da interruzione come
   nella home. Steven l'ha guardata e non gli convince su questa
   pagina: togliamola. Le due sezioni si toccano e basta, con lo spazio
   pieno in mezzo. Se un giorno servisse di nuovo, il pezzo era un
   .wrap.solo-tel col .orn dentro, fra l'introduzione e il soggiorno,
   piu' tre righe qui (.orn a zero e .wrap:has(.orn) + .sec a ritmo
   pieno). Attenzione alla trappola: il marchio sta DENTRO a un .wrap,
   quindi il fratello della sezione che segue e' il .wrap, non lui.
   ============================================================ */

/* Il fondo colorato via al SOLO soggiorno, non alle camere.
   Nominata dentro body.pagina-casa e per .unita-sotto: .soft da sola
   la usa anche Esperienze, che non abbiamo ancora guardato, e le
   camere sono .soft pure loro. */
body.pagina-casa .sec.soft.unita-sotto{background:var(--bg)}

/* Soggiorno e camere erano UN blocco solo, e per questo si tenevano
   stretti: 65 per parte invece di 130, cioe' la meta'. Ora fra loro
   passa un cambio di fondo, e un bordo di colore a 65 dal contenuto
   sembra appiccicato mentre tutte le altre cuciture della pagina
   stanno a 260. Tornano al valore pieno.
   Vale su tutti e due gli schermi, come i fondi: sul telefono il
   numero e' un altro ma il ragionamento e' lo stesso, e ci pensa la
   regola generale del ritmo qui sotto. */
body.pagina-casa .sec.unita-sotto{padding-bottom:130px}
body.pagina-casa .sec.unita-sopra{padding-top:130px}

/* E il contrario per la cucitura di sopra. Introduzione e soggiorno ora
   hanno lo STESSO fondo e non c'e' piu' niente in mezzo (la camelia e'
   stata tolta): 260 px di crema uguale sono un buco, si scorre e non
   succede niente. Vanno stretti come stavano soggiorno e camere finche'
   erano un blocco solo, cioe' la meta': 65 per parte.
   Non e' un numero nuovo, e' quello che abbiamo appena liberato. */
body.pagina-casa .sec.intro-casa{padding-bottom:65px}
body.pagina-casa .sec.soft.unita-sotto{padding-top:65px}

@media(max-width:820px){
  body.pagina-casa{--ritmo:72px}

  body.pagina-casa .sec,
  body.pagina-casa .chiusa      {padding:var(--ritmo) 0}
  body.pagina-casa footer       {padding-top:var(--ritmo)}

  /* La testata col filmato arriva fino al bordo e non ha spazio suo:
     di bordi da respirare ce n'e' uno solo e bastano 72. */
  body.pagina-casa .sec.intro-casa{padding-top:var(--ritmo)}

  /* Disfa i 130 di sopra, che qui sarebbero fuori scala: sul telefono
     il ritmo e' 72 e lo mette la regola generale. */
  body.pagina-casa .sec.unita-sotto{padding-bottom:var(--ritmo)}
  body.pagina-casa .sec.unita-sopra{padding-top:var(--ritmo)}

  /* Stessa stretta fra introduzione e soggiorno, in scala: mezzo ritmo
     per parte, quindi 72 in tutto invece di 144. */
  body.pagina-casa .sec.intro-casa{padding-bottom:calc(var(--ritmo)/2)}
  body.pagina-casa .sec.soft.unita-sotto{padding-top:calc(var(--ritmo)/2)}
}

/* ============================================================
   25/9 — LE DOTAZIONI DEL SOGGIORNO, TUTTE SU UNA FILA
   Sul telefono i quattro elementi andavano a capo e facevano due
   file di due (misurato: 103+150+74+74 di larghezza piu' tre spazi
   da 22, cioe' 468 px in 343 disponibili). Sul monitor stanno tutti
   in fila, e la fila sola e' la lettura giusta: sono quattro voci di
   un elenco, non due gruppi.

   Da flessibile a griglia di quattro colonne uguali: cosi' la fila e'
   garantita e non dipende da quanto e' lunga l'etichetta piu' lunga.
   In 343 px con tre spazi da 10 restano 78 px per colonna.

   Il <br> dentro le etichette va spento: e' stato scritto per spezzare
   "Divano letto / matrimoniale" su una colonna larga, e in 78 px
   taglierebbe nel punto sbagliato. Senza di lui il testo va a capo
   dove ci sta.

   Il corpo del testo scende da 12 a 10 px, e la spaziatura fra le
   lettere da .1em a .04em. La spaziatura larga e' quella che costava
   piu' spazio, e in maiuscoletto piccolo serve meno.
   Sul monitor non si tocca niente: la' ci stanno gia'.
   ============================================================ */
@media(max-width:820px){
  .dotaz{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}
  .dotaz li{min-width:0;gap:8px}
  .dotaz svg{width:26px;height:20px}
  .dotaz span{font-size:10px;letter-spacing:.04em;line-height:1.35}
  .dotaz span br{display:none}
}

/* ============================================================
   25/9 — "IL RESTO DELLA CASA": FOTO PICCOLE ANCHE SUL TELEFONO
   Sul monitor queste foto sono piccole di proposito: 199 px e 195 px
   di larghezza, due e tre per riga, con la didascalia sotto. Dicono
   "questo e' il corredo della casa", non "guarda che vista".

   Sul telefono quell'intenzione si perdeva: a 520 px e sotto la
   griglia passava a UNA colonna sola, quindi ogni foto diventava
   larga 343 px, cioe' PIU' GRANDE che sul monitor. Il resto della
   casa finiva per pesare come il soggiorno.

   Restano due per riga anche qui: 165 px a testa, poco meno del
   monitor. Le didascalie non si toccano, sono .86rem in tutti e due
   i casi, quindi il rapporto fra foto e testo resta quello di la'.

   Il gruppo del terrazzo ha tre foto in due colonne: la terza resta
   da sola nella cella di sinistra. E' voluto: metterla larga il
   doppio la farebbe tornare protagonista, che e' il guasto da cui
   siamo partiti.
   ============================================================ */
@media(max-width:520px){
  .alt-foto.due,.alt-foto.tre{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   25/9 — "IL RESTO DELLA CASA": UN NASTRO PER GRUPPO
   Terza e ultima versione, scelta da Steven guardando le sei a
   confronto (strumento in private/casa-camelia-prove).

   Le tappe, perche' il perche' e' tutto qui:
   1. In colonna singola le foto venivano 343 px, cioe' PIU' GRANDI che
      sul monitor (199). Sul monitor sono piccole apposta: dicono "il
      corredo della casa", non "guarda che vista".
   2. Due per riga: 164 px, giusto come peso, ma la sezione restava un
      muro da scorrere, alta 2198 px.
   3. Due schede intere che si scorrevano di lato, una per argomento:
      a Steven non sono piaciute, e in piu' costringevano a scegliere
      fra foto piccole (123 px su due colonne) o schede altissime
      (971 px in colonna singola).

   Qui si scorrono le FOTO dentro al loro gruppo. Ogni foto prende il
   62% della larghezza, quindi se ne vede una e mezza: la mezza non e'
   un avanzo, e' il segnale che a destra c'e' dell'altro. Senza, sembra
   una foto sola e nessuno prova a trascinare.

   Il nastro esce dai margini e arriva al bordo dello schermo: una
   fascia che si scorre ma finisce a 23 px dal bordo sembra rotta. Qui
   il trucco dei margini negativi funziona perche' .alt-foto e' un div
   normale, che si allarga da solo. (Sulle schede NON funzionava:
   .alt-grid E' il .wrap e ha la larghezza scritta, quindi i margini lo
   spostavano senza allargarlo. Se un domani si torna a toccare .alt-grid,
   ricordarselo.)
   ============================================================ */
@media(max-width:820px){
  .alt-foto.due,.alt-foto.tre{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    gap:12px;
    /* il .wrap e' largo l'88% e centrato, quindi il margine che lo
       separa dal bordo e' il 6% della finestra. Non un numero a mano:
       se un giorno l'88 cambia, qui va cambiato il 6. */
    margin-left:-6vw;
    margin-right:-6vw;
    padding-left:6vw;
    padding-right:6vw;
    /* senza questo lo scatto, che e' obbligatorio, al caricamento si
       mangia il rientro: misurato, il nastro partiva gia' spostato di
       23 px e la prima foto finiva a filo del bordo dello schermo
       invece che allineata al titolo sopra. */
    scroll-padding-left:6vw;
  }
  .alt-foto.due::-webkit-scrollbar,
  .alt-foto.tre::-webkit-scrollbar{display:none}
  .alt-foto.due figure,
  .alt-foto.tre figure{
    flex:0 0 62%;
    scroll-snap-align:start;
  }
}

/* ============================================================
   25/9 — "SFOGLIA L'ANTEPRIMA" SUL TELEFONO
   Quella scritta e' nata per il passaggio del mouse: velo scuro su
   tutta la copertina e pastiglia col contorno in mezzo. Su un telefono
   il passaggio non esiste, quindi compariva solo quando il tocco
   restava appiccicato, cioe' a caso e su una copertina sola. (Stessa
   trappola del nastro del quaderno, 21/9: :hover resta attaccato su
   iPhone.)

   E quando compariva stava stretta: misurata a 390 px, la pastiglia
   e' 153x59 dentro una copertina di 162x221. Larga quanto tutta la
   copertina e alta un quarto, col testo su tre righe dentro un ovale
   fatto per una riga sola.

   Dove il passaggio non c'e' (@media(hover:none)) diventa quindi
   un'altra cosa: sempre visibile, in basso, sopra una sfumatura che
   scurisce solo il piede della copertina invece di coprirla tutta, e
   senza il contorno. Cosi' si legge sempre, si capisce che la
   copertina si tocca, e la copertina si vede.

   Il velo pieno e la pastiglia restano dove servono, cioe' dove c'e'
   un mouse: la regola sotto non li tocca.
   ============================================================ */
@media(hover:none){
  /* Via del tutto: dove non c'e' il mouse, niente etichetta.
     Le copertine si vedono che sono due quaderni posati sul tavolo, e
     il paragrafo qui sopra dice gia' che sono da sfogliare: l'etichetta
     aggiungeva peso senza aggiungere informazione.
     Il nome resta per chi non vede: ogni .cop ha il suo aria-label
     ("Sfoglia la guida ..."), quindi togliendo la scritta non si toglie
     niente a chi usa un lettore di schermo.
     Non si toglie la marcatura, si spegne qui: sul monitor l'etichetta
     al passaggio del mouse resta e va bene com'e'. */
  .cop .sfoglia{display:none}
}


/* Tiene insieme due parole perche' non si spezzino a fine riga.
   Nato il 25/9 per il claim della home sul telefono: "La vostra vacanza
   sul Lago Maggiore vi / sta aspettando", con quel "vi" rimasto solo in
   fondo alla prima riga.
   Primo tentativo: legate "vi sta". Non bastava. Qui misuravo 390 px con
   i caratteri di questo computer e veniva giusto, ma sul telefono di
   Steven "vi sta" ci stava ancora in fondo alla prima riga e restava
   "aspettando" da solo sotto: lo stesso difetto spostato di una parola.
   Lezione: la misura della riga dipende dal telefono, quindi legare
   quel tanto che basta e' una scommessa. Si lega tutta la coda della
   frase, e la riga si chiude su "Maggiore" dovunque.
   Solo sul telefono, e non perche' sul monitor il problema non ci sia:
   misurato a 1280 la frase si spezza uguale, "...Maggiore vi / sta
   aspettando". Ma il monitor non si tocca, come da accordi. Se un
   giorno lo guardiamo, basta portare questa regola fuori dal @media. */
@media(max-width:820px){
  .uniti{white-space:nowrap}
}

/* ============================================================
   25/9 — IL RIQUADRO DI SPUNTA DELLA PRIVACY
   Su iPhone veniva un quadratone arrotondato, molto piu' grande dei
   17 px dichiarati e sbilanciato rispetto alla frase accanto.
   La colpa non e' del telefono: la casella sta dentro .frm, quindi si
   prende lo stile dei CAMPI DI TESTO (padding 1em, angoli da 14). Qui
   da me quello stile perde contro il disegno nativo, su Safari vince e
   si vede il risultato. Il modo giusto non e' rincorrere le misure:
   e' spegnere il disegno nativo e farne uno nostro, cosi' e' uguale
   dovunque e non dipende piu' da chi vince.
   Il segno di spunta e' due lati di un riquadro girati di 45 gradi:
   niente immagini da caricare.
   Solo sul telefono, come da accordi. Sul monitor la casella nativa si
   vede giusta: se un giorno la vogliamo uguale anche li', basta
   togliere queste righe dal @media.
   ============================================================ */
@media(max-width:820px){
  .frm-spunta input{
    -webkit-appearance:none;
    appearance:none;
    width:20px;height:20px;
    padding:0;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--card);
    margin-top:1px;
    position:relative;
    transition:background .18s,border-color .18s;
  }
  .frm-spunta input:checked{background:var(--rosa);border-color:var(--rosa)}
  .frm-spunta input:checked::after{
    content:'';position:absolute;left:6px;top:2px;
    width:5px;height:10px;
    border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .frm-spunta input:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
}

/* ============================================================
   25/9 — LE FOTO DI INSTAGRAM: UN NASTRO, NON UN MURO
   Il 18/9 erano passate da quattro colonne a due, perche' a 390 px
   quattro facevano riquadri da 78, dei francobolli. Giusto, ma il
   conto vero e' un altro: i riquadri sono 167 px sul telefono e 168
   sul monitor, cioe' la STESSA misura, solo che di la' stanno su due
   righe e qui su quattro. La griglia passa da 349 px di altezza a 696,
   e la sezione arriva a 1212: una schermata intera di quadrati.

   Qui diventano una fila sola che si trascina. I riquadri restano
   della misura del monitor, l'altezza scende a una riga, e la forma
   e' quella giusta per la cosa: un profilo Instagram si scorre di
   lato, non si legge come una tabella.

   E' lo stesso gesto delle foto de "Il resto della casa" su La casa:
   sul telefono il sito parla una lingua sola.
   ============================================================ */
@media(max-width:560px){
  .ig-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    gap:10px;
    /* fino al bordo dello schermo: il .wrap e' largo l'88% e centrato,
       quindi il margine e' il 6% della finestra */
    margin-left:-6vw;
    margin-right:-6vw;
    padding-left:6vw;
    padding-right:6vw;
    scroll-padding-left:6vw;
  }
  .ig-grid::-webkit-scrollbar{display:none}
  .ig-grid a{flex:0 0 42%;scroll-snap-align:start}
}

/* La riga della privacy sotto al pulsante del modulo contatti: non e' un
   avviso da leggere, e' un collegamento che deve esserci. Sta sotto e
   piccola come una firma. (12/10, quando e' stata tolta la casella da
   spuntare, che non era obbligatoria e fermava l'invio.) */
.frm-privacy{margin:14px 0 0;font-size:.82rem}

/* ============================================================
   12/10 — LA SPUNTA CHE NON DIVENTAVA ROSSA
   Provando a prenotare senza spuntare le condizioni usciva "controllate
   i campi segnati in rosso", ma di rosso non c'era niente: il messaggio
   diceva una cosa non vera.
   La regola del rosso (riga 378) agisce sul BORDO, e la casella la
   prende; solo che sul telefono la casella e' disegnata da noi, mentre
   sul monitor e' ancora quella di sistema, e un riquadro di sistema il
   colore del bordo lo ignora.
   Il contorno (`outline`) invece lo rispetta anche lui, e si vede su
   tutti e due. Insieme alla scritta che diventa scura e all'etichetta
   in rosa, l'errore si trova a colpo d'occhio.
   Si accende solo DOPO il primo tentativo di invio, perche' e' `.touched`
   a essere messa al momento dell'invio: una casella rossa prima ancora
   di aver provato sarebbe un rimprovero a chi non ha fatto niente.
   ============================================================ */
.frm-spunta input:invalid.touched{
  outline:2px solid var(--rosa);
  outline-offset:2px;
}
.frm-spunta:has(input:invalid.touched){color:var(--ink)}
.frm-spunta:has(input:invalid.touched) a{color:var(--rosa)}

/* ============================================================
   15/10 — `hidden` PERDE CONTRO `display:flex`, la seconda volta
   Montando il pagamento dentro prenota.html, il questionario doveva
   sparire: `f.hidden = true` nel codice, e invece restava li' sopra col
   totale e il pulsante gia' premuto.
   `.frm` ha `display:flex` (riga 321), e una regola del foglio batte
   sempre l'attributo `hidden`, che vale quanto `display:none` messo
   dal browser e nient'altro.
   E' lo STESSO errore del 21/9 sulle frecce del lettore del quaderno.
   Due volte vuol dire che non e' sfortuna: ogni volta che nel codice
   si scrive `.hidden = true` su qualcosa, bisogna controllare se quel
   qualcosa ha un display suo.
   ============================================================ */
.frm[hidden]{display:none}
#pagamento[hidden]{display:none}

/* Il riepilogo quando viene spostato fuori dal modulo, sopra al
   pagamento (16/10): dentro al .frm lo spazio glielo dava il `gap` del
   modulo, fuori non ce l'ha piu' e si appoggerebbe al riquadro di
   Stripe. */
#pagamento:not([hidden]){margin-top:22px}
.riepilogo + #pagamento{margin-top:18px}

/* ============================================================
   16/10 — LA PAGINA DEL PAGAMENTO NON HA NIENTE INTORNO
   Appena il modulo di Stripe e' montato, app.js mette `in-pagamento`
   sul body. Da li' spariscono il menu, il pulsante "Prenota ora" e la
   fascia scura con le istruzioni per scegliere le date: a quel punto
   le date sono scelte e l'unica cosa da fare e' confermare.
   Il marchio resta. Chi sta per lasciare i dati della carta deve
   vedere dov'e'.
   ============================================================ */
body.in-pagamento .hdr-r,
body.in-pagamento .burger,
body.in-pagamento .phero.pagina{display:none}
body.in-pagamento header#hdr{position:static}
body.in-pagamento .sec:first-of-type{padding-top:56px}

/* Il marchio chiaro, senza la fascia scura dietro, sparisce sul crema.
   NON si riscrive qui il suo aspetto: il sito ha gia' la versione per
   fondo chiaro, ed e' la classe `.solid` che la testata si mette da
   sola scorrendo. app.js gliela accende e basta.
   Provato prima a rifarlo con regole nuove: perdevano contro
   `body:not(.home) header:not(.solid) .brand .nm`, che e' piu' forte.
   Riusare lo stato che esiste evita sia la lotta di specificita' sia
   un terzo aspetto da mantenere. */

/* Il titolo del passo del pagamento: piu' raccolto dei titoloni di
   sezione, perche' qui sotto c'e' subito il riepilogo e non deve
   spingerlo fuori schermo. */
body.in-pagamento #paga-tit{margin-bottom:34px}
body.in-pagamento #paga-tit h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}

/* ============================================================
   19/10 — IL BANNER DEI COOKIE (consenso.js)
   Una scheda in basso a destra (a sinistra copriva i titoli delle
   testate, che stanno tutti li'), non un velo su tutta la pagina: chi
   non sceglie puo' continuare a leggere, e finche' non sceglie GA4 resta
   spento. "Rifiuta" e "Accetta" sono lo STESSO pulsante, stessa misura e
   stesso peso: un "rifiuta" piu' piccolo e' la prima cosa che i garanti
   contestano (lezione di Fai Cheese, 12/10).
   Scuro come il piede del sito, scelto da Steven fra tre prove (in
   office.stevetech.it/casa-camelia-banner-cookie/): sopra le foto chiare
   il crema si staccava poco. Pulsanti col contorno crema e NON rossi:
   il rosso pieno e' di "Prenota ora", e solo suo.
   ============================================================ */
.cc{position:fixed;right:24px;bottom:24px;z-index:150;width:min(420px,calc(100vw - 32px));
  /* bordo crema: sopra il piede, che e' dello stesso scuro, se no la
     scheda si scioglie nello sfondo */
  background:var(--ink);color:var(--bg);border:1px solid rgba(250,246,241,.22);
  box-shadow:0 18px 50px rgba(44,24,16,.28);padding:26px 26px 20px;font-family:var(--sans)}
.cc[hidden],.cc [hidden]{display:none}
.cc:focus{outline:none}
.cc-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;
  font-size:1.6rem;line-height:1;color:rgba(250,246,241,.7);cursor:pointer}
.cc-x:hover{color:var(--bg)}
.cc-tit{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin:0 0 8px;color:var(--bg)}
.cc-txt{font-size:.9rem;line-height:1.6;color:rgba(250,246,241,.82);margin:0 0 18px}
.cc-txt a{color:var(--gold);text-decoration:underline}
.cc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-btns .btn{justify-content:center;padding:.9em 1em}
.cc .btn.ghost{color:var(--bg);border-color:var(--bg)}
.cc .btn.ghost:hover{background:var(--bg);color:var(--ink)}
.cc-link{display:block;margin:12px auto 0;border:0;background:none;font:inherit;
  font-size:.85rem;color:rgba(250,246,241,.7);text-decoration:underline;cursor:pointer}
.cc-link:hover{color:var(--bg)}
.cc-salva{width:100%;justify-content:center;margin-top:10px}
.cc .cc-salva{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.cc .cc-salva:hover{background:var(--bg-soft);border-color:var(--bg-soft)}
.cc-pannello{border-top:1px solid rgba(250,246,241,.16);margin:0 0 16px}
.cc-cat{padding:14px 0;border-bottom:1px solid rgba(250,246,241,.16)}
.cc-cat p{font-size:.84rem;line-height:1.55;color:rgba(250,246,241,.7);margin:6px 0 0}
.cc-riga{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.95rem}
.cc-sempre{font-size:.78rem;color:var(--gold);letter-spacing:.04em}
/* l'interruttore e' disegnato da noi: quello di sistema e' una casella
   minuscola che sul telefono non si vede quasi (Fai Cheese, 10/8) */
.cc-sw{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:24px;border-radius:24px;
  background:rgba(250,246,241,.25);position:relative;cursor:pointer;transition:background .25s var(--ease);margin:0}
.cc-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .25s var(--ease)}
.cc-sw:checked{background:var(--rosa)}
.cc-sw:checked::after{transform:translateX(20px)}
.cc-sw:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
@media(max-width:560px){
  .cc{right:16px;bottom:16px;padding:22px 20px 16px}
}

/* ============================================================
   19/10 — IL POPUP DELLA NEWSLETTER (newsletter.js)
   Pannello da destra a tutta altezza, pagina velata dietro, foto in
   testa: lo schema dei popup di Fai Cheese e Pirolino. Crema come le
   pagine, pulsante scuro e non rosso: il rosso pieno e' di "Prenota ora".
   ============================================================ */
.nlp-velo{position:fixed;inset:0;z-index:160;background:rgba(44,24,16,.45);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.nlp-velo.aperto{opacity:1;pointer-events:auto}
.nlp{position:fixed;top:0;right:0;bottom:0;z-index:161;width:min(460px,100vw);
  background:var(--bg);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:-18px 0 50px rgba(44,24,16,.25);
  transform:translateX(105%);visibility:hidden;
  transition:transform .6s var(--ease),visibility 0s linear .6s}
.nlp.aperto{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.nlp:focus{outline:none}
/* il tramonto sul lago (la stessa di La casa e Contatti), quasi intero:
   un taglio fisso perdeva il cielo o il tetto. Il tetto in vh tiene
   il modulo dentro lo schermo sui portatili bassi */
.nlp-foto{display:block;width:100%;height:auto;aspect-ratio:1100/825;max-height:44vh;object-fit:cover;object-position:center 60%}
.nlp-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(250,246,241,.92);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.nlp-x:hover{background:var(--bg)}
.nlp-in{padding:36px 40px 40px;text-align:center}
.nlp-in h2{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1.1;margin:0 0 14px}
.nlp-txt{font-size:.98rem;line-height:1.6;color:var(--ink2);margin:0 auto 26px;max-width:34ch}
.nl-frm{display:grid;gap:12px;margin:0 0 16px}
.nl-frm[hidden],.nl-nota[hidden],.nl-esito[hidden]{display:none}
.nl-frm input:not([type=checkbox]){min-width:0;font:inherit;font-size:.98rem;padding:.9em 1em;background:#fff;
  color:var(--ink);border:1px solid var(--line);border-radius:0}
.nl-frm input:not([type=checkbox])::placeholder{color:var(--soft)}
.nl-frm input:not([type=checkbox]):focus{outline:none;border-color:var(--ink)}
.nl-frm input:not([type=checkbox]).touched:invalid{border-color:var(--rosa);outline:1px solid var(--rosa)}
.nl-frm .btn{justify-content:center;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.nl-frm .btn:hover{background:var(--ink2);border-color:var(--ink2)}
/* il campo esca: fuori dallo schermo, non display:none, se no certi
   robot lo saltano proprio perche' nascosto */
.nl-esca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nl-nota{font-size:.8rem;line-height:1.55;color:var(--dim);margin:0}
.nl-nota a{color:var(--rosa);text-decoration:underline}
.nl-esito{font-family:var(--serif);font-size:1.35rem;line-height:1.4;color:var(--ink);margin:8px 0 0}
/* Sul telefono il pannello a tutta altezza diventava una pagina intera
   (Steven, 21/10). Come il popup di Fai Cheese: entra sempre da destra,
   ma e' una scheda di circa l'80% della larghezza, staccata dal bordo e
   centrata in altezza, con la pagina che si vede intorno. Una prima prova
   che saliva dal basso a tutta larghezza l'ha trovata invadente. */
@media(max-width:560px){
  .nlp{top:50%;bottom:auto;right:10px;width:min(330px,calc(100vw - 56px));
    max-height:calc(100dvh - 120px);box-shadow:0 18px 50px rgba(44,24,16,.3);
    transform:translate(115%,-50%)}
  .nlp.aperto{transform:translate(0,-50%)}
  .nlp-foto{aspect-ratio:auto;height:17vh;max-height:150px}
  .nlp-x{top:8px;right:8px;width:34px;height:34px;font-size:1.35rem}
  .nlp-in{padding:20px 18px 20px}
  .nlp-in h2{font-size:1.55rem;margin-bottom:8px}
  .nlp-txt{font-size:.88rem;margin-bottom:16px}
  .nl-frm{gap:9px;margin-bottom:10px}
  .nl-frm input:not([type=checkbox]){padding:.75em .9em;font-size:.95rem}
  .nl-nota{font-size:.74rem}
}