/* ═══════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE DEL LAB — i componenti che servono solo al Lab
   ───────────────────────────────────────────────────────────────────────────
   Si carica dopo ../../Sistema/css/pagina.css (dal 9/10 i componenti comuni
   delle pagine interne stanno lì: apertura, briciole, schede, blocchi, passi,
   persone, articolo, moduli di contatto…). Qui restano quelli del Lab.
   Modelli e pagine: selezione-rebrand/05-ui/STRUTTURA.md §2.
     B indice        Servizi, Check-up, Consigli
     C prodotto      i 7 check-up, Percorsi, Visita + Check-up, Domicilio
     D consultazione Come prepararsi, Domande frequenti (cerca nell'apertura)
     E informativa   Come prenotare, Assicurazioni, Pagamenti, Customer care,
                     Chi siamo, Sedi e contatti, Note legali, articoli
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Percorsi per specialità (7/10, modifica 16 di Giosuè) ───────────────
   La fisarmonica comune; dentro, una riga per percorso: icona, nome, cosa
   comprende, «Aggiungi al preventivo». */
.branche { max-width: 64rem; }
.branca summary { padding-block: 1.1rem; }
.branca-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.branca-nome { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.branca-conta { color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); font-weight: 500; }
.percorsi-lista { display: grid; gap: .75rem; padding-bottom: 1.5rem; }
.percorso-riga {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; align-items: start;
  padding: 1.1rem 1.25rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco);
}
.percorso-icona { width: 2.25rem; height: 2.25rem; stroke-width: 1.5; color: var(--nl-blu-ink); }
.percorso-testo { display: grid; gap: .4rem; }
.percorso-nome { font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.25; }
.percorso-visita { color: var(--nl-blu-ink); font-weight: 500; }
.percorso-azione { grid-column: 2; justify-self: start; }
@media (min-width: 48em) {
  .percorso-riga { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .percorso-azione { grid-column: 3; }
}

.scheda-conteggi { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--nl-t-piccolo); }
.scheda-conteggi strong { font-weight: 700; }

/* Esami dentro una scheda, a scomparsa. */
.scheda-esami summary {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink);
  cursor: pointer; list-style: none;
}
.scheda-esami summary::-webkit-details-marker { display: none; }
.scheda-esami .tondo { transition: transform var(--nl-veloce); }
.scheda-esami[open] .tondo { transform: rotate(45deg); }
.scheda-esami[open] summary { margin-bottom: 1rem; }
.variante + .variante { margin-top: 1rem; }
.variante-testa { margin-bottom: .5rem; }

/* ── Vie: una scheda principale e le altre accanto (Servizi, Come prenotare) */
.vie { display: grid; gap: 1.25rem; }
@media (min-width: 64em) {
  .vie { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .vie > :first-child { grid-row: span 3; }
  /* Senza la scheda principale (Come prenotare con il preventivatore spento, 15/10): tre colonne pari. */
  .vie:not(:has(> .scheda-servizio--principale)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vie:not(:has(> .scheda-servizio--principale)) > :first-child { grid-row: auto; }
}
.scheda-servizio--senza-foto::after {
  content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 9rem; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
.scheda-servizio--senza-foto .scheda-servizio-corpo { padding: clamp(1.75rem, 1rem + 3vw, 3rem); padding-bottom: 7rem; }
.scheda-servizio .scheda-servizio-titolo--lungo { font-size: var(--nl-t-scheda); line-height: 1.1; }
.indice-titolo { margin-bottom: .75rem; }
.pacchetti-nota { margin-top: 2rem; }

/* ── Protocolli: fisarmonica con titolo e riassunto ────────────────────── */
.protocollo summary > span:first-child { display: grid; gap: .2rem; }
.protocollo-sommario { font-size: var(--nl-t-piccolo); font-weight: 400; color: var(--nl-ink-2); }
.protocollo-corpo { display: grid; gap: 1.25rem; max-width: 44rem; padding-bottom: 1.5rem; }
.protocollo-corpo h4 { margin-bottom: .5rem; font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-blu-ink); }
.protocollo-corpo ol { display: grid; gap: .5rem; padding-left: 1.25rem; color: var(--nl-ink-2); }

/* ── Check-up: i due livelli, come i pannelli di sala ──────────────────── */
.livelli-griglia { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 64em) { .livelli-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.livello { display: grid; gap: 1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.livello-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.livello-nome { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1; text-transform: uppercase; }
.livello-conta { font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); color: var(--nl-blu-ink); }
.livello-nota { color: var(--nl-ink-2); }
/* Il Plus sulla tinta d'accento, con l'elemento pieno nell'angolo. */
.livello--plus { position: relative; overflow: hidden; border-color: transparent; background: var(--nl-accento-tinta); }
.livello--plus::after {
  content: ""; position: absolute; right: -1.5rem; bottom: -1.5rem; width: 6rem; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
.livello--plus .esami li { background: var(--nl-bianco); }
.livello--plus .livello-conta { color: var(--nl-accento-brace); }
.livello-compreso { font-weight: 700; }
.livello-azione { justify-self: start; margin-top: .25rem; }

.moduli { display: grid; gap: 1rem; }
@media (min-width: 48em) { .moduli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .moduli { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.modulo-focus { display: grid; align-content: start; gap: .75rem; padding: 1.5rem; border-radius: var(--nl-r-medio); background: var(--nl-bianco); }
.modulo-focus h3 { font-size: var(--nl-t-voce); font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.modulo-azione { margin-top: auto; padding-top: .25rem; }
.modulo-focus { grid-template-rows: auto auto 1fr; }

/* ── Orario in grande (Come prenotare) ─────────────────────────────────── */
.orario .contenitore { display: grid; gap: .75rem; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.orario-ora { font-size: var(--nl-t-display); font-weight: 900; line-height: .95; letter-spacing: -.02em; white-space: nowrap; }

/* ── Referti: il numero dentro la croce ────────────────────────────────── */
.referti-griglia { display: grid; gap: 3rem; align-items: center; }
.referti-segno { position: relative; display: grid; place-items: center; width: 20rem; max-width: 100%; aspect-ratio: 1; justify-self: center; }
.referti-segno::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--nl-tinta-blu);
  -webkit-mask: var(--forma-azzurro) center / contain no-repeat; mask: var(--forma-azzurro) center / contain no-repeat;
}
.referti-segno p { display: grid; justify-items: center; line-height: 1; translate: 10% 10%; }  /* sul pieno della forma, che sta in basso a destra */
.referti-numero { font-size: var(--nl-t-display); font-weight: 900; letter-spacing: -.02em; color: var(--nl-blu-ink); }
.referti-unita { font-size: var(--nl-t-sottotitolo); font-weight: 300; text-transform: uppercase; color: var(--nl-blu-ink); }
.referti-testo { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 64em) { .referti-griglia { grid-template-columns: auto minmax(0, 1fr); gap: 5rem; } }

/* ── Check-up: le fasce d'età dei pannelli di sala (5/10) ──────────────────
   Il titolo della fascia in Black blu sul filetto arancione, come «UNDER 40»
   nei pannelli; i profili sotto, a colonne di testo con il nome in grande.
   Tutto il profilo è il link (il link visibile si allarga). */
.fasce { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.fascia-titolo {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 1.5rem;
  font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1; text-transform: uppercase;
  color: var(--nl-blu);
}
.fascia-titolo::after { content: ""; flex: 1; height: 3px; background: var(--nl-accento); }
.profili { display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .profili { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 1.5rem; } }
/* Da computer le fasce da due profili (Under 40, Over 40) stanno affiancate:
   la griglia resta piena, come le righe dei pannelli. */
@media (min-width: 64em) {
  .fasce { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .fascia:has(.profilo:nth-child(3)) { grid-column: 1 / -1; }
}
.profilo {
  position: relative; display: grid; align-content: start; gap: .5rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: var(--nl-r-scheda); background: var(--nl-ghiaccio);
  transition: background-color var(--nl-veloce);
}
.profilo-nome { font-size: var(--nl-t-titolo); font-weight: 900; line-height: 1; text-transform: uppercase; }
.profilo-eta { font-weight: 700; color: var(--nl-blu-ink); }
.profilo p:not(.profilo-eta) { color: var(--nl-ink-2); }
.profilo .link-freccia { margin-top: .5rem; }
.profilo .link-freccia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Il preventivo con il profilo già scelto (5/10): sta sopra il link che
   copre la scheda, così si tocca da solo. */
.profilo-preventivo { position: relative; z-index: 1; justify-self: start; margin-top: .25rem; }
@media (hover: hover) and (pointer: fine) {
  .profilo:hover { background: var(--nl-vetro); }
  .profilo:hover .link-freccia .icona { transform: translateX(3px); }
}

/* Gli altri check-up in fondo alla pagina di profilo (15/10). */
.altri-profili { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.altri-profili-voce {
  display: flex; flex-direction: column; gap: .15rem; height: 100%;
  padding: 1rem 1.15rem; border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda, 1rem);
  background: var(--nl-bianco); color: var(--nl-ink); text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.altri-profili-voce:hover, .altri-profili-voce:focus-visible { border-color: var(--nl-accento); box-shadow: 0 0 0 1px var(--nl-accento); }
.altri-profili-nome { font-weight: 700; }
.altri-profili-eta { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }

/* Il link alla pagina dell'area nelle schede di Focus patologia (15/10). */
.scheda-pagina { margin-top: .5rem; }