/* ═══ la pagina iniziale di Atlas: blu notte, vetro, turchese e il punto arancio ═══
   (i nomi delle variabili sono rimasti: --oro è l'accento turchese, --arancio la meta) */
:root {
  /* NOTTE: blu notte, turchese, l'arancio della meta */
  --nero: #050b17; --nero2: #0c1a33; --carta: #e6eefa; --tenue: rgba(230, 238, 250, 0.62); --linea: rgba(230, 238, 250, 0.12);
  --oro: #19d3c5; --oro2: #6ff3e3; --arancio: #f5a33a; --acc2: #5ff5e4; --acc-a: #2fe6d4; --acc-b: #10bfb3; --su-acc: #04212a; --su-meta: #2a1600;
  --acc-rgb: 25, 211, 197; --acc2-rgb: 95, 245, 228; --luce-rgb: 255, 255, 255; --bordo-rgb: 150, 190, 240; --meta-rgb: 245, 163, 58; --campo-rgb: 0, 0, 0;
  --vetro-rgb: 14, 32, 64; --vetro2-rgb: 6, 14, 30; --testo-rgb: 230, 238, 250; --alone-rgb: 40, 90, 170;
  --f-titoli: 'Space Grotesk', Inter, sans-serif; --ombra-carta: none;
  color-scheme: dark;
}
/* CARTA (l'aspetto di base di Atlas): un atlante stampato. Carta avorio, inchiostro blu,
   il teal profondo delle rotte, il vermiglio delle mete; i titoli con le grazie. */
:root[data-tema="carta"] {
  --nero: #f2ecdf; --nero2: #e9e1cf; --carta: #15233f; --tenue: rgba(21, 35, 63, 0.66); --linea: rgba(21, 35, 63, 0.14);
  --oro: #0e7470; --oro2: #0b5a57; --arancio: #d4502a; --acc2: #0e7470; --acc-a: #13817c; --acc-b: #0b5a57; --su-acc: #fbf7ee; --su-meta: #fff8ef;
  --acc-rgb: 14, 116, 112; --acc2-rgb: 14, 116, 112; --luce-rgb: 21, 35, 63; --bordo-rgb: 21, 35, 63; --meta-rgb: 212, 80, 42; --campo-rgb: 255, 253, 248;
  --vetro-rgb: 255, 252, 246; --vetro2-rgb: 250, 246, 237; --testo-rgb: 21, 35, 63; --alone-rgb: 212, 80, 42;
  --f-titoli: "Newsreader", Georgia, "Times New Roman", serif; --ombra-carta: 0 1px 0 rgba(21, 35, 63, 0.04), 0 18px 40px -26px rgba(60, 40, 10, 0.35);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nero); color: var(--carta); font: 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-image: url("/icone/reticolo.svg"), radial-gradient(ellipse 55% 45% at 0% 12%, rgba(var(--acc-rgb), 0.2), transparent 70%), radial-gradient(ellipse 60% 55% at 100% 0%, rgba(var(--alone-rgb), 0.32), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(var(--alone-rgb), 0.25), transparent 70%);
  background-repeat: no-repeat; background-position: right -22vmax top -8vmax, 0 0, 0 0, 0 0; background-size: 92vmax 92vmax, auto, auto, auto; background-attachment: fixed; }
/* i due punti che brillano, come due mete sulla mappa */
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; animation: brilla 3.2s ease-in-out infinite alternate; }
body::before { left: 7%; top: 28%; background: var(--oro); box-shadow: 0 0 0 6px rgba(var(--acc-rgb), 0.14), 0 0 28px 6px rgba(var(--acc-rgb), 0.45); }
body::after { right: 4%; top: 72%; background: var(--arancio); box-shadow: 0 0 0 6px rgba(var(--meta-rgb), 0.14), 0 0 28px 6px rgba(var(--meta-rgb), 0.45); animation-delay: 1.6s; }
@keyframes brilla { to { opacity: 0.55; transform: scale(0.8); } }
h1, h2, h3 { font-family: var(--f-titoli); font-weight: 600; letter-spacing: -0.02em; }
.muted { color: var(--tenue); } .piccolo { font-size: 13px; }
.carica { text-align: center; padding: 40vh 0; color: var(--tenue); }
.kick { font: 500 12px Inter, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); margin: 0; }
.bt { font: 500 14px Inter, sans-serif; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--carta); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.bt:hover { background: rgba(var(--testo-rgb), 0.08); }
.bt.vetro { backdrop-filter: blur(10px); }
.bt.oro { background: linear-gradient(135deg, var(--acc-a), var(--acc-b)); color: var(--su-acc); border: 0; font-weight: 600; padding: 13px 24px; box-shadow: 0 14px 34px -12px rgba(var(--acc-rgb), 0.7); }
.bt.oro:hover { transform: translateY(-1px); }
.bt:disabled { opacity: 0.5; cursor: wait; }

.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px max(20px, 5vw); }
.marchio { font: 700 22px var(--f-titoli); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }
.marchio .logo { width: 40px; height: 46px; flex: none; filter: drop-shadow(0 0 10px rgba(var(--acc-rgb), 0.35)); }
.marchio > span { display: grid; line-height: 1.1; }
.marchio small { font: 400 12px Inter, sans-serif; letter-spacing: 0.02em; color: var(--tenue); margin-top: 3px; }
.io { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.io img, .io .av { width: 34px; height: 34px; border-radius: 50%; }
.io .av { display: grid; place-items: center; background: var(--oro); color: var(--su-acc); font: 600 14px Inter; font-style: normal; }
.famiglia { font: 600 11px Inter; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro); border: 1px solid rgba(var(--acc-rgb), 0.45); padding: 6px 12px; border-radius: 999px; }

/* chi non è entrato */
.hero { min-height: 100vh; display: flex; flex-direction: column; }
.hero-c { max-width: 860px; padding: 8vh max(20px, 6vw) 30px; animation: su 1s both; }
.hero h1 { font-size: clamp(52px, 9vw, 112px); line-height: 0.95; margin: 18px 0 24px; }
.hero h1 em { font-style: italic; color: var(--oro2); }
.lead { font-size: 19px; color: var(--tenue); max-width: 36em; margin: 0; }
.entra { margin: 36px 0 12px; min-height: 44px; }
.dev { display: flex; gap: 8px; flex-wrap: wrap; }
.dev input { font: 15px Inter; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(var(--luce-rgb), 0.04); color: var(--carta); }
.dev button { font: 500 14px Inter; padding: 11px 18px; border-radius: 999px; border: 1px dashed var(--oro); background: none; color: var(--oro); cursor: pointer; }
.tre { margin-top: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--linea); border-top: 1px solid var(--linea); }
.tre-c { background: var(--nero); padding: 28px max(20px, 3vw) 34px; display: grid; gap: 8px; animation: su 0.9s both; }
.tre-c .ico { width: 40px; height: 40px; color: var(--oro); }
.tre-c b { font: 600 24px var(--f-titoli); } .tre-c small { color: var(--tenue); font-size: 14px; }

/* chi è entrato */
.ciao { padding: 5vh max(20px, 5vw) 26px; animation: su 0.8s both; }
.ciao h1 { font-size: clamp(40px, 6vw, 72px); margin: 10px 0 0; line-height: 1; }
.strade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 max(20px, 5vw); }
.strada { position: relative; text-align: left; display: grid; align-content: start; gap: 10px; min-height: 260px; padding: 26px 26px 28px; border-radius: 28px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--linea); color: var(--carta); font: inherit; background: linear-gradient(160deg, rgba(var(--luce-rgb), 0.06), rgba(var(--luce-rgb), 0.015)); backdrop-filter: blur(14px);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s, background 0.3s; animation: su 0.8s both; }
.strada::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acc-rgb), 0.28), transparent 70%); opacity: 0; transition: opacity 0.4s; }
.strada:hover { transform: translateY(-4px); border-color: rgba(var(--acc-rgb), 0.4); }
.strada:hover::before, .strada.on::before { opacity: 1; }
.strada.on { border-color: var(--oro); background: linear-gradient(160deg, rgba(var(--acc-rgb), 0.16), rgba(var(--luce-rgb), 0.02)); }
.strada .n { font: 500 12px Inter; letter-spacing: 0.2em; color: var(--oro); }
.strada .ico { width: 54px; height: 54px; color: var(--oro2); margin: 6px 0 8px; }
.strada b { font: 600 30px/1.05 var(--f-titoli); }
.strada small { color: var(--tenue); font-size: 15px; max-width: 26em; }
.strada .freccia { position: absolute; right: 26px; top: 24px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; transition: transform 0.3s, background 0.3s; }
.strada.on .freccia { transform: rotate(90deg); background: var(--oro); color: var(--su-acc); border-color: var(--oro); }
.strada .conta { position: absolute; right: 76px; top: 30px; font: 600 12px Inter; background: rgba(var(--testo-rgb), 0.12); padding: 4px 10px; border-radius: 999px; }

.pannello-s { padding: 26px max(20px, 5vw) 120px; }
.vuoto { color: var(--tenue); text-align: center; padding: 30px 0; }
.pan { border-radius: 28px; border: 1px solid var(--linea); background: rgba(var(--luce-rgb), 0.035); padding: clamp(22px, 4vw, 44px); animation: su 0.6s both; }
.pan-t h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 8px; }
.pan-t p { color: var(--tenue); max-width: 46em; margin: 0 0 24px; }
.campo { width: 100%; font: 18px/1.5 Inter; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--linea); background: rgba(var(--campo-rgb), 0.25); color: var(--carta); resize: vertical; outline: none; }
.campo:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.15); }
.riga { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.motori { display: flex; gap: 6px; flex-wrap: wrap; }
.motori button { font: 500 13px Inter; border: 1px solid var(--linea); background: none; color: var(--tenue); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.motori .on { border-color: var(--oro); color: var(--oro2); background: rgba(var(--acc-rgb), 0.1); }
.motori button:disabled { opacity: 0.35; cursor: not-allowed; }
.stato { min-height: 24px; color: var(--oro2); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pallino { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); animation: pulsa 1s infinite alternate; }
.drop { display: grid; justify-items: center; gap: 6px; padding: 46px 20px; border-radius: 24px; border: 1.5px dashed rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.05); cursor: pointer; text-align: center; transition: background 0.25s, transform 0.25s; }
.drop:hover, .drop.su { background: rgba(var(--acc-rgb), 0.12); transform: scale(1.005); }
.drop .ico { width: 56px; height: 56px; color: var(--oro2); }
.drop b { font: 600 24px var(--f-titoli); } .drop small { color: var(--tenue); }
.lavoro { margin-top: 18px; display: grid; gap: 6px; }
.lavoro p { margin: 0; display: flex; gap: 10px; align-items: center; color: var(--carta); }
.lavoro p.ok { color: var(--tenue); } .lavoro p span { width: 18px; text-align: center; color: var(--oro); }
.lavoro .err { color: #f0a08a; }
.pan h3 { font-size: 24px; margin: 34px 0 14px; }
.carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.carte.grandi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.carta { display: grid; text-decoration: none; color: var(--carta); border-radius: 22px; overflow: hidden; border: 1px solid var(--linea); background: var(--nero2); transition: transform 0.3s, border-color 0.3s; }
.carta:hover { transform: translateY(-4px); border-color: rgba(var(--acc-rgb), 0.45); }
.c-img { height: 170px; background: linear-gradient(135deg, var(--nero2), var(--nero2)) center/cover; }
.carte.grandi .c-img { height: 220px; }
.c-t { display: grid; gap: 3px; padding: 16px 18px 18px; }
.c-t .k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.c-t b { font: 600 23px var(--f-titoli); } .c-t span:not(.k), .c-t small { color: var(--tenue); font-size: 14px; }
.avviso { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: var(--carta); color: var(--nero); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: 0.3s; max-width: 90vw; text-align: center; z-index: 90; }
.avviso.in { opacity: 1; transform: translate(-50%, 0); }
@keyframes su { from { opacity: 0; transform: translateY(18px); } }
@keyframes pulsa { to { opacity: 0.25; transform: scale(0.7); } }
@media (max-width: 860px) { .strade { grid-template-columns: 1fr; } .strada { min-height: 0; } }
/* telefono: il marchio sopra, i bottoni in una riga sotto */
@media (max-width: 600px) {
  .nav { flex-wrap: wrap; gap: 14px; padding-top: 18px; }
  .nav .io { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav .io::-webkit-scrollbar { display: none; }
  .nav .io > * { flex: none; white-space: nowrap; }
  .nav .et { display: none; }
}
.app-bt { border-color: rgba(var(--acc-rgb), 0.55); color: var(--oro2); }
/* aperta come app: niente barre del browser, si tiene conto della tacca */
@media (display-mode: standalone) { .nav { padding-top: max(22px, calc(env(safe-area-inset-top) + 8px)); } }

/* ═══ la porta: a sinistra cos'è Atlas, a destra la scheda di vetro per entrare ═══ */
.porta-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); gap: clamp(28px, 5vw, 70px); align-items: center; padding: 3vh max(20px, 6vw) 50px; }
.porta-g .hero-c { padding: 0; }
.hero h1 { font-weight: 700; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--oro2), var(--oro) 55%, var(--arancio)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scheda { position: relative; border-radius: 30px; padding: clamp(26px, 4vw, 44px); background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.62), rgba(var(--vetro2-rgb), 0.66)); border: 1px solid rgba(var(--bordo-rgb), 0.18);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(var(--luce-rgb), 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-align: center; animation: su 0.9s 0.1s both; }
.scheda .logo { width: 116px; height: 134px; display: block; margin: 0 auto 6px; filter: drop-shadow(0 0 26px rgba(var(--acc-rgb), 0.4)); }
.scheda h2 { font: 700 clamp(38px, 5vw, 50px)/1.05 var(--f-titoli); letter-spacing: -0.02em; margin: 6px 0 6px; background: linear-gradient(180deg, #ffffff, var(--carta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scheda .motto { color: var(--tenue); margin: 0 0 26px; font: 500 15px var(--f-titoli); }
.scheda .motto b { color: var(--oro); font-weight: 600; }
.scheda form { display: grid; gap: 14px; text-align: left; }
.scheda label { display: grid; gap: 8px; font: 500 12px Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--testo-rgb), 0.8); }
.scheda input { font: 16px Inter, sans-serif; padding: 15px 18px; border-radius: 16px; border: 1px solid rgba(var(--bordo-rgb), 0.18); background: rgba(var(--luce-rgb), 0.06); color: var(--carta); text-transform: none; letter-spacing: 0; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
.scheda input::placeholder { color: rgba(var(--testo-rgb), 0.45); }
.scheda input:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.15); }
.scheda .pw { position: relative; }
.scheda .pw input { padding-right: 84px; }
.scheda .mostra { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: rgba(var(--testo-rgb), 0.85); font: 600 13px Inter, sans-serif; padding: 8px 10px; cursor: pointer; }
.scheda form > button { margin-top: 8px; font: 600 17px var(--f-titoli); padding: 16px; border-radius: 999px; border: 0; cursor: pointer; color: var(--su-acc);
  background: linear-gradient(135deg, var(--acc-a), var(--acc-b)); box-shadow: 0 18px 40px -16px rgba(var(--acc-rgb), 0.8); transition: transform 0.2s, box-shadow 0.2s; }
.scheda form > button:hover { transform: translateY(-1px); box-shadow: 0 22px 46px -16px rgba(var(--acc-rgb), 0.95); }
.scheda .entra { margin: 0 0 16px; min-height: 0; display: flex; justify-content: center; }
.scheda .entra:empty { display: none; }
.scheda .oppure { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 4px 0 16px; }
.scheda .oppure::before, .scheda .oppure::after { content: ""; flex: 1; height: 1px; background: rgba(var(--bordo-rgb), 0.18); }
.scheda #msg { margin: 14px 0 0; }
.tre { background: rgba(var(--bordo-rgb), 0.12); }
.tre-c { background: rgba(var(--vetro2-rgb), 0.86); }
.tre-c .ico { color: var(--oro); }
@media (max-width: 900px) { .porta-g { grid-template-columns: 1fr; } .scheda { order: -1; } .hero h1 { font-size: clamp(40px, 11vw, 64px); } .porta-g .lead { font-size: 17px; } }
/* i titoli in Space Grotesk, decisi */
.ciao h1 { font-weight: 700; letter-spacing: -0.03em; }
.strada { background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.5), rgba(var(--vetro2-rgb), 0.4)); border-color: rgba(var(--bordo-rgb), 0.16); }
.strada.on .freccia { color: var(--su-acc); }
.pan { background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.38), rgba(var(--vetro2-rgb), 0.3)); border-color: rgba(var(--bordo-rgb), 0.16); backdrop-filter: blur(14px); }
.carta { background: rgba(var(--vetro-rgb), 0.85); }

/* ═══ LA ROTTA: la firma di Atlas. Puntini turchesi che arrivano alla meta arancio. ═══ */
.rotta { display: inline-flex; align-items: center; gap: 0; width: 64px; height: 10px; vertical-align: middle;
  background: radial-gradient(circle, var(--oro) 2px, transparent 2.6px) 0 50% / 11px 10px repeat-x; position: relative; }
.rotta::after { content: ""; position: absolute; right: -10px; top: 50%; width: 12px; height: 16px; margin-top: -12px; filter: drop-shadow(0 0 6px rgba(var(--meta-rgb), 0.7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M1.5 15.5V1' stroke='%23f5a33a' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2.5 1l8.5 3.5-8.5 3.5z' fill='%23f5a33a'/%3E%3C/svg%3E") no-repeat center / contain; }
.rotta.cammina { animation: cammina 1.1s linear infinite; }
@keyframes cammina { to { background-position: 11px 50%; } }
.kick { display: flex; align-items: center; gap: 14px; }
.kick .rotta { width: 44px; }
/* le coordinate, come su una carta nautica */
.coord { font: 400 12.5px "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em; color: rgba(var(--testo-rgb), 0.6); }
.meta { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 22px 0 0; padding-top: 18px; border-top: 1px dashed rgba(var(--bordo-rgb), 0.18); flex-wrap: wrap; }
.meta b { font: 600 14px var(--f-titoli); color: var(--carta); transition: opacity 0.4s; }
.meta .coord { transition: opacity 0.4s; }
.meta.cambia b, .meta.cambia .coord { opacity: 0; }
.meta small { font: 500 11px Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--arancio); }
.stato .pallino { display: none; }

/* la porta della Scoperta, sotto le tre strade */
.scopri { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 16px max(20px, 5vw) 0; padding: 20px 24px; border-radius: 24px; text-decoration: none; color: var(--carta);
  border: 1px solid rgba(var(--meta-rgb), 0.35); background: linear-gradient(120deg, rgba(var(--meta-rgb), 0.12), rgba(var(--acc-rgb), 0.08) 60%, rgba(var(--vetro2-rgb), 0.4)); transition: transform 0.3s, border-color 0.3s; animation: su 0.8s 0.25s both; }
.scopri:hover { transform: translateY(-3px); border-color: var(--arancio); }
.scopri small { display: block; font: 600 11px Inter, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--arancio); }
.scopri b { display: block; font: 600 21px var(--f-titoli); margin: 2px 0; }
.scopri span span, .scopri > span:nth-child(2) > span { color: var(--tenue); font-size: 14.5px; }
.scopri .freccia { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--meta-rgb), 0.5); display: grid; place-items: center; color: var(--arancio); }
.sc-link { color: var(--arancio); border-color: rgba(var(--meta-rgb), 0.45); text-decoration: none; }
@media (max-width: 600px) { .scopri { grid-template-columns: 1fr; } .scopri .freccia { display: none; } }

/* ═══ L'APERTURA: il marchio si costruisce. Le braccia del titano si alzano,
   il mondo cade e si posa sulle mani, poi gira piano; le bandierine si
   piantano una dopo l'altra, l'ultima è la meta. ═══ */
.scheda .logo * { transform-box: view-box; }
.scheda h2 { animation: su 0.8s 2.2s both; }
.scheda .motto { animation: su 0.8s 2.35s both; }
@keyframes alza { to { stroke-dashoffset: 0; } }
@keyframes posa { 0% { transform: translateY(-46px) scale(0.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes gira { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes appare { from { opacity: 0; } }
@keyframes pianta { from { transform: translateY(-14px) scaleY(0); opacity: 0; } }
@keyframes sventola { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-5deg); } }
@media (prefers-reduced-motion: reduce) { .scheda .logo *, .scheda h2, .scheda .motto { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ═══ ALTO LIVELLO: il globo 3D dietro, vetro vero, i mirini da strumento ═══ */
.globo3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
body.con-globo { background-image: radial-gradient(ellipse 55% 45% at 0% 12%, rgba(var(--acc-rgb), 0.16), transparent 70%), radial-gradient(ellipse 60% 55% at 100% 0%, rgba(var(--alone-rgb), 0.28), transparent 70%); }
body.con-globo::before, body.con-globo::after { display: none; }
h1, h2, h3 { letter-spacing: -0.03em; }
.hero h1 { font-weight: 700; letter-spacing: -0.045em; text-shadow: 0 0 60px rgba(var(--acc-rgb), 0.18); }
.ciao h1 { letter-spacing: -0.04em; }
.marchio { font-weight: 700; letter-spacing: -0.02em; }
.marchio .logo { width: 44px; height: 44px; }
.scheda { background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.5), rgba(var(--vetro2-rgb), 0.55)); border-color: rgba(var(--bordo-rgb), 0.22); border-radius: 22px;
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.scheda .logo { width: 150px; height: 150px; margin-bottom: 0; }
/* i mirini agli angoli: come il vetro di uno strumento di navigazione */
.scheda::after, .strada::after, .pan::after, .scopri::after, .sc-chat::after, .sc-mappa-box::after, .tile::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none; border-radius: 0; opacity: 0.75;
  --m: rgba(var(--acc2-rgb), 0.7);
  background:
    linear-gradient(var(--m), var(--m)) top left / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) bottom right / 1.5px 14px no-repeat; }
.strada, .pan, .scopri, .tile { position: relative; }
.strada { border-radius: 20px; background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.55), rgba(var(--vetro2-rgb), 0.45)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.strada::after { opacity: 0; transition: opacity 0.3s; } .strada:hover::after, .strada.on::after { opacity: 0.9; }
.pan { border-radius: 22px; }
.scopri::after { --m: rgba(var(--meta-rgb), 0.75); }
.scheda #msg b { color: var(--arancio); } .scheda #msg code { font: 12px "Space Mono", monospace; color: var(--oro2); }
.tre { background: transparent; border-top-color: rgba(var(--bordo-rgb), 0.14); }
.tre-c { background: rgba(var(--vetro2-rgb), 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* l'apertura con il marchio nuovo: le gambe si disegnano, la rotta appare, la meta si pianta */
.scheda .logo .l-gambe { stroke-dasharray: 100; stroke-dashoffset: 100; animation: alza 1s 0.25s cubic-bezier(.5,0,.2,1) forwards; }
.scheda .logo .l-filo, .scheda .logo .l-bordo { animation: appare 1.2s both; }
.scheda .logo .l-rotta { animation: appare 0.5s 1.15s both; }
.scheda .logo .l-meta { transform-origin: 65.4px 64.8px; animation: pianta 0.7s 1.45s cubic-bezier(.3,1.8,.5,1) both; }

/* ═══ LA ROTTA CHE ATTRAVERSA IL SITO ═══ */
#app { position: relative; z-index: 1; }
.rotta-pagina { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.rp-via { fill: none; stroke: rgba(var(--acc2-rgb), 0.28); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 14; }
.rp-fatta { fill: none; stroke: var(--acc2); stroke-width: 3.8; stroke-linecap: round; stroke-dasharray: 0.1 14; filter: drop-shadow(0 0 4px rgba(var(--acc-rgb), 0.9)); }
.rp-band { opacity: 0.35; transition: opacity 0.5s, transform 0.5s; }
.rp-band .rp-pt { fill: var(--nero); stroke: var(--oro); stroke-width: 2; }
.rp-band.presa { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.8)); }
.rp-meta .rp-pt { stroke: var(--arancio); }
.rp-meta.presa { filter: drop-shadow(0 0 10px rgba(var(--meta-rgb), 0.9)); }
.rp-io { fill: #fff; filter: drop-shadow(0 0 8px var(--acc2)) drop-shadow(0 0 16px rgba(var(--acc-rgb), 0.7)); }
@media (prefers-reduced-motion: reduce) { .rp-band { transition: none; } }

/* ═══ ENTRA / REGISTRATI ═══ */
.schede-t { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(var(--luce-rgb), 0.05); border: 1px solid rgba(var(--bordo-rgb), 0.14); margin-bottom: 16px; }
.schede-t button { font: 600 14px Inter, sans-serif; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--tenue); cursor: pointer; transition: background 0.2s, color 0.2s; }
.schede-t button.on { background: rgba(var(--acc-rgb), 0.16); color: var(--oro2); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.45); }
.dev-locale { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(var(--bordo-rgb), 0.2); }
.dev-locale > button { background: none !important; border: 1px dashed var(--oro) !important; color: var(--oro) !important; box-shadow: none !important; font-size: 14px !important; padding: 11px !important; }
.admin-t { color: var(--arancio); border-color: rgba(var(--meta-rgb), 0.5); }

/* ═══ DOPO L'ACCESSO: le sezioni ═══ */
.app-g { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 6px max(20px, 4vw) 120px; align-items: start; }
.menu { position: sticky; top: max(16px, env(safe-area-inset-top)); display: grid; gap: 4px; padding: 10px; border-radius: 20px; border: 1px solid rgba(var(--bordo-rgb), 0.16);
  background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.55), rgba(var(--vetro2-rgb), 0.5)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.voce { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 13px; border: 1px solid transparent; background: none;
  color: var(--carta); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.voce:hover { background: rgba(var(--luce-rgb), 0.05); }
.voce.on { background: rgba(var(--acc-rgb), 0.12); border-color: rgba(var(--acc-rgb), 0.4); }
.voce.on::before { content: ""; position: absolute; left: -11px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--oro); box-shadow: 0 0 10px var(--oro); }
.m-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--luce-rgb), 0.05); color: var(--oro2); }
.m-ico svg { width: 21px; height: 21px; }
.voce.v-scoperta .m-ico, .voce.v-admin .m-ico { color: var(--arancio); }
.m-t { display: grid; min-width: 0; } .m-t b { font: 600 14.5px var(--f-titoli); } .m-t small { color: var(--tenue); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce em { font: 600 11px Inter, sans-serif; font-style: normal; padding: 3px 8px; border-radius: 999px; background: rgba(var(--testo-rgb), 0.1); color: var(--tenue); }
.vivo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--arancio); box-shadow: 0 0 0 0 rgba(var(--meta-rgb), 0.7); animation: vivo 1.6s infinite; flex: none; }
@keyframes vivo { 70% { box-shadow: 0 0 0 10px rgba(var(--meta-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--meta-rgb), 0); } }
.sez-main { min-width: 0; display: grid; gap: 18px; align-content: start; }
.sez-main .ciao { padding: 8px 0 4px; }
.sez-main .strade { padding: 0; }
.sez-main .scopri { margin: 0; }
.sez-main .pan-t .kick { margin-bottom: 8px; }
.adesso, .conto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 20px; text-align: left; font: inherit; color: var(--carta); cursor: pointer;
  border: 1px solid rgba(var(--meta-rgb), 0.5); background: linear-gradient(120deg, rgba(var(--meta-rgb), 0.16), rgba(var(--vetro2-rgb), 0.5)); }
.conto { grid-template-columns: 1fr; gap: 2px; cursor: default; border-color: rgba(var(--bordo-rgb), 0.2); background: rgba(var(--vetro-rgb), 0.45); }
.adesso small, .conto small { font: 600 11px Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--arancio); }
.adesso b, .conto b { display: block; font: 600 22px var(--f-titoli); } .adesso span span { color: var(--tenue); font-size: 14px; }
.adesso .freccia { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--meta-rgb), 0.5); display: grid; place-items: center; color: var(--arancio); }
.ultimi h2 { margin: 0 0 14px; }

/* In viaggio */
.iv { border: 1px solid rgba(var(--meta-rgb), 0.35); border-radius: 18px; padding: 16px; display: grid; gap: 14px; background: rgba(var(--vetro2-rgb), 0.4); }
.iv + .iv { margin-top: 12px; }
.iv-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.iv-t small { color: var(--arancio); font: 600 11px Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; } .iv-t b { display: block; font: 600 20px var(--f-titoli); }
.iv-t a { text-decoration: none; }
.iv-a { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iv-b { display: grid; justify-items: center; gap: 4px; padding: 18px 10px; border-radius: 16px; border: 1px solid rgba(var(--bordo-rgb), 0.22); background: rgba(var(--vetro-rgb), 0.55); color: var(--carta); font: 28px/1 Inter, sans-serif; cursor: pointer; text-align: center; transition: transform 0.2s, border-color 0.2s; }
.iv-b:hover { transform: translateY(-2px); border-color: var(--oro); }
.iv-b b { font: 600 15px var(--f-titoli); } .iv-b small { font-size: 12px; color: var(--tenue); }
.iv-nota { display: grid; gap: 8px; }
.iv-nota textarea { min-height: 90px; font: 15px Inter, sans-serif; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--bordo-rgb), 0.2); background: rgba(var(--luce-rgb), 0.05); color: var(--carta); resize: vertical; }
.iv-nota .bt { justify-self: start; }
.iv .stato { margin: 0; }
.iv .stato .rotta { width: 40px; margin-right: 14px; }

/* Archivio e profilo */
.spazio { display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(var(--bordo-rgb), 0.18); background: rgba(var(--vetro2-rgb), 0.4); margin-bottom: 14px; }
.spazio > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.spazio b { font: 700 30px var(--f-titoli); } .spazio small { color: var(--tenue); }
.barra-s { height: 8px; border-radius: 8px; background: rgba(var(--luce-rgb), 0.08); overflow: hidden; } .barra-s i { display: block; height: 100%; min-width: 4px; border-radius: 8px; background: linear-gradient(90deg, var(--oro), var(--oro2)); box-shadow: 0 0 10px var(--oro); }
.archivio { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.arc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid rgba(var(--bordo-rgb), 0.14); background: rgba(var(--vetro-rgb), 0.6); color: var(--carta); text-decoration: none; }
.arc .c-img { height: 64px; border-radius: 12px; } .arc b { display: block; font: 600 15px var(--f-titoli); } .arc small { color: var(--tenue); font-size: 13px; }
.prof { display: grid; gap: 14px; }
.prof-t { display: flex; gap: 14px; align-items: center; } .prof-t .av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: var(--su-acc); font: 700 22px 'Space Grotesk', Inter; font-style: normal; }
.prof-t b { display: block; font: 600 20px var(--f-titoli); } .prof-t small { display: block; color: var(--tenue); font-size: 13px; }
.targhe { display: flex; gap: 8px; flex-wrap: wrap; }
.codice { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; } .codice label { display: grid; gap: 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); flex: 1; min-width: 200px; }
.codice input { font: 15px Inter, sans-serif; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(var(--bordo-rgb), 0.2); background: rgba(var(--luce-rgb), 0.05); color: var(--carta); text-transform: none; letter-spacing: 0; }
.scontrini { display: grid; gap: 8px; }
.sc-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fbf7ee; color: #1d1a14; font-family: "Space Mono", ui-monospace, monospace; }
.sc-r b { font: 700 14px "Space Mono", monospace; } .sc-r small { display: block; font-size: 12px; color: #6b6458; } .sc-r a { color: inherit; }
.sc-r .coord { color: #1d1a14; font-size: 15px; } .brucia-r { background: #f3eadb; } .brucia-r s { color: #a4492f; }

@media (max-width: 960px) {
  .app-g { grid-template-columns: 1fr; gap: 16px; padding-top: 0; }
  .menu { position: sticky; top: 0; z-index: 5; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; border-radius: 16px; padding: 6px; }
  .menu::-webkit-scrollbar { display: none; }
  .voce { grid-template-columns: 26px auto auto; padding: 8px 10px; }
  .m-ico { width: 26px; height: 26px; background: none; } .m-ico svg { width: 19px; height: 19px; }
  .m-t small { display: none; }
  .voce.on::before { left: 12px; right: 12px; top: auto; bottom: -7px; width: auto; height: 3px; }
  .iv-a { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .iv-b { padding: 14px 4px; font-size: 24px; }
  .iv-t { grid-template-columns: auto minmax(0, 1fr); } .iv-t a { grid-column: 1 / -1; text-align: center; }
}

.scheda [hidden] { display: none !important; }
.tre { padding-inline: max(20px, 6vw); }

/* ═══ I PIANI (Atlas è privato) ═══ */
.piani-m { display: grid; gap: 22px; padding: 10px max(20px, 6vw) 120px; max-width: 1100px; margin: 0 auto; }
.piani-m .ciao { padding: 10px 0 0; } .piani-m .lead { margin-top: 14px; }
.scaduto { color: var(--arancio); margin: 10px 0 0; }
.piani { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.piano { position: relative; display: grid; gap: 6px; align-content: start; padding: 28px 26px; border-radius: 22px; border: 1px solid rgba(var(--bordo-rgb), 0.2); background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.6), rgba(var(--vetro2-rgb), 0.55)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.piano.top { border-color: var(--arancio); box-shadow: 0 30px 60px -30px rgba(var(--meta-rgb), 0.45); }
.piano small { font: 600 12px Inter, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.piano > b { font: 700 46px/1 var(--f-titoli); letter-spacing: -0.03em; margin-top: 6px; } .piano > span { color: var(--tenue); }
.piano ul { margin: 14px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; } .piano li { padding-left: 22px; position: relative; } .piano li::before { content: "⚑"; position: absolute; left: 0; color: var(--oro); font-size: 13px; top: 2px; }
.piano .badge { position: absolute; top: 18px; right: 18px; font: 700 11px Inter, sans-serif; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 999px; background: var(--arancio); color: var(--su-meta); }
.piani-c { max-width: 560px; } .piani-n { margin: -8px 0 0; }
.piano-io { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .piano-io b { color: var(--oro2); }

/* ═══ TEMA CARTA: i ritocchi che le variabili da sole non fanno ═══ */
[data-tema="carta"] body { background-color: var(--nero);
  background-image: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(212, 80, 42, 0.07), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(14, 116, 112, 0.07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-tema="carta"] body.con-globo { background-image: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(212, 80, 42, 0.07), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(14, 116, 112, 0.07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-tema="carta"] h1, [data-tema="carta"] h2, [data-tema="carta"] h3 { font-family: var(--f-titoli); font-weight: 500; letter-spacing: -0.015em; }
[data-tema="carta"] .hero h1, [data-tema="carta"] .ciao h1 { font-weight: 400; letter-spacing: -0.025em; text-shadow: none; font-style: normal; }
[data-tema="carta"] .hero h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--arancio); font-style: italic; }
[data-tema="carta"] .scheda h2 { background: none; -webkit-text-fill-color: currentColor; color: var(--carta); font-weight: 500; }
[data-tema="carta"] .marchio { font-family: var(--f-titoli); font-weight: 600; font-size: 25px; letter-spacing: 0; }
[data-tema="carta"] .kick { color: var(--arancio); }
[data-tema="carta"] .scheda, [data-tema="carta"] .strada, [data-tema="carta"] .pan, [data-tema="carta"] .menu, [data-tema="carta"] .piano, [data-tema="carta"] .tile,
[data-tema="carta"] .sc-chat, [data-tema="carta"] .sc-mappa-box, [data-tema="carta"] .carta, [data-tema="carta"] .tre-c, [data-tema="carta"] .conto, [data-tema="carta"] .iv, [data-tema="carta"] .arc, [data-tema="carta"] .spazio, [data-tema="carta"] .k-gruppo {
  backdrop-filter: none; -webkit-backdrop-filter: none; background: #fffcf6; border-color: rgba(21, 35, 63, 0.16); box-shadow: var(--ombra-carta); }
[data-tema="carta"] .strada:hover { border-color: var(--oro); }
[data-tema="carta"] .strada.on, [data-tema="carta"] .voce.on { background: rgba(14, 116, 112, 0.08); }
[data-tema="carta"] .bt.oro, [data-tema="carta"] .scheda form > button { color: var(--su-acc); box-shadow: 0 12px 26px -14px rgba(11, 90, 87, 0.7); }
[data-tema="carta"] .bt { color: var(--carta); }
[data-tema="carta"] .scheda input, [data-tema="carta"] .campo, [data-tema="carta"] .codice input, [data-tema="carta"] .iv-nota textarea { background: #fffdf8; border-color: rgba(21, 35, 63, 0.2); }
[data-tema="carta"] .adesso { background: linear-gradient(120deg, rgba(212, 80, 42, 0.1), #fffcf6); }
[data-tema="carta"] .scopri { background: linear-gradient(120deg, rgba(212, 80, 42, 0.09), #fffcf6 60%); }
[data-tema="carta"] .piano.top { box-shadow: 0 30px 60px -34px rgba(212, 80, 42, 0.55); }
[data-tema="carta"] .piano .badge { color: #fff8ef; }
[data-tema="carta"] .io .av, [data-tema="carta"] .prof-t .av { color: #fbf7ee; }
[data-tema="carta"] .avviso { background: var(--carta); color: #fbf7ee; }
[data-tema="carta"] .rp-via { stroke: rgba(21, 35, 63, 0.3); }
[data-tema="carta"] .rp-fatta { stroke: var(--arancio); filter: none; }
[data-tema="carta"] .rp-io { fill: var(--arancio); filter: drop-shadow(0 0 6px rgba(212, 80, 42, 0.6)); }
[data-tema="carta"] .rp-band .rp-pt { fill: #fffcf6; }
[data-tema="carta"] .rotta { background-image: radial-gradient(circle, var(--carta) 2px, transparent 2.6px); }
[data-tema="carta"] .famiglia { color: var(--oro2); border-color: rgba(14, 116, 112, 0.4); }
[data-tema="carta"] .admin-t { color: var(--arancio); border-color: rgba(212, 80, 42, 0.45); }
[data-tema="carta"] .tre { border-top-color: rgba(21, 35, 63, 0.14); }
[data-tema="carta"] .sc-mappa .leaflet-tile-pane { filter: sepia(0.35) saturate(0.7) contrast(1.02); }
/* la chat di lato su carta */
[data-tema="carta"] .asst { --a-bg: #fffcf6; --a-ink: #15233f; --a-soft: #5f6b80; --a-acc: #0e7470; --a-line: rgba(21, 35, 63, 0.12); }
[data-tema="carta"] .asst-bt { background: #15233f; color: #fbf7ee; border-color: transparent; }
[data-tema="carta"] .asst-h { background: #15233f; color: #fbf7ee; }
[data-tema="carta"] .asst-b.atlante p { background: #efe8da; color: #15233f; }
[data-tema="carta"] .sc-msg .asst-b.atlante p { background: #efe8da; color: #15233f; }
[data-tema="carta"] .asst-a button, [data-tema="carta"] .asst-s button, [data-tema="carta"] .sc-sugg button { background: #fffdf8; color: #0b5a57; border-color: rgba(14, 116, 112, 0.35); }
[data-tema="carta"] .asst-f input { background: #fffdf8; color: #15233f; }

/* ═══ la scelta dell'aspetto (nel Profilo) ═══ */
.temi { display: flex; gap: 10px; flex-wrap: wrap; }
.tema-b { display: grid; gap: 6px; justify-items: start; padding: 10px; border-radius: 14px; border: 1px solid var(--linea); background: none; color: var(--carta); font: 600 13px Inter, sans-serif; cursor: pointer; }
.tema-b.on { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.18); }
.tema-b i { display: block; width: 120px; height: 64px; border-radius: 9px; }
.tema-b .t-carta { background: linear-gradient(135deg, #f2ecdf 55%, #d4502a 55% 62%, #0e7470 62%); border: 1px solid rgba(21, 35, 63, 0.15); }
.tema-b .t-notte { background: linear-gradient(135deg, #050b17 55%, #f5a33a 55% 62%, #19d3c5 62%); }

/* i bottoni restano nel carattere del testo (i titoli hanno le grazie, i comandi no) */
.scheda form > button, .dev-locale > button, .bt, .schede-t button, .piano .bt { font-family: Inter, system-ui, sans-serif; }

/* ═══ ESPLORA: il globo che si tocca, le carte dei posti, il mio globo ═══ */
:root { --pop: #f2b632; --pop-rgb: 242, 182, 50; --cuore: #e8553a; --no: #8b94a7; }
:root[data-tema="carta"] { --pop: #e9a21a; --pop-rgb: 233, 162, 26; --cuore: #d4502a; --no: #6c7588; }
body.esplora-su .globo3d { opacity: 0; transition: opacity 0.6s; }
.org-modi { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: rgba(var(--luce-rgb), 0.05); border: 1px solid var(--linea); margin: 0 0 22px; overflow-x: auto; scrollbar-width: none; }
.org-modi::-webkit-scrollbar { display: none; }
.org-modi button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14.5px Inter, sans-serif; padding: 11px 16px; border: 0; border-radius: 12px; background: none; color: var(--tenue); cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s, transform 0.2s; }
.org-modi button span { font-size: 17px; }
.org-modi button:hover { color: var(--carta); background: rgba(var(--luce-rgb), 0.05); }
.org-modi button.on { color: var(--su-acc); background: linear-gradient(135deg, var(--acc-a), var(--acc-b)); box-shadow: 0 8px 20px -10px rgba(var(--acc-rgb), 0.8); }
.org-modi .om-carte.on { background: linear-gradient(135deg, #f0705a, var(--cuore)); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--meta-rgb), 0.9); }
.org-modi .om-mio.on { background: linear-gradient(135deg, #ffd166, var(--pop)); color: #2a1a00; box-shadow: 0 8px 20px -10px rgba(var(--pop-rgb), 0.9); }
.org-modi em { font: 700 11px Inter, sans-serif; font-style: normal; min-width: 20px; padding: 2px 7px; border-radius: 999px; background: var(--pop); color: #2a1a00; }
.org-modi em.bump { animation: bump 0.5s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 40% { transform: scale(1.5); } }
.pan.esplora { padding-bottom: clamp(18px, 3vw, 32px); }

/* la Rotta: le tre porte dell'esplorazione */
.esplora-t { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.es-b { position: relative; overflow: hidden; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 18px 20px 20px; border-radius: 20px; border: 1px solid var(--linea); font: inherit; color: var(--carta); cursor: pointer;
  background: linear-gradient(150deg, rgba(var(--vetro-rgb), 0.6), rgba(var(--vetro2-rgb), 0.5)); transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s; }
.es-b:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.5); }
.es-b .es-i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; margin-bottom: 8px; color: #fff; }
.es-b.globo .es-i { background: linear-gradient(135deg, var(--acc-a), var(--acc-b)); }
.es-b.carte .es-i { background: linear-gradient(135deg, #f0705a, var(--cuore)); }
.es-b.mio .es-i { background: linear-gradient(135deg, #ffd166, var(--pop)); color: #2a1a00; }
.es-b b { font: 600 19px var(--f-titoli); } .es-b small { color: var(--tenue); font-size: 13.5px; }
.es-b::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; opacity: 0.12; background: currentColor; }
.es-b.globo::after { color: var(--oro); } .es-b.carte::after { color: var(--cuore); } .es-b.mio::after { color: var(--pop); }
@media (max-width: 760px) { .esplora-t { grid-template-columns: 1fr; } }

/* 🌍 il globo */
.esp-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 18px; align-items: stretch; }
.esp-globo { position: relative; min-height: min(68vh, 620px); border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(var(--acc-rgb), 0.16), transparent 62%), radial-gradient(circle at 50% 50%, #0b1a33, #050b17 75%); }
:root[data-tema="carta"] .esp-globo { background: radial-gradient(circle at 50% 45%, rgba(14, 116, 112, 0.18), transparent 60%), radial-gradient(circle at 50% 50%, #1b2f52, #0d1830 78%); }
.gv-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.gv-tela:active { cursor: grabbing; }
.gv-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; background: #fffcf6; color: #15233f; font: 600 13px Inter, sans-serif; padding: 6px 11px; border-radius: 10px; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); z-index: 2; }
.gv-aiuto { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; z-index: 2; pointer-events: none; font-size: 13px; color: rgba(255, 255, 255, 0.82); background: rgba(5, 11, 23, 0.55); padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(6px); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.gv-aiuto b { color: #fff; }
.esp-qui { position: relative; display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; border: 1px solid var(--linea); background: rgba(var(--vetro-rgb), 0.7); box-shadow: var(--ombra-carta); }
.esp-qui h3 { font-size: 28px; line-height: 1.1; margin: 0; }
.esp-qui p { margin: 0; }
.esp-qui.trema { animation: trema 0.45s; }
@keyframes trema { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.esp-l { font: 600 11px Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tenue); margin-top: 6px !important; }
.esp-giorni { display: flex; flex-wrap: wrap; gap: 6px; }
.esp-giorni button { font: 600 13px Inter, sans-serif; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--carta); cursor: pointer; }
.esp-giorni button.on { background: var(--carta); color: var(--nero); border-color: var(--carta); }
.bt.grande { padding: 15px 22px; font-size: 15.5px; width: 100%; }
.esp-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .esp-due .bt { padding: 10px 8px; font-size: 13.5px; }
.esp-due .bt:only-child { grid-column: 1 / -1; }
.esp-cerca { display: flex; gap: 6px; margin-top: 6px; }
.esp-cerca input, .esp-dove input { flex: 1; min-width: 0; font: 15px Inter, sans-serif; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(var(--campo-rgb), 0.25); color: var(--carta); outline: none; }
.esp-cerca input:focus, .esp-dove input:focus { border-color: var(--oro); }
@media (max-width: 960px) { .esp-g { grid-template-columns: minmax(0, 1fr); } .esp-globo { min-height: 62vh; } }

/* ♥ le carte */
.esp-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 18px 26px; align-items: start; }
.esp-filtri { grid-column: 1 / -1; display: grid; gap: 12px; }
.esp-dove { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.esp-dove form { display: flex; gap: 6px; flex: 1 1 260px; }
.esp-dove .bt.on { border-color: var(--oro); color: var(--oro); background: rgba(var(--acc-rgb), 0.08); }
.esp-raggio { display: grid; gap: 4px; max-width: 520px; font-size: 14px; color: var(--tenue); }
.esp-raggio b { color: var(--carta); }
.esp-raggio input { accent-color: var(--oro); width: 100%; }
.esp-centro { margin: -4px 0 0; font-size: 14px; } .esp-centro b { color: var(--carta); }
.esp-cat { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.esp-cat button { flex: none; display: inline-flex; gap: 6px; align-items: center; font: 600 13.5px Inter, sans-serif; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(var(--vetro-rgb), 0.5); color: var(--carta); cursor: pointer; transition: transform 0.15s, background 0.2s; }
.esp-cat button:hover:not(:disabled) { transform: translateY(-1px); }
.esp-cat button.on { background: var(--carta); color: var(--nero); border-color: var(--carta); }
.esp-cat button:disabled { opacity: 0.4; cursor: default; }
.esp-cat em { font: 700 11px Inter, sans-serif; font-style: normal; padding: 1px 7px; border-radius: 999px; background: rgba(var(--testo-rgb), 0.1); }
.esp-cat button.on em { background: rgba(var(--campo-rgb), 0.2); color: inherit; }
.esp-gem { display: inline-flex; gap: 8px; align-items: center; justify-self: start; font: 600 14px Inter, sans-serif; cursor: pointer; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px dashed rgba(var(--pop-rgb), 0.8); }
.esp-gem input { accent-color: var(--pop); width: 17px; height: 17px; }
.esp-gioco { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.esp-mazzo { position: relative; width: min(100%, 390px); height: 540px; }
.esp-mazzo.scossa { animation: trema 0.35s; }
.cp { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: #0d1830; color: #fff; user-select: none; touch-action: none;
  transform: translateY(calc(var(--k) * 14px)) scale(calc(1 - var(--k) * 0.045)); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.cp[data-i="0"] { cursor: grab; }
.cp.presa { transition: none; cursor: grabbing; }
.cp.vola { transition: transform 0.36s cubic-bezier(.4,0,.7,.2), opacity 0.3s; }
.cp.torna { animation: torna 0.45s cubic-bezier(.3,1.5,.5,1); }
@keyframes torna { from { transform: translateY(-60px) scale(1.06) rotate(-4deg); opacity: 0; } }
.cp-img { position: absolute; inset: 0; background: linear-gradient(160deg, #1d3a63, #0d1830 60%, #3a1d2a) center/cover; transition: opacity 0.4s; }
.cp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 23, 0.35) 0%, transparent 25%, transparent 42%, rgba(5, 11, 23, 0.9) 82%); }
.cp-ico { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 90px; opacity: 0.55; transition: opacity 0.3s; }
.cp-img.con .cp-ico { opacity: 0; }
.cp-su { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.cp-cat, .cp-gem { font: 600 12px Inter, sans-serif; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #15233f; }
.cp-gem { background: var(--pop); color: #2a1a00; box-shadow: 0 0 0 0 rgba(var(--pop-rgb), 0.7); animation: gemma 2.4s infinite; }
@keyframes gemma { 70% { box-shadow: 0 0 0 10px rgba(var(--pop-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pop-rgb), 0); } }
.cp-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 24px; z-index: 1; }
.cp-t h3 { font: 600 30px/1.05 var(--f-titoli); margin: 0 0 6px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.cp-z { margin: 0 0 8px; font: 500 13px Inter, sans-serif; color: rgba(255, 255, 255, 0.78); }
.cp-p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.timbro { position: absolute; z-index: 2; font: 800 28px/1 Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 14px; border: 4px solid; border-radius: 12px; opacity: 0; pointer-events: none; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); }
.timbro.no { top: 70px; right: 22px; color: #ff5d5d; transform: rotate(14deg); }
.timbro.cuore { top: 70px; left: 22px; color: #ff6b8b; transform: rotate(-14deg); }
.timbro.stella { left: 50%; bottom: 46%; transform: translateX(-50%) rotate(-4deg); color: var(--pop); }
.timbro.poi { left: 50%; top: 40%; transform: translateX(-50%); color: #7fd1ff; }
.esp-tasti { display: flex; align-items: center; gap: 14px; }
.tasto { width: 66px; height: 66px; border-radius: 50%; border: 0; display: grid; place-items: center; font: 700 28px/1 system-ui, sans-serif; cursor: pointer; background: #fffcf6; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(21, 35, 63, 0.08); transition: transform 0.15s cubic-bezier(.3,1.8,.5,1), box-shadow 0.2s; }
.tasto:hover { transform: scale(1.1); } .tasto:active { transform: scale(0.92); }
.tasto.no { color: var(--no); } .tasto.cuore { color: var(--cuore); width: 74px; height: 74px; font-size: 32px; } .tasto.stella { color: var(--pop); }
.tasto.piccolo { width: 48px; height: 48px; font-size: 20px; color: #3b6fb0; }
.esp-aiuto { margin: 0; font-size: 13px; text-align: center; } .esp-aiuto b { color: var(--carta); }
.esp-conta { margin: 0; font: 500 12.5px "Space Mono", monospace; color: var(--tenue); text-align: center; }
.esp-vuoto { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; border-radius: 26px; border: 2px dashed var(--linea); padding: 24px; }
.esp-vuoto > span { font-size: 50px; } .esp-vuoto p { margin: 0; max-width: 28ch; }
.esp-lista .esp-vuoto { position: static; }
.link { border: 0; background: none; padding: 0; color: var(--oro); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.esp-scheda { position: sticky; top: 16px; border-radius: 22px; border: 1px solid var(--linea); background: rgba(var(--vetro-rgb), 0.75); box-shadow: var(--ombra-carta); overflow: hidden; min-height: 200px; }
.esp-scheda > .muted { padding: 22px; }
@media (max-width: 1100px) { .esp-c { grid-template-columns: minmax(0, 1fr); } .esp-scheda { position: static; } }
@media (max-width: 480px) { .esp-mazzo { height: 480px; } .tasto { width: 56px; height: 56px; } .tasto.cuore { width: 62px; height: 62px; } .cp-t h3 { font-size: 25px; } .esp-tasti { gap: 10px; } }

/* la scheda del posto */
.sch { display: grid; }
.sch-img { position: relative; height: 210px; background: linear-gradient(160deg, #1d3a63, #0d1830) center/cover; display: grid; place-items: center; }
.sch-img span { font-size: 64px; opacity: 0.6; } .sch-img.con span { display: none; }
.sch > :not(.sch-img) { margin-left: 22px; margin-right: 22px; }
.sch-salvato { margin-top: -18px !important; position: relative; justify-self: start; font: 700 13px Inter, sans-serif; padding: 8px 14px; border-radius: 999px; background: var(--cuore); color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5); animation: torna 0.5s both; }
.sch-salvato.stella { background: var(--pop); color: #2a1a00; }
.sch-k { margin: 16px 0 0; font: 600 12px Inter, sans-serif; letter-spacing: 0.06em; color: var(--oro); } .sch-k .gem { color: #b77800; }
.sch h3 { font-size: 27px; line-height: 1.1; margin: 4px 0 4px; }
.sch-z { margin: 0 0 10px; color: var(--tenue); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sch-p { margin: 0 0 10px; font-weight: 500; }
.sch-w { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(var(--testo-rgb), 0.86); }
.sch-fonte { margin: 4px 0 12px; font-size: 12px; color: var(--tenue); } .sch-fonte a { color: var(--oro); }
.sch-meteo { display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--acc-rgb), 0.07); margin-bottom: 12px; }
.sch-meteo .ora { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; } .sch-meteo .ora span { font-size: 30px; } .sch-meteo .ora b { font: 600 30px var(--f-titoli); } .sch-meteo .ora small { color: var(--tenue); font-size: 12.5px; }
.sch-meteo .giorni { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; }
.sch-meteo .giorni span { display: grid; gap: 1px; font-size: 18px; } .sch-meteo .giorni small { font-size: 11px; color: var(--tenue); text-transform: capitalize; } .sch-meteo .giorni b { font: 600 14px Inter, sans-serif; }
.sch-mappa { border-radius: 16px; overflow: hidden; height: 190px; margin-bottom: 12px; border: 1px solid var(--linea); }
.sch-mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.sch-link { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px !important; } .sch-link .bt { text-decoration: none; padding: 8px 13px; font-size: 13px; }
[data-sch-piu] .stato { margin: 6px 0 18px; }

/* ★ il mio globo */
.esp-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 18px; position: relative; }
.esp-lista { border-radius: 22px; border: 1px solid var(--linea); background: rgba(var(--vetro-rgb), 0.7); box-shadow: var(--ombra-carta); padding: 18px; max-height: min(68vh, 620px); overflow-y: auto; }
.esp-lista-t h3 { margin: 0; font-size: 24px; } .esp-lista-t p { margin: 2px 0 10px; font-size: 14px; }
.esp-gr { margin-top: 12px; }
.esp-gr-t { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
.esp-gr-t .link { font-size: 12.5px; }
.esp-p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 4px; border-radius: 12px; transition: background 0.2s; }
.esp-p.on { background: rgba(var(--acc-rgb), 0.08); }
.esp-p-t { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; border: 0; background: none; color: var(--carta); font: inherit; cursor: pointer; padding: 0; }
.esp-p-t b { display: block; font: 600 14.5px var(--f-titoli); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .esp-p-t small { color: var(--tenue); font-size: 12.5px; }
.mini { width: 42px; height: 42px; border-radius: 10px; background: rgba(var(--acc-rgb), 0.12) center/cover; display: grid; place-items: center; font-size: 20px; }
.spunta { position: relative; width: 22px; height: 22px; cursor: pointer; }
.spunta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.spunta i { position: absolute; inset: 0; pointer-events: none; border-radius: 7px; border: 2px solid rgba(var(--testo-rgb), 0.35); transition: 0.15s; }
.spunta input:checked + i { background: var(--oro); border-color: var(--oro); }
.spunta input:checked + i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--su-acc); font: 800 13px Inter; }
.spunta input:focus-visible + i { box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.35); }
.esp-p .x { border: 0; background: none; color: var(--tenue); cursor: pointer; font: 600 12px Inter, sans-serif; padding: 6px; border-radius: 8px; }
.esp-p .x:hover { color: var(--cuore); background: rgba(var(--meta-rgb), 0.08); }
.esp-crea { grid-column: 1 / -1; position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 14px 12px 20px; border-radius: 18px; background: var(--carta); color: var(--nero); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.esp-crea b { font: 700 20px var(--f-titoli); }
.esp-crea label { display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: 0.85; }
.esp-crea input { width: 74px; font: 15px Inter, sans-serif; padding: 7px 10px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.14); color: inherit; }
:root[data-tema="carta"] .esp-crea input { background: rgba(255, 255, 255, 0.12); }
.esp-crea .bt.oro { order: -1; }
.esp-crea .stato { flex-basis: 100%; margin: 0; color: inherit; }
.esp-crea .stato:empty { display: none; }
.esp-sheet { position: absolute; top: 12px; left: 12px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 90px); overflow-y: auto; z-index: 4; border-radius: 22px; background: var(--nero); border: 1px solid var(--linea); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); animation: su 0.35s both; }
.esp-sheet .chiudi { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); color: #15233f; cursor: pointer; font-weight: 700; }
@media (max-width: 960px) { .esp-m { grid-template-columns: minmax(0, 1fr); } .esp-lista { max-height: none; } .esp-sheet { position: fixed; inset: auto 10px 10px 10px; width: auto; max-height: 78vh; } }

/* gli effetti a schermo */
.esp-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
.esp-lampo { position: fixed; inset: 0; pointer-events: none; z-index: 79; animation: lampo 0.7s ease-out forwards; }
.esp-lampo.stella { background: radial-gradient(circle at 50% 50%, rgba(var(--pop-rgb), 0.45), rgba(var(--pop-rgb), 0.08) 45%, transparent 70%); }
.esp-lampo.no { box-shadow: inset 0 0 120px 20px rgba(220, 60, 60, 0.35); }
@keyframes lampo { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cp, .cp.vola, .esp-qui.trema, .esp-mazzo.scossa, .cp-gem { animation: none !important; transition: none !important; } }
.esp-qui-c { display: grid; gap: 10px; align-content: start; }
.esp-qui .esp-cerca { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--linea); }
.esp-qui { grid-template-rows: 1fr auto; }
.esplora-c [hidden], .esp-m [hidden] { display: none !important; }

/* ═══ I PIANI, nuovi: l'annuale è il miglior prezzo e si vede ═══ */
.piani { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 820px) { .piani { grid-template-columns: 1fr; } }
.piano { padding: 30px 28px; gap: 4px; }
.piano .prezzo { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.piano .prezzo b { font: 700 54px/1 var(--f-titoli); letter-spacing: -0.04em; }
.piano .prezzo span { color: var(--tenue); }
.piano .al-mese { margin: 2px 0 0; color: var(--tenue); } .piano .al-mese b { color: var(--carta); font-size: 18px; } .piano .al-mese s { margin-left: 6px; opacity: 0.7; }
.piano .risp { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(var(--pop-rgb), 0.18); font-size: 14.5px; }
.piano .garanzia { margin: 10px 0 0; font-size: 12.5px; color: var(--tenue); text-align: center; }
.piano.top { padding: 40px 32px 30px; transform: scale(1.02); border: 2px solid var(--pop); background: linear-gradient(160deg, rgba(var(--pop-rgb), 0.14), rgba(var(--vetro2-rgb), 0.85)); box-shadow: 0 40px 80px -40px rgba(var(--pop-rgb), 0.6); }
.piano.top .prezzo b { font-size: 72px; }
.piano .nastro { position: absolute; top: -15px; left: 28px; font: 800 12.5px Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; background: var(--pop); color: #2a1a00; box-shadow: 0 8px 18px -8px rgba(var(--pop-rgb), 0.9); animation: gemma 2.6s infinite; }
.piano:not(.top) .bt { width: 100%; padding: 13px; }
.confronto { display: grid; gap: 10px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--linea); background: rgba(var(--vetro-rgb), 0.6); }
.cf-r { display: grid; grid-template-columns: 120px minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-size: 14px; }
.cf-r i { display: block; height: 34px; width: var(--w); border-radius: 10px; background: rgba(var(--testo-rgb), 0.16); position: relative; animation: cresce 1.1s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
.cf-r i b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 700 14px Inter, sans-serif; }
.cf-r.top i { background: linear-gradient(90deg, #ffd166, var(--pop)); color: #2a1a00; }
.cf-r em { font: 800 15px Inter, sans-serif; font-style: normal; color: #1f9d63; }
@keyframes cresce { from { transform: scaleX(0.05); } }
:root[data-tema="carta"] .piano.top { background: linear-gradient(160deg, #18294a, #0f1f3a); color: #fbf7ee; border-color: var(--pop); }
:root[data-tema="carta"] .piano.top small { color: #ffd166; }
:root[data-tema="carta"] .piano.top .prezzo span, :root[data-tema="carta"] .piano.top .al-mese, :root[data-tema="carta"] .piano.top .garanzia { color: rgba(251, 247, 238, 0.72); }
:root[data-tema="carta"] .piano.top .al-mese b, :root[data-tema="carta"] .piano.top .risp { color: #fbf7ee; }
:root[data-tema="carta"] .piano.top .risp { background: rgba(255, 209, 102, 0.16); }
:root[data-tema="carta"] .piano.top li::before { color: #ffd166; }
:root[data-tema="carta"] .piano.top .bt.oro { background: linear-gradient(135deg, #ffd166, var(--pop)); color: #2a1a00; box-shadow: 0 4px 0 #b27a0c, 0 18px 30px -14px rgba(var(--pop-rgb), 0.9); }
:root[data-tema="carta"] .confronto { background: #fffcf6; box-shadow: var(--ombra-carta); }

/* ═══ POP: più colore, più carattere, sempre in ordine ═══ */
.ciao h1 em, .hero h1 em, .pan-t h2 em { font-style: italic; }
.ciao h1 em { background: linear-gradient(transparent 62%, rgba(var(--pop-rgb), 0.55) 62%, rgba(var(--pop-rgb), 0.55) 92%, transparent 92%); padding: 0 0.08em; -webkit-text-fill-color: currentColor; }
.strada:nth-child(1) .ico { color: var(--oro); } .strada:nth-child(2) .ico { color: var(--cuore); } .strada:nth-child(3) .ico { color: #c98a00; }
.strada .ico { width: 62px; height: 62px; padding: 12px; border-radius: 18px; background: rgba(var(--acc-rgb), 0.1); }
.strada:nth-child(2) .ico { background: rgba(var(--meta-rgb), 0.1); } .strada:nth-child(3) .ico { background: rgba(var(--pop-rgb), 0.16); }
.strada:hover { transform: translateY(-5px) rotate(-0.35deg); }
.bt.oro:active, .tasto:active { transform: translateY(2px); }
:root[data-tema="carta"] .bt.oro { background: linear-gradient(180deg, #13817c, #0e7470); box-shadow: 0 3px 0 #0a4d4a, 0 14px 26px -14px rgba(11, 90, 87, 0.8); }
:root[data-tema="carta"] .bt.oro:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #0a4d4a, 0 18px 30px -14px rgba(11, 90, 87, 0.85); }
:root[data-tema="carta"] .bt.oro:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a4d4a; }
:root[data-tema="carta"] .es-b, :root[data-tema="carta"] .esp-qui, :root[data-tema="carta"] .esp-scheda, :root[data-tema="carta"] .esp-lista, :root[data-tema="carta"] .esp-cat button { background: #fffcf6; }
:root[data-tema="carta"] .esp-cat button.on, :root[data-tema="carta"] .esp-giorni button.on { background: #15233f; color: #fbf7ee; }
:root[data-tema="carta"] .org-modi { background: #efe8d9; }
:root[data-tema="carta"] .esp-sheet { background: #fbf7ee; }
.sez-main > * { min-width: 0; }
@media (max-width: 600px) { .org-modi button { flex: none; padding: 10px 13px; font-size: 13.5px; } .esp-dove .bt { padding: 9px 13px; } .esp-g, .esp-m { gap: 12px; } .pan.esplora { padding: 18px 14px; } }
.esp-qui { grid-template-columns: minmax(0, 1fr); }
.esp-cerca input { width: 100%; }
@media (max-width: 600px) { .esp-globo { min-height: 0; aspect-ratio: 1 / 1.05; max-width: 100%; } }

/* ═══ NUOVO: cosa organizzi (viaggio, escursione, scoperta) e quanti giorni ═══ */
.genere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.genere > * { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--linea); background: rgba(var(--vetro-rgb), 0.6); color: var(--carta); font: inherit; cursor: pointer; text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.genere > *:hover { transform: translateY(-2px); }
.genere span { grid-row: span 2; font-size: 28px; }
.genere b { font: 600 17px var(--f-titoli); } .genere small { color: var(--tenue); font-size: 12.5px; }
.genere .on { border-color: var(--oro); background: rgba(var(--acc-rgb), 0.1); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.12); }
.genere .genere-sc { border-style: dashed; }
.chiedi { display: grid; gap: 8px; margin: 14px 0 4px; padding: 16px 18px; border-radius: 18px; background: rgba(var(--pop-rgb), 0.1); border: 1.5px solid rgba(var(--pop-rgb), 0.35); }
.chiedi.manca { animation: trema 0.45s; border-color: var(--cuore); background: rgba(var(--meta-rgb), 0.1); }
.chiedi-t { margin: 4px 0 0; font: 600 14px Inter, sans-serif; } .chiedi-t .serve { font: 700 10.5px Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cuore); margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips button { font: 600 14px Inter, sans-serif; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(var(--vetro-rgb), 0.8); color: var(--carta); cursor: pointer; transition: transform 0.15s; }
.chips button:hover { transform: translateY(-1px); }
.chips button.on { background: var(--carta); color: var(--nero); border-color: var(--carta); }
.chips .altro { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--tenue); }
.chips .altro input { width: 64px; font: 15px Inter, sans-serif; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linea); background: rgba(var(--campo-rgb), 0.25); color: var(--carta); }
.campo.data { width: auto; max-width: 220px; font-size: 15px; padding: 10px 14px; border-radius: 14px; resize: none; }
.bt.grande-x { padding: 15px 28px; font-size: 16px; }
@media (max-width: 700px) { .genere { grid-template-columns: 1fr; } .genere > * { padding: 11px 14px; } }

/* VIAGGI ed ESCURSIONI: le liste */
.lista-az { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lista-tab { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(var(--luce-rgb), 0.05); border: 1px solid var(--linea); margin-bottom: 16px; flex-wrap: wrap; }
.lista-tab button { font: 600 14px Inter, sans-serif; padding: 9px 14px; border: 0; border-radius: 10px; background: none; color: var(--tenue); cursor: pointer; }
.lista-tab button.on { background: var(--carta); color: var(--nero); }
.lista-tab em { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 4px; }

/* IN VIAGGIO: sempre a portata nei giorni del viaggio */
.iv-striscia { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; text-align: left; padding: 14px 18px; border-radius: 18px; border: 1.5px solid var(--arancio); background: linear-gradient(110deg, rgba(var(--meta-rgb), 0.16), rgba(var(--vetro-rgb), 0.8)); color: var(--carta); font: inherit; cursor: pointer; }
.iv-striscia small { display: block; font: 700 11px Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arancio); } .iv-striscia b { font: 600 18px var(--f-titoli); }
.iv-s-a { font-size: 20px; letter-spacing: 4px; }

/* ═══ IL TELEFONO: la barra in basso, cinque voci, quella in mezzo evidenziata ═══ */
.tab-tel, .tel-menu { display: none; }
.tel-tutto { position: fixed; inset: 0; z-index: 70; background: rgba(5, 11, 23, 0.55); backdrop-filter: blur(4px); display: grid; align-items: end; }
.tel-tutto-c { background: var(--nero); border-radius: 24px 24px 0 0; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; display: grid; gap: 4px; animation: su 0.3s both; }
.tt-testa { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; } .tt-testa b { font: 600 20px var(--f-titoli); }
.tt-testa .chiudi { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea); background: none; color: var(--carta); font-weight: 700; }
.tt-voce { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 9px 8px; border-radius: 14px; border: 0; background: none; color: var(--carta); font: inherit; text-decoration: none; }
.tt-voce .m-ico { grid-row: span 2; } .tt-voce b { font: 600 15px var(--f-titoli); } .tt-voce small { color: var(--tenue); font-size: 12px; }
.tt-voce.on { background: rgba(var(--acc-rgb), 0.12); }
@media (max-width: 760px) {
  .menu { display: none; }
  .app-g { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .tel-menu { display: inline-flex; font-size: 18px; padding: 8px 14px; }
  .nav .io [data-esci], .nav .io [data-intero] .et { display: none; }
  .tab-tel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px 6px; border-radius: 24px; background: rgba(var(--vetro-rgb), 0.92); border: 1px solid var(--linea); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .tt { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; color: var(--tenue); font: 600 11px Inter, sans-serif; text-decoration: none; border-radius: 16px; }
  .tt .tt-i { width: 26px; height: 26px; display: grid; place-items: center; } .tt svg { width: 24px; height: 24px; }
  .tt.on { color: var(--oro); }
  .tt.centro { transform: translateY(-14px); }
  .tt.centro .tt-i { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--acc-a), var(--acc-b)); color: var(--su-acc); box-shadow: 0 10px 22px -8px rgba(var(--acc-rgb), 0.9), 0 0 0 5px var(--nero); }
  .tt.centro .tt-i svg { width: 28px; height: 28px; }
  .tt.centro .tt-t { color: var(--carta); }
  .tt.centro .vivo { width: 16px; height: 16px; background: #fff; }
  .tt.centro:has(.vivo) .tt-i { background: linear-gradient(135deg, #f0705a, var(--arancio)); }
  body:has(.tab-tel) .asst-bt { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .iv-striscia { grid-template-columns: auto minmax(0, 1fr) auto; } .iv-striscia .iv-s-a { display: none; }
}
:root[data-tema="carta"] .tab-tel { background: rgba(255, 252, 246, 0.95); }
:root[data-tema="carta"] .tt.centro .tt-i { box-shadow: 0 10px 22px -8px rgba(11, 90, 87, 0.8), 0 0 0 5px #f2ecdf; }
:root[data-tema="carta"] .tel-tutto-c { background: #fbf7ee; }
:root[data-tema="carta"] .genere > *, :root[data-tema="carta"] .chips button { background: #fffcf6; }
:root[data-tema="carta"] .chips button.on, :root[data-tema="carta"] .lista-tab button.on { background: #15233f; color: #fbf7ee; }
@media (max-width: 760px) { body:has(.tab-tel) .mu { bottom: calc(96px + env(safe-area-inset-bottom)) !important; } body:has(.tab-tel) .schermo-intero { display: none; } }

/* ═══ ★ IL MIO GLOBO: la sezione ═══ */
.pan.globo-sez { padding: 0; overflow: hidden; }
.mg { display: grid; gap: 18px; position: relative; padding-bottom: clamp(18px, 3vw, 30px); }
.mg-eroe { position: relative; min-height: min(78vh, 720px); border-radius: 22px 22px 0 0; overflow: hidden; background: radial-gradient(circle at 60% 45%, #1b3460, #070f20 75%); color: #fbf7ee; }
.mg-globo { position: absolute !important; inset: 0; min-height: 0 !important; border-radius: 0; background: none !important; }
.mg-testa { position: absolute; left: clamp(18px, 3vw, 34px); top: clamp(18px, 3vw, 30px); max-width: 420px; pointer-events: none; z-index: 2; }
.mg-testa h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); margin: 6px 0 4px; line-height: 1.05; }
.mg-testa p { margin: 0; color: rgba(255, 255, 255, 0.75); }
.mg-testa .kick { color: #ffd166; }
.mg-numeri { position: absolute; left: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 34px); bottom: 74px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.mg-numeri div { padding: 10px 16px; border-radius: 16px; background: rgba(7, 15, 32, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mg-numeri b { display: block; font: 700 26px/1 var(--f-titoli); color: #fff; font-variant-numeric: tabular-nums; } .mg-numeri small { font: 600 11px Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mg-strati { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mg-strati::-webkit-scrollbar { display: none; }
.mg-strati button { flex: none; display: inline-flex; gap: 6px; align-items: center; font: 600 13px Inter, sans-serif; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(7, 15, 32, 0.55); color: rgba(255, 255, 255, 0.6); cursor: pointer; backdrop-filter: blur(8px); }
.mg-strati button i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255, 255, 255, 0.12); }
.mg-strati button.on { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.mg-strati .st-visti.on i { background: #22a36b; } .mg-strati .st-futuri.on i { background: #3b82f6; } .mg-strati .st-cuore.on i { background: var(--cuore); }
.mg-strati .st-stella.on i { background: #f2b632; color: #2a1a00; } .mg-strati .st-scoperte.on i { background: #7a5cff; } .mg-strati .st-rotte.on i { background: #22a36b; }
.mg-tr, .mg-lista { padding: 0 clamp(18px, 3vw, 34px); }
.mg-tr h3 { margin: 6px 0 12px; font-size: 24px; } .mg-tr h3 small { font: 600 13px Inter, sans-serif; color: var(--tenue); margin-left: 8px; }
.mg-tr-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.tr { display: grid; gap: 4px; justify-items: start; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--linea); color: var(--tenue); }
.tr span { font-size: 24px; filter: grayscale(1); opacity: 0.5; } .tr b { font: 600 14px var(--f-titoli); color: var(--carta); opacity: 0.6; }
.tr small { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tr-b { display: block; width: 100%; height: 5px; border-radius: 9px; background: rgba(var(--luce-rgb), 0.08); overflow: hidden; } .tr-b i { display: block; height: 100%; background: var(--oro); }
.tr.ok { border-style: solid; border-color: rgba(var(--pop-rgb), 0.6); background: rgba(var(--pop-rgb), 0.1); color: var(--carta); }
.tr.ok span { filter: none; opacity: 1; } .tr.ok b { opacity: 1; } .tr.ok small { color: #1f9d63; font-weight: 700; }
.spunta-v { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #22a36b; color: #fff; font: 800 12px Inter, sans-serif; }
.mg-viaggi { display: grid; gap: 8px; }
.mg-v { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); color: var(--carta); text-decoration: none; }
.mg-v > span:first-child { font-size: 22px; } .mg-v b { display: block; font: 600 15px var(--f-titoli); } .mg-v small { color: var(--tenue); font-size: 12.5px; }
.mg-v.fatto { border-left: 4px solid #22a36b; } .mg-v:not(.fatto) { border-left: 4px solid #3b82f6; }
.mg .esp-crea { margin: 0 clamp(18px, 3vw, 34px); }
.mg .esp-sheet { top: 12px; }
.mg-visto { margin: 14px 22px 0; }
:root[data-tema="carta"] .tr.ok, :root[data-tema="carta"] .mg-v { background: #fffcf6; }
@media (max-width: 760px) { .mg-eroe { min-height: 92vh; } .mg-numeri { bottom: 64px; gap: 6px; } .mg-numeri div { padding: 7px 11px; } .mg-numeri b { font-size: 20px; } .mg-testa h2 { font-size: 28px; } }

/* l'entrata: all'inizio solo il globo */
body.entrata #app > * { opacity: 0; }
body.entrata .asst-bt, body.entrata .mu, body.entrata .schermo-intero, body.entrata .rotta-pagina { opacity: 0; }
#app > * { transition: opacity 0.6s; }
/* più fluido: niente sfocatura del vetro sopra il globo che gira (costa tanto al computer) */
body:has(> .globo3d) .strada, body:has(> .globo3d) .pan, body:has(> .globo3d) .menu, body:has(> .globo3d) .scheda, body:has(> .globo3d) .tre-c, body:has(> .globo3d) .piano { backdrop-filter: none; -webkit-backdrop-filter: none; }
:root:not([data-tema="carta"]) body:has(> .globo3d) .strada, :root:not([data-tema="carta"]) body:has(> .globo3d) .pan, :root:not([data-tema="carta"]) body:has(> .globo3d) .menu { background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.86), rgba(var(--vetro2-rgb), 0.82)); }
:root:not([data-tema="carta"]) body:has(> .globo3d) .scheda { background: linear-gradient(160deg, rgba(var(--vetro-rgb), 0.82), rgba(var(--vetro2-rgb), 0.86)); }
.tel-tutto[hidden], .esp-crea[hidden], .esp-sheet[hidden] { display: none !important; }