/* ============================================================ ALESSIO BIFFI — le sezioni (v2)
   L'ordine racconta una cosa diversa dalla v1: prima Alessio e cosa ottieni, poi perche'
   fidarsi, poi quanto costa, e solo dopo lo strumento con cui si lavora. L'app non apre
   piu' la pagina: e' il mezzo, non la promessa. */

/* ------------------------------------------------------------ fascia d'anteprima */
.fascia {
  position: relative; z-index: 50;
  background: #23232A; border-bottom: 1px solid #34343D;
  padding: 10px var(--margine); font-size: 13px; line-height: 1.45; color: #D7D7DE;
}
.fascia strong { color: #fff; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.fascia .colonna { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }

/* ------------------------------------------------------------ testata */
.testata {
  position: sticky; top: 0; z-index: 40; padding: 13px var(--margine);
  background: rgba(11,11,13,.8); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--nero-3);
}
.testata-dentro {
  max-width: var(--colonna); margin-inline: auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.testata .bottone { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
@media (max-width: 599px) {
  .testata .marchio-ruolo { display: none; }
  .testata .marchio img { width: 38px; }
  .testata .marchio-nome { font-size: 15px; }
  .testata .bottone .lungo { display: none; }
}

/* ------------------------------------------------------------ 1. apertura: la foto comanda */
#apertura { padding: 0; min-height: min(92vh, 860px); display: grid; isolation: isolate; }
#apertura > * { grid-area: 1 / 1; }
/* La foto non deve decidere quanto e' alta l'apertura: il segnaposto era
   orizzontale, una foto verticale faceva crescere la fascia fino a 1700 px e
   il titolo finiva sotto lo schermo. Sfilata dal flusso, comanda di nuovo
   «min-height». */
.apertura-foto { position: relative; overflow: hidden; }
.apertura-foto picture { position: absolute; inset: 0; }
/* il <picture> e' un contenitore in linea: senza questa riga l'altezza al 100%
   dell'immagine si misura sul nulla e la foto si schiaccia. */
.apertura-foto picture, #alessio .alessio-foto picture { display: block; width: 100%; height: 100%; }
/* Alessio nel terzo destro: a sinistra ci passa il titolo, e il titolo non
   deve attraversargli la faccia. Sul telefono la colonna e' una sola, quindi
   torna al centro. */
.apertura-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (min-width: 760px) { .apertura-foto img { object-position: 70% 22%; } }
/* il buio che rende leggibile il testo: fitto in basso, trasparente in alto */
/* Sfilare la foto l'ha resa un elemento posizionato, e un elemento posizionato
   copre i fratelli che non lo sono: velo e titolo erano finiti sotto la foto.
   Si alzano anche loro. */
.apertura-velo, .apertura-dentro { position: relative; z-index: 1; }
.apertura-velo {
  background:
    linear-gradient(180deg,
      rgba(11,11,13,.70)  0%,     /* sotto la testata, perche' il marchio si stacchi */
      rgba(11,11,13,.16) 26%,     /* la foto respira */
      rgba(11,11,13,.58) 54%,     /* da qui comincia il titolo: il buio sale */
      rgba(11,11,13,.90) 80%,     /* sottotitolo e pulsante stanno su fondo quasi pieno */
      var(--nero)       100%),
    linear-gradient(90deg, rgba(11,11,13,.82) 0%, rgba(11,11,13,.08) 64%);
}
.apertura-dentro {
  align-self: end; width: 100%; max-width: var(--colonna); margin-inline: auto;
  padding: 0 var(--margine) clamp(44px, 7vw, 86px);
}
.apertura-dentro h1 { margin-bottom: 18px; max-width: 16ch; }
.apertura-dentro .sottotitolo { max-width: 42ch; color: var(--osso); }
.apertura-azione { margin-top: clamp(26px, 3.4vw, 38px); display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.apertura-sotto { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* i modi di pagare, in fila */
.paghi { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.paghi li {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--nero-4); color: var(--osso-2); background: rgba(11,11,13,.55);
}

/* ------------------------------------------------------------ 2. fiducia: solo cose vere */
#fiducia { padding-top: clamp(44px, 6vw, 72px); }
.fiducia-griglia {
  display: grid; gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: clamp(28px, 3.6vw, 40px);
}
.fiducia-voce { display: grid; gap: 6px; align-content: start; }
.fiducia-voce .cifra-grande { font-size: clamp(38px, 5vw, 56px); line-height: 1; }
.fiducia-voce h3 { font-size: 15px; letter-spacing: .12em; color: var(--osso); }
.fiducia-voce p { font-size: 14.5px; color: var(--osso-2); margin: 0; }

/* ------------------------------------------------------------ 3. come funziona */
.passi { display: grid; gap: clamp(20px, 2.6vw, 30px); margin-top: clamp(34px, 4.5vw, 52px); padding: 0; list-style: none; }
@media (min-width: 760px) { .passi { grid-template-columns: repeat(3, 1fr); } }
.passo { position: relative; padding-top: 24px; border-top: 2px solid var(--nero-4); }
.passo-numero { font-family: var(--titoli); font-size: 40px; line-height: 1; display: block; margin-bottom: 12px; }
.passo h3 { margin-bottom: 8px; }
.passo p { color: var(--osso-2); font-size: 16px; }

/* ------------------------------------------------------------ 4. pacchetti: prima la scelta */
/* fieldset: il browser gli mette bordo, margini e padding suoi. Via tutti, o
   intorno alla scelta compare un rettangolo che non ha voluto nessuno. */
.scelta { margin: clamp(28px, 3.6vw, 40px) 0 0; padding: 0; border: 0; min-inline-size: 0; }
/* il "~" davanti al prezzo: piccolo, e solo un segno. La parola "circa" resta per
   chi la pagina se la fa leggere ad alta voce (un "~" non si pronuncia). */
.prezzo-circa { font-size: clamp(20px, 2.4vw, 28px); color: var(--osso-2); align-self: center; margin-right: -2px; }
/* La virgola di Anton e' un cuneo corto: a questa misura si legge come un punto, e
   "9.90 €" non e' un prezzo italiano. La virgola, e solo lei, la disegna Inter. */
.cifra-grande .virgola { font-family: var(--testo); font-weight: 800; font-size: .82em; }
.scelta > input { position: absolute; opacity: 0; pointer-events: none; }
.scelta-bottoni {
  display: inline-flex; padding: 5px; gap: 4px; margin-bottom: clamp(26px, 3.4vw, 36px);
  background: var(--nero-2); border: 1px solid var(--nero-3); border-radius: 999px;
}
.scelta-bottoni label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 clamp(16px, 3vw, 28px); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--osso-2); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
#g-coaching:checked ~ .scelta-bottoni label[for="g-coaching"],
#g-schede:checked ~ .scelta-bottoni label[for="g-schede"] {
  background: var(--oro-sfumato); color: #0B0B0D;
}
.scelta > input:focus-visible ~ .scelta-bottoni label[for="g-coaching"],
.scelta > input:focus-visible ~ .scelta-bottoni label[for="g-schede"] { outline: 3px solid var(--oro-chiaro); outline-offset: 3px; }
.pannello { display: none; }
#g-coaching:checked ~ .pannello-coaching, #g-schede:checked ~ .pannello-schede { display: block; }

.schede { display: grid; gap: clamp(18px, 2.4vw, 24px); align-items: stretch; }
@media (min-width: 880px) { .schede-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .schede-2 { grid-template-columns: repeat(2, 1fr); } }

.scheda { position: relative; display: flex; flex-direction: column; }
.scheda-forte { border-color: var(--oro-scuro); box-shadow: 0 0 0 1px rgba(212,166,42,.22), 0 40px 70px -50px rgba(212,166,42,.5); }
.scheda-badge {
  position: absolute; top: -11px; left: clamp(22px, 3vw, 30px);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; background: var(--oro-sfumato); color: #0B0B0D;
}
.scheda-nome { font-family: var(--titoli); font-size: clamp(24px, 2.8vw, 30px); line-height: 1; text-transform: uppercase; }
.scheda-durata { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); margin-top: 8px; }

/* il prezzo: al mese in grande, il resto piccolo sotto */
.prezzo-mese { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.prezzo-mese .cifra-grande { font-size: clamp(42px, 5.4vw, 60px); line-height: .9; }
.prezzo-mese .unita { font-size: 14px; font-weight: 600; color: var(--osso-2); }
.prezzo-totale { margin-top: 8px; font-size: 13.5px; color: var(--osso-2); }
.prezzo-totale b { color: var(--osso); font-weight: 600; }
.prezzo-bollo { color: var(--osso-3); }
.rate { margin-top: 6px; font-size: 12.5px; color: var(--oro); font-weight: 600; }

.cosa-c-e {
  list-style: none; margin: 22px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--nero-3); display: grid; gap: 11px; font-size: 15.5px; line-height: 1.5;
}
.cosa-c-e li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.cosa-c-e li::before {
  content: ""; width: 13px; height: 8px; margin-top: 7px;
  border-left: 2px solid var(--oro); border-bottom: 2px solid var(--oro); rotate: -45deg;
}
.cosa-c-e .eredita { font-weight: 600; }
.scheda-coda { margin-top: auto; }
.scheda .bottone { margin-top: 26px; width: 100%; }

/* la call e la riga della sala, sotto i pacchetti */
.riga-servizio {
  margin-top: clamp(26px, 3.4vw, 36px); padding: 18px 22px;
  display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; justify-content: space-between;
  border: 1px solid var(--nero-3); border-radius: var(--raggio); background: var(--nero-2);
  text-decoration: none; color: inherit; transition: border-color .22s ease;
}
.riga-servizio:hover { border-color: var(--nero-4); }
.riga-servizio h3 { font-size: clamp(18px, 2vw, 22px); margin-bottom: 4px; }
.riga-servizio svg { width: 18px; height: 18px; flex: none; color: var(--oro); transition: transform .26s cubic-bezier(.22,1,.36,1); }
.riga-servizio:hover svg { transform: translateX(4px); }
.riga-servizio .prezzo-mese { margin-top: 0; }
.riga-servizio .prezzo-mese .cifra-grande { font-size: clamp(28px, 3.2vw, 36px); }

/* ------------------------------------------------------------ 5. l'app, dopo i pacchetti */
#app .app-testo { max-width: 52ch; }
.telefoni {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 30px); justify-items: center; margin-top: clamp(30px, 4vw, 48px);
}
.telefono { width: 100%; max-width: 236px; }
@media (min-width: 760px) { .telefono:nth-child(2) { transform: translateY(-30px); } }
@media (max-width: 759.98px) {
  .telefoni {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--margine) * -1); padding: 4px var(--margine) 10px; scrollbar-width: none;
  }
  .telefoni::-webkit-scrollbar { display: none; }
  .telefono { flex: 0 0 62%; max-width: 230px; scroll-snap-align: center; }
}
.telefono-corpo {
  aspect-ratio: 9 / 19.3; padding: 8px;
  background: linear-gradient(160deg, #26262E, #15151A 42%);
  border: 1px solid var(--nero-4); border-radius: 30px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.telefono-schermo {
  position: relative; height: 100%; border-radius: 23px; overflow: hidden;
  background: #0E0E13; border: 1px solid #000;
  display: grid; place-content: center; gap: 10px; padding: 16px; text-align: center;
}
.telefono-schermo::before {
  content: ""; position: absolute; top: 7px; left: 50%; translate: -50% 0;
  width: 34%; height: 5px; border-radius: 99px; background: #000;
}
.telefono-attesa { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--osso-3); line-height: 1.5; }
.telefono-nome { font-family: var(--titoli); font-size: 16px; color: var(--osso); line-height: 1.1; text-transform: uppercase; }
.telefono-tratto { height: 1px; background: var(--oro-scuro); width: 40px; margin: 2px auto; }
.telefono-didascalia { margin-top: 12px; text-align: center; font-size: 13px; color: var(--osso-2); }

/* ------------------------------------------------------------ 6. dopo la scheda */
.due-strade { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(28px, 3.6vw, 40px); }
.strada { display: grid; gap: 10px; align-content: start; }
.strada .prezzo-mese { margin-top: 6px; }
.strada .prezzo-mese .cifra-grande { font-size: clamp(30px, 3.6vw, 40px); }
.senza-bollo { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); }

/* ------------------------------------------------------------ 7. chi e' Alessio */
#alessio { padding: 0; }
/* Era una fascia a tutta larghezza, disegnata su un segnaposto orizzontale.
   La foto vera e' verticale: stirata su 1440 px diventava un primo piano
   sgranato della nuca. Su schermo largo prende una colonna sua, alla sua
   forma, e il testo le sta accanto. Sul telefono tornano una sopra l'altra. */
#alessio .alessio-foto img { width: 100%; height: clamp(320px, 52vw, 480px); object-fit: cover; object-position: 50% 30%; }
#alessio .alessio-testo { max-width: var(--colonna); margin-inline: auto; padding: clamp(40px, 6vw, 80px) var(--margine); }

@media (min-width: 900px) {
  #alessio {
    display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    align-items: center; gap: clamp(36px, 5vw, 72px);
    max-width: calc(var(--colonna) + var(--margine) * 2);
    margin-inline: auto; padding-inline: var(--margine);
  }
  #alessio .alessio-foto img {
    height: auto; aspect-ratio: 751 / 1000; border-radius: 20px;
    object-position: 50% 26%;
  }
  #alessio .alessio-testo { padding: 0; max-width: none; margin-inline: 0; }
}
#alessio .alessio-testo .sottotitolo { max-width: 52ch; }

/* ------------------------------------------------------------ 8. domande */
.domande { margin-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--nero-3); }
.domanda { border-bottom: 1px solid var(--nero-3); }
.domanda > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px;
  padding: 20px 0; font-family: var(--titoli); font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.15; text-transform: uppercase; color: var(--osso);
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary::after {
  content: ""; flex: none; margin-left: auto; width: 18px; height: 18px;
  background: linear-gradient(var(--oro), var(--oro)) center/18px 2px no-repeat,
              linear-gradient(var(--oro), var(--oro)) center/2px 18px no-repeat;
  transition: rotate .25s cubic-bezier(.22,1,.36,1), background-size .25s ease;
}
.domanda[open] > summary::after { rotate: 45deg; background-size: 18px 2px, 2px 0; }
.domanda > summary:focus-visible { outline: 3px solid var(--oro-chiaro); outline-offset: 4px; }
.domanda-risposta { padding: 0 44px 24px 0; color: var(--osso-2); font-size: 16.5px; }
.domanda-risposta p { margin-bottom: .7em; }

/* ------------------------------------------------------------ 9. chiusura */
#chiusura { text-align: center; overflow: hidden; }
#chiusura .colonna-stretta { position: relative; z-index: 1; }
#chiusura .occhiello { justify-content: center; }
#chiusura h2 { margin-bottom: 18px; }
#chiusura .sottotitolo { margin-inline: auto; max-width: 46ch; }
#chiusura .bottone { margin-top: 32px; }
#chiusura .paghi { justify-content: center; margin-top: 24px; }
#chiusura::after {
  content: ""; position: absolute; left: 50%; bottom: -46%; translate: -50% 0;
  width: 120vw; height: 90vw; max-height: 620px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(212,166,42,.15), transparent 64%);
}

/* ------------------------------------------------------------ piede */
.piede { background: var(--nero-alto); padding: clamp(40px, 5vw, 60px) var(--margine); border-top: 1px solid var(--nero-3); }
.piede .colonna { display: grid; gap: 28px; }
@media (min-width: 780px) { .piede .colonna { grid-template-columns: 1fr auto; align-items: start; } }
.piede-legale { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; color: var(--osso-2); }
.piede-legale a { text-decoration: none; border-bottom: 1px solid var(--nero-4); padding-bottom: 2px; }
.piede-legale a:hover { color: var(--oro); border-bottom-color: var(--oro-scuro); }
.piede-nota { margin-top: 18px; font-size: 13px; color: var(--osso-3); max-width: 58ch; }

/* ------------------------------------------------------------ avviso sui cookie */
.cookie {
  position: fixed; z-index: 70; left: var(--margine); right: var(--margine); bottom: clamp(12px, 2vw, 20px);
  max-width: 560px; margin-inline: auto;
  background: var(--nero-2); border: 1px solid var(--nero-4); border-radius: var(--raggio-g);
  padding: clamp(20px, 2.6vw, 26px); color: var(--osso);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.95);
}
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 22px; margin-bottom: 10px; }
.cookie p { font-size: 14.5px; color: var(--osso-2); }
.cookie-scelte { display: grid; gap: 10px; margin: 18px 0; }
.cookie-scelta {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  font-size: 14px; padding: 12px 14px; border: 1px solid var(--nero-3); border-radius: var(--raggio); cursor: pointer;
}
.cookie-scelta input { accent-color: var(--oro); width: 18px; height: 18px; margin: 2px 0 0; }
.cookie-scelta span b { display: block; font-size: 14.5px; }
.cookie-scelta span i { font-style: normal; color: var(--osso-2); font-size: 13px; }
.cookie-scelta:has(input:disabled) { opacity: .72; cursor: default; }
.cookie-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-azioni .bottone { min-height: 48px; padding: 0 20px; font-size: 15px; flex: 1 1 auto; }
.cookie-link { margin-top: 14px; font-size: 13px; }
.cookie-link a { color: var(--oro); }

/* ------------------------------------------------------------ pagine legali */
.legale { padding: clamp(40px, 6vw, 80px) var(--margine) var(--respiro); }
.legale .colonna { max-width: var(--stretta); }
.legale h1 { font-size: clamp(32px, 6vw, 56px); margin-bottom: 10px; }
.legale h2 { font-size: clamp(22px, 3vw, 32px); margin: clamp(32px, 4vw, 46px) 0 12px; }
.legale h3 { font-size: 19px; margin: 26px 0 8px; }
.legale p, .legale li { color: var(--osso-2); }
.legale ul { padding-left: 22px; display: grid; gap: 8px; margin: 0 0 1em; }
.legale .data { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); margin-bottom: 30px; }
.legale .tabella { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 15px; }
.legale .tabella th, .legale .tabella td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--nero-3); vertical-align: top; }
.legale .tabella th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--osso); }
.legale .tabella td { color: var(--osso-2); }
.legale a { color: var(--oro); }
.legale code { font-size: .92em; color: var(--osso); }
.indietro { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--osso-2); }
.indietro:hover { color: var(--oro); }