/* ==========================================================================
   La visita — linguaggio v3 della home (mockup di Domenico, 30/09/2026).
   Qui solo i pezzi che style.css non ha: token e componenti vengono da lì.
   Misure desktop in calc(N * var(--u)): 1px a 1536 di larghezza.
   Movimento: solo .rivela (una volta), i numeri grandi che salgono e le risposte al passaggio del mouse.
   Tornata 2 (01/10): «TOGLIERE TUTTA LA SEZIONE CON LA FOTO E PASSARE SUBITO A COME SI SVOLGE / LA PRIMA VISITA»:
   via le regole della testata col ritratto e quelle rimaste dalla lente di «Cosa portare» (la versione di prima è in
   _Archivio/la-visita-prima-della-tornata-2-01-10/).
   ========================================================================== */

.pagina-visita main p,.pagina-visita .domanda summary{text-wrap:pretty}
.pagina-visita main h1,.pagina-visita main h2,.pagina-visita .numero__titolo{text-wrap:balance}

/* ---------- 1 · Come si svolge · La prima visita (apre la pagina: il titolo è l'h1) ---------- */
.tempi-visita{padding-top:calc(88 * var(--u))}
.sezione .visita-titolo{font-size:max(44px,calc(72 * var(--u)));line-height:1}
/* i testi della cliente sono lunghi («Un colloquio conoscitivo e approfondito…») e i titoli pure («Analisi bioimpedenziometrica (BIA)»):
   da computer due colonne larghe, non quattro strette. Stessa griglia per i quattro punti del controllo, che ripetono gli stessi passi */
@media (min-width:761px){
  .tempi-visita__numeri,.controlli__numeri{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(64 * var(--u)) calc(110 * var(--u));max-width:calc(1180 * var(--u));margin-left:auto;margin-right:auto}
  .tempi-visita__numeri .numero p,.controlli__numeri .numero p{max-width:52ch}
}
.numeri .numero p+p{margin-top:calc(10 * var(--u))}
/* mentre i numeri grandi salgono la cifra ha un transform e verrebbe disegnata sopra il testo («opp re online» a metà salita):
   il testo resta sempre sopra la cifra, come già fa il titolo (position:relative in style.css) */
.pagina-visita .numero p{position:relative}
.sezione .tempi__chiusa{margin-top:calc(64 * var(--u));text-align:center;font-family:var(--titoli);font-size:max(22px,calc(30 * var(--u)));line-height:1.3;color:var(--inchiostro)}
.tempi__chiusa em{font-style:italic;color:var(--verde)}

/* ---------- 2 · Cosa portare: quattro schede con la spunta, un elenco da spuntare e non una sequenza ---------- */
.portare__contenitore{max-width:calc(1300 * var(--u))}
.porta{list-style:none;margin:calc(44 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(18 * var(--u))}
.porta__voce{display:flex;flex-direction:column;gap:calc(16 * var(--u));padding:calc(28 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));background:var(--carta);border-radius:var(--raggio-card);box-shadow:var(--ombra)}
.porta__voce .medaglione .icona{color:var(--verde)}
.porta__voce h3{font-family:var(--titoli);font-weight:400;font-size:max(21px,calc(24 * var(--u)));line-height:1.15;color:var(--inchiostro)}
.sezione .porta__voce p{margin-top:calc(8 * var(--u));font-size:max(15.5px,calc(16.5 * var(--u)));line-height:1.55}

/* ---------- 3 · Visita di controllo: i quattro punti, poi dove (in studio, con i due studi, oppure online) ---------- */
.modalita{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(20 * var(--u));max-width:calc(960 * var(--u));margin:calc(72 * var(--u)) auto 0}
.modalita__voce{display:flex;align-items:flex-start;gap:calc(22 * var(--u));padding:calc(30 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));background:var(--carta);border-radius:var(--raggio-card);box-shadow:var(--ombra)}
.modalita__voce .medaglione{flex:none}
.modalita__testo{min-width:0;flex:1}
.modalita__voce--studio .modalita__testo{padding-top:calc(8 * var(--u))}
/* «Online» non ha indirizzi: icona e nome al centro della scheda, alta quanto quella accanto */
.modalita__voce--online{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(16 * var(--u))}
.modalita__voce--online .modalita__testo{flex:none}
.sezione .modalita h3{margin:0;font-size:max(22px,calc(28 * var(--u)))}
.sezione .modalita__dove{margin-top:calc(6 * var(--u));font-size:max(15.5px,calc(16.5 * var(--u)));color:var(--testo-tenue)}
.sedi{margin-top:calc(14 * var(--u))}
.sede{padding:calc(14 * var(--u)) 0;border-top:1px solid var(--bordo)}
.sede:last-child{padding-bottom:0}
.sede__nome{display:block;font-family:var(--titoli-testo);font-weight:480;font-size:max(18px,calc(20 * var(--u)));line-height:1.25;color:var(--inchiostro)}
/* la virgola della cliente («APOLLO MEDICAL , VIA SANT'ORSOLA…») c'è ma non si vede: chi copia o usa un lettore di schermo
   ha «Apollo Medical, Via Sant'Orsola…». Trasparente e non .vh: la .vh è position:absolute, conta come un blocco e nel testo
   copiato finirebbe da sola su una riga */
.sede__virgola{color:transparent}
.sede__via{display:block;margin-top:calc(4 * var(--u));font-size:max(15.5px,calc(16.5 * var(--u)));line-height:1.5;color:var(--testo)}
.sezione .controlli__modulo{margin-top:calc(30 * var(--u));text-align:center;font-size:max(15.5px,calc(16.5 * var(--u)));color:var(--testo-tenue)}
.controlli__modulo a{color:var(--verde-scuro);text-decoration:underline;text-decoration-color:var(--bordo-forte);text-underline-offset:3px}
.controlli__modulo a:hover{text-decoration-color:var(--verde)}

/* ---------- 4 · Prezzi e detrazione ---------- */
.costi .schede{grid-template-columns:calc(520 * var(--u)) minmax(0,1fr);align-items:stretch}
.costi .prezzi__elenco li>span:first-child{min-width:0;text-wrap:balance}
.costi .prezzi__cifra{flex:none;white-space:nowrap}
.scheda__pulsante{margin-top:calc(28 * var(--u))}
/* affiancata ai prezzi la scheda è più alta del suo contenuto: le tre righe si dividono l'altezza, niente fascia vuota in fondo */
.detrazione{display:flex;flex-direction:column}
.detrazione__elenco{flex:1;display:flex;flex-direction:column;margin-top:calc(22 * var(--u))}
.detrazione__elenco li{flex:1;display:flex;align-items:center;gap:calc(18 * var(--u));padding:calc(16 * var(--u)) 0;border-bottom:1px solid var(--bordo)}
.detrazione__elenco li:last-child{border-bottom:0;padding-bottom:0}
.detrazione__elenco .medaglione{flex:none;width:calc(52 * var(--u));height:calc(52 * var(--u));min-width:44px;min-height:44px}
.sezione .detrazione__elenco p{font-size:max(16px,calc(17.5 * var(--u)));line-height:1.55}

/* ---------- 5 · Domande frequenti ---------- */
.domande-visita__griglia{display:grid;grid-template-columns:calc(380 * var(--u)) minmax(0,1fr);gap:calc(60 * var(--u));align-items:start;max-width:calc(1240 * var(--u))}
.domande-visita .domande{margin-top:0}
.domande-visita .domanda{background:var(--carta)}
.domande-visita .domanda[open]{background:var(--verde-velo)}
.sezione .domanda__risposta{font-size:max(15.5px,calc(16.5 * var(--u)));line-height:1.6}
.sezione .domanda__risposta+.domanda__risposta{margin-top:0}
.domanda__risposta:not(:last-child){padding-bottom:calc(8 * var(--u))}
.domanda__risposta a{color:var(--verde-scuro);text-decoration:underline;text-decoration-color:var(--bordo-forte);text-underline-offset:3px}
.domanda__risposta a:hover{text-decoration-color:var(--verde)}
/* «Dove si fa la visita?»: i due studi uno per riga, col pallino */
.domanda__sedi{display:grid;gap:calc(4 * var(--u))}
.domanda__sedi li{position:relative;padding-left:max(16px,calc(18 * var(--u)))}
.domanda__sedi li::before{content:"";position:absolute;left:calc(3 * var(--u));top:.68em;width:max(5px,calc(6 * var(--u)));height:max(5px,calc(6 * var(--u)));border-radius:50%;background:var(--verde)}

/* ---------- 6 · Come prenotare: chiude la pagina ---------- */
.prenota-visita__azioni{justify-content:center;margin-top:calc(56 * var(--u))}

/* ==========================================================================
   Adattamenti (stessi punti di style.css)
   ========================================================================== */
@media (max-width:1100px){
  .porta{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .domande-visita__griglia{grid-template-columns:260px minmax(0,1fr);gap:40px}
}
@media (max-width:900px){
  .costi .schede{grid-template-columns:1fr}
  .domande-visita__griglia{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .tempi-visita{padding-top:48px}
  .sezione .visita-titolo{font-size:46px}
  .sezione .tempi__chiusa{margin-top:34px;font-size:23px}

  .porta{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .porta__voce{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 16px 18px}
  .porta__voce .medaglione{flex:none;width:42px;height:42px}
  .porta__voce h3{font-size:19px}
  .sezione .porta__voce p{margin-top:4px;font-size:15.5px}

  .controlli .titolo-sezione em{display:block}
  /* da telefono le due schede una sotto l'altra: gli indirizzi hanno bisogno di tutta la larghezza */
  .modalita{grid-template-columns:1fr;gap:10px;margin-top:40px}
  .modalita__voce{gap:16px;padding:20px 18px 20px 16px}
  .modalita__voce .medaglione{width:52px;height:52px;min-width:52px;min-height:52px}
  /* «In studio»: icona accanto a «In studio / A Siracusa presso», sotto gli indirizzi a tutta larghezza
     (così «Via Sant'Orsola 14/A, 96100 Siracusa» sta su una riga) */
  .modalita__voce--studio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;align-items:center}
  .modalita__voce--studio .modalita__testo{display:contents}
  .modalita__voce--studio .medaglione{grid-row:1/3}
  .modalita__voce--studio h3{grid-column:2;align-self:end}
  .sezione .modalita__voce--studio .modalita__dove{grid-column:2;align-self:start;margin-top:2px}
  .modalita__voce--studio .sedi{grid-column:1/-1;margin-top:18px}
  .modalita__voce--online{flex-direction:row;justify-content:flex-start;text-align:left}
  .sezione .modalita h3{font-size:22px}
  .sede{padding:12px 0}
  .sede__nome{font-size:18px}
  .sede__via{font-size:15.5px}
  .sezione .controlli__modulo{margin-top:22px}

  .scheda__pulsante{width:100%}
  .detrazione__elenco li{align-items:flex-start;gap:14px;padding:14px 0}
  .sezione .detrazione__elenco p{font-size:16px}

  .domanda__sedi li{padding-left:18px}
  .domanda__sedi li::before{left:3px;width:6px;height:6px}

  .prenota-visita__azioni{margin-top:34px}
}