/* ══ RACCONTATI — l'invito della scena chiusa (benvenuto/auth) ══════════════
   Invece di «non è pronto»: un invito a dire chi sei, coi ritratti degli agenti. Il modal si apre con
   `:target` (niente copione); le pastiglie sono radio/checkbox nativi vestiti.
   Telefono prima (390px); campi a 16px (se no iOS zooma). */

.rc-via{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; padding:.85rem 1.6rem;
  border-radius:999px; background:var(--tema-theme, #1f8fb0); color:#fff; font-weight:700; font-size:1rem;
  text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.rc-via:active{ transform:scale(.98); }
/* Nel benvenuto sta sotto i monumenti: lo spazio intorno lo dà il contenitore. */
/* I due bottoni dell'ingresso, coi colori nostri (land.css): il blu scuro
   `--deep` e il giallo `--gold`. «Raccontati» pieno, «Accedi» a contorno blu
   (come primary e outline-primary di Bootstrap: fondo trasparente, bordo e
   scritta blu, e al tocco si riempie). Stessa misura, stessa forma. */
.rc-via-posto{ margin-top:0; padding:.8rem 1.5rem; font-size:1.02rem; gap:.5rem; border:2px solid var(--deep, #123f6e);
  background:var(--deep, #123f6e); color:var(--gold, #ffd98a); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.rc-via-posto.ac-via{ background:transparent; color:var(--deep, #123f6e); border-color:var(--deep, #123f6e); box-shadow:none; }
.rc-via-posto.ac-via:hover, .rc-via-posto.ac-via:active{ background:var(--deep, #123f6e); color:var(--gold, #ffd98a); }

/* Il velo + il foglio: nascosti finché l'ancora non è il bersaglio. */
.rc-velo{ display:none; position:fixed; inset:0; z-index:1200; background:rgba(8,18,30,.6);
  align-items:flex-end; justify-content:center; }
.rc-velo:target{ display:flex; }
/* `dvh` e non solo `vh`: sul telefono `vh` conta anche la barra del browser, e
   il fondo del foglio lungo («Chi sei?») finiva sotto la barra (18/10/2026). */
.rc-modal{ position:relative; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; overflow-y:auto;
  overflow-x:hidden; -webkit-overflow-scrolling:touch; background:#fff; border-radius:20px 20px 0 0; padding:1.2rem 1.1rem 1.6rem; }
.rc-x{ position:absolute; top:.6rem; right:.7rem; width:2.2rem; height:2.2rem; border-radius:50%;
  display:grid; place-items:center; background:rgba(16,36,58,.06); color:#10243a; font-size:1.4rem; text-decoration:none; }
.rc-tit{ margin:.2rem 0 .2rem; font-size:1.3rem; color:#10243a; }
.rc-sotto{ margin:0 0 1rem; font-size:.86rem; color:#5a6772; line-height:1.4; }

.rc-form{ display:grid; gap:1rem; }
/* Un fieldset è largo almeno quanto il suo contenuto più largo: min-width 0
   lo tiene dentro il modal (il titolo dei beta è su una riga sola). */
.rc-gruppo{ border:0; margin:0; padding:0; min-width:0; }
.rc-legg{ font-size:.82rem; color:#5a6772; margin:0 0 .4rem; padding:0; }
.rc-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.rc-chip{ cursor:pointer; }
.rc-chip input{ position:absolute; opacity:0; width:0; height:0; }
.rc-chip span{ display:inline-block; padding:.5rem .9rem; border-radius:999px; font-size:.9rem;
  background:#fff; border:1px solid rgba(16,36,58,.18); color:#10243a; }
.rc-chip input:checked + span{ background:var(--tema-theme, #1f8fb0); border-color:var(--tema-theme, #1f8fb0); color:#fff; }
.rc-chip input:focus-visible + span{ outline:2px solid var(--tema-theme, #1f8fb0); outline-offset:2px; }

.rc-riga2{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.rc-campo{ display:grid; gap:.3rem; font-size:.82rem; color:#5a6772; }
.rc-campo input, .rc-campo select{ font-size:16px; padding:.7rem .8rem; border-radius:12px;
  border:1px solid rgba(16,36,58,.18); background:#fff; color:#10243a; width:100%; }
.rc-email{ margin-top:.2rem; }

.rc-manda{ border:0; border-radius:14px; padding:.95rem; font-size:1rem; font-weight:700;
  background:var(--tema-theme, #1f8fb0); color:#fff; cursor:pointer; }
.rc-manda:active{ transform:scale(.99); }
.rc-nota{ margin:0; font-size:.74rem; color:#8a96a0; text-align:center; }
.rc-nota a{ color:inherit; text-decoration:underline; }

/* ═══ LO STILE DEGLI AGENTI ══════════════════════════════════════════════════
   I ritratti disegnati sui fondi pastello (gli stessi di Andrea, Clara, Nino…),
   che entrano uno dopo l'altro e poi saltellano piano. Chi chiede meno
   movimento (prefers-reduced-motion) li vede fermi. */

/* La parata in cima: cinque ritratti che si sovrappongono un po'. */
.rc-parata{ display:flex; justify-content:center; margin:0 0 .6rem; }
.rc-volto{ width:64px; height:64px; border-radius:50%; border:3px solid #fff; margin:0 -7px;
  box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff;
  animation:rc-entra .55s cubic-bezier(.3,1.6,.5,1) both, rc-saltella 3.2s ease-in-out .7s infinite; }
.rc-v2{ animation-delay:.08s, .9s; }
.rc-v3{ animation-delay:.16s, 1.1s; width:76px; height:76px; z-index:1; }
.rc-v4{ animation-delay:.24s, 1.3s; }
.rc-v5{ animation-delay:.32s, 1.5s; }

@keyframes rc-entra{ from{ opacity:0; transform:translateY(18px) scale(.6); } to{ opacity:1; transform:none; } }
@keyframes rc-saltella{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* La scintilla del bottone: gira e pulsa. */
.rc-scintilla{ display:inline-block; animation:rc-scintilla 2.4s ease-in-out infinite; }
@keyframes rc-scintilla{ 0%, 100%{ transform:rotate(0) scale(1); opacity:.85; } 50%{ transform:rotate(180deg) scale(1.25); opacity:1; } }

/* «Chi sei?» un po' più grande, ed entra con un piccolo salto. */
.rc-velo:target .rc-modal{ animation:rc-sale .35s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes rc-sale{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
.rc-tit{ font-size:1.5rem; }

/* «Cosa fai»: una griglia di ritratti; quello scelto salta e prende il suo colore. */
/* Colonne uguali (minmax 0): con «1fr» una parola lunga («Commerciante»)
   allargava la sua colonna e la griglia usciva dal modal. Sotto i 360px
   quattro ritratti non ci stanno: tre per riga. */
.rc-chi{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.5rem .3rem; }
@media (max-width:359px){ .rc-chi{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* A capo solo fra una parola e l'altra («Content» / «creator»): «anywhere» spezzava
   anche dentro le parole. Una parola più larga della colonna si spezza lo stesso. */
.rc-ritratto span{ max-width:100%; overflow-wrap:break-word; hyphens:manual; }
.rc-ritratto{ position:relative; display:grid; justify-items:center; gap:.25rem; cursor:pointer;
  font-size:.74rem; color:#10243a; text-align:center; }
.rc-ritratto input{ position:absolute; opacity:0; width:0; height:0; }
.rc-ritratto img{ width:58px; height:58px; border-radius:50%; border:3px solid transparent;
  transition:transform .2s, filter .2s, border-color .2s; }
.rc-chi .rc-ritratto input:checked + img{ filter:none; border-color:var(--rc-c, #1f8fb0);
  animation:rc-salto .45s cubic-bezier(.3,1.8,.5,1); transform:scale(1.08); }
.rc-ritratto input:checked ~ span{ font-weight:700; }
.rc-ritratto input:focus-visible + img{ outline:2px solid var(--tema-theme, #1f8fb0); outline-offset:2px; }
@keyframes rc-salto{ 0%{ transform:scale(1); } 40%{ transform:scale(1.22) rotate(-6deg); } 100%{ transform:scale(1.08); } }

/* Il colore di ognuno: quello del suo fondo, un tono più deciso. */
[data-c="1"]{ --rc-c:#5aa9d6; } [data-c="2"]{ --rc-c:#e8a15f; } [data-c="3"]{ --rc-c:#7d83d9; } [data-c="4"]{ --rc-c:#e48aa0; }
[data-c="5"]{ --rc-c:#5fb86f; } [data-c="6"]{ --rc-c:#9b7fc4; } [data-c="7"]{ --rc-c:#d9b23a; }

/* «Vivi in Sicilia?»: Sì e No, metà riga ciascuno. */
.rc-due{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.rc-due .rc-chip span{ display:block; text-align:center; padding:.75rem .9rem; font-size:1rem; }
/* Sì e No: due tasti da toccare, non due etichette. Un gradiente appena
   accennato, un filo di luce in alto (inset bianco) e un'ombra corta e morbida
   in basso — come un tasto di vetro opaco. Scelto: il colore del tema, con la
   stessa luce sopra e un velo più scuro sotto. */
.rc-due .rc-chip span{ font-weight:600; border-radius:14px; border:1px solid rgba(16,36,58,.10);
  background:linear-gradient(180deg, #ffffff 0%, #f4f8fb 60%, #eaf1f7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(16,36,58,.06),
             0 1px 1px rgba(16,36,58,.06), 0 6px 14px -8px rgba(16,36,58,.35);
  transition:transform .12s ease, box-shadow .2s ease; }
.rc-due .rc-chip:active span{ transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,36,58,.12); }
.rc-due .rc-chip input:checked + span{ color:#fff; border-color:rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.10) 100%), var(--tema-theme, #1f8fb0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.12),
             0 8px 18px -10px var(--tema-theme, #1f8fb0); }

/* Il modal ha la parata in cima, più piccola. */
.rc-modal .rc-parata{ margin:.2rem 0 .4rem; }
.rc-modal .rc-volto{ width:46px; height:46px; }
.rc-modal .rc-v3{ width:54px; height:54px; }
.rc-tit{ text-align:center; }
.rc-sotto{ text-align:center; }

/* Le pastiglie col loro segno; scelte, fanno un piccolo salto. */
.rc-chip span i{ font-style:normal; }
.rc-chip input:checked + span{ animation:rc-salto-p .3s ease-out; }
@keyframes rc-salto-p{ 50%{ transform:scale(1.08); } }

.rc-manda{ font-size:1.05rem; }

/* Da un passo all'altro il foglio cresce (o cala) scorrendo, e il passo nuovo
   entra in dissolvenza (raccontati.js, passo()). Durante, niente barra di
   scorrimento. */
.rc-modal.rc-cresce{ overflow:hidden; transition:height .45s cubic-bezier(.22,.9,.3,1); }
.rc-passo-entra{ animation:rc-passo-entra .4s ease-out both; }
@keyframes rc-passo-entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .rc-passo-entra,
  .rc-volto, .rc-scintilla, .rc-velo:target .rc-modal, .rbt-foglio, .rbt-fig-ic, .rbt-velo, .rc-chi .rc-ritratto input:checked + img,
  .rc-chip input:checked + span{ animation:none; }
}

/* ═══ IL MODAL A TRE PASSI (benvenuto) ═══════════════════════════════════════
   Aperto dal bottone (`:target`) o dal server (`.rc-aperto`, chi torna dal link
   della mail). I passi si scambiano sul posto (assets/js/raccontati.js). */
.rc-velo.rc-aperto{ display:flex; }
.rc-passo[hidden]{ display:none; }
.rc-centro{ text-align:center; display:grid; justify-items:center; gap:.4rem; padding:.4rem 0 .6rem; }

/* Il segno del mestiere, in un tondino appeso al ritratto. */
.rc-ritratto{ position:relative; }
.rc-badge{ position:absolute; top:37px; left:calc(50% + 13px); width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.95rem; font-weight:400; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.2); pointer-events:none; transition:transform .2s; }
.rc-ritratto input:checked ~ .rc-badge{ transform:scale(1.2) rotate(-10deg); }

/* La mail sbagliata, il codice che non va: una riga sola, rossa. */
.rc-errore{ margin:0; font-size:.84rem; color:#c0392b; text-align:center; }
.rc-errore[hidden]{ display:none; }
.rc-campo input[aria-invalid="true"]{ border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.rc-manda.rc-va{ opacity:.6; }
.rc-chiudi{ display:inline-block; text-decoration:none; text-align:center; min-width:10rem; margin-top:.4rem; }

/* 2. La busta che salta, e il codice grande. */
.rc-busta{ font-size:3.4rem; animation:rc-busta 1.4s ease-in-out infinite; }
@keyframes rc-busta{ 0%, 100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-10px) rotate(4deg); } }
.rc-cifre{ width:12rem; max-width:100%; text-align:center; font-size:1.9rem; letter-spacing:.18em; padding:.6rem .4rem;
  border-radius:14px; border:2px solid rgba(16,36,58,.18); color:#10243a; background:#fff; font-variant-numeric:tabular-nums; }
.rc-cifre:focus{ outline:none; border-color:var(--tema-theme, #1f8fb0); }

/* 3. La festa: coriandoli che piovono, ritratti che saltano. */
.rc-festa{ position:relative; width:100%; height:0; }
.rc-festa i{ position:absolute; top:-10px; font-style:normal; font-size:1.4rem; opacity:0;
  animation:rc-coriandolo 2.2s ease-in var(--d, 0s) infinite; }
.rc-festa i:nth-child(1){ left:6%;  --d:0s; }   .rc-festa i:nth-child(2){ left:20%; --d:.5s; }
.rc-festa i:nth-child(3){ left:34%; --d:.2s; }  .rc-festa i:nth-child(4){ left:48%; --d:.8s; }
.rc-festa i:nth-child(5){ left:62%; --d:.3s; }  .rc-festa i:nth-child(6){ left:74%; --d:1s; }
.rc-festa i:nth-child(7){ left:86%; --d:.6s; }  .rc-festa i:nth-child(8){ left:94%; --d:1.3s; }
@keyframes rc-coriandolo{ 0%{ opacity:0; transform:translateY(0) rotate(0); } 15%{ opacity:1; }
  100%{ opacity:0; transform:translateY(220px) rotate(300deg); } }
.rc-salti .rc-volto{ animation:rc-entra .55s cubic-bezier(.3,1.6,.5,1) both, rc-salto-festa .9s ease-in-out .6s infinite; }
.rc-salti .rc-v2{ animation-delay:.08s, .75s; } .rc-salti .rc-v3{ animation-delay:.16s, .9s; }
.rc-salti .rc-v4{ animation-delay:.24s, 1.05s; } .rc-salti .rc-v5{ animation-delay:.32s, 1.2s; }
@keyframes rc-salto-festa{ 0%, 100%{ transform:translateY(0); } 40%{ transform:translateY(-16px) rotate(-6deg); } }

@media (prefers-reduced-motion: reduce){
  .rc-busta, .rc-festa i, .rc-salti .rc-volto{ animation:none; }
  .rc-festa{ display:none; }
}

/* ═══ I BETA TESTER — una card con l'header, e una riga per cosa ══════════════
   In cima la fascia (titolo + che cosa vuol dire), da bordo a bordo: la card
   non ha padding suo, ce l'hanno l'header e l'elenco; overflow:hidden fa
   seguire alla fascia gli angoli tondi. Sotto, un interruttore a slitta. */
.rbt{ border-radius:18px; overflow:hidden; border:1px solid rgba(31,110,180,.12);
  background:linear-gradient(170deg, #ffffff 0%, #f3f8fc 60%, #e9f2f9 100%);
  box-shadow:0 6px 18px -12px rgba(16,36,58,.35), inset 0 1px 0 #fff; }
.rbt-testa{ padding:.8rem .95rem .75rem;
  background:linear-gradient(180deg, rgba(31,143,176,.15) 0%, rgba(31,143,176,.08) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(16,36,58,.10); }
.rbt-tit{ margin:0; font-size:.95rem; font-weight:700; line-height:1.3; color:#10243a; }
.rbt-tit i{ font-style:normal; }
.rbt-sotto{ margin:.3rem 0 0; font-size:.82rem; line-height:1.4; color:#4d5b67; }
.rbt-voci{ padding:.15rem .95rem .3rem; }
.rbt-voce{ display:flex; align-items:center; gap:.7rem; padding:.55rem 0; cursor:pointer; font-size:.95rem; color:#10243a;
  border-top:1px solid rgba(16,36,58,.08); }
.rbt-voce:first-child{ border-top:0; }
/* L'icona: un tondino tenue col segno del colore del tema. */
.rbt-ic{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  color:var(--tema-theme, #1f8fb0); background:rgba(31,143,176,.10); }
.rbt-ic .rc-ico{ width:18px; height:18px; stroke-width:1.8; }
.rbt-nome{ flex:1; min-width:0; line-height:1.3; }
/* Sotto il nome, cosa vuol dire: piccolo e grigio, per capire senza indovinare. */
.rbt-cosa{ display:block; margin-top:.15rem; font-size:.78rem; line-height:1.35; color:#5a6772; }
.rbt-voce input{ position:absolute; opacity:0; width:0; height:0; }
.rbt-int{ position:relative; flex:none; width:46px; height:28px; border-radius:999px; background:rgba(16,36,58,.2); transition:background .2s; }
.rbt-int::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
.rbt-voce input:checked + .rbt-int{ background:var(--tema-theme, #1f8fb0); }
.rbt-voce input:checked + .rbt-int::after{ transform:translateX(18px); }
.rbt-voce input:focus-visible + .rbt-int{ outline:2px solid var(--tema-theme, #1f8fb0); outline-offset:2px; }
/* La riga apre la scheda; solo l'interruttore accende. La «i» sta prima
   della slitta: un tondino col contorno, che al tocco si riempie. */
.rbt-sw{ flex:none; display:flex; cursor:pointer; }
.rbt-info{ flex:none; display:grid; place-items:center; width:26px; height:26px; padding:0; border-radius:50%;
  border:1.5px solid var(--tema-theme, #1f8fb0); background:#fff; color:var(--tema-theme, #1f8fb0);
  font:italic 700 .85rem/1 Georgia, 'Times New Roman', serif; cursor:pointer; }
.rbt-info:active{ background:var(--tema-theme, #1f8fb0); color:#fff; }

/* ═══ LA SCHEDA DI UN BETA ═══════════════════════════════════════════════════
   Un foglio che sale dal basso sopra «Chi sei?» (che resta aperto sotto):
   in cima l'icona grande in un tondo col gradiente del tema e il bollino «In
   prova», poi il motto, il racconto, i punti con la spunta, per chi, il patto
   del beta tester e il bottone che accende la stessa casella della riga. */
.rbt-velo{ position:fixed; inset:0; z-index:1300; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,18,30,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:rbt-vela .2s ease both; }
.rbt-velo[hidden]{ display:none; }
@keyframes rbt-vela{ from{ opacity:0; } to{ opacity:1; } }
.rbt-foglio{ position:relative; width:100%; max-width:520px; max-height:88vh; max-height:88dvh; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; border-radius:24px 24px 0 0; padding:1.4rem 1.2rem 1.5rem; color:#10243a;
  background:linear-gradient(180deg, #eaf4fa 0%, #ffffff 9rem);
  box-shadow:0 -10px 40px rgba(0,0,0,.25), inset 0 1px 0 #fff;
  animation:rbt-sale .38s cubic-bezier(.2,1.25,.5,1) both; }
@keyframes rbt-sale{ from{ transform:translateY(60px); opacity:.3; } to{ transform:none; opacity:1; } }
.rbt-x{ position:absolute; top:.7rem; right:.8rem; width:2.2rem; height:2.2rem; border:0; border-radius:50%; padding:0;
  display:grid; place-items:center; background:rgba(16,36,58,.07); color:#10243a; font-size:1.4rem; cursor:pointer; }
.rbt-fig{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin:.2rem 0 .6rem; }
.rbt-fig-ic{ display:grid; place-items:center; width:76px; height:76px; border-radius:24px; color:#fff;
  background:linear-gradient(145deg, var(--tema-theme, #1f8fb0) 0%, #123f6e 100%);
  box-shadow:0 12px 26px -10px rgba(18,63,110,.6), inset 0 1px 0 rgba(255,255,255,.35);
  animation:rc-entra .5s cubic-bezier(.3,1.6,.5,1) .05s both; }
.rbt-fig-ic .rc-ico{ width:38px; height:38px; stroke-width:1.6; }
.rbt-fig-beta{ padding:.2rem .65rem; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#7a5300; background:#ffe7a8; box-shadow:inset 0 -1px 0 rgba(122,83,0,.15); }
.rbt-f-nome{ margin:0; text-align:center; font-size:1.3rem; line-height:1.25; color:#10243a; }
.rbt-motto{ margin:.35rem 0 .9rem; text-align:center; font-size:.95rem; line-height:1.4; color:var(--tema-theme, #1f8fb0); font-weight:600; }
.rbt-testo{ margin:0 0 .9rem; font-size:.92rem; line-height:1.5; color:#33424f; }
.rbt-punti{ list-style:none; margin:0 0 .9rem; padding:.3rem .9rem; border-radius:16px;
  background:linear-gradient(170deg, #ffffff 0%, #f1f7fb 100%); border:1px solid rgba(31,110,180,.12);
  box-shadow:0 4px 14px -10px rgba(16,36,58,.35); }
.rbt-punti li{ position:relative; padding:.55rem 0 .55rem 1.8rem; font-size:.88rem; line-height:1.4; color:#4d5b67;
  border-top:1px solid rgba(16,36,58,.07); }
.rbt-punti li:first-child{ border-top:0; }
.rbt-punti li::before{ content:'✓'; position:absolute; left:0; top:.55rem; display:grid; place-items:center;
  width:1.25rem; height:1.25rem; border-radius:50%; font-size:.72rem; font-weight:700; color:#fff;
  background:var(--tema-theme, #1f8fb0); }
.rbt-punti b{ color:#10243a; }
.rbt-chi{ margin:0 0 .9rem; font-size:.86rem; line-height:1.45; color:#4d5b67; }
.rbt-chi span{ display:inline-block; margin-right:.35rem; padding:.12rem .55rem; border-radius:999px; font-size:.72rem;
  font-weight:700; color:var(--tema-theme, #1f8fb0); background:rgba(31,143,176,.12); }
.rbt-patto{ margin:0 0 1.1rem; padding:.75rem .9rem; border-radius:14px; font-size:.84rem; line-height:1.45; color:#5c4a12;
  background:#fff6dc; border:1px solid rgba(122,83,0,.15); }
.rbt-patto b{ color:#3d3005; }
.rbt-prova{ display:block; width:100%; border:2px solid var(--tema-theme, #1f8fb0); border-radius:14px; padding:.9rem;
  font-size:1rem; font-weight:700; cursor:pointer; background:var(--tema-theme, #1f8fb0); color:#fff; }
.rbt-prova:active{ transform:scale(.99); }
.rbt-prova-ok{ display:none; }
.rbt-prova[aria-pressed="true"]{ background:#fff; color:var(--tema-theme, #1f8fb0); }
.rbt-prova[aria-pressed="true"] .rbt-prova-si{ display:none; }
.rbt-prova[aria-pressed="true"] .rbt-prova-ok{ display:inline; }

/* «SicilyTravel» in cima a «Chi sei?»: il nome, nel suo carattere. */
.rc-marchio{ margin:.1rem 0 0; text-align:center; font-family:'Lobster', cursive; font-size:2rem; line-height:1.1;
  animation:rc-entra .5s cubic-bezier(.3,1.6,.5,1) both;
  /* Il nostro blu, in gradiente: scuro in alto e ancora più scuro in basso, a
     quattro tappe vicine perché il passaggio non si veda — si sente. Il colore
     pieno resta sotto per i browser che non ritagliano lo sfondo sul testo. */
  color:var(--deep, #123f6e);
  background:linear-gradient(180deg, #1d5a8c 0%, var(--deep, #123f6e) 45%, #0f3560 70%, var(--night, #0b2a47) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* I titoli dei gruppi si leggono: scuri, più grandi, in grassetto. */
.rc-legg{ font-size:.95rem; font-weight:700; color:#10243a; margin:0 0 .5rem; }

/* ═══ I DUE BOTTONI E «ACCEDI» ═══════════════════════════════════════════════ */
.rc-bottoni{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; align-items:center; }

.ac-chiave{ font-size:3.2rem; animation:ac-chiave 2.6s ease-in-out infinite; transform-origin:70% 30%; }
@keyframes ac-chiave{ 0%, 100%{ transform:rotate(0); } 20%{ transform:rotate(-18deg); } 40%{ transform:rotate(12deg); } 60%{ transform:rotate(0); } }
.ac-spiega{ max-width:18rem; }
.ac-form{ width:100%; max-width:20rem; }
.ac-campo{ width:100%; box-sizing:border-box; font-size:16px; padding:.85rem 1rem; border-radius:14px; text-align:center;
  border:2px solid rgba(16,36,58,.18); background:#fff; color:#10243a; }
.ac-campo:focus{ outline:none; border-color:var(--tema-theme, #1f8fb0); }
.ac-racconta{ display:block; text-align:center; font-weight:700; color:var(--tema-theme, #1f8fb0); }
.ac-racconta[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .ac-chiave{ animation:none; } }

.rc-gruppo[hidden]{ display:none; }

/* Le icone dei due bottoni: disegnate a contorno, tutte e due uguali di stile. */
.rc-ico{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Chiuso davvero (assets/js/raccontati.js): vince anche su `:target` e `.rc-aperto`. */
.rc-velo.rc-chiuso{ display:none !important; }

/* La X sta sempre sopra: «SicilyTravel» in cima, animato, la copriva — si
   toccava la scritta e il modal non si chiudeva (15/10/2026). */
.rc-x{ z-index:3; }

/* «La tua email» in «Chi sei?»: si deve vedere — titolo e campo nel nostro
   blu scuro, più grandi. */
.rc-email{ font-size:.95rem; font-weight:700; color:var(--deep, #123f6e); }
.rc-email input{ padding:.85rem 1rem; border:2px solid var(--deep, #123f6e); color:var(--deep, #123f6e); font-weight:600; }
.rc-email input::placeholder{ color:rgba(18,63,110,.45); font-weight:400; }
.rc-email input:focus{ outline:none; box-shadow:0 0 0 3px rgba(18,63,110,.18); }

/* DOPO IL TRAMONTO (il cielo di sky.js: `silver` e `notte`) il blu scuro sul
   cielo scuro non si vede: Raccontati prende il bordo giallo, Accedi diventa
   giallo (bordo e scritta; al tocco si riempie di giallo). */
body[data-phase="silver"] .rc-via-posto,
body[data-phase="notte"] .rc-via-posto{ border-color:var(--gold, #ffd98a); }
body[data-phase="silver"] .rc-via-posto.ac-via,
body[data-phase="notte"] .rc-via-posto.ac-via{ color:var(--gold, #ffd98a); border-color:var(--gold, #ffd98a); }
body[data-phase="silver"] .rc-via-posto.ac-via:hover, body[data-phase="silver"] .rc-via-posto.ac-via:active,
body[data-phase="notte"] .rc-via-posto.ac-via:hover, body[data-phase="notte"] .rc-via-posto.ac-via:active{
  background:var(--gold, #ffd98a); color:var(--deep, #123f6e); }

/* ═══ DUE PASSI (17/10/2026): la mail, poi «Chi sei?» ════════════════════
   In cima a ognuno le due tappe, numerate: quella di adesso piena di blu,
   quella fatta con la spunta. Si vede subito che i passi sono due. */
.rc-tappe{ display:flex; justify-content:center; gap:.5rem; margin:.7rem 0 .5rem; padding:0; list-style:none; }
.rc-tappe li{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .7rem .25rem .25rem; border-radius:999px;
  background:rgba(16,36,58,.06); font-size:.8rem; font-weight:600; color:#7a8794; }
.rc-tappe b{ display:grid; place-items:center; width:1.45rem; height:1.45rem; border-radius:50%;
  background:rgba(16,36,58,.12); color:#5a6772; font-size:.78rem; }
.rc-tappe .rc-tappa-qui{ background:rgba(18,63,110,.1); color:var(--deep, #123f6e); }
.rc-tappe .rc-tappa-qui b{ background:var(--deep, #123f6e); color:#fff; }
.rc-tappe .rc-tappa-fatta b{ background:#1f8f70; color:#fff; }
/* «(tutto opzionale)» accanto a «Chi sei?»: piccolo, chiaro, non grida. */
.rc-opz{ font-size:.8rem; font-weight:500; color:#7a8794; white-space:nowrap; }
/* «Salta»: si va al codice senza dire niente di sé. Una parola, non un bottone. */
.rc-salta{ justify-self:center; margin-top:-.3rem; padding:.5rem 1.2rem; border:0; background:none;
  font:inherit; font-size:.92rem; color:#5a6772; text-decoration:underline; cursor:pointer; }

/* Il pallino di «Accedi», accanto a «Entra»: per chi è già iscritto. */
.rc-via-tondo{ width:3.2rem; height:3.2rem; padding:0; justify-content:center; }
.rc-via-tondo .rc-ico{ width:1.3rem; height:1.3rem; }

/* ═══ TUTTO CENTRATO NEL FOGLIO (17/10/2026) ═══════════════════════════════
   Titoli dei gruppi, pastiglie, anno e genere, la mail: al centro del modal.
   Resta com'è solo la card dei beta tester (.rbt), che ha righe da leggere. */
.rc-modal .rc-legg{ width:100%; text-align:center; }
.rc-modal .rc-chips{ justify-content:center; }
.rc-modal .rc-campo{ text-align:center; }
.rc-modal .rc-campo input, .rc-modal .rc-campo select{ text-align:center; text-align-last:center; }

/* ═══ «STIAMO COSTRUENDO» — dopo il codice, a chi non entra ancora ════════
   Una pastiglia blu notte con la luce gialla che pulsa (il cantiere è
   acceso), poi tre righe su cosa ci troverà, in una carta blu: le scritte
   sopra sono bianche, col colore scritto su ognuna (conto.css colora i
   titoli di blu notte). */
.rc-cantiere{ display:inline-flex; align-items:center; gap:.5rem; margin:.2rem 0 .3rem; padding:.4rem .9rem;
  border-radius:999px; background:var(--deep, #123f6e); color:var(--gold, #ffd98a);
  font-size:.82rem; font-weight:700; letter-spacing:.01em; box-shadow:0 6px 16px -8px rgba(18,63,110,.6); }
.rc-cantiere-luce{ width:.55rem; height:.55rem; border-radius:50%; background:var(--gold, #ffd98a);
  box-shadow:0 0 0 0 rgba(255,217,138,.7); animation:rc-luce 1.6s ease-out infinite; }
@keyframes rc-luce{ 0%{ box-shadow:0 0 0 0 rgba(255,217,138,.7); } 80%, 100%{ box-shadow:0 0 0 .55rem rgba(255,217,138,0); } }

.rc-vantaggi{ list-style:none; margin:.5rem 0 .3rem; padding:.85rem .9rem; display:grid; gap:.7rem; width:100%; box-sizing:border-box;
  border-radius:16px; text-align:left;
  background:linear-gradient(160deg, #1d5a8c 0%, var(--deep, #123f6e) 55%, #0c2c50 100%);
  box-shadow:0 14px 30px -18px rgba(12,44,80,.9), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25); }
.rc-vantaggi li{ display:grid; grid-template-columns:2.2rem 1fr; align-items:center; gap:.65rem; }
.rc-vantaggi b{ display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%;
  background:rgba(255,255,255,.12); font-size:1.1rem; font-weight:400; }
.rc-vantaggi span{ font-size:.9rem; line-height:1.4; color:#fff; }
.rc-vantaggi li{ opacity:0; animation:rc-passo-entra .45s ease-out both; }
.rc-vantaggi li:nth-child(1){ animation-delay:.25s; }
.rc-vantaggi li:nth-child(2){ animation-delay:.4s; }
.rc-vantaggi li:nth-child(3){ animation-delay:.55s; }

@media (prefers-reduced-motion: reduce){
  .rc-cantiere-luce, .rc-vantaggi li{ animation:none; opacity:1; }
}

/* La «y» di SicilyTravel scende sotto la riga, e il gradiente ritagliato sul
   testo si ferma alla riga: la coda restava tagliata. 5px di fondo in più per
   disegnarla, e 5px in meno sotto, così niente si sposta. */
.rc-marchio{ padding-bottom:5px; margin-bottom:-5px; }

/* ═══ «SEI TRA I PRIMI» (#iscritto) ═══════════════════════════════════════════
   Ferma, senza animazioni: è una conferma, non una festa. La card dell'App-Like
   è un collegamento intero, grande da toccare. */
.rc-campana{ font-size:3rem; margin:0; }
.rc-applike{ display:flex; align-items:center; gap:.8rem; width:100%; margin:.6rem 0 .2rem; padding:.85rem 1rem;
  border:1px solid rgba(31,110,180,.18); border-radius:16px; background:#f3f8fd; color:#10243a;
  text-decoration:none; text-align:left; font-size:16px; }
.rc-applike-segno{ font-size:1.8rem; flex:none; }
.rc-applike-testo{ display:flex; flex-direction:column; gap:.15rem; }
.rc-applike-testo small{ font-size:.92rem; color:#3b5470; line-height:1.35; }
/* «Esci» e «Chiudi» larghi quanto la card dell'App-Like: tre cose una sotto
   l'altra, della stessa misura, si leggono come tre scelte e non come una
   scelta e due note a margine. */
.rc-esci-modulo{ width:100%; margin:.5rem 0 0; }
.rc-esci{ display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; padding:.85rem 1rem;
  border:1px solid rgba(16,36,58,.25); border-radius:16px; background:#fff; color:#10243a; font:inherit; font-size:16px; cursor:pointer; }
.rc-isc-chiudi{ width:100%; margin-top:.5rem; border-radius:16px; }
.rc-esci svg{ width:1.15em; height:1.15em; flex:none; }

/* ═══ RIFINITURA DEI MODAL (19/10/2026) ═══════════════════════════════════════
   Stessi pezzi, stessa struttura: cambia solo la finitura, per sembrare
   un'app curata e non una pagina. Il velo sfoca quello che c'è sotto; il
   foglio ha la maniglia in cima, una luce appena azzurra e l'ombra che lo
   stacca; campi e bottoni hanno la stessa altezza (52px) e lo stesso raggio;
   i segni grandi (busta, chiave, campana) stanno in un medaglione. Sta tutto
   qui in fondo, così si toglie in un colpo se non piace. */

/* Il velo: più profondo, sfocato, entra in dissolvenza. */
.rc-velo{ background:rgba(6,16,28,.52); -webkit-backdrop-filter:blur(6px) saturate(120%); backdrop-filter:blur(6px) saturate(120%); }
.rc-velo:target, .rc-velo.rc-aperto{ animation:rbt-vela .22s ease both; }

/* Il foglio: maniglia, luce in cima, ombra che lo stacca, e il fondo che
   rispetta la lineetta dell'iPhone. */
.rc-modal{ padding:1.5rem 1.25rem calc(1.7rem + env(safe-area-inset-bottom, 0px)); border-radius:26px 26px 0 0;
  background:linear-gradient(180deg, #eef5fb 0%, #ffffff 7.5rem);
  box-shadow:0 -18px 50px -12px rgba(6,16,28,.45), inset 0 1px 0 #fff; color:#10243a; }
.rc-modal::before{ content:''; position:absolute; top:.55rem; left:50%; width:2.6rem; height:5px; margin-left:-1.3rem;
  border-radius:999px; background:rgba(16,36,58,.16); }
.rc-velo:target .rc-modal, .rc-velo.rc-aperto .rc-modal{ animation:rc-sale .42s cubic-bezier(.2,1.1,.4,1) both; }
@media (min-width:640px){
  .rc-velo{ align-items:center; padding:1.5rem; }
  .rc-modal{ border-radius:26px; max-height:88vh; max-height:88dvh; }
  .rc-modal::before{ display:none; }
}

/* La X: un tondino chiaro col filo, non un carattere che galleggia. */
.rc-x{ top:.85rem; right:.85rem; width:2.25rem; height:2.25rem; font-size:1.3rem; line-height:1; color:#3b4d5e;
  background:#fff; border:1px solid rgba(16,36,58,.10); box-shadow:0 2px 8px -3px rgba(16,36,58,.25);
  transition:background .15s, transform .15s; }
.rc-x:active{ transform:scale(.92); background:#f1f5f9; }

/* Il marchio un filo più piccolo: introduce, non schiaccia il titolo. */
.rc-marchio{ font-size:1.75rem; margin-top:.35rem; }

/* Titolo e sottotitolo: gerarchia netta, testo che respira. */
.rc-tit{ margin:.35rem 0 .3rem; font-size:1.45rem; font-weight:800; letter-spacing:-.015em; line-height:1.2; color:#0f2236; }
.rc-sotto{ margin:0 auto 1.15rem; max-width:22rem; font-size:.95rem; line-height:1.5; color:#55636f; }

/* Le tappe: una sola pastiglia larga, divisa in due, con la linea che le unisce. */
.rc-tappe{ gap:0; margin:.9rem auto .8rem; padding:.25rem; width:max-content; max-width:100%; border-radius:999px;
  background:rgba(16,36,58,.05); box-shadow:inset 0 1px 2px rgba(16,36,58,.08); }
.rc-tappe li{ background:none; padding:.3rem .8rem .3rem .3rem; font-size:.8rem; }
.rc-tappe .rc-tappa-qui{ background:#fff; box-shadow:0 2px 8px -3px rgba(16,36,58,.3); }

/* Campi: alti uguali, fondo appena grigio, al tocco l'anello del tema. */
.rc-campo input, .rc-campo select, .ac-campo{ min-height:52px; box-sizing:border-box; border-radius:14px;
  border:1.5px solid rgba(16,36,58,.16); background:#f8fafc; transition:border-color .15s, box-shadow .15s, background .15s; }
.rc-campo input:focus, .rc-campo select:focus, .ac-campo:focus{ outline:none; background:#fff;
  border-color:var(--tema-theme, #1f8fb0); box-shadow:0 0 0 4px rgba(31,143,176,.16); }
.rc-email input{ border:1.5px solid rgba(18,63,110,.35); background:#fff; }
.rc-email input:focus{ border-color:var(--deep, #123f6e); box-shadow:0 0 0 4px rgba(18,63,110,.14); }
.rc-campo input::placeholder, .ac-campo::placeholder{ color:#98a4ae; }

/* Il codice: sei caselle immaginarie, cifre grandi e ben distanziate. */
.rc-cifre{ width:13.5rem; min-height:64px; font-size:2rem; font-weight:700; letter-spacing:.28em; padding:.5rem .4rem .5rem .7rem;
  border:1.5px solid rgba(16,36,58,.16); border-radius:16px; background:#f8fafc;
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace; transition:border-color .15s, box-shadow .15s, background .15s; }
.rc-cifre:focus{ background:#fff; box-shadow:0 0 0 4px rgba(31,143,176,.16); }
.rc-cifre::placeholder{ color:#c3ccd4; }

/* Il bottone pieno: corposo (luce sopra, velo scuro sotto), alto 52px. */
.rc-manda{ min-height:52px; padding:.9rem 1.2rem; border-radius:14px; font-weight:700; letter-spacing:.01em;
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.10) 100%), var(--tema-theme, #1f8fb0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -12px var(--tema-theme, #1f8fb0), 0 2px 4px rgba(16,36,58,.12);
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s; }
.rc-manda:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 8px -4px var(--tema-theme, #1f8fb0); }
.rc-manda.rc-va{ opacity:.65; cursor:progress; }
.rc-centro .rc-form, .ac-form{ width:100%; max-width:21rem; }
.rc-centro .rc-manda{ width:100%; }

/* I segni grandi in un medaglione: busta, chiave, campana. Galleggiano piano. */
.rc-busta, .ac-chiave, .rc-campana{ display:grid; place-items:center; width:84px; height:84px; margin:.2rem auto .4rem;
  border-radius:50%; font-size:2.4rem; line-height:1;
  background:radial-gradient(circle at 50% 35%, #ffffff 0%, #e6f1f9 70%, #d7e8f4 100%);
  box-shadow:0 12px 26px -14px rgba(18,63,110,.55), inset 0 1px 0 #fff, inset 0 -2px 6px rgba(18,63,110,.08),
             0 0 0 6px rgba(31,143,176,.07); }
.rc-busta{ animation:rc-galleggia 3s ease-in-out infinite; }
@keyframes rc-galleggia{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* L'errore: una riga in una pastiglia rosa, si nota senza gridare. */
.rc-errore{ padding:.55rem .8rem; border-radius:12px; background:#fdecea; color:#a93226; font-weight:600; font-size:.86rem; }

/* Le note e i collegamenti secondari: piccoli, puliti. */
.rc-nota{ font-size:.78rem; color:#8794a0; }
.rc-nota a{ color:#55636f; text-underline-offset:2px; }
.rc-salta{ color:#55636f; text-underline-offset:3px; }
.ac-racconta{ margin-top:.6rem; padding:.4rem; font-size:.95rem; text-decoration:none; }

/* «Sei tra i primi»: la card dell'App-Like e «Esci» con lo stesso spessore. */
.rc-applike{ border:1px solid rgba(31,110,180,.14); background:linear-gradient(170deg, #ffffff 0%, #f1f7fc 100%);
  box-shadow:0 8px 20px -14px rgba(16,36,58,.45), inset 0 1px 0 #fff; }
.rc-applike-segno{ display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:14px; font-size:1.5rem;
  background:rgba(31,143,176,.10); }
.rc-esci{ min-height:52px; border:1.5px solid rgba(16,36,58,.16); border-radius:14px; font-weight:600; color:#33424f;
  transition:background .15s; }
.rc-esci:active{ background:#f1f5f9; }
.rc-isc-chiudi{ border-radius:14px; }

@media (prefers-reduced-motion: reduce){
  .rc-velo:target, .rc-velo.rc-aperto, .rc-busta{ animation:none; }
}
/* La chiave nel medaglione galleggia come la busta: girando, girava tutto il tondo. */
.ac-chiave{ animation:rc-galleggia 3s ease-in-out infinite; }