/* pagina.css · «Il tavolo che parla», pagina pubblica (12 set 2026).
   Bianca come la tavola del fumetto, inchiostro scuro, un solo accento oro. Si legge bene dal telefono. */
:root { --ink:#131821; --carta:#ffffff; --grigio:#5d6878; --riga:#dfe4ec; --oro:#b8860b; --verde:#1c8c53; --rosso:#c1121f; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--carta); color:var(--ink); font-size:17px; line-height:1.62;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 980px; margin: 0 auto; padding: 0 20px; }
h1 { font-size: clamp(40px, 8vw, 74px); line-height:1.02; letter-spacing:-.02em; margin:.1em 0 .35em; font-weight:900; }
h2 { font-size: clamp(26px, 4.4vw, 38px); line-height:1.14; letter-spacing:-.01em; margin:0 0 .4em; font-weight:800; }
p { margin: 0 0 1em; }
a { color: var(--ink); }

.cima { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px;
  max-width:980px; margin:0 auto; }
.marchio { font-weight:800; text-decoration:none; letter-spacing:.01em; }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff;
  text-decoration:none; font-weight:800; border:2px solid var(--ink); border-radius:999px; padding:15px 26px;
  font-size:17px; cursor:pointer; }
.cta:hover { background:#000; }
.cta.vuota { background:transparent; color:var(--ink); }
.cta.piccola { padding:10px 18px; font-size:15px; }
.cta.grande { width:100%; padding:19px 26px; font-size:19px; border-radius:16px; }

.apertura { padding: 26px 0 44px; }
.occhiello { text-transform:uppercase; letter-spacing:.14em; font-size:13px; font-weight:800; color:var(--oro); margin:0; }
.grosso { font-size: clamp(18px, 2.4vw, 21px); max-width: 40em; }
.tasti { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

section { padding: 44px 0; border-top: 1px solid var(--riga); }
.sotto { color:var(--grigio); max-width:40em; }
.nota { color:var(--grigio); font-size:15px; margin-top:12px; }

.fumetto { position:relative; width:100%; aspect-ratio: 3 / 2; border:3px solid var(--ink); border-radius:14px;
  overflow:hidden; background:#fff; }
.fumetto .filmato.dentro { position:absolute; inset:0; z-index:1; background:#fff; }
.filmato.dentro canvas { display:block; width:100%; height:100%; }
.filmato.dentro.via { opacity:1; }

.schede { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:22px; }
.scheda { display:flex; flex-direction:column; gap:8px; text-decoration:none; border:2px solid var(--ink);
  border-radius:16px; padding:20px; background:#fff; }
.scheda:hover { background:#f7f8fb; }
.etichetta { font-weight:900; font-size:21px; }
.scheda .testo { color:var(--grigio); font-size:16px; }
.freccia { margin-top:auto; font-weight:800; color:var(--oro); }
.freccia::after { content:" →"; }

.punti { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px; max-width:44em; }
.punti li { border-left:4px solid var(--ink); padding:2px 0 2px 16px; }

form { margin-top:26px; max-width:720px; }
.riga { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:block; font-weight:700; font-size:15px; margin-bottom:14px; }
input, textarea { display:block; width:100%; margin-top:6px; font:inherit; font-weight:400; padding:14px;
  border:2px solid var(--riga); border-radius:12px; background:#fff; color:var(--ink); }
input:focus, textarea:focus { outline:none; border-color:var(--ink); }
input[aria-invalid="true"] { border-color:var(--rosso); }
.obb { color:var(--oro); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.file input { padding:12px; border-style:dashed; }
.aiuto { display:block; margin-top:6px; font-weight:400; font-size:14px; color:var(--grigio); }
.privacy { font-size:14px; color:var(--grigio); margin-top:12px; }
.trappola { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.esito { margin-top:14px; font-weight:800; min-height:1.5em; }
.esito.ok { color:var(--verde); }
.esito.male { color:var(--rosso); }

.fondo { border-top:1px solid var(--riga); margin-top:20px; padding:30px 20px 50px; text-align:center; color:var(--grigio); }
.fondo p { margin:.2em 0; }

@media (max-width: 640px) {
  .riga { grid-template-columns: 1fr; }
  .fumetto { aspect-ratio: 4 / 3; }
  .cta { width:100%; }
  .cima .cta { width:auto; }
}

/* le vie di ritorno alla pagina principale del kaiten */
.cima .vie { display:flex; gap:16px; margin-left:auto; margin-right:6px; font-size:15px; }
.cima .vie a { color:var(--grigio); text-decoration:none; font-weight:700; }
.cima .vie a:hover { color:var(--ink); }
@media (max-width: 640px) { .cima .vie { display:none; } }