/* Medyca — /prenota-ormoni-bioidentici (13.10.2026, testi nuovi del 30.10.2026)
   Solo i pezzi che lo stile comune (stile.css) non ha, nello stesso linguaggio: variabili, raggi 8/24/40, filetti
   var(--filo), nessuna ombra, nessun colore nuovo. Da portare nel foglio comune: .menopausa-apertura--prenota
   (apertura senza foto con la barretta rossa), .apertura-intro, .visite, .calendario, .capire-prima. */

/* ---------- 1. Apertura: il titolo e la frase che lo segue, sul navy ---------- */
/* È l'apertura di /menopausa (navy, croce al 6%, nessuna foto) con la barretta rossa sopra il titolo come in home.
   Il titolo è su due livelli, come nelle altre aperture (dal 30.10.2026 ha una virgola: «…Ormoni Bioidentici, online o a Siena»).
   A desktop il titolo sta a sinistra e la frase a destra, così la fascia resta bassa e il calendario si vede presto. */
:is(.menopausa-apertura--prenota .h1):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *)::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); }
:is(.apertura-intro):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { margin-top: 1.75rem; }
:is(.menopausa-apertura .apertura-intro > .attacco):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { margin-top: 0; }
@media (min-width: 52em) {
  :is(.apertura-intro):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { max-width: var(--colonna); }
}
@media (min-width: 64em) {
  :is(.menopausa-apertura--prenota .apertura-griglia):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5rem; align-items: start; }
  :is(.menopausa-apertura--prenota .h1):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *)::before { width: 3.5rem; height: 5px; margin-bottom: 1.75rem; border-radius: 3px; }
  /* la prima riga della frase si allinea alla prima riga del titolo (barretta + stacco) */
  :is(.apertura-intro):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { max-width: none; margin-top: 2.25rem; }
}

/* ---------- 2. Le tre visite, sopra il calendario ---------- */
/* Le tre visite che si scelgono nel calendario: tre voci con il filetto
   (telefono e tablet una sotto l'altra, nella colonna del testo): il nome in evidenza, sopra la sua frase (il trattino lungo resta nel testo,
   ma non si vede). Da 64em tre colonne uguali con un filetto in mezzo, come il team medico in home. */
:is(.visite):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { max-width: var(--colonna); border-top: 1px solid var(--filo); }
:is(.visite li):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { padding-block: 1.25rem; border-bottom: 1px solid var(--filo); }
:is(.visite strong):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { display: block; margin-bottom: .25rem; font-size: var(--h3); line-height: 1.35; }
:is(.visite li > span):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { display: block; }   /* la frase è un blocco sotto il nome: così nome e frase si leggono nell'ordine in cui si vedono */
:is(.visite + .calendario):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { margin-top: 2.5rem; }
@media (min-width: 64em) {
  :is(.visite):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; border-bottom: 1px solid var(--filo); }
  :is(.visite li):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { padding: 1.75rem 2rem 1.75rem 0; border-bottom: 0; }
  :is(.visite li + li):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { padding-left: 2rem; border-left: 1px solid var(--filo); }
  :is(.visite + .calendario):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { margin-top: 3rem; }
}

/* ---------- 3. Il calendario: l'iframe vero di Acuity in un riquadro ---------- */
/* Angoli a 24px e filetto, largo quanto la colonna (a desktop fino a 1200px). Con lo script di Acuity (embed.js, subito dopo l'iframe) l'altezza la decide l'iframe stesso: lo script la scrive sull'iframe (height: …px !important) a ogni messaggio «sizing:…» della
   pagina di Acuity, anche quando si passa al passo dopo o il cliente cambia i tipi di visita, e vince su questo CSS. Questo CSS è l'altezza di partenza
   (e quella di chi non ha JavaScript): quella che Acuity stesso chiedeva all'iframe a ogni larghezza per l'elenco dei tipi di visita, misurata il
   13.10.2026 ogni 10px (2277px a 320, 1810 a 390, 1578 a 480, 1400 a 630, 1288 a 800, poi il disegno largo di Acuity: 1340 a 820, 1274 da 900 in su),
   più un margine di almeno 15px. Fino a 814px sono quattro rette tra i punti misurati (vince la più alta), poi due gradini. */
:is(.calendario):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { overflow: hidden; border: 1px solid var(--filo); border-radius: var(--raggio-grande); background: var(--bianco); }
:is(.calendario iframe):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) {
  display: block; width: 100%; border: 0;
  height: max(calc(4466px - 667vw), calc(2899px - 269vw), calc(2244px - 132vw), calc(1880px - 67vw));
}
@media (min-width: 815px) { :is(.calendario iframe):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { height: 1370px; } }
@media (min-width: 900px) { :is(.calendario iframe):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { height: 1304px; } }

/* ---------- 4. Dopo il calendario: i due capoversi con i link ---------- */
/* Una colonna di testo da telefono a tablet; da 64em i due capoversi affiancati, così la fascia non resta una colonna stretta con mezza pagina vuota. */
:is(.capire-prima > p):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { max-width: var(--colonna); }
:is(.capire-prima > * + *):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { margin-top: 1.25em; }
@media (min-width: 64em) {
  :is(.capire-prima):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; align-items: start; }
  :is(.capire-prima > p):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { max-width: none; }
  :is(.capire-prima > * + *):where([data-sezione^="prenota-ormoni-bioidentici/"], [data-sezione^="prenota-ormoni-bioidentici/"] *) { margin-top: 0; }
}