/* ============================================================
   VALOY — Gift Finder sul muro (03/10)
   Come l esempio a quiz della home, che a Francesco piaceva: una lastra di
   vetro, la barra delle domande, la domanda grande, le risposte a griglia
   con quella scelta piena bordeaux. Le proposte in lastre di vetro.
   ============================================================ */
.con-muro .phero { padding-top: clamp(9rem, 18vh, 12rem); text-align: center; }
.con-muro .phero h1 { font-size: clamp(3rem, 6.4vw, 5.8rem); line-height: 1.02; }
.con-muro .wizard, .con-muro .wizard * { font-family: var(--serif); }

.vetro-gf { max-width: 52rem; padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3.4rem);
  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); }

/* la barra delle domande: un filo che si riempie */
.con-muro .wizard__progress { gap: 0.4rem; margin-bottom: 0.9rem; }
.con-muro .wizard__progress i { flex: 1; max-width: 5rem; height: 2px; background: rgba(107, 18, 40, 0.14); }
.con-muro .wizard__progress i.done { background: var(--bordeaux); }
.con-muro .wizard__step-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.22em; color: var(--oro-deep); }

.con-muro .wizard__q { font-size: clamp(2rem, 3.6vw, 3rem); font-style: italic; font-weight: 500; line-height: 1.12; margin: 1rem 0 2rem; }
.con-muro .wizard__hint { font-size: 1.05rem; color: var(--ink-soft); margin: -1.2rem 0 1.6rem; }

/* le risposte a griglia, come nell esempio della home */
.con-muro .wizard__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.con-muro .chip { font-family: var(--serif); font-size: 1.22rem; text-align: left; padding: 1rem 1.2rem; border-radius: 0;
  background: rgba(248, 244, 235, 0.7); border: 1px solid rgba(107, 18, 40, 0.22); color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out); }
.con-muro .chip:hover { border-color: var(--bordeaux); color: var(--bordeaux); transform: none; box-shadow: none; }
.con-muro .chip.selected { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--bianco); transform: scale(1.02); }
.con-muro .wizard__other { border: 1.5px solid var(--bordeaux); border-radius: 999px; background: var(--bg-alt); padding: 0.85rem 1.4rem;
  font-family: var(--serif); font-size: 1.15rem; width: 100%; }
@media (max-width: 600px) { .con-muro .wizard__options { grid-template-columns: 1fr; } }

/* bottoni (Continua, Indietro, Aggiungi...) scolpiti come in home */
.con-muro main .btn.solid, .con-muro main .btn.ghost { background: var(--bg-alt); color: var(--bordeaux); border: 1.5px solid var(--bordeaux) !important; border-radius: 999px;
  font-family: var(--serif); font-weight: 600; letter-spacing: 0.16em;
  box-shadow: 6px 6px 14px rgba(140, 110, 90, 0.3), -6px -6px 14px rgba(255, 255, 255, 0.9); }
.con-muro main .btn.solid::before, .con-muro main .btn.ghost::before { display: none; }
.con-muro main .btn.solid:hover, .con-muro main .btn.ghost:hover { background: var(--bg-alt); color: var(--bordeaux);
  box-shadow: 10px 12px 24px rgba(140, 110, 90, 0.35), -8px -8px 18px rgba(255, 255, 255, 0.95); }
.con-muro main .btn.ghost { box-shadow: 6px 6px 14px rgba(140, 110, 90, 0.25), -6px -6px 14px rgba(255, 255, 255, 0.9); border-color: rgba(107, 18, 40, 0.4) !important; }

/* le tre proposte: lastre di vetro, la Scelta VALOY con il filo bordeaux */
.con-muro .gf-result .wizard__q { margin-top: 0; }
.con-muro .gf-tier { background: rgba(255, 253, 248, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 30px 60px -40px rgba(74, 12, 27, 0.35); border-radius: 0; }
.con-muro .gf-tier:hover { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 30px 60px -36px rgba(74, 12, 27, 0.45); }
.con-muro .gf-tier--star { border: 1.5px solid var(--bordeaux); box-shadow: none; }
.con-muro .gf-tier__badge { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; color: var(--oro-deep); border: 0; padding: 0; background: none; }
.con-muro .gf-tier--star .gf-tier__badge { color: var(--bordeaux); background: none; }
.con-muro .gf-tier__tagline { font-size: 1.4rem; }
.con-muro .gf-comp span { font-size: 1.1rem; }
.con-muro .gf-comp b { font-size: 1.15rem; }
.con-muro .gf-tier__total b { font-size: 1.7rem; font-weight: 500; }
.con-muro .gf-tier__total span { font-size: 0.85rem; color: var(--ink-soft); }
.con-muro .gf-tier__grande { font-size: 1.1rem; }
.con-muro .gf-warn { font-family: var(--serif); font-size: 1.1rem; }
.con-muro .result__restart { font-family: var(--serif); font-size: 1rem; color: var(--oro-deep); }
.con-muro .result__title { font-size: 1.6rem; }

/* ===== LE SCELTE (03/10, scelta di Francesco): VELLUTO in chiaro =====
   Tessere panna vellutate con la scritta oro; passando si alzano e compare la
   cornice d oro interna; la scelta diventa velluto bordeaux con la scritta oro
   chiaro e la cornice piena. Vale per Gift Finder e appuntamenti. */
.con-muro .chip { position: relative; border: 0; border-radius: 0; padding: 1.35rem 1.4rem; font-size: 1.3rem; font-weight: 500;
  color: var(--oro-deep); text-align: left;
  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: transform .45s var(--ease-out), box-shadow .45s var(--ease), color .35s; }
.con-muro .chip::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201, 170, 106, 0); pointer-events: none;
  transition: border-color .4s, inset .5s var(--ease-out); }
.con-muro .chip:hover { transform: translateY(-2px); color: #7f6229; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 34px -22px rgba(74,12,27,.5); }
.con-muro .chip:hover::after { border-color: rgba(201, 170, 106, 0.6); }
.con-muro .chip.selected { transform: none; color: var(--oro-light);
  background: radial-gradient(120% 140% at 20% 0%, #8a2540 0%, var(--bordeaux) 45%, var(--bordeaux-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.con-muro .chip.selected::after { border-color: var(--oro-light); inset: 7px; }
/* contorno bordeaux sulle tessere (03/10) */
.con-muro .chip { border: 1.5px solid var(--bordeaux); }
.con-muro .chip:hover { border-color: var(--bordeaux); }
.con-muro .chip.selected { border-color: var(--bordeaux-deep); }
/* passaggio del mouse (03/10): la fascia tra il filo bordeaux e la cornice
   d oro si riempie di bordeaux, dall esterno verso l interno */
.con-muro .chip { box-shadow: inset 0 0 0 0 var(--bordeaux), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 30px -22px rgba(74, 12, 27, 0.45);
  transition: transform .45s var(--ease-out), box-shadow .55s var(--ease-out), color .35s; }
.con-muro .chip::after { inset: 6px; }
.con-muro .chip:hover { box-shadow: inset 0 0 0 6px var(--bordeaux), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 34px -22px rgba(74, 12, 27, 0.5); }
.con-muro .chip:hover::after { border-color: var(--oro); transition-delay: .15s; }
.con-muro .chip.selected, .con-muro .chip.selected:hover { box-shadow: inset 0 0 0 0 var(--bordeaux), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.con-muro .chip.selected::after { inset: 7px; transition-delay: 0s; }
@media (hover: none) { .con-muro .chip:hover:not(.selected) { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 30px -22px rgba(74,12,27,.45); transform: none; } .con-muro .chip:hover:not(.selected)::after { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .con-muro .chip, .con-muro .chip::after { transition: none; } }
/* passaggio del mouse, versione caricamento (03/10): la fascia bordeaux parte
   dal punto in cui entra il mouse e fa il giro della tessera fino a chiudersi.
   L angolo di partenza (--da) lo mette js/scelte.js. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.con-muro .chip:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 34px -22px rgba(74, 12, 27, 0.5); }
.con-muro .chip::before { content: ""; position: absolute; inset: 0; padding: 6px; pointer-events: none;
  background: conic-gradient(from var(--da, 0deg), var(--bordeaux) var(--giro), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: --giro .55s cubic-bezier(.5, 0, .75, 0); }
.con-muro .chip:hover::before { --giro: 360deg; transition: --giro .9s cubic-bezier(.65, 0, .25, 1); }
.con-muro .chip:hover::after { transition-delay: 1s; }
.con-muro .chip.selected::before { opacity: 0; }
@media (hover: none) { .con-muro .chip::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .con-muro .chip::before { transition: none; } }
/* il giro col tracciato (03/10): sostituisce il cono qui sopra, cosi la fascia
   corre a velocita costante lungo il bordo e la punta resta dritta */
.con-muro .chip::before { display: none; }
.con-muro .chip .giro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.con-muro .chip .giro path { fill: none; stroke: var(--bordeaux); stroke-width: 6; stroke-linejoin: miter;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.5, 0, .75, 0); }
.con-muro .chip:hover .giro path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.55, .1, .25, 1); }
.con-muro .chip.selected .giro { display: none; }
@media (hover: none) { .con-muro .chip .giro { display: none; } }
@media (prefers-reduced-motion: reduce) { .con-muro .chip .giro path { transition: none; } }
/* giro doppio (03/10): due tracciati dal punto del mouse, uno orario e uno
   antiorario; ognuno fa meta giro e si incontrano dal lato opposto */
.con-muro .chip:hover .giro path { stroke-dashoffset: 0.5; transition: stroke-dashoffset .9s cubic-bezier(.55, .1, .25, 1); }
.con-muro .chip:hover::after { transition-delay: .75s; }
/* fascia del giro dimezzata (03/10): 3px invece di 6, la cornice d oro la segue */
.con-muro .chip .giro path { stroke-width: 3; }
.con-muro .chip::after { inset: 3px; }
.con-muro .chip.selected::after { inset: 7px; }

/* scritte piccole piu scure sulle pagine col muro (03/10): etichette d oro,
   righe secondarie e segnaposto si leggevano poco sul panna */
body.con-muro { --oro-deep: #765720; --ink-soft: rgba(36, 20, 26, 0.92); --ink-faint: rgba(36, 20, 26, 0.68); }
.con-muro .field label, .con-muro .wizard__step-label, .contatti__info .info-block h4, .con-muro .idea-app__dove { font-weight: 700; }

/* ===== LA C (03/10, scelta da Francesco): al passaggio il filo bordeaux si
   ispessisce a molla (js/scelte.js, Motion), dentro il filo d oro a 4.5px dal
   bordo, la tessera si alza e si inclina verso la mano. Il giro e tolto. */
.con-muro .chip .giro { display: none !important; }
.con-muro .wizard__options, .contatti .wizard__options { perspective: 900px; }
.con-muro .chip { will-change: transform; }
.con-muro .chip:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 30px -22px rgba(74, 12, 27, 0.45); }
.con-muro .chip::after { inset: 4.5px; border-color: rgba(201, 170, 106, 0); transition: border-color .35s .08s, inset .4s var(--ease-out); }
.con-muro .chip.dentro:not(.selected)::after { border-color: var(--oro); transition-delay: .08s; }
.con-muro .chip:hover::after { transition-delay: .08s; }
.con-muro .chip.selected::after { inset: 7px; border-color: var(--oro-light); transition-delay: 0s; }
.con-muro .chip.selected:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
@media (hover: none) { .con-muro .chip::after { border-color: transparent; } .con-muro .chip.selected::after { border-color: var(--oro-light); } }
/* la nota quando le proposte a tema non bastano (03/10) */
.con-muro .gf-nota { max-width: 44rem; margin: 0 auto 1.6rem; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--bordeaux); }