/* Quaderno del Prof · sito
   Stessi colori, font e forme dell'app (vedi QuadernoProf/DesignSystem). */

/* ---------- Font (OFL, ospitati qui) ---------- */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Colori ---------- */
:root {
  color-scheme: light dark;
  /* tinte fisse, uguali nei due temi */
  --corallo: #FF7A5C;
  --corallo-chiaro: #FF9A82;
  --viola: #A99BFF;
  --viola-scuro: #8F80F0;
  --giallo: #F5C842;
  --azzurro: #9FE3E8;
  --salvia: #B9CDB0;
  --crema: #F2F0E8;
  --inchiostro: #1E1E1D;
  --notte: #2B2223;
  --su-colore: #1E1E1D;

  /* tema chiaro (principale) */
  --sfondo: #F2F0E8;
  --card: #FFFFFF;
  --card-neutra: #E2DFD3;
  --testo: #1E1E1D;
  --testo-2: #6B6B66;
  --testo-medio: #4A4A47;
  --bordo: #B9B6A8;
  --bordo-leggero: #CFCCBF;
  --divisore: #E6E3D8;
  --chip-data: #4F6B47;
  --chip-data-bordo: #BFC8B6;
  --scuro: #1E1E1D;        /* sezioni scure */
  --su-scuro: #F2F0E8;
  --su-scuro-2: #A9A9A2;
  --card-su-scuro: #2B2B29;
  --ombra-telefono: 0 40px 80px -30px rgba(30, 30, 29, .35), 0 18px 36px -18px rgba(30, 30, 29, .25);

  /* misure */
  --r-card: 28px;
  --r-grande: 40px;
  --margine: clamp(20px, 5vw, 64px);
  --larghezza: 1240px;
  --spazio-sezione: clamp(88px, 12vw, 168px);

  /* movimento */
  --curva-uscita: cubic-bezier(.16, 1, .3, 1);
  --curva-molla: cubic-bezier(.34, 1.4, .64, 1);
  --curva-morbida: cubic-bezier(.65, 0, .35, 1);

  /* font */
  --f-titoli: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-testo: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #1E1E1D;
    --card: #2B2B29;
    --card-neutra: #3A3A37;
    --testo: #F2F0E8;
    --testo-2: #9A9A94;
    --testo-medio: #C9C7BE;
    --bordo: #5A5A55;
    --bordo-leggero: #4A4A47;
    --divisore: #3A3A37;
    --chip-data: #B9CDB0;
    --chip-data-bordo: #4F6B47;
    --scuro: #141413;
    --card-su-scuro: #262624;
    --ombra-telefono: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 18px 36px -18px rgba(0, 0, 0, .5);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
html.morbido { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--giallo); color: var(--su-colore); }

:focus-visible {
  outline: 3px solid var(--testo);
  outline-offset: 3px;
  border-radius: 6px;
}
.sezione--scura :focus-visible,
.testata :focus-visible,
.notte :focus-visible { outline-color: var(--azzurro); }

.salta {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--crema);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .3s var(--curva-uscita);
}
.salta:focus { transform: none; }

.solo-lettori {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}

/* ---------- Tipografia ---------- */
.titolo {
  font-family: var(--f-titoli);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.004em;
  text-wrap: balance;
  font-synthesis: none;
}
.titolo--enorme { font-size: clamp(4.4rem, 13vw, 11rem); line-height: .84; }
.titolo--grande { font-size: clamp(3.4rem, 9.2vw, 8.25rem); }
.titolo--medio { font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: .9; }
.titolo--piccolo { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: .92; }

.riga { display: block; }
.attacco {
  font-size: clamp(1.18rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  font-weight: 500;
  max-width: 34em;
  text-wrap: pretty;
}
.testo-2 { color: var(--testo-2); }
.paragrafo { max-width: 36em; text-wrap: pretty; }
.paragrafo + .paragrafo { margin-top: 1em; }

/* Dati dell'interfaccia (come nell'app): monospazio piccolo */
.dato {
  font-family: var(--f-mono);
  font-size: .78rem;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ---------- Pulsanti ---------- */
.pulsante {
  --altezza: 64px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: var(--altezza);
  padding: 0 10px 0 28px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--crema);
  font-family: var(--f-titoli);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: transform .45s var(--curva-molla), background-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.pulsante__cerchio {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--azzurro);
  color: var(--su-colore);
  flex: none;
  overflow: hidden;
}
.pulsante__cerchio svg { width: 20px; height: 20px; transition: transform .5s var(--curva-uscita); }
.pulsante:hover .pulsante__cerchio svg { transform: translateX(3px); }
.pulsante:active { transform: scale(.97); }
@media (prefers-color-scheme: dark) {
  .pulsante { background: var(--crema); color: var(--inchiostro); }
  .pulsante .pulsante__cerchio { background: var(--inchiostro); color: var(--azzurro); }
}
.sezione--scura .pulsante, .notte .pulsante { background: var(--crema); color: var(--inchiostro); }
.sezione--scura .pulsante .pulsante__cerchio, .notte .pulsante .pulsante__cerchio { background: var(--inchiostro); color: var(--azzurro); }

.pulsante--senza-link { cursor: default; }
.pulsante--senza-link:active { transform: none; }

.collegamento {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--testo);
}
.collegamento span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--curva-uscita); padding-bottom: 2px; }
.collegamento:hover span { background-size: 100% 2px; }
.collegamento svg { width: 18px; height: 18px; transition: transform .45s var(--curva-uscita); }
.collegamento:hover svg { transform: translateY(2px); }

/* Chip a pillola */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--chip-data-bordo);
  color: var(--chip-data);
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Barra con tratteggio diagonale (HatchedProgressBar) */
.barra {
  --colore: var(--su-colore);
  --valore: .6;
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--colore) 0 2px, transparent 2px 6px);
}
.barra::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: max(10px, calc(var(--valore) * 100%));
  border-radius: inherit;
  background: var(--colore);
  transition: width 1.1s var(--curva-uscita);
}

/* Icona tonda */
.cerchio {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--crema);
  flex: none;
}
.cerchio svg { width: 22px; height: 22px; }

/* ---------- Testata (capsula come la tab bar dell'app) ---------- */
.testata {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
}
.testata__capsula {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 820px;
  height: 64px;
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  background: rgba(30, 30, 29, .94);
  color: var(--crema);
  box-shadow: 0 12px 30px -12px rgba(30, 30, 29, .45);
  transition: transform .6s var(--curva-uscita), box-shadow .4s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .testata__capsula {
    background: rgba(30, 30, 29, .9);
    -webkit-backdrop-filter: saturate(1.4) blur(20px);
    backdrop-filter: saturate(1.4) blur(20px);
  }
}
@media (prefers-color-scheme: dark) {
  .testata__capsula { background: rgba(43, 43, 41, .9); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); }
}
.testata.nascosta .testata__capsula { transform: translateY(-120%); }

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-right: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
  border-radius: 999px;
}
.marchio img { width: 40px; height: 40px; border-radius: 11px; }
.marchio__nome {
  font-family: var(--f-titoli);
  font-weight: 800;
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.testata nav { margin-inline: auto; }
.menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.menu a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  color: rgba(242, 240, 232, .72);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color .3s ease;
}
.menu a:hover { color: var(--crema); }
.menu a[aria-current="true"] { color: var(--su-colore); }
.menu__bolla {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 48px;
  width: 0;
  border-radius: 14px;
  background: var(--azzurro);
  opacity: 0;
  transition: transform .55s var(--curva-molla), width .55s var(--curva-molla), opacity .3s ease;
  pointer-events: none;
}

.testata__azione {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--crema);
  color: var(--inchiostro);
  text-decoration: none;
  font-family: var(--f-titoli);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .01em;
  white-space: nowrap;
  flex: none;
  transition: transform .45s var(--curva-molla);
}
.testata__azione:active { transform: scale(.96); }

.testata__menu-mobile {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--crema);
  cursor: pointer;
  flex: none;
}
.testata__menu-mobile svg { width: 24px; height: 24px; }

@media (max-width: 860px) {
  .menu { display: none; }
  .testata__menu-mobile { display: grid; }
  .testata__azione { margin-left: auto; }
}
@media (max-width: 420px) {
  .marchio__nome { font-size: 1.1rem; }
  .testata__azione { padding: 0 16px; font-size: 1.05rem; }
  .testata__capsula { padding-left: 8px; gap: 2px; }
  .marchio { gap: 8px; padding-right: 4px; }
  .marchio img { width: 36px; height: 36px; border-radius: 10px; }
}
@media (max-width: 360px) {
  .marchio__nome { display: none; }
}

/* Foglio del menu (si apre dal basso, come i fogli dell'app) */
.foglio {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 560px;
  max-height: none;
  margin: 0 auto;
  padding: 10px 20px max(28px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 32px 32px 0 0;
  background: var(--sfondo);
  color: var(--testo);
  z-index: 60;
  max-height: calc(100vh - 12px);
  max-height: calc(100dvh - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .5s var(--curva-uscita), overlay .5s allow-discrete, display .5s allow-discrete;
}
.foglio[open] { transform: translateY(0); }
@starting-style { .foglio[open] { transform: translateY(100%); } }
.foglio::backdrop {
  background: rgba(30, 30, 29, 0);
  transition: background-color .4s ease, overlay .4s allow-discrete, display .4s allow-discrete;
}
.foglio[open]::backdrop { background: rgba(30, 30, 29, .45); }
@starting-style { .foglio[open]::backdrop { background: rgba(30, 30, 29, 0); } }
.foglio__maniglia { width: 40px; height: 5px; margin: 0 auto 18px; border-radius: 999px; background: var(--bordo-leggero); }
.foglio__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.foglio__chiudi {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--card-neutra);
  color: var(--testo);
  cursor: pointer;
}
.foglio__chiudi svg { width: 18px; height: 18px; }
.foglio nav ul { list-style: none; }
.foglio nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-bottom: 1px solid var(--divisore);
  font-family: var(--f-titoli);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.foglio nav a svg { width: 22px; height: 22px; color: var(--testo-2); }
.foglio .pulsante { margin-top: 24px; width: 100%; justify-content: space-between; }

/* ---------- Sezioni ---------- */
.sezione { padding-block: var(--spazio-sezione); position: relative; }
.sezione--scura { background: var(--scuro); color: var(--su-scuro); }
.sezione--scura .testo-2 { color: var(--su-scuro-2); }
.sezione__testa { display: grid; gap: 28px; margin-bottom: clamp(48px, 7vw, 96px); }
.sezione__testa .attacco { color: var(--testo-medio); }
.sezione--scura .sezione__testa .attacco { color: var(--su-scuro-2); }

/* ---------- Apertura ---------- */
.apertura {
  position: relative;
  padding-top: clamp(112px, 12vw, 150px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.apertura__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.apertura__testo { display: grid; gap: clamp(22px, 2.6vw, 32px); justify-items: start; }
.apertura .titolo--enorme { margin-left: -.04em; }
.apertura__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.apertura__garanzie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  color: var(--testo-medio);
  font-weight: 500;
  font-size: 1rem;
}
.apertura__garanzie li { display: inline-flex; align-items: center; gap: 8px; }
.apertura__garanzie svg { width: 18px; height: 18px; color: var(--chip-data); flex: none; }

.apertura__scena {
  --larg: min(100%, 380px, calc((100vh - 150px) * .4621));
  --larg: min(100%, 380px, calc((100svh - 150px) * .4621));
  position: relative;
  justify-self: center;
  width: var(--larg);
  padding-top: calc(var(--larg) * .27);
}
.apertura__scena .telefono { width: 100%; }
.gufo-appollaiato {
  position: absolute;
  bottom: 100%;
  margin-bottom: -3%;
  left: 7%;
  width: 34%;
  z-index: 3;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.gufo-appollaiato svg { width: 100%; height: auto; overflow: visible; }

.fluttua {
  position: absolute;
  z-index: 2;
  will-change: transform;
}
.fluttua__dentro { box-shadow: 0 24px 48px -22px rgba(30, 30, 29, .4); }
/* conferma «Nota salvata» (come il messaggio breve dell'app) */
.fluttua--conferma { left: 50%; bottom: 2.6%; translate: -50% 0; }
.conferma {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px 0 8px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--crema);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.conferma i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--salvia); color: var(--su-colore); }
.conferma i svg { width: 18px; height: 18px; }
/* promemoria della sera prima */
.fluttua--avviso { right: -24%; top: 74%; width: 62%; }
.avviso {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--card);
  color: var(--testo);
}
.avviso img { width: 34px; height: 34px; border-radius: 9px; grid-row: span 2; }
.avviso .dato { color: var(--testo-2); font-size: .68rem; }
.avviso b { font-weight: 600; font-size: .98rem; line-height: 1.25; }
@media (prefers-color-scheme: dark) {
  .conferma { background: var(--crema); color: var(--inchiostro); }
}

@media (max-width: 980px) {
  .apertura__griglia { grid-template-columns: 1fr; }
  .apertura__scena { --larg: min(72%, 340px); margin-top: 12px; }
}
@media (max-width: 560px) {
  .apertura__scena { --larg: 72%; }
  .conferma { height: 44px; font-size: .88rem; padding-right: 14px; gap: 8px; }
  .conferma i { width: 30px; height: 30px; }
  .fluttua--avviso { right: -16%; width: 74%; }
  .avviso { padding: 10px 12px; border-radius: 18px; grid-template-columns: 28px 1fr; gap: 2px 10px; }
  .avviso img { width: 28px; height: 28px; border-radius: 8px; }
  .avviso b { font-size: .84rem; }
}

/* ---------- Schermata dell'app (senza cornice del dispositivo) ---------- */
.telefono {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: 13% / 6%;
  background: var(--crema);
  box-shadow: var(--ombra-telefono);
}
.telefono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(30, 30, 29, .07);
}
.telefono__schermo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--crema);
  isolation: isolate;
}
.telefono__schermo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Numeri (TALIS) ---------- */
.numeri__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.numero-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(260px, 26vw, 340px);
  padding: 26px 28px 28px;
  border-radius: var(--r-card);
  color: var(--su-colore);
}
.numero-card .dato { opacity: .82; }
.numero-card .numero-card__valore {
  font-family: var(--f-titoli);
  font-weight: 800;
  font-size: clamp(5.5rem, 11vw, 9.5rem);
  line-height: .8;
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.numero-card__valore small { font-size: .45em; margin-left: .04em; }
.numero-card p { margin-top: 16px; font-weight: 600; font-size: 1.12rem; line-height: 1.3; max-width: 18em; }
.numeri__fonte { margin-top: 20px; font-size: .92rem; color: var(--testo-2); max-width: 60em; }
.numeri__fonte a { text-underline-offset: 3px; }
.numeri__risposta { margin-top: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
@media (max-width: 860px) {
  .numeri__griglia { grid-template-columns: 1fr; }
  .numero-card { min-height: 220px; }
  .numeri__risposta { grid-template-columns: 1fr; }
}

/* ---------- Giro delle funzioni (telefono fisso) ---------- */
.giro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.giro__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  order: 2;
}
.giro__palco-dentro { position: relative; width: min(100%, 360px, calc((100vh - 240px) * 390 / 844)); width: min(100%, 360px, calc((100svh - 240px) * 390 / 844)); margin-top: 40px; }
.giro__alone {
  position: absolute;
  inset: 8% -22% 4%;
  border-radius: 50%;
  background: var(--colore-passo, var(--corallo));
  opacity: .9;
  transition: background-color .8s var(--curva-morbida);
  z-index: -1;
  filter: blur(0);
  transform: scale(.98);
}
.giro__palco .telefono__schermo img {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .6s var(--curva-morbida), transform .9s var(--curva-uscita);
}
.giro__palco .telefono__schermo img.attiva { opacity: 1; transform: none; }
.giro__avanzamento { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.giro__avanzamento .barra { flex: 1; --colore: var(--testo); }
.giro__avanzamento .dato { color: var(--testo-2); min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }

.giro__passi { order: 1; list-style: none; }
.passo {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 12vh;
}
.passo__etichetta { display: inline-flex; align-items: center; gap: 10px; color: var(--testo-2); margin-bottom: 22px; }
.passo__etichetta i { width: 12px; height: 12px; border-radius: 50%; background: var(--colore-passo); flex: none; }
.passo .titolo--medio { margin-bottom: 24px; }
.passo .paragrafo { color: var(--testo-medio); font-size: 1.18rem; }
.passo__punti { list-style: none; margin-top: 26px; display: grid; gap: 12px; max-width: 30em; }
.passo__punti li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-weight: 500; line-height: 1.4; }
.passo__punti svg { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--colore-passo); color: var(--su-colore); }
.passo__figura { display: none; }

@media (max-width: 900px) {
  .giro { grid-template-columns: 1fr; }
  .giro__palco { display: none; }
  .passo { min-height: 0; padding-block: 0 clamp(72px, 14vw, 110px); }
  .passo__figura {
    display: block;
    position: relative;
    width: min(76%, 320px);
    margin: 0 auto 44px;
  }
  .passo__figura::before {
    content: "";
    position: absolute;
    inset: 10% -16% 6%;
    border-radius: 50%;
    background: var(--colore-passo);
    z-index: -1;
  }
}

/* ---------- Griglia «e tutto il resto» ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  padding: 26px 28px 28px;
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
}
.tessera--colore { color: var(--su-colore); }
.tessera--colore .tessera__testo { color: rgba(30, 30, 29, .78); }
.tessera--2 { grid-column: span 2; }
.tessera--3 { grid-column: span 3; }
.tessera--4 { grid-column: span 4; }
.tessera__titolo { font-family: var(--f-titoli); font-weight: 800; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: .92; text-transform: uppercase; }
.tessera__testo { color: var(--testo-medio); font-weight: 500; line-height: 1.42; max-width: 26em; }
.tessera__ui { margin-top: auto; }
.tessera--scura { background: var(--inchiostro); color: var(--crema); }
.tessera--scura .tessera__testo { color: #A9A9A2; }
@media (prefers-color-scheme: dark) {
  .tessera--scura { background: var(--crema); color: var(--inchiostro); }
  .tessera--scura .tessera__testo { color: var(--testo-medio); }
  .tessera--scura .tessera__testo { color: #4A4A47; }
}
@media (max-width: 1000px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tessera--2, .tessera--3 { grid-column: span 1; }
  .tessera--4 { grid-column: span 2; }
}
@media (max-width: 620px) {
  .mosaico { grid-template-columns: 1fr; }
  .tessera--2, .tessera--3, .tessera--4 { grid-column: span 1; }
  .tessera { min-height: 0; }
}

/* mini interfacce dentro le tessere */
.mini-segmenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.mini-segmenti span { display: grid; place-items: center; height: 38px; border-radius: 999px; font-weight: 600; font-size: .95rem; background: rgba(255, 255, 255, .8); }
.mini-segmenti span.si { background: var(--salvia); }
.mini-segmenti span.meta { background: var(--giallo); }
.mini-domanda { font-weight: 600; margin-bottom: 8px; color: var(--su-colore); }
.mini-domanda + .mini-segmenti + .mini-domanda { margin-top: 14px; }

.mini-chip-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .7); color: var(--su-colore);
}
.mini-chip--pieno { background: var(--giallo); }
.mini-chip--bordo { background: transparent; border: 1.5px solid rgba(30, 30, 29, .35); }

.mini-elenco {
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  padding: 14px 16px;
  font-family: var(--f-mono);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--su-colore);
}
.mini-elenco .giallo { display: flex; justify-content: space-between; background: var(--giallo); margin: 0 -8px; padding: 0 8px; border-radius: 6px; }

.mini-righe { display: grid; gap: 8px; }
.mini-riga { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--sfondo); font-weight: 600; font-size: .98rem; }
.tessera--colore .mini-riga { background: rgba(255, 255, 255, .7); color: var(--su-colore); }
.mini-riga i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mini-riga .dato { margin-left: auto; color: var(--testo-2); }
.tessera--colore .mini-riga .dato { color: rgba(30, 30, 29, .6); }
.mini-riga .spunta { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bordo-leggero); }
.mini-riga .spunta.on { border-color: var(--inchiostro); background: var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (prefers-color-scheme: dark) {
  .mini-riga .spunta.on { border-color: var(--crema); background-color: var(--crema); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
}

.mini-numero { font-family: var(--f-titoli); font-weight: 800; font-size: 5.6rem; line-height: .8; }
.mini-griglia-orario { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mini-griglia-orario span { aspect-ratio: 1.15; border-radius: 9px; display: grid; place-items: center; font-family: var(--f-titoli); font-weight: 800; font-size: .95rem; color: var(--su-colore); }
.mini-griglia-orario .v { border: 1.5px dashed var(--bordo-leggero); }
.mini-griglia-orario .doppia { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; place-items: stretch; background: none; }
.mini-griglia-orario .doppia b { display: grid; place-items: center; border-radius: 6px; font-size: .7rem; }

.mini-temi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-temi div { border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.mini-temi .chiaro { background: #F2F0E8; color: #1E1E1D; }
.mini-temi .scuro { background: #2B2B29; color: #F2F0E8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mini-temi b { font-family: var(--f-titoli); font-weight: 800; font-size: 1.6rem; line-height: .9; text-transform: uppercase; }
.mini-temi i { display: block; height: 30px; border-radius: 10px; background: var(--corallo); }

/* chip sulle tessere bianche */
.tessera:not(.tessera--colore) .mini-chip { background: var(--sfondo); color: var(--testo); }
.tessera:not(.tessera--colore) .mini-chip--pieno { background: var(--giallo); color: var(--su-colore); }
.tessera:not(.tessera--colore) .mini-chip--bordo { background: transparent; border-color: var(--bordo); }

/* Isola Dinamica (sempre nera, come sul telefono) */
.mini-isola {
  display: grid; gap: 14px; max-width: 470px; padding: 18px 20px 16px;
  border-radius: 34px; background: #000; color: #F2F0E8;
  box-shadow: 0 18px 40px rgba(30, 30, 29, .22);
}
.mini-isola__riga { display: flex; align-items: center; gap: 12px; }
.mini-isola__classe {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--corallo); color: #1E1E1D;
  font-family: var(--f-titoli); font-weight: 800; font-size: 1.4rem;
}
.mini-isola__nome { display: grid; line-height: 1.2; }
.mini-isola__nome b { font-weight: 700; font-size: 1.08rem; }
.mini-isola__nome small, .mini-isola__minuti small, .mini-isola__piede small { color: #A9A9A2; }
.mini-isola__nome small { font-size: .88rem; }
.mini-isola__minuti {
  display: grid; justify-items: end; margin-left: auto;
  font-family: var(--f-titoli); font-weight: 800; font-size: 2.7rem; line-height: .85; color: var(--corallo);
}
.mini-isola__minuti small, .mini-isola__piede small {
  font-family: var(--f-mono); font-weight: 400; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
}
.mini-isola__minuti small { margin-top: 6px; }
.mini-isola__tacche { position: relative; height: 18px; background: repeating-linear-gradient(90deg, #4A4A47 0 5px, transparent 5px 10px); }
.mini-isola__tacche::before {
  content: ""; position: absolute; inset: 0 45% 0 0;
  background: repeating-linear-gradient(90deg, var(--corallo) 0 5px, transparent 5px 10px);
}
.mini-isola__piede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mini-isola__piede span { padding: 8px 14px; border-radius: 999px; background: #3A2620; color: var(--corallo); font-weight: 600; font-size: .9rem; }
.mini-isola__piede small { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  .tessera--colore .mini-riga .spunta { border-color: rgba(30, 30, 29, .35); }
  .tessera--colore .mini-riga .spunta.on { border-color: var(--inchiostro); background-color: var(--inchiostro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
}

/* widget Settimana */
.mini-widget .ora { box-shadow: 0 0 0 2.5px var(--testo); }

/* ---------- Gufo ---------- */
.gufo-sezione__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.gufo-carta {
  position: relative;
  border-radius: var(--r-grande);
  background: var(--giallo);
  color: var(--su-colore);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gufo-carta__nome { font-family: var(--f-titoli); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .9; text-transform: uppercase; margin-top: 6px; }
.gufo-carta__disegno { flex: 1; display: grid; place-items: end center; min-height: 0; }
.gufo-tocco { border: 0; padding: 0; background: none; cursor: pointer; display: block; width: min(100%, 440px); -webkit-tap-highlight-color: transparent; }
.gufo-carta__elementi { position: absolute; right: clamp(20px, 3vw, 36px); top: clamp(24px, 3vw, 40px); text-align: right; max-width: 45%; }
.gufo-carta__elementi .dato { opacity: .8; }

.materie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; }
.materia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--card-neutra);
  color: var(--testo);
  font-family: var(--f-testo);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .25s ease, transform .4s var(--curva-molla);
  -webkit-tap-highlight-color: transparent;
}
.materia:hover { background: var(--bordo-leggero); }
.materia:active { transform: scale(.95); }
.materia[aria-pressed="true"] { background: var(--giallo); color: var(--su-colore); padding-left: 8px; }
.materia__ordine {
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--giallo);
  font-family: var(--f-titoli);
  font-weight: 800;
  font-size: .95rem;
}
.materia[aria-pressed="true"] .materia__ordine { display: grid; }
.gufo-sezione__nota { margin-top: 22px; color: var(--testo-2); font-size: 1rem; }
@media (max-width: 900px) {
  .gufo-sezione__griglia { grid-template-columns: 1fr; }
  .gufo-carta { aspect-ratio: auto; min-height: 0; }
  .gufo-tocco { width: min(78%, 360px); margin-top: 56px; }
}

/* elementi del gufo: entrano con una molla */
.el-gufo { transform-box: fill-box; transform-origin: 50% 100%; animation: el-entra .55s var(--curva-molla) both; }
@keyframes el-entra { from { opacity: 0; transform: scale(.4) translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Pensiero del giorno ---------- */
.notte { background: var(--notte); color: var(--crema); }
.notte .attacco { color: #CFC6BE; }
.pensiero__griglia { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pensiero__data { color: var(--azzurro); margin-bottom: 20px; display: block; }
.pensiero__mazzo { position: relative; width: min(100%, 480px); justify-self: center; aspect-ratio: 1 / 1.08; }
.pensiero__carta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  padding: clamp(24px, 3vw, 36px);
  color: var(--su-colore);
  transition: transform .8s var(--curva-uscita), opacity .5s ease;
}
.pensiero__carta--dietro1 { background: var(--viola); transform: rotate(5deg) translate(4%, 2%); }
.pensiero__carta--dietro2 { background: var(--corallo); transform: rotate(-4deg) translate(-3%, 3%); }
.pensiero__carta--fronte { background: var(--giallo); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.pensiero__testa { display: flex; justify-content: space-between; align-items: flex-start; }
.pensiero__sole { width: 44px; height: 44px; color: var(--su-colore); }
.pensiero__frase {
  margin-top: auto;
  font-family: var(--f-titoli);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  line-height: .98;
  text-transform: uppercase;
  text-wrap: balance;
  transition: opacity .35s ease, transform .5s var(--curva-uscita);
}
.pensiero__frase.cambia { opacity: 0; transform: translateY(10px); }
.pensiero__piede { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.pensiero__fonte { opacity: .75; }
.pensiero__prossimo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: rgba(30, 30, 29, .12);
  color: var(--su-colore);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, transform .4s var(--curva-molla);
}
.pensiero__prossimo:hover { background: rgba(30, 30, 29, .2); }
.pensiero__prossimo:active { transform: scale(.95); }
.pensiero__prossimo svg { width: 14px; height: 14px; }
.pensiero__punti { display: flex; gap: 6px; justify-content: center; margin-top: 30px; }
.pensiero__punti span { width: 7px; height: 7px; border-radius: 999px; background: rgba(242, 240, 232, .3); transition: width .45s var(--curva-uscita), background-color .3s; }
.pensiero__punti span.on { width: 22px; background: var(--giallo); }
@media (max-width: 900px) {
  .pensiero__griglia { grid-template-columns: 1fr; }
  .pensiero__mazzo { width: min(92%, 440px); aspect-ratio: 1 / 1.15; }
}

/* ---------- Carte (ricompense) ---------- */
.carte__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mazzo { position: relative; width: min(100%, 460px); justify-self: center; height: calc((var(--n, 6) - 1) * 80px + 300px); }
.carta-premio {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * 80px);
  aspect-ratio: 342 / 216;
  border-radius: 26px;
  padding: 20px 22px;
  color: var(--su-colore);
  box-shadow: 0 -10px 24px -14px rgba(30, 30, 29, .3);
  transform: translateY(calc(var(--i) * 26px)) scale(.96);
  opacity: 0;
  transition: transform 1s var(--curva-uscita), opacity .6s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.mazzo.visibile .carta-premio { transform: none; opacity: 1; }
@media (hover: hover) {
  .mazzo.visibile .carta-premio:hover { transform: translateY(-14px); transition-delay: 0s; transition-duration: .5s; }
}
.carta-premio__nome { font-family: var(--f-titoli); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: .95; text-transform: uppercase; }
.carta-premio__livello { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.carta-premio__livello i { display: flex; gap: 4px; }
.carta-premio__livello i b { width: 9px; height: 9px; border-radius: 50%; background: var(--su-colore); }
.carta-premio__livello i b.vuoto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--su-colore); }
.carta-premio .dato { font-size: .68rem; }
.carta-premio__descr { position: absolute; left: 22px; bottom: 20px; font-weight: 600; font-size: 1rem; }
.carta-premio--scura { background: var(--notte); color: var(--crema); }
.carta-premio--scura .carta-premio__livello i b { background: var(--crema); }
.carta-premio--scura .carta-premio__livello i b.vuoto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--crema); }
.carta-premio__serie { color: var(--azzurro); margin-bottom: 8px; display: block; }
.carte__regole { list-style: none; display: grid; gap: 14px; margin-top: 32px; max-width: 32em; }
.carte__regole li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-weight: 500; }
.carte__regole li::before { content: ""; width: 10px; height: 10px; margin: 8px 0 0 6px; border-radius: 50%; background: var(--corallo); }
@media (max-width: 900px) {
  .carte__griglia { grid-template-columns: 1fr; }
  .mazzo { order: 2; }
}
@media (max-width: 480px) {
  .mazzo { height: calc((var(--n, 6) - 1) * 64px + 230px); }
  .carta-premio { top: calc(var(--i) * 64px); padding: 14px 18px; border-radius: 22px; }
  .carta-premio__nome { font-size: 1.55rem; }
  .carta-premio__descr { left: 18px; bottom: 16px; font-size: .92rem; }
}

/* ---------- Privacy ---------- */
.privacy__griglia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.promesse { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promessa { border-radius: var(--r-card); background: var(--card-su-scuro); padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; }
.promessa svg { width: 30px; height: 30px; color: var(--azzurro); margin-bottom: 8px; }
.promessa h3 { font-family: var(--f-titoli); font-weight: 800; font-size: 1.75rem; line-height: .95; text-transform: uppercase; }
.promessa p { color: var(--su-scuro-2); font-size: 1.02rem; line-height: 1.45; }
.privacy__scena { position: sticky; top: 110px; display: grid; justify-items: center; gap: 24px; }
.privacy__scena .telefono { width: min(100%, 330px); }
.privacy__nota { color: var(--su-scuro-2); font-size: .98rem; max-width: 30em; text-align: center; }
.privacy__nota a { color: var(--crema); text-underline-offset: 3px; }
@media (max-width: 960px) {
  .privacy__griglia { grid-template-columns: 1fr; }
  .privacy__scena { position: static; order: -1; }
  .privacy__scena .telefono { width: min(70%, 300px); }
}
@media (max-width: 620px) { .promesse { grid-template-columns: 1fr; } }

/* ---------- Domande ---------- */
.domande__griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.domande__testa { position: sticky; top: 120px; display: grid; gap: 24px; }
.domande__elenco { display: grid; gap: 10px; }
.domanda { border-radius: 24px; background: var(--card); overflow: hidden; }
.domanda summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 18px 20px 18px 26px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:focus-visible { outline-offset: -3px; border-radius: 24px; }
.domanda__segno { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--card-neutra); flex: none; transition: background-color .3s ease, transform .5s var(--curva-uscita); }
.domanda__segno::before, .domanda__segno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--testo); transition: transform .5s var(--curva-uscita); }
.domanda__segno::after { transform: rotate(90deg); }
.domanda[open] .domanda__segno { background: var(--azzurro); transform: rotate(180deg); }
.domanda[open] .domanda__segno::before, .domanda[open] .domanda__segno::after { background: var(--su-colore); }
.domanda[open] .domanda__segno::after { transform: rotate(0deg); }
.domanda__risposta { padding: 0 26px 24px; color: var(--testo-medio); max-width: 40em; }
.domanda__risposta p + p { margin-top: .8em; }
@media (max-width: 900px) {
  .domande__griglia { grid-template-columns: 1fr; }
  .domande__testa { position: static; }
}

/* ---------- Chiusura ---------- */
.chiusura { text-align: center; padding-block: clamp(110px, 16vw, 220px) clamp(90px, 12vw, 160px); overflow: hidden; }
.chiusura__gufo { width: clamp(150px, 18vw, 220px); margin: 0 auto 8px; cursor: pointer; border: 0; padding: 0; background: none; display: block; }
.chiusura__gufo svg { width: 100%; height: auto; overflow: visible; }
.chiusura .titolo--enorme { font-size: clamp(4rem, 13vw, 11.5rem); }
.chiusura .attacco { margin: 28px auto 0; color: var(--testo-medio); }
.chiusura__azioni { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 40px; }
.chiusura__requisiti { color: var(--testo-2); font-size: .98rem; }

/* ---------- Piede ---------- */
.piede { border-top: 1px solid var(--divisore); padding-block: 40px max(40px, env(safe-area-inset-bottom)); font-size: 1rem; }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.piede__marchio { display: flex; align-items: center; gap: 12px; font-family: var(--f-titoli); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; text-decoration: none; }
.piede__marchio img { width: 40px; height: 40px; border-radius: 11px; }
.piede nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; }
.piede nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--testo-medio); font-weight: 500; }
.piede nav a:hover { color: var(--testo); text-decoration: underline; text-underline-offset: 4px; }
.piede__nota { margin-top: 18px; color: var(--testo-2); font-size: .92rem; }

/* ---------- Pagine di testo (privacy, supporto) ---------- */
.pagina { padding-top: clamp(130px, 16vw, 180px); padding-bottom: clamp(80px, 10vw, 140px); }
.pagina__testa { display: grid; gap: 24px; margin-bottom: clamp(48px, 7vw, 80px); }
.pagina__testa .attacco { color: var(--testo-medio); }
.pagina__corpo { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.indice { position: sticky; top: 110px; list-style: none; display: grid; gap: 2px; font-size: .98rem; }
.indice a { display: block; padding: 8px 14px; border-radius: 12px; text-decoration: none; color: var(--testo-2); font-weight: 500; transition: background-color .25s, color .25s; }
.indice a:hover { color: var(--testo); background: var(--card); }
.testo-lungo { max-width: 42em; }
.testo-lungo h2 { font-family: var(--f-titoli); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: .95; text-transform: uppercase; margin: 56px 0 18px; scroll-margin-top: 110px; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo h3 { font-size: 1.2rem; font-weight: 700; margin: 28px 0 8px; }
.testo-lungo p, .testo-lungo li { color: var(--testo-medio); }
.testo-lungo p + p, .testo-lungo ul + p, .testo-lungo ol + p, .testo-lungo .tabella + p { margin-top: 1em; }
.testo-lungo ul { margin: 14px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.testo-lungo ul li { position: relative; padding-left: 30px; }
.testo-lungo ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--corallo); }
.testo-lungo a { color: var(--testo); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.testo-lungo strong { color: var(--testo); font-weight: 600; }
.riquadro { margin-top: 20px; padding: 22px 24px; border-radius: 24px; background: var(--card); }
.riquadro--giallo { background: var(--giallo); color: var(--su-colore); }
.riquadro--giallo p, .riquadro--giallo li, .riquadro--giallo strong { color: var(--su-colore); }
.aggiornata { margin-top: 48px; color: var(--testo-2); font-size: .95rem; }
.testo-lungo ol { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 10px; }
.testo-lungo ol li::marker { color: var(--testo-2); font-weight: 600; }
.testo-lungo ul ul, .testo-lungo ol ul { margin-top: 8px; }
.testo-lungo blockquote { margin: 20px 0; padding: 18px 22px; border-radius: 20px; background: var(--card); }
.testo-lungo em { font-style: italic; }
.tabella { margin: 18px 0 0; overflow-x: auto; border-radius: 18px; background: var(--card); }
.tabella table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabella th, .tabella td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--divisore); color: var(--testo-medio); }
.tabella th { color: var(--testo); font-weight: 600; }
.tabella tr:last-child td { border-bottom: 0; }
.nota-traduzione { margin-bottom: 8px; color: var(--testo-2); }
.pagina__corpo--solo { grid-template-columns: minmax(0, 1fr); }
.scarica-pdf {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; background: var(--inchiostro); color: var(--crema) !important;
  font-weight: 600; text-decoration: none;
}
.scarica-pdf svg { width: 18px; height: 18px; }
@media (prefers-color-scheme: dark) { .scarica-pdf { background: var(--crema); color: var(--inchiostro) !important; } }
@media (max-width: 860px) {
  .pagina__corpo { grid-template-columns: minmax(0, 1fr); }
  .indice { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .indice a { background: var(--card); padding: 8px 14px; border-radius: 999px; }
}

.contatto {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-grande);
  background: var(--azzurro);
  color: var(--su-colore);
  margin-top: 8px;
}
.contatto .titolo { color: var(--su-colore); }
.contatto p { color: rgba(30, 30, 29, .8); }
.contatto .pulsante { justify-self: start; background: var(--inchiostro); color: var(--crema); }
.contatto .pulsante .pulsante__cerchio { background: var(--azzurro); color: var(--su-colore); }
.contatto__indirizzo { font-family: var(--f-mono); font-size: .95rem; letter-spacing: .02em; word-break: break-all; }

/* 404 */
.errore { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--margine) 80px; }
.errore__gufo { width: 200px; margin: 0 auto 12px; }
.errore .attacco { margin: 22px auto 34px; color: var(--testo-medio); }


/* ---------- Aggiunte: invito, etichette, gufo, carte ---------- */
.pulsante--app { text-transform: none; letter-spacing: .01em; font-size: 1.4rem; }
.solo-stretto { display: none; }
@media (max-width: 560px) {
  .solo-largo { display: none; }
  .solo-stretto { display: inline; }
}
.gufo-tocco svg { width: 100%; height: auto; overflow: visible; }
.gufo-carta__disegno { flex: 1; display: grid; place-items: end center; min-height: 0; }
.materie li[hidden] { display: none; }
.materia--altre { margin-top: 8px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--bordo); }
.materia--altre:hover { background: var(--card-neutra); }
.carta-premio--bloccata {
  background: var(--card-neutra);
  color: var(--testo-2);
  box-shadow: inset 0 0 0 2px var(--bordo-leggero), 0 -10px 24px -14px rgba(30, 30, 29, .3);
}
.carta-premio--bloccata .carta-premio__livello i b.vuoto { box-shadow: inset 0 0 0 1.5px var(--testo-2); }
.carta-premio__livello--fondo { position: absolute; right: 22px; bottom: 20px; margin: 0; }
@media (max-width: 480px) { .carta-premio__livello--fondo { right: 18px; bottom: 16px; } }
.carta-premio--scura .dato { color: var(--crema); }
.carta-premio--scura .carta-premio__serie { color: var(--azzurro); }
.numeri__risposta .attacco { max-width: 30em; }
.domande__testa a { color: inherit; text-underline-offset: 3px; }

/* ---------- Comparsa allo scorrimento ---------- */
.js [data-rivela] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--curva-uscita), transform 1.1s var(--curva-uscita);
  transition-delay: calc(var(--ritardo, 0) * 1ms);
}
.js [data-rivela].visibile { opacity: 1; transform: none; }

/* Titoli che salgono riga per riga da dietro una maschera */
.js [data-righe] .riga { overflow: hidden; padding: .14em 0 .06em; margin: -.14em 0 -.06em; }
/* Se lo script non parte, dopo qualche secondo si vede comunque tutto */
.rivela-tutto [data-rivela], .rivela-tutto .apertura [data-entra] { opacity: 1 !important; transform: none !important; }
.rivela-tutto [data-righe] .riga > span { transform: none !important; }
.rivela-tutto .carta-premio { opacity: 1 !important; transform: none !important; }
html.bloccato { overflow: hidden; }
.js [data-righe] .riga > span { display: block; transform: translateY(105%); transition: transform 1.15s var(--curva-uscita); transition-delay: calc(var(--r, 0) * 90ms + var(--ritardo, 0) * 1ms); }
.js [data-righe].visibile .riga > span { transform: none; }

/* Apertura: sequenza al caricamento */
.js .apertura [data-entra] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--curva-uscita), transform 1.1s var(--curva-uscita); transition-delay: calc(var(--ritardo, 0) * 1ms); }
.js .apertura.pronta [data-entra] { opacity: 1; transform: none; }
.js .apertura .telefono[data-entra] { transform: translateY(60px) rotate(-2deg); transition-duration: 1s, 1.4s; }
.js .apertura.pronta .telefono[data-entra] { transform: none; }

/* ---------- Gufo: respiro, battito e mosse (da Grafica/mascotte/gufo/animazioni) ---------- */
.gufo .m-root { transform-origin: 100px 184px; animation: respiro 3.4s ease-in-out 8; }
.gufo .m-eyes { transform-box: fill-box; transform-origin: center; animation: battito 5s 6; }
.gufo .m-eyes-happy { transition: opacity .12s; }
.gufo .segui { transform-origin: 100px 184px; }
.gufo .fx { opacity: 0; }
.gufo .fb { transform-box: fill-box; transform-origin: center; }
.gufo .ombra { transform-box: fill-box; transform-origin: center; }
.gufo .m-arm-l { transform-origin: 54px 128px; }
.gufo .m-arm-r { transform-origin: 146px 128px; }
.gufo .m-ear-l { transform-origin: 72px 72px; }
.gufo .m-ear-r { transform-origin: 128px 72px; }
.a-float { animation: galleggia 2.8s ease-in-out 10; }
@keyframes respiro { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.03); } }
@keyframes battito { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* saluta */
.gufo.anim-saluto .m-arm-r { animation: saluto 1.6s ease-in-out; }
@keyframes saluto { 0% { transform: rotate(0); } 18% { transform: rotate(-140deg); } 34% { transform: rotate(-108deg); } 50% { transform: rotate(-140deg); } 66% { transform: rotate(-108deg); } 82% { transform: rotate(-140deg); } 100% { transform: rotate(0); } }
/* salta */
.gufo.anim-salto .m-root { animation: salto .8s cubic-bezier(.3, .6, .4, 1); }
@keyframes salto { 0% { transform: translateY(0) scale(1, 1); } 14% { transform: translateY(0) scale(1.1, .88); } 42% { transform: translateY(-38px) scale(.94, 1.08); } 68% { transform: translateY(0) scale(1.08, .92); } 84% { transform: translateY(0) scale(.98, 1.02); } 100% { transform: translateY(0) scale(1, 1); } }
/* felice */
.gufo.anim-felice .m-eyes { opacity: 0; }
.gufo.anim-felice .m-eyes-happy { opacity: 1; }
.gufo.anim-felice .m-root { animation: dondola 1.4s ease-in-out; }
@keyframes dondola { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
/* dorme */
.gufo.anim-dorme .m-eyes { animation: none; transform: scaleY(.12); }
.gufo.anim-dorme .m-root { animation: respiro 2.4s ease-in-out infinite; }
.gufo .zeta { opacity: 0; }
.gufo.anim-dorme .zeta { animation: zeta 3.2s ease-in-out infinite; }
.gufo.anim-dorme .zeta--2 { animation-delay: 1.6s; }
@keyframes zeta { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -16px) scale(1.05); } }

/* gira la testa */
.gufo.play-gtesta .m-face { transform-origin: 100px 104px; animation: g-testa 2.2s cubic-bezier(.3, 1.45, .5, 1) both; }
.gufo.play-gtesta .m-look { animation: g-testa-look 2.2s cubic-bezier(.3, 1.45, .5, 1) both; }
.gufo.play-gtesta .m-ears { transform-origin: 100px 104px; animation: g-testa-ciuffi 2.2s cubic-bezier(.3, 1.45, .5, 1) both; }
@keyframes g-testa { 0%, 5% { transform: translateX(0) rotate(0) scaleX(1); } 13%, 34% { transform: translateX(-10px) rotate(0) scaleX(.94); } 42%, 62% { transform: translateX(10px) rotate(0) scaleX(.94); } 70%, 86% { transform: translateX(0) rotate(-12deg) scaleX(1); } 95%, 100% { transform: translateX(0) rotate(0) scaleX(1); } }
@keyframes g-testa-look { 0%, 5% { transform: translate(0, 0); } 13%, 34% { transform: translate(-4px, 0); } 42%, 62% { transform: translate(4px, 0); } 70%, 86% { transform: translate(1px, -2px); } 95%, 100% { transform: translate(0, 0); } }
@keyframes g-testa-ciuffi { 0%, 5% { transform: translateX(0) rotate(0); } 13%, 34% { transform: translateX(-4px) rotate(0); } 42%, 62% { transform: translateX(4px) rotate(0); } 70%, 86% { transform: translateX(0) rotate(-6deg); } 95%, 100% { transform: translateX(0) rotate(0); } }
/* ciuffi su */
.gufo.play-gciuffi .m-root { animation: g-sobbalzo 1.4s ease-out both; }
.gufo.play-gciuffi .m-ear-l { animation: g-ciuffo-l 1.4s cubic-bezier(.3, 1.6, .5, 1) both; }
.gufo.play-gciuffi .m-ear-r { animation: g-ciuffo-r 1.4s cubic-bezier(.3, 1.6, .5, 1) both; }
.gufo.play-gciuffi .m-sclera circle { transform-box: fill-box; transform-origin: center; animation: g-occhioni 1.4s cubic-bezier(.3, 1.6, .5, 1) both; }
.gufo.play-gciuffi .m-eyes { animation: none; }
.gufo.play-gciuffi .m-eyes circle { transform-box: fill-box; transform-origin: center; animation: g-pupille 1.4s ease-out both; }
.gufo.play-gciuffi .fx-esclama { animation: pop-esclama 1.4s ease-out both; }
@keyframes g-sobbalzo { 0% { transform: translateY(0) scale(1, 1); } 8% { transform: translateY(-7px) scale(.97, 1.04); } 18% { transform: translateY(0) scale(1.03, .97); } 26%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes g-ciuffo-l { 0% { transform: translateY(0) rotate(0) scaleY(1); } 10%, 72% { transform: translateY(-6px) rotate(10deg) scaleY(1.12); } 86%, 100% { transform: translateY(0) rotate(0) scaleY(1); } }
@keyframes g-ciuffo-r { 0% { transform: translateY(0) rotate(0) scaleY(1); } 10%, 72% { transform: translateY(-6px) rotate(-10deg) scaleY(1.12); } 86%, 100% { transform: translateY(0) rotate(0) scaleY(1); } }
@keyframes g-occhioni { 0% { transform: scale(1); } 10%, 72% { transform: scale(1.18); } 86%, 100% { transform: scale(1); } }
@keyframes g-pupille { 0% { transform: scale(1); } 10%, 72% { transform: scale(.8); } 86%, 100% { transform: scale(1); } }
@keyframes pop-esclama { 0%, 4% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; transform: scale(1.15); } 20% { transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1); } }
/* sbatte le ali */
.gufo.play-gali .m-root { animation: g-volo 1.8s ease-in-out both; }
.gufo.play-gali .m-arm-l { animation: g-ala-l 1.8s ease-in-out both; }
.gufo.play-gali .m-arm-r { animation: g-ala-r 1.8s ease-in-out both; }
.gufo.play-gali .ombra { animation: g-ombra 1.8s ease-in-out both; }
@keyframes g-volo { 0% { transform: translateY(0) scale(1, 1); } 10% { transform: translateY(2px) scale(1.05, .94); } 22% { transform: translateY(-16px) scale(.98, 1.03); } 34% { transform: translateY(-11px) scale(1, 1); } 46% { transform: translateY(-17px) scale(1, 1); } 58% { transform: translateY(-12px) scale(1, 1); } 70% { transform: translateY(-15px) scale(1, 1); } 84% { transform: translateY(0) scale(1.06, .93); } 92% { transform: translateY(0) scale(.98, 1.02); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes g-ala-l { 0%, 8% { transform: rotate(0); } 16% { transform: rotate(105deg); } 24% { transform: rotate(45deg); } 32% { transform: rotate(108deg); } 40% { transform: rotate(45deg); } 48% { transform: rotate(108deg); } 56% { transform: rotate(45deg); } 64% { transform: rotate(108deg); } 72% { transform: rotate(50deg); } 80% { transform: rotate(90deg); } 90%, 100% { transform: rotate(0); } }
@keyframes g-ala-r { 0%, 8% { transform: rotate(0); } 16% { transform: rotate(-105deg); } 24% { transform: rotate(-45deg); } 32% { transform: rotate(-108deg); } 40% { transform: rotate(-45deg); } 48% { transform: rotate(-108deg); } 56% { transform: rotate(-45deg); } 64% { transform: rotate(-108deg); } 72% { transform: rotate(-50deg); } 80% { transform: rotate(-90deg); } 90%, 100% { transform: rotate(0); } }
@keyframes g-ombra { 0%, 10% { transform: scale(1); opacity: .12; } 22%, 70% { transform: scale(.72); opacity: .06; } 84%, 100% { transform: scale(1); opacity: .12; } }
/* occhiolino */
.gufo.play-gocchio .m-root, .gufo.play-gocchio .segui { animation: g-ammicca 1.2s ease-in-out both; }
.gufo.play-gocchio .m-eyes { animation: none; }
.gufo.play-gocchio .m-eyes circle:nth-child(2n) { transform-box: fill-box; transform-origin: center; animation: g-chiudi 1.2s ease-in-out both; }
.gufo.play-gocchio .fx-ammicco { animation: g-arco 1.2s ease-in-out both; }
.gufo.play-gocchio .m-cheeks circle:nth-child(2) { transform-box: fill-box; transform-origin: center; animation: g-guancia 1.2s ease-in-out both; }
.gufo.play-gocchio .fx-stella { animation: scintilla-occhio 1.2s ease-out both; }
@keyframes g-ammicca { 0% { transform: rotate(0); } 18%, 72% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes g-chiudi { 0% { transform: scaleY(1); opacity: 1; } 12% { transform: scaleY(.1); opacity: 1; } 14%, 76% { transform: scaleY(.1); opacity: 0; } 78% { transform: scaleY(.1); opacity: 1; } 90%, 100% { transform: scaleY(1); opacity: 1; } }
@keyframes g-arco { 0%, 12% { opacity: 0; } 14%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes g-guancia { 0% { transform: translateY(0) scale(1); } 18%, 72% { transform: translateY(-2px) scale(1.2); } 100% { transform: translateY(0) scale(1); } }
@keyframes scintilla-occhio { 0%, 14% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.15); } 60% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(.6); } }
/* uh-uh */
.gufo.play-guhuh .m-root, .gufo.play-guhuh .segui { animation: g-uhuh 1.6s ease-in-out both; }
.gufo.play-guhuh .m-mouth { animation: g-becco-chiuso 1.6s both; }
.gufo.play-guhuh .fx-becco { animation: g-becco-aperto 1.6s both; }
.gufo.play-guhuh .m-eyes { animation: g-uhuh-occhi 1.6s both; }
.gufo.play-guhuh .m-eyes-happy { animation: g-uhuh-felice 1.6s both; }
.gufo.play-guhuh .fx-onde { animation: g-onde 1.6s ease-out both; }
@keyframes g-uhuh { 0%, 8% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(-3px) scale(1.03, 1.05); } 30% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3px) scale(1.03, 1.05); } 62%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes g-becco-chiuso { 0%, 10% { opacity: 1; } 12%, 28% { opacity: 0; } 30%, 42% { opacity: 1; } 44%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes g-becco-aperto { 0%, 10% { opacity: 0; } 12%, 28% { opacity: 1; } 30%, 42% { opacity: 0; } 44%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes g-uhuh-occhi { 0%, 6% { opacity: 1; } 10%, 70% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes g-uhuh-felice { 0%, 6% { opacity: 0; } 10%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes g-onde { 0%, 10% { opacity: 0; transform: translateX(-4px); } 16% { opacity: 1; } 32% { opacity: 0; transform: translateX(7px); } 42% { opacity: 0; transform: translateX(-4px); } 48% { opacity: 1; } 64%, 100% { opacity: 0; transform: translateX(7px); } }

/* ---------- Transizioni tra le pagine ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .32s var(--curva-morbida) both pagina-esce; }
::view-transition-new(root) { animation: .5s var(--curva-uscita) both pagina-entra; }
@keyframes pagina-esce { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(18px); } }
.testata { view-transition-name: testata; }
::view-transition-group(testata) { animation-duration: 0s; }

/* ---------- Riduci movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
  }
  .gufo .m-root, .gufo .m-eyes, .a-float { animation: none !important; }
  .js [data-rivela], .js .apertura [data-entra], .js .apertura .telefono[data-entra] { transform: none !important; }
  .js [data-righe] .riga > span { transform: none !important; }
  .fluttua { transform: none !important; }
  .carta-premio { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Stampa ---------- */
@media print {
  .testata, .foglio, .gufo-appollaiato, .fluttua { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-rivela], .js [data-righe] .riga > span, .js .apertura [data-entra] { opacity: 1 !important; transform: none !important; }
}

/* Pagine interne: voce del menu della pagina aperta */
.menu a[aria-current="page"] { background: var(--azzurro); color: var(--su-colore); }
.errore .gufo-tocco { width: 200px; margin: 0 auto 12px; }
.pagina__testa > .chip { justify-self: start; }

/* Revisione: proporzione della carta del Gufo, fuoco visibile sulle carte colorate, carta «Colloqui» stretta */
@media (min-width: 1101px) {
  .gufo-carta { aspect-ratio: 1 / 1.02; }
  /* il Gufo riempie l'altezza che resta nella carta, senza uscire */
  .gufo-carta .gufo-tocco { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 1; }
  .gufo-carta .gufo-tocco svg { width: 100%; height: 100%; }
}
@media (min-width: 901px) and (max-width: 1100px) { .gufo-tocco { width: min(84%, 380px); margin-top: 40px; } }
.pensiero__carta :focus-visible, .gufo-carta :focus-visible, .contatto :focus-visible, .tessera--colore :focus-visible { outline-color: var(--inchiostro); }
@media (max-width: 480px) {
  .carta-premio--scura .carta-premio__descr { bottom: 44px; }
}