/* OpenTenor · la pagina principale (usa tokens.css e base.css) */

/* ===================================================================== MENU IN ALTO */
/* sei voci: sotto i 1100 px non stanno su una riga senza andare a capo, quindi c'è il menu a tendina */
.nav__link a { white-space: nowrap; }
@media (max-width: 1099px) {
  .nav__link { display: none; }
  .nav__azioni { margin-left: auto; }
  .menu { display: block; }
  .nav__azioni > .lingua { display: none; }
}
/* tra 1100 e 1279 px le voci stanno su una riga senza i numeri */
@media (max-width: 1279px) {
  .nav__link a { padding: 8px 9px; }
  .nav__link .nav__num { display: none; }
}

/* ===================================================================== HERO */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: clamp(28px, 3.2vw, 44px) clamp(36px, 4.5vw, 56px);
}
.hero::before {
  content: ""; position: absolute; z-index: -2;
  inset: -80px -8% -18% 26%;
  background: var(--ot-alba);
  filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 40%;
  background-image: radial-gradient(rgb(17 16 21 / 0.13) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 55% at 62% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 62% 45%, #000 0%, transparent 75%);
  pointer-events: none;
}
.hero__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 960px) {
  .hero__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; min-height: min(640px, calc(100svh - 72px - 200px)); }
}
@media (min-width: 1180px) {
  .hero__griglia { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); gap: 16px; }
}
.annuncio-riga { display: flex; }
.annuncio {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 14px 5px 5px; border-radius: var(--ot-r-pill);
  background: rgb(255 255 255 / 0.72); box-shadow: inset 0 0 0 1px var(--ot-filetto), var(--ot-ombra-1);
  font-size: 0.875rem; font-weight: var(--ot-w-medium); color: var(--ot-inchiostro-2);
  max-width: 100%; text-decoration: none;
  transition: background-color var(--ot-dur-1), box-shadow var(--ot-dur-2) var(--ot-ease);
}
a.annuncio:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ot-filetto-forte), var(--ot-ombra-2); }
a.annuncio:focus-visible { outline: none; box-shadow: var(--ot-fuoco); }
/* il logo di Edizioni Curci: proporzioni e colori originali, mai ricolorato */
.annuncio__logo { height: 18px; width: auto; flex: none; }
.annuncio__freccia { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ot-inchiostro-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ot-dur-2) var(--ot-ease); }
a.annuncio:hover .annuncio__freccia { transform: translateX(2px); stroke: var(--ot-inchiostro); }
.annuncio__tag {
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase;
  background: var(--ot-inchiostro); color: #fff; padding: 6px 9px; border-radius: var(--ot-r-pill); flex: none;
}
/* «in prova»: la riga in cima non dice di più di quello che è (Curci oggi usa OpenTenor in prova, con dati inventati) */
.annuncio__prova {
  flex: none; padding-left: 12px; border-left: 1px solid var(--ot-filetto-forte);
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase;
  color: var(--ot-inchiostro-2); white-space: nowrap;
}
@media (max-width: 439px) {
  .annuncio { gap: 9px; padding-right: 12px; }
  .annuncio__logo { height: 15px; }
  .annuncio__prova { padding-left: 9px; }
  .annuncio__freccia { display: none; }
}
.titolo-display {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: var(--ot-fs-display);
  font-weight: var(--ot-w-display);
  line-height: var(--ot-lh-display);
  letter-spacing: var(--ot-track-display);
  text-wrap: balance;
}
.titolo-display .accento { font-size: 1.1em; }
.hero__lead {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 33em;
  font-size: var(--ot-fs-lead); line-height: 1.5; color: var(--ot-inchiostro-2);
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 34px); }
.stato {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px;
  font: 0.8125rem/1.4 var(--ot-font-mono); letter-spacing: 0.01em; color: var(--ot-inchiostro-2);
}
.stato li { display: inline-flex; align-items: flex-start; gap: 9px; }
.stato .led { margin-top: 0.35em; flex: none; }
@media (max-width: 520px) {
  .hero__cta .btn { flex: 1 1 100%; }
  .stato { flex-direction: column; gap: 8px; }
}

/* ---------- La partitura (visual dell'hero) ------------------------------- */
.partitura {
  position: relative; container-type: inline-size;
  width: 100%; max-width: 760px; margin-inline: auto;
  aspect-ratio: 720 / 600;
}
.partitura__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.partitura__svg--n { display: none; }
.rigo { fill: none; stroke: var(--ot-inchiostro); stroke-opacity: 0.5; stroke-width: 1.35; }
.voce { font: italic 400 19px var(--ot-font-serif); fill: var(--ot-inchiostro-2); }
.battuta { font: 500 9.5px var(--ot-font-mono); letter-spacing: 0.08em; fill: var(--ot-inchiostro-3); }
.partitura__svg--n .voce { font-size: 15px; }
.partitura__svg--n .battuta { display: none; }
.rigo--tenore { stroke: var(--ot-vermiglio-500); stroke-opacity: 1; stroke-width: 2.2; }
.stanghetta { stroke: var(--ot-inchiostro); stroke-opacity: 0.6; stroke-width: 1.6; }
.nota { fill: var(--ot-inchiostro); }
.nota--tenore { fill: var(--ot-vermiglio-500); }
.anello { fill: none; stroke: var(--ot-inchiostro); stroke-opacity: 0.14; stroke-width: 1; stroke-dasharray: 1.5 5; }
.anello--0 { stroke: var(--ot-vermiglio-500); stroke-opacity: 0.4; stroke-dasharray: none; }
.onda { fill: none; stroke: var(--ot-vermiglio-500); stroke-width: 1.2; stroke-opacity: 0; transform-box: fill-box; transform-origin: center; animation: onda 5.4s cubic-bezier(.2,.6,.3,1) infinite; }
.onda--2 { animation-delay: -2.7s; }
@keyframes onda { 0% { transform: scale(0.5); stroke-opacity: 0.55; } 100% { transform: scale(5.4); stroke-opacity: 0; } }
.barra { fill: var(--ot-vermiglio-500); transform-box: fill-box; transform-origin: center; animation: respiro 1.5s ease-in-out infinite alternate; }
.barra:nth-child(5n+2) { animation-delay: -0.22s; }
.barra:nth-child(5n+3) { animation-delay: -0.55s; }
.barra:nth-child(5n+4) { animation-delay: -0.88s; }
.barra:nth-child(5n+5) { animation-delay: -1.21s; }
.barra:nth-child(3n) { animation-duration: 1.2s; }
@keyframes respiro { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }
.impulso { fill: none; stroke: var(--ot-vermiglio-500); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 26 1974; stroke-dashoffset: 2000; animation: flusso 4.2s linear infinite; }
.impulso--2 { stroke: var(--ot-inchiostro); stroke-width: 3; animation-duration: 3.4s; animation-delay: -1.2s; }
.impulso--0 { animation-delay: -0.3s; }
.impulso--1 { animation-delay: -1.9s; animation-duration: 4.8s; }
.impulso--3 { animation-delay: -3.1s; animation-duration: 4.6s; }
.impulso--4 { animation-delay: -2.2s; }
@keyframes flusso { to { stroke-dashoffset: 0; } }
.nodo { fill: #fff; stroke: var(--ot-inchiostro); stroke-width: 1.6; }
.nodo--tenore { fill: var(--ot-vermiglio-500); stroke: #fff; stroke-width: 2.4; }

.scheda, .pillola {
  position: absolute; left: calc(var(--x) + 10px); top: var(--y);
  translate: 0 -50%;
  font-size: clamp(12px, 1.95cqw, 14px);
  animation: galleggia 7s ease-in-out infinite alternate;
}
.scheda {
  width: var(--w);
  padding: 1em 1.1em 1.05em;
  background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--ot-r-md);
  box-shadow: var(--ot-alone), var(--ot-ombra-2);
  line-height: 1.3;
}
.scheda--1 { --x: 59.72%; --y: 13.67%; --w: 38.5%; }
.scheda--3 { --x: 65.28%; --y: 50%;    --w: 33.5%; animation-delay: -2s; }
.scheda--5 { --x: 59.72%; --y: 86.33%; --w: 38.5%; animation-delay: -4.5s; }
.pillola--2 { --x: 65.5%; --y: 31.67%; animation-delay: -1s; }
.pillola--4 { --x: 67.22%; --y: 68.33%; animation-delay: -3.4s; }
@keyframes galleggia { from { transform: translateY(-3px); } to { transform: translateY(3px); } }

.scheda__et {
  display: flex; align-items: center; gap: 0.55em;
  font: var(--ot-w-medium) max(12px, 0.8em)/1.2 var(--ot-font-mono); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ot-inchiostro-3);
}
.punto { width: 0.55em; height: 0.55em; border-radius: 50%; flex: none; background: var(--ot-inchiostro-4); }
.punto--ok { background: var(--ot-ok); }
.punto--segnale { background: var(--ot-vermiglio-500); box-shadow: 0 0 0 3px rgb(255 79 31 / 0.18); }
.punto--attenzione { background: var(--ot-vermiglio-700); }
.scheda__titolo { margin-top: 0.55em; font-size: 1.18em; font-weight: var(--ot-w-semi); letter-spacing: -0.012em; color: var(--ot-inchiostro); }
.scheda__riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  margin-top: 0.7em; padding-top: 0.7em; border-top: 1px dashed var(--ot-filetto-forte);
  color: var(--ot-inchiostro-2);
}
.cifra { font: var(--ot-w-medium) 1.08em/1 var(--ot-font-mono); font-variant-numeric: tabular-nums; color: var(--ot-inchiostro); white-space: nowrap; }
.scheda__sotto { margin-top: 0.45em; font-size: max(12px, 0.92em); color: var(--ot-inchiostro-3); }
.scheda__cifra-grande { margin-top: 0.45em; font-size: 2.05em; font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barre { display: flex; gap: 3px; height: 0.62em; margin-top: 0.8em; }
.barre span { border-radius: 3px; }
.barre span:nth-child(1) { flex: 34 1 0; background: var(--ot-vermiglio-500); }
.barre span:nth-child(2) { flex: 23 1 0; background: var(--ot-vermiglio-300); }
.barre span:nth-child(3) { flex: 17 1 0; background: var(--ot-pesca); }
.barre span:nth-child(4) { flex: 14 1 0; background: #C9BEFF; }
.barre span:nth-child(5) { flex: 12 1 0; background: var(--ot-cielo); }

.pillola {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.95em 0.5em 0.5em;
  background: #fff; border-radius: var(--ot-r-pill);
  box-shadow: var(--ot-alone), var(--ot-ombra-1);
  font-size: clamp(12px, 1.8cqw, 13px); font-weight: var(--ot-w-medium); color: var(--ot-inchiostro-2);
  white-space: nowrap;
}
.pillola__ico { width: 1.7em; height: 1.7em; padding: 0.3em; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pillola__ico--ok { background: var(--ot-ok); }
.pillola__cwr { font: var(--ot-w-medium) 0.85em/1 var(--ot-font-mono); letter-spacing: 0.04em; padding: 0.45em 0.6em; border-radius: var(--ot-r-pill); background: var(--ot-inchiostro); color: #fff; }

.partitura__dida {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  font: 0.75rem/1 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase;
  color: var(--ot-inchiostro-3);
}
.pausa {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 9px; border: 0; border-radius: var(--ot-r-pill);
  background: rgb(255 255 255 / 0.8); box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ot-inchiostro-2); cursor: pointer;
}
.pausa:hover { color: var(--ot-inchiostro); background: #fff; }
.pausa .ico { width: 15px; height: 15px; }
.pausa__avvia, .trasporto .pausa__avvia { display: none; fill: currentColor; stroke: none; }
.pausa[aria-pressed="true"] .pausa__ferma, .trasporto[aria-pressed="true"] .pausa__ferma { display: none; }
.pausa[aria-pressed="true"] .pausa__avvia, .trasporto[aria-pressed="true"] .pausa__avvia { display: block; }

@media (max-width: 599px) {
  .hero::before { inset: 38% -40% -12% -30%; }
  .hero::after { inset: 45% 0 0 0; }
}
/* telefoni, e la colonna stretta dell'hero tra 960 e 1179 px: la partitura verticale, senza pillole */
@media (max-width: 599px), (min-width: 960px) and (max-width: 1179px) {
  .partitura { aspect-ratio: 360 / 440; }
  .partitura__svg--w { display: none; }
  .partitura__svg--n { display: block; }
  .scheda, .pillola { font-size: 12px; }
  .scheda { padding: 0.85em 0.9em 0.9em; }
  .scheda--1 { --x: 44.44%; --y: 14.09%; --w: 52.5%; }
  .scheda--3 { --x: 44.44%; --y: 50%;    --w: 52.5%; }
  .scheda--5 { --x: 44.44%; --y: 85.91%; --w: 52.5%; }
  .scheda__et { letter-spacing: 0.02em; }
  .scheda__cifra-grande { font-size: 1.6em; }
  .pillola { display: none; }
  .scheda--1 .scheda__sotto, .scheda--3 .scheda__sotto { display: none; }
  .partitura { margin-bottom: 34px; }
  .partitura__dida { bottom: -40px; }
}

/* animazioni ferme: bottone «Pausa» o hero fuori vista */
.anim-ferme .partitura *, .anim-ferme .partitura *::before, .anim-ferme .partitura *::after,
.hero.fuori-vista .partitura *, .hero.fuori-vista .partitura *::before,
.anim-ferme .moduli__riga, .anim-ferme .segno::after { animation-play-state: paused !important; }

/* ---------- Standard del settore su un rigo ------------------------------ */
.standard {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--ot-filetto);
}
.standard__et {
  flex: none; max-width: 11em;
  font: var(--ot-w-medium) 0.75rem/1.35 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase;
  color: var(--ot-inchiostro-3);
}
.standard__lista {
  --g: 9px;
  position: relative; flex: 1; display: flex; justify-content: space-between; align-items: center;
  min-height: calc(var(--g) * 4 + 28px);
}
.standard__lista::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--g) * 4 + 1px); translate: 0 -50%;
  background:
    linear-gradient(to bottom, transparent calc(var(--g) * 2), var(--ot-vermiglio-500) calc(var(--g) * 2), var(--ot-vermiglio-500) calc(var(--g) * 2 + 1px), transparent calc(var(--g) * 2 + 1px)),
    repeating-linear-gradient(to bottom, var(--ot-rigo-colore) 0 1px, transparent 1px var(--g));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  z-index: 0;
}
.standard__lista li {
  position: relative; z-index: 1;
  font: var(--ot-w-medium) 0.8125rem/1 var(--ot-font-mono); letter-spacing: 0.04em; color: var(--ot-inchiostro);
  padding: 7px 11px; border-radius: var(--ot-r-pill);
  background: var(--ot-carta); box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  white-space: nowrap;
}
.standard__lista li.h-su { translate: 0 calc(var(--g) * -1); }
.standard__lista li.h-giu { translate: 0 var(--g); }
@media (max-width: 879px) {
  .standard { flex-direction: column; align-items: flex-start; }
  .standard__et { max-width: none; }
  .standard__lista { flex-wrap: wrap; justify-content: flex-start; gap: 8px; min-height: 0; width: 100%; }
  .standard__lista::before { display: none; }
  .standard__lista li.h-su, .standard__lista li.h-giu { translate: none; }
}

/* ===================================================================== SEZIONI */
.sezione { position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--ot-sezione); }
.sezione__testa {
  display: grid; gap: 18px 64px; grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(32px, 4.5vw, 64px);
}
@media (min-width: 960px) {
  .sezione__testa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
  .sezione__testa .occhiello { grid-column: 1 / -1; }
}
.titolo-2 {
  font-size: var(--ot-fs-h2); font-weight: var(--ot-w-display);
  line-height: var(--ot-lh-title); letter-spacing: var(--ot-track-title);
  text-wrap: balance; max-width: 15em;
}
.titolo-2--medio { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem); }
.titolo-3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: var(--ot-w-display);
  line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
}
.sezione__lead { font-size: var(--ot-fs-lead); line-height: 1.5; color: var(--ot-inchiostro-2); max-width: 30em; text-wrap: pretty; }
.nota-onesta {
  margin-top: clamp(24px, 3vw, 36px); max-width: 60em;
  font: 0.8125rem/1.55 var(--ot-font-mono); color: var(--ot-inchiostro-3);
}
.nota-onesta--centro { margin-inline: auto; text-align: center; }
.chip-prova {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px 8px; border-radius: var(--ot-r-xs);
  background: var(--ot-prova); color: var(--ot-inchiostro);
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- Il problema --------------------------------------------------- */
.sezione--problema { padding-top: calc(var(--ot-sezione) * 0.8); padding-bottom: calc(var(--ot-sezione) * 0.6); }
.problemi { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .problemi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.problema {
  position: relative; padding: 26px 26px 28px; border-radius: var(--ot-r-lg);
  background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-1);
  overflow: hidden;
}
.problema::after { /* rigo «stonato»: le linee non sono allineate */
  content: ""; position: absolute; right: -10px; top: 26px; width: 120px; height: 33px; transform: rotate(-6deg);
  background: repeating-linear-gradient(to bottom, rgb(17 16 21 / 0.09) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.problema__ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--ot-carta-2); color: var(--ot-inchiostro);
}
.problema__ico .ico { width: 22px; height: 22px; }
.problema h3 { margin-top: 18px; font-size: var(--ot-fs-h3); font-weight: var(--ot-w-semi); letter-spacing: -0.015em; line-height: 1.2; }
.problema p { margin-top: 8px; color: var(--ot-inchiostro-2); font-size: var(--ot-fs-small); }
.problemi__ponte {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(28px, 3.5vw, 44px);
  font-size: var(--ot-fs-lead); color: var(--ot-inchiostro-2);
}
.problemi__ponte strong { color: var(--ot-inchiostro); font-weight: var(--ot-w-semi); }
.icona-rigo--grande { width: 44px; height: 18px; color: var(--ot-vermiglio-500); stroke-width: 1.2; }

/* ---------- Funzioni ------------------------------------------------------ */
.sezione--funzioni { padding-top: calc(var(--ot-sezione) * 0.6); }
.funzioni { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }
@media (min-width: 640px) { .funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } .funzione--grande { grid-column: span 2; } .funzione:last-child { grid-column: span 2; } }
@media (min-width: 1000px) { .funzioni { grid-template-columns: repeat(3, minmax(0, 1fr)); } .funzione--grande { grid-column: span 3; } .funzione:last-child { grid-column: auto; } }
.funzione {
  position: relative; display: flex; flex-direction: column;
  padding: 24px 24px 22px; border-radius: var(--ot-r-lg);
  background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-1);
  transition: box-shadow var(--ot-dur-2) var(--ot-ease), transform var(--ot-dur-2) var(--ot-ease);
}
.funzione:hover { box-shadow: var(--ot-alone), var(--ot-ombra-2); transform: translateY(-2px); }
.funzione__ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--ot-vermiglio-50); color: var(--ot-vermiglio-700);
  box-shadow: inset 0 0 0 1px var(--ot-vermiglio-100);
}
.funzione__ico .ico { width: 22px; height: 22px; }
.funzione h3 { margin-top: 18px; font-size: var(--ot-fs-h3); font-weight: var(--ot-w-semi); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.funzione > p, .funzione__testo > p { margin-top: 8px; color: var(--ot-inchiostro-2); font-size: var(--ot-fs-small); }
.funzione .funzione__tag {
  margin-top: auto; padding-top: 18px;
  font: var(--ot-w-medium) 0.75rem/1.3 var(--ot-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ot-inchiostro-3);
}
.funzione--grande {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(#fff, #fff) padding-box, var(--ot-alba-lineare) border-box;
  border: 1.5px solid transparent;
  overflow: hidden; isolation: isolate;
}
.funzione--grande::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ot-alba); opacity: 0.55;
}
@media (min-width: 860px) { .funzione--grande { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; } }
.funzione--grande .funzione__testo h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: var(--ot-w-display); letter-spacing: -0.02em; }
.funzione--grande .funzione__testo p { font-size: var(--ot-fs-body); max-width: 30em; }
.funzione--grande .funzione__testo .funzione__tag { margin-top: 0; padding-top: 18px; font-size: 0.75rem; }
.funzione__testo { display: flex; flex-direction: column; }

/* una versione standard per tutti, su misura su richiesta */
.versioni { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
@media (min-width: 760px) { .versioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.versione {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 24px; border-radius: var(--ot-r-lg);
  background: var(--ot-carta-2); box-shadow: inset 0 0 0 1px var(--ot-filetto);
}
.versione--misura {
  background: linear-gradient(#fff, #fff) padding-box, var(--ot-alba-lineare) border-box;
  border: 1.5px solid transparent; box-shadow: var(--ot-ombra-1);
}
.versione__segno { width: 44px; height: 44px; }
.versione__colori { position: relative; width: 44px; height: 44px; flex: none; }
.versione__colori i { position: absolute; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgb(17 16 21 / 0.08); }
.versione__colori i:nth-child(1) { left: 0; top: 2px; background: var(--ot-vermiglio-300); }
.versione__colori i:nth-child(2) { left: 18px; top: 2px; background: var(--ot-lilla); }
.versione__colori i:nth-child(3) { left: 9px; top: 18px; background: var(--ot-cielo); }
.versione h3 { font-size: var(--ot-fs-h3); font-weight: var(--ot-w-semi); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.versione p { margin-top: 6px; color: var(--ot-inchiostro-2); font-size: var(--ot-fs-small); max-width: 34em; }
.versione__link, .principi__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 0.9375rem; font-weight: var(--ot-w-semi); text-decoration: none; color: var(--ot-vermiglio-700);
}
.versione__link:hover, .principi__link:hover { text-decoration: underline; }
.versione__link:hover .btn__freccia, .principi__link:hover .btn__freccia { transform: translateX(3px); }
@media (max-width: 479px) { .versione { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; } }

/* telefoni: icona e titolo sulla stessa riga, schede più corte */
@media (max-width: 639px) {
  .funzione:not(.funzione--grande), .problema, .funzione--grande .funzione__testo {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  }
  .funzione:not(.funzione--grande), .problema { padding: 18px 18px 16px; }
  .funzione__ico, .problema__ico { width: 36px; height: 36px; border-radius: 10px; }
  .funzione__ico .ico, .problema__ico .ico { width: 19px; height: 19px; }
  .funzione h3, .problema h3 { margin-top: 0; }
  .funzione > p, .funzione__testo > p, .problema p { grid-column: 1 / -1; }
  .funzione .funzione__tag { padding-top: 10px; }
  .funzione--grande .funzione__testo .funzione__tag { padding-top: 12px; }
  .problema::after { top: 18px; }
}

.mini-rendiconto {
  padding: 20px 22px; border-radius: var(--ot-r-md);
  background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-3);
  font-size: 0.875rem;
}
.mini-rendiconto__et {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font: var(--ot-w-medium) 0.75rem/1.2 var(--ot-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ot-inchiostro-3);
}
.mini-rendiconto__nome { margin-top: 8px; font-size: 1.25rem; font-weight: var(--ot-w-semi); letter-spacing: -0.015em; }
.mini-rendiconto dl { margin-top: 12px; }
.mini-rendiconto dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ot-filetto); }
.mini-rendiconto dd { margin: 0; font: var(--ot-w-medium) 0.875rem/1.2 var(--ot-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-rendiconto dt { color: var(--ot-inchiostro); }
.mini-rendiconto .mini-rendiconto__perche { border-top: 0; padding-top: 0; }
.mini-rendiconto__lordo dt, .mini-rendiconto__lordo dd { font-weight: var(--ot-w-semi); }
.mini-rendiconto__perche dt { font-size: 0.8125rem; color: var(--ot-inchiostro-2); }
.mini-rendiconto__perche b {
  display: inline-block; margin-right: 2px; padding: 1px 7px; border-radius: 999px;
  background: var(--ot-carta-2); color: var(--ot-inchiostro); font-weight: var(--ot-w-semi);
}
.mini-rendiconto .mini-rendiconto__netto {
  margin-top: 6px; padding: 12px 14px; border: 1px solid var(--ot-filetto); border-left: 3px solid var(--ot-vermiglio-500);
  border-radius: var(--ot-r-sm); background: var(--ot-carta-2); color: var(--ot-inchiostro);
}
.mini-rendiconto__netto dt { color: var(--ot-inchiostro); font-weight: var(--ot-w-semi); }
.mini-rendiconto__netto dd { font-size: 1.125rem; font-weight: var(--ot-w-bold, 700); color: var(--ot-inchiostro); }

/* ===================================================================== FASCIA SCURA */
.notte {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ot-notte); color: var(--ot-notte-testo);
  padding-block: var(--ot-sezione);
}
.sessione-cornice { position: relative; isolation: isolate; }
.sessione-cornice::before { /* il pentagramma entra ed esce dalla sessione */
  content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; top: 96px; height: 161px;
  background:
    linear-gradient(to bottom, transparent 80px, rgb(255 79 31 / 0.55) 80px, rgb(255 79 31 / 0.55) 81.5px, transparent 81.5px),
    repeating-linear-gradient(to bottom, rgb(244 241 234 / 0.09) 0 1px, transparent 1px 40px);
}
.notte::after {
  content: ""; position: absolute; z-index: -1; inset: 30% -10% -20% 40%;
  background: radial-gradient(closest-side, rgb(255 79 31 / 0.16), transparent);
  filter: blur(20px);
}
.notte .sezione__lead { color: var(--ot-notte-testo-2); }
.notte .accento { color: var(--ot-vermiglio-500); }
.occhiello--notte { color: var(--ot-notte-testo-2); }
.occhiello--notte .occhiello__num { color: var(--ot-vermiglio-500); }
.occhiello--notte .occhiello__rigo {
  background:
    linear-gradient(to bottom, transparent 6px, var(--ot-vermiglio-500) 6px, var(--ot-vermiglio-500) 7px, transparent 7px),
    repeating-linear-gradient(to bottom, rgb(244 241 234 / 0.35) 0 1px, transparent 1px 3px);
}
.notte :focus-visible { outline-color: var(--ot-vermiglio-500); }

.sessione {
  --nome-w: 132px;
  --clip-fondo: #1B1A20;
  border-radius: var(--ot-r-lg);
  background: linear-gradient(180deg, var(--ot-notte-2), #141319);
  box-shadow: 0 0 0 1px var(--ot-notte-filetto), 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 120px -40px rgb(255 79 31 / 0.25);
  overflow: hidden;
}
.sessione__barra {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--ot-notte-filetto);
  background: rgb(255 255 255 / 0.02);
}
.trasporto {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ot-vermiglio-500); color: var(--ot-inchiostro);
  box-shadow: 0 0 0 4px rgb(255 79 31 / 0.18);
}
.trasporto .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.trasporto:hover { background: #FF6233; }
.trasporto:focus-visible { outline: 2px solid var(--ot-notte-testo); outline-offset: 3px; border-radius: 50%; }
.sessione__titolo {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font: var(--ot-w-medium) 0.8125rem/1.3 var(--ot-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ot-notte-testo);
}
.sessione__pre, .sessione__sep { color: var(--ot-notte-testo-3); }
.sessione__barra .chip-prova { margin-left: auto; }

.sessione__corpo { padding: 10px 16px 18px; }
.righello { display: grid; grid-template-columns: var(--nome-w) minmax(0, 1fr); align-items: end; }
.righello__mesi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.righello__mesi li {
  padding: 6px 0 8px 8px; border-left: 1px solid var(--ot-notte-filetto);
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-notte-testo-3);
}
.corsie { position: relative; }
.corsia {
  display: grid; grid-template-columns: var(--nome-w) minmax(0, 1fr); align-items: stretch;
  border-top: 1px solid var(--ot-notte-filetto);
}
.corsia__nome {
  display: flex; align-items: center; gap: 9px; padding: 0 10px 0 2px;
  font-size: 0.875rem; font-weight: var(--ot-w-medium); color: var(--ot-notte-testo-2);
}
.corsia__nome .ico { width: 17px; height: 17px; color: var(--ot-notte-testo-3); }
.corsia__traccia {
  position: relative; min-height: 50px;
  background:
    repeating-linear-gradient(90deg, rgb(244 241 234 / 0.06) 0 1px, transparent 1px calc(100% / 6)),
    repeating-linear-gradient(90deg, rgb(244 241 234 / 0.025) 0 1px, transparent 1px calc(100% / 24));
}
.clip {
  --c: 255 211 189;
  position: absolute; z-index: 2; top: 50%; left: calc(var(--x) * 100%); translate: 0 -50%;
  max-width: calc((1 - var(--x)) * 100% - 4px);
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  padding: 7px 11px; border-radius: 8px;
  /* fondo pieno: la testina passa dietro le clip, non sopra il testo */
  background: linear-gradient(rgb(var(--c) / 0.16), rgb(var(--c) / 0.16)), var(--clip-fondo);
  box-shadow: inset 0 0 0 1px rgb(var(--c) / 0.55), inset 3px 0 0 rgb(var(--c));
  color: var(--ot-notte-testo); line-height: 1.2;
  transition: background-color 400ms var(--ot-ease), box-shadow 400ms var(--ot-ease), opacity 400ms var(--ot-ease), transform 400ms var(--ot-ease);
}
.clip b { font-size: 0.8125rem; font-weight: var(--ot-w-semi); white-space: nowrap; }
.clip i { font: normal var(--ot-w-medium) 0.75rem/1.2 var(--ot-font-mono); letter-spacing: 0.02em; color: rgb(var(--c)); white-space: nowrap; }
.corsia--1 .clip { --c: 255 211 189; }
.corsia--2 .clip { --c: 251 213 228; }
.corsia--3 .clip { --c: 227 220 255; }
.corsia--4 .clip { --c: 213 230 255; }
.corsia--5 .clip, .corsia--6 .clip { --c: 255 79 31; }
.clip--attenzione { --c: 242 181 68 !important; }
.clip--segnale { background: linear-gradient(rgb(255 79 31 / 0.2), rgb(255 79 31 / 0.2)), var(--clip-fondo); }
.clip--segnale i { color: var(--ot-vermiglio-200); }
/* clip non ancora raggiunta: si spengono fondo e bordo, il testo resta leggibile (AA) */
.clip.is-spento {
  background: linear-gradient(rgb(var(--c) / 0.05), rgb(var(--c) / 0.05)), var(--clip-fondo);
  box-shadow: inset 0 0 0 1px rgb(var(--c) / 0.26), inset 3px 0 0 rgb(var(--c) / 0.45);
}
.clip.is-spento b { color: var(--ot-notte-testo-2); }
.clip.is-colpito { background: linear-gradient(rgb(var(--c) / 0.42), rgb(var(--c) / 0.42)), var(--clip-fondo); transform: scale(1.04); box-shadow: inset 0 0 0 1px rgb(var(--c)), inset 3px 0 0 rgb(var(--c)), 0 0 24px -2px rgb(var(--c) / 0.6); }
.clip--1a { --x: 0.02; } .clip--1b { --x: 0.42; }
.clip--2a { --x: 0.07; } .clip--2b { --x: 0.58; }
.clip--3a { --x: 0.15; } .clip--3b { --x: 0.40; }
.clip--4a { --x: 0.03; } .clip--4b { --x: 0.21; } .clip--4c { --x: 0.43; } .clip--4d { --x: 0.58; }
.clip--5a { --x: 0.66; }
.clip--6a { --x: 0.78; }

.corsia--tenore { border-top-color: rgb(255 79 31 / 0.35); }
.corsia--tenore .corsia__traccia { min-height: 64px; }
.corsia__voce { font: italic 400 1.375rem/1 var(--ot-font-serif); color: var(--ot-vermiglio-500); letter-spacing: 0; }
.nota-tenuta {
  position: absolute; z-index: 2; left: 0.5%; right: 1.5%; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 36px; padding: 0 10px 0 16px; border-radius: 999px;
  background: linear-gradient(90deg, #FF6A3D, var(--ot-vermiglio-500) 30%, var(--ot-vermiglio-500));
  color: var(--ot-inchiostro);
  box-shadow: 0 0 0 1px rgb(255 79 31 / 0.5), 0 10px 30px -10px rgb(255 79 31 / 0.8);
}
.nota-tenuta b { font-size: 0.875rem; font-weight: var(--ot-w-semi); white-space: nowrap; }
.nota-tenuta__fermata { width: 28px; height: 19px; flex: none; fill: var(--ot-inchiostro); stroke: var(--ot-inchiostro); stroke-width: 1.8; }

.testina {
  --p: 0.64;
  position: absolute; z-index: 1; top: -34px; bottom: 0; left: var(--nome-w); right: 0;
  pointer-events: none;
}
.testina::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 2px; translate: -1px 0;
  background: linear-gradient(var(--ot-vermiglio-500), rgb(255 79 31 / 0.65));
  box-shadow: 0 0 14px rgb(255 79 31 / 0.85);
}
.testina__testa {
  position: absolute; top: 0; left: calc(var(--p) * 100%); translate: -50% 0;
  width: 14px; height: 14px; border-radius: 3px 3px 7px 7px; background: var(--ot-vermiglio-500);
}

.sessione__piede {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 24px;
  padding: 14px 16px; border-top: 1px solid var(--ot-notte-filetto);
  font: 0.8125rem/1.45 var(--ot-font-mono); color: var(--ot-notte-testo-2);
}
.sessione__cifra { color: var(--ot-notte-testo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sessione__cifra-et { color: var(--ot-notte-testo-3); }

/* sotto i 760 px le corsie si impilano: niente testina, clip in fila */
@media (max-width: 759px) {
  .sessione { --nome-w: 0px; }
  .righello, .testina { display: none; }
  .sessione__corpo { padding: 4px 14px 14px; }
  .corsia { grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
  .corsia__nome { padding: 0 0 8px; }
  .corsia__traccia { min-height: 0; background: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .clip { position: static; translate: none; max-width: 100%; }
  .corsia--tenore .corsia__traccia { min-height: 40px; }
  .nota-tenuta { position: static; translate: none; width: 100%; }
  .sessione__barra { flex-wrap: wrap; }
}

.passi { display: grid; gap: 1px; margin-top: clamp(28px, 3.5vw, 44px); grid-template-columns: minmax(0, 1fr); background: var(--ot-notte-filetto); border-radius: var(--ot-r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--ot-notte-filetto); }
@media (min-width: 560px) { .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .passi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.passo { padding: 22px 22px 24px; background: var(--ot-notte); }
.passo__num { font: var(--ot-w-medium) 0.8125rem/1 var(--ot-font-mono); color: var(--ot-vermiglio-500); letter-spacing: 0.06em; }
.passo h3 { margin-top: 14px; font-size: var(--ot-fs-h3); font-weight: var(--ot-w-semi); letter-spacing: -0.015em; }
.passo p { margin-top: 8px; font-size: var(--ot-fs-small); color: var(--ot-notte-testo-2); }

/* ===================================================================== GALLERIA */
.sezione--app { padding-bottom: calc(var(--ot-sezione) * 0.85); }
.galleria__schede {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.5vw, 28px);
}
.galleria__schede button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px 0 12px; border: 0; border-radius: var(--ot-r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  font-size: 0.9375rem; font-weight: var(--ot-w-medium); color: var(--ot-inchiostro-2);
  cursor: pointer; transition: background-color var(--ot-dur-1), color var(--ot-dur-1), box-shadow var(--ot-dur-1);
}
.galleria__schede button:hover { color: var(--ot-inchiostro); box-shadow: inset 0 0 0 1px var(--ot-inchiostro-4); }
.galleria__schede button[aria-selected="true"] { background: var(--ot-inchiostro); color: #fff; box-shadow: none; }
.galleria__schede button[aria-selected="true"] .galleria__n { color: var(--ot-vermiglio-500); }
.galleria__schede button:focus-visible { outline-offset: 2px; border-radius: var(--ot-r-pill); }
.galleria__n { font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); color: var(--ot-vermiglio-700); }
@media (max-width: 640px) {
  .galleria__schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleria__schede button { justify-content: flex-start; text-align: left; line-height: 1.2; font-size: 0.875rem; padding: 6px 12px; }
}

.vista + .vista { margin-top: clamp(56px, 7vw, 96px); }
.js .galleria--attiva .vista + .vista { margin-top: 0; }
.vista__titolo { font-size: var(--ot-fs-h3); font-weight: var(--ot-w-semi); letter-spacing: -0.015em; margin-bottom: 16px; }
.galleria--attiva .vista__titolo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vista:focus-visible { outline-offset: 8px; border-radius: var(--ot-r-lg); }

.vetrina { position: relative; isolation: isolate; }
.vetrina::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; width: 100vw; translate: -50% 0;
  top: clamp(40px, 9%, 120px); height: 57px;
  background:
    linear-gradient(to bottom, transparent 28px, var(--ot-vermiglio-500) 28px, var(--ot-vermiglio-500) 29.5px, transparent 29.5px),
    repeating-linear-gradient(to bottom, var(--ot-rigo-colore) 0 1px, transparent 1px 14px);
}
.vetrina::after {
  content: ""; position: absolute; z-index: -2;
  inset: 12% -6% -10% -6%;
  background: var(--ot-alba);
  filter: blur(30px); opacity: 0.9;
}
.finestra {
  position: relative;
  background: #fff;
  border-radius: var(--ot-r-lg);
  box-shadow: 0 0 0 1px rgb(17 16 21 / 0.08), var(--ot-ombra-3);
  overflow: hidden;
}
.finestra__barra {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  height: 44px; padding: 0 16px;
  background: linear-gradient(#FCFBF8, #F6F3EE);
  border-bottom: 1px solid var(--ot-filetto);
}
.finestra__punti { display: flex; gap: 7px; }
.finestra__punti i { width: 11px; height: 11px; border-radius: 50%; background: #E3DDD3; }
.finestra__punti i:first-child { background: var(--ot-vermiglio-200); }
.finestra__url {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  height: 28px; padding: 0 14px; border-radius: var(--ot-r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--ot-filetto);
  font: 0.75rem/1 var(--ot-font-mono); color: var(--ot-inchiostro-2); white-space: nowrap; overflow: hidden;
}
.finestra__url svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--ot-inchiostro-3); stroke-width: 1.6; stroke-linejoin: round; }
.finestra__indirizzo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.finestra__istanza {
  justify-self: end;
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ot-inchiostro-3);
}
.finestra__schermo { position: relative; background: #fff; }
.finestra__schermo img { width: 100%; height: auto; }
.finestra__dida {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--ot-filetto);
  font: 0.8125rem/1.45 var(--ot-font-mono); color: var(--ot-inchiostro-3); background: #FCFBF8;
}
@media (max-width: 719px) {
  .finestra { border-radius: var(--ot-r-md); }
  .finestra__barra { grid-template-columns: auto minmax(0, 1fr); height: 38px; padding: 0 10px; }
  .finestra__istanza { display: none; }
  .finestra__url { justify-self: stretch; font-size: 0.75rem; height: 26px; padding: 0 10px; }
  .vetrina::before { top: 24px; }
}
/* telefoni: la cattura finisce sfumando, non con una scheda tagliata a metà */
@media (max-width: 640px) {
  .finestra__schermo::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 1;
    background: linear-gradient(rgb(255 255 255 / 0), #fff); pointer-events: none;
  }
}

/* segni numerati: sui bordi delle schede, mai sopra il testo dell'app */
.segno {
  --s: clamp(24px, 2.2vw, 30px);
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); translate: -50% -50%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ot-vermiglio-500); color: var(--ot-inchiostro);
  font: var(--ot-w-medium) calc(var(--s) * 0.48)/1 var(--ot-font-mono);
  box-shadow: 0 0 0 3px #fff, 0 6px 16px -4px rgb(255 79 31 / 0.6);
  z-index: 2;
}
.finestra__schermo .segno::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--ot-vermiglio-500);
  animation: segnale 2.8s var(--ot-ease) infinite;
}
@keyframes segnale { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.1); opacity: 0; } }
.segno--statico { position: static; translate: none; --s: 30px; flex: none; z-index: auto; }
/* sui telefoni la schermata è quella del telefono: i segni restano solo nelle note */
@media (max-width: 640px) { .finestra__schermo .segno { display: none; } }

/* posizioni dei segni (percentuali della schermata 1440 × 900) */
.segno--p1 { --x: 19.4%;  --y: 53.1%; }
.segno--p2 { --x: 78.45%; --y: 29.1%; }
.segno--p3 { --x: 68.6%;  --y: 53.1%; }
.segno--p4 { --x: 74.2%;  --y: 7.4%; }
.segno--o1 { --x: 19.4%;  --y: 42.2%; }
.segno--o2 { --x: 19.4%;  --y: 53.2%; }
.segno--o3 { --x: 96.3%;  --y: 83.7%; }
.segno--c1 { --x: 19.4%;  --y: 42.2%; }
.segno--c2 { --x: 71.4%;  --y: 42.2%; }
.segno--c3 { --x: 19.4%;  --y: 66.9%; }
.segno--r1 { --x: 19.4%;  --y: 36.6%; }
.segno--r2 { --x: 19.4%;  --y: 61.9%; }
.segno--r3 { --x: 45.4%;  --y: 79%; }
.segno--d1 { --x: 28.4%;  --y: 9.4%; }
.segno--d2 { --x: 28.4%;  --y: 22.6%; }
.segno--d3 { --x: 28.4%;  --y: 77%; }
.segno--w1 { --x: 18.5%;  --y: 11.4%; }
.segno--w2 { --x: 18.5%;  --y: 42.1%; }
.segno--w3 { --x: 18.5%;  --y: 71.6%; }

/* note sotto la schermata: mai una nota sola su una riga */
.note {
  display: grid; gap: 24px 32px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(28px, 3.5vw, 44px);
}
@media (min-width: 560px) { .vista--panoramica .note { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .note { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vista--panoramica .note { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vista--panoramica .note { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.note li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-content: start; }
.note h4 { font-size: 1.0625rem; font-weight: var(--ot-w-semi); letter-spacing: -0.01em; align-self: center; }
.note p { grid-column: 2; font-size: var(--ot-fs-small); color: var(--ot-inchiostro-2); line-height: 1.5; }


/* ===================================================================== IL NOME */
.nome {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ot-carta-2);
  border-block: 1px solid var(--ot-filetto);
  padding-top: clamp(56px, 6vw, 88px);
}
.nome__in { display: grid; gap: 32px 64px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .nome__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.lemma__parola {
  font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem); font-weight: var(--ot-w-display);
  letter-spacing: -0.045em; line-height: 0.9;
}
.lemma__etimo { margin-top: 14px; font: 0.875rem/1.4 var(--ot-font-mono); color: var(--ot-inchiostro-3); }
.lemma__etimo i { font-family: var(--ot-font-serif); font-size: 1.25em; color: var(--ot-vermiglio-700); }
.lemma__sensi { margin-top: 20px; counter-reset: senso; display: grid; gap: 10px; max-width: 36em; }
.lemma__sensi li { position: relative; padding-left: 34px; color: var(--ot-inchiostro-2); }
.lemma__sensi li::before {
  counter-increment: senso; content: counter(senso) ".";
  position: absolute; left: 0; top: 0.1em;
  font: var(--ot-w-medium) 0.875rem/1.4 var(--ot-font-mono); color: var(--ot-vermiglio-700);
}
.nome__frase {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); font-weight: 560; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}
.moduli { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ot-filetto); overflow: hidden; }
.moduli--scorre { /* la fila entra ed esce sfumando dai bordi dello schermo */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.moduli__pista { padding-block: 18px; }
.moduli__riga {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding-inline: var(--ot-gutter);
}
.moduli__riga li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: var(--ot-r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  font-size: 0.9375rem; font-weight: var(--ot-w-medium); white-space: nowrap;
}
.moduli__riga li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ot-vermiglio-500); }
/* con JavaScript e senza movimento ridotto: la fila scorre (la copia la crea home.js) */
.moduli--scorre .moduli__pista { display: flex; width: max-content; }
.moduli--scorre .moduli__riga { flex-wrap: nowrap; justify-content: flex-start; padding-inline: 0 10px; animation: scorri 60s linear infinite; }
.moduli--scorre:hover .moduli__riga, .moduli--scorre:focus-within .moduli__riga,
.moduli.fuori-vista .moduli__riga { animation-play-state: paused; }
@keyframes scorri { to { transform: translateX(-100%); } }

/* ===================================================================== CODICE APERTO */
.aperto { display: grid; gap: 40px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .aperto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.aperto__testa { position: relative; display: grid; gap: 18px; align-content: start; }
.stato-riga { display: inline-flex; align-items: center; gap: 10px; font: 0.8125rem/1.4 var(--ot-font-mono); color: var(--ot-inchiostro-2); }
.timbro { width: 132px; height: 132px; margin-top: 10px; }
.timbro svg { width: 100%; height: 100%; animation: gira 40s linear infinite; }
.anim-ferme .timbro svg { animation-play-state: paused; }
@keyframes gira { to { transform: rotate(360deg); } }
.timbro__bordo { fill: var(--ot-vermiglio-500); }
.timbro__dentro { fill: var(--ot-carta); }
.timbro__testo { font: var(--ot-w-medium) 11.5px var(--ot-font-mono); letter-spacing: 2.1px; fill: var(--ot-inchiostro); }
.timbro__rigo { stroke: var(--ot-inchiostro); stroke-width: 3; fill: none; }
.timbro__nota { fill: var(--ot-inchiostro); }

.principi { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 560px) { .principi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principi li { padding: 22px 22px 24px; border-radius: var(--ot-r-lg); background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-1); }
.principi__ico {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ot-inchiostro); color: var(--ot-vermiglio-500);
}
.principi__ico .ico { width: 20px; height: 20px; }
.principi h3 { margin-top: 16px; font-size: 1.125rem; font-weight: var(--ot-w-semi); letter-spacing: -0.012em; }
.principi p { margin-top: 6px; font-size: var(--ot-fs-small); color: var(--ot-inchiostro-2); }
.principi li.principi__doppia {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
  background: var(--ot-vermiglio-50); box-shadow: inset 0 0 0 1px var(--ot-vermiglio-100);
}
@media (min-width: 560px) { .principi li.principi__doppia { grid-column: 1 / -1; } }
.principi__doppia h3 { margin-top: 0; }
.principi__doppia p { max-width: 40em; }
.principi__ico--segnale { background: var(--ot-vermiglio-500); color: var(--ot-inchiostro); }
@media (max-width: 479px) { .principi li.principi__doppia { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---------- Una rete tra editori ------------------------------------------- */
.rete {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(24px, 3.5vw, 44px); border-radius: var(--ot-r-xl);
  background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-2);
  position: relative; overflow: hidden; isolation: isolate;
}
.rete::before { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 120%; z-index: -1; background: var(--ot-alba); opacity: 0.6; filter: blur(30px); }
.rete__testa { display: grid; gap: 12px 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .rete__testa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.rete__testa p { color: var(--ot-inchiostro-2); max-width: 34em; }
.rete__schema {
  display: grid; gap: 16px; align-items: center; margin-top: clamp(24px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1100px) { .rete__schema { grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 0; } }
.rete__nodo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--ot-r-md);
  background: var(--ot-carta); box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  position: relative; z-index: 1;
}
.rete__nodo img { width: 36px; height: 36px; flex: none; }
.rete__nodo p { display: grid; line-height: 1.25; }
.rete__nodo b { font-weight: var(--ot-w-semi); }
.rete__nodo span { font-size: 0.8125rem; color: var(--ot-inchiostro-3); }
.rete__cerchi { display: flex; flex: none; }
.rete__cerchi i { width: 22px; height: 22px; border-radius: 50%; background: var(--ot-inchiostro); box-shadow: 0 0 0 2px var(--ot-carta); }
.rete__cerchi i + i { margin-left: -8px; background: #4A4853; }
.rete__cerchi i:last-child { background: var(--ot-vermiglio-500); }
.rete__linee { display: grid; gap: 10px; }
.rete__linea { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
@media (min-width: 1100px) {
  .rete__linea { justify-content: center; padding: 6px 12px; }
  .rete__linea::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; z-index: 0; }
  .rete__linea--oggi::before { background: var(--ot-vermiglio-500); }
  .rete__linea--arrivo::before { background: repeating-linear-gradient(90deg, var(--ot-inchiostro-4) 0 6px, transparent 6px 12px); }
  .rete__linea > * { position: relative; z-index: 1; }
}
.rete__quando {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--ot-r-pill);
  font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.rete__quando--oggi { background: var(--ot-ok-fondo); color: var(--ot-ok); }
.rete__quando--arrivo { background: var(--ot-attesa-fondo); color: var(--ot-attesa); }
.rete__cosa {
  padding: 6px 12px; border-radius: var(--ot-r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  font-size: 0.9375rem; font-weight: var(--ot-w-medium);
}

/* ===================================================================== PREZZI E LICENZE */
.sezione--prezzi { background: var(--ot-carta-2); border-block: 1px solid var(--ot-filetto); }
.piani { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
/* tre colonne solo da 1200 px: sotto, le schede sono troppo strette per i pulsanti e le cifre */
@media (min-width: 1200px) { .piani { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.piano {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: clamp(24px, 2.6vw, 32px); border-radius: var(--ot-r-xl);
  background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-1);
}
.piano--evidenza { box-shadow: 0 0 0 2px var(--ot-inchiostro), var(--ot-ombra-3); }
/* il bollino sta sul bordo della scheda, fuori dal flusso: il titolo resta alla stessa altezza delle altre schede */
.piano--evidenza .piano__bollino { position: absolute; top: 0; right: clamp(24px, 2.6vw, 32px); transform: translateY(-50%); white-space: nowrap; }
.piano__nome {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-height: 26px;
  font: var(--ot-w-medium) 0.75rem/1.3 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase;
  color: var(--ot-vermiglio-700);
}
.piano__bollino { padding: 5px 9px; border-radius: var(--ot-r-pill); background: var(--ot-inchiostro); color: #fff; letter-spacing: 0.06em; }
.piano__titolo { margin-top: 10px; font-size: var(--ot-fs-h3); font-weight: var(--ot-w-semi); letter-spacing: -0.015em; line-height: 1.2; }
.piano__prezzo { margin-top: 18px; min-height: 3.25rem; display: flex; align-items: baseline; align-content: flex-end; flex-wrap: wrap; gap: 4px 8px; }
.piano__cifra { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: var(--ot-w-display); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.piano__cifra--parole { font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem); letter-spacing: -0.025em; }
.piano__da, .piano__unita { font: var(--ot-w-medium) 0.875rem/1.2 var(--ot-font-mono); color: var(--ot-inchiostro-2); white-space: nowrap; }
.piano__per { margin-top: 10px; font-size: var(--ot-fs-small); color: var(--ot-inchiostro-2); max-width: 30em; }
.piano__lista { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ot-filetto); }
.piano__lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: var(--ot-fs-small); line-height: 1.45; color: var(--ot-inchiostro-2); }
.piano__lista .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--ot-ok); stroke-width: 2; }
.piano__cta { margin-top: auto; width: 100%; white-space: nowrap; }
/* da 1200 px: le tre schede usano le stesse righe (testa, lista, pulsante), così filetti, liste e pulsanti si allineano */
@media (min-width: 1200px) {
  .piani { grid-template-rows: auto 1fr auto; }
  .piano { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 22px; }
}
/* tablet: una scheda per riga, testa a sinistra e lista a destra */
@media (min-width: 700px) and (max-width: 1199px) {
  .piano { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 36px; align-items: start; }
  .piano__lista { grid-column: 2; grid-row: 1 / span 2; border-top: 0; padding-top: 0; padding-left: 28px; border-left: 1px solid var(--ot-filetto); }
  .piano__cta { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.piani__nota {
  margin-top: 20px; max-width: 64em;
  font: 0.8125rem/1.55 var(--ot-font-mono); color: var(--ot-inchiostro-2);
}

.faq { margin-top: clamp(44px, 5.5vw, 72px); display: grid; gap: 16px 64px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); } }
.faq__titolo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: var(--ot-w-display); line-height: 1.1; letter-spacing: -0.02em; }
.faq__lista { border-top: 1px solid var(--ot-filetto-forte); }
.faq__voce { border-bottom: 1px solid var(--ot-filetto-forte); }
.faq__voce > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 4px; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: var(--ot-w-semi); letter-spacing: -0.01em; line-height: 1.3;
}
.faq__voce > summary::-webkit-details-marker { display: none; }
.faq__voce > summary:hover { color: var(--ot-vermiglio-700); }
.faq__voce > summary:focus-visible { outline: 2px solid var(--ot-inchiostro); outline-offset: 2px; border-radius: var(--ot-r-xs); }
.faq__segno { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--ot-dur-2) var(--ot-ease); }
.faq__voce[open] .faq__segno { transform: rotate(45deg); }
.faq__voce > p { padding: 0 4px 20px; max-width: 46em; font-size: var(--ot-fs-small); color: var(--ot-inchiostro-2); }

/* ===================================================================== SCELTO DA + ACCEDI */
.chi-accedi { display: grid; gap: 48px 64px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .chi-accedi { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.referenza { display: grid; gap: 20px; justify-items: start; }
.referenza__titolo { display: grid; gap: 22px; justify-items: start; }
.referenza__scelto {
  display: flex; align-items: center; gap: 12px;
  font: var(--ot-w-medium) 0.75rem/1.2 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase;
  color: var(--ot-inchiostro-2);
}
/* il logo di Edizioni Curci: proporzioni e colori originali, mai ricolorato */
.referenza__logo { height: clamp(30px, 1.1rem + 1.9vw, 46px); width: auto; max-width: 100%; }
.referenza__chi { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 560; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; max-width: 20em; }
.referenza__rigo {
  width: min(100%, 420px); height: 13px;
  background:
    linear-gradient(to bottom, transparent 6px, var(--ot-vermiglio-500) 6px, var(--ot-vermiglio-500) 7px, transparent 7px),
    repeating-linear-gradient(to bottom, rgb(17 16 21 / 0.22) 0 1px, transparent 1px 3px);
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent);
}
.referenza__testo { color: var(--ot-inchiostro-2); font-size: var(--ot-fs-lead); line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.referenza__fatti { display: flex; flex-wrap: wrap; gap: 8px; }
.referenza__fatti li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: var(--ot-r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--ot-filetto-forte);
  font: 0.8125rem/1.3 var(--ot-font-mono); color: var(--ot-inchiostro-2);
}
.referenza__tinte { display: inline-flex; flex: none; }
.referenza__tinte i { width: 12px; height: 12px; border-radius: 50%; background: #004996; box-shadow: 0 0 0 2px #fff; }
.referenza__tinte i + i { margin-left: -4px; background: #3D53A0; }
.accedi__scheda {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 16px; justify-items: start;
  padding: clamp(28px, 3.5vw, 44px); border-radius: var(--ot-r-xl);
  background: #fff; box-shadow: var(--ot-alone), var(--ot-ombra-3);
}
.accedi__scheda::before {
  content: ""; position: absolute; z-index: -1; right: 0; top: 44px; width: 62%; height: 49px;
  background:
    linear-gradient(to bottom, transparent 24px, var(--ot-vermiglio-500) 24px, var(--ot-vermiglio-500) 25.5px, transparent 25.5px),
    repeating-linear-gradient(to bottom, var(--ot-rigo-colore) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.accedi__ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ot-vermiglio-500); color: var(--ot-inchiostro); }
.accedi__ico .ico { width: 24px; height: 24px; }
.accedi__scheda p { color: var(--ot-inchiostro-2); }
.accedi__btn { margin-top: 6px; }
.accedi .accedi__nota { display: inline-flex; align-items: center; gap: 10px; font: 0.8125rem/1.4 var(--ot-font-mono); color: var(--ot-inchiostro-2); }
@media (max-width: 520px) { .accedi__btn { width: 100%; } }

/* ===================================================================== CONTATTI */
.contatti {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ot-vermiglio-500); color: var(--ot-inchiostro);
  padding-block: clamp(56px, 7vw, 104px) clamp(88px, 9vw, 128px);
}
.contatti__rigo {
  position: absolute; z-index: -1; left: 0; right: 0; bottom: 22px; height: 49px;
  background:
    linear-gradient(to bottom, transparent 24px, rgb(17 16 21 / 0.6) 24px, rgb(17 16 21 / 0.6) 25.5px, transparent 25.5px),
    repeating-linear-gradient(to bottom, rgb(17 16 21 / 0.16) 0 1px, transparent 1px 12px);
}
.contatti__in { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .contatti__in { grid-template-columns: minmax(0, 1.4fr) auto; } }
.contatti__occhiello { display: flex; align-items: center; gap: 12px; font: var(--ot-w-medium) 0.75rem/1 var(--ot-font-mono); letter-spacing: var(--ot-track-label); text-transform: uppercase; }
.contatti__occhiello .occhiello__num { color: var(--ot-inchiostro); padding: 4px 7px; border-radius: var(--ot-r-xs); box-shadow: inset 0 0 0 1.5px var(--ot-inchiostro); }
.contatti__titolo { margin-top: 14px; font-size: var(--ot-fs-h2); font-weight: var(--ot-w-display); line-height: 1.04; letter-spacing: var(--ot-track-title); text-wrap: balance; max-width: 14em; }
.contatti__testo { margin-top: 14px; font-size: var(--ot-fs-lead); max-width: 30em; }
.contatti__azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.contatti .btn--inchiostro { box-shadow: 0 10px 30px -12px rgb(17 16 21 / 0.6); }
.contatti__mail { font: var(--ot-w-medium) 0.875rem/1 var(--ot-font-mono); color: var(--ot-vermiglio-500); padding-left: 10px; border-left: 1px solid rgb(255 255 255 / 0.25); }
.btn--bordo-inchiostro { background: transparent; color: var(--ot-inchiostro); box-shadow: inset 0 0 0 1.5px var(--ot-inchiostro); }
.btn--bordo-inchiostro:hover { background: rgb(17 16 21 / 0.08); color: var(--ot-inchiostro); }
.contatti .btn:focus-visible { box-shadow: 0 0 0 2px var(--ot-vermiglio-500), 0 0 0 4px var(--ot-inchiostro); }
.contatti a:not(.btn) { color: var(--ot-inchiostro); }
@media (max-width: 520px) {
  .contatti__azioni .btn { flex: 1 1 100%; }
  .contatti__mail { display: none; }
}

/* ===================================================================== MOVIMENTO RIDOTTO */
@media (prefers-reduced-motion: reduce) {
  .impulso, .onda { display: none; }
  .barra { transform: scaleY(0.85); animation: none; }
  .scheda, .pillola, .timbro svg, .finestra__schermo .segno::after, .moduli__riga { animation: none; }
  .finestra__schermo .segno::after { display: none; }
  .clip { transition: none; }
  .pausa, .trasporto { display: none !important; }
}