/* Medyca — i pezzi della pagina /turisti che stile.css non ha (13.10.2026)
   Viene dopo stile.css e ne usa le variabili: nessun colore nuovo, raggi 8/24/40, filetti var(--filo), nessuna ombra
   nuova (restano quelle del bottone rosso e della foto dell'apertura, che sono già in stile.css).
   Telefono per primo; da 45em (720px) l'apertura e «Come aiutiamo…» passano a due colonne, da 52em e da 64em salgono le misure. */

/* ---------- 1. Apertura: tutta la prima sezione, sul navy ---------- */
/* A telefono l'ordine è: foto, titolo, due capoversi, bottone, la riga «Assistenza medica…» col suo testo.
   I due capoversi hanno la misura dell'attacco ma non la sua classe: `.apertura--b .attacco` li metterebbe in griglia e
   staccati di 1,75rem l'uno dall'altro. */
:is(.turisti-testo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.75rem; }
:is(.turisti-sottotitolo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { font-size: var(--attacco); line-height: var(--attacco-lh); font-weight: var(--peso-testo); }
:is(.turisti-sottotitolo + .turisti-sottotitolo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.25em; }
:is(.turisti-testo .bottone):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2rem; }
/* la riga «Assistenza medica…» chiude l'apertura: filetto bianco al 35%, il titoletto a 700 e sotto il suo testo */
:is(.turisti-assistenza):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--filo-su-navy); }
:is(.turisti-assistenza strong):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: block; font-size: var(--h3); line-height: 1.35; font-weight: 700; }
:is(.turisti-assistenza p + p):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: .5rem; }
/* la foto è la Dr.ssa a figura intera (2:3, il viso a metà altezza): i tagli di stile.css erano per il busto della home */
:is(.apertura--turisti .tondo img):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { object-position: 50% 50%; }
@media (max-width: 44.99em) {
  /* telefono (e tablet stretto): la foto sta sopra il titolo; il titolo prende lo stacco che aveva la foto */
  :is(.apertura--b.apertura--turisti .apertura-griglia):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: block; }
  :is(.apertura--b.apertura--turisti .tondo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 0; aspect-ratio: 4 / 3; }
  :is(.apertura--turisti .h1):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.75rem; }
}
@media (min-width: 45em) and (max-width: 63.99em) {
  /* tablet: titolo in alto, sotto la foto a sinistra e tutto il testo a destra (non c'è la riga delle cifre della home) */
  :is(.apertura--b.apertura--turisti .apertura-griglia):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titolo titolo" "foto testo"; grid-template-rows: auto 1fr; align-items: start; }
  :is(.apertura--b.apertura--turisti .tondo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { aspect-ratio: 2 / 3; }
  :is(.apertura--turisti .turisti-testo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: testo; margin-top: 2rem; }
}
@media (min-width: 64em) {
  /* desktop: testo a sinistra, la foto appoggiata in basso a destra e uscita di 56px dalla fascia (la regola è in stile.css) */
  :is(.apertura--b.apertura--turisti .apertura-griglia):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-template-areas: "titolo foto" "testo foto"; grid-template-rows: auto 1fr; }
  :is(.apertura--turisti .turisti-testo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: testo; max-width: 36rem; margin-top: 2rem; padding-bottom: 4.5rem; }
  /* la colonna di testo qui è alta (due capoversi, bottone, riga «Assistenza…»): la foto sale lungo tutta la colonna invece di
     stare nei 30rem della home, così il viso si vede già nella prima schermata; sempre appoggiata in basso e uscita di 56px */
  :is(.apertura--b.apertura--turisti .tondo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { width: 100%; max-width: 27rem; height: 100%; min-height: 30rem; max-height: 44rem; aspect-ratio: auto; }
  :is(.apertura--turisti .tondo img):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { object-position: 60% 50%; }   /* a questa altezza la cornice è stretta: si taglia la Torre, non il viso */
}

/* ---------- 2. Il video: la copertina col «play» è un bottone; premuto, al suo posto c'è il <video> (stessa classe, stesse misure) ---------- */
:is(.video):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raggio-grande); overflow: hidden; background: var(--cielo); }
:is(.video img):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { width: 100%; height: 100%; object-fit: cover; }
:is(button.video):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: block; width: 100%; padding: 0; border: 0; font: inherit; cursor: pointer; }
:is(button.video .play):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { transition: transform .2s; }
:is(button.video:hover .play):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { transform: translate(-50%, -50%) scale(1.08); }
:is(video.video):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: block; width: 100%; height: auto; background: var(--navy); }
/* sulla copertina il centro è un camice bianco: il cerchio bianco del sistema non si vedrebbe, qui è navy col bordo bianco */
:is(.video .play):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { width: 72px; height: 72px; background: var(--navy); color: #fff; border: 4px solid #fff; }
:is(.video .play .icona):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { width: 30px; height: 30px; }
:is(.video-durata):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { position: absolute; left: 1rem; bottom: 1rem; padding: .25rem .875rem; border-radius: 999px; background: #fff; color: var(--navy); font-size: var(--piccolo); line-height: 1.5; font-weight: 700; }

/* ---------- 3. «Cerchi un medico che parla la tua lingua…»: domanda, logo, video, due bottoni ---------- */
:is(.soluzione-logo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { width: auto; height: 3rem; margin-top: 1.25rem; }
:is(.soluzione-video):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2rem; }
:is(.soluzione-bottoni):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: grid; gap: .75rem; margin-top: 2rem; }
@media (min-width: 52em) {
  :is(.soluzione > *):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { max-width: var(--colonna); }
  :is(.soluzione-bottoni):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: flex; flex-wrap: wrap; gap: 1rem; }
}
@media (min-width: 64em) {
  /* testo e bottoni a sinistra, il video a destra: l'ordine nel codice resta quello del telefono */
  :is(.soluzione):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "testo video" "bottoni video"; column-gap: 4rem; align-content: center; align-items: start; }
  :is(.soluzione > *):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { max-width: none; }
  :is(.soluzione-testo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: testo; }
  :is(.soluzione-video):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: video; align-self: center; margin-top: 0; }
  :is(.soluzione-bottoni):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: bottoni; }
}

/* ---------- 4. «Come aiutiamo i viaggiatori stranieri in Toscana:» — cinque punti, ognuno con la sua foto ---------- */
/* Niente scatola attorno al testo: la foto con i suoi angoli a 24px, il titolo, i due capoversi. */
:is(.aiuto-elenco):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: grid; gap: 3rem; margin-top: 2.5rem; }
:is(.aiuto-foto):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { aspect-ratio: 3 / 2; margin-bottom: 1.25rem; }
:is(.aiuto-voce p + p):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.25em; }
@media (min-width: 45em) {
  :is(.aiuto-elenco):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 2rem; }
  :is(.aiuto-voce:last-child):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1rem); }
}
@media (min-width: 64em) {
  /* cinque punti su sei colonne: tutti della stessa misura, tre sopra e due sotto al centro */
  :is(.aiuto-elenco):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3.5rem 2.5rem; }
  :is(.aiuto-voce):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *), :is(.aiuto-voce:last-child):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-column: span 2; width: auto; }
  :is(.aiuto-voce:nth-child(4)):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-column: 2 / span 2; }
}

/* ---------- 5. «Come funziona?»: i due elenchi (prima e dopo la visita) con i passi numerati ---------- */
/* Come i passi di /menopausa: numero rosso in un cerchio da 36px su un filo sottile. Ogni elenco riparte da 1;
   il numero lo disegna il CSS (counter). */
:is(.funziona-foto):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { aspect-ratio: 16 / 10; }
:is(.funziona-titolo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2.5rem; }
:is(.funziona-passi):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.5rem; }
:is(.passi-gruppo + .passi-gruppo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2.25rem; }
:is(.passi-lista):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { counter-reset: passo; margin-top: 1.25rem; }
:is(.passi-lista li):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { position: relative; counter-increment: passo; padding: 0 0 1.5rem 3.25rem; }
:is(.passi-lista li:last-child):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { padding-bottom: 0; }
:is(.passi-lista li:not(:last-child)):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { min-height: 3.75rem; }
:is(.passi-lista li):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *)::before {
  content: counter(passo); position: absolute; left: 0; top: -.25rem; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--bianco); border: 1.5px solid var(--rosso); color: var(--rosso);
  font-size: 1rem; line-height: 1; font-weight: 700;
}
:is(.passi-lista li:not(:last-child)):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *)::after { content: ""; position: absolute; left: 17.25px; top: 2.375rem; bottom: .625rem; width: 1.5px; background: var(--filo); }  /* il filo: dal cerchio al cerchio dopo */
:is(.funziona-bottone):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2.5rem; }
@media (min-width: 37.5em) {
  :is(.funziona-foto):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *), :is(.funziona-passi):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { max-width: var(--colonna); }
}
@media (min-width: 64em) {
  /* testo a sinistra, la foto a destra; il bottone sotto i due elenchi */
  :is(.funziona):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titolo foto" "passi foto" "bottone foto"; grid-template-rows: auto auto 1fr; column-gap: 5rem; align-items: start; }
  :is(.funziona-foto):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: foto; align-self: stretch; max-width: none; aspect-ratio: auto; min-height: 28rem; }
  :is(.funziona-titolo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: titolo; margin-top: 0; }
  :is(.funziona-passi):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: passi; }
  :is(.funziona-bottone):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-area: bottone; justify-self: start; }
}

/* ---------- 6. Prezzi: il listino dei servizi medici tradizionali (prima stava in /pricing, 29.10.2026) ---------- */
/* Il componente è quello che aveva /pricing, con le stesse regole: una riga con filetto per voce, nome a sinistra e prezzo a destra (mai più
   grande del nome), la nota in piccolo sotto; niente scatole, niente scorrimento di lato. Se nome e prezzo non stanno sulla stessa riga (un
   prezzo lungo, uno schermo stretto) il prezzo va a capo sotto il nome. Sedici voci: a desktop in due colonne, nell'ordine del file (prima la
   colonna di sinistra, poi quella di destra). La sezione è azzurra: la pillola «GRATIS» / «FREE» diventa bianca. */
:is(.listino):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { max-width: var(--colonna); border-top: 1px solid var(--filo); }
:is(.voce):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { padding-block: 1.25rem; border-bottom: 1px solid var(--filo); }
:is(.voce-capo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
:is(.voce-nome):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { flex: 1 1 10rem; min-width: 0; font-size: var(--h3); line-height: 1.35; font-weight: 700; }
:is(.voce-prezzo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { flex: none; font-size: var(--h3); line-height: 1.35; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «FREE»: una pillola, perché si veda scorrendo */
:is(.voce-prezzo--gratis):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { padding: 2px 14px; border-radius: 999px; background: var(--cielo); font-size: var(--piccolo); line-height: 1.5; letter-spacing: .02em; }
:is(.sezione--cielo .voce-prezzo--gratis):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { background: var(--bianco); }
/* due prezzi (piccola chirurgia): uno sotto l'altro, a sinistra; a telefono in piccolo, perché stiano a destra del nome */
:is(.voce-prezzo--doppio):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { text-align: left; font-size: var(--piccolo); line-height: 1.5; }
:is(.voce-prezzo--doppio span):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: block; }
@media (min-width: 52em) { :is(.voce-prezzo--doppio):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { font-size: var(--corpo); } }
:is(.voce-note):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: .5rem; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); }
:is(.voce-note > * + *):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.25em; }
:is(.voce-note strong):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { font-weight: 700; }
/* gli indirizzi email nel testo si toccano: area alta almeno 48px senza spostare le righe (il margine negativo cancella il padding) */
:is(.voce-note a):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: inline-block; padding-block: .875rem; margin-block: -.875rem; }
/* il bottone subito sotto l'elenco */
:is(.prezzi .h2 + .listino):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.5rem; }
:is(.prezzi-chiusura):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2.5rem; }
@media (min-width: 64em) {
  :is(.prezzi .h2 + .listino):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2rem; }
  :is(.listino--colonne):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { max-width: none; column-count: 2; column-gap: 4rem; }
  :is(.listino--colonne .voce):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { break-inside: avoid; }
}

/* ---------- 7. Domande frequenti: APERTE (titolo, risposta, linea) ---------- */
/* La linea è il filetto del sistema; a desktop domanda a sinistra e risposta a destra. */
:is(.domande-elenco):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2rem; border-top: 1px solid var(--filo); }
:is(.domanda):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { padding-block: 1.75rem; border-bottom: 1px solid var(--filo); }
:is(.domanda p):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: .75rem; }
@media (min-width: 52em) {
  :is(.domanda .h3):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *), :is(.domanda p):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { max-width: var(--colonna); }
}
@media (min-width: 64em) {
  :is(.domande-elenco):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2.5rem; }
  :is(.domanda):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; padding-block: 2.25rem; }
  :is(.domanda p):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 0; }
}

/* ---------- 8. I due articoli per chi viaggia ---------- */
/* Le due guide sono collegate dal 31.10.2026 (prima non le collegava nessuna pagina). Le card degli approfondimenti, con foto e titolo: su telefono una sotto l'altra;
   da computer due sole, quindi affiancate con la foto a lato, altrimenti in due colonne sarebbero grandi il doppio di tutte le altre. */
:is(.letture .h2 + .anteprime):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 1.5rem; }
@media (min-width: 64em) {
  :is(.letture .h2 + .anteprime):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { margin-top: 2rem; }
  :is(.letture .anteprime):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.letture .anteprima):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { flex-direction: row; }
  :is(.letture .anteprima-foto):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { flex: 0 0 40%; aspect-ratio: auto; min-height: 10rem; }
  :is(.letture .anteprima-corpo):where([data-sezione^="turisti/"], [data-sezione^="turisti/"] *) { justify-content: center; }
}