/* Fo.El. · la bacheca: riquadri pieni accostati come cassetti di uno scaffale ben tenuto.
   Un fondo grigio magazzino, l'inchiostro antracite, il rosso del marchio solo sulle azioni e su pochi riquadri. */
:root {
  --bg: #f4f3f0;
  --surface: #e6e4df;
  --surface-2: #d8d5ce;
  --light: #fbfbfa;
  --field-2: #2c2b28;
  --ink: #1d1c1a;
  --muted: #514d47;
  --accent: #d7232b;
  --accent-dark: #b51c23;
  --accent-ink: #ffffff;
  --field-1: #1d1c1a;
  --field-1-ink: #f2f2f0;

  --display: "Libre Franklin", "Arial Narrow", Arial, sans-serif;
  --text: "Source Serif 4", Georgia, serif;

  /* cinque misure, non di più */
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(140px, 14.4vw, 220px);

  --gap: 8px;
  --m: max(16px, env(safe-area-inset-left, 0px));
  --mr: max(16px, env(safe-area-inset-right, 0px));
  --pad: 22px;
  --sezione: 140px;
  --dur: 600ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.55 var(--text); }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* il riquadro: pieno, piatto, angoli vivi */
.t { background: var(--surface); padding: var(--pad); min-width: 0; }
.foto { padding: 0; overflow: hidden; background: var(--surface-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.forte { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }

.bottone { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; background: var(--accent); color: var(--accent-ink); font: 700 var(--step-body)/1.2 var(--display); letter-spacing: -0.01em; text-decoration: none; transition: background-color 160ms, transform 160ms var(--ease); }
.bottone:hover { background: var(--accent-dark); }
.bottone:active { transform: scale(.97); }
.bottone.chiaro { background: var(--field-1-ink); color: var(--ink); }
.bottone.chiaro:hover { background: #ffffff; }
.bottone.piccolo { min-height: 44px; padding: 10px 16px; font-size: var(--step-small); }

/* ---------- apertura: la lampadina accesa nel buio, come la prima schermata di PM ---------- */
.hero { position: relative; min-height: max(100svh, 640px); background: #000; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; animation: accende 2.2s var(--ease) both, deriva 26s 2.2s var(--ease) infinite alternate; transform-origin: 62% 40%; }
@keyframes accende { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes deriva { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero::after { content: ""; position: absolute; inset: 0; /* taste-skill-ignore: scrim neutro sulla foto */ background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.1) 100%); pointer-events: none; }
.testata { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 36px; padding: max(16px, env(safe-area-inset-top, 0px)) var(--mr) 16px var(--m); }
.marca { font: italic 700 var(--step-lead)/1 var(--display); letter-spacing: -0.04em; color: #fff; text-decoration: none; }
.marca i { color: var(--accent); font-style: inherit; }
.vie { display: flex; gap: 28px; }
.vie a { color: #fff; text-decoration: none; font: 700 var(--step-body)/1.2 var(--display); letter-spacing: -0.01em; padding-block: 8px; border-bottom: 2px solid transparent; transition: border-color 160ms; }
.vie a:hover { border-color: var(--accent); }
.testata-cta { margin-left: auto; }
.menu-btn { display: none; }
.hero-didascalia { position: absolute; right: var(--mr); bottom: clamp(28px, 5svh, 56px); z-index: 2; text-align: right; font: 700 var(--step-small)/1.4 var(--display); color: rgba(255,255,255,.75); animation: sale 900ms 1.4s var(--ease) both; }
.hero-didascalia b { display: block; color: #fff; }
.hero-didascalia .aperto { color: #7ee09a; }
.hero-testo { position: relative; z-index: 2; padding: 120px calc(var(--mr) + 280px) clamp(28px, 5svh, 56px) var(--m); }
.hero h1 { font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.05em; max-width: 8ch; animation: sale 1s 300ms var(--ease) both; }
.hero-piede { margin-top: clamp(20px, 3svh, 32px); display: flex; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; animation: tendina 1.4s 800ms cubic-bezier(.77, 0, .18, 1) both; }
.hero-piede p { max-width: 46ch; font-size: var(--step-body); color: rgba(255,255,255,.88); }
.hero-azioni { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; }
.link-chiaro { color: #fff; font: 700 var(--step-body)/1.2 var(--display); text-decoration: none; border-bottom: 2px solid var(--accent); padding-block: 6px; }
.link-chiaro:hover { color: #ffd9da; }
@keyframes sale { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tendina { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* le cifre, subito sotto */
.numeri { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.numeri .t { min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; font: 700 var(--step-small)/1.3 var(--display); }
.numeri b { font: 700 var(--step-head)/0.95 var(--display); letter-spacing: -0.04em; }
.n-foto { grid-column: span 4; }
.n-1, .n-2, .n-3, .n-4 { grid-column: span 2; }
.n-1 { background: var(--light); }
.n-1 b { color: var(--accent); }
.n-2 { background: var(--surface); }
.n-3 { background: var(--surface-2); }
.n-4 { background: var(--field-1); color: var(--field-1-ink); }
.crediti { margin-top: 32px; font-size: var(--step-small); color: #b9b6b0; }
.crediti a { color: inherit; }

main > .sez { margin-top: var(--sezione); padding-left: var(--m); padding-right: var(--mr); }

/* ---------- punti vendita ---------- */
.punti-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.punti-testa h2 { font-size: var(--step-head); max-width: 17ch; }
.punti-corpo { margin-top: 56px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
.schede { display: grid; gap: 6px; align-content: start; }
.schede button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; min-height: 64px; padding: 12px 16px; background: var(--surface); transition: background-color 160ms, color 160ms; }
.schede button b { font: 700 var(--step-body)/1.2 var(--display); }
.schede button small { font-size: var(--step-small); color: var(--muted); }
.schede button:hover { background: var(--surface-2); }
.schede button[aria-selected="true"] { background: var(--field-1); color: var(--field-1-ink); }
.schede button[aria-selected="true"] small { color: #c9c6c0; }
.schede button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.orari { display: grid; gap: 4px; align-content: start; }
.ora-adesso { font: 700 var(--step-lead)/1.25 var(--display); letter-spacing: -0.02em; padding-bottom: 16px; }
.ora-adesso .aperto { color: #1f7a3a; }
.ora-adesso .chiuso { color: var(--accent); }
.giorni { display: grid; gap: 4px; }
.giorni li { display: grid; grid-template-columns: 22% minmax(0, 1fr) auto; align-items: center; min-height: 64px; padding: 10px 20px; background: var(--surface); }
.giorni li:nth-child(even) { background: #edebe7; }
.giorni .g { font: 700 var(--step-body)/1.2 var(--display); }
.giorni .h { font-variant-numeric: tabular-nums; }
.giorni .n { font: 700 var(--step-small)/1.2 var(--display); }
.giorni li.oggi { background: var(--field-1); color: var(--field-1-ink); }
.sede-dati { margin-top: 16px; }
.sede-dati a { font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- intestazione comune delle sezioni ---------- */
.sez-testa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.sez-testa h2 { grid-column: 1 / 7; font-size: var(--step-head); }
.sez-testa p { grid-column: 8 / 13; max-width: 52ch; }
.vai { font: 700 var(--step-body)/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color 160ms; }
.vai:hover { color: var(--accent-dark); }

/* ---------- per chi lavoriamo: quattro porte ---------- */
.porte { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.porte-h { grid-column: 1 / 5; grid-row: span 2; background: var(--field-1); color: var(--field-1-ink); display: grid; align-content: space-between; gap: 24px; padding: 28px var(--pad); }
.porte-h h2 { font-size: var(--step-head); }
.porte-h p { max-width: 26ch; }
.porta { grid-column: span 4; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 280px; padding: 28px var(--pad); background: var(--light); }
.porta:nth-of-type(2), .porta:nth-of-type(3) { background: var(--surface); }
.porta h3 { font-size: var(--step-lead); letter-spacing: -0.025em; }
.porta p { max-width: 40ch; }
.porta-vie { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
.porta-vie a:not(.vai) { font-size: var(--step-small); color: var(--muted); text-underline-offset: 4px; }
.porta-vie a:not(.vai):hover { color: var(--ink); }

/* ---------- prodotti: i settori a sinistra, il settore aperto a destra ---------- */
.catalogo { margin-top: 48px; display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); grid-template-rows: repeat(7, auto) 1fr; gap: var(--gap); }
.cat { display: contents; }
.cat h3 { grid-column: 1; font-size: var(--step-body); letter-spacing: 0; line-height: 1.2; }
.cat h3 button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; width: 100%; min-height: 68px; padding: 12px 18px; background: var(--surface); transition: background-color 160ms, color 160ms; }
.cat h3 button span { font: 700 var(--step-body)/1.2 var(--display); letter-spacing: -0.01em; }
.cat h3 button small { font: 400 var(--step-small)/1.3 var(--text); color: var(--muted); }
.cat h3 button:hover { background: var(--surface-2); }
.cat h3 button[aria-expanded="true"] { background: var(--field-1); color: var(--field-1-ink); cursor: default; }
.cat h3 button[aria-expanded="true"] small { color: #c9c6c0; }
.cat h3 button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cat-corpo { grid-column: 2; grid-row: 1 / -1; display: none; align-content: start; gap: 28px; padding: 36px 40px; background: var(--light); }
.cat.aperta .cat-corpo { display: grid; }
.cat-frase { font: 700 var(--step-lead)/1.2 var(--display); letter-spacing: -0.025em; max-width: 30ch; }
.cat-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; }
.cat-lista li { padding: 10px 14px; background: var(--bg); }
.cat-marchi b { display: block; margin-bottom: 6px; font: 700 var(--step-small)/1.2 var(--display); color: var(--muted); }
.cat-azioni { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }

/* ---------- showroom: una foto tagliata nei riquadri ---------- */
.tessere { --cols: 6; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--gap); }
.tessere .t { aspect-ratio: 1; }
.tp { padding: 0; overflow: hidden; background: var(--surface-2) url("img/showroom.webp") no-repeat; background-size: var(--bw, 600%) var(--bh, 400%); background-position: var(--bx, 0) var(--by, 0); transition: transform 500ms var(--ease); }
.tp:hover { transform: scale(1.04); }
.tc { display: flex; flex-direction: column; }
.tc-h { grid-column: span 2; grid-row: span 2; aspect-ratio: auto !important; background: var(--field-1); color: var(--field-1-ink); justify-content: space-between; }
.tc-h h2 { font-size: var(--step-head); }
.tc-1, .tc-2, .tc-3 { font: 700 var(--step-body)/1.3 var(--display); letter-spacing: -0.01em; background: var(--light); }
.tc-a { background: var(--accent); color: var(--accent-ink); text-decoration: none; justify-content: flex-end; font: 700 var(--step-lead)/1.15 var(--display); letter-spacing: -0.02em; transition: background-color 160ms; }
.tc-a:hover { background: var(--accent-dark); }

/* ---------- servizi: fisarmonica ---------- */
/* cinque righe orizzontali: una aperta, in antracite; le altre chiare, leggibili da sinistra a destra */
.fisarmonica { margin-top: 64px; display: grid; gap: var(--gap); }
.fase { background: var(--surface); color: var(--ink); transition: background-color 200ms; }
.fase:nth-child(even) { background: var(--surface-2); }
.fase.aperta { background: var(--field-1); color: var(--field-1-ink); }
.fase h3 { font-size: var(--step-lead); }
.fase h3 button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; width: 100%; min-height: 80px; padding: 16px var(--pad); letter-spacing: -0.02em; }
.fase:not(.aperta) h3 button:hover { background: var(--light); }
.fase h3 button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.fase.aperta h3 button { cursor: default; font-size: var(--step-head); letter-spacing: -0.035em; min-height: 0; padding-top: 28px; }
.fase-corpo { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 400px; overflow: hidden; }
.fase.aperta .fase-corpo { display: grid; }
.fase-corpo p { grid-column: 1; grid-row: 1; align-self: end; padding: 28px var(--pad); max-width: 40ch; }
.fase-corpo img { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 0; object-fit: cover; }

/* ---------- marchi ---------- */
.tabellone { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.tabellone p.t { aspect-ratio: 2 / 1; display: grid; place-items: center; background: var(--light); font: italic 700 clamp(1.125rem, 0.7rem + 1.2vw, 2rem)/1 var(--display); letter-spacing: -0.03em; text-align: center; padding: 12px; }
.marchi-h { grid-column: span 2; background: var(--field-1); color: var(--field-1-ink); display: grid; align-content: space-between; gap: 16px; }
.marchi-h h2 { font-size: var(--step-head); }
.marchi-h p { font: 400 var(--step-body)/1.4 var(--text); letter-spacing: 0; }

/* ---------- chiusura ---------- */
main > .chiudi { margin-top: var(--sezione); padding-left: 0; padding-right: 0; overflow: hidden; }
.riga-cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; min-height: 380px; margin-inline: -4%; }
.riga-cta .lato:first-child { grid-column: 1 / 3; }
.cta-tile { grid-column: 3 / 11; background: var(--field-1); color: var(--field-1-ink); padding: 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-content: center; align-items: start; gap: 18px 48px; }
.cta-tile h2 { grid-column: 1; font-size: var(--step-head); }
.cta-tile p { grid-column: 1; max-width: 46ch; }
.cta-tile .bottone { grid-column: 1; justify-self: start; }
.cta-sedi { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.cta-sedi li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px; background: var(--field-2); }
.cta-sedi span { font: 700 var(--step-body)/1.3 var(--display); }
.pieno { grid-column: 11 / 13; }

/* ---------- piede ---------- */
.piede { margin-top: 96px; background: var(--field-1); color: var(--field-1-ink); padding: 24px var(--mr) 28px var(--m); }
.marchio { height: 30svh; min-height: 220px; display: flex; align-items: flex-end; gap: 4px; }
.marchio span { flex: 1 1 0; height: var(--h); background: var(--field-1-ink); color: var(--field-1); display: flex; align-items: flex-end; justify-content: center; font: italic 700 var(--step-display)/0.8 var(--display); overflow: hidden; }
.marchio .p { background: var(--accent); }
.marchio .p { flex: 0 0 7%; }
.piede-cols { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); }
.piede-cols > div { grid-column: span 2; }
.piede-cols .piede-sede { grid-column: 9 / 13; display: grid; gap: 12px; align-content: start; }
.piede h2 { font: 700 var(--step-body)/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 10px; }
.piede ul { display: grid; gap: 4px; font-size: var(--step-small); }
.piede ul a { text-decoration: none; }
.piede ul a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.piede-sede p { font-size: var(--step-small); }
.piede-ultima { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--step-small); }

/* ---------- comparsa ---------- */
.js .entra { opacity: 0; transform: translateY(24px); }
.js .entra.dentro { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .menu-btn { all: unset; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: #fff; font: 700 var(--step-body)/1 var(--display); cursor: pointer; border-bottom: 2px solid var(--accent); }
  .menu-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .vie { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--mr) 20px var(--m); background: #000; }
  .vie a { padding-block: 12px; font-size: var(--step-lead); }
  .testata.aperta .vie { display: flex; }
  .hero::after { /* taste-skill-ignore: scrim neutro sulla foto */ background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.2) 100%); }
  .hero-testo { padding-right: var(--mr); }
  .hero-didascalia { position: relative; right: auto; bottom: auto; text-align: left; order: 2; padding: 0 var(--mr) 28px var(--m); }
  .numeri .t { min-height: 200px; }
  .n-foto { grid-column: span 12; min-height: 260px; }
  .n-1, .n-2, .n-3, .n-4 { grid-column: span 3; }
  .tc-1, .tc-2, .tc-3 { font-size: var(--step-small); padding: 14px; }
  .tc-h, .tc-a { padding: 14px; }
  .tc-a { font-size: var(--step-body); }
  .tc-h h2 { font-size: var(--step-lead); }
  .fase-corpo { height: 340px; }
  .sez-testa h2 { grid-column: 1 / -1; }
  .sez-testa p { grid-column: 1 / 11; margin-top: 16px; }
  .porte-h { grid-column: 1 / -1; grid-row: auto; }
  .porta { grid-column: span 6; }
  .catalogo { grid-template-columns: minmax(200px, 4fr) minmax(0, 7fr); }
  .cat-corpo { padding: 28px; }
  .cat-lista { grid-template-columns: 1fr; }
  .tabellone { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marchi-h { grid-column: 1 / -1; }
  .cta-tile { grid-template-columns: 1fr; }
  .cta-sedi { grid-column: 1; grid-row: auto; }
  .piede-cols > div { grid-column: span 4; }
  .piede-cols .piede-sede { grid-column: 1 / -1; }
}

/* ---------- telefono ---------- */
@media (max-width: 700px) {
  :root { --gap: 6px; --pad: 16px; --sezione: 96px; --step-display: 16vw; }
  .testata { gap: 12px; }
  .testata-cta { min-height: 44px; padding: 10px 14px; font-size: var(--step-small); }
  .hero-testo { padding-top: 0; }
  .hero-azioni .bottone { width: 100%; justify-content: center; }
  .numeri { grid-template-columns: 1fr; }
  .numeri .t { min-height: 0; display: block; padding-block: 18px; font-size: var(--step-body); }
  .numeri b { font-size: var(--step-lead); letter-spacing: -0.02em; margin-right: .35em; }
  .n-foto { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .n-1, .n-2, .n-3, .n-4 { grid-column: auto; }
  .punti-testa .bottone { width: 100%; justify-content: center; }
  .punti-corpo { grid-template-columns: 1fr; margin-top: 28px; gap: 16px; }
  .schede { grid-template-columns: 1fr 1fr 1fr; }
  .schede button { padding: 10px 12px; min-height: 60px; }
  .schede button b { font-size: var(--step-small); }
  .schede button small { display: none; }
  .giorni li { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; }
  .giorni .h { grid-column: 1 / -1; grid-row: 2; }

  .porta { grid-column: 1 / -1; min-height: 0; padding: 22px 18px; }
  .porte-h { padding: 22px 18px; }
  .catalogo { margin-top: 28px; grid-template-columns: 1fr; grid-template-rows: none; }
  .cat { display: block; }
  .cat-corpo { gap: 20px; padding: 22px 16px 26px; }
  .cat-azioni .bottone { width: 100%; justify-content: center; }
  .numeri { margin-top: 28px; }

  .tessere { --cols: 3; }
  .tp { background-image: url("img/showroom-alto.webp"); }
  .tc-1, .tc-2, .tc-3, .tc-a, .tc-h { font-size: var(--step-small); padding: 10px; line-height: 1.2; }
  .tc-h h2 { font-size: var(--step-lead); }

  .sez-testa p { grid-column: 1 / -1; }
  .fisarmonica { margin-top: 32px; }
  .fase h3 button, .fase.aperta h3 button { min-height: 64px; padding: 16px; font-size: var(--step-body); letter-spacing: -0.01em; }
  .fase.aperta h3 button { font-size: var(--step-lead); }
  .fase-corpo { height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .fase-corpo img { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .fase-corpo p { grid-row: 2; padding: 16px 16px 22px; }

  .tabellone { grid-template-columns: 1fr 1fr; }
  .tabellone p.t { aspect-ratio: auto; padding: 16px 10px; }
  .marchi-h { grid-column: 1 / -1; min-height: 120px; }

  .riga-cta { grid-template-columns: 1fr 1fr; margin-inline: var(--m) var(--mr); gap: var(--gap); }
  .cta-tile { grid-column: 1 / -1; grid-row: 1; padding: 24px 18px; }
  .cta-tile .bottone { width: 100%; justify-content: center; }
  .cta-sedi li { padding: 8px 10px; }
  .riga-cta .lato:first-child { grid-column: 1; grid-row: 2; height: 120px; }
  .pieno { grid-column: 2; grid-row: 2; height: 120px; }

  .marchio { height: 22svh; min-height: 140px; }
  .piede-cols > div { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-foto, .hero h1, .hero-piede, .hero-didascalia { animation: none; }
  .js .entra, .js .entra.dentro { opacity: 1; transform: none; transition: none; }
  .fase, .fase-corpo, .tp { transition: none; }
}