/* SognIA — il telefono con il mini-sito e i controlli della prova.
   Prende i colori della pagina: --ink, --bg, --surface, --accent, --accent-ink. */

/* Telefono: tutto in em, si scala con font-size sul contenitore. */
.telefono {
  font-size: 16px;
  width: 19em;
  aspect-ratio: 9 / 18.6;
  padding: .55em;
  border-radius: 2.6em;
  background: #151413;
  overflow: hidden;
  flex: none;
}
.mini {
  --mini-c: #c7492b;
  height: 100%;
  border-radius: 2.1em;
  background: #fff;
  color: #151413;
  overflow: hidden;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}
.mini-barra {
  display: flex; justify-content: space-between; align-items: center; gap: .6em;
  padding: 1.5em 1.1em .7em;
  font-size: .8em;
}
.mini-barra b { font-weight: 800; letter-spacing: -.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini-chiama { flex: none; background: var(--mini-c); color: #fff; font-weight: 700; padding: .45em .9em; border-radius: 99px; transition: background-color .5s; }
.mini-eroe {
  background: var(--mini-c);
  color: #fff;
  margin: 0 .6em;
  border-radius: 1.3em;
  padding: 1.3em 1.1em 1.2em;
  min-height: 11em;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: background-color .5s;
}
.mini-nome { margin: 0; font-weight: 800; font-size: 1.9em; line-height: .98; letter-spacing: -.04em; overflow-wrap: anywhere; }
.mini-frase { margin: .6em 0 0; font-size: .82em; line-height: 1.35; }
.mini-aperto { margin: .9em 1.1em .1em; font-size: .78em; font-weight: 600; display: flex; align-items: center; gap: .45em; }
.mini-aperto i { width: .6em; height: .6em; border-radius: 50%; background: #2e8b57; flex: none; }
.mini-azioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; padding: .6em .6em 0; }
.mini-azioni span { background: #f1efec; border-radius: .9em; text-align: center; padding: .8em .2em; font-size: .7em; font-weight: 700; }
.mini-azioni span:first-child { background: var(--mini-c); color: #fff; transition: background-color .5s; }
.mini-tit { margin: 1.1em 1.1em .4em; font-weight: 800; font-size: .9em; letter-spacing: -.02em; }
.mini-cose { list-style: none; margin: 0; padding: 0 .6em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.mini-cose li { background: #f1efec; border-radius: .9em; padding: 2.4em .6em .6em; font-size: .72em; font-weight: 700; position: relative; }
.mini-cose li::before { content: ""; position: absolute; left: .6em; top: .6em; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--mini-c); opacity: .85; transition: background-color .5s; }
.mini.mini-cambio .mini-eroe, .mini.mini-cambio .mini-nome { animation: mini-entra .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes mini-entra { from { opacity: .2; transform: translateY(.4em); } to { opacity: 1; transform: none; } }

/* La striscia orizzontale (bozza A): stesso mini-sito, solo l'eroe, alto quanto le lettere. */
.striscia {
  --mini-c: #c7492b;
  background: var(--mini-c);
  color: #fff;
  border-radius: .16em;
  display: flex; align-items: center; justify-content: space-between; gap: .3em;
  padding: 0 .28em;
  overflow: hidden;
  transition: background-color .6s;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}
.striscia .s-nome { font-size: .3em; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; line-height: 1; }
.striscia .s-aperto { font-size: .12em; font-weight: 600; letter-spacing: 0; white-space: nowrap; display: flex; align-items: center; gap: .5em; background: rgba(255,255,255,.18); padding: .55em 1em; border-radius: 99px; }
.striscia .s-aperto i { width: .7em; height: .7em; border-radius: 50%; background: #9fe6b8; }
.striscia.mini-cambio .s-nome { animation: mini-entra .6s cubic-bezier(.16, 1, .3, 1); }

/* I controlli della prova */
.prova { display: grid; gap: 22px; }
.prova label, .prova legend { font-weight: 700; font-size: 17px; letter-spacing: -.01em; padding: 0; margin: 0 0 10px; }
.prova fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.prova input[type="text"] {
  width: 100%;
  font: 600 clamp(22px, 2.2vw, 30px)/1.2 "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.02em;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid rgba(21, 20, 19, .22);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .25s, background-color .25s;
}
.prova input[type="text"]::placeholder { color: var(--muted); opacity: 1; }
.prova input[type="text"]:hover { border-color: var(--muted); }
.prova input[type="text"]:focus { outline: none; border-color: var(--ink); background: var(--bg); }
.tipi { display: flex; flex-wrap: wrap; gap: 8px; }
.tipi label { margin: 0; font-weight: 600; font-size: 16px; }
.tipi input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tipi span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 99px; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.tipi span:hover { transform: translateY(-2px); }
.tipi input:checked + span { background: var(--ink); color: var(--bg); }
.tipi input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.nota-esempio { font-size: 15px; color: var(--muted); margin: 0; }