/* Proponi un corso
   Stessa famiglia del catalogo a mosaico: fondo nero, Hanken Grotesk, i cinque colori dei giorni,
   una forma sola, la tessera quadrata. Qui il colore della piattaforma è il giallo del mercoledì. */

:root {
  --bg: #000000;
  --surface: #121212;
  --ink: #ffffff;
  --muted: #a6a6a6;

  --lun: #9ae187; --mar: #93f1f7; --mer: #f3ea7a; --gio: #fbb65c; --ven: #b9c8ff;
  --carta: var(--mer);              /* il tagliando */
  --carta-campo: #fbf6c4;           /* i campi, un tono più chiaro del tagliando */
  --carta-ink: #000000;
  --errore: #9b1c1c;                /* sul giallo: 7:1 */

  /* Il percorso: un solo colore, dal più scuro al più chiaro */
  --p1: #0c3a3d; --p2: #17686d; --p3: #3fb0b8; --p4: #93f1f7;

  --font: "Hanken Grotesk", system-ui, sans-serif;
  --step-small: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem);
  --step-hero: clamp(3.5rem, 1rem + 6.4vw, 6.75rem);

  --margin: clamp(16px, 2.4vw, 40px);
  --gap: clamp(112px, 12vw, 200px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--font); letter-spacing: -0.005em; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.045em; line-height: .95; }
:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Pulsante: un rettangolo pieno, angoli vivi come una tessera */
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px;
  background: var(--carta); color: #000; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 600; font-size: var(--step-body);
  transition: background-color .2s ease, transform .2s var(--ease-out);
}
.btn::after { content: ""; width: 10px; height: 10px; background: currentColor; transition: transform .3s var(--ease-out); }
.btn:hover { background: #fff; }
.btn:hover::after { transform: translateX(4px) rotate(45deg); }
.btn:active { transform: scale(.97); }
.btn-piccolo { min-height: 44px; font-size: var(--step-small); }
.btn-chiaro { background: #fff; }
.btn-chiaro::after, .btn-pericolo::after { display: none; }
.btn-pericolo { background: #ff8a80; }
.link { background: none; border: 0; padding: 8px 0; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; transition: text-decoration-color .2s ease; }
.link:hover { text-decoration-color: var(--carta); }

/* ---------- Barra in alto ---------- */
.bar { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--margin); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.04em; text-decoration: none; }
.marchietto { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 30px; height: 30px; }
.marchietto i:nth-child(1) { background: var(--lun); } .marchietto i:nth-child(2) { background: var(--mar); }
.marchietto i:nth-child(3) { background: var(--mer); } .marchietto i:nth-child(4) { background: var(--gio); }
.bar-links { display: flex; gap: 8px; font-weight: 600; }
.bar-links a { text-decoration: none; padding: 10px 14px; background: #000; }
.bar-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.bar-links #nav-conto { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-left: 6px; background: var(--carta); color: #000; font-variant-numeric: tabular-nums; }

/* ---------- Primo schermo: la tessera gigante ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; padding: 0 var(--margin); }
.hero-testo { grid-column: 1 / 7; align-self: center; position: relative; z-index: 2; display: grid; gap: 28px; justify-items: start; padding: 120px 0 64px; }
.hero h1 { font-size: var(--step-hero); line-height: .9; letter-spacing: -0.05em; }
.hero h1 .riga { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .riga > span { display: inline-block; }
.hero-lede { max-width: 30ch; font-size: var(--step-lead); line-height: 1.3; }
.hero-fatto { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: var(--step-body); }
.hero-fatto i { width: 14px; height: 14px; background: var(--carta); flex: none; }
.hero-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-tessera { position: absolute; top: -10svh; left: 52%; width: 120svh; height: 120svh; overflow: hidden; background: #222; }
.hero-tessera img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero-tessera figcaption { position: absolute; left: 0; bottom: 10svh; background: #000; padding: 12px 16px; font-size: var(--step-small); max-width: 32ch; }

/* ---------- Le tue proposte ---------- */
.mie { padding: var(--gap) var(--margin) 0; max-width: 1440px; margin: 0 auto; }
.mie-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 40px; }
.mie-head h2 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); }
.mie-head span { color: var(--muted); }
.voci { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 64px; }
.voce a { display: grid; grid-template-columns: 80px 1fr; gap: 20px; text-decoration: none; }
.voce svg { width: 80px; height: 80px; transition: transform .4s var(--ease-out); }
.voce a:hover svg { transform: rotate(-4deg) scale(1.05); }
.voce-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.voce-nome { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.03em; }
.voce-stato { font-weight: 600; white-space: nowrap; }
.voce-stato.inviata { color: var(--lun); }
.voce p { margin-top: 4px; max-width: 44ch; }
.voce .meta { color: var(--muted); }

/* ---------- Il tagliando ---------- */
.tagliando-sez { padding: var(--gap) var(--margin); }
.tagliando {
  position: relative; max-width: 1360px; margin: 0 auto; background: var(--carta); color: var(--carta-ink);
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}
/* Le due tacche sulla linea di taglio, in alto e in basso */
.tagliando::before, .tagliando::after { content: ""; position: absolute; left: 40%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--bg); }
.tagliando::before { top: -14px; } .tagliando::after { bottom: -14px; }
.matrice { padding: 48px clamp(24px, 3.4vw, 48px); }
.matrice h2 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); text-transform: uppercase; letter-spacing: -0.04em; }
.matrice-frase { margin-top: 18px; max-width: 34ch; }
.matrice-fissa { position: sticky; top: 24px; display: grid; gap: 28px; margin-top: 36px; }
.insegna svg { width: 100%; height: auto; display: block; }
.piccolo { font-size: var(--step-small); font-weight: 600; margin-bottom: 8px; }
.anteprima { background: #000; color: #fff; padding: 16px; }
.ant-giorno { display: inline-block; background: var(--c, #3a3a3a); color: var(--ci, #000); font-size: var(--step-body); font-weight: 600; letter-spacing: -0.03em; padding: 6px 10px 8px; }
.ant-voce { display: grid; grid-template-columns: 64px 1fr; gap: 14px; margin-top: 14px; }
.ant-voce svg { width: 64px; height: 64px; }
.ant-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ant-nome { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.02em; }
.ant-ora { white-space: nowrap; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.ant-testo { margin-top: 4px; font-size: var(--step-small); line-height: 1.4; }
.ant-meta { margin-top: 6px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--step-small); }
.ant-meta b { color: var(--c, #fff); }
.ant-tessere { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
.ant-tessere i { width: 8px; height: 8px; background: #2a2a2a; }
.vuota { color: #8f8f8f; }

/* Le voci pronte: undici tessere che si colorano */
.pronte-tessere { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.pronte-tessere i { aspect-ratio: 1; background: rgba(0, 0, 0, .14); transition: background-color .3s ease, transform .3s var(--ease-out); }
.pronte-tessere i.ok { background: #000; }
#pronte-testo { margin-top: 10px; font-weight: 600; }
.mancano { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.mancano a { font-size: var(--step-small); text-underline-offset: 3px; }
.stato:empty { display: none; }
.stato { background: #000; color: #fff; padding: 16px 18px; display: grid; gap: 10px; justify-items: start; }
.stato b { color: var(--lun); }
.stato .link { padding: 0; }

/* La linea di taglio: puntini tondi fra matrice e campi */
.campi { padding: 48px clamp(24px, 3.4vw, 56px) 56px; border-left: 5px dotted #000; display: grid; gap: 96px; min-width: 0; }
.gruppo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
.gruppo legend { padding: 0; margin-bottom: 4px; }
.gruppo h3 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); text-transform: uppercase; letter-spacing: -0.04em; }
.gruppo-nota { max-width: 54ch; }
.campo { display: grid; gap: 8px; align-content: start; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo label, .etichetta { font-weight: 600; padding: 0; }
.facolt { font-weight: 400; }
.campo input[type="text"], .campo input[type="number"], .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 2px solid rgba(0, 0, 0, .4); border-radius: 0;
  background: var(--carta-campo); color: #000; font-size: var(--step-body);
  transition: border-color .15s ease, background-color .15s ease;
}
.campo textarea { padding: 12px 14px; line-height: 1.45; resize: vertical; min-height: 140px; }
.campo select { appearance: none; background-image: none; cursor: pointer; }
.campo ::placeholder { color: #6e6a45; }
.campo input:hover, .campo select:hover, .campo textarea:hover { background: #fffbe0; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background: #fff; border-bottom-color: #000; }
.campo [aria-invalid="true"] { border-bottom-color: var(--errore); }
.aiuto { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step-small); }
.conta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta.oltre { color: var(--errore); font-weight: 600; }
.errore { color: var(--errore); font-weight: 600; font-size: var(--step-small); }
.errore:empty { display: none; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* La griglia dei turni: cinque giorni per due turni, come la legenda del catalogo */
.turni { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: #000; padding: 4px; }
.turni label { grid-column: var(--g); grid-row: var(--tu); position: relative; display: grid; gap: 2px; padding: 12px 10px; min-height: 64px; background: #000; color: #fff; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.turni label:hover { background: #262626; }
.turni input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.turni b { font-weight: 700; letter-spacing: -0.02em; }
.turni span { font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.turni label:has(input:checked) { background: var(--c); color: #000; }
.turni label:has(input:checked)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background: #000; }
.turni label:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: -6px; }

.spunte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; }
.spunte label, .impegno { display: flex; gap: 10px; align-items: center; min-height: 40px; cursor: pointer; font-weight: 500; }
.spunte input, .impegno input { width: 22px; height: 22px; accent-color: #000; flex: none; margin: 0; }

.riepilogo { background: #000; color: #fff; padding: 20px 24px; outline: none; }
.riepilogo h3 { font-size: var(--step-lead); letter-spacing: -0.03em; text-transform: none; }
.riepilogo ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.riepilogo a { color: #ffd2cc; text-underline-offset: 3px; }

.invio { display: grid; gap: 14px; }
.barra { width: 100%; min-height: 60px; border: 0; background: #000; color: var(--carta); font-weight: 700; font-size: var(--step-body); letter-spacing: -0.02em; cursor: pointer; transition: transform .2s var(--ease-out), background-color .2s ease; }
.barra:hover { background: #1f1f1f; }
.barra:active { transform: scale(.99); }
.barra[disabled] { background: rgba(0, 0, 0, .25); color: #000; cursor: not-allowed; }
.invio-sotto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.salvata { font-size: var(--step-small); font-weight: 500; }
.pericolo { color: var(--errore); }

/* ---------- La fascia del Piazzale ---------- */
.piazzale { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 var(--margin); }
.piazzale-testo { display: grid; align-content: space-between; gap: 24px; padding: 4px 24px 4px 0; }
.piazzale-testo h2 { font-size: clamp(2rem, 1rem + 1.8vw, 2.5rem); }
.piazzale figure { position: relative; overflow: hidden; aspect-ratio: 1; background: #222; }
.piazzale img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.piazzale figure:hover img { transform: scale(1.06); }
.piazzale figcaption { position: absolute; left: 0; bottom: 0; background: #000; padding: 10px 14px; font-size: var(--step-small); max-width: 90%; }

/* ---------- Dalla proposta all'aula: la fisarmonica ---------- */
.percorso { padding: var(--gap) var(--margin) 0; }
.percorso-intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; margin-bottom: 64px; }
.percorso-intro h2 { grid-column: 1 / 6; font-size: var(--step-head); }
.percorso-intro p { grid-column: 7 / 12; align-self: end; font-size: var(--step-lead); line-height: 1.35; }
.fisarmonica { display: flex; height: 520px; }
.tappa { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--c); color: var(--t); transition: flex-grow .45s var(--ease-out); }
.tappa.aperta { flex-grow: 5.6; }
.tappa-btn { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; }
.tappa-btn:focus-visible { outline-offset: -6px; outline-color: var(--t); }
.tappa-nome { position: absolute; left: 24px; bottom: 24px; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; transform-origin: left bottom; transform: rotate(-90deg) translateY(100%); transition: opacity .2s ease; }
.tappa.aperta .tappa-nome { opacity: 0; }
.tappa-corpo { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .3s ease .12s, visibility 0s .45s; }
.tappa.aperta .tappa-corpo { opacity: 1; visibility: visible; transition: opacity .3s ease .12s, visibility 0s 0s; }
.tappa-testo { padding: 32px; display: grid; align-content: space-between; min-width: 0; }
.tappa-testo h3 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); }
.tappa-testo .quando { font-weight: 700; font-size: var(--step-lead); margin-top: 10px; }
.tappa-testo p.descr { max-width: 36ch; font-size: var(--step-body); }
.tappa-testo a { font-weight: 600; }
.tappa-corpo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Le domande: schede a linguetta ---------- */
.domande { padding: var(--gap) var(--margin) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; }
.domande h2 { grid-column: 3 / 11; font-size: var(--step-head); margin-bottom: 72px; }
.schede { grid-column: 3 / 11; display: grid; }
.scheda {
  --tab: 0px; position: relative; background: var(--c); color: #000;
  clip-path: polygon(var(--tab) 0, calc(var(--tab) + 210px) 0, calc(var(--tab) + 210px) 40px, 100% 40px, 100% 100%, 0 100%, 0 40px, var(--tab) 40px);
  padding: 40px 0 0;
}
.scheda + .scheda { margin-top: -40px; }
.scheda-linguetta { position: absolute; top: 0; left: var(--tab); width: 210px; height: 40px; display: flex; align-items: center; padding: 0 16px; font-size: var(--step-small); font-weight: 700; }
.scheda-btn { display: block; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 18px 28px 58px; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; color: #000; }
.scheda-btn:focus-visible { outline: 3px solid #000; outline-offset: -6px; }
.scheda-risposta { padding: 0 28px 64px; max-width: calc(50ch + 56px); display: none; }
.scheda.aperta .scheda-btn { padding-bottom: 12px; }
.scheda.aperta .scheda-risposta { display: block; }

/* ---------- Piè di pagina: il nome a blocchi ---------- */
.footer { background: var(--surface); margin-top: 120px; padding: 56px var(--margin) 28px; }
.marchio { display: flex; align-items: flex-end; gap: 4px; height: 28svh; min-height: 200px; }
.marchio span { flex: 1; display: flex; align-items: flex-end; justify-content: center; color: #000; font-weight: 600; font-size: clamp(2rem, 7vw, 7.5rem); line-height: .8; letter-spacing: -0.05em; padding-bottom: 8px; transform-origin: bottom; }
.marchio span.spazio { flex: .35; background: none !important; }
.foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
.foot-h { font-size: var(--step-body); letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.3; }
.crediti summary { cursor: pointer; font-weight: 600; }
.crediti ul { list-style: none; padding: 10px 0 0; margin: 0; display: grid; gap: 4px; font-size: var(--step-small); }
.foot-last { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; font-size: var(--step-small); }

/* ---------- Finestra di conferma e avviso: galleggiano, quindi hanno un'ombra ---------- */
.dialogo { background: var(--carta); color: #000; border: 0; padding: 32px; width: min(480px, calc(100% - 32px)); box-shadow: 0 24px 64px rgba(0, 0, 0, .7); } /* taste-skill-ignore: la finestra di conferma galleggia sopra la pagina */
.dialogo::backdrop { background: rgba(0, 0, 0, .75); }
.dialogo h2 { font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1.1; }
.dialogo p { margin-top: 10px; }
.dialogo-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.avviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #fff; color: #000; padding: 14px 20px; font-weight: 600; z-index: 30; box-shadow: 0 12px 32px rgba(0, 0, 0, .6); } /* taste-skill-ignore: l'avviso galleggia sopra la pagina */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .tagliando { grid-template-columns: 1fr; }
  .tagliando::before, .tagliando::after { display: none; }
  .matrice-fissa { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .matrice-fissa .insegna { grid-column: 1 / -1; }
  .campi { border-left: 0; border-top: 5px dotted #000; }
  .piazzale { grid-template-columns: 1fr 1fr; }
  .piazzale-testo { grid-column: 1 / -1; padding: 0 0 24px; }
  .domande h2, .schede { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
  .bar { padding: 14px 16px; }
  .wordmark { font-size: var(--step-body); }
  .bar-links { gap: 6px; font-size: var(--step-small); }
  .hero { display: block; min-height: auto; padding: 0 16px; }
  .hero-testo { padding: 104px 0 0; gap: 20px; }
  .hero h1 { font-size: 15vw; }
  .hero-tessera { position: relative; top: auto; left: auto; width: calc(100% + 32px); height: auto; aspect-ratio: 1; margin: 40px -16px 0; }
  .hero-tessera figcaption { bottom: 0; }
  .voci { grid-template-columns: 1fr; }
  .tagliando-sez { padding: 96px 12px; }
  .matrice-fissa { grid-template-columns: 1fr; }
  .matrice, .campi { padding: 32px 20px; }
  .due, .spunte { grid-template-columns: 1fr; }
  /* al telefono una riga per giorno, le due fasce orarie affiancate */
  .turni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turni label { grid-column: var(--tu); grid-row: var(--g); }
  .solo-ampio { display: none; }
  .piazzale { grid-template-columns: 1fr; }
  .percorso-intro { display: block; }
  .percorso-intro p { margin-top: 20px; }
  .fisarmonica { flex-direction: column; height: auto; }
  .tappa { flex: none; min-height: 64px; }
  .tappa-btn { position: relative; inset: auto; height: 64px; padding: 0 20px; }
  .tappa-nome { position: static; transform: none; font-size: var(--step-body); display: flex; align-items: center; height: 64px; }
  .tappa.aperta .tappa-nome { opacity: 1; }
  .tappa-corpo { position: static; display: none; grid-template-columns: 1fr; }
  .tappa.aperta .tappa-corpo { display: grid; }
  .tappa-testo { padding: 0 20px 24px; gap: 16px; }
  .tappa-testo h3 { display: none; }
  .tappa-corpo img { aspect-ratio: 4 / 3; height: auto; }
  .domande { display: block; }
  .domande h2 { margin-bottom: 48px; }
  .scheda { clip-path: polygon(var(--tabm) 0, calc(var(--tabm) + 140px) 0, calc(var(--tabm) + 140px) 40px, 100% 40px, 100% 100%, 0 100%, 0 40px, var(--tabm) 40px); }
  .scheda-linguetta { left: var(--tabm); width: 140px; }
  .scheda-btn { padding: 16px 20px 56px; font-size: var(--step-body); }
  .scheda-risposta { padding: 0 20px 56px; }
  .foot-grid { grid-template-columns: 1fr; }
  .marchio { height: 22svh; min-height: 140px; }
  .marchio span { font-size: 8.4vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Entrate delle sezioni: la classe la mette lo script, quindi senza script tutto resta visibile */
.entra { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.entra.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .entra { opacity: 1; transform: none; } }
.tappa.entra { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), flex-grow .45s cubic-bezier(.16, 1, .3, 1); }