/* cravantis.com - sistema "tavola a strisce"
   Registro: colore saturo, inchiostri da stampa + contorno nero.
   Nessun raggio: le vignette hanno angoli vivi. Nessuna ombra sfumata:
   solo lo scarto secco di una seconda lastra fuori registro. */

:root {
  /* inchiostri */
  --inchiostro: #131018;
  --ciano: #1590c4;
  --ciano-fondo: #0e6f9b;
  --ciano-chiaro: #9fd6ea;
  --rosso: #d8232a;
  --giallo: #f2b134;
  --bianco: #ffffff;

  /* misure della tavola */
  --canale: 14px;          /* il canale tra le vignette */
  --contorno: 3px;
  --scarto: 4px;           /* fuori registro della seconda lastra */

  --bordo-pagina: clamp(14px, 4vw, 56px);

  --t-micro: clamp(11px, 0.62rem + 0.2vw, 13px);
  --t-piccolo: clamp(14px, 0.8rem + 0.2vw, 16px);
  --t-testo: clamp(16px, 0.95rem + 0.25vw, 18.5px);
  --t-guida: clamp(19px, 1.05rem + 0.6vw, 24px);
  --t-tit-s: clamp(21px, 1.1rem + 1vw, 30px);
  --t-tit-m: clamp(28px, 1.3rem + 2.2vw, 46px);
  --t-tit-l: clamp(34px, 1.3rem + 3.6vw, 66px);

  --passo: clamp(26px, 4vw, 52px);
  --passo-largo: clamp(44px, 7vw, 104px);

  /* le curve morbide di serie sono troppo deboli per un'interfaccia stampata */
  --uscita: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--inchiostro);
  color: var(--inchiostro);
  font-family: "Signika", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-testo);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: "Anybody", "Signika", system-ui, sans-serif;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 0.9em; padding-left: 1.1em; }
li { margin-bottom: 0.35em; }

:focus-visible {
  outline: 4px solid var(--giallo);
  outline-offset: 2px;
}

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--giallo); color: var(--inchiostro);
  padding: 10px 16px; font-weight: 700;
}
.salta:focus { left: 8px; top: 8px; }

/* ---------- testata ---------- */

.testata {
  background: var(--inchiostro);
  border-bottom: var(--contorno) solid var(--inchiostro);
  padding: 10px var(--bordo-pagina);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  z-index: 40;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--bianco);
  font-family: "Anybody", sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 1rem + 1vw, 25px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.marchio svg { width: 26px; height: 26px; flex: none; }
.marchio span em { font-style: normal; color: var(--giallo); }

.menu-tasto {
  font: inherit;
  font-family: "Anybody", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--giallo);
  color: var(--inchiostro);
  border: var(--contorno) solid var(--inchiostro);
  box-shadow: var(--scarto) var(--scarto) 0 0 var(--rosso);
  padding: 9px 14px;
  cursor: pointer;
}
.menu-tasto:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--rosso); }

.navigazione { display: none; }
.navigazione.aperta { display: block; }

.navigazione ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigazione a {
  display: block;
  text-decoration: none;
  color: var(--bianco);
  font-family: "Anybody", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 0;
  border-bottom: 1px solid #3a3542;
}
.navigazione a:hover { color: var(--giallo); }
.navigazione a[aria-current="page"] { color: var(--giallo); }

@media (max-width: 899px) {
  .navigazione.aperta {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--inchiostro);
    padding: 4px var(--bordo-pagina) 20px;
    border-bottom: var(--contorno) solid var(--rosso);
  }
}

@media (min-width: 900px) {
  .menu-tasto { display: none; }
  .navigazione { display: block; }
  .navigazione ul { display: flex; gap: clamp(14px, 2vw, 30px); align-items: center; }
  .navigazione a { border-bottom: 0; padding: 4px 0; font-size: 14.5px; }
  .navigazione a[aria-current="page"] { border-bottom: 3px solid var(--giallo); }
}

/* ---------- la tavola: strisce e vignette ---------- */

.tavola {
  padding: var(--canale) var(--bordo-pagina) var(--passo-largo);
  background: var(--inchiostro);
}

.striscia {
  display: grid;
  gap: var(--canale);
  margin-bottom: var(--canale);
}

/* il respiro tra un capitolo e l'altro: canale doppio, non margine casuale */
.striscia--stacco { margin-bottom: calc(var(--canale) * 3); }

.riquadro {
  border: var(--contorno) solid var(--inchiostro);
  background: var(--ciano);
  padding: clamp(18px, 3.2vw, 34px);
  min-width: 0;
  position: relative;
}

.riquadro--rosso { background: var(--rosso); color: var(--bianco); }
.riquadro--giallo { background: var(--giallo); }
.riquadro--chiaro { background: var(--ciano-chiaro); }
.riquadro--nero { background: var(--inchiostro); color: var(--bianco); border-color: var(--giallo); }
.riquadro--fondo { background: var(--ciano-fondo); color: var(--bianco); }

.riquadro--rosso a, .riquadro--nero a, .riquadro--fondo a { color: var(--bianco); }

/* La vignetta con il fotogramma non ha imbottitura: l'immagine arriva al contorno
   e la didascalia resta dentro la cornice, come la striscia di testo di una tavola. */
.riquadro--immagine {
  padding: 0;
  background: var(--inchiostro);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.riquadro--immagine img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
}
.riquadro--immagine .didascalia { flex: none; }

.didascalia {
  background: var(--inchiostro);
  color: var(--bianco);
  font-size: var(--t-micro);
  line-height: 1.45;
  padding: 8px 11px;
  border-top: var(--contorno) solid var(--inchiostro);
}

/* la casella di testo dentro la vignetta, non sotto */
.casella {
  background: var(--bianco);
  border: var(--contorno) solid var(--inchiostro);
  padding: 10px 13px;
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--inchiostro);
}

/* Ritmo interno della vignetta. Prima queste tre regole vivevano come
   attributi style ripetuti un centinaio di volte nelle pagine. */
.riquadro > h1 + p, .riquadro > h2 + p, .riquadro > h3 + p,
.riquadro > h2 + ul, .riquadro > h3 + ul,
.riquadro > h2 + dl, .riquadro > h3 + dl { margin-top: 14px; }

.riquadro > *:last-child { margin-bottom: 0; }
.riquadro > p:first-child, .riquadro > ul:first-child { margin-top: 0; }

.nota { font-size: var(--t-piccolo); }

.etichetta {
  font-family: "Anybody", sans-serif;
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

/* il balloon: tre in tutto il sito, non uno per vignetta */
.balloon {
  position: relative;
  display: inline-block;
  background: var(--bianco);
  border: var(--contorno) solid var(--inchiostro);
  padding: 13px 17px;
  font-family: "Anybody", sans-serif;
  font-weight: 700;
  font-size: var(--t-guida);
  line-height: 1.18;
  color: var(--inchiostro);
  max-width: 30ch;
}
.balloon::after {
  content: "";
  position: absolute;
  left: 26px; bottom: calc(-1 * (18px + var(--contorno)));
  border: 9px solid transparent;
  border-top: 18px solid var(--inchiostro);
  border-bottom: 0;
  width: 0; height: 0;
}

/* retino: solo su due vignette in tutto il sito, e mai come fondo pagina */
@property --spinta {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.retino::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--inchiostro) 1.5px, transparent 1.6px);
  background-size: 9px 9px;
  opacity: 0.28;
  pointer-events: none;
  transform: translate3d(var(--spinta, 0px), 0, 0);
}
.retino > * { position: relative; z-index: 1; }

/* ---------- tipografia di pagina ---------- */

.titolone {
  font-size: var(--t-tit-l);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.titolo-striscia {
  font-size: var(--t-tit-m);
  text-transform: uppercase;
  letter-spacing: -0.028em;
}

.titolo-piccolo { font-size: var(--t-tit-s); }

.guida {
  font-size: var(--t-guida);
  line-height: 1.42;
  font-weight: 500;
}

.misura { max-width: 66ch; }

/* ---------- bottoni ---------- */

.bottone {
  display: inline-block;
  font-family: "Anybody", sans-serif;
  font-weight: 800;
  font-size: var(--t-piccolo);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  background: var(--rosso);
  color: var(--bianco);
  border: var(--contorno) solid var(--inchiostro);
  box-shadow: var(--scarto) var(--scarto) 0 0 var(--inchiostro);
  padding: 12px 18px;
  cursor: pointer;
  transition: transform 150ms var(--uscita), box-shadow 150ms var(--uscita);
}

/* il puntatore fine e' l'unico che ha davvero uno stato di passaggio:
   sul tocco l'hover si attiva al tap e sembra un bottone rotto */
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 0 var(--inchiostro); }
  .bottone--vuoto:hover { background: var(--inchiostro); color: var(--bianco); box-shadow: none; transform: none; }
}

/* la pressione manda la lastra a battuta: lo scarto sparisce sotto il dito */
.bottone:active { transform: translate(var(--scarto), var(--scarto)); box-shadow: 0 0 0 0 var(--inchiostro); }

.bottone--chiaro { background: var(--giallo); color: var(--inchiostro); }
.bottone--vuoto { background: transparent; color: var(--inchiostro); box-shadow: none; border-width: var(--contorno); }
.bottone--vuoto:active { transform: scale(0.97); box-shadow: none; }

.fila-bottoni { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- scheda gioco: metadati ---------- */

.dati {
  margin: 0;
  font-size: var(--t-piccolo);
  line-height: 1.45;
}
.dati div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(19, 16, 24, 0.28);
}
.dati div:last-child { border-bottom: 0; }
.dati dt { font-weight: 600; }
.dati dd { margin: 0; text-align: right; font-weight: 400; }
.riquadro--rosso .dati div, .riquadro--fondo .dati div, .riquadro--nero .dati div {
  border-color: rgba(255, 255, 255, 0.34);
}

.avviso {
  border: var(--contorno) solid var(--inchiostro);
  background: var(--giallo);
  color: var(--inchiostro);
  padding: 11px 14px;
  font-size: var(--t-piccolo);
  line-height: 1.48;
}
.avviso strong { font-family: "Anybody", sans-serif; }

/* ---------- il grafico dei prezzi ---------- */

.grafico { margin: 0; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--t-piccolo);
  font-weight: 600;
  margin-bottom: 18px;
  padding: 0;
  list-style: none;
}
.legenda li { display: flex; align-items: center; gap: 8px; margin: 0; }
.segno {
  width: 15px; height: 15px;
  border: 2px solid var(--inchiostro);
  flex: none;
  display: inline-block;
}
.segno--play { background: var(--rosso); }
.segno--apple { background: var(--ciano); border-radius: 50%; }

.riga-prezzo { padding: 13px 0; border-bottom: 1px solid rgba(19, 16, 24, 0.25); }
.riga-prezzo:last-of-type { border-bottom: 0; }

.riga-prezzo h3 {
  font-size: var(--t-piccolo);
  font-family: "Signika", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 8px;
  line-height: 1.3;
}

.binario {
  position: relative;
  height: 30px;
  margin-bottom: 4px;
}
.binario::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(19, 16, 24, 0.22);
  transform: translateY(-50%);
}
.legame {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--inchiostro);
  transform: translateY(-50%);
}
.punto {
  position: absolute;
  top: 50%;
  width: 17px; height: 17px;
  border: 2px solid var(--inchiostro);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--ciano-chiaro);
}
.punto--play { background: var(--rosso); }
.punto--apple { background: var(--ciano); border-radius: 50%; }

.valori {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--t-micro);
  font-weight: 600;
}

.scala {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-micro);
  font-weight: 600;
  padding-top: 10px;
  border-top: 2px solid var(--inchiostro);
  margin-top: 6px;
}

.tabella-dati {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-piccolo);
  margin-top: 8px;
}
.tabella-dati th, .tabella-dati td {
  text-align: left;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid rgba(19, 16, 24, 0.25);
}
.tabella-dati th { font-weight: 700; }
details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-piccolo);
  padding: 8px 0;
}

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

.modulo { display: grid; gap: 14px; }

.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: var(--t-piccolo); }
.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
  font: inherit;
  font-size: 16px;
  background: var(--bianco);
  color: var(--inchiostro);
  border: var(--contorno) solid var(--inchiostro);
  padding: 11px 12px;
  width: 100%;
  min-height: 46px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo .aiuto { font-size: var(--t-micro); line-height: 1.4; }

.consenso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--t-piccolo);
  line-height: 1.45;
  background: var(--bianco);
  border: var(--contorno) solid var(--inchiostro);
  padding: 12px;
}
.consenso input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--rosso); }

.esito {
  border: var(--contorno) solid var(--inchiostro);
  background: var(--giallo);
  color: var(--inchiostro);
  padding: 12px 14px;
  font-weight: 600;
  font-size: var(--t-piccolo);
}
.esito[hidden] { display: none; }

.errore { font-size: var(--t-micro); font-weight: 700; }

/* ---------- pie' di pagina ---------- */

.pie {
  background: var(--inchiostro);
  color: var(--bianco);
  padding: var(--passo) var(--bordo-pagina) 30px;
  border-top: 5px solid var(--rosso);
  font-size: var(--t-piccolo);
}
.pie h2 { font-size: var(--t-tit-s); margin-bottom: 12px; }
.pie a { color: var(--giallo); }
.pie-griglia { display: grid; gap: var(--passo); }
.pie ul { list-style: none; padding: 0; }
.pie li { margin-bottom: 7px; }

.disclaimer {
  margin-top: var(--passo);
  padding-top: 18px;
  border-top: 1px solid #3a3542;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: #cfc8d6;
}

@media (min-width: 760px) {
  .pie-griglia { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- composizioni di striscia (desktop) ---------- */

@media (min-width: 780px) {
  .s-2-1 { grid-template-columns: 2fr 1fr; }
  .s-1-2 { grid-template-columns: 1fr 2fr; }
  .s-1-1 { grid-template-columns: 1fr 1fr; }
  .s-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
  .s-5-3 { grid-template-columns: 5fr 3fr; }
  .s-3-5 { grid-template-columns: 3fr 5fr; }
  .s-4-3-3 { grid-template-columns: 4fr 3fr 3fr; }
}

.pila { display: grid; gap: var(--canale); align-content: start; }

/* ---------- animazione ---------- */

.js .anim-vignetta { opacity: 0; }

/* Movimento ridotto: le vignette ci sono tutte da subito e il retino sta fermo.
   I passaggi di colore restano, perche' aiutano a capire cosa e' premuto. */
@media (prefers-reduced-motion: reduce) {
  .js .anim-vignetta { opacity: 1 !important; transform: none !important; }
  .retino::before { --spinta: 0px; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .bottone, .bottone:hover, .bottone:active,
  .menu-tasto:active, .bottone--vuoto:active { transform: none !important; }
}