/* ═══════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE DEL PRINCIPALE — i componenti che servono solo qui
   ───────────────────────────────────────────────────────────────────────────
   Si carica dopo ../../Sistema/css/pagina.css, che ha i componenti comuni a
   tutti i siti (apertura compatta, briciole, blocchi, passi, spunte, schede,
   persone, sedi in pagina, dati mancanti). Qui: l'apertura con il colore
   dell'area, l'elenco delle prestazioni, le foto vere dei medici.

   Il colore dell'area (_PROGETTO/03_DIREZIONE_E_MOVIMENTO.md §2) entra solo
   in due posti: l'elemento accento della croce dell'apertura e la tinta
   dell'apertura. Arriva da js/specialita.js come --area e --area-tinta.
   Il pulsante principale resta rosso Centro, anche in Chirurgia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Apertura dell'area: tinta e croce ─────────────────────────────────── */
/* La tinta schiarita: piena, alcune (Chirurgia, Estetica) sono troppo forti
   come fondo di un testo lungo. */
.apertura-area { background: color-mix(in srgb, var(--area-tinta, var(--nl-ghiaccio)) 55%, var(--nl-bianco)); }
.apertura-area::before { background: var(--nl-bianco); opacity: .55; }
.apertura-area .briciole a { color: var(--nl-ink); }
.apertura-sedi { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.apertura-sedi .icona { width: 1.25rem; height: 1.25rem; color: var(--nl-blu-ink); }

/* La croce del marchio: l'elemento azzurro in blu, l'accento nel colore
   dell'area. Le stesse proporzioni di .croce-foto (componenti comuni). */
.croce-area { display: none; position: relative; width: 17rem; aspect-ratio: 1; justify-self: end; }
.croce-area::before, .croce-area::after { content: ""; position: absolute; width: 66.667%; height: 66.667%; }
.croce-area::before {
  left: 0; top: 0; background: var(--nl-blu);
  -webkit-mask: var(--forma-azzurro) center / contain no-repeat; mask: var(--forma-azzurro) center / contain no-repeat;
}
.croce-area::after {
  left: 33.333%; top: 33.333%; background: var(--area, var(--nl-accento));
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
@media (min-width: 64em) {
  .croce-area { display: block; }
  .apertura-area-griglia { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
}

/* Da telefono (12/10, Mauro) le sezioni delle specialità respirano meno: sei
   sezioni con 72px sopra e sotto facevano quasi 900px di solo spazio. Vale solo
   qui; il ritmo delle altre pagine resta quello comune (Sistema/css/token.css). */
@media (max-width: 47.99em) {
  [data-specialita] { --nl-sezione: 3rem; }
  [data-specialita] .sezione .intestazione { margin-bottom: 1.5rem; }
}

/* ── Le prestazioni: una riga ciascuna, «Aggiungi al preventivo» a destra ── */
.prestazioni { max-width: 60rem; }
.prestazioni-lista { display: grid; border-top: 1px solid var(--nl-bordo); }
.prestazione {
  display: grid; gap: .6rem; align-items: center;
  padding-block: 1rem; border-bottom: 1px solid var(--nl-bordo);
}
.prestazione-nome { font-weight: 500; line-height: 1.35; }
.prestazione .pulsante { justify-self: start; }
@media (min-width: 48em) {
  .prestazione { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
  .prestazione .pulsante { justify-self: end; }
}
/* Da telefono (12/10, Mauro): nome e «+» rotondo nella stessa riga; «Aggiungi al
   preventivo» resta per i lettori di schermo, insieme al nome della prestazione. */
@media (max-width: 47.99em) {
  .prestazione { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding-block: .8rem; }
  .prestazione .pulsante { justify-self: end; width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 50%; }
  .prestazione .pulsante > span:not(.visivamente-nascosto) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* In tre gruppi (12/10, Mauro): visite, visita ed esami insieme, esami e
   trattamenti. Le prime di ogni gruppo in vista, le altre con «Mostra tutte». */
.prestazioni { display: grid; gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.prestazioni-gruppo { display: grid; gap: 1rem; }
.prestazioni-gruppo-titolo { font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-blu-ink); }
.prestazione--altra { display: none; }
.prestazioni.is-aperta .prestazione--altra { display: grid; }
/* Cerca fra le prestazioni della branca (12/10, Mauro): il componente comune
   «cerca in pagina» (Sistema/js/interfaccia.js). Mentre si cerca valgono
   tutte le prestazioni, anche quelle oltre le prime di ogni gruppo; un gruppo
   senza risultati sparisce, «Mostra tutte» pure. */
.prestazioni-cerca { margin-top: 0; }
.prestazioni-cerca .cerca-stato { font-weight: 500; color: var(--nl-ink-2); }
.in-ricerca .prestazione--altra { display: grid; }
.in-ricerca .prestazioni-tutte,
.in-ricerca .prestazioni-gruppo:not(:has(.prestazione:not([hidden]))) { display: none; }
.prestazioni-tutte {
  display: inline-flex; align-items: center; justify-self: start; gap: .75rem; padding: .25rem 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--nl-t-voce)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink);
}
.prestazioni-tutte .tondo { transition: transform var(--nl-veloce); }
.prestazioni-tutte[aria-expanded="true"] .tondo { transform: rotate(45deg); }
.prestazioni-tutte-chiudi, .prestazioni-tutte[aria-expanded="true"] .prestazioni-tutte-apri { display: none; }
.prestazioni-tutte[aria-expanded="true"] .prestazioni-tutte-chiudi { display: inline; }
@media (hover: hover) and (pointer: fine) { .prestazioni-tutte:hover span:not(.tondo) { text-decoration: underline; text-underline-offset: .2em; } }

.prestazioni-altre summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.1rem; border-bottom: 1px solid var(--nl-bordo);
  font: 700 var(--nl-t-voce)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink);
  cursor: pointer; list-style: none;
}
.prestazioni-altre summary::-webkit-details-marker { display: none; }
.prestazioni-altre .tondo { transition: transform var(--nl-veloce); }
.prestazioni-altre[open] .tondo { transform: rotate(45deg); }
.prestazioni-altre .prestazioni-lista { border-top: 0; }

.preparazione { display: grid; gap: 1rem; max-width: 44rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: 1.75rem; border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }

/* ── Medici: la foto vera nel cerchio, il segnaposto tratteggiato se manca ─ */
.persona-foto--vera { overflow: hidden; border: 0; background: var(--nl-tinta-blu); }
.persona-foto--vera img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(var(--scala, 1)); }

/* ── Come si prenota ───────────────────────────────────────────────────── */
.prenotare-oppure { margin-top: .5rem; font-weight: 700; }
.revisione { margin-top: .75rem; }
.sezione .mancante + .mancante { margin-top: .75rem; }
.sezione > .contenitore > .mancante { max-width: 46rem; }

/* ── Indici di area: le specialità in righe, su più colonne ─────────────── */
.gruppo-area .gruppo-testa p { max-width: 40rem; }
.righe--colonne { display: grid; column-gap: 2.5rem; border-top: 0; }
.righe--colonne li:first-child { border-top: 1px solid var(--nl-bordo); }
.riga .voce-titolo { font-size: var(--nl-t-voce); line-height: 1.25; }
.riga > span > span { font-size: var(--nl-t-piccolo); }
@media (min-width: 48em) {
  .righe--colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .righe--colonne li:nth-child(2) { border-top: 1px solid var(--nl-bordo); }
}
@media (min-width: 72em) {
  .righe--colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .righe--colonne li:nth-child(3) { border-top: 1px solid var(--nl-bordo); }
}
.gruppo-link { margin-top: 1.25rem; }

/* ── Sedi ──────────────────────────────────────────────────────────────── */
.apertura-indirizzo { font-style: normal; }
.sede-link { color: inherit; text-decoration: none; }
.sede-link:hover { color: var(--nl-blu-ink); text-decoration: underline; text-underline-offset: .2em; }
.sede-orari--grande { font-size: var(--nl-t-corpo, 1.125rem); gap: .75rem; }
.sede-orari--grande dd { font-size: var(--nl-t-voce); }

/* ── Medici: elenco con filtro, scheda con la foto grande ──────────────── */
.filtro-medici { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.filtro-medici-campi { display: grid; gap: 1rem; }
@media (min-width: 48em) { .filtro-medici-campi { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; max-width: 52rem; } }
.filtro-medici .mancante { max-width: 46rem; }
.persona--link { position: relative; }
.persona--link .persona-nome a { color: inherit; text-decoration: none; }
.persona--link .persona-nome a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.persona--link { transition: background-color var(--nl-veloce); }
@media (hover: hover) and (pointer: fine) { .persona--link:hover { background: var(--nl-vetro); } }
.sezione--ghiaccio .persona { background: var(--nl-bianco); }
.sezione:not(.sezione--ghiaccio) .persona { background: var(--nl-ghiaccio); }
.medico-testa { display: grid; justify-items: start; gap: .5rem; }
.persona-foto--grande { width: 9rem; height: 9rem; margin-bottom: .25rem; }
.persona-foto--grande .icona { width: 4rem; height: 4rem; }
.elenco-scheda { display: grid; gap: .75rem; }

/* ── Pagine d'area: le prestazioni con pillole e ricerca (10/10) ──────────
   Le sottocategorie sono pillole (una sola alla volta, «Tutte» per prima),
   la ricerca subito sotto; poi i gruppi, uno per sottocategoria, con il link
   alla pagina della specialità accanto al titolo. js/prestazioni-filtro.js. */
.filtro-prestazioni { display: grid; gap: 1.5rem; max-width: 60rem; }
.filtro-pillole { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.filtro-pillola {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: .45rem .6rem .45rem 1.1rem;
  border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-pillola);
  background: var(--nl-bianco); color: var(--nl-ink);
  font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); text-align: left;
  transition: background-color var(--nl-veloce), border-color var(--nl-veloce), color var(--nl-veloce);
}
.filtro-conta {
  display: inline-grid; place-items: center; min-width: 1.85rem; height: 1.85rem; padding-inline: .45rem;
  border-radius: var(--nl-r-pillola); background: var(--nl-vetro); color: var(--nl-blu-ink);
  font: 700 .875rem/1 var(--nl-font-marchio); font-variant-numeric: tabular-nums;
}
.filtro-pillola[aria-pressed="true"] { border-color: var(--nl-blu-ink); background: var(--nl-blu-ink); color: var(--nl-bianco); }
.filtro-pillola[aria-pressed="true"] .filtro-conta { background: var(--nl-bianco); }
@media (hover: hover) and (pointer: fine) { .filtro-pillola:hover:not([aria-pressed="true"]) { border-color: var(--nl-blu-ink); } }
.filtro-pillola:active { transform: scale(.97); }
/* Tante sottocategorie (Visite): da computer due righe di pillole e il
   pulsante per vederle tutte; da telefono scorrono di lato (sotto). */
.filtro-apri-pillole { justify-self: start; margin-top: -.75rem; padding: .35rem 0; border: 0; background: none; font: inherit; cursor: pointer; }
@media (min-width: 48em) {
  .filtro-pillole.is-raccolte { max-height: calc(2 * 2.75rem + .5rem + .5rem); overflow: hidden; }
}
@media (max-width: 47.99em) { .filtro-apri-pillole { display: none; } }
/* Da telefono le pillole stanno su una riga che scorre di lato (sfumata sul
   bordo, come la barra delle sezioni), così la ricerca resta subito sotto. */
@media (max-width: 47.99em) {
  .filtro-pillole {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--nl-margine)); padding: .25rem var(--nl-margine);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .filtro-pillole::-webkit-scrollbar { display: none; }
  .filtro-pillola { flex: none; white-space: nowrap; }
}
.filtro-cerca { width: min(100%, 40rem); margin-top: 0; }
.filtro-prestazioni .cerca-stato { margin-top: -.75rem; }
.filtro-nessuna { display: grid; justify-items: start; gap: .75rem; }
.filtro-nessuna a { font-weight: 700; color: var(--nl-blu-ink); }
.filtro-gruppo { display: grid; gap: .75rem; margin-top: 1rem; }
.filtro-gruppo-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.filtro-gruppo .prestazioni-lista { background: var(--nl-bianco); padding-inline: 1rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio); }
.filtro-gruppo .prestazione:last-child { border-bottom: 0; }
.filtro-altre { justify-self: start; padding: .5rem 0; border: 0; background: none; font: inherit; cursor: pointer; }
.filtro-altre::after { content: " →"; }

/* ── Specialità: le novità del 12/10 (Mauro) ───────────────────────────── */
/* «In questa pagina»: una riga di salti in fondo all'apertura. */
.apertura-pagina:has(.in-pagina) { padding-bottom: 0; }
.in-pagina { position: relative; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid color-mix(in srgb, var(--nl-blu-ink) 15%, transparent); background: color-mix(in srgb, var(--nl-bianco) 45%, transparent); }
.in-pagina-riga { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: 1rem; }
.in-pagina-titolo { font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-ink-2); }
.in-pagina-lista { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.in-pagina-lista a { font-weight: 700; color: var(--nl-blu-ink); text-underline-offset: .2em; }

/* «Chiama il 112»: l'avviso in evidenza dentro il suo blocco. */
.avviso-urgenza { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--nl-r-medio); background: var(--nl-accento-tinta); color: var(--nl-ink); font-weight: 700; line-height: 1.45; }
.avviso-urgenza .icona { flex: none; margin-top: .1rem; color: var(--nl-accento-ink); }

/* I medici in righe: foto o iniziali nella croce piccola, ruolo e nome, freccia.
   Tutta la riga è il link (persona--link). */
.persone--righe { gap: .75rem; }
@media (min-width: 72em) { .persone--righe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.persone--righe .persona { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: 1rem; padding: .9rem 1rem; }
.persone--righe .persona-foto { width: 3.5rem; height: 3.5rem; margin: 0; }
.persone--righe .persona-testo { display: grid; gap: .2rem; min-width: 0; }
.persone--righe .persona-nome { font-size: 1.0625rem; }
.persona-vai { color: var(--nl-blu-ink); transition: transform var(--nl-veloce) var(--nl-esce); }
@media (hover: hover) and (pointer: fine) { .persona--link:hover .persona-vai { transform: translateX(3px); } }
/* Senza foto: le iniziali in un cerchio in tinta, con l'elemento accento della
   croce nell'angolo, nel colore dell'area (come la foto vera, stesso posto). */
.persona-iniziali { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--nl-tinta-blu); }
.persona-iniziali::after { content: ""; position: absolute; right: -.15rem; bottom: -.15rem; width: 1.3rem; height: 1.3rem; clip-path: url(#clip-accento); background: var(--area, var(--nl-accento)); }
.persona-iniziali span { font: 900 1.05rem/1 var(--nl-font-testo); letter-spacing: .03em; color: var(--nl-blu-ink); }

/* Le sedi in righe: città, indirizzo, indicazioni; gli orari si aprono. */
.sedi-righe { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-bordo); }
.sede-riga { display: grid; gap: .3rem 1.5rem; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--nl-bordo); }
.sede-riga-citta { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.sede-riga address { font-style: normal; color: var(--nl-ink-2); }
.sede-riga-orari summary { display: inline-flex; gap: .4rem; cursor: pointer; font-weight: 700; color: var(--nl-blu-ink); }
.sede-riga-orari summary::-webkit-details-marker { display: none; }
.sede-riga-orari summary::after { content: "+"; font-weight: 900; transition: transform var(--nl-veloce); }
.sede-riga-orari[open] summary::after { transform: rotate(45deg); }
.sede-riga-orari dl { display: grid; gap: .2rem; margin: .5rem 0 0; }
.sede-riga-orari dl > div { display: flex; gap: .5rem; }
.sede-riga-orari dd { margin: 0; font-weight: 700; }
@media (min-width: 56em) {
  .sede-riga { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto auto; }
  .sede-riga-orari { justify-self: end; }
  .sede-riga-orari[open] { grid-column: 1 / -1; justify-self: start; }
}

/* ── Le pagine della stessa area, sotto l'apertura (23/10, Mauro) ─────────
   Come le branche di un'area in home (home.css, .area-specialita): link in
   fila, sottolineati dal filetto; la pagina in cui sei senza link, in grassetto. */
.pagine-figlie { margin-top: 1.75rem; max-width: 40rem; }
.pagine-figlie-titolo { margin: 0; font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); color: var(--nl-ink-2); }
.pagine-figlie-lista { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.pagine-figlie-lista a { color: var(--nl-ink); text-decoration: none; font-size: 1.0625rem; border-bottom: 1px solid var(--nl-bordo); transition: border-color var(--nl-t-stato) ease; }
@media (hover: hover) and (pointer: fine) { .pagine-figlie-lista a:hover { border-color: var(--nl-ink); } }
.pagine-figlie-lista [aria-current] { font-size: 1.0625rem; font-weight: 700; color: var(--nl-ink); border-bottom: 2px solid var(--area, var(--nl-accento)); }
.pagine-figlie-altre a { color: var(--nl-blu-ink); font-weight: 700; border-bottom-color: transparent; }

/* ── I pacchetti in schede (23/10, Mauro) ─────────────────────────────────
   Prima delle altre prestazioni, nelle branche e nelle aree. Come le schede
   del sistema (bordo, niente ombra a riposo); l'occhiello sopra il nome. */
.pacchetti {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem;
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.pacchetto {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem;
  border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco);
}
.pacchetto[hidden] { display: none; }
.pacchetto-occhiello { margin: 0; font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); color: var(--nl-ink-2); }
.pacchetto-nome { margin: 0; font-size: var(--nl-t-voce); line-height: 1.25; }
.pacchetto-sotto { margin: 0; color: var(--nl-ink-2); line-height: 1.4; }
.pacchetto .pulsante { margin-top: auto; align-self: flex-start; }
.pacchetto .pagodil { margin-bottom: .25rem; }
/* Nell'elenco delle branche le schede stanno sopra i gruppi. */
.prestazioni .pacchetti { margin: 1.25rem 0 2rem; }
/* Nelle aree le schede stanno in testa al gruppo della loro sottocategoria. */
.filtro-gruppo .pacchetti { margin: 0 0 1rem; }
/* Nelle branche la scheda è anche una «prestazione» (la ricerca la trova): non ne prende
   la griglia a due colonne né, da telefono, il «+» rotondo. */
.pacchetto.prestazione { display: flex; align-items: flex-start; padding: 1.25rem; border: 1px solid var(--nl-bordo); }
.pacchetto .pulsante { justify-self: auto; width: auto; min-height: 2.75rem; padding-inline: 1.1rem; border-radius: var(--nl-r-pillola); }
.pacchetto .pulsante > span:not(.visivamente-nascosto) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* PagoDIL nell'elenco: solo il logo, accanto al nome. */
.pagodil--piccolo { padding: .15rem .3rem; }
.pagodil--piccolo .pagodil-logo { width: 2.6rem; }
.prestazione:has(.pagodil--piccolo) { grid-template-columns: minmax(0, 1fr) auto auto; }
.prestazione .pagodil--piccolo { justify-self: end; }

/* ── Nel resto del sito (23/10, Mauro, js/altrove.js) ──────────────────────
   Sotto i risultati della ricerca di aree e branche: quello che sta altrove,
   a gruppi, ogni voce un link alla sua pagina (e alla riga giusta). */
.altrove { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.altrove-titolo { margin: 0 0 .75rem; font-size: var(--nl-t-voce); }
.altrove-gruppo + .altrove-gruppo { margin-top: 1rem; }
.altrove-gruppo h4 { margin: 0 0 .35rem; font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); color: var(--nl-ink-2); }
.altrove-gruppo ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.altrove-gruppo a { display: grid; gap: .1rem; padding: .45rem .6rem; margin-inline: -.6rem; border-radius: var(--nl-r-medio); color: var(--nl-ink); text-decoration: none; }
.altrove-gruppo a span { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }
@media (hover: hover) and (pointer: fine) { .altrove-gruppo a:hover { background: var(--nl-vetro); } }
.altrove-resto { margin: .35rem 0 0; font-size: var(--nl-t-piccolo); color: var(--nl-ink-3); }
/* La riga a cui porta la ricerca: in evidenza per qualche secondo. */
.is-cercata { outline: 2px solid var(--area, var(--nl-blu)); outline-offset: 4px; border-radius: var(--nl-r-medio); background: var(--nl-vetro); transition: background-color 1s ease; }

/* Pacchetti donna e uomo (25/10, Giosuè): le pillole sopra le schede, js/pacchetti-per.js. */
/* Vicine alle schede che filtrano: il gap della griglia .prestazioni, meno 1,25rem. */
.pacchetti-per { margin: 0 0 -1.25rem; }
.pacchetti-per + .pacchetti { margin-top: 0; }
.pacchetto.is-fuori-per { display: none; }