/* Il regalo. Tre passi, e a ogni passo si chiede UNA cosa sola.
   Ogni campo in più è gente che se ne va: si chiede il minimo, e si dice
   sempre a cosa serve. */

.pagina-regalo {
  min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) var(--gutter)
           calc(14px + env(safe-area-inset-bottom));
}
.testa-regalo { display: flex; align-items: center; gap: 15px; }
.tondo {
  flex: none; width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--carta-alta); border: 1px solid var(--riga);
  color: var(--verde); box-shadow: var(--ombra);
}
.tondo svg { width: 20px; height: 20px; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* i tre passi */
.passi { display: flex; gap: 7px; flex: 1; list-style: none; margin: 0; padding: 0; }
.passi li { flex: 1; font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-tenue); }
.passi li::before { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--riga); margin-bottom: 7px; transition: background .3s; }
.passi li[aria-current="step"] { color: var(--oro-scuro); font-weight: 600; }
.passi li[aria-current="step"]::before, .passi li.fatto::before { background: var(--oro); }

.scena-regalo {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 27rem; margin: 0 auto; padding: 1.5rem 0;
}
.scena-regalo h1 { font-size: clamp(27px, 7.4vw, 34px); font-weight: 800; line-height: 1.14; }
.scena-regalo .sotto { color: var(--verde-tenue); font-size: 17px; margin: 0 0 1.5rem; }

/* le porte d'ingresso */
.porte { display: grid; gap: 10px; }
.porta-b {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 17px; border-radius: var(--raggio-s);
  background: var(--carta-alta); border: 1px solid var(--riga); color: var(--verde);
  font-size: 17px; font-weight: 600; min-height: var(--dito); box-shadow: var(--ombra);
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.porta-b:active { transform: scale(.985); }
@media (hover: hover) { .porta-b:hover { border-color: var(--oro); box-shadow: var(--ombra-alta); } }
.porta-b .segno-porta {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sabbia);
}
.porta-b svg { width: 19px; height: 19px; fill: none; stroke: var(--oro-scuro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.porta-b .freccia { margin-left: auto; color: var(--verde-tenue); }

/* i campi */
.campo { display: block; margin-bottom: 15px; }
.campo span { display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-scuro); margin-bottom: 7px; }
.campo input {
  width: 100%; padding: 13px 15px; border-radius: var(--raggio-s);
  background: var(--carta-alta); border: 1px solid var(--riga); color: var(--verde);
  font: inherit; font-size: 16px; min-height: var(--dito); -webkit-appearance: none;
}
.campo input:focus { outline: none; border-color: var(--oro); }
.perche { font-size: var(--t-desc); color: var(--verde-tenue); margin-top: 6px; }

.spunta { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-desc); color: var(--verde-tenue); margin: 18px 0; line-height: 1.55; }
.spunta input { width: 20px; height: 20px; flex: none; accent-color: var(--oro-scuro); margin-top: 1px; }

.grosso {
  width: 100%; padding: 15px; border-radius: 999px; border: 0; margin-top: 6px;
  background: var(--verde); color: var(--oro-chiaro);
  font-weight: 700; font-size: 17px; letter-spacing: .01em; min-height: var(--dito); box-shadow: var(--ombra);
}
.grosso[disabled] { opacity: .45; }
.piano { width: 100%; background: none; border: 0; color: var(--verde-tenue); font-size: .86rem; margin-top: 13px; text-decoration: underline; text-underline-offset: 5px; }

/* il codice a sei cifre */
.cifre { display: flex; gap: 8px; justify-content: space-between; margin: 1.3rem 0; }
.cifre input {
  width: 100%; aspect-ratio: 3 / 4; text-align: center; font-size: 26px; font-weight: 800;
  border-radius: var(--raggio-s); background: var(--carta-alta); border: 1px solid var(--riga);
  color: var(--verde); -webkit-appearance: none;
}
.cifre input:focus { outline: none; border-color: var(--oro); }
.sbagliato { color: #A33B3B; font-size: .87rem; text-align: center; }

/* ── la tessera del regalo ──
   È il momento che la gente fotografa: dev'essere bello. Scura sulla carta
   chiara, così stacca e sembra una tessera vera. */
.tessera {
  position: relative; overflow: hidden; border-radius: var(--raggio);
  padding: 28px 22px; text-align: center;
  background: linear-gradient(145deg, var(--verde-medio) 0%, var(--verde) 68%);
  color: #EFEAD9; box-shadow: var(--ombra-alta);
  animation: arriva .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes arriva { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.tessera::after {
  content: ""; position: absolute; inset: 9px; border: 1px solid rgba(224,206,133,.36); border-radius: 11px; pointer-events: none;
}
.tessera .marchio-t { width: 56px; margin: 0 auto 12px; display: block; }
.tessera h2 { color: var(--oro-chiaro); font-size: clamp(24px, 6.6vw, 30px); font-weight: 800; margin-bottom: 7px; }
.tessera .dettaglio { font-size: var(--t-desc); color: #D9D3BE; }
.codice {
  margin: 20px auto 9px; padding: 13px 16px; border-radius: 10px;
  background: rgba(247,244,234,.94); color: var(--verde);
  font-size: 30px; font-weight: 800; letter-spacing: .2em;
}
.scadenza { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-chiaro); }

/* Il gratta-e-vinci: un velo d'oro sopra il premio, che si consuma al dito.
   Il testo sotto e' gia' nel DOM (chi legge con la voce lo sente lo stesso),
   quindi il gioco e' un di piu' visivo, non un ostacolo a leggere il premio. */
.premio-riquadro { position: relative; border-radius: 10px; }
.gratta { position: absolute; inset: 0; touch-action: none; cursor: pointer; border-radius: inherit; }
.rivela-subito {
  display: block; margin: 14px auto 0; padding: 6px; background: none; border: 0;
  color: var(--oro-chiaro); font-size: .78rem; text-decoration: underline; text-underline-offset: 4px;
  min-height: auto; opacity: .85;
}
.rivela-subito.nascondi { display: none; }

.avviso-prova {
  text-align: center; font-size: .75rem; line-height: 1.55; color: var(--verde-tenue);
  max-width: 27rem; margin: 0 auto; padding-top: 12px;
}
.avviso-prova a { color: var(--verde-tenue); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-desc); padding: 6px 2px; }

/* La casella dell'informativa: obbligatoria, con i due link dentro la frase. */
.spunta a { color: var(--verde); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.spunta-obbligo { color: var(--verde); margin-bottom: 6px; }

/* Il blocco del consenso (capo, 25/09): informazioni di base in piccolo (il «legalese» che si trova ovunque, ma
   sempre visibile, non dietro un tocco) e le due caselle. Piccolo non vuol dire grigio chiaro: stesso verde del testo
   secondario, gia' misurato sopra la soglia sulla carta. */
.consensi { margin: 4px 0 16px; padding: 12px 14px 4px; border-radius: var(--raggio-s); background: var(--sabbia); border: 1px solid var(--riga); }
.info-base { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--verde-tenue); }
.info-base-titolo { margin: 0 0 4px; font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-scuro); }
.info-base dl { margin: 0; }
.info-base dl > div { margin: 0 0 3px; }
.info-base dt { display: inline; font-weight: 700; color: var(--verde); }
.info-base dt:not(:empty)::after { content: ": "; }
.info-base dd { display: inline; margin: 0; }
.info-base a { color: var(--verde); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consensi .spunta { margin: 12px 0; }

/* ── la festa del premio ────────────────────────────────────────────────────
   Il premio scoppia in scena, coriandoli sopra. Con «riduci animazioni» appare
   e basta (la festa non parte, lato JS). */
.premio-contenuto { transition: opacity .4s ease; }
.premio-contenuto.vinto { animation: premio-vinto .6s cubic-bezier(.2,1.25,.35,1) both; }
@keyframes premio-vinto {
  0%   { transform: scale(.55); opacity: 0; }
  55%  { transform: scale(1.07); opacity: 1; }
  100% { transform: scale(1); }
}
.coriandoli { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  .premio-contenuto.vinto { animation: none; }
}

/* Il logo della porta: si preferisce il marchio ufficiale (immagini/marchi/),
   e se non c'è si mostra l'icona di ripiego. Noi non disegniamo i marchi
   registrati: si mettono i file ufficiali e appaiono. */
.segno-porta .marchio-img { width: 24px; height: 24px; object-fit: contain; }
.segno-porta .marchio-ripiego { display: none; }

/* ── il regalo che si conferma (25/09) ─────────────────────────────────────── */

.obbligo { color: var(--natale); font-weight: 800; }
.nota-contatto { font-size: var(--t-desc); color: var(--verde-tenue); line-height: 1.5; margin: -4px 0 14px; }
.errore {
  margin: 0 0 14px; padding: 11px 14px; border-radius: var(--raggio-s);
  background: #FBEDEE; border: 1px solid rgba(168,19,43,.35); color: var(--natale-scuro);
  font-size: var(--t-desc); line-height: 1.45;
}
.errore[hidden] { display: none; }

/* le tre porte: conferma con un tocco */
.porte-conferma { display: grid; gap: 10px; margin: 6px 0 18px; }
.titoletto { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-scuro); margin: 0; }
.porta-c {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  min-height: 54px; padding: 12px 18px; border-radius: 999px; text-decoration: none;
  font-size: 17px; font-weight: 700; border: 1px solid var(--riga);
  background: var(--carta-alta); color: var(--verde); box-shadow: var(--ombra);
  transition: transform .15s, opacity .2s, filter .2s;
}
.porta-c:active { transform: scale(.985); }
.porta-c .segno-porta { width: 26px; height: 26px; display: grid; place-items: center; }
.porta-c svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.porta-whatsapp { background: #25D366; border-color: #1DA851; color: #08301A; }
.porta-email { background: var(--verde); border-color: var(--verde); color: var(--oro-chiaro); }
.porta-c.spenta { opacity: .42; filter: grayscale(.6); box-shadow: none; }
.porta-c.in-corso { opacity: .7; pointer-events: none; }
.aiuto { min-height: 1.4em; margin: 0; text-align: center; font-size: var(--t-desc); color: var(--verde-tenue); }

/* in attesa della conferma */
.attesa { text-align: center; }
.attesa .sotto { margin-bottom: 1.2rem; overflow-wrap: anywhere; }   /* un indirizzo lungo va a capo */
.busta { font-size: 54px; line-height: 1; margin-bottom: 14px; animation: ondeggia 2.4s ease-in-out infinite; }
@keyframes ondeggia { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.porta-whatsapp-grande { display: block; text-decoration: none; background: #25D366; color: #08301A; }
.codice-wa { margin: 16px 0 0; font-size: var(--t-desc); color: var(--verde-tenue); }
.codice-wa strong { font-size: 20px; letter-spacing: .18em; color: var(--verde); }

/* confermato */
.confermato {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px;
  font-size: var(--t-desc); font-weight: 600; color: var(--verde);
}
.spunta-ok {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde); color: var(--oro-chiaro); font-size: 14px; font-weight: 800;
}
.confermato .dato { color: var(--verde-tenue); font-weight: 500; word-break: break-all; }

/* il termometro: un termometro vero, bulbo e tubo. Sale mentre scrivi. Il consenso
   alle novita' non lo fa salire: un consenso che fa crescere il regalo non e' libero. */
.termometro-scheda {
  padding: 16px 16px 14px; margin: 0 0 20px; border-radius: var(--raggio);
  background: var(--carta-alta); border: 1px solid var(--riga); box-shadow: var(--ombra);
}
.termometro-riga { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.termometro-riga span { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-scuro); }
.termometro-riga strong { font-size: 22px; font-weight: 800; color: var(--natale-scuro); }
.termometro { display: flex; align-items: center; }
.bulbo {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-right: -6px; z-index: 1;
  background: radial-gradient(circle at 35% 35%, var(--natale-alto), var(--natale-scuro));
  box-shadow: 0 0 0 3px var(--carta-alta), 0 0 0 4px var(--riga);
}
.tubo {
  position: relative; flex: 1; height: 14px; border-radius: 0 999px 999px 0; overflow: hidden;
  background: var(--sabbia); box-shadow: inset 0 1px 2px rgba(20,54,42,.12);
}
.mercurio {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--natale-scuro), var(--natale-alto) 55%, #D9BE63);
  transition: width .45s cubic-bezier(.2,.9,.3,1);
}
.termometro-nota { margin: 10px 0 0; font-size: var(--t-desc); line-height: 1.45; color: var(--verde-tenue); }
.termometro-scheda.pieno { border-color: var(--oro); }
.termometro-scheda.pieno .termometro-nota { color: var(--natale-scuro); font-weight: 700; }

/* APRI IL TUO REGALO: rosso come il pacco della prima schermata, bordo d'oro */
.apri-regalo {
  position: relative; overflow: hidden; width: 100%; min-height: 58px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 2px solid #D9BE63; color: var(--carta);
  background: linear-gradient(150deg, var(--natale-alto), var(--natale) 60%, var(--natale-scuro));
  font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(122,12,30,.28);
  animation: batte 2.6s ease-in-out infinite;
}
.apri-regalo .fiocchetto { font-size: 22px; }
.apri-regalo::after {
  content: ""; position: absolute; top: -50%; left: -60%; width: 35%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: rotate(18deg); animation: passaluce-r 3.2s ease-in-out infinite;
}
@keyframes passaluce-r { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes batte { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.03); } 90% { transform: scale(.99); } }
.apri-regalo[disabled] { animation: none; filter: grayscale(.7); opacity: .5; }
.apri-regalo[disabled]::after { display: none; }
.apri-regalo.in-corso { opacity: .75; pointer-events: none; }

/* il premio, grande, sotto la superficie da grattare */
.occhiello { margin: 0 0 4px; font-size: var(--t-micro); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
.premio-grande {
  color: var(--oro-chiaro); font-size: clamp(30px, 9vw, 42px); font-weight: 800; line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 10px;
}
.premio-riquadro { padding: 14px 8px 12px; }

@media (prefers-reduced-motion: reduce) {
  .apri-regalo, .apri-regalo::after, .busta { animation: none; }
}

/* ⚠️ «.campo span» (il nome del campo, in maiuscoletto) prendeva anche la spiegazione
   sotto il campo: «per farti gli auguri…» usciva gridata. Qui torna testo normale. */
.campo .perche {
  display: block; margin-top: 6px; font-size: var(--t-desc); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--verde-tenue);
}
.campo .obbligo { display: inline; color: var(--natale); }
.confermato .dato { display: block; }
/* il codice su una riga sola: si detta al banco, non si legge a pezzi */
.codice { white-space: nowrap; font-size: clamp(22px, 7.2vw, 30px); letter-spacing: .14em; }


/* Il modulo in una pagina (25/09): nome e cognome affiancati quando c'e' spazio, e
   «facoltativo» detto sottovoce accanto al nome del campo. */
.due-campi { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 420px) { .due-campi { grid-template-columns: 1fr 1fr; } }
.campo .facoltativo { display: inline; font-style: normal; font-weight: 500; letter-spacing: .06em;
  text-transform: none; color: var(--verde-tenue); }
#modulo .termometro-scheda { margin: 0 0 20px; }
/* «Annulla e correggi i dati»: un bottone vero, non un link nascosto — chi ha sbagliato
   l'email deve trovarlo subito. */
.grosso.secondario { background: none; color: var(--verde); border: 1.5px solid var(--riga); margin-top: 18px; width: 100%; }