/* Stile delle pagine delle recensioni (25/09/2026): /recensioni, /scrivi-recensione, /privacy e
   la pagina di approvazione che apre Savio dall'email.
   Le altre pagine del sito hanno lo stile dentro la pagina; queste quattro lo condividono qui.
   I token, i caratteri, la testata, i pulsanti e il fondo sono gli stessi della home, copiati
   da index.html: se cambiano là, vanno cambiati anche qui. Le schede delle recensioni della home
   hanno una copia delle stesse regole dentro index.html. */
@font-face{font-family:'Familjen Grotesk';src:url('/fonts/familjen-grotesk.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/source-sans-3.woff2') format('woff2');font-weight:400 700;font-display:swap}
*{box-sizing:border-box;margin:0}
/* .btn ha display:inline-block, che altrimenti vince sul display:none di [hidden] */
[hidden]{display:none !important}
:root{--nero:#0B4A3E;--nero2:#0A4136;--avorio:#F5F0E4;--avorio2:#EDE6D3;--ink:#201E1A;--soft:#6B6353;--verde:#0E7561;--verde2:#0A5647;--linea:#D9D0BC;--errore:#A0331F}
html{background:var(--avorio)}
body{font-family:'Source Sans 3',-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;color:var(--ink);background:var(--avorio);line-height:1.65;font-size:16.5px;overscroll-behavior-y:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
a{color:var(--verde)}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}
.vertebre{display:flex;gap:7px;padding:4px 0;color:var(--verde)}
.vertebre i{width:16px;height:10px;border-radius:4px;background:currentColor;opacity:.85;display:block}
.vertebre i:nth-child(2),.vertebre i:nth-child(6){width:19px;height:11px}
.vertebre i:nth-child(3),.vertebre i:nth-child(5){width:22px;height:12px}
.vertebre i:nth-child(4){width:25px;height:13px}

/* testata */
.top{position:sticky;top:0;z-index:30;background:rgba(247,242,231,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea);color:var(--ink)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.marchio img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--verde)}
.marchio b{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:400;font-size:16.5px;line-height:1.2;display:block;letter-spacing:.04em}
.marchio span{font-size:11px;color:var(--soft);letter-spacing:.14em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.nav a{text-decoration:none;color:var(--soft);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav a:hover{color:var(--verde)}
@media(max-width:760px){.nav a:not(.btn){display:none}}
.btn{display:inline-block;background:var(--verde);color:#fff !important;text-decoration:none;padding:12px 24px;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--verde);border-radius:6px;transition:background .15s ease,transform .12s ease;font-family:inherit;cursor:pointer;line-height:1.4;text-align:center}
.btn:hover{background:var(--verde2)}
.btn:active{transform:scale(.98)}
.btn.vuoto{background:transparent;color:var(--verde) !important}
.btn.vuoto:hover{background:rgba(14,117,97,.08)}
@media(max-width:640px){
  .marchio b{font-size:15px;letter-spacing:.02em;white-space:nowrap}
  .marchio span{font-size:10px;letter-spacing:.08em}
  .marchio img{width:38px;height:38px}
  .nav .btn{padding:11px 16px;font-size:12.5px;white-space:nowrap}
  .solo-largo{display:none}
}
@media(max-width:340px){.top .wrap{gap:10px}.marchio b{font-size:14px}.nav .btn{padding:11px 14px}}

h1{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:clamp(30px,4.4vw,44px);line-height:1.14;letter-spacing:-.015em;text-wrap:balance}
h2{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:400;font-size:clamp(24px,3vw,30px);letter-spacing:.01em;line-height:1.25;text-wrap:balance}
p,li{text-wrap:pretty}
.pagina{padding:46px 0 70px}
.percorso{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--soft);margin-bottom:18px}
.percorso li+li::before{content:"›";margin-right:6px}
.percorso a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;text-decoration:none}
.intro{color:var(--soft);max-width:60ch;margin:14px 0 0;font-size:17px}

/* ---- le schede delle recensioni (le stesse regole stanno anche in index.html) ---- */
.rec-media{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:16px;color:var(--ink);margin-top:18px}
.rec-media:empty{display:none}
.rec-media .st{width:18px;height:18px;fill:var(--verde)}
.rec-media strong{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:20px}
.rec-media .sep{color:var(--soft)}
.rec-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
@media(max-width:900px){.rec-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.rec-griglia{grid-template-columns:1fr}}
.rec-griglia:empty{display:none}
.rec-scheda{background:#FFFDF6;border:1px solid var(--linea);border-radius:14px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px}
.rec-stelle{display:inline-flex;gap:2px}
.rec-stelle .st{width:18px;height:18px;fill:var(--verde)}
.rec-stelle .st.vuota{fill:var(--linea)}
.rec-testo{white-space:pre-line;font-size:16px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.rec-chi{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14.5px}
.rec-nome{font-weight:600;color:var(--ink)}
.rec-quando{color:var(--soft)}
.rec-risposta{border-left:3px solid var(--verde);padding:4px 0 4px 12px;font-size:15px;color:var(--soft);display:flex;flex-direction:column;gap:2px}
.rec-risposta b{color:var(--ink);font-weight:600}
.rec-fiducia{margin-top:26px;max-width:66ch;font-size:15px;color:var(--soft);border-top:1px solid var(--linea);padding-top:16px}
.rec-vuote{margin-top:30px;color:var(--soft);font-size:16px}
.rec-scrivi-alto{margin-top:22px}

/* ---- /recensioni: prima Google, poi il sito (25/09/2026) ---- */
.rec-invito-tit{margin-top:34px}
.rec-invito{margin-top:8px;color:var(--soft);max-width:60ch}
.rec-scrivi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:18px}
.rec-scrivi-sec{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px}
.g-sezione,.s-sezione{margin-top:44px;padding-top:26px;border-top:1px solid var(--linea)}
.g-sezione .rec-media,.s-sezione .rec-media{margin-top:10px}
.g-nota{margin-top:8px;font-size:15px;color:var(--soft);max-width:60ch}
.g-sezione .rec-griglia{margin-top:22px}
.g-fondo{margin-top:18px}
.g-fondo a{display:inline-flex;align-items:center;min-height:44px}
.g-ripiego{margin-top:10px;color:var(--soft);font-size:16px;max-width:60ch}
.g-chi{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14.5px}
.g-autore{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.g-autore:hover span{text-decoration:underline}
.g-foto{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--avorio2)}
.g-iniziale{display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--verde2)}
.g-link{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font-size:14.5px}

.pagina-fine{margin-top:46px;padding:28px 24px;border:1px solid var(--linea);border-radius:14px;background:#FBF8EF;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pagina-fine p{color:var(--soft);max-width:56ch}

/* ---- il modulo (/scrivi-recensione) ---- */
.sr{max-width:620px}
.sr-avviso{margin-top:24px;padding:14px 16px;border-radius:12px;background:#FBF8EF;border:1px solid var(--linea);border-left:4px solid var(--verde);font-size:15.5px;line-height:1.55}
.sr-avviso b{font-weight:600}
.sr-campo{border:0;padding:0;margin:26px 0 0;min-width:0}
.sr-etichetta{display:block;font-weight:600;font-size:16.5px;margin-bottom:8px;padding:0}
.sr-facolt{font-weight:400;color:var(--soft);font-size:14px}
.sr-aiuto{font-size:14.5px;color:var(--soft);margin-top:6px}
.sr-errore{font-size:15px;color:var(--errore);font-weight:600;margin-top:6px}
.sr input[type=text],.sr textarea,.sr select{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#FFFDF6;border:1px solid #A89F8A;border-radius:10px;padding:12px 14px;min-height:48px}
.sr textarea{min-height:150px;resize:vertical;line-height:1.55}
.sr select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.sr input:focus-visible,.sr textarea:focus-visible,.sr select:focus-visible{outline:3px solid var(--verde);outline-offset:1px;border-color:var(--verde)}
.ha-errore input[type=text],.ha-errore textarea,.ha-errore select{border-color:var(--errore)}
/* align-items:end: su telefono "Iniziale del cognome" va su due righe, e senza questo i due campi
   restavano sfalsati (visto nello scatto a 375 px il 25/09/2026) */
.sr-nome-riga{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:end}
.sr-nome-riga label{font-size:14.5px;color:var(--soft);display:block;margin-bottom:4px}
@media(max-width:420px){.sr-nome-riga{grid-template-columns:1fr 104px}}
.sr-anteprima-nome{font-size:14.5px;color:var(--soft);margin-top:8px}
.sr-anteprima-nome b{color:var(--ink)}
.sr-stelle{display:flex;gap:4px;margin-left:-6px}
.sr-stelle button{all:unset;box-sizing:border-box;width:52px;height:52px;display:grid;place-items:center;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sr-stelle button svg{width:38px;height:38px;fill:none;stroke:#8C8370;stroke-width:1.4;transition:fill .12s ease,stroke .12s ease,transform .18s cubic-bezier(.32,.72,0,1)}
.sr-stelle button.piena svg{fill:var(--verde);stroke:var(--verde)}
.sr-stelle button.premuto svg{transform:scale(.88)}
.sr-stelle button:focus-visible{outline:3px solid var(--verde);outline-offset:0}
.sr-voto-testo{font-size:14.5px;color:var(--soft);margin-top:2px}
.sr-consenso{display:flex;gap:12px;align-items:flex-start}
.sr-consenso input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--verde)}
.sr-consenso label{font-size:16px;cursor:pointer}
.sr-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.sr-errore-invio{margin-top:22px;padding:12px 14px;border-radius:10px;background:#FBEDE8;border:1px solid #E3B4A6;color:var(--errore);font-weight:600;font-size:15.5px}
.sr-invia{margin-top:26px;width:100%;min-height:52px;font-size:14.5px}
.sr-invia[disabled]{opacity:.7;cursor:wait}
.campo-trappola{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sr-grazie{max-width:620px;margin-top:10px}
.sr-grazie h2:focus{outline:none}
.sr-grazie>p{margin-top:10px;color:var(--soft);font-size:17px}
.sr-google{margin-top:26px;padding:22px 20px;border:1px solid var(--linea);border-radius:14px;background:#FFFDF6}
.sr-google h3{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:21px;line-height:1.3}
.sr-google p{margin-top:8px;color:var(--soft);font-size:15.5px}
.sr-google textarea{display:block;width:100%;margin-top:14px;min-height:110px;font:inherit;font-size:15.5px;line-height:1.55;color:var(--ink);background:var(--avorio);border:1px solid #A89F8A;border-radius:10px;padding:12px 14px;resize:vertical}
.sr-google .btn{margin-top:14px;width:100%;min-height:52px}
.sr-google-avviso{font-weight:600;color:var(--verde2) !important}
.sr-google-ritorno .btn{margin-top:8px}
.sr-torna{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;font-size:15.5px}
@media(max-width:640px){.pagina{padding:30px 0 56px}}

/* ---- informativa ---- */
.testo-lungo{max-width:68ch}
.testo-lungo h2{margin-top:34px;font-size:clamp(21px,2.4vw,25px)}
.testo-lungo p,.testo-lungo li{margin-top:10px;color:var(--ink)}
.testo-lungo ul{padding-left:22px}

/* ---- la pagina di approvazione (functions/recensioni/esito.js) ---- */
.esito{max-width:600px;margin:0 auto;padding:30px 22px 60px}
.esito-marchio{display:inline-flex;align-items:center;min-height:44px;font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:17px;letter-spacing:.04em;color:var(--ink);text-decoration:none;margin-bottom:18px}
.esito-titolo{font-size:clamp(28px,6vw,36px)}
.esito-testo{margin:10px 0 20px;color:var(--soft);font-size:16.5px}
.esito-scheda{margin-bottom:8px}
.esito-domanda{margin-top:22px;font-weight:600;font-size:17px}
.esito-azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.esito-azioni .btn,.esito-form .btn{min-height:50px}
.esito-form{margin:0}
.esito-nota{margin-top:14px;font-size:14.5px;color:var(--soft)}
@media(max-width:480px){.esito-azioni{flex-direction:column}.esito-azioni .btn,.esito-form,.esito-form .btn{width:100%}}

/* ---- fondo pagina ---- */
footer{background:var(--nero);color:#CDE0D8;padding:38px 0;font-size:14.5px}
.foot-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
footer a{color:#CDE0D8}
footer .vertebre{margin-bottom:14px}
.foot-link{display:flex;flex-direction:column;gap:7px}
.foot-tit{color:#F5F0E4;font-family:'Familjen Grotesk',system-ui,sans-serif;letter-spacing:.06em;font-size:13px;text-transform:uppercase;margin-bottom:3px;opacity:.85}
.foot-fondo{margin-top:30px;padding-top:18px;border-top:1px solid rgba(245,240,228,.16);font-size:13px;opacity:.75}
footer :focus-visible{outline-color:#F5F0E4}
@media(max-width:760px){.foot-link a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}.foot-link{gap:0}}
@media(max-width:640px){.foot-grid{gap:26px}.foot-fondo{margin-top:24px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}