/* ============================================================
   VALOA — Homepage sections — LIGHT edition
   ============================================================ */

/* ---------- HERO — il racconto ----------
   Quattro frasi, una sotto l'altra, ognuna alta una schermata. Scorrendo,
   ciascuna attraversa il centro: entra piccola e spostata di lato, al centro
   e grande e sola, esce piccola e spostata dall'altra parte. Un gesto solo e
   continuo, non un apparire e uno svanire.

   Due regole che vengono dalla demo Codrops "On-Scroll Text Motion" e dalla
   scheda KT·06 del Lessico Visivo:
     - una sola cosa e grande e al centro; tutto il resto e piccolo e ai lati
     - lo stato a riposo e gia leggibile

   Niente pin e nessuna versione alternativa: questa impaginazione e sia il
   punto di partenza che il punto di arrivo. Senza JS le quattro frasi stanno
   una sotto l'altra, ognuna centrata nella sua schermata, e si leggono. */
.hero { position: relative; overflow: hidden;
  background: radial-gradient(58% 48% at 50% 32%, rgba(107,18,40,0.05), transparent 72%); }
.hero__inner { position: relative; z-index: 3; width: 100%; }

.hero__frase {
  min-height: 50svh;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.05rem, 7.4vw, 6.5rem);   /* +15% due volte */
  line-height: 1.16; letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Piene, non vuote: il colore e quello del gesso scuro. Al passaggio del
     mouse la singola lettera passa a oro, una per volta. */
  color: var(--inciso);
  text-align: center; text-wrap: balance;
  margin: 0; padding-inline: var(--pad-x);
}
/* La prima si centra in quello che resta sotto la fascia crema.
   NON :first-of-type — le frasi sono un h1 e tre p, e quel selettore
   prendeva anche il primo p: due frasi alte una schermata invece di una. */
.hero__frase[data-frase="1"] {
  min-height: calc(100svh - var(--banda-h, 8.4rem));
  /* il padding in alto abbassa il testo di meta del suo valore: la prima
     frase stava attaccata alla fascia, cosi respira e sta piu al centro */
  padding-top: 30vh;
}
.hero__frase em { font-style: italic; letter-spacing: 0.05em; color: var(--bordeaux); }   /* 10/10: la parola importante in bordeaux, come negli altri titoli */
.hero__testo { display: inline-block; will-change: transform; }

.hero__cta { display: grid; place-items: center; padding-block: 2rem 14vh; }

/* L'ORO CHE PASSA — al posto dell'onda, che si muoveva troppo.
   Le lettere non si alzano e non si ingrandiscono: si RIEMPIONO. Sotto il
   puntatore il contorno si riempie d'oro e mette a fuoco; ai bordi
   dell'alone il riempimento e ancora sfocato, quindi l'oro sembra arrivare
   da lontano invece di accendersi. Lo sfuoco vive solo sulle poche lettere
   in transizione, non su tutte.
   Ogni lettera e uno span messo da hero.js. Il puntatore prende solo il
   testo, non tutta la fascia della frase. */
.hero__frase { pointer-events: none; }
.hero__testo { pointer-events: auto; cursor: default; }
.hero__parola { display: inline-block; white-space: nowrap; }
.hero__l { display: inline-block; will-change: transform; }
@media (max-width: 760px) {
  .hero__frase { font-size: clamp(2.55rem, 10.8vw, 3.85rem); letter-spacing: 0.06em; min-height: 48svh; }
}

/* ---------- "Chi vuoi rendere felice" — recipients ---------- */
/* si adatta al numero di schede: era fissa a quattro e con tre lasciava un buco */
.recipients { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.rcard { position: relative; min-height: 22rem; border: 1px solid var(--line-gold-soft); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 2.1rem; isolation: isolate;
  background: var(--surface); box-shadow: var(--shadow);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.rcard__bg { position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 85% at 50% 100%, rgba(107,18,40,0), transparent 70%); transition: background 0.6s var(--ease); }
.rcard::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--bordeaux), var(--oro)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.rcard:hover { border-color: var(--bordeaux); box-shadow: var(--shadow-hover); animation: heartbeat 2.7s ease-in-out infinite; }
.rcard:hover::after { transform: scaleX(1); }
.rcard:hover .rcard__bg { background: radial-gradient(120% 85% at 50% 100%, rgba(107,18,40,0.10), transparent 72%); }
.rcard h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.1vw, 2.2rem); font-style: italic; color: var(--ink); }
.rcard p { color: var(--ink-soft); font-size: 0.92rem; margin: 0.8rem 0 1.6rem; max-width: 26ch; }
.rcard--grande { border-color: var(--bordeaux); background: linear-gradient(180deg, rgba(107,18,40,0.06), var(--surface) 62%); }
.rcard--grande h3 { color: var(--bordeaux); }

/* ---------- Occasioni — modern grid ---------- */
.occ__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.ocard { position: relative; display: flex; flex-direction: column; gap: 1.6rem; justify-content: space-between;
  min-height: 20rem; border: 1px solid var(--line-soft); padding: 2.2rem; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.ocard::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.5s var(--ease);
  background: radial-gradient(110% 80% at 50% 0%, rgba(107,18,40,0.12), transparent 68%); }
.ocard > * { position: relative; z-index: 1; }
.ocard:hover { border-color: var(--bordeaux); box-shadow: var(--shadow-hover); animation: heartbeat 2.7s ease-in-out infinite; }
.ocard__rule { display: block; width: 40px; height: 2px; background: linear-gradient(90deg, var(--bordeaux), var(--oro)); transition: width 0.5s var(--ease); }
.ocard:hover .ocard__rule { width: 66px; }
.ocard__body { flex: 1; margin-top: -0.4rem; }
.ocard h3 { font-family: var(--serif); font-size: clamp(1.55rem, 2vw, 2rem); color: var(--ink); }
.ocard p { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.7rem; }

/* ---------- Gift Finder — main feature ---------- */
.giftcta { text-align: center; padding-block: clamp(6rem, 15vh, 13rem); }
.giftcta__inner { position: relative; max-width: 64rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.giftcta__inner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 50% 40%, rgba(107,18,40,0.06), transparent 72%); }
.giftcta__title { font-size: clamp(2.8rem, 7vw, 5.6rem); margin: 1.4rem 0 1.6rem; }
.giftcta .lead { margin: 0 auto 2.6rem; max-width: 44ch; }
.giftcta__meta { margin-top: 1.6rem; font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .recipients { grid-template-columns: 1fr 1fr; }
  .rcard { min-height: 16rem; }
  .occ__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .recipients { grid-template-columns: 1fr; }
  .occ__grid { grid-template-columns: 1fr; }
}

/* ---------- Zone di consegna (mappa Italia) ---------- */
.zone { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.zone__map { position: relative; }
#zoneMap { width: 100%; height: auto; max-height: 66vh; display: block; overflow: visible; }
.zmap__italy path { fill: rgba(107,18,40,0.06); stroke: rgba(107,18,40,0.12); stroke-width: 0.6; }
.zmap__zone { transition: fill 0.5s var(--ease); }
.z-verde { fill: rgba(63,125,79,0.30); stroke: #3f7d4f; stroke-width: 0.8; }
.z-arancione { fill: rgba(201,138,58,0.22); stroke: #c98a3a; stroke-width: 0.8; }
.z-rosso { fill: rgba(158,42,53,0.13); stroke: #9e2a35; stroke-width: 0.8; }
circle.z-verde.active { fill: rgba(63,125,79,0.5); }
circle.z-arancione.active { fill: rgba(201,138,58,0.4); }
circle.z-rosso.active { fill: rgba(158,42,53,0.28); }
.zmap__zone.active { animation: zonepulse 1.9s ease-in-out infinite; }
@keyframes zonepulse { 50% { opacity: 0.7; } }
.zmap__city circle { fill: var(--bordeaux); }
.zmap__city text { font-family: var(--sans); font-size: 6px; fill: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; }
.zmap__center { fill: var(--bordeaux); }
.zmap__centerlbl { font-family: var(--sans); font-size: 6.5px; fill: var(--bordeaux); font-weight: 600; letter-spacing: 0.02em; }
.zmap__pin.z-verde { fill: #3f7d4f; } .zmap__pin.z-arancione { fill: #c98a3a; } .zmap__pin.z-rosso { fill: #9e2a35; }
.zmap__pinpulse.z-verde { fill: #3f7d4f; } .zmap__pinpulse.z-arancione { fill: #c98a3a; } .zmap__pinpulse.z-rosso { fill: #9e2a35; }
.zmap__pinpulse { transform-box: fill-box; transform-origin: center; animation: pinpulse 1.6s ease-out infinite; }
@keyframes pinpulse { 0% { transform: scale(0.5); opacity: 0.55; } 100% { transform: scale(3); opacity: 0; } }
.zone__legend { display: flex; gap: 1.3rem; justify-content: center; margin-top: 1rem; font-size: 0.72rem; color: var(--ink-soft); flex-wrap: wrap; }
.zone__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.zone__legend .v { background: #3f7d4f; } .zone__legend .a { background: #c98a3a; } .zone__legend .r { background: #9e2a35; }

.zone__label { display: block; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 0.6rem; font-weight: 500; }
.zone__inputrow { display: flex; gap: 0.6rem; }
.zone__inputrow input { flex: 1; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink);
  padding: 0.95rem 1.1rem; font-family: var(--sans); font-size: 1rem; letter-spacing: 0.14em; outline: none; transition: border-color 0.3s var(--ease); }
.zone__inputrow input:focus { border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(107,18,40,0.08); }
.zone__inputrow input::placeholder { color: var(--ink-faint); letter-spacing: 0.06em; }
.zone__inputrow .btn { white-space: nowrap; }
.zone__result { margin-top: 1.6rem; min-height: 5rem; }
.zone__hint { color: var(--ink-faint); font-size: 0.9rem; }
.zone__hint.err { color: #9e2a35; }
.zresult { border: 1px solid var(--line-soft); background: var(--surface); box-shadow: var(--shadow); padding: 1.6rem 1.8rem; animation: zfade 0.5s var(--ease) both; }
@keyframes zfade { from { opacity: 0; transform: translateY(12px); } }
.zresult__top { display: flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.zresult .zdot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.zresult.z-verde .zdot { background: #3f7d4f; } .zresult.z-arancione .zdot { background: #c98a3a; } .zresult.z-rosso .zdot { background: #9e2a35; }
.zresult__place { color: var(--ink-soft); font-size: 0.9rem; margin: 0.3rem 0 1.2rem; }
.zresult__rows { display: grid; gap: 0.6rem; }
.zresult__rows > div { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }
.zresult__rows span { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.zresult__rows b { font-weight: 600; color: var(--ink); }
.zresult__note { margin-top: 1rem; font-size: 0.72rem; color: var(--ink-faint); font-style: italic; }
@media (max-width: 980px) { .zone { grid-template-columns: 1fr; } #zoneMap { max-height: 52vh; } }

/* Un solo invito, centrato: la sezione porta al promemoria delle date. */
.manifesto__cta {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
}


/* ---- fondo a bassorilievo ----
   Il canvas sta dietro tutto. Il corpo pagina diventa trasparente,
   cosi il muro di gesso si vede attraverso le sezioni. */
/* NB: altezza esplicita. Con height:auto un canvas usa il suo attributo
   height invece della scatola, e il fondo si rimpiccioliva a ogni resize. */
/* Il muro parte dall'altezza della fascia CHIUSA, non di quella aperta.
   A riposo la fascia alta gli sta sopra e lo copre — e opaca, non si vede
   niente. A testa chiusa i due bordi combaciano. Prima il muro partiva da
   quella aperta e a testa chiusa restava una striscia piu chiara in mezzo.
   NB: altezza esplicita — con height:auto un canvas usa il suo attributo
   height invece della scatola, e si rimpiccioliva a ogni resize. */
/* 02/10: il motore nuovo misura il mouse su tutta la finestra, quindi la
   tela parte da 0: la fascia in alto e opaca e la copre. */
#rilievoFondo{position:fixed;top:0;left:0;
  width:100%;height:100%;
  display:block;z-index:0;pointer-events:none}
body{background:transparent}
/* Solo le colonne di contenuto passano davanti al muro.
   NON usare un selettore generico su "body > *": spegneva il position:fixed
   di nav, menu mobile, loader e filo. A menu chiuso restava nel flusso e
   spingeva la hero mezza schermata piu giu. */
main,.footer{position:relative;z-index:1}
/* 18/10: il contenitore dello scroll sul telefono (vedi la testa di index.html) */
html.scatola,html.scatola body{height:100%;overflow:hidden;overscroll-behavior:none}
html.scatola #scatola{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;z-index:1;overscroll-behavior:none;scrollbar-width:none}
html.scatola #scatola::-webkit-scrollbar{display:none}
.hero,.section-pad,#collezioni,#manifesto{background:transparent}
/* il footer resta pieno: il muro non deve passargli attraverso */
.footer{background:var(--bordeaux)}

/* il corpo pagina e trasparente per far passare il muro: il colore di
   fondo lo tiene html, cosi dietro non resta mai il bianco del browser */
html { background: var(--bg); }

/* La hero e le sezioni stavano a distanza di un'altra schermata.
   Ora la prima sezione parte subito sotto: meno vuoto, stessa aria dentro. */
#giftfinder-teaser { padding-block-start: clamp(2rem, 4vh, 3.4rem); }

/* ---------- APERTURA (02/10) ----------
   Una frase sola, piccola, in basso a sinistra: i cigni del muro stanno al
   centro e sono loro lo spettacolo. Registro da cartellino di museo: testo
   corto, tanta aria, niente box. Una sola famiglia (Cormorant), due pesi. */
.hero--muro { min-height: 100svh; display: flex; align-items: flex-end; background: transparent; }
/* frase e bottone su una riga sola, sotto l opera, come la didascalia sotto
   un quadro: due righe salivano fino alle rose del pannello */
.apertura { width: 100%; padding: 0 var(--pad-x) clamp(1.8rem, 6vh, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; }
.apertura__frase {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.1; letter-spacing: 0.005em;
  color: var(--ink); margin: 0;
}
.apertura__frase em { font-style: italic; color: var(--bordeaux); }
.apertura__frase .parola { display: inline-block; }

/* il bottone, nel registro del cartellino: serif in maiuscoletto */
.apertura__btn { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.2em; }

/* ---------- L'ESEMPIO VIVO ----------
   Ogni bottone importante ha una schedina che mostra in quattro secondi come
   funziona, invece di spiegarlo. Si apre sopra il bottone: al passaggio del
   mouse o col fuoco da tastiera; sul telefono parte da sola quando il bottone
   entra nello schermo (js/esempi.js). */
.esempio { position: relative; display: inline-block; }
.esempio__scheda {
  position: absolute; left: 0; bottom: calc(100% + 0.9rem); width: min(19rem, 86vw);
  padding: 1rem 1.1rem 0.9rem;
  background: rgba(248, 244, 235, 0.94);
  border: 1px solid var(--line-gold-soft);
  font-family: var(--serif); color: var(--ink);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.esempio.aperto .esempio__scheda { opacity: 1; transform: none; }
.esempio__etichetta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro-deep); margin-bottom: 0.7rem; }
.esempio__etichetta span { color: var(--ink-faint); font-weight: 500; }
.esempio__passi { list-style: none; position: relative; min-height: 5.6rem; }
.esempio__passo { position: absolute; inset: 0; opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.esempio__passo.ora { opacity: 1; transform: none; }
.esempio__domanda { font-size: 1.12rem; font-style: italic; line-height: 1.2; margin-bottom: 0.6rem; }
.esempio__scelte { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.esempio__scelte span { font-size: 0.86rem; padding: 0.28em 0.7em; border: 1px solid var(--line);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); }
.esempio__passo.scelto .si { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--oro-light); }
.esempio__passo--esito { display: flex; gap: 0.8rem; align-items: center; }
.esempio__passo--esito img { width: 4.2rem; height: 4.2rem; object-fit: cover; }
.esempio__passo--esito p { font-size: 1rem; line-height: 1.3; }
.esempio__tipo { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-deep); }
.esempio__prezzo { font-weight: 600; color: var(--bordeaux); }
.esempio__nota { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .esempio__scheda, .esempio__passo { transition: none; }
}

/* l esempio SOTTO il bottone, sempre nel flusso (sezione Gift Finder, 02/10):
   non si apre al passaggio del mouse, gira da solo quando e sullo schermo */
.esempio--sotto { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.esempio--sotto .esempio__scheda { position: relative; left: auto; bottom: auto; text-align: left;
  width: min(22rem, 88vw); opacity: 1; transform: none; pointer-events: auto; }

/* I bottoni della home (02/10): partono pieni bordeaux, al passaggio sale l oro
   dal basso e la parola diventa bordeaux */
main .btn, .apertura__btn { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--bianco); }
main .btn::before, .apertura__btn::before { background: var(--oro); }
main .btn:hover, main .btn:focus-visible, main .btn:active,
.apertura__btn:hover, .apertura__btn:focus-visible, .apertura__btn:active {
  color: var(--bordeaux-deep); border-color: var(--oro);
  box-shadow: 0 10px 26px rgba(156, 122, 57, 0.30);
}

/* ---------- SEZIONI A CARTELLINI (02/10) ----------
   Fiori e Giochi, poi i due servizi con lo staff: stanno nel centro libero
   del pannello con gru e colombe. Cartellino da museo: un filetto d oro in
   alto, etichetta in maiuscoletto, una frase, una riga, il bottone e sotto
   l esempio. Niente box, niente ombre: il fondo e il muro. */
.sezione { text-align: center; }
.sezione__titolo { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-bottom: clamp(2.4rem, 5vh, 4rem); }
.cartellini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.6rem);
  max-width: 54rem; margin: 0 auto; text-align: left; }
.cartellino { border-top: 1px solid var(--line-gold); padding-top: 1.3rem;
  display: flex; flex-direction: column; align-items: flex-start; }
.cartellino__etichetta { font-family: var(--serif); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--oro-deep); margin-bottom: 0.7rem; }
.cartellino h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.12; margin-bottom: 0.6rem; }
.cartellino > p:not(.cartellino__etichetta) { font-family: var(--serif); font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 1.4rem; max-width: 30ch; }
.cartellino .esempio--sotto { align-items: flex-start; }
.cartellino .esempio__scheda { width: 100%; }
#promemoria .esempio--sotto { margin-top: 2rem; }
@media (max-width: 760px) { .cartellini { grid-template-columns: 1fr; } }

/* l esempio a conversazione: la richiesta a destra, lo staff a sinistra */
.esempio__msg { font-size: 1rem; line-height: 1.3; padding: 0.55em 0.8em; max-width: 92%;
  margin-left: auto; border: 1px solid var(--line); }
.esempio__msg--staff { margin-left: 0; background: rgba(107, 18, 40, 0.06); border-color: var(--line-gold-soft); }
.esempio__chi { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oro-deep); margin-bottom: 0.15rem; }

/* gli esempi: i passi stanno tutti nella stessa cella della griglia, cosi la
   schedina e alta quanto il passo piu lungo (anche la chat su tre righe) e
   non dipende dagli stili della sezione in cui sta (il manifesto allargava
   margini e interlinea). */
.esempio .esempio__passi { display: grid; min-height: 0; }
.esempio .esempio__passo { position: relative; inset: auto; grid-area: 1 / 1; }
.esempio .esempio__scheda p { margin: 0; text-align: left; max-width: none; }
.esempio .esempio__scheda .esempio__domanda { margin-bottom: 0.6rem; }
.esempio .esempio__scheda .esempio__etichetta { margin-bottom: 0.7rem; }
.esempio .esempio__scheda .esempio__nota { margin-top: 0.8rem; }
.cartellino .esempio { width: 100%; }

/* 02/10: esempio del Gift Finder piu grande */
#giftfinder-teaser .esempio__scheda { width: min(30rem, 92vw); padding: 1.4rem 1.6rem 1.2rem; }
#giftfinder-teaser .esempio__domanda { font-size: 1.45rem; }
#giftfinder-teaser .esempio__scelte span { font-size: 1.05rem; }
#giftfinder-teaser .esempio__passo--esito img { width: 5.6rem; height: 5.6rem; }
#giftfinder-teaser .esempio__passo--esito p { font-size: 1.2rem; }
#giftfinder-teaser .esempio__etichetta { font-size: 0.78rem; }
#giftfinder-teaser .esempio__nota { font-size: 0.98rem; }

/* 02/10: "Cosa vuoi regalare?" — due cartellini grandi, su fondo pieno
   cosi il muro dietro non disturba la lettura; senza esempi */
.sezione--grande .cartellini { max-width: 72rem; gap: clamp(1.6rem, 3vw, 3rem); }
.sezione--grande .cartellino {
  background: var(--bg); border: 1px solid var(--line-gold-soft); border-top: 2px solid var(--oro);
  padding: clamp(2rem, 4vw, 3.4rem); min-height: 24rem; justify-content: flex-end;
}
.sezione--grande .cartellino__etichetta { font-size: 0.86rem; }
.sezione--grande .cartellino h3 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.05; margin-bottom: 1rem; }
.sezione--grande .cartellino > p:not(.cartellino__etichetta) { font-size: 1.3rem; max-width: 34ch; margin-bottom: 2rem; }
/* anche l esempio del Gift Finder su fondo pieno: il muro dietro non si legge attraverso */
#giftfinder-teaser .esempio__scheda { background: var(--bg); }

/* ===== 02/10 sera: RIFATTI cartellini e bottoni (troppo "biglietto d auguri").
   Registro moderno da maison: niente filetti d oro, niente cornici, angoli
   vivi, foto vera a tutta tessera, tipografia grande, il colore lo fa la foto. */

/* bottoni: pieno bordeaux, al passaggio si scurisce e la freccia avanza.
   Niente piu riempimento oro che sale. */
main .btn, .apertura__btn { background: var(--bordeaux); border: 0; color: var(--bianco);
  font-family: var(--serif); font-weight: 600; letter-spacing: 0.18em; padding: 1.15em 2.2em; }
main .btn::before, .apertura__btn::before { display: none; }
main .btn:hover, main .btn:focus-visible, main .btn:active,
.apertura__btn:hover, .apertura__btn:focus-visible, .apertura__btn:active {
  background: var(--bordeaux-deep); color: var(--bianco); border: 0;
  transform: none; box-shadow: none; }
main .btn .arrow, .apertura__btn .arrow { transition: transform 0.45s var(--ease-out); }
main .btn:hover .arrow, .apertura__btn:hover .arrow { transform: translateX(7px); }

/* le tessere di "Cosa vuoi regalare?" */
.tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem);
  max-width: 76rem; margin: 0 auto; text-align: left; }
.tessera { display: flex; flex-direction: column; background: var(--bg); color: var(--ink); text-decoration: none; overflow: hidden; }
.tessera__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.tessera__foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.tessera:hover .tessera__foto img { transform: scale(1.07); }
.tessera__testo { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.tessera__etichetta { font-family: var(--serif); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.tessera__titolo { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.04; }
.tessera__riga { font-family: var(--serif); font-size: 1.2rem; color: var(--ink-soft); max-width: 36ch; }
.tessera__vai { margin-top: 0.6rem; align-self: flex-start; font-family: var(--serif); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bordeaux);
  padding-bottom: 0.3rem; border-bottom: 1px solid currentColor; }
.tessera__vai .arrow { display: inline-block; transition: transform 0.45s var(--ease-out); }
.tessera:hover .tessera__vai .arrow { transform: translateX(7px); }
@media (max-width: 760px) { .tessere { grid-template-columns: 1fr; } }

/* "Su misura": stesse regole, pannello pieno senza filetti, l esempio dentro */
.cartellini--staff { max-width: 76rem; gap: clamp(1rem, 2vw, 1.6rem); }
.cartellini--staff .cartellino { background: var(--bg); border: 0; padding: clamp(1.6rem, 3vw, 2.6rem); }
.cartellini--staff .cartellino__etichetta { color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.2em; }
.cartellini--staff .cartellino h3 { font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.05; margin-bottom: 0.8rem; }
.cartellini--staff .cartellino > p:not(.cartellino__etichetta) { font-size: 1.15rem; max-width: 36ch; }
.esempio__scheda { border-color: var(--line-soft); }
.esempio__etichetta { color: var(--ink-faint); }
.esempio__etichetta span { color: var(--ink-faint); }

/* le sezioni hanno aria: il muro le aggancia ai pannelli (data-muro) */
.sezione, .giftcta, #promemoria { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

/* ===== 02/10 sera: STILE 5 scelto da Francesco — lastre di vetro smerigliato
   sul muro (Igloo, Lusion). Si legge tutto, il rilievo traspare sfocato.
   Al passaggio la lastra si piega verso il punto toccato, le parti dentro
   stanno a profondita diverse, un riflesso segue la mano (js/esempi.js). */
.vetri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 62rem; margin: 0 auto;
  text-align: left; perspective: 1200px; }
.cartellini--staff { perspective: 1200px; }
.vetro, .cartellini--staff .cartellino.vetro {
  position: relative; background: rgba(255, 253, 248, 0.42);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7); padding: 2.4rem;
  box-shadow: 0 30px 60px -40px rgba(74, 12, 27, 0.35);
  transform-style: preserve-3d; will-change: transform; }
.vetro__img { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 1.6rem; transform: translateZ(40px); }
.vetro__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vetro h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.05; margin-bottom: 0.6rem; transform: translateZ(60px); }
.vetro > p { font-family: var(--serif); color: var(--ink-soft); font-size: 1.12rem; margin-bottom: 1.4rem; transform: translateZ(30px); }
.vetro .btn { transform: translateZ(70px); }
.vetro .cartellino__etichetta { transform: translateZ(30px); }
.vetro .esempio { transform: translateZ(45px); }
.vetro .esempio__scheda { background: rgba(248, 244, 235, 0.85); }
.vetro .riflesso { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(40% 40% at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.55), transparent 70%);
  mix-blend-mode: soft-light; }
.vetro:hover .riflesso { opacity: 1; }
@media (max-width: 760px) { .vetri { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vetro { transform: none !important; } }

/* ---------- PROMEMORIA: esempio a calendario (02/10) ----------
   Piu grande degli altri e di un altro tipo: il calendario con la data
   cerchiata, poi la notifica che arriva, poi le tre idee gia pronte. */
.esempio--cal .esempio__scheda { width: min(34rem, 92vw); padding: 1.6rem 1.8rem 1.3rem; background: var(--bg); }
.esempio--cal .esempio__etichetta { font-size: 0.8rem; }
.esempio--cal .esempio__nota { font-size: 1rem; }
.cal__mese { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; margin-bottom: 0.8rem !important; }
.cal__mese em { font-size: 1.05rem; color: var(--ink-faint); }
.cal__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center !important; font-family: var(--serif); font-size: 1.05rem; }
.cal__griglia i { font-style: normal; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--ink-faint); padding-bottom: 0.2rem; }
.cal__griglia span { padding: 0.28rem 0; color: var(--ink-soft); }
.cal__griglia .cal__giorno--si { position: relative; color: var(--ink); font-weight: 600; }
.cal__griglia .cal__giorno--si::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.2rem; height: 2.2rem;
  border: 1.5px solid var(--bordeaux); border-radius: 50%; transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  transition: transform 0.7s var(--ease-out), opacity 0.4s; }
.cal.scelto .cal__giorno--si { color: var(--bordeaux); }
.cal.scelto .cal__giorno--si::after { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cal__nota { margin-top: 0.8rem !important; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--bordeaux);
  opacity: 0; transition: opacity 0.5s 0.3s; }
.cal.scelto .cal__nota { opacity: 1; }

.notifica__ora { font-size: 0.85rem; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 0.6rem !important; }
.notifica__box { font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; padding: 1rem 1.1rem; background: rgba(107,18,40,0.06);
  border-left: 2px solid var(--bordeaux); transform: translateY(14px); opacity: 0;
  transition: transform 0.7s var(--ease-out), opacity 0.5s; }
.notifica__box b { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.notifica__app { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; color: var(--oro-deep); margin-bottom: 0.3rem; }
.notifica.scelto .notifica__box { transform: none; opacity: 1; }
.notifica__canali { margin-top: 0.6rem !important; font-size: 0.9rem; color: var(--ink-faint); }

.idee__titolo { font-family: var(--serif); font-size: 1.4rem; font-style: italic; margin-bottom: 0.9rem !important; }
.idee__riga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; font-family: var(--serif); font-size: 0.98rem; line-height: 1.2; }
.idee__riga span { display: flex; flex-direction: column; gap: 0.35rem; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.idee__riga img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.idee__riga em { font-style: normal; font-weight: 600; color: var(--bordeaux); }
.idee.scelto .idee__riga span { opacity: 1; transform: none; }
.idee.scelto .idee__riga span:nth-child(2) { transition-delay: 0.1s; }
.idee.scelto .idee__riga span:nth-child(3) { transition-delay: 0.2s; }
/* il titolo del promemoria sta nel centro libero fra orologio e rondini */
#promemoria h2 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); max-width: 15ch; margin-inline: auto; }

/* ---------- GIFT FINDER: esempio a quiz (02/10, terza versione) ----------
   Grande, e di un altro tipo: la barra delle domande che avanza, quattro
   risposte a griglia con una che si accende, poi le TRE proposte vere che
   il Gift Finder restituisce (Essenziale, Scelta VALOY, Indimenticabile). */
#giftfinder-teaser .esempio--quiz .esempio__scheda { width: min(46rem, 94vw); padding: 2rem 2.2rem 1.6rem; background: var(--bg); }
.quiz__avanza { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem !important;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.quiz__avanza i { flex: 1; height: 2px; background: var(--line-soft); position: relative; overflow: hidden; }
.quiz__avanza i::after { content: ""; position: absolute; inset: 0; background: var(--bordeaux); transform-origin: left;
  transform: scaleX(calc(var(--p) - 0.17)); transition: transform 0.9s var(--ease-out); }
.esempio__passo.scelto .quiz__avanza i::after { transform: scaleX(var(--p)); }
.quiz__domanda { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.15; margin-bottom: 1.2rem !important; }
.quiz__risposte { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.quiz__risposte span { font-family: var(--serif); font-size: 1.2rem; padding: 0.85rem 1rem; border: 1px solid var(--line);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease-out); }
.esempio__passo.scelto .quiz__risposte .si { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--bianco); transform: scale(1.03); }
.proposte__riga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; }
.proposte__riga span { display: flex; flex-direction: column; gap: 0.35rem; opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s, transform 0.7s var(--ease-out); }
.proposte__riga img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 0.3rem; }
.proposte__riga small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.proposte__riga .proposte__vip small { color: var(--bordeaux); }
.proposte__riga em { font-style: normal; font-weight: 600; color: var(--bordeaux); }
.esempio__passo.scelto .proposte__riga span { opacity: 1; transform: none; }
.esempio__passo.scelto .proposte__riga span:nth-child(2) { transition-delay: 0.12s; }
.esempio__passo.scelto .proposte__riga span:nth-child(3) { transition-delay: 0.24s; }
#giftfinder-teaser .esempio__nota { font-size: 1.05rem; }
@media (max-width: 600px) { .quiz__risposte { grid-template-columns: 1fr; } }

/* 02/10: il "come funziona" del Gift Finder con lo stesso fondo delle sezioni:
   lastra di vetro smerigliato. Selettore forte: le regole di prima mettevano
   un fondo pieno e vincevano. */
#giftfinder-teaser .esempio.esempio--quiz .esempio__scheda {
  background: rgba(255, 253, 248, 0.42);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 60px -40px rgba(74, 12, 27, 0.35); }

/* le scritte piccole degli esempi piu scure: si leggevano poco */
.esempio .esempio__etichetta, .esempio .esempio__etichetta span, .esempio .esempio__nota,
.quiz__avanza, .cal__griglia i, .cal__mese em, .notifica__ora, .notifica__canali,
.proposte__riga small, .esempio__chi { color: var(--ink-soft) !important; }
.esempio .esempio__etichetta { color: var(--oro-deep) !important; }

/* Promemoria: dentro un telefono (rimesso su richiesta, 02/10) */
.esempio.esempio--cal .esempio__scheda {
  width: min(22rem, 86vw); padding: 2.6rem 1.3rem 1.6rem; border-radius: 2.6rem;
  background: linear-gradient(180deg, #fbf8f2, #f3ece0);
  border: 9px solid var(--bordeaux-deep); box-shadow: 0 40px 80px -40px rgba(74, 12, 27, 0.55), inset 0 0 0 1px rgba(255,255,255,0.6); }
.esempio--cal .esempio__scheda::before { content: ""; position: absolute; top: 0.8rem; left: 50%; width: 5.5rem; height: 1.1rem;
  transform: translateX(-50%); background: var(--bordeaux-deep); border-radius: 1rem; }
.esempio--cal .esempio__etichetta { text-align: center !important; font-size: 0.7rem; margin-bottom: 1rem !important; }
.esempio--cal .cal__mese { text-align: center !important; font-size: 1.5rem; }
.esempio--cal .cal__griglia { font-size: 0.98rem; }
.esempio--cal .cal__nota { text-align: center !important; }
.esempio--cal .notifica__ora { text-align: center !important; font-family: var(--serif); font-size: 2.6rem; letter-spacing: 0; color: var(--ink) !important; margin-bottom: 1rem !important; }
.notifica__ora small { display: block; font-size: 0.9rem; letter-spacing: 0.12em; color: var(--ink-soft); }
.esempio--cal .notifica__box { border-left: 0; border-radius: 1rem; background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px -18px rgba(74, 12, 27, 0.5); font-size: 1rem; }
.esempio--cal .notifica__canali { text-align: center !important; }
.esempio--cal .idee__titolo { text-align: center !important; font-size: 1.25rem; }
.esempio--cal .idee__riga { gap: 0.5rem; font-size: 0.86rem; }
.esempio--cal .idee__riga img { border-radius: 0.6rem; }
.esempio--cal .esempio__nota { text-align: center !important; border-top: 0; font-size: 0.9rem; }

/* ===== BOTTONI (02/10, scelti da Francesco): testo che rotola + magnete leggero.
   Al passaggio le lettere salgono una dopo l altra e da sotto arriva la stessa
   scritta in oro; il bottone viene incontro alla mano, poco (un quarto della
   prova), e torna a posto a molla. js/esempi.js prepara le lettere. */
main .btn .rotola { position: relative; display: inline-flex; overflow: hidden; height: 1.25em; line-height: 1.25em; }
main .btn .rotola .l { display: inline-block; position: relative; white-space: pre;
  transition: transform 0.6s var(--ease-out); transition-delay: calc(var(--i) * 18ms); }
main .btn .rotola .l::after { content: attr(data-l); position: absolute; left: 0; top: 100%; color: var(--oro-light); }
main .btn:hover .rotola .l, main .btn:focus-visible .rotola .l { transform: translateY(-100%); }
main .btn { will-change: transform; }
main .btn:hover { background: var(--bordeaux); }
@media (prefers-reduced-motion: reduce) { main .btn .rotola .l { transition: none; } }

/* ===== BOTTONI, forma definitiva (02/10): SCOLPITO NEL GESSO (n.6) =====
   Il bottone e un pezzo del muro in rilievo: stesso panna, luce da in alto a
   sinistra come le sculture, angoli tondi. Al passaggio si alza (ombre piu
   lunghe), al clic si incide. Restano il testo che rotola (la copia che sale
   e in oro scuro, leggibile sul panna) e il magnete leggero. */
main .btn, .apertura__btn {
  background: var(--bg-alt); color: var(--bordeaux); border: 0; border-radius: 999px;
  padding: 1.15em 2.6em; font-family: var(--serif); font-weight: 600; letter-spacing: 0.16em;
  box-shadow: 6px 6px 14px rgba(140, 110, 90, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.9);
  transition: box-shadow 0.5s var(--ease-out); }
main .btn:hover, main .btn:focus-visible, .apertura__btn:hover, .apertura__btn:focus-visible {
  background: var(--bg-alt); color: var(--bordeaux); border: 0;
  box-shadow: 10px 12px 24px rgba(140, 110, 90, 0.4), -8px -8px 18px rgba(255, 255, 255, 0.95); }
main .btn:active, .apertura__btn:active {
  background: var(--bg-alt); color: var(--bordeaux);
  box-shadow: inset 5px 5px 12px rgba(140, 110, 90, 0.4), inset -5px -5px 12px rgba(255, 255, 255, 0.9); }
main .btn .rotola .l::after { color: var(--oro-deep); }

/* bottone scolpito: filo bordeaux tutto intorno e un alone d oro dietro,
   che al passaggio si accende di piu (02/10) */
main .btn, .apertura__btn {
  border: 1.5px solid var(--bordeaux) !important;
  box-shadow: none;   /* 10/10, Francesco: niente luce ne ombra sotto i bottoni */ }
main .btn:hover, main .btn:focus-visible, .apertura__btn:hover, .apertura__btn:focus-visible {
  box-shadow: none; }
main .btn:active, .apertura__btn:active {
  box-shadow: inset 5px 5px 12px rgba(140, 110, 90, 0.4), inset -5px -5px 12px rgba(255, 255, 255, 0.9); }

/* titoli delle sezioni piu grandi (02/10), alla scala di "Non sai cosa regalare?" */
.sezione__titolo { font-size: clamp(2.6rem, 5.2vw, 4.9rem) !important; line-height: 1.02; }   /* 10/10: -15% per il maiuscolo */
#promemoria h2 { font-size: clamp(2.6rem, 4.6vw, 4.6rem) !important; max-width: 24ch; line-height: 1.02; }   /* 10/10: maiuscolo, piu largo */

/* ---------- I PIU SCELTI (02/10): quattro lastre di vetro con prodotto e prezzo ---------- */
.scelti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; max-width: 76rem; margin: 0 auto;
  text-align: left; perspective: 1200px; }
.scelto.vetro { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1.2rem 1.4rem; color: var(--ink); text-decoration: none; }
.scelto__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 0.8rem; transform: translateZ(40px); }
.scelto__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.scelto:hover .scelto__img img { transform: scale(1.06); }
.scelto__nome { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.1; transform: translateZ(50px); }
.scelto__riga { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-soft); transform: translateZ(30px); }
.scelto__prezzo { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--bordeaux); margin-top: 0.3rem; transform: translateZ(50px); }
.fiducia { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.6rem; margin: 2.6rem auto 0;
  font-family: var(--serif); font-size: 1.12rem; color: var(--ink-soft); }
.fiducia b { color: var(--ink); font-weight: 600; }
.fiducia li::before { content: "✦"; color: var(--oro-deep); margin-right: 0.6rem; font-size: 0.8rem; }
.scelti__tutti { text-align: center; margin-top: 2.4rem; }
@media (max-width: 980px) { .scelti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* l azione delle lastre: sale dal fondo al passaggio; sul telefono sempre visibile */
.scelto__azione { margin-top: 0.8rem; align-self: stretch; text-align: center; padding: 0.75rem 1rem;
  font-family: var(--serif); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bordeaux); border: 1.5px solid var(--bordeaux); border-radius: 999px; background: var(--bg-alt);
  box-shadow: none; cursor: pointer; transform: translateZ(60px);
  opacity: 0; translate: 0 8px; transition: opacity 0.4s var(--ease), translate 0.5s var(--ease-out), background 0.3s, color 0.3s; }
.scelto:hover .scelto__azione, .scelto:focus-within .scelto__azione { opacity: 1; translate: 0 0; }
.scelto__azione:hover { background: var(--bordeaux); color: var(--bianco); }
@media (hover: none) { .scelto__azione { opacity: 1; translate: 0 0; } }

/* ===== FOOTER della home (03/10): lastra di vetro sopra il muro, come le
   sezioni, invece del blocco bordeaux pieno. Testo scuro, logo bordeaux. */
.footer { background: transparent !important; color: var(--ink); padding: 0 var(--pad-x) 2rem; }
.footer > .wrap { background: rgba(255, 253, 248, 0.5);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 30px 60px -40px rgba(74, 12, 27, 0.35);
  padding: clamp(2.6rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem) 1.8rem; }
.footer__logo { height: 52px; }
.footer__brand p, .footer li a { font-family: var(--serif); color: var(--ink-soft); font-size: 1.08rem; }
.footer li a:hover { color: var(--bordeaux); }
.footer h4 { font-family: var(--serif); font-weight: 600; font-size: 0.78rem; color: var(--oro-deep); }
.footer .newsletter { border-bottom-color: var(--line); }
.footer .newsletter input { color: var(--ink); font-family: var(--serif); font-size: 1.08rem; }
.footer .newsletter input::placeholder { color: var(--ink-faint); }
.footer .newsletter button { color: var(--bordeaux); }
.footer .newsletter__note { color: var(--ink-soft); font-family: var(--serif); font-size: 0.95rem; }
.footer__bottom { border-top-color: var(--line-soft); color: var(--ink-soft); font-family: var(--serif); font-size: 0.85rem; }
.footer__social a, .footer__legal a { color: var(--ink-soft); font-family: var(--serif); font-size: 0.85rem; }
.footer__social a:hover, .footer__legal a:hover { color: var(--bordeaux); }

/* ===== COME FUNZIONA al passo (03/10) =====
   Gli esempi parlano la lingua nuova delle scelte (gift.css): tessere velluto
   panna con il filo bordeaux e la scritta oro; la risposta scelta fa il giro
   bordeaux, poi diventa velluto bordeaux con la cornice d oro. Etichette scure
   in grassetto, come sulle pagine col muro. */
.esempio { --oro-deep: #765720; --ink-soft: rgba(36, 20, 26, 0.92); }
.esempio .esempio__etichetta { font-weight: 700; color: var(--oro-deep) !important; }
.esempio .esempio__etichetta span { font-weight: 500; }
.quiz__avanza { font-weight: 700; color: var(--oro-deep) !important; }
.quiz__avanza i { background: rgba(107, 18, 40, 0.14); }

/* le risposte: tessere velluto */
.quiz__risposte span { position: relative; border: 1.5px solid var(--bordeaux); border-radius: 0; color: var(--oro-deep); font-weight: 500;
  background: radial-gradient(120% 140% at 20% 0%, #fffdf8 0%, #f6efe2 45%, #ebdfc9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 30px -22px rgba(74, 12, 27, 0.45);
  transition: color .4s .7s, box-shadow .5s .7s; }
/* il giro: la fascia bordeaux parte da sinistra e corre sopra e sotto fino a destra */
.quiz__risposte span::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--bordeaux); pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.55, .1, .25, 1); z-index: -1; }
/* il velluto bordeaux che si accende a giro chiuso, e la cornice d oro */
.quiz__risposte span::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 140% at 20% 0%, #8a2540 0%, var(--bordeaux) 45%, var(--bordeaux-deep) 100%);
  box-shadow: inset 0 0 0 7px transparent, inset 0 0 0 8px var(--oro-light); transition: opacity .45s .7s; z-index: -1; }
.quiz__risposte span { z-index: 0; isolation: isolate; }
.esempio__passo .quiz__risposte .si { transform: none !important; }
.esempio__passo.scelto .quiz__risposte .si { background: radial-gradient(120% 140% at 20% 0%, #fffdf8 0%, #f6efe2 45%, #ebdfc9 100%);
  color: var(--oro-light); border-color: var(--bordeaux);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.esempio__passo.scelto .quiz__risposte .si::before { clip-path: inset(0 0 0 0); }
.esempio__passo.scelto .quiz__risposte .si::after { opacity: 1; }

/* le tre proposte: foto col filo bordeaux, la Scelta VALOY in velluto */
.proposte__riga img { border: 1.5px solid var(--bordeaux); }
.proposte__riga small { font-weight: 700; color: var(--oro-deep) !important; }
.proposte__riga .proposte__vip small { color: var(--bordeaux) !important; }

/* la conversazione: tu in velluto bordeaux, lo staff in velluto panna */
.esempio__msg { font-family: var(--serif); font-size: 1.08rem; padding: 0.7em 0.95em; border-radius: 0;
  border: 1.5px solid var(--bordeaux); color: var(--oro-light);
  background: radial-gradient(120% 140% at 20% 0%, #8a2540 0%, var(--bordeaux) 45%, var(--bordeaux-deep) 100%);
  box-shadow: 0 18px 30px -22px rgba(74, 12, 27, 0.55); }
.esempio__msg .esempio__chi { color: var(--oro) !important; font-weight: 700; }
.esempio__msg--staff { color: var(--ink);
  background: radial-gradient(120% 140% at 20% 0%, #fffdf8 0%, #f6efe2 45%, #ebdfc9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 30px -22px rgba(74, 12, 27, 0.45); }
.esempio__msg--staff .esempio__chi { color: var(--oro-deep) !important; }

/* il promemoria nel telefono: il giorno scelto in velluto bordeaux, la notifica in velluto panna */
.cal__griglia .cal__giorno--si::after { border: 0; z-index: -1;
  background: radial-gradient(120% 140% at 20% 0%, #8a2540 0%, var(--bordeaux) 45%, var(--bordeaux-deep) 100%);
  box-shadow: inset 0 0 0 3px var(--bordeaux), inset 0 0 0 4px var(--oro-light); }
.cal__griglia .cal__giorno--si { z-index: 0; isolation: isolate; }
.cal.scelto .cal__giorno--si { color: var(--oro-light); }
.esempio--cal .notifica__box { border-radius: 0; border: 1.5px solid var(--bordeaux);
  background: radial-gradient(120% 140% at 20% 0%, #fffdf8 0%, #f6efe2 45%, #ebdfc9 100%); }
.notifica__app { font-weight: 700; }
.esempio--cal .idee__riga img { border-radius: 0; border: 1.5px solid var(--bordeaux); }
@media (prefers-reduced-motion: reduce) { .quiz__risposte span, .quiz__risposte span::before, .quiz__risposte span::after { transition: none; } }
/* correzioni: la cornice d oro sottile dentro il velluto, il 14 leggibile */
.quiz__risposte span::after { box-shadow: none; outline: 1px solid var(--oro-light); outline-offset: -7px; }
.esempio .cal.scelto .cal__griglia .cal__giorno--si { color: var(--oro-light) !important; }
.cal__griglia .cal__giorno--si::after { box-shadow: none; outline: 1px solid var(--oro-light); outline-offset: -4px; }

/* l esempio del Gift Finder con la C (03/10): niente giro; la fascia si
   ispessisce con un rimbalzo e la tessera si alza, poi il velluto */
.quiz__risposte span::before { clip-path: none; border: 0; box-shadow: inset 0 0 0 0 var(--bordeaux);
  transition: box-shadow .6s cubic-bezier(.34, 1.56, .64, 1); }
.esempio__passo.scelto .quiz__risposte .si::before { clip-path: none; box-shadow: inset 0 0 0 3.4px var(--bordeaux); }
.quiz__risposte span { transition: color .4s .55s, box-shadow .5s .55s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.esempio__passo.scelto .quiz__risposte .si { transform: translateY(-3px) !important; }
.quiz__risposte span::after { transition: opacity .45s .55s; }

/* ============================================================
   TELEFONO (03/10, richiesta di Francesco). Le regole degli e-commerce che
   funzionano su telefono: meno altezza per sezione, le collezioni in un
   carosello da scorrere col pollice con la scheda dopo che si affaccia,
   bottoni piu piccoli su una riga, gli esempi "come funziona" compatti.
   ============================================================ */
@media (max-width: 700px) {
  /* il ritmo: sezioni meno alte */
  main .section-pad { padding-block: clamp(3.2rem, 8vh, 4.6rem); }
  .sezione__titolo, .giftcta__title { margin-bottom: 1.4rem !important; }

  /* bottoni: un filo piu piccoli, sempre su una riga */
  main .btn, .apertura__btn { font-size: 0.8rem; letter-spacing: 0.15em; padding: 0.95em 1.7em; white-space: nowrap; }

  /* COME FUNZIONA, piu compatto */
  #giftfinder-teaser .esempio--quiz .esempio__scheda { padding: 1.2rem 1.1rem 1rem; }
  .esempio .esempio__etichetta { font-size: 0.66rem !important; letter-spacing: 0.16em; }
  .quiz__avanza { font-size: 0.66rem; gap: 0.7rem; margin-bottom: 0.7rem !important; }
  .quiz__domanda { font-size: 1.4rem !important; margin-bottom: 0.8rem !important; }
  .quiz__risposte { gap: 0.45rem; }
  .quiz__risposte span { font-size: 1rem; padding: 0.62rem 0.85rem; }
  .proposte__riga { gap: 0.5rem; font-size: 0.9rem; }
  .proposte__riga small { font-size: 0.58rem; letter-spacing: 0.12em; }
  #giftfinder-teaser .esempio__nota, .esempio .esempio__nota { font-size: 0.88rem !important; margin-top: 0.6rem !important; }
  .esempio--sotto { gap: 1rem; }

  /* la chat dello staff */
  .cartellini--staff .cartellino.vetro { padding: 1.5rem 1.2rem 1.3rem; }
  .cartellino h3 { font-size: 1.55rem !important; }
  .cartellino > p:not(.cartellino__etichetta) { font-size: 1rem; margin-bottom: 1.1rem; }
  .cartellino .esempio__scheda { padding: 0.9rem 0.9rem 0.8rem !important; }
  .esempio__msg { font-size: 0.95rem; padding: 0.55em 0.75em; }

  /* il telefono del promemoria, piu piccolo */
  .esempio.esempio--cal .esempio__scheda { width: min(18.5rem, 82vw); padding: 2.2rem 1rem 1.2rem; border-width: 7px; border-radius: 2.2rem; }
  .esempio--cal .cal__griglia { font-size: 0.86rem; gap: 0.1rem; }
  .esempio--cal .cal__mese { font-size: 1.25rem !important; }

  /* COSA VUOI REGALARE: carosello, la seconda scheda si affaccia */
  .vetri { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.9rem;
    margin-inline: calc(-1 * var(--pad-x)); padding: 0.4rem var(--pad-x) 1.4rem; scroll-padding-inline: var(--pad-x);
    scrollbar-width: none; perspective: none; }
  .vetri::-webkit-scrollbar { display: none; }
  .vetri .vetro { flex: 0 0 80%; scroll-snap-align: start; padding: 1.1rem 1.1rem 1.3rem; transform: none !important; }
  .vetri .vetro__img { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
  .vetri .vetro h3 { font-size: 1.4rem; }
  .vetri .vetro > p { font-size: 0.98rem; margin-bottom: 1rem; }

  /* I PIU SCELTI: il bottone su una riga */
  .scelto.vetro { padding: 0.8rem 0.8rem 1rem; }
  .scelto__azione { font-size: 0.68rem; letter-spacing: 0.1em; padding: 0.65rem 0.4rem; white-space: nowrap; }
}
.cartellino__etichetta { color: #765720 !important; font-weight: 700 !important; }

/* Newsletter (07/10): link all'informativa e messaggi dopo l'invio */
.footer .newsletter__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer .newsletter__note[data-stato="ok"] { color: var(--bordeaux); }
.footer .newsletter__note[data-stato="errore"] { color: var(--bordeaux); font-style: italic; }
.footer .newsletter button:disabled { opacity: 0.4; }

/* ---------- GALLERIA "opere appese al muro" (dalla prova del 12/10, nella home dal 14/10) ---------- */
/* La galleria, incastrata a zig-zag.
   Griglia a 12 colonne come la loro, righe da 1vw: ogni quadro parte mentre
   quello accanto e ancora a meta. Misure loro: orizzontali 6 colonne 16:9
   (~25vw di altezza), verticali 4 colonne 3:4 (~38vw); +3 righe per il nome. */
.galleria { padding: 18vh var(--pad-x) 16vh; position: relative; }
.galleria__titolo { margin: 0 0 9vh calc((100% + 2vw) / 12); font-size: clamp(2.6rem, 5.4vw, 5.4rem); }
.galleria__griglia { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; grid-auto-rows: 1vw; }
.opera { position: relative; display: block; color: var(--ink); align-self: start; }
.opera__quadro { position: relative; display: block; width: 100%; }
.opera__quadro img.media { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
/* 15/10: sul telefono la foto e un immagine vera, senza effetto (media.js) */
.opera__quadro img.media--ferma { opacity: 1; object-fit: cover; }
/* il nome del quadro in oro, piu grande (Francesco 12/10). L oro scuro: il chiaro sul cipria non si legge */
.opera__nome { display: block; margin-top: 1.2rem; font-family: var(--serif); font-size: clamp(1.05rem, 1.35vw, 1.45rem); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro-deep); }
.opera--1 { grid-column: 2 / 8;  grid-row: 1 / span 28; }  .opera--1 .opera__quadro { aspect-ratio: 16 / 9; }
.opera--2 { grid-column: 9 / 13; grid-row: 12 / span 41; } .opera--2 .opera__quadro { aspect-ratio: 3 / 4; }
.opera--3 { grid-column: 2 / 8;  grid-row: 36 / span 28; }   /* come le rose, sotto di loro e accanto alle peonie: in mezzo una colonna d aria */ .opera--3 .opera__quadro { aspect-ratio: 16 / 9; }
.opera--4 { grid-column: 9 / 13; grid-row: 60 / span 41; } .opera--4 .opera__quadro { aspect-ratio: 3 / 4; }
/* 13/10: le impronte riprendono lo zig-zag a sinistra, partono a meta delle mani */
.opera--5 { grid-column: 2 / 6;  grid-row: 84 / span 41; } .opera--5 .opera__quadro { aspect-ratio: 3 / 4; }
/* la chiusura: accanto alle impronte, rimanda al catalogo (14/10 tolte le rose bianche, torna qui) */
.galleria__fine { grid-column: 2 / 8; grid-row: 74 / span 20; align-self: start; }
.galleria__fine-titolo { font-size: clamp(2.2rem, 3.6vw, 3.8rem); line-height: 1.05; margin: 0 0 2.4rem; }
@media (max-width: 860px) {
  /* 18/10, Francesco: sul telefono i quadri erano attaccati. Come Immersive Garden su
     telefono (pochi media, tanto muro fra uno e l altro): fra un quadro e l altro quasi
     un quarto di schermo di muro libero, dove il rilievo respira */
  .galleria { padding: 14vh var(--pad-x) 18vh; }
  .galleria__fine { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 6vh; }
  .galleria__titolo { margin-left: 0; }
  .galleria__griglia { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 22vh; }
  .opera { grid-column: 1 / -1 !important; grid-row: auto !important; }
  /* 15/10: le orizzontali a tutta larghezza in 4:3 (in 4:5 Dipingi perdeva
     lui, che sta al 20% della foto), le verticali al 78% nel loro 3:4,
     una a destra e una a sinistra: lo zig-zag resta */
  .opera--1 .opera__quadro, .opera--3 .opera__quadro { aspect-ratio: 4 / 3; }
  .opera--2, .opera--4 { width: 78%; } .opera--2 { justify-self: end; }
  .opera .opera__nome { letter-spacing: 0.16em; padding: 1rem 1.1rem; }
}

/* 14/10: il nome del quadro su una lastra di vetro opaco, come le tessere
   "vetro" della home di prima. Il vetro sta solo sotto la foto: la foto la
   disegna il motore WebGL dietro la pagina, un vetro sopra la sfocherebbe. */
.opera__nome { margin-top: 0; padding: 1.15rem 1.3rem 1.2rem;
  background: rgba(255, 253, 248, 0.42);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7); border-top: 0;
  box-shadow: 0 30px 60px -40px rgba(74, 12, 27, 0.35);
  transition: background 0.6s var(--ease-out, ease); }
.opera:hover .opera__nome { background: rgba(255, 253, 248, 0.62); }
/* 14/10: si capisce che porta al prodotto. A destra della lastra il prezzo e
   una freccia in un cerchio bordeaux; al passaggio il cerchio si riempie e la
   freccia scivola avanti. Tutto il quadro porta alla scheda. */
.opera { cursor: pointer; }
.opera__nome { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.opera__vai { display: inline-flex; align-items: center; gap: 0.8rem; flex: none;
  font-family: var(--serif); font-size: clamp(0.95rem, 1.1vw, 1.15rem); font-weight: 600;
  letter-spacing: 0.04em; text-transform: none; color: var(--bordeaux); }
.opera__freccia { display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%;
  border: 1px solid var(--bordeaux); font-size: 1em; line-height: 1;
  transition: background 0.5s var(--ease-out, ease), color 0.5s var(--ease-out, ease), transform 0.6s cubic-bezier(.34,1.56,.64,1); }
.opera:hover .opera__freccia, .opera:focus-visible .opera__freccia { background: var(--bordeaux); color: var(--bianco, #fff); transform: translateX(0.35rem); }
@media (prefers-reduced-motion: reduce) { .opera:hover .opera__freccia { transform: none; } }
/* 14/10: niente prezzo, solo la freccia, in oro. A riposo ogni tanto spinge
   avanti e torna con un piccolo rimbalzo (invita al clic senza agitarsi);
   al passaggio il cerchio si riempie d oro e la freccia resta avanti.
   Le nostre impronte esce dalla home: "E molto altro" sale accanto a Modellate. */
.opera__freccia { border-color: var(--oro-deep); color: var(--oro-deep); width: 2.6em; height: 2.6em; font-size: 1.05em; }
.opera__freccia::before { content: none; }
.opera__vai { color: var(--oro-deep); }
@keyframes opera-spinta {
  0%, 62%, 100% { translate: 0 0; }
  72% { translate: 0.45rem 0; }
  80% { translate: -0.08rem 0; }
  88% { translate: 0.12rem 0; }
}
.opera__freccia { animation: opera-spinta 3.2s cubic-bezier(.34,1.56,.64,1) infinite; }
.opera--2 .opera__freccia { animation-delay: 0.5s; }
.opera--3 .opera__freccia { animation-delay: 1s; }
.opera--4 .opera__freccia { animation-delay: 1.5s; }
.opera:hover .opera__freccia, .opera:focus-visible .opera__freccia { animation: none; background: var(--oro-deep); color: var(--bianco, #fff); transform: translateX(0.35rem); }
@media (prefers-reduced-motion: reduce) { .opera__freccia { animation: none; } }
/* la lastra sale insieme al bordo basso della foto (--solleva da media.js) */
.opera__nome { transform: translateY(calc(var(--solleva, 0px) * -1)); }

/* 15/10: bottoni piu grandi (Francesco), circa +18% su testo e spazio */
main .btn, .apertura__btn { font-size: 1.12rem; padding: 1.35em 2.6em; }
@media (max-width: 700px) { main .btn, .apertura__btn { font-size: 0.94rem; padding: 1.1em 2em; } }