/* ═══════════════════════════════════════════════════════════════════════════
   cartomanti.it — Diego (2026-09-19)
   La grafica della demo ArcanoViola (SITI/Arcano/demo), tavolozza «notte» (scelta di Diego):
   blu notte per la chiamata e i titoli, rosso per la chat, filo d'oro nei dettagli.
   Lista delle cartomanti come l'app Telefono dell'iPhone a ogni larghezza; scheda che sale dal
   basso (al centro sul computer). Tolti: barra della demo, scelta dei colori, recensioni di prova.
   ═══════════════════════════════════════════════════════════════════════════ */
: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;
  /* Diego (2026-09-19): «il cerchio verde sulla foto fallo del verde di WhatsApp e il rosso per le occupate più acceso»,
     poi «anche le scritte in consulto e disponibile»: anello e scritta di stato usano questi due. */
  --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; }

/* ── Carte di faccia in stile tarocchi (le figure sono della demo, senza scritte dentro) ── */
.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 ─────────────────────────────────────────────────────────────── */
.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: 34px; height: 34px; flex: none; }
.marchio-carta { fill: var(--primario); stroke: var(--primario); stroke-width: 1.5; }
.marchio-filetto { fill: none; stroke: color-mix(in srgb, var(--oro) 80%, transparent); stroke-width: 0.8; }
.marchio-stella { fill: var(--oro); }
.parola {
  font-family: var(--f-display); font-weight: 800; font-size: 27px;
  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: dopo la prima ricarica resta sempre visibile nella testata */
.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; }

/* ── Pulsanti: blu notte per la chiamata, rosso per la chat ────────────────── */
.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; }

/* ── Apertura ────────────────────────────────────────────────────────────── */
.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-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;
}

/* Il mazzo: carte sparse dietro la carta con le istruzioni (disposizione «Sparse» della demo) */
.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%) rotate(var(--a));
}
.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; }
.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); }

/* ── Promesse ─────────────────────────────────────────────────────────────── */
.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; }

/* ── Sezioni ──────────────────────────────────────────────────────────────── */
.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 */
.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; 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; }
.ricarica-nota { margin-top: 10px; font-size: 13.5px; color: var(--lavagna); }
.prezzi-foto { margin: 0; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: var(--r-l); background: var(--fondale); }
.prezzi-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* Come funziona: una sequenza vera, numerata come gli arcani */
.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 */
.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; }
/* Avvertenze legali: riga tutta sua in fondo, più piccola */
.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); }

/* ── Lista come l'app Telefono dell'iPhone (a ogni larghezza) ─────────────── */
#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 intorno alla foto: verde per chi è libera, rosso per chi è in consulto (come gli stati di WhatsApp) */
.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); }
/* Senza foto: cerchio pieno colorato, mai l'iniziale (regola del sito) */
.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-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; }
/* Nella lista la scritta di stato resta nella sua colonna: se non ci sta, «…» invece di finire sotto i tasti */
.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.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; }
/* Diego (2026-09-19): «per quelle libere la cornetta verde sia per la chat che per la chiamata;
   per quelle in consulto la classica cornetta rossa che indica occupato». */
.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» (Servizio Clienti): non apre una scheda, solo i tasti */
.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 della cartomante che sale dal basso (al centro sul computer) */
.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); }
/* Cartomante in consulto: al posto dei tasti, la cornetta rossa e «Occupata da N min» */
.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; }

/* Barra delle schede che galleggia in basso, solo sul telefono */
.barra-ios { display: none; }

/* ── Larghezze ───────────────────────────────────────────────────────────── */
@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; }
  /* Sul telefono la carta con le istruzioni prende quasi tutta la larghezza; restano le quattro
     carte negli angoli (quelle ai lati si vedrebbero tagliate dal bordo). */
  .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; }
  .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)); }
  /* Bottoncino delle preferenze cookie di iubenda (in basso a sinistra): sopra la barra, non sotto.
     iubenda lo mette a 16 px con margin !important (0,4,0): qui html body + stesso selettore. */
  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: 30px; height: 30px; }
  .link-btn { display: none; }
  .credito-etichetta { display: none; }
  .azioni.con-credito .btn-piccolo { display: none; }
  .eroe-sotto { font-size: 17.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; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Pagine di testo (termini) ───────────────────────────────────────────── */
.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 di accesso e pagamento: pochi campi, nessuna frase in più (demo, Diego 19/09) ── */
.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; }
/* Riquadro Cloudflare: non occupa spazio finché non compare, e sparisce appena il controllo è passato */
#ts-box:empty, #ts-box.ts-fatto { display: none; }
/* Spunta facoltativa per gli SMS: piccola, sopra al tasto, mai pre-segnata */
.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[disabled] { opacity: 0.6; cursor: progress; }
.paypal-box { min-height: 50px; }
.paypal-box:empty { display: none; }
.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; }