/* ============================================================
   Quello che la scuola vuole in evidenza, nella prima schermata
   ------------------------------------------------------------
   Regole di casa rispettate: un solo rosso, raggi nativi del tema (4px),
   movimento solo su `transform` e `opacity`, tutto spento con
   `prefers-reduced-motion`. L'unica sfumatura del file e' il velo scuro sotto il
   testo sopra una fotografia, che non e' decorazione: e' quello che rende
   leggibile il bianco su un'immagine qualunque.
   Il riquadro resta `.hero-img`: posizione e misure sono quelle del tema padre
   (destra 50% e alta quanto il hero da 768px in su; a schermo stretto diventa
   una fascia larga tutto lo schermo). Non si toccano.

   🔴 RIFATTO L'11/09/2026, E IL PERCHE' STA NEI NUMERI
   Prima ogni diapositiva aveva per sfondo la fotografia dell'edificio, e siccome
   zero contenuti su 35 hanno una foto propria (misurato), tutte e sei mostravano
   la stessa fotografia mentre scorrevano solo i titoli. La fotografia e' via.
   Ora la diapositiva ha tre forme, e il disegno segue quello che c'e':
     .f2-hcar-slide--foto       immagine vera, a tutto pannello, testo su velo scuro
     .f2-hcar-slide--locandina  copertina quadrata appoggiata intera su fondo chiaro
     .f2-hcar-slide--nuda       nessuna figura: il solo cartello
   ============================================================ */

.f2-hcar {
  overflow: hidden;
  /* Fondo chiaro e non piu' il rosso: e' quello che si vede mentre l'immagine
     arriva, e su una locandina appoggiata il rosso sarebbe un lampo fuori posto. */
  background-color: #e9ebed;
}

/* splide deve riempire il riquadro: le sue tre scatole non hanno altezza propria. */
.f2-hcar .splide,
.f2-hcar .splide__track,
.f2-hcar .splide__list,
.f2-hcar .splide__slide {
  height: 100%;
}

/* 🔴 QUI L'IMBOTTITURA DEI CAROSELLI VA TOLTA, non ereditata.
   Misurato il 10/09/2026 sul sito: `custom.css` da' a OGNI `.splide__track` una
   imbottitura di 30px sopra e 46 sotto, con i margini negativi che la compensano
   (serve perche' l'ombra delle schede dentro i caroselli non venga mozzata dal
   ritaglio del track). Qui dentro non ci sono schede sollevate e non c'e' nessuna
   ombra da salvare: quell'imbottitura toglieva 76px dei 480 del riquadro, e si
   vedeva: una fascia rossa vuota sotto la fotografia, il comando di pausa spinto
   30px sopra il bordo del hero, addosso al menu.
   Imbottitura E margine si dichiarano INSIEME e con la stessa specificita' (e' la
   lezione scritta in `custom.css`: separarli trasforma il compenso in uno
   spostamento). La regola generale vale 0,2,0 (`.splide .splide__track`), questa
   0,3,0: vince per specificita', senza `!important` e senza toccare gli altri
   caroselli del sito. */
.f2-hcar .splide .splide__track {
  padding-top: 0;    margin-top: 0;
  padding-bottom: 0; margin-bottom: 0;
}
.f2-hcar .splide__slide {
  padding: 0; /* `scuole.css` mette 2px a ogni slide: qui sarebbe un filo al bordo */
}

/* Prima che splide si monti (o se il JS non parte) le diapositive sarebbero
   incolonnate una sotto l'altra: si mostra solo la prima. */
.f2-hcar .splide:not(.is-active) .splide__list {
  display: block;
}
.f2-hcar .splide:not(.is-active) .splide__slide + .splide__slide {
  display: none;
}

/* ---- la diapositiva: una colonna, la figura sopra e il cartello sotto ---- */
.f2-hcar-slide {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 270px;
  text-decoration: none !important; /* il tema sottolinea ogni collegamento */
  color: inherit;
}

/* ---- la figura ---- */
.f2-hcar-sfondo {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  /* `contain` e non `cover`: la copertina e' un quadrato col segno al centro, e
     ritagliandola il segno perde la base. Provato sul provino: la campanella e il
     gufo restavano mozzati dal cartello. */
  background-size: contain;
  margin: 22px 22px 0;
  transform: scale(1);
  transition: transform .5s var(--f2-ease, ease);
}
.f2-hcar-slide:hover .f2-hcar-sfondo,
.f2-hcar-slide:focus-visible .f2-hcar-sfondo {
  transform: scale(1.03);
}

/* ---- il cartello: una fascia sotto, larga quanto il pannello ---- */
.f2-hcar-cartello {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: block;
  padding: 14px 22px 16px;
  background: #fff;
  /* Il filo rosso lega la fascia al colore dell'istituto senza ripeterne il
     pannello: e' un accenno, non una seconda meta' rossa. */
  border-top: 3px solid var(--f2-acc, #d8333a);
}

/* ============================================================
   LA LOCANDINA APPOGGIATA (il caso di oggi: copertine generate)
   ============================================================ */
.f2-hcar-slide--locandina,
.f2-hcar-slide--nuda {
  background: #e9ebed;
}
/* L'ombra fa la differenza fra una locandina APPOGGIATA e una stampata sul fondo: e'
   l'unica cosa che dice all'occhio che sono due piani diversi. Non e' decorazione, e usa
   la stessa ombra del tema. */
.f2-hcar-slide--locandina .f2-hcar-sfondo {
  box-shadow: var(--f2-shadow, 0 18px 36px -22px rgba(15, 15, 40, .3));
}
/* 🔴 IL CONTORNO DEL FUOCO CAMBIA COLORE CON IL FONDO.
   Sul velo scuro della fotografia il bianco e' l'unica scelta leggibile; sul fondo
   chiaro della locandina un contorno bianco sarebbe invisibile, ed e' esattamente
   il difetto che avevo gia' commesso una volta col rimando «Leggi» bianco su
   bianco. Qui il contorno e' scuro. */
.f2-hcar .splide .f2-hcar-slide--locandina:focus-visible,
.f2-hcar .splide .f2-hcar-slide--nuda:focus-visible {
  outline: 3px solid #17324d !important;
  outline-offset: -3px !important;
}

/* ============================================================
   LA FOTOGRAFIA A TUTTO PANNELLO (il caso del giorno in cui
   la segreteria carica una locandina vera)
   ============================================================ */
.f2-hcar-slide--foto {
  background: #0a1420;
}
.f2-hcar-slide--foto .f2-hcar-sfondo {
  position: absolute;
  z-index: -1;
  inset: 0;
  margin: 0;
  background-size: cover;
}
.f2-hcar-slide--foto .f2-hcar-cartello {
  margin-top: auto;
  padding-top: 58px;
  background: transparent;
  border-top: 0;
  /* Il velo: serve a far stare il bianco sopra un'immagine qualunque, anche chiara.
     Verificato il contrasto dopo, non prima. */
  background-image: linear-gradient(to top, rgba(10, 20, 32, .90), rgba(10, 20, 32, .55) 58%, rgba(10, 20, 32, 0));
}
.f2-hcar-slide--foto .f2-hcar-occhiello {
  color: rgba(255, 255, 255, .90);
}
.f2-hcar-slide--foto .f2-hcar-titolo {
  color: #fff;
}
.f2-hcar-slide--foto .f2-hcar-cartello .f2-hcar-leggi,
.f2-hcar-slide--foto .f2-hcar-cartello .read-more {
  color: #fff;
}
/* 🔴 IL CONTORNO DEL FUOCO DEVE CADERE DENTRO IL RIQUADRO, NON FUORI.
   Misurato il 10/09/2026 contando i pixel bianchi sulle schermate: col link a fuoco,
   pixel cambiati fuori dal riquadro ZERO su 4620. Due cause sovrapposte: il tema padre
   dichiara `outline: 2px solid #fff !important; outline-offset: 3px` in `scuole.css` e
   batteva la regola qui sotto, e `.splide__track` e `.hero-img` hanno `overflow: hidden`
   con lo stesso rettangolo della diapositiva, quindi un contorno spostato in FUORI
   viene ritagliato e non si dipinge mai. Chi naviga da tastiera non vedeva dove si
   trovava (l'ingrandimento del 3% della figura non e' un indicatore di fuoco: e'
   identico al passaggio del mouse).
   Serve `!important` perche' ce l'ha il padre, e l'offset NEGATIVO perche' il ritaglio
   non lascia scampo. Controprova del rilevatore: lo stesso conteggio trovava 4620 pixel
   bianchi nella fascia dell'intestazione e 7098 pixel cambiati per il fuoco sul comando
   di pausa, quindi lo zero era una misura e non l'assenza di una misura. */
.f2-hcar .splide .f2-hcar-slide--foto:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: -3px !important;
}

/* ---- il testo del cartello ---- */
.f2-hcar-occhiello {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f2-acc-scuro, #af2127);
}
.f2-hcar-punto {
  padding: 0 .2em;
  /* Niente `opacity`: a .7 il puntino misurava 3,86:1 su bianco. E' decorativo e
     nascosto ai lettori di schermo, ma resta testo che si vede. */
}
.f2-hcar-titolo {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.28;
  color: #1b1b2b;
  /* due righe: il cartello e' una fascia di altezza fissa, e la terza riga spingeva
     la figura sotto il bordo del pannello. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 🔴 IL CARTELLO E' UNA SUPERFICIE BIANCA DENTRO UNA SEZIONE BIANCA SU ROSSO:
   deve dichiarare TUTTI i suoi colori, nessuno escluso.
   Misurato il 10/09/2026: il rimando «Leggi» usciva `rgb(255,255,255)`, bianco su
   bianco, invisibile: ereditava il `color:#fff` di `.section-hero-left`. Occhiello e
   titolo erano giusti solo perche' il loro colore era dichiarato: quello che si
   dimentica di dichiarare, qui dentro, diventa invisibile.
   La freccetta del tema padre non si puo' riusare: `f2-rosso-unico.css` riga 293 ha una
   regola guasta (`a.read-more:before{'/><path d='…`, il generatore ha troncato il
   `content:url()` dentro l'SVG) e il segno risulta `content: none`. Qui si disegna con
   due bordi, che seguono `currentColor` e non dipendono da quel file. */
.f2-hcar-cartello .f2-hcar-leggi,
.f2-hcar-cartello .read-more {
  display: inline-block;
  padding-right: 0;
  color: var(--f2-acc-scuro, #af2127);
  text-decoration: none;
}
.f2-hcar-cartello .read-more::before {
  content: none; /* la freccia del padre e' guasta: non se ne lascia lo spazio vuoto */
}
.f2-hcar-cartello .f2-hcar-leggi::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 1px 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s var(--f2-ease, ease);
}
.f2-hcar-slide:hover .f2-hcar-leggi,
.f2-hcar-slide:focus-visible .f2-hcar-leggi {
  text-decoration: underline;
}
.f2-hcar-slide:hover .f2-hcar-leggi::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* ---- il comando per fermare lo scorrimento ---- */
.f2-hcar-pausa {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  /* 🔴 IL BORDO DEVE ARRIVARE A 3:1 CONTRO IL FONDO, non solo essere «visibile».
     Misurato dopo aver cambiato la pelle del pulsante da scura a chiara: con
     `rgba(23,50,77,.28)` il bordo composito faceva **1,7** contro il fondo chiaro
     `#e9ebed`, e il criterio 1.4.11 delle WCAG chiede 3 per il contorno di un comando.
     Un pulsante bianco al 94% su un grigio chiarissimo, col bordo appena accennato, e'
     un pulsante di cui non si vede il bordo.
     Poi, passando al bianco PIENO, `.55` e' tornato sotto soglia (2,81: il bordo composita
     su bianco e non piu' sul grigio, quindi schiarisce). A `.65` fa **3,70** contro il
     fondo chiaro e 4,43 contro il bianco del pulsante: sopra soglia da entrambi i lati.
     E' la seconda volta che questo numero cambia perche' ho cambiato il fondo: il
     contrasto di un bordo non si eredita, si rimisura ogni volta.
     (Il testo invece era gia' a posto: navy su bianco-94%-sopra-rosso da' 12,06, e sopra
     una locandina verde 12,18. Il difetto era solo il contorno.) */
  border: 1px solid rgba(23, 50, 77, .65);
  border-radius: 4px;
  /* Bianco PIENO, non al 94%. Una pelle sola che tiene su qualunque fondo: sul grigio
     chiaro della locandina, sopra una fotografia chiara e sopra una scura. Il primo
     tentativo aveva due pelli, una chiara e una scura scelta con `:has()` in base alla
     diapositiva attiva: provato, non si applicava, e comunque legare l'aspetto di un
     comando allo stato del carosello e' fragile per niente. Con il bianco pieno il
     contrasto del testo non dipende piu' da che cosa c'e' sotto. */
  background: #fff;
  color: #17324d;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s var(--f2-ease, ease);
}
.f2-hcar-pausa:hover,
.f2-hcar-pausa:focus-visible {
  background: #fff;
  border-color: #17324d;
}

.f2-hcar-pausa:focus-visible {
  outline: 3px solid #17324d;
  outline-offset: 2px;
}
.f2-hcar-pausa-icona {
  width: 10px;
  height: 12px;
  flex: 0 0 10px;
  /* due barrette = in pausa si puo' fare; diventa un triangolo quando e' fermo */
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.f2-hcar-pausa[aria-pressed="true"] .f2-hcar-pausa-icona {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}
/* ---- i pallini di splide ---- */
/* 🔴 I PALLINI STANNO NELLA FASCIA BIANCA, non sul fondo chiaro accanto alla locandina.
   Misurato: a 768 il pannello e' largo 384 e la locandina 348, quindi il margine chiaro
   e' 18px per lato, e i pallini messi a `right: 18px` cadevano SOPRA la locandina. Nella
   fascia non collidono con niente a nessuna larghezza, e restano vicini al «Leggi», che
   e' dove l'occhio sta gia' guardando. */
.f2-hcar .splide__pagination {
  position: absolute;
  z-index: 2;
  top: auto;
  bottom: 17px;
  right: 22px;
  left: auto;
  width: auto;
  padding: 0;
  margin: 0;
  gap: 6px;
}
/* 🔴 TRE CLASSI, non due, e non e' pedanteria.
   Misurato il 10/09/2026: `custom.css` stila i pallini con
   `.splide .splide__pagination .splide__pagination__page` (specificita' 0,3,0) per il
   fondo BIANCO delle sezioni. La mia regola valeva 0,2,0 e perdeva il duello in
   silenzio: i pallini restavano quadrati 12x12 e `rgb(217,218,219)`, cioe' grigio
   chiarissimo sopra una fotografia chiara. Lo stile qui sotto sembrava applicato e non
   lo era. E' lo stesso duello dell'imbottitura del track: quando si scrive sopra
   `custom.css`, la specificita' si conta, non si spera. */
.f2-hcar .splide .splide__pagination .splide__pagination__page {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 50%;
  background: rgba(23, 50, 77, .26);
  border: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: width .2s var(--f2-ease, ease), background-color .2s ease;
}
/* Il segno resta piccolo, il BERSAGLIO diventa 24x24: le WCAG 2.2 (2.5.8) chiedono
   almeno 24 e il pallino misura 10. Si allarga l'area da toccare con un riquadro
   trasparente, senza ingrossare il segno e senza spostare niente. */
.f2-hcar .splide .splide__pagination .splide__pagination__page::after {
  content: "";
  position: absolute;
  inset: -7px;
}
.f2-hcar .splide .splide__pagination .splide__pagination__page.is-active {
  background: var(--f2-acc, #d8333a);
  /* il segno attivo si allunga: si riconosce anche senza distinguere i colori */
  width: 22px;
  border-radius: 5px;
  transform: none;
}
.f2-hcar .splide .splide__pagination .splide__pagination__page:focus-visible {
  outline: 3px solid #17324d;
  outline-offset: 3px;
}

/* ---- schermi stretti ---- */
@media (max-width: 991.98px) {
  .f2-hcar-sfondo {
    margin: 18px 18px 0;
  }
  .f2-hcar-cartello {
    padding: 13px 18px 14px;
  }
  .f2-hcar .splide__pagination {
    bottom: 15px;
    right: 18px;
  }
}

/* Sul telefono il pannello e' largo e basso (390x270): una locandina quadrata
   centrata sarebbe minuscola con due fasce di vuoto ai lati. Si mette di fianco al
   testo, che e' l'uso giusto di un riquadro orizzontale. */
@media (max-width: 575.98px) {
  .f2-hcar-slide--locandina,
  .f2-hcar-slide--nuda {
    flex-direction: row;
    align-items: stretch;
  }
  .f2-hcar-slide--locandina .f2-hcar-sfondo {
    flex: 0 0 40%;
    margin: 16px 0 16px 16px;
  }
  .f2-hcar-slide--locandina .f2-hcar-cartello,
  .f2-hcar-slide--nuda .f2-hcar-cartello {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border-top: 0;
    border-left: 3px solid var(--f2-acc, #d8333a);
    margin: 16px 0;
    padding: 0 16px;
  }
  .f2-hcar .splide__pagination {
    top: auto;
    bottom: 10px;
    right: 14px;
  }
  /* Il comando di pausa resta un simbolo: la scritta larga 176px su 390 si mangiava
     mezzo pannello. Il nome per chi usa un lettore di schermo NON si perde: il testo
     resta nella pagina, solo fuori dalla vista (`clip`), che e' il modo in cui il nome
     accessibile del bottone continua a esistere. */
  .f2-hcar-pausa {
    padding: 9px 11px;
  }
  .f2-hcar-pausa-testo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- SULLA CARTA ----
   Misurato il 10/09/2026 con `Emulation.setEmulatedMedia: print`: in stampa il ritaglio
   del carosello cade e si stampavano NOVE riquadri da 480px uno sotto l'altro (le cinque
   notizie piu' le copie che splide crea per il ciclo). In stampa resta la prima, e i
   comandi, che su carta non si possono premere, sparisce ognuno. */
@media print {
  .f2-hcar .splide__list {
    display: block;
  }
  .f2-hcar .splide__slide:not(:first-child),
  .f2-hcar .splide__slide.is-clone,
  .f2-hcar-pausa,
  .f2-hcar .splide__pagination {
    display: none !important;
  }
  .f2-hcar-cartello {
    background: #fff !important;
    background-image: none !important;
    border-top: 1px solid #999;
    padding-top: 12px !important;
  }
  .f2-hcar-slide--foto .f2-hcar-occhiello,
  .f2-hcar-slide--foto .f2-hcar-titolo,
  .f2-hcar-slide--foto .f2-hcar-cartello .f2-hcar-leggi {
    color: #1b1b2b !important;
  }
  .f2-hcar-sfondo {
    display: none; /* le figure di sfondo non si stampano (foglio di stampa del sito) */
  }
}

/* ---- chi ha chiesto di non vedere animazioni ---- */
@media (prefers-reduced-motion: reduce) {
  .f2-hcar-sfondo,
  .f2-hcar-cartello,
  .f2-hcar-pausa,
  .f2-hcar .splide .splide__pagination .splide__pagination__page,
  .f2-hcar-cartello .f2-hcar-leggi::after {
    transition: none !important;
  }
  .f2-hcar-slide:hover .f2-hcar-leggi::after {
    transform: rotate(45deg);
  }
  .f2-hcar-slide:hover .f2-hcar-sfondo,
  .f2-hcar-slide:focus-visible .f2-hcar-sfondo {
    transform: none;
  }
}

/* ============================================================
   IL COLORE DELLA FASCIA SEGUE LA SEZIONE A CUI PORTA
   ============================================================
   Prima la fascia era sempre rossa, cioè il colore della Scuola, anche quando la
   diapositiva portava a un evento (Novità, verde) o a una scheda didattica (blu):
   chi cliccava cambiava colore a metà strada, e su questo sito il colore È
   l'informazione che dice in che sezione si sta.

   Non si scrivono regole nuove per la fascia, per l'occhiello e per il «Leggi»:
   quelle usano già `var(--f2-acc)` e `var(--f2-acc-scuro)`. Qui si ridefiniscono
   le due variabili sulla diapositiva, e tutto quello che le legge si adegua da
   solo. I valori sono gli stessi di `custom.css`, cioè quelli del modello.
   ============================================================ */
.f2-hcar-slide.f2-hcar-col--greendark {
  --f2-acc: #0e865c;
  --f2-acc-scuro: #0a6847;
}
.f2-hcar-slide.f2-hcar-col--purplelight {
  --f2-acc: #b21dd0;
  --f2-acc-scuro: #8a16a2;
}
.f2-hcar-slide.f2-hcar-col--bluelectric {
  --f2-acc: #0d00ff;
  --f2-acc-scuro: #0a00c6;
}
.f2-hcar-slide.f2-hcar-col--petrol {
  --f2-acc: #51758d;
  --f2-acc-scuro: #3f5b6e;
}
.f2-hcar-slide.f2-hcar-col--redbrown {
  --f2-acc: #d8333a;
  --f2-acc-scuro: #af2127;
}

/* Il pallino attivo sta FUORI dalla diapositiva, quindi non eredita: il colore
   della diapositiva in vista glielo passa il programma, che scrive `--f2-hcar-acc`
   sul carosello a ogni spostamento. Senza programma resta il rosso dell'istituto,
   che è lo stato di prima e non è un guasto. */
.f2-hcar .splide .splide__pagination .splide__pagination__page.is-active {
  background: var(--f2-hcar-acc, var(--f2-acc, #d8333a));
}

/* ============================================================
   COME ENTRA LA DIAPOSITIVA
   ============================================================
   Prima il carosello si limitava a traslare: la diapositiva nuova arrivava tutta
   intera, col testo gia' fermo al suo posto, e il movimento finiva li'. Qui il testo
   entra dopo la figura, sfalsato di poco, e la figura si posa invece di comparire
   ferma. Sono due o tre decimi di secondo in tutto: il registro resta quello di una
   scuola, non quello di una vetrina.

   TRE SCELTE, E IL PERCHE':

   1. `animation`, non `transition`. Una transizione sul `transform` della figura
      batterebbe per specificita' il `:hover` che la ingrandisce del 3%, e l'ingrandimento
      al passaggio del mouse non funzionerebbe piu'. Un'animazione senza riempimento
      (`animation-fill-mode` sta a `none`) governa solo i suoi nove decimi di secondo e poi
      lascia l'elemento allo stato dichiarato, dove il `:hover` torna padrone.

   2. Tutto dentro `prefers-reduced-motion: no-preference`. Chi ha chiesto di non vedere
      animazioni non deve vedersele togliere con una regola che le annulla: non gliele si
      scrive proprio. E' anche l'unico modo per cui non resta niente da disfare.

   3. Solo `transform` e `opacity`, le due sole cose che la scheda grafica fa da sola. Mai
      `width`, `top` o `filter`, che costringono il browser a rifare il calcolo della pagina
      trenta volte al secondo.

   La condizione `.splide.is-active` e' la chiave di sicurezza: quella classe la mette
   splide quando il carosello e' montato davvero. Senza programma non si applica niente,
   e la prima notizia resta ferma e VISIBILE. Un'entrata che parte da `opacity: 0` senza
   quella condizione avrebbe lasciato il riquadro vuoto a chi ha gli script spenti.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .f2-hcar {
    /* La curva: parte decisa e si posa, senza tornare indietro e senza rimbalzi. Un
       rimbalzo qui sembrerebbe un giocattolo. */
    --f2-hcar-curva: cubic-bezier(.32, .72, 0, 1);
  }

  /* `f2-hcar-entra` e non `is-active`: quella classe splide la sposta alla FINE dello
     spostamento, e il testo cominciava a salire quando la diapositiva era gia' ferma.
     La mette il programma all'inizio del movimento. Vedi il commento in f2-hero-notizie.js. */
  .f2-hcar .splide.is-active .splide__slide.f2-hcar-entra .f2-hcar-sfondo {
    animation: f2-hcar-posa .9s var(--f2-hcar-curva);
  }
  .f2-hcar .splide.is-active .splide__slide.f2-hcar-entra .f2-hcar-occhiello {
    animation: f2-hcar-sale .52s var(--f2-hcar-curva) .10s both;
  }
  .f2-hcar .splide.is-active .splide__slide.f2-hcar-entra .f2-hcar-titolo {
    animation: f2-hcar-sale .52s var(--f2-hcar-curva) .17s both;
  }
  .f2-hcar .splide.is-active .splide__slide.f2-hcar-entra .f2-hcar-cartello .f2-hcar-leggi {
    animation: f2-hcar-sale .52s var(--f2-hcar-curva) .24s both;
  }
}

@keyframes f2-hcar-posa {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}
@keyframes f2-hcar-sale {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Provato e buttato: il filo del colore che si tira da sinistra. `clip-path` non sa
   ritagliare il solo bordo, ritaglia l'elemento intero, quindi la striscia scopriva anche
   il titolo mentre il titolo stava gia' salendo per conto suo: due movimenti sullo stesso
   testo nello stesso mezzo secondo. Rifarlo per bene vorrebbe dire togliere il bordo e
   rifare la barra come elemento a parte, e sotto i 576px il filo cambia lato: si rifa' un
   impianto gia' misurato per un guadagno che non c'e'. */