/* Design system: i valori qui sotto si definiscono per brand.
   Vedi references/design-system.md prima di cambiarli. */
:root{
  --bg:#ffffff; --fg:#1a1a1a; --muted:#6b6b6b; --accent:#8a6a3b; --line:#e6e3de;
  --font-title:Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
  --radius:10px; --shadow:0 2px 12px rgba(0,0,0,.08); --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 var(--font-body);overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-title);line-height:1.2;margin:0 0 var(--s3)}
h1{font-size:clamp(2rem,6vw,3.5rem)}
h2{font-size:clamp(1.5rem,4vw,2.25rem)}
p{margin:0 0 var(--s3);max-width:70ch}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.btn{display:inline-block;padding:var(--s3) var(--s5);background:var(--accent);
  color:#fff;text-decoration:none;border-radius:var(--radius);font-weight:600}
.btn-small{padding:var(--s2) var(--s3);font-size:.875rem}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand img{height:36px;width:auto}
.main-nav{display:none;gap:var(--s4)}
.main-nav a{text-decoration:none}
.main-nav a.active{color:var(--accent)}
.header-right{display:flex;align-items:center;gap:var(--s3)}
.lang-switch a{text-decoration:none;font-size:.8rem;padding:0 var(--s1);color:var(--muted)}
.lang-switch a.active{color:var(--fg);font-weight:600}
.nav-toggle{display:block;background:none;border:0;padding:var(--s2);cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--fg);margin:4px 0}
.main-nav.open{display:flex;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;background:var(--bg);padding:var(--s4);border-bottom:1px solid var(--line)}

.hero{position:relative;min-height:70vh;display:flex;align-items:center;
  background-size:cover;background-position:center;color:#fff}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.hero-content{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s3)}
.hero-content p{color:#fff}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin-bottom:var(--s2)}

.section{padding:var(--s7) 0}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.cards{display:grid;gap:var(--s4);grid-template-columns:1fr}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.gallery{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
.gal-item{padding:0;border:0;background:none;cursor:pointer}
.gal-item img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.cta-band{background:#f7f5f2;text-align:center}
.cta-band p{margin-inline:auto}
.reviews-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
.review-card{margin:0;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.review-stars{color:var(--accent);letter-spacing:.15em}
.review-card blockquote{margin:var(--s2) 0;font-style:italic}
.review-card figcaption{color:var(--muted);font-size:.875rem}

.site-footer{background:#1a1a1a;color:#e8e6e3;margin-top:var(--s7)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s3);
  display:grid;gap:var(--s5);grid-template-columns:1fr}
.footer-col h4{margin-bottom:var(--s2)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:var(--s2)}
.footer-col a{text-decoration:none;color:#c9c5c0}
.footer-bottom{border-top:1px solid #333;padding:var(--s3);text-align:center;
  font-size:.8rem;color:#9a9691}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:var(--s3)}
.lightbox img{max-height:90vh;width:auto}

@media (min-width:768px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:2fr 1fr 1fr 1fr}
}
@media (min-width:960px){
  .main-nav{display:flex}
  .nav-toggle{display:none}
}

/* ---------- simonemalavolta.com ----------
   Carattere: Helvetica dove c'e (Mac, iPhone), Inter come ripiego altrove.
   Impianto: titolo grande, prova subito, una sola chiamata all'azione.
   Riferimenti: calebralston.com, mattgray.com, thefutur.com */
:root{
  --bg:#faf9f7; --fg:#111111; --muted:#6b6862; --accent:#111111; --accent-chiaro:#efeeea;
  --line:#e5e2dc; --scuro:#111111;
  --font-title:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --maxw:1140px; --radius:6px;
}
body{font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-title);font-weight:700;letter-spacing:-0.025em;line-height:1.08}
p{max-width:62ch}
.section{padding:var(--s7) 0}
.section-inner{max-width:var(--maxw)}

.btn{background:var(--accent);border-radius:var(--radius);font-weight:600;letter-spacing:-0.01em;
  transition:background .15s}
.btn:hover{background:#000}
.btn-grande{padding:var(--s4) var(--s5);font-size:1.0625rem}
.btn-chiaro{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-chiaro:hover{background:#fff;border-color:var(--fg)}

/* L'intestazione resta in alto mentre si scorre: senza un fondo pieno il testo
   delle sezioni ci passa attraverso e si sovrappone al nome. */
.site-header{background:rgba(250,249,247,.92);border-bottom:1px solid transparent;
  transition:border-color .2s,background .2s}
@supports (backdrop-filter:blur(8px)){ .site-header{backdrop-filter:blur(8px)} }
.site-header.scrollata{border-bottom-color:var(--line)}
/* le ancore non devono finire sotto l'intestazione */
[id]{scroll-margin-top:88px}
.header-inner{max-width:var(--maxw);padding:var(--s4) var(--s3)}
.brand{font-weight:700;font-size:1.0625rem;text-decoration:none;letter-spacing:-0.02em}
.nav-toggle{display:none}

/* apertura */
.apertura{padding-top:var(--s5);padding-bottom:var(--s6)}
.apertura-inner{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:center}
.occhiello{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:600;
  color:var(--muted);margin-bottom:var(--s3)}
.apertura h1{font-size:clamp(2.4rem,8vw,4.25rem);margin-bottom:var(--s4)}
.apertura h1 em{font-style:normal;text-decoration:underline;
  text-decoration-thickness:4px;text-underline-offset:8px}
.apertura-sub{font-size:clamp(1.0625rem,2.4vw,1.25rem);color:#3a3833;margin-bottom:var(--s5)}
.apertura-foto img{width:100%;max-width:420px;aspect-ratio:2/3;object-fit:cover;
  border-radius:var(--radius);filter:grayscale(1)}

/* fascia di prova */
.prova{background:var(--scuro);color:#f5f4f1;padding:var(--s6) 0}
.prova-inner{display:grid;gap:var(--s4);grid-template-columns:1fr}
.prova-numero strong{display:block;font-family:var(--font-title);font-weight:700;
  font-size:clamp(2rem,6vw,3.25rem);letter-spacing:-0.03em;line-height:1.05}
.prova-numero span{display:block;margin-top:var(--s3);color:#b9b5ad;font-size:.9375rem;max-width:44ch}
.prova-titolo{text-transform:uppercase;letter-spacing:.1em;font-size:.6875rem;color:#8c8880;
  margin-bottom:var(--s4)}
.prova-loghi{display:none;width:100%;height:auto}
.prova-nomi{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3) var(--s4);
  grid-template-columns:repeat(2,1fr)}
.prova-nomi li{color:#cfcbc3;font-weight:500;font-size:.875rem;letter-spacing:-0.01em;
  padding-bottom:var(--s2);border-bottom:1px solid #262624}
@media (min-width:600px){ .prova-nomi{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){
  .prova-loghi{display:block}
  /* i nomi restano leggibili dai lettori di schermo, ma non a video */
  .prova-nomi{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* testimonianze */
.testimonianze h2{font-size:clamp(1.6rem,4vw,2.25rem);margin-bottom:var(--s5)}
.t-griglia{display:grid;gap:var(--s4);grid-template-columns:1fr}
.t-carta{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4)}
.t-carta blockquote{margin:0 0 var(--s4);font-size:.9375rem;line-height:1.65}
.t-carta blockquote::before{content:"\201C"}
.t-carta blockquote::after{content:"\201D"}
.t-carta figcaption strong{display:block;font-size:.9375rem}
.t-carta figcaption span{display:block;color:var(--muted);font-size:.8125rem}
.t-profilo{color:#8d8a83!important}

.section h2{font-size:clamp(1.6rem,4vw,2.25rem);margin-bottom:var(--s4)}
.cards{gap:var(--s4)}
.card{border:0;border-top:2px solid var(--accent);border-radius:0;padding:var(--s3) 0 0}
.card h3{font-size:1rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.9375rem;margin:0}

/* questionario */
.questionario-sezione{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.q-intro{color:var(--muted);max-width:56ch}
#questionario{max-width:38rem;margin-top:var(--s5)}
.q-testa{margin-bottom:var(--s5)}
.q-barra{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.q-barra span{display:block;height:100%;background:var(--accent);transition:width .25s}
.q-conta{margin:var(--s2) 0 0;font-size:.8125rem;color:var(--muted)}
.q-titolo{font-size:1.5rem;margin-bottom:var(--s5)}
.campo{margin-bottom:var(--s5)}
.etichetta{display:block;font-weight:600;font-size:1rem;margin-bottom:6px}
.aiuto{font-size:.875rem;color:var(--muted);margin:0 0 var(--s3)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;background:var(--bg);color:var(--fg)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.campo textarea{resize:vertical;min-height:110px}
.opzioni{display:grid;gap:10px}
.opzione{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:border-color .12s,background .12s}
.opzione:hover{border-color:var(--accent)}
.opzione:has(input:checked){border-color:var(--accent);background:var(--accent-chiaro)}
.opzione input{width:auto;flex:0 0 auto;margin-top:3px;accent-color:var(--accent)}
.opzione label{cursor:pointer;font-size:.9375rem;line-height:1.45}
.campo-consenso{display:flex;gap:12px;align-items:flex-start}
.campo-consenso input{width:auto;flex:0 0 auto;margin-top:4px;accent-color:var(--accent)}
.campo-consenso label{font-size:.875rem;color:var(--muted);line-height:1.5}
.campo-consenso a{color:var(--accent)}
.campo.non-valido input,.campo.non-valido select,.campo.non-valido textarea,
.campo.non-valido .opzione{border-color:#b3261e}
.errore{margin:8px 0 0;font-size:.8125rem;color:#b3261e}
.q-azioni{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s5)}
.q-azioni .btn{padding:14px 28px;border:0;cursor:pointer;font:inherit;font-weight:600}
.q-azioni .btn[disabled]{opacity:.55;cursor:default}
.q-esito{margin-top:var(--s3);font-size:.9375rem;min-height:1.4em}
.q-esito.ko{color:#b3261e}
.q-grazie{font-size:1.0625rem}
.q-attesa{color:var(--muted)}

.social-links{display:flex;flex-wrap:wrap;gap:var(--s2)}
.social-link{display:inline-block;padding:10px 18px;border:1px solid var(--line);
  border-radius:999px;text-decoration:none;font-size:.875rem;font-weight:500;background:#fff}
.social-link:hover{border-color:var(--accent);color:var(--accent)}

.site-footer{background:transparent;color:var(--muted);margin-top:0;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s3);font-size:.8125rem;grid-template-columns:none;
  max-width:var(--maxw);margin:0 auto}
.footer-legal a{color:var(--muted)}

@media (min-width:900px){
  .apertura-inner{grid-template-columns:1.25fr .75fr;gap:var(--s7)}
  .prova-inner{grid-template-columns:1fr;gap:var(--s5)}
  .t-griglia{grid-template-columns:repeat(3,1fr)}
  .t-carta:first-child{grid-column:span 2}
  .cards{grid-template-columns:repeat(4,1fr)}
}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* newsletter: il pezzo centrale */
.visuallyhidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.newsletter{background:var(--scuro);color:#f5f4f1}
.newsletter .occhiello{color:#9a968e}
.nl-inner{display:grid;gap:var(--s6);grid-template-columns:1fr;max-width:var(--maxw)}
.nl-testo h2{font-size:clamp(1.75rem,4.5vw,2.75rem);margin-bottom:var(--s4);color:#fff}
.nl-testo>p{color:#c2beb6;max-width:46ch;margin-bottom:var(--s5)}
.nl-form{display:grid;gap:var(--s3);max-width:30rem}
.nl-form input{width:100%;padding:15px;border:1px solid #3a3833;border-radius:var(--radius);
  background:#1c1c1a;color:#f5f4f1;font:inherit}
.nl-form input::placeholder{color:#7e7a73}
.nl-form input:focus{outline:2px solid #fff;outline-offset:1px;border-color:#fff}
.nl-form .btn{background:#fff;color:#111;border:0;cursor:pointer;font:inherit;font-weight:600;
  padding:15px 26px;justify-self:start}
.nl-form .btn:hover{background:#e6e3dd}
.nl-esito{margin:0;font-size:.875rem;min-height:1.2em}
.nl-esito.ok{color:#a8d8c0}
.nl-esito.ko{color:#f0a9a2}
.nl-nota{margin:0;font-size:.8125rem;color:#8c8880}
.nl-articoli{border-top:1px solid #333;padding-top:var(--s4)}
.nl-etichetta{text-transform:uppercase;letter-spacing:.1em;font-size:.6875rem;color:#8c8880;
  margin-bottom:var(--s3)}
.nl-articoli ul{list-style:none;margin:0 0 var(--s4);padding:0}
.nl-articoli li{border-bottom:1px solid #2a2a28}
.nl-articoli a{display:block;padding:var(--s3) 0;color:#e8e5df;text-decoration:none;
  font-size:.9375rem;line-height:1.45}
.nl-articoli a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.nl-archivio{font-size:.875rem;color:#9a968e}
@media (min-width:900px){
  .nl-inner{grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:start}
  .nl-articoli{border-top:0;border-left:1px solid #333;padding:0 0 0 var(--s5)}
}
