/* Base grafica condivisa da TUTTE le pagine del sito: font, colori, reset, pulsanti,
   header, menu di navigazione e footer.
   Unica fonte: non ridefinire queste regole nelle pagine o in blog.css.
   Il markup di header e footer è in .claude/nuvola-seo/template/ (header.html, footer.html)
   e viene applicato/controllato su tutte le pagine da .claude/nuvola-seo/strumenti/layout_sito.py.
   Colori: salvia e verde bosco, gli stessi delle pareti e dei tessili dell'appartamento.
   Un solo accento (--bosco); il verde WhatsApp non si usa: i pulsanti hanno l'icona. */

/* ---------- font (ospitato qui, niente richieste a Google Fonts) ---------- */
@font-face{
  font-family:'Instrument Sans';
  src:url(/assets/font/instrument-sans-latin.woff2) format('woff2');
  font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ripiego con metriche simili: il testo non "salta" quando arriva il font (CLS) */
@font-face{
  font-family:'Instrument Sans Ripiego';
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
  size-adjust:98%;ascent-override:96%;descent-override:25%;line-gap-override:0%;
}

/* ---------- token ---------- */
:root{
  --carta:#FFFFFF;          /* sfondo pagina: bianco, sempre (niente modalità scura, scelta dell'utente) */
  --superficie:#F7F8F5;     /* riquadri su sfondo bianco */
  --salvia:#8D9E85;         /* colore del marchio */
  --salvia-chiara:#E5EBE1;
  --salvia-media:#C9D4C2;
  --bosco:#2E3B2B;          /* accento: pulsanti, link attivi */
  --bosco-hover:#23301F;
  --su-bosco:#FFFFFF;       /* testo sui pulsanti */
  --nero:#151A16;           /* testo */
  --grigio:#566058;         /* testo secondario, 5,9:1 sullo sfondo */
  --bordo:#DCE1D7;
  --bordo-forte:#C3CBBD;
  --bianco:var(--superficie);
  --crema:var(--carta);
  --rosa:#C98A9C;           /* solo compatibilità con vecchie regole */
  --rosa-chiara:#F3E9EC;
  --stelle:#B8862F;
  --whatsapp:#25D366;       /* solo per l'icona di WhatsApp */
  --ombra:0 1px 2px rgba(35,48,31,.05),0 12px 32px -12px rgba(35,48,31,.18);
  --r-s:8px;--r-m:14px;--r-l:22px;
  --font:'Instrument Sans','Instrument Sans Ripiego',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* curve di animazione (Emil Kowalski): mai ease-in sull'interfaccia */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --curva:var(--ease-out);
  color-scheme:only light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:hidden;max-width:100%}
/* clip e non hidden: hidden rende body un contenitore di scorrimento e l'header sticky smette di restare in alto */
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{
  font-family:var(--font);font-size:16px;line-height:1.6;
  color:var(--nero);background:var(--carta);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01';
}
h1,h2,h3{font-family:var(--font);font-weight:600;font-stretch:94%;letter-spacing:-.022em;color:var(--nero)}
h1,h2{text-wrap:balance}
p,li{text-wrap:pretty}
p,li,address,h1,h2,h3{overflow-wrap:break-word}
img{display:block;max-width:100%}
a,button,summary{touch-action:manipulation}
/* i comandi non si selezionano con la pressione lunga; i testi sì */
.btn,button,summary,.head-in a,.sito-nav a,.menu-pannello a{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
::selection{background:var(--salvia-media);color:var(--nero)}
:focus-visible{outline:2px solid var(--bosco);outline-offset:3px;border-radius:4px}
.wrap{
  width:100%;max-width:1200px;margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}
.salta{
  position:absolute;left:12px;top:-60px;z-index:70;
  padding:10px 16px;border-radius:var(--r-s);
  background:var(--bosco);color:var(--su-bosco);font-weight:600;text-decoration:none;
}
.salta:focus{top:12px}

/* ---------- icone (Phosphor, inline) ---------- */
.i{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;
  font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform 160ms var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn .i{width:19px;height:19px}
.btn-scuro,.btn-wa{background:var(--bosco);color:var(--su-bosco)}
/* icona WhatsApp su ogni pulsante WhatsApp, senza toccare il markup degli articoli */
.btn-wa::before{
  content:'';width:19px;height:19px;flex:0 0 auto;background:var(--whatsapp);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M152.58,145.23l23,11.48A24,24,0,0,1,152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155ZM232,128A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-40,24a8,8,0,0,0-4.42-7.16l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88A40,40,0,0,0,192,152Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M152.58,145.23l23,11.48A24,24,0,0,1,152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155ZM232,128A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-40,24a8,8,0,0,0-4.42-7.16l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88A40,40,0,0,0,192,152Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-chiaro{background:transparent;color:var(--nero);border-color:var(--bordo-forte)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--carta) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--bordo);
}
@supports not (background:color-mix(in srgb,red,blue)){header{background:var(--carta)}}
.head-in{display:flex;align-items:center;height:68px;gap:28px;min-width:0}
.head-in .logo{display:inline-flex;flex:0 0 auto;border-radius:6px}
.head-in .logo img{height:42px;width:auto}
.head-azioni{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;margin-left:auto}
/* a destra: icona WhatsApp (solo domande) e «Prenota», l'azione principale di tutto il sito */
.head-in a.wa,
.head-in a.prenota{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:999px;text-decoration:none;touch-action:manipulation;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  transition:background-color .2s ease,border-color .2s ease,transform 160ms var(--ease-out);
}
.head-in a.wa{width:46px;height:46px;border:1px solid var(--bordo)}
.head-in a.wa svg{width:24px;height:24px;fill:var(--whatsapp)}
.head-in a.prenota{
  min-height:46px;padding:0 30px;background:var(--bosco);color:var(--su-bosco);
  font-family:var(--font);font-weight:600;font-size:16px;line-height:1;letter-spacing:-.01em;
}
.head-in a.wa:active,.head-in a.prenota:active{transform:scale(.97)}

/* selettore di lingua (solo home) */
#langToggle{
  display:inline-flex;align-items:center;flex:0 0 auto;gap:2px;
  padding:3px;border-radius:999px;border:1px solid var(--bordo);
}
#langToggle button{
  border:0;background:transparent;cursor:pointer;border-radius:999px;
  font-family:var(--font);font-weight:600;font-size:12.5px;letter-spacing:.02em;
  color:var(--grigio);padding:0 11px;min-height:34px;min-width:38px;
  transition:background-color .2s ease,color .2s ease,transform 160ms var(--ease-out);
}
#langToggle button:active{transform:scale(.95)}
#langToggle button.attivo{background:var(--salvia-chiara);color:var(--nero)}


/* ---------- menu di navigazione (desktop) ---------- */
.sito-nav{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.sito-nav a{
  position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 12px;
  font-family:var(--font);font-weight:500;font-size:15px;
  color:var(--grigio);text-decoration:none;border-radius:999px;
  transition:color .2s ease,background-color .2s ease;
}
.sito-nav a[aria-current]{color:var(--nero);font-weight:600}
.sito-nav a[aria-current]::after{
  content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--salvia);
}

/* ---------- menu a tendina (mobile) ---------- */
.menu-mobile{display:none;position:relative;flex:0 0 auto}
.menu-mobile > summary{
  list-style:none;cursor:pointer;
  width:42px;height:42px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--bordo-forte);background:transparent;
  transition:transform 160ms var(--ease-out);
}
.menu-mobile > summary:active{transform:scale(.95)}
.menu-mobile > summary::-webkit-details-marker{display:none}
.menu-mobile > summary::marker{content:''}
.menu-mobile .barre{position:relative;width:16px;height:10px}
.menu-mobile .barre span{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:var(--nero);transition:transform .25s var(--curva),opacity .2s ease;
}
.menu-mobile .barre span:nth-child(1){top:0}
.menu-mobile .barre span:nth-child(2){top:4.25px}
.menu-mobile .barre span:nth-child(3){top:8.5px}
.menu-mobile[open] .barre span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.menu-mobile[open] .barre span:nth-child(2){opacity:0}
.menu-mobile[open] .barre span:nth-child(3){transform:translateY(-4.25px) rotate(-45deg)}
.menu-mobile .menu-pannello{
  position:absolute;top:calc(100% + 12px);right:0;z-index:60;
  min-width:220px;padding:8px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r-m);
  box-shadow:var(--ombra);
  display:flex;flex-direction:column;gap:2px;
  transform-origin:top right;
}
/* il pannello nasce dal pulsante che lo apre (keyframe: parte a ogni apertura, su ogni browser) */
.menu-mobile[open] .menu-pannello{animation:apri-menu 200ms var(--ease-out)}
@keyframes apri-menu{from{opacity:0;transform:scale(.96) translateY(-6px)}}
@keyframes apri-menu-dissolvenza{from{opacity:0}}
.menu-mobile .menu-pannello a{
  display:flex;align-items:center;min-height:48px;padding:0 14px;
  font-family:var(--font);font-weight:600;font-size:16px;
  color:var(--nero);text-decoration:none;border-radius:var(--r-s);
}
.menu-mobile .menu-pannello a:active,
.menu-mobile .menu-pannello a[aria-current]{background:var(--salvia-chiara)}
@media (prefers-reduced-motion:reduce){
  .menu-mobile .barre span{transition:none}
  .menu-mobile[open] .menu-pannello{animation-name:apri-menu-dissolvenza}
}

/* ---------- footer ---------- */
footer{
  margin-top:24px;border-top:1px solid var(--bordo);padding:56px 0 40px;
  font-size:14.5px;line-height:1.65;color:var(--grigio);
}
.footer-griglia{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px 48px;align-items:start}
footer .footer-logo{display:inline-flex}
/* width:auto evita che l'attributo width="335" del logo lo schiacci */
footer .footer-logo img{display:block;height:52px;width:auto}
footer .footer-motto{margin-top:18px;max-width:30ch}
footer .footer-titolo{font-size:13.5px;font-weight:600;color:var(--nero);margin-bottom:12px}
footer a{color:var(--grigio);text-decoration:none;transition:color .2s ease}
footer .footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
footer .footer-nav a[aria-current]{color:var(--nero);font-weight:600}
footer address{font-style:normal}
footer address strong{font-weight:600;color:var(--nero)}
footer .footer-legale{margin-top:36px;padding-top:18px;border-top:1px solid var(--bordo);font-size:13px;color:var(--grigio)}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .head-in{gap:16px}
  .footer-griglia{grid-template-columns:1fr 1fr}
  .footer-griglia > :first-child{grid-column:1 / -1}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .head-in{height:62px;gap:10px}
  .head-in .logo img{height:34px}
  .head-azioni{gap:6px}
  .sito-nav{display:none}
  .menu-mobile{display:inline-block}
  .head-in a.wa{width:44px;height:44px}
  .head-in a.wa svg{width:23px;height:23px}
  .head-in a.prenota{min-height:44px;padding:0 22px;font-size:15.5px}
  #langToggle button{min-height:32px;min-width:34px;padding:0 8px;font-size:12px}
  footer{padding:44px 0 32px}
  .footer-griglia{grid-template-columns:1fr;gap:30px}
}
@media (max-width:370px){
  .head-in{gap:8px}
  .head-azioni{gap:4px}
  .head-in a.wa{width:40px;height:40px}
  .head-in a.prenota{padding:0 14px;font-size:15px}
  #langToggle button{min-width:30px;padding:0 6px}
}

/* ---------- domande frequenti: l'apertura morbida è in /assets/sito.js ---------- */
/* durante la chiusura il + torna subito dritto, senza aspettare la fine */
.faq-voce[open][data-chiude] summary::after{transform:none}

/* ---------- effetti al passaggio del mouse: solo con un mouse (sul telefono restano "incollati") ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-scuro:hover,.btn-wa:hover{background:var(--bosco-hover)}
  .btn-chiaro:hover{border-color:var(--nero)}
  .head-in a.wa:hover{background:var(--salvia-chiara);border-color:var(--salvia-media)}
  .head-in a.prenota:hover{background:var(--bosco-hover)}
  #langToggle button:hover{color:var(--nero)}
  .sito-nav a:hover{color:var(--nero);background:var(--salvia-chiara)}
  footer a:hover{color:var(--nero);text-decoration:underline;text-underline-offset:3px}
}