:root {
  --carta: #FFFFFF;
  --nebbia: #F6F6F7;
  --inchiostro: #1B1720;
  --lavagna: #625E6B;
  --filo: #E8E6EC;
  --filo-scuro: #DAD6E0;
  --fondale: #F3F2F5;

  --primario: #1E2B4D;
  --primario-scuro: #141E38;
  --primario-velo: #E6E9F1;
  --secondario: #A9505F;
  --secondario-scuro: #8A3F4C;
  --secondario-su: #FFFFFF;
  --secondario-forte: #A9505F;
  --terzo-velo: #F3F4F8;
  --oro: #C9A24D;
  --oro-testo: #8C6A1C;
  --scuro: #141C33;
  --evidenzia: #EFD3D8;

  --libera: #0F7050;
  --tasto-verde: #1E9E50;
  --tasto-verde-premuto: #178541;
  --tasto-rosso: #FF3B30;
  --tasto-giallo: #FFCC00;
  --tasto-giallo-premuto: #E6B800;
  --stato-libera: #25D366;
  --stato-occupata: #FF3B30;
  --libera-velo: #E2F2EA;
  --consulto: #A9505F;
  --consulto-velo: #F6ECEE;
  --assente: #625E6B;
  --assente-velo: #EFEEF2;
  --ombra: 27, 23, 32;
  --f-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --f-testo: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-incisa: 'IM Fell English SC', 'Iowan Old Style', Georgia, serif;
  --r-l: 26px;
  --r-m: 18px;
  --r-s: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
p { margin: 0; }
:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lavagna);
}
.foto-bordo { outline: 1px solid rgba(var(--ombra), 0.07); outline-offset: -1px; }

.dorso-base { --dorso-colore: var(--primario); overflow: hidden; background-color: var(--dorso-colore); }
.faccia { display: none; position: absolute; inset: 0; padding: 6.5% 6.5% 7.5%; container-type: inline-size; }
.dorso.motivo-tarocchi { background-color: #FFFFFF; background-image: none; box-shadow: 0 0 0 1px rgba(var(--ombra), 0.1), 0 16px 30px -18px rgba(var(--ombra), 0.5); }
.motivo-tarocchi .faccia { display: block; }
.faccia-cornice {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%;
  border: clamp(1.5px, 1cqi, 3px) solid #1A1714; overflow: hidden; background: #EFE7D2;
}
.faccia-figura { position: relative; min-height: 0; }
.faccia-figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.faccia-numero {
  position: absolute; top: 2.6cqi; left: 50%; transform: translateX(-50%);
  padding: 0.6cqi 1.4cqi 0.3cqi; border-block: clamp(1px, 0.55cqi, 1.5px) solid #1A1714;
  font-family: var(--f-incisa); font-size: 9cqi; line-height: 1; letter-spacing: 0.05em; color: #1A1714;
  text-shadow: 0 0 2px #FFF8E4, 0 0 2px #FFF8E4;
}
.faccia-nome {
  padding: 3.2cqi 2cqi 2.6cqi; border-top: clamp(1.5px, 1cqi, 3px) solid #1A1714; background: #DDD6CB; color: #1A1714;
  font-family: var(--f-incisa); font-size: 10.5cqi; line-height: 1; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; white-space: nowrap;
}

.testata { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--filo); }
.testata::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.testata .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 10px; }
.marchio svg { width: 30px; height: 34px; flex: none; }
.marchio-su { fill: var(--primario); }
.marchio-giu { fill: var(--secondario); }
.parola {
  font-family: var(--f-display); font-weight: 800; font-size: 27px; color: var(--primario);
  letter-spacing: -0.045em; line-height: 1; white-space: nowrap;
}
.parola b { font-weight: 800; color: var(--secondario); }
.nav { display: flex; gap: 26px; margin-left: 10px; }
.nav a { text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--lavagna); border-radius: 6px; }
.nav a:hover { color: var(--inchiostro); }
.azioni { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.link-btn { padding: 10px 14px; border: 0; border-radius: 999px; background: none; font-weight: 600; cursor: pointer; text-decoration: none; }
.link-btn:hover { background: var(--nebbia); }
.credito {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px;
  background: var(--libera-velo); color: var(--libera); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.credito svg { width: 20px; height: 20px; flex: none; }
.credito-etichetta { font-weight: 600; }
.credito b { font-weight: 800; }

.fatta { background: #E7F4EE; border-bottom: 1px solid #BFE3D1; color: var(--inchiostro); }
.fatta[hidden] { display: none; }
.fatta-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding-block: 14px; }
.fatta-segno { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--libera); flex: none; }
.fatta-segno svg { width: 24px; height: 24px; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fatta-titolo { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1.15; color: var(--libera); }
.fatta-sotto { margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--inchiostro); }
.fatta-chiudi {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: var(--lavagna); font-size: 26px; line-height: 1; cursor: pointer;
}
.fatta-chiudi:hover { background: rgba(15, 112, 80, 0.1); }
.fatta-chiudi:focus-visible { outline: 3px solid var(--libera); outline-offset: 2px; }

.regalo {
  color: #FFFFFF;
  background:
    radial-gradient(circle at 9% 50%, rgba(201, 162, 77, 0.2), transparent 34%),
    linear-gradient(105deg, var(--primario-scuro) 0%, var(--primario) 58%, #2B3B68 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 45%, transparent);
}
.regalo-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 26px; padding-block: 16px; }
.regalo-mazzo { position: relative; width: 74px; height: 94px; flex: none; }
.regalo-dorso, .regalo-carta { position: absolute; top: 5px; left: 6px; width: 58px; height: 84px; border-radius: 9px; }
.regalo-dorso {
  background: var(--secondario);
  box-shadow: inset 0 0 0 3px var(--secondario), inset 0 0 0 4px color-mix(in srgb, var(--oro) 75%, transparent);
  transform: translate(10px, -1px) rotate(12deg);
}
.regalo-carta {
  display: grid; place-items: center; align-content: center; gap: 5px;
  background: #EFE7D2; color: var(--primario-scuro);
  box-shadow: inset 0 0 0 3px #EFE7D2, inset 0 0 0 4px var(--oro), 0 14px 26px -12px rgba(0, 0, 0, 0.75);
  transform: rotate(-6deg);
}
.regalo-carta svg { width: 15px; height: 15px; fill: var(--oro); }
.regalo-carta b { font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.regalo-titolo { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.3vw, 28px); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.regalo-titolo span { color: #E2C27A; }
.regalo-sotto { margin-top: 5px; max-width: 60ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.regalo-btn {
  height: 50px; padding-inline: 24px; border: 0; border-radius: 999px;
  background: var(--oro); color: var(--primario-scuro);
  font-size: 16px; font-weight: 750; white-space: nowrap; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.regalo-btn:hover { background: #D8B461; }
.regalo-btn:active { transform: scale(0.98); }
.regalo-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 720px) {
  .regalo-wrap { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding-block: 14px 16px; }
  .regalo-mazzo { width: 60px; height: 80px; }
  .regalo-dorso, .regalo-carta { top: 5px; left: 4px; width: 48px; height: 70px; border-radius: 8px; }
  .regalo-dorso { transform: translate(8px, -1px) rotate(12deg); }
  .regalo-carta b { font-size: 16px; }
  .regalo-carta svg { width: 13px; height: 13px; }
  .regalo-sotto { font-size: 14px; }
  .regalo-btn { grid-column: 1 / -1; width: 100%; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding-inline: 24px; border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-chiama { background: var(--primario); color: #FFFFFF; }
.btn-chiama:hover { background: var(--primario-scuro); }
.btn-piccolo { height: 44px; padding-inline: 20px; font-size: 15px; }

.eroe { padding-block: 60px 44px; overflow-x: clip; }
.eroe .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.eroe-h { position: relative; margin-top: 18px; font-size: clamp(42px, 6.1vw, 78px); line-height: 0.98; letter-spacing: -0.045em; }
.eroe-h .t1 { display: block; color: var(--primario); }
.eroe-h .t2 { display: block; color: var(--secondario-forte); }
.frase {
  background-image: linear-gradient(var(--evidenzia), var(--evidenzia));
  background-repeat: no-repeat; background-size: 100% 0.2em; background-position: 0 92%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: opacity 0.35s ease, background-size 0.7s ease;
}
.frase.esce { opacity: 0; background-size: 0 0.2em; }
.eroe-punti {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px 16px;
  margin: 24px 0 0; padding: 0; list-style: none; max-width: 600px;
}
.eroe-punto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eroe-icona {
  position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--primario); color: #FFFFFF; box-shadow: 0 8px 16px -10px rgba(var(--ombra), 0.8);
}
.eroe-icona svg { width: 24px; height: 24px; }
.eroe-punto--no .eroe-icona::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 3.5px; border-radius: 2px;
  background: var(--oro); box-shadow: 0 0 0 2px var(--primario); transform: translate(-50%, -50%) rotate(-45deg);
}
.eroe-punto > span:last-child { display: grid; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--inchiostro); }
.eroe-punto b {
  font-family: var(--f-display); font-size: 15.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--secondario-forte);
}
.eroe-sotto { margin-top: 24px; max-width: 46ch; font-size: 19px; color: var(--lavagna); }
.eroe-sotto strong { font-weight: 700; color: var(--inchiostro); }
.tariffe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 26px; }
.tariffa { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--lavagna); }
.tariffa svg { width: 22px; height: 22px; flex: none; }
.tariffa--chiama svg, .voce--chiama svg { color: var(--primario); }
.tariffa--scrivi svg, .voce--scrivi svg { color: var(--secondario-forte); }
.tariffa strong { font-family: var(--f-display); font-size: 25px; letter-spacing: -0.02em; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.tariffe-nota { flex-basis: 100%; font-size: 14.5px; color: var(--lavagna); }
.eroe-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.link-testo {
  font-weight: 650; text-decoration: underline; text-decoration-color: var(--oro);
  text-decoration-thickness: 2px; text-underline-offset: 6px; border-radius: 4px;
}

.mazzo {
  container-type: inline-size;
  --mazzo-l: 480px; --m-su: 76px; --m-dx: 90px; --m-giu: 72px; --m-sx: 90px; --piccola: 0.5;
  position: relative; width: min(100%, var(--mazzo-l)); margin-inline: auto;
}
.mazzo-carte { position: relative; padding: var(--m-su) var(--m-dx) var(--m-giu) var(--m-sx); }
.dorso {
  --carta-l: calc(100cqw - var(--m-sx) - var(--m-dx));
  position: absolute; width: calc(var(--carta-l) * var(--piccola)); aspect-ratio: 5 / 8; border-radius: 10px;
  left: calc(var(--m-sx) + var(--carta-l) * var(--cx));
  top: calc(var(--m-su) + var(--carta-l) * 1.6 * var(--cy));
  transform: translate(-50%, -50%) translate(var(--vx, 0px), var(--vy, 0px)) rotate(var(--a));
  transition-property: transform;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--n, 1) * 45ms);
}
.dorso.d5 { --cx: -0.06; --cy: 0.5;  --a: -8deg;  z-index: 1; }
.dorso.d6 { --cx: 1.06;  --cy: 0.47; --a: 8deg;   z-index: 2; }
.dorso.d1 { --cx: 0.1;   --cy: 0.12; --a: -13deg; z-index: 3; }
.dorso.d2 { --cx: 0.9;   --cy: 0.11; --a: 12deg;  z-index: 4; }
.dorso.d3 { --cx: 0.12;  --cy: 0.9;  --a: 11deg;  z-index: 5; }
.dorso.d4 { --cx: 0.88;  --cy: 0.91; --a: -10deg; z-index: 6; }


.dorso.d5 { --n: 6; --lato: -1; --k: 3; }
.dorso.d6 { --n: 5; --lato: 1;  --k: 3; }
.dorso.d3 { --n: 4; --lato: -1; --k: 2; }
.dorso.d4 { --n: 3; --lato: 1;  --k: 2; }
.dorso.d1 { --n: 2; --lato: -1; --k: 1; }
.dorso.d2 { --n: 1; --lato: 1;  --k: 1; }
.mazzo[data-disposizione="destra"] .dorso,
.mazzo[data-disposizione="ventaglio"] .dorso,
.mazzo[data-disposizione="scala"] .dorso {
  inset: var(--m-su) var(--m-dx) var(--m-giu) var(--m-sx); width: auto; aspect-ratio: auto; border-radius: 16px;
  transform-origin: var(--perno);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--a));
}
.mazzo[data-disposizione="destra"] .dorso.d5, .mazzo[data-disposizione="ventaglio"] .dorso.d5, .mazzo[data-disposizione="scala"] .dorso.d5 { z-index: 1; }
.mazzo[data-disposizione="destra"] .dorso.d6, .mazzo[data-disposizione="ventaglio"] .dorso.d6, .mazzo[data-disposizione="scala"] .dorso.d6 { z-index: 2; }
.mazzo[data-disposizione="destra"] .dorso.d3, .mazzo[data-disposizione="ventaglio"] .dorso.d3, .mazzo[data-disposizione="scala"] .dorso.d3 { z-index: 3; }
.mazzo[data-disposizione="destra"] .dorso.d4, .mazzo[data-disposizione="ventaglio"] .dorso.d4, .mazzo[data-disposizione="scala"] .dorso.d4 { z-index: 4; }
.mazzo[data-disposizione="destra"] .dorso.d1, .mazzo[data-disposizione="ventaglio"] .dorso.d1, .mazzo[data-disposizione="scala"] .dorso.d1 { z-index: 5; }
.mazzo[data-disposizione="destra"] .dorso.d2, .mazzo[data-disposizione="ventaglio"] .dorso.d2, .mazzo[data-disposizione="scala"] .dorso.d2 { z-index: 6; }
.mazzo[data-disposizione="destra"] { --mazzo-l: 470px; --m-su: 20px; --m-dx: 150px; --m-giu: 120px; --m-sx: 0px; --perno: 0 100%; --passo: 4.5deg; }
.mazzo[data-disposizione="destra"] .dorso { --a: calc(var(--n) * var(--passo)); }
.mazzo[data-disposizione="ventaglio"] { --mazzo-l: 390px; --m-su: 40px; --m-dx: 55px; --m-giu: 90px; --m-sx: 55px; --perno: 50% 100%; --passo: 7deg; }
.mazzo[data-disposizione="ventaglio"] .dorso { --a: calc(var(--lato) * var(--k) * var(--passo)); }
.mazzo[data-disposizione="scala"] { --mazzo-l: 450px; --m-su: 110px; --m-dx: 130px; --m-giu: 24px; --m-sx: 0px; --perno: 50% 50%; --passo-x: 22px; --passo-y: -17px; }
.mazzo[data-disposizione="scala"] .dorso { --a: calc(var(--n) * 1.5deg); --x: calc(var(--n) * var(--passo-x)); --y: calc(var(--n) * var(--passo-y)); }
.mazzo[data-disposizione="corona"] { --m-su: 104px; --m-giu: 24px; }
.mazzo[data-disposizione="corona"] .dorso.d5 { --cx: 0.06; --cy: 0.18; --a: -20deg; z-index: 1; }
.mazzo[data-disposizione="corona"] .dorso.d3 { --cx: 0.24; --cy: 0.1;  --a: -12deg; z-index: 2; }
.mazzo[data-disposizione="corona"] .dorso.d1 { --cx: 0.42; --cy: 0.06; --a: -4deg;  z-index: 3; }
.mazzo[data-disposizione="corona"] .dorso.d2 { --cx: 0.58; --cy: 0.06; --a: 4deg;   z-index: 4; }
.mazzo[data-disposizione="corona"] .dorso.d4 { --cx: 0.76; --cy: 0.1;  --a: 12deg;  z-index: 5; }
.mazzo[data-disposizione="corona"] .dorso.d6 { --cx: 0.94; --cy: 0.18; --a: 20deg;  z-index: 6; }
.mazzo[data-disposizione="tavolo"] { --m-su: 24px; --m-giu: 112px; }
.mazzo[data-disposizione="tavolo"] .dorso.d5 { --cx: 0.06; --cy: 0.84; --a: 18deg;  z-index: 1; }
.mazzo[data-disposizione="tavolo"] .dorso.d3 { --cx: 0.24; --cy: 0.92; --a: 10deg;  z-index: 2; }
.mazzo[data-disposizione="tavolo"] .dorso.d1 { --cx: 0.42; --cy: 0.96; --a: 3deg;   z-index: 3; }
.mazzo[data-disposizione="tavolo"] .dorso.d2 { --cx: 0.58; --cy: 0.96; --a: -3deg;  z-index: 4; }
.mazzo[data-disposizione="tavolo"] .dorso.d4 { --cx: 0.76; --cy: 0.92; --a: -10deg; z-index: 5; }
.mazzo[data-disposizione="tavolo"] .dorso.d6 { --cx: 0.94; --cy: 0.84; --a: -18deg; z-index: 6; }
.mazzo--chiuso .dorso {
  --a: 0deg !important; --x: 0px !important; --y: 0px !important;
  --vx: calc((0.5 - var(--cx)) * var(--carta-l));
  --vy: calc((0.5 - var(--cy)) * var(--carta-l) * 1.6);
}
.carta {
  --dorso-colore: var(--primario);
  position: relative; z-index: 10; display: grid; margin: 0; aspect-ratio: 5 / 8; border-radius: 16px; overflow: clip;
  background-color: var(--dorso-colore); container-type: inline-size;
}
.carta.motivo-tarocchi { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombra), 0.1), 0 36px 60px -34px rgba(var(--ombra), 0.5); }
.carta .faccia-numero { top: 3cqi; padding-inline: 2.2cqi; font-size: 6.6cqi; letter-spacing: 0.08em; white-space: nowrap; }
.carta .faccia-nome { font-size: 8.2cqi; letter-spacing: 0.05em; }
.istruzioni {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 3cqi;
  margin: 0; padding: 22cqi 10.5cqi 26cqi; list-style: none;
}
.istruzioni li {
  display: grid; grid-template-columns: clamp(20px, 8.6cqi, 28px) minmax(0, 1fr); gap: clamp(6px, 2.8cqi, 10px); align-items: center;
  padding: clamp(8px, 3.6cqi, 12px) clamp(10px, 4.4cqi, 15px) clamp(8px, 3.6cqi, 12px) clamp(8px, 3.2cqi, 11px);
  border-radius: clamp(9px, 3.6cqi, 13px);
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: 0 0 0 1px rgba(26, 23, 20, 0.12), 0 10px 20px -14px rgba(var(--ombra), 0.7);
}
.istr-num { font-family: var(--f-incisa); font-size: clamp(16px, 7.4cqi, 23px); line-height: 1; color: var(--oro-testo); text-align: center; }
.istr-testo { display: grid; justify-items: start; gap: clamp(3px, 1.4cqi, 5px); min-width: 0; }
.istr-testo b { font-family: var(--f-display); font-size: clamp(14px, 6.3cqi, 19px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--inchiostro); text-wrap: balance; }
.istr-testo small { font-size: clamp(11.5px, 4.8cqi, 14.5px); line-height: 1.35; color: var(--lavagna); }
.istr-segno { display: inline-flex; align-items: center; gap: clamp(5px, 2.4cqi, 8px); font-size: clamp(11.5px, 4.8cqi, 14.5px); color: var(--lavagna); }
.mini-tasto { display: grid; place-items: center; width: clamp(26px, 11cqi, 34px); height: clamp(26px, 11cqi, 34px); flex: none; border-radius: 50%; background: #EFEFF4; }
.mini-tasto svg { width: clamp(14px, 5.8cqi, 18px); height: clamp(14px, 5.8cqi, 18px); }
.mini-tasto--chiama { color: var(--primario); }
.mini-tasto--scrivi { color: var(--secondario-forte); }

.fiducia { border-block: 1px solid var(--filo); }
.fiducia ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding: 18px 0; list-style: none; }
.fiducia li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 600; }
.fiducia svg { width: 22px; height: 22px; color: var(--oro-testo); flex: none; }

.sezione { padding-block: 84px; scroll-margin-top: 76px; }
.sezione--tinta { background: var(--terzo-velo); }
.sez-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.titolo-sez { font-size: clamp(34px, 4.2vw, 52px); }
.sez-testa p, .prezzi-testo > p { margin-top: 12px; max-width: 50ch; color: var(--lavagna); }
.prezzi-ios { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 15px; color: var(--lavagna); font-variant-numeric: tabular-nums; }
.prezzi-ios b { font-weight: 650; color: var(--inchiostro); }

.prezzi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.prezzi .titolo-sez { margin-top: 12px; }
.listino { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; border-block: 1px solid var(--filo); }
.voce { padding: 22px 20px 22px 0; }
.voce + .voce { padding-left: 24px; border-left: 1px solid var(--filo); }
.voce-nome { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--lavagna); }
.voce-nome svg { width: 20px; height: 20px; }
.voce-prezzo { margin-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 5vw, 62px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.voce-prezzo small { margin-left: 4px; font-family: var(--f-testo); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--lavagna); }
.ricarica { margin-top: 28px; padding: 20px 22px; border-radius: var(--r-m); background: var(--terzo-velo); }
.ricarica-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ricarica-testa label { font-weight: 650; }
.taglio-valore { font-family: var(--f-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.taglio-range {
  --riempito: 33.33%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 12px 0 2px;
  background: transparent; cursor: pointer;
}
.taglio-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(var(--primario), var(--primario)) 0 0 / var(--riempito) 100% no-repeat, #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--filo-scuro);
}
.taglio-range::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -9px;
  border: 4px solid #FFFFFF; border-radius: 50%; background: var(--primario); box-shadow: 0 2px 8px rgba(var(--ombra), 0.35);
}
.taglio-range::-moz-range-track { height: 8px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--filo-scuro); }
.taglio-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--primario); }
.taglio-range::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border: 4px solid #FFFFFF; border-radius: 50%; background: var(--primario); box-shadow: 0 2px 8px rgba(var(--ombra), 0.35); }
.taglio-range:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 4px; border-radius: 999px; }
.tagli { position: relative; height: 22px; margin-inline: 13px; font-size: 13px; font-weight: 600; color: var(--lavagna); font-variant-numeric: tabular-nums; }
.tagli span { position: absolute; top: 0; left: calc(var(--i) / 6 * 100%); transform: translateX(-50%); white-space: nowrap; cursor: pointer; }
.tagli span.attivo { color: var(--primario); font-weight: 800; }
.ricarica-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ricarica-importo { display: grid; align-content: center; padding: 12px 16px; border-radius: var(--r-s); background: #FFFFFF; }
.ricarica-cifra { font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ricarica-minuti { margin-top: 6px; font-size: 13.5px; color: var(--lavagna); }
.tasto-paga {
  display: grid; align-content: center; justify-items: start; gap: 8px; min-height: 86px; padding: 12px 16px;
  border: 0; border-radius: var(--r-s); background: #FFC439; color: var(--inchiostro); text-align: left; cursor: pointer;
  text-decoration: none;
  box-shadow: 0 14px 28px -16px color-mix(in srgb, #C99100 80%, transparent); transition: background 0.2s, transform 0.15s;
}
.tasto-paga:hover { background: #F2BA36; transform: translateY(-1px); }
.tasto-paga-testo { font-family: var(--f-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.metodi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.metodi svg { width: 26px; height: 26px; }
.paypal { display: inline-flex; font-style: italic; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.paypal b { font-weight: 800; color: #003087; }
.paypal i { color: #009CDE; }
.tasto-paga .paypal { padding: 2px 8px; border-radius: 6px; background: #FFFFFF; font-size: 14px; }
.tasto-paga .metodo-carta {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: #FFFFFF;
  font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--primario);
}
.tasto-paga .metodo-carta svg { width: 18px; height: 18px; }
.ricarica-nota { margin-top: 10px; font-size: 13.5px; color: var(--lavagna); }
.prezzi-foto { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-l); background: var(--fondale); }
.prezzi-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.scorri { position: relative; }
.scorri-voce { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.scorri-voce.attiva { opacity: 1; }
.scorri-dida { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; pointer-events: none; }
.scorri-dida .eroe-punto { background: rgba(255, 255, 255, 0.94); border-radius: 999px; padding: 7px 20px 7px 7px;
  box-shadow: 0 12px 26px -16px rgba(var(--ombra), 0.7); }
@media (prefers-reduced-motion: reduce) { .scorri-voce { transition: none; } }

.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filo-scuro); }
.passo { padding: 26px 28px 4px 0; }
.passo + .passo { padding-left: 28px; border-left: 1px solid var(--filo-scuro); }
.passo-num { font-family: var(--f-incisa); font-size: 42px; line-height: 1; color: var(--oro-testo); }
.passo h3 { margin-top: 14px; font-size: 26px; letter-spacing: -0.03em; }
.passo p { margin-top: 10px; max-width: 34ch; color: var(--lavagna); }

.piede { padding-block: 46px; background: var(--scuro); color: rgba(255, 255, 255, 0.74); }
.piede .wrap { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 20px 40px; }
.piede .parola { color: #FFFFFF; font-size: 24px; }
.piede .parola b { color: color-mix(in srgb, var(--secondario) 55%, #FFFFFF); }
.piede-testo { margin-top: 12px; max-width: 52ch; font-size: 14.5px; }
.piede nav { display: flex; flex-wrap: wrap; gap: 18px; }
.piede nav a { text-decoration: none; font-size: 15px; border-radius: 4px; }
.piede nav a:hover { color: #FFFFFF; }
.piede :focus-visible { outline-color: #FFFFFF; }
.piede-avvertenze { flex-basis: 100%; max-width: 80ch; margin: 4px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }

.avviso {
  position: fixed; left: 50%; bottom: 22px; z-index: 50; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 14px; background: var(--scuro); color: #FFFFFF; font-size: 15px;
  box-shadow: 0 18px 40px -20px rgba(var(--ombra), 0.6);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.avviso.su { opacity: 1; transform: translate(-50%, 0); }

#disponibili { background: var(--carta); }
#disponibili .wrap { max-width: 720px; }
.filtro-ios {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: var(--carta); color: var(--inchiostro); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.10);
}
.filtro-ios svg { width: 22px; height: 22px; }
.filtro-ios[aria-pressed="true"] { background: var(--primario); color: #FFFFFF; }
.lista-ios { display: block; margin-inline: -24px; }
.lista-vuota { margin: 26px 24px 0; padding: 18px 20px; border-radius: 16px; background: var(--terzo-velo); color: var(--lavagna); }
.gruppo-ios-titolo { margin: 22px 24px 4px; font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.gruppo-ios-titolo small { margin-left: 7px; font-family: var(--f-testo); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--lavagna); }
.riga-ios { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding-inline: 24px; background: var(--carta); transition: background 0.15s; }
.riga-ios:not(:last-child)::after { content: ""; position: absolute; left: 92px; right: 0; bottom: 0; height: 1px; background: var(--filo); }
.riga-ios:has(.riga-ios-apri:active) { background: #F2F2F7; }
.riga-ios-apri {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 76px;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.anello-ios { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; }
.anello-ios.online { box-shadow: inset 0 0 0 2.5px var(--stato-libera); }
.anello-ios.busy { box-shadow: inset 0 0 0 2.5px var(--stato-occupata); }
.riga-ios-foto, .tondo-vuoto { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: var(--fondale); }
.tondo-vuoto { background: linear-gradient(135deg, var(--primario) 0 50%, var(--secondario) 50% 100%); }
.riga-ios-testo { display: grid; gap: 2px; min-width: 0; }
.riga-ios-nome { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga-ios-nome { display: flex; align-items: center; gap: 7px; }
.riga-ios-nome > .rin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-ios-comm { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--primario-velo); color: var(--primario); font-size: 12.5px; font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.riga-ios-comm svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
.riga-ios-comm b { font-weight: 700; }
.riga-ios-stato, .scheda-ios-stato { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.3; color: var(--lavagna); white-space: nowrap; }
.riga-ios-stato::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.riga-ios-stato { display: block; overflow: hidden; text-overflow: ellipsis; }
.riga-ios-stato::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.riga-ios-stato [data-minuti] { display: block; padding-left: 14px; }
.riga-ios-stato.online, .scheda-ios-stato.online { color: var(--stato-libera); }
.riga-ios-stato.busy, .scheda-ios-stato.busy { color: var(--stato-occupata); }
.riga-ios-tasti { display: flex; gap: 8px; flex: none; }
.tasto-ios {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: #EFEFF4; cursor: pointer; transition: background 0.15s;
}
.tasto-ios svg { width: 20px; height: 20px; }
.tasto-ios--chiama, .tasto-ios--scrivi { background: var(--tasto-verde); color: #FFFFFF; }
.tasto-ios:active { background: #E2E2E8; }
.tasto-ios--chiama:active, .tasto-ios--scrivi:active { background: var(--tasto-verde-premuto); }
.tasto-ios--occupato { background: var(--tasto-rosso); color: #FFFFFF; cursor: default; }
.tasto-ios[disabled] { background: #EFEFF4; color: #C7C7CC; cursor: not-allowed; }
.riga-assistenza .riga-ios-apri { cursor: default; }
.tondo-assistenza { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #0E7490; color: #FFFFFF; }
.tondo-assistenza svg { width: 26px; height: 26px; }
@media (hover: hover) { .riga-ios:hover { background: #F7F7FA; } }

.scheda-ios {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 48px);
  margin: 0; padding: 0 0 calc(26px + env(safe-area-inset-bottom)); border: 0; border-radius: 26px 26px 0 0;
  background: #F2F2F7; color: var(--inchiostro); overflow-y: auto; overscroll-behavior: contain;
}
.scheda-ios[open] { animation: schedaSale 0.34s cubic-bezier(0.32, 0.72, 0, 1); }
.scheda-ios::backdrop { background: rgba(0, 0, 0, 0.3); }
@keyframes schedaSale { from { transform: translateY(100%); } }
.maniglia { width: 36px; height: 5px; margin: 7px auto 0; border-radius: 3px; background: rgba(60, 60, 67, 0.3); }
.scheda-ios-testa { display: flex; padding: 4px 16px 0; }
.scheda-ios-chiudi { height: 44px; padding: 0 4px; border: 0; background: none; font-size: 17px; font-weight: 600; color: var(--primario); cursor: pointer; }
.scheda-ios-viso { display: grid; justify-items: center; gap: 4px; padding: 2px 20px 18px; text-align: center; }
.scheda-ios-viso .anello-ios { width: 120px; height: 120px; margin-bottom: 8px; }
.scheda-ios-viso .anello-ios.online { box-shadow: inset 0 0 0 3px var(--stato-libera); }
.scheda-ios-viso .anello-ios.busy { box-shadow: inset 0 0 0 3px var(--stato-occupata); }
.scheda-ios-viso img, .scheda-ios-viso .tondo-vuoto { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; background: var(--fondale); }
.scheda-ios-viso .tondo-vuoto { background: linear-gradient(135deg, var(--primario) 0 50%, var(--secondario) 50% 100%); }
.scheda-ios-viso h3 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; }
.scheda-ios-stato { font-size: 16px; font-weight: 600; }
.scheda-ios-tasti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px; }
.scheda-ios-tasti.uno { grid-template-columns: minmax(0, 1fr); }
.scheda-ios-occupata { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 16px; padding: 14px 16px;
  border-radius: 14px; background: var(--carta); font-size: 17px; line-height: 1.3; color: var(--inchiostro); }
.scheda-ios-occupata b { font-weight: 700; }
.scheda-ios-occupata-testo > b:first-child { color: var(--stato-occupata); }
.riquadro-ios {
  display: grid; justify-items: center; gap: 3px; padding: 12px 6px 11px; border: 0; border-radius: 14px;
  background: var(--carta); color: var(--inchiostro); font-size: 15px; font-weight: 650; line-height: 1.2; cursor: pointer;
}
.riquadro-ios svg { width: 26px; height: 26px; }
.riquadro-ios small { font-size: 13px; font-weight: 500; color: var(--lavagna); font-variant-numeric: tabular-nums; }
.riquadro-ios--chiama svg { color: var(--primario); }
.riquadro-ios--scrivi svg { color: var(--secondario-forte); }
.riquadro-ios:active { background: #E9E9EE; }
.riquadro-ios[disabled] { cursor: not-allowed; }
.riquadro-ios[disabled] svg, .riquadro-ios[disabled] span { opacity: 0.35; }
.scheda-ios-nota { margin: 10px 20px 0; font-size: 14px; color: var(--lavagna); text-align: center; }
.gruppo-ios { margin: 20px 16px 0; overflow: hidden; border-radius: 14px; background: var(--carta); }
.gruppo-ios-riga { position: relative; display: grid; gap: 2px; padding: 11px 16px; }
.gruppo-ios-riga + .gruppo-ios-riga::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--filo); }
.gruppo-ios-riga > span { font-size: 13px; color: var(--lavagna); }
.gruppo-ios-riga p { font-size: 16px; line-height: 1.4; }

.sez-ios {
  margin: 24px 32px 7px; font-family: var(--f-testo); font-size: 13px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lavagna);
}
.sez-ios + .gruppo-ios { margin-top: 0; }
.testo-ios { padding: 13px 16px 14px; }
.testo-ios p { font-size: 16.5px; line-height: 1.55; }
.testo-ios p + p { margin-top: 10px; }
.orari { margin: 0; padding: 0; list-style: none; }
.orari li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 16px; font-size: 16px; line-height: 1.35; }
.orari li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--filo); }
.orari-giorno { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--lavagna); }
.orari-fasce { text-align: right; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.fascia { white-space: nowrap; }
.orari-ka { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--lavagna); }
.orari li.oggi .orari-ka { font-weight: 500; }
.orari li.oggi .orari-giorno, .orari li.oggi .orari-fasce { color: var(--inchiostro); font-weight: 700; }
.orari-oggi { padding: 1px 8px; border-radius: 999px; background: var(--primario-velo); color: var(--primario); font-size: 12px; font-weight: 700; }
.sez-ios-nota { margin: 8px 32px 0; font-size: 13.5px; line-height: 1.45; color: var(--lavagna); }
.scheda-ios-pagina {
  display: block; margin: 18px 16px 0; padding: 12px; text-align: center; font-size: 16px; font-weight: 650;
  color: var(--primario); text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 5px;
}

.avvisami {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: calc(100% - 32px); min-height: 50px;
  margin: 8px 16px 0; padding: 10px 16px; border: 0; border-radius: 14px;
  background: var(--primario); color: #FFFFFF; font-size: 16px; font-weight: 650; line-height: 1.25; cursor: pointer;
  transition: background 0.2s;
}
.avvisami svg { width: 20px; height: 20px; flex: none; }
.avvisami:hover { background: var(--primario-scuro); }
.avvisami[disabled] { opacity: 0.7; cursor: progress; }
.avvisami--fatto, .avvisami--fatto:hover { background: var(--libera-velo); color: var(--libera); cursor: default; }
.tasto-ios--avvisa { background: var(--tasto-giallo); color: var(--inchiostro); }
.tasto-ios--avvisa:active { background: var(--tasto-giallo-premuto); }
.tasto-ios--avvisa.fatto { background: var(--libera-velo); color: var(--libera); cursor: default; }
.tasto-ios--avvisa[disabled] { opacity: 0.6; cursor: progress; }

.legenda-ios {
  display: grid; grid-template-columns: max-content minmax(0, max-content); justify-content: space-between; gap: 10px 14px;
  margin: 20px 0 8px; padding: 0 0 0 15px; list-style: none;
  font-size: 14px; line-height: 1.25; color: var(--lavagna);
}
.legenda-ios li { display: flex; align-items: center; gap: 8px; min-width: 0; text-wrap: balance; }
.legenda-tasto { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; }
.legenda-tasto svg { width: 14px; height: 14px; }
@media (min-width: 720px) {
  .legenda-ios { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 26px; }
}
.passi-iphone { display: grid; gap: 10px; margin: 0; padding-left: 22px; font-size: 15.5px; line-height: 1.45; }
.passi-iphone svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--primario); }

.profilo { background: #F2F2F7; }
.profilo-wrap { max-width: 720px; padding-block: 8px 48px; }
.profilo-su { margin: 0; }
.profilo-su a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--primario); text-decoration: none; }
.profilo-su a:hover { text-decoration: underline; text-underline-offset: 4px; }
.profilo-testa { display: grid; justify-items: center; gap: 6px; padding: 6px 0 22px; text-align: center; }
.profilo-testa .anello-ios { width: 144px; height: 144px; margin-bottom: 8px; }
.profilo-testa .anello-ios.online { box-shadow: inset 0 0 0 3.5px var(--stato-libera); }
.profilo-testa .anello-ios.busy { box-shadow: inset 0 0 0 3.5px var(--stato-occupata); }
.profilo-testa img, .profilo-testa .tondo-vuoto { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: var(--fondale); }
.profilo-testa .tondo-vuoto { background: linear-gradient(135deg, var(--primario) 0 50%, var(--secondario) 50% 100%); }
.profilo-testa h1 { font-size: clamp(36px, 7vw, 50px); line-height: 1.05; letter-spacing: -0.04em; color: var(--primario); }
.profilo-prossimo { display: inline-flex; align-items: center; gap: 7px; font-size: 15.5px; color: var(--lavagna); }
.profilo-prossimo svg { width: 18px; height: 18px; flex: none; color: var(--oro-testo); }
.profilo .scheda-ios-tasti { padding: 0; }
.profilo .scheda-ios-occupata { margin: 0; }
.profilo .avvisami { width: 100%; margin: 10px 0 0; }
.profilo .scheda-ios-nota { margin: 12px 0 0; }
.profilo .gruppo-ios { margin: 0; }
.profilo .sez-ios { margin: 30px 16px 7px; }
.profilo .sez-ios-nota { margin: 8px 16px 0; }
.profilo .testo-ios p { font-size: 17px; line-height: 1.6; }
.profilo #disponibili { border-top: 1px solid var(--filo); }

#commenti { scroll-margin-top: 90px; }
.commenti-media { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--filo); }
.commenti-media b { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--primario); font-variant-numeric: tabular-nums; }
.commenti-quanti { font-size: 14px; color: var(--lavagna); }
.stelle-media { position: relative; display: inline-block; font-size: 19px; line-height: 1; letter-spacing: 2px; color: var(--filo-scuro); }
.stelle-media::before { content: '★★★★★'; }
.stelle-media::after { content: '★★★★★'; position: absolute; top: 0; left: 0; width: var(--p, 0%); overflow: hidden; white-space: nowrap; color: var(--oro); }
.commento { position: relative; display: grid; gap: 6px; padding: 14px 16px; }
.commento + .commento::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--filo); }
.commento-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.stelle-voto { font-size: 15px; line-height: 1; letter-spacing: 1px; white-space: nowrap; color: var(--filo-scuro); }
.stelle-voto b { font-weight: inherit; color: var(--oro); }
.commento-chi { font-size: 14px; color: var(--lavagna); }
.commento-chi b { font-weight: 650; color: var(--inchiostro); }
.commento p { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.commento-verificato { justify-self: start; font-size: 12.5px; font-weight: 650; color: var(--libera); }
.commenti-vuoto { padding: 14px 16px; font-size: 15.5px; color: var(--lavagna); }
.profilo .commento-box { display: grid; gap: 12px; margin: 12px 0 0; padding: 16px; }
.commento-form { display: grid; gap: 12px; }
.commento-titolo { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--primario); text-wrap: balance; }
.commento-etichetta { margin-bottom: -6px; font-size: 14px; font-weight: 650; color: var(--lavagna); }
.commento-etichetta small { font-size: 13px; font-weight: 500; }
.stelle-scegli { display: flex; gap: 2px; margin-left: -6px; }
.stelle-scegli button {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px;
  background: none; font-size: 32px; line-height: 1; color: var(--filo-scuro); cursor: pointer;
}
.stelle-scegli button.accesa { color: var(--oro); }
.stelle-scegli button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.commento-box textarea, .commento-box input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--filo-scuro); border-radius: var(--r-s);
  background: var(--carta); font: inherit; font-size: 16px; line-height: 1.45; color: var(--inchiostro);
}
.commento-box textarea { min-height: 112px; resize: vertical; }
.commento-box textarea:focus, .commento-box input:focus { outline: 2px solid var(--primario); outline-offset: 0; border-color: transparent; }
.commento-bottone {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 10px 16px;
  border: 0; border-radius: 14px; background: var(--primario); color: #FFFFFF; font-size: 16px; font-weight: 650; cursor: pointer;
  transition: background 0.2s;
}
.commento-bottone:hover { background: var(--primario-scuro); }
.commento-bottone[disabled] { opacity: 0.7; cursor: progress; }
.commento-nota { font-size: 13.5px; line-height: 1.45; color: var(--lavagna); }
.commento-errore { font-size: 14px; font-weight: 600; color: #B42318; }
.commento-errore:empty { display: none; }
.commento-stato { padding: 12px 14px; border-radius: var(--r-s); font-size: 15px; line-height: 1.45; }
.commento-stato.attesa { background: #FFF4DB; color: #6E4F0B; }
.commento-stato.ok { background: var(--libera-velo); color: var(--libera); }
.commento-modifica {
  justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font-size: 15.5px; font-weight: 650;
  color: var(--primario); text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; cursor: pointer;
}

.lista-tutte-link { margin-top: 26px; font-size: 16px; }

.sezione--tutte { padding-top: 40px; }
#tutte .wrap { max-width: 720px; }
.riga-ios-apri { color: inherit; text-decoration: none; }
a.riga-ios-apri:hover .riga-ios-nome { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }
.lista-tutte .anello-ios.offline .riga-ios-foto { opacity: 0.55; filter: grayscale(0.6); }

.barra-ios { display: none; }

@media (min-width: 861px) {
  .scheda-ios { inset: 0; width: min(440px, calc(100% - 48px)); max-height: min(800px, calc(100dvh - 64px)); margin: auto; padding-bottom: 22px; border-radius: 26px; }
  .scheda-ios[open] { animation: schedaAppare 0.24s ease-out; }
  .scheda-ios .maniglia { display: none; }
  .scheda-ios-testa { padding-top: 10px; }
}
@keyframes schedaAppare { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@media (max-width: 1100px) {
  .eroe .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .eroe { padding-block: 36px 28px; }
  .eroe .wrap, .prezzi { grid-template-columns: minmax(0, 1fr); }
  .eroe .wrap { gap: 26px; }
  .mazzo { --mazzo-l: 380px; --m-su: 66px; --m-dx: 24px; --m-giu: 66px; --m-sx: 24px; --piccola: 0.44; }
  .dorso.d1, .dorso.d6 { display: none; }
  .dorso.d5 { --cx: 0.1; --cy: 0.12; --a: -13deg; }
  .mazzo[data-disposizione="destra"] { --mazzo-l: 380px; --m-su: 16px; --m-dx: 48px; --m-giu: 110px; --m-sx: 0px; --passo: 4deg; }
  .mazzo[data-disposizione="ventaglio"] { --mazzo-l: 380px; --m-su: 34px; --m-dx: 24px; --m-giu: 80px; --m-sx: 24px; --passo: 6deg; }
  .mazzo[data-disposizione="scala"] { --mazzo-l: 380px; --m-su: 76px; --m-dx: 48px; --m-giu: 20px; --m-sx: 0px; --passo-x: 10px; --passo-y: -12px; }
  .mazzo[data-disposizione="corona"] { --m-su: 96px; --m-giu: 20px; }
  .mazzo[data-disposizione="tavolo"] { --m-su: 20px; --m-giu: 104px; }
  .mazzo[data-disposizione] .dorso.d1, .mazzo[data-disposizione] .dorso.d6 { display: block; }
  .mazzo[data-disposizione="sparse"] .dorso.d1, .mazzo[data-disposizione="sparse"] .dorso.d6 { display: none; }
  .mazzo[data-disposizione="corona"] .dorso.d5 { --cx: 0.12; --a: -14deg; }
  .mazzo[data-disposizione="corona"] .dorso.d6 { --cx: 0.88; --a: 14deg; }
  .mazzo[data-disposizione="tavolo"] .dorso.d5 { --cx: 0.12; --a: 13deg; }
  .mazzo[data-disposizione="tavolo"] .dorso.d6 { --cx: 0.88; --a: -13deg; }
  .prezzi { gap: 32px; }
  .prezzi-foto { order: -1; aspect-ratio: 3 / 2; }
  .sezione { padding-block: 60px; }
  .barra-ios {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }
  .barra-ios a, .barra-ios button {
    display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 6px 2px 5px; border: 0; border-radius: 999px;
    background: none; color: var(--inchiostro); font-size: 11px; font-weight: 600; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .barra-ios svg { width: 24px; height: 24px; }
  .barra-ios span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .barra-ios [aria-current="true"] { background: rgba(118, 118, 128, 0.14); color: var(--primario); }
  .piede { padding-bottom: calc(46px + 84px + env(safe-area-inset-bottom)); }
  .avviso { bottom: calc(92px + env(safe-area-inset-bottom)); }
  html body .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float="bottom-left"]:not([data-tp-anchored]) {
    margin-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 760px) {
  .fiducia ul { grid-template-columns: minmax(0, 1fr); }
  .passi { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .passo, .passo + .passo { padding: 22px 0; border-left: 0; border-top: 1px solid var(--filo-scuro); }
}
@media (max-width: 520px) {
  .wrap { padding-inline: 16px; }
  .testata .wrap { height: 64px; gap: 12px; }
  .parola { font-size: 23px; }
  .marchio svg { width: 26px; height: 30px; }
  .link-btn { display: none; }
  .credito-etichetta { display: none; }
  .azioni.con-credito .btn-piccolo { display: none; }
  .eroe-sotto { font-size: 17.5px; }
  .eroe-punti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 20px; }
  .eroe-punto { gap: 8px; }
  .eroe-icona { width: 42px; height: 42px; }
  .eroe-icona svg { width: 22px; height: 22px; }
  .eroe-punto--no .eroe-icona::after { width: 35px; }
  .eroe-punto > span:last-child { font-size: 13.5px; }
  .eroe-punto b { font-size: 14.5px; }
  .eroe-punto:last-child { grid-column: 1 / -1; }
  .scorri-dida { left: 10px; right: 10px; bottom: 10px; }
  .scorri-dida .eroe-punto { padding: 5px 16px 5px 5px; }
  .listino { grid-template-columns: minmax(0, 1fr); }
  .voce + .voce { padding-left: 0; border-left: 0; border-top: 1px solid var(--filo); }
  .ricarica-riga { grid-template-columns: minmax(0, 1fr); }
  .lista-ios { margin-inline: -16px; }
  .riga-ios { padding-inline: 16px; }
  .riga-ios:not(:last-child)::after { left: 84px; }
  .gruppo-ios-titolo { margin-inline: 16px; }
  .lista-vuota { margin-inline: 16px; }
  .sezione--tutte { padding-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.testo-legale { max-width: 760px; padding-block: 48px 72px; }
.testo-legale h1 { font-size: clamp(34px, 4.4vw, 48px); color: var(--primario); }
.testo-legale .data { margin-top: 10px; color: var(--lavagna); font-size: 15px; }
.testo-legale h2 { margin-top: 34px; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.testo-legale p, .testo-legale li { margin-top: 10px; color: #2D2A33; }
.testo-legale ul { margin: 10px 0 0; padding-left: 20px; }
.testo-legale a { color: var(--primario); text-decoration-color: var(--oro); text-underline-offset: 4px; }

.foglio {
  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 24px;
  background: #FFFFFF; color: var(--inchiostro); box-shadow: 0 40px 80px -30px rgba(var(--ombra), 0.5);
}
.foglio::backdrop { background: rgba(var(--ombra), 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.foglio-dentro { display: grid; gap: 18px; padding: 20px 24px 26px; }
.foglio-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.parola--piccola { font-size: 21px; }
.foglio-chiudi { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--nebbia); font-size: 24px; line-height: 1; cursor: pointer; }
.passo-foglio { display: grid; gap: 12px; }
.foglio-titolo { font-size: 32px; letter-spacing: -0.03em; }
.foglio-per { margin-top: -4px; font-size: 15px; color: var(--lavagna); }
.campo-numero {
  display: flex; align-items: stretch; height: 60px; overflow: hidden;
  border: 1.5px solid var(--filo-scuro); border-radius: 16px; background: #FFFFFF;
}
.campo-numero:focus-within, .codice:focus { border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-velo); }
.prefisso { display: grid; place-items: center; padding: 0 12px 0 16px; border-right: 1px solid var(--filo); font-weight: 700; color: var(--lavagna); }
.campo-numero input {
  flex: 1; min-width: 0; padding: 0 14px; border: 0; outline: 0; background: transparent; color: inherit;
  font: inherit; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.codice {
  width: 100%; height: 66px; padding: 0 0 0 0.5em; border: 1.5px solid var(--filo-scuro); border-radius: 16px; outline: 0;
  color: inherit; font: inherit; font-size: 30px; font-weight: 700; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums;
}
.errore { min-height: 18px; font-size: 13.5px; font-weight: 600; color: #B3261E; }
.errore:empty { min-height: 0; }
.btn-largo {
  width: 100%; height: 58px; border: 0; border-radius: 16px; background: var(--primario); color: #FFFFFF;
  font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.btn-largo:hover { background: var(--primario-scuro); }
.btn-largo[disabled] { opacity: 0.6; cursor: progress; }
.foglio-legale { font-size: 12.5px; color: var(--lavagna); text-align: center; }
#ts-box:empty, #ts-box.ts-fatto { display: none; }
.foglio-spunta { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--lavagna); cursor: pointer; }
.foglio-spunta input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primario); cursor: pointer; }
.foglio-legale a { color: inherit; }
.inviato { font-size: 15px; color: var(--lavagna); }
.link-piccolo {
  justify-self: center; padding: 4px; border: 0; background: none; color: var(--primario); cursor: pointer;
  font-size: 14.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px;
}
.inviato .link-piccolo { padding: 0; font-size: inherit; }
.ricarica--foglio { margin-top: 0; padding: 16px 16px 12px; }
.ricarica--foglio .ricarica-minuti { margin-top: 4px; }
.metodi-pagamento { display: grid; gap: 10px; }
.metodo {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; border-radius: 16px;
  font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.metodo svg { width: 24px; height: 24px; }
.metodo--carta { border: 0; background: var(--primario); color: #FFFFFF; }
.metodo--carta:hover { background: var(--primario-scuro); }
.metodo--paypal { flex-direction: column; gap: 1px; border: 0; background: #FFC439; color: #2C2E2F; }
.metodo--paypal:hover { background: #F2BA36; }
.metodo--paypal .paypal { font-size: 22px; }
.metodo-sub { font-size: 11.5px; font-weight: 600; opacity: 0.8; }
.metodo[disabled] { opacity: 0.6; cursor: progress; }
.paypal-box { min-height: 50px; }
.paypal-box:empty { display: none; }
.metodi-oppure { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.metodi-oppure::before, .metodi-oppure::after { content: ""; flex: 1; height: 1px; background: #E2E6EE; }
.metodi-oppure span { color: #8A93A6; font-size: 13px; font-weight: 600; text-transform: lowercase; }
.paypal-card-sez { display: grid; gap: 6px; }
.paypal-card-sez[hidden] { display: none; }
.paypal-card-label { font-size: 13px; font-weight: 600; color: #5A6377; }
.coupon-riga { display: flex; gap: 8px; }
.coupon-campo {
  flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 1.5px solid var(--filo-scuro); border-radius: 14px; outline: 0;
  background: #FFFFFF; color: inherit; font: inherit; font-size: 16px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
}
.coupon-campo::placeholder { color: var(--lavagna); font-weight: 500; letter-spacing: 0; text-transform: none; }
.coupon-campo:focus { border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-velo); }
.coupon-applica {
  flex: none; min-width: 92px; height: 50px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--primario-velo); color: var(--primario); font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.coupon-applica:hover { background: #D9DEEA; }
.coupon-applica[disabled] { opacity: 0.6; cursor: progress; }
.coupon.applicato .coupon-campo { border-color: var(--libera); background: var(--libera-velo); }
.coupon.applicato .coupon-applica { background: var(--libera); color: #FFFFFF; cursor: default; }
.coupon-esito { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #B3261E; }
.coupon-esito:empty { display: none; }
.coupon-esito.ok { color: var(--libera); font-weight: 700; }
.foglio-piede { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--lavagna); }
.foglio-piede a { color: inherit; }
.cf-turnstile { display: flex; justify-content: center; }
.credito.appena { animation: creditoArriva 1.1s ease-out 2; }
@keyframes creditoArriva {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--libera) 45%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--libera) 0%, transparent); }
}
button.credito { border: 0; cursor: pointer; font: inherit; }