/* =====================================================================
   ISOLA DEL RESPIRO · Tema sensoriale protetto
   Regole: niente bianco ottico (#FFF), niente nero puro (#000),
   testo ≥ 7:1 sul fondo, movimento solo su azione dell'utente.
   ===================================================================== */

:root {
  /* Colori di base in canali RGB: usati da Tailwind (js/tailwind-config.js) */
  --crema-rgb: 247 242 231;    /* #F7F2E7 sfondo */
  --carta-rgb: 251 248 241;    /* #FBF8F1 superfici */
  --ardesia-rgb: 63 68 72;     /* #3F4448 testo */
  --nebbia-rgb: 107 112 117;   /* #6B7075 testo secondario */

  --crema: rgb(var(--crema-rgb));
  --carta: rgb(var(--carta-rgb));
  --ardesia: rgb(var(--ardesia-rgb));
  --nebbia: rgb(var(--nebbia-rgb));
  --bordo: rgb(var(--ardesia-rgb) / .14);
  --bordo-forte: rgb(var(--ardesia-rgb) / .28);

  --salvia-deep: #4F6E4B;
  --cielo-light: #DDEBF2;
  --cielo-deep: #3F6378;
  --miele-light: #F4EAD0;
  --miele-deep: #7A5E22;
  --focus: #3F6378;
  --esagoni: #C9BFA6;
}

/* ---------- Modalità Comfort (classi impostate da js/store.js) ---------- */
html.testo-grande { font-size: 118.75%; }               /* 19px: tutto è in rem, quindi scala */

html.contrasto-alto {
  --ardesia-rgb: 38 42 46;
  --nebbia-rgb: 64 69 74;
  --bordo: rgb(var(--ardesia-rgb) / .38);
  --bordo-forte: rgb(var(--ardesia-rgb) / .6);
  --salvia-deep: #3B5638;
  --esagoni: #B3A88C;
}

/* Caratteri ospitati sul nostro server (nessuna richiesta a Google o ad altri CDN) */
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/opendyslexic.woff') format('woff'); font-display: swap; }
html.font-dislessia body,
html.font-dislessia button,
html.font-dislessia input {
  font-family: 'OpenDyslexic', Arial, Helvetica, sans-serif;
  letter-spacing: .02em; word-spacing: .12em;
}

html.movimento-ridotto *,
html.movimento-ridotto *::before,
html.movimento-ridotto *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
/* L'attributo hidden vince sempre, anche su classi come .grid o .flex */
[hidden] { display: none !important; }

html { scroll-padding-top: 6rem; }
body {
  background-color: var(--crema);
  color: var(--ardesia);
  line-height: 1.6;
  /* Esagoni morbidi, appena percettibili: texture, non rumore visivo */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23C9BFA6' stroke-opacity='0.28' stroke-width='1.2'/%3E%3Cpath d='M28 0L28 -34M0 50L-28 66M56 50L84 66' fill='none' stroke='%23C9BFA6' stroke-opacity='0.28' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 56px 98px;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 60;
  background: var(--carta); color: var(--ardesia);
  padding: .75rem 1rem; border-radius: 12px; border: 2px solid var(--bordo-forte);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Pulsanti: bersagli di almeno 48px ---------- */
.btn-primary, .btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem;
  border-radius: 999px; font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--salvia-deep); color: var(--carta); border: 2px solid var(--salvia-deep); }
.btn-primary:hover { filter: brightness(.92); }
.btn-quiet { background: transparent; color: var(--ardesia); border: 2px solid var(--bordo-forte); }
.btn-quiet:hover { background: rgb(var(--ardesia-rgb) / .06); }
.btn-quiet[aria-pressed="true"] { background: var(--ardesia); color: var(--carta); border-color: var(--ardesia); }

/* ---------- Navbar ---------- */
.sito-header { background: rgb(var(--crema-rgb) / .96); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 30; }
.nav-link {
  white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 .9rem;
  border-radius: 999px; font-weight: 700; color: var(--ardesia); text-decoration: none;
}
.nav-link:hover { background: rgb(var(--ardesia-rgb) / .06); }
/* Pagina corrente: sottolineatura spessa, non solo colore */
.nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--salvia-deep); }

.menu-mobile { display: none; }
.menu-mobile.aperto { display: block; }
.menu-mobile .nav-link { display: flex; width: 100%; border-radius: 14px; }

/* Visibilità responsive della navbar: definita qui (e non con le classi Tailwind
   "hidden"), perché .btn-* imposta già il proprio display */
.nav-desktop { display: none; }
/* Etichetta "Comfort": visibile su tablet e schermi molto larghi; tra 1024 e 1279 px
   resta solo l'icona, per lasciare spazio alle voci di menu */
.comfort-etichetta { display: none; }
/* "Comfort" resta solo icona (con etichetta per i lettori di schermo e tooltip), per lasciare spazio al menu */
.comfort-etichetta { display: none !important; }
/* Tra 1024 e 1279 px, da adulto collegato, "Chi gioca?" si raggiunge dall'Area privata */
@media (min-width: 1024px) and (max-width: 1279px) { #btn-chi-gioca { display: none; } }
@media (min-width: 1024px) { .nav-desktop .nav-link { padding: 0 .55rem; } .sito-header .gap-3 { gap: .5rem; } #azioni-header .btn-quiet, #azioni-header .btn-primary { padding: 0 1rem; } }
@media (min-width: 1024px) and (max-width: 1279px) { .logo-testo > span:first-child { font-size: 1.05rem; } }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  #btn-menu, .menu-mobile, .menu-mobile.aperto { display: none; }
}
@media (max-width: 767px) { #btn-accedi { display: none; } }
@media (max-width: 639px) { #btn-abbonati { display: none; } }

@media (max-width: 480px) {
  .sito-header .btn-primary, .sito-header .btn-quiet { padding: 0 .8rem; font-size: 1rem; }
}

/* ---------- Filtri ---------- */
.filtro {
  min-height: 52px; padding: 0 1.4rem;
  display: inline-flex; align-items: center; gap: .6rem;
  border-radius: 999px; font-weight: 700; font-size: 1.1rem;
  background: var(--carta); color: var(--ardesia);
  border: 2px solid var(--bordo); cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--ardesia); color: var(--carta); border-color: var(--ardesia); }
.filtro .pallino { width: 14px; height: 14px; border-radius: 50%; }

/* ---------- Le tre scelte: CALMA · MEMORIA · ATTENZIONE ----------
   Le parole sono la cosa più grande della sezione. Il maiuscolo è solo visivo
   (text-transform), così i lettori di schermo leggono la parola normalmente. */
.umori { display: grid; gap: 1rem; }
@media (min-width: 768px) { .umori { grid-template-columns: repeat(2, 1fr); } }

.umore {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.25rem; min-height: 112px; text-align: left; width: 100%;
  background: var(--umore-chiaro); color: var(--ardesia);
  border: 3px solid transparent; border-radius: 24px;
  cursor: pointer; font: inherit;
}
@media (min-width: 768px) {
  .umore { padding: 1.5rem; min-height: 150px; }
}
@media (hover: hover) { .umore:hover { border-color: rgb(var(--ardesia-rgb) / .25); } } /* niente hover "appiccicoso" sui touch */
.umore[aria-pressed="true"] { border: 5px solid var(--umore-scuro); padding: calc(1.25rem - 2px); }
@media (min-width: 768px) { .umore[aria-pressed="true"] { padding: calc(1.5rem - 2px); } }

.umore-icona svg { width: 56px; height: 56px; display: block; }
@media (min-width: 768px) { .umore-icona svg { width: 64px; height: 64px; } }
.umore-testi { display: flex; flex-direction: column; gap: .25rem; }
.umore-parola {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .06em; color: var(--umore-scuro);
}
.umore-frase { font-size: 1.1rem; line-height: 1.45; color: var(--ardesia); }

.umore-spunta { position: absolute; top: .9rem; right: .9rem; width: 28px; height: 28px; color: var(--umore-scuro); display: none; }
.umore[aria-pressed="true"] .umore-spunta { display: block; }

.filtro-tutti {
  margin-top: 1rem; min-height: 48px; padding: 0 1.25rem; border-radius: 999px;
  background: transparent; color: var(--ardesia); font: inherit; font-weight: 700;
  border: 2px solid var(--bordo-forte); cursor: pointer;
}
.filtro-tutti[aria-pressed="true"] { background: var(--ardesia); color: var(--carta); border-color: var(--ardesia); }

/* ---------- Schede gioco: bordo pieno, nessuna ombra sfumata ---------- */
.card-gioco {
  position: relative; height: 100%; width: 100%;
  display: flex; flex-direction: column; text-align: left;
  background: var(--carta); border: 2px solid var(--bordo);
  border-radius: 22px; overflow: hidden;
  cursor: pointer; color: inherit; font: inherit;
}
@media (hover: hover) { .card-gioco:hover { border-color: var(--bordo-forte); } }
.card-illustrazione { height: 168px; display: grid; place-items: center; }
.card-illustrazione svg { width: 104px; height: 104px; }

/* Tag: sempre con la parola scritta, mai solo colore. Contrasto ≥ 4.5:1 */
.tag {
  display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 999px;
  font-size: .9rem; font-weight: 700; line-height: 1.4; border: 1.5px solid currentColor;
}
.tag-mindfulness { background: #DCE8D6; color: #3E5A3B; }
.tag-adhd        { background: #DDEBF2; color: #345468; }
.tag-audio       { background: #E6E0F2; color: #4F4478; }
.tag-gratis      { background: #E9EFE0; color: #44602F; }
.tag-premium     { background: var(--miele-light); color: var(--miele-deep); }

.overlay-premium {
  position: absolute; inset: 0 0 auto 0; height: 168px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(244, 234, 208, .84); color: var(--miele-deep); font-weight: 700; font-size: 1.1rem;
}
.overlay-premium svg { width: 44px; height: 44px; }

/* ---------- Hero della home: l'isola che respira ----------
   L'unico movimento del sito parte SOLO quando l'utente preme "Respira con me". */
.isola-hero { width: min(100%, 360px); aspect-ratio: 1; }
.isola-hero .alone {
  transform-origin: 160px 160px; transform: scale(.86);
  transition: transform 4s ease-in-out, opacity 4s ease-in-out; opacity: .5;
}
.isola-hero.inspira .alone { transform: scale(1); opacity: .95; }
.isola-hero.espira  .alone { transform: scale(.86); opacity: .5; transition-duration: 6s; }
html.movimento-ridotto .isola-hero .alone { transform: scale(.93) !important; }

/* ---------- Pagine di testo ---------- */
.pagina-hero { padding: 3rem 0 2rem; max-width: 44rem; }
.pagina-hero h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 700; line-height: 1.15; }
.pagina-hero p { margin-top: 1rem; font-size: 1.2rem; color: var(--nebbia); line-height: 1.65; }

.prosa { max-width: 40rem; font-size: 1.1rem; }
.prosa h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 3rem 0 1rem; }
.prosa h3 { font-size: 1.2rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.prosa p { margin: 0 0 1rem; line-height: 1.75; }
.prosa ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.prosa li { margin: .4rem 0; line-height: 1.65; }
.prosa a { color: var(--cielo-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.prosa strong { font-weight: 700; }

/* ---------- Chi siamo ---------- */
.persone { display: grid; gap: 1.5rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .persone { grid-template-columns: 1fr 1fr; } }
.persona {
  background: var(--carta); border: 2px solid var(--bordo); border-radius: 28px;
  padding: 2rem; display: grid; gap: 1.25rem; align-content: start;
}
.persona-iniziali, .persona-foto {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  background: var(--persona-chiaro); color: var(--persona-scuro);
  border: 4px solid var(--persona-scuro);
  font-size: 2.6rem; font-weight: 700; letter-spacing: .04em;
}
.persona-nome { font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
.persona-ruolo { margin-top: .35rem; font-size: 1.1rem; font-weight: 700; color: var(--nebbia); }
.persona-bio p { margin: 0 0 1rem; font-size: 1.1rem; line-height: 1.75; }
.persona-bio p:last-child { margin-bottom: 0; }
.segnaposto { border: 2px dashed var(--bordo-forte); border-radius: 16px; padding: 1rem 1.25rem; color: var(--nebbia); }

/* Riquadro di nota (es. "Cosa non è") */
.nota {
  background: var(--carta); border: 2px solid var(--bordo); border-left: 8px solid var(--cielo-deep);
  border-radius: 18px; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.nota p:last-child { margin-bottom: 0; }

/* Principi di progettazione: elenco descrittivo a due colonne su schermi larghi */
.principi { display: grid; gap: 1rem; margin: 1.5rem 0 0; }
@media (min-width: 720px) { .principi { grid-template-columns: 1fr 1fr; } }
.principi > div { background: var(--carta); border: 2px solid var(--bordo); border-radius: 18px; padding: 1.25rem 1.4rem; }
.principi dt { font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: .6rem; }
.principi dt svg { width: 28px; height: 28px; flex: none; }
.principi dd { margin: .4rem 0 0; color: var(--nebbia); line-height: 1.65; }

/* Passi: è davvero una sequenza, quindi numerata */
.passi { counter-reset: passo; display: grid; gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.passi li { counter-increment: passo; position: relative; padding: 1.1rem 1.25rem 1.1rem 4.25rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 18px; }
.passi li::before {
  content: counter(passo); position: absolute; left: 1.1rem; top: 1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--cielo-light); color: var(--cielo-deep); font-weight: 700; border: 2px solid var(--cielo-deep);
}

/* Domande frequenti con <details>: si aprono solo se l'utente lo chiede */
.faq details { background: var(--carta); border: 2px solid var(--bordo); border-radius: 16px; margin: .75rem 0; }
.faq summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; min-height: 48px; list-style-position: inside; }
.faq details[open] summary { border-bottom: 1px solid var(--bordo); }
.faq details > div { padding: 1rem 1.25rem; line-height: 1.7; }

/* ---------- Abbonamento ---------- */
.piano { background: var(--carta); border: 2px solid var(--bordo); border-radius: 24px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.piano.consigliato { border: 3px solid var(--salvia-deep); }
.piano .prezzo { font-size: 2.25rem; font-weight: 700; line-height: 1; }
.piano ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.piano li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.5; }
.piano li svg { flex: none; width: 22px; height: 22px; margin-top: .1rem; }

/* ---------- Modali (<dialog> nativo) ---------- */
dialog { color: var(--ardesia); }
dialog::backdrop { background: rgb(var(--ardesia-rgb) / .55); }
.modale-full {
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: var(--crema);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modale-box { border: 0; border-radius: 28px; padding: 0; background: var(--carta); width: min(92vw, 30rem); max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }

/* Pannello Comfort */
.comfort fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.comfort legend { font-weight: 700; margin-bottom: .5rem; }
.scelte { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.scelte label {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .5rem;
  border: 2px solid var(--bordo-forte); border-radius: 14px; cursor: pointer; font-weight: 700; text-align: center;
}
.scelte input { position: absolute; opacity: 0; pointer-events: none; }
.scelte input:checked + label { background: var(--ardesia); color: var(--carta); border-color: var(--ardesia); }
.scelte input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Unica transizione automatica: risponde all'apertura, solo opacità */
dialog[open] { animation: comparsa .22s ease-out; }
@keyframes comparsa { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Footer ---------- */
.sito-footer { border-top: 1px solid var(--bordo); background: rgb(var(--carta-rgb) / .7); }
.sito-footer a { color: var(--ardesia); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   AREA INTERNA · accesso, registrazione, area privata
   ===================================================================== */
:root { --rosa-deep: #8A4F4A; --rosa-light: #F1E1DC; }

/* Intestazione: visibilità dei pulsanti account sugli schermi stretti */
@media (max-width: 767px) { #btn-chi-gioca { display: none; } }
@media (max-width: 639px) { #btn-area { display: none; } }

.chip-bimbo {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1rem 0 .3rem;
  border-radius: 999px; border: 2px solid var(--bordo-forte); background: var(--carta);
  font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ardesia); cursor: pointer;
}

/* "Chi gioca?" e scelte grandi a tutta larghezza */
.scelta-profilo, .scelta-umore {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 72px; padding: .6rem 1rem;
  background: var(--carta); border: 2px solid var(--bordo-forte); border-radius: 18px;
  font: inherit; color: var(--ardesia); cursor: pointer; text-align: left;
}
.scelta-profilo[aria-current="true"] { border: 4px solid var(--salvia-deep); padding: calc(.6rem - 2px) calc(1rem - 2px); }
.scelta-umore { font-size: 1.2rem; font-weight: 700; }
.scelta-umore svg { width: 48px; height: 48px; flex: none; }
@media (hover: hover) { .scelta-profilo:hover, .scelta-umore:hover { border-color: var(--ardesia); } }

.promemoria {
  margin: 0 auto; padding: .5rem 1rem; border-radius: 999px;
  background: var(--miele-light); color: var(--miele-deep); font-weight: 700; border: 2px solid var(--miele-deep);
}

/* ---------- Moduli ---------- */
.campo { display: grid; gap: .4rem; font-weight: 700; }
.campo-aiuto { font-weight: 400; color: var(--nebbia); font-size: .98rem; line-height: 1.5; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo select, .input {
  width: 100%; min-height: 52px; padding: .6rem .9rem; border-radius: 14px;
  border: 2px solid var(--bordo-forte); background: var(--carta); color: var(--ardesia);
  font: inherit; font-weight: 400; font-size: 1.1rem;
}
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--rosa-deep); border-width: 3px; }
.spunta input[aria-invalid="true"] { outline: 3px solid var(--rosa-deep); outline-offset: 2px; }
.password-riga { display: flex; gap: .5rem; }
.password-riga input { flex: 1; }
.password-riga button { flex: none; }

/* Errori: chiari ma non allarmanti. Sempre con la parola "Attenzione", mai solo colore. */
.errore { color: var(--rosa-deep); font-weight: 700; min-height: 0; line-height: 1.45; }
.errore:empty { display: none; }
.riepilogo-errori {
  border: 2px solid var(--rosa-deep); border-left-width: 8px; background: var(--rosa-light);
  border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.riepilogo-errori a { color: var(--rosa-deep); font-weight: 700; text-decoration: underline; }
.esito {
  border: 2px solid var(--salvia-deep); border-left-width: 8px; background: #E9EFE0;
  border-radius: 16px; padding: .9rem 1.2rem; font-weight: 700;
}
.esito:empty { display: none; }

.spunta { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; line-height: 1.55; cursor: pointer; }
.spunta input { width: 26px; height: 26px; flex: none; margin-top: .1rem; accent-color: var(--salvia-deep); }
.spunta a { color: var(--cielo-deep); font-weight: 700; text-decoration: underline; }

.requisito { display: flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--nebbia); }
.requisito::before { content: "○"; font-weight: 700; }
.requisito.ok { color: var(--salvia-deep); font-weight: 700; }
.requisito.ok::before { content: "✓"; }

/* Schede di accesso */
.scheda-accesso {
  width: min(100%, 32rem); margin: 2.5rem auto 0; background: var(--carta);
  border: 2px solid var(--bordo); border-radius: 28px; padding: 2rem;
}
@media (min-width: 640px) { .scheda-accesso { padding: 2.5rem; } }
.separatore { display: flex; align-items: center; gap: 1rem; color: var(--nebbia); margin: 1.5rem 0; }
.separatore::before, .separatore::after { content: ""; flex: 1; border-top: 1px solid var(--bordo-forte); }
.link-semplice { color: var(--cielo-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font: inherit; cursor: pointer; padding: .5rem 0; min-height: 44px; }

/* ---------- Registrazione a passi ---------- */
.passi-wizard { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; }
.passi-wizard li { flex: 1; display: grid; gap: .4rem; font-size: .95rem; color: var(--nebbia); font-weight: 700; }
.passi-wizard li::before { content: ""; height: 8px; border-radius: 999px; background: rgb(var(--ardesia-rgb) / .12); }
.passi-wizard li.fatto::before { background: var(--salvia); }
.passi-wizard li[aria-current="step"] { color: var(--ardesia); }
.passi-wizard li[aria-current="step"]::before { background: var(--salvia-deep); }

/* Schede-scelta (radio grandi) */
.schede-scelta { display: grid; gap: .75rem; }
.schede-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.schede-scelta label {
  display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; min-height: 72px; cursor: pointer;
  border: 2px solid var(--bordo-forte); border-radius: 18px; background: var(--carta); font-weight: 400;
}
.schede-scelta label strong { display: block; font-size: 1.15rem; }
.schede-scelta label span.campo-aiuto { display: block; }
.schede-scelta input:checked + label { border: 4px solid var(--salvia-deep); padding: calc(1rem - 2px) calc(1.1rem - 2px); background: #EEF3EA; }
.schede-scelta input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Scelta avatar */
.avatar-scelte { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.avatar-scelte input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-scelte label {
  display: grid; justify-items: center; gap: .25rem; padding: .5rem .25rem; border-radius: 16px; cursor: pointer;
  border: 2px solid transparent; font-weight: 400; font-size: .95rem;
}
.avatar-scelte input:checked + label { border: 3px solid var(--salvia-deep); background: #EEF3EA; font-weight: 700; }
.avatar-scelte input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

.etichette-eta { grid-template-columns: repeat(3, 1fr); }

/* ---------- Area privata ---------- */
.area-layout { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .area-layout { grid-template-columns: 15rem 1fr; align-items: start; } }

.area-nav { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
@media (min-width: 900px) { .area-nav { flex-direction: column; position: sticky; top: 6rem; overflow: visible; } }
.area-nav button {
  flex: none; display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1rem;
  border-radius: 14px; border: 2px solid transparent; background: transparent;
  font: inherit; font-weight: 700; color: var(--ardesia); cursor: pointer; text-align: left; white-space: nowrap;
}
.area-nav button svg { width: 22px; height: 22px; flex: none; }
.area-nav button[aria-current="page"] { background: var(--carta); border-color: var(--ardesia); }
@media (hover: hover) { .area-nav button:hover { background: rgb(var(--ardesia-rgb) / .06); } }

.area-sezione h2.titolo-sezione { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.area-sezione .sottotitolo { margin-top: .4rem; color: var(--nebbia); font-size: 1.1rem; line-height: 1.6; max-width: 42rem; }

.riquadro { background: var(--carta); border: 2px solid var(--bordo); border-radius: 22px; padding: 1.5rem; }
.riquadro h3 { font-size: 1.25rem; font-weight: 700; }

.griglia-profili { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card-profilo { display: grid; gap: .9rem; justify-items: start; }
.card-profilo .nome { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.card-aggiungi {
  display: grid; place-items: center; align-content: center; gap: .5rem; min-height: 15rem; text-align: center;
  border: 3px dashed var(--bordo-forte); border-radius: 22px; background: transparent;
  font: inherit; font-weight: 700; font-size: 1.15rem; color: var(--ardesia); cursor: pointer;
}
@media (hover: hover) { .card-aggiungi:hover { background: rgb(var(--carta-rgb) / .8); } }

.etichetta-tenue { display: inline-flex; padding: .15rem .65rem; border-radius: 999px; background: rgb(var(--ardesia-rgb) / .07); font-size: .95rem; font-weight: 700; }

/* Diario */
.diario-giorno { margin-top: 1.5rem; }
.diario-giorno h3 { font-size: 1.1rem; font-weight: 700; color: var(--nebbia); margin-bottom: .6rem; }
.diario-voce { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .9rem 1.1rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 16px; margin-bottom: .5rem; }
.diario-voce .chi { display: flex; align-items: center; gap: .5rem; font-weight: 700; min-width: 7rem; }
.diario-voce .cosa { flex: 1; min-width: 10rem; }
.diario-voce .quanto { color: var(--nebbia); }

.tabella { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.tabella th, .tabella td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--bordo); }
.tabella th { color: var(--nebbia); font-weight: 700; }

.btn-pericolo {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.25rem;
  border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--rosa-deep); border: 2px solid var(--rosa-deep);
}
.btn-pericolo.pieno { background: var(--rosa-deep); color: var(--carta); }
.btn-primary:disabled, .btn-pericolo:disabled { opacity: .45; cursor: not-allowed; }

/* =====================================================================
   AMPLIAMENTO (documento di Cinzia): Scatola, giardino, giochi in arrivo, dashboard
   ===================================================================== */
.tag-caa { background: #EFE6D8; color: #5A4830; }

/* Giochi in arrivo: visibili ma chiaramente non ancora pronti */
.card-arrivo { cursor: default; background: rgb(var(--carta-rgb) / .6); border-style: dashed; }
.card-arrivo .card-illustrazione { opacity: .55; }
.nastro-arrivo {
  position: absolute; top: 1rem; left: 1rem; padding: .3rem .8rem; border-radius: 999px;
  background: var(--carta); border: 2px solid var(--bordo-forte); font-weight: 700; font-size: .95rem;
}
.card-strumento { border-width: 3px; border-color: #A8C3A0; }

/* Scatola degli Strumenti */
.strumento {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 84px; padding: .75rem 1rem; text-align: left;
  background: var(--carta); border: 2px solid var(--bordo-forte); border-radius: 18px; font: inherit; color: var(--ardesia); cursor: pointer; font-size: 1.15rem;
}
.strumento svg { width: 56px; height: 56px; flex: none; }
.strumento[aria-pressed="true"] { border: 4px solid var(--salvia-deep); background: #EEF3EA; padding: calc(.75rem - 2px) calc(1rem - 2px); }
@media (hover: hover) { .strumento:hover { border-color: var(--ardesia); } }
.respiro-cerchio {
  width: 160px; height: 160px; margin: 1.5rem auto 1rem; border-radius: 50%;
  background: #DCE8D6; border: 4px solid var(--salvia-deep); transform: scale(.65); transition: transform 6s ease-in-out;
}
.respiro-cerchio.dentro { transform: scale(1); transition-duration: 4s; }
html.movimento-ridotto .respiro-cerchio { transform: scale(.85) !important; opacity: .7; }
html.movimento-ridotto .respiro-cerchio.dentro { opacity: 1; }
.mantello { background: #F2EEF7; border-radius: 28px; }

/* Giardino */
.giardino-home { width: min(100%, 420px); margin: 0; }
.giardino-svg { width: 100%; height: auto; display: block; }
.giardino-mini { width: 100%; max-width: 260px; }

/* Dashboard professionale */
.pannello-pro { border: 2px solid var(--cielo-deep); border-radius: 20px; padding: 1.25rem; background: #F3F7F9; }
.pannello-pro legend, .pannello-pro h3 { color: var(--cielo-deep); }

/* ---------- Nome e sottotitolo ---------- */
.logo-sottotitolo { display: block; font-size: .85rem; font-weight: 400; color: var(--nebbia); line-height: 1.25; }
/* Nell'intestazione c'è posto solo per il nome: il sottotitolo vive nella home e nel piè di pagina */
.logo-sottotitolo { display: none !important; }
@media (max-width: 480px) { .logo-sottotitolo { display: none; } }
.tagline { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; color: var(--salvia-deep); line-height: 1.35; }
@media (max-width: 420px) {
  .logo-testo > span:first-child { font-size: 1rem; }
  .sito-header .gap-3 { gap: .5rem; }
  .sito-header .btn-quiet { padding: 0 .7rem; }
}
/* Telefono con un bambino che gioca: al posto del nome dell'isola c'è il suo nome (nel chip) */
@media (max-width: 480px) { .sito-header.con-bimbo .logo-testo { display: none; } }

/* =====================================================================
   LA RETE E LE TESTIMONIANZE
   ===================================================================== */
.griglia-partner { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); list-style: none; padding: 0; }
.partner { display: flex; gap: 1rem; align-items: flex-start; background: var(--carta); border: 2px solid var(--bordo); border-radius: 22px; padding: 1.25rem; }
.partner-nome { font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.partner-nome a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.partner-sigla { flex: none; display: grid; place-items: center; border-radius: 50%; border: 3px solid; font-weight: 700; font-size: 1.2rem; letter-spacing: .04em; }
.partner-logo { flex: none; border-radius: 14px; object-fit: contain; background: var(--carta); }
.etichetta-esempio { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; border: 2px dashed var(--bordo-forte); font-size: .8rem; font-weight: 700; color: var(--nebbia); vertical-align: middle; }

.striscia-partner { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; list-style: none; padding: 0; }
.striscia-partner li { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--nebbia); max-width: 15rem; line-height: 1.3; }

.griglia-testimonianze { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); list-style: none; padding: 0; }
.testimonianza { margin: 0; height: 100%; display: flex; flex-direction: column; gap: .9rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 22px; padding: 1.5rem; }
.testimonianza .virgolette { width: 40px; height: 32px; }
.testimonianza blockquote { margin: 0; font-size: 1.15rem; line-height: 1.65; }
.testimonianza figcaption { margin-top: auto; color: var(--nebbia); }
.testimonianza figcaption strong { color: var(--ardesia); }
textarea.input { min-height: 7rem; resize: vertical; line-height: 1.6; }
.campo textarea[aria-invalid="true"] { border-color: var(--rosa-deep); border-width: 3px; }

/* ---------- Lavagna: quaderno dei disegni ---------- */
.tag-account { background: #EFE6D8; color: #5A4830; border-style: dashed; }
.galleria-disegni { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); list-style: none; padding: 0; }
.disegno { margin: 0; background: var(--carta); border: 2px solid var(--bordo); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.disegno-apri { display: block; padding: 0; border: 0; background: #3B4C43; cursor: zoom-in; }
.disegno-apri img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.disegno figcaption { padding: .9rem 1rem 1rem; display: grid; gap: .3rem; }

/* Barra in alto nei giochi: su telefono "Scatola" resta solo icona ed "Esci dal gioco" diventa "Esci" */
.barra-gioco > div { flex: none; }
.etichetta-esci-corta { display: none; }
@media (max-width: 480px) {
  .etichetta-scatola, .etichetta-esci-lunga { display: none; }
  .etichetta-esci-corta { display: inline; }
  .barra-gioco .btn-quiet { padding: 0 .8rem; }
}

/* =====================================================================
   GUIDA PUBBLICA
   ===================================================================== */
.guida { display: grid; gap: 2rem; padding-top: 2.5rem; }
@media (min-width: 960px) { .guida { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } .guida-laterale { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; } }
.guida-menu { background: var(--carta); border: 2px solid var(--bordo); border-radius: 18px; }
.guida-menu summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; min-height: 48px; }
.guida-menu nav { padding: 0 1rem 1rem; }
.guida-menu ul { list-style: none; padding: 0; margin: 0 0 .5rem; }
.guida-menu a { display: block; padding: .4rem .6rem; border-radius: 10px; color: var(--ardesia); text-decoration: none; line-height: 1.35; border-left: 4px solid transparent; }
@media (hover: hover) { .guida-menu a:hover { background: rgb(var(--ardesia-rgb) / .06); } }
.guida-menu a[aria-current="page"] { font-weight: 700; border-left-color: var(--salvia-deep); background: #EEF3EA; }
.guida-voce-home { margin-bottom: .4rem; font-weight: 700; }
.guida-sezione { margin: .9rem 0 .3rem .6rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nebbia); }
.guida-cerca { display: grid; gap: .4rem; max-width: 36rem; }
.guida-cerca input { min-height: 56px; font-size: 1.15rem; }
.guida-schede { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); list-style: none; padding: 0; }
.guida-scheda { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1.1rem 1.2rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 18px; color: var(--ardesia); text-decoration: none; line-height: 1.45; }
@media (hover: hover) { .guida-scheda:hover { border-color: var(--bordo-forte); } }
.guida-icona { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--crema); }
.guida-icona svg { width: 44px; height: 44px; }
.guida-esiti { list-style: none; padding: 0; display: grid; gap: .75rem; margin-top: 1rem; }
.guida-esiti a { display: block; padding: 1rem 1.2rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 16px; color: var(--ardesia); text-decoration: none; line-height: 1.5; }
.guida-esiti mark { background: var(--miele-light); color: inherit; border-radius: 4px; padding: 0 .15rem; }
.guida-briciole { font-size: .95rem; color: var(--nebbia); }
.guida-briciole a { color: var(--cielo-deep); font-weight: 700; }
.guida-titolo { margin-top: .5rem; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.15; }
.guida-in-pagina { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 16px; max-width: 44rem; }
.guida-in-pagina ul { margin: .4rem 0 0; padding-left: 1.2rem; list-style: disc; display: grid; gap: .2rem; }
.guida-in-pagina a { color: var(--cielo-deep); text-decoration: underline; text-underline-offset: 3px; }
.guida-testo { max-width: 44rem; margin-top: 1rem; }
.guida-testo h2 { scroll-margin-top: 6rem; }
.prosa ol { margin: 0 0 1.25rem; padding-left: 1.4rem; list-style: decimal; }
.prosa ol li { margin: .4rem 0; line-height: 1.65; }
.tabella-scorrevole { overflow-x: auto; margin: 0 0 1.25rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 14px; padding: .25rem .75rem; }
.guida-precsucc { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; max-width: 44rem; }
.guida-precsucc a { display: grid; gap: .2rem; padding: 1rem 1.2rem; border: 2px solid var(--bordo); border-radius: 16px; background: var(--carta); color: var(--ardesia); text-decoration: none; }
.guida-precsucc a.succ { text-align: right; }
@media (max-width: 560px) { .guida-precsucc { grid-template-columns: 1fr; } .guida-precsucc a.succ { text-align: left; } }
@media print { .sito-header, .sito-footer, .guida-laterale, .guida-precsucc { display: none !important; } .guida { display: block; } }

/* =====================================================================
   AREA AMMINISTRATIVA
   ===================================================================== */
.admin-barra { background: var(--carta); border-bottom: 2px solid var(--bordo); position: sticky; top: 0; z-index: 20; }
.admin-schede { display: flex; gap: .25rem; overflow-x: auto; }
.admin-schede a { padding: .7rem 1rem; font-weight: 700; color: var(--ardesia); text-decoration: none; border-bottom: 4px solid transparent; white-space: nowrap; }
.admin-schede a[aria-current="page"] { border-bottom-color: var(--salvia-deep); }
.admin-kpi-griglia { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.admin-kpi { background: var(--carta); border: 2px solid var(--bordo); border-radius: 18px; padding: 1rem 1.2rem; }
.admin-kpi.allerta { border-color: var(--miele-deep); background: var(--miele-light); }
.admin-numero { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin: .2rem 0; }
.admin-grafico { width: 100%; height: auto; }
.admin-leg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.admin-filtri { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin-top: 1.25rem; align-items: end; }
.admin-mini { min-height: 40px !important; padding: 0 .6rem !important; font-size: .95rem !important; border-radius: 10px; border: 2px solid var(--bordo-forte); background: var(--carta); }
.admin-eventi td, .admin-eventi th { vertical-align: top; }
.admin-livello { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1.5px solid currentColor; }
.admin-livello.info { color: #345468; background: #DDEBF2; }
.admin-livello.avviso { color: #7A5E22; background: #F4EAD0; }
.admin-livello.errore { color: #8A4F4A; background: #F1E1DC; }
.admin-livello.sicurezza { color: #5E528A; background: #E6E0F2; }
.admin-log { max-height: 28rem; overflow: auto; background: #2E3532; color: #E8EDE6; padding: 1rem; border-radius: 12px; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.whitespace-nowrap { white-space: nowrap; }

/* =====================================================================
   MICRO-GUIDE E FILTRI PER CARATTERISTICA
   ===================================================================== */
.scheda-con-guida { position: relative; }
.lampadina {
  position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--carta); color: var(--ardesia); border: 2px solid var(--bordo-forte); cursor: pointer;
}
@media (hover: hover) { .lampadina:hover { border-color: var(--ardesia); } }
.guida-blocco { background: var(--carta); border: 2px solid var(--bordo); border-radius: 16px; padding: 1rem 1.15rem; }
.guida-blocco h3 { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.guida-blocco p { line-height: 1.65; }
.nota-clinica { border-left: 8px solid var(--lavanda-deep, #5E528A); background: #F4F1F9; }
.filtri-tag { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.filtro-tag { cursor: pointer; min-height: 40px; padding: .25rem .85rem; font-size: .95rem; opacity: .8; }
.filtro-tag[aria-pressed="true"] { opacity: 1; outline: 3px solid var(--ardesia); outline-offset: 1px; }
.filtro-tag[aria-pressed="true"]::before { content: "✓ "; }

/* La Bussola dell'Isola (glossario) */
.griglia-bussola { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin-top: 1.25rem; }
.voce-bussola { background: var(--carta); border: 2px solid var(--bordo); border-top: 8px solid var(--colore-voce); border-radius: 18px; padding: 1.1rem 1.25rem; scroll-margin-top: 6rem; }
.voce-bussola h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }
.voce-bussola p { line-height: 1.65; }
.voce-giochi { margin-top: .6rem; font-size: .95rem; color: var(--nebbia); }