/* ==========================================================
   Bar Gelateria Nazionale — componenti
   Marchio, meteo, tasti flottanti, recensioni, biglietto QR.
   Si carica dopo site.css e ne usa le stesse variabili.
   ========================================================== */

/* ========================= MARCHIO ========================= */

.marchio{ flex-direction:row; align-items:center; gap:.7rem; }
.marchio img{ height:50px; width:auto; max-width:130px; object-fit:contain; flex:none; }
.marchio .parole{ display:flex; flex-direction:column; gap:.12rem; line-height:1; }

.marchio-piede{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem; }
.marchio-piede img{ height:64px; width:auto; max-width:160px; object-fit:contain; }
.marchio-piede .parole-piede{ display:flex; flex-direction:column; gap:.3rem; line-height:1; }
.marchio-piede small{
  font-family:var(--font-sotto, var(--testo)); font-weight:var(--peso-sotto, 500); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--g-crema);
}
.marchio-piede b{
  font-family:var(--font-marchio, var(--titolo)); font-weight:var(--peso-marchio, 700); font-size:1.4rem; color:var(--panna);
}

/* ========================== METEO ==========================
   Sta sulla fotografia dell'apertura, allineato alla riga
   "Omignano Scalo": cosi non ruba altezza al titolo.
   Su telefono si riduce a icona e gradi. */

.meteo{
  position:absolute; z-index:3;
  top:calc(clamp(5rem,12vw,7rem) - .55rem);
  right:var(--gutter);
  background:rgba(28,14,6,.42);
  border:1px solid rgba(255,247,234,.26);
  backdrop-filter:blur(14px);
  border-radius:var(--r-g);
  padding:1rem 1.3rem 1.1rem;
  text-align:center; color:var(--panna);
  min-width:190px; max-width:230px;
  box-shadow:0 20px 40px -28px rgba(0,0,0,.8);
}
.meteo-luogo{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--g-crema); margin-bottom:.5rem;
}
.meteo-ora{ display:flex; align-items:center; justify-content:center; gap:.6rem; }
.meteo-ora svg{ width:36px; height:36px; flex:none; }
.meteo-gradi{ font-family:var(--titolo); font-weight:600; font-size:2.1rem; line-height:1; }
.meteo-frase{
  font-size:.86rem; line-height:1.4;
  color:color-mix(in srgb, var(--panna) 82%, transparent);
  margin-top:.5rem; text-wrap:balance;
}
.meteo-tramonto{
  margin-top:.7rem; padding-top:.6rem;
  border-top:1px solid rgba(255,247,234,.22);
  font-size:.78rem; color:color-mix(in srgb, var(--panna) 78%, transparent);
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.meteo-tramonto svg{ width:16px; height:16px; flex:none; }

@media (max-width:980px){
  .meteo{
    top:calc(clamp(5rem,12vw,7rem) - .35rem);
    min-width:0; max-width:none; width:auto;
    padding:.32rem .68rem .32rem .5rem;
    border-radius:999px;
    display:flex; align-items:center;
  }
  .meteo-luogo,
  .meteo-frase,
  .meteo-tramonto{ display:none; }
  .meteo-ora{ gap:.32rem; }
  .meteo-ora svg{ width:21px; height:21px; }
  .meteo-gradi{ font-size:1.05rem; }
}

/* ==================== TASTI FLOTTANTI ====================== */

.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform .25s, box-shadow .25s;
}
.wa-float svg{ width:33px; height:33px; fill:#fff; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 14px 32px rgba(37,211,102,.52); }
.wa-float .fumetto{
  position:absolute; right:74px; top:50%; transform:translateY(-50%);
  background:var(--cioccolato); color:var(--panna);
  font-size:.84rem; white-space:nowrap;
  padding:.5rem .95rem; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .2s;
  box-shadow:var(--ombra);
}
.wa-float:hover .fumetto{ opacity:1; }
@media (max-width:860px){
  .wa-float{ bottom:74px; right:14px; width:54px; height:54px; }
  .wa-float svg{ width:29px; height:29px; }
  .wa-float .fumetto{ display:none; }
}

.primula-float{
  position:fixed; left:0; top:58%; transform:translateY(-50%); z-index:75;
  background:color-mix(in srgb, var(--panna-2) 94%, transparent);
  backdrop-filter:blur(8px);
  padding:12px 14px; border-radius:0 var(--r) var(--r) 0;
  border:1px solid var(--bordo); border-left:none;
  box-shadow:4px 6px 20px -10px rgba(59,36,22,.45);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  text-decoration:none; transition:transform .3s;
}
.primula-float:hover{ transform:translateY(-50%) translateX(5px); }
.primula-float img{ width:62px; height:auto; }
.primula-float span{
  font-size:.58rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nocciola); line-height:1.3;
}
@media (max-width:1100px){ .primula-float{ display:none; } }

/* ======================= RECENSIONI ======================== */

.google-riepilogo{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r-g); padding:1.4rem 1.7rem;
  margin-bottom:1.8rem;
}
.google-riepilogo .voto-grande{
  font-family:var(--titolo); font-weight:600; font-size:3rem; line-height:1;
  color:var(--amarena);
}
.google-riepilogo .marca{
  display:flex; align-items:center; gap:.55rem; font-size:.92rem; color:var(--tenue);
}
.google-riepilogo .marca svg{ width:20px; height:20px; flex:none; }
.google-riepilogo .azioni{ margin-left:auto; }

.stelle{ color:#E8A317; letter-spacing:.1em; font-size:1.05rem; line-height:1; }
.stelle .vuota{ color:var(--bordo); }

.recensioni-lista{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(.9rem,2vw,1.4rem);
}
.recensione{
  background:var(--crema-2); border-radius:var(--r-g);
  padding:1.4rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.65rem;
}
.recensione-testa{ display:flex; align-items:center; gap:.75rem; }
.recensione-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--nocciola); color:var(--panna);
  font-family:var(--titolo); font-weight:600; font-size:1.1rem;
}
.recensione-chi b{ display:block; font-weight:600; line-height:1.25; }
.recensione-chi span{ font-size:.82rem; color:var(--tenue); }
.recensione p{ margin:0; line-height:1.6; }
.recensione .fonte{
  margin-top:auto; padding-top:.6rem; font-size:.76rem; color:var(--tenue);
  display:flex; align-items:center; gap:.4rem;
}
.recensione .fonte svg{ width:14px; height:14px; flex:none; }

.recensioni-stato{ padding:1.6rem 0; color:var(--tenue); font-size:.95rem; }

/* --- form "lascia una recensione" --- */

.form-recensione{
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r-g); padding:1.7rem 1.8rem 1.9rem;
  margin-top:2.2rem; max-width:660px;
}
.form-recensione h3{ font-size:1.5rem; margin-bottom:.5rem; }
.form-recensione > p{ color:var(--tenue); margin:0 0 1.4rem; }

.campo{ display:grid; gap:.4rem; margin-bottom:1.1rem; }
.campo label{ font-weight:500; font-size:.94rem; }
.campo input,.campo textarea{
  font-family:var(--testo); font-size:1rem;
  padding:.75rem .95rem; border:1px solid var(--bordo);
  border-radius:var(--r); background:var(--panna); color:inherit;
}
.campo input:focus,.campo textarea:focus{ border-color:var(--nocciola); outline:none; }
.campo textarea{ resize:vertical; min-height:112px; }

.voto-scelta{ display:flex; gap:.2rem; position:relative; }
.voto-scelta input{ position:absolute; opacity:0; width:1px; height:1px; }
.voto-scelta label{
  cursor:pointer; font-size:1.9rem; line-height:1;
  color:var(--bordo); transition:color .12s; padding:0 .06rem;
}
.voto-scelta label.accesa{ color:#E8A317; }
.voto-scelta input:focus-visible + label{ outline:3px solid var(--amarena); outline-offset:3px; }

.consenso{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:.88rem; color:var(--tenue); margin-bottom:1.2rem;
}
.consenso input{ margin-top:.3rem; flex:none; width:auto; }

.esito{
  margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--r);
  background:#EDF3E2; border:1px solid #CBDCA9; color:#3F571E; font-size:.94rem;
}
.esito.errore{ background:#FBE7EB; border-color:#EFC0C9; color:#8C1330; }

/* ==================== BIGLIETTO QR ========================= */

.qr-blocco{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:start;
  margin:2.4rem 0 3.5rem;
}
@media (max-width:760px){ .qr-blocco{ grid-template-columns:1fr; } }

.qr-card{
  background:var(--panna-2);
  border:2px solid var(--amarena);
  border-radius:var(--r-g);
  padding:1.7rem 1.9rem 1.5rem;
  text-align:center; width:308px; margin-inline:auto;
}
.qr-card img.qr-logo{ width:64px; height:64px; margin:0 auto .6rem; }
.qr-card .qr-titolo{
  font-family:var(--titolo); font-weight:600; font-size:1.3rem;
  margin-bottom:.9rem; line-height:1.15;
}
.qr-card .qr-codice{ display:inline-block; line-height:0; min-height:220px; }
.qr-card .qr-codice img,.qr-card .qr-codice canvas{ border-radius:6px; }
.qr-card .qr-invito{
  margin-top:.9rem; font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amarena);
}
.qr-card .qr-firma{
  margin-top:.35rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tenue);
}

.qr-spiega h3{ font-size:1.5rem; margin-bottom:.6rem; }
.qr-spiega p{ color:var(--tenue); margin:0 0 1rem; }
.qr-campo{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.qr-campo input{
  flex:1 1 240px; font-family:var(--testo); font-size:.95rem;
  padding:.7rem .9rem; border:1px solid var(--bordo);
  border-radius:var(--r); background:var(--panna-2); color:inherit;
}

@media print{
  .nav,.filtri,.wa-float,.primula-float,.barra-mobile,
  .qr-spiega,.menu-testa,.menu-sez,.allergeni,.azioni{ display:none !important; }
  body{ background:#fff; }
  .qr-blocco{ grid-template-columns:1fr; margin:0; }
  .qr-card{ margin:40px auto; }
  @page{ margin:16mm; }
}

/* =============== MENU: voci con immagine ================== */

/* La griglia della riga la definisce site.css (quattro colonne, con
   il filetto punteggiato). Qui restano solo le misure della miniatura. */
.riga .foto{
  width:78px; height:78px; border-radius:16px;
  background:var(--crema-2); border:1px solid var(--bordo);
  object-fit:cover;
}
@media (max-width:520px){
  .riga.con-foto{ grid-template-columns:60px minmax(0,1fr) auto; gap:.85rem; }
  .riga .foto{ width:60px; height:60px; border-radius:13px; }
}

/* Sfumatura a destra del nastro gusti: dice che si scorre */
.nastro-gusti{ position:relative; }
.nastro-gusti::after{
  content:""; position:sticky; float:right; top:0; right:0;
  width:56px; height:100%; margin-left:-56px; pointer-events:none;
  background:linear-gradient(to right, transparent, var(--crema-2));
}

/* Orari: il giorno non deve mai toccare l'orario */
.orari td:first-child{ padding-right:1.2rem; }
.orari td:last-child{ line-height:1.45; }

/* ========================== EVENTI ========================== */

.eventi{ display:grid; gap:.7rem; }
.evento{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.3rem;
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r-g); padding:1.2rem 1.5rem 1.3rem;
  align-items:start;
  transition:transform .18s, box-shadow .18s;
}
.evento:hover{ transform:translateX(4px); box-shadow:var(--ombra); }
.evento .data{
  background:var(--amarena); color:var(--panna);
  border-radius:var(--r); padding:.6rem .9rem .5rem;
  text-align:center; min-width:66px; line-height:1;
}
.evento .data b{ display:block; font-family:var(--titolo); font-size:1.7rem; font-weight:600; }
.evento .data span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }
.evento h3{ font-size:1.3rem; margin:.35rem 0 .3rem; }
.evento p{ margin:0; color:var(--tenue); }
.evento .ora{ margin-top:.5rem; font-size:.9rem; color:var(--nocciola); font-weight:500; }
.genere{
  display:inline-block; font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:999px;
}
.genere.musica  { background:#EFE0F2; color:#6B3D7A; }
.genere.sport   { background:#DFEAF6; color:#26557F; }
.genere.gusto   { background:#E9F0DC; color:#4E7024; }
.genere.stagione{ background:#F8E3C9; color:#8A5615; }

.evento-tuo{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.6rem;
  align-items:center; margin-top:1.6rem;
  background:var(--crema-2); border-radius:var(--r-g);
  padding:1.6rem 1.8rem 1.7rem;
}
.evento-tuo h3{ font-size:1.4rem; margin-bottom:.4rem; }
.evento-tuo p{ margin:0; color:var(--tenue); max-width:56ch; }
@media (max-width:760px){
  .evento{ grid-template-columns:1fr; gap:.8rem; }
  .evento .data{ justify-self:start; display:flex; gap:.5rem; align-items:baseline; }
  .evento-tuo{ grid-template-columns:1fr; }
}

/* ------------------------ bandierine ------------------------ */

.filtro.lingua{ display:inline-flex; align-items:center; gap:.5rem; }
.bandiera{
  width:21px; height:15px; border-radius:2px; flex:none;
  box-shadow:0 0 0 1px rgba(59,36,22,.18);
}

/* --------------- switch di lingua nella barra in alto --------------- */

.lingua-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--testo); font-size:.86rem; font-weight:500;
  padding:.35rem .8rem; border-radius:999px;
  border:1.5px solid var(--bordo); background:var(--panna-2); color:inherit;
  cursor:pointer; white-space:nowrap;
  transition:border-color .16s, background .16s;
}
.lingua-btn:hover{ border-color:var(--nocciola); background:var(--crema-2); }

/* ==================== MENU A PANINO ========================
   Tre barre che si assottigliano: e' la sagoma di un cono.
   Chiusa e aperta sono due SVG distinte che si scambiano, cosi
   non c'e' nessuna rotazione da azzeccare a mano. */

.burger{
  display:none;
  margin-left:auto;
  width:46px; height:46px; padding:0;
  border:1.5px solid var(--bordo); border-radius:14px;
  background:var(--panna-2); cursor:pointer;
  place-items:center;
  transition:border-color .18s, background .18s, transform .18s;
}
.burger:hover{ border-color:var(--nocciola); }
.burger:active{ transform:scale(.94); }
.burger svg{ width:24px; height:24px; grid-area:1/1; fill:var(--cioccolato); }
.burger .b-aperto{ display:none; fill:var(--amarena); }

.burger[aria-expanded="true"]{ border-color:var(--amarena); background:var(--crema-2); }
.burger[aria-expanded="true"] .b-chiuso{ display:none; }
.burger[aria-expanded="true"] .b-aperto{ display:block; }

@media (max-width:1024px){
  .burger{ display:grid; }

  /* la stessa lista dei link diventa il pannello: un solo punto da aggiornare */
  .nav-link{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    margin-left:0;
    background:var(--panna-2);
    border-bottom:1px solid var(--bordo);
    padding:.4rem var(--gutter) 1rem;
    box-shadow:0 20px 34px -24px rgba(59,36,22,.55);
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav-link.aperto{ display:flex; }
  /* col pannello aperto la barra va sempre piena, vedi site.js */
  .nav-link a{
    padding:.95rem .2rem; font-size:1.05rem;
    border-bottom:1px solid var(--bordo);
  }
  .nav-link a:hover{ border-bottom-color:var(--amarena); }
  .lingua-btn{ align-self:flex-start; margin-top:1rem; }
}

/* ==================== QUANTO SEI LONTANO =================== */

.distanza{ margin-top:.9rem; }
.btn-distanza{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--testo); font-size:.92rem; font-weight:500;
  padding:.55rem 1.1rem; border-radius:999px;
  background:transparent; color:var(--panna);
  border:1px solid rgba(255,247,234,.4);
  cursor:pointer;
  transition:background .16s, border-color .16s;
}
.btn-distanza:hover{ background:rgba(255,247,234,.16); border-color:rgba(255,247,234,.7); }
.btn-distanza svg{ width:17px; height:17px; flex:none; }
.btn-distanza[disabled]{ opacity:.65; cursor:progress; }

.distanza-esito{
  display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.55rem .5rem .55rem 1.1rem;
  border-radius:999px;
  background:rgba(255,247,234,.14);
  border:1px solid rgba(255,247,234,.32);
  backdrop-filter:blur(8px);
  color:var(--panna); font-size:.94rem;
}
.distanza-esito b{ font-weight:600; }
.distanza-esito a{
  background:var(--amarena); color:var(--panna);
  padding:.4rem 1rem; border-radius:999px;
  text-decoration:none; font-size:.88rem; font-weight:500;
  transition:filter .16s;
}
.distanza-esito a:hover{ filter:brightness(1.12); }
.distanza-errore{
  font-size:.9rem; color:color-mix(in srgb, var(--panna) 78%, transparent);
}

/* --------- form recensione affiancato a una fotografia --------- */

.lascia{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);
  gap:clamp(1rem,2.4vw,1.6rem);
  align-items:stretch; margin-top:2.2rem;
}
.lascia .form-recensione{ margin-top:0; max-width:none; }

.lascia-foto{
  position:relative; margin:0;
  border-radius:var(--r-g); overflow:hidden;
  border:1px solid var(--bordo);
  min-height:260px;
}
.lascia-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.lascia-foto figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:2.4rem 1.5rem 1.4rem;
  background:linear-gradient(180deg, transparent, rgba(28,14,6,.88));
  color:var(--panna);
  font-family:var(--titolo); font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.25;
}
@media (max-width:900px){
  .lascia{ grid-template-columns:1fr; }
  .lascia-foto{ min-height:200px; order:-1; }
}

/* ==================== COMPONI LA TUA TORTA =====================
   Quattro passi a sinistra, l'anteprima disegnata a destra.
   La torta si colora con i gusti scelti: e' il pezzo da far
   toccare al cliente durante la presentazione. */

.fascia-torta{ background:var(--crema-2); }

.torta-griglia{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:start;
}

.torta-passi{ display:grid; gap:1rem; }

.passo{
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r); padding:1.25rem 1.4rem 1.35rem;
}
.passo-titolo{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--testo); font-weight:600; font-size:1.05rem;
  letter-spacing:0; margin-bottom:.95rem;
}
.passo-n{
  flex:none; display:inline-grid; place-items:center;
  width:1.55rem; height:1.55rem; border-radius:50%;
  background:var(--amarena); color:var(--panna);
  font-size:.85rem; font-weight:600;
  transform:translateY(.2rem);
}
.passo-nota{ margin-left:auto; font-weight:400; font-size:.85rem; color:var(--tenue); }
.passo-aiuto{ font-size:.85rem; color:var(--tenue); }

/* --- passo 1: le misure --- */

.misure{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.misura{
  position:relative; cursor:pointer; text-align:center;
  border:2px solid var(--bordo); border-radius:var(--r);
  background:var(--panna); padding:.8rem .4rem .85rem;
  display:grid; gap:.1rem; line-height:1.3;
  transition:border-color .15s, background .15s, transform .15s;
}
.misura:hover{ transform:translateY(-2px); }
.misura input{ position:absolute; opacity:0; width:1px; height:1px; }
.misura b{ font-weight:600; }
.misura span{ font-size:.82rem; color:var(--tenue); }
.misura i{ font-style:normal; font-weight:600; font-size:.95rem; color:var(--amarena); }
.misura:has(input:checked),
.misura.scelta{
  border-color:var(--amarena); background:#FFF;
  box-shadow:0 10px 24px -16px rgba(184,18,56,.45);
}
.misura input:focus-visible ~ b{ outline:3px solid var(--amarena); outline-offset:10px; border-radius:4px; }

/* --- passo 2: i gusti --- */

.gusti-scelta{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip-gusto{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--testo); font-size:.95rem; cursor:pointer;
  border:2px solid var(--bordo); border-radius:999px;
  background:var(--panna); color:inherit;
  padding:.45rem 1rem .45rem .6rem;
  transition:border-color .15s, background .15s, opacity .15s, transform .15s;
}
.chip-gusto .punto{
  width:1.05rem; height:1.05rem; border-radius:50%; flex:none;
  border:1px solid rgba(59,36,22,.18);
}
.chip-gusto:hover{ transform:translateY(-1px); }
.chip-gusto.scelto{ border-color:var(--amarena); background:#FFF; font-weight:600; }
.chip-gusto.spento{ opacity:.4; cursor:not-allowed; }

/* --- passo 4: il ritiro --- */

.ritiro-riga{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.ritiro-riga .campo{ margin:0; min-width:0; }
/* dentro la griglia gli input non devono imporre la loro larghezza intrinseca */
.ritiro-riga .campo input,
.ritiro-riga .campo select{ width:100%; min-width:0; }
.campo select{
  font-family:var(--testo); font-size:1rem;
  padding:.75rem .95rem; border:1px solid var(--bordo);
  border-radius:var(--r); background:var(--panna); color:inherit;
}
.campo select:focus{ border-color:var(--nocciola); outline:none; }

/* --- l'anteprima --- */

.torta-anteprima{
  position:sticky; top:86px;
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r-g); box-shadow:var(--ombra);
  padding:1.5rem 1.6rem 1.6rem;
  display:grid; gap:.9rem; justify-items:center; text-align:center;
}
.torta-disegno{ width:min(300px,88%); }
.torta-disegno svg{ width:100%; height:auto; display:block; }

.torta-riepilogo{ width:100%; }
.torta-riepilogo ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.3rem; text-align:left; font-size:.94rem;
}
.torta-riepilogo li{ display:flex; gap:.7rem; align-items:baseline; }
.torta-riepilogo li b{
  flex:none; width:4.2rem; font-weight:600; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tenue);
}
.torta-riepilogo li span{ min-width:0; }

.torta-prezzo{
  margin:0; display:grid; gap:.1rem; justify-items:center; line-height:1.2;
}
.torta-prezzo span{ font-family:var(--titolo); font-weight:600; font-size:2.1rem; }
.torta-prezzo small{ font-size:.8rem; color:var(--tenue); }

.torta-anteprima .btn{ width:100%; justify-content:center; }
.torta-anteprima .esito{ margin-top:0; width:100%; text-align:left; }
.torta-nota{ margin:0; font-size:.82rem; color:var(--tenue); max-width:30ch; }

@media (max-width:960px){
  .torta-griglia{ grid-template-columns:1fr; }
  .torta-anteprima{ position:static; }
  .misure{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ritiro-riga{ grid-template-columns:1fr; }
}

/* ==================== LA TESSERA FEDELTA ====================
   Pagina tessera.html: la carta scura con i punti, la raccolta
   del caffe e le regole. La carta e' il pezzo da demo. */

.tessera-vetrina{ background:var(--crema-2); }
.tessera-griglia{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.5vw,3.4rem); align-items:center;
}
.tessera-prova-nota{ font-size:.9rem; color:var(--tenue); margin:0 0 .7rem; }
.tessera-prova .btn{ font-size:.92rem; padding:.7rem 1.3rem; }
.tessera-premio{ margin-top:1.2rem; display:grid; gap:.7rem; justify-items:start; }

/* --- la carta --- */

.carta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #462B18 0%, #2C1A0D 62%, #3B2416 100%);
  color:var(--panna);
  border-radius:22px;
  padding:1.35rem 1.5rem 1.25rem;
  box-shadow:0 30px 60px -28px rgba(44,26,13,.65);
  display:grid; gap:1rem;
}
.carta::after{                 /* riflesso morbido, come una carta vera */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,247,234,.09) 50%, transparent 58%);
  pointer-events:none;
}
.carta.battito{ animation:carta-battito .45s ease; }
@keyframes carta-battito{
  0%{ transform:scale(1); } 35%{ transform:scale(1.025); } 100%{ transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){ .carta.battito{ animation:none; } }

.carta-testa{ display:flex; align-items:center; gap:.75rem; }
.carta-testa img{ width:44px; height:44px; flex:none; border-radius:10px; }
.carta-insegna{ line-height:1.25; font-size:.92rem; }
.carta-insegna b{ font-family:var(--titolo); }
.carta-insegna small{
  display:block; font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g-crema);
}
.carta-qr{
  margin-left:auto; flex:none;
  width:56px; height:56px; padding:5px;
  background:var(--panna); border-radius:9px;
}
.carta-chi b{ display:block; font-family:var(--titolo); font-size:1.45rem; }
.carta-chi span{ font-size:.82rem; color:#CDB79E; }

.carta-cifra{ display:flex; align-items:baseline; gap:.5rem; }
.carta-cifra b{ font-family:var(--titolo); font-size:2.6rem; line-height:1; }
.carta-cifra span{ font-size:.9rem; color:#CDB79E; }
.carta-barra{
  height:9px; border-radius:999px; margin:.55rem 0 .4rem;
  background:rgba(255,247,234,.16); overflow:hidden;
}
.carta-barra i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--amarena), #E8A317);
  border-radius:999px; transition:width .45s ease;
}
.carta-punti small{ font-size:.82rem; color:#CDB79E; }
.carta-piede{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem;
  font-size:.8rem; color:var(--g-crema);
  border-top:1px solid rgba(255,247,234,.14); padding-top:.8rem;
}

/* --- la raccolta del caffe --- */

.timbri-blocco{
  margin-top:1rem;
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r); padding:1rem 1.2rem 1.1rem;
}
.timbri-testa{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; }
.timbri-testa b{ font-weight:600; }
.timbri-testa span{ margin-left:auto; font-size:.85rem; color:var(--tenue); }
.timbri{ display:flex; flex-wrap:wrap; gap:.4rem; }
.timbro{
  width:2rem; height:2rem; border-radius:50%;
  display:inline-grid; place-items:center; font-size:.95rem;
  border:2px dashed var(--bordo); background:var(--panna);
}
.timbro.pieno{ border-style:solid; border-color:var(--nocciola); background:var(--crema-2); }
.timbri-nota{ margin:.6rem 0 0; font-size:.85rem; color:var(--tenue); }
.timbri-nota b{ color:var(--cioccolato); }

/* --- come funziona: tre passi affiancati --- */

.tre-passi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.tre-passi .passo p{ margin:0; font-size:.95rem; color:var(--tenue); line-height:1.6; }

/* --- i tre modi --- */

.modi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.modo{
  background:var(--panna); border:1px solid var(--bordo);
  border-radius:var(--r-g); padding:1.4rem 1.5rem 1.5rem;
}
.modo-icona{
  display:inline-grid; place-items:center;
  width:2.7rem; height:2.7rem; border-radius:12px;
  background:var(--crema-2); color:var(--amarena); margin-bottom:.8rem;
}
.modo-icona svg{ width:1.5rem; height:1.5rem; }
.modo b{ display:block; font-family:var(--titolo); font-size:1.15rem; margin-bottom:.35rem; }
.modo p{ margin:0; font-size:.93rem; color:var(--tenue); line-height:1.6; }

/* --- le regole --- */

.regole{ display:grid; gap:.6rem; max-width:640px; }
.regola{
  display:grid; gap:.15rem;
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r); padding:.9rem 1.2rem;
}
.regola b{ font-weight:600; }
.regola span{ font-size:.9rem; color:var(--tenue); }

/* --- iscrizione e privacy --- */

.privacy-riga{
  max-width:660px; margin-top:1.4rem;
  font-size:.9rem; color:var(--tenue); line-height:1.65;
}
.privacy-riga b{ color:var(--cioccolato); }

@media (max-width:900px){
  .tessera-griglia{ grid-template-columns:1fr; }
  .tre-passi,.modi{ grid-template-columns:1fr; }
}

/* l'attributo hidden deve vincere anche su chi ha un display suo
   (es. .tessera-premio in grid, .meteo in flex su telefono) */
[hidden]{ display:none !important; }