/* ==========================================================================
   GENESYS LABS · I CAPITOLI
   La pagina dei progetti come una fila di manifesti: ogni progetto è un
   capitolo con il suo colore piatto, a tutta altezza, da scorrere di lato.
   Direzione «Capitoli di colore» di taste-skill v2 (seed 2069703279).
   · l'idea: i colori veri dei sei progetti diventano sei capitoli, e dentro
     ognuno un pezzo del suo prodotto che funziona davvero (cap/<id>.*);
   · eroe «linea dell'acqua»: due campi che si incontrano a metà schermo, la
     scritta tagliata dalla linea cambia inchiostro;
   · elenco a manifesto, una parola gigante per riga; la grande parola
     che è il tasto; il piede che apre col nome.
   Base, testata e caratteri stanno in redesign.css. Qui solo questa pagina
   e il capitolo (la stessa scheda è usata anche dalla home).
   ========================================================================== */

:root {
  --paper: #f2f6f3;
  --inchiostro: #03130a;
  --verde-scuro: #0a5c33;
}
.pg3 { background: var(--fondo); }
.pg3 main { overflow-x: clip; }

/* la testata sta sopra campi chiari e colorati: sempre un tono pieno, mai vetro */
.pg3 .testata { transform: translateY(12px); }
.pg3 .testata.scorre { transform: translateY(10px); }
.pg3 .testata .testata-in,
.pg3 .testata.scorre .testata-in {
  background: #050807;
  border-color: var(--linea-forte);
  box-shadow: none; /* taste-skill-ignore: la testata sta ferma sopra i campi, non è un'ombra a riposo */
  -webkit-backdrop-filter: none; /* taste-skill-ignore: toglie il vetro della testata */
  backdrop-filter: none; /* taste-skill-ignore: toglie il vetro della testata */
}

.pg3 .marchio-testo small { display: none; }
.pg3 .btn-lang { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.pg3 .testata .tasto, .pg3 .testata .tasto:hover { box-shadow: none; /* taste-skill-ignore: toglie l'alone del tasto della testata */ }
.pg3 .testata .tasto::before { display: none; }

/* il tasto di questa pagina: una pillola piena, un colore alla volta */
.cp-tasto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--cp-tasto-bg, var(--inchiostro));
  color: var(--cp-tasto-ink, var(--verde));
  font: 600 17px/1 var(--font);
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s var(--esce), opacity .2s;
}
.cp-tasto:active { transform: scale(.97); }
.cp-tasto i { font-size: 14px; transition: transform .35s var(--esce); }
@media (hover: hover) and (pointer: fine) {
  .cp-tasto:hover { opacity: .88; }
  .cp-tasto:hover i.fa-arrow-down { transform: translateY(3px); }
  .cp-tasto:hover i.fa-arrow-up-right-from-square { transform: translate(2px, -2px); }
}
.cp-tasto:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ── Eroe: la linea dell'acqua ────────────────────────────────────────── */
.cp-eroe {
  --seam: 50%;
  --c-bg: #4ade8b;
  --c-ink: #03130a;
  position: relative;
  height: 100vh; /* taste-skill-ignore: riserva per i browser vecchi che non conoscono svh, subito sotto */
  height: 100svh;
  min-height: 560px;
  background: var(--fondo);
  overflow: hidden;
  overflow: clip;
}
.cp-sopra, .cp-sotto {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
}
.cp-sopra { top: 0; height: 50%; height: var(--seam); background: var(--fondo); color: var(--verde); }
.cp-sotto {
  top: 50%; top: var(--seam);
  bottom: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  transition: background-color .8s ease, color .8s ease;
}
/* la scritta sta due volte, nello stesso punto: sopra la linea nell'inchiostro
   verde, sotto nell'inchiostro scuro del campo: sotto la linea c'è solo la
   seconda riga (come testo di un pseudo-elemento: è lo stesso nome, non un
   altro). La linea la taglia a metà: 1,5 righe sopra, mezza sotto (line-height .86). */
.cp-nome {
  --cp-fs: clamp(72px, 17.2vw, 300px);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font: 800 var(--cp-fs)/.86 var(--font);
  letter-spacing: -.012em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.cp-sopra .cp-nome { bottom: -.43em; }
.cp-sotto .cp-nome-2 { top: -.43em; }
.cp-l2::after { content: attr(data-t); display: block; }
.cp-riga { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.cp-riga-in { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.cp-js .cp-riga-in {
    transform: translateY(106%);
    animation: cp-sale .95s var(--esce) both;
    animation-delay: calc(var(--i, 0) * 110ms + 150ms);
  }
}
@keyframes cp-sale { to { transform: none; } }

.cp-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  bottom: max(30px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}
.cp-frase { margin: 0; max-width: 31em; font-size: 20px; line-height: 1.45; color: inherit; text-wrap: pretty; }
.cp-pie .cp-tasto { --cp-tasto-bg: var(--c-ink); --cp-tasto-ink: var(--c-bg); transition: background-color .8s ease, color .8s ease, transform .14s var(--esce), opacity .2s; }
@media (prefers-reduced-motion: no-preference) {
  html.cp-js .cp-pie { animation: cp-arriva .9s var(--esce) .75s both; }
}
@keyframes cp-arriva { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 760px) {
  .cp-eroe { --seam: 46%; }
  .cp-nome { --cp-fs: min(18.6vw, 160px); }
  .cp-pie { flex-direction: column; align-items: flex-start; gap: 20px; bottom: 24px; bottom: max(24px, env(safe-area-inset-bottom)); }
  .cp-frase { font-size: 18px; max-width: none; }
}
@media (max-height: 640px) and (max-width: 760px) {
  .cp-pie { gap: 14px; }
  .cp-pie .cp-tasto { min-height: 48px; }
}

/* ── La fila dei capitoli ─────────────────────────────────────────────── */
.cp-fila { background: var(--fondo); padding: clamp(84px, 11vw, 160px) 0 clamp(60px, 8vw, 110px); }
.cp-fila-testa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: clamp(32px, 4.5vw, 64px);
}
.cp-titolo {
  margin: 0;
  font: 700 clamp(40px, 5vw, 76px)/1.02 var(--font);
  letter-spacing: -.042em;
  text-wrap: balance;
  max-width: 13ch;
  color: var(--testo);
}
.cp-sub { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
@media (min-width: 900px) {
  .cp-fila-testa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 48px; }
  .cp-sub { justify-self: end; }
}

.cp-binario {
  --cap-w: calc(100vw - 2 * var(--margine) - 40px);
  --cap-pad: 20px;
  --scena-w: calc(var(--cap-w) - 2 * var(--cap-pad));
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0 var(--margine);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--margine);
  scroll-padding-right: var(--margine);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cp-binario::-webkit-scrollbar { display: none; }
.cp-binario::after { content: ''; flex: 0 0 var(--margine); }
.cp-binario:focus { outline: none; }
.cp-binario:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }
.cp-binario.trascina { scroll-snap-type: none; cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* il capitolo: un campo di un colore solo, a tutta altezza */
.cap {
  --cap-bg: #121110;
  --cap-ink: #f2ebdf;
  --cp-tasto-bg: #e3c79c;
  --cp-tasto-ink: #121110;
  position: relative;
  flex: 0 0 var(--cap-w);
  display: flex;
  flex-direction: column;
  min-height: 640px;
  min-height: max(640px, 88svh);
  padding: 26px var(--cap-pad) 28px;
  background: var(--cap-bg);
  color: var(--cap-ink);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.cap-nome {
  margin: 0 0 22px;
  font: 800 clamp(42px, 12.4vw, 128px)/.9 var(--font);
  letter-spacing: -.048em;
  text-wrap: balance;
  will-change: transform;
}
.cap-nome .cap-a-capo { display: inline; }
.cap-scena {
  --fr-fs: calc(var(--scena-w) / 22);
  position: relative;
  flex: none;
  width: var(--scena-w);
  height: calc(var(--scena-w) * 26 / 22);
  margin: 0 auto;
}
@supports not (aspect-ratio: 1 / 1) { .cap-scena { height: calc(var(--scena-w) * 1.1818); } }
.cap-scena > .fr { position: absolute; left: 0; top: 0; }
.cap-testo { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 26px; }
.cap-desc { order: 1; margin: 0; max-width: 32em; font-size: 18px; line-height: 1.5; color: inherit; text-wrap: pretty; }
.cap-desc strong { font-weight: 700; }
/* le parti della card di prima, in gerarchia: categoria e stato (piccoli), la descrizione, le cifre (l'appoggio
   dell'occhio), i tre punti, il codice (in fondo, più discreto), il tasto. Tra un gruppo e l'altro 28px, dentro 8-10px. */
.cap-meta { order: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.35; opacity: .78; }
.cap-stato { display: inline-flex; align-items: center; gap: 8px; }
.cap-stato::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cap-punti { order: 3; display: grid; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; max-width: 32em; font-size: 15px; line-height: 1.45; }
.cap-punti li { position: relative; padding-left: 20px; }
.cap-punti li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.cap-punti .cap-plus { padding-left: 0; }
.cap-punti .cap-plus::before { content: none; }
.cap-punti b { font-weight: 700; }
.cap-punti b::after { content: ':'; }
.cap-punti .cap-plus b::after { content: none; }
.cap-plus-segno { display: inline-block; margin-right: 4px; padding: 2px 9px; border-radius: 999px; background: var(--cap-ink); color: var(--cap-bg); font-size: 13px; line-height: 1.5; }
.cap-plus a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .22em; }
.cap-codice { order: 4; margin-top: 28px; max-width: 32em; opacity: .85; }
.cap-codice-t { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.cap-barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.cap-barra span { width: var(--q); background: currentColor; }
.cap-codice-voci { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.4; }
.cap-codice-voci li { display: inline-flex; align-items: center; gap: 6px; }
.cap-codice-voci li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.cap-codice-voci em { font-style: normal; font-variant-numeric: tabular-nums; }
.cap-barra span:nth-child(2), .cap-codice-voci li:nth-child(2)::before { opacity: .7; }
.cap-barra span:nth-child(3), .cap-codice-voci li:nth-child(3)::before { opacity: .5; }
.cap-barra span:nth-child(4), .cap-codice-voci li:nth-child(4)::before { opacity: .34; }
.cap-barra span:nth-child(5), .cap-codice-voci li:nth-child(5)::before { opacity: .2; }
.cap-cifre { order: 2; display: flex; flex-wrap: wrap; gap: 14px 36px; list-style: none; margin: 26px 0 0; padding: 0; }
.cap-cifre li { display: flex; flex-direction: column; gap: 2px; }
.cap-cifre b { font: 800 40px/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cap-cifre span { margin-top: 4px; font-size: 14px; line-height: 1.3; opacity: .78; }
.cap-azioni { order: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: auto; padding-top: 30px; }

/* i colori dei sei: ogni campo il suo, ogni inchiostro scelto per il contrasto */
.cap-maten { --cap-bg: #121110; --cap-ink: #f5f5f3; --cp-tasto-bg: #e3c79c; --cp-tasto-ink: #121110; }
.cap-officina { --cap-bg: #b64926; --cap-ink: #ffffff; --cp-tasto-bg: #ffffff; --cp-tasto-ink: #6e2a13; }
.cap-loot { --cap-bg: #ff6b2b; --cap-ink: #160b04; --cp-tasto-bg: #160b04; --cp-tasto-ink: #ff8a50; }
.cap-sorso { --cap-bg: #7bf0ff; --cap-ink: #04222a; --cp-tasto-bg: #04222a; --cp-tasto-ink: #7bf0ff; }
.cap-mixbar { --cap-bg: #e9ecef; --cap-ink: #15171a; --cp-tasto-bg: #15171a; --cp-tasto-ink: #ff9d5c; }

/* entrata: il nome sale da dietro la sua riga, la scena sale, il testo dopo */
@media (prefers-reduced-motion: no-preference) {
  html.cp-js .cap .cap-nome,
  html.cp-js .cap .cap-scena,
  html.cp-js .cap .cap-testo { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform 1s var(--esce); }
  html.cp-js .cap .cap-scena { transition-delay: .08s; }
  html.cp-js .cap .cap-testo { transition-delay: .18s; }
  html.cp-js .cap.in .cap-nome,
  html.cp-js .cap.in .cap-scena,
  html.cp-js .cap.in .cap-testo { opacity: 1; transform: none; }
}
/* l'inclinazione di profondità mentre scorri: valore --p da -1 a 1 (capitoli.js) */
@media (prefers-reduced-motion: no-preference) {
  html.cp-js:not(.leggero) .cap.in .cap-nome { transform: translate3d(calc(var(--p, 0) * -5vw), 0, 0); transition: opacity .8s ease; }
  html.cp-js:not(.leggero) .cap.in .cap-scena { transform: translate3d(calc(var(--p, 0) * 3.2vw), 0, 0); transition: opacity .8s ease; }
}

/* schermi più larghi: il testo a sinistra, la scena a destra */
@media (min-width: 701px) {
  .cp-binario { --cap-w: min(82vw, 700px); --cap-pad: 28px; --scena-w: min(calc(var(--cap-w) - 2 * var(--cap-pad)), 560px); }
  .cap-nome { font-size: clamp(54px, 8vw, 96px); }
}
@media (min-width: 1100px) {
  .cp-binario { --cap-w: min(74vw, 1140px); --cap-pad: 40px; --scena-w: min(36vw, 520px, calc((88svh - 100px) * 22 / 26)); }
  .cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--scena-w);
    grid-template-areas: "nome scena" "testo scena";
    grid-template-rows: auto 1fr;
    column-gap: 44px;
    align-content: stretch;
    min-height: clamp(640px, 86svh, 880px);
    padding: 40px var(--cap-pad) 40px;
  }
  .cap-nome { grid-area: nome; margin: 0; font-size: clamp(56px, 6.6vw, 112px); }
  .cap-scena { grid-area: scena; align-self: center; margin: 0; }
  .cap-testo { grid-area: testo; margin-top: 22px; justify-content: flex-end; }
  .cap-desc { font-size: 18px; }
  .cap-azioni { margin-top: 0; padding-top: 32px; }
}

/* sotto la fila: i pallini dei sei, il nome acceso, le frecce */
.cp-indice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 26px;
}
.cp-pallini { display: flex; align-items: center; gap: 2px; }
.cp-pallino {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cp-pallino i { display: block; width: 14px; height: 14px; background: var(--c, #888); transition: width .4s var(--esce), opacity .3s; opacity: .55; }
.cp-pallino[aria-current="true"] i { width: 30px; opacity: 1; }
.cp-pallino:focus-visible { outline: 3px solid var(--verde); outline-offset: -2px; }
.cp-corrente { margin: 0; flex: 1; font-size: 14px; line-height: 1.3; color: var(--testo); min-width: 0; }
.cp-corrente b { font-weight: 650; }
.cp-frecce { display: flex; gap: 10px; flex: none; }
.cp-freccia {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--superficie-2);
  color: var(--testo);
  font-size: 16px;
  cursor: pointer;
  transition: background-color .25s, color .25s, opacity .25s, transform .14s var(--esce);
}
.cp-freccia:active:not(:disabled) { transform: scale(.92); }
.cp-freccia:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cp-freccia:hover:not(:disabled) { background: var(--verde); color: var(--inchiostro); } }
.cp-freccia:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
/* sul telefono i pallini e le frecce bastano: il nome acceso resta solo per chi ascolta */
@media (max-width: 600px) {
  .cp-pallino { width: 34px; }
  .cp-corrente { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ── L'elenco: una parola per riga, come un manifesto ────────────────── */
.cp-lista { background: var(--fondo-2); padding: clamp(96px, 12vw, 170px) 0 clamp(80px, 10vw, 150px); }
.cp-lista-titolo {
  margin: 0 0 clamp(36px, 5vw, 72px);
  font: 700 clamp(40px, 5vw, 76px)/1.02 var(--font);
  letter-spacing: -.042em;
  text-wrap: balance;
  max-width: 14ch;
  color: var(--testo);
}
.cp-voci { list-style: none; margin: 0; padding: 0; }
.cp-voce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 40px;
  align-items: baseline;
  padding: 6px 0 20px;
  color: var(--testo);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cp-voce-nome {
  display: block;
  font: 750 clamp(48px, 12.2vw, 168px)/.95 var(--font);
  font-weight: 700;
  letter-spacing: -.05em;
  transition: color .25s;
  overflow-wrap: normal;
}
.cp-voce-det { display: flex; align-items: flex-start; gap: 10px; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--testo-2); text-wrap: pretty; }
.cp-voce-det b { color: var(--testo); font-weight: 600; }
.cp-chip { flex: none; display: block; width: 14px; height: 14px; margin-top: .42em; background: var(--c, var(--verde)); }
.cp-voce:focus-visible { outline: 3px solid var(--verde); outline-offset: 4px; }
.cp-voce:active .cp-voce-nome { color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .cp-voce:hover .cp-voce-nome { color: var(--verde); } }
@media (min-width: 900px) {
  .cp-voce { grid-template-columns: minmax(0, 1fr) minmax(0, 26em); padding: 0 0 6px; align-items: end; }
  .cp-voce-nome { font-size: clamp(88px, 10vw, 168px); }
  .cp-voce-det { padding-bottom: .9em; }
}
@media (prefers-reduced-motion: no-preference) {
  html.cp-js .cp-voce { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .9s var(--esce); transition-delay: calc(var(--i, 0) * 55ms); }
  html.cp-js .cp-voce.in { opacity: 1; transform: none; }
}

/* ── La grande parola: il tasto è tutta la fascia ────────────────────── */
.cp-chiama { background: var(--verde); color: var(--inchiostro); }
.cp-chiama-link {
  position: relative;
  display: block;
  height: 60vh; /* taste-skill-ignore: riserva per i browser vecchi che non conoscono svh, subito sotto */
  height: 60svh;
  min-height: 380px;
  padding: 26px var(--margine) 24px;
  background: var(--verde);
  color: var(--inchiostro);
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s;
}
.cp-chiama-frase { display: block; max-width: 22em; font-size: 20px; line-height: 1.4; text-wrap: pretty; }
.cp-chiama-freccia { position: absolute; top: 26px; right: var(--margine); width: 48px; height: 48px; transition: transform .45s var(--esce); }
.cp-chiama-parola {
  position: absolute;
  left: var(--margine);
  bottom: 24px;
  font: 800 25vw/.78 var(--font);
  letter-spacing: -.055em;
  white-space: nowrap;
  padding-bottom: .1em;
}
.cp-chiama-link:active, .cp-chiama-link:focus-visible { background: var(--inchiostro); color: var(--verde); }
.cp-chiama-link:focus-visible { outline: 4px solid var(--paper); outline-offset: -8px; }
@media (hover: hover) and (pointer: fine) {
  .cp-chiama-link:hover { background: var(--inchiostro); color: var(--verde); }
  .cp-chiama-link:hover .cp-chiama-freccia { transform: translate(6px, -6px); }
}
@media (max-width: 760px) {
  .cp-chiama-link { height: 46vh; height: 46svh; min-height: 340px; }
  .cp-chiama-frase { font-size: 18px; max-width: 14em; }
  .cp-chiama-freccia { width: 36px; height: 36px; }
}

/* ── Il piede: apre col nome ──────────────────────────────────────────── */
.cp-piede { background: var(--paper); color: var(--inchiostro); padding: clamp(56px, 8vw, 110px) 0 28px; }
.cp-piede-nome {
  margin: 0 0 clamp(40px, 6vw, 80px);
  font: 800 11vw/.86 var(--font);
  letter-spacing: -.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: .06em;
}
.cp-piede-nome > span { letter-spacing: -.05em; }
.cp-piede-righe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 48px; }
.cp-persone { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cp-persone a { display: inline-block; font: 650 clamp(26px, 3vw, 36px)/1.1 var(--font); letter-spacing: -.03em; color: var(--verde-scuro); text-decoration: none; }
.cp-persone span { display: block; margin-top: 4px; font-size: 17px; line-height: 1.4; color: var(--inchiostro); }
.cp-piede-link { display: flex; flex-wrap: wrap; gap: 4px 28px; align-content: flex-start; }
.cp-piede-link a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; color: var(--inchiostro); text-decoration: none; }
.cp-persone a:focus-visible, .cp-piede-link a:focus-visible, .cp-legale a:focus-visible { outline: 3px solid var(--verde-scuro); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .cp-persone a:hover, .cp-piede-link a:hover, .cp-legale a:hover { text-decoration: underline; text-underline-offset: .2em; }
}
.cp-legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: clamp(48px, 7vw, 96px) 0 0; font-size: 14px; line-height: 1.5; }
.cp-legale a { color: var(--inchiostro); }
@media (min-width: 900px) {
  .cp-piede-nome > span { letter-spacing: -.05em; }
.cp-piede-righe { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .cp-piede-link { justify-content: flex-start; padding-top: 6px; gap: 4px 36px; }
}

/* ── L'anteprima nella home: il ventaglio ────────────────────────────────
   Un invito, non la pagina in piccolo: sei mini card a colore pieno (il
   colore del capitolo, l'immagine del prodotto, il nome), aperte a ventaglio
   attorno a un perno lontano sotto il centro. Arrivando si aprono (capitoli.js
   mette .aperto); ognuna porta al suo capitolo, il tasto alla pagina intera. */
.cp-home { position: relative; padding: clamp(90px, 10vw, 150px) 0; }
.cp-ventaglio {
  --w: clamp(150px, 16vw, 228px);   /* larghezza di una card */
  --ang: 9deg;                       /* apertura tra due card */
  position: relative;
  height: calc(var(--w) * 1.62);
  margin-top: clamp(40px, 5vw, 64px);
}
.vm {
  --k: calc(var(--i) - 2);
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--w);
  height: calc(var(--w) * 1.18);
  margin-left: calc(var(--w) / -2);
  overflow: hidden;
  border-radius: 18px;
  background: var(--cap-bg);
  color: var(--cap-ink);
  text-decoration: none;
  transform-origin: 50% 330%;
  transform: rotate(calc(var(--k) * var(--ang)));
  transition: transform 1.1s var(--esce) calc(var(--i) * 60ms), translate .45s var(--esce);
  -webkit-tap-highlight-color: transparent;
}
.vm-nome { position: absolute; left: 14px; top: 12px; z-index: 1; font: 700 15px/1.2 var(--font); letter-spacing: -.01em; }
.vm img { position: absolute; left: 8%; top: 22%; width: 84%; height: auto; }
.vm:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .vm:hover { translate: 0 -18px; z-index: 2; }
}
.vm:active { translate: 0 -10px; }
/* chiuso finché non arriva: un mazzo appena sfalsato (solo con lo script e col movimento) */
@media (prefers-reduced-motion: no-preference) {
  html.cp-js:not(.leggero) .cp-ventaglio:not(.aperto) .vm { transform: rotate(calc(var(--k) * 1.4deg)) translateY(30px); }
}
.cp-home-pie { display: flex; justify-content: center; margin-top: clamp(26px, 4vw, 44px); }
.cp-tasto-grande { min-height: 64px; padding: 0 36px; font-size: 19px; }
.cp-tasto-verde { --cp-tasto-bg: var(--verde); --cp-tasto-ink: var(--inchiostro); }
@media (max-width: 700px) {
  .cp-ventaglio { --w: 31vw; --ang: 6.5deg; height: calc(var(--w) * 1.5); }
  .vm { border-radius: 12px; }
  .vm-nome { left: 9px; top: 8px; font-size: 12px; }
  .cp-home-pie .cp-tasto { width: 100%; }
}

/* ── Modo leggero e meno movimento ────────────────────────────────────── */
html.leggero .cp-sotto, html.leggero .cp-pie .cp-tasto { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-sotto, .cp-pie .cp-tasto { transition: none; }
  .cap .cap-nome, .cap .cap-scena, .cap .cap-testo, .cp-voce { opacity: 1 !important; transform: none !important; }
}