/* ═══════════════════════════════════════════════════════════════════════
   Il foglio di stile della vetrina, condiviso dalle cinque lingue
   (/, /en/, /de/, /es/, /fr/).

   ⚠️ Era dentro index.html, come negli altri documenti del sito. È uscito
   il 05/10/2026 quando la vetrina è diventata cinque pagine: cinque copie
   di ottocento righe divergono al primo ritocco, e la pagina tedesca
   finirebbe con un colore diverso dall'italiana senza che nessuno se ne
   accorga. privacy, termini e supporto tengono ancora il loro stile in
   linea: sono pagine diverse, con un foglio loro.

   Gli url qui dentro (la maschera del rinoceronte) si risolvono rispetto
   a QUESTO file, non alla pagina: per questo valgono anche da /de/.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Variabili colore: chiaro di serie, scuro sotto ---------- */
:root {
  --colore-primario: #006D7A;      /* ottanio, colore del marchio */
  --colore-su-primario: #ffffff;
  --colore-sfondo: #ffffff;
  --colore-superficie: #f3f6f7;
  --colore-bordo: #dfe6e8;
  --colore-testo: #16232a;
  --colore-testo-attenuato: #52646c;
  --ombra-scheda: 0 1px 2px rgba(16, 32, 38, 0.08);

  /* Fisso in entrambi i temi: è il testo del pulsante bianco sulla fascia
     ottanio della testata. --colore-primario in scuro si schiarisce per
     restare leggibile su fondo scuro, ma qui il fondo del pulsante è
     sempre bianco, quindi serve un colore scuro che non segua quel cambio. */
  --colore-pulsante-chiaro-testo: #00565f;

  --colore-cornice-telefono-bordo: rgba(0, 0, 0, 0.08);
  --ombra-telefono: 0 24px 50px rgba(16, 32, 38, 0.22), 0 4px 14px rgba(16, 32, 38, 0.14);
  --altezza-nav: 68px;

  /* ---------- L'oro di Rino ----------
     ⚠️ Non sono colori nuovi: sono **gli stessi** della vetrina dell'app
     (`ColoriRino` in `lib/widgets/lucchetto_rino.dart`). Chi arriva qui dal
     telefono deve riconoscere la stessa cosa — un oro diverso di dieci punti
     si legge come un altro prodotto. Se cambiano là, cambiano anche qui. */
  --colore-oro: #E9A825;
  --colore-ambra: #B8741A;
  --colore-su-oro: #2A1A00;
  --velo-oro: rgba(233, 168, 37, 0.13);
  /* La sfumatura che unisce i due mondi: l'oro dell'abbonamento e l'ottanio
     del marchio. Sta sui bordi e sui filetti, **mai sotto un testo lungo**:
     su un fondo che cambia tinta non esiste un colore di testo leggibile su
     tutta la larghezza. */
  --sfumatura-rino: linear-gradient(100deg, var(--colore-oro), var(--colore-ambra) 42%, var(--colore-primario));
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Nei temi scuri di Material 3 il colore seme si schiarisce per restare
       leggibile su fondo scuro: qui facciamo lo stesso a mano. */
    --colore-primario: #5fd3e0;
    --colore-su-primario: #00363d;
    --colore-sfondo: #10171a;
    --colore-superficie: #182226;
    --colore-bordo: #2b383d;
    --colore-testo: #eaf1f2;
    --colore-testo-attenuato: #a9bac0;
    --ombra-scheda: 0 1px 2px rgba(0, 0, 0, 0.4);
    --colore-cornice-telefono-bordo: rgba(255, 255, 255, 0.16);
    --ombra-telefono: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    /* L'oro regge sul fondo scuro senza schiarirlo — a differenza
       dell'ottanio, che invece va schiarito (vedi sopra). Il velo sì: su
       nero un velo al 13% sparisce. */
    --velo-oro: rgba(233, 168, 37, 0.16);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* mai scorrimento orizzontale, nemmeno per arrotondamenti */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--colore-primario); }
img { max-width: 100%; }

/* Larghezza utile per un sito da desktop: le sezioni con la griglia usano
   tutto questo spazio, i blocchi di solo testo si restringono con
   .contenitore-stretto per restare leggibili. */
.contenitore { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.contenitore-stretto { max-width: 640px; }

section[id] { scroll-margin-top: calc(var(--altezza-nav) + 14px); }

/* ---------- Barra di navigazione ---------- */
.barra-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--colore-sfondo);
  border-bottom: 1px solid var(--colore-bordo);
}

.barra-nav-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altezza-nav);
}

.marchio-nav {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--colore-testo-attenuato);
}

.marchio-nav .c-piena { font-weight: 700; color: var(--colore-primario); }
.marchio-nav .rino { font-weight: 900; font-style: italic; color: var(--colore-primario); }

.barra-nav-link { display: flex; gap: 28px; }

.barra-nav-link a {
  color: var(--colore-testo);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.barra-nav-link a:hover { color: var(--colore-primario); border-color: var(--colore-primario); }

/* Sotto i 1040 px la barra si riduce al marchio e alle lingue: i link fanno
   perdere troppo spazio in orizzontale e le stesse voci si trovano scorrendo.
   ⚠️ Era 780 px finché la barra era solo italiana: con le lingue accanto e le
   voci in francese, a 900 px «Android Auto» andava a capo e i link toccavano
   il marchio. Il limite va misurato sulla lingua più lunga, non sull'italiana. */
@media (max-width: 1040px) {
  .barra-nav-link { display: none; }
}

/* ---------- Le lingue ----------
   ⚠️ Restano visibili anche sul telefono, a differenza dei link: chi arriva
   da un gruppo tedesco su una pagina italiana deve trovare la sua lingua
   senza aprire niente. Sono sigle e non nomi («DE», non «Deutsch»): cinque
   nomi per esteso non stanno accanto al marchio su 360 px.
   Nessun reindirizzamento automatico sulla lingua del browser: Google
   legge le pagine da un indirizzo americano, e chi viene rimandato in base
   all'intestazione vede una pagina e indicizza l'altra. Ognuno sceglie qui,
   e `hreflang` nell'intestazione dice ai motori quale pagina è per chi. */
.barra-nav-destra { display: flex; align-items: center; gap: 28px; }

.lingue-nav {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lingue-nav a {
  display: block;
  padding: 6px 7px;
  border-radius: 7px;
  color: var(--colore-testo-attenuato);
  text-decoration: none;
}

.lingue-nav a:hover { color: var(--colore-primario); background: var(--colore-superficie); }

/* La lingua in cui si sta leggendo: non è un link, è uno stato. */
.lingue-nav [aria-current="page"] {
  color: var(--colore-primario);
  background: var(--colore-bordo); /* ripiego per i browser senza color-mix() */
  background: color-mix(in srgb, var(--colore-primario) 14%, transparent);
}

@media (max-width: 1200px) {
  .barra-nav-destra { gap: 18px; }
  .barra-nav-link { gap: 18px; }
}

@media (max-width: 380px) {
  .lingue-nav a { padding: 6px 5px; }
}

/* ---------- Testata (hero): due colonne su desktop, una su mobile ---------- */
.testata {
  background: var(--colore-primario);
  color: #ffffff;
  padding: 72px 0 92px;
}

.testata-griglia {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.testata-testo, .testata-immagine { min-width: 0; }
.testata-testo { text-align: left; }

.marchio-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.marchio-hero img { height: 44px; width: auto; }

.parola-marchio-hero {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}

.parola-marchio-hero .c-piena { font-weight: 700; color: #ffffff; }
.parola-marchio-hero .rino { font-weight: 900; font-style: italic; color: #ffffff; margin-left: 0.02em; }

.titolo-hero {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

.sottotitolo-hero {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34em;
  margin: 0 0 28px;
}

.stato-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.stato-badge .pallino { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; flex: none; }

.testata-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.pulsante-primario {
  display: inline-block;
  background: #ffffff;
  color: var(--colore-pulsante-chiaro-testo);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pulsante-primario:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); }

.pulsante-secondario {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  padding: 12.5px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pulsante-secondario:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }

@media (max-width: 900px) {
  .testata-griglia { grid-template-columns: 1fr; gap: 44px; }
  .testata-testo { text-align: center; }
  .marchio-hero { justify-content: center; }
  .sottotitolo-hero { margin-left: auto; margin-right: auto; }
  .testata-cta { justify-content: center; }
}

@media (max-width: 600px) {
  .testata { padding: 52px 0 64px; }
}

/* ---------- Cornice del telefono: disegnata in CSS, nessuna immagine ---------- */
.telefono-cornice {
  width: 260px;
  max-width: 72vw;
  margin: 0 auto;
  padding: 14px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2c2c30, #101013);
  box-shadow: var(--ombra-telefono), inset 0 0 0 1.5px var(--colore-cornice-telefono-bordo);
  position: relative;
}

.telefono-cornice::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
}

/* Rapporto 9:19.5 riservato via aspect-ratio: lo spazio resta fermo anche
   prima che arrivi lo screenshot vero. */
.telefono-schermo {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg,
    var(--colore-superficie), var(--colore-superficie) 10px,
    var(--colore-bordo) 10px, var(--colore-bordo) 20px);
}

.telefono-schermo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.segnaposto-schermata {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36%;
  height: 36%;
  color: var(--colore-testo-attenuato);
  opacity: 0.5;
}

@media (max-width: 600px) {
  .telefono-cornice { width: 220px; }
}

/* ---------- Sezioni: respirano, con fondi alternati ---------- */
.sezione { padding: 64px 0; }
.sezione-alt { background: var(--colore-superficie); }

@media (min-width: 900px) {
  .sezione { padding: 112px 0; }
}

h2 { text-align: center; font-size: 1.7rem; margin: 0 0 10px; }

.sezione-intro {
  text-align: center;
  color: var(--colore-testo-attenuato);
  max-width: 34em;
  margin: 0 auto 40px;
  font-size: 1.05rem;
}

/* ---------- Griglia funzioni: fino a 3 colonne su desktop ---------- */
.griglia-funzioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.scheda-funzione {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--ombra-scheda);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scheda-funzione:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16, 32, 38, 0.12); }

.scheda-funzione .icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--colore-bordo); /* fallback per i browser senza color-mix() */
  background: color-mix(in srgb, var(--colore-primario) 14%, transparent);
  margin-bottom: 14px;
}

/* ⚠️ Qui c'erano delle emoji. Sembravano gratis — nessun file, nessun
   disegno — ma ognuna si porta dietro i colori decisi da chi ha fatto il
   carattere del sistema: la P del parcheggio arrivava blu, la goccia
   azzurra, la chiave grigia. Su una pagina che ha un colore solo stonavano,
   e per giunta cambiavano faccia fra Windows, Android e iPhone.
   Disegnate di linea prendono il colore del tema da `currentColor` e sono
   identiche ovunque. */
.scheda-funzione .icona svg {
  width: 24px;
  height: 24px;
  color: var(--colore-primario);
}

/* Icona in mezzo a una riga di testo. Misurata in `em` e non in pixel: cosi'
   resta proporzionata alla riga anche se chi legge ingrandisce il carattere,
   ed eredita il colore del testo che la ospita — bianca sul pulsante
   ottanio dei contatti, attenuata nella nota delle lingue. */
.icona-riga {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
}

.scheda-funzione h3 { margin: 0 0 7px; font-size: 1.1rem; }
.scheda-funzione p { margin: 0; color: var(--colore-testo-attenuato); font-size: 0.95rem; }

.nota-lingue {
  text-align: center;
  color: var(--colore-testo-attenuato);
  font-size: 0.9rem;
  margin: 32px auto 0;
}

/* ---------- Sezioni con schermata: testo e telefono affiancati ---------- */
.sezione-schermata-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.sezione-schermata-testo, .sezione-schermata-immagine { min-width: 0; }
.sezione-schermata-testo { order: 1; text-align: left; }
.sezione-schermata-immagine { order: 2; display: flex; justify-content: center; }

/* Alterna il lato dell'immagine rispetto al testo fra una sezione e l'altra */
.sezione-schermata-invertita .sezione-schermata-testo { order: 2; }
.sezione-schermata-invertita .sezione-schermata-immagine { order: 1; }

.titolo-sezione-schermata { text-align: left; margin: 0 0 16px; }

.sezione-schermata-testo p {
  color: var(--colore-testo-attenuato);
  font-size: 1.05rem;
  margin: 0 0 14px;
  max-width: 38em;
}

.nota-indicazione { font-size: 0.92rem; }

@media (max-width: 860px) {
  .sezione-schermata-griglia { grid-template-columns: 1fr; gap: 36px; }
  .sezione-schermata-testo,
  .sezione-schermata-invertita .sezione-schermata-testo { order: 2; text-align: center; }
  .sezione-schermata-immagine,
  .sezione-schermata-invertita .sezione-schermata-immagine { order: 1; }
  .titolo-sezione-schermata { text-align: center; }
  .sezione-schermata-testo p { max-width: none; margin-left: auto; margin-right: auto; }
}


/* ---------- Sezioni narrative: impaginazione editoriale ---------- */
/* ⚠️ Prima erano una colonna stretta centrata, per rispettare la misura di
   lettura (65-75 caratteri). Giusto per un documento, sbagliato qui: su un
   monitor largo diventavano due dita di testo in mezzo al vuoto, e questa e'
   una vetrina, non una pagina da leggere.
   Ora il titolo sta a sinistra e il testo a destra: la larghezza e' occupata,
   e la riga di lettura resta comunque corta perche' e' la colonna del testo a
   essere stretta, non la pagina. Sotto gli 860 px torna tutto incolonnato. */
.colonna-lettura {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px 60px;
  align-items: start;
}
/* ⚠️ Il titolo sta nella prima colonna, prima riga, e **nient'altro**.
   Un tentativo precedente usava `grid-row: 1 / span 99` per farlo affiancare
   a tutto il testo: quel 99 crea novantanove righe nella griglia, quasi tutte
   vuote, e ognuna si porta dietro il suo `gap` — sulla pagina comparivano
   duemila pixel di bianco sotto ogni sezione. In una griglia le righe si
   contano, non si abbondano. */
.colonna-lettura > h2 {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  margin: 0;
}
.colonna-lettura > *:not(h2) { grid-column: 2; }
/* Le righe si dimensionano sul contenuto: senza questo, lo spazio avanzato
   verrebbe distribuito fra le righe e i paragrafi si allontanerebbero. */
.colonna-lettura { grid-auto-rows: min-content; }
.colonna-lettura p { margin: 0 0 16px; font-size: 1.05rem; }
.colonna-lettura p:last-child { margin-bottom: 0; }

/* ---------- Il disegno che riempie il vuoto sotto il titolo ----------
   Nella griglia qui sopra il titolo occupa la colonna 1 riga 1 e tutto il
   testo la colonna 2: sotto il titolo restano due dita di bianco, e piu' la
   sezione e' lunga piu' quel bianco cresce.

   ⚠️ `height: 0` non e' una svista, e non va tolto. Un disegno messo li' in
   flusso normale alzerebbe l'altezza della propria riga; quella riga la
   condivide con un paragrafo, quindi il testo a destra si allontanerebbe dal
   successivo. Il vuoto si sposterebbe da sinistra a destra invece di
   sparire, e la sezione verrebbe piu' alta di prima. Con altezza zero il
   disegno trabocca nello spazio che era gia' vuoto senza spostare nulla.

   ⚠️ La specificita' conta: `.colonna-lettura > *:not(h2)` vale 0-1-1 e
   manderebbe il disegno nella colonna 2 col resto del testo. Serve il
   selettore discendente, che vale 0-2-0. */
.colonna-lettura > .disegno-sezione {
  grid-column: 1;
  grid-row: 2;
  height: 0;
  color: var(--colore-primario);
}

.disegno-sezione > * {
  display: block;
  width: min(80%, 250px);
  margin-top: 22px;
}

.disegno-sezione svg { opacity: 0.3; }

/* Il rinoceronte del marchio e' un PNG bianco su trasparente: appoggiato sul
   fondo chiaro sarebbe invisibile. Usato come *maschera* e' la sua sagoma a
   ritagliare un colore pieno, e quel colore lo decide il tema — un file solo
   che funziona in chiaro e in scuro, invece di due immagini da tenere
   allineate. Il file e' gia' scaricato: e' lo stesso marchio della testata.

   ⚠️ Aprendo la pagina con doppio clic (`file://`) il rinoceronte NON si
   vede, e non e' rotto. Le maschere CSS seguono le regole delle risorse a
   origine incrociata, e per il browser ogni file locale e' un'origine a se':
   la maschera viene scartata in silenzio. Servita via HTTP compare. Per
   guardare il sito in locale come lo vedra' la gente:
       cd sito && python -m http.server 8000
   e poi http://localhost:8000 */
.disegno-sezione .rino-ombra {
  aspect-ratio: 655 / 503;
  background: currentColor;
  opacity: 0.18;
  -webkit-mask: url(immagini/rino-marchio.png) no-repeat center / contain;
  mask: url(immagini/rino-marchio.png) no-repeat center / contain;
}

@media (max-width: 860px) {
  .colonna-lettura { display: block; }
  .colonna-lettura > h2 { position: static; margin-bottom: 20px; }
  /* In colonna singola il vuoto non c'e' piu', e un elemento alto zero che
     trabocca finirebbe sopra al testo. */
  .colonna-lettura > .disegno-sezione { display: none; }
}

/* Il riquadro dell'avvertenza: sono indicazioni, non garanzie. Va visto. */
.avvertenza {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--colore-primario);
  border-radius: 14px;
  box-shadow: var(--ombra-scheda);
  padding: 18px 22px;
  margin: 28px 0 0;
}
.avvertenza p { margin: 0; font-size: 1rem; }

/* I quattro servizi della sezione "quando sei arrivato" */
.griglia-servizi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin: 40px 0 0;
}
.griglia-servizi p { margin: 0; font-size: 1rem; }

.colonna-lettura > h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.claim-footer {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--colore-primario);
  margin-bottom: 14px;
}

.firma-nome {
  text-align: center;
  color: var(--colore-testo-attenuato);
  font-size: 1.05rem;
  margin-top: 36px;
}

/* ---------- Domande frequenti ----------
   Il testo resta visibile, non chiuso dentro un accordion: Google indicizza
   anche quello che sta piegato, ma qui il vantaggio di risparmiare due dita
   di altezza non vale il dubbio. Due colonne larghe perche' le risposte sono
   paragrafi, non righe. */
/* ---------- I piani ---------- */
/* ⚠️ La sfumatura oro→ottanio sta sui **filetti**, non sotto il testo: su un
   fondo che cambia tinta non esiste un colore di testo leggibile su tutta la
   larghezza, e un titolo che si perde a metà è peggio di nessun colore. */
.fascia-prova {
  position: relative;
  overflow: hidden;
  background: var(--velo-oro);
  border: 1px solid var(--colore-bordo);
  border-radius: 18px;
  padding: 30px 26px 28px;
  margin-bottom: 34px;
  text-align: center;
}
.fascia-prova::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--sfumatura-rino);
}
.fascia-prova .giorni {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--colore-testo);
}
.fascia-prova .giorni b { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.fascia-prova .giorni span { font-size: 1.05rem; color: var(--colore-testo-attenuato); }
.fascia-prova h3 { margin: 0 0 10px; font-size: 1.3rem; color: var(--colore-testo); }
.fascia-prova p { margin: 0 auto; max-width: 58ch; color: var(--colore-testo-attenuato); }
.fascia-prova .senza {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.fascia-prova .senza li {
  border: 1px solid var(--colore-bordo);
  background: var(--colore-sfondo);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.88rem;
  color: var(--colore-testo-attenuato);
}

.griglia-piani {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

.piano {
  position: relative;
  overflow: hidden;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: 18px;
  padding: 34px 26px 30px;
  box-shadow: var(--ombra-scheda);
}
/* Il filetto in cima distingue i due piani senza colorarne il fondo: due
   card di tinta diversa si leggono come «una è disattivata». Pro porta
   l'ottanio del marchio, Max la sfumatura oro→ottanio della vetrina. */
.piano::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--colore-primario);
}
.piano-completo { border-color: var(--colore-oro); box-shadow: 0 6px 22px rgba(233, 168, 37, 0.18); }
.piano-completo::before { background: var(--sfumatura-rino); }

/* ⚠️ Oro pieno con testo scuro sopra, esattamente come la pillola nell'app
   (`ColoriRino.oro` / `ColoriRino.suOro`): è il segno che chi arriva dal
   telefono riconosce. Il testo scuro è fisso in entrambi i temi, perché il
   fondo è sempre oro. */
.piano-nastro {
  display: inline-block;
  margin-bottom: 12px;
  background: var(--colore-oro);
  color: var(--colore-su-oro);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
}

.piano h3 { margin: 0 0 4px; font-size: 1.3rem; color: var(--colore-primario); }
.piano-sottotitolo { margin: 0 0 18px; color: var(--colore-testo-attenuato); font-size: 0.96rem; }

.piano-prezzo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.piano-prezzo strong { font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.piano-prezzo span { color: var(--colore-testo-attenuato); font-size: 0.95rem; }

/* Le quattro durate. ⚠️ L'equivalente mensile accanto al prezzo non è un
   vezzo: senza, «29,99» sembra più caro di «3,99» a chi legge in fretta,
   ed è il contrario. È lo stesso numero che la vetrina dell'app mostra
   sotto ogni durata. */
.piano-durate { list-style: none; margin: 16px 0 0; padding: 0; }
.piano-durate li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--colore-bordo);
  font-size: 0.97rem;
}
.piano-durate li:last-child { border-bottom: 0; }
.piano-durate .durata { color: var(--colore-testo-attenuato); }
.piano-durate .prezzo { font-variant-numeric: tabular-nums; text-align: right; }
.piano-durate .prezzo em {
  display: block;
  font-style: normal;
  font-size: 0.84rem;
  color: var(--colore-testo-attenuato);
}
.piano-durate .migliore .durata { color: var(--colore-testo); font-weight: 600; }
.piano-durate .migliore { background: var(--velo-oro); border-radius: 10px; padding-inline: 10px; }
/* Il nastrino del risparmio è oro come nell'app, dove segna la durata più
   conveniente. */
.piano-durate .risparmio {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--colore-oro);
  color: var(--colore-su-oro);
  font-size: 0.76rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ---------- Cosa resta senza abbonamento ---------- */
.riquadro-gratuito {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 18px;
  padding: 30px 26px;
  margin: 26px 0 0;
}
.griglia-gratuito {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.griglia-gratuito li {
  position: relative;
  padding-left: 30px;
  color: var(--colore-testo-attenuato);
  font-size: 0.96rem;
}
.griglia-gratuito li strong { display: block; color: var(--colore-testo); font-weight: 600; }
.griglia-gratuito li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 13px;
  height: 7px;
  border-left: 2.2px solid var(--colore-primario);
  border-bottom: 2.2px solid var(--colore-primario);
  transform: rotate(-45deg);
}

.piano-elenco { list-style: none; margin: 20px 0 0; padding: 0; }
.piano-elenco li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  color: var(--colore-testo-attenuato);
  font-size: 0.97rem;
}
.piano-elenco li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 13px;
  height: 7px;
  border-left: 2.2px solid var(--colore-primario);
  border-bottom: 2.2px solid var(--colore-primario);
  transform: rotate(-45deg);
}
.piano-elenco li strong { color: var(--colore-testo); font-weight: 600; }

.nota-piani {
  margin: 28px auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--colore-testo-attenuato);
  font-size: 0.93rem;
}

.griglia-domande {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px 40px;
}

.domanda h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  color: var(--colore-primario);
}

.domanda p { margin: 0; color: var(--colore-testo-attenuato); font-size: 0.98rem; }

/* ---------- Riquadro QR / store ---------- */
.riquadro-store {
  border: 1.5px dashed var(--colore-bordo);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  color: var(--colore-testo-attenuato);
}

.riquadro-store svg {
  display: block;
  margin: 0 auto 14px;
  color: var(--colore-primario);
  opacity: 0.6;
}

.riquadro-store .qr-store { display: block; margin: 0 auto 14px; border-radius: 8px; }
.riquadro-store p { margin: 0; font-size: 0.95rem; }
.riquadro-store p.piccolo { font-size: 0.85rem; margin-top: 4px; }

/* ---------- Contatti ---------- */
.contatti { text-align: center; }

.pulsante-mail {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--colore-primario);
  color: var(--colore-su-primario);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pulsante-mail:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 32, 38, 0.18); }

/* ---------- Piè di pagina ---------- */
footer {
  border-top: 1px solid var(--colore-bordo);
  padding: 28px 20px 44px;
  text-align: center;
  color: var(--colore-testo-attenuato);
  font-size: 0.85rem;
}

footer a { text-decoration: underline; }
footer .link-footer { margin: 0 0 8px; }
footer .link-footer a { margin: 0 8px; }
/* La fascia dei numeri: a tutta larghezza, col colore del marchio, sei
   cifre in due righe da tre. La cifra e' il messaggio: grande, bianca,
   tabulare; l'etichetta sotto, leggera. Sul telefono una colonna. */
.fascia-numeri {
  background: var(--colore-primario);
  color: var(--colore-su-primario);
  padding: 72px 0 64px;
}
.fascia-numeri h2 { color: inherit; }
.fascia-numeri .sezione-intro { color: inherit; opacity: 0.82; }
.griglia-numeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  margin-top: 40px;
}
.numero-scheda {
  text-align: center;
  padding: 26px 12px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.numero-cifra {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.numero-etichetta {
  display: block;
  margin-top: 12px;
  font-size: 1.02rem;
  line-height: 1.35;
  opacity: 0.88;
}
.nota-numeri {
  margin-top: 34px;
  font-size: 0.9rem;
  opacity: 0.72;
  text-align: center;
}
@media (max-width: 900px) { .griglia-numeri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .griglia-numeri { grid-template-columns: 1fr; gap: 8px; }
  .fascia-numeri { padding: 56px 0 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .numero-scheda { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .numero-scheda.in-vista { opacity: 1; transform: none; }
}