/* Home «casa» RareKeepers: la casa dei custodi. Notte verde del logo, crema per il testo, oro solo sulle azioni.
   Titoli in Fraunces (con il corsivo per la parola che conta), testo in Outfit. Sale chiare color carta e sale scure si alternano tra i passaggi e i servizi. */

@font-face { font-family: 'Titoli'; src: url('font/titoli.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Titoli'; src: url('font/titoli-corsivo.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Testo'; src: url('font/testo.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --notte: #07110E; --notte-2: #0B1814; --velluto: #10231D; --velluto-2: #173129;
  --crema: #F3EDE1; --testa: #FFF8EC; --tenue: #AFBDB6;
  --oro: #FFD447; --oro-su: #FFE07A; --oro-ink: #0B1F1A; --oro-corsivo: #F2D58A;
  --carta: #F2ECE0; --carta-2: #E8E0D0; --inchiostro: #0B1F1A; --inchiostro-tenue: #45544E; --verde: #0F7A5C;
  --olo: linear-gradient(100deg, #FFB8EC 0%, #FFE6A6 48%, #8BE9C9 100%); /* taste-skill-ignore: la lamina olografica del logo */
  --dd: #FFD447;
  --errore: #FF8A80; --errore-carta: #B3261E;
  --t-display: clamp(2.5rem, .7rem + 5.8vw, 6.5rem);
  --t-head: clamp(2.25rem, 1.1rem + 3.7vw, 4.75rem);
  --t-terzo: clamp(1.375rem, 1.2rem + .5vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1.02rem + .4vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --gutter: clamp(20px, 4vw, 64px);
  --max: 1360px;
  --stacco: clamp(112px, 12vw, 200px);
  --r: 20px;
  --molla: cubic-bezier(.22, 1, .36, 1);
  --veloce: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--notte); color: var(--crema);
  font: 400 var(--t-body)/1.6 'Testo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: 'Titoli', Georgia, serif; font-weight: 380; color: var(--testa); font-variation-settings: 'SOFT' 60, 'WONK' 0; font-optical-sizing: auto; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 340; color: var(--oro-corsivo); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--oro); color: var(--oro-ink); }
.salta { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--oro); color: var(--oro-ink); padding: 10px 16px; border-radius: 999px; }
.salta:focus { top: 12px; }
mark.dd { background: var(--dd); color: var(--oro-ink); padding: 0 .3em; border-radius: 4px; font-style: normal; }
abbr.lingua { text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.sopra { font-size: var(--t-lead); line-height: 1.5; color: var(--tenue); max-width: 32em; }

/* Bottoni: l'oro solo sull'azione principale */
.bottoni { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--oro); color: var(--oro-ink); font-weight: 600; letter-spacing: .01em;
  transition: background var(--veloce), transform 100ms ease-out;
}
.btn:hover { background: var(--oro-su); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn:disabled:hover { background: var(--oro); }
.btn-2 { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .5); /* taste-skill-ignore: contorno del bottone secondario, non un'ombra */ }
.btn-2:hover { background: rgba(243, 237, 225, .08); }
/* Dopo «Aggiungi»: cestino o meno · quantità · più, nello stesso posto e della stessa forma del bottone */
.contatore { display: inline-flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px; border-radius: 999px; background: var(--oro); color: var(--oro-ink); font-weight: 600; }
.contatore button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background var(--veloce), transform 100ms ease-out; }
.contatore button:hover { background: rgba(11, 31, 26, .1); }
.contatore button:active { transform: scale(.92); }
.contatore button[aria-disabled="true"] { opacity: .35; }
.contatore output { flex: 1; min-width: 7.5em; text-align: center; font-variant-numeric: tabular-nums; }
.contatore-piccolo { min-height: 44px; padding: 0; }
.contatore-piccolo output { min-width: 2.5em; }
.contatore-piccolo output span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.link { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; font-weight: 600; color: var(--oro-corsivo); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.segno { display: inline-block; transition: transform var(--veloce) var(--molla); }
a:hover .segno { transform: translateX(3px); }
/* Le schede che si cliccano per intero, in tutte le pagine: al passaggio salgono di 4 px, alla pressione cedono (come i bottoni) */
a:is(.uscita, .etichetta, .teca-prodotto, .tessera-carta, .tessera-tutte, .prossima) { transition: background var(--veloce), transform 400ms var(--molla); }
a:is(.uscita, .etichetta, .teca-prodotto, .tessera-carta, .tessera-tutte):hover { transform: translateY(-4px); }
a:is(.uscita, .etichetta, .teca-prodotto, .tessera-carta, .tessera-tutte):active { transform: translateY(-2px) scale(.98); transition-duration: 100ms; }
/* I link dentro il testo: sottolineati appena, la riga si accende al passaggio. :where tiene bassa la specificità, così i link con uno stile proprio restano com'erano */
:where(main p, main dd) > a:where(:not([class])) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; transition: text-decoration-color var(--veloce); }
:where(main p, main dd) > a:where(:not([class])):hover { text-decoration-color: currentColor; }

/* ---------- testata ---------- */
.prova { position: relative; z-index: 31; text-align: center; font-size: 13px; color: var(--tenue); padding: 8px var(--gutter); background: var(--notte); }
.prova a { color: var(--oro-corsivo); text-decoration: underline; text-underline-offset: 3px; }
.testata {
  position: sticky; top: 0; z-index: 30; height: 72px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  transition: background 300ms, backdrop-filter 300ms;
}
.testata.staccata { background: rgba(7, 17, 14, .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.marchio img { height: 40px; width: auto; }
.menu > ul { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.menu > ul > li > a, .altri summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.menu a { font-size: var(--t-small); color: var(--crema); opacity: .78; padding: 12px 0; transition: opacity var(--veloce); }
.menu a:hover { opacity: 1; }
.azioni { display: flex; justify-content: flex-end; gap: 4px; }
.icona { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tasto-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; transition: background var(--veloce), transform 100ms ease-out; }
.tasto-icona:hover { background: rgba(243, 237, 225, .08); }
.tasto-icona:active { transform: scale(.94); }
.menu-telefono { display: none; position: relative; }
.menu-telefono summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; }
.menu-telefono summary::-webkit-details-marker { display: none; }
.menu-telefono ul { position: absolute; right: 0; top: 100%; min-width: 240px; background: var(--velluto); border-radius: var(--r); padding: 10px; }
.menu-telefono a { display: block; padding: 12px 14px; border-radius: 12px; font-weight: 500; }
.menu-telefono a:hover { background: var(--velluto-2); }
.menu-telefono ul { max-height: calc(100svh - 90px); overflow-y: auto; }
.menu a[aria-current], .menu summary[aria-current] { opacity: 1; }

/* Altri giochi: la tendina si apre sotto la sua voce */
.altri { position: relative; }
.altri summary { list-style: none; cursor: pointer; font-size: var(--t-small); opacity: .78; padding: 12px 0; display: inline-flex; gap: 8px; align-items: center; transition: opacity var(--veloce); }
.altri summary::-webkit-details-marker { display: none; }
.altri summary::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--veloce) var(--molla); }
.altri[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.altri summary:hover, .altri[open] summary { opacity: 1; }
.menu .altri ul { position: absolute; left: -14px; top: 100%; display: grid; gap: 0; min-width: 200px; padding: 8px; border-radius: var(--r); background: var(--velluto); }
.menu .altri a { display: block; padding: 10px 14px; border-radius: 12px; opacity: 1; }
.menu .altri a:hover { background: var(--velluto-2); }
/* I Marchi: i loghi su etichette chiare, due per riga; la tendina si allinea a destra perché è l'ultima voce */
.menu .altri .loghi { left: auto; right: -14px; grid-template-columns: repeat(2, 148px); gap: 8px; padding: 10px; }
.menu .altri .loghi a { display: grid; place-items: center; height: 72px; padding: 12px 16px; background: var(--carta); transition: background var(--veloce), transform 100ms ease-out; }
.menu .altri .loghi a:hover { background: #FFFDF8; }
.menu .altri .loghi a:active { transform: scale(.97); }
.menu .altri .loghi img { width: auto; max-width: 100%; height: auto; max-height: 40px; object-fit: contain; }

/* Carrello: il numero degli articoli sull'icona */
.carrello, .desideri { position: relative; }

/* Il cuore della lista dei desideri: vuoto finché non salvi, pieno d'oro dopo */
.cuore { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--crema); cursor: pointer; transition: background var(--veloce), color var(--veloce), transform 100ms ease-out; }
.cuore:hover { background: rgba(243, 237, 225, .08); }
.cuore:active { transform: scale(.88); }
.cuore[aria-pressed="true"] { color: var(--oro-corsivo); }
.cuore[aria-pressed="true"] .icona { fill: currentColor; }
.cuore-scheda { width: 52px; height: 52px; box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .5); /* taste-skill-ignore: contorno del bottone secondario, non un'ombra */ }
html:not(.js) .cuore { display: none; }
.conta {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--oro); color: var(--oro-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.conta:empty { display: none; }
.conta.salta-su { animation: salta .35s var(--molla); }
@keyframes salta { 40% { transform: scale(1.35); } }

/* ---------- apertura: titolo e nastro di carte su un cilindro ---------- */
.apertura { position: relative; margin-top: -72px; padding-top: calc(72px + clamp(24px, 4.5vw, 72px)); overflow-x: clip; }
.apertura-testo { display: grid; justify-items: center; text-align: center; gap: 20px; padding: 0 var(--gutter); }
.apertura h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -.025em; max-width: 13ch; }
.apertura h1 em { color: transparent; background: var(--olo); -webkit-background-clip: text; background-clip: text; padding-right: .06em; } /* taste-skill-ignore: la parola rara in lamina olografica, come il logo */
.apertura > .sopra { max-width: 30em; text-wrap: balance; margin: clamp(8px, 1.5vw, 24px) auto 0; padding: 0 var(--gutter); text-align: center; }
.apertura > .bottoni { justify-content: center; padding: 0 var(--gutter); margin-top: 24px; }

.giro {
  --cw: clamp(150px, 15vw, 280px);
  position: relative; height: calc(var(--cw) * 2.1); margin-top: clamp(8px, 1.5vw, 24px);
  overflow-x: clip; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.giro.preso { cursor: grabbing; }
.giro-pista { position: absolute; inset: 0; transform-style: preserve-3d; }
.giro-carta {
  position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 600 / 838;
  margin: calc(var(--cw) * -.698) 0 0 calc(var(--cw) / -2);
  transform-origin: 50% 50%; will-change: transform, opacity; backface-visibility: hidden;
}
.giro-carta a { display: block; height: 100%; border-radius: 4.6% / 3.3%; position: relative; }
.giro-carta img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; box-shadow: 0 24px 48px rgba(0, 0, 0, .55); /* taste-skill-ignore: la carta è cliccabile e sta nello spazio: l'ombra la stacca dal fondo */ }
/* Il riflesso della lamina: si accende quando la carta gira verso la luce */
.giro-carta a::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 210, .55) 48%, rgba(180, 255, 230, .35) 54%, transparent 70%); /* taste-skill-ignore: il riflesso della lamina mentre la carta gira */
  background-size: 260% 100%; background-position: var(--lx, 50%) 0; opacity: var(--luce, 0);
}
.giro-carta a:focus-visible { outline-offset: 6px; }
html:not(.js) .giro { height: auto; overflow-x: auto; cursor: auto; }
html:not(.js) .giro-pista { position: static; display: flex; gap: 20px; padding: 20px var(--gutter); }
html:not(.js) .giro-carta { position: static; margin: 0; flex: none; }

/* ---------- servizio ---------- */
.servizio {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: center;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--stacco) var(--gutter);
}
.servizio-figura { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--velluto); }
.servizio-figura > img { width: 100%; height: 100%; object-fit: cover; }
.servizio h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.servizio .sopra { margin-top: 20px; }
.promesse { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 28px; }
.promesse li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; }
.promesse .icona { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--velluto-2); color: var(--oro-corsivo); stroke-width: 1.5; }
.promesse h3 { font-family: 'Testo', system-ui, sans-serif; font-weight: 600; font-size: 1.1875rem; line-height: 1.3; color: var(--testa); }
.promesse p { margin-top: 4px; color: var(--tenue); }

/* La teca: la carta nel suo toploader sotto un faretto, finché non arriva la foto */
.teca { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(60% 45% at 50% 38%, #24453A 0%, var(--velluto) 60%, var(--notte-2) 100%); } /* taste-skill-ignore: il faretto sulla teca */
.teca::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 13%; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(14px); }
.teca-carta { position: relative; z-index: 1; width: 52%; padding: 4.5% 4.5% 9%; border-radius: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .14)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); /* taste-skill-ignore: il bordo del toploader rigido, disegnato */ transform: rotate(-4deg); }
.teca-carta img { border-radius: 4.6% / 3.3%; }

/* ---------- selezione: i marchi come etichette ---------- */
.selezione { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--stacco) var(--gutter); }
.selezione-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.selezione h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.selezione-testa p { color: var(--tenue); font-size: var(--t-lead); max-width: 26em; justify-self: end; }
.marchi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.etichetta {
  display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 16px; height: 100%; min-height: 240px; padding: 40px 24px 24px;
  border-radius: var(--r); background: var(--carta); color: var(--inchiostro);
}
.etichetta img { align-self: center; width: auto; max-width: 100%; height: auto; max-height: 72px; object-fit: contain; }
.etichetta:hover { background: #FFFDF8; }
.entra-sala { font-size: var(--t-small); font-weight: 600; color: var(--verde); }

/* ---------- custodia: sala chiara, il banco cambia coi passaggi ---------- */
.custodia { background: var(--carta); color: var(--inchiostro); padding: var(--stacco) var(--gutter); }
.custodia h2, .custodia h3 { color: var(--inchiostro); }
.custodia h2 em { color: var(--verde); }
.custodia-testa, .custodia-corpo { max-width: var(--max); margin: 0 auto; }
.custodia-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.custodia-testa h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.custodia-testa p { font-size: var(--t-lead); color: var(--inchiostro-tenue); justify-self: end; max-width: 22em; }
.custodia-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); margin-top: clamp(40px, 5vw, 72px); }
.banco { position: sticky; top: 104px; height: clamp(440px, 78vh, 720px); border-radius: var(--r); background: radial-gradient(70% 55% at 50% 40%, #1E3D33 0%, var(--velluto) 55%, var(--notte-2) 100%); display: grid; place-items: center; overflow: hidden; } /* taste-skill-ignore: il faretto sul banco */
.banco-oggetto { position: relative; width: min(46%, 300px); aspect-ratio: 600 / 838; transition: transform 900ms var(--molla); }
.b-carta, .b-carta img { display: block; width: 100%; height: 100%; border-radius: 4.6% / 3.3%; }
.b-carta { box-shadow: 0 30px 60px rgba(0, 0, 0, .5); /* taste-skill-ignore: la carta posata sul banco */ overflow: hidden; }
.banco-oggetto > span:not(.b-carta) { position: absolute; pointer-events: none; opacity: 0; transition: opacity 500ms var(--molla), transform 900ms var(--molla); }
/* 1 · luce radente e angoli */
.b-luce { inset: 0; border-radius: 4.6% / 3.3%; overflow: hidden; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 35%, rgba(255, 250, 230, .7) 50%, transparent 65%); background-size: 300% 100%; } /* taste-skill-ignore: la luce radente che scorre sulla carta */
.b-angoli { inset: -14px; }
.b-angoli i { position: absolute; width: 26px; height: 26px; border: 2px solid var(--oro); }
.b-angoli i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.b-angoli i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.b-angoli i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.b-angoli i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
[data-fase="1"] .b-luce { opacity: 1; animation: radente 2.8s ease-in-out infinite; }
[data-fase="1"] .b-angoli { opacity: 1; }
@keyframes radente { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* 2 · il mirino della foto */
.b-mirino { inset: -28px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .5); /* taste-skill-ignore: cornice del mirino, disegnata */ display: flex; justify-content: center; gap: 8px; align-items: flex-end; padding-bottom: 10px; transform: translateY(-10px); }
.b-mirino b { font: 600 13px/1 'Testo', sans-serif; letter-spacing: .04em; color: var(--oro-ink); background: var(--oro); border-radius: 999px; padding: 6px 10px; transform: translateY(40px); }
.b-mirino b + b { background: var(--crema); }
[data-fase="2"] .b-mirino { opacity: 1; transform: none; }
[data-fase="2"] .b-carta { animation: lampo 700ms ease-out; }
@keyframes lampo { 0% { filter: brightness(2.2); } 100% { filter: none; } }
/* 3 · bustina e toploader */
.b-bustina { inset: -4% -3% -2%; border-radius: 6px; background: linear-gradient(170deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .12)); transform: translateY(-110%); } /* taste-skill-ignore: la plastica trasparente della bustina */
.b-toploader { inset: -10% -9% -7%; border-radius: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .16)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); /* taste-skill-ignore: bordo del toploader rigido, disegnato */ transform: translateY(-140%); }
[data-fase="3"] .b-bustina, [data-fase="4"] .b-bustina { opacity: 1; transform: none; }
[data-fase="3"] .b-toploader, [data-fase="4"] .b-toploader { opacity: 1; transform: none; transition-delay: 150ms; }
/* 4 · nella scatola, con l'etichetta della spedizione */
.b-pacco { left: -34%; right: -34%; top: 52%; height: 78%; border-radius: 14px; background: #0A1612; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .5); /* taste-skill-ignore: la scatola rigida, disegnata */ display: grid; place-items: center; transform: translateY(70%); }
.b-etichetta { display: grid; gap: 4px; padding: 14px 18px; border-radius: 8px; background: var(--crema); color: var(--inchiostro); font-size: 13px; line-height: 1.2; transform: rotate(-3deg); }
.b-etichetta strong { font: 400 18px/1 'Titoli', serif; }
.b-codice { font-variant-numeric: tabular-nums; font-weight: 600; }
[data-fase="4"] .banco-oggetto { transform: translateY(-14%); }
[data-fase="4"] .b-pacco { opacity: 1; transform: none; }

.passi { display: grid; }
.passo { min-height: clamp(380px, 66vh, 640px); display: grid; align-content: center; gap: 12px; max-width: 30em; opacity: .35; transition: opacity 500ms var(--molla); }
.passo.qui { opacity: 1; }
.numero { font: 400 1rem/1 'Titoli', serif; color: var(--verde); letter-spacing: .08em; }
.passo h3 { font-size: var(--t-terzo); line-height: 1.15; }
.passo p:last-child { font-size: var(--t-lead); line-height: 1.55; color: var(--inchiostro-tenue); }
.custodia mark.dd { background: #FFE38A; }

/* ---------- pezzo del mese ---------- */
.pezzo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center;
  padding: var(--stacco) max(var(--gutter), calc((100% - var(--max)) / 2));
  background: radial-gradient(42% 60% at 28% 50%, #1C3A30 0%, transparent 70%), var(--notte); /* taste-skill-ignore: il faretto sul pezzo del mese */
}
.pezzo-carta { display: grid; justify-items: center; perspective: 1200px; }
.carta {
  display: block; width: min(100%, 420px); aspect-ratio: 600 / 838; border-radius: 4.6% / 3.3%; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6); /* taste-skill-ignore: la carta è cliccabile: l'ombra la solleva dal fondo */
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform 600ms var(--molla); will-change: transform;
}
.carta.segue { transition: transform 80ms linear; }
.carta img { width: 100%; height: 100%; object-fit: cover; }
.pezzo h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.pezzo .sopra { margin-top: 20px; }
.pezzo .bottoni { margin-top: 40px; }
.scheda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin-top: 40px; max-width: 30em; }
.scheda dt { font-size: var(--t-small); color: var(--tenue); }
.scheda dd { font-weight: 600; color: var(--testa); }
.pezzo-prezzo { font: 400 clamp(2rem, 1.5rem + 1.5vw, 3rem)/1 'Titoli', serif; color: var(--testa); margin-right: 16px; font-variant-numeric: tabular-nums; }

/* ---------- servizi: fascia chiara intera come era Vendi, cinque servizi a scala su due colonne ---------- */
/* Stessa grandezza di titoli, testo e bottone che aveva Vendi, niente riquadri (Sula, 27-10-2026).
   Ogni servizio occupa due righe della griglia, testo nella prima e bottone nella seconda, e il successivo parte
   dalla sua seconda riga nell'altra colonna: così il titolo di ognuno comincia all'altezza del bottone di quello prima */
.servizi {
  background: var(--carta-2); color: var(--inchiostro);
  padding: clamp(80px, 9vw, 140px) max(var(--gutter), calc((100% - var(--max)) / 2));
}
.servizi h3 { color: var(--inchiostro); }
.servizi em { color: var(--verde); }
.sala h3 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.sale-servizi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 40px) clamp(48px, 8vw, 140px); }
.sala { display: grid; grid-template-rows: subgrid; grid-row: var(--riga) / span 2; grid-column: 1; }
.sala:nth-child(even) { grid-column: 2; }
/* Il titolo successivo parte un po' sotto il bottone di quello prima, non alla sua altezza: più aria */
.sala + .sala > div { padding-top: clamp(72px, 6vw, 96px); }
.sala .sopra { color: var(--inchiostro-tenue); margin-top: 20px; }
.sala .btn { justify-self: start; align-self: start; background: var(--inchiostro); color: var(--carta); }
.sala .btn:hover { background: #1D3A31; }
.presto { display: inline-block; vertical-align: .3em; margin-left: 4px; font: 600 13px/1 'Testo', system-ui, sans-serif; letter-spacing: .02em; color: var(--oro-ink); background: var(--oro); border-radius: 999px; padding: 7px 12px; }

/* ---------- vendi: fascia chiara intera ---------- */
.vendi {
  background: var(--carta-2); color: var(--inchiostro);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start;
  padding: clamp(80px, 9vw, 140px) max(var(--gutter), calc((100% - var(--max)) / 2));
}
.vendi h2, .vendi h3 { color: var(--inchiostro); }
.vendi h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.vendi .sopra { color: var(--inchiostro-tenue); margin: 20px 0 32px; }
/* Il titolo resta fermo sotto la testata mentre i passaggi accanto scorrono, come in tutte le sale a due colonne */
.vendi-testa { position: sticky; top: 104px; }
.vendi .btn { background: var(--inchiostro); color: var(--carta); }
.vendi .btn:hover { background: #1D3A31; }
.vendi-passi { display: grid; gap: 12px; }
.vendi-passi li { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 28px; border-radius: var(--r); background: var(--carta); }
.vendi-passi .numero { grid-row: span 2; font-size: 2rem; }
.vendi-passi h3 { font-size: var(--t-terzo); line-height: 1.2; }
.vendi-passi p:last-child { color: var(--inchiostro-tenue); }
.vendi mark.dd { background: #FFE38A; }

/* ---------- uscite: una riga sola ---------- */
.uscite { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(80px, 9vw, 140px) var(--gutter); }
.uscite-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.uscite h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 3rem); letter-spacing: -.015em; }
.uscite-righe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uscita {
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; height: 100%; padding: 28px; border-radius: var(--r); background: var(--velluto);
}
.uscita:hover { background: var(--velluto-2); }
.quando { display: flex; align-items: baseline; gap: 10px; }
.giorno { font: 400 3rem/1 'Titoli', serif; color: var(--testa); font-variant-numeric: tabular-nums; }
.mese { color: var(--tenue); }
.uscita h3 { font-family: 'Testo', sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.uscita div p { color: var(--tenue); font-size: var(--t-small); margin-top: 4px; }
.mancano { font-size: var(--t-small); color: var(--oro-corsivo); font-weight: 600; }
.azione { font-weight: 600; }

/* ---------- piede ---------- */
.piede { background: var(--notte-2); padding: clamp(64px, 7vw, 104px) var(--gutter) 40px; font-size: var(--t-small); color: var(--tenue); }
.piede > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.piede-alto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.piede-marchio { height: 60px; width: auto; }
.piede-colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.piede h2 { font: 600 var(--t-small)/1.4 'Testo', sans-serif; color: var(--crema); margin-bottom: 12px; }
.piede li a { display: inline-block; padding: 6px 0; }
.piede li a:hover { color: var(--crema); }
.piede > .note { margin-top: 56px; max-width: 60ch; margin-left: max(0px, calc((100% - var(--max)) / 2)); }
.societa { margin-top: 16px; }

.avviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  background: var(--crema); color: var(--inchiostro); padding: 12px 20px; border-radius: 18px; font-weight: 500;
  transition: opacity 250ms, transform 400ms var(--molla);
}
.avviso.su { opacity: 1; transform: translate(-50%, 0); }

/* ---------- cookie ---------- */
.cookie {
  position: fixed; left: var(--gutter); bottom: 24px; z-index: 45; width: min(480px, calc(100vw - 32px));
  background: var(--carta); border: 1px solid rgba(11, 31, 26, .12); border-radius: var(--r); padding: 28px 28px 24px;
  display: grid; gap: 14px; font-size: var(--t-small); color: var(--inchiostro);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); /* taste-skill-ignore: il banner galleggia sopra la pagina */
}
.cookie h2 { font-size: var(--t-terzo); line-height: 1.2; padding-right: 36px; color: var(--inchiostro); }
.cookie :focus-visible { outline-color: var(--verde); }
.cookie .btn-2 { border: 0; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px rgba(11, 31, 26, .55); /* taste-skill-ignore: contorno del bottone secondario, non un'ombra */ }
.cookie .btn-2:hover { background: rgba(11, 31, 26, .06); }
.cookie a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.cookie-chiudi { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--inchiostro); }
.cookie-chiudi:hover { background: rgba(11, 31, 26, .06); }
.cookie-scelte { display: grid; gap: 12px; padding: 4px 0; }
.interruttore { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; color: var(--inchiostro-tenue); }
.interruttore strong { display: block; color: var(--inchiostro); font-weight: 600; }
.interruttore input[type="checkbox"] { appearance: auto; width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; background: none; box-shadow: none; accent-color: var(--verde); cursor: pointer; }
.cookie-tasti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: center; margin-top: 4px; }
.cookie-tasti .btn { min-height: 48px; padding: 0 16px; }
.cookie-tasti .link-cookie, .cookie-tasti [data-cookie-salva] { grid-column: 1 / -1; justify-self: center; }
.cookie-tasti [data-cookie-salva] { justify-self: stretch; }
.link-cookie { background: none; border: 0; padding: 6px 0; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 237, 225, .35); }
.piede .link-cookie { text-decoration: none; }
.link-cookie:hover { color: var(--crema); }
.cookie .link-cookie { text-decoration-color: rgba(11, 31, 26, .35); }
.cookie .link-cookie:hover { color: var(--verde); }
@media (max-width: 734px) { .cookie { left: 16px; bottom: 16px; padding: 24px 20px 20px; } }

/* ---------- ingressi ---------- */
.js .entra { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--molla), transform 900ms var(--molla); transition-delay: var(--ritardo, 0ms); }
.js .entra.dentro { opacity: 1; transform: none; }
.js .apertura h1 .parola { display: inline-block; opacity: 0; transform: translateY(.35em); animation: sale 1s var(--molla) forwards; animation-delay: calc(var(--i) * 80ms + 100ms); }
@keyframes sale { to { opacity: 1; transform: none; } }

/* ---------- tablet ---------- */
@media (max-width: 1068px) {
  .menu { display: none; }
  .menu-telefono { display: block; }
  .testata { grid-template-columns: auto 1fr; }
  .apertura h1 { max-width: none; }
  .servizio, .pezzo, .vendi { grid-template-columns: minmax(0, 1fr); }
  .vendi-testa { position: static; }
  .servizio-figura { aspect-ratio: 16 / 11; }
  .marchi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selezione-testa, .custodia-testa { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .selezione-testa p, .custodia-testa p { justify-self: start; }
  .uscite-righe { grid-template-columns: minmax(0, 1fr); }
  .uscita { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 4px 24px; }
  .uscita .quando { grid-row: span 2; }
  .uscita .mancano { grid-column: 2; grid-row: 2; }
  .uscita .azione { grid-column: 3; grid-row: 1 / span 2; }
  .piede-alto { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- telefono ---------- */
@media (max-width: 734px) {
  .testata { height: 60px; }
  .apertura { margin-top: -60px; padding-top: calc(60px + 40px); }
  .marchio img { height: 34px; }
  .apertura h1 { font-size: 2.25rem; max-width: none; }
  .apertura .bottoni { flex-direction: column; }
  .apertura .bottoni .btn { width: 100%; }
  .giro { --cw: 46vw; }
  .marchi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .etichetta { min-height: 168px; padding: 28px 16px 18px; }
  .etichetta img { max-height: 56px; }
  .custodia-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .banco { top: 68px; height: clamp(280px, 44svh, 400px); z-index: 2; }
  .banco-oggetto { width: min(40%, 180px); }
  .passo { min-height: clamp(320px, 56svh, 480px); }
  .pezzo-carta .carta { width: min(78%, 340px); }
  .sale-servizi { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .sala, .sala:nth-child(even) { display: flex; flex-direction: column; gap: 28px; grid-row: auto; grid-column: 1; }
  .sala + .sala > div { padding-top: 0; }
  .sala .btn { width: 100%; }
  .uscita { grid-template-columns: auto 1fr; padding: 22px; }
  .uscita .azione { grid-column: 2; grid-row: 3; }
  .uscita .quando { grid-row: span 3; }
  .giorno { font-size: 2.5rem; }
  .piede-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .entra, .js .apertura h1 .parola { opacity: 1; transform: none; animation: none; transition: none; }
  .carta, .banco-oggetto, .banco-oggetto > span, a:is(.uscita, .etichetta, .teca-prodotto, .tessera-carta, .tessera-tutte, .prossima) { transition-duration: 1ms; }
  [data-fase="1"] .b-luce { animation: none; background-position: 50% 0; }
  [data-fase="2"] .b-carta { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .testata.staccata { background: var(--notte); backdrop-filter: none; -webkit-backdrop-filter: none; }
}