/* Rosàflor Club — stile «Serra»: fotografico, verde bosco, crema, titoli grandi. */
:root{
  --bosco:#1b4332; --foglia:#355e3b; --germoglio:#9bbf6a; --sole:#d9a441;
  --crema:#f4f3ec; --carta:#ffffff; --inchiostro:#17301f; --grigio:#5f6b63; --riga:#dfe3d9;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --testo:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--crema);color:var(--inchiostro);font-family:var(--testo);font-size:16px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
body.compatta{background:transparent;min-height:0;display:block}
a{color:var(--bosco)}
h1,h2,h3{font-family:var(--display);line-height:1.05;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,6vw,46px);font-weight:800}
h2{font-size:clamp(22px,4vw,30px);font-weight:700}
h3{font-size:18px;font-weight:700}
p{margin:10px 0}
.testata{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--crema);border-bottom:1px solid var(--riga);position:sticky;top:0;z-index:5}
.marchio{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:19px;color:var(--bosco);white-space:nowrap}
.marchio em{font-style:normal;color:var(--foglia);font-weight:500}
.menu{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.menu a{text-decoration:none;color:var(--inchiostro);font-weight:600;font-size:14px;padding:7px 11px;border-radius:999px;white-space:nowrap}
.menu a.attiva{background:var(--bosco);color:#fff}
.chi{text-decoration:none;font-weight:700;font-size:14px;color:var(--bosco);border:1.5px solid var(--bosco);border-radius:999px;padding:6px 12px;white-space:nowrap}
.pagina{flex:1;width:100%;max-width:980px;margin:0 auto;padding:20px 18px 48px}
.piede{border-top:1px solid var(--riga);padding:18px;font-size:13px;color:var(--grigio);text-align:center}
.piede p{margin:4px 0}

/* apertura fotografica */
.apertura{position:relative;border-radius:18px;overflow:hidden;color:#fff;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:radial-gradient(120% 90% at 20% 20%,#9bbf6a 0,transparent 55%),radial-gradient(80% 70% at 85% 60%,#d9a441 0,transparent 50%),linear-gradient(160deg,#355e3b,#17301f)}
.apertura img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.apertura::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(10,30,18,.78));z-index:1}
.apertura>*{position:relative;z-index:2}
.apertura .etichetta{display:inline-block;background:var(--crema);color:var(--bosco);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:12px;align-self:flex-start}
.apertura p{font-size:17px;max-width:48ch;margin:8px 0 0}

/* griglie e card */
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.card{background:var(--carta);border:1px solid var(--riga);border-radius:14px;padding:16px 18px;text-decoration:none;color:inherit;display:block;min-width:0}
.card h3{margin-bottom:4px}
.card p{margin:0;color:var(--grigio);font-size:14.5px}
.card.verde{background:var(--bosco);color:#fff;border-color:var(--bosco)}
.card.verde p{color:#dfe8dc}
a.card:hover{border-color:var(--foglia)}

/* la tessera */
.tessera{background:var(--bosco);color:var(--crema);border-radius:18px;padding:22px 24px;margin-top:18px;position:relative;overflow:hidden}
.tessera .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.tessera .punti{font-family:var(--display);font-size:clamp(44px,10vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1;margin:6px 0;font-variant-numeric:tabular-nums}
.tessera .punti small{font-size:18px;font-weight:600;letter-spacing:0}
.tessera .nota{font-size:13.5px;opacity:.85}
.tessera .barre{margin-top:16px;background:#fff;border-radius:8px;padding:10px 12px 6px;text-align:center}
.tessera .barre svg{max-width:100%;height:60px}
.tessera .barre span{display:block;color:#111;font-size:12px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.traguardo{margin-top:14px;background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:14px}
.traguardo .barra{height:8px;background:rgba(255,255,255,.2);border-radius:4px;margin-top:8px;overflow:hidden}
.traguardo .barra i{display:block;height:100%;background:var(--germoglio);border-radius:4px}

/* moduli */
form.modulo{display:grid;gap:12px;max-width:420px;margin-top:16px}
label{font-weight:600;font-size:14px}
input[type=text],input[type=email],input[type=tel]{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--riga);border-radius:10px;background:#fff;color:inherit}
input:focus{outline:2px solid var(--germoglio);outline-offset:1px;border-color:var(--foglia)}
.bottone,button.bottone{display:inline-block;background:var(--bosco);color:#fff;font:inherit;font-weight:700;border:0;border-radius:999px;padding:12px 22px;text-decoration:none;cursor:pointer}
.bottone.chiaro{background:var(--crema);color:var(--bosco);border:1.5px solid var(--bosco)}
.bottone.wa{background:#25D366;color:#073b1a}
.scelta{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px}
.scelta input{margin-top:4px}
.nota{color:var(--grigio);font-size:13.5px}
.esito{max-width:60ch;margin:24px auto}
.esito h1{margin-bottom:10px}
.avviso{background:#fbf1d6;border-left:3px solid var(--sole);padding:10px 14px;border-radius:0 8px 8px 0;margin:14px 0}
.errore{background:#f8e4e2;border-left:3px solid #a8443f;padding:10px 14px;border-radius:0 8px 8px 0;margin:14px 0}

/* consensi */
.consensi{display:grid;gap:10px;max-width:520px;margin-top:16px}
.consenso{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--riga);border-radius:12px;padding:12px 16px}
.consenso b{display:block}
.consenso small{color:var(--grigio)}
.interruttore{position:relative;width:46px;height:26px;flex:none}
.interruttore input{opacity:0;width:0;height:0}
.interruttore i{position:absolute;inset:0;background:#cfd6cd;border-radius:13px;transition:.2s}
.interruttore i::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.interruttore input:checked+i{background:var(--foglia)}
.interruttore input:checked+i::before{transform:translateX(20px)}

/* archivio newsletter */
.elenco{display:grid;gap:10px;margin-top:16px}
.elenco a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:#fff;border:1px solid var(--riga);border-radius:12px;padding:12px 16px;text-decoration:none;color:inherit}
.elenco a span{color:var(--grigio);font-size:13px;white-space:nowrap}
.lettura{background:#fff;border:1px solid var(--riga);border-radius:14px;overflow:hidden;margin-top:16px}
.lettura iframe{width:100%;border:0;min-height:80vh;display:block}

/* il modulo compatto per l'iframe su rosaflor.it */
main.compatta{padding:4px;font-family:var(--testo)}
main.compatta form.modulo{margin-top:0}
main.compatta .bottone{background:#e6792e}

@media (max-width:640px){
  .testata{padding:10px 14px;gap:10px}
  .menu{order:3;width:100%;margin-left:0}
  .testata{flex-wrap:wrap}
  .pagina{padding:16px 16px 40px}
  .apertura{padding:20px;min-height:240px}
}