/* =============================================================
   newsletter.css — la fascia nel piede e la finestra.
   Foglio a sé: serve anche alla home, che non carica comune.css.
   ============================================================= */
.fascia-lettera{
  border-top:1px solid rgba(244,239,230,.14);
  border-bottom:1px solid rgba(244,239,230,.14);
  padding-block:clamp(2rem,4vw,3rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
  display:grid; gap:clamp(1.4rem,3vw,3rem); align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:900px){ .fascia-lettera{ grid-template-columns:.9fr 1.1fr; } }
.fascia-lettera .etichetta{
  margin:0 0 .6rem; font-family:var(--f-dato,"Albert Sans",system-ui,sans-serif);
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:#C6A15B;
}
.fascia-lettera h3{
  margin:0; font-weight:400; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.12; letter-spacing:-.01em;
}
.fascia-lettera p.guida{ margin:.6rem 0 0; max-width:42ch; font-size:.92rem; line-height:1.5; color:#9A958C; }

/* il modulo: una riga sola su schermo largo */
.lettera{ display:grid; gap:.8rem; }
.lettera-campi{ display:grid; gap:.6rem; grid-template-columns:1fr; }
@media(min-width:620px){
  .lettera-piede .lettera-campi{ grid-template-columns:1fr 1.3fr auto; align-items:end; }
  .lettera-finestra-modulo .lettera-campi{ grid-template-columns:1fr 1.3fr; align-items:end; }
  .lettera-finestra-modulo button[type=submit]{ grid-column:1/-1; justify-self:start; }
}
.lettera-campi label{ display:grid; gap:.3rem; min-width:0; }
.lettera-campi label span{
  font-family:var(--f-dato,"Albert Sans",system-ui,sans-serif); font-size:.5rem;
  letter-spacing:.14em; text-transform:uppercase; color:#8F8A82;
}
.lettera input[type=text],.lettera input[type=email]{
  width:100%; padding:.8rem .9rem; background:rgba(244,239,230,.05);
  border:1px solid rgba(244,239,230,.2); border-radius:0; color:inherit;
  font:inherit; font-size:.95rem; transition:border-color .25s, background .25s;
}
.lettera input::placeholder{ color:#6E6A63; }
.lettera input:focus{ outline:none; border-color:#C6A15B; background:rgba(244,239,230,.09); }
.lettera button[type=submit]{
  padding:.85rem 1.4rem; cursor:pointer; white-space:nowrap;
  background:#C6A15B; border:1px solid #C6A15B; color:#0E0E10;
  font-family:var(--f-dato,"Albert Sans",system-ui,sans-serif); font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s, color .25s, opacity .25s;
}
.lettera button[type=submit]:hover:not(:disabled){ background:transparent; color:#C6A15B; }
.lettera button[type=submit]:disabled{ opacity:.45; cursor:default; }
.lettera-consenso{
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.76rem; line-height:1.45; color:#8F8A82;
}
.lettera-consenso input{ margin-top:.15rem; accent-color:#C6A15B; flex:none; }
.lettera-consenso a{ color:#C6A15B; }
.lettera-trappola{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.lettera-esito{ margin:0; font-size:.84rem; min-height:1.1em; }
.lettera-esito.bene{ color:#C6A15B; }
.lettera-esito.male{ color:#E08A6B; }

/* ---- la finestra ---- */
.lettera-finestra{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  padding:clamp(1rem,4vw,2rem); background:rgba(8,8,10,.78);
  overflow-y:auto;   /* se la scatola non ci sta, si scorre invece di sparire */
  opacity:0; transition:opacity .35s ease;
  backdrop-filter:blur(3px);
}
.lettera-finestra[hidden]{ display:none; }
.lettera-finestra.aperta{ opacity:1; }
.lettera-scatola{
  position:relative; width:min(40rem,100%); margin-block:auto; background:#0E0E10; color:#F4EFE6;
  padding:clamp(1.8rem,4.5vw,3rem);
  border:1px solid rgba(198,161,91,.4);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95);
  transform:translateY(16px) scale(.985);
  transition:transform .45s cubic-bezier(.16,.84,.24,1);
}
.lettera-finestra.aperta .lettera-scatola{ transform:none; }
/* un filo d'oro in alto, come sulle schede */
.lettera-scatola::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,#C6A15B,#A9ADB2);
}
.lettera-scatola .etichetta{
  margin:0; font-family:var(--f-dato,"Albert Sans",system-ui,sans-serif); font-size:.55rem;
  letter-spacing:.16em; text-transform:uppercase; color:#C6A15B;
}
.lettera-scatola h2{
  margin:.7rem 0 0; font-weight:400; font-size:clamp(1.7rem,3.6vw,2.6rem);
  line-height:1.08; letter-spacing:-.01em;
}
.lettera-guida{ margin:.8rem 0 1.6rem; color:#9A958C; font-size:.95rem; line-height:1.55; max-width:40ch; }
.lettera-chiudi{
  position:absolute; right:.7rem; top:.7rem; width:2.4rem; height:2.4rem;
  background:none; border:0; color:#F4EFE6; cursor:pointer; font-size:.95rem; opacity:.55;
  transition:opacity .2s, color .2s;
}
.lettera-chiudi:hover{ opacity:1; color:#C6A15B; }
.lettera-dopo{
  margin-top:1.1rem; padding:0; background:none; border:0; cursor:pointer; color:#8F8A82;
  font-family:var(--f-dato,"Albert Sans",system-ui,sans-serif); font-size:.5rem;
  letter-spacing:.14em; text-transform:uppercase; transition:color .2s;
}
.lettera-dopo:hover{ color:#F4EFE6; }
@media(max-width:600px){
  .lettera-finestra{ place-items:end center; padding:0; }
  .lettera-scatola{ width:100%; border-left:0; border-right:0; border-bottom:0; }
}
@media (prefers-reduced-motion: reduce){
  .lettera-finestra,.lettera-scatola{ transition:none; }
}