/* Silk Road: stili del negozio e delle sezioni che scorrono (store, prodotto, progetti, studio, supporto,
   legale, checkout), del carrello e del piede. Stessa palette e stessi vetri della home. */
[hidden] { display: none !important; }
.st-pagina { padding-bottom: 70px; }
.st-pagina.stretta { max-width: 1000px; }
.st-eti { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin-bottom: 14px; }
.azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.st-btn { justify-content: center; white-space: nowrap; }
.st-btn svg { flex: none; }
.st-btn.pieno.dentro { background: rgba(217, 181, 108, .14); color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro-2); }
.st-btn:disabled { opacity: .4; cursor: not-allowed; }
.prezzo s, .pr-prezzo s { color: rgba(239, 233, 223, .4); font-size: .72em; margin-left: 6px; }

/* ---------------- comparse al passaggio */
.rivela, .st-lista li.rivela { opacity: 0; transform: translateY(22px); transition: opacity .9s ease var(--rit, 0s), transform 1.1s var(--ease-out) var(--rit, 0s); }
.rivela.visto, .st-lista li.rivela.visto { opacity: 1; transform: none; }
.st-lista li.rivela.spenta { opacity: .28; }
@media (prefers-reduced-motion: reduce) { .rivela, .st-lista li.rivela { transform: none !important; transition: opacity .3s !important; } }

/* ---------------- angoli: sulle pagine che scorrono restano marchio, navigazione e audio */
body.scorre-su .basso-c, body.scorre-su .basso-sx .pill, body.scorre-su .basso-dx { opacity: 0 !important; pointer-events: none; }
.apri-carrello svg { width: 19px; height: 19px; }
.apri-carrello .conta { position: absolute; top: -3px; right: -3px; z-index: 2; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--oro); color: #0b0a0e; font-size: 11px; font-weight: 500; display: grid; place-items: center; animation: batti .5s var(--ease-out); }
@keyframes batti { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } }
.st-filtri a { position: relative; padding: 6px 0; font-size: 14px; color: var(--osso-2); transition: color .3s; }
.st-filtri a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.st-filtri a:hover { color: var(--osso); }
.st-filtri a.on { color: var(--osso); } .st-filtri a.on::after { transform: scaleX(1); }
@media (max-width: 1150px) { .nav a { padding: 0 9px; font-size: 17px; } }
#menu { max-height: calc(100vh - 2 * var(--bordo)); overflow-y: auto; scrollbar-width: none; }
#menu li a { padding: 10px 8px; }
#menu .riga [data-conta-carrello] { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--oro); color: #0b0a0e; font-size: 11px; display: grid; place-items: center; }

/* vetro per i pannelli grandi (il .liquido dei pulsanti ha un riflesso a pillola) */
.pannello { position: relative; background: var(--vetro), rgba(10, 11, 22, .5); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--vetro-bordo), 0 24px 70px rgba(0, 0, 0, .35); }
.sup-carta.pannello:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px var(--oro-2), 0 30px 80px rgba(0, 0, 0, .45); }

/* ---------------- testate delle pagine */
.pg-testa { padding-bottom: 38px; border-bottom: 1px solid rgba(239, 233, 223, .14); }
.pg-h { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(56px, 7vw, 124px); letter-spacing: -.035em; line-height: .92; }
.pg-intro { margin: 24px 0 0; max-width: 54ch; font-size: 16px; line-height: 1.6; color: var(--osso-2); }
.sh-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: end; }
.sh-testa .pg-intro { margin: 0; }

/* ---------------- store */
.sh-evid .img { position: relative; box-shadow: 0 40px 100px rgba(0, 0, 0, .5); }
.sh-evid .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 20%, transparent 70%, rgba(0, 0, 0, .55)); pointer-events: none; }
.sh-evid-eti { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 233, 223, .85); }
.sh-barra { position: sticky; top: calc(var(--bordo) + 66px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 40px; padding: 12px 14px 12px 18px; border-radius: 22px;
  background: var(--vetro), rgba(10, 11, 22, .66); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--vetro-bordo), 0 20px 50px rgba(0, 0, 0, .35); }
.sh-cerca { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .18); color: var(--osso-2); transition: box-shadow .3s; }
.sh-cerca:focus-within { box-shadow: inset 0 0 0 1px var(--oro); color: var(--oro); }
.sh-cerca input { width: 190px; border: 0; outline: 0; background: none; color: var(--osso); font: inherit; font-size: 14px; }
.sh-cerca input::placeholder { color: rgba(239, 233, 223, .45); }
.sh-cerca input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.sh-opz { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.sh-fw { display: flex; gap: 4px; flex-wrap: wrap; }
.sh-fw button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--osso-2); box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .14); transition: color .3s, background .3s, box-shadow .3s; }
.sh-fw button:hover { color: var(--osso); }
.sh-fw button.on { background: var(--osso); color: #0b0a0e; box-shadow: none; }
.sh-ord { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--osso-2); }
.sh-ord select { -webkit-appearance: none; appearance: none; height: 30px; padding: 0 28px 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; color: var(--osso); cursor: pointer;
  background: rgba(239, 233, 223, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23efe9df' stroke-width='1.3'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .14); }
.sh-ord select option { background: #10132a; color: var(--osso); }
.sh-vista { display: flex; gap: 4px; }
.sh-vista button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--osso-2); box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .14); transition: color .3s, box-shadow .3s; }
.sh-vista button.on { color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
.sh-conta { display: flex; justify-content: space-between; align-items: center; padding: 26px 0 18px; font-size: 13px; color: var(--osso-2); }
.sh-conta button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--oro); }
.nessuno { display: grid; justify-items: center; gap: 18px; padding: 80px 0; text-align: center; color: var(--osso-2); font-size: 16px; }
.nessuno p { margin: 0; }

/* schede prodotto nella griglia */
.griglia-carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 28px; }
.carta { display: flex; flex-direction: column; gap: 16px; }
.carta-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #0e1020; box-shadow: 0 24px 60px rgba(0, 0, 0, .38); }
.carta-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.88) brightness(.9); transition: transform 1.4s var(--ease-out), filter .8s; }
.carta-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5, 6, 12, .7)); pointer-events: none; }
.carta:hover .carta-img img { transform: scale(1.06); filter: none; }
.carta-vedi { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--ease-out); }
.carta:hover .carta-vedi { opacity: 1; transform: none; }
.chip { position: absolute; top: 14px; left: 14px; z-index: 1; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; color: var(--oro);
  background: rgba(10, 11, 22, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(217, 181, 108, .45); }
.chip.saldo { color: #fff; background: rgba(163, 22, 42, .8); box-shadow: none; }
.carta-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.fws { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.fw { font-size: 10px; letter-spacing: .04em; text-transform: none; padding: 3px 7px; border-radius: 4px; color: var(--osso-2); box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .18); }
.carta-info { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
/* titolo: massimo 2 righe, stessa altezza in tutte le schede (così prezzi e bottoni restano allineati) */
.carta-nome { font-family: var(--f-serif); font-size: clamp(21px, 1.6vw, 26px); line-height: 1.18; letter-spacing: -.01em; transition: color .35s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: calc(2em * 1.18); }
.carta:hover .carta-nome { color: var(--oro); }
.carta-breve { margin: 0; font-size: 14px; line-height: 1.55; min-height: calc(2em * 1.55); color: var(--osso-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carta-piede { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(239, 233, 223, .12); }
.carta .prezzo { font-size: 18px; letter-spacing: -.01em; }
.carta-agg { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .3); transition: background .35s, color .35s, box-shadow .35s; }
.carta-agg:hover { background: var(--oro); color: #0b0a0e; box-shadow: none; }
.carta-agg.dentro { color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro-2); }
.carta-agg.dentro:hover { background: rgba(217, 181, 108, .14); color: var(--oro); }

/* perche' comprare qui + commissioni */
.vantaggi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 110px; border-block: 1px solid rgba(239, 233, 223, .14); }
.vant { padding: 36px 28px 38px 0; }
.vant + .vant { padding-left: 28px; border-left: 1px solid rgba(239, 233, 223, .1); }
.vant-ic svg { width: 26px; height: 26px; color: var(--oro); }
.vant h4 { margin: 18px 0 8px; font-family: var(--f-serif); font-weight: 400; font-size: 27px; letter-spacing: -.01em; }
.vant p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--osso-2); }
.su-misura { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-top: 110px; padding: clamp(30px, 4vw, 56px); border-radius: 28px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(163, 22, 42, .3), transparent 55%), radial-gradient(100% 120% at 100% 100%, rgba(185, 194, 242, .12), transparent 60%), rgba(12, 13, 28, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .12), 0 40px 100px rgba(0, 0, 0, .4); }
.su-misura h2 { margin: 0 0 14px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 60px); line-height: 1; letter-spacing: -.02em; max-width: 18ch; }
.su-misura p { margin: 0; max-width: 50ch; line-height: 1.6; color: var(--osso-2); }

/* ---------------- scheda prodotto */
.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 12.5px; color: var(--osso-2); }
.briciole a:hover { color: var(--oro); }
.briciole i { font-style: normal; opacity: .4; }
.briciole span { color: var(--osso); }
.pr-alto { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pr-media { position: sticky; top: calc(var(--bordo) + 92px); display: grid; gap: 16px; }
.pr-img { position: relative; margin: 0; aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: #0e1020; box-shadow: 0 40px 110px rgba(0, 0, 0, .55); }
.pr-img img { width: 100%; height: 100%; object-fit: cover; display: block; animation: lento 26s ease-in-out infinite alternate; }
@keyframes lento { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.pr-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 16%, transparent 74%, rgba(0, 0, 0, .55)); }
.pr-n { position: absolute; right: 18px; bottom: 16px; z-index: 1; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 233, 223, .85); }
.pr-video { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.pr-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.pr-compra { display: grid; gap: 20px; padding: 34px; border-radius: 26px;
  background: var(--vetro), rgba(10, 11, 22, .6); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--vetro-bordo), 0 30px 80px rgba(0, 0, 0, .4); }
.pr-compra .st-eti { margin: 0; }
.pr-h { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(46px, 4.6vw, 78px); line-height: .95; letter-spacing: -.03em; }
.pr-breve { margin: 0; font-size: 15px; line-height: 1.6; color: var(--osso-2); }
.pr-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; font-size: 36px; letter-spacing: -.02em; }
.pr-prezzo small { font-size: 12px; letter-spacing: 0; color: var(--osso-2); }
.pr-licenze { display: grid; gap: 8px; }
.pr-lic { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .16); transition: box-shadow .3s, background .3s; }
.pr-lic input { position: absolute; opacity: 0; pointer-events: none; }
.pr-lic:hover { box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .35); }
.pr-lic.on { background: rgba(217, 181, 108, .08); box-shadow: inset 0 0 0 1px var(--oro); }
.pr-lic:has(input:focus-visible) { outline: 1px solid var(--luna); outline-offset: 3px; }
.pr-lic-testa { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.pr-lic-testa b { font-weight: 500; }
.pr-lic.on .pr-lic-testa b { color: var(--oro); }
.pr-lic-nota { font-size: 12.5px; line-height: 1.45; color: var(--osso-2); }
.pr-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-azioni .st-btn { height: 52px; }
.pr-azioni > :only-child { grid-column: 1 / -1; }
.pr-garanzie { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--osso-2); }
.pr-garanzie li { display: flex; align-items: center; gap: 10px; }
.pr-garanzie svg { color: var(--oro); }
.pr-fatti { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; border-top: 1px solid rgba(239, 233, 223, .12); }
.pr-fatti div { padding: 12px 0; border-bottom: 1px solid rgba(239, 233, 223, .08); }
.pr-fatti dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(239, 233, 223, .5); }
.pr-fatti dd { margin: 5px 0 0; font-size: 14px; }
.pr-sez { margin-top: 120px; }
.pr-sez-h { margin: 0 0 34px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(40px, 4vw, 66px); line-height: 1; letter-spacing: -.025em; }
.pr-sez:has(> .pr-testo) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px; }
.pr-testo p { margin: 0 0 20px; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.55; letter-spacing: -.005em; }
.pr-testo p + p { color: var(--osso-2); font-size: clamp(16px, 1.25vw, 18px); }
.pr-car { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; border-top: 1px solid rgba(239, 233, 223, .14); }
.pr-car-v { padding: 30px 0 36px; border-bottom: 1px solid rgba(239, 233, 223, .1); }
.pr-car-v .n { font-size: 12px; letter-spacing: .1em; color: var(--oro); }
.pr-car-v h4 { margin: 14px 0 10px; font-family: var(--f-serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.pr-car-v p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--osso-2); }
.pr-due { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.pr-elenco { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(239, 233, 223, .14); }
.pr-elenco li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid rgba(239, 233, 223, .08); font-size: 15px; }
.pr-elenco li::before { content: ''; position: absolute; left: 0; top: 25px; width: 12px; height: 1px; background: var(--oro); }
.pr-guida { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--oro); }
.pr-log { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(217, 181, 108, .35); }
.pr-log li { position: relative; display: grid; grid-template-columns: 110px 140px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 16px 0 16px 28px; }
.pr-log li::before { content: ''; position: absolute; left: -4.5px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 5px rgba(217, 181, 108, .14); }
.pr-log .v { font-family: var(--f-serif); font-size: 24px; }
.pr-log .d { font-size: 13px; color: var(--osso-2); }
.pr-log .t { font-size: 15px; }
.pr-simili-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.pr-simili-testa a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--oro); }
.pr-barra { display: none; }

/* domande frequenti */
.faq { border-top: 1px solid rgba(239, 233, 223, .14); }
.faq details { border-bottom: 1px solid rgba(239, 233, 223, .12); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--f-serif); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.01em; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro); }
.segno { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .3); color: var(--osso); transition: background .35s, color .35s, box-shadow .35s; }
.segno::before, .segno::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.segno::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .45s var(--ease); }
.faq details[open] .segno { background: var(--oro); color: #0b0a0e; box-shadow: none; }
.faq details[open] .segno::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details p { margin: 0 0 28px; max-width: 70ch; font-size: 15.5px; line-height: 1.7; color: var(--osso-2); }

/* ---------------- progetti: lista a sinistra, stendardi nella stanza a destra */
.pj-velo { background: linear-gradient(90deg, rgba(5, 6, 12, .9) 0%, rgba(5, 6, 12, .72) 36%, rgba(5, 6, 12, .12) 66%, rgba(5, 6, 12, 0) 100%); }
.st-pagina.pj-pagina { max-width: 720px; margin: 0; }
.pj-filtri { margin-top: 30px; }
.pj-lista { list-style: none; margin: 18px 0 0; padding: 0; }
.pj { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 30px 0; border-bottom: 1px solid rgba(239, 233, 223, .12); }
.pj.visto { transition: opacity .5s, transform 1.1s var(--ease-out) var(--rit, 0s); }
.pj.spenta { opacity: .22 !important; }
.pj-n { font-family: var(--f-serif); font-size: 36px; line-height: 1; color: var(--oro); }
.pj-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pj h3 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(34px, 3vw, 50px); line-height: 1; letter-spacing: -.02em; transition: color .35s, transform .6s var(--ease-out); }
.pj[data-fuoco] { cursor: default; }
.pj[data-fuoco]:hover h3 { color: var(--oro); font-style: italic; transform: translateX(6px); }
.pj-stato { padding: 6px 11px; border-radius: 999px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px currentColor; }
.pj-stato.dev { color: var(--oro); }
.pj-stato.soon { color: var(--luna); }
.pj-stato.released { color: #a9d8b0; }
.pj-tipo { display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--osso-2); }
.pj p { margin: 14px 0 0; max-width: 56ch; line-height: 1.6; color: var(--osso-2); }
.pj-barra { max-width: 420px; height: 2px; margin-top: 20px; border-radius: 2px; overflow: hidden; background: rgba(239, 233, 223, .14); }
.pj-barra i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, var(--sangue), var(--oro)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-out) .5s; }
.pj.visto .pj-barra i { transform: scaleX(1); }
.pj-perc { display: block; margin-top: 8px; font-size: 12px; color: var(--osso-2); }
.pj-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--oro); }
.pj-pagina .su-misura { flex-direction: column; align-items: flex-start; }

/* ---------------- studio */
.numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 60px; border-bottom: 1px solid rgba(239, 233, 223, .14); }
.num { padding: 36px 0 40px; }
.num + .num { padding-left: 28px; border-left: 1px solid rgba(239, 233, 223, .1); }
.num b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: clamp(56px, 6vw, 100px); line-height: .9; letter-spacing: -.04em; }
.num span { display: block; margin-top: 14px; font-size: 13px; color: var(--osso-2); }
.manifesto { margin-top: 120px; }
.manifesto p { margin: 0; max-width: 24ch; font-family: var(--f-serif); font-size: clamp(34px, 4.2vw, 68px); line-height: 1.1; letter-spacing: -.02em; }
.manifesto em { color: var(--oro); }
.processo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.processo li { padding-top: 22px; border-top: 1px solid rgba(217, 181, 108, .45); }
.processo .n { font-size: 12px; letter-spacing: .1em; color: var(--oro); }
.processo h4 { margin: 14px 0 10px; font-family: var(--f-serif); font-weight: 400; font-size: 32px; letter-spacing: -.01em; }
.processo p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--osso-2); }
/* studio: competenze */
.discipline { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(239, 233, 223, .14); }
.discipline li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.25fr); gap: 30px; align-items: baseline; padding: 30px 0 32px; border-bottom: 1px solid rgba(239, 233, 223, .1); }
.discipline .n { font-size: 12px; letter-spacing: .1em; color: var(--oro); }
.discipline h4 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.01em; transition: color .35s; }
.discipline li:hover h4 { color: var(--oro); }
.discipline p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--osso-2); }
.disc-tag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.disc-tag span { font-size: 11px; letter-spacing: .04em; padding: 4px 9px; border-radius: 4px; color: var(--osso-2); box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .18); }
/* studio: team */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.tm-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(217, 181, 108, .14), transparent 65%), #0e1020; box-shadow: 0 24px 60px rgba(0, 0, 0, .38); margin-bottom: 18px; }
.tm-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.92); transition: transform 1.4s var(--ease-out), filter .8s; }
.tm:hover .tm-foto img { transform: scale(1.04); filter: none; }
.tm-foto span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-serif); font-style: italic; font-size: 96px; color: rgba(217, 181, 108, .75); }
.tm-ruolo { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.tm h4 { margin: 8px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tm p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--osso-2); }
.tm-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--osso-2); transition: color .3s; }
.tm-link:hover { color: var(--oro); }

/* ---------------- supporto */
.sup-carte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 50px; }
.sup-carta { display: grid; align-content: start; gap: 10px; min-height: 220px; padding: 26px 24px 70px; border-radius: 22px; transition: transform .6s var(--ease-out); }
.sup-carta:hover { transform: translateY(-4px); }
.sup-carta .n { font-size: 12px; letter-spacing: .1em; color: var(--oro); }
.sup-carta h4 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 29px; line-height: 1.05; }
.sup-carta p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--osso-2); }
.sup-carta .fr { position: absolute; right: 22px; bottom: 22px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .3); transition: background .35s, color .35s, box-shadow .35s, transform .5s var(--ease-out); }
.sup-carta:hover .fr { background: var(--oro); color: #0b0a0e; box-shadow: none; transform: rotate(-45deg); }
.passi { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(239, 233, 223, .14); }
.passi li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 1px solid rgba(239, 233, 223, .1); }
.passi .n { font-family: var(--f-serif); font-size: 46px; line-height: .9; color: var(--oro); }
.passi h4 { margin: 0 0 8px; font-family: var(--f-serif); font-weight: 400; font-size: 28px; }
.passi p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.65; color: var(--osso-2); }
code { padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; color: var(--oro); background: rgba(239, 233, 223, .08); }

/* ---------------- legale */
.leg-tab { margin: 30px 0 6px; }
.leg-testo section { padding: 30px 0; border-bottom: 1px solid rgba(239, 233, 223, .1); }
.leg-testo h3 { display: flex; align-items: baseline; gap: 18px; margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.01em; }
.leg-testo h3 span { font-family: var(--f-sans); font-size: 12px; letter-spacing: .1em; color: var(--oro); }
.leg-testo p { margin: 12px 0 0 38px; max-width: 70ch; font-size: 16px; line-height: 1.75; color: var(--osso-2); }
.leg-agg { margin-top: 30px !important; margin-left: 0 !important; font-size: 13px !important; }
.leg-agg a { color: var(--oro); }

/* ---------------- checkout */
.ck { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 30px; }
.ck-passo { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 30px 0; border-bottom: 1px solid rgba(239, 233, 223, .12); }
.ck-passo .n { font-family: var(--f-serif); font-size: 36px; line-height: 1; color: var(--oro); }
.ck-passo h3 { margin: 0 0 10px; font-family: var(--f-serif); font-weight: 400; font-size: 32px; letter-spacing: -.01em; }
.ck-passo p { margin: 0; max-width: 60ch; line-height: 1.6; color: var(--osso-2); }
.ck-righe { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.ck-righe li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 32px; gap: 16px; align-items: center; }
.ck-righe img { width: 76px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.ck-righe a { font-family: var(--f-serif); font-size: 24px; line-height: 1.05; }
.ck-righe a:hover { color: var(--oro); }
.ck-righe span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--osso-2); }
.ck-righe b { font-weight: 400; font-size: 16px; }
.ck-righe .carr-togli { width: 30px; height: 30px; margin: 0; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .2); text-decoration: none; }
.ck-riepilogo { position: sticky; top: calc(var(--bordo) + 92px); display: grid; gap: 18px; padding: 30px; border-radius: 26px; }
.ck-riepilogo h3 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 34px; }
.ck-riepilogo dl { margin: 0; display: grid; }
.ck-riepilogo dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(239, 233, 223, .1); font-size: 14px; }
.ck-riepilogo dd { margin: 0; }
.ck-riepilogo dt { color: var(--osso-2); }
.ck-riepilogo .tot { align-items: baseline; border-bottom: 0; padding-top: 16px; }
.ck-riepilogo .tot dt { color: var(--osso); }
.ck-riepilogo .tot dd { font-size: 30px; letter-spacing: -.02em; }
.ck-ok { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.55; color: var(--osso-2); cursor: pointer; }
.ck-ok input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--oro); }
.ck-ok a, .ck-nota a, .ck-stato a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.ck-paga { width: 100%; height: 54px; font-size: 15px; }
.ck-nota { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--osso-2); }
.ck-stato { margin-top: 30px; color: var(--osso-2); }
.ck-fine { margin-top: 40px; }

/* ---------------- carrello */
.velo-carrello { position: fixed; inset: 0; z-index: 65; background: rgba(3, 4, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
body.carrello .velo-carrello { opacity: 1; visibility: visible; transition: opacity .5s; }
#carrello { position: fixed; z-index: 70; top: var(--bordo); right: var(--bordo); bottom: var(--bordo); width: min(440px, calc(100vw - 2 * var(--bordo))); display: flex; flex-direction: column; padding: 16px; border-radius: 26px; color: var(--osso);
  background: var(--vetro), rgba(10, 11, 22, .72); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px var(--vetro-bordo), 0 30px 80px rgba(0, 0, 0, .5);
  transform: translateX(calc(100% + var(--bordo) + 30px)); visibility: hidden; transition: transform .8s var(--ease), visibility 0s .8s; }
body.carrello #carrello { transform: none; visibility: visible; transition: transform .8s var(--ease), visibility 0s; }
#carrello .capo { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 14px; }
#carrello .eti { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--osso-2); }
#carrello .eti span { margin-left: 6px; color: var(--oro); }
#carrello .chiudi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--vetro-bordo); transition: color .3s, box-shadow .3s, transform .5s var(--ease-out); }
#carrello .chiudi:hover { color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro-2); transform: rotate(90deg); }
#carrello .chiudi svg { width: 10px; height: 10px; }
.carr-lista { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .08); scrollbar-width: thin; }
.carr-voce { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); animation: entraVoce .6s var(--ease-out); }
@keyframes entraVoce { from { opacity: 0; transform: translateX(20px); } }
.carr-img img { width: 78px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.carr-nome { display: block; font-family: var(--f-serif); font-size: 23px; line-height: 1.05; transition: color .3s; }
.carr-nome:hover { color: var(--oro); }
.carr-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--osso-2); }
.carr-togli { margin-top: 8px; font-size: 12px; color: var(--osso-2); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.carr-togli:hover { color: var(--oro); }
.carr-prezzo { font-size: 14.5px; white-space: nowrap; }
.carr-vuoto { flex: 1; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; color: var(--osso-2); }
.carr-vuoto p { margin: 0; font-family: var(--f-serif); font-size: 28px; color: var(--osso); }
.carr-fondo { display: grid; gap: 12px; padding: 16px 6px 4px; }
.carr-tot { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--osso-2); }
.carr-tot b { font-size: 28px; font-weight: 400; letter-spacing: -.02em; color: var(--osso); }
.carr-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--osso-2); }
.carr-vai { height: 54px; font-size: 15px; }
.carr-continua { padding: 6px; font-size: 13px; color: var(--osso-2); transition: color .3s; }
.carr-continua:hover { color: var(--osso); }
.avviso { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--bordo) + 74px); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; font-size: 13.5px; white-space: nowrap;
  background: rgba(10, 11, 22, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px var(--vetro-bordo), 0 20px 50px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .4s, transform .6s var(--ease-out); }
.avviso.su { opacity: 1; transform: translate(-50%, 0); }
.avviso .pallino { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #0b0a0e; }

/* ---------------- piede: compatto, un filetto d'oro, il marchio, i link in una pillola di vetro come la navigazione */
.piede { margin-top: 150px; }
.piede-filo { position: relative; height: 1px; margin-bottom: 56px;
  background: linear-gradient(90deg, transparent, rgba(217, 181, 108, .5) 22%, rgba(217, 181, 108, .5) 47%, transparent 47.6%, transparent 52.4%, rgba(217, 181, 108, .5) 53%, rgba(217, 181, 108, .5) 78%, transparent); }
.piede-filo i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-style: normal; font-size: 12px; line-height: 1; color: var(--oro); }
.piede-alto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 40px; }
.piede-marchio { display: inline-flex; align-items: baseline; font-size: 34px; line-height: 1; letter-spacing: -.045em; }
.piede-marchio span { margin-left: .14em; font-family: var(--f-serif); font-size: 1.06em; letter-spacing: -.02em; }
.piede-marchio sup { margin-left: 2px; font-size: 11px; transform: translateY(-16px); }
.piede-firma p { margin: 12px 0 0; font-size: 13px; color: var(--osso-2); }
.piede-destra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.piede-nav { display: flex; flex-wrap: wrap; align-items: center; min-height: 48px; padding: 0 8px; border-radius: 999px; }
.piede-nav a { padding: 0 14px; line-height: 48px; font-size: 15px; transition: color .35s; }
.piede-nav a:hover { color: var(--oro); }
.piede-discord { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; transition: color .35s, transform .45s var(--ease-out); }
.piede-discord:hover { color: var(--oro); transform: translateY(-1px); }
.piede-basso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(239, 233, 223, .08); font-size: 12px; color: rgba(239, 233, 223, .5); }
.piede-legale { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.piede-legale a { transition: color .3s; }
.piede-legale a:hover { color: var(--osso); }
.piede-basso p { margin: 0; }

/* ---------------- schermi stretti */
@media (max-width: 1100px) {
  .griglia-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-opz { margin-left: 0; }
  .processo, .sup-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sh-testa, .pr-alto, .ck, .pr-due, .pr-sez:has(> .pr-testo) { grid-template-columns: minmax(0, 1fr); }
  .pr-media, .ck-riepilogo { position: static; }
  .pr-car { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discipline li { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 18px; }
  .discipline li > div { grid-column: 2; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vantaggi, .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vant:nth-child(3), .num:nth-child(3) { padding-left: 0; border-left: 0; }
  .vant:nth-child(n + 3) { border-top: 1px solid rgba(239, 233, 223, .1); }
  .pr-log li { grid-template-columns: 90px minmax(0, 1fr); }
  .pr-log .t { grid-column: 1 / -1; }
  .pr-barra { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px;
    background: var(--vetro), rgba(10, 11, 22, .82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--vetro-bordo), 0 20px 50px rgba(0, 0, 0, .5); }
  .pr-barra div { display: grid; min-width: 0; font-size: 14px; }
  .pr-barra b { font-family: var(--f-serif); font-weight: 400; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-pagina="prodotto"] .basso-sx { opacity: 0; pointer-events: none; }
  .pj-velo { background: linear-gradient(90deg, rgba(5, 6, 12, .9), rgba(5, 6, 12, .6)); }
  .st-pagina.pj-pagina { max-width: none; }
}
@media (max-width: 680px) {
  .griglia-carte, .pr-car, .processo, .sup-carte { grid-template-columns: minmax(0, 1fr); }
  .sh-barra { position: static; }
  .sh-cerca, .sh-cerca input { width: 100%; }
  .sh-cerca { flex: 1 1 100%; }
  .ck-righe li { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .ck-righe img { width: 60px; }
  .ck-righe .carr-togli { grid-column: 3; }
  .pr-compra { padding: 24px; }
  .leg-testo p { margin-left: 0; }
  .su-misura { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) { .nav { display: none; } }
/* sui touch lo slider del volume resta aperto solo in home: sulle pagine che scorrono coprirebbe il testo */
@media (hover: none) { body.scorre-su .vol { width: 0; padding: 0; margin-left: 0; opacity: 0; } }

/* ---------------- catalogo dal vivo da Tebex */
.attesa { padding: 110px 0; }
.anello { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .15); border-top: 1px solid var(--oro); animation: gira 1.1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.in-arrivo { display: grid; justify-items: start; gap: 12px; margin-top: 80px; padding: 46px 0; border-block: 1px solid rgba(239, 233, 223, .12); }
.in-arrivo h2 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 58px); line-height: 1; letter-spacing: -.02em; }
.in-arrivo p { margin: 0 0 10px; color: var(--osso-2); }
.in-arrivo .st-eti { margin: 0; }
/* descrizione scritta su Tebex (HTML) */
.pr-testo.tebex { font-size: 17px; line-height: 1.7; color: var(--osso-2); overflow-wrap: anywhere; }
.pr-testo.tebex > :first-child { margin-top: 0; }
.pr-testo.tebex p { font-size: inherit; color: inherit; margin: 0 0 16px; }
.pr-testo.tebex h1, .pr-testo.tebex h2, .pr-testo.tebex h3, .pr-testo.tebex h4 { margin: 30px 0 12px; font-family: var(--f-serif); font-weight: 400; color: var(--osso); line-height: 1.1; letter-spacing: -.01em; }
.pr-testo.tebex h1, .pr-testo.tebex h2 { font-size: 34px; } .pr-testo.tebex h3, .pr-testo.tebex h4 { font-size: 26px; }
.pr-testo.tebex strong, .pr-testo.tebex b { color: var(--osso); font-weight: 500; }
.pr-testo.tebex a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.pr-testo.tebex ul, .pr-testo.tebex ol { margin: 0 0 18px; padding-left: 20px; }
.pr-testo.tebex li { margin: 6px 0; }
.pr-testo.tebex li::marker { color: var(--oro); }
.pr-testo.tebex img { max-width: 100%; height: auto; border-radius: 8px; }
.pr-testo.tebex iframe, .pr-testo.tebex video { max-width: 100%; }
/* miniature della galleria */
.pr-miniature { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-miniature button { width: 86px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; opacity: .55; box-shadow: inset 0 0 0 1px rgba(239, 233, 223, .15); transition: opacity .3s, box-shadow .3s; }
.pr-miniature button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-miniature button:hover { opacity: .85; }
.pr-miniature button.on { opacity: 1; box-shadow: 0 0 0 1px var(--oro); }
/* checkout: account collegato, messaggi */
.ck-passo.fatto .n { color: #a9d8b0; }
.ck-passo.fatto b { color: var(--osso); font-weight: 500; }
.ck-cambia { margin-left: 6px; font-size: inherit; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.ck-nota.errore { color: #f0a3a3; }

/* ---------------- progetti in evidenza: ogni progetto e' un capitolo, senza riquadri.
   A Silk Song: inchiostro, sole rosso, kanji, petali. Coven: cremisi, calore, insegna moderna, braci. */
.pj-eroe { --acc: #e9a0ab; --acc-forte: #f6c9d0; --bagliore: rgba(214, 72, 96, .22); --ombra: rgba(233, 160, 171, .14);
  position: relative; isolation: isolate; margin-top: 36px; padding: 84px 0 76px; border-top: 1px solid rgba(239, 233, 223, .1); transition: opacity .9s ease, transform 1.1s var(--ease-out); }
.pj-eroe + .pj-eroe { margin-top: 0; }
.pj-eroe.spenta { opacity: .22 !important; }
/* numero del capitolo in filigrana e scritta verticale */
.pj-ombra { position: absolute; z-index: -1; right: -6px; top: 34px; font-family: var(--f-serif); font-size: clamp(220px, 24vw, 380px); line-height: .75; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--ombra); pointer-events: none; user-select: none; opacity: 0; transform: translateY(30px); transition: opacity 1.6s ease .2s, transform 2s var(--ease-out) .2s; }
.pj-eroe.visto .pj-ombra { opacity: 1; transform: none; }
.pj-glifo { position: absolute; right: 4px; top: 52%; writing-mode: vertical-rl; color: var(--acc); opacity: .75; pointer-events: none; user-select: none; }
/* logo: entra da sfocato e poi respira */
.pj-logo { position: relative; width: min(300px, 62%); margin-bottom: 34px; animation: respira 11s ease-in-out infinite alternate; }
.pj-logo img { position: relative; z-index: 1; width: 100%; max-height: 320px; object-fit: contain; object-position: left center; display: block;
  opacity: 0; filter: blur(14px); transform: scale(.94); transition: opacity 1.6s ease .15s, filter 1.8s ease .15s, transform 2.2s var(--ease-out) .15s; }
.pj-eroe.visto .pj-logo img { opacity: 1; filter: none; transform: none; }
@keyframes respira { to { transform: translateY(-6px) rotate(-1.5deg); } }
/* testo */
.pj-eroe-testo { position: relative; max-width: 560px; }
.pj-capitolo { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.pj-capitolo i { flex: none; width: 46px; height: 1px; background: currentColor; opacity: .6; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .6s; }
.pj-eroe.visto .pj-capitolo i { transform: scaleX(1); }
.pj-capitolo span { color: var(--acc); }
.pj-eroe h2 { margin: 18px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(64px, 6.2vw, 106px); line-height: .9; letter-spacing: -.03em; transition: color .5s; }
.pj-eroe[data-fuoco]:hover h2 { color: var(--acc-forte); }
.pj-motto { margin: 16px 0 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; color: var(--acc-forte); }
.pj-testo { margin: 22px 0 0; max-width: 50ch; font-size: 16px; line-height: 1.7; color: var(--osso-2); }
.pj-scheda { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 24px; margin: 32px 0 0; border-top: 1px solid rgba(239, 233, 223, .12); }
.pj-scheda div { padding: 14px 0; border-bottom: 1px solid rgba(239, 233, 223, .08); }
.pj-scheda dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 233, 223, .45); }
.pj-scheda dd { margin: 6px 0 0; font-size: 14.5px; }
.pj-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px; }
.pj-cta { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; font-size: 14px; border-bottom: 1px solid var(--acc); transition: color .35s, gap .45s var(--ease-out); }
.pj-cta:hover { color: var(--acc-forte); gap: 14px; }
.pj-suggerimento { font-size: 12px; color: var(--osso-2); opacity: .65; }
.pj-n img { width: 46px; display: block; }
.pj-sigillo { display: block; font-family: var(--f-sans); font-weight: 300; font-size: clamp(70px, 8vw, 130px); letter-spacing: .14em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--acc); }

/* A Silk Song: sole rosso dietro il cerchio d'inchiostro, kanji verticali, titolo serif */
.tema-sakura .pj-logo::before { content: ""; position: absolute; z-index: 0; width: 58%; aspect-ratio: 1; right: 2%; top: 4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 38, 56, .42) 0 50%, rgba(196, 38, 56, .14) 64%, transparent 72%); filter: blur(5px); }
.tema-sakura .pj-logo::after { content: ""; position: absolute; z-index: 2; left: -10%; right: -30%; bottom: 8%; height: 18%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(10, 13, 28, .55) 30%, rgba(10, 13, 28, .55) 70%, transparent); filter: blur(10px); opacity: .7; }
.tema-sakura .pj-glifo { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS Mincho", serif; font-size: 30px; letter-spacing: .45em; }

/* Coven: luna e lama nel calore del fuoco, titolo moderno e spaziato, motto da insegna */
.pj-eroe.tema-cenere { --acc: #e0525c; --acc-forte: #ff9a8a; --bagliore: rgba(163, 22, 42, .32); --ombra: rgba(224, 82, 92, .16); }
.tema-cenere .pj-logo { width: min(220px, 46%); }
.tema-cenere .pj-logo img { filter: url(#calore) drop-shadow(0 0 16px rgba(224, 82, 92, .55)); }
.tema-cenere .pj-logo img { opacity: 0; }
.tema-cenere.visto .pj-logo img { opacity: 1; filter: url(#calore) drop-shadow(0 0 16px rgba(224, 82, 92, .55)) drop-shadow(0 18px 30px rgba(255, 110, 40, .35)); animation: insegna 7s steps(1, end) infinite 2.2s; }
.tema-cenere .pj-logo::before { content: ""; position: absolute; z-index: 0; left: -45%; right: -45%; top: 30%; bottom: -45%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 32, .3), rgba(163, 22, 42, .14) 55%, transparent); animation: brucia 2.6s ease-in-out infinite alternate; }
@keyframes brucia { 0% { opacity: .75; transform: scaleY(.96); } 35% { opacity: 1; } 60% { opacity: .82; transform: scaleY(1.04); } 100% { opacity: .95; } }
@keyframes insegna { 0%, 100% { opacity: 1; } 61% { opacity: .55; } 62% { opacity: 1; } 64% { opacity: .35; } 65% { opacity: 1; } 87% { opacity: .8; } 88% { opacity: 1; } }
.tema-cenere h2 { font-family: var(--f-sans); font-weight: 300; text-transform: uppercase; letter-spacing: .22em; font-size: clamp(52px, 5.2vw, 86px); line-height: 1; text-shadow: 0 0 28px rgba(224, 82, 92, .35); }
.tema-cenere .pj-motto { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-style: normal; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.tema-cenere .pj-motto::before { content: "// "; opacity: .6; }
.tema-cenere .pj-glifo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; letter-spacing: .6em; opacity: .55; }

/* particelle: petali che cadono (sakura), braci che salgono (cenere) */
.petali { position: absolute; z-index: -1; left: -40px; right: -40px; top: 0; bottom: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent); mask: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent); }
.petali i { position: absolute; top: -12px; width: 10px; height: 8px; border-radius: 70% 10% 70% 10%; background: linear-gradient(135deg, #f8c4cd, #d9506a); opacity: 0; animation: petalo 13s linear infinite; }
.petali i:nth-child(1) { left: 6%; } .petali i:nth-child(2) { left: 18%; animation-delay: 3.2s; animation-duration: 15s; }
.petali i:nth-child(3) { left: 31%; animation-delay: 6.5s; } .petali i:nth-child(4) { left: 44%; animation-delay: 1.6s; animation-duration: 16s; }
.petali i:nth-child(5) { left: 57%; animation-delay: 8s; } .petali i:nth-child(6) { left: 69%; animation-delay: 4.8s; animation-duration: 14s; }
.petali i:nth-child(7) { left: 80%; animation-delay: 9.7s; } .petali i:nth-child(8) { left: 89%; animation-delay: 2.4s; animation-duration: 17s; }
.petali i:nth-child(9) { left: 97%; animation-delay: 11.2s; }
@keyframes petalo {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: .9; }
  50% { transform: translate(-30px, 330px) rotate(170deg); }
  90% { opacity: .5; }
  100% { opacity: 0; transform: translate(-70px, 680px) rotate(340deg); }
}
.tema-cenere .petali i { top: auto; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffb070; box-shadow: 0 0 6px 2px rgba(255, 110, 40, .75); animation-name: brace; }
@keyframes brace {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 1; }
  50% { transform: translate(22px, -320px); }
  85% { opacity: .45; }
  100% { opacity: 0; transform: translate(-14px, -660px); }
}
@media (max-width: 680px) { .pj-ombra { font-size: 180px; } .pj-glifo, .pj-suggerimento { display: none; } .pj-logo { width: 62%; } }
@media (prefers-reduced-motion: reduce) { .petali { display: none; } .pj-logo, .tema-cenere .pj-logo::before, .tema-cenere.visto .pj-logo img { animation: none; } }