/* ============================================================
   VIBEST — strumenti web (bio, didascalia)
   Solo gli stili di queste pagine: base, header, footer e titolo vengono da /theme-fumo.css.
   Mobile-first: chi arriva da un link social scrive dal telefono.
   ============================================================ */
/* Logo al centro, menu a destra fuori dal flusso. La stessa regola sta anche in /theme-fumo.css: qui è ripetuta
   perché il tema viene richiamato con una versione vecchia e il telefono potrebbe averlo in cache. */
header { justify-content: center; }
header .menu-wrap { position: absolute; right: 20px; top: calc(50% + env(safe-area-inset-top) / 2); transform: translateY(-50%); }
main { max-width: 640px; padding: 32px 20px 64px; }

.kicker { font-family: 'Orbitron', sans-serif; font-size: 0.78em; letter-spacing: 3px;
  color: var(--ciano); text-transform: uppercase; margin-bottom: 12px; text-align: center;
  text-shadow: 0 0 12px rgba(0,240,255,0.55); }
.page-title { text-align: center; font-size: clamp(1.8em, 7vw, 2.6em); margin-bottom: 14px; }
.subtitle { text-align: center; font-size: 1.05em; color: #cfcfd8; max-width: 500px; margin: 0 auto 28px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

/* Il patto: è la cosa più importante della pagina, sta PRIMA dei campi e non si può chiudere. */
.patto { margin: 0 0 32px; }
.patto p { font-size: 1em; color: #d8d8e2; margin-bottom: 12px; }
.patto .forte { font-size: 1.15em; color: #fff; font-weight: 700;
  text-shadow: 0 0 14px rgba(192,132,252,0.45); }
.patto ul { list-style: none; padding: 0; margin: 4px 0 14px; }
.patto li { position: relative; padding-left: 20px; color: #e4e4ee; font-size: 1em; margin-bottom: 6px; }
.patto li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ciano), var(--viola)); box-shadow: 0 0 10px rgba(0,240,255,0.7); }

/* Bio / Didascalia: due pagine vere (due URL per Google), qui sembrano due schede. */
.schede { display: flex; gap: 8px; margin: 0 0 24px; }
.schede a { flex: 1; text-align: center; padding: 12px 10px; border-radius: 12px; text-decoration: none;
  font-family: 'Orbitron', sans-serif; font-size: 0.82em; letter-spacing: 1.5px; text-transform: uppercase;
  color: #b9b9c8; border: 1px solid rgba(122,0,255,0.35); background: rgba(10,5,35,0.6); }
.schede a[aria-current="page"] { color: #fff; border-color: var(--ciano);
  box-shadow: 0 0 18px rgba(0,240,255,0.30), inset 0 0 18px rgba(0,240,255,0.08); }
.schede a:hover { text-decoration: none; color: #fff; }

.campo { margin-bottom: 20px; }
.campo label { display: block; color: #fff; font-weight: 600; font-size: 1em; margin-bottom: 4px; }
.campo .aiuto { display: block; font-size: 0.85em; color: #9a9aa8; margin-bottom: 8px; line-height: 1.45; }
/* 16px minimo: sotto, iOS ingrandisce la pagina ad ogni tocco su un campo. */
.campo input, .campo textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: #fff;
  background: rgba(5,2,15,0.75); border: 1.5px solid rgba(122,0,255,0.40); border-radius: 12px;
  padding: 12px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #6d6d7d; }
.campo input:focus, .campo textarea:focus { border-color: var(--ciano); box-shadow: 0 0 16px rgba(0,240,255,0.25); }
.campo.manca input, .campo.manca textarea { border-color: var(--fucsia); box-shadow: 0 0 16px rgba(255,61,168,0.30); }

.btn-vai { display: block; width: 100%; cursor: pointer; border: none; border-radius: 14px; padding: 16px 20px;
  font-family: 'Orbitron', sans-serif; font-size: 1em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--fucsia), var(--viola) 55%, #3b6bff);
  box-shadow: 0 0 22px rgba(122,0,255,0.55), 0 0 44px rgba(122,0,255,0.22);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
.btn-vai:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(122,0,255,0.8), 0 0 56px rgba(122,0,255,0.35); }
.btn-vai[disabled] { opacity: 0.55; cursor: progress; transform: none; }
.sotto-btn { text-align: center; font-size: 0.82em; color: #9a9aa8; margin-top: 10px; }

/* Messaggi: la domanda del "serve di più" è in tinta, l'errore in rosso. */
.avviso { display: none; border-radius: 14px; padding: 16px 18px; margin: 20px 0 0; font-size: 0.98em; line-height: 1.55; color: #fff; }
.avviso.on { display: block; }
.avviso.domanda { background: linear-gradient(135deg, rgba(0,240,255,0.10), rgba(122,0,255,0.16));
  border: 1.5px solid rgba(0,240,255,0.5); }
.avviso.errore { background: rgba(255,90,90,0.08); border: 1.5px solid rgba(255,90,90,0.45); }
.avviso strong { display: block; color: var(--ciano); margin-bottom: 4px; }
.avviso.errore strong { color: #ff8080; }

/* Risultato: le sue parole accanto alla versione sistemata, perché le riconosca. */
.risultato { display: none; margin-top: 36px; }
.risultato.on { display: block; }
.risultato h2 { margin-top: 0; text-align: center; }
.tue-parole { border: 1px dashed rgba(192,132,252,0.40); border-radius: 14px; padding: 14px 18px; margin: 0 0 14px; }
.tue-parole .etichetta { color: var(--viola-soft); }
.tue-parole p { color: #a9a9b8; font-size: 0.92em; margin: 0; white-space: pre-line; }
.versione { background: rgba(10,5,35,0.72); border: 1px solid rgba(0,240,255,0.35); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 0 22px rgba(0,240,255,0.10); }
.etichetta { font-family: 'Orbitron', sans-serif; font-size: 0.72em; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ciano); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; }
.etichetta .conta { color: #8a8a9a; letter-spacing: 1px; }
.versione .testo { color: #fff; font-size: 1.02em; line-height: 1.6; margin: 0 0 12px; white-space: pre-line; }
.btn-copia { cursor: pointer; font: inherit; font-size: 0.88em; color: var(--ciano); background: transparent;
  border: 1px solid rgba(0,240,255,0.45); border-radius: 999px; padding: 7px 16px; }
.btn-copia:hover { background: rgba(0,240,255,0.08); }
.btn-copia.fatto { color: #2BFF9A; border-color: rgba(43,255,154,0.55); }

/* Utilità prima, VIBEST dopo: l'invito compare solo insieme al risultato. */
.invito { text-align: center; margin-top: 30px; padding: 24px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,61,168,0.08), rgba(122,0,255,0.12) 55%, rgba(0,240,255,0.07));
  border: 1px solid rgba(122,0,255,0.38); }
.invito p { color: #e4e4ee; font-size: 1em; margin-bottom: 16px; }
.btn-vibest { display: inline-block; text-decoration: none; color: #fff; background: #000;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.92em; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 14px 24px; border-radius: 14px; border: 1.5px solid rgba(122,0,255,0.6);
  box-shadow: 0 0 18px rgba(122,0,255,0.45), 0 0 32px rgba(122,0,255,0.20); }
.btn-vibest:hover { text-decoration: none; border-color: var(--viola); box-shadow: 0 0 24px rgba(122,0,255,0.75); }
.invito small { display: block; margin-top: 10px; color: #2BFF9A; letter-spacing: 1px; font-size: 0.8em; }

.nota-privacy { font-size: 0.82em; color: #8a8a9a; text-align: center; margin-top: 18px; line-height: 1.5; }

/* Testo per chi arriva da Google (e per Google): sta sotto lo strumento, non in mezzo. */
.guida { margin-top: 64px; padding-top: 8px; border-top: 1px solid rgba(122,0,255,0.22); }
.guida h2 { margin-top: 40px; }
.guida p, .guida li { font-size: 0.98em; color: #c4c4d0; }
.guida .mestieri { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.guida .mestieri span { font-size: 0.82em; color: #d5d5e0; border: 1px solid rgba(0,240,255,0.30);
  border-radius: 999px; padding: 5px 12px; background: rgba(0,240,255,0.05); }

@media (min-width: 720px) {
  .versioni { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .versione { margin-bottom: 0; }
}

/* "Cosa provi": l'unico campo obbligatorio, e deve vedersi che non è come gli altri.
   Sta dentro un riquadro acceso, con targhetta, etichetta più grande e area di scrittura più alta. */
.campo.cuore { padding: 18px 16px 16px; margin: 28px -4px; border-radius: 16px;
  border: 1.5px solid rgba(255,61,168,0.55);
  background: linear-gradient(135deg, rgba(255,61,168,0.10), rgba(122,0,255,0.12) 60%, rgba(0,240,255,0.05));
  box-shadow: 0 0 26px rgba(255,61,168,0.22), inset 0 0 28px rgba(122,0,255,0.08); }
.campo.cuore .tag { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.68em; letter-spacing: 2px;
  text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--fucsia), var(--viola));
  border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; box-shadow: 0 0 14px rgba(255,61,168,0.45); }
.campo.cuore label { font-size: 1.2em; text-shadow: 0 0 14px rgba(255,61,168,0.45); }
.campo.cuore .aiuto { color: #d9c4e6; font-size: 0.9em; }
.campo.cuore textarea { min-height: 140px; border-color: rgba(255,61,168,0.55); }
.campo.cuore textarea:focus { border-color: var(--fucsia); box-shadow: 0 0 18px rgba(255,61,168,0.35); }

/* Messaggio di campo mancante: compare attaccato al campo, non in fondo al modulo. */
.manca-msg { display: none; margin: 10px 0 0; font-size: 0.95em; font-weight: 600; color: #fff; line-height: 1.45; }
.campo.manca .manca-msg { display: block; }
.campo.cuore.manca { border-color: #ff5a7a; box-shadow: 0 0 30px rgba(255,90,122,0.45); animation: scossa 0.35s ease-in-out; }
@keyframes scossa { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .campo.cuore.manca { animation: none; } }

/* Targhetta "facoltativo" accanto all'etichetta: spenta apposta, il contrario di quella del campo obbligatorio. */
.campo label .facoltativo { font-weight: 400; font-size: 0.72em; letter-spacing: 1px; text-transform: uppercase;
  color: #9a9aa8; border: 1px solid rgba(154,154,168,0.35); border-radius: 999px; padding: 2px 9px; margin-left: 6px;
  vertical-align: middle; white-space: nowrap; }

/* Il nome VIBEST nel sottotitolo: primo della fila e acceso, così chi arriva da Google comincia a leggerlo. */
.subtitle .marca { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 1px; color: #fff;
  text-shadow: 0 0 12px rgba(192,132,252,0.75), 0 0 24px rgba(122,0,255,0.45); }
.subtitle .marca:hover { text-decoration: none; text-shadow: 0 0 14px rgba(0,240,255,0.8); }

/* La domanda in più: compare sotto il risultato solo se l'editor ha qualcosa da chiedere. */
.in-piu { display: none; margin-top: 18px; padding: 18px 16px 16px; border-radius: 16px;
  border: 1.5px solid rgba(255,61,168,0.45);
  background: linear-gradient(135deg, rgba(255,61,168,0.08), rgba(122,0,255,0.10) 60%, rgba(0,240,255,0.04)); }
.in-piu.on { display: block; }
.in-piu .tag { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.68em; letter-spacing: 2px;
  text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--fucsia), var(--viola));
  border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }
.in-piu-domanda { color: #fff; font-size: 1.08em; font-weight: 600; line-height: 1.5; margin: 0 0 12px; }
.in-piu textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: #fff; min-height: 96px; resize: vertical;
  background: rgba(5,2,15,0.75); border: 1.5px solid rgba(255,61,168,0.45); border-radius: 12px; padding: 12px 14px; outline: none; }
.in-piu textarea:focus { border-color: var(--fucsia); box-shadow: 0 0 18px rgba(255,61,168,0.30); }
.btn-in-piu { margin-top: 12px; color: #fff; border-color: rgba(255,61,168,0.65); padding: 10px 18px; font-size: 0.95em; }
.btn-in-piu:hover { background: rgba(255,61,168,0.12); }
.btn-in-piu[disabled] { opacity: 0.55; cursor: progress; }
.in-piu-nota { font-size: 0.82em; color: #9a9aa8; margin: 10px 0 0; }

.etichetta .conta.troppo { color: #ff8080; }

.avviso .sostieni { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.92em; color: #d8d8e2; }
.avviso .sostieni a { font-weight: 700; }

/* Saldo del codice comprato: una riga sotto il bottone, solo per chi ha un codice. */
.crediti { display: none; text-align: center; font-size: 0.88em; color: #d8d8e2; margin-top: 10px; }
.crediti.on { display: block; }
.crediti strong { color: var(--ciano); letter-spacing: 1px; }

/* I tre pacchetti, dentro il messaggio di fine prove. */
.pacchetti { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.pacchetti-titolo { margin: 0 0 10px; color: #fff; font-weight: 600; font-size: 0.98em; }
.pacchetti-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pacchetto { cursor: pointer; font: inherit; color: #fff; text-align: center; padding: 12px 6px; border-radius: 12px;
  background: rgba(5,2,15,0.7); border: 1.5px solid rgba(0,240,255,0.45);
  display: flex; flex-direction: column; gap: 4px; align-items: center; transition: border-color 0.15s, box-shadow 0.15s; }
.pacchetto strong { font-size: 0.98em; }
.pacchetto span { font-family: 'Orbitron', sans-serif; font-size: 0.95em; color: var(--ciano); }
.pacchetto:hover { border-color: var(--ciano); box-shadow: 0 0 16px rgba(0,240,255,0.30); }
.pacchetto[disabled] { opacity: 0.6; cursor: progress; }
.pacchetti-nota { margin: 10px 0 0; font-size: 0.8em; color: #a9a9b8; line-height: 1.45; }
.codice-riga { display: flex; gap: 8px; margin-top: 12px; }
.codice-riga input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: #fff; background: rgba(5,2,15,0.75);
  border: 1.5px solid rgba(122,0,255,0.40); border-radius: 12px; padding: 10px 12px; outline: none; text-transform: uppercase; }
.codice-riga input::placeholder { text-transform: none; color: #6d6d7d; }
.codice-riga input:focus { border-color: var(--ciano); }

/* ============================================================
   Il pulsante "Scarica VIBEST": sempre visibile, è il punto d'arrivo di ogni pagina degli strumenti.
   La V tonda è /2.jpeg (già sul sito): il cerchio la ritaglia e la ingrandisce un filo, così gli
   angoli bianchi del jpeg restano fuori. Anello al neon che gira + alone che respira + riflesso
   che attraversa il pulsante. Con "riduci movimento" attivo resta tutto fermo.
   ============================================================ */
.scarica-vibest { position: relative; display: flex; align-items: center; gap: 18px; text-decoration: none;
  margin: 44px 0 0; padding: 20px 20px 20px 18px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 50%, rgba(122,0,255,0.34), rgba(10,5,35,0.92) 58%);
  border: 1.5px solid rgba(192,132,252,0.55);
  box-shadow: 0 0 34px rgba(122,0,255,0.45), 0 0 80px rgba(122,0,255,0.20), inset 0 0 40px rgba(122,0,255,0.14);
  animation: svRespira 3.6s ease-in-out infinite; transition: transform 0.18s, border-color 0.18s; }
.scarica-vibest:hover { text-decoration: none; transform: translateY(-3px) scale(1.01); border-color: #fff; }
.scarica-vibest:active { transform: scale(0.985); }
/* riflesso che passa */
.scarica-vibest::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.16) 50%, transparent 65%);
  transform: translateX(-120%); animation: svRiflesso 4.2s ease-in-out infinite; }

.sv-v { position: relative; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; }
/* anello al neon che gira attorno alla V */
.sv-v::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, var(--fucsia), var(--viola), var(--ciano), var(--viola), var(--fucsia));
  filter: blur(1.5px); animation: svGira 5s linear infinite; }
.sv-v::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(192,132,252,0.55), transparent 68%); }
.sv-v img { position: relative; z-index: 1; display: block; width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; transform: scale(1.0); clip-path: circle(47% at 50% 50%); background: #05020f; }

.sv-testo { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.sv-sopra { font-size: 0.88em; color: #d9c4e6; line-height: 1.3; }
.sv-nome { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 2.1em; line-height: 1.05; letter-spacing: 2px;
  color: #fff; text-shadow: 0 0 16px rgba(192,132,252,0.95), 0 0 36px rgba(122,0,255,0.75); margin: 2px 0 6px; }
.sv-sotto { font-size: 0.92em; color: #e4e4ee; line-height: 1.4; margin-bottom: 12px; }
.sv-vai { align-self: flex-start; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.82em;
  letter-spacing: 1.5px; text-transform: uppercase; color: #05020f; background: #fff; border-radius: 999px; padding: 9px 16px;
  box-shadow: 0 0 18px rgba(255,255,255,0.45); }
.scarica-vibest.sv-hub { margin-top: 36px; }

@keyframes svGira { to { transform: rotate(360deg); } }
@keyframes svRespira {
  0%, 100% { box-shadow: 0 0 34px rgba(122,0,255,0.45), 0 0 80px rgba(122,0,255,0.20), inset 0 0 40px rgba(122,0,255,0.14); }
  50%      { box-shadow: 0 0 46px rgba(192,132,252,0.70), 0 0 110px rgba(122,0,255,0.34), inset 0 0 48px rgba(122,0,255,0.22); } }
@keyframes svRiflesso { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .scarica-vibest, .scarica-vibest::after, .sv-v::before { animation: none; } }
@media (max-width: 420px) {
  .scarica-vibest { gap: 14px; padding: 18px 16px; }
  .sv-v, .sv-v img { width: 68px; height: 68px; flex-basis: 68px; }
  .sv-nome { font-size: 1.75em; } }

/* Il codice comprato: un bottone tutto suo, si copia con un tocco. */
.chip-codice { cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 8px;
  padding: 8px 14px; border-radius: 12px; color: #fff; background: rgba(5,2,15,0.8); border: 1.5px dashed rgba(0,240,255,0.65); }
.chip-codice strong { display: inline; font-family: 'Orbitron', sans-serif; letter-spacing: 1.5px; color: var(--ciano); margin: 0; }
.chip-codice span { font-size: 0.78em; color: #a9a9b8; text-transform: uppercase; letter-spacing: 1px; }
.chip-codice.fatto { border-color: rgba(43,255,154,0.75); }
.chip-codice.fatto span { color: #2BFF9A; }
.avviso .chip-codice { display: flex; width: fit-content; }
.crediti .chip-codice { margin: 6px 0 0; padding: 5px 12px; }

/* La V riempie il cerchio: /2.jpeg ha un bordo largo, qui si ingrandisce e si ritaglia dal centro. */
.sv-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #05020f url(/2.jpeg) center / 150% no-repeat; }

/* ==================== Pulsante VIBEST, seconda versione (19/09 sera) ====================
   Danny: "sfondo bianco e scritte tutte a sinistra, bruttissimo". Ora è tutto in colonna e centrato:
   V tonda in alto, nome, frase, e il pulsante col gradiente del sito al posto della pillola bianca. */
.scarica-vibest { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 30px 22px 28px;
  background: radial-gradient(110% 90% at 50% 0%, rgba(122,0,255,0.36), rgba(10,5,35,0.94) 62%); }
.sv-v { flex: 0 0 auto; width: 104px; height: 104px; }
.sv-testo { align-items: center; text-align: center; width: 100%; }
.sv-sopra { font-size: 0.92em; }
.sv-nome { font-size: 2.5em; letter-spacing: 3px; margin: 4px 0 8px; }
.sv-sotto { max-width: 420px; margin: 0 auto 18px; font-size: 0.96em; }
.sv-vai { align-self: center; display: block; width: 100%; max-width: 360px; text-align: center; color: #fff;
  font-size: 0.92em; letter-spacing: 2px; padding: 15px 20px; border-radius: 14px;
  background: linear-gradient(135deg, var(--fucsia), var(--viola) 55%, #3b6bff);
  box-shadow: 0 0 22px rgba(255,61,168,0.45), 0 0 44px rgba(122,0,255,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
@media (max-width: 420px) {
  .scarica-vibest { padding: 26px 16px 24px; gap: 14px; }
  .sv-v, .sv-v img { width: 92px; height: 92px; flex-basis: auto; }
  .sv-nome { font-size: 2.1em; } }