/* ═══════════════════════════════════════════════════════════
   Ciàcoea — sito
   I token vengono da brand/BRAND.md §4 e §5. Il sito è scuro
   per scelta: il brand nasce scuro, e chi lo guarda ha lo
   schermo scuro davanti tutto il giorno.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/font/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/font/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/font/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ── Palette grezza di marca (BRAND.md §4) */
  --inchiostro: #17130f;
  --inchiostro-2: #211b16;
  --inchiostro-3: #2c2520;
  --carta: #fbf7f1;
  --spriss: #ff5a1f;
  --laguna: #0fb39b;
  --fumo: #8c8378;

  /* ── Token semantici — tema SCURO, che è quello di casa.
        Il chiaro li riscrive più sotto. I componenti usano solo questi:
        nessun esadecimale sparso, altrimenti lo switch non può funzionare. */
  --sfondo: #17130f;
  --sfondo-fondo: #100d0b; /* il fondo della finestra dimostrativa */
  --superficie: #211b16;
  --linea: #2c2520;
  --linea-tenue: rgba(44, 37, 32, 0.7);

  --testo: #fbf7f1;
  --testo-2: #b9ada0; /* paragrafi */
  --testo-3: #8a7f74; /* note piccole */
  --testo-4: #5d554d; /* etichette, dettagli spenti */

  --accento: #ff5a1f;
  --accento-caldo: #ff7040;
  /* Sopra l'arancione chiaro ci va l'inchiostro (5,9:1). Nel tema chiaro
     l'arancione si scurisce e allora ci vuole il bianco: vedi sotto. */
  --su-accento: #17130f;
  --verde: #0fb39b;
  --pois: #3a312a;

  --ombra-finestra: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --ombra-pillola: 0 16px 40px -12px rgba(0, 0, 0, 0.9);
  --pillola-fondo: rgba(33, 27, 22, 0.97);
  --alone-caldo: rgba(255, 90, 31, 0.16);
  --alone-freddo: rgba(15, 179, 155, 0.07);
  --alone-caffe: rgba(255, 90, 31, 0.13);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --testo-font: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --largo: 1080px;
  --stretto: 720px;

  color-scheme: dark;
}

/* ── Tema CHIARO.
      Due accortezze che non sono estetiche ma di leggibilità:
      l'arancione si scurisce (su fondo chiaro #ff5a1f è troppo debole) e
      di conseguenza il testo sopra i bottoni diventa bianco, perché
      l'inchiostro su arancione scuro scenderebbe a 2,9:1. */
:root[data-tema="chiaro"] {
  --sfondo: #fbf7f1;
  --sfondo-fondo: #f1eae0;
  --superficie: #ffffff;
  --linea: #e2d8ca;
  --linea-tenue: rgba(226, 216, 202, 0.7);

  --testo: #1c1613;
  --testo-2: #4a423b;
  --testo-3: #6f665d;
  --testo-4: #9a8f83;

  --accento: #db4310;
  --accento-caldo: #c23a0d;
  --su-accento: #ffffff;
  --verde: #0a8a78;
  --pois: #ded3c5;

  --ombra-finestra: 0 30px 70px -30px rgba(60, 40, 20, 0.28);
  --ombra-pillola: 0 14px 34px -12px rgba(60, 40, 20, 0.3);
  --pillola-fondo: rgba(255, 255, 255, 0.97);
  --alone-caldo: rgba(255, 90, 31, 0.1);
  --alone-freddo: rgba(15, 179, 155, 0.06);
  --alone-caffe: rgba(255, 90, 31, 0.08);

  color-scheme: light;
}

/* Chi non ha ancora scelto segue il sistema operativo. Appena tocca
   l'interruttore, `data-tema` prende il sopravvento e la scelta resta. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    --sfondo: #fbf7f1;
    --sfondo-fondo: #f1eae0;
    --superficie: #ffffff;
    --linea: #e2d8ca;
    --linea-tenue: rgba(226, 216, 202, 0.7);
    --testo: #1c1613;
    --testo-2: #4a423b;
    --testo-3: #6f665d;
    --testo-4: #9a8f83;
    --accento: #db4310;
    --accento-caldo: #c23a0d;
    --su-accento: #ffffff;
    --verde: #0a8a78;
    --pois: #ded3c5;
    --ombra-finestra: 0 30px 70px -30px rgba(60, 40, 20, 0.28);
    --ombra-pillola: 0 14px 34px -12px rgba(60, 40, 20, 0.3);
    --pillola-fondo: rgba(255, 255, 255, 0.97);
    --alone-caldo: rgba(255, 90, 31, 0.1);
    --alone-freddo: rgba(15, 179, 155, 0.06);
    --alone-caffe: rgba(255, 90, 31, 0.08);
    color-scheme: light;
  }
}

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

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
}

::selection {
  background: var(--accento);
  color: var(--sfondo);
}

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenuto per chi naviga da tastiera */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accento);
  color: var(--sfondo);
  padding: 12px 20px;
  font-weight: 600;
  z-index: 100;
}
.salta:focus {
  left: 12px;
  top: 12px;
}

/* ── Elementi ricorrenti ─────────────────────────────────── */

.occhiello {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-3);
  margin: 0;
}
.occhiello.spriss {
  color: var(--accento);
}
.centro {
  text-align: center;
}

.pallino {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  margin-inline-end: 6px;
  vertical-align: baseline;
}

em {
  color: var(--accento);
  font-style: normal;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.88em;
}
code {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--testo);
}
kbd {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 600;
}

.btn {
  display: inline-block;
  background: var(--accento);
  /* Testo inchiostro sull'arancione: bianco non passerebbe il contrasto */
  color: var(--sfondo);
  font-weight: 700;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  border: none;
  border-radius: 11px;
  padding: 11px 22px;
  cursor: pointer;
  transition:
    transform 120ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
}
.btn:hover {
  background: var(--accento-caldo);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.btn-grande {
  font-size: 19px;
  padding: 16px 34px;
  border-radius: 14px;
}
.btn-piccolo {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 9px;
}

/* ── Testata ─────────────────────────────────────────────── */

.testata {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-parola {
  font-family: var(--display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.045em;
  line-height: 1;
}
.logo-parola.piccolo {
  font-size: 21px;
}
.logo-parola i {
  color: var(--accento);
  font-style: normal;
}

.testata-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}
.testata-nav a {
  text-decoration: none;
  color: var(--testo-2);
  transition: color 140ms ease;
}
.testata-nav a:hover {
  color: var(--testo);
}
.testata-nav .btn {
  color: var(--sfondo);
}

@media (max-width: 720px) {
  .testata-nav a:not(.btn) {
    display: none;
  }
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 40px 24px 0;
  text-align: center;
  position: relative;
}
.hero::before {
  /* alone caldo dietro al titolo */
  content: "";
  position: absolute;
  inset: -80px 0 auto;
  height: 620px;
  background:
    radial-gradient(760px 340px at 50% 8%, var(--alone-caldo), transparent 66%),
    radial-gradient(520px 300px at 12% 60%, var(--alone-freddo), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.4vw, 5.1rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
  margin: 20px 0 0;
}

.hero-sub {
  max-width: 620px;
  margin: 24px auto 0;
  color: var(--testo-2);
  font-size: clamp(1rem, 2vw, 1.16rem);
}
.hero-sub strong {
  color: var(--testo);
}

.hero-azioni {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-nota {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--testo-3);
}
.hero-nota a {
  color: var(--testo-3);
}

/* ── Il palco: la finestra dimostrativa ──────────────────── */

.palco {
  position: relative;
  max-width: 860px;
  margin: 64px auto 0;
  padding-bottom: 46px;
}

.finestra {
  background: var(--sfondo-fondo);
  border: 1px solid var(--linea);
  border-radius: 15px;
  overflow: hidden;
  text-align: start;
  box-shadow:
    var(--ombra-finestra),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

.finestra-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 15px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.pois {
  display: inline-flex;
  gap: 7px;
}
.pois i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pois);
}
.finestra-titolo {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--testo-3);
}

.finestra-corpo {
  padding: 18px 18px 22px;
}
.riga-file {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--testo-4);
  margin-bottom: 16px;
}

.chat {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 11px;
  padding: 14px 16px;
  min-height: 132px;
}
.chat-etichetta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--testo-4);
  margin-bottom: 9px;
}
.chat-testo {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--testo);
}

.cursore {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accento);
  vertical-align: text-bottom;
  margin-inline-start: 2px;
  animation: lampeggia 1.05s step-end infinite;
}
@keyframes lampeggia {
  50% {
    opacity: 0;
  }
}

/* L'overlay, uguale a quello dell'app */
.pillola {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--pillola-fondo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: var(--ombra-pillola);
  backdrop-filter: blur(8px);
}
.pillola-pallino {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accento);
}
.pillola.lavora .pillola-pallino {
  background: var(--verde);
}
.pillola.fatto .pillola-pallino {
  background: var(--verde);
}
.pillola-testo {
  font-size: 13.5px;
  color: var(--testo-2);
  white-space: nowrap;
}
.pillola-tasto {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--testo-4);
  border-inline-start: 1px solid var(--linea);
  padding-inline-start: 11px;
}

.onda {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
}
.onda i {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--accento);
  transition: height 90ms linear;
}
.pillola.lavora .onda,
.pillola.fatto .onda {
  display: none;
}

@media (max-width: 620px) {
  .pillola-tasto {
    display: none;
  }
  .palco {
    margin-top: 46px;
  }
}

/* ── Sezioni ─────────────────────────────────────────────── */

.sezione {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 104px 24px 0;
}
.sezione.stretta {
  max-width: var(--stretto);
}

.titolo-sezione {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
}

.sezione-sub {
  color: var(--testo-2);
  max-width: 620px;
  margin: 16px 0 0;
}
.sezione-sub.centro {
  margin-inline: auto;
}

.nota-piccola {
  font-size: 13.5px;
  color: var(--testo-4);
  margin-top: 18px;
  max-width: 640px;
}

/* ── Dolori ──────────────────────────────────────────────── */

.dolori {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.dolori li {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-inline-start: 3px solid var(--accento);
  border-radius: 12px;
  padding: 17px 20px;
  font-size: 17px;
  color: var(--testo);
}
.dolori li span {
  color: var(--accento);
  font-weight: 700;
}
.dolori li b {
  color: var(--testo);
  font-family: var(--mono);
  font-size: 0.92em;
}
.dolori-chiusa {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  text-align: center;
  margin-top: 30px;
}

/* ── Carte ───────────────────────────────────────────────── */

.carte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.carta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 15px;
  padding: 26px 24px 28px;
}
.carta-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accento);
}
.carta h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -0.03em;
  margin: 12px 0 10px;
  line-height: 1.14;
}
.carta p {
  margin: 0;
  color: var(--testo-2);
  font-size: 15.5px;
}
.carta b {
  color: var(--testo);
}

/* ── Passi ───────────────────────────────────────────────── */

.passi {
  list-style: none;
  counter-reset: passo;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.passi li {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.passo-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--accento);
  line-height: 1;
  letter-spacing: -0.04em;
}
.passi h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -0.03em;
  margin: 8px 0 8px;
}
.passi p {
  margin: 0;
  color: var(--testo-2);
  font-size: 15.5px;
}

/* ── Confronto del gergo ─────────────────────────────────── */

.confronto {
  margin-top: 34px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
}
.confronto-intestazione,
.confronto-riga {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
}
.confronto-intestazione {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.confronto-riga + .confronto-riga {
  border-top: 1px solid var(--linea-tenue);
}
.det {
  color: var(--testo-2);
  font-size: 15.5px;
}
.male,
.bene {
  font-family: var(--mono);
  font-size: 14px;
}
.male {
  color: var(--testo-3);
  text-decoration: line-through;
  text-decoration-color: rgba(229, 72, 77, 0.55);
}
.bene {
  color: var(--verde);
  font-weight: 600;
}

@media (max-width: 700px) {
  .confronto-intestazione {
    display: none;
  }
  .confronto-riga {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .male::before {
    content: "di solito: ";
    text-decoration: none;
    color: var(--testo-4);
  }
  .bene::before {
    content: "ciàcoea: ";
    color: var(--testo-4);
    font-weight: 400;
  }
}

/* ── Download ────────────────────────────────────────────── */

.scarica {
  text-align: center;
}
.scarica-box {
  margin-top: 34px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 44px 24px;
}
.scarica-alt {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--testo-3);
}
.scarica-alt a {
  color: var(--testo-2);
}
.scarica-alt span {
  margin: 0 8px;
  color: var(--testo-4);
}
.scarica-versione {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--testo-4);
  margin: 14px 0 0;
  min-height: 1em;
}

/* ── Domande ─────────────────────────────────────────────── */

details {
  border-bottom: 1px solid var(--linea);
  padding: 20px 0;
}
details:first-of-type {
  border-top: 1px solid var(--linea);
  margin-top: 34px;
}
summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.17rem;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.35rem;
  color: var(--accento);
  flex: none;
  line-height: 1;
}
details[open] summary::after {
  content: "−";
}
details p {
  color: var(--testo-2);
  font-size: 15.5px;
  margin: 14px 0 0;
  max-width: 640px;
}
details p a {
  color: var(--accento);
}

/* ── Piede ───────────────────────────────────────────────── */

.piede {
  max-width: var(--largo);
  margin: 110px auto 0;
  padding: 34px 24px 56px;
  border-top: 1px solid var(--linea);
}
.piede-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.piede-claim {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--testo-3);
}
.piede-nota {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: var(--testo-4);
  max-width: 660px;
}
.piede-nota a {
  color: var(--testo-3);
}
.piede-nota b {
  font-family: var(--mono);
  color: var(--testo-3);
}

.piede-link {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.piede-link a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--testo-3);
}
.piede-link a:hover {
  color: var(--accento);
}

/* ── Le chiavi sono tue ──────────────────────────────────── */

.chiavi-griglia {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 820px) {
  .chiavi-griglia {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.provider {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 13px;
  overflow: hidden;
}
.provider li {
  background: var(--superficie);
  padding: 13px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-weight: 600;
  font-size: 15.5px;
}
.provider li span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--testo-3);
  font-weight: 400;
}
.provider li.locale span {
  color: var(--verde);
}

/* ── Il caffè ────────────────────────────────────────────── */

.caffe {
  text-align: center;
}
.caffe-box {
  background:
    radial-gradient(520px 240px at 50% 0%, var(--alone-caffe), transparent 68%),
    var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 48px 28px 44px;
}
.caffe-box h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  letter-spacing: -0.035em;
  margin: 16px 0 0;
}
.caffe-box > p {
  max-width: 540px;
  margin: 14px auto 26px;
  color: var(--testo-2);
  font-size: 16px;
}
.caffe-nota {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--testo-4);
  margin: 18px 0 0 !important;
}

/* ── La voce di dizionario nel piede ─────────────────────── */

.voce {
  margin: 30px 0 0;
  padding: 22px 24px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  max-width: 640px;
}
.voce dt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.voce-lemma {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.voce-lemma i {
  color: var(--accento);
  font-style: normal;
}
.voce-fonetica {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--verde);
}
.voce-grammatica {
  font-size: 13px;
  font-style: italic;
  color: var(--testo-4);
}
.voce dd {
  margin: 0 0 9px;
  font-size: 15px;
  color: var(--testo-2);
  line-height: 1.55;
}
.voce-num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accento);
  margin-inline-end: 5px;
}
.voce-etimo {
  margin-top: 14px !important;
  padding-top: 13px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--testo-3);
}
.voce-etimo b {
  color: var(--testo-2);
}
.voce-etimo i {
  color: var(--testo-2);
}

/* L'attribuzione, in veneto */
.piede-nota {
  font-style: italic;
}

/* Righe della pagina /scarica/: due colonne, non tre */
.confronto-riga.file-riga {
  grid-template-columns: 1fr auto;
}
.confronto-riga.file-riga .det b {
  font-weight: 700;
  color: var(--testo);
}
@media (max-width: 700px) {
  .confronto-riga.file-riga {
    grid-template-columns: 1fr auto;
  }
}

/* ── Interruttore chiaro / scuro ──────────────────────────
   Il passaggio è morbido ma solo sui colori: animare tutto
   farebbe ballare anche le ombre e i gradienti degli aloni. */
body,
.carta,
.finestra,
.chat,
.provider li,
.dolori li,
.confronto,
.caffe-box,
.voce,
.scarica-box {
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .carta, .finestra, .chat, .provider li, .dolori li,
  .confronto, .caffe-box, .voce, .scarica-box {
    transition: none;
  }
}

.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--testo-2);
  cursor: pointer;
  flex: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}
.tema:hover {
  color: var(--accento);
  border-color: var(--accento);
}
.tema svg {
  width: 17px;
  height: 17px;
  display: block;
}
/* Si mostra solo l'icona di dove si andrà a finire, non di dove si è:
   un sole quando sei al buio, una luna quando sei alla luce. */
.tema .sole { display: block; }
.tema .luna { display: none; }
:root[data-tema="chiaro"] .tema .sole { display: none; }
:root[data-tema="chiaro"] .tema .luna { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) .tema .sole { display: none; }
  :root:not([data-tema="scuro"]) .tema .luna { display: block; }
}

/* ── Modulo (pagina /scarica/ e pagina privacy) ─────────────
   Prima del file vero c'è nome, email e una casella di consenso.
   Niente componenti nuovi di libreria: input e select nudi,
   colorati con gli stessi token di sempre. Il rosso d'errore
   riusa lo stesso rgb già presente in questo file per il
   confronto del gergo (.male), così non introduciamo un colore
   che prima non c'era. */

.modulo {
  margin-top: 30px;
  display: grid;
  gap: 16px;
  max-width: 420px;
}
.campo {
  display: grid;
  gap: 7px;
}
.campo label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-3);
}
.campo input[type="text"],
.campo input[type="email"],
.campo select {
  font-family: var(--testo-font);
  font-size: 15.5px;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color 160ms ease;
}
.campo input[type="text"]::placeholder,
.campo input[type="email"]::placeholder {
  color: var(--testo-4);
}
.campo input[type="text"]:focus,
.campo input[type="email"]:focus,
.campo select:focus {
  outline: none;
  border-color: var(--accento);
}
.campo input:user-invalid {
  border-color: rgb(229, 72, 77);
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.campo-checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accento);
}
.campo-checkbox span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--testo-3);
}
.campo-checkbox a {
  color: var(--testo-2);
}

.modulo-azione {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.modulo-messaggio {
  margin: 0;
  min-height: 1.3em;
  font-size: 14px;
}
.modulo-messaggio.errore {
  color: rgb(229, 72, 77);
}
.modulo-messaggio.fatto {
  color: var(--verde);
  font-weight: 600;
}

/* La sezione dei dolori si allarga fino alla misura della finestra
   dimostrativa qui sopra (860px di contenuto + i 24px di padding per lato).
   Prima stava nella colonna stretta da 720px e lo scalino si vedeva: due
   blocchi incolonnati uno sull'altro con due larghezze diverse leggono come
   un errore, non come una scelta.
   Il selettore evita di dover toccare l'HTML: la sezione non ha una classe
   propria, ma è l'unica che contiene .dolori. */
.sezione.stretta:has(.dolori) {
  max-width: 908px;
}