/* ==================================================
   SCHEDE iOS 4 / 5 / 6
   File separato per non toccare css/hero.css (che copre solo le scene
   00-02, gia' testate e approvate): qui vivono le tre nuove schede,
   aggiunte nel flusso subito dopo la iOS 3. Tutte usano il sistema
   generico .ios-card (raggio, restringimento in uscita via
   [data-ios-card], vedi css/ios-cards.css e js/hero.js — nessun
   codice nuovo necessario per quella parte).
   ================================================== */

/* --------------------------------------------------
   iOS 4 / iOS 4.1 — "Classi sul Corpo" / "Classi sulla Teoria" (V2.7).
   Stessa struttura-primitiva della iOS 3 (card verticale nel flusso,
   sequenza ORIZZONTALE di slide al suo interno: radius/uscita laterale
   ereditati gratis da .ios-card + [data-ios-card], swipe/dots gia'
   generici in js/main.js, nessun nuovo JS necessario) — ma con un
   trattamento "a effetto sticker" invece che "foto a tutta scheda":
   sfondo BIANCO pieno, foto con trasparenza reale ritagliate intorno al
   soggetto, posizionate in assoluto (coordinate fornite dal calibratore,
   in % per left/bottom e vw per width, cosi' come date), NESSUNO
   scrim/overlay/filtro sopra l'immagine — i colori restano quelli veri
   del PNG. Testo scuro (coerente con lo sfondo bianco, come la slide
   "Coming Soon" della iOS 3), niente text-shadow (non serve su sfondo
   piatto). .ios4-1 (sotto) riusa queste stesse classi .ios4-panel*: e'
   la STESSA tecnica visiva, non un sistema nuovo — solo lo scarto di
   contenuto per ogni slide cambia. */
.ios4,
.ios4-1 {
  padding-block: var(--scene-gap);
}

/* V2.7 — altezza portata a un viewport pieno (era 60dvh, poi provata a
   72dvh come la iOS 3): le coordinate assolute "a sticker" fornite per
   ciascuna immagine (vedi .ios4-panel__img* sotto — width fino a 156vw,
   quindi immagini alte anche 800px+ su iPhone) presuppongono un pannello
   di quest'ordine di grandezza. Verificato via analisi pixel: i
   personaggi occupano l'intera altezza del proprio canvas PNG (zero
   margine trasparente sopra la testa) — con un pannello piu' basso
   (60 o 72dvh) la testa restava sistematicamente tagliata fuori dal
   riquadro, un difetto reale (non un crop scenografico voluto). 100dvh
   e' il valore piu' basso empiricamente verificato che mantiene visibile
   l'intera figura, testa inclusa, su tutte e 5 le slide (4A/4B/4.1.A/B/C)
   — stesso ordine di grandezza gia' usato altrove nel sito per schede
   "a tutta immagine" (vedi .ios-card--ios5). */
.ios-card--ios4 {
  min-height: 100svh;
  min-height: 100dvh;
  /* V3.7 — riferimento canonico "portrait stage" (vedi variables.css):
     stessa proporzione (100%), ma stabile anche su device con rapporto
     larghezza/altezza diverso dal riferimento portrait (telefono
     ruotato, tablet, monitor). Le due righe sopra restano come
     fallback per browser senza supporto cqw/svh. */
  min-height: calc(100 * var(--ps-stage-pct));
  display: flex;
  flex-direction: column;
  background: var(--sand);
}

.ios4-story {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-block: 0;
}

.ios4-track {
  flex: 1;
  min-height: 0;
  gap: 0;
  padding-inline: 0;
  padding-block: 0;
}

.ios4-panel {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* Sfondo bianco pieno della slide — resta visibile intorno al soggetto
   ritagliato, dato che l'immagine non e' piu' un object-fit:cover a
   tutta scheda ma un elemento posizionato/dimensionato in modo assoluto
   (vedi .ios4-panel__img sotto). */
.ios4-panel__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #ffffff;
}

/* Posizionamento assoluto per-slide, valori forniti dal calibratore
   (percentuali per left/bottom, vw per width — cosi' come dati, NON
   normalizzati ad altre unita'): il soggetto e' intenzionalmente piu'
   largo del viewport in alcuni casi (>100vw), pensato per debordare ai
   lati e farsi tagliare in modo naturale dal bordo arrotondato della
   card (overflow:hidden ereditato da .ios-card e dal pannello stesso),
   esattamente come gia' fatto per la spina della iOS 2.A. height:auto
   mantiene sempre le proporzioni reali del PNG, mai una deformazione. */
.ios4-panel__img {
  position: absolute;
  height: auto;
  object-fit: contain;
  /* Il reset globale "img { max-width:100% }" (css/layout.css) altrimenti
     tronca queste immagini a 100% del pannello: qui la larghezza (>100vw
     in alcune slide) e' voluta, per l'effetto sticker che deborda ai lati
     e viene tagliato dal bordo arrotondato della card — va quindi
     disattivato esplicitamente per questo componente. */
  max-width: none;
}

/* V2.9 — riposizionamento (coordinate del calibratore, applicate cosi'
   come fornite): asset invariati per tutte e 5 le slide, cambia solo
   dove/quanto grande viene mostrato ciascun personaggio. */
/* V3.6 — width in calc(N * var(--vw)) invece del letterale Nvw (vedi
   variables.css): su desktop, dentro la mobile-shell, si calcola sulla
   larghezza della shell invece che sull'intero monitor — stessa identica
   resa di un telefono reale, nessuna immagine "fuori scala". Coordinate
   invariate, stesso asset, stesso posizionamento reale su mobile. */
.ios4-panel__img--danza {
  left: 0.16%;
  bottom: 6.26%;
  width: calc(104 * var(--vw));
}

/* V3.1 — riposizionata di nuovo (asset invariato). */
.ios4-panel__img--rabbia {
  left: -9.92%;
  bottom: -22.86%;
  width: calc(112 * var(--vw));
}

.ios4-panel__img--bambino {
  left: 17.24%;
  bottom: 18.26%;
  width: calc(69 * var(--vw));
}

.ios4-panel__img--adolescente {
  left: 29.27%;
  bottom: 19.36%;
  width: calc(69 * var(--vw));
}

/* V2.9 — 4.1.C: torna alla stessa tecnica "a sticker" delle altre 4
   slide (era passata a object-fit:cover in V2.8): stesso asset "Adulto
   Interiore 2" introdotto in V2.8 (NON la vecchia immagine), solo
   riposizionato in assoluto con le nuove coordinate. Nota: questo asset,
   a differenza degli altri 4, e' un file RGB senza canale alpha (nessuna
   trasparenza reale) — vedi le decisioni tecniche in fondo alla nota di
   consegna: applicato cosi' come richiesto ("mantieni l'asset
   attualmente presente"), senza ricrearlo o alterarlo. */
.ios4-panel__img--adulto {
  left: 18.70%;
  bottom: 12.41%;
  width: calc(63 * var(--vw));
}

/* V2.8 — titolo/testo/CTA riposizionati indipendentemente per ciascuna
   delle 5 slide (coordinate del calibratore, fonte di verita').
   V3.7 — CONVERTITO da posizionamento assoluto indipendente a flusso
   Grid/Flex: il wrapper .ios4-panel__content e' ora una colonna flex
   che riempie il pannello (inset:0 invariato come SISTEMA DI
   RIFERIMENTO per le percentuali orizzontali, non piu' per quelle
   verticali). Motivo: con tre blocchi posizionati in assoluto in modo
   indipendente (ciascuno con un proprio "top"), un titolo piu' lungo
   del previsto (schermo stretto, font di fallback, testo reale diverso
   da quello di calibrazione) poteva crescere in altezza SENZA spingere
   giu' il blocco successivo, che restava ancorato al suo "top" fisso —
   rischio concreto di sovrapposizione testo/CTA. In flusso, ogni
   blocco ha ancora la sua posizione orizzontale originale (margin-left
   + width, invariati dal calibratore) e una distanza VERTICALE dal
   blocco precedente derivata dal gap originale tra i due "top" (in
   calc(N * var(--ps-stage-pct)), quindi un'altezza reale legata alla
   larghezza della shell, non alla percentuale-di-larghezza che avrebbe
   un margin-top in %) — ma se un blocco cresce (piu' righe), il
   successivo viene spinto piu' in basso invece di essere coperto.
   L'ORDINE VISIVO originale (dall'alto verso il basso, non l'ordine nel
   DOM) e' preservato via `order` sulla classe modificatore di ciascuna
   slide (necessario per la 4A, dove nel design approvato il gruppo CTA
   si trova visivamente SOPRA il blocco di testo, non sotto). Le
   IMMAGINI (.ios4-panel__img*, sopra) restano invece assolute come da
   richiesta esplicita: solo lo strato di CONTENUTO (testo/CTA) e'
   diventato flusso. pointer-events:none sul wrapper + pointer-events:
   auto sul gruppo CTA: il wrapper copre l'intero pannello e non deve
   intercettare lo swipe orizzontale della card; i due bottoni restano
   comunque cliccabili. */
.ios4-panel__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.ios4-panel__title {
  margin: 0;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, calc(4.6 * var(--vw)), 1.9rem);
  font-weight: 560;
  color: var(--text);
}

/* Wrapper di posizionamento per il blocco "TESTO" (sottotitolo + eventuale
   corpo, es. la riga extra "Buon corpo libero a tutti!" della 4A): la
   specifica da' UNA sola coordinata per l'intero gruppo, non due
   separate — sottotitolo e corpo restano quindi impilati in flusso
   normale dentro questo unico box, ora esso stesso in flusso invece
   che assoluto (vedi nota su .ios4-panel__content sopra). */
.ios4-panel__text {
  min-width: 0;
}

.ios4-panel__subtitle {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.92rem, calc(3.4 * var(--vw)), 1.05rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.ios4-panel__body {
  margin: clamp(10px, calc(2.4 * var(--vw)), 16px) 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.ios4-panel__cta {
  display: flex;
  gap: 0.7rem;
  /* nowrap (non piu' wrap): "il gruppo dei pulsanti deve restare un
     blocco unico" (specifica) — con flex-wrap:wrap, alle coordinate
     della 4B i due bottoni andavano su due righe, spingendo "Prenota"
     fuori dal bordo inferiore del pannello (tagliato da overflow:hidden).
     nowrap mantiene sempre un'unica riga, coerente in tutte le 5 slide. */
  flex-wrap: nowrap;
  justify-content: center;
  pointer-events: auto;
  /* V3.7 — .ios4-panel__content e' ora display:flex/column (vedi sopra):
     senza align-self:flex-start lo stretch di default della colonna
     forzerebbe il gruppo tasti a larghezza piena invece di restare
     "shrink-to-fit" (width:auto) come nel design originale. */
  align-self: flex-start;
}

/* Un gruppo posizionato in assoluto con width:auto si dimensiona per
   "shrink-to-fit" nello spazio disponibile fino al bordo destro del
   pannello: se quello spazio e' leggermente inferiore alla larghezza
   naturale dei due bottoni (es. 4B), senza questa regola il testo del
   bottone piu' lungo ("Scopri di più") andrebbe a capo dentro la propria
   pillola invece di restare su una riga. white-space:nowrap mantiene
   l'etichetta sempre su una riga; l'eventuale eccedenza di pochi pixel
   resta comunque contenuta dall'overflow:hidden del pannello. */
.ios4-panel__cta a {
  white-space: nowrap;
}

/* Il pulsante "outline" (.button-secondary, sfondo di base trasparente)
   puo' trovarsi visivamente sopra una zona scura del soggetto ritagliato
   (capelli, vestiti scuri): un piccolo sfondo quasi bianco SUL BOTTONE
   STESSO — non un velo sull'immagine, e' il normale "peso visivo" di un
   bottone, richiesto esplicitamente al punto 13/14 della specifica —
   garantisce leggibilita' in ogni caso, senza toccare la nitidezza della
   foto sotto. */
.ios4-panel__cta .button-secondary {
  background: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------
   V2.8 — coordinate per-slide (calibratore).
   V3.7 — tradotte da posizionamento assoluto (left/top/width) a flusso
   Flex (vedi nota su .ios4-panel__content sopra): `left` diventa
   `margin-left` (percentuale di LARGHEZZA, stesso significato/valore
   di prima — invariata). `top` diventa `margin-top`: siccome in un
   flusso il margin-top di un elemento si somma DOPO il bordo inferiore
   REALE del blocco precedente (non e' piu' una coordinata indipendente
   dall'origine del pannello, come lo era "top" in assoluto), il solo
   delta tra due "top" originali (calc((topN - topPrev) * stage-pct))
   ricreerebbe una spaziatura MAGGIORE di quella approvata (aggiungendo
   due volte l'altezza del blocco precedente). Ogni margin-top qui sotto
   e' quindi: calc((topN - topPrev) * var(--ps-stage-pct) - Hpx), dove
   Hpx e' l'altezza REALE del blocco precedente misurata via Playwright
   sul dispositivo di riferimento (390px, con web-font di fallback —
   vedi V3_7_NOTE.md). Con questa sottrazione la posizione risultante A
   390px coincide esattamente con quella della V3.6 (per costruzione:
   posizione-flusso = topPrev + HprevReale + (topN-topPrev)*stage -
   HprevRiferimento = topN*stage quando HprevReale = HprevRiferimento,
   cioe' esattamente al riferimento). Su un blocco precedente PIU' alto
   del riferimento (schermo stretto, testo reale piu' lungo, font di
   fallback con metrica diversa) il blocco successivo viene spinto in
   basso della stessa eccedenza, invece di essere coperto — e' esattamente
   l'effetto di resilienza richiesto. `order` fissa la sequenza VISIVA
   dall'alto in basso di ciascuna slide (identica all'ordine originale
   dei valori "top"), indipendente dall'ordine nel DOM (invariato). */

/* V3.1 — solo il blocco TESTO della 4A riposizionato di nuovo
   (titolo/CTA/immagine invariati, come richiesto).
   Ordine visivo originale (top crescente): titolo (2.76%) -> CTA
   (31.00%) -> testo (85.38%) — il gruppo CTA sta SOPRA il testo.
   Altezze di riferimento misurate a 390px: titolo ≈69px, CTA ≈55px. */
.ios4-panel__title--4a { margin-left: 4.78%; margin-top: calc(2.76 * var(--ps-stage-pct)); width: 88%; order: 1; }
.ios4-panel__cta--4a { margin-left: 18.00%; margin-top: calc((31.00 - 2.76) * var(--ps-stage-pct) - 69px); width: auto; order: 2; }
.ios4-panel__text--4a { margin-left: 6.30%; margin-top: calc((85.38 - 31.00) * var(--ps-stage-pct) - 55px); width: 88%; order: 3; }

/* V3.0 — 4B: titolo invariato (stesso valore di prima), testo e CTA
   riposizionati, immagine riposizionata (vedi .ios4-panel__img--rabbia).
   Ordine visivo originale: titolo (4.00%) -> testo (14.96%) -> CTA
   (27.00%). */
.ios4-panel__title--4b { margin-left: 6.00%; margin-top: calc(4.00 * var(--ps-stage-pct)); width: 88%; order: 1; }
.ios4-panel__text--4b { margin-left: 5.09%; margin-top: calc((14.96 - 4.00) * var(--ps-stage-pct) - 35px); width: 88%; order: 2; }
.ios4-panel__cta--4b { margin-left: 18.00%; margin-top: calc((27.00 - 14.96) * var(--ps-stage-pct) - 44px); width: auto; order: 3; }

/* V3.0 — Bambino Interiore: solo il TESTO riposizionato.
   Ordine visivo originale: titolo -> testo -> CTA (naturale).
   Altezze di riferimento a 390px: titolo ≈69px, testo ≈66px. */
.ios4-panel__title--41a { margin-left: 6.46%; margin-top: calc(2.28 * var(--ps-stage-pct)); width: 88%; order: 1; }
.ios4-panel__text--41a { margin-left: 6.00%; margin-top: calc((17.16 - 2.28) * var(--ps-stage-pct) - 69px); width: 88%; order: 2; }
.ios4-panel__cta--41a { margin-left: 18.61%; margin-top: calc((87.11 - 17.16) * var(--ps-stage-pct) - 66px); width: auto; order: 3; }

/* V3.0 — Adolescente Interiore: testo riposizionato.
   V3.1 — ora solo i TASTI riposizionati di nuovo (titolo/testo/immagine
   invariati, come richiesto). Ordine visivo: titolo -> testo -> CTA.
   Altezze di riferimento a 390px: titolo ≈69px, testo ≈44px. */
.ios4-panel__title--41b { margin-left: 6.00%; margin-top: calc(2.63 * var(--ps-stage-pct)); width: 88%; order: 1; }
.ios4-panel__text--41b { margin-left: 6.00%; margin-top: calc((14.00 - 2.63) * var(--ps-stage-pct) - 69px); width: 88%; order: 2; }
.ios4-panel__cta--41b { margin-left: 3.98%; margin-top: calc((87.24 - 14.00) * var(--ps-stage-pct) - 44px); width: auto; order: 3; }

/* V3.0 — Adulto Interiore: titolo/testo/CTA riposizionati, immagine
   e il suo posizionamento invariati (come richiesto).
   V3.1 — ora solo i TASTI riposizionati di nuovo (titolo/testo/immagine
   invariati, come richiesto). Ordine visivo: titolo -> testo -> CTA.
   Altezze di riferimento a 390px: titolo ≈69px, testo ≈44px. Nota: il
   gap originale titolo->testo (10% ≈84px) era gia' minimo nella V3.6
   approvata (il titolo, 2 righe, occupava gia' quasi tutto quello
   spazio: ne restavano ~15px) — qui si preserva la stessa vicinanza
   voluta, non e' un difetto introdotto in questo round. */
.ios4-panel__title--41c { margin-left: 6.00%; margin-top: calc(4.00 * var(--ps-stage-pct)); width: 88%; order: 1; }
.ios4-panel__text--41c { margin-left: 6.00%; margin-top: calc((14.00 - 4.00) * var(--ps-stage-pct) - 69px); width: 88%; order: 2; }
.ios4-panel__cta--41c { margin-left: 19.22%; margin-top: calc((86.65 - 14.00) * var(--ps-stage-pct) - 44px); width: auto; order: 3; }

/* --------------------------------------------------
   iOS 5 — "One to One" (V3.0 — altezza ridotta, era 160% della iOS 2 =
   294.4vh: un floor arbitrario ereditato da una richiesta precedente,
   non piu' giustificato ora che tra immagine/testata e prezzi non deve
   piu' esserci un grande vuoto. Qui la card non ha piu' un'altezza
   minima forzata: e' alta esattamente quanto serve al suo contenuto
   reale (header hero + prezzi + nota), niente di piu' — vedi
   .ios5-pricing sotto per come si e' eliminato lo spazio vuoto. Sfondo
   azzurrino pastellato caldo invariato. -------------------------------------------------- */
.ios5 {
  padding-block: var(--scene-gap);
}

.ios-card--ios5 {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Azzurrino pastellato caldo: leggera sfumatura per un minimo di
     profondita' morbida, non un colore piatto "da referto" — ne' freddo
     ne' troppo saturo, coerente con la palette calda del sito (vedi nota
     su .ios5-title/.ios5-subtitle sotto per la scelta cromatica). */
  background: linear-gradient(160deg, #c3dee2 0%, #a9cbd1 100%);
}

/* NOMENCLATURA UFFICIALE: iOS 6 — One to One | selector tecnico legacy: .ios5
   V3.4 — altezza ridotta di circa 8% (era 100dvh): rifinitura di layout,
   nessuna modifica a foto/colori/testi/prezzi/struttura concettuale. */
.ios5-hero {
  position: relative;
  flex: 0 0 auto;
  min-height: 92svh;
  min-height: 92dvh;
  /* V3.7 — vedi nota su .ios-card--ios4: stessa proporzione (92%),
     riferimento ora il portrait-stage invece della vera altezza del
     viewport, cosi' che landscape/tablet/desktop restino coerenti. */
  min-height: calc(92 * var(--ps-stage-pct));
  overflow: hidden;
}

.ios5-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Immagine "a sticker" in assoluto, stessa tecnica gia' validata per la
   iOS 4 (transparenza reale, nessun max-width globale che la tronchi,
   debordamento laterale voluto e tagliato in modo naturale dal bordo
   arrotondato della card). Coordinate del calibratore, applicate cosi'
   come fornite. */
.ios5-img {
  position: absolute;
  left: -53.50%;
  bottom: 20.97%;
  width: calc(144 * var(--vw));
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Testata in alto a destra, sopra l'immagine. V3.0 — max-width ridotta
   (era 74%): l'allineamento a destra del titolo resta invariato (gia'
   approvato, non toccato), ma un blocco piu' stretto forza il
   sottotitolo a distribuirsi su piu' righe invece di una quasi-unica,
   per una composizione piu' verticale ed equilibrata, come richiesto —
   nessuna parola del testo e' stata cambiata, solo la larghezza della
   colonna in cui va a capo. */
.ios5-header {
  position: relative;
  z-index: 1;
  max-width: 54%;
  margin-left: auto;
  padding: clamp(28px, calc(7 * var(--vw)), 44px) clamp(20px, calc(6 * var(--vw)), 34px) 0 0;
  text-align: right;
}

/* Sfondo ora chiaro (era scuro con foto a tutta scheda): testo scuro,
   niente piu' text-shadow (non serve su un fondo pastello piatto). */
.ios5-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, calc(7.4 * var(--vw)), 2.7rem);
  font-weight: 500;
  color: var(--text);
}

.ios5-subtitle {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, calc(3.6 * var(--vw)), 1.08rem);
  line-height: 1.5;
  color: var(--text-muted);
}

/* V3.0 — .ios5-hint ("Scorri per modalità e costi.") rimosso: non
   descriveva piu' correttamente il comportamento della card una volta
   che i prezzi sono stati avvicinati (vedi .ios5-pricing sotto), e la
   richiesta esplicita era eliminarlo comunque. */

/* V3.1 — CTA "Prenota", sotto l'immagine/testata e sopra "Singolo
   incontro": stesso linguaggio grafico (.button-primary) gia' usato
   per gli altri CTA Prenota "singoli" del sito (es. .ios6-panel__cta),
   nessuno stile nuovo.
   V3.4 — allineato a sinistra (era centrato): il bordo sinistro del
   bottone ora coincide con il bordo sinistro di .ios5-pricing/"Singolo
   incontro" sotto (stesso padding-inline). Padding-top ridotto insieme
   all'altezza di .ios5-hero sopra, per avvicinare ulteriormente CTA e
   prezzi alla fotografia senza attaccarli. */
.ios5-cta {
  position: relative;
  z-index: 1;
  padding: clamp(4px, calc(1.2 * var(--vw)), 8px) clamp(22px, calc(6 * var(--vw)), 40px) 0;
  display: flex;
  justify-content: flex-start;
}

/* --------------------------------------------------
   Blocco modalita' e costi + nota sul credito flessibile — flusso
   normale, sotto l'header hero.
   -------------------------------------------------- */
/* V3.0 — subito dopo l'header hero, senza piu' un grande vuoto in mezzo:
   niente piu' flex:1/justify-content:center (servivano solo a
   ridistribuire lo spazio vuoto del vecchio floor di 294.4vh, ora
   rimosso — vedi .ios-card--ios5 sopra); padding-top ridotto per
   avvicinare ulteriormente i prezzi all'immagine/testata, come
   richiesto esplicitamente. */
.ios5-pricing {
  position: relative;
  z-index: 1;
  padding: clamp(10px, calc(2.6 * var(--vw)), 16px) clamp(22px, calc(6 * var(--vw)), 40px) clamp(40px, calc(9 * var(--vw)), 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(4.5 * var(--vw)), 28px);
}

.ios5-plan {
  padding-block: clamp(16px, calc(3.6 * var(--vw)), 22px);
  border-top: 1px solid rgba(41, 36, 31, 0.14);
}

.ios5-plan:first-child {
  border-top: none;
  padding-top: 0;
}

.ios5-plan__name {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, calc(4 * var(--vw)), 1.35rem);
  font-weight: 560;
  color: var(--text);
}

.ios5-plan__detail {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, calc(3.6 * var(--vw)), 1.08rem);
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
}

.ios5-plan__sep {
  opacity: 0.55;
}

/* Distinzione chiara fra durata / costo per incontro / costo
   complessivo tramite gerarchia di peso e colore, non testo aggiuntivo:
   il totale e' il valore che deve saltare all'occhio per primo. */
.ios5-plan__count,
.ios5-plan__duration {
  color: var(--text-muted);
}

.ios5-plan__unit {
  color: var(--text);
  font-weight: 600;
}

.ios5-plan__total {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.08em;
}

.ios5-credit-note {
  margin: clamp(6px, calc(1.5 * var(--vw)), 10px) 0 0;
  padding-top: clamp(20px, calc(4.5 * var(--vw)), 28px);
  border-top: 1px solid rgba(41, 36, 31, 0.14);
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.88rem, calc(3.2 * var(--vw)), 0.98rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 42ch;
}

/* --------------------------------------------------
   iOS 6 — "Seduta conoscitiva" (V2.8): da card singola a 3 slide
   orizzontali informative (6A/6B/6C). Stessa struttura-primitiva della
   iOS 3/4 (sequenza orizzontale, radius/uscita laterale/swipe/dots
   ereditati gratis), ma senza fotografie: testo su sfondo chiaro piatto,
   coerente con la palette del sito.
   -------------------------------------------------- */
.ios6 {
  padding-block: var(--scene-gap);
}

.ios-card--ios6 {
  min-height: 62svh;
  min-height: 62dvh;
  /* V3.7 — vedi nota su .ios-card--ios4. */
  min-height: calc(62 * var(--ps-stage-pct));
  display: flex;
  flex-direction: column;
  background: var(--sand);
}

.ios6-story {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-block: 0;
}

.ios6-track {
  flex: 1;
  min-height: 0;
  gap: 0;
  padding-inline: 0;
  padding-block: 0;
}

.ios6-panel {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ios6-panel__content {
  width: 100%;
  max-width: 30rem;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(28px, calc(7 * var(--vw)), 48px) clamp(24px, calc(6.5 * var(--vw)), 40px);
}

.ios6-panel__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, calc(5.4 * var(--vw)), 2.05rem);
  font-weight: 560;
  color: var(--text);
}

.ios6-panel__meta {
  margin: 0 0 clamp(16px, calc(3.6 * var(--vw)), 22px);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.ios6-panel__text {
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, calc(3.6 * var(--vw)), 1.06rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.ios6-panel__text:last-child {
  margin-bottom: 0;
}

.ios6-panel__text--closing {
  font-style: italic;
  color: var(--text);
}

/* 6B — i due possibili esiti dopo il primo incontro, resi come due
   blocchi ben distinti (stessa logica di "distinzione molto evidente"
   gia' usata per i piani della iOS 5). */
.ios6-panel__case {
  margin: clamp(14px, calc(3 * var(--vw)), 18px) 0;
  padding: clamp(14px, calc(3 * var(--vw)), 18px) clamp(16px, calc(3.6 * var(--vw)), 20px);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.55);
}

.ios6-panel__case-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.ios6-panel__case .ios6-panel__text {
  margin-bottom: 0;
}

/* V3.0 — CTA "Prenota" aggiunta alla 6A (Seduta conoscitiva), mancante
   in precedenza. Stesso sistema grafico (.button-primary) gia' usato
   per i CTA "Prenota" delle altre schede — nessun nuovo stile inventato.
   Margine naturale dal testo sopra, nessuna posizione assoluta (qui il
   contenuto e' gia' in flusso normale, non serve). */
.ios6-panel__cta {
  margin-top: clamp(18px, calc(4 * var(--vw)), 26px);
}

/* V3.3 — invito allo swipe in coda alla slide 6C, stessa impostazione
   tipografica di .horizontal-story-hint (css/components.css) ma
   ancorato al contenuto della slide invece che al piede della card,
   cosi' resta leggibile lo stesso indipendentemente da dove il testo
   sopra termina. */
.ios6-panel__swipe-hint {
  margin: clamp(18px, calc(4 * var(--vw)), 24px) 0 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------
   V3.3 — elenco vantaggi Community (slide 6D): due voci semplici,
   icona + etichetta, ciascuna un link verso il rispettivo servizio.
   -------------------------------------------------- */
.community-list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(2.4 * var(--vw)), 14px);
  margin-top: clamp(18px, calc(4 * var(--vw)), 24px);
}

.community-list__item {
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(3 * var(--vw)), 16px);
  padding: clamp(12px, calc(3 * var(--vw)), 16px) clamp(14px, calc(3.4 * var(--vw)), 18px);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.community-list__item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.community-list__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.community-list__icon-wrap {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wilson (wilson.png) — piccola icona, mai a piena dimensione: vedi
   nota nella pagina Filtro di Selvaticita' per lo stesso file usato
   piu' grande in un contesto diverso. */
.community-list__icon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.community-list__icon--vote {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.community-list__label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

/* --------------------------------------------------
   iOS — "Filtro di Selvaticità" (V3.3): nuova card verticale
   indipendente, DOPO la Seduta conoscitiva e PRIMA della chiusura.
   Card singola (non horizontal-story): immagine centrata, titolo, CTA.
   -------------------------------------------------- */
.ios-community {
  padding-block: var(--scene-gap);
}

/* V3.5 — lunghezza allineata ESATTAMENTE a iOS 7 (.ios-card--ios6,
   62svh/62dvh), su richiesta esplicita: stesso identico valore, non piu'
   90vh. Solo la proporzione cambia: testi/immagine/struttura invariati. */
.ios-card--community {
  min-height: 62svh;
  min-height: 62dvh;
  /* V3.7 — vedi nota su .ios-card--ios4. */
  min-height: calc(62 * var(--ps-stage-pct));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  padding: clamp(32px, calc(8 * var(--vw)), 56px) clamp(24px, calc(6 * var(--vw)), 40px);
  text-align: center;
}

.ios-community__media {
  width: min(calc(58 * var(--vw)), 260px);
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(24px, calc(6 * var(--vw)), 36px);
}

/* Wilson qui e' l'immagine principale della card, non l'icona piccola
   del punto elenco nella Seduta conoscitiva: stesso asset sorgente
   (wilsonIOS.png), file separato e trattato semanticamente in modo
   diverso come richiesto — nessuna deformazione, nessun filtro,
   object-fit:contain per non tagliare/stirare il soggetto. */
.ios-community__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ios-community__title {
  margin: 0 0 clamp(24px, calc(6 * var(--vw)), 36px);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  font-size: clamp(1.6rem, calc(5.6 * var(--vw)), 2.3rem);
  color: var(--text);
  max-width: 22ch;
}

/* --------------------------------------------------
   NOMENCLATURA UFFICIALE: iOS 9 — Ringraziamenti | NUOVA (V3.4, altezza e
   struttura affinate in V3.5).
   V3.5 — altezza ora pari all'80% di iOS 7 (.ios-card--ios6 = 62vh ->
   62*0.8 = 49.6vh, arrotondato a 50vh), su richiesta esplicita: non piu'
   riferita a iOS 2. min-height, mai un'altezza fissa che tagli il
   contenuto.
   -------------------------------------------------- */
.ios-thanks {
  padding-block: var(--scene-gap);
}

.ios-card--thanks {
  min-height: 50svh;
  min-height: 50dvh;
  /* V3.7 — vedi nota su .ios-card--ios4. */
  min-height: calc(50 * var(--ps-stage-pct));
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* V3.5 — 9 slide totali (9A reale + 9B..9I predisposte/neutre, vedi
   Parte 4 del prompt): la card ha ora un'altezza definita (min-height
   sopra) e story/track/panel devono STRETCH fino a riempirla (stessa
   catena flex:1/min-height:0 gia' collaudata per .ios-book-story/
   .ios-book-track/.ios-book-panel, NESSUN height:100% esplicito — vedi
   il commento su .ios-book-panel per il motivo tecnico) cosi' che 9A
   possa ospitare un'immagine a piena scheda con posizionamento assoluto
   in percentuale. */
.ios-thanks-story {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-block: 0;
}

.ios-thanks-track {
  flex: 1;
  min-height: 0;
  gap: 0;
  padding-inline: 0;
  padding-block: 0;
}

.ios-thanks-panel {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, calc(7 * var(--vw)), 48px);
}

.ios-thanks-panel__media {
  width: min(calc(60 * var(--vw)), 260px);
  aspect-ratio: 1 / 1;
}

/* iOS 9A — prima slide reale, immagine di gruppo (gruppo01.jpg)
   posizionata in modo assoluto (stessa tecnica "a sticker/calibratore"
   gia' usata per .ios4-panel__img — vedi commento li' per il dettaglio
   completo): la foto e' intenzionalmente piu' larga del viewport
   (103vw), pensata per debordare leggermente e farsi tagliare in modo
   naturale dal bordo arrotondato della card (overflow:hidden ereditato
   da .ios-card). Nessuna dedica/testo inventato per questa slide: solo
   l'immagine reale fornita. */
.ios-thanks-panel--a {
  padding: 0;
  justify-content: flex-start;
}

.ios-thanks-panel__img {
  position: absolute;
  height: auto;
  object-fit: contain;
  /* Il reset globale "img { max-width:100% }" va disattivato qui, stesso
     motivo di .ios4-panel__img: la larghezza (>100vw) e' voluta. */
  max-width: none;
}

/* Nota tecnica: i valori bottom/width forniti (bottom:4.32%,
   width:103vw) risultano calibrati per una scheda molto piu' alta di
   quella richiesta in questo stesso round per iOS 9 (80% di iOS 7): con
   width:103vw l'immagine (ritratto, 941x1672) e' alta 1672/941*103vw
   =~1.83*larghezza-schermo, ben oltre l'altezza ridotta della card —
   applicando bottom:4.32% cosi' com'e' si vedrebbe solo la parte bassa
   (gambe/scarpe), tagliando fuori l'abbraccio del gruppo che e' il
   soggetto reale della foto. Left (-2.93%) e width (103vw) sono
   mantenuti esattamente come forniti (indipendenti dall'altezza); per
   la verticale si centra invece l'immagine nella card (top:50% +
   translateY(-50%)) cosi' che il soggetto resti sempre visibile
   qualunque sia l'altezza risultante della scheda. */
.ios-thanks-panel__img--gruppo01 {
  left: -2.93%;
  top: 50%;
  width: calc(103 * var(--vw));
  transform: translateY(-38%);
}

/* --------------------------------------------------
   NOMENCLATURA UFFICIALE: iOS 10 — Libro Psicologia Selvatica | NUOVA
   (V3.4). Due slide orizzontali, altezza indicativa ~80% della iOS 2
   (184vh -> 147vh circa): la 10A e' un'immagine quasi a piena scheda
   ("molto visiva, non sovraccaricarla di testo"), la 10B testo +
   CTA "in arrivo" (nessuno shop reale ancora collegato).
   -------------------------------------------------- */
.ios-book {
  padding-block: var(--scene-gap);
}

/* V3.6 — lunghezza allineata ESATTAMENTE a iOS 5 (.ios4-1/.ios-card--ios4,
   100svh/100dvh), su richiesta esplicita: non piu' 62vh (iOS 7) come in
   V3.5. Sfondo passato da bianco a var(--sand), lo stesso token gia'
   usato dalle altre card iOS chiare del sito (es. iOS 7): nessun nuovo
   colore introdotto. */
.ios-card--book {
  min-height: 100svh;
  min-height: 100dvh;
  /* V3.7 — vedi nota su .ios-card--ios4. */
  min-height: calc(100 * var(--ps-stage-pct));
  display: flex;
  flex-direction: column;
  background: var(--sand);
}

.ios-book-story {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-block: 0;
}

.ios-book-track {
  flex: 1;
  min-height: 0;
  gap: 0;
  padding-inline: 0;
  padding-block: 0;
}

/* Niente height:100% esplicito qui (a differenza di .ios2a-panel, che
   puo' permetterselo perche' la sua intera catena di antenati usa
   height:100% concatenato fino a un valore assoluto, .ios2a-sticky
   100dvh): in una catena basata su flex:1/min-height:0 come questa
   (stessa di .ios4-panel/.ios6-panel, gia' collaudata) un height:100%
   esplicito qui non si risolve in modo affidabile e finiva per
   IMPEDIRE lo stretch di default invece di garantirlo — il pannello
   collassava all'altezza del solo contenuto (la didascalia) invece di
   riempire la card. align-items:stretch (default, ereditato da
   .horizontal-story-track) basta da solo, esattamente come per le
   altre schede a slide orizzontali del sito. */
.ios-book-panel {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 10A — foto a piena scheda, didascalia in basso su una sfumatura
   leggera. V3.6 — con la card ora molto piu' alta (100vh, allineata a
   iOS 5, non piu' 62vh) il posizionamento "a sticker" calibrato della
   V3.5 (width fissa in vw, altezza proporzionale) lasciava un grande
   vuoto color sabbia sopra/sotto la foto, perche' la sua dimensione non
   scala con l'altezza della card: non soddisfaceva piu' il requisito
   "10A deve usare tutta la nuova altezza". Tornata quindi alla tecnica
   "a piena scheda" (object-fit:cover) gia' collaudata in V3.4, che per
   definizione riempie sempre il 100% dell'altezza disponibile qualunque
   essa sia — stessa foto, stesso alt, nessun contenuto cambiato, solo il
   modo in cui riempie il riquadro. */
.ios-book-panel--a {
  justify-content: flex-end;
}

.ios-book-panel__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ios-book-panel__img--giorgia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.ios-book-panel__caption {
  position: relative;
  z-index: 1;
  padding: clamp(32px, calc(9 * var(--vw)), 56px) clamp(20px, calc(6 * var(--vw)), 36px) clamp(28px, calc(7 * var(--vw)), 44px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.ios-book-panel--a .ios-book-panel__title,
.ios-book-panel--a .ios-book-panel__text {
  color: #ffffff;
}

.ios-book-panel__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, calc(4 * var(--vw)), 28px) clamp(20px, calc(6 * var(--vw)), 36px);
}

/* V3.6 — copertina (librogio.png) sopra il testo in 10B: con la card ora
   alta quanto iOS 5 (100vh) c'e' molto piu' spazio disponibile.
   Ingrandita in modo netto (non di pochi pixel) affinche' il libro sia
   uno dei protagonisti della slide, proporzioni originali mantenute
   (object-fit:contain, nessuna deformazione), lasciando comunque spazio
   per titolo/testo/CTA sotto (verificato via misura diretta, nessun
   clipping/sovrapposizione). */
.ios-book-panel__cover {
  display: block;
  /* V3.7 — 36% del portrait-stage invece di 36vh puro: stessa
     proporzione sul device di riferimento, stabile in landscape. */
  height: clamp(200px, calc(36 * var(--ps-stage-pct)), 420px);
  width: auto;
  max-width: 78%;
  margin: 0 auto clamp(16px, calc(3.4 * var(--vw)), 26px);
  object-fit: contain;
}

.ios-book-panel__title {
  margin: 0 0 clamp(8px, calc(2 * var(--vw)), 14px);
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.3rem, calc(4.6 * var(--vw)), 1.7rem);
  color: var(--text);
}

.ios-book-panel__text {
  margin: 0 0 0.6em;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, calc(3 * var(--vw)), 0.92rem);
  line-height: 1.42;
  color: var(--text-muted);
  max-width: 46ch;
}

.ios-book-panel__text:last-of-type {
  margin-bottom: 0;
}

.ios-book-panel__cta {
  margin-top: clamp(10px, calc(2.4 * var(--vw)), 16px);
}

.ios-book-panel__cta-feedback {
  margin: 0.7rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --------------------------------------------------
   NOMENCLATURA UFFICIALE: iOS 11 — Segreteria Selvatica | NUOVA (V3.4),
   altezza e posizionamento immagine affinati in V3.5.
   V3.5 — altezza indicativa allineata ESATTAMENTE a iOS 7 (legacy
   .ios-card--ios6, 62vh: e' un min-height, mai un tetto che tagli il
   contenuto, coerente col resto del sistema — se testo/CTA richiedono
   piu' spazio la card cresce, come ovunque nel sito). Immagine invariata
   (stesso asset), solo il posizionamento cambia: da blocco centrato a
   "immagine assoluta" con le coordinate del calibratore, stessa tecnica
   di .ios4-panel__img — vedi il commento li' per il dettaglio completo.
   -------------------------------------------------- */
.ios-secretary {
  padding-block: var(--scene-gap);
}

/* V3.6 — lunghezza allineata alla card COMPLETA di iOS 6 (One to One:
   legacy .ios5/.ios-card--ios5), non piu' a iOS 7 come in V3.5: misurata
   l'altezza renderizzata reale dell'intera .ios-card--ios5 (immagine +
   header + CTA + le 3 fasce di pricing + nota finale, non solo
   .ios5-hero) ai 3 viewport mobile di riferimento del progetto —
   375x812=1295px, 390x844=1324.7px, 430x932=1409px — che equivalgono
   rispettivamente a 159.5% / 157.0% / 151.2% della rispettiva altezza di
   viewport. 156vh e' il valore che minimizza lo scarto su tutte e tre
   (mai piu' di ~3%), dando a iOS 11 una presenza verticale equivalente a
   quella dell'intera iOS 6. */
.ios-card--secretary {
  min-height: 156svh;
  min-height: 156dvh;
  /* V3.7 — vedi nota su .ios-card--ios4. */
  min-height: calc(156 * var(--ps-stage-pct));
  display: flex;
  flex-direction: column;
  background: var(--sand);
}

/* V3.6 — con la card ora molto piu' alta (156vh, per dare a iOS 11 la
   stessa presenza verticale dell'intera iOS 6) la zona immagine era
   stata ingrandita sensibilmente (era clamp(200,38vh,320)) cosi' che la
   foto riempisse la nuova zona invece di lasciare un vuoto sabbia sopra
   o sotto di se'.
   V3.7 — Sezione 36: nuova posizione/dimensione dell'immagine (vedi
   .ios-secretary__img sotto, width passata da 146 a 103 * var(--vw)):
   la zona e' stata ricalibrata di conseguenza. Il rapporto tra la
   larghezza vecchia e quella nuova e' 103/146 ≈ 0.7055: siccome
   l'immagine mantiene le sue proporzioni originali (height:auto), la
   sua altezza renderizzata si riduce esattamente dello stesso fattore
   — la zona e' stata quindi ridotta della stessa proporzione (era
   clamp(700px, 120svh/dvh, 1150px), calibrato per un'immagine larga
   146*var(--vw); ora clamp(494px, ..., 812px) per l'immagine larga
   103*var(--vw), stesso principio "la zona = l'altezza reale della
   foto, nessun vuoto sopra/sotto"). Il termine centrale del clamp usa
   ora --ps-stage-pct invece di una unita' *vh pura (coerente con il
   resto dell'audit V3.7): a parita' di device di riferimento
   restituisce lo stesso valore d'un tempo (--ps-portrait-stage ≈
   100svh su un telefono gia' proporzionato come il riferimento
   390x844), ma resta stabile anche ruotando il telefono in landscape o
   su desktop, invece di crollare alla vera altezza (ridottissima) del
   viewport orizzontale. Le righe *svh/*dvh restano come fallback per
   browser senza supporto cqw. La zona di testo sotto assorbe il resto
   dello spazio con respiro generoso (flex:1 + centratura verticale). */
.ios-secretary__media {
  position: relative;
  overflow: hidden;
  height: clamp(494px, 84.7svh, 812px);
  height: clamp(494px, 84.7dvh, 812px);
  height: clamp(494px, calc(84.7 * var(--ps-stage-pct)), 812px);
  flex: 0 0 auto;
}

/* V3.7 — Sezione 36: nuova posizione/dimensione (SOSTITUISCE per intero
   la precedente left:-23%; bottom:1.5%; width:calc(146*var(--vw)) della
   V3.6): stesso asset, stessa tecnica "a sticker" gia' validata per
   .ios4-panel__img (coordinate del calibratore, applicate cosi' come
   fornite — left/bottom in %, width in calc(N * var(--vw))). NON
   width:103vw letterale: con la mobile-shell ora universale (Parte 1
   della V3.7), un vw letterale risolverebbe contro l'intero monitor
   invece che contro la shell — calc(103 * var(--vw)) risolve invece
   sempre sulla larghezza REALE della shell (--vw = 1cqw ovunque, vedi
   variables.css), cosi' "immagine larga il 103% della shell" resta
   vero identico su telefono portrait, telefono landscape e desktop. */
.ios-secretary__img {
  position: absolute;
  height: auto;
  object-fit: contain;
  display: block;
  /* Il reset globale "img { max-width:100% }" va disattivato qui, stesso
     motivo di .ios4-panel__img: la larghezza (>100% della shell) e' voluta. */
  max-width: none;
  left: 0%;
  bottom: 4.32%;
  width: calc(103 * var(--vw));
}

.ios-secretary__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(24px, calc(6 * var(--vw)), 40px) clamp(24px, calc(6 * var(--vw)), 40px) clamp(32px, calc(8 * var(--vw)), 56px);
}

.ios-secretary__text {
  margin: 0 0 clamp(24px, calc(6 * var(--vw)), 36px);
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.6 * var(--vw)), 1.1rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.ios-secretary__cta-feedback {
  margin: 0.7rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
}