/* ==========================================================================
   another TV — interfaccia 2026 (v2, mobile-first)

   Nessuna dipendenza: sostituisce bootstrap, isotope e il tema "puzzles".
   Regola guida: nulla di ciò che serve per usare il sito dipende dall'hover,
   perché su telefono e tablet l'hover non esiste.
   ========================================================================== */

:root {
  --sfondo:      #0e1116;
  --sfondo-2:    #161b22;
  --sfondo-3:    #1e242e;
  --bordo:       #262d38;
  --testo:       #e8eaed;
  --testo-tenue: #98a1ae;
  --accento:     #e2342b;

  --raggio:   14px;
  --raggio-s: 9px;
  --ombra:    0 10px 30px rgba(0, 0, 0, .45);
  --transizione: .22s cubic-bezier(.4, 0, .2, 1);

  /* Barra più compatta sul telefono, dove lo spazio verticale conta */
  --topbar-h: 54px;

  /* Ritagli di iPhone/Android con notch e barra gestuale */
  --sicuro-top:    env(safe-area-inset-top, 0px);
  --sicuro-bottom: env(safe-area-inset-bottom, 0px);
  --sicuro-left:   env(safe-area-inset-left, 0px);
  --sicuro-right:  env(safe-area-inset-right, 0px);
}

@media (min-width: 700px) {
  :root { --topbar-h: 60px; }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* niente ingrandimenti automatici in landscape */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: calc(var(--topbar-h) + var(--sicuro-top));
  background: var(--sfondo);
  color: var(--testo);
  font-family: 'Oxygen', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;              /* mai sotto i 16px: sotto, iOS zooma sugli input */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

/* Blocco dello scroll di fondo quando il menu è aperto.
   Su iOS `overflow:hidden` sul body non basta: il JS fissa la posizione. */
body.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding-left:  max(clamp(12px, 3vw, 32px), var(--sicuro-left));
  padding-right: max(clamp(12px, 3vw, 32px), var(--sicuro-right));
}

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--accento); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: calc(var(--topbar-h) + var(--sicuro-top));
  padding-top: var(--sicuro-top);
  padding-left:  max(8px, var(--sicuro-left));
  padding-right: max(8px, var(--sicuro-right));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(14, 17, 22, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo);
}

.topbar__brand {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 6px;
}
.topbar__brand img { height: 26px; width: auto; }
@media (min-width: 700px) { .topbar__brand img { height: 30px; } }

/* 44x44 è la dimensione minima raccomandata per un bersaglio toccabile */
.topbar__btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: none; border: 0; border-radius: 50%;
  color: var(--testo); font-size: 19px; cursor: pointer;
  transition: background var(--transizione);
  touch-action: manipulation;
}
.topbar__btn:active { background: var(--sfondo-3); }
@media (hover: hover) { .topbar__btn:hover { background: var(--sfondo-3); } }

.hamburger { display: grid; gap: 5px; width: 20px; }
.hamburger span { display: block; height: 2px; border-radius: 2px; background: currentColor; }

/* ==========================================================================
   Menu a comparsa
   ========================================================================== */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity var(--transizione);
}
.drawer-backdrop.visibile { opacity: 1; }

.drawer {
  position: fixed; z-index: 80;
  top: 0; left: 0;
  height: 100vh;
  height: 100dvh;               /* segue la barra del browser mobile che compare e sparisce */
  width: min(380px, 90vw);
  display: flex; flex-direction: column;
  background: var(--sfondo-2);
  border-right: 1px solid var(--bordo);
  box-shadow: var(--ombra);
  transform: translateX(-102%);
  transition: transform var(--transizione);
  visibility: hidden;
}
.drawer.aperto { transform: none; visibility: visible; }

/* Durante il trascinamento con il dito la transizione va disattivata,
   altrimenti il pannello insegue il dito in ritardo. */
.drawer.in-trascinamento { transition: none; }

.drawer__head {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--sicuro-top));
  padding: var(--sicuro-top) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--bordo);
}

.drawer__close {
  width: 46px; height: 46px;
  background: none; border: 0; border-radius: 50%;
  color: var(--testo-tenue); font-size: 19px; cursor: pointer;
  touch-action: manipulation;
}
.drawer__close:active { background: var(--sfondo-3); color: var(--testo); }

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* lo scroll del menu non trascina la pagina sotto */
  padding: 18px 16px calc(32px + var(--sicuro-bottom));
}

.drawer__sezione { margin-top: 26px; }

.drawer__titolo {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--testo-tenue);
}

/* ----- Ricerca ----- */

.ricerca { display: flex; gap: 8px; }

.ricerca__campo {
  flex: 1 1 auto; min-width: 0;
  height: 48px; padding: 0 16px;
  background: var(--sfondo-3);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--testo);
  font: inherit; font-size: 16px;   /* 16px esatti: evita lo zoom automatico di Safari iOS */
  transition: border-color var(--transizione);
}
.ricerca__campo::placeholder { color: var(--testo-tenue); }
.ricerca__campo:focus { border-color: var(--accento); outline: none; }

.ricerca__btn {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  background: var(--accento); border: 0; border-radius: 50%;
  color: #fff; font-size: 17px; cursor: pointer;
  touch-action: manipulation;
}
.ricerca__btn:active { filter: brightness(.9); }

/* ----- Chip / tag di tipologia ----- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center;
  min-height: 42px;                 /* comodo da colpire con il pollice */
  padding: 0 16px;
  background: var(--sfondo-3);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 14.5px; line-height: 1.2;
  color: var(--testo);
  touch-action: manipulation;
  transition: background var(--transizione), border-color var(--transizione);
}
.chip:active { background: #333c4a; }
@media (hover: hover) { .chip:hover { background: #2b3340; } }

.chip--attivo {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff; font-weight: 700;
}

/* ----- Elenco "Più visti" ----- */

.visti { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.visti__link {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px; align-items: center;
  min-height: 64px;
  padding: 6px; border-radius: var(--raggio-s);
  touch-action: manipulation;
}
.visti__link:active { background: var(--sfondo-3); }
@media (hover: hover) { .visti__link:hover { background: var(--sfondo-3); } }

.visti__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: 7px; overflow: hidden;
  background: var(--sfondo-3);
}
.visti__thumb img { width: 100%; height: 100%; object-fit: cover; }

.visti__durata {
  position: absolute; right: 4px; bottom: 4px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .78);
  font-size: 10.5px; font-style: normal; font-weight: 700; color: #fff;
}

.visti__testo { min-width: 0; display: block; }

.visti__titolo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px; font-weight: 700; line-height: 1.3;
}

.visti__viste {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--testo-tenue);
}

/* ==========================================================================
   Contenuto
   ========================================================================== */

main { padding: 20px 0 48px; }
@media (min-width: 700px) { main { padding: 28px 0 64px; } }

.pagina__titolo {
  margin: 0 0 18px;
  font-size: clamp(19px, 4.6vw, 28px);
  font-weight: 700; letter-spacing: -.01em;
}

.vuoto { padding: 48px 0; text-align: center; color: var(--testo-tenue); }

/* ----- Griglia -----
   Telefono stretto: una colonna (anteprima grande, titolo leggibile).
   Telefono normale: due colonne. Tablet: tre o quattro. Desktop: a riempimento. */

.griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 390px) {
  .griglia { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (min-width: 700px) {    /* tablet verticale */
  .griglia { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {   /* tablet orizzontale e desktop */
  .griglia { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
@media (min-width: 1400px) {
  .griglia { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 18px; }
}

/* ----- Card ----- */

.v-card {
  position: relative;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--sfondo-2);
  animation: entra .35s ease both;
}

/* Le tile larghe dell'impaginazione originale (o_larghezza > 1).
   Su griglia a colonna singola non hanno senso: attive da 390px in su. */
@media (min-width: 390px) {
  .v-card--wide { grid-column: span 2; }
  .v-card--wide .v-card__thumb { aspect-ratio: 2 / 1; }
}

@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.v-card__link {
  display: block; height: 100%;
  touch-action: manipulation;     /* elimina il ritardo di 300 ms al tocco */
}

.v-card__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sfondo-3);
  overflow: hidden;
}
/* A colonna singola il quadrato pieno occupa troppo schermo: 4/3 */
@media (max-width: 389px) {
  .v-card__thumb { aspect-ratio: 4 / 3; }
}

.v-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

/* Velo scuro: rende leggibile il testo sovrapposto su qualunque anteprima */
.v-card__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .92) 0%,
              rgba(0, 0, 0, .62) 28%,
              rgba(0, 0, 0, .08) 60%,
              rgba(0, 0, 0, .30) 100%);
}

/* Feedback al tocco: la card si abbassa mentre il dito è premuto */
.v-card__link:active { transform: scale(.985); transition: transform .1s; }

@media (hover: hover) and (pointer: fine) {
  .v-card:hover .v-card__thumb img { transform: scale(1.06); }
}

/* --- Oggetti sovrapposti --- */

.v-card__cat {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accento, #2a2f3a);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.v-card__durata {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .74);
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #fff;
}

/* Il simbolo del play resta sempre visibile: sul touch non c'è hover e senza
   di esso una card non si distingue da un'immagine qualsiasi. */
.v-card__play {
  position: absolute; z-index: 2;
  top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, .5);
  color: #fff;
  opacity: .92;
  transition: opacity var(--transizione), scale var(--transizione), background var(--transizione);
}
@media (hover: hover) and (pointer: fine) {
  .v-card__play { opacity: 0; scale: .82; }
  .v-card:hover .v-card__play,
  .v-card__link:focus-visible .v-card__play {
    opacity: 1; scale: 1; background: rgba(255, 255, 255, .18);
  }
}

.v-card__overlay {
  position: absolute; z-index: 2;
  inset: auto 0 0 0;
  padding: 12px;
  display: grid; gap: 4px;
}
@media (min-width: 700px) { .v-card__overlay { padding: 14px; } }

.v-card__titolo {
  margin: 0;
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 700px) { .v-card__titolo { font-size: 15.5px; } }
@media (max-width: 389px) { .v-card__titolo { font-size: 16.5px; -webkit-line-clamp: 3; } }
.v-card--wide .v-card__titolo { font-size: 18px; }

.v-card__meta {
  margin: 0;
  font-size: 11.5px; line-height: 1.35;
  color: rgba(255, 255, 255, .74);
}
.v-sep { opacity: .5; }

/* Descrizione: con il mouse si apre al passaggio; su tablet è mostrata
   direttamente; sul telefono resta fuori per non coprire l'anteprima
   (titolo e dati bastano a decidere se aprire il video). */
.v-card__descr {
  margin: 0;
  font-size: 12.5px; line-height: 1.4;
  color: rgba(255, 255, 255, .8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 699px) {
  .v-card__descr { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .v-card__descr {
    max-height: 0; opacity: 0;
    -webkit-line-clamp: 3;
    transition: max-height var(--transizione), opacity var(--transizione);
  }
  .v-card:hover .v-card__descr,
  .v-card__link:focus-visible .v-card__descr { max-height: 5.2em; opacity: 1; }
}

/* Barra colore della card (campo o_fondo) */
.v-card::after {
  content: '';
  position: absolute; z-index: 3; inset: auto 0 0 0;
  height: 3px; background: var(--accento); opacity: .9;
}

.v-card--promo .v-card__thumb::after { background: none; }

/* ----- Skeleton di caricamento ----- */

.skeleton {
  border-radius: var(--raggio);
  aspect-ratio: 1 / 1;
  background: linear-gradient(100deg, var(--sfondo-2) 30%, var(--sfondo-3) 50%, var(--sfondo-2) 70%);
  background-size: 220% 100%;
  animation: pulsa 1.2s ease-in-out infinite;
}
@media (max-width: 389px) { .skeleton { aspect-ratio: 4 / 3; } }

@keyframes pulsa {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}

/* ----- Fine lista / caricamento ----- */

.fine {
  min-height: 70px;
  display: grid; place-items: center;
  padding: 30px 0 10px;
}

.caricamento {
  display: flex; align-items: center; gap: 10px;
  color: var(--testo-tenue); font-size: 14px;
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--bordo);
  border-top-color: var(--accento);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.btn-altro {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 28px;
  background: var(--sfondo-3);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--testo); font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.btn-altro:active { background: #333c4a; }

/* ==========================================================================
   Footer + torna su
   ========================================================================== */

.piede {
  border-top: 1px solid var(--bordo);
  background: var(--sfondo-2);
  padding: 24px 0 calc(24px + var(--sicuro-bottom));
  color: var(--testo-tenue); font-size: 13px;
}
.piede__inner { display: flex; justify-content: center; text-align: center; }

.su {
  position: fixed; z-index: 50;
  right: max(16px, var(--sicuro-right));
  bottom: calc(16px + var(--sicuro-bottom));
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(30, 36, 46, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bordo);
  border-radius: 50%;
  color: var(--testo); font-size: 21px; cursor: pointer;
  box-shadow: var(--ombra);
  touch-action: manipulation;
}
.su:active { background: var(--sfondo-3); }

/* ==========================================================================
   Preferenze di sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v-card, .skeleton, .spinner { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .topbar, .drawer, .drawer-backdrop, .su, .fine { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
}

/* ==========================================================================
   Scheda video
   ========================================================================== */

.scheda { padding-top: 0; }

/* Fascia scura a tutta larghezza dietro al player: su telefono il video
   arriva ai bordi, da tablet in su resta dentro la colonna con i suoi angoli. */
.player-fascia {
  background: #000;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .player-fascia { background: transparent; padding-top: 22px; }
}

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
@media (min-width: 700px) {
  .player {
    border-radius: var(--raggio);
    /* Sul portatile il 16:9 a piena larghezza spinge titolo e dati fuori
       schermo: il video non supera i tre quarti dell'altezza utile. */
    max-height: 76dvh;
    margin: 0 auto;
    width: auto;
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
}

/* Sul telefono in orizzontale il player prende tutta l'altezza disponibile */
@media (max-width: 699px) and (orientation: landscape) {
  .player { aspect-ratio: auto; height: calc(100dvh - var(--topbar-h) - var(--sicuro-top)); }
}

.player__video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

/* Pulsante di ingrandimento: i controlli nativi ne hanno già uno, ma su
   iOS in-app e su alcuni Android è nascosto o minuscolo. */
.player__fs {
  position: absolute; z-index: 3;
  top: 10px; right: 10px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  color: #fff; font-size: 16px; cursor: pointer;
  opacity: .85;
  touch-action: manipulation;
}
.player__fs:active { opacity: 1; background: rgba(0, 0, 0, .75); }

/* A tutto schermo il contenitore riempie lo schermo e il pulsante cambia icona */
.player:fullscreen,
.player:-webkit-full-screen {
  width: 100vw; height: 100vh;
  max-height: none; aspect-ratio: auto; border-radius: 0;
}
.player:fullscreen .player__video { object-fit: contain; }

/* ----- Testa della scheda ----- */

.scheda__testa { padding-bottom: 8px; }

.scheda__indietro {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  font-size: 14px; color: var(--testo-tenue);
}
.scheda__indietro:active { color: var(--testo); }

.scheda__sezione {
  display: inline-block; margin: 6px 0 10px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accento); color: #fff;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}

.scheda__titolo {
  margin: 0 0 12px;
  font-size: clamp(20px, 5.2vw, 32px);
  font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
}

.scheda__dati {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 13.5px; color: var(--testo-tenue);
}
.scheda__dati li { display: inline-flex; align-items: center; gap: 6px; }

.scheda__azioni {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}

.azione {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  background: var(--sfondo-3);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--testo); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.azione:active { background: #333c4a; }
@media (hover: hover) { .azione:hover { background: #2b3340; } }

.scheda__info {
  max-width: 78ch;
  margin-bottom: 18px;
  font-size: 15.5px; line-height: 1.65;
  color: #cdd3dc;
}
/* Il contenuto di `info` arriva dalla redazione con marcatori propri:
   qui si dà una forma coerente a tutto ciò che può contenere. */
.scheda__info p { margin: 0 0 1em; }
.scheda__info p:last-child { margin-bottom: 0; }

.scheda__info h2,
.scheda__info h3,
.scheda__info h4,
.scheda__info h5 {
  margin: 1.4em 0 .5em;
  font-size: 1.08em; font-weight: 700; line-height: 1.3;
  color: var(--testo);
}

.scheda__info a {
  color: #ff8a83;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.scheda__info a:hover { color: #fff; }

.scheda__info ul,
.scheda__info ol { margin: 0 0 1em; padding-left: 1.4em; }
.scheda__info li { margin-bottom: .35em; }

.scheda__info blockquote {
  margin: 1.2em 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accento);
  color: var(--testo-tenue); font-style: italic;
}

.scheda__info hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--bordo); }
.scheda__info strong, .scheda__info b { color: var(--testo); }
.scheda__info img { margin: 1em 0; border-radius: var(--raggio-s); }

.scheda__tag {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--bordo);
}
/* Ogni tag è un collegamento indipendente verso la ricerca:
   deve staccarsi visivamente dai vicini e reggere il tocco del pollice. */
.chip--tag {
  min-height: 40px;
  font-size: 13.5px;
  color: var(--testo-tenue);
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}
.chip--tag:active { background: #333c4a; color: var(--testo); }
@media (hover: hover) {
  .chip--tag:hover { border-color: var(--accento); color: var(--testo); }
}

.correlati { padding-top: 28px; }
.correlati .pagina__titolo { font-size: clamp(17px, 3.4vw, 21px); }

/* Messaggio di conferma della copia del link */
.brindisi {
  position: fixed; z-index: 90;
  left: 50%; translate: -50% 0;
  bottom: calc(24px + var(--sicuro-bottom));
  padding: 12px 20px;
  background: var(--sfondo-3);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 14px; color: var(--testo);
  box-shadow: var(--ombra);
  opacity: 0; transition: opacity var(--transizione);
  pointer-events: none;
}
.brindisi.visibile { opacity: 1; }