/* ===================================================================
   KrewU — pagine pubbliche
   ===================================================================

   🔑 Stesso vestito degli altri siti della famiglia.

   ellemultiverse.com, ellezen.it, ellelost.app e ellezone hanno tutti
   lo stesso impianto: fondo scuro che sfuma dall'alto, due aloni di
   colore fissi agli angoli, riquadri di vetro appena schiariti sopra
   il fondo. Le variabili qui sotto sono le stesse di
   `public_ellemultiverse/style.css`, non delle somiglianti: se un
   giorno il brand cambia, si cambiano in tutti i siti gli stessi
   nomi.

   Prima queste pagine erano su fondo bianco, con la motivazione che un
   documento legale si legge meglio su carta chiara. Era vero in sé e
   sbagliato nell'insieme: chi arriva qui da uno degli altri siti trova
   una pagina che sembra di qualcun altro, e la prima cosa che pensa
   non e "che bel bianco", e "sono finito altrove". La leggibilita si
   ottiene con il contrasto — bianco su blu notte sta oltre 15:1 — non
   rinunciando all'identita.
   =================================================================== */

:root {
  /* Palette ElleMultiverse */
  --space-blue: #0b0c2a;
  --space-blue-2: #14163a;
  --galactic: #7627e0;
  --teal: #2dfcdc;
  --gold: #d1b87e;

  /* La tinta di KrewU: il corallo del centro dell'icona, cioe la
     persona attorno a cui si stringe la crew. Serve dove si parla
     dell'app e non della famiglia. */
  --krewu: #ff6b5e;

  /* Rosa e viola della famiglia: sono gli stessi del marchio nuovo
     (`#EC4899` e `#8B5CF6`) e servono a scaldare il blu notte, che da
     solo resta molto tecnico. Su un sito che parla di figli, "tecnico"
     non e il primo sentimento che deve arrivare. */
  --rosa: #ec4899;
  --viola: #8b5cf6;

  --testo: #ffffff;
  --testo-tenue: rgba(255, 255, 255, 0.72);
  --linea: rgba(255, 255, 255, 0.1);
  --linea-forte: rgba(255, 255, 255, 0.18);
  --vetro: rgba(255, 255, 255, 0.04);
  --vetro-alto: rgba(255, 255, 255, 0.07);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  color: var(--testo);
  background: radial-gradient(
    ellipse at top,
    var(--space-blue-2) 0%,
    var(--space-blue) 100%
  );
  min-height: 100vh;
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

/* Gli aloni: viola in alto a sinistra, verde acqua in basso a destra.
   Sono `fixed` di proposito — restano fermi mentre la pagina scorre, e
   danno la sensazione di profondita che hanno gli altri siti. */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--galactic) 0%, transparent 70%);
  opacity: 0.18;
}

body::after {
  bottom: -300px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  opacity: 0.1;
}

/* Il terzo alone, rosa, a meta pagina sulla sinistra.
   Gli altri due stanno agli angoli e lasciano spento tutto il centro,
   che e proprio dove si legge piu a lungo. Sta dentro un elemento suo
   perche `body` ha gia i due pseudo-elementi occupati. */
.alone-rosa {
  position: fixed;
  top: 38%;
  left: -260px;
  width: 620px;
  height: 620px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--rosa) 0%, transparent 68%);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

/* E uno viola a destra, piu in basso: i due si guardano in diagonale
   e tengono insieme la parte centrale della pagina. */
.alone-viola {
  position: fixed;
  top: 62%;
  right: -300px;
  width: 680px;
  height: 680px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--viola) 0%, transparent 68%);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

/* Tutto il contenuto sta sopra gli aloni. */
header,
main,
footer {
  position: relative;
  z-index: 1;
}

header {
  padding: 40px 24px 56px;
  border-bottom: 1px solid var(--linea);
}

header .dentro,
main,
footer .dentro {
  max-width: 820px;
  margin: 0 auto;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-size: 20px;
  color: var(--testo);
  text-decoration: none;
}

/* Il segno accanto al nome: l'icona di KrewU.
   Qui va il marchio dell'app, non quello della societa: chi arriva sta
   cercando l'app, ed e la stessa figura che trovera sullo store e poi
   sul telefono di suo figlio. */
.segno {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

header h1 {
  margin: 26px 0 10px;
  font-size: 44px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.2px;
}

.sommario {
  font-size: 18px;
  line-height: 1.55;
  color: var(--testo-tenue);
  max-width: 32em;
  margin: 0 0 28px;
}

.occhiello {
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rosa);
  margin: 0 0 10px;
}

.occhiello.chiaro {
  color: var(--testo-tenue);
  margin-top: 28px;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.bottone {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--viola), var(--rosa));
  box-shadow: 0 12px 34px rgba(236, 72, 153, 0.34);
  transition: transform 0.15s;
}

.bottone:hover {
  transform: translateY(-2px);
}

.bottone.vuoto {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--linea-forte);
  box-shadow: none;
}

.nota-hero {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 36em;
  margin: 0;
}

main {
  padding: 56px 24px 72px;
}

section {
  margin-bottom: 64px;
}

h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 0 0 14px;
  line-height: 1.2;
}

/* Il titolo in cima: le ultime parole prendono il gradiente, come su
   ellemultiverse.com. Colorarlo tutto lo renderebbe illeggibile a
   colpo d'occhio — il colore serve a far cadere l'occhio in un punto,
   non a decorare una riga intera. */
header h1 .acceso {
  background: linear-gradient(120deg, var(--rosa), var(--viola), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 8px;
}

p,
li {
  color: var(--testo-tenue);
}

section > p {
  font-size: 16.5px;
}

strong {
  color: var(--testo);
  font-weight: 700;
}

.tenue {
  color: var(--testo-tenue);
  font-size: 14.5px;
}

a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* I riquadri di vetro: il fondo si vede attraverso, come negli altri
   siti della famiglia. */
.riquadro {
  background: var(--vetro);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: 26px;
  margin: 18px 0;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}

.riquadro:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 72, 153, 0.4);
  background: var(--vetro-alto);
  box-shadow: 0 14px 40px rgba(236, 72, 153, 0.12);
}

.riquadro.evidenza {
  border-left: 3px solid var(--teal);
}

/* I passi numerati: il numero conta, ed e la prima cosa che si guarda
   quando ci si chiede "quanto e complicato". */
.passi {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
}

.passi li {
  counter-increment: passo;
  position: relative;
  padding-left: 58px;
  margin-bottom: 26px;
}

.passi li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--viola), var(--rosa));
}

.passi h3 {
  margin: 4px 0 6px;
}

.passi p {
  margin: 0;
  font-size: 15px;
}

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.griglia .riquadro {
  margin: 0;
}

.griglia h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--testo);
}

.griglia p {
  margin: 0;
}

.griglia.due {
  grid-template-columns: repeat(2, 1fr);
}

/* La sezione delle cose che non facciamo: bordo verde acqua e non
   giallo d'allarme. E' un discorso serio detto con calma, e un colore
   da avviso di pericolo lo farebbe saltare a chi legge. */
.franco {
  background: var(--vetro);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--rosa);
  border-radius: 22px;
  padding: 30px 28px 12px;
}

.franco h2 {
  margin-top: 4px;
}

.elenco-franco {
  padding-left: 20px;
}

.elenco-franco li {
  margin-bottom: 14px;
  font-size: 15px;
}

/* La parte per i ragazzi: qui entra il corallo di KrewU, perche si
   sta parlando a loro e non piu della famiglia. */
.ragazzi {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 94, 0.16),
    rgba(118, 39, 224, 0.18)
  );
  border: 1px solid rgba(255, 107, 94, 0.32);
  border-radius: 24px;
  padding: 34px 30px;
}

.ragazzi .occhiello {
  color: var(--krewu);
}

.ragazzi p {
  font-size: 16px;
}

/* Modulo della lista d'attesa */
form {
  background: var(--vetro);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: 26px;
}

.campo span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--testo-tenue);
  margin-bottom: 8px;
}

.campo input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--linea-forte);
  border-radius: 14px;
  font-family: inherit;
  /* 16px pieni: sotto, iOS ingrandisce la pagina da solo quando si
     tocca il campo, e la pagina resta storta. */
  font-size: 16px;
  color: var(--testo);
  background: rgba(255, 255, 255, 0.05);
}

.campo input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.campo input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.consenso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 18px 0 20px;
  font-size: 13.5px;
  color: var(--testo-tenue);
  line-height: 1.5;
}

.consenso input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--galactic);
}

form button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--viola), var(--rosa));
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.3);
  cursor: pointer;
}

form button:disabled {
  opacity: 0.55;
  cursor: default;
}

.esito {
  margin: 14px 0 0;
  font-size: 14px;
  min-height: 1.2em;
}

/* Verde acqua per il fatto, oro per il problema: il rosso su fondo
   scuro vibra e sembra un errore di sistema. */
.esito.bene {
  color: var(--teal);
  font-weight: 600;
}

.esito.male {
  color: var(--gold);
}

/* Domande frequenti: nessuna libreria, `details` lo fa da solo. */
details {
  background: var(--vetro);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 10px;
}

details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--testo);
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '+';
  float: right;
  font-weight: 700;
  color: var(--teal);
}

details[open] summary::after {
  content: '\2212';
}

details p {
  margin: 12px 0 2px;
}

/* Tabelle: le usano privacy e termini. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14.5px;
}

th,
td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  color: var(--testo-tenue);
}

th {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--teal);
}

footer {
  border-top: 1px solid var(--linea);
  padding: 32px 24px 56px;
  font-size: 13px;
  color: var(--testo-tenue);
}

footer strong {
  color: var(--testo);
}

.piccolo {
  font-size: 12.5px;
}

@media (max-width: 620px) {
  header {
    padding: 28px 20px 40px;
  }
  header h1 {
    font-size: 31px;
    letter-spacing: -0.8px;
  }
  .sommario {
    font-size: 16.5px;
  }
  h2 {
    font-size: 24px;
  }
  main {
    padding: 40px 20px 56px;
  }
  .griglia.due {
    grid-template-columns: 1fr;
  }
  .azioni .bottone {
    flex: 1 1 100%;
    text-align: center;
  }

  /* Le tabelle diventano righe impilate: su un telefono una tabella a
     tre colonne si legge solo ruotandolo, e nessuno lo fa. */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  th {
    display: none;
  }
  td {
    border: none;
    padding: 4px 0;
  }
  tr {
    border-bottom: 1px solid var(--linea);
    padding: 12px 0;
  }
}