/* Lykada — stile della home.
   ============================================================================
   PERCHE' UN FOGLIO A PARTE E NON DENTRO stile.css: termini.html, privacy.html
   e reset.html usano `stile.css` e devono continuare a funzionare identiche.
   Riscrivere quello per rifare la home avrebbe rotto tre pagine legali per
   cambiarne una. Qui dentro c'e' SOLO la home; i colori del marchio restano
   dichiarati in tutte e due, cosi' ognuna sta in piedi da sola.

   L'IMPIANTO, preso dalle pagine di prodotto fatte bene: UNA SEZIONE A TUTTO
   SCHERMO PER OGNI IDEA, ognuna col suo fondo. Nessuna sezione fa due cose.
   Prima la home era un unico testo che scorreva su fondo unico: si leggeva,
   ma non si guardava, e non si capiva mai dove finiva un discorso.
   ============================================================================ */

:root {
  --terracotta: #E2703A;
  --terracotta-scuro: #B84E28;
  --terracotta-chiaro: #EE9068;
  --espresso: #3A2A22;
  --panna: #FBF6F1;
  --bianco-caldo: #FFFDFB;
  --grigio-caldo: #93857B;
  --bordo: rgba(226, 112, 58, 0.28);

  --corpo: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --larghezza: 1120px;
  --stretta: 760px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--panna);
  color: var(--espresso);
  font: var(--corpo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---- barra in cima ---- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 246, 241, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bordo);
}

.barra > div {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.voce-barra {
  font-size: 15px;
  font-weight: 600;
  color: var(--grigio-caldo);
  text-decoration: none;
}
.voce-barra:hover { color: var(--terracotta-scuro); }

.marchio {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--terracotta);
  text-decoration: none;
}

/* ---- sezioni ---- */

.sezione {
  padding: 92px 24px;
  /* La barra in cima e' `sticky`, quindi quando si salta a una sezione col
     link il browser la porta a filo pagina e la barra le copre l'occhiello e
     mezzo titolo. `scroll-margin-top` dice di fermarsi un po' prima. Vale per
     i link della barra, per quelli del piede e per "Come funziona". */
  scroll-margin-top: 74px;
}

.sezione > .dentro {
  max-width: var(--larghezza);
  margin: 0 auto;
}

.sezione.stretta > .dentro { max-width: var(--stretta); }

/* I fondi che separano un discorso dall'altro. */
.chiara { background: var(--panna); }
.bianca { background: var(--bianco-caldo); }
.scura  { background: var(--espresso); color: #F6EFE9; }
.calda  {
  background: linear-gradient(160deg, var(--terracotta-chiaro), var(--terracotta) 55%, var(--terracotta-scuro));
  color: #fff;
}

.scura .occhiello, .calda .occhiello { color: rgba(255,255,255,0.72); }
.scura a, .calda a { color: #fff; }

/* ---- testo ---- */

.occhiello {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--grigio-caldo);
  margin: 0 0 14px;
}

/* I TITOLI IN CORSIVO (scelta di Michele, 12/9).
   Playfair Display italic: un carattere con le grazie, in corsivo, accanto al
   sans del corpo. E' l'accostamento che usano le pagine di prodotto fatte
   bene (Tinder compreso) e dà alla pagina un tono meno da software e piu' da
   rivista — che per un'app di persone che si incontrano e' quello giusto.

   Il corsivo di un sans grassetto sarebbe stato solo "inclinato": un carattere
   disegnato in corsivo ha le lettere costruite diverse, ed e' la ragione per
   cui si legge come scrittura e non come testo storto.

   Le grazie NON vanno sul corpo del testo: li' restano sul sans, che a
   dimensioni piccole si legge meglio. */
/* I TITOLI: Bricolage Grotesque, scelto da Michele il 12/9 dopo venti prove.
   Non ha le grazie ma ha le forme volutamente irregolari — e' quello che gli
   dava il carattere che cercava senza somigliare a Tinder, che usa un serif ad
   alto contrasto.

   PESO 500 e non 700: la prima prova era in grassetto pieno e Michele l'ha
   trovato troppo pesante. A 78px un peso medio basta e avanza per fare titolo,
   e lascia respirare le forme storte, che sono il motivo per cui si e' scelto
   questo carattere.

   `opsz` e' la dimensione per cui il disegno e' pensato: alta per i titoli
   grandi, altrimenti il browser ingrandisce il disegno da testo piccolo e le
   lettere vengono strette. */
h1, h2 {
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
}

h1 {
  font-size: clamp(40px, 6.8vw, 78px);
  font-variation-settings: "opsz" 90;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}

h2 {
  font-size: clamp(29px, 4.2vw, 46px);
  font-variation-settings: "opsz" 60;
  /* Un filo piu' peso dei titoli grandi: a 46px il 500 si smagriva. */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}

h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; }

.grande {
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  color: var(--grigio-caldo);
  max-width: 620px;
}

.scura .grande, .calda .grande { color: rgba(255,255,255,0.82); }

/* "Beyond the screen" sceso SOTTO al titolo (12/9), dove prima c'era il
   sottotitolo. Piu' grande dell'occhiello che era prima, perche' adesso e'
   l'unica altra riga dell'apertura e da sola in mezzo al bianco sparirebbe. */
.firma {
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--grigio-caldo);
  margin: 0;
}

.minuta { font-size: 14px; color: var(--grigio-caldo); }
.scura .minuta, .calda .minuta { color: rgba(255,255,255,0.6); }

/* ---- pulsanti ---- */

.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.bottone {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.bottone.pieno { background: var(--terracotta); color: #fff; }
.bottone.pieno:hover { background: var(--terracotta-scuro); }

.bottone.vuoto {
  background: transparent;
  color: var(--espresso);
  border-color: var(--bordo);
}
.bottone.vuoto:hover { border-color: var(--terracotta); color: var(--terracotta-scuro); }

.calda .bottone.pieno { background: #fff; color: var(--terracotta-scuro); }
.calda .bottone.vuoto { color: #fff; border-color: rgba(255,255,255,0.55); }

.bottone.piccolo { padding: 10px 18px; font-size: 14.5px; }

.bottone:focus-visible { outline: 3px solid var(--espresso); outline-offset: 3px; }

/* ---- apertura ---- */

.apertura {
  position: relative;
  overflow: hidden;
  padding: 84px 24px 96px;
  scroll-margin-top: 74px;
}

.apertura .dentro {
  max-width: var(--larghezza);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

/* La girandola dietro al titolo: lo stesso trattamento che l'app usa nelle
   sezioni vuote, cosi' sito e app sembrano la stessa cosa. La maschera
   radiale la fa sfumare ai bordi, altrimenti il PNG si taglia netto e sembra
   un adesivo appiccicato sopra. */
.girandola-sfondo {
  position: absolute;
  top: -130px;
  left: -170px;
  width: 520px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%);
}

.apertura .testo { position: relative; z-index: 1; }

/* ---- il telefono ---- */

.telefono {
  position: relative;
  margin: 0 auto;
  width: min(300px, 78vw);
  border-radius: 42px;
  padding: 10px;
  background: #1d1512;
  box-shadow: 0 30px 70px rgba(58, 42, 34, 0.28);
}

.telefono img { border-radius: 33px; }

.telefono.piccolo { width: min(250px, 66vw); }

/* ---- carte ---- */

.carte {
  display: grid;
  /* 240 e non 270: con 270 le QUATTRO carte della sicurezza non entravano in
     riga (servivano 266px l'una) e la quarta finiva a capo da sola, spaiata.
     I blocchi da tre non ne risentono: tre elementi non fanno mai quattro
     colonne. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

/* UN BLOCCO DA QUATTRO NON DEVE MAI ANDARE 3+1.
   Misurato l'11/9: a finestra piena (1120px di contenitore) le quattro carte
   della sicurezza stanno gia' in riga, 266px l'una — quindi su uno schermo
   normale non c'era niente da aggiustare. Il difetto sta nella FASCIA DI
   MEZZO, sotto i ~1060px di finestra: li' `auto-fit` fa tre colonne e la
   quarta carta resta sotto da sola, con due buchi accanto. Capita su un
   portatile piccolo o con due finestre affiancate.
   La cura e' saltare il tre: sotto quella soglia si va direttamente a due
   colonne, che con quattro carte fa un 2x2 pieno.
   `:has(> :nth-child(4))` colpisce solo i blocchi che hanno una quarta carta,
   quindi le tre idee portanti e i tre piani restano come sono. */
@media (max-width: 1060px) {
  .carte:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .carte:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}

.carta {
  border-radius: 22px;
  padding: 30px 26px;
  background: var(--bianco-caldo);
  border: 1.5px solid var(--bordo);
}

.carta .segno { font-size: 30px; line-height: 1; margin-bottom: 14px; }

/* LE ICONE 3D — generate col modello e poi RITAGLIATE.
   Preparate da `tools/prepara_icone.py`: PNG con trasparenza vera, soggetto
   centrato, nessun fondo e nessuna ombra cotta dentro.

   PERCHE' RITAGLIATE E NON DENTRO UN RIQUADRO. La prima versione le teneva col
   loro fondo panna dentro un quadratino, per non doverle scontornare. Michele
   ha chiesto che "vengano fuori", come le fa Tinder: l'oggetto galleggia sulla
   carta invece di stare in una finestrella. Ha ragione — il riquadro
   rimetteva un bordo proprio attorno alla cosa che deve sembrare in rilievo.

   IL RITAGLIO NON SI PUO' FARE A SOGLIA, ed e' stato misurato: meta' del
   disegno e' dello stesso panna del fondo (la figura chiara del gruppo, il
   disco sotto il pin), e togliere il fondo per somiglianza di colore BUCA
   l'oggetto. Serve un segmentatore. Spiegazione lunga in tools/prepara_icone.py.

   L'OMBRA LA FA IL CSS, non l'immagine. Un'ombra cotta dentro il PNG e'
   calcolata per un fondo solo: queste icone stanno su tre carte di colore
   diverso, e su quella marrone un'ombra da fondo panna sarebbe una macchia
   chiara. `drop-shadow` segue la sagoma ritagliata e funziona su tutti e tre.

   IL MARGINE NEGATIVO IN ALTO e' quello che le fa "uscire": l'icona sale sopra
   il padding della carta, quindi non sembra appoggiata dentro una scatola. */
.carta .segno img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: -14px 0 2px -6px;
  filter: drop-shadow(0 10px 12px rgba(58, 42, 34, 0.22))
          drop-shadow(0 2px 3px rgba(58, 42, 34, 0.14));
}

/* Sulla carta scura un'ombra marrone sparisce: li' serve piu' stacco. */
.carta.due .segno img {
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@media (max-width: 700px) {
  .carta .segno img { width: 96px; height: 96px; }
}
.carta p:last-child { margin-bottom: 0; }
.carta p { color: var(--grigio-caldo); font-size: 15.5px; margin-bottom: 0; }

/* Le tre carte delle idee portanti, ognuna col suo colore: e' il colore a
   dire "questi sono tre discorsi diversi", non una riga vuota fra loro. */
.carta.uno  { background: #FFF1E8; border-color: rgba(226,112,58,0.35); }
.carta.due  { background: var(--espresso); border-color: transparent; color: #F6EFE9; }
.carta.due p { color: rgba(255,255,255,0.75); }
.carta.tre  { background: #F1E9E2; border-color: rgba(58,42,34,0.14); }

/* ---- i passi ---- */

.passi { counter-reset: passo; margin-top: 44px; display: grid; gap: 4px; }

.passo {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--bordo);
}

.passo:last-child { border-bottom: 1px solid var(--bordo); }

.passo::before {
  content: counter(passo);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--terracotta);
  line-height: 1.1;
}

.passo p { margin: 0; color: var(--grigio-caldo); }

/* ---- le cinque schede dell'app, sezione "Struttura" (14/10) ----
   Una riga per scheda, nello stesso ordine della barra in basso nell'app:
   chi legge il sito ritrova poi la stessa struttura aprendo l'app. */

.schede { margin-top: 26px; }

.scheda {
  padding: 16px 0;
  border-top: 1px solid var(--bordo);
}

.scheda:last-child { border-bottom: 1px solid var(--bordo); }

.scheda h3 { margin: 0 0 4px; }

.scheda p { margin: 0; color: var(--grigio-caldo); font-size: 15.5px; }

.scheda a { color: var(--terracotta-scuro); }

/* ---- il tuo profilo (15/10): una voce per riga, icona a sinistra ----
   Stessa struttura dei vecchi "passi" (righe divise da un filo), ma al
   posto del numero c'e' un'icona. */

.voci-profilo { margin-top: 36px; display: grid; }

.voce-profilo {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--bordo);
}

.voce-profilo:last-child { border-bottom: 1px solid var(--bordo); }

.voce-profilo img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(58, 42, 34, 0.18));
}

.voce-profilo h3 { margin: 0 0 4px; }

.voce-profilo p { margin: 0; color: var(--grigio-caldo); }

/* ---- affiancato: testo e telefono ---- */

.affiancato {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ---- piani ---- */

.piano {
  border-radius: 22px;
  padding: 30px 26px;
  background: var(--bianco-caldo);
  border: 1.5px solid var(--bordo);
  display: flex;
  flex-direction: column;
}

.piano .prezzo {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
}

.piano ul { margin: 18px 0 0; padding-left: 20px; }
.piano li { margin-bottom: 8px; color: var(--grigio-caldo); font-size: 15.5px; }

.piano.evidenza { background: var(--espresso); color: #F6EFE9; border-color: transparent; }
.piano.evidenza li { color: rgba(255,255,255,0.78); }

/* ---- domande ---- */

.domanda {
  border-top: 1px solid var(--bordo);
  padding: 4px 0;
}
.domanda:last-of-type { border-bottom: 1px solid var(--bordo); }

.domanda summary {
  cursor: pointer;
  padding: 20px 34px 20px 0;
  font-weight: 700;
  font-size: 17.5px;
  list-style: none;
  position: relative;
}
.domanda summary::-webkit-details-marker { display: none; }

.domanda summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--terracotta);
}
.domanda[open] summary::after { content: '–'; }

.domanda .risposta { padding: 0 40px 22px 0; color: var(--grigio-caldo); }
.domanda .risposta p:last-child { margin-bottom: 0; }

/* ---- modulo ---- */

.modulo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  max-width: 520px;
}

.modulo input[type="email"] {
  flex: 1 1 240px;
  height: 56px;
  padding: 0 18px;
  font-size: 16px;
  font-family: inherit;
  color: var(--espresso);
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
}

.modulo input:focus { outline: none; border-color: var(--espresso); }
.modulo button { height: 56px; }

/* Trappola per i robot: un campo che una persona non vede e non compila.
   Se arriva pieno, la richiesta e' di un programma. */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- piede ---- */

.piede {
  background: var(--espresso);
  color: rgba(246, 239, 233, 0.8);
  padding: 62px 24px 40px;
}

.piede .dentro {
  max-width: var(--larghezza);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}

.piede h4 {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
  font-weight: 700;
}

.piede a { color: rgba(246,239,233,0.85); text-decoration: none; display: block; margin-bottom: 9px; }
.piede a:hover { color: #fff; text-decoration: underline; }

.piede .marchio { color: #fff; font-size: 24px; }

.piede .coda {
  max-width: var(--larghezza);
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 13.5px;
  color: rgba(255,255,255,0.5);
}

/* ---- schermi stretti ---- */

@media (max-width: 860px) {
  .sezione { padding: 66px 20px; }
  .apertura { padding: 52px 20px 70px; }
  .apertura .dentro,
  .affiancato { grid-template-columns: 1fr; gap: 40px; }
  .apertura .telefono { margin-top: 8px; }
  .piede .dentro { grid-template-columns: 1fr 1fr; gap: 28px; }
  .piede .dentro > div:first-child { grid-column: 1 / -1; }
  .girandola-sfondo { width: 340px; top: -80px; left: -120px; opacity: 0.08; }
}

@media (max-width: 520px) {
  .barra .bottone { padding: 11px 16px; font-size: 14px; }
  .passo { grid-template-columns: 40px 1fr; gap: 14px; }
  .passo::before { font-size: 24px; }
}

/* ============================================================================
   LA SCHERMATA FINTA DEI GRUPPI
   ============================================================================
   PERCHE' DISEGNATA E NON FOTOGRAFATA: la stessa schermata delle passioni
   compariva due volte nella pagina, in apertura e nella sezione del
   questionario, e si notava. Una seconda schermata VERA pero' oggi non c'e':
   il database e' vuoto di proposito (pulito il 4/9, prima di far entrare
   sconosciuti), quindi la lista gruppi dell'unico account mostra un gruppo
   solo e "Ancora nessun messaggio" — che vende meno del niente.

   Allora e' disegnata qui, con i colori e le misure VERE dell'app
   (lib/theme/colors.dart, lib/widgets/group_avatar.dart): stesso fondo a
   sfumatura panna-pesca della chat, stesso avatar con la girandola e le
   iniziali bianche, stessa barra a cinque voci. E' un mockup, come ne fanno
   tutti negli store, non un falso: non dichiara utenti che non esistono,
   mostra com'e' fatta l'app.

   NIENTE FACCE. Mettere foto di persone per far credere che usino Lykada
   richiede licenza e consenso — Tinder infatti scrive "Tutte le immagini
   raffigurano modelle e sono utilizzate a solo scopo illustrativo". Quando
   Michele avra' foto sue o con licenza, si sostituiscono gli avatar qui
   dentro e il resto resta identico.
   ============================================================================ */

.schermo {
  border-radius: 33px;
  overflow: hidden;
  background: linear-gradient(160deg, #FBF6F1 0%, #F7DCC9 62%, #EFBE9E 100%);
  color: #3A2A22;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  /* Le proporzioni VERE di un iPhone 17: la cattura del simulatore e'
     1206x2622, cioe' 0.46. Prima c'era una `min-height` a occhio che dava
     0.52, e accanto alla foto vera del telefono qui sotto la differenza si
     vedeva: uno slanciato e uno schiacciato. Michele l'ha notato subito. */
  aspect-ratio: 1206 / 2622;
}

/* La barra di stato: l'ora e l'isola nera. Senza, il riquadro non si legge
   come un telefono ma come un riquadro qualsiasi. */
.schermo .stato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.schermo .isola {
  width: 78px;
  height: 22px;
  background: #000;
  border-radius: 999px;
}

.schermo .segnale { display: flex; gap: 4px; align-items: center; opacity: 0.82; }
.schermo .segnale span { font-size: 11px; }

.schermo .corpo { padding: 16px 18px 8px; flex: 1; }

.schermo h4 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
}

.schermo .quanti { color: #93857B; font-size: 14px; margin: 0 0 16px; }

.schermo .gruppo {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #FFFDFB;
  border: 1.2px solid rgba(226, 112, 58, 0.3);
  border-radius: 17px;
  padding: 11px 13px;
  margin-bottom: 9px;
}

.schermo .gruppo .nome {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schermo .gruppo .ultimo {
  color: #93857B;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schermo .gruppo .testi { min-width: 0; flex: 1; }

/* L'avatar vero dell'app: cerchio panna, bordo terracotta al 50%, la
   girandola dietro al 68% di opacita', le iniziali bianche sopra con
   un'ombra leggera. Copiato da group_avatar.dart, non inventato. */
.avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #FBF6F1;
  border: 1.5px solid rgba(226, 112, 58, 0.5);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.avatar img {
  position: absolute;
  width: 78%;
  opacity: 0.68;
}

.avatar span {
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.33);
}

/* La barra delle cinque sezioni, in fondo. */
.schermo .tab {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 9px 6px 16px;
  background: rgba(255, 253, 251, 0.92);
  border-top: 1px solid rgba(226, 112, 58, 0.2);
}

.schermo .tab div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  color: #93857B;
}

.schermo .tab div.acceso { color: #E2703A; font-weight: 700; }
.schermo .tab .icona { display: block; height: 17px; }
.schermo .tab svg { display: block; height: 17px; width: auto; }

/* ---- l'apertura: testo a sinistra, girandola a destra (12/9) ----
   Michele non voleva il telefono in apertura: preferisce una frase sola e
   grande. Il telefono si e' spostato nella sezione del gruppo, dove ha anche
   piu' senso.

   PERCHE' IL TESTO NON E' PIU' CENTRATO. Prima lo era, con la girandola
   sbiadita dietro al titolo. Michele ha fatto notare che nell'immagine di
   anteprima (`anteprima.png`, quella che si vede quando il link gira in chat)
   la girandola si vede benissimo, e nel sito no — e ha chiesto perche' non
   fosse cosi' anche qui.

   Il motivo era che stava SOTTO il titolo: provata la strada di alzarle solo
   l'opacita' restando centrata, e le pale passano dentro le lettere di "Vivi
   le tue passioni". La girandola era bassa per necessita', non per timidezza.

   Quindi si copia l'anteprima: testo a sinistra, girandola a destra. Non si
   sovrappongono, e a quel punto la girandola puo' stare all'opacita' 0.34
   dell'anteprima invece di 0.20. In piu' chi arriva dal link in chat ritrova
   la stessa composizione che lo ha convinto a toccarlo. */
.apertura.sola .dentro {
  grid-template-columns: 1fr;
  max-width: var(--larghezza);
  text-align: left;
  justify-items: start;
}

/* Piu' aria: e' quello che rende pulita l'apertura di Tinder, non la
   grafica. Meno elementi e piu' spazio intorno. */
.apertura.sola { padding: 128px 24px 136px; }
/* 76 e non 96: il titolo deve stare su DUE righe dentro una colonna di 700px,
   e sono le due righe a rendere pulita l'apertura. A 96 andava a tre. */
.apertura.sola h1 { font-size: clamp(40px, 5.6vw, 76px); margin-bottom: 24px; }
/* La colonna del testo si ferma prima, cosi' non arriva sotto la girandola. */
.apertura.sola .testo { max-width: 700px; }
.apertura.sola .azioni { margin-top: 42px; justify-content: flex-start; }

.apertura.sola .girandola-sfondo {
  /* Centrata in verticale invece che con un `top` fisso: la sezione cambia
     altezza col carattere e con la larghezza, e cosi' la girandola resta
     dentro da sola. Sbordare e' il problema — vedi sotto. */
  top: 50%;
  left: auto;
  right: -30px;
  transform: translateY(-50%);
  /* 560 E QUASI SENZA SBORDARE, misurato. A 680 la girandola era alta 633
     dentro una sezione alta 572 e sbordava 130px in alto e 150px a destra,
     dove `overflow: hidden` la taglia. Il taglio cadeva a ~190px dal centro
     mentre la maschera diventa trasparente solo a ~297px: si tagliava roba
     ancora opaca, e si vedeva un bordo dritto e netto. */
  width: 560px;
  /* La stessa opacita' dell'anteprima, non un numero nuovo. */
  opacity: 0.34;
  /* `closest-side` e non `circle` secco: senza, il raggio del gradiente arriva
     fino all'ANGOLO, e i LATI restano opachi perche' sono piu' vicini —
     risultato, un bordo dritto sul lato destro. Con closest-side il raggio e'
     la distanza al lato piu' vicino, quindi sfumano tutti i lati e non dipende
     piu' dalle proporzioni dell'immagine. */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 30%, transparent 94%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 30%, transparent 94%);
}

/* Sotto i 1000px la colonna del testo e la girandola comincerebbero a
   sovrapporsi: la girandola torna a fare da sfondo, sbiadita come prima.
   Tre classi nei selettori, sennò vince la regola generica di `.girandola-
   sfondo` nella media query a 860px, che rimette `left`. */
@media (max-width: 1000px) {
  .apertura.sola .girandola-sfondo {
    width: 460px; right: -170px; left: auto; opacity: 0.26;
  }
}

@media (max-width: 700px) {
  .apertura.sola .testo { max-width: none; }
  .apertura.sola .girandola-sfondo {
    width: 360px; right: -130px; left: auto; opacity: 0.18;
  }
}

/* ---- i pulsanti degli store ----
   Non sono i badge ufficiali di Apple e Google: quelli hanno regole d'uso
   precise (misure, margini, diciture) e si mettono quando le schede esistono
   davvero. Questi sono due pulsanti nostri, nello stile del resto. */
.negozi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* `.calda .negozio` e non solo `.negozio`: la regola generale `.calda a`
   dipinge di bianco TUTTI i link su fondo caldo, e siccome vale piu' di una
   classe sola vinceva lei — i due pulsanti uscivano bianchi su bianco, cioe'
   vuoti. Due classi bastano a farla perdere. */
/* Il badge ufficiale non si ricolora e non si ridisegna: le regole d'uso di
   Apple lo vietano. Si mette e basta, con un po' di spazio intorno. */
.badge { display: inline-block; line-height: 0; }
.badge img { height: 56px; width: auto; }
.badge:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 10px; }

.calda .negozio {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--terracotta-scuro);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}

.calda .negozio:hover { background: #FFF1E8; }
.calda .negozio:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }