/* if2026.netvision.it: grafica del post IF26 di Sokom (palette e caratteri di Internet Festival 2026).
   Pensata per un tablet da 10" in orizzontale, senza scorrere; in verticale e sul telefono le
   due meta' vanno una sotto l'altra. Un solo tema, voluto: e' un chiosco, non un sito. */
:root {
  --y: #d2cf00; --c: #0094ca; --m: #de006e; --k: #1d1d1b; --bg: #f0f0f0;
  --pannello: #1d1d1b; --campo: #2a2a27; --bordo: #45453f; --testo: #f3f3ee; --tenue: #b5b5ad;
  --rosso: #ff6b6b;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --corpo: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--k); }
body { font-family: var(--corpo); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
       overflow-x: hidden; position: relative; }
button, input, select, textarea { font: inherit; color: inherit; }

/* tracce di circuito disegnate da if26.js */
.circuito { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .32; pointer-events: none; z-index: 0; }

.pagina { position: relative; z-index: 1; min-height: 100dvh; display: grid;
          grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); grid-template-rows: 1fr auto; }

/* ------------------------------------------------------------ lato sinistro */
.lato { position: relative; padding: clamp(22px, 3.2vh, 40px) clamp(22px, 3vw, 44px) 12px; display: flex;
        flex-direction: column; gap: clamp(10px, 1.8vh, 18px); overflow: hidden; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.top img { height: clamp(44px, 7vh, 64px); width: auto; display: block; }
.partner { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
           background: var(--k); color: #fff; padding: 10px 14px; white-space: nowrap; }
.partner b { color: var(--y); }

.hash { position: relative; display: inline-block; font-family: var(--display); font-weight: 800; line-height: 1;
        font-size: clamp(34px, 6vh, 52px); margin-top: clamp(4px, 1.5vh, 16px); }
.hash .sotto { color: var(--y); text-transform: uppercase; }
.hash .sopra { position: absolute; left: .03em; top: -.2em; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700;
               font-size: .74em; color: #00869f; text-shadow: 2px 2px 0 rgba(29,29,27,.3); }

h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .95;
     font-size: clamp(36px, 6.4vh, 60px); letter-spacing: -.005em; max-width: 12ch; text-wrap: balance; }
h1 em { font-style: normal; color: var(--m); }
.lead { font-size: clamp(16px, 2.3vh, 20px); line-height: 1.42; font-weight: 500; color: #333; max-width: 36ch; }
.lead b { color: var(--k); }
.nv { color: var(--c); font-weight: 800; }

.tre { list-style: none; display: grid; gap: 8px; max-width: 40ch; }
.tre li { display: grid; grid-template-columns: 7.2em 1fr; align-items: baseline; gap: 10px; font-size: clamp(15px, 2.1vh, 18px); color: #333; }
.tre b { font-family: var(--mono); font-weight: 700; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; }
.tre li:nth-child(1) b { color: #a8a500; } .tre li:nth-child(2) b { color: var(--c); } .tre li:nth-child(3) b { color: var(--m); }

.quando { margin-top: auto; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .16em;
          text-transform: uppercase; color: var(--k); }
.quando i { font-style: normal; color: var(--m); }
/* la figura del post sta accanto al titolo, nello spazio a destra, e non sotto il testo:
   21vw di altezza la fa stare accanto a «PROTEGGERE» sia a 1280x800 sia sull'iPad 1180x820 */
.figura { position: absolute; right: clamp(8px, 1.6vw, 24px); top: clamp(76px, 11vh, 100px); height: min(36vh, 21vw); width: auto;
          z-index: -1; pointer-events: none; }

/* ------------------------------------------------------------ pannello del modulo */
.modulo { background: var(--pannello); color: var(--testo); margin: clamp(16px, 2.6vh, 28px) clamp(16px, 2.2vw, 30px) 10px 0;
          padding: clamp(18px, 3vh, 30px) clamp(20px, 2.6vw, 36px); display: flex; flex-direction: column;
          gap: clamp(10px, 1.8vh, 16px); border-top: 6px solid var(--m); }
.testa { display: flex; align-items: center; gap: 18px; }
.testa img { width: clamp(84px, 10vw, 118px); height: auto; display: block; }
.eti { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .22em; color: var(--y); text-transform: uppercase; }
.testa h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4.4vh, 38px); line-height: 1; text-transform: uppercase; margin-top: 4px; }

form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.7vh, 16px) 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
label, .etichetta { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
label .req { color: var(--m); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; min-height: clamp(48px, 7vh, 58px); background: var(--campo); border: 1px solid var(--bordo); border-radius: 2px;
  padding: 10px 14px; font-size: 19px; color: var(--testo); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: clamp(64px, 11vh, 96px); resize: none; line-height: 1.35; }
select { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23de006e'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
select option { background: #26261f; color: var(--testo); }
input:focus, select:focus, textarea:focus { border-color: var(--c); box-shadow: 0 0 0 3px rgba(0,148,202,.35); }
.campo.errore input, .campo.errore select { border-color: var(--rosso); }

.consenso { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--testo); min-height: 44px; }
.consenso input { width: 26px; height: 26px; accent-color: var(--m); flex: none; }
.consenso button { background: none; border: 0; color: var(--m); text-decoration: underline; cursor: pointer; padding: 6px 0; font-weight: 600; }
.consenso.errore { color: var(--rosso); }

.invia { grid-column: 1 / -1; min-height: clamp(56px, 8vh, 66px); background: var(--m); color: #fff; border: 0; border-radius: 2px;
         font-weight: 700; font-size: 21px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.invia:active { filter: brightness(.9); }
.invia:focus-visible { outline: 3px solid var(--y); outline-offset: 3px; }
.invia[disabled] { opacity: .65; cursor: wait; }
.messaggio-errore { grid-column: 1 / -1; color: var(--rosso); font-weight: 600; font-size: 16px; min-height: 0; }
.messaggio-errore:empty { display: none; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ piede e barre */
.piede { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
         margin: 0 clamp(16px, 2.2vw, 30px) 0 clamp(22px, 3vw, 44px); padding: 10px 0 14px; border-top: 3px solid var(--k); }
.piede img { height: clamp(30px, 4.6vh, 40px); width: auto; display: block; }
.piede .url { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .14em; }
.piede .url i { font-style: normal; color: var(--m); }
.barre { position: fixed; left: 0; right: 0; bottom: 0; height: 8px; display: flex; z-index: 3; }
.barre i { flex: 1; } .barre i:nth-child(1) { background: var(--y); } .barre i:nth-child(2) { background: var(--c); }
.barre i:nth-child(3) { background: var(--m); } .barre i:nth-child(4) { background: var(--k); }

/* comandi discreti per chi gestisce il tablet */
.piede .destra { display: flex; align-items: center; gap: 14px; }
.schermo { width: 38px; height: 38px; border: 0; border-radius: 2px; flex: none;
           background: rgba(29,29,27,.08); color: var(--k); cursor: pointer; display: grid; place-items: center; }
.schermo svg { width: 20px; height: 20px; }
.stato { position: fixed; right: 14px; bottom: 14px; z-index: 4; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
         background: var(--k); color: #fff; padding: 6px 10px; }
.stato:empty { display: none; }

/* ------------------------------------------------------------ sovrapposizioni */
/* velo pieno: dietro al ringraziamento non si devono intravedere i dati appena scritti */
.velo { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: var(--bg); }
#velo-privacy { background: rgba(29,29,27,.72); }
.velo[hidden] { display: none; }
.grazie { text-align: center; max-width: 760px; }
.grazie .spunta { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; background: var(--m); display: grid; place-items: center; }
.grazie .spunta svg { width: 48px; height: 48px; }
.grazie h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 9vh, 86px); line-height: .95; }
.grazie h2 em { font-style: normal; color: var(--m); }
.grazie p { font-size: clamp(18px, 2.8vh, 24px); line-height: 1.45; margin-top: 16px; color: #333; }
.grazie p b { color: var(--k); }
.grazie .nota { font-size: 16px; color: #555; }
.grazie .ancora { margin-top: 26px; min-height: 58px; padding: 0 30px; background: var(--k); color: #fff; border: 0; border-radius: 2px;
                  font-weight: 700; font-size: 19px; cursor: pointer; }
.grazie .conto { display: block; margin-top: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: #666; }

.informativa { background: #fff; max-width: 720px; max-height: 86dvh; overflow: auto; padding: 28px 32px; border-top: 6px solid var(--m); }
.informativa h2 { font-family: var(--display); font-size: 32px; text-transform: uppercase; margin-bottom: 12px; }
.informativa p, .informativa li { font-size: 16px; line-height: 1.5; color: #333; margin-top: 8px; }
.informativa ul { padding-left: 20px; }
.informativa a { color: var(--m); }
.informativa .chiudi { margin-top: 20px; min-height: 52px; padding: 0 28px; background: var(--k); color: #fff; border: 0; border-radius: 2px; font-weight: 700; font-size: 18px; cursor: pointer; }

/* ------------------------------------------------------------ verticale e telefono */
@media (max-width: 900px), (orientation: portrait) {
  .pagina { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .lato { padding-bottom: 6px; }
  .tre, .quando, .figura { display: none; }
  h1 { max-width: none; }
  .modulo { margin: 0 16px 10px; }
  .piede { margin: 0 16px 14px; }
}
@media (max-width: 560px) {
  form { grid-template-columns: 1fr; }
  .partner { font-size: 11px; padding: 8px 10px; }
  .piede .url { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }