/* Medyca — /pricing: «Come funziona» (29.10.2026)
   Stesso linguaggio delle altre pagine: variabili di stile.css, raggi 8/24/40, pillole, niente colori nuovi, nessuna ombra nuova (restano
   quelle dei bottoni, che sono in stile.css). La pagina parla solo del Percorso Ormonale Bioidentico: i sei passi, il costo accanto a ciascuno.
   Pezzi nuovi: .prezzi-apertura (l'apertura navy con titolo, una riga e un bottone bianco) e .sequenza (i passi su una linea che scende).
   Il listino dei servizi medici tradizionali non sta più qui: è passato in turisti.css, nella sezione «Prezzi». */

/* ---------- 1. Apertura: navy come la home (la croce al 6% la mette stile.css), barretta rossa sopra il titolo ---------- */
/* Niente foto: la riga e il bottone bastano, come nelle aperture di /menopausa e /prenota. Il bottone è bianco con il testo navy (stile.css):
   sul blu non c'è rosso. */
:is(.prezzi-apertura):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding-block: 2.5rem 3rem; }
:is(.prezzi-apertura .contenitore):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { position: relative; z-index: 1; }
:is(.prezzi-apertura .h1):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *)::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); }
:is(.prezzi-apertura .attacco):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { margin-top: 1.5rem; }
:is(.prezzi-apertura .bottone):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { margin-top: 2rem; }
/* da tablet il bottone ha la larghezza che gli serve, non quella di tutta la fascia */
@media (min-width: 37.5em) { :is(.prezzi-apertura .bottone):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { display: inline-flex; width: auto; } }
@media (min-width: 52em) {
  /* il titolo è lungo: su due righe (non tre), la riga sotto non supera la colonna del testo */
  :is(.prezzi-apertura .h1):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { max-width: 48rem; }
  :is(.prezzi-apertura .attacco):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { max-width: var(--colonna); }
}
@media (min-width: 64em) {
  :is(.prezzi-apertura):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { padding-block: 4.5rem 5rem; }
  :is(.prezzi-apertura .h1):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *)::before { width: 3.5rem; height: 5px; margin-bottom: 1.75rem; border-radius: 3px; }
  :is(.prezzi-apertura .attacco):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { margin-top: 2rem; }
}

/* ---------- 2. La sequenza: sei passi su una linea che scende ---------- */
/* La logica è quella del Percorso della home (.home-ambiti): una linea navy da 2px passa per il centro dei cerchi e scende da un passo al
   successivo; qui il nodo è un cerchio navy con il numero bianco (il numero lo disegna il CSS: counter, ogni passo ha il suo id).
   Il cerchio sta al centro della prima riga del titolo anche quando il titolo va a capo: --riga è l'altezza di quella riga (in rem, quindi
   segue il testo ingrandito) e la linea parte da metà riga e arriva a metà riga del passo dopo. Il costo sta a destra del titolo; su
   telefono, e dove non ci sta, sotto il titolo. */
:is(.sequenza):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { --cerchio: 2.25rem; --riga: calc(var(--h3) * 1.35); --tratto: 2px; --stacco: 2.25rem; --rientro: calc(var(--cerchio) + 1rem); counter-reset: passo; }
:is(.sequenza-passo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { position: relative; counter-increment: passo; padding: 0 0 var(--stacco) var(--rientro); scroll-margin-top: 1.5rem; }
:is(.sequenza-passo:last-child):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { padding-bottom: 0; }
:is(.sequenza-passo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *)::before {
  content: counter(passo); position: absolute; left: 0; top: calc((var(--riga) - var(--cerchio)) / 2); z-index: 1; display: grid; place-items: center;
  width: var(--cerchio); height: var(--cerchio); border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 1rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums;
}
:is(.sequenza-passo:not(:last-child)):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *)::after { content: ""; position: absolute; left: calc((var(--cerchio) - var(--tratto)) / 2); top: calc(var(--riga) / 2); bottom: calc(var(--riga) / -2); width: var(--tratto); background: var(--navy); }

:is(.sequenza-capo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
:is(.sequenza-titolo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { font-size: var(--h3); line-height: 1.35; font-weight: 700; overflow-wrap: break-word; }
:is(.sequenza-costo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { font-size: var(--h3); line-height: 1.35; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.sequenza-unita):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { font-size: var(--piccolo); line-height: 1.5; font-weight: var(--peso-testo); }
/* dove il passo non si paga a Medyca (o è incluso) l'etichetta sta al posto del prezzo: una pillola azzurra in piccolo, più discreta del numero */
:is(.sequenza-costo--etichetta):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { padding: 2px 14px; border-radius: 999px; background: var(--cielo); font-size: var(--piccolo); line-height: 1.5; font-weight: 600; letter-spacing: .02em; }
:is(.sequenza-testo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { max-width: var(--colonna); margin-top: .5rem; }   /* il testo non supera la colonna di lettura, anche se il costo sta più a destra */

/* da 37,5em titolo e costo stanno sulla stessa riga (allineati sulla base del testo), il costo a destra; se non ci stanno il costo scende sotto il titolo */
@media (min-width: 37.5em) {
  :is(.sequenza-capo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1.5rem; }
}
@media (min-width: 52em) {
  /* la colonna del testo (40rem) più il cerchio e il costo: il testo resta a misura di lettura, il costo si legge a destra */
  :is(.sequenza):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { --cerchio: 2.5rem; --stacco: 2.5rem; --rientro: calc(var(--cerchio) + 1.5rem); max-width: 56rem; }
  :is(.sequenza-passo):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *)::before { font-size: 1.125rem; }
}
@media (min-width: 64em) {
  :is(.sequenza):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { --stacco: 3rem; }
}

/* ---------- 3. In fondo: i due bottoni (la coppia è .lungo-invito di stile.css, come in /team-medico) ---------- */
:is(.sequenza-fine):where([data-sezione^="pricing/"], [data-sezione^="pricing/"] *) { margin-top: 3rem; }